@byldpartners/ui 0.0.1

package/README.md

@@ -0,0 +1,284 @@
+# @byldpartners/ui
+
+Cross-platform UI component library for **web** (React + Radix + Tailwind) and **React Native** (Expo + uniwind).
+
+One import, two platforms — the same component API and Tailwind classes work on both web and mobile.
+
+## Installation
+
+```bash
+npm install @byldpartners/ui
+# or
+pnpm add @byldpartners/ui
+```
+
+### Peer dependencies
+
+**Web:**
+
+```bash
+pnpm add react react-dom
+```
+
+**React Native:**
+
+```bash
+pnpm add react react-native react-native-svg lucide-react-native uniwind
+```
+
+| Package | Version | Required | Platform |
+|---------|---------|----------|----------|
+| `react` | `>=18` | Yes | Both |
+| `react-dom` | `>=18` | Yes | Web |
+| `react-native` | `>=0.81` | Yes | Native |
+| `react-native-svg` | `>=13.0` | Yes | Native |
+| `lucide-react-native` | `>=0.300` | Yes | Native |
+| `uniwind` | `>=1.0` | Yes | Native |
+| `expo-glass-effect` | `>=0.1.0` | No | Native |
+
+## Quick Start
+
+### Web
+
+Wrap your app in `ThemeProvider` and import components:
+
+```tsx
+import { ThemeProvider, Button } from "@byldpartners/ui";
+
+function App() {
+  return (
+    <ThemeProvider>
+      <Button variant="default" size="lg">
+        Get Started
+      </Button>
+    </ThemeProvider>
+  );
+}
+```
+
+The `ThemeProvider` injects CSS custom properties onto `document.documentElement`. Make sure you have Tailwind CSS configured in your project.
+
+### React Native
+
+Components use Tailwind classes via [uniwind](https://uniwind.dev). Set up your project:
+
+**1. Create `global.css`** at your project root:
+
+```css
+@import 'tailwindcss';
+@import 'uniwind';
+```
+
+**2. Configure Metro** in `metro.config.js`:
+
+```js
+const { getDefaultConfig } = require('expo/metro-config');
+const { withUniwindConfig } = require('uniwind/metro');
+
+const config = getDefaultConfig(__dirname);
+
+module.exports = withUniwindConfig(config, {
+  cssEntryFile: './global.css',
+});
+```
+
+**3. Import CSS** in your `App.tsx`:
+
+```tsx
+import './global.css';
+import { Button } from "@byldpartners/ui";
+
+export default function App() {
+  return (
+    <Button variant="default" onPress={() => console.log("pressed")}>
+      Get Started
+    </Button>
+  );
+}
+```
+
+Both platforms use the same Tailwind semantic classes (`bg-primary`, `text-foreground`, `rounded-md`, etc.) — web via Tailwind CSS, native via uniwind.
+
+## Components
+
+50 components with full web (shadcn/Radix) and React Native (uniwind) implementations:
+
+| Phase | Components |
+|-------|-----------|
+| **Foundation** | Accordion, Alert, AlertDialog, AspectRatio, Avatar, Badge, Breadcrumb, Button |
+| **Form & Input** | Calendar, Checkbox, Collapsible, Combobox, Command, DatePicker, Form, Input, InputOTP, Label, RadioGroup, Select, Slider, Switch, Textarea, Toggle, ToggleGroup |
+| **Layout & Display** | Card, Carousel, Chart, DataTable, HoverCard, Icon, ResizablePanel, Separator, Skeleton, Table, Tabs |
+| **Overlay & Feedback** | ContextMenu, Dialog, Drawer, DropdownMenu, Menubar, NavigationMenu, Popover, Sheet, Sidebar, Toast, Tooltip |
+| **Misc** | Pagination, Progress, ScrollArea |
+
+Every component follows the same file structure:
+
+```
+ComponentName/
+├── ComponentName.types.ts      # Shared props interface
+├── useComponentName.ts         # Shared state hook (platform-agnostic)
+├── ComponentName.web.tsx       # Web implementation (Radix + Tailwind)
+├── ComponentName.native.tsx    # React Native implementation (uniwind)
+├── index.ts                    # Web barrel
+└── index.native.ts             # Native barrel
+```
+
+## Theming
+
+### Web — ThemeProvider
+
+Three presets ship out of the box: `default` (light), `dark`, and `aurora`.
+
+```tsx
+import { ThemeProvider } from "@byldpartners/ui";
+
+<ThemeProvider defaultTheme="dark">
+  <App />
+</ThemeProvider>
+```
+
+Switch themes at runtime:
+
+```tsx
+import { useTheme } from "@byldpartners/ui";
+
+function ThemeSwitcher() {
+  const { theme, setTheme } = useTheme();
+
+  return (
+    <button onClick={() => setTheme(theme === "default" ? "dark" : "default")}>
+      Toggle theme
+    </button>
+  );
+}
+```
+
+### Native — Tailwind dark mode
+
+On native, theming works through Tailwind's built-in dark mode via uniwind. Components use semantic classes like `bg-primary` and `text-foreground` which automatically respond to your Tailwind theme configuration.
+
+### Custom themes
+
+Define a custom preset and pass it to the web provider:
+
+```tsx
+import { ThemeProvider } from "@byldpartners/ui";
+import type { ThemePreset } from "@byldpartners/ui";
+import { defaultPreset, darkPreset, auroraPreset } from "@byldpartners/ui/theme";
+
+const brand: ThemePreset = {
+  name: "brand",
+  tokens: {
+    ...defaultPreset.tokens,
+    colors: {
+      ...defaultPreset.tokens.colors,
+      primary: "oklch(0.6 0.2 260)",
+      primaryForeground: "oklch(1 0 0)",
+    },
+  },
+};
+
+<ThemeProvider defaultTheme="brand" presets={[defaultPreset, darkPreset, brand]}>
+  <App />
+</ThemeProvider>
+```
+
+On native, customize themes by extending your `global.css` with Tailwind CSS variable overrides.
+
+### Token structure
+
+Tokens are defined in `src/theme/tokens.ts` and cover:
+
+- **Colors** — oklch values for background, foreground, primary, secondary, muted, accent, destructive, border, input, ring
+- **Radius** — sm, md, lg, xl, full
+- **Spacing** — xs, sm, md, lg, xl, 2xl, 3xl
+- **Typography** — fontFamily, fontFamilyMono
+
+## Button
+
+```tsx
+import { Button } from "@byldpartners/ui";
+
+// Variants
+<Button variant="default">Default</Button>
+<Button variant="secondary">Secondary</Button>
+<Button variant="destructive">Destructive</Button>
+<Button variant="outline">Outline</Button>
+<Button variant="ghost">Ghost</Button>
+<Button variant="link">Link</Button>
+
+// Sizes
+<Button size="sm">Small</Button>
+<Button size="default">Default</Button>
+<Button size="lg">Large</Button>
+<Button size="icon">+</Button>
+
+// Disabled
+<Button disabled>Disabled</Button>
+
+// Slot pattern (web only) — render as child element
+<Button asChild>
+  <a href="/dashboard">Go to Dashboard</a>
+</Button>
+```
+
+## Drop-in Mode
+
+You can copy the source directly into your project instead of using the npm package, similar to how shadcn works:
+
+```bash
+cp -r node_modules/@byldpartners/ui/src ./packages/ui
+```
+
+Then add a path alias in your `tsconfig.json`:
+
+```json
+{
+  "compilerOptions": {
+    "paths": {
+      "@byldpartners/ui": ["./packages/ui/index.ts"],
+      "@byldpartners/ui/*": ["./packages/ui/*"]
+    }
+  }
+}
+```
+
+## How It Works
+
+The package uses **conditional exports** in `package.json` to serve different code per platform:
+
+- **Web** (Vite, webpack, etc.) — resolves pre-built ESM/CJS bundles from `dist/`
+- **React Native** (Metro) — resolves raw TypeScript source from `src/`, and Metro auto-picks `.native.tsx` files over `.web.tsx`
+
+Both platforms use Tailwind classes for styling:
+- **Web** — standard Tailwind CSS with `class-variance-authority` for variants
+- **Native** — uniwind compiles Tailwind classes to React Native styles at build time
+
+This means web consumers get optimized bundles while native consumers get source that Metro compiles alongside your app code.
+
+## Development
+
+```bash
+# Install dependencies
+pnpm install
+
+# Build the library
+pnpm build
+
+# Run the web playground + Storybook
+pnpm --filter @byldpartners/web dev
+pnpm --filter @byldpartners/web storybook
+
+# Run the native playground
+pnpm --filter @byldpartners/native start
+
+# Scaffold a new component
+pnpm new-component ComponentName
+
+# Type check both platforms
+pnpm --filter @byldpartners/ui check-types
+```
+
+## License
+
+MIT

package/dist/chunk-464G63BO.cjs

@@ -0,0 +1,224 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } }// src/theme/web.ts
+var _react = require('react');
+
+// src/theme/tokens.ts
+var baseTokens = {
+  radius: {
+    sm: "0.25rem",
+    md: "0.375rem",
+    lg: "0.5rem",
+    xl: "0.75rem",
+    full: "9999px"
+  },
+  spacing: {
+    xs: "0.25rem",
+    sm: "0.5rem",
+    md: "1rem",
+    lg: "1.5rem",
+    xl: "2rem",
+    "2xl": "3rem",
+    "3xl": "4rem"
+  },
+  typography: {
+    fontFamily: 'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+    fontFamilyMono: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace'
+  }
+};
+
+// src/theme/presets/default.ts
+var defaultPreset = {
+  name: "default",
+  tokens: {
+    ...baseTokens,
+    colors: {
+      background: "oklch(1 0 0)",
+      foreground: "oklch(0.145 0 0)",
+      card: "oklch(1 0 0)",
+      cardForeground: "oklch(0.145 0 0)",
+      popover: "oklch(1 0 0)",
+      popoverForeground: "oklch(0.145 0 0)",
+      primary: "oklch(0.205 0 0)",
+      primaryForeground: "oklch(0.985 0 0)",
+      secondary: "oklch(0.965 0 0)",
+      secondaryForeground: "oklch(0.205 0 0)",
+      muted: "oklch(0.965 0 0)",
+      mutedForeground: "oklch(0.556 0 0)",
+      accent: "oklch(0.965 0 0)",
+      accentForeground: "oklch(0.205 0 0)",
+      destructive: "oklch(0.577 0.245 27.325)",
+      destructiveForeground: "oklch(0.985 0 0)",
+      border: "oklch(0.922 0 0)",
+      input: "oklch(0.922 0 0)",
+      ring: "oklch(0.708 0 0)"
+    }
+  }
+};
+
+// src/theme/presets/dark.ts
+var darkPreset = {
+  name: "dark",
+  tokens: {
+    ...baseTokens,
+    colors: {
+      background: "oklch(0.145 0 0)",
+      foreground: "oklch(0.985 0 0)",
+      card: "oklch(0.145 0 0)",
+      cardForeground: "oklch(0.985 0 0)",
+      popover: "oklch(0.145 0 0)",
+      popoverForeground: "oklch(0.985 0 0)",
+      primary: "oklch(0.985 0 0)",
+      primaryForeground: "oklch(0.205 0 0)",
+      secondary: "oklch(0.269 0 0)",
+      secondaryForeground: "oklch(0.985 0 0)",
+      muted: "oklch(0.269 0 0)",
+      mutedForeground: "oklch(0.708 0 0)",
+      accent: "oklch(0.269 0 0)",
+      accentForeground: "oklch(0.985 0 0)",
+      destructive: "oklch(0.396 0.141 25.723)",
+      destructiveForeground: "oklch(0.637 0.237 25.331)",
+      border: "oklch(0.269 0 0)",
+      input: "oklch(0.269 0 0)",
+      ring: "oklch(0.439 0 0)"
+    }
+  }
+};
+
+// src/theme/presets/aurora.ts
+var auroraPreset = {
+  name: "aurora",
+  tokens: {
+    colors: {
+      background: "oklch(0.18 0.04 270)",
+      foreground: "oklch(0.93 0.01 250)",
+      card: "oklch(0.22 0.045 270)",
+      cardForeground: "oklch(0.93 0.01 250)",
+      popover: "oklch(0.22 0.045 270)",
+      popoverForeground: "oklch(0.93 0.01 250)",
+      primary: "oklch(0.75 0.15 190)",
+      primaryForeground: "oklch(0.15 0.04 270)",
+      secondary: "oklch(0.35 0.08 290)",
+      secondaryForeground: "oklch(0.90 0.03 290)",
+      muted: "oklch(0.28 0.04 270)",
+      mutedForeground: "oklch(0.65 0.04 260)",
+      accent: "oklch(0.30 0.05 270)",
+      accentForeground: "oklch(0.93 0.01 250)",
+      destructive: "oklch(0.65 0.22 15)",
+      destructiveForeground: "oklch(0.95 0.01 15)",
+      border: "oklch(0.26 0.035 270)",
+      input: "oklch(0.26 0.035 270)",
+      ring: "oklch(0.65 0.12 190)"
+    },
+    radius: {
+      sm: "0.5rem",
+      md: "0.75rem",
+      lg: "1rem",
+      xl: "1.5rem",
+      full: "9999px"
+    },
+    spacing: {
+      xs: "0.375rem",
+      sm: "0.75rem",
+      md: "1.25rem",
+      lg: "2rem",
+      xl: "2.5rem",
+      "2xl": "3.5rem",
+      "3xl": "5rem"
+    },
+    typography: {
+      fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace',
+      fontFamilyMono: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace'
+    },
+    shadow: {
+      sm: "0 1px 3px 0 oklch(0.55 0.12 190 / 0.3), 0 1px 2px -1px oklch(0.55 0.12 190 / 0.2)",
+      md: "0 4px 8px -1px oklch(0.55 0.12 190 / 0.35), 0 2px 4px -2px oklch(0.55 0.12 190 / 0.25)",
+      lg: "0 10px 20px -3px oklch(0.55 0.12 190 / 0.4), 0 4px 8px -4px oklch(0.55 0.12 190 / 0.3)",
+      xl: "0 20px 30px -5px oklch(0.55 0.12 190 / 0.45), 0 8px 12px -6px oklch(0.55 0.12 190 / 0.35)"
+    }
+  }
+};
+
+// src/theme/web.ts
+function colorToCssVar(key) {
+  return `--color-${key.replace(/([A-Z])/g, "-$1").toLowerCase()}`;
+}
+function radiusToCssVar(key) {
+  return `--radius-${key}`;
+}
+function spacingToCssVar(key) {
+  return `--spacing-${key}`;
+}
+function generateCssVars(tokens) {
+  const vars = {};
+  for (const [key, value] of Object.entries(tokens.colors)) {
+    vars[colorToCssVar(key)] = value;
+  }
+  for (const [key, value] of Object.entries(tokens.radius)) {
+    vars[radiusToCssVar(key)] = value;
+  }
+  for (const [key, value] of Object.entries(tokens.spacing)) {
+    vars[spacingToCssVar(key)] = value;
+  }
+  vars["--font-family"] = tokens.typography.fontFamily;
+  vars["--font-family-mono"] = tokens.typography.fontFamilyMono;
+  if (tokens.shadow) {
+    for (const [key, value] of Object.entries(tokens.shadow)) {
+      vars[`--shadow-${key}`] = value;
+    }
+  }
+  return vars;
+}
+var SHADOW_KEYS = ["--shadow-sm", "--shadow-md", "--shadow-lg", "--shadow-xl"];
+function applyCssVars(vars, element = document.documentElement) {
+  for (const key of SHADOW_KEYS) {
+    if (!(key in vars)) {
+      element.style.removeProperty(key);
+    }
+  }
+  for (const [key, value] of Object.entries(vars)) {
+    element.style.setProperty(key, value);
+  }
+}
+var ThemeContext = _react.createContext.call(void 0, null);
+function useTheme() {
+  const ctx = _react.useContext.call(void 0, ThemeContext);
+  if (!ctx) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+  return ctx;
+}
+function ThemeProvider({
+  children,
+  defaultTheme = "default",
+  presets: customPresets
+}) {
+  const presets = _nullishCoalesce(customPresets, () => ( [defaultPreset, darkPreset, auroraPreset]));
+  const presetMap = new Map(presets.map((p) => [p.name, p]));
+  const [themeName, setThemeName] = _react.useState.call(void 0, defaultTheme);
+  const currentPreset = _nullishCoalesce(presetMap.get(themeName), () => ( presets[0]));
+  const tokens = currentPreset.tokens;
+  _react.useEffect.call(void 0, () => {
+    const vars = generateCssVars(tokens);
+    applyCssVars(vars);
+  }, [tokens]);
+  const setTheme = (name) => {
+    if (presetMap.has(name)) {
+      setThemeName(name);
+    } else {
+      console.warn(`Theme "${name}" not found. Available: ${Array.from(presetMap.keys()).join(", ")}`);
+    }
+  };
+  return _react.createElement.call(void 0, 
+    ThemeContext.Provider,
+    { value: { theme: themeName, setTheme, tokens } },
+    children
+  );
+}
+
+
+
+
+
+
+
+exports.defaultPreset = defaultPreset; exports.darkPreset = darkPreset; exports.auroraPreset = auroraPreset; exports.useTheme = useTheme; exports.ThemeProvider = ThemeProvider;
+//# sourceMappingURL=chunk-464G63BO.cjs.map

package/dist/chunk-464G63BO.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/Users/lucasgismondi/Desktop/dev/byld/internal/byld.ui/packages/ui/dist/chunk-464G63BO.cjs","../src/theme/web.ts","../src/theme/tokens.ts","../src/theme/presets/default.ts","../src/theme/presets/dark.ts","../src/theme/presets/aurora.ts"],"names":[],"mappings":"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","file":"/Users/lucasgismondi/Desktop/dev/byld/internal/byld.ui/packages/ui/dist/chunk-464G63BO.cjs","sourcesContent":[null,"\"use client\";\n\nimport { createContext, useContext, useEffect, useState, createElement } from \"react\";\nimport type { ThemePreset, ThemeTokens, ThemeColors, ThemeRadius, ThemeSpacing, ThemeShadow } from \"./theme.types\";\nimport { defaultPreset } from \"./presets/default\";\nimport { darkPreset } from \"./presets/dark\";\nimport { auroraPreset } from \"./presets/aurora\";\n\n// --- CSS Variable Generation ---\n\nfunction colorToCssVar(key: string): string {\n  // camelCase → kebab-case\n  return `--color-${key.replace(/([A-Z])/g, \"-$1\").toLowerCase()}`;\n}\n\nfunction radiusToCssVar(key: string): string {\n  return `--radius-${key}`;\n}\n\nfunction spacingToCssVar(key: string): string {\n  return `--spacing-${key}`;\n}\n\nfunction generateCssVars(tokens: ThemeTokens): Record<string, string> {\n  const vars: Record<string, string> = {};\n\n  for (const [key, value] of Object.entries(tokens.colors)) {\n    vars[colorToCssVar(key)] = value;\n  }\n  for (const [key, value] of Object.entries(tokens.radius)) {\n    vars[radiusToCssVar(key)] = value;\n  }\n  for (const [key, value] of Object.entries(tokens.spacing)) {\n    vars[spacingToCssVar(key)] = value;\n  }\n  vars[\"--font-family\"] = tokens.typography.fontFamily;\n  vars[\"--font-family-mono\"] = tokens.typography.fontFamilyMono;\n\n  if (tokens.shadow) {\n    for (const [key, value] of Object.entries(tokens.shadow)) {\n      vars[`--shadow-${key}`] = value;\n    }\n  }\n\n  return vars;\n}\n\n// Shadow CSS var keys that may have been set by a previous theme and need clearing\nconst SHADOW_KEYS = [\"--shadow-sm\", \"--shadow-md\", \"--shadow-lg\", \"--shadow-xl\"];\n\nfunction applyCssVars(vars: Record<string, string>, element: HTMLElement = document.documentElement) {\n  // Clear shadow overrides that may have been set by a previous theme\n  for (const key of SHADOW_KEYS) {\n    if (!(key in vars)) {\n      element.style.removeProperty(key);\n    }\n  }\n  for (const [key, value] of Object.entries(vars)) {\n    element.style.setProperty(key, value);\n  }\n}\n\n// --- Theme Context ---\n\ninterface ThemeContextValue {\n  theme: string;\n  setTheme: (name: string) => void;\n  tokens: ThemeTokens;\n}\n\nconst ThemeContext = createContext<ThemeContextValue | null>(null);\n\nexport function useTheme(): ThemeContextValue {\n  const ctx = useContext(ThemeContext);\n  if (!ctx) {\n    throw new Error(\"useTheme must be used within a ThemeProvider\");\n  }\n  return ctx;\n}\n\n// --- ThemeProvider ---\n\ninterface ThemeProviderProps {\n  children: React.ReactNode;\n  defaultTheme?: string;\n  presets?: ThemePreset[];\n}\n\nexport function ThemeProvider({\n  children,\n  defaultTheme = \"default\",\n  presets: customPresets,\n}: ThemeProviderProps) {\n  const presets = customPresets ?? [defaultPreset, darkPreset, auroraPreset];\n  const presetMap = new Map(presets.map((p) => [p.name, p]));\n\n  const [themeName, setThemeName] = useState(defaultTheme);\n\n  const currentPreset = presetMap.get(themeName) ?? presets[0];\n  const tokens = currentPreset.tokens;\n\n  useEffect(() => {\n    const vars = generateCssVars(tokens);\n    applyCssVars(vars);\n  }, [tokens]);\n\n  const setTheme = (name: string) => {\n    if (presetMap.has(name)) {\n      setThemeName(name);\n    } else {\n      console.warn(`Theme \"${name}\" not found. Available: ${Array.from(presetMap.keys()).join(\", \")}`);\n    }\n  };\n\n  return createElement(\n    ThemeContext.Provider,\n    { value: { theme: themeName, setTheme, tokens } },\n    children,\n  );\n}\n\nexport { defaultPreset, darkPreset, auroraPreset };\nexport type { ThemePreset, ThemeTokens, ThemeColors, ThemeRadius, ThemeSpacing, ThemeShadow };\n","import type { ThemeTokens } from \"./theme.types\";\n\n/**\n * Canonical theme token definitions.\n * All values are CSS-compatible strings.\n * Native side converts rem → numbers automatically.\n */\nexport const baseTokens: Omit<ThemeTokens, \"colors\"> = {\n  radius: {\n    sm: \"0.25rem\",\n    md: \"0.375rem\",\n    lg: \"0.5rem\",\n    xl: \"0.75rem\",\n    full: \"9999px\",\n  },\n  spacing: {\n    xs: \"0.25rem\",\n    sm: \"0.5rem\",\n    md: \"1rem\",\n    lg: \"1.5rem\",\n    xl: \"2rem\",\n    \"2xl\": \"3rem\",\n    \"3xl\": \"4rem\",\n  },\n  typography: {\n    fontFamily:\n      'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif',\n    fontFamilyMono:\n      'ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace',\n  },\n};\n","import type { ThemePreset } from \"../theme.types\";\nimport { baseTokens } from \"../tokens\";\n\nexport const defaultPreset: ThemePreset = {\n  name: \"default\",\n  tokens: {\n    ...baseTokens,\n    colors: {\n      background: \"oklch(1 0 0)\",\n      foreground: \"oklch(0.145 0 0)\",\n      card: \"oklch(1 0 0)\",\n      cardForeground: \"oklch(0.145 0 0)\",\n      popover: \"oklch(1 0 0)\",\n      popoverForeground: \"oklch(0.145 0 0)\",\n      primary: \"oklch(0.205 0 0)\",\n      primaryForeground: \"oklch(0.985 0 0)\",\n      secondary: \"oklch(0.965 0 0)\",\n      secondaryForeground: \"oklch(0.205 0 0)\",\n      muted: \"oklch(0.965 0 0)\",\n      mutedForeground: \"oklch(0.556 0 0)\",\n      accent: \"oklch(0.965 0 0)\",\n      accentForeground: \"oklch(0.205 0 0)\",\n      destructive: \"oklch(0.577 0.245 27.325)\",\n      destructiveForeground: \"oklch(0.985 0 0)\",\n      border: \"oklch(0.922 0 0)\",\n      input: \"oklch(0.922 0 0)\",\n      ring: \"oklch(0.708 0 0)\",\n    },\n  },\n};\n","import type { ThemePreset } from \"../theme.types\";\nimport { baseTokens } from \"../tokens\";\n\nexport const darkPreset: ThemePreset = {\n  name: \"dark\",\n  tokens: {\n    ...baseTokens,\n    colors: {\n      background: \"oklch(0.145 0 0)\",\n      foreground: \"oklch(0.985 0 0)\",\n      card: \"oklch(0.145 0 0)\",\n      cardForeground: \"oklch(0.985 0 0)\",\n      popover: \"oklch(0.145 0 0)\",\n      popoverForeground: \"oklch(0.985 0 0)\",\n      primary: \"oklch(0.985 0 0)\",\n      primaryForeground: \"oklch(0.205 0 0)\",\n      secondary: \"oklch(0.269 0 0)\",\n      secondaryForeground: \"oklch(0.985 0 0)\",\n      muted: \"oklch(0.269 0 0)\",\n      mutedForeground: \"oklch(0.708 0 0)\",\n      accent: \"oklch(0.269 0 0)\",\n      accentForeground: \"oklch(0.985 0 0)\",\n      destructive: \"oklch(0.396 0.141 25.723)\",\n      destructiveForeground: \"oklch(0.637 0.237 25.331)\",\n      border: \"oklch(0.269 0 0)\",\n      input: \"oklch(0.269 0 0)\",\n      ring: \"oklch(0.439 0 0)\",\n    },\n  },\n};\n","import type { ThemePreset } from \"../theme.types\";\n\nexport const auroraPreset: ThemePreset = {\n  name: \"aurora\",\n  tokens: {\n    colors: {\n      background: \"oklch(0.18 0.04 270)\",\n      foreground: \"oklch(0.93 0.01 250)\",\n      card: \"oklch(0.22 0.045 270)\",\n      cardForeground: \"oklch(0.93 0.01 250)\",\n      popover: \"oklch(0.22 0.045 270)\",\n      popoverForeground: \"oklch(0.93 0.01 250)\",\n      primary: \"oklch(0.75 0.15 190)\",\n      primaryForeground: \"oklch(0.15 0.04 270)\",\n      secondary: \"oklch(0.35 0.08 290)\",\n      secondaryForeground: \"oklch(0.90 0.03 290)\",\n      muted: \"oklch(0.28 0.04 270)\",\n      mutedForeground: \"oklch(0.65 0.04 260)\",\n      accent: \"oklch(0.30 0.05 270)\",\n      accentForeground: \"oklch(0.93 0.01 250)\",\n      destructive: \"oklch(0.65 0.22 15)\",\n      destructiveForeground: \"oklch(0.95 0.01 15)\",\n      border: \"oklch(0.26 0.035 270)\",\n      input: \"oklch(0.26 0.035 270)\",\n      ring: \"oklch(0.65 0.12 190)\",\n    },\n    radius: {\n      sm: \"0.5rem\",\n      md: \"0.75rem\",\n      lg: \"1rem\",\n      xl: \"1.5rem\",\n      full: \"9999px\",\n    },\n    spacing: {\n      xs: \"0.375rem\",\n      sm: \"0.75rem\",\n      md: \"1.25rem\",\n      lg: \"2rem\",\n      xl: \"2.5rem\",\n      \"2xl\": \"3.5rem\",\n      \"3xl\": \"5rem\",\n    },\n    typography: {\n      fontFamily:\n        'ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace',\n      fontFamilyMono:\n        'ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace',\n    },\n    shadow: {\n      sm: \"0 1px 3px 0 oklch(0.55 0.12 190 / 0.3), 0 1px 2px -1px oklch(0.55 0.12 190 / 0.2)\",\n      md: \"0 4px 8px -1px oklch(0.55 0.12 190 / 0.35), 0 2px 4px -2px oklch(0.55 0.12 190 / 0.25)\",\n      lg: \"0 10px 20px -3px oklch(0.55 0.12 190 / 0.4), 0 4px 8px -4px oklch(0.55 0.12 190 / 0.3)\",\n      xl: \"0 20px 30px -5px oklch(0.55 0.12 190 / 0.45), 0 8px 12px -6px oklch(0.55 0.12 190 / 0.35)\",\n    },\n  },\n};\n"]}