@fuf-stack/uniform 1.14.0 → 1.16.0

package/dist/{RadioTabs-rDuug93J.cjs.map → RadioTabs-CgB0MmbK.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"RadioTabs-rDuug93J.cjs","names":["useUniformField","createOptionValueConverter","VisuallyHidden","HeroRadioGroup","Tabs","RadioTabs"],"sources":["../src/RadioTabs/RadioTabs.tsx","../src/RadioTabs/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { TabsProps } from '@fuf-stack/pixels';\nimport type { TabProps } from '@fuf-stack/pixels/Tabs';\nimport type { ReactElement, ReactNode } from 'react';\n\nimport { useRef } from 'react';\n\nimport { RadioGroup as HeroRadioGroup } from '@heroui/radio';\nimport { VisuallyHidden } from '@react-aria/visually-hidden';\n\nimport { slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\nimport Tabs from '@fuf-stack/pixels/Tabs';\n\nimport { createOptionValueConverter } from '../helpers';\nimport { useUniformField } from '../hooks/useUniformField';\n\nexport const radioTabsVariants = tv({\n  slots: {\n    base: 'group gap-0', // Needs group for group-data condition\n    cursor: '',\n    label:\n      'mb-2 inline-flex text-sm text-foreground subpixel-antialiased group-data-[invalid=true]:text-danger',\n    tab: '',\n    tabBase: '',\n    tabContent: '',\n    tabList: '',\n    tabPanel: 'p-3',\n    tabWrapper: '',\n    wrapper: '',\n  },\n  variants: {\n    hasContent: {\n      true: {\n        base: '',\n        tabBase: 'p-1',\n        tabWrapper: [\n          // border style\n          'rounded-medium border border-divider',\n          // full width\n          'w-full',\n        ],\n      },\n    },\n    fullWidth: {\n      true: {\n        tabWrapper: 'w-full',\n      },\n    },\n    isInvalid: {\n      true: {\n        tabWrapper: 'rounded-medium border-2 !border-danger',\n      },\n    },\n  },\n});\n\ntype VariantProps = TVProps<typeof radioTabsVariants>;\ntype ClassName = TVClassName<typeof radioTabsVariants>;\n\nexport interface RadioTabsOption {\n  /** Optional content inside of the tab */\n  content?: ReactNode;\n  /** disables the option */\n  disabled?: boolean;\n  /** option label */\n  label?: ReactNode;\n  /** option icon */\n  icon?: ReactNode;\n  /** HTML data-testid attribute of the option */\n  testId?: string;\n  /** option value */\n  value: string | number | boolean;\n}\n\nexport interface RadioTabsProps extends Omit<VariantProps, 'hasContent'> {\n  /** Custom aria-label for accessibility. If not provided, falls back to field name when no visible label exists */\n  ariaLabel?: string;\n  /** CSS class name */\n  className?: ClassName;\n  /** Determines if the Buttons are disabled or not. */\n  disabled?: boolean;\n  /** Whether tabs should take up full container width */\n  fullWidth?: boolean;\n  /** determines orientation of the Buttons. */\n  inline?: boolean;\n  /** Label displayed next to the RadioButton. */\n  label?: ReactNode;\n  /** Name the RadioButtons are registered at in HTML forms (react-hook-form). */\n  name: string;\n  /** Radio button configuration. */\n  options: RadioTabsOption[];\n  /** Id to grab element in internal tests. */\n  testId?: string;\n  /** How the RadioTabs should look like. */\n  variant?: TabsProps['variant'];\n}\n\n/**\n * RadioTabs component based on [HeroUI RadioGroup](https://www.heroui.com//docs/components/radio-group)\n * and [HeroUI Tabs](https://www.heroui.com//docs/components/tabs)\n */\nconst RadioTabs = ({\n  className = undefined,\n  fullWidth = false,\n  inline = false,\n  name,\n  options,\n  variant = undefined,\n  ...uniformFieldProps\n}: RadioTabsProps): ReactElement => {\n  const {\n    ariaLabel,\n    disabled,\n    errorMessage,\n    field: { onBlur, onChange, ref, value },\n    invalid,\n    label,\n    required,\n    testId,\n  } = useUniformField({\n    name,\n    ...uniformFieldProps,\n  });\n\n  // Create a ref for the visual radio group to forward focus\n  const visualRadioGroupRef = useRef<HTMLDivElement>(null);\n\n  // Create converter to preserve number types for option values\n  const { convertToOriginalType } = createOptionValueConverter(options);\n\n  const tabOptions = options.map<TabProps>((option) => {\n    return {\n      content: option?.content,\n      disabled: option?.disabled,\n      // Tabs component uses string keys internally\n      key: String(option.value),\n      label: option?.label ?? option?.value,\n      testId: slugify(`option_${option?.testId ?? option?.value}`, {\n        replaceDots: true,\n      }),\n    };\n  });\n\n  const disabledAllKeys: string[] | undefined = tabOptions?.map((option) => {\n    return option.key as string;\n  });\n\n  // check if any option has content\n  // eslint-disable-next-line @typescript-eslint/no-misused-promises, @typescript-eslint/promise-function-async\n  const hasContent = options.some((option) => {\n    return option.content;\n  });\n\n  // classNames from slots\n  const variants = radioTabsVariants({\n    fullWidth,\n    hasContent,\n    isInvalid: invalid,\n  });\n  const classNames = variantsToClassNames(variants, className, 'base');\n\n  return (\n    <>\n      {/* Visually hidden input for React Hook Form focus management */}\n      <VisuallyHidden>\n        <input\n          ref={ref}\n          aria-label={ariaLabel}\n          name={name}\n          onBlur={onBlur}\n          value={value ?? ''}\n          onChange={(e) => {\n            onChange(convertToOriginalType(e.target.value));\n          }}\n          onFocus={() => {\n            // Forward focus to the first tab when RHF focuses this input\n            const firstTab = visualRadioGroupRef.current?.querySelector(\n              '[role=\"tab\"]',\n            ) as HTMLElement;\n            firstTab?.focus();\n          }}\n        />\n      </VisuallyHidden>\n\n      <HeroRadioGroup\n        ref={visualRadioGroupRef}\n        aria-label={ariaLabel}\n        // see HeroUI styles for group-data condition (data-invalid),\n        // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/components/select/src/use-select.ts\n        data-invalid={invalid}\n        data-required={required}\n        data-testid={testId}\n        errorMessage={errorMessage}\n        isDisabled={disabled}\n        isInvalid={invalid}\n        isRequired={required}\n        label={label ? <legend>{label}</legend> : null}\n        name={`${name}_radiotabs`}\n        orientation={inline ? 'horizontal' : 'vertical'}\n        classNames={{\n          base: classNames.base,\n          label: classNames.label,\n          wrapper: classNames.wrapper,\n        }}\n      >\n        <Tabs\n          disabledKeys={disabled ? disabledAllKeys : undefined}\n          // make sure component is controlled (convert to string for Tabs)\n          selectedKey={value != null ? String(value) : ''}\n          tabs={tabOptions}\n          testId={testId}\n          variant={variant}\n          className={{\n            base: classNames.tabBase,\n            cursor: classNames.cursor,\n            panel: classNames.tabPanel,\n            tab: classNames.tab,\n            tabContent: classNames.tabContent,\n            tabList: classNames.tabList,\n            tabWrapper: classNames.tabWrapper,\n          }}\n          onSelectionChange={(key) => {\n            if (key != null) {\n              onChange(convertToOriginalType(key));\n            }\n          }}\n        />\n      </HeroRadioGroup>\n    </>\n  );\n};\n\nexport default RadioTabs;\n","import RadioTabs from './RadioTabs';\n\nexport type { RadioTabsProps } from './RadioTabs';\n\nexport { RadioTabs };\n\nexport default RadioTabs;\n"],"mappings":";;;;;;;;;;;;AAgBA,MAAa,mDAAuB;CAClC,OAAO;EACL,MAAM;EACN,QAAQ;EACR,OACE;EACF,KAAK;EACL,SAAS;EACT,YAAY;EACZ,SAAS;EACT,UAAU;EACV,YAAY;EACZ,SAAS;EACV;CACD,UAAU;EACR,YAAY,EACV,MAAM;GACJ,MAAM;GACN,SAAS;GACT,YAAY,CAEV,wCAEA,SACD;GACF,EACF;EACD,WAAW,EACT,MAAM,EACJ,YAAY,UACb,EACF;EACD,WAAW,EACT,MAAM,EACJ,YAAY,0CACb,EACF;EACF;CACF,CAAC;;;;;AA+CF,MAAM,aAAa,EACjB,YAAY,QACZ,YAAY,OACZ,SAAS,OACT,MACA,SACA,UAAU,QACV,GAAG,wBAC+B;CAClC,MAAM,EACJ,WACA,UACA,cACA,OAAO,EAAE,QAAQ,UAAU,KAAK,SAChC,SACA,OACA,UACA,WACEA,wCAAgB;EAClB;EACA,GAAG;EACJ,CAAC;CAGF,MAAM,wCAA6C,KAAK;CAGxD,MAAM,EAAE,0BAA0BC,2CAA2B,QAAQ;CAErE,MAAM,aAAa,QAAQ,KAAe,WAAW;AACnD,SAAO;GACL,SAAS,QAAQ;GACjB,UAAU,QAAQ;GAElB,KAAK,OAAO,OAAO,MAAM;GACzB,OAAO,QAAQ,SAAS,QAAQ;GAChC,4CAAgB,UAAU,QAAQ,UAAU,QAAQ,SAAS,EAC3D,aAAa,MACd,CAAC;GACH;GACD;CAEF,MAAM,kBAAwC,YAAY,KAAK,WAAW;AACxE,SAAO,OAAO;GACd;CAcF,MAAM,8DALW,kBAAkB;EACjC;EACA,YAPiB,QAAQ,MAAM,WAAW;AAC1C,UAAO,OAAO;IACd;EAMA,WAAW;EACZ,CAAC,EACgD,WAAW,OAAO;AAEpE,QACE,qFAEE,2CAACC,wDACC,2CAAC;EACM;EACL,cAAY;EACN;EACE;EACR,OAAO,SAAS;EAChB,WAAW,MAAM;AACf,YAAS,sBAAsB,EAAE,OAAO,MAAM,CAAC;;EAEjD,eAAe;AAKb,IAHiB,oBAAoB,SAAS,cAC5C,iBACD,GACS,OAAO;;GAEnB,GACa,EAEjB,2CAACC;EACC,KAAK;EACL,cAAY;EAGZ,gBAAc;EACd,iBAAe;EACf,eAAa;EACC;EACd,YAAY;EACZ,WAAW;EACX,YAAY;EACZ,OAAO,QAAQ,2CAAC,sBAAQ,QAAe,GAAG;EAC1C,MAAM,GAAG,KAAK;EACd,aAAa,SAAS,eAAe;EACrC,YAAY;GACV,MAAM,WAAW;GACjB,OAAO,WAAW;GAClB,SAAS,WAAW;GACrB;YAED,2CAACC;GACC,cAAc,WAAW,kBAAkB;GAE3C,aAAa,SAAS,OAAO,OAAO,MAAM,GAAG;GAC7C,MAAM;GACE;GACC;GACT,WAAW;IACT,MAAM,WAAW;IACjB,QAAQ,WAAW;IACnB,OAAO,WAAW;IAClB,KAAK,WAAW;IAChB,YAAY,WAAW;IACvB,SAAS,WAAW;IACpB,YAAY,WAAW;IACxB;GACD,oBAAoB,QAAQ;AAC1B,QAAI,OAAO,KACT,UAAS,sBAAsB,IAAI,CAAC;;IAGxC;GACa,IAChB;;AAIP,0BAAe;;;;AClOf,wBAAeC"}
+{"version":3,"file":"RadioTabs-CgB0MmbK.cjs","names":["useUniformField","createOptionValueConverter","VisuallyHidden","HeroRadioGroup","Tabs","RadioTabs"],"sources":["../src/RadioTabs/RadioTabs.tsx","../src/RadioTabs/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { TabsProps } from '@fuf-stack/pixels';\nimport type { TabProps } from '@fuf-stack/pixels/Tabs';\nimport type { ReactElement, ReactNode } from 'react';\n\nimport { useRef } from 'react';\n\nimport { RadioGroup as HeroRadioGroup } from '@heroui/radio';\nimport { VisuallyHidden } from '@react-aria/visually-hidden';\n\nimport { slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\nimport Tabs from '@fuf-stack/pixels/Tabs';\n\nimport { createOptionValueConverter } from '../helpers';\nimport { useUniformField } from '../hooks/useUniformField';\n\nexport const radioTabsVariants = tv({\n  slots: {\n    base: 'group gap-0', // Needs group for group-data condition\n    cursor: '',\n    label:\n      'mb-2 inline-flex text-sm text-foreground subpixel-antialiased group-data-[invalid=true]:text-danger',\n    tab: '',\n    tabBase: '',\n    tabContent: '',\n    tabList: '',\n    tabPanel: 'p-3',\n    tabWrapper: '',\n    wrapper: '',\n  },\n  variants: {\n    hasContent: {\n      true: {\n        base: '',\n        tabBase: 'p-1',\n        tabWrapper: [\n          // border style\n          'rounded-medium border border-divider',\n          // full width\n          'w-full',\n        ],\n      },\n    },\n    fullWidth: {\n      true: {\n        tabWrapper: 'w-full',\n      },\n    },\n    isInvalid: {\n      true: {\n        tabWrapper: 'rounded-medium border-2 !border-danger',\n      },\n    },\n  },\n});\n\ntype VariantProps = TVProps<typeof radioTabsVariants>;\ntype ClassName = TVClassName<typeof radioTabsVariants>;\n\nexport interface RadioTabsOption {\n  /** Optional content inside of the tab */\n  content?: ReactNode;\n  /** disables the option */\n  disabled?: boolean;\n  /** option label */\n  label?: ReactNode;\n  /** option icon */\n  icon?: ReactNode;\n  /** HTML data-testid attribute of the option */\n  testId?: string;\n  /** option value */\n  value: string | number | boolean;\n}\n\nexport interface RadioTabsProps extends Omit<VariantProps, 'hasContent'> {\n  /** Custom aria-label for accessibility. If not provided, falls back to field name when no visible label exists */\n  ariaLabel?: string;\n  /** CSS class name */\n  className?: ClassName;\n  /** Determines if the Buttons are disabled or not. */\n  disabled?: boolean;\n  /** Whether tabs should take up full container width */\n  fullWidth?: boolean;\n  /** determines orientation of the Buttons. */\n  inline?: boolean;\n  /** Label displayed next to the RadioButton. */\n  label?: ReactNode;\n  /** Name the RadioButtons are registered at in HTML forms (react-hook-form). */\n  name: string;\n  /** Radio button configuration. */\n  options: RadioTabsOption[];\n  /** Id to grab element in internal tests. */\n  testId?: string;\n  /** How the RadioTabs should look like. */\n  variant?: TabsProps['variant'];\n}\n\n/**\n * RadioTabs component based on [HeroUI RadioGroup](https://www.heroui.com//docs/components/radio-group)\n * and [HeroUI Tabs](https://www.heroui.com//docs/components/tabs)\n */\nconst RadioTabs = ({\n  className = undefined,\n  fullWidth = false,\n  inline = false,\n  name,\n  options,\n  variant = undefined,\n  ...uniformFieldProps\n}: RadioTabsProps): ReactElement => {\n  const {\n    ariaLabel,\n    disabled,\n    errorMessage,\n    field: { onBlur, onChange, ref, value },\n    invalid,\n    label,\n    required,\n    testId,\n  } = useUniformField({\n    name,\n    ...uniformFieldProps,\n  });\n\n  // Create a ref for the visual radio group to forward focus\n  const visualRadioGroupRef = useRef<HTMLDivElement>(null);\n\n  // Create converter to preserve number types for option values\n  const { convertToOriginalType } = createOptionValueConverter(options);\n\n  const tabOptions = options.map<TabProps>((option) => {\n    return {\n      content: option?.content,\n      disabled: option?.disabled,\n      // Tabs component uses string keys internally\n      key: String(option.value),\n      label: option?.label ?? option?.value,\n      testId: slugify(`option_${option?.testId ?? option?.value}`, {\n        replaceDots: true,\n      }),\n    };\n  });\n\n  const disabledAllKeys: string[] | undefined = tabOptions?.map((option) => {\n    return option.key as string;\n  });\n\n  // check if any option has content\n  // eslint-disable-next-line @typescript-eslint/no-misused-promises, @typescript-eslint/promise-function-async\n  const hasContent = options.some((option) => {\n    return option.content;\n  });\n\n  // classNames from slots\n  const variants = radioTabsVariants({\n    fullWidth,\n    hasContent,\n    isInvalid: invalid,\n  });\n  const classNames = variantsToClassNames(variants, className, 'base');\n\n  return (\n    <>\n      {/* Visually hidden input for React Hook Form focus management */}\n      <VisuallyHidden>\n        <input\n          ref={ref}\n          aria-label={ariaLabel}\n          name={name}\n          onBlur={onBlur}\n          value={value ?? ''}\n          onChange={(e) => {\n            onChange(convertToOriginalType(e.target.value));\n          }}\n          onFocus={() => {\n            // Forward focus to the first tab when RHF focuses this input\n            const firstTab = visualRadioGroupRef.current?.querySelector(\n              '[role=\"tab\"]',\n            ) as HTMLElement;\n            firstTab?.focus();\n          }}\n        />\n      </VisuallyHidden>\n\n      <HeroRadioGroup\n        ref={visualRadioGroupRef}\n        aria-label={ariaLabel}\n        // see HeroUI styles for group-data condition (data-invalid),\n        // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/components/select/src/use-select.ts\n        data-invalid={invalid}\n        data-required={required}\n        data-testid={testId}\n        errorMessage={errorMessage}\n        isDisabled={disabled}\n        isInvalid={invalid}\n        isRequired={required}\n        label={label ? <legend>{label}</legend> : null}\n        name={`${name}_radiotabs`}\n        orientation={inline ? 'horizontal' : 'vertical'}\n        classNames={{\n          base: classNames.base,\n          label: classNames.label,\n          wrapper: classNames.wrapper,\n        }}\n      >\n        <Tabs\n          disabledKeys={disabled ? disabledAllKeys : undefined}\n          // make sure component is controlled (convert to string for Tabs)\n          selectedKey={value != null ? String(value) : ''}\n          tabs={tabOptions}\n          testId={testId}\n          variant={variant}\n          className={{\n            base: classNames.tabBase,\n            cursor: classNames.cursor,\n            panel: classNames.tabPanel,\n            tab: classNames.tab,\n            tabContent: classNames.tabContent,\n            tabList: classNames.tabList,\n            tabWrapper: classNames.tabWrapper,\n          }}\n          onSelectionChange={(key) => {\n            if (key != null) {\n              onChange(convertToOriginalType(key));\n            }\n          }}\n        />\n      </HeroRadioGroup>\n    </>\n  );\n};\n\nexport default RadioTabs;\n","import RadioTabs from './RadioTabs';\n\nexport type { RadioTabsProps } from './RadioTabs';\n\nexport { RadioTabs };\n\nexport default RadioTabs;\n"],"mappings":";;;;;;;;;;;;AAgBA,MAAa,mDAAuB;CAClC,OAAO;EACL,MAAM;EACN,QAAQ;EACR,OACE;EACF,KAAK;EACL,SAAS;EACT,YAAY;EACZ,SAAS;EACT,UAAU;EACV,YAAY;EACZ,SAAS;EACV;CACD,UAAU;EACR,YAAY,EACV,MAAM;GACJ,MAAM;GACN,SAAS;GACT,YAAY,CAEV,wCAEA,SACD;GACF,EACF;EACD,WAAW,EACT,MAAM,EACJ,YAAY,UACb,EACF;EACD,WAAW,EACT,MAAM,EACJ,YAAY,0CACb,EACF;EACF;CACF,CAAC;;;;;AA+CF,MAAM,aAAa,EACjB,YAAY,QACZ,YAAY,OACZ,SAAS,OACT,MACA,SACA,UAAU,QACV,GAAG,wBAC+B;CAClC,MAAM,EACJ,WACA,UACA,cACA,OAAO,EAAE,QAAQ,UAAU,KAAK,SAChC,SACA,OACA,UACA,WACEA,wCAAgB;EAClB;EACA,GAAG;EACJ,CAAC;CAGF,MAAM,wCAA6C,KAAK;CAGxD,MAAM,EAAE,0BAA0BC,2CAA2B,QAAQ;CAErE,MAAM,aAAa,QAAQ,KAAe,WAAW;AACnD,SAAO;GACL,SAAS,QAAQ;GACjB,UAAU,QAAQ;GAElB,KAAK,OAAO,OAAO,MAAM;GACzB,OAAO,QAAQ,SAAS,QAAQ;GAChC,4CAAgB,UAAU,QAAQ,UAAU,QAAQ,SAAS,EAC3D,aAAa,MACd,CAAC;GACH;GACD;CAEF,MAAM,kBAAwC,YAAY,KAAK,WAAW;AACxE,SAAO,OAAO;GACd;CAcF,MAAM,8DALW,kBAAkB;EACjC;EACA,YAPiB,QAAQ,MAAM,WAAW;AAC1C,UAAO,OAAO;IACd;EAMA,WAAW;EACZ,CAAC,EACgD,WAAW,OAAO;AAEpE,QACE,qFAEE,2CAACC,wDACC,2CAAC;EACM;EACL,cAAY;EACN;EACE;EACR,OAAO,SAAS;EAChB,WAAW,MAAM;AACf,YAAS,sBAAsB,EAAE,OAAO,MAAM,CAAC;;EAEjD,eAAe;AAKb,IAHiB,oBAAoB,SAAS,cAC5C,iBACD,GACS,OAAO;;GAEnB,GACa,EAEjB,2CAACC;EACC,KAAK;EACL,cAAY;EAGZ,gBAAc;EACd,iBAAe;EACf,eAAa;EACC;EACd,YAAY;EACZ,WAAW;EACX,YAAY;EACZ,OAAO,QAAQ,2CAAC,sBAAQ,QAAe,GAAG;EAC1C,MAAM,GAAG,KAAK;EACd,aAAa,SAAS,eAAe;EACrC,YAAY;GACV,MAAM,WAAW;GACjB,OAAO,WAAW;GAClB,SAAS,WAAW;GACrB;YAED,2CAACC;GACC,cAAc,WAAW,kBAAkB;GAE3C,aAAa,SAAS,OAAO,OAAO,MAAM,GAAG;GAC7C,MAAM;GACE;GACC;GACT,WAAW;IACT,MAAM,WAAW;IACjB,QAAQ,WAAW;IACnB,OAAO,WAAW;IAClB,KAAK,WAAW;IAChB,YAAY,WAAW;IACvB,SAAS,WAAW;IACpB,YAAY,WAAW;IACxB;GACD,oBAAoB,QAAQ;AAC1B,QAAI,OAAO,KACT,UAAS,sBAAsB,IAAI,CAAC;;IAGxC;GACa,IAChB;;AAIP,0BAAe;;;;AClOf,wBAAeC"}

package/dist/{RadioTabs-C2FIAjx-.js → RadioTabs-eSB6OXD7.js}

@@ -1,5 +1,5 @@
 import { c as createOptionValueConverter } from "./helpers-D3A5d3M1.js";
-import { t as useUniformField } from "./useUniformField-Brwxoghf.js";
+import { t as useUniformField } from "./useUniformField-C6oSAFa3.js";
 import { slugify, tv, variantsToClassNames } from "@fuf-stack/pixel-utils";
 import { useRef } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -120,4 +120,4 @@ var RadioTabs_default = RadioTabs_default$1;
 
 //#endregion
 export { RadioTabs_default$1 as n, RadioTabs_default as t };
-//# sourceMappingURL=RadioTabs-C2FIAjx-.js.map
+//# sourceMappingURL=RadioTabs-eSB6OXD7.js.map

package/dist/{RadioTabs-C2FIAjx-.js.map → RadioTabs-eSB6OXD7.js.map}

@@ -1 +1 @@
-{"version":3,"file":"RadioTabs-C2FIAjx-.js","names":["HeroRadioGroup","RadioTabs"],"sources":["../src/RadioTabs/RadioTabs.tsx","../src/RadioTabs/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { TabsProps } from '@fuf-stack/pixels';\nimport type { TabProps } from '@fuf-stack/pixels/Tabs';\nimport type { ReactElement, ReactNode } from 'react';\n\nimport { useRef } from 'react';\n\nimport { RadioGroup as HeroRadioGroup } from '@heroui/radio';\nimport { VisuallyHidden } from '@react-aria/visually-hidden';\n\nimport { slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\nimport Tabs from '@fuf-stack/pixels/Tabs';\n\nimport { createOptionValueConverter } from '../helpers';\nimport { useUniformField } from '../hooks/useUniformField';\n\nexport const radioTabsVariants = tv({\n  slots: {\n    base: 'group gap-0', // Needs group for group-data condition\n    cursor: '',\n    label:\n      'mb-2 inline-flex text-sm text-foreground subpixel-antialiased group-data-[invalid=true]:text-danger',\n    tab: '',\n    tabBase: '',\n    tabContent: '',\n    tabList: '',\n    tabPanel: 'p-3',\n    tabWrapper: '',\n    wrapper: '',\n  },\n  variants: {\n    hasContent: {\n      true: {\n        base: '',\n        tabBase: 'p-1',\n        tabWrapper: [\n          // border style\n          'rounded-medium border border-divider',\n          // full width\n          'w-full',\n        ],\n      },\n    },\n    fullWidth: {\n      true: {\n        tabWrapper: 'w-full',\n      },\n    },\n    isInvalid: {\n      true: {\n        tabWrapper: 'rounded-medium border-2 !border-danger',\n      },\n    },\n  },\n});\n\ntype VariantProps = TVProps<typeof radioTabsVariants>;\ntype ClassName = TVClassName<typeof radioTabsVariants>;\n\nexport interface RadioTabsOption {\n  /** Optional content inside of the tab */\n  content?: ReactNode;\n  /** disables the option */\n  disabled?: boolean;\n  /** option label */\n  label?: ReactNode;\n  /** option icon */\n  icon?: ReactNode;\n  /** HTML data-testid attribute of the option */\n  testId?: string;\n  /** option value */\n  value: string | number | boolean;\n}\n\nexport interface RadioTabsProps extends Omit<VariantProps, 'hasContent'> {\n  /** Custom aria-label for accessibility. If not provided, falls back to field name when no visible label exists */\n  ariaLabel?: string;\n  /** CSS class name */\n  className?: ClassName;\n  /** Determines if the Buttons are disabled or not. */\n  disabled?: boolean;\n  /** Whether tabs should take up full container width */\n  fullWidth?: boolean;\n  /** determines orientation of the Buttons. */\n  inline?: boolean;\n  /** Label displayed next to the RadioButton. */\n  label?: ReactNode;\n  /** Name the RadioButtons are registered at in HTML forms (react-hook-form). */\n  name: string;\n  /** Radio button configuration. */\n  options: RadioTabsOption[];\n  /** Id to grab element in internal tests. */\n  testId?: string;\n  /** How the RadioTabs should look like. */\n  variant?: TabsProps['variant'];\n}\n\n/**\n * RadioTabs component based on [HeroUI RadioGroup](https://www.heroui.com//docs/components/radio-group)\n * and [HeroUI Tabs](https://www.heroui.com//docs/components/tabs)\n */\nconst RadioTabs = ({\n  className = undefined,\n  fullWidth = false,\n  inline = false,\n  name,\n  options,\n  variant = undefined,\n  ...uniformFieldProps\n}: RadioTabsProps): ReactElement => {\n  const {\n    ariaLabel,\n    disabled,\n    errorMessage,\n    field: { onBlur, onChange, ref, value },\n    invalid,\n    label,\n    required,\n    testId,\n  } = useUniformField({\n    name,\n    ...uniformFieldProps,\n  });\n\n  // Create a ref for the visual radio group to forward focus\n  const visualRadioGroupRef = useRef<HTMLDivElement>(null);\n\n  // Create converter to preserve number types for option values\n  const { convertToOriginalType } = createOptionValueConverter(options);\n\n  const tabOptions = options.map<TabProps>((option) => {\n    return {\n      content: option?.content,\n      disabled: option?.disabled,\n      // Tabs component uses string keys internally\n      key: String(option.value),\n      label: option?.label ?? option?.value,\n      testId: slugify(`option_${option?.testId ?? option?.value}`, {\n        replaceDots: true,\n      }),\n    };\n  });\n\n  const disabledAllKeys: string[] | undefined = tabOptions?.map((option) => {\n    return option.key as string;\n  });\n\n  // check if any option has content\n  // eslint-disable-next-line @typescript-eslint/no-misused-promises, @typescript-eslint/promise-function-async\n  const hasContent = options.some((option) => {\n    return option.content;\n  });\n\n  // classNames from slots\n  const variants = radioTabsVariants({\n    fullWidth,\n    hasContent,\n    isInvalid: invalid,\n  });\n  const classNames = variantsToClassNames(variants, className, 'base');\n\n  return (\n    <>\n      {/* Visually hidden input for React Hook Form focus management */}\n      <VisuallyHidden>\n        <input\n          ref={ref}\n          aria-label={ariaLabel}\n          name={name}\n          onBlur={onBlur}\n          value={value ?? ''}\n          onChange={(e) => {\n            onChange(convertToOriginalType(e.target.value));\n          }}\n          onFocus={() => {\n            // Forward focus to the first tab when RHF focuses this input\n            const firstTab = visualRadioGroupRef.current?.querySelector(\n              '[role=\"tab\"]',\n            ) as HTMLElement;\n            firstTab?.focus();\n          }}\n        />\n      </VisuallyHidden>\n\n      <HeroRadioGroup\n        ref={visualRadioGroupRef}\n        aria-label={ariaLabel}\n        // see HeroUI styles for group-data condition (data-invalid),\n        // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/components/select/src/use-select.ts\n        data-invalid={invalid}\n        data-required={required}\n        data-testid={testId}\n        errorMessage={errorMessage}\n        isDisabled={disabled}\n        isInvalid={invalid}\n        isRequired={required}\n        label={label ? <legend>{label}</legend> : null}\n        name={`${name}_radiotabs`}\n        orientation={inline ? 'horizontal' : 'vertical'}\n        classNames={{\n          base: classNames.base,\n          label: classNames.label,\n          wrapper: classNames.wrapper,\n        }}\n      >\n        <Tabs\n          disabledKeys={disabled ? disabledAllKeys : undefined}\n          // make sure component is controlled (convert to string for Tabs)\n          selectedKey={value != null ? String(value) : ''}\n          tabs={tabOptions}\n          testId={testId}\n          variant={variant}\n          className={{\n            base: classNames.tabBase,\n            cursor: classNames.cursor,\n            panel: classNames.tabPanel,\n            tab: classNames.tab,\n            tabContent: classNames.tabContent,\n            tabList: classNames.tabList,\n            tabWrapper: classNames.tabWrapper,\n          }}\n          onSelectionChange={(key) => {\n            if (key != null) {\n              onChange(convertToOriginalType(key));\n            }\n          }}\n        />\n      </HeroRadioGroup>\n    </>\n  );\n};\n\nexport default RadioTabs;\n","import RadioTabs from './RadioTabs';\n\nexport type { RadioTabsProps } from './RadioTabs';\n\nexport { RadioTabs };\n\nexport default RadioTabs;\n"],"mappings":";;;;;;;;;;AAgBA,MAAa,oBAAoB,GAAG;CAClC,OAAO;EACL,MAAM;EACN,QAAQ;EACR,OACE;EACF,KAAK;EACL,SAAS;EACT,YAAY;EACZ,SAAS;EACT,UAAU;EACV,YAAY;EACZ,SAAS;EACV;CACD,UAAU;EACR,YAAY,EACV,MAAM;GACJ,MAAM;GACN,SAAS;GACT,YAAY,CAEV,wCAEA,SACD;GACF,EACF;EACD,WAAW,EACT,MAAM,EACJ,YAAY,UACb,EACF;EACD,WAAW,EACT,MAAM,EACJ,YAAY,0CACb,EACF;EACF;CACF,CAAC;;;;;AA+CF,MAAM,aAAa,EACjB,YAAY,QACZ,YAAY,OACZ,SAAS,OACT,MACA,SACA,UAAU,QACV,GAAG,wBAC+B;CAClC,MAAM,EACJ,WACA,UACA,cACA,OAAO,EAAE,QAAQ,UAAU,KAAK,SAChC,SACA,OACA,UACA,WACE,gBAAgB;EAClB;EACA,GAAG;EACJ,CAAC;CAGF,MAAM,sBAAsB,OAAuB,KAAK;CAGxD,MAAM,EAAE,0BAA0B,2BAA2B,QAAQ;CAErE,MAAM,aAAa,QAAQ,KAAe,WAAW;AACnD,SAAO;GACL,SAAS,QAAQ;GACjB,UAAU,QAAQ;GAElB,KAAK,OAAO,OAAO,MAAM;GACzB,OAAO,QAAQ,SAAS,QAAQ;GAChC,QAAQ,QAAQ,UAAU,QAAQ,UAAU,QAAQ,SAAS,EAC3D,aAAa,MACd,CAAC;GACH;GACD;CAEF,MAAM,kBAAwC,YAAY,KAAK,WAAW;AACxE,SAAO,OAAO;GACd;CAcF,MAAM,aAAa,qBALF,kBAAkB;EACjC;EACA,YAPiB,QAAQ,MAAM,WAAW;AAC1C,UAAO,OAAO;IACd;EAMA,WAAW;EACZ,CAAC,EACgD,WAAW,OAAO;AAEpE,QACE,4CAEE,oBAAC,4BACC,oBAAC;EACM;EACL,cAAY;EACN;EACE;EACR,OAAO,SAAS;EAChB,WAAW,MAAM;AACf,YAAS,sBAAsB,EAAE,OAAO,MAAM,CAAC;;EAEjD,eAAe;AAKb,IAHiB,oBAAoB,SAAS,cAC5C,iBACD,GACS,OAAO;;GAEnB,GACa,EAEjB,oBAACA;EACC,KAAK;EACL,cAAY;EAGZ,gBAAc;EACd,iBAAe;EACf,eAAa;EACC;EACd,YAAY;EACZ,WAAW;EACX,YAAY;EACZ,OAAO,QAAQ,oBAAC,sBAAQ,QAAe,GAAG;EAC1C,MAAM,GAAG,KAAK;EACd,aAAa,SAAS,eAAe;EACrC,YAAY;GACV,MAAM,WAAW;GACjB,OAAO,WAAW;GAClB,SAAS,WAAW;GACrB;YAED,oBAAC;GACC,cAAc,WAAW,kBAAkB;GAE3C,aAAa,SAAS,OAAO,OAAO,MAAM,GAAG;GAC7C,MAAM;GACE;GACC;GACT,WAAW;IACT,MAAM,WAAW;IACjB,QAAQ,WAAW;IACnB,OAAO,WAAW;IAClB,KAAK,WAAW;IAChB,YAAY,WAAW;IACvB,SAAS,WAAW;IACpB,YAAY,WAAW;IACxB;GACD,oBAAoB,QAAQ;AAC1B,QAAI,OAAO,KACT,UAAS,sBAAsB,IAAI,CAAC;;IAGxC;GACa,IAChB;;AAIP,0BAAe;;;;AClOf,wBAAeC"}
+{"version":3,"file":"RadioTabs-eSB6OXD7.js","names":["HeroRadioGroup","RadioTabs"],"sources":["../src/RadioTabs/RadioTabs.tsx","../src/RadioTabs/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { TabsProps } from '@fuf-stack/pixels';\nimport type { TabProps } from '@fuf-stack/pixels/Tabs';\nimport type { ReactElement, ReactNode } from 'react';\n\nimport { useRef } from 'react';\n\nimport { RadioGroup as HeroRadioGroup } from '@heroui/radio';\nimport { VisuallyHidden } from '@react-aria/visually-hidden';\n\nimport { slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\nimport Tabs from '@fuf-stack/pixels/Tabs';\n\nimport { createOptionValueConverter } from '../helpers';\nimport { useUniformField } from '../hooks/useUniformField';\n\nexport const radioTabsVariants = tv({\n  slots: {\n    base: 'group gap-0', // Needs group for group-data condition\n    cursor: '',\n    label:\n      'mb-2 inline-flex text-sm text-foreground subpixel-antialiased group-data-[invalid=true]:text-danger',\n    tab: '',\n    tabBase: '',\n    tabContent: '',\n    tabList: '',\n    tabPanel: 'p-3',\n    tabWrapper: '',\n    wrapper: '',\n  },\n  variants: {\n    hasContent: {\n      true: {\n        base: '',\n        tabBase: 'p-1',\n        tabWrapper: [\n          // border style\n          'rounded-medium border border-divider',\n          // full width\n          'w-full',\n        ],\n      },\n    },\n    fullWidth: {\n      true: {\n        tabWrapper: 'w-full',\n      },\n    },\n    isInvalid: {\n      true: {\n        tabWrapper: 'rounded-medium border-2 !border-danger',\n      },\n    },\n  },\n});\n\ntype VariantProps = TVProps<typeof radioTabsVariants>;\ntype ClassName = TVClassName<typeof radioTabsVariants>;\n\nexport interface RadioTabsOption {\n  /** Optional content inside of the tab */\n  content?: ReactNode;\n  /** disables the option */\n  disabled?: boolean;\n  /** option label */\n  label?: ReactNode;\n  /** option icon */\n  icon?: ReactNode;\n  /** HTML data-testid attribute of the option */\n  testId?: string;\n  /** option value */\n  value: string | number | boolean;\n}\n\nexport interface RadioTabsProps extends Omit<VariantProps, 'hasContent'> {\n  /** Custom aria-label for accessibility. If not provided, falls back to field name when no visible label exists */\n  ariaLabel?: string;\n  /** CSS class name */\n  className?: ClassName;\n  /** Determines if the Buttons are disabled or not. */\n  disabled?: boolean;\n  /** Whether tabs should take up full container width */\n  fullWidth?: boolean;\n  /** determines orientation of the Buttons. */\n  inline?: boolean;\n  /** Label displayed next to the RadioButton. */\n  label?: ReactNode;\n  /** Name the RadioButtons are registered at in HTML forms (react-hook-form). */\n  name: string;\n  /** Radio button configuration. */\n  options: RadioTabsOption[];\n  /** Id to grab element in internal tests. */\n  testId?: string;\n  /** How the RadioTabs should look like. */\n  variant?: TabsProps['variant'];\n}\n\n/**\n * RadioTabs component based on [HeroUI RadioGroup](https://www.heroui.com//docs/components/radio-group)\n * and [HeroUI Tabs](https://www.heroui.com//docs/components/tabs)\n */\nconst RadioTabs = ({\n  className = undefined,\n  fullWidth = false,\n  inline = false,\n  name,\n  options,\n  variant = undefined,\n  ...uniformFieldProps\n}: RadioTabsProps): ReactElement => {\n  const {\n    ariaLabel,\n    disabled,\n    errorMessage,\n    field: { onBlur, onChange, ref, value },\n    invalid,\n    label,\n    required,\n    testId,\n  } = useUniformField({\n    name,\n    ...uniformFieldProps,\n  });\n\n  // Create a ref for the visual radio group to forward focus\n  const visualRadioGroupRef = useRef<HTMLDivElement>(null);\n\n  // Create converter to preserve number types for option values\n  const { convertToOriginalType } = createOptionValueConverter(options);\n\n  const tabOptions = options.map<TabProps>((option) => {\n    return {\n      content: option?.content,\n      disabled: option?.disabled,\n      // Tabs component uses string keys internally\n      key: String(option.value),\n      label: option?.label ?? option?.value,\n      testId: slugify(`option_${option?.testId ?? option?.value}`, {\n        replaceDots: true,\n      }),\n    };\n  });\n\n  const disabledAllKeys: string[] | undefined = tabOptions?.map((option) => {\n    return option.key as string;\n  });\n\n  // check if any option has content\n  // eslint-disable-next-line @typescript-eslint/no-misused-promises, @typescript-eslint/promise-function-async\n  const hasContent = options.some((option) => {\n    return option.content;\n  });\n\n  // classNames from slots\n  const variants = radioTabsVariants({\n    fullWidth,\n    hasContent,\n    isInvalid: invalid,\n  });\n  const classNames = variantsToClassNames(variants, className, 'base');\n\n  return (\n    <>\n      {/* Visually hidden input for React Hook Form focus management */}\n      <VisuallyHidden>\n        <input\n          ref={ref}\n          aria-label={ariaLabel}\n          name={name}\n          onBlur={onBlur}\n          value={value ?? ''}\n          onChange={(e) => {\n            onChange(convertToOriginalType(e.target.value));\n          }}\n          onFocus={() => {\n            // Forward focus to the first tab when RHF focuses this input\n            const firstTab = visualRadioGroupRef.current?.querySelector(\n              '[role=\"tab\"]',\n            ) as HTMLElement;\n            firstTab?.focus();\n          }}\n        />\n      </VisuallyHidden>\n\n      <HeroRadioGroup\n        ref={visualRadioGroupRef}\n        aria-label={ariaLabel}\n        // see HeroUI styles for group-data condition (data-invalid),\n        // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/components/select/src/use-select.ts\n        data-invalid={invalid}\n        data-required={required}\n        data-testid={testId}\n        errorMessage={errorMessage}\n        isDisabled={disabled}\n        isInvalid={invalid}\n        isRequired={required}\n        label={label ? <legend>{label}</legend> : null}\n        name={`${name}_radiotabs`}\n        orientation={inline ? 'horizontal' : 'vertical'}\n        classNames={{\n          base: classNames.base,\n          label: classNames.label,\n          wrapper: classNames.wrapper,\n        }}\n      >\n        <Tabs\n          disabledKeys={disabled ? disabledAllKeys : undefined}\n          // make sure component is controlled (convert to string for Tabs)\n          selectedKey={value != null ? String(value) : ''}\n          tabs={tabOptions}\n          testId={testId}\n          variant={variant}\n          className={{\n            base: classNames.tabBase,\n            cursor: classNames.cursor,\n            panel: classNames.tabPanel,\n            tab: classNames.tab,\n            tabContent: classNames.tabContent,\n            tabList: classNames.tabList,\n            tabWrapper: classNames.tabWrapper,\n          }}\n          onSelectionChange={(key) => {\n            if (key != null) {\n              onChange(convertToOriginalType(key));\n            }\n          }}\n        />\n      </HeroRadioGroup>\n    </>\n  );\n};\n\nexport default RadioTabs;\n","import RadioTabs from './RadioTabs';\n\nexport type { RadioTabsProps } from './RadioTabs';\n\nexport { RadioTabs };\n\nexport default RadioTabs;\n"],"mappings":";;;;;;;;;;AAgBA,MAAa,oBAAoB,GAAG;CAClC,OAAO;EACL,MAAM;EACN,QAAQ;EACR,OACE;EACF,KAAK;EACL,SAAS;EACT,YAAY;EACZ,SAAS;EACT,UAAU;EACV,YAAY;EACZ,SAAS;EACV;CACD,UAAU;EACR,YAAY,EACV,MAAM;GACJ,MAAM;GACN,SAAS;GACT,YAAY,CAEV,wCAEA,SACD;GACF,EACF;EACD,WAAW,EACT,MAAM,EACJ,YAAY,UACb,EACF;EACD,WAAW,EACT,MAAM,EACJ,YAAY,0CACb,EACF;EACF;CACF,CAAC;;;;;AA+CF,MAAM,aAAa,EACjB,YAAY,QACZ,YAAY,OACZ,SAAS,OACT,MACA,SACA,UAAU,QACV,GAAG,wBAC+B;CAClC,MAAM,EACJ,WACA,UACA,cACA,OAAO,EAAE,QAAQ,UAAU,KAAK,SAChC,SACA,OACA,UACA,WACE,gBAAgB;EAClB;EACA,GAAG;EACJ,CAAC;CAGF,MAAM,sBAAsB,OAAuB,KAAK;CAGxD,MAAM,EAAE,0BAA0B,2BAA2B,QAAQ;CAErE,MAAM,aAAa,QAAQ,KAAe,WAAW;AACnD,SAAO;GACL,SAAS,QAAQ;GACjB,UAAU,QAAQ;GAElB,KAAK,OAAO,OAAO,MAAM;GACzB,OAAO,QAAQ,SAAS,QAAQ;GAChC,QAAQ,QAAQ,UAAU,QAAQ,UAAU,QAAQ,SAAS,EAC3D,aAAa,MACd,CAAC;GACH;GACD;CAEF,MAAM,kBAAwC,YAAY,KAAK,WAAW;AACxE,SAAO,OAAO;GACd;CAcF,MAAM,aAAa,qBALF,kBAAkB;EACjC;EACA,YAPiB,QAAQ,MAAM,WAAW;AAC1C,UAAO,OAAO;IACd;EAMA,WAAW;EACZ,CAAC,EACgD,WAAW,OAAO;AAEpE,QACE,4CAEE,oBAAC,4BACC,oBAAC;EACM;EACL,cAAY;EACN;EACE;EACR,OAAO,SAAS;EAChB,WAAW,MAAM;AACf,YAAS,sBAAsB,EAAE,OAAO,MAAM,CAAC;;EAEjD,eAAe;AAKb,IAHiB,oBAAoB,SAAS,cAC5C,iBACD,GACS,OAAO;;GAEnB,GACa,EAEjB,oBAACA;EACC,KAAK;EACL,cAAY;EAGZ,gBAAc;EACd,iBAAe;EACf,eAAa;EACC;EACd,YAAY;EACZ,WAAW;EACX,YAAY;EACZ,OAAO,QAAQ,oBAAC,sBAAQ,QAAe,GAAG;EAC1C,MAAM,GAAG,KAAK;EACd,aAAa,SAAS,eAAe;EACrC,YAAY;GACV,MAAM,WAAW;GACjB,OAAO,WAAW;GAClB,SAAS,WAAW;GACrB;YAED,oBAAC;GACC,cAAc,WAAW,kBAAkB;GAE3C,aAAa,SAAS,OAAO,OAAO,MAAM,GAAG;GAC7C,MAAM;GACE;GACC;GACT,WAAW;IACT,MAAM,WAAW;IACjB,QAAQ,WAAW;IACnB,OAAO,WAAW;IAClB,KAAK,WAAW;IAChB,YAAY,WAAW;IACvB,SAAS,WAAW;IACpB,YAAY,WAAW;IACxB;GACD,oBAAoB,QAAQ;AAC1B,QAAI,OAAO,KACT,UAAS,sBAAsB,IAAI,CAAC;;IAGxC;GACa,IAChB;;AAIP,0BAAe;;;;AClOf,wBAAeC"}

package/dist/Radios/index.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const require_Radios = require('../Radios-LD2USByC.cjs');
+const require_Radios = require('../Radios-DWsCLUVl.cjs');
 
 exports.Radios = require_Radios.Radios_default$1;
 exports.default = require_Radios.Radios_default;

package/dist/Radios/index.d.cts

@@ -1,2 +1,2 @@
-import { n as RadiosProps, t as Radios } from "../index-C0--RHyE.cjs";
+import { n as RadiosProps, t as Radios } from "../index-BZrLB2p0.cjs";
 export { Radios, Radios as default, RadiosProps };

package/dist/Radios/index.d.ts

@@ -1,2 +1,2 @@
-import { n as RadiosProps, t as Radios } from "../index-ClQFLoqX.js";
+import { n as RadiosProps, t as Radios } from "../index-noH6pESQ.js";
 export { Radios, Radios as default, RadiosProps };

package/dist/Radios/index.js

@@ -1,3 +1,3 @@
-import { n as Radios_default, t as Radios_default$1 } from "../Radios-N5qCQRBU.js";
+import { n as Radios_default, t as Radios_default$1 } from "../Radios-BXuyREKO.js";
 
 export { Radios_default as Radios, Radios_default$1 as default };

package/dist/{Radios-N5qCQRBU.js → Radios-BXuyREKO.js}

@@ -1,5 +1,5 @@
 import { c as createOptionValueConverter } from "./helpers-D3A5d3M1.js";
-import { t as useUniformField } from "./useUniformField-Brwxoghf.js";
+import { t as useUniformField } from "./useUniformField-C6oSAFa3.js";
 import { slugify, tv, variantsToClassNames } from "@fuf-stack/pixel-utils";
 import { jsx } from "react/jsx-runtime";
 import { Radio, RadioGroup } from "@heroui/radio";
@@ -76,4 +76,4 @@ var Radios_default = Radios_default$1;
 
 //#endregion
 export { Radios_default$1 as n, Radios_default as t };
-//# sourceMappingURL=Radios-N5qCQRBU.js.map
+//# sourceMappingURL=Radios-BXuyREKO.js.map

package/dist/{Radios-N5qCQRBU.js.map → Radios-BXuyREKO.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Radios-N5qCQRBU.js","names":["HeroRadioGroup","HeroRadio","Radios"],"sources":["../src/Radios/Radios.tsx","../src/Radios/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ReactElement, ReactNode } from 'react';\n\nimport {\n  Radio as HeroRadio,\n  RadioGroup as HeroRadioGroup,\n} from '@heroui/radio';\n\nimport { slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { createOptionValueConverter } from '../helpers';\nimport { useUniformField } from '../hooks/useUniformField';\n\nexport const radiosVariants = tv({\n  slots: {\n    // Needs group for group-data condition\n    base: 'group gap-0',\n    itemBase: '',\n    itemControl: 'bg-focus group-data-[invalid=true]:bg-danger',\n    itemDescription: '',\n    itemLabel: 'text-sm',\n    itemLabelWrapper: '',\n    itemWrapper:\n      'group-data-[invalid=true]:border-danger! [&:not(group-data-[invalid=\"true\"]):not(group-data-[selected=\"false\"])]:border-focus',\n    // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/core/theme/src/components/select.ts\n    label:\n      'mb-2 inline-flex text-sm text-foreground subpixel-antialiased group-data-[invalid=true]:text-danger',\n    wrapper: '',\n  },\n});\n\ntype VariantProps = TVProps<typeof radiosVariants>;\ntype ClassName = TVClassName<typeof radiosVariants>;\n\nexport interface RadioOption {\n  /** disables the option */\n  disabled?: boolean;\n  /** option label */\n  label?: ReactNode;\n  /** option icon */\n  icon?: ReactNode;\n  /** HTML data-testid attribute of the option */\n  testId?: string;\n  /** option value */\n  value: string | number;\n}\n\nexport interface RadiosProps extends VariantProps {\n  /** Custom aria-label for accessibility. If not provided, falls back to field name when no visible label exists */\n  ariaLabel?: string;\n  /** CSS class name */\n  className?: ClassName;\n  /** Determines if the Buttons are disabled or not. */\n  disabled?: boolean;\n  /** determines orientation of the Buttons. */\n  inline?: boolean;\n  /** Label displayed next to the RadioButton. */\n  label?: ReactNode;\n  /** Name the RadioButtons are registered at in HTML forms (react-hook-form). */\n  name: string;\n  /** Radio button configuration. */\n  options: RadioOption[];\n  /** Id to grab element in internal tests. */\n  testId?: string;\n}\n\n/**\n * Radios component based on [HeroUI RadioGroup](https://www.heroui.com//docs/components/radio-group)\n */\nconst Radios = ({\n  className = undefined,\n  inline = false,\n  name,\n  options,\n  ...uniformFieldProps\n}: RadiosProps): ReactElement => {\n  const {\n    ariaLabel,\n    disabled,\n    errorMessage,\n    field: { onBlur, onChange, ref, value },\n    invalid,\n    label,\n    required,\n    testId,\n  } = useUniformField({\n    name,\n    ...uniformFieldProps,\n  });\n\n  // Create converter to preserve number types for option values\n  const { convertToOriginalType } = createOptionValueConverter(options);\n\n  // classNames from slots\n  const variants = radiosVariants();\n  const classNames = variantsToClassNames(variants, className, 'base');\n\n  const itemClassNames = {\n    base: classNames.itemBase,\n    control: classNames.itemControl,\n    description: classNames.itemDescription,\n    label: classNames.itemLabel,\n    labelWrapper: classNames.itemLabelWrapper,\n    wrapper: classNames.itemWrapper,\n  };\n\n  return (\n    <HeroRadioGroup\n      ref={ref}\n      aria-label={ariaLabel}\n      classNames={classNames}\n      // see HeroUI styles for group-data condition (data-invalid),\n      // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/components/select/src/use-select.ts\n      data-invalid={invalid}\n      data-required={required}\n      data-testid={testId}\n      errorMessage={errorMessage}\n      isDisabled={disabled}\n      isInvalid={invalid}\n      isRequired={required}\n      label={label ? <legend>{label}</legend> : null}\n      name={name}\n      onBlur={onBlur}\n      orientation={inline ? 'horizontal' : 'vertical'}\n      value={value != null ? String(value) : ''}\n      onValueChange={(newValue) => {\n        onChange(convertToOriginalType(newValue));\n      }}\n    >\n      {options.map((option) => {\n        if ('value' in option) {\n          const optionTestId = slugify(\n            `${testId}_option_${option.testId ?? option.value}`,\n            { replaceDots: true },\n          );\n          return (\n            <HeroRadio\n              key={String(option.value)}\n              classNames={itemClassNames}\n              data-testid={optionTestId}\n              isDisabled={!!disabled || option.disabled}\n              value={String(option.value)}\n            >\n              {option.label ?? option.value}\n            </HeroRadio>\n          );\n        }\n        return null;\n      })}\n    </HeroRadioGroup>\n  );\n};\n\nexport default Radios;\n","import Radios from './Radios';\n\nexport type { RadiosProps } from './Radios';\n\nexport { Radios };\n\nexport default Radios;\n"],"mappings":";;;;;;;AAaA,MAAa,iBAAiB,GAAG,EAC/B,OAAO;CAEL,MAAM;CACN,UAAU;CACV,aAAa;CACb,iBAAiB;CACjB,WAAW;CACX,kBAAkB;CAClB,aACE;CAEF,OACE;CACF,SAAS;CACV,EACF,CAAC;;;;AAwCF,MAAM,UAAU,EACd,YAAY,QACZ,SAAS,OACT,MACA,SACA,GAAG,wBAC4B;CAC/B,MAAM,EACJ,WACA,UACA,cACA,OAAO,EAAE,QAAQ,UAAU,KAAK,SAChC,SACA,OACA,UACA,WACE,gBAAgB;EAClB;EACA,GAAG;EACJ,CAAC;CAGF,MAAM,EAAE,0BAA0B,2BAA2B,QAAQ;CAIrE,MAAM,aAAa,qBADF,gBAAgB,EACiB,WAAW,OAAO;CAEpE,MAAM,iBAAiB;EACrB,MAAM,WAAW;EACjB,SAAS,WAAW;EACpB,aAAa,WAAW;EACxB,OAAO,WAAW;EAClB,cAAc,WAAW;EACzB,SAAS,WAAW;EACrB;AAED,QACE,oBAACA;EACM;EACL,cAAY;EACA;EAGZ,gBAAc;EACd,iBAAe;EACf,eAAa;EACC;EACd,YAAY;EACZ,WAAW;EACX,YAAY;EACZ,OAAO,QAAQ,oBAAC,sBAAQ,QAAe,GAAG;EACpC;EACE;EACR,aAAa,SAAS,eAAe;EACrC,OAAO,SAAS,OAAO,OAAO,MAAM,GAAG;EACvC,gBAAgB,aAAa;AAC3B,YAAS,sBAAsB,SAAS,CAAC;;YAG1C,QAAQ,KAAK,WAAW;AACvB,OAAI,WAAW,QAAQ;IACrB,MAAM,eAAe,QACnB,GAAG,OAAO,UAAU,OAAO,UAAU,OAAO,SAC5C,EAAE,aAAa,MAAM,CACtB;AACD,WACE,oBAACC;KAEC,YAAY;KACZ,eAAa;KACb,YAAY,CAAC,CAAC,YAAY,OAAO;KACjC,OAAO,OAAO,OAAO,MAAM;eAE1B,OAAO,SAAS,OAAO;OANnB,OAAO,OAAO,MAAM,CAOf;;AAGhB,UAAO;IACP;GACa;;AAIrB,uBAAe;;;;ACnJf,qBAAeC"}
+{"version":3,"file":"Radios-BXuyREKO.js","names":["HeroRadioGroup","HeroRadio","Radios"],"sources":["../src/Radios/Radios.tsx","../src/Radios/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ReactElement, ReactNode } from 'react';\n\nimport {\n  Radio as HeroRadio,\n  RadioGroup as HeroRadioGroup,\n} from '@heroui/radio';\n\nimport { slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { createOptionValueConverter } from '../helpers';\nimport { useUniformField } from '../hooks/useUniformField';\n\nexport const radiosVariants = tv({\n  slots: {\n    // Needs group for group-data condition\n    base: 'group gap-0',\n    itemBase: '',\n    itemControl: 'bg-focus group-data-[invalid=true]:bg-danger',\n    itemDescription: '',\n    itemLabel: 'text-sm',\n    itemLabelWrapper: '',\n    itemWrapper:\n      'group-data-[invalid=true]:border-danger! [&:not(group-data-[invalid=\"true\"]):not(group-data-[selected=\"false\"])]:border-focus',\n    // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/core/theme/src/components/select.ts\n    label:\n      'mb-2 inline-flex text-sm text-foreground subpixel-antialiased group-data-[invalid=true]:text-danger',\n    wrapper: '',\n  },\n});\n\ntype VariantProps = TVProps<typeof radiosVariants>;\ntype ClassName = TVClassName<typeof radiosVariants>;\n\nexport interface RadioOption {\n  /** disables the option */\n  disabled?: boolean;\n  /** option label */\n  label?: ReactNode;\n  /** option icon */\n  icon?: ReactNode;\n  /** HTML data-testid attribute of the option */\n  testId?: string;\n  /** option value */\n  value: string | number;\n}\n\nexport interface RadiosProps extends VariantProps {\n  /** Custom aria-label for accessibility. If not provided, falls back to field name when no visible label exists */\n  ariaLabel?: string;\n  /** CSS class name */\n  className?: ClassName;\n  /** Determines if the Buttons are disabled or not. */\n  disabled?: boolean;\n  /** determines orientation of the Buttons. */\n  inline?: boolean;\n  /** Label displayed next to the RadioButton. */\n  label?: ReactNode;\n  /** Name the RadioButtons are registered at in HTML forms (react-hook-form). */\n  name: string;\n  /** Radio button configuration. */\n  options: RadioOption[];\n  /** Id to grab element in internal tests. */\n  testId?: string;\n}\n\n/**\n * Radios component based on [HeroUI RadioGroup](https://www.heroui.com//docs/components/radio-group)\n */\nconst Radios = ({\n  className = undefined,\n  inline = false,\n  name,\n  options,\n  ...uniformFieldProps\n}: RadiosProps): ReactElement => {\n  const {\n    ariaLabel,\n    disabled,\n    errorMessage,\n    field: { onBlur, onChange, ref, value },\n    invalid,\n    label,\n    required,\n    testId,\n  } = useUniformField({\n    name,\n    ...uniformFieldProps,\n  });\n\n  // Create converter to preserve number types for option values\n  const { convertToOriginalType } = createOptionValueConverter(options);\n\n  // classNames from slots\n  const variants = radiosVariants();\n  const classNames = variantsToClassNames(variants, className, 'base');\n\n  const itemClassNames = {\n    base: classNames.itemBase,\n    control: classNames.itemControl,\n    description: classNames.itemDescription,\n    label: classNames.itemLabel,\n    labelWrapper: classNames.itemLabelWrapper,\n    wrapper: classNames.itemWrapper,\n  };\n\n  return (\n    <HeroRadioGroup\n      ref={ref}\n      aria-label={ariaLabel}\n      classNames={classNames}\n      // see HeroUI styles for group-data condition (data-invalid),\n      // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/components/select/src/use-select.ts\n      data-invalid={invalid}\n      data-required={required}\n      data-testid={testId}\n      errorMessage={errorMessage}\n      isDisabled={disabled}\n      isInvalid={invalid}\n      isRequired={required}\n      label={label ? <legend>{label}</legend> : null}\n      name={name}\n      onBlur={onBlur}\n      orientation={inline ? 'horizontal' : 'vertical'}\n      value={value != null ? String(value) : ''}\n      onValueChange={(newValue) => {\n        onChange(convertToOriginalType(newValue));\n      }}\n    >\n      {options.map((option) => {\n        if ('value' in option) {\n          const optionTestId = slugify(\n            `${testId}_option_${option.testId ?? option.value}`,\n            { replaceDots: true },\n          );\n          return (\n            <HeroRadio\n              key={String(option.value)}\n              classNames={itemClassNames}\n              data-testid={optionTestId}\n              isDisabled={!!disabled || option.disabled}\n              value={String(option.value)}\n            >\n              {option.label ?? option.value}\n            </HeroRadio>\n          );\n        }\n        return null;\n      })}\n    </HeroRadioGroup>\n  );\n};\n\nexport default Radios;\n","import Radios from './Radios';\n\nexport type { RadiosProps } from './Radios';\n\nexport { Radios };\n\nexport default Radios;\n"],"mappings":";;;;;;;AAaA,MAAa,iBAAiB,GAAG,EAC/B,OAAO;CAEL,MAAM;CACN,UAAU;CACV,aAAa;CACb,iBAAiB;CACjB,WAAW;CACX,kBAAkB;CAClB,aACE;CAEF,OACE;CACF,SAAS;CACV,EACF,CAAC;;;;AAwCF,MAAM,UAAU,EACd,YAAY,QACZ,SAAS,OACT,MACA,SACA,GAAG,wBAC4B;CAC/B,MAAM,EACJ,WACA,UACA,cACA,OAAO,EAAE,QAAQ,UAAU,KAAK,SAChC,SACA,OACA,UACA,WACE,gBAAgB;EAClB;EACA,GAAG;EACJ,CAAC;CAGF,MAAM,EAAE,0BAA0B,2BAA2B,QAAQ;CAIrE,MAAM,aAAa,qBADF,gBAAgB,EACiB,WAAW,OAAO;CAEpE,MAAM,iBAAiB;EACrB,MAAM,WAAW;EACjB,SAAS,WAAW;EACpB,aAAa,WAAW;EACxB,OAAO,WAAW;EAClB,cAAc,WAAW;EACzB,SAAS,WAAW;EACrB;AAED,QACE,oBAACA;EACM;EACL,cAAY;EACA;EAGZ,gBAAc;EACd,iBAAe;EACf,eAAa;EACC;EACd,YAAY;EACZ,WAAW;EACX,YAAY;EACZ,OAAO,QAAQ,oBAAC,sBAAQ,QAAe,GAAG;EACpC;EACE;EACR,aAAa,SAAS,eAAe;EACrC,OAAO,SAAS,OAAO,OAAO,MAAM,GAAG;EACvC,gBAAgB,aAAa;AAC3B,YAAS,sBAAsB,SAAS,CAAC;;YAG1C,QAAQ,KAAK,WAAW;AACvB,OAAI,WAAW,QAAQ;IACrB,MAAM,eAAe,QACnB,GAAG,OAAO,UAAU,OAAO,UAAU,OAAO,SAC5C,EAAE,aAAa,MAAM,CACtB;AACD,WACE,oBAACC;KAEC,YAAY;KACZ,eAAa;KACb,YAAY,CAAC,CAAC,YAAY,OAAO;KACjC,OAAO,OAAO,OAAO,MAAM;eAE1B,OAAO,SAAS,OAAO;OANnB,OAAO,OAAO,MAAM,CAOf;;AAGhB,UAAO;IACP;GACa;;AAIrB,uBAAe;;;;ACnJf,qBAAeC"}

package/dist/{Radios-LD2USByC.cjs → Radios-DWsCLUVl.cjs}

@@ -1,6 +1,6 @@
 const require_FormContext = require('./FormContext-CeFKQmVH.cjs');
 const require_helpers = require('./helpers-CncbgvW_.cjs');
-const require_useUniformField = require('./useUniformField-BJTRfqCQ.cjs');
+const require_useUniformField = require('./useUniformField-Dd3AnpgE.cjs');
 let _fuf_stack_pixel_utils = require("@fuf-stack/pixel-utils");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _heroui_radio = require("@heroui/radio");
@@ -88,4 +88,4 @@ Object.defineProperty(exports, 'Radios_default$1', {
     return Radios_default$1;
   }
 });
-//# sourceMappingURL=Radios-LD2USByC.cjs.map
+//# sourceMappingURL=Radios-DWsCLUVl.cjs.map

package/dist/{Radios-LD2USByC.cjs.map → Radios-DWsCLUVl.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"Radios-LD2USByC.cjs","names":["useUniformField","createOptionValueConverter","HeroRadioGroup","HeroRadio","Radios"],"sources":["../src/Radios/Radios.tsx","../src/Radios/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ReactElement, ReactNode } from 'react';\n\nimport {\n  Radio as HeroRadio,\n  RadioGroup as HeroRadioGroup,\n} from '@heroui/radio';\n\nimport { slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { createOptionValueConverter } from '../helpers';\nimport { useUniformField } from '../hooks/useUniformField';\n\nexport const radiosVariants = tv({\n  slots: {\n    // Needs group for group-data condition\n    base: 'group gap-0',\n    itemBase: '',\n    itemControl: 'bg-focus group-data-[invalid=true]:bg-danger',\n    itemDescription: '',\n    itemLabel: 'text-sm',\n    itemLabelWrapper: '',\n    itemWrapper:\n      'group-data-[invalid=true]:border-danger! [&:not(group-data-[invalid=\"true\"]):not(group-data-[selected=\"false\"])]:border-focus',\n    // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/core/theme/src/components/select.ts\n    label:\n      'mb-2 inline-flex text-sm text-foreground subpixel-antialiased group-data-[invalid=true]:text-danger',\n    wrapper: '',\n  },\n});\n\ntype VariantProps = TVProps<typeof radiosVariants>;\ntype ClassName = TVClassName<typeof radiosVariants>;\n\nexport interface RadioOption {\n  /** disables the option */\n  disabled?: boolean;\n  /** option label */\n  label?: ReactNode;\n  /** option icon */\n  icon?: ReactNode;\n  /** HTML data-testid attribute of the option */\n  testId?: string;\n  /** option value */\n  value: string | number;\n}\n\nexport interface RadiosProps extends VariantProps {\n  /** Custom aria-label for accessibility. If not provided, falls back to field name when no visible label exists */\n  ariaLabel?: string;\n  /** CSS class name */\n  className?: ClassName;\n  /** Determines if the Buttons are disabled or not. */\n  disabled?: boolean;\n  /** determines orientation of the Buttons. */\n  inline?: boolean;\n  /** Label displayed next to the RadioButton. */\n  label?: ReactNode;\n  /** Name the RadioButtons are registered at in HTML forms (react-hook-form). */\n  name: string;\n  /** Radio button configuration. */\n  options: RadioOption[];\n  /** Id to grab element in internal tests. */\n  testId?: string;\n}\n\n/**\n * Radios component based on [HeroUI RadioGroup](https://www.heroui.com//docs/components/radio-group)\n */\nconst Radios = ({\n  className = undefined,\n  inline = false,\n  name,\n  options,\n  ...uniformFieldProps\n}: RadiosProps): ReactElement => {\n  const {\n    ariaLabel,\n    disabled,\n    errorMessage,\n    field: { onBlur, onChange, ref, value },\n    invalid,\n    label,\n    required,\n    testId,\n  } = useUniformField({\n    name,\n    ...uniformFieldProps,\n  });\n\n  // Create converter to preserve number types for option values\n  const { convertToOriginalType } = createOptionValueConverter(options);\n\n  // classNames from slots\n  const variants = radiosVariants();\n  const classNames = variantsToClassNames(variants, className, 'base');\n\n  const itemClassNames = {\n    base: classNames.itemBase,\n    control: classNames.itemControl,\n    description: classNames.itemDescription,\n    label: classNames.itemLabel,\n    labelWrapper: classNames.itemLabelWrapper,\n    wrapper: classNames.itemWrapper,\n  };\n\n  return (\n    <HeroRadioGroup\n      ref={ref}\n      aria-label={ariaLabel}\n      classNames={classNames}\n      // see HeroUI styles for group-data condition (data-invalid),\n      // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/components/select/src/use-select.ts\n      data-invalid={invalid}\n      data-required={required}\n      data-testid={testId}\n      errorMessage={errorMessage}\n      isDisabled={disabled}\n      isInvalid={invalid}\n      isRequired={required}\n      label={label ? <legend>{label}</legend> : null}\n      name={name}\n      onBlur={onBlur}\n      orientation={inline ? 'horizontal' : 'vertical'}\n      value={value != null ? String(value) : ''}\n      onValueChange={(newValue) => {\n        onChange(convertToOriginalType(newValue));\n      }}\n    >\n      {options.map((option) => {\n        if ('value' in option) {\n          const optionTestId = slugify(\n            `${testId}_option_${option.testId ?? option.value}`,\n            { replaceDots: true },\n          );\n          return (\n            <HeroRadio\n              key={String(option.value)}\n              classNames={itemClassNames}\n              data-testid={optionTestId}\n              isDisabled={!!disabled || option.disabled}\n              value={String(option.value)}\n            >\n              {option.label ?? option.value}\n            </HeroRadio>\n          );\n        }\n        return null;\n      })}\n    </HeroRadioGroup>\n  );\n};\n\nexport default Radios;\n","import Radios from './Radios';\n\nexport type { RadiosProps } from './Radios';\n\nexport { Radios };\n\nexport default Radios;\n"],"mappings":";;;;;;;;AAaA,MAAa,gDAAoB,EAC/B,OAAO;CAEL,MAAM;CACN,UAAU;CACV,aAAa;CACb,iBAAiB;CACjB,WAAW;CACX,kBAAkB;CAClB,aACE;CAEF,OACE;CACF,SAAS;CACV,EACF,CAAC;;;;AAwCF,MAAM,UAAU,EACd,YAAY,QACZ,SAAS,OACT,MACA,SACA,GAAG,wBAC4B;CAC/B,MAAM,EACJ,WACA,UACA,cACA,OAAO,EAAE,QAAQ,UAAU,KAAK,SAChC,SACA,OACA,UACA,WACEA,wCAAgB;EAClB;EACA,GAAG;EACJ,CAAC;CAGF,MAAM,EAAE,0BAA0BC,2CAA2B,QAAQ;CAIrE,MAAM,8DADW,gBAAgB,EACiB,WAAW,OAAO;CAEpE,MAAM,iBAAiB;EACrB,MAAM,WAAW;EACjB,SAAS,WAAW;EACpB,aAAa,WAAW;EACxB,OAAO,WAAW;EAClB,cAAc,WAAW;EACzB,SAAS,WAAW;EACrB;AAED,QACE,2CAACC;EACM;EACL,cAAY;EACA;EAGZ,gBAAc;EACd,iBAAe;EACf,eAAa;EACC;EACd,YAAY;EACZ,WAAW;EACX,YAAY;EACZ,OAAO,QAAQ,2CAAC,sBAAQ,QAAe,GAAG;EACpC;EACE;EACR,aAAa,SAAS,eAAe;EACrC,OAAO,SAAS,OAAO,OAAO,MAAM,GAAG;EACvC,gBAAgB,aAAa;AAC3B,YAAS,sBAAsB,SAAS,CAAC;;YAG1C,QAAQ,KAAK,WAAW;AACvB,OAAI,WAAW,QAAQ;IACrB,MAAM,mDACJ,GAAG,OAAO,UAAU,OAAO,UAAU,OAAO,SAC5C,EAAE,aAAa,MAAM,CACtB;AACD,WACE,2CAACC;KAEC,YAAY;KACZ,eAAa;KACb,YAAY,CAAC,CAAC,YAAY,OAAO;KACjC,OAAO,OAAO,OAAO,MAAM;eAE1B,OAAO,SAAS,OAAO;OANnB,OAAO,OAAO,MAAM,CAOf;;AAGhB,UAAO;IACP;GACa;;AAIrB,uBAAe;;;;ACnJf,qBAAeC"}
+{"version":3,"file":"Radios-DWsCLUVl.cjs","names":["useUniformField","createOptionValueConverter","HeroRadioGroup","HeroRadio","Radios"],"sources":["../src/Radios/Radios.tsx","../src/Radios/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ReactElement, ReactNode } from 'react';\n\nimport {\n  Radio as HeroRadio,\n  RadioGroup as HeroRadioGroup,\n} from '@heroui/radio';\n\nimport { slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { createOptionValueConverter } from '../helpers';\nimport { useUniformField } from '../hooks/useUniformField';\n\nexport const radiosVariants = tv({\n  slots: {\n    // Needs group for group-data condition\n    base: 'group gap-0',\n    itemBase: '',\n    itemControl: 'bg-focus group-data-[invalid=true]:bg-danger',\n    itemDescription: '',\n    itemLabel: 'text-sm',\n    itemLabelWrapper: '',\n    itemWrapper:\n      'group-data-[invalid=true]:border-danger! [&:not(group-data-[invalid=\"true\"]):not(group-data-[selected=\"false\"])]:border-focus',\n    // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/core/theme/src/components/select.ts\n    label:\n      'mb-2 inline-flex text-sm text-foreground subpixel-antialiased group-data-[invalid=true]:text-danger',\n    wrapper: '',\n  },\n});\n\ntype VariantProps = TVProps<typeof radiosVariants>;\ntype ClassName = TVClassName<typeof radiosVariants>;\n\nexport interface RadioOption {\n  /** disables the option */\n  disabled?: boolean;\n  /** option label */\n  label?: ReactNode;\n  /** option icon */\n  icon?: ReactNode;\n  /** HTML data-testid attribute of the option */\n  testId?: string;\n  /** option value */\n  value: string | number;\n}\n\nexport interface RadiosProps extends VariantProps {\n  /** Custom aria-label for accessibility. If not provided, falls back to field name when no visible label exists */\n  ariaLabel?: string;\n  /** CSS class name */\n  className?: ClassName;\n  /** Determines if the Buttons are disabled or not. */\n  disabled?: boolean;\n  /** determines orientation of the Buttons. */\n  inline?: boolean;\n  /** Label displayed next to the RadioButton. */\n  label?: ReactNode;\n  /** Name the RadioButtons are registered at in HTML forms (react-hook-form). */\n  name: string;\n  /** Radio button configuration. */\n  options: RadioOption[];\n  /** Id to grab element in internal tests. */\n  testId?: string;\n}\n\n/**\n * Radios component based on [HeroUI RadioGroup](https://www.heroui.com//docs/components/radio-group)\n */\nconst Radios = ({\n  className = undefined,\n  inline = false,\n  name,\n  options,\n  ...uniformFieldProps\n}: RadiosProps): ReactElement => {\n  const {\n    ariaLabel,\n    disabled,\n    errorMessage,\n    field: { onBlur, onChange, ref, value },\n    invalid,\n    label,\n    required,\n    testId,\n  } = useUniformField({\n    name,\n    ...uniformFieldProps,\n  });\n\n  // Create converter to preserve number types for option values\n  const { convertToOriginalType } = createOptionValueConverter(options);\n\n  // classNames from slots\n  const variants = radiosVariants();\n  const classNames = variantsToClassNames(variants, className, 'base');\n\n  const itemClassNames = {\n    base: classNames.itemBase,\n    control: classNames.itemControl,\n    description: classNames.itemDescription,\n    label: classNames.itemLabel,\n    labelWrapper: classNames.itemLabelWrapper,\n    wrapper: classNames.itemWrapper,\n  };\n\n  return (\n    <HeroRadioGroup\n      ref={ref}\n      aria-label={ariaLabel}\n      classNames={classNames}\n      // see HeroUI styles for group-data condition (data-invalid),\n      // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/components/select/src/use-select.ts\n      data-invalid={invalid}\n      data-required={required}\n      data-testid={testId}\n      errorMessage={errorMessage}\n      isDisabled={disabled}\n      isInvalid={invalid}\n      isRequired={required}\n      label={label ? <legend>{label}</legend> : null}\n      name={name}\n      onBlur={onBlur}\n      orientation={inline ? 'horizontal' : 'vertical'}\n      value={value != null ? String(value) : ''}\n      onValueChange={(newValue) => {\n        onChange(convertToOriginalType(newValue));\n      }}\n    >\n      {options.map((option) => {\n        if ('value' in option) {\n          const optionTestId = slugify(\n            `${testId}_option_${option.testId ?? option.value}`,\n            { replaceDots: true },\n          );\n          return (\n            <HeroRadio\n              key={String(option.value)}\n              classNames={itemClassNames}\n              data-testid={optionTestId}\n              isDisabled={!!disabled || option.disabled}\n              value={String(option.value)}\n            >\n              {option.label ?? option.value}\n            </HeroRadio>\n          );\n        }\n        return null;\n      })}\n    </HeroRadioGroup>\n  );\n};\n\nexport default Radios;\n","import Radios from './Radios';\n\nexport type { RadiosProps } from './Radios';\n\nexport { Radios };\n\nexport default Radios;\n"],"mappings":";;;;;;;;AAaA,MAAa,gDAAoB,EAC/B,OAAO;CAEL,MAAM;CACN,UAAU;CACV,aAAa;CACb,iBAAiB;CACjB,WAAW;CACX,kBAAkB;CAClB,aACE;CAEF,OACE;CACF,SAAS;CACV,EACF,CAAC;;;;AAwCF,MAAM,UAAU,EACd,YAAY,QACZ,SAAS,OACT,MACA,SACA,GAAG,wBAC4B;CAC/B,MAAM,EACJ,WACA,UACA,cACA,OAAO,EAAE,QAAQ,UAAU,KAAK,SAChC,SACA,OACA,UACA,WACEA,wCAAgB;EAClB;EACA,GAAG;EACJ,CAAC;CAGF,MAAM,EAAE,0BAA0BC,2CAA2B,QAAQ;CAIrE,MAAM,8DADW,gBAAgB,EACiB,WAAW,OAAO;CAEpE,MAAM,iBAAiB;EACrB,MAAM,WAAW;EACjB,SAAS,WAAW;EACpB,aAAa,WAAW;EACxB,OAAO,WAAW;EAClB,cAAc,WAAW;EACzB,SAAS,WAAW;EACrB;AAED,QACE,2CAACC;EACM;EACL,cAAY;EACA;EAGZ,gBAAc;EACd,iBAAe;EACf,eAAa;EACC;EACd,YAAY;EACZ,WAAW;EACX,YAAY;EACZ,OAAO,QAAQ,2CAAC,sBAAQ,QAAe,GAAG;EACpC;EACE;EACR,aAAa,SAAS,eAAe;EACrC,OAAO,SAAS,OAAO,OAAO,MAAM,GAAG;EACvC,gBAAgB,aAAa;AAC3B,YAAS,sBAAsB,SAAS,CAAC;;YAG1C,QAAQ,KAAK,WAAW;AACvB,OAAI,WAAW,QAAQ;IACrB,MAAM,mDACJ,GAAG,OAAO,UAAU,OAAO,UAAU,OAAO,SAC5C,EAAE,aAAa,MAAM,CACtB;AACD,WACE,2CAACC;KAEC,YAAY;KACZ,eAAa;KACb,YAAY,CAAC,CAAC,YAAY,OAAO;KACjC,OAAO,OAAO,OAAO,MAAM;eAE1B,OAAO,SAAS,OAAO;OANnB,OAAO,OAAO,MAAM,CAOf;;AAGhB,UAAO;IACP;GACa;;AAIrB,uBAAe;;;;ACnJf,qBAAeC"}

package/dist/Select/index.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const require_Select = require('../Select-C5mS7WZC.cjs');
+const require_Select = require('../Select-CTbXrAjL.cjs');
 
 exports.Select = require_Select.Select_default$1;
 exports.default = require_Select.Select_default;

package/dist/Select/index.d.cts

@@ -1,2 +1,2 @@
-import { n as SelectProps, t as Select } from "../index-jeFGTign.cjs";
+import { n as SelectProps, t as Select } from "../index-D5rTKWm9.cjs";
 export { Select, Select as default, SelectProps };

package/dist/Select/index.d.ts

@@ -1,2 +1,2 @@
-import { n as SelectProps, t as Select } from "../index-CPE2gcz3.js";
+import { n as SelectProps, t as Select } from "../index-CRYEKT3o.js";
 export { Select, Select as default, SelectProps };

package/dist/Select/index.js

@@ -1,3 +1,3 @@
-import { n as Select_default, t as Select_default$1 } from "../Select-D_LJBu0p.js";
+import { n as Select_default, t as Select_default$1 } from "../Select-Dk_K_Q0F.js";
 
 export { Select_default as Select, Select_default$1 as default };

package/dist/{Select-C5mS7WZC.cjs → Select-CTbXrAjL.cjs}

@@ -1,7 +1,7 @@
 const require_FormContext = require('./FormContext-CeFKQmVH.cjs');
 const require_helpers = require('./helpers-CncbgvW_.cjs');
 const require_useFormContext = require('./useFormContext-DJiJlfGJ.cjs');
-const require_useUniformField = require('./useUniformField-BJTRfqCQ.cjs');
+const require_useUniformField = require('./useUniformField-Dd3AnpgE.cjs');
 let _fuf_stack_pixel_utils = require("@fuf-stack/pixel-utils");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -71,7 +71,7 @@ const DropdownIndicatorComponent = (props) => {
 	});
 };
 /** Select component based on [HeroUI Select](https://www.heroui.com//docs/components/select) and [React-Select](https://react-select.com/home) */
-const Select = ({ className = void 0, clearable = true, filterOption = void 0, renderOptionLabel = void 0, inputValue = void 0, loading = false, multiSelect = false, name, onInputChange = void 0, options, placeholder = void 0, ...uniformFieldProps }) => {
+const Select = ({ className = void 0, clearable = true, filterOption = void 0, renderOptionLabel = void 0, inputValue = void 0, loading = false, multiSelect = false, name, onInputChange = void 0, options, placeholder = void 0, selectedOptionFallback = void 0, ...uniformFieldProps }) => {
 	const { ariaLabel, disabled, errorMessage, field: { onBlur, onChange, ref, value }, getErrorMessageProps, getHelperWrapperProps, getLabelProps, invalid, label, required, testId } = require_useUniformField.useUniformField({
 		name,
 		...uniformFieldProps
@@ -156,21 +156,42 @@ const Select = ({ className = void 0, clearable = true, filterOption = void 0, r
 		label,
 		labelPlacement: "outside"
 	});
-	const selectedOptions = multiSelect ? options.filter((option) => {
-		if (!Array.isArray(value)) return false;
-		return value.some((v) => {
-			return String(option.value) === String(v);
-		});
-	}) : options.find((option) => {
-		return String(option.value) === String(value);
-	}) ?? null;
+	const reactSelectValue = (() => {
+		const findOption = (v) => {
+			const inOptions = options.find((option) => {
+				return String(option.value) === String(v);
+			});
+			if (inOptions) return inOptions;
+			if (selectedOptionFallback) {
+				if (Array.isArray(selectedOptionFallback)) {
+					const inSelected = selectedOptionFallback.find((option) => {
+						return String(option.value) === String(v);
+					});
+					if (inSelected) return inSelected;
+				} else if (String(selectedOptionFallback.value) === String(v)) return selectedOptionFallback;
+			}
+			return {
+				isFallback: true,
+				label: String(v),
+				value: v
+			};
+		};
+		if (multiSelect) {
+			if (!Array.isArray(value) || require_helpers.isValueEmpty(value)) return [];
+			return value.map((v) => {
+				return findOption(v);
+			});
+		}
+		if (require_helpers.isValueEmpty(value)) return null;
+		return findOption(value);
+	})();
 	const handleChange = (option) => {
 		if (multiSelect) onChange(option?.map((_option) => {
 			return convertToOriginalType(_option.value);
 		}));
 		else {
 			const newValue = option?.value;
-			onChange(newValue != null ? convertToOriginalType(newValue) : newValue);
+			onChange(newValue != null ? convertToOriginalType(newValue) : null);
 		}
 		const { isTouched: currentIsTouched } = getFieldState(name, testId);
 		if (!currentIsTouched) onBlur();
@@ -220,7 +241,7 @@ const Select = ({ className = void 0, clearable = true, filterOption = void 0, r
 				onInputChange,
 				options,
 				placeholder,
-				value: selectedOptions,
+				value: reactSelectValue,
 				"aria-labelledby": label ? getTriggerProps()["aria-labelledby"]?.split(" ")[1] : void 0,
 				components: {
 					Control: ControlComponent,
@@ -258,4 +279,4 @@ Object.defineProperty(exports, 'Select_default$1', {
     return Select_default$1;
   }
 });
-//# sourceMappingURL=Select-C5mS7WZC.cjs.map
+//# sourceMappingURL=Select-CTbXrAjL.cjs.map

package/dist/Select-CTbXrAjL.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select-CTbXrAjL.cjs","names":["components","useUniformField","useFormContext","createOptionValueConverter","isValueEmpty","ReactSelect","Select"],"sources":["../src/Select/Select.tsx","../src/Select/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ReactNode } from 'react';\nimport type { MultiValue, Props, SingleValue } from 'react-select';\n\nimport { useState } from 'react';\nimport ReactSelect, { components } from 'react-select';\n\nimport { useSelect } from '@heroui/select';\n\nimport { cn, slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { createOptionValueConverter, isValueEmpty } from '../helpers';\nimport { useFormContext } from '../hooks/useFormContext';\nimport { useUniformField } from '../hooks/useUniformField';\n\nexport const selectVariants = tv({\n  slots: {\n    base: 'group leading-normal',\n    clearIndicator:\n      'rounded-md p-1 text-foreground-500 hover:cursor-pointer hover:bg-default-200 hover:text-foreground-800',\n    control:\n      'duration-150! rounded-lg border-2 border-default-200 bg-content1 transition-background hover:border-default-400 group-data-[invalid=true]:border-danger group-data-[invalid=true]:hover:border-danger motion-reduce:transition-none',\n    control_focused: 'border-focus',\n    crossIcon: '',\n    downChevron: '',\n    dropdownIndicator:\n      'rounded-md p-1 text-foreground-500 hover:cursor-pointer hover:bg-default-200 hover:text-black',\n    group: '',\n    groupHeading: 'mb-1 ml-3 mt-2 text-sm text-foreground-500',\n    indicatorsContainer: 'gap-1 p-1',\n    indicatorSeparator: 'bg-default-300',\n    input: 'py-0.5 pl-1',\n    // see HeroUI styles for group-data condition,\n    // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/core/theme/src/components/select.ts\n    label:\n      'pointer-events-auto relative bottom-1.5 ml-1 subpixel-antialiased text-small group-data-[invalid=true]:!text-danger group-data-[required=true]:after:ml-0.5 group-data-[required=true]:after:text-danger group-data-[required=true]:after:content-[\"*\"]',\n    loadingIndicator: '',\n    loadingMessage: 'rounded-sm p-2 text-foreground-500',\n    menu: 'mt-2 rounded-xl border border-default-200 bg-content1 p-1 shadow-lg',\n    menuList: '',\n    // ensure menu has same z-index as modal so it is visible when rendered in modal\n    // see: https://github.com/heroui-inc/heroui/blob/main/packages/core/theme/src/components/modal.ts (see z-50)\n    menuPortal: 'z-50!',\n    multiValue: 'items-center gap-1.5 rounded bg-default-100 py-0.5 pl-2 pr-1',\n    multiValueContainer: '',\n    multiValueLabel: 'py-0.5 leading-6',\n    multiValueRemove:\n      'rounded text-default-500 hover:cursor-pointer hover:border-default-300 hover:text-default-800',\n    noOptionsMessage: 'rounded-sm p-2 text-foreground-500',\n    option_focused: 'bg-default-100 active:bg-default-200',\n    option_selected: 'bg-default-300',\n    option: 'rounded px-3 py-2 hover:cursor-pointer',\n    placeholder: 'ml-1 py-0.5 pl-1 text-sm text-foreground-500',\n    selectContainer: '',\n    singleValue: 'ml-1! leading-7!',\n    valueContainer: 'gap-1 p-1',\n  },\n});\n\ninterface SelectOption {\n  /**\n   * True when option was auto-generated because the value wasn't found in options.\n   * Use in renderOptionLabel to render a component that fetches the real label.\n   */\n  isFallback?: boolean;\n  /** option label */\n  label?: ReactNode;\n  /** option value */\n  value: string | number;\n}\n\ntype VariantProps = TVProps<typeof selectVariants>;\ntype ClassName = TVClassName<typeof selectVariants>;\n\nexport interface SelectProps extends VariantProps {\n  /** Custom aria-label for accessibility. If not provided, falls back to field name when no visible label exists */\n  ariaLabel?: string;\n  /** CSS class name */\n  className?: ClassName; // string;\n  /** Determine if the  */\n  clearable?: boolean;\n  /** Set the select to disabled state. */\n  disabled?: boolean;\n  /** Filter Select Options */\n  filterOption?:\n    | undefined\n    | ((option?: SelectOption, inputValue?: string) => boolean);\n  /** Format the label of the option */\n  renderOptionLabel?: undefined | Props['formatOptionLabel'];\n  /** The value of the search input */\n  inputValue?: string;\n  /** Label that should be associated with the select. */\n  label?: ReactNode;\n  /** Set the select to a loading state. */\n  loading?: boolean;\n  /** switch between single and multi select mode. */\n  multiSelect?: boolean;\n  /** The name for the Select component, used by react-hook-form */\n  name: string;\n  /** Placeholder that is displayed when nothing is selected */\n  placeholder?: string;\n  /** The options for the Select component */\n  options: SelectOption[];\n  /** Handle change events on the input */\n  onInputChange?: Props['onInputChange'];\n  /**\n   * Fallback option(s) for async selects when value isn't in current options.\n   * Use when the selected value may not be in the options list (e.g., after\n   * search results change). Used only if value not found in options.\n   * For single select: pass the option object or undefined\n   * For multi-select: pass an array of option objects\n   */\n  selectedOptionFallback?: SelectOption | SelectOption[];\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n}\n\nconst InputComponent: typeof components.Input = (props) => {\n  // @ts-expect-error data-testid is not a default prop\n  // eslint-disable-next-line react/destructuring-assignment\n  const testId = `${props.selectProps['data-testid']}`;\n\n  return <components.Input data-testid={testId} {...props} />;\n};\n\nconst ControlComponent: typeof components.Control = (props) => {\n  // @ts-expect-error data-testid is not a default prop\n  // eslint-disable-next-line react/destructuring-assignment\n  const testId = `${props.selectProps['data-testid']}_select`;\n  return (\n    <div data-testid={testId}>\n      {}\n      <components.Control {...props} />\n    </div>\n  );\n};\n\nconst OptionComponent: typeof components.Option = (props) => {\n  // @ts-expect-error data-testid is not a default prop\n  // eslint-disable-next-line react/destructuring-assignment\n  const testId = `${props.selectProps['data-testid']}_select_option_${slugify(String(props?.data?.testId ?? props?.data?.value), { replaceDots: true })}`;\n  return (\n    <div data-testid={testId}>\n      {}\n      <components.Option {...props} />\n    </div>\n  );\n};\n\nconst DropdownIndicatorComponent: typeof components.DropdownIndicator = (\n  props,\n) => {\n  // @ts-expect-error data-testid is not a default prop\n\n  const testId = props?.selectProps['data-testid'] as string;\n  return (\n    <div data-testid={`${testId}_select_dropdown`}>\n      {}\n      <components.DropdownIndicator {...props} />\n    </div>\n  );\n};\n\n/** Select component based on [HeroUI Select](https://www.heroui.com//docs/components/select) and [React-Select](https://react-select.com/home) */\nconst Select = ({\n  className = undefined,\n  clearable = true,\n  filterOption = undefined,\n  renderOptionLabel = undefined,\n  inputValue = undefined,\n  loading = false,\n  multiSelect = false,\n  name,\n  onInputChange = undefined,\n  options,\n  placeholder = undefined,\n  selectedOptionFallback = undefined,\n  ...uniformFieldProps\n}: SelectProps) => {\n  const {\n    ariaLabel,\n    disabled,\n    errorMessage,\n    field: { onBlur, onChange, ref, value },\n    getErrorMessageProps,\n    getHelperWrapperProps,\n    getLabelProps,\n    invalid,\n    label,\n    required,\n    testId,\n  } = useUniformField({\n    name,\n    ...uniformFieldProps,\n  });\n\n  // Get getFieldState to check isTouched in onChange callback\n  const { getFieldState } = useFormContext();\n\n  // Track if the select is focused\n  const [isFocused, setIsFocused] = useState(false);\n\n  // Create converter to preserve number types for option values\n  const { convertToOriginalType } = createOptionValueConverter(options);\n\n  // classNames from slots\n  const variants = selectVariants();\n  const classNames = variantsToClassNames(variants, className, 'base');\n\n  // React-select classNames configuration\n  const reactSelectClassNames = {\n    clearIndicator: () => {\n      return classNames.clearIndicator;\n    },\n    control: () => {\n      return cn(classNames.control, {\n        [classNames.control_focused]: isFocused && !invalid,\n      });\n    },\n    dropdownIndicator: () => {\n      return classNames.dropdownIndicator;\n    },\n    groupHeading: () => {\n      return classNames.groupHeading;\n    },\n    indicatorSeparator: () => {\n      return classNames.indicatorSeparator;\n    },\n    indicatorsContainer: () => {\n      return classNames.indicatorsContainer;\n    },\n    input: () => {\n      return classNames.input;\n    },\n    loadingIndicator: () => {\n      return classNames.loadingIndicator;\n    },\n    loadingMessage: () => {\n      return classNames.loadingMessage;\n    },\n    menu: () => {\n      return classNames.menu;\n    },\n    menuList: () => {\n      return classNames.menuList;\n    },\n    menuPortal: () => {\n      return classNames.menuPortal;\n    },\n    multiValue: () => {\n      return classNames.multiValue;\n    },\n    multiValueLabel: () => {\n      return cn(classNames.multiValueLabel, `${getValueProps().className}`);\n    },\n    multiValueRemove: () => {\n      return classNames.multiValueRemove;\n    },\n    noOptionsMessage: () => {\n      return classNames.noOptionsMessage;\n    },\n    option: ({\n      isFocused: optionIsFocused,\n      isSelected: optionIsSelected,\n    }: {\n      isFocused: boolean;\n      isSelected: boolean;\n    }) => {\n      return cn(classNames.option, {\n        [classNames.option_focused]: optionIsFocused,\n        [classNames.option_selected]: optionIsSelected,\n      });\n    },\n    placeholder: () => {\n      return classNames.placeholder;\n    },\n    singleValue: () => {\n      return cn(classNames.singleValue, `${getValueProps().className}`);\n    },\n    valueContainer: () => {\n      return classNames.valueContainer;\n    },\n  };\n\n  const { getBaseProps, getTriggerProps, getValueProps } = useSelect({\n    children: [],\n    classNames,\n    errorMessage,\n    isDisabled: disabled,\n    isInvalid: invalid,\n    isLoading: loading,\n    isRequired: required,\n    label,\n    labelPlacement: 'outside',\n  });\n\n  // Compute selected option(s) for react-select\n  //\n  // Priority for finding options:\n  // 1. Look in current options list\n  // 2. Use selectedOptionFallback prop (for async selects with pre-fetched data)\n  // 3. Create fallback with value as label\n  //\n  // Handles edge cases:\n  // - Compares as strings to support both string and number values\n  // - Returns null for empty single-select (required by react-select to clear)\n  // - Creates fallback options when value exists but isn't in options list\n  //   (common with async selects where options change after selection)\n  const reactSelectValue = (() => {\n    // Helper to find option by value\n    const findOption = (v: string | number): SelectOption => {\n      // First, look in options list\n      const inOptions = options.find((option) => {\n        return String(option.value) === String(v);\n      });\n      if (inOptions) {\n        return inOptions;\n      }\n\n      // Second, look in selectedOptionFallback prop (for async selects)\n      if (selectedOptionFallback) {\n        if (Array.isArray(selectedOptionFallback)) {\n          const inSelected = selectedOptionFallback.find((option) => {\n            return String(option.value) === String(v);\n          });\n          if (inSelected) {\n            return inSelected;\n          }\n        } else if (String(selectedOptionFallback.value) === String(v)) {\n          return selectedOptionFallback;\n        }\n      }\n\n      // Fallback: create option with value as label, marked as fallback\n      return { isFallback: true, label: String(v), value: v };\n    };\n\n    if (multiSelect) {\n      if (!Array.isArray(value) || isValueEmpty(value)) {\n        return [];\n      }\n      return value.map((v) => {\n        return findOption(v);\n      });\n    }\n\n    // Single select - use isValueEmpty to handle marker strings (__NULL__, etc.)\n    if (isValueEmpty(value)) {\n      return null;\n    }\n    return findOption(value);\n  })();\n\n  // Handle selection change\n  const handleChange = (\n    option: MultiValue<SelectOption> | SingleValue<SelectOption>,\n  ) => {\n    if (multiSelect) {\n      onChange(\n        (option as SelectOption[])?.map((_option) => {\n          return convertToOriginalType(_option.value);\n        }),\n      );\n    } else {\n      const newValue = (option as SelectOption)?.value;\n      // Pass null explicitly when clearing (not undefined)\n      onChange(newValue != null ? convertToOriginalType(newValue) : null);\n    }\n    // Mark field as touched immediately when a selection is made if not already touched\n    // This ensures validation errors show right away (isTouched becomes true)\n    // For Select components, selecting an option is a complete user action\n    // (unlike text inputs where typing is ongoing), so we mark as touched immediately\n    const { isTouched: currentIsTouched } = getFieldState(name, testId);\n    if (!currentIsTouched) {\n      onBlur();\n    }\n  };\n\n  // Handle blur event\n  const handleBlur = () => {\n    setIsFocused(false);\n    onBlur();\n  };\n\n  // Handle focus event\n  const handleFocus = () => {\n    setIsFocused(true);\n  };\n\n  return (\n    <div\n      {...getBaseProps()}\n      className={cn(classNames.base)}\n      // see HeroUI styles for group-data condition (data-invalid),\n      // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/components/select/src/use-select.ts\n      data-required={required}\n      data-testid={`${testId}_wrapper`}\n    >\n      {label ? (\n        <label\n          className={classNames.label}\n          data-slot=\"label\"\n          htmlFor={`react-select-${name}-input`}\n          id={getLabelProps().id}\n        >\n          {label}\n        </label>\n      ) : null}\n      <ReactSelect\n        ref={ref}\n        menuShouldBlockScroll\n        unstyled\n        aria-errormessage=\"\"\n        aria-invalid={invalid}\n        // set aria-labelledby to the label id so that the select is accessible\n        aria-label={ariaLabel}\n        classNames={reactSelectClassNames}\n        // Does not affect the testId of the select, but is needed to pass it to sub-components\n        data-testid={testId}\n        filterOption={filterOption}\n        formatOptionLabel={renderOptionLabel}\n        inputValue={inputValue}\n        instanceId={name}\n        isClearable={clearable}\n        isDisabled={disabled}\n        isLoading={loading}\n        isMulti={multiSelect}\n        // set menuPosition to fixed so that menu can be rendered\n        // inside Card / Modal components, menuShouldBlockScroll\n        // prevents container scroll when menu is open\n        menuPosition=\"fixed\"\n        name={name}\n        onBlur={handleBlur}\n        onChange={handleChange}\n        onFocus={handleFocus}\n        onInputChange={onInputChange}\n        options={options}\n        placeholder={placeholder}\n        value={reactSelectValue}\n        // set aria-labelledby to the label id so that the select is accessible\n        aria-labelledby={\n          label\n            ? getTriggerProps()['aria-labelledby']?.split(' ')[1]\n            : undefined\n        }\n        components={{\n          Control: ControlComponent,\n          DropdownIndicator: DropdownIndicatorComponent,\n          Input: InputComponent,\n          Option: OptionComponent,\n        }}\n      />\n      {invalid ? (\n        <div {...getHelperWrapperProps()}>\n          <div {...getErrorMessageProps()}>{errorMessage}</div>\n        </div>\n      ) : null}\n    </div>\n  );\n};\n\nexport default Select;\n","import Select from './Select';\n\nexport type { SelectProps } from './Select';\n\nexport { Select };\n\nexport default Select;\n"],"mappings":"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"}

package/dist/{Select-D_LJBu0p.js → Select-Dk_K_Q0F.js}

@@ -1,6 +1,6 @@
-import { c as createOptionValueConverter } from "./helpers-D3A5d3M1.js";
+import { c as createOptionValueConverter, r as isValueEmpty } from "./helpers-D3A5d3M1.js";
 import { n as useFormContext } from "./useFormContext-UFBqUfOr.js";
-import { t as useUniformField } from "./useUniformField-Brwxoghf.js";
+import { t as useUniformField } from "./useUniformField-C6oSAFa3.js";
 import { cn, slugify, tv, variantsToClassNames } from "@fuf-stack/pixel-utils";
 import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -69,7 +69,7 @@ const DropdownIndicatorComponent = (props) => {
 	});
 };
 /** Select component based on [HeroUI Select](https://www.heroui.com//docs/components/select) and [React-Select](https://react-select.com/home) */
-const Select = ({ className = void 0, clearable = true, filterOption = void 0, renderOptionLabel = void 0, inputValue = void 0, loading = false, multiSelect = false, name, onInputChange = void 0, options, placeholder = void 0, ...uniformFieldProps }) => {
+const Select = ({ className = void 0, clearable = true, filterOption = void 0, renderOptionLabel = void 0, inputValue = void 0, loading = false, multiSelect = false, name, onInputChange = void 0, options, placeholder = void 0, selectedOptionFallback = void 0, ...uniformFieldProps }) => {
 	const { ariaLabel, disabled, errorMessage, field: { onBlur, onChange, ref, value }, getErrorMessageProps, getHelperWrapperProps, getLabelProps, invalid, label, required, testId } = useUniformField({
 		name,
 		...uniformFieldProps
@@ -154,21 +154,42 @@ const Select = ({ className = void 0, clearable = true, filterOption = void 0, r
 		label,
 		labelPlacement: "outside"
 	});
-	const selectedOptions = multiSelect ? options.filter((option) => {
-		if (!Array.isArray(value)) return false;
-		return value.some((v) => {
-			return String(option.value) === String(v);
-		});
-	}) : options.find((option) => {
-		return String(option.value) === String(value);
-	}) ?? null;
+	const reactSelectValue = (() => {
+		const findOption = (v) => {
+			const inOptions = options.find((option) => {
+				return String(option.value) === String(v);
+			});
+			if (inOptions) return inOptions;
+			if (selectedOptionFallback) {
+				if (Array.isArray(selectedOptionFallback)) {
+					const inSelected = selectedOptionFallback.find((option) => {
+						return String(option.value) === String(v);
+					});
+					if (inSelected) return inSelected;
+				} else if (String(selectedOptionFallback.value) === String(v)) return selectedOptionFallback;
+			}
+			return {
+				isFallback: true,
+				label: String(v),
+				value: v
+			};
+		};
+		if (multiSelect) {
+			if (!Array.isArray(value) || isValueEmpty(value)) return [];
+			return value.map((v) => {
+				return findOption(v);
+			});
+		}
+		if (isValueEmpty(value)) return null;
+		return findOption(value);
+	})();
 	const handleChange = (option) => {
 		if (multiSelect) onChange(option?.map((_option) => {
 			return convertToOriginalType(_option.value);
 		}));
 		else {
 			const newValue = option?.value;
-			onChange(newValue != null ? convertToOriginalType(newValue) : newValue);
+			onChange(newValue != null ? convertToOriginalType(newValue) : null);
 		}
 		const { isTouched: currentIsTouched } = getFieldState(name, testId);
 		if (!currentIsTouched) onBlur();
@@ -218,7 +239,7 @@ const Select = ({ className = void 0, clearable = true, filterOption = void 0, r
 				onInputChange,
 				options,
 				placeholder,
-				value: selectedOptions,
+				value: reactSelectValue,
 				"aria-labelledby": label ? getTriggerProps()["aria-labelledby"]?.split(" ")[1] : void 0,
 				components: {
 					Control: ControlComponent,
@@ -245,4 +266,4 @@ var Select_default = Select_default$1;
 
 //#endregion
 export { Select_default$1 as n, Select_default as t };
-//# sourceMappingURL=Select-D_LJBu0p.js.map
+//# sourceMappingURL=Select-Dk_K_Q0F.js.map

package/dist/Select-Dk_K_Q0F.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select-Dk_K_Q0F.js","names":["Select"],"sources":["../src/Select/Select.tsx","../src/Select/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ReactNode } from 'react';\nimport type { MultiValue, Props, SingleValue } from 'react-select';\n\nimport { useState } from 'react';\nimport ReactSelect, { components } from 'react-select';\n\nimport { useSelect } from '@heroui/select';\n\nimport { cn, slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { createOptionValueConverter, isValueEmpty } from '../helpers';\nimport { useFormContext } from '../hooks/useFormContext';\nimport { useUniformField } from '../hooks/useUniformField';\n\nexport const selectVariants = tv({\n  slots: {\n    base: 'group leading-normal',\n    clearIndicator:\n      'rounded-md p-1 text-foreground-500 hover:cursor-pointer hover:bg-default-200 hover:text-foreground-800',\n    control:\n      'duration-150! rounded-lg border-2 border-default-200 bg-content1 transition-background hover:border-default-400 group-data-[invalid=true]:border-danger group-data-[invalid=true]:hover:border-danger motion-reduce:transition-none',\n    control_focused: 'border-focus',\n    crossIcon: '',\n    downChevron: '',\n    dropdownIndicator:\n      'rounded-md p-1 text-foreground-500 hover:cursor-pointer hover:bg-default-200 hover:text-black',\n    group: '',\n    groupHeading: 'mb-1 ml-3 mt-2 text-sm text-foreground-500',\n    indicatorsContainer: 'gap-1 p-1',\n    indicatorSeparator: 'bg-default-300',\n    input: 'py-0.5 pl-1',\n    // see HeroUI styles for group-data condition,\n    // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/core/theme/src/components/select.ts\n    label:\n      'pointer-events-auto relative bottom-1.5 ml-1 subpixel-antialiased text-small group-data-[invalid=true]:!text-danger group-data-[required=true]:after:ml-0.5 group-data-[required=true]:after:text-danger group-data-[required=true]:after:content-[\"*\"]',\n    loadingIndicator: '',\n    loadingMessage: 'rounded-sm p-2 text-foreground-500',\n    menu: 'mt-2 rounded-xl border border-default-200 bg-content1 p-1 shadow-lg',\n    menuList: '',\n    // ensure menu has same z-index as modal so it is visible when rendered in modal\n    // see: https://github.com/heroui-inc/heroui/blob/main/packages/core/theme/src/components/modal.ts (see z-50)\n    menuPortal: 'z-50!',\n    multiValue: 'items-center gap-1.5 rounded bg-default-100 py-0.5 pl-2 pr-1',\n    multiValueContainer: '',\n    multiValueLabel: 'py-0.5 leading-6',\n    multiValueRemove:\n      'rounded text-default-500 hover:cursor-pointer hover:border-default-300 hover:text-default-800',\n    noOptionsMessage: 'rounded-sm p-2 text-foreground-500',\n    option_focused: 'bg-default-100 active:bg-default-200',\n    option_selected: 'bg-default-300',\n    option: 'rounded px-3 py-2 hover:cursor-pointer',\n    placeholder: 'ml-1 py-0.5 pl-1 text-sm text-foreground-500',\n    selectContainer: '',\n    singleValue: 'ml-1! leading-7!',\n    valueContainer: 'gap-1 p-1',\n  },\n});\n\ninterface SelectOption {\n  /**\n   * True when option was auto-generated because the value wasn't found in options.\n   * Use in renderOptionLabel to render a component that fetches the real label.\n   */\n  isFallback?: boolean;\n  /** option label */\n  label?: ReactNode;\n  /** option value */\n  value: string | number;\n}\n\ntype VariantProps = TVProps<typeof selectVariants>;\ntype ClassName = TVClassName<typeof selectVariants>;\n\nexport interface SelectProps extends VariantProps {\n  /** Custom aria-label for accessibility. If not provided, falls back to field name when no visible label exists */\n  ariaLabel?: string;\n  /** CSS class name */\n  className?: ClassName; // string;\n  /** Determine if the  */\n  clearable?: boolean;\n  /** Set the select to disabled state. */\n  disabled?: boolean;\n  /** Filter Select Options */\n  filterOption?:\n    | undefined\n    | ((option?: SelectOption, inputValue?: string) => boolean);\n  /** Format the label of the option */\n  renderOptionLabel?: undefined | Props['formatOptionLabel'];\n  /** The value of the search input */\n  inputValue?: string;\n  /** Label that should be associated with the select. */\n  label?: ReactNode;\n  /** Set the select to a loading state. */\n  loading?: boolean;\n  /** switch between single and multi select mode. */\n  multiSelect?: boolean;\n  /** The name for the Select component, used by react-hook-form */\n  name: string;\n  /** Placeholder that is displayed when nothing is selected */\n  placeholder?: string;\n  /** The options for the Select component */\n  options: SelectOption[];\n  /** Handle change events on the input */\n  onInputChange?: Props['onInputChange'];\n  /**\n   * Fallback option(s) for async selects when value isn't in current options.\n   * Use when the selected value may not be in the options list (e.g., after\n   * search results change). Used only if value not found in options.\n   * For single select: pass the option object or undefined\n   * For multi-select: pass an array of option objects\n   */\n  selectedOptionFallback?: SelectOption | SelectOption[];\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n}\n\nconst InputComponent: typeof components.Input = (props) => {\n  // @ts-expect-error data-testid is not a default prop\n  // eslint-disable-next-line react/destructuring-assignment\n  const testId = `${props.selectProps['data-testid']}`;\n\n  return <components.Input data-testid={testId} {...props} />;\n};\n\nconst ControlComponent: typeof components.Control = (props) => {\n  // @ts-expect-error data-testid is not a default prop\n  // eslint-disable-next-line react/destructuring-assignment\n  const testId = `${props.selectProps['data-testid']}_select`;\n  return (\n    <div data-testid={testId}>\n      {}\n      <components.Control {...props} />\n    </div>\n  );\n};\n\nconst OptionComponent: typeof components.Option = (props) => {\n  // @ts-expect-error data-testid is not a default prop\n  // eslint-disable-next-line react/destructuring-assignment\n  const testId = `${props.selectProps['data-testid']}_select_option_${slugify(String(props?.data?.testId ?? props?.data?.value), { replaceDots: true })}`;\n  return (\n    <div data-testid={testId}>\n      {}\n      <components.Option {...props} />\n    </div>\n  );\n};\n\nconst DropdownIndicatorComponent: typeof components.DropdownIndicator = (\n  props,\n) => {\n  // @ts-expect-error data-testid is not a default prop\n\n  const testId = props?.selectProps['data-testid'] as string;\n  return (\n    <div data-testid={`${testId}_select_dropdown`}>\n      {}\n      <components.DropdownIndicator {...props} />\n    </div>\n  );\n};\n\n/** Select component based on [HeroUI Select](https://www.heroui.com//docs/components/select) and [React-Select](https://react-select.com/home) */\nconst Select = ({\n  className = undefined,\n  clearable = true,\n  filterOption = undefined,\n  renderOptionLabel = undefined,\n  inputValue = undefined,\n  loading = false,\n  multiSelect = false,\n  name,\n  onInputChange = undefined,\n  options,\n  placeholder = undefined,\n  selectedOptionFallback = undefined,\n  ...uniformFieldProps\n}: SelectProps) => {\n  const {\n    ariaLabel,\n    disabled,\n    errorMessage,\n    field: { onBlur, onChange, ref, value },\n    getErrorMessageProps,\n    getHelperWrapperProps,\n    getLabelProps,\n    invalid,\n    label,\n    required,\n    testId,\n  } = useUniformField({\n    name,\n    ...uniformFieldProps,\n  });\n\n  // Get getFieldState to check isTouched in onChange callback\n  const { getFieldState } = useFormContext();\n\n  // Track if the select is focused\n  const [isFocused, setIsFocused] = useState(false);\n\n  // Create converter to preserve number types for option values\n  const { convertToOriginalType } = createOptionValueConverter(options);\n\n  // classNames from slots\n  const variants = selectVariants();\n  const classNames = variantsToClassNames(variants, className, 'base');\n\n  // React-select classNames configuration\n  const reactSelectClassNames = {\n    clearIndicator: () => {\n      return classNames.clearIndicator;\n    },\n    control: () => {\n      return cn(classNames.control, {\n        [classNames.control_focused]: isFocused && !invalid,\n      });\n    },\n    dropdownIndicator: () => {\n      return classNames.dropdownIndicator;\n    },\n    groupHeading: () => {\n      return classNames.groupHeading;\n    },\n    indicatorSeparator: () => {\n      return classNames.indicatorSeparator;\n    },\n    indicatorsContainer: () => {\n      return classNames.indicatorsContainer;\n    },\n    input: () => {\n      return classNames.input;\n    },\n    loadingIndicator: () => {\n      return classNames.loadingIndicator;\n    },\n    loadingMessage: () => {\n      return classNames.loadingMessage;\n    },\n    menu: () => {\n      return classNames.menu;\n    },\n    menuList: () => {\n      return classNames.menuList;\n    },\n    menuPortal: () => {\n      return classNames.menuPortal;\n    },\n    multiValue: () => {\n      return classNames.multiValue;\n    },\n    multiValueLabel: () => {\n      return cn(classNames.multiValueLabel, `${getValueProps().className}`);\n    },\n    multiValueRemove: () => {\n      return classNames.multiValueRemove;\n    },\n    noOptionsMessage: () => {\n      return classNames.noOptionsMessage;\n    },\n    option: ({\n      isFocused: optionIsFocused,\n      isSelected: optionIsSelected,\n    }: {\n      isFocused: boolean;\n      isSelected: boolean;\n    }) => {\n      return cn(classNames.option, {\n        [classNames.option_focused]: optionIsFocused,\n        [classNames.option_selected]: optionIsSelected,\n      });\n    },\n    placeholder: () => {\n      return classNames.placeholder;\n    },\n    singleValue: () => {\n      return cn(classNames.singleValue, `${getValueProps().className}`);\n    },\n    valueContainer: () => {\n      return classNames.valueContainer;\n    },\n  };\n\n  const { getBaseProps, getTriggerProps, getValueProps } = useSelect({\n    children: [],\n    classNames,\n    errorMessage,\n    isDisabled: disabled,\n    isInvalid: invalid,\n    isLoading: loading,\n    isRequired: required,\n    label,\n    labelPlacement: 'outside',\n  });\n\n  // Compute selected option(s) for react-select\n  //\n  // Priority for finding options:\n  // 1. Look in current options list\n  // 2. Use selectedOptionFallback prop (for async selects with pre-fetched data)\n  // 3. Create fallback with value as label\n  //\n  // Handles edge cases:\n  // - Compares as strings to support both string and number values\n  // - Returns null for empty single-select (required by react-select to clear)\n  // - Creates fallback options when value exists but isn't in options list\n  //   (common with async selects where options change after selection)\n  const reactSelectValue = (() => {\n    // Helper to find option by value\n    const findOption = (v: string | number): SelectOption => {\n      // First, look in options list\n      const inOptions = options.find((option) => {\n        return String(option.value) === String(v);\n      });\n      if (inOptions) {\n        return inOptions;\n      }\n\n      // Second, look in selectedOptionFallback prop (for async selects)\n      if (selectedOptionFallback) {\n        if (Array.isArray(selectedOptionFallback)) {\n          const inSelected = selectedOptionFallback.find((option) => {\n            return String(option.value) === String(v);\n          });\n          if (inSelected) {\n            return inSelected;\n          }\n        } else if (String(selectedOptionFallback.value) === String(v)) {\n          return selectedOptionFallback;\n        }\n      }\n\n      // Fallback: create option with value as label, marked as fallback\n      return { isFallback: true, label: String(v), value: v };\n    };\n\n    if (multiSelect) {\n      if (!Array.isArray(value) || isValueEmpty(value)) {\n        return [];\n      }\n      return value.map((v) => {\n        return findOption(v);\n      });\n    }\n\n    // Single select - use isValueEmpty to handle marker strings (__NULL__, etc.)\n    if (isValueEmpty(value)) {\n      return null;\n    }\n    return findOption(value);\n  })();\n\n  // Handle selection change\n  const handleChange = (\n    option: MultiValue<SelectOption> | SingleValue<SelectOption>,\n  ) => {\n    if (multiSelect) {\n      onChange(\n        (option as SelectOption[])?.map((_option) => {\n          return convertToOriginalType(_option.value);\n        }),\n      );\n    } else {\n      const newValue = (option as SelectOption)?.value;\n      // Pass null explicitly when clearing (not undefined)\n      onChange(newValue != null ? convertToOriginalType(newValue) : null);\n    }\n    // Mark field as touched immediately when a selection is made if not already touched\n    // This ensures validation errors show right away (isTouched becomes true)\n    // For Select components, selecting an option is a complete user action\n    // (unlike text inputs where typing is ongoing), so we mark as touched immediately\n    const { isTouched: currentIsTouched } = getFieldState(name, testId);\n    if (!currentIsTouched) {\n      onBlur();\n    }\n  };\n\n  // Handle blur event\n  const handleBlur = () => {\n    setIsFocused(false);\n    onBlur();\n  };\n\n  // Handle focus event\n  const handleFocus = () => {\n    setIsFocused(true);\n  };\n\n  return (\n    <div\n      {...getBaseProps()}\n      className={cn(classNames.base)}\n      // see HeroUI styles for group-data condition (data-invalid),\n      // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/components/select/src/use-select.ts\n      data-required={required}\n      data-testid={`${testId}_wrapper`}\n    >\n      {label ? (\n        <label\n          className={classNames.label}\n          data-slot=\"label\"\n          htmlFor={`react-select-${name}-input`}\n          id={getLabelProps().id}\n        >\n          {label}\n        </label>\n      ) : null}\n      <ReactSelect\n        ref={ref}\n        menuShouldBlockScroll\n        unstyled\n        aria-errormessage=\"\"\n        aria-invalid={invalid}\n        // set aria-labelledby to the label id so that the select is accessible\n        aria-label={ariaLabel}\n        classNames={reactSelectClassNames}\n        // Does not affect the testId of the select, but is needed to pass it to sub-components\n        data-testid={testId}\n        filterOption={filterOption}\n        formatOptionLabel={renderOptionLabel}\n        inputValue={inputValue}\n        instanceId={name}\n        isClearable={clearable}\n        isDisabled={disabled}\n        isLoading={loading}\n        isMulti={multiSelect}\n        // set menuPosition to fixed so that menu can be rendered\n        // inside Card / Modal components, menuShouldBlockScroll\n        // prevents container scroll when menu is open\n        menuPosition=\"fixed\"\n        name={name}\n        onBlur={handleBlur}\n        onChange={handleChange}\n        onFocus={handleFocus}\n        onInputChange={onInputChange}\n        options={options}\n        placeholder={placeholder}\n        value={reactSelectValue}\n        // set aria-labelledby to the label id so that the select is accessible\n        aria-labelledby={\n          label\n            ? getTriggerProps()['aria-labelledby']?.split(' ')[1]\n            : undefined\n        }\n        components={{\n          Control: ControlComponent,\n          DropdownIndicator: DropdownIndicatorComponent,\n          Input: InputComponent,\n          Option: OptionComponent,\n        }}\n      />\n      {invalid ? (\n        <div {...getHelperWrapperProps()}>\n          <div {...getErrorMessageProps()}>{errorMessage}</div>\n        </div>\n      ) : null}\n    </div>\n  );\n};\n\nexport default Select;\n","import Select from './Select';\n\nexport type { SelectProps } from './Select';\n\nexport { Select };\n\nexport default Select;\n"],"mappings":"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"}

package/dist/Slider/index.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const require_Slider = require('../Slider-D-bfkzoh.cjs');
+const require_Slider = require('../Slider-ChGkOSJJ.cjs');
 
 exports.Slider = require_Slider.Slider_default$1;
 exports.default = require_Slider.Slider_default;

package/dist/Slider/index.d.cts

@@ -1,2 +1,2 @@
-import { n as SliderProps, t as Slider } from "../index-nE7tTo2d.cjs";
+import { n as SliderProps, t as Slider } from "../index-BKCiuwim.cjs";
 export { Slider, Slider as default, SliderProps };

package/dist/Slider/index.d.ts

@@ -1,2 +1,2 @@
-import { n as SliderProps, t as Slider } from "../index-BHklv3dW.js";
+import { n as SliderProps, t as Slider } from "../index-CdXOAPMb.js";
 export { Slider, Slider as default, SliderProps };

package/dist/Slider/index.js

@@ -1,3 +1,3 @@
-import { n as Slider_default, t as Slider_default$1 } from "../Slider-CNlNpxV-.js";
+import { n as Slider_default, t as Slider_default$1 } from "../Slider-DdF0ZBzn.js";
 
 export { Slider_default as Slider, Slider_default$1 as default };

package/dist/{Slider-D-bfkzoh.cjs → Slider-ChGkOSJJ.cjs}

@@ -1,5 +1,5 @@
 const require_FormContext = require('./FormContext-CeFKQmVH.cjs');
-const require_useUniformField = require('./useUniformField-BJTRfqCQ.cjs');
+const require_useUniformField = require('./useUniformField-Dd3AnpgE.cjs');
 let _fuf_stack_pixel_utils = require("@fuf-stack/pixel-utils");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -120,4 +120,4 @@ Object.defineProperty(exports, 'Slider_default$1', {
     return Slider_default$1;
   }
 });
-//# sourceMappingURL=Slider-D-bfkzoh.cjs.map
+//# sourceMappingURL=Slider-ChGkOSJJ.cjs.map