@noxickon/onyx 4.0.3 → 4.0.5

package/dist/animations.css

@@ -0,0 +1,283 @@
+@layer utilities {
+  /* Base animation keyframes - combine fade, slide, zoom, and spin effects using CSS variables */
+  @keyframes enter {
+    from {
+      opacity: var(--tw-enter-opacity, 1);
+      transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0)
+        scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1))
+        rotate(var(--tw-enter-rotate, 0));
+    }
+  }
+
+  @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));
+    }
+  }
+
+  @keyframes tooltip-blur-in {
+    from {
+      opacity: var(--tw-enter-opacity, 1);
+      backdrop-filter: blur(0px);
+      -webkit-backdrop-filter: blur(0px);
+      transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0);
+    }
+    to {
+      opacity: 1;
+      backdrop-filter: blur(24px);
+      -webkit-backdrop-filter: blur(24px);
+      transform: translate3d(0, 0, 0);
+    }
+  }
+
+  @keyframes tooltip-blur-out {
+    from {
+      opacity: 1;
+      backdrop-filter: blur(24px);
+      -webkit-backdrop-filter: blur(24px);
+    }
+    to {
+      opacity: var(--tw-exit-opacity, 1);
+      backdrop-filter: blur(0px);
+      -webkit-backdrop-filter: blur(0px);
+    }
+  }
+
+  /* Dropdown animations */
+  .ox-dropdown-animate[data-ox-state='open'][data-ox-side='right'],
+  .ox-hovercard-animate[data-ox-state='open'][data-ox-side='right'],
+  .ox-popover-animate[data-ox-state='open'][data-ox-side='right'] {
+    animation: enter 150ms ease-out;
+    transform-origin: left center;
+    --tw-enter-opacity: 0;
+    --tw-enter-translate-x: -0.5rem;
+    --tw-enter-scale: 0.95;
+  }
+
+  .ox-tooltip-animate[data-ox-state='open'][data-ox-side='right'] {
+    animation: tooltip-blur-in 150ms ease-out;
+    --tw-enter-opacity: 0;
+    --tw-enter-translate-x: -0.5rem;
+  }
+
+  .ox-dropdown-animate[data-ox-state='open'][data-ox-side='left'],
+  .ox-hovercard-animate[data-ox-state='open'][data-ox-side='left'],
+  .ox-popover-animate[data-ox-state='open'][data-ox-side='left'] {
+    animation: enter 150ms ease-out;
+    transform-origin: right center;
+    --tw-enter-opacity: 0;
+    --tw-enter-translate-x: 0.5rem;
+    --tw-enter-scale: 0.95;
+  }
+
+  .ox-tooltip-animate[data-ox-state='open'][data-ox-side='left'] {
+    animation: tooltip-blur-in 150ms ease-out;
+    --tw-enter-opacity: 0;
+    --tw-enter-translate-x: 0.5rem;
+  }
+
+  .ox-dropdown-animate[data-ox-state='open'][data-ox-side='bottom'],
+  .ox-hovercard-animate[data-ox-state='open'][data-ox-side='bottom'],
+  .ox-popover-animate[data-ox-state='open'][data-ox-side='bottom'],
+  .ox-select-animate[data-ox-state='open'][data-ox-side='bottom'] {
+    animation: enter 150ms ease-out;
+    transform-origin: center top;
+    --tw-enter-opacity: 0;
+    --tw-enter-translate-y: -0.5rem;
+    --tw-enter-scale: 0.95;
+  }
+
+  .ox-tooltip-animate[data-ox-state='open'][data-ox-side='bottom'] {
+    animation: tooltip-blur-in 150ms ease-out;
+    --tw-enter-opacity: 0;
+    --tw-enter-translate-y: -0.5rem;
+  }
+
+  .ox-dropdown-animate[data-ox-state='open'][data-ox-side='top'],
+  .ox-hovercard-animate[data-ox-state='open'][data-ox-side='top'],
+  .ox-popover-animate[data-ox-state='open'][data-ox-side='top'],
+  .ox-select-animate[data-ox-state='open'][data-ox-side='top'] {
+    animation: enter 150ms ease-out;
+    transform-origin: center bottom;
+    --tw-enter-opacity: 0;
+    --tw-enter-translate-y: 0.5rem;
+    --tw-enter-scale: 0.95;
+  }
+
+  .ox-tooltip-animate[data-ox-state='open'][data-ox-side='top'] {
+    animation: tooltip-blur-in 150ms ease-out;
+    --tw-enter-opacity: 0;
+    --tw-enter-translate-y: 0.5rem;
+  }
+
+  .ox-dropdown-animate[data-ox-state='closing'],
+  .ox-hovercard-animate[data-ox-state='closing'],
+  .ox-popover-animate[data-ox-state='closing'],
+  .ox-select-animate[data-ox-state='closing'] {
+    animation: exit 100ms ease-in forwards;
+    --tw-exit-opacity: 0;
+    --tw-exit-scale: 0.95;
+  }
+
+  .ox-tooltip-animate[data-ox-state='closing'] {
+    animation: tooltip-blur-out 100ms ease-in forwards;
+    --tw-exit-opacity: 0;
+  }
+
+  /* Date input animations */
+  .ox-date-input-animate[data-ox-state='open'][data-ox-side='bottom'] {
+    animation: enter 250ms ease-out;
+    --tw-enter-opacity: 0;
+    --tw-enter-translate-y: -0.5rem;
+  }
+
+  .ox-date-input-animate[data-ox-state='open'][data-ox-side='top'] {
+    animation: enter 250ms ease-out;
+    --tw-enter-opacity: 0;
+    --tw-enter-translate-y: 0.5rem;
+  }
+
+  .ox-date-input-animate[data-ox-state='closing'] {
+    animation: exit 200ms ease-in forwards;
+    --tw-exit-opacity: 0;
+  }
+
+  /* Dialog animations */
+  .ox-dialog-animation[data-ox-state='open'] {
+    animation: enter 250ms ease-out;
+    --tw-enter-opacity: 0;
+    --tw-enter-scale: 0.95;
+  }
+
+  .ox-dialog-animation[data-ox-state='closing'] {
+    animation: exit 200ms ease-in forwards;
+    --tw-exit-opacity: 0;
+    --tw-exit-scale: 0.95;
+  }
+
+  /* Drawer animations */
+  .ox-drawer-animate[data-ox-state='open'][data-ox-side='left'] {
+    animation: enter 250ms ease-out;
+    --tw-enter-translate-x: -100%;
+  }
+
+  .ox-drawer-animate[data-ox-state='closing'][data-ox-side='left'] {
+    animation: exit 250ms ease-in forwards;
+    --tw-exit-translate-x: -100%;
+  }
+
+  .ox-drawer-animate[data-ox-state='open'][data-ox-side='right'] {
+    animation: enter 250ms ease-out;
+    --tw-enter-translate-x: 100%;
+  }
+
+  .ox-drawer-animate[data-ox-state='closing'][data-ox-side='right'] {
+    animation: exit 250ms ease-in forwards;
+    --tw-exit-translate-x: 100%;
+  }
+
+  .ox-drawer-animate[data-ox-state='open'][data-ox-side='top'] {
+    animation: enter 250ms ease-out;
+    --tw-enter-translate-y: -100%;
+  }
+
+  .ox-drawer-animate[data-ox-state='closing'][data-ox-side='top'] {
+    animation: exit 250ms ease-in forwards;
+    --tw-exit-translate-y: -100%;
+  }
+
+  .ox-drawer-animate[data-ox-state='open'][data-ox-side='bottom'] {
+    animation: enter 250ms ease-out;
+    --tw-enter-translate-y: 100%;
+  }
+
+  .ox-drawer-animate[data-ox-state='closing'][data-ox-side='bottom'] {
+    animation: exit 250ms ease-in forwards;
+    --tw-exit-translate-y: 100%;
+  }
+
+  /* Backdrop */
+  @keyframes backdrop-in {
+    from {
+      opacity: 0;
+      background-color: rgba(0, 0, 0, 0);
+      backdrop-filter: blur(0px);
+      -webkit-backdrop-filter: blur(0px);
+    }
+    to {
+      opacity: 1;
+      background-color: rgba(0, 0, 0, 0.5);
+      backdrop-filter: blur(6px);
+      -webkit-backdrop-filter: blur(6px);
+    }
+  }
+
+  @keyframes backdrop-out {
+    from {
+      opacity: 1;
+      background-color: rgba(0, 0, 0, 0.5);
+      backdrop-filter: blur(6px);
+      -webkit-backdrop-filter: blur(6px);
+    }
+    to {
+      opacity: 0;
+      background-color: rgba(0, 0, 0, 0);
+      backdrop-filter: blur(0px);
+      -webkit-backdrop-filter: blur(0px);
+    }
+  }
+
+  /* Dialog backdrop */
+  .ox-dialog-backdrop::backdrop {
+    opacity: 1;
+    backdrop-filter: blur(6px);
+    background-color: rgba(0, 0, 0, 0.5);
+    -webkit-backdrop-filter: blur(6px);
+  }
+
+  .ox-dialog-backdrop[data-ox-state='open']::backdrop {
+    animation: backdrop-in 250ms ease-out;
+  }
+
+  .ox-dialog-backdrop[data-ox-state='closing']::backdrop {
+    animation: backdrop-out 200ms ease-in;
+  }
+
+  /* Drawer backdrop */
+  .ox-drawer-backdrop {
+    opacity: 1;
+    backdrop-filter: blur(6px);
+    background-color: rgba(0, 0, 0, 0.5);
+    -webkit-backdrop-filter: blur(6px);
+  }
+
+  .ox-drawer-backdrop[data-ox-state='open'] {
+    animation: backdrop-in 250ms ease-out forwards;
+  }
+
+  .ox-drawer-backdrop[data-ox-state='closing'] {
+    animation: backdrop-out 250ms ease-in forwards;
+  }
+
+  /* Sidebar submenu collapse/expand animation */
+  .ox-sidebar-submenu {
+    grid-template-rows: 0fr;
+    opacity: 0;
+    transition:
+      grid-template-rows 200ms cubic-bezier(0.4, 0, 0.2, 1),
+      opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  .ox-sidebar-submenu[data-ox-state='open'] {
+    grid-template-rows: 1fr;
+    opacity: 1;
+  }
+
+  .ox-sidebar-submenu > * {
+    overflow: hidden;
+    min-width: 0;
+  }
+}

package/dist/chunks/{ui-DrKTwQ0M.js → ui-C7uZ0doH.js}

@@ -19468,7 +19468,7 @@ const H2 = (t) => {
   let g;
   e[10] !== n || e[11] !== o || e[12] !== a || e[13] !== p || e[14] !== h ? (g = /* @__PURE__ */ C("ul", { id: p, "aria-multiselectable": a, className: h, role: "listbox", ...o, "data-ox-slot": "select-content", children: n }), e[10] = n, e[11] = o, e[12] = a, e[13] = p, e[14] = h, e[15] = g) : g = e[15];
   let b;
-  return e[16] !== m || e[17] !== g ? (b = /* @__PURE__ */ C(Ie.Content, { align: "start", className: 'ox-select-animate rounded-lg border border-border bg-popover p-1 text-sm text-popover-foreground shadow-md [&_svg:not([class*="size-"])]:size-4', "data-ox-state": m, ref: d, side: "bottom", sideOffset: 8, children: g }), e[16] = m, e[17] = g, e[18] = b) : b = e[18], b;
+  return e[16] !== m || e[17] !== g ? (b = /* @__PURE__ */ C(Ie.Content, { align: "start", className: 'z-50 ox-select-animate rounded-lg border border-border bg-popover p-1 text-sm text-popover-foreground shadow-md [&_svg:not([class*="size-"])]:size-4', "data-ox-state": m, ref: d, side: "bottom", sideOffset: 8, children: g }), e[16] = m, e[17] = g, e[18] = b) : b = e[18], b;
 }, Ei = (t) => t == null ? [] : Array.isArray(t) ? t : [t], cv = (t) => {
   const e = z.c(71), {
     children: n,