@deepnoid/ui 0.1.0 → 0.1.2

package/dist/components/input/index.js

@@ -109,252 +109,6 @@ module.exports = __toCommonJS(input_exports);
 // src/components/input/input.tsx
 var import_react = __toESM(require("react"));
 
-// src/utils/tailwind-variants.ts
-var import_tailwind_variants = require("tailwind-variants");
-
-// ../tailwind-config/src/plugin.ts
-var import_plugin = __toESM(require_plugin());
-
-// ../tailwind-config/src/typography/font.ts
-var fontSize = {
-  h1: [
-    "40px",
-    {
-      letterSpacing: "-2%",
-      fontWeight: "700"
-    }
-  ],
-  h2: [
-    "34px",
-    {
-      letterSpacing: "-2%",
-      fontWeight: "700"
-    }
-  ],
-  h3: [
-    "28px",
-    {
-      letterSpacing: "-2%",
-      fontWeight: "700"
-    }
-  ],
-  h4: [
-    "24px",
-    {
-      letterSpacing: "-2%",
-      fontWeight: "700"
-    }
-  ],
-  h5: [
-    "20px",
-    {
-      letterSpacing: "-2%",
-      fontWeight: "600"
-    }
-  ],
-  sm: [
-    "12px",
-    {
-      lineHeight: "18px",
-      letterSpacing: "-2%",
-      fontWeight: "400"
-    }
-  ],
-  md: [
-    "14px",
-    {
-      lineHeight: "21px",
-      letterSpacing: "-2%",
-      fontWeight: "400"
-    }
-  ],
-  lg: [
-    "16px",
-    {
-      lineHeight: "24px",
-      letterSpacing: "-2%",
-      fontWeight: "400"
-    }
-  ],
-  xl: [
-    "18px",
-    {
-      lineHeight: "27px",
-      letterSpacing: "-2%",
-      fontWeight: "400"
-    }
-  ]
-};
-
-// ../tailwind-config/src/animation/slide.ts
-var sliceAnimation = {
-  slideInFromTop: "slideInFromTop 0.5s ease-out",
-  slideInFromBottom: "slideInFromBottom 0.5s ease-out",
-  slideInFromLeft: "slideInFromLeft 0.5s ease-out",
-  slideInFromRight: "slideInFromRight 0.5s ease-out",
-  slideOutToTop: "slideOutToTop 0.5s ease-in",
-  slideOutToBottom: "slideOutToBottom 0.5s ease-in",
-  slideOutToLeft: "slideOutToLeft 0.5s ease-in",
-  slideOutToRight: "slideOutToRight 0.5s ease-in"
-};
-var sliceKeyframe = {
-  slideInFromTop: {
-    "0%": {
-      transform: "translateY(-10px)",
-      opacity: "0"
-    },
-    "100%": {
-      transform: "translateY(0)",
-      opacity: "1"
-    }
-  },
-  slideInFromBottom: {
-    "0%": {
-      transform: "translateY(10px)",
-      opacity: "0"
-    },
-    "100%": {
-      transform: "translateY(0)",
-      opacity: "1"
-    }
-  },
-  slideInFromLeft: {
-    "0%": {
-      transform: "translateX(-10px)",
-      opacity: "0"
-    },
-    "100%": {
-      transform: "translateX(0)",
-      opacity: "1"
-    }
-  },
-  slideInFromRight: {
-    "0%": {
-      transform: "translateX(10px)",
-      opacity: "0"
-    },
-    "100%": {
-      transform: "translateX(0)",
-      opacity: "1"
-    }
-  },
-  slideOutToTop: {
-    "0%": {
-      transform: "translateY(0)",
-      opacity: "1"
-    },
-    "100%": {
-      transform: "translateY(-10px)",
-      opacity: "0"
-    }
-  },
-  slideOutToBottom: {
-    "0%": {
-      transform: "translateY(0)",
-      opacity: "1"
-    },
-    "100%": {
-      transform: "translateY(10px)",
-      opacity: "0"
-    }
-  },
-  slideOutToLeft: {
-    "0%": {
-      transform: "translateX(0)",
-      opacity: "1"
-    },
-    "100%": {
-      transform: "translateX(-10px)",
-      opacity: "0"
-    }
-  },
-  slideOutToRight: {
-    "0%": {
-      transform: "translateX(0)",
-      opacity: "1"
-    },
-    "100%": {
-      transform: "translateX(10px)",
-      opacity: "0"
-    }
-  }
-};
-
-// ../tailwind-config/src/animation/index.ts
-var animation = { ...sliceAnimation };
-var keyframes = { ...sliceKeyframe };
-
-// ../tailwind-config/src/shadow/index.ts
-var boxShadow = {
-  "border-1": "inner 0 0 0 1px inset",
-  "border-2": "inner 0 0 0 2px inset",
-  "border-3": "inner 0 0 0 3px inset",
-  "border-4": "inner 0 0 0 4px inset",
-  "border-5": "inner 0 0 0 5px inset",
-  "border-6": "inner 0 0 0 6px inset",
-  "border-7": "inner 0 0 0 7px inset",
-  "border-8": "inner 0 0 0 8px inset",
-  "border-9": "inner 0 0 0 9px inset",
-  "border-10": "inner 0 0 0 10px inset",
-  inner: "inset 0 4px 8px 0 rgba(36, 39, 44, 0.2)",
-  drop: "0 20px 40px 0 rgba(36, 39, 44, 0.2)"
-};
-
-// ../tailwind-config/src/border/radius.ts
-var borderRadius = {
-  sm: "4px",
-  md: "6px",
-  lg: "8px",
-  xl: "10px",
-  none: "0",
-  full: "9999px"
-};
-
-// ../tailwind-config/src/space/gap.ts
-var gap = {
-  sm: "4px",
-  md: "6px",
-  lg: "8px",
-  xl: "10px"
-};
-
-// src/utils/tailwind-variants.ts
-function typedKeys(obj) {
-  return Object.keys(obj);
-}
-var COMMON_SIZE = ["sm", "md", "lg", "xl"];
-var tv = (0, import_tailwind_variants.createTV)({
-  twMergeConfig: {
-    classGroups: {
-      fontSize: [{ text: [...typedKeys(fontSize)] }],
-      borderRadius: [{ rounded: [...typedKeys(borderRadius)] }],
-      boxShadow: [{ shadow: [...typedKeys(boxShadow)] }],
-      padding: [{ p: [...COMMON_SIZE] }],
-      gap: [{ gap: [...typedKeys(gap)] }]
-    }
-  }
-});
-
-// src/utils/props.ts
-var mapPropsVariants = (props, variantKeys, removeVariantProps = true) => {
-  if (!variantKeys) {
-    return [props, {}];
-  }
-  const picked = variantKeys.reduce((acc, key) => {
-    if (key in props) {
-      return { ...acc, [key]: props[key] };
-    } else {
-      return acc;
-    }
-  }, {});
-  if (removeVariantProps) {
-    const omitted = Object.keys(props).filter((key) => !variantKeys.includes(key)).reduce((acc, key) => ({ ...acc, [key]: props[key] }), {});
-    return [omitted, picked];
-  } else {
-    return [props, picked];
-  }
-};
-
 // src/components/icon/template.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var template = {
@@ -4027,46 +3781,290 @@ var Icon = ({ name, size = "md", fill = false, className, onClick, ...props }) =
 };
 var Icon_default = Icon;
 
-// src/components/input/input.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var Input = (0, import_react.forwardRef)((originalProps, ref) => {
-  const [props, variantProps] = mapPropsVariants(originalProps, inputStyle.variantKeys);
-  const { classNames, label, errorMessage, startContent, endContent, ...inputProps } = props;
-  const inputRef = (0, import_react.useRef)(null);
-  const slots = (0, import_react.useMemo)(() => inputStyle({ ...variantProps }), [variantProps]);
-  const getBaseProps = (0, import_react.useCallback)(
-    () => ({
-      className: slots.base({ class: classNames == null ? void 0 : classNames.base })
-    }),
-    [slots, classNames]
-  );
-  const getLabelProps = (0, import_react.useCallback)(
-    () => ({
-      className: slots.label({ class: classNames == null ? void 0 : classNames.label })
-    }),
-    [slots, classNames]
-  );
-  const getInnerWrapperProps = (0, import_react.useCallback)(
-    () => ({
-      className: slots.innerWrapper({ class: classNames == null ? void 0 : classNames.innerWrapper })
-    }),
-    [slots, classNames]
-  );
-  const getInputWrapperProps = (0, import_react.useCallback)(
-    () => ({
-      className: slots.inputWrapper({ class: classNames == null ? void 0 : classNames.inputWrapper })
-    }),
-    [slots, classNames]
-  );
-  const getInputProps = (0, import_react.useCallback)(
-    () => ({
-      ...inputProps,
-      ref: ref || inputRef,
-      className: slots.input({ class: classNames == null ? void 0 : classNames.input }),
-      size: 0
-    }),
-    [slots, classNames, inputProps, ref]
-  );
+// src/utils/tailwind-variants.ts
+var import_tailwind_variants = require("tailwind-variants");
+
+// ../tailwind-config/src/plugin.ts
+var import_plugin = __toESM(require_plugin());
+
+// ../tailwind-config/src/typography/font.ts
+var fontSize = {
+  h1: [
+    "40px",
+    {
+      fontWeight: "700"
+    }
+  ],
+  h2: [
+    "34px",
+    {
+      fontWeight: "700"
+    }
+  ],
+  h3: [
+    "28px",
+    {
+      fontWeight: "700"
+    }
+  ],
+  h4: [
+    "24px",
+    {
+      fontWeight: "700"
+    }
+  ],
+  h5: [
+    "20px",
+    {
+      fontWeight: "600"
+    }
+  ],
+  sm: [
+    "12px",
+    {
+      lineHeight: "18px",
+      fontWeight: "400"
+    }
+  ],
+  md: [
+    "14px",
+    {
+      lineHeight: "21px",
+      fontWeight: "400"
+    }
+  ],
+  lg: [
+    "16px",
+    {
+      lineHeight: "24px",
+      fontWeight: "400"
+    }
+  ],
+  xl: [
+    "18px",
+    {
+      lineHeight: "27px",
+      fontWeight: "400"
+    }
+  ]
+};
+
+// ../tailwind-config/src/animation/slide.ts
+var sliceAnimation = {
+  slideInFromTop: "slideInFromTop 0.5s ease-out",
+  slideInFromBottom: "slideInFromBottom 0.5s ease-out",
+  slideInFromLeft: "slideInFromLeft 0.5s ease-out",
+  slideInFromRight: "slideInFromRight 0.5s ease-out",
+  slideOutToTop: "slideOutToTop 0.5s ease-in",
+  slideOutToBottom: "slideOutToBottom 0.5s ease-in",
+  slideOutToLeft: "slideOutToLeft 0.5s ease-in",
+  slideOutToRight: "slideOutToRight 0.5s ease-in"
+};
+var sliceKeyframe = {
+  slideInFromTop: {
+    "0%": {
+      transform: "translateY(-10px)",
+      opacity: "0"
+    },
+    "100%": {
+      transform: "translateY(0)",
+      opacity: "1"
+    }
+  },
+  slideInFromBottom: {
+    "0%": {
+      transform: "translateY(10px)",
+      opacity: "0"
+    },
+    "100%": {
+      transform: "translateY(0)",
+      opacity: "1"
+    }
+  },
+  slideInFromLeft: {
+    "0%": {
+      transform: "translateX(-10px)",
+      opacity: "0"
+    },
+    "100%": {
+      transform: "translateX(0)",
+      opacity: "1"
+    }
+  },
+  slideInFromRight: {
+    "0%": {
+      transform: "translateX(10px)",
+      opacity: "0"
+    },
+    "100%": {
+      transform: "translateX(0)",
+      opacity: "1"
+    }
+  },
+  slideOutToTop: {
+    "0%": {
+      transform: "translateY(0)",
+      opacity: "1"
+    },
+    "100%": {
+      transform: "translateY(-10px)",
+      opacity: "0"
+    }
+  },
+  slideOutToBottom: {
+    "0%": {
+      transform: "translateY(0)",
+      opacity: "1"
+    },
+    "100%": {
+      transform: "translateY(10px)",
+      opacity: "0"
+    }
+  },
+  slideOutToLeft: {
+    "0%": {
+      transform: "translateX(0)",
+      opacity: "1"
+    },
+    "100%": {
+      transform: "translateX(-10px)",
+      opacity: "0"
+    }
+  },
+  slideOutToRight: {
+    "0%": {
+      transform: "translateX(0)",
+      opacity: "1"
+    },
+    "100%": {
+      transform: "translateX(10px)",
+      opacity: "0"
+    }
+  }
+};
+
+// ../tailwind-config/src/animation/index.ts
+var animation = { ...sliceAnimation };
+var keyframes = { ...sliceKeyframe };
+
+// ../tailwind-config/src/shadow/index.ts
+var boxShadow = {
+  "border-1": "inner 0 0 0 1px inset",
+  "border-2": "inner 0 0 0 2px inset",
+  "border-3": "inner 0 0 0 3px inset",
+  "border-4": "inner 0 0 0 4px inset",
+  "border-5": "inner 0 0 0 5px inset",
+  "border-6": "inner 0 0 0 6px inset",
+  "border-7": "inner 0 0 0 7px inset",
+  "border-8": "inner 0 0 0 8px inset",
+  "border-9": "inner 0 0 0 9px inset",
+  "border-10": "inner 0 0 0 10px inset",
+  inner: "inset 0 4px 8px 0 rgba(36, 39, 44, 0.2)",
+  drop: "0 20px 40px 0 rgba(36, 39, 44, 0.2)"
+};
+
+// ../tailwind-config/src/border/radius.ts
+var borderRadius = {
+  sm: "4px",
+  md: "6px",
+  lg: "8px",
+  xl: "10px",
+  none: "0",
+  full: "9999px"
+};
+
+// ../tailwind-config/src/space/gap.ts
+var gap = {
+  sm: "4px",
+  md: "6px",
+  lg: "8px",
+  xl: "10px"
+};
+
+// src/utils/tailwind-variants.ts
+function typedKeys(obj) {
+  return Object.keys(obj);
+}
+var COMMON_SIZE = ["sm", "md", "lg", "xl"];
+var tv = (0, import_tailwind_variants.createTV)({
+  twMergeConfig: {
+    classGroups: {
+      fontSize: [{ text: [...typedKeys(fontSize)] }],
+      borderRadius: [{ rounded: [...typedKeys(borderRadius)] }],
+      boxShadow: [{ shadow: [...typedKeys(boxShadow)] }],
+      padding: [{ p: [...COMMON_SIZE] }],
+      gap: [{ gap: [...typedKeys(gap)] }]
+    }
+  }
+});
+
+// src/utils/props.ts
+var mapPropsVariants = (props, variantKeys, removeVariantProps = true) => {
+  if (!variantKeys) {
+    return [props, {}];
+  }
+  const picked = variantKeys.reduce((acc, key) => {
+    if (key in props) {
+      return { ...acc, [key]: props[key] };
+    } else {
+      return acc;
+    }
+  }, {});
+  if (removeVariantProps) {
+    const omitted = Object.keys(props).filter((key) => !variantKeys.includes(key)).reduce((acc, key) => ({ ...acc, [key]: props[key] }), {});
+    return [omitted, picked];
+  } else {
+    return [props, picked];
+  }
+};
+
+// 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;
+      }
+    }
+  }
+  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;
+          }
+        }
+      }
+    } else {
+      for (y in mix) {
+        if (mix[y]) {
+          str && (str += " ");
+          str += y;
+        }
+      }
+    }
+  }
+  return str;
+}
+
+// src/components/input/input.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Input = (0, import_react.forwardRef)((originalProps, ref) => {
+  const [props, variantProps] = mapPropsVariants(originalProps, inputStyle.variantKeys);
+  const { classNames, label, helperText, errorText, startContent, endContent, ...inputProps } = props;
+  const inputRef = (0, import_react.useRef)(null);
+  const slots = (0, import_react.useMemo)(() => inputStyle({ ...variantProps }), [variantProps]);
   const getContentProps = (0, import_react.useCallback)(
     () => ({
       className: slots.content({ class: classNames == null ? void 0 : classNames.content }),
@@ -4074,12 +4072,6 @@ var Input = (0, import_react.forwardRef)((originalProps, ref) => {
     }),
     [slots, classNames, originalProps.size]
   );
-  const getErrorMessageProps = (0, import_react.useCallback)(
-    () => ({
-      className: slots.errorMessage({ class: classNames == null ? void 0 : classNames.errorMessage })
-    }),
-    [slots, classNames]
-  );
   const renderStartContent = () => {
     if (import_react.default.isValidElement(startContent)) {
       const existingProps = startContent.props;
@@ -4113,7 +4105,7 @@ var Input = (0, import_react.forwardRef)((originalProps, ref) => {
         className: `${getContentProps().className || ""} ${existingProps.className || ""}`.trim()
       };
       return import_react.default.cloneElement(endContent, mergedProps);
-    } else if (errorMessage) {
+    } else if (errorText) {
       const iconProps = { ...getContentProps(), className: getContentProps().className };
       return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { ...iconProps, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon_default, { name: "exclamation-circle", fill: true, size: originalProps.size }) });
     } else {
@@ -4132,146 +4124,204 @@ var Input = (0, import_react.forwardRef)((originalProps, ref) => {
         return renderContentWithIcon();
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { ...getBaseProps(), children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("label", { ...getLabelProps(), children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { ...getInnerWrapperProps(), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { ...getInputWrapperProps(), children: [
-        startContent && renderStartContent(),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("input", { ...getInputProps() }),
-        renderEndContent()
-      ] }),
-      errorMessage && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { ...getErrorMessageProps(), children: errorMessage })
-    ] })
-  ] });
+  return /* @__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.innerWrapper({ class: classNames == null ? void 0 : classNames.innerWrapper }), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+            "div",
+            {
+              className: clsx(
+                slots.inputWrapper({ class: classNames == null ? void 0 : classNames.inputWrapper }),
+                inputProps.readOnly ? slots.readonly({ class: classNames == null ? void 0 : classNames.readonly }) : ""
+              ),
+              children: [
+                startContent && renderStartContent(),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("input", { ...inputProps, ref: ref || inputRef, className: slots.input({ class: classNames == null ? void 0 : classNames.input }), size: 0 }),
+                renderEndContent()
+              ]
+            }
+          ),
+          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 })
+        ] })
+      ]
+    }
+  );
 });
 Input.displayName = "Input";
 var input_default = Input;
 var inputStyle = tv({
   slots: {
-    base: ["group/input", "flex", "flex-col"],
-    label: ["flex", "items-center"],
+    base: ["group/input", "flex"],
+    vertical: ["flex-col"],
+    horizon: ["flex-row", "gap-0"],
+    label: ["flex", "items-center", "font-bold", "text-body-foreground", "min-w-[80px]"],
     innerWrapper: ["flex", "flex-col"],
-    inputWrapper: [
+    inputWrapper: ["flex", "items-center", "transition", "duration-200", "group-has-[p.error]/input:bg-danger-soft"],
+    input: [
+      "w-full",
+      "h-full",
+      "bg-transparent",
+      "text-neutral-main",
+      "placeholder:text-neutral-main",
+      "focus:outline-none",
+      "focus:ring-0",
+      "group-has-[:hover]/input:text-neutral-dark",
+      "group-has-[:hover]/input:placeholder:text-neutral-dark",
+      "group-has-[:focus]/input:text-neutral-dark",
+      "group-has-[:focus]/input:placeholder:text-neutral-dark",
+      "group-has-[p.error]/input:text-danger-main",
+      "group-has-[p.error]/input:placeholder:text-danger-main"
+    ],
+    content: [
       "flex",
       "items-center",
-      "transition",
-      "duration-200",
-      "group-has-[p]/input:border-danger-main",
-      "group-has-[p]/input:bg-danger-soft"
+      "select-none",
+      "text-neutral-main",
+      "group-has-[:hover]/input:text-neutral-dark",
+      "group-has-[p.error]/input:text-danger-main"
     ],
-    input: ["w-full", "h-full", "bg-transparent", "placeholder:text-neutral-main", "focus-visible:outline-none"],
-    content: ["flex", "items-center", "select-none", "group-has-[p]/input:text-danger-main"],
-    errorMessage: ["text-danger-main"]
+    helperText: ["text-neutral-main", "group-has-[:hover]/input:text-neutral-dark"],
+    errorText: ["text-danger-main"],
+    readonly: ["pointer-events-none"]
   },
   variants: {
     variant: {
       solid: {
-        inputWrapper: ["bg-trans-soft", "hover:bg-trans-light", "has-[:focus]:bg-trans-light"]
+        inputWrapper: ["!border-transparent", "bg-trans-soft", "group-has-[:focus]/input:text-body-foreground"],
+        readonly: ["!bg-trans-light"]
       },
-      normal: {
+      outline: {
         inputWrapper: [
-          "bg-transparent",
-          "border",
-          "border-neutral-main",
-          "hover:bg-trans-soft",
-          "has-[:focus]:bg-trans-soft"
-        ]
+          "border-neutral-light",
+          "group-has-[:hover]/input:bg-trans-soft",
+          "group-has-[:focus]/input:bg-body-background",
+          "group-has-[p.error]/input:border-danger-main"
+        ],
+        readonly: ["!bg-trans-soft"]
       },
-      line: {
+      underline: {
         inputWrapper: [
           "bg-transparent",
-          "border-b",
-          "border-neutral-main",
           "!rounded-none",
-          "hover:bg-trans-soft",
-          "has-[:focus]:bg-trans-soft"
-        ]
+          "!border-t-transparent",
+          "!border-l-transparent",
+          "!border-r-transparent",
+          "group-has-[:hover]/input:bg-trans-soft",
+          "group-has-[:focus]/input:bg-body-background",
+          "group-has-[p.error]/input:border-danger-main"
+        ],
+        readonly: ["!bg-trans-soft"]
       }
     },
     color: {
       primary: {
-        inputWrapper: ["has-[:focus]:border-primary-main"],
-        content: ["text-primary-main"]
+        content: [
+          "group-has-[:focus]/input:text-primary-main",
+          "!group-has-[p.error]:not(input:focus):hover/input:text-primary-main"
+        ],
+        helperText: [
+          "group-has-[:focus]/input:text-primary-main",
+          "group-has-[:focus:hover]/input:text-primary-main",
+          "group-has-[:focus]/input:hover:text-primary-main"
+        ]
       },
       secondary: {
-        inputWrapper: ["has-[:focus]:border-secondary-main"],
-        content: ["text-secondary-main"]
+        content: [
+          "group-has-[:focus]/input:text-secondary-main",
+          "!group-has-[p.error]:not(input:focus):hover/input:text-secondary-main"
+        ],
+        helperText: [
+          "group-has-[:focus]/input:text-secondary-main",
+          "group-has-[:focus:hover]/input:text-secondary-main",
+          "group-has-[:focus]/input:hover:text-secondary-main"
+        ]
       }
     },
     size: {
       sm: {
-        base: ["text-sm", "gap-[6px]"],
-        innerWrapper: ["group-has-[p]/input:gap-[6px]"],
-        inputWrapper: ["w-[240px]", "h-[24px]", "rounded-sm", "px-[6px]", "py-[4.5px]", "gap-[6px]"],
-        errorMessage: ["text-sm"]
+        base: ["text-sm", "gap-[4px]"],
+        label: ["text-sm"],
+        innerWrapper: ["gap-[4px]"],
+        inputWrapper: ["w-[240px]", "h-[24px]", "rounded-sm", "px-[4px]", "border-sm"],
+        helperText: ["text-sm"],
+        errorText: ["text-sm"]
       },
       md: {
-        base: ["text-md", "gap-[8px]"],
-        innerWrapper: ["group-has-[p]/input:gap-[8px]"],
-        inputWrapper: ["w-[240px]", "h-[30px]", "rounded-md", "px-[8px]", "py-[6.5px]", "gap-[8px]"],
-        errorMessage: ["text-md"]
+        base: ["text-md", "gap-[6px]"],
+        label: ["text-md"],
+        innerWrapper: ["gap-[6px]"],
+        inputWrapper: ["w-[240px]", "h-[32px]", "rounded-md", "px-[6px]", "border-md"],
+        helperText: ["text-sm"],
+        errorText: ["text-sm"]
       },
       lg: {
-        base: ["text-lg", "gap-[10px]"],
-        innerWrapper: ["group-has-[p]/input:gap-[10px]"],
-        inputWrapper: ["w-[240px]", "h-[36px]", "rounded-lg", "px-[10px]", "py-[8px]", "gap-[10px]"],
-        errorMessage: ["text-lg"]
+        base: ["text-lg", "gap-[8px]"],
+        label: ["text-lg"],
+        innerWrapper: ["gap-[8px]"],
+        inputWrapper: ["w-[240px]", "h-[40px]", "rounded-lg", "px-[8px]", "border-lg"],
+        helperText: ["text-md"],
+        errorText: ["text-md"]
       },
       xl: {
         base: ["text-xl", "gap-[10px]"],
-        innerWrapper: ["group-has-[p]/input:gap-[10px]"],
-        inputWrapper: ["w-[240px]", "h-[36px]", "rounded-xl", "px-[10px]", "py-[8px]", "gap-[10px]"],
-        errorMessage: ["text-xl"]
+        label: ["text-xl"],
+        innerWrapper: ["gap-[10px]"],
+        inputWrapper: ["w-[240px]", "h-[50px]", "rounded-lg", "px-[10px]", "border-xl"],
+        helperText: ["text-md"],
+        errorText: ["text-md"]
       }
     },
-    radius: {
-      default: "",
-      none: {
-        inputWrapper: ["rounded-none"]
-      },
-      full: {
-        inputWrapper: ["rounded-full"]
-      }
+    direction: {
+      vertical: "",
+      horizon: ""
     },
-    fullWidth: {
+    full: {
       true: {
         base: ["w-full"],
         innerWrapper: ["flex-1"],
         inputWrapper: ["w-full"]
       }
     },
-    isDisabled: {
+    disabled: {
       true: {
-        label: ["text-neutral-light"],
-        inputWrapper: ["bg-neutral-soft", "border-neutral-light", "pointer-events-none"],
-        input: ["text-neutral-light", "placeholder:text-neutral-light"],
-        content: ["text-neutral-light", "group-has-[p]/input:text-danger-light"],
-        errorMessage: ["text-danger-light"]
-      }
-    },
-    isRequired: {
-      true: {
-        label: ["after:content-['*']", "after:text-danger-main", "after:ml-0.5"]
+        inputWrapper: ["!bg-neutral-soft", "pointer-events-none", "!group-has-[p.error]/input:text-danger-light"],
+        input: [
+          "text-neutral-light",
+          "placeholder:text-neutral-light",
+          "group-has-[p.error]/input:text-danger-light",
+          "group-has-[p.error]/input:placeholder:text-danger-light"
+        ],
+        content: ["text-neutral-light", "group-has-[p.error]/input:text-danger-light"],
+        helperText: ["!text-neutral-light"],
+        errorText: ["!text-danger-light"]
       }
     }
   },
-  defaultVariants: {
-    variant: "solid",
-    color: "primary",
-    size: "md",
-    fullWidth: false,
-    isDisabled: false,
-    isRequired: false
-  },
   compoundVariants: [
     {
-      isDisabled: true,
-      isRequired: true,
+      disabled: true,
+      variant: ["outline", "underline"],
       class: {
-        label: ["after:text-danger-light"]
+        inputWrapper: ["!bg-body-background", "group-has-[p.error]/input:border-danger-light"]
       }
     }
-  ]
+  ],
+  defaultVariants: {
+    variant: "solid",
+    color: "primary",
+    size: "md",
+    direction: "vertical",
+    disabled: false,
+    readonly: false
+  }
 });
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {