@fuf-stack/uniform 1.10.3 → 1.11.0

package/dist/RadioBoxes-7qdHj3ti.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioBoxes-7qdHj3ti.js","names":["boxClassNames: RadioBoxProps['classNames']","HeroRadioGroup","RadioBoxes"],"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 { 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;\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    defaultValue,\n    errorMessage,\n    invalid,\n    disabled,\n    label,\n    onBlur,\n    onChange,\n    ref,\n    required,\n    testId,\n  } = useUniformField({\n    name,\n    ...uniformFieldProps,\n  });\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      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      onValueChange={onChange}\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            <RadioBox\n              key={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={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":";;;;;;;AASA,MAAa,mBAAmB,GAAG;CACjC,OAAO;EACL,MAAM;EACN,SAAS;EACT,aAAa;EACb,MAAM;EACN,OAAO;EACP,cAAc;EACf;CACD,UAAU;EACR,YAAY,EACV,MAAM,EACJ,MAAM,wCACP,EACF;EACD,WAAW,EACT,MAAM,EACJ,MAAM,kBACP,EACF;EACF;CACF,CAAC;AAaF,MAAa,YAAY,EACvB,YAAY,cAAc,QAC1B,OAAO,QACP,YAAY,OACZ,GAAG,YACgB;CACnB,MAAM,EACJ,UACA,WACA,aACA,cACA,iBACA,eACA,eACA,sBACA,iBACA,eACE,SAAS,MAAwB;CAOrC,MAAM,aAAa,qBAJF,iBAAiB;EAChC;EACA;EACD,CAAC,EAIA,aACA,OACD;AAED,QACE,qBAAC;EAAU,GAAI,cAAc;EAAE,WAAW,WAAW;;GACnD,oBAAC,4BACC,oBAAC,WAAM,GAAI,eAAe,GAAI,GACf;GAChB,CAAC,OACA,oBAAC;IAAK,GAAI,iBAAiB;cACzB,oBAAC;KACC,GAAI,iBAAiB;KACrB,WAAW,GAAG,iBAAiB,CAAC,WAAW,WAAW,QAAQ;MAC9D;KACG,GACL;GACH,OAAO,oBAAC;IAAI,WAAW,WAAW;cAAO;KAAW,GAAG;GACxD,qBAAC;IACC,GAAI,sBAAsB;IAC1B,WAAW,GACT,sBAAsB,CAAC,WACvB,WAAW,aACZ;eAEA,WACC,oBAAC;KACC,GAAI,eAAe;KACnB,WAAW,GAAG,eAAe,CAAC,WAAW,WAAW,MAAM;KAEzD;MACI,GACL,MACH,cACC,oBAAC;KAAI,WAAW,WAAW;eAAc;MAAkB,GACzD;KACA;GACL,OACC,oBAAC;IAAK,GAAI,iBAAiB;cACzB,oBAAC;KACC,GAAI,iBAAiB;KACrB,WAAW,GAAG,iBAAiB,CAAC,WAAW,WAAW,QAAQ;MAC9D;KACG,GACL;;GACM;;;;;ACvGhB,MAAa,qBAAqB,GAAG,EACnC,OAAO;CACL,MAAM;CACN,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,UAAU;CACV,iBAAiB;CAGjB,OACE;CACF,SAAS;CACV,EACF,CAAC;;;;AA0CF,MAAM,cAAc,EAClB,YAAY,QACZ,SAAS,OACT,MACA,SACA,GAAG,wBACkB;CACrB,MAAM,EACJ,WACA,cACA,cACA,SACA,UACA,OACA,QACA,UACA,KACA,UACA,WACE,gBAAgB;EAClB;EACA,GAAG;EACJ,CAAC;CAIF,MAAM,aAAa,qBADF,oBAAoB,EACa,WAAW,OAAO;CACpE,MAAMA,gBAA6C;EACjD,MAAM,WAAW;EACjB,SAAS,WAAW;EACpB,aAAa,WAAW;EACxB,OAAO,WAAW;EAClB,cAAc,WAAW;EAC1B;AAED,QACE,oBAACC;EACM;EACL,cAAY;EACA;EAGZ,gBAAc;EACd,iBAAe;EACf,eAAa;EACC;EACA;EACd,YAAY;EACZ,WAAW;EACX,YAAY;EACZ,OAAO,QAAQ,oBAAC,sBAAQ,QAAe,GAAG;EACpC;EACE;EACR,eAAe;EACf,aAAa,SAAS,eAAe;YAEpC,QAAQ,KAAK,WAAW;AACvB,OAAI,WAAW,QAAQ;IACrB,MAAM,eAAe,QACnB,GAAG,OAAO,UAAU,OAAO,UAAU,OAAO,SAC5C,EAAE,aAAa,MAAM,CACtB;AACD,WACE,oBAAC;KAEC,YAAY;KACZ,eAAa;KACb,aAAa,OAAO;KACpB,MAAM,OAAO;KACb,YAAY,CAAC,CAAC,YAAY,OAAO;KACjC,WAAW;KACX,OAAO,OAAO;eAEb,OAAO,SAAS,OAAO;OATnB,OAAO,MAUH;;AAGf,UAAO;IACP;GACa;;AAIrB,yBAAe;;;;AChJf,2BAAeC"}

package/dist/RadioBoxes-Bd9ahl4i.cjs

@@ -0,0 +1,156 @@
+const require_FormContext = require('./FormContext-C3GymQOA.cjs');
+const require_useUniformField = require('./useUniformField-BMvnRC_r.cjs');
+let __fuf_stack_pixel_utils = require("@fuf-stack/pixel-utils");
+let react_jsx_runtime = require("react/jsx-runtime");
+let __heroui_radio = require("@heroui/radio");
+let __react_aria_visually_hidden = require("@react-aria/visually-hidden");
+
+//#region src/RadioBoxes/RadioBox.tsx
+const radioBoxVariants = (0, __fuf_stack_pixel_utils.tv)({
+	slots: {
+		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",
+		control: "",
+		description: "text-foreground opacity-70 text-small",
+		icon: "",
+		label: "",
+		labelWrapper: "grow"
+	},
+	variants: {
+		isDisabled: { true: { base: "pointer-events-none opacity-disabled" } },
+		isInvalid: { true: { base: "!border-danger" } }
+	}
+});
+const RadioBox = ({ classNames: _classNames = void 0, icon = void 0, isInvalid = false, ...props }) => {
+	const { children, Component, description, getBaseProps, getControlProps, getInputProps, getLabelProps, getLabelWrapperProps, getWrapperProps, isDisabled } = (0, __heroui_radio.useRadio)(props);
+	const classNames = (0, __fuf_stack_pixel_utils.variantsToClassNames)(radioBoxVariants({
+		isDisabled,
+		isInvalid
+	}), _classNames, "base");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Component, {
+		...getBaseProps(),
+		className: classNames.base,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__react_aria_visually_hidden.VisuallyHidden, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", { ...getInputProps() }) }),
+			!icon ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				...getWrapperProps(),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					...getControlProps(),
+					className: (0, __fuf_stack_pixel_utils.cn)(getControlProps().className, classNames.control)
+				})
+			}) : null,
+			icon ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: classNames.icon,
+				children: icon
+			}) : null,
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				...getLabelWrapperProps(),
+				className: (0, __fuf_stack_pixel_utils.cn)(getLabelWrapperProps().className, classNames.labelWrapper),
+				children: [children ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					...getLabelProps(),
+					className: (0, __fuf_stack_pixel_utils.cn)(getLabelProps().className, classNames.label),
+					children
+				}) : null, description ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: classNames.description,
+					children: description
+				}) : null]
+			}),
+			icon ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				...getWrapperProps(),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					...getControlProps(),
+					className: (0, __fuf_stack_pixel_utils.cn)(getControlProps().className, classNames.control)
+				})
+			}) : null
+		]
+	});
+};
+
+//#endregion
+//#region src/RadioBoxes/RadioBoxes.tsx
+const radioBoxesVariants = (0, __fuf_stack_pixel_utils.tv)({ slots: {
+	base: "group gap-0",
+	boxBase: "",
+	boxControl: "",
+	boxDescription: "",
+	boxLabel: "",
+	boxLabelWrapper: "",
+	label: "mb-2 inline-flex text-sm text-foreground subpixel-antialiased group-data-[invalid=true]:text-danger",
+	wrapper: ""
+} });
+/**
+* RadioBoxes component based on [HeroUI RadioGroup](https://www.heroui.com//docs/components/radio-group)
+*/
+const RadioBoxes = ({ className = void 0, inline = false, name, options, ...uniformFieldProps }) => {
+	const { ariaLabel, defaultValue, errorMessage, invalid, disabled, label, onBlur, onChange, ref, required, testId } = require_useUniformField.useUniformField({
+		name,
+		...uniformFieldProps
+	});
+	const classNames = (0, __fuf_stack_pixel_utils.variantsToClassNames)(radioBoxesVariants(), className, "base");
+	const boxClassNames = {
+		base: classNames.boxBase,
+		control: classNames.boxControl,
+		description: classNames.boxDescription,
+		label: classNames.boxLabel,
+		labelWrapper: classNames.boxLabelWrapper
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__heroui_radio.RadioGroup, {
+		ref,
+		"aria-label": ariaLabel,
+		classNames,
+		"data-invalid": invalid,
+		"data-required": required,
+		"data-testid": testId,
+		defaultValue,
+		errorMessage,
+		isDisabled: disabled,
+		isInvalid: invalid,
+		isRequired: required,
+		label: label ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("legend", { children: label }) : null,
+		name,
+		onBlur,
+		onValueChange: onChange,
+		orientation: inline ? "horizontal" : "vertical",
+		children: options.map((option) => {
+			if ("value" in option) {
+				const optionTestId = (0, __fuf_stack_pixel_utils.slugify)(`${testId}_option_${option.testId ?? option.value}`, { replaceDots: true });
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RadioBox, {
+					classNames: boxClassNames,
+					"data-testid": optionTestId,
+					description: option.description,
+					icon: option.icon,
+					isDisabled: !!disabled || option.disabled,
+					isInvalid: invalid,
+					value: option.value,
+					children: option.label ?? option.value
+				}, option.value);
+			}
+			return null;
+		})
+	});
+};
+var RadioBoxes_default = RadioBoxes;
+
+//#endregion
+//#region src/RadioBoxes/index.ts
+var RadioBoxes_default$1 = RadioBoxes_default;
+
+//#endregion
+Object.defineProperty(exports, 'RadioBoxes_default', {
+  enumerable: true,
+  get: function () {
+    return RadioBoxes_default$1;
+  }
+});
+Object.defineProperty(exports, 'RadioBoxes_default$1', {
+  enumerable: true,
+  get: function () {
+    return RadioBoxes_default;
+  }
+});
+Object.defineProperty(exports, 'radioBoxVariants', {
+  enumerable: true,
+  get: function () {
+    return radioBoxVariants;
+  }
+});
+//# sourceMappingURL=RadioBoxes-Bd9ahl4i.cjs.map

package/dist/RadioBoxes-Bd9ahl4i.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioBoxes-Bd9ahl4i.cjs","names":["VisuallyHidden","useUniformField","boxClassNames: RadioBoxProps['classNames']","HeroRadioGroup","RadioBoxes"],"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 { 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;\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    defaultValue,\n    errorMessage,\n    invalid,\n    disabled,\n    label,\n    onBlur,\n    onChange,\n    ref,\n    required,\n    testId,\n  } = useUniformField({\n    name,\n    ...uniformFieldProps,\n  });\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      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      onValueChange={onChange}\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            <RadioBox\n              key={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={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":";;;;;;;;AASA,MAAa,mDAAsB;CACjC,OAAO;EACL,MAAM;EACN,SAAS;EACT,aAAa;EACb,MAAM;EACN,OAAO;EACP,cAAc;EACf;CACD,UAAU;EACR,YAAY,EACV,MAAM,EACJ,MAAM,wCACP,EACF;EACD,WAAW,EACT,MAAM,EACJ,MAAM,kBACP,EACF;EACF;CACF,CAAC;AAaF,MAAa,YAAY,EACvB,YAAY,cAAc,QAC1B,OAAO,QACP,YAAY,OACZ,GAAG,YACgB;CACnB,MAAM,EACJ,UACA,WACA,aACA,cACA,iBACA,eACA,eACA,sBACA,iBACA,4CACW,MAAwB;CAOrC,MAAM,+DAJW,iBAAiB;EAChC;EACA;EACD,CAAC,EAIA,aACA,OACD;AAED,QACE,4CAAC;EAAU,GAAI,cAAc;EAAE,WAAW,WAAW;;GACnD,2CAACA,yDACC,2CAAC,WAAM,GAAI,eAAe,GAAI,GACf;GAChB,CAAC,OACA,2CAAC;IAAK,GAAI,iBAAiB;cACzB,2CAAC;KACC,GAAI,iBAAiB;KACrB,2CAAc,iBAAiB,CAAC,WAAW,WAAW,QAAQ;MAC9D;KACG,GACL;GACH,OAAO,2CAAC;IAAI,WAAW,WAAW;cAAO;KAAW,GAAG;GACxD,4CAAC;IACC,GAAI,sBAAsB;IAC1B,2CACE,sBAAsB,CAAC,WACvB,WAAW,aACZ;eAEA,WACC,2CAAC;KACC,GAAI,eAAe;KACnB,2CAAc,eAAe,CAAC,WAAW,WAAW,MAAM;KAEzD;MACI,GACL,MACH,cACC,2CAAC;KAAI,WAAW,WAAW;eAAc;MAAkB,GACzD;KACA;GACL,OACC,2CAAC;IAAK,GAAI,iBAAiB;cACzB,2CAAC;KACC,GAAI,iBAAiB;KACrB,2CAAc,iBAAiB,CAAC,WAAW,WAAW,QAAQ;MAC9D;KACG,GACL;;GACM;;;;;ACvGhB,MAAa,qDAAwB,EACnC,OAAO;CACL,MAAM;CACN,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,UAAU;CACV,iBAAiB;CAGjB,OACE;CACF,SAAS;CACV,EACF,CAAC;;;;AA0CF,MAAM,cAAc,EAClB,YAAY,QACZ,SAAS,OACT,MACA,SACA,GAAG,wBACkB;CACrB,MAAM,EACJ,WACA,cACA,cACA,SACA,UACA,OACA,QACA,UACA,KACA,UACA,WACEC,wCAAgB;EAClB;EACA,GAAG;EACJ,CAAC;CAIF,MAAM,+DADW,oBAAoB,EACa,WAAW,OAAO;CACpE,MAAMC,gBAA6C;EACjD,MAAM,WAAW;EACjB,SAAS,WAAW;EACpB,aAAa,WAAW;EACxB,OAAO,WAAW;EAClB,cAAc,WAAW;EAC1B;AAED,QACE,2CAACC;EACM;EACL,cAAY;EACA;EAGZ,gBAAc;EACd,iBAAe;EACf,eAAa;EACC;EACA;EACd,YAAY;EACZ,WAAW;EACX,YAAY;EACZ,OAAO,QAAQ,2CAAC,sBAAQ,QAAe,GAAG;EACpC;EACE;EACR,eAAe;EACf,aAAa,SAAS,eAAe;YAEpC,QAAQ,KAAK,WAAW;AACvB,OAAI,WAAW,QAAQ;IACrB,MAAM,oDACJ,GAAG,OAAO,UAAU,OAAO,UAAU,OAAO,SAC5C,EAAE,aAAa,MAAM,CACtB;AACD,WACE,2CAAC;KAEC,YAAY;KACZ,eAAa;KACb,aAAa,OAAO;KACpB,MAAM,OAAO;KACb,YAAY,CAAC,CAAC,YAAY,OAAO;KACjC,WAAW;KACX,OAAO,OAAO;eAEb,OAAO,SAAS,OAAO;OATnB,OAAO,MAUH;;AAGf,UAAO;IACP;GACa;;AAIrB,yBAAe;;;;AChJf,2BAAeC"}

package/dist/RadioTabs/index.cjs

@@ -1,19 +1,5 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+Object.defineProperty(exports, '__esModule', { value: true });
+const require_RadioTabs = require('../RadioTabs-DcEUdW7r.cjs');
 
-
-var _chunk6GN62PBGcjs = require('../chunk-6GN62PBG.cjs');
-require('../chunk-V3M7HL26.cjs');
-require('../chunk-OE5BOGGX.cjs');
-require('../chunk-NHEZXA4H.cjs');
-require('../chunk-6AWHOBNL.cjs');
-require('../chunk-PCTYJUY7.cjs');
-require('../chunk-56TQOKG7.cjs');
-require('../chunk-FYN7ZWLW.cjs');
-require('../chunk-AQJLKHAE.cjs');
-require('../chunk-OKJWLH7T.cjs');
-require('../chunk-555JRYCS.cjs');
-
-
-
-exports.RadioTabs = _chunk6GN62PBGcjs.RadioTabs_default; exports.default = _chunk6GN62PBGcjs.RadioTabs_default2;
-//# sourceMappingURL=index.cjs.map
+exports.RadioTabs = require_RadioTabs.RadioTabs_default$1;
+exports.default = require_RadioTabs.RadioTabs_default;

package/dist/RadioTabs/index.d.cts

@@ -1,10 +1,2 @@
-import { R as RadioTabs } from '../RadioTabs-DkR5fvl4.cjs';
-export { a as RadioTabsProps } from '../RadioTabs-DkR5fvl4.cjs';
-import 'tailwind-variants';
-import '@fuf-stack/pixel-utils';
-import '@fuf-stack/pixels';
-import 'react';
-
-
-
-export { RadioTabs, RadioTabs as default };
+import { n as RadioTabsProps, t as RadioTabs } from "../index-C56I3SOi.cjs";
+export { RadioTabs, RadioTabs as default, RadioTabsProps };

package/dist/RadioTabs/index.d.ts

@@ -1,10 +1,2 @@
-import { R as RadioTabs } from '../RadioTabs-DkR5fvl4.js';
-export { a as RadioTabsProps } from '../RadioTabs-DkR5fvl4.js';
-import 'tailwind-variants';
-import '@fuf-stack/pixel-utils';
-import '@fuf-stack/pixels';
-import 'react';
-
-
-
-export { RadioTabs, RadioTabs as default };
+import { n as RadioTabsProps, t as RadioTabs } from "../index-D6RB3b5L.js";
+export { RadioTabs, RadioTabs as default, RadioTabsProps };

package/dist/RadioTabs/index.js

@@ -1,19 +1,3 @@
-import {
-  RadioTabs_default,
-  RadioTabs_default2
-} from "../chunk-QLNJZDVF.js";
-import "../chunk-GEC75GNL.js";
-import "../chunk-NTDKZW4E.js";
-import "../chunk-ELYGQTXB.js";
-import "../chunk-5MTIQ6WD.js";
-import "../chunk-AHJJIANM.js";
-import "../chunk-CNTOODUQ.js";
-import "../chunk-SJWL6EMI.js";
-import "../chunk-IV45K4WU.js";
-import "../chunk-O2XJNQQK.js";
-import "../chunk-K2V4ULA2.js";
-export {
-  RadioTabs_default as RadioTabs,
-  RadioTabs_default2 as default
-};
-//# sourceMappingURL=index.js.map
+import { n as RadioTabs_default, t as RadioTabs_default$1 } from "../RadioTabs-DXs98jng.js";
+
+export { RadioTabs_default as RadioTabs, RadioTabs_default$1 as default };

package/dist/RadioTabs-DXs98jng.js

@@ -0,0 +1,119 @@
+import { t as useUniformField } from "./useUniformField-ClprfrES.js";
+import { slugify, tv, variantsToClassNames } from "@fuf-stack/pixel-utils";
+import { useRef } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { RadioGroup } from "@heroui/radio";
+import { VisuallyHidden } from "@react-aria/visually-hidden";
+import Tabs from "@fuf-stack/pixels/Tabs";
+
+//#region src/RadioTabs/RadioTabs.tsx
+const radioTabsVariants = tv({
+	slots: {
+		base: "group gap-0",
+		cursor: "",
+		label: "mb-2 inline-flex text-sm text-foreground subpixel-antialiased group-data-[invalid=true]:text-danger",
+		tab: "",
+		tabBase: "",
+		tabContent: "",
+		tabList: "",
+		tabPanel: "p-3",
+		tabWrapper: "",
+		wrapper: ""
+	},
+	variants: {
+		hasContent: { true: {
+			base: "",
+			tabBase: "p-1",
+			tabWrapper: ["rounded-medium border border-divider", "w-full"]
+		} },
+		fullWidth: { true: { tabWrapper: "w-full" } },
+		isInvalid: { true: { tabWrapper: "rounded-medium border-2 !border-danger" } }
+	}
+});
+/**
+* RadioTabs component based on [HeroUI RadioGroup](https://www.heroui.com//docs/components/radio-group)
+* and [HeroUI Tabs](https://www.heroui.com//docs/components/tabs)
+*/
+const RadioTabs = ({ className = void 0, fullWidth = false, inline = false, name, options, variant = void 0, ...uniformFieldProps }) => {
+	const { ariaLabel, disabled, errorMessage, field: { onBlur, onChange, ref, value }, invalid, label, required, testId } = useUniformField({
+		name,
+		...uniformFieldProps
+	});
+	const visualRadioGroupRef = useRef(null);
+	const tabOptions = options.map((option) => {
+		return {
+			content: option?.content,
+			disabled: option?.disabled,
+			key: option.value,
+			label: option?.label ?? option?.value,
+			testId: slugify(`option_${option?.testId ?? option?.value}`, { replaceDots: true })
+		};
+	});
+	const disabledAllKeys = tabOptions?.map((option) => {
+		return option.key;
+	});
+	const classNames = variantsToClassNames(radioTabsVariants({
+		fullWidth,
+		hasContent: options.some((option) => {
+			return option.content;
+		}),
+		isInvalid: invalid
+	}), className, "base");
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx("input", {
+		ref,
+		"aria-label": ariaLabel,
+		name,
+		onBlur,
+		value: value ?? "",
+		onChange: (e) => {
+			onChange(e.target.value);
+		},
+		onFocus: () => {
+			(visualRadioGroupRef.current?.querySelector("[role=\"tab\"]"))?.focus();
+		}
+	}) }), /* @__PURE__ */ jsx(RadioGroup, {
+		ref: visualRadioGroupRef,
+		"aria-label": ariaLabel,
+		"data-invalid": invalid,
+		"data-required": required,
+		"data-testid": testId,
+		errorMessage,
+		isDisabled: disabled,
+		isInvalid: invalid,
+		isRequired: required,
+		label: label ? /* @__PURE__ */ jsx("legend", { children: label }) : null,
+		name: `${name}_radiotabs`,
+		orientation: inline ? "horizontal" : "vertical",
+		classNames: {
+			base: classNames.base,
+			label: classNames.label,
+			wrapper: classNames.wrapper
+		},
+		children: /* @__PURE__ */ jsx(Tabs, {
+			disabledKeys: disabled ? disabledAllKeys : void 0,
+			onSelectionChange: onChange,
+			selectedKey: value ?? "",
+			tabs: tabOptions,
+			testId,
+			variant,
+			className: {
+				base: classNames.tabBase,
+				cursor: classNames.cursor,
+				panel: classNames.tabPanel,
+				tab: classNames.tab,
+				tabContent: classNames.tabContent,
+				tabList: classNames.tabList,
+				tabWrapper: classNames.tabWrapper
+			}
+		})
+	})] });
+};
+var RadioTabs_default = RadioTabs;
+
+//#endregion
+//#region src/RadioTabs/index.ts
+var RadioTabs_default$1 = RadioTabs_default;
+
+//#endregion
+export { RadioTabs_default as n, RadioTabs_default$1 as t };
+//# sourceMappingURL=RadioTabs-DXs98jng.js.map

package/dist/RadioTabs-DXs98jng.js.map

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

package/dist/RadioTabs-DcEUdW7r.cjs

@@ -0,0 +1,132 @@
+const require_FormContext = require('./FormContext-C3GymQOA.cjs');
+const require_useUniformField = require('./useUniformField-BMvnRC_r.cjs');
+let __fuf_stack_pixel_utils = require("@fuf-stack/pixel-utils");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let __heroui_radio = require("@heroui/radio");
+let __react_aria_visually_hidden = require("@react-aria/visually-hidden");
+let __fuf_stack_pixels_Tabs = require("@fuf-stack/pixels/Tabs");
+__fuf_stack_pixels_Tabs = require_FormContext.__toESM(__fuf_stack_pixels_Tabs);
+
+//#region src/RadioTabs/RadioTabs.tsx
+const radioTabsVariants = (0, __fuf_stack_pixel_utils.tv)({
+	slots: {
+		base: "group gap-0",
+		cursor: "",
+		label: "mb-2 inline-flex text-sm text-foreground subpixel-antialiased group-data-[invalid=true]:text-danger",
+		tab: "",
+		tabBase: "",
+		tabContent: "",
+		tabList: "",
+		tabPanel: "p-3",
+		tabWrapper: "",
+		wrapper: ""
+	},
+	variants: {
+		hasContent: { true: {
+			base: "",
+			tabBase: "p-1",
+			tabWrapper: ["rounded-medium border border-divider", "w-full"]
+		} },
+		fullWidth: { true: { tabWrapper: "w-full" } },
+		isInvalid: { true: { tabWrapper: "rounded-medium border-2 !border-danger" } }
+	}
+});
+/**
+* RadioTabs component based on [HeroUI RadioGroup](https://www.heroui.com//docs/components/radio-group)
+* and [HeroUI Tabs](https://www.heroui.com//docs/components/tabs)
+*/
+const RadioTabs = ({ className = void 0, fullWidth = false, inline = false, name, options, variant = void 0, ...uniformFieldProps }) => {
+	const { ariaLabel, disabled, errorMessage, field: { onBlur, onChange, ref, value }, invalid, label, required, testId } = require_useUniformField.useUniformField({
+		name,
+		...uniformFieldProps
+	});
+	const visualRadioGroupRef = (0, react.useRef)(null);
+	const tabOptions = options.map((option) => {
+		return {
+			content: option?.content,
+			disabled: option?.disabled,
+			key: option.value,
+			label: option?.label ?? option?.value,
+			testId: (0, __fuf_stack_pixel_utils.slugify)(`option_${option?.testId ?? option?.value}`, { replaceDots: true })
+		};
+	});
+	const disabledAllKeys = tabOptions?.map((option) => {
+		return option.key;
+	});
+	const classNames = (0, __fuf_stack_pixel_utils.variantsToClassNames)(radioTabsVariants({
+		fullWidth,
+		hasContent: options.some((option) => {
+			return option.content;
+		}),
+		isInvalid: invalid
+	}), className, "base");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__react_aria_visually_hidden.VisuallyHidden, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+		ref,
+		"aria-label": ariaLabel,
+		name,
+		onBlur,
+		value: value ?? "",
+		onChange: (e) => {
+			onChange(e.target.value);
+		},
+		onFocus: () => {
+			(visualRadioGroupRef.current?.querySelector("[role=\"tab\"]"))?.focus();
+		}
+	}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__heroui_radio.RadioGroup, {
+		ref: visualRadioGroupRef,
+		"aria-label": ariaLabel,
+		"data-invalid": invalid,
+		"data-required": required,
+		"data-testid": testId,
+		errorMessage,
+		isDisabled: disabled,
+		isInvalid: invalid,
+		isRequired: required,
+		label: label ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("legend", { children: label }) : null,
+		name: `${name}_radiotabs`,
+		orientation: inline ? "horizontal" : "vertical",
+		classNames: {
+			base: classNames.base,
+			label: classNames.label,
+			wrapper: classNames.wrapper
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__fuf_stack_pixels_Tabs.default, {
+			disabledKeys: disabled ? disabledAllKeys : void 0,
+			onSelectionChange: onChange,
+			selectedKey: value ?? "",
+			tabs: tabOptions,
+			testId,
+			variant,
+			className: {
+				base: classNames.tabBase,
+				cursor: classNames.cursor,
+				panel: classNames.tabPanel,
+				tab: classNames.tab,
+				tabContent: classNames.tabContent,
+				tabList: classNames.tabList,
+				tabWrapper: classNames.tabWrapper
+			}
+		})
+	})] });
+};
+var RadioTabs_default = RadioTabs;
+
+//#endregion
+//#region src/RadioTabs/index.ts
+var RadioTabs_default$1 = RadioTabs_default;
+
+//#endregion
+Object.defineProperty(exports, 'RadioTabs_default', {
+  enumerable: true,
+  get: function () {
+    return RadioTabs_default$1;
+  }
+});
+Object.defineProperty(exports, 'RadioTabs_default$1', {
+  enumerable: true,
+  get: function () {
+    return RadioTabs_default;
+  }
+});
+//# sourceMappingURL=RadioTabs-DcEUdW7r.cjs.map

package/dist/RadioTabs-DcEUdW7r.cjs.map

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

package/dist/Radios/index.cjs

@@ -1,19 +1,5 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+Object.defineProperty(exports, '__esModule', { value: true });
+const require_Radios = require('../Radios-CIPNqPzi.cjs');
 
-
-var _chunk55VJM3KDcjs = require('../chunk-55VJM3KD.cjs');
-require('../chunk-V3M7HL26.cjs');
-require('../chunk-OE5BOGGX.cjs');
-require('../chunk-NHEZXA4H.cjs');
-require('../chunk-6AWHOBNL.cjs');
-require('../chunk-PCTYJUY7.cjs');
-require('../chunk-56TQOKG7.cjs');
-require('../chunk-FYN7ZWLW.cjs');
-require('../chunk-AQJLKHAE.cjs');
-require('../chunk-OKJWLH7T.cjs');
-require('../chunk-555JRYCS.cjs');
-
-
-
-exports.Radios = _chunk55VJM3KDcjs.Radios_default; exports.default = _chunk55VJM3KDcjs.Radios_default2;
-//# sourceMappingURL=index.cjs.map
+exports.Radios = require_Radios.Radios_default$1;
+exports.default = require_Radios.Radios_default;

package/dist/Radios/index.d.cts

@@ -1,9 +1,2 @@
-import { R as Radios } from '../Radios-lLVlvY_B.cjs';
-export { a as RadiosProps } from '../Radios-lLVlvY_B.cjs';
-import 'tailwind-variants';
-import '@fuf-stack/pixel-utils';
-import 'react';
-
-
-
-export { Radios, Radios as default };
+import { n as RadiosProps, t as Radios } from "../index-DA5um0u6.cjs";
+export { Radios, Radios as default, RadiosProps };

package/dist/Radios/index.d.ts

@@ -1,9 +1,2 @@
-import { R as Radios } from '../Radios-lLVlvY_B.js';
-export { a as RadiosProps } from '../Radios-lLVlvY_B.js';
-import 'tailwind-variants';
-import '@fuf-stack/pixel-utils';
-import 'react';
-
-
-
-export { Radios, Radios as default };
+import { n as RadiosProps, t as Radios } from "../index-C1fYmoY0.js";
+export { Radios, Radios as default, RadiosProps };