@fuf-stack/uniform 0.19.3 → 0.20.0

package/dist/{chunk-YLTKVPHE.cjs → chunk-NVSZYURK.cjs}

@@ -14,7 +14,11 @@ var _chunkF4VYFBYCcjs = require('./chunk-F4VYFBYC.cjs');
 var _chunk555JRYCScjs = require('./chunk-555JRYCS.cjs');
 
 // src/CheckboxGroup/CheckboxGroup.tsx
+
+
+
 var _checkbox = require('@heroui/checkbox');
+var _theme = require('@heroui/theme');
 var _pixelutils = require('@fuf-stack/pixel-utils');
 var _jsxruntime = require('react/jsx-runtime');
 var checkboxGroupVariants = _pixelutils.tv.call(void 0, {
@@ -22,20 +26,40 @@ var checkboxGroupVariants = _pixelutils.tv.call(void 0, {
     base: "group",
     // Needs group for group-data condition
     errorMessage: "text-tiny",
-    itemBase: "",
-    itemIcon: "",
-    itemLabel: "text-sm",
-    itemWrapper: "",
     // see HeroUI styles for group-data condition,
     // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/core/theme/src/components/select.ts
     label: "text-sm text-foreground subpixel-antialiased group-data-[invalid=true]:!text-danger",
+    optionBase: "",
+    optionIcon: "",
+    optionLabel: "",
+    optionLabelSubline: "!text-small text-foreground-400",
+    optionWrapper: "",
     wrapper: ""
+  },
+  variants: {
+    // see: https://github.com/heroui-inc/heroui/blob/canary/packages/core/theme/src/components/checkbox.ts
+    color: _chunk555JRYCScjs.__spreadValues.call(void 0, {
+      info: {
+        wrapper: "text-info-foreground after:bg-info after:text-info-foreground"
+      }
+    }, _theme.checkbox.variants.color),
+    lineThrough: {
+      true: {
+        optionLabel: [
+          ..._theme.checkbox.variants.lineThrough.true.label,
+          // fix stroke position when used with subline and enable animation
+          "relative before:transition-all before:duration-200"
+        ]
+      }
+    }
   }
 });
 var CheckboxGroup = ({
   className = void 0,
+  color = "primary",
   inline = false,
   label = void 0,
+  lineThrough = false,
   options,
   disabled = false,
   name,
@@ -52,18 +76,17 @@ var CheckboxGroup = ({
   const { onChange, value = [], ref, onBlur } = field;
   const showTestIdCopyButton = debugMode === "debug-testids";
   const showLabel = label || showTestIdCopyButton;
-  const variants = checkboxGroupVariants();
+  const variants = checkboxGroupVariants({ lineThrough });
   const classNames = _pixelutils.variantsToClassNames.call(void 0, variants, className, "base");
-  const itemClassName = {
-    base: classNames.itemBase,
-    wrapper: classNames.itemWrapper,
-    icon: classNames.itemIcon,
-    label: classNames.itemLabel
-  };
-  const itemGroupClassName = {
+  const heroCheckboxGroupClassNames = {
     base: classNames.base,
-    wrapper: classNames.wrapper,
-    label: classNames.label
+    label: classNames.label,
+    wrapper: classNames.wrapper
+  };
+  const heroCheckboxClassNames = {
+    base: classNames.optionBase,
+    icon: classNames.optionIcon,
+    wrapper: classNames.optionWrapper
   };
   const errorFlat = _error && Object.values(
     _error
@@ -79,7 +102,7 @@ var CheckboxGroup = ({
   };
   const singleCheckboxProps = {
     value: getCheckboxValue(value),
-    onChange: (newValue) => onChange(newValue && newValue[0])
+    onChange: (newValue) => onChange(newValue == null ? void 0 : newValue[0])
   };
   const multipleCheckboxProps = {
     onChange,
@@ -89,11 +112,11 @@ var CheckboxGroup = ({
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     _checkbox.CheckboxGroup,
     _chunk555JRYCScjs.__spreadProps.call(void 0, _chunk555JRYCScjs.__spreadValues.call(void 0, {
-      name,
-      classNames: itemGroupClassName,
-      "data-testid": testId,
+      classNames: heroCheckboxGroupClassNames,
+      color: color === "info" ? "primary" : color,
       "data-invalid": invalid,
-      errorMessage: errorFlat.length && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "data-testid": testId,
+      errorMessage: errorFlat.length > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         _chunkGNYQC5IJcjs.FieldValidationError_default,
         {
           className: classNames.errorMessage,
@@ -109,6 +132,7 @@ var CheckboxGroup = ({
         label,
         showTestIdCopyButton && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkPA2DQCBYcjs.FieldCopyTestIdButton_default, { testId })
       ] }),
+      name,
       onBlur,
       orientation: inline ? "horizontal" : "vertical",
       ref
@@ -117,15 +141,20 @@ var CheckboxGroup = ({
         const optionTestId = _pixelutils.slugify.call(void 0, 
           `${testId}_option_${(option == null ? void 0 : option.testId) || (option == null ? void 0 : option.value)}`
         );
+        const labelContent = option.labelSubline ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col items-start", children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: classNames.optionLabel, children: option.label }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: `${classNames.optionLabelSubline}`, children: option.labelSubline })
+        ] }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: classNames.optionLabel, children: option.label });
         return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           _checkbox.Checkbox,
           {
+            "aria-label": typeof option.label === "string" ? option.label : option.value,
+            classNames: heroCheckboxClassNames,
             "data-invalid": invalid,
-            classNames: itemClassName,
+            "data-testid": optionTestId,
             isDisabled: disabled || option.disabled,
             value: option == null ? void 0 : option.value,
-            "data-testid": optionTestId,
-            children: option == null ? void 0 : option.label
+            children: labelContent
           },
           `index_${option.value}`
         );
@@ -142,4 +171,4 @@ var CheckboxGroup_default2 = CheckboxGroup_default;
 
 
 exports.CheckboxGroup_default = CheckboxGroup_default; exports.CheckboxGroup_default2 = CheckboxGroup_default2;
-//# sourceMappingURL=chunk-YLTKVPHE.cjs.map
+//# sourceMappingURL=chunk-NVSZYURK.cjs.map

package/dist/chunk-NVSZYURK.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-NVSZYURK.cjs","../src/CheckboxGroup/CheckboxGroup.tsx","../src/CheckboxGroup/index.ts"],"names":["CheckboxGroup_default"],"mappings":"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","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-NVSZYURK.cjs","sourcesContent":[null,"import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ReactNode } from 'react';\nimport type { FieldError } from 'react-hook-form';\n\nimport {\n  Checkbox as HeroCheckbox,\n  CheckboxGroup as HeroCheckboxGroup,\n} from '@heroui/checkbox';\nimport { checkbox as heroCheckboxVariants } from '@heroui/theme';\n\nimport { slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { useController, useFormContext } from '../hooks';\nimport { FieldCopyTestIdButton } from '../partials/FieldCopyTestIdButton';\nimport { FieldValidationError } from '../partials/FieldValidationError';\n\nexport const checkboxGroupVariants = tv({\n  slots: {\n    base: 'group', // Needs group for group-data condition\n    errorMessage: 'text-tiny',\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      'text-sm text-foreground subpixel-antialiased group-data-[invalid=true]:!text-danger',\n    optionBase: '',\n    optionIcon: '',\n    optionLabel: '',\n    optionLabelSubline: '!text-small text-foreground-400',\n    optionWrapper: '',\n    wrapper: '',\n  },\n  variants: {\n    // see: https://github.com/heroui-inc/heroui/blob/canary/packages/core/theme/src/components/checkbox.ts\n    color: {\n      info: {\n        wrapper:\n          'text-info-foreground after:bg-info after:text-info-foreground',\n      },\n      ...heroCheckboxVariants.variants.color,\n    } as const,\n    lineThrough: {\n      true: {\n        optionLabel: [\n          ...heroCheckboxVariants.variants.lineThrough.true.label,\n          // fix stroke position when used with subline and enable animation\n          'relative before:transition-all before:duration-200',\n        ],\n      },\n    },\n  },\n});\n\ntype VariantProps = TVProps<typeof checkboxGroupVariants>;\ntype ClassName = TVClassName<typeof checkboxGroupVariants>;\n\nexport type CheckboxGroupOption = {\n  /** option label */\n  label?: ReactNode;\n  /** subline displayed below the label */\n  labelSubline?: ReactNode;\n  /** option value */\n  value: string;\n  /** disables the option */\n  disabled?: boolean;\n  /** HTML data-testid attribute of the option */\n  testId?: string;\n};\n\nexport interface CheckboxGroupProps extends VariantProps {\n  /** CSS class name */\n  className?: ClassName;\n  /** Color scheme of the checkboxes */\n  color?: VariantProps['color'];\n  /** Sets all checkboxes disabled */\n  disabled?: boolean;\n  /** Orientation of the checkboxes */\n  inline?: boolean;\n  /** Label displayed above the checkboxes */\n  label?: ReactNode;\n  /** Whether the checkboxes label should be crossed out */\n  lineThrough?: boolean;\n  /** Name the Field is registered on the form */\n  name: string;\n  /** Checkboxes that should be displayed. */\n  options: CheckboxGroupOption[];\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n}\n\n/**\n * CheckboxGroup component based on [HeroUI CheckboxGroup](https://www.heroui.com//docs/components/checkbox-group)\n */\nconst CheckboxGroup = ({\n  className = undefined,\n  color = 'primary',\n  inline = false,\n  label = undefined,\n  lineThrough = false,\n  options,\n  disabled = false,\n  name,\n  testId: _testId = undefined,\n}: CheckboxGroupProps) => {\n  const { control, debugMode, getFieldState } = useFormContext();\n  const {\n    error: _error,\n    invalid,\n    required,\n    testId,\n  } = getFieldState(name, _testId);\n\n  const { field } = useController({ control, name, disabled });\n  const { onChange, value = [], ref, onBlur } = field;\n\n  const showTestIdCopyButton = debugMode === 'debug-testids';\n  const showLabel = label || showTestIdCopyButton;\n\n  const variants = checkboxGroupVariants({ lineThrough });\n  const classNames = variantsToClassNames(variants, className, 'base');\n\n  // map slots to HeroUI class names\n  const heroCheckboxGroupClassNames = {\n    base: classNames.base,\n    label: classNames.label,\n    wrapper: classNames.wrapper,\n  };\n  const heroCheckboxClassNames = {\n    base: classNames.optionBase,\n    icon: classNames.optionIcon,\n    wrapper: classNames.optionWrapper,\n  };\n\n  // Convert React Hook Form's nested error object structure to a flat array\n  // RHF errors can be nested like: checkboxField.0 (individual checkbox errors)\n  // and checkboxField._error (global field errors) - this flattens all\n  // error values into a single array for rendering with FieldValidationError\n  const errorFlat: FieldError[] =\n    (_error &&\n      Object.values(\n        _error as unknown as Record<string, FieldError[]>,\n      ).flat()) ||\n    [];\n\n  /**\n   * Handles the checkbox group value changes based on the number of options:\n   * 1. For single checkbox (options.length === 1):\n   *    - Converts undefined/empty array to [] for consistent controlled behavior\n   *    - Extracts single value from array for onChange\n   *\n   *    Example: undefined → []\n   *            [value] → value\n   *\n   * 2. For multiple checkboxes:\n   *    - Uses raw value array with fallback to empty array\n   *    - Passes through onChange directly\n   *\n   *    Example: undefined → []\n   *            ['value1', 'value2'] → ['value1', 'value2']\n   */\n  const getCheckboxValue = (inputValue: unknown): string[] => {\n    if (Array.isArray(inputValue)) {\n      return inputValue;\n    }\n    if (inputValue) {\n      return [inputValue as string];\n    }\n    return [];\n  };\n\n  const singleCheckboxProps = {\n    value: getCheckboxValue(value),\n    onChange: (newValue: string[]) => onChange(newValue?.[0]),\n  };\n\n  const multipleCheckboxProps = {\n    onChange,\n    value: getCheckboxValue(value),\n  };\n\n  const checkboxGroupProps =\n    options.length === 1 ? singleCheckboxProps : multipleCheckboxProps;\n\n  return (\n    <HeroCheckboxGroup\n      classNames={heroCheckboxGroupClassNames}\n      color={color === 'info' ? 'primary' : color}\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-testid={testId}\n      errorMessage={\n        errorFlat.length > 0 && (\n          <FieldValidationError\n            className={classNames.errorMessage}\n            error={errorFlat}\n            testId={testId}\n          />\n        )\n      }\n      isDisabled={disabled}\n      isInvalid={invalid}\n      isRequired={required}\n      label={\n        showLabel && (\n          // eslint-disable-next-line jsx-a11y/label-has-associated-control\n          <label>\n            {label}\n            {showTestIdCopyButton && <FieldCopyTestIdButton testId={testId} />}\n          </label>\n        )\n      }\n      name={name}\n      onBlur={onBlur}\n      orientation={inline ? 'horizontal' : 'vertical'}\n      ref={ref}\n      // eslint-disable-next-line react/jsx-props-no-spreading\n      {...checkboxGroupProps}\n    >\n      {options?.map((option) => {\n        const optionTestId = slugify(\n          `${testId}_option_${option?.testId || option?.value}`,\n        );\n\n        const labelContent = option.labelSubline ? (\n          <div className=\"flex flex-col items-start\">\n            <span className={classNames.optionLabel}>{option.label}</span>\n            <span className={`${classNames.optionLabelSubline}`}>\n              {option.labelSubline}\n            </span>\n          </div>\n        ) : (\n          <span className={classNames.optionLabel}>{option.label}</span>\n        );\n\n        return (\n          <HeroCheckbox\n            aria-label={\n              typeof option.label === 'string' ? option.label : option.value\n            }\n            classNames={heroCheckboxClassNames}\n            data-invalid={invalid}\n            data-testid={optionTestId}\n            isDisabled={disabled || option.disabled}\n            key={`index_${option.value}`}\n            value={option?.value}\n          >\n            {labelContent}\n          </HeroCheckbox>\n        );\n      })}\n    </HeroCheckboxGroup>\n  );\n};\n\nexport default CheckboxGroup;\n","import CheckboxGroup from './CheckboxGroup';\n\nexport type { CheckboxGroupProps, CheckboxGroupOption } from './CheckboxGroup';\n\nexport { CheckboxGroup };\n\nexport default CheckboxGroup;\n"]}

package/dist/{chunk-BC6ZP7TF.js → chunk-OLPDYX6B.js}

@@ -14,7 +14,11 @@ import {
 } from "./chunk-K2V4ULA2.js";
 
 // src/CheckboxGroup/CheckboxGroup.tsx
-import { Checkbox, CheckboxGroup as HeroCheckboxGroup } from "@heroui/checkbox";
+import {
+  Checkbox as HeroCheckbox,
+  CheckboxGroup as HeroCheckboxGroup
+} from "@heroui/checkbox";
+import { checkbox as heroCheckboxVariants } from "@heroui/theme";
 import { slugify, tv, variantsToClassNames } from "@fuf-stack/pixel-utils";
 import { jsx, jsxs } from "react/jsx-runtime";
 var checkboxGroupVariants = tv({
@@ -22,20 +26,40 @@ var checkboxGroupVariants = tv({
     base: "group",
     // Needs group for group-data condition
     errorMessage: "text-tiny",
-    itemBase: "",
-    itemIcon: "",
-    itemLabel: "text-sm",
-    itemWrapper: "",
     // see HeroUI styles for group-data condition,
     // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/core/theme/src/components/select.ts
     label: "text-sm text-foreground subpixel-antialiased group-data-[invalid=true]:!text-danger",
+    optionBase: "",
+    optionIcon: "",
+    optionLabel: "",
+    optionLabelSubline: "!text-small text-foreground-400",
+    optionWrapper: "",
     wrapper: ""
+  },
+  variants: {
+    // see: https://github.com/heroui-inc/heroui/blob/canary/packages/core/theme/src/components/checkbox.ts
+    color: __spreadValues({
+      info: {
+        wrapper: "text-info-foreground after:bg-info after:text-info-foreground"
+      }
+    }, heroCheckboxVariants.variants.color),
+    lineThrough: {
+      true: {
+        optionLabel: [
+          ...heroCheckboxVariants.variants.lineThrough.true.label,
+          // fix stroke position when used with subline and enable animation
+          "relative before:transition-all before:duration-200"
+        ]
+      }
+    }
   }
 });
 var CheckboxGroup = ({
   className = void 0,
+  color = "primary",
   inline = false,
   label = void 0,
+  lineThrough = false,
   options,
   disabled = false,
   name,
@@ -52,18 +76,17 @@ var CheckboxGroup = ({
   const { onChange, value = [], ref, onBlur } = field;
   const showTestIdCopyButton = debugMode === "debug-testids";
   const showLabel = label || showTestIdCopyButton;
-  const variants = checkboxGroupVariants();
+  const variants = checkboxGroupVariants({ lineThrough });
   const classNames = variantsToClassNames(variants, className, "base");
-  const itemClassName = {
-    base: classNames.itemBase,
-    wrapper: classNames.itemWrapper,
-    icon: classNames.itemIcon,
-    label: classNames.itemLabel
-  };
-  const itemGroupClassName = {
+  const heroCheckboxGroupClassNames = {
     base: classNames.base,
-    wrapper: classNames.wrapper,
-    label: classNames.label
+    label: classNames.label,
+    wrapper: classNames.wrapper
+  };
+  const heroCheckboxClassNames = {
+    base: classNames.optionBase,
+    icon: classNames.optionIcon,
+    wrapper: classNames.optionWrapper
   };
   const errorFlat = _error && Object.values(
     _error
@@ -79,7 +102,7 @@ var CheckboxGroup = ({
   };
   const singleCheckboxProps = {
     value: getCheckboxValue(value),
-    onChange: (newValue) => onChange(newValue && newValue[0])
+    onChange: (newValue) => onChange(newValue == null ? void 0 : newValue[0])
   };
   const multipleCheckboxProps = {
     onChange,
@@ -89,11 +112,11 @@ var CheckboxGroup = ({
   return /* @__PURE__ */ jsx(
     HeroCheckboxGroup,
     __spreadProps(__spreadValues({
-      name,
-      classNames: itemGroupClassName,
-      "data-testid": testId,
+      classNames: heroCheckboxGroupClassNames,
+      color: color === "info" ? "primary" : color,
       "data-invalid": invalid,
-      errorMessage: errorFlat.length && /* @__PURE__ */ jsx(
+      "data-testid": testId,
+      errorMessage: errorFlat.length > 0 && /* @__PURE__ */ jsx(
         FieldValidationError_default,
         {
           className: classNames.errorMessage,
@@ -109,6 +132,7 @@ var CheckboxGroup = ({
         label,
         showTestIdCopyButton && /* @__PURE__ */ jsx(FieldCopyTestIdButton_default, { testId })
       ] }),
+      name,
       onBlur,
       orientation: inline ? "horizontal" : "vertical",
       ref
@@ -117,15 +141,20 @@ var CheckboxGroup = ({
         const optionTestId = slugify(
           `${testId}_option_${(option == null ? void 0 : option.testId) || (option == null ? void 0 : option.value)}`
         );
+        const labelContent = option.labelSubline ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start", children: [
+          /* @__PURE__ */ jsx("span", { className: classNames.optionLabel, children: option.label }),
+          /* @__PURE__ */ jsx("span", { className: `${classNames.optionLabelSubline}`, children: option.labelSubline })
+        ] }) : /* @__PURE__ */ jsx("span", { className: classNames.optionLabel, children: option.label });
         return /* @__PURE__ */ jsx(
-          Checkbox,
+          HeroCheckbox,
           {
+            "aria-label": typeof option.label === "string" ? option.label : option.value,
+            classNames: heroCheckboxClassNames,
             "data-invalid": invalid,
-            classNames: itemClassName,
+            "data-testid": optionTestId,
             isDisabled: disabled || option.disabled,
             value: option == null ? void 0 : option.value,
-            "data-testid": optionTestId,
-            children: option == null ? void 0 : option.label
+            children: labelContent
           },
           `index_${option.value}`
         );
@@ -142,4 +171,4 @@ export {
   CheckboxGroup_default,
   CheckboxGroup_default2
 };
-//# sourceMappingURL=chunk-BC6ZP7TF.js.map
+//# sourceMappingURL=chunk-OLPDYX6B.js.map

package/dist/chunk-OLPDYX6B.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/CheckboxGroup/CheckboxGroup.tsx","../src/CheckboxGroup/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ReactNode } from 'react';\nimport type { FieldError } from 'react-hook-form';\n\nimport {\n  Checkbox as HeroCheckbox,\n  CheckboxGroup as HeroCheckboxGroup,\n} from '@heroui/checkbox';\nimport { checkbox as heroCheckboxVariants } from '@heroui/theme';\n\nimport { slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { useController, useFormContext } from '../hooks';\nimport { FieldCopyTestIdButton } from '../partials/FieldCopyTestIdButton';\nimport { FieldValidationError } from '../partials/FieldValidationError';\n\nexport const checkboxGroupVariants = tv({\n  slots: {\n    base: 'group', // Needs group for group-data condition\n    errorMessage: 'text-tiny',\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      'text-sm text-foreground subpixel-antialiased group-data-[invalid=true]:!text-danger',\n    optionBase: '',\n    optionIcon: '',\n    optionLabel: '',\n    optionLabelSubline: '!text-small text-foreground-400',\n    optionWrapper: '',\n    wrapper: '',\n  },\n  variants: {\n    // see: https://github.com/heroui-inc/heroui/blob/canary/packages/core/theme/src/components/checkbox.ts\n    color: {\n      info: {\n        wrapper:\n          'text-info-foreground after:bg-info after:text-info-foreground',\n      },\n      ...heroCheckboxVariants.variants.color,\n    } as const,\n    lineThrough: {\n      true: {\n        optionLabel: [\n          ...heroCheckboxVariants.variants.lineThrough.true.label,\n          // fix stroke position when used with subline and enable animation\n          'relative before:transition-all before:duration-200',\n        ],\n      },\n    },\n  },\n});\n\ntype VariantProps = TVProps<typeof checkboxGroupVariants>;\ntype ClassName = TVClassName<typeof checkboxGroupVariants>;\n\nexport type CheckboxGroupOption = {\n  /** option label */\n  label?: ReactNode;\n  /** subline displayed below the label */\n  labelSubline?: ReactNode;\n  /** option value */\n  value: string;\n  /** disables the option */\n  disabled?: boolean;\n  /** HTML data-testid attribute of the option */\n  testId?: string;\n};\n\nexport interface CheckboxGroupProps extends VariantProps {\n  /** CSS class name */\n  className?: ClassName;\n  /** Color scheme of the checkboxes */\n  color?: VariantProps['color'];\n  /** Sets all checkboxes disabled */\n  disabled?: boolean;\n  /** Orientation of the checkboxes */\n  inline?: boolean;\n  /** Label displayed above the checkboxes */\n  label?: ReactNode;\n  /** Whether the checkboxes label should be crossed out */\n  lineThrough?: boolean;\n  /** Name the Field is registered on the form */\n  name: string;\n  /** Checkboxes that should be displayed. */\n  options: CheckboxGroupOption[];\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n}\n\n/**\n * CheckboxGroup component based on [HeroUI CheckboxGroup](https://www.heroui.com//docs/components/checkbox-group)\n */\nconst CheckboxGroup = ({\n  className = undefined,\n  color = 'primary',\n  inline = false,\n  label = undefined,\n  lineThrough = false,\n  options,\n  disabled = false,\n  name,\n  testId: _testId = undefined,\n}: CheckboxGroupProps) => {\n  const { control, debugMode, getFieldState } = useFormContext();\n  const {\n    error: _error,\n    invalid,\n    required,\n    testId,\n  } = getFieldState(name, _testId);\n\n  const { field } = useController({ control, name, disabled });\n  const { onChange, value = [], ref, onBlur } = field;\n\n  const showTestIdCopyButton = debugMode === 'debug-testids';\n  const showLabel = label || showTestIdCopyButton;\n\n  const variants = checkboxGroupVariants({ lineThrough });\n  const classNames = variantsToClassNames(variants, className, 'base');\n\n  // map slots to HeroUI class names\n  const heroCheckboxGroupClassNames = {\n    base: classNames.base,\n    label: classNames.label,\n    wrapper: classNames.wrapper,\n  };\n  const heroCheckboxClassNames = {\n    base: classNames.optionBase,\n    icon: classNames.optionIcon,\n    wrapper: classNames.optionWrapper,\n  };\n\n  // Convert React Hook Form's nested error object structure to a flat array\n  // RHF errors can be nested like: checkboxField.0 (individual checkbox errors)\n  // and checkboxField._error (global field errors) - this flattens all\n  // error values into a single array for rendering with FieldValidationError\n  const errorFlat: FieldError[] =\n    (_error &&\n      Object.values(\n        _error as unknown as Record<string, FieldError[]>,\n      ).flat()) ||\n    [];\n\n  /**\n   * Handles the checkbox group value changes based on the number of options:\n   * 1. For single checkbox (options.length === 1):\n   *    - Converts undefined/empty array to [] for consistent controlled behavior\n   *    - Extracts single value from array for onChange\n   *\n   *    Example: undefined → []\n   *            [value] → value\n   *\n   * 2. For multiple checkboxes:\n   *    - Uses raw value array with fallback to empty array\n   *    - Passes through onChange directly\n   *\n   *    Example: undefined → []\n   *            ['value1', 'value2'] → ['value1', 'value2']\n   */\n  const getCheckboxValue = (inputValue: unknown): string[] => {\n    if (Array.isArray(inputValue)) {\n      return inputValue;\n    }\n    if (inputValue) {\n      return [inputValue as string];\n    }\n    return [];\n  };\n\n  const singleCheckboxProps = {\n    value: getCheckboxValue(value),\n    onChange: (newValue: string[]) => onChange(newValue?.[0]),\n  };\n\n  const multipleCheckboxProps = {\n    onChange,\n    value: getCheckboxValue(value),\n  };\n\n  const checkboxGroupProps =\n    options.length === 1 ? singleCheckboxProps : multipleCheckboxProps;\n\n  return (\n    <HeroCheckboxGroup\n      classNames={heroCheckboxGroupClassNames}\n      color={color === 'info' ? 'primary' : color}\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-testid={testId}\n      errorMessage={\n        errorFlat.length > 0 && (\n          <FieldValidationError\n            className={classNames.errorMessage}\n            error={errorFlat}\n            testId={testId}\n          />\n        )\n      }\n      isDisabled={disabled}\n      isInvalid={invalid}\n      isRequired={required}\n      label={\n        showLabel && (\n          // eslint-disable-next-line jsx-a11y/label-has-associated-control\n          <label>\n            {label}\n            {showTestIdCopyButton && <FieldCopyTestIdButton testId={testId} />}\n          </label>\n        )\n      }\n      name={name}\n      onBlur={onBlur}\n      orientation={inline ? 'horizontal' : 'vertical'}\n      ref={ref}\n      // eslint-disable-next-line react/jsx-props-no-spreading\n      {...checkboxGroupProps}\n    >\n      {options?.map((option) => {\n        const optionTestId = slugify(\n          `${testId}_option_${option?.testId || option?.value}`,\n        );\n\n        const labelContent = option.labelSubline ? (\n          <div className=\"flex flex-col items-start\">\n            <span className={classNames.optionLabel}>{option.label}</span>\n            <span className={`${classNames.optionLabelSubline}`}>\n              {option.labelSubline}\n            </span>\n          </div>\n        ) : (\n          <span className={classNames.optionLabel}>{option.label}</span>\n        );\n\n        return (\n          <HeroCheckbox\n            aria-label={\n              typeof option.label === 'string' ? option.label : option.value\n            }\n            classNames={heroCheckboxClassNames}\n            data-invalid={invalid}\n            data-testid={optionTestId}\n            isDisabled={disabled || option.disabled}\n            key={`index_${option.value}`}\n            value={option?.value}\n          >\n            {labelContent}\n          </HeroCheckbox>\n        );\n      })}\n    </HeroCheckboxGroup>\n  );\n};\n\nexport default CheckboxGroup;\n","import CheckboxGroup from './CheckboxGroup';\n\nexport type { CheckboxGroupProps, CheckboxGroupOption } from './CheckboxGroup';\n\nexport { CheckboxGroup };\n\nexport default CheckboxGroup;\n"],"mappings":"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","names":["CheckboxGroup_default"]}

package/dist/index.cjs

@@ -15,7 +15,7 @@ var _chunkEHTJ2BYBcjs = require('./chunk-EHTJ2BYB.cjs');
 var _chunkJWYMBKE6cjs = require('./chunk-JWYMBKE6.cjs');
 
 
-var _chunkYLTKVPHEcjs = require('./chunk-YLTKVPHE.cjs');
+var _chunkNVSZYURKcjs = require('./chunk-NVSZYURK.cjs');
 
 
 var _chunk3ISETOB3cjs = require('./chunk-3ISETOB3.cjs');
@@ -80,5 +80,5 @@ require('./chunk-555JRYCS.cjs');
 
 
 
-exports.CheckboxGroup = _chunkYLTKVPHEcjs.CheckboxGroup_default; exports.FieldArray = _chunk3ISETOB3cjs.FieldArray_default; exports.FieldCopyTestIdButton = _chunkPA2DQCBYcjs.FieldCopyTestIdButton_default; exports.FieldValidationError = _chunkGNYQC5IJcjs.FieldValidationError_default; exports.Form = _chunkIYR5A3CVcjs.Form_default; exports.Grid = _chunk6GN255GPcjs.Grid_default; exports.Input = _chunkBDJHUA55cjs.Input_default; exports.RadioBoxes = _chunkYLJC74CQcjs.RadioBoxes_default; exports.RadioGroup = _chunkCUDJVXZXcjs.RadioGroup_default; exports.RadioTabs = _chunkY33HTDL6cjs.RadioTabs_default; exports.Select = _chunkRKZQKPRJcjs.Select_default; exports.SubmitButton = _chunkQ5KXDJU7cjs.SubmitButton_default; exports.Switch = _chunkEHTJ2BYBcjs.Switch_default; exports.TextArea = _chunkJWYMBKE6cjs.TextArea_default; exports.checkFieldIsRequired = _chunkF4VYFBYCcjs.checkFieldIsRequired; exports.fromNullishString = _chunkCESGUF6Fcjs.fromNullishString; exports.toFormFormat = _chunkCESGUF6Fcjs.toFormFormat; exports.toNullishString = _chunkCESGUF6Fcjs.toNullishString; exports.toValidationFormat = _chunkCESGUF6Fcjs.toValidationFormat; exports.useClientValidation = _chunkF4VYFBYCcjs.useClientValidation; exports.useController = _chunkF4VYFBYCcjs.useController; exports.useFieldArray = _chunkF4VYFBYCcjs.useFieldArray; exports.useFormContext = _chunkF4VYFBYCcjs.useFormContext; exports.useInput = _chunkF4VYFBYCcjs.useInput;
+exports.CheckboxGroup = _chunkNVSZYURKcjs.CheckboxGroup_default; exports.FieldArray = _chunk3ISETOB3cjs.FieldArray_default; exports.FieldCopyTestIdButton = _chunkPA2DQCBYcjs.FieldCopyTestIdButton_default; exports.FieldValidationError = _chunkGNYQC5IJcjs.FieldValidationError_default; exports.Form = _chunkIYR5A3CVcjs.Form_default; exports.Grid = _chunk6GN255GPcjs.Grid_default; exports.Input = _chunkBDJHUA55cjs.Input_default; exports.RadioBoxes = _chunkYLJC74CQcjs.RadioBoxes_default; exports.RadioGroup = _chunkCUDJVXZXcjs.RadioGroup_default; exports.RadioTabs = _chunkY33HTDL6cjs.RadioTabs_default; exports.Select = _chunkRKZQKPRJcjs.Select_default; exports.SubmitButton = _chunkQ5KXDJU7cjs.SubmitButton_default; exports.Switch = _chunkEHTJ2BYBcjs.Switch_default; exports.TextArea = _chunkJWYMBKE6cjs.TextArea_default; exports.checkFieldIsRequired = _chunkF4VYFBYCcjs.checkFieldIsRequired; exports.fromNullishString = _chunkCESGUF6Fcjs.fromNullishString; exports.toFormFormat = _chunkCESGUF6Fcjs.toFormFormat; exports.toNullishString = _chunkCESGUF6Fcjs.toNullishString; exports.toValidationFormat = _chunkCESGUF6Fcjs.toValidationFormat; exports.useClientValidation = _chunkF4VYFBYCcjs.useClientValidation; exports.useController = _chunkF4VYFBYCcjs.useController; exports.useFieldArray = _chunkF4VYFBYCcjs.useFieldArray; exports.useFormContext = _chunkF4VYFBYCcjs.useFormContext; exports.useInput = _chunkF4VYFBYCcjs.useInput;
 //# sourceMappingURL=index.cjs.map

package/dist/index.d.cts

@@ -1,4 +1,4 @@
-export { C as CheckboxGroup, b as CheckboxGroupOption, a as CheckboxGroupProps } from './CheckboxGroup-Dh0YW4KV.cjs';
+export { C as CheckboxGroup, b as CheckboxGroupOption, a as CheckboxGroupProps } from './CheckboxGroup-B_1mu8Xo.cjs';
 export { F as FieldArray, a as FieldArrayChildrenRenderFn, b as FieldArrayFeatures, c as FieldArrayProps } from './FieldArray-hqxjr18x.cjs';
 export { F as Form, a as FormProps } from './Form-D0grgL6G.cjs';
 export { G as Grid, a as GridProps } from './Grid-DF3L9NF3.cjs';
@@ -9,16 +9,16 @@ export { useInput } from '@heroui/input';
 export { I as Input, a as InputProps } from './Input-B_wjhY9e.cjs';
 export { F as FieldCopyTestIdButton, a as FieldCopyTestIdButtonProps } from './FieldCopyTestIdButton-_TDlmw0L.cjs';
 export { F as FieldValidationError, a as FieldValidationErrorProps } from './FieldValidationError-CU_xw0BL.cjs';
-export { R as RadioBoxes, a as RadioBoxesProps } from './RadioBoxes-C61IRDCU.cjs';
-export { R as RadioGroup, a as RadioGroupProps } from './RadioGroup-C7I27oav.cjs';
+export { R as RadioBoxes, a as RadioBoxesProps } from './RadioBoxes-BmJBBZVd.cjs';
+export { R as RadioGroup, a as RadioGroupProps } from './RadioGroup-BJijfixt.cjs';
 export { R as RadioTabs, a as RadioTabsProps } from './RadioTabs-CT8PT7ky.cjs';
 export { S as Select, a as SelectProps } from './Select-JRwrSDew.cjs';
 export { S as SubmitButton, a as SubmitButtonProps } from './SubmitButton-C81VCkmx.cjs';
 export { S as Switch, a as SwitchProps } from './Switch-CLs964dL.cjs';
 export { T as TextArea, a as TextAreaProps } from './TextArea-DNpInDsW.cjs';
 import 'react/jsx-runtime';
-import 'tailwind-variants/dist/config.js';
 import 'tailwind-variants';
+import 'tailwind-variants/dist/config.js';
 import '@fuf-stack/pixel-utils';
 import 'react';
 import '@fuf-stack/veto';

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { C as CheckboxGroup, b as CheckboxGroupOption, a as CheckboxGroupProps } from './CheckboxGroup-Dh0YW4KV.js';
+export { C as CheckboxGroup, b as CheckboxGroupOption, a as CheckboxGroupProps } from './CheckboxGroup-B_1mu8Xo.js';
 export { F as FieldArray, a as FieldArrayChildrenRenderFn, b as FieldArrayFeatures, c as FieldArrayProps } from './FieldArray-hqxjr18x.js';
 export { F as Form, a as FormProps } from './Form-DX5NTR-H.js';
 export { G as Grid, a as GridProps } from './Grid-DF3L9NF3.js';
@@ -9,16 +9,16 @@ export { useInput } from '@heroui/input';
 export { I as Input, a as InputProps } from './Input-B_wjhY9e.js';
 export { F as FieldCopyTestIdButton, a as FieldCopyTestIdButtonProps } from './FieldCopyTestIdButton-_TDlmw0L.js';
 export { F as FieldValidationError, a as FieldValidationErrorProps } from './FieldValidationError-CU_xw0BL.js';
-export { R as RadioBoxes, a as RadioBoxesProps } from './RadioBoxes-C61IRDCU.js';
-export { R as RadioGroup, a as RadioGroupProps } from './RadioGroup-C7I27oav.js';
+export { R as RadioBoxes, a as RadioBoxesProps } from './RadioBoxes-BmJBBZVd.js';
+export { R as RadioGroup, a as RadioGroupProps } from './RadioGroup-BJijfixt.js';
 export { R as RadioTabs, a as RadioTabsProps } from './RadioTabs-CT8PT7ky.js';
 export { S as Select, a as SelectProps } from './Select-JRwrSDew.js';
 export { S as SubmitButton, a as SubmitButtonProps } from './SubmitButton-C81VCkmx.js';
 export { S as Switch, a as SwitchProps } from './Switch-CLs964dL.js';
 export { T as TextArea, a as TextAreaProps } from './TextArea-DNpInDsW.js';
 import 'react/jsx-runtime';
-import 'tailwind-variants/dist/config.js';
 import 'tailwind-variants';
+import 'tailwind-variants/dist/config.js';
 import '@fuf-stack/pixel-utils';
 import 'react';
 import '@fuf-stack/veto';

package/dist/index.js

@@ -15,7 +15,7 @@ import {
 } from "./chunk-43R3EVIW.js";
 import {
   CheckboxGroup_default
-} from "./chunk-BC6ZP7TF.js";
+} from "./chunk-OLPDYX6B.js";
 import {
   FieldArray_default
 } from "./chunk-LX775YU7.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fuf-stack/uniform",
-  "version": "0.19.3",
+  "version": "0.20.0",
   "description": "fuf react form library",
   "author": "Hannes Tiede",
   "homepage": "https://github.com/fuf-stack/pixels#readme",
@@ -133,8 +133,8 @@
     "react-icons": "5.5.0",
     "react-hook-form": "7.55.0",
     "react-select": "5.10.1",
-    "@fuf-stack/pixels": "0.43.8",
     "@fuf-stack/pixel-utils": "0.5.4",
+    "@fuf-stack/pixels": "0.43.8",
     "@fuf-stack/veto": "0.12.0"
   },
   "devDependencies": {
@@ -143,10 +143,10 @@
     "@types/react-dom": "19.0.4",
     "react": "19.0.0",
     "react-dom": "19.0.0",
+    "@repo/storybook-config": "0.0.1",
     "@repo/tailwind-config": "0.0.1",
     "@repo/vite-config": "0.0.1",
-    "@repo/tsup-config": "0.0.1",
-    "@repo/storybook-config": "0.0.1"
+    "@repo/tsup-config": "0.0.1"
   },
   "scripts": {
     "build": "tsup --config node_modules/@repo/tsup-config/config.ts",

package/dist/CheckboxGroup-Dh0YW4KV.d.cts

@@ -1,132 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as tailwind_variants_dist_config_js from 'tailwind-variants/dist/config.js';
-import * as tailwind_variants from 'tailwind-variants';
-import { TVProps, TVClassName } from '@fuf-stack/pixel-utils';
-
-declare const checkboxGroupVariants: tailwind_variants.TVReturnType<{
-    [key: string]: {
-        [key: string]: tailwind_variants.ClassValue | {
-            base?: tailwind_variants.ClassValue;
-            label?: tailwind_variants.ClassValue;
-            errorMessage?: tailwind_variants.ClassValue;
-            itemBase?: tailwind_variants.ClassValue;
-            itemIcon?: tailwind_variants.ClassValue;
-            itemLabel?: tailwind_variants.ClassValue;
-            itemWrapper?: tailwind_variants.ClassValue;
-            wrapper?: tailwind_variants.ClassValue;
-        };
-    };
-} | {
-    [x: string]: {
-        [x: string]: tailwind_variants.ClassValue | {
-            base?: tailwind_variants.ClassValue;
-            label?: tailwind_variants.ClassValue;
-            errorMessage?: tailwind_variants.ClassValue;
-            itemBase?: tailwind_variants.ClassValue;
-            itemIcon?: tailwind_variants.ClassValue;
-            itemLabel?: tailwind_variants.ClassValue;
-            itemWrapper?: tailwind_variants.ClassValue;
-            wrapper?: tailwind_variants.ClassValue;
-        };
-    };
-} | {}, {
-    base: string;
-    errorMessage: string;
-    itemBase: string;
-    itemIcon: string;
-    itemLabel: string;
-    itemWrapper: string;
-    label: string;
-    wrapper: string;
-}, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
-    [key: string]: {
-        [key: string]: tailwind_variants.ClassValue | {
-            base?: tailwind_variants.ClassValue;
-            label?: tailwind_variants.ClassValue;
-            errorMessage?: tailwind_variants.ClassValue;
-            itemBase?: tailwind_variants.ClassValue;
-            itemIcon?: tailwind_variants.ClassValue;
-            itemLabel?: tailwind_variants.ClassValue;
-            itemWrapper?: tailwind_variants.ClassValue;
-            wrapper?: tailwind_variants.ClassValue;
-        };
-    };
-} | {}>, {
-    [key: string]: {
-        [key: string]: tailwind_variants.ClassValue | {
-            base?: tailwind_variants.ClassValue;
-            label?: tailwind_variants.ClassValue;
-            errorMessage?: tailwind_variants.ClassValue;
-            itemBase?: tailwind_variants.ClassValue;
-            itemIcon?: tailwind_variants.ClassValue;
-            itemLabel?: tailwind_variants.ClassValue;
-            itemWrapper?: tailwind_variants.ClassValue;
-            wrapper?: tailwind_variants.ClassValue;
-        };
-    };
-} | {}, {
-    base: string;
-    errorMessage: string;
-    itemBase: string;
-    itemIcon: string;
-    itemLabel: string;
-    itemWrapper: string;
-    label: string;
-    wrapper: string;
-}, tailwind_variants.TVReturnType<unknown, {
-    base: string;
-    errorMessage: string;
-    itemBase: string;
-    itemIcon: string;
-    itemLabel: string;
-    itemWrapper: string;
-    label: string;
-    wrapper: string;
-}, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
-    [key: string]: {
-        [key: string]: tailwind_variants.ClassValue | {
-            base?: tailwind_variants.ClassValue;
-            label?: tailwind_variants.ClassValue;
-            errorMessage?: tailwind_variants.ClassValue;
-            itemBase?: tailwind_variants.ClassValue;
-            itemIcon?: tailwind_variants.ClassValue;
-            itemLabel?: tailwind_variants.ClassValue;
-            itemWrapper?: tailwind_variants.ClassValue;
-            wrapper?: tailwind_variants.ClassValue;
-        };
-    };
-} | {}>, unknown, unknown, undefined>>;
-type VariantProps = TVProps<typeof checkboxGroupVariants>;
-type ClassName = TVClassName<typeof checkboxGroupVariants>;
-type CheckboxGroupOption = {
-    /** option label */
-    label?: React.ReactNode;
-    /** option value */
-    value: string;
-    /** disables the option */
-    disabled?: boolean;
-    /** HTML data-testid attribute of the option */
-    testId?: string;
-};
-interface CheckboxGroupProps extends VariantProps {
-    /** CSS class name. ClassName: string | { buttons?: string | { base?: string; active?: string }; base?: string;} */
-    className?: ClassName;
-    /** determines orientation of the boxes. */
-    inline?: boolean;
-    /** label displayed above the Checkboxes */
-    label?: React.ReactNode;
-    /** Name the Field is registered on the form. */
-    name: string;
-    /** Checkboxes that should be displayed. */
-    options: CheckboxGroupOption[];
-    /** sets all buttons disabled */
-    disabled?: boolean;
-    /** id for internal testing. */
-    testId?: string;
-}
-/**
- * CheckboxGroup component based on [HeroUI CheckboxGroup](https://www.heroui.com//docs/components/checkbox-group)
- */
-declare const CheckboxGroup: ({ className, inline, label, options, disabled, name, testId: _testId, }: CheckboxGroupProps) => react_jsx_runtime.JSX.Element;
-
-export { CheckboxGroup as C, type CheckboxGroupProps as a, type CheckboxGroupOption as b };