@zayne-labs/ui-react 0.10.5 → 0.10.6

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,23 @@
     --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;
     --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 +182,9 @@
     container-type: inline-size;
     container-name: card-header;
   }
+  .visible {
+    visibility: visible;
+  }
   .absolute {
     position: absolute;
   }
@@ -186,11 +197,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 +215,6 @@
   .z-\[2\] {
     z-index: 2;
   }
-  .z-\[100\] {
-    z-index: 100;
-  }
   .col-start-2 {
     grid-column-start: 2;
   }
@@ -249,6 +260,9 @@
   .hidden {
     display: none;
   }
+  .inline-block {
+    display: inline-block;
+  }
   .inline-flex {
     display: inline-flex;
   }
@@ -256,6 +270,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 +282,9 @@
     width: 100%;
     height: 100%;
   }
+  .h-1\.5 {
+    height: calc(var(--spacing) * 1.5);
+  }
   .h-full {
     height: 100%;
   }
@@ -276,9 +297,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 +333,6 @@
   .cursor-grab {
     cursor: grab;
   }
-  .cursor-pointer {
-    cursor: pointer;
-  }
   .snap-x {
     scroll-snap-type: x var(--tw-scroll-snap-strictness);
   }
@@ -342,6 +381,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 +396,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 +419,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 +435,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 +489,99 @@
     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-300 {
+    --tw-duration: 300ms;
+    transition-duration: 300ms;
+  }
   .duration-800 {
     --tw-duration: 800ms;
     transition-duration: 800ms;
   }
+  .ease-linear {
+    --tw-ease: linear;
+    transition-timing-function: linear;
+  }
+  .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 +596,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 +649,53 @@
       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-\[index\=0\]\:mt-1 {
     &[data-index="0"] {
       margin-top: calc(var(--spacing) * 1);
     }
   }
+  .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 +727,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 +947,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 +969,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 +1009,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;
     }
   }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@zayne-labs/ui-react",
   "type": "module",
-  "version": "0.10.5",
+  "version": "0.10.6",
   "description": "A composable UI/UI-utilities components library. ",
   "author": "Ryan Zayne",
   "license": "MIT",
@@ -19,11 +19,10 @@
     ".": null,
     "./style.css": "./dist/style.css",
     "./css/*": "./css/*",
-    "./ui": "./dist/esm/components/ui/index.js",
-    "./ui/*": "./dist/esm/components/ui/*/index.js",
-    "./common": "./dist/esm/components/common/index.js",
-    "./common/*": "./dist/esm/components/common/*/index.js",
-    "./utils": "./dist/esm/lib/utils/index.js"
+    "./ui": "./dist/esm/ui/index.js",
+    "./ui/*": "./dist/esm/ui/*/index.js",
+    "./common": "./dist/esm/common/index.js",
+    "./common/*": "./dist/esm/common/*/index.js"
   },
   "files": [
     "css",
@@ -38,6 +37,7 @@
     "react-hook-form": "7.x.x",
     "tailwind-merge": "^2.5.0 || ^3.0.0",
     "tailwindcss": "4.x.x",
+    "tw-animate-css": "1.x.x",
     "zustand": "4.x.x || 5.x.x"
   },
   "peerDependenciesMeta": {
@@ -52,20 +52,20 @@
     }
   },
   "dependencies": {
-    "@zayne-labs/toolkit-core": "0.10.8",
-    "@zayne-labs/toolkit-react": "0.10.8",
-    "@zayne-labs/toolkit-type-helpers": "0.10.8"
+    "@zayne-labs/toolkit-core": "0.11.5",
+    "@zayne-labs/toolkit-react": "0.11.5",
+    "@zayne-labs/toolkit-type-helpers": "0.11.5"
   },
   "devDependencies": {
     "@arethetypeswrong/cli": "0.18.2",
     "@size-limit/esbuild-why": "11.2.0",
     "@size-limit/preset-small-lib": "11.2.0",
-    "@tailwindcss/cli": "^4.1.12",
+    "@tailwindcss/cli": "^4.1.13",
     "@total-typescript/ts-reset": "0.6.1",
-    "@types/react": "19.1.11",
-    "@types/react-dom": "19.1.7",
-    "@zayne-labs/tsconfig": "0.9.10",
-    "concurrently": "9.2.0",
+    "@types/react": "19.1.13",
+    "@types/react-dom": "19.1.9",
+    "@zayne-labs/tsconfig": "0.9.15",
+    "concurrently": "9.2.1",
     "cross-env": "10.0.0",
     "publint": "0.3.12",
     "publish": "^0.6.0",
@@ -74,8 +74,9 @@
     "react-hook-form": "7.62.0",
     "size-limit": "11.2.0",
     "tailwind-merge": "3.3.1",
-    "tailwindcss": "^4.1.12",
-    "tsdown": "^0.12.9",
+    "tailwindcss": "^4.1.13",
+    "tsdown": "0.15.1",
+    "tw-animate-css": "^1.3.7",
     "typescript": "5.9.2",
     "zustand": "5.0.8"
   },
@@ -87,7 +88,7 @@
   "size-limit": [
     {
       "path": "src/components/ui/**/index.ts",
-      "limit": "12 kB"
+      "limit": "7 kB"
     },
     {
       "path": "src/components/common/**/index.ts",
@@ -104,8 +105,10 @@
     "lint:check-types": "tsc --pretty -p tsconfig.json",
     "lint:eslint": "eslint . --max-warnings 0",
     "lint:eslint:interactive": "pnpx eslint-interactive@latest . --max-warnings 0 --fix",
+    "lint:format": "prettier --write .",
     "lint:publint": "publint --strict .",
     "lint:size": "size-limit",
+    "release": "pnpm publish --no-git-checks",
     "release:test": "pnpx pkg-pr-new publish"
   }
 }