ds-miagui 0.1.0

package/README.md

@@ -0,0 +1,31 @@
+# DS MiaGui Vision
+
+Design system built with Tailwind CSS 4 + shadcn/ui.
+
+## Install
+
+```bash
+npm install ds-miagui
+```
+
+## Usage
+
+```css
+/* globals.css */
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "ds-miagui/theme";
+
+@layer base {
+  * { @apply border-border outline-ring/50; }
+  body { @apply bg-background text-foreground; }
+}
+```
+
+## Development
+
+```bash
+npm run generate    # tokens.json → theme.css
+npm run showcase    # open showcase app
+npm run build       # build for npm
+```

package/dist/components/glasmorph-navbar.d.ts

@@ -0,0 +1,5 @@
+export interface GlassmorphNavbarProps extends React.HTMLAttributes<HTMLElement> {
+    children: React.ReactNode;
+}
+export declare function GlassmorphNavbar({ children, className, ...props }: GlassmorphNavbarProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=glasmorph-navbar.d.ts.map

package/dist/components/glasmorph-navbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"glasmorph-navbar.d.ts","sourceRoot":"","sources":["../../src/components/glasmorph-navbar.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,qBAAsB,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IAC9E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED,wBAAgB,gBAAgB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,qBAAqB,2CAiBxF"}

package/dist/components/glasmorph-navbar.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../lib/utils.js';
+export function GlassmorphNavbar({ children, className, ...props }) {
+    return (_jsx("nav", { className: cn('fixed top-0 left-0 right-0 z-50 h-16 px-4 flex items-center border-b border-border', className), style: {
+            backgroundColor: 'rgba(26, 26, 26, 0.8)',
+            backdropFilter: 'blur(16px) saturate(180%)',
+            WebkitBackdropFilter: 'blur(16px) saturate(180%)',
+        }, ...props, children: children }));
+}

package/dist/components/glow-button.d.ts

@@ -0,0 +1,10 @@
+import { type VariantProps } from 'class-variance-authority';
+declare const glowButtonVariants: (props?: ({
+    variant?: "primary" | "secondary" | "ghost" | "outline" | null | undefined;
+    size?: "default" | "sm" | "lg" | "xl" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface GlowButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof glowButtonVariants> {
+}
+export declare const GlowButton: import("react").ForwardRefExoticComponent<GlowButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export {};
+//# sourceMappingURL=glow-button.d.ts.map

package/dist/components/glow-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"glow-button.d.ts","sourceRoot":"","sources":["../../src/components/glow-button.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,YAAY,EAAO,MAAM,0BAA0B,CAAA;AAGjE,QAAA,MAAM,kBAAkB;;;8EAmBvB,CAAA;AAED,MAAM,WAAW,eACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EACnD,YAAY,CAAC,OAAO,kBAAkB,CAAC;CAAG;AAE9C,eAAO,MAAM,UAAU,+GAQtB,CAAA"}

package/dist/components/glow-button.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../lib/utils.js';
+import { cva } from 'class-variance-authority';
+import { forwardRef } from 'react';
+const glowButtonVariants = cva('inline-flex items-center justify-center gap-2 font-semibold transition-all disabled:opacity-50 disabled:pointer-events-none active:scale-[0.97]', {
+    variants: {
+        variant: {
+            primary: 'bg-primary text-primary-foreground border border-primary hover:shadow-glow',
+            secondary: 'bg-muted text-foreground border border-border hover:border-primary hover:shadow-glow',
+            ghost: 'bg-transparent text-muted-foreground hover:text-foreground hover:bg-muted',
+            outline: 'bg-transparent text-foreground border border-border hover:border-primary hover:text-primary',
+        },
+        size: {
+            sm: 'h-8 px-3 text-xs rounded-sm',
+            default: 'h-10 px-5 text-sm rounded-md',
+            lg: 'h-12 px-7 text-base rounded-lg',
+            xl: 'h-14 px-9 text-lg rounded-lg',
+        },
+    },
+    defaultVariants: { variant: 'primary', size: 'default' },
+});
+export const GlowButton = forwardRef(({ variant, size, className, children, ...props }, ref) => {
+    return (_jsx("button", { ref: ref, className: cn(glowButtonVariants({ variant, size }), className), ...props, children: children }));
+});
+GlowButton.displayName = 'GlowButton';

package/dist/components/index.d.ts

@@ -0,0 +1,3 @@
+export { GlowButton, type GlowButtonProps } from './glow-button.js';
+export { GlassmorphNavbar, type GlassmorphNavbarProps } from './glasmorph-navbar.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAA;AACnE,OAAO,EAAE,gBAAgB,EAAE,KAAK,qBAAqB,EAAE,MAAM,uBAAuB,CAAA"}

package/dist/components/index.js

@@ -0,0 +1,4 @@
+// Custom components that shadcn/ui doesn't provide.
+// Add your DS-specific components here.
+export { GlowButton } from './glow-button.js';
+export { GlassmorphNavbar } from './glasmorph-navbar.js';

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './components/index.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAA"}

package/dist/index.js

@@ -0,0 +1 @@
+export * from './components/index.js';

package/dist/lib/utils.d.ts

@@ -0,0 +1,3 @@
+import { type ClassValue } from 'clsx';
+export declare function cn(...inputs: ClassValue[]): string;
+//# sourceMappingURL=utils.d.ts.map

package/dist/lib/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/lib/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,UAAU,EAAQ,MAAM,MAAM,CAAA;AAG5C,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC"}

package/dist/lib/utils.js

@@ -0,0 +1,5 @@
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}

package/guidelines/components/button.md

@@ -0,0 +1,29 @@
+# Button
+
+## GlowButton (custom)
+
+Primary CTA button with red glow shadow on hover.
+
+### Variants
+
+| Variant | Background | Border | Hover Effect |
+|---------|-----------|--------|-------------|
+| primary | primary-7 | primary-7 | Red glow shadow |
+| secondary | grey-3 | grey-4 | Border → primary, red glow |
+| ghost | transparent | none | Text highlight, muted bg |
+| outline | transparent | grey-4 | Border → primary, text → primary |
+
+### Sizes
+
+| Size | Height | Radius | Use |
+|------|--------|--------|-----|
+| sm | 32px | radius-sm | Compact actions |
+| default | 40px | radius-md | Standard buttons |
+| lg | 48px | radius-lg | Prominent actions |
+| xl | 56px | radius-lg | Hero CTAs |
+
+### States
+
+- Disabled: 50% opacity, no pointer events
+- Active/pressed: scale(0.97)
+- Focus: 2px outline primary-7, offset 2px

package/guidelines/components/overview.md

@@ -0,0 +1,14 @@
+# Components
+
+This design system uses shadcn/ui components themed via CSS variables.
+Custom components are documented individually below.
+
+## shadcn/ui Components (themed automatically)
+
+Button, Input, Card, Badge, Dialog, Dropdown, Tabs, Toast, Tooltip,
+Checkbox, Switch, Select, Progress, Avatar, Skeleton, Separator,
+Table, Popover, Navigation Menu, and more.
+
+## Custom Components
+
+Add your DS-specific component docs here.

package/guidelines/foundations/color.md

@@ -0,0 +1,74 @@
+# Color
+
+> Auto-generated from `tokens.json`. Do not edit manually.
+
+## Raw Palette
+
+| Token | Hex | OKLch |
+| ----- | --- | ----- |
+| `grey-1` | `#0d0d0d` | `oklch(0.159 0.002 119.126)` |
+| `grey-2` | `#1a1a1a` | `oklch(0.218 0.003 119.126)` |
+| `grey-3` | `#262626` | `oklch(0.269 0.004 119.126)` |
+| `grey-4` | `#333333` | `oklch(0.321 0.005 119.126)` |
+| `grey-5` | `#4d4d4d` | `oklch(0.420 0.007 119.126)` |
+| `grey-6` | `#666666` | `oklch(0.510 0.008 119.126)` |
+| `grey-7` | `#888888` | `oklch(0.627 0.010 119.126)` |
+| `grey-8` | `#a4a4a4` | `oklch(0.719 0.011 119.126)` |
+| `grey-9` | `#d4d4d4` | `oklch(0.870 0.014 119.126)` |
+| `grey-10` | `#f6f6f6` | `oklch(0.973 0.015 119.126)` |
+| `primary-1` | `#160104` | `oklch(0.132 0.047 11.824)` |
+| `primary-2` | `#2b0208` | `oklch(0.188 0.069 16.674)` |
+| `primary-3` | `#41030b` | `oklch(0.241 0.091 20.904)` |
+| `primary-4` | `#6c0513` | `oklch(0.339 0.132 23.072)` |
+| `primary-5` | `#97061b` | `oklch(0.429 0.170 23.838)` |
+| `primary-6` | `#ac071e` | `oklch(0.472 0.188 24.387)` |
+| `primary-7` | `#D70926` | `oklch(0.556 0.222 24.735)` |
+| `primary-8` | `#df3a51` | `oklch(0.603 0.200 18.802)` |
+| `primary-9` | `#eb8493` | `oklch(0.729 0.125 14.587)` |
+| `primary-10` | `#f7ced4` | `oklch(0.888 0.044 23.516)` |
+| `green-1` | `#012801` | `oklch(0.241 0.091 139.476)` |
+| `green-5` | `#0b5e0b` | `oklch(0.420 0.154 139.576)` |
+| `green-9` | `#30a14e` | `oklch(0.627 0.178 144.655)` |
+| `green-10` | `#4db86a` | `oklch(0.701 0.170 145.793)` |
+| `green-11` | `#6ecc84` | `oklch(0.769 0.157 145.554)` |
+| `green-12` | `#e8fccf` | `oklch(0.965 0.082 125.132)` |
+| `red-1` | `#290a11` | `oklch(0.201 0.052 10.428)` |
+| `red-5` | `#8c1d30` | `oklch(0.424 0.145 17.469)` |
+| `red-9` | `#e5484d` | `oklch(0.626 0.193 24.129)` |
+| `red-10` | `#f06068` | `oklch(0.675 0.177 21.579)` |
+| `red-11` | `#ff8f8f` | `oklch(0.770 0.135 24.404)` |
+| `red-12` | `#ffd9d9` | `oklch(0.917 0.042 36.384)` |
+| `orange-1` | `#3b1a02` | `oklch(0.261 0.065 57.434)` |
+| `orange-5` | `#8d4a0a` | `oklch(0.482 0.118 60.482)` |
+| `orange-9` | `#f76808` | `oklch(0.686 0.198 47.805)` |
+| `orange-10` | `#ff8a30` | `oklch(0.749 0.178 57.446)` |
+| `orange-11` | `#ffa85c` | `oklch(0.803 0.147 65.718)` |
+| `orange-12` | `#ffe4c2` | `oklch(0.932 0.067 84.149)` |
+| `yellow-1` | `#2c2202` | `oklch(0.257 0.057 95.299)` |
+| `yellow-5` | `#7d6409` | `oklch(0.514 0.117 94.861)` |
+| `yellow-9` | `#ffe066` | `oklch(0.910 0.168 98.763)` |
+| `yellow-10` | `#ffe680` | `oklch(0.925 0.148 99.681)` |
+| `yellow-11` | `#ffed99` | `oklch(0.942 0.128 101.389)` |
+| `yellow-12` | `#fff1b9` | `oklch(0.956 0.092 100.747)` |
+
+## Semantic Colors
+
+| Token | Reference | Resolved Hex | OKLch |
+| ----- | --------- | ------------ | ----- |
+| `background` | `{color.raw.grey-1}` | `#0d0d0d` | `oklch(0.159 0.002 119.126)` |
+| `background-secondary` | `{color.raw.grey-2}` | `#1a1a1a` | `oklch(0.218 0.003 119.126)` |
+| `background-tertiary` | `{color.raw.grey-3}` | `#262626` | `oklch(0.269 0.004 119.126)` |
+| `foreground` | `{color.raw.grey-10}` | `#f6f6f6` | `oklch(0.973 0.015 119.126)` |
+| `foreground-strong` | `{color.raw.grey-10}` | `#f6f6f6` | `oklch(0.973 0.015 119.126)` |
+| `foreground-muted` | `{color.raw.grey-7}` | `#888888` | `oklch(0.627 0.010 119.126)` |
+| `primary` | `{color.raw.primary-7}` | `#D70926` | `oklch(0.556 0.222 24.735)` |
+| `primary-hover` | `{color.raw.primary-8}` | `#df3a51` | `oklch(0.603 0.200 18.802)` |
+| `primary-foreground` | `{color.raw.grey-1}` | `#0d0d0d` | `oklch(0.159 0.002 119.126)` |
+| `border` | `{color.raw.grey-4}` | `#333333` | `oklch(0.321 0.005 119.126)` |
+| `border-muted` | `{color.raw.grey-3}` | `#262626` | `oklch(0.269 0.004 119.126)` |
+| `input` | `{color.raw.grey-4}` | `#333333` | `oklch(0.321 0.005 119.126)` |
+| `ring` | `{color.raw.primary-7}` | `#D70926` | `oklch(0.556 0.222 24.735)` |
+| `success` | `{color.raw.green-9}` | `#30a14e` | `oklch(0.627 0.178 144.655)` |
+| `error` | `{color.raw.red-9}` | `#e5484d` | `oklch(0.626 0.193 24.129)` |
+| `warning` | `{color.raw.orange-9}` | `#f76808` | `oklch(0.686 0.198 47.805)` |
+| `info` | `{color.raw.grey-7}` | `#888888` | `oklch(0.627 0.010 119.126)` |

package/guidelines/foundations/motion.md

@@ -0,0 +1,33 @@
+# Motion
+
+## Easings
+
+| Name | Value | Use |
+|------|-------|-----|
+| default | cubic-bezier(0.4, 0, 0.2, 1) | Standard transitions |
+| in | cubic-bezier(0, 0, 0.2, 1) | Enter animations |
+| out | cubic-bezier(0.4, 0, 1, 1) | Exit animations |
+| smooth | cubic-bezier(0.16, 1, 0.3, 1) | Slide/smooth animations |
+
+## Durations
+
+| Name | Value | Use |
+|------|-------|-----|
+| fast | 100ms | Hovers, tooltips |
+| normal | 200ms | Standard transitions |
+| slow | 300ms | Complex animations |
+| slower | 500ms | Page transitions |
+
+## Key Animations
+
+| Name | Duration | Use |
+|------|----------|-----|
+| shimmer | 2s infinite | Skeleton loading |
+| pulse | 3s infinite | Status dots |
+| glow | 2s infinite | Border accent pulse |
+| spin | 1s infinite | Loading spinners |
+| float | 3s infinite | Decorative elements |
+| morph-blob | 8s infinite | Decorative blob shapes |
+| scale-in | ease-smooth | Modal entry |
+| slide-in-right | 500ms | Toast notifications |
+| fade-in-up | 800ms | Default reveal on scroll |

package/guidelines/foundations/overview.md

@@ -0,0 +1,7 @@
+# Foundations
+
+Design tokens that define the visual language.
+
+- [Colors](./color.md) - Palette, semantic mappings, status colors
+- [Typography](./typography.md) - Font families, type scale
+- [Spacing](./spacing.md) - Spacing scale

package/guidelines/foundations/radius.md

@@ -0,0 +1,14 @@
+# Border Radius
+
+## Values
+
+| Token | Value | Components |
+|-------|-------|-----------|
+| radius-sm (6px) | calc(base * 0.6) | Badges, toggles, checkboxes, tooltips, small buttons |
+| radius-md (8px) | calc(base * 0.8) | Buttons, inputs, selects, dropdowns, tabs, avatars, skeletons |
+| radius-lg (8px) | base | Cards, modals, panels, navbars, tables, large buttons |
+| radius-xl | calc(base * 1.4) | Modals, popovers |
+
+## Usage
+
+MiaGui uses rounded corners consistently. Unlike brutalist systems, every component has appropriate rounding.

package/guidelines/foundations/spacing.md

@@ -0,0 +1,39 @@
+# Spacing
+
+> Auto-generated from `tokens.json`. Do not edit manually.
+
+## Scale
+
+| Token | Value |
+| ----- | ----- |
+| `1` | 4px |
+| `2` | 8px |
+| `3` | 12px |
+| `4` | 16px |
+| `5` | 20px |
+| `6` | 24px |
+| `8` | 32px |
+| `10` | 40px |
+| `12` | 48px |
+| `16` | 64px |
+| `20` | 80px |
+| `24` | 96px |
+
+## Radius
+
+| Token | Value | Description |
+| ----- | ----- | ----------- |
+| `base` | 0.5rem | Base radius, shadcn derives sm/md/lg from this |
+
+## Shadows
+
+| Token | Value |
+| ----- | ----- |
+| `sm` | `0 1px 2px 0 rgb(0 0 0 / 0.3)` |
+| `md` | `0 4px 12px 0 rgb(0 0 0 / 0.25)` |
+| `lg` | `0 8px 24px 0 rgb(0 0 0 / 0.35)` |
+| `xl` | `0 20px 25px -5px rgb(0 0 0 / 0.4), 0 8px 10px -6px rgb(0 0 0 / 0.3)` |
+| `2xl` | `0 25px 50px -12px rgb(0 0 0 / 0.5)` |
+| `glow` | `0 0 20px rgba(215,9,38,0.25)` |
+| `popover` | `0 0 0 1px rgb(0 0 0 / 0.2), 0 3px 6px 0 rgb(0 0 0 / 0.25), 0 9px 24px 0 rgb(0 0 0 / 0.35)` |
+| `modal` | `0 8px 11px 0 transparent, 0 0 8px 0 rgb(0 0 0 / 0.3), 0 0 16px 0 rgb(0 0 0 / 0.4)` |

package/guidelines/foundations/typography.md

@@ -0,0 +1,29 @@
+# Typography
+
+> Auto-generated from `tokens.json`. Do not edit manually.
+
+## Font Families
+
+| Role | Stack |
+| ---- | ----- |
+| `display` | `"Space Grotesk", sans-serif` |
+| `body` | `"Space Grotesk", sans-serif` |
+| `mono` | `"Space Mono", monospace` |
+
+## Type Scale
+
+| Name | Size | Weight | Line Height | Letter Spacing | Transform |
+| ---- | ---- | ------ | ----------- | -------------- | --------- |
+| `display-lg` | 56px | 600 | 1.05 | -0.022em | --- |
+| `display` | 40px | 600 | 1.1 | -0.022em | --- |
+| `heading-lg` | 32px | 600 | 1.2 | -0.016em | --- |
+| `heading` | 24px | 600 | 1.25 | -0.012em | --- |
+| `heading-sm` | 20px | 600 | 1.3 | -0.006em | --- |
+| `body-lg` | 18px | 400 | 1.625 | 0 | --- |
+| `body-md` | 16px | 600 | 1.375 | 0.01em | --- |
+| `body` | 14px | 400 | 1.5 | 0 | --- |
+| `body-sm` | 12px | 400 | 1.5 | 0.01em | --- |
+| `label` | 13px | 600 | 1.3 | 0.01em | --- |
+| `overline` | 12px | 600 | 1.3 | 0.05em | uppercase |
+| `badge` | 11px | 700 | 1.6 | 0.04em | uppercase |
+| `mono-sm` | 11px | 400 | 1.6 | 0 | --- |

package/guidelines/overview.md

@@ -0,0 +1,25 @@
+# DS MiaGui Vision
+
+## Design Philosophy
+
+Dark-mode design system for NVIDIA MiaGui. Minimal, focused, with a greyscale foundation and a single red accent color for emphasis and CTAs.
+
+## Principles
+
+1. **Dark mode only** — All surfaces are dark, text is light. No light mode.
+2. **Greyscale + red accent** — Only primary-7 (#D70926) as color accent. No other hues in the UI except status colors (green/orange/yellow/red).
+3. **Space Grotesk everywhere** — Display and body text. Space Mono only for code and technical metadata.
+4. **4px spacing base** — Every spacing value is a multiple of 4.
+5. **Elevation = surface color + optional shadow** — Darker surfaces are lower, lighter surfaces are higher.
+
+## Rules
+
+- **IMPORTANT:** Always use semantic tokens (bg-background, text-foreground), never raw hex values.
+- Surface hierarchy: sunken (#0d0d0d) → base (#1a1a1a) → raised (#262626) → elevated (#333333).
+- Text hierarchy: primary (#f6f6f6) → secondary (#d4d4d4) → tertiary (#888888) → disabled (#4d4d4d).
+- Status colors use background (15% opacity) + text (bright) + border (medium) per status.
+
+## Reading Order
+
+1. **Foundations** — Colors, typography, spacing, motion
+2. **Components** — shadcn/ui themed + custom (GlowButton, GlassmorphNavbar)

package/guidelines/setup.md

@@ -0,0 +1,26 @@
+# Setup
+
+## Install
+
+```bash
+npm install ds-miagui
+```
+
+## Configure
+
+```css
+/* globals.css */
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "ds-miagui/theme";
+
+@layer base {
+  * { @apply border-border outline-ring/50; }
+  body { @apply bg-background text-foreground; }
+}
+```
+
+## Requirements
+
+- Tailwind CSS 4+
+- PostCSS with @tailwindcss/postcss plugin

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "ds-miagui",
+  "version": "0.1.0",
+  "description": "DS MiaGui Vision Design System - Tailwind 4 + shadcn/ui",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./theme": "./src/theme.css"
+  },
+  "files": ["dist", "src/theme.css", "guidelines"],
+  "scripts": {
+    "generate": "npx tsx scripts/generate-theme.ts",
+    "build": "npm run generate && tsc",
+    "dev": "tsc --watch",
+    "showcase": "cd showcase && npm run dev",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "tailwindcss": ">=4.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react": { "optional": true },
+    "react-dom": { "optional": true }
+  },
+  "devDependencies": {
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "class-variance-authority": "^0.7",
+    "clsx": "^2",
+    "react": "^19",
+    "react-dom": "^19",
+    "tailwind-merge": "^3",
+    "tailwindcss": "^4.2",
+    "typescript": "^5.7",
+    "tsx": "^4"
+  },
+  "keywords": ["design-system", "tailwindcss", "shadcn"],
+  "author": "Leo Becker <leo@leobecker.com>",
+  "license": "MIT"
+}

package/src/theme.css

@@ -0,0 +1,182 @@
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  /* Semantic colors */
+  --color-background: var(--background);
+  --color-background-secondary: var(--background-secondary);
+  --color-background-tertiary: var(--background-tertiary);
+  --color-foreground: var(--foreground);
+  --color-foreground-strong: var(--foreground-strong);
+  --color-foreground-muted: var(--foreground-muted);
+  --color-primary: var(--primary);
+  --color-primary-hover: var(--primary-hover);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-border: var(--border);
+  --color-border-muted: var(--border-muted);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-success: var(--success);
+  --color-error: var(--error);
+  --color-warning: var(--warning);
+  --color-info: var(--info);
+
+  /* Raw palette */
+  --color-raw-grey-1: oklch(0.159 0.002 119.126);
+  --color-raw-grey-2: oklch(0.218 0.003 119.126);
+  --color-raw-grey-3: oklch(0.269 0.004 119.126);
+  --color-raw-grey-4: oklch(0.321 0.005 119.126);
+  --color-raw-grey-5: oklch(0.420 0.007 119.126);
+  --color-raw-grey-6: oklch(0.510 0.008 119.126);
+  --color-raw-grey-7: oklch(0.627 0.010 119.126);
+  --color-raw-grey-8: oklch(0.719 0.011 119.126);
+  --color-raw-grey-9: oklch(0.870 0.014 119.126);
+  --color-raw-grey-10: oklch(0.973 0.015 119.126);
+  --color-raw-primary-1: oklch(0.132 0.047 11.824);
+  --color-raw-primary-2: oklch(0.188 0.069 16.674);
+  --color-raw-primary-3: oklch(0.241 0.091 20.904);
+  --color-raw-primary-4: oklch(0.339 0.132 23.072);
+  --color-raw-primary-5: oklch(0.429 0.170 23.838);
+  --color-raw-primary-6: oklch(0.472 0.188 24.387);
+  --color-raw-primary-7: oklch(0.556 0.222 24.735);
+  --color-raw-primary-8: oklch(0.603 0.200 18.802);
+  --color-raw-primary-9: oklch(0.729 0.125 14.587);
+  --color-raw-primary-10: oklch(0.888 0.044 23.516);
+  --color-raw-green-1: oklch(0.241 0.091 139.476);
+  --color-raw-green-5: oklch(0.420 0.154 139.576);
+  --color-raw-green-9: oklch(0.627 0.178 144.655);
+  --color-raw-green-10: oklch(0.701 0.170 145.793);
+  --color-raw-green-11: oklch(0.769 0.157 145.554);
+  --color-raw-green-12: oklch(0.965 0.082 125.132);
+  --color-raw-red-1: oklch(0.201 0.052 10.428);
+  --color-raw-red-5: oklch(0.424 0.145 17.469);
+  --color-raw-red-9: oklch(0.626 0.193 24.129);
+  --color-raw-red-10: oklch(0.675 0.177 21.579);
+  --color-raw-red-11: oklch(0.770 0.135 24.404);
+  --color-raw-red-12: oklch(0.917 0.042 36.384);
+  --color-raw-orange-1: oklch(0.261 0.065 57.434);
+  --color-raw-orange-5: oklch(0.482 0.118 60.482);
+  --color-raw-orange-9: oklch(0.686 0.198 47.805);
+  --color-raw-orange-10: oklch(0.749 0.178 57.446);
+  --color-raw-orange-11: oklch(0.803 0.147 65.718);
+  --color-raw-orange-12: oklch(0.932 0.067 84.149);
+  --color-raw-yellow-1: oklch(0.257 0.057 95.299);
+  --color-raw-yellow-5: oklch(0.514 0.117 94.861);
+  --color-raw-yellow-9: oklch(0.910 0.168 98.763);
+  --color-raw-yellow-10: oklch(0.925 0.148 99.681);
+  --color-raw-yellow-11: oklch(0.942 0.128 101.389);
+  --color-raw-yellow-12: oklch(0.956 0.092 100.747);
+
+  /* Typography */
+  --font-sans: "Space Grotesk", sans-serif;
+  --font-display: "Space Grotesk", sans-serif;
+  --font-mono: "Space Mono", monospace;
+
+  /* Radius */
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+
+  /* Shadows */
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
+  --shadow-md: 0 4px 12px 0 rgb(0 0 0 / 0.25);
+  --shadow-lg: 0 8px 24px 0 rgb(0 0 0 / 0.35);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.4), 0 8px 10px -6px rgb(0 0 0 / 0.3);
+  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.5);
+  --shadow-glow: 0 0 20px rgba(215,9,38,0.25);
+  --shadow-popover: 0 0 0 1px rgb(0 0 0 / 0.2), 0 3px 6px 0 rgb(0 0 0 / 0.25), 0 9px 24px 0 rgb(0 0 0 / 0.35);
+  --shadow-modal: 0 8px 11px 0 transparent, 0 0 8px 0 rgb(0 0 0 / 0.3), 0 0 16px 0 rgb(0 0 0 / 0.4);
+
+  /* Animations */
+  --animate-fade-in: fade-in 300ms ease-out;
+  --animate-fade-in-up: fade-in-up 800ms cubic-bezier(0.16, 1, 0.3, 1);
+  --animate-fade-in-down: fade-in-down 600ms cubic-bezier(0.16, 1, 0.3, 1);
+  --animate-scale-in: scale-in 200ms cubic-bezier(0.16, 1, 0.3, 1);
+  --animate-slide-in-right: slide-in-right 500ms cubic-bezier(0.16, 1, 0.3, 1);
+  --animate-shimmer: shimmer 2s cubic-bezier(0.14, 0.38, 0.89, 0.65) infinite;
+  --animate-pulse: pulse 3s ease-in-out infinite;
+  --animate-spin: spin 1s linear infinite;
+  --animate-float: float 3s ease-in-out infinite;
+  --animate-glow: glow 2s ease-in-out infinite;
+  --animate-morph-blob: morph-blob 8s ease-in-out infinite;
+
+  /* Keyframes */
+  @keyframes fade-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+  @keyframes fade-in-up {
+    from { opacity: 0; transform: translateY(16px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+  @keyframes fade-in-down {
+    from { opacity: 0; transform: translateY(-16px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+  @keyframes scale-in {
+    from { opacity: 0; transform: scale(0.92); }
+    to { opacity: 1; transform: scale(1); }
+  }
+  @keyframes slide-in-right {
+    from { opacity: 0; transform: translateX(100%); }
+    to { opacity: 1; transform: translateX(0); }
+  }
+  @keyframes shimmer {
+    from { background-position: -200% 0; }
+    to { background-position: 200% 0; }
+  }
+  @keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.5; }
+  }
+  @keyframes spin {
+    to { transform: rotate(360deg); }
+  }
+  @keyframes float {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-8px); }
+  }
+  @keyframes glow {
+    0%, 100% { box-shadow: 0 0 20px rgba(215,9,38,0.25); }
+    50% { box-shadow: 0 0 40px rgba(215,9,38,0.5); }
+  }
+  @keyframes morph-blob {
+    0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
+    25% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
+    50% { border-radius: 50% 60% 30% 60% / 30% 40% 70% 60%; }
+    75% { border-radius: 60% 40% 60% 40% / 70% 30% 50% 60%; }
+  }
+}
+
+:root {
+  /* Semantic color tokens (OKLch) */
+  --background: oklch(0.159 0.002 119.126);
+  --background-secondary: oklch(0.218 0.003 119.126);
+  --background-tertiary: oklch(0.269 0.004 119.126);
+  --foreground: oklch(0.973 0.015 119.126);
+  --foreground-strong: oklch(0.973 0.015 119.126);
+  --foreground-muted: oklch(0.627 0.010 119.126);
+  --primary: oklch(0.556 0.222 24.735);
+  --primary-hover: oklch(0.603 0.200 18.802);
+  --primary-foreground: oklch(0.159 0.002 119.126);
+  --border: oklch(0.321 0.005 119.126);
+  --border-muted: oklch(0.269 0.004 119.126);
+  --input: oklch(0.321 0.005 119.126);
+  --ring: oklch(0.556 0.222 24.735);
+  --success: oklch(0.627 0.178 144.655);
+  --error: oklch(0.626 0.193 24.129);
+  --warning: oklch(0.686 0.198 47.805);
+  --info: oklch(0.627 0.010 119.126);
+
+  /* Radius */
+  --radius: 0.5rem;
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}