pentatrion-design 1.2.4 → 1.2.5

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+## 1.2.5
+
+### Patch Changes
+
+- 1f68b5f: more generic fieldname typing
+
 ## 1.2.4
 
 ### Patch Changes

package/dist/components/fields/checkbox/index.d.mts

@@ -27,14 +27,14 @@ declare function CheckboxButton({ color, disabled, width, size, icon, showInput,
 //#endregion
 //#region src/components/fields/checkbox/CheckboxField.d.ts
 interface Props$1 extends Omit<FieldProps, "children" | "group"> {
-  name: FieldName<boolean>;
+  name: FieldName<boolean | undefined>;
   checkboxLabel: string;
 }
 declare function CheckboxField({ name, checkboxLabel, id: forcedId, ...rest }: Props$1): import("react").JSX.Element;
 //#endregion
 //#region src/components/fields/checkbox/CheckboxesField.d.ts
 interface Props extends Omit<FieldProps, "children" | "group"> {
-  name: FieldName<string[]>;
+  name: FieldName<(string | number)[] | null | undefined>;
   options: SelectOption[];
 }
 declare function CheckboxesField({ name, options, id: forcedId, ...rest }: Props): import("react").JSX.Element;

package/dist/components/fields/checkbox/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["ComponentProps","RefObject","ThemeColor","clsx","ButtonProps","buttonVariants","CheckboxProps","indeterminate","disabled","color","ref","HTMLInputElement","Checkbox","t0","$","_c","children","className","rest","t1","t2","undefined","t3","Symbol","for","t4","t5","t6","t7","t8","CheckboxButtonProps","Omit","variant","size","width","icon","showInput","CheckboxButton","t9","t10","FieldName","useField","Field","FieldProps","Checkbox","Props","Omit","name","checkboxLabel","CheckboxField","t0","$","_c","forcedId","rest","id","field","t1","defaultChecked","t2","errors","FieldName","useField","Field","FieldProps","SelectOption","Checkbox","Props","Omit","name","options","CheckboxesField","t0","$","_c","forcedId","rest","id","field","t1","fieldErrors","Object","values","flat","itemErrors","errors","length","undefined","t2","defaultOptions","t3","option","value","includes","label","map","t4"],"sources":["../../../../src/components/fields/checkbox/Checkbox.tsx","../../../../src/components/fields/checkbox/CheckboxField.tsx","../../../../src/components/fields/checkbox/CheckboxesField.tsx"],"sourcesContent":["import { ComponentProps, RefObject } from \"react\";\nimport { type ThemeColor } from \"../../../types\";\nimport clsx from \"clsx\";\nimport { ButtonProps, buttonVariants } from \"../../button\";\n\nexport interface CheckboxProps extends ComponentProps<\"input\"> {\n  indeterminate?: boolean;\n  disabled?: boolean;\n  color?: ThemeColor;\n  ref?: RefObject<HTMLInputElement>;\n}\n\nexport function Checkbox({\n  color = \"yellow\",\n  indeterminate,\n  disabled = false,\n  className,\n  children,\n  ref,\n  ...rest\n}: CheckboxProps) {\n  return (\n    <label aria-disabled={disabled} className={clsx(\"flex cursor-pointer items-center\")}>\n      <input\n        data-color={color}\n        ref={ref}\n        type=\"checkbox\"\n        className={clsx(\n          \"p8n-input-checkbox\",\n          \"my-1 mr-2 inline-block h-6 w-6 shrink-0 cursor-pointer appearance-none rounded-sm bg-origin-border p-0 outline-offset-0 select-none\",\n          indeterminate && \"indeterminate\",\n          className,\n        )}\n        {...(disabled ? { disabled } : {})}\n        {...rest}\n      />\n      {children}\n    </label>\n  );\n}\n\ninterface CheckboxButtonProps extends Omit<ComponentProps<\"input\">, \"size\"> {\n  disabled?: boolean;\n  color?: ButtonProps[\"color\"];\n  variant?: ButtonProps[\"variant\"];\n  size?: ButtonProps[\"size\"];\n  width?: ButtonProps[\"width\"];\n  icon?: boolean;\n  showInput?: boolean;\n  ref?: RefObject<HTMLInputElement>;\n}\nexport function CheckboxButton({\n  color = \"yellow\",\n  disabled = false,\n  width = \"fit\",\n  size,\n  icon,\n  showInput,\n  variant,\n  className,\n  children,\n  ref,\n  ...rest\n}: CheckboxButtonProps) {\n  return (\n    <label\n      aria-disabled={disabled}\n      className={clsx(\n        className,\n        showInput && \"pr-2 pl-1\",\n        buttonVariants({ variant, size, icon: icon || showInput, width }),\n      )}\n      data-color={color}\n    >\n      <input\n        ref={ref}\n        type=\"checkbox\"\n        className={clsx(\n          showInput\n            ? \"p8n-input-checkbox my-1 mr-2 inline-block h-6 w-6 shrink-0 cursor-pointer appearance-none rounded-2xl bg-origin-border p-0 outline-offset-0 select-none\"\n            : \"h-0 w-0 -translate-x-[9999px] overflow-hidden\",\n          //indeterminate && \"indeterminate\",\n          className,\n        )}\n        {...(disabled ? { disabled } : {})}\n        {...rest}\n      />\n      {children}\n    </label>\n  );\n}\n","import { FieldName, useField } from \"@conform-to/react/future\";\nimport { Field, FieldProps } from \"../field/Field\";\nimport { Checkbox } from \"./Checkbox\";\n\ninterface Props extends Omit<FieldProps, \"children\" | \"group\"> {\n  name: FieldName<boolean>;\n  checkboxLabel: string;\n}\n\nexport function CheckboxField({ name, checkboxLabel, id: forcedId, ...rest }: Props) {\n  const field = useField(name);\n  const id = forcedId ?? field.id;\n\n  return (\n    <Field id={id} errors={field.errors} data-testid={name} {...rest}>\n      <Checkbox name={field.name} defaultChecked={field.defaultChecked}>\n        {checkboxLabel}\n      </Checkbox>\n    </Field>\n  );\n}\n","import { FieldName, useField } from \"@conform-to/react/future\";\nimport { Field, FieldProps } from \"../field/Field\";\nimport { SelectOption } from \"../select/types\";\nimport { Checkbox } from \"./Checkbox\";\n\ninterface Props extends Omit<FieldProps, \"children\" | \"group\"> {\n  name: FieldName<string[]>;\n  options: SelectOption[];\n}\n\nexport function CheckboxesField({ name, options, id: forcedId, ...rest }: Props) {\n  const field = useField(name);\n  const id = forcedId ?? field.id;\n  const itemErrors = Object.values(field.fieldErrors).flat();\n  const errors = field.errors ?? (itemErrors.length > 0 ? itemErrors : undefined);\n\n  return (\n    <Field id={id} group errors={errors} data-testid={name} {...rest}>\n      <div className=\"sm:grid-cols-repeat-fill-160 grid grid-cols-2 gap-x-2 lg:gap-x-4\">\n        {options.map((option) => (\n          <Checkbox\n            key={option.value}\n            name={name}\n            value={option.value}\n            defaultChecked={field.defaultOptions?.includes(option.value)}\n          >\n            {option.label}\n          </Checkbox>\n        ))}\n      </div>\n    </Field>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":["ComponentProps","RefObject","ThemeColor","clsx","ButtonProps","buttonVariants","CheckboxProps","indeterminate","disabled","color","ref","HTMLInputElement","Checkbox","t0","$","_c","children","className","rest","t1","t2","undefined","t3","Symbol","for","t4","t5","t6","t7","t8","CheckboxButtonProps","Omit","variant","size","width","icon","showInput","CheckboxButton","t9","t10","FieldName","useField","Field","FieldProps","Checkbox","Props","Omit","name","checkboxLabel","CheckboxField","t0","$","_c","forcedId","rest","id","field","t1","defaultChecked","t2","errors","FieldName","useField","Field","FieldProps","SelectOption","Checkbox","Props","Omit","name","options","CheckboxesField","t0","$","_c","forcedId","rest","id","field","t1","fieldErrors","Object","values","flat","itemErrors","errors","length","undefined","t2","defaultOptions","t3","option","value","includes","label","map","t4"],"sources":["../../../../src/components/fields/checkbox/Checkbox.tsx","../../../../src/components/fields/checkbox/CheckboxField.tsx","../../../../src/components/fields/checkbox/CheckboxesField.tsx"],"sourcesContent":["import { ComponentProps, RefObject } from \"react\";\nimport { type ThemeColor } from \"../../../types\";\nimport clsx from \"clsx\";\nimport { ButtonProps, buttonVariants } from \"../../button\";\n\nexport interface CheckboxProps extends ComponentProps<\"input\"> {\n  indeterminate?: boolean;\n  disabled?: boolean;\n  color?: ThemeColor;\n  ref?: RefObject<HTMLInputElement>;\n}\n\nexport function Checkbox({\n  color = \"yellow\",\n  indeterminate,\n  disabled = false,\n  className,\n  children,\n  ref,\n  ...rest\n}: CheckboxProps) {\n  return (\n    <label aria-disabled={disabled} className={clsx(\"flex cursor-pointer items-center\")}>\n      <input\n        data-color={color}\n        ref={ref}\n        type=\"checkbox\"\n        className={clsx(\n          \"p8n-input-checkbox\",\n          \"my-1 mr-2 inline-block h-6 w-6 shrink-0 cursor-pointer appearance-none rounded-sm bg-origin-border p-0 outline-offset-0 select-none\",\n          indeterminate && \"indeterminate\",\n          className,\n        )}\n        {...(disabled ? { disabled } : {})}\n        {...rest}\n      />\n      {children}\n    </label>\n  );\n}\n\ninterface CheckboxButtonProps extends Omit<ComponentProps<\"input\">, \"size\"> {\n  disabled?: boolean;\n  color?: ButtonProps[\"color\"];\n  variant?: ButtonProps[\"variant\"];\n  size?: ButtonProps[\"size\"];\n  width?: ButtonProps[\"width\"];\n  icon?: boolean;\n  showInput?: boolean;\n  ref?: RefObject<HTMLInputElement>;\n}\nexport function CheckboxButton({\n  color = \"yellow\",\n  disabled = false,\n  width = \"fit\",\n  size,\n  icon,\n  showInput,\n  variant,\n  className,\n  children,\n  ref,\n  ...rest\n}: CheckboxButtonProps) {\n  return (\n    <label\n      aria-disabled={disabled}\n      className={clsx(\n        className,\n        showInput && \"pr-2 pl-1\",\n        buttonVariants({ variant, size, icon: icon || showInput, width }),\n      )}\n      data-color={color}\n    >\n      <input\n        ref={ref}\n        type=\"checkbox\"\n        className={clsx(\n          showInput\n            ? \"p8n-input-checkbox my-1 mr-2 inline-block h-6 w-6 shrink-0 cursor-pointer appearance-none rounded-2xl bg-origin-border p-0 outline-offset-0 select-none\"\n            : \"h-0 w-0 -translate-x-[9999px] overflow-hidden\",\n          //indeterminate && \"indeterminate\",\n          className,\n        )}\n        {...(disabled ? { disabled } : {})}\n        {...rest}\n      />\n      {children}\n    </label>\n  );\n}\n","import { FieldName, useField } from \"@conform-to/react/future\";\nimport { Field, FieldProps } from \"../field/Field\";\nimport { Checkbox } from \"./Checkbox\";\n\ninterface Props extends Omit<FieldProps, \"children\" | \"group\"> {\n  name: FieldName<boolean | undefined>;\n  checkboxLabel: string;\n}\n\nexport function CheckboxField({ name, checkboxLabel, id: forcedId, ...rest }: Props) {\n  const field = useField(name);\n  const id = forcedId ?? field.id;\n\n  return (\n    <Field id={id} errors={field.errors} data-testid={name} {...rest}>\n      <Checkbox name={field.name} defaultChecked={field.defaultChecked}>\n        {checkboxLabel}\n      </Checkbox>\n    </Field>\n  );\n}\n","import { FieldName, useField } from \"@conform-to/react/future\";\nimport { Field, FieldProps } from \"../field/Field\";\nimport { SelectOption } from \"../select/types\";\nimport { Checkbox } from \"./Checkbox\";\n\ninterface Props extends Omit<FieldProps, \"children\" | \"group\"> {\n  name: FieldName<(string | number)[] | null | undefined>;\n  options: SelectOption[];\n}\n\nexport function CheckboxesField({ name, options, id: forcedId, ...rest }: Props) {\n  const field = useField(name);\n  const id = forcedId ?? field.id;\n  const itemErrors = Object.values(field.fieldErrors).flat();\n  const errors = field.errors ?? (itemErrors.length > 0 ? itemErrors : undefined);\n\n  return (\n    <Field id={id} group errors={errors} data-testid={name} {...rest}>\n      <div className=\"sm:grid-cols-repeat-fill-160 grid grid-cols-2 gap-x-2 lg:gap-x-4\">\n        {options.map((option) => (\n          <Checkbox\n            key={option.value}\n            name={name}\n            value={option.value}\n            defaultChecked={field.defaultOptions?.includes(option.value)}\n          >\n            {option.label}\n          </Checkbox>\n        ))}\n      </div>\n    </Field>\n  );\n}\n"],"mappings":"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"}

package/dist/components/fields/color/index.d.mts

@@ -16,7 +16,7 @@ declare function Color({ value, withRipple, color, label, showValue, className,
 //#endregion
 //#region src/components/fields/color/ColorField.d.ts
 interface Props extends Omit<FieldProps, "errors" | "children" | "group"> {
-  name: FieldName<string>;
+  name: FieldName<string | null | undefined>;
 }
 declare function ColorField({ name, id: forcedId, ...rest }: Props): import("react").JSX.Element;
 //#endregion

package/dist/components/fields/color/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["ComponentProps","RefObject","useImperativeHandle","useRef","ThemeColor","clsx","useRipple","ColorProps","withRipple","value","color","label","showValue","className","ref","HTMLButtonElement","Color","t0","$","_c","rest","t1","t2","t3","undefined","valueToShow","buttonRef","t4","Symbol","for","current","ripples","t5","t6","t7","t8","backgroundColor","t9","t10","t11","t12","t13","rawColors","colorByGroups","Object","entries","filter","name","colorGroup","includes","map","colors","useField","useControl","FieldName","Field","FieldProps","Color","Modal","ModalContent","ModalDescription","ModalFooter","ModalHeader","useState","clsx","Button","colorByGroups","Props","Omit","name","ColorField","id","forcedId","rest","field","control","defaultValue","tempValue","setTempValue","handleSelectAndSubmit","selectedValue","change","handleSubmit","handleSubmitInherit","register","errors","value","undefined","modalKeepOpen","map","colors","colorNumber","colorCode","parseInt","backgroundColor"],"sources":["../../../../src/components/fields/color/Color.tsx","../../../../src/lib/color.ts","../../../../src/components/fields/color/ColorField.tsx"],"sourcesContent":["import { ComponentProps, RefObject, useImperativeHandle, useRef } from \"react\";\nimport type { ThemeColor } from \"../../../types\";\nimport clsx from \"clsx\";\nimport { useRipple } from \"../../../hooks\";\n\nexport interface ColorProps extends ComponentProps<\"button\"> {\n  withRipple?: boolean;\n\n  value?: string;\n  color?: ThemeColor;\n  label?: string;\n  showValue?: boolean;\n  className?: string;\n  ref?: RefObject<HTMLButtonElement>;\n}\n\nexport function Color({\n  value,\n  withRipple = true,\n  color = \"yellow\",\n  label,\n  showValue = false,\n  className,\n  ref,\n  ...rest\n}: ColorProps) {\n  const valueToShow = label ?? (showValue ? value : null);\n\n  const buttonRef = useRef<HTMLButtonElement>(null!);\n\n  useImperativeHandle<HTMLButtonElement | null, HTMLButtonElement | null>(\n    ref,\n    () => buttonRef.current,\n  );\n\n  const ripples = useRipple(buttonRef);\n\n  return (\n    <button\n      ref={buttonRef}\n      data-color={color}\n      className=\"p8n-input-text group relative flex h-8 cursor-pointer overflow-clip rounded-2xl p-1 outline-offset-[-1px] active:translate-y-[1px]\"\n      {...rest}\n    >\n      {withRipple && ripples}\n      <span\n        className={clsx(\n          \"absolute inset-1 flex items-center justify-center rounded-2xl transition-transform group-hover:scale-150\",\n          valueToShow === null && \"min-w-12\",\n          className,\n        )}\n        style={{ backgroundColor: value }}\n      ></span>\n      <span\n        className={clsx(\n          \"relative flex h-full items-center justify-center px-2\",\n          valueToShow === null && \"min-w-12\",\n          className,\n        )}\n      >\n        {valueToShow}\n      </span>\n    </button>\n  );\n}\n","import rawColors from \"tailwindcss/colors\";\n\nexport const colorByGroups = Object.entries(rawColors)\n  .filter(\n    ([name, colorGroup]) =>\n      // blueGray === slate\n      // coolGray === gray\n      // neutral === trueGray\n      // stone === warmGray\n      // ski === lightBlue\n      typeof colorGroup !== \"string\" &&\n      ![\"blueGray\", \"coolGray\", \"trueGray\", \"warmGray\", \"lightBlue\"].includes(name),\n  )\n  .map(([name, colorGroup]) => ({\n    name,\n    colors: Object.entries(colorGroup) as [string, string][],\n  }));\n","import { useField, useControl, type FieldName } from \"@conform-to/react/future\";\nimport { Field, type FieldProps } from \"../field/Field\";\nimport { Color } from \"./Color\";\nimport { Modal, ModalContent, ModalDescription, ModalFooter, ModalHeader } from \"../../modal\";\nimport { useState } from \"react\";\nimport clsx from \"clsx\";\nimport { Button } from \"../../button/Button\";\nimport { colorByGroups } from \"../../../lib/color\";\n\ninterface Props extends Omit<FieldProps, \"errors\" | \"children\" | \"group\"> {\n  name: FieldName<string>;\n}\n\nexport function ColorField({ name, id: forcedId, ...rest }: Props) {\n  const field = useField(name);\n  const id = forcedId ?? field.id;\n\n  const control = useControl({\n    defaultValue: field.defaultValue,\n  });\n\n  const [tempValue, setTempValue] = useState<null | string>(null);\n\n  function handleSelectAndSubmit(selectedValue: string) {\n    control.change(selectedValue);\n    setTempValue(null);\n  }\n\n  function handleSubmit() {\n    if (tempValue) {\n      control.change(tempValue);\n    }\n    setTempValue(null);\n  }\n\n  function handleSubmitInherit() {\n    control.change(\"inherit\");\n    setTempValue(null);\n  }\n\n  return (\n    <>\n      <input\n        hidden\n        type=\"text\"\n        name={field.name}\n        autoComplete=\"off\"\n        ref={control.register}\n        defaultValue={field.defaultValue}\n      />\n      <Field id={id} errors={field.errors} data-testid={field.name} {...rest}>\n        <Color\n          type=\"button\"\n          value={control.value}\n          onClick={() => setTempValue(control.value ?? \"\")}\n          label={control.value === \"inherit\" ? \"inherit\" : undefined}\n        />\n      </Field>\n      <Modal\n        open={tempValue !== null}\n        /* There is not Modal trigger, onOpen is called only by\n         * FloatingOverlay to close the modal */\n        onOpen={(modalKeepOpen) => !modalKeepOpen && setTempValue(null)}\n      >\n        <ModalContent\n          className=\"my-4 max-h-[90vh] w-full max-w-[650px] overflow-auto\"\n          zClassName=\"z-[120]\"\n        >\n          <ModalHeader>Choose your color</ModalHeader>\n          <ModalDescription>\n            <div className=\"grid-cols-repeat-fill-50 grid gap-1 text-center text-sm\">\n              {colorByGroups.map(({ name, colors }) => (\n                <div key={name}>\n                  <div className=\"text-body-xs truncate\">{name}</div>\n                  <div className=\"grid shadow\">\n                    {colors.map(([colorNumber, colorCode]) => (\n                      <button\n                        key={colorNumber}\n                        className={clsx(\n                          \"cursor-pointer\",\n                          parseInt(colorNumber) > 600 ? \"text-white\" : \"text-black\",\n                          \"hover:z-20 hover:scale-125 hover:rounded hover:shadow active:scale-125\",\n                          tempValue === colorCode && \"outline-yellow-5 z-10 rounded outline-2\",\n                        )}\n                        style={{ backgroundColor: colorCode }}\n                        onClick={() => handleSelectAndSubmit(colorCode)}\n                      >\n                        {colorNumber}\n                      </button>\n                    ))}\n                  </div>\n                </div>\n              ))}\n            </div>\n          </ModalDescription>\n          <ModalFooter className=\"mt-2\">\n            <div className=\"flex justify-between\">\n              <Button type=\"button\" variant=\"text\" color=\"gray\" onClick={() => setTempValue(null)}>\n                Cancel\n              </Button>\n              <Button\n                icon\n                type=\"button\"\n                variant=\"outlined\"\n                color=\"gray\"\n                onClick={handleSubmitInherit}\n              >\n                <i className=\"fe-settings\"></i>\n                <span>Inherit</span>\n              </Button>\n              <Button type=\"button\" color=\"yellow\" onClick={handleSubmit}>\n                Validate\n              </Button>\n            </div>\n          </ModalFooter>\n        </ModalContent>\n      </Modal>\n    </>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":["ComponentProps","RefObject","useImperativeHandle","useRef","ThemeColor","clsx","useRipple","ColorProps","withRipple","value","color","label","showValue","className","ref","HTMLButtonElement","Color","t0","$","_c","rest","t1","t2","t3","undefined","valueToShow","buttonRef","t4","Symbol","for","current","ripples","t5","t6","t7","t8","backgroundColor","t9","t10","t11","t12","t13","rawColors","colorByGroups","Object","entries","filter","name","colorGroup","includes","map","colors","useField","useControl","FieldName","Field","FieldProps","Color","Modal","ModalContent","ModalDescription","ModalFooter","ModalHeader","useState","clsx","Button","colorByGroups","Props","Omit","name","ColorField","id","forcedId","rest","field","control","defaultValue","tempValue","setTempValue","handleSelectAndSubmit","selectedValue","change","handleSubmit","handleSubmitInherit","register","errors","value","undefined","modalKeepOpen","map","colors","colorNumber","colorCode","parseInt","backgroundColor"],"sources":["../../../../src/components/fields/color/Color.tsx","../../../../src/lib/color.ts","../../../../src/components/fields/color/ColorField.tsx"],"sourcesContent":["import { ComponentProps, RefObject, useImperativeHandle, useRef } from \"react\";\nimport type { ThemeColor } from \"../../../types\";\nimport clsx from \"clsx\";\nimport { useRipple } from \"../../../hooks\";\n\nexport interface ColorProps extends ComponentProps<\"button\"> {\n  withRipple?: boolean;\n\n  value?: string;\n  color?: ThemeColor;\n  label?: string;\n  showValue?: boolean;\n  className?: string;\n  ref?: RefObject<HTMLButtonElement>;\n}\n\nexport function Color({\n  value,\n  withRipple = true,\n  color = \"yellow\",\n  label,\n  showValue = false,\n  className,\n  ref,\n  ...rest\n}: ColorProps) {\n  const valueToShow = label ?? (showValue ? value : null);\n\n  const buttonRef = useRef<HTMLButtonElement>(null!);\n\n  useImperativeHandle<HTMLButtonElement | null, HTMLButtonElement | null>(\n    ref,\n    () => buttonRef.current,\n  );\n\n  const ripples = useRipple(buttonRef);\n\n  return (\n    <button\n      ref={buttonRef}\n      data-color={color}\n      className=\"p8n-input-text group relative flex h-8 cursor-pointer overflow-clip rounded-2xl p-1 outline-offset-[-1px] active:translate-y-[1px]\"\n      {...rest}\n    >\n      {withRipple && ripples}\n      <span\n        className={clsx(\n          \"absolute inset-1 flex items-center justify-center rounded-2xl transition-transform group-hover:scale-150\",\n          valueToShow === null && \"min-w-12\",\n          className,\n        )}\n        style={{ backgroundColor: value }}\n      ></span>\n      <span\n        className={clsx(\n          \"relative flex h-full items-center justify-center px-2\",\n          valueToShow === null && \"min-w-12\",\n          className,\n        )}\n      >\n        {valueToShow}\n      </span>\n    </button>\n  );\n}\n","import rawColors from \"tailwindcss/colors\";\n\nexport const colorByGroups = Object.entries(rawColors)\n  .filter(\n    ([name, colorGroup]) =>\n      // blueGray === slate\n      // coolGray === gray\n      // neutral === trueGray\n      // stone === warmGray\n      // ski === lightBlue\n      typeof colorGroup !== \"string\" &&\n      ![\"blueGray\", \"coolGray\", \"trueGray\", \"warmGray\", \"lightBlue\"].includes(name),\n  )\n  .map(([name, colorGroup]) => ({\n    name,\n    colors: Object.entries(colorGroup) as [string, string][],\n  }));\n","import { useField, useControl, type FieldName } from \"@conform-to/react/future\";\nimport { Field, type FieldProps } from \"../field/Field\";\nimport { Color } from \"./Color\";\nimport { Modal, ModalContent, ModalDescription, ModalFooter, ModalHeader } from \"../../modal\";\nimport { useState } from \"react\";\nimport clsx from \"clsx\";\nimport { Button } from \"../../button/Button\";\nimport { colorByGroups } from \"../../../lib/color\";\n\ninterface Props extends Omit<FieldProps, \"errors\" | \"children\" | \"group\"> {\n  name: FieldName<string | null | undefined>;\n}\n\nexport function ColorField({ name, id: forcedId, ...rest }: Props) {\n  const field = useField(name);\n  const id = forcedId ?? field.id;\n\n  const control = useControl({\n    defaultValue: field.defaultValue,\n  });\n\n  const [tempValue, setTempValue] = useState<null | string>(null);\n\n  function handleSelectAndSubmit(selectedValue: string) {\n    control.change(selectedValue);\n    setTempValue(null);\n  }\n\n  function handleSubmit() {\n    if (tempValue) {\n      control.change(tempValue);\n    }\n    setTempValue(null);\n  }\n\n  function handleSubmitInherit() {\n    control.change(\"inherit\");\n    setTempValue(null);\n  }\n\n  return (\n    <>\n      <input\n        hidden\n        type=\"text\"\n        name={field.name}\n        autoComplete=\"off\"\n        ref={control.register}\n        defaultValue={field.defaultValue}\n      />\n      <Field id={id} errors={field.errors} data-testid={field.name} {...rest}>\n        <Color\n          type=\"button\"\n          value={control.value}\n          onClick={() => setTempValue(control.value ?? \"\")}\n          label={control.value === \"inherit\" ? \"inherit\" : undefined}\n        />\n      </Field>\n      <Modal\n        open={tempValue !== null}\n        /* There is not Modal trigger, onOpen is called only by\n         * FloatingOverlay to close the modal */\n        onOpen={(modalKeepOpen) => !modalKeepOpen && setTempValue(null)}\n      >\n        <ModalContent\n          className=\"my-4 max-h-[90vh] w-full max-w-[650px] overflow-auto\"\n          zClassName=\"z-[120]\"\n        >\n          <ModalHeader>Choose your color</ModalHeader>\n          <ModalDescription>\n            <div className=\"grid-cols-repeat-fill-50 grid gap-1 text-center text-sm\">\n              {colorByGroups.map(({ name, colors }) => (\n                <div key={name}>\n                  <div className=\"text-body-xs truncate\">{name}</div>\n                  <div className=\"grid shadow\">\n                    {colors.map(([colorNumber, colorCode]) => (\n                      <button\n                        key={colorNumber}\n                        className={clsx(\n                          \"cursor-pointer\",\n                          parseInt(colorNumber) > 600 ? \"text-white\" : \"text-black\",\n                          \"hover:z-20 hover:scale-125 hover:rounded hover:shadow active:scale-125\",\n                          tempValue === colorCode && \"outline-yellow-5 z-10 rounded outline-2\",\n                        )}\n                        style={{ backgroundColor: colorCode }}\n                        onClick={() => handleSelectAndSubmit(colorCode)}\n                      >\n                        {colorNumber}\n                      </button>\n                    ))}\n                  </div>\n                </div>\n              ))}\n            </div>\n          </ModalDescription>\n          <ModalFooter className=\"mt-2\">\n            <div className=\"flex justify-between\">\n              <Button type=\"button\" variant=\"text\" color=\"gray\" onClick={() => setTempValue(null)}>\n                Cancel\n              </Button>\n              <Button\n                icon\n                type=\"button\"\n                variant=\"outlined\"\n                color=\"gray\"\n                onClick={handleSubmitInherit}\n              >\n                <i className=\"fe-settings\"></i>\n                <span>Inherit</span>\n              </Button>\n              <Button type=\"button\" color=\"yellow\" onClick={handleSubmit}>\n                Validate\n              </Button>\n            </div>\n          </ModalFooter>\n        </ModalContent>\n      </Modal>\n    </>\n  );\n}\n"],"mappings":";;;;;;;;;;;AAgBA,SAAOgB,MAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAN;CAAA,IAAAF;CAAA,IAAAG;CAAA,IAAAM;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAd;CAAA,IAAAS,EAAA,OAAAD,IAAA;EAAe,CAAA,CAAAR,OAAAD,YAAAa,IAAAX,OAAAY,IAAAX,OAAAC,WAAAW,IAAAV,WAAAC,QAAAM,QAAAH;EASTC,EAAA,KAAAD;EAAAC,EAAA,KAAAL;EAAAK,EAAA,KAAAP;EAAAO,EAAA,KAAAJ;EAAAI,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;EAAAL,EAAA,KAAAT;CAAA,OAAA;EAAAI,YAAAK,EAAA;EAAAP,QAAAO,EAAA;EAAAJ,MAAAI,EAAA;EAAAE,OAAAF,EAAA;EAAAG,KAAAH,EAAA;EAAAI,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;EAAAT,QAAAS,EAAA;CAAA;CAPX,MAAAV,aAAAa,OAAAG,KAAAA,IAAA,OAAAH;CACA,MAAAX,QAAAY,OAAAE,KAAAA,IAAA,WAAAF;CAOA,MAAAG,cAAoBd,WALpBY,OAAAC,KAAAA,IAAA,QAAAD,MAK8Bd,QAAA;CAE9B,MAAAiB,YAAkBvB,OAA0B,IAAK;CAAE,IAAAwB;CAAA,IAAAT,EAAA,OAAAU,OAAAC,IAAA,2BAAA,GAAA;EAIjDF,WAAMD,UAASI;EAAQZ,EAAA,KAAAS;CAAA,OAAAA,KAAAT,EAAA;CAFzBhB,oBACEY,KACAa,EACF;CAEA,MAAAI,UAAgBzB,UAAUoB,SAAS;CAS9B,MAAAM,KAAAxB,cAAAuB;CAIG,MAAAE,KAAAR,gBAAgB,QAAhB;CAAkC,IAAAS;CAAA,IAAAhB,EAAA,QAAAL,aAAAK,EAAA,QAAAe,IAAA;EAFzBC,KAAA7B,KACT,4GACA4B,IACApB,SACF;EAACK,EAAA,MAAAL;EAAAK,EAAA,MAAAe;EAAAf,EAAA,MAAAgB;CAAA,OAAAA,KAAAhB,EAAA;CAAA,IAAAiB;CAAA,IAAAjB,EAAA,QAAAT,OAAA;EACM0B,KAAA,EAAAC,iBAAmB3B,MAAM;EAACS,EAAA,MAAAT;EAAAS,EAAA,MAAAiB;CAAA,OAAAA,KAAAjB,EAAA;CAAA,IAAAmB;CAAA,IAAAnB,EAAA,QAAAgB,MAAAhB,EAAA,QAAAiB,IAAA;EANnCE,KAAA,oBAAA,QAAA;GACa,WAAAH;GAKJ,OAAAC;EAA0B,CAAA;EAC3BjB,EAAA,MAAAgB;EAAAhB,EAAA,MAAAiB;EAAAjB,EAAA,MAAAmB;CAAA,OAAAA,KAAAnB,EAAA;CAIJ,MAAAoB,MAAAb,gBAAgB,QAAhB;CAAkC,IAAAc;CAAA,IAAArB,EAAA,QAAAL,aAAAK,EAAA,QAAAoB,KAAA;EAFzBC,MAAAlC,KACT,yDACAiC,KACAzB,SACF;EAACK,EAAA,MAAAL;EAAAK,EAAA,MAAAoB;EAAApB,EAAA,MAAAqB;CAAA,OAAAA,MAAArB,EAAA;CAAA,IAAAsB;CAAA,IAAAtB,EAAA,QAAAqB,OAAArB,EAAA,QAAAO,aAAA;EALHe,MAAA,oBAAA,QAAA;GACa,WAAAD;GAMVd,UAAAA;EACI,CAAA;EAAAP,EAAA,MAAAqB;EAAArB,EAAA,MAAAO;EAAAP,EAAA,MAAAsB;CAAA,OAAAA,MAAAtB,EAAA;CAAA,IAAAuB;CAAA,IAAAvB,EAAA,QAAAR,SAAAQ,EAAA,QAAAE,QAAAF,EAAA,QAAAsB,OAAAtB,EAAA,QAAAc,MAAAd,EAAA,QAAAmB,IAAA;EAvBTI,MAAA,qBAAA,UAAA;GACOf,KAAAA;GACOhB,cAAAA;GACF,WAAA;GAAoI,GAC1IU;GAJN,UAAA;IAMGY;IACDK;IAQAG;GASO;;EAAAtB,EAAA,MAAAR;EAAAQ,EAAA,MAAAE;EAAAF,EAAA,MAAAsB;EAAAtB,EAAA,MAAAc;EAAAd,EAAA,MAAAmB;EAAAnB,EAAA,MAAAuB;CAAA,OAAAA,MAAAvB,EAAA;CAAA,OAxBTuB;AAwBS;;;AC5Db,MAAaE,gBAAgBC,OAAOC,QAAQH,SAAS,CAAC,CACnDI,QACE,CAACC,MAAMC,gBAMN,OAAOA,eAAe,YACtB,CAAC;CAAC;CAAY;CAAY;CAAY;CAAY;AAAW,CAAC,CAACC,SAASF,IAAI,CAChF,CAAC,CACAG,KAAK,CAACH,MAAMC,iBAAiB;CAC5BD;CACAI,QAAQP,OAAOC,QAAQG,UAAU;AACnC,EAAE;;;ACHJ,SAAgBsB,WAAW,EAAED,MAAME,IAAIC,UAAU,GAAGC,QAAe;CACjE,MAAMC,QAAQtB,SAASiB,IAAI;CAC3B,MAAME,KAAKC,YAAYE,MAAMH;CAE7B,MAAMI,UAAUtB,WAAW,EACzBuB,cAAcF,MAAME,aACtB,CAAC;CAED,MAAM,CAACC,WAAWC,gBAAgBf,SAAwB,IAAI;CAE9D,SAASgB,sBAAsBC,eAAuB;EACpDL,QAAQM,OAAOD,aAAa;EAC5BF,aAAa,IAAI;CACnB;CAEA,SAASI,eAAe;EACtB,IAAIL,WACFF,QAAQM,OAAOJ,SAAS;EAE1BC,aAAa,IAAI;CACnB;CAEA,SAASK,sBAAsB;EAC7BR,QAAQM,OAAO,SAAS;EACxBH,aAAa,IAAI;CACnB;CAEA,OACE,qBAAA,YAAA,EAAA,UAAA;EACE,oBAAC,SAAD;GACE,QAAA;GACA,MAAK;GACL,MAAMJ,MAAML;GACZ,cAAa;GACb,KAAKM,QAAQS;GACb,cAAcV,MAAME;EAAa,CAAA;EAEnC,oBAAC,OAAD;GAAWL;GAAI,QAAQG,MAAMW;GAAQ,eAAaX,MAAML;GAAM,GAAII;GAChE,UAAA,oBAAC,OAAD;IACE,MAAK;IACL,OAAOE,QAAQW;IACf,eAAeR,aAAaH,QAAQW,SAAS,EAAE;IAC/C,OAAOX,QAAQW,UAAU,YAAY,YAAYC,KAAAA;GAAU,CAAA;EAExD,CAAA;EACP,oBAAC,OAAD;GACE,MAAMV,cAAc;GAGpB,SAASW,kBAAkB,CAACA,iBAAiBV,aAAa,IAAI;GAE9D,UAAA,qBAAC,cAAD;IACE,WAAU;IACV,YAAW;IAFb,UAAA;KAIE,oBAAC,aAAD,EAAA,UAAa,oBAA8B,CAAA;KAC3C,oBAAC,kBAAD,EAAA,UACE,oBAAC,OAAD;MAAK,WAAU;MACZZ,UAAAA,cAAcuB,KAAK,EAAEpB,MAAAA,QAAMqB,aAC1B,qBAAC,OAAD,EAAA,UAAA,CACE,oBAAC,OAAD;OAAK,WAAU;OAAyBrB,UAAAA;MAAU,CAAA,GAClD,oBAAC,OAAD;OAAK,WAAU;OACZqB,UAAAA,OAAOD,KAAK,CAACE,aAAaC,eACzB,oBAAC,UAAD;QAEE,WAAW5B,KACT,kBACA6B,SAASF,WAAW,IAAI,MAAM,eAAe,cAC7C,0EACAd,cAAce,aAAa,yCAC7B;QACA,OAAO,EAAEE,iBAAiBF,UAAU;QACpC,eAAeb,sBAAsBa,SAAS;QAE7CD,UAAAA;OACK,GAXDA,WAWC,CACT;MACE,CAAA,CACF,EAAA,GAnBKtB,MAmBL,CACN;KACE,CAAA,EACW,CAAA;KAClB,oBAAC,aAAD;MAAa,WAAU;MACrB,UAAA,qBAAC,OAAD;OAAK,WAAU;OAAf,UAAA;QACE,oBAAC,QAAD;SAAQ,MAAK;SAAS,SAAQ;SAAO,OAAM;SAAO,eAAeS,aAAa,IAAI;SAAE,UAAA;QAE5E,CAAA;QACR,qBAAC,QAAD;SACE,MAAA;SACA,MAAK;SACL,SAAQ;SACR,OAAM;SACN,SAASK;SALX,UAAA,CAOE,oBAAC,KAAD,EAAG,WAAU,cAAiB,CAAA,GAC9B,oBAAC,QAAD,EAAA,UAAM,UAAa,CAAA,CACb;;QACR,oBAAC,QAAD;SAAQ,MAAK;SAAS,OAAM;SAAS,SAASD;SAAa,UAAA;QAEnD,CAAA;OACL;;KACM,CAAA;IACD;;EACT,CAAA;CACT,EAAA,CAAA;AAEJ"}

package/dist/components/fields/radio/index.d.mts

@@ -41,7 +41,7 @@ type RadioButtonIconOption = {
   label: string;
 };
 interface Props$1 extends Omit<FieldProps, "children" | "group"> {
-  name: FieldName<string>;
+  name: FieldName<string | number | null | undefined>;
   options: RadioButtonIconOption[];
   iconClassName?: string;
 }
@@ -54,7 +54,7 @@ type RadioWithLegendOption<T extends string | null = string> = {
   children: ReactNode;
 };
 interface Props extends Omit<FieldProps, "errors" | "children" | "group"> {
-  name: FieldName<string | null>;
+  name: FieldName<string | number | null | undefined>;
   options: readonly RadioWithLegendOption[];
   labelClassName?: string;
 }

package/dist/components/fields/radio/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["ComponentPropsWithRef","RefObject","ThemeColor","clsx","ButtonProps","buttonVariants","RadioProps","color","variant","width","ref","HTMLInputElement","Radio","t0","$","_c","children","className","rest","t1","t2","disabled","undefined","t3","Symbol","for","t4","t5","t6","t7","RadioWithLegendProps","label","labelClassName","RadioWithLegend","t8","t9","RadioButtonProps","Omit","size","icon","RadioButton","t10","FieldName","useField","Field","FieldProps","SelectOption","clsx","buttonGroupVariants","Radio","Props","Omit","name","options","asButton","direction","RadiosField","t0","$","_c","className","forcedId","rest","id","field","t1","errors","t2","t3","t4","defaultValue","t5","option","value","label","map","t6","FieldName","useField","Field","FieldProps","RadioButton","clsx","buttonGroupVariants","RadioButtonIconOption","value","icon","label","Props","Omit","name","options","iconClassName","RadiosButtonIconField","t0","$","_c","forcedId","rest","id","field","t1","errors","t2","t3","Symbol","for","t4","defaultValue","t5","option","map","t6","useField","FieldName","Field","FieldProps","RadioWithLegend","clsx","ReactNode","RadioWithLegendOption","label","value","T","children","Props","Omit","name","options","labelClassName","RadiosWithLegendField","t0","$","_c","className","forcedId","rest","id","field","t1","errors","t2","t3","t4","defaultValue","t5","option","map","t6"],"sources":["../../../../src/components/fields/radio/Radio.tsx","../../../../src/components/fields/radio/RadiosField.tsx","../../../../src/components/fields/radio/RadiosButtonIconField.tsx","../../../../src/components/fields/radio/RadioWithLegendField.tsx"],"sourcesContent":["import { ComponentPropsWithRef, RefObject } from \"react\";\nimport { type ThemeColor } from \"../../../types\";\nimport clsx from \"clsx\";\nimport { ButtonProps, buttonVariants } from \"../../button\";\n\nexport interface RadioProps extends ComponentPropsWithRef<\"input\"> {\n  color?: ThemeColor;\n  variant?: \"contained\" | \"light\" | \"outlined\" | \"text\" | \"ghost\";\n  width?: \"fit\" | \"full\" | \"custom\";\n  ref?: RefObject<HTMLInputElement>;\n}\n\nexport function Radio({\n  disabled = false,\n  color = \"yellow\",\n  children,\n  className,\n  ref,\n  ...rest\n}: RadioProps) {\n  return (\n    <label aria-disabled={disabled} className={clsx(\"flex cursor-pointer items-center\")}>\n      <input\n        data-color={color}\n        ref={ref}\n        type=\"radio\"\n        className={clsx(\n          \"p8n-input-radio\",\n          \"my-1 mr-2 inline-block h-6 w-6 shrink-0 cursor-pointer appearance-none rounded-full bg-origin-border p-0 outline-offset-[-1px] select-none\",\n          className,\n        )}\n        {...(disabled ? { disabled } : {})}\n        {...rest}\n      />\n      {children}\n    </label>\n  );\n}\n\nexport interface RadioWithLegendProps extends RadioProps {\n  label: string;\n  labelClassName?: string;\n}\n\nexport function RadioWithLegend({\n  disabled = false,\n  color = \"yellow\",\n  children,\n  label,\n  labelClassName,\n  className,\n  ref,\n  ...rest\n}: RadioWithLegendProps) {\n  /**\n   * Add [data-radio=\"legend\"] into parent of children\n   */\n  return (\n    <label aria-disabled={disabled} className={clsx(\"flex cursor-pointer flex-col\")}>\n      {children}\n      <span className=\"flex items-center\">\n        <input\n          data-color={color}\n          ref={ref}\n          type=\"radio\"\n          className={clsx(\n            \"p8n-input-radio\",\n            \"my-1 mr-2 inline-block h-6 w-6 shrink-0 cursor-pointer appearance-none rounded-full bg-origin-border p-0 outline-offset-[-1px] select-none\",\n            className,\n          )}\n          {...(disabled ? { disabled } : {})}\n          {...rest}\n        />\n        <span className={labelClassName}>{label}</span>\n      </span>\n    </label>\n  );\n}\n\nexport interface RadioButtonProps extends Omit<RadioProps, \"size\" | \"color\"> {\n  color?: ButtonProps[\"color\"];\n  size?: \"small\" | \"medium\" | \"large\" | \"custom\" | \"input\";\n  icon?: boolean;\n}\nexport function RadioButton({\n  disabled = false,\n  color = \"yellow\",\n  children,\n  className,\n  variant = \"light\",\n  width = \"fit\",\n  size = \"medium\",\n  icon = false,\n\n  ref,\n  ...rest\n}: RadioButtonProps) {\n  return (\n    <label\n      aria-disabled={disabled}\n      className={clsx(className, buttonVariants({ variant, width, size, icon }))}\n      data-color={color}\n    >\n      <input\n        ref={ref}\n        type=\"radio\"\n        className=\"h-0 w-0 -translate-x-[9999px] overflow-hidden\"\n        {...(disabled ? { disabled } : {})}\n        {...rest}\n      />\n      {children}\n    </label>\n  );\n}\n","import { FieldName, useField } from \"@conform-to/react/future\";\nimport { Field, FieldProps } from \"../field/Field\";\nimport { SelectOption } from \"../select/types\";\nimport clsx from \"clsx\";\nimport { buttonGroupVariants } from \"../../button\";\nimport { Radio } from \"./Radio\";\n\ninterface Props extends Omit<FieldProps, \"children\" | \"group\"> {\n  name: FieldName<string | number | undefined | null>;\n  options: readonly SelectOption[];\n  asButton?: boolean;\n  direction?: \"horizontal\" | \"vertical\";\n}\n\nexport function RadiosField({\n  name,\n  options,\n  className,\n  asButton,\n  direction,\n  id: forcedId,\n  ...rest\n}: Props) {\n  const field = useField(name);\n  const id = forcedId ?? field.id;\n\n  return (\n    <Field id={id} group errors={field.errors} data-testid={field.name} {...rest}>\n      <div\n        className={clsx(\n          className,\n          asButton\n            ? buttonGroupVariants()\n            : !className &&\n                direction === \"horizontal\" &&\n                \"sm:grid-cols-repeat-fill-160 grid grid-cols-2 gap-x-2 lg:gap-x-4\",\n        )}\n      >\n        {options.map((option) => (\n          <Radio\n            key={option.value}\n            name={field.name}\n            value={option.value}\n            defaultChecked={field.defaultValue === option.value}\n          >\n            {option.label}\n          </Radio>\n        ))}\n      </div>\n    </Field>\n  );\n}\n","import { FieldName, useField } from \"@conform-to/react/future\";\nimport { Field, type FieldProps } from \"../field/Field\";\nimport { RadioButton } from \"./Radio\";\nimport clsx from \"clsx\";\nimport { buttonGroupVariants } from \"../../button\";\n\nexport type RadioButtonIconOption = { value: string; icon: string; label: string };\n\ninterface Props extends Omit<FieldProps, \"children\" | \"group\"> {\n  name: FieldName<string>;\n  options: RadioButtonIconOption[];\n  iconClassName?: string;\n}\n\nexport function RadiosButtonIconField({ name, options, iconClassName, id: forcedId, ...rest }: Props) {\n  const field = useField(name);\n  const id = forcedId ?? field.id;\n\n  return (\n    <Field id={id} group errors={field.errors} data-testid={field.name} {...rest}>\n      <div className={clsx(buttonGroupVariants())}>\n        {options.map((option) => (\n          <RadioButton\n            key={option.value}\n            className={clsx(\"flex-col items-center justify-center p-1\")}\n            size=\"custom\"\n            width=\"custom\"\n            color=\"gray\"\n            name={field.name}\n            value={option.value}\n            defaultChecked={field.defaultValue === option.value}\n          >\n            <i className={clsx(option.icon, iconClassName)}></i>\n            <span className=\"text-body-2xs max-w-full truncate\">{option.label}</span>\n          </RadioButton>\n        ))}\n      </div>\n    </Field>\n  );\n}\n","import { useField, type FieldName } from \"@conform-to/react/future\";\nimport { Field, type FieldProps } from \"../field/Field\";\nimport { RadioWithLegend } from \"./Radio\";\nimport clsx from \"clsx\";\nimport type { ReactNode } from \"react\";\n\nexport type RadioWithLegendOption<T extends string | null = string> = {\n  label: string;\n  value: T;\n  children: ReactNode;\n};\n\ninterface Props extends Omit<FieldProps, \"errors\" | \"children\" | \"group\"> {\n  name: FieldName<string | null>;\n  options: readonly RadioWithLegendOption[];\n  labelClassName?: string;\n}\n\nexport function RadiosWithLegendField({\n  name,\n  options,\n  className,\n  labelClassName,\n  id: forcedId,\n  ...rest\n}: Props) {\n  const field = useField(name);\n  const id = forcedId ?? field.id;\n\n  return (\n    <Field id={id} group errors={field.errors} data-testid={field.name} {...rest}>\n      <div className={clsx(className)}>\n        {options.map((option) => (\n          <RadioWithLegend\n            key={option.value}\n            name={field.name}\n            value={option.value}\n            defaultChecked={field.defaultValue === option.value}\n            label={option.label}\n            labelClassName={labelClassName}\n          >\n            {option.children}\n          </RadioWithLegend>\n        ))}\n      </div>\n    </Field>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":["ComponentPropsWithRef","RefObject","ThemeColor","clsx","ButtonProps","buttonVariants","RadioProps","color","variant","width","ref","HTMLInputElement","Radio","t0","$","_c","children","className","rest","t1","t2","disabled","undefined","t3","Symbol","for","t4","t5","t6","t7","RadioWithLegendProps","label","labelClassName","RadioWithLegend","t8","t9","RadioButtonProps","Omit","size","icon","RadioButton","t10","FieldName","useField","Field","FieldProps","SelectOption","clsx","buttonGroupVariants","Radio","Props","Omit","name","options","asButton","direction","RadiosField","t0","$","_c","className","forcedId","rest","id","field","t1","errors","t2","t3","t4","defaultValue","t5","option","value","label","map","t6","FieldName","useField","Field","FieldProps","RadioButton","clsx","buttonGroupVariants","RadioButtonIconOption","value","icon","label","Props","Omit","name","options","iconClassName","RadiosButtonIconField","t0","$","_c","forcedId","rest","id","field","t1","errors","t2","t3","Symbol","for","t4","defaultValue","t5","option","map","t6","useField","FieldName","Field","FieldProps","RadioWithLegend","clsx","ReactNode","RadioWithLegendOption","label","value","T","children","Props","Omit","name","options","labelClassName","RadiosWithLegendField","t0","$","_c","className","forcedId","rest","id","field","t1","errors","t2","t3","t4","defaultValue","t5","option","map","t6"],"sources":["../../../../src/components/fields/radio/Radio.tsx","../../../../src/components/fields/radio/RadiosField.tsx","../../../../src/components/fields/radio/RadiosButtonIconField.tsx","../../../../src/components/fields/radio/RadioWithLegendField.tsx"],"sourcesContent":["import { ComponentPropsWithRef, RefObject } from \"react\";\nimport { type ThemeColor } from \"../../../types\";\nimport clsx from \"clsx\";\nimport { ButtonProps, buttonVariants } from \"../../button\";\n\nexport interface RadioProps extends ComponentPropsWithRef<\"input\"> {\n  color?: ThemeColor;\n  variant?: \"contained\" | \"light\" | \"outlined\" | \"text\" | \"ghost\";\n  width?: \"fit\" | \"full\" | \"custom\";\n  ref?: RefObject<HTMLInputElement>;\n}\n\nexport function Radio({\n  disabled = false,\n  color = \"yellow\",\n  children,\n  className,\n  ref,\n  ...rest\n}: RadioProps) {\n  return (\n    <label aria-disabled={disabled} className={clsx(\"flex cursor-pointer items-center\")}>\n      <input\n        data-color={color}\n        ref={ref}\n        type=\"radio\"\n        className={clsx(\n          \"p8n-input-radio\",\n          \"my-1 mr-2 inline-block h-6 w-6 shrink-0 cursor-pointer appearance-none rounded-full bg-origin-border p-0 outline-offset-[-1px] select-none\",\n          className,\n        )}\n        {...(disabled ? { disabled } : {})}\n        {...rest}\n      />\n      {children}\n    </label>\n  );\n}\n\nexport interface RadioWithLegendProps extends RadioProps {\n  label: string;\n  labelClassName?: string;\n}\n\nexport function RadioWithLegend({\n  disabled = false,\n  color = \"yellow\",\n  children,\n  label,\n  labelClassName,\n  className,\n  ref,\n  ...rest\n}: RadioWithLegendProps) {\n  /**\n   * Add [data-radio=\"legend\"] into parent of children\n   */\n  return (\n    <label aria-disabled={disabled} className={clsx(\"flex cursor-pointer flex-col\")}>\n      {children}\n      <span className=\"flex items-center\">\n        <input\n          data-color={color}\n          ref={ref}\n          type=\"radio\"\n          className={clsx(\n            \"p8n-input-radio\",\n            \"my-1 mr-2 inline-block h-6 w-6 shrink-0 cursor-pointer appearance-none rounded-full bg-origin-border p-0 outline-offset-[-1px] select-none\",\n            className,\n          )}\n          {...(disabled ? { disabled } : {})}\n          {...rest}\n        />\n        <span className={labelClassName}>{label}</span>\n      </span>\n    </label>\n  );\n}\n\nexport interface RadioButtonProps extends Omit<RadioProps, \"size\" | \"color\"> {\n  color?: ButtonProps[\"color\"];\n  size?: \"small\" | \"medium\" | \"large\" | \"custom\" | \"input\";\n  icon?: boolean;\n}\nexport function RadioButton({\n  disabled = false,\n  color = \"yellow\",\n  children,\n  className,\n  variant = \"light\",\n  width = \"fit\",\n  size = \"medium\",\n  icon = false,\n\n  ref,\n  ...rest\n}: RadioButtonProps) {\n  return (\n    <label\n      aria-disabled={disabled}\n      className={clsx(className, buttonVariants({ variant, width, size, icon }))}\n      data-color={color}\n    >\n      <input\n        ref={ref}\n        type=\"radio\"\n        className=\"h-0 w-0 -translate-x-[9999px] overflow-hidden\"\n        {...(disabled ? { disabled } : {})}\n        {...rest}\n      />\n      {children}\n    </label>\n  );\n}\n","import { FieldName, useField } from \"@conform-to/react/future\";\nimport { Field, FieldProps } from \"../field/Field\";\nimport { SelectOption } from \"../select/types\";\nimport clsx from \"clsx\";\nimport { buttonGroupVariants } from \"../../button\";\nimport { Radio } from \"./Radio\";\n\ninterface Props extends Omit<FieldProps, \"children\" | \"group\"> {\n  name: FieldName<string | number | undefined | null>;\n  options: readonly SelectOption[];\n  asButton?: boolean;\n  direction?: \"horizontal\" | \"vertical\";\n}\n\nexport function RadiosField({\n  name,\n  options,\n  className,\n  asButton,\n  direction,\n  id: forcedId,\n  ...rest\n}: Props) {\n  const field = useField(name);\n  const id = forcedId ?? field.id;\n\n  return (\n    <Field id={id} group errors={field.errors} data-testid={field.name} {...rest}>\n      <div\n        className={clsx(\n          className,\n          asButton\n            ? buttonGroupVariants()\n            : !className &&\n                direction === \"horizontal\" &&\n                \"sm:grid-cols-repeat-fill-160 grid grid-cols-2 gap-x-2 lg:gap-x-4\",\n        )}\n      >\n        {options.map((option) => (\n          <Radio\n            key={option.value}\n            name={field.name}\n            value={option.value}\n            defaultChecked={field.defaultValue === option.value}\n          >\n            {option.label}\n          </Radio>\n        ))}\n      </div>\n    </Field>\n  );\n}\n","import { FieldName, useField } from \"@conform-to/react/future\";\nimport { Field, type FieldProps } from \"../field/Field\";\nimport { RadioButton } from \"./Radio\";\nimport clsx from \"clsx\";\nimport { buttonGroupVariants } from \"../../button\";\n\nexport type RadioButtonIconOption = { value: string; icon: string; label: string };\n\ninterface Props extends Omit<FieldProps, \"children\" | \"group\"> {\n  name: FieldName<string | number | null | undefined>;\n  options: RadioButtonIconOption[];\n  iconClassName?: string;\n}\n\nexport function RadiosButtonIconField({ name, options, iconClassName, id: forcedId, ...rest }: Props) {\n  const field = useField(name);\n  const id = forcedId ?? field.id;\n\n  return (\n    <Field id={id} group errors={field.errors} data-testid={field.name} {...rest}>\n      <div className={clsx(buttonGroupVariants())}>\n        {options.map((option) => (\n          <RadioButton\n            key={option.value}\n            className={clsx(\"flex-col items-center justify-center p-1\")}\n            size=\"custom\"\n            width=\"custom\"\n            color=\"gray\"\n            name={field.name}\n            value={option.value}\n            defaultChecked={field.defaultValue === option.value}\n          >\n            <i className={clsx(option.icon, iconClassName)}></i>\n            <span className=\"text-body-2xs max-w-full truncate\">{option.label}</span>\n          </RadioButton>\n        ))}\n      </div>\n    </Field>\n  );\n}\n","import { useField, type FieldName } from \"@conform-to/react/future\";\nimport { Field, type FieldProps } from \"../field/Field\";\nimport { RadioWithLegend } from \"./Radio\";\nimport clsx from \"clsx\";\nimport type { ReactNode } from \"react\";\n\nexport type RadioWithLegendOption<T extends string | null = string> = {\n  label: string;\n  value: T;\n  children: ReactNode;\n};\n\ninterface Props extends Omit<FieldProps, \"errors\" | \"children\" | \"group\"> {\n  name: FieldName<string | number | null | undefined>;\n  options: readonly RadioWithLegendOption[];\n  labelClassName?: string;\n}\n\nexport function RadiosWithLegendField({\n  name,\n  options,\n  className,\n  labelClassName,\n  id: forcedId,\n  ...rest\n}: Props) {\n  const field = useField(name);\n  const id = forcedId ?? field.id;\n\n  return (\n    <Field id={id} group errors={field.errors} data-testid={field.name} {...rest}>\n      <div className={clsx(className)}>\n        {options.map((option) => (\n          <RadioWithLegend\n            key={option.value}\n            name={field.name}\n            value={option.value}\n            defaultChecked={field.defaultValue === option.value}\n            label={option.label}\n            labelClassName={labelClassName}\n          >\n            {option.children}\n          </RadioWithLegend>\n        ))}\n      </div>\n    </Field>\n  );\n}\n"],"mappings":"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"}

package/dist/components/fields/range/index.d.mts

@@ -36,7 +36,7 @@ declare function AudioRange({ className, valueClassName, defaultValue, value: co
 //#endregion
 //#region src/components/fields/range/RangeField.d.ts
 interface Props extends Omit<FieldProps, "errors" | "children" | "group"> {
-  name: FieldName<number>;
+  name: FieldName<number | null | undefined>;
   min?: number;
   max?: number;
   step?: number;

package/dist/components/fields/range/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["useMemo","ComponentPropsWithRef","useState","ChangeEvent","RefObject","clsx","ThemeColor","RangeProps","Omit","defaultValue","value","additionalBarValue","min","max","step","showMinMax","showValue","ticks","valuesByTick","color","formatter","str","ref","HTMLInputElement","trackBase","Range","className","controlledValue","toString","onChange","rest","isControlled","unControlledValue","setUnControlledValue","valueAsNumber","parseInt","range","percent","additionalPercent","nbOfTicks","Math","floor","cssVars","handleChange","e","target","Array","from","length","map","_","i","useMemo","ComponentPropsWithRef","useState","ChangeEvent","RefObject","clsx","ThemeColor","formatTime","time","seconds","foo","minutes","Math","floor","toFixed","RangeProps","Omit","defaultValue","value","min","max","step","color","formatter","str","ref","HTMLInputElement","valueClassName","trackBase","AudioRange","t0","$","_c","className","controlledValue","onChange","rest","t1","t2","t3","t4","t5","undefined","isControlled","unControlledValue","setUnControlledValue","valueAsNumber","parseInt","range","percent","t6","t7","cssVars","t8","e","target","handleChange","t9","t10","t11","t12","t13","Symbol","for","t14","t15","t16","t17","t18","t19","t20","t21","useField","FieldName","Field","FieldProps","Range","Props","Omit","name","min","max","step","showMinMax","showValue","RangeField","t0","$","_c","forcedId","rest","id","field","numberValue","defaultValue","parseInt","undefined","t1","t2","errors"],"sources":["../../../../src/components/fields/range/Range.tsx","../../../../src/components/fields/range/AudioRange.tsx","../../../../src/components/fields/range/RangeField.tsx"],"sourcesContent":["import { useMemo, ComponentPropsWithRef, useState, ChangeEvent, RefObject } from \"react\";\n\nimport clsx from \"clsx\";\nimport { ThemeColor } from \"../../../types\";\n\nexport interface RangeProps extends Omit<\n  ComponentPropsWithRef<\"input\">,\n  \"value\" | \"defaultValue\" | \"min\" | \"max\" | \"step\"\n> {\n  defaultValue?: number | string;\n  value?: number | string;\n\n  additionalBarValue?: number;\n\n  min?: number;\n  max?: number;\n  step?: number;\n\n  showMinMax?: \"onHover\" | \"always\" | \"never\";\n\n  showValue?: boolean;\n\n  ticks?: boolean;\n\n  valuesByTick?: number;\n\n  color?: ThemeColor;\n\n  formatter?: (str: number) => string;\n\n  ref?: RefObject<HTMLInputElement>;\n}\n\nconst trackBase = \"pointer-events-none absolute top-0 left-0 h-full\";\n\nexport function Range({\n  className,\n  defaultValue,\n  additionalBarValue,\n  value: controlledValue,\n  min = 0,\n  max = 100,\n  color = \"yellow\",\n  showMinMax = \"onHover\",\n  step = 1,\n  valuesByTick,\n  showValue = true,\n  ticks = false,\n  formatter = (str) => str?.toString(),\n  onChange,\n  ref,\n  ...rest\n}: RangeProps) {\n  const isControlled = typeof controlledValue !== \"undefined\";\n\n  const [unControlledValue, setUnControlledValue] = useState(defaultValue);\n\n  const value = (isControlled ? controlledValue : unControlledValue)!;\n  const valueAsNumber = typeof value === \"string\" ? parseInt(value) : value;\n\n  const range = max - min;\n  const percent = (valueAsNumber - min) / range;\n  const additionalPercent = additionalBarValue ? (additionalBarValue - min) / range : 0;\n  const nbOfTicks = 1 + Math.floor(range / (valuesByTick ?? step ?? 5));\n\n  const cssVars = useMemo(\n    () => ({\n      \"--p8n-range-c-bg\": `var(--color-custom-1)`,\n      \"--p8n-range-c-bg-2\": `var(--color-custom-2)`,\n      \"--p8n-range-c-fg\": `var(--color-custom-4)`,\n      \"--p8n-range-progress-percent\": `${percent * 100}%`,\n      \"--p8n-range-additional-percent\": `${additionalPercent * 100}%`,\n    }),\n    [percent, additionalPercent],\n  );\n\n  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n    if (!isControlled) {\n      setUnControlledValue(e.target.valueAsNumber);\n    }\n    if (onChange) {\n      onChange(e);\n    }\n  };\n\n  return (\n    <div className={clsx(\"group relative flex\", className)} style={cssVars} data-color={color}>\n      {showMinMax !== \"never\" && (\n        <>\n          <div\n            className={clsx(\n              \"text-body-xs absolute top-6 left-4 -translate-x-2/4\",\n              showMinMax === \"onHover\" && \"opacity-0 transition-opacity group-hover:opacity-100\",\n            )}\n          >\n            {formatter(min)}\n          </div>\n          <div\n            className={clsx(\n              \"text-body-xs absolute top-6 right-4 translate-x-2/4\",\n              showMinMax === \"onHover\" && \"opacity-0 transition-opacity group-hover:opacity-100\",\n            )}\n          >\n            {formatter(max)}\n          </div>\n        </>\n      )}\n\n      <div className={clsx(trackBase, \"right-0 bottom-0 flex items-center justify-center\")}>\n        <div className=\"relative h-2 w-[calc(100%-2rem)]\">\n          {/* track full */}\n          <div\n            className={clsx(\n              trackBase,\n              \"track w-full bg-(--p8n-range-c-bg) after:absolute after:left-[calc(100%-.25rem)] after:h-2 after:w-2 after:rounded-full after:bg-(--p8n-range-c-bg)\",\n            )}\n          ></div>\n          {typeof additionalBarValue !== \"undefined\" && (\n            <div\n              className={clsx(\n                trackBase,\n                \"w-[var(--p8n-range-additional-percent)] rounded-[3px] bg-(--p8n-range-c-bg-2) before:absolute before:-left-1 before:h-2 before:w-2 before:rounded-full before:bg-(--p8n-range-c-bg-2)\",\n              )}\n            ></div>\n          )}\n          {showValue && (\n            <div className=\"text-body-sm pointer-events-none absolute bottom-4 left-[var(--p8n-range-progress-percent)] -translate-x-2/4\">\n              {formatter(valueAsNumber)}\n            </div>\n          )}\n          {/* active zone */}\n          <div\n            className={clsx(\n              trackBase,\n              \"w-[var(--p8n-range-progress-percent)] rounded-[3px] bg-(--p8n-range-c-fg) before:absolute before:-left-1 before:h-2 before:w-2 before:rounded-full before:bg-(--p8n-range-c-fg)\",\n            )}\n          ></div>\n          {/* ticks */}\n          {ticks && (\n            <div\n              className={clsx(\n                trackBase,\n                \"-mx-0.5 flex w-[calc(100%+0.25rem)] items-center justify-between\",\n              )}\n            >\n              {Array.from({ length: nbOfTicks }).map((_, i) => (\n                <span key={i} className=\"bg-gray-0 h-1 w-1 rounded-full\"></span>\n              ))}\n            </div>\n          )}\n        </div>\n      </div>\n      <input\n        type=\"range\"\n        className={clsx(\n          \"p8n-input-range h-8 w-full min-w-0 bg-transparent outline-offset-[0.75rem]\",\n        )}\n        ref={ref}\n        min={min}\n        max={max}\n        step={step}\n        defaultValue={defaultValue}\n        value={controlledValue}\n        onChange={handleChange}\n        {...rest}\n      />\n    </div>\n  );\n}\n","import { useMemo, ComponentPropsWithRef, useState, ChangeEvent, RefObject } from \"react\";\n\nimport clsx from \"clsx\";\nimport { ThemeColor } from \"../../../types\";\n\nexport const formatTime = (time: number) => {\n  let seconds: string | number = time % 60;\n  const foo = time - seconds;\n  const minutes = foo / 60;\n  if (seconds < 10) {\n    seconds = `0${Math.floor(seconds)}`;\n  } else {\n    seconds = Math.floor(seconds).toFixed(0);\n  }\n  return minutes + \":\" + seconds;\n};\n\nexport interface RangeProps extends Omit<\n  ComponentPropsWithRef<\"input\">,\n  \"value\" | \"defaultValue\" | \"min\" | \"max\" | \"step\"\n> {\n  defaultValue?: number | string;\n  value?: number | string;\n\n  min?: number;\n  max?: number;\n  step?: number;\n\n  color?: ThemeColor;\n\n  formatter?: (str: number) => string;\n\n  ref?: RefObject<HTMLInputElement>;\n\n  valueClassName?: string;\n}\n\nconst trackBase = \"pointer-events-none absolute top-0 left-0 h-full\";\n\nexport function AudioRange({\n  className,\n  valueClassName,\n  defaultValue,\n  value: controlledValue,\n  min = 0,\n  max = 100,\n  color = \"yellow\",\n  step = 1,\n  formatter = formatTime,\n  onChange,\n  ref,\n  ...rest\n}: RangeProps) {\n  const isControlled = typeof controlledValue !== \"undefined\";\n\n  const [unControlledValue, setUnControlledValue] = useState(defaultValue);\n\n  const value = (isControlled ? controlledValue : unControlledValue)!;\n  const valueAsNumber = typeof value === \"string\" ? parseInt(value) : value;\n\n  const range = max - min;\n  const percent = (valueAsNumber - min) / range;\n\n  const cssVars = useMemo(\n    () => ({\n      \"--p8n-range-c-bg\": `var(--color-custom-1)`,\n      \"--p8n-range-c-fg\": `var(--color-custom-4)`,\n      \"--p8n-range-progress-percent\": `${percent * 100}%`,\n    }),\n    [percent],\n  );\n\n  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n    if (!isControlled) {\n      setUnControlledValue(e.target.valueAsNumber);\n    }\n    if (onChange) {\n      onChange(e);\n    }\n  };\n\n  return (\n    <div className=\"flex items-center\">\n      <div className={clsx(\"text-right\", valueClassName)}>{formatter(valueAsNumber)}</div>\n\n      <div\n        className={clsx(\"group relative flex flex-1\", className)}\n        style={cssVars}\n        data-color={color}\n      >\n        <div className={clsx(trackBase, \"right-0 bottom-0 flex items-center justify-center\")}>\n          <div className=\"relative h-2 w-[calc(100%-2rem)]\">\n            {/* track full */}\n            <div\n              className={clsx(\n                trackBase,\n                \"track bg-custom-2/50 after:bg-custom-2/50 w-full after:absolute after:left-[calc(100%-.25rem)] after:h-2 after:w-2 after:rounded-full after:mask-l-from-50% after:mask-l-to-transparent after:mask-l-to-50%\",\n              )}\n            ></div>\n\n            {/* active zone */}\n            <div\n              className={clsx(\n                trackBase,\n                \"from-gray-8/70 to-gray-8/50 before:bg-gray-8/70 bg-linear-to-r from-5%\",\n                \"group-hover:from-custom-4 group-hover:to-custom-3 group-hover:before:bg-custom-4 group-hover:bg-linear-to-r\",\n\n                \"w-[var(--p8n-range-progress-percent)] rounded-r-[4px]\",\n                \"before:absolute before:-left-1 before:h-2 before:w-2 before:rounded-full before:mask-r-from-50% before:mask-r-to-transparent before:mask-r-to-50%\",\n              )}\n            ></div>\n          </div>\n        </div>\n        <input\n          autoComplete=\"off\"\n          type=\"range\"\n          className={clsx(\n            \"p8n-input-audio-range h-8 w-full min-w-0 cursor-pointer bg-transparent outline-offset-[0.75rem]\",\n          )}\n          ref={ref}\n          min={min}\n          max={max}\n          step={step}\n          defaultValue={defaultValue}\n          value={controlledValue}\n          onChange={handleChange}\n          {...rest}\n        />\n      </div>\n      <div className={clsx(valueClassName)}>{formatter(max)}</div>\n    </div>\n  );\n}\n","import { useField, type FieldName } from \"@conform-to/react/future\";\nimport { Field, type FieldProps } from \"../field/Field\";\nimport { Range } from \"./Range\";\n\ninterface Props extends Omit<FieldProps, \"errors\" | \"children\" | \"group\"> {\n  name: FieldName<number>;\n\n  min?: number;\n  max?: number;\n  step?: number;\n  showMinMax?: \"onHover\" | \"always\" | \"never\";\n  showValue?: boolean;\n}\n\nexport function RangeField({\n  name,\n  min,\n  max,\n  step,\n  showMinMax,\n  showValue,\n  id: forcedId,\n  ...rest\n}: Props) {\n  const field = useField(name);\n  const id = forcedId ?? field.id;\n  const numberValue: number | undefined = field.defaultValue\n    ? parseInt(field.defaultValue)\n    : undefined;\n\n  return (\n    <Field id={id} errors={field.errors} data-testid={field.name} {...rest}>\n      <Range\n        name={field.name}\n        defaultValue={numberValue}\n        min={min}\n        max={max}\n        step={step}\n        showMinMax={showMinMax}\n        showValue={showValue}\n      />\n    </Field>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":["useMemo","ComponentPropsWithRef","useState","ChangeEvent","RefObject","clsx","ThemeColor","RangeProps","Omit","defaultValue","value","additionalBarValue","min","max","step","showMinMax","showValue","ticks","valuesByTick","color","formatter","str","ref","HTMLInputElement","trackBase","Range","className","controlledValue","toString","onChange","rest","isControlled","unControlledValue","setUnControlledValue","valueAsNumber","parseInt","range","percent","additionalPercent","nbOfTicks","Math","floor","cssVars","handleChange","e","target","Array","from","length","map","_","i","useMemo","ComponentPropsWithRef","useState","ChangeEvent","RefObject","clsx","ThemeColor","formatTime","time","seconds","foo","minutes","Math","floor","toFixed","RangeProps","Omit","defaultValue","value","min","max","step","color","formatter","str","ref","HTMLInputElement","valueClassName","trackBase","AudioRange","t0","$","_c","className","controlledValue","onChange","rest","t1","t2","t3","t4","t5","undefined","isControlled","unControlledValue","setUnControlledValue","valueAsNumber","parseInt","range","percent","t6","t7","cssVars","t8","e","target","handleChange","t9","t10","t11","t12","t13","Symbol","for","t14","t15","t16","t17","t18","t19","t20","t21","useField","FieldName","Field","FieldProps","Range","Props","Omit","name","min","max","step","showMinMax","showValue","RangeField","t0","$","_c","forcedId","rest","id","field","numberValue","defaultValue","parseInt","undefined","t1","t2","errors"],"sources":["../../../../src/components/fields/range/Range.tsx","../../../../src/components/fields/range/AudioRange.tsx","../../../../src/components/fields/range/RangeField.tsx"],"sourcesContent":["import { useMemo, ComponentPropsWithRef, useState, ChangeEvent, RefObject } from \"react\";\n\nimport clsx from \"clsx\";\nimport { ThemeColor } from \"../../../types\";\n\nexport interface RangeProps extends Omit<\n  ComponentPropsWithRef<\"input\">,\n  \"value\" | \"defaultValue\" | \"min\" | \"max\" | \"step\"\n> {\n  defaultValue?: number | string;\n  value?: number | string;\n\n  additionalBarValue?: number;\n\n  min?: number;\n  max?: number;\n  step?: number;\n\n  showMinMax?: \"onHover\" | \"always\" | \"never\";\n\n  showValue?: boolean;\n\n  ticks?: boolean;\n\n  valuesByTick?: number;\n\n  color?: ThemeColor;\n\n  formatter?: (str: number) => string;\n\n  ref?: RefObject<HTMLInputElement>;\n}\n\nconst trackBase = \"pointer-events-none absolute top-0 left-0 h-full\";\n\nexport function Range({\n  className,\n  defaultValue,\n  additionalBarValue,\n  value: controlledValue,\n  min = 0,\n  max = 100,\n  color = \"yellow\",\n  showMinMax = \"onHover\",\n  step = 1,\n  valuesByTick,\n  showValue = true,\n  ticks = false,\n  formatter = (str) => str?.toString(),\n  onChange,\n  ref,\n  ...rest\n}: RangeProps) {\n  const isControlled = typeof controlledValue !== \"undefined\";\n\n  const [unControlledValue, setUnControlledValue] = useState(defaultValue);\n\n  const value = (isControlled ? controlledValue : unControlledValue)!;\n  const valueAsNumber = typeof value === \"string\" ? parseInt(value) : value;\n\n  const range = max - min;\n  const percent = (valueAsNumber - min) / range;\n  const additionalPercent = additionalBarValue ? (additionalBarValue - min) / range : 0;\n  const nbOfTicks = 1 + Math.floor(range / (valuesByTick ?? step ?? 5));\n\n  const cssVars = useMemo(\n    () => ({\n      \"--p8n-range-c-bg\": `var(--color-custom-1)`,\n      \"--p8n-range-c-bg-2\": `var(--color-custom-2)`,\n      \"--p8n-range-c-fg\": `var(--color-custom-4)`,\n      \"--p8n-range-progress-percent\": `${percent * 100}%`,\n      \"--p8n-range-additional-percent\": `${additionalPercent * 100}%`,\n    }),\n    [percent, additionalPercent],\n  );\n\n  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n    if (!isControlled) {\n      setUnControlledValue(e.target.valueAsNumber);\n    }\n    if (onChange) {\n      onChange(e);\n    }\n  };\n\n  return (\n    <div className={clsx(\"group relative flex\", className)} style={cssVars} data-color={color}>\n      {showMinMax !== \"never\" && (\n        <>\n          <div\n            className={clsx(\n              \"text-body-xs absolute top-6 left-4 -translate-x-2/4\",\n              showMinMax === \"onHover\" && \"opacity-0 transition-opacity group-hover:opacity-100\",\n            )}\n          >\n            {formatter(min)}\n          </div>\n          <div\n            className={clsx(\n              \"text-body-xs absolute top-6 right-4 translate-x-2/4\",\n              showMinMax === \"onHover\" && \"opacity-0 transition-opacity group-hover:opacity-100\",\n            )}\n          >\n            {formatter(max)}\n          </div>\n        </>\n      )}\n\n      <div className={clsx(trackBase, \"right-0 bottom-0 flex items-center justify-center\")}>\n        <div className=\"relative h-2 w-[calc(100%-2rem)]\">\n          {/* track full */}\n          <div\n            className={clsx(\n              trackBase,\n              \"track w-full bg-(--p8n-range-c-bg) after:absolute after:left-[calc(100%-.25rem)] after:h-2 after:w-2 after:rounded-full after:bg-(--p8n-range-c-bg)\",\n            )}\n          ></div>\n          {typeof additionalBarValue !== \"undefined\" && (\n            <div\n              className={clsx(\n                trackBase,\n                \"w-[var(--p8n-range-additional-percent)] rounded-[3px] bg-(--p8n-range-c-bg-2) before:absolute before:-left-1 before:h-2 before:w-2 before:rounded-full before:bg-(--p8n-range-c-bg-2)\",\n              )}\n            ></div>\n          )}\n          {showValue && (\n            <div className=\"text-body-sm pointer-events-none absolute bottom-4 left-[var(--p8n-range-progress-percent)] -translate-x-2/4\">\n              {formatter(valueAsNumber)}\n            </div>\n          )}\n          {/* active zone */}\n          <div\n            className={clsx(\n              trackBase,\n              \"w-[var(--p8n-range-progress-percent)] rounded-[3px] bg-(--p8n-range-c-fg) before:absolute before:-left-1 before:h-2 before:w-2 before:rounded-full before:bg-(--p8n-range-c-fg)\",\n            )}\n          ></div>\n          {/* ticks */}\n          {ticks && (\n            <div\n              className={clsx(\n                trackBase,\n                \"-mx-0.5 flex w-[calc(100%+0.25rem)] items-center justify-between\",\n              )}\n            >\n              {Array.from({ length: nbOfTicks }).map((_, i) => (\n                <span key={i} className=\"bg-gray-0 h-1 w-1 rounded-full\"></span>\n              ))}\n            </div>\n          )}\n        </div>\n      </div>\n      <input\n        type=\"range\"\n        className={clsx(\n          \"p8n-input-range h-8 w-full min-w-0 bg-transparent outline-offset-[0.75rem]\",\n        )}\n        ref={ref}\n        min={min}\n        max={max}\n        step={step}\n        defaultValue={defaultValue}\n        value={controlledValue}\n        onChange={handleChange}\n        {...rest}\n      />\n    </div>\n  );\n}\n","import { useMemo, ComponentPropsWithRef, useState, ChangeEvent, RefObject } from \"react\";\n\nimport clsx from \"clsx\";\nimport { ThemeColor } from \"../../../types\";\n\nexport const formatTime = (time: number) => {\n  let seconds: string | number = time % 60;\n  const foo = time - seconds;\n  const minutes = foo / 60;\n  if (seconds < 10) {\n    seconds = `0${Math.floor(seconds)}`;\n  } else {\n    seconds = Math.floor(seconds).toFixed(0);\n  }\n  return minutes + \":\" + seconds;\n};\n\nexport interface RangeProps extends Omit<\n  ComponentPropsWithRef<\"input\">,\n  \"value\" | \"defaultValue\" | \"min\" | \"max\" | \"step\"\n> {\n  defaultValue?: number | string;\n  value?: number | string;\n\n  min?: number;\n  max?: number;\n  step?: number;\n\n  color?: ThemeColor;\n\n  formatter?: (str: number) => string;\n\n  ref?: RefObject<HTMLInputElement>;\n\n  valueClassName?: string;\n}\n\nconst trackBase = \"pointer-events-none absolute top-0 left-0 h-full\";\n\nexport function AudioRange({\n  className,\n  valueClassName,\n  defaultValue,\n  value: controlledValue,\n  min = 0,\n  max = 100,\n  color = \"yellow\",\n  step = 1,\n  formatter = formatTime,\n  onChange,\n  ref,\n  ...rest\n}: RangeProps) {\n  const isControlled = typeof controlledValue !== \"undefined\";\n\n  const [unControlledValue, setUnControlledValue] = useState(defaultValue);\n\n  const value = (isControlled ? controlledValue : unControlledValue)!;\n  const valueAsNumber = typeof value === \"string\" ? parseInt(value) : value;\n\n  const range = max - min;\n  const percent = (valueAsNumber - min) / range;\n\n  const cssVars = useMemo(\n    () => ({\n      \"--p8n-range-c-bg\": `var(--color-custom-1)`,\n      \"--p8n-range-c-fg\": `var(--color-custom-4)`,\n      \"--p8n-range-progress-percent\": `${percent * 100}%`,\n    }),\n    [percent],\n  );\n\n  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n    if (!isControlled) {\n      setUnControlledValue(e.target.valueAsNumber);\n    }\n    if (onChange) {\n      onChange(e);\n    }\n  };\n\n  return (\n    <div className=\"flex items-center\">\n      <div className={clsx(\"text-right\", valueClassName)}>{formatter(valueAsNumber)}</div>\n\n      <div\n        className={clsx(\"group relative flex flex-1\", className)}\n        style={cssVars}\n        data-color={color}\n      >\n        <div className={clsx(trackBase, \"right-0 bottom-0 flex items-center justify-center\")}>\n          <div className=\"relative h-2 w-[calc(100%-2rem)]\">\n            {/* track full */}\n            <div\n              className={clsx(\n                trackBase,\n                \"track bg-custom-2/50 after:bg-custom-2/50 w-full after:absolute after:left-[calc(100%-.25rem)] after:h-2 after:w-2 after:rounded-full after:mask-l-from-50% after:mask-l-to-transparent after:mask-l-to-50%\",\n              )}\n            ></div>\n\n            {/* active zone */}\n            <div\n              className={clsx(\n                trackBase,\n                \"from-gray-8/70 to-gray-8/50 before:bg-gray-8/70 bg-linear-to-r from-5%\",\n                \"group-hover:from-custom-4 group-hover:to-custom-3 group-hover:before:bg-custom-4 group-hover:bg-linear-to-r\",\n\n                \"w-[var(--p8n-range-progress-percent)] rounded-r-[4px]\",\n                \"before:absolute before:-left-1 before:h-2 before:w-2 before:rounded-full before:mask-r-from-50% before:mask-r-to-transparent before:mask-r-to-50%\",\n              )}\n            ></div>\n          </div>\n        </div>\n        <input\n          autoComplete=\"off\"\n          type=\"range\"\n          className={clsx(\n            \"p8n-input-audio-range h-8 w-full min-w-0 cursor-pointer bg-transparent outline-offset-[0.75rem]\",\n          )}\n          ref={ref}\n          min={min}\n          max={max}\n          step={step}\n          defaultValue={defaultValue}\n          value={controlledValue}\n          onChange={handleChange}\n          {...rest}\n        />\n      </div>\n      <div className={clsx(valueClassName)}>{formatter(max)}</div>\n    </div>\n  );\n}\n","import { useField, type FieldName } from \"@conform-to/react/future\";\nimport { Field, type FieldProps } from \"../field/Field\";\nimport { Range } from \"./Range\";\n\ninterface Props extends Omit<FieldProps, \"errors\" | \"children\" | \"group\"> {\n  name: FieldName<number | null | undefined>;\n\n  min?: number;\n  max?: number;\n  step?: number;\n  showMinMax?: \"onHover\" | \"always\" | \"never\";\n  showValue?: boolean;\n}\n\nexport function RangeField({\n  name,\n  min,\n  max,\n  step,\n  showMinMax,\n  showValue,\n  id: forcedId,\n  ...rest\n}: Props) {\n  const field = useField(name);\n  const id = forcedId ?? field.id;\n  const numberValue: number | undefined = field.defaultValue\n    ? parseInt(field.defaultValue)\n    : undefined;\n\n  return (\n    <Field id={id} errors={field.errors} data-testid={field.name} {...rest}>\n      <Range\n        name={field.name}\n        defaultValue={numberValue}\n        min={min}\n        max={max}\n        step={step}\n        showMinMax={showMinMax}\n        showValue={showValue}\n      />\n    </Field>\n  );\n}\n"],"mappings":";;;;;;;AAiCA,MAAMwB,cAAY;AAElB,SAAgBC,MAAM,EACpBC,WACAjB,cACAE,oBACAD,OAAOiB,iBACPf,MAAM,GACNC,MAAM,KACNM,QAAQ,UACRJ,aAAa,WACbD,OAAO,GACPI,cACAF,YAAY,MACZC,QAAQ,OACRG,aAAaC,QAAQA,KAAKO,SAAS,GACnCC,UACAP,KACA,GAAGQ,QACU;CACb,MAAMC,eAAe,OAAOJ,oBAAoB;CAEhD,MAAM,CAACK,mBAAmBC,wBAAwB/B,SAASO,YAAY;CAEvE,MAAMC,QAASqB,eAAeJ,kBAAkBK;CAChD,MAAME,gBAAgB,OAAOxB,UAAU,WAAWyB,SAASzB,KAAK,IAAIA;CAEpE,MAAM0B,QAAQvB,MAAMD;CACpB,MAAMyB,WAAWH,gBAAgBtB,OAAOwB;CACxC,MAAME,oBAAoB3B,sBAAsBA,qBAAqBC,OAAOwB,QAAQ;CACpF,MAAMG,YAAY,IAAIC,KAAKC,MAAML,SAASlB,gBAAgBJ,QAAQ,EAAE;CAEpE,MAAM4B,UAAU1C,eACP;EACL,oBAAoB;EACpB,sBAAsB;EACtB,oBAAoB;EACpB,gCAAgC,GAAGqC,UAAU,IAAG;EAChD,kCAAkC,GAAGC,oBAAoB,IAAG;CAC9D,IACA,CAACD,SAASC,iBAAiB,CAC7B;CAEA,MAAMK,gBAAgBC,MAAqC;EACzD,IAAI,CAACb,cACHE,qBAAqBW,EAAEC,OAAOX,aAAa;EAE7C,IAAIL,UACFA,SAASe,CAAC;CAEd;CAEA,OACE,qBAAC,OAAD;EAAK,WAAWvC,KAAK,uBAAuBqB,SAAS;EAAG,OAAOgB;EAAS,cAAYvB;EAApF,UAAA;GACGJ,eAAe,WACd,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,OAAD;IACE,WAAWV,KACT,uDACAU,eAAe,aAAa,sDAC9B;IAECK,UAAAA,UAAUR,GAAG;GACX,CAAA,GACL,oBAAC,OAAD;IACE,WAAWP,KACT,uDACAU,eAAe,aAAa,sDAC9B;IAECK,UAAAA,UAAUP,GAAG;GACX,CAAA,CACP,EAAA,CAAA;GAGF,oBAAC,OAAD;IAAK,WAAWR,KAAKmB,aAAW,mDAAmD;IACjF,UAAA,qBAAC,OAAD;KAAK,WAAU;KAAf,UAAA;MAEE,oBAAC,OAAD,EACE,WAAWnB,KACTmB,aACA,qJACF,EACI,CAAA;MACL,OAAOb,uBAAuB,eAC7B,oBAAC,OAAD,EACE,WAAWN,KACTmB,aACA,uLACF,EACI,CAAA;MAEPR,aACC,oBAAC,OAAD;OAAK,WAAU;OACZI,UAAAA,UAAUc,aAAa;MACrB,CAAA;MAGP,oBAAC,OAAD,EACE,WAAW7B,KACTmB,aACA,iLACF,EACI,CAAA;MAELP,SACC,oBAAC,OAAD;OACE,WAAWZ,KACTmB,aACA,kEACF;OAECsB,UAAAA,MAAMC,KAAK,EAAEC,QAAQT,UAAU,CAAC,CAAC,CAACU,KAAKC,GAAGC,MACzC,oBAAC,QAAD,EAAc,WAAU,iCAAuC,GAApDA,CAAoD,CAChE;MACE,CAAA;KAEJ;;GACF,CAAA;GACL,oBAAC,SAAD;IACE,MAAK;IACL,WAAW9C,KACT,4EACF;IACKiB;IACAV;IACAC;IACCC;IACQL;IACd,OAAOkB;IACP,UAAUgB;IACV,GAAIb;GAAK,CAAA;EAER;;AAET;;;ACnKA,MAAa6B,cAAcC,SAAiB;CAC1C,IAAIC,UAA2BD,OAAO;CAEtC,MAAMG,WADMH,OAAOC,WACG;CACtB,IAAIA,UAAU,IACZA,UAAU,IAAIG,KAAKC,MAAMJ,OAAO;MAEhCA,UAAUG,KAAKC,MAAMJ,OAAO,CAAC,CAACK,QAAQ,CAAC;CAEzC,OAAOH,UAAU,MAAMF;AACzB;AAsBA,MAAMmB,YAAY;AAElB,SAAOC,WAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAjB;CAAA,IAAAkB;CAAA,IAAAV;CAAA,IAAAW;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAd;CAAA,IAAAI,EAAA,OAAAD,IAAA;EAAoB,CAAA,CAAAG,WAAAN,gBAAAV,cAAAC,OAAAgB,iBAAAf,KAAAkB,IAAAjB,KAAAkB,IAAAhB,OAAAiB,IAAAlB,MAAAmB,IAAAjB,WAAAkB,IAAAN,UAAAV,QAAAW,QAAAN;EAadC,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAd;EAAAc,EAAA,KAAAI;EAAAJ,EAAA,KAAAN;EAAAM,EAAA,KAAAK;EAAAL,EAAA,KAAAM;EAAAN,EAAA,KAAAO;EAAAP,EAAA,KAAAQ;EAAAR,EAAA,MAAAS;EAAAT,EAAA,MAAAU;EAAAV,EAAA,MAAAJ;CAAA,OAAA;EAAAM,YAAAF,EAAA;EAAAG,kBAAAH,EAAA;EAAAd,eAAAc,EAAA;EAAAI,WAAAJ,EAAA;EAAAN,MAAAM,EAAA;EAAAK,OAAAL,EAAA;EAAAM,KAAAN,EAAA;EAAAO,KAAAP,EAAA;EAAAQ,KAAAR,EAAA;EAAAS,KAAAT,EAAA;EAAAU,KAAAV,EAAA;EAAAJ,iBAAAI,EAAA;CAAA;CARX,MAAAZ,MAAAkB,OAAAK,KAAAA,IAAA,IAAAL;CACA,MAAAjB,MAAAkB,OAAAI,KAAAA,IAAA,MAAAJ;CACA,MAAAhB,QAAAiB,OAAAG,KAAAA,IAAA,WAAAH;CACA,MAAAlB,OAAAmB,OAAAE,KAAAA,IAAA,IAAAF;CACA,MAAAjB,YAAAkB,OAAAC,KAAAA,IAAAnC,aAAAkC;CAKA,MAAAE,eAAqB,OAAOT,oBAAoB;CAEhD,MAAA,CAAAU,mBAAAC,wBAAkD3C,SAASe,YAAY;CAEvE,MAAAC,QAAeyB,eAAAT,kBAAAU;CACf,MAAAE,gBAAsB,OAAO5B,UAAU,WAAW6B,SAAS7B,KAAa,IAAlDA;CAEtB,MAAA8B,QAAc5B,MAAMD;CAOgB,MAAA+B,KAAA,IANnBJ,gBAAgB3B,OAAO6B,QAMS,IAAG;CAAG,IAAAG;CAAA,IAAApB,EAAA,QAAAmB,IAAA;EAH9CC,KAAA;GAAA,oBACe;GAAuB,oBACvB;GAAuB,gCACXD;EAClC;EAACnB,EAAA,MAAAmB;EAAAnB,EAAA,MAAAoB;CAAA,OAAAA,KAAApB,EAAA;CALH,MAAAqB,UACSD;CAMP,IAAAE;CAAA,IAAAtB,EAAA,QAAAY,gBAAAZ,EAAA,QAAAI,UAAA;EAEmBkB,MAAAC,MAAA;GACnB,IAAI,CAACX,cACHE,qBAAqBS,EAACC,OAAOT,aAAc;GAE7C,IAAIX,UACFA,SAASmB,CAAC;EACX;EACFvB,EAAA,MAAAY;EAAAZ,EAAA,MAAAI;EAAAJ,EAAA,MAAAsB;CAAA,OAAAA,KAAAtB,EAAA;CAPD,MAAAyB,eAAqBH;CAOnB,IAAAI;CAAA,IAAA1B,EAAA,QAAAJ,gBAAA;EAIkB8B,KAAApD,KAAK,cAAcsB,cAAc;EAACI,EAAA,MAAAJ;EAAAI,EAAA,MAAA0B;CAAA,OAAAA,KAAA1B,EAAA;CAAA,IAAA2B;CAAA,IAAA3B,EAAA,QAAAR,aAAAQ,EAAA,QAAAe,eAAA;EAAGY,MAAAnC,UAAUuB,aAAa;EAACf,EAAA,MAAAR;EAAAQ,EAAA,MAAAe;EAAAf,EAAA,MAAA2B;CAAA,OAAAA,MAAA3B,EAAA;CAAA,IAAA4B;CAAA,IAAA5B,EAAA,QAAA2B,OAAA3B,EAAA,QAAA0B,IAAA;EAA7EE,MAAA,oBAAA,OAAA;GAAgB,WAAAF;GAAqCC,UAAAA;EAA+B,CAAA;EAAA3B,EAAA,MAAA2B;EAAA3B,EAAA,MAAA0B;EAAA1B,EAAA,MAAA4B;CAAA,OAAAA,MAAA5B,EAAA;CAAA,IAAA6B;CAAA,IAAA7B,EAAA,QAAAE,WAAA;EAGvE2B,MAAAvD,KAAK,8BAA8B4B,SAAS;EAACF,EAAA,MAAAE;EAAAF,EAAA,MAAA6B;CAAA,OAAAA,MAAA7B,EAAA;CAAA,IAAA8B;CAAA,IAAA9B,EAAA,QAAA+B,OAAAC,IAAA,2BAAA,GAAA;EAIxCF,MAAAxD,KAAKuB,WAAW,mDAAmD;EAACG,EAAA,MAAA8B;CAAA,OAAAA,MAAA9B,EAAA;CAAA,IAAAiC;CAAA,IAAAjC,EAAA,QAAA+B,OAAAC,IAAA,2BAAA,GAAA;EAApFC,MAAA,oBAAA,OAAA;GAAgB,WAAAH;GACd,UAAA,qBAAA,OAAA;IAAe,WAAA;IAAf,UAAA,CAEE,oBAAA,OAAA,EACa,WAAAxD,KACTuB,WACA,6MACF,EAAC,CAAA,GAIH,oBAAA,OAAA,EACa,WAAAvB,KACTuB,WACA,0EACA,+GAEA,yDACA,mJACF,EAAC,CAAA,CAEC;;EACF,CAAA;EAAAG,EAAA,MAAAiC;CAAA,OAAAA,MAAAjC,EAAA;CAAA,IAAAkC;CAAA,IAAAlC,EAAA,QAAA+B,OAAAC,IAAA,2BAAA,GAAA;EAIOE,MAAA5D,KACT,iGACF;EAAC0B,EAAA,MAAAkC;CAAA,OAAAA,MAAAlC,EAAA;CAAA,IAAAmC;CAAA,IAAAnC,EAAA,QAAAG,mBAAAH,EAAA,QAAAd,gBAAAc,EAAA,QAAAyB,gBAAAzB,EAAA,QAAAX,OAAAW,EAAA,QAAAZ,OAAAY,EAAA,QAAAN,OAAAM,EAAA,QAAAK,QAAAL,EAAA,QAAAV,MAAA;EALH6C,MAAA,oBAAA,SAAA;GACe,cAAA;GACR,MAAA;GACM,WAAAD;GAGNxC;GACAN;GACAC;GACCC;GACQJ;GACPiB,OAAAA;GACGsB,UAAAA;GAAY,GAClBpB;EAAI,CAAA;EACRL,EAAA,MAAAG;EAAAH,EAAA,MAAAd;EAAAc,EAAA,MAAAyB;EAAAzB,EAAA,MAAAX;EAAAW,EAAA,MAAAZ;EAAAY,EAAA,MAAAN;EAAAM,EAAA,MAAAK;EAAAL,EAAA,MAAAV;EAAAU,EAAA,MAAAmC;CAAA,OAAAA,MAAAnC,EAAA;CAAA,IAAAoC;CAAA,IAAApC,EAAA,QAAAT,SAAAS,EAAA,QAAAqB,WAAArB,EAAA,QAAA6B,OAAA7B,EAAA,QAAAmC,KAAA;EA1CJC,MAAA,qBAAA,OAAA;GACa,WAAAP;GACJR,OAAAA;GACK9B,cAAAA;GAHd,UAAA,CAKE0C,KAuBAE,GAeI;;EAAAnC,EAAA,MAAAT;EAAAS,EAAA,MAAAqB;EAAArB,EAAA,MAAA6B;EAAA7B,EAAA,MAAAmC;EAAAnC,EAAA,MAAAoC;CAAA,OAAAA,MAAApC,EAAA;CAAA,IAAAqC;CAAA,IAAArC,EAAA,QAAAJ,gBAAA;EACUyC,MAAA/D,KAAKsB,cAAc;EAACI,EAAA,MAAAJ;EAAAI,EAAA,MAAAqC;CAAA,OAAAA,MAAArC,EAAA;CAAA,IAAAsC;CAAA,IAAAtC,EAAA,QAAAR,aAAAQ,EAAA,QAAAX,KAAA;EAAGiD,MAAA9C,UAAUH,GAAG;EAACW,EAAA,MAAAR;EAAAQ,EAAA,MAAAX;EAAAW,EAAA,MAAAsC;CAAA,OAAAA,MAAAtC,EAAA;CAAA,IAAAuC;CAAA,IAAAvC,EAAA,QAAAqC,OAAArC,EAAA,QAAAsC,KAAA;EAArDC,MAAA,oBAAA,OAAA;GAAgB,WAAAF;GAAuBC,UAAAA;EAAqB,CAAA;EAAAtC,EAAA,MAAAqC;EAAArC,EAAA,MAAAsC;EAAAtC,EAAA,MAAAuC;CAAA,OAAAA,MAAAvC,EAAA;CAAA,IAAAwC;CAAA,IAAAxC,EAAA,QAAA4B,OAAA5B,EAAA,QAAAoC,OAAApC,EAAA,QAAAuC,KAAA;EA/C9DC,MAAA,qBAAA,OAAA;GAAe,WAAA;GAAf,UAAA;IACEZ;IAEAQ;IA4CAG;GACI;;EAAAvC,EAAA,MAAA4B;EAAA5B,EAAA,MAAAoC;EAAApC,EAAA,MAAAuC;EAAAvC,EAAA,MAAAwC;CAAA,OAAAA,MAAAxC,EAAA;CAAA,OAhDNwC;AAgDM;;;ACpHV,SAAOc,WAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAR;CAAA,IAAAD;CAAA,IAAAD;CAAA,IAAAW;CAAA,IAAAP;CAAA,IAAAC;CAAA,IAAAF;CAAA,IAAAK,EAAA,OAAAD,IAAA;EAAoB,CAAA,CAAAP,MAAAC,KAAAC,KAAAC,MAAAC,YAAAC,WAAAO,IAAAF,aAAAC,QAAAJ;EASnBC,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAN;EAAAM,EAAA,KAAAP;EAAAO,EAAA,KAAAR;EAAAQ,EAAA,KAAAG;EAAAH,EAAA,KAAAJ;EAAAI,EAAA,KAAAH;EAAAG,EAAA,KAAAL;CAAA,OAAA;EAAAO,WAAAF,EAAA;EAAAN,MAAAM,EAAA;EAAAP,MAAAO,EAAA;EAAAR,OAAAQ,EAAA;EAAAG,OAAAH,EAAA;EAAAJ,aAAAI,EAAA;EAAAH,YAAAG,EAAA;EAAAL,OAAAK,EAAA;CAAA;CACN,MAAAK,QAAcpB,SAASO,IAAI;CAC3B,MAAAY,KAAWF,YAAYG,MAAKD;CAC5B,MAAAE,cAAwCD,MAAKE,eACzCC,SAASH,MAAKE,YACN,IAF4BE,KAAAA;CAE1B,IAAAC;CAAA,IAAAV,EAAA,OAAAK,MAAAb,QAAAQ,EAAA,QAAAN,OAAAM,EAAA,QAAAP,OAAAO,EAAA,QAAAM,eAAAN,EAAA,QAAAJ,cAAAI,EAAA,QAAAH,aAAAG,EAAA,QAAAL,MAAA;EAIVe,KAAA,oBAAC,OAAD;GACQ,MAAAL,MAAKb;GACGc,cAAAA;GACTb;GACAC;GACCC;GACMC;GACDC;EAAS,CAAA;EACpBG,EAAA,KAAAK,MAAAb;EAAAQ,EAAA,MAAAN;EAAAM,EAAA,MAAAP;EAAAO,EAAA,MAAAM;EAAAN,EAAA,MAAAJ;EAAAI,EAAA,MAAAH;EAAAG,EAAA,MAAAL;EAAAK,EAAA,MAAAU;CAAA,OAAAA,KAAAV,EAAA;CAAA,IAAAW;CAAA,IAAAX,EAAA,QAAAK,MAAAO,UAAAZ,EAAA,QAAAK,MAAAb,QAAAQ,EAAA,QAAAI,MAAAJ,EAAA,QAAAG,QAAAH,EAAA,QAAAU,IAAA;EATJC,KAAA,oBAAC,OAAD;GAAWP;GAAY,QAAAC,MAAKO;GAAsB,eAAAP,MAAKb;GAAK,GAAMW;GAChEO,UAAAA;EADI,CAAA;EAUEV,EAAA,MAAAK,MAAAO;EAAAZ,EAAA,MAAAK,MAAAb;EAAAQ,EAAA,MAAAI;EAAAJ,EAAA,MAAAG;EAAAH,EAAA,MAAAU;EAAAV,EAAA,MAAAW;CAAA,OAAAA,KAAAX,EAAA;CAAA,OAVRW;AAUQ"}

package/dist/components/fields/select/index.d.mts

@@ -29,7 +29,7 @@ declare function Select<V extends string | number = string>({ id, className, nam
 //#endregion
 //#region src/components/fields/select/SelectField.d.ts
 interface Props extends Omit<FieldProps, "children" | "group"> {
-  name: FieldName<string>;
+  name: FieldName<string | number | null | undefined>;
   placeholder?: string;
   options: SelectOption[];
 }

package/dist/components/fields/select/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["Ref","useImperativeHandle","useRef","useState","SelectChangeEvent","SelectHandle","SelectOption","autoUpdate","offset","Placement","useFloating","size","floatingUiSize","flip","useClick","useDismiss","useRole","useListNavigation","useTypeahead","useInteractions","FloatingPortal","FloatingFocusManager","ThemeColor","clsx","sizeVariant","Dialog","Button","SelectProps","id","className","name","variant","color","placeholder","disabled","options","V","value","onChange","event","placement","floatingMinWidth","zIndex","dialogClassName","ref","onFocus","onBlur","Select","isOpen","setIsOpen","activeIndex","setActiveIndex","selectedIndex","findIndex","option","selectedOption","refs","floatingStyles","context","open","onOpenChange","whileElementsMounted","middleware","padding","apply","rects","elements","availableHeight","Object","assign","floating","style","width","Math","max","reference","firstChild","firstElementChild","HTMLElement","maxHeight","min","listRef","listContentRef","map","label","current","isTypingRef","click","enabled","dismiss","role","listNav","onNavigate","loop","typeahead","onMatch","index","handleSelect","onTypingChange","isTyping","focus","domReference","getReferenceProps","getFloatingProps","getItemProps","type","setReference","icon","setFloating","i","isActive","isSelected","node","onClick","onKeyDown","key","preventDefault","FieldName","Field","FieldProps","SelectHandle","SelectOption","useField","useControl","Select","useRef","Props","Omit","name","placeholder","options","SelectField","id","forcedId","rest","controlInputRef","field","control","defaultValue","onFocus","current","focus","register","errors","blur","value","event","change"],"sources":["../../../../src/components/fields/select/Select.tsx","../../../../src/components/fields/select/SelectField.tsx"],"sourcesContent":["import { Ref, useImperativeHandle, useRef, useState } from \"react\";\nimport { SelectChangeEvent, SelectHandle, SelectOption } from \"./types\";\nimport {\n  autoUpdate,\n  offset,\n  Placement,\n  useFloating,\n  size as floatingUiSize,\n  flip,\n  useClick,\n  useDismiss,\n  useRole,\n  useListNavigation,\n  useTypeahead,\n  useInteractions,\n  FloatingPortal,\n  FloatingFocusManager,\n} from \"@floating-ui/react\";\nimport { ThemeColor } from \"../../../types\";\nimport clsx from \"clsx\";\nimport { sizeVariant } from \"../text/Input\";\nimport { Dialog } from \"../../dialog\";\nimport { Button } from \"../../button\";\n\ninterface SelectProps<V extends string | number = string> {\n  id?: string;\n  className?: string;\n  name: string;\n  variant?: \"normal\" | \"ghost\";\n  color?: ThemeColor;\n  size?: \"small\" | \"medium\" | \"large\" | \"custom\";\n  placeholder?: string;\n  disabled?: boolean;\n  options: SelectOption<V>[];\n  value: V | null;\n  onChange: (event: SelectChangeEvent<V>) => void;\n  placement?: Placement;\n  floatingMinWidth?: number;\n  zIndex?: number;\n\n  dialogClassName?: string;\n  ref?: Ref<SelectHandle>;\n\n  onFocus?: () => void;\n  onBlur?: () => void;\n}\n\nexport function Select<V extends string | number = string>({\n  id,\n  className,\n  name,\n  variant = \"normal\",\n  zIndex,\n  color = \"yellow\",\n  size = \"medium\",\n  placeholder = \"Select ...\",\n  disabled = false,\n  options,\n  value,\n  onChange,\n  floatingMinWidth = 130,\n  placement = \"bottom\",\n  onFocus,\n  onBlur,\n  dialogClassName,\n  ref,\n}: SelectProps<V>) {\n  const [isOpen, setIsOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState<number | null>(null);\n\n  const selectedIndex = options.findIndex((option) => option.value === value);\n  const selectedOption = selectedIndex !== -1 ? options[selectedIndex] : null;\n\n  const { refs, floatingStyles, context } = useFloating({\n    placement,\n    open: isOpen,\n    onOpenChange: setIsOpen,\n    whileElementsMounted: autoUpdate,\n    middleware: [\n      offset(5),\n      flip({ padding: 10 }),\n      floatingUiSize({\n        apply({ rects, elements, availableHeight }) {\n          Object.assign(elements.floating.style, {\n            width: `${Math.max(floatingMinWidth, rects.reference.width)}px`,\n          });\n          const firstChild = elements.floating.firstElementChild as HTMLElement;\n          if (firstChild) {\n            firstChild.style.maxHeight = `${Math.min(availableHeight, 320)}px`;\n          }\n        },\n        padding: 10,\n      }),\n    ],\n  });\n\n  const listRef = useRef<(HTMLElement | null)[]>([]);\n  const listContentRef = useRef(options.map((option) => option.label));\n  listContentRef.current = options.map((option) => option.label);\n\n  const isTypingRef = useRef(false);\n\n  const click = useClick(context, { event: \"mousedown\", enabled: !disabled });\n  const dismiss = useDismiss(context);\n  const role = useRole(context, { role: \"select\" });\n  const listNav = useListNavigation(context, {\n    listRef,\n    activeIndex,\n    selectedIndex,\n    onNavigate: setActiveIndex,\n    loop: true,\n    enabled: !disabled,\n  });\n\n  const typeahead = useTypeahead(context, {\n    listRef: listContentRef,\n    activeIndex,\n    selectedIndex: selectedIndex === -1 ? null : selectedIndex,\n    onMatch: isOpen ? setActiveIndex : (index) => handleSelect(index ?? -1),\n    onTypingChange(isTyping) {\n      isTypingRef.current = isTyping;\n    },\n    enabled: !disabled,\n  });\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      focus: () => {\n        (refs.domReference.current as HTMLElement | null)?.focus();\n      },\n    }),\n    [refs.domReference],\n  );\n\n  const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([\n    dismiss,\n    role,\n    listNav,\n    typeahead,\n    click,\n  ]);\n\n  function handleSelect(index: number) {\n    const option = options[index];\n    onChange({\n      type: \"select-one\",\n      name,\n      value: option ? option.value : null,\n    });\n    setIsOpen(false);\n  }\n\n  return (\n    <>\n      <div\n        data-color={color}\n        aria-disabled={disabled}\n        className={clsx(\n          \"p8n-input-text box-border flex cursor-pointer rounded-[calc(var(--h-input)/2)] -outline-offset-1\",\n          className,\n          sizeVariant[size],\n          isOpen && \"focus\",\n        )}\n        data-variant={variant}\n        ref={refs.setReference}\n        tabIndex={disabled ? -1 : 0}\n        {...getReferenceProps({ onFocus, onBlur })}\n      >\n        <span className=\"flex flex-1 items-center truncate px-2\">\n          {selectedOption ? (\n            <>\n              {selectedOption.icon && <i className={selectedOption.icon}></i>}\n              {selectedOption.label}\n            </>\n          ) : (\n            <>{placeholder}</>\n          )}\n        </span>\n        <Button\n          id={id}\n          color=\"gray\"\n          withRipple={false}\n          icon\n          variant=\"text\"\n          focusable={false}\n          type=\"button\"\n          size=\"input\"\n        >\n          <i className={isOpen ? \"fe-angle-up\" : \"fe-angle-down\"}></i>\n        </Button>\n      </div>\n      {isOpen && (\n        <FloatingPortal preserveTabOrder={true}>\n          <FloatingFocusManager context={context} modal={false}>\n            <div\n              className=\"z-dialog outline-hidden\"\n              data-testid=\"select-list\"\n              ref={refs.setFloating}\n              style={{ ...floatingStyles, zIndex }}\n              {...getFloatingProps()}\n            >\n              <Dialog\n                placement={context.placement}\n                className={clsx(\"motion-safe:animate-fade-in-list overflow-auto\", dialogClassName)}\n                rounded={!dialogClassName}\n              >\n                {options.map((option, i) => {\n                  const isActive = i === activeIndex;\n                  const isSelected = i === selectedIndex;\n                  return (\n                    <button\n                      type=\"button\"\n                      key={option.value}\n                      className={clsx(\"option\", isSelected ? \"bg-gray-2\" : isActive && \"bg-gray-1\")}\n                      data-presentation=\"compact\"\n                      role=\"option\"\n                      aria-selected={isSelected}\n                      ref={(node) => {\n                        listRef.current[i] = node;\n                      }}\n                      {...getItemProps({\n                        onClick() {\n                          handleSelect(i);\n                        },\n                        onKeyDown(event) {\n                          if (event.key === \"Enter\") {\n                            event.preventDefault();\n                            handleSelect(i);\n                          }\n                          if (event.key === \" \" && !isTypingRef.current) {\n                            event.preventDefault();\n                            handleSelect(i);\n                          }\n                        },\n                      })}\n                    >\n                      {option.icon && <i className={option.icon}></i>}\n                      {option.label}\n                    </button>\n                  );\n                })}\n              </Dialog>\n            </div>\n          </FloatingFocusManager>\n        </FloatingPortal>\n      )}\n    </>\n  );\n}\n","import { FieldName } from \"@conform-to/react/future\";\nimport { Field, FieldProps } from \"../field/Field\";\nimport { SelectHandle, SelectOption } from \"./types\";\nimport { useField, useControl } from \"@conform-to/react/future\";\nimport { Select } from \"./Select\";\nimport { useRef } from \"react\";\n\ninterface Props extends Omit<FieldProps, \"children\" | \"group\"> {\n  name: FieldName<string>;\n  placeholder?: string;\n  options: SelectOption[];\n}\n\nexport function SelectField({ name, placeholder, options, id: forcedId, ...rest }: Props) {\n  const controlInputRef = useRef<SelectHandle>(null);\n  const field = useField(name);\n  const id = forcedId ?? field.id;\n  const control = useControl({\n    defaultValue: field.defaultValue,\n    onFocus() {\n      controlInputRef.current?.focus();\n    },\n  });\n\n  return (\n    <>\n      <input\n        type=\"text\"\n        name={field.name}\n        autoComplete=\"off\"\n        defaultValue={field.defaultValue}\n        ref={control.register}\n        hidden\n      />\n      <Field id={id} errors={field.errors} data-testid={field.name} {...rest}>\n        <Select\n          name={field.name}\n          ref={controlInputRef}\n          placeholder={placeholder}\n          options={options}\n          onFocus={control.focus}\n          onBlur={control.blur}\n          value={control.value ?? null}\n          onChange={(event) => control.change(event.value)}\n        ></Select>\n      </Field>\n    </>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":["Ref","useImperativeHandle","useRef","useState","SelectChangeEvent","SelectHandle","SelectOption","autoUpdate","offset","Placement","useFloating","size","floatingUiSize","flip","useClick","useDismiss","useRole","useListNavigation","useTypeahead","useInteractions","FloatingPortal","FloatingFocusManager","ThemeColor","clsx","sizeVariant","Dialog","Button","SelectProps","id","className","name","variant","color","placeholder","disabled","options","V","value","onChange","event","placement","floatingMinWidth","zIndex","dialogClassName","ref","onFocus","onBlur","Select","isOpen","setIsOpen","activeIndex","setActiveIndex","selectedIndex","findIndex","option","selectedOption","refs","floatingStyles","context","open","onOpenChange","whileElementsMounted","middleware","padding","apply","rects","elements","availableHeight","Object","assign","floating","style","width","Math","max","reference","firstChild","firstElementChild","HTMLElement","maxHeight","min","listRef","listContentRef","map","label","current","isTypingRef","click","enabled","dismiss","role","listNav","onNavigate","loop","typeahead","onMatch","index","handleSelect","onTypingChange","isTyping","focus","domReference","getReferenceProps","getFloatingProps","getItemProps","type","setReference","icon","setFloating","i","isActive","isSelected","node","onClick","onKeyDown","key","preventDefault","FieldName","Field","FieldProps","SelectHandle","SelectOption","useField","useControl","Select","useRef","Props","Omit","name","placeholder","options","SelectField","id","forcedId","rest","controlInputRef","field","control","defaultValue","onFocus","current","focus","register","errors","blur","value","event","change"],"sources":["../../../../src/components/fields/select/Select.tsx","../../../../src/components/fields/select/SelectField.tsx"],"sourcesContent":["import { Ref, useImperativeHandle, useRef, useState } from \"react\";\nimport { SelectChangeEvent, SelectHandle, SelectOption } from \"./types\";\nimport {\n  autoUpdate,\n  offset,\n  Placement,\n  useFloating,\n  size as floatingUiSize,\n  flip,\n  useClick,\n  useDismiss,\n  useRole,\n  useListNavigation,\n  useTypeahead,\n  useInteractions,\n  FloatingPortal,\n  FloatingFocusManager,\n} from \"@floating-ui/react\";\nimport { ThemeColor } from \"../../../types\";\nimport clsx from \"clsx\";\nimport { sizeVariant } from \"../text/Input\";\nimport { Dialog } from \"../../dialog\";\nimport { Button } from \"../../button\";\n\ninterface SelectProps<V extends string | number = string> {\n  id?: string;\n  className?: string;\n  name: string;\n  variant?: \"normal\" | \"ghost\";\n  color?: ThemeColor;\n  size?: \"small\" | \"medium\" | \"large\" | \"custom\";\n  placeholder?: string;\n  disabled?: boolean;\n  options: SelectOption<V>[];\n  value: V | null;\n  onChange: (event: SelectChangeEvent<V>) => void;\n  placement?: Placement;\n  floatingMinWidth?: number;\n  zIndex?: number;\n\n  dialogClassName?: string;\n  ref?: Ref<SelectHandle>;\n\n  onFocus?: () => void;\n  onBlur?: () => void;\n}\n\nexport function Select<V extends string | number = string>({\n  id,\n  className,\n  name,\n  variant = \"normal\",\n  zIndex,\n  color = \"yellow\",\n  size = \"medium\",\n  placeholder = \"Select ...\",\n  disabled = false,\n  options,\n  value,\n  onChange,\n  floatingMinWidth = 130,\n  placement = \"bottom\",\n  onFocus,\n  onBlur,\n  dialogClassName,\n  ref,\n}: SelectProps<V>) {\n  const [isOpen, setIsOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState<number | null>(null);\n\n  const selectedIndex = options.findIndex((option) => option.value === value);\n  const selectedOption = selectedIndex !== -1 ? options[selectedIndex] : null;\n\n  const { refs, floatingStyles, context } = useFloating({\n    placement,\n    open: isOpen,\n    onOpenChange: setIsOpen,\n    whileElementsMounted: autoUpdate,\n    middleware: [\n      offset(5),\n      flip({ padding: 10 }),\n      floatingUiSize({\n        apply({ rects, elements, availableHeight }) {\n          Object.assign(elements.floating.style, {\n            width: `${Math.max(floatingMinWidth, rects.reference.width)}px`,\n          });\n          const firstChild = elements.floating.firstElementChild as HTMLElement;\n          if (firstChild) {\n            firstChild.style.maxHeight = `${Math.min(availableHeight, 320)}px`;\n          }\n        },\n        padding: 10,\n      }),\n    ],\n  });\n\n  const listRef = useRef<(HTMLElement | null)[]>([]);\n  const listContentRef = useRef(options.map((option) => option.label));\n  listContentRef.current = options.map((option) => option.label);\n\n  const isTypingRef = useRef(false);\n\n  const click = useClick(context, { event: \"mousedown\", enabled: !disabled });\n  const dismiss = useDismiss(context);\n  const role = useRole(context, { role: \"select\" });\n  const listNav = useListNavigation(context, {\n    listRef,\n    activeIndex,\n    selectedIndex,\n    onNavigate: setActiveIndex,\n    loop: true,\n    enabled: !disabled,\n  });\n\n  const typeahead = useTypeahead(context, {\n    listRef: listContentRef,\n    activeIndex,\n    selectedIndex: selectedIndex === -1 ? null : selectedIndex,\n    onMatch: isOpen ? setActiveIndex : (index) => handleSelect(index ?? -1),\n    onTypingChange(isTyping) {\n      isTypingRef.current = isTyping;\n    },\n    enabled: !disabled,\n  });\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      focus: () => {\n        (refs.domReference.current as HTMLElement | null)?.focus();\n      },\n    }),\n    [refs.domReference],\n  );\n\n  const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([\n    dismiss,\n    role,\n    listNav,\n    typeahead,\n    click,\n  ]);\n\n  function handleSelect(index: number) {\n    const option = options[index];\n    onChange({\n      type: \"select-one\",\n      name,\n      value: option ? option.value : null,\n    });\n    setIsOpen(false);\n  }\n\n  return (\n    <>\n      <div\n        data-color={color}\n        aria-disabled={disabled}\n        className={clsx(\n          \"p8n-input-text box-border flex cursor-pointer rounded-[calc(var(--h-input)/2)] -outline-offset-1\",\n          className,\n          sizeVariant[size],\n          isOpen && \"focus\",\n        )}\n        data-variant={variant}\n        ref={refs.setReference}\n        tabIndex={disabled ? -1 : 0}\n        {...getReferenceProps({ onFocus, onBlur })}\n      >\n        <span className=\"flex flex-1 items-center truncate px-2\">\n          {selectedOption ? (\n            <>\n              {selectedOption.icon && <i className={selectedOption.icon}></i>}\n              {selectedOption.label}\n            </>\n          ) : (\n            <>{placeholder}</>\n          )}\n        </span>\n        <Button\n          id={id}\n          color=\"gray\"\n          withRipple={false}\n          icon\n          variant=\"text\"\n          focusable={false}\n          type=\"button\"\n          size=\"input\"\n        >\n          <i className={isOpen ? \"fe-angle-up\" : \"fe-angle-down\"}></i>\n        </Button>\n      </div>\n      {isOpen && (\n        <FloatingPortal preserveTabOrder={true}>\n          <FloatingFocusManager context={context} modal={false}>\n            <div\n              className=\"z-dialog outline-hidden\"\n              data-testid=\"select-list\"\n              ref={refs.setFloating}\n              style={{ ...floatingStyles, zIndex }}\n              {...getFloatingProps()}\n            >\n              <Dialog\n                placement={context.placement}\n                className={clsx(\"motion-safe:animate-fade-in-list overflow-auto\", dialogClassName)}\n                rounded={!dialogClassName}\n              >\n                {options.map((option, i) => {\n                  const isActive = i === activeIndex;\n                  const isSelected = i === selectedIndex;\n                  return (\n                    <button\n                      type=\"button\"\n                      key={option.value}\n                      className={clsx(\"option\", isSelected ? \"bg-gray-2\" : isActive && \"bg-gray-1\")}\n                      data-presentation=\"compact\"\n                      role=\"option\"\n                      aria-selected={isSelected}\n                      ref={(node) => {\n                        listRef.current[i] = node;\n                      }}\n                      {...getItemProps({\n                        onClick() {\n                          handleSelect(i);\n                        },\n                        onKeyDown(event) {\n                          if (event.key === \"Enter\") {\n                            event.preventDefault();\n                            handleSelect(i);\n                          }\n                          if (event.key === \" \" && !isTypingRef.current) {\n                            event.preventDefault();\n                            handleSelect(i);\n                          }\n                        },\n                      })}\n                    >\n                      {option.icon && <i className={option.icon}></i>}\n                      {option.label}\n                    </button>\n                  );\n                })}\n              </Dialog>\n            </div>\n          </FloatingFocusManager>\n        </FloatingPortal>\n      )}\n    </>\n  );\n}\n","import { FieldName } from \"@conform-to/react/future\";\nimport { Field, FieldProps } from \"../field/Field\";\nimport { SelectHandle, SelectOption } from \"./types\";\nimport { useField, useControl } from \"@conform-to/react/future\";\nimport { Select } from \"./Select\";\nimport { useRef } from \"react\";\n\ninterface Props extends Omit<FieldProps, \"children\" | \"group\"> {\n  name: FieldName<string | number | null | undefined>;\n  placeholder?: string;\n  options: SelectOption[];\n}\n\nexport function SelectField({ name, placeholder, options, id: forcedId, ...rest }: Props) {\n  const controlInputRef = useRef<SelectHandle>(null);\n  const field = useField(name);\n  const id = forcedId ?? field.id;\n  const control = useControl({\n    defaultValue: field.defaultValue,\n    onFocus() {\n      controlInputRef.current?.focus();\n    },\n  });\n\n  return (\n    <>\n      <input\n        type=\"text\"\n        name={field.name}\n        autoComplete=\"off\"\n        defaultValue={field.defaultValue}\n        ref={control.register}\n        hidden\n      />\n      <Field id={id} errors={field.errors} data-testid={field.name} {...rest}>\n        <Select\n          name={field.name}\n          ref={controlInputRef}\n          placeholder={placeholder}\n          options={options}\n          onFocus={control.focus}\n          onBlur={control.blur}\n          value={control.value ?? null}\n          onChange={(event) => control.change(event.value)}\n        ></Select>\n      </Field>\n    </>\n  );\n}\n"],"mappings":"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"}

package/dist/components/fields/text/index.d.mts

@@ -46,7 +46,7 @@ declare function PasswordField({ name, showScore, id: forcedId, ...rest }: Props
 //#endregion
 //#region src/components/fields/text/SlugField.d.ts
 interface Props extends Omit<FieldProps, "errors" | "children" | "group"> {
-  name: FieldName<string | null>;
+  name: FieldName<string | null | undefined>;
 }
 declare function SlugField({ name, id: forcedId, ...rest }: Props): import("react").JSX.Element;
 //#endregion

package/dist/components/fields/textarea/index.d.mts

@@ -13,7 +13,7 @@ declare function Textarea({ variant, color, disabled, className, readOnly, actio
 //#endregion
 //#region src/components/fields/textarea/TextareaField.d.ts
 interface Props extends Omit<FieldProps, "errors" | "children" | "group"> {
-  name: FieldName<string | null>;
+  name: FieldName<string | null | undefined>;
   textareaClassName?: string;
 }
 declare function TextareaField({ name, textareaClassName, id: forcedId, ...rest }: Props): import("react").JSX.Element;

package/dist/components/fields/textarea/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["clsx","ComponentProps","ReactNode","RefObject","ThemeColor","TextareaProps","variant","color","action","ref","HTMLTextAreaElement","Textarea","t0","$","_c","className","readOnly","rest","t1","t2","t3","disabled","undefined","t4","t5","Symbol","for","t6","e","target","select","t7","t8","t9","t10","useField","FieldName","Field","FieldProps","Textarea","Props","Omit","name","textareaClassName","TextareaField","t0","$","_c","forcedId","rest","id","field","t1","defaultValue","t2","errors"],"sources":["../../../../src/components/fields/textarea/Textarea.tsx","../../../../src/components/fields/textarea/TextareaField.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { ComponentProps, ReactNode, RefObject } from \"react\";\nimport type { ThemeColor } from \"../../../types\";\n\nexport interface TextareaProps extends ComponentProps<\"textarea\"> {\n  variant?: \"normal\" | \"ghost\";\n  color?: ThemeColor;\n  action?: ReactNode;\n  ref?: RefObject<HTMLTextAreaElement>;\n}\n\nexport function Textarea({\n  variant = \"normal\",\n  color = \"yellow\",\n  disabled = false,\n  className,\n  readOnly,\n  action,\n  ref,\n  ...rest\n}: TextareaProps) {\n  return (\n    <div className={clsx(\"relative block\", className)}>\n      <textarea\n        data-color={color}\n        data-variant={variant}\n        ref={ref}\n        className={clsx(\n          \"p8n-textarea h-full w-full min-w-0 appearance-none rounded-2xl p-2 outline-offset-[-1px] filter-none\",\n        )}\n        readOnly={readOnly}\n        onFocus={(e) => {\n          if (readOnly) {\n            e.target.select();\n          }\n        }}\n        {...(disabled ? { disabled } : {})}\n        {...rest}\n      />\n      {action && <div className=\"absolute top-1 right-1\">{action}</div>}\n    </div>\n  );\n}\n","import { useField, type FieldName } from \"@conform-to/react/future\";\nimport { Field, type FieldProps } from \"../field/Field\";\nimport { Textarea } from \"./Textarea\";\n\ninterface Props extends Omit<FieldProps, \"errors\" | \"children\" | \"group\"> {\n  name: FieldName<string | null>;\n  textareaClassName?: string;\n}\n\nexport function TextareaField({ name, textareaClassName, id: forcedId, ...rest }: Props) {\n  const field = useField(name);\n  const id = forcedId ?? field.id;\n\n  return (\n    <Field id={id} errors={field.errors} data-testid={field.name} {...rest}>\n      <Textarea name={field.name} defaultValue={field.defaultValue} className={textareaClassName} />\n    </Field>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":["clsx","ComponentProps","ReactNode","RefObject","ThemeColor","TextareaProps","variant","color","action","ref","HTMLTextAreaElement","Textarea","t0","$","_c","className","readOnly","rest","t1","t2","t3","disabled","undefined","t4","t5","Symbol","for","t6","e","target","select","t7","t8","t9","t10","useField","FieldName","Field","FieldProps","Textarea","Props","Omit","name","textareaClassName","TextareaField","t0","$","_c","forcedId","rest","id","field","t1","defaultValue","t2","errors"],"sources":["../../../../src/components/fields/textarea/Textarea.tsx","../../../../src/components/fields/textarea/TextareaField.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { ComponentProps, ReactNode, RefObject } from \"react\";\nimport type { ThemeColor } from \"../../../types\";\n\nexport interface TextareaProps extends ComponentProps<\"textarea\"> {\n  variant?: \"normal\" | \"ghost\";\n  color?: ThemeColor;\n  action?: ReactNode;\n  ref?: RefObject<HTMLTextAreaElement>;\n}\n\nexport function Textarea({\n  variant = \"normal\",\n  color = \"yellow\",\n  disabled = false,\n  className,\n  readOnly,\n  action,\n  ref,\n  ...rest\n}: TextareaProps) {\n  return (\n    <div className={clsx(\"relative block\", className)}>\n      <textarea\n        data-color={color}\n        data-variant={variant}\n        ref={ref}\n        className={clsx(\n          \"p8n-textarea h-full w-full min-w-0 appearance-none rounded-2xl p-2 outline-offset-[-1px] filter-none\",\n        )}\n        readOnly={readOnly}\n        onFocus={(e) => {\n          if (readOnly) {\n            e.target.select();\n          }\n        }}\n        {...(disabled ? { disabled } : {})}\n        {...rest}\n      />\n      {action && <div className=\"absolute top-1 right-1\">{action}</div>}\n    </div>\n  );\n}\n","import { useField, type FieldName } from \"@conform-to/react/future\";\nimport { Field, type FieldProps } from \"../field/Field\";\nimport { Textarea } from \"./Textarea\";\n\ninterface Props extends Omit<FieldProps, \"errors\" | \"children\" | \"group\"> {\n  name: FieldName<string | null | undefined>;\n  textareaClassName?: string;\n}\n\nexport function TextareaField({ name, textareaClassName, id: forcedId, ...rest }: Props) {\n  const field = useField(name);\n  const id = forcedId ?? field.id;\n\n  return (\n    <Field id={id} errors={field.errors} data-testid={field.name} {...rest}>\n      <Textarea name={field.name} defaultValue={field.defaultValue} className={textareaClassName} />\n    </Field>\n  );\n}\n"],"mappings":"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"}

package/dist/components/fields/wysiwyg/index.d.mts

@@ -26,7 +26,7 @@ declare const wysiwygSchema: z.ZodMiniObject<{
   html: z.ZodMiniOptional<z.ZodMiniString<string>>;
   state: z.ZodMiniCustom<SerializedEditorState<import("lexical").SerializedLexicalNode>, SerializedEditorState<import("lexical").SerializedLexicalNode>>;
 }, z.core.$strip>;
-declare function parseWysiwygValue(payload: unknown): WysiwygValue | undefined;
+declare function parseWysiwygValue(payload: unknown): WysiwygValue | null;
 declare function serializeWysiwygValue(value: unknown): string | null;
 //#endregion
 //#region src/components/fields/wysiwyg/Wysiwyg.d.ts