@fuf-stack/uniform 1.21.0 → 1.22.1

package/dist/{FieldCard-B0q2ozHB.js.map → FieldCard-x142VXrR.js.map}

@@ -1 +1 @@
-{"version":3,"file":"FieldCard-B0q2ozHB.js","names":[],"sources":["../src/FieldCard/subcomponents/FieldCardValidationError.tsx","../src/FieldCard/FieldCard.tsx"],"sourcesContent":["import type { FieldError } from 'react-hook-form';\n\nimport {\n  AnimatePresence,\n  motion,\n  useReducedMotion,\n} from '@fuf-stack/pixel-motion';\nimport { cn } from '@fuf-stack/pixel-utils';\n\nimport { useUniformField } from '../../hooks/useUniformField';\nimport FieldValidationError from '../../partials/FieldValidationError/FieldValidationError';\n\nexport interface FieldCardValidationErrorProps {\n  /** CSS class name for the error footer wrapper */\n  className?: string;\n  /** Error object from parent FieldCard (passed directly to avoid duplicate hook calls) */\n  error?: FieldError[] | undefined;\n  /** CSS class name for the error text (controls color based on invalid state) */\n  errorTextClassName?: string;\n  /** Field name */\n  name: string;\n}\n\n/**\n * Renders validation errors in the footer of a FieldCard component.\n *\n * This component handles displaying field-level validation errors with proper\n * accessibility attributes and animates them in/out using Framer Motion.\n *\n * Note: Object-level errors (_errors) are always shown when they exist,\n * but the danger styling is controlled by the parent FieldCard based on\n * whether child fields have been touched.\n */\nconst FieldCardValidationError = ({\n  className = undefined,\n  error = undefined,\n  errorTextClassName = undefined,\n  name,\n}: FieldCardValidationErrorProps) => {\n  const { getErrorMessageProps, getHelperWrapperProps, testId } =\n    useUniformField({\n      name,\n    });\n\n  // disable all animation if user prefers reduced motion\n  const disableAnimation = useReducedMotion();\n\n  // Always show object-level errors (_errors) when they exist\n  // @ts-expect-error - error._errors exists but not typed\n  const hasErrors = !!error?._errors;\n\n  return (\n    <AnimatePresence initial={!disableAnimation}>\n      {hasErrors ? (\n        <motion.div\n          key=\"field-card-errors\"\n          exit={disableAnimation ? undefined : { opacity: 0, height: 0 }}\n          initial={disableAnimation ? false : { height: 0, opacity: 0 }}\n          style={{ overflow: 'hidden' }}\n          transition={{ duration: 0.4, ease: 'circOut' }}\n          animate={\n            disableAnimation ? undefined : { opacity: 1, height: 'auto' }\n          }\n        >\n          <div\n            {...getHelperWrapperProps()}\n            className={cn(getHelperWrapperProps()?.className, className)}\n          >\n            <div\n              {...getErrorMessageProps()}\n              className={cn(\n                getErrorMessageProps()?.className,\n                errorTextClassName,\n              )}\n            >\n              <FieldValidationError\n                // @ts-expect-error - error._errors exists but not typed\n                error={error._errors}\n                testId={testId}\n              />\n            </div>\n          </div>\n        </motion.div>\n      ) : null}\n    </AnimatePresence>\n  );\n};\n\nexport default FieldCardValidationError;\n","import type { TVClassName } from '@fuf-stack/pixel-utils';\nimport type { ReactNode } from 'react';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\nimport { useDebounce } from '@fuf-stack/pixels';\n\nimport { checkFieldIsRequired, useFormContext } from '../hooks/useFormContext';\nimport { useUniformField } from '../hooks/useUniformField';\nimport FieldCardValidationError from './subcomponents/FieldCardValidationError';\n\n/**\n * Recursively checks if any child field has an error (regardless of touched state).\n * Returns true if at least one child has an error.\n */\nexport const hasAnyChildErrors = (\n  errors: Record<string, unknown> | undefined,\n): boolean => {\n  if (!errors) {\n    return false;\n  }\n\n  return Object.keys(errors)\n    .filter((key) => {\n      return key !== '_errors';\n    })\n    .some((key) => {\n      const errorValue = errors[key];\n      if (errorValue === undefined) {\n        return false;\n      }\n      // If errorValue is an array, it's a leaf field error\n      if (Array.isArray(errorValue)) {\n        return true;\n      }\n      // Recursively check nested objects\n      if (typeof errorValue === 'object' && errorValue !== null) {\n        return hasAnyChildErrors(errorValue as Record<string, unknown>);\n      }\n      return false;\n    });\n};\n\n/**\n * Recursively checks if any child field is touched.\n * Returns true if at least one child is touched.\n */\nexport const hasAnyChildTouched = (\n  touched: Record<string, unknown> | undefined,\n): boolean => {\n  if (!touched) {\n    return false;\n  }\n\n  return Object.keys(touched)\n    .filter((key) => {\n      return key !== '_errors';\n    })\n    .some((key) => {\n      const touchedValue = touched[key];\n      if (touchedValue === undefined) {\n        return false;\n      }\n      // If touchedValue is truthy (boolean true), field is touched\n      if (touchedValue === true) {\n        return true;\n      }\n      // Recursively check nested objects\n      if (typeof touchedValue === 'object' && touchedValue !== null) {\n        return hasAnyChildTouched(touchedValue as Record<string, unknown>);\n      }\n      return false;\n    });\n};\n\n/**\n * Recursively checks if any child field with an error is also touched.\n * Returns true if at least one touched child has an error.\n */\nexport const hasVisibleChildErrors = (\n  errors: Record<string, unknown> | undefined,\n  touched: Record<string, unknown> | undefined,\n): boolean => {\n  if (!errors || !touched) {\n    return false;\n  }\n\n  return Object.keys(errors)\n    .filter((key) => {\n      // Skip object-level errors (_errors) - those are handled separately\n      return key !== '_errors';\n    })\n    .some((key) => {\n      const errorValue = errors[key];\n      const touchedValue = touched[key];\n\n      // If this key doesn't exist in both errors and touched, skip\n      if (errorValue === undefined || touchedValue === undefined) {\n        return false;\n      }\n\n      // If errorValue is an array, it's a leaf field error\n      if (Array.isArray(errorValue)) {\n        // touchedValue being truthy means the field is touched\n        return !!touchedValue;\n      }\n\n      // Recursively check nested objects\n      if (typeof errorValue === 'object' && errorValue !== null) {\n        return hasVisibleChildErrors(\n          errorValue as Record<string, unknown>,\n          touchedValue as Record<string, unknown>,\n        );\n      }\n\n      return false;\n    });\n};\n\nexport const fieldCardVariants = tv({\n  slots: {\n    /** base class for the field card wrapper */\n    base: [\n      // base styles\n      'overflow-hidden rounded-small border bg-content1',\n      // animate border color change, respect reduced motion\n      'transition-colors duration-150 motion-reduce:transition-none',\n    ],\n    /** class for the label/header */\n    label: [\n      // override HeroUI label positioning and display\n      'pointer-events-auto! static! z-auto! block! w-full!',\n      // reset any transforms or translations\n      'translate-x-0! translate-y-0! transform-none!',\n      // card header styling - use text-medium (16px) for proper header size\n      'rounded-t-small border-b p-3 font-semibold text-medium',\n      // animate border and text color change, respect reduced motion\n      'transition-colors duration-150 motion-reduce:transition-none',\n    ],\n    /** class for the content */\n    content: [\n      // same as p-3 of Card component\n      'p-3',\n      // default grid for form components (see Grid component)\n      'grid gap-4',\n    ],\n    /** class for the error footer wrapper */\n    errorFooter: [\n      'border-t',\n      // force helper to be visible and add padding (pt-1 to compensate for inner content's top padding)\n      'block px-3 pb-2 pt-1',\n      // animate border color change, respect reduced motion\n      'transition-colors duration-150 motion-reduce:transition-none',\n    ],\n    /** class for the error text (empty base, color controlled by variant) */\n    errorText: [],\n  },\n  variants: {\n    invalid: {\n      true: {\n        base: 'border-danger-200',\n        label: 'border-danger-200 text-danger',\n        errorFooter: 'border-danger-200',\n        errorText: '!text-danger text-tiny',\n      },\n      false: {\n        base: 'border-divider',\n        label: 'border-divider text-foreground',\n        errorFooter: 'border-divider',\n        errorText: '!text-foreground-500 text-tiny',\n      },\n    },\n  },\n  defaultVariants: {\n    invalid: false,\n  },\n});\n\ntype ClassName = TVClassName<typeof fieldCardVariants>;\n\nexport interface FieldCardProps {\n  /** Content to render inside the card */\n  children: ReactNode;\n  /** CSS class name */\n  className?: ClassName;\n  /** Label content for the card header */\n  label: ReactNode;\n  /** Field name for validation */\n  name: string;\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n}\n\n/**\n * FieldCard component - A card-styled container with label header and error footer\n *\n * Displays form field content in a card layout with:\n * - Label/title in the header\n * - Content in the body\n * - Validation errors in the footer\n * - Danger outline when validation errors exist\n */\nconst FieldCard = ({\n  children,\n  className: _className = undefined,\n  name,\n  ...uniformFieldProps\n}: FieldCardProps) => {\n  const { error, getLabelProps, label } = useUniformField({\n    name,\n    ...uniformFieldProps,\n  });\n\n  const {\n    control,\n    formState: { touchedFields, submitCount },\n    validation,\n  } = useFormContext();\n\n  // Check if any registered child field is required\n  const validationInstance = validation?.baseInstance ?? validation?.instance;\n  const registeredFields: string[] = Array.from(\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    (control as any)._names?.mount ?? [],\n  );\n  const childFieldPrefix = `${name}.`;\n  const isRequired = validationInstance\n    ? registeredFields\n        .filter((f) => {\n          return f.startsWith(childFieldPrefix);\n        })\n        .some((f) => {\n          return checkFieldIsRequired(\n            validationInstance,\n            f.split('.').filter((k) => {\n              return k !== '';\n            }),\n          );\n        })\n    : false;\n\n  // Get touched state for this field's children by traversing the path\n  const getNestedValue = (\n    obj: Record<string, unknown> | undefined,\n    path: string,\n  ): Record<string, unknown> | undefined => {\n    if (!obj) {\n      return undefined;\n    }\n    const keys = path.split('.');\n    let current: unknown = obj;\n    keys.every((key) => {\n      if (current && typeof current === 'object') {\n        current = (current as Record<string, unknown>)[key];\n        return true;\n      }\n      current = undefined;\n      return false;\n    });\n    return current as Record<string, unknown> | undefined;\n  };\n\n  const fieldTouched = getNestedValue(\n    touchedFields as Record<string, unknown>,\n    name,\n  );\n\n  // Check for object-level errors (_errors)\n  // @ts-expect-error - error._errors exists but not typed\n  const hasObjectErrors = !!error?._errors;\n\n  const errorRecord = error as unknown as Record<string, unknown>;\n\n  // Check if any child field has errors (regardless of touched state)\n  const hasChildErrors = hasAnyChildErrors(errorRecord);\n  // Check if any child field is touched\n  const isAnyChildTouched = hasAnyChildTouched(fieldTouched);\n\n  // Show invalid styling (danger border/header/error text) when:\n  // 1. Any child field has an error AND (it's touched OR form was submitted), OR\n  // 2. Object-level _errors exists AND no child errors AND (any child touched OR submitted)\n  const rawShowInvalid =\n    (hasChildErrors &&\n      (hasVisibleChildErrors(errorRecord, fieldTouched) || submitCount > 0)) ||\n    (hasObjectErrors &&\n      !hasChildErrors &&\n      (isAnyChildTouched || submitCount > 0));\n\n  // Debounce to prevent flickering during rapid state changes\n  const showInvalid = useDebounce(rawShowInvalid, 200);\n\n  // className from slots\n  const variants = fieldCardVariants({ invalid: showInvalid });\n  const className = variantsToClassNames(variants, _className, 'base');\n\n  return (\n    <div className={className.base}>\n      {/* card header with label */}\n      {label ? (\n        <div\n          {...getLabelProps()}\n          aria-level={3}\n          // Override getLabelProps className to use our own invalid styling based on hasErrors,\n          // not HeroUI's which is based on any child field being invalid\n          className={className.label}\n          role=\"heading\"\n        >\n          {label}\n          {/* Manual asterisk: getLabelProps uses schema-required for the object itself,\n              but FieldCard needs asterisk based on whether any CHILD field is required */}\n          {isRequired ? (\n            <span aria-hidden=\"true\" className=\"ml-0.5 text-danger\">\n              *\n            </span>\n          ) : null}\n        </div>\n      ) : null}\n\n      {/* card content */}\n      <div className={className.content}>{children}</div>\n\n      {/* card footer with validation errors - always show _errors, but danger styling controlled by showInvalid */}\n      <FieldCardValidationError\n        className={className.errorFooter}\n        error={error}\n        errorTextClassName={className.errorText}\n        name={name}\n      />\n    </div>\n  );\n};\n\nexport default FieldCard;\n"],"mappings":"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"}
+{"version":3,"file":"FieldCard-x142VXrR.js","names":[],"sources":["../src/FieldCard/subcomponents/FieldCardValidationError.tsx","../src/FieldCard/FieldCard.tsx"],"sourcesContent":["import type { FieldError } from 'react-hook-form';\n\nimport {\n  AnimatePresence,\n  motion,\n  useReducedMotion,\n} from '@fuf-stack/pixel-motion';\nimport { cn } from '@fuf-stack/pixel-utils';\n\nimport { useUniformField } from '../../hooks/useUniformField';\nimport FieldValidationError from '../../partials/FieldValidationError/FieldValidationError';\n\nexport interface FieldCardValidationErrorProps {\n  /** CSS class name for the error footer wrapper */\n  className?: string;\n  /** Error object from parent FieldCard (passed directly to avoid duplicate hook calls) */\n  error?: FieldError[] | undefined;\n  /** CSS class name for the error text (controls color based on invalid state) */\n  errorTextClassName?: string;\n  /** Field name */\n  name: string;\n}\n\n/**\n * Renders validation errors in the footer of a FieldCard component.\n *\n * This component handles displaying field-level validation errors with proper\n * accessibility attributes and animates them in/out using Framer Motion.\n *\n * Note: Object-level errors (_errors) are always shown when they exist,\n * but the danger styling is controlled by the parent FieldCard based on\n * whether child fields have been touched.\n */\nconst FieldCardValidationError = ({\n  className = undefined,\n  error = undefined,\n  errorTextClassName = undefined,\n  name,\n}: FieldCardValidationErrorProps) => {\n  const { getErrorMessageProps, getHelperWrapperProps, testId } =\n    useUniformField({\n      name,\n    });\n\n  // disable all animation if user prefers reduced motion\n  const disableAnimation = useReducedMotion();\n\n  // Always show object-level errors (_errors) when they exist\n  // @ts-expect-error - error._errors exists but not typed\n  const hasErrors = !!error?._errors;\n\n  return (\n    <AnimatePresence initial={!disableAnimation}>\n      {hasErrors ? (\n        <motion.div\n          key=\"field-card-errors\"\n          exit={disableAnimation ? undefined : { opacity: 0, height: 0 }}\n          initial={disableAnimation ? false : { height: 0, opacity: 0 }}\n          style={{ overflow: 'hidden' }}\n          transition={{ duration: 0.4, ease: 'circOut' }}\n          animate={\n            disableAnimation ? undefined : { opacity: 1, height: 'auto' }\n          }\n        >\n          <div\n            {...getHelperWrapperProps()}\n            className={cn(getHelperWrapperProps()?.className, className)}\n          >\n            <div\n              {...getErrorMessageProps()}\n              className={cn(\n                getErrorMessageProps()?.className,\n                errorTextClassName,\n              )}\n            >\n              <FieldValidationError\n                // @ts-expect-error - error._errors exists but not typed\n                error={error._errors}\n                testId={testId}\n              />\n            </div>\n          </div>\n        </motion.div>\n      ) : null}\n    </AnimatePresence>\n  );\n};\n\nexport default FieldCardValidationError;\n","import type { TVClassName } from '@fuf-stack/pixel-utils';\nimport type { ReactNode } from 'react';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\nimport { useDebounce } from '@fuf-stack/pixels';\n\nimport { checkFieldIsRequired, useFormContext } from '../hooks/useFormContext';\nimport { useUniformField } from '../hooks/useUniformField';\nimport FieldCardValidationError from './subcomponents/FieldCardValidationError';\n\n/**\n * Recursively checks if any child field has an error (regardless of touched state).\n * Returns true if at least one child has an error.\n */\nexport const hasAnyChildErrors = (\n  errors: Record<string, unknown> | undefined,\n): boolean => {\n  if (!errors) {\n    return false;\n  }\n\n  return Object.keys(errors)\n    .filter((key) => {\n      return key !== '_errors';\n    })\n    .some((key) => {\n      const errorValue = errors[key];\n      if (errorValue === undefined) {\n        return false;\n      }\n      // If errorValue is an array, it's a leaf field error\n      if (Array.isArray(errorValue)) {\n        return true;\n      }\n      // Recursively check nested objects\n      if (typeof errorValue === 'object' && errorValue !== null) {\n        return hasAnyChildErrors(errorValue as Record<string, unknown>);\n      }\n      return false;\n    });\n};\n\n/**\n * Recursively checks if any child field is touched.\n * Returns true if at least one child is touched.\n */\nexport const hasAnyChildTouched = (\n  touched: Record<string, unknown> | undefined,\n): boolean => {\n  if (!touched) {\n    return false;\n  }\n\n  return Object.keys(touched)\n    .filter((key) => {\n      return key !== '_errors';\n    })\n    .some((key) => {\n      const touchedValue = touched[key];\n      if (touchedValue === undefined) {\n        return false;\n      }\n      // If touchedValue is truthy (boolean true), field is touched\n      if (touchedValue === true) {\n        return true;\n      }\n      // Recursively check nested objects\n      if (typeof touchedValue === 'object' && touchedValue !== null) {\n        return hasAnyChildTouched(touchedValue as Record<string, unknown>);\n      }\n      return false;\n    });\n};\n\n/**\n * Recursively checks if any child field with an error is also touched.\n * Returns true if at least one touched child has an error.\n */\nexport const hasVisibleChildErrors = (\n  errors: Record<string, unknown> | undefined,\n  touched: Record<string, unknown> | undefined,\n): boolean => {\n  if (!errors || !touched) {\n    return false;\n  }\n\n  return Object.keys(errors)\n    .filter((key) => {\n      // Skip object-level errors (_errors) - those are handled separately\n      return key !== '_errors';\n    })\n    .some((key) => {\n      const errorValue = errors[key];\n      const touchedValue = touched[key];\n\n      // If this key doesn't exist in both errors and touched, skip\n      if (errorValue === undefined || touchedValue === undefined) {\n        return false;\n      }\n\n      // If errorValue is an array, it's a leaf field error\n      if (Array.isArray(errorValue)) {\n        // touchedValue being truthy means the field is touched\n        return !!touchedValue;\n      }\n\n      // Recursively check nested objects\n      if (typeof errorValue === 'object' && errorValue !== null) {\n        return hasVisibleChildErrors(\n          errorValue as Record<string, unknown>,\n          touchedValue as Record<string, unknown>,\n        );\n      }\n\n      return false;\n    });\n};\n\nexport const fieldCardVariants = tv({\n  slots: {\n    /** base class for the field card wrapper */\n    base: [\n      // base styles\n      'overflow-hidden rounded-small border bg-content1',\n      // animate border color change, respect reduced motion\n      'transition-colors duration-150 motion-reduce:transition-none',\n    ],\n    /** class for the label/header */\n    label: [\n      // override HeroUI label positioning and display\n      'pointer-events-auto! static! z-auto! block! w-full!',\n      // reset any transforms or translations\n      'translate-x-0! translate-y-0! transform-none!',\n      // card header styling - use text-medium (16px) for proper header size\n      'rounded-t-small border-b p-3 font-semibold text-medium',\n      // animate border and text color change, respect reduced motion\n      'transition-colors duration-150 motion-reduce:transition-none',\n    ],\n    /** class for the content */\n    content: [\n      // same as p-3 of Card component\n      'p-3',\n      // default grid for form components (see Grid component)\n      'grid gap-4',\n    ],\n    /** class for the error footer wrapper */\n    errorFooter: [\n      'border-t',\n      // force helper to be visible and add padding (pt-1 to compensate for inner content's top padding)\n      'block px-3 pb-2 pt-1',\n      // animate border color change, respect reduced motion\n      'transition-colors duration-150 motion-reduce:transition-none',\n    ],\n    /** class for the error text (empty base, color controlled by variant) */\n    errorText: [],\n  },\n  variants: {\n    invalid: {\n      true: {\n        base: 'border-danger-200',\n        label: 'border-danger-200 text-danger',\n        errorFooter: 'border-danger-200',\n        errorText: '!text-danger text-tiny',\n      },\n      false: {\n        base: 'border-divider',\n        label: 'border-divider text-foreground',\n        errorFooter: 'border-divider',\n        errorText: '!text-foreground-500 text-tiny',\n      },\n    },\n  },\n  defaultVariants: {\n    invalid: false,\n  },\n});\n\ntype ClassName = TVClassName<typeof fieldCardVariants>;\n\nexport interface FieldCardProps {\n  /** Content to render inside the card */\n  children: ReactNode;\n  /** CSS class name */\n  className?: ClassName;\n  /** Label content for the card header */\n  label: ReactNode;\n  /** Field name for validation */\n  name: string;\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n}\n\n/**\n * FieldCard component - A card-styled container with label header and error footer\n *\n * Displays form field content in a card layout with:\n * - Label/title in the header\n * - Content in the body\n * - Validation errors in the footer\n * - Danger outline when validation errors exist\n */\nconst FieldCard = ({\n  children,\n  className: _className = undefined,\n  name,\n  ...uniformFieldProps\n}: FieldCardProps) => {\n  const { error, getLabelProps, label } = useUniformField({\n    name,\n    ...uniformFieldProps,\n  });\n\n  const {\n    control,\n    formState: { touchedFields, submitCount },\n    validation,\n  } = useFormContext();\n\n  // Check if any registered child field is required\n  const validationInstance = validation?.baseInstance ?? validation?.instance;\n  const registeredFields: string[] = Array.from(\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    (control as any)._names?.mount ?? [],\n  );\n  const childFieldPrefix = `${name}.`;\n  const isRequired = validationInstance\n    ? registeredFields\n        .filter((f) => {\n          return f.startsWith(childFieldPrefix);\n        })\n        .some((f) => {\n          return checkFieldIsRequired(\n            validationInstance,\n            f.split('.').filter((k) => {\n              return k !== '';\n            }),\n          );\n        })\n    : false;\n\n  // Get touched state for this field's children by traversing the path\n  const getNestedValue = (\n    obj: Record<string, unknown> | undefined,\n    path: string,\n  ): Record<string, unknown> | undefined => {\n    if (!obj) {\n      return undefined;\n    }\n    const keys = path.split('.');\n    let current: unknown = obj;\n    keys.every((key) => {\n      if (current && typeof current === 'object') {\n        current = (current as Record<string, unknown>)[key];\n        return true;\n      }\n      current = undefined;\n      return false;\n    });\n    return current as Record<string, unknown> | undefined;\n  };\n\n  const fieldTouched = getNestedValue(\n    touchedFields as Record<string, unknown>,\n    name,\n  );\n\n  // Check for object-level errors (_errors)\n  // @ts-expect-error - error._errors exists but not typed\n  const hasObjectErrors = !!error?._errors;\n\n  const errorRecord = error as unknown as Record<string, unknown>;\n\n  // Check if any child field has errors (regardless of touched state)\n  const hasChildErrors = hasAnyChildErrors(errorRecord);\n  // Check if any child field is touched\n  const isAnyChildTouched = hasAnyChildTouched(fieldTouched);\n\n  // Show invalid styling (danger border/header/error text) when:\n  // 1. Any child field has an error AND (it's touched OR form was submitted), OR\n  // 2. Object-level _errors exists AND no child errors AND (any child touched OR submitted)\n  const rawShowInvalid =\n    (hasChildErrors &&\n      (hasVisibleChildErrors(errorRecord, fieldTouched) || submitCount > 0)) ||\n    (hasObjectErrors &&\n      !hasChildErrors &&\n      (isAnyChildTouched || submitCount > 0));\n\n  // Debounce to prevent flickering during rapid state changes\n  const showInvalid = useDebounce(rawShowInvalid, 200);\n\n  // className from slots\n  const variants = fieldCardVariants({ invalid: showInvalid });\n  const className = variantsToClassNames(variants, _className, 'base');\n\n  return (\n    <div className={className.base}>\n      {/* card header with label */}\n      {label ? (\n        <div\n          {...getLabelProps()}\n          aria-level={3}\n          // Override getLabelProps className to use our own invalid styling based on hasErrors,\n          // not HeroUI's which is based on any child field being invalid\n          className={className.label}\n          role=\"heading\"\n        >\n          {label}\n          {/* Manual asterisk: getLabelProps uses schema-required for the object itself,\n              but FieldCard needs asterisk based on whether any CHILD field is required */}\n          {isRequired ? (\n            <span aria-hidden=\"true\" className=\"ml-0.5 text-danger\">\n              *\n            </span>\n          ) : null}\n        </div>\n      ) : null}\n\n      {/* card content */}\n      <div className={className.content}>{children}</div>\n\n      {/* card footer with validation errors - always show _errors, but danger styling controlled by showInvalid */}\n      <FieldCardValidationError\n        className={className.errorFooter}\n        error={error}\n        errorTextClassName={className.errorText}\n        name={name}\n      />\n    </div>\n  );\n};\n\nexport default FieldCard;\n"],"mappings":"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"}

package/dist/Form/index.cjs

@@ -2,6 +2,6 @@ Object.defineProperties(exports, {
 	__esModule: { value: true },
 	[Symbol.toStringTag]: { value: "Module" }
 });
-const require_Form = require("../Form-CMNpqbIM.cjs");
+const require_Form = require("../Form-qbwbBna_.cjs");
 exports.Form = require_Form.Form;
 exports.default = require_Form.Form_default;

package/dist/Form/index.d.cts

@@ -1,2 +1,2 @@
-import { n as FormProps, t as Form } from "../index-BeP-RWud.cjs";
+import { n as FormProps, t as Form } from "../index-D76g-bjx.cjs";
 export { Form, Form as default, type FormProps };

package/dist/Form/index.d.ts

@@ -1,2 +1,2 @@
-import { n as FormProps, t as Form } from "../index-BFpoR6oH.js";
+import { n as FormProps, t as Form } from "../index-B3JBVqnz.js";
 export { Form, Form as default, type FormProps };

package/dist/Form/index.js

@@ -1,2 +1,2 @@
-import { n as Form, t as Form_default } from "../Form-DFN-rkO9.js";
+import { n as Form, t as Form_default } from "../Form-CwzO0-Wf.js";
 export { Form, Form_default as default };

package/dist/{Form-DFN-rkO9.js → Form-CwzO0-Wf.js}

@@ -111,4 +111,4 @@ var Form_default = Form;
 //#endregion
 export { Form as n, Form_default as t };
 
-//# sourceMappingURL=Form-DFN-rkO9.js.map
+//# sourceMappingURL=Form-CwzO0-Wf.js.map

package/dist/{Form-DFN-rkO9.js.map → Form-CwzO0-Wf.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Form-DFN-rkO9.js","names":[],"sources":["../src/Form/subcomponents/FormDebugViewer.tsx","../src/Form/Form.tsx","../src/Form/index.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { FaTimes } from 'react-icons/fa';\nimport { FaBug, FaBullseye } from 'react-icons/fa6';\n\nimport { cn } from '@fuf-stack/pixel-utils';\nimport { Button } from '@fuf-stack/pixels/Button';\nimport { Card } from '@fuf-stack/pixels/Card';\nimport { Json } from '@fuf-stack/pixels/Json';\n\nimport { useFormContext } from '../../hooks/useFormContext';\n\n// import Json css (theme)\nimport '@fuf-stack/pixels/Json.css';\n\ninterface FormDebugViewerProps {\n  /** CSS class name */\n  className?: string;\n}\n\n/** Renders a form debug panel with information about the current form state */\nconst FormDebugViewer = ({ className = undefined }: FormDebugViewerProps) => {\n  const {\n    debugMode,\n    formState: { isValid, isSubmitting, submitCount, isSubmitSuccessful },\n    getValues,\n    setDebugMode,\n    validation: { errors },\n    subscribe,\n  } = useFormContext();\n\n  const showDebugButton = debugMode === 'off';\n  const showDebugCard = debugMode === 'debug' || debugMode === 'debug-testids';\n  const showDebugTestIds = debugMode === 'debug-testids';\n\n  // Use subscribe instead of watch() to avoid triggering re-renders on parent components.\n  // This component manages its own state and only updates itself when form values change.\n  const [values, setValues] = useState<Record<string, unknown>>({});\n\n  useEffect(() => {\n    // Only subscribe when debug card is visible\n    if (!showDebugCard) {\n      return undefined;\n    }\n\n    // Initialize with current values when debug card is opened\n    setValues(getValues() ?? {});\n\n    const subscription = subscribe({\n      formState: { values: true },\n      callback: (state) => {\n        setValues(state.values ?? {});\n      },\n    });\n\n    return () => {\n      subscription();\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [showDebugCard]);\n\n  if (showDebugButton) {\n    return (\n      <Button\n        ariaLabel=\"Enable form debug mode\"\n        className=\"fixed bottom-2.5 right-2.5 w-5 text-default-400\"\n        icon={<FaBug />}\n        variant=\"light\"\n        onClick={() => {\n          setDebugMode('debug');\n        }}\n      />\n    );\n  }\n\n  // do not show card\n  if (!showDebugCard) {\n    return null;\n  }\n\n  return (\n    <Card\n      className={cn(className)}\n      header={\n        <div className=\"flex w-full flex-row justify-between\">\n          <span className=\"text-lg\">Debug Mode</span>\n          <Button\n            color=\"danger\"\n            icon={<FaTimes />}\n            size=\"sm\"\n            variant=\"light\"\n            onClick={() => {\n              setDebugMode('off');\n            }}\n          />\n        </div>\n      }\n    >\n      <Button\n        className=\"mb-4 ml-auto mr-auto\"\n        icon={<FaBullseye />}\n        variant={showDebugTestIds ? 'solid' : 'light'}\n        onClick={() => {\n          setDebugMode(debugMode === 'debug' ? 'debug-testids' : 'debug');\n        }}\n      >\n        {showDebugTestIds ? 'Hide CopyButton' : 'Show CopyButton'}\n      </Button>\n      <Json\n        value={{\n          values,\n          errors: errors ?? null,\n          submit: {\n            isValid,\n            isSubmitting,\n            isSubmitSuccessful,\n            submitCount,\n          },\n        }}\n      />\n    </Card>\n  );\n};\n\nexport default FormDebugViewer;\n","import type { VetoInstance } from '@fuf-stack/veto';\nimport type { ReactNode } from 'react';\nimport type { FieldValues, SubmitHandler } from 'react-hook-form';\nimport type { DebugModeSettings } from './subcomponents/FormContext';\n\nimport { cn, slugify } from '@fuf-stack/pixel-utils';\n\nimport FormProvider from './subcomponents/FormContext';\nimport FormDebugViewer from './subcomponents/FormDebugViewer';\n\nconst IS_TEST = process.env.NODE_ENV === 'test';\n\nexport interface FormProps {\n  /** form children */\n  children: ReactNode | ReactNode[];\n  /** CSS class name */\n  className?: string | string[];\n  /** settings for from debug mode */\n  debug?: DebugModeSettings;\n  /** initial form values */\n  initialValues?: FieldValues;\n  /** name of the form */\n  name?: string;\n  /** form submit handler */\n  onSubmit: SubmitHandler<FieldValues>;\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n  /** veto validation schema */\n  validation?: VetoInstance;\n  /** when the validation should be triggered */\n  validationTrigger?: 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';\n}\n\n/**\n * Form component that has to wrap every uniform\n */\nconst Form = ({\n  children,\n  className = undefined,\n  debug = undefined,\n  initialValues = undefined,\n  name = undefined,\n  onSubmit,\n  testId = undefined,\n  validation = undefined,\n  validationTrigger = 'all',\n}: FormProps) => {\n  return (\n    <FormProvider\n      debugModeSettings={debug}\n      initialValues={initialValues}\n      onSubmit={onSubmit}\n      validation={validation}\n      validationTrigger={validationTrigger}\n    >\n      {({ handleSubmit, isValid }) => {\n        return (\n          <div className=\"flex w-full flex-row justify-between gap-6\">\n            <form\n              className={cn('grow', className)}\n              data-form-is-valid={isValid}\n              data-testid={slugify(testId ?? name ?? '')}\n              name={name}\n              onSubmit={handleSubmit}\n            >\n              {children}\n            </form>\n            {/* render debug viewer when not in test environment and debug not disabled */}\n            {!IS_TEST && !debug?.disable && (\n              <FormDebugViewer className=\"w-96 shrink\" />\n            )}\n          </div>\n        );\n      }}\n    </FormProvider>\n  );\n};\n\nexport default Form;\n","import Form from './Form';\n\nexport type { FormProps } from './Form';\n\nexport { Form };\n\nexport default Form;\n"],"mappings":";;;;;;;;;;;;;AAoBA,MAAM,mBAAmB,EAAE,YAAY,KAAA,QAAsC;CAC3E,MAAM,EACJ,WACA,WAAW,EAAE,SAAS,cAAc,aAAa,sBACjD,WACA,cACA,YAAY,EAAE,UACd,cACE,eAAe;CAEnB,MAAM,kBAAkB,cAAc;CACtC,MAAM,gBAAgB,cAAc,WAAW,cAAc;CAC7D,MAAM,mBAAmB,cAAc;CAIvC,MAAM,CAAC,QAAQ,aAAa,SAAkC,CAAC,CAAC;CAEhE,gBAAgB;EAEd,IAAI,CAAC,eACH;EAIF,UAAU,UAAU,KAAK,CAAC,CAAC;EAE3B,MAAM,eAAe,UAAU;GAC7B,WAAW,EAAE,QAAQ,KAAK;GAC1B,WAAW,UAAU;IACnB,UAAU,MAAM,UAAU,CAAC,CAAC;GAC9B;EACF,CAAC;EAED,aAAa;GACX,aAAa;EACf;CAEF,GAAG,CAAC,aAAa,CAAC;CAElB,IAAI,iBACF,OACE,oBAAC,QAAD;EACE,WAAU;EACV,WAAU;EACV,MAAM,oBAAC,OAAD,CAAQ,CAAA;EACd,SAAQ;EACR,eAAe;GACb,aAAa,OAAO;EACtB;CACD,CAAA;CAKL,IAAI,CAAC,eACH,OAAO;CAGT,OACE,qBAAC,MAAD;EACE,WAAW,GAAG,SAAS;EACvB,QACE,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,oBAAC,QAAD;IAAM,WAAU;cAAU;GAAgB,CAAA,GAC1C,oBAAC,QAAD;IACE,OAAM;IACN,MAAM,oBAAC,SAAD,CAAU,CAAA;IAChB,MAAK;IACL,SAAQ;IACR,eAAe;KACb,aAAa,KAAK;IACpB;GACD,CAAA,CACE;;YAdT,CAiBE,oBAAC,QAAD;GACE,WAAU;GACV,MAAM,oBAAC,YAAD,CAAa,CAAA;GACnB,SAAS,mBAAmB,UAAU;GACtC,eAAe;IACb,aAAa,cAAc,UAAU,kBAAkB,OAAO;GAChE;aAEC,mBAAmB,oBAAoB;EAClC,CAAA,GACR,oBAAC,MAAD,EACE,OAAO;GACL;GACA,QAAQ,UAAU;GAClB,QAAQ;IACN;IACA;IACA;IACA;GACF;EACF,EACD,CAAA,CACG;;AAEV;;;AC/GA,MAAM,UAAU,QAAQ,IAAI,aAAa;;;;AA0BzC,MAAM,QAAQ,EACZ,UACA,YAAY,KAAA,GACZ,QAAQ,KAAA,GACR,gBAAgB,KAAA,GAChB,OAAO,KAAA,GACP,UACA,SAAS,KAAA,GACT,aAAa,KAAA,GACb,oBAAoB,YACL;CACf,OACE,oBAAC,cAAD;EACE,mBAAmB;EACJ;EACL;EACE;EACO;aAEjB,EAAE,cAAc,cAAc;GAC9B,OACE,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,QAAD;KACE,WAAW,GAAG,QAAQ,SAAS;KAC/B,sBAAoB;KACpB,eAAa,QAAQ,UAAU,QAAQ,EAAE;KACnC;KACN,UAAU;KAET;IACG,CAAA,GAEL,CAAC,WAAW,CAAC,OAAO,WACnB,oBAAC,iBAAD,EAAiB,WAAU,cAAe,CAAA,CAEzC;;EAET;CACY,CAAA;AAElB;;;ACtEA,IAAA,eAAe"}
+{"version":3,"file":"Form-CwzO0-Wf.js","names":[],"sources":["../src/Form/subcomponents/FormDebugViewer.tsx","../src/Form/Form.tsx","../src/Form/index.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { FaTimes } from 'react-icons/fa';\nimport { FaBug, FaBullseye } from 'react-icons/fa6';\n\nimport { cn } from '@fuf-stack/pixel-utils';\nimport { Button } from '@fuf-stack/pixels/Button';\nimport { Card } from '@fuf-stack/pixels/Card';\nimport { Json } from '@fuf-stack/pixels/Json';\n\nimport { useFormContext } from '../../hooks/useFormContext';\n\n// import Json css (theme)\nimport '@fuf-stack/pixels/Json.css';\n\ninterface FormDebugViewerProps {\n  /** CSS class name */\n  className?: string;\n}\n\n/** Renders a form debug panel with information about the current form state */\nconst FormDebugViewer = ({ className = undefined }: FormDebugViewerProps) => {\n  const {\n    debugMode,\n    formState: { isValid, isSubmitting, submitCount, isSubmitSuccessful },\n    getValues,\n    setDebugMode,\n    validation: { errors },\n    subscribe,\n  } = useFormContext();\n\n  const showDebugButton = debugMode === 'off';\n  const showDebugCard = debugMode === 'debug' || debugMode === 'debug-testids';\n  const showDebugTestIds = debugMode === 'debug-testids';\n\n  // Use subscribe instead of watch() to avoid triggering re-renders on parent components.\n  // This component manages its own state and only updates itself when form values change.\n  const [values, setValues] = useState<Record<string, unknown>>({});\n\n  useEffect(() => {\n    // Only subscribe when debug card is visible\n    if (!showDebugCard) {\n      return undefined;\n    }\n\n    // Initialize with current values when debug card is opened\n    setValues(getValues() ?? {});\n\n    const subscription = subscribe({\n      formState: { values: true },\n      callback: (state) => {\n        setValues(state.values ?? {});\n      },\n    });\n\n    return () => {\n      subscription();\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [showDebugCard]);\n\n  if (showDebugButton) {\n    return (\n      <Button\n        ariaLabel=\"Enable form debug mode\"\n        className=\"fixed bottom-2.5 right-2.5 w-5 text-default-400\"\n        icon={<FaBug />}\n        variant=\"light\"\n        onClick={() => {\n          setDebugMode('debug');\n        }}\n      />\n    );\n  }\n\n  // do not show card\n  if (!showDebugCard) {\n    return null;\n  }\n\n  return (\n    <Card\n      className={cn(className)}\n      header={\n        <div className=\"flex w-full flex-row justify-between\">\n          <span className=\"text-lg\">Debug Mode</span>\n          <Button\n            color=\"danger\"\n            icon={<FaTimes />}\n            size=\"sm\"\n            variant=\"light\"\n            onClick={() => {\n              setDebugMode('off');\n            }}\n          />\n        </div>\n      }\n    >\n      <Button\n        className=\"mb-4 ml-auto mr-auto\"\n        icon={<FaBullseye />}\n        variant={showDebugTestIds ? 'solid' : 'light'}\n        onClick={() => {\n          setDebugMode(debugMode === 'debug' ? 'debug-testids' : 'debug');\n        }}\n      >\n        {showDebugTestIds ? 'Hide CopyButton' : 'Show CopyButton'}\n      </Button>\n      <Json\n        value={{\n          values,\n          errors: errors ?? null,\n          submit: {\n            isValid,\n            isSubmitting,\n            isSubmitSuccessful,\n            submitCount,\n          },\n        }}\n      />\n    </Card>\n  );\n};\n\nexport default FormDebugViewer;\n","import type { VetoInstance } from '@fuf-stack/veto';\nimport type { ReactNode } from 'react';\nimport type { FieldValues, SubmitHandler } from 'react-hook-form';\nimport type { DebugModeSettings } from './subcomponents/FormContext';\n\nimport { cn, slugify } from '@fuf-stack/pixel-utils';\n\nimport FormProvider from './subcomponents/FormContext';\nimport FormDebugViewer from './subcomponents/FormDebugViewer';\n\nconst IS_TEST = process.env.NODE_ENV === 'test';\n\nexport interface FormProps {\n  /** form children */\n  children: ReactNode | ReactNode[];\n  /** CSS class name */\n  className?: string | string[];\n  /** settings for from debug mode */\n  debug?: DebugModeSettings;\n  /** initial form values */\n  initialValues?: FieldValues;\n  /** name of the form */\n  name?: string;\n  /** form submit handler */\n  onSubmit: SubmitHandler<FieldValues>;\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n  /** veto validation schema */\n  validation?: VetoInstance;\n  /** when the validation should be triggered */\n  validationTrigger?: 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';\n}\n\n/**\n * Form component that has to wrap every uniform\n */\nconst Form = ({\n  children,\n  className = undefined,\n  debug = undefined,\n  initialValues = undefined,\n  name = undefined,\n  onSubmit,\n  testId = undefined,\n  validation = undefined,\n  validationTrigger = 'all',\n}: FormProps) => {\n  return (\n    <FormProvider\n      debugModeSettings={debug}\n      initialValues={initialValues}\n      onSubmit={onSubmit}\n      validation={validation}\n      validationTrigger={validationTrigger}\n    >\n      {({ handleSubmit, isValid }) => {\n        return (\n          <div className=\"flex w-full flex-row justify-between gap-6\">\n            <form\n              className={cn('grow', className)}\n              data-form-is-valid={isValid}\n              data-testid={slugify(testId ?? name ?? '')}\n              name={name}\n              onSubmit={handleSubmit}\n            >\n              {children}\n            </form>\n            {/* render debug viewer when not in test environment and debug not disabled */}\n            {!IS_TEST && !debug?.disable && (\n              <FormDebugViewer className=\"w-96 shrink\" />\n            )}\n          </div>\n        );\n      }}\n    </FormProvider>\n  );\n};\n\nexport default Form;\n","import Form from './Form';\n\nexport type { FormProps } from './Form';\n\nexport { Form };\n\nexport default Form;\n"],"mappings":";;;;;;;;;;;;;AAoBA,MAAM,mBAAmB,EAAE,YAAY,KAAA,QAAsC;CAC3E,MAAM,EACJ,WACA,WAAW,EAAE,SAAS,cAAc,aAAa,sBACjD,WACA,cACA,YAAY,EAAE,UACd,cACE,eAAe;CAEnB,MAAM,kBAAkB,cAAc;CACtC,MAAM,gBAAgB,cAAc,WAAW,cAAc;CAC7D,MAAM,mBAAmB,cAAc;CAIvC,MAAM,CAAC,QAAQ,aAAa,SAAkC,CAAC,CAAC;CAEhE,gBAAgB;EAEd,IAAI,CAAC,eACH;EAIF,UAAU,UAAU,KAAK,CAAC,CAAC;EAE3B,MAAM,eAAe,UAAU;GAC7B,WAAW,EAAE,QAAQ,KAAK;GAC1B,WAAW,UAAU;IACnB,UAAU,MAAM,UAAU,CAAC,CAAC;GAC9B;EACF,CAAC;EAED,aAAa;GACX,aAAa;EACf;CAEF,GAAG,CAAC,aAAa,CAAC;CAElB,IAAI,iBACF,OACE,oBAAC,QAAD;EACE,WAAU;EACV,WAAU;EACV,MAAM,oBAAC,OAAD,CAAQ,CAAA;EACd,SAAQ;EACR,eAAe;GACb,aAAa,OAAO;EACtB;CACD,CAAA;CAKL,IAAI,CAAC,eACH,OAAO;CAGT,OACE,qBAAC,MAAD;EACE,WAAW,GAAG,SAAS;EACvB,QACE,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,oBAAC,QAAD;IAAM,WAAU;cAAU;GAAgB,CAAA,GAC1C,oBAAC,QAAD;IACE,OAAM;IACN,MAAM,oBAAC,SAAD,CAAU,CAAA;IAChB,MAAK;IACL,SAAQ;IACR,eAAe;KACb,aAAa,KAAK;IACpB;GACD,CAAA,CACE;;YAdT,CAiBE,oBAAC,QAAD;GACE,WAAU;GACV,MAAM,oBAAC,YAAD,CAAa,CAAA;GACnB,SAAS,mBAAmB,UAAU;GACtC,eAAe;IACb,aAAa,cAAc,UAAU,kBAAkB,OAAO;GAChE;aAEC,mBAAmB,oBAAoB;EAClC,CAAA,GACR,oBAAC,MAAD,EACE,OAAO;GACL;GACA,QAAQ,UAAU;GAClB,QAAQ;IACN;IACA;IACA;IACA;GACF;EACF,EACD,CAAA,CACG;;AAEV;;;AC/GA,MAAM,UAAU,QAAQ,IAAI,aAAa;;;;AA0BzC,MAAM,QAAQ,EACZ,UACA,YAAY,KAAA,GACZ,QAAQ,KAAA,GACR,gBAAgB,KAAA,GAChB,OAAO,KAAA,GACP,UACA,SAAS,KAAA,GACT,aAAa,KAAA,GACb,oBAAoB,YACL;CACf,OACE,oBAAC,cAAD;EACE,mBAAmB;EACJ;EACL;EACE;EACO;aAEjB,EAAE,cAAc,cAAc;GAC9B,OACE,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,QAAD;KACE,WAAW,GAAG,QAAQ,SAAS;KAC/B,sBAAoB;KACpB,eAAa,QAAQ,UAAU,QAAQ,EAAE;KACnC;KACN,UAAU;KAET;IACG,CAAA,GAEL,CAAC,WAAW,CAAC,OAAO,WACnB,oBAAC,iBAAD,EAAiB,WAAU,cAAe,CAAA,CAEzC;;EAET;CACY,CAAA;AAElB;;;ACtEA,IAAA,eAAe"}

package/dist/{Form-CMNpqbIM.cjs → Form-qbwbBna_.cjs}

@@ -122,4 +122,4 @@ Object.defineProperty(exports, "Form_default", {
 	}
 });
 
-//# sourceMappingURL=Form-CMNpqbIM.cjs.map
+//# sourceMappingURL=Form-qbwbBna_.cjs.map

package/dist/{Form-CMNpqbIM.cjs.map → Form-qbwbBna_.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"Form-CMNpqbIM.cjs","names":["useFormContext","Button","FaBug","Card","FaTimes","FaBullseye","Json","FormProvider"],"sources":["../src/Form/subcomponents/FormDebugViewer.tsx","../src/Form/Form.tsx","../src/Form/index.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { FaTimes } from 'react-icons/fa';\nimport { FaBug, FaBullseye } from 'react-icons/fa6';\n\nimport { cn } from '@fuf-stack/pixel-utils';\nimport { Button } from '@fuf-stack/pixels/Button';\nimport { Card } from '@fuf-stack/pixels/Card';\nimport { Json } from '@fuf-stack/pixels/Json';\n\nimport { useFormContext } from '../../hooks/useFormContext';\n\n// import Json css (theme)\nimport '@fuf-stack/pixels/Json.css';\n\ninterface FormDebugViewerProps {\n  /** CSS class name */\n  className?: string;\n}\n\n/** Renders a form debug panel with information about the current form state */\nconst FormDebugViewer = ({ className = undefined }: FormDebugViewerProps) => {\n  const {\n    debugMode,\n    formState: { isValid, isSubmitting, submitCount, isSubmitSuccessful },\n    getValues,\n    setDebugMode,\n    validation: { errors },\n    subscribe,\n  } = useFormContext();\n\n  const showDebugButton = debugMode === 'off';\n  const showDebugCard = debugMode === 'debug' || debugMode === 'debug-testids';\n  const showDebugTestIds = debugMode === 'debug-testids';\n\n  // Use subscribe instead of watch() to avoid triggering re-renders on parent components.\n  // This component manages its own state and only updates itself when form values change.\n  const [values, setValues] = useState<Record<string, unknown>>({});\n\n  useEffect(() => {\n    // Only subscribe when debug card is visible\n    if (!showDebugCard) {\n      return undefined;\n    }\n\n    // Initialize with current values when debug card is opened\n    setValues(getValues() ?? {});\n\n    const subscription = subscribe({\n      formState: { values: true },\n      callback: (state) => {\n        setValues(state.values ?? {});\n      },\n    });\n\n    return () => {\n      subscription();\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [showDebugCard]);\n\n  if (showDebugButton) {\n    return (\n      <Button\n        ariaLabel=\"Enable form debug mode\"\n        className=\"fixed bottom-2.5 right-2.5 w-5 text-default-400\"\n        icon={<FaBug />}\n        variant=\"light\"\n        onClick={() => {\n          setDebugMode('debug');\n        }}\n      />\n    );\n  }\n\n  // do not show card\n  if (!showDebugCard) {\n    return null;\n  }\n\n  return (\n    <Card\n      className={cn(className)}\n      header={\n        <div className=\"flex w-full flex-row justify-between\">\n          <span className=\"text-lg\">Debug Mode</span>\n          <Button\n            color=\"danger\"\n            icon={<FaTimes />}\n            size=\"sm\"\n            variant=\"light\"\n            onClick={() => {\n              setDebugMode('off');\n            }}\n          />\n        </div>\n      }\n    >\n      <Button\n        className=\"mb-4 ml-auto mr-auto\"\n        icon={<FaBullseye />}\n        variant={showDebugTestIds ? 'solid' : 'light'}\n        onClick={() => {\n          setDebugMode(debugMode === 'debug' ? 'debug-testids' : 'debug');\n        }}\n      >\n        {showDebugTestIds ? 'Hide CopyButton' : 'Show CopyButton'}\n      </Button>\n      <Json\n        value={{\n          values,\n          errors: errors ?? null,\n          submit: {\n            isValid,\n            isSubmitting,\n            isSubmitSuccessful,\n            submitCount,\n          },\n        }}\n      />\n    </Card>\n  );\n};\n\nexport default FormDebugViewer;\n","import type { VetoInstance } from '@fuf-stack/veto';\nimport type { ReactNode } from 'react';\nimport type { FieldValues, SubmitHandler } from 'react-hook-form';\nimport type { DebugModeSettings } from './subcomponents/FormContext';\n\nimport { cn, slugify } from '@fuf-stack/pixel-utils';\n\nimport FormProvider from './subcomponents/FormContext';\nimport FormDebugViewer from './subcomponents/FormDebugViewer';\n\nconst IS_TEST = process.env.NODE_ENV === 'test';\n\nexport interface FormProps {\n  /** form children */\n  children: ReactNode | ReactNode[];\n  /** CSS class name */\n  className?: string | string[];\n  /** settings for from debug mode */\n  debug?: DebugModeSettings;\n  /** initial form values */\n  initialValues?: FieldValues;\n  /** name of the form */\n  name?: string;\n  /** form submit handler */\n  onSubmit: SubmitHandler<FieldValues>;\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n  /** veto validation schema */\n  validation?: VetoInstance;\n  /** when the validation should be triggered */\n  validationTrigger?: 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';\n}\n\n/**\n * Form component that has to wrap every uniform\n */\nconst Form = ({\n  children,\n  className = undefined,\n  debug = undefined,\n  initialValues = undefined,\n  name = undefined,\n  onSubmit,\n  testId = undefined,\n  validation = undefined,\n  validationTrigger = 'all',\n}: FormProps) => {\n  return (\n    <FormProvider\n      debugModeSettings={debug}\n      initialValues={initialValues}\n      onSubmit={onSubmit}\n      validation={validation}\n      validationTrigger={validationTrigger}\n    >\n      {({ handleSubmit, isValid }) => {\n        return (\n          <div className=\"flex w-full flex-row justify-between gap-6\">\n            <form\n              className={cn('grow', className)}\n              data-form-is-valid={isValid}\n              data-testid={slugify(testId ?? name ?? '')}\n              name={name}\n              onSubmit={handleSubmit}\n            >\n              {children}\n            </form>\n            {/* render debug viewer when not in test environment and debug not disabled */}\n            {!IS_TEST && !debug?.disable && (\n              <FormDebugViewer className=\"w-96 shrink\" />\n            )}\n          </div>\n        );\n      }}\n    </FormProvider>\n  );\n};\n\nexport default Form;\n","import Form from './Form';\n\nexport type { FormProps } from './Form';\n\nexport { Form };\n\nexport default Form;\n"],"mappings":"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"}
+{"version":3,"file":"Form-qbwbBna_.cjs","names":["useFormContext","Button","FaBug","Card","FaTimes","FaBullseye","Json","FormProvider"],"sources":["../src/Form/subcomponents/FormDebugViewer.tsx","../src/Form/Form.tsx","../src/Form/index.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { FaTimes } from 'react-icons/fa';\nimport { FaBug, FaBullseye } from 'react-icons/fa6';\n\nimport { cn } from '@fuf-stack/pixel-utils';\nimport { Button } from '@fuf-stack/pixels/Button';\nimport { Card } from '@fuf-stack/pixels/Card';\nimport { Json } from '@fuf-stack/pixels/Json';\n\nimport { useFormContext } from '../../hooks/useFormContext';\n\n// import Json css (theme)\nimport '@fuf-stack/pixels/Json.css';\n\ninterface FormDebugViewerProps {\n  /** CSS class name */\n  className?: string;\n}\n\n/** Renders a form debug panel with information about the current form state */\nconst FormDebugViewer = ({ className = undefined }: FormDebugViewerProps) => {\n  const {\n    debugMode,\n    formState: { isValid, isSubmitting, submitCount, isSubmitSuccessful },\n    getValues,\n    setDebugMode,\n    validation: { errors },\n    subscribe,\n  } = useFormContext();\n\n  const showDebugButton = debugMode === 'off';\n  const showDebugCard = debugMode === 'debug' || debugMode === 'debug-testids';\n  const showDebugTestIds = debugMode === 'debug-testids';\n\n  // Use subscribe instead of watch() to avoid triggering re-renders on parent components.\n  // This component manages its own state and only updates itself when form values change.\n  const [values, setValues] = useState<Record<string, unknown>>({});\n\n  useEffect(() => {\n    // Only subscribe when debug card is visible\n    if (!showDebugCard) {\n      return undefined;\n    }\n\n    // Initialize with current values when debug card is opened\n    setValues(getValues() ?? {});\n\n    const subscription = subscribe({\n      formState: { values: true },\n      callback: (state) => {\n        setValues(state.values ?? {});\n      },\n    });\n\n    return () => {\n      subscription();\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [showDebugCard]);\n\n  if (showDebugButton) {\n    return (\n      <Button\n        ariaLabel=\"Enable form debug mode\"\n        className=\"fixed bottom-2.5 right-2.5 w-5 text-default-400\"\n        icon={<FaBug />}\n        variant=\"light\"\n        onClick={() => {\n          setDebugMode('debug');\n        }}\n      />\n    );\n  }\n\n  // do not show card\n  if (!showDebugCard) {\n    return null;\n  }\n\n  return (\n    <Card\n      className={cn(className)}\n      header={\n        <div className=\"flex w-full flex-row justify-between\">\n          <span className=\"text-lg\">Debug Mode</span>\n          <Button\n            color=\"danger\"\n            icon={<FaTimes />}\n            size=\"sm\"\n            variant=\"light\"\n            onClick={() => {\n              setDebugMode('off');\n            }}\n          />\n        </div>\n      }\n    >\n      <Button\n        className=\"mb-4 ml-auto mr-auto\"\n        icon={<FaBullseye />}\n        variant={showDebugTestIds ? 'solid' : 'light'}\n        onClick={() => {\n          setDebugMode(debugMode === 'debug' ? 'debug-testids' : 'debug');\n        }}\n      >\n        {showDebugTestIds ? 'Hide CopyButton' : 'Show CopyButton'}\n      </Button>\n      <Json\n        value={{\n          values,\n          errors: errors ?? null,\n          submit: {\n            isValid,\n            isSubmitting,\n            isSubmitSuccessful,\n            submitCount,\n          },\n        }}\n      />\n    </Card>\n  );\n};\n\nexport default FormDebugViewer;\n","import type { VetoInstance } from '@fuf-stack/veto';\nimport type { ReactNode } from 'react';\nimport type { FieldValues, SubmitHandler } from 'react-hook-form';\nimport type { DebugModeSettings } from './subcomponents/FormContext';\n\nimport { cn, slugify } from '@fuf-stack/pixel-utils';\n\nimport FormProvider from './subcomponents/FormContext';\nimport FormDebugViewer from './subcomponents/FormDebugViewer';\n\nconst IS_TEST = process.env.NODE_ENV === 'test';\n\nexport interface FormProps {\n  /** form children */\n  children: ReactNode | ReactNode[];\n  /** CSS class name */\n  className?: string | string[];\n  /** settings for from debug mode */\n  debug?: DebugModeSettings;\n  /** initial form values */\n  initialValues?: FieldValues;\n  /** name of the form */\n  name?: string;\n  /** form submit handler */\n  onSubmit: SubmitHandler<FieldValues>;\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n  /** veto validation schema */\n  validation?: VetoInstance;\n  /** when the validation should be triggered */\n  validationTrigger?: 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';\n}\n\n/**\n * Form component that has to wrap every uniform\n */\nconst Form = ({\n  children,\n  className = undefined,\n  debug = undefined,\n  initialValues = undefined,\n  name = undefined,\n  onSubmit,\n  testId = undefined,\n  validation = undefined,\n  validationTrigger = 'all',\n}: FormProps) => {\n  return (\n    <FormProvider\n      debugModeSettings={debug}\n      initialValues={initialValues}\n      onSubmit={onSubmit}\n      validation={validation}\n      validationTrigger={validationTrigger}\n    >\n      {({ handleSubmit, isValid }) => {\n        return (\n          <div className=\"flex w-full flex-row justify-between gap-6\">\n            <form\n              className={cn('grow', className)}\n              data-form-is-valid={isValid}\n              data-testid={slugify(testId ?? name ?? '')}\n              name={name}\n              onSubmit={handleSubmit}\n            >\n              {children}\n            </form>\n            {/* render debug viewer when not in test environment and debug not disabled */}\n            {!IS_TEST && !debug?.disable && (\n              <FormDebugViewer className=\"w-96 shrink\" />\n            )}\n          </div>\n        );\n      }}\n    </FormProvider>\n  );\n};\n\nexport default Form;\n","import Form from './Form';\n\nexport type { FormProps } from './Form';\n\nexport { Form };\n\nexport default Form;\n"],"mappings":"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"}

package/dist/{FormContext-1zBxAjr_.d.cts → FormContext-BuG3xZFe.d.cts}

@@ -15,4 +15,4 @@ interface DebugModeSettings {
 type UserChangeListener<TFieldValues extends object = object> = (fieldName: Path<TFieldValues>, value: unknown) => void;
 //#endregion
 export { UserChangeListener as n, DebugModeSettings as t };
-//# sourceMappingURL=FormContext-1zBxAjr_.d.cts.map
+//# sourceMappingURL=FormContext-BuG3xZFe.d.cts.map

package/dist/{FormContext-1zBxAjr_.d.cts.map → FormContext-BuG3xZFe.d.cts.map}

@@ -1 +1 @@
-{"version":3,"file":"FormContext-1zBxAjr_.d.cts","names":[],"sources":["../src/Form/subcomponents/FormContext.tsx"],"mappings":";;;;;UAsBiB,iBAAA;EAAiB;EAEhC,OAAA;EAAA;EAEA,eAAe;AAAA;;;;KAML,kBAAA,0CACV,SAAA,EAAW,IAAI,CAAC,YAAA,GAChB,KAAA"}
+{"version":3,"file":"FormContext-BuG3xZFe.d.cts","names":[],"sources":["../src/Form/subcomponents/FormContext.tsx"],"mappings":";;;;;UAsBiB,iBAAA;EAAiB;EAEhC,OAAA;EAAA;EAEA,eAAe;AAAA;;;;KAML,kBAAA,0CACV,SAAA,EAAW,IAAI,CAAC,YAAA,GAChB,KAAA"}

package/dist/{FormContext-DjXw7wN6.d.ts → FormContext-qrel_XTj.d.ts}

@@ -15,4 +15,4 @@ interface DebugModeSettings {
 type UserChangeListener<TFieldValues extends object = object> = (fieldName: Path<TFieldValues>, value: unknown) => void;
 //#endregion
 export { UserChangeListener as n, DebugModeSettings as t };
-//# sourceMappingURL=FormContext-DjXw7wN6.d.ts.map
+//# sourceMappingURL=FormContext-qrel_XTj.d.ts.map

package/dist/{FormContext-DjXw7wN6.d.ts.map → FormContext-qrel_XTj.d.ts.map}

@@ -1 +1 @@
-{"version":3,"file":"FormContext-DjXw7wN6.d.ts","names":[],"sources":["../src/Form/subcomponents/FormContext.tsx"],"mappings":";;;;;UAsBiB,iBAAA;EAAiB;EAEhC,OAAA;EAAA;EAEA,eAAe;AAAA;;;;KAML,kBAAA,0CACV,SAAA,EAAW,IAAI,CAAC,YAAA,GAChB,KAAA"}
+{"version":3,"file":"FormContext-qrel_XTj.d.ts","names":[],"sources":["../src/Form/subcomponents/FormContext.tsx"],"mappings":";;;;;UAsBiB,iBAAA;EAAiB;EAEhC,OAAA;EAAA;EAEA,eAAe;AAAA;;;;KAML,kBAAA,0CACV,SAAA,EAAW,IAAI,CAAC,YAAA,GAChB,KAAA"}

package/dist/Grid/index.cjs

@@ -2,6 +2,6 @@ Object.defineProperties(exports, {
 	__esModule: { value: true },
 	[Symbol.toStringTag]: { value: "Module" }
 });
-const require_Grid = require("../Grid-BWKp1Yh_.cjs");
+const require_Grid = require("../Grid-RbL6tNfn.cjs");
 exports.Grid = require_Grid.Grid;
 exports.default = require_Grid.Grid_default;

package/dist/Grid/index.d.cts

@@ -1,2 +1,2 @@
-import { n as GridProps, t as Grid } from "../index-CDcnRyum.cjs";
+import { n as GridProps, t as Grid } from "../index-BqxDWhNr.cjs";
 export { Grid, Grid as default, type GridProps };

package/dist/Grid/index.d.ts

@@ -1,2 +1,2 @@
-import { n as GridProps, t as Grid } from "../index-DqTdG65C.js";
+import { n as GridProps, t as Grid } from "../index-PWRw2bPH.js";
 export { Grid, Grid as default, type GridProps };

package/dist/Grid/index.js

@@ -1,2 +1,2 @@
-import { n as Grid, t as Grid_default } from "../Grid-Bzyi97Cx.js";
+import { n as Grid, t as Grid_default } from "../Grid-BQpLOB0G.js";
 export { Grid, Grid_default as default };

package/dist/{Grid-Bzyi97Cx.js → Grid-BQpLOB0G.js}

@@ -17,4 +17,4 @@ var Grid_default = Grid;
 //#endregion
 export { Grid as n, Grid_default as t };
 
-//# sourceMappingURL=Grid-Bzyi97Cx.js.map
+//# sourceMappingURL=Grid-BQpLOB0G.js.map

package/dist/{Grid-Bzyi97Cx.js.map → Grid-BQpLOB0G.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Grid-Bzyi97Cx.js","names":[],"sources":["../src/Grid/Grid.tsx","../src/Grid/index.ts"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { cn } from '@fuf-stack/pixel-utils';\n\nexport interface GridProps {\n  /** child components */\n  children?: ReactNode;\n  /** CSS class name */\n  className?: string;\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n}\n\n/**\n * Defines the default grid for form components\n */\nconst Grid = ({\n  children = null,\n  className = undefined,\n  testId = undefined,\n}: GridProps) => {\n  return (\n    <div className={cn('grid gap-6', className)} data-testid={testId}>\n      {children}\n    </div>\n  );\n};\n\nexport default Grid;\n","import Grid from './Grid';\n\nexport type { GridProps } from './Grid';\n\nexport { Grid };\n\nexport default Grid;\n"],"mappings":";;;;;;AAgBA,MAAM,QAAQ,EACZ,WAAW,MACX,YAAY,KAAA,GACZ,SAAS,KAAA,QACM;CACf,OACE,oBAAC,OAAD;EAAK,WAAW,GAAG,cAAc,SAAS;EAAG,eAAa;EACvD;CACE,CAAA;AAET;;;ACpBA,IAAA,eAAe"}
+{"version":3,"file":"Grid-BQpLOB0G.js","names":[],"sources":["../src/Grid/Grid.tsx","../src/Grid/index.ts"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { cn } from '@fuf-stack/pixel-utils';\n\nexport interface GridProps {\n  /** child components */\n  children?: ReactNode;\n  /** CSS class name */\n  className?: string;\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n}\n\n/**\n * Defines the default grid for form components\n */\nconst Grid = ({\n  children = null,\n  className = undefined,\n  testId = undefined,\n}: GridProps) => {\n  return (\n    <div className={cn('grid gap-6', className)} data-testid={testId}>\n      {children}\n    </div>\n  );\n};\n\nexport default Grid;\n","import Grid from './Grid';\n\nexport type { GridProps } from './Grid';\n\nexport { Grid };\n\nexport default Grid;\n"],"mappings":";;;;;;AAgBA,MAAM,QAAQ,EACZ,WAAW,MACX,YAAY,KAAA,GACZ,SAAS,KAAA,QACM;CACf,OACE,oBAAC,OAAD;EAAK,WAAW,GAAG,cAAc,SAAS;EAAG,eAAa;EACvD;CACE,CAAA;AAET;;;ACpBA,IAAA,eAAe"}

package/dist/{Grid-BWKp1Yh_.cjs → Grid-RbL6tNfn.cjs}

@@ -29,4 +29,4 @@ Object.defineProperty(exports, "Grid_default", {
 	}
 });
 
-//# sourceMappingURL=Grid-BWKp1Yh_.cjs.map
+//# sourceMappingURL=Grid-RbL6tNfn.cjs.map

package/dist/{Grid-BWKp1Yh_.cjs.map → Grid-RbL6tNfn.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"Grid-BWKp1Yh_.cjs","names":[],"sources":["../src/Grid/Grid.tsx","../src/Grid/index.ts"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { cn } from '@fuf-stack/pixel-utils';\n\nexport interface GridProps {\n  /** child components */\n  children?: ReactNode;\n  /** CSS class name */\n  className?: string;\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n}\n\n/**\n * Defines the default grid for form components\n */\nconst Grid = ({\n  children = null,\n  className = undefined,\n  testId = undefined,\n}: GridProps) => {\n  return (\n    <div className={cn('grid gap-6', className)} data-testid={testId}>\n      {children}\n    </div>\n  );\n};\n\nexport default Grid;\n","import Grid from './Grid';\n\nexport type { GridProps } from './Grid';\n\nexport { Grid };\n\nexport default Grid;\n"],"mappings":";;;;;;;AAgBA,MAAM,QAAQ,EACZ,WAAW,MACX,YAAY,KAAA,GACZ,SAAS,KAAA,QACM;CACf,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,YAAA,GAAA,uBAAA,IAAc,cAAc,SAAS;EAAG,eAAa;EACvD;CACE,CAAA;AAET;;;ACpBA,IAAA,eAAe"}
+{"version":3,"file":"Grid-RbL6tNfn.cjs","names":[],"sources":["../src/Grid/Grid.tsx","../src/Grid/index.ts"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { cn } from '@fuf-stack/pixel-utils';\n\nexport interface GridProps {\n  /** child components */\n  children?: ReactNode;\n  /** CSS class name */\n  className?: string;\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n}\n\n/**\n * Defines the default grid for form components\n */\nconst Grid = ({\n  children = null,\n  className = undefined,\n  testId = undefined,\n}: GridProps) => {\n  return (\n    <div className={cn('grid gap-6', className)} data-testid={testId}>\n      {children}\n    </div>\n  );\n};\n\nexport default Grid;\n","import Grid from './Grid';\n\nexport type { GridProps } from './Grid';\n\nexport { Grid };\n\nexport default Grid;\n"],"mappings":";;;;;;;AAgBA,MAAM,QAAQ,EACZ,WAAW,MACX,YAAY,KAAA,GACZ,SAAS,KAAA,QACM;CACf,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,YAAA,GAAA,uBAAA,IAAc,cAAc,SAAS;EAAG,eAAa;EACvD;CACE,CAAA;AAET;;;ACpBA,IAAA,eAAe"}

package/dist/Input/index.cjs

@@ -2,6 +2,6 @@ Object.defineProperties(exports, {
 	__esModule: { value: true },
 	[Symbol.toStringTag]: { value: "Module" }
 });
-const require_Input = require("../Input-DGhyRiMM.cjs");
+const require_Input = require("../Input-CoY-URbn.cjs");
 exports.Input = require_Input.Input;
 exports.default = require_Input.Input_default;

package/dist/Input/index.d.cts

@@ -1,2 +1,2 @@
-import { n as InputProps, t as Input } from "../index-BKSD5qlp.cjs";
+import { n as InputProps, t as Input } from "../index-CSmkHvH5.cjs";
 export { Input, Input as default, type InputProps };

package/dist/Input/index.d.ts

@@ -1,2 +1,2 @@
-import { n as InputProps, t as Input } from "../index-CgqDr0Iv.js";
+import { n as InputProps, t as Input } from "../index-B87U0Tx5.js";
 export { Input, Input as default, type InputProps };

package/dist/Input/index.js

@@ -1,2 +1,2 @@
-import { n as Input, t as Input_default } from "../Input-fZn0x5c3.js";
+import { n as Input, t as Input_default } from "../Input-B5RxbkNS.js";
 export { Input, Input_default as default };

package/dist/{Input-fZn0x5c3.js → Input-B5RxbkNS.js}

@@ -93,4 +93,4 @@ var Input_default = Input$1;
 //#endregion
 export { Input$1 as n, Input_default as t };
 
-//# sourceMappingURL=Input-fZn0x5c3.js.map
+//# sourceMappingURL=Input-B5RxbkNS.js.map

package/dist/{Input-fZn0x5c3.js.map → Input-B5RxbkNS.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Input-fZn0x5c3.js","names":["Input","HeroNumberInput","HeroInput","Input"],"sources":["../src/Input/Input.tsx","../src/Input/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { InputProps as HeroInputProps } from '@heroui/input';\nimport type { ReactNode } from 'react';\nimport type { InputValueTransform } from '../hooks/useInputValueTransform';\n\nimport { Input as HeroInput } from '@heroui/input';\nimport { NumberInput as HeroNumberInput } from '@heroui/number-input';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { useInputValueDebounce } from '../hooks/useInputValueDebounce';\nimport { useUniformField } from '../hooks/useUniformField';\n\n// input variants\nexport const inputVariants = tv({\n  slots: {\n    /** wrapper around the whole input */\n    base: '',\n    /** clear button */\n    clearButton: '',\n    /** actual input element */\n    input: '',\n    /** inner wrapper (HeroUI inputWrapper slot) */\n    inputWrapper: 'bg-content1 group-data-[focus=true]:border-focus',\n  },\n});\n\ntype VariantProps = TVProps<typeof inputVariants>;\ntype ClassName = TVClassName<typeof inputVariants>;\n\nexport interface InputProps extends VariantProps {\n  /** Custom aria-label for accessibility. If not provided, falls back to field name when no visible label exists */\n  ariaLabel?: string;\n  /** CSS class name */\n  className?: ClassName;\n  /** shows clear button when input has value */\n  clearable?: boolean;\n  /** debounce delay in milliseconds for form state updates (default: 300ms) */\n  debounceDelay?: number;\n  /** input field is disabled */\n  disabled?: boolean;\n  /** added content to the end of the input Field. */\n  endContent?: ReactNode;\n  /** form field label */\n  label?: ReactNode;\n  /** form field name */\n  name: string;\n  /** callback that is fired when the value is cleared */\n  onClear?: () => void;\n  /** form field placeholder */\n  placeholder?: string;\n  /** size of the input */\n  size?: 'sm' | 'md' | 'lg';\n  /** content added to the start of the input field */\n  startContent?: ReactNode;\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n  /** allows disentangled display and form values for a field */\n  transform?: InputValueTransform<string>;\n  /** input type */\n  type?: 'number' | 'password';\n}\n\n/**\n * Input component based on [HeroUI Input](https://www.heroui.com//docs/components/input)\n */\nconst Input = ({\n  className: _className = undefined,\n  clearable = false,\n  debounceDelay = 300,\n  endContent = undefined,\n  name,\n  onClear = undefined,\n  placeholder = ' ',\n  size = undefined,\n  startContent = undefined,\n  type = undefined,\n  ...uniformFieldProps\n}: InputProps) => {\n  const {\n    ariaLabel,\n    disabled,\n    field: {\n      onChange: fieldOnChange,\n      onBlur: fieldOnBlur,\n      value: fieldValue,\n      ref,\n    },\n    errorMessage,\n    invalid,\n    label,\n    required,\n    testId,\n    resetField,\n  } = useUniformField({ name, type, ...uniformFieldProps });\n\n  // Use hook that provides debounced onChange and enhanced blur handling\n  const { onChange, onBlur, value } = useInputValueDebounce({\n    debounceDelay,\n    name,\n    onBlur: fieldOnBlur,\n    onChange: fieldOnChange,\n    value: fieldValue,\n  });\n\n  // If input is clearable add props for clearing input value\n  const clearableProps: Pick<HeroInputProps, 'isClearable' | 'onClear'> =\n    clearable\n      ? {\n          isClearable: true,\n          onClear: () => {\n            // if field had initial value we do not reset it\n            // to that value, but clear it instead\n            resetField(name, { defaultValue: null });\n            // if onClear cb provided we call it\n            if (onClear) {\n              onClear();\n            }\n          },\n        }\n      : {};\n\n  // classNames from slots\n  const variants = inputVariants();\n  const classNames = variantsToClassNames(variants, _className, 'base');\n\n  // Common props for both Input and NumberInput\n  const commonProps = {\n    ref,\n    // Only add aria-label if there's no meaningful placeholder (HeroUI uses placeholder as aria-label)\n    'aria-label':\n      !placeholder || placeholder.trim() === '' ? ariaLabel : undefined,\n    // disable autocomplete\n    autoComplete: 'off',\n    classNames: {\n      base: classNames.base,\n      clearButton: classNames.clearButton,\n      // set padding to 0 for error message exit animation\n      helperWrapper: 'p-0',\n      input: classNames.input,\n      inputWrapper: classNames.inputWrapper,\n    },\n    'data-testid': testId,\n    endContent,\n    errorMessage,\n    id: testId,\n    isDisabled: disabled,\n    isInvalid: invalid,\n    isRequired: required,\n    label,\n    labelPlacement: 'outside' as const,\n    name,\n    onBlur,\n    placeholder,\n    radius: 'sm' as const,\n    size,\n    startContent,\n    variant: 'bordered' as const,\n    ...clearableProps,\n  };\n\n  // Render NumberInput for number type\n  if (type === 'number') {\n    // Parse the string value to number - use null for empty/cleared state to keep component controlled\n    const numberValue =\n      value !== '' && value != null && !Number.isNaN(Number(value))\n        ? Number(value)\n        : null;\n\n    return (\n      <HeroNumberInput\n        {...commonProps}\n        // @ts-expect-error - HeroUI NumberInput type is not compatible with null,\n        // but it needs to be for empty/cleared state to be controlled\n        value={numberValue}\n        // Disable thousands separator to avoid parsing issues\n        formatOptions={{\n          useGrouping: false,\n        }}\n        // NumberInput onChange receives either an event or a number\n        onChange={(e: React.ChangeEvent<HTMLInputElement> | number) => {\n          if (typeof e === 'number') {\n            // Convert number to synthetic event and pass through debounced onChange\n            onChange({\n              target: { value: String(e) },\n            } as React.ChangeEvent<HTMLInputElement>);\n          } else {\n            // Pass event through debounced onChange\n            onChange(e);\n          }\n        }}\n      />\n    );\n  }\n\n  // Render regular Input for text/password\n  return (\n    <HeroInput {...commonProps} onChange={onChange} type={type} value={value} />\n  );\n};\n\nexport default Input;\n","import Input from './Input';\n\nexport type { InputProps } from './Input';\n\nexport { Input };\n\nexport default Input;\n"],"mappings":";;;;;;;AAcA,MAAa,gBAAgB,GAAG,EAC9B,OAAO;;CAEL,MAAM;;CAEN,aAAa;;CAEb,OAAO;;CAEP,cAAc;AAChB,EACF,CAAC;;;;AAyCD,MAAMA,WAAS,EACb,WAAW,aAAa,KAAA,GACxB,YAAY,OACZ,gBAAgB,KAChB,aAAa,KAAA,GACb,MACA,UAAU,KAAA,GACV,cAAc,KACd,OAAO,KAAA,GACP,eAAe,KAAA,GACf,OAAO,KAAA,GACP,GAAG,wBACa;CAChB,MAAM,EACJ,WACA,UACA,OAAO,EACL,UAAU,eACV,QAAQ,aACR,OAAO,YACP,OAEF,cACA,SACA,OACA,UACA,QACA,eACE,gBAAgB;EAAE;EAAM;EAAM,GAAG;CAAkB,CAAC;CAGxD,MAAM,EAAE,UAAU,QAAQ,UAAU,sBAAsB;EACxD;EACA;EACA,QAAQ;EACR,UAAU;EACV,OAAO;CACT,CAAC;CAGD,MAAM,iBACJ,YACI;EACE,aAAa;EACb,eAAe;GAGb,WAAW,MAAM,EAAE,cAAc,KAAK,CAAC;GAEvC,IAAI,SACF,QAAQ;EAEZ;CACF,IACA,CAAC;CAIP,MAAM,aAAa,qBADF,cAC8B,GAAG,YAAY,MAAM;CAGpE,MAAM,cAAc;EAClB;EAEA,cACE,CAAC,eAAe,YAAY,KAAK,MAAM,KAAK,YAAY,KAAA;EAE1D,cAAc;EACd,YAAY;GACV,MAAM,WAAW;GACjB,aAAa,WAAW;GAExB,eAAe;GACf,OAAO,WAAW;GAClB,cAAc,WAAW;EAC3B;EACA,eAAe;EACf;EACA;EACA,IAAI;EACJ,YAAY;EACZ,WAAW;EACX,YAAY;EACZ;EACA,gBAAgB;EAChB;EACA;EACA;EACA,QAAQ;EACR;EACA;EACA,SAAS;EACT,GAAG;CACL;CAGA,IAAI,SAAS,UAAU;EAErB,MAAM,cACJ,UAAU,MAAM,SAAS,QAAQ,CAAC,OAAO,MAAM,OAAO,KAAK,CAAC,IACxD,OAAO,KAAK,IACZ;EAEN,OACE,oBAACC,aAAD;GACE,GAAI;GAGJ,OAAO;GAEP,eAAe,EACb,aAAa,MACf;GAEA,WAAW,MAAoD;IAC7D,IAAI,OAAO,MAAM,UAEf,SAAS,EACP,QAAQ,EAAE,OAAO,OAAO,CAAC,EAAE,EAC7B,CAAwC;SAGxC,SAAS,CAAC;GAEd;EACD,CAAA;CAEL;CAGA,OACE,oBAACC,OAAD;EAAW,GAAI;EAAuB;EAAgB;EAAa;CAAQ,CAAA;AAE/E;;;ACjMA,IAAA,gBAAeC"}
+{"version":3,"file":"Input-B5RxbkNS.js","names":["Input","HeroNumberInput","HeroInput","Input"],"sources":["../src/Input/Input.tsx","../src/Input/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { InputProps as HeroInputProps } from '@heroui/input';\nimport type { ReactNode } from 'react';\nimport type { InputValueTransform } from '../hooks/useInputValueTransform';\n\nimport { Input as HeroInput } from '@heroui/input';\nimport { NumberInput as HeroNumberInput } from '@heroui/number-input';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { useInputValueDebounce } from '../hooks/useInputValueDebounce';\nimport { useUniformField } from '../hooks/useUniformField';\n\n// input variants\nexport const inputVariants = tv({\n  slots: {\n    /** wrapper around the whole input */\n    base: '',\n    /** clear button */\n    clearButton: '',\n    /** actual input element */\n    input: '',\n    /** inner wrapper (HeroUI inputWrapper slot) */\n    inputWrapper: 'bg-content1 group-data-[focus=true]:border-focus',\n  },\n});\n\ntype VariantProps = TVProps<typeof inputVariants>;\ntype ClassName = TVClassName<typeof inputVariants>;\n\nexport interface InputProps extends VariantProps {\n  /** Custom aria-label for accessibility. If not provided, falls back to field name when no visible label exists */\n  ariaLabel?: string;\n  /** CSS class name */\n  className?: ClassName;\n  /** shows clear button when input has value */\n  clearable?: boolean;\n  /** debounce delay in milliseconds for form state updates (default: 300ms) */\n  debounceDelay?: number;\n  /** input field is disabled */\n  disabled?: boolean;\n  /** added content to the end of the input Field. */\n  endContent?: ReactNode;\n  /** form field label */\n  label?: ReactNode;\n  /** form field name */\n  name: string;\n  /** callback that is fired when the value is cleared */\n  onClear?: () => void;\n  /** form field placeholder */\n  placeholder?: string;\n  /** size of the input */\n  size?: 'sm' | 'md' | 'lg';\n  /** content added to the start of the input field */\n  startContent?: ReactNode;\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n  /** allows disentangled display and form values for a field */\n  transform?: InputValueTransform<string>;\n  /** input type */\n  type?: 'number' | 'password';\n}\n\n/**\n * Input component based on [HeroUI Input](https://www.heroui.com//docs/components/input)\n */\nconst Input = ({\n  className: _className = undefined,\n  clearable = false,\n  debounceDelay = 300,\n  endContent = undefined,\n  name,\n  onClear = undefined,\n  placeholder = ' ',\n  size = undefined,\n  startContent = undefined,\n  type = undefined,\n  ...uniformFieldProps\n}: InputProps) => {\n  const {\n    ariaLabel,\n    disabled,\n    field: {\n      onChange: fieldOnChange,\n      onBlur: fieldOnBlur,\n      value: fieldValue,\n      ref,\n    },\n    errorMessage,\n    invalid,\n    label,\n    required,\n    testId,\n    resetField,\n  } = useUniformField({ name, type, ...uniformFieldProps });\n\n  // Use hook that provides debounced onChange and enhanced blur handling\n  const { onChange, onBlur, value } = useInputValueDebounce({\n    debounceDelay,\n    name,\n    onBlur: fieldOnBlur,\n    onChange: fieldOnChange,\n    value: fieldValue,\n  });\n\n  // If input is clearable add props for clearing input value\n  const clearableProps: Pick<HeroInputProps, 'isClearable' | 'onClear'> =\n    clearable\n      ? {\n          isClearable: true,\n          onClear: () => {\n            // if field had initial value we do not reset it\n            // to that value, but clear it instead\n            resetField(name, { defaultValue: null });\n            // if onClear cb provided we call it\n            if (onClear) {\n              onClear();\n            }\n          },\n        }\n      : {};\n\n  // classNames from slots\n  const variants = inputVariants();\n  const classNames = variantsToClassNames(variants, _className, 'base');\n\n  // Common props for both Input and NumberInput\n  const commonProps = {\n    ref,\n    // Only add aria-label if there's no meaningful placeholder (HeroUI uses placeholder as aria-label)\n    'aria-label':\n      !placeholder || placeholder.trim() === '' ? ariaLabel : undefined,\n    // disable autocomplete\n    autoComplete: 'off',\n    classNames: {\n      base: classNames.base,\n      clearButton: classNames.clearButton,\n      // set padding to 0 for error message exit animation\n      helperWrapper: 'p-0',\n      input: classNames.input,\n      inputWrapper: classNames.inputWrapper,\n    },\n    'data-testid': testId,\n    endContent,\n    errorMessage,\n    id: testId,\n    isDisabled: disabled,\n    isInvalid: invalid,\n    isRequired: required,\n    label,\n    labelPlacement: 'outside' as const,\n    name,\n    onBlur,\n    placeholder,\n    radius: 'sm' as const,\n    size,\n    startContent,\n    variant: 'bordered' as const,\n    ...clearableProps,\n  };\n\n  // Render NumberInput for number type\n  if (type === 'number') {\n    // Parse the string value to number - use null for empty/cleared state to keep component controlled\n    const numberValue =\n      value !== '' && value != null && !Number.isNaN(Number(value))\n        ? Number(value)\n        : null;\n\n    return (\n      <HeroNumberInput\n        {...commonProps}\n        // @ts-expect-error - HeroUI NumberInput type is not compatible with null,\n        // but it needs to be for empty/cleared state to be controlled\n        value={numberValue}\n        // Disable thousands separator to avoid parsing issues\n        formatOptions={{\n          useGrouping: false,\n        }}\n        // NumberInput onChange receives either an event or a number\n        onChange={(e: React.ChangeEvent<HTMLInputElement> | number) => {\n          if (typeof e === 'number') {\n            // Convert number to synthetic event and pass through debounced onChange\n            onChange({\n              target: { value: String(e) },\n            } as React.ChangeEvent<HTMLInputElement>);\n          } else {\n            // Pass event through debounced onChange\n            onChange(e);\n          }\n        }}\n      />\n    );\n  }\n\n  // Render regular Input for text/password\n  return (\n    <HeroInput {...commonProps} onChange={onChange} type={type} value={value} />\n  );\n};\n\nexport default Input;\n","import Input from './Input';\n\nexport type { InputProps } from './Input';\n\nexport { Input };\n\nexport default Input;\n"],"mappings":";;;;;;;AAcA,MAAa,gBAAgB,GAAG,EAC9B,OAAO;;CAEL,MAAM;;CAEN,aAAa;;CAEb,OAAO;;CAEP,cAAc;AAChB,EACF,CAAC;;;;AAyCD,MAAMA,WAAS,EACb,WAAW,aAAa,KAAA,GACxB,YAAY,OACZ,gBAAgB,KAChB,aAAa,KAAA,GACb,MACA,UAAU,KAAA,GACV,cAAc,KACd,OAAO,KAAA,GACP,eAAe,KAAA,GACf,OAAO,KAAA,GACP,GAAG,wBACa;CAChB,MAAM,EACJ,WACA,UACA,OAAO,EACL,UAAU,eACV,QAAQ,aACR,OAAO,YACP,OAEF,cACA,SACA,OACA,UACA,QACA,eACE,gBAAgB;EAAE;EAAM;EAAM,GAAG;CAAkB,CAAC;CAGxD,MAAM,EAAE,UAAU,QAAQ,UAAU,sBAAsB;EACxD;EACA;EACA,QAAQ;EACR,UAAU;EACV,OAAO;CACT,CAAC;CAGD,MAAM,iBACJ,YACI;EACE,aAAa;EACb,eAAe;GAGb,WAAW,MAAM,EAAE,cAAc,KAAK,CAAC;GAEvC,IAAI,SACF,QAAQ;EAEZ;CACF,IACA,CAAC;CAIP,MAAM,aAAa,qBADF,cAC8B,GAAG,YAAY,MAAM;CAGpE,MAAM,cAAc;EAClB;EAEA,cACE,CAAC,eAAe,YAAY,KAAK,MAAM,KAAK,YAAY,KAAA;EAE1D,cAAc;EACd,YAAY;GACV,MAAM,WAAW;GACjB,aAAa,WAAW;GAExB,eAAe;GACf,OAAO,WAAW;GAClB,cAAc,WAAW;EAC3B;EACA,eAAe;EACf;EACA;EACA,IAAI;EACJ,YAAY;EACZ,WAAW;EACX,YAAY;EACZ;EACA,gBAAgB;EAChB;EACA;EACA;EACA,QAAQ;EACR;EACA;EACA,SAAS;EACT,GAAG;CACL;CAGA,IAAI,SAAS,UAAU;EAErB,MAAM,cACJ,UAAU,MAAM,SAAS,QAAQ,CAAC,OAAO,MAAM,OAAO,KAAK,CAAC,IACxD,OAAO,KAAK,IACZ;EAEN,OACE,oBAACC,aAAD;GACE,GAAI;GAGJ,OAAO;GAEP,eAAe,EACb,aAAa,MACf;GAEA,WAAW,MAAoD;IAC7D,IAAI,OAAO,MAAM,UAEf,SAAS,EACP,QAAQ,EAAE,OAAO,OAAO,CAAC,EAAE,EAC7B,CAAwC;SAGxC,SAAS,CAAC;GAEd;EACD,CAAA;CAEL;CAGA,OACE,oBAACC,OAAD;EAAW,GAAI;EAAuB;EAAgB;EAAa;CAAQ,CAAA;AAE/E;;;ACjMA,IAAA,gBAAeC"}

package/dist/{Input-DGhyRiMM.cjs → Input-CoY-URbn.cjs}

@@ -105,4 +105,4 @@ Object.defineProperty(exports, "Input_default", {
 	}
 });
 
-//# sourceMappingURL=Input-DGhyRiMM.cjs.map
+//# sourceMappingURL=Input-CoY-URbn.cjs.map

package/dist/{Input-DGhyRiMM.cjs.map → Input-CoY-URbn.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"Input-DGhyRiMM.cjs","names":["useUniformField","useInputValueDebounce","HeroNumberInput","HeroInput"],"sources":["../src/Input/Input.tsx","../src/Input/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { InputProps as HeroInputProps } from '@heroui/input';\nimport type { ReactNode } from 'react';\nimport type { InputValueTransform } from '../hooks/useInputValueTransform';\n\nimport { Input as HeroInput } from '@heroui/input';\nimport { NumberInput as HeroNumberInput } from '@heroui/number-input';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { useInputValueDebounce } from '../hooks/useInputValueDebounce';\nimport { useUniformField } from '../hooks/useUniformField';\n\n// input variants\nexport const inputVariants = tv({\n  slots: {\n    /** wrapper around the whole input */\n    base: '',\n    /** clear button */\n    clearButton: '',\n    /** actual input element */\n    input: '',\n    /** inner wrapper (HeroUI inputWrapper slot) */\n    inputWrapper: 'bg-content1 group-data-[focus=true]:border-focus',\n  },\n});\n\ntype VariantProps = TVProps<typeof inputVariants>;\ntype ClassName = TVClassName<typeof inputVariants>;\n\nexport interface InputProps extends VariantProps {\n  /** Custom aria-label for accessibility. If not provided, falls back to field name when no visible label exists */\n  ariaLabel?: string;\n  /** CSS class name */\n  className?: ClassName;\n  /** shows clear button when input has value */\n  clearable?: boolean;\n  /** debounce delay in milliseconds for form state updates (default: 300ms) */\n  debounceDelay?: number;\n  /** input field is disabled */\n  disabled?: boolean;\n  /** added content to the end of the input Field. */\n  endContent?: ReactNode;\n  /** form field label */\n  label?: ReactNode;\n  /** form field name */\n  name: string;\n  /** callback that is fired when the value is cleared */\n  onClear?: () => void;\n  /** form field placeholder */\n  placeholder?: string;\n  /** size of the input */\n  size?: 'sm' | 'md' | 'lg';\n  /** content added to the start of the input field */\n  startContent?: ReactNode;\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n  /** allows disentangled display and form values for a field */\n  transform?: InputValueTransform<string>;\n  /** input type */\n  type?: 'number' | 'password';\n}\n\n/**\n * Input component based on [HeroUI Input](https://www.heroui.com//docs/components/input)\n */\nconst Input = ({\n  className: _className = undefined,\n  clearable = false,\n  debounceDelay = 300,\n  endContent = undefined,\n  name,\n  onClear = undefined,\n  placeholder = ' ',\n  size = undefined,\n  startContent = undefined,\n  type = undefined,\n  ...uniformFieldProps\n}: InputProps) => {\n  const {\n    ariaLabel,\n    disabled,\n    field: {\n      onChange: fieldOnChange,\n      onBlur: fieldOnBlur,\n      value: fieldValue,\n      ref,\n    },\n    errorMessage,\n    invalid,\n    label,\n    required,\n    testId,\n    resetField,\n  } = useUniformField({ name, type, ...uniformFieldProps });\n\n  // Use hook that provides debounced onChange and enhanced blur handling\n  const { onChange, onBlur, value } = useInputValueDebounce({\n    debounceDelay,\n    name,\n    onBlur: fieldOnBlur,\n    onChange: fieldOnChange,\n    value: fieldValue,\n  });\n\n  // If input is clearable add props for clearing input value\n  const clearableProps: Pick<HeroInputProps, 'isClearable' | 'onClear'> =\n    clearable\n      ? {\n          isClearable: true,\n          onClear: () => {\n            // if field had initial value we do not reset it\n            // to that value, but clear it instead\n            resetField(name, { defaultValue: null });\n            // if onClear cb provided we call it\n            if (onClear) {\n              onClear();\n            }\n          },\n        }\n      : {};\n\n  // classNames from slots\n  const variants = inputVariants();\n  const classNames = variantsToClassNames(variants, _className, 'base');\n\n  // Common props for both Input and NumberInput\n  const commonProps = {\n    ref,\n    // Only add aria-label if there's no meaningful placeholder (HeroUI uses placeholder as aria-label)\n    'aria-label':\n      !placeholder || placeholder.trim() === '' ? ariaLabel : undefined,\n    // disable autocomplete\n    autoComplete: 'off',\n    classNames: {\n      base: classNames.base,\n      clearButton: classNames.clearButton,\n      // set padding to 0 for error message exit animation\n      helperWrapper: 'p-0',\n      input: classNames.input,\n      inputWrapper: classNames.inputWrapper,\n    },\n    'data-testid': testId,\n    endContent,\n    errorMessage,\n    id: testId,\n    isDisabled: disabled,\n    isInvalid: invalid,\n    isRequired: required,\n    label,\n    labelPlacement: 'outside' as const,\n    name,\n    onBlur,\n    placeholder,\n    radius: 'sm' as const,\n    size,\n    startContent,\n    variant: 'bordered' as const,\n    ...clearableProps,\n  };\n\n  // Render NumberInput for number type\n  if (type === 'number') {\n    // Parse the string value to number - use null for empty/cleared state to keep component controlled\n    const numberValue =\n      value !== '' && value != null && !Number.isNaN(Number(value))\n        ? Number(value)\n        : null;\n\n    return (\n      <HeroNumberInput\n        {...commonProps}\n        // @ts-expect-error - HeroUI NumberInput type is not compatible with null,\n        // but it needs to be for empty/cleared state to be controlled\n        value={numberValue}\n        // Disable thousands separator to avoid parsing issues\n        formatOptions={{\n          useGrouping: false,\n        }}\n        // NumberInput onChange receives either an event or a number\n        onChange={(e: React.ChangeEvent<HTMLInputElement> | number) => {\n          if (typeof e === 'number') {\n            // Convert number to synthetic event and pass through debounced onChange\n            onChange({\n              target: { value: String(e) },\n            } as React.ChangeEvent<HTMLInputElement>);\n          } else {\n            // Pass event through debounced onChange\n            onChange(e);\n          }\n        }}\n      />\n    );\n  }\n\n  // Render regular Input for text/password\n  return (\n    <HeroInput {...commonProps} onChange={onChange} type={type} value={value} />\n  );\n};\n\nexport default Input;\n","import Input from './Input';\n\nexport type { InputProps } from './Input';\n\nexport { Input };\n\nexport default Input;\n"],"mappings":";;;;;;;;AAcA,MAAa,iBAAA,GAAA,uBAAA,IAAmB,EAC9B,OAAO;;CAEL,MAAM;;CAEN,aAAa;;CAEb,OAAO;;CAEP,cAAc;AAChB,EACF,CAAC;;;;AAyCD,MAAM,SAAS,EACb,WAAW,aAAa,KAAA,GACxB,YAAY,OACZ,gBAAgB,KAChB,aAAa,KAAA,GACb,MACA,UAAU,KAAA,GACV,cAAc,KACd,OAAO,KAAA,GACP,eAAe,KAAA,GACf,OAAO,KAAA,GACP,GAAG,wBACa;CAChB,MAAM,EACJ,WACA,UACA,OAAO,EACL,UAAU,eACV,QAAQ,aACR,OAAO,YACP,OAEF,cACA,SACA,OACA,UACA,QACA,eACEA,oCAAAA,gBAAgB;EAAE;EAAM;EAAM,GAAG;CAAkB,CAAC;CAGxD,MAAM,EAAE,UAAU,QAAQ,UAAUC,0CAAAA,sBAAsB;EACxD;EACA;EACA,QAAQ;EACR,UAAU;EACV,OAAO;CACT,CAAC;CAGD,MAAM,iBACJ,YACI;EACE,aAAa;EACb,eAAe;GAGb,WAAW,MAAM,EAAE,cAAc,KAAK,CAAC;GAEvC,IAAI,SACF,QAAQ;EAEZ;CACF,IACA,CAAC;CAIP,MAAM,cAAA,GAAA,uBAAA,sBADW,cAC8B,GAAG,YAAY,MAAM;CAGpE,MAAM,cAAc;EAClB;EAEA,cACE,CAAC,eAAe,YAAY,KAAK,MAAM,KAAK,YAAY,KAAA;EAE1D,cAAc;EACd,YAAY;GACV,MAAM,WAAW;GACjB,aAAa,WAAW;GAExB,eAAe;GACf,OAAO,WAAW;GAClB,cAAc,WAAW;EAC3B;EACA,eAAe;EACf;EACA;EACA,IAAI;EACJ,YAAY;EACZ,WAAW;EACX,YAAY;EACZ;EACA,gBAAgB;EAChB;EACA;EACA;EACA,QAAQ;EACR;EACA;EACA,SAAS;EACT,GAAG;CACL;CAGA,IAAI,SAAS,UAAU;EAErB,MAAM,cACJ,UAAU,MAAM,SAAS,QAAQ,CAAC,OAAO,MAAM,OAAO,KAAK,CAAC,IACxD,OAAO,KAAK,IACZ;EAEN,OACE,iBAAA,GAAA,kBAAA,KAACC,qBAAAA,aAAD;GACE,GAAI;GAGJ,OAAO;GAEP,eAAe,EACb,aAAa,MACf;GAEA,WAAW,MAAoD;IAC7D,IAAI,OAAO,MAAM,UAEf,SAAS,EACP,QAAQ,EAAE,OAAO,OAAO,CAAC,EAAE,EAC7B,CAAwC;SAGxC,SAAS,CAAC;GAEd;EACD,CAAA;CAEL;CAGA,OACE,iBAAA,GAAA,kBAAA,KAACC,cAAAA,OAAD;EAAW,GAAI;EAAuB;EAAgB;EAAa;CAAQ,CAAA;AAE/E;;;ACjMA,IAAA,gBAAe"}
+{"version":3,"file":"Input-CoY-URbn.cjs","names":["useUniformField","useInputValueDebounce","HeroNumberInput","HeroInput"],"sources":["../src/Input/Input.tsx","../src/Input/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { InputProps as HeroInputProps } from '@heroui/input';\nimport type { ReactNode } from 'react';\nimport type { InputValueTransform } from '../hooks/useInputValueTransform';\n\nimport { Input as HeroInput } from '@heroui/input';\nimport { NumberInput as HeroNumberInput } from '@heroui/number-input';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { useInputValueDebounce } from '../hooks/useInputValueDebounce';\nimport { useUniformField } from '../hooks/useUniformField';\n\n// input variants\nexport const inputVariants = tv({\n  slots: {\n    /** wrapper around the whole input */\n    base: '',\n    /** clear button */\n    clearButton: '',\n    /** actual input element */\n    input: '',\n    /** inner wrapper (HeroUI inputWrapper slot) */\n    inputWrapper: 'bg-content1 group-data-[focus=true]:border-focus',\n  },\n});\n\ntype VariantProps = TVProps<typeof inputVariants>;\ntype ClassName = TVClassName<typeof inputVariants>;\n\nexport interface InputProps extends VariantProps {\n  /** Custom aria-label for accessibility. If not provided, falls back to field name when no visible label exists */\n  ariaLabel?: string;\n  /** CSS class name */\n  className?: ClassName;\n  /** shows clear button when input has value */\n  clearable?: boolean;\n  /** debounce delay in milliseconds for form state updates (default: 300ms) */\n  debounceDelay?: number;\n  /** input field is disabled */\n  disabled?: boolean;\n  /** added content to the end of the input Field. */\n  endContent?: ReactNode;\n  /** form field label */\n  label?: ReactNode;\n  /** form field name */\n  name: string;\n  /** callback that is fired when the value is cleared */\n  onClear?: () => void;\n  /** form field placeholder */\n  placeholder?: string;\n  /** size of the input */\n  size?: 'sm' | 'md' | 'lg';\n  /** content added to the start of the input field */\n  startContent?: ReactNode;\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n  /** allows disentangled display and form values for a field */\n  transform?: InputValueTransform<string>;\n  /** input type */\n  type?: 'number' | 'password';\n}\n\n/**\n * Input component based on [HeroUI Input](https://www.heroui.com//docs/components/input)\n */\nconst Input = ({\n  className: _className = undefined,\n  clearable = false,\n  debounceDelay = 300,\n  endContent = undefined,\n  name,\n  onClear = undefined,\n  placeholder = ' ',\n  size = undefined,\n  startContent = undefined,\n  type = undefined,\n  ...uniformFieldProps\n}: InputProps) => {\n  const {\n    ariaLabel,\n    disabled,\n    field: {\n      onChange: fieldOnChange,\n      onBlur: fieldOnBlur,\n      value: fieldValue,\n      ref,\n    },\n    errorMessage,\n    invalid,\n    label,\n    required,\n    testId,\n    resetField,\n  } = useUniformField({ name, type, ...uniformFieldProps });\n\n  // Use hook that provides debounced onChange and enhanced blur handling\n  const { onChange, onBlur, value } = useInputValueDebounce({\n    debounceDelay,\n    name,\n    onBlur: fieldOnBlur,\n    onChange: fieldOnChange,\n    value: fieldValue,\n  });\n\n  // If input is clearable add props for clearing input value\n  const clearableProps: Pick<HeroInputProps, 'isClearable' | 'onClear'> =\n    clearable\n      ? {\n          isClearable: true,\n          onClear: () => {\n            // if field had initial value we do not reset it\n            // to that value, but clear it instead\n            resetField(name, { defaultValue: null });\n            // if onClear cb provided we call it\n            if (onClear) {\n              onClear();\n            }\n          },\n        }\n      : {};\n\n  // classNames from slots\n  const variants = inputVariants();\n  const classNames = variantsToClassNames(variants, _className, 'base');\n\n  // Common props for both Input and NumberInput\n  const commonProps = {\n    ref,\n    // Only add aria-label if there's no meaningful placeholder (HeroUI uses placeholder as aria-label)\n    'aria-label':\n      !placeholder || placeholder.trim() === '' ? ariaLabel : undefined,\n    // disable autocomplete\n    autoComplete: 'off',\n    classNames: {\n      base: classNames.base,\n      clearButton: classNames.clearButton,\n      // set padding to 0 for error message exit animation\n      helperWrapper: 'p-0',\n      input: classNames.input,\n      inputWrapper: classNames.inputWrapper,\n    },\n    'data-testid': testId,\n    endContent,\n    errorMessage,\n    id: testId,\n    isDisabled: disabled,\n    isInvalid: invalid,\n    isRequired: required,\n    label,\n    labelPlacement: 'outside' as const,\n    name,\n    onBlur,\n    placeholder,\n    radius: 'sm' as const,\n    size,\n    startContent,\n    variant: 'bordered' as const,\n    ...clearableProps,\n  };\n\n  // Render NumberInput for number type\n  if (type === 'number') {\n    // Parse the string value to number - use null for empty/cleared state to keep component controlled\n    const numberValue =\n      value !== '' && value != null && !Number.isNaN(Number(value))\n        ? Number(value)\n        : null;\n\n    return (\n      <HeroNumberInput\n        {...commonProps}\n        // @ts-expect-error - HeroUI NumberInput type is not compatible with null,\n        // but it needs to be for empty/cleared state to be controlled\n        value={numberValue}\n        // Disable thousands separator to avoid parsing issues\n        formatOptions={{\n          useGrouping: false,\n        }}\n        // NumberInput onChange receives either an event or a number\n        onChange={(e: React.ChangeEvent<HTMLInputElement> | number) => {\n          if (typeof e === 'number') {\n            // Convert number to synthetic event and pass through debounced onChange\n            onChange({\n              target: { value: String(e) },\n            } as React.ChangeEvent<HTMLInputElement>);\n          } else {\n            // Pass event through debounced onChange\n            onChange(e);\n          }\n        }}\n      />\n    );\n  }\n\n  // Render regular Input for text/password\n  return (\n    <HeroInput {...commonProps} onChange={onChange} type={type} value={value} />\n  );\n};\n\nexport default Input;\n","import Input from './Input';\n\nexport type { InputProps } from './Input';\n\nexport { Input };\n\nexport default Input;\n"],"mappings":";;;;;;;;AAcA,MAAa,iBAAA,GAAA,uBAAA,IAAmB,EAC9B,OAAO;;CAEL,MAAM;;CAEN,aAAa;;CAEb,OAAO;;CAEP,cAAc;AAChB,EACF,CAAC;;;;AAyCD,MAAM,SAAS,EACb,WAAW,aAAa,KAAA,GACxB,YAAY,OACZ,gBAAgB,KAChB,aAAa,KAAA,GACb,MACA,UAAU,KAAA,GACV,cAAc,KACd,OAAO,KAAA,GACP,eAAe,KAAA,GACf,OAAO,KAAA,GACP,GAAG,wBACa;CAChB,MAAM,EACJ,WACA,UACA,OAAO,EACL,UAAU,eACV,QAAQ,aACR,OAAO,YACP,OAEF,cACA,SACA,OACA,UACA,QACA,eACEA,oCAAAA,gBAAgB;EAAE;EAAM;EAAM,GAAG;CAAkB,CAAC;CAGxD,MAAM,EAAE,UAAU,QAAQ,UAAUC,0CAAAA,sBAAsB;EACxD;EACA;EACA,QAAQ;EACR,UAAU;EACV,OAAO;CACT,CAAC;CAGD,MAAM,iBACJ,YACI;EACE,aAAa;EACb,eAAe;GAGb,WAAW,MAAM,EAAE,cAAc,KAAK,CAAC;GAEvC,IAAI,SACF,QAAQ;EAEZ;CACF,IACA,CAAC;CAIP,MAAM,cAAA,GAAA,uBAAA,sBADW,cAC8B,GAAG,YAAY,MAAM;CAGpE,MAAM,cAAc;EAClB;EAEA,cACE,CAAC,eAAe,YAAY,KAAK,MAAM,KAAK,YAAY,KAAA;EAE1D,cAAc;EACd,YAAY;GACV,MAAM,WAAW;GACjB,aAAa,WAAW;GAExB,eAAe;GACf,OAAO,WAAW;GAClB,cAAc,WAAW;EAC3B;EACA,eAAe;EACf;EACA;EACA,IAAI;EACJ,YAAY;EACZ,WAAW;EACX,YAAY;EACZ;EACA,gBAAgB;EAChB;EACA;EACA;EACA,QAAQ;EACR;EACA;EACA,SAAS;EACT,GAAG;CACL;CAGA,IAAI,SAAS,UAAU;EAErB,MAAM,cACJ,UAAU,MAAM,SAAS,QAAQ,CAAC,OAAO,MAAM,OAAO,KAAK,CAAC,IACxD,OAAO,KAAK,IACZ;EAEN,OACE,iBAAA,GAAA,kBAAA,KAACC,qBAAAA,aAAD;GACE,GAAI;GAGJ,OAAO;GAEP,eAAe,EACb,aAAa,MACf;GAEA,WAAW,MAAoD;IAC7D,IAAI,OAAO,MAAM,UAEf,SAAS,EACP,QAAQ,EAAE,OAAO,OAAO,CAAC,EAAE,EAC7B,CAAwC;SAGxC,SAAS,CAAC;GAEd;EACD,CAAA;CAEL;CAGA,OACE,iBAAA,GAAA,kBAAA,KAACC,cAAAA,OAAD;EAAW,GAAI;EAAuB;EAAgB;EAAa;CAAQ,CAAA;AAE/E;;;ACjMA,IAAA,gBAAe"}

package/dist/RadioBoxes/index.cjs

@@ -2,7 +2,7 @@ Object.defineProperties(exports, {
 	__esModule: { value: true },
 	[Symbol.toStringTag]: { value: "Module" }
 });
-const require_RadioBoxes = require("../RadioBoxes-DtDsfytJ.cjs");
+const require_RadioBoxes = require("../RadioBoxes-D1hnc1Ri.cjs");
 exports.RadioBoxes = require_RadioBoxes.RadioBoxes;
 exports.default = require_RadioBoxes.RadioBoxes_default;
 exports.radioBoxVariants = require_RadioBoxes.radioBoxVariants;

package/dist/RadioBoxes/index.d.cts

@@ -1,2 +1,2 @@
-import { n as RadioBoxes, r as RadioBoxesProps, t as radioBoxVariants } from "../index-Dz1C3MeK.cjs";
+import { n as RadioBoxes, r as RadioBoxesProps, t as radioBoxVariants } from "../index-9_3XTDJC.cjs";
 export { RadioBoxes, RadioBoxes as default, type RadioBoxesProps, radioBoxVariants };

package/dist/RadioBoxes/index.d.ts

@@ -1,2 +1,2 @@
-import { n as RadioBoxes, r as RadioBoxesProps, t as radioBoxVariants } from "../index-D-UGVdC1.js";
+import { n as RadioBoxes, r as RadioBoxesProps, t as radioBoxVariants } from "../index-GxTY7aAc.js";
 export { RadioBoxes, RadioBoxes as default, type RadioBoxesProps, radioBoxVariants };

package/dist/RadioBoxes/index.js

@@ -1,2 +1,2 @@
-import { n as RadioBoxes, r as radioBoxVariants, t as RadioBoxes_default } from "../RadioBoxes-BR3X986V.js";
+import { n as RadioBoxes, r as radioBoxVariants, t as RadioBoxes_default } from "../RadioBoxes-BJz-aJp3.js";
 export { RadioBoxes, RadioBoxes_default as default, radioBoxVariants };

package/dist/{RadioBoxes-BR3X986V.js → RadioBoxes-BJz-aJp3.js}

@@ -132,4 +132,4 @@ var RadioBoxes_default = RadioBoxes;
 //#endregion
 export { RadioBoxes as n, radioBoxVariants as r, RadioBoxes_default as t };
 
-//# sourceMappingURL=RadioBoxes-BR3X986V.js.map
+//# sourceMappingURL=RadioBoxes-BJz-aJp3.js.map

package/dist/{RadioBoxes-BR3X986V.js.map → RadioBoxes-BJz-aJp3.js.map}

@@ -1 +1 @@
-{"version":3,"file":"RadioBoxes-BR3X986V.js","names":["HeroRadioGroup"],"sources":["../src/RadioBoxes/RadioBox.tsx","../src/RadioBoxes/RadioBoxes.tsx","../src/RadioBoxes/index.ts"],"sourcesContent":["import type { TVClassName } from '@fuf-stack/pixel-utils';\nimport type { RadioProps as HeroRadioProps } from '@heroui/radio';\nimport type { ReactNode } from 'react';\n\nimport { useRadio } from '@heroui/radio';\nimport { VisuallyHidden } from '@react-aria/visually-hidden';\n\nimport { cn, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nexport const radioBoxVariants = tv({\n  slots: {\n    base: 'group inline-flex flex-auto cursor-pointer items-center justify-between gap-4 rounded-lg border-2 border-default p-4 hover:bg-content2 data-[selected=true]:border-focus',\n    control: '',\n    description: 'text-foreground opacity-70 text-small',\n    icon: '',\n    label: '',\n    labelWrapper: 'grow',\n  },\n  variants: {\n    isDisabled: {\n      true: {\n        base: 'pointer-events-none opacity-disabled',\n      },\n    },\n    isInvalid: {\n      true: {\n        base: '!border-danger',\n      },\n    },\n  },\n});\n\ntype ClassName = TVClassName<typeof radioBoxVariants>;\n\nexport interface RadioBoxProps extends Omit<HeroRadioProps, 'className'> {\n  /** CSS class name */\n  className?: ClassName;\n  /** icon for the option */\n  icon?: ReactNode;\n  /** whether the radio is invalid */\n  isInvalid?: boolean;\n}\n\nexport const RadioBox = ({\n  classNames: _classNames = undefined,\n  icon = undefined,\n  isInvalid = false,\n  ...props\n}: RadioBoxProps) => {\n  const {\n    children,\n    Component,\n    description,\n    getBaseProps,\n    getControlProps,\n    getInputProps,\n    getLabelProps,\n    getLabelWrapperProps,\n    getWrapperProps,\n    isDisabled,\n  } = useRadio(props as HeroRadioProps);\n\n  // classNames from slots\n  const variants = radioBoxVariants({\n    isDisabled,\n    isInvalid,\n  });\n  const classNames = variantsToClassNames(\n    variants,\n    // @ts-expect-error not sure here, but it works\n    _classNames,\n    'base',\n  );\n\n  return (\n    <Component {...getBaseProps()} className={classNames.base}>\n      <VisuallyHidden>\n        <input {...getInputProps()} />\n      </VisuallyHidden>\n      {!icon ? (\n        <span {...getWrapperProps()}>\n          <span\n            {...getControlProps()}\n            className={cn(getControlProps().className, classNames.control)}\n          />\n        </span>\n      ) : null}\n      {icon ? <div className={classNames.icon}>{icon}</div> : null}\n      <div\n        {...getLabelWrapperProps()}\n        className={cn(\n          getLabelWrapperProps().className,\n          classNames.labelWrapper,\n        )}\n      >\n        {children ? (\n          <span\n            {...getLabelProps()}\n            className={cn(getLabelProps().className, classNames.label)}\n          >\n            {children}\n          </span>\n        ) : null}\n        {description ? (\n          <div className={classNames.description}>{description}</div>\n        ) : null}\n      </div>\n      {icon ? (\n        <span {...getWrapperProps()}>\n          <span\n            {...getControlProps()}\n            className={cn(getControlProps().className, classNames.control)}\n          />\n        </span>\n      ) : null}\n    </Component>\n  );\n};\n\nexport default RadioBox;\n","import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ReactNode } from 'react';\n//\nimport type { RadioBoxProps } from './RadioBox';\n\nimport { RadioGroup as HeroRadioGroup } from '@heroui/radio';\n\nimport { slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { createOptionValueConverter } from '../helpers';\nimport { useUniformField } from '../hooks/useUniformField';\nimport { RadioBox } from './RadioBox';\n\nexport const radioBoxesVariants = tv({\n  slots: {\n    base: 'group gap-0', // Needs group for group-data condition\n    boxBase: '',\n    boxControl: '',\n    boxDescription: '',\n    boxLabel: '',\n    boxLabelWrapper: '',\n    // see HeroUI styles for group-data condition,\n    // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/core/theme/src/components/select.ts\n    label:\n      'mb-2 inline-flex text-sm text-foreground subpixel-antialiased group-data-[invalid=true]:text-danger',\n    wrapper: '',\n  },\n});\n\ntype VariantProps = TVProps<typeof radioBoxesVariants>;\ntype ClassName = TVClassName<typeof radioBoxesVariants>;\n\nexport interface RadioBoxesOption {\n  /** Description of the value. Works with variant radioBox. */\n  description?: ReactNode;\n  /** disables the option */\n  disabled?: boolean;\n  /** option label */\n  label?: ReactNode;\n  /** option icon */\n  icon?: ReactNode;\n  /** HTML data-testid attribute of the option */\n  testId?: string;\n  /** option value */\n  value: string | number;\n}\n\nexport interface RadioBoxesProps extends VariantProps {\n  /** Custom aria-label for accessibility. If not provided, falls back to field name when no visible label exists */\n  ariaLabel?: string;\n  /** CSS class name */\n  className?: ClassName;\n  /** Determines if the Buttons are disabled or not. */\n  disabled?: boolean;\n  /** determines orientation of the Buttons. */\n  inline?: boolean;\n  /** Label displayed next to the RadioButton. */\n  label?: ReactNode;\n  /** Name the RadioButtons are registered at in HTML forms (react-hook-form). */\n  name: string;\n  /** Radio button configuration. */\n  options: RadioBoxesOption[];\n  /** Id to grab element in internal tests. */\n  testId?: string;\n}\n\n/**\n * RadioBoxes component based on [HeroUI RadioGroup](https://www.heroui.com//docs/components/radio-group)\n */\nconst RadioBoxes = ({\n  className = undefined,\n  inline = false,\n  name,\n  options,\n  ...uniformFieldProps\n}: RadioBoxesProps) => {\n  const {\n    ariaLabel,\n    errorMessage,\n    invalid,\n    disabled,\n    label,\n    field: { onBlur, onChange, ref, value },\n    required,\n    testId,\n  } = useUniformField({\n    name,\n    ...uniformFieldProps,\n  });\n\n  // Create converter to preserve number types for option values\n  const { convertToOriginalType } = createOptionValueConverter(options);\n\n  // classNames from slots\n  const variants = radioBoxesVariants();\n  const classNames = variantsToClassNames(variants, className, 'base');\n  const boxClassNames: RadioBoxProps['classNames'] = {\n    base: classNames.boxBase,\n    control: classNames.boxControl,\n    description: classNames.boxDescription,\n    label: classNames.boxLabel,\n    labelWrapper: classNames.boxLabelWrapper,\n  };\n\n  return (\n    <HeroRadioGroup\n      ref={ref}\n      aria-label={ariaLabel}\n      classNames={classNames}\n      // see HeroUI styles for group-data condition (data-invalid),\n      // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/components/select/src/use-select.ts\n      data-invalid={invalid}\n      data-required={required}\n      data-testid={testId}\n      errorMessage={errorMessage}\n      isDisabled={disabled}\n      isInvalid={invalid}\n      isRequired={required}\n      label={label ? <legend>{label}</legend> : null}\n      name={name}\n      onBlur={onBlur}\n      orientation={inline ? 'horizontal' : 'vertical'}\n      value={value != null ? String(value) : ''}\n      onValueChange={(newValue) => {\n        onChange(convertToOriginalType(newValue));\n      }}\n    >\n      {options.map((option) => {\n        if ('value' in option) {\n          const optionTestId = slugify(\n            `${testId}_option_${option.testId ?? option.value}`,\n            { replaceDots: true },\n          );\n          return (\n            <RadioBox\n              key={String(option.value)}\n              classNames={boxClassNames}\n              data-testid={optionTestId}\n              description={option.description}\n              icon={option.icon}\n              isDisabled={!!disabled || option.disabled}\n              isInvalid={invalid}\n              value={String(option.value)}\n            >\n              {option.label ?? option.value}\n            </RadioBox>\n          );\n        }\n        return null;\n      })}\n    </HeroRadioGroup>\n  );\n};\n\nexport default RadioBoxes;\n","import RadioBoxes from './RadioBoxes';\n\nexport type { RadioBoxesProps } from './RadioBoxes';\nexport { radioBoxVariants } from './RadioBox';\n\nexport { RadioBoxes };\n\nexport default RadioBoxes;\n"],"mappings":"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"}
+{"version":3,"file":"RadioBoxes-BJz-aJp3.js","names":["HeroRadioGroup"],"sources":["../src/RadioBoxes/RadioBox.tsx","../src/RadioBoxes/RadioBoxes.tsx","../src/RadioBoxes/index.ts"],"sourcesContent":["import type { TVClassName } from '@fuf-stack/pixel-utils';\nimport type { RadioProps as HeroRadioProps } from '@heroui/radio';\nimport type { ReactNode } from 'react';\n\nimport { useRadio } from '@heroui/radio';\nimport { VisuallyHidden } from '@react-aria/visually-hidden';\n\nimport { cn, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nexport const radioBoxVariants = tv({\n  slots: {\n    base: 'group inline-flex flex-auto cursor-pointer items-center justify-between gap-4 rounded-lg border-2 border-default p-4 hover:bg-content2 data-[selected=true]:border-focus',\n    control: '',\n    description: 'text-foreground opacity-70 text-small',\n    icon: '',\n    label: '',\n    labelWrapper: 'grow',\n  },\n  variants: {\n    isDisabled: {\n      true: {\n        base: 'pointer-events-none opacity-disabled',\n      },\n    },\n    isInvalid: {\n      true: {\n        base: '!border-danger',\n      },\n    },\n  },\n});\n\ntype ClassName = TVClassName<typeof radioBoxVariants>;\n\nexport interface RadioBoxProps extends Omit<HeroRadioProps, 'className'> {\n  /** CSS class name */\n  className?: ClassName;\n  /** icon for the option */\n  icon?: ReactNode;\n  /** whether the radio is invalid */\n  isInvalid?: boolean;\n}\n\nexport const RadioBox = ({\n  classNames: _classNames = undefined,\n  icon = undefined,\n  isInvalid = false,\n  ...props\n}: RadioBoxProps) => {\n  const {\n    children,\n    Component,\n    description,\n    getBaseProps,\n    getControlProps,\n    getInputProps,\n    getLabelProps,\n    getLabelWrapperProps,\n    getWrapperProps,\n    isDisabled,\n  } = useRadio(props as HeroRadioProps);\n\n  // classNames from slots\n  const variants = radioBoxVariants({\n    isDisabled,\n    isInvalid,\n  });\n  const classNames = variantsToClassNames(\n    variants,\n    // @ts-expect-error not sure here, but it works\n    _classNames,\n    'base',\n  );\n\n  return (\n    <Component {...getBaseProps()} className={classNames.base}>\n      <VisuallyHidden>\n        <input {...getInputProps()} />\n      </VisuallyHidden>\n      {!icon ? (\n        <span {...getWrapperProps()}>\n          <span\n            {...getControlProps()}\n            className={cn(getControlProps().className, classNames.control)}\n          />\n        </span>\n      ) : null}\n      {icon ? <div className={classNames.icon}>{icon}</div> : null}\n      <div\n        {...getLabelWrapperProps()}\n        className={cn(\n          getLabelWrapperProps().className,\n          classNames.labelWrapper,\n        )}\n      >\n        {children ? (\n          <span\n            {...getLabelProps()}\n            className={cn(getLabelProps().className, classNames.label)}\n          >\n            {children}\n          </span>\n        ) : null}\n        {description ? (\n          <div className={classNames.description}>{description}</div>\n        ) : null}\n      </div>\n      {icon ? (\n        <span {...getWrapperProps()}>\n          <span\n            {...getControlProps()}\n            className={cn(getControlProps().className, classNames.control)}\n          />\n        </span>\n      ) : null}\n    </Component>\n  );\n};\n\nexport default RadioBox;\n","import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ReactNode } from 'react';\n//\nimport type { RadioBoxProps } from './RadioBox';\n\nimport { RadioGroup as HeroRadioGroup } from '@heroui/radio';\n\nimport { slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { createOptionValueConverter } from '../helpers';\nimport { useUniformField } from '../hooks/useUniformField';\nimport { RadioBox } from './RadioBox';\n\nexport const radioBoxesVariants = tv({\n  slots: {\n    base: 'group gap-0', // Needs group for group-data condition\n    boxBase: '',\n    boxControl: '',\n    boxDescription: '',\n    boxLabel: '',\n    boxLabelWrapper: '',\n    // see HeroUI styles for group-data condition,\n    // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/core/theme/src/components/select.ts\n    label:\n      'mb-2 inline-flex text-sm text-foreground subpixel-antialiased group-data-[invalid=true]:text-danger',\n    wrapper: '',\n  },\n});\n\ntype VariantProps = TVProps<typeof radioBoxesVariants>;\ntype ClassName = TVClassName<typeof radioBoxesVariants>;\n\nexport interface RadioBoxesOption {\n  /** Description of the value. Works with variant radioBox. */\n  description?: ReactNode;\n  /** disables the option */\n  disabled?: boolean;\n  /** option label */\n  label?: ReactNode;\n  /** option icon */\n  icon?: ReactNode;\n  /** HTML data-testid attribute of the option */\n  testId?: string;\n  /** option value */\n  value: string | number;\n}\n\nexport interface RadioBoxesProps extends VariantProps {\n  /** Custom aria-label for accessibility. If not provided, falls back to field name when no visible label exists */\n  ariaLabel?: string;\n  /** CSS class name */\n  className?: ClassName;\n  /** Determines if the Buttons are disabled or not. */\n  disabled?: boolean;\n  /** determines orientation of the Buttons. */\n  inline?: boolean;\n  /** Label displayed next to the RadioButton. */\n  label?: ReactNode;\n  /** Name the RadioButtons are registered at in HTML forms (react-hook-form). */\n  name: string;\n  /** Radio button configuration. */\n  options: RadioBoxesOption[];\n  /** Id to grab element in internal tests. */\n  testId?: string;\n}\n\n/**\n * RadioBoxes component based on [HeroUI RadioGroup](https://www.heroui.com//docs/components/radio-group)\n */\nconst RadioBoxes = ({\n  className = undefined,\n  inline = false,\n  name,\n  options,\n  ...uniformFieldProps\n}: RadioBoxesProps) => {\n  const {\n    ariaLabel,\n    errorMessage,\n    invalid,\n    disabled,\n    label,\n    field: { onBlur, onChange, ref, value },\n    required,\n    testId,\n  } = useUniformField({\n    name,\n    ...uniformFieldProps,\n  });\n\n  // Create converter to preserve number types for option values\n  const { convertToOriginalType } = createOptionValueConverter(options);\n\n  // classNames from slots\n  const variants = radioBoxesVariants();\n  const classNames = variantsToClassNames(variants, className, 'base');\n  const boxClassNames: RadioBoxProps['classNames'] = {\n    base: classNames.boxBase,\n    control: classNames.boxControl,\n    description: classNames.boxDescription,\n    label: classNames.boxLabel,\n    labelWrapper: classNames.boxLabelWrapper,\n  };\n\n  return (\n    <HeroRadioGroup\n      ref={ref}\n      aria-label={ariaLabel}\n      classNames={classNames}\n      // see HeroUI styles for group-data condition (data-invalid),\n      // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/components/select/src/use-select.ts\n      data-invalid={invalid}\n      data-required={required}\n      data-testid={testId}\n      errorMessage={errorMessage}\n      isDisabled={disabled}\n      isInvalid={invalid}\n      isRequired={required}\n      label={label ? <legend>{label}</legend> : null}\n      name={name}\n      onBlur={onBlur}\n      orientation={inline ? 'horizontal' : 'vertical'}\n      value={value != null ? String(value) : ''}\n      onValueChange={(newValue) => {\n        onChange(convertToOriginalType(newValue));\n      }}\n    >\n      {options.map((option) => {\n        if ('value' in option) {\n          const optionTestId = slugify(\n            `${testId}_option_${option.testId ?? option.value}`,\n            { replaceDots: true },\n          );\n          return (\n            <RadioBox\n              key={String(option.value)}\n              classNames={boxClassNames}\n              data-testid={optionTestId}\n              description={option.description}\n              icon={option.icon}\n              isDisabled={!!disabled || option.disabled}\n              isInvalid={invalid}\n              value={String(option.value)}\n            >\n              {option.label ?? option.value}\n            </RadioBox>\n          );\n        }\n        return null;\n      })}\n    </HeroRadioGroup>\n  );\n};\n\nexport default RadioBoxes;\n","import RadioBoxes from './RadioBoxes';\n\nexport type { RadioBoxesProps } from './RadioBoxes';\nexport { radioBoxVariants } from './RadioBox';\n\nexport { RadioBoxes };\n\nexport default RadioBoxes;\n"],"mappings":"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"}

package/dist/{RadioBoxes-DtDsfytJ.cjs → RadioBoxes-D1hnc1Ri.cjs}

@@ -150,4 +150,4 @@ Object.defineProperty(exports, "radioBoxVariants", {
 	}
 });
 
-//# sourceMappingURL=RadioBoxes-DtDsfytJ.cjs.map
+//# sourceMappingURL=RadioBoxes-D1hnc1Ri.cjs.map