@jbpark/ui-kit 5.4.2 → 5.4.3

package/dist/style.css

@@ -2483,73 +2483,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 +2762,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.3",
   "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",