@jala-banyu/theme - npm Package Compare versions

Comparing version 1.3.0 to 1.4.0

dist/components/avatar.js

@@ -141,7 +141,8 @@ "use strict";
 var solid = {
-  primary: "bg-brand text-white",
-  danger: "bg-danger text-white",
-  warning: "bg-warning text-white",
-  success: "bg-success text-white",
+  primary: "bg-brand-700 text-white",
+  danger: "bg-danger-600 text-white",
+  warning: "bg-warning-500 text-white",
+  success: "bg-success-500 text-white",
   white: "bg-white text-neutral-800 border-neutral-300",
+  secondary: "bg-neutral-100 border-neutral-50 text-neutral-800",
   basic: "bg-neutral-50 border-neutral-50 text-neutral-800",
@@ -156,4 +157,5 @@ transparent: "bg-none text-brand-800 border-transparent"
   white: "border-white text-white",
+  secondary: "border-neutral-300 text-neutral-800",
   basic: "border-neutral text-neutral-800",
-  transparent: "border-transparent text-brand-800"
+  transparent: "border-neutral-300 text-brand-800"
 };
@@ -166,2 +168,3 @@ var ghost = {
   white: "text-white",
+  secondary: "text-black",
   basic: "text-black",
@@ -176,2 +179,3 @@ transparent: "text-neutral"
   white: "border-white text-white",
+  secondary: "border-gray text-gray-800",
   basic: "border-gray text-gray-800",
@@ -186,2 +190,3 @@ transparent: "border-transparent text-brand"
   white: "text-white",
+  secondary: "text-white",
   basic: "text-white",
@@ -197,2 +202,3 @@ transparent: "text-white"
   white: "shadow-lg shadow-white/40 bg-white text-neutral-800",
+  secondary: "shadow-lg shadow-neutral/40 bg-neutral-50 text-neutral-800",
   basic: "shadow-lg shadow-neutral/40 bg-neutral-50 text-neutral-800"
@@ -206,2 +212,3 @@ };
   white: "bg-white text-neutral-800",
+  secondary: "bg-neutral-50 text-neutral-800",
   basic: "bg-neutral-50 text-neutral-800",
@@ -216,2 +223,3 @@ transparent: "bg-transparent text-brand-800"
   white: "bg-white text-white shadow-lg",
+  secondary: "bg-white text-neutral-800 shadow-lg",
   basic: "bg-white text-neutral-800 shadow-lg",
@@ -258,3 +266,3 @@ transparent: "bg-white text-brand shadow-lg"
     fallback: [...translateCenterClasses, "flex", "items-center", "justify-center"],
-    name: [...translateCenterClasses, "font-normal", "text-center", "text-inherit"],
+    name: [...translateCenterClasses, "font-semibold", "text-center", "text-inherit"],
     icon: [
@@ -261,0 +269,0 @@ ...translateCenterClasses,

dist/components/breadcrumbs.js

@@ -232,3 +232,3 @@ "use strict";
       class: {
-        item: "text-brand"
+        item: "text-neutral"
       }
@@ -240,3 +240,3 @@ },
       class: {
-        item: "text-success"
+        item: "text-neutral"
       }
@@ -248,3 +248,3 @@ },
       class: {
-        item: "text-warning"
+        item: "text-neutral"
       }
@@ -256,3 +256,3 @@ },
       class: {
-        item: "text-danger"
+        item: "text-neutral"
       }
@@ -272,3 +272,3 @@ },
       class: {
-        item: "hover:text-white hover:bg-brand-500"
+        item: "hover:text-white text-brand hover:bg-brand-500"
       }
@@ -280,3 +280,3 @@ },
       class: {
-        item: "hover:text-white hover:bg-success-500"
+        item: "hover:text-white text-success hover:bg-success-500"
       }
@@ -288,3 +288,3 @@ },
       class: {
-        item: "hover:text-white hover:bg-warning-500"
+        item: "hover:text-white text-warning hover:bg-warning-500"
       }
@@ -296,3 +296,3 @@ },
       class: {
-        item: "hover:text-white hover:bg-danger-500"
+        item: "hover:text-white text-danger hover:bg-danger-500"
       }
@@ -319,4 +319,4 @@ },
     list: "flex flex-wrap list-none",
-    ellipsis: "text-md",
-    separator: "text-default-400 px-1"
+    ellipsis: "text-neutral-800",
+    separator: "text-neutral-800 px-1"
   },
@@ -323,0 +323,0 @@ variants: {

dist/components/button.d.ts

@@ -30,6 +30,6 @@ import * as tailwind_variants from 'tailwind-variants';
     size: {
-        sm: "px-2 min-w-12 h-6 text-xs gap-2";
-        md: "px-3 min-w-16 h-8 text-md gap-2";
-        lg: "px-4 min-w-20 h-10 text-lg gap-2";
-        xl: "px-6 min-w-24 h-12 text-xl gap-3";
+        sm: "";
+        md: "";
+        lg: "";
+        xl: "";
     };
@@ -43,3 +43,3 @@ color: {
         white: "";
-        basic: "";
+        secondary: "";
     };
@@ -58,6 +58,6 @@ radius: {
     isDisabled: {
-        true: "disabled:opacity-50 disabled:pointer-events-none disabled:cursor-not-allowed";
+        true: "disabled:opacity-20 disabled:pointer-events-none disabled:cursor-not-allowed";
     };
     isInGroup: {
-        true: "[&:not(:first-child):not(:last-child)]:rounded-none data-[focus=true]:!ring-0";
+        true: "[&:not(:first-child):not(:last-child)]:rounded-none data-[focus=true]:!ring-0 !w-max";
     };
@@ -81,6 +81,6 @@ isIconOnly: {
     size: {
-        sm: "px-2 min-w-12 h-6 text-xs gap-2";
-        md: "px-3 min-w-16 h-8 text-md gap-2";
-        lg: "px-4 min-w-20 h-10 text-lg gap-2";
-        xl: "px-6 min-w-24 h-12 text-xl gap-3";
+        sm: "";
+        md: "";
+        lg: "";
+        xl: "";
     };
@@ -94,3 +94,3 @@ color: {
         white: "";
-        basic: "";
+        secondary: "";
     };
@@ -109,6 +109,6 @@ radius: {
     isDisabled: {
-        true: "disabled:opacity-50 disabled:pointer-events-none disabled:cursor-not-allowed";
+        true: "disabled:opacity-20 disabled:pointer-events-none disabled:cursor-not-allowed";
     };
     isInGroup: {
-        true: "[&:not(:first-child):not(:last-child)]:rounded-none data-[focus=true]:!ring-0";
+        true: "[&:not(:first-child):not(:last-child)]:rounded-none data-[focus=true]:!ring-0 !w-max";
     };
@@ -132,6 +132,6 @@ isIconOnly: {
     size: {
-        sm: "px-2 min-w-12 h-6 text-xs gap-2";
-        md: "px-3 min-w-16 h-8 text-md gap-2";
-        lg: "px-4 min-w-20 h-10 text-lg gap-2";
-        xl: "px-6 min-w-24 h-12 text-xl gap-3";
+        sm: "";
+        md: "";
+        lg: "";
+        xl: "";
     };
@@ -145,3 +145,3 @@ color: {
         white: "";
-        basic: "";
+        secondary: "";
     };
@@ -160,6 +160,6 @@ radius: {
     isDisabled: {
-        true: "disabled:opacity-50 disabled:pointer-events-none disabled:cursor-not-allowed";
+        true: "disabled:opacity-20 disabled:pointer-events-none disabled:cursor-not-allowed";
     };
     isInGroup: {
-        true: "[&:not(:first-child):not(:last-child)]:rounded-none data-[focus=true]:!ring-0";
+        true: "[&:not(:first-child):not(:last-child)]:rounded-none data-[focus=true]:!ring-0 !w-max";
     };
@@ -183,6 +183,6 @@ isIconOnly: {
     size: {
-        sm: "px-2 min-w-12 h-6 text-xs gap-2";
-        md: "px-3 min-w-16 h-8 text-md gap-2";
-        lg: "px-4 min-w-20 h-10 text-lg gap-2";
-        xl: "px-6 min-w-24 h-12 text-xl gap-3";
+        sm: "";
+        md: "";
+        lg: "";
+        xl: "";
     };
@@ -196,3 +196,3 @@ color: {
         white: "";
-        basic: "";
+        secondary: "";
     };
@@ -211,6 +211,6 @@ radius: {
     isDisabled: {
-        true: "disabled:opacity-50 disabled:pointer-events-none disabled:cursor-not-allowed";
+        true: "disabled:opacity-20 disabled:pointer-events-none disabled:cursor-not-allowed";
     };
     isInGroup: {
-        true: "[&:not(:first-child):not(:last-child)]:rounded-none data-[focus=true]:!ring-0";
+        true: "[&:not(:first-child):not(:last-child)]:rounded-none data-[focus=true]:!ring-0 !w-max";
     };
@@ -234,6 +234,6 @@ isIconOnly: {
     size: {
-        sm: "px-2 min-w-12 h-6 text-xs gap-2";
-        md: "px-3 min-w-16 h-8 text-md gap-2";
-        lg: "px-4 min-w-20 h-10 text-lg gap-2";
-        xl: "px-6 min-w-24 h-12 text-xl gap-3";
+        sm: "";
+        md: "";
+        lg: "";
+        xl: "";
     };
@@ -247,3 +247,3 @@ color: {
         white: "";
-        basic: "";
+        secondary: "";
     };
@@ -262,6 +262,6 @@ radius: {
     isDisabled: {
-        true: "disabled:opacity-50 disabled:pointer-events-none disabled:cursor-not-allowed";
+        true: "disabled:opacity-20 disabled:pointer-events-none disabled:cursor-not-allowed";
     };
     isInGroup: {
-        true: "[&:not(:first-child):not(:last-child)]:rounded-none data-[focus=true]:!ring-0";
+        true: "[&:not(:first-child):not(:last-child)]:rounded-none data-[focus=true]:!ring-0 !w-max";
     };
@@ -285,6 +285,6 @@ isIconOnly: {
     size: {
-        sm: "px-2 min-w-12 h-6 text-xs gap-2";
-        md: "px-3 min-w-16 h-8 text-md gap-2";
-        lg: "px-4 min-w-20 h-10 text-lg gap-2";
-        xl: "px-6 min-w-24 h-12 text-xl gap-3";
+        sm: "";
+        md: "";
+        lg: "";
+        xl: "";
     };
@@ -298,3 +298,3 @@ color: {
         white: "";
-        basic: "";
+        secondary: "";
     };
@@ -313,6 +313,6 @@ radius: {
     isDisabled: {
-        true: "disabled:opacity-50 disabled:pointer-events-none disabled:cursor-not-allowed";
+        true: "disabled:opacity-20 disabled:pointer-events-none disabled:cursor-not-allowed";
     };
     isInGroup: {
-        true: "[&:not(:first-child):not(:last-child)]:rounded-none data-[focus=true]:!ring-0";
+        true: "[&:not(:first-child):not(:last-child)]:rounded-none data-[focus=true]:!ring-0 !w-max";
     };
@@ -336,6 +336,6 @@ isIconOnly: {
     size: {
-        sm: "px-2 min-w-12 h-6 text-xs gap-2";
-        md: "px-3 min-w-16 h-8 text-md gap-2";
-        lg: "px-4 min-w-20 h-10 text-lg gap-2";
-        xl: "px-6 min-w-24 h-12 text-xl gap-3";
+        sm: "";
+        md: "";
+        lg: "";
+        xl: "";
     };
@@ -349,3 +349,3 @@ color: {
         white: "";
-        basic: "";
+        secondary: "";
     };
@@ -364,6 +364,6 @@ radius: {
     isDisabled: {
-        true: "disabled:opacity-50 disabled:pointer-events-none disabled:cursor-not-allowed";
+        true: "disabled:opacity-20 disabled:pointer-events-none disabled:cursor-not-allowed";
     };
     isInGroup: {
-        true: "[&:not(:first-child):not(:last-child)]:rounded-none data-[focus=true]:!ring-0";
+        true: "[&:not(:first-child):not(:last-child)]:rounded-none data-[focus=true]:!ring-0 !w-max";
     };
@@ -370,0 +370,0 @@ isIconOnly: {

dist/components/button.js

@@ -143,7 +143,8 @@ "use strict";
 var solid = {
-  primary: "bg-brand text-white",
-  danger: "bg-danger text-white",
-  warning: "bg-warning text-white",
-  success: "bg-success text-white",
+  primary: "bg-brand-700 text-white",
+  danger: "bg-danger-600 text-white",
+  warning: "bg-warning-500 text-white",
+  success: "bg-success-500 text-white",
   white: "bg-white text-neutral-800 border-neutral-300",
+  secondary: "bg-neutral-100 border-neutral-50 text-neutral-800",
   basic: "bg-neutral-50 border-neutral-50 text-neutral-800",
@@ -158,4 +159,5 @@ transparent: "bg-none text-brand-800 border-transparent"
   white: "border-white text-white",
+  secondary: "border-neutral-300 text-neutral-800",
   basic: "border-neutral text-neutral-800",
-  transparent: "border-transparent text-brand-800"
+  transparent: "border-neutral-300 text-brand-800"
 };
@@ -168,2 +170,3 @@ var ghost = {
   white: "text-white",
+  secondary: "text-black",
   basic: "text-black",
@@ -178,2 +181,3 @@ transparent: "text-neutral"
   white: "border-white text-white",
+  secondary: "border-gray text-gray-800",
   basic: "border-gray text-gray-800",
@@ -188,2 +192,3 @@ transparent: "border-transparent text-brand"
   white: "text-white",
+  secondary: "text-white",
   basic: "text-white",
@@ -199,2 +204,3 @@ transparent: "text-white"
   white: "shadow-lg shadow-white/40 bg-white text-neutral-800",
+  secondary: "shadow-lg shadow-neutral/40 bg-neutral-50 text-neutral-800",
   basic: "shadow-lg shadow-neutral/40 bg-neutral-50 text-neutral-800"
@@ -208,2 +214,3 @@ };
   white: "bg-white text-neutral-800",
+  secondary: "bg-neutral-50 text-neutral-800",
   basic: "bg-neutral-50 text-neutral-800",
@@ -218,2 +225,3 @@ transparent: "bg-transparent text-brand-800"
   white: "bg-white text-white shadow-lg",
+  secondary: "bg-white text-neutral-800 shadow-lg",
   basic: "bg-white text-neutral-800 shadow-lg",
@@ -264,6 +272,6 @@ transparent: "bg-white text-brand shadow-lg"
     size: {
-      sm: "px-2 min-w-12 h-6 text-xs gap-2",
-      md: "px-3 min-w-16 h-8 text-md gap-2",
-      lg: "px-4 min-w-20 h-10 text-lg gap-2",
-      xl: "px-6 min-w-24 h-12 text-xl gap-3"
+      sm: "",
+      md: "",
+      lg: "",
+      xl: ""
     },
@@ -277,3 +285,3 @@ color: {
       white: "",
-      basic: ""
+      secondary: ""
     },
@@ -292,6 +300,6 @@ radius: {
     isDisabled: {
-      true: "disabled:opacity-50 disabled:pointer-events-none disabled:cursor-not-allowed"
+      true: "disabled:opacity-20 disabled:pointer-events-none disabled:cursor-not-allowed"
     },
     isInGroup: {
-      true: "[&:not(:first-child):not(:last-child)]:rounded-none data-[focus=true]:!ring-0"
+      true: "[&:not(:first-child):not(:last-child)]:rounded-none data-[focus=true]:!ring-0 !w-max"
     },
@@ -354,4 +362,4 @@ isIconOnly: {
       variant: "solid",
-      color: "basic",
-      class: colorVariants.solid.basic
+      color: "secondary",
+      class: colorVariants.solid.secondary
     },
@@ -396,4 +404,4 @@ // outline / color
       variant: "outline",
-      color: "basic",
-      class: colorVariants.outline.basic
+      color: "secondary",
+      class: colorVariants.outline.secondary
     },
@@ -438,4 +446,4 @@ // ghost / color
       variant: "ghost",
-      color: "basic",
-      class: colorVariants.ghost.basic
+      color: "secondary",
+      class: colorVariants.ghost.secondary
     },
@@ -475,4 +483,4 @@ // rounded / color
       variant: "rounded",
-      color: "basic",
-      class: colorVariants.rounded.basic
+      color: "secondary",
+      class: colorVariants.rounded.secondary
     },
@@ -513,3 +521,3 @@ // isInGroup / radius / size <-- radius not provided
       radius: "none",
-      class: "rounded-none first:rounded-s-none last:rounded-e-none"
+      class: "rounded-none first:!rounded-s-none last:!rounded-e-none"
     },
@@ -519,3 +527,3 @@ {
       radius: "sm",
-      class: "rounded-none first:rounded-s-sm last:rounded-e-sm"
+      class: "rounded-none first:!rounded-s-sm last:!rounded-e-sm"
     },
@@ -525,3 +533,3 @@ {
       radius: "md",
-      class: "rounded-none first:rounded-s-md last:rounded-e-md"
+      class: "rounded-none first:!rounded-s-md last:!rounded-e-md"
     },
@@ -531,3 +539,3 @@ {
       radius: "lg",
-      class: "rounded-none first:rounded-s-lg last:rounded-e-lg"
+      class: "rounded-none first:!rounded-s-lg last:!rounded-e-lg"
     },
@@ -537,3 +545,3 @@ {
       radius: "xl",
-      class: "rounded-none first:rounded-s-xl last:rounded-e-xl"
+      class: "rounded-none first:!rounded-s-xl last:!rounded-e-xl"
     },
@@ -543,3 +551,3 @@ {
       radius: "full",
-      class: "rounded-none first:rounded-s-full last:rounded-e-full"
+      class: "rounded-none first:!rounded-s-full last:!rounded-e-full"
     },
@@ -594,5 +602,25 @@ // isInGroup / bordered / ghost
     {
+      isIconOnly: false,
+      size: "sm",
+      class: "px-3 min-w-12 py-2 text-[12px] leading-4 gap-2"
+    },
+    {
+      isIconOnly: false,
+      size: "md",
+      class: "px-3 min-w-16 py-2 text-[14px] leading-5 gap-2"
+    },
+    {
+      isIconOnly: false,
+      size: "lg",
+      class: "px-4 min-w-20 py-2.5 text-[14px] leading-5 gap-2"
+    },
+    {
+      isIconOnly: false,
+      size: "xl",
+      class: "px-6 min-w-24 py-3.5 text-[16px] leading-5 gap-3"
+    },
+    {
       isIconOnly: true,
       size: "sm",
-      class: "min-w-unit-7 h-unit-7"
+      class: "text-md min-w-unit-7 min-h-unit-7"
     },
@@ -602,3 +630,3 @@ {
       size: "md",
-      class: "min-w-unit-8 h-unit-8"
+      class: "!text-xl min-w-unit-8 min-h-unit-8"
     },
@@ -608,3 +636,3 @@ {
       size: "lg",
-      class: "min-w-unit-10 h-unit-10"
+      class: "!text-xl min-w-unit-10 min-h-unit-10"
     },
@@ -614,4 +642,24 @@ {
       size: "xl",
-      class: "min-w-unit-12 h-unit-12"
+      class: "!text-xl min-w-unit-12 min-h-unit-12"
     },
+    {
+      isLoading: true,
+      size: "sm",
+      class: "!text-lg min-w-unit-7 min-h-unit-7"
+    },
+    {
+      isLoading: true,
+      size: "md",
+      class: "!text-xl min-w-unit-8 min-h-unit-8"
+    },
+    {
+      isLoading: true,
+      size: "lg",
+      class: "!text-xl min-w-unit-10 min-h-unit-10"
+    },
+    {
+      isLoading: true,
+      size: "xl",
+      class: "!text-xl min-w-unit-12 min-h-unit-12"
+    },
     // variant / hover 👆
@@ -622,3 +670,3 @@ //   primary
       color: "primary",
-      class: "data-[hover=true]:bg-brand/60"
+      class: "bg-brand-700 data-[hover=true]:bg-brand-800"
     },
@@ -629,3 +677,3 @@ //   danger
       color: "danger",
-      class: "data-[hover=true]:bg-danger/60"
+      class: "data-[hover=true]:bg-danger-400"
     },
@@ -636,3 +684,3 @@ //   warning
       color: "warning",
-      class: "data-[hover=true]:bg-warning/60"
+      class: "data-[hover=true]:bg-warning-400"
     },
@@ -643,3 +691,3 @@ //   success
       color: "success",
-      class: "data-[hover=true]:bg-success/60"
+      class: "data-[hover=true]:bg-success-400"
     },
@@ -652,7 +700,7 @@ //   white
     },
-    //   basic
+    //   secondary
     {
       variant: "solid",
-      color: "basic",
-      class: "data-[hover=true]:bg-neutral-200 data-[hover=true]:border-neutral-200 data-[hover=true]:text-neutral-700"
+      color: "secondary",
+      class: "data-[hover=true]:bg-neutral-300 data-[hover=true]:border-neutral-300 data-[hover=true]:text-neutral-700"
     },
@@ -667,3 +715,3 @@ //   transparent
     {
-      variant: ["outline", "rounded"],
+      variant: ["outline"],
       color: "primary",
@@ -674,3 +722,3 @@ class: "data-[hover=true]:bg-brand data-[hover=true]:border-brand data-[hover=true]:text-white"
     {
-      variant: ["outline", "rounded"],
+      variant: ["outline"],
       color: "danger",
@@ -681,3 +729,3 @@ class: "data-[hover=true]:bg-danger-400 data-[hover=true]:border-danger-400 data-[hover=true]:text-white"
     {
-      variant: ["outline", "rounded"],
+      variant: ["outline"],
       color: "warning",
@@ -688,3 +736,3 @@ class: "data-[hover=true]:bg-warning-500 data-[hover=true]:border-warning-500 data-[hover=true]:text-white"
     {
-      variant: ["outline", "rounded"],
+      variant: ["outline"],
       color: "success",
@@ -695,17 +743,17 @@ class: "data-[hover=true]:bg-success-500 data-[hover=true]:border-success-500 data-[hover=true]:text-white"
     {
-      variant: ["outline", "rounded"],
+      variant: ["outline"],
       color: "white",
       class: "data-[hover=true]:bg-white-50a data-[hover=true]:border-white data-[hover=true]:text-white"
     },
-    //   basic
+    //   secondary
     {
-      variant: ["outline", "rounded"],
-      color: "basic",
-      class: "data-[hover=true]:bg-neutral-200 data-[hover=true]:border-neutral-300 data-[hover=true]:text-black"
+      variant: ["outline"],
+      color: "secondary",
+      class: "data-[hover=true]:bg-neutral-300 data-[hover=true]:border-neutral-300 data-[hover=true]:text-black"
     },
     //   transparent
     {
-      variant: ["outline", "rounded"],
+      variant: ["outline"],
       color: "transparent",
-      class: "data-[hover=true]:bg-transparent data-[hover=true]:text-brand"
+      class: "text-neutral-800 data-[hover=true]:bg-brand-50 data-[hover=true]:border-brand-50 data-[hover=true]:text-brand  data-[hover=true]:border-brand"
     },
@@ -716,3 +764,3 @@ //   primary
       color: "primary",
-      class: "data-[hover=true]:text-brand-900 data-[hover=true]:border-brand"
+      class: "data-[hover=true]:text-brand-900"
     },
@@ -743,7 +791,7 @@ //   danger
     },
-    //   basic
+    //   secondary
     {
       variant: "ghost",
-      color: "basic",
-      class: "data-[hover=true]:text-brand-900"
+      color: "secondary",
+      class: "data-[hover=true]:text-brand-800"
     },
@@ -786,6 +834,6 @@ //   transparent
     },
-    //   basic
+    //   secondary
     {
       isIconOnly: true,
-      color: "basic",
+      color: "secondary",
       class: "data-[hover=true]:bg-neutral-200 data-[hover=true]:text-black"
@@ -804,3 +852,3 @@ },
       color: "primary",
-      class: "data-[focus=true]:outline-none data-[focus=true]:ring-1 data-[focus=true]:bg-brand-800 data-[focus=true]:ring-brand/60"
+      class: "data-[focus=true]:outline-none data-[focus=true]:ring-1 data-[focus=true]:bg-brand-900 data-[focus=true]:ring-brand/60"
     },
@@ -811,3 +859,3 @@ //   danger
       color: "danger",
-      class: "data-[focus=true]:outline-none data-[focus=true]:ring-1 data-[focus=true]:bg-danger-800 data-[focus=true]:ring-danger/60"
+      class: "data-[focus=true]:outline-none data-[focus=true]:ring-1 data-[focus=true]:bg-danger-600 data-[focus=true]:ring-danger/60"
     },
@@ -818,3 +866,3 @@ //   warning
       color: "warning",
-      class: "data-[focus=true]:outline-none data-[focus=true]:ring-1 data-[focus=true]:bg-warning-800 data-[focus=true]:ring-warning/60"
+      class: "data-[focus=true]:outline-none data-[focus=true]:ring-1 data-[focus=true]:bg-warning-600 data-[focus=true]:ring-warning/60"
     },
@@ -825,3 +873,3 @@ //   success
       color: "success",
-      class: "data-[focus=true]:outline-none data-[focus=true]:ring-1 data-[focus=true]:bg-success-800 data-[focus=true]:ring-success/60"
+      class: "data-[focus=true]:outline-none data-[focus=true]:ring-1 data-[focus=true]:bg-success-600 data-[focus=true]:ring-success/60"
     },
@@ -834,7 +882,7 @@ //   white
     },
-    //   basic
+    //   secondary
     {
       variant: "solid",
-      color: "basic",
-      class: "data-[focus=true]:outline-none data-[focus=true]:ring-1 data-[focus=true]:ring-neutral-200 data-[focus=true]:bg-neutral-300 data-[focus=true]:border-neutral-300"
+      color: "secondary",
+      class: "data-[focus=true]:outline-none data-[focus=true]:ring-1 data-[focus=true]:ring-neutral-200 data-[focus=true]:bg-neutral-400 data-[focus=true]:border-neutral-400"
     },
@@ -845,43 +893,43 @@ //   transparent
       color: "transparent",
-      class: "data-[focus=true]:outline-none data-[focus=true]:ring-1 data-[focus=true]:ring-brand-50 data-[focus=true]:bg-brand-200 data-[focus=true]:border-brand-200"
+      class: "data-[focus=true]:outline-none data-[focus=true]:ring-1 data-[focus=true]:ring-white-20a data-[focus=true]:bg-brand-200 data-[focus=true]:border-brand-200"
     },
     //   primary
     {
-      variant: ["outline", "rounded"],
+      variant: ["outline"],
       color: "primary",
-      class: "data-[focus=true]:outline-none data-[focus=true]:ring-1 data-[focus=true]:bg-brand-800 data-[focus=true]:border-brand-800 data-[focus=true]:ring-brand/60 data-[focus=true]:text-white"
+      class: "data-[focus=true]:outline-none data-[focus=true]:ring-1 data-[focus=true]:bg-brand-900 data-[focus=true]:border-brand-800 data-[focus=true]:ring-brand/60 data-[focus=true]:text-white"
     },
     //   danger
     {
-      variant: ["outline", "rounded"],
+      variant: ["outline"],
       color: "danger",
-      class: "data-[focus=true]:outline-none data-[focus=true]:ring-1 data-[focus=true]:bg-danger-800 data-[focus=true]:border-danger-800 data-[focus=true]:text-white data-[focus=true]:ring-danger/60"
+      class: "data-[focus=true]:outline-none data-[focus=true]:ring-1 data-[focus=true]:bg-danger-600 data-[focus=true]:border-danger-600 data-[focus=true]:text-white data-[focus=true]:ring-danger/60"
     },
     //   warning
     {
-      variant: ["outline", "rounded"],
+      variant: ["outline"],
       color: "warning",
-      class: "data-[focus=true]:outline-none data-[focus=true]:ring-1 data-[focus=true]:bg-warning-800 data-[focus=true]:border-warning-800 data-[focus=true]:text-white data-[focus=true]:ring-warning/60"
+      class: "data-[focus=true]:outline-none data-[focus=true]:ring-1 data-[focus=true]:bg-warning-600 data-[focus=true]:border-warning-600 data-[focus=true]:text-white data-[focus=true]:ring-warning/60"
     },
     //   success
     {
-      variant: ["outline", "rounded"],
+      variant: ["outline"],
       color: "success",
-      class: "data-[focus=true]:outline-none data-[focus=true]:ring-1 data-[focus=true]:bg-success-800 data-[focus=true]:border-success-800 data-[focus=true]:text-white data-[focus=true]:ring-success/60"
+      class: "data-[focus=true]:outline-none data-[focus=true]:ring-1 data-[focus=true]:bg-success-600 data-[focus=true]:border-success-600 data-[focus=true]:text-white data-[focus=true]:ring-success/60"
     },
     //   white
     {
-      variant: ["outline", "rounded"],
+      variant: ["outline"],
       color: "white",
       class: "data-[focus=true]:outline-none"
     },
-    //   basic
+    //   secondary
     {
-      variant: ["outline", "rounded"],
-      color: "basic",
-      class: "data-[focus=true]:outline-none data-[focus=true]:ring-1 data-[focus=true]:bg-neutral-300 data-[focus=true]:border-neutral-300 data-[focus=true]:text-neutral-800 data-[focus=true]:ring-transparent"
+      variant: ["outline"],
+      color: "secondary",
+      class: "data-[focus=true]:outline-none data-[focus=true]:ring-1 data-[focus=true]:bg-neutral-400 data-[focus=true]:border-neutral-400 data-[focus=true]:text-neutral-800 data-[focus=true]:ring-transparent"
     },
     //   transparent
     {
-      variant: ["outline", "rounded"],
+      variant: ["outline"],
       color: "transparent",
@@ -920,7 +968,7 @@ class: "data-[focus=true]:outline-none data-[focus=true]:ring-1 data-[focus=true]:bg-brand-200 data-[focus=true]:border-brand data-[focus=true]:text-brand dark:ring-brand/60"
     },
-    //   basic
+    //   secondary
     {
       variant: "ghost",
-      color: "basic",
-      class: "data-[focus=true]:ring-1 data-[focus=true]:bg-none data-[focus=true]:border-[#0000] data-[focus=true]:text-brand-900 data-[focus=true]:ring-transparent"
+      color: "secondary",
+      class: "data-[focus=true]:ring-1 data-[focus=true]:bg-none data-[focus=true]:border-transparent data-[focus=true]:text-brand-900 data-[focus=true]:bg-transparent data-[focus=true]:ring-black-10a"
     },
@@ -937,3 +985,3 @@ //   transparent
       color: "primary",
-      class: "data-[hover=true]:bg-brand data-[hover=true]:border-brand data-[hover=true]:text-white"
+      class: "border-transparent text-brand-800 h-max data-[hover=true]:bg-brand-800 data-[focus=true]:outline-none data-[focus=true]:ring-1 data-[focus=true]:bg-brand-900 data-[focus=true]:border-brand-900 data-[focus=true]:ring-brand/60 data-[focus=true]:text-white"
     },
@@ -944,3 +992,3 @@ //   danger
       color: "danger",
-      class: "data-[hover=true]:bg-danger-400 data-[hover=true]:border-danger-400 data-[hover=true]:text-white"
+      class: "border-transparent text-danger-600 h-max data-[hover=true]:bg-danger-200 data-[hover=true]:border-danger-200 data-[hover=true]:text-danger-600 data-[focus=true]:outline-none data-[focus=true]:ring-1 data-[focus=true]:!bg-danger-200 data-[focus=true]:!border-danger-200 data-[focus=true]:ring-danger-20a data-[focus=true]:!text-danger-600"
     },
@@ -951,3 +999,3 @@ //   warning
       color: "warning",
-      class: "data-[hover=true]:bg-warning-500 data-[hover=true]:border-warning-500 data-[hover=true]:text-white"
+      class: "border-transparent text-warning-600 h-max data-[hover=true]:bg-warning-200 data-[hover=true]:border-warning-200 data-[hover=true]:text-warning-600 data-[focus=true]:outline-none data-[focus=true]:ring-1 data-[focus=true]:!bg-warning-200 data-[focus=true]:!border-warning-200 data-[focus=true]:ring-warning-20a data-[focus=true]:!text-warning-600"
     },
@@ -958,3 +1006,3 @@ //   success
       color: "success",
-      class: "data-[hover=true]:bg-success-500 data-[hover=true]:border-success-500 data-[hover=true]:text-white"
+      class: "border-transparent text-success-600 h-max data-[hover=true]:bg-success-200 data-[hover=true]:border-success-200 data-[hover=true]:text-success-600 data-[focus=true]:outline-none data-[focus=true]:ring-1 data-[focus=true]:!bg-success-200 data-[focus=true]:!border-success-200 data-[focus=true]:ring-success-20a data-[focus=true]:!text-success-600"
     },
@@ -967,6 +1015,6 @@ //   white
     },
-    //   basic
+    //   secondary
     {
       isIconOnly: true,
-      color: "basic",
+      color: "secondary",
       class: "data-[hover=true]:bg-neutral-200 data-[hover=true]:border-neutral-300 data-[hover=true]:text-black"
@@ -1010,6 +1058,6 @@ },
     },
-    //   basic
+    //   secondary
     {
       isIconOnly: true,
-      color: "basic",
+      color: "secondary",
       class: "data-[focus=true]:outline-none data-[focus=true]:ring-1 data-[focus=true]:bg-neutral-300 data-[focus=true]:border-neutral-300 data-[focus=true]:text-neutral-800 data-[focus=true]:ring-transparent"
@@ -1016,0 +1064,0 @@ },

dist/components/card.d.ts

@@ -38,2 +38,3 @@ import * as tailwind_variants from 'tailwind-variants';
             header: string;
+            body: string;
             footer: string;
@@ -44,2 +45,3 @@ };
             header: string;
+            body: string;
             footer: string;
@@ -50,2 +52,3 @@ };
             header: string;
+            body: string;
             footer: string;
@@ -56,5 +59,14 @@ };
             header: string;
+            body: string;
             footer: string;
         };
     };
+    contentFullWidth: {
+        true: {
+            base: string;
+            header: string;
+            footer: string;
+            body: string;
+        };
+    };
     fullWidth: {
@@ -96,5 +108,34 @@ true: {
     };
+    withDivider: {
+        true: {
+            header: string[];
+            footer: string[];
+        };
+        false: {};
+    };
+    paddingType: {
+        inside: {
+            base: string;
+            header: string;
+            footer: string;
+            body: string;
+        };
+        outside: {};
+    };
+    footerPosition: {
+        start: {
+            footer: string;
+        };
+        center: {
+            footer: string;
+        };
+        end: {
+            footer: string;
+        };
+    };
 }, {
     base: string[];
     header: string[];
+    headerTitle: string[];
+    headerSubtitle: string[];
     body: string[];
@@ -121,2 +162,3 @@ footer: string[];
             header: string;
+            body: string;
             footer: string;
@@ -127,2 +169,3 @@ };
             header: string;
+            body: string;
             footer: string;
@@ -133,2 +176,3 @@ };
             header: string;
+            body: string;
             footer: string;
@@ -139,5 +183,14 @@ };
             header: string;
+            body: string;
             footer: string;
         };
     };
+    contentFullWidth: {
+        true: {
+            base: string;
+            header: string;
+            footer: string;
+            body: string;
+        };
+    };
     fullWidth: {
@@ -179,2 +232,29 @@ true: {
     };
+    withDivider: {
+        true: {
+            header: string[];
+            footer: string[];
+        };
+        false: {};
+    };
+    paddingType: {
+        inside: {
+            base: string;
+            header: string;
+            footer: string;
+            body: string;
+        };
+        outside: {};
+    };
+    footerPosition: {
+        start: {
+            footer: string;
+        };
+        center: {
+            footer: string;
+        };
+        end: {
+            footer: string;
+        };
+    };
 }, {
@@ -199,2 +279,3 @@ shadow: {
             header: string;
+            body: string;
             footer: string;
@@ -205,2 +286,3 @@ };
             header: string;
+            body: string;
             footer: string;
@@ -211,2 +293,3 @@ };
             header: string;
+            body: string;
             footer: string;
@@ -217,5 +300,14 @@ };
             header: string;
+            body: string;
             footer: string;
         };
     };
+    contentFullWidth: {
+        true: {
+            base: string;
+            header: string;
+            footer: string;
+            body: string;
+        };
+    };
     fullWidth: {
@@ -257,2 +349,29 @@ true: {
     };
+    withDivider: {
+        true: {
+            header: string[];
+            footer: string[];
+        };
+        false: {};
+    };
+    paddingType: {
+        inside: {
+            base: string;
+            header: string;
+            footer: string;
+            body: string;
+        };
+        outside: {};
+    };
+    footerPosition: {
+        start: {
+            footer: string;
+        };
+        center: {
+            footer: string;
+        };
+        end: {
+            footer: string;
+        };
+    };
 }>, {
@@ -277,2 +396,3 @@ shadow: {
             header: string;
+            body: string;
             footer: string;
@@ -283,2 +403,3 @@ };
             header: string;
+            body: string;
             footer: string;
@@ -289,2 +410,3 @@ };
             header: string;
+            body: string;
             footer: string;
@@ -295,5 +417,14 @@ };
             header: string;
+            body: string;
             footer: string;
         };
     };
+    contentFullWidth: {
+        true: {
+            base: string;
+            header: string;
+            footer: string;
+            body: string;
+        };
+    };
     fullWidth: {
@@ -335,5 +466,34 @@ true: {
     };
+    withDivider: {
+        true: {
+            header: string[];
+            footer: string[];
+        };
+        false: {};
+    };
+    paddingType: {
+        inside: {
+            base: string;
+            header: string;
+            footer: string;
+            body: string;
+        };
+        outside: {};
+    };
+    footerPosition: {
+        start: {
+            footer: string;
+        };
+        center: {
+            footer: string;
+        };
+        end: {
+            footer: string;
+        };
+    };
 }, {
     base: string[];
     header: string[];
+    headerTitle: string[];
+    headerSubtitle: string[];
     body: string[];
@@ -360,2 +520,3 @@ footer: string[];
             header: string;
+            body: string;
             footer: string;
@@ -366,2 +527,3 @@ };
             header: string;
+            body: string;
             footer: string;
@@ -372,2 +534,3 @@ };
             header: string;
+            body: string;
             footer: string;
@@ -378,5 +541,14 @@ };
             header: string;
+            body: string;
             footer: string;
         };
     };
+    contentFullWidth: {
+        true: {
+            base: string;
+            header: string;
+            footer: string;
+            body: string;
+        };
+    };
     fullWidth: {
@@ -418,5 +590,34 @@ true: {
     };
+    withDivider: {
+        true: {
+            header: string[];
+            footer: string[];
+        };
+        false: {};
+    };
+    paddingType: {
+        inside: {
+            base: string;
+            header: string;
+            footer: string;
+            body: string;
+        };
+        outside: {};
+    };
+    footerPosition: {
+        start: {
+            footer: string;
+        };
+        center: {
+            footer: string;
+        };
+        end: {
+            footer: string;
+        };
+    };
 }, {
     base: string[];
     header: string[];
+    headerTitle: string[];
+    headerSubtitle: string[];
     body: string[];
@@ -443,2 +644,3 @@ footer: string[];
             header: string;
+            body: string;
             footer: string;
@@ -449,2 +651,3 @@ };
             header: string;
+            body: string;
             footer: string;
@@ -455,2 +658,3 @@ };
             header: string;
+            body: string;
             footer: string;
@@ -461,5 +665,14 @@ };
             header: string;
+            body: string;
             footer: string;
         };
     };
+    contentFullWidth: {
+        true: {
+            base: string;
+            header: string;
+            footer: string;
+            body: string;
+        };
+    };
     fullWidth: {
@@ -501,2 +714,29 @@ true: {
     };
+    withDivider: {
+        true: {
+            header: string[];
+            footer: string[];
+        };
+        false: {};
+    };
+    paddingType: {
+        inside: {
+            base: string;
+            header: string;
+            footer: string;
+            body: string;
+        };
+        outside: {};
+    };
+    footerPosition: {
+        start: {
+            footer: string;
+        };
+        center: {
+            footer: string;
+        };
+        end: {
+            footer: string;
+        };
+    };
 }, {
@@ -521,2 +761,3 @@ shadow: {
             header: string;
+            body: string;
             footer: string;
@@ -527,2 +768,3 @@ };
             header: string;
+            body: string;
             footer: string;
@@ -533,2 +775,3 @@ };
             header: string;
+            body: string;
             footer: string;
@@ -539,5 +782,14 @@ };
             header: string;
+            body: string;
             footer: string;
         };
     };
+    contentFullWidth: {
+        true: {
+            base: string;
+            header: string;
+            footer: string;
+            body: string;
+        };
+    };
     fullWidth: {
@@ -579,2 +831,29 @@ true: {
     };
+    withDivider: {
+        true: {
+            header: string[];
+            footer: string[];
+        };
+        false: {};
+    };
+    paddingType: {
+        inside: {
+            base: string;
+            header: string;
+            footer: string;
+            body: string;
+        };
+        outside: {};
+    };
+    footerPosition: {
+        start: {
+            footer: string;
+        };
+        center: {
+            footer: string;
+        };
+        end: {
+            footer: string;
+        };
+    };
 }>, unknown, unknown, undefined>>;
@@ -581,0 +860,0 @@ type CardVariantProps = VariantProps<typeof card>;

dist/components/card.js

@@ -144,2 +144,3 @@ "use strict";
       "bg-content1",
+      "px-4 py-3",
       // focus ring
@@ -150,3 +151,4 @@ ...dataFocusVisibleClasses
       "flex",
-      "p-3",
+      "pb-3",
+      "mb-2",
       "z-10",
@@ -161,2 +163,4 @@ "w-full",
     ],
+    headerTitle: ["text-neutral-800", "font-semibold", "text-lg"],
+    headerSubtitle: ["text-neutral-400", "text-sm"],
     body: [
@@ -167,3 +171,2 @@ "relative",
       "w-full",
-      "p-3",
       "flex-auto",
@@ -180,6 +183,7 @@ "flex-col",
     footer: [
-      "p-3",
+      "pt-3",
       "h-auto",
       "flex",
       "w-full",
+      "mt-2",
       "items-center",
@@ -210,2 +214,3 @@ "overflow-hidden",
         header: "rounded-none",
+        body: "rounded-none",
         footer: "rounded-none"
@@ -216,2 +221,3 @@ },
         header: "rounded-t-sm",
+        body: "rounded-none",
         footer: "rounded-b-sm"
@@ -222,2 +228,3 @@ },
         header: "rounded-t-md",
+        body: "rounded-md",
         footer: "rounded-b-md"
@@ -228,5 +235,14 @@ },
         header: "rounded-t-lg",
+        body: "rounded-lg",
         footer: "rounded-b-lg"
       }
     },
+    contentFullWidth: {
+      true: {
+        base: "p-0",
+        header: "px-4 py-3 mb-0",
+        footer: "px-4 py-3 mt-0",
+        body: "rounded-none"
+      }
+    },
     fullWidth: {
@@ -268,2 +284,29 @@ true: {
       false: { base: "transition-transform-background motion-reduce:transition-none" }
+    },
+    withDivider: {
+      true: {
+        header: ["border-b", "border-neutral-200"],
+        footer: ["border-t", "border-neutral-200"]
+      },
+      false: {}
+    },
+    paddingType: {
+      inside: {
+        base: "p-0",
+        header: "px-4 py-3 mb-0",
+        footer: "px-4 py-3 mt-0",
+        body: "p-0 px-4 py-2"
+      },
+      outside: {}
+    },
+    footerPosition: {
+      start: {
+        footer: "justify-start"
+      },
+      center: {
+        footer: "justify-center"
+      },
+      end: {
+        footer: "justify-end"
+      }
     }
@@ -282,2 +325,3 @@ },
     fullWidth: false,
+    contentFullWidth: false,
     isHoverable: false,
@@ -287,3 +331,6 @@ isPressable: false,
     disableAnimation: false,
-    isFooterBlurred: false
+    isFooterBlurred: false,
+    withDivider: true,
+    paddingType: "inside",
+    footerPosition: "end"
   }
@@ -290,0 +337,0 @@ });

dist/components/checkbox.js

@@ -125,7 +125,8 @@ "use strict";
 var solid = {
-  primary: "bg-brand text-white",
-  danger: "bg-danger text-white",
-  warning: "bg-warning text-white",
-  success: "bg-success text-white",
+  primary: "bg-brand-700 text-white",
+  danger: "bg-danger-600 text-white",
+  warning: "bg-warning-500 text-white",
+  success: "bg-success-500 text-white",
   white: "bg-white text-neutral-800 border-neutral-300",
+  secondary: "bg-neutral-100 border-neutral-50 text-neutral-800",
   basic: "bg-neutral-50 border-neutral-50 text-neutral-800",
@@ -140,4 +141,5 @@ transparent: "bg-none text-brand-800 border-transparent"
   white: "border-white text-white",
+  secondary: "border-neutral-300 text-neutral-800",
   basic: "border-neutral text-neutral-800",
-  transparent: "border-transparent text-brand-800"
+  transparent: "border-neutral-300 text-brand-800"
 };
@@ -150,2 +152,3 @@ var ghost = {
   white: "text-white",
+  secondary: "text-black",
   basic: "text-black",
@@ -160,2 +163,3 @@ transparent: "text-neutral"
   white: "border-white text-white",
+  secondary: "border-gray text-gray-800",
   basic: "border-gray text-gray-800",
@@ -170,2 +174,3 @@ transparent: "border-transparent text-brand"
   white: "text-white",
+  secondary: "text-white",
   basic: "text-white",
@@ -181,2 +186,3 @@ transparent: "text-white"
   white: "shadow-lg shadow-white/40 bg-white text-neutral-800",
+  secondary: "shadow-lg shadow-neutral/40 bg-neutral-50 text-neutral-800",
   basic: "shadow-lg shadow-neutral/40 bg-neutral-50 text-neutral-800"
@@ -190,2 +196,3 @@ };
   white: "bg-white text-neutral-800",
+  secondary: "bg-neutral-50 text-neutral-800",
   basic: "bg-neutral-50 text-neutral-800",
@@ -200,2 +207,3 @@ transparent: "bg-transparent text-brand-800"
   white: "bg-white text-white shadow-lg",
+  secondary: "bg-white text-neutral-800 shadow-lg",
   basic: "bg-white text-neutral-800 shadow-lg",
@@ -367,3 +375,3 @@ transparent: "bg-white text-brand shadow-lg"
         wrapper: [
-          "after:bg-brand",
+          "after:!bg-brand",
           "after:text-white",
@@ -381,3 +389,3 @@ "text-white",
         wrapper: [
-          "after:bg-danger",
+          "after:!bg-danger",
           "after:text-white",
@@ -395,3 +403,3 @@ "text-white",
         wrapper: [
-          "after:bg-warning",
+          "after:!bg-warning",
           "after:text-white",
@@ -409,3 +417,3 @@ "text-white",
         wrapper: [
-          "after:bg-success",
+          "after:!bg-success",
           "after:text-white",
@@ -423,3 +431,3 @@ "text-white",
         wrapper: [
-          "after:bg-white",
+          "after:!bg-white",
           "after:text-neutral-800",
@@ -437,3 +445,3 @@ "text-neutral-800",
         wrapper: [
-          "after:bg-transparent",
+          "after:!bg-transparent",
           "after:text-brand-800",
@@ -440,0 +448,0 @@ "text-brand-800",

dist/components/chip.js

@@ -133,7 +133,8 @@ "use strict";
 var solid = {
-  primary: "bg-brand text-white",
-  danger: "bg-danger text-white",
-  warning: "bg-warning text-white",
-  success: "bg-success text-white",
+  primary: "bg-brand-700 text-white",
+  danger: "bg-danger-600 text-white",
+  warning: "bg-warning-500 text-white",
+  success: "bg-success-500 text-white",
   white: "bg-white text-neutral-800 border-neutral-300",
+  secondary: "bg-neutral-100 border-neutral-50 text-neutral-800",
   basic: "bg-neutral-50 border-neutral-50 text-neutral-800",
@@ -148,4 +149,5 @@ transparent: "bg-none text-brand-800 border-transparent"
   white: "border-white text-white",
+  secondary: "border-neutral-300 text-neutral-800",
   basic: "border-neutral text-neutral-800",
-  transparent: "border-transparent text-brand-800"
+  transparent: "border-neutral-300 text-brand-800"
 };
@@ -158,2 +160,3 @@ var ghost = {
   white: "text-white",
+  secondary: "text-black",
   basic: "text-black",
@@ -168,2 +171,3 @@ transparent: "text-neutral"
   white: "border-white text-white",
+  secondary: "border-gray text-gray-800",
   basic: "border-gray text-gray-800",
@@ -178,2 +182,3 @@ transparent: "border-transparent text-brand"
   white: "text-white",
+  secondary: "text-white",
   basic: "text-white",
@@ -189,2 +194,3 @@ transparent: "text-white"
   white: "shadow-lg shadow-white/40 bg-white text-neutral-800",
+  secondary: "shadow-lg shadow-neutral/40 bg-neutral-50 text-neutral-800",
   basic: "shadow-lg shadow-neutral/40 bg-neutral-50 text-neutral-800"
@@ -198,2 +204,3 @@ };
   white: "bg-white text-neutral-800",
+  secondary: "bg-neutral-50 text-neutral-800",
   basic: "bg-neutral-50 text-neutral-800",
@@ -208,2 +215,3 @@ transparent: "bg-transparent text-brand-800"
   white: "bg-white text-white shadow-lg",
+  secondary: "bg-white text-neutral-800 shadow-lg",
   basic: "bg-white text-neutral-800 shadow-lg",
@@ -406,3 +414,3 @@ transparent: "bg-white text-brand shadow-lg"
       class: {
-        base: colorVariants.outline.primary
+        base: ["bg-brand-100", colorVariants.outline.primary]
       }
@@ -414,3 +422,3 @@ },
       class: {
-        base: colorVariants.outline.success
+        base: ["bg-success-100", colorVariants.outline.success]
       }
@@ -422,3 +430,3 @@ },
       class: {
-        base: colorVariants.outline.warning
+        base: ["bg-warning-100", colorVariants.outline.warning]
       }
@@ -430,3 +438,3 @@ },
       class: {
-        base: colorVariants.outline.danger
+        base: ["bg-danger-100", colorVariants.outline.danger]
       }
@@ -445,3 +453,3 @@ },
       class: {
-        base: colorVariants.outline.white
+        base: ["bg-white-100", colorVariants.outline.white]
       }
@@ -453,3 +461,3 @@ },
       class: {
-        base: colorVariants.outline.basic
+        base: ["bg-neutral-100", colorVariants.outline.basic]
       }
@@ -456,0 +464,0 @@ },

dist/components/code.js

@@ -124,7 +124,8 @@ "use strict";
 var solid = {
-  primary: "bg-brand text-white",
-  danger: "bg-danger text-white",
-  warning: "bg-warning text-white",
-  success: "bg-success text-white",
+  primary: "bg-brand-700 text-white",
+  danger: "bg-danger-600 text-white",
+  warning: "bg-warning-500 text-white",
+  success: "bg-success-500 text-white",
   white: "bg-white text-neutral-800 border-neutral-300",
+  secondary: "bg-neutral-100 border-neutral-50 text-neutral-800",
   basic: "bg-neutral-50 border-neutral-50 text-neutral-800",
@@ -139,4 +140,5 @@ transparent: "bg-none text-brand-800 border-transparent"
   white: "border-white text-white",
+  secondary: "border-neutral-300 text-neutral-800",
   basic: "border-neutral text-neutral-800",
-  transparent: "border-transparent text-brand-800"
+  transparent: "border-neutral-300 text-brand-800"
 };
@@ -149,2 +151,3 @@ var ghost = {
   white: "text-white",
+  secondary: "text-black",
   basic: "text-black",
@@ -159,2 +162,3 @@ transparent: "text-neutral"
   white: "border-white text-white",
+  secondary: "border-gray text-gray-800",
   basic: "border-gray text-gray-800",
@@ -169,2 +173,3 @@ transparent: "border-transparent text-brand"
   white: "text-white",
+  secondary: "text-white",
   basic: "text-white",
@@ -180,2 +185,3 @@ transparent: "text-white"
   white: "shadow-lg shadow-white/40 bg-white text-neutral-800",
+  secondary: "shadow-lg shadow-neutral/40 bg-neutral-50 text-neutral-800",
   basic: "shadow-lg shadow-neutral/40 bg-neutral-50 text-neutral-800"
@@ -189,2 +195,3 @@ };
   white: "bg-white text-neutral-800",
+  secondary: "bg-neutral-50 text-neutral-800",
   basic: "bg-neutral-50 text-neutral-800",
@@ -199,2 +206,3 @@ transparent: "bg-transparent text-brand-800"
   white: "bg-white text-white shadow-lg",
+  secondary: "bg-white text-neutral-800 shadow-lg",
   basic: "bg-white text-neutral-800 shadow-lg",
@@ -201,0 +209,0 @@ transparent: "bg-white text-brand shadow-lg"

dist/components/divider.d.ts

@@ -16,38 +16,48 @@ import * as tailwind_variants from 'tailwind-variants';
     orientation: {
-        horizontal: "w-full h-divider";
-        vertical: "h-full w-divider";
+        horizontal: "";
+        vertical: "";
     };
-}, undefined, "shrink-0 bg-divider border-none", tailwind_variants_dist_config.TVConfig<{
+}, {
+    label: string;
+    divider: string;
+}, "flex data-[orientation=vertical]:flex-col h-full items-center", tailwind_variants_dist_config.TVConfig<{
     orientation: {
-        horizontal: "w-full h-divider";
-        vertical: "h-full w-divider";
+        horizontal: "";
+        vertical: "";
     };
 }, {
     orientation: {
-        horizontal: "w-full h-divider";
-        vertical: "h-full w-divider";
+        horizontal: "";
+        vertical: "";
     };
 }>, {
     orientation: {
-        horizontal: "w-full h-divider";
-        vertical: "h-full w-divider";
+        horizontal: "";
+        vertical: "";
     };
-}, undefined, tailwind_variants.TVReturnType<{
+}, {
+    label: string;
+    divider: string;
+}, tailwind_variants.TVReturnType<{
     orientation: {
-        horizontal: "w-full h-divider";
-        vertical: "h-full w-divider";
+        horizontal: "";
+        vertical: "";
     };
-}, undefined, "shrink-0 bg-divider border-none", tailwind_variants_dist_config.TVConfig<{
+}, {
+    label: string;
+    divider: string;
+}, "flex data-[orientation=vertical]:flex-col h-full items-center", tailwind_variants_dist_config.TVConfig<{
     orientation: {
-        horizontal: "w-full h-divider";
-        vertical: "h-full w-divider";
+        horizontal: "";
+        vertical: "";
     };
 }, {
     orientation: {
-        horizontal: "w-full h-divider";
-        vertical: "h-full w-divider";
+        horizontal: "";
+        vertical: "";
     };
 }>, unknown, unknown, undefined>>;
 type DividerVariantProps = VariantProps<typeof divider>;
+type DividerSlots = keyof ReturnType<typeof divider>;
 
-export { type DividerVariantProps, divider };
+export { type DividerSlots, type DividerVariantProps, divider };

dist/components/divider.js

@@ -124,7 +124,11 @@ "use strict";
 var divider = tv({
-  base: "shrink-0 bg-divider border-none",
+  base: "flex data-[orientation=vertical]:flex-col h-full items-center",
+  slots: {
+    label: "flex-shrink text-sm text-neutral-800",
+    divider: "flex-grow border-divider"
+  },
   variants: {
     orientation: {
-      horizontal: "w-full h-divider",
-      vertical: "h-full w-divider"
+      horizontal: "",
+      vertical: ""
     }
@@ -134,3 +138,19 @@ },
     orientation: "horizontal"
-  }
+  },
+  compoundVariants: [
+    {
+      orientation: "vertical",
+      class: {
+        label: "my-2",
+        divider: "border-l"
+      }
+    },
+    {
+      orientation: "horizontal",
+      class: {
+        label: "mx-2",
+        divider: "border-t"
+      }
+    }
+  ]
 });
@@ -137,0 +157,0 @@ // Annotate the CommonJS export names for ESM import in node:

dist/components/dropdown.js

@@ -136,3 +136,3 @@ "use strict";
 var dropdown = tv({
-  base: ["w-full", "p-1", "min-w-[200px]"]
+  base: ["w-full", "p-0", "min-w-[200px]"]
 });
@@ -139,0 +139,0 @@ var dropdownItem = tv({

dist/components/index.d.ts

@@ -13,13 +13,19 @@ export { AvatarGroupVariantProps, AvatarSlots, AvatarVariantProps, avatar, avatarGroup } from './avatar.js';
 export { AccordionGroupVariantProps, AccordionItemSlots, AccordionItemVariantProps, accordion, accordionItem } from './accordion.js';
-export { InputSlots, InputVariantProps, input } from './input.js';
+export { ProgressSlots, ProgressVariantProps, progress } from './progress.js';
+export { InputGroupVariantProps, InputSlots, InputVariantProps, input, inputGroup } from './input.js';
 export { DropdownItemSlots, DropdownItemVariantProps, DropdownSectionSlots, DropdownSectionVariantProps, dropdown, dropdownItem, dropdownMenu, dropdownSection } from './dropdown.js';
 export { ImageSlots, ImageVariantProps, image } from './image.js';
+export { ModalSlots, ModalVariantProps, modal } from './modal.js';
 export { SpacerVariantProps, spacer } from './spacer.js';
-export { DividerVariantProps, divider } from './divider.js';
+export { DividerSlots, DividerVariantProps, divider } from './divider.js';
 export { KbdSlots, KbdVariantProps, kbd } from './kbd.js';
 export { TabsReturnType, TabsSlots, TabsVariantProps, tabs } from './tabs.js';
 export { SkeletonSlots, SkeletonVariantProps, skeleton } from './skeleton.js';
-export { MenuItemSlots, MenuItemVariantProps, MenuSectionSlots, MenuSectionVariantProps, MenuSlots, MenuVariantProps, menu, menuItem, menuSection } from './menu.js';
+export { SelectSlots, SelectVariantProps, select } from './select.js';
+export { MenuItemSlots as ListboxItemSlots, MenuItemVariantProps as ListboxItemVariantProps, MenuSectionSlots as ListboxSectionSlots, MenuSectionVariantProps as ListboxSectionVariantProps, MenuSlots as ListboxSlots, MenuVariantProps as ListboxVariantProps, MenuItemSlots, MenuItemVariantProps, MenuSectionSlots, MenuSectionVariantProps, MenuSlots, MenuVariantProps, menu as listbox, menuItem as listboxItem, menuSection as listboxSection, menu, menuItem, menuSection } from './menu.js';
+export { ScrollShadowVariantProps, scrollShadow } from './scroll-shadow.js';
 export { BreadcrumbItemSlots, BreadcrumbItemVariantProps, BreadcrumbsSlots, BreadcrumbsVariantProps, breadcrumbItem, breadcrumbs } from './breadcrumbs.js';
+export { AlertSlots, AlertVariantProps, alert } from './alert.js';
+export { PaginationSlots, PaginationVariantProps, pagination } from './pagination.js';
 import 'tailwind-variants';
 import 'tailwind-variants/dist/config';

dist/components/input.d.ts

@@ -28,23 +28,8 @@ import * as tailwind_variants from 'tailwind-variants';
         };
-        faded: {
-            inputWrapper: string[];
-            value: string;
-        };
-        bordered: {
-            inputWrapper: string[];
-        };
         underlined: {
             inputWrapper: string[];
             innerWrapper: string;
-            label: string;
+            input: string;
         };
     };
-    color: {
-        default: {};
-        primary: {};
-        secondary: {};
-        success: {};
-        warning: {};
-        danger: {};
-    };
     size: {
@@ -56,12 +41,20 @@ sm: {
             clearButton: string;
+            inValidIcon: string;
+            validIcon: string;
         };
         md: {
+            label: string;
             inputWrapper: string;
             input: string;
             clearButton: string;
+            inValidIcon: string;
+            validIcon: string;
         };
         lg: {
+            label: string;
             inputWrapper: string;
             input: string;
             clearButton: string;
+            inValidIcon: string;
+            validIcon: string;
         };
@@ -96,7 +89,2 @@ };
         };
-        inside: {
-            label: string;
-            inputWrapper: string;
-            innerWrapper: string;
-        };
     };
@@ -123,6 +111,20 @@ fullWidth: {
         true: {
-            label: string;
-            input: string;
+            inputWrapper: string;
+            inValidIcon: string;
+            errorMessage: string;
         };
+        false: {
+            inValidIcon: string;
+        };
     };
+    isValid: {
+        true: {
+            inputWrapper: string;
+            validIcon: string;
+            errorMessage: string;
+        };
+        false: {
+            validIcon: string;
+        };
+    };
     isRequired: {
@@ -133,2 +135,7 @@ true: {
     };
+    isReadOnly: {
+        true: {
+            inputWrapper: string;
+        };
+    };
     isMultiline: {
@@ -154,5 +161,14 @@ true: {
     };
+    isInGroup: {
+        true: {
+            inputWrapper: string;
+        };
+    };
 }, {
     base: string;
     label: string[];
+    inValidIcon: string;
+    validIcon: string;
+    startContentWrapper: string;
+    endContentWrapper: string;
     mainWrapper: string;
@@ -162,2 +178,4 @@ inputWrapper: string;
     input: string[];
+    textarea: string[];
+    maxLengthWrapper: string;
     clearButton: string[];
@@ -172,23 +190,8 @@ helperWrapper: string;
         };
-        faded: {
-            inputWrapper: string[];
-            value: string;
-        };
-        bordered: {
-            inputWrapper: string[];
-        };
         underlined: {
             inputWrapper: string[];
             innerWrapper: string;
-            label: string;
+            input: string;
         };
     };
-    color: {
-        default: {};
-        primary: {};
-        secondary: {};
-        success: {};
-        warning: {};
-        danger: {};
-    };
     size: {
@@ -200,12 +203,20 @@ sm: {
             clearButton: string;
+            inValidIcon: string;
+            validIcon: string;
         };
         md: {
+            label: string;
             inputWrapper: string;
             input: string;
             clearButton: string;
+            inValidIcon: string;
+            validIcon: string;
         };
         lg: {
+            label: string;
             inputWrapper: string;
             input: string;
             clearButton: string;
+            inValidIcon: string;
+            validIcon: string;
         };
@@ -240,7 +251,2 @@ };
         };
-        inside: {
-            label: string;
-            inputWrapper: string;
-            innerWrapper: string;
-        };
     };
@@ -267,6 +273,20 @@ fullWidth: {
         true: {
-            label: string;
-            input: string;
+            inputWrapper: string;
+            inValidIcon: string;
+            errorMessage: string;
         };
+        false: {
+            inValidIcon: string;
+        };
     };
+    isValid: {
+        true: {
+            inputWrapper: string;
+            validIcon: string;
+            errorMessage: string;
+        };
+        false: {
+            validIcon: string;
+        };
+    };
     isRequired: {
@@ -277,2 +297,7 @@ true: {
     };
+    isReadOnly: {
+        true: {
+            inputWrapper: string;
+        };
+    };
     isMultiline: {
@@ -298,2 +323,7 @@ true: {
     };
+    isInGroup: {
+        true: {
+            inputWrapper: string;
+        };
+    };
 }, {
@@ -304,23 +334,8 @@ variant: {
         };
-        faded: {
-            inputWrapper: string[];
-            value: string;
-        };
-        bordered: {
-            inputWrapper: string[];
-        };
         underlined: {
             inputWrapper: string[];
             innerWrapper: string;
-            label: string;
+            input: string;
         };
     };
-    color: {
-        default: {};
-        primary: {};
-        secondary: {};
-        success: {};
-        warning: {};
-        danger: {};
-    };
     size: {
@@ -332,12 +347,20 @@ sm: {
             clearButton: string;
+            inValidIcon: string;
+            validIcon: string;
         };
         md: {
+            label: string;
             inputWrapper: string;
             input: string;
             clearButton: string;
+            inValidIcon: string;
+            validIcon: string;
         };
         lg: {
+            label: string;
             inputWrapper: string;
             input: string;
             clearButton: string;
+            inValidIcon: string;
+            validIcon: string;
         };
@@ -372,7 +395,2 @@ };
         };
-        inside: {
-            label: string;
-            inputWrapper: string;
-            innerWrapper: string;
-        };
     };
@@ -399,6 +417,20 @@ fullWidth: {
         true: {
-            label: string;
-            input: string;
+            inputWrapper: string;
+            inValidIcon: string;
+            errorMessage: string;
         };
+        false: {
+            inValidIcon: string;
+        };
     };
+    isValid: {
+        true: {
+            inputWrapper: string;
+            validIcon: string;
+            errorMessage: string;
+        };
+        false: {
+            validIcon: string;
+        };
+    };
     isRequired: {
@@ -409,2 +441,7 @@ true: {
     };
+    isReadOnly: {
+        true: {
+            inputWrapper: string;
+        };
+    };
     isMultiline: {
@@ -430,2 +467,7 @@ true: {
     };
+    isInGroup: {
+        true: {
+            inputWrapper: string;
+        };
+    };
 }>, {
@@ -436,23 +478,8 @@ variant: {
         };
-        faded: {
-            inputWrapper: string[];
-            value: string;
-        };
-        bordered: {
-            inputWrapper: string[];
-        };
         underlined: {
             inputWrapper: string[];
             innerWrapper: string;
-            label: string;
+            input: string;
         };
     };
-    color: {
-        default: {};
-        primary: {};
-        secondary: {};
-        success: {};
-        warning: {};
-        danger: {};
-    };
     size: {
@@ -464,12 +491,20 @@ sm: {
             clearButton: string;
+            inValidIcon: string;
+            validIcon: string;
         };
         md: {
+            label: string;
             inputWrapper: string;
             input: string;
             clearButton: string;
+            inValidIcon: string;
+            validIcon: string;
         };
         lg: {
+            label: string;
             inputWrapper: string;
             input: string;
             clearButton: string;
+            inValidIcon: string;
+            validIcon: string;
         };
@@ -504,7 +539,2 @@ };
         };
-        inside: {
-            label: string;
-            inputWrapper: string;
-            innerWrapper: string;
-        };
     };
@@ -531,6 +561,20 @@ fullWidth: {
         true: {
-            label: string;
-            input: string;
+            inputWrapper: string;
+            inValidIcon: string;
+            errorMessage: string;
         };
+        false: {
+            inValidIcon: string;
+        };
     };
+    isValid: {
+        true: {
+            inputWrapper: string;
+            validIcon: string;
+            errorMessage: string;
+        };
+        false: {
+            validIcon: string;
+        };
+    };
     isRequired: {
@@ -541,2 +585,7 @@ true: {
     };
+    isReadOnly: {
+        true: {
+            inputWrapper: string;
+        };
+    };
     isMultiline: {
@@ -562,5 +611,14 @@ true: {
     };
+    isInGroup: {
+        true: {
+            inputWrapper: string;
+        };
+    };
 }, {
     base: string;
     label: string[];
+    inValidIcon: string;
+    validIcon: string;
+    startContentWrapper: string;
+    endContentWrapper: string;
     mainWrapper: string;
@@ -570,2 +628,4 @@ inputWrapper: string;
     input: string[];
+    textarea: string[];
+    maxLengthWrapper: string;
     clearButton: string[];
@@ -580,23 +640,8 @@ helperWrapper: string;
         };
-        faded: {
-            inputWrapper: string[];
-            value: string;
-        };
-        bordered: {
-            inputWrapper: string[];
-        };
         underlined: {
             inputWrapper: string[];
             innerWrapper: string;
-            label: string;
+            input: string;
         };
     };
-    color: {
-        default: {};
-        primary: {};
-        secondary: {};
-        success: {};
-        warning: {};
-        danger: {};
-    };
     size: {
@@ -608,12 +653,20 @@ sm: {
             clearButton: string;
+            inValidIcon: string;
+            validIcon: string;
         };
         md: {
+            label: string;
             inputWrapper: string;
             input: string;
             clearButton: string;
+            inValidIcon: string;
+            validIcon: string;
         };
         lg: {
+            label: string;
             inputWrapper: string;
             input: string;
             clearButton: string;
+            inValidIcon: string;
+            validIcon: string;
         };
@@ -648,7 +701,2 @@ };
         };
-        inside: {
-            label: string;
-            inputWrapper: string;
-            innerWrapper: string;
-        };
     };
@@ -675,6 +723,20 @@ fullWidth: {
         true: {
-            label: string;
-            input: string;
+            inputWrapper: string;
+            inValidIcon: string;
+            errorMessage: string;
         };
+        false: {
+            inValidIcon: string;
+        };
     };
+    isValid: {
+        true: {
+            inputWrapper: string;
+            validIcon: string;
+            errorMessage: string;
+        };
+        false: {
+            validIcon: string;
+        };
+    };
     isRequired: {
@@ -685,2 +747,7 @@ true: {
     };
+    isReadOnly: {
+        true: {
+            inputWrapper: string;
+        };
+    };
     isMultiline: {
@@ -706,5 +773,14 @@ true: {
     };
+    isInGroup: {
+        true: {
+            inputWrapper: string;
+        };
+    };
 }, {
     base: string;
     label: string[];
+    inValidIcon: string;
+    validIcon: string;
+    startContentWrapper: string;
+    endContentWrapper: string;
     mainWrapper: string;
@@ -714,2 +790,4 @@ inputWrapper: string;
     input: string[];
+    textarea: string[];
+    maxLengthWrapper: string;
     clearButton: string[];
@@ -724,23 +802,8 @@ helperWrapper: string;
         };
-        faded: {
-            inputWrapper: string[];
-            value: string;
-        };
-        bordered: {
-            inputWrapper: string[];
-        };
         underlined: {
             inputWrapper: string[];
             innerWrapper: string;
-            label: string;
+            input: string;
         };
     };
-    color: {
-        default: {};
-        primary: {};
-        secondary: {};
-        success: {};
-        warning: {};
-        danger: {};
-    };
     size: {
@@ -752,12 +815,20 @@ sm: {
             clearButton: string;
+            inValidIcon: string;
+            validIcon: string;
         };
         md: {
+            label: string;
             inputWrapper: string;
             input: string;
             clearButton: string;
+            inValidIcon: string;
+            validIcon: string;
         };
         lg: {
+            label: string;
             inputWrapper: string;
             input: string;
             clearButton: string;
+            inValidIcon: string;
+            validIcon: string;
         };
@@ -792,7 +863,2 @@ };
         };
-        inside: {
-            label: string;
-            inputWrapper: string;
-            innerWrapper: string;
-        };
     };
@@ -819,6 +885,20 @@ fullWidth: {
         true: {
-            label: string;
-            input: string;
+            inputWrapper: string;
+            inValidIcon: string;
+            errorMessage: string;
         };
+        false: {
+            inValidIcon: string;
+        };
     };
+    isValid: {
+        true: {
+            inputWrapper: string;
+            validIcon: string;
+            errorMessage: string;
+        };
+        false: {
+            validIcon: string;
+        };
+    };
     isRequired: {
@@ -829,2 +909,7 @@ true: {
     };
+    isReadOnly: {
+        true: {
+            inputWrapper: string;
+        };
+    };
     isMultiline: {
@@ -850,2 +935,7 @@ true: {
     };
+    isInGroup: {
+        true: {
+            inputWrapper: string;
+        };
+    };
 }, {
@@ -856,23 +946,8 @@ variant: {
         };
-        faded: {
-            inputWrapper: string[];
-            value: string;
-        };
-        bordered: {
-            inputWrapper: string[];
-        };
         underlined: {
             inputWrapper: string[];
             innerWrapper: string;
-            label: string;
+            input: string;
         };
     };
-    color: {
-        default: {};
-        primary: {};
-        secondary: {};
-        success: {};
-        warning: {};
-        danger: {};
-    };
     size: {
@@ -884,12 +959,20 @@ sm: {
             clearButton: string;
+            inValidIcon: string;
+            validIcon: string;
         };
         md: {
+            label: string;
             inputWrapper: string;
             input: string;
             clearButton: string;
+            inValidIcon: string;
+            validIcon: string;
         };
         lg: {
+            label: string;
             inputWrapper: string;
             input: string;
             clearButton: string;
+            inValidIcon: string;
+            validIcon: string;
         };
@@ -924,7 +1007,2 @@ };
         };
-        inside: {
-            label: string;
-            inputWrapper: string;
-            innerWrapper: string;
-        };
     };
@@ -951,6 +1029,20 @@ fullWidth: {
         true: {
-            label: string;
-            input: string;
+            inputWrapper: string;
+            inValidIcon: string;
+            errorMessage: string;
         };
+        false: {
+            inValidIcon: string;
+        };
     };
+    isValid: {
+        true: {
+            inputWrapper: string;
+            validIcon: string;
+            errorMessage: string;
+        };
+        false: {
+            validIcon: string;
+        };
+    };
     isRequired: {
@@ -961,2 +1053,7 @@ true: {
     };
+    isReadOnly: {
+        true: {
+            inputWrapper: string;
+        };
+    };
     isMultiline: {
@@ -982,6 +1079,97 @@ true: {
     };
+    isInGroup: {
+        true: {
+            inputWrapper: string;
+        };
+    };
 }>, unknown, unknown, undefined>>;
+declare const inputGroup: tailwind_variants.TVReturnType<{
+    fullWidth: {
+        true: "w-full";
+    };
+    radius: {
+        none: "rounded-none";
+        sm: "rounded-sm";
+        md: "rounded-md";
+        lg: "rounded-lg";
+        full: "rounded-full";
+    };
+    label: string;
+}, undefined, "flex flex-row border border-neutral-300 overflow-hidden divide-x-1 divide-neutral-300", tailwind_variants_dist_config.TVConfig<{
+    fullWidth: {
+        true: "w-full";
+    };
+    radius: {
+        none: "rounded-none";
+        sm: "rounded-sm";
+        md: "rounded-md";
+        lg: "rounded-lg";
+        full: "rounded-full";
+    };
+    label: string;
+}, {
+    fullWidth: {
+        true: "w-full";
+    };
+    radius: {
+        none: "rounded-none";
+        sm: "rounded-sm";
+        md: "rounded-md";
+        lg: "rounded-lg";
+        full: "rounded-full";
+    };
+    label: string;
+}>, {
+    fullWidth: {
+        true: "w-full";
+    };
+    radius: {
+        none: "rounded-none";
+        sm: "rounded-sm";
+        md: "rounded-md";
+        lg: "rounded-lg";
+        full: "rounded-full";
+    };
+    label: string;
+}, undefined, tailwind_variants.TVReturnType<{
+    fullWidth: {
+        true: "w-full";
+    };
+    radius: {
+        none: "rounded-none";
+        sm: "rounded-sm";
+        md: "rounded-md";
+        lg: "rounded-lg";
+        full: "rounded-full";
+    };
+    label: string;
+}, undefined, "flex flex-row border border-neutral-300 overflow-hidden divide-x-1 divide-neutral-300", tailwind_variants_dist_config.TVConfig<{
+    fullWidth: {
+        true: "w-full";
+    };
+    radius: {
+        none: "rounded-none";
+        sm: "rounded-sm";
+        md: "rounded-md";
+        lg: "rounded-lg";
+        full: "rounded-full";
+    };
+    label: string;
+}, {
+    fullWidth: {
+        true: "w-full";
+    };
+    radius: {
+        none: "rounded-none";
+        sm: "rounded-sm";
+        md: "rounded-md";
+        lg: "rounded-lg";
+        full: "rounded-full";
+    };
+    label: string;
+}>, unknown, unknown, undefined>>;
+type InputGroupVariantProps = VariantProps<typeof inputGroup>;
 type InputVariantProps = VariantProps<typeof input>;
 type InputSlots = keyof ReturnType<typeof input>;
 
-export { type InputSlots, type InputVariantProps, input };
+export { type InputGroupVariantProps, type InputSlots, type InputVariantProps, input, inputGroup };

dist/components/input.js

@@ -23,3 +23,4 @@ "use strict";
 __export(input_exports, {
-  input: () => input
+  input: () => input,
+  inputGroup: () => inputGroup
 });
@@ -152,19 +153,35 @@ module.exports = __toCommonJS(input_exports);
       "text-sm",
-      "text-foreground-500"
+      "text-neutral-800",
+      "font-semibold"
     ],
+    inValidIcon: "mr-3",
+    validIcon: "mr-3",
+    startContentWrapper: "flex p-2 bg-neutral-50 border-e border-neutral-300 items-center h-full",
+    endContentWrapper: "flex p-2 bg-neutral-50 border-s border-neutral-300 items-center h-full",
     mainWrapper: "h-full",
-    inputWrapper: "relative w-full inline-flex tap-highlight-transparent flex-row items-center shadow-sm px-3 gap-3",
+    inputWrapper: "relative w-full inline-flex overflow-hidden tap-highlight-transparent flex-row items-center",
     innerWrapper: "inline-flex w-full items-center h-full box-border",
     input: [
-      "w-full font-normal bg-transparent !outline-none placeholder:text-foreground-500 focus-visible:outline-none",
+      "px-2",
+      "w-full font-normal bg-transparent !outline-none placeholder:text-neutral-500 text-neutral-800 focus-visible:outline-none",
       "data-[has-start-content=true]:ps-1.5",
       "data-[has-end-content=true]:pe-1.5"
     ],
+    textarea: [
+      "p-1",
+      "m-1",
+      "border-neutral-300",
+      "w-full font-normal bg-transparent !outline-none placeholder:text-neutral-500 text-neutral-800 focus-visible:outline-none",
+      "data-[has-start-content=true]:ps-1.5",
+      "data-[has-end-content=true]:pe-1.5"
+    ],
+    maxLengthWrapper: "",
     clearButton: [
-      "p-2",
-      "-m-2",
+      // "p-2",
+      // "-m-4",
+      "mr-3",
       "z-10",
       "hidden",
-      "absolute",
-      "right-3",
+      // "absolute",
+      // "right-3",
       "appearance-none",
@@ -183,3 +200,3 @@ "outline-none",
     description: "text-xs text-foreground-400",
-    errorMessage: "text-xs text-danger"
+    errorMessage: "text-xs"
   },
@@ -190,27 +207,15 @@ variants: {
         inputWrapper: [
-          "bg-default-100",
-          "data-[hover=true]:bg-default-200",
-          "group-data-[focus=true]:bg-default-100"
+          "bg-white",
+          "ease-out",
+          "duration-300",
+          "ring-2",
+          "ring-transparent",
+          "data-[hover=true]:border-brand",
+          "group-data-[focus=true]:border-brand",
+          "group-data-[focus=true]:ring-brand-200"
         ]
       },
-      faded: {
-        inputWrapper: [
-          "bg-default-100",
-          "border-md",
-          "border-default-200",
-          "data-[hover=true]:border-default-400"
-        ],
-        value: "group-data-[has-value=true]:text-default-foreground"
-      },
-      bordered: {
-        inputWrapper: [
-          "border-md",
-          "border-default-200",
-          "data-[hover=true]:border-default-400",
-          "group-data-[focus=true]:border-default-foreground"
-        ]
-      },
       underlined: {
         inputWrapper: [
-          "!px-1",
+          // "!px-1",
           "!pb-0",
@@ -220,11 +225,11 @@ "!gap-0",
           "box-border",
-          "border-b-md",
+          "border-b-[1px]",
           "shadow-[0_1px_0px_0_rgba(0,0,0,0.05)]",
-          "border-default-200",
+          "border-neutral-200",
           "!rounded-none",
-          "hover:border-default-300",
+          "hover:border-brand",
           "after:content-['']",
           "after:w-0",
           "after:origin-center",
-          "after:bg-default-foreground",
+          "after:bg-neutral-foreground",
           "after:absolute",
@@ -235,32 +240,37 @@ "after:left-1/2",
           "after:h-[2px]",
-          "group-data-[focus=true]:after:w-full"
+          "group-data-[focus=true]:after:w-full",
+          "ease-out",
+          "duration-300",
+          "ring-transparent",
+          "data-[hover=true]:border-brand",
+          "group-data-[focus=true]:border-brand"
         ],
         innerWrapper: "pb-1",
-        label: "group-data-[filled-within=true]:text-foreground"
+        input: "!pl-0"
       }
     },
-    color: {
-      default: {},
-      primary: {},
-      secondary: {},
-      success: {},
-      warning: {},
-      danger: {}
-    },
     size: {
       sm: {
-        label: "text-xs",
-        inputWrapper: "h-unit-8 min-h-unit-8 px-2 rounded-sm",
-        input: "text-sm",
-        clearButton: "text-md"
+        label: "text-xs top-[18px] left-0",
+        inputWrapper: "h-unit-8 min-h-unit-8 rounded-sm",
+        input: "text-xs",
+        clearButton: "!text-md",
+        inValidIcon: "!text-md",
+        validIcon: "!text-md"
       },
       md: {
+        label: "text-sm top-[24px] left-0",
         inputWrapper: "h-unit-10 min-h-unit-10 rounded-md",
-        input: "text-sm",
-        clearButton: "text-lg"
+        input: "text-sm p-2",
+        clearButton: "!text-lg",
+        inValidIcon: "!text-lg",
+        validIcon: "!text-lg"
       },
       lg: {
+        label: "text-base top-[28px] left-0",
         inputWrapper: "h-unit-12 min-h-unit-12 rounded-lg",
-        input: "text-md",
-        clearButton: "text-lg"
+        input: "text-base",
+        clearButton: "!text-xl",
+        inValidIcon: "!text-xl",
+        validIcon: "!text-xl"
       }
@@ -293,8 +303,3 @@ },
         mainWrapper: "flex flex-col",
-        label: "relative text-foreground pr-2"
-      },
-      inside: {
-        label: "text-xs cursor-text",
-        inputWrapper: "flex-col items-start justify-center gap-0",
-        innerWrapper: "group-data-[has-label=true]:items-end"
+        label: "relative pr-2"
       }
@@ -315,5 +320,5 @@ },
       true: {
-        base: "opacity-disabled pointer-events-none",
-        inputWrapper: "pointer-events-none",
-        label: "pointer-events-none"
+        base: "pointer-events-none",
+        inputWrapper: "opacity-disabled pointer-events-none bg-neutral-300 text-neutral-400",
+        label: "!text-neutral-800"
       }
@@ -323,6 +328,20 @@ },
       true: {
-        label: "!text-danger",
-        input: "!placeholder:text-danger !text-danger"
+        inputWrapper: "!border-danger group-data-[focus=true]:ring-danger-200",
+        inValidIcon: "text-danger",
+        errorMessage: "text-danger"
+      },
+      false: {
+        inValidIcon: "invisible"
       }
     },
+    isValid: {
+      true: {
+        inputWrapper: "!border-success group-data-[focus=true]:ring-success-200",
+        validIcon: "text-success",
+        errorMessage: "text-success"
+      },
+      false: {
+        validIcon: "hidden"
+      }
+    },
     isRequired: {
@@ -333,2 +352,7 @@ true: {
     },
+    isReadOnly: {
+      true: {
+        inputWrapper: "!border-transparent hover:!border-transparent focus:!ring-0 focus:!border-transparent"
+      }
+    },
     isMultiline: {
@@ -359,2 +383,7 @@ true: {
       }
+    },
+    isInGroup: {
+      true: {
+        inputWrapper: "border-none border-neutral-300 rounded-none ring-0"
+      }
     }
@@ -366,7 +395,9 @@ },
     size: "md",
+    radius: "lg",
     fullWidth: true,
-    labelPlacement: "inside",
+    labelPlacement: "outside",
     isDisabled: false,
-    isMultiline: false,
-    disableAnimation: false
+    disableAnimation: false,
+    isInvalid: false,
+    isValid: false
   },
@@ -379,232 +410,28 @@ compoundVariants: [
       class: {
-        input: "group-data-[has-value=true]:text-default-foreground"
+        inputWrapper: "border border-neutral-300",
+        input: "group-data-[has-value=true]:text-neutral-800"
       }
     },
+    // labelPlacement=outside & default
     {
-      variant: "flat",
-      color: "primary",
+      labelPlacement: ["outside"],
+      variant: ["flat", "underlined"],
       class: {
-        inputWrapper: [
-          "bg-primary-50",
-          "data-[hover=true]:bg-primary-100",
-          "text-primary",
-          "group-data-[focus=true]:bg-primary-50",
-          "placeholder:text-primary"
-        ],
-        input: "placeholder:text-primary",
-        label: "text-primary"
+        label: "text-neutral-800"
       }
     },
     {
+      labelPlacement: ["outside-left"],
       variant: "flat",
-      color: "secondary",
       class: {
-        inputWrapper: [
-          "bg-secondary-50",
-          "text-secondary",
-          "data-[hover=true]:bg-secondary-100",
-          "group-data-[focus=true]:bg-secondary-50",
-          "placeholder:text-secondary"
-        ],
-        input: "placeholder:text-secondary",
-        label: "text-secondary"
+        label: "text-neutral-800 top-0"
       }
     },
     {
-      variant: "flat",
-      color: "success",
-      class: {
-        inputWrapper: [
-          "bg-success-50",
-          "text-success-600",
-          "dark:text-success",
-          "placeholder:text-success-600",
-          "dark:placeholder:text-success",
-          "data-[hover=true]:bg-success-100",
-          "group-data-[focus=true]:bg-success-50"
-        ],
-        input: "placeholder:text-success-600 dark:placeholder:text-success",
-        label: "text-success-600 dark:text-success"
-      }
-    },
-    {
-      variant: "flat",
-      color: "warning",
-      class: {
-        inputWrapper: [
-          "bg-warning-50",
-          "text-warning-600",
-          "dark:text-warning",
-          "placeholder:text-warning-600",
-          "dark:placeholder:text-warning",
-          "data-[hover=true]:bg-warning-100",
-          "group-data-[focus=true]:bg-warning-50"
-        ],
-        input: "placeholder:text-warning-600 dark:placeholder:text-warning",
-        label: "text-warning-600 dark:text-warning"
-      }
-    },
-    {
-      variant: "flat",
-      color: "danger",
-      class: {
-        inputWrapper: [
-          "bg-danger-50",
-          "text-danger",
-          "dark:text-danger-500",
-          "placeholder:text-danger",
-          "dark:placeholder:text-danger-500",
-          "data-[hover=true]:bg-danger-100",
-          "group-data-[focus=true]:bg-danger-50"
-        ],
-        input: "placeholder:text-danger dark:placeholder:text-danger-500",
-        label: "text-danger dark:text-danger-500"
-      }
-    },
-    // faded & color
-    {
-      variant: "faded",
-      color: "primary",
-      class: {
-        label: "text-primary",
-        inputWrapper: "data-[hover=true]:border-primary focus-within:border-primary"
-      }
-    },
-    {
-      variant: "faded",
-      color: "secondary",
-      class: {
-        label: "text-secondary",
-        inputWrapper: "data-[hover=true]:border-secondary focus-within:border-secondary"
-      }
-    },
-    {
-      variant: "faded",
-      color: "success",
-      class: {
-        label: "text-success",
-        inputWrapper: "data-[hover=true]:border-success focus-within:border-success"
-      }
-    },
-    {
-      variant: "faded",
-      color: "warning",
-      class: {
-        label: "text-warning",
-        inputWrapper: "data-[hover=true]:border-warning focus-within:border-warning"
-      }
-    },
-    {
-      variant: "faded",
-      color: "danger",
-      class: {
-        label: "text-danger",
-        inputWrapper: "data-[hover=true]:border-danger focus-within:border-danger"
-      }
-    },
-    // underlined & color
-    {
+      labelPlacement: ["outside-left"],
       variant: "underlined",
-      color: "default",
       class: {
-        input: "group-data-[has-value=true]:text-foreground"
+        label: "text-neutral-800 top-[-3.5px]"
       }
     },
-    {
-      variant: "underlined",
-      color: "primary",
-      class: {
-        inputWrapper: "after:bg-primary",
-        label: "text-primary"
-      }
-    },
-    {
-      variant: "underlined",
-      color: "secondary",
-      class: {
-        inputWrapper: "after:bg-secondary",
-        label: "text-secondary"
-      }
-    },
-    {
-      variant: "underlined",
-      color: "success",
-      class: {
-        inputWrapper: "after:bg-success",
-        label: "text-success"
-      }
-    },
-    {
-      variant: "underlined",
-      color: "warning",
-      class: {
-        inputWrapper: "after:bg-warning",
-        label: "text-warning"
-      }
-    },
-    {
-      variant: "underlined",
-      color: "danger",
-      class: {
-        inputWrapper: "after:bg-danger",
-        label: "text-danger"
-      }
-    },
-    // bordered & color
-    {
-      variant: "bordered",
-      color: "primary",
-      class: {
-        inputWrapper: "group-data-[focus=true]:border-primary",
-        label: "text-primary"
-      }
-    },
-    {
-      variant: "bordered",
-      color: "secondary",
-      class: {
-        inputWrapper: "group-data-[focus=true]:border-secondary",
-        label: "text-secondary"
-      }
-    },
-    {
-      variant: "bordered",
-      color: "success",
-      class: {
-        inputWrapper: "group-data-[focus=true]:border-success",
-        label: "text-success"
-      }
-    },
-    {
-      variant: "bordered",
-      color: "warning",
-      class: {
-        inputWrapper: "group-data-[focus=true]:border-warning",
-        label: "text-warning"
-      }
-    },
-    {
-      variant: "bordered",
-      color: "danger",
-      class: {
-        inputWrapper: "group-data-[focus=true]:border-danger",
-        label: "text-danger"
-      }
-    },
-    // labelPlacement=inside & default
-    {
-      labelPlacement: "inside",
-      color: "default",
-      class: {
-        label: "group-data-[filled-within=true]:text-default-600"
-      }
-    },
-    // labelPlacement=outside & default
-    {
-      labelPlacement: "outside",
-      color: "default",
-      class: {
-        label: "group-data-[filled-within=true]:text-foreground"
-      }
-    },
     // radius-full & size
@@ -632,12 +459,4 @@ {
     },
-    // !disableAnimation & variant
     {
       disableAnimation: false,
-      variant: ["faded", "bordered"],
-      class: {
-        inputWrapper: "transition-colors motion-reduce:transition-none"
-      }
-    },
-    {
-      disableAnimation: false,
       variant: "underlined",
@@ -650,3 +469,3 @@ class: {
     {
-      variant: ["flat", "faded"],
+      variant: ["flat"],
       class: {
@@ -659,69 +478,9 @@ inputWrapper: [
     },
-    // isInvalid & variant
     {
-      isInvalid: true,
-      variant: "flat",
+      labelPlacement: ["outside"],
       class: {
-        inputWrapper: [
-          "bg-danger-50",
-          "data-[hover=true]:bg-danger-100",
-          "group-data-[focus=true]:bg-danger-50"
-        ]
+        label: ["pointer-events-auto"]
       }
     },
     {
-      isInvalid: true,
-      variant: "bordered",
-      class: {
-        inputWrapper: "!border-danger group-data-[focus=true]:border-danger"
-      }
-    },
-    {
-      isInvalid: true,
-      variant: "underlined",
-      class: {
-        inputWrapper: "after:bg-danger"
-      }
-    },
-    // size & labelPlacement
-    {
-      labelPlacement: "inside",
-      size: "sm",
-      class: {
-        inputWrapper: "h-12 py-1.5 px-3"
-      }
-    },
-    {
-      labelPlacement: "inside",
-      size: "md",
-      class: {
-        inputWrapper: "h-14 py-2"
-      }
-    },
-    {
-      labelPlacement: "inside",
-      size: "lg",
-      class: {
-        label: "text-sm",
-        inputWrapper: "h-16 py-2.5 gap-0"
-      }
-    },
-    // size & labelPlacement & variant=[faded, bordered]
-    {
-      labelPlacement: "inside",
-      size: "sm",
-      variant: ["bordered", "faded"],
-      class: {
-        inputWrapper: "py-1"
-      }
-    },
-    // labelPlacement=[inside,outside]
-    {
-      labelPlacement: ["inside", "outside"],
-      class: {
-        label: ["group-data-[filled-within=true]:pointer-events-auto"]
-      }
-    },
-    // labelPlacement=[outside,outside-left]
-    {
       labelPlacement: ["outside", "outside-left"],
@@ -734,29 +493,7 @@ class: {
       labelPlacement: "outside",
-      isMultiline: false,
       class: {
         base: "group relative justify-end",
-        label: [
-          "pb-0",
-          "z-20",
-          "top-1/2",
-          "-translate-y-1/2",
-          "group-data-[filled-within=true]:left-0"
-        ]
+        label: ["pb-0", "z-20", "left-0"]
       }
     },
-    // labelPlacement=[inside]
-    {
-      labelPlacement: ["inside"],
-      class: {
-        label: ["group-data-[filled-within=true]:scale-85"]
-      }
-    },
-    // labelPlacement=[inside] & variant=flat
-    {
-      labelPlacement: ["inside"],
-      variant: "flat",
-      class: {
-        innerWrapper: "pb-0.5"
-      }
-    },
     // variant=underlined & size
@@ -777,122 +514,8 @@ {
     },
-    // inside & size
-    {
-      labelPlacement: "inside",
-      size: ["sm", "md"],
-      class: {
-        label: "text-sm"
-      }
-    },
-    {
-      labelPlacement: "inside",
-      isMultiline: false,
-      size: "sm",
-      class: {
-        label: [
-          "group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.xs)/2_-_8px)]"
-        ]
-      }
-    },
-    {
-      labelPlacement: "inside",
-      isMultiline: false,
-      size: "md",
-      class: {
-        label: [
-          "group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.sm)/2_-_6px)]"
-        ]
-      }
-    },
-    {
-      labelPlacement: "inside",
-      isMultiline: false,
-      size: "lg",
-      class: {
-        label: [
-          "text-md",
-          "group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.sm)/2_-_8px)]"
-        ]
-      }
-    },
-    // inside & size & [faded, bordered]
-    {
-      labelPlacement: "inside",
-      variant: ["faded", "bordered"],
-      isMultiline: false,
-      size: "sm",
-      class: {
-        label: [
-          "group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.xs)/2_-_8px_-_theme(borderWidth.md))]"
-        ]
-      }
-    },
-    {
-      labelPlacement: "inside",
-      variant: ["faded", "bordered"],
-      isMultiline: false,
-      size: "md",
-      class: {
-        label: [
-          "group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.sm)/2_-_6px_-_theme(borderWidth.md))]"
-        ]
-      }
-    },
-    {
-      labelPlacement: "inside",
-      variant: ["faded", "bordered"],
-      isMultiline: false,
-      size: "lg",
-      class: {
-        label: [
-          "text-md",
-          "group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.sm)/2_-_8px_-_theme(borderWidth.md))]"
-        ]
-      }
-    },
-    // inside & size & underlined
-    {
-      labelPlacement: "inside",
-      variant: "underlined",
-      isMultiline: false,
-      size: "sm",
-      class: {
-        label: [
-          "group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.xs)/2_-_5px)]"
-        ]
-      }
-    },
-    {
-      labelPlacement: "inside",
-      variant: "underlined",
-      isMultiline: false,
-      size: "md",
-      class: {
-        label: [
-          "group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.sm)/2_-_3.5px)]"
-        ]
-      }
-    },
-    {
-      labelPlacement: "inside",
-      variant: "underlined",
-      size: "lg",
-      isMultiline: false,
-      class: {
-        label: [
-          "text-md",
-          "group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.sm)/2_-_4px)]"
-        ]
-      }
-    },
     // outside & size
     {
       labelPlacement: "outside",
-      size: "sm",
-      isMultiline: false,
+      variant: ["flat", "underlined"],
       class: {
-        label: [
-          "left-2",
-          "text-xs",
-          "group-data-[filled-within=true]:-translate-y-[calc(100%_+_theme(fontSize.xs)/2_+_16px)]"
-        ],
+        label: ["left-0", "text-xs", "-translate-y-[calc(100%_+_theme(fontSize.xs)/2_+_16px)]"],
         base: "data-[has-label=true]:mt-[calc(theme(fontSize.sm)_+_8px)]"
@@ -904,9 +527,4 @@ }
       size: "md",
-      isMultiline: false,
       class: {
-        label: [
-          "left-3",
-          "text-sm",
-          "group-data-[filled-within=true]:-translate-y-[calc(100%_+_theme(fontSize.sm)/2_+_20px)]"
-        ],
+        label: ["left-0", "text-sm", "-translate-y-[calc(100%_+_theme(fontSize.sm)/2_+_20px)]"],
         base: "data-[has-label=true]:mt-[calc(theme(fontSize.sm)_+_10px)]`"
@@ -918,9 +536,4 @@ }
       size: "lg",
-      isMultiline: false,
       class: {
-        label: [
-          "left-3",
-          "text-md",
-          "group-data-[filled-within=true]:-translate-y-[calc(100%_+_theme(fontSize.sm)/2_+_24px)]"
-        ],
+        label: ["left-0", "text-md", "-translate-y-[calc(100%_+_theme(fontSize.sm)/2_+_24px)]"],
         base: "data-[has-label=true]:mt-[calc(theme(fontSize.sm)_+_12px)]"
@@ -967,22 +580,39 @@ }
     },
-    // isMultiline & labelPlacement="inside"
+    // isMultiline
     {
-      labelPlacement: "inside",
       isMultiline: true,
       class: {
-        label: "pb-0.5",
-        input: "pt-0"
+        input: "transition-height !duration-100",
+        inputWrapper: "py-0 overflow-visible",
+        base: "!mt-0",
+        label: ["top-[52px]"],
+        inValidIcon: "absolute top-[7.5px] right-[7.5px] mr-0 bg-white rounded-full",
+        validIcon: "absolute top-[7.5px] right-[7.5px] mr-0 bg-white rounded-full",
+        maxLengthWrapper: "w-full justify-end text-brand"
       }
     },
-    // isMultiline & !disableAnimation
     {
       isMultiline: true,
-      disableAnimation: false,
+      size: "sm",
       class: {
-        input: "transition-height !duration-100 motion-reduce:transition-none"
+        textarea: "min-h-unit-8"
       }
     },
+    {
+      isMultiline: true,
+      size: "md",
+      class: {
+        textarea: "min-h-unit-10"
+      }
+    },
+    {
+      isMultiline: true,
+      size: "lg",
+      class: {
+        textarea: "min-h-unit-12"
+      }
+    },
     // text truncate labelPlacement=[inside,outside]
     {
-      labelPlacement: ["inside", "outside"],
+      labelPlacement: ["outside"],
       class: {
@@ -992,15 +622,64 @@ label: ["pe-2", "max-w-full", "text-ellipsis", "overflow-hidden"]
     },
-    // isMultiline & radius=full
+    // {
+    //   isInGroup: true,
+    //   class: {
+    //     inputWrapper: "h-full px-0",
+    //   },
+    // },
     {
-      isMultiline: true,
-      radius: "full",
+      isInGroup: true,
+      size: "sm",
       class: {
-        inputWrapper: "data-[has-multiple-rows=true]:rounded-lg"
+        input: "!h-[30px]",
+        innerWrapper: "px-0 py-2 h-full",
+        inputWrapper: "!h-[30px]",
+        mainWrapper: "justify-center"
       }
+    },
+    {
+      isInGroup: true,
+      size: "md",
+      class: {
+        input: "!h-[22px]",
+        innerWrapper: "px-0 py-2 h-full",
+        inputWrapper: "!h-[22px]",
+        mainWrapper: "justify-center"
+      }
+    },
+    {
+      isInGroup: true,
+      size: "md",
+      class: {
+        input: "!h-[46px]",
+        innerWrapper: "px-0 py-0 h-full",
+        inputWrapper: "!h-[46px]",
+        mainWrapper: "justify-center"
+      }
     }
   ]
 });
+var inputGroup = tv({
+  base: "flex flex-row border border-neutral-300 overflow-hidden divide-x-1 divide-neutral-300",
+  variants: {
+    fullWidth: {
+      true: "w-full"
+    },
+    radius: {
+      none: "rounded-none",
+      sm: "rounded-sm",
+      md: "rounded-md",
+      lg: "rounded-lg",
+      full: "rounded-full"
+    },
+    label: ""
+  },
+  defaultVariants: {
+    fullWidth: false,
+    radius: "lg"
+  }
+});
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  input
+  input,
+  inputGroup
 });

dist/components/menu.d.ts

@@ -87,35 +87,15 @@ import * as tailwind_variants_dist_config from 'tailwind-variants/dist/config';
 declare const menuItem: tailwind_variants.TVReturnType<{
-    variant: {
-        solid: {
-            base: string;
-        };
-        bordered: {
-            base: string;
-        };
-        light: {
-            base: string;
-        };
-        faded: {
+    showDivider: {
+        true: {
             base: string[];
         };
-        flat: {
-            base: string;
-        };
-        shadow: {
-            base: string;
-        };
+        false: {};
     };
-    color: {
-        default: {};
-        brand: {};
-        secondary: {};
-        success: {};
-        warning: {};
-        danger: {};
-    };
-    showDivider: {
+    isSelected: {
         true: {
             base: string[];
         };
-        false: {};
+        false: {
+            base: string[];
+        };
     };
@@ -141,35 +121,15 @@ isDisabled: {
 }, undefined, tailwind_variants_dist_config.TVConfig<{
-    variant: {
-        solid: {
-            base: string;
-        };
-        bordered: {
-            base: string;
-        };
-        light: {
-            base: string;
-        };
-        faded: {
+    showDivider: {
+        true: {
             base: string[];
         };
-        flat: {
-            base: string;
-        };
-        shadow: {
-            base: string;
-        };
+        false: {};
     };
-    color: {
-        default: {};
-        brand: {};
-        secondary: {};
-        success: {};
-        warning: {};
-        danger: {};
-    };
-    showDivider: {
+    isSelected: {
         true: {
             base: string[];
         };
-        false: {};
+        false: {
+            base: string[];
+        };
     };
@@ -188,35 +148,15 @@ isDisabled: {
 }, {
-    variant: {
-        solid: {
-            base: string;
-        };
-        bordered: {
-            base: string;
-        };
-        light: {
-            base: string;
-        };
-        faded: {
+    showDivider: {
+        true: {
             base: string[];
         };
-        flat: {
-            base: string;
-        };
-        shadow: {
-            base: string;
-        };
+        false: {};
     };
-    color: {
-        default: {};
-        brand: {};
-        secondary: {};
-        success: {};
-        warning: {};
-        danger: {};
-    };
-    showDivider: {
+    isSelected: {
         true: {
             base: string[];
         };
-        false: {};
+        false: {
+            base: string[];
+        };
     };
@@ -235,35 +175,15 @@ isDisabled: {
 }>, {
-    variant: {
-        solid: {
-            base: string;
-        };
-        bordered: {
-            base: string;
-        };
-        light: {
-            base: string;
-        };
-        faded: {
+    showDivider: {
+        true: {
             base: string[];
         };
-        flat: {
-            base: string;
-        };
-        shadow: {
-            base: string;
-        };
+        false: {};
     };
-    color: {
-        default: {};
-        brand: {};
-        secondary: {};
-        success: {};
-        warning: {};
-        danger: {};
-    };
-    showDivider: {
+    isSelected: {
         true: {
             base: string[];
         };
-        false: {};
+        false: {
+            base: string[];
+        };
     };
@@ -289,35 +209,15 @@ isDisabled: {
 }, tailwind_variants.TVReturnType<{
-    variant: {
-        solid: {
-            base: string;
-        };
-        bordered: {
-            base: string;
-        };
-        light: {
-            base: string;
-        };
-        faded: {
+    showDivider: {
+        true: {
             base: string[];
         };
-        flat: {
-            base: string;
-        };
-        shadow: {
-            base: string;
-        };
+        false: {};
     };
-    color: {
-        default: {};
-        brand: {};
-        secondary: {};
-        success: {};
-        warning: {};
-        danger: {};
-    };
-    showDivider: {
+    isSelected: {
         true: {
             base: string[];
         };
-        false: {};
+        false: {
+            base: string[];
+        };
     };
@@ -343,35 +243,15 @@ isDisabled: {
 }, undefined, tailwind_variants_dist_config.TVConfig<{
-    variant: {
-        solid: {
-            base: string;
-        };
-        bordered: {
-            base: string;
-        };
-        light: {
-            base: string;
-        };
-        faded: {
+    showDivider: {
+        true: {
             base: string[];
         };
-        flat: {
-            base: string;
-        };
-        shadow: {
-            base: string;
-        };
+        false: {};
     };
-    color: {
-        default: {};
-        brand: {};
-        secondary: {};
-        success: {};
-        warning: {};
-        danger: {};
-    };
-    showDivider: {
+    isSelected: {
         true: {
             base: string[];
         };
-        false: {};
+        false: {
+            base: string[];
+        };
     };
@@ -390,35 +270,15 @@ isDisabled: {
 }, {
-    variant: {
-        solid: {
-            base: string;
-        };
-        bordered: {
-            base: string;
-        };
-        light: {
-            base: string;
-        };
-        faded: {
+    showDivider: {
+        true: {
             base: string[];
         };
-        flat: {
-            base: string;
-        };
-        shadow: {
-            base: string;
-        };
+        false: {};
     };
-    color: {
-        default: {};
-        brand: {};
-        secondary: {};
-        success: {};
-        warning: {};
-        danger: {};
-    };
-    showDivider: {
+    isSelected: {
         true: {
             base: string[];
         };
-        false: {};
+        false: {
+            base: string[];
+        };
     };
@@ -425,0 +285,0 @@ isDisabled: {

dist/components/menu.js

@@ -124,15 +124,6 @@ "use strict";
 
-// src/utils/classes.ts
-var dataFocusVisibleClasses = [
-  "outline-none",
-  "data-[focus-visible=true]:z-10",
-  "data-[focus-visible=true]:outline-2",
-  "data-[focus-visible=true]:outline-focus",
-  "data-[focus-visible=true]:outline-offset-2"
-];
-
 // src/components/menu.ts
 var menu = tv({
   slots: {
-    base: "w-full relative flex flex-col gap-1 p-1",
+    base: "w-full relative flex flex-col gap-1 py-1",
     list: "w-full flex flex-col gap-0.5 outline-none",
@@ -159,19 +150,23 @@ emptyContent: [
       "relative",
-      "px-2",
-      "py-1.5",
+      "px-4",
+      "py-2",
       "w-full",
       "h-full",
       "box-border",
-      "rounded-sm",
+      // "rounded-sm",
       "subpixel-antialiased",
       "outline-none",
       "cursor-pointer",
+      "text-neutral-800",
+      // focus ring
       "tap-highlight-transparent",
-      // focus ring
-      ...dataFocusVisibleClasses,
-      "data-[focus-visible=true]:dark:ring-offset-background-content1"
+      "outline-none",
+      "data-[focus-visible=true]:z-10",
+      "data-[focus-visible=true]:ring-2",
+      "data-[focus-visible=true]:ring-brand-50",
+      "data-[focus-visible=true]:bg-neutral-200"
     ],
     wrapper: "w-full flex flex-col items-start justify-center",
     title: "flex-1 text-sm font-normal truncate",
-    description: ["w-full", "text-xs", "text-foreground-500", "group-hover:text-neutral"],
+    description: ["w-full", "text-xs", "text-foreground-500", "group-hover:text-neutral-800"],
     selectedIcon: ["text-inherit", "w-3", "h-3", "flex-shrink-0"],
@@ -191,33 +186,2 @@ shortcut: [
   variants: {
-    variant: {
-      solid: {
-        base: ""
-      },
-      bordered: {
-        base: "border-md border-transparent bg-transparent"
-      },
-      light: {
-        base: "bg-transparent"
-      },
-      faded: {
-        base: [
-          "border-sm border-transparent hover:border-neutral data-[hover=true]:bg-neutral-100",
-          "data-[selectable=true]:focus:border-neutral data-[selectable=true]:focus:bg-neutral-100"
-        ]
-      },
-      flat: {
-        base: ""
-      },
-      shadow: {
-        base: "data-[hover=true]:shadow-lg"
-      }
-    },
-    color: {
-      default: {},
-      brand: {},
-      secondary: {},
-      success: {},
-      warning: {},
-      danger: {}
-    },
     showDivider: {
@@ -238,2 +202,23 @@ true: {
     },
+    isSelected: {
+      true: {
+        base: [
+          "bg-neutral-50",
+          "text-brand-800",
+          "data-[hover=true]:bg-neutral-50",
+          "data-[hover=true]:text-brand-800",
+          "data-[selectable=true]:focus:bg-neutral-50",
+          "data-[selectable=true]:focus:text-brand-800"
+        ]
+      },
+      false: {
+        base: [
+          "text-neutral-800",
+          "data-[hover=true]:bg-neutral-200",
+          "data-[hover=true]:text-neutral-800",
+          "data-[selectable=true]:focus:bg-neutral-200",
+          "data-[selectable=true]:focus:text-neutral-800"
+        ]
+      }
+    },
     isDisabled: {
@@ -252,4 +237,2 @@ true: {
   defaultVariants: {
-    variant: "solid",
-    color: "default",
     disableAnimation: false,
@@ -259,338 +242,8 @@ showDivider: false
   compoundVariants: [
-    // solid / color
     {
-      variant: "solid",
-      color: "default",
-      class: {
-        base: [
-          "data-[hover=true]:bg-neutral",
-          "data-[hover=true]:text-neutral-foreground",
-          "data-[selectable=true]:focus:bg-neutral",
-          "data-[selectable=true]:focus:text-neutral-foreground"
-        ]
+      isSelected: true,
+      isDisabled: true,
+      className: {
+        base: "bg-neutral-0"
       }
-    },
-    {
-      variant: "solid",
-      color: "brand",
-      class: {
-        base: [
-          "data-[hover=true]:bg-brand data-[hover=true]:text-brand-foreground",
-          "data-[selectable=true]:focus:bg-brand data-[selectable=true]:focus:text-brand-foreground"
-        ]
-      }
-    },
-    {
-      variant: "solid",
-      color: "secondary",
-      class: {
-        base: [
-          "data-[hover=true]:bg-secondary data-[hover=true]:text-secondary-foreground",
-          "data-[selectable=true]:focus:bg-secondary data-[selectable=true]:focus:text-secondary-foreground"
-        ]
-      }
-    },
-    {
-      variant: "solid",
-      color: "success",
-      class: {
-        base: [
-          "data-[hover=true]:bg-success data-[hover=true]:text-success-foreground",
-          "data-[selectable=true]:focus:bg-success data-[selectable=true]:focus:text-success-foreground"
-        ]
-      }
-    },
-    {
-      variant: "solid",
-      color: "warning",
-      class: {
-        base: [
-          "data-[hover=true]:bg-warning data-[hover=true]:text-warning-foreground",
-          "data-[selectable=true]:focus:bg-warning data-[selectable=true]:focus:text-warning-foreground"
-        ]
-      }
-    },
-    {
-      variant: "solid",
-      color: "danger",
-      class: {
-        base: [
-          "data-[hover=true]:bg-danger data-[hover=true]:text-danger-foreground",
-          "data-[selectable=true]:focus:bg-danger data-[selectable=true]:focus:text-danger-foreground"
-        ]
-      }
-    },
-    // shadow / color
-    {
-      variant: "shadow",
-      color: "default",
-      class: {
-        base: [
-          "data-[hover=true]:shadow-neutral/50 data-[hover=true]:bg-neutral data-[hover=true]:text-neutral-foreground",
-          "data-[selectable=true]:focus:shadow-neutral/50 data-[selectable=true]:focus:bg-neutral data-[selectable=true]:focus:text-neutral-foreground"
-        ]
-      }
-    },
-    {
-      variant: "shadow",
-      color: "brand",
-      class: {
-        base: [
-          "data-[hover=true]:shadow-brand/30 data-[hover=true]:bg-brand data-[hover=true]:text-brand-foreground",
-          "data-[selectable=true]:focus:shadow-brand/30 data-[selectable=true]:focus:bg-brand data-[selectable=true]:focus:text-brand-foreground"
-        ]
-      }
-    },
-    {
-      variant: "shadow",
-      color: "secondary",
-      class: {
-        base: [
-          "data-[hover=true]:shadow-secondary/30 data-[hover=true]:bg-secondary data-[hover=true]:text-secondary-foreground",
-          "data-[selectable=true]:focus:shadow-secondary/30 data-[selectable=true]:focus:bg-secondary data-[selectable=true]:focus:text-secondary-foreground"
-        ]
-      }
-    },
-    {
-      variant: "shadow",
-      color: "success",
-      class: {
-        base: [
-          "data-[hover=true]:shadow-success/30 data-[hover=true]:bg-success data-[hover=true]:text-success-foreground",
-          "data-[selectable=true]:focus:shadow-success/30 data-[selectable=true]:focus:bg-success data-[selectable=true]:focus:text-success-foreground"
-        ]
-      }
-    },
-    {
-      variant: "shadow",
-      color: "warning",
-      class: {
-        base: [
-          "data-[hover=true]:shadow-warning/30 data-[hover=true]:bg-warning data-[hover=true]:text-warning-foreground",
-          "data-[selectable=true]:focus:shadow-warning/30 data-[selectable=true]:focus:bg-warning data-[selectable=true]:focus:text-warning-foreground"
-        ]
-      }
-    },
-    {
-      variant: "shadow",
-      color: "danger",
-      class: {
-        base: [
-          "data-[hover=true]:shadow-danger/30 data-[hover=true]:bg-danger data-[hover=true]:text-danger-foreground",
-          "data-[selectable=true]:focus:shadow-danger/30 data-[selectable=true]:focus:bg-danger data-[selectable=true]:focus:text-danger-foreground"
-        ]
-      }
-    },
-    // bordered / color
-    {
-      variant: "bordered",
-      color: "default",
-      class: {
-        base: ["data-[hover=true]:border-neutral", "data-[selectable=true]:focus:border-neutral"]
-      }
-    },
-    {
-      variant: "bordered",
-      color: "brand",
-      class: {
-        base: [
-          "data-[hover=true]:border-brand data-[hover=true]:text-brand",
-          "data-[selectable=true]:focus:border-brand data-[selectable=true]:focus:text-brand"
-        ]
-      }
-    },
-    {
-      variant: "bordered",
-      color: "secondary",
-      class: {
-        base: [
-          "data-[hover=true]:border-secondary data-[hover=true]:text-secondary",
-          "data-[selectable=true]:focus:border-secondary data-[selectable=true]:focus:text-secondary"
-        ]
-      }
-    },
-    {
-      variant: "bordered",
-      color: "success",
-      class: {
-        base: [
-          "data-[hover=true]:border-success data-[hover=true]:text-success",
-          "data-[selectable=true]:focus:border-success data-[selectable=true]:focus:text-success"
-        ]
-      }
-    },
-    {
-      variant: "bordered",
-      color: "warning",
-      class: {
-        base: [
-          "data-[hover=true]:border-warning data-[hover=true]:text-warning",
-          "data-[selectable=true]:focus:border-warning data-[selectable=true]:focus:text-warning"
-        ]
-      }
-    },
-    {
-      variant: "bordered",
-      color: "danger",
-      class: {
-        base: [
-          "data-[hover=true]:border-danger data-[hover=true]:text-danger",
-          "data-[selectable=true]:focus:border-danger data-[selectable=true]:focus:text-danger"
-        ]
-      }
-    },
-    // flat / color
-    {
-      variant: "flat",
-      color: "default",
-      class: {
-        base: [
-          "data-[hover=true]:bg-neutral/40",
-          "data-[hover=true]:text-neutral-foreground",
-          "data-[selectable=true]:focus:bg-neutral/40",
-          "data-[selectable=true]:focus:text-neutral-foreground"
-        ]
-      }
-    },
-    {
-      variant: "flat",
-      color: "brand",
-      class: {
-        base: [
-          "data-[hover=true]:bg-brand/20 data-[hover=true]:text-brand",
-          "data-[selectable=true]:focus:bg-brand/20 data-[selectable=true]:focus:text-brand"
-        ]
-      }
-    },
-    {
-      variant: "flat",
-      color: "secondary",
-      class: {
-        base: [
-          "data-[hover=true]:bg-secondary/20 data-[hover=true]:text-secondary",
-          "data-[selectable=true]:focus:bg-secondary/20 data-[selectable=true]:focus:text-secondary"
-        ]
-      }
-    },
-    {
-      variant: "flat",
-      color: "success",
-      class: {
-        base: [
-          "data-[hover=true]:bg-success/20 data-[hover=true]:text-success",
-          "data-[selectable=true]:focus:bg-success/20 data-[selectable=true]:focus:text-success"
-        ]
-      }
-    },
-    {
-      variant: "flat",
-      color: "warning",
-      class: {
-        base: [
-          "data-[hover=true]:bg-warning/20 data-[hover=true]:text-warning",
-          "data-[selectable=true]:focus:bg-warning/20 data-[selectable=true]:focus:text-warning"
-        ]
-      }
-    },
-    {
-      variant: "flat",
-      color: "danger",
-      class: {
-        base: [
-          "data-[hover=true]:bg-danger/20 data-[hover=true]:text-danger",
-          "data-[selectable=true]:focus:bg-danger/20 data-[selectable=true]:focus:text-danger"
-        ]
-      }
-    },
-    // faded / color
-    {
-      variant: "faded",
-      color: "default",
-      class: {
-        base: [
-          "data-[hover=true]:text-neutral-foreground",
-          "data-[selectable=true]:focus:text-neutral-foreground"
-        ]
-      }
-    },
-    {
-      variant: "faded",
-      color: "brand",
-      class: {
-        base: ["data-[hover=true]:text-brand", "data-[selectable=true]:focus:text-brand"]
-      }
-    },
-    {
-      variant: "faded",
-      color: "secondary",
-      class: {
-        base: ["data-[hover=true]:text-secondary", "data-[selectable=true]:focus:text-secondary"]
-      }
-    },
-    {
-      variant: "faded",
-      color: "success",
-      class: {
-        base: ["data-[hover=true]:text-success", "data-[selectable=true]:focus:text-success"]
-      }
-    },
-    {
-      variant: "faded",
-      color: "warning",
-      class: {
-        base: ["data-[hover=true]:text-warning", "data-[selectable=true]:focus:text-warning"]
-      }
-    },
-    {
-      variant: "faded",
-      color: "danger",
-      class: {
-        base: ["data-[hover=true]:text-danger", "data-[selectable=true]:focus:text-danger"]
-      }
-    },
-    // light / color
-    {
-      variant: "light",
-      color: "default",
-      class: {
-        base: [
-          "data-[hover=true]:text-neutral-500",
-          "data-[selectable=true]:focus:text-neutral-500"
-        ]
-      }
-    },
-    {
-      variant: "light",
-      color: "brand",
-      class: {
-        base: ["data-[hover=true]:text-brand", "data-[selectable=true]:focus:text-brand"]
-      }
-    },
-    {
-      variant: "light",
-      color: "secondary",
-      class: {
-        base: ["data-[hover=true]:text-secondary", "data-[selectable=true]:focus:text-secondary"]
-      }
-    },
-    {
-      variant: "light",
-      color: "success",
-      class: {
-        base: ["data-[hover=true]:text-success", "data-[selectable=true]:focus:text-success"]
-      }
-    },
-    {
-      variant: "light",
-      color: "warning",
-      class: {
-        base: ["data-[hover=true]:text-warning", "data-[selectable=true]:focus:text-warning"]
-      }
-    },
-    {
-      variant: "light",
-      color: "danger",
-      class: {
-        base: ["data-[hover=true]:text-danger", "data-[selectable=true]:focus:text-danger"]
-      }
     }
@@ -597,0 +250,0 @@ ]

dist/components/popover.js

@@ -133,7 +133,8 @@ "use strict";
 var solid = {
-  primary: "bg-brand text-white",
-  danger: "bg-danger text-white",
-  warning: "bg-warning text-white",
-  success: "bg-success text-white",
+  primary: "bg-brand-700 text-white",
+  danger: "bg-danger-600 text-white",
+  warning: "bg-warning-500 text-white",
+  success: "bg-success-500 text-white",
   white: "bg-white text-neutral-800 border-neutral-300",
+  secondary: "bg-neutral-100 border-neutral-50 text-neutral-800",
   basic: "bg-neutral-50 border-neutral-50 text-neutral-800",
@@ -148,4 +149,5 @@ transparent: "bg-none text-brand-800 border-transparent"
   white: "border-white text-white",
+  secondary: "border-neutral-300 text-neutral-800",
   basic: "border-neutral text-neutral-800",
-  transparent: "border-transparent text-brand-800"
+  transparent: "border-neutral-300 text-brand-800"
 };
@@ -158,2 +160,3 @@ var ghost = {
   white: "text-white",
+  secondary: "text-black",
   basic: "text-black",
@@ -168,2 +171,3 @@ transparent: "text-neutral"
   white: "border-white text-white",
+  secondary: "border-gray text-gray-800",
   basic: "border-gray text-gray-800",
@@ -178,2 +182,3 @@ transparent: "border-transparent text-brand"
   white: "text-white",
+  secondary: "text-white",
   basic: "text-white",
@@ -189,2 +194,3 @@ transparent: "text-white"
   white: "shadow-lg shadow-white/40 bg-white text-neutral-800",
+  secondary: "shadow-lg shadow-neutral/40 bg-neutral-50 text-neutral-800",
   basic: "shadow-lg shadow-neutral/40 bg-neutral-50 text-neutral-800"
@@ -198,2 +204,3 @@ };
   white: "bg-white text-neutral-800",
+  secondary: "bg-neutral-50 text-neutral-800",
   basic: "bg-neutral-50 text-neutral-800",
@@ -208,2 +215,3 @@ transparent: "bg-transparent text-brand-800"
   white: "bg-white text-white shadow-lg",
+  secondary: "bg-white text-neutral-800 shadow-lg",
   basic: "bg-white text-neutral-800 shadow-lg",
@@ -279,4 +287,4 @@ transparent: "bg-white text-brand shadow-lg"
       "p-[6px]",
-      // "px-2.5",
-      // "py-1",
+      "px-2.5",
+      "py-1",
       "w-full",
@@ -304,4 +312,4 @@ "inline-flex",
       default: {
-        base: "before:bg-neutral-900 before:shadow-sm",
-        content: "bg-neutral-800 text-white"
+        base: "before:bg-content1 before:shadow-sm",
+        content: "bg-content1"
       },
@@ -308,0 +316,0 @@ primary: {

dist/components/progress.d.ts

@@ -30,5 +30,2 @@ import * as tailwind_variants from 'tailwind-variants';
         };
-        secondary: {
-            indicator: string;
-        };
         success: {
@@ -91,2 +88,3 @@ indicator: string;
             indicator: string[];
+            floatingLabelWrapper: string;
         };
@@ -105,2 +103,16 @@ };
     };
+    floatingLabel: {
+        true: {
+            value: string;
+        };
+        false: {
+            floatingLabelWrapper: string;
+        };
+    };
+    floatingLabelPlacement: {
+        top: {};
+        bottom: {
+            progressBarWrapper: string;
+        };
+    };
 }, {
@@ -111,2 +123,4 @@ base: string;
     value: string;
+    floatingLabelWrapper: string;
+    progressBarWrapper: string;
     track: string;
@@ -124,5 +138,2 @@ indicator: string;
         };
-        secondary: {
-            indicator: string;
-        };
         success: {
@@ -185,2 +196,3 @@ indicator: string;
             indicator: string[];
+            floatingLabelWrapper: string;
         };
@@ -199,2 +211,16 @@ };
     };
+    floatingLabel: {
+        true: {
+            value: string;
+        };
+        false: {
+            floatingLabelWrapper: string;
+        };
+    };
+    floatingLabelPlacement: {
+        top: {};
+        bottom: {
+            progressBarWrapper: string;
+        };
+    };
 }, {
@@ -205,2 +231,4 @@ base: string;
     value: string;
+    floatingLabelWrapper: string;
+    progressBarWrapper: string;
     track: string;
@@ -216,5 +244,2 @@ indicator: string;
         };
-        secondary: {
-            indicator: string;
-        };
         success: {
@@ -277,2 +302,3 @@ indicator: string;
             indicator: string[];
+            floatingLabelWrapper: string;
         };
@@ -291,2 +317,16 @@ };
     };
+    floatingLabel: {
+        true: {
+            value: string;
+        };
+        false: {
+            floatingLabelWrapper: string;
+        };
+    };
+    floatingLabelPlacement: {
+        top: {};
+        bottom: {
+            progressBarWrapper: string;
+        };
+    };
 }, {
@@ -297,2 +337,4 @@ base: string;
     value: string;
+    floatingLabelWrapper: string;
+    progressBarWrapper: string;
     track: string;
@@ -299,0 +341,0 @@ indicator: string;

dist/components/progress.js

@@ -127,6 +127,8 @@ "use strict";
       base: "flex flex-col gap-2 w-full",
-      label: "",
+      label: "text-neutral-800",
       labelWrapper: "flex justify-between",
-      value: "",
-      track: "z-0 relative bg-default-300/50 overflow-hidden",
+      value: "text-neutral-800",
+      floatingLabelWrapper: "inline-block",
+      progressBarWrapper: "flex flex-col gap-2",
+      track: "z-0 relative bg-neutral/20 overflow-hidden",
       indicator: "h-full"
@@ -137,10 +139,7 @@ },
         default: {
-          indicator: "bg-default-400"
+          indicator: "bg-brand"
         },
         primary: {
-          indicator: "bg-primary"
+          indicator: "bg-brand"
         },
-        secondary: {
-          indicator: "bg-secondary"
-        },
         success: {
@@ -202,3 +201,4 @@ indicator: "bg-success"
         true: {
-          indicator: ["absolute", "w-full", "origin-left", "animate-indeterminate-bar"]
+          indicator: ["absolute", "w-full", "origin-left", "animate-indeterminate-bar"],
+          floatingLabelWrapper: "hidden"
         }
@@ -216,2 +216,16 @@ },
         }
+      },
+      floatingLabel: {
+        true: {
+          value: "hidden"
+        },
+        false: {
+          floatingLabelWrapper: "hidden"
+        }
+      },
+      floatingLabelPlacement: {
+        top: {},
+        bottom: {
+          progressBarWrapper: "flex-col-reverse"
+        }
       }
@@ -226,3 +240,5 @@ },
       isDisabled: false,
-      disableAnimation: false
+      disableAnimation: false,
+      floatingLabel: false,
+      floatingLabelPlacement: "top"
     },
@@ -229,0 +245,0 @@ compoundVariants: [

dist/components/select.d.ts

@@ -7,25 +7,12 @@ import * as tailwind_variants from 'tailwind-variants';
     variant: {
-        flat: {
+        ghost: {
             trigger: string[];
         };
-        faded: {
+        default: {
             trigger: string[];
-            value: string;
         };
-        bordered: {
+        dropdown: {
             trigger: string[];
         };
-        underlined: {
-            trigger: string[];
-            label: string;
-        };
     };
-    color: {
-        default: {};
-        primary: {};
-        secondary: {};
-        success: {};
-        warning: {};
-        danger: {};
-    };
     size: {
@@ -81,2 +68,12 @@ sm: {
     };
+    hasPlaceholder: {
+        false: {
+            label: string;
+        };
+    };
+    isFocused: {
+        true: {
+            trigger: string;
+        };
+    };
     isDisabled: {
@@ -93,4 +90,13 @@ true: {
             selectorIcon: string;
+            trigger: string[];
         };
     };
+    isSuccess: {
+        true: {
+            label: string;
+            value: string;
+            selectorIcon: string;
+            trigger: string[];
+        };
+    };
     isRequired: {
@@ -133,3 +139,3 @@ true: {
     mainWrapper: string;
-    trigger: string;
+    trigger: string[];
     innerWrapper: string;
@@ -147,25 +153,12 @@ selectorIcon: string;
     variant: {
-        flat: {
+        ghost: {
             trigger: string[];
         };
-        faded: {
+        default: {
             trigger: string[];
-            value: string;
         };
-        bordered: {
+        dropdown: {
             trigger: string[];
         };
-        underlined: {
-            trigger: string[];
-            label: string;
-        };
     };
-    color: {
-        default: {};
-        primary: {};
-        secondary: {};
-        success: {};
-        warning: {};
-        danger: {};
-    };
     size: {
@@ -221,2 +214,12 @@ sm: {
     };
+    hasPlaceholder: {
+        false: {
+            label: string;
+        };
+    };
+    isFocused: {
+        true: {
+            trigger: string;
+        };
+    };
     isDisabled: {
@@ -233,4 +236,13 @@ true: {
             selectorIcon: string;
+            trigger: string[];
         };
     };
+    isSuccess: {
+        true: {
+            label: string;
+            value: string;
+            selectorIcon: string;
+            trigger: string[];
+        };
+    };
     isRequired: {
@@ -271,25 +283,12 @@ true: {
     variant: {
-        flat: {
+        ghost: {
             trigger: string[];
         };
-        faded: {
+        default: {
             trigger: string[];
-            value: string;
         };
-        bordered: {
+        dropdown: {
             trigger: string[];
         };
-        underlined: {
-            trigger: string[];
-            label: string;
-        };
     };
-    color: {
-        default: {};
-        primary: {};
-        secondary: {};
-        success: {};
-        warning: {};
-        danger: {};
-    };
     size: {
@@ -345,2 +344,12 @@ sm: {
     };
+    hasPlaceholder: {
+        false: {
+            label: string;
+        };
+    };
+    isFocused: {
+        true: {
+            trigger: string;
+        };
+    };
     isDisabled: {
@@ -357,4 +366,13 @@ true: {
             selectorIcon: string;
+            trigger: string[];
         };
     };
+    isSuccess: {
+        true: {
+            label: string;
+            value: string;
+            selectorIcon: string;
+            trigger: string[];
+        };
+    };
     isRequired: {
@@ -395,25 +413,12 @@ true: {
     variant: {
-        flat: {
+        ghost: {
             trigger: string[];
         };
-        faded: {
+        default: {
             trigger: string[];
-            value: string;
         };
-        bordered: {
+        dropdown: {
             trigger: string[];
         };
-        underlined: {
-            trigger: string[];
-            label: string;
-        };
     };
-    color: {
-        default: {};
-        primary: {};
-        secondary: {};
-        success: {};
-        warning: {};
-        danger: {};
-    };
     size: {
@@ -469,2 +474,12 @@ sm: {
     };
+    hasPlaceholder: {
+        false: {
+            label: string;
+        };
+    };
+    isFocused: {
+        true: {
+            trigger: string;
+        };
+    };
     isDisabled: {
@@ -481,4 +496,13 @@ true: {
             selectorIcon: string;
+            trigger: string[];
         };
     };
+    isSuccess: {
+        true: {
+            label: string;
+            value: string;
+            selectorIcon: string;
+            trigger: string[];
+        };
+    };
     isRequired: {
@@ -521,3 +545,3 @@ true: {
     mainWrapper: string;
-    trigger: string;
+    trigger: string[];
     innerWrapper: string;
@@ -535,25 +559,12 @@ selectorIcon: string;
     variant: {
-        flat: {
+        ghost: {
             trigger: string[];
         };
-        faded: {
+        default: {
             trigger: string[];
-            value: string;
         };
-        bordered: {
+        dropdown: {
             trigger: string[];
         };
-        underlined: {
-            trigger: string[];
-            label: string;
-        };
     };
-    color: {
-        default: {};
-        primary: {};
-        secondary: {};
-        success: {};
-        warning: {};
-        danger: {};
-    };
     size: {
@@ -609,2 +620,12 @@ sm: {
     };
+    hasPlaceholder: {
+        false: {
+            label: string;
+        };
+    };
+    isFocused: {
+        true: {
+            trigger: string;
+        };
+    };
     isDisabled: {
@@ -621,4 +642,13 @@ true: {
             selectorIcon: string;
+            trigger: string[];
         };
     };
+    isSuccess: {
+        true: {
+            label: string;
+            value: string;
+            selectorIcon: string;
+            trigger: string[];
+        };
+    };
     isRequired: {
@@ -661,3 +691,3 @@ true: {
     mainWrapper: string;
-    trigger: string;
+    trigger: string[];
     innerWrapper: string;
@@ -675,25 +705,12 @@ selectorIcon: string;
     variant: {
-        flat: {
+        ghost: {
             trigger: string[];
         };
-        faded: {
+        default: {
             trigger: string[];
-            value: string;
         };
-        bordered: {
+        dropdown: {
             trigger: string[];
         };
-        underlined: {
-            trigger: string[];
-            label: string;
-        };
     };
-    color: {
-        default: {};
-        primary: {};
-        secondary: {};
-        success: {};
-        warning: {};
-        danger: {};
-    };
     size: {
@@ -749,2 +766,12 @@ sm: {
     };
+    hasPlaceholder: {
+        false: {
+            label: string;
+        };
+    };
+    isFocused: {
+        true: {
+            trigger: string;
+        };
+    };
     isDisabled: {
@@ -761,4 +788,13 @@ true: {
             selectorIcon: string;
+            trigger: string[];
         };
     };
+    isSuccess: {
+        true: {
+            label: string;
+            value: string;
+            selectorIcon: string;
+            trigger: string[];
+        };
+    };
     isRequired: {
@@ -799,25 +835,12 @@ true: {
     variant: {
-        flat: {
+        ghost: {
             trigger: string[];
         };
-        faded: {
+        default: {
             trigger: string[];
-            value: string;
         };
-        bordered: {
+        dropdown: {
             trigger: string[];
         };
-        underlined: {
-            trigger: string[];
-            label: string;
-        };
     };
-    color: {
-        default: {};
-        primary: {};
-        secondary: {};
-        success: {};
-        warning: {};
-        danger: {};
-    };
     size: {
@@ -873,2 +896,12 @@ sm: {
     };
+    hasPlaceholder: {
+        false: {
+            label: string;
+        };
+    };
+    isFocused: {
+        true: {
+            trigger: string;
+        };
+    };
     isDisabled: {
@@ -885,4 +918,13 @@ true: {
             selectorIcon: string;
+            trigger: string[];
         };
     };
+    isSuccess: {
+        true: {
+            label: string;
+            value: string;
+            selectorIcon: string;
+            trigger: string[];
+        };
+    };
     isRequired: {
@@ -889,0 +931,0 @@ true: {

dist/components/select.js

@@ -142,16 +142,35 @@ "use strict";
       "text-sm",
-      "text-foreground-500",
+      "text-neutral-800",
+      "font-semibold",
       "pointer-events-none"
     ],
     mainWrapper: "w-full flex flex-col",
-    trigger: "relative px-3 gap-3 w-full inline-flex flex-row items-center shadow-sm outline-none tap-highlight-transparent",
-    innerWrapper: "inline-flex h-full w-[calc(100%_-_theme(spacing.unit-6))] min-h-unit-4 items-center gap-1.5 box-border",
-    selectorIcon: "absolute right-3 w-unit-4 h-unit-4",
+    trigger: [
+      "relative",
+      "px-3",
+      "gap-3",
+      "w-full",
+      "inline-flex",
+      "flex-row",
+      "items-center",
+      "shadow-sm",
+      "outline-none",
+      "tap-highlight-transparent"
+    ],
+    innerWrapper: "inline-flex h-full w-[calc(100%_-_theme(spacing.unit-6))] min-h-unit-4 items-center gap-1.5 box-border text-neutral-800 text-lg",
+    selectorIcon: "absolute right-3 w-unit-6 h-unit-6",
     spinner: "absolute right-3",
-    value: ["text-foreground-500", "font-normal", "w-full", "text-left"],
-    listboxWrapper: "scroll-py-6 max-h-64 w-full",
-    listbox: "",
-    popoverContent: "w-full p-1 overflow-hidden",
+    value: [
+      "text-neutral-500",
+      "font-normal",
+      "w-full",
+      "min-w-12",
+      "text-left",
+      "group-data-[has-value=true]:text-neutral-800"
+    ],
+    listboxWrapper: "scroll-py-6 max-h-64 w-full overflow-y-auto",
+    listbox: "rounded-none",
+    popoverContent: "w-full p-0 overflow-hidden min-w-12",
     helperWrapper: "p-1 flex relative flex-col gap-1.5",
-    description: "text-xs text-foreground-400",
+    description: "z-0 text-xs text-neutral-400",
     errorMessage: "text-xs text-danger"
@@ -161,63 +180,27 @@ },
     variant: {
-      flat: {
+      ghost: {
         trigger: [
-          "bg-default-100",
-          "data-[hover=true]:bg-default-200",
-          "group-data-[focus=true]:bg-default-100"
+          "bg-neutral-200",
+          "data-[hover=true]:border-[1px]",
+          "data-[hover=true]:border-brand",
+          "group-data-[focus=true]:bg-neutral-100"
         ]
       },
-      faded: {
+      default: {
         trigger: [
-          "bg-default-100",
-          "border-md",
-          "border-default-200",
-          "data-[hover=true]:border-default-400"
-        ],
-        value: "group-data-[has-value=true]:text-default-foreground"
+          "border-[1px]",
+          "border-neutral-300",
+          "data-[hover=true]:border-neutral-400",
+          "data-[focus=true]:border-brand"
+        ]
       },
-      bordered: {
+      dropdown: {
         trigger: [
-          "border-md",
-          "border-default-200",
-          "data-[hover=true]:border-default-400",
-          "data-[open=true]:border-default-foreground",
-          "data-[focus=true]:border-default-foreground",
-          "data-[focus=true]:border-default-foreground"
+          "border-[1px]",
+          "border-neutral-200",
+          "data-[hover=true]:border-brand/60",
+          "group-data-[focus=true]:bg-neutral-100"
         ]
-      },
-      underlined: {
-        trigger: [
-          "!px-1",
-          "!pb-0",
-          "!gap-0",
-          "relative",
-          "box-border",
-          "border-b-md",
-          "shadow-[0_1px_0px_0_rgba(0,0,0,0.05)]",
-          "border-default-200",
-          "!rounded-none",
-          "hover:border-default-300",
-          "after:content-['']",
-          "after:w-0",
-          "after:origin-center",
-          "after:bg-default-foreground",
-          "after:absolute",
-          "after:left-1/2",
-          "after:-translate-x-1/2",
-          "after:-bottom-[2px]",
-          "after:h-[2px]",
-          "data-[open=true]:after:w-full",
-          "data-[focus=true]:after:w-full"
-        ],
-        label: "group-data-[filled=true]:text-foreground"
       }
     },
-    color: {
-      default: {},
-      primary: {},
-      secondary: {},
-      success: {},
-      warning: {},
-      danger: {}
-    },
     size: {
@@ -227,3 +210,3 @@ sm: {
         trigger: "h-unit-8 min-h-unit-8 px-2 rounded-sm",
-        value: "text-sm"
+        value: "text-xs"
       },
@@ -261,4 +244,4 @@ md: {
       "outside-left": {
-        base: "flex-row items-center flex-nowrap items-start",
-        label: "relative pr-2 text-foreground"
+        base: "flex-row items-center flex-nowrap items-center",
+        label: "relative pr-2 text-neutral"
       },
@@ -275,6 +258,16 @@ inside: {
     },
+    hasPlaceholder: {
+      false: {
+        label: "text-neutral-500 font-normal group-data-[filled=true]:text-neutral-800 group-data-[filled=true]:font-semibold"
+      }
+    },
+    isFocused: {
+      true: {
+        trigger: "data-[hover=true]:border-brand"
+      }
+    },
     isDisabled: {
       true: {
         base: "opacity-disabled pointer-events-none",
-        trigger: "pointer-events-none"
+        trigger: "pointer-events-none bg-neutral-300"
       }
@@ -285,6 +278,15 @@ },
         label: "!text-danger",
-        value: "!text-danger",
-        selectorIcon: "text-danger"
+        value: "!text-neutral-500",
+        selectorIcon: "text-danger",
+        trigger: ["!border-danger", "data-[hover=true]:border-danger"]
       }
     },
+    isSuccess: {
+      true: {
+        label: "!text-success",
+        value: "!text-neutral-500",
+        selectorIcon: "text-success",
+        trigger: ["!border-success", "data-[hover=true]:border-success"]
+      }
+    },
     isRequired: {
@@ -332,6 +334,5 @@ true: {
   defaultVariants: {
-    variant: "flat",
-    color: "default",
+    variant: "default",
     size: "md",
-    labelPlacement: "inside",
+    labelPlacement: "outside",
     fullWidth: true,
@@ -344,218 +345,48 @@ isDisabled: false,
   compoundVariants: [
-    // flat & color
+    // ghost & color
     {
-      variant: "flat",
-      color: "default",
+      variant: "ghost",
       class: {
-        value: "group-data-[has-value=true]:text-default-foreground"
-      }
-    },
-    {
-      variant: "flat",
-      color: "primary",
-      class: {
         trigger: [
-          "bg-primary-50",
-          "text-primary",
-          "data-[hover=true]:bg-primary-100",
-          "group-data-[focus=true]:bg-primary-50"
+          "shadow-none",
+          // "data-[hover=false]:border-none",
+          "bg-neutral-200",
+          "data-[hover=true]:border-brand",
+          "group-data-[focus=true]:bg-neutral-50"
         ],
-        value: "text-primary",
-        label: "text-primary"
+        value: "font-semibold",
+        label: "font-semibold"
       }
     },
+    // default & color
     {
-      variant: "flat",
-      color: "secondary",
+      variant: "default",
       class: {
-        trigger: [
-          "bg-secondary-50",
-          "text-secondary",
-          "data-[hover=true]:bg-secondary-100",
-          "group-data-[focus=true]:bg-secondary-50"
-        ],
-        value: "text-secondary",
-        label: "text-secondary"
+        trigger: ["data-[focus=true]:ring-4", "data-[focus=true]:ring-brand/60"]
       }
     },
+    // dropdown & color
     {
-      variant: "flat",
-      color: "success",
+      variant: "dropdown",
       class: {
+        base: "max-w-fit",
+        innerWrapper: "w-fit min-w-12",
         trigger: [
-          "bg-success-50",
-          "text-success-600",
-          "dark:text-success",
-          "data-[hover=true]:bg-success-100",
-          "group-data-[focus=true]:bg-success-50"
+          "w-fit",
+          "px-1",
+          "shadow-none",
+          "border-neutral-200",
+          "data-[hover=true]:border-brand",
+          "data-[focus=true]:border-brand",
+          "data-[open=true]:border-brand"
         ],
-        value: "text-success-600 dark:text-success",
-        label: "text-success-600 dark:text-success"
+        selectorIcon: "right-1",
+        value: "min-w-fit font-semibold",
+        label: "min-w-fit font-semibold",
+        popoverContent: "w-fit min-w-0"
       }
     },
-    {
-      variant: "flat",
-      color: "warning",
-      class: {
-        trigger: [
-          "bg-warning-50",
-          "text-warning-600",
-          "dark:text-warning",
-          "data-[hover=true]:bg-warning-100",
-          "group-data-[focus=true]:bg-warning-50"
-        ],
-        value: "text-warning-600 dark:text-warning",
-        label: "text-warning-600 dark:text-warning"
-      }
-    },
-    {
-      variant: "flat",
-      color: "danger",
-      class: {
-        trigger: [
-          "bg-danger-50",
-          "text-danger",
-          "dark:text-danger-500",
-          "data-[hover=true]:bg-danger-100",
-          "group-data-[focus=true]:bg-danger-50"
-        ],
-        value: "text-danger dark:text-danger-500",
-        label: "text-danger dark:text-danger-500"
-      }
-    },
-    // faded & color
-    {
-      variant: "faded",
-      color: "primary",
-      class: {
-        trigger: "data-[hover=true]:border-primary",
-        label: "text-primary"
-      }
-    },
-    {
-      variant: "faded",
-      color: "secondary",
-      class: {
-        trigger: "data-[hover=true]:border-secondary",
-        label: "text-secondary"
-      }
-    },
-    {
-      variant: "faded",
-      color: "success",
-      class: {
-        trigger: "data-[hover=true]:border-success",
-        label: "text-success"
-      }
-    },
-    {
-      variant: "faded",
-      color: "warning",
-      class: {
-        trigger: "data-[hover=true]:border-warning",
-        label: "text-warning"
-      }
-    },
-    {
-      variant: "faded",
-      color: "danger",
-      class: {
-        trigger: "data-[hover=true]:border-danger",
-        label: "text-danger"
-      }
-    },
-    // underlined & color
-    // underlined & color
-    {
-      variant: "underlined",
-      color: "default",
-      class: {
-        value: "group-data-[has-value=true]:text-foreground"
-      }
-    },
-    {
-      variant: "underlined",
-      color: "primary",
-      class: {
-        trigger: "after:bg-primary",
-        label: "text-primary"
-      }
-    },
-    {
-      variant: "underlined",
-      color: "secondary",
-      class: {
-        trigger: "after:bg-secondary",
-        label: "text-secondary"
-      }
-    },
-    {
-      variant: "underlined",
-      color: "success",
-      class: {
-        trigger: "after:bg-success",
-        label: "text-success"
-      }
-    },
-    {
-      variant: "underlined",
-      color: "warning",
-      class: {
-        trigger: "after:bg-warning",
-        label: "text-warning"
-      }
-    },
-    {
-      variant: "underlined",
-      color: "danger",
-      class: {
-        trigger: "after:bg-danger",
-        label: "text-danger"
-      }
-    },
-    // bordered & color
-    {
-      variant: "bordered",
-      color: "primary",
-      class: {
-        trigger: ["data-[open=true]:border-primary", "data-[focus=true]:border-primary"],
-        label: "text-primary"
-      }
-    },
-    {
-      variant: "bordered",
-      color: "secondary",
-      class: {
-        trigger: ["data-[open=true]:border-secondary", "data-[focus=true]:border-secondary"],
-        label: "text-secondary"
-      }
-    },
-    {
-      variant: "bordered",
-      color: "success",
-      class: {
-        trigger: ["data-[open=true]:border-success", "data-[focus=true]:border-success"],
-        label: "text-success"
-      }
-    },
-    {
-      variant: "bordered",
-      color: "warning",
-      class: {
-        trigger: ["data-[open=true]:border-warning", "data-[focus=true]:border-warning"],
-        label: "text-warning"
-      }
-    },
-    {
-      variant: "bordered",
-      color: "danger",
-      class: {
-        trigger: ["data-[open=true]:border-danger", "data-[focus=true]:border-danger"],
-        label: "text-danger"
-      }
-    },
     // labelPlacement=outside & default
     {
       labelPlacement: "inside",
-      color: "default",
       class: {
@@ -568,5 +399,4 @@ label: "group-data-[filled=true]:text-default-600"
       labelPlacement: "outside",
-      color: "default",
       class: {
-        label: "group-data-[filled=true]:text-foreground"
+        label: "group-data-[filled=true]:text-neutral"
       }
@@ -599,3 +429,3 @@ },
       disableAnimation: false,
-      variant: ["faded", "bordered"],
+      variant: "default",
       class: {
@@ -605,13 +435,6 @@ trigger: "transition-colors motion-reduce:transition-none"
     },
+    // flat
     {
-      disableAnimation: false,
-      variant: "underlined",
+      variant: "ghost",
       class: {
-        trigger: "after:transition-width motion-reduce:after:transition-none"
-      }
-    },
-    // flat & faded
-    {
-      variant: ["flat", "faded"],
-      class: {
         trigger: [
@@ -626,3 +449,3 @@ // focus ring
       isInvalid: true,
-      variant: "flat",
+      variant: "ghost",
       class: {
@@ -638,14 +461,30 @@ trigger: [
       isInvalid: true,
-      variant: "bordered",
+      variant: "default",
       class: {
-        trigger: "!border-danger group-data-[focus=true]:border-danger"
+        trigger: ["!border-danger", "data-[focus=true]:ring-4", "data-[focus=true]:ring-danger/60"]
       }
     },
+    // isSuccess & variant
     {
-      isInvalid: true,
-      variant: "underlined",
+      isSuccess: true,
+      variant: "ghost",
       class: {
-        trigger: "after:bg-danger"
+        trigger: [
+          "bg-success-50",
+          "data-[hover=true]:bg-success-100",
+          "group-data-[focus=true]:bg-success-50"
+        ]
       }
     },
+    {
+      isSuccess: true,
+      variant: "default",
+      class: {
+        trigger: [
+          "!border-success",
+          "data-[focus=true]:ring-4",
+          "data-[focus=true]:ring-success/60"
+        ]
+      }
+    },
     // size & labelPlacement
@@ -734,6 +573,6 @@ {
     },
-    // inside & size & [faded, bordered]
+    // inside & size
     {
       labelPlacement: "inside",
-      variant: ["faded", "bordered"],
+      variant: "default",
       isMultiline: false,
@@ -749,3 +588,3 @@ size: "sm",
       labelPlacement: "inside",
-      variant: ["faded", "bordered"],
+      variant: "default",
       isMultiline: false,
@@ -761,3 +600,3 @@ size: "md",
       labelPlacement: "inside",
-      variant: ["faded", "bordered"],
+      variant: "default",
       isMultiline: false,
@@ -772,33 +611,2 @@ size: "lg",
     },
-    // inside & size & underlined
-    {
-      labelPlacement: "inside",
-      variant: "underlined",
-      isMultiline: false,
-      size: "sm",
-      class: {
-        label: ["group-data-[filled=true]:-translate-y-[calc(50%_+_theme(fontSize.xs)/2_-_5px)]"]
-      }
-    },
-    {
-      labelPlacement: "inside",
-      variant: "underlined",
-      isMultiline: false,
-      size: "md",
-      class: {
-        label: ["group-data-[filled=true]:-translate-y-[calc(50%_+_theme(fontSize.sm)/2_-_3.5px)]"]
-      }
-    },
-    {
-      labelPlacement: "inside",
-      variant: "underlined",
-      isMultiline: false,
-      size: "lg",
-      class: {
-        label: [
-          "text-md",
-          "group-data-[filled=true]:-translate-y-[calc(50%_+_theme(fontSize.sm)/2_-_4px)]"
-        ]
-      }
-    },
     // outside & size
@@ -813,5 +621,5 @@ {
           "text-xs",
-          "group-data-[filled=true]:-translate-y-[calc(100%_+_theme(fontSize.xs)/2_+_16px)]"
+          "group-data-[filled=true]:-translate-y-[calc(100%_+_theme(fontSize.xs)/2_+_12px)]"
         ],
-        base: "data-[has-label=true]:mt-[calc(theme(fontSize.sm)_+_8px)]"
+        base: "data-[has-label=true]:mt-[calc(theme(fontSize.sm)_+_4px)]"
       }
@@ -827,5 +635,5 @@ },
           "text-sm",
-          "group-data-[filled=true]:-translate-y-[calc(100%_+_theme(fontSize.sm)/2_+_20px)]"
+          "group-data-[filled=true]:-translate-y-[calc(100%_+_theme(fontSize.sm)/2_+_16px)]"
         ],
-        base: "data-[has-label=true]:mt-[calc(theme(fontSize.sm)_+_10px)]`"
+        base: "data-[has-label=true]:mt-[calc(theme(fontSize.sm)_+_8px)]"
       }
@@ -841,3 +649,3 @@ },
           "text-md",
-          "group-data-[filled=true]:-translate-y-[calc(100%_+_theme(fontSize.sm)/2_+_24px)]"
+          "group-data-[filled=true]:-translate-y-[calc(100%_+_theme(fontSize.sm)/2_+_20px)]"
         ],
@@ -857,2 +665,3 @@ base: "data-[has-label=true]:mt-[calc(theme(fontSize.sm)_+_12px)]"
     {
+      variant: ["default", "ghost"],
       labelPlacement: ["inside", "outside"],
@@ -862,2 +671,10 @@ class: {
       }
+    },
+    // isDisabled & ghost
+    {
+      isDisabled: true,
+      variant: ["ghost", "dropdown"],
+      class: {
+        trigger: "bg-neutral-300"
+      }
     }
@@ -864,0 +681,0 @@ ]

dist/components/spinner.d.ts

@@ -12,3 +12,3 @@ import * as tailwind_variants from 'tailwind-variants';
  * <div className={base())}>
- *    <i className={circle1()}/>
+ *    <i className={circle()}/>
  *    <i className={circle2()}/>
@@ -20,6 +20,8 @@ *    <span className={label()}/>
     size: {
+        xs: {
+            wrapper: string;
+            label: string;
+        };
         sm: {
             wrapper: string;
-            circle1: string;
-            circle2: string;
             label: string;
@@ -29,4 +31,2 @@ };
             wrapper: string;
-            circle1: string;
-            circle2: string;
             label: string;
@@ -36,4 +36,2 @@ };
             wrapper: string;
-            circle1: string;
-            circle2: string;
             label: string;
@@ -44,53 +42,30 @@ };
         current: {
-            circle1: string;
-            circle2: string;
+            circle: string;
         };
         white: {
-            circle1: string;
-            circle2: string;
+            circle: string;
         };
         default: {
-            circle1: string;
-            circle2: string;
+            circle: string;
         };
         primary: {
-            circle1: string;
-            circle2: string;
+            circle: string;
         };
-        secondary: {
-            circle1: string;
-            circle2: string;
-        };
         success: {
-            circle1: string;
-            circle2: string;
+            circle: string;
         };
         warning: {
-            circle1: string;
-            circle2: string;
+            circle: string;
         };
         danger: {
-            circle1: string;
-            circle2: string;
+            circle: string;
         };
     };
-    labelColor: {
-        foreground: {
-            label: string;
+    isProgress: {
+        true: {
+            circleBackground: string;
         };
-        primary: {
-            label: string;
+        false: {
+            circle: string;
         };
-        secondary: {
-            label: string;
-        };
-        success: {
-            label: string;
-        };
-        warning: {
-            label: string;
-        };
-        danger: {
-            label: string;
-        };
     };
@@ -100,11 +75,13 @@ }, {
     wrapper: string;
-    circle1: string[];
-    circle2: string[];
+    circle: string;
+    circleBackground: string;
     label: string;
 }, undefined, tailwind_variants_dist_config.TVConfig<{
     size: {
+        xs: {
+            wrapper: string;
+            label: string;
+        };
         sm: {
             wrapper: string;
-            circle1: string;
-            circle2: string;
             label: string;
@@ -114,4 +91,2 @@ };
             wrapper: string;
-            circle1: string;
-            circle2: string;
             label: string;
@@ -121,4 +96,2 @@ };
             wrapper: string;
-            circle1: string;
-            circle2: string;
             label: string;
@@ -129,60 +102,39 @@ };
         current: {
-            circle1: string;
-            circle2: string;
+            circle: string;
         };
         white: {
-            circle1: string;
-            circle2: string;
+            circle: string;
         };
         default: {
-            circle1: string;
-            circle2: string;
+            circle: string;
         };
         primary: {
-            circle1: string;
-            circle2: string;
+            circle: string;
         };
-        secondary: {
-            circle1: string;
-            circle2: string;
-        };
         success: {
-            circle1: string;
-            circle2: string;
+            circle: string;
         };
         warning: {
-            circle1: string;
-            circle2: string;
+            circle: string;
         };
         danger: {
-            circle1: string;
-            circle2: string;
+            circle: string;
         };
     };
-    labelColor: {
-        foreground: {
-            label: string;
+    isProgress: {
+        true: {
+            circleBackground: string;
         };
-        primary: {
-            label: string;
+        false: {
+            circle: string;
         };
-        secondary: {
-            label: string;
-        };
-        success: {
-            label: string;
-        };
-        warning: {
-            label: string;
-        };
-        danger: {
-            label: string;
-        };
     };
 }, {
     size: {
+        xs: {
+            wrapper: string;
+            label: string;
+        };
         sm: {
             wrapper: string;
-            circle1: string;
-            circle2: string;
             label: string;
@@ -192,4 +144,2 @@ };
             wrapper: string;
-            circle1: string;
-            circle2: string;
             label: string;
@@ -199,4 +149,2 @@ };
             wrapper: string;
-            circle1: string;
-            circle2: string;
             label: string;
@@ -207,60 +155,39 @@ };
         current: {
-            circle1: string;
-            circle2: string;
+            circle: string;
         };
         white: {
-            circle1: string;
-            circle2: string;
+            circle: string;
         };
         default: {
-            circle1: string;
-            circle2: string;
+            circle: string;
         };
         primary: {
-            circle1: string;
-            circle2: string;
+            circle: string;
         };
-        secondary: {
-            circle1: string;
-            circle2: string;
-        };
         success: {
-            circle1: string;
-            circle2: string;
+            circle: string;
         };
         warning: {
-            circle1: string;
-            circle2: string;
+            circle: string;
         };
         danger: {
-            circle1: string;
-            circle2: string;
+            circle: string;
         };
     };
-    labelColor: {
-        foreground: {
-            label: string;
+    isProgress: {
+        true: {
+            circleBackground: string;
         };
-        primary: {
-            label: string;
+        false: {
+            circle: string;
         };
-        secondary: {
-            label: string;
-        };
-        success: {
-            label: string;
-        };
-        warning: {
-            label: string;
-        };
-        danger: {
-            label: string;
-        };
     };
 }>, {
     size: {
+        xs: {
+            wrapper: string;
+            label: string;
+        };
         sm: {
             wrapper: string;
-            circle1: string;
-            circle2: string;
             label: string;
@@ -270,4 +197,2 @@ };
             wrapper: string;
-            circle1: string;
-            circle2: string;
             label: string;
@@ -277,4 +202,2 @@ };
             wrapper: string;
-            circle1: string;
-            circle2: string;
             label: string;
@@ -285,53 +208,30 @@ };
         current: {
-            circle1: string;
-            circle2: string;
+            circle: string;
         };
         white: {
-            circle1: string;
-            circle2: string;
+            circle: string;
         };
         default: {
-            circle1: string;
-            circle2: string;
+            circle: string;
         };
         primary: {
-            circle1: string;
-            circle2: string;
+            circle: string;
         };
-        secondary: {
-            circle1: string;
-            circle2: string;
-        };
         success: {
-            circle1: string;
-            circle2: string;
+            circle: string;
         };
         warning: {
-            circle1: string;
-            circle2: string;
+            circle: string;
         };
         danger: {
-            circle1: string;
-            circle2: string;
+            circle: string;
         };
     };
-    labelColor: {
-        foreground: {
-            label: string;
+    isProgress: {
+        true: {
+            circleBackground: string;
         };
-        primary: {
-            label: string;
+        false: {
+            circle: string;
         };
-        secondary: {
-            label: string;
-        };
-        success: {
-            label: string;
-        };
-        warning: {
-            label: string;
-        };
-        danger: {
-            label: string;
-        };
     };
@@ -341,11 +241,13 @@ }, {
     wrapper: string;
-    circle1: string[];
-    circle2: string[];
+    circle: string;
+    circleBackground: string;
     label: string;
 }, tailwind_variants.TVReturnType<{
     size: {
+        xs: {
+            wrapper: string;
+            label: string;
+        };
         sm: {
             wrapper: string;
-            circle1: string;
-            circle2: string;
             label: string;
@@ -355,4 +257,2 @@ };
             wrapper: string;
-            circle1: string;
-            circle2: string;
             label: string;
@@ -362,4 +262,2 @@ };
             wrapper: string;
-            circle1: string;
-            circle2: string;
             label: string;
@@ -370,53 +268,30 @@ };
         current: {
-            circle1: string;
-            circle2: string;
+            circle: string;
         };
         white: {
-            circle1: string;
-            circle2: string;
+            circle: string;
         };
         default: {
-            circle1: string;
-            circle2: string;
+            circle: string;
         };
         primary: {
-            circle1: string;
-            circle2: string;
+            circle: string;
         };
-        secondary: {
-            circle1: string;
-            circle2: string;
-        };
         success: {
-            circle1: string;
-            circle2: string;
+            circle: string;
         };
         warning: {
-            circle1: string;
-            circle2: string;
+            circle: string;
         };
         danger: {
-            circle1: string;
-            circle2: string;
+            circle: string;
         };
     };
-    labelColor: {
-        foreground: {
-            label: string;
+    isProgress: {
+        true: {
+            circleBackground: string;
         };
-        primary: {
-            label: string;
+        false: {
+            circle: string;
         };
-        secondary: {
-            label: string;
-        };
-        success: {
-            label: string;
-        };
-        warning: {
-            label: string;
-        };
-        danger: {
-            label: string;
-        };
     };
@@ -426,11 +301,13 @@ }, {
     wrapper: string;
-    circle1: string[];
-    circle2: string[];
+    circle: string;
+    circleBackground: string;
     label: string;
 }, undefined, tailwind_variants_dist_config.TVConfig<{
     size: {
+        xs: {
+            wrapper: string;
+            label: string;
+        };
         sm: {
             wrapper: string;
-            circle1: string;
-            circle2: string;
             label: string;
@@ -440,4 +317,2 @@ };
             wrapper: string;
-            circle1: string;
-            circle2: string;
             label: string;
@@ -447,4 +322,2 @@ };
             wrapper: string;
-            circle1: string;
-            circle2: string;
             label: string;
@@ -455,60 +328,39 @@ };
         current: {
-            circle1: string;
-            circle2: string;
+            circle: string;
         };
         white: {
-            circle1: string;
-            circle2: string;
+            circle: string;
         };
         default: {
-            circle1: string;
-            circle2: string;
+            circle: string;
         };
         primary: {
-            circle1: string;
-            circle2: string;
+            circle: string;
         };
-        secondary: {
-            circle1: string;
-            circle2: string;
-        };
         success: {
-            circle1: string;
-            circle2: string;
+            circle: string;
         };
         warning: {
-            circle1: string;
-            circle2: string;
+            circle: string;
         };
         danger: {
-            circle1: string;
-            circle2: string;
+            circle: string;
         };
     };
-    labelColor: {
-        foreground: {
-            label: string;
+    isProgress: {
+        true: {
+            circleBackground: string;
         };
-        primary: {
-            label: string;
+        false: {
+            circle: string;
         };
-        secondary: {
-            label: string;
-        };
-        success: {
-            label: string;
-        };
-        warning: {
-            label: string;
-        };
-        danger: {
-            label: string;
-        };
     };
 }, {
     size: {
+        xs: {
+            wrapper: string;
+            label: string;
+        };
         sm: {
             wrapper: string;
-            circle1: string;
-            circle2: string;
             label: string;
@@ -518,4 +370,2 @@ };
             wrapper: string;
-            circle1: string;
-            circle2: string;
             label: string;
@@ -525,4 +375,2 @@ };
             wrapper: string;
-            circle1: string;
-            circle2: string;
             label: string;
@@ -533,53 +381,30 @@ };
         current: {
-            circle1: string;
-            circle2: string;
+            circle: string;
         };
         white: {
-            circle1: string;
-            circle2: string;
+            circle: string;
         };
         default: {
-            circle1: string;
-            circle2: string;
+            circle: string;
         };
         primary: {
-            circle1: string;
-            circle2: string;
+            circle: string;
         };
-        secondary: {
-            circle1: string;
-            circle2: string;
-        };
         success: {
-            circle1: string;
-            circle2: string;
+            circle: string;
         };
         warning: {
-            circle1: string;
-            circle2: string;
+            circle: string;
         };
         danger: {
-            circle1: string;
-            circle2: string;
+            circle: string;
         };
     };
-    labelColor: {
-        foreground: {
-            label: string;
+    isProgress: {
+        true: {
+            circleBackground: string;
         };
-        primary: {
-            label: string;
+        false: {
+            circle: string;
         };
-        secondary: {
-            label: string;
-        };
-        success: {
-            label: string;
-        };
-        warning: {
-            label: string;
-        };
-        danger: {
-            label: string;
-        };
     };
@@ -586,0 +411,0 @@ }>, unknown, unknown, undefined>>;

dist/components/spinner.js

@@ -127,47 +127,22 @@ "use strict";
     wrapper: "relative flex",
-    circle1: [
-      "absolute",
-      "w-full",
-      "h-full",
-      "rounded-full",
-      "animate-spinner-ease-spin",
-      "border-2",
-      "border-solid",
-      "border-t-transparent",
-      "border-l-transparent",
-      "border-r-transparent"
-    ],
-    circle2: [
-      "absolute",
-      "w-full",
-      "h-full",
-      "rounded-full",
-      "opacity-75",
-      "animate-spinner-linear-spin",
-      "border-2",
-      "border-dotted",
-      "border-t-transparent",
-      "border-l-transparent",
-      "border-r-transparent"
-    ],
-    label: "text-foreground dark:text-foreground-dark font-regular"
+    circle: "progress-spinner stroke-current",
+    circleBackground: "text-neutral-200 stroke-current",
+    label: "text-neutral-800 font-regular"
   },
   variants: {
     size: {
+      xs: {
+        wrapper: "w-8 h-8",
+        label: "text-xs"
+      },
       sm: {
-        wrapper: "w-5 h-5",
-        circle1: "border-2",
-        circle2: "border-2",
+        wrapper: "w-10 h-10",
         label: "text-sm"
       },
       md: {
-        wrapper: "w-8 h-8",
-        circle1: "border-3",
-        circle2: "border-3",
+        wrapper: "w-12 h-12",
         label: "text-md"
       },
       lg: {
-        wrapper: "w-10 h-10",
-        circle1: "border-3",
-        circle2: "border-3",
+        wrapper: "w-16 h-16",
         label: "text-lg"
@@ -178,52 +153,29 @@ }
       current: {
-        circle1: "border-b-current",
-        circle2: "border-b-current"
+        circle: "text-current"
       },
       white: {
-        circle1: "border-b-white",
-        circle2: "border-b-white"
+        circle: "text-white"
       },
       default: {
-        circle1: "border-b-default",
-        circle2: "border-b-default"
+        circle: "text-neutral-800"
       },
       primary: {
-        circle1: "border-b-primary",
-        circle2: "border-b-primary"
+        circle: "text-brand"
       },
-      secondary: {
-        circle1: "border-b-secondary",
-        circle2: "border-b-secondary"
-      },
       success: {
-        circle1: "border-b-success",
-        circle2: "border-b-success"
+        circle: "text-success"
       },
       warning: {
-        circle1: "border-b-warning",
-        circle2: "border-b-warning"
+        circle: "text-warning"
       },
       danger: {
-        circle1: "border-b-danger",
-        circle2: "border-b-danger"
+        circle: "text-danger"
       }
     },
-    labelColor: {
-      foreground: {
-        label: "text-foreground"
+    isProgress: {
+      true: {
+        circleBackground: "hidden"
       },
-      primary: {
-        label: "text-primary"
-      },
-      secondary: {
-        label: "text-secondary"
-      },
-      success: {
-        label: "text-success"
-      },
-      warning: {
-        label: "text-warning"
-      },
-      danger: {
-        label: "text-danger"
+      false: {
+        circle: "animate-spinner-ease-spin"
       }
@@ -235,3 +187,3 @@ }
     color: "primary",
-    labelColor: "foreground"
+    isProgress: false
   }
@@ -238,0 +190,0 @@ });

dist/components/tabs.js

@@ -133,7 +133,8 @@ "use strict";
 var solid = {
-  primary: "bg-brand text-white",
-  danger: "bg-danger text-white",
-  warning: "bg-warning text-white",
-  success: "bg-success text-white",
+  primary: "bg-brand-700 text-white",
+  danger: "bg-danger-600 text-white",
+  warning: "bg-warning-500 text-white",
+  success: "bg-success-500 text-white",
   white: "bg-white text-neutral-800 border-neutral-300",
+  secondary: "bg-neutral-100 border-neutral-50 text-neutral-800",
   basic: "bg-neutral-50 border-neutral-50 text-neutral-800",
@@ -148,4 +149,5 @@ transparent: "bg-none text-brand-800 border-transparent"
   white: "border-white text-white",
+  secondary: "border-neutral-300 text-neutral-800",
   basic: "border-neutral text-neutral-800",
-  transparent: "border-transparent text-brand-800"
+  transparent: "border-neutral-300 text-brand-800"
 };
@@ -158,2 +160,3 @@ var ghost = {
   white: "text-white",
+  secondary: "text-black",
   basic: "text-black",
@@ -168,2 +171,3 @@ transparent: "text-neutral"
   white: "border-white text-white",
+  secondary: "border-gray text-gray-800",
   basic: "border-gray text-gray-800",
@@ -178,2 +182,3 @@ transparent: "border-transparent text-brand"
   white: "text-white",
+  secondary: "text-white",
   basic: "text-white",
@@ -189,2 +194,3 @@ transparent: "text-white"
   white: "shadow-lg shadow-white/40 bg-white text-neutral-800",
+  secondary: "shadow-lg shadow-neutral/40 bg-neutral-50 text-neutral-800",
   basic: "shadow-lg shadow-neutral/40 bg-neutral-50 text-neutral-800"
@@ -198,2 +204,3 @@ };
   white: "bg-white text-neutral-800",
+  secondary: "bg-neutral-50 text-neutral-800",
   basic: "bg-neutral-50 text-neutral-800",
@@ -208,2 +215,3 @@ transparent: "bg-transparent text-brand-800"
   white: "bg-white text-white shadow-lg",
+  secondary: "bg-white text-neutral-800 shadow-lg",
   basic: "bg-white text-neutral-800 shadow-lg",
@@ -210,0 +218,0 @@ transparent: "bg-white text-brand shadow-lg"

dist/components/user.js

@@ -140,4 +140,4 @@ "use strict";
     wrapper: "inline-flex flex-col items-start",
-    name: "text-sm text-inherit",
-    description: "text-xs text-foreground-400"
+    name: "text-xs text-black font-semibold",
+    description: "text-xs text-neutral-500 font-normal"
   }
@@ -144,0 +144,0 @@ });

dist/index.d.ts

@@ -13,12 +13,18 @@ export { AvatarGroupVariantProps, AvatarSlots, AvatarVariantProps, avatar, avatarGroup } from './components/avatar.js';
 export { AccordionGroupVariantProps, AccordionItemSlots, AccordionItemVariantProps, accordion, accordionItem } from './components/accordion.js';
-export { InputSlots, InputVariantProps, input } from './components/input.js';
+export { ProgressSlots, ProgressVariantProps, progress } from './components/progress.js';
+export { InputGroupVariantProps, InputSlots, InputVariantProps, input, inputGroup } from './components/input.js';
 export { DropdownItemSlots, DropdownItemVariantProps, DropdownSectionSlots, DropdownSectionVariantProps, dropdown, dropdownItem, dropdownMenu, dropdownSection } from './components/dropdown.js';
 export { ImageSlots, ImageVariantProps, image } from './components/image.js';
+export { ModalSlots, ModalVariantProps, modal } from './components/modal.js';
 export { SpacerVariantProps, spacer } from './components/spacer.js';
-export { DividerVariantProps, divider } from './components/divider.js';
+export { DividerSlots, DividerVariantProps, divider } from './components/divider.js';
 export { KbdSlots, KbdVariantProps, kbd } from './components/kbd.js';
 export { TabsReturnType, TabsSlots, TabsVariantProps, tabs } from './components/tabs.js';
 export { SkeletonSlots, SkeletonVariantProps, skeleton } from './components/skeleton.js';
-export { MenuItemSlots, MenuItemVariantProps, MenuSectionSlots, MenuSectionVariantProps, MenuSlots, MenuVariantProps, menu, menuItem, menuSection } from './components/menu.js';
+export { SelectSlots, SelectVariantProps, select } from './components/select.js';
+export { MenuItemSlots as ListboxItemSlots, MenuItemVariantProps as ListboxItemVariantProps, MenuSectionSlots as ListboxSectionSlots, MenuSectionVariantProps as ListboxSectionVariantProps, MenuSlots as ListboxSlots, MenuVariantProps as ListboxVariantProps, MenuItemSlots, MenuItemVariantProps, MenuSectionSlots, MenuSectionVariantProps, MenuSlots, MenuVariantProps, menu as listbox, menuItem as listboxItem, menuSection as listboxSection, menu, menuItem, menuSection } from './components/menu.js';
+export { ScrollShadowVariantProps, scrollShadow } from './components/scroll-shadow.js';
 export { BreadcrumbItemSlots, BreadcrumbItemVariantProps, BreadcrumbsSlots, BreadcrumbsVariantProps, breadcrumbItem, breadcrumbs } from './components/breadcrumbs.js';
+export { AlertSlots, AlertVariantProps, alert } from './components/alert.js';
+export { PaginationSlots, PaginationVariantProps, pagination } from './components/pagination.js';
 export { absoluteFullClasses, baseStyles, collapseAdjacentVariantBorders, dataFocusVisibleClasses, focusVisibleClasses, groupDataFocusVisibleClasses, ringClasses, translateCenterClasses } from './utils/classes.js';
@@ -25,0 +31,0 @@ export { SlotsToClasses } from './utils/types.js';

dist/plugin.js

@@ -754,2 +754,8 @@ "use strict";
     "-webkit-tap-highlight-color": "transparent"
+  },
+  ".progress-spinner": {
+    "stroke-dasharray": "400, 400",
+    transition: "stroke-dashoffset 0.35s",
+    transform: "rotate(-90deg)",
+    "transform-origin": "50% 50%"
   }
@@ -756,0 +762,0 @@ };

dist/utilities/custom.d.ts

@@ -20,4 +20,10 @@ declare const _default: {
     };
+    ".progress-spinner": {
+        "stroke-dasharray": string;
+        transition: string;
+        transform: string;
+        "transform-origin": string;
+    };
 };
 
 export { _default as default };

dist/utilities/custom.js

@@ -44,3 +44,9 @@ "use strict";
     "-webkit-tap-highlight-color": "transparent"
+  },
+  ".progress-spinner": {
+    "stroke-dasharray": "400, 400",
+    transition: "stroke-dashoffset 0.35s",
+    transform: "rotate(-90deg)",
+    "transform-origin": "50% 50%"
   }
 };

dist/utilities/index.d.ts

@@ -165,4 +165,10 @@ declare const utilities: {
     };
+    ".progress-spinner": {
+        "stroke-dasharray": string;
+        transition: string;
+        transform: string;
+        "transform-origin": string;
+    };
 };
 
 export { utilities };

dist/utilities/index.js

@@ -134,2 +134,8 @@ "use strict";
     "-webkit-tap-highlight-color": "transparent"
+  },
+  ".progress-spinner": {
+    "stroke-dasharray": "400, 400",
+    transition: "stroke-dashoffset 0.35s",
+    transform: "rotate(-90deg)",
+    "transform-origin": "50% 50%"
   }
@@ -136,0 +142,0 @@ };

dist/utils/index.js

@@ -88,7 +88,8 @@ "use strict";
 var solid = {
-  primary: "bg-brand text-white",
-  danger: "bg-danger text-white",
-  warning: "bg-warning text-white",
-  success: "bg-success text-white",
+  primary: "bg-brand-700 text-white",
+  danger: "bg-danger-600 text-white",
+  warning: "bg-warning-500 text-white",
+  success: "bg-success-500 text-white",
   white: "bg-white text-neutral-800 border-neutral-300",
+  secondary: "bg-neutral-100 border-neutral-50 text-neutral-800",
   basic: "bg-neutral-50 border-neutral-50 text-neutral-800",
@@ -103,4 +104,5 @@ transparent: "bg-none text-brand-800 border-transparent"
   white: "border-white text-white",
+  secondary: "border-neutral-300 text-neutral-800",
   basic: "border-neutral text-neutral-800",
-  transparent: "border-transparent text-brand-800"
+  transparent: "border-neutral-300 text-brand-800"
 };
@@ -113,2 +115,3 @@ var ghost = {
   white: "text-white",
+  secondary: "text-black",
   basic: "text-black",
@@ -123,2 +126,3 @@ transparent: "text-neutral"
   white: "border-white text-white",
+  secondary: "border-gray text-gray-800",
   basic: "border-gray text-gray-800",
@@ -133,2 +137,3 @@ transparent: "border-transparent text-brand"
   white: "text-white",
+  secondary: "text-white",
   basic: "text-white",
@@ -144,2 +149,3 @@ transparent: "text-white"
   white: "shadow-lg shadow-white/40 bg-white text-neutral-800",
+  secondary: "shadow-lg shadow-neutral/40 bg-neutral-50 text-neutral-800",
   basic: "shadow-lg shadow-neutral/40 bg-neutral-50 text-neutral-800"
@@ -153,2 +159,3 @@ };
   white: "bg-white text-neutral-800",
+  secondary: "bg-neutral-50 text-neutral-800",
   basic: "bg-neutral-50 text-neutral-800",
@@ -163,2 +170,3 @@ transparent: "bg-transparent text-brand-800"
   white: "bg-white text-white shadow-lg",
+  secondary: "bg-white text-neutral-800 shadow-lg",
   basic: "bg-white text-neutral-800 shadow-lg",
@@ -165,0 +173,0 @@ transparent: "bg-white text-brand shadow-lg"

dist/utils/variants.d.ts

@@ -8,2 +8,3 @@ declare const colorVariants: {
         white: string;
+        secondary: string;
         basic: string;
@@ -18,2 +19,3 @@ transparent: string;
         white: string;
+        secondary: string;
         basic: string;
@@ -28,2 +30,3 @@ transparent: string;
         white: string;
+        secondary: string;
         basic: string;
@@ -38,2 +41,3 @@ transparent: string;
         white: string;
+        secondary: string;
         basic: string;
@@ -48,2 +52,3 @@ transparent: string;
         white: string;
+        secondary: string;
         basic: string;
@@ -59,2 +64,3 @@ transparent: string;
         white: string;
+        secondary: string;
         basic: string;
@@ -68,2 +74,3 @@ };
         white: string;
+        secondary: string;
         basic: string;
@@ -78,2 +85,3 @@ transparent: string;
         white: string;
+        secondary: string;
         basic: string;
@@ -80,0 +88,0 @@ transparent: string;

dist/utils/variants.js

@@ -27,7 +27,8 @@ "use strict";
 var solid = {
-  primary: "bg-brand text-white",
-  danger: "bg-danger text-white",
-  warning: "bg-warning text-white",
-  success: "bg-success text-white",
+  primary: "bg-brand-700 text-white",
+  danger: "bg-danger-600 text-white",
+  warning: "bg-warning-500 text-white",
+  success: "bg-success-500 text-white",
   white: "bg-white text-neutral-800 border-neutral-300",
+  secondary: "bg-neutral-100 border-neutral-50 text-neutral-800",
   basic: "bg-neutral-50 border-neutral-50 text-neutral-800",
@@ -42,4 +43,5 @@ transparent: "bg-none text-brand-800 border-transparent"
   white: "border-white text-white",
+  secondary: "border-neutral-300 text-neutral-800",
   basic: "border-neutral text-neutral-800",
-  transparent: "border-transparent text-brand-800"
+  transparent: "border-neutral-300 text-brand-800"
 };
@@ -52,2 +54,3 @@ var ghost = {
   white: "text-white",
+  secondary: "text-black",
   basic: "text-black",
@@ -62,2 +65,3 @@ transparent: "text-neutral"
   white: "border-white text-white",
+  secondary: "border-gray text-gray-800",
   basic: "border-gray text-gray-800",
@@ -72,2 +76,3 @@ transparent: "border-transparent text-brand"
   white: "text-white",
+  secondary: "text-white",
   basic: "text-white",
@@ -83,2 +88,3 @@ transparent: "text-white"
   white: "shadow-lg shadow-white/40 bg-white text-neutral-800",
+  secondary: "shadow-lg shadow-neutral/40 bg-neutral-50 text-neutral-800",
   basic: "shadow-lg shadow-neutral/40 bg-neutral-50 text-neutral-800"
@@ -92,2 +98,3 @@ };
   white: "bg-white text-neutral-800",
+  secondary: "bg-neutral-50 text-neutral-800",
   basic: "bg-neutral-50 text-neutral-800",
@@ -102,2 +109,3 @@ transparent: "bg-transparent text-brand-800"
   white: "bg-white text-white shadow-lg",
+  secondary: "bg-white text-neutral-800 shadow-lg",
   basic: "bg-white text-neutral-800 shadow-lg",
@@ -104,0 +112,0 @@ transparent: "bg-white text-brand shadow-lg"

package.json

 {
   "name": "@jala-banyu/theme",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "Banyu theme",
@@ -5,0 +5,0 @@ "keywords": [

No alert changes

Improved metrics

Total package byte prevSize

1712968

increased by8.8%

Number of package files

317

increased by7.82%

Lines of code

56115

increased by8.74%

No dependency changes