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 • 6.39 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\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\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 invalid: css`\n &:has([data-invalid]) {\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(:disabled) {\n cursor: not-allowed;\n color: ${cssVar.colorTextQuaternary};\n opacity: 0.66;\n }\n `,\n shadow: lobeStaticStylish.shadow,\n sizeLarge: css`\n height: ${controlHeight.large}px;\n border-radius: ${cssVar.borderRadiusLG};\n font-size: 16px;\n `,\n sizeMiddle: css`\n height: ${controlHeight.middle}px;\n `,\n sizeSmall: css`\n 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 flex: 1;\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:not(:disabled) {\n color: ${cssVar.colorText};\n }\n\n &:disabled {\n cursor: not-allowed;\n opacity: 0.4;\n }\n `,\n numberControls: css`\n display: flex;\n flex: none;\n flex-direction: column;\n align-self: stretch;\n\n width: 22px;\n margin-inline-end: -8px;\n border-inline-start: 1px solid ${cssVar.colorBorderSecondary};\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 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":";;;;;AAMA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,YAAY,GAAG;;;;CAIf,QAAQ,GAAG;;kBAEK,OAAO,kBAAkB;;;oBAGvB,OAAO,mBAAmB;;;CAG5C,OAAO,GAAG;;;;;;;;;;;;;;;eAeG,OAAO,qBAAqB;;;CAGzC,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;;;;;eAK/B,OAAO,oBAAoB;;;;CAIxC,QAAQA,cAAkB;CAC1B,WAAW,GAAG;cACF,cAAc,MAAM;qBACb,OAAO,eAAe;;;CAGzC,YAAY,GAAG;cACH,cAAc,OAAO;;CAEjC,WAAW,GAAG;cACF,cAAc,MAAM;;qBAEb,OAAO,eAAe;;;CAGzC,eAAe,GAAG;;;;;;;;;;;;aAYP,OAAO,kBAAkB;;;;;8BAKR,OAAO,cAAc;;;eAGpC,OAAO,UAAU;;;;;;;;CAQ9B,gBAAgB,GAAG;;;;;;;;qCAQgB,OAAO,qBAAqB;;CAE/D,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;;;;;;;;;;;CAWb,kBAAkB,GAAG;;;;;CAKrB,gBAAgB,GAAG;;;;;CAKpB,EAAE;AAEH,MAAa,eAAe,IAAI,CAAC,OAAO,MAAM,OAAO,QAAQ,EAAE;CAC7D,iBAAiB;EACf,QAAQ;EACR,MAAM;EACN,SAAS;EACV;CACD,UAAU;EACR,QAAQ;GACN,OAAO;GACP,MAAM,OAAO;GACd;EACD,MAAM;GACJ,OAAO,OAAO;GACd,QAAQ,OAAO;GACf,OAAO,OAAO;GACf;EACD,SAAS;GACP,YAAY,OAAO;GACnB,QAAQ,OAAO;GACf,UAAU,OAAO;GAClB;EACF;CACF,CAAC"}