@fuf-stack/uniform 0.9.0 → 0.9.2

package/dist/chunk-C2AWFTC5.js

@@ -1,239 +0,0 @@
-import {
-  FieldCopyTestIdButton_default
-} from "./chunk-T3CCNJHK.js";
-import {
-  FieldValidationError_default
-} from "./chunk-DBLODROX.js";
-import {
-  useFormContext
-} from "./chunk-HWDQZO7X.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-C2AWFTC5.js.map

package/dist/chunk-C2AWFTC5.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/Select/Select.tsx","../src/Select/index.ts"],"sourcesContent":["import type { Props } from 'react-select';\n\nimport { Controller } from 'react-hook-form';\nimport ReactSelect, { components } from 'react-select';\n\nimport { useSelect } from '@nextui-org/select';\n\nimport { cn, tv } from '@fuf-stack/pixel-utils';\n\nimport { useFormContext } from '../hooks';\nimport { FieldCopyTestIdButton } from '../partials/FieldCopyTestIdButton';\nimport { FieldValidationError } from '../partials/FieldValidationError';\n\ntype SelectOption = {\n  /** option label */\n  label?: React.ReactNode;\n  /** option value */\n  value: string;\n};\n\nexport interface SelectProps {\n  /** CSS class name */\n  className?: string; // string;\n  /** Determine if the  */\n  clearable?: boolean;\n  /** Set the select to disabled state. */\n  disabled?: boolean;\n\n  filterOption?:\n    | undefined\n    | ((option?: SelectOption, inputValue?: string) => boolean);\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\nexport const selectVariants = tv({\n  slots: {\n    clearIndicator:\n      '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',\n    control:\n      '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',\n    crossIcon: '',\n    downChevron: '',\n    dropdownIndicator:\n      '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',\n    group: '',\n    groupHeading: 'mb-1 ml-3 mt-2 text-sm text-neutral-500',\n    indicatorsContainer: 'gap-1 p-1',\n    indicatorSeparator: 'bg-gray-300 dark:bg-default-300',\n    input: 'py-0.5 pl-1',\n    loadingIndicator: '',\n    loadingMessage: '',\n    menu: 'mt-2 rounded-xl border border-gray-200 bg-default-50 p-1 shadow-sm dark:border-gray-900 dark:bg-default-50',\n    menuList: '',\n    // ensure menu has same z-index as modal so it is visible when rendered in modal\n    // see: https://github.com/nextui-org/nextui/blob/main/packages/core/theme/src/components/modal.ts (see z-50)\n    menuPortal: '!z-50',\n    multiValue:\n      'items-center gap-1.5 rounded bg-gray-100 py-0.5 pl-2 pr-1 dark:bg-default-100',\n    multiValueContainer: '',\n    multiValueLabel: 'py-0.5 leading-6',\n    multiValueRemove:\n      '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',\n    noOptionsMessage:\n      'rounded-sm bg-gray-50 p-2 text-neutral-500 dark:bg-default-100',\n    option: 'rounded px-3 py-2 hover:cursor-pointer',\n    placeholder: 'py-0.5 pl-1 text-neutral-500',\n    selectContainer: '',\n    singleValue: '!ml-1 !leading-7',\n    valueContainer: 'gap-1 p-1',\n  },\n  variants: {\n    invalid: {\n      true: {\n        control:\n          'border-danger hover:border-danger dark:border-danger hover:dark:border-danger',\n      },\n    },\n    focused: {\n      true: {\n        option:\n          'bg-gray-100 active:bg-gray-200 dark:bg-default-100 dark:active:bg-default-200',\n      },\n    },\n    optionSelected: {\n      true: { option: 'bg-gray-300 dark:bg-default-300' },\n    },\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  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 {\n    label,\n    getLabelProps,\n    getTriggerProps,\n    getValueProps,\n    getHelperWrapperProps,\n    getErrorMessageProps,\n  } = useSelect({\n    isLoading: loading,\n    isInvalid: invalid,\n    isRequired: required,\n    isDisabled: disabled,\n    errorMessage: JSON.stringify(error),\n    label: _label,\n    labelPlacement: 'outside',\n    children: [],\n  });\n\n  const {\n    clearIndicator: clearIndicatorSlot,\n    control: controlSlot,\n    dropdownIndicator: dropdownIndicatorSlot,\n    groupHeading: groupHeadingSlot,\n    indicatorsContainer: indicatorContainerSlot,\n    indicatorSeparator: indicatorSeparatorSlot,\n    input: inputSlot,\n    menu: menuSlot,\n    menuPortal: menuPortalSlot,\n    multiValue: multiValueSlot,\n    multiValueLabel: multiValueLabelSlot,\n    multiValueRemove: multiValueRemoveSlot,\n    noOptionsMessage: noOptionsMessageSlot,\n    option: optionSlot,\n    placeholder: placeholderSlot,\n    singleValue: singleValueSlot,\n    valueContainer: valueContainerSlot,\n  } = selectVariants({ invalid });\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 className={cn(className, 'mt-2')} data-testid={`${testId}_select`}>\n          {label && (\n            <label\n              htmlFor={`react-select-${name}-input`} // {getTriggerProps().id}\n              className={`${getLabelProps().className} !pointer-events-auto !static -mb-1 ml-1`}\n            >\n              {label}\n              <FieldCopyTestIdButton testId={testId} />\n            </label>\n          )}\n          <ReactSelect\n            aria-errormessage=\"\"\n            aria-invalid={invalid}\n            // Does not affect the testId of the select, but is needed to pass it to sub-components\n            data-testid={`${testId}_select`}\n            // eslint-disable-next-line react/jsx-props-no-spreading\n            {...() => {\n              // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/naming-convention\n              const { className: _className, ...rest } = getTriggerProps();\n              return rest;\n            }}\n            aria-labelledby={\n              getTriggerProps()['aria-labelledby']?.split(' ')[1]\n            }\n            classNames={{\n              control: ({ isFocused }) =>\n                // border focus style\n                controlSlot({\n                  className: !invalid && isFocused && '!border-primary',\n                }),\n              placeholder: () => placeholderSlot(),\n              input: () => inputSlot(),\n              valueContainer: () => valueContainerSlot(),\n              singleValue: () =>\n                singleValueSlot({\n                  className: `${getValueProps().className}`,\n                }),\n              multiValue: () => multiValueSlot(),\n              multiValueLabel: () =>\n                multiValueLabelSlot({\n                  className: `${getValueProps().className}`,\n                }),\n              multiValueRemove: () => multiValueRemoveSlot(),\n              indicatorsContainer: () => indicatorContainerSlot(),\n              clearIndicator: () => clearIndicatorSlot(),\n              indicatorSeparator: () => indicatorSeparatorSlot(),\n              dropdownIndicator: () => dropdownIndicatorSlot(),\n              menu: () => menuSlot(),\n              groupHeading: () => groupHeadingSlot(),\n              option: ({ isFocused, isSelected }) =>\n                optionSlot({\n                  focused: isFocused,\n                  optionSelected: isSelected,\n                }),\n              noOptionsMessage: () => noOptionsMessageSlot(),\n              menuPortal: () => menuPortalSlot(),\n            }}\n            components={{\n              Input: InputComponent,\n              Option: OptionComponent,\n              DropdownIndicator: DropdownIndicatorComponent,\n            }}\n            filterOption={filterOption}\n            instanceId={name}\n            inputValue={inputValue}\n            isClearable={clearable}\n            isDisabled={disabled}\n            isLoading={loading}\n            isMulti={multiSelect}\n            options={options}\n            placeholder={placeholder}\n            unstyled\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            onInputChange={onInputChange}\n            // attach menu modal or body so it works in card and modal\n            menuPortalTarget={\n              (document.getElementById('modal_body')?.parentNode\n                ?.parentNode as HTMLElement) || document.body\n            }\n            value={options.find((option) => option.value === value)}\n            onBlur={onBlur}\n            name={name}\n            ref={ref}\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"],"mappings":"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","names":["Select_default"]}

package/dist/chunk-WCQYZ5RI.cjs

@@ -1,239 +0,0 @@
-"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 _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 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 selectVariants = _pixelutils.tv.call(void 0, {
-  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 } = _chunkLDCRR7FPcjs.useFormContext.call(void 0, );
-  const { error, invalid, required, testId } = getFieldState(name, _testId);
-  const {
-    label,
-    getLabelProps,
-    getTriggerProps,
-    getValueProps,
-    getHelperWrapperProps,
-    getErrorMessageProps
-  } = _select.useSelect.call(void 0, {
-    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__ */ _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.jsxs.call(void 0, "div", { className: _pixelutils.cn.call(void 0, className, "mt-2"), "data-testid": `${testId}_select`, children: [
-        label && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-          "label",
-          {
-            htmlFor: `react-select-${name}-input`,
-            className: `${getLabelProps().className} !pointer-events-auto !static -mb-1 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-invalid": invalid,
-            "data-testid": `${testId}_select`,
-            ...() => {
-              const { className: _className, ...rest } = getTriggerProps();
-              return rest;
-            },
-            "aria-labelledby": _optionalChain([getTriggerProps, 'call', _7 => _7(), 'access', _8 => _8["aria-labelledby"], 'optionalAccess', _9 => _9.split, 'call', _10 => _10(" "), 'access', _11 => _11[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 = [];
-                _optionalChain([option, 'optionalAccess', _12 => _12.forEach, 'call', _13 => _13((o) => {
-                  transformedOptions.push(o.value);
-                })]);
-                onChange(transformedOptions);
-              } else {
-                onChange(option && option.value);
-              }
-            },
-            onInputChange,
-            menuPortalTarget: _optionalChain([document, 'access', _14 => _14.getElementById, 'call', _15 => _15("modal_body"), 'optionalAccess', _16 => _16.parentNode, 'optionalAccess', _17 => _17.parentNode]) || document.body,
-            value: options.find((option) => option.value === value),
-            onBlur,
-            name,
-            ref
-          }
-        ),
-        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-WCQYZ5RI.cjs.map

package/dist/chunk-WCQYZ5RI.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["/home/runner/work/uniform/uniform/packages/uniform/dist/chunk-WCQYZ5RI.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-WCQYZ5RI.cjs","sourcesContent":[null,"import type { Props } from 'react-select';\n\nimport { Controller } from 'react-hook-form';\nimport ReactSelect, { components } from 'react-select';\n\nimport { useSelect } from '@nextui-org/select';\n\nimport { cn, tv } from '@fuf-stack/pixel-utils';\n\nimport { useFormContext } from '../hooks';\nimport { FieldCopyTestIdButton } from '../partials/FieldCopyTestIdButton';\nimport { FieldValidationError } from '../partials/FieldValidationError';\n\ntype SelectOption = {\n  /** option label */\n  label?: React.ReactNode;\n  /** option value */\n  value: string;\n};\n\nexport interface SelectProps {\n  /** CSS class name */\n  className?: string; // string;\n  /** Determine if the  */\n  clearable?: boolean;\n  /** Set the select to disabled state. */\n  disabled?: boolean;\n\n  filterOption?:\n    | undefined\n    | ((option?: SelectOption, inputValue?: string) => boolean);\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\nexport const selectVariants = tv({\n  slots: {\n    clearIndicator:\n      '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',\n    control:\n      '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',\n    crossIcon: '',\n    downChevron: '',\n    dropdownIndicator:\n      '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',\n    group: '',\n    groupHeading: 'mb-1 ml-3 mt-2 text-sm text-neutral-500',\n    indicatorsContainer: 'gap-1 p-1',\n    indicatorSeparator: 'bg-gray-300 dark:bg-default-300',\n    input: 'py-0.5 pl-1',\n    loadingIndicator: '',\n    loadingMessage: '',\n    menu: 'mt-2 rounded-xl border border-gray-200 bg-default-50 p-1 shadow-sm dark:border-gray-900 dark:bg-default-50',\n    menuList: '',\n    // ensure menu has same z-index as modal so it is visible when rendered in modal\n    // see: https://github.com/nextui-org/nextui/blob/main/packages/core/theme/src/components/modal.ts (see z-50)\n    menuPortal: '!z-50',\n    multiValue:\n      'items-center gap-1.5 rounded bg-gray-100 py-0.5 pl-2 pr-1 dark:bg-default-100',\n    multiValueContainer: '',\n    multiValueLabel: 'py-0.5 leading-6',\n    multiValueRemove:\n      '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',\n    noOptionsMessage:\n      'rounded-sm bg-gray-50 p-2 text-neutral-500 dark:bg-default-100',\n    option: 'rounded px-3 py-2 hover:cursor-pointer',\n    placeholder: 'py-0.5 pl-1 text-neutral-500',\n    selectContainer: '',\n    singleValue: '!ml-1 !leading-7',\n    valueContainer: 'gap-1 p-1',\n  },\n  variants: {\n    invalid: {\n      true: {\n        control:\n          'border-danger hover:border-danger dark:border-danger hover:dark:border-danger',\n      },\n    },\n    focused: {\n      true: {\n        option:\n          'bg-gray-100 active:bg-gray-200 dark:bg-default-100 dark:active:bg-default-200',\n      },\n    },\n    optionSelected: {\n      true: { option: 'bg-gray-300 dark:bg-default-300' },\n    },\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  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 {\n    label,\n    getLabelProps,\n    getTriggerProps,\n    getValueProps,\n    getHelperWrapperProps,\n    getErrorMessageProps,\n  } = useSelect({\n    isLoading: loading,\n    isInvalid: invalid,\n    isRequired: required,\n    isDisabled: disabled,\n    errorMessage: JSON.stringify(error),\n    label: _label,\n    labelPlacement: 'outside',\n    children: [],\n  });\n\n  const {\n    clearIndicator: clearIndicatorSlot,\n    control: controlSlot,\n    dropdownIndicator: dropdownIndicatorSlot,\n    groupHeading: groupHeadingSlot,\n    indicatorsContainer: indicatorContainerSlot,\n    indicatorSeparator: indicatorSeparatorSlot,\n    input: inputSlot,\n    menu: menuSlot,\n    menuPortal: menuPortalSlot,\n    multiValue: multiValueSlot,\n    multiValueLabel: multiValueLabelSlot,\n    multiValueRemove: multiValueRemoveSlot,\n    noOptionsMessage: noOptionsMessageSlot,\n    option: optionSlot,\n    placeholder: placeholderSlot,\n    singleValue: singleValueSlot,\n    valueContainer: valueContainerSlot,\n  } = selectVariants({ invalid });\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 className={cn(className, 'mt-2')} data-testid={`${testId}_select`}>\n          {label && (\n            <label\n              htmlFor={`react-select-${name}-input`} // {getTriggerProps().id}\n              className={`${getLabelProps().className} !pointer-events-auto !static -mb-1 ml-1`}\n            >\n              {label}\n              <FieldCopyTestIdButton testId={testId} />\n            </label>\n          )}\n          <ReactSelect\n            aria-errormessage=\"\"\n            aria-invalid={invalid}\n            // Does not affect the testId of the select, but is needed to pass it to sub-components\n            data-testid={`${testId}_select`}\n            // eslint-disable-next-line react/jsx-props-no-spreading\n            {...() => {\n              // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/naming-convention\n              const { className: _className, ...rest } = getTriggerProps();\n              return rest;\n            }}\n            aria-labelledby={\n              getTriggerProps()['aria-labelledby']?.split(' ')[1]\n            }\n            classNames={{\n              control: ({ isFocused }) =>\n                // border focus style\n                controlSlot({\n                  className: !invalid && isFocused && '!border-primary',\n                }),\n              placeholder: () => placeholderSlot(),\n              input: () => inputSlot(),\n              valueContainer: () => valueContainerSlot(),\n              singleValue: () =>\n                singleValueSlot({\n                  className: `${getValueProps().className}`,\n                }),\n              multiValue: () => multiValueSlot(),\n              multiValueLabel: () =>\n                multiValueLabelSlot({\n                  className: `${getValueProps().className}`,\n                }),\n              multiValueRemove: () => multiValueRemoveSlot(),\n              indicatorsContainer: () => indicatorContainerSlot(),\n              clearIndicator: () => clearIndicatorSlot(),\n              indicatorSeparator: () => indicatorSeparatorSlot(),\n              dropdownIndicator: () => dropdownIndicatorSlot(),\n              menu: () => menuSlot(),\n              groupHeading: () => groupHeadingSlot(),\n              option: ({ isFocused, isSelected }) =>\n                optionSlot({\n                  focused: isFocused,\n                  optionSelected: isSelected,\n                }),\n              noOptionsMessage: () => noOptionsMessageSlot(),\n              menuPortal: () => menuPortalSlot(),\n            }}\n            components={{\n              Input: InputComponent,\n              Option: OptionComponent,\n              DropdownIndicator: DropdownIndicatorComponent,\n            }}\n            filterOption={filterOption}\n            instanceId={name}\n            inputValue={inputValue}\n            isClearable={clearable}\n            isDisabled={disabled}\n            isLoading={loading}\n            isMulti={multiSelect}\n            options={options}\n            placeholder={placeholder}\n            unstyled\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            onInputChange={onInputChange}\n            // attach menu modal or body so it works in card and modal\n            menuPortalTarget={\n              (document.getElementById('modal_body')?.parentNode\n                ?.parentNode as HTMLElement) || document.body\n            }\n            value={options.find((option) => option.value === value)}\n            onBlur={onBlur}\n            name={name}\n            ref={ref}\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"]}