@fuf-stack/uniform 0.9.0 → 0.9.2

package/dist/chunk-KN7JXFK5.cjs

@@ -0,0 +1,237 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
+
+var _chunkKMMS4G7Acjs = require('./chunk-KMMS4G7A.cjs');
+
+
+var _chunkQTL5FREEcjs = require('./chunk-QTL5FREE.cjs');
+
+
+var _chunkLDCRR7FPcjs = require('./chunk-LDCRR7FP.cjs');
+
+// src/Select/Select.tsx
+var _react = require('react');
+var _reacthookform = require('react-hook-form');
+var _reactselect = require('react-select'); var _reactselect2 = _interopRequireDefault(_reactselect);
+var _select = require('@nextui-org/select');
+var _pixelutils = require('@fuf-stack/pixel-utils');
+var _jsxruntime = require('react/jsx-runtime');
+var selectVariants = _pixelutils.tv.call(void 0, {
+  slots: {
+    base: "",
+    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 shadow-sm !duration-150 transition-background hover:border-default-400 motion-reduce:transition-none",
+    control_focused: "border-primary hover:border-primary",
+    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",
+    loadingIndicator: "",
+    loadingMessage: "",
+    menu: "mt-2 rounded-xl border border-default-200 bg-background p-1 shadow-lg",
+    menuList: "",
+    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: "py-0.5 pl-1 text-foreground-500",
+    selectContainer: "",
+    singleValue: "!ml-1 !leading-7",
+    valueContainer: "gap-1 p-1"
+  },
+  variants: {
+    invalid: {
+      true: {
+        control: "border-danger hover:border-danger"
+      }
+    }
+  }
+});
+var InputComponent = (props) => {
+  const testId = `${props.selectProps["data-testid"]}_input`;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactselect.components.Input, { "data-testid": testId, ...props });
+};
+var OptionComponent = (props) => {
+  const testId = `${props.selectProps["data-testid"]}_option_${_nullishCoalesce(_optionalChain([props, 'optionalAccess', _ => _.data, 'optionalAccess', _2 => _2.testId]), () => ( _optionalChain([props, 'optionalAccess', _3 => _3.data, 'optionalAccess', _4 => _4.value])))}`;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { "data-testid": testId, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactselect.components.Option, { ...props }) });
+};
+var DropdownIndicatorComponent = (props) => {
+  const testId = _optionalChain([props, 'optionalAccess', _5 => _5.selectProps, 'access', _6 => _6["data-testid"]]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { "data-testid": `${testId}_dropdown`, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactselect.components.DropdownIndicator, { ...props }) });
+};
+var Select = ({
+  className = void 0,
+  clearable = true,
+  disabled = false,
+  filterOption = void 0,
+  formatOptionLabel = 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 } = _chunkLDCRR7FPcjs.useFormContext.call(void 0, );
+  const { error, invalid, required, testId } = getFieldState(name, _testId);
+  const [isFocused, setIsFocused] = _react.useState.call(void 0, false);
+  const variants = selectVariants({ invalid });
+  const classNames = _pixelutils.variantsToClassNames.call(void 0, variants, className, "base");
+  const {
+    getBaseProps,
+    getErrorMessageProps,
+    getHelperWrapperProps,
+    getLabelProps,
+    getMainWrapperProps,
+    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: " "
+  });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _reacthookform.Controller,
+    {
+      control,
+      name,
+      render: ({
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        field: { onChange, value, ref, onBlur }
+      }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "div",
+        {
+          ...getBaseProps(),
+          className: _pixelutils.cn.call(void 0, classNames.base, "group mt-2"),
+          "data-testid": testId,
+          children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { ...getMainWrapperProps(), children: [
+            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "relative", children: [
+              label && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+                "label",
+                {
+                  htmlFor: `react-select-${name}-input`,
+                  className: _pixelutils.cn.call(void 0, 
+                    getLabelProps().className.replace("absolute", "relative").replace("block", ""),
+                    "!pointer-events-auto bottom-2 ml-1"
+                  ),
+                  children: [
+                    label,
+                    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkKMMS4G7Acjs.FieldCopyTestIdButton_default, { testId })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                _reactselect2.default,
+                {
+                  "aria-errormessage": "",
+                  "aria-labelledby": _optionalChain([getTriggerProps, 'call', _7 => _7(), 'access', _8 => _8["aria-labelledby"], 'optionalAccess', _9 => _9.split, 'call', _10 => _10(" "), 'access', _11 => _11[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,
+                    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
+                  },
+                  "data-testid": `${testId}_select`,
+                  filterOption,
+                  formatOptionLabel,
+                  inputValue,
+                  instanceId: name,
+                  isClearable: clearable,
+                  isDisabled: disabled,
+                  isLoading: loading,
+                  isMulti: multiSelect,
+                  name,
+                  menuPosition: "fixed",
+                  menuShouldBlockScroll: true,
+                  options,
+                  placeholder,
+                  value: options.find((option) => option.value === value),
+                  onBlur: (_e) => {
+                    setIsFocused(false);
+                    return onBlur();
+                  },
+                  onChange: (option) => {
+                    if (multiSelect) {
+                      const transformedOptions = [];
+                      _optionalChain([option, 'optionalAccess', _12 => _12.forEach, 'call', _13 => _13((o) => {
+                        transformedOptions.push(o.value);
+                      })]);
+                      onChange(transformedOptions);
+                    } else {
+                      onChange(option && option.value);
+                    }
+                  },
+                  onFocus: (_e) => {
+                    setIsFocused(true);
+                  },
+                  onInputChange,
+                  ref,
+                  unstyled: true
+                }
+              )
+            ] }),
+            error && // eslint-disable-next-line react/jsx-props-no-spreading
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ...getHelperWrapperProps(), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ...getErrorMessageProps(), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkQTL5FREEcjs.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-KN7JXFK5.cjs.map

package/dist/chunk-KN7JXFK5.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/uniform/uniform/packages/uniform/dist/chunk-KN7JXFK5.cjs","../src/Select/Select.tsx","../src/Select/index.ts"],"names":["Select_default"],"mappings":"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","file":"/home/runner/work/uniform/uniform/packages/uniform/dist/chunk-KN7JXFK5.cjs","sourcesContent":[null,"import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { Props } from 'react-select';\n\nimport { useState } from 'react';\nimport { Controller } from 'react-hook-form';\nimport ReactSelect, { components } from 'react-select';\n\nimport { useSelect } from '@nextui-org/select';\n\nimport { cn, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { useFormContext } from '../hooks';\nimport { FieldCopyTestIdButton } from '../partials/FieldCopyTestIdButton';\nimport { FieldValidationError } from '../partials/FieldValidationError';\n\nexport const selectVariants = tv({\n  slots: {\n    base: '',\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 shadow-sm !duration-150 transition-background hover:border-default-400 motion-reduce:transition-none',\n    control_focused: 'border-primary hover:border-primary',\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    loadingIndicator: '',\n    loadingMessage: '',\n    menu: 'mt-2 rounded-xl border border-default-200 bg-background p-1 shadow-lg',\n    menuList: '',\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: 'py-0.5 pl-1 text-foreground-500',\n    selectContainer: '',\n    singleValue: '!ml-1 !leading-7',\n    valueContainer: 'gap-1 p-1',\n  },\n  variants: {\n    invalid: {\n      true: {\n        control: 'border-danger hover:border-danger',\n      },\n    },\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  formatOptionLabel?: 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']}_input`;\n  // eslint-disable-next-line react/jsx-props-no-spreading\n  return <components.Input data-testid={testId} {...props} />;\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']}_option_${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}_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 [NextUI Select](https://nextui.org/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  formatOptionLabel = 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, getFieldState } = useFormContext();\n  const { error, invalid, required, testId } = getFieldState(name, _testId);\n\n  const [isFocused, setIsFocused] = useState(false);\n\n  const variants = selectVariants({ invalid });\n  const classNames = variantsToClassNames(variants, className, 'base');\n\n  const {\n    getBaseProps,\n    getErrorMessageProps,\n    getHelperWrapperProps,\n    getLabelProps,\n    getMainWrapperProps,\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  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, 'group mt-2')}\n          data-testid={testId}\n        >\n          {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n          <div {...getMainWrapperProps()}>\n            <div className=\"relative\">\n              {label && (\n                <label\n                  htmlFor={`react-select-${name}-input`}\n                  className={cn(\n                    getLabelProps()\n                      .className.replace('absolute', 'relative')\n                      .replace('block', ''),\n                    '!pointer-events-auto bottom-2 ml-1',\n                  )}\n                >\n                  {label}\n                  <FieldCopyTestIdButton testId={testId} />\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                  multiValue: () => classNames.multiValue,\n                  multiValueLabel: () =>\n                    cn(\n                      classNames.multiValueLabel,\n                      `${getValueProps().className}`,\n                    ),\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                }}\n                // Does not affect the testId of the select, but is needed to pass it to sub-components\n                data-testid={`${testId}_select`}\n                filterOption={filterOption}\n                formatOptionLabel={formatOptionLabel}\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                value={options.find((option) => option.value === value)}\n                onBlur={(_e) => {\n                  setIsFocused(false);\n                  return onBlur();\n                }}\n                onChange={(option) => {\n                  if (multiSelect) {\n                    const transformedOptions: string[] = [];\n                    // @ts-expect-error in this case option is an array.\n                    option?.forEach((o: { value: string }) => {\n                      transformedOptions.push(o.value);\n                    });\n                    onChange(transformedOptions);\n                  } else {\n                    // @ts-expect-error in this case option is of type SelectOption and has the property value.\n                    onChange(option && option.value);\n                  }\n                }}\n                onFocus={(_e) => {\n                  setIsFocused(true);\n                }}\n                onInputChange={onInputChange}\n                ref={ref}\n                unstyled\n              />\n            </div>\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        </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/index.cjs

@@ -27,7 +27,7 @@ var _chunk5UHHZ7KYcjs = require('./chunk-5UHHZ7KY.cjs');
 var _chunkYUAJN6HWcjs = require('./chunk-YUAJN6HW.cjs');
 
 
-var _chunkWCQYZ5RIcjs = require('./chunk-WCQYZ5RI.cjs');
+var _chunkKN7JXFK5cjs = require('./chunk-KN7JXFK5.cjs');
 
 
 var _chunkKMMS4G7Acjs = require('./chunk-KMMS4G7A.cjs');
@@ -57,5 +57,5 @@ var _chunkBBB4FEY6cjs = require('./chunk-BBB4FEY6.cjs');
 
 
 
-exports.CheckboxGroup = _chunkW24WP5YEcjs.CheckboxGroup_default; exports.FieldArray = _chunkTNELIBCVcjs.FieldArray_default; exports.FieldCopyTestIdButton = _chunkKMMS4G7Acjs.FieldCopyTestIdButton_default; exports.FieldValidationError = _chunkQTL5FREEcjs.FieldValidationError_default; exports.Form = _chunkQYZV7ZUYcjs.Form_default; exports.Grid = _chunk6GN255GPcjs.Grid_default; exports.Input = _chunk5UHHZ7KYcjs.Input_default; exports.RadioGroup = _chunkYUAJN6HWcjs.RadioGroup_default; exports.Select = _chunkWCQYZ5RIcjs.Select_default; exports.SubmitButton = _chunkMKM7ZYRNcjs.SubmitButton_default; exports.Switch = _chunk3XNW2VQ7cjs.Switch_default; exports.TextArea = _chunkOCR2UWG2cjs.TextArea_default; exports.recursiveFieldKeySearch = _chunkLDCRR7FPcjs.recursiveFieldKeySearch; exports.slugify = _chunkBBB4FEY6cjs.slugify; exports.useFormContext = _chunkLDCRR7FPcjs.useFormContext;
+exports.CheckboxGroup = _chunkW24WP5YEcjs.CheckboxGroup_default; exports.FieldArray = _chunkTNELIBCVcjs.FieldArray_default; exports.FieldCopyTestIdButton = _chunkKMMS4G7Acjs.FieldCopyTestIdButton_default; exports.FieldValidationError = _chunkQTL5FREEcjs.FieldValidationError_default; exports.Form = _chunkQYZV7ZUYcjs.Form_default; exports.Grid = _chunk6GN255GPcjs.Grid_default; exports.Input = _chunk5UHHZ7KYcjs.Input_default; exports.RadioGroup = _chunkYUAJN6HWcjs.RadioGroup_default; exports.Select = _chunkKN7JXFK5cjs.Select_default; exports.SubmitButton = _chunkMKM7ZYRNcjs.SubmitButton_default; exports.Switch = _chunk3XNW2VQ7cjs.Switch_default; exports.TextArea = _chunkOCR2UWG2cjs.TextArea_default; exports.recursiveFieldKeySearch = _chunkLDCRR7FPcjs.recursiveFieldKeySearch; exports.slugify = _chunkBBB4FEY6cjs.slugify; exports.useFormContext = _chunkLDCRR7FPcjs.useFormContext;
 //# sourceMappingURL=index.cjs.map

package/dist/index.d.cts

@@ -8,7 +8,7 @@ export { I as Input, a as InputProps } from './Input-B6dNQiiD.cjs';
 export { F as FieldCopyTestIdButton, a as FieldCopyTestIdButtonProps } from './FieldCopyTestIdButton-D-z1usqE.cjs';
 export { F as FieldValidationError, a as FieldValidationErrorProps } from './FieldValidationError-BSXedjCA.cjs';
 export { R as RadioGroup, a as RadioGroupProps } from './RadioGroup-BU4K9cnS.cjs';
-export { S as Select, a as SelectProps } from './Select-Mp6Y00dT.cjs';
+export { S as Select, a as SelectProps } from './Select-fR2SSJSx.cjs';
 export { S as SubmitButton, a as SubmitButtonProps } from './SubmitButton-BEp_zzwf.cjs';
 export { S as Switch, a as SwitchProps } from './Switch-DmjDKgKs.cjs';
 export { T as TextArea, a as TextAreaProps } from './TextArea-B-sKvTkd.cjs';
@@ -17,5 +17,8 @@ import 'react-hook-form';
 import '@fuf-stack/veto';
 import 'react';
 import 'slug';
+import 'tailwind-variants';
+import 'tailwind-variants/dist/config.js';
+import '@fuf-stack/pixel-utils';
 import 'react-select';
 import '@fuf-stack/pixels';

package/dist/index.d.ts

@@ -8,7 +8,7 @@ export { I as Input, a as InputProps } from './Input-B6dNQiiD.js';
 export { F as FieldCopyTestIdButton, a as FieldCopyTestIdButtonProps } from './FieldCopyTestIdButton-D-z1usqE.js';
 export { F as FieldValidationError, a as FieldValidationErrorProps } from './FieldValidationError-BSXedjCA.js';
 export { R as RadioGroup, a as RadioGroupProps } from './RadioGroup-BU4K9cnS.js';
-export { S as Select, a as SelectProps } from './Select-Mp6Y00dT.js';
+export { S as Select, a as SelectProps } from './Select-fR2SSJSx.js';
 export { S as SubmitButton, a as SubmitButtonProps } from './SubmitButton-BEp_zzwf.js';
 export { S as Switch, a as SwitchProps } from './Switch-DmjDKgKs.js';
 export { T as TextArea, a as TextAreaProps } from './TextArea-B-sKvTkd.js';
@@ -17,5 +17,8 @@ import 'react-hook-form';
 import '@fuf-stack/veto';
 import 'react';
 import 'slug';
+import 'tailwind-variants';
+import 'tailwind-variants/dist/config.js';
+import '@fuf-stack/pixel-utils';
 import 'react-select';
 import '@fuf-stack/pixels';

package/dist/index.js

@@ -27,7 +27,7 @@ import {
 } from "./chunk-ARUVDZFG.js";
 import {
   Select_default
-} from "./chunk-C2AWFTC5.js";
+} from "./chunk-HQLY2H3C.js";
 import {
   FieldCopyTestIdButton_default
 } from "./chunk-T3CCNJHK.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fuf-stack/uniform",
-  "version": "0.9.0",
+  "version": "0.9.2",
   "description": "fuf react form library",
   "author": "Hannes Tiede",
   "homepage": "https://github.com/fuf-stack/uniform#readme",
@@ -124,7 +124,7 @@
     "react-hook-form": "7.53.0",
     "react-select": "5.8.1",
     "slug": "9.1.0",
-    "@fuf-stack/pixel-utils": "0.2.0",
+    "@fuf-stack/pixel-utils": "0.3.0",
     "@fuf-stack/pixels": "0.24.0",
     "@fuf-stack/veto": "0.5.0"
   },
@@ -136,9 +136,9 @@
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "@repo/storybook-config": "0.0.1",
+    "@repo/tailwind-config": "0.0.1",
     "@repo/tsup-config": "0.0.1",
-    "@repo/vite-config": "0.0.1",
-    "@repo/tailwind-config": "0.0.1"
+    "@repo/vite-config": "0.0.1"
   },
   "scripts": {
     "build": "tsup --config node_modules/@repo/tsup-config/config.ts",

package/dist/Select-Mp6Y00dT.d.cts

@@ -1,40 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { Props } from 'react-select';
-
-type SelectOption = {
-    /** option label */
-    label?: React.ReactNode;
-    /** option value */
-    value: string;
-};
-interface SelectProps {
-    /** CSS class name */
-    className?: string;
-    /** Determine if the  */
-    clearable?: boolean;
-    /** Set the select to disabled state. */
-    disabled?: boolean;
-    filterOption?: undefined | ((option?: SelectOption, inputValue?: string) => boolean);
-    /** The value of the search input */
-    inputValue?: string;
-    /** Label that should be associated with the select. */
-    label?: React.ReactNode;
-    /** Set the select to a loading state. */
-    loading?: boolean;
-    /** switch between single and multi select mode. */
-    multiSelect?: boolean;
-    /** The name for the Select component, used by react-hook-form */
-    name: string;
-    /** Placeholder that is displayed when nothing is selected */
-    placeholder?: string;
-    /** The options for the Select component */
-    options: SelectOption[];
-    /** Handle change events on the input */
-    onInputChange?: Props['onInputChange'];
-    /** HTML data-testid attribute used in e2e tests */
-    testId?: string;
-}
-/** Select component based on [NextUI Select](https://nextui.org/docs/components/select) and [React-Select](https://react-select.com/home) */
-declare const Select: ({ className, clearable, disabled, filterOption, inputValue, label: _label, loading, multiSelect, name, onInputChange, options, placeholder, testId: _testId, }: SelectProps) => react_jsx_runtime.JSX.Element;
-
-export { Select as S, type SelectProps as a };

package/dist/Select-Mp6Y00dT.d.ts

@@ -1,40 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { Props } from 'react-select';
-
-type SelectOption = {
-    /** option label */
-    label?: React.ReactNode;
-    /** option value */
-    value: string;
-};
-interface SelectProps {
-    /** CSS class name */
-    className?: string;
-    /** Determine if the  */
-    clearable?: boolean;
-    /** Set the select to disabled state. */
-    disabled?: boolean;
-    filterOption?: undefined | ((option?: SelectOption, inputValue?: string) => boolean);
-    /** The value of the search input */
-    inputValue?: string;
-    /** Label that should be associated with the select. */
-    label?: React.ReactNode;
-    /** Set the select to a loading state. */
-    loading?: boolean;
-    /** switch between single and multi select mode. */
-    multiSelect?: boolean;
-    /** The name for the Select component, used by react-hook-form */
-    name: string;
-    /** Placeholder that is displayed when nothing is selected */
-    placeholder?: string;
-    /** The options for the Select component */
-    options: SelectOption[];
-    /** Handle change events on the input */
-    onInputChange?: Props['onInputChange'];
-    /** HTML data-testid attribute used in e2e tests */
-    testId?: string;
-}
-/** Select component based on [NextUI Select](https://nextui.org/docs/components/select) and [React-Select](https://react-select.com/home) */
-declare const Select: ({ className, clearable, disabled, filterOption, inputValue, label: _label, loading, multiSelect, name, onInputChange, options, placeholder, testId: _testId, }: SelectProps) => react_jsx_runtime.JSX.Element;
-
-export { Select as S, type SelectProps as a };