@zayne-labs/ui-react 0.10.5 → 0.10.7

package/dist/style.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.1.12 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.1.13 | MIT License | https://tailwindcss.com */
 @layer properties;
 @layer theme, base, components, utilities;
 @layer theme {
@@ -10,15 +10,24 @@
     --spacing: 0.25rem;
     --text-sm: 0.875rem;
     --text-sm--line-height: calc(1.25 / 0.875);
+    --font-weight-medium: 500;
     --font-weight-semibold: 600;
+    --leading-snug: 1.375;
+    --radius-md: 0.375rem;
+    --radius-lg: 0.5rem;
     --radius-xl: 0.75rem;
+    --ease-out: cubic-bezier(0, 0, 0.2, 1);
     --default-transition-duration: 150ms;
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     --default-font-family: var(--font-sans);
     --default-mono-font-family: var(--font-mono);
-    --color-shadcn-muted-foreground: oklch(0.556 0 0);
-    --color-shadcn-destructive: oklch(0.577 0.245 27.325);
+    --color-zu-accent: oklch(0.967 0.001 286.375);
+    --color-zu-destructive: oklch(0.577 0.245 27.325);
+    --color-zu-muted-foreground: oklch(0.556 0 0);
+    --color-zu-primary: oklch(0.21 0.04 265.75);
+    --color-zu-ring: oklch(0.705 0.015 286.067);
     --animate-shake: shake 0.2s ease-in-out 0s 3;
+    --animate-files-in: files-in 0.3s ease-out forwards;
   }
 }
 @layer base {
@@ -174,6 +183,9 @@
     container-type: inline-size;
     container-name: card-header;
   }
+  .visible {
+    visibility: visible;
+  }
   .absolute {
     position: absolute;
   }
@@ -186,11 +198,14 @@
   .inset-0 {
     inset: calc(var(--spacing) * 0);
   }
+  .top-1\/2 {
+    top: calc(1/2 * 100%);
+  }
   .bottom-\[25px\] {
     bottom: 25px;
   }
-  .isolate {
-    isolation: isolate;
+  .left-1\/2 {
+    left: calc(1/2 * 100%);
   }
   .z-10 {
     z-index: 10;
@@ -201,9 +216,6 @@
   .z-\[2\] {
     z-index: 2;
   }
-  .z-\[100\] {
-    z-index: 100;
-  }
   .col-start-2 {
     grid-column-start: 2;
   }
@@ -249,6 +261,9 @@
   .hidden {
     display: none;
   }
+  .inline-block {
+    display: inline-block;
+  }
   .inline-flex {
     display: inline-flex;
   }
@@ -256,6 +271,10 @@
     width: calc(var(--spacing) * 5);
     height: calc(var(--spacing) * 5);
   }
+  .size-10 {
+    width: calc(var(--spacing) * 10);
+    height: calc(var(--spacing) * 10);
+  }
   .size-\[6px\] {
     width: 6px;
     height: 6px;
@@ -264,6 +283,9 @@
     width: 100%;
     height: 100%;
   }
+  .h-1\.5 {
+    height: calc(var(--spacing) * 1.5);
+  }
   .h-full {
     height: 100%;
   }
@@ -276,9 +298,30 @@
   .w-full {
     width: 100%;
   }
+  .min-w-0 {
+    min-width: calc(var(--spacing) * 0);
+  }
   .shrink-0 {
     flex-shrink: 0;
   }
+  .grow {
+    flex-grow: 1;
+  }
+  .-translate-x-1\/2 {
+    --tw-translate-x: calc(calc(1/2 * 100%) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .translate-x-\(--translate-distance\) {
+    --tw-translate-x: var(--translate-distance);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .-translate-y-1\/2 {
+    --tw-translate-y: calc(calc(1/2 * 100%) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .-rotate-90 {
+    rotate: calc(90deg * -1);
+  }
   .rotate-180 {
     rotate: 180deg;
   }
@@ -291,9 +334,6 @@
   .cursor-grab {
     cursor: grab;
   }
-  .cursor-pointer {
-    cursor: pointer;
-  }
   .snap-x {
     scroll-snap-type: x var(--tw-scroll-snap-strictness);
   }
@@ -342,6 +382,9 @@
   .gap-2 {
     gap: calc(var(--spacing) * 2);
   }
+  .gap-2\.5 {
+    gap: calc(var(--spacing) * 2.5);
+  }
   .gap-6 {
     gap: calc(var(--spacing) * 6);
   }
@@ -354,6 +397,17 @@
   .justify-self-end {
     justify-self: flex-end;
   }
+  .truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .overflow-hidden {
+    overflow: hidden;
+  }
+  .overflow-x-auto {
+    overflow-x: auto;
+  }
   .overflow-x-scroll {
     overflow-x: scroll;
   }
@@ -366,6 +420,15 @@
   .rounded-\[50\%\] {
     border-radius: 50%;
   }
+  .rounded-full {
+    border-radius: calc(infinity * 1px);
+  }
+  .rounded-lg {
+    border-radius: var(--radius-lg);
+  }
+  .rounded-md {
+    border-radius: var(--radius-md);
+  }
   .rounded-xl {
     border-radius: var(--radius-xl);
   }
@@ -373,9 +436,50 @@
     border-style: var(--tw-border-style);
     border-width: 1px;
   }
+  .border-2 {
+    border-style: var(--tw-border-style);
+    border-width: 2px;
+  }
+  .border-dashed {
+    --tw-border-style: dashed;
+    border-style: dashed;
+  }
   .bg-transparent {
     background-color: transparent;
   }
+  .bg-zu-accent\/50 {
+    background-color: color-mix(in srgb, oklch(0.967 0.001 286.375) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-zu-accent) 50%, transparent);
+    }
+  }
+  .bg-zu-primary {
+    background-color: var(--color-zu-primary);
+  }
+  .bg-zu-primary\/20 {
+    background-color: color-mix(in srgb, oklch(0.21 0.04 265.75) 20%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-zu-primary) 20%, transparent);
+    }
+  }
+  .bg-zu-primary\/50 {
+    background-color: color-mix(in srgb, oklch(0.21 0.04 265.75) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-zu-primary) 50%, transparent);
+    }
+  }
+  .object-cover {
+    object-fit: cover;
+  }
+  .p-1\.5 {
+    padding: calc(var(--spacing) * 1.5);
+  }
+  .p-2 {
+    padding: calc(var(--spacing) * 2);
+  }
+  .p-6 {
+    padding: calc(var(--spacing) * 6);
+  }
   .px-6 {
     padding-inline: calc(var(--spacing) * 6);
   }
@@ -386,52 +490,107 @@
     font-size: var(--text-sm);
     line-height: var(--tw-leading, var(--text-sm--line-height));
   }
+  .text-\[11px\] {
+    font-size: 11px;
+  }
   .text-\[12px\] {
     font-size: 12px;
   }
   .text-\[13px\] {
     font-size: 13px;
   }
+  .text-\[14px\] {
+    font-size: 14px;
+  }
   .leading-none {
     --tw-leading: 1;
     line-height: 1;
   }
+  .leading-snug {
+    --tw-leading: var(--leading-snug);
+    line-height: var(--leading-snug);
+  }
+  .font-medium {
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+  }
   .font-semibold {
     --tw-font-weight: var(--font-weight-semibold);
     font-weight: var(--font-weight-semibold);
   }
-  .text-shadcn-destructive {
-    color: var(--color-shadcn-destructive);
+  .text-zu-destructive {
+    color: var(--color-zu-destructive);
   }
-  .text-shadcn-muted-foreground {
-    color: var(--color-shadcn-muted-foreground);
+  .text-zu-muted-foreground {
+    color: var(--color-zu-muted-foreground);
   }
-  .lowercase {
-    text-transform: lowercase;
+  .text-zu-primary {
+    color: var(--color-zu-primary);
   }
-  .opacity-0 {
-    opacity: 0%;
+  .text-zu-primary\/20 {
+    color: color-mix(in srgb, oklch(0.21 0.04 265.75) 20%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--color-zu-primary) 20%, transparent);
+    }
   }
-  .opacity-60 {
-    opacity: 60%;
+  .lowercase {
+    text-transform: lowercase;
   }
   .shadow-sm {
     --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);
   }
+  .transition-\[clip-path\] {
+    transition-property: clip-path;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .transition-\[stroke-dashoffset\] {
+    transition-property: stroke-dashoffset;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .transition-colors {
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .transition-transform {
     transition-property: transform, translate, scale, rotate;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .duration-250 {
+    --tw-duration: 250ms;
+    transition-duration: 250ms;
+  }
+  .duration-300 {
+    --tw-duration: 300ms;
+    transition-duration: 300ms;
+  }
   .duration-800 {
     --tw-duration: 800ms;
     transition-duration: 800ms;
   }
+  .ease-linear {
+    --tw-ease: linear;
+    transition-timing-function: linear;
+  }
+  .ease-out {
+    --tw-ease: var(--ease-out);
+    transition-timing-function: var(--ease-out);
+  }
+  .outline-none {
+    --tw-outline-style: none;
+    outline-style: none;
+  }
   .select-none {
     -webkit-user-select: none;
     user-select: none;
   }
+  .\[clip-path\:var\(--clip-path\)\] {
+    clip-path: var(--clip-path);
+  }
   .\[scrollbar-width\:none\] {
     scrollbar-width: none;
   }
@@ -446,9 +605,27 @@
       background-color: transparent;
     }
   }
-  .placeholder\:text-shadcn-muted-foreground {
+  .placeholder\:text-zu-muted-foreground {
     &::placeholder {
-      color: var(--color-shadcn-muted-foreground);
+      color: var(--color-zu-muted-foreground);
+    }
+  }
+  .hover\:bg-zu-accent\/30 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, oklch(0.967 0.001 286.375) 30%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-zu-accent) 30%, transparent);
+        }
+      }
+    }
+  }
+  .focus-visible\:border-zu-ring\/50 {
+    &:focus-visible {
+      border-color: color-mix(in srgb, oklch(0.705 0.015 286.067) 50%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        border-color: color-mix(in oklab, var(--color-zu-ring) 50%, transparent);
+      }
     }
   }
   .focus-visible\:outline-hidden {
@@ -481,11 +658,74 @@
       grid-template-columns: 1fr auto;
     }
   }
+  .data-\[disabled\]\:pointer-events-none {
+    &[data-disabled] {
+      pointer-events: none;
+    }
+  }
+  .data-\[drag-over\]\:border-zu-primary\/30 {
+    &[data-drag-over] {
+      border-color: color-mix(in srgb, oklch(0.21 0.04 265.75) 30%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        border-color: color-mix(in oklab, var(--color-zu-primary) 30%, transparent);
+      }
+    }
+  }
+  .data-\[drag-over\]\:bg-zu-accent\/30 {
+    &[data-drag-over] {
+      background-color: color-mix(in srgb, oklch(0.967 0.001 286.375) 30%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-zu-accent) 30%, transparent);
+      }
+    }
+  }
+  .data-\[dragging\]\:bg-zu-accent\/30 {
+    &[data-dragging] {
+      background-color: color-mix(in srgb, oklch(0.967 0.001 286.375) 30%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-zu-accent) 30%, transparent);
+      }
+    }
+  }
   .data-\[index\=0\]\:mt-1 {
     &[data-index="0"] {
       margin-top: calc(var(--spacing) * 1);
     }
   }
+  .data-\[invalid\]\:border-zu-destructive {
+    &[data-invalid] {
+      border-color: var(--color-zu-destructive);
+    }
+  }
+  .data-\[invalid\]\:ring-zu-destructive\/20 {
+    &[data-invalid] {
+      --tw-ring-color: color-mix(in srgb, oklch(0.577 0.245 27.325) 20%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--color-zu-destructive) 20%, transparent);
+      }
+    }
+  }
+  .data-\[state\=active\]\:animate-files-in {
+    &[data-state="active"] {
+      animation: var(--animate-files-in);
+    }
+  }
+  .data-\[state\=inactive\]\:animate-out {
+    &[data-state="inactive"] {
+      animation: exit var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);
+    }
+  }
+  .data-\[state\=inactive\]\:fade-out-0 {
+    &[data-state="inactive"] {
+      --tw-exit-opacity: calc(0/100);
+      --tw-exit-opacity: 0;
+    }
+  }
+  .data-\[state\=inactive\]\:slide-out-to-top-2 {
+    &[data-state="inactive"] {
+      --tw-exit-translate-y: calc(var(--spacing) * 2*-1);
+    }
+  }
   .max-md\:cursor-default {
     @media (width < 48rem) {
       cursor: default;
@@ -517,10 +757,118 @@
       display: none;
     }
   }
+  .\[\&\>svg\]\:size-10 {
+    &>svg {
+      width: calc(var(--spacing) * 10);
+      height: calc(var(--spacing) * 10);
+    }
+  }
 }
 :where(.dark, [data-theme="dark"]) {
-  --color-shadcn-muted-foreground: oklch(0.708 0 0);
-  --color-shadcn-destructive: oklch(0.704 0.191 22.216);
+  --color-zu-accent: oklch(0.274 0.006 286.033);
+  --color-zu-muted-foreground: oklch(0.708 0 0);
+  --color-zu-destructive: oklch(0.704 0.191 22.216);
+  --color-zu-primary: oklch(0.92 0.004 286.32);
+  --color-zu-ring: oklch(0.552 0.016 285.938);
+}
+@property --tw-animation-delay {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0s;
+}
+@property --tw-animation-direction {
+  syntax: "*";
+  inherits: false;
+  initial-value: normal;
+}
+@property --tw-animation-duration {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-animation-fill-mode {
+  syntax: "*";
+  inherits: false;
+  initial-value: none;
+}
+@property --tw-animation-iteration-count {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-enter-blur {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-enter-opacity {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-enter-rotate {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-enter-scale {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-enter-translate-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-enter-translate-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-exit-blur {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-exit-opacity {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-exit-rotate {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-exit-scale {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-exit-translate-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-exit-translate-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-translate-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-translate-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-translate-z {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
 }
 @property --tw-rotate-x {
   syntax: "*";
@@ -629,6 +977,17 @@
   syntax: "*";
   inherits: false;
 }
+@property --tw-ease {
+  syntax: "*";
+  inherits: false;
+}
+@keyframes exit {
+  to {
+    opacity: var(--tw-exit-opacity,1);
+    transform: translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0)scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1))rotate(var(--tw-exit-rotate,0));
+    filter: blur(var(--tw-exit-blur,0));
+  }
+}
 @keyframes shake {
   0%,	100% {
     transform: translateX(0px);
@@ -640,9 +999,22 @@
     transform: translateX(-6px);
   }
 }
+@keyframes files-in {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(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 {
+      --tw-translate-x: 0;
+      --tw-translate-y: 0;
+      --tw-translate-z: 0;
       --tw-rotate-x: initial;
       --tw-rotate-y: initial;
       --tw-rotate-z: initial;
@@ -667,6 +1039,24 @@
       --tw-ring-offset-color: #fff;
       --tw-ring-offset-shadow: 0 0 #0000;
       --tw-duration: initial;
+      --tw-ease: initial;
+      --tw-animation-delay: 0s;
+      --tw-animation-direction: normal;
+      --tw-animation-duration: initial;
+      --tw-animation-fill-mode: none;
+      --tw-animation-iteration-count: 1;
+      --tw-enter-blur: 0;
+      --tw-enter-opacity: 1;
+      --tw-enter-rotate: 0;
+      --tw-enter-scale: 1;
+      --tw-enter-translate-x: 0;
+      --tw-enter-translate-y: 0;
+      --tw-exit-blur: 0;
+      --tw-exit-opacity: 1;
+      --tw-exit-rotate: 0;
+      --tw-exit-scale: 1;
+      --tw-exit-translate-x: 0;
+      --tw-exit-translate-y: 0;
     }
   }
 }