@choco-vanille/ui 1.1.1 → 1.1.2

package/dist/components/forms/select/components/index.d.ts

@@ -0,0 +1,16 @@
+export { default as SelectTrigger } from './select-trigger/SelectTrigger.tsx';
+export type { SelectTriggerProps } from './select-trigger/types/SelectTrigger.props.ts';
+export { SELECT_TRIGGER_STYLES } from './select-trigger/styles/SelectTrigger.css.ts';
+export { default as SelectContent } from './select-content/SelectContent.tsx';
+export type { SelectContentProps } from './select-content/types/SelectContent.props.ts';
+export { SELECT_CONTENT_STYLES } from './select-content/styles/SelectContent.css.ts';
+export { default as SelectList } from './select-list/SelectList.tsx';
+export { default as SelectGroup } from './select-group/SelectGroup.tsx';
+export { default as SelectLabel } from './select-label/SelectLabel.tsx';
+export { SELECT_LABEL_STYLES } from './select-label/styles/SelectLabel.css.ts';
+export { default as SelectItem } from './select-item/SelectItem.tsx';
+export type { SelectItemProps } from './select-item/types/SelectItem.props.ts';
+export { SELECT_ITEM_STYLES } from './select-item/styles/SelectItem.css.ts';
+export { default as SelectSeparator } from './select-separator/SelectSeparator.tsx';
+export { SELECT_SEPARATOR_STYLES } from './select-separator/styles/SelectSeparator.css.ts';
+export { default as SelectField } from './select-field/SelectField.tsx';

package/dist/components/forms/select/components/select-content/SelectContent.cjs

@@ -0,0 +1,2 @@
+"use strict";const e=require("react/jsx-runtime"),t=require("@base-ui/react/select"),m=require("react"),p=require("../../../../../utils/cn.cjs"),h=require("./styles/SelectContent.css.cjs"),q=require("../../../../../hooks/use-viewport-shift/useViewportShift.hook.cjs"),n=m.memo(({className:o,listboxAriaLabel:s="Options",children:r,side:i="bottom",align:c="start",sideOffset:l=6,collisionPadding:a=8,...u})=>{const S=q.useViewportShift(a);return e.jsx(t.Select.Portal,{children:e.jsx(t.Select.Positioner,{side:i,align:c,sideOffset:l,alignItemWithTrigger:!1,collisionAvoidance:{side:"none",align:"none"},...u,children:e.jsx(t.Select.Popup,{ref:S,className:p.cn(h.SELECT_CONTENT_STYLES.root,o),"aria-label":s,children:r})})})});n.displayName="Select.Content";module.exports=n;
+//# sourceMappingURL=SelectContent.cjs.map

package/dist/components/forms/select/components/select-content/SelectContent.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectContent.cjs","sources":["../../../../../../src/components/forms/select/components/select-content/SelectContent.tsx"],"sourcesContent":["import { Select as BaseSelect } from '@base-ui/react/select'\r\nimport { memo, type FC } from 'react'\r\n\r\nimport { cn } from '@utils/cn.ts'\r\nimport { SELECT_CONTENT_STYLES } from '@components/forms/select/components/select-content/styles/SelectContent.css.ts'\r\nimport { useViewportShift } from '@hooks'\r\nimport type { SelectContentProps } from '@components/forms/select/components/select-content/types/SelectContent.props.ts'\r\n\r\n/**\r\n * The listbox popup panel.\r\n *\r\n * Wraps Base UI's Portal → Positioner → Popup so consumers can use the same\r\n * simple API as before. Collision handling is delegated to `useViewportShift`\r\n * (Base UI's built-in flip/shift is disabled).\r\n */\r\nconst SelectContent: FC<SelectContentProps> = memo(({\r\n    className,\r\n    listboxAriaLabel = 'Options',\r\n    children,\r\n    side = 'bottom',\r\n    align = 'start',\r\n    sideOffset = 6,\r\n    collisionPadding = 8,\r\n    ...props\r\n}) => {\r\n    const contentRef = useViewportShift(collisionPadding)\r\n\r\n    return (\r\n        <BaseSelect.Portal>\r\n            <BaseSelect.Positioner\r\n                side={side}\r\n                align={align}\r\n                sideOffset={sideOffset}\r\n                // Use standard popper-style positioning (no \"align item with trigger\" overlap).\r\n                alignItemWithTrigger={false}\r\n                // Disable Base UI's flip/shift — our hook handles collision instead.\r\n                collisionAvoidance={{ side: 'none', align: 'none' }}\r\n                {...props}\r\n            >\r\n                <BaseSelect.Popup\r\n                    ref={contentRef}\r\n                    className={cn(SELECT_CONTENT_STYLES.root, className)}\r\n                    aria-label={listboxAriaLabel}\r\n                >\r\n                    {children}\r\n                </BaseSelect.Popup>\r\n            </BaseSelect.Positioner>\r\n        </BaseSelect.Portal>\r\n    )\r\n})\r\n\r\nSelectContent.displayName = 'Select.Content'\r\n\r\nexport default SelectContent\r\n"],"names":["SelectContent","memo","className","listboxAriaLabel","children","side","align","sideOffset","collisionPadding","props","contentRef","useViewportShift","jsx","BaseSelect","cn","SELECT_CONTENT_STYLES"],"mappings":"4QAeMA,EAAwCC,EAAAA,KAAK,CAAC,CAChD,UAAAC,EACA,iBAAAC,EAAmB,UACnB,SAAAC,EACA,KAAAC,EAAO,SACP,MAAAC,EAAQ,QACR,WAAAC,EAAa,EACb,iBAAAC,EAAmB,EACnB,GAAGC,CACP,IAAM,CACF,MAAMC,EAAaC,EAAAA,iBAAiBH,CAAgB,EAEpD,OACII,EAAAA,IAACC,EAAAA,OAAW,OAAX,CACG,SAAAD,EAAAA,IAACC,EAAAA,OAAW,WAAX,CACG,KAAAR,EACA,MAAAC,EACA,WAAAC,EAEA,qBAAsB,GAEtB,mBAAoB,CAAE,KAAM,OAAQ,MAAO,MAAA,EAC1C,GAAGE,EAEJ,SAAAG,EAAAA,IAACC,EAAAA,OAAW,MAAX,CACG,IAAKH,EACL,UAAWI,EAAAA,GAAGC,wBAAsB,KAAMb,CAAS,EACnD,aAAYC,EAEX,SAAAC,CAAA,CAAA,CACL,CAAA,EAER,CAER,CAAC,EAEDJ,EAAc,YAAc"}

package/dist/components/forms/select/components/select-content/SelectContent.d.ts

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+import { SelectContentProps } from './types/SelectContent.props.ts';
+/**
+ * The listbox popup panel.
+ *
+ * Wraps Base UI's Portal → Positioner → Popup so consumers can use the same
+ * simple API as before. Collision handling is delegated to `useViewportShift`
+ * (Base UI's built-in flip/shift is disabled).
+ */
+declare const SelectContent: FC<SelectContentProps>;
+export default SelectContent;

package/dist/components/forms/select/components/select-content/SelectContent.js

@@ -0,0 +1,43 @@
+import { jsx as o } from "react/jsx-runtime";
+import { Select as t } from "@base-ui/react/select";
+import { memo as p } from "react";
+import { cn as f } from "../../../../../utils/cn.js";
+import { SELECT_CONTENT_STYLES as S } from "./styles/SelectContent.css.js";
+import { useViewportShift as d } from "../../../../../hooks/use-viewport-shift/useViewportShift.hook.js";
+const T = p(({
+  className: e,
+  listboxAriaLabel: r = "Options",
+  children: i,
+  side: n = "bottom",
+  align: m = "start",
+  sideOffset: l = 6,
+  collisionPadding: a = 8,
+  ...s
+}) => {
+  const c = d(a);
+  return /* @__PURE__ */ o(t.Portal, { children: /* @__PURE__ */ o(
+    t.Positioner,
+    {
+      side: n,
+      align: m,
+      sideOffset: l,
+      alignItemWithTrigger: !1,
+      collisionAvoidance: { side: "none", align: "none" },
+      ...s,
+      children: /* @__PURE__ */ o(
+        t.Popup,
+        {
+          ref: c,
+          className: f(S.root, e),
+          "aria-label": r,
+          children: i
+        }
+      )
+    }
+  ) });
+});
+T.displayName = "Select.Content";
+export {
+  T as default
+};
+//# sourceMappingURL=SelectContent.js.map

package/dist/components/forms/select/components/select-content/SelectContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectContent.js","sources":["../../../../../../src/components/forms/select/components/select-content/SelectContent.tsx"],"sourcesContent":["import { Select as BaseSelect } from '@base-ui/react/select'\r\nimport { memo, type FC } from 'react'\r\n\r\nimport { cn } from '@utils/cn.ts'\r\nimport { SELECT_CONTENT_STYLES } from '@components/forms/select/components/select-content/styles/SelectContent.css.ts'\r\nimport { useViewportShift } from '@hooks'\r\nimport type { SelectContentProps } from '@components/forms/select/components/select-content/types/SelectContent.props.ts'\r\n\r\n/**\r\n * The listbox popup panel.\r\n *\r\n * Wraps Base UI's Portal → Positioner → Popup so consumers can use the same\r\n * simple API as before. Collision handling is delegated to `useViewportShift`\r\n * (Base UI's built-in flip/shift is disabled).\r\n */\r\nconst SelectContent: FC<SelectContentProps> = memo(({\r\n    className,\r\n    listboxAriaLabel = 'Options',\r\n    children,\r\n    side = 'bottom',\r\n    align = 'start',\r\n    sideOffset = 6,\r\n    collisionPadding = 8,\r\n    ...props\r\n}) => {\r\n    const contentRef = useViewportShift(collisionPadding)\r\n\r\n    return (\r\n        <BaseSelect.Portal>\r\n            <BaseSelect.Positioner\r\n                side={side}\r\n                align={align}\r\n                sideOffset={sideOffset}\r\n                // Use standard popper-style positioning (no \"align item with trigger\" overlap).\r\n                alignItemWithTrigger={false}\r\n                // Disable Base UI's flip/shift — our hook handles collision instead.\r\n                collisionAvoidance={{ side: 'none', align: 'none' }}\r\n                {...props}\r\n            >\r\n                <BaseSelect.Popup\r\n                    ref={contentRef}\r\n                    className={cn(SELECT_CONTENT_STYLES.root, className)}\r\n                    aria-label={listboxAriaLabel}\r\n                >\r\n                    {children}\r\n                </BaseSelect.Popup>\r\n            </BaseSelect.Positioner>\r\n        </BaseSelect.Portal>\r\n    )\r\n})\r\n\r\nSelectContent.displayName = 'Select.Content'\r\n\r\nexport default SelectContent\r\n"],"names":["SelectContent","memo","className","listboxAriaLabel","children","side","align","sideOffset","collisionPadding","props","contentRef","useViewportShift","jsx","BaseSelect","cn","SELECT_CONTENT_STYLES"],"mappings":";;;;;;AAeA,MAAMA,IAAwCC,EAAK,CAAC;AAAA,EAChD,WAAAC;AAAA,EACA,kBAAAC,IAAmB;AAAA,EACnB,UAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,OAAAC,IAAQ;AAAA,EACR,YAAAC,IAAa;AAAA,EACb,kBAAAC,IAAmB;AAAA,EACnB,GAAGC;AACP,MAAM;AACF,QAAMC,IAAaC,EAAiBH,CAAgB;AAEpD,SACI,gBAAAI,EAACC,EAAW,QAAX,EACG,UAAA,gBAAAD;AAAA,IAACC,EAAW;AAAA,IAAX;AAAA,MACG,MAAAR;AAAA,MACA,OAAAC;AAAA,MACA,YAAAC;AAAA,MAEA,sBAAsB;AAAA,MAEtB,oBAAoB,EAAE,MAAM,QAAQ,OAAO,OAAA;AAAA,MAC1C,GAAGE;AAAA,MAEJ,UAAA,gBAAAG;AAAA,QAACC,EAAW;AAAA,QAAX;AAAA,UACG,KAAKH;AAAA,UACL,WAAWI,EAAGC,EAAsB,MAAMb,CAAS;AAAA,UACnD,cAAYC;AAAA,UAEX,UAAAC;AAAA,QAAA;AAAA,MAAA;AAAA,IACL;AAAA,EAAA,GAER;AAER,CAAC;AAEDJ,EAAc,cAAc;"}

package/dist/components/forms/select/components/select-content/styles/SelectContent.css.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});;/* empty css                                                    */;/* empty css                                                                      */;/* empty css                                                                       */;/* empty css                                                                               */;/* empty css                                                                            */;/* empty css                                                                             */;/* empty css                                                                          */;/* empty css                                                                           */;/* empty css                                                                             */;/* empty css                                                                              */;/* empty css                                                                            */;/* empty css                                                                             */;/* empty css                                                                             */;/* empty css                                   */var e={root:"k8yojq0"};exports.SELECT_CONTENT_STYLES=e;
+//# sourceMappingURL=SelectContent.css.cjs.map

package/dist/components/forms/select/components/select-content/styles/SelectContent.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectContent.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/forms/select/components/select-content/styles/SelectContent.css.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Listbox popup — visually identical to the DropdownMenu panel.
+ */
+export declare const SELECT_CONTENT_STYLES: {
+    root: string;
+};

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

@@ -0,0 +1,19 @@
+/* empty css                                                  */
+/* empty css                                                                    */
+/* empty css                                                                     */
+/* empty css                                                                             */
+/* empty css                                                                          */
+/* empty css                                                                           */
+/* empty css                                                                        */
+/* empty css                                                                         */
+/* empty css                                                                           */
+/* empty css                                                                            */
+/* empty css                                                                          */
+/* empty css                                                                           */
+/* empty css                                                                           */
+/* empty css                                 */
+var e = { root: "k8yojq0" };
+export {
+  e as SELECT_CONTENT_STYLES
+};
+//# sourceMappingURL=SelectContent.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectContent.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;"}

package/dist/components/forms/select/components/select-content/types/SelectContent.props.d.ts

@@ -0,0 +1,11 @@
+import { Select as BaseSelect } from '@base-ui/react/select';
+import type * as React from 'react';
+/** Props for the styled content (listbox popup). */
+export type SelectContentProps = Pick<BaseSelect.Positioner.Props, 'side' | 'align' | 'sideOffset'> & {
+    className?: string;
+    children?: React.ReactNode;
+    /** Collision margin in px passed to `useViewportShift`. */
+    collisionPadding?: number;
+    /** Accessible name for the select listbox popup. */
+    listboxAriaLabel?: string;
+};

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

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

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

@@ -0,0 +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 HelperText from '@components/forms/_shared/components/helper-text/HelperText.tsx'\r\nimport { TextFieldLabel } from '@components/forms/text-field/components'\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    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                <TextFieldLabel\r\n                    htmlFor={triggerId}\r\n                    disabled={disabled}\r\n                >\r\n                    {label}\r\n                </TextFieldLabel>\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                    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","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","TextFieldLabel","Select","option","index","item","HelperText"],"mappings":"6jCA6BMA,EAAoCC,EAAAA,KAAK,CAAC,CAC5C,MAAAC,EACA,WAAAC,EACA,MAAAC,EACA,UAAAC,EACA,YAAAC,EACA,KAAAC,EAAO,KACP,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,MAAAvB,EACA,MAAAU,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,CAAAnB,GACGkC,EAAAA,IAACC,EAAA,CACG,QAASf,EACT,SAAAb,EAEC,SAAAP,CAAA,CAAA,EAITgC,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,YAAAhB,EACA,UAAAD,EACA,KAAAE,EACA,SAAAiB,EACA,mBAAkBpB,GAASD,EAAaoB,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,GAGFnC,GAASD,IACPiC,EAAAA,IAACM,EAAA,CACG,GAAInB,EACJ,SAAAC,EAEC,SAAApB,GAASD,CAAA,CAAA,CACd,CAAA,CAAA,CAIhB,CAAC,EAEDH,EAAY,YAAc"}

package/dist/components/forms/select/components/select-field/SelectField.d.ts

@@ -0,0 +1,23 @@
+import { FC } from 'react';
+import { SelectFieldProps } from '../../types/Select.props.ts';
+/**
+ * Convenience wrapper around `Select` that provides a TextField-like API:
+ * label, helperText, error, size, width, startIcon, placeholder and an
+ * `options` array.
+ *
+ * @example
+ * ```tsx
+ * <SelectField
+ *   label="Fruit"
+ *   placeholder="Pick a fruit"
+ *   options={[
+ *     { value: 'apple', label: 'Apple' },
+ *     { value: 'banana', label: 'Banana' },
+ *   ]}
+ *   value={value}
+ *   onValueChange={setValue}
+ * />
+ * ```
+ */
+declare const SelectField: FC<SelectFieldProps>;
+export default SelectField;

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

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

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

@@ -0,0 +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 HelperText from '@components/forms/_shared/components/helper-text/HelperText.tsx'\r\nimport { TextFieldLabel } from '@components/forms/text-field/components'\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    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                <TextFieldLabel\r\n                    htmlFor={triggerId}\r\n                    disabled={disabled}\r\n                >\r\n                    {label}\r\n                </TextFieldLabel>\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                    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","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","TextFieldLabel","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,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,OAAAvB;AAAA,IACA,OAAAU;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,QAAAnB,KACG,gBAAAkC;AAAA,UAACC;AAAA,UAAA;AAAA,YACG,SAASf;AAAA,YACT,UAAAb;AAAA,YAEC,UAAAP;AAAA,UAAA;AAAA,QAAA;AAAA,QAIT,gBAAAgC;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,aAAAhB;AAAA,kBACA,WAAAD;AAAA,kBACA,MAAAE;AAAA,kBACA,UAAAiB;AAAA,kBACA,oBAAkBpB,KAASD,IAAaoB,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,SAGFnC,KAASD,MACP,gBAAAiC;AAAA,UAACM;AAAA,UAAA;AAAA,YACG,IAAInB;AAAA,YACJ,UAAAC;AAAA,YAEC,UAAApB,KAASD;AAAA,UAAA;AAAA,QAAA;AAAA,MACd;AAAA,IAAA;AAAA,EAAA;AAIhB,CAAC;AAEDH,EAAY,cAAc;"}

package/dist/components/forms/select/components/select-field/hooks/useSelectField.hook.cjs

@@ -0,0 +1,2 @@
+"use strict";const r=require("react"),S=({error:c,value:e,defaultValue:i,onValueChange:s})=>{const n=r.useId(),d=`${n}-trigger`,l=`${n}-helper`,a=!!c,[g,u]=r.useState(i??(e!==void 0?String(e):void 0)),t=e!==void 0,I=t?String(e):g,h=r.useCallback(o=>{t||u(o),s?.(o)},[t,s]);return{triggerId:d,helperId:l,hasError:a,selectedValue:I,handleValueChange:h}};module.exports=S;
+//# sourceMappingURL=useSelectField.hook.cjs.map

package/dist/components/forms/select/components/select-field/hooks/useSelectField.hook.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSelectField.hook.cjs","sources":["../../../../../../../src/components/forms/select/components/select-field/hooks/useSelectField.hook.ts"],"sourcesContent":["import { useCallback, useId, useState } from 'react'\r\nimport type { UseSelectFieldParams, UseSelectFieldReturn } from '@components/forms/select/components/select-field/types'\r\n\r\nconst useSelectField = ({\r\n    error,\r\n    value,\r\n    defaultValue,\r\n    onValueChange,\r\n}: UseSelectFieldParams): UseSelectFieldReturn => {\r\n    const generatedId = useId()\r\n    const triggerId = `${generatedId}-trigger`\r\n    const helperId = `${generatedId}-helper`\r\n    const hasError = Boolean(error)\r\n\r\n    const [internalValue, setInternalValue] = useState<string | undefined>(\r\n        defaultValue ?? (value !== undefined ? String(value) : undefined),\r\n    )\r\n\r\n    const isControlled = value !== undefined\r\n    const selectedValue = isControlled ? String(value) : internalValue\r\n\r\n    const handleValueChange = useCallback(\r\n        (nextValue: string) => {\r\n            if (!isControlled) {\r\n                setInternalValue(nextValue)\r\n            }\r\n            onValueChange?.(nextValue)\r\n        },\r\n        [isControlled, onValueChange],\r\n    )\r\n\r\n    return {\r\n        triggerId,\r\n        helperId,\r\n        hasError,\r\n        selectedValue,\r\n        handleValueChange,\r\n    }\r\n}\r\n\r\nexport default useSelectField\r\n"],"names":["useSelectField","error","value","defaultValue","onValueChange","generatedId","useId","triggerId","helperId","hasError","internalValue","setInternalValue","useState","isControlled","selectedValue","handleValueChange","useCallback","nextValue"],"mappings":"sCAGMA,EAAiB,CAAC,CACpB,MAAAC,EACA,MAAAC,EACA,aAAAC,EACA,cAAAC,CACJ,IAAkD,CAC9C,MAAMC,EAAcC,EAAAA,MAAA,EACdC,EAAY,GAAGF,CAAW,WAC1BG,EAAW,GAAGH,CAAW,UACzBI,EAAW,EAAQR,EAEnB,CAACS,EAAeC,CAAgB,EAAIC,EAAAA,SACtCT,IAAiBD,IAAU,OAAY,OAAOA,CAAK,EAAI,OAAA,EAGrDW,EAAeX,IAAU,OACzBY,EAAgBD,EAAe,OAAOX,CAAK,EAAIQ,EAE/CK,EAAoBC,EAAAA,YACrBC,GAAsB,CACdJ,GACDF,EAAiBM,CAAS,EAE9Bb,IAAgBa,CAAS,CAC7B,EACA,CAACJ,EAAcT,CAAa,CAAA,EAGhC,MAAO,CACH,UAAAG,EACA,SAAAC,EACA,SAAAC,EACA,cAAAK,EACA,kBAAAC,CAAA,CAER"}

package/dist/components/forms/select/components/select-field/hooks/useSelectField.hook.d.ts

@@ -0,0 +1,3 @@
+import { UseSelectFieldParams, UseSelectFieldReturn } from '../types';
+declare const useSelectField: ({ error, value, defaultValue, onValueChange, }: UseSelectFieldParams) => UseSelectFieldReturn;
+export default useSelectField;

package/dist/components/forms/select/components/select-field/hooks/useSelectField.hook.js

@@ -0,0 +1,27 @@
+import { useId as h, useState as p, useCallback as S } from "react";
+const m = ({
+  error: s,
+  value: e,
+  defaultValue: d,
+  onValueChange: r
+}) => {
+  const o = h(), l = `${o}-trigger`, c = `${o}-helper`, i = !!s, [a, g] = p(
+    d ?? (e !== void 0 ? String(e) : void 0)
+  ), t = e !== void 0, u = t ? String(e) : a, I = S(
+    (n) => {
+      t || g(n), r?.(n);
+    },
+    [t, r]
+  );
+  return {
+    triggerId: l,
+    helperId: c,
+    hasError: i,
+    selectedValue: u,
+    handleValueChange: I
+  };
+};
+export {
+  m as default
+};
+//# sourceMappingURL=useSelectField.hook.js.map

package/dist/components/forms/select/components/select-field/hooks/useSelectField.hook.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSelectField.hook.js","sources":["../../../../../../../src/components/forms/select/components/select-field/hooks/useSelectField.hook.ts"],"sourcesContent":["import { useCallback, useId, useState } from 'react'\r\nimport type { UseSelectFieldParams, UseSelectFieldReturn } from '@components/forms/select/components/select-field/types'\r\n\r\nconst useSelectField = ({\r\n    error,\r\n    value,\r\n    defaultValue,\r\n    onValueChange,\r\n}: UseSelectFieldParams): UseSelectFieldReturn => {\r\n    const generatedId = useId()\r\n    const triggerId = `${generatedId}-trigger`\r\n    const helperId = `${generatedId}-helper`\r\n    const hasError = Boolean(error)\r\n\r\n    const [internalValue, setInternalValue] = useState<string | undefined>(\r\n        defaultValue ?? (value !== undefined ? String(value) : undefined),\r\n    )\r\n\r\n    const isControlled = value !== undefined\r\n    const selectedValue = isControlled ? String(value) : internalValue\r\n\r\n    const handleValueChange = useCallback(\r\n        (nextValue: string) => {\r\n            if (!isControlled) {\r\n                setInternalValue(nextValue)\r\n            }\r\n            onValueChange?.(nextValue)\r\n        },\r\n        [isControlled, onValueChange],\r\n    )\r\n\r\n    return {\r\n        triggerId,\r\n        helperId,\r\n        hasError,\r\n        selectedValue,\r\n        handleValueChange,\r\n    }\r\n}\r\n\r\nexport default useSelectField\r\n"],"names":["useSelectField","error","value","defaultValue","onValueChange","generatedId","useId","triggerId","helperId","hasError","internalValue","setInternalValue","useState","isControlled","selectedValue","handleValueChange","useCallback","nextValue"],"mappings":";AAGA,MAAMA,IAAiB,CAAC;AAAA,EACpB,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,cAAAC;AAAA,EACA,eAAAC;AACJ,MAAkD;AAC9C,QAAMC,IAAcC,EAAA,GACdC,IAAY,GAAGF,CAAW,YAC1BG,IAAW,GAAGH,CAAW,WACzBI,IAAW,EAAQR,GAEnB,CAACS,GAAeC,CAAgB,IAAIC;AAAA,IACtCT,MAAiBD,MAAU,SAAY,OAAOA,CAAK,IAAI;AAAA,EAAA,GAGrDW,IAAeX,MAAU,QACzBY,IAAgBD,IAAe,OAAOX,CAAK,IAAIQ,GAE/CK,IAAoBC;AAAA,IACtB,CAACC,MAAsB;AACnB,MAAKJ,KACDF,EAAiBM,CAAS,GAE9Bb,IAAgBa,CAAS;AAAA,IAC7B;AAAA,IACA,CAACJ,GAAcT,CAAa;AAAA,EAAA;AAGhC,SAAO;AAAA,IACH,WAAAG;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,eAAAK;AAAA,IACA,mBAAAC;AAAA,EAAA;AAER;"}

package/dist/components/forms/select/components/select-field/types/index.d.ts

@@ -0,0 +1,13 @@
+export type UseSelectFieldParams = {
+    error?: string;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+};
+export type UseSelectFieldReturn = {
+    triggerId: string;
+    helperId: string;
+    hasError: boolean;
+    selectedValue: string | undefined;
+    handleValueChange: (nextValue: string) => void;
+};

package/dist/components/forms/select/components/select-field/utils/flattenItems.utils.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=t=>t.flatMap(e=>e.type==="separator"?[]:e.type==="group"?e.options.map(({value:a,label:r})=>({value:a,label:r})):[{value:e.value,label:e.label}]);exports.flattenItems=l;
+//# sourceMappingURL=flattenItems.utils.cjs.map

package/dist/components/forms/select/components/select-field/utils/flattenItems.utils.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"flattenItems.utils.cjs","sources":["../../../../../../../src/components/forms/select/components/select-field/utils/flattenItems.utils.ts"],"sourcesContent":["import type { SelectOption } from '@components/forms/select/types/Select.props.ts'\r\n\r\n/** Flatten options into the `items` format expected by Base UI `Select.Root`. */\r\nexport const flattenItems = (options: SelectOption[]): Array<{ value: string; label: string }> => options.flatMap((option) => {\r\n    if (option.type === 'separator') {\r\n        return []\r\n    }\r\n    if (option.type === 'group') {\r\n        return option.options.map(({ value, label }) => ({ value, label }))\r\n    }\r\n    return [{ value: option.value, label: option.label }]\r\n})\r\n"],"names":["flattenItems","options","option","value","label"],"mappings":"gFAGO,MAAMA,EAAgBC,GAAqEA,EAAQ,QAASC,GAC3GA,EAAO,OAAS,YACT,CAAA,EAEPA,EAAO,OAAS,QACTA,EAAO,QAAQ,IAAI,CAAC,CAAE,MAAAC,EAAO,MAAAC,CAAA,KAAa,CAAE,MAAAD,EAAO,MAAAC,CAAA,EAAQ,EAE/D,CAAC,CAAE,MAAOF,EAAO,MAAO,MAAOA,EAAO,MAAO,CACvD"}

package/dist/components/forms/select/components/select-field/utils/flattenItems.utils.d.ts

@@ -0,0 +1,6 @@
+import { SelectOption } from '../../../types/Select.props.ts';
+/** Flatten options into the `items` format expected by Base UI `Select.Root`. */
+export declare const flattenItems: (options: SelectOption[]) => Array<{
+    value: string;
+    label: string;
+}>;

package/dist/components/forms/select/components/select-field/utils/flattenItems.utils.js

@@ -0,0 +1,5 @@
+const l = (a) => a.flatMap((e) => e.type === "separator" ? [] : e.type === "group" ? e.options.map(({ value: r, label: t }) => ({ value: r, label: t })) : [{ value: e.value, label: e.label }]);
+export {
+  l as flattenItems
+};
+//# sourceMappingURL=flattenItems.utils.js.map

package/dist/components/forms/select/components/select-field/utils/flattenItems.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flattenItems.utils.js","sources":["../../../../../../../src/components/forms/select/components/select-field/utils/flattenItems.utils.ts"],"sourcesContent":["import type { SelectOption } from '@components/forms/select/types/Select.props.ts'\r\n\r\n/** Flatten options into the `items` format expected by Base UI `Select.Root`. */\r\nexport const flattenItems = (options: SelectOption[]): Array<{ value: string; label: string }> => options.flatMap((option) => {\r\n    if (option.type === 'separator') {\r\n        return []\r\n    }\r\n    if (option.type === 'group') {\r\n        return option.options.map(({ value, label }) => ({ value, label }))\r\n    }\r\n    return [{ value: option.value, label: option.label }]\r\n})\r\n"],"names":["flattenItems","options","option","value","label"],"mappings":"AAGO,MAAMA,IAAe,CAACC,MAAqEA,EAAQ,QAAQ,CAACC,MAC3GA,EAAO,SAAS,cACT,CAAA,IAEPA,EAAO,SAAS,UACTA,EAAO,QAAQ,IAAI,CAAC,EAAE,OAAAC,GAAO,OAAAC,EAAA,OAAa,EAAE,OAAAD,GAAO,OAAAC,EAAA,EAAQ,IAE/D,CAAC,EAAE,OAAOF,EAAO,OAAO,OAAOA,EAAO,OAAO,CACvD;"}

package/dist/components/forms/select/components/select-group/SelectGroup.cjs

@@ -0,0 +1,2 @@
+"use strict";const r=require("react/jsx-runtime"),s=require("@base-ui/react/select"),c=require("react"),e=c.memo(t=>r.jsx(s.Select.Group,{...t}));e.displayName="Select.Group";module.exports=e;
+//# sourceMappingURL=SelectGroup.cjs.map

package/dist/components/forms/select/components/select-group/SelectGroup.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectGroup.cjs","sources":["../../../../../../src/components/forms/select/components/select-group/SelectGroup.tsx"],"sourcesContent":["import { Select as BaseSelect } from '@base-ui/react/select'\r\nimport { memo, type FC } from 'react'\r\n\r\n/**\r\n * Semantic group of items, optionally paired with `Select.Label`.\r\n */\r\nconst SelectGroup: FC<BaseSelect.Group.Props> = memo((props) => (\r\n    <BaseSelect.Group {...props} />\r\n))\r\n\r\nSelectGroup.displayName = 'Select.Group'\r\n\r\nexport default SelectGroup\r\n"],"names":["SelectGroup","memo","props","jsx","BaseSelect"],"mappings":"wGAMMA,EAA0CC,EAAAA,KAAMC,GAClDC,EAAAA,IAACC,EAAAA,OAAW,MAAX,CAAkB,GAAGF,EAAO,CAChC,EAEDF,EAAY,YAAc"}

package/dist/components/forms/select/components/select-group/SelectGroup.d.ts

@@ -0,0 +1,7 @@
+import { Select as BaseSelect } from '@base-ui/react/select';
+import { FC } from 'react';
+/**
+ * Semantic group of items, optionally paired with `Select.Label`.
+ */
+declare const SelectGroup: FC<BaseSelect.Group.Props>;
+export default SelectGroup;

package/dist/components/forms/select/components/select-group/SelectGroup.js

@@ -0,0 +1,9 @@
+import { jsx as e } from "react/jsx-runtime";
+import { Select as r } from "@base-ui/react/select";
+import { memo as m } from "react";
+const t = m((o) => /* @__PURE__ */ e(r.Group, { ...o }));
+t.displayName = "Select.Group";
+export {
+  t as default
+};
+//# sourceMappingURL=SelectGroup.js.map

package/dist/components/forms/select/components/select-group/SelectGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectGroup.js","sources":["../../../../../../src/components/forms/select/components/select-group/SelectGroup.tsx"],"sourcesContent":["import { Select as BaseSelect } from '@base-ui/react/select'\r\nimport { memo, type FC } from 'react'\r\n\r\n/**\r\n * Semantic group of items, optionally paired with `Select.Label`.\r\n */\r\nconst SelectGroup: FC<BaseSelect.Group.Props> = memo((props) => (\r\n    <BaseSelect.Group {...props} />\r\n))\r\n\r\nSelectGroup.displayName = 'Select.Group'\r\n\r\nexport default SelectGroup\r\n"],"names":["SelectGroup","memo","props","jsx","BaseSelect"],"mappings":";;;AAMA,MAAMA,IAA0CC,EAAK,CAACC,MAClD,gBAAAC,EAACC,EAAW,OAAX,EAAkB,GAAGF,GAAO,CAChC;AAEDF,EAAY,cAAc;"}

package/dist/components/forms/select/components/select-item/SelectItem.cjs

@@ -0,0 +1,2 @@
+"use strict";const e=require("react/jsx-runtime"),c=require("@base-ui/react/select"),l=require("react"),m=require("../../../../foundation/icon/Icon.cjs");require("../../../../foundation/icon/styles/Icon.css.cjs");const S=require("../../../../../constants/icons.cjs"),I=require("../../../../../utils/cn.cjs"),s=require("./styles/SelectItem.css.cjs"),t=l.memo(({className:r,label:i,children:n,...o})=>e.jsxs(c.Select.Item,{className:I.cn(s.SELECT_ITEM_STYLES.root,r),...o,children:[e.jsx("span",{className:s.SELECT_ITEM_STYLES.indicator,children:e.jsx(c.Select.ItemIndicator,{children:e.jsx(m,{icon:S.IconRegistry.check,size:"xs"})})}),e.jsx(c.Select.ItemText,{children:i??n})]}));t.displayName="Select.Item";module.exports=t;
+//# sourceMappingURL=SelectItem.cjs.map

package/dist/components/forms/select/components/select-item/SelectItem.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectItem.cjs","sources":["../../../../../../src/components/forms/select/components/select-item/SelectItem.tsx"],"sourcesContent":["import { Select as BaseSelect } from '@base-ui/react/select'\r\nimport { memo, type FC } from 'react'\r\n\r\nimport { Icon } from '@components/foundation/icon'\r\nimport { IconRegistry } from '@constants/icons'\r\nimport { cn } from '@utils/cn.ts'\r\nimport { SELECT_ITEM_STYLES } from '@components/forms/select/components/select-item/styles/SelectItem.css.ts'\r\nimport type { SelectItemProps } from '@components/forms/select/components/select-item/types/SelectItem.props.ts'\r\n\r\n/**\r\n  * A single selectable option inside the listbox.\r\n  */\r\nconst SelectItem: FC<SelectItemProps> = memo(({\r\n    className,\r\n    label,\r\n    children,\r\n    ...props\r\n}) => (\r\n    <BaseSelect.Item\r\n        className={cn(SELECT_ITEM_STYLES.root, className)}\r\n        {...props}\r\n    >\r\n        <span className={SELECT_ITEM_STYLES.indicator}>\r\n            <BaseSelect.ItemIndicator>\r\n                <Icon\r\n                    icon={IconRegistry.check}\r\n                    size={'xs'}\r\n                />\r\n            </BaseSelect.ItemIndicator>\r\n        </span>\r\n        <BaseSelect.ItemText>{label ?? children}</BaseSelect.ItemText>\r\n    </BaseSelect.Item>\r\n))\r\n\r\nSelectItem.displayName = 'Select.Item'\r\n\r\nexport default SelectItem\r\n"],"names":["SelectItem","memo","className","label","children","props","jsxs","BaseSelect","cn","SELECT_ITEM_STYLES","jsx","Icon","IconRegistry"],"mappings":"6VAYMA,EAAkCC,EAAAA,KAAK,CAAC,CAC1C,UAAAC,EACA,MAAAC,EACA,SAAAC,EACA,GAAGC,CACP,IACIC,EAAAA,KAACC,EAAAA,OAAW,KAAX,CACG,UAAWC,EAAAA,GAAGC,qBAAmB,KAAMP,CAAS,EAC/C,GAAGG,EAEJ,SAAA,CAAAK,EAAAA,IAAC,QAAK,UAAWD,EAAAA,mBAAmB,UAChC,SAAAC,EAAAA,IAACH,EAAAA,OAAW,cAAX,CACG,SAAAG,EAAAA,IAACC,EAAA,CACG,KAAMC,EAAAA,aAAa,MACnB,KAAM,IAAA,CAAA,EAEd,CAAA,CACJ,EACAF,EAAAA,IAACH,EAAAA,OAAW,SAAX,CAAqB,YAASH,CAAA,CAAS,CAAA,CAAA,CAC5C,CACH,EAEDJ,EAAW,YAAc"}

package/dist/components/forms/select/components/select-item/SelectItem.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+import { SelectItemProps } from './types/SelectItem.props.ts';
+/**
+  * A single selectable option inside the listbox.
+  */
+declare const SelectItem: FC<SelectItemProps>;
+export default SelectItem;

package/dist/components/forms/select/components/select-item/SelectItem.js

@@ -0,0 +1,35 @@
+import { jsxs as s, jsx as e } from "react/jsx-runtime";
+import { Select as m } from "@base-ui/react/select";
+import { memo as n } from "react";
+import a from "../../../../foundation/icon/Icon.js";
+import "../../../../foundation/icon/styles/Icon.css.js";
+import { IconRegistry as l } from "../../../../../constants/icons.js";
+import { cn as p } from "../../../../../utils/cn.js";
+import { SELECT_ITEM_STYLES as o } from "./styles/SelectItem.css.js";
+const I = n(({
+  className: r,
+  label: t,
+  children: i,
+  ...c
+}) => /* @__PURE__ */ s(
+  m.Item,
+  {
+    className: p(o.root, r),
+    ...c,
+    children: [
+      /* @__PURE__ */ e("span", { className: o.indicator, children: /* @__PURE__ */ e(m.ItemIndicator, { children: /* @__PURE__ */ e(
+        a,
+        {
+          icon: l.check,
+          size: "xs"
+        }
+      ) }) }),
+      /* @__PURE__ */ e(m.ItemText, { children: t ?? i })
+    ]
+  }
+));
+I.displayName = "Select.Item";
+export {
+  I as default
+};
+//# sourceMappingURL=SelectItem.js.map

package/dist/components/forms/select/components/select-item/SelectItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectItem.js","sources":["../../../../../../src/components/forms/select/components/select-item/SelectItem.tsx"],"sourcesContent":["import { Select as BaseSelect } from '@base-ui/react/select'\r\nimport { memo, type FC } from 'react'\r\n\r\nimport { Icon } from '@components/foundation/icon'\r\nimport { IconRegistry } from '@constants/icons'\r\nimport { cn } from '@utils/cn.ts'\r\nimport { SELECT_ITEM_STYLES } from '@components/forms/select/components/select-item/styles/SelectItem.css.ts'\r\nimport type { SelectItemProps } from '@components/forms/select/components/select-item/types/SelectItem.props.ts'\r\n\r\n/**\r\n  * A single selectable option inside the listbox.\r\n  */\r\nconst SelectItem: FC<SelectItemProps> = memo(({\r\n    className,\r\n    label,\r\n    children,\r\n    ...props\r\n}) => (\r\n    <BaseSelect.Item\r\n        className={cn(SELECT_ITEM_STYLES.root, className)}\r\n        {...props}\r\n    >\r\n        <span className={SELECT_ITEM_STYLES.indicator}>\r\n            <BaseSelect.ItemIndicator>\r\n                <Icon\r\n                    icon={IconRegistry.check}\r\n                    size={'xs'}\r\n                />\r\n            </BaseSelect.ItemIndicator>\r\n        </span>\r\n        <BaseSelect.ItemText>{label ?? children}</BaseSelect.ItemText>\r\n    </BaseSelect.Item>\r\n))\r\n\r\nSelectItem.displayName = 'Select.Item'\r\n\r\nexport default SelectItem\r\n"],"names":["SelectItem","memo","className","label","children","props","jsxs","BaseSelect","cn","SELECT_ITEM_STYLES","jsx","Icon","IconRegistry"],"mappings":";;;;;;;;AAYA,MAAMA,IAAkCC,EAAK,CAAC;AAAA,EAC1C,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACP,MACI,gBAAAC;AAAA,EAACC,EAAW;AAAA,EAAX;AAAA,IACG,WAAWC,EAAGC,EAAmB,MAAMP,CAAS;AAAA,IAC/C,GAAGG;AAAA,IAEJ,UAAA;AAAA,MAAA,gBAAAK,EAAC,UAAK,WAAWD,EAAmB,WAChC,UAAA,gBAAAC,EAACH,EAAW,eAAX,EACG,UAAA,gBAAAG;AAAA,QAACC;AAAA,QAAA;AAAA,UACG,MAAMC,EAAa;AAAA,UACnB,MAAM;AAAA,QAAA;AAAA,MAAA,GAEd,EAAA,CACJ;AAAA,MACA,gBAAAF,EAACH,EAAW,UAAX,EAAqB,eAASH,EAAA,CAAS;AAAA,IAAA;AAAA,EAAA;AAC5C,CACH;AAEDJ,EAAW,cAAc;"}

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});;/* 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.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectItem.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/forms/select/components/select-item/styles/SelectItem.css.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Individual selectable option — visually identical to DropdownMenuItem.
+ */
+export declare const SELECT_ITEM_STYLES: {
+    root: string;
+    /**
+     * Fixed-width slot reserved for the checkmark.
+     * Keeps item text aligned whether or not an item is selected.
+     */
+    indicator: string;
+};

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

@@ -0,0 +1,7 @@
+/* empty css                                                  */
+/* empty css                              */
+var r = { root: "_64wk5i0", indicator: "_64wk5i1" };
+export {
+  r as SELECT_ITEM_STYLES
+};
+//# sourceMappingURL=SelectItem.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectItem.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/components/forms/select/components/select-item/types/SelectItem.props.d.ts

@@ -0,0 +1,6 @@
+import { Select as BaseSelect } from '@base-ui/react/select';
+/** Props for a styled select item. */
+export type SelectItemProps = BaseSelect.Item.Props & {
+    /** Visible label for the item. */
+    label?: string;
+};