@janbox/storefront-ui 1.0.0

package/dist/lib/select/select.cjs

@@ -0,0 +1,317 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const react = require("react");
+const lodashEs = require("lodash-es");
+const helpers = require("./helpers.cjs");
+const svgLoader = require("../../components/svg-loader.cjs");
+const virtualizedList = require("../../components/virtualized-list.cjs");
+const index = require("../../hooks/use-window-screen/index.cjs");
+const useControllableState = require("../../hooks/use-controllable-state.cjs");
+const utils_index = require("../../utils/index.cjs");
+const arrowDown = require("../../assets/svg/arrow-down.svg.cjs");
+const doneCheck = require("../../assets/svg/done-check.svg.cjs");
+const theme_palette = require("../../theme/palette.cjs");
+const theme_typography = require("../../theme/typography.cjs");
+const common = require("../../utils/common.cjs");
+const floating = require("../floating/floating/floating.cjs");
+const floatingTrigger = require("../floating/floating-trigger/floating-trigger.cjs");
+const inputMask = require("../input-mask/input-mask.cjs");
+const floatingContent = require("../floating/floating-content/floating-content.cjs");
+const input = require("../input/input.cjs");
+const formHelperText = require("../form-helper-text/form-helper-text.cjs");
+const DEFAULT_DISPLAY_ROW_COUNT = 5;
+const Select = ({
+  ref,
+  ...props
+}) => {
+  var _a, _b, _c, _d, _e;
+  const {
+    placement = "bottom-start",
+    open,
+    onOpenChange,
+    searchable = true,
+    value,
+    optionValue,
+    optionLabel,
+    defaultValue,
+    options,
+    onChange,
+    placeholder,
+    listProps,
+    selectedRenderer,
+    optionSearchLabel,
+    helperText,
+    error,
+    containerProps,
+    inputProps,
+    fullWidth = true,
+    lazy = true,
+    ...rest
+  } = helpers.getSelectProps(props);
+  const searchInputRef = react.useRef(null);
+  const floatingRef = react.useRef(null);
+  const uniqueId = react.useId();
+  const [inputValue, setInputValue] = useControllableState.useControllableState({
+    defaultValue: (inputProps == null ? void 0 : inputProps.defaultValue) ?? "",
+    value: inputProps == null ? void 0 : inputProps.value
+  });
+  const windowScreen = index.useWindowScreen();
+  const [isOpen, setIsOpen] = useControllableState.useControllableState({
+    defaultValue: open ?? false,
+    value: open
+  });
+  const prehandleOpenChange = (nextOpen, event, reason) => {
+    setIsOpen(nextOpen);
+    onOpenChange == null ? void 0 : onOpenChange(nextOpen, event, reason);
+  };
+  const [selectedValue, setSelectedValue] = useControllableState.useControllableState({
+    defaultValue,
+    value
+  });
+  const getOptionValue = react.useCallback(
+    (option) => {
+      return typeof optionValue === "function" ? optionValue(option) : lodashEs.get(option, optionValue ?? "value");
+    },
+    [optionValue]
+  );
+  const getOptionLabel = react.useCallback(
+    (option) => {
+      return typeof optionLabel === "function" ? optionLabel(option) : lodashEs.get(option, optionLabel ?? "label");
+    },
+    [optionLabel]
+  );
+  const handleChange = (row) => {
+    var _a2, _b2, _c2;
+    const rowValue = getOptionValue(row);
+    setSelectedValue(rowValue);
+    onChange == null ? void 0 : onChange(rowValue, row);
+    (_c2 = (_a2 = floatingRef.current) == null ? void 0 : (_b2 = _a2.context).onOpenChange) == null ? void 0 : _c2.call(_b2, false);
+  };
+  const selectedOption = react.useMemo(
+    () => options.find((option) => selectedValue === getOptionValue(option)),
+    [getOptionValue, options, selectedValue]
+  );
+  const responsiveSize = lodashEs.isNil(windowScreen.name) ? void 0 : utils_index.getResponsiveProp(rest, "size", windowScreen.name);
+  const rowMinHeight = utils_index.getSizeVariantState(responsiveSize).inputSize ?? 0;
+  const displayOptions = react.useMemo(() => {
+    if (!inputValue) {
+      return options;
+    }
+    return options.filter((option) => {
+      let searchLabels = [String(getOptionLabel(option))];
+      switch (typeof optionSearchLabel) {
+        case "function":
+          searchLabels = common.ensureArray(optionSearchLabel(option));
+          break;
+        case "string":
+          searchLabels = common.ensureArray(String(lodashEs.get(option, optionSearchLabel)));
+          break;
+        case "object":
+          searchLabels = optionSearchLabel.map((label) => String(lodashEs.get(option, label)));
+          break;
+      }
+      return common.matchSearch(searchLabels, inputValue);
+    });
+  }, [getOptionLabel, inputValue, optionSearchLabel, options]);
+  const RowComponent = ({ row }) => {
+    const rowData = displayOptions.at(row.index);
+    if (lodashEs.isNil(rowData)) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
+    const rowValue = getOptionValue(rowData);
+    const isSelected = selectedValue === rowValue;
+    const onClick = (_e2) => {
+      var _a2, _b2, _c2;
+      if (isSelected) {
+        (_c2 = (_a2 = floatingRef.current) == null ? void 0 : (_b2 = _a2.context).onOpenChange) == null ? void 0 : _c2.call(_b2, false);
+        return;
+      }
+      handleChange(rowData);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        onClick,
+        "aria-hidden": true,
+        "data-option-value": rowValue,
+        css: {
+          minHeight: rowMinHeight,
+          paddingTop: 2,
+          paddingBottom: 2,
+          paddingLeft: 12,
+          paddingRight: 12,
+          display: "flex",
+          alignItems: "center",
+          gap: 8,
+          cursor: "pointer",
+          borderRadius: 8,
+          ":hover": { backgroundColor: theme_palette.getColorVar("neutral.100") },
+          ...isSelected ? {
+            color: theme_palette.getColorVar("primary.600"),
+            backgroundColor: theme_palette.getColorVar("primary.100"),
+            ":hover": { backgroundColor: theme_palette.getColorVar("primary.100") }
+          } : {}
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { css: { flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: getOptionLabel(rowData) }),
+          isSelected && /* @__PURE__ */ jsxRuntime.jsx(svgLoader.SvgLoader, { source: doneCheck, width: 24, height: 24, css: { color: theme_palette.getColorVar("primary.600") } })
+        ]
+      }
+    );
+  };
+  const sizeOptions = {
+    apply({ elements }) {
+      const { width } = elements.reference.getBoundingClientRect();
+      Object.assign(elements.floating.style, {
+        minWidth: `${width}px`
+      });
+    }
+  };
+  const estimateSize = react.useCallback(
+    (_index) => {
+      return rowMinHeight ?? 0;
+    },
+    [rowMinHeight]
+  );
+  const getItemKey = react.useCallback(
+    (index2) => {
+      const option = displayOptions.at(index2);
+      return option ? getOptionValue(option).toString() : `${uniqueId}-${index2}`;
+    },
+    [displayOptions, getOptionValue, uniqueId]
+  );
+  const getTextCss = (sizeVariant) => {
+    if (lodashEs.isNil(sizeVariant)) return {};
+    const { textVariant } = utils_index.getSizeVariantState(sizeVariant);
+    if (lodashEs.isNil(textVariant)) return {};
+    return theme_typography.getTypographyVar(textVariant);
+  };
+  const onInputChange = (e) => {
+    var _a2;
+    e.target.value = lodashEs.trimStart(e.target.value);
+    setInputValue(e.target.value);
+    (_a2 = inputProps == null ? void 0 : inputProps.onChange) == null ? void 0 : _a2.call(inputProps, e);
+  };
+  react.useEffect(() => {
+    const timer = setTimeout(() => {
+      var _a2;
+      if (isOpen) {
+        (_a2 = searchInputRef.current) == null ? void 0 : _a2.focus();
+      } else {
+        setInputValue("");
+      }
+    }, 100);
+    return () => clearTimeout(timer);
+  }, [isOpen, setInputValue]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ...containerProps,
+      css: {
+        display: "flex",
+        flexDirection: "column",
+        ...fullWidth ? { width: "100%" } : {},
+        ...containerProps == null ? void 0 : containerProps.css
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          floating.Floating,
+          {
+            clickProps: {
+              enabled: true
+            },
+            dismissProps: {
+              enabled: true
+            },
+            sizeOptions,
+            placement,
+            open: isOpen,
+            onOpenChange: prehandleOpenChange,
+            ref: floatingRef,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(floatingTrigger.FloatingTrigger, { children: /* @__PURE__ */ jsxRuntime.jsx(
+                inputMask.InputMask,
+                {
+                  type: "button",
+                  error: isOpen ? false : error,
+                  element: "button",
+                  suffix: /* @__PURE__ */ jsxRuntime.jsx(
+                    svgLoader.SvgLoader,
+                    {
+                      source: arrowDown,
+                      width: 20,
+                      height: 20,
+                      css: {
+                        transition: "transform 150ms",
+                        ...isOpen ? { transform: "rotate(-180deg)" } : {}
+                      }
+                    }
+                  ),
+                  ...rest,
+                  css: [
+                    {
+                      ":hover": { outlineColor: theme_palette.getColorVar("primary.300") }
+                    },
+                    isOpen && { outlineColor: theme_palette.getColorVar("primary.600") },
+                    rest.disabled && {
+                      cursor: "not-allowed",
+                      pointerEvents: "none",
+                      backgroundColor: theme_palette.getColorVar("neutral.200")
+                    },
+                    rest.css
+                  ],
+                  ref,
+                  children: /* @__PURE__ */ jsxRuntime.jsx("div", { css: [{ flex: 1, textAlign: "left", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, getTextCss((_a = rest.xs) == null ? void 0 : _a.size)], children: selectedOption ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: selectedRenderer ? selectedRenderer(selectedOption) : getOptionLabel(selectedOption) }) : /* @__PURE__ */ jsxRuntime.jsx("span", { css: { color: theme_palette.getColorVar("neutral.400"), display: "block" }, children: placeholder }) })
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsx(floatingContent.FloatingContent, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { css: {
+                paddingTop: 8,
+                paddingBottom: 8,
+                border: "1px solid",
+                borderColor: theme_palette.getColorVar("border.default"),
+                borderRadius: 8,
+                boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
+                fontSize: "0.875rem",
+                lineHeight: "1.25rem",
+                backgroundColor: theme_palette.getColorVar("surface.default")
+              }, children: [
+                searchable && /* @__PURE__ */ jsxRuntime.jsx("div", { css: { paddingLeft: 8, paddingRight: 8, paddingBottom: 12, position: "relative" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+                  input.Input,
+                  {
+                    xs: { size: (_b = rest.xs) == null ? void 0 : _b.size },
+                    sm: { size: (_c = rest.sm) == null ? void 0 : _c.size },
+                    md: { size: (_d = rest.md) == null ? void 0 : _d.size },
+                    lg: { size: (_e = rest.lg) == null ? void 0 : _e.size },
+                    value: inputValue,
+                    ...inputProps,
+                    onChange: onInputChange,
+                    ref: searchInputRef
+                  }
+                ) }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  virtualizedList.VirtualizedList,
+                  {
+                    ...listProps,
+                    css: { paddingLeft: 4, paddingRight: 4 },
+                    options: {
+                      count: displayOptions.length,
+                      estimateSize,
+                      getItemKey,
+                      overscan: lazy ? void 0 : options.length
+                    },
+                    style: {
+                      maxHeight: rowMinHeight * DEFAULT_DISPLAY_ROW_COUNT,
+                      ...listProps == null ? void 0 : listProps.style
+                    },
+                    RowComponent
+                  }
+                )
+              ] }) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(formHelperText.FormHelperText, { error, children: helperText })
+      ]
+    }
+  );
+};
+exports.Select = Select;

package/dist/lib/select/select.d.ts

@@ -0,0 +1,3 @@
+import { SelectOptionValue, SelectProps } from './types';
+export declare const Select: <V extends SelectOptionValue = SelectOptionValue, O extends object = object>({ ref, ...props }: SelectProps<V, O>) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=select.d.ts.map

package/dist/lib/select/select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/lib/select/select.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAkBzD,eAAO,MAAM,MAAM,GAAI,CAAC,SAAS,iBAAiB,sBAAsB,CAAC,SAAS,MAAM,8BAGrF,WAAW,CAAC,CAAC,EAAE,CAAC,CAAC,qDA2TnB,CAAC"}

package/dist/lib/select/select.js

@@ -0,0 +1,317 @@
+import { jsxs, jsx, Fragment } from "@emotion/react/jsx-runtime";
+import { useRef, useId, useCallback, useMemo, useEffect } from "react";
+import { get, isNil, trimStart } from "lodash-es";
+import { getSelectProps } from "./helpers.js";
+import { SvgLoader } from "../../components/svg-loader.js";
+import { VirtualizedList } from "../../components/virtualized-list.js";
+import { useWindowScreen } from "../../hooks/use-window-screen/index.js";
+import { useControllableState } from "../../hooks/use-controllable-state.js";
+import { getResponsiveProp, getSizeVariantState } from "../../utils/index.js";
+import ArrowDownIcon from "../../assets/svg/arrow-down.svg.js";
+import CheckIcon from "../../assets/svg/done-check.svg.js";
+import { getColorVar } from "../../theme/palette.js";
+import { getTypographyVar } from "../../theme/typography.js";
+import { ensureArray, matchSearch } from "../../utils/common.js";
+import { Floating } from "../floating/floating/floating.js";
+import { FloatingTrigger } from "../floating/floating-trigger/floating-trigger.js";
+import { InputMask as ForwardRefInputMask } from "../input-mask/input-mask.js";
+import { FloatingContent } from "../floating/floating-content/floating-content.js";
+import { Input } from "../input/input.js";
+import { FormHelperText } from "../form-helper-text/form-helper-text.js";
+const DEFAULT_DISPLAY_ROW_COUNT = 5;
+const Select = ({
+  ref,
+  ...props
+}) => {
+  var _a, _b, _c, _d, _e;
+  const {
+    placement = "bottom-start",
+    open,
+    onOpenChange,
+    searchable = true,
+    value,
+    optionValue,
+    optionLabel,
+    defaultValue,
+    options,
+    onChange,
+    placeholder,
+    listProps,
+    selectedRenderer,
+    optionSearchLabel,
+    helperText,
+    error,
+    containerProps,
+    inputProps,
+    fullWidth = true,
+    lazy = true,
+    ...rest
+  } = getSelectProps(props);
+  const searchInputRef = useRef(null);
+  const floatingRef = useRef(null);
+  const uniqueId = useId();
+  const [inputValue, setInputValue] = useControllableState({
+    defaultValue: (inputProps == null ? void 0 : inputProps.defaultValue) ?? "",
+    value: inputProps == null ? void 0 : inputProps.value
+  });
+  const windowScreen = useWindowScreen();
+  const [isOpen, setIsOpen] = useControllableState({
+    defaultValue: open ?? false,
+    value: open
+  });
+  const prehandleOpenChange = (nextOpen, event, reason) => {
+    setIsOpen(nextOpen);
+    onOpenChange == null ? void 0 : onOpenChange(nextOpen, event, reason);
+  };
+  const [selectedValue, setSelectedValue] = useControllableState({
+    defaultValue,
+    value
+  });
+  const getOptionValue = useCallback(
+    (option) => {
+      return typeof optionValue === "function" ? optionValue(option) : get(option, optionValue ?? "value");
+    },
+    [optionValue]
+  );
+  const getOptionLabel = useCallback(
+    (option) => {
+      return typeof optionLabel === "function" ? optionLabel(option) : get(option, optionLabel ?? "label");
+    },
+    [optionLabel]
+  );
+  const handleChange = (row) => {
+    var _a2, _b2, _c2;
+    const rowValue = getOptionValue(row);
+    setSelectedValue(rowValue);
+    onChange == null ? void 0 : onChange(rowValue, row);
+    (_c2 = (_a2 = floatingRef.current) == null ? void 0 : (_b2 = _a2.context).onOpenChange) == null ? void 0 : _c2.call(_b2, false);
+  };
+  const selectedOption = useMemo(
+    () => options.find((option) => selectedValue === getOptionValue(option)),
+    [getOptionValue, options, selectedValue]
+  );
+  const responsiveSize = isNil(windowScreen.name) ? void 0 : getResponsiveProp(rest, "size", windowScreen.name);
+  const rowMinHeight = getSizeVariantState(responsiveSize).inputSize ?? 0;
+  const displayOptions = useMemo(() => {
+    if (!inputValue) {
+      return options;
+    }
+    return options.filter((option) => {
+      let searchLabels = [String(getOptionLabel(option))];
+      switch (typeof optionSearchLabel) {
+        case "function":
+          searchLabels = ensureArray(optionSearchLabel(option));
+          break;
+        case "string":
+          searchLabels = ensureArray(String(get(option, optionSearchLabel)));
+          break;
+        case "object":
+          searchLabels = optionSearchLabel.map((label) => String(get(option, label)));
+          break;
+      }
+      return matchSearch(searchLabels, inputValue);
+    });
+  }, [getOptionLabel, inputValue, optionSearchLabel, options]);
+  const RowComponent = ({ row }) => {
+    const rowData = displayOptions.at(row.index);
+    if (isNil(rowData)) return /* @__PURE__ */ jsx(Fragment, {});
+    const rowValue = getOptionValue(rowData);
+    const isSelected = selectedValue === rowValue;
+    const onClick = (_e2) => {
+      var _a2, _b2, _c2;
+      if (isSelected) {
+        (_c2 = (_a2 = floatingRef.current) == null ? void 0 : (_b2 = _a2.context).onOpenChange) == null ? void 0 : _c2.call(_b2, false);
+        return;
+      }
+      handleChange(rowData);
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        onClick,
+        "aria-hidden": true,
+        "data-option-value": rowValue,
+        css: {
+          minHeight: rowMinHeight,
+          paddingTop: 2,
+          paddingBottom: 2,
+          paddingLeft: 12,
+          paddingRight: 12,
+          display: "flex",
+          alignItems: "center",
+          gap: 8,
+          cursor: "pointer",
+          borderRadius: 8,
+          ":hover": { backgroundColor: getColorVar("neutral.100") },
+          ...isSelected ? {
+            color: getColorVar("primary.600"),
+            backgroundColor: getColorVar("primary.100"),
+            ":hover": { backgroundColor: getColorVar("primary.100") }
+          } : {}
+        },
+        children: [
+          /* @__PURE__ */ jsx("div", { css: { flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: getOptionLabel(rowData) }),
+          isSelected && /* @__PURE__ */ jsx(SvgLoader, { source: CheckIcon, width: 24, height: 24, css: { color: getColorVar("primary.600") } })
+        ]
+      }
+    );
+  };
+  const sizeOptions = {
+    apply({ elements }) {
+      const { width } = elements.reference.getBoundingClientRect();
+      Object.assign(elements.floating.style, {
+        minWidth: `${width}px`
+      });
+    }
+  };
+  const estimateSize = useCallback(
+    (_index) => {
+      return rowMinHeight ?? 0;
+    },
+    [rowMinHeight]
+  );
+  const getItemKey = useCallback(
+    (index) => {
+      const option = displayOptions.at(index);
+      return option ? getOptionValue(option).toString() : `${uniqueId}-${index}`;
+    },
+    [displayOptions, getOptionValue, uniqueId]
+  );
+  const getTextCss = (sizeVariant) => {
+    if (isNil(sizeVariant)) return {};
+    const { textVariant } = getSizeVariantState(sizeVariant);
+    if (isNil(textVariant)) return {};
+    return getTypographyVar(textVariant);
+  };
+  const onInputChange = (e) => {
+    var _a2;
+    e.target.value = trimStart(e.target.value);
+    setInputValue(e.target.value);
+    (_a2 = inputProps == null ? void 0 : inputProps.onChange) == null ? void 0 : _a2.call(inputProps, e);
+  };
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      var _a2;
+      if (isOpen) {
+        (_a2 = searchInputRef.current) == null ? void 0 : _a2.focus();
+      } else {
+        setInputValue("");
+      }
+    }, 100);
+    return () => clearTimeout(timer);
+  }, [isOpen, setInputValue]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...containerProps,
+      css: {
+        display: "flex",
+        flexDirection: "column",
+        ...fullWidth ? { width: "100%" } : {},
+        ...containerProps == null ? void 0 : containerProps.css
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          Floating,
+          {
+            clickProps: {
+              enabled: true
+            },
+            dismissProps: {
+              enabled: true
+            },
+            sizeOptions,
+            placement,
+            open: isOpen,
+            onOpenChange: prehandleOpenChange,
+            ref: floatingRef,
+            children: [
+              /* @__PURE__ */ jsx(FloatingTrigger, { children: /* @__PURE__ */ jsx(
+                ForwardRefInputMask,
+                {
+                  type: "button",
+                  error: isOpen ? false : error,
+                  element: "button",
+                  suffix: /* @__PURE__ */ jsx(
+                    SvgLoader,
+                    {
+                      source: ArrowDownIcon,
+                      width: 20,
+                      height: 20,
+                      css: {
+                        transition: "transform 150ms",
+                        ...isOpen ? { transform: "rotate(-180deg)" } : {}
+                      }
+                    }
+                  ),
+                  ...rest,
+                  css: [
+                    {
+                      ":hover": { outlineColor: getColorVar("primary.300") }
+                    },
+                    isOpen && { outlineColor: getColorVar("primary.600") },
+                    rest.disabled && {
+                      cursor: "not-allowed",
+                      pointerEvents: "none",
+                      backgroundColor: getColorVar("neutral.200")
+                    },
+                    rest.css
+                  ],
+                  ref,
+                  children: /* @__PURE__ */ jsx("div", { css: [{ flex: 1, textAlign: "left", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, getTextCss((_a = rest.xs) == null ? void 0 : _a.size)], children: selectedOption ? /* @__PURE__ */ jsx(Fragment, { children: selectedRenderer ? selectedRenderer(selectedOption) : getOptionLabel(selectedOption) }) : /* @__PURE__ */ jsx("span", { css: { color: getColorVar("neutral.400"), display: "block" }, children: placeholder }) })
+                }
+              ) }),
+              /* @__PURE__ */ jsx(FloatingContent, { children: /* @__PURE__ */ jsxs("div", { css: {
+                paddingTop: 8,
+                paddingBottom: 8,
+                border: "1px solid",
+                borderColor: getColorVar("border.default"),
+                borderRadius: 8,
+                boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
+                fontSize: "0.875rem",
+                lineHeight: "1.25rem",
+                backgroundColor: getColorVar("surface.default")
+              }, children: [
+                searchable && /* @__PURE__ */ jsx("div", { css: { paddingLeft: 8, paddingRight: 8, paddingBottom: 12, position: "relative" }, children: /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    xs: { size: (_b = rest.xs) == null ? void 0 : _b.size },
+                    sm: { size: (_c = rest.sm) == null ? void 0 : _c.size },
+                    md: { size: (_d = rest.md) == null ? void 0 : _d.size },
+                    lg: { size: (_e = rest.lg) == null ? void 0 : _e.size },
+                    value: inputValue,
+                    ...inputProps,
+                    onChange: onInputChange,
+                    ref: searchInputRef
+                  }
+                ) }),
+                /* @__PURE__ */ jsx(
+                  VirtualizedList,
+                  {
+                    ...listProps,
+                    css: { paddingLeft: 4, paddingRight: 4 },
+                    options: {
+                      count: displayOptions.length,
+                      estimateSize,
+                      getItemKey,
+                      overscan: lazy ? void 0 : options.length
+                    },
+                    style: {
+                      maxHeight: rowMinHeight * DEFAULT_DISPLAY_ROW_COUNT,
+                      ...listProps == null ? void 0 : listProps.style
+                    },
+                    RowComponent
+                  }
+                )
+              ] }) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(FormHelperText, { error, children: helperText })
+      ]
+    }
+  );
+};
+export {
+  Select
+};

package/dist/lib/select/types.d.ts

@@ -0,0 +1,36 @@
+import { JSX, HTMLAttributes } from 'react';
+import { Interpolation } from '@emotion/react';
+import { Placement, UseFloatingOptions } from '@floating-ui/react';
+import { InputProps } from '../input';
+import { InputMaskProps, InputMaskResponsiveProps } from '../input-mask/types';
+import { ResponsiveDesign, ShallowMerge } from '../../types';
+export type SelectResponsiveProps = InputMaskResponsiveProps;
+export type SelectOptionValue = string | number | boolean;
+interface SelectExtendedProps<V extends SelectOptionValue, O extends object> extends ResponsiveDesign<SelectResponsiveProps> {
+    css?: Interpolation;
+    placement?: Placement;
+    onOpenChange?: UseFloatingOptions['onOpenChange'];
+    open?: boolean;
+    searchable?: boolean;
+    optionLabel?: keyof O | ((option: O) => React.ReactNode);
+    optionValue?: keyof O | ((option: O) => V);
+    optionSearchLabel?: keyof O | Array<keyof O> | ((option: O) => string | string[]);
+    defaultValue?: V;
+    value?: V | null;
+    options: O[];
+    onChange?: (value: V, option: O) => void;
+    placeholder?: string;
+    listProps?: HTMLAttributes<HTMLDivElement>;
+    selectedRenderer?: (option: O) => React.ReactNode;
+    error?: boolean;
+    helperText?: string;
+    containerProps?: JSX.IntrinsicElements['div'] & {
+        css?: Interpolation;
+    };
+    inputProps?: InputProps;
+    fullWidth?: boolean;
+    lazy?: boolean;
+}
+export type SelectProps<V extends SelectOptionValue = SelectOptionValue, O extends object = object> = ShallowMerge<InputMaskProps<JSX.IntrinsicElements['button']>, SelectExtendedProps<V, O>>;
+export {};
+//# sourceMappingURL=types.d.ts.map

package/dist/lib/select/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/select/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAEnE,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,cAAc,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAE/E,OAAO,EAAC,gBAAgB,EAAE,YAAY,EAAC,MAAM,aAAa,CAAC;AAE3D,MAAM,MAAM,qBAAqB,GAAG,wBAAwB,CAAC;AAE7D,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;AAE1D,UAAU,mBAAmB,CAC3B,CAAC,SAAS,iBAAiB,EAC3B,CAAC,SAAS,MAAM,CAChB,SAAQ,gBAAgB,CAAC,qBAAqB,CAAC;IAC/C,GAAG,CAAC,EAAE,aAAa,CAAC;IAEpB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,YAAY,CAAC,EAAE,kBAAkB,CAAC,cAAc,CAAC,CAAC;IAClD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IACzD,WAAW,CAAC,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAC3C,iBAAiB,CAAC,EAAE,MAAM,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,CAAC,KAAK,MAAM,GAAG,MAAM,EAAE,CAAC,CAAC;IAClF,YAAY,CAAC,EAAE,CAAC,CAAC;IACjB,KAAK,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC;IACjB,OAAO,EAAE,CAAC,EAAE,CAAC;IACb,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,KAAK,IAAI,CAAC;IACzC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;IAC3C,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IAClD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,GAAG;QAC9C,GAAG,CAAC,EAAE,aAAa,CAAC;KACrB,CAAC;IACF,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,iBAAiB,GAAG,iBAAiB,EAAE,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,YAAY,CAChH,cAAc,CAAC,GAAG,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAAC,EAC/C,mBAAmB,CAAC,CAAC,EAAE,CAAC,CAAC,CAC1B,CAAC"}

package/dist/lib/star-rating/index.d.ts

@@ -0,0 +1,3 @@
+export * from './star-rating';
+export * from './types';
+//# sourceMappingURL=index.d.ts.map