@fuf-stack/uniform 0.4.0 → 0.5.0

package/dist/chunk-4IT2WVQK.cjs

@@ -0,0 +1,76 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+var _chunkHT3LKDHXcjs = require('./chunk-HT3LKDHX.cjs');
+
+
+var _chunkQTL5FREEcjs = require('./chunk-QTL5FREE.cjs');
+
+
+var _chunkWQRM7G4Ccjs = require('./chunk-WQRM7G4C.cjs');
+
+// src/TextArea/TextArea.tsx
+var _reacthookform = require('react-hook-form');
+var _input = require('@nextui-org/input');
+var _pixelutils = require('@fuf-stack/pixel-utils');
+var _jsxruntime = require('react/jsx-runtime');
+var TextArea = ({
+  children = null,
+  className = void 0,
+  disabled = false,
+  label = void 0,
+  name,
+  placeholder = " ",
+  testId: _testId = void 0
+}) => {
+  const { control, getFieldState } = _chunkWQRM7G4Ccjs.useFormContext.call(void 0, );
+  const { error, invalid, required, testId } = getFieldState(name, _testId);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _reacthookform.Controller,
+    {
+      control,
+      name,
+      disabled,
+      render: ({
+        field: { disabled: isDisabled, onChange, onBlur, value, ref }
+      }) => {
+        return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _input.Textarea,
+          {
+            className: _pixelutils.cn.call(void 0, className),
+            classNames: {
+              inputWrapper: "group-data-[focus=true]:border-primary"
+            },
+            "data-testid": testId,
+            errorMessage: error && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkQTL5FREEcjs.FieldValidationError_default, { error }),
+            isDisabled,
+            isRequired: required,
+            isInvalid: invalid,
+            label: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+              label,
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHT3LKDHXcjs.FieldCopyTestIdButton_default, { testId })
+            ] }),
+            labelPlacement: "outside",
+            placeholder,
+            name,
+            value,
+            onChange,
+            onBlur,
+            ref,
+            variant: "bordered",
+            children
+          }
+        );
+      }
+    }
+  );
+};
+var TextArea_default = TextArea;
+
+// src/TextArea/index.ts
+var TextArea_default2 = TextArea_default;
+
+
+
+
+exports.TextArea_default = TextArea_default; exports.TextArea_default2 = TextArea_default2;
+//# sourceMappingURL=chunk-4IT2WVQK.cjs.map

package/dist/chunk-4IT2WVQK.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/TextArea/TextArea.tsx","../src/TextArea/index.ts"],"names":["TextArea_default"],"mappings":";;;;;;;;;;;AAEA,SAAS,kBAAkB;AAE3B,SAAS,YAAY,oBAAoB;AAEzC,SAAS,UAAU;AAqDgB,SAKrB,UALqB,KAKrB,YALqB;AA3BnC,IAAM,WAAW,CAAC;AAAA,EAChB,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,QAAQ;AAAA,EACR;AAAA,EACA,cAAc;AAAA,EACd,QAAQ,UAAU;AACpB,MAAqB;AACnB,QAAM,EAAE,SAAS,cAAc,IAAI,eAAe;AAClD,QAAM,EAAE,OAAO,SAAS,UAAU,OAAO,IAAI,cAAc,MAAM,OAAO;AAExE,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ,CAAC;AAAA,QACP,OAAO,EAAE,UAAU,YAAY,UAAU,QAAQ,OAAO,IAAI;AAAA,MAC9D,MAAM;AACJ,eACE;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,GAAG,SAAS;AAAA,YACvB,YAAY;AAAA,cACV,cAAc;AAAA,YAChB;AAAA,YACA,eAAa;AAAA,YACb,cAAc,SAAS,oBAAC,gCAAqB,OAAc;AAAA,YAC3D;AAAA,YACA,YAAY;AAAA,YACZ,WAAW;AAAA,YACX,OACE,iCACG;AAAA;AAAA,cACD,oBAAC,iCAAsB,QAAgB;AAAA,eACzC;AAAA,YAEF,gBAAe;AAAA,YACf;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,SAAQ;AAAA,YAEP;AAAA;AAAA,QACH;AAAA,MAEJ;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,mBAAQ;;;AChFf,IAAOA,oBAAQ","sourcesContent":["import type { ReactNode } from 'react';\n\nimport { Controller } from 'react-hook-form';\n\nimport { Textarea as NextTextArea } from '@nextui-org/input';\n\nimport { cn } from '@fuf-stack/pixel-utils';\n\nimport { useFormContext } from '../hooks';\nimport { FieldCopyTestIdButton } from '../partials/FieldCopyTestIdButton';\nimport { FieldValidationError } from '../partials/FieldValidationError';\n\nexport interface TextAreaProps {\n  /** Child components. The content of the textarea. */\n  children?: ReactNode;\n  /** CSS class name */\n  className?: string;\n  /** Determines if the TextArea is disabled or not. */\n  disabled?: boolean;\n  /** Label displayed above the TextArea. */\n  label?: ReactNode;\n  /** Name the TextArea is registered at in HTML forms (react-hook-form). */\n  name: string;\n  /** placeholder for the textArea content. */\n  placeholder?: string;\n  /** Id to grab element in internal tests. */\n  testId?: string;\n}\n\n/**\n * TextArea component based on [NextUI TextArea](https://nextui.org/docs/components/textarea)\n */\nconst TextArea = ({\n  children = null,\n  className = undefined,\n  disabled = false,\n  label = undefined,\n  name,\n  placeholder = ' ',\n  testId: _testId = undefined,\n}: TextAreaProps) => {\n  const { control, getFieldState } = useFormContext();\n  const { error, invalid, required, testId } = getFieldState(name, _testId);\n\n  return (\n    <Controller\n      control={control}\n      name={name}\n      disabled={disabled}\n      render={({\n        field: { disabled: isDisabled, onChange, onBlur, value, ref },\n      }) => {\n        return (\n          <NextTextArea\n            className={cn(className)}\n            classNames={{\n              inputWrapper: 'group-data-[focus=true]:border-primary',\n            }}\n            data-testid={testId}\n            errorMessage={error && <FieldValidationError error={error} />}\n            isDisabled={isDisabled}\n            isRequired={required}\n            isInvalid={invalid}\n            label={\n              <>\n                {label}\n                <FieldCopyTestIdButton testId={testId} />\n              </>\n            }\n            labelPlacement=\"outside\"\n            placeholder={placeholder}\n            name={name}\n            value={value}\n            onChange={onChange}\n            onBlur={onBlur}\n            ref={ref}\n            variant=\"bordered\"\n          >\n            {children}\n          </NextTextArea>\n        );\n      }}\n    />\n  );\n};\n\nexport default TextArea;\n","import TextArea from './TextArea';\n\nexport type { TextAreaProps } from './TextArea';\n\nexport { TextArea };\n\nexport default TextArea;\n"]}

package/dist/chunk-6NZVSPFX.js

@@ -0,0 +1,76 @@
+import {
+  FieldCopyTestIdButton_default
+} from "./chunk-OV5RMSYD.js";
+import {
+  FieldValidationError_default
+} from "./chunk-DBLODROX.js";
+import {
+  useFormContext
+} from "./chunk-BCMPSLSG.js";
+
+// src/TextArea/TextArea.tsx
+import { Controller } from "react-hook-form";
+import { Textarea as NextTextArea } from "@nextui-org/input";
+import { cn } from "@fuf-stack/pixel-utils";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var TextArea = ({
+  children = null,
+  className = void 0,
+  disabled = false,
+  label = void 0,
+  name,
+  placeholder = " ",
+  testId: _testId = void 0
+}) => {
+  const { control, getFieldState } = useFormContext();
+  const { error, invalid, required, testId } = getFieldState(name, _testId);
+  return /* @__PURE__ */ jsx(
+    Controller,
+    {
+      control,
+      name,
+      disabled,
+      render: ({
+        field: { disabled: isDisabled, onChange, onBlur, value, ref }
+      }) => {
+        return /* @__PURE__ */ jsx(
+          NextTextArea,
+          {
+            className: cn(className),
+            classNames: {
+              inputWrapper: "group-data-[focus=true]:border-primary"
+            },
+            "data-testid": testId,
+            errorMessage: error && /* @__PURE__ */ jsx(FieldValidationError_default, { error }),
+            isDisabled,
+            isRequired: required,
+            isInvalid: invalid,
+            label: /* @__PURE__ */ jsxs(Fragment, { children: [
+              label,
+              /* @__PURE__ */ jsx(FieldCopyTestIdButton_default, { testId })
+            ] }),
+            labelPlacement: "outside",
+            placeholder,
+            name,
+            value,
+            onChange,
+            onBlur,
+            ref,
+            variant: "bordered",
+            children
+          }
+        );
+      }
+    }
+  );
+};
+var TextArea_default = TextArea;
+
+// src/TextArea/index.ts
+var TextArea_default2 = TextArea_default;
+
+export {
+  TextArea_default,
+  TextArea_default2
+};
+//# sourceMappingURL=chunk-6NZVSPFX.js.map

package/dist/chunk-6NZVSPFX.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/TextArea/TextArea.tsx","../src/TextArea/index.ts"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { Controller } from 'react-hook-form';\n\nimport { Textarea as NextTextArea } from '@nextui-org/input';\n\nimport { cn } from '@fuf-stack/pixel-utils';\n\nimport { useFormContext } from '../hooks';\nimport { FieldCopyTestIdButton } from '../partials/FieldCopyTestIdButton';\nimport { FieldValidationError } from '../partials/FieldValidationError';\n\nexport interface TextAreaProps {\n  /** Child components. The content of the textarea. */\n  children?: ReactNode;\n  /** CSS class name */\n  className?: string;\n  /** Determines if the TextArea is disabled or not. */\n  disabled?: boolean;\n  /** Label displayed above the TextArea. */\n  label?: ReactNode;\n  /** Name the TextArea is registered at in HTML forms (react-hook-form). */\n  name: string;\n  /** placeholder for the textArea content. */\n  placeholder?: string;\n  /** Id to grab element in internal tests. */\n  testId?: string;\n}\n\n/**\n * TextArea component based on [NextUI TextArea](https://nextui.org/docs/components/textarea)\n */\nconst TextArea = ({\n  children = null,\n  className = undefined,\n  disabled = false,\n  label = undefined,\n  name,\n  placeholder = ' ',\n  testId: _testId = undefined,\n}: TextAreaProps) => {\n  const { control, getFieldState } = useFormContext();\n  const { error, invalid, required, testId } = getFieldState(name, _testId);\n\n  return (\n    <Controller\n      control={control}\n      name={name}\n      disabled={disabled}\n      render={({\n        field: { disabled: isDisabled, onChange, onBlur, value, ref },\n      }) => {\n        return (\n          <NextTextArea\n            className={cn(className)}\n            classNames={{\n              inputWrapper: 'group-data-[focus=true]:border-primary',\n            }}\n            data-testid={testId}\n            errorMessage={error && <FieldValidationError error={error} />}\n            isDisabled={isDisabled}\n            isRequired={required}\n            isInvalid={invalid}\n            label={\n              <>\n                {label}\n                <FieldCopyTestIdButton testId={testId} />\n              </>\n            }\n            labelPlacement=\"outside\"\n            placeholder={placeholder}\n            name={name}\n            value={value}\n            onChange={onChange}\n            onBlur={onBlur}\n            ref={ref}\n            variant=\"bordered\"\n          >\n            {children}\n          </NextTextArea>\n        );\n      }}\n    />\n  );\n};\n\nexport default TextArea;\n","import TextArea from './TextArea';\n\nexport type { TextAreaProps } from './TextArea';\n\nexport { TextArea };\n\nexport default TextArea;\n"],"mappings":";;;;;;;;;;;AAEA,SAAS,kBAAkB;AAE3B,SAAS,YAAY,oBAAoB;AAEzC,SAAS,UAAU;AAqDgB,SAKrB,UALqB,KAKrB,YALqB;AA3BnC,IAAM,WAAW,CAAC;AAAA,EAChB,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,QAAQ;AAAA,EACR;AAAA,EACA,cAAc;AAAA,EACd,QAAQ,UAAU;AACpB,MAAqB;AACnB,QAAM,EAAE,SAAS,cAAc,IAAI,eAAe;AAClD,QAAM,EAAE,OAAO,SAAS,UAAU,OAAO,IAAI,cAAc,MAAM,OAAO;AAExE,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ,CAAC;AAAA,QACP,OAAO,EAAE,UAAU,YAAY,UAAU,QAAQ,OAAO,IAAI;AAAA,MAC9D,MAAM;AACJ,eACE;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,GAAG,SAAS;AAAA,YACvB,YAAY;AAAA,cACV,cAAc;AAAA,YAChB;AAAA,YACA,eAAa;AAAA,YACb,cAAc,SAAS,oBAAC,gCAAqB,OAAc;AAAA,YAC3D;AAAA,YACA,YAAY;AAAA,YACZ,WAAW;AAAA,YACX,OACE,iCACG;AAAA;AAAA,cACD,oBAAC,iCAAsB,QAAgB;AAAA,eACzC;AAAA,YAEF,gBAAe;AAAA,YACf;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,SAAQ;AAAA,YAEP;AAAA;AAAA,QACH;AAAA,MAEJ;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,mBAAQ;;;AChFf,IAAOA,oBAAQ;","names":["TextArea_default"]}

package/dist/chunk-BIJVBXOG.js

@@ -0,0 +1,205 @@
+import {
+  FieldCopyTestIdButton_default
+} from "./chunk-OV5RMSYD.js";
+import {
+  FieldValidationError_default
+} from "./chunk-DBLODROX.js";
+import {
+  useFormContext
+} from "./chunk-BCMPSLSG.js";
+import {
+  slugify
+} from "./chunk-V46BHM2U.js";
+
+// src/RadioGroup/RadioGroup.tsx
+import { Controller } from "react-hook-form";
+import { ButtonGroup as NextButtonGroup } from "@nextui-org/button";
+import { RadioGroup as NextRadioGroup, Radio } from "@nextui-org/radio";
+import { cn as cn3 } from "@fuf-stack/pixel-utils";
+
+// src/RadioGroup/Variants/RadioBox.tsx
+import { useRadio } from "@nextui-org/radio";
+import { VisuallyHidden } from "@react-aria/visually-hidden";
+import { cn } from "@fuf-stack/pixel-utils";
+import { jsx, jsxs } from "react/jsx-runtime";
+var RadioBox = ({ icon = void 0, ...props }) => {
+  const {
+    children,
+    Component,
+    description,
+    getBaseProps,
+    getControlProps,
+    getInputProps,
+    getLabelProps,
+    getLabelWrapperProps,
+    getWrapperProps,
+    isDisabled
+  } = useRadio(props);
+  return /* @__PURE__ */ jsxs(
+    Component,
+    {
+      ...getBaseProps(),
+      className: cn(
+        "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-primary",
+        {
+          // disabled styles
+          "pointer-events-none opacity-disabled": isDisabled
+        }
+      ),
+      children: [
+        /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx("input", { ...getInputProps() }) }),
+        /* @__PURE__ */ jsx("span", { ...getWrapperProps(), children: /* @__PURE__ */ jsx("span", { ...getControlProps() }) }),
+        icon,
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ...getLabelWrapperProps(),
+            className: cn(getLabelWrapperProps().className, "grow"),
+            children: [
+              children && /* @__PURE__ */ jsx("span", { ...getLabelProps(), children }),
+              description && /* @__PURE__ */ jsx("span", { className: "text-small text-foreground opacity-70", children: description })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/RadioGroup/Variants/RadioButton.tsx
+import { cn as cn2 } from "@fuf-stack/pixel-utils";
+import { Button } from "@fuf-stack/pixels";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var RadioButton = ({
+  className = void 0,
+  value,
+  isDisabled = false,
+  onChange,
+  children
+}) => {
+  return /* @__PURE__ */ jsx2(
+    Button,
+    {
+      className: cn2(className),
+      disabled: isDisabled,
+      onClick: () => {
+        return onChange(value);
+      },
+      children
+    },
+    `index_${value}`
+  );
+};
+
+// src/RadioGroup/RadioGroup.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var RadioGroup = ({
+  className = void 0,
+  disabled = false,
+  inline = false,
+  label = void 0,
+  name,
+  options,
+  testId: _testId = void 0,
+  variant = "default"
+}) => {
+  const { control, getFieldState, getValues } = useFormContext();
+  const { error, invalid, required, testId } = getFieldState(name, _testId);
+  return /* @__PURE__ */ jsx3(
+    Controller,
+    {
+      control,
+      disabled,
+      name,
+      render: ({ field: { onChange, disabled: isDisabled, onBlur, ref } }) => {
+        let RadioComponents;
+        switch (variant) {
+          case "radioBox":
+            RadioComponents = options.map((option) => /* @__PURE__ */ jsx3(
+              RadioBox,
+              {
+                "data-testid": slugify(
+                  `${testId}_option_${option.testId || option.value}`
+                ),
+                isDisabled: isDisabled || option.disabled,
+                value: option.value,
+                onChange,
+                description: option.description,
+                icon: option.icon,
+                children: option.label ? option.label : option.value
+              },
+              option.value
+            ));
+            break;
+          case "radioButton":
+            RadioComponents = options.map((option) => /* @__PURE__ */ jsx3(
+              RadioButton,
+              {
+                "data-testid": slugify(
+                  `${testId}_option_${option.testId || option.value}`
+                ),
+                isDisabled: isDisabled || option.disabled,
+                value: option.value,
+                onChange,
+                className: cn3(
+                  `${getValues()[name] !== option.value ? "bg-opacity-50" : ""}`
+                ),
+                children: option.label ? option.label : option.value
+              },
+              option.value
+            ));
+            break;
+          default:
+            RadioComponents = options.map((option) => /* @__PURE__ */ jsx3(
+              Radio,
+              {
+                "data-testid": slugify(
+                  `${testId}_option_${option.testId || option.value}`
+                ),
+                isDisabled: isDisabled || option.disabled,
+                value: option.value,
+                onChange,
+                children: option.label ? option.label : option.value
+              },
+              option.value
+            ));
+        }
+        return /* @__PURE__ */ jsx3(
+          NextRadioGroup,
+          {
+            className,
+            "data-testid": testId,
+            errorMessage: error && /* @__PURE__ */ jsx3(FieldValidationError_default, { error }),
+            isDisabled,
+            isInvalid: invalid,
+            isRequired: required,
+            label: label && // eslint-disable-next-line jsx-a11y/label-has-associated-control
+            /* @__PURE__ */ jsxs2("label", { className: `${invalid ? "text-danger" : ""}`, children: [
+              label,
+              /* @__PURE__ */ jsx3(FieldCopyTestIdButton_default, { testId })
+            ] }),
+            orientation: inline ? "horizontal" : "vertical",
+            onBlur,
+            onChange,
+            name,
+            ref,
+            children: variant === "radioButton" ? (
+              // TODO: NextButtonGroup uses ref to modify Button style, but we wrap it, so it does not work at the moment.
+              /* @__PURE__ */ jsx3(NextButtonGroup, { children: RadioComponents })
+            ) : RadioComponents
+          }
+        );
+      }
+    }
+  );
+};
+var RadioGroup_default = RadioGroup;
+
+// src/RadioGroup/index.ts
+var RadioGroup_default2 = RadioGroup_default;
+
+export {
+  RadioGroup_default,
+  RadioGroup_default2
+};
+//# sourceMappingURL=chunk-BIJVBXOG.js.map

package/dist/chunk-BIJVBXOG.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/RadioGroup/RadioGroup.tsx","../src/RadioGroup/Variants/RadioBox.tsx","../src/RadioGroup/Variants/RadioButton.tsx","../src/RadioGroup/index.ts"],"sourcesContent":["import type { ReactElement, ReactNode } from 'react';\n\nimport { Controller } from 'react-hook-form';\n\nimport { ButtonGroup as NextButtonGroup } from '@nextui-org/button';\nimport { RadioGroup as NextRadioGroup, Radio } from '@nextui-org/radio';\n\nimport { cn } from '@fuf-stack/pixel-utils';\n\nimport { slugify } from '../helpers';\nimport { useFormContext } from '../hooks';\nimport { FieldCopyTestIdButton } from '../partials/FieldCopyTestIdButton';\nimport { FieldValidationError } from '../partials/FieldValidationError';\nimport { RadioBox } from './Variants/RadioBox';\nimport { RadioButton } from './Variants/RadioButton';\n\nexport interface RadioGroupOption {\n  /** Description of the value. Works with variant radioBox. */\n  description?: React.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 RadioGroupProps {\n  /** CSS class name */\n  className?: string;\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: RadioGroupOption[];\n  /** Id to grab element in internal tests. */\n  testId?: string;\n  /** How the RadioGroup should look like. */\n  variant?: 'default' | 'radioBox' | 'radioButton';\n}\n\n/**\n * RadioGroup component based on [NextUI RadioGroup](https://nextui.org/docs/components/radio-group)\n */\nconst RadioGroup = ({\n  className = undefined,\n  disabled = false,\n  inline = false,\n  label = undefined,\n  name,\n  options,\n  testId: _testId = undefined,\n  variant = 'default',\n}: RadioGroupProps): ReactElement => {\n  const { control, getFieldState, getValues } = useFormContext();\n\n  const { error, invalid, required, testId } = getFieldState(name, _testId);\n\n  return (\n    <Controller\n      control={control}\n      disabled={disabled}\n      name={name}\n      render={({ field: { onChange, disabled: isDisabled, onBlur, ref } }) => {\n        let RadioComponents: ReactNode;\n        switch (variant) {\n          case 'radioBox':\n            RadioComponents = options.map((option) => (\n              <RadioBox\n                key={option.value}\n                data-testid={slugify(\n                  `${testId}_option_${option.testId || option.value}`,\n                )}\n                isDisabled={isDisabled || option.disabled}\n                value={option.value}\n                onChange={onChange}\n                description={option.description}\n                icon={option.icon}\n              >\n                {option.label ? option.label : option.value}\n              </RadioBox>\n            ));\n            break;\n          case 'radioButton':\n            RadioComponents = options.map((option) => (\n              <RadioButton\n                key={option.value}\n                data-testid={slugify(\n                  `${testId}_option_${option.testId || option.value}`,\n                )}\n                isDisabled={isDisabled || option.disabled}\n                value={option.value}\n                onChange={onChange}\n                // TODO: how to do the classNames properly (make selected option darker with same color)\n                className={cn(\n                  `${getValues()[name] !== option.value ? 'bg-opacity-50' : ''}`,\n                )}\n              >\n                {option.label ? option.label : option.value}\n              </RadioButton>\n            ));\n            break;\n          default:\n            RadioComponents = options.map((option) => (\n              <Radio\n                key={option.value}\n                data-testid={slugify(\n                  `${testId}_option_${option.testId || option.value}`,\n                )}\n                isDisabled={isDisabled || option.disabled}\n                value={option.value}\n                onChange={onChange}\n              >\n                {option.label ? option.label : option.value}\n              </Radio>\n            ));\n        }\n\n        return (\n          <NextRadioGroup\n            className={className}\n            data-testid={testId}\n            errorMessage={error && <FieldValidationError error={error} />}\n            isDisabled={isDisabled}\n            isInvalid={invalid}\n            isRequired={required}\n            label={\n              label && (\n                // eslint-disable-next-line jsx-a11y/label-has-associated-control\n                <label className={`${invalid ? 'text-danger' : ''}`}>\n                  {label}\n                  <FieldCopyTestIdButton testId={testId} />\n                </label>\n              )\n            }\n            orientation={inline ? 'horizontal' : 'vertical'}\n            onBlur={onBlur}\n            onChange={onChange}\n            name={name}\n            ref={ref}\n          >\n            {variant === 'radioButton' ? (\n              // TODO: NextButtonGroup uses ref to modify Button style, but we wrap it, so it does not work at the moment.\n              <NextButtonGroup>{RadioComponents}</NextButtonGroup>\n            ) : (\n              RadioComponents\n            )}\n          </NextRadioGroup>\n        );\n      }}\n    />\n  );\n};\n\nexport default RadioGroup;\n","import type { RadioProps as NextRadioProps } from '@nextui-org/radio';\nimport type { ReactNode } from 'react';\n\nimport { useRadio } from '@nextui-org/radio';\nimport { VisuallyHidden } from '@react-aria/visually-hidden';\n\nimport { cn } from '@fuf-stack/pixel-utils';\n\ninterface RadioProps extends NextRadioProps {\n  /** icon for the option */\n  icon?: ReactNode;\n}\n\nexport const RadioBox = ({ icon = undefined, ...props }: RadioProps) => {\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);\n\n  return (\n    <Component\n      // eslint-disable-next-line react/jsx-props-no-spreading\n      {...getBaseProps()}\n      className={cn(\n        '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-primary',\n        {\n          // disabled styles\n          'pointer-events-none opacity-disabled': isDisabled,\n        },\n      )}\n    >\n      <VisuallyHidden>\n        {/* eslint-disable-next-line react/jsx-props-no-spreading  */}\n        <input {...getInputProps()} />\n      </VisuallyHidden>\n      {/* eslint-disable-next-line react/jsx-props-no-spreading  */}\n      <span {...getWrapperProps()}>\n        {/* eslint-disable-next-line react/jsx-props-no-spreading  */}\n        <span {...getControlProps()} />\n      </span>\n      {icon}\n      <div\n        // eslint-disable-next-line react/jsx-props-no-spreading\n        {...getLabelWrapperProps()}\n        className={cn(getLabelWrapperProps().className, 'grow')}\n      >\n        {/* eslint-disable-next-line react/jsx-props-no-spreading  */}\n        {children && <span {...getLabelProps()}>{children}</span>}\n        {description && (\n          <span className=\"text-small text-foreground opacity-70\">\n            {description}\n          </span>\n        )}\n      </div>\n    </Component>\n  );\n};\n\nexport default RadioBox;\n","import { cn } from '@fuf-stack/pixel-utils';\nimport { Button } from '@fuf-stack/pixels';\n\ninterface RadioButtonProps {\n  /** label of the value. */\n  children: React.ReactNode;\n  /** CSS class name */\n  className?: string;\n  /** disables the option */\n  isDisabled?: boolean;\n  /** Callback function. Executed if the option is clicked. */\n  onChange: (...event: unknown[]) => void;\n  /** value of the option. */\n  value: string;\n}\n\nexport const RadioButton = ({\n  className = undefined,\n  value,\n  isDisabled = false,\n  onChange,\n  children,\n}: RadioButtonProps) => {\n  return (\n    <Button\n      key={`index_${value}`}\n      className={cn(className)}\n      disabled={isDisabled}\n      onClick={() => {\n        return onChange(value);\n      }}\n    >\n      {children}\n    </Button>\n  );\n};\n\nexport default RadioButton;\n","import RadioGroup from './RadioGroup';\n\nexport type { RadioGroupProps } from './RadioGroup';\n\nexport { RadioGroup };\n\nexport default RadioGroup;\n"],"mappings":"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","names":["cn","cn","jsx","jsx","jsxs","cn","RadioGroup_default"]}

package/dist/chunk-CRKMTDKU.js

@@ -0,0 +1,239 @@
+import {
+  FieldCopyTestIdButton_default
+} from "./chunk-OV5RMSYD.js";
+import {
+  FieldValidationError_default
+} from "./chunk-DBLODROX.js";
+import {
+  useFormContext
+} from "./chunk-BCMPSLSG.js";
+
+// src/Select/Select.tsx
+import { Controller } from "react-hook-form";
+import ReactSelect, { components } from "react-select";
+import { useSelect } from "@nextui-org/select";
+import { cn, tv } from "@fuf-stack/pixel-utils";
+import { jsx, jsxs } from "react/jsx-runtime";
+var InputComponent = (props) => {
+  const testId = `${props.selectProps["data-testid"]}_input`;
+  return /* @__PURE__ */ jsx(components.Input, { "data-testid": testId, ...props });
+};
+var OptionComponent = (props) => {
+  const testId = `${props.selectProps["data-testid"]}_option_${props?.data?.testId ?? props?.data?.value}`;
+  return /* @__PURE__ */ jsx("div", { "data-testid": testId, children: /* @__PURE__ */ jsx(components.Option, { ...props }) });
+};
+var DropdownIndicatorComponent = (props) => {
+  const testId = props?.selectProps["data-testid"];
+  return /* @__PURE__ */ jsx("div", { "data-testid": `${testId}_dropdown`, children: /* @__PURE__ */ jsx(components.DropdownIndicator, { ...props }) });
+};
+var selectVariants = tv({
+  slots: {
+    clearIndicator: "rounded-md p-1 text-neutral-500 hover:cursor-pointer hover:bg-gray-200 hover:text-neutral-800 hover:dark:bg-default-200 hover:dark:text-default-500",
+    control: "rounded-lg border-2 border-gray-200 shadow-sm !duration-150 transition-background hover:border-gray-400 motion-reduce:transition-none dark:border-default-200 hover:dark:border-default-400 focus:dark:border-default-400",
+    crossIcon: "",
+    downChevron: "",
+    dropdownIndicator: "rounded-md p-1 text-neutral-500 hover:cursor-pointer hover:bg-gray-200 hover:text-black hover:dark:bg-default-200 hover:dark:text-default-500",
+    group: "",
+    groupHeading: "mb-1 ml-3 mt-2 text-sm text-neutral-500",
+    indicatorsContainer: "gap-1 p-1",
+    indicatorSeparator: "bg-gray-300 dark:bg-default-300",
+    input: "py-0.5 pl-1",
+    loadingIndicator: "",
+    loadingMessage: "",
+    menu: "mt-2 rounded-xl border border-gray-200 bg-default-50 p-1 shadow-sm dark:border-gray-900 dark:bg-default-50",
+    menuList: "",
+    // ensure menu has same z-index as modal so it is visible when rendered in modal
+    // see: https://github.com/nextui-org/nextui/blob/main/packages/core/theme/src/components/modal.ts (see z-50)
+    menuPortal: "!z-50",
+    multiValue: "items-center gap-1.5 rounded bg-gray-100 py-0.5 pl-2 pr-1 dark:bg-default-100",
+    multiValueContainer: "",
+    multiValueLabel: "py-0.5 leading-6",
+    multiValueRemove: "rounded text-neutral-500 hover:cursor-pointer hover:border-gray-300 hover:text-neutral-800 hover:dark:bg-default-200 hover:dark:text-default-500",
+    noOptionsMessage: "rounded-sm bg-gray-50 p-2 text-neutral-500 dark:bg-default-100",
+    option: "rounded px-3 py-2 hover:cursor-pointer",
+    placeholder: "py-0.5 pl-1 text-neutral-500",
+    selectContainer: "",
+    singleValue: "!ml-1 !leading-7",
+    valueContainer: "gap-1 p-1"
+  },
+  variants: {
+    invalid: {
+      true: {
+        control: "border-danger hover:border-danger dark:border-danger hover:dark:border-danger"
+      }
+    },
+    focused: {
+      true: {
+        option: "bg-gray-100 active:bg-gray-200 dark:bg-default-100 dark:active:bg-default-200"
+      }
+    },
+    optionSelected: {
+      true: { option: "bg-gray-300 dark:bg-default-300" }
+    }
+  }
+});
+var Select = ({
+  className = void 0,
+  clearable = true,
+  disabled = false,
+  filterOption = void 0,
+  inputValue = void 0,
+  label: _label = void 0,
+  loading = false,
+  multiSelect = false,
+  name,
+  onInputChange = void 0,
+  options,
+  placeholder = void 0,
+  testId: _testId = void 0
+}) => {
+  const { control, getFieldState } = useFormContext();
+  const { error, invalid, required, testId } = getFieldState(name, _testId);
+  const {
+    label,
+    getLabelProps,
+    getTriggerProps,
+    getValueProps,
+    getHelperWrapperProps,
+    getErrorMessageProps
+  } = useSelect({
+    isLoading: loading,
+    isInvalid: invalid,
+    isRequired: required,
+    isDisabled: disabled,
+    errorMessage: JSON.stringify(error),
+    label: _label,
+    labelPlacement: "outside",
+    children: []
+  });
+  const {
+    clearIndicator: clearIndicatorSlot,
+    control: controlSlot,
+    dropdownIndicator: dropdownIndicatorSlot,
+    groupHeading: groupHeadingSlot,
+    indicatorsContainer: indicatorContainerSlot,
+    indicatorSeparator: indicatorSeparatorSlot,
+    input: inputSlot,
+    menu: menuSlot,
+    menuPortal: menuPortalSlot,
+    multiValue: multiValueSlot,
+    multiValueLabel: multiValueLabelSlot,
+    multiValueRemove: multiValueRemoveSlot,
+    noOptionsMessage: noOptionsMessageSlot,
+    option: optionSlot,
+    placeholder: placeholderSlot,
+    singleValue: singleValueSlot,
+    valueContainer: valueContainerSlot
+  } = selectVariants({ invalid });
+  return /* @__PURE__ */ jsx(
+    Controller,
+    {
+      control,
+      name,
+      render: ({
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        field: { onChange, value, ref, onBlur }
+      }) => /* @__PURE__ */ jsxs("div", { className: cn(className, "mt-2"), "data-testid": `${testId}_select`, children: [
+        label && /* @__PURE__ */ jsxs(
+          "label",
+          {
+            htmlFor: `react-select-${name}-input`,
+            className: `${getLabelProps().className} !pointer-events-auto !static -mb-1 ml-1`,
+            children: [
+              label,
+              /* @__PURE__ */ jsx(FieldCopyTestIdButton_default, { testId })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ReactSelect,
+          {
+            "aria-errormessage": "",
+            "aria-invalid": invalid,
+            "data-testid": `${testId}_select`,
+            ...() => {
+              const { className: _className, ...rest } = getTriggerProps();
+              return rest;
+            },
+            "aria-labelledby": getTriggerProps()["aria-labelledby"]?.split(" ")[1],
+            classNames: {
+              control: ({ isFocused }) => (
+                // border focus style
+                controlSlot({
+                  className: !invalid && isFocused && "!border-primary"
+                })
+              ),
+              placeholder: () => placeholderSlot(),
+              input: () => inputSlot(),
+              valueContainer: () => valueContainerSlot(),
+              singleValue: () => singleValueSlot({
+                className: `${getValueProps().className}`
+              }),
+              multiValue: () => multiValueSlot(),
+              multiValueLabel: () => multiValueLabelSlot({
+                className: `${getValueProps().className}`
+              }),
+              multiValueRemove: () => multiValueRemoveSlot(),
+              indicatorsContainer: () => indicatorContainerSlot(),
+              clearIndicator: () => clearIndicatorSlot(),
+              indicatorSeparator: () => indicatorSeparatorSlot(),
+              dropdownIndicator: () => dropdownIndicatorSlot(),
+              menu: () => menuSlot(),
+              groupHeading: () => groupHeadingSlot(),
+              option: ({ isFocused, isSelected }) => optionSlot({
+                focused: isFocused,
+                optionSelected: isSelected
+              }),
+              noOptionsMessage: () => noOptionsMessageSlot(),
+              menuPortal: () => menuPortalSlot()
+            },
+            components: {
+              Input: InputComponent,
+              Option: OptionComponent,
+              DropdownIndicator: DropdownIndicatorComponent
+            },
+            filterOption,
+            instanceId: name,
+            inputValue,
+            isClearable: clearable,
+            isDisabled: disabled,
+            isLoading: loading,
+            isMulti: multiSelect,
+            options,
+            placeholder,
+            unstyled: true,
+            onChange: (option) => {
+              if (multiSelect) {
+                const transformedOptions = [];
+                option?.forEach((o) => {
+                  transformedOptions.push(o.value);
+                });
+                onChange(transformedOptions);
+              } else {
+                onChange(option && option.value);
+              }
+            },
+            onInputChange,
+            menuPortalTarget: document.getElementById("modal_body")?.parentNode?.parentNode || document.body,
+            value: options.find((option) => option.value === value),
+            onBlur,
+            name,
+            ref
+          }
+        ),
+        error && // eslint-disable-next-line react/jsx-props-no-spreading
+        /* @__PURE__ */ jsx("div", { ...getHelperWrapperProps(), children: /* @__PURE__ */ jsx("div", { ...getErrorMessageProps(), children: /* @__PURE__ */ jsx(FieldValidationError_default, { error }) }) })
+      ] })
+    }
+  );
+};
+var Select_default = Select;
+
+// src/Select/index.ts
+var Select_default2 = Select_default;
+
+export {
+  Select_default,
+  Select_default2
+};
+//# sourceMappingURL=chunk-CRKMTDKU.js.map