silver-ui 0.7.1 → 0.7.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{chunk-JFLU2X5Q.js → chunk-5HPXPF3F.js} +4 -4
- package/dist/{chunk-JFLU2X5Q.js.map → chunk-5HPXPF3F.js.map} +1 -1
- package/dist/{chunk-IE7GWY4E.cjs → chunk-5MCI3ILK.cjs} +30 -30
- package/dist/{chunk-IE7GWY4E.cjs.map → chunk-5MCI3ILK.cjs.map} +1 -1
- package/dist/{chunk-IH6DJWYH.cjs → chunk-63QPCV4F.cjs} +19 -19
- package/dist/{chunk-IH6DJWYH.cjs.map → chunk-63QPCV4F.cjs.map} +1 -1
- package/dist/{chunk-223UOU3H.js → chunk-6OWEKKOC.js} +3 -3
- package/dist/{chunk-223UOU3H.js.map → chunk-6OWEKKOC.js.map} +1 -1
- package/dist/{chunk-J4MQQ4K5.js → chunk-ACGPBJIS.js} +3 -3
- package/dist/{chunk-J4MQQ4K5.js.map → chunk-ACGPBJIS.js.map} +1 -1
- package/dist/{chunk-AX653SYJ.js → chunk-BBLAZNCC.js} +3 -3
- package/dist/{chunk-AX653SYJ.js.map → chunk-BBLAZNCC.js.map} +1 -1
- package/dist/{chunk-WIFMXZIN.cjs → chunk-BF2DUOC3.cjs} +6 -6
- package/dist/{chunk-WIFMXZIN.cjs.map → chunk-BF2DUOC3.cjs.map} +1 -1
- package/dist/{chunk-SY2A4K6P.cjs → chunk-CQYBC3RJ.cjs} +6 -6
- package/dist/{chunk-SY2A4K6P.cjs.map → chunk-CQYBC3RJ.cjs.map} +1 -1
- package/dist/{chunk-EQFSDFV2.cjs → chunk-D7TT4HUI.cjs} +4 -4
- package/dist/{chunk-EQFSDFV2.cjs.map → chunk-D7TT4HUI.cjs.map} +1 -1
- package/dist/{chunk-YOAFVMEN.cjs → chunk-DDMUYVSV.cjs} +4 -4
- package/dist/{chunk-YOAFVMEN.cjs.map → chunk-DDMUYVSV.cjs.map} +1 -1
- package/dist/{chunk-YRJYWTVG.js → chunk-GQ73VKKN.js} +3 -3
- package/dist/{chunk-YRJYWTVG.js.map → chunk-GQ73VKKN.js.map} +1 -1
- package/dist/{chunk-MUXUHIIV.js → chunk-HC57X3U4.js} +3 -3
- package/dist/{chunk-MUXUHIIV.js.map → chunk-HC57X3U4.js.map} +1 -1
- package/dist/{chunk-NMC7QG2X.cjs → chunk-HENIVDYQ.cjs} +6 -6
- package/dist/{chunk-NMC7QG2X.cjs.map → chunk-HENIVDYQ.cjs.map} +1 -1
- package/dist/{chunk-ZNAGK36T.cjs → chunk-HN4W6TM6.cjs} +7 -7
- package/dist/{chunk-ZNAGK36T.cjs.map → chunk-HN4W6TM6.cjs.map} +1 -1
- package/dist/{chunk-DUGGZUJP.cjs → chunk-J242UTPO.cjs} +7 -7
- package/dist/{chunk-DUGGZUJP.cjs.map → chunk-J242UTPO.cjs.map} +1 -1
- package/dist/{chunk-3M23WX6K.js → chunk-KB36TWOU.js} +4 -3
- package/dist/chunk-KB36TWOU.js.map +1 -0
- package/dist/{chunk-RUQODCTW.cjs → chunk-KLCEDPJ4.cjs} +5 -5
- package/dist/{chunk-RUQODCTW.cjs.map → chunk-KLCEDPJ4.cjs.map} +1 -1
- package/dist/{chunk-4NPVIEWF.js → chunk-NIKT7XSO.js} +3 -3
- package/dist/{chunk-4NPVIEWF.js.map → chunk-NIKT7XSO.js.map} +1 -1
- package/dist/{chunk-OP6WQYYP.js → chunk-OPBELSKN.js} +4 -4
- package/dist/{chunk-OP6WQYYP.js.map → chunk-OPBELSKN.js.map} +1 -1
- package/dist/{chunk-4UYMGEBF.js → chunk-OUUG4RHO.js} +3 -3
- package/dist/{chunk-4UYMGEBF.js.map → chunk-OUUG4RHO.js.map} +1 -1
- package/dist/{chunk-A4QLLTMD.js → chunk-PGBYMBGH.js} +10 -10
- package/dist/{chunk-A4QLLTMD.js.map → chunk-PGBYMBGH.js.map} +1 -1
- package/dist/{chunk-2KLTODOC.js → chunk-PK3NJSHQ.js} +3 -3
- package/dist/{chunk-2KLTODOC.js.map → chunk-PK3NJSHQ.js.map} +1 -1
- package/dist/{chunk-76GVUEFH.cjs → chunk-PXTTIAC4.cjs} +4 -4
- package/dist/{chunk-76GVUEFH.cjs.map → chunk-PXTTIAC4.cjs.map} +1 -1
- package/dist/{chunk-GFMQIR5U.js → chunk-Q6YOSQAM.js} +3 -3
- package/dist/{chunk-GFMQIR5U.js.map → chunk-Q6YOSQAM.js.map} +1 -1
- package/dist/{chunk-UR5EWWWL.cjs → chunk-QQCEGAUQ.cjs} +7 -7
- package/dist/{chunk-UR5EWWWL.cjs.map → chunk-QQCEGAUQ.cjs.map} +1 -1
- package/dist/{chunk-VULMEKZZ.cjs → chunk-TACO5IWI.cjs} +9 -9
- package/dist/{chunk-VULMEKZZ.cjs.map → chunk-TACO5IWI.cjs.map} +1 -1
- package/dist/{chunk-7WQW7H3D.js → chunk-TP6RGZ6A.js} +9 -9
- package/dist/{chunk-7WQW7H3D.js.map → chunk-TP6RGZ6A.js.map} +1 -1
- package/dist/{chunk-VXBVSYPA.cjs → chunk-VPHB56GK.cjs} +4 -3
- package/dist/chunk-VPHB56GK.cjs.map +1 -0
- package/dist/{chunk-VEQ5H765.js → chunk-WLWSQKWI.js} +3 -3
- package/dist/{chunk-VEQ5H765.js.map → chunk-WLWSQKWI.js.map} +1 -1
- package/dist/{chunk-I4XYOJJS.cjs → chunk-ZDZ7FW6V.cjs} +7 -7
- package/dist/{chunk-I4XYOJJS.cjs.map → chunk-ZDZ7FW6V.cjs.map} +1 -1
- package/dist/components/AutocompleteInput/index.cjs +6 -6
- package/dist/components/AutocompleteInput/index.js +2 -2
- package/dist/components/DateInput/index.cjs +3 -3
- package/dist/components/DateInput/index.js +2 -2
- package/dist/components/DateRangeInput/index.cjs +3 -3
- package/dist/components/DateRangeInput/index.js +2 -2
- package/dist/components/DateTimeInput/index.cjs +5 -5
- package/dist/components/DateTimeInput/index.js +4 -4
- package/dist/components/Field/inputStyles.d.ts.map +1 -1
- package/dist/components/MultiSelect/index.cjs +3 -3
- package/dist/components/MultiSelect/index.js +2 -2
- package/dist/components/NumberInput/index.cjs +3 -3
- package/dist/components/NumberInput/index.js +2 -2
- package/dist/components/PasswordInput/index.cjs +4 -4
- package/dist/components/PasswordInput/index.js +3 -3
- package/dist/components/SearchFilterInput/index.cjs +17 -17
- package/dist/components/SearchFilterInput/index.js +9 -9
- package/dist/components/Select/index.cjs +4 -4
- package/dist/components/Select/index.js +2 -2
- package/dist/components/Table/index.cjs +36 -36
- package/dist/components/Table/index.js +10 -10
- package/dist/components/TagsInput/index.cjs +4 -4
- package/dist/components/TagsInput/index.js +3 -3
- package/dist/components/TextArea/index.cjs +3 -3
- package/dist/components/TextArea/index.js +2 -2
- package/dist/components/TextInput/index.cjs +3 -3
- package/dist/components/TextInput/index.js +2 -2
- package/dist/components/TimeInput/index.cjs +3 -3
- package/dist/components/TimeInput/index.js +2 -2
- package/dist/index.cjs +65 -65
- package/dist/index.js +15 -15
- package/dist/styles.css +1 -1
- package/package.json +1 -1
- package/dist/chunk-3M23WX6K.js.map +0 -1
- package/dist/chunk-VXBVSYPA.cjs.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/TextArea/TextArea.tsx"],"names":[],"mappings":";;;;;;;;;;;;AA2IA,IAAM,MAAA,GAAS;AAAA,EACb,SAAS,GAAA,CAAI;AAAA,IACX,UAAA,EAAY,YAAA;AAAA,IACZ,EAAA,EAAI;AAAA,GACL,CAAA;AAAA,EACD,UAAU,GAAA,CAAI;AAAA,IACZ,MAAA,EAAQ,UAAA;AAAA,IACR,IAAA,EAAM;AAAA,GACP,CAAA;AAAA,EACD,SAAS,GAAA,CAAI;AAAA,IACX,SAAA,EAAW,UAAA;AAAA,IACX,EAAA,EAAI;AAAA,GACL,CAAA;AAAA,EACD,kBAAkB,GAAA,CAAI;AAAA,IACpB,KAAA,EAAO;AAAA,GACR;AACH,CAAA;AAKO,SAAS,QAAA,CAAS;AAAA,EACvB,KAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,IAAA,GAAO,CAAA;AAAA,EACP,IAAA,GAAO,IAAA;AAAA,EACP,WAAA;AAAA,EACA,aAAA,GAAgB,KAAA;AAAA,EAChB,UAAA;AAAA,EACA,UAAA;AAAA,EACA,UAAA,GAAa,KAAA;AAAA,EACb,SAAA,GAAY,KAAA;AAAA,EACZ,aAAA,GAAgB,IAAA;AAAA,EAChB,YAAA,GAAe,KAAA;AAAA,EACf,QAAA;AAAA,EACA,MAAA;AAAA,EACA,SAAA;AAAA,EACA,YAAA;AAAA,EACA,SAAA;AAAA,EACA,WAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA,MAAA;AAAA,EACA,SAAA;AAAA,EACA,aAAA,EAAe,UAAA;AAAA,EACf,KAAA;AAAA,EACA;AACF,CAAA,EAAqC;AACnC,EAAA,MAAM,UAAU,KAAA,EAAM;AACtB,EAAA,MAAM,gBAAgB,WAAA,CAAY,WAAW,CAAA,GACzC,CAAA,EAAG,OAAO,CAAA,YAAA,CAAA,GACV,MAAA;AACJ,EAAA,MAAM,eAAA,GAAkB,kBAAA,CAAmB,OAAA,EAAS,MAAM,CAAA;AAC1D,EAAA,MAAM,SAAA,GAAY,SAAA,IAAa,IAAA,GAAO,CAAA,EAAG,OAAO,CAAA,QAAA,CAAA,GAAa,MAAA;AAC7D,EAAA,MAAM,WAAA,GAAc,cAAA,CAAe,aAAA,EAAe,eAAA,EAAiB,SAAS,CAAA;AAC5E,EAAA,MAAM,WAAA,GAAc,SAAA,IAAa,IAAA,IAAQ,KAAA,CAAM,MAAA,GAAS,SAAA;AAExD,EAAA,MAAM,SAAA,GAAY,YAAA,CAAa,UAAA,EAAY,UAAU,CAAA;AAErD,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA;AAAA,MACA,WAAA;AAAA,MACA,aAAA;AAAA,MACA,OAAA;AAAA,MACA,UAAA;AAAA,MACA,aAAA;AAAA,MACC,GAAG,SAAA;AAAA,MACJ,KAAA;AAAA,MACA,SAAA;AAAA,MACA,YAAA;AAAA,MACA,MAAA,EACE,UAAU,IAAA,GAAO,MAAA,GAAY,EAAC,GAAG,MAAA,EAAQ,WAAW,eAAA,EAAe;AAAA,MAErE,KAAA;AAAA,MACA,QAAA,EAAA;AAAA,wBAAA,IAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,EAAA;AAAA,cACT,WAAA,CAAY;AAAA,gBACV,IAAA;AAAA,gBACA,QAAQ,MAAA,EAAQ,IAAA;AAAA,gBAChB;AAAA,eACD,CAAA;AAAA,cACD,MAAA,CAAO;AAAA,aACT;AAAA,YACC,QAAA,EAAA;AAAA,cAAA,SAAA,IAAa,IAAA,mBACZ,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,YAAY,QAAA,EAC3B,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,KAAA,EAAM,aAAY,IAAA,EAAM,SAAA,EAAW,IAAA,EAAK,IAAA,EAAK,GACrD,CAAA,GACE,IAAA;AAAA,8BACJ,GAAA;AAAA,gBAAC,UAAA;AAAA,gBAAA;AAAA,kBACC,aAAW,SAAA,IAAa,MAAA;AAAA,kBACxB,kBAAA,EAAkB,WAAA;AAAA,kBAClB,cAAA,EAAc,MAAA,EAAQ,IAAA,KAAS,OAAA,IAAW,WAAA,IAAe,MAAA;AAAA,kBACzD,iBAAe,UAAA,IAAc,MAAA;AAAA,kBAE7B,SAAA,EAAW,YAAA;AAAA,kBACX,SAAA,EAAW,EAAA,CAAG,WAAA,CAAY,OAAA,EAAS,OAAO,QAAQ,CAAA;AAAA,kBAClD,kBAAgB,YAAA,IAAgB,MAAA;AAAA,kBAChC,aAAA,EAAa,UAAA;AAAA,kBACb,QAAA,EAAU,UAAA;AAAA,kBACV,EAAA,EAAI,OAAA;AAAA,kBACJ,SAAA;AAAA,kBACA,IAAA,EAAM,QAAA;AAAA,kBACN,MAAA;AAAA,kBACA,UAAU,CAAA,KAAA,KAAS,QAAA,CAAS,KAAA,CAAM,MAAA,CAAO,OAAO,KAAK,CAAA;AAAA,kBACrD,OAAA;AAAA,kBACA,OAAA;AAAA,kBACA,WAAA;AAAA,kBACA,GAAA;AAAA,kBACA,IAAA;AAAA,kBACA,UAAA,EAAY,aAAA;AAAA,kBACZ;AAAA;AAAA,eACF;AAAA,cACC,SAAA,mBAAY,GAAA,CAAC,OAAA,EAAA,EAAQ,IAAA,EAAK,MAAK,CAAA,GAAK,IAAA;AAAA,cACpC,MAAA,IAAU,IAAA,mBACT,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,WAAA,CAAY,QAAA,EAC1B,QAAA,EAAA,aAAA,CAAc,MAAA,CAAO,IAAI,CAAA,EAC5B,CAAA,GACE;AAAA;AAAA;AAAA,SACN;AAAA,QACC,aAAa,IAAA,mBACZ,IAAA;AAAA,UAAC,IAAA;AAAA,UAAA;AAAA,YACC,EAAA,EAAG,MAAA;AAAA,YACH,SAAA,EAAW,EAAA;AAAA,cACT,MAAA,CAAO,OAAA;AAAA,cACP,WAAA,GAAc,OAAO,gBAAA,GAAmB;AAAA,aAC1C;AAAA,YACA,KAAA,EAAM,WAAA;AAAA,YACN,EAAA,EAAI,SAAA;AAAA,YACJ,IAAA,EAAK,YAAA;AAAA,YACJ,QAAA,EAAA;AAAA,cAAA,KAAA,CAAM,MAAA;AAAA,cAAO,GAAA;AAAA,cAAE;AAAA;AAAA;AAAA,SAClB,GACE;AAAA;AAAA;AAAA,GACN;AAEJ;AAEA,QAAA,CAAS,WAAA,GAAc,UAAA","file":"chunk-MUXUHIIV.js","sourcesContent":["import {\n useId,\n type ChangeEvent,\n type CSSProperties,\n type ClipboardEvent,\n type FocusEvent,\n type ReactNode,\n type Ref,\n} from 'react';\nimport {\n Field,\n getNecessity,\n type FieldNecessity,\n type InputSize,\n type InputStatus,\n} from 'components/Field';\nimport {inputRecipe, inputStyles} from 'components/Field/inputStyles';\nimport {\n getDescribedBy,\n getStatusIcon,\n getStatusMessageID,\n} from 'components/Field/inputUtils';\nimport {Icon, type IconComponent} from 'components/Icon';\nimport {Spinner} from 'components/Spinner';\nimport {Text} from 'components/Text';\nimport {cx} from 'internal/cx';\nimport isReactNode from 'internal/isReactNode';\nimport {css} from 'styled-system/css';\n\nexport type TextAreaProps = {\n /**\n * Additional CSS class names applied to the textarea wrapper.\n */\n className?: string;\n /**\n * Test ID applied to the textarea element.\n */\n 'data-testid'?: string;\n /**\n * Supporting text displayed below the label.\n */\n description?: ReactNode;\n /**\n * Whether to focus the textarea on mount.\n * @default false\n */\n hasAutoFocus?: boolean;\n /**\n * Whether the browser spellcheck is enabled.\n * @default true\n */\n hasSpellCheck?: boolean;\n /**\n * HTML name attribute.\n */\n htmlName?: string;\n /**\n * Whether the textarea is disabled.\n * @default false\n */\n isDisabled?: boolean;\n /**\n * Whether to visually hide the label.\n * @default false\n */\n isLabelHidden?: boolean;\n /**\n * Whether the textarea is loading.\n * @default false\n */\n isLoading?: boolean;\n /**\n * Field label.\n */\n label: string;\n /**\n * Icon shown before the label.\n */\n labelIcon?: IconComponent;\n /**\n * Tooltip content shown next to the label.\n */\n labelTooltip?: ReactNode;\n /**\n * Maximum character count. Displays a counter when set.\n */\n maxLength?: number;\n /**\n * Called when the textarea loses focus.\n */\n onBlur?: (event: FocusEvent<HTMLTextAreaElement>) => void;\n /**\n * Called with the next string value.\n */\n onChange: (value: string, event: ChangeEvent<HTMLTextAreaElement>) => void;\n /**\n * Called when the textarea receives focus.\n */\n onFocus?: (event: FocusEvent<HTMLTextAreaElement>) => void;\n /**\n * Called when content is pasted into the textarea.\n */\n onPaste?: (event: ClipboardEvent<HTMLTextAreaElement>) => void;\n /**\n * Placeholder text.\n */\n placeholder?: string;\n /**\n * Ref forwarded to the textarea element.\n */\n ref?: Ref<HTMLTextAreaElement>;\n /**\n * Number of visible text rows.\n * @default 3\n */\n rows?: number;\n /**\n * Visual size.\n * @default 'md'\n */\n size?: InputSize;\n /**\n * Icon shown before the textarea.\n */\n startIcon?: IconComponent;\n /**\n * Validation status displayed below the textarea.\n */\n status?: InputStatus;\n /**\n * Inline styles applied to the textarea wrapper.\n */\n style?: CSSProperties;\n /**\n * Controlled textarea value.\n */\n value: string;\n} & FieldNecessity;\n\nconst styles = {\n wrapper: css({\n alignItems: 'flex-start',\n py: '2',\n }),\n textarea: css({\n resize: 'vertical',\n minH: '20',\n }),\n counter: css({\n alignSelf: 'flex-end',\n mt: '1',\n }),\n counterOverLimit: css({\n color: 'status.error.fg',\n }),\n} as const;\n\n/**\n * Multi-line text input field with optional character counter.\n */\nexport function TextArea({\n label,\n value,\n onChange,\n rows = 3,\n size = 'md',\n description,\n isLabelHidden = false,\n isOptional,\n isRequired,\n isDisabled = false,\n isLoading = false,\n hasSpellCheck = true,\n hasAutoFocus = false,\n htmlName,\n status,\n labelIcon,\n labelTooltip,\n startIcon,\n placeholder,\n maxLength,\n onPaste,\n onFocus,\n onBlur,\n className,\n 'data-testid': dataTestId,\n style,\n ref,\n}: TextAreaProps): React.JSX.Element {\n const inputId = useId();\n const descriptionID = isReactNode(description)\n ? `${inputId}-description`\n : undefined;\n const statusMessageID = getStatusMessageID(inputId, status);\n const counterID = maxLength != null ? `${inputId}-counter` : undefined;\n const describedBy = getDescribedBy(descriptionID, statusMessageID, counterID);\n const isOverLimit = maxLength != null && value.length > maxLength;\n\n const necessity = getNecessity(isOptional, isRequired);\n\n return (\n <Field\n className={className}\n description={description}\n descriptionID={descriptionID}\n inputId={inputId}\n isDisabled={isDisabled}\n isLabelHidden={isLabelHidden}\n {...necessity}\n label={label}\n labelIcon={labelIcon}\n labelTooltip={labelTooltip}\n status={\n status == null ? undefined : {...status, messageID: statusMessageID}\n }\n style={style}>\n <div\n className={cx(\n inputRecipe({\n size,\n status: status?.type,\n isDisabled,\n }),\n styles.wrapper,\n )}>\n {startIcon != null ? (\n <span className={inputStyles.iconSlot}>\n <Icon color=\"secondary\" icon={startIcon} size=\"sm\" />\n </span>\n ) : null}\n <textarea\n aria-busy={isLoading || undefined}\n aria-describedby={describedBy}\n aria-invalid={status?.type === 'error' || isOverLimit || undefined}\n aria-required={isRequired ?? undefined}\n // eslint-disable-next-line jsx-a11y-x/no-autofocus\n autoFocus={hasAutoFocus}\n className={cx(inputStyles.control, styles.textarea)}\n data-autofocus={hasAutoFocus || undefined}\n data-testid={dataTestId}\n disabled={isDisabled}\n id={inputId}\n maxLength={maxLength}\n name={htmlName}\n onBlur={onBlur}\n onChange={event => onChange(event.target.value, event)}\n onFocus={onFocus}\n onPaste={onPaste}\n placeholder={placeholder}\n ref={ref}\n rows={rows}\n spellCheck={hasSpellCheck}\n value={value}\n />\n {isLoading ? <Spinner size=\"sm\" /> : null}\n {status != null ? (\n <span className={inputStyles.iconSlot}>\n {getStatusIcon(status.type)}\n </span>\n ) : null}\n </div>\n {maxLength != null ? (\n <Text\n as=\"span\"\n className={cx(\n styles.counter,\n isOverLimit ? styles.counterOverLimit : undefined,\n )}\n color=\"secondary\"\n id={counterID}\n type=\"supporting\">\n {value.length}/{maxLength}\n </Text>\n ) : null}\n </Field>\n );\n}\n\nTextArea.displayName = 'TextArea';\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/components/TextArea/TextArea.tsx"],"names":[],"mappings":"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","file":"chunk-HC57X3U4.js","sourcesContent":["import {\n useId,\n type ChangeEvent,\n type CSSProperties,\n type ClipboardEvent,\n type FocusEvent,\n type ReactNode,\n type Ref,\n} from 'react';\nimport {\n Field,\n getNecessity,\n type FieldNecessity,\n type InputSize,\n type InputStatus,\n} from 'components/Field';\nimport {inputRecipe, inputStyles} from 'components/Field/inputStyles';\nimport {\n getDescribedBy,\n getStatusIcon,\n getStatusMessageID,\n} from 'components/Field/inputUtils';\nimport {Icon, type IconComponent} from 'components/Icon';\nimport {Spinner} from 'components/Spinner';\nimport {Text} from 'components/Text';\nimport {cx} from 'internal/cx';\nimport isReactNode from 'internal/isReactNode';\nimport {css} from 'styled-system/css';\n\nexport type TextAreaProps = {\n /**\n * Additional CSS class names applied to the textarea wrapper.\n */\n className?: string;\n /**\n * Test ID applied to the textarea element.\n */\n 'data-testid'?: string;\n /**\n * Supporting text displayed below the label.\n */\n description?: ReactNode;\n /**\n * Whether to focus the textarea on mount.\n * @default false\n */\n hasAutoFocus?: boolean;\n /**\n * Whether the browser spellcheck is enabled.\n * @default true\n */\n hasSpellCheck?: boolean;\n /**\n * HTML name attribute.\n */\n htmlName?: string;\n /**\n * Whether the textarea is disabled.\n * @default false\n */\n isDisabled?: boolean;\n /**\n * Whether to visually hide the label.\n * @default false\n */\n isLabelHidden?: boolean;\n /**\n * Whether the textarea is loading.\n * @default false\n */\n isLoading?: boolean;\n /**\n * Field label.\n */\n label: string;\n /**\n * Icon shown before the label.\n */\n labelIcon?: IconComponent;\n /**\n * Tooltip content shown next to the label.\n */\n labelTooltip?: ReactNode;\n /**\n * Maximum character count. Displays a counter when set.\n */\n maxLength?: number;\n /**\n * Called when the textarea loses focus.\n */\n onBlur?: (event: FocusEvent<HTMLTextAreaElement>) => void;\n /**\n * Called with the next string value.\n */\n onChange: (value: string, event: ChangeEvent<HTMLTextAreaElement>) => void;\n /**\n * Called when the textarea receives focus.\n */\n onFocus?: (event: FocusEvent<HTMLTextAreaElement>) => void;\n /**\n * Called when content is pasted into the textarea.\n */\n onPaste?: (event: ClipboardEvent<HTMLTextAreaElement>) => void;\n /**\n * Placeholder text.\n */\n placeholder?: string;\n /**\n * Ref forwarded to the textarea element.\n */\n ref?: Ref<HTMLTextAreaElement>;\n /**\n * Number of visible text rows.\n * @default 3\n */\n rows?: number;\n /**\n * Visual size.\n * @default 'md'\n */\n size?: InputSize;\n /**\n * Icon shown before the textarea.\n */\n startIcon?: IconComponent;\n /**\n * Validation status displayed below the textarea.\n */\n status?: InputStatus;\n /**\n * Inline styles applied to the textarea wrapper.\n */\n style?: CSSProperties;\n /**\n * Controlled textarea value.\n */\n value: string;\n} & FieldNecessity;\n\nconst styles = {\n wrapper: css({\n alignItems: 'flex-start',\n py: '2',\n }),\n textarea: css({\n resize: 'vertical',\n minH: '20',\n }),\n counter: css({\n alignSelf: 'flex-end',\n mt: '1',\n }),\n counterOverLimit: css({\n color: 'status.error.fg',\n }),\n} as const;\n\n/**\n * Multi-line text input field with optional character counter.\n */\nexport function TextArea({\n label,\n value,\n onChange,\n rows = 3,\n size = 'md',\n description,\n isLabelHidden = false,\n isOptional,\n isRequired,\n isDisabled = false,\n isLoading = false,\n hasSpellCheck = true,\n hasAutoFocus = false,\n htmlName,\n status,\n labelIcon,\n labelTooltip,\n startIcon,\n placeholder,\n maxLength,\n onPaste,\n onFocus,\n onBlur,\n className,\n 'data-testid': dataTestId,\n style,\n ref,\n}: TextAreaProps): React.JSX.Element {\n const inputId = useId();\n const descriptionID = isReactNode(description)\n ? `${inputId}-description`\n : undefined;\n const statusMessageID = getStatusMessageID(inputId, status);\n const counterID = maxLength != null ? `${inputId}-counter` : undefined;\n const describedBy = getDescribedBy(descriptionID, statusMessageID, counterID);\n const isOverLimit = maxLength != null && value.length > maxLength;\n\n const necessity = getNecessity(isOptional, isRequired);\n\n return (\n <Field\n className={className}\n description={description}\n descriptionID={descriptionID}\n inputId={inputId}\n isDisabled={isDisabled}\n isLabelHidden={isLabelHidden}\n {...necessity}\n label={label}\n labelIcon={labelIcon}\n labelTooltip={labelTooltip}\n status={\n status == null ? undefined : {...status, messageID: statusMessageID}\n }\n style={style}>\n <div\n className={cx(\n inputRecipe({\n size,\n status: status?.type,\n isDisabled,\n }),\n styles.wrapper,\n )}>\n {startIcon != null ? (\n <span className={inputStyles.iconSlot}>\n <Icon color=\"secondary\" icon={startIcon} size=\"sm\" />\n </span>\n ) : null}\n <textarea\n aria-busy={isLoading || undefined}\n aria-describedby={describedBy}\n aria-invalid={status?.type === 'error' || isOverLimit || undefined}\n aria-required={isRequired ?? undefined}\n // eslint-disable-next-line jsx-a11y-x/no-autofocus\n autoFocus={hasAutoFocus}\n className={cx(inputStyles.control, styles.textarea)}\n data-autofocus={hasAutoFocus || undefined}\n data-testid={dataTestId}\n disabled={isDisabled}\n id={inputId}\n maxLength={maxLength}\n name={htmlName}\n onBlur={onBlur}\n onChange={event => onChange(event.target.value, event)}\n onFocus={onFocus}\n onPaste={onPaste}\n placeholder={placeholder}\n ref={ref}\n rows={rows}\n spellCheck={hasSpellCheck}\n value={value}\n />\n {isLoading ? <Spinner size=\"sm\" /> : null}\n {status != null ? (\n <span className={inputStyles.iconSlot}>\n {getStatusIcon(status.type)}\n </span>\n ) : null}\n </div>\n {maxLength != null ? (\n <Text\n as=\"span\"\n className={cx(\n styles.counter,\n isOverLimit ? styles.counterOverLimit : undefined,\n )}\n color=\"secondary\"\n id={counterID}\n type=\"supporting\">\n {value.length}/{maxLength}\n </Text>\n ) : null}\n </Field>\n );\n}\n\nTextArea.displayName = 'TextArea';\n"]}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var chunkKLPVBJGZ_cjs = require('./chunk-KLPVBJGZ.cjs');
|
|
4
4
|
var chunkJK4YAQ2N_cjs = require('./chunk-JK4YAQ2N.cjs');
|
|
5
|
-
var
|
|
5
|
+
var chunkVPHB56GK_cjs = require('./chunk-VPHB56GK.cjs');
|
|
6
6
|
var chunkRX2FXCIH_cjs = require('./chunk-RX2FXCIH.cjs');
|
|
7
7
|
var chunkXPHXAZCE_cjs = require('./chunk-XPHXAZCE.cjs');
|
|
8
8
|
var chunkMYSLJWCW_cjs = require('./chunk-MYSLJWCW.cjs');
|
|
@@ -76,7 +76,7 @@ function DateRangeInput({
|
|
|
76
76
|
"div",
|
|
77
77
|
{
|
|
78
78
|
className: chunkSPDVNY2Z_cjs.cx(
|
|
79
|
-
|
|
79
|
+
chunkVPHB56GK_cjs.inputRecipe({
|
|
80
80
|
size,
|
|
81
81
|
status: status?.type,
|
|
82
82
|
isDisabled
|
|
@@ -133,7 +133,7 @@ function DateRangeInput({
|
|
|
133
133
|
"aria-haspopup": "dialog",
|
|
134
134
|
"aria-invalid": status?.type === "error" || void 0,
|
|
135
135
|
"aria-required": isRequired ?? void 0,
|
|
136
|
-
className:
|
|
136
|
+
className: chunkVPHB56GK_cjs.inputStyles.control,
|
|
137
137
|
"data-testid": dataTestId,
|
|
138
138
|
disabled: isDisabled,
|
|
139
139
|
id: inputId,
|
|
@@ -157,7 +157,7 @@ function DateRangeInput({
|
|
|
157
157
|
}
|
|
158
158
|
) : null,
|
|
159
159
|
isLoading ? /* @__PURE__ */ jsxRuntime.jsx(chunkOCYZKZ24_cjs.Spinner, { size: "sm" }) : null,
|
|
160
|
-
status != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className:
|
|
160
|
+
status != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: chunkVPHB56GK_cjs.inputStyles.iconSlot, children: chunkXPHXAZCE_cjs.getStatusIcon(status.type) }) : null
|
|
161
161
|
]
|
|
162
162
|
}
|
|
163
163
|
)
|
|
@@ -167,5 +167,5 @@ function DateRangeInput({
|
|
|
167
167
|
DateRangeInput.displayName = "DateRangeInput";
|
|
168
168
|
|
|
169
169
|
exports.DateRangeInput = DateRangeInput;
|
|
170
|
-
//# sourceMappingURL=chunk-
|
|
171
|
-
//# sourceMappingURL=chunk-
|
|
170
|
+
//# sourceMappingURL=chunk-HENIVDYQ.cjs.map
|
|
171
|
+
//# sourceMappingURL=chunk-HENIVDYQ.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/DateRangeInput/DateRangeInput.tsx"],"names":["css","plainDateFormat","DATE_FORMAT_SHORT_WITH_YEAR","useId","isReactNode","getStatusMessageID","getDescribedBy","useState","useMemo","getNecessity","jsx","Field","jsxs","cx","inputRecipe","Popover","Calendar","Button","CalendarIcon","inputStyles","X","Spinner","getStatusIcon"],"mappings":"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","file":"chunk-NMC7QG2X.cjs","sourcesContent":["import {CalendarIcon, X} from 'lucide-react';\nimport {\n useId,\n useMemo,\n useState,\n type CSSProperties,\n type ReactNode,\n type Ref,\n} from 'react';\nimport {Button} from 'components/Button';\nimport {Calendar} from 'components/Calendar';\nimport {\n Field,\n getNecessity,\n type FieldNecessity,\n type InputSize,\n type InputStatus,\n} from 'components/Field';\nimport {inputRecipe, inputStyles} from 'components/Field/inputStyles';\nimport {\n getDescribedBy,\n getStatusIcon,\n getStatusMessageID,\n} from 'components/Field/inputUtils';\nimport type {IconComponent} from 'components/Icon';\nimport {Popover} from 'components/Popover';\nimport {Spinner} from 'components/Spinner';\nimport {cx} from 'internal/cx';\nimport type {DateRange} from 'internal/dateTypes';\nimport isReactNode from 'internal/isReactNode';\nimport {\n DATE_FORMAT_SHORT_WITH_YEAR,\n plainDateFormat,\n type PlainDate,\n} from 'internal/plainDate';\nimport {css} from 'styled-system/css';\n\nexport type {DateRange} from 'internal/dateTypes';\n\nconst styles = {\n wrapper: css({ps: '1', gap: '1'}),\n} as const;\n\nexport type DateRangeInputProps = {\n /**\n * Additional CSS class names applied to the input wrapper.\n */\n className?: string;\n /**\n * Test ID applied to the input element.\n */\n 'data-testid'?: string;\n /**\n * Returns true for dates that should be disabled.\n */\n getIsDateDisabled?: (date: PlainDate) => boolean;\n /**\n * Supporting text rendered below the label.\n */\n description?: ReactNode;\n /**\n * Whether to show a clear button when a value is selected.\n * @default false\n */\n hasClear?: boolean;\n /**\n * Whether the input is disabled.\n * @default false\n */\n isDisabled?: boolean;\n /**\n * Whether to visually hide the label.\n * @default false\n */\n isLabelHidden?: boolean;\n /**\n * Whether the input is in a loading state.\n * @default false\n */\n isLoading?: boolean;\n /**\n * Field label text.\n */\n label: string;\n /**\n * Icon shown before the label.\n */\n labelIcon?: IconComponent;\n /**\n * Tooltip content shown next to the label.\n */\n labelTooltip?: ReactNode;\n /**\n * Maximum selectable date.\n */\n max?: PlainDate;\n /**\n * Minimum selectable date.\n */\n min?: PlainDate;\n /**\n * Number of calendar months shown in the popover.\n * @default 2\n */\n numberOfMonths?: 1 | 2;\n /**\n * Called when the selected date range changes.\n */\n onChange: (value: DateRange | null) => void;\n /**\n * Placeholder text shown when no range is selected.\n */\n placeholder?: string;\n /**\n * Ref forwarded to the input element.\n */\n ref?: Ref<HTMLInputElement>;\n /**\n * Visual size of the input.\n * @default 'md'\n */\n size?: InputSize;\n /**\n * Validation status displayed below the input.\n */\n status?: InputStatus;\n /**\n * Inline styles applied to the input wrapper.\n */\n style?: CSSProperties;\n /**\n * Currently selected date range. Pass `null` for an empty input.\n */\n value: DateRange | null;\n} & FieldNecessity;\n\nfunction formatRange(value: DateRange | null | undefined): string {\n if (value == null) {\n return '';\n }\n return `${plainDateFormat(value.start, DATE_FORMAT_SHORT_WITH_YEAR)} - ${plainDateFormat(value.end, DATE_FORMAT_SHORT_WITH_YEAR)}`;\n}\n\n/**\n * A date range picker input that opens a calendar popover for selecting a start and end date.\n */\nexport function DateRangeInput({\n label,\n value,\n onChange,\n min,\n max,\n getIsDateDisabled,\n numberOfMonths = 2,\n placeholder = 'Select a date range',\n size = 'md',\n description,\n isLabelHidden = false,\n isOptional,\n isRequired,\n isDisabled = false,\n isLoading = false,\n hasClear = false,\n status,\n labelIcon,\n labelTooltip,\n className,\n 'data-testid': dataTestId,\n style,\n ref,\n}: DateRangeInputProps): React.JSX.Element {\n const inputId = useId();\n const popoverId = `${inputId}-calendar`;\n const descriptionID = isReactNode(description)\n ? `${inputId}-description`\n : undefined;\n const statusMessageID = getStatusMessageID(inputId, status);\n const describedBy = getDescribedBy(descriptionID, statusMessageID);\n const [isOpen, setIsOpen] = useState(false);\n const displayValue = useMemo(() => formatRange(value), [value]);\n\n const necessity = getNecessity(isOptional, isRequired);\n\n return (\n <Field\n className={className}\n description={description}\n descriptionID={descriptionID}\n inputId={inputId}\n isDisabled={isDisabled}\n isLabelHidden={isLabelHidden}\n {...necessity}\n label={label}\n labelIcon={labelIcon}\n labelTooltip={labelTooltip}\n status={\n status == null ? undefined : {...status, messageID: statusMessageID}\n }\n style={style}>\n <div\n className={cx(\n inputRecipe({\n size,\n status: status?.type,\n isDisabled,\n }),\n styles.wrapper,\n )}>\n <Popover\n content={\n <Calendar\n getIsDateDisabled={getIsDateDisabled}\n max={max}\n min={min}\n mode=\"range\"\n numberOfMonths={numberOfMonths}\n onChange={nextValue => {\n onChange(nextValue);\n setIsOpen(false);\n }}\n value={value ?? undefined}\n viewDate={value?.start}\n />\n }\n hasAutoFocus\n id={popoverId}\n isEnabled={!isDisabled}\n isOpen={isOpen}\n label={`Choose ${label}`}\n onOpenChange={setIsOpen}\n padding={3}>\n <Button\n icon={CalendarIcon}\n isDisabled={isDisabled}\n isIconOnly\n label={`Choose ${label}`}\n size=\"sm\"\n variant=\"ghost\"\n />\n </Popover>\n <input\n aria-busy={isLoading || undefined}\n aria-controls={popoverId}\n aria-describedby={describedBy}\n aria-expanded={isOpen}\n aria-haspopup=\"dialog\"\n aria-invalid={status?.type === 'error' || undefined}\n aria-required={isRequired ?? undefined}\n className={inputStyles.control}\n data-testid={dataTestId}\n disabled={isDisabled}\n id={inputId}\n placeholder={placeholder}\n readOnly\n ref={ref}\n role=\"combobox\"\n type=\"text\"\n value={displayValue}\n />\n {hasClear && value != null && !isDisabled && !isLoading ? (\n <Button\n icon={X}\n isIconOnly\n label={`Clear ${label}`}\n onClick={() => onChange(null)}\n size=\"sm\"\n variant=\"ghost\"\n />\n ) : null}\n {isLoading ? <Spinner size=\"sm\" /> : null}\n {status != null ? (\n <span className={inputStyles.iconSlot}>\n {getStatusIcon(status.type)}\n </span>\n ) : null}\n </div>\n </Field>\n );\n}\n\nDateRangeInput.displayName = 'DateRangeInput';\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/components/DateRangeInput/DateRangeInput.tsx"],"names":["css","plainDateFormat","DATE_FORMAT_SHORT_WITH_YEAR","useId","isReactNode","getStatusMessageID","getDescribedBy","useState","useMemo","getNecessity","jsx","Field","jsxs","cx","inputRecipe","Popover","Calendar","Button","CalendarIcon","inputStyles","X","Spinner","getStatusIcon"],"mappings":"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","file":"chunk-HENIVDYQ.cjs","sourcesContent":["import {CalendarIcon, X} from 'lucide-react';\nimport {\n useId,\n useMemo,\n useState,\n type CSSProperties,\n type ReactNode,\n type Ref,\n} from 'react';\nimport {Button} from 'components/Button';\nimport {Calendar} from 'components/Calendar';\nimport {\n Field,\n getNecessity,\n type FieldNecessity,\n type InputSize,\n type InputStatus,\n} from 'components/Field';\nimport {inputRecipe, inputStyles} from 'components/Field/inputStyles';\nimport {\n getDescribedBy,\n getStatusIcon,\n getStatusMessageID,\n} from 'components/Field/inputUtils';\nimport type {IconComponent} from 'components/Icon';\nimport {Popover} from 'components/Popover';\nimport {Spinner} from 'components/Spinner';\nimport {cx} from 'internal/cx';\nimport type {DateRange} from 'internal/dateTypes';\nimport isReactNode from 'internal/isReactNode';\nimport {\n DATE_FORMAT_SHORT_WITH_YEAR,\n plainDateFormat,\n type PlainDate,\n} from 'internal/plainDate';\nimport {css} from 'styled-system/css';\n\nexport type {DateRange} from 'internal/dateTypes';\n\nconst styles = {\n wrapper: css({ps: '1', gap: '1'}),\n} as const;\n\nexport type DateRangeInputProps = {\n /**\n * Additional CSS class names applied to the input wrapper.\n */\n className?: string;\n /**\n * Test ID applied to the input element.\n */\n 'data-testid'?: string;\n /**\n * Returns true for dates that should be disabled.\n */\n getIsDateDisabled?: (date: PlainDate) => boolean;\n /**\n * Supporting text rendered below the label.\n */\n description?: ReactNode;\n /**\n * Whether to show a clear button when a value is selected.\n * @default false\n */\n hasClear?: boolean;\n /**\n * Whether the input is disabled.\n * @default false\n */\n isDisabled?: boolean;\n /**\n * Whether to visually hide the label.\n * @default false\n */\n isLabelHidden?: boolean;\n /**\n * Whether the input is in a loading state.\n * @default false\n */\n isLoading?: boolean;\n /**\n * Field label text.\n */\n label: string;\n /**\n * Icon shown before the label.\n */\n labelIcon?: IconComponent;\n /**\n * Tooltip content shown next to the label.\n */\n labelTooltip?: ReactNode;\n /**\n * Maximum selectable date.\n */\n max?: PlainDate;\n /**\n * Minimum selectable date.\n */\n min?: PlainDate;\n /**\n * Number of calendar months shown in the popover.\n * @default 2\n */\n numberOfMonths?: 1 | 2;\n /**\n * Called when the selected date range changes.\n */\n onChange: (value: DateRange | null) => void;\n /**\n * Placeholder text shown when no range is selected.\n */\n placeholder?: string;\n /**\n * Ref forwarded to the input element.\n */\n ref?: Ref<HTMLInputElement>;\n /**\n * Visual size of the input.\n * @default 'md'\n */\n size?: InputSize;\n /**\n * Validation status displayed below the input.\n */\n status?: InputStatus;\n /**\n * Inline styles applied to the input wrapper.\n */\n style?: CSSProperties;\n /**\n * Currently selected date range. Pass `null` for an empty input.\n */\n value: DateRange | null;\n} & FieldNecessity;\n\nfunction formatRange(value: DateRange | null | undefined): string {\n if (value == null) {\n return '';\n }\n return `${plainDateFormat(value.start, DATE_FORMAT_SHORT_WITH_YEAR)} - ${plainDateFormat(value.end, DATE_FORMAT_SHORT_WITH_YEAR)}`;\n}\n\n/**\n * A date range picker input that opens a calendar popover for selecting a start and end date.\n */\nexport function DateRangeInput({\n label,\n value,\n onChange,\n min,\n max,\n getIsDateDisabled,\n numberOfMonths = 2,\n placeholder = 'Select a date range',\n size = 'md',\n description,\n isLabelHidden = false,\n isOptional,\n isRequired,\n isDisabled = false,\n isLoading = false,\n hasClear = false,\n status,\n labelIcon,\n labelTooltip,\n className,\n 'data-testid': dataTestId,\n style,\n ref,\n}: DateRangeInputProps): React.JSX.Element {\n const inputId = useId();\n const popoverId = `${inputId}-calendar`;\n const descriptionID = isReactNode(description)\n ? `${inputId}-description`\n : undefined;\n const statusMessageID = getStatusMessageID(inputId, status);\n const describedBy = getDescribedBy(descriptionID, statusMessageID);\n const [isOpen, setIsOpen] = useState(false);\n const displayValue = useMemo(() => formatRange(value), [value]);\n\n const necessity = getNecessity(isOptional, isRequired);\n\n return (\n <Field\n className={className}\n description={description}\n descriptionID={descriptionID}\n inputId={inputId}\n isDisabled={isDisabled}\n isLabelHidden={isLabelHidden}\n {...necessity}\n label={label}\n labelIcon={labelIcon}\n labelTooltip={labelTooltip}\n status={\n status == null ? undefined : {...status, messageID: statusMessageID}\n }\n style={style}>\n <div\n className={cx(\n inputRecipe({\n size,\n status: status?.type,\n isDisabled,\n }),\n styles.wrapper,\n )}>\n <Popover\n content={\n <Calendar\n getIsDateDisabled={getIsDateDisabled}\n max={max}\n min={min}\n mode=\"range\"\n numberOfMonths={numberOfMonths}\n onChange={nextValue => {\n onChange(nextValue);\n setIsOpen(false);\n }}\n value={value ?? undefined}\n viewDate={value?.start}\n />\n }\n hasAutoFocus\n id={popoverId}\n isEnabled={!isDisabled}\n isOpen={isOpen}\n label={`Choose ${label}`}\n onOpenChange={setIsOpen}\n padding={3}>\n <Button\n icon={CalendarIcon}\n isDisabled={isDisabled}\n isIconOnly\n label={`Choose ${label}`}\n size=\"sm\"\n variant=\"ghost\"\n />\n </Popover>\n <input\n aria-busy={isLoading || undefined}\n aria-controls={popoverId}\n aria-describedby={describedBy}\n aria-expanded={isOpen}\n aria-haspopup=\"dialog\"\n aria-invalid={status?.type === 'error' || undefined}\n aria-required={isRequired ?? undefined}\n className={inputStyles.control}\n data-testid={dataTestId}\n disabled={isDisabled}\n id={inputId}\n placeholder={placeholder}\n readOnly\n ref={ref}\n role=\"combobox\"\n type=\"text\"\n value={displayValue}\n />\n {hasClear && value != null && !isDisabled && !isLoading ? (\n <Button\n icon={X}\n isIconOnly\n label={`Clear ${label}`}\n onClick={() => onChange(null)}\n size=\"sm\"\n variant=\"ghost\"\n />\n ) : null}\n {isLoading ? <Spinner size=\"sm\" /> : null}\n {status != null ? (\n <span className={inputStyles.iconSlot}>\n {getStatusIcon(status.type)}\n </span>\n ) : null}\n </div>\n </Field>\n );\n}\n\nDateRangeInput.displayName = 'DateRangeInput';\n"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var chunkVPHB56GK_cjs = require('./chunk-VPHB56GK.cjs');
|
|
4
4
|
var chunkRX2FXCIH_cjs = require('./chunk-RX2FXCIH.cjs');
|
|
5
5
|
var chunkXPHXAZCE_cjs = require('./chunk-XPHXAZCE.cjs');
|
|
6
6
|
var chunkWOVSJHY6_cjs = require('./chunk-WOVSJHY6.cjs');
|
|
@@ -91,13 +91,13 @@ function TimeInput({
|
|
|
91
91
|
children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
92
92
|
"div",
|
|
93
93
|
{
|
|
94
|
-
className:
|
|
94
|
+
className: chunkVPHB56GK_cjs.inputRecipe({
|
|
95
95
|
size,
|
|
96
96
|
status: status?.type,
|
|
97
97
|
isDisabled
|
|
98
98
|
}),
|
|
99
99
|
children: [
|
|
100
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className:
|
|
100
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: chunkVPHB56GK_cjs.inputStyles.iconSlot, children: /* @__PURE__ */ jsxRuntime.jsx(chunkJ4PIYOWT_cjs.Icon, { icon: lucideReact.Clock, size: "sm" }) }),
|
|
101
101
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
102
102
|
"input",
|
|
103
103
|
{
|
|
@@ -106,7 +106,7 @@ function TimeInput({
|
|
|
106
106
|
"aria-invalid": status?.type === "error" || void 0,
|
|
107
107
|
"aria-required": isRequired ?? void 0,
|
|
108
108
|
autoFocus: hasAutoFocus,
|
|
109
|
-
className: chunkSPDVNY2Z_cjs.cx(
|
|
109
|
+
className: chunkSPDVNY2Z_cjs.cx(chunkVPHB56GK_cjs.inputStyles.control, styles.input),
|
|
110
110
|
"data-autofocus": hasAutoFocus || void 0,
|
|
111
111
|
"data-testid": dataTestId,
|
|
112
112
|
disabled: isDisabled,
|
|
@@ -136,7 +136,7 @@ function TimeInput({
|
|
|
136
136
|
}
|
|
137
137
|
) : null,
|
|
138
138
|
isLoading ? /* @__PURE__ */ jsxRuntime.jsx(chunkOCYZKZ24_cjs.Spinner, { size: "sm" }) : null,
|
|
139
|
-
status != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className:
|
|
139
|
+
status != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: chunkVPHB56GK_cjs.inputStyles.iconSlot, children: chunkXPHXAZCE_cjs.getStatusIcon(status.type) }) : null
|
|
140
140
|
]
|
|
141
141
|
}
|
|
142
142
|
)
|
|
@@ -146,5 +146,5 @@ function TimeInput({
|
|
|
146
146
|
TimeInput.displayName = "TimeInput";
|
|
147
147
|
|
|
148
148
|
exports.TimeInput = TimeInput;
|
|
149
|
-
//# sourceMappingURL=chunk-
|
|
150
|
-
//# sourceMappingURL=chunk-
|
|
149
|
+
//# sourceMappingURL=chunk-HN4W6TM6.cjs.map
|
|
150
|
+
//# sourceMappingURL=chunk-HN4W6TM6.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/TimeInput/TimeInput.tsx"],"names":["css","Temporal","useId","isReactNode","getStatusMessageID","getDescribedBy","getNecessity","jsx","Field","jsxs","inputRecipe","inputStyles","Icon","Clock","cx","Button","X","Spinner","getStatusIcon"],"mappings":";;;;;;;;;;;;;;;;AA6BA,IAAM,MAAA,GAAS;AAAA,EACb,OAAOA,qBAAA,CAAI;AAAA,IACT,sCAAA,EAAwC;AAAA,MACtC,OAAA,EAAS;AAAA;AACX,GACD;AACH,CAAA;AAmHA,SAAS,aAAA,CACP,MACA,UAAA,EACQ;AACR,EAAA,IAAI,QAAQ,IAAA,EAAM;AAChB,IAAA,OAAO,EAAA;AAAA,EACT;AACA,EAAA,OAAO,KAAK,QAAA,CAAS;AAAA,IACnB,YAAA,EAAc,aAAa,QAAA,GAAW;AAAA,GACvC,CAAA;AACH;AAEA,SAAS,gBAAgB,KAAA,EAAiC;AACxD,EAAA,IAAI,UAAU,EAAA,EAAI;AAChB,IAAA,OAAO,IAAA;AAAA,EACT;AACA,EAAA,IAAI;AACF,IAAA,OAAOC,iBAAA,CAAS,SAAA,CAAU,IAAA,CAAK,KAAK,CAAA;AAAA,EACtC,CAAA,CAAA,MAAQ;AACN,IAAA,OAAO,IAAA;AAAA,EACT;AACF;AAKO,SAAS,SAAA,CAAU;AAAA,EACxB,KAAA;AAAA,EACA,KAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA;AAAA,EACA,UAAA,GAAa,KAAA;AAAA,EACb,QAAA,GAAW,KAAA;AAAA,EACX,YAAA,GAAe,KAAA;AAAA,EACf,GAAA;AAAA,EACA,GAAA;AAAA,EACA,IAAA;AAAA,EACA,IAAA,GAAO,IAAA;AAAA,EACP,WAAA;AAAA,EACA,aAAA,GAAgB,KAAA;AAAA,EAChB,UAAA;AAAA,EACA,UAAA;AAAA,EACA,UAAA,GAAa,KAAA;AAAA,EACb,SAAA,GAAY,KAAA;AAAA,EACZ,QAAA;AAAA,EACA,MAAA;AAAA,EACA,SAAA;AAAA,EACA,YAAA;AAAA,EACA,WAAA,GAAc,eAAA;AAAA,EACd,SAAA;AAAA,EACA,aAAA,EAAe,UAAA;AAAA,EACf,KAAA;AAAA,EACA;AACF,CAAA,EAAsC;AACpC,EAAA,MAAM,UAAUC,WAAA,EAAM;AACtB,EAAA,MAAM,gBAAgBC,6BAAA,CAAY,WAAW,CAAA,GACzC,CAAA,EAAG,OAAO,CAAA,YAAA,CAAA,GACV,MAAA;AACJ,EAAA,MAAM,eAAA,GAAkBC,oCAAA,CAAmB,OAAA,EAAS,MAAM,CAAA;AAC1D,EAAA,MAAM,WAAA,GAAcC,gCAAA,CAAe,aAAA,EAAe,eAAe,CAAA;AAEjE,EAAA,MAAM,SAAA,GAAYC,8BAAA,CAAa,UAAA,EAAY,UAAU,CAAA;AAErD,EAAA,uBACEC,cAAA;AAAA,IAACC,uBAAA;AAAA,IAAA;AAAA,MACC,SAAA;AAAA,MACA,WAAA;AAAA,MACA,aAAA;AAAA,MACA,OAAA;AAAA,MACA,UAAA;AAAA,MACA,aAAA;AAAA,MACC,GAAG,SAAA;AAAA,MACJ,KAAA;AAAA,MACA,SAAA;AAAA,MACA,YAAA;AAAA,MACA,MAAA,EACE,UAAU,IAAA,GAAO,MAAA,GAAY,EAAC,GAAG,MAAA,EAAQ,WAAW,eAAA,EAAe;AAAA,MAErE,KAAA;AAAA,MACA,QAAA,kBAAAC,eAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,WAAWC,6BAAA,CAAY;AAAA,YACrB,IAAA;AAAA,YACA,QAAQ,MAAA,EAAQ,IAAA;AAAA,YAChB;AAAA,WACD,CAAA;AAAA,UACD,QAAA,EAAA;AAAA,4BAAAH,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAWI,6BAAA,CAAY,QAAA,EAC3B,QAAA,kBAAAJ,cAAA,CAACK,0BAAK,IAAA,EAAMC,iBAAA,EAAO,IAAA,EAAK,IAAA,EAAK,CAAA,EAC/B,CAAA;AAAA,4BACAN,cAAA;AAAA,cAAC,OAAA;AAAA,cAAA;AAAA,gBACC,aAAW,SAAA,IAAa,MAAA;AAAA,gBACxB,kBAAA,EAAkB,WAAA;AAAA,gBAClB,cAAA,EAAc,MAAA,EAAQ,IAAA,KAAS,OAAA,IAAW,MAAA;AAAA,gBAC1C,iBAAe,UAAA,IAAc,MAAA;AAAA,gBAE7B,SAAA,EAAW,YAAA;AAAA,gBACX,SAAA,EAAWO,oBAAA,CAAGH,6BAAA,CAAY,OAAA,EAAS,OAAO,KAAK,CAAA;AAAA,gBAC/C,kBAAgB,YAAA,IAAgB,MAAA;AAAA,gBAChC,aAAA,EAAa,UAAA;AAAA,gBACb,QAAA,EAAU,UAAA;AAAA,gBACV,EAAA,EAAI,OAAA;AAAA,gBACJ,GAAA,EAAK,aAAA,CAAc,GAAA,EAAK,UAAU,CAAA;AAAA,gBAClC,GAAA,EAAK,aAAA,CAAc,GAAA,EAAK,UAAU,CAAA;AAAA,gBAClC,IAAA,EAAM,QAAA;AAAA,gBACN,MAAA;AAAA,gBACA,UAAU,CAAA,KAAA,KAAS,QAAA,CAAS,gBAAgB,KAAA,CAAM,MAAA,CAAO,KAAK,CAAC,CAAA;AAAA,gBAC/D,OAAA;AAAA,gBACA,WAAA;AAAA,gBACA,GAAA;AAAA,gBACA,IAAA,EAAM,IAAA,KAAS,UAAA,GAAa,CAAA,GAAI,EAAA,CAAA;AAAA,gBAChC,IAAA,EAAK,MAAA;AAAA,gBACL,KAAA,EAAO,aAAA,CAAc,KAAA,EAAO,UAAU;AAAA;AAAA,aACxC;AAAA,YACC,QAAA,IAAY,KAAA,IAAS,IAAA,IAAQ,CAAC,UAAA,mBAC7BJ,cAAA;AAAA,cAACQ,wBAAA;AAAA,cAAA;AAAA,gBACC,IAAA,EAAMC,aAAA;AAAA,gBACN,UAAA,EAAU,IAAA;AAAA,gBACV,KAAA,EAAO,SAAS,KAAK,CAAA,CAAA;AAAA,gBACrB,OAAA,EAAS,MAAM,QAAA,CAAS,IAAI,CAAA;AAAA,gBAC5B,IAAA,EAAK,IAAA;AAAA,gBACL,OAAA,EAAQ;AAAA;AAAA,aACV,GACE,IAAA;AAAA,YACH,SAAA,mBAAYT,cAAA,CAACU,yBAAA,EAAA,EAAQ,IAAA,EAAK,MAAK,CAAA,GAAK,IAAA;AAAA,YACpC,MAAA,IAAU,IAAA,mBACTV,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAWI,6BAAA,CAAY,QAAA,EAC1B,QAAA,EAAAO,+BAAA,CAAc,MAAA,CAAO,IAAI,CAAA,EAC5B,CAAA,GACE;AAAA;AAAA;AAAA;AACN;AAAA,GACF;AAEJ;AAEA,SAAA,CAAU,WAAA,GAAc,WAAA","file":"chunk-ZNAGK36T.cjs","sourcesContent":["import {Temporal} from '@js-temporal/polyfill';\nimport {Clock, X} from 'lucide-react';\nimport {\n useId,\n type CSSProperties,\n type FocusEvent,\n type ReactNode,\n type Ref,\n} from 'react';\nimport {Button} from 'components/Button';\nimport {\n Field,\n getNecessity,\n type FieldNecessity,\n type InputSize,\n type InputStatus,\n} from 'components/Field';\nimport {inputRecipe, inputStyles} from 'components/Field/inputStyles';\nimport {\n getDescribedBy,\n getStatusIcon,\n getStatusMessageID,\n} from 'components/Field/inputUtils';\nimport {Icon, type IconComponent} from 'components/Icon';\nimport {Spinner} from 'components/Spinner';\nimport {cx} from 'internal/cx';\nimport isReactNode from 'internal/isReactNode';\nimport {css} from 'styled-system/css';\n\nconst styles = {\n input: css({\n '&::-webkit-calendar-picker-indicator': {\n display: 'none',\n },\n }),\n} as const;\n\nexport type PlainTime = Temporal.PlainTime;\n\nexport type TimeInputProps = {\n /**\n * Additional CSS class names applied to the input wrapper.\n */\n className?: string;\n /**\n * Test ID applied to the input element.\n */\n 'data-testid'?: string;\n /**\n * Supporting text displayed below the label.\n */\n description?: ReactNode;\n /**\n * Whether to focus the input on mount.\n * @default false\n */\n hasAutoFocus?: boolean;\n /**\n * Whether to show a clear button when a value is set.\n * @default false\n */\n hasClear?: boolean;\n /**\n * Whether the input includes a seconds field.\n * @default false\n */\n hasSeconds?: boolean;\n /**\n * HTML name attribute.\n */\n htmlName?: string;\n /**\n * Whether the input is disabled.\n * @default false\n */\n isDisabled?: boolean;\n /**\n * Whether to visually hide the label.\n * @default false\n */\n isLabelHidden?: boolean;\n /**\n * Whether the input is loading.\n * @default false\n */\n isLoading?: boolean;\n /**\n * Field label.\n */\n label: string;\n /**\n * Icon shown before the label.\n */\n labelIcon?: IconComponent;\n /**\n * Tooltip content shown next to the label.\n */\n labelTooltip?: ReactNode;\n /**\n * Latest allowed time.\n */\n max?: PlainTime;\n /**\n * Earliest allowed time.\n */\n min?: PlainTime;\n /**\n * Called when the input loses focus.\n */\n onBlur?: (event: FocusEvent<HTMLInputElement>) => void;\n /**\n * Called when the time value changes.\n */\n onChange: (value: PlainTime | null) => void;\n /**\n * Called when the input gains focus.\n */\n onFocus?: (event: FocusEvent<HTMLInputElement>) => void;\n /**\n * Placeholder text.\n * @default 'Select a time'\n */\n placeholder?: string;\n /**\n * Ref forwarded to the input element.\n */\n ref?: Ref<HTMLInputElement>;\n /**\n * Visual size.\n * @default 'md'\n */\n size?: InputSize;\n /**\n * Validation status displayed below the input.\n */\n status?: InputStatus;\n /**\n * Step increment in seconds for the time picker.\n */\n step?: number;\n /**\n * Inline styles applied to the input wrapper.\n */\n style?: CSSProperties;\n /**\n * Controlled time value. Pass `null` for an empty input.\n */\n value: PlainTime | null;\n} & FieldNecessity;\n\nfunction toInputString(\n time: PlainTime | null | undefined,\n hasSeconds: boolean,\n): string {\n if (time == null) {\n return '';\n }\n return time.toString({\n smallestUnit: hasSeconds ? 'second' : 'minute',\n });\n}\n\nfunction fromInputString(value: string): PlainTime | null {\n if (value === '') {\n return null;\n }\n try {\n return Temporal.PlainTime.from(value);\n } catch {\n return null;\n }\n}\n\n/**\n * Time picker input field with optional seconds granularity.\n */\nexport function TimeInput({\n label,\n value,\n onBlur,\n onChange,\n onFocus,\n hasSeconds = false,\n hasClear = false,\n hasAutoFocus = false,\n min,\n max,\n step,\n size = 'md',\n description,\n isLabelHidden = false,\n isOptional,\n isRequired,\n isDisabled = false,\n isLoading = false,\n htmlName,\n status,\n labelIcon,\n labelTooltip,\n placeholder = 'Select a time',\n className,\n 'data-testid': dataTestId,\n style,\n ref,\n}: TimeInputProps): React.JSX.Element {\n const inputId = useId();\n const descriptionID = isReactNode(description)\n ? `${inputId}-description`\n : undefined;\n const statusMessageID = getStatusMessageID(inputId, status);\n const describedBy = getDescribedBy(descriptionID, statusMessageID);\n\n const necessity = getNecessity(isOptional, isRequired);\n\n return (\n <Field\n className={className}\n description={description}\n descriptionID={descriptionID}\n inputId={inputId}\n isDisabled={isDisabled}\n isLabelHidden={isLabelHidden}\n {...necessity}\n label={label}\n labelIcon={labelIcon}\n labelTooltip={labelTooltip}\n status={\n status == null ? undefined : {...status, messageID: statusMessageID}\n }\n style={style}>\n <div\n className={inputRecipe({\n size,\n status: status?.type,\n isDisabled,\n })}>\n <span className={inputStyles.iconSlot}>\n <Icon icon={Clock} size=\"sm\" />\n </span>\n <input\n aria-busy={isLoading || undefined}\n aria-describedby={describedBy}\n aria-invalid={status?.type === 'error' || undefined}\n aria-required={isRequired ?? undefined}\n // eslint-disable-next-line jsx-a11y-x/no-autofocus\n autoFocus={hasAutoFocus}\n className={cx(inputStyles.control, styles.input)}\n data-autofocus={hasAutoFocus || undefined}\n data-testid={dataTestId}\n disabled={isDisabled}\n id={inputId}\n max={toInputString(max, hasSeconds)}\n min={toInputString(min, hasSeconds)}\n name={htmlName}\n onBlur={onBlur}\n onChange={event => onChange(fromInputString(event.target.value))}\n onFocus={onFocus}\n placeholder={placeholder}\n ref={ref}\n step={step ?? (hasSeconds ? 1 : 60)}\n type=\"time\"\n value={toInputString(value, hasSeconds)}\n />\n {hasClear && value != null && !isDisabled ? (\n <Button\n icon={X}\n isIconOnly\n label={`Clear ${label}`}\n onClick={() => onChange(null)}\n size=\"sm\"\n variant=\"ghost\"\n />\n ) : null}\n {isLoading ? <Spinner size=\"sm\" /> : null}\n {status != null ? (\n <span className={inputStyles.iconSlot}>\n {getStatusIcon(status.type)}\n </span>\n ) : null}\n </div>\n </Field>\n );\n}\n\nTimeInput.displayName = 'TimeInput';\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/components/TimeInput/TimeInput.tsx"],"names":["css","Temporal","useId","isReactNode","getStatusMessageID","getDescribedBy","getNecessity","jsx","Field","jsxs","inputRecipe","inputStyles","Icon","Clock","cx","Button","X","Spinner","getStatusIcon"],"mappings":"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","file":"chunk-HN4W6TM6.cjs","sourcesContent":["import {Temporal} from '@js-temporal/polyfill';\nimport {Clock, X} from 'lucide-react';\nimport {\n useId,\n type CSSProperties,\n type FocusEvent,\n type ReactNode,\n type Ref,\n} from 'react';\nimport {Button} from 'components/Button';\nimport {\n Field,\n getNecessity,\n type FieldNecessity,\n type InputSize,\n type InputStatus,\n} from 'components/Field';\nimport {inputRecipe, inputStyles} from 'components/Field/inputStyles';\nimport {\n getDescribedBy,\n getStatusIcon,\n getStatusMessageID,\n} from 'components/Field/inputUtils';\nimport {Icon, type IconComponent} from 'components/Icon';\nimport {Spinner} from 'components/Spinner';\nimport {cx} from 'internal/cx';\nimport isReactNode from 'internal/isReactNode';\nimport {css} from 'styled-system/css';\n\nconst styles = {\n input: css({\n '&::-webkit-calendar-picker-indicator': {\n display: 'none',\n },\n }),\n} as const;\n\nexport type PlainTime = Temporal.PlainTime;\n\nexport type TimeInputProps = {\n /**\n * Additional CSS class names applied to the input wrapper.\n */\n className?: string;\n /**\n * Test ID applied to the input element.\n */\n 'data-testid'?: string;\n /**\n * Supporting text displayed below the label.\n */\n description?: ReactNode;\n /**\n * Whether to focus the input on mount.\n * @default false\n */\n hasAutoFocus?: boolean;\n /**\n * Whether to show a clear button when a value is set.\n * @default false\n */\n hasClear?: boolean;\n /**\n * Whether the input includes a seconds field.\n * @default false\n */\n hasSeconds?: boolean;\n /**\n * HTML name attribute.\n */\n htmlName?: string;\n /**\n * Whether the input is disabled.\n * @default false\n */\n isDisabled?: boolean;\n /**\n * Whether to visually hide the label.\n * @default false\n */\n isLabelHidden?: boolean;\n /**\n * Whether the input is loading.\n * @default false\n */\n isLoading?: boolean;\n /**\n * Field label.\n */\n label: string;\n /**\n * Icon shown before the label.\n */\n labelIcon?: IconComponent;\n /**\n * Tooltip content shown next to the label.\n */\n labelTooltip?: ReactNode;\n /**\n * Latest allowed time.\n */\n max?: PlainTime;\n /**\n * Earliest allowed time.\n */\n min?: PlainTime;\n /**\n * Called when the input loses focus.\n */\n onBlur?: (event: FocusEvent<HTMLInputElement>) => void;\n /**\n * Called when the time value changes.\n */\n onChange: (value: PlainTime | null) => void;\n /**\n * Called when the input gains focus.\n */\n onFocus?: (event: FocusEvent<HTMLInputElement>) => void;\n /**\n * Placeholder text.\n * @default 'Select a time'\n */\n placeholder?: string;\n /**\n * Ref forwarded to the input element.\n */\n ref?: Ref<HTMLInputElement>;\n /**\n * Visual size.\n * @default 'md'\n */\n size?: InputSize;\n /**\n * Validation status displayed below the input.\n */\n status?: InputStatus;\n /**\n * Step increment in seconds for the time picker.\n */\n step?: number;\n /**\n * Inline styles applied to the input wrapper.\n */\n style?: CSSProperties;\n /**\n * Controlled time value. Pass `null` for an empty input.\n */\n value: PlainTime | null;\n} & FieldNecessity;\n\nfunction toInputString(\n time: PlainTime | null | undefined,\n hasSeconds: boolean,\n): string {\n if (time == null) {\n return '';\n }\n return time.toString({\n smallestUnit: hasSeconds ? 'second' : 'minute',\n });\n}\n\nfunction fromInputString(value: string): PlainTime | null {\n if (value === '') {\n return null;\n }\n try {\n return Temporal.PlainTime.from(value);\n } catch {\n return null;\n }\n}\n\n/**\n * Time picker input field with optional seconds granularity.\n */\nexport function TimeInput({\n label,\n value,\n onBlur,\n onChange,\n onFocus,\n hasSeconds = false,\n hasClear = false,\n hasAutoFocus = false,\n min,\n max,\n step,\n size = 'md',\n description,\n isLabelHidden = false,\n isOptional,\n isRequired,\n isDisabled = false,\n isLoading = false,\n htmlName,\n status,\n labelIcon,\n labelTooltip,\n placeholder = 'Select a time',\n className,\n 'data-testid': dataTestId,\n style,\n ref,\n}: TimeInputProps): React.JSX.Element {\n const inputId = useId();\n const descriptionID = isReactNode(description)\n ? `${inputId}-description`\n : undefined;\n const statusMessageID = getStatusMessageID(inputId, status);\n const describedBy = getDescribedBy(descriptionID, statusMessageID);\n\n const necessity = getNecessity(isOptional, isRequired);\n\n return (\n <Field\n className={className}\n description={description}\n descriptionID={descriptionID}\n inputId={inputId}\n isDisabled={isDisabled}\n isLabelHidden={isLabelHidden}\n {...necessity}\n label={label}\n labelIcon={labelIcon}\n labelTooltip={labelTooltip}\n status={\n status == null ? undefined : {...status, messageID: statusMessageID}\n }\n style={style}>\n <div\n className={inputRecipe({\n size,\n status: status?.type,\n isDisabled,\n })}>\n <span className={inputStyles.iconSlot}>\n <Icon icon={Clock} size=\"sm\" />\n </span>\n <input\n aria-busy={isLoading || undefined}\n aria-describedby={describedBy}\n aria-invalid={status?.type === 'error' || undefined}\n aria-required={isRequired ?? undefined}\n // eslint-disable-next-line jsx-a11y-x/no-autofocus\n autoFocus={hasAutoFocus}\n className={cx(inputStyles.control, styles.input)}\n data-autofocus={hasAutoFocus || undefined}\n data-testid={dataTestId}\n disabled={isDisabled}\n id={inputId}\n max={toInputString(max, hasSeconds)}\n min={toInputString(min, hasSeconds)}\n name={htmlName}\n onBlur={onBlur}\n onChange={event => onChange(fromInputString(event.target.value))}\n onFocus={onFocus}\n placeholder={placeholder}\n ref={ref}\n step={step ?? (hasSeconds ? 1 : 60)}\n type=\"time\"\n value={toInputString(value, hasSeconds)}\n />\n {hasClear && value != null && !isDisabled ? (\n <Button\n icon={X}\n isIconOnly\n label={`Clear ${label}`}\n onClick={() => onChange(null)}\n size=\"sm\"\n variant=\"ghost\"\n />\n ) : null}\n {isLoading ? <Spinner size=\"sm\" /> : null}\n {status != null ? (\n <span className={inputStyles.iconSlot}>\n {getStatusIcon(status.type)}\n </span>\n ) : null}\n </div>\n </Field>\n );\n}\n\nTimeInput.displayName = 'TimeInput';\n"]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var chunkYQIDUJW2_cjs = require('./chunk-YQIDUJW2.cjs');
|
|
4
|
-
var
|
|
4
|
+
var chunkVPHB56GK_cjs = require('./chunk-VPHB56GK.cjs');
|
|
5
5
|
var chunkRX2FXCIH_cjs = require('./chunk-RX2FXCIH.cjs');
|
|
6
6
|
var chunkXPHXAZCE_cjs = require('./chunk-XPHXAZCE.cjs');
|
|
7
7
|
var chunkWOVSJHY6_cjs = require('./chunk-WOVSJHY6.cjs');
|
|
@@ -56,7 +56,7 @@ function TextInput({
|
|
|
56
56
|
"div",
|
|
57
57
|
{
|
|
58
58
|
className: chunkSPDVNY2Z_cjs.cx(
|
|
59
|
-
|
|
59
|
+
chunkVPHB56GK_cjs.inputRecipe({
|
|
60
60
|
size,
|
|
61
61
|
status: effectiveStatusType,
|
|
62
62
|
isDisabled: effectiveDisabled
|
|
@@ -65,7 +65,7 @@ function TextInput({
|
|
|
65
65
|
),
|
|
66
66
|
style: inputGroup != null ? style : void 0,
|
|
67
67
|
children: [
|
|
68
|
-
startIcon != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className:
|
|
68
|
+
startIcon != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: chunkVPHB56GK_cjs.inputStyles.iconSlot, children: /* @__PURE__ */ jsxRuntime.jsx(chunkJ4PIYOWT_cjs.Icon, { color: "secondary", icon: startIcon, size: "sm" }) }) : null,
|
|
69
69
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
70
70
|
"input",
|
|
71
71
|
{
|
|
@@ -76,7 +76,7 @@ function TextInput({
|
|
|
76
76
|
"aria-required": isRequired ?? void 0,
|
|
77
77
|
autoComplete,
|
|
78
78
|
autoFocus: hasAutoFocus,
|
|
79
|
-
className:
|
|
79
|
+
className: chunkVPHB56GK_cjs.inputStyles.control,
|
|
80
80
|
"data-autofocus": hasAutoFocus || void 0,
|
|
81
81
|
"data-testid": dataTestId,
|
|
82
82
|
disabled: effectiveDisabled,
|
|
@@ -111,7 +111,7 @@ function TextInput({
|
|
|
111
111
|
) : null,
|
|
112
112
|
endContent,
|
|
113
113
|
isLoading ? /* @__PURE__ */ jsxRuntime.jsx(chunkOCYZKZ24_cjs.Spinner, { size: "sm" }) : null,
|
|
114
|
-
status != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className:
|
|
114
|
+
status != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: chunkVPHB56GK_cjs.inputStyles.iconSlot, children: chunkXPHXAZCE_cjs.getStatusIcon(status.type) }) : null
|
|
115
115
|
]
|
|
116
116
|
}
|
|
117
117
|
);
|
|
@@ -140,5 +140,5 @@ function TextInput({
|
|
|
140
140
|
TextInput.displayName = "TextInput";
|
|
141
141
|
|
|
142
142
|
exports.TextInput = TextInput;
|
|
143
|
-
//# sourceMappingURL=chunk-
|
|
144
|
-
//# sourceMappingURL=chunk-
|
|
143
|
+
//# sourceMappingURL=chunk-J242UTPO.cjs.map
|
|
144
|
+
//# sourceMappingURL=chunk-J242UTPO.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/TextInput/TextInput.tsx"],"names":["useId","isReactNode","getStatusMessageID","getDescribedBy","useInputGroup","jsxs","cx","inputRecipe","jsx","inputStyles","Icon","Button","X","Spinner","getStatusIcon","Field","getNecessity"],"mappings":"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","file":"chunk-DUGGZUJP.cjs","sourcesContent":["import {X} from 'lucide-react';\nimport {\n useId,\n type ChangeEvent,\n type CSSProperties,\n type FocusEvent,\n type KeyboardEvent,\n type ReactNode,\n type Ref,\n} from 'react';\nimport {Button} from 'components/Button';\nimport {\n Field,\n getNecessity,\n type FieldNecessity,\n type InputSize,\n type InputStatus,\n} from 'components/Field';\nimport {inputRecipe, inputStyles} from 'components/Field/inputStyles';\nimport {\n getDescribedBy,\n getStatusIcon,\n getStatusMessageID,\n} from 'components/Field/inputUtils';\nimport {Icon, type IconComponent} from 'components/Icon';\nimport {useInputGroup} from 'components/InputGroup';\nimport {Spinner} from 'components/Spinner';\nimport {cx} from 'internal/cx';\nimport isReactNode from 'internal/isReactNode';\n\nexport type TextInputType = 'email' | 'password' | 'text';\n\nexport type TextInputProps = {\n /**\n * HTML autocomplete hint for the browser.\n */\n autoComplete?: string;\n /**\n * Additional CSS class names applied to the input wrapper.\n */\n className?: string;\n /**\n * Test ID applied to the input element.\n */\n 'data-testid'?: string;\n /**\n * Supporting text rendered below the label.\n */\n description?: ReactNode;\n /**\n * Content rendered after the input, before the status icon.\n */\n endContent?: ReactNode;\n /**\n * Whether to focus the input on mount.\n * @default false\n */\n hasAutoFocus?: boolean;\n /**\n * Whether to show a clear button when the input has a value.\n * @default false\n */\n hasClear?: boolean;\n /**\n * HTML name attribute.\n */\n htmlName?: string;\n /**\n * Whether the input is disabled.\n * @default false\n */\n isDisabled?: boolean;\n /**\n * Whether to visually hide the label.\n * @default false\n */\n isLabelHidden?: boolean;\n /**\n * Whether the input is loading.\n * @default false\n */\n isLoading?: boolean;\n /**\n * Field label.\n */\n label: string;\n /**\n * Icon shown before the label.\n */\n labelIcon?: IconComponent;\n /**\n * Tooltip shown beside the label.\n */\n labelTooltip?: ReactNode;\n /**\n * Called when the input loses focus.\n */\n onBlur?: (event: FocusEvent<HTMLInputElement>) => void;\n /**\n * Called with the next string value.\n */\n onChange: (\n value: string,\n event: ChangeEvent<HTMLInputElement> | null,\n ) => void;\n /**\n * Called when Enter is pressed.\n */\n onEnter?: () => void;\n /**\n * Called when the input gains focus.\n */\n onFocus?: (event: FocusEvent<HTMLInputElement>) => void;\n /**\n * Keyboard event handler for the input.\n */\n onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;\n /**\n * Placeholder text.\n */\n placeholder?: string;\n /**\n * Ref forwarded to the input element.\n */\n ref?: Ref<HTMLInputElement>;\n /**\n * Visual size.\n */\n size?: InputSize;\n /**\n * Icon shown before the input.\n */\n startIcon?: IconComponent;\n /**\n * Status displayed on the field.\n */\n status?: InputStatus;\n /**\n * Inline styles applied to the wrapper.\n */\n style?: CSSProperties;\n /**\n * HTML input type.\n */\n type?: TextInputType;\n /**\n * Controlled input value.\n */\n value: string;\n} & FieldNecessity;\n\n/**\n * Single-line text input field.\n */\nexport function TextInput({\n autoComplete,\n label,\n value,\n onChange,\n onBlur,\n onFocus,\n type = 'text',\n size: sizeProp = 'md',\n placeholder,\n description,\n endContent,\n isLabelHidden = false,\n isOptional,\n isRequired,\n isDisabled = false,\n isLoading = false,\n hasClear = false,\n hasAutoFocus = false,\n htmlName,\n status,\n labelIcon,\n labelTooltip,\n startIcon,\n onEnter,\n onKeyDown,\n className,\n 'data-testid': dataTestId,\n style,\n ref,\n}: TextInputProps): React.JSX.Element {\n const inputId = useId();\n const descriptionID = isReactNode(description)\n ? `${inputId}-description`\n : undefined;\n const statusMessageID = getStatusMessageID(inputId, status);\n const describedBy = getDescribedBy(descriptionID, statusMessageID);\n const inputGroup = useInputGroup();\n const effectiveDisabled = isDisabled || inputGroup?.isDisabled === true;\n const size = inputGroup?.size ?? sizeProp;\n const effectiveStatusType = status?.type ?? inputGroup?.statusType;\n\n const inputWrapper = (\n <div\n className={cx(\n inputRecipe({\n size,\n status: effectiveStatusType,\n isDisabled: effectiveDisabled,\n }),\n inputGroup != null ? className : undefined,\n )}\n style={inputGroup != null ? style : undefined}>\n {startIcon != null ? (\n <span className={inputStyles.iconSlot}>\n <Icon color=\"secondary\" icon={startIcon} size=\"sm\" />\n </span>\n ) : null}\n <input\n aria-busy={isLoading || undefined}\n aria-describedby={describedBy}\n aria-invalid={status?.type === 'error' || undefined}\n aria-label={inputGroup != null ? label : undefined}\n aria-required={isRequired ?? undefined}\n autoComplete={autoComplete}\n // eslint-disable-next-line jsx-a11y-x/no-autofocus\n autoFocus={hasAutoFocus}\n className={inputStyles.control}\n data-autofocus={hasAutoFocus || undefined}\n data-testid={dataTestId}\n disabled={effectiveDisabled}\n id={inputId}\n name={htmlName}\n onBlur={onBlur}\n onChange={event => onChange(event.target.value, event)}\n onFocus={onFocus}\n onKeyDown={event => {\n if (event.key === 'Enter' && !event.nativeEvent.isComposing) {\n onEnter?.();\n }\n onKeyDown?.(event);\n }}\n placeholder={placeholder}\n ref={ref}\n required={isRequired ?? undefined}\n type={type}\n value={value}\n />\n {hasClear && value !== '' && !effectiveDisabled ? (\n <Button\n icon={X}\n isIconOnly\n label={`Clear ${label}`}\n onClick={() => onChange('', null)}\n size=\"sm\"\n variant=\"ghost\"\n />\n ) : null}\n {endContent}\n {isLoading ? <Spinner size=\"sm\" /> : null}\n {status != null ? (\n <span className={inputStyles.iconSlot}>\n {getStatusIcon(status.type)}\n </span>\n ) : null}\n </div>\n );\n\n if (inputGroup != null) {\n return inputWrapper;\n }\n\n return (\n <Field\n className={className}\n description={description}\n descriptionID={descriptionID}\n inputId={inputId}\n isDisabled={isDisabled}\n isLabelHidden={isLabelHidden}\n {...getNecessity(isOptional, isRequired)}\n label={label}\n labelIcon={labelIcon}\n labelTooltip={labelTooltip}\n status={\n status == null ? undefined : {...status, messageID: statusMessageID}\n }\n style={style}>\n {inputWrapper}\n </Field>\n );\n}\n\nTextInput.displayName = 'TextInput';\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/components/TextInput/TextInput.tsx"],"names":["useId","isReactNode","getStatusMessageID","getDescribedBy","useInputGroup","jsxs","cx","inputRecipe","jsx","inputStyles","Icon","Button","X","Spinner","getStatusIcon","Field","getNecessity"],"mappings":"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","file":"chunk-J242UTPO.cjs","sourcesContent":["import {X} from 'lucide-react';\nimport {\n useId,\n type ChangeEvent,\n type CSSProperties,\n type FocusEvent,\n type KeyboardEvent,\n type ReactNode,\n type Ref,\n} from 'react';\nimport {Button} from 'components/Button';\nimport {\n Field,\n getNecessity,\n type FieldNecessity,\n type InputSize,\n type InputStatus,\n} from 'components/Field';\nimport {inputRecipe, inputStyles} from 'components/Field/inputStyles';\nimport {\n getDescribedBy,\n getStatusIcon,\n getStatusMessageID,\n} from 'components/Field/inputUtils';\nimport {Icon, type IconComponent} from 'components/Icon';\nimport {useInputGroup} from 'components/InputGroup';\nimport {Spinner} from 'components/Spinner';\nimport {cx} from 'internal/cx';\nimport isReactNode from 'internal/isReactNode';\n\nexport type TextInputType = 'email' | 'password' | 'text';\n\nexport type TextInputProps = {\n /**\n * HTML autocomplete hint for the browser.\n */\n autoComplete?: string;\n /**\n * Additional CSS class names applied to the input wrapper.\n */\n className?: string;\n /**\n * Test ID applied to the input element.\n */\n 'data-testid'?: string;\n /**\n * Supporting text rendered below the label.\n */\n description?: ReactNode;\n /**\n * Content rendered after the input, before the status icon.\n */\n endContent?: ReactNode;\n /**\n * Whether to focus the input on mount.\n * @default false\n */\n hasAutoFocus?: boolean;\n /**\n * Whether to show a clear button when the input has a value.\n * @default false\n */\n hasClear?: boolean;\n /**\n * HTML name attribute.\n */\n htmlName?: string;\n /**\n * Whether the input is disabled.\n * @default false\n */\n isDisabled?: boolean;\n /**\n * Whether to visually hide the label.\n * @default false\n */\n isLabelHidden?: boolean;\n /**\n * Whether the input is loading.\n * @default false\n */\n isLoading?: boolean;\n /**\n * Field label.\n */\n label: string;\n /**\n * Icon shown before the label.\n */\n labelIcon?: IconComponent;\n /**\n * Tooltip shown beside the label.\n */\n labelTooltip?: ReactNode;\n /**\n * Called when the input loses focus.\n */\n onBlur?: (event: FocusEvent<HTMLInputElement>) => void;\n /**\n * Called with the next string value.\n */\n onChange: (\n value: string,\n event: ChangeEvent<HTMLInputElement> | null,\n ) => void;\n /**\n * Called when Enter is pressed.\n */\n onEnter?: () => void;\n /**\n * Called when the input gains focus.\n */\n onFocus?: (event: FocusEvent<HTMLInputElement>) => void;\n /**\n * Keyboard event handler for the input.\n */\n onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;\n /**\n * Placeholder text.\n */\n placeholder?: string;\n /**\n * Ref forwarded to the input element.\n */\n ref?: Ref<HTMLInputElement>;\n /**\n * Visual size.\n */\n size?: InputSize;\n /**\n * Icon shown before the input.\n */\n startIcon?: IconComponent;\n /**\n * Status displayed on the field.\n */\n status?: InputStatus;\n /**\n * Inline styles applied to the wrapper.\n */\n style?: CSSProperties;\n /**\n * HTML input type.\n */\n type?: TextInputType;\n /**\n * Controlled input value.\n */\n value: string;\n} & FieldNecessity;\n\n/**\n * Single-line text input field.\n */\nexport function TextInput({\n autoComplete,\n label,\n value,\n onChange,\n onBlur,\n onFocus,\n type = 'text',\n size: sizeProp = 'md',\n placeholder,\n description,\n endContent,\n isLabelHidden = false,\n isOptional,\n isRequired,\n isDisabled = false,\n isLoading = false,\n hasClear = false,\n hasAutoFocus = false,\n htmlName,\n status,\n labelIcon,\n labelTooltip,\n startIcon,\n onEnter,\n onKeyDown,\n className,\n 'data-testid': dataTestId,\n style,\n ref,\n}: TextInputProps): React.JSX.Element {\n const inputId = useId();\n const descriptionID = isReactNode(description)\n ? `${inputId}-description`\n : undefined;\n const statusMessageID = getStatusMessageID(inputId, status);\n const describedBy = getDescribedBy(descriptionID, statusMessageID);\n const inputGroup = useInputGroup();\n const effectiveDisabled = isDisabled || inputGroup?.isDisabled === true;\n const size = inputGroup?.size ?? sizeProp;\n const effectiveStatusType = status?.type ?? inputGroup?.statusType;\n\n const inputWrapper = (\n <div\n className={cx(\n inputRecipe({\n size,\n status: effectiveStatusType,\n isDisabled: effectiveDisabled,\n }),\n inputGroup != null ? className : undefined,\n )}\n style={inputGroup != null ? style : undefined}>\n {startIcon != null ? (\n <span className={inputStyles.iconSlot}>\n <Icon color=\"secondary\" icon={startIcon} size=\"sm\" />\n </span>\n ) : null}\n <input\n aria-busy={isLoading || undefined}\n aria-describedby={describedBy}\n aria-invalid={status?.type === 'error' || undefined}\n aria-label={inputGroup != null ? label : undefined}\n aria-required={isRequired ?? undefined}\n autoComplete={autoComplete}\n // eslint-disable-next-line jsx-a11y-x/no-autofocus\n autoFocus={hasAutoFocus}\n className={inputStyles.control}\n data-autofocus={hasAutoFocus || undefined}\n data-testid={dataTestId}\n disabled={effectiveDisabled}\n id={inputId}\n name={htmlName}\n onBlur={onBlur}\n onChange={event => onChange(event.target.value, event)}\n onFocus={onFocus}\n onKeyDown={event => {\n if (event.key === 'Enter' && !event.nativeEvent.isComposing) {\n onEnter?.();\n }\n onKeyDown?.(event);\n }}\n placeholder={placeholder}\n ref={ref}\n required={isRequired ?? undefined}\n type={type}\n value={value}\n />\n {hasClear && value !== '' && !effectiveDisabled ? (\n <Button\n icon={X}\n isIconOnly\n label={`Clear ${label}`}\n onClick={() => onChange('', null)}\n size=\"sm\"\n variant=\"ghost\"\n />\n ) : null}\n {endContent}\n {isLoading ? <Spinner size=\"sm\" /> : null}\n {status != null ? (\n <span className={inputStyles.iconSlot}>\n {getStatusIcon(status.type)}\n </span>\n ) : null}\n </div>\n );\n\n if (inputGroup != null) {\n return inputWrapper;\n }\n\n return (\n <Field\n className={className}\n description={description}\n descriptionID={descriptionID}\n inputId={inputId}\n isDisabled={isDisabled}\n isLabelHidden={isLabelHidden}\n {...getNecessity(isOptional, isRequired)}\n label={label}\n labelIcon={labelIcon}\n labelTooltip={labelTooltip}\n status={\n status == null ? undefined : {...status, messageID: statusMessageID}\n }\n style={style}>\n {inputWrapper}\n </Field>\n );\n}\n\nTextInput.displayName = 'TextInput';\n"]}
|
|
@@ -9,7 +9,8 @@ var inputRecipe = cva({
|
|
|
9
9
|
display: "flex",
|
|
10
10
|
alignItems: "center",
|
|
11
11
|
gap: "2",
|
|
12
|
-
|
|
12
|
+
paddingInlineStart: "3",
|
|
13
|
+
paddingInlineEnd: "1",
|
|
13
14
|
borderWidth: "default",
|
|
14
15
|
borderStyle: "solid",
|
|
15
16
|
borderColor: "border.emphasized",
|
|
@@ -102,5 +103,5 @@ var inputStyles = {
|
|
|
102
103
|
};
|
|
103
104
|
|
|
104
105
|
export { inputRecipe, inputStyles };
|
|
105
|
-
//# sourceMappingURL=chunk-
|
|
106
|
-
//# sourceMappingURL=chunk-
|
|
106
|
+
//# sourceMappingURL=chunk-KB36TWOU.js.map
|
|
107
|
+
//# sourceMappingURL=chunk-KB36TWOU.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/Field/inputStyles.ts"],"names":[],"mappings":"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","file":"chunk-KB36TWOU.js","sourcesContent":["import {css, cva, type RecipeVariantProps} from 'styled-system/css';\n\nexport const inputRecipe = cva({\n base: {\n position: 'relative',\n zIndex: 1,\n display: 'flex',\n alignItems: 'center',\n gap: '2',\n paddingInlineStart: '3',\n paddingInlineEnd: '1',\n borderWidth: 'default',\n borderStyle: 'solid',\n borderColor: 'border.emphasized',\n borderRadius: 'md',\n bg: 'bg',\n transitionProperty: 'border-color, box-shadow, opacity',\n transitionDuration: 'fast',\n transitionTimingFunction: 'default',\n _hover: {\n borderColor: 'fg.muted',\n },\n _focusWithin: {\n borderColor: 'primary',\n boxShadow: 'focus',\n },\n },\n variants: {\n size: {\n sm: {minH: 'component.sm'},\n md: {minH: 'component.md'},\n lg: {minH: 'component.lg'},\n },\n status: {\n warning: {\n borderColor: 'status.warning.border',\n _hover: {borderColor: 'status.warning.borderHover'},\n _focusWithin: {\n borderColor: 'status.warning.border',\n boxShadow: 'focus.warning',\n },\n },\n error: {\n borderColor: 'status.error.border',\n _hover: {borderColor: 'status.error.borderHover'},\n _focusWithin: {\n borderColor: 'status.error.border',\n boxShadow: 'focus.error',\n },\n },\n success: {\n borderColor: 'status.success.border',\n _hover: {borderColor: 'status.success.borderHover'},\n _focusWithin: {\n borderColor: 'status.success.border',\n boxShadow: 'focus.success',\n },\n },\n },\n isDisabled: {\n true: {\n cursor: 'not-allowed',\n opacity: 0.55,\n },\n false: {},\n },\n },\n defaultVariants: {\n size: 'md',\n isDisabled: false,\n },\n});\n\nexport type InputVariants = RecipeVariantProps<typeof inputRecipe>;\n\nexport const inputStyles = {\n control: css({\n display: 'block',\n flex: 1,\n minW: 0,\n borderWidth: 0,\n borderStyle: 'none',\n p: 0,\n fontFamily: 'body',\n fontSize: 'md',\n lineHeight: 'normal',\n color: 'fg',\n bg: 'transparent',\n outline: 'none',\n _placeholder: {\n color: 'fg.muted',\n },\n _disabled: {\n cursor: 'not-allowed',\n },\n }),\n iconSlot: css({\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n flexShrink: 0,\n color: 'fg.muted',\n }),\n} as const;\n"]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var chunkDXUFDJHA_cjs = require('./chunk-DXUFDJHA.cjs');
|
|
4
|
-
var
|
|
4
|
+
var chunkVPHB56GK_cjs = require('./chunk-VPHB56GK.cjs');
|
|
5
5
|
var chunkRX2FXCIH_cjs = require('./chunk-RX2FXCIH.cjs');
|
|
6
6
|
var chunkXPHXAZCE_cjs = require('./chunk-XPHXAZCE.cjs');
|
|
7
7
|
var chunkMYSLJWCW_cjs = require('./chunk-MYSLJWCW.cjs');
|
|
@@ -566,7 +566,7 @@ function AutocompleteInput({
|
|
|
566
566
|
"div",
|
|
567
567
|
{
|
|
568
568
|
className: chunkSPDVNY2Z_cjs.cx(
|
|
569
|
-
|
|
569
|
+
chunkVPHB56GK_cjs.inputRecipe({
|
|
570
570
|
size,
|
|
571
571
|
status: status?.type,
|
|
572
572
|
isDisabled
|
|
@@ -581,7 +581,7 @@ function AutocompleteInput({
|
|
|
581
581
|
},
|
|
582
582
|
ref: wrapperRef,
|
|
583
583
|
children: [
|
|
584
|
-
startIcon != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className:
|
|
584
|
+
startIcon != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: chunkVPHB56GK_cjs.inputStyles.iconSlot, children: /* @__PURE__ */ jsxRuntime.jsx(chunkJ4PIYOWT_cjs.Icon, { color: "secondary", icon: startIcon, size: "sm" }) }) : null,
|
|
585
585
|
showTag ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
586
586
|
chunkDXUFDJHA_cjs.Tag,
|
|
587
587
|
{
|
|
@@ -674,5 +674,5 @@ exports.AutocompleteInput = AutocompleteInput;
|
|
|
674
674
|
exports.AutocompleteInputItem = AutocompleteInputItem;
|
|
675
675
|
exports.BaseAutocompleteInput = BaseAutocompleteInput;
|
|
676
676
|
exports.createStaticSearchSource = createStaticSearchSource;
|
|
677
|
-
//# sourceMappingURL=chunk-
|
|
678
|
-
//# sourceMappingURL=chunk-
|
|
677
|
+
//# sourceMappingURL=chunk-KLCEDPJ4.cjs.map
|
|
678
|
+
//# sourceMappingURL=chunk-KLCEDPJ4.cjs.map
|