tr]:last:border-b-0",
+ className
+ )}
+ {...props}
+ />
+ )
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+ return (
+ |
+ )
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+ return (
+ [role=checkbox]]:translate-y-[2px]",
+ className
+ )}
+ {...props}
+ />
+ )
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+ return (
+ | [role=checkbox]]:translate-y-[2px]",
+ className
+ )}
+ {...props}
+ />
+ )
+}
+
+function TableCaption({
+ className,
+ ...props
+}: React.ComponentProps<"caption">) {
+ return (
+
+ )
+}
+
+export {
+ Table,
+ TableHeader,
+ TableBody,
+ TableFooter,
+ TableHead,
+ TableRow,
+ TableCell,
+ TableCaption,
+}
diff --git a/src/components/ui/tabs.tsx b/src/components/ui/tabs.tsx
new file mode 100644
index 0000000..f6f50ee
--- /dev/null
+++ b/src/components/ui/tabs.tsx
@@ -0,0 +1,89 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Tabs as TabsPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Tabs({
+ className,
+ orientation = "horizontal",
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
+
+const tabsListVariants = cva(
+ "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-[orientation=horizontal]/tabs:h-7 group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col data-[variant=line]:rounded-none",
+ {
+ variants: {
+ variant: {
+ default: "bg-muted",
+ line: "gap-1 bg-transparent",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ },
+ }
+)
+
+function TabsList({
+ className,
+ variant = "default",
+ ...props
+}: React.ComponentProps &
+ VariantProps) {
+ return (
+
+ )
+}
+
+function TabsTrigger({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
+
+function TabsContent({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }
diff --git a/src/components/ui/textarea.tsx b/src/components/ui/textarea.tsx
new file mode 100644
index 0000000..d94c547
--- /dev/null
+++ b/src/components/ui/textarea.tsx
@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+ return (
+
+ )
+}
+
+export { Textarea }
diff --git a/src/components/ui/toggle.tsx b/src/components/ui/toggle.tsx
new file mode 100644
index 0000000..9e2541e
--- /dev/null
+++ b/src/components/ui/toggle.tsx
@@ -0,0 +1,47 @@
+"use client"
+
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Toggle as TogglePrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+const toggleVariants = cva(
+ "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-muted hover:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+ {
+ variants: {
+ variant: {
+ default: "bg-transparent",
+ outline:
+ "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
+ },
+ size: {
+ default: "h-7 min-w-7 px-1.5",
+ sm: "h-6 min-w-6 px-1",
+ lg: "h-9 min-w-9 px-2",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ size: "default",
+ },
+ }
+)
+
+function Toggle({
+ className,
+ variant,
+ size,
+ ...props
+}: React.ComponentProps &
+ VariantProps) {
+ return (
+
+ )
+}
+
+export { Toggle, toggleVariants }
diff --git a/src/components/ui/tooltip.tsx b/src/components/ui/tooltip.tsx
new file mode 100644
index 0000000..d4d2254
--- /dev/null
+++ b/src/components/ui/tooltip.tsx
@@ -0,0 +1,55 @@
+import * as React from "react"
+import { Tooltip as TooltipPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function TooltipProvider({
+ delayDuration = 0,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
+
+function Tooltip({
+ ...props
+}: React.ComponentProps) {
+ return
+}
+
+function TooltipTrigger({
+ ...props
+}: React.ComponentProps) {
+ return
+}
+
+function TooltipContent({
+ className,
+ sideOffset = 0,
+ children,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+
+ {children}
+
+
+
+ )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
diff --git a/src/css-modules.d.ts b/src/css-modules.d.ts
deleted file mode 100644
index e621a31..0000000
--- a/src/css-modules.d.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-declare module '*.module.css' {
- const classes: Record
- export default classes
-}
-
-declare module '*.css' {}
diff --git a/src/hooks/index.ts b/src/hooks/index.ts
deleted file mode 100644
index 4cd0736..0000000
--- a/src/hooks/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export { useTheme } from './useTheme'
-export { useAWARTheme } from './useAWARTheme'
-export { useShortcut } from './useShortcut'
diff --git a/src/hooks/useAWARTheme.ts b/src/hooks/useAWARTheme.ts
deleted file mode 100644
index b9a2cd3..0000000
--- a/src/hooks/useAWARTheme.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { useContext } from 'react'
-import { ThemeContext } from '../providers/AWARProvider/ThemeContext'
-import type { ThemeContextValue } from '../providers/AWARProvider/ThemeContext'
-
-export function useAWARTheme(): ThemeContextValue {
- const context = useContext(ThemeContext)
- if (!context) {
- throw new Error(
- 'useAWARTheme must be used within an . ' +
- 'Wrap your app in to provide theme context.'
- )
- }
- return context
-}
diff --git a/src/hooks/useShortcut.ts b/src/hooks/useShortcut.ts
deleted file mode 100644
index 20cd181..0000000
--- a/src/hooks/useShortcut.ts
+++ /dev/null
@@ -1,151 +0,0 @@
-import { useEffect, useRef } from 'react'
-
-interface ShortcutOptions {
- global?: boolean
- enabled?: boolean
- preventDefault?: boolean
-}
-
-interface ParsedCombo {
- ctrl: boolean
- alt: boolean
- shift: boolean
- meta: boolean
- key: string
-}
-
-function parseCombo(combo: string): ParsedCombo {
- const parts = combo.toLowerCase().split('+')
- return {
- ctrl: parts.includes('ctrl'),
- alt: parts.includes('alt'),
- shift: parts.includes('shift'),
- meta: parts.includes('meta') || parts.includes('cmd'),
- key: parts.filter(p => !['ctrl', 'alt', 'shift', 'meta', 'cmd'].includes(p))[0] || '',
- }
-}
-
-function matchesCombo(e: KeyboardEvent, parsed: ParsedCombo): boolean {
- return (
- e.ctrlKey === parsed.ctrl &&
- e.altKey === parsed.alt &&
- e.shiftKey === parsed.shift &&
- e.metaKey === parsed.meta &&
- e.key.toLowerCase() === parsed.key
- )
-}
-
-type Handler = {
- combo: string
- parsed: ParsedCombo
- callback: (e: KeyboardEvent) => void
- global: boolean
- preventDefault: boolean
- element: HTMLElement | null
-}
-
-const handlers: Set = new Set()
-const globalCombos = new Map()
-let listenerAttached = false
-
-function handleKeyDown(e: KeyboardEvent) {
- const active = document.activeElement as HTMLElement | null
- const matchedScoped: { handler: Handler; depth: number }[] = []
- const matchedGlobal: Handler[] = []
-
- for (const h of handlers) {
- if (!matchesCombo(e, h.parsed)) continue
- if (h.global) {
- matchedGlobal.push(h)
- } else if (h.element && active) {
- if (h.element.contains(active)) {
- let depth = 0
- let node: HTMLElement | null = active
- while (node && node !== h.element) {
- depth++
- node = node.parentElement
- }
- matchedScoped.push({ handler: h, depth })
- }
- }
- }
-
- if (matchedScoped.length > 0) {
- matchedScoped.sort((a, b) => a.depth - b.depth)
- const winner = matchedScoped[0]!
- if (winner.handler.preventDefault) e.preventDefault()
- winner.handler.callback(e)
- return
- }
-
- if (matchedGlobal.length > 0) {
- const winner = matchedGlobal[0]!
- if (winner.preventDefault) e.preventDefault()
- winner.callback(e)
- }
-}
-
-function ensureListener() {
- if (!listenerAttached) {
- document.addEventListener('keydown', handleKeyDown)
- listenerAttached = true
- }
-}
-
-export function useShortcut(
- combo: string,
- callback: (e: KeyboardEvent) => void,
- options: ShortcutOptions = {}
-) {
- const { global: isGlobal = false, enabled = true, preventDefault = true } = options
- const ref = useRef(null)
- const callbackRef = useRef(callback)
- callbackRef.current = callback
-
- useEffect(() => {
- if (!enabled) return
-
- // Find the component root element - walk up from the hook caller
- // For scoped shortcuts, we need a parent element reference
- let element: HTMLElement | null = null
- if (!isGlobal) {
- // Use a temporary element to find the nearest parent
- // The ref should be set by the calling component
- // Fallback: use document.body for scoped (effectively global)
- element = ref.current || document.body
- }
-
- const parsed = parseCombo(combo)
- const handler: Handler = {
- combo,
- parsed,
- callback: (e: KeyboardEvent) => callbackRef.current(e),
- global: isGlobal,
- preventDefault,
- element,
- }
-
- // Dev-mode collision warning
- const isDev = (globalThis as Record).process && ((globalThis as Record).process as Record>).env?.NODE_ENV !== 'production'
- if (isGlobal && isDev) {
- if (globalCombos.has(combo)) {
- console.warn(
- `[useShortcut] Duplicate global shortcut "${combo}" registered`
- )
- }
- globalCombos.set(combo, combo)
- }
-
- ensureListener()
- handlers.add(handler)
-
- return () => {
- handlers.delete(handler)
- if (isGlobal) {
- globalCombos.delete(combo)
- }
- }
- }, [combo, isGlobal, enabled, preventDefault])
-
- return ref
-}
diff --git a/src/hooks/useTheme.ts b/src/hooks/useTheme.ts
deleted file mode 100644
index d9f398d..0000000
--- a/src/hooks/useTheme.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { useState, useEffect, useCallback } from 'react'
-
-type Mode = 'dark' | 'light'
-
-function getInitialMode(): Mode {
- if (typeof window === 'undefined') return 'dark'
- const stored = localStorage.getItem('aw-mode') as Mode | null
- if (stored === 'dark' || stored === 'light') return stored
- const attr = document.documentElement.getAttribute('data-mode')
- if (attr === 'dark' || attr === 'light') return attr
- return 'dark'
-}
-
-export function useTheme() {
- const [mode, setModeState] = useState(getInitialMode)
-
- const setMode = useCallback((m: Mode) => {
- setModeState(m)
- document.documentElement.setAttribute('data-mode', m)
- localStorage.setItem('aw-mode', m)
- }, [])
-
- const toggle = useCallback(() => {
- setMode(mode === 'dark' ? 'light' : 'dark')
- }, [mode, setMode])
-
- useEffect(() => {
- document.documentElement.setAttribute('data-mode', mode)
- }, [mode])
-
- return { mode, toggle, setMode } as const
-}
diff --git a/src/index.ts b/src/index.ts
index 81a3b67..b3b9375 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,61 +1,177 @@
-// Provider
-export { AWARProvider } from './providers/AWARProvider'
-export type { AWARProviderProps, ThemeContextValue, Mode } from './providers/AWARProvider'
-export { ThemeContext } from './providers/AWARProvider'
-
-// Tokens
-export { primitives } from './tokens/primitives'
-export { semanticsShared, semanticsDark, semanticsLight } from './tokens/semantics'
-
-// Hooks
-export { useTheme } from './hooks/useTheme'
-export { useAWARTheme } from './hooks/useAWARTheme'
-export { useShortcut } from './hooks/useShortcut'
-
-// Branding
-export { Logo } from './components/branding/Logo'
-export type { LogoProps, LogoSize, LogoVariant } from './components/branding/Logo'
-export { Wordmark } from './components/branding/Wordmark'
-export type { WordmarkProps, WordmarkSize } from './components/branding/Wordmark'
-export { LogoLockup } from './components/branding/LogoLockup'
-export type { LogoLockupProps, LogoLockupOrientation } from './components/branding/LogoLockup'
-export { FigletText } from './components/branding/FigletText'
-export type { FigletTextProps, FigletGradientPreset, FigletGradientCustom, FigletDirection, FigletFont } from './components/branding/FigletText'
-
-// Layout
-export { Stack } from './components/layout/Stack'
-export { Inline } from './components/layout/Inline'
-export { Grid } from './components/layout/Grid'
-
-// Primitives
-export { Text } from './components/primitives/Text'
-export { Button } from './components/primitives/Button'
-export type { ButtonProps, ButtonVariant, ButtonSize } from './components/primitives/Button'
-export { Input } from './components/primitives/Input'
-export { Badge } from './components/primitives/Badge'
-export { Divider } from './components/primitives/Divider'
-export { Kbd } from './components/primitives/Kbd'
-
-// Containers
-export { Card } from './components/containers/Card'
-export type { CardProps, CardVariant, CardHeaderProps, CardBodyProps, CardFooterProps } from './components/containers/Card'
-export { Frame } from './components/containers/Frame'
-export type { FrameProps, FrameVariant, FrameAccent } from './components/containers/Frame'
-export { Alert } from './components/containers/Alert'
-export type { AlertProps, AlertVariant } from './components/containers/Alert'
-export { Table } from './components/containers/Table'
-export type { TableProps, TableHeadProps, TableBodyProps, TableRowProps, TableCellProps } from './components/containers/Table'
-export { ActionBar } from './components/containers/ActionBar'
-export type { ActionBarProps, ActionBarItemProps } from './components/containers/ActionBar'
-export { List } from './components/containers/List'
-export type { ListProps, ListItemProps, ListBullet } from './components/containers/List'
-
-// Overlays
-export { Modal } from './components/overlays/Modal'
-export type { ModalProps, ModalTriggerProps, ModalContentProps, ModalCloseProps } from './components/overlays/Modal'
-export { Dropdown } from './components/overlays/Dropdown'
-export type { DropdownProps, DropdownTriggerProps, DropdownContentProps, DropdownItemProps, DropdownSeparatorProps } from './components/overlays/Dropdown'
-export { Tooltip } from './components/overlays/Tooltip'
-export type { TooltipProps } from './components/overlays/Tooltip'
-export { Popover } from './components/overlays/Popover'
-export type { PopoverProps, PopoverTriggerProps, PopoverContentProps, PopoverCloseProps } from './components/overlays/Popover'
+// AWAR Design System — Public API
+// @awar.dev/ui v2.0
+
+// ── Styles (consumers must import "@awar.dev/ui/styles") ──
+import "./styles/globals.css"
+
+// ── Provider & Theme ──
+export { AWARProvider, useAWARTheme } from "./provider"
+export type { AWARProviderProps, Theme, AWARThemeContext } from "./provider"
+
+// ── Utilities ──
+export { cn } from "./lib/utils"
+
+// ── AWAR Branding ──
+export {
+ FigletText,
+ FIGLET_ART,
+ FULL_WORDMARK_ART,
+ GRADIENT_PRESETS,
+} from "./components/awar/figlet-text"
+export type {
+ FigletTextProps,
+ FigletFont,
+ FigletDirection,
+ FigletGradientPreset,
+ FigletGradientCustom,
+} from "./components/awar/figlet-text"
+export { Logo } from "./components/awar/logo"
+export type { LogoProps } from "./components/awar/logo"
+export { LogoLockup } from "./components/awar/logo-lockup"
+export type { LogoLockupProps } from "./components/awar/logo-lockup"
+
+// ── shadcn/ui Components ──
+export {
+ Accordion,
+ AccordionItem,
+ AccordionTrigger,
+ AccordionContent,
+} from "./components/ui/accordion"
+
+export { Alert, AlertTitle, AlertDescription } from "./components/ui/alert"
+
+export { Avatar, AvatarImage, AvatarFallback } from "./components/ui/avatar"
+
+export { Badge, badgeVariants } from "./components/ui/badge"
+
+export { Button, buttonVariants } from "./components/ui/button"
+
+export {
+ Card,
+ CardHeader,
+ CardFooter,
+ CardTitle,
+ CardDescription,
+ CardContent,
+} from "./components/ui/card"
+
+export { Checkbox } from "./components/ui/checkbox"
+
+export {
+ Command,
+ CommandDialog,
+ CommandInput,
+ CommandList,
+ CommandEmpty,
+ CommandGroup,
+ CommandItem,
+ CommandShortcut,
+ CommandSeparator,
+} from "./components/ui/command"
+
+export {
+ Dialog,
+ DialogTrigger,
+ DialogContent,
+ DialogHeader,
+ DialogFooter,
+ DialogTitle,
+ DialogDescription,
+ DialogClose,
+} from "./components/ui/dialog"
+
+export {
+ DropdownMenu,
+ DropdownMenuPortal,
+ DropdownMenuTrigger,
+ DropdownMenuContent,
+ DropdownMenuGroup,
+ DropdownMenuLabel,
+ DropdownMenuItem,
+ DropdownMenuCheckboxItem,
+ DropdownMenuRadioGroup,
+ DropdownMenuRadioItem,
+ DropdownMenuSeparator,
+ DropdownMenuShortcut,
+ DropdownMenuSub,
+ DropdownMenuSubTrigger,
+ DropdownMenuSubContent,
+} from "./components/ui/dropdown-menu"
+
+export { Input } from "./components/ui/input"
+
+export { Label } from "./components/ui/label"
+
+export {
+ Popover,
+ PopoverTrigger,
+ PopoverContent,
+ PopoverAnchor,
+ PopoverHeader,
+ PopoverTitle,
+ PopoverDescription,
+} from "./components/ui/popover"
+
+export { Progress } from "./components/ui/progress"
+
+export { ScrollArea, ScrollBar } from "./components/ui/scroll-area"
+
+export {
+ Select,
+ SelectContent,
+ SelectGroup,
+ SelectItem,
+ SelectLabel,
+ SelectScrollDownButton,
+ SelectScrollUpButton,
+ SelectSeparator,
+ SelectTrigger,
+ SelectValue,
+} from "./components/ui/select"
+
+export { Separator } from "./components/ui/separator"
+
+export {
+ Sheet,
+ SheetTrigger,
+ SheetClose,
+ SheetContent,
+ SheetHeader,
+ SheetFooter,
+ SheetTitle,
+ SheetDescription,
+} from "./components/ui/sheet"
+
+export { Slider } from "./components/ui/slider"
+
+export { Switch } from "./components/ui/switch"
+
+export {
+ Table,
+ TableHeader,
+ TableBody,
+ TableFooter,
+ TableHead,
+ TableRow,
+ TableCell,
+ TableCaption,
+} from "./components/ui/table"
+
+export {
+ Tabs,
+ TabsList,
+ TabsTrigger,
+ TabsContent,
+ tabsListVariants,
+} from "./components/ui/tabs"
+
+export { Textarea } from "./components/ui/textarea"
+
+export { Toggle, toggleVariants } from "./components/ui/toggle"
+
+export {
+ Tooltip,
+ TooltipTrigger,
+ TooltipContent,
+ TooltipProvider,
+} from "./components/ui/tooltip"
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
new file mode 100644
index 0000000..bd0c391
--- /dev/null
+++ b/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+ return twMerge(clsx(inputs))
+}
diff --git a/src/main.tsx b/src/main.tsx
index 6f1e7a0..2fa2750 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,7 +1,8 @@
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
-import { AWARProvider } from './providers/AWARProvider'
-import App from './showcase/App'
+import '@/styles/globals.css'
+import { AWARProvider } from '@/provider'
+import App from '@/App'
createRoot(document.getElementById('root')!).render(
diff --git a/src/provider.tsx b/src/provider.tsx
new file mode 100644
index 0000000..443d47a
--- /dev/null
+++ b/src/provider.tsx
@@ -0,0 +1,70 @@
+import * as React from "react"
+
+type Theme = "dark" | "light"
+
+interface AWARThemeContext {
+ theme: Theme
+ setTheme: (theme: Theme) => void
+ toggleTheme: () => void
+}
+
+const ThemeContext = React.createContext(null)
+
+export interface AWARProviderProps {
+ /** Initial theme. Defaults to "dark". */
+ defaultTheme?: Theme
+ /** Controlled theme value. When provided, the provider becomes controlled. */
+ theme?: Theme
+ /** Callback when theme changes. */
+ onThemeChange?: (theme: Theme) => void
+ children: React.ReactNode
+}
+
+function AWARProvider({
+ defaultTheme = "dark",
+ theme: controlledTheme,
+ onThemeChange,
+ children,
+}: AWARProviderProps) {
+ const [internalTheme, setInternalTheme] = React.useState(defaultTheme)
+ const theme = controlledTheme ?? internalTheme
+
+ const setTheme = React.useCallback(
+ (next: Theme) => {
+ if (!controlledTheme) setInternalTheme(next)
+ onThemeChange?.(next)
+ },
+ [controlledTheme, onThemeChange]
+ )
+
+ const toggleTheme = React.useCallback(() => {
+ setTheme(theme === "dark" ? "light" : "dark")
+ }, [theme, setTheme])
+
+ // Apply class to documentElement
+ React.useEffect(() => {
+ const root = document.documentElement
+ root.classList.toggle("light", theme === "light")
+ root.classList.toggle("dark", theme === "dark")
+ }, [theme])
+
+ const value = React.useMemo(
+ () => ({ theme, setTheme, toggleTheme }),
+ [theme, setTheme, toggleTheme]
+ )
+
+ return (
+ {children}
+ )
+}
+
+function useAWARTheme(): AWARThemeContext {
+ const ctx = React.useContext(ThemeContext)
+ if (!ctx) {
+ throw new Error("useAWARTheme must be used within ")
+ }
+ return ctx
+}
+
+export { AWARProvider, useAWARTheme, ThemeContext }
+export type { Theme, AWARThemeContext }
diff --git a/src/providers/AWARProvider/AWARProvider.tsx b/src/providers/AWARProvider/AWARProvider.tsx
deleted file mode 100644
index d1a4131..0000000
--- a/src/providers/AWARProvider/AWARProvider.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import { useState, useCallback, useEffect, useMemo } from 'react'
-import '../../tokens/tokens.css'
-import { ThemeContext } from './ThemeContext'
-import type { Mode } from './ThemeContext'
-import type { AWARProviderProps } from './AWARProvider.types'
-
-function getInitialMode(defaultMode?: Mode): Mode {
- if (typeof window === 'undefined') return defaultMode ?? 'dark'
- const stored = localStorage.getItem('aw-mode') as Mode | null
- if (stored === 'dark' || stored === 'light') return stored
- const attr = document.documentElement.getAttribute('data-mode')
- if (attr === 'dark' || attr === 'light') return attr
- return defaultMode ?? 'dark'
-}
-
-function AWARProvider({ defaultMode, children }: AWARProviderProps) {
- const [mode, setModeState] = useState(() => getInitialMode(defaultMode))
-
- const setMode = useCallback((m: Mode) => {
- setModeState(m)
- document.documentElement.setAttribute('data-mode', m)
- localStorage.setItem('aw-mode', m)
- }, [])
-
- const toggle = useCallback(() => {
- setModeState((prev) => {
- const next = prev === 'dark' ? 'light' : 'dark'
- document.documentElement.setAttribute('data-mode', next)
- localStorage.setItem('aw-mode', next)
- return next
- })
- }, [])
-
- useEffect(() => {
- document.documentElement.setAttribute('data-mode', mode)
- }, [mode])
-
- const value = useMemo(() => ({ mode, toggle, setMode }), [mode, toggle, setMode])
-
- return (
-
- {children}
-
- )
-}
-
-AWARProvider.displayName = 'AWARProvider'
-
-export { AWARProvider }
diff --git a/src/providers/AWARProvider/AWARProvider.types.ts b/src/providers/AWARProvider/AWARProvider.types.ts
deleted file mode 100644
index b91df4b..0000000
--- a/src/providers/AWARProvider/AWARProvider.types.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import type { ReactNode } from 'react'
-import type { Mode } from './ThemeContext'
-
-export interface AWARProviderProps {
- defaultMode?: Mode
- children: ReactNode
-}
diff --git a/src/providers/AWARProvider/ThemeContext.ts b/src/providers/AWARProvider/ThemeContext.ts
deleted file mode 100644
index caac0a3..0000000
--- a/src/providers/AWARProvider/ThemeContext.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { createContext } from 'react'
-
-export type Mode = 'dark' | 'light'
-
-export interface ThemeContextValue {
- mode: Mode
- toggle: () => void
- setMode: (mode: Mode) => void
-}
-
-export const ThemeContext = createContext(null)
diff --git a/src/providers/AWARProvider/index.ts b/src/providers/AWARProvider/index.ts
deleted file mode 100644
index d3b709d..0000000
--- a/src/providers/AWARProvider/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export { AWARProvider } from './AWARProvider'
-export type { AWARProviderProps } from './AWARProvider.types'
-export { ThemeContext } from './ThemeContext'
-export type { ThemeContextValue, Mode } from './ThemeContext'
diff --git a/src/showcase/App.tsx b/src/showcase/App.tsx
deleted file mode 100644
index 7b39428..0000000
--- a/src/showcase/App.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-import { useState, useEffect } from 'react'
-import { useAWARTheme } from '../hooks/useAWARTheme'
-import { useShortcut } from '../hooks/useShortcut'
-import { Divider } from '../components/primitives/Divider'
-import { Inline } from '../components/layout/Inline'
-import TokenGallery from './TokenGallery'
-import Sidebar from './Sidebar'
-import ComponentOverview from './ComponentOverview'
-import { pages } from './pages'
-
-type Route =
- | { tab: 'tokens' }
- | { tab: 'components'; slug?: string }
-
-function parseRoute(): Route {
- const hash = location.hash || '#/components'
- if (hash === '#/tokens') return { tab: 'tokens' }
- const match = hash.match(/^#\/components\/(.+)$/)
- if (match) return { tab: 'components', slug: match[1] }
- return { tab: 'components' }
-}
-
-function NavBar({ tab }: { tab: 'components' | 'tokens' }) {
- const links: { label: string; hash: string; key: string }[] = [
- { label: 'COMPONENTS', hash: '#/components', key: 'components' },
- { label: 'TOKENS', hash: '#/tokens', key: 'tokens' },
- ]
- return (
-
- )
-}
-
-export default function App() {
- const [route, setRoute] = useState(parseRoute)
- const { toggle } = useAWARTheme()
-
- useShortcut('ctrl+t', toggle, { global: true })
-
- useEffect(() => {
- const onHashChange = () => setRoute(parseRoute())
- window.addEventListener('hashchange', onHashChange)
- return () => window.removeEventListener('hashchange', onHashChange)
- }, [])
-
- if (route.tab === 'tokens') {
- return (
- <>
-
-
-
- )
- }
-
- const slug = route.slug
- const Page = slug ? pages[slug] : undefined
-
- return (
-
- )
-}
diff --git a/src/showcase/ComponentOverview.tsx b/src/showcase/ComponentOverview.tsx
deleted file mode 100644
index 5a11872..0000000
--- a/src/showcase/ComponentOverview.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { LogoLockup } from '../components/branding/LogoLockup'
-import { Stack } from '../components/layout/Stack'
-import { Text } from '../components/primitives/Text'
-
-export default function ComponentOverview() {
- return (
-
-
- Select a component from the sidebar
-
- )
-}
diff --git a/src/showcase/ComponentPage.tsx b/src/showcase/ComponentPage.tsx
deleted file mode 100644
index 6629d25..0000000
--- a/src/showcase/ComponentPage.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-import { ReactNode } from 'react'
-import type { ComponentEntry } from './registry'
-import { Text } from '../components/primitives/Text'
-import { Divider } from '../components/primitives/Divider'
-import { Badge } from '../components/primitives/Badge'
-import { Stack } from '../components/layout/Stack'
-import { Inline } from '../components/layout/Inline'
-import { Table } from '../components/containers/Table'
-import { Card } from '../components/containers/Card'
-import type { PropInfo, SubcomponentInfo } from './registry'
-
-function PropsTable({ props, title }: { props: PropInfo[]; title?: string }) {
- if (props.length === 0) return null
- return (
-
- {title && {title}}
-
-
-
- PROP
- TYPE
- DEFAULT
- DESCRIPTION
-
-
-
- {props.map(p => (
-
-
- {p.name}
-
-
- {p.type}
-
-
- {p.default ?? '—'}
-
-
- {p.description}
-
-
- ))}
-
-
-
- )
-}
-
-function SubcomponentProps({ subcomponents }: { subcomponents: SubcomponentInfo[] }) {
- return (
- <>
- {subcomponents.map(sub => (
-
- ))}
-
- )
-}
-
-export default function ComponentPage({
- entry,
- children,
- usage,
-}: {
- entry: ComponentEntry
- children: ReactNode
- usage?: string
-}) {
- const usageCode = usage ?? entry.usage
- return (
-
- {/* Header */}
-
-
- {entry.name.toUpperCase()}
- {entry.category}
-
- {entry.description}
-
-
-
-
- {/* Examples */}
-
- EXAMPLES
- {children}
-
-
-
-
- {/* Props */}
-
- PROPS
-
- {entry.subcomponents && }
- {entry.props.length === 0 && !entry.subcomponents && (
- No custom props — uses standard HTML attributes.
- )}
-
-
-
-
- {/* Usage */}
-
- USAGE
-
-
-
- {usageCode}
-
-
-
-
-
- )
-}
diff --git a/src/showcase/Sidebar.tsx b/src/showcase/Sidebar.tsx
deleted file mode 100644
index 0cf8f9f..0000000
--- a/src/showcase/Sidebar.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { categories, getComponentsByCategory } from './registry'
-import TreeView, { type TreeNode } from './TreeView'
-
-const nodes: TreeNode[] = categories.map(cat => ({
- key: cat.slug,
- label: cat.name,
- children: getComponentsByCategory(cat.slug).map(comp => ({
- key: comp.slug,
- label: comp.name,
- href: `#/components/${comp.slug}`,
- })),
-}))
-
-export default function Sidebar({ activeSlug }: { activeSlug?: string }) {
- return (
-
- )
-}
diff --git a/src/showcase/TokenGallery.tsx b/src/showcase/TokenGallery.tsx
deleted file mode 100644
index c15886a..0000000
--- a/src/showcase/TokenGallery.tsx
+++ /dev/null
@@ -1,549 +0,0 @@
-import { useState } from 'react'
-import { useAWARTheme } from '../hooks/useAWARTheme'
-import { primitives } from '../tokens/primitives'
-
-// ── Use primitives as ref (source of truth) ──
-const ref = {
- color: primitives.color,
- fontSize: Object.fromEntries(
- Object.entries(primitives.font.size).map(([k, v]) => [k, parseInt(v)])
- ) as Record,
- lineHeight: Object.fromEntries(
- Object.entries(primitives['line-height']).map(([k, v]) => [k, parseInt(v)])
- ) as Record,
- space: Object.values(primitives.space).map(v => parseInt(v)),
-}
-
-// ── Semantic mappings ──
-const dark = {
- bgRoot: ref.color.neutral[950],
- bgSurface: ref.color.neutral[900],
- bgRaised: ref.color.neutral[800],
- bgOverlay: ref.color.neutral[700],
- bgBrand: ref.color.maroon[500],
- bgBrandSubtle: ref.color.maroon[800],
- textPrimary: ref.color.neutral[100],
- textSecondary: ref.color.neutral[400],
- textMuted: ref.color.neutral[500],
- textAccent: ref.color.amber[500],
- textBrand: ref.color.maroon[300],
- interactive: ref.color.amber[500],
- interactiveHover: ref.color.amber[400],
- interactiveActive: ref.color.amber[600],
- interactiveMuted: ref.color.amber[800],
- borderDefault: ref.color.neutral[700],
- borderStrong: ref.color.neutral[500],
- borderInteractive: ref.color.amber[500],
- borderBrand: ref.color.maroon[400],
- selectionBg: ref.color.amber[900],
- focusRing: ref.color.amber[500],
-}
-
-const light = {
- bgRoot: ref.color.neutral[50],
- bgSurface: ref.color.neutral[0],
- bgRaised: ref.color.neutral[100],
- bgOverlay: ref.color.neutral[200],
- bgBrand: ref.color.maroon[500],
- bgBrandSubtle: ref.color.maroon[100],
- textPrimary: ref.color.neutral[900],
- textSecondary: ref.color.neutral[600],
- textMuted: ref.color.neutral[400],
- textAccent: ref.color.amber[700],
- textBrand: ref.color.maroon[600],
- interactive: ref.color.amber[700],
- interactiveHover: ref.color.amber[600],
- interactiveActive: ref.color.amber[800],
- interactiveMuted: ref.color.amber[100],
- borderDefault: ref.color.neutral[200],
- borderStrong: ref.color.neutral[400],
- borderInteractive: ref.color.amber[700],
- borderBrand: ref.color.maroon[400],
- selectionBg: ref.color.amber[100],
- focusRing: ref.color.amber[600],
-}
-
-type Theme = { [K in keyof typeof dark]: string }
-
-const FONT = primitives.font.mono
-
-// ── Utility ──
-const Divider = ({ t }: { t: Theme }) => (
-
- {'─'.repeat(80)}
-
-)
-
-const SectionHeader = ({ title, t }: { title: string; t: Theme }) => (
-
-)
-
-const Label = ({ children, t }: { children: React.ReactNode; t: Theme }) => (
-
- {children}
-
-)
-
-// ── Color Swatch Row ──
-const SwatchRow = ({ name, colors, t }: { name: string; colors: Record; t: Theme }) => (
-
- {name}
-
- {Object.entries(colors).map(([step, hex]) => (
-
- ))}
-
-
-
-
-
-
- {transform === 'uppercase' ? 'THE QUICK BROWN FOX' : 'The quick brown fox jumps over the lazy dog'}
-
-
- {size}px / {lh}px / {weight}
-
-
- {ref.space.map((val, i) => (
-
-
- space-{i} ({val}px)
-
-
-
- ))}
-
- {levels.map(({ name, bg, desc }) => (
-
- {name}
- {desc}
- bg: {bg}
-
- ))}
-
- {buttons.map(b => (
-
- ))}
-
-
- )
-}
-
-const InputPreview = ({ t }: { t: Theme }) => {
- const [focused, setFocused] = useState(null)
- return (
-
-
-
-
- ▸
- setFocused('user')}
- onBlur={() => setFocused(null)}
- placeholder="enter username..."
- style={{
- fontFamily: FONT, fontSize: 14, color: t.textPrimary, background: 'transparent',
- border: 'none', outline: 'none', width: '100%', height: '100%',
- }}
- />
-
-
-
-
-
- ▸
-
-
-
- ✕ Password must be at least 8 characters
-
-
-
-
-
- ▾ SYSTEM STATUS
-
- ⌘+I
-
-
-
- All services operational.
-
-
- Last checked: 2026-02-16 14:32:07 UTC
-
-
- {[
- { label: 'API', color: ref.color.green[500] },
- { label: 'DB', color: ref.color.green[500] },
- { label: 'CDN', color: ref.color.yellow[500] },
- ].map(s => (
-
- ● {s.label}
-
- ))}
-
-
-
- {alerts.map(a => (
-
- {a.icon} {a.text}
-
- ))}
-
-
- {cols.map(c => (
- {c}
- ))}
-
- {rows.map((row, i) => (
-
- {keys.map(k => (
- {row[k]}
- ))}
-
- ))}
-
-
- AWAR
-
-
- Algorithmic Warfare · Design System
-
-
- #773333 × #FF9944 · Monospace · 0-radius · No shadows
-
-
- {sizes.map(s => (
-
-
- {s.name} ({s.h}px)
-
-
- BUTTON · {s.desc}
-
-
- ))}
-
- Box Drawing
- {'┌──────────────────────────┐'}
- {'│'} Single-line box{' │'}
- {'├──────────────────────────┤'}
- {'│'} Accent text inside{' │'}
- {'└──────────────────────────┘'}
-
- {'╔══════════════════════════╗'}
- {'║'} Double-line box{' ║'}
- {'╠══════════════════════════╣'}
- {'║'} Brand text inside{' ║'}
- {'╚══════════════════════════╝'}
-
- Block Fills & Progress
- {'████████████░░░░░░░░'} 60%
- {'▓▓▓▓▒▒▒▒░░░░'} density grades
-
- Controls
- {'[x] Option enabled [ ] Option disabled [~] Indeterminate'}
- {'▸ Collapsed item ▾ Expanded item'}
-
- {/* ── Header ── */}
-
-
- Design System Token Gallery
- AWAR
-
-
-
-
-
- Terminal-inspired · ASCII aesthetic · #773333 × #FF9944 · Monospace-only · 0-radius · No shadows
-
-
- {/* ── Brand Identity ── */}
-
-
-
- {/* ── Colors ── */}
-
-
-
-
-
-
-
-
-
-
-
- {/* ── Semantic Color Roles ── */}
-
-
- {Object.entries(t).map(([name, hex]) => (
-
- ))}
-
-
- {/* ── Typography ── */}
-
-
-
-
-
-
-
-
- {/* ── Spacing ── */}
-
-
-
- {/* ── Component Sizing ── */}
-
-
-
- {/* ── Elevation ── */}
-
-
-
- {/* ── ASCII Box Drawing ── */}
-
-
-
- {/* ── Component Previews ── */}
-
-
- Buttons
-
-
- Inputs
-
-
- Card
-
-
- Alerts / Feedback
-
-
- Table
-
-
- {/* ── Footer ── */}
-
-
- AWAR DESIGN SYSTEM · 77 PRIMITIVE TOKENS · 119 SEMANTIC TOKENS · 12 SEED DECISIONS
-
-
-
-
-
- )
-}
-
-/* ── Recursive internals ── */
-
-interface NodeListProps {
- nodes: TreeNode[]
- depth: number
- activeKey?: string
- collapsed: Record
- toggle: (key: string) => void
- renderItem?: (node: TreeNode, active: boolean) => ReactNode
-}
-
-function NodeList({ nodes, depth, activeKey, collapsed, toggle, renderItem }: NodeListProps) {
- // Top-level nodes render as root branches (no connector lines)
- if (depth === 0) {
- return (
- <>
- {nodes.map(node => (
-
- ))}
-
- )
- }
-
- // Nested nodes render inside a children container with connector lines
- return (
-
- {nodes.map((node, i) => {
- const isLast = i === nodes.length - 1
- const isBranch = node.children && node.children.length > 0
-
- return (
-
- {isBranch ? (
-
- ) : (
-
- )}
-
- )
- })}
-
-
- {!isCollapsed && node.children && (
-
- )}
-
- )
-}
-
-interface LeafProps {
- node: TreeNode
- activeKey?: string
- renderItem?: (node: TreeNode, active: boolean) => ReactNode
-}
-
-function Leaf({ node, activeKey, renderItem }: LeafProps) {
- const isActive = node.key === activeKey
-
- if (renderItem) {
- return <>{renderItem(node, isActive)}
- }
-
- return (
-
- {node.label}
-
- )
-}
diff --git a/src/showcase/pages/ActionBarPage.tsx b/src/showcase/pages/ActionBarPage.tsx
deleted file mode 100644
index 3c07a6d..0000000
--- a/src/showcase/pages/ActionBarPage.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { getComponentBySlug } from '../registry'
-import ComponentPage from '../ComponentPage'
-import { Stack } from '../../components/layout/Stack'
-import { Kbd } from '../../components/primitives/Kbd'
-import { ActionBar } from '../../components/containers/ActionBar'
-import { Card } from '../../components/containers/Card'
-
-const entry = getComponentBySlug('action-bar')!
-
-export default function ActionBarPage() {
- return (
-
-
- WITH KEYBOARD SHORTCUTS
-
-
-
- Dashboard
- Processes
- Logs
- Disabled
-
-
-
-
-
- )
-}
diff --git a/src/showcase/pages/AlertPage.tsx b/src/showcase/pages/AlertPage.tsx
deleted file mode 100644
index 0646d2f..0000000
--- a/src/showcase/pages/AlertPage.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { getComponentBySlug } from '../registry'
-import ComponentPage from '../ComponentPage'
-import { Stack } from '../../components/layout/Stack'
-import { Alert } from '../../components/containers/Alert'
-import { Card } from '../../components/containers/Card'
-
-const entry = getComponentBySlug('alert')!
-
-export default function AlertPage() {
- return (
-
-
- VARIANTS
-
-
- Information: System update available.
- Operation completed successfully.
- Warning: Disk usage above 80%.
- Error: Connection to server lost.
-
-
-
-
- )
-}
diff --git a/src/showcase/pages/BadgePage.tsx b/src/showcase/pages/BadgePage.tsx
deleted file mode 100644
index d8257e7..0000000
--- a/src/showcase/pages/BadgePage.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { getComponentBySlug } from '../registry'
-import ComponentPage from '../ComponentPage'
-import { Inline } from '../../components/layout/Inline'
-import { Badge } from '../../components/primitives/Badge'
-import { Card } from '../../components/containers/Card'
-
-const entry = getComponentBySlug('badge')!
-
-export default function BadgePage() {
- return (
-
-
- VARIANTS
-
-
- DEFAULT
- SUCCESS
- WARNING
- ERROR
- INFO
- BRAND
-
-
-
-
- )
-}
diff --git a/src/showcase/pages/ButtonPage.tsx b/src/showcase/pages/ButtonPage.tsx
deleted file mode 100644
index 0efaf60..0000000
--- a/src/showcase/pages/ButtonPage.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import { getComponentBySlug } from '../registry'
-import ComponentPage from '../ComponentPage'
-import { Stack } from '../../components/layout/Stack'
-import { Inline } from '../../components/layout/Inline'
-import { Text } from '../../components/primitives/Text'
-import { Button } from '../../components/primitives/Button'
-import { Card } from '../../components/containers/Card'
-
-const entry = getComponentBySlug('button')!
-
-export default function ButtonPage() {
- return (
-
-
- VARIANTS
-
-
-
-
-
-
-
-
-
-
-
- SIZES
-
-
-
-
- compact
-
-
-
- default
-
-
-
- comfortable
-
-
-
- large
-
-
-
-
-
- )
-}
diff --git a/src/showcase/pages/CardPage.tsx b/src/showcase/pages/CardPage.tsx
deleted file mode 100644
index 08d9093..0000000
--- a/src/showcase/pages/CardPage.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { getComponentBySlug } from '../registry'
-import ComponentPage from '../ComponentPage'
-import { Stack } from '../../components/layout/Stack'
-import { Inline } from '../../components/layout/Inline'
-import { Text } from '../../components/primitives/Text'
-import { Button } from '../../components/primitives/Button'
-import { Badge } from '../../components/primitives/Badge'
-import { Card } from '../../components/containers/Card'
-
-const entry = getComponentBySlug('card')!
-
-export default function CardPage() {
- return (
-
-
-
- SYSTEM STATUS
-
-
- All systems operational.
-
- ONLINE
- Last checked: 00:00:00
-
-
-
-
-
-
-
-
-
- BRAND IDENTITY
-
-
- Algorithmic Warfare
- Terminal-inspired component library
-
-
-
-
-
- )
-}
diff --git a/src/showcase/pages/DividerPage.tsx b/src/showcase/pages/DividerPage.tsx
deleted file mode 100644
index 75c98a2..0000000
--- a/src/showcase/pages/DividerPage.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { getComponentBySlug } from '../registry'
-import ComponentPage from '../ComponentPage'
-import { Stack } from '../../components/layout/Stack'
-import { Text } from '../../components/primitives/Text'
-import { Divider } from '../../components/primitives/Divider'
-import { Card } from '../../components/containers/Card'
-
-const entry = getComponentBySlug('divider')!
-
-export default function DividerPage() {
- return (
-
-
- VARIANTS
-
-
- thin (default)
-
- thick
-
-
-
-
-
- )
-}
diff --git a/src/showcase/pages/DropdownPage.tsx b/src/showcase/pages/DropdownPage.tsx
deleted file mode 100644
index 3472cfd..0000000
--- a/src/showcase/pages/DropdownPage.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { getComponentBySlug } from '../registry'
-import ComponentPage from '../ComponentPage'
-import { Button } from '../../components/primitives/Button'
-import { Dropdown } from '../../components/overlays/Dropdown'
-import { Card } from '../../components/containers/Card'
-
-const entry = getComponentBySlug('dropdown')!
-
-export default function DropdownPage() {
- return (
-
-
- MENU
-
-
-
-
-
-
- {}}>New File
- {}}>Open
-
- {}}>Save
- Delete
-
-
-
-
-
- )
-}
diff --git a/src/showcase/pages/FigletTextPage.tsx b/src/showcase/pages/FigletTextPage.tsx
deleted file mode 100644
index e05dacc..0000000
--- a/src/showcase/pages/FigletTextPage.tsx
+++ /dev/null
@@ -1,126 +0,0 @@
-import { useState } from 'react'
-import { getComponentBySlug } from '../registry'
-import ComponentPage from '../ComponentPage'
-import { FigletText } from '../../components/branding/FigletText'
-import { Card } from '../../components/containers/Card'
-import { Stack } from '../../components/layout/Stack'
-import { Inline } from '../../components/layout/Inline'
-import { Text } from '../../components/primitives/Text'
-import { Button } from '../../components/primitives/Button'
-import { Grid } from '../../components/layout/Grid'
-import type { FigletGradientPreset, FigletDirection, FigletFont } from '../../components/branding/FigletText'
-
-const entry = getComponentBySlug('figlet-text')!
-
-const FONTS: FigletFont[] = ['ansi-shadow', 'bloody', 'calvin-s']
-const GRADIENTS: FigletGradientPreset[] = ['brand', 'fire', 'blood', 'mono', 'ember', 'solar']
-const DIRECTIONS: FigletDirection[] = ['vertical', 'horizontal', 'diagonal']
-
-export default function FigletTextPage() {
- const [font, setFont] = useState('ansi-shadow')
- const [gradient, setGradient] = useState('brand')
- const [direction, setDirection] = useState('vertical')
-
- return (
-
- {/* Interactive demo */}
-
- INTERACTIVE
-
-
-
- FONT
- {FONTS.map(f => (
-
- ))}
-
-
- GRADIENT
- {GRADIENTS.map(g => (
-
- ))}
-
-
- DIR
- {DIRECTIONS.map(d => (
-
- ))}
-
-
-
-
-
-
-
-
- {/* Fonts */}
-
- FONTS
-
-
- {FONTS.map(f => (
-
- {f}
-
-
-
-
- ))}
-
-
-
-
- {/* Gradient presets */}
-
- GRADIENT PRESETS
-
-
- {GRADIENTS.map(g => (
-
-
-
- {g}
-
-
-
-
-
-
- ))}
-
-
-
-
- {/* Full wordmark */}
-
- FULL WORDMARK
-
-
-
-
-
-
-
- )
-}
diff --git a/src/showcase/pages/FramePage.tsx b/src/showcase/pages/FramePage.tsx
deleted file mode 100644
index 1a2662b..0000000
--- a/src/showcase/pages/FramePage.tsx
+++ /dev/null
@@ -1,154 +0,0 @@
-import { getComponentBySlug } from '../registry'
-import ComponentPage from '../ComponentPage'
-import { Frame } from '../../components/containers/Frame'
-import { Card } from '../../components/containers/Card'
-import { Stack } from '../../components/layout/Stack'
-import { Inline } from '../../components/layout/Inline'
-import { Grid } from '../../components/layout/Grid'
-import { Text } from '../../components/primitives/Text'
-import { Badge } from '../../components/primitives/Badge'
-import type { FrameVariant, FrameAccent } from '../../components/containers/Frame'
-
-const entry = getComponentBySlug('frame')!
-
-const VARIANTS: FrameVariant[] = ['grid', 'stack', 'inline']
-const ACCENTS: FrameAccent[] = ['default', 'brand', 'interactive', 'error', 'success', 'warning', 'info']
-
-export default function FramePage() {
- return (
-
- {/* Variants */}
-
- VARIANTS
-
-
- {VARIANTS.map(v => (
-
- {v.toUpperCase()}
-
- ))}
-
-
-
-
- {/* Accents */}
-
- ACCENTS
-
-
- {ACCENTS.map(a => (
-
- {a}
-
- ))}
-
-
-
-
- {/* Titled frames */}
-
- TITLED FRAMES
-
-
-
-
- CPU: 42%
- MEM: 2.1 GB / 8 GB
- UPTIME: 14d 6h 32m
-
-
-
-
-
- 14:32:01 [INFO] Service started on :8080
- 14:32:02 [INFO] Connected to database
- 14:32:03 [OK] Health check passed
-
-
-
-
-
-
- ENV
- production
-
-
- REGION
- us-east-1
-
-
-
-
-
-
-
- {/* Composition with layout */}
-
- COMPOSITION
-
-
- FRAME + STACK
-
-
- Line one
- Line two
- Line three
-
-
-
- FRAME + INLINE
-
-
- ACTIVE
- NODE-01
- NODE-02
- NODE-03
-
-
-
- FRAME + GRID
-
-
-
- REQUESTS
- 1,247
-
-
- LATENCY
- 42ms
-
-
- ERRORS
- 3
-
-
-
-
-
-
-
- {/* Nesting */}
-
- NESTING
-
-
-
-
-
- SECTION A
- Content within an inline frame nested inside a grid frame.
-
-
-
-
- SECTION B
- Content within a stack frame nested inside a grid frame.
-
-
-
-
-
-
-
- )
-}
diff --git a/src/showcase/pages/GridPage.tsx b/src/showcase/pages/GridPage.tsx
deleted file mode 100644
index 27038e5..0000000
--- a/src/showcase/pages/GridPage.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import { getComponentBySlug } from '../registry'
-import ComponentPage from '../ComponentPage'
-import { Stack } from '../../components/layout/Stack'
-import { Grid } from '../../components/layout/Grid'
-import { Text } from '../../components/primitives/Text'
-import { Badge } from '../../components/primitives/Badge'
-import { Card } from '../../components/containers/Card'
-
-const entry = getComponentBySlug('grid')!
-
-export default function GridPage() {
- return (
-
-
- COLUMN COUNTS
-
-
- {[2, 3, 4].map(cols => (
-
- columns={`{${cols}}`}
-
- {Array.from({ length: cols * 2 }, (_, i) => (
- {i + 1}
- ))}
-
-
- ))}
-
-
-
-
- GAP SIZES
-
-
- {(['xs', 'sm', 'md', 'lg'] as const).map(gap => (
-
- gap="{gap}"
-
- A
- B
- C
-
-
- ))}
-
-
-
-
- )
-}
diff --git a/src/showcase/pages/InlinePage.tsx b/src/showcase/pages/InlinePage.tsx
deleted file mode 100644
index cc3ee4b..0000000
--- a/src/showcase/pages/InlinePage.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import { getComponentBySlug } from '../registry'
-import ComponentPage from '../ComponentPage'
-import { Stack } from '../../components/layout/Stack'
-import { Inline } from '../../components/layout/Inline'
-import { Text } from '../../components/primitives/Text'
-import { Badge } from '../../components/primitives/Badge'
-import { Card } from '../../components/containers/Card'
-
-const entry = getComponentBySlug('inline')!
-
-export default function InlinePage() {
- return (
-
-
- GAP SIZES
-
-
- {(['xs', 'sm', 'md', 'lg', 'xl'] as const).map(gap => (
-
- gap="{gap}"
-
- A
- B
- C
-
-
- ))}
-
-
-
-
- ALIGNMENT
-
-
- {(['start', 'center', 'end', 'baseline'] as const).map(align => (
-
- align="{align}"
-
- Small
- Medium
- Large
-
-
- ))}
-
-
-
-
- )
-}
diff --git a/src/showcase/pages/InputPage.tsx b/src/showcase/pages/InputPage.tsx
deleted file mode 100644
index 24595af..0000000
--- a/src/showcase/pages/InputPage.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { getComponentBySlug } from '../registry'
-import ComponentPage from '../ComponentPage'
-import { Stack } from '../../components/layout/Stack'
-import { Input } from '../../components/primitives/Input'
-import { Card } from '../../components/containers/Card'
-
-const entry = getComponentBySlug('input')!
-
-export default function InputPage() {
- return (
-
-
- STATES
-
-
-
-
-
-
-
-
-
- WITH PREFIX
-
-
-
-
-
-
-
-
- )
-}
diff --git a/src/showcase/pages/KbdPage.tsx b/src/showcase/pages/KbdPage.tsx
deleted file mode 100644
index 9b1f03f..0000000
--- a/src/showcase/pages/KbdPage.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { getComponentBySlug } from '../registry'
-import ComponentPage from '../ComponentPage'
-import { Inline } from '../../components/layout/Inline'
-import { Stack } from '../../components/layout/Stack'
-import { Text } from '../../components/primitives/Text'
-import { Kbd } from '../../components/primitives/Kbd'
-import { Card } from '../../components/containers/Card'
-
-const entry = getComponentBySlug('kbd')!
-
-export default function KbdPage() {
- return (
-
-
- KEY COMBINATIONS
-
-
-
-
- ctrl+s
-
-
-
- ctrl+shift+p
-
-
-
- alt+1
-
-
-
- meta
-
-
-
-
-
- )
-}
diff --git a/src/showcase/pages/ListPage.tsx b/src/showcase/pages/ListPage.tsx
deleted file mode 100644
index 020a0da..0000000
--- a/src/showcase/pages/ListPage.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import { getComponentBySlug } from '../registry'
-import ComponentPage from '../ComponentPage'
-import { Inline } from '../../components/layout/Inline'
-import { Stack } from '../../components/layout/Stack'
-import { Text } from '../../components/primitives/Text'
-import { List } from '../../components/containers/List'
-import { Card } from '../../components/containers/Card'
-
-const entry = getComponentBySlug('list')!
-
-export default function ListPage() {
- return (
-
-
- BULLET STYLES
-
-
-
- arrow
-
- Arrow bullet item
- Another item
- Third item
-
-
-
- dash
-
- Dash bullet item
- Another item
-
-
-
- dot
-
- Dot bullet item
- Another item
-
-
-
- none
-
- No bullet item
- Another item
-
-
-
-
-
-
- )
-}
diff --git a/src/showcase/pages/LogoLockupPage.tsx b/src/showcase/pages/LogoLockupPage.tsx
deleted file mode 100644
index 1d08f9a..0000000
--- a/src/showcase/pages/LogoLockupPage.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import { getComponentBySlug } from '../registry'
-import ComponentPage from '../ComponentPage'
-import { LogoLockup } from '../../components/branding/LogoLockup'
-import { Stack } from '../../components/layout/Stack'
-import { Inline } from '../../components/layout/Inline'
-import { Text } from '../../components/primitives/Text'
-import { Card } from '../../components/containers/Card'
-
-const entry = getComponentBySlug('logo-lockup')!
-
-export default function LogoLockupPage() {
- return (
-
-
- HORIZONTAL
-
-
-
-
-
-
-
-
-
- STACKED
-
-
-
-
- md + subtitle
-
-
-
- lg
-
-
-
-
-
- )
-}
diff --git a/src/showcase/pages/LogoPage.tsx b/src/showcase/pages/LogoPage.tsx
deleted file mode 100644
index 50c9533..0000000
--- a/src/showcase/pages/LogoPage.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import { getComponentBySlug } from '../registry'
-import ComponentPage from '../ComponentPage'
-import { Logo } from '../../components/branding/Logo'
-import { Inline } from '../../components/layout/Inline'
-import { Stack } from '../../components/layout/Stack'
-import { Text } from '../../components/primitives/Text'
-import { Card } from '../../components/containers/Card'
-
-const entry = getComponentBySlug('logo')!
-
-export default function LogoPage() {
- return (
-
-
- SIZES
-
-
-
-
- xs
-
-
-
- sm
-
-
-
- md
-
-
-
- lg
-
-
-
- xl
-
-
-
-
-
- VARIANTS
-
-
-
-
- default
-
-
-
- accent
-
-
-
- brand
-
-
-
- mono
-
-
-
-
- inverse
-
-
-
-
-
-
- )
-}
diff --git a/src/showcase/pages/ModalPage.tsx b/src/showcase/pages/ModalPage.tsx
deleted file mode 100644
index 82dc1e6..0000000
--- a/src/showcase/pages/ModalPage.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { useState } from 'react'
-import { getComponentBySlug } from '../registry'
-import ComponentPage from '../ComponentPage'
-import { Stack } from '../../components/layout/Stack'
-import { Inline } from '../../components/layout/Inline'
-import { Text } from '../../components/primitives/Text'
-import { Button } from '../../components/primitives/Button'
-import { Modal } from '../../components/overlays/Modal'
-import { Card } from '../../components/containers/Card'
-
-const entry = getComponentBySlug('modal')!
-
-export default function ModalPage() {
- const [open, setOpen] = useState(false)
-
- return (
-
-
- DIALOG
-
-
-
-
-
-
-
- Are you sure you want to proceed?
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- )
-}
diff --git a/src/showcase/pages/PopoverPage.tsx b/src/showcase/pages/PopoverPage.tsx
deleted file mode 100644
index 30c7eec..0000000
--- a/src/showcase/pages/PopoverPage.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { getComponentBySlug } from '../registry'
-import ComponentPage from '../ComponentPage'
-import { Stack } from '../../components/layout/Stack'
-import { Text } from '../../components/primitives/Text'
-import { Button } from '../../components/primitives/Button'
-import { Popover } from '../../components/overlays/Popover'
-import { Card } from '../../components/containers/Card'
-
-const entry = getComponentBySlug('popover')!
-
-export default function PopoverPage() {
- return (
-
-
- POPOVER
-
-
-
-
-
-
-
- DETAILS
-
- Rich content in a popover overlay.
-
-
-
-
-
-
-
-
-
-
- )
-}
diff --git a/src/showcase/pages/StackPage.tsx b/src/showcase/pages/StackPage.tsx
deleted file mode 100644
index 2d23f0e..0000000
--- a/src/showcase/pages/StackPage.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { getComponentBySlug } from '../registry'
-import ComponentPage from '../ComponentPage'
-import { Stack } from '../../components/layout/Stack'
-import { Inline } from '../../components/layout/Inline'
-import { Text } from '../../components/primitives/Text'
-import { Badge } from '../../components/primitives/Badge'
-import { Card } from '../../components/containers/Card'
-
-const entry = getComponentBySlug('stack')!
-
-export default function StackPage() {
- return (
-
-
- GAP SIZES
-
-
- {(['xs', 'sm', 'md', 'lg', 'xl'] as const).map(gap => (
-
- gap="{gap}"
-
- A
- B
- C
-
-
- ))}
-
-
-
-
- )
-}
diff --git a/src/showcase/pages/TablePage.tsx b/src/showcase/pages/TablePage.tsx
deleted file mode 100644
index 9910f1e..0000000
--- a/src/showcase/pages/TablePage.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import { getComponentBySlug } from '../registry'
-import ComponentPage from '../ComponentPage'
-import { Badge } from '../../components/primitives/Badge'
-import { Table } from '../../components/containers/Table'
-import { Card } from '../../components/containers/Card'
-
-const entry = getComponentBySlug('table')!
-
-export default function TablePage() {
- return (
-
-
- PROCESS TABLE
-
-
-
-
- PID
- PROCESS
- STATUS
- CPU
-
-
-
-
- 1024
- node
- RUNNING
- 12.4%
-
-
- 2048
- postgres
- RUNNING
- 3.1%
-
-
- 3072
- redis
- IDLE
- 0.2%
-
-
-
-
-
-
- )
-}
diff --git a/src/showcase/pages/TextPage.tsx b/src/showcase/pages/TextPage.tsx
deleted file mode 100644
index f8e2923..0000000
--- a/src/showcase/pages/TextPage.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { getComponentBySlug } from '../registry'
-import ComponentPage from '../ComponentPage'
-import { Stack } from '../../components/layout/Stack'
-import { Inline } from '../../components/layout/Inline'
-import { Text } from '../../components/primitives/Text'
-import { Card } from '../../components/containers/Card'
-
-const entry = getComponentBySlug('text')!
-
-export default function TextPage() {
- return (
-
-
- ROLES
-
-
- DISPLAY TEXT
- HEADING TEXT
- SUBHEADING TEXT
- Body text — the default reading size at 14px.
- LABEL TEXT
- Caption text for timestamps and metadata.
-
-
-
-
- COLORS
-
-
- Primary
- Secondary
- Muted
- Brand
- Accent
- Error
- Success
- Warning
- Info
-
-
-
-
- )
-}
diff --git a/src/showcase/pages/TooltipPage.tsx b/src/showcase/pages/TooltipPage.tsx
deleted file mode 100644
index 085d39f..0000000
--- a/src/showcase/pages/TooltipPage.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import { getComponentBySlug } from '../registry'
-import ComponentPage from '../ComponentPage'
-import { Inline } from '../../components/layout/Inline'
-import { Button } from '../../components/primitives/Button'
-import { Tooltip } from '../../components/overlays/Tooltip'
-import { Card } from '../../components/containers/Card'
-
-const entry = getComponentBySlug('tooltip')!
-
-export default function TooltipPage() {
- return (
-
-
- PLACEMENT
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- DEFAULT
-
-
-
-
-
-
-
- )
-}
diff --git a/src/showcase/pages/TreeViewPage.tsx b/src/showcase/pages/TreeViewPage.tsx
deleted file mode 100644
index d1042e2..0000000
--- a/src/showcase/pages/TreeViewPage.tsx
+++ /dev/null
@@ -1,291 +0,0 @@
-import { useState } from 'react'
-import { getComponentBySlug } from '../registry'
-import ComponentPage from '../ComponentPage'
-import { Inline } from '../../components/layout/Inline'
-import { Text } from '../../components/primitives/Text'
-import { Badge } from '../../components/primitives/Badge'
-import { Card } from '../../components/containers/Card'
-import TreeView, { type TreeNode } from '../TreeView'
-
-const entry = getComponentBySlug('tree-view')!
-
-/* ── Data for each demo ── */
-
-const fileTree: TreeNode[] = [
- {
- key: 'src',
- label: 'SRC',
- children: [
- {
- key: 'components',
- label: 'COMPONENTS',
- children: [
- {
- key: 'primitives',
- label: 'PRIMITIVES',
- children: [
- { key: 'button', label: 'Button.tsx' },
- { key: 'text', label: 'Text.tsx' },
- { key: 'input', label: 'Input.tsx' },
- ],
- },
- {
- key: 'containers',
- label: 'CONTAINERS',
- children: [
- { key: 'card', label: 'Card.tsx' },
- { key: 'alert', label: 'Alert.tsx' },
- ],
- },
- {
- key: 'overlays',
- label: 'OVERLAYS',
- children: [
- { key: 'modal', label: 'Modal.tsx' },
- { key: 'dropdown', label: 'Dropdown.tsx' },
- ],
- },
- ],
- },
- {
- key: 'hooks',
- label: 'HOOKS',
- children: [
- { key: 'useTheme', label: 'useTheme.ts' },
- { key: 'useShortcut', label: 'useShortcut.ts' },
- ],
- },
- { key: 'index', label: 'index.ts' },
- { key: 'main', label: 'main.tsx' },
- ],
- },
- {
- key: 'config',
- label: 'CONFIG',
- children: [
- { key: 'tsconfig', label: 'tsconfig.json' },
- { key: 'vite', label: 'vite.config.ts' },
- { key: 'package', label: 'package.json' },
- ],
- },
-]
-
-const orgChart: TreeNode[] = [
- {
- key: 'hq',
- label: 'HEADQUARTERS',
- children: [
- {
- key: 'engineering',
- label: 'ENGINEERING',
- children: [
- {
- key: 'frontend',
- label: 'FRONTEND',
- children: [
- { key: 'alice', label: 'Alice' },
- { key: 'bob', label: 'Bob' },
- ],
- },
- {
- key: 'backend',
- label: 'BACKEND',
- children: [
- { key: 'charlie', label: 'Charlie' },
- ],
- },
- {
- key: 'infra',
- label: 'INFRASTRUCTURE',
- children: [
- { key: 'diana', label: 'Diana' },
- { key: 'eve', label: 'Eve' },
- { key: 'frank', label: 'Frank' },
- ],
- },
- ],
- },
- {
- key: 'design',
- label: 'DESIGN',
- children: [
- { key: 'grace', label: 'Grace' },
- { key: 'hank', label: 'Hank' },
- ],
- },
- ],
- },
-]
-
-const singleLevel: TreeNode[] = [
- {
- key: 'nav',
- label: 'NAVIGATION',
- children: [
- { key: 'home', label: 'Home', href: '#' },
- { key: 'about', label: 'About', href: '#' },
- { key: 'contact', label: 'Contact', href: '#' },
- ],
- },
-]
-
-const collapsedNodes: TreeNode[] = [
- {
- key: 'open',
- label: 'EXPANDED GROUP',
- children: [
- { key: 'a', label: 'Item A' },
- { key: 'b', label: 'Item B' },
- ],
- },
- {
- key: 'closed',
- label: 'COLLAPSED GROUP',
- children: [
- { key: 'c', label: 'Item C' },
- { key: 'd', label: 'Item D' },
- ],
- },
- {
- key: 'also-closed',
- label: 'ALSO COLLAPSED',
- children: [
- { key: 'e', label: 'Item E' },
- ],
- },
-]
-
-const statusMap: Record = {
- api: { variant: 'success', status: 'ONLINE' },
- db: { variant: 'success', status: 'ONLINE' },
- cache: { variant: 'warning', status: 'DEGRADED' },
- queue: { variant: 'error', status: 'DOWN' },
- cdn: { variant: 'success', status: 'ONLINE' },
- logs: { variant: 'info', status: 'DRAINING' },
-}
-
-const statusTree: TreeNode[] = [
- {
- key: 'services',
- label: 'SERVICES',
- children: Object.keys(statusMap).map(k => ({
- key: k,
- label: k.toUpperCase(),
- })),
- },
-]
-
-export default function TreeViewPage() {
- const [activeFile, setActiveFile] = useState('button')
- const [activeService, setActiveService] = useState('cache')
-
- return (
-
- {/* Deep nesting */}
-
- NESTED FILE EXPLORER
-
-
- Deeply nested tree — branches inside branches, mixing folders and files at any level.
-
-
- (
- setActiveFile(node.key)}
- style={{
- cursor: 'pointer',
- color: active ? 'var(--aw-sys-color-text-accent)' : 'var(--aw-sys-color-text-primary)',
- borderBottom: active ? '1px solid var(--aw-sys-color-text-accent)' : '1px solid transparent',
- }}
- >
- {node.label}
-
- )}
- />
-
-
-
-
- {/* Org chart — 3 levels deep */}
-
- ORG CHART — 4 LEVELS DEEP
-
-
- Recursive nesting with multiple sibling branches at each level.
-
-
-
-
-
-
-
-
- {/* Flat / single group */}
-
- SINGLE GROUP (FLAT)
-
-
- One level of nesting — still works as a simple nav.
-
-
-
-
-
-
-
- {/* Default collapsed */}
-
- DEFAULT COLLAPSED
-
-
- Groups can start collapsed via defaultCollapsed.
-
-
-
-
-
-
-
-
- {/* Custom renderItem */}
-
- CUSTOM RENDER — STATUS DASHBOARD
-
-
- Using renderItem to add badges and custom click behavior.
-
-
- {
- const info = statusMap[node.key]
- return (
- setActiveService(node.key)}
- style={{
- cursor: 'pointer',
- display: 'inline-flex',
- alignItems: 'center',
- gap: 8,
- color: active ? 'var(--aw-sys-color-text-accent)' : 'var(--aw-sys-color-text-primary)',
- }}
- >
- {node.label}
- {info && {info.status}}
-
- )
- }}
- />
-
-
-
-
- )
-}
diff --git a/src/showcase/pages/WordmarkPage.tsx b/src/showcase/pages/WordmarkPage.tsx
deleted file mode 100644
index 562652c..0000000
--- a/src/showcase/pages/WordmarkPage.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { getComponentBySlug } from '../registry'
-import ComponentPage from '../ComponentPage'
-import { Wordmark } from '../../components/branding/Wordmark'
-import { Stack } from '../../components/layout/Stack'
-import { Inline } from '../../components/layout/Inline'
-import { Text } from '../../components/primitives/Text'
-import { Card } from '../../components/containers/Card'
-
-const entry = getComponentBySlug('wordmark')!
-
-export default function WordmarkPage() {
- return (
-
-
- SIZES
-
-
-
-
- xs
-
-
-
- sm
-
-
-
- md
-
-
-
- lg
-
-
-
-
-
- WITH SUBTITLE
-
-
-
-
-
- )
-}
diff --git a/src/showcase/pages/index.ts b/src/showcase/pages/index.ts
deleted file mode 100644
index bf719fb..0000000
--- a/src/showcase/pages/index.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-import { ComponentType } from 'react'
-
-import LogoPage from './LogoPage'
-import WordmarkPage from './WordmarkPage'
-import LogoLockupPage from './LogoLockupPage'
-import FigletTextPage from './FigletTextPage'
-import StackPage from './StackPage'
-import InlinePage from './InlinePage'
-import GridPage from './GridPage'
-import TextPage from './TextPage'
-import ButtonPage from './ButtonPage'
-import InputPage from './InputPage'
-import BadgePage from './BadgePage'
-import DividerPage from './DividerPage'
-import KbdPage from './KbdPage'
-import CardPage from './CardPage'
-import FramePage from './FramePage'
-import AlertPage from './AlertPage'
-import TablePage from './TablePage'
-import ActionBarPage from './ActionBarPage'
-import ListPage from './ListPage'
-import ModalPage from './ModalPage'
-import DropdownPage from './DropdownPage'
-import TooltipPage from './TooltipPage'
-import PopoverPage from './PopoverPage'
-import TreeViewPage from './TreeViewPage'
-
-export const pages: Record = {
- 'logo': LogoPage,
- 'wordmark': WordmarkPage,
- 'logo-lockup': LogoLockupPage,
- 'figlet-text': FigletTextPage,
- 'stack': StackPage,
- 'inline': InlinePage,
- 'grid': GridPage,
- 'text': TextPage,
- 'button': ButtonPage,
- 'input': InputPage,
- 'badge': BadgePage,
- 'divider': DividerPage,
- 'kbd': KbdPage,
- 'card': CardPage,
- 'frame': FramePage,
- 'alert': AlertPage,
- 'table': TablePage,
- 'action-bar': ActionBarPage,
- 'list': ListPage,
- 'modal': ModalPage,
- 'dropdown': DropdownPage,
- 'tooltip': TooltipPage,
- 'popover': PopoverPage,
- 'tree-view': TreeViewPage,
-}
diff --git a/src/showcase/registry.ts b/src/showcase/registry.ts
deleted file mode 100644
index ca6e34a..0000000
--- a/src/showcase/registry.ts
+++ /dev/null
@@ -1,512 +0,0 @@
-export interface PropInfo {
- name: string
- type: string
- default?: string
- description: string
-}
-
-export interface SubcomponentInfo {
- name: string
- props: PropInfo[]
-}
-
-export interface ComponentEntry {
- slug: string
- name: string
- category: string
- description: string
- props: PropInfo[]
- subcomponents?: SubcomponentInfo[]
- usage: string
-}
-
-export interface Category {
- name: string
- slug: string
-}
-
-export const categories: Category[] = [
- { name: 'BRANDING', slug: 'branding' },
- { name: 'LAYOUT', slug: 'layout' },
- { name: 'PRIMITIVES', slug: 'primitives' },
- { name: 'CONTAINERS', slug: 'containers' },
- { name: 'OVERLAYS', slug: 'overlays' },
- { name: 'NAVIGATION', slug: 'navigation' },
-]
-
-export const registry: ComponentEntry[] = [
- // ── Branding ──
- {
- slug: 'logo',
- name: 'Logo',
- category: 'branding',
- description: 'SVG logo mark with size and color variants.',
- props: [
- { name: 'size', type: "'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'", default: "'md'", description: 'Logo dimensions' },
- { name: 'variant', type: "'default' | 'brand' | 'accent' | 'mono' | 'inverse'", default: "'default'", description: 'Color scheme' },
- ],
- usage: ``,
- },
- {
- slug: 'wordmark',
- name: 'Wordmark',
- category: 'branding',
- description: 'Text-based brand name with optional subtitle.',
- props: [
- { name: 'size', type: "'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'", default: "'md'", description: 'Wordmark scale' },
- { name: 'subtitle', type: 'boolean', default: 'false', description: 'Show subtitle text' },
- ],
- usage: ``,
- },
- {
- slug: 'logo-lockup',
- name: 'LogoLockup',
- category: 'branding',
- description: 'Combined logo and wordmark with layout options.',
- props: [
- { name: 'orientation', type: "'horizontal' | 'stacked'", default: "'horizontal'", description: 'Layout direction' },
- { name: 'size', type: "'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'", default: "'md'", description: 'Overall scale' },
- { name: 'variant', type: "'default' | 'brand' | 'accent' | 'mono' | 'inverse'", default: "'default'", description: 'Color scheme' },
- { name: 'subtitle', type: 'boolean', default: 'false', description: 'Show subtitle text' },
- ],
- usage: ``,
- },
- {
- slug: 'figlet-text',
- name: 'FigletText',
- category: 'branding',
- description: 'ASCII art text with per-character gradient coloring. Built-in AWAR figlet fonts and gradient presets.',
- props: [
- { name: 'lines', type: 'string[]', description: 'Pre-rendered ASCII art lines. Overrides built-in font when provided.' },
- { name: 'font', type: "'ansi-shadow' | 'bloody' | 'calvin-s'", default: "'ansi-shadow'", description: 'Built-in AWAR figlet font' },
- { name: 'fullWordmark', type: 'boolean', default: 'false', description: 'Show full "ALGORITHMIC WARFARE" wordmark' },
- { name: 'gradient', type: "'brand' | 'fire' | 'blood' | 'mono' | 'ember' | 'solar' | { from, to }", default: "'brand'", description: 'Gradient preset or custom hex pair' },
- { name: 'direction', type: "'vertical' | 'horizontal' | 'diagonal'", default: "'vertical'", description: 'Gradient direction' },
- { name: 'fontSize', type: 'number', description: 'Font size override in pixels' },
- ],
- usage: `
-
-
-
-`,
- },
-
- // ── Layout ──
- {
- slug: 'stack',
- name: 'Stack',
- category: 'layout',
- description: 'Vertical flex layout with consistent gap spacing.',
- props: [
- { name: 'gap', type: "'xs' | 'sm' | 'md' | 'lg' | 'xl'", default: "'md'", description: 'Space between children' },
- { name: 'as', type: 'ElementType', default: "'div'", description: 'Rendered HTML element' },
- ],
- usage: `
- First
- Second
-`,
- },
- {
- slug: 'inline',
- name: 'Inline',
- category: 'layout',
- description: 'Horizontal flex layout with alignment and wrapping.',
- props: [
- { name: 'gap', type: "'xs' | 'sm' | 'md' | 'lg' | 'xl'", default: "'md'", description: 'Space between children' },
- { name: 'wrap', type: 'boolean', default: 'false', description: 'Allow wrapping to next line' },
- { name: 'align', type: "'start' | 'center' | 'end' | 'baseline'", default: "'start'", description: 'Cross-axis alignment' },
- { name: 'as', type: 'ElementType', default: "'div'", description: 'Rendered HTML element' },
- ],
- usage: `
-
-
-`,
- },
- {
- slug: 'grid',
- name: 'Grid',
- category: 'layout',
- description: 'CSS grid layout with column and gap control.',
- props: [
- { name: 'columns', type: 'number | string', default: '3', description: 'Number of columns or CSS grid-template-columns value' },
- { name: 'gap', type: "'xs' | 'sm' | 'md' | 'lg' | 'xl'", default: "'md'", description: 'Space between grid items' },
- { name: 'as', type: 'ElementType', default: "'div'", description: 'Rendered HTML element' },
- ],
- usage: `
- A
- B
- C
-`,
- },
-
- // ── Primitives ──
- {
- slug: 'text',
- name: 'Text',
- category: 'primitives',
- description: 'Semantic typography with role-based sizing and color options.',
- props: [
- { name: 'role', type: "'display' | 'heading' | 'subheading' | 'body' | 'label' | 'caption'", default: "'body'", description: 'Typographic role controlling size and weight' },
- { name: 'color', type: "'primary' | 'secondary' | 'muted' | 'inverse' | 'brand' | 'accent' | 'error' | 'success' | 'warning' | 'info'", default: "'primary'", description: 'Text color' },
- { name: 'as', type: 'ElementType', default: 'auto', description: 'Override rendered HTML element' },
- ],
- usage: `Title`,
- },
- {
- slug: 'button',
- name: 'Button',
- category: 'primitives',
- description: 'Action trigger with variant styles and size options.',
- props: [
- { name: 'variant', type: "'primary' | 'secondary' | 'danger' | 'ghost'", default: "'primary'", description: 'Visual style' },
- { name: 'size', type: "'compact' | 'default' | 'comfortable' | 'large'", default: "'default'", description: 'Button dimensions' },
- { name: 'disabled', type: 'boolean', default: 'false', description: 'Disable interaction' },
- ],
- usage: ``,
- },
- {
- slug: 'input',
- name: 'Input',
- category: 'primitives',
- description: 'Form text input with label and error display.',
- props: [
- { name: 'label', type: 'string', description: 'Label text above the input' },
- { name: 'error', type: 'string', description: 'Error message below the input' },
- { name: 'prefix', type: 'string', description: 'Prefix text inside the input' },
- ],
- usage: ``,
- },
- {
- slug: 'badge',
- name: 'Badge',
- category: 'primitives',
- description: 'Status indicator label with semantic color variants.',
- props: [
- { name: 'variant', type: "'default' | 'success' | 'warning' | 'error' | 'info' | 'brand'", default: "'default'", description: 'Color scheme' },
- ],
- usage: `ACTIVE`,
- },
- {
- slug: 'divider',
- name: 'Divider',
- category: 'primitives',
- description: 'Visual separator line between content sections.',
- props: [
- { name: 'variant', type: "'thin' | 'thick'", default: "'thin'", description: 'Line thickness' },
- ],
- usage: ``,
- },
- {
- slug: 'kbd',
- name: 'Kbd',
- category: 'primitives',
- description: 'Keyboard shortcut display with platform-aware symbols.',
- props: [
- { name: 'combo', type: 'string', description: "Key combination string (e.g. 'ctrl+s')" },
- { name: 'platform', type: "'mac' | 'win' | 'auto'", default: "'auto'", description: 'Platform for symbol rendering' },
- ],
- usage: ``,
- },
-
- // ── Containers ──
- {
- slug: 'card',
- name: 'Card',
- category: 'containers',
- description: 'Content container with optional header and footer sections.',
- props: [
- { name: 'variant', type: "'default' | 'filled'", default: "'default'", description: 'Card background style' },
- ],
- subcomponents: [
- { name: 'Card.Header', props: [{ name: 'children', type: 'ReactNode', description: 'Header content' }] },
- { name: 'Card.Body', props: [{ name: 'children', type: 'ReactNode', description: 'Body content' }] },
- { name: 'Card.Footer', props: [{ name: 'children', type: 'ReactNode', description: 'Footer content' }] },
- ],
- usage: `
- TITLE
- Content here
-
-
-
-`,
- },
- {
- slug: 'frame',
- name: 'Frame',
- category: 'containers',
- description: 'Decorative boundary container with variant border patterns tied to layout direction.',
- props: [
- { name: 'variant', type: "'grid' | 'stack' | 'inline'", default: "'grid'", description: 'Border pattern: grid (full box), stack (top + bottom rails), inline (left + right rails)' },
- { name: 'accent', type: "'default' | 'brand' | 'interactive' | 'error' | 'success' | 'warning' | 'info'", default: "'default'", description: 'Border accent color' },
- { name: 'title', type: 'string', description: 'Legend-style title on the top border' },
- { name: 'label', type: 'string', description: 'Right-aligned annotation on the top border' },
- ],
- usage: `
- Content inside a full-box frame
-
-
-
-
- Horizontal rails
-
-
-
-
-
- A
- B
-
-`,
- },
- {
- slug: 'alert',
- name: 'Alert',
- category: 'containers',
- description: 'Contextual feedback message with semantic variants.',
- props: [
- { name: 'variant', type: "'error' | 'warning' | 'success' | 'info'", default: "'info'", description: 'Alert type and color' },
- ],
- usage: `Operation completed.`,
- },
- {
- slug: 'table',
- name: 'Table',
- category: 'containers',
- description: 'Data table with header, body, and cell components.',
- props: [],
- subcomponents: [
- { name: 'Table.Head', props: [{ name: 'children', type: 'ReactNode', description: 'Header rows' }] },
- { name: 'Table.Body', props: [{ name: 'children', type: 'ReactNode', description: 'Body rows' }] },
- { name: 'Table.Row', props: [{ name: 'children', type: 'ReactNode', description: 'Row cells' }] },
- { name: 'Table.Cell', props: [
- { name: 'header', type: 'boolean', default: 'false', description: 'Render as header cell (th)' },
- { name: 'children', type: 'ReactNode', description: 'Cell content' },
- ]},
- ],
- usage: `
-
-
- NAME
- VALUE
-
-
-
-
- Alpha
- 100
-
-
- `,
- },
- {
- slug: 'action-bar',
- name: 'ActionBar',
- category: 'containers',
- description: 'Horizontal bar of action items with keyboard shortcut support.',
- props: [],
- subcomponents: [
- { name: 'ActionBar.Item', props: [
- { name: 'disabled', type: 'boolean', default: 'false', description: 'Disable the action' },
- { name: 'children', type: 'ReactNode', description: 'Item content (text, Kbd, etc.)' },
- ]},
- ],
- usage: `
-
- Dashboard
-
-
- Settings
-
-`,
- },
- {
- slug: 'list',
- name: 'List',
- category: 'containers',
- description: 'Bullet list with configurable marker styles.',
- props: [
- { name: 'bullet', type: "'none' | 'dash' | 'arrow' | 'dot'", default: "'arrow'", description: 'Bullet character style' },
- ],
- subcomponents: [
- { name: 'List.Item', props: [{ name: 'children', type: 'ReactNode', description: 'Item content' }] },
- ],
- usage: `
- First item
- Second item
- `,
- },
-
- // ── Overlays ──
- {
- slug: 'modal',
- name: 'Modal',
- category: 'overlays',
- description: 'Dialog overlay with trigger, content, and close controls.',
- props: [
- { name: 'open', type: 'boolean', description: 'Controlled open state' },
- { name: 'onOpenChange', type: '(open: boolean) => void', description: 'Callback when open state changes' },
- ],
- subcomponents: [
- { name: 'Modal.Trigger', props: [
- { name: 'children', type: 'ReactNode', description: 'Trigger element' },
- { name: 'asChild', type: 'boolean', default: 'false', description: 'Merge props onto child element' },
- ]},
- { name: 'Modal.Content', props: [
- { name: 'title', type: 'string', description: 'Dialog title' },
- { name: 'description', type: 'string', description: 'Dialog description' },
- { name: 'children', type: 'ReactNode', description: 'Dialog body content' },
- ]},
- { name: 'Modal.Close', props: [
- { name: 'children', type: 'ReactNode', description: 'Close trigger element' },
- { name: 'asChild', type: 'boolean', default: 'false', description: 'Merge props onto child element' },
- ]},
- ],
- usage: `
-
-
-
-
- Are you sure?
-
-
-
-
-`,
- },
- {
- slug: 'dropdown',
- name: 'Dropdown',
- category: 'overlays',
- description: 'Menu overlay triggered by a button with selectable items.',
- props: [],
- subcomponents: [
- { name: 'Dropdown.Trigger', props: [
- { name: 'children', type: 'ReactNode', description: 'Trigger element' },
- { name: 'asChild', type: 'boolean', default: 'false', description: 'Merge props onto child element' },
- ]},
- { name: 'Dropdown.Content', props: [
- { name: 'align', type: "'start' | 'center' | 'end'", default: "'start'", description: 'Horizontal alignment' },
- { name: 'sideOffset', type: 'number', default: '4', description: 'Gap from trigger in px' },
- ]},
- { name: 'Dropdown.Item', props: [
- { name: 'onSelect', type: '() => void', description: 'Selection callback' },
- { name: 'disabled', type: 'boolean', default: 'false', description: 'Disable the item' },
- ]},
- { name: 'Dropdown.Separator', props: [] },
- ],
- usage: `
-
-
-
-
- {}}>Option A
-
- {}}>Option B
-
-`,
- },
- {
- slug: 'tooltip',
- name: 'Tooltip',
- category: 'overlays',
- description: 'Hover-activated overlay showing brief helper text.',
- props: [
- { name: 'content', type: 'ReactNode', description: 'Tooltip text or content' },
- { name: 'side', type: "'top' | 'right' | 'bottom' | 'left'", default: "'top'", description: 'Preferred placement' },
- { name: 'sideOffset', type: 'number', default: '4', description: 'Gap from trigger in px' },
- { name: 'delayDuration', type: 'number', default: '200', description: 'Hover delay in ms' },
- ],
- usage: `
-
-`,
- },
- {
- slug: 'popover',
- name: 'Popover',
- category: 'overlays',
- description: 'Click-activated overlay for rich content display.',
- props: [
- { name: 'open', type: 'boolean', description: 'Controlled open state' },
- { name: 'onOpenChange', type: '(open: boolean) => void', description: 'Callback when open state changes' },
- ],
- subcomponents: [
- { name: 'Popover.Trigger', props: [
- { name: 'children', type: 'ReactNode', description: 'Trigger element' },
- { name: 'asChild', type: 'boolean', default: 'false', description: 'Merge props onto child element' },
- ]},
- { name: 'Popover.Content', props: [
- { name: 'align', type: "'start' | 'center' | 'end'", default: "'center'", description: 'Horizontal alignment' },
- { name: 'side', type: "'top' | 'right' | 'bottom' | 'left'", default: "'bottom'", description: 'Preferred placement' },
- { name: 'sideOffset', type: 'number', default: '4', description: 'Gap from trigger in px' },
- ]},
- { name: 'Popover.Close', props: [
- { name: 'children', type: 'ReactNode', description: 'Close trigger element' },
- { name: 'asChild', type: 'boolean', default: 'false', description: 'Merge props onto child element' },
- ]},
- ],
- usage: `
-
-
-
-
- Popover content here
-
-
-
-
-`,
- },
-
- // ── Navigation ──
- {
- slug: 'tree-view',
- name: 'TreeView',
- category: 'navigation',
- description: 'Recursive collapsible tree with CSS-drawn connectors for hierarchical navigation.',
- props: [
- { name: 'nodes', type: 'TreeNode[]', description: 'Array of top-level nodes (each may contain nested children)' },
- { name: 'activeKey', type: 'string', description: 'Key of the currently active leaf item (highlighted)' },
- { name: 'defaultCollapsed', type: 'Record', default: '{}', description: 'Initial collapsed state keyed by node key' },
- { name: 'renderItem', type: '(node: TreeNode, active: boolean) => ReactNode', description: 'Custom render function for leaf nodes' },
- ],
- subcomponents: [
- { name: 'TreeNode', props: [
- { name: 'key', type: 'string', description: 'Unique identifier' },
- { name: 'label', type: 'string', description: 'Display text' },
- { name: 'href', type: 'string', description: 'Optional link URL (leaf nodes)' },
- { name: 'children', type: 'TreeNode[]', description: 'Nested children — presence makes the node a collapsible branch' },
- ]},
- ],
- usage: ``,
- },
-]
-
-export function getComponentsByCategory(categorySlug: string): ComponentEntry[] {
- return registry.filter(c => c.category === categorySlug)
-}
-
-export function getComponentBySlug(slug: string): ComponentEntry | undefined {
- return registry.find(c => c.slug === slug)
-}
diff --git a/src/styles/globals.css b/src/styles/globals.css
new file mode 100644
index 0000000..6afd22c
--- /dev/null
+++ b/src/styles/globals.css
@@ -0,0 +1,228 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+/*
+ * AWAR Design System — Theme Layer
+ *
+ * Terminal-inspired, monospace-only, zero border-radius, no shadows.
+ * Colors: #773333 (maroon) × #FF9944 (amber) × warm neutrals.
+ *
+ * shadcn CSS variable slots mapped to AWAR palette.
+ * All colors in oklch for perceptual uniformity.
+ */
+
+@theme inline {
+ /* ── Color mappings ── */
+ --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-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-destructive: var(--destructive);
+ --color-destructive-foreground: var(--destructive-foreground);
+ --color-border: var(--border);
+ --color-input: var(--input);
+ --color-ring: var(--ring);
+ --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: var(--sidebar);
+ --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);
+
+ /* ── Radius: zero everywhere ── */
+ --radius-xs: 0px;
+ --radius-sm: 0px;
+ --radius-md: 0px;
+ --radius-lg: 0px;
+ --radius-xl: 0px;
+ --radius-2xl: 0px;
+ --radius-3xl: 0px;
+ --radius-4xl: 0px;
+ --radius-full: 0px;
+
+ /* ── Font: monospace only ── */
+ --font-sans: "JetBrains Mono", "Fira Code", "IBM Plex Mono", "Cascadia Code",
+ "Source Code Pro", ui-monospace, monospace;
+ --font-mono: "JetBrains Mono", "Fira Code", "IBM Plex Mono", "Cascadia Code",
+ "Source Code Pro", ui-monospace, monospace;
+}
+
+/*
+ * ── Dark mode (default / primary) ──
+ *
+ * AWAR palette:
+ * Maroon-500: #773333 Amber-500: #FF9944
+ * Warm neutrals tinted toward red-brown (~10° hue)
+ */
+:root {
+ --radius: 0px;
+
+ /* Surfaces — tone-based elevation, no shadows */
+ --background: #0D0B0A; /* neutral-950 */
+ --foreground: #F0EBE8; /* neutral-100 */
+ --card: #171312; /* neutral-900 */
+ --card-foreground: #F0EBE8; /* neutral-100 */
+ --popover: #3A3230; /* neutral-700 */
+ --popover-foreground: #F0EBE8; /* neutral-100 */
+
+ /* Primary = amber (interactive) */
+ --primary: #FF9944; /* amber-500 */
+ --primary-foreground: #0D0B0A; /* neutral-950 */
+
+ /* Secondary = raised surface */
+ --secondary: #252020; /* neutral-800 */
+ --secondary-foreground: #F0EBE8; /* neutral-100 */
+
+ /* Muted */
+ --muted: #252020; /* neutral-800 */
+ --muted-foreground: #736661; /* neutral-500 */
+
+ /* Accent = brand maroon */
+ --accent: #773333; /* maroon-500 */
+ --accent-foreground: #F0EBE8; /* neutral-100 */
+
+ /* Destructive */
+ --destructive: #CC3333; /* red-500 */
+ --destructive-foreground: #F0EBE8;
+
+ /* Borders */
+ --border: #3A3230; /* neutral-700 */
+ --input: #3A3230; /* neutral-700 */
+ --ring: #FF9944; /* amber-500 */
+
+ /* Charts — AWAR palette spread */
+ --chart-1: #FF9944; /* amber-500 */
+ --chart-2: #773333; /* maroon-500 */
+ --chart-3: #33AA55; /* green-500 */
+ --chart-4: #4488BB; /* blue-500 */
+ --chart-5: #CCAA00; /* yellow-500 */
+
+ /* Sidebar */
+ --sidebar: #171312; /* neutral-900 */
+ --sidebar-foreground: #F0EBE8; /* neutral-100 */
+ --sidebar-primary: #FF9944; /* amber-500 */
+ --sidebar-primary-foreground: #0D0B0A;
+ --sidebar-accent: #252020; /* neutral-800 */
+ --sidebar-accent-foreground: #F0EBE8;
+ --sidebar-border: #3A3230; /* neutral-700 */
+ --sidebar-ring: #FF9944; /* amber-500 */
+}
+
+/*
+ * ── Light mode ──
+ */
+.light {
+ --background: #FAF7F5; /* neutral-50 */
+ --foreground: #171312; /* neutral-900 */
+ --card: #FFFFFF; /* neutral-0 */
+ --card-foreground: #171312; /* neutral-900 */
+ --popover: #DBD4D0; /* neutral-200 */
+ --popover-foreground: #171312; /* neutral-900 */
+
+ --primary: #B85E10; /* amber-700 */
+ --primary-foreground: #FAF7F5; /* neutral-50 */
+
+ --secondary: #F0EBE8; /* neutral-100 */
+ --secondary-foreground: #171312; /* neutral-900 */
+
+ --muted: #F0EBE8; /* neutral-100 */
+ --muted-foreground: #736661; /* neutral-500 */
+
+ --accent: #773333; /* maroon-500 */
+ --accent-foreground: #FFFFFF; /* neutral-0 */
+
+ --destructive: #CC3333; /* red-500 */
+ --destructive-foreground: #FFFFFF;
+
+ --border: #DBD4D0; /* neutral-200 */
+ --input: #DBD4D0; /* neutral-200 */
+ --ring: #B85E10; /* amber-700 */
+
+ --chart-1: #B85E10; /* amber-700 */
+ --chart-2: #773333; /* maroon-500 */
+ --chart-3: #33AA55; /* green-500 */
+ --chart-4: #4488BB; /* blue-500 */
+ --chart-5: #CCAA00; /* yellow-500 */
+
+ --sidebar: #FFFFFF;
+ --sidebar-foreground: #171312;
+ --sidebar-primary: #B85E10;
+ --sidebar-primary-foreground: #FFFFFF;
+ --sidebar-accent: #F0EBE8;
+ --sidebar-accent-foreground: #171312;
+ --sidebar-border: #DBD4D0;
+ --sidebar-ring: #B85E10;
+}
+
+/* ── Base layer ── */
+@layer base {
+ * {
+ @apply border-border outline-ring/50;
+ }
+
+ body {
+ @apply bg-background text-foreground;
+ font-family: "JetBrains Mono", "Fira Code", "IBM Plex Mono", "Cascadia Code",
+ "Source Code Pro", ui-monospace, monospace;
+ font-size: 14px;
+ line-height: 20px;
+ }
+
+ /* ── Scrollbar styling ── */
+ ::-webkit-scrollbar {
+ width: 1ch;
+ height: 1ch;
+ }
+
+ ::-webkit-scrollbar-track {
+ background: var(--background);
+ border-left: 1px solid var(--border);
+ }
+
+ ::-webkit-scrollbar-thumb {
+ background: var(--primary);
+ }
+
+ ::-webkit-scrollbar-thumb:hover {
+ background: var(--ring);
+ }
+
+ ::-webkit-scrollbar-corner {
+ background: var(--background);
+ }
+
+ /* Firefox scrollbar fallback */
+ @supports not selector(::-webkit-scrollbar) {
+ * {
+ scrollbar-width: thin;
+ scrollbar-color: var(--primary) var(--background);
+ }
+ }
+
+ /* ── Strip all shadows and border-radius globally ── */
+ *,
+ *::before,
+ *::after {
+ box-shadow: none !important;
+ border-radius: 0 !important;
+ }
+}
diff --git a/src/tokens/generate-css.ts b/src/tokens/generate-css.ts
deleted file mode 100644
index 7c251d1..0000000
--- a/src/tokens/generate-css.ts
+++ /dev/null
@@ -1,110 +0,0 @@
-import { writeFileSync } from 'fs'
-import { resolve, dirname } from 'path'
-import { fileURLToPath } from 'url'
-import { primitives } from './primitives.js'
-import { semanticsShared, semanticsDark, semanticsLight } from './semantics.js'
-
-const __filename = fileURLToPath(import.meta.url)
-const __dirname = dirname(__filename)
-
-type TokenObj = Record
-
-function flatten(obj: TokenObj, prefix: string): [string, string][] {
- const entries: [string, string][] = []
- for (const [key, value] of Object.entries(obj)) {
- const propName = key === 'DEFAULT' ? prefix : `${prefix}-${key}`
- if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
- entries.push(...flatten(value as TokenObj, propName))
- } else {
- entries.push([propName, String(value)])
- }
- }
- return entries
-}
-
-function toBlock(selector: string, entries: [string, string][]): string {
- const props = entries.map(([k, v]) => ` ${k}: ${v};`).join('\n')
- return `${selector} {\n${props}\n}`
-}
-
-const primitiveEntries = flatten(primitives as unknown as TokenObj, '--aw-ref')
-const sharedEntries = flatten(semanticsShared as unknown as TokenObj, '--aw-sys')
-const darkEntries = flatten(semanticsDark as unknown as TokenObj, '--aw-sys')
-const lightEntries = flatten(semanticsLight as unknown as TokenObj, '--aw-sys')
-
-const rootEntries = [...primitiveEntries, ...sharedEntries]
-
-const css = `/* AWAR Design System — Generated Token CSS */
-/* Do not edit manually. Run: npm run generate:tokens */
-
-${toBlock(':root', rootEntries)}
-
-${toBlock('[data-mode="dark"]', darkEntries)}
-
-${toBlock('[data-mode="light"]', lightEntries)}
-
-/* ── Global Reset ── */
-*,
-*::before,
-*::after {
- box-sizing: border-box;
- margin: 0;
- padding: 0;
-}
-
-html {
- border-radius: 0;
-}
-
-body {
- font-family: var(--aw-ref-font-mono);
- font-size: var(--aw-ref-font-size-md);
- line-height: var(--aw-ref-line-height-md);
- background-color: var(--aw-sys-color-bg-root);
- color: var(--aw-sys-color-text-primary);
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
-}
-
-/* ── Selection ── */
-::selection {
- background-color: var(--aw-sys-color-selection-bg);
-}
-
-/* ── Scrollbar ── */
-* {
- &::-webkit-scrollbar {
- background: var(--aw-sys-color-bg-surface);
- width: 1ch;
- height: 1ch;
- }
-
- &::-webkit-scrollbar-track {
- background: var(--aw-sys-color-bg-surface);
- border-inline-start: 1px solid var(--aw-sys-color-border-default);
- }
-
- &::-webkit-scrollbar-thumb {
- background: var(--aw-sys-color-interactive);
- }
-
- &::-webkit-scrollbar-thumb:hover {
- background: var(--aw-sys-color-interactive-hover);
- }
-
- &::-webkit-scrollbar-corner {
- background: var(--aw-sys-color-bg-surface);
- }
-}
-
-@supports not selector(::-webkit-scrollbar) {
- * {
- scrollbar-width: thin;
- scrollbar-color: var(--aw-sys-color-interactive) var(--aw-sys-color-bg-surface);
- }
-}
-`
-
-const outPath = resolve(__dirname, 'tokens.css')
-writeFileSync(outPath, css, 'utf-8')
-console.log(`✓ Generated ${outPath} (${primitiveEntries.length} primitives, ${sharedEntries.length} shared, ${darkEntries.length} dark, ${lightEntries.length} light)`)
diff --git a/src/tokens/primitives.ts b/src/tokens/primitives.ts
deleted file mode 100644
index 772d1c5..0000000
--- a/src/tokens/primitives.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-export const primitives = {
- color: {
- maroon: {
- 100: '#F2E0E0',
- 200: '#D4A3A3',
- 300: '#B06666',
- 400: '#994444',
- 500: '#773333',
- 600: '#5C2828',
- 700: '#421D1D',
- 800: '#2E1414',
- 900: '#1A0C0C',
- },
- amber: {
- 100: '#FFF0D9',
- 200: '#FFDCA3',
- 300: '#FFC06D',
- 400: '#FFB055',
- 500: '#FF9944',
- 600: '#E07A20',
- 700: '#B85E10',
- 800: '#8A4508',
- 900: '#5C2D00',
- },
- neutral: {
- 0: '#FFFFFF',
- 50: '#FAF7F5',
- 100: '#F0EBE8',
- 200: '#DBD4D0',
- 300: '#B8AEAA',
- 400: '#958A85',
- 500: '#736661',
- 600: '#524846',
- 700: '#3A3230',
- 800: '#252020',
- 900: '#171312',
- 950: '#0D0B0A',
- 1000: '#000000',
- },
- red: { 300: '#E87070', 500: '#CC3333' },
- green: { 300: '#66CC88', 500: '#33AA55' },
- yellow: { 300: '#EEDD55', 500: '#CCAA00' },
- blue: { 300: '#77AADD', 500: '#4488BB' },
- },
- font: {
- mono: '"JetBrains Mono", "Fira Code", "IBM Plex Mono", "Cascadia Code", "Source Code Pro", ui-monospace, monospace',
- size: { xs: '11px', sm: '12px', md: '14px', lg: '16px', xl: '20px', '2xl': '24px', '3xl': '28px' },
- weight: { regular: '400', medium: '500', bold: '700' },
- },
- 'line-height': { xs: '16px', sm: '16px', md: '20px', lg: '24px', xl: '28px', '2xl': '32px', '3xl': '36px' },
- 'letter-spacing': { normal: '0em', wide: '0.05em', wider: '0.1em' },
- 'text-transform': { none: 'none', uppercase: 'uppercase' },
- space: { 0: '0px', 1: '2px', 2: '4px', 3: '8px', 4: '12px', 5: '16px', 6: '24px', 7: '32px', 8: '48px', 9: '64px', 10: '96px' },
- radius: { none: '0px' },
- border: {
- width: { thin: '1px', medium: '2px', thick: '4px' },
- style: { solid: 'solid', dashed: 'dashed' },
- },
- shadow: { none: 'none' },
- z: { base: '0', raised: '10', dropdown: '100', sticky: '200', overlay: '300', modal: '400' },
- opacity: { disabled: '0.38', hover: '0.08', pressed: '0.16', overlay: '0.60' },
-} as const
diff --git a/src/tokens/semantics.ts b/src/tokens/semantics.ts
deleted file mode 100644
index e660c2c..0000000
--- a/src/tokens/semantics.ts
+++ /dev/null
@@ -1,197 +0,0 @@
-export const semanticsShared = {
- type: {
- display: {
- size: 'var(--aw-ref-font-size-3xl)',
- 'line-height': 'var(--aw-ref-line-height-3xl)',
- weight: 'var(--aw-ref-font-weight-bold)',
- tracking: 'var(--aw-ref-letter-spacing-normal)',
- transform: 'var(--aw-ref-text-transform-uppercase)',
- },
- heading: {
- size: 'var(--aw-ref-font-size-lg)',
- 'line-height': 'var(--aw-ref-line-height-lg)',
- weight: 'var(--aw-ref-font-weight-bold)',
- tracking: 'var(--aw-ref-letter-spacing-wide)',
- transform: 'var(--aw-ref-text-transform-uppercase)',
- },
- subheading: {
- size: 'var(--aw-ref-font-size-md)',
- 'line-height': 'var(--aw-ref-line-height-md)',
- weight: 'var(--aw-ref-font-weight-medium)',
- tracking: 'var(--aw-ref-letter-spacing-wide)',
- transform: 'var(--aw-ref-text-transform-uppercase)',
- },
- body: {
- size: 'var(--aw-ref-font-size-md)',
- 'line-height': 'var(--aw-ref-line-height-md)',
- weight: 'var(--aw-ref-font-weight-regular)',
- tracking: 'var(--aw-ref-letter-spacing-normal)',
- },
- label: {
- size: 'var(--aw-ref-font-size-sm)',
- 'line-height': 'var(--aw-ref-line-height-sm)',
- weight: 'var(--aw-ref-font-weight-medium)',
- tracking: 'var(--aw-ref-letter-spacing-wider)',
- transform: 'var(--aw-ref-text-transform-uppercase)',
- },
- caption: {
- size: 'var(--aw-ref-font-size-xs)',
- 'line-height': 'var(--aw-ref-line-height-xs)',
- weight: 'var(--aw-ref-font-weight-regular)',
- tracking: 'var(--aw-ref-letter-spacing-normal)',
- },
- },
- space: {
- inset: {
- xs: 'var(--aw-ref-space-1)',
- sm: 'var(--aw-ref-space-2)',
- md: 'var(--aw-ref-space-3)',
- lg: 'var(--aw-ref-space-5)',
- xl: 'var(--aw-ref-space-6)',
- },
- gap: {
- xs: 'var(--aw-ref-space-1)',
- sm: 'var(--aw-ref-space-2)',
- md: 'var(--aw-ref-space-3)',
- lg: 'var(--aw-ref-space-5)',
- xl: 'var(--aw-ref-space-6)',
- },
- layout: {
- xs: 'var(--aw-ref-space-5)',
- sm: 'var(--aw-ref-space-6)',
- md: 'var(--aw-ref-space-7)',
- lg: 'var(--aw-ref-space-8)',
- xl: 'var(--aw-ref-space-9)',
- },
- },
- size: {
- compact: '24px',
- default: '28px',
- comfortable: '36px',
- large: '44px',
- icon: { sm: '12px', md: '16px', lg: '20px' },
- },
- shape: {
- radius: 'var(--aw-ref-radius-none)',
- },
- border: {
- default: 'var(--aw-ref-border-width-thin) var(--aw-ref-border-style-solid) var(--aw-sys-color-border-default)',
- strong: 'var(--aw-ref-border-width-thin) var(--aw-ref-border-style-solid) var(--aw-sys-color-border-strong)',
- interactive: 'var(--aw-ref-border-width-medium) var(--aw-ref-border-style-solid) var(--aw-sys-color-border-interactive)',
- dashed: 'var(--aw-ref-border-width-thin) var(--aw-ref-border-style-dashed) var(--aw-sys-color-border-default)',
- },
- elevation: {
- flat: 'var(--aw-sys-color-bg-surface)',
- raised: 'var(--aw-sys-color-bg-surface-raised)',
- overlay: 'var(--aw-sys-color-bg-surface-overlay)',
- },
- z: {
- default: 'var(--aw-ref-z-base)',
- dropdown: 'var(--aw-ref-z-dropdown)',
- sticky: 'var(--aw-ref-z-sticky)',
- overlay: 'var(--aw-ref-z-overlay)',
- modal: 'var(--aw-ref-z-modal)',
- },
- state: {
- disabled: 'var(--aw-ref-opacity-disabled)',
- hover: 'var(--aw-ref-opacity-hover)',
- pressed: 'var(--aw-ref-opacity-pressed)',
- scrim: 'var(--aw-ref-opacity-overlay)',
- },
- transition: {
- fast: '100ms ease-out',
- none: '0ms',
- },
-} as const
-
-export const semanticsDark = {
- color: {
- bg: {
- root: 'var(--aw-ref-color-neutral-950)',
- surface: 'var(--aw-ref-color-neutral-900)',
- 'surface-raised': 'var(--aw-ref-color-neutral-800)',
- 'surface-overlay': 'var(--aw-ref-color-neutral-700)',
- brand: 'var(--aw-ref-color-maroon-500)',
- 'brand-subtle': 'var(--aw-ref-color-maroon-800)',
- },
- text: {
- primary: 'var(--aw-ref-color-neutral-100)',
- secondary: 'var(--aw-ref-color-neutral-400)',
- muted: 'var(--aw-ref-color-neutral-500)',
- inverse: 'var(--aw-ref-color-neutral-950)',
- brand: 'var(--aw-ref-color-maroon-300)',
- accent: 'var(--aw-ref-color-amber-500)',
- 'on-brand': 'var(--aw-ref-color-neutral-0)',
- },
- interactive: {
- DEFAULT: 'var(--aw-ref-color-amber-500)',
- hover: 'var(--aw-ref-color-amber-400)',
- active: 'var(--aw-ref-color-amber-600)',
- muted: 'var(--aw-ref-color-amber-800)',
- },
- border: {
- default: 'var(--aw-ref-color-neutral-700)',
- strong: 'var(--aw-ref-color-neutral-500)',
- interactive: 'var(--aw-ref-color-amber-500)',
- brand: 'var(--aw-ref-color-maroon-400)',
- },
- feedback: {
- error: 'var(--aw-ref-color-red-500)',
- 'error-text': 'var(--aw-ref-color-red-300)',
- success: 'var(--aw-ref-color-green-500)',
- 'success-text': 'var(--aw-ref-color-green-300)',
- warning: 'var(--aw-ref-color-yellow-500)',
- 'warning-text': 'var(--aw-ref-color-yellow-300)',
- info: 'var(--aw-ref-color-blue-500)',
- 'info-text': 'var(--aw-ref-color-blue-300)',
- },
- selection: { bg: 'var(--aw-ref-color-amber-900)' },
- focus: { ring: 'var(--aw-ref-color-amber-500)' },
- },
-} as const
-
-export const semanticsLight = {
- color: {
- bg: {
- root: 'var(--aw-ref-color-neutral-50)',
- surface: 'var(--aw-ref-color-neutral-0)',
- 'surface-raised': 'var(--aw-ref-color-neutral-100)',
- 'surface-overlay': 'var(--aw-ref-color-neutral-200)',
- brand: 'var(--aw-ref-color-maroon-500)',
- 'brand-subtle': 'var(--aw-ref-color-maroon-100)',
- },
- text: {
- primary: 'var(--aw-ref-color-neutral-900)',
- secondary: 'var(--aw-ref-color-neutral-600)',
- muted: 'var(--aw-ref-color-neutral-400)',
- inverse: 'var(--aw-ref-color-neutral-50)',
- brand: 'var(--aw-ref-color-maroon-600)',
- accent: 'var(--aw-ref-color-amber-700)',
- 'on-brand': 'var(--aw-ref-color-neutral-0)',
- },
- interactive: {
- DEFAULT: 'var(--aw-ref-color-amber-700)',
- hover: 'var(--aw-ref-color-amber-600)',
- active: 'var(--aw-ref-color-amber-800)',
- muted: 'var(--aw-ref-color-amber-100)',
- },
- border: {
- default: 'var(--aw-ref-color-neutral-200)',
- strong: 'var(--aw-ref-color-neutral-400)',
- interactive: 'var(--aw-ref-color-amber-700)',
- brand: 'var(--aw-ref-color-maroon-400)',
- },
- feedback: {
- error: 'var(--aw-ref-color-red-500)',
- 'error-text': 'var(--aw-ref-color-red-500)',
- success: 'var(--aw-ref-color-green-500)',
- 'success-text': 'var(--aw-ref-color-green-500)',
- warning: 'var(--aw-ref-color-yellow-500)',
- 'warning-text': 'var(--aw-ref-color-yellow-500)',
- info: 'var(--aw-ref-color-blue-500)',
- 'info-text': 'var(--aw-ref-color-blue-500)',
- },
- selection: { bg: 'var(--aw-ref-color-amber-100)' },
- focus: { ring: 'var(--aw-ref-color-amber-600)' },
- },
-} as const
diff --git a/src/tokens/tokens.css b/src/tokens/tokens.css
deleted file mode 100644
index 6d884d3..0000000
--- a/src/tokens/tokens.css
+++ /dev/null
@@ -1,293 +0,0 @@
-/* AWAR Design System — Generated Token CSS */
-/* Do not edit manually. Run: npm run generate:tokens */
-
-:root {
- --aw-ref-color-maroon-100: #F2E0E0;
- --aw-ref-color-maroon-200: #D4A3A3;
- --aw-ref-color-maroon-300: #B06666;
- --aw-ref-color-maroon-400: #994444;
- --aw-ref-color-maroon-500: #773333;
- --aw-ref-color-maroon-600: #5C2828;
- --aw-ref-color-maroon-700: #421D1D;
- --aw-ref-color-maroon-800: #2E1414;
- --aw-ref-color-maroon-900: #1A0C0C;
- --aw-ref-color-amber-100: #FFF0D9;
- --aw-ref-color-amber-200: #FFDCA3;
- --aw-ref-color-amber-300: #FFC06D;
- --aw-ref-color-amber-400: #FFB055;
- --aw-ref-color-amber-500: #FF9944;
- --aw-ref-color-amber-600: #E07A20;
- --aw-ref-color-amber-700: #B85E10;
- --aw-ref-color-amber-800: #8A4508;
- --aw-ref-color-amber-900: #5C2D00;
- --aw-ref-color-neutral-0: #FFFFFF;
- --aw-ref-color-neutral-50: #FAF7F5;
- --aw-ref-color-neutral-100: #F0EBE8;
- --aw-ref-color-neutral-200: #DBD4D0;
- --aw-ref-color-neutral-300: #B8AEAA;
- --aw-ref-color-neutral-400: #958A85;
- --aw-ref-color-neutral-500: #736661;
- --aw-ref-color-neutral-600: #524846;
- --aw-ref-color-neutral-700: #3A3230;
- --aw-ref-color-neutral-800: #252020;
- --aw-ref-color-neutral-900: #171312;
- --aw-ref-color-neutral-950: #0D0B0A;
- --aw-ref-color-neutral-1000: #000000;
- --aw-ref-color-red-300: #E87070;
- --aw-ref-color-red-500: #CC3333;
- --aw-ref-color-green-300: #66CC88;
- --aw-ref-color-green-500: #33AA55;
- --aw-ref-color-yellow-300: #EEDD55;
- --aw-ref-color-yellow-500: #CCAA00;
- --aw-ref-color-blue-300: #77AADD;
- --aw-ref-color-blue-500: #4488BB;
- --aw-ref-font-mono: "JetBrains Mono", "Fira Code", "IBM Plex Mono", "Cascadia Code", "Source Code Pro", ui-monospace, monospace;
- --aw-ref-font-size-xs: 11px;
- --aw-ref-font-size-sm: 12px;
- --aw-ref-font-size-md: 14px;
- --aw-ref-font-size-lg: 16px;
- --aw-ref-font-size-xl: 20px;
- --aw-ref-font-size-2xl: 24px;
- --aw-ref-font-size-3xl: 28px;
- --aw-ref-font-weight-regular: 400;
- --aw-ref-font-weight-medium: 500;
- --aw-ref-font-weight-bold: 700;
- --aw-ref-line-height-xs: 16px;
- --aw-ref-line-height-sm: 16px;
- --aw-ref-line-height-md: 20px;
- --aw-ref-line-height-lg: 24px;
- --aw-ref-line-height-xl: 28px;
- --aw-ref-line-height-2xl: 32px;
- --aw-ref-line-height-3xl: 36px;
- --aw-ref-letter-spacing-normal: 0em;
- --aw-ref-letter-spacing-wide: 0.05em;
- --aw-ref-letter-spacing-wider: 0.1em;
- --aw-ref-text-transform-none: none;
- --aw-ref-text-transform-uppercase: uppercase;
- --aw-ref-space-0: 0px;
- --aw-ref-space-1: 2px;
- --aw-ref-space-2: 4px;
- --aw-ref-space-3: 8px;
- --aw-ref-space-4: 12px;
- --aw-ref-space-5: 16px;
- --aw-ref-space-6: 24px;
- --aw-ref-space-7: 32px;
- --aw-ref-space-8: 48px;
- --aw-ref-space-9: 64px;
- --aw-ref-space-10: 96px;
- --aw-ref-radius-none: 0px;
- --aw-ref-border-width-thin: 1px;
- --aw-ref-border-width-medium: 2px;
- --aw-ref-border-width-thick: 4px;
- --aw-ref-border-style-solid: solid;
- --aw-ref-border-style-dashed: dashed;
- --aw-ref-shadow-none: none;
- --aw-ref-z-base: 0;
- --aw-ref-z-raised: 10;
- --aw-ref-z-dropdown: 100;
- --aw-ref-z-sticky: 200;
- --aw-ref-z-overlay: 300;
- --aw-ref-z-modal: 400;
- --aw-ref-opacity-disabled: 0.38;
- --aw-ref-opacity-hover: 0.08;
- --aw-ref-opacity-pressed: 0.16;
- --aw-ref-opacity-overlay: 0.60;
- --aw-sys-type-display-size: var(--aw-ref-font-size-3xl);
- --aw-sys-type-display-line-height: var(--aw-ref-line-height-3xl);
- --aw-sys-type-display-weight: var(--aw-ref-font-weight-bold);
- --aw-sys-type-display-tracking: var(--aw-ref-letter-spacing-normal);
- --aw-sys-type-display-transform: var(--aw-ref-text-transform-uppercase);
- --aw-sys-type-heading-size: var(--aw-ref-font-size-lg);
- --aw-sys-type-heading-line-height: var(--aw-ref-line-height-lg);
- --aw-sys-type-heading-weight: var(--aw-ref-font-weight-bold);
- --aw-sys-type-heading-tracking: var(--aw-ref-letter-spacing-wide);
- --aw-sys-type-heading-transform: var(--aw-ref-text-transform-uppercase);
- --aw-sys-type-subheading-size: var(--aw-ref-font-size-md);
- --aw-sys-type-subheading-line-height: var(--aw-ref-line-height-md);
- --aw-sys-type-subheading-weight: var(--aw-ref-font-weight-medium);
- --aw-sys-type-subheading-tracking: var(--aw-ref-letter-spacing-wide);
- --aw-sys-type-subheading-transform: var(--aw-ref-text-transform-uppercase);
- --aw-sys-type-body-size: var(--aw-ref-font-size-md);
- --aw-sys-type-body-line-height: var(--aw-ref-line-height-md);
- --aw-sys-type-body-weight: var(--aw-ref-font-weight-regular);
- --aw-sys-type-body-tracking: var(--aw-ref-letter-spacing-normal);
- --aw-sys-type-label-size: var(--aw-ref-font-size-sm);
- --aw-sys-type-label-line-height: var(--aw-ref-line-height-sm);
- --aw-sys-type-label-weight: var(--aw-ref-font-weight-medium);
- --aw-sys-type-label-tracking: var(--aw-ref-letter-spacing-wider);
- --aw-sys-type-label-transform: var(--aw-ref-text-transform-uppercase);
- --aw-sys-type-caption-size: var(--aw-ref-font-size-xs);
- --aw-sys-type-caption-line-height: var(--aw-ref-line-height-xs);
- --aw-sys-type-caption-weight: var(--aw-ref-font-weight-regular);
- --aw-sys-type-caption-tracking: var(--aw-ref-letter-spacing-normal);
- --aw-sys-space-inset-xs: var(--aw-ref-space-1);
- --aw-sys-space-inset-sm: var(--aw-ref-space-2);
- --aw-sys-space-inset-md: var(--aw-ref-space-3);
- --aw-sys-space-inset-lg: var(--aw-ref-space-5);
- --aw-sys-space-inset-xl: var(--aw-ref-space-6);
- --aw-sys-space-gap-xs: var(--aw-ref-space-1);
- --aw-sys-space-gap-sm: var(--aw-ref-space-2);
- --aw-sys-space-gap-md: var(--aw-ref-space-3);
- --aw-sys-space-gap-lg: var(--aw-ref-space-5);
- --aw-sys-space-gap-xl: var(--aw-ref-space-6);
- --aw-sys-space-layout-xs: var(--aw-ref-space-5);
- --aw-sys-space-layout-sm: var(--aw-ref-space-6);
- --aw-sys-space-layout-md: var(--aw-ref-space-7);
- --aw-sys-space-layout-lg: var(--aw-ref-space-8);
- --aw-sys-space-layout-xl: var(--aw-ref-space-9);
- --aw-sys-size-compact: 24px;
- --aw-sys-size-default: 28px;
- --aw-sys-size-comfortable: 36px;
- --aw-sys-size-large: 44px;
- --aw-sys-size-icon-sm: 12px;
- --aw-sys-size-icon-md: 16px;
- --aw-sys-size-icon-lg: 20px;
- --aw-sys-shape-radius: var(--aw-ref-radius-none);
- --aw-sys-border-default: var(--aw-ref-border-width-thin) var(--aw-ref-border-style-solid) var(--aw-sys-color-border-default);
- --aw-sys-border-strong: var(--aw-ref-border-width-thin) var(--aw-ref-border-style-solid) var(--aw-sys-color-border-strong);
- --aw-sys-border-interactive: var(--aw-ref-border-width-medium) var(--aw-ref-border-style-solid) var(--aw-sys-color-border-interactive);
- --aw-sys-border-dashed: var(--aw-ref-border-width-thin) var(--aw-ref-border-style-dashed) var(--aw-sys-color-border-default);
- --aw-sys-elevation-flat: var(--aw-sys-color-bg-surface);
- --aw-sys-elevation-raised: var(--aw-sys-color-bg-surface-raised);
- --aw-sys-elevation-overlay: var(--aw-sys-color-bg-surface-overlay);
- --aw-sys-z-default: var(--aw-ref-z-base);
- --aw-sys-z-dropdown: var(--aw-ref-z-dropdown);
- --aw-sys-z-sticky: var(--aw-ref-z-sticky);
- --aw-sys-z-overlay: var(--aw-ref-z-overlay);
- --aw-sys-z-modal: var(--aw-ref-z-modal);
- --aw-sys-state-disabled: var(--aw-ref-opacity-disabled);
- --aw-sys-state-hover: var(--aw-ref-opacity-hover);
- --aw-sys-state-pressed: var(--aw-ref-opacity-pressed);
- --aw-sys-state-scrim: var(--aw-ref-opacity-overlay);
- --aw-sys-transition-fast: 100ms ease-out;
- --aw-sys-transition-none: 0ms;
-}
-
-[data-mode="dark"] {
- --aw-sys-color-bg-root: var(--aw-ref-color-neutral-950);
- --aw-sys-color-bg-surface: var(--aw-ref-color-neutral-900);
- --aw-sys-color-bg-surface-raised: var(--aw-ref-color-neutral-800);
- --aw-sys-color-bg-surface-overlay: var(--aw-ref-color-neutral-700);
- --aw-sys-color-bg-brand: var(--aw-ref-color-maroon-500);
- --aw-sys-color-bg-brand-subtle: var(--aw-ref-color-maroon-800);
- --aw-sys-color-text-primary: var(--aw-ref-color-neutral-100);
- --aw-sys-color-text-secondary: var(--aw-ref-color-neutral-400);
- --aw-sys-color-text-muted: var(--aw-ref-color-neutral-500);
- --aw-sys-color-text-inverse: var(--aw-ref-color-neutral-950);
- --aw-sys-color-text-brand: var(--aw-ref-color-maroon-300);
- --aw-sys-color-text-accent: var(--aw-ref-color-amber-500);
- --aw-sys-color-text-on-brand: var(--aw-ref-color-neutral-0);
- --aw-sys-color-interactive: var(--aw-ref-color-amber-500);
- --aw-sys-color-interactive-hover: var(--aw-ref-color-amber-400);
- --aw-sys-color-interactive-active: var(--aw-ref-color-amber-600);
- --aw-sys-color-interactive-muted: var(--aw-ref-color-amber-800);
- --aw-sys-color-border-default: var(--aw-ref-color-neutral-700);
- --aw-sys-color-border-strong: var(--aw-ref-color-neutral-500);
- --aw-sys-color-border-interactive: var(--aw-ref-color-amber-500);
- --aw-sys-color-border-brand: var(--aw-ref-color-maroon-400);
- --aw-sys-color-feedback-error: var(--aw-ref-color-red-500);
- --aw-sys-color-feedback-error-text: var(--aw-ref-color-red-300);
- --aw-sys-color-feedback-success: var(--aw-ref-color-green-500);
- --aw-sys-color-feedback-success-text: var(--aw-ref-color-green-300);
- --aw-sys-color-feedback-warning: var(--aw-ref-color-yellow-500);
- --aw-sys-color-feedback-warning-text: var(--aw-ref-color-yellow-300);
- --aw-sys-color-feedback-info: var(--aw-ref-color-blue-500);
- --aw-sys-color-feedback-info-text: var(--aw-ref-color-blue-300);
- --aw-sys-color-selection-bg: var(--aw-ref-color-amber-900);
- --aw-sys-color-focus-ring: var(--aw-ref-color-amber-500);
-}
-
-[data-mode="light"] {
- --aw-sys-color-bg-root: var(--aw-ref-color-neutral-50);
- --aw-sys-color-bg-surface: var(--aw-ref-color-neutral-0);
- --aw-sys-color-bg-surface-raised: var(--aw-ref-color-neutral-100);
- --aw-sys-color-bg-surface-overlay: var(--aw-ref-color-neutral-200);
- --aw-sys-color-bg-brand: var(--aw-ref-color-maroon-500);
- --aw-sys-color-bg-brand-subtle: var(--aw-ref-color-maroon-100);
- --aw-sys-color-text-primary: var(--aw-ref-color-neutral-900);
- --aw-sys-color-text-secondary: var(--aw-ref-color-neutral-600);
- --aw-sys-color-text-muted: var(--aw-ref-color-neutral-400);
- --aw-sys-color-text-inverse: var(--aw-ref-color-neutral-50);
- --aw-sys-color-text-brand: var(--aw-ref-color-maroon-600);
- --aw-sys-color-text-accent: var(--aw-ref-color-amber-700);
- --aw-sys-color-text-on-brand: var(--aw-ref-color-neutral-0);
- --aw-sys-color-interactive: var(--aw-ref-color-amber-700);
- --aw-sys-color-interactive-hover: var(--aw-ref-color-amber-600);
- --aw-sys-color-interactive-active: var(--aw-ref-color-amber-800);
- --aw-sys-color-interactive-muted: var(--aw-ref-color-amber-100);
- --aw-sys-color-border-default: var(--aw-ref-color-neutral-200);
- --aw-sys-color-border-strong: var(--aw-ref-color-neutral-400);
- --aw-sys-color-border-interactive: var(--aw-ref-color-amber-700);
- --aw-sys-color-border-brand: var(--aw-ref-color-maroon-400);
- --aw-sys-color-feedback-error: var(--aw-ref-color-red-500);
- --aw-sys-color-feedback-error-text: var(--aw-ref-color-red-500);
- --aw-sys-color-feedback-success: var(--aw-ref-color-green-500);
- --aw-sys-color-feedback-success-text: var(--aw-ref-color-green-500);
- --aw-sys-color-feedback-warning: var(--aw-ref-color-yellow-500);
- --aw-sys-color-feedback-warning-text: var(--aw-ref-color-yellow-500);
- --aw-sys-color-feedback-info: var(--aw-ref-color-blue-500);
- --aw-sys-color-feedback-info-text: var(--aw-ref-color-blue-500);
- --aw-sys-color-selection-bg: var(--aw-ref-color-amber-100);
- --aw-sys-color-focus-ring: var(--aw-ref-color-amber-600);
-}
-
-/* ── Global Reset ── */
-*,
-*::before,
-*::after {
- box-sizing: border-box;
- margin: 0;
- padding: 0;
-}
-
-html {
- border-radius: 0;
-}
-
-body {
- font-family: var(--aw-ref-font-mono);
- font-size: var(--aw-ref-font-size-md);
- line-height: var(--aw-ref-line-height-md);
- background-color: var(--aw-sys-color-bg-root);
- color: var(--aw-sys-color-text-primary);
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
-}
-
-/* ── Selection ── */
-::selection {
- background-color: var(--aw-sys-color-selection-bg);
-}
-
-/* ── Scrollbar ── */
-* {
- &::-webkit-scrollbar {
- background: var(--aw-sys-color-bg-surface);
- width: 1ch;
- height: 1ch;
- }
-
- &::-webkit-scrollbar-track {
- background: var(--aw-sys-color-bg-surface);
- border-inline-start: 1px solid var(--aw-sys-color-border-default);
- }
-
- &::-webkit-scrollbar-thumb {
- background: var(--aw-sys-color-interactive);
- }
-
- &::-webkit-scrollbar-thumb:hover {
- background: var(--aw-sys-color-interactive-hover);
- }
-
- &::-webkit-scrollbar-corner {
- background: var(--aw-sys-color-bg-surface);
- }
-}
-
-@supports not selector(::-webkit-scrollbar) {
- * {
- scrollbar-width: thin;
- scrollbar-color: var(--aw-sys-color-interactive) var(--aw-sys-color-bg-surface);
- }
-}
diff --git a/tsconfig.json b/tsconfig.json
index 50965ee..2deb02e 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -22,6 +22,5 @@
}
},
"include": ["src"],
- "exclude": ["src/tokens/generate-css.ts"],
"references": [{ "path": "./tsconfig.node.json" }]
}
diff --git a/tsconfig.lib.json b/tsconfig.lib.json
index 16261ac..d53a841 100644
--- a/tsconfig.lib.json
+++ b/tsconfig.lib.json
@@ -23,5 +23,5 @@
}
},
"include": ["src"],
- "exclude": ["src/showcase", "src/main.tsx", "src/vite-env.d.ts", "src/tokens/generate-css.ts"]
+ "exclude": ["src/App.tsx", "src/main.tsx", "src/vite-env.d.ts"]
}
diff --git a/vite.config.lib.ts b/vite.config.lib.ts
index f61b30b..65c3578 100644
--- a/vite.config.lib.ts
+++ b/vite.config.lib.ts
@@ -1,12 +1,13 @@
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
import { resolve } from 'path'
export default defineConfig({
- plugins: [react()],
- css: {
- modules: {
- localsConvention: 'camelCase',
+ plugins: [react(), tailwindcss()],
+ resolve: {
+ alias: {
+ '@': resolve(__dirname, './src'),
},
},
publicDir: false,
@@ -21,10 +22,6 @@ export default defineConfig({
'react',
'react-dom',
'react/jsx-runtime',
- '@radix-ui/react-dialog',
- '@radix-ui/react-dropdown-menu',
- '@radix-ui/react-tooltip',
- '@radix-ui/react-popover',
],
},
cssCodeSplit: false,
diff --git a/vite.config.ts b/vite.config.ts
index 79e8856..b608676 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,17 +1,13 @@
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
import path from 'path'
export default defineConfig({
- plugins: [react()],
+ plugins: [react(), tailwindcss()],
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
},
},
- css: {
- modules: {
- localsConvention: 'camelCase',
- },
- },
})
|