@jbpark/ui-kit 5.4.2 → 5.4.4

package/dist/core/badge.d.mts

@@ -4,7 +4,7 @@ declare namespace badge_d_exports {
   export { Badge, Props, badgeVariants };
 }
 declare const badgeVariants: (props?: ({
-  variant?: "default" | "secondary" | "destructive" | "outline" | null | undefined;
+  variant?: "default" | "destructive" | "outline" | "secondary" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type Props = React$1.ComponentProps<'span'> & VariantProps<typeof badgeVariants> & {
   asChild?: boolean;

package/dist/core/button.d.mts

@@ -4,8 +4,8 @@ declare namespace button_d_exports {
   export { Button, Props, buttonVariants };
 }
 declare const buttonVariants: (props?: ({
-  variant?: "link" | "default" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined;
-  size?: "default" | "icon" | "xs" | "sm" | "lg" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+  variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
+  size?: "icon" | "default" | "xs" | "sm" | "lg" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type Props = React$1.ComponentProps<'button'> & VariantProps<typeof buttonVariants> & {
   asChild?: boolean;

package/dist/style.css

@@ -71,6 +71,17 @@
       outline-color: color-mix(in oklab, var(--ring) 50%, transparent);
     }
   }
+  :where([data-slot], [data-slot] *) {
+    box-sizing: border-box;
+    border-style: solid;
+    border-width: 0;
+  }
+  :where(button[data-slot], [data-slot] button, [data-slot] input, [data-slot] select, [data-slot] textarea) {
+    appearance: none;
+    color: inherit;
+    font: inherit;
+    background-color: #0000;
+  }
 }
 @layer components {
   [data-slot="button"][data-color] {
@@ -2483,73 +2494,73 @@
       align-items: flex-start;
     }
   }
-  .dark\:border-input:is(.dark *) {
+  .dark\:border-input:is(.dark *, [data-theme="dark"] *) {
     border-color: var(--input);
   }
-  .dark\:bg-destructive\/60:is(.dark *) {
+  .dark\:bg-destructive\/60:is(.dark *, [data-theme="dark"] *) {
     background-color: var(--destructive);
     @supports (color: color-mix(in lab, red, red)) {
       background-color: color-mix(in oklab, var(--destructive) 60%, transparent);
     }
   }
-  .dark\:bg-input\/30:is(.dark *) {
+  .dark\:bg-input\/30:is(.dark *, [data-theme="dark"] *) {
     background-color: var(--input);
     @supports (color: color-mix(in lab, red, red)) {
       background-color: color-mix(in oklab, var(--input) 30%, transparent);
     }
   }
-  .dark\:text-green-400:is(.dark *) {
+  .dark\:text-green-400:is(.dark *, [data-theme="dark"] *) {
     color: var(--color-green-400);
   }
-  .dark\:text-yellow-400:is(.dark *) {
+  .dark\:text-yellow-400:is(.dark *, [data-theme="dark"] *) {
     color: var(--color-yellow-400);
   }
   @media (hover: hover) {
-    .dark\:hover\:bg-accent\/50:is(.dark *):hover {
+    .dark\:hover\:bg-accent\/50:is(.dark *, [data-theme="dark"] *):hover {
       background-color: var(--accent);
     }
     @supports (color: color-mix(in lab, red, red)) {
-      .dark\:hover\:bg-accent\/50:is(.dark *):hover {
+      .dark\:hover\:bg-accent\/50:is(.dark *, [data-theme="dark"] *):hover {
         background-color: color-mix(in oklab, var(--accent) 50%, transparent);
       }
     }
-    .dark\:hover\:bg-input\/50:is(.dark *):hover {
+    .dark\:hover\:bg-input\/50:is(.dark *, [data-theme="dark"] *):hover {
       background-color: var(--input);
     }
     @supports (color: color-mix(in lab, red, red)) {
-      .dark\:hover\:bg-input\/50:is(.dark *):hover {
+      .dark\:hover\:bg-input\/50:is(.dark *, [data-theme="dark"] *):hover {
         background-color: color-mix(in oklab, var(--input) 50%, transparent);
       }
     }
   }
-  .dark\:focus-visible\:ring-destructive\/40:is(.dark *):focus-visible {
+  .dark\:focus-visible\:ring-destructive\/40:is(.dark *, [data-theme="dark"] *):focus-visible {
     --tw-ring-color: var(--destructive);
     @supports (color: color-mix(in lab, red, red)) {
       --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
     }
   }
-  .dark\:has-data-\[state\=checked\]\:bg-primary\/10:is(.dark *):has([data-state="checked"]) {
+  .dark\:has-data-\[state\=checked\]\:bg-primary\/10:is(.dark *, [data-theme="dark"] *):has([data-state="checked"]) {
     background-color: var(--primary);
     @supports (color: color-mix(in lab, red, red)) {
       background-color: color-mix(in oklab, var(--primary) 10%, transparent);
     }
   }
-  .dark\:aria-invalid\:ring-destructive\/40:is(.dark *)[aria-invalid="true"] {
+  .dark\:aria-invalid\:ring-destructive\/40:is(.dark *, [data-theme="dark"] *)[aria-invalid="true"] {
     --tw-ring-color: var(--destructive);
     @supports (color: color-mix(in lab, red, red)) {
       --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
     }
   }
-  .dark\:data-\[state\=checked\]\:bg-primary:is(.dark *)[data-state="checked"] {
+  .dark\:data-\[state\=checked\]\:bg-primary:is(.dark *, [data-theme="dark"] *)[data-state="checked"] {
     background-color: var(--primary);
   }
-  .dark\:data-\[state\=checked\]\:bg-primary-foreground:is(.dark *)[data-state="checked"] {
+  .dark\:data-\[state\=checked\]\:bg-primary-foreground:is(.dark *, [data-theme="dark"] *)[data-state="checked"] {
     background-color: var(--primary-foreground);
   }
-  .dark\:data-\[state\=unchecked\]\:bg-foreground:is(.dark *)[data-state="unchecked"] {
+  .dark\:data-\[state\=unchecked\]\:bg-foreground:is(.dark *, [data-theme="dark"] *)[data-state="unchecked"] {
     background-color: var(--foreground);
   }
-  .dark\:data-\[state\=unchecked\]\:bg-input\/80:is(.dark *)[data-state="unchecked"] {
+  .dark\:data-\[state\=unchecked\]\:bg-input\/80:is(.dark *, [data-theme="dark"] *)[data-state="unchecked"] {
     background-color: var(--input);
     @supports (color: color-mix(in lab, red, red)) {
       background-color: color-mix(in oklab, var(--input) 80%, transparent);
@@ -2762,7 +2773,7 @@
   --sidebar-border: oklch(92.2% 0 0);
   --sidebar-ring: oklch(70.8% 0 0);
 }
-.dark {
+.dark, [data-theme="dark"] {
   --background: oklch(14.5% 0 0);
   --foreground: oklch(98.5% 0 0);
   --card: oklch(20.5% 0 0);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbpark/ui-kit",
-  "version": "5.4.2",
+  "version": "5.4.4",
   "description": "Modern React UI component library built with TypeScript, Tailwind CSS, and Radix UI. Featuring atoms, molecules, organisms and layout templates for building beautiful interfaces.",
   "keywords": [
     "react",