@uselets/ui 0.6.1 → 1.1.0

package/dist/skills/uselets-ui/references/component-catalog.md

@@ -26,6 +26,14 @@ Unless noted otherwise, each module also exports its public `*Props` types from
 - `use-mobile`
   - Import path: `@uselets/ui/hooks/use-mobile`
   - Exports: `useIsMobile`
+- `use-breakpoint`
+  - Import path: `@uselets/ui/hooks/use-breakpoint`
+  - Exports: `useBreakpoint`, `Breakpoint`, `breakpointValues`
+  - Notes: returns whether the current viewport is at or above a Tailwind default breakpoint (`base`, `sm`, `md`, `lg`, `xl`, `2xl`)
+- `use-breakpoint-value`
+  - Import path: `@uselets/ui/hooks/use-breakpoint-value`
+  - Exports: `useBreakpointValue`, `ResponsiveValueMap`
+  - Notes: accepts a breakpoint value map such as `{ base: 1, md: 2 }` and returns the largest active value
 - `use-disclosure`
   - Import path: `@uselets/ui/hooks/use-disclosure`
   - Exports: `useDisclosure`
@@ -45,6 +53,10 @@ Unless noted otherwise, each module also exports its public `*Props` types from
 - `utils`
   - Import path: `@uselets/ui/utils`
   - Exports: `cn`, `randomId`
+- `color`
+  - Import path: `@uselets/ui/lib/color`
+  - Exports: `uiColors`, `UIColor`, `selectionControlColorVariants`
+  - Notes: canonical public color list used by `Button`, `Toggle`, `Checkbox`, `RadioGroupItem`, and `Switch`; `ButtonColor` is a compatibility alias for `UIColor`; `selectionControlColorVariants` is an internal styling map for checked selection controls
 - `sonner`
   - Import path: `@uselets/ui/sonner`
   - Exports: `Toaster`, `toast`
@@ -82,7 +94,7 @@ Unless noted otherwise, each module also exports its public `*Props` types from
   - Exports: `Badge`, `badgeVariants`
 - `button`
   - Exports: `Button`, `buttonVariants`
-  - Notes: action button with `solid`, `outline`, `subtle`, `ghost`, `destructive`, and `link` variants, theme color families (`brand` default), and icon sizes
+  - Notes: action button with `solid`, `outline`, `subtle`, `ghost`, and `link` variants, `color: UIColor` (`primary` default), sizes from `xs` through `xl` plus icon sizes through `icon-xl`, and `loading`
 - `button-group`
   - Exports: `ButtonGroup`, `ButtonGroupSeparator`, `ButtonGroupText`, `buttonGroupVariants`
 - `empty`
@@ -99,6 +111,15 @@ Unless noted otherwise, each module also exports its public `*Props` types from
 - `field`
   - Exports: `Field`, `FieldContent`, `FieldDescription`, `FieldError`, `FieldGroup`, `FieldLabel`, `FieldLegend`, `FieldSeparator`, `FieldSet`, `FieldTitle`
   - Notes: form layout and validation helpers
+- `grid`
+  - Exports: `Grid`, `GridItem`
+  - Notes: 12-column CSS grid by default. `Grid` supports spacing props plus direct `templateRows` and `templateColumns`; `GridItem` defaults to `colSpan={12}` and supports numeric `colSpan` and `rowSpan`. Use `useBreakpointValue` when these values need to change by breakpoint.
+- `simple-grid`
+  - Exports: `SimpleGrid`
+  - Notes: simple grid with `cols`, `gap`, `rowGap`, and `columnGap`. `cols` accepts a number; spacing uses the `xs` to `xl` scale. Use `useBreakpointValue` when column count needs responsive values.
+- `visibility`
+  - Exports: `HiddenFrom`, `VisibleFrom`
+  - Notes: breakpoint visibility wrappers. `HiddenFrom breakpoint="md"` hides at `md` and above; `VisibleFrom breakpoint="md"` shows at `md` and above.
 - `input`
   - Exports: `Input`
 - `textarea`
@@ -110,28 +131,36 @@ Unless noted otherwise, each module also exports its public `*Props` types from
   - Exports: `InputOTP`, `InputOTPGroup`, `InputOTPSeparator`, `InputOTPSlot`, `REGEXP_ONLY_CHARS`, `REGEXP_ONLY_DIGITS`, `REGEXP_ONLY_DIGITS_AND_CHARS`
 - `checkbox`
   - Exports: `Checkbox`
+  - Notes: supports `size: 'sm' | 'md' | 'lg'`, `color: UIColor` (default `primary`), `label?: React.ReactNode`, `labelProps`, and automatic `id`/`htmlFor` wiring when a label is provided without an explicit `id`; composed label text follows checkbox size (`sm` 12px, `md` 14px, `lg` 20px)
 - `switch`
   - Exports: `Switch`
+  - Notes: supports `size: 'sm' | 'md' | 'lg'`, `color: UIColor` (default `green`), `label?: React.ReactNode`, `labelProps`, and automatic `id`/`htmlFor` wiring when a label is provided without an explicit `id`; `color` controls the checked track and indicator color only; track size is `sm` 34x16px, `md` 42x20px, and `lg` 48x22px; the thumb and internal indicator scale with the switch; composed label text follows switch size (`sm` 12px, `md` 14px, `lg` 20px)
 - `radio-group`
   - Exports: `RadioGroup`, `RadioGroupItem`
+  - Notes: `RadioGroup` supports `color: UIColor` (default `primary`) for the group; `RadioGroupItem` supports `size: 'sm' | 'md' | 'lg'`, optional `color: UIColor` item overrides, `label?: React.ReactNode`, `labelProps`, and automatic `id`/`htmlFor` wiring when a label is provided without an explicit `id`; composed label text follows item size (`sm` 12px, `md` 14px, `lg` 20px)
 - `select`
   - Exports: `Select`, `SelectContent`, `SelectGroup`, `SelectItem`, `SelectLabel`, `SelectScrollDownButton`, `SelectScrollUpButton`, `SelectSeparator`, `SelectTrigger`, `SelectValue`
 - `native-select`
   - Exports: `NativeSelect`, `NativeSelectOptGroup`, `NativeSelectOption`
 - `combobox`
   - Exports: `Combobox`, `ComboboxInput`, `ComboboxContent`, `ComboboxList`, `ComboboxItem`, `ComboboxGroup`, `ComboboxLabel`, `ComboboxCollection`, `ComboboxClear`, `ComboboxEmpty`, `ComboboxSeparator`, `ComboboxChips`, `ComboboxChip`, `ComboboxChipsInput`, `ComboboxTrigger`, `ComboboxValue`, `useComboboxAnchor`
+  - Notes: `ComboboxInput` supports `icon?: React.ReactNode`, `triggerIcon?: React.ReactNode`, `showTrigger?: boolean`, and `showClear?: boolean`; the trigger icon defaults to `IconSelector`
 - `dropzone`
   - Exports: `Dropzone`, `DropzoneArea`, `DropzoneDescription`, `DropzoneFileList`, `DropzoneFileListItem`, `DropzoneFileMessage`, `DropzoneMessage`, `DropzoneRemoveFile`, `DropzoneRetryFile`, `DropzoneTrigger`, `InfiniteProgress`, `useDropzone`
   - Notes: upload composition with validation, retry handling, status list UI, and optional `shiftOnMaxFiles`
 - `calendar`
   - Exports: `Calendar`, `CalendarDayButton`
-  - Notes: also exports the `DateRange` type
+  - Notes: also exports the `DateRange` type; weekends render with destructive text, week numbers are low-emphasis, and selected single/range endpoints use the `primary` palette with a subtle primary range fill
+- `date-range-picker`
+  - Exports: `DateRangePicker`, `DateRangePickerTrigger`, `DateRangePickerValue`, `DateRangePickerContent`, `DateRangePickerPresets`, `DateRangePickerPreset`, `DateRangePickerCalendar`, `DateRangePickerDateFields`, `DateRangePickerActions`, `DateRangePickerApply`, `DateRangePickerReset`
+  - Notes: compound popover picker using `Calendar` range mode with two months; draft changes from fixed presets, relative-day inputs, date inputs, and calendar stay synchronized until apply; reset and applied clear emit `null` through `onValueChange`; preset buttons show selected state when the draft range matches by calendar day
 - `slider`
   - Exports: `Slider`
 - `label`
   - Exports: `Label`
 - `toggle`
   - Exports: `Toggle`, `toggleVariants`
+  - Notes: supports `color: UIColor` using the same color variants as `Button`
 - `toggle-group`
   - Exports: `ToggleGroup`, `ToggleGroupItem`
 
@@ -141,8 +170,6 @@ Unless noted otherwise, each module also exports its public `*Props` types from
   - Exports: `Dialog`, `DialogClose`, `DialogContent`, `DialogDescription`, `DialogFooter`, `DialogHeader`, `DialogOverlay`, `DialogPortal`, `DialogTitle`, `DialogTrigger`
 - `drawer`
   - Exports: `Drawer`, `DrawerClose`, `DrawerContent`, `DrawerDescription`, `DrawerFooter`, `DrawerHeader`, `DrawerOverlay`, `DrawerPortal`, `DrawerTitle`, `DrawerTrigger`
-- `sheet`
-  - Exports: `Sheet`, `SheetPortal`, `SheetTrigger`, `SheetClose`, `SheetOverlay`, `SheetContent`, `SheetHeader`, `SheetFooter`, `SheetTitle`, `SheetDescription`
 - `popover`
   - Exports: `Popover`, `PopoverAnchor`, `PopoverContent`, `PopoverDescription`, `PopoverHeader`, `PopoverTitle`, `PopoverTrigger`
 - `hover-card`
@@ -164,6 +191,7 @@ Unless noted otherwise, each module also exports its public `*Props` types from
   - Exports: `Sidebar`, `SidebarContent`, `SidebarFooter`, `SidebarGroup`, `SidebarGroupAction`, `SidebarGroupContent`, `SidebarGroupLabel`, `SidebarHeader`, `SidebarInput`, `SidebarInset`, `SidebarMenu`, `SidebarMenuAction`, `SidebarMenuBadge`, `SidebarMenuButton`, `SidebarMenuItem`, `SidebarMenuSkeleton`, `SidebarMenuSub`, `SidebarMenuSubButton`, `SidebarMenuSubItem`, `SidebarProvider`, `SidebarRail`, `SidebarSeparator`, `SidebarTrigger`, `useSidebar`
 - `tabs`
   - Exports: `Tabs`, `TabsContent`, `TabsList`, `tabsListVariants`, `TabsTrigger`
+  - Notes: `TabsList.variant` supports `line` and `enclosed`, defaults to `line`, accepts `grow?: boolean` for equal-width horizontal tabs, and uses the `primary` color for the active line indicator
 
 ## Layout and display
 
@@ -185,6 +213,7 @@ Unless noted otherwise, each module also exports its public `*Props` types from
   - Exports: `Container`, `containerVariants`
 - `group`
   - Exports: `Group`, `groupVariants`
+  - Notes: supports `gap: 'xs' | 'sm' | 'md' | 'lg' | 'xl'` and `wrap`
 - `kbd`
   - Exports: `Kbd`, `KbdGroup`
 - `resizable`
@@ -195,6 +224,7 @@ Unless noted otherwise, each module also exports its public `*Props` types from
   - Exports: `Separator`
 - `stack`
   - Exports: `Stack`, `stackVariants`
+  - Notes: supports `gap: 'xs' | 'sm' | 'md' | 'lg' | 'xl'`
 - `table`
   - Exports: `Table`, `TableHeader`, `TableBody`, `TableFooter`, `TableHead`, `TableRow`, `TableCell`, `TableCaption`
 - `timeline`

package/dist/skills/uselets-ui/references/package-guide.md

@@ -88,25 +88,26 @@ Use `bun uselets skill --agent codex` or `bun uselets skill --agent claude` to i
   - subpath import for dedicated hooks such as `use-mobile`, `use-disclosure`, or `use-local-storage`
 - `@uselets/ui/utils`
   - utility helpers such as `cn` and `randomId`
-- `@uselets/ui/styles.css`
-  - legacy compatibility stylesheet equivalent to the Max theme
+- `@uselets/ui/lib/color`
+  - shared UI color list and type: `uiColors`, `UIColor`
 - `@uselets/ui/themes/max.css`
   - Max theme tokens and component styles
 - `@uselets/ui/themes/gomax.css`
-  - Gomax theme tokens and component styles
+  - GoMax theme tokens and component styles backed by the GoMax Figma palette
 - `@uselets/ui/postcss.config`
   - reusable PostCSS preset for Tailwind v4 setups
 
 ## Base setup
 
-Import one package theme once near the app entrypoint:
+Import Tailwind, one package theme, and Inter once in the app global stylesheet:
 
-```tsx
-import '@uselets/ui/themes/max.css'
-import '@fontsource-variable/inter'
+```css
+@import 'tailwindcss';
+@import '@uselets/ui/themes/max.css';
+@import '@fontsource-variable/inter';
 ```
 
-For Gomax apps, import `@uselets/ui/themes/gomax.css` instead. The legacy `@uselets/ui/styles.css` entrypoint remains available as a Max-theme alias.
+For GoMax apps, import `@uselets/ui/themes/gomax.css` instead.
 
 If the app needs Tailwind v4 PostCSS setup, reuse the package preset:
 
@@ -114,18 +115,37 @@ If the app needs Tailwind v4 PostCSS setup, reuse the package preset:
 export { default } from '@uselets/ui/postcss.config'
 ```
 
-Make sure Tailwind itself is imported in the app stylesheet:
+When the app uses installed `@uselets/ui` components, add a Tailwind source directive so component classes from the package are generated:
 
 ```css
-@import 'tailwindcss';
+@source '../node_modules/@uselets/ui/dist';
 ```
 
+## Typography scale
+
+The Max theme uses Inter as `font-sans` and overrides Tailwind CSS text size utilities from `text-xs` through
+`text-6xl`. Each size includes a default line height equal to `font-size * 1.5`.
+
+| Utility | Font size | Line height |
+| --- | --- | --- |
+| `text-xs` | `0.75rem` / `12px` | `1.125rem` / `18px` |
+| `text-sm` | `0.875rem` / `14px` | `1.3125rem` / `21px` |
+| `text-base` | `1rem` / `16px` | `1.5rem` / `24px` |
+| `text-lg` | `1.125rem` / `18px` | `1.6875rem` / `27px` |
+| `text-xl` | `1.25rem` / `20px` | `1.875rem` / `30px` |
+| `text-2xl` | `1.5rem` / `24px` | `2.25rem` / `36px` |
+| `text-3xl` | `1.875rem` / `30px` | `2.8125rem` / `45px` |
+| `text-4xl` | `2.25rem` / `36px` | `3.375rem` / `54px` |
+| `text-5xl` | `3rem` / `48px` | `4.5rem` / `72px` |
+| `text-6xl` | `3.75rem` / `60px` | `5.625rem` / `90px` |
+
 ## Import patterns
 
 Use these patterns:
 
 ```tsx
 import { Alert, Button, cn, randomId } from '@uselets/ui'
+import type { UIColor } from '@uselets/ui'
 import { Dialog } from '@uselets/ui/dialog'
 import { useIsMobile } from '@uselets/ui/hooks/use-mobile'
 import { useDisclosure } from '@uselets/ui/hooks/use-disclosure'
@@ -140,7 +160,7 @@ Guidance:
 - Use `@uselets/ui/hooks/<hook-module>` for dedicated hook subpaths.
 - Do not invent undocumented subpaths.
 
-Public hook subpaths currently include `hooks/use-mobile`, `hooks/use-disclosure`, `hooks/use-interval`, `hooks/use-idle`, `hooks/use-document-visibility`, and `hooks/use-local-storage`. Legacy `@uselets/ui/use-*` paths are not public entrypoints. Utility helpers are available from `@uselets/ui/utils`.
+Public hook subpaths currently include `hooks/use-mobile`, `hooks/use-disclosure`, `hooks/use-interval`, `hooks/use-idle`, `hooks/use-document-visibility`, and `hooks/use-local-storage`. Legacy `@uselets/ui/use-*` paths are not public entrypoints. Utility helpers are available from `@uselets/ui/utils`, and shared UI color helpers are available from the root barrel or `@uselets/ui/lib/color`.
 
 `useLocalStorage` uses an options object and returns a tuple like `useState`:
 
@@ -208,18 +228,23 @@ export function AppRoot({ children }: { children: React.ReactNode }) {
 
 The package stylesheet exposes these palette families:
 
+- `primary`
 - `brand`
+- `gray`
 - `zinc`
 - `red`
+- `yellow`
 - `blue`
 - `indigo`
 - `pink`
 - `green`
 
+The same palette family names are exported as `uiColors` and `UIColor`. `Button`, `Toggle`, `Checkbox`, `RadioGroupItem`, and `Switch` use `UIColor` for color props. `ButtonColor` remains available as a compatibility alias, but new public APIs should use `UIColor`.
+
 Each palette family is exposed as:
 
-- CSS variables such as `--brand-500`
-- Tailwind v4 utilities such as `bg-brand-500`, `text-zinc-900`, `border-red-300`
+- CSS variables such as `--primary-500`, `--brand-500`, and `--zinc-900`
+- Tailwind v4 utilities such as `bg-primary-500`, `text-zinc-900`, `border-red-300`
 
 Primary semantic tokens:
 
@@ -234,9 +259,18 @@ Additional tokens:
 - `--destructive-foreground`
 - `text-destructive-foreground`
 - `--gradient-primary`
-- `--gradient-secondary`
 
-The `Button` component can apply those palette families directly through `color: 'brand' | 'zinc' | 'red' | 'blue' | 'indigo' | 'pink' | 'green'`, with `brand` as the default. Its public variants are `solid`, `outline`, `subtle`, `ghost`, `destructive`, and `link`, with `solid` as the default.
+The `Button` component can apply those palette families directly through `color: UIColor`, with `primary` as the default. Its public variants are `solid`, `outline`, `subtle`, `ghost`, and `link`, with `solid` as the default. Its public sizes are `xs`, `sm`, `md`, `lg`, `xl`, `icon-xs`, `icon-sm`, `icon`, `icon-lg`, and `icon-xl`; `loading` shows a centered spinner, keeps native button content invisible to preserve size, and disables the button without dimming it.
+
+The `Checkbox` component can be used as a bare checkbox or with `label?: React.ReactNode`. It supports `size: 'sm' | 'md' | 'lg'` and `color: UIColor`, with `primary` as the default color. When `label` is provided, it composes the package `Label`, accepts `labelProps` for that label, and generates an accessible `id`/`htmlFor` pair when no `id` prop is passed. Composed label text follows checkbox size: `sm` 12px, `md` 14px, and `lg` 20px.
+
+The `Switch` component can be used as a bare switch or with `label?: React.ReactNode`. It supports `size: 'sm' | 'md' | 'lg'` and `color: UIColor`, with `green` as the default color. The `color` prop controls only the checked track and indicator color; unchecked remains neutral. Track size is `sm` 34x16px, `md` 42x20px, and `lg` 48x22px. The thumb and its internal indicator scale with the selected size. Composed label text follows switch size: `sm` 12px, `md` 14px, and `lg` 20px.
+
+The `TabsList` component supports `variant: 'line' | 'enclosed'`, with `line` as the default, and `grow?: boolean` for equal-width horizontal tabs. The `line` variant keeps a neutral border line across tabs and uses the `primary` color for the active indicator; use `enclosed` for the filled container treatment.
+
+The `RadioGroup` component supports `color: UIColor`, with `primary` as the default group color. `RadioGroupItem` can be used as a bare radio item inside `RadioGroup` or with `label?: React.ReactNode`; it supports `size: 'sm' | 'md' | 'lg'` and optional `color: UIColor` item overrides. Composed label text follows item size: `sm` 12px, `md` 14px, and `lg` 20px.
+
+The `DateRangePicker` component is a compound popover date range picker built on `Calendar` range mode. Use `DateRange | null` for controlled values; applying an empty draft or resetting emits `null` through `onValueChange`. Fixed presets, relative-day inputs, date inputs, and the calendar all edit the same draft, and `DateRangePickerPreset` displays a selected state when its range matches the current draft by calendar day.
 
 ## Component selection
 
@@ -245,9 +279,9 @@ Choose components by intent:
 - actions and status:
   - `Button`, `Badge`, `Alert`, `Progress`, `Skeleton`, `Spinner`, `toast`
 - forms and inputs:
-  - `Field`, `Input`, `Textarea`, `Checkbox`, `Switch`, `RadioGroup`, `Select`, `NativeSelect`, `Combobox`, `Dropzone`, `InputGroup`, `InputOTP`, `Slider`
+  - `Field`, `Input`, `Textarea`, `Checkbox`, `Switch`, `RadioGroup`, `Select`, `NativeSelect`, `Combobox`, `Dropzone`, `InputGroup`, `InputOTP`, `Slider`, `DateRangePicker`
 - overlays and floating UI:
-  - `Dialog`, `Drawer`, `Sheet`, `Popover`, `Tooltip`, `HoverCard`, `AlertDialog`
+  - `Dialog`, `Drawer`, `Popover`, `Tooltip`, `HoverCard`, `AlertDialog`
 - navigation:
   - `Breadcrumb`, `NavigationMenu`, `Pagination`, `Sidebar`, `Tabs`, `DropdownMenu`, `Command`
 - typography:

package/dist/skills/uselets-ui/scripts/print-public-api.mjs

@@ -160,7 +160,6 @@ console.log('- barrel: `@uselets/ui`')
 console.log('- component subpaths: `@uselets/ui/*`')
 console.log('- hook subpaths: `@uselets/ui/hooks/*`')
 console.log('- utility helpers: `@uselets/ui/utils`')
-console.log('- styles: `@uselets/ui/styles.css` (legacy Max theme alias)')
 console.log('- Max theme: `@uselets/ui/themes/max.css`')
 console.log('- Gomax theme: `@uselets/ui/themes/gomax.css`')
 console.log('- PostCSS preset: `@uselets/ui/postcss.config`')

package/dist/styles/base.css

@@ -0,0 +1,13 @@
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+
+  body {
+    @apply bg-background font-sans text-base text-foreground;
+  }
+
+  html {
+    @apply font-sans;
+  }
+}

package/dist/styles/globals.css

@@ -0,0 +1,8 @@
+@import "tailwindcss";
+@import "./theme.css";
+@import "./max.css";
+@import "./base.css";
+
+@source "../../../../apps/**/*.{ts,tsx}";
+@source "../../../../components/**/*.{ts,tsx}";
+@source "../**/*.{ts,tsx}";

package/dist/styles/gomax.css

@@ -0,0 +1,202 @@
+:root {
+  /* palette tokens */
+  --primary-50: oklch(0.967 0.011 269.55); /* #F1F4FC */
+  --primary-100: oklch(0.934 0.021 268.428); /* #E3E9F8 */
+  --primary-200: oklch(0.859 0.043 270.875); /* #C6D0EE */
+  --primary-300: oklch(0.752 0.078 272.162); /* #9DACE1 */
+  --primary-400: oklch(0.647 0.104 271.342); /* #778ACE */
+  --primary-500: oklch(0.534 0.167 269.617); /* #4862CC */
+  --primary-600: oklch(0.423 0.174 269.851); /* #2C3EAB */
+  --primary-700: oklch(0.353 0.143 272.141); /* #252E84 */
+  --primary-800: oklch(0.286 0.111 274.807); /* #1D2060 */
+  --primary-900: oklch(0.23 0.08 278.141); /* #161641 */
+  --primary-950: oklch(0.192 0.053 281.835); /* #11102B */
+
+  --brand-50: oklch(0.974 0.01 9.532); /* #FDF4F5 */
+  --brand-100: oklch(0.931 0.032 29.76); /* #FDE1DC */
+  --brand-200: oklch(0.791 0.122 33.999); /* #FF9D86 */
+  --brand-300: oklch(0.734 0.166 34.994); /* #FF7D5D */
+  --brand-400: oklch(0.708 0.187 34.708); /* #FF6C49 */
+  --brand-500: oklch(0.686 0.205 34.607); /* #FF5C35 */
+  --brand-600: oklch(0.64 0.192 34.625); /* #E9532F */
+  --brand-700: oklch(0.585 0.175 34.659); /* #CE4929 */
+  --brand-800: oklch(0.537 0.163 34.517); /* #B93F22 */
+  --brand-900: oklch(0.471 0.141 34.467); /* #9A341C */
+  --brand-950: oklch(0.401 0.118 34.378); /* #7B2916 */
+
+  --gray-50: oklch(0.981 0.005 247.876); /* #F6F9FC */
+  --gray-100: oklch(0.952 0.01 247.935); /* #EAF0F6 */
+  --gray-200: oklch(0.915 0.016 247.999); /* #DBE4ED */
+  --gray-300: oklch(0.821 0.028 244.747); /* #B6C7D6 */
+  --gray-400: oklch(0.744 0.039 247.107); /* #99AFC4 */
+  --gray-500: oklch(0.646 0.052 249.575); /* #7691AD */
+  --gray-600: oklch(0.532 0.063 251.386); /* #516F90 */
+  --gray-700: oklch(0.454 0.055 249.121); /* #3E5974 */
+  --gray-800: oklch(0.313 0.037 246.164); /* #213343 */
+  --gray-900: oklch(0.266 0.03 245.1); /* #192733 */
+  --gray-950: oklch(0.216 0.021 243.075); /* #111B23 */
+
+  --zinc-50: oklch(0.979 0 0); /* #F8F8F8 */
+  --zinc-100: oklch(0.952 0 0); /* #EFEFEF */
+  --zinc-200: oklch(0.885 0 0); /* #D9D9D9 */
+  --zinc-300: oklch(0.798 0 0); /* #BDBDBD */
+  --zinc-400: oklch(0.68 0 0); /* #989898 */
+  --zinc-500: oklch(0.586 0 0); /* #7C7C7C */
+  --zinc-600: oklch(0.507 0 0); /* #656565 */
+  --zinc-700: oklch(0.394 0 0); /* #464646 */
+  --zinc-800: oklch(0.305 0.002 106.504); /* #2F2F2E */
+  --zinc-900: oklch(0.207 0.004 345.603); /* #191718 */
+  --zinc-950: oklch(0.155 0.003 67.627); /* #0D0C0B */
+
+  --red-50: oklch(0.968 0.013 5.8); /* #FDF1F3 */
+  --red-100: oklch(0.936 0.03 7.525); /* #FDE2E6 */
+  --red-200: oklch(0.862 0.071 9.896); /* #FCBFC7 */
+  --red-300: oklch(0.755 0.145 13.73); /* #FD8694 */
+  --red-400: oklch(0.673 0.211 19.364); /* #FD4D5F */
+  --red-500: oklch(0.615 0.224 22.558); /* #ED2D40 */
+  --red-600: oklch(0.538 0.21 26.258); /* #CC1420 */
+  --red-700: oklch(0.44 0.165 25.779); /* #99151B */
+  --red-800: oklch(0.349 0.122 24.328); /* #6C1317 */
+  --red-900: oklch(0.266 0.084 22.977); /* #460F11 */
+  --red-950: oklch(0.211 0.055 21.251); /* #2D0C0D */
+
+  --yellow-50: oklch(0.988 0.014 88.681); /* #FFFBF1 */
+  --yellow-100: oklch(0.974 0.029 89.569); /* #FEF6E1 */
+  --yellow-200: oklch(0.944 0.059 84.511); /* #FFEAC0 */
+  --yellow-300: oklch(0.885 0.104 78.009); /* #FFD189 */
+  --yellow-400: oklch(0.827 0.142 71.92); /* #FFB652 */
+  --yellow-500: oklch(0.798 0.158 67.669); /* #FFA736 */
+  --yellow-600: oklch(0.709 0.171 55.903); /* #EF7F0A */
+  --yellow-700: oklch(0.564 0.138 53.071); /* #B25A0E */
+  --yellow-800: oklch(0.433 0.1 52.359); /* #7A3E11 */
+  --yellow-900: oklch(0.324 0.069 50.591); /* #4F280F */
+  --yellow-950: oklch(0.249 0.046 47.281); /* #331A0D */
+
+  --green-50: oklch(0.98 0.003 145.55); /* #F7F9F7 */
+  --green-100: oklch(0.957 0.012 145.482); /* #ECF3EC */
+  --green-200: oklch(0.912 0.032 143.849); /* #D6E8D5 */
+  --green-300: oklch(0.838 0.073 143.695); /* #AED7AC */
+  --green-400: oklch(0.767 0.12 142.694); /* #85C780 */
+  --green-500: oklch(0.675 0.165 142.096); /* #52AF4A */
+  --green-600: oklch(0.567 0.13 141.644); /* #45893D */
+  --green-700: oklch(0.467 0.097 140.77); /* #396731 */
+  --green-800: oklch(0.366 0.066 140.101); /* #2B4725 */
+  --green-900: oklch(0.281 0.041 139.471); /* #1E2E1A */
+  --green-950: oklch(0.222 0.026 138.012); /* #151E12 */
+
+  --blue-50: oklch(0.976 0.002 247.839); /* #F6F7F8 */
+  --blue-100: oklch(0.948 0.006 255.476); /* #EBEEF2 */
+  --blue-200: oklch(0.891 0.018 240.018); /* #D1DDE6 */
+  --blue-300: oklch(0.8 0.044 240.87); /* #A5C2D8 */
+  --blue-400: oklch(0.715 0.077 240.176); /* #76AACF */
+  --blue-500: oklch(0.622 0.113 242.424); /* #408EC5 */
+  --blue-600: oklch(0.538 0.097 239.26); /* #2F75A0 */
+  --blue-700: oklch(0.452 0.072 234.642); /* #275C78 */
+  --blue-800: oklch(0.363 0.05 228.7); /* #1E4353 */
+  --blue-900: oklch(0.282 0.032 222.574); /* #162D35 */
+  --blue-950: oklch(0.224 0.021 217.756); /* #101E22 */
+
+  --indigo-50: oklch(0.966 0.012 301.287); /* #F5F2FB */
+  --indigo-100: oklch(0.929 0.028 299.539); /* #EAE4F8 */
+  --indigo-200: oklch(0.851 0.062 297.56); /* #D2C6F2 */
+  --indigo-300: oklch(0.743 0.087 295.69); /* #B0A1DD */
+  --indigo-400: oklch(0.611 0.153 291.363); /* #866FD7 */
+  --indigo-500: oklch(0.559 0.193 287.911); /* #7358DC */
+  --indigo-600: oklch(0.42 0.218 279.213); /* #4026BE */
+  --indigo-700: oklch(0.351 0.17 279.238); /* #30218F */
+  --indigo-800: oklch(0.286 0.122 280.262); /* #231B64 */
+  --indigo-900: oklch(0.229 0.079 281.288); /* #181540 */
+  --indigo-950: oklch(0.19 0.049 282.432); /* #111029 */
+
+  --pink-50: oklch(0.969 0.016 341.389); /* #FDF1F8 */
+  --pink-100: oklch(0.944 0.027 337.065); /* #F9E6F3 */
+  --pink-200: oklch(0.903 0.045 338.704); /* #F4D4E9 */
+  --pink-300: oklch(0.778 0.085 337.731); /* #DBA2CA */
+  --pink-400: oklch(0.68 0.145 338.806); /* #D172B6 */
+  --pink-500: oklch(0.624 0.191 340.354); /* #CE4EAA */
+  --pink-600: oklch(0.532 0.19 339.952); /* #AE2F8E */
+  --pink-700: oklch(0.436 0.148 337.368); /* #81276E */
+  --pink-800: oklch(0.345 0.103 335.104); /* #58204E */
+  --pink-900: oklch(0.266 0.065 332.23); /* #371833 */
+  --pink-950: oklch(0.211 0.036 331.312); /* #221220 */
+
+  /* gradient tokens */
+  --gradient-primary: linear-gradient(
+    87.14044870021029deg,
+    oklch(0.534 0.167 269.617) 0% /* #4862CC */,
+    oklch(0.71 0.167 13.3) 100% /* #F76F83 */
+  );
+
+  /* semantic tokens */
+  --background: var(--gray-50);
+  --foreground: var(--gray-900);
+  --card: oklch(1 0 0);
+  --card-foreground: var(--gray-900);
+  --popover: oklch(1 0 0);
+  --popover-foreground: var(--gray-900);
+  --primary: var(--primary-500);
+  --primary-foreground: oklch(1 0 0);
+  --brand: var(--brand-500);
+  --brand-foreground: oklch(1 0 0);
+  --secondary: var(--gray-100);
+  --secondary-foreground: var(--gray-900);
+  --muted: var(--gray-100);
+  --muted-foreground: var(--gray-600);
+  --accent: var(--gray-200);
+  --accent-foreground: var(--gray-900);
+  --destructive: var(--red-500);
+  --destructive-foreground: oklch(1 0 0);
+  --border: var(--gray-200);
+  --input: var(--gray-200);
+  --ring: var(--primary-300);
+  --chart-1: var(--primary-500);
+  --chart-2: var(--green-500);
+  --chart-3: var(--blue-500);
+  --chart-4: var(--indigo-500);
+  --chart-5: var(--pink-500);
+  --sidebar: var(--gray-100);
+  --sidebar-foreground: var(--gray-900);
+  --sidebar-primary: var(--primary-500);
+  --sidebar-primary-foreground: oklch(1 0 0);
+  --sidebar-accent: var(--gray-200);
+  --sidebar-accent-foreground: var(--gray-900);
+  --sidebar-border: var(--gray-200);
+  --sidebar-ring: var(--primary-300);
+}
+
+.dark {
+  --background: var(--zinc-950);
+  --foreground: var(--zinc-50);
+  --card: var(--zinc-900);
+  --card-foreground: var(--zinc-50);
+  --popover: var(--zinc-900);
+  --popover-foreground: var(--zinc-50);
+  --primary: var(--primary-400);
+  --primary-foreground: oklch(1 0 0);
+  --brand: var(--brand-400);
+  --brand-foreground: oklch(1 0 0);
+  --secondary: var(--zinc-800);
+  --secondary-foreground: var(--zinc-50);
+  --muted: var(--zinc-800);
+  --muted-foreground: var(--zinc-400);
+  --accent: var(--zinc-700);
+  --accent-foreground: var(--zinc-50);
+  --destructive: var(--red-400);
+  --destructive-foreground: oklch(1 0 0);
+  --border: var(--zinc-700);
+  --input: var(--zinc-600);
+  --ring: var(--primary-400);
+  --chart-1: var(--primary-400);
+  --chart-2: var(--green-400);
+  --chart-3: var(--blue-400);
+  --chart-4: var(--indigo-400);
+  --chart-5: var(--pink-300);
+  --sidebar: var(--zinc-900);
+  --sidebar-foreground: var(--zinc-50);
+  --sidebar-primary: var(--primary-400);
+  --sidebar-primary-foreground: oklch(1 0 0);
+  --sidebar-accent: var(--zinc-700);
+  --sidebar-accent-foreground: var(--zinc-50);
+  --sidebar-border: var(--zinc-700);
+  --sidebar-ring: var(--primary-400);
+}