@fuf-stack/uniform 0.14.5 → 0.16.0

package/dist/chunk-HCQJGNWT.cjs

@@ -0,0 +1,246 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _chunkPHGFXKPUcjs = require('./chunk-PHGFXKPU.cjs');
+
+
+var _chunkJU5RT22Ycjs = require('./chunk-JU5RT22Y.cjs');
+
+
+var _chunkOE5IW4ZGcjs = require('./chunk-OE5IW4ZG.cjs');
+
+
+var _chunkIUVEFLF3cjs = require('./chunk-IUVEFLF3.cjs');
+
+
+
+var _chunk4DAZAO6Ycjs = require('./chunk-4DAZAO6Y.cjs');
+
+// src/Select/Select.tsx
+var _react = require('react');
+var _reactselect = require('react-select'); var _reactselect2 = _interopRequireDefault(_reactselect);
+var _select = require('@heroui/select');
+var _pixelutils = require('@fuf-stack/pixel-utils');
+var _jsxruntime = require('react/jsx-runtime');
+var selectVariants = _pixelutils.tv.call(void 0, {
+  slots: {
+    base: "group leading-normal",
+    clearIndicator: "rounded-md p-1 text-foreground-500 hover:cursor-pointer hover:bg-default-200 hover:text-foreground-800",
+    control: "rounded-lg border-2 border-default-200 !duration-150 transition-background hover:border-default-400 group-data-[invalid=true]:border-danger group-data-[invalid=true]:hover:border-danger motion-reduce:transition-none",
+    control_focused: "border-focus",
+    crossIcon: "",
+    downChevron: "",
+    dropdownIndicator: "rounded-md p-1 text-foreground-500 hover:cursor-pointer hover:bg-default-200 hover:text-black",
+    group: "",
+    groupHeading: "mb-1 ml-3 mt-2 text-sm text-foreground-500",
+    indicatorsContainer: "gap-1 p-1",
+    indicatorSeparator: "bg-default-300",
+    input: "py-0.5 pl-1",
+    // see HeroUI styles for group-data condition,
+    // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/core/theme/src/components/select.ts
+    label: 'pointer-events-auto relative bottom-1.5 ml-1 text-small subpixel-antialiased group-data-[invalid=true]:!text-danger group-data-[required=true]:after:ml-0.5 group-data-[required=true]:after:text-danger group-data-[required=true]:after:content-["*"]',
+    loadingIndicator: "",
+    loadingMessage: "",
+    menu: "mt-2 rounded-xl border border-default-200 bg-content1 p-1 shadow-lg",
+    menuList: "",
+    // ensure menu has same z-index as modal so it is visible when rendered in modal
+    // see: https://github.com/heroui-inc/heroui/blob/main/packages/core/theme/src/components/modal.ts (see z-50)
+    menuPortal: "!z-50",
+    multiValue: "items-center gap-1.5 rounded bg-default-100 py-0.5 pl-2 pr-1",
+    multiValueContainer: "",
+    multiValueLabel: "py-0.5 leading-6",
+    multiValueRemove: "rounded text-default-500 hover:cursor-pointer hover:border-default-300 hover:text-default-800",
+    noOptionsMessage: "rounded-sm p-2 text-foreground-500",
+    option_focused: "bg-default-100 active:bg-default-200",
+    option_selected: "bg-default-300",
+    option: "rounded px-3 py-2 hover:cursor-pointer",
+    placeholder: "ml-1 py-0.5 pl-1 text-sm text-foreground-500",
+    selectContainer: "",
+    singleValue: "!ml-1 !leading-7",
+    valueContainer: "gap-1 p-1"
+  }
+});
+var InputComponent = (props) => {
+  const testId = `${props.selectProps["data-testid"]}`;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactselect.components.Input, _chunk4DAZAO6Ycjs.__spreadValues.call(void 0, { "data-testid": testId }, props));
+};
+var ControlComponent = (props) => {
+  const testId = `${props.selectProps["data-testid"]}_select`;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { "data-testid": testId, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactselect.components.Control, _chunk4DAZAO6Ycjs.__spreadValues.call(void 0, {}, props)) });
+};
+var OptionComponent = (props) => {
+  var _a, _b, _c;
+  const testId = `${props.selectProps["data-testid"]}_select_option_${_pixelutils.slugify.call(void 0, (_c = (_a = props == null ? void 0 : props.data) == null ? void 0 : _a.testId) != null ? _c : (_b = props == null ? void 0 : props.data) == null ? void 0 : _b.value)}`;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { "data-testid": testId, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactselect.components.Option, _chunk4DAZAO6Ycjs.__spreadValues.call(void 0, {}, props)) });
+};
+var DropdownIndicatorComponent = (props) => {
+  const testId = props == null ? void 0 : props.selectProps["data-testid"];
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { "data-testid": `${testId}_select_dropdown`, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactselect.components.DropdownIndicator, _chunk4DAZAO6Ycjs.__spreadValues.call(void 0, {}, props)) });
+};
+var Select = ({
+  className = void 0,
+  clearable = true,
+  disabled = false,
+  filterOption = void 0,
+  renderOptionLabel = 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, debugMode, getFieldState } = _chunkIUVEFLF3cjs.useFormContext.call(void 0, );
+  const { error, invalid, required, testId } = getFieldState(name, _testId);
+  const [isFocused, setIsFocused] = _react.useState.call(void 0, false);
+  const variants = selectVariants();
+  const classNames = _pixelutils.variantsToClassNames.call(void 0, variants, className, "base");
+  const {
+    getBaseProps,
+    getErrorMessageProps,
+    getHelperWrapperProps,
+    getLabelProps,
+    getTriggerProps,
+    getValueProps,
+    label
+  } = _select.useSelect.call(void 0, {
+    children: [],
+    classNames,
+    errorMessage: JSON.stringify(error),
+    isDisabled: disabled,
+    isInvalid: invalid,
+    isLoading: loading,
+    isRequired: required,
+    label: _label,
+    labelPlacement: "outside",
+    placeholder: " "
+  });
+  const showTestIdCopyButton = debugMode === "debug-testids";
+  const showLabel = label || showTestIdCopyButton;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _chunkPHGFXKPUcjs.Controller_default,
+    {
+      control,
+      name,
+      render: ({
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        field: { onChange, value, ref, onBlur }
+      }) => {
+        var _a;
+        return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+          "div",
+          _chunk4DAZAO6Ycjs.__spreadProps.call(void 0, _chunk4DAZAO6Ycjs.__spreadValues.call(void 0, {}, getBaseProps()), {
+            className: _pixelutils.cn.call(void 0, classNames.base),
+            "data-testid": `${testId}_wrapper`,
+            "data-required": required,
+            children: [
+              showLabel && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+                "label",
+                {
+                  className: classNames.label,
+                  "data-slot": "label",
+                  htmlFor: `react-select-${name}-input`,
+                  id: getLabelProps().id,
+                  children: [
+                    label,
+                    showTestIdCopyButton && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkJU5RT22Ycjs.FieldCopyTestIdButton_default, { testId })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                _reactselect2.default,
+                {
+                  "aria-errormessage": "",
+                  "aria-labelledby": (_a = getTriggerProps()["aria-labelledby"]) == null ? void 0 : _a.split(" ")[1],
+                  "aria-invalid": invalid,
+                  classNames: {
+                    control: () => _pixelutils.cn.call(void 0, classNames.control, {
+                      [classNames.control_focused]: isFocused && !invalid
+                    }),
+                    clearIndicator: () => classNames.clearIndicator,
+                    dropdownIndicator: () => classNames.dropdownIndicator,
+                    groupHeading: () => classNames.groupHeading,
+                    indicatorsContainer: () => classNames.indicatorsContainer,
+                    indicatorSeparator: () => classNames.indicatorSeparator,
+                    input: () => classNames.input,
+                    menu: () => classNames.menu,
+                    menuList: () => classNames.menuList,
+                    menuPortal: () => classNames.menuPortal,
+                    multiValue: () => classNames.multiValue,
+                    multiValueLabel: () => _pixelutils.cn.call(void 0, classNames.multiValueLabel, `${getValueProps().className}`),
+                    multiValueRemove: () => classNames.multiValueRemove,
+                    noOptionsMessage: () => classNames.noOptionsMessage,
+                    option: ({
+                      isFocused: optionIsFocused,
+                      isSelected: optionIsSelected
+                    }) => _pixelutils.cn.call(void 0, classNames.option, {
+                      [classNames.option_focused]: optionIsFocused,
+                      [classNames.option_selected]: optionIsSelected
+                    }),
+                    placeholder: () => classNames.placeholder,
+                    singleValue: () => _pixelutils.cn.call(void 0, classNames.singleValue, `${getValueProps().className}`),
+                    valueContainer: () => classNames.valueContainer
+                  },
+                  components: {
+                    Input: InputComponent,
+                    Option: OptionComponent,
+                    DropdownIndicator: DropdownIndicatorComponent,
+                    Control: ControlComponent
+                  },
+                  "data-testid": testId,
+                  filterOption,
+                  formatOptionLabel: renderOptionLabel,
+                  inputValue,
+                  instanceId: name,
+                  isClearable: clearable,
+                  isDisabled: disabled,
+                  isLoading: loading,
+                  isMulti: multiSelect,
+                  name,
+                  menuPosition: "fixed",
+                  menuShouldBlockScroll: true,
+                  options,
+                  placeholder,
+                  onBlur: (_e) => {
+                    setIsFocused(false);
+                    return onBlur();
+                  },
+                  onChange: (option) => {
+                    if (multiSelect) {
+                      onChange(
+                        option == null ? void 0 : option.map((_option) => _option.value)
+                      );
+                    } else {
+                      onChange(option == null ? void 0 : option.value);
+                    }
+                  },
+                  onFocus: (_e) => {
+                    setIsFocused(true);
+                  },
+                  onInputChange,
+                  ref,
+                  value: options.find((option) => option.value === value),
+                  unstyled: true
+                }
+              ),
+              error && // eslint-disable-next-line react/jsx-props-no-spreading
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", _chunk4DAZAO6Ycjs.__spreadProps.call(void 0, _chunk4DAZAO6Ycjs.__spreadValues.call(void 0, {}, getHelperWrapperProps()), { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", _chunk4DAZAO6Ycjs.__spreadProps.call(void 0, _chunk4DAZAO6Ycjs.__spreadValues.call(void 0, {}, getErrorMessageProps()), { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkOE5IW4ZGcjs.FieldValidationError_default, { error }) })) }))
+            ]
+          })
+        );
+      }
+    }
+  );
+};
+var Select_default = Select;
+
+// src/Select/index.ts
+var Select_default2 = Select_default;
+
+
+
+
+exports.Select_default = Select_default; exports.Select_default2 = Select_default2;
+//# sourceMappingURL=chunk-HCQJGNWT.cjs.map

package/dist/chunk-HCQJGNWT.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-HCQJGNWT.cjs","../src/Select/Select.tsx","../src/Select/index.ts"],"names":["Select_default"],"mappings":"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","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-HCQJGNWT.cjs","sourcesContent":[null,"import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { Props } from 'react-select';\n\nimport { useState } from 'react';\nimport ReactSelect, { components } from 'react-select';\n\nimport { useSelect } from '@heroui/select';\n\nimport { cn, slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { Controller } from '../Controller';\nimport { useFormContext } from '../hooks';\nimport { FieldCopyTestIdButton } from '../partials/FieldCopyTestIdButton';\nimport { FieldValidationError } from '../partials/FieldValidationError';\n\nexport const selectVariants = tv({\n  slots: {\n    base: 'group leading-normal',\n    clearIndicator:\n      'rounded-md p-1 text-foreground-500 hover:cursor-pointer hover:bg-default-200 hover:text-foreground-800',\n    control:\n      'rounded-lg border-2 border-default-200 !duration-150 transition-background hover:border-default-400 group-data-[invalid=true]:border-danger group-data-[invalid=true]:hover:border-danger motion-reduce:transition-none',\n    control_focused: 'border-focus',\n    crossIcon: '',\n    downChevron: '',\n    dropdownIndicator:\n      'rounded-md p-1 text-foreground-500 hover:cursor-pointer hover:bg-default-200 hover:text-black',\n    group: '',\n    groupHeading: 'mb-1 ml-3 mt-2 text-sm text-foreground-500',\n    indicatorsContainer: 'gap-1 p-1',\n    indicatorSeparator: 'bg-default-300',\n    input: 'py-0.5 pl-1',\n    // see HeroUI styles for group-data condition,\n    // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/core/theme/src/components/select.ts\n    label:\n      'pointer-events-auto relative bottom-1.5 ml-1 text-small subpixel-antialiased group-data-[invalid=true]:!text-danger group-data-[required=true]:after:ml-0.5 group-data-[required=true]:after:text-danger group-data-[required=true]:after:content-[\"*\"]',\n    loadingIndicator: '',\n    loadingMessage: '',\n    menu: 'mt-2 rounded-xl border border-default-200 bg-content1 p-1 shadow-lg',\n    menuList: '',\n    // ensure menu has same z-index as modal so it is visible when rendered in modal\n    // see: https://github.com/heroui-inc/heroui/blob/main/packages/core/theme/src/components/modal.ts (see z-50)\n    menuPortal: '!z-50',\n    multiValue: 'items-center gap-1.5 rounded bg-default-100 py-0.5 pl-2 pr-1',\n    multiValueContainer: '',\n    multiValueLabel: 'py-0.5 leading-6',\n    multiValueRemove:\n      'rounded text-default-500 hover:cursor-pointer hover:border-default-300 hover:text-default-800',\n    noOptionsMessage: 'rounded-sm p-2 text-foreground-500',\n    option_focused: 'bg-default-100 active:bg-default-200',\n    option_selected: 'bg-default-300',\n    option: 'rounded px-3 py-2 hover:cursor-pointer',\n    placeholder: 'ml-1 py-0.5 pl-1 text-sm text-foreground-500',\n    selectContainer: '',\n    singleValue: '!ml-1 !leading-7',\n    valueContainer: 'gap-1 p-1',\n  },\n});\n\ntype SelectOption = {\n  /** option label */\n  label?: React.ReactNode;\n  /** option value */\n  value: string;\n};\n\ntype VariantProps = TVProps<typeof selectVariants>;\ntype ClassName = TVClassName<typeof selectVariants>;\n\nexport interface SelectProps extends VariantProps {\n  /** CSS class name */\n  className?: ClassName; // string;\n  /** Determine if the  */\n  clearable?: boolean;\n  /** Set the select to disabled state. */\n  disabled?: boolean;\n  /** Filter Select Options */\n  filterOption?:\n    | undefined\n    | ((option?: SelectOption, inputValue?: string) => boolean);\n  /** Format the label of the option */\n  renderOptionLabel?: undefined | Props['formatOptionLabel'];\n  /** The value of the search input */\n  inputValue?: string;\n  /** Label that should be associated with the select. */\n  label?: React.ReactNode;\n  /** Set the select to a loading state. */\n  loading?: boolean;\n  /** switch between single and multi select mode. */\n  multiSelect?: boolean;\n  /** The name for the Select component, used by react-hook-form */\n  name: string;\n  /** Placeholder that is displayed when nothing is selected */\n  placeholder?: string;\n  /** The options for the Select component */\n  options: SelectOption[];\n  /** Handle change events on the input */\n  onInputChange?: Props['onInputChange'];\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n}\n\nconst InputComponent: typeof components.Input = (props) => {\n  // @ts-expect-error data-testid is not a default prop\n  // eslint-disable-next-line react/prop-types, react/destructuring-assignment\n  const testId = `${props.selectProps['data-testid']}`;\n  // eslint-disable-next-line react/jsx-props-no-spreading\n  return <components.Input data-testid={testId} {...props} />;\n};\n\nconst ControlComponent: typeof components.Control = (props) => {\n  // @ts-expect-error data-testid is not a default prop\n  // eslint-disable-next-line react/prop-types, react/destructuring-assignment\n  const testId = `${props.selectProps['data-testid']}_select`;\n  return (\n    <div data-testid={testId}>\n      {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n      <components.Control {...props} />\n    </div>\n  );\n};\n\nconst OptionComponent: typeof components.Option = (props) => {\n  // @ts-expect-error data-testid is not a default prop\n  // eslint-disable-next-line react/prop-types, react/destructuring-assignment\n  const testId = `${props.selectProps['data-testid']}_select_option_${slugify(props?.data?.testId ?? props?.data?.value)}`;\n  return (\n    <div data-testid={testId}>\n      {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n      <components.Option {...props} />\n    </div>\n  );\n};\n\nconst DropdownIndicatorComponent: typeof components.DropdownIndicator = (\n  props,\n) => {\n  // @ts-expect-error data-testid is not a default prop\n  // eslint-disable-next-line react/prop-types\n  const testId = props?.selectProps['data-testid'] as string;\n  return (\n    <div data-testid={`${testId}_select_dropdown`}>\n      {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n      <components.DropdownIndicator {...props} />\n    </div>\n  );\n};\n\n/** Select component based on [HeroUI Select](https://www.heroui.com//docs/components/select) and [React-Select](https://react-select.com/home) */\nconst Select = ({\n  className = undefined,\n  clearable = true,\n  disabled = false,\n  filterOption = undefined,\n  renderOptionLabel = undefined,\n  inputValue = undefined,\n  label: _label = undefined,\n  loading = false,\n  multiSelect = false,\n  name,\n  onInputChange = undefined,\n  options,\n  placeholder = undefined,\n  testId: _testId = undefined,\n}: SelectProps) => {\n  const { control, debugMode, getFieldState } = useFormContext();\n  const { error, invalid, required, testId } = getFieldState(name, _testId);\n\n  const [isFocused, setIsFocused] = useState(false);\n\n  const variants = selectVariants();\n  const classNames = variantsToClassNames(variants, className, 'base');\n\n  const {\n    getBaseProps,\n    getErrorMessageProps,\n    getHelperWrapperProps,\n    getLabelProps,\n    getTriggerProps,\n    getValueProps,\n    label,\n  } = useSelect({\n    children: [],\n    classNames,\n    errorMessage: JSON.stringify(error),\n    isDisabled: disabled,\n    isInvalid: invalid,\n    isLoading: loading,\n    isRequired: required,\n    label: _label,\n    labelPlacement: 'outside',\n    placeholder: ' ',\n  });\n\n  const showTestIdCopyButton = debugMode === 'debug-testids';\n  const showLabel = label || showTestIdCopyButton;\n\n  return (\n    <Controller\n      control={control}\n      name={name}\n      render={({\n        // eslint-disable-next-line @typescript-eslint/no-unused-vars\n        field: { onChange, value, ref, onBlur },\n      }) => (\n        <div\n          // eslint-disable-next-line react/jsx-props-no-spreading\n          {...getBaseProps()}\n          className={cn(classNames.base)}\n          data-testid={`${testId}_wrapper`}\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-required={required}\n        >\n          {showLabel && (\n            <label\n              className={classNames.label}\n              data-slot=\"label\"\n              htmlFor={`react-select-${name}-input`}\n              id={getLabelProps().id}\n            >\n              {label}\n              {showTestIdCopyButton && (\n                <FieldCopyTestIdButton testId={testId} />\n              )}\n            </label>\n          )}\n          <ReactSelect\n            aria-errormessage=\"\"\n            aria-labelledby={\n              getTriggerProps()['aria-labelledby']?.split(' ')[1]\n            }\n            aria-invalid={invalid}\n            classNames={{\n              control: () =>\n                cn(classNames.control, {\n                  [classNames.control_focused]: isFocused && !invalid,\n                }),\n              clearIndicator: () => classNames.clearIndicator,\n              dropdownIndicator: () => classNames.dropdownIndicator,\n              groupHeading: () => classNames.groupHeading,\n              indicatorsContainer: () => classNames.indicatorsContainer,\n              indicatorSeparator: () => classNames.indicatorSeparator,\n              input: () => classNames.input,\n              menu: () => classNames.menu,\n              menuList: () => classNames.menuList,\n              menuPortal: () => classNames.menuPortal,\n              multiValue: () => classNames.multiValue,\n              multiValueLabel: () =>\n                cn(classNames.multiValueLabel, `${getValueProps().className}`),\n              multiValueRemove: () => classNames.multiValueRemove,\n              noOptionsMessage: () => classNames.noOptionsMessage,\n              option: ({\n                isFocused: optionIsFocused,\n                isSelected: optionIsSelected,\n              }) =>\n                cn(classNames.option, {\n                  [classNames.option_focused]: optionIsFocused,\n                  [classNames.option_selected]: optionIsSelected,\n                }),\n              placeholder: () => classNames.placeholder,\n              singleValue: () =>\n                cn(classNames.singleValue, `${getValueProps().className}`),\n              valueContainer: () => classNames.valueContainer,\n            }}\n            components={{\n              Input: InputComponent,\n              Option: OptionComponent,\n              DropdownIndicator: DropdownIndicatorComponent,\n              Control: ControlComponent,\n            }}\n            // Does not affect the testId of the select, but is needed to pass it to sub-components\n            data-testid={testId}\n            filterOption={filterOption}\n            formatOptionLabel={renderOptionLabel}\n            inputValue={inputValue}\n            instanceId={name}\n            isClearable={clearable}\n            isDisabled={disabled}\n            isLoading={loading}\n            isMulti={multiSelect}\n            name={name}\n            // set menuPosition to fixed so that menu can be rendered\n            // inside Card / Modal components, menuShouldBlockScroll\n            // prevents container scroll when menu is open\n            menuPosition=\"fixed\"\n            menuShouldBlockScroll\n            options={options}\n            placeholder={placeholder}\n            onBlur={(_e) => {\n              setIsFocused(false);\n              return onBlur();\n            }}\n            onChange={(option) => {\n              if (multiSelect) {\n                onChange(\n                  (option as SelectOption[])?.map((_option) => _option.value),\n                );\n              } else {\n                onChange((option as SelectOption)?.value);\n              }\n            }}\n            onFocus={(_e) => {\n              setIsFocused(true);\n            }}\n            onInputChange={onInputChange}\n            ref={ref}\n            // set complete option as value by current field value\n            value={options.find((option) => option.value === value)}\n            unstyled\n          />\n          {error && (\n            // eslint-disable-next-line react/jsx-props-no-spreading\n            <div {...getHelperWrapperProps()}>\n              {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n              <div {...getErrorMessageProps()}>\n                <FieldValidationError error={error} />\n              </div>\n            </div>\n          )}\n        </div>\n      )}\n    />\n  );\n};\n\nexport default Select;\n","import Select from './Select';\n\nexport type { SelectProps } from './Select';\n\nexport { Select };\n\nexport default Select;\n"]}

package/dist/chunk-IBQCNI5H.js

@@ -0,0 +1,372 @@
+import {
+  FieldCopyTestIdButton_default
+} from "./chunk-2CRY7VDQ.js";
+import {
+  FieldValidationError_default
+} from "./chunk-ASPOGQPS.js";
+import {
+  useFieldArray,
+  useFormContext,
+  useInput
+} from "./chunk-T4N6TMUL.js";
+import {
+  toNullishString
+} from "./chunk-UAV6PVB4.js";
+import {
+  __spreadProps,
+  __spreadValues
+} from "./chunk-CRTRMMJ7.js";
+
+// src/FieldArray/FieldArray.tsx
+import { cn as cn5, tv, variantsToClassNames } from "@fuf-stack/pixel-utils";
+import { Button as Button3 } from "@fuf-stack/pixels";
+
+// src/FieldArray/subcomponents/FieldArrayElement.tsx
+import { useSortable as useSortable2 } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { cn as cn4 } from "@fuf-stack/pixel-utils";
+
+// src/FieldArray/subcomponents/ElementInsertAfterButton.tsx
+import { FaPlus } from "react-icons/fa6";
+import { cn } from "@fuf-stack/pixel-utils";
+import { Button } from "@fuf-stack/pixels";
+import { jsx } from "react/jsx-runtime";
+var ElementInsertAfterButton = ({
+  className = void 0,
+  onClick,
+  testId = void 0
+}) => {
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      className: cn(className),
+      color: "success",
+      icon: /* @__PURE__ */ jsx(FaPlus, {}),
+      onClick,
+      size: "sm",
+      testId,
+      variant: "light"
+    }
+  );
+};
+var ElementInsertAfterButton_default = ElementInsertAfterButton;
+
+// src/FieldArray/subcomponents/ElementRemoveButton.tsx
+import { FaTimes } from "react-icons/fa";
+import { cn as cn2 } from "@fuf-stack/pixel-utils";
+import { Button as Button2 } from "@fuf-stack/pixels";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var ElementRemoveButton = ({
+  className = void 0,
+  onClick,
+  testId = void 0
+}) => {
+  return /* @__PURE__ */ jsx2(
+    Button2,
+    {
+      ariaLabel: "remove element",
+      className: cn2(className),
+      color: "danger",
+      icon: /* @__PURE__ */ jsx2(FaTimes, {}),
+      onClick,
+      testId,
+      variant: "light"
+    }
+  );
+};
+var ElementRemoveButton_default = ElementRemoveButton;
+
+// src/FieldArray/subcomponents/SortDragHandle.tsx
+import { FaGripVertical } from "react-icons/fa";
+import { useSortable } from "@dnd-kit/sortable";
+import { cn as cn3 } from "@fuf-stack/pixel-utils";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var SortDragHandle = ({
+  className = void 0,
+  id,
+  testId = void 0
+}) => {
+  const { attributes, listeners } = useSortable({ id });
+  return /* @__PURE__ */ jsx3(
+    "div",
+    __spreadProps(__spreadValues(__spreadValues({
+      className: cn3(className),
+      "data-testid": testId
+    }, attributes), listeners), {
+      children: /* @__PURE__ */ jsx3(FaGripVertical, {})
+    })
+  );
+};
+var SortDragHandle_default = SortDragHandle;
+
+// src/FieldArray/subcomponents/FieldArrayElement.tsx
+import { Fragment, jsx as jsx4, jsxs } from "react/jsx-runtime";
+var FieldArrayElement = ({
+  children,
+  className,
+  fields,
+  id,
+  index,
+  insertAfter = false,
+  lastNotDeletable = true,
+  methods,
+  name,
+  sortable = false,
+  testId = void 0
+}) => {
+  var _a;
+  const { getFieldState } = useFormContext();
+  const { error, invalid } = getFieldState(`${name}`, void 0);
+  const { getHelperWrapperProps, getErrorMessageProps } = useInput({
+    classNames: { helperWrapper: "block" },
+    errorMessage: JSON.stringify(error),
+    isInvalid: invalid,
+    labelPlacement: "inside",
+    placeholder: " "
+  });
+  const { setNodeRef, transform, transition } = useSortable2({ id });
+  const sortingStyle = sortable ? {
+    transform: CSS.Translate.toString(transform),
+    transition
+  } : void 0;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "li",
+      {
+        className: cn4(className.listItem),
+        ref: setNodeRef,
+        style: sortingStyle,
+        children: [
+          sortable && /* @__PURE__ */ jsx4(
+            SortDragHandle_default,
+            {
+              className: className.sortDragHandle,
+              id,
+              testId: `${testId}_sort_drag_handle`
+            }
+          ),
+          /* @__PURE__ */ jsx4("div", { className: cn4(className.elementContent), "data-testid": testId, children }),
+          lastNotDeletable && fields.length === 1 ? null : /* @__PURE__ */ jsx4(
+            ElementRemoveButton_default,
+            {
+              className: className.removeButton,
+              onClick: () => methods.remove(),
+              testId: `${testId}_remove_button`
+            }
+          ),
+          insertAfter && index !== fields.length - 1 && /* @__PURE__ */ jsx4(
+            ElementInsertAfterButton_default,
+            {
+              className: className.insertAfterButton,
+              onClick: () => methods.insert(),
+              testId: `${testId}_insert_after_button`
+            }
+          )
+        ]
+      }
+    ),
+    error && typeof error[index] !== "undefined" && /* @__PURE__ */ jsx4("div", __spreadProps(__spreadValues({}, getHelperWrapperProps()), { children: /* @__PURE__ */ jsx4("div", __spreadProps(__spreadValues({}, getErrorMessageProps()), { children: /* @__PURE__ */ jsx4(
+      FieldValidationError_default,
+      {
+        error: (_a = error[Number(index)]) == null ? void 0 : _a._errors
+      }
+    ) })) }))
+  ] });
+};
+var FieldArrayElement_default = FieldArrayElement;
+
+// src/FieldArray/subcomponents/SortContext.tsx
+import {
+  closestCenter,
+  DndContext,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors
+} from "@dnd-kit/core";
+import {
+  restrictToVerticalAxis,
+  restrictToWindowEdges
+} from "@dnd-kit/modifiers";
+import {
+  SortableContext,
+  verticalListSortingStrategy
+} from "@dnd-kit/sortable";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var SortContext = ({
+  children,
+  sortable,
+  fields,
+  move
+}) => {
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor)
+  );
+  if (!sortable) {
+    return children;
+  }
+  const handleDragEnd = (event) => {
+    const { active, over } = event;
+    if (active.id !== (over == null ? void 0 : over.id)) {
+      const oldIndex = fields.findIndex((field) => field.id === active.id);
+      const newIndex = fields.findIndex((field) => field.id === (over == null ? void 0 : over.id));
+      move(oldIndex, newIndex);
+    }
+  };
+  return /* @__PURE__ */ jsx5(
+    DndContext,
+    {
+      collisionDetection: closestCenter,
+      modifiers: [restrictToVerticalAxis, restrictToWindowEdges],
+      onDragEnd: handleDragEnd,
+      sensors,
+      children: /* @__PURE__ */ jsx5(
+        SortableContext,
+        {
+          items: fields.map((field) => field.id),
+          strategy: verticalListSortingStrategy,
+          children
+        }
+      )
+    }
+  );
+};
+var SortContext_default = SortContext;
+
+// src/FieldArray/FieldArray.tsx
+import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
+var fieldArrayVariants = tv({
+  slots: {
+    appendButton: "w-full",
+    elementContent: "flex-grow",
+    insertAfterButton: "text-xs font-medium",
+    label: "!pointer-events-auto !static !z-0 -mb-1 ml-1 !inline-block",
+    list: "m-0 w-full list-none",
+    listItem: "mb-4 flex w-full flex-row items-center",
+    removeButton: "ml-1",
+    sortDragHandle: "mr-2 text-base text-xl"
+  }
+});
+var FieldArray = ({
+  appendButtonText = "Add Element",
+  children,
+  className: _className = void 0,
+  duplicate = false,
+  elementInitialValue: _elementInitialValue = null,
+  insertAfter = false,
+  label: _label = void 0,
+  lastElementNotDeletable = true,
+  name,
+  sortable = false,
+  testId: _testId = void 0
+}) => {
+  var _a;
+  const variants = fieldArrayVariants();
+  const className = variantsToClassNames(variants, _className, "list");
+  const {
+    control,
+    debugMode,
+    getValues,
+    getFieldState,
+    trigger
+    // watch
+  } = useFormContext();
+  const { fields, append, remove, insert, move } = useFieldArray({
+    control,
+    name
+  });
+  const { error, testId, invalid, required } = getFieldState(name, _testId);
+  const { label, getLabelProps, getHelperWrapperProps, getErrorMessageProps } = useInput({
+    isInvalid: invalid,
+    isRequired: required,
+    errorMessage: JSON.stringify(error),
+    label: _label,
+    labelPlacement: "inside",
+    placeholder: " ",
+    classNames: { helperWrapper: "block" }
+  });
+  const elementInitialValue = toNullishString(_elementInitialValue);
+  if (lastElementNotDeletable && fields.length === 0) {
+    append(elementInitialValue);
+  }
+  const showTestIdCopyButton = debugMode === "debug-testids";
+  const showLabel = label || showTestIdCopyButton;
+  return /* @__PURE__ */ jsx6(SortContext_default, { sortable, move, fields, children: /* @__PURE__ */ jsxs2(
+    "ul",
+    {
+      className: className.list,
+      "data-testid": testId,
+      onBlur: () => trigger(`${name}`),
+      children: [
+        showLabel && /* @__PURE__ */ jsxs2(Fragment2, { children: [
+          label && // eslint-disable-next-line jsx-a11y/label-has-associated-control
+          /* @__PURE__ */ jsx6(
+            "label",
+            __spreadProps(__spreadValues({}, getLabelProps()), {
+              className: cn5((_a = getLabelProps()) == null ? void 0 : _a.className, className.label),
+              children: label
+            })
+          ),
+          showTestIdCopyButton && /* @__PURE__ */ jsx6(FieldCopyTestIdButton_default, { testId })
+        ] }),
+        fields.map((field, index) => {
+          const methods = {
+            append: () => append(elementInitialValue),
+            duplicate: () => {
+              const values = getValues(name);
+              insert(index + 1, values[index]);
+            },
+            insert: () => insert(index + 1, elementInitialValue),
+            remove: () => remove(index)
+          };
+          return /* @__PURE__ */ jsx6(
+            FieldArrayElement_default,
+            {
+              className,
+              fields,
+              id: field.id,
+              index,
+              duplicate,
+              insertAfter,
+              lastNotDeletable: lastElementNotDeletable,
+              methods,
+              name,
+              sortable,
+              testId: `${testId}_${index}`,
+              children: children({
+                index,
+                length: fields.length,
+                methods,
+                name: `${name}.${index}`,
+                testId: `${testId}_${index}`
+              })
+            },
+            field.id
+          );
+        }),
+        /* @__PURE__ */ jsx6(
+          Button3,
+          {
+            className: className.appendButton,
+            onClick: () => append(elementInitialValue),
+            size: "sm",
+            testId: `${testId}_append_button`,
+            children: appendButtonText
+          }
+        ),
+        (error == null ? void 0 : error._errors) && /* @__PURE__ */ jsx6("div", __spreadProps(__spreadValues({}, getHelperWrapperProps()), { children: /* @__PURE__ */ jsx6("div", __spreadProps(__spreadValues({}, getErrorMessageProps()), { children: /* @__PURE__ */ jsx6(FieldValidationError_default, { error: error == null ? void 0 : error._errors }) })) }))
+      ]
+    }
+  ) });
+};
+var FieldArray_default = FieldArray;
+
+// src/FieldArray/index.ts
+var FieldArray_default2 = FieldArray_default;
+
+export {
+  FieldArray_default,
+  FieldArray_default2
+};
+//# sourceMappingURL=chunk-IBQCNI5H.js.map