@nqlib/nqui 0.1.0

package/dist/pages/AppBuilder.d.ts

@@ -0,0 +1,2 @@
+export default function AppBuilder(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AppBuilder.d.ts.map

package/dist/pages/AppBuilder.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppBuilder.d.ts","sourceRoot":"","sources":["../../src/pages/AppBuilder.tsx"],"names":[],"mappings":"AAOA,MAAM,CAAC,OAAO,UAAU,UAAU,4CAwEjC"}

package/dist/pages/Dashboard.d.ts

@@ -0,0 +1,2 @@
+export default function Dashboard(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Dashboard.d.ts.map

package/dist/pages/Dashboard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dashboard.d.ts","sourceRoot":"","sources":["../../src/pages/Dashboard.tsx"],"names":[],"mappings":"AAwOA,MAAM,CAAC,OAAO,UAAU,SAAS,4CAspDhC"}

package/dist/pages/Drafts.d.ts

@@ -0,0 +1,2 @@
+export default function Drafts(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Drafts.d.ts.map

package/dist/pages/Drafts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drafts.d.ts","sourceRoot":"","sources":["../../src/pages/Drafts.tsx"],"names":[],"mappings":"AAAA,MAAM,CAAC,OAAO,UAAU,MAAM,4CAW7B"}

package/dist/pages/Inbox.d.ts

@@ -0,0 +1,2 @@
+export default function Inbox(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Inbox.d.ts.map

package/dist/pages/Inbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Inbox.d.ts","sourceRoot":"","sources":["../../src/pages/Inbox.tsx"],"names":[],"mappings":"AAAA,MAAM,CAAC,OAAO,UAAU,KAAK,4CAW5B"}

package/dist/pages/Junk.d.ts

@@ -0,0 +1,2 @@
+export default function Junk(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Junk.d.ts.map

package/dist/pages/Junk.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Junk.d.ts","sourceRoot":"","sources":["../../src/pages/Junk.tsx"],"names":[],"mappings":"AAAA,MAAM,CAAC,OAAO,UAAU,IAAI,4CAW3B"}

package/dist/pages/Sent.d.ts

@@ -0,0 +1,2 @@
+export default function Sent(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Sent.d.ts.map

package/dist/pages/Sent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sent.d.ts","sourceRoot":"","sources":["../../src/pages/Sent.tsx"],"names":[],"mappings":"AAAA,MAAM,CAAC,OAAO,UAAU,IAAI,4CAW3B"}

package/dist/pages/Settings.d.ts

@@ -0,0 +1,2 @@
+export default function Settings(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Settings.d.ts.map

package/dist/pages/Settings.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Settings.d.ts","sourceRoot":"","sources":["../../src/pages/Settings.tsx"],"names":[],"mappings":"AAAA,MAAM,CAAC,OAAO,UAAU,QAAQ,4CAW/B"}

package/dist/pages/Trash.d.ts

@@ -0,0 +1,2 @@
+export default function Trash(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Trash.d.ts.map

package/dist/pages/Trash.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Trash.d.ts","sourceRoot":"","sources":["../../src/pages/Trash.tsx"],"names":[],"mappings":"AAAA,MAAM,CAAC,OAAO,UAAU,KAAK,4CAW5B"}

package/dist/styles.css

@@ -0,0 +1,544 @@
+/* nqui Design System CSS
+ *
+ * This file contains ALL design tokens, CSS variables, and color scales from nqui.
+ * It includes everything the library needs to style components correctly.
+ *
+ * IMPORTANT: This file does NOT include Tailwind CSS imports or framework-specific directives.
+ * You must have Tailwind CSS configured in your project and add the appropriate imports.
+ *
+ * For Next.js with Tailwind CSS v4:
+ *   @import "tailwindcss";
+ *   @source "./**/*.{js,ts,jsx,tsx,mdx}";
+ *   @source "../node_modules/@nqlib/nqui/dist/**/*.js";
+ *   @import "@nqlib/nqui/styles";
+ *
+ * For Vite with Tailwind CSS v4:
+ *   @import "tailwindcss";
+ *   @import "@nqlib/nqui/styles";
+ *
+ * This file includes:
+ * - All CSS variables (--primary, --background, --foreground, etc.)
+ * - Complete color scales (100-600) for all semantic colors
+ * - Light and dark mode support
+ * - Base layer styles
+ * - Utility animations
+ *
+ * Generated by: npm run build:lib
+ * Do not edit manually
+ */
+
+
+/* ============================================
+   nqui Color System & Design Tokens
+   ============================================ */
+
+:root {
+    /* ============================================
+       Primary Color Scale - Light Mode
+       Blue Theme (Hue 240)
+       ============================================ */
+
+    /* Primary Color Scale (Light Mode) - Blue Theme (Hue 240) */
+    --primary-100: oklch(0.95 0.08 240);
+    --primary-200: oklch(0.90 0.10 240);
+    --primary-300: oklch(0.85 0.12 240);
+    --primary-400: oklch(0.80 0.14 240);
+    --primary-500: oklch(0.60 0.25 240); /* Main primary - darker for light mode */
+    --primary-600: oklch(0.50 0.28 240);
+
+    /* ============================================
+       Semantic Color Scales - Light Mode
+       ============================================ */
+
+    /* Success Color Scale (Light Mode) - Green (Hue 142) */
+    --success-100: oklch(0.95 0.08 142);
+    --success-200: oklch(0.90 0.10 142);
+    --success-300: oklch(0.75 0.12 142);
+    --success-400: oklch(0.60 0.14 142);
+    --success-500: oklch(0.50 0.15 142);
+    --success-600: oklch(0.40 0.18 142);
+
+    /* Warning Color Scale (Light Mode) - Orange (Hue 65) */
+    --warning-100: oklch(0.95 0.08 65);
+    --warning-200: oklch(0.90 0.10 65);
+    --warning-300: oklch(0.85 0.12 65);
+    --warning-400: oklch(0.75 0.14 65);
+    --warning-500: oklch(0.70 0.15 65);
+    --warning-600: oklch(0.60 0.18 65);
+
+    /* Destructive Color Scale (Light Mode) - Red (Hue 25) */
+    --danger-100: oklch(0.95 0.08 25);
+    --danger-200: oklch(0.90 0.10 25);
+    --danger-300: oklch(0.80 0.12 25);
+    --danger-400: oklch(0.70 0.14 25);
+    --danger-500: oklch(0.60 0.15 25);
+    --danger-600: oklch(0.50 0.18 25);
+
+    /* Info Color Scale (Light Mode) - Cyan/Teal (Hue 200) */
+    --info-100: oklch(0.95 0.08 200);
+    --info-200: oklch(0.90 0.10 200);
+    --info-300: oklch(0.80 0.12 200);
+    --info-400: oklch(0.70 0.14 200);
+    --info-500: oklch(0.60 0.15 200);
+    --info-600: oklch(0.50 0.18 200);
+
+    /* ============================================
+       System Color Mappings - Light Mode
+       ============================================ */
+
+    /* Primary Colors - Mapped to color scales */
+    --primary: var(--primary-500);
+    --primary-foreground: oklch(0.98 0 0); /* Light text for contrast */
+    --primary-hover: var(--primary-400);
+    --ring: var(--primary-500); /* Focus ring uses primary color */
+
+    /* Semantic Colors - Mapped to color scales */
+    --success: var(--success-500);
+    --success-foreground: oklch(0.98 0 0);
+
+    --warning: var(--warning-500);
+    --warning-foreground: oklch(0.145 0 0);
+
+    --destructive: var(--danger-500);
+    --destructive-foreground: oklch(0.98 0 0);
+
+    --info: var(--info-500);
+    --info-foreground: oklch(0.98 0 0);
+
+    /* Additional variables from index.css */
+    --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);
+    /* --primary and --primary-foreground are now defined in colors.css */
+    --secondary: oklch(0.967 0.001 286.375);
+    --secondary-foreground: oklch(0.21 0.006 285.885);
+    --muted: oklch(0.97 0 0);
+    --muted-foreground: oklch(0.556 0 0);
+    --accent: oklch(0.97 0 0);
+    --accent-foreground: oklch(0.205 0 0);
+    /* --destructive, --success, --warning, --info and their foregrounds are now defined in colors.css */
+    --border: oklch(0.922 0 0);
+    --input: oklch(0.922 0 0);
+    /* --ring is now defined in colors.css to use primary color */
+    --chart-1: oklch(0.809 0.105 251.813);
+    --chart-2: oklch(0.623 0.214 259.815);
+    --chart-3: oklch(0.546 0.245 262.881);
+    --chart-4: oklch(0.488 0.243 264.376);
+    --chart-5: oklch(0.424 0.199 265.638);
+    --radius: 0.45rem;
+    --sidebar: oklch(0.985 0 0);
+    --sidebar-foreground: oklch(0.145 0 0);
+    --sidebar-primary: oklch(0.546 0.245 262.881);
+    --sidebar-primary-foreground: oklch(0.97 0.014 254.604);
+    --sidebar-accent: oklch(0.97 0 0);
+    --sidebar-accent-foreground: oklch(0.205 0 0);
+    --sidebar-border: oklch(0.922 0 0);
+    --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+    /* ============================================
+       Primary Color Scale - Dark Mode
+       Blue Theme (Hue 240)
+       ============================================ */
+
+    /* Primary Color Scale (Dark Mode) - Blue Theme (Hue 240) */
+    --primary-100: oklch(0.40 0.15 240);
+    --primary-200: oklch(0.45 0.18 240);
+    --primary-300: oklch(0.50 0.20 240);
+    --primary-400: oklch(0.55 0.22 240);
+    --primary-500: oklch(0.65 0.20 240); /* Main primary - lighter for dark mode */
+    --primary-600: oklch(0.70 0.22 240);
+
+    /* ============================================
+       Semantic Color Scales - Dark Mode
+       ============================================ */
+
+    /* Success Color Scale (Dark Mode) - Green (Hue 142) */
+    --success-100: oklch(0.40 0.15 142);
+    --success-200: oklch(0.45 0.18 142);
+    --success-300: oklch(0.50 0.20 142);
+    --success-400: oklch(0.55 0.22 142);
+    --success-500: oklch(0.65 0.20 142);
+    --success-600: oklch(0.70 0.22 142);
+
+    /* Warning Color Scale (Dark Mode) - Orange (Hue 65) */
+    --warning-100: oklch(0.50 0.15 65);
+    --warning-200: oklch(0.55 0.18 65);
+    --warning-300: oklch(0.60 0.20 65);
+    --warning-400: oklch(0.65 0.22 65);
+    --warning-500: oklch(0.75 0.15 65);
+    --warning-600: oklch(0.80 0.18 65);
+
+    /* Destructive Color Scale (Dark Mode) - Red (Hue 25) */
+    --danger-100: oklch(0.40 0.15 25);
+    --danger-200: oklch(0.45 0.18 25);
+    --danger-300: oklch(0.50 0.20 25);
+    --danger-400: oklch(0.55 0.22 25);
+    --danger-500: oklch(0.65 0.15 25);
+    --danger-600: oklch(0.70 0.18 25);
+
+    /* Info Color Scale (Dark Mode) - Cyan/Teal (Hue 200) */
+    --info-100: oklch(0.40 0.15 200);
+    --info-200: oklch(0.45 0.18 200);
+    --info-300: oklch(0.50 0.20 200);
+    --info-400: oklch(0.55 0.22 200);
+    --info-500: oklch(0.65 0.15 200);
+    --info-600: oklch(0.70 0.18 200);
+
+    /* ============================================
+       System Color Mappings - Dark Mode
+       ============================================ */
+
+    /* Primary Colors - Mapped to color scales */
+    --primary: var(--primary-500);
+    --primary-foreground: oklch(0.98 0 0); /* Light text for contrast */
+    --primary-hover: var(--primary-400);
+    --ring: var(--primary-500); /* Focus ring uses primary color */
+
+    /* Semantic Colors - Mapped to color scales */
+    --success: var(--success-500);
+    --success-foreground: oklch(0.98 0 0);
+
+    --warning: var(--warning-500);
+    --warning-foreground: oklch(0.985 0 0);
+
+    --destructive: var(--danger-500);
+    --destructive-foreground: oklch(0.98 0 0);
+
+    --info: var(--info-500);
+    --info-foreground: oklch(0.98 0 0);
+
+    /* Additional variables from index.css */
+    --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.205 0 0);
+    --popover-foreground: oklch(0.985 0 0);
+    /* --primary and --primary-foreground are now defined in colors.css */
+    --secondary: oklch(0.274 0.006 286.033);
+    --secondary-foreground: oklch(0.985 0 0);
+    --muted: oklch(0.269 0 0);
+    --muted-foreground: oklch(0.708 0 0);
+    --accent: oklch(0.371 0 0);
+    --accent-foreground: oklch(0.985 0 0);
+    /* --destructive, --success, --warning, --info and their foregrounds are now defined in colors.css */
+    --border: oklch(1 0 0 / 10%);
+    --input: oklch(1 0 0 / 15%);
+    /* --ring is now defined in colors.css to use primary color */
+    --chart-1: oklch(0.809 0.105 251.813);
+    --chart-2: oklch(0.623 0.214 259.815);
+    --chart-3: oklch(0.546 0.245 262.881);
+    --chart-4: oklch(0.488 0.243 264.376);
+    --chart-5: oklch(0.424 0.199 265.638);
+    --sidebar: oklch(0.205 0 0);
+    --sidebar-foreground: oklch(0.985 0 0);
+    --sidebar-primary: oklch(0.623 0.214 259.815);
+    --sidebar-primary-foreground: oklch(0.97 0.014 254.604);
+    --sidebar-accent: oklch(0.269 0 0);
+    --sidebar-accent-foreground: oklch(0.985 0 0);
+    --sidebar-border: oklch(1 0 0 / 10%);
+    --sidebar-ring: oklch(0.556 0 0);
+}
+
+@theme inline {
+    --font-sans: 'Inter Variable', sans-serif;
+    --color-sidebar-ring: var(--sidebar-ring);
+    --color-sidebar-border: var(--sidebar-border);
+    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+    --color-sidebar-accent: var(--sidebar-accent);
+    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+    --color-sidebar-primary: var(--sidebar-primary);
+    --color-sidebar-foreground: var(--sidebar-foreground);
+    --color-sidebar: var(--sidebar);
+    --color-chart-5: var(--chart-5);
+    --color-chart-4: var(--chart-4);
+    --color-chart-3: var(--chart-3);
+    --color-chart-2: var(--chart-2);
+    --color-chart-1: var(--chart-1);
+    --color-ring: var(--ring);
+    --color-input: var(--input);
+    --color-border: var(--border);
+    --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-accent-foreground: var(--accent-foreground);
+    --color-accent: var(--accent);
+    --color-muted-foreground: var(--muted-foreground);
+    --color-muted: var(--muted);
+    --color-secondary-foreground: var(--secondary-foreground);
+    --color-secondary: var(--secondary);
+    --color-primary-foreground: var(--primary-foreground);
+    --color-primary: var(--primary);
+    --color-popover-foreground: var(--popover-foreground);
+    --color-popover: var(--popover);
+    --color-card-foreground: var(--card-foreground);
+    --color-card: var(--card);
+    --color-foreground: var(--foreground);
+    --color-background: var(--background);
+    --radius-sm: calc(var(--radius) - 4px);
+    --radius-md: calc(var(--radius) - 2px);
+    --radius-lg: var(--radius);
+    --radius-xl: calc(var(--radius) + 4px);
+    --radius-2xl: calc(var(--radius) + 8px);
+    --radius-3xl: calc(var(--radius) + 12px);
+    --radius-4xl: calc(var(--radius) + 16px);
+
+    /* Button enhanced styling */
+    --button-gradient: linear-gradient(to bottom, rgba(255,255,255,0.15), transparent);
+    --button-shadow: 0 1px 0 0 rgba(255,255,255,0.15) inset, 0 1px 1px 0 rgba(0,0,0,0.075);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+    }
+  body {
+    @apply font-sans bg-background text-foreground;
+    }
+  html {
+    @apply font-sans;
+    }
+}
+
+@layer utilities {
+  @keyframes radio-pulse {
+    0% {
+      box-shadow: 0 0 0 0 color-mix(in oklch, var(--primary) 40%, transparent);
+    }
+    70% {
+      box-shadow: 0 0 0 8px color-mix(in oklch, var(--primary) 0%, transparent);
+    }
+    100% {
+      box-shadow: 0 0 0 0 color-mix(in oklch, var(--primary) 0%, transparent);
+    }
+  }
+
+  @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;
+    }
+  }
+
+  /* Separator Decorative Variants */
+  /* Base transparent gradient line for decorative variants */
+  .separator-transparent::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 5%;
+    right: 5%;
+    width: 90%;
+    height: 1px;
+    background-image: linear-gradient(to right, transparent, var(--border), transparent);
+  }
+
+  /* Arrow/Diamond Down - decorative arrow shape in center */
+  .separator-arrow-down::after {
+    content: "";
+    position: absolute;
+    z-index: 1;
+    top: -7px;
+    left: calc(50% - 7px);
+    width: 14px;
+    height: 14px;
+    transform: rotate(45deg);
+    background-color: var(--background);
+    border-bottom: 1px solid var(--border);
+    border-right: 1px solid var(--border);
+  }
+
+  /* Tab Down - rounded tab shape in center */
+  .separator-tab-down::after {
+    content: "";
+    position: absolute;
+    z-index: 1;
+    top: 0;
+    left: calc(50% - 10px);
+    width: 20px;
+    height: 14px;
+    background-color: var(--background);
+    border-bottom: 1px solid var(--border);
+    border-left: 1px solid var(--border);
+    border-right: 1px solid var(--border);
+    border-radius: 0 0 var(--radius) var(--radius);
+  }
+
+  /* Stopper - rectangular stopper in center */
+  .separator-stopper::after {
+    content: "";
+    position: absolute;
+    z-index: 1;
+    top: -6px;
+    left: calc(50% - 7px);
+    width: 14px;
+    height: 12px;
+    background-color: var(--background);
+    border-left: 1px solid var(--border);
+    border-right: 1px solid var(--border);
+  }
+
+  /* Dot - circular dot in center with shadow */
+  .separator-dot::after {
+    content: "";
+    position: absolute;
+    z-index: 1;
+    top: -9px;
+    left: calc(50% - 9px);
+    width: 18px;
+    height: 18px;
+    background-color: var(--primary);
+    border: 1px solid var(--border);
+    border-radius: 50%;
+    box-shadow: inset 0 0 0 2px var(--background), 0 0 0 4px var(--background);
+  }
+
+  /* Text Decoration - text/character decoration in center */
+  .separator-text-decoration {
+    border-top: 1px solid var(--border);
+    background-color: transparent;
+  }
+
+  .separator-text-decoration::before {
+    content: var(--separator-text-content, "j");
+    position: absolute;
+    z-index: 1;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -65%);
+    background-color: var(--background);
+    color: var(--foreground);
+    display: inline-block;
+    font-size: 1rem;
+    line-height: 1rem;
+    padding: 0 0.5rem;
+    text-rendering: geometricPrecision;
+  }
+
+  /* Shiny Corner - lighting effect on 2 edges (left/right for horizontal, top/bottom for vertical) */
+  .separator-shiny-corner {
+    background: linear-gradient(
+      90deg,
+      color-mix(in oklch, var(--foreground) 60%, transparent) 0%,
+      transparent 8%,
+      var(--border) 20%,
+      var(--border) 80%,
+      transparent 92%,
+      color-mix(in oklch, var(--foreground) 60%, transparent) 100%
+    );
+    position: relative;
+  }
+
+  .separator-shiny-corner::before {
+    content: "";
+    position: absolute;
+    inset: -1px;
+    background: linear-gradient(
+      90deg,
+      color-mix(in oklch, var(--foreground) 80%, transparent) 0%,
+      transparent 5%,
+      transparent 95%,
+      color-mix(in oklch, var(--foreground) 80%, transparent) 100%
+    );
+    filter: blur(1px);
+    opacity: 0.7;
+    z-index: -1;
+  }
+
+  /* Vertical orientation support for shiny corner */
+  [aria-orientation="vertical"].separator-shiny-corner {
+    background: linear-gradient(
+      180deg,
+      color-mix(in oklch, var(--foreground) 60%, transparent) 0%,
+      transparent 8%,
+      var(--border) 20%,
+      var(--border) 80%,
+      transparent 92%,
+      color-mix(in oklch, var(--foreground) 60%, transparent) 100%
+    );
+  }
+
+  [aria-orientation="vertical"].separator-shiny-corner::before {
+    background: linear-gradient(
+      180deg,
+      color-mix(in oklch, var(--foreground) 80%, transparent) 0%,
+      transparent 5%,
+      transparent 95%,
+      color-mix(in oklch, var(--foreground) 80%, transparent) 100%
+    );
+  }
+
+  /* Shiny Edge - softer gradient highlight on edges */
+  .separator-shiny-edge {
+    background: linear-gradient(
+      90deg,
+      color-mix(in oklch, var(--foreground) 40%, transparent) 0%,
+      transparent 10%,
+      var(--border) 30%,
+      var(--border) 70%,
+      transparent 90%,
+      color-mix(in oklch, var(--foreground) 40%, transparent) 100%
+    );
+    position: relative;
+  }
+
+  .separator-shiny-edge::before {
+    content: "";
+    position: absolute;
+    inset: -0.5px;
+    background: linear-gradient(
+      90deg,
+      color-mix(in oklch, var(--primary) 50%, transparent) 0%,
+      transparent 8%,
+      transparent 92%,
+      color-mix(in oklch, var(--primary) 50%, transparent) 100%
+    );
+    filter: blur(0.5px);
+    opacity: 0.5;
+    z-index: -1;
+  }
+
+  /* Vertical orientation support for shiny edge */
+  [aria-orientation="vertical"].separator-shiny-edge {
+    background: linear-gradient(
+      180deg,
+      color-mix(in oklch, var(--foreground) 40%, transparent) 0%,
+      transparent 10%,
+      var(--border) 30%,
+      var(--border) 70%,
+      transparent 90%,
+      color-mix(in oklch, var(--foreground) 40%, transparent) 100%
+    );
+  }
+
+  [aria-orientation="vertical"].separator-shiny-edge::before {
+    background: linear-gradient(
+      180deg,
+      color-mix(in oklch, var(--primary) 50%, transparent) 0%,
+      transparent 8%,
+      transparent 92%,
+      color-mix(in oklch, var(--primary) 50%, transparent) 100%
+    );
+  }
+}

package/dist/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>