@fuf-stack/uniform 1.4.2 → 1.5.0

package/dist/{chunk-M7VM7XBE.js → chunk-OCYJFIPV.js}

@@ -1,14 +1,14 @@
+import {
+  useController,
+  useFormContext,
+  useInput
+} from "./chunk-CJD3DW4J.js";
 import {
   FieldCopyTestIdButton_default
 } from "./chunk-NTDKZW4E.js";
 import {
   FieldValidationError_default
-} from "./chunk-CQWA2DFV.js";
-import {
-  useController,
-  useFormContext,
-  useInput
-} from "./chunk-IYDCKENI.js";
+} from "./chunk-ELYGQTXB.js";
 import {
   __spreadProps,
   __spreadValues
@@ -56,9 +56,9 @@ var Switch = ({
     labelPlacement: "outside",
     placeholder: " "
   });
+  const showTestIdCopyButton = debugMode === "debug-testids";
   const variants = switchVariants();
   const classNames = variantsToClassNames(variants, className, "outerWrapper");
-  const showTestIdCopyButton = debugMode === "debug-testids";
   return /* @__PURE__ */ jsxs("div", { className: classNames.outerWrapper, children: [
     /* @__PURE__ */ jsxs(
       HeroSwitch,
@@ -98,4 +98,4 @@ export {
   Switch_default,
   Switch_default2
 };
-//# sourceMappingURL=chunk-M7VM7XBE.js.map
+//# sourceMappingURL=chunk-OCYJFIPV.js.map

package/dist/chunk-OCYJFIPV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Switch/Switch.tsx","../src/Switch/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { SwitchProps as HeroSwitchProps } from '@heroui/switch';\nimport type { ReactNode } from 'react';\nimport type { FieldValues } from 'react-hook-form';\n\nimport { Switch as HeroSwitch } from '@heroui/switch';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { useController, useFormContext, useInput } from '../hooks';\nimport { FieldCopyTestIdButton } from '../partials/FieldCopyTestIdButton';\nimport { FieldValidationError } from '../partials/FieldValidationError';\n\nexport const switchVariants = tv({\n  slots: {\n    base: '',\n    endContent: '',\n    errorMessage: 'mt-1 ml-1',\n    // see HeroUI styles for group-data condition,\n    // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/core/theme/src/components/select.ts\n    label:\n      'text-foreground group-data-[invalid=true]:!text-danger group-data-[required=true]:after:text-danger text-sm subpixel-antialiased group-data-[required=true]:after:ml-0.5 group-data-[required=true]:after:content-[\"*\"]',\n    outerWrapper: 'place-content-center',\n    startContent: '',\n    thumb: '',\n    thumbIcon: '',\n    wrapper: '',\n  },\n});\n\ntype VariantProps = TVProps<typeof switchVariants>;\ntype ClassName = TVClassName<typeof switchVariants>;\n\nexport interface SwitchProps extends VariantProps {\n  /** CSS class name */\n  className?: ClassName;\n  /** whether the select should be disabled */\n  disabled?: boolean;\n  /** Icon to be displayed at the end of the switch (when enabled) */\n  endContent?: ReactNode;\n  /** component displayed next to the switch */\n  label?: ReactNode;\n  /** name the field is registered under */\n  name: string;\n  /* Size of the switch */\n  size?: 'sm' | 'md' | 'lg';\n  /** Icon to be displayed at the start of the switch (when disabled) */\n  startContent?: ReactNode;\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n  /** Icon to be displayed inside the thumb */\n  thumbIcon?: HeroSwitchProps['thumbIcon'];\n}\n\n/**\n *  Switch component based on [HeroUI Switch](https://www.heroui.com//docs/components/switch)\n */\nconst Switch = ({\n  className = undefined,\n  disabled = false,\n  endContent = undefined,\n  label: _label = undefined,\n  name,\n  size = undefined,\n  startContent = undefined,\n  testId: _testId = undefined,\n  thumbIcon = undefined,\n}: SwitchProps) => {\n  const { control, debugMode, getFieldState } = useFormContext();\n  const { error, required, testId, invalid } = getFieldState(name, _testId);\n\n  const { field } = useController<FieldValues>({ name, control, disabled });\n  const { disabled: isDisabled, value, ref, onBlur, onChange } = field;\n\n  const { label, getInputProps, getErrorMessageProps } = useInput({\n    errorMessage: JSON.stringify(error),\n    isInvalid: invalid,\n    isRequired: required,\n    label: _label,\n    labelPlacement: 'outside',\n    placeholder: ' ',\n  });\n\n  const showTestIdCopyButton = debugMode === 'debug-testids';\n\n  // classNames from slots\n  const variants = switchVariants();\n  const classNames = variantsToClassNames(variants, className, 'outerWrapper');\n\n  return (\n    <div className={classNames.outerWrapper}>\n      <HeroSwitch\n        ref={ref}\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        aria-describedby={getInputProps()['aria-describedby']}\n        classNames={classNames}\n        data-invalid={invalid}\n        data-required={required}\n        data-testid={testId}\n        endContent={endContent}\n        isDisabled={isDisabled}\n        isSelected={!!value}\n        name={name}\n        onBlur={onBlur}\n        onValueChange={onChange}\n        required={required}\n        size={size}\n        startContent={startContent}\n        thumbIcon={thumbIcon}\n        value={value}\n      >\n        {label}\n        {showTestIdCopyButton ? (\n          <FieldCopyTestIdButton testId={testId} />\n        ) : null}\n      </HeroSwitch>\n      {error ? (\n        <div className={classNames.errorMessage}>\n          <div {...getErrorMessageProps()}>\n            <FieldValidationError error={error} testId={testId} />\n          </div>\n        </div>\n      ) : null}\n    </div>\n  );\n};\n\nexport default Switch;\n","import Switch from './Switch';\n\nexport type { SwitchProps } from './Switch';\n\nexport { Switch };\n\nexport default Switch;\n"],"mappings":";;;;;;;;;;;;;;;;;AAKA,SAAS,UAAU,kBAAkB;AAErC,SAAS,IAAI,4BAA4B;AAoFnC,SAuBI,KAvBJ;AA9EC,IAAM,iBAAiB,GAAG;AAAA,EAC/B,OAAO;AAAA,IACL,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,cAAc;AAAA;AAAA;AAAA,IAGd,OACE;AAAA,IACF,cAAc;AAAA,IACd,cAAc;AAAA,IACd,OAAO;AAAA,IACP,WAAW;AAAA,IACX,SAAS;AAAA,EACX;AACF,CAAC;AA6BD,IAAM,SAAS,CAAC;AAAA,EACd,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,aAAa;AAAA,EACb,OAAO,SAAS;AAAA,EAChB;AAAA,EACA,OAAO;AAAA,EACP,eAAe;AAAA,EACf,QAAQ,UAAU;AAAA,EAClB,YAAY;AACd,MAAmB;AACjB,QAAM,EAAE,SAAS,WAAW,cAAc,IAAI,eAAe;AAC7D,QAAM,EAAE,OAAO,UAAU,QAAQ,QAAQ,IAAI,cAAc,MAAM,OAAO;AAExE,QAAM,EAAE,MAAM,IAAI,cAA2B,EAAE,MAAM,SAAS,SAAS,CAAC;AACxE,QAAM,EAAE,UAAU,YAAY,OAAO,KAAK,QAAQ,SAAS,IAAI;AAE/D,QAAM,EAAE,OAAO,eAAe,qBAAqB,IAAI,SAAS;AAAA,IAC9D,cAAc,KAAK,UAAU,KAAK;AAAA,IAClC,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,gBAAgB;AAAA,IAChB,aAAa;AAAA,EACf,CAAC;AAED,QAAM,uBAAuB,cAAc;AAG3C,QAAM,WAAW,eAAe;AAChC,QAAM,aAAa,qBAAqB,UAAU,WAAW,cAAc;AAE3E,SACE,qBAAC,SAAI,WAAW,WAAW,cACzB;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QAGA,oBAAkB,cAAc,EAAE,kBAAkB;AAAA,QACpD;AAAA,QACA,gBAAc;AAAA,QACd,iBAAe;AAAA,QACf,eAAa;AAAA,QACb;AAAA,QACA;AAAA,QACA,YAAY,CAAC,CAAC;AAAA,QACd;AAAA,QACA;AAAA,QACA,eAAe;AAAA,QACf;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QAEC;AAAA;AAAA,UACA,uBACC,oBAAC,iCAAsB,QAAgB,IACrC;AAAA;AAAA;AAAA,IACN;AAAA,IACC,QACC,oBAAC,SAAI,WAAW,WAAW,cACzB,8BAAC,wCAAQ,qBAAqB,IAA7B,EACC,8BAAC,gCAAqB,OAAc,QAAgB,IACtD,GACF,IACE;AAAA,KACN;AAEJ;AAEA,IAAO,iBAAQ;;;AC1Hf,IAAOA,kBAAQ;","names":["Switch_default"]}

package/dist/{chunk-YEKHVKS3.cjs → chunk-S36CKKDV.cjs}

@@ -1,13 +1,10 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _chunkOE5BOGGXcjs = require('./chunk-OE5BOGGX.cjs');
+var _chunkC5GIWGQRcjs = require('./chunk-C5GIWGQR.cjs');
 
 
-var _chunkY3AB4GV6cjs = require('./chunk-Y3AB4GV6.cjs');
 
-
-
-var _chunk2GYFDVXXcjs = require('./chunk-2GYFDVXX.cjs');
+var _chunk555JRYCScjs = require('./chunk-555JRYCS.cjs');
 
 // src/RadioTabs/RadioTabs.tsx
 var _radio = require('@heroui/radio');
@@ -16,10 +13,10 @@ var _Tabs = require('@fuf-stack/pixels/Tabs'); var _Tabs2 = _interopRequireDefau
 var _jsxruntime = require('react/jsx-runtime');
 var radioTabsVariants = _pixelutils.tv.call(void 0, {
   slots: {
-    base: "group",
+    base: "group gap-0",
     // Needs group for group-data condition
     cursor: "",
-    label: "text-foreground group-data-[invalid=true]:text-danger text-sm subpixel-antialiased",
+    label: "text-foreground group-data-[invalid=true]:text-danger mb-2 inline-flex text-sm subpixel-antialiased",
     tab: "",
     tabBase: "",
     tabContent: "",
@@ -48,36 +45,42 @@ var radioTabsVariants = _pixelutils.tv.call(void 0, {
     }
   }
 });
-var RadioTabs = ({
-  className = void 0,
-  disabled = false,
-  fullWidth = false,
-  inline = false,
-  label = void 0,
-  name,
-  options,
-  testId: _testId = void 0,
-  variant = void 0
-}) => {
-  const { control, debugMode, getFieldState } = _chunk2GYFDVXXcjs.useFormContext.call(void 0, );
-  const { error, invalid, required, testId } = getFieldState(name, _testId);
-  const { field } = _chunk2GYFDVXXcjs.useController.call(void 0, { control, disabled, name });
-  const { disabled: isDisabled, onBlur, onChange, ref, value } = field;
-  const showTestIdCopyButton = debugMode === "debug-testids";
-  const showLabel = label != null ? label : showTestIdCopyButton;
-  const hasContent = options.some((option) => {
-    return option.content;
-  });
-  const variants = radioTabsVariants({ hasContent, fullWidth });
-  const classNames = _pixelutils.variantsToClassNames.call(void 0, variants, className, "base");
+var RadioTabs = (_a) => {
+  var _b = _a, {
+    className = void 0,
+    fullWidth = false,
+    inline = false,
+    name,
+    options,
+    variant = void 0
+  } = _b, uniformFieldProps = _chunk555JRYCScjs.__objRest.call(void 0, _b, [
+    "className",
+    "fullWidth",
+    "inline",
+    "name",
+    "options",
+    "variant"
+  ]);
+  const {
+    disabled,
+    errorMessage,
+    field: { onBlur, onChange, ref, value },
+    invalid,
+    label,
+    required,
+    testId
+  } = _chunkC5GIWGQRcjs.useUniformField.call(void 0, _chunk555JRYCScjs.__spreadValues.call(void 0, {
+    name,
+    showInvalidWhen: "immediate"
+  }, uniformFieldProps));
   const tabOptions = options.map((option) => {
-    var _a, _b;
+    var _a2, _b2;
     return {
       content: option == null ? void 0 : option.content,
       disabled: option == null ? void 0 : option.disabled,
       key: option.value,
-      label: (_a = option == null ? void 0 : option.label) != null ? _a : option == null ? void 0 : option.value,
-      testId: _pixelutils.slugify.call(void 0, `option_${(_b = option == null ? void 0 : option.testId) != null ? _b : option == null ? void 0 : option.value}`, {
+      label: (_a2 = option == null ? void 0 : option.label) != null ? _a2 : option == null ? void 0 : option.value,
+      testId: _pixelutils.slugify.call(void 0, `option_${(_b2 = option == null ? void 0 : option.testId) != null ? _b2 : option == null ? void 0 : option.value}`, {
         replaceDots: true
       })
     };
@@ -85,6 +88,11 @@ var RadioTabs = ({
   const disabledAllKeys = tabOptions == null ? void 0 : tabOptions.map((option) => {
     return option.key;
   });
+  const hasContent = options.some((option) => {
+    return option.content;
+  });
+  const variants = radioTabsVariants({ hasContent, fullWidth });
+  const classNames = _pixelutils.variantsToClassNames.call(void 0, variants, className, "base");
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     _radio.RadioGroup,
     {
@@ -92,9 +100,11 @@ var RadioTabs = ({
       "data-invalid": invalid,
       "data-required": required,
       "data-testid": testId,
-      isDisabled,
+      errorMessage,
+      isDisabled: disabled,
       isInvalid: invalid,
       isRequired: required,
+      label: label ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "legend", { children: label }) : null,
       name,
       onBlur,
       orientation: inline ? "horizontal" : "vertical",
@@ -103,14 +113,6 @@ var RadioTabs = ({
         label: classNames.label,
         wrapper: classNames.wrapper
       },
-      errorMessage: error ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkY3AB4GV6cjs.FieldValidationError_default, { error, testId }) : void 0,
-      label: showLabel ? (
-        // eslint-disable-next-line jsx-a11y/label-has-associated-control
-        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "label", { children: [
-          label,
-          showTestIdCopyButton ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkOE5BOGGXcjs.FieldCopyTestIdButton_default, { testId }) : null
-        ] })
-      ) : void 0,
       children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         _Tabs2.default,
         {
@@ -143,4 +145,4 @@ var RadioTabs_default2 = RadioTabs_default;
 
 
 exports.RadioTabs_default = RadioTabs_default; exports.RadioTabs_default2 = RadioTabs_default2;
-//# sourceMappingURL=chunk-YEKHVKS3.cjs.map
+//# sourceMappingURL=chunk-S36CKKDV.cjs.map

package/dist/chunk-S36CKKDV.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-S36CKKDV.cjs","../src/RadioTabs/RadioTabs.tsx","../src/RadioTabs/index.ts"],"names":["_a","_b"],"mappings":"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","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-S36CKKDV.cjs","sourcesContent":[null,"import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { TabsProps } from '@fuf-stack/pixels';\nimport type { TabProps } from '@fuf-stack/pixels/Tabs';\nimport type { ReactElement, ReactNode } from 'react';\n\nimport { RadioGroup as HeroRadioGroup } from '@heroui/radio';\n\nimport { slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\nimport Tabs from '@fuf-stack/pixels/Tabs';\n\nimport { useUniformField } from '../hooks';\n\nexport const radioTabsVariants = tv({\n  slots: {\n    base: 'group gap-0', // Needs group for group-data condition\n    cursor: '',\n    label:\n      'text-foreground group-data-[invalid=true]:text-danger mb-2 inline-flex text-sm subpixel-antialiased',\n    tab: '',\n    tabBase: '',\n    tabContent: '',\n    tabList: '',\n    tabPanel: 'p-3',\n    tabWrapper: '',\n    wrapper: '',\n  },\n  variants: {\n    hasContent: {\n      true: {\n        base: '',\n        tabBase: 'p-1 pb-0',\n        tabWrapper: [\n          // border style\n          'border-divider rounded-medium border',\n          // full width\n          'w-full',\n        ],\n      },\n    },\n    fullWidth: {\n      true: {\n        tabWrapper: 'w-full',\n      },\n    },\n  },\n});\n\ntype VariantProps = TVProps<typeof radioTabsVariants>;\ntype ClassName = TVClassName<typeof radioTabsVariants>;\n\nexport interface RadioTabsOption {\n  /** Optional content inside of the tab */\n  content?: ReactNode;\n  /** disables the option */\n  disabled?: boolean;\n  /** option label */\n  label?: React.ReactNode;\n  /** option icon */\n  icon?: ReactNode;\n  /** HTML data-testid attribute of the option */\n  testId?: string;\n  /** option value */\n  value: string;\n}\n\nexport interface RadioTabsProps extends Omit<VariantProps, 'hasContent'> {\n  /** CSS class name */\n  className?: ClassName;\n  /** Determines if the Buttons are disabled or not. */\n  disabled?: boolean;\n  /** Whether tabs should take up full container width */\n  fullWidth?: boolean;\n  /** determines orientation of the Buttons. */\n  inline?: boolean;\n  /** Label displayed next to the RadioButton. */\n  label?: ReactNode;\n  /** Name the RadioButtons are registered at in HTML forms (react-hook-form). */\n  name: string;\n  /** Radio button configuration. */\n  options: RadioTabsOption[];\n  /** Id to grab element in internal tests. */\n  testId?: string;\n  /** How the RadioTabs should look like. */\n  variant?: TabsProps['variant'];\n}\n\n/**\n * RadioTabs component based on [HeroUI RadioGroup](https://www.heroui.com//docs/components/radio-group)\n * and [HeroUI Tabs](https://www.heroui.com//docs/components/tabs)\n */\nconst RadioTabs = ({\n  className = undefined,\n  fullWidth = false,\n  inline = false,\n  name,\n  options,\n  variant = undefined,\n  ...uniformFieldProps\n}: RadioTabsProps): ReactElement => {\n  const {\n    disabled,\n    errorMessage,\n    field: { onBlur, onChange, ref, value },\n    invalid,\n    label,\n    required,\n    testId,\n  } = useUniformField({\n    name,\n    showInvalidWhen: 'immediate',\n    ...uniformFieldProps,\n  });\n\n  const tabOptions = options.map<TabProps>((option) => {\n    return {\n      content: option?.content,\n      disabled: option?.disabled,\n      key: option.value,\n      label: option?.label ?? option?.value,\n      testId: slugify(`option_${option?.testId ?? option?.value}`, {\n        replaceDots: true,\n      }),\n    };\n  });\n\n  const disabledAllKeys: string[] | undefined = tabOptions?.map((option) => {\n    return option.key as string;\n  });\n\n  // check if any option has content\n  // eslint-disable-next-line @typescript-eslint/no-misused-promises, @typescript-eslint/promise-function-async\n  const hasContent = options.some((option) => {\n    return option.content;\n  });\n\n  // classNames from slots\n  const variants = radioTabsVariants({ hasContent, fullWidth });\n  const classNames = variantsToClassNames(variants, className, 'base');\n\n  return (\n    <HeroRadioGroup\n      ref={ref}\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      classNames={{\n        base: classNames.base,\n        label: classNames.label,\n        wrapper: classNames.wrapper,\n      }}\n    >\n      <Tabs\n        disabledKeys={disabled ? disabledAllKeys : undefined}\n        onSelectionChange={onChange}\n        // make sure component is controlled\n        selectedKey={value ?? ''}\n        tabs={tabOptions}\n        testId={testId}\n        variant={variant}\n        className={{\n          base: classNames.tabBase,\n          cursor: classNames.cursor,\n          panel: classNames.tabPanel,\n          tab: classNames.tab,\n          tabContent: classNames.tabContent,\n          tabList: classNames.tabList,\n          tabWrapper: classNames.tabWrapper,\n        }}\n      />\n    </HeroRadioGroup>\n  );\n};\n\nexport default RadioTabs;\n","import RadioTabs from './RadioTabs';\n\nexport type { RadioTabsProps } from './RadioTabs';\n\nexport { RadioTabs };\n\nexport default RadioTabs;\n"]}

package/dist/chunk-S7K35LVS.js

@@ -0,0 +1,117 @@
+import {
+  useUniformField
+} from "./chunk-CJD3DW4J.js";
+import {
+  __objRest,
+  __spreadValues
+} from "./chunk-K2V4ULA2.js";
+
+// src/Radios/Radios.tsx
+import {
+  Radio as HeroRadio,
+  RadioGroup as HeroRadioGroup
+} from "@heroui/radio";
+import { slugify, tv, variantsToClassNames } from "@fuf-stack/pixel-utils";
+import { jsx } from "react/jsx-runtime";
+var radiosVariants = tv({
+  slots: {
+    // Needs group for group-data condition
+    base: "group gap-0",
+    itemBase: "",
+    itemControl: "bg-focus group-data-[invalid=true]:bg-danger",
+    itemDescription: "",
+    itemLabel: "text-sm",
+    itemLabelWrapper: "",
+    itemWrapper: 'group-data-[invalid=true]:border-danger! [&:not(group-data-[invalid="true"]):not(group-data-[selected="false"])]:border-focus',
+    // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/core/theme/src/components/select.ts
+    label: "text-foreground group-data-[invalid=true]:text-danger mb-2 inline-flex text-sm subpixel-antialiased",
+    wrapper: ""
+  }
+});
+var Radios = (_a) => {
+  var _b = _a, {
+    className = void 0,
+    inline = false,
+    name,
+    options
+  } = _b, uniformFieldProps = __objRest(_b, [
+    "className",
+    "inline",
+    "name",
+    "options"
+  ]);
+  const {
+    disabled,
+    errorMessage,
+    field: { onBlur, onChange, ref },
+    invalid,
+    label,
+    required,
+    defaultValue,
+    testId
+  } = useUniformField(__spreadValues({
+    name,
+    showInvalidWhen: "immediate"
+  }, uniformFieldProps));
+  const variants = radiosVariants();
+  const classNames = variantsToClassNames(variants, className, "base");
+  const itemClassNames = {
+    base: classNames.itemBase,
+    control: classNames.itemControl,
+    description: classNames.itemDescription,
+    label: classNames.itemLabel,
+    labelWrapper: classNames.itemLabelWrapper,
+    wrapper: classNames.itemWrapper
+  };
+  return /* @__PURE__ */ jsx(
+    HeroRadioGroup,
+    {
+      ref,
+      classNames,
+      "data-invalid": invalid,
+      "data-required": required,
+      "data-testid": testId,
+      defaultValue,
+      errorMessage,
+      isDisabled: disabled,
+      isInvalid: invalid,
+      isRequired: required,
+      label: label ? /* @__PURE__ */ jsx("legend", { children: label }) : null,
+      name,
+      onBlur,
+      orientation: inline ? "horizontal" : "vertical",
+      children: options.map((option) => {
+        var _a2, _b2;
+        if ("value" in option) {
+          const optionTestId = slugify(
+            `${testId}_option_${(_a2 = option.testId) != null ? _a2 : option.value}`,
+            { replaceDots: true }
+          );
+          return /* @__PURE__ */ jsx(
+            HeroRadio,
+            {
+              classNames: itemClassNames,
+              "data-testid": optionTestId,
+              isDisabled: !!disabled || option.disabled,
+              onChange,
+              value: option.value,
+              children: (_b2 = option.label) != null ? _b2 : option.value
+            },
+            option.value
+          );
+        }
+        return null;
+      })
+    }
+  );
+};
+var Radios_default = Radios;
+
+// src/Radios/index.ts
+var Radios_default2 = Radios_default;
+
+export {
+  Radios_default,
+  Radios_default2
+};
+//# sourceMappingURL=chunk-S7K35LVS.js.map

package/dist/chunk-S7K35LVS.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Radios/Radios.tsx","../src/Radios/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ReactElement, ReactNode } from 'react';\n\nimport {\n  Radio as HeroRadio,\n  RadioGroup as HeroRadioGroup,\n} from '@heroui/radio';\n\nimport { slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { useUniformField } from '../hooks';\n\nexport const radiosVariants = tv({\n  slots: {\n    // Needs group for group-data condition\n    base: 'group gap-0',\n    itemBase: '',\n    itemControl: 'bg-focus group-data-[invalid=true]:bg-danger',\n    itemDescription: '',\n    itemLabel: 'text-sm',\n    itemLabelWrapper: '',\n    itemWrapper:\n      'group-data-[invalid=true]:border-danger! [&:not(group-data-[invalid=\"true\"]):not(group-data-[selected=\"false\"])]:border-focus',\n    // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/core/theme/src/components/select.ts\n    label:\n      'text-foreground group-data-[invalid=true]:text-danger mb-2 inline-flex text-sm subpixel-antialiased',\n    wrapper: '',\n  },\n});\n\ntype VariantProps = TVProps<typeof radiosVariants>;\ntype ClassName = TVClassName<typeof radiosVariants>;\n\nexport interface RadioOption {\n  /** disables the option */\n  disabled?: boolean;\n  /** option label */\n  label?: React.ReactNode;\n  /** option icon */\n  icon?: ReactNode;\n  /** HTML data-testid attribute of the option */\n  testId?: string;\n  /** option value */\n  value: string;\n}\n\nexport interface RadiosProps extends VariantProps {\n  /** CSS class name */\n  className?: ClassName;\n  /** Determines if the Buttons are disabled or not. */\n  disabled?: boolean;\n  /** determines orientation of the Buttons. */\n  inline?: boolean;\n  /** Label displayed next to the RadioButton. */\n  label?: ReactNode;\n  /** Name the RadioButtons are registered at in HTML forms (react-hook-form). */\n  name: string;\n  /** Radio button configuration. */\n  options: RadioOption[];\n  /** Id to grab element in internal tests. */\n  testId?: string;\n}\n\n/**\n * Radios component based on [HeroUI RadioGroup](https://www.heroui.com//docs/components/radio-group)\n */\nconst Radios = ({\n  className = undefined,\n  inline = false,\n  name,\n  options,\n  ...uniformFieldProps\n}: RadiosProps): ReactElement => {\n  const {\n    disabled,\n    errorMessage,\n    field: { onBlur, onChange, ref },\n    invalid,\n    label,\n    required,\n    defaultValue,\n    testId,\n  } = useUniformField({\n    name,\n    showInvalidWhen: 'immediate',\n    ...uniformFieldProps,\n  });\n\n  // classNames from slots\n  const variants = radiosVariants();\n  const classNames = variantsToClassNames(variants, className, 'base');\n\n  const itemClassNames = {\n    base: classNames.itemBase,\n    control: classNames.itemControl,\n    description: classNames.itemDescription,\n    label: classNames.itemLabel,\n    labelWrapper: classNames.itemLabelWrapper,\n    wrapper: classNames.itemWrapper,\n  };\n\n  return (\n    <HeroRadioGroup\n      ref={ref}\n      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      defaultValue={defaultValue as string | undefined}\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    >\n      {options.map((option) => {\n        if ('value' in option) {\n          const optionTestId = slugify(\n            `${testId}_option_${option.testId ?? option.value}`,\n            { replaceDots: true },\n          );\n          return (\n            <HeroRadio\n              key={option.value}\n              classNames={itemClassNames}\n              data-testid={optionTestId}\n              isDisabled={!!disabled || option.disabled}\n              onChange={onChange}\n              value={option.value}\n            >\n              {option.label ?? option.value}\n            </HeroRadio>\n          );\n        }\n        return null;\n      })}\n    </HeroRadioGroup>\n  );\n};\n\nexport default Radios;\n","import Radios from './Radios';\n\nexport type { RadiosProps } from './Radios';\n\nexport { Radios };\n\nexport default Radios;\n"],"mappings":";;;;;;;;;AAGA;AAAA,EACE,SAAS;AAAA,EACT,cAAc;AAAA,OACT;AAEP,SAAS,SAAS,IAAI,4BAA4B;AA2G7B;AAvGd,IAAM,iBAAiB,GAAG;AAAA,EAC/B,OAAO;AAAA;AAAA,IAEL,MAAM;AAAA,IACN,UAAU;AAAA,IACV,aAAa;AAAA,IACb,iBAAiB;AAAA,IACjB,WAAW;AAAA,IACX,kBAAkB;AAAA,IAClB,aACE;AAAA;AAAA,IAEF,OACE;AAAA,IACF,SAAS;AAAA,EACX;AACF,CAAC;AAsCD,IAAM,SAAS,CAAC,OAMiB;AANjB,eACd;AAAA,gBAAY;AAAA,IACZ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,EAtEF,IAkEgB,IAKX,8BALW,IAKX;AAAA,IAJH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,OAAO,EAAE,QAAQ,UAAU,IAAI;AAAA,IAC/B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,gBAAgB;AAAA,IAClB;AAAA,IACA,iBAAiB;AAAA,KACd,kBACJ;AAGD,QAAM,WAAW,eAAe;AAChC,QAAM,aAAa,qBAAqB,UAAU,WAAW,MAAM;AAEnE,QAAM,iBAAiB;AAAA,IACrB,MAAM,WAAW;AAAA,IACjB,SAAS,WAAW;AAAA,IACpB,aAAa,WAAW;AAAA,IACxB,OAAO,WAAW;AAAA,IAClB,cAAc,WAAW;AAAA,IACzB,SAAS,WAAW;AAAA,EACtB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MAGA,gBAAc;AAAA,MACd,iBAAe;AAAA,MACf,eAAa;AAAA,MACb;AAAA,MACA;AAAA,MACA,YAAY;AAAA,MACZ,WAAW;AAAA,MACX,YAAY;AAAA,MACZ,OAAO,QAAQ,oBAAC,YAAQ,iBAAM,IAAY;AAAA,MAC1C;AAAA,MACA;AAAA,MACA,aAAa,SAAS,eAAe;AAAA,MAEpC,kBAAQ,IAAI,CAAC,WAAW;AAxH/B,YAAAA,KAAAC;AAyHQ,YAAI,WAAW,QAAQ;AACrB,gBAAM,eAAe;AAAA,YACnB,GAAG,MAAM,YAAWD,MAAA,OAAO,WAAP,OAAAA,MAAiB,OAAO,KAAK;AAAA,YACjD,EAAE,aAAa,KAAK;AAAA,UACtB;AACA,iBACE;AAAA,YAAC;AAAA;AAAA,cAEC,YAAY;AAAA,cACZ,eAAa;AAAA,cACb,YAAY,CAAC,CAAC,YAAY,OAAO;AAAA,cACjC;AAAA,cACA,OAAO,OAAO;AAAA,cAEb,WAAAC,MAAA,OAAO,UAAP,OAAAA,MAAgB,OAAO;AAAA;AAAA,YAPnB,OAAO;AAAA,UAQd;AAAA,QAEJ;AACA,eAAO;AAAA,MACT,CAAC;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,iBAAQ;;;AC3If,IAAOC,kBAAQ;","names":["_a","_b","Radios_default"]}

package/dist/{chunk-Y3GELCDP.js → chunk-VLEYEBRE.js}

@@ -1,19 +1,16 @@
 import {
-  FieldCopyTestIdButton_default
-} from "./chunk-NTDKZW4E.js";
+  useUniformField
+} from "./chunk-CJD3DW4J.js";
 import {
   FieldValidationError_default
-} from "./chunk-CQWA2DFV.js";
-import {
-  useController,
-  useFormContext
-} from "./chunk-IYDCKENI.js";
+} from "./chunk-ELYGQTXB.js";
 import {
+  __objRest,
   __spreadProps,
   __spreadValues
 } from "./chunk-K2V4ULA2.js";
 
-// src/CheckboxGroup/CheckboxGroup.tsx
+// src/Checkboxes/Checkboxes.tsx
 import {
   Checkbox as HeroCheckbox,
   CheckboxGroup as HeroCheckboxGroup
@@ -21,14 +18,14 @@ import {
 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({
+var checkboxesVariants = tv({
   slots: {
     base: "group",
     // Needs group for group-data condition
     errorMessage: "text-tiny",
     // 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-foreground group-data-[invalid=true]:!text-danger text-sm subpixel-antialiased",
+    label: "text-foreground group-data-[invalid=true]:!text-danger inline-flex text-sm subpixel-antialiased",
     optionBase: "",
     optionIcon: "",
     optionLabel: "",
@@ -55,44 +52,39 @@ var checkboxGroupVariants = tv({
     }
   }
 });
-var CheckboxGroup = ({
-  className = void 0,
-  color = "primary",
-  inline = false,
-  label = void 0,
-  lineThrough = false,
-  options,
-  disabled = false,
-  name,
-  testId: _testId = void 0
-}) => {
-  const { control, debugMode, getFieldState } = useFormContext();
+var Checkboxes = (_a) => {
+  var _b = _a, {
+    className = void 0,
+    color = "primary",
+    inline = false,
+    lineThrough = false,
+    options,
+    name
+  } = _b, uniformFieldProps = __objRest(_b, [
+    "className",
+    "color",
+    "inline",
+    "lineThrough",
+    "options",
+    "name"
+  ]);
+  var _a2;
   const {
+    disabled,
     error: _error,
+    field: { onChange, value = [], ref, onBlur },
     invalid,
+    label,
     required,
     testId
-  } = getFieldState(name, _testId);
-  const { field } = useController({ control, name, disabled });
-  const { onChange, value = [], ref, onBlur } = field;
-  const showTestIdCopyButton = debugMode === "debug-testids";
-  const showLabel = label || showTestIdCopyButton;
-  const variants = checkboxGroupVariants({ lineThrough });
-  const classNames = variantsToClassNames(variants, className, "base");
-  const heroCheckboxGroupClassNames = {
-    base: classNames.base,
-    label: classNames.label,
-    wrapper: classNames.wrapper
-  };
-  const heroCheckboxClassNames = {
-    base: classNames.optionBase,
-    icon: classNames.optionIcon,
-    label: classNames.optionLabel,
-    wrapper: classNames.optionWrapper
-  };
-  const errorFlat = _error && Object.values(
+  } = useUniformField(__spreadValues({
+    name,
+    showInvalidWhen: "immediate"
+  }, uniformFieldProps));
+  const errorFlat = (_a2 = _error && Object.values(
     _error
-  ).flat() || [];
+  ).flat()) != null ? _a2 : [];
+  const errorMessage = /* @__PURE__ */ jsx(FieldValidationError_default, { error: errorFlat, testId });
   const getCheckboxValue = (inputValue) => {
     if (Array.isArray(inputValue)) {
       return inputValue;
@@ -112,38 +104,41 @@ var CheckboxGroup = ({
     onChange,
     value: getCheckboxValue(value)
   };
-  const checkboxGroupProps = options.length === 1 ? singleCheckboxProps : multipleCheckboxProps;
+  const checkboxesProps = options.length === 1 ? singleCheckboxProps : multipleCheckboxProps;
+  const variants = checkboxesVariants({ lineThrough });
+  const classNames = variantsToClassNames(variants, className, "base");
+  const heroCheckboxGroupClassNames = {
+    base: classNames.base,
+    label: classNames.label,
+    wrapper: classNames.wrapper
+  };
+  const heroCheckboxClassNames = {
+    base: classNames.optionBase,
+    icon: classNames.optionIcon,
+    label: classNames.optionLabel,
+    wrapper: classNames.optionWrapper
+  };
   return /* @__PURE__ */ jsx(
     HeroCheckboxGroup,
     __spreadProps(__spreadValues({
+      ref,
       classNames: heroCheckboxGroupClassNames,
       color: color === "info" ? "primary" : color,
       "data-invalid": invalid,
       "data-testid": testId,
+      errorMessage,
       isDisabled: disabled,
       isInvalid: invalid,
       isRequired: required,
+      label: label ? /* @__PURE__ */ jsx("legend", { children: label }) : null,
       name,
       onBlur,
-      orientation: inline ? "horizontal" : "vertical",
-      errorMessage: errorFlat.length > 0 && /* @__PURE__ */ jsx(
-        FieldValidationError_default,
-        {
-          className: classNames.errorMessage,
-          error: errorFlat,
-          testId
-        }
-      ),
-      label: showLabel && // eslint-disable-next-line jsx-a11y/label-has-associated-control
-      /* @__PURE__ */ jsxs("label", { children: [
-        label,
-        showTestIdCopyButton && /* @__PURE__ */ jsx(FieldCopyTestIdButton_default, { testId })
-      ] }),
-      ref
-    }, checkboxGroupProps), {
+      orientation: inline ? "horizontal" : "vertical"
+    }, checkboxesProps), {
       children: options == null ? void 0 : options.map((option) => {
+        var _a3;
         const optionTestId = slugify(
-          `${testId}_option_${(option == null ? void 0 : option.testId) || (option == null ? void 0 : option.value)}`,
+          `${testId}_option_${(_a3 = option == null ? void 0 : option.testId) != null ? _a3 : option == null ? void 0 : option.value}`,
           { replaceDots: true }
         );
         const hasSubline = !!option.labelSubline;
@@ -164,7 +159,7 @@ var CheckboxGroup = ({
             classNames: optionClassNames,
             "data-invalid": invalid,
             "data-testid": optionTestId,
-            isDisabled: disabled || option.disabled,
+            isDisabled: !!disabled || option.disabled,
             value: option == null ? void 0 : option.value,
             "aria-label": typeof option.label === "string" ? option.label : option.value,
             children: labelContent
@@ -175,13 +170,13 @@ var CheckboxGroup = ({
     })
   );
 };
-var CheckboxGroup_default = CheckboxGroup;
+var Checkboxes_default = Checkboxes;
 
-// src/CheckboxGroup/index.ts
-var CheckboxGroup_default2 = CheckboxGroup_default;
+// src/Checkboxes/index.ts
+var Checkboxes_default2 = Checkboxes_default;
 
 export {
-  CheckboxGroup_default,
-  CheckboxGroup_default2
+  Checkboxes_default,
+  Checkboxes_default2
 };
-//# sourceMappingURL=chunk-Y3GELCDP.js.map
+//# sourceMappingURL=chunk-VLEYEBRE.js.map

package/dist/chunk-VLEYEBRE.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Checkboxes/Checkboxes.tsx","../src/Checkboxes/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type {\n  CheckboxGroupProps as HeroCheckboxGroupProps,\n  CheckboxProps as HeroCheckboxProps,\n} from '@heroui/checkbox';\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 { useUniformField } from '../hooks';\nimport { FieldValidationError } from '../partials/FieldValidationError';\n\nexport const checkboxesVariants = 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-foreground group-data-[invalid=true]:!text-danger inline-flex text-sm subpixel-antialiased',\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        optionLabelSubline: 'group-data-[selected=true]:opacity-60',\n      },\n    },\n  },\n});\n\ntype VariantProps = TVProps<typeof checkboxesVariants>;\ntype ClassName = TVClassName<typeof checkboxesVariants>;\n\nexport interface CheckboxOption {\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 CheckboxesProps 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: CheckboxOption[];\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n}\n\n/**\n * Checkboxes component based on [HeroUI CheckboxGroup](https://www.heroui.com//docs/components/checkbox-group)\n */\nconst Checkboxes = ({\n  className = undefined,\n  color = 'primary',\n  inline = false,\n  lineThrough = false,\n  options,\n  name,\n  ...uniformFieldProps\n}: CheckboxesProps) => {\n  const {\n    disabled,\n    error: _error,\n    field: { onChange, value = [], ref, onBlur },\n    invalid,\n    label,\n    required,\n    testId,\n  } = useUniformField({\n    name,\n    showInvalidWhen: 'immediate',\n    ...uniformFieldProps,\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  const errorMessage = (\n    <FieldValidationError error={errorFlat} testId={testId} />\n  );\n\n  /**\n   * Handles the checkboxes 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 as string[];\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[]) => {\n      onChange(newValue?.[0]);\n    },\n  };\n\n  const multipleCheckboxProps = {\n    onChange,\n    value: getCheckboxValue(value),\n  };\n\n  const checkboxesProps =\n    options.length === 1 ? singleCheckboxProps : multipleCheckboxProps;\n\n  // classNames from slots\n  const variants = checkboxesVariants({ lineThrough });\n  const classNames = variantsToClassNames(variants, className, 'base');\n\n  // map slots to HeroUI class names\n  const heroCheckboxGroupClassNames: HeroCheckboxGroupProps['classNames'] = {\n    base: classNames.base,\n    label: classNames.label,\n    wrapper: classNames.wrapper,\n  };\n  const heroCheckboxClassNames: HeroCheckboxProps['classNames'] = {\n    base: classNames.optionBase,\n    icon: classNames.optionIcon,\n    label: classNames.optionLabel,\n    wrapper: classNames.optionWrapper,\n  };\n\n  return (\n    <HeroCheckboxGroup\n      ref={ref}\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={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      {...checkboxesProps}\n    >\n      {options?.map((option) => {\n        const optionTestId = slugify(\n          `${testId}_option_${option?.testId ?? option?.value}`,\n          { replaceDots: true },\n        );\n\n        // set content and classes depending option has subline\n        const hasSubline = !!option.labelSubline;\n        let labelContent: ReactNode;\n        let optionClassNames = heroCheckboxClassNames;\n        if (hasSubline) {\n          labelContent = (\n            <div className=\"flex grow 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          // remove label classes from outer label when subline is used\n          optionClassNames = { ...optionClassNames, label: '' };\n        } else {\n          labelContent = option.label;\n        }\n\n        return (\n          <HeroCheckbox\n            key={`index_${option.value}`}\n            classNames={optionClassNames}\n            data-invalid={invalid}\n            data-testid={optionTestId}\n            isDisabled={!!disabled || option.disabled}\n            value={option?.value}\n            aria-label={\n              typeof option.label === 'string' ? option.label : option.value\n            }\n          >\n            {labelContent}\n          </HeroCheckbox>\n        );\n      })}\n    </HeroCheckboxGroup>\n  );\n};\n\nexport default Checkboxes;\n","import Checkboxes from './Checkboxes';\n\nexport type { CheckboxesProps, CheckboxOption } from './Checkboxes';\n\nexport { Checkboxes };\n\nexport default Checkboxes;\n"],"mappings":"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","names":["_a","Checkboxes_default"]}

package/dist/{chunk-UGCZORU3.cjs → chunk-YIBISSMT.cjs}

@@ -1,14 +1,14 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkOE5BOGGXcjs = require('./chunk-OE5BOGGX.cjs');
 
 
-var _chunkY3AB4GV6cjs = require('./chunk-Y3AB4GV6.cjs');
+var _chunkC5GIWGQRcjs = require('./chunk-C5GIWGQR.cjs');
 
 
+var _chunkOE5BOGGXcjs = require('./chunk-OE5BOGGX.cjs');
 
 
-var _chunk2GYFDVXXcjs = require('./chunk-2GYFDVXX.cjs');
+var _chunkNHEZXA4Hcjs = require('./chunk-NHEZXA4H.cjs');
 
 
 
@@ -44,11 +44,11 @@ var Switch = ({
   testId: _testId = void 0,
   thumbIcon = void 0
 }) => {
-  const { control, debugMode, getFieldState } = _chunk2GYFDVXXcjs.useFormContext.call(void 0, );
+  const { control, debugMode, getFieldState } = _chunkC5GIWGQRcjs.useFormContext.call(void 0, );
   const { error, required, testId, invalid } = getFieldState(name, _testId);
-  const { field } = _chunk2GYFDVXXcjs.useController.call(void 0, { name, control, disabled });
+  const { field } = _chunkC5GIWGQRcjs.useController.call(void 0, { name, control, disabled });
   const { disabled: isDisabled, value, ref, onBlur, onChange } = field;
-  const { label, getInputProps, getErrorMessageProps } = _chunk2GYFDVXXcjs.useInput.call(void 0, {
+  const { label, getInputProps, getErrorMessageProps } = _chunkC5GIWGQRcjs.useInput.call(void 0, {
     errorMessage: JSON.stringify(error),
     isInvalid: invalid,
     isRequired: required,
@@ -56,9 +56,9 @@ var Switch = ({
     labelPlacement: "outside",
     placeholder: " "
   });
+  const showTestIdCopyButton = debugMode === "debug-testids";
   const variants = switchVariants();
   const classNames = _pixelutils.variantsToClassNames.call(void 0, variants, className, "outerWrapper");
-  const showTestIdCopyButton = debugMode === "debug-testids";
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: classNames.outerWrapper, children: [
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
       _switch.Switch,
@@ -86,7 +86,7 @@ var Switch = ({
         ]
       }
     ),
-    error ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: classNames.errorMessage, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", _chunk555JRYCScjs.__spreadProps.call(void 0, _chunk555JRYCScjs.__spreadValues.call(void 0, {}, getErrorMessageProps()), { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkY3AB4GV6cjs.FieldValidationError_default, { error, testId }) })) }) : null
+    error ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: classNames.errorMessage, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", _chunk555JRYCScjs.__spreadProps.call(void 0, _chunk555JRYCScjs.__spreadValues.call(void 0, {}, getErrorMessageProps()), { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkNHEZXA4Hcjs.FieldValidationError_default, { error, testId }) })) }) : null
   ] });
 };
 var Switch_default = Switch;
@@ -98,4 +98,4 @@ var Switch_default2 = Switch_default;
 
 
 exports.Switch_default = Switch_default; exports.Switch_default2 = Switch_default2;
-//# sourceMappingURL=chunk-UGCZORU3.cjs.map
+//# sourceMappingURL=chunk-YIBISSMT.cjs.map