UNPKG

@lobehub/ui

Version:

Lobe UI is an open-source UI component library for building AIGC web apps

github.com/lobehub/lobe-ui

lobehub/lobe-ui

1 lines • 8.81 kB
1
{"version":3,"file":"style.mjs","names":["lobeStaticStylish"],"sources":["../../../src/base-ui/Input/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nimport { controlHeight } from '@/base-ui/controlSize';\nimport { lobeStaticStylish } from '@/styles';\n\n/**\n * Only the field's own control counts as disabled. NumberField disables its\n * increment / decrement buttons at max / min, and a bare `:has(:disabled)` greyed\n * the whole root whenever the value sat on a bound.\n */\nexport const disabledControl = 'input:disabled, textarea:disabled';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n clear: css`\n cursor: pointer;\n\n display: inline-flex;\n flex: none;\n align-items: center;\n justify-content: center;\n\n width: 16px;\n height: 16px;\n padding: 0;\n border: 0;\n border-radius: 50%;\n\n color: ${cssVar.colorBgContainer};\n\n visibility: hidden;\n background: ${cssVar.colorTextQuaternary};\n\n &:hover {\n background: ${cssVar.colorTextTertiary};\n }\n `,\n count: css`\n pointer-events: none;\n\n position: absolute;\n inset-block-end: 6px;\n inset-inline-end: 8px;\n\n display: inline-flex;\n align-items: center;\n\n height: 20px;\n padding-inline: 8px;\n border-radius: 999px;\n\n font-size: 11px;\n font-weight: 600;\n font-variant-numeric: tabular-nums;\n color: ${cssVar.colorTextSecondary};\n\n background: ${cssVar.colorFillTertiary};\n\n &[data-over] {\n color: ${cssVar.colorWhite};\n background: ${cssVar.colorError};\n }\n `,\n textareaClear: css`\n position: absolute;\n inset-block-start: 10px;\n inset-inline-end: 10px;\n `,\n textareaWithCount: css`\n padding-block-end: 30px;\n `,\n borderless: css`\n border: 1px solid transparent;\n background: none;\n `,\n filled: css`\n border: 1px solid transparent;\n background: ${cssVar.colorFillTertiary};\n\n &:hover:not(:focus-within, [data-disabled]) {\n background: ${cssVar.colorFillSecondary};\n }\n `,\n input: css`\n flex: 1;\n\n min-width: 0;\n padding: 0;\n border: none;\n\n font: inherit;\n color: inherit;\n\n appearance: none;\n background: transparent;\n outline: none;\n\n &::placeholder {\n color: ${cssVar.colorTextPlaceholder};\n }\n\n /* the root shows focus via its border; outrank global :focus-visible rings */\n &:focus-visible {\n outline: none;\n }\n `,\n invalid: css`\n &:has([data-invalid], [aria-invalid='true']) {\n border-color: ${cssVar.colorError};\n\n &:focus-within {\n border-color: ${cssVar.colorError};\n box-shadow: 0 0 0 2px ${cssVar.colorErrorBg};\n }\n }\n `,\n outlined: css`\n border: 1px solid ${cssVar.colorBorderSecondary};\n background: ${cssVar.colorBgContainer};\n\n &:hover:not(:focus-within, [data-disabled]) {\n border-color: ${cssVar.colorBorder};\n }\n\n &:focus-within {\n border-color: ${cssVar.colorPrimary};\n box-shadow: 0 0 0 2px ${cssVar.colorPrimaryBg};\n }\n `,\n root: css`\n cursor: text;\n\n display: inline-flex;\n gap: 8px;\n align-items: center;\n\n box-sizing: border-box;\n width: 100%;\n padding-inline: 12px;\n border-radius: ${cssVar.borderRadius};\n\n font-size: 14px;\n color: ${cssVar.colorText};\n\n transition:\n background 150ms ${cssVar.motionEaseOut},\n border-color 150ms ${cssVar.motionEaseOut},\n box-shadow 150ms ${cssVar.motionEaseOut};\n\n &[data-disabled],\n &:has(${disabledControl}) {\n cursor: not-allowed;\n color: ${cssVar.colorTextQuaternary};\n opacity: 0.66;\n }\n\n &:hover [data-lobe-input-clear],\n &:focus-within [data-lobe-input-clear] {\n visibility: visible;\n }\n `,\n shadow: lobeStaticStylish.shadow,\n sizeLarge: css`\n min-height: ${controlHeight.large}px;\n border-radius: ${cssVar.borderRadiusLG};\n font-size: 16px;\n `,\n sizeMiddle: css`\n min-height: ${controlHeight.middle}px;\n `,\n sizeSmall: css`\n min-height: ${controlHeight.small}px;\n padding-inline: 8px;\n border-radius: ${cssVar.borderRadiusSM};\n font-size: 12px;\n `,\n numberControl: css`\n cursor: pointer;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n width: 20px;\n height: 13px;\n margin: 0;\n padding: 0;\n border: none;\n border-radius: 4px;\n\n color: ${cssVar.colorTextTertiary};\n\n background: none;\n outline: none;\n\n transition:\n color 150ms ${cssVar.motionEaseOut},\n background 150ms ${cssVar.motionEaseOut};\n\n &:hover:not(:disabled) {\n color: ${cssVar.colorText};\n background: ${cssVar.colorFillSecondary};\n }\n\n &:disabled {\n cursor: not-allowed;\n opacity: 0.3;\n }\n `,\n numberControlLarge: css`\n width: 22px;\n height: 15px;\n `,\n numberControlSmall: css`\n width: 16px;\n height: 10px;\n border-radius: 3px;\n `,\n numberControls: css`\n display: flex;\n flex: none;\n flex-direction: column;\n margin-inline-end: -6px;\n `,\n numberControlsSmall: css`\n margin-inline-end: -4px;\n `,\n numberInput: css`\n font-variant-numeric: tabular-nums;\n `,\n otpCell: css`\n flex: none;\n width: ${controlHeight.middle}px;\n padding-inline: 0;\n text-align: center;\n `,\n otpRoot: css`\n display: inline-flex;\n gap: 8px;\n align-items: center;\n `,\n passwordToggle: css`\n cursor: pointer;\n\n display: inline-flex;\n align-items: center;\n justify-content: center;\n\n margin: 0;\n padding: 0;\n border: none;\n\n color: ${cssVar.colorTextTertiary};\n\n background: none;\n outline: none;\n\n transition: color 150ms ${cssVar.motionEaseOut};\n\n &:hover {\n color: ${cssVar.colorText};\n }\n `,\n slot: css`\n display: inline-flex;\n flex: none;\n align-items: center;\n color: ${cssVar.colorTextTertiary};\n `,\n textarea: css`\n position: relative;\n height: auto;\n padding-block: 8px;\n\n textarea {\n resize: none;\n min-height: calc(1.5em * var(--textarea-min-rows, 2));\n max-height: var(--textarea-max-height, none);\n line-height: 1.5;\n }\n `,\n textareaAutoSize: css`\n textarea {\n field-sizing: content;\n }\n `,\n textareaResize: css`\n textarea {\n resize: vertical;\n }\n `,\n}));\n\nexport const rootVariants = cva([styles.root, styles.invalid], {\n defaultVariants: {\n shadow: false,\n size: 'middle',\n variant: 'outlined',\n },\n variants: {\n shadow: {\n false: null,\n true: styles.shadow,\n },\n size: {\n large: styles.sizeLarge,\n middle: styles.sizeMiddle,\n small: styles.sizeSmall,\n },\n variant: {\n borderless: styles.borderless,\n filled: styles.filled,\n outlined: styles.outlined,\n },\n },\n});\n"],"mappings":";;;;;;;;;;AAWA,MAAa,kBAAkB;AAE/B,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,OAAO,GAAG;;;;;;;;;;;;;;aAcC,OAAO,iBAAiB;;;kBAGnB,OAAO,oBAAoB;;;oBAGzB,OAAO,kBAAkB;;;CAG3C,OAAO,GAAG;;;;;;;;;;;;;;;;;aAiBC,OAAO,mBAAmB;;kBAErB,OAAO,kBAAkB;;;eAG5B,OAAO,WAAW;oBACb,OAAO,WAAW;;;CAGpC,eAAe,GAAG;;;;;CAKlB,mBAAmB,GAAG;;;CAGtB,YAAY,GAAG;;;;CAIf,QAAQ,GAAG;;kBAEK,OAAO,kBAAkB;;;oBAGvB,OAAO,mBAAmB;;;CAG5C,OAAO,GAAG;;;;;;;;;;;;;;;eAeG,OAAO,qBAAqB;;;;;;;;CAQzC,SAAS,GAAG;;sBAEQ,OAAO,WAAW;;;wBAGhB,OAAO,WAAW;gCACV,OAAO,aAAa;;;;CAIlD,UAAU,GAAG;wBACS,OAAO,qBAAqB;kBAClC,OAAO,iBAAiB;;;sBAGpB,OAAO,YAAY;;;;sBAInB,OAAO,aAAa;8BACZ,OAAO,eAAe;;;CAGlD,MAAM,GAAG;;;;;;;;;;qBAUU,OAAO,aAAa;;;aAG5B,OAAO,UAAU;;;yBAGL,OAAO,cAAc;2BACnB,OAAO,cAAc;yBACvB,OAAO,cAAc;;;YAGlC,gBAAgB;;eAEb,OAAO,oBAAoB;;;;;;;;;CASxC,QAAQA,cAAkB;CAC1B,WAAW,GAAG;kBACE,cAAc,MAAM;qBACjB,OAAO,eAAe;;;CAGzC,YAAY,GAAG;kBACC,cAAc,OAAO;;CAErC,WAAW,GAAG;kBACE,cAAc,MAAM;;qBAEjB,OAAO,eAAe;;;CAGzC,eAAe,GAAG;;;;;;;;;;;;;;aAcP,OAAO,kBAAkB;;;;;;oBAMlB,OAAO,cAAc;yBAChB,OAAO,cAAc;;;eAG/B,OAAO,UAAU;oBACZ,OAAO,mBAAmB;;;;;;;;CAQ5C,oBAAoB,GAAG;;;;CAIvB,oBAAoB,GAAG;;;;;CAKvB,gBAAgB,GAAG;;;;;;CAMnB,qBAAqB,GAAG;;;CAGxB,aAAa,GAAG;;;CAGhB,SAAS,GAAG;;aAED,cAAc,OAAO;;;;CAIhC,SAAS,GAAG;;;;;CAKZ,gBAAgB,GAAG;;;;;;;;;;;aAWR,OAAO,kBAAkB;;;;;8BAKR,OAAO,cAAc;;;eAGpC,OAAO,UAAU;;;CAG9B,MAAM,GAAG;;;;aAIE,OAAO,kBAAkB;;CAEpC,UAAU,GAAG;;;;;;;;;;;;CAYb,kBAAkB,GAAG;;;;;CAKrB,gBAAgB,GAAG;;;;;AAKrB,EAAE;AAEF,MAAa,eAAe,IAAI,CAAC,OAAO,MAAM,OAAO,OAAO,GAAG;CAC7D,iBAAiB;EACf,QAAQ;EACR,MAAM;EACN,SAAS;CACX;CACA,UAAU;EACR,QAAQ;GACN,OAAO;GACP,MAAM,OAAO;EACf;EACA,MAAM;GACJ,OAAO,OAAO;GACd,QAAQ,OAAO;GACf,OAAO,OAAO;EAChB;EACA,SAAS;GACP,YAAY,OAAO;GACnB,QAAQ,OAAO;GACf,UAAU,OAAO;EACnB;CACF;AACF,CAAC"}