@fuf-stack/uniform 1.3.1 → 1.4.1

package/dist/RadioTabs/index.cjs

@@ -1,7 +1,7 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
 
-var _chunkVPTOKYJGcjs = require('../chunk-VPTOKYJG.cjs');
+var _chunkORQO6JXKcjs = require('../chunk-ORQO6JXK.cjs');
 require('../chunk-OE5BOGGX.cjs');
 require('../chunk-Y3AB4GV6.cjs');
 require('../chunk-2GYFDVXX.cjs');
@@ -12,5 +12,5 @@ require('../chunk-555JRYCS.cjs');
 
 
 
-exports.RadioTabs = _chunkVPTOKYJGcjs.RadioTabs_default; exports.default = _chunkVPTOKYJGcjs.RadioTabs_default2;
+exports.RadioTabs = _chunkORQO6JXKcjs.RadioTabs_default; exports.default = _chunkORQO6JXKcjs.RadioTabs_default2;
 //# sourceMappingURL=index.cjs.map

package/dist/RadioTabs/index.d.cts

@@ -1,5 +1,5 @@
-import { R as RadioTabs } from '../RadioTabs-8Gn71LRW.cjs';
-export { a as RadioTabsProps } from '../RadioTabs-8Gn71LRW.cjs';
+import { R as RadioTabs } from '../RadioTabs-BCWW3tru.cjs';
+export { a as RadioTabsProps } from '../RadioTabs-BCWW3tru.cjs';
 import 'tailwind-variants';
 import '@fuf-stack/pixel-utils';
 import '@fuf-stack/pixels';

package/dist/RadioTabs/index.d.ts

@@ -1,5 +1,5 @@
-import { R as RadioTabs } from '../RadioTabs-8Gn71LRW.js';
-export { a as RadioTabsProps } from '../RadioTabs-8Gn71LRW.js';
+import { R as RadioTabs } from '../RadioTabs-BCWW3tru.js';
+export { a as RadioTabsProps } from '../RadioTabs-BCWW3tru.js';
 import 'tailwind-variants';
 import '@fuf-stack/pixel-utils';
 import '@fuf-stack/pixels';

package/dist/RadioTabs/index.js

@@ -1,7 +1,7 @@
 import {
   RadioTabs_default,
   RadioTabs_default2
-} from "../chunk-PF4NU4QW.js";
+} from "../chunk-JSQ77E6L.js";
 import "../chunk-NTDKZW4E.js";
 import "../chunk-CQWA2DFV.js";
 import "../chunk-IYDCKENI.js";

package/dist/{RadioTabs-8Gn71LRW.d.cts → RadioTabs-BCWW3tru.d.cts}

@@ -4,71 +4,77 @@ import { TabsProps } from '@fuf-stack/pixels';
 import { ReactNode, ReactElement } from 'react';
 
 declare const radioTabsVariants: tailwind_variants.TVReturnType<{
-    [key: string]: {
-        [key: string]: tailwind_variants.ClassValue | {
-            base?: tailwind_variants.ClassValue;
-            label?: tailwind_variants.ClassValue;
-            tab?: tailwind_variants.ClassValue;
-            wrapper?: tailwind_variants.ClassValue;
-            cursor?: tailwind_variants.ClassValue;
-            panel?: tailwind_variants.ClassValue;
-            tabContent?: tailwind_variants.ClassValue;
-            tabList?: tailwind_variants.ClassValue;
+    hasContent: {
+        true: {
+            base: string;
+            tabBase: string;
+            tabWrapper: string[];
         };
     };
-} | {
-    [x: string]: {
-        [x: string]: tailwind_variants.ClassValue | {
-            base?: tailwind_variants.ClassValue;
-            label?: tailwind_variants.ClassValue;
-            tab?: tailwind_variants.ClassValue;
-            wrapper?: tailwind_variants.ClassValue;
-            cursor?: tailwind_variants.ClassValue;
-            panel?: tailwind_variants.ClassValue;
-            tabContent?: tailwind_variants.ClassValue;
-            tabList?: tailwind_variants.ClassValue;
+    fullWidth: {
+        true: {
+            tabWrapper: string;
         };
     };
-} | {}, {
+}, {
     base: string;
+    cursor: string;
     label: string;
-    wrapper: string;
-    tabList: string;
     tab: string;
+    tabBase: string;
     tabContent: string;
-    cursor: string;
-    panel: string;
+    tabList: string;
+    tabPanel: string;
+    tabWrapper: string;
+    wrapper: string;
 }, undefined, {
-    [key: string]: {
-        [key: string]: tailwind_variants.ClassValue | {
-            base?: tailwind_variants.ClassValue;
-            label?: tailwind_variants.ClassValue;
-            tab?: tailwind_variants.ClassValue;
-            wrapper?: tailwind_variants.ClassValue;
-            cursor?: tailwind_variants.ClassValue;
-            panel?: tailwind_variants.ClassValue;
-            tabContent?: tailwind_variants.ClassValue;
-            tabList?: tailwind_variants.ClassValue;
+    hasContent: {
+        true: {
+            base: string;
+            tabBase: string;
+            tabWrapper: string[];
         };
     };
-} | {}, {
+    fullWidth: {
+        true: {
+            tabWrapper: string;
+        };
+    };
+}, {
     base: string;
+    cursor: string;
     label: string;
-    wrapper: string;
-    tabList: string;
     tab: string;
+    tabBase: string;
     tabContent: string;
-    cursor: string;
-    panel: string;
-}, tailwind_variants.TVReturnType<unknown, {
+    tabList: string;
+    tabPanel: string;
+    tabWrapper: string;
+    wrapper: string;
+}, tailwind_variants.TVReturnType<{
+    hasContent: {
+        true: {
+            base: string;
+            tabBase: string;
+            tabWrapper: string[];
+        };
+    };
+    fullWidth: {
+        true: {
+            tabWrapper: string;
+        };
+    };
+}, {
     base: string;
+    cursor: string;
     label: string;
-    wrapper: string;
-    tabList: string;
     tab: string;
+    tabBase: string;
     tabContent: string;
-    cursor: string;
-    panel: string;
+    tabList: string;
+    tabPanel: string;
+    tabWrapper: string;
+    wrapper: string;
 }, undefined, unknown, unknown, undefined>>;
 type VariantProps = TVProps<typeof radioTabsVariants>;
 type ClassName = TVClassName<typeof radioTabsVariants>;
@@ -86,11 +92,13 @@ interface RadioTabsOption {
     /** option value */
     value: string;
 }
-interface RadioTabsProps extends VariantProps {
+interface RadioTabsProps extends Omit<VariantProps, 'hasContent'> {
     /** CSS class name */
     className?: ClassName;
     /** Determines if the Buttons are disabled or not. */
     disabled?: boolean;
+    /** Whether tabs should take up full container width */
+    fullWidth?: boolean;
     /** determines orientation of the Buttons. */
     inline?: boolean;
     /** Label displayed next to the RadioButton. */
@@ -108,6 +116,6 @@ interface RadioTabsProps extends VariantProps {
  * RadioTabs component based on [HeroUI RadioGroup](https://www.heroui.com//docs/components/radio-group)
  * and [HeroUI Tabs](https://www.heroui.com//docs/components/tabs)
  */
-declare const RadioTabs: ({ className, disabled, inline, label, name, options, testId: _testId, variant, }: RadioTabsProps) => ReactElement;
+declare const RadioTabs: ({ className, disabled, fullWidth, inline, label, name, options, testId: _testId, variant, }: RadioTabsProps) => ReactElement;
 
 export { RadioTabs as R, type RadioTabsProps as a };

package/dist/{RadioTabs-8Gn71LRW.d.ts → RadioTabs-BCWW3tru.d.ts}

@@ -4,71 +4,77 @@ import { TabsProps } from '@fuf-stack/pixels';
 import { ReactNode, ReactElement } from 'react';
 
 declare const radioTabsVariants: tailwind_variants.TVReturnType<{
-    [key: string]: {
-        [key: string]: tailwind_variants.ClassValue | {
-            base?: tailwind_variants.ClassValue;
-            label?: tailwind_variants.ClassValue;
-            tab?: tailwind_variants.ClassValue;
-            wrapper?: tailwind_variants.ClassValue;
-            cursor?: tailwind_variants.ClassValue;
-            panel?: tailwind_variants.ClassValue;
-            tabContent?: tailwind_variants.ClassValue;
-            tabList?: tailwind_variants.ClassValue;
+    hasContent: {
+        true: {
+            base: string;
+            tabBase: string;
+            tabWrapper: string[];
         };
     };
-} | {
-    [x: string]: {
-        [x: string]: tailwind_variants.ClassValue | {
-            base?: tailwind_variants.ClassValue;
-            label?: tailwind_variants.ClassValue;
-            tab?: tailwind_variants.ClassValue;
-            wrapper?: tailwind_variants.ClassValue;
-            cursor?: tailwind_variants.ClassValue;
-            panel?: tailwind_variants.ClassValue;
-            tabContent?: tailwind_variants.ClassValue;
-            tabList?: tailwind_variants.ClassValue;
+    fullWidth: {
+        true: {
+            tabWrapper: string;
         };
     };
-} | {}, {
+}, {
     base: string;
+    cursor: string;
     label: string;
-    wrapper: string;
-    tabList: string;
     tab: string;
+    tabBase: string;
     tabContent: string;
-    cursor: string;
-    panel: string;
+    tabList: string;
+    tabPanel: string;
+    tabWrapper: string;
+    wrapper: string;
 }, undefined, {
-    [key: string]: {
-        [key: string]: tailwind_variants.ClassValue | {
-            base?: tailwind_variants.ClassValue;
-            label?: tailwind_variants.ClassValue;
-            tab?: tailwind_variants.ClassValue;
-            wrapper?: tailwind_variants.ClassValue;
-            cursor?: tailwind_variants.ClassValue;
-            panel?: tailwind_variants.ClassValue;
-            tabContent?: tailwind_variants.ClassValue;
-            tabList?: tailwind_variants.ClassValue;
+    hasContent: {
+        true: {
+            base: string;
+            tabBase: string;
+            tabWrapper: string[];
         };
     };
-} | {}, {
+    fullWidth: {
+        true: {
+            tabWrapper: string;
+        };
+    };
+}, {
     base: string;
+    cursor: string;
     label: string;
-    wrapper: string;
-    tabList: string;
     tab: string;
+    tabBase: string;
     tabContent: string;
-    cursor: string;
-    panel: string;
-}, tailwind_variants.TVReturnType<unknown, {
+    tabList: string;
+    tabPanel: string;
+    tabWrapper: string;
+    wrapper: string;
+}, tailwind_variants.TVReturnType<{
+    hasContent: {
+        true: {
+            base: string;
+            tabBase: string;
+            tabWrapper: string[];
+        };
+    };
+    fullWidth: {
+        true: {
+            tabWrapper: string;
+        };
+    };
+}, {
     base: string;
+    cursor: string;
     label: string;
-    wrapper: string;
-    tabList: string;
     tab: string;
+    tabBase: string;
     tabContent: string;
-    cursor: string;
-    panel: string;
+    tabList: string;
+    tabPanel: string;
+    tabWrapper: string;
+    wrapper: string;
 }, undefined, unknown, unknown, undefined>>;
 type VariantProps = TVProps<typeof radioTabsVariants>;
 type ClassName = TVClassName<typeof radioTabsVariants>;
@@ -86,11 +92,13 @@ interface RadioTabsOption {
     /** option value */
     value: string;
 }
-interface RadioTabsProps extends VariantProps {
+interface RadioTabsProps extends Omit<VariantProps, 'hasContent'> {
     /** CSS class name */
     className?: ClassName;
     /** Determines if the Buttons are disabled or not. */
     disabled?: boolean;
+    /** Whether tabs should take up full container width */
+    fullWidth?: boolean;
     /** determines orientation of the Buttons. */
     inline?: boolean;
     /** Label displayed next to the RadioButton. */
@@ -108,6 +116,6 @@ interface RadioTabsProps extends VariantProps {
  * RadioTabs component based on [HeroUI RadioGroup](https://www.heroui.com//docs/components/radio-group)
  * and [HeroUI Tabs](https://www.heroui.com//docs/components/tabs)
  */
-declare const RadioTabs: ({ className, disabled, inline, label, name, options, testId: _testId, variant, }: RadioTabsProps) => ReactElement;
+declare const RadioTabs: ({ className, disabled, fullWidth, inline, label, name, options, testId: _testId, variant, }: RadioTabsProps) => ReactElement;
 
 export { RadioTabs as R, type RadioTabsProps as a };

package/dist/{chunk-PF4NU4QW.js → chunk-JSQ77E6L.js}

@@ -18,18 +18,40 @@ var radioTabsVariants = tv({
   slots: {
     base: "group",
     // Needs group for group-data condition
+    cursor: "",
     label: "text-foreground group-data-[invalid=true]:text-danger text-sm subpixel-antialiased",
-    wrapper: "",
-    tabList: "",
     tab: "",
+    tabBase: "",
     tabContent: "",
-    cursor: "",
-    panel: ""
+    tabList: "",
+    tabPanel: "p-3",
+    tabWrapper: "",
+    wrapper: ""
+  },
+  variants: {
+    hasContent: {
+      true: {
+        base: "p-1",
+        tabBase: "p-1 pb-0",
+        tabWrapper: [
+          // border style
+          "border-divider rounded-medium border",
+          // full width
+          "w-full"
+        ]
+      }
+    },
+    fullWidth: {
+      true: {
+        tabWrapper: "w-full"
+      }
+    }
   }
 });
 var RadioTabs = ({
   className = void 0,
   disabled = false,
+  fullWidth = false,
   inline = false,
   label = void 0,
   name,
@@ -43,7 +65,10 @@ var RadioTabs = ({
   const { disabled: isDisabled, onBlur, onChange, ref, value } = field;
   const showTestIdCopyButton = debugMode === "debug-testids";
   const showLabel = label != null ? label : showTestIdCopyButton;
-  const variants = radioTabsVariants();
+  const hasContent = options.some((option) => {
+    return option.content;
+  });
+  const variants = radioTabsVariants({ hasContent, fullWidth });
   const classNames = variantsToClassNames(variants, className, "base");
   const tabOptions = options.map((option) => {
     var _a, _b;
@@ -64,7 +89,6 @@ var RadioTabs = ({
     HeroRadioGroup,
     {
       ref,
-      classNames,
       "data-invalid": invalid,
       "data-required": required,
       "data-testid": testId,
@@ -74,6 +98,11 @@ var RadioTabs = ({
       name,
       onBlur,
       orientation: inline ? "horizontal" : "vertical",
+      classNames: {
+        base: classNames.base,
+        label: classNames.label,
+        wrapper: classNames.wrapper
+      },
       errorMessage: error ? /* @__PURE__ */ jsx(FieldValidationError_default, { error, testId }) : void 0,
       label: showLabel ? (
         // eslint-disable-next-line jsx-a11y/label-has-associated-control
@@ -86,12 +115,20 @@ var RadioTabs = ({
         Tabs,
         {
           disabledKeys: disabled ? disabledAllKeys : void 0,
-          fullWidth: false,
           onSelectionChange: onChange,
           selectedKey: value != null ? value : "",
           tabs: tabOptions,
           testId,
-          variant
+          variant,
+          className: {
+            base: classNames.tabBase,
+            cursor: classNames.cursor,
+            panel: classNames.tabPanel,
+            tab: classNames.tab,
+            tabContent: classNames.tabContent,
+            tabList: classNames.tabList,
+            tabWrapper: classNames.tabWrapper
+          }
         }
       )
     }
@@ -106,4 +143,4 @@ export {
   RadioTabs_default,
   RadioTabs_default2
 };
-//# sourceMappingURL=chunk-PF4NU4QW.js.map
+//# sourceMappingURL=chunk-JSQ77E6L.js.map

package/dist/chunk-JSQ77E6L.js.map

@@ -0,0 +1 @@
+{"version":3,"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 { 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 { useController, useFormContext } from '../hooks';\nimport { FieldCopyTestIdButton } from '../partials/FieldCopyTestIdButton';\nimport { FieldValidationError } from '../partials/FieldValidationError';\n\nexport const radioTabsVariants = tv({\n  slots: {\n    base: 'group', // Needs group for group-data condition\n    cursor: '',\n    label:\n      'text-foreground group-data-[invalid=true]:text-danger 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: 'p-1',\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  disabled = false,\n  fullWidth = false,\n  inline = false,\n  label = undefined,\n  name,\n  options,\n  testId: _testId = undefined,\n  variant = undefined,\n}: RadioTabsProps): ReactElement => {\n  const { control, debugMode, getFieldState } = useFormContext();\n  const { error, invalid, required, testId } = getFieldState(name, _testId);\n\n  const { field } = useController({ control, disabled, name });\n  const { disabled: isDisabled, onBlur, onChange, ref, value } = field;\n\n  const showTestIdCopyButton = debugMode === 'debug-testids';\n  const showLabel = label ?? showTestIdCopyButton;\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  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  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      isDisabled={isDisabled}\n      isInvalid={invalid}\n      isRequired={required}\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      errorMessage={\n        error ? (\n          <FieldValidationError error={error} testId={testId} />\n        ) : undefined\n      }\n      label={\n        showLabel ? (\n          // eslint-disable-next-line jsx-a11y/label-has-associated-control\n          <label>\n            {label}\n            {showTestIdCopyButton ? (\n              <FieldCopyTestIdButton testId={testId} />\n            ) : null}\n          </label>\n        ) : undefined\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"],"mappings":"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","names":["RadioTabs_default"]}

package/dist/{chunk-VPTOKYJG.cjs → chunk-ORQO6JXK.cjs}

@@ -18,18 +18,40 @@ var radioTabsVariants = _pixelutils.tv.call(void 0, {
   slots: {
     base: "group",
     // Needs group for group-data condition
+    cursor: "",
     label: "text-foreground group-data-[invalid=true]:text-danger text-sm subpixel-antialiased",
-    wrapper: "",
-    tabList: "",
     tab: "",
+    tabBase: "",
     tabContent: "",
-    cursor: "",
-    panel: ""
+    tabList: "",
+    tabPanel: "p-3",
+    tabWrapper: "",
+    wrapper: ""
+  },
+  variants: {
+    hasContent: {
+      true: {
+        base: "p-1",
+        tabBase: "p-1 pb-0",
+        tabWrapper: [
+          // border style
+          "border-divider rounded-medium border",
+          // full width
+          "w-full"
+        ]
+      }
+    },
+    fullWidth: {
+      true: {
+        tabWrapper: "w-full"
+      }
+    }
   }
 });
 var RadioTabs = ({
   className = void 0,
   disabled = false,
+  fullWidth = false,
   inline = false,
   label = void 0,
   name,
@@ -43,7 +65,10 @@ var RadioTabs = ({
   const { disabled: isDisabled, onBlur, onChange, ref, value } = field;
   const showTestIdCopyButton = debugMode === "debug-testids";
   const showLabel = label != null ? label : showTestIdCopyButton;
-  const variants = radioTabsVariants();
+  const hasContent = options.some((option) => {
+    return option.content;
+  });
+  const variants = radioTabsVariants({ hasContent, fullWidth });
   const classNames = _pixelutils.variantsToClassNames.call(void 0, variants, className, "base");
   const tabOptions = options.map((option) => {
     var _a, _b;
@@ -64,7 +89,6 @@ var RadioTabs = ({
     _radio.RadioGroup,
     {
       ref,
-      classNames,
       "data-invalid": invalid,
       "data-required": required,
       "data-testid": testId,
@@ -74,6 +98,11 @@ var RadioTabs = ({
       name,
       onBlur,
       orientation: inline ? "horizontal" : "vertical",
+      classNames: {
+        base: classNames.base,
+        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
@@ -86,12 +115,20 @@ var RadioTabs = ({
         _Tabs2.default,
         {
           disabledKeys: disabled ? disabledAllKeys : void 0,
-          fullWidth: false,
           onSelectionChange: onChange,
           selectedKey: value != null ? value : "",
           tabs: tabOptions,
           testId,
-          variant
+          variant,
+          className: {
+            base: classNames.tabBase,
+            cursor: classNames.cursor,
+            panel: classNames.tabPanel,
+            tab: classNames.tab,
+            tabContent: classNames.tabContent,
+            tabList: classNames.tabList,
+            tabWrapper: classNames.tabWrapper
+          }
         }
       )
     }
@@ -106,4 +143,4 @@ var RadioTabs_default2 = RadioTabs_default;
 
 
 exports.RadioTabs_default = RadioTabs_default; exports.RadioTabs_default2 = RadioTabs_default2;
-//# sourceMappingURL=chunk-VPTOKYJG.cjs.map
+//# sourceMappingURL=chunk-ORQO6JXK.cjs.map

package/dist/chunk-ORQO6JXK.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-ORQO6JXK.cjs","../src/RadioTabs/RadioTabs.tsx","../src/RadioTabs/index.ts"],"names":[],"mappings":"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","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-ORQO6JXK.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 { useController, useFormContext } from '../hooks';\nimport { FieldCopyTestIdButton } from '../partials/FieldCopyTestIdButton';\nimport { FieldValidationError } from '../partials/FieldValidationError';\n\nexport const radioTabsVariants = tv({\n  slots: {\n    base: 'group', // Needs group for group-data condition\n    cursor: '',\n    label:\n      'text-foreground group-data-[invalid=true]:text-danger 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: 'p-1',\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  disabled = false,\n  fullWidth = false,\n  inline = false,\n  label = undefined,\n  name,\n  options,\n  testId: _testId = undefined,\n  variant = undefined,\n}: RadioTabsProps): ReactElement => {\n  const { control, debugMode, getFieldState } = useFormContext();\n  const { error, invalid, required, testId } = getFieldState(name, _testId);\n\n  const { field } = useController({ control, disabled, name });\n  const { disabled: isDisabled, onBlur, onChange, ref, value } = field;\n\n  const showTestIdCopyButton = debugMode === 'debug-testids';\n  const showLabel = label ?? showTestIdCopyButton;\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  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  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      isDisabled={isDisabled}\n      isInvalid={invalid}\n      isRequired={required}\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      errorMessage={\n        error ? (\n          <FieldValidationError error={error} testId={testId} />\n        ) : undefined\n      }\n      label={\n        showLabel ? (\n          // eslint-disable-next-line jsx-a11y/label-has-associated-control\n          <label>\n            {label}\n            {showTestIdCopyButton ? (\n              <FieldCopyTestIdButton testId={testId} />\n            ) : null}\n          </label>\n        ) : undefined\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/index.cjs

@@ -1,6 +1,6 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkVPTOKYJGcjs = require('./chunk-VPTOKYJG.cjs');
+var _chunkORQO6JXKcjs = require('./chunk-ORQO6JXK.cjs');
 
 
 var _chunkAYNTZPKLcjs = require('./chunk-AYNTZPKL.cjs');
@@ -88,5 +88,5 @@ require('./chunk-555JRYCS.cjs');
 
 
 
-exports.CheckboxGroup = _chunkN2EEOWEPcjs.CheckboxGroup_default; exports.FieldArray = _chunkJZF4HUYOcjs.FieldArray_default; exports.FieldCopyTestIdButton = _chunkOE5BOGGXcjs.FieldCopyTestIdButton_default; exports.FieldValidationError = _chunkY3AB4GV6cjs.FieldValidationError_default; exports.Form = _chunkFOVP54XPcjs.Form_default; exports.Grid = _chunkTTD3KL6Ecjs.Grid_default; exports.Input = _chunk77C6VN4Lcjs.Input_default; exports.RadioBoxes = _chunkULR4573Wcjs.RadioBoxes_default; exports.RadioGroup = _chunkEEBHFSBYcjs.RadioGroup_default; exports.RadioTabs = _chunkVPTOKYJGcjs.RadioTabs_default; exports.Select = _chunkAYNTZPKLcjs.Select_default; exports.SubmitButton = _chunkC64RKQEWcjs.SubmitButton_default; exports.Switch = _chunkUGCZORU3cjs.Switch_default; exports.TextArea = _chunkRDBCJJI7cjs.TextArea_default; exports.checkFieldIsRequired = _chunk2GYFDVXXcjs.checkFieldIsRequired; exports.fromNullishString = _chunkYGNY6CKUcjs.fromNullishString; exports.toFormFormat = _chunkYGNY6CKUcjs.toFormFormat; exports.toNullishString = _chunkYGNY6CKUcjs.toNullishString; exports.toValidationFormat = _chunkYGNY6CKUcjs.toValidationFormat; exports.useClientValidation = _chunk2GYFDVXXcjs.useClientValidation; exports.useController = _chunk2GYFDVXXcjs.useController; exports.useFieldArray = _chunk2GYFDVXXcjs.useFieldArray; exports.useFormContext = _chunk2GYFDVXXcjs.useFormContext; exports.useInput = _chunk2GYFDVXXcjs.useInput; exports.useInputValueDebounce = _chunkFLK6OPFYcjs.useInputValueDebounce; exports.useInputValueTransform = _chunkP6HJOG7Dcjs.useInputValueTransform;
+exports.CheckboxGroup = _chunkN2EEOWEPcjs.CheckboxGroup_default; exports.FieldArray = _chunkJZF4HUYOcjs.FieldArray_default; exports.FieldCopyTestIdButton = _chunkOE5BOGGXcjs.FieldCopyTestIdButton_default; exports.FieldValidationError = _chunkY3AB4GV6cjs.FieldValidationError_default; exports.Form = _chunkFOVP54XPcjs.Form_default; exports.Grid = _chunkTTD3KL6Ecjs.Grid_default; exports.Input = _chunk77C6VN4Lcjs.Input_default; exports.RadioBoxes = _chunkULR4573Wcjs.RadioBoxes_default; exports.RadioGroup = _chunkEEBHFSBYcjs.RadioGroup_default; exports.RadioTabs = _chunkORQO6JXKcjs.RadioTabs_default; exports.Select = _chunkAYNTZPKLcjs.Select_default; exports.SubmitButton = _chunkC64RKQEWcjs.SubmitButton_default; exports.Switch = _chunkUGCZORU3cjs.Switch_default; exports.TextArea = _chunkRDBCJJI7cjs.TextArea_default; exports.checkFieldIsRequired = _chunk2GYFDVXXcjs.checkFieldIsRequired; exports.fromNullishString = _chunkYGNY6CKUcjs.fromNullishString; exports.toFormFormat = _chunkYGNY6CKUcjs.toFormFormat; exports.toNullishString = _chunkYGNY6CKUcjs.toNullishString; exports.toValidationFormat = _chunkYGNY6CKUcjs.toValidationFormat; exports.useClientValidation = _chunk2GYFDVXXcjs.useClientValidation; exports.useController = _chunk2GYFDVXXcjs.useController; exports.useFieldArray = _chunk2GYFDVXXcjs.useFieldArray; exports.useFormContext = _chunk2GYFDVXXcjs.useFormContext; exports.useInput = _chunk2GYFDVXXcjs.useInput; exports.useInputValueDebounce = _chunkFLK6OPFYcjs.useInputValueDebounce; exports.useInputValueTransform = _chunkP6HJOG7Dcjs.useInputValueTransform;
 //# sourceMappingURL=index.cjs.map

package/dist/index.d.cts

@@ -13,7 +13,7 @@ export { F as FieldCopyTestIdButton, a as FieldCopyTestIdButtonProps } from './F
 export { F as FieldValidationError, a as FieldValidationErrorProps } from './FieldValidationError-CU_xw0BL.cjs';
 export { R as RadioBoxes, a as RadioBoxesProps } from './RadioBoxes-CE3mYoFk.cjs';
 export { R as RadioGroup, a as RadioGroupProps } from './RadioGroup-CAOX80Xx.cjs';
-export { R as RadioTabs, a as RadioTabsProps } from './RadioTabs-8Gn71LRW.cjs';
+export { R as RadioTabs, a as RadioTabsProps } from './RadioTabs-BCWW3tru.cjs';
 export { S as Select, a as SelectProps } from './Select-CTRWinmO.cjs';
 export { S as SubmitButton, a as SubmitButtonProps } from './SubmitButton-DqaxyVpp.cjs';
 export { S as Switch, a as SwitchProps } from './Switch-Hr6PnK98.cjs';

package/dist/index.d.ts

@@ -13,7 +13,7 @@ export { F as FieldCopyTestIdButton, a as FieldCopyTestIdButtonProps } from './F
 export { F as FieldValidationError, a as FieldValidationErrorProps } from './FieldValidationError-CU_xw0BL.js';
 export { R as RadioBoxes, a as RadioBoxesProps } from './RadioBoxes-CE3mYoFk.js';
 export { R as RadioGroup, a as RadioGroupProps } from './RadioGroup-CAOX80Xx.js';
-export { R as RadioTabs, a as RadioTabsProps } from './RadioTabs-8Gn71LRW.js';
+export { R as RadioTabs, a as RadioTabsProps } from './RadioTabs-BCWW3tru.js';
 export { S as Select, a as SelectProps } from './Select-CTRWinmO.js';
 export { S as SubmitButton, a as SubmitButtonProps } from './SubmitButton-DqaxyVpp.js';
 export { S as Switch, a as SwitchProps } from './Switch-Hr6PnK98.js';

package/dist/index.js

@@ -1,6 +1,6 @@
 import {
   RadioTabs_default
-} from "./chunk-PF4NU4QW.js";
+} from "./chunk-JSQ77E6L.js";
 import {
   Select_default
 } from "./chunk-FHRMVL6B.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fuf-stack/uniform",
-  "version": "1.3.1",
+  "version": "1.4.1",
   "description": "fuf react form library",
   "author": "Fröhlich ∧ Frei",
   "homepage": "https://github.com/fuf-stack/pixels#readme",
@@ -138,18 +138,18 @@
     "@heroui/switch": "2.2.22",
     "@heroui/system": "2.4.20",
     "@heroui/theme": "2.4.20",
-    "@react-aria/visually-hidden": "3.8.27",
+    "@react-aria/visually-hidden": "3.8.28",
     "framer-motion": "12.23.22",
     "react-icons": "5.5.0",
     "react-hook-form": "7.55.0",
     "react-select": "5.10.2",
     "@fuf-stack/pixels": "1.3.6",
-    "@fuf-stack/veto": "0.12.6",
-    "@fuf-stack/pixel-utils": "1.0.5"
+    "@fuf-stack/pixel-utils": "1.0.5",
+    "@fuf-stack/veto": "0.12.6"
   },
   "devDependencies": {
     "@types/debug": "4.1.12",
-    "@types/react": "19.1.14",
+    "@types/react": "19.1.16",
     "@types/react-dom": "19.1.9",
     "react": "19.1.1",
     "react-dom": "19.1.1"

package/dist/chunk-PF4NU4QW.js.map

@@ -1 +0,0 @@
-{"version":3,"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 { 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 { useController, useFormContext } from '../hooks';\nimport { FieldCopyTestIdButton } from '../partials/FieldCopyTestIdButton';\nimport { FieldValidationError } from '../partials/FieldValidationError';\n\nexport const radioTabsVariants = tv({\n  slots: {\n    base: 'group', // Needs group for group-data condition\n    label:\n      'text-foreground group-data-[invalid=true]:text-danger text-sm subpixel-antialiased',\n    wrapper: '',\n    tabList: '',\n    tab: '',\n    tabContent: '',\n    cursor: '',\n    panel: '',\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 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: 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  disabled = false,\n  inline = false,\n  label = undefined,\n  name,\n  options,\n  testId: _testId = undefined,\n  variant = undefined,\n}: RadioTabsProps): ReactElement => {\n  const { control, debugMode, getFieldState } = useFormContext();\n  const { error, invalid, required, testId } = getFieldState(name, _testId);\n\n  const { field } = useController({ control, disabled, name });\n  const { disabled: isDisabled, onBlur, onChange, ref, value } = field;\n\n  const showTestIdCopyButton = debugMode === 'debug-testids';\n  const showLabel = label ?? showTestIdCopyButton;\n\n  const variants = radioTabsVariants();\n  const classNames = variantsToClassNames(variants, className, 'base');\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  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      isDisabled={isDisabled}\n      isInvalid={invalid}\n      isRequired={required}\n      name={name}\n      onBlur={onBlur}\n      orientation={inline ? 'horizontal' : 'vertical'}\n      errorMessage={\n        error ? (\n          <FieldValidationError error={error} testId={testId} />\n        ) : undefined\n      }\n      label={\n        showLabel ? (\n          // eslint-disable-next-line jsx-a11y/label-has-associated-control\n          <label>\n            {label}\n            {showTestIdCopyButton ? (\n              <FieldCopyTestIdButton testId={testId} />\n            ) : null}\n          </label>\n        ) : undefined\n      }\n    >\n      <Tabs\n        disabledKeys={disabled ? disabledAllKeys : undefined}\n        fullWidth={false}\n        onSelectionChange={onChange}\n        // make sure component is controlled\n        selectedKey={value ?? ''}\n        tabs={tabOptions}\n        testId={testId}\n        variant={variant}\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"],"mappings":";;;;;;;;;;;;AAKA,SAAS,cAAc,sBAAsB;AAE7C,SAAS,SAAS,IAAI,4BAA4B;AAClD,OAAO,UAAU;AAoHP,cAMA,YANA;AA9GH,IAAM,oBAAoB,GAAG;AAAA,EAClC,OAAO;AAAA,IACL,MAAM;AAAA;AAAA,IACN,OACE;AAAA,IACF,SAAS;AAAA,IACT,SAAS;AAAA,IACT,KAAK;AAAA,IACL,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,OAAO;AAAA,EACT;AACF,CAAC;AA2CD,IAAM,YAAY,CAAC;AAAA,EACjB,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,SAAS;AAAA,EACT,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA,QAAQ,UAAU;AAAA,EAClB,UAAU;AACZ,MAAoC;AAClC,QAAM,EAAE,SAAS,WAAW,cAAc,IAAI,eAAe;AAC7D,QAAM,EAAE,OAAO,SAAS,UAAU,OAAO,IAAI,cAAc,MAAM,OAAO;AAExE,QAAM,EAAE,MAAM,IAAI,cAAc,EAAE,SAAS,UAAU,KAAK,CAAC;AAC3D,QAAM,EAAE,UAAU,YAAY,QAAQ,UAAU,KAAK,MAAM,IAAI;AAE/D,QAAM,uBAAuB,cAAc;AAC3C,QAAM,YAAY,wBAAS;AAE3B,QAAM,WAAW,kBAAkB;AACnC,QAAM,aAAa,qBAAqB,UAAU,WAAW,MAAM;AAEnE,QAAM,aAAa,QAAQ,IAAc,CAAC,WAAW;AA3FvD;AA4FI,WAAO;AAAA,MACL,SAAS,iCAAQ;AAAA,MACjB,UAAU,iCAAQ;AAAA,MAClB,KAAK,OAAO;AAAA,MACZ,QAAO,sCAAQ,UAAR,YAAiB,iCAAQ;AAAA,MAChC,QAAQ,QAAQ,WAAU,sCAAQ,WAAR,YAAkB,iCAAQ,KAAK,IAAI;AAAA,QAC3D,aAAa;AAAA,MACf,CAAC;AAAA,IACH;AAAA,EACF,CAAC;AAED,QAAM,kBAAwC,yCAAY,IAAI,CAAC,WAAW;AACxE,WAAO,OAAO;AAAA,EAChB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MAGA,gBAAc;AAAA,MACd,iBAAe;AAAA,MACf,eAAa;AAAA,MACb;AAAA,MACA,WAAW;AAAA,MACX,YAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA,aAAa,SAAS,eAAe;AAAA,MACrC,cACE,QACE,oBAAC,gCAAqB,OAAc,QAAgB,IAClD;AAAA,MAEN,OACE;AAAA;AAAA,QAEE,qBAAC,WACE;AAAA;AAAA,UACA,uBACC,oBAAC,iCAAsB,QAAgB,IACrC;AAAA,WACN;AAAA,UACE;AAAA,MAGN;AAAA,QAAC;AAAA;AAAA,UACC,cAAc,WAAW,kBAAkB;AAAA,UAC3C,WAAW;AAAA,UACX,mBAAmB;AAAA,UAEnB,aAAa,wBAAS;AAAA,UACtB,MAAM;AAAA,UACN;AAAA,UACA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,oBAAQ;;;ACnJf,IAAOA,qBAAQ;","names":["RadioTabs_default"]}

package/dist/chunk-VPTOKYJG.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-VPTOKYJG.cjs","../src/RadioTabs/RadioTabs.tsx","../src/RadioTabs/index.ts"],"names":[],"mappings":"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","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-VPTOKYJG.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 { useController, useFormContext } from '../hooks';\nimport { FieldCopyTestIdButton } from '../partials/FieldCopyTestIdButton';\nimport { FieldValidationError } from '../partials/FieldValidationError';\n\nexport const radioTabsVariants = tv({\n  slots: {\n    base: 'group', // Needs group for group-data condition\n    label:\n      'text-foreground group-data-[invalid=true]:text-danger text-sm subpixel-antialiased',\n    wrapper: '',\n    tabList: '',\n    tab: '',\n    tabContent: '',\n    cursor: '',\n    panel: '',\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 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: 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  disabled = false,\n  inline = false,\n  label = undefined,\n  name,\n  options,\n  testId: _testId = undefined,\n  variant = undefined,\n}: RadioTabsProps): ReactElement => {\n  const { control, debugMode, getFieldState } = useFormContext();\n  const { error, invalid, required, testId } = getFieldState(name, _testId);\n\n  const { field } = useController({ control, disabled, name });\n  const { disabled: isDisabled, onBlur, onChange, ref, value } = field;\n\n  const showTestIdCopyButton = debugMode === 'debug-testids';\n  const showLabel = label ?? showTestIdCopyButton;\n\n  const variants = radioTabsVariants();\n  const classNames = variantsToClassNames(variants, className, 'base');\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  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      isDisabled={isDisabled}\n      isInvalid={invalid}\n      isRequired={required}\n      name={name}\n      onBlur={onBlur}\n      orientation={inline ? 'horizontal' : 'vertical'}\n      errorMessage={\n        error ? (\n          <FieldValidationError error={error} testId={testId} />\n        ) : undefined\n      }\n      label={\n        showLabel ? (\n          // eslint-disable-next-line jsx-a11y/label-has-associated-control\n          <label>\n            {label}\n            {showTestIdCopyButton ? (\n              <FieldCopyTestIdButton testId={testId} />\n            ) : null}\n          </label>\n        ) : undefined\n      }\n    >\n      <Tabs\n        disabledKeys={disabled ? disabledAllKeys : undefined}\n        fullWidth={false}\n        onSelectionChange={onChange}\n        // make sure component is controlled\n        selectedKey={value ?? ''}\n        tabs={tabOptions}\n        testId={testId}\n        variant={variant}\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"]}