@fuf-stack/uniform 0.9.0 → 0.9.1

package/dist/Select/index.cjs

@@ -1,7 +1,7 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
 
-var _chunkWCQYZ5RIcjs = require('../chunk-WCQYZ5RI.cjs');
+var _chunkU3PJEVXLcjs = require('../chunk-U3PJEVXL.cjs');
 require('../chunk-KMMS4G7A.cjs');
 require('../chunk-QTL5FREE.cjs');
 require('../chunk-LDCRR7FP.cjs');
@@ -9,5 +9,5 @@ require('../chunk-BBB4FEY6.cjs');
 
 
 
-exports.Select = _chunkWCQYZ5RIcjs.Select_default; exports.default = _chunkWCQYZ5RIcjs.Select_default2;
+exports.Select = _chunkU3PJEVXLcjs.Select_default; exports.default = _chunkU3PJEVXLcjs.Select_default2;
 //# sourceMappingURL=index.cjs.map

package/dist/Select/index.d.cts

@@ -1,6 +1,9 @@
-import { S as Select } from '../Select-Mp6Y00dT.cjs';
-export { a as SelectProps } from '../Select-Mp6Y00dT.cjs';
+import { S as Select } from '../Select-2IgkXjF0.cjs';
+export { a as SelectProps } from '../Select-2IgkXjF0.cjs';
 import 'react/jsx-runtime';
+import 'tailwind-variants';
+import 'tailwind-variants/dist/config.js';
+import '@fuf-stack/pixel-utils';
 import 'react-select';
 
 

package/dist/Select/index.d.ts

@@ -1,6 +1,9 @@
-import { S as Select } from '../Select-Mp6Y00dT.js';
-export { a as SelectProps } from '../Select-Mp6Y00dT.js';
+import { S as Select } from '../Select-2IgkXjF0.js';
+export { a as SelectProps } from '../Select-2IgkXjF0.js';
 import 'react/jsx-runtime';
+import 'tailwind-variants';
+import 'tailwind-variants/dist/config.js';
+import '@fuf-stack/pixel-utils';
 import 'react-select';
 
 

package/dist/Select/index.js

@@ -1,7 +1,7 @@
 import {
   Select_default,
   Select_default2
-} from "../chunk-C2AWFTC5.js";
+} from "../chunk-I2R4W3KH.js";
 import "../chunk-T3CCNJHK.js";
 import "../chunk-DBLODROX.js";
 import "../chunk-HWDQZO7X.js";

package/dist/Select-2IgkXjF0.d.cts

@@ -0,0 +1,181 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as tailwind_variants from 'tailwind-variants';
+import * as tailwind_variants_dist_config_js from 'tailwind-variants/dist/config.js';
+import { TVProps, TVClassName } from '@fuf-stack/pixel-utils';
+import { Props } from 'react-select';
+
+declare const selectVariants: tailwind_variants.TVReturnType<{
+    invalid: {
+        true: {
+            control: string;
+        };
+    };
+}, {
+    base: string;
+    clearIndicator: string;
+    control: string;
+    control_focused: string;
+    crossIcon: string;
+    downChevron: string;
+    dropdownIndicator: string;
+    group: string;
+    groupHeading: string;
+    indicatorsContainer: string;
+    indicatorSeparator: string;
+    input: string;
+    loadingIndicator: string;
+    loadingMessage: string;
+    menu: string;
+    menuList: string;
+    menuPortal: string;
+    multiValue: string;
+    multiValueContainer: string;
+    multiValueLabel: string;
+    multiValueRemove: string;
+    noOptionsMessage: string;
+    option: string;
+    option_selected: string;
+    option_focused: string;
+    placeholder: string;
+    selectContainer: string;
+    singleValue: string;
+    valueContainer: string;
+}, undefined, tailwind_variants_dist_config_js.TVConfig<{
+    invalid: {
+        true: {
+            control: string;
+        };
+    };
+}, {
+    invalid: {
+        true: {
+            control: string;
+        };
+    };
+}>, {
+    invalid: {
+        true: {
+            control: string;
+        };
+    };
+}, {
+    base: string;
+    clearIndicator: string;
+    control: string;
+    control_focused: string;
+    crossIcon: string;
+    downChevron: string;
+    dropdownIndicator: string;
+    group: string;
+    groupHeading: string;
+    indicatorsContainer: string;
+    indicatorSeparator: string;
+    input: string;
+    loadingIndicator: string;
+    loadingMessage: string;
+    menu: string;
+    menuList: string;
+    menuPortal: string;
+    multiValue: string;
+    multiValueContainer: string;
+    multiValueLabel: string;
+    multiValueRemove: string;
+    noOptionsMessage: string;
+    option: string;
+    option_selected: string;
+    option_focused: string;
+    placeholder: string;
+    selectContainer: string;
+    singleValue: string;
+    valueContainer: string;
+}, tailwind_variants.TVReturnType<{
+    invalid: {
+        true: {
+            control: string;
+        };
+    };
+}, {
+    base: string;
+    clearIndicator: string;
+    control: string;
+    control_focused: string;
+    crossIcon: string;
+    downChevron: string;
+    dropdownIndicator: string;
+    group: string;
+    groupHeading: string;
+    indicatorsContainer: string;
+    indicatorSeparator: string;
+    input: string;
+    loadingIndicator: string;
+    loadingMessage: string;
+    menu: string;
+    menuList: string;
+    menuPortal: string;
+    multiValue: string;
+    multiValueContainer: string;
+    multiValueLabel: string;
+    multiValueRemove: string;
+    noOptionsMessage: string;
+    option: string;
+    option_selected: string;
+    option_focused: string;
+    placeholder: string;
+    selectContainer: string;
+    singleValue: string;
+    valueContainer: string;
+}, undefined, tailwind_variants_dist_config_js.TVConfig<{
+    invalid: {
+        true: {
+            control: string;
+        };
+    };
+}, {
+    invalid: {
+        true: {
+            control: string;
+        };
+    };
+}>, unknown, unknown, undefined>>;
+type SelectOption = {
+    /** option label */
+    label?: React.ReactNode;
+    /** option value */
+    value: string;
+};
+type VariantProps = TVProps<typeof selectVariants>;
+type ClassName = TVClassName<typeof selectVariants>;
+interface SelectProps extends VariantProps {
+    /** CSS class name */
+    className?: ClassName;
+    /** Determine if the  */
+    clearable?: boolean;
+    /** Set the select to disabled state. */
+    disabled?: boolean;
+    /** Filter Select Options */
+    filterOption?: undefined | ((option?: SelectOption, inputValue?: string) => boolean);
+    /** Format the label of the option */
+    formatOptionLabel?: undefined | Props['formatOptionLabel'];
+    /** 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, formatOptionLabel, 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-2IgkXjF0.d.ts

@@ -0,0 +1,181 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as tailwind_variants from 'tailwind-variants';
+import * as tailwind_variants_dist_config_js from 'tailwind-variants/dist/config.js';
+import { TVProps, TVClassName } from '@fuf-stack/pixel-utils';
+import { Props } from 'react-select';
+
+declare const selectVariants: tailwind_variants.TVReturnType<{
+    invalid: {
+        true: {
+            control: string;
+        };
+    };
+}, {
+    base: string;
+    clearIndicator: string;
+    control: string;
+    control_focused: string;
+    crossIcon: string;
+    downChevron: string;
+    dropdownIndicator: string;
+    group: string;
+    groupHeading: string;
+    indicatorsContainer: string;
+    indicatorSeparator: string;
+    input: string;
+    loadingIndicator: string;
+    loadingMessage: string;
+    menu: string;
+    menuList: string;
+    menuPortal: string;
+    multiValue: string;
+    multiValueContainer: string;
+    multiValueLabel: string;
+    multiValueRemove: string;
+    noOptionsMessage: string;
+    option: string;
+    option_selected: string;
+    option_focused: string;
+    placeholder: string;
+    selectContainer: string;
+    singleValue: string;
+    valueContainer: string;
+}, undefined, tailwind_variants_dist_config_js.TVConfig<{
+    invalid: {
+        true: {
+            control: string;
+        };
+    };
+}, {
+    invalid: {
+        true: {
+            control: string;
+        };
+    };
+}>, {
+    invalid: {
+        true: {
+            control: string;
+        };
+    };
+}, {
+    base: string;
+    clearIndicator: string;
+    control: string;
+    control_focused: string;
+    crossIcon: string;
+    downChevron: string;
+    dropdownIndicator: string;
+    group: string;
+    groupHeading: string;
+    indicatorsContainer: string;
+    indicatorSeparator: string;
+    input: string;
+    loadingIndicator: string;
+    loadingMessage: string;
+    menu: string;
+    menuList: string;
+    menuPortal: string;
+    multiValue: string;
+    multiValueContainer: string;
+    multiValueLabel: string;
+    multiValueRemove: string;
+    noOptionsMessage: string;
+    option: string;
+    option_selected: string;
+    option_focused: string;
+    placeholder: string;
+    selectContainer: string;
+    singleValue: string;
+    valueContainer: string;
+}, tailwind_variants.TVReturnType<{
+    invalid: {
+        true: {
+            control: string;
+        };
+    };
+}, {
+    base: string;
+    clearIndicator: string;
+    control: string;
+    control_focused: string;
+    crossIcon: string;
+    downChevron: string;
+    dropdownIndicator: string;
+    group: string;
+    groupHeading: string;
+    indicatorsContainer: string;
+    indicatorSeparator: string;
+    input: string;
+    loadingIndicator: string;
+    loadingMessage: string;
+    menu: string;
+    menuList: string;
+    menuPortal: string;
+    multiValue: string;
+    multiValueContainer: string;
+    multiValueLabel: string;
+    multiValueRemove: string;
+    noOptionsMessage: string;
+    option: string;
+    option_selected: string;
+    option_focused: string;
+    placeholder: string;
+    selectContainer: string;
+    singleValue: string;
+    valueContainer: string;
+}, undefined, tailwind_variants_dist_config_js.TVConfig<{
+    invalid: {
+        true: {
+            control: string;
+        };
+    };
+}, {
+    invalid: {
+        true: {
+            control: string;
+        };
+    };
+}>, unknown, unknown, undefined>>;
+type SelectOption = {
+    /** option label */
+    label?: React.ReactNode;
+    /** option value */
+    value: string;
+};
+type VariantProps = TVProps<typeof selectVariants>;
+type ClassName = TVClassName<typeof selectVariants>;
+interface SelectProps extends VariantProps {
+    /** CSS class name */
+    className?: ClassName;
+    /** Determine if the  */
+    clearable?: boolean;
+    /** Set the select to disabled state. */
+    disabled?: boolean;
+    /** Filter Select Options */
+    filterOption?: undefined | ((option?: SelectOption, inputValue?: string) => boolean);
+    /** Format the label of the option */
+    formatOptionLabel?: undefined | Props['formatOptionLabel'];
+    /** 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, formatOptionLabel, 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/chunk-I2R4W3KH.js

@@ -0,0 +1,244 @@
+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 { useState } from "react";
+import { Controller } from "react-hook-form";
+import ReactSelect, { components } from "react-select";
+import { useSelect } from "@nextui-org/select";
+import { cn, tv, variantsToClassNames } from "@fuf-stack/pixel-utils";
+import { jsx, jsxs } from "react/jsx-runtime";
+var selectVariants = tv({
+  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: "",
+    // 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-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: "rounded px-3 py-2 hover:cursor-pointer",
+    option_selected: "bg-default-300",
+    option_focused: "bg-default-100 active:bg-default-200",
+    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__ */ 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 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 } = useFormContext();
+  const { error, invalid, required, testId } = getFieldState(name, _testId);
+  const [isFocused, setIsFocused] = useState(false);
+  const variants = selectVariants({ invalid });
+  const classNames = variantsToClassNames(variants, className, "base");
+  const {
+    label,
+    getBaseProps,
+    getLabelProps,
+    getTriggerProps,
+    getValueProps,
+    getMainWrapperProps,
+    getHelperWrapperProps,
+    getErrorMessageProps
+  } = useSelect({
+    isLoading: loading,
+    isInvalid: invalid,
+    isRequired: required,
+    isDisabled: disabled,
+    errorMessage: JSON.stringify(error),
+    label: _label,
+    labelPlacement: "outside",
+    placeholder: " ",
+    children: [],
+    classNames
+  });
+  return /* @__PURE__ */ jsx(
+    Controller,
+    {
+      control,
+      name,
+      render: ({
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        field: { onChange, value, ref, onBlur }
+      }) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          ...getBaseProps(),
+          className: cn(classNames.base, "group mt-2"),
+          "data-testid": testId,
+          children: /* @__PURE__ */ jsxs("div", { ...getMainWrapperProps(), children: [
+            /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+              label && /* @__PURE__ */ jsxs(
+                "label",
+                {
+                  htmlFor: `react-select-${name}-input`,
+                  className: cn(
+                    getLabelProps().className.replace("absolute", "relative").replace("block", ""),
+                    "!pointer-events-auto bottom-2 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: () => cn(classNames.control, {
+                      [classNames.control_focused]: isFocused && !invalid
+                    }),
+                    placeholder: () => classNames.placeholder,
+                    input: () => classNames.input,
+                    valueContainer: () => classNames.valueContainer,
+                    singleValue: () => cn(classNames.singleValue, `${getValueProps().className}`),
+                    multiValue: () => classNames.multiValue,
+                    multiValueLabel: () => cn(
+                      classNames.multiValueLabel,
+                      `${getValueProps().className}`
+                    ),
+                    multiValueRemove: () => classNames.multiValueRemove,
+                    indicatorsContainer: () => classNames.indicatorsContainer,
+                    clearIndicator: () => classNames.clearIndicator,
+                    indicatorSeparator: () => classNames.indicatorSeparator,
+                    dropdownIndicator: () => classNames.dropdownIndicator,
+                    menu: () => classNames.menu,
+                    groupHeading: () => classNames.groupHeading,
+                    option: ({
+                      isFocused: optionIsFocused,
+                      isSelected: optionIsSelected
+                    }) => cn(classNames.option, {
+                      [classNames.option_focused]: optionIsFocused,
+                      [classNames.option_selected]: optionIsSelected
+                    }),
+                    noOptionsMessage: () => classNames.noOptionsMessage,
+                    menuPortal: () => classNames.menuPortal
+                  },
+                  components: {
+                    Input: InputComponent,
+                    Option: OptionComponent,
+                    DropdownIndicator: DropdownIndicatorComponent
+                  },
+                  filterOption,
+                  formatOptionLabel,
+                  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: (_e) => {
+                    setIsFocused(false);
+                    return onBlur();
+                  },
+                  onFocus: (_e) => {
+                    setIsFocused(true);
+                  },
+                  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-I2R4W3KH.js.map