npm - @choco-vanille/ui - Versions diffs - 1.14.3 → 1.14.5 - Mend

@choco-vanille/ui 1.14.3 → 1.14.5

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.

Files changed (578) hide show

package/dist/components/forms/select/components/select-content/styles/SelectContent.css.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import '../../../../../../ui-kit112.css';import '../../../../../../ui-kit14.css';import '../../../../../../ui-kit10.css';import '../../../../../../ui-kit13.css';import '../../../../../../ui-kit9.css';import '../../../../../../ui-kit7.css';import '../../../../../../ui-kit6.css';import '../../../../../../ui-kit8.css';import '../../../../../../ui-kit12.css';import '../../../../../../ui-kit11.css';import '../../../../../../ui-kit5.css';import '../../../../../../ui-kit3.css';import '../../../../../../ui-kit4.css';import '../../../../../../ui-kit.css';/* empty css                                                  */
+import '../../../../../../ui-kit107.css';import '../../../../../../ui-kit13.css';import '../../../../../../ui-kit7.css';import '../../../../../../ui-kit10.css';import '../../../../../../ui-kit9.css';import '../../../../../../ui-kit12.css';import '../../../../../../ui-kit5.css';import '../../../../../../ui-kit8.css';import '../../../../../../ui-kit3.css';import '../../../../../../ui-kit6.css';import '../../../../../../ui-kit14.css';import '../../../../../../ui-kit4.css';import '../../../../../../ui-kit11.css';import '../../../../../../ui-kit.css';/* empty css                                                  */
 /* empty css                                                                    */
 /* empty css                                                                     */
 /* empty css                                                                             */

package/dist/components/forms/select/components/select-field/SelectField.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";const l=require("react/jsx-runtime"),i=require("react"),G=require("../../../../layout/flex/Flex.cjs");require("../../../../layout/flex/styles/Flex.css.cjs");const H=require("../../../_shared/components/form-label/FormLabel.cjs"),M=require("../../../_shared/components/helper-text/HelperText.cjs"),a=require("../../Select.cjs"),N=require("./hooks/useSelectField.hook.cjs"),w=require("./utils/flattenItems.utils.cjs"),g=i.memo(({label:c,helperText:t,error:s,startIcon:o,placeholder:v,size:q="md",fontSize:n="md",width:h,disabled:m,required:I,listboxAriaLabel:F,options:u,className:y,value:C,defaultValue:S,onValueChange:p,open:V,defaultOpen:L,onOpenChange:$,name:k,...R})=>{const{triggerId:x,helperId:f,hasError:d,selectedValue:_,handleValueChange:b}=N({error:s,value:C,defaultValue:S,onValueChange:p}),D=i.useMemo(()=>w.flattenItems(u),[u]),E=i.useCallback(e=>{e!==null&&b(e)},[b]);return l.jsxs(G,{flexDirection:"column",gap:"xs",width:"100%",alignItems:"start",style:h!==void 0?{width:h}:void 0,className:y,...R,children:[c&&l.jsx(H,{htmlFor:x,disabled:m,fontSize:n,children:c}),l.jsxs(a.default,{value:_??null,onValueChange:E,disabled:m,required:I,open:V,defaultOpen:L,onOpenChange:$,name:k,items:D,children:[l.jsx(a.default.Trigger,{id:x,placeholder:v,startIcon:o,size:q,fontSize:n,hasError:d,"aria-describedby":s||t?f:void 0,"aria-invalid":d||void 0}),l.jsx(a.default.Content,{listboxAriaLabel:F,children:l.jsx(a.default.List,{children:u.map((e,j)=>e.type==="separator"?l.jsx(a.default.Separator,{},`sep-${j}`):e.type==="group"?l.jsxs(a.default.Group,{children:[l.jsx(a.default.Label,{children:e.label}),e.options.map(r=>l.jsx(a.default.Item,{value:r.value,disabled:r.disabled,label:r.label},r.value))]},`group-${e.label}-${j}`):l.jsx(a.default.Item,{value:e.value,disabled:e.disabled,label:e.label},e.value))})})]}),(s||t)&&l.jsx(M,{id:f,hasError:d,children:s??t})]})});g.displayName="SelectField";module.exports=g;
+"use strict";const l=require("react/jsx-runtime"),c=require("react"),H=require("../../../../layout/flex/Flex.cjs");require("../../../../layout/flex/styles/Flex.css.cjs");const M=require("../../../_shared/components/form-label/FormLabel.cjs"),N=require("../../../_shared/components/helper-text/HelperText.cjs"),a=require("../../Select.cjs"),w=require("./hooks/useSelectField.hook.cjs"),A=require("./utils/flattenItems.utils.cjs"),v=c.memo(({label:d,helperText:t,error:s,startIcon:g,placeholder:q,size:I="md",fontSize:n="md",width:b,disabled:x,required:y,listboxAriaLabel:C,options:u,className:F,value:S,defaultValue:p,onValueChange:V,open:$,defaultOpen:L,onOpenChange:k,name:R,..._})=>{const{triggerId:f,helperId:h,hasError:i,selectedValue:D,handleValueChange:m}=w({error:s,value:S,defaultValue:p,onValueChange:V}),E=c.useMemo(()=>A.flattenItems(u),[u]),j=d?`${f}-label`:void 0,G=c.useCallback(e=>{e!==null&&m(e)},[m]);return l.jsxs(H,{flexDirection:"column",gap:"xs",width:"100%",alignItems:"start",style:b!==void 0?{width:b}:void 0,className:F,..._,children:[d&&l.jsx(M,{id:j,disabled:x,fontSize:n,children:d}),l.jsxs(a.default,{value:D??null,onValueChange:G,disabled:x,required:y,open:$,defaultOpen:L,onOpenChange:k,name:R,items:E,children:[l.jsx(a.default.Trigger,{id:f,placeholder:q,startIcon:g,size:I,fontSize:n,"aria-labelledby":j,hasError:i,"aria-describedby":s||t?h:void 0,"aria-invalid":i||void 0}),l.jsx(a.default.Content,{listboxAriaLabel:C,children:l.jsx(a.default.List,{children:u.map((e,o)=>e.type==="separator"?l.jsx(a.default.Separator,{},`sep-${o}`):e.type==="group"?l.jsxs(a.default.Group,{children:[l.jsx(a.default.Label,{children:e.label}),e.options.map(r=>l.jsx(a.default.Item,{value:r.value,disabled:r.disabled,label:r.label},r.value))]},`group-${e.label}-${o}`):l.jsx(a.default.Item,{value:e.value,disabled:e.disabled,label:e.label},e.value))})})]}),(s||t)&&l.jsx(N,{id:h,hasError:i,children:s??t})]})});v.displayName="SelectField";module.exports=v;
 //# sourceMappingURL=SelectField.cjs.map

package/dist/components/forms/select/components/select-field/SelectField.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SelectField.cjs","sources":["../../../../../../src/components/forms/select/components/select-field/SelectField.tsx"],"sourcesContent":["import { type FC, memo, useCallback, useMemo } from 'react'\r\n\r\nimport { Flex } from '@components/layout/flex'\r\nimport FormLabel from '@components/forms/_shared/components/form-label/FormLabel.tsx'\r\nimport HelperText from '@components/forms/_shared/components/helper-text/HelperText.tsx'\r\nimport Select from '@components/forms/select/Select.tsx'\r\nimport type { SelectFieldProps } from '@components/forms/select/types/Select.props.ts'\r\nimport useSelectField from '@components/forms/select/components/select-field/hooks/useSelectField.hook.ts'\r\nimport { flattenItems } from '@components/forms/select/components/select-field/utils/flattenItems.utils.ts'\r\n\r\n/*\r\n Convenience wrapper around `Select` that provides a TextField-like API:\r\n * label, helperText, error, size, width, startIcon, placeholder and an\r\n * `options` array.\r\n \r\n @example\r\n * ```tsx\r\n * <SelectField\r\n * label=\"Fruit\"\r\n * placeholder=\"Pick a fruit\"\r\n * options={[\r\n * { value: 'apple', label: 'Apple' },\r\n * { value: 'banana', label: 'Banana' },\r\n * ]}\r\n * value={value}\r\n * onValueChange={setValue}\r\n * />\r\n * ```\r\n */\r\nconst SelectField: FC<SelectFieldProps> = memo(({\r\n label,\r\n helperText,\r\n error,\r\n startIcon,\r\n placeholder,\r\n size = 'md',\r\n fontSize = 'md',\r\n width,\r\n disabled,\r\n required,\r\n listboxAriaLabel,\r\n options,\r\n className,\r\n value,\r\n defaultValue,\r\n onValueChange,\r\n open,\r\n defaultOpen,\r\n onOpenChange,\r\n name,\r\n ...props\r\n}) => {\r\n const { triggerId, helperId, hasError, selectedValue, handleValueChange } = useSelectField({\r\n error,\r\n value,\r\n defaultValue,\r\n onValueChange,\r\n })\r\n\r\n const items = useMemo(() => flattenItems(options), [options])\r\n\r\n const handleSelectValueChange = useCallback(\r\n (v: string \| null) => { if (v !== null) { handleValueChange(v) } },\r\n [handleValueChange],\r\n )\r\n\r\n return (\r\n <Flex\r\n flexDirection={'column'}\r\n gap={'xs'}\r\n width={'100%'}\r\n alignItems={'start'}\r\n style={width !== undefined ? { width } : undefined}\r\n className={className}\r\n {...props}\r\n >\r\n {label && (\r\n <FormLabel\r\n ~~htmlFor~~={~~triggerId~~}\r\n disabled={disabled}\r\n fontSize={fontSize}\r\n >\r\n {label}\r\n </FormLabel>\r\n )}\r\n\r\n <Select\r\n value={selectedValue ?? null}\r\n onValueChange={handleSelectValueChange}\r\n disabled={disabled}\r\n required={required}\r\n open={open}\r\n defaultOpen={defaultOpen}\r\n onOpenChange={onOpenChange}\r\n name={name}\r\n items={items}\r\n >\r\n <Select.Trigger\r\n id={triggerId}\r\n placeholder={placeholder}\r\n startIcon={startIcon}\r\n size={size}\r\n fontSize={fontSize}\r\n hasError={hasError}\r\n aria-describedby={error \|\| helperText ? helperId : undefined}\r\n aria-invalid={hasError \|\| undefined}\r\n />\r\n <Select.Content listboxAriaLabel={listboxAriaLabel}>\r\n <Select.List>\r\n {options.map((option, index) => {\r\n if (option.type === 'separator') {\r\n return <Select.Separator key={`sep-${index}`} />\r\n }\r\n\r\n if (option.type === 'group') {\r\n return (\r\n <Select.Group key={`group-${option.label}-${index}`}>\r\n <Select.Label>{option.label}</Select.Label>\r\n {option.options.map((item) => (\r\n <Select.Item\r\n key={item.value}\r\n value={item.value}\r\n disabled={item.disabled}\r\n label={item.label}\r\n />\r\n ))}\r\n </Select.Group>\r\n )\r\n }\r\n\r\n return (\r\n <Select.Item\r\n key={option.value}\r\n value={option.value}\r\n disabled={option.disabled}\r\n label={option.label}\r\n />\r\n )\r\n })}\r\n </Select.List>\r\n </Select.Content>\r\n </Select>\r\n\r\n {(error \|\| helperText) && (\r\n <HelperText\r\n id={helperId}\r\n hasError={hasError}\r\n >\r\n {error ?? helperText}\r\n </HelperText>\r\n )}\r\n </Flex>\r\n )\r\n})\r\n\r\nSelectField.displayName = 'SelectField'\r\n\r\nexport default SelectField\r\n"],"names":["SelectField","memo","label","helperText","error","startIcon","placeholder","size","fontSize","width","disabled","required","listboxAriaLabel","options","className","value","defaultValue","onValueChange","open","defaultOpen","onOpenChange","name","props","triggerId","helperId","hasError","selectedValue","handleValueChange","useSelectField","items","useMemo","flattenItems","handleSelectValueChange","useCallback","v","jsxs","Flex","jsx","FormLabel","Select","option","index","item","HelperText"],"mappings":"6aA6BMA,EAAoCC,EAAAA,KAAK,CAAC,CAC5C,MAAAC,EACA,WAAAC,EACA,MAAAC,EACA,UAAAC,EACA,YAAAC,EACA,KAAAC,EAAO,KACP,SAAAC,EAAW,KACX,MAAAC,EACA,SAAAC,EACA,SAAAC,EACA,iBAAAC,EACA,QAAAC,EACA,UAAAC,EACA,MAAAC,EACA,aAAAC,EACA,cAAAC,EACA,KAAAC,EACA,YAAAC,EACA,aAAAC,EACA,KAAAC,EACA,GAAGC,CACP,IAAM,CACF,KAAM,CAAE,UAAAC,EAAW,SAAAC,EAAU,SAAAC,EAAU,cAAAC,EAAe,kBAAAC,CAAA,EAAsBC,EAAe,CACvF,MAAAxB,EACA,MAAAW,EACA,aAAAC,EACA,cAAAC,CAAA,CACH,EAEKY,EAAQC,EAAAA,QAAQ,IAAMC,EAAAA,aAAalB,CAAO,EAAG,CAACA,CAAO,CAAC,~~EAEtDmB~~,EAA0BC,EAAAA,YAC3BC,GAAqB,CAAMA,IAAM,~~MAAQP~~,~~EAAkBO~~,CAAC,CAAI,EACjE,~~CAACP~~,CAAiB,CAAA,EAGtB,~~OACIQ~~,EAAAA,KAACC,EAAA,CACG,cAAe,SACf,IAAK,KACL,MAAO,OACP,WAAY,QACZ,~~MAAO3B~~,IAAU,OAAY,CAAE,MAAAA,GAAU,OACzC,UAAAK,EACC,GAAGQ,EAEH,SAAA,CAAApB,~~GACGmC~~,EAAAA,IAACC,EAAA,CACG,~~QAASf~~,~~EACT~~,~~SAAAb~~,EACA,SAAAF,EAEC,SAAAN,CAAA,CAAA,~~EAITiC~~,EAAAA,KAACI,EAAAA,QAAA,CACG,~~MAAOb~~,GAAiB,KACxB,~~cAAeM~~,EACf,~~SAAAtB~~,EACA,SAAAC,EACA,KAAAO,EACA,YAAAC,EACA,aAAAC,EACA,KAAAC,EACA,MAAAQ,EAEA,SAAA,~~CAAAQ~~,EAAAA,IAACE,EAAAA,QAAO,QAAP,CACG,~~GAAIhB~~,EACJ,YAAAjB,EACA,UAAAD,EACA,KAAAE,EACA,SAAAC,EACA,~~SAAAiB~~,EACA,mBAAkBrB,GAASD,EAAaqB,EAAW,OACnD,eAAcC,GAAY,MAAA,CAAA,~~EAE9BY~~,EAAAA,IAACE,EAAAA,QAAO,QAAP,CAAe,~~iBAAA3B~~,EACZ,~~SAAAyB~~,EAAAA,IAACE,EAAAA,QAAO,KAAP,CACI,~~SAAA1B~~,EAAQ,IAAI,~~CAAC2B~~,EAAQC,IACdD,EAAO,OAAS,kBACRD,EAAAA,QAAO,UAAP,CAAA,EAAsB,OAAOE,CAAK,EAAI,EAG9CD,EAAO,OAAS,QAEZL,OAACI,EAAAA,QAAO,MAAP,CACG,SAAA,CAAAF,EAAAA,IAACE,EAAAA,QAAO,MAAP,CAAc,SAAAC,EAAO,MAAM,EAC3BA,EAAO,QAAQ,IAAKE,GACjBL,EAAAA,IAACE,EAAAA,QAAO,KAAP,CAEG,MAAOG,EAAK,MACZ,SAAUA,EAAK,SACf,MAAOA,EAAK,KAAA,EAHPA,EAAK,KAAA,CAKjB,CAAA,CAAA,EATc,SAASF,EAAO,KAAK,IAAIC,CAAK,EAUjD,EAKJJ,EAAAA,IAACE,EAAAA,QAAO,KAAP,CAEG,MAAOC,EAAO,MACd,SAAUA,EAAO,SACjB,MAAOA,EAAO,KAAA,EAHTA,EAAO,KAAA,CAMvB,EACL,CAAA,CACJ,CAAA,CAAA,CAAA,~~GAGFpC~~,GAASD,~~IACPkC~~,EAAAA,IAACM,EAAA,CACG,~~GAAInB~~,EACJ,SAAAC,EAEC,SAAArB,GAASD,CAAA,CAAA,CACd,CAAA,CAAA,CAIhB,CAAC,EAEDH,EAAY,YAAc"}
1	+ {"version":3,"file":"SelectField.cjs","sources":["../../../../../../src/components/forms/select/components/select-field/SelectField.tsx"],"sourcesContent":["import { type FC, memo, useCallback, useMemo } from 'react'\r\n\r\nimport { Flex } from '@components/layout/flex'\r\nimport FormLabel from '@components/forms/_shared/components/form-label/FormLabel.tsx'\r\nimport HelperText from '@components/forms/_shared/components/helper-text/HelperText.tsx'\r\nimport Select from '@components/forms/select/Select.tsx'\r\nimport type { SelectFieldProps } from '@components/forms/select/types/Select.props.ts'\r\nimport useSelectField from '@components/forms/select/components/select-field/hooks/useSelectField.hook.ts'\r\nimport { flattenItems } from '@components/forms/select/components/select-field/utils/flattenItems.utils.ts'\r\n\r\n/*\r\n Convenience wrapper around `Select` that provides a TextField-like API:\r\n * label, helperText, error, size, width, startIcon, placeholder and an\r\n * `options` array.\r\n \r\n @example\r\n * ```tsx\r\n * <SelectField\r\n * label=\"Fruit\"\r\n * placeholder=\"Pick a fruit\"\r\n * options={[\r\n * { value: 'apple', label: 'Apple' },\r\n * { value: 'banana', label: 'Banana' },\r\n * ]}\r\n * value={value}\r\n * onValueChange={setValue}\r\n * />\r\n * ```\r\n */\r\nconst SelectField: FC<SelectFieldProps> = memo(({\r\n label,\r\n helperText,\r\n error,\r\n startIcon,\r\n placeholder,\r\n size = 'md',\r\n fontSize = 'md',\r\n width,\r\n disabled,\r\n required,\r\n listboxAriaLabel,\r\n options,\r\n className,\r\n value,\r\n defaultValue,\r\n onValueChange,\r\n open,\r\n defaultOpen,\r\n onOpenChange,\r\n name,\r\n ...props\r\n}) => {\r\n const { triggerId, helperId, hasError, selectedValue, handleValueChange } = useSelectField({\r\n error,\r\n value,\r\n defaultValue,\r\n onValueChange,\r\n })\r\n\r\n const items = useMemo(() => flattenItems(options), [options])\r\n const labelId = label ? `${triggerId}-label` : undefined\r\n\r\n const handleSelectValueChange = useCallback(\r\n (v: string \| null) => { if (v !== null) { handleValueChange(v) } },\r\n [handleValueChange],\r\n )\r\n\r\n return (\r\n <Flex\r\n flexDirection={'column'}\r\n gap={'xs'}\r\n width={'100%'}\r\n alignItems={'start'}\r\n style={width !== undefined ? { width } : undefined}\r\n className={className}\r\n {...props}\r\n >\r\n {label && (\r\n <FormLabel\r\n id={labelId}\r\n disabled={disabled}\r\n fontSize={fontSize}\r\n >\r\n {label}\r\n </FormLabel>\r\n )}\r\n\r\n <Select\r\n value={selectedValue ?? null}\r\n onValueChange={handleSelectValueChange}\r\n disabled={disabled}\r\n required={required}\r\n open={open}\r\n defaultOpen={defaultOpen}\r\n onOpenChange={onOpenChange}\r\n name={name}\r\n items={items}\r\n >\r\n <Select.Trigger\r\n id={triggerId}\r\n placeholder={placeholder}\r\n startIcon={startIcon}\r\n size={size}\r\n fontSize={fontSize}\r\n aria-labelledby={labelId}\r\n hasError={hasError}\r\n aria-describedby={error \|\| helperText ? helperId : undefined}\r\n aria-invalid={hasError \|\| undefined}\r\n />\r\n <Select.Content listboxAriaLabel={listboxAriaLabel}>\r\n <Select.List>\r\n {options.map((option, index) => {\r\n if (option.type === 'separator') {\r\n return <Select.Separator key={`sep-${index}`} />\r\n }\r\n\r\n if (option.type === 'group') {\r\n return (\r\n <Select.Group key={`group-${option.label}-${index}`}>\r\n <Select.Label>{option.label}</Select.Label>\r\n {option.options.map((item) => (\r\n <Select.Item\r\n key={item.value}\r\n value={item.value}\r\n disabled={item.disabled}\r\n label={item.label}\r\n />\r\n ))}\r\n </Select.Group>\r\n )\r\n }\r\n\r\n return (\r\n <Select.Item\r\n key={option.value}\r\n value={option.value}\r\n disabled={option.disabled}\r\n label={option.label}\r\n />\r\n )\r\n })}\r\n </Select.List>\r\n </Select.Content>\r\n </Select>\r\n\r\n {(error \|\| helperText) && (\r\n <HelperText\r\n id={helperId}\r\n hasError={hasError}\r\n >\r\n {error ?? helperText}\r\n </HelperText>\r\n )}\r\n </Flex>\r\n )\r\n})\r\n\r\nSelectField.displayName = 'SelectField'\r\n\r\nexport default SelectField\r\n"],"names":["SelectField","memo","label","helperText","error","startIcon","placeholder","size","fontSize","width","disabled","required","listboxAriaLabel","options","className","value","defaultValue","onValueChange","open","defaultOpen","onOpenChange","name","props","triggerId","helperId","hasError","selectedValue","handleValueChange","useSelectField","items","useMemo","flattenItems","labelId","handleSelectValueChange","useCallback","v","jsxs","Flex","jsx","FormLabel","Select","option","index","item","HelperText"],"mappings":"6aA6BMA,EAAoCC,EAAAA,KAAK,CAAC,CAC5C,MAAAC,EACA,WAAAC,EACA,MAAAC,EACA,UAAAC,EACA,YAAAC,EACA,KAAAC,EAAO,KACP,SAAAC,EAAW,KACX,MAAAC,EACA,SAAAC,EACA,SAAAC,EACA,iBAAAC,EACA,QAAAC,EACA,UAAAC,EACA,MAAAC,EACA,aAAAC,EACA,cAAAC,EACA,KAAAC,EACA,YAAAC,EACA,aAAAC,EACA,KAAAC,EACA,GAAGC,CACP,IAAM,CACF,KAAM,CAAE,UAAAC,EAAW,SAAAC,EAAU,SAAAC,EAAU,cAAAC,EAAe,kBAAAC,CAAA,EAAsBC,EAAe,CACvF,MAAAxB,EACA,MAAAW,EACA,aAAAC,EACA,cAAAC,CAAA,CACH,EAEKY,EAAQC,EAAAA,QAAQ,IAAMC,EAAAA,aAAalB,CAAO,EAAG,CAACA,CAAO,CAAC,EACtDmB,EAAU9B,EAAQ,GAAGqB,CAAS,SAAW,OAEzCU,EAA0BC,EAAAA,YAC3BC,GAAqB,CAAMA,IAAM,MAAQR,EAAkBQ,CAAC,CAAI,EACjE,CAACR,CAAiB,CAAA,EAGtB,OACIS,EAAAA,KAACC,EAAA,CACG,cAAe,SACf,IAAK,KACL,MAAO,OACP,WAAY,QACZ,MAAO5B,IAAU,OAAY,CAAE,MAAAA,GAAU,OACzC,UAAAK,EACC,GAAGQ,EAEH,SAAA,CAAApB,GACGoC,EAAAA,IAACC,EAAA,CACG,GAAIP,EACJ,SAAAtB,EACA,SAAAF,EAEC,SAAAN,CAAA,CAAA,EAITkC,EAAAA,KAACI,EAAAA,QAAA,CACG,MAAOd,GAAiB,KACxB,cAAeO,EACf,SAAAvB,EACA,SAAAC,EACA,KAAAO,EACA,YAAAC,EACA,aAAAC,EACA,KAAAC,EACA,MAAAQ,EAEA,SAAA,CAAAS,EAAAA,IAACE,EAAAA,QAAO,QAAP,CACG,GAAIjB,EACJ,YAAAjB,EACA,UAAAD,EACA,KAAAE,EACA,SAAAC,EACA,kBAAiBwB,EACjB,SAAAP,EACA,mBAAkBrB,GAASD,EAAaqB,EAAW,OACnD,eAAcC,GAAY,MAAA,CAAA,EAE9Ba,EAAAA,IAACE,EAAAA,QAAO,QAAP,CAAe,iBAAA5B,EACZ,SAAA0B,EAAAA,IAACE,EAAAA,QAAO,KAAP,CACI,SAAA3B,EAAQ,IAAI,CAAC4B,EAAQC,IACdD,EAAO,OAAS,kBACRD,EAAAA,QAAO,UAAP,CAAA,EAAsB,OAAOE,CAAK,EAAI,EAG9CD,EAAO,OAAS,QAEZL,OAACI,EAAAA,QAAO,MAAP,CACG,SAAA,CAAAF,EAAAA,IAACE,EAAAA,QAAO,MAAP,CAAc,SAAAC,EAAO,MAAM,EAC3BA,EAAO,QAAQ,IAAKE,GACjBL,EAAAA,IAACE,EAAAA,QAAO,KAAP,CAEG,MAAOG,EAAK,MACZ,SAAUA,EAAK,SACf,MAAOA,EAAK,KAAA,EAHPA,EAAK,KAAA,CAKjB,CAAA,CAAA,EATc,SAASF,EAAO,KAAK,IAAIC,CAAK,EAUjD,EAKJJ,EAAAA,IAACE,EAAAA,QAAO,KAAP,CAEG,MAAOC,EAAO,MACd,SAAUA,EAAO,SACjB,MAAOA,EAAO,KAAA,EAHTA,EAAO,KAAA,CAMvB,EACL,CAAA,CACJ,CAAA,CAAA,CAAA,GAGFrC,GAASD,IACPmC,EAAAA,IAACM,EAAA,CACG,GAAIpB,EACJ,SAAAC,EAEC,SAAArB,GAASD,CAAA,CAAA,CACd,CAAA,CAAA,CAIhB,CAAC,EAEDH,EAAY,YAAc"}

package/dist/components/forms/select/components/select-field/SelectField.js CHANGED Viewed

@@ -1,93 +1,94 @@
-import { jsxs as s, jsx as l } from "react/jsx-runtime";
-import { memo as M, useMemo as N, useCallback as q } from "react";
-import w from "../../../../layout/flex/Flex.js";
+import { jsxs as u, jsx as l } from "react/jsx-runtime";
+import { memo as N, useMemo as q, useCallback as w } from "react";
+import A from "../../../../layout/flex/Flex.js";
 import "../../../../layout/flex/styles/Flex.css.js";
-import A from "../../../_shared/components/form-label/FormLabel.js";
-import B from "../../../_shared/components/helper-text/HelperText.js";
+import B from "../../../_shared/components/form-label/FormLabel.js";
+import J from "../../../_shared/components/helper-text/HelperText.js";
 import a from "../../Select.js";
-import J from "./hooks/useSelectField.hook.js";
-import { flattenItems as K } from "./utils/flattenItems.utils.js";
-const O = M(({
-  label: u,
-  helperText: i,
+import K from "./hooks/useSelectField.hook.js";
+import { flattenItems as O } from "./utils/flattenItems.utils.js";
+const P = N(({
+  label: i,
+  helperText: t,
   error: r,
   startIcon: g,
-  placeholder: v,
-  size: F = "md",
+  placeholder: I,
+  size: y = "md",
   fontSize: c = "md",
   width: n,
   disabled: o,
-  required: I,
-  listboxAriaLabel: y,
-  options: t,
-  className: C,
-  value: S,
-  defaultValue: x,
-  onValueChange: V,
+  required: C,
+  listboxAriaLabel: F,
+  options: m,
+  className: S,
+  value: x,
+  defaultValue: V,
+  onValueChange: $,
   open: L,
-  defaultOpen: $,
-  onOpenChange: j,
-  name: k,
-  ...D
+  defaultOpen: j,
+  onOpenChange: k,
+  name: D,
+  ...E
 }) => {
-  const { triggerId: h, helperId: b, hasError: m, selectedValue: E, handleValueChange: f } = J({
+  const { triggerId: b, helperId: f, hasError: s, selectedValue: G, handleValueChange: h } = K({
     error: r,
-    value: S,
-    defaultValue: x,
-    onValueChange: V
-  }), G = N(() => K(t), [t]), H = q(
+    value: x,
+    defaultValue: V,
+    onValueChange: $
+  }), H = q(() => O(m), [m]), p = i ? `${b}-label` : void 0, M = w(
     (e) => {
-      e !== null && f(e);
+      e !== null && h(e);
     },
-    [f]
+    [h]
   );
-  return /* @__PURE__ */ s(
-    w,
+  return /* @__PURE__ */ u(
+    A,
     {
       flexDirection: "column",
       gap: "xs",
       width: "100%",
       alignItems: "start",
       style: n !== void 0 ? { width: n } : void 0,
-      className: C,
-      ...D,
+      className: S,
+      ...E,
       children: [
-        u && /* @__PURE__ */ l(
-          A,
+        i && /* @__PURE__ */ l(
+          B,
           {
-            htmlFor: h,
+            id: p,
             disabled: o,
             fontSize: c,
-            children: u
+            children: i
           }
         ),
-        /* @__PURE__ */ s(
+        /* @__PURE__ */ u(
           a,
           {
-            value: E ?? null,
-            onValueChange: H,
+            value: G ?? null,
+            onValueChange: M,
             disabled: o,
-            required: I,
+            required: C,
             open: L,
-            defaultOpen: $,
-            onOpenChange: j,
-            name: k,
-            items: G,
+            defaultOpen: j,
+            onOpenChange: k,
+            name: D,
+            items: H,
             children: [
               /* @__PURE__ */ l(
                 a.Trigger,
                 {
-                  id: h,
-                  placeholder: v,
+                  id: b,
+                  placeholder: I,
                   startIcon: g,
-                  size: F,
+                  size: y,
                   fontSize: c,
-                  hasError: m,
-                  "aria-describedby": r || i ? b : void 0,
-                  "aria-invalid": m || void 0
+                  "aria-labelledby": p,
+                  hasError: s,
+                  "aria-describedby": r || t ? f : void 0,
+                  "aria-invalid": s || void 0
                 }
               ),
-              /* @__PURE__ */ l(a.Content, { listboxAriaLabel: y, children: /* @__PURE__ */ l(a.List, { children: t.map((e, p) => e.type === "separator" ? /* @__PURE__ */ l(a.Separator, {}, `sep-${p}`) : e.type === "group" ? /* @__PURE__ */ s(a.Group, { children: [
+              /* @__PURE__ */ l(a.Content, { listboxAriaLabel: F, children: /* @__PURE__ */ l(a.List, { children: m.map((e, v) => e.type === "separator" ? /* @__PURE__ */ l(a.Separator, {}, `sep-${v}`) : e.type === "group" ? /* @__PURE__ */ u(a.Group, { children: [
                 /* @__PURE__ */ l(a.Label, { children: e.label }),
                 e.options.map((d) => /* @__PURE__ */ l(
                   a.Item,
@@ -98,7 +99,7 @@ const O = M(({
                   },
                   d.value
                 ))
-              ] }, `group-${e.label}-${p}`) : /* @__PURE__ */ l(
+              ] }, `group-${e.label}-${v}`) : /* @__PURE__ */ l(
                 a.Item,
                 {
                   value: e.value,
@@ -110,20 +111,20 @@ const O = M(({
             ]
           }
         ),
-        (r || i) && /* @__PURE__ */ l(
-          B,
+        (r || t) && /* @__PURE__ */ l(
+          J,
           {
-            id: b,
-            hasError: m,
-            children: r ?? i
+            id: f,
+            hasError: s,
+            children: r ?? t
           }
         )
       ]
     }
   );
 });
-O.displayName = "SelectField";
+P.displayName = "SelectField";
 export {
-  O as default
+  P as default
 };
 //# sourceMappingURL=SelectField.js.map

package/dist/components/forms/select/components/select-field/SelectField.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SelectField.js","sources":["../../../../../../src/components/forms/select/components/select-field/SelectField.tsx"],"sourcesContent":["import { type FC, memo, useCallback, useMemo } from 'react'\r\n\r\nimport { Flex } from '@components/layout/flex'\r\nimport FormLabel from '@components/forms/_shared/components/form-label/FormLabel.tsx'\r\nimport HelperText from '@components/forms/_shared/components/helper-text/HelperText.tsx'\r\nimport Select from '@components/forms/select/Select.tsx'\r\nimport type { SelectFieldProps } from '@components/forms/select/types/Select.props.ts'\r\nimport useSelectField from '@components/forms/select/components/select-field/hooks/useSelectField.hook.ts'\r\nimport { flattenItems } from '@components/forms/select/components/select-field/utils/flattenItems.utils.ts'\r\n\r\n/*\r\n Convenience wrapper around `Select` that provides a TextField-like API:\r\n * label, helperText, error, size, width, startIcon, placeholder and an\r\n * `options` array.\r\n \r\n @example\r\n * ```tsx\r\n * <SelectField\r\n * label=\"Fruit\"\r\n * placeholder=\"Pick a fruit\"\r\n * options={[\r\n * { value: 'apple', label: 'Apple' },\r\n * { value: 'banana', label: 'Banana' },\r\n * ]}\r\n * value={value}\r\n * onValueChange={setValue}\r\n * />\r\n * ```\r\n */\r\nconst SelectField: FC<SelectFieldProps> = memo(({\r\n label,\r\n helperText,\r\n error,\r\n startIcon,\r\n placeholder,\r\n size = 'md',\r\n fontSize = 'md',\r\n width,\r\n disabled,\r\n required,\r\n listboxAriaLabel,\r\n options,\r\n className,\r\n value,\r\n defaultValue,\r\n onValueChange,\r\n open,\r\n defaultOpen,\r\n onOpenChange,\r\n name,\r\n ...props\r\n}) => {\r\n const { triggerId, helperId, hasError, selectedValue, handleValueChange } = useSelectField({\r\n error,\r\n value,\r\n defaultValue,\r\n onValueChange,\r\n })\r\n\r\n const items = useMemo(() => flattenItems(options), [options])\r\n\r\n const handleSelectValueChange = useCallback(\r\n (v: string \| null) => { if (v !== null) { handleValueChange(v) } },\r\n [handleValueChange],\r\n )\r\n\r\n return (\r\n <Flex\r\n flexDirection={'column'}\r\n gap={'xs'}\r\n width={'100%'}\r\n alignItems={'start'}\r\n style={width !== undefined ? { width } : undefined}\r\n className={className}\r\n {...props}\r\n >\r\n {label && (\r\n <FormLabel\r\n ~~htmlFor~~={~~triggerId~~}\r\n disabled={disabled}\r\n fontSize={fontSize}\r\n >\r\n {label}\r\n </FormLabel>\r\n )}\r\n\r\n <Select\r\n value={selectedValue ?? null}\r\n onValueChange={handleSelectValueChange}\r\n disabled={disabled}\r\n required={required}\r\n open={open}\r\n defaultOpen={defaultOpen}\r\n onOpenChange={onOpenChange}\r\n name={name}\r\n items={items}\r\n >\r\n <Select.Trigger\r\n id={triggerId}\r\n placeholder={placeholder}\r\n startIcon={startIcon}\r\n size={size}\r\n fontSize={fontSize}\r\n hasError={hasError}\r\n aria-describedby={error \|\| helperText ? helperId : undefined}\r\n aria-invalid={hasError \|\| undefined}\r\n />\r\n <Select.Content listboxAriaLabel={listboxAriaLabel}>\r\n <Select.List>\r\n {options.map((option, index) => {\r\n if (option.type === 'separator') {\r\n return <Select.Separator key={`sep-${index}`} />\r\n }\r\n\r\n if (option.type === 'group') {\r\n return (\r\n <Select.Group key={`group-${option.label}-${index}`}>\r\n <Select.Label>{option.label}</Select.Label>\r\n {option.options.map((item) => (\r\n <Select.Item\r\n key={item.value}\r\n value={item.value}\r\n disabled={item.disabled}\r\n label={item.label}\r\n />\r\n ))}\r\n </Select.Group>\r\n )\r\n }\r\n\r\n return (\r\n <Select.Item\r\n key={option.value}\r\n value={option.value}\r\n disabled={option.disabled}\r\n label={option.label}\r\n />\r\n )\r\n })}\r\n </Select.List>\r\n </Select.Content>\r\n </Select>\r\n\r\n {(error \|\| helperText) && (\r\n <HelperText\r\n id={helperId}\r\n hasError={hasError}\r\n >\r\n {error ?? helperText}\r\n </HelperText>\r\n )}\r\n </Flex>\r\n )\r\n})\r\n\r\nSelectField.displayName = 'SelectField'\r\n\r\nexport default SelectField\r\n"],"names":["SelectField","memo","label","helperText","error","startIcon","placeholder","size","fontSize","width","disabled","required","listboxAriaLabel","options","className","value","defaultValue","onValueChange","open","defaultOpen","onOpenChange","name","props","triggerId","helperId","hasError","selectedValue","handleValueChange","useSelectField","items","useMemo","flattenItems","handleSelectValueChange","useCallback","v","jsxs","Flex","jsx","FormLabel","Select","option","index","item","HelperText"],"mappings":";;;;;;;;;AA6BA,MAAMA,IAAoCC,EAAK,CAAC;AAAA,EAC5C,OAAAC;AAAA,EACA,YAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,UAAAC,IAAW;AAAA,EACX,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,cAAAC;AAAA,EACA,eAAAC;AAAA,EACA,MAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,MAAAC;AAAA,EACA,GAAGC;AACP,MAAM;AACF,QAAM,EAAE,WAAAC,GAAW,UAAAC,GAAU,UAAAC,GAAU,eAAAC,GAAe,mBAAAC,EAAA,IAAsBC,EAAe;AAAA,IACvF,OAAAxB;AAAA,IACA,OAAAW;AAAA,IACA,cAAAC;AAAA,IACA,eAAAC;AAAA,EAAA,CACH,GAEKY,IAAQC,EAAQ,MAAMC,EAAalB,CAAO,GAAG,CAACA,CAAO,CAAC,~~GAEtDmB~~,IAA0BC;AAAA,IAC5B,CAACC,MAAqB;AAAE,MAAIA,MAAM,~~QAAQP~~,~~EAAkBO~~,CAAC;AAAA,IAAI;AAAA,IACjE,~~CAACP~~,CAAiB;AAAA,EAAA;AAGtB,SACI,~~gBAAAQ~~;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,eAAe;AAAA,MACf,KAAK;AAAA,MACL,OAAO;AAAA,MACP,YAAY;AAAA,MACZ,~~OAAO3B~~,MAAU,SAAY,EAAE,OAAAA,MAAU;AAAA,MACzC,WAAAK;AAAA,MACC,GAAGQ;AAAA,MAEH,UAAA;AAAA,QAAApB,KACG,~~gBAAAmC~~;AAAA,UAACC;AAAA,UAAA;AAAA,YACG,~~SAASf~~;AAAA,~~YACT~~,~~UAAAb~~;AAAA,YACA,UAAAF;AAAA,YAEC,UAAAN;AAAA,UAAA;AAAA,QAAA;AAAA,QAIT,~~gBAAAiC~~;AAAA,UAACI;AAAA,UAAA;AAAA,YACG,~~OAAOb~~,KAAiB;AAAA,YACxB,~~eAAeM~~;AAAA,YACf,~~UAAAtB~~;AAAA,YACA,UAAAC;AAAA,YACA,MAAAO;AAAA,YACA,aAAAC;AAAA,YACA,cAAAC;AAAA,YACA,MAAAC;AAAA,YACA,OAAAQ;AAAA,YAEA,UAAA;AAAA,cAAA,~~gBAAAQ~~;AAAA,gBAACE,EAAO;AAAA,gBAAP;AAAA,kBACG,~~IAAIhB~~;AAAA,kBACJ,aAAAjB;AAAA,kBACA,WAAAD;AAAA,kBACA,MAAAE;AAAA,kBACA,UAAAC;AAAA,kBACA,~~UAAAiB~~;AAAA,kBACA,oBAAkBrB,KAASD,IAAaqB,IAAW;AAAA,kBACnD,gBAAcC,KAAY;AAAA,gBAAA;AAAA,cAAA;AAAA,cAE9B,~~gBAAAY~~,EAACE,EAAO,SAAP,EAAe,~~kBAAA3B~~,GACZ,UAAA,~~gBAAAyB~~,EAACE,EAAO,MAAP,EACI,~~UAAA1B~~,EAAQ,IAAI,~~CAAC2B~~,GAAQC,MACdD,EAAO,SAAS,gCACRD,EAAO,WAAP,CAAA,GAAsB,OAAOE,CAAK,EAAI,IAG9CD,EAAO,SAAS,UAEZ,gBAAAL,EAACI,EAAO,OAAP,EACG,UAAA;AAAA,gBAAA,gBAAAF,EAACE,EAAO,OAAP,EAAc,UAAAC,EAAO,OAAM;AAAA,gBAC3BA,EAAO,QAAQ,IAAI,CAACE,MACjB,gBAAAL;AAAA,kBAACE,EAAO;AAAA,kBAAP;AAAA,oBAEG,OAAOG,EAAK;AAAA,oBACZ,UAAUA,EAAK;AAAA,oBACf,OAAOA,EAAK;AAAA,kBAAA;AAAA,kBAHPA,EAAK;AAAA,gBAAA,CAKjB;AAAA,cAAA,EAAA,GATc,SAASF,EAAO,KAAK,IAAIC,CAAK,EAUjD,IAKJ,gBAAAJ;AAAA,gBAACE,EAAO;AAAA,gBAAP;AAAA,kBAEG,OAAOC,EAAO;AAAA,kBACd,UAAUA,EAAO;AAAA,kBACjB,OAAOA,EAAO;AAAA,gBAAA;AAAA,gBAHTA,EAAO;AAAA,cAAA,CAMvB,GACL,EAAA,CACJ;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,~~SAGFpC~~,KAASD,MACP,~~gBAAAkC~~;AAAA,UAACM;AAAA,UAAA;AAAA,YACG,~~IAAInB~~;AAAA,YACJ,UAAAC;AAAA,YAEC,UAAArB,KAASD;AAAA,UAAA;AAAA,QAAA;AAAA,MACd;AAAA,IAAA;AAAA,EAAA;AAIhB,CAAC;AAEDH,EAAY,cAAc;"}
1	+ {"version":3,"file":"SelectField.js","sources":["../../../../../../src/components/forms/select/components/select-field/SelectField.tsx"],"sourcesContent":["import { type FC, memo, useCallback, useMemo } from 'react'\r\n\r\nimport { Flex } from '@components/layout/flex'\r\nimport FormLabel from '@components/forms/_shared/components/form-label/FormLabel.tsx'\r\nimport HelperText from '@components/forms/_shared/components/helper-text/HelperText.tsx'\r\nimport Select from '@components/forms/select/Select.tsx'\r\nimport type { SelectFieldProps } from '@components/forms/select/types/Select.props.ts'\r\nimport useSelectField from '@components/forms/select/components/select-field/hooks/useSelectField.hook.ts'\r\nimport { flattenItems } from '@components/forms/select/components/select-field/utils/flattenItems.utils.ts'\r\n\r\n/*\r\n Convenience wrapper around `Select` that provides a TextField-like API:\r\n * label, helperText, error, size, width, startIcon, placeholder and an\r\n * `options` array.\r\n \r\n @example\r\n * ```tsx\r\n * <SelectField\r\n * label=\"Fruit\"\r\n * placeholder=\"Pick a fruit\"\r\n * options={[\r\n * { value: 'apple', label: 'Apple' },\r\n * { value: 'banana', label: 'Banana' },\r\n * ]}\r\n * value={value}\r\n * onValueChange={setValue}\r\n * />\r\n * ```\r\n */\r\nconst SelectField: FC<SelectFieldProps> = memo(({\r\n label,\r\n helperText,\r\n error,\r\n startIcon,\r\n placeholder,\r\n size = 'md',\r\n fontSize = 'md',\r\n width,\r\n disabled,\r\n required,\r\n listboxAriaLabel,\r\n options,\r\n className,\r\n value,\r\n defaultValue,\r\n onValueChange,\r\n open,\r\n defaultOpen,\r\n onOpenChange,\r\n name,\r\n ...props\r\n}) => {\r\n const { triggerId, helperId, hasError, selectedValue, handleValueChange } = useSelectField({\r\n error,\r\n value,\r\n defaultValue,\r\n onValueChange,\r\n })\r\n\r\n const items = useMemo(() => flattenItems(options), [options])\r\n const labelId = label ? `${triggerId}-label` : undefined\r\n\r\n const handleSelectValueChange = useCallback(\r\n (v: string \| null) => { if (v !== null) { handleValueChange(v) } },\r\n [handleValueChange],\r\n )\r\n\r\n return (\r\n <Flex\r\n flexDirection={'column'}\r\n gap={'xs'}\r\n width={'100%'}\r\n alignItems={'start'}\r\n style={width !== undefined ? { width } : undefined}\r\n className={className}\r\n {...props}\r\n >\r\n {label && (\r\n <FormLabel\r\n id={labelId}\r\n disabled={disabled}\r\n fontSize={fontSize}\r\n >\r\n {label}\r\n </FormLabel>\r\n )}\r\n\r\n <Select\r\n value={selectedValue ?? null}\r\n onValueChange={handleSelectValueChange}\r\n disabled={disabled}\r\n required={required}\r\n open={open}\r\n defaultOpen={defaultOpen}\r\n onOpenChange={onOpenChange}\r\n name={name}\r\n items={items}\r\n >\r\n <Select.Trigger\r\n id={triggerId}\r\n placeholder={placeholder}\r\n startIcon={startIcon}\r\n size={size}\r\n fontSize={fontSize}\r\n aria-labelledby={labelId}\r\n hasError={hasError}\r\n aria-describedby={error \|\| helperText ? helperId : undefined}\r\n aria-invalid={hasError \|\| undefined}\r\n />\r\n <Select.Content listboxAriaLabel={listboxAriaLabel}>\r\n <Select.List>\r\n {options.map((option, index) => {\r\n if (option.type === 'separator') {\r\n return <Select.Separator key={`sep-${index}`} />\r\n }\r\n\r\n if (option.type === 'group') {\r\n return (\r\n <Select.Group key={`group-${option.label}-${index}`}>\r\n <Select.Label>{option.label}</Select.Label>\r\n {option.options.map((item) => (\r\n <Select.Item\r\n key={item.value}\r\n value={item.value}\r\n disabled={item.disabled}\r\n label={item.label}\r\n />\r\n ))}\r\n </Select.Group>\r\n )\r\n }\r\n\r\n return (\r\n <Select.Item\r\n key={option.value}\r\n value={option.value}\r\n disabled={option.disabled}\r\n label={option.label}\r\n />\r\n )\r\n })}\r\n </Select.List>\r\n </Select.Content>\r\n </Select>\r\n\r\n {(error \|\| helperText) && (\r\n <HelperText\r\n id={helperId}\r\n hasError={hasError}\r\n >\r\n {error ?? helperText}\r\n </HelperText>\r\n )}\r\n </Flex>\r\n )\r\n})\r\n\r\nSelectField.displayName = 'SelectField'\r\n\r\nexport default SelectField\r\n"],"names":["SelectField","memo","label","helperText","error","startIcon","placeholder","size","fontSize","width","disabled","required","listboxAriaLabel","options","className","value","defaultValue","onValueChange","open","defaultOpen","onOpenChange","name","props","triggerId","helperId","hasError","selectedValue","handleValueChange","useSelectField","items","useMemo","flattenItems","labelId","handleSelectValueChange","useCallback","v","jsxs","Flex","jsx","FormLabel","Select","option","index","item","HelperText"],"mappings":";;;;;;;;;AA6BA,MAAMA,IAAoCC,EAAK,CAAC;AAAA,EAC5C,OAAAC;AAAA,EACA,YAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,UAAAC,IAAW;AAAA,EACX,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,cAAAC;AAAA,EACA,eAAAC;AAAA,EACA,MAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,MAAAC;AAAA,EACA,GAAGC;AACP,MAAM;AACF,QAAM,EAAE,WAAAC,GAAW,UAAAC,GAAU,UAAAC,GAAU,eAAAC,GAAe,mBAAAC,EAAA,IAAsBC,EAAe;AAAA,IACvF,OAAAxB;AAAA,IACA,OAAAW;AAAA,IACA,cAAAC;AAAA,IACA,eAAAC;AAAA,EAAA,CACH,GAEKY,IAAQC,EAAQ,MAAMC,EAAalB,CAAO,GAAG,CAACA,CAAO,CAAC,GACtDmB,IAAU9B,IAAQ,GAAGqB,CAAS,WAAW,QAEzCU,IAA0BC;AAAA,IAC5B,CAACC,MAAqB;AAAE,MAAIA,MAAM,QAAQR,EAAkBQ,CAAC;AAAA,IAAI;AAAA,IACjE,CAACR,CAAiB;AAAA,EAAA;AAGtB,SACI,gBAAAS;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,eAAe;AAAA,MACf,KAAK;AAAA,MACL,OAAO;AAAA,MACP,YAAY;AAAA,MACZ,OAAO5B,MAAU,SAAY,EAAE,OAAAA,MAAU;AAAA,MACzC,WAAAK;AAAA,MACC,GAAGQ;AAAA,MAEH,UAAA;AAAA,QAAApB,KACG,gBAAAoC;AAAA,UAACC;AAAA,UAAA;AAAA,YACG,IAAIP;AAAA,YACJ,UAAAtB;AAAA,YACA,UAAAF;AAAA,YAEC,UAAAN;AAAA,UAAA;AAAA,QAAA;AAAA,QAIT,gBAAAkC;AAAA,UAACI;AAAA,UAAA;AAAA,YACG,OAAOd,KAAiB;AAAA,YACxB,eAAeO;AAAA,YACf,UAAAvB;AAAA,YACA,UAAAC;AAAA,YACA,MAAAO;AAAA,YACA,aAAAC;AAAA,YACA,cAAAC;AAAA,YACA,MAAAC;AAAA,YACA,OAAAQ;AAAA,YAEA,UAAA;AAAA,cAAA,gBAAAS;AAAA,gBAACE,EAAO;AAAA,gBAAP;AAAA,kBACG,IAAIjB;AAAA,kBACJ,aAAAjB;AAAA,kBACA,WAAAD;AAAA,kBACA,MAAAE;AAAA,kBACA,UAAAC;AAAA,kBACA,mBAAiBwB;AAAA,kBACjB,UAAAP;AAAA,kBACA,oBAAkBrB,KAASD,IAAaqB,IAAW;AAAA,kBACnD,gBAAcC,KAAY;AAAA,gBAAA;AAAA,cAAA;AAAA,cAE9B,gBAAAa,EAACE,EAAO,SAAP,EAAe,kBAAA5B,GACZ,UAAA,gBAAA0B,EAACE,EAAO,MAAP,EACI,UAAA3B,EAAQ,IAAI,CAAC4B,GAAQC,MACdD,EAAO,SAAS,gCACRD,EAAO,WAAP,CAAA,GAAsB,OAAOE,CAAK,EAAI,IAG9CD,EAAO,SAAS,UAEZ,gBAAAL,EAACI,EAAO,OAAP,EACG,UAAA;AAAA,gBAAA,gBAAAF,EAACE,EAAO,OAAP,EAAc,UAAAC,EAAO,OAAM;AAAA,gBAC3BA,EAAO,QAAQ,IAAI,CAACE,MACjB,gBAAAL;AAAA,kBAACE,EAAO;AAAA,kBAAP;AAAA,oBAEG,OAAOG,EAAK;AAAA,oBACZ,UAAUA,EAAK;AAAA,oBACf,OAAOA,EAAK;AAAA,kBAAA;AAAA,kBAHPA,EAAK;AAAA,gBAAA,CAKjB;AAAA,cAAA,EAAA,GATc,SAASF,EAAO,KAAK,IAAIC,CAAK,EAUjD,IAKJ,gBAAAJ;AAAA,gBAACE,EAAO;AAAA,gBAAP;AAAA,kBAEG,OAAOC,EAAO;AAAA,kBACd,UAAUA,EAAO;AAAA,kBACjB,OAAOA,EAAO;AAAA,gBAAA;AAAA,gBAHTA,EAAO;AAAA,cAAA,CAMvB,GACL,EAAA,CACJ;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,SAGFrC,KAASD,MACP,gBAAAmC;AAAA,UAACM;AAAA,UAAA;AAAA,YACG,IAAIpB;AAAA,YACJ,UAAAC;AAAA,YAEC,UAAArB,KAASD;AAAA,UAAA;AAAA,QAAA;AAAA,MACd;AAAA,IAAA;AAAA,EAAA;AAIhB,CAAC;AAEDH,EAAY,cAAc;"}

package/dist/components/forms/select/components/select-item/styles/SelectItem.css.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../../../ui-kit113.css');require('../../../../../../ui-kit.css');;/* empty css                                                    */;/* empty css                                */var e={root:"_64wk5i0",indicator:"_64wk5i1"};exports.SELECT_ITEM_STYLES=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../../../ui-kit105.css');require('../../../../../../ui-kit.css');;/* empty css                                                    */;/* empty css                                */var e={root:"_64wk5i0",indicator:"_64wk5i1"};exports.SELECT_ITEM_STYLES=e;
 //# sourceMappingURL=SelectItem.css.cjs.map

package/dist/components/forms/select/components/select-item/styles/SelectItem.css.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import '../../../../../../ui-kit113.css';import '../../../../../../ui-kit.css';/* empty css                                                  */
+import '../../../../../../ui-kit105.css';import '../../../../../../ui-kit.css';/* empty css                                                  */
 /* empty css                              */
 var r = { root: "_64wk5i0", indicator: "_64wk5i1" };
 export {

package/dist/components/forms/select/components/select-label/styles/SelectLabel.css.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../../../ui-kit107.css');require('../../../../../../ui-kit.css');;/* empty css                                                    */;/* empty css                                 */var e={root:"_1tcc5uo0"};exports.SELECT_LABEL_STYLES=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../../../ui-kit112.css');require('../../../../../../ui-kit.css');;/* empty css                                                    */;/* empty css                                 */var e={root:"_1tcc5uo0"};exports.SELECT_LABEL_STYLES=e;
 //# sourceMappingURL=SelectLabel.css.cjs.map

package/dist/components/forms/select/components/select-label/styles/SelectLabel.css.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import '../../../../../../ui-kit107.css';import '../../../../../../ui-kit.css';/* empty css                                                  */
+import '../../../../../../ui-kit112.css';import '../../../../../../ui-kit.css';/* empty css                                                  */
 /* empty css                               */
 var t = { root: "_1tcc5uo0" };
 export {

package/dist/components/forms/select/components/select-separator/styles/SelectSeparator.css.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../../../ui-kit109.css');require('../../../../../../ui-kit.css');;/* empty css                                                    */;/* empty css                                     */var e={root:"_1g2ch1s0"};exports.SELECT_SEPARATOR_STYLES=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../../../ui-kit110.css');require('../../../../../../ui-kit.css');;/* empty css                                                    */;/* empty css                                     */var e={root:"_1g2ch1s0"};exports.SELECT_SEPARATOR_STYLES=e;
 //# sourceMappingURL=SelectSeparator.css.cjs.map

package/dist/components/forms/select/components/select-separator/styles/SelectSeparator.css.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import '../../../../../../ui-kit109.css';import '../../../../../../ui-kit.css';/* empty css                                                  */
+import '../../../../../../ui-kit110.css';import '../../../../../../ui-kit.css';/* empty css                                                  */
 /* empty css                                   */
 var t = { root: "_1g2ch1s0" };
 export {

package/dist/components/forms/select/components/select-trigger/SelectTrigger.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";require('../../../../../ui-kit62.css');require('../../../../../ui-kit57.css');require('../../../../../ui-kit2.css');require('../../../../../ui-kit.css');const e=require("react/jsx-runtime"),c=require("@base-ui/react/select"),j=require("react"),R=require("../../../../foundation/icon/Icon.cjs");require("../../../../foundation/icon/styles/Icon.css.cjs");const I=require("../../../../../resources/asset/ChevronDownIcon.svg.cjs"),N=require("../../../../layout/box/Box.cjs");require("../../../../layout/box/styles/Box.css.cjs");const B=require("../../../text-field/components/text-field-start-icon/TextFieldStartIcon.cjs");;/* empty css                                                 */;/* empty css                                                     */;/* empty css                                                                                                  */require("../../../text-field/components/text-field-end-action/TextFieldEndAction.cjs");;/* empty css                                                                                                  */const s=require("./styles/SelectTrigger.css.cjs"),C=require("../../../../../utils/cn.cjs"),D=require("./hooks/useSelectTrigger.hook.cjs"),F=require("../../../../../theme/contract.css.cjs"),n=j.memo(({className:i,placeholder:t,startIcon:r,size:o="md",fontSize:u="md",hasError:l=!1,width:q,children:a,onMouseDown:S,onFocus:d,onBlur:g,style:m,...T})=>{const{handleMouseDown:x,handleFocus:h,handleBlur:E,mergedStyle:_}=D({width:q,style:m,onMouseDown:S,onFocus:d,onBlur:g});return e.jsxs(c.Select.Trigger,{...T,className:C.cn(s.SELECT_TRIGGER_STYLES.recipe({size:o,hasError:l,hasStartIcon:!!r}),i),style:{fontSize:F.vars.fontSize[u],..._},onMouseDown:x,onFocus:h,onBlur:E,children:[r&&e.jsx(B,{icon:r,size:o}),a??e.jsx(c.Select.Value,{placeholder:t}),e.jsx(N,{className:s.SELECT_TRIGGER_END_ICON,children:e.jsx(R,{icon:I,size:"md",color:"mutedForeground"})})]})});n.displayName="Select.Trigger";module.exports=n;
+"use strict";require('../../../../../ui-kit77.css');require('../../../../../ui-kit78.css');require('../../../../../ui-kit2.css');require('../../../../../ui-kit.css');const e=require("react/jsx-runtime"),c=require("@base-ui/react/select"),j=require("react"),R=require("../../../../foundation/icon/Icon.cjs");require("../../../../foundation/icon/styles/Icon.css.cjs");const I=require("../../../../../resources/asset/ChevronDownIcon.svg.cjs"),N=require("../../../../layout/box/Box.cjs");require("../../../../layout/box/styles/Box.css.cjs");const B=require("../../../text-field/components/text-field-start-icon/TextFieldStartIcon.cjs");;/* empty css                                                 */;/* empty css                                                     */;/* empty css                                                                                                  */require("../../../text-field/components/text-field-end-action/TextFieldEndAction.cjs");;/* empty css                                                                                                  */const s=require("./styles/SelectTrigger.css.cjs"),C=require("../../../../../utils/cn.cjs"),D=require("./hooks/useSelectTrigger.hook.cjs"),F=require("../../../../../theme/contract.css.cjs"),n=j.memo(({className:i,placeholder:t,startIcon:r,size:o="md",fontSize:u="md",hasError:l=!1,width:q,children:a,onMouseDown:S,onFocus:d,onBlur:g,style:m,...T})=>{const{handleMouseDown:x,handleFocus:h,handleBlur:E,mergedStyle:_}=D({width:q,style:m,onMouseDown:S,onFocus:d,onBlur:g});return e.jsxs(c.Select.Trigger,{...T,className:C.cn(s.SELECT_TRIGGER_STYLES.recipe({size:o,hasError:l,hasStartIcon:!!r}),i),style:{fontSize:F.vars.fontSize[u],..._},onMouseDown:x,onFocus:h,onBlur:E,children:[r&&e.jsx(B,{icon:r,size:o}),a??e.jsx(c.Select.Value,{placeholder:t}),e.jsx(N,{className:s.SELECT_TRIGGER_END_ICON,children:e.jsx(R,{icon:I,size:"md",color:"mutedForeground"})})]})});n.displayName="Select.Trigger";module.exports=n;
 //# sourceMappingURL=SelectTrigger.cjs.map

package/dist/components/forms/select/components/select-trigger/SelectTrigger.js CHANGED Viewed

@@ -7,7 +7,7 @@ import N from "../../../../../resources/asset/ChevronDownIcon.svg.js";
 import _ from "../../../../layout/box/Box.js";
 import "../../../../layout/box/styles/Box.css.js";
 import B from "../../../text-field/components/text-field-start-icon/TextFieldStartIcon.js";
-import '../../../../../ui-kit62.css';import '../../../../../ui-kit57.css';import '../../../../../ui-kit2.css';import '../../../../../ui-kit.css';/* empty css                                               */
+import '../../../../../ui-kit77.css';import '../../../../../ui-kit78.css';import '../../../../../ui-kit2.css';import '../../../../../ui-kit.css';/* empty css                                               */
 /* empty css                                                   */
 /* empty css                                                                                                */
 import "../../../text-field/components/text-field-end-action/TextFieldEndAction.js";

package/dist/components/forms/select/styles/Select.css.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../ui-kit31.css');require('../../../../ui-kit.css');;/* empty css                                              */;/* empty css                            */var e={placeholder:"f53dgk0"};exports.SELECT_STYLES=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../ui-kit40.css');require('../../../../ui-kit.css');;/* empty css                                              */;/* empty css                            */var e={placeholder:"f53dgk0"};exports.SELECT_STYLES=e;
 //# sourceMappingURL=Select.css.cjs.map

package/dist/components/forms/select/styles/Select.css.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import '../../../../ui-kit31.css';import '../../../../ui-kit.css';/* empty css                                            */
+import '../../../../ui-kit40.css';import '../../../../ui-kit.css';/* empty css                                            */
 /* empty css                          */
 var p = { placeholder: "f53dgk0" };
 export {

package/dist/components/forms/slider/Slider.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("react/jsx-runtime"),E=require("@base-ui/react/field"),I=require("@base-ui/react/slider"),l=require("react"),L=require("./components/slider-header/SliderHeader.cjs"),_=require("./components/slider-track/SliderTrack.cjs"),d=require("./styles/Slider.css.cjs"),x=require("../../../utils/cn.cjs"),o=l.memo(({label:a,showValue:S=!1,helperText:n,error:e,width:u="100%",size:m="md",color:q="primary",className:j,ref:p,value:c,defaultValue:t,...y})=>{const s=l.useId(),r=!!(e||n),R=Array.isArray(c??t);return i.jsx(E.Field.Root,{invalid:!!e,children:i.jsxs(I.Slider.Root,{ref:p,className:x.cn(d.SLIDER_STYLES.root,j),style:{width:u},"aria-describedby":r?s:void 0,value:c,defaultValue:t,...y,children:[i.jsx(L,{label:a,showValue:S}),i.jsx(_,{range:R,size:m,color:q,error:e,descriptionId:r?s:void 0}),r&&i.jsx("span",{id:s,className:e?d.SLIDER_STYLES.error:d.SLIDER_STYLES.helper,children:e??n})]})})});o.displayName="Slider";exports.Slider=o;exports.default=o;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("react/jsx-runtime"),b=require("@base-ui/react/field"),E=require("@base-ui/react/slider"),d=require("react"),L=require("./components/slider-header/SliderHeader.cjs"),_=require("./components/slider-track/SliderTrack.cjs"),o=require("./styles/Slider.css.cjs"),v=require("../../../utils/cn.cjs"),n=d.memo(({label:c,showValue:u=!1,helperText:t,error:e,width:m="100%",size:q="md",color:y="primary",className:I,ref:j,value:l,defaultValue:a,...p})=>{const s=d.useId(),S=d.useId(),r=!!(e||t),R=Array.isArray(l??a);return i.jsx(b.Field.Root,{invalid:!!e,children:i.jsxs(E.Slider.Root,{ref:j,className:v.cn(o.SLIDER_STYLES.root,I),style:{width:m},"aria-labelledby":c?S:void 0,"aria-describedby":r?s:void 0,value:l,defaultValue:a,...p,children:[i.jsx(L,{label:c,labelId:S,showValue:u}),i.jsx(_,{range:R,size:q,color:y,error:e,descriptionId:r?s:void 0}),r&&i.jsx("span",{id:s,className:e?o.SLIDER_STYLES.error:o.SLIDER_STYLES.helper,children:e??t})]})})});n.displayName="Slider";exports.Slider=n;exports.default=n;
 //# sourceMappingURL=Slider.cjs.map

package/dist/components/forms/slider/Slider.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Slider.cjs","sources":["../../../../src/components/forms/slider/Slider.tsx"],"sourcesContent":["import { Field } from '@base-ui/react/field'\r\nimport { Slider as BaseSlider } from '@base-ui/react/slider'\r\nimport { memo, type FC, useId } from 'react'\r\n\r\nimport SliderHeader from '@components/forms/slider/components/slider-header/SliderHeader.tsx'\r\nimport SliderTrack from '@components/forms/slider/components/slider-track/SliderTrack.tsx'\r\nimport { SLIDER_STYLES } from '@components/forms/slider/styles/Slider.css.ts'\r\nimport type { SliderProps } from '@components/forms/slider/types'\r\nimport { cn } from '@utils/cn.ts'\r\n\r\n/*\r\n Range input backed by Base UI Slider with a visible label, helper/error\r\n * text, and design-token `size` and `color` props. Supports both single-value\r\n * and multi-thumb range mode (pass an array for `value`/`defaultValue`).\r\n */\r\nexport const Slider: FC<SliderProps> = memo(({\r\n label,\r\n showValue = false,\r\n helperText,\r\n error,\r\n width = '100%',\r\n size = 'md',\r\n color = 'primary',\r\n className,\r\n ref,\r\n value,\r\n defaultValue,\r\n ...props\r\n}) => {\r\n const descriptionId = useId()\r\n const hasDescription = Boolean(error \|\| helperText)\r\n const range = Array.isArray(value ?? defaultValue)\r\n\r\n return (\r\n <Field.Root invalid={Boolean(error)}>\r\n <BaseSlider.Root\r\n ref={ref}\r\n className={cn(SLIDER_STYLES.root, className)}\r\n style={{ width }}\r\n aria-describedby={hasDescription ? descriptionId : undefined}\r\n value={value}\r\n defaultValue={defaultValue}\r\n {...props}\r\n >\r\n <SliderHeader\r\n label={label}\r\n showValue={showValue}\r\n />\r\n <SliderTrack\r\n range={range}\r\n size={size}\r\n color={color}\r\n error={error}\r\n descriptionId={hasDescription ? descriptionId : undefined}\r\n />\r\n {hasDescription && (\r\n <span\r\n id={descriptionId}\r\n className={error ? SLIDER_STYLES.error : SLIDER_STYLES.helper}\r\n >\r\n {error ?? helperText}\r\n </span>\r\n )}\r\n </BaseSlider.Root>\r\n </Field.Root>\r\n )\r\n})\r\n\r\nSlider.displayName = 'Slider'\r\n\r\nexport default Slider\r\n"],"names":["Slider","memo","label","showValue","helperText","error","width","size","color","className","ref","value","defaultValue","props","descriptionId","useId","hasDescription","range","Field","jsxs","BaseSlider","cn","SLIDER_STYLES","jsx","SliderHeader","SliderTrack"],"mappings":"iaAeaA,EAA0BC,EAAAA,KAAK,CAAC,CACzC,MAAAC,EACA,UAAAC,EAAY,GACZ,WAAAC,EACA,MAAAC,EACA,MAAAC,EAAQ,OACR,KAAAC,EAAO,KACP,MAAAC,EAAQ,UACR,UAAAC,EACA,IAAAC,EACA,MAAAC,EACA,aAAAC,EACA,GAAGC,CACP,IAAM,CACF,MAAMC,EAAgBC,EAAAA,MAAA,EAChBC,EAAiB,~~GAAQX~~,GAASD,~~GAClCa~~,EAAQ,MAAM,~~QAAQN~~,GAASC,CAAY,EAEjD,~~aACKM~~,EAAAA,MAAM,KAAN,CAAW,QAAS,~~EAAQb~~,EACzB,~~SAAAc~~,EAAAA,KAACC,EAAAA,OAAW,KAAX,CACG,~~IAAAV~~,EACA,~~UAAWW~~,EAAAA,GAAGC,gBAAc,~~KAAMb~~,CAAS,EAC3C,MAAO,CAAE,MAAAH,CAAA,EACT,~~mBAAkBU~~,~~EAAiBF~~,EAAgB,OACnD,MAAAH,EACA,aAAAC,EACC,GAAGC,EAEJ,SAAA,~~CAAAU~~,EAAAA,IAACC,EAAA,CACG,~~MAAAtB~~,EACA,~~UAAAC~~,CAAA,CAAA,~~EAEJoB~~,EAAAA,IAACE,EAAA,CACG,MAAAR,EACA,~~KAAAV~~,EACA,MAAAC,EACA,MAAAH,EACA,~~cAAeW~~,~~EAAiBF~~,EAAgB,MAAA,CAAA,~~EAEnDE~~,GACGO,EAAAA,IAAC,OAAA,CACG,~~GAAIT~~,EACJ,UAAWT,~~EAAQiB~~,EAAAA,cAAc,MAAQA,EAAAA,cAAc,OAEtD,~~SAAAjB~~,GAASD,CAAA,CAAA,CACd,CAAA,CAAA,EAGZ,CAER,CAAC,EAEDJ,EAAO,YAAc"}
1	+ {"version":3,"file":"Slider.cjs","sources":["../../../../src/components/forms/slider/Slider.tsx"],"sourcesContent":["import { Field } from '@base-ui/react/field'\r\nimport { Slider as BaseSlider } from '@base-ui/react/slider'\r\nimport { memo, type FC, useId } from 'react'\r\n\r\nimport SliderHeader from '@components/forms/slider/components/slider-header/SliderHeader.tsx'\r\nimport SliderTrack from '@components/forms/slider/components/slider-track/SliderTrack.tsx'\r\nimport { SLIDER_STYLES } from '@components/forms/slider/styles/Slider.css.ts'\r\nimport type { SliderProps } from '@components/forms/slider/types'\r\nimport { cn } from '@utils/cn.ts'\r\n\r\n/*\r\n Range input backed by Base UI Slider with a visible label, helper/error\r\n * text, and design-token `size` and `color` props. Supports both single-value\r\n * and multi-thumb range mode (pass an array for `value`/`defaultValue`).\r\n */\r\nexport const Slider: FC<SliderProps> = memo(({\r\n label,\r\n showValue = false,\r\n helperText,\r\n error,\r\n width = '100%',\r\n size = 'md',\r\n color = 'primary',\r\n className,\r\n ref,\r\n value,\r\n defaultValue,\r\n ...props\r\n}) => {\r\n const descriptionId = useId()\r\n const labelId = useId()\r\n const hasDescription = Boolean(error \|\| helperText)\r\n const range = Array.isArray(value ?? defaultValue)\r\n\r\n return (\r\n <Field.Root invalid={Boolean(error)}>\r\n <BaseSlider.Root\r\n ref={ref}\r\n className={cn(SLIDER_STYLES.root, className)}\r\n style={{ width }}\r\n aria-labelledby={label ? labelId : undefined}\r\n aria-describedby={hasDescription ? descriptionId : undefined}\r\n value={value}\r\n defaultValue={defaultValue}\r\n {...props}\r\n >\r\n <SliderHeader\r\n label={label}\r\n labelId={labelId}\r\n showValue={showValue}\r\n />\r\n <SliderTrack\r\n range={range}\r\n size={size}\r\n color={color}\r\n error={error}\r\n descriptionId={hasDescription ? descriptionId : undefined}\r\n />\r\n {hasDescription && (\r\n <span\r\n id={descriptionId}\r\n className={error ? SLIDER_STYLES.error : SLIDER_STYLES.helper}\r\n >\r\n {error ?? helperText}\r\n </span>\r\n )}\r\n </BaseSlider.Root>\r\n </Field.Root>\r\n )\r\n})\r\n\r\nSlider.displayName = 'Slider'\r\n\r\nexport default Slider\r\n"],"names":["Slider","memo","label","showValue","helperText","error","width","size","color","className","ref","value","defaultValue","props","descriptionId","useId","labelId","hasDescription","range","Field","jsxs","BaseSlider","cn","SLIDER_STYLES","jsx","SliderHeader","SliderTrack"],"mappings":"iaAeaA,EAA0BC,EAAAA,KAAK,CAAC,CACzC,MAAAC,EACA,UAAAC,EAAY,GACZ,WAAAC,EACA,MAAAC,EACA,MAAAC,EAAQ,OACR,KAAAC,EAAO,KACP,MAAAC,EAAQ,UACR,UAAAC,EACA,IAAAC,EACA,MAAAC,EACA,aAAAC,EACA,GAAGC,CACP,IAAM,CACF,MAAMC,EAAgBC,EAAAA,MAAA,EAChBC,EAAUD,EAAAA,MAAA,EACVE,EAAiB,GAAQZ,GAASD,GAClCc,EAAQ,MAAM,QAAQP,GAASC,CAAY,EAEjD,aACKO,EAAAA,MAAM,KAAN,CAAW,QAAS,EAAQd,EACzB,SAAAe,EAAAA,KAACC,EAAAA,OAAW,KAAX,CACG,IAAAX,EACA,UAAWY,EAAAA,GAAGC,gBAAc,KAAMd,CAAS,EAC3C,MAAO,CAAE,MAAAH,CAAA,EACT,kBAAiBJ,EAAQc,EAAU,OACnC,mBAAkBC,EAAiBH,EAAgB,OACnD,MAAAH,EACA,aAAAC,EACC,GAAGC,EAEJ,SAAA,CAAAW,EAAAA,IAACC,EAAA,CACG,MAAAvB,EACA,QAAAc,EACA,UAAAb,CAAA,CAAA,EAEJqB,EAAAA,IAACE,EAAA,CACG,MAAAR,EACA,KAAAX,EACA,MAAAC,EACA,MAAAH,EACA,cAAeY,EAAiBH,EAAgB,MAAA,CAAA,EAEnDG,GACGO,EAAAA,IAAC,OAAA,CACG,GAAIV,EACJ,UAAWT,EAAQkB,EAAAA,cAAc,MAAQA,EAAAA,cAAc,OAEtD,SAAAlB,GAASD,CAAA,CAAA,CACd,CAAA,CAAA,EAGZ,CAER,CAAC,EAEDJ,EAAO,YAAc"}

package/dist/components/forms/slider/Slider.js CHANGED Viewed

@@ -1,50 +1,52 @@
-import { jsx as o, jsxs as I } from "react/jsx-runtime";
+import { jsx as o, jsxs as v } from "react/jsx-runtime";
 import { Field as N } from "@base-ui/react/field";
 import { Slider as R } from "@base-ui/react/slider";
-import { memo as b, useId as j } from "react";
-import v from "./components/slider-header/SliderHeader.js";
-import x from "./components/slider-track/SliderTrack.js";
-import { SLIDER_STYLES as s } from "./styles/Slider.css.js";
-import { cn as A } from "../../../utils/cn.js";
-const B = b(({
-  label: t,
-  showValue: n = !1,
-  helperText: e,
+import { memo as j, useId as n } from "react";
+import x from "./components/slider-header/SliderHeader.js";
+import A from "./components/slider-track/SliderTrack.js";
+import { SLIDER_STYLES as e } from "./styles/Slider.css.js";
+import { cn as B } from "../../../utils/cn.js";
+const D = j(({
+  label: s,
+  showValue: c = !1,
+  helperText: a,
   error: i,
-  width: l = "100%",
-  size: c = "md",
-  color: p = "primary",
-  className: f,
-  ref: S,
+  width: p = "100%",
+  size: f = "md",
+  color: S = "primary",
+  className: y,
+  ref: I,
   value: m,
-  defaultValue: a,
-  ...y
+  defaultValue: t,
+  ...b
 }) => {
-  const r = j(), d = !!(i || e), h = Array.isArray(m ?? a);
-  return /* @__PURE__ */ o(N.Root, { invalid: !!i, children: /* @__PURE__ */ I(
+  const r = n(), l = n(), d = !!(i || a), h = Array.isArray(m ?? t);
+  return /* @__PURE__ */ o(N.Root, { invalid: !!i, children: /* @__PURE__ */ v(
     R.Root,
     {
-      ref: S,
-      className: A(s.root, f),
-      style: { width: l },
+      ref: I,
+      className: B(e.root, y),
+      style: { width: p },
+      "aria-labelledby": s ? l : void 0,
       "aria-describedby": d ? r : void 0,
       value: m,
-      defaultValue: a,
-      ...y,
+      defaultValue: t,
+      ...b,
       children: [
         /* @__PURE__ */ o(
-          v,
+          x,
           {
-            label: t,
-            showValue: n
+            label: s,
+            labelId: l,
+            showValue: c
           }
         ),
         /* @__PURE__ */ o(
-          x,
+          A,
           {
             range: h,
-            size: c,
-            color: p,
+            size: f,
+            color: S,
             error: i,
             descriptionId: d ? r : void 0
           }
@@ -53,17 +55,17 @@ const B = b(({
           "span",
           {
             id: r,
-            className: i ? s.error : s.helper,
-            children: i ?? e
+            className: i ? e.error : e.helper,
+            children: i ?? a
           }
         )
       ]
     }
   ) });
 });
-B.displayName = "Slider";
+D.displayName = "Slider";
 export {
-  B as Slider,
-  B as default
+  D as Slider,
+  D as default
 };
 //# sourceMappingURL=Slider.js.map

package/dist/components/forms/slider/Slider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Slider.js","sources":["../../../../src/components/forms/slider/Slider.tsx"],"sourcesContent":["import { Field } from '@base-ui/react/field'\r\nimport { Slider as BaseSlider } from '@base-ui/react/slider'\r\nimport { memo, type FC, useId } from 'react'\r\n\r\nimport SliderHeader from '@components/forms/slider/components/slider-header/SliderHeader.tsx'\r\nimport SliderTrack from '@components/forms/slider/components/slider-track/SliderTrack.tsx'\r\nimport { SLIDER_STYLES } from '@components/forms/slider/styles/Slider.css.ts'\r\nimport type { SliderProps } from '@components/forms/slider/types'\r\nimport { cn } from '@utils/cn.ts'\r\n\r\n/*\r\n Range input backed by Base UI Slider with a visible label, helper/error\r\n * text, and design-token `size` and `color` props. Supports both single-value\r\n * and multi-thumb range mode (pass an array for `value`/`defaultValue`).\r\n */\r\nexport const Slider: FC<SliderProps> = memo(({\r\n label,\r\n showValue = false,\r\n helperText,\r\n error,\r\n width = '100%',\r\n size = 'md',\r\n color = 'primary',\r\n className,\r\n ref,\r\n value,\r\n defaultValue,\r\n ...props\r\n}) => {\r\n const descriptionId = useId()\r\n const hasDescription = Boolean(error \|\| helperText)\r\n const range = Array.isArray(value ?? defaultValue)\r\n\r\n return (\r\n <Field.Root invalid={Boolean(error)}>\r\n <BaseSlider.Root\r\n ref={ref}\r\n className={cn(SLIDER_STYLES.root, className)}\r\n style={{ width }}\r\n aria-describedby={hasDescription ? descriptionId : undefined}\r\n value={value}\r\n defaultValue={defaultValue}\r\n {...props}\r\n >\r\n <SliderHeader\r\n label={label}\r\n showValue={showValue}\r\n />\r\n <SliderTrack\r\n range={range}\r\n size={size}\r\n color={color}\r\n error={error}\r\n descriptionId={hasDescription ? descriptionId : undefined}\r\n />\r\n {hasDescription && (\r\n <span\r\n id={descriptionId}\r\n className={error ? SLIDER_STYLES.error : SLIDER_STYLES.helper}\r\n >\r\n {error ?? helperText}\r\n </span>\r\n )}\r\n </BaseSlider.Root>\r\n </Field.Root>\r\n )\r\n})\r\n\r\nSlider.displayName = 'Slider'\r\n\r\nexport default Slider\r\n"],"names":["Slider","memo","label","showValue","helperText","error","width","size","color","className","ref","value","defaultValue","props","descriptionId","useId","hasDescription","range","Field","jsxs","BaseSlider","cn","SLIDER_STYLES","jsx","SliderHeader","SliderTrack"],"mappings":";;;;;;;;AAeO,MAAMA,IAA0BC,EAAK,CAAC;AAAA,EACzC,OAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,YAAAC;AAAA,EACA,OAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,MAAAC,IAAO;AAAA,EACP,OAAAC,IAAQ;AAAA,EACR,WAAAC;AAAA,EACA,KAAAC;AAAA,EACA,OAAAC;AAAA,EACA,cAAAC;AAAA,EACA,GAAGC;AACP,MAAM;AACF,QAAMC,IAAgBC,EAAA,GAChBC,IAAiB,~~GAAQX~~,KAASD,~~IAClCa~~,IAAQ,MAAM,~~QAAQN~~,KAASC,CAAY;AAEjD,~~2BACKM~~,EAAM,MAAN,EAAW,SAAS,~~EAAQb~~,GACzB,UAAA,~~gBAAAc~~;AAAA,IAACC,EAAW;AAAA,IAAX;AAAA,MACG,~~KAAAV~~;AAAA,MACA,~~WAAWW~~,EAAGC,EAAc,~~MAAMb~~,CAAS;AAAA,MAC3C,OAAO,EAAE,OAAAH,EAAA;AAAA,MACT,~~oBAAkBU~~,~~IAAiBF~~,IAAgB;AAAA,MACnD,OAAAH;AAAA,MACA,cAAAC;AAAA,MACC,GAAGC;AAAA,MAEJ,UAAA;AAAA,QAAA,~~gBAAAU~~;AAAA,UAACC;AAAA,UAAA;AAAA,YACG,~~OAAAtB~~;AAAA,YACA,~~WAAAC~~;AAAA,UAAA;AAAA,QAAA;AAAA,QAEJ,~~gBAAAoB~~;AAAA,UAACE;AAAA,UAAA;AAAA,YACG,OAAAR;AAAA,YACA,~~MAAAV~~;AAAA,YACA,OAAAC;AAAA,YACA,OAAAH;AAAA,YACA,~~eAAeW~~,~~IAAiBF~~,IAAgB;AAAA,UAAA;AAAA,QAAA;AAAA,~~QAEnDE~~,KACG,gBAAAO;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,~~IAAIT~~;AAAA,YACJ,WAAWT,~~IAAQiB~~,EAAc,QAAQA,EAAc;AAAA,YAEtD,~~UAAAjB~~,KAASD;AAAA,UAAA;AAAA,QAAA;AAAA,MACd;AAAA,IAAA;AAAA,EAAA,GAGZ;AAER,CAAC;AAEDJ,EAAO,cAAc;"}
1	+ {"version":3,"file":"Slider.js","sources":["../../../../src/components/forms/slider/Slider.tsx"],"sourcesContent":["import { Field } from '@base-ui/react/field'\r\nimport { Slider as BaseSlider } from '@base-ui/react/slider'\r\nimport { memo, type FC, useId } from 'react'\r\n\r\nimport SliderHeader from '@components/forms/slider/components/slider-header/SliderHeader.tsx'\r\nimport SliderTrack from '@components/forms/slider/components/slider-track/SliderTrack.tsx'\r\nimport { SLIDER_STYLES } from '@components/forms/slider/styles/Slider.css.ts'\r\nimport type { SliderProps } from '@components/forms/slider/types'\r\nimport { cn } from '@utils/cn.ts'\r\n\r\n/*\r\n Range input backed by Base UI Slider with a visible label, helper/error\r\n * text, and design-token `size` and `color` props. Supports both single-value\r\n * and multi-thumb range mode (pass an array for `value`/`defaultValue`).\r\n */\r\nexport const Slider: FC<SliderProps> = memo(({\r\n label,\r\n showValue = false,\r\n helperText,\r\n error,\r\n width = '100%',\r\n size = 'md',\r\n color = 'primary',\r\n className,\r\n ref,\r\n value,\r\n defaultValue,\r\n ...props\r\n}) => {\r\n const descriptionId = useId()\r\n const labelId = useId()\r\n const hasDescription = Boolean(error \|\| helperText)\r\n const range = Array.isArray(value ?? defaultValue)\r\n\r\n return (\r\n <Field.Root invalid={Boolean(error)}>\r\n <BaseSlider.Root\r\n ref={ref}\r\n className={cn(SLIDER_STYLES.root, className)}\r\n style={{ width }}\r\n aria-labelledby={label ? labelId : undefined}\r\n aria-describedby={hasDescription ? descriptionId : undefined}\r\n value={value}\r\n defaultValue={defaultValue}\r\n {...props}\r\n >\r\n <SliderHeader\r\n label={label}\r\n labelId={labelId}\r\n showValue={showValue}\r\n />\r\n <SliderTrack\r\n range={range}\r\n size={size}\r\n color={color}\r\n error={error}\r\n descriptionId={hasDescription ? descriptionId : undefined}\r\n />\r\n {hasDescription && (\r\n <span\r\n id={descriptionId}\r\n className={error ? SLIDER_STYLES.error : SLIDER_STYLES.helper}\r\n >\r\n {error ?? helperText}\r\n </span>\r\n )}\r\n </BaseSlider.Root>\r\n </Field.Root>\r\n )\r\n})\r\n\r\nSlider.displayName = 'Slider'\r\n\r\nexport default Slider\r\n"],"names":["Slider","memo","label","showValue","helperText","error","width","size","color","className","ref","value","defaultValue","props","descriptionId","useId","labelId","hasDescription","range","Field","jsxs","BaseSlider","cn","SLIDER_STYLES","jsx","SliderHeader","SliderTrack"],"mappings":";;;;;;;;AAeO,MAAMA,IAA0BC,EAAK,CAAC;AAAA,EACzC,OAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,YAAAC;AAAA,EACA,OAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,MAAAC,IAAO;AAAA,EACP,OAAAC,IAAQ;AAAA,EACR,WAAAC;AAAA,EACA,KAAAC;AAAA,EACA,OAAAC;AAAA,EACA,cAAAC;AAAA,EACA,GAAGC;AACP,MAAM;AACF,QAAMC,IAAgBC,EAAA,GAChBC,IAAUD,EAAA,GACVE,IAAiB,GAAQZ,KAASD,IAClCc,IAAQ,MAAM,QAAQP,KAASC,CAAY;AAEjD,2BACKO,EAAM,MAAN,EAAW,SAAS,EAAQd,GACzB,UAAA,gBAAAe;AAAA,IAACC,EAAW;AAAA,IAAX;AAAA,MACG,KAAAX;AAAA,MACA,WAAWY,EAAGC,EAAc,MAAMd,CAAS;AAAA,MAC3C,OAAO,EAAE,OAAAH,EAAA;AAAA,MACT,mBAAiBJ,IAAQc,IAAU;AAAA,MACnC,oBAAkBC,IAAiBH,IAAgB;AAAA,MACnD,OAAAH;AAAA,MACA,cAAAC;AAAA,MACC,GAAGC;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAW;AAAA,UAACC;AAAA,UAAA;AAAA,YACG,OAAAvB;AAAA,YACA,SAAAc;AAAA,YACA,WAAAb;AAAA,UAAA;AAAA,QAAA;AAAA,QAEJ,gBAAAqB;AAAA,UAACE;AAAA,UAAA;AAAA,YACG,OAAAR;AAAA,YACA,MAAAX;AAAA,YACA,OAAAC;AAAA,YACA,OAAAH;AAAA,YACA,eAAeY,IAAiBH,IAAgB;AAAA,UAAA;AAAA,QAAA;AAAA,QAEnDG,KACG,gBAAAO;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,IAAIV;AAAA,YACJ,WAAWT,IAAQkB,EAAc,QAAQA,EAAc;AAAA,YAEtD,UAAAlB,KAASD;AAAA,UAAA;AAAA,QAAA;AAAA,MACd;AAAA,IAAA;AAAA,EAAA,GAGZ;AAER,CAAC;AAEDJ,EAAO,cAAc;"}

package/dist/components/forms/slider/components/slider-header/SliderHeader.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";const e=require("react/jsx-runtime"),i=require("@base-ui/react/slider"),s=require("./styles/SliderHeader.css.cjs"),c=({label:r,showValue:l})=>e.jsxs("div",{className:s.SLIDER_HEADER_STYLES.root,children:[r&&e.jsx(i.Slider.Label,{className:s.SLIDER_HEADER_STYLES.label,children:r}),l&&e.jsx(i.Slider.Value,{className:s.SLIDER_HEADER_STYLES.value,children:S=>S.join(" – ")})]});module.exports=c;
+"use strict";const e=require("react/jsx-runtime"),c=require("@base-ui/react/slider"),n=require("../../../../foundation/typography/Typography.cjs");require("../../../../foundation/typography/styles/Typography.css.cjs");const r=require("./styles/SliderHeader.css.cjs"),E=({label:s,labelId:i,showValue:a})=>e.jsxs("div",{className:r.SLIDER_HEADER_STYLES.root,children:[s&&e.jsx(n,{as:"span",variant:"label",id:i,className:r.SLIDER_HEADER_STYLES.label,children:s}),a&&e.jsx(c.Slider.Value,{className:r.SLIDER_HEADER_STYLES.value,children:l=>l.join(" – ")})]});module.exports=E;
 //# sourceMappingURL=SliderHeader.cjs.map

package/dist/components/forms/slider/components/slider-header/SliderHeader.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SliderHeader.cjs","sources":["../../../../../../src/components/forms/slider/components/slider-header/SliderHeader.tsx"],"sourcesContent":["import { Slider as BaseSlider } from '@base-ui/react/slider'\r\n\r\nimport { SLIDER_HEADER_STYLES } from '@components/forms/slider/components/slider-header/styles/SliderHeader.css.ts'\r\nimport type { SliderHeaderProps } from '@components/forms/slider/components/slider-header/types/SliderHeader.props.ts'\r\n\r\nconst SliderHeader = ({ label, showValue }: SliderHeaderProps) => (\r\n <div className={SLIDER_HEADER_STYLES.root}>\r\n {label && <~~BaseSlider.Label~~ className={SLIDER_HEADER_STYLES.label}>{label}</~~BaseSlider.Label>~~}\r\n {showValue && (\r\n <BaseSlider.Value className={SLIDER_HEADER_STYLES.value}>\r\n {(formattedValues) => formattedValues.join(' – ')}\r\n </BaseSlider.Value>\r\n )}\r\n </div>\r\n)\r\n\r\nexport default SliderHeader\r\n"],"names":["SliderHeader","label","showValue","jsxs","SLIDER_HEADER_STYLES","~~BaseSlider~~","~~jsx~~","formattedValues"],"mappings":"~~gIAKMA~~,EAAe,CAAC,CAAE,MAAAC,EAAO,UAAAC,~~KAC3BC~~,~~EAAAA~~,~~KAAC~~,MAAA,CAAI,UAAWC,uBAAqB,KAChC,SAAA,~~CAAAH~~,~~SAAUI~~,EAAAA,~~OAAW~~,~~MAAX~~,~~CAAiB~~,~~UAAWD~~,EAAAA,qBAAqB,~~MAAQ~~,~~SAAAH~~,~~EAAM~~,~~EACzEC~~,~~GACGI~~,EAAAA,~~IAACD~~,EAAAA,OAAW,MAAX,CAAiB,~~UAAWD~~,EAAAA,qBAAqB,MAC7C,~~SAACG~~,GAAoBA,EAAgB,KAAK,KAAK,CAAA,CACpD,CAAA,CAAA,CAER"}
1	+ {"version":3,"file":"SliderHeader.cjs","sources":["../../../../../../src/components/forms/slider/components/slider-header/SliderHeader.tsx"],"sourcesContent":["import { Slider as BaseSlider } from '@base-ui/react/slider'\r\nimport { Typography } from '@components/foundation/typography'\r\n\r\nimport { SLIDER_HEADER_STYLES } from '@components/forms/slider/components/slider-header/styles/SliderHeader.css.ts'\r\nimport type { SliderHeaderProps } from '@components/forms/slider/components/slider-header/types/SliderHeader.props.ts'\r\n\r\nconst SliderHeader = ({ label, labelId, showValue }: SliderHeaderProps) => (\r\n <div className={SLIDER_HEADER_STYLES.root}>\r\n {label && (\r\n <Typography\r\n as={'span'}\r\n variant={'label'}\r\n id={labelId}\r\n className={SLIDER_HEADER_STYLES.label}\r\n >\r\n {label}\r\n </Typography>\r\n )}\r\n {showValue && (\r\n <BaseSlider.Value className={SLIDER_HEADER_STYLES.value}>\r\n {(formattedValues) => formattedValues.join(' – ')}\r\n </BaseSlider.Value>\r\n )}\r\n </div>\r\n)\r\n\r\nexport default SliderHeader\r\n"],"names":["SliderHeader","label","labelId","showValue","jsxs","SLIDER_HEADER_STYLES","jsx","Typography","BaseSlider","formattedValues"],"mappings":"2QAMMA,EAAe,CAAC,CAAE,MAAAC,EAAO,QAAAC,EAAS,UAAAC,CAAA,IACpCC,OAAC,MAAA,CAAI,UAAWC,uBAAqB,KAChC,SAAA,CAAAJ,GACGK,EAAAA,IAACC,EAAA,CACG,GAAI,OACJ,QAAS,QACT,GAAIL,EACJ,UAAWG,EAAAA,qBAAqB,MAE/B,SAAAJ,CAAA,CAAA,EAGRE,GACGG,EAAAA,IAACE,EAAAA,OAAW,MAAX,CAAiB,UAAWH,EAAAA,qBAAqB,MAC7C,SAACI,GAAoBA,EAAgB,KAAK,KAAK,CAAA,CACpD,CAAA,CAAA,CAER"}

package/dist/components/forms/slider/components/slider-header/SliderHeader.d.ts CHANGED Viewed

@@ -1,3 +1,3 @@
 import { SliderHeaderProps } from './types/SliderHeader.props.ts';
-declare const SliderHeader: ({ label, showValue }: SliderHeaderProps) => import("react").JSX.Element;
+declare const SliderHeader: ({ label, labelId, showValue }: SliderHeaderProps) => import("react").JSX.Element;
 export default SliderHeader;