@jala-banyu/theme - npm Package Compare versions

Comparing version 1.1.0 to 1.1.1

dist/colors.js

@@ -228,3 +228,3 @@ "use strict";
       foreground: (0, import_color2k.readableColor)("rgba(10, 10, 10, 0.02)"),
-      DEFAULT: "rgba(10, 10, 10, 0.02)"
+      DEFAULT: "rgba(0, 0, 0, 0)"
     },
@@ -314,3 +314,3 @@ neutral: {
       foreground: (0, import_color2k.readableColor)("rgba(10, 10, 10, 0.02)"),
-      DEFAULT: "rgba(10,10,10,0)"
+      DEFAULT: "rgba(0, 0, 0, 0)"
     },
@@ -317,0 +317,0 @@ neutral: {

dist/colors/index.js

@@ -228,3 +228,3 @@ "use strict";
       foreground: (0, import_color2k.readableColor)("rgba(10, 10, 10, 0.02)"),
-      DEFAULT: "rgba(10, 10, 10, 0.02)"
+      DEFAULT: "rgba(0, 0, 0, 0)"
     },
@@ -314,3 +314,3 @@ neutral: {
       foreground: (0, import_color2k.readableColor)("rgba(10, 10, 10, 0.02)"),
-      DEFAULT: "rgba(10,10,10,0)"
+      DEFAULT: "rgba(0, 0, 0, 0)"
     },
@@ -317,0 +317,0 @@ neutral: {

dist/colors/semantic.js

@@ -226,3 +226,3 @@ "use strict";
       foreground: (0, import_color2k.readableColor)("rgba(10, 10, 10, 0.02)"),
-      DEFAULT: "rgba(10, 10, 10, 0.02)"
+      DEFAULT: "rgba(0, 0, 0, 0)"
     },
@@ -312,3 +312,3 @@ neutral: {
       foreground: (0, import_color2k.readableColor)("rgba(10, 10, 10, 0.02)"),
-      DEFAULT: "rgba(10,10,10,0)"
+      DEFAULT: "rgba(0, 0, 0, 0)"
     },
@@ -315,0 +315,0 @@ neutral: {

dist/components/avatar.js

@@ -150,9 +150,9 @@ "use strict";
 var outline = {
-  primary: "border-brand text-brand",
-  danger: "border-danger text-danger",
+  primary: "border-brand text-brand-800",
+  danger: "border-danger text-danger-800",
   warning: "border-warning text-warning-800",
-  success: "border-success text-success",
+  success: "border-success text-success-800",
   white: "border-white text-white",
   basic: "border-neutral text-neutral-800",
-  transparent: "border-transparent text-brand"
+  transparent: "border-transparent text-brand-800"
 };
@@ -165,4 +165,4 @@ var ghost = {
   white: "text-white",
-  basic: "text-white",
-  transparent: "text-white"
+  basic: "text-black",
+  transparent: "text-neutral"
 };
@@ -187,2 +187,29 @@ var rounded = {
 };
+var shadow = {
+  primary: "shadow-lg shadow-brand/40 bg-brand text-brand-foreground",
+  success: "shadow-lg shadow-success/40 bg-success text-success-foreground",
+  warning: "shadow-lg shadow-warning/40 bg-warning text-warning-foreground",
+  danger: "shadow-lg shadow-danger/40 bg-danger text-danger-foreground",
+  transparent: "shadow-lg shadow-transparent/40 bg-transparent text-neutral-800",
+  white: "shadow-lg shadow-white/40 bg-white text-neutral-800",
+  basic: "shadow-lg shadow-neutral/40 bg-neutral-50 text-neutral-800"
+};
+var soft = {
+  primary: "bg-brand-100 text-brand-500",
+  danger: "bg-danger-100 text-danger-500",
+  warning: "bg-warning-100 text-warning-500",
+  success: "bg-success-100 text-success-500",
+  white: "bg-white text-neutral-800",
+  basic: "bg-neutral-50 text-neutral-800",
+  transparent: "bg-transparent text-brand-800"
+};
+var white = {
+  primary: "bg-white text-brand shadow-lg",
+  danger: "bg-white text-danger shadow-lg",
+  warning: "bg-white text-warning shadow-lg",
+  success: "bg-white text-success shadow-lg",
+  white: "bg-white text-white shadow-lg",
+  basic: "bg-white text-neutral-800 shadow-lg",
+  transparent: "bg-white text-brand shadow-lg"
+};
 var colorVariants = {
@@ -193,3 +220,6 @@ solid,
   ghost,
-  iconOnly
+  iconOnly,
+  shadow,
+  soft,
+  white
 };
@@ -196,0 +226,0 @@

dist/components/button.d.ts

@@ -23,6 +23,6 @@ import * as tailwind_variants from 'tailwind-variants';
     variant: {
-        solid: "border border-transparent";
-        outline: "border bg-transparent";
-        ghost: "bg-transparent border border-transparent";
-        rounded: "border bg-transparent";
+        solid: "border border-transparent font-semibold";
+        outline: "border bg-transparent font-semibold";
+        ghost: "bg-none border border-[#0000] font-semibold";
+        rounded: "border bg-transparent font-semibold";
         iconOnly: "";
@@ -63,3 +63,3 @@ };
     isIconOnly: {
-        true: "px-unit-0 !gap-unit-0";
+        true: "!gap-unit-2";
         false: "[&>svg]:max-w-[theme(spacing.unit-4)]";
@@ -73,6 +73,6 @@ };
     variant: {
-        solid: "border border-transparent";
-        outline: "border bg-transparent";
-        ghost: "bg-transparent border border-transparent";
-        rounded: "border bg-transparent";
+        solid: "border border-transparent font-semibold";
+        outline: "border bg-transparent font-semibold";
+        ghost: "bg-none border border-[#0000] font-semibold";
+        rounded: "border bg-transparent font-semibold";
         iconOnly: "";
@@ -113,3 +113,3 @@ };
     isIconOnly: {
-        true: "px-unit-0 !gap-unit-0";
+        true: "!gap-unit-2";
         false: "[&>svg]:max-w-[theme(spacing.unit-4)]";
@@ -123,6 +123,6 @@ };
     variant: {
-        solid: "border border-transparent";
-        outline: "border bg-transparent";
-        ghost: "bg-transparent border border-transparent";
-        rounded: "border bg-transparent";
+        solid: "border border-transparent font-semibold";
+        outline: "border bg-transparent font-semibold";
+        ghost: "bg-none border border-[#0000] font-semibold";
+        rounded: "border bg-transparent font-semibold";
         iconOnly: "";
@@ -163,3 +163,3 @@ };
     isIconOnly: {
-        true: "px-unit-0 !gap-unit-0";
+        true: "!gap-unit-2";
         false: "[&>svg]:max-w-[theme(spacing.unit-4)]";
@@ -173,6 +173,6 @@ };
     variant: {
-        solid: "border border-transparent";
-        outline: "border bg-transparent";
-        ghost: "bg-transparent border border-transparent";
-        rounded: "border bg-transparent";
+        solid: "border border-transparent font-semibold";
+        outline: "border bg-transparent font-semibold";
+        ghost: "bg-none border border-[#0000] font-semibold";
+        rounded: "border bg-transparent font-semibold";
         iconOnly: "";
@@ -213,3 +213,3 @@ };
     isIconOnly: {
-        true: "px-unit-0 !gap-unit-0";
+        true: "!gap-unit-2";
         false: "[&>svg]:max-w-[theme(spacing.unit-4)]";
@@ -223,6 +223,6 @@ };
     variant: {
-        solid: "border border-transparent";
-        outline: "border bg-transparent";
-        ghost: "bg-transparent border border-transparent";
-        rounded: "border bg-transparent";
+        solid: "border border-transparent font-semibold";
+        outline: "border bg-transparent font-semibold";
+        ghost: "bg-none border border-[#0000] font-semibold";
+        rounded: "border bg-transparent font-semibold";
         iconOnly: "";
@@ -263,3 +263,3 @@ };
     isIconOnly: {
-        true: "px-unit-0 !gap-unit-0";
+        true: "!gap-unit-2";
         false: "[&>svg]:max-w-[theme(spacing.unit-4)]";
@@ -273,6 +273,6 @@ };
     variant: {
-        solid: "border border-transparent";
-        outline: "border bg-transparent";
-        ghost: "bg-transparent border border-transparent";
-        rounded: "border bg-transparent";
+        solid: "border border-transparent font-semibold";
+        outline: "border bg-transparent font-semibold";
+        ghost: "bg-none border border-[#0000] font-semibold";
+        rounded: "border bg-transparent font-semibold";
         iconOnly: "";
@@ -313,3 +313,3 @@ };
     isIconOnly: {
-        true: "px-unit-0 !gap-unit-0";
+        true: "!gap-unit-2";
         false: "[&>svg]:max-w-[theme(spacing.unit-4)]";
@@ -323,6 +323,6 @@ };
     variant: {
-        solid: "border border-transparent";
-        outline: "border bg-transparent";
-        ghost: "bg-transparent border border-transparent";
-        rounded: "border bg-transparent";
+        solid: "border border-transparent font-semibold";
+        outline: "border bg-transparent font-semibold";
+        ghost: "bg-none border border-[#0000] font-semibold";
+        rounded: "border bg-transparent font-semibold";
         iconOnly: "";
@@ -363,3 +363,3 @@ };
     isIconOnly: {
-        true: "px-unit-0 !gap-unit-0";
+        true: "!gap-unit-2";
         false: "[&>svg]:max-w-[theme(spacing.unit-4)]";
@@ -366,0 +366,0 @@ };

dist/components/button.js

@@ -152,9 +152,9 @@ "use strict";
 var outline = {
-  primary: "border-brand text-brand",
-  danger: "border-danger text-danger",
+  primary: "border-brand text-brand-800",
+  danger: "border-danger text-danger-800",
   warning: "border-warning text-warning-800",
-  success: "border-success text-success",
+  success: "border-success text-success-800",
   white: "border-white text-white",
   basic: "border-neutral text-neutral-800",
-  transparent: "border-transparent text-brand"
+  transparent: "border-transparent text-brand-800"
 };
@@ -167,4 +167,4 @@ var ghost = {
   white: "text-white",
-  basic: "text-white",
-  transparent: "text-white"
+  basic: "text-black",
+  transparent: "text-neutral"
 };
@@ -189,2 +189,29 @@ var rounded = {
 };
+var shadow = {
+  primary: "shadow-lg shadow-brand/40 bg-brand text-brand-foreground",
+  success: "shadow-lg shadow-success/40 bg-success text-success-foreground",
+  warning: "shadow-lg shadow-warning/40 bg-warning text-warning-foreground",
+  danger: "shadow-lg shadow-danger/40 bg-danger text-danger-foreground",
+  transparent: "shadow-lg shadow-transparent/40 bg-transparent text-neutral-800",
+  white: "shadow-lg shadow-white/40 bg-white text-neutral-800",
+  basic: "shadow-lg shadow-neutral/40 bg-neutral-50 text-neutral-800"
+};
+var soft = {
+  primary: "bg-brand-100 text-brand-500",
+  danger: "bg-danger-100 text-danger-500",
+  warning: "bg-warning-100 text-warning-500",
+  success: "bg-success-100 text-success-500",
+  white: "bg-white text-neutral-800",
+  basic: "bg-neutral-50 text-neutral-800",
+  transparent: "bg-transparent text-brand-800"
+};
+var white = {
+  primary: "bg-white text-brand shadow-lg",
+  danger: "bg-white text-danger shadow-lg",
+  warning: "bg-white text-warning shadow-lg",
+  success: "bg-white text-success shadow-lg",
+  white: "bg-white text-white shadow-lg",
+  basic: "bg-white text-neutral-800 shadow-lg",
+  transparent: "bg-white text-brand shadow-lg"
+};
 var colorVariants = {
@@ -195,3 +222,6 @@ solid,
   ghost,
-  iconOnly
+  iconOnly,
+  shadow,
+  soft,
+  white
 };
@@ -223,6 +253,6 @@
     variant: {
-      solid: "border border-transparent",
-      outline: "border bg-transparent",
-      ghost: "bg-transparent border border-transparent",
-      rounded: "border bg-transparent",
+      solid: "border border-transparent font-semibold",
+      outline: "border bg-transparent font-semibold",
+      ghost: "bg-none border border-[#0000] font-semibold",
+      rounded: "border bg-transparent font-semibold",
       iconOnly: ""
@@ -263,3 +293,3 @@ },
     isIconOnly: {
-      true: "px-unit-0 !gap-unit-0",
+      true: "!gap-unit-2",
       false: "[&>svg]:max-w-[theme(spacing.unit-4)]"
@@ -526,65 +556,44 @@ },
     },
-    // Icon Button
+    // Is in group
     {
-      isIconOnly: true,
+      isInGroup: true,
       size: "sm",
-      class: "min-w-unit-8 w-unit-8 h-unit-8"
+      class: "!px-2 gap-2"
     },
     {
-      isIconOnly: true,
+      isInGroup: true,
       size: "md",
-      class: "min-w-unit-10 w-unit-10 h-unit-10"
+      class: "!px-3 gap-2"
     },
     {
-      isIconOnly: true,
+      isInGroup: true,
       size: "lg",
-      class: "min-w-unit-12 w-unit-12 h-unit-12"
+      class: "!px-4 gap-2"
     },
     {
-      isIconOnly: true,
+      isInGroup: true,
       size: "xl",
-      class: "min-w-unit-12 w-unit-12 h-unit-12"
+      class: "!px-6 gap-2"
     },
+    // Icon Button
     {
       isIconOnly: true,
-      variant: "iconOnly",
-      color: "primary",
-      class: colorVariants.iconOnly.primary
+      size: "sm",
+      class: "min-w-unit-7 h-unit-7"
     },
     {
       isIconOnly: true,
-      variant: "iconOnly",
-      color: "danger",
-      class: colorVariants.iconOnly.danger
+      size: "md",
+      class: "min-w-unit-8 h-unit-8"
     },
     {
       isIconOnly: true,
-      variant: "iconOnly",
-      color: "warning",
-      class: colorVariants.iconOnly.warning
+      size: "lg",
+      class: "min-w-unit-10 h-unit-10"
     },
     {
       isIconOnly: true,
-      variant: "iconOnly",
-      color: "success",
-      class: colorVariants.iconOnly.success
+      size: "xl",
+      class: "min-w-unit-12 h-unit-12"
     },
-    {
-      isIconOnly: true,
-      variant: "iconOnly",
-      color: "white",
-      class: colorVariants.iconOnly.white
-    },
-    {
-      isIconOnly: true,
-      variant: "iconOnly",
-      color: "basic",
-      class: colorVariants.iconOnly.basic
-    },
-    {
-      isIconOnly: true,
-      variant: "iconOnly",
-      color: "transparent",
-      class: colorVariants.iconOnly.transparent
-    },
     // variant / hover 👆
@@ -619,3 +628,3 @@ //   primary
       color: "white",
-      class: "data-[hover=true]:bg-brand/60 data-[hover=true]:border-brand/60 data-[hover=true]:text-white"
+      class: "data-[hover=true]:bg-brand-500 data-[hover=true]:border-brand-500 data-[hover=true]:text-white"
     },
@@ -638,3 +647,3 @@ //   basic
       color: "primary",
-      class: "data-[hover=true]:bg-brand data-[hover=true]:text-white"
+      class: "data-[hover=true]:bg-brand data-[hover=true]:border-brand data-[hover=true]:text-white"
     },
@@ -645,3 +654,3 @@ //   danger
       color: "danger",
-      class: "data-[hover=true]:bg-danger-600 data-[hover=true]:text-white"
+      class: "data-[hover=true]:bg-danger-400 data-[hover=true]:border-danger-400 data-[hover=true]:text-white"
     },
@@ -652,3 +661,3 @@ //   warning
       color: "warning",
-      class: "data-[hover=true]:bg-warning-500 data-[hover=true]:text-white"
+      class: "data-[hover=true]:bg-warning-500 data-[hover=true]:border-warning-500 data-[hover=true]:text-white"
     },
@@ -659,3 +668,3 @@ //   success
       color: "success",
-      class: "data-[hover=true]:bg-success-500 data-[hover=true]:text-white"
+      class: "data-[hover=true]:bg-success-500 data-[hover=true]:border-success-500 data-[hover=true]:text-white"
     },
@@ -666,3 +675,3 @@ //   white
       color: "white",
-      class: "data-[hover=true]:bg-white-5a data-[hover=true]:border-white data-[hover=true]:text-white"
+      class: "data-[hover=true]:bg-white-50a data-[hover=true]:border-white data-[hover=true]:text-white"
     },
@@ -673,3 +682,3 @@ //   basic
       color: "basic",
-      class: "data-[hover=true]:bg-neutral-200 data-[hover=true]:text-black"
+      class: "data-[hover=true]:bg-neutral-200 data-[hover=true]:border-neutral-300 data-[hover=true]:text-black"
     },
@@ -680,3 +689,3 @@ //   transparent
       color: "transparent",
-      class: "data-[hover=true]:bg-brand-50 data-[hover=true]:text-brand"
+      class: "data-[hover=true]:bg-transparent data-[hover=true]:text-brand"
     },
@@ -687,3 +696,3 @@ //   primary
       color: "primary",
-      class: "data-[hover=true]:text-brand-900 data-[hover=true]:bg-brand-50"
+      class: "data-[hover=true]:text-brand-900 data-[hover=true]:border-brand"
     },
@@ -694,3 +703,3 @@ //   danger
       color: "danger",
-      class: "data-[hover=true]:text-danger-900 data-[hover=true]:bg-danger-50"
+      class: "data-[hover=true]:text-danger-900"
     },
@@ -701,3 +710,3 @@ //   warning
       color: "warning",
-      class: "data-[hover=true]:text-warning-900 data-[hover=true]:bg-warning-50"
+      class: "data-[hover=true]:text-warning-900"
     },
@@ -708,3 +717,3 @@ //   success
       color: "success",
-      class: "data-[hover=true]:text-success-900 data-[hover=true]:bg-success-50"
+      class: "data-[hover=true]:text-success-900"
     },
@@ -715,3 +724,3 @@ //   white
       color: "white",
-      class: "data-[hover=true]:text-brand-900 data-[hover=true]:bg-brand-50"
+      class: "data-[hover=true]:text-neutral-400"
     },
@@ -722,3 +731,3 @@ //   basic
       color: "basic",
-      class: "data-[hover=true]:text-brand-900 data-[hover=true]:bg-brand-50"
+      class: "data-[hover=true]:text-brand-900"
     },
@@ -729,37 +738,37 @@ //   transparent
       color: "transparent",
-      class: "data-[hover=true]:text-brand-900 data-[hover=true]:bg-brand-50"
+      class: "data-[hover=true]:text-brand-900 data-[hover=true]:bg-brand-50 data-[hover=true]:border-brand-50"
     },
     //   primary
     {
-      variant: "iconOnly",
+      isIconOnly: true,
       color: "primary",
-      class: "data-[hover=true]:bg-brand data-[hover=true]:text-white"
+      class: "data-[hover=true]:bg-brand-500 data-[hover=true]:text-white"
     },
     //   danger
     {
-      variant: "iconOnly",
+      isIconOnly: true,
       color: "danger",
-      class: "data-[hover=true]:bg-danger-600 data-[hover=true]:text-white"
+      class: "data-[hover=true]:bg-danger-200 data-[hover=true]:text-white"
     },
     //   warning
     {
-      variant: "iconOnly",
+      isIconOnly: true,
       color: "warning",
-      class: "data-[hover=true]:bg-warning-500 data-[hover=true]:text-white"
+      class: "data-[hover=true]:bg-warning-200 data-[hover=true]:text-white"
     },
     //   success
     {
-      variant: "iconOnly",
+      isIconOnly: true,
       color: "success",
-      class: "data-[hover=true]:bg-success-500 data-[hover=true]:text-white"
+      class: "data-[hover=true]:bg-success-400 data-[hover=true]:text-white"
     },
     //   white
     {
-      variant: "iconOnly",
+      isIconOnly: true,
       color: "white",
-      class: "data-[hover=true]:bg-white-5a data-[hover=true]:border-white data-[hover=true]:text-white"
+      class: "data-[hover=true]:bg-white-5a data-[hover=true]:border-white data-[hover=true]:text-black"
     },
     //   basic
     {
-      variant: "iconOnly",
+      isIconOnly: true,
       color: "basic",
@@ -770,5 +779,5 @@ class: "data-[hover=true]:bg-neutral-200 data-[hover=true]:text-black"
     {
-      variant: "iconOnly",
+      isIconOnly: true,
       color: "transparent",
-      class: "data-[hover=true]:bg-brand-50 data-[hover=true]:text-brand"
+      class: "data-[hover=true]:bg-neutral-800 data-[hover=true]:text-white"
     },
@@ -810,3 +819,3 @@ // variant / focus 🎯
       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-brand-300 data-[focus=true]:border-brand-700"
+      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"
     },
@@ -817,3 +826,3 @@ //   transparent
       color: "transparent",
-      class: "data-[focus=true]:outline-none data-[focus=true]:ring-1 data-[focus=true]:ring-brand-200 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-brand-50 data-[focus=true]:bg-brand-200 data-[focus=true]:border-brand-200"
     },
@@ -824,3 +833,3 @@ //   primary
       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 data-[focus=true]:text-white"
+      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"
     },
@@ -831,3 +840,3 @@ //   danger
       color: "danger",
-      class: "data-[focus=true]:focus:outline-none data-[focus=true]:focus:ring-1 data-[focus=true]:focus:bg-danger-800 data-[focus=true]:focus:border-danger-800 data-[focus=true]:focus:text-white data-[focus=true]:focus:ring-danger/60"
+      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"
     },
@@ -838,3 +847,3 @@ //   warning
       color: "warning",
-      class: "data-[focus=true]:focus:outline-none data-[focus=true]:focus:ring-1 data-[focus=true]:focus:bg-warning-800 data-[focus=true]:focus:border-warning-800 data-[focus=true]:focus:text-white data-[focus=true]:focus:ring-warning/60"
+      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"
     },
@@ -845,3 +854,3 @@ //   success
       color: "success",
-      class: "data-[focus=true]:focus:outline-none data-[focus=true]:focus:ring-1 data-[focus=true]:focus:bg-success-800 data-[focus=true]:focus:border-success-800 data-[focus=true]:focus:text-white data-[focus=true]:focus:ring-success/60"
+      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"
     },
@@ -852,3 +861,3 @@ //   white
       color: "white",
-      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 dark:focus:ring-warning/60"
+      class: "data-[focus=true]:outline-none"
     },
@@ -859,3 +868,3 @@ //   basic
       color: "basic",
-      class: "data-[focus=true]:focus:outline-none data-[focus=true]:focus:ring-1 data-[focus=true]:focus:bg-neutral-300 data-[focus=true]:focus:border-neutral-300 data-[focus=true]:focus:text-neutral-800 data-[focus=true]:focus:ring-neutral/60"
+      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"
     },
@@ -866,3 +875,3 @@ //   transparent
       color: "transparent",
-      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:focus:ring-brand/60"
+      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"
     },
@@ -885,3 +894,3 @@ //   primary
       color: "warning",
-      class: "data-[focus=true]:ring-1 data-[focus=true]:bg-warning-50 data-[focus=true]:border-warning-50 data-[focus=true]:text-warning-900 data-[focus=true]:ring-warning-50"
+      class: "data-[focus=true]:ring-1 data-[focus=true]:bg-warning-50 data-[focus=true]:border-danger-50 data-[focus=true]:text-warning-900 data-[focus=true]:ring-warning-50"
     },
@@ -898,3 +907,3 @@ //   success
       color: "white",
-      class: "data-[focus=true]:ring-1 data-[focus=true]:bg-brand-50 data-[focus=true]:border-brand-50 data-[focus=true]:text-brand-900 data-[focus=true]:ring-brand-50"
+      class: "data-[focus=true]:text-neutral-400"
     },
@@ -905,3 +914,3 @@ //   basic
       color: "basic",
-      class: "data-[focus=true]:ring-1 data-[focus=true]:bg-brand-50 data-[focus=true]:border-brand-50 data-[focus=true]:text-brand-900 data-[focus=true]:ring-brand-50"
+      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"
     },
@@ -912,45 +921,87 @@ //   transparent
       color: "transparent",
-      class: "data-[focus=true]:ring-1 data-[focus=true]:bg-brand-50 data-[focus=true]:border-brand-50 data-[focus=true]:text-brand-900 data-[focus=true]:ring-brand-50"
+      class: "data-[focus=true]:ring-1 data-[focus=true]:bg-brand-200 data-[focus=true]:border-brand-200 data-[focus=true]:text-brand-900 data-[focus=true]:ring-brand-50"
     },
     //   primary
     {
-      variant: "iconOnly",
+      isIconOnly: true,
       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 data-[focus=true]:text-white"
+      class: "data-[hover=true]:bg-brand data-[hover=true]:border-brand data-[hover=true]:text-white"
     },
     //   danger
     {
-      variant: "iconOnly",
+      isIconOnly: true,
       color: "danger",
-      class: "data-[focus=true]:focus:outline-none data-[focus=true]:focus:ring-1 data-[focus=true]:focus:bg-danger-800 data-[focus=true]:focus:border-danger-800 data-[focus=true]:focus:text-white data-[focus=true]:focus:ring-danger/60"
+      class: "data-[hover=true]:bg-danger-400 data-[hover=true]:border-danger-400 data-[hover=true]:text-white"
     },
     //   warning
     {
-      variant: "iconOnly",
+      isIconOnly: true,
       color: "warning",
-      class: "data-[focus=true]:focus:outline-none data-[focus=true]:focus:ring-1 data-[focus=true]:focus:bg-warning-800 data-[focus=true]:focus:border-warning-800 data-[focus=true]:focus:text-white data-[focus=true]:focus:ring-warning/60"
+      class: "data-[hover=true]:bg-warning-500 data-[hover=true]:border-warning-500 data-[hover=true]:text-white"
     },
     //   success
     {
-      variant: "iconOnly",
+      isIconOnly: true,
       color: "success",
-      class: "data-[focus=true]:focus:outline-none data-[focus=true]:focus:ring-1 data-[focus=true]:focus:bg-success-800 data-[focus=true]:focus:border-success-800 data-[focus=true]:focus:text-white data-[focus=true]:focus:ring-success/60"
+      class: "data-[hover=true]:bg-success-500 data-[hover=true]:border-success-500 data-[hover=true]:text-white"
     },
     //   white
     {
-      variant: "iconOnly",
+      isIconOnly: true,
       color: "white",
-      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 dark:focus:ring-warning/60"
+      class: "data-[hover=true]:bg-white-50a data-[hover=true]:border-white data-[hover=true]:text-white"
     },
     //   basic
     {
-      variant: "iconOnly",
+      isIconOnly: true,
       color: "basic",
-      class: "data-[focus=true]:focus:outline-none data-[focus=true]:focus:ring-1 data-[focus=true]:focus:bg-gray-800 data-[focus=true]:focus:border-gray-800 data-[focus=true]:focus:text-white data-[focus=true]:focus:ring-gray/60"
+      class: "data-[hover=true]:bg-neutral-200 data-[hover=true]:border-neutral-300 data-[hover=true]:text-black"
     },
     //   transparent
     {
-      variant: "iconOnly",
+      isIconOnly: true,
       color: "transparent",
-      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:focus:ring-brand/60"
+      class: "data-[hover=true]:bg-transparent data-[hover=true]:text-brand"
+    },
+    //   primary
+    {
+      isIconOnly: true,
+      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"
+    },
+    //   danger
+    {
+      isIconOnly: true,
+      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"
+    },
+    //   warning
+    {
+      isIconOnly: true,
+      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"
+    },
+    //   success
+    {
+      isIconOnly: true,
+      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"
+    },
+    //   white
+    {
+      isIconOnly: true,
+      color: "white",
+      class: "data-[focus=true]:outline-none"
+    },
+    //   basic
+    {
+      isIconOnly: true,
+      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"
+    },
+    //   transparent
+    {
+      isIconOnly: true,
+      color: "transparent",
+      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"
     }
@@ -957,0 +1008,0 @@ ]

dist/components/code.js

@@ -133,9 +133,9 @@ "use strict";
 var outline = {
-  primary: "border-brand text-brand",
-  danger: "border-danger text-danger",
+  primary: "border-brand text-brand-800",
+  danger: "border-danger text-danger-800",
   warning: "border-warning text-warning-800",
-  success: "border-success text-success",
+  success: "border-success text-success-800",
   white: "border-white text-white",
   basic: "border-neutral text-neutral-800",
-  transparent: "border-transparent text-brand"
+  transparent: "border-transparent text-brand-800"
 };
@@ -148,4 +148,4 @@ var ghost = {
   white: "text-white",
-  basic: "text-white",
-  transparent: "text-white"
+  basic: "text-black",
+  transparent: "text-neutral"
 };
@@ -170,2 +170,29 @@ var rounded = {
 };
+var shadow = {
+  primary: "shadow-lg shadow-brand/40 bg-brand text-brand-foreground",
+  success: "shadow-lg shadow-success/40 bg-success text-success-foreground",
+  warning: "shadow-lg shadow-warning/40 bg-warning text-warning-foreground",
+  danger: "shadow-lg shadow-danger/40 bg-danger text-danger-foreground",
+  transparent: "shadow-lg shadow-transparent/40 bg-transparent text-neutral-800",
+  white: "shadow-lg shadow-white/40 bg-white text-neutral-800",
+  basic: "shadow-lg shadow-neutral/40 bg-neutral-50 text-neutral-800"
+};
+var soft = {
+  primary: "bg-brand-100 text-brand-500",
+  danger: "bg-danger-100 text-danger-500",
+  warning: "bg-warning-100 text-warning-500",
+  success: "bg-success-100 text-success-500",
+  white: "bg-white text-neutral-800",
+  basic: "bg-neutral-50 text-neutral-800",
+  transparent: "bg-transparent text-brand-800"
+};
+var white = {
+  primary: "bg-white text-brand shadow-lg",
+  danger: "bg-white text-danger shadow-lg",
+  warning: "bg-white text-warning shadow-lg",
+  success: "bg-white text-success shadow-lg",
+  white: "bg-white text-white shadow-lg",
+  basic: "bg-white text-neutral-800 shadow-lg",
+  transparent: "bg-white text-brand shadow-lg"
+};
 var colorVariants = {
@@ -176,3 +203,6 @@ solid,
   ghost,
-  iconOnly
+  iconOnly,
+  shadow,
+  soft,
+  white
 };
@@ -179,0 +209,0 @@

dist/components/index.d.ts

@@ -9,2 +9,4 @@ export { AvatarGroupVariantProps, AvatarSlots, AvatarVariantProps, avatar, avatarGroup } from './avatar.js';
 export { PopoverSlots, PopoverVariantProps, popover } from './popover.js';
+export { ChipSlots, ChipVariantProps, chip } from './chip.js';
+export { CheckboxGroupSlots, CheckboxSlots, CheckboxVariantProps, checkbox, checkboxGroup } from './checkbox.js';
 export { ToggleSlots, ToggleVariantProps, toggle } from './toggle.js';
@@ -11,0 +13,0 @@ export { InputSlots, InputVariantProps, input } from './input.js';

dist/components/link.d.ts

@@ -13,14 +13,14 @@ import * as tailwind_variants from 'tailwind-variants';
     size: {
-        sm: "text-sm";
-        md: "text-md";
-        lg: "text-lg";
+        sm: "text-md";
+        md: "text-lg";
+        lg: "text-xl";
     };
     color: {
-        dark: "text-neutral-800";
-        gray: "text-neutral-500";
-        white: "text-white";
-        primary: "text-brand";
-        success: "text-success";
-        warning: "text-warning";
-        danger: "text-danger";
+        dark: "text-neutral-800 focus:ring-1 focus:ring-brand-50 px-1 rounded-lg";
+        gray: "text-neutral-500 focus:ring-1 focus:ring-brand-50 px-1 rounded-lg";
+        white: "text-white focus:ring-1 focus:ring-brand-50 px-1 rounded-lg";
+        primary: "text-brand-800 hover:text-brand-900 focus:ring-1 focus:ring-brand-50 px-1 rounded-lg";
+        success: "text-success-700 hover:text-success-800 focus:ring-1 focus:ring-success-500 px-1 rounded-lg";
+        warning: "text-warning-800 hover:text-warning-800 focus:ring-1 focus:ring-warning-300 px-1 rounded-lg";
+        danger: "text-danger-600 hover:text-danger-700 focus:ring-1 focus:ring-danger-400 px-1 rounded-lg";
     };
@@ -46,14 +46,14 @@ underline: {
     size: {
-        sm: "text-sm";
-        md: "text-md";
-        lg: "text-lg";
+        sm: "text-md";
+        md: "text-lg";
+        lg: "text-xl";
     };
     color: {
-        dark: "text-neutral-800";
-        gray: "text-neutral-500";
-        white: "text-white";
-        primary: "text-brand";
-        success: "text-success";
-        warning: "text-warning";
-        danger: "text-danger";
+        dark: "text-neutral-800 focus:ring-1 focus:ring-brand-50 px-1 rounded-lg";
+        gray: "text-neutral-500 focus:ring-1 focus:ring-brand-50 px-1 rounded-lg";
+        white: "text-white focus:ring-1 focus:ring-brand-50 px-1 rounded-lg";
+        primary: "text-brand-800 hover:text-brand-900 focus:ring-1 focus:ring-brand-50 px-1 rounded-lg";
+        success: "text-success-700 hover:text-success-800 focus:ring-1 focus:ring-success-500 px-1 rounded-lg";
+        warning: "text-warning-800 hover:text-warning-800 focus:ring-1 focus:ring-warning-300 px-1 rounded-lg";
+        danger: "text-danger-600 hover:text-danger-700 focus:ring-1 focus:ring-danger-400 px-1 rounded-lg";
     };
@@ -79,14 +79,14 @@ underline: {
     size: {
-        sm: "text-sm";
-        md: "text-md";
-        lg: "text-lg";
+        sm: "text-md";
+        md: "text-lg";
+        lg: "text-xl";
     };
     color: {
-        dark: "text-neutral-800";
-        gray: "text-neutral-500";
-        white: "text-white";
-        primary: "text-brand";
-        success: "text-success";
-        warning: "text-warning";
-        danger: "text-danger";
+        dark: "text-neutral-800 focus:ring-1 focus:ring-brand-50 px-1 rounded-lg";
+        gray: "text-neutral-500 focus:ring-1 focus:ring-brand-50 px-1 rounded-lg";
+        white: "text-white focus:ring-1 focus:ring-brand-50 px-1 rounded-lg";
+        primary: "text-brand-800 hover:text-brand-900 focus:ring-1 focus:ring-brand-50 px-1 rounded-lg";
+        success: "text-success-700 hover:text-success-800 focus:ring-1 focus:ring-success-500 px-1 rounded-lg";
+        warning: "text-warning-800 hover:text-warning-800 focus:ring-1 focus:ring-warning-300 px-1 rounded-lg";
+        danger: "text-danger-600 hover:text-danger-700 focus:ring-1 focus:ring-danger-400 px-1 rounded-lg";
     };
@@ -112,14 +112,14 @@ underline: {
     size: {
-        sm: "text-sm";
-        md: "text-md";
-        lg: "text-lg";
+        sm: "text-md";
+        md: "text-lg";
+        lg: "text-xl";
     };
     color: {
-        dark: "text-neutral-800";
-        gray: "text-neutral-500";
-        white: "text-white";
-        primary: "text-brand";
-        success: "text-success";
-        warning: "text-warning";
-        danger: "text-danger";
+        dark: "text-neutral-800 focus:ring-1 focus:ring-brand-50 px-1 rounded-lg";
+        gray: "text-neutral-500 focus:ring-1 focus:ring-brand-50 px-1 rounded-lg";
+        white: "text-white focus:ring-1 focus:ring-brand-50 px-1 rounded-lg";
+        primary: "text-brand-800 hover:text-brand-900 focus:ring-1 focus:ring-brand-50 px-1 rounded-lg";
+        success: "text-success-700 hover:text-success-800 focus:ring-1 focus:ring-success-500 px-1 rounded-lg";
+        warning: "text-warning-800 hover:text-warning-800 focus:ring-1 focus:ring-warning-300 px-1 rounded-lg";
+        danger: "text-danger-600 hover:text-danger-700 focus:ring-1 focus:ring-danger-400 px-1 rounded-lg";
     };
@@ -145,14 +145,14 @@ underline: {
     size: {
-        sm: "text-sm";
-        md: "text-md";
-        lg: "text-lg";
+        sm: "text-md";
+        md: "text-lg";
+        lg: "text-xl";
     };
     color: {
-        dark: "text-neutral-800";
-        gray: "text-neutral-500";
-        white: "text-white";
-        primary: "text-brand";
-        success: "text-success";
-        warning: "text-warning";
-        danger: "text-danger";
+        dark: "text-neutral-800 focus:ring-1 focus:ring-brand-50 px-1 rounded-lg";
+        gray: "text-neutral-500 focus:ring-1 focus:ring-brand-50 px-1 rounded-lg";
+        white: "text-white focus:ring-1 focus:ring-brand-50 px-1 rounded-lg";
+        primary: "text-brand-800 hover:text-brand-900 focus:ring-1 focus:ring-brand-50 px-1 rounded-lg";
+        success: "text-success-700 hover:text-success-800 focus:ring-1 focus:ring-success-500 px-1 rounded-lg";
+        warning: "text-warning-800 hover:text-warning-800 focus:ring-1 focus:ring-warning-300 px-1 rounded-lg";
+        danger: "text-danger-600 hover:text-danger-700 focus:ring-1 focus:ring-danger-400 px-1 rounded-lg";
     };
@@ -178,14 +178,14 @@ underline: {
     size: {
-        sm: "text-sm";
-        md: "text-md";
-        lg: "text-lg";
+        sm: "text-md";
+        md: "text-lg";
+        lg: "text-xl";
     };
     color: {
-        dark: "text-neutral-800";
-        gray: "text-neutral-500";
-        white: "text-white";
-        primary: "text-brand";
-        success: "text-success";
-        warning: "text-warning";
-        danger: "text-danger";
+        dark: "text-neutral-800 focus:ring-1 focus:ring-brand-50 px-1 rounded-lg";
+        gray: "text-neutral-500 focus:ring-1 focus:ring-brand-50 px-1 rounded-lg";
+        white: "text-white focus:ring-1 focus:ring-brand-50 px-1 rounded-lg";
+        primary: "text-brand-800 hover:text-brand-900 focus:ring-1 focus:ring-brand-50 px-1 rounded-lg";
+        success: "text-success-700 hover:text-success-800 focus:ring-1 focus:ring-success-500 px-1 rounded-lg";
+        warning: "text-warning-800 hover:text-warning-800 focus:ring-1 focus:ring-warning-300 px-1 rounded-lg";
+        danger: "text-danger-600 hover:text-danger-700 focus:ring-1 focus:ring-danger-400 px-1 rounded-lg";
     };
@@ -211,14 +211,14 @@ underline: {
     size: {
-        sm: "text-sm";
-        md: "text-md";
-        lg: "text-lg";
+        sm: "text-md";
+        md: "text-lg";
+        lg: "text-xl";
     };
     color: {
-        dark: "text-neutral-800";
-        gray: "text-neutral-500";
-        white: "text-white";
-        primary: "text-brand";
-        success: "text-success";
-        warning: "text-warning";
-        danger: "text-danger";
+        dark: "text-neutral-800 focus:ring-1 focus:ring-brand-50 px-1 rounded-lg";
+        gray: "text-neutral-500 focus:ring-1 focus:ring-brand-50 px-1 rounded-lg";
+        white: "text-white focus:ring-1 focus:ring-brand-50 px-1 rounded-lg";
+        primary: "text-brand-800 hover:text-brand-900 focus:ring-1 focus:ring-brand-50 px-1 rounded-lg";
+        success: "text-success-700 hover:text-success-800 focus:ring-1 focus:ring-success-500 px-1 rounded-lg";
+        warning: "text-warning-800 hover:text-warning-800 focus:ring-1 focus:ring-warning-300 px-1 rounded-lg";
+        danger: "text-danger-600 hover:text-danger-700 focus:ring-1 focus:ring-danger-400 px-1 rounded-lg";
     };
@@ -225,0 +225,0 @@ underline: {

dist/components/link.js

@@ -135,3 +135,3 @@ "use strict";
   base: [
-    "relative inline-flex items-center outline-none tap-highlight-transparent",
+    "relative inline-flex items-center outline-none tap-highlight-transparent font-semibold",
     // focus ring
@@ -142,14 +142,14 @@ ...dataFocusVisibleClasses
     size: {
-      sm: "text-sm",
-      md: "text-md",
-      lg: "text-lg"
+      sm: "text-md",
+      md: "text-lg",
+      lg: "text-xl"
     },
     color: {
-      dark: "text-neutral-800",
-      gray: "text-neutral-500",
-      white: "text-white",
-      primary: "text-brand",
-      success: "text-success",
-      warning: "text-warning",
-      danger: "text-danger"
+      dark: "text-neutral-800 focus:ring-1 focus:ring-brand-50 px-1 rounded-lg",
+      gray: "text-neutral-500 focus:ring-1 focus:ring-brand-50 px-1 rounded-lg",
+      white: "text-white focus:ring-1 focus:ring-brand-50 px-1 rounded-lg",
+      primary: "text-brand-800 hover:text-brand-900 focus:ring-1 focus:ring-brand-50 px-1 rounded-lg",
+      success: "text-success-700 hover:text-success-800 focus:ring-1 focus:ring-success-500 px-1 rounded-lg",
+      warning: "text-warning-800 hover:text-warning-800 focus:ring-1 focus:ring-warning-300 px-1 rounded-lg",
+      danger: "text-danger-600 hover:text-danger-700 focus:ring-1 focus:ring-danger-400 px-1 rounded-lg"
     },
@@ -156,0 +156,0 @@ underline: {

dist/components/popover.js

@@ -142,9 +142,9 @@ "use strict";
 var outline = {
-  primary: "border-brand text-brand",
-  danger: "border-danger text-danger",
+  primary: "border-brand text-brand-800",
+  danger: "border-danger text-danger-800",
   warning: "border-warning text-warning-800",
-  success: "border-success text-success",
+  success: "border-success text-success-800",
   white: "border-white text-white",
   basic: "border-neutral text-neutral-800",
-  transparent: "border-transparent text-brand"
+  transparent: "border-transparent text-brand-800"
 };
@@ -157,4 +157,4 @@ var ghost = {
   white: "text-white",
-  basic: "text-white",
-  transparent: "text-white"
+  basic: "text-black",
+  transparent: "text-neutral"
 };
@@ -179,2 +179,29 @@ var rounded = {
 };
+var shadow = {
+  primary: "shadow-lg shadow-brand/40 bg-brand text-brand-foreground",
+  success: "shadow-lg shadow-success/40 bg-success text-success-foreground",
+  warning: "shadow-lg shadow-warning/40 bg-warning text-warning-foreground",
+  danger: "shadow-lg shadow-danger/40 bg-danger text-danger-foreground",
+  transparent: "shadow-lg shadow-transparent/40 bg-transparent text-neutral-800",
+  white: "shadow-lg shadow-white/40 bg-white text-neutral-800",
+  basic: "shadow-lg shadow-neutral/40 bg-neutral-50 text-neutral-800"
+};
+var soft = {
+  primary: "bg-brand-100 text-brand-500",
+  danger: "bg-danger-100 text-danger-500",
+  warning: "bg-warning-100 text-warning-500",
+  success: "bg-success-100 text-success-500",
+  white: "bg-white text-neutral-800",
+  basic: "bg-neutral-50 text-neutral-800",
+  transparent: "bg-transparent text-brand-800"
+};
+var white = {
+  primary: "bg-white text-brand shadow-lg",
+  danger: "bg-white text-danger shadow-lg",
+  warning: "bg-white text-warning shadow-lg",
+  success: "bg-white text-success shadow-lg",
+  white: "bg-white text-white shadow-lg",
+  basic: "bg-white text-neutral-800 shadow-lg",
+  transparent: "bg-white text-brand shadow-lg"
+};
 var colorVariants = {
@@ -185,3 +212,6 @@ solid,
   ghost,
-  iconOnly
+  iconOnly,
+  shadow,
+  soft,
+  white
 };
@@ -188,0 +218,0 @@

dist/default-layout.js

@@ -41,10 +41,10 @@ "use strict";
     sm: "0.857rem",
-    md: "0.857rem",
-    lg: "0.857rem",
-    xl: "0.857rem",
-    "2xl": "0.857rem",
-    "3xl": "0.857rem",
-    "4xl": "0.857rem",
-    "5xl": "0.857rem",
-    "6xl": "0.857rem"
+    md: "1rem",
+    lg: "1.125rem",
+    xl: "1.25rem",
+    "2xl": "1.5rem",
+    "3xl": "1.875rem",
+    "4xl": "2.25rem",
+    "5xl": "3rem",
+    "6xl": "3.75rem"
   },
@@ -51,0 +51,0 @@ lineHeight: {

dist/index.d.ts

@@ -9,2 +9,4 @@ export { AvatarGroupVariantProps, AvatarSlots, AvatarVariantProps, avatar, avatarGroup } from './components/avatar.js';
 export { PopoverSlots, PopoverVariantProps, popover } from './components/popover.js';
+export { ChipSlots, ChipVariantProps, chip } from './components/chip.js';
+export { CheckboxGroupSlots, CheckboxSlots, CheckboxVariantProps, checkbox, checkboxGroup } from './components/checkbox.js';
 export { ToggleSlots, ToggleVariantProps, toggle } from './components/toggle.js';
@@ -11,0 +13,0 @@ export { InputSlots, InputVariantProps, input } from './components/input.js';

dist/plugin.js

@@ -251,3 +251,3 @@ "use strict";
       foreground: (0, import_color2k.readableColor)("rgba(10, 10, 10, 0.02)"),
-      DEFAULT: "rgba(10, 10, 10, 0.02)"
+      DEFAULT: "rgba(0, 0, 0, 0)"
     },
@@ -337,3 +337,3 @@ neutral: {
       foreground: (0, import_color2k.readableColor)("rgba(10, 10, 10, 0.02)"),
-      DEFAULT: "rgba(10,10,10,0)"
+      DEFAULT: "rgba(0, 0, 0, 0)"
     },
@@ -990,10 +990,10 @@ neutral: {
     sm: "0.857rem",
-    md: "0.857rem",
-    lg: "0.857rem",
-    xl: "0.857rem",
-    "2xl": "0.857rem",
-    "3xl": "0.857rem",
-    "4xl": "0.857rem",
-    "5xl": "0.857rem",
-    "6xl": "0.857rem"
+    md: "1rem",
+    lg: "1.125rem",
+    xl: "1.25rem",
+    "2xl": "1.5rem",
+    "3xl": "1.875rem",
+    "4xl": "2.25rem",
+    "5xl": "3rem",
+    "6xl": "3.75rem"
   },
@@ -1000,0 +1000,0 @@ lineHeight: {

dist/utils/index.js

@@ -97,9 +97,9 @@ "use strict";
 var outline = {
-  primary: "border-brand text-brand",
-  danger: "border-danger text-danger",
+  primary: "border-brand text-brand-800",
+  danger: "border-danger text-danger-800",
   warning: "border-warning text-warning-800",
-  success: "border-success text-success",
+  success: "border-success text-success-800",
   white: "border-white text-white",
   basic: "border-neutral text-neutral-800",
-  transparent: "border-transparent text-brand"
+  transparent: "border-transparent text-brand-800"
 };
@@ -112,4 +112,4 @@ var ghost = {
   white: "text-white",
-  basic: "text-white",
-  transparent: "text-white"
+  basic: "text-black",
+  transparent: "text-neutral"
 };
@@ -134,2 +134,29 @@ var rounded = {
 };
+var shadow = {
+  primary: "shadow-lg shadow-brand/40 bg-brand text-brand-foreground",
+  success: "shadow-lg shadow-success/40 bg-success text-success-foreground",
+  warning: "shadow-lg shadow-warning/40 bg-warning text-warning-foreground",
+  danger: "shadow-lg shadow-danger/40 bg-danger text-danger-foreground",
+  transparent: "shadow-lg shadow-transparent/40 bg-transparent text-neutral-800",
+  white: "shadow-lg shadow-white/40 bg-white text-neutral-800",
+  basic: "shadow-lg shadow-neutral/40 bg-neutral-50 text-neutral-800"
+};
+var soft = {
+  primary: "bg-brand-100 text-brand-500",
+  danger: "bg-danger-100 text-danger-500",
+  warning: "bg-warning-100 text-warning-500",
+  success: "bg-success-100 text-success-500",
+  white: "bg-white text-neutral-800",
+  basic: "bg-neutral-50 text-neutral-800",
+  transparent: "bg-transparent text-brand-800"
+};
+var white = {
+  primary: "bg-white text-brand shadow-lg",
+  danger: "bg-white text-danger shadow-lg",
+  warning: "bg-white text-warning shadow-lg",
+  success: "bg-white text-success shadow-lg",
+  white: "bg-white text-white shadow-lg",
+  basic: "bg-white text-neutral-800 shadow-lg",
+  transparent: "bg-white text-brand shadow-lg"
+};
 var colorVariants = {
@@ -140,3 +167,6 @@ solid,
   ghost,
-  iconOnly
+  iconOnly,
+  shadow,
+  soft,
+  white
 };
@@ -143,0 +173,0 @@ // Annotate the CommonJS export names for ESM import in node:

dist/utils/variants.d.ts

@@ -47,4 +47,31 @@ declare const colorVariants: {
     };
+    shadow: {
+        primary: string;
+        success: string;
+        warning: string;
+        danger: string;
+        transparent: string;
+        white: string;
+        basic: string;
+    };
+    soft: {
+        primary: string;
+        danger: string;
+        warning: string;
+        success: string;
+        white: string;
+        basic: string;
+        transparent: string;
+    };
+    white: {
+        primary: string;
+        danger: string;
+        warning: string;
+        success: string;
+        white: string;
+        basic: string;
+        transparent: string;
+    };
 };
 
 export { colorVariants };

dist/utils/variants.js

@@ -36,9 +36,9 @@ "use strict";
 var outline = {
-  primary: "border-brand text-brand",
-  danger: "border-danger text-danger",
+  primary: "border-brand text-brand-800",
+  danger: "border-danger text-danger-800",
   warning: "border-warning text-warning-800",
-  success: "border-success text-success",
+  success: "border-success text-success-800",
   white: "border-white text-white",
   basic: "border-neutral text-neutral-800",
-  transparent: "border-transparent text-brand"
+  transparent: "border-transparent text-brand-800"
 };
@@ -51,4 +51,4 @@ var ghost = {
   white: "text-white",
-  basic: "text-white",
-  transparent: "text-white"
+  basic: "text-black",
+  transparent: "text-neutral"
 };
@@ -73,2 +73,29 @@ var rounded = {
 };
+var shadow = {
+  primary: "shadow-lg shadow-brand/40 bg-brand text-brand-foreground",
+  success: "shadow-lg shadow-success/40 bg-success text-success-foreground",
+  warning: "shadow-lg shadow-warning/40 bg-warning text-warning-foreground",
+  danger: "shadow-lg shadow-danger/40 bg-danger text-danger-foreground",
+  transparent: "shadow-lg shadow-transparent/40 bg-transparent text-neutral-800",
+  white: "shadow-lg shadow-white/40 bg-white text-neutral-800",
+  basic: "shadow-lg shadow-neutral/40 bg-neutral-50 text-neutral-800"
+};
+var soft = {
+  primary: "bg-brand-100 text-brand-500",
+  danger: "bg-danger-100 text-danger-500",
+  warning: "bg-warning-100 text-warning-500",
+  success: "bg-success-100 text-success-500",
+  white: "bg-white text-neutral-800",
+  basic: "bg-neutral-50 text-neutral-800",
+  transparent: "bg-transparent text-brand-800"
+};
+var white = {
+  primary: "bg-white text-brand shadow-lg",
+  danger: "bg-white text-danger shadow-lg",
+  warning: "bg-white text-warning shadow-lg",
+  success: "bg-white text-success shadow-lg",
+  white: "bg-white text-white shadow-lg",
+  basic: "bg-white text-neutral-800 shadow-lg",
+  transparent: "bg-white text-brand shadow-lg"
+};
 var colorVariants = {
@@ -79,3 +106,6 @@ solid,
   ghost,
-  iconOnly
+  iconOnly,
+  shadow,
+  soft,
+  white
 };
@@ -82,0 +112,0 @@ // Annotate the CommonJS export names for ESM import in node:

package.json

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

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1467819

increased by11.93%

Number of package files

284

increased by3.65%

Lines of code

48148

increased by12.61%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes