@agenticindiedev/ui 0.3.0 → 0.3.2

package/dist/styles.css

@@ -36,7 +36,6 @@
     --container-sm: 24rem;
     --container-md: 28rem;
     --container-lg: 32rem;
-    --container-2xl: 42rem;
     --text-xs: 0.75rem;
     --text-xs--line-height: calc(1 / 0.75);
     --text-sm: 0.875rem;
@@ -53,9 +52,6 @@
     --tracking-tight: -0.025em;
     --tracking-widest: 0.1em;
     --leading-relaxed: 1.625;
-    --radius-sm: 0.25rem;
-    --radius-md: 0.375rem;
-    --radius-lg: 0.5rem;
     --radius-xl: 0.75rem;
     --ease-out: cubic-bezier(0, 0, 0.2, 1);
     --animate-spin: spin 1s linear infinite;
@@ -439,9 +435,6 @@
   .min-h-\[400px\] {
     min-height: 400px;
   }
-  .min-h-screen {
-    min-height: 100vh;
-  }
   .w-2 {
     width: calc(var(--spacing) * 2);
   }
@@ -505,18 +498,21 @@
   .w-\[400px\] {
     width: 400px;
   }
+  .w-\[450px\] {
+    width: 450px;
+  }
   .w-\[500px\] {
     width: 500px;
   }
+  .w-\[600px\] {
+    width: 600px;
+  }
   .w-\[800px\] {
     width: 800px;
   }
   .w-full {
     width: 100%;
   }
-  .max-w-2xl {
-    max-width: var(--container-2xl);
-  }
   .max-w-lg {
     max-width: var(--container-lg);
   }
@@ -529,6 +525,9 @@
   .min-w-\[8rem\] {
     min-width: 8rem;
   }
+  .min-w-\[var\(--radix-select-trigger-width\)\] {
+    min-width: var(--radix-select-trigger-width);
+  }
   .flex-1 {
     flex: 1;
   }
@@ -711,13 +710,13 @@
     border-radius: calc(infinity * 1px);
   }
   .rounded-lg {
-    border-radius: var(--radius-lg);
+    border-radius: var(--radius);
   }
   .rounded-md {
-    border-radius: var(--radius-md);
+    border-radius: calc(var(--radius) - 2px);
   }
   .rounded-sm {
-    border-radius: var(--radius-sm);
+    border-radius: calc(var(--radius) - 4px);
   }
   .rounded-xl {
     border-radius: var(--radius-xl);
@@ -730,6 +729,10 @@
     border-style: var(--tw-border-style);
     border-width: 2px;
   }
+  .border-x {
+    border-inline-style: var(--tw-border-style);
+    border-inline-width: 1px;
+  }
   .border-t {
     border-top-style: var(--tw-border-style);
     border-top-width: 1px;
@@ -738,9 +741,24 @@
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 1px;
   }
+  .border-background {
+    border-color: hsl(var(--background));
+  }
+  .border-border {
+    border-color: hsl(var(--border));
+  }
   .border-current {
     border-color: currentcolor;
   }
+  .border-destructive {
+    border-color: hsl(var(--destructive));
+  }
+  .border-destructive\/50 {
+    border-color: hsl(var(--destructive));
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, hsl(var(--destructive)) 50%, transparent);
+    }
+  }
   .border-green-500 {
     border-color: var(--color-green-500);
   }
@@ -750,9 +768,21 @@
       border-color: color-mix(in oklab, var(--color-green-500) 50%, transparent);
     }
   }
+  .border-input {
+    border-color: hsl(var(--input));
+  }
   .border-pink-500 {
     border-color: var(--color-pink-500);
   }
+  .border-primary {
+    border-color: hsl(var(--primary));
+  }
+  .border-primary\/50 {
+    border-color: hsl(var(--primary));
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, hsl(var(--primary)) 50%, transparent);
+    }
+  }
   .border-transparent {
     border-color: transparent;
   }
@@ -768,6 +798,12 @@
   .bg-\[\#f0f9ff\] {
     background-color: #f0f9ff;
   }
+  .bg-accent {
+    background-color: hsl(var(--accent));
+  }
+  .bg-background {
+    background-color: hsl(var(--background));
+  }
   .bg-black\/80 {
     background-color: color-mix(in srgb, #000 80%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -777,9 +813,24 @@
   .bg-blue-500 {
     background-color: var(--color-blue-500);
   }
+  .bg-border {
+    background-color: hsl(var(--border));
+  }
+  .bg-card {
+    background-color: hsl(var(--card));
+  }
   .bg-current {
     background-color: currentcolor;
   }
+  .bg-destructive {
+    background-color: hsl(var(--destructive));
+  }
+  .bg-destructive\/10 {
+    background-color: hsl(var(--destructive));
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, hsl(var(--destructive)) 10%, transparent);
+    }
+  }
   .bg-green-50 {
     background-color: var(--color-green-50);
   }
@@ -792,9 +843,45 @@
       background-color: color-mix(in oklab, var(--color-green-500) 10%, transparent);
     }
   }
+  .bg-muted {
+    background-color: hsl(var(--muted));
+  }
+  .bg-muted\/50 {
+    background-color: hsl(var(--muted));
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, hsl(var(--muted)) 50%, transparent);
+    }
+  }
+  .bg-popover {
+    background-color: hsl(var(--popover));
+  }
+  .bg-primary {
+    background-color: hsl(var(--primary));
+  }
+  .bg-primary-50 {
+    background-color: #f0f9ff;
+  }
+  .bg-primary-500 {
+    background-color: #0ea5e9;
+  }
+  .bg-primary\/10 {
+    background-color: hsl(var(--primary));
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, hsl(var(--primary)) 10%, transparent);
+    }
+  }
   .bg-purple-500 {
     background-color: var(--color-purple-500);
   }
+  .bg-secondary {
+    background-color: hsl(var(--secondary));
+  }
+  .bg-secondary\/10 {
+    background-color: hsl(var(--secondary));
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, hsl(var(--secondary)) 10%, transparent);
+    }
+  }
   .bg-transparent {
     background-color: transparent;
   }
@@ -947,18 +1034,57 @@
   .whitespace-nowrap {
     white-space: nowrap;
   }
+  .text-accent-foreground {
+    color: hsl(var(--accent-foreground));
+  }
+  .text-card-foreground {
+    color: hsl(var(--card-foreground));
+  }
   .text-current {
     color: currentcolor;
   }
+  .text-destructive {
+    color: hsl(var(--destructive));
+  }
+  .text-destructive-foreground {
+    color: hsl(var(--destructive-foreground));
+  }
+  .text-foreground {
+    color: hsl(var(--foreground));
+  }
+  .text-foreground\/50 {
+    color: hsl(var(--foreground));
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, hsl(var(--foreground)) 50%, transparent);
+    }
+  }
   .text-green-600 {
     color: var(--color-green-600);
   }
   .text-green-900 {
     color: var(--color-green-900);
   }
+  .text-muted-foreground {
+    color: hsl(var(--muted-foreground));
+  }
   .text-pink-600 {
     color: var(--color-pink-600);
   }
+  .text-popover-foreground {
+    color: hsl(var(--popover-foreground));
+  }
+  .text-primary {
+    color: hsl(var(--primary));
+  }
+  .text-primary-500 {
+    color: #0ea5e9;
+  }
+  .text-primary-foreground {
+    color: hsl(var(--primary-foreground));
+  }
+  .text-secondary-foreground {
+    color: hsl(var(--secondary-foreground));
+  }
   .text-white {
     color: var(--color-white);
   }
@@ -980,6 +1106,9 @@
   .underline-offset-4 {
     text-underline-offset: 4px;
   }
+  .accent-foreground {
+    accent-color: hsl(var(--foreground));
+  }
   .opacity-0 {
     opacity: 0%;
   }
@@ -1025,6 +1154,9 @@
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .ring-offset-background {
+    --tw-ring-offset-color: hsl(var(--background));
+  }
   .outline {
     outline-style: var(--tw-outline-style);
     outline-width: 1px;
@@ -1072,6 +1204,14 @@
       }
     }
   }
+  .group-\[\.destructive\]\:border-muted\/40 {
+    &:is(:where(.group):is(.destructive) *) {
+      border-color: hsl(var(--muted));
+      @supports (color: color-mix(in lab, red, red)) {
+        border-color: color-mix(in oklab, hsl(var(--muted)) 40%, transparent);
+      }
+    }
+  }
   .group-\[\.destructive\]\:text-red-300 {
     &:is(:where(.group):is(.destructive) *) {
       color: var(--color-red-300);
@@ -1110,6 +1250,83 @@
       font-weight: var(--font-weight-medium);
     }
   }
+  .placeholder\:text-muted-foreground {
+    &::placeholder {
+      color: hsl(var(--muted-foreground));
+    }
+  }
+  .first\:rounded-t-md {
+    &:first-child {
+      border-top-left-radius: calc(var(--radius) - 2px);
+      border-top-right-radius: calc(var(--radius) - 2px);
+    }
+  }
+  .last\:rounded-b-md {
+    &:last-child {
+      border-bottom-right-radius: calc(var(--radius) - 2px);
+      border-bottom-left-radius: calc(var(--radius) - 2px);
+    }
+  }
+  .last\:border-b {
+    &:last-child {
+      border-bottom-style: var(--tw-border-style);
+      border-bottom-width: 1px;
+    }
+  }
+  .hover\:border-accent {
+    &:hover {
+      @media (hover: hover) {
+        border-color: hsl(var(--accent));
+      }
+    }
+  }
+  .hover\:border-input\/80 {
+    &:hover {
+      @media (hover: hover) {
+        border-color: hsl(var(--input));
+        @supports (color: color-mix(in lab, red, red)) {
+          border-color: color-mix(in oklab, hsl(var(--input)) 80%, transparent);
+        }
+      }
+    }
+  }
+  .hover\:bg-accent {
+    &:hover {
+      @media (hover: hover) {
+        background-color: hsl(var(--accent));
+      }
+    }
+  }
+  .hover\:bg-destructive\/20 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: hsl(var(--destructive));
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, hsl(var(--destructive)) 20%, transparent);
+        }
+      }
+    }
+  }
+  .hover\:bg-destructive\/80 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: hsl(var(--destructive));
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, hsl(var(--destructive)) 80%, transparent);
+        }
+      }
+    }
+  }
+  .hover\:bg-destructive\/90 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: hsl(var(--destructive));
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, hsl(var(--destructive)) 90%, transparent);
+        }
+      }
+    }
+  }
   .hover\:bg-gray-100 {
     &:hover {
       @media (hover: hover) {
@@ -1141,6 +1358,16 @@
       }
     }
   }
+  .hover\:bg-muted\/50 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: hsl(var(--muted));
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, hsl(var(--muted)) 50%, transparent);
+        }
+      }
+    }
+  }
   .hover\:bg-pink-50 {
     &:hover {
       @media (hover: hover) {
@@ -1148,6 +1375,43 @@
       }
     }
   }
+  .hover\:bg-primary-600 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: #0284c7;
+      }
+    }
+  }
+  .hover\:bg-primary\/20 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: hsl(var(--primary));
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, hsl(var(--primary)) 20%, transparent);
+        }
+      }
+    }
+  }
+  .hover\:bg-primary\/80 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: hsl(var(--primary));
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, hsl(var(--primary)) 80%, transparent);
+        }
+      }
+    }
+  }
+  .hover\:bg-primary\/90 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: hsl(var(--primary));
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, hsl(var(--primary)) 90%, transparent);
+        }
+      }
+    }
+  }
   .hover\:bg-purple-600 {
     &:hover {
       @media (hover: hover) {
@@ -1155,6 +1419,33 @@
       }
     }
   }
+  .hover\:bg-secondary {
+    &:hover {
+      @media (hover: hover) {
+        background-color: hsl(var(--secondary));
+      }
+    }
+  }
+  .hover\:bg-secondary\/20 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: hsl(var(--secondary));
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, hsl(var(--secondary)) 20%, transparent);
+        }
+      }
+    }
+  }
+  .hover\:bg-secondary\/80 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: hsl(var(--secondary));
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, hsl(var(--secondary)) 80%, transparent);
+        }
+      }
+    }
+  }
   .hover\:bg-yellow-500\/20 {
     &:hover {
       @media (hover: hover) {
@@ -1172,6 +1463,47 @@
       }
     }
   }
+  .hover\:text-accent-foreground {
+    &:hover {
+      @media (hover: hover) {
+        color: hsl(var(--accent-foreground));
+      }
+    }
+  }
+  .hover\:text-foreground {
+    &:hover {
+      @media (hover: hover) {
+        color: hsl(var(--foreground));
+      }
+    }
+  }
+  .hover\:text-foreground\/80 {
+    &:hover {
+      @media (hover: hover) {
+        color: hsl(var(--foreground));
+        @supports (color: color-mix(in lab, red, red)) {
+          color: color-mix(in oklab, hsl(var(--foreground)) 80%, transparent);
+        }
+      }
+    }
+  }
+  .hover\:text-primary {
+    &:hover {
+      @media (hover: hover) {
+        color: hsl(var(--primary));
+      }
+    }
+  }
+  .hover\:text-primary\/80 {
+    &:hover {
+      @media (hover: hover) {
+        color: hsl(var(--primary));
+        @supports (color: color-mix(in lab, red, red)) {
+          color: color-mix(in oklab, hsl(var(--primary)) 80%, transparent);
+        }
+      }
+    }
+  }
   .hover\:underline {
     &:hover {
       @media (hover: hover) {
@@ -1194,11 +1526,33 @@
       }
     }
   }
-  .hover\:shadow-md {
-    &:hover {
-      @media (hover: hover) {
-        --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
-        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  .group-\[\.destructive\]\:hover\:border-destructive\/30 {
+    &:is(:where(.group):is(.destructive) *) {
+      &:hover {
+        @media (hover: hover) {
+          border-color: hsl(var(--destructive));
+          @supports (color: color-mix(in lab, red, red)) {
+            border-color: color-mix(in oklab, hsl(var(--destructive)) 30%, transparent);
+          }
+        }
+      }
+    }
+  }
+  .group-\[\.destructive\]\:hover\:bg-destructive {
+    &:is(:where(.group):is(.destructive) *) {
+      &:hover {
+        @media (hover: hover) {
+          background-color: hsl(var(--destructive));
+        }
+      }
+    }
+  }
+  .group-\[\.destructive\]\:hover\:text-destructive-foreground {
+    &:is(:where(.group):is(.destructive) *) {
+      &:hover {
+        @media (hover: hover) {
+          color: hsl(var(--destructive-foreground));
+        }
       }
     }
   }
@@ -1211,6 +1565,16 @@
       }
     }
   }
+  .focus\:bg-accent {
+    &:focus {
+      background-color: hsl(var(--accent));
+    }
+  }
+  .focus\:text-accent-foreground {
+    &:focus {
+      color: hsl(var(--accent-foreground));
+    }
+  }
   .focus\:opacity-100 {
     &:focus {
       opacity: 100%;
@@ -1222,6 +1586,11 @@
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
   }
+  .focus\:ring-ring {
+    &:focus {
+      --tw-ring-color: hsl(var(--ring));
+    }
+  }
   .focus\:ring-offset-2 {
     &:focus {
       --tw-ring-offset-width: 2px;
@@ -1234,6 +1603,13 @@
       outline-style: none;
     }
   }
+  .group-\[\.destructive\]\:focus\:ring-destructive {
+    &:is(:where(.group):is(.destructive) *) {
+      &:focus {
+        --tw-ring-color: hsl(var(--destructive));
+      }
+    }
+  }
   .group-\[\.destructive\]\:focus\:ring-red-400 {
     &:is(:where(.group):is(.destructive) *) {
       &:focus {
@@ -1248,24 +1624,63 @@
       }
     }
   }
+  .focus-visible\:border-ring {
+    &:focus-visible {
+      border-color: hsl(var(--ring));
+    }
+  }
   .focus-visible\:ring-2 {
     &:focus-visible {
       --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
   }
+  .focus-visible\:ring-ring {
+    &:focus-visible {
+      --tw-ring-color: hsl(var(--ring));
+    }
+  }
   .focus-visible\:ring-offset-2 {
     &:focus-visible {
       --tw-ring-offset-width: 2px;
       --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
     }
   }
+  .focus-visible\:ring-offset-background {
+    &:focus-visible {
+      --tw-ring-offset-color: hsl(var(--background));
+    }
+  }
   .focus-visible\:outline-none {
     &:focus-visible {
       --tw-outline-style: none;
       outline-style: none;
     }
   }
+  .active\:bg-accent\/80 {
+    &:active {
+      background-color: hsl(var(--accent));
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, hsl(var(--accent)) 80%, transparent);
+      }
+    }
+  }
+  .active\:bg-destructive\/30 {
+    &:active {
+      background-color: hsl(var(--destructive));
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, hsl(var(--destructive)) 30%, transparent);
+      }
+    }
+  }
+  .active\:bg-destructive\/80 {
+    &:active {
+      background-color: hsl(var(--destructive));
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, hsl(var(--destructive)) 80%, transparent);
+      }
+    }
+  }
   .active\:bg-green-500\/30 {
     &:active {
       background-color: color-mix(in srgb, oklch(72.3% 0.219 149.579) 30%, transparent);
@@ -1274,18 +1689,44 @@
       }
     }
   }
-  .active\:bg-yellow-500\/30 {
+  .active\:bg-primary\/30 {
     &:active {
-      background-color: color-mix(in srgb, oklch(79.5% 0.184 86.047) 30%, transparent);
+      background-color: hsl(var(--primary));
       @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-yellow-500) 30%, transparent);
+        background-color: color-mix(in oklab, hsl(var(--primary)) 30%, transparent);
       }
     }
   }
-  .active\:shadow-sm {
+  .active\:bg-primary\/80 {
     &:active {
-      --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
-      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+      background-color: hsl(var(--primary));
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, hsl(var(--primary)) 80%, transparent);
+      }
+    }
+  }
+  .active\:bg-secondary\/30 {
+    &:active {
+      background-color: hsl(var(--secondary));
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, hsl(var(--secondary)) 30%, transparent);
+      }
+    }
+  }
+  .active\:bg-secondary\/70 {
+    &:active {
+      background-color: hsl(var(--secondary));
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, hsl(var(--secondary)) 70%, transparent);
+      }
+    }
+  }
+  .active\:bg-yellow-500\/30 {
+    &:active {
+      background-color: color-mix(in srgb, oklch(79.5% 0.184 86.047) 30%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-yellow-500) 30%, transparent);
+      }
     }
   }
   .disabled\:pointer-events-none {
@@ -1313,6 +1754,22 @@
       opacity: 50%;
     }
   }
+  .data-\[state\=active\]\:bg-primary {
+    &[data-state="active"] {
+      background-color: hsl(var(--primary));
+    }
+  }
+  .data-\[state\=active\]\:font-semibold {
+    &[data-state="active"] {
+      --tw-font-weight: var(--font-weight-semibold);
+      font-weight: var(--font-weight-semibold);
+    }
+  }
+  .data-\[state\=active\]\:text-primary-foreground {
+    &[data-state="active"] {
+      color: hsl(var(--primary-foreground));
+    }
+  }
   .data-\[state\=active\]\:shadow-sm {
     &[data-state="active"] {
       --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
@@ -1325,12 +1782,57 @@
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
   }
+  .data-\[state\=checked\]\:bg-primary {
+    &[data-state="checked"] {
+      background-color: hsl(var(--primary));
+    }
+  }
+  .data-\[state\=checked\]\:text-primary-foreground {
+    &[data-state="checked"] {
+      color: hsl(var(--primary-foreground));
+    }
+  }
+  .data-\[state\=closed\]\:animate-accordion-up {
+    &[data-state="closed"] {
+      animation: accordion-up 0.2s ease-out;
+    }
+  }
+  .data-\[state\=inactive\]\:text-muted-foreground {
+    &[data-state="inactive"] {
+      color: hsl(var(--muted-foreground));
+    }
+  }
+  .data-\[state\=open\]\:animate-accordion-down {
+    &[data-state="open"] {
+      animation: accordion-down 0.2s ease-out;
+    }
+  }
+  .data-\[state\=open\]\:bg-accent {
+    &[data-state="open"] {
+      background-color: hsl(var(--accent));
+    }
+  }
+  .data-\[state\=open\]\:text-muted-foreground {
+    &[data-state="open"] {
+      color: hsl(var(--muted-foreground));
+    }
+  }
+  .data-\[state\=selected\]\:bg-muted {
+    &[data-state="selected"] {
+      background-color: hsl(var(--muted));
+    }
+  }
   .data-\[state\=unchecked\]\:translate-x-0 {
     &[data-state="unchecked"] {
       --tw-translate-x: calc(var(--spacing) * 0);
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
   }
+  .data-\[state\=unchecked\]\:bg-input {
+    &[data-state="unchecked"] {
+      background-color: hsl(var(--input));
+    }
+  }
   .data-\[swipe\=cancel\]\:translate-x-0 {
     &[data-swipe="cancel"] {
       --tw-translate-x: calc(var(--spacing) * 0);
@@ -1395,7 +1897,7 @@
   }
   .sm\:rounded-lg {
     @media (width >= 40rem) {
-      border-radius: var(--radius-lg);
+      border-radius: var(--radius);
     }
   }
   .sm\:text-left {
@@ -1418,58 +1920,147 @@
       max-width: 420px;
     }
   }
+  .dark\:border-border {
+    &:is(.dark *) {
+      border-color: hsl(var(--border));
+    }
+  }
+  .dark\:border-destructive {
+    &:is(.dark *) {
+      border-color: hsl(var(--destructive));
+    }
+  }
   .dark\:border-green-500\/50 {
-    @media (prefers-color-scheme: dark) {
+    &:is(.dark *) {
       border-color: color-mix(in srgb, oklch(72.3% 0.219 149.579) 50%, transparent);
       @supports (color: color-mix(in lab, red, red)) {
         border-color: color-mix(in oklab, var(--color-green-500) 50%, transparent);
       }
     }
   }
+  .dark\:border-primary\/50 {
+    &:is(.dark *) {
+      border-color: hsl(var(--primary));
+      @supports (color: color-mix(in lab, red, red)) {
+        border-color: color-mix(in oklab, hsl(var(--primary)) 50%, transparent);
+      }
+    }
+  }
   .dark\:border-yellow-500\/50 {
-    @media (prefers-color-scheme: dark) {
+    &:is(.dark *) {
       border-color: color-mix(in srgb, oklch(79.5% 0.184 86.047) 50%, transparent);
       @supports (color: color-mix(in lab, red, red)) {
         border-color: color-mix(in oklab, var(--color-yellow-500) 50%, transparent);
       }
     }
   }
+  .dark\:bg-background {
+    &:is(.dark *) {
+      background-color: hsl(var(--background));
+    }
+  }
+  .dark\:bg-destructive\/20 {
+    &:is(.dark *) {
+      background-color: hsl(var(--destructive));
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, hsl(var(--destructive)) 20%, transparent);
+      }
+    }
+  }
   .dark\:bg-green-950\/90 {
-    @media (prefers-color-scheme: dark) {
+    &:is(.dark *) {
       background-color: color-mix(in srgb, oklch(26.6% 0.065 152.934) 90%, transparent);
       @supports (color: color-mix(in lab, red, red)) {
         background-color: color-mix(in oklab, var(--color-green-950) 90%, transparent);
       }
     }
   }
+  .dark\:bg-primary\/20 {
+    &:is(.dark *) {
+      background-color: hsl(var(--primary));
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, hsl(var(--primary)) 20%, transparent);
+      }
+    }
+  }
   .dark\:bg-yellow-950\/90 {
-    @media (prefers-color-scheme: dark) {
+    &:is(.dark *) {
       background-color: color-mix(in srgb, oklch(28.6% 0.066 53.813) 90%, transparent);
       @supports (color: color-mix(in lab, red, red)) {
         background-color: color-mix(in oklab, var(--color-yellow-950) 90%, transparent);
       }
     }
   }
+  .dark\:text-destructive {
+    &:is(.dark *) {
+      color: hsl(var(--destructive));
+    }
+  }
+  .dark\:text-foreground {
+    &:is(.dark *) {
+      color: hsl(var(--foreground));
+    }
+  }
   .dark\:text-green-50 {
-    @media (prefers-color-scheme: dark) {
+    &:is(.dark *) {
       color: var(--color-green-50);
     }
   }
   .dark\:text-green-400 {
-    @media (prefers-color-scheme: dark) {
+    &:is(.dark *) {
       color: var(--color-green-400);
     }
   }
+  .dark\:text-muted-foreground {
+    &:is(.dark *) {
+      color: hsl(var(--muted-foreground));
+    }
+  }
+  .dark\:text-primary {
+    &:is(.dark *) {
+      color: hsl(var(--primary));
+    }
+  }
   .dark\:text-yellow-50 {
-    @media (prefers-color-scheme: dark) {
+    &:is(.dark *) {
       color: var(--color-yellow-50);
     }
   }
   .dark\:text-yellow-400 {
-    @media (prefers-color-scheme: dark) {
+    &:is(.dark *) {
       color: var(--color-yellow-400);
     }
   }
+  .dark\:hover\:text-foreground {
+    &:is(.dark *) {
+      &:hover {
+        @media (hover: hover) {
+          color: hsl(var(--foreground));
+        }
+      }
+    }
+  }
+  .dark\:hover\:text-primary {
+    &:is(.dark *) {
+      &:hover {
+        @media (hover: hover) {
+          color: hsl(var(--primary));
+        }
+      }
+    }
+  }
+  .dark\:hover\:text-primary\/80 {
+    &:is(.dark *) {
+      &:hover {
+        @media (hover: hover) {
+          color: hsl(var(--primary));
+          @supports (color: color-mix(in lab, red, red)) {
+            color: color-mix(in oklab, hsl(var(--primary)) 80%, transparent);
+          }
+        }
+      }
+    }
+  }
   .\[\&_button\]\:h-8 {
     & button {
       height: calc(var(--spacing) * 8);
@@ -1619,6 +2210,16 @@
       left: calc(var(--spacing) * 4);
     }
   }
+  .\[\&\>svg\]\:text-destructive {
+    &>svg {
+      color: hsl(var(--destructive));
+    }
+  }
+  .\[\&\>svg\]\:text-foreground {
+    &>svg {
+      color: hsl(var(--foreground));
+    }
+  }
   .\[\&\>svg\+div\]\:translate-y-\[-3px\] {
     &>svg+div {
       --tw-translate-y: -3px;
@@ -1667,24 +2268,24 @@
   --radius: 0.5rem;
 }
 .dark {
-  --background: 222.2 84% 4.9%;
-  --foreground: 210 40% 98%;
-  --card: 222.2 84% 4.9%;
-  --card-foreground: 210 40% 98%;
-  --popover: 222.2 84% 4.9%;
-  --popover-foreground: 210 40% 98%;
+  --background: 0 0% 10%;
+  --foreground: 0 0% 98%;
+  --card: 0 0% 12%;
+  --card-foreground: 0 0% 98%;
+  --popover: 0 0% 12%;
+  --popover-foreground: 0 0% 98%;
   --primary: 199.1 89.1% 48.2%;
-  --primary-foreground: 210 40% 98%;
-  --secondary: 217.2 32.6% 17.5%;
-  --secondary-foreground: 210 40% 98%;
-  --muted: 217.2 32.6% 17.5%;
-  --muted-foreground: 215 20.2% 65.1%;
-  --accent: 217.2 32.6% 17.5%;
-  --accent-foreground: 210 40% 98%;
+  --primary-foreground: 0 0% 98%;
+  --secondary: 0 0% 18%;
+  --secondary-foreground: 0 0% 98%;
+  --muted: 0 0% 18%;
+  --muted-foreground: 0 0% 65%;
+  --accent: 0 0% 18%;
+  --accent-foreground: 0 0% 98%;
   --destructive: 0 62.8% 30.6%;
-  --destructive-foreground: 210 40% 98%;
-  --border: 217.2 32.6% 17.5%;
-  --input: 217.2 32.6% 17.5%;
+  --destructive-foreground: 0 0% 98%;
+  --border: 0 0% 20%;
+  --input: 0 0% 20%;
   --ring: 199.1 89.1% 48.2%;
 }
 @keyframes accordion-down {
@@ -1863,6 +2464,22 @@
     animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
   }
 }
+@keyframes accordion-down {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--radix-accordion-content-height);
+  }
+}
+@keyframes accordion-up {
+  from {
+    height: var(--radix-accordion-content-height);
+  }
+  to {
+    height: 0;
+  }
+}
 @layer properties {
   @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
     *, ::before, ::after, ::backdrop {