@deepnoid/ui 0.1.20 → 0.1.22

package/dist/components/select/select.js

@@ -105,7 +105,7 @@ __export(select_exports, {
   default: () => select_default
 });
 module.exports = __toCommonJS(select_exports);
-var import_react2 = require("react");
+var import_react = require("react");
 var import_react_dom = require("react-dom");
 
 // src/utils/tailwind-variants.ts
@@ -345,62 +345,6 @@ var mapPropsVariants = (props, variantKeys, removeVariantProps = true) => {
   }
 };
 
-// src/components/select/useSelect.tsx
-var import_react = require("react");
-var useSelect = ({ options, defaultOption, onChange }) => {
-  const [selectedOption, setSelectedOption] = (0, import_react.useState)(defaultOption);
-  const [targetRect, setTargetRect] = (0, import_react.useState)(null);
-  const [optionWrapperHeight, setOptionWrapperHeight] = (0, import_react.useState)(0);
-  const selectWrapperRef = (0, import_react.useRef)(null);
-  const optionWrapperRef = (0, import_react.useRef)(null);
-  const calculatePositionWithScroll = (targetRect2, optionWrapperHeight2) => {
-    const scrollTop = window.scrollY || document.documentElement.scrollTop || document.body.scrollTop;
-    const scrollLeft = window.scrollX || document.documentElement.scrollLeft || document.body.scrollLeft;
-    const spaceBelow = window.innerHeight - (targetRect2.y + targetRect2.height + 4);
-    const spaceAbove = targetRect2.y - 4;
-    const top = spaceBelow < optionWrapperHeight2 && spaceAbove > optionWrapperHeight2 ? targetRect2.y - optionWrapperHeight2 - 4 : targetRect2.y + targetRect2.height + 4;
-    return {
-      top: top + scrollTop,
-      left: targetRect2.x + scrollLeft
-    };
-  };
-  const handleToggleSelect = () => {
-    if (selectWrapperRef.current) {
-      const rect = selectWrapperRef.current.getBoundingClientRect();
-      setTargetRect((prevRect) => prevRect ? null : { x: rect.x, y: rect.y, width: rect.width, height: rect.height });
-    }
-  };
-  const handleChangeOption = (option) => {
-    onChange == null ? void 0 : onChange(option);
-    setSelectedOption(option);
-    handleToggleSelect();
-  };
-  (0, import_react.useEffect)(() => {
-    const onClickOutside = (e) => {
-      if (optionWrapperRef.current && !optionWrapperRef.current.contains(e.target)) {
-        setTargetRect(null);
-      }
-    };
-    window.addEventListener("mousedown", onClickOutside);
-    return () => window.removeEventListener("mousedown", onClickOutside);
-  }, []);
-  (0, import_react.useEffect)(() => {
-    if (optionWrapperRef.current) {
-      setOptionWrapperHeight(optionWrapperRef.current.getBoundingClientRect().height);
-    }
-  }, [targetRect]);
-  return {
-    selectedOption,
-    targetRect,
-    optionWrapperHeight,
-    selectWrapperRef,
-    optionWrapperRef,
-    handleToggleSelect,
-    handleChangeOption,
-    calculatePositionWithScroll
-  };
-};
-
 // src/components/icon/template.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var template = {
@@ -4371,300 +4315,371 @@ var Icon = ({ name, size = "md", fill = false, className, onClick, ...props }) =
 };
 var Icon_default = Icon;
 
-// src/components/select/option.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var Option = (props) => {
-  const { base, option, icon } = optionStyle(props);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-    "div",
-    {
-      title: props.option.value,
-      className: base(),
-      onClick: () => props.onClick(props.option),
-      ref: (node) => {
-        props.isSelected && (node == null ? void 0 : node.scrollIntoView());
-      },
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: option(), children: props.children }),
-        props.isSelected && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: icon(), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon_default, { name: "check", size: props.size }) })
-      ]
+// src/utils/clsx.ts
+function clsx(...args) {
+  var i = 0, tmp, x, str = "";
+  while (i < args.length) {
+    if (tmp = args[i++]) {
+      if (x = toVal(tmp)) {
+        str && (str += " ");
+        str += x;
+      }
     }
-  );
-};
-var option_default = Option;
-var optionStyle = tv({
-  slots: {
-    base: ["w-full", "flex", "items-center", "justify-between", , "overflow-hidden"],
-    option: ["text-ellipsis overflow-hidden "],
-    icon: ""
-  },
-  variants: {
-    variant: {
-      solid: {},
-      normal: {},
-      line: {}
-    },
-    color: {
-      primary: {
-        base: ["border-primary-main", "hover:bg-primary-soft", "hover:text-primary-main"],
-        icon: "text-primary-main"
-      },
-      secondary: {
-        base: ["border-secondary-main", "hover:bg-secondary-soft", "hover:text-secondary-main"],
-        icon: "text-secondary-main"
+  }
+  return str;
+}
+function toVal(mix) {
+  var k, y, str = "";
+  if (typeof mix === "string" || typeof mix === "number") {
+    str += mix;
+  } else if (typeof mix === "object") {
+    if (Array.isArray(mix)) {
+      var len = mix.length;
+      for (k = 0; k < len; k++) {
+        if (mix[k]) {
+          if (y = toVal(mix[k])) {
+            str && (str += " ");
+            str += y;
+          }
+        }
       }
-    },
-    size: {
-      sm: {
-        base: "text-sm px-[6px] py-[4.5px]"
-      },
-      md: {
-        base: "text-md px-[8px] py-[6.5px]"
-      },
-      lg: {
-        base: "text-lg px-[10px] py-[8px]"
-      },
-      xl: {
-        base: "text-xl px-[10px] py-[8px]"
+    } else {
+      for (y in mix) {
+        if (mix[y]) {
+          str && (str += " ");
+          str += y;
+        }
       }
     }
-  },
-  defaultVariants: {
-    variant: "normal",
-    color: "primary",
-    size: "md"
   }
-});
+  return str;
+}
 
 // src/components/select/select.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var Select = (0, import_react2.forwardRef)((originalProps, ref) => {
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Select = (0, import_react.forwardRef)((originalProps, ref) => {
+  var _a;
   const [props, variantProps] = mapPropsVariants(originalProps, select.variantKeys);
-  const { classNames, options, defaultOption, onChange, ...inputProps } = props;
-  const slots = (0, import_react2.useMemo)(() => select({ ...variantProps }), [variantProps]);
   const {
-    targetRect,
-    selectedOption,
-    optionWrapperHeight,
-    selectWrapperRef,
-    optionWrapperRef,
-    handleToggleSelect,
-    handleChangeOption,
-    calculatePositionWithScroll
-  } = useSelect({
+    label,
     options,
-    defaultOption,
-    onChange
-  });
+    helperText,
+    errorText,
+    classNames,
+    defaultSelectedOptions = [],
+    onChange,
+    multiple,
+    ...inputProps
+  } = props;
+  const slots = (0, import_react.useMemo)(() => select({ ...variantProps }), [variantProps]);
+  const [selectedOptions, setSelectedOptions] = (0, import_react.useState)(defaultSelectedOptions);
+  const [targetRect, setTargetRect] = (0, import_react.useState)(null);
+  const [optionWrapperHeight, setOptionWrapperHeight] = (0, import_react.useState)(0);
+  const [isVisible, setIsVisible] = (0, import_react.useState)(false);
+  const [isOpen, setIsOpen] = (0, import_react.useState)(false);
+  const selectWrapperRef = (0, import_react.useRef)(null);
+  const optionWrapperRef = (0, import_react.useRef)(null);
+  const handleToggleSelect = () => {
+    if (isOpen) {
+      setIsOpen(false);
+      setTimeout(() => setIsVisible(false), 150);
+    } else {
+      if (selectWrapperRef.current) {
+        const rect = selectWrapperRef.current.getBoundingClientRect();
+        setTargetRect(rect);
+        setIsVisible(true);
+        requestAnimationFrame(() => setIsOpen(true));
+      }
+    }
+  };
+  const calculatePositionWithScroll = (rect, height) => {
+    const scrollTop = window.scrollY;
+    const scrollLeft = window.scrollX;
+    const spaceBelow = window.innerHeight - (rect.y + rect.height + 4);
+    const spaceAbove = rect.y - 4;
+    const top = spaceBelow < height && spaceAbove > height ? rect.y - height - 4 : rect.y + rect.height + 4;
+    return {
+      top: top + scrollTop,
+      left: rect.x + scrollLeft
+    };
+  };
+  const handleChangeOption = (option) => {
+    let nextOptions;
+    if (multiple) {
+      const exists = selectedOptions.some((o) => o.key === option.key);
+      nextOptions = exists ? selectedOptions.filter((o) => o.key !== option.key) : [...selectedOptions, option];
+    } else {
+      nextOptions = [option];
+      setIsOpen(false);
+      setTimeout(() => setIsVisible(false), 150);
+    }
+    setSelectedOptions(nextOptions);
+    onChange == null ? void 0 : onChange(nextOptions);
+  };
+  (0, import_react.useEffect)(() => {
+    const handleClickOutside = (e) => {
+      var _a2;
+      if (optionWrapperRef.current && !optionWrapperRef.current.contains(e.target) && !((_a2 = selectWrapperRef.current) == null ? void 0 : _a2.contains(e.target))) {
+        setIsOpen(false);
+        setTimeout(() => setIsVisible(false), 150);
+      }
+    };
+    window.addEventListener("mousedown", handleClickOutside);
+    return () => window.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  (0, import_react.useEffect)(() => {
+    if (optionWrapperRef.current) {
+      setOptionWrapperHeight(optionWrapperRef.current.getBoundingClientRect().height);
+    }
+  }, [targetRect]);
   const position = targetRect ? calculatePositionWithScroll(targetRect, optionWrapperHeight) : null;
-  const getBaseProps = (0, import_react2.useCallback)(
-    () => ({
-      className: slots.base({ class: classNames == null ? void 0 : classNames.base })
-    }),
-    [slots, classNames]
-  );
-  const getLabelProps = (0, import_react2.useCallback)(
-    () => ({
-      className: slots.label({ class: classNames == null ? void 0 : classNames.label })
-    }),
-    [slots, classNames]
-  );
-  const getSelectWrapperProps = (0, import_react2.useCallback)(
-    () => ({
-      className: slots.selectWrapper({ class: classNames == null ? void 0 : classNames.selectWrapper }),
-      ref: selectWrapperRef,
-      onClick: handleToggleSelect
-    }),
-    [slots, classNames]
-  );
-  const getSelectProps = (0, import_react2.useCallback)(
-    () => ({
-      ...inputProps,
-      ref,
-      className: slots.select({ class: classNames == null ? void 0 : classNames.select }),
-      value: (selectedOption == null ? void 0 : selectedOption.value) || "",
-      readOnly: true,
-      size: 0
-    }),
-    [slots, classNames, inputProps, selectedOption, ref]
-  );
-  const getOptionsWrapperProps = (0, import_react2.useCallback)(
-    () => ({
-      className: slots.optionsWrapper({ class: classNames == null ? void 0 : classNames.optionsWrapper }),
-      ref: optionWrapperRef
-    }),
-    [slots, classNames]
-  );
-  const getErrorMessageProps = (0, import_react2.useCallback)(
-    () => ({
-      className: slots.errorMessage({ class: classNames == null ? void 0 : classNames.errorMessage })
-    }),
-    [slots, classNames]
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { ...getBaseProps(), children: [
-      props.label && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("label", { ...getLabelProps(), children: props.label }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { "data-expanded": !!targetRect, ...getSelectWrapperProps(), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("input", { ...getSelectProps() }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon_default, { name: !!targetRect ? "arrow-triangle-up" : "arrow-triangle-down", size: originalProps.size, fill: true })
-      ] }),
-      props.errorMessage && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { ...getErrorMessageProps(), children: props.errorMessage })
-    ] }),
-    targetRect && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: (0, import_react_dom.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  const displayValue = multiple ? selectedOptions.map((opt) => opt.value).join(", ") : ((_a = selectedOptions[0]) == null ? void 0 : _a.value) || "";
+  const Option = ({
+    option,
+    isSelected,
+    onClick
+  }) => {
+    const slot = select({ ...variantProps, isSelected });
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { title: option.value, onClick, className: clsx(slot.option({ class: classNames == null ? void 0 : classNames.option })), children: [
+      option.value,
+      isSelected && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon_default, { name: "check", size: originalProps.size })
+    ] });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      "div",
+      {
+        className: clsx(
+          slots.base({ class: classNames == null ? void 0 : classNames.base }),
+          variantProps.direction === "horizon" ? slots.horizon({ class: classNames == null ? void 0 : classNames.horizon }) : slots.vertical({ class: classNames == null ? void 0 : classNames.vertical })
+        ),
+        children: [
+          label && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("label", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+              "div",
+              {
+                "data-expanded": isOpen,
+                className: clsx(
+                  slots.selectWrapper({ class: classNames == null ? void 0 : classNames.selectWrapper }),
+                  inputProps.readOnly ? slots.readonly({ class: classNames == null ? void 0 : classNames.readonly }) : ""
+                ),
+                ref: selectWrapperRef,
+                onClick: handleToggleSelect,
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    "input",
+                    {
+                      ...inputProps,
+                      ref,
+                      className: clsx(
+                        slots.select({ class: classNames == null ? void 0 : classNames.select }),
+                        inputProps.readOnly ? "!text-body-foreground placeholder:text-body-foreground" : ""
+                      ),
+                      value: displayValue,
+                      readOnly: true,
+                      size: 0
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    Icon_default,
+                    {
+                      name: "brace-up",
+                      size: originalProps.size,
+                      className: `transition-transform duration-200 ${isOpen ? "rotate-0" : "rotate-180"}`
+                    }
+                  )
+                ]
+              }
+            ),
+            helperText && !errorText && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: slots.helperText({ class: classNames == null ? void 0 : classNames.helperText }), children: helperText }),
+            errorText && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: clsx("error", slots.errorText({ class: classNames == null ? void 0 : classNames.errorText })), children: errorText })
+          ] })
+        ]
+      }
+    ),
+    isVisible && (0, import_react_dom.createPortal)(
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         "div",
         {
-          ...getOptionsWrapperProps(),
+          ref: optionWrapperRef,
+          className: slots.optionsWrapper({ class: classNames == null ? void 0 : classNames.optionsWrapper }),
           style: {
             position: "absolute",
             top: position == null ? void 0 : position.top,
             left: position == null ? void 0 : position.left,
-            width: targetRect.width
+            width: targetRect == null ? void 0 : targetRect.width,
+            zIndex: 1e3,
+            opacity: isOpen ? 1 : 0,
+            transform: isOpen ? "translateY(0)" : "translateY(-0.25rem)",
+            transition: "opacity 150ms ease-out, transform 150ms ease-out"
           },
-          children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-            option_default,
-            {
-              variant: originalProps.variant,
-              size: originalProps.size,
-              color: originalProps.color,
-              option,
-              isSelected: (selectedOption == null ? void 0 : selectedOption.key) === option.key,
-              onClick: () => handleChangeOption(option),
-              children: option.value
-            },
-            option.key
-          ))
+          children: options.map((option) => {
+            const isSelected = selectedOptions.some((o) => o.key === option.key);
+            return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              Option,
+              {
+                option,
+                isSelected,
+                onClick: () => handleChangeOption(option)
+              },
+              option.key
+            );
+          })
         }
       ),
       document.body
-    ) })
+    )
   ] });
 });
 Select.displayName = "Select";
 var select_default = Select;
 var select = tv({
   slots: {
-    base: ["group/select", "flex flex-col"],
-    label: ["flex", "items-center"],
+    base: ["group/select", "flex"],
+    vertical: ["flex-col"],
+    horizon: ["flex-row", "gap-0"],
+    label: ["flex", "items-center", "font-bold", "text-body-foreground", "min-w-[80px]"],
+    wrapper: ["flex", "flex-col"],
     selectWrapper: [
       "flex",
       "items-center",
-      "bg-transparent",
-      "border-neutral-main",
-      "transition duration-200",
-      "group-has-[p]/select:border-danger-main",
-      "group-has-[p]/select:text-danger-main",
-      "group-has-[p]/select:bg-danger-soft"
+      "justify-between",
+      "border",
+      "cursor-pointer",
+      "text-neutral-main",
+      "hover:bg-trans-soft",
+      "group-has-[p.error]/select:border-danger-main",
+      "group-has-[p.error]/select:bg-danger-soft",
+      "group-has-[p.error]/select:text-danger-main",
+      "group-has-[p.error]/select:hover:bg-danger-soft"
     ],
     select: [
-      "w-full",
       "bg-transparent",
-      "text-foreground",
-      "cursor-inherit",
-      "cursor-pointer",
+      "w-full",
+      "outline-none",
       "placeholder:text-neutral-main",
-      "group-has-[p]/select:text-danger-main",
-      "focus-visible:outline-none"
+      "text-neutral-dark",
+      "group-has-[p.error]/select:text-danger-main",
+      "group-has-[p.error]/select:placeholder:text-danger-main"
     ],
-    optionsWrapper: ["w-[240px]", "border", "bg-background", "cursor-pointer", "overflow-y-auto"],
-    errorMessage: ["text-danger-main"]
+    optionsWrapper: ["border", "rounded", "bg-white", "shadow", "overflow-auto"],
+    option: ["flex", "justify-between", "items-center", "cursor-pointer"],
+    helperText: ["text-neutral-main"],
+    errorText: ["text-danger-main"],
+    readonly: ["pointer-events-none", "!bg-trans-soft"]
   },
   variants: {
-    variant: {
-      solid: {
-        selectWrapper: "bg-trans-soft hover:bg-trans-light data-[expanded=true]:bg-trans-light group-has-[p]/select:bg-danger-soft"
-      },
-      normal: {
-        selectWrapper: "border hover:bg-trans-soft data-[expanded=true]:bg-trans-soft"
-      },
-      line: {
-        selectWrapper: "border-b !rounded-none hover:bg-trans-soft data-[expanded=true]:bg-trans-soft",
-        optionsWrapper: "!rounded-none"
-      }
-    },
     color: {
       primary: {
-        selectWrapper: "data-[expanded=true]:border-primary-main text-primary-main",
-        optionsWrapper: "border-primary-main",
-        select: "data-[expanded=true]:text-primary-main"
+        selectWrapper: ["hover:text-primary-main"],
+        option: ["hover:bg-primary-soft", "hover:text-primary-main"]
       },
       secondary: {
-        selectWrapper: "data-[expanded=true]:border-secondary-main text-secondary-main",
-        optionsWrapper: "border-secondary-main",
-        select: "data-[expanded=true]:text-secondary-main"
+        selectWrapper: ["hover:text-secondary-main"],
+        select: ["text-secondary-main"],
+        option: ["hover:bg-secondary-soft", "hover:text-secondary-main"]
       }
     },
     size: {
       sm: {
-        base: "text-sm gap-[6px]",
-        selectWrapper: "w-[240px] h-[24px] px-[6px] py-[4.5px] gap-[6px] rounded-sm",
-        optionsWrapper: "max-h-[96px] rounded-sm",
-        errorMessage: "text-sm"
+        base: ["text-sm", "gap-[4px]"],
+        label: ["text-sm"],
+        wrapper: ["gap-[4px]"],
+        selectWrapper: ["w-[240px]", "h-[24px]", "rounded-sm", "px-[4px]"],
+        select: ["text-sm"],
+        option: ["px-[4px]", "py-[3px]", "text-sm"],
+        helperText: ["text-sm"],
+        errorText: ["text-sm"]
       },
       md: {
-        base: "text-md gap-[8px]",
-        selectWrapper: "w-[240px] h-[30px] px-[8px] py-[6.5px] gap-[8px] rounded-md",
-        optionsWrapper: "max-h-[120px] rounded-md",
-        errorMessage: "text-md"
+        base: ["text-md", "gap-[6px]", "rounded-md"],
+        label: ["text-md"],
+        wrapper: ["gap-[6px]"],
+        selectWrapper: ["w-[240px]", "h-[32px]", "rounded-md", "px-[6px]"],
+        select: ["text-md"],
+        option: ["px-[6px]", "py-[5.5px]", "text-md"],
+        helperText: ["text-sm"],
+        errorText: ["text-sm"]
       },
       lg: {
-        base: "text-lg gap-[10px]",
-        selectWrapper: "w-[240px] h-[36px] px-[10px] py-[8px] gap-[10px] rounded-lg",
-        optionsWrapper: "max-h-[144px] rounded-lg",
-        errorMessage: "text-lg"
+        base: ["text-lg", "gap-[8px]"],
+        label: ["text-lg"],
+        wrapper: ["gap-[8px]"],
+        selectWrapper: ["w-[240px]", "h-[40px]", "rounded-lg", "px-[8px]"],
+        select: ["text-lg"],
+        option: ["px-[8px]", "py-[8px]", "text-lg"],
+        helperText: ["text-md"],
+        errorText: ["text-md"]
       },
       xl: {
-        base: "text-lg gap-[10px]",
-        selectWrapper: "w-[240px] h-[36px] px-[10px] py-[8px] gap-[10px] rounded-xl",
-        optionsWrapper: "max-h-[144px] rounded-xl",
-        errorMessage: "text-xl"
+        base: ["text-xl", "gap-[10px]"],
+        label: ["text-xl"],
+        wrapper: ["gap-[10px]"],
+        selectWrapper: ["w-[240px]", "h-[50px]", "rounded-lg", "px-[10px]"],
+        select: ["text-xl"],
+        option: ["px-[10px]", "py-[11.5px]"],
+        helperText: ["text-md"],
+        errorText: ["text-md"]
       }
     },
-    radius: {
-      default: "",
-      none: {
-        selectWrapper: "rounded-none",
-        optionsWrapper: "rounded-none"
-      },
-      full: {
-        selectWrapper: "rounded-full"
-      }
+    direction: {
+      vertical: "",
+      horizon: ""
     },
-    fullWidth: {
+    full: {
       true: {
-        selectWrapper: "w-full",
-        optionsWrapper: "w-full"
+        base: ["w-full"],
+        wrapper: ["w-full"],
+        selectWrapper: ["w-full"]
       }
     },
-    isDisabled: {
+    disabled: {
       true: {
-        base: "cursor-default",
-        selectWrapper: "bg-neutral-soft border-neutral-light text-neutral-light pointer-events-none",
-        select: "text-neutral-light focus:text-neutral-light",
-        label: "text-neutral-light"
+        base: ["pointer-events-none"],
+        selectWrapper: [
+          "bg-neutral-soft",
+          "border-neutral-light",
+          "group-has-[p.error]/select:text-danger-light",
+          "group-has-[p.error]/select:bg-danger-soft",
+          "group-has-[p.error]/select:border-danger-light"
+        ],
+        select: [
+          "text-neutral-light",
+          "placeholder:text-neutral-light",
+          "group-has-[p.error]/select:text-danger-light",
+          "group-has-[p.error]/select:placeholder:text-danger-light"
+        ],
+        helperText: ["!text-neutral-light"],
+        errorText: ["!text-danger-light"]
       }
     },
-    isRequired: {
-      true: {
-        label: "after:content-['*'] after:text-danger-main after:ml-0.5"
-      }
+    isSelected: {
+      true: "",
+      false: ""
     }
   },
-  defaultVariants: {
-    variant: "solid",
-    color: "primary",
-    size: "md",
-    fullWidth: false,
-    isDisabled: false,
-    isRequired: false
-  },
   compoundVariants: [
     {
-      isDisabled: true,
-      isRequired: true,
+      color: "primary",
+      isSelected: true,
       class: {
-        label: "after:text-danger-light"
+        option: "bg-primary-soft text-primary-main"
+      }
+    },
+    {
+      color: "secondary",
+      isSelected: true,
+      class: {
+        option: "bg-secondary-soft text-secondary-main"
       }
     }
-  ]
+  ],
+  defaultVariants: {
+    color: "primary",
+    size: "md",
+    direction: "vertical",
+    disabled: false,
+    readonly: false
+  }
 });