@fuf-stack/uniform 1.4.1 → 1.4.2

package/dist/RadioTabs/index.cjs

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

package/dist/RadioTabs/index.js

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

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

@@ -31,7 +31,7 @@ var radioTabsVariants = tv({
   variants: {
     hasContent: {
       true: {
-        base: "p-1",
+        base: "",
         tabBase: "p-1 pb-0",
         tabWrapper: [
           // border style
@@ -143,4 +143,4 @@ export {
   RadioTabs_default,
   RadioTabs_default2
 };
-//# sourceMappingURL=chunk-JSQ77E6L.js.map
+//# sourceMappingURL=chunk-C52NGPIF.js.map

package/dist/chunk-C52NGPIF.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: '',\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-ORQO6JXK.cjs → chunk-YEKHVKS3.cjs}

@@ -31,7 +31,7 @@ var radioTabsVariants = _pixelutils.tv.call(void 0, {
   variants: {
     hasContent: {
       true: {
-        base: "p-1",
+        base: "",
         tabBase: "p-1 pb-0",
         tabWrapper: [
           // border style
@@ -143,4 +143,4 @@ var RadioTabs_default2 = RadioTabs_default;
 
 
 exports.RadioTabs_default = RadioTabs_default; exports.RadioTabs_default2 = RadioTabs_default2;
-//# sourceMappingURL=chunk-ORQO6JXK.cjs.map
+//# sourceMappingURL=chunk-YEKHVKS3.cjs.map

package/dist/chunk-YEKHVKS3.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-YEKHVKS3.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-YEKHVKS3.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: '',\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 _chunkORQO6JXKcjs = require('./chunk-ORQO6JXK.cjs');
+var _chunkYEKHVKS3cjs = require('./chunk-YEKHVKS3.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 = _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;
+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 = _chunkYEKHVKS3cjs.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.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fuf-stack/uniform",
-  "version": "1.4.1",
+  "version": "1.4.2",
   "description": "fuf react form library",
   "author": "Fröhlich ∧ Frei",
   "homepage": "https://github.com/fuf-stack/pixels#readme",
@@ -143,9 +143,9 @@
     "react-icons": "5.5.0",
     "react-hook-form": "7.55.0",
     "react-select": "5.10.2",
-    "@fuf-stack/pixels": "1.3.6",
     "@fuf-stack/pixel-utils": "1.0.5",
-    "@fuf-stack/veto": "0.12.6"
+    "@fuf-stack/veto": "0.12.6",
+    "@fuf-stack/pixels": "1.3.6"
   },
   "devDependencies": {
     "@types/debug": "4.1.12",

package/dist/chunk-JSQ77E6L.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    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-ORQO6JXK.cjs.map

@@ -1 +0,0 @@
-{"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"]}