@noxickon/onyx 4.0.3 → 4.0.4

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/styles.css

@@ -0,0 +1,44 @@
+@import 'tailwindcss';
+
+@import './theme.css';
+@import './utilities.css';
+@import './animations.css';
+
+@variant dark (html[data-theme='dark'] &);
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+
+  ::selection {
+    @apply bg-selection text-selection-foreground;
+  }
+
+  html {
+    @apply overscroll-y-none scroll-smooth;
+  }
+
+  body {
+    font-synthesis-weight: none;
+    text-rendering: optimizeLegibility;
+    @apply overscroll-y-none text-gray-50;
+  }
+}
+
+/* Firefox: Remove number input spinners */
+input[type='number'] {
+  -moz-appearance: textfield;
+}
+
+/* Chrome/Safari/Edge: Remove number input spinners */
+input[type='number']::-webkit-inner-spin-button,
+input[type='number']::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Remove search cancel button */
+input[type='search']::-webkit-search-cancel-button {
+  display: none;
+}

package/dist/theme.css

@@ -0,0 +1,177 @@
+@theme {
+  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
+  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
+
+  --container-8xl: 88rem;
+  --container-9xl: 96rem;
+  --container-10xl: 104rem;
+  --container-11xl: 112rem;
+  --container-12xl: 120rem;
+  --container-13xl: 128rem;
+  --container-14xl: 136rem;
+  --container-15xl: 144rem;
+  --container-16xl: 160rem;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover-stroke: var(--popover-stroke);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-neutral-accent: var(--neutral-accent);
+  --color-neutral-accent-foreground: var(--neutral-accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-info: var(--info);
+  --color-info-foreground: var(--info-foreground);
+  --color-destructive-muted: var(--destructive-muted);
+  --color-success-muted: var(--success-muted);
+  --color-warning-muted: var(--warning-muted);
+  --color-info-muted: var(--info-muted);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-sidebar: var(--sidebar);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-surface: var(--surface);
+  --color-surface-foreground: var(--surface-foreground);
+  --color-code: var(--code);
+  --color-code-foreground: var(--code-foreground);
+  --color-code-highlight: var(--code-highlight);
+  --color-code-number: var(--code-number);
+  --color-selection: var(--selection);
+  --color-selection-foreground: var(--selection-foreground);
+}
+
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --popover-stroke: var(--border);
+  --primary: var(--color-violet-600);
+  --primary-foreground: var(--color-violet-50);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: var(--color-fuchsia-300);
+  --accent-foreground: var(--color-fuchsia-50);
+  --neutral-accent: oklch(0.97 0 0);
+  --neutral-accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.534 0.212 25.99);
+  --destructive-foreground: oklch(0.985 0 0);
+  --success: oklch(0.688 0.167 155.97);
+  --success-foreground: oklch(0.985 0 0);
+  --warning: oklch(0.717 0.146 90.01);
+  --warning-foreground: oklch(0.145 0 0);
+  --info: oklch(0.625 0.205 255.69);
+  --info-foreground: oklch(0.985 0 0);
+  --destructive-muted: oklch(0.462 0.188 26.55);
+  --success-muted: oklch(0.58 0.131 160.24);
+  --warning-muted: oklch(0.603 0.124 94.51);
+  --info-muted: oklch(0.529 0.223 260.6);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: var(--color-violet-400);
+  --chart-1: var(--color-violet-300);
+  --chart-2: var(--color-violet-500);
+  --chart-3: var(--color-violet-600);
+  --chart-4: var(--color-violet-700);
+  --chart-5: var(--color-violet-800);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: var(--color-violet-600);
+  --sidebar-primary-foreground: var(--color-violet-50);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: var(--color-violet-400);
+  --surface: oklch(0.98 0 0);
+  --surface-foreground: oklch(0.145 0 0);
+  --code: var(--surface);
+  --code-foreground: var(--surface-foreground);
+  --code-highlight: oklch(0.96 0 0);
+  --code-number: oklch(0.56 0 0);
+  --selection: oklch(0.145 0 0);
+  --selection-foreground: oklch(1 0 0);
+}
+
+html[data-theme='dark'] {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.269 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --popover-stroke: oklch(1 0 0 / 17%);
+  --primary: var(--color-violet-600);
+  --primary-foreground: var(--color-violet-50);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: var(--color-fuchsia-300);
+  --accent-foreground: var(--color-fuchsia-50);
+  --neutral-accent: oklch(0.371 0 0);
+  --neutral-accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.611 0.201 23.37);
+  --destructive-foreground: oklch(0.985 0 0);
+  --success: oklch(0.8 0.182 151.71);
+  --success-foreground: oklch(0.145 0 0);
+  --warning: oklch(0.837 0.164 84.42);
+  --warning-foreground: oklch(0.145 0 0);
+  --info: oklch(0.714 0.143 254.62);
+  --info-foreground: oklch(0.145 0 0);
+  --destructive-muted: oklch(0.702 0.182 21.09);
+  --success-muted: oklch(0.829 0.201 155.9);
+  --warning-muted: oklch(0.872 0.156 88.33);
+  --info-muted: oklch(0.779 0.112 266.43);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: var(--color-violet-600);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: var(--color-violet-500);
+  --sidebar-primary-foreground: var(--color-violet-50);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: var(--color-violet-600);
+  --surface: oklch(0.2 0 0);
+  --surface-foreground: oklch(0.708 0 0);
+  --code: var(--surface);
+  --code-foreground: var(--surface-foreground);
+  --code-highlight: oklch(0.27 0 0);
+  --code-number: oklch(0.72 0 0);
+  --selection: oklch(0.922 0 0);
+  --selection-foreground: oklch(0.205 0 0);
+}

package/dist/utilities.css

@@ -0,0 +1,46 @@
+@utility ox-default-disabled {
+  opacity: 50%;
+  cursor: not-allowed;
+}
+
+@layer components {
+  .ox-focus-ring {
+    @apply outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50;
+  }
+
+  .ox-backdrop-blur-parent {
+    backdrop-filter: blur(0);
+    -webkit-backdrop-filter: blur(0);
+  }
+
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: color-mix(in oklab, var(--color-white) 25%, transparent) transparent;
+  }
+
+  *::-webkit-scrollbar {
+    width: 12px;
+  }
+
+  *::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  *::-webkit-scrollbar-thumb {
+    background-color: color-mix(in oklab, var(--color-white) 25%, transparent);
+    border-radius: 6px;
+    border: 3px solid transparent;
+  }
+
+  *::-webkit-scrollbar-thumb:hover {
+    background-color: color-mix(in oklab, var(--color-white) 40%, transparent);
+  }
+}
+
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+input:-webkit-autofill:active {
+  transition: background-color 5000s ease-in-out 0s;
+  -webkit-text-fill-color: white !important;
+}

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@noxickon/onyx",
-  "version": "4.0.3",
+  "version": "4.0.4",
   "type": "module",
   "main": "./dist/onyx.umd.js",
   "module": "./dist/onyx.es.js",
   "types": "./dist/index.d.ts",
-  "style": "./dist/ui.css",
+  "style": "./dist/styles.css",
   "sideEffects": [
     "*.css",
     "**/*.css"
@@ -43,7 +43,7 @@
       "types": "./dist/legacy/index.d.ts",
       "import": "./dist/legacy/legacy.es.js"
     },
-    "./styles": "./dist/ui.css"
+    "./styles": "./dist/styles.css"
   },
   "files": [
     "dist",
@@ -154,6 +154,7 @@
     "vite": "^7.0.6",
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-lib-inject-css": "^2.2.2",
+    "vite-plugin-static-copy": "^3.1.4",
     "vitest": "^4.0.9"
   },
   "overrides": {