@deepnoid/ui 0.1.2 → 0.1.4

package/dist/components/input/index.js

@@ -4157,172 +4157,230 @@ var Input = (0, import_react.forwardRef)((originalProps, ref) => {
 });
 Input.displayName = "Input";
 var input_default = Input;
-var inputStyle = tv({
-  slots: {
-    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: ["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",
-      "select-none",
-      "text-neutral-main",
-      "group-has-[:hover]/input:text-neutral-dark",
-      "group-has-[p.error]/input: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: ["!border-transparent", "bg-trans-soft", "group-has-[:focus]/input:text-body-foreground"],
-        readonly: ["!bg-trans-light"]
+var inputStyle = tv(
+  {
+    slots: {
+      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: ["flex", "items-center", "duration-200", "group-has-[.error]/input:bg-danger-soft"],
+      input: [
+        "w-full",
+        "h-full",
+        "bg-transparent",
+        "text-neutral-main",
+        "placeholder:text-neutral-main",
+        "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-[.error]/input:text-danger-main",
+        "group-has-[.error]/input:placeholder:text-danger-main"
+      ],
+      content: [
+        "flex",
+        "items-center",
+        "select-none",
+        "text-neutral-main",
+        "group-has-[:hover]/input:text-neutral-dark",
+        "group-has-[.error]/input: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: ["border-transparent", "bg-trans-soft"],
+          readonly: ["!bg-trans-light"]
+        },
+        outline: {
+          inputWrapper: [
+            "border-neutral-light",
+            "group-has-[:hover]/input:bg-trans-soft",
+            "group-has-[:focus]/input:bg-body-background",
+            "group-has-[.error]/input:border-danger-main"
+          ],
+          readonly: ["!bg-trans-soft"]
+        },
+        underline: {
+          inputWrapper: [
+            "bg-transparent",
+            "rounded-none",
+            "group-has-[:hover]/input:bg-trans-soft",
+            "group-has-[:focus]/input:bg-body-background",
+            "group-has-[.error]/input:border-danger-main"
+          ],
+          readonly: ["!bg-trans-soft"]
+        }
       },
-      outline: {
-        inputWrapper: [
-          "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"]
+      color: {
+        primary: {
+          content: [
+            "group-has-[:focus]/input:text-primary-main",
+            "!group-has-[.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: {
+          content: [
+            "group-has-[:focus]/input:text-secondary-main",
+            "group-has-[: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"
+          ]
+        }
       },
-      underline: {
-        inputWrapper: [
-          "bg-transparent",
-          "!rounded-none",
-          "!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: {
-        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"
-        ]
+      size: {
+        sm: {
+          base: ["text-sm", "gap-[4px]"],
+          label: ["text-sm"],
+          innerWrapper: ["gap-[4px]"],
+          inputWrapper: ["w-[240px]", "h-[24px]", "rounded-sm", "px-[4px]", "gap-[4px]"],
+          helperText: ["text-sm"],
+          errorText: ["text-sm"]
+        },
+        md: {
+          base: ["text-md", "gap-[6px]"],
+          label: ["text-md"],
+          innerWrapper: ["gap-[6px]"],
+          inputWrapper: ["w-[240px]", "h-[32px]", "rounded-md", "px-[6px]", "gap-[6px]"],
+          helperText: ["text-sm"],
+          errorText: ["text-sm"]
+        },
+        lg: {
+          base: ["text-lg", "gap-[8px]"],
+          label: ["text-lg"],
+          innerWrapper: ["gap-[8px]"],
+          inputWrapper: ["w-[240px]", "h-[40px]", "rounded-lg", "px-[8px]", "gap-[8px]"],
+          helperText: ["text-md"],
+          errorText: ["text-md"]
+        },
+        xl: {
+          base: ["text-xl", "gap-[10px]"],
+          label: ["text-xl"],
+          innerWrapper: ["gap-[10px]"],
+          inputWrapper: ["w-[240px]", "h-[50px]", "rounded-lg", "px-[10px]", "gap-[10px]"],
+          helperText: ["text-md"],
+          errorText: ["text-md"]
+        }
       },
-      secondary: {
-        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"
-        ]
+      direction: {
+        vertical: "",
+        horizon: ""
+      },
+      full: {
+        true: {
+          base: ["w-full"],
+          innerWrapper: ["flex-1"],
+          inputWrapper: ["w-full"]
+        }
+      },
+      disabled: {
+        true: {
+          inputWrapper: ["bg-neutral-soft", "pointer-events-none", "group-has-[.error]/input:text-danger-light"],
+          input: [
+            "text-neutral-light",
+            "placeholder:text-neutral-light",
+            "group-has-[.error]/input:text-danger-light",
+            "group-has-[.error]/input:placeholder:text-danger-light"
+          ],
+          content: ["text-neutral-light", "group-has-[.error]/input:text-danger-light"],
+          helperText: ["!text-neutral-light"],
+          errorText: ["!text-danger-light"]
+        }
       }
     },
-    size: {
-      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"]
+    compoundVariants: [
+      {
+        variant: "outline",
+        size: "sm",
+        class: {
+          inputWrapper: ["border-sm"]
+        }
       },
-      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"]
+      {
+        variant: "outline",
+        size: "md",
+        class: {
+          inputWrapper: ["border-md"]
+        }
       },
-      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"]
+      {
+        variant: "outline",
+        size: "lg",
+        class: {
+          inputWrapper: ["border-lg"]
+        }
       },
-      xl: {
-        base: ["text-xl", "gap-[10px]"],
-        label: ["text-xl"],
-        innerWrapper: ["gap-[10px]"],
-        inputWrapper: ["w-[240px]", "h-[50px]", "rounded-lg", "px-[10px]", "border-xl"],
-        helperText: ["text-md"],
-        errorText: ["text-md"]
-      }
-    },
-    direction: {
-      vertical: "",
-      horizon: ""
-    },
-    full: {
-      true: {
-        base: ["w-full"],
-        innerWrapper: ["flex-1"],
-        inputWrapper: ["w-full"]
-      }
-    },
-    disabled: {
-      true: {
-        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"]
+      {
+        variant: "outline",
+        size: "xl",
+        class: {
+          inputWrapper: ["border-xl"]
+        }
+      },
+      {
+        variant: "underline",
+        size: "sm",
+        class: {
+          inputWrapper: ["border-b-sm"]
+        }
+      },
+      {
+        variant: "underline",
+        size: "md",
+        class: {
+          inputWrapper: ["border-b-md"]
+        }
+      },
+      {
+        variant: "underline",
+        size: "lg",
+        class: {
+          inputWrapper: ["border-b-lg"]
+        }
+      },
+      {
+        variant: "underline",
+        size: "xl",
+        class: {
+          inputWrapper: ["border-b-xl"]
+        }
+      },
+      {
+        disabled: true,
+        variant: ["outline", "underline"],
+        class: {
+          inputWrapper: ["!bg-body-background", "group-has-[.error]/input:border-danger-light"]
+        }
       }
+    ],
+    defaultVariants: {
+      variant: "solid",
+      color: "primary",
+      size: "md",
+      direction: "vertical",
+      disabled: false,
+      readonly: false
     }
   },
-  compoundVariants: [
-    {
-      disabled: true,
-      variant: ["outline", "underline"],
-      class: {
-        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
+  {
+    twMerge: false
   }
-});
+);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Input

package/dist/components/input/index.mjs

@@ -2,7 +2,7 @@
 import "../../chunk-2GCSFWHD.mjs";
 import {
   input_default
-} from "../../chunk-OYNGJ33M.mjs";
+} from "../../chunk-TDJJRQDC.mjs";
 import "../../chunk-ZYIIXWVY.mjs";
 import "../../chunk-24NQEB73.mjs";
 import "../../chunk-P2TMIZRH.mjs";