@moul-dev/ui 2026.8.21 → 2026.8.22

package/dist/src/components/Table/Table.d.ts

@@ -4,21 +4,30 @@ import * as React from 'react';
 export interface TableProps extends Omit<AriaTableProps, 'style'> {
     style?: StyleXStyles;
     className?: string;
+    stickyHeader?: boolean;
+    isLoading?: boolean;
+    loadingState?: React.ReactNode;
+    emptyState?: React.ReactNode;
 }
 export declare const Table: React.ForwardRefExoticComponent<TableProps & React.RefAttributes<HTMLTableElement>>;
 export interface TableHeaderProps<T> extends Omit<AriaTableHeaderProps<T>, 'style'> {
     style?: StyleXStyles;
     className?: string;
+    sticky?: boolean;
 }
 export declare const TableHeader: React.ForwardRefExoticComponent<TableHeaderProps<any> & React.RefAttributes<HTMLTableSectionElement>>;
-export interface ColumnProps extends Omit<AriaColumnProps, 'style'> {
+export interface ColumnProps extends Omit<AriaColumnProps, 'style' | 'className'> {
     style?: StyleXStyles;
-    className?: string;
+    className?: AriaColumnProps['className'];
+    showSortIndicator?: boolean;
 }
 export declare const Column: React.ForwardRefExoticComponent<ColumnProps & React.RefAttributes<HTMLTableHeaderCellElement>>;
 export interface TableBodyProps<T> extends Omit<AriaTableBodyProps<T>, 'style'> {
     style?: StyleXStyles;
     className?: string;
+    isLoading?: boolean;
+    loadingState?: React.ReactNode;
+    emptyState?: React.ReactNode;
 }
 export declare const TableBody: React.ForwardRefExoticComponent<TableBodyProps<any> & React.RefAttributes<HTMLTableSectionElement>>;
 export interface RowProps<T> extends Omit<AriaRowProps<T>, 'style'> {

package/dist/src/components/Table/Table.styles.d.ts

@@ -15,6 +15,12 @@ export declare const styles: Readonly<{
         readonly borderBottomStyle: stylex.StyleXClassNameFor<"borderBottomStyle", "solid">;
         readonly borderBottomColor: stylex.StyleXClassNameFor<"borderBottomColor", string>;
     }>;
+    readonly headerSticky: Readonly<{
+        readonly position: stylex.StyleXClassNameFor<"position", "sticky">;
+        readonly top: stylex.StyleXClassNameFor<"top", 0>;
+        readonly zIndex: stylex.StyleXClassNameFor<"zIndex", string>;
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
+    }>;
     readonly column: Readonly<{
         readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", string>;
         readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
@@ -32,6 +38,32 @@ export declare const styles: Readonly<{
             readonly outlineColor: stylex.StyleXVar<string>;
         }>;
     }>;
+    readonly columnSortable: Readonly<{
+        readonly cursor: stylex.StyleXClassNameFor<"cursor", "pointer">;
+        readonly userSelect: stylex.StyleXClassNameFor<"userSelect", "none">;
+    }>;
+    readonly columnHovered: Readonly<{
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
+    }>;
+    readonly columnContent: Readonly<{
+        readonly display: stylex.StyleXClassNameFor<"display", "inline-flex">;
+        readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
+        readonly justifyContent: stylex.StyleXClassNameFor<"justifyContent", "space-between">;
+        readonly gap: stylex.StyleXClassNameFor<"gap", string>;
+        readonly width: stylex.StyleXClassNameFor<"width", "100%">;
+    }>;
+    readonly sortIndicator: Readonly<{
+        readonly display: stylex.StyleXClassNameFor<"display", "inline-flex">;
+        readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
+        readonly justifyContent: stylex.StyleXClassNameFor<"justifyContent", "center">;
+        readonly flexShrink: stylex.StyleXClassNameFor<"flexShrink", 0>;
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+        readonly transitionProperty: stylex.StyleXClassNameFor<"transitionProperty", "color, transform">;
+        readonly transitionDuration: stylex.StyleXClassNameFor<"transitionDuration", "0.15s">;
+    }>;
+    readonly sortIndicatorActive: Readonly<{
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+    }>;
     readonly body: Readonly<{
         readonly outline: stylex.StyleXClassNameFor<"outline", "none">;
     }>;
@@ -74,4 +106,26 @@ export declare const styles: Readonly<{
             readonly outlineColor: stylex.StyleXVar<string>;
         }>;
     }>;
+    readonly emptyState: Readonly<{
+        readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+        readonly flexDirection: stylex.StyleXClassNameFor<"flexDirection", "column">;
+        readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
+        readonly justifyContent: stylex.StyleXClassNameFor<"justifyContent", "center">;
+        readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", string>;
+        readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
+        readonly textAlign: stylex.StyleXClassNameFor<"textAlign", "center">;
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+        readonly width: stylex.StyleXClassNameFor<"width", "100%">;
+    }>;
+    readonly loadingState: Readonly<{
+        readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+        readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
+        readonly justifyContent: stylex.StyleXClassNameFor<"justifyContent", "center">;
+        readonly gap: stylex.StyleXClassNameFor<"gap", string>;
+        readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", string>;
+        readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
+        readonly textAlign: stylex.StyleXClassNameFor<"textAlign", "center">;
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+        readonly width: stylex.StyleXClassNameFor<"width", "100%">;
+    }>;
 }>;

package/dist/src/index.d.ts

@@ -1,14 +1,14 @@
-export declare const version = "2026.08.21";
+export declare const version = "2026.08.22";
 export { Alert } from './components/Alert';
 export type { AlertProps, AlertVariant } from './components/Alert/Alert';
 export { AlertDialog, AlertDialogBody, AlertDialogFooter, AlertDialogHeader, } from './components/AlertDialog';
 export type { AlertDialogBodyProps, AlertDialogFooterProps, AlertDialogHeaderProps, AlertDialogProps, } from './components/AlertDialog/AlertDialog';
 export type { AreaChartProps } from './components/AreaChart';
 export { AreaChart } from './components/AreaChart';
-export { Avatar } from './components/Avatar';
-export type { AvatarProps } from './components/Avatar/Avatar';
+export type { AvatarGroupContextValue, AvatarGroupProps, AvatarProps, AvatarShape, AvatarSize, AvatarStatus, AvatarStatusPosition, } from './components/Avatar';
+export { Avatar, AvatarGroup, AvatarGroupContext } from './components/Avatar';
 export { Badge } from './components/Badge';
-export type { BadgeProps, BadgeVariant } from './components/Badge/Badge';
+export type { BadgeProps, BadgeSize, BadgeVariant, } from './components/Badge/Badge';
 export type { BarChartProps } from './components/BarChart';
 export { BarChart } from './components/BarChart';
 export type { BreadcrumbItemProps, BreadcrumbsProps, } from './components/Breadcrumbs';
@@ -17,6 +17,8 @@ export { Button } from './components/Button';
 export type { ButtonProps } from './components/Button/Button';
 export { ButtonGroup } from './components/ButtonGroup';
 export type { ButtonGroupProps } from './components/ButtonGroup/ButtonGroup';
+export type { CalendarCellProps, CalendarGridProps, CalendarProps, RangeCalendarProps, } from './components/Calendar';
+export { Calendar, CalendarCell, CalendarGrid, RangeCalendar, } from './components/Calendar';
 export type { CardBodyProps, CardFooterProps, CardHeaderProps, CardProps, CardVariant, Elevation, } from './components/Card';
 export { Card, CardBody, CardFooter, CardHeader } from './components/Card';
 export type { ChartContainerProps, LegendItem, } from './components/ChartContainer';
@@ -27,12 +29,20 @@ export { CheckboxGroup } from './components/CheckboxGroup';
 export type { CheckboxGroupProps } from './components/CheckboxGroup/CheckboxGroup';
 export { ComboBox, ComboBoxItem, ComboBoxSection } from './components/ComboBox';
 export type { ComboBoxItemProps, ComboBoxProps, ComboBoxSectionProps, } from './components/ComboBox/ComboBox';
+export type { CommandPaletteEmptyProps, CommandPaletteFooterProps, CommandPaletteInputProps, CommandPaletteItemProps, CommandPaletteListProps, CommandPaletteProps, CommandPaletteSectionProps, UseCommandPaletteOptions, } from './components/CommandPalette';
+export { CommandPalette, CommandPaletteEmpty, CommandPaletteFooter, CommandPaletteInput, CommandPaletteItem, CommandPaletteList, CommandPaletteSection, useCommandPalette, useCommandPaletteContext, } from './components/CommandPalette';
+export type { DateFieldProps, DateInputProps, DateSegmentProps, } from './components/DateField';
+export { DateField, DateInput, DateSegment, } from './components/DateField';
+export type { DatePickerProps, DateRangePickerProps, } from './components/DatePicker';
+export { DatePicker, DateRangePicker } from './components/DatePicker';
 export { Description } from './components/Description';
 export type { DescriptionProps } from './components/Description/Description';
 export type { DoughnutChartProps } from './components/DoughnutChart';
 export { DoughnutChart } from './components/DoughnutChart';
 export type { DrawerBodyProps, DrawerCloseButtonProps, DrawerDialogProps, DrawerFooterProps, DrawerHeaderProps, DrawerOverlayProps, DrawerPlacement, DrawerProps, DrawerSize, DrawerTitleProps, } from './components/Drawer';
 export { Drawer, DrawerBody, DrawerCloseButton, DrawerDialog, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerTitle, } from './components/Drawer';
+export type { EmptyStateActionsProps, EmptyStateAlign, EmptyStateDescriptionProps, EmptyStateIconProps, EmptyStateProps, EmptyStateSize, EmptyStateTitleProps, EmptyStateVariant, } from './components/EmptyState';
+export { EmptyState, EmptyStateActions, EmptyStateDescription, EmptyStateIcon, EmptyStateTitle, } from './components/EmptyState';
 export { ErrorMessage } from './components/ErrorMessage';
 export type { ErrorMessageProps } from './components/ErrorMessage/ErrorMessage';
 export { FieldError } from './components/FieldError';
@@ -55,10 +65,14 @@ export { Modal, ModalBody, ModalDialog, ModalFooter, ModalHeader, ModalOverlay,
 export type { ModalBodyProps, ModalDialogProps, ModalFooterProps, ModalHeaderProps, ModalOverlayProps, ModalProps, } from './components/Modal/Modal';
 export { NumberField } from './components/NumberField';
 export type { NumberFieldProps } from './components/NumberField/NumberField';
+export type { PaginationContentProps, PaginationEllipsisProps, PaginationItemProps, PaginationLinkProps, PaginationNextProps, PaginationPageSizeProps, PaginationPreviousProps, PaginationProps, PaginationShape, PaginationSize, PaginationSummaryProps, PaginationVariant, } from './components/Pagination';
+export { generatePagination, Pagination, PaginationContent, PaginationEllipsis, PaginationFirst, PaginationItem, PaginationLast, PaginationLink, PaginationNext, PaginationPageSize, PaginationPrevious, PaginationSummary, } from './components/Pagination';
 export type { PercentageBarProps, PercentageCircleProps, } from './components/Percentage';
 export { PercentageBar, PercentageCircle } from './components/Percentage';
 export { Popover, PopoverDialog, PopoverTrigger } from './components/Popover';
 export type { PopoverDialogProps, PopoverProps, } from './components/Popover/Popover';
+export type { ProgressBarProps, ProgressBarShape, ProgressBarSize, ProgressBarVariant, } from './components/ProgressBar';
+export { ProgressBar } from './components/ProgressBar';
 export { Radio, RadioGroup } from './components/RadioGroup';
 export type { RadioGroupProps, RadioProps, } from './components/RadioGroup/RadioGroup';
 export { SearchField } from './components/SearchField';
@@ -70,11 +84,11 @@ export type { SeparatorProps } from './components/Separator/Separator';
 export type { SidebarAsideProps, SidebarDividerProps, SidebarFooterProps, SidebarGroupProps, SidebarHeaderProps, SidebarItemProps, SidebarMainProps, SidebarProps, } from './components/Sidebar';
 export { Sidebar, SidebarAside, SidebarDivider, SidebarFooter, SidebarGroup, SidebarHeader, SidebarItem, SidebarMain, } from './components/Sidebar';
 export { Skeleton } from './components/Skeleton';
-export type { SkeletonProps } from './components/Skeleton/Skeleton';
+export type { SkeletonProps, SkeletonShape, SkeletonVariant, } from './components/Skeleton/Skeleton';
 export { Slider, SliderThumb, SliderTrack } from './components/Slider';
 export type { SliderProps, SliderThumbProps, SliderTrackProps, } from './components/Slider/Slider';
 export { Spinner } from './components/Spinner';
-export type { SpinnerProps } from './components/Spinner/Spinner';
+export type { SpinnerProps, SpinnerSize, } from './components/Spinner/Spinner';
 export type { StatProps } from './components/Stat';
 export { Stat } from './components/Stat';
 export { Switch } from './components/Switch';

package/dist/tokens.stylex.js

@@ -1,126 +1,138 @@
-"use client";
-import "@stylexjs/stylex";
-//#region src/tokens/tokens.stylex.ts
-var e = {
-	colorNeutral50: "var(--x1ox3f4o)",
-	colorNeutral100: "var(--x1oziaxx)",
-	colorNeutral200: "var(--xekkakv)",
-	colorNeutral300: "var(--x4npmm6)",
-	colorNeutral400: "var(--x6l5ye8)",
-	colorNeutral500: "var(--x1s9rx7n)",
-	colorNeutral600: "var(--x7rwqrp)",
-	colorNeutral700: "var(--x1ol9w3z)",
-	colorNeutral800: "var(--xaubso4)",
-	colorNeutral900: "var(--x21z8aa)",
-	colorPrimary50: "var(--x1l7m7gb)",
-	colorPrimary100: "var(--xvy7zpp)",
-	colorPrimary200: "var(--x189jvvz)",
-	colorPrimary300: "var(--x1smr4m2)",
-	colorPrimary400: "var(--x1p3wd7v)",
-	colorPrimary500: "var(--x11vz4nw)",
-	colorPrimary600: "var(--x19wncxt)",
-	colorPrimary700: "var(--xms5kwx)",
-	colorPrimary800: "var(--x1f1ph2q)",
-	colorPrimary900: "var(--x27tw8h)",
-	colorError300: "var(--xywa26s)",
-	colorError400: "var(--x1ttemnr)",
-	colorError500: "var(--xgm7y0w)",
-	colorError600: "var(--x14tkvwa)",
-	colorError700: "var(--xle5duh)",
-	colorWarning300: "var(--xxkj1oe)",
-	colorWarning400: "var(--xvbe47b)",
-	colorWarning500: "var(--x9boa8o)",
-	colorWarning600: "var(--x1foz1o3)",
-	colorWarning700: "var(--x1i80a2t)",
-	colorSuccess300: "var(--x1eg0uv7)",
-	colorSuccess400: "var(--x1xkz733)",
-	colorSuccess500: "var(--xo79180)",
-	colorSuccess600: "var(--xftmch4)",
-	colorSuccess700: "var(--x6beaur)",
-	colorBg: "var(--x1poa4dm)",
-	colorBgSubtle: "var(--xg2wbmg)",
-	colorBgElevated: "var(--x1qnu6yg)",
-	colorFg: "var(--x1jfchzy)",
-	colorFgSubtle: "var(--xaffrw6)",
-	colorFgOnPrimary: "var(--x16n9mb9)",
-	colorBorder: "var(--x1t7g4u6)",
-	colorBorderSubtle: "var(--xrlp4ei)",
-	colorBorderFocus: "var(--x79fgis)",
-	colorBgGlass: "var(--x7we1u4)",
-	colorBorderGlass: "var(--x8ovk6j)",
-	colorShadow: "var(--x1qvbbfx)",
-	colorOverlay: "var(--x2r2dxw)",
-	colorAlertBgInfo: "var(--x1yncxg9)",
-	colorAlertBorderInfo: "var(--xgvswlc)",
-	colorAlertHoverInfo: "var(--xdv3703)",
-	colorAlertActiveInfo: "var(--x1b4xit2)",
-	colorAlertBgAccent: "var(--xfh678y)",
-	colorAlertBorderAccent: "var(--xtwqyzw)",
-	colorAlertHoverAccent: "var(--x2hivg9)",
-	colorAlertActiveAccent: "var(--x1wzp30q)",
-	colorAlertBgSuccess: "var(--xvq252x)",
-	colorAlertBorderSuccess: "var(--x1iepgx6)",
-	colorAlertHoverSuccess: "var(--x1gcqxgm)",
-	colorAlertActiveSuccess: "var(--x1epzsal)",
-	colorAlertBgWarning: "var(--xg2n39v)",
-	colorAlertBorderWarning: "var(--x1n16z78)",
-	colorAlertHoverWarning: "var(--xq3y2id)",
-	colorAlertActiveWarning: "var(--xf8i1ro)",
-	colorAlertBgError: "var(--x1u4wyvx)",
-	colorAlertBorderError: "var(--xwq48n1)",
-	colorAlertHoverError: "var(--x1cujurv)",
-	colorAlertActiveError: "var(--x3091pa)",
-	fontSizeXs: "var(--xpanzj7)",
-	fontSizeSm: "var(--xz9ra21)",
-	fontSizeMd: "var(--x19jnf71)",
-	fontSizeLg: "var(--x16hg6gx)",
-	fontSizeXl: "var(--xkl0paq)",
-	fontSizeXxl: "var(--x18r5va)",
-	fontSize3xl: "var(--x1cwqm9m)",
-	fontSize4xl: "var(--x14r6drk)",
-	lineHeightXs: "var(--x1vx0k0f)",
-	lineHeightSm: "var(--x186dp4y)",
-	lineHeightMd: "var(--x1bapz3m)",
-	lineHeightLg: "var(--x107177a)",
-	lineHeightXl: "var(--x1x2zchm)",
-	lineHeightXxl: "var(--x1t135xi)",
-	lineHeight3xl: "var(--xqmssti)",
-	lineHeight4xl: "var(--x1458rh6)",
-	fontWeightNormal: "var(--x1oo7w7q)",
-	fontWeightMedium: "var(--x1i7new4)",
-	fontWeightSemibold: "var(--xrtlgup)",
-	fontWeightBold: "var(--x1jugmoa)",
-	fontFamilyBase: "var(--xb7uvbd)",
-	spacing1: "var(--x1jforli)",
-	spacing2: "var(--x9epbqz)",
-	spacing3: "var(--x1fim08e)",
-	spacing4: "var(--x1djehx3)",
-	spacing5: "var(--xpmkuee)",
-	spacing6: "var(--x1xsmz2k)",
-	spacing7: "var(--x1aetgvy)",
-	spacing8: "var(--x3461u0)",
-	radiusNone: "var(--x10dfn0a)",
-	radiusSm: "var(--xcxkm4p)",
-	radiusMd: "var(--x11qts0k)",
-	radiusLg: "var(--x8ikvy7)",
-	radiusFull: "var(--x69bofi)",
-	shadowSm: "var(--x1nbpjwp)",
-	shadowMd: "var(--xi6zbv0)",
-	shadowLg: "var(--xckknmd)",
-	zIndexBase: "var(--x1x05ep0)",
-	zIndexDropdown: "var(--x1r4igc)",
-	zIndexModal: "var(--xjyalnt)",
-	zIndexTooltip: "var(--x1yamzkk)",
-	zIndexToast: "var(--xd3kluz)",
-	colorChart1: "var(--x1sjgkb4)",
-	colorChart2: "var(--xndyysw)",
-	colorChart3: "var(--x97jlmp)",
-	colorChart4: "var(--x1te5qoh)",
-	colorChart5: "var(--x174xad0)",
-	colorChart6: "var(--xljzat3)",
-	colorChart7: "var(--x76stw)",
-	colorChart8: "var(--x2x0qih)",
-	__varGroupHash__: "x1x2wves"
+'use client';
+export const tokens = {
+    // ── Color palette — oklch(L C H) ──────────────────────────────────
+    // Neutral — zero chroma (C=0), hue irrelevant
+    colorNeutral50: 'light-dark(oklch(0.98 0 0),   oklch(0.14 0 0))',
+    colorNeutral100: 'light-dark(oklch(0.96 0 0),   oklch(0.18 0 0))',
+    colorNeutral200: 'light-dark(oklch(0.92 0 0),   oklch(0.24 0 0))',
+    colorNeutral300: 'light-dark(oklch(0.84 0 0),   oklch(0.32 0 0))',
+    colorNeutral400: 'light-dark(oklch(0.70 0 0),   oklch(0.45 0 0))',
+    colorNeutral500: 'light-dark(oklch(0.55 0 0),   oklch(0.55 0 0))',
+    colorNeutral600: 'light-dark(oklch(0.42 0 0),   oklch(0.68 0 0))',
+    colorNeutral700: 'light-dark(oklch(0.32 0 0),   oklch(0.78 0 0))',
+    colorNeutral800: 'light-dark(oklch(0.22 0 0),   oklch(0.88 0 0))',
+    colorNeutral900: 'light-dark(oklch(0.14 0 0),   oklch(0.96 0 0))',
+    // Primary — dynamic hue & chroma
+    colorPrimary50: 'light-dark(oklch(0.96 calc(0.025 * var(--brand-chroma-multiplier, 1)) var(--brand-hue, 250)), oklch(0.22 calc(0.050 * var(--brand-chroma-multiplier, 1)) var(--brand-hue, 250)))',
+    colorPrimary100: 'light-dark(oklch(0.92 calc(0.050 * var(--brand-chroma-multiplier, 1)) var(--brand-hue, 250)), oklch(0.28 calc(0.080 * var(--brand-chroma-multiplier, 1)) var(--brand-hue, 250)))',
+    colorPrimary200: 'light-dark(oklch(0.85 calc(0.090 * var(--brand-chroma-multiplier, 1)) var(--brand-hue, 250)), oklch(0.36 calc(0.120 * var(--brand-chroma-multiplier, 1)) var(--brand-hue, 250)))',
+    colorPrimary300: 'light-dark(oklch(0.77 calc(0.140 * var(--brand-chroma-multiplier, 1)) var(--brand-hue, 250)), oklch(0.45 calc(0.160 * var(--brand-chroma-multiplier, 1)) var(--brand-hue, 250)))',
+    colorPrimary400: 'light-dark(oklch(0.66 calc(0.190 * var(--brand-chroma-multiplier, 1)) var(--brand-hue, 250)), oklch(0.56 calc(0.200 * var(--brand-chroma-multiplier, 1)) var(--brand-hue, 250)))',
+    colorPrimary500: 'light-dark(oklch(0.55 calc(0.240 * var(--brand-chroma-multiplier, 1)) var(--brand-hue, 250)), oklch(0.66 calc(0.220 * var(--brand-chroma-multiplier, 1)) var(--brand-hue, 250)))',
+    colorPrimary600: 'light-dark(oklch(0.46 calc(0.220 * var(--brand-chroma-multiplier, 1)) var(--brand-hue, 250)), oklch(0.75 calc(0.190 * var(--brand-chroma-multiplier, 1)) var(--brand-hue, 250)))',
+    colorPrimary700: 'light-dark(oklch(0.38 calc(0.190 * var(--brand-chroma-multiplier, 1)) var(--brand-hue, 250)), oklch(0.83 calc(0.150 * var(--brand-chroma-multiplier, 1)) var(--brand-hue, 250)))',
+    colorPrimary800: 'light-dark(oklch(0.30 calc(0.150 * var(--brand-chroma-multiplier, 1)) var(--brand-hue, 250)), oklch(0.90 calc(0.090 * var(--brand-chroma-multiplier, 1)) var(--brand-hue, 250)))',
+    colorPrimary900: 'light-dark(oklch(0.22 calc(0.110 * var(--brand-chroma-multiplier, 1)) var(--brand-hue, 250)), oklch(0.95 calc(0.040 * var(--brand-chroma-multiplier, 1)) var(--brand-hue, 250)))',
+    // Error — red hue (H ≈ 27)
+    colorError300: 'light-dark(oklch(0.80 0.120 27), oklch(0.45 0.150 27))',
+    colorError400: 'light-dark(oklch(0.68 0.170 27), oklch(0.58 0.180 27))',
+    colorError500: 'light-dark(oklch(0.56 0.200 27), oklch(0.68 0.190 27))',
+    colorError600: 'light-dark(oklch(0.46 0.190 27), oklch(0.78 0.150 27))',
+    colorError700: 'light-dark(oklch(0.36 0.160 27), oklch(0.87 0.090 27))',
+    // Warning — yellow hue (H ≈ 85)
+    colorWarning300: 'light-dark(oklch(0.85 0.130 85), oklch(0.48 0.140 85))',
+    colorWarning400: 'light-dark(oklch(0.78 0.160 85), oklch(0.60 0.165 85))',
+    colorWarning500: 'light-dark(oklch(0.70 0.175 85), oklch(0.72 0.165 85))',
+    colorWarning600: 'light-dark(oklch(0.60 0.165 85), oklch(0.82 0.130 85))',
+    colorWarning700: 'light-dark(oklch(0.48 0.140 85), oklch(0.90 0.080 85))',
+    // Success — green hue (H ≈ 145)
+    colorSuccess300: 'light-dark(oklch(0.82 0.120 145), oklch(0.44 0.130 145))',
+    colorSuccess400: 'light-dark(oklch(0.72 0.155 145), oklch(0.56 0.160 145))',
+    colorSuccess500: 'light-dark(oklch(0.62 0.175 145), oklch(0.68 0.170 145))',
+    colorSuccess600: 'light-dark(oklch(0.52 0.165 145), oklch(0.78 0.135 145))',
+    colorSuccess700: 'light-dark(oklch(0.40 0.135 145), oklch(0.87 0.085 145))',
+    // ── Semantic surface / text aliases ───────────────────────────────
+    colorBg: 'light-dark(oklch(1 0 0),      oklch(0.12 0 0))',
+    colorBgSubtle: 'light-dark(oklch(0.97 0 0),   oklch(0.16 0 0))',
+    colorBgElevated: 'light-dark(oklch(1 0 0),      oklch(0.20 0 0))',
+    colorFg: 'light-dark(oklch(0.14 0 0),   oklch(0.96 0 0))',
+    colorFgSubtle: 'light-dark(oklch(0.42 0 0),   oklch(0.68 0 0))',
+    colorFgOnPrimary: 'light-dark(oklch(1 0 0),      oklch(0.10 0 0))',
+    colorBorder: 'light-dark(oklch(0.84 0 0),   oklch(0.28 0 0))',
+    colorBorderSubtle: 'light-dark(oklch(0.92 0 0),   oklch(0.22 0 0))',
+    colorBorderFocus: 'light-dark(oklch(0.55 calc(0.240 * var(--brand-chroma-multiplier, 1)) var(--brand-hue, 250)), oklch(0.66 calc(0.220 * var(--brand-chroma-multiplier, 1)) var(--brand-hue, 250)))',
+    colorBgGlass: 'light-dark(oklch(1 0 0 / 0.55), oklch(0.20 0 0 / 0.45))',
+    colorBorderGlass: 'light-dark(oklch(0 0 0 / 0.08), oklch(1 0 0 / 0.10))',
+    // Shadows use oklch with alpha (oklch L C H / alpha)
+    colorShadow: 'light-dark(oklch(0 0 0 / 0.10), oklch(0 0 0 / 0.40))',
+    colorOverlay: 'light-dark(oklch(0 0 0 / 0.40), oklch(0 0 0 / 0.60))',
+    // Alert/Status status variants
+    colorAlertBgInfo: 'light-dark(oklch(0.97 0 0), oklch(0.16 0 0))',
+    colorAlertBorderInfo: 'light-dark(oklch(0.92 0 0), oklch(0.22 0 0))',
+    colorAlertHoverInfo: 'light-dark(oklch(0.92 calc(0.01 * var(--brand-chroma-multiplier, 1)) var(--brand-hue, 250)), oklch(0.12 calc(0.01 * var(--brand-chroma-multiplier, 1)) var(--brand-hue, 250)))',
+    colorAlertActiveInfo: 'light-dark(oklch(0.88 calc(0.01 * var(--brand-chroma-multiplier, 1)) var(--brand-hue, 250)), oklch(0.08 calc(0.01 * var(--brand-chroma-multiplier, 1)) var(--brand-hue, 250)))',
+    colorAlertBgAccent: 'light-dark(oklch(0.97 calc(0.02 * var(--brand-chroma-multiplier, 1)) var(--brand-hue, 250)), oklch(0.19 calc(0.035 * var(--brand-chroma-multiplier, 1)) var(--brand-hue, 250)))',
+    colorAlertBorderAccent: 'light-dark(oklch(0.88 calc(0.04 * var(--brand-chroma-multiplier, 1)) var(--brand-hue, 250)), oklch(0.28 calc(0.06 * var(--brand-chroma-multiplier, 1)) var(--brand-hue, 250)))',
+    colorAlertHoverAccent: 'light-dark(oklch(0.92 calc(0.04 * var(--brand-chroma-multiplier, 1)) var(--brand-hue, 250)), oklch(0.14 calc(0.05 * var(--brand-chroma-multiplier, 1)) var(--brand-hue, 250)))',
+    colorAlertActiveAccent: 'light-dark(oklch(0.87 calc(0.06 * var(--brand-chroma-multiplier, 1)) var(--brand-hue, 250)), oklch(0.10 calc(0.06 * var(--brand-chroma-multiplier, 1)) var(--brand-hue, 250)))',
+    colorAlertBgSuccess: 'light-dark(oklch(0.97 0.02 145), oklch(0.19 0.035 145))',
+    colorAlertBorderSuccess: 'light-dark(oklch(0.88 0.04 145), oklch(0.28 0.06 145))',
+    colorAlertHoverSuccess: 'light-dark(oklch(0.92 0.04 145), oklch(0.14 0.05 145))',
+    colorAlertActiveSuccess: 'light-dark(oklch(0.87 0.06 145), oklch(0.10 0.06 145))',
+    colorAlertBgWarning: 'light-dark(oklch(0.98 0.02 85), oklch(0.19 0.035 85))',
+    colorAlertBorderWarning: 'light-dark(oklch(0.90 0.05 85), oklch(0.28 0.06 85))',
+    colorAlertHoverWarning: 'light-dark(oklch(0.93 0.04 85), oklch(0.14 0.05 85))',
+    colorAlertActiveWarning: 'light-dark(oklch(0.88 0.06 85), oklch(0.10 0.06 85))',
+    colorAlertBgError: 'light-dark(oklch(0.97 0.02 27), oklch(0.19 0.035 27))',
+    colorAlertBorderError: 'light-dark(oklch(0.90 0.05 27), oklch(0.28 0.06 27))',
+    colorAlertHoverError: 'light-dark(oklch(0.92 0.04 27), oklch(0.14 0.05 27))',
+    colorAlertActiveError: 'light-dark(oklch(0.87 0.06 27), oklch(0.10 0.06 27))',
+    // ── Typography ────────────────────────────────────────────────────
+    fontSizeXs: 'calc(0.75rem * var(--brand-font-scale, 1))', // 12px
+    fontSizeSm: 'calc(0.875rem * var(--brand-font-scale, 1))', // 14px
+    fontSizeMd: 'calc(1rem * var(--brand-font-scale, 1))', // 16px
+    fontSizeLg: 'calc(1.125rem * var(--brand-font-scale, 1))', // 18px
+    fontSizeXl: 'calc(1.25rem * var(--brand-font-scale, 1))', // 20px
+    fontSizeXxl: 'calc(1.5rem * var(--brand-font-scale, 1))', // 24px
+    fontSize3xl: 'calc(1.875rem * var(--brand-font-scale, 1))', // 30px
+    fontSize4xl: 'calc(2.25rem * var(--brand-font-scale, 1))', // 36px
+    lineHeightXs: 'calc(1rem * var(--brand-font-scale, 1))',
+    lineHeightSm: 'calc(1.25rem * var(--brand-font-scale, 1))',
+    lineHeightMd: 'calc(1.5rem * var(--brand-font-scale, 1))',
+    lineHeightLg: 'calc(1.75rem * var(--brand-font-scale, 1))',
+    lineHeightXl: 'calc(1.75rem * var(--brand-font-scale, 1))',
+    lineHeightXxl: 'calc(2rem * var(--brand-font-scale, 1))',
+    lineHeight3xl: 'calc(2.25rem * var(--brand-font-scale, 1))',
+    lineHeight4xl: 'calc(2.5rem * var(--brand-font-scale, 1))',
+    fontWeightNormal: '400',
+    fontWeightMedium: '500',
+    fontWeightSemibold: '600',
+    fontWeightBold: '700',
+    fontFamilyBase: "'Google Sans', 'Inter', system-ui, sans-serif",
+    // ── Spacing (8 steps, 4px base) ───────────────────────────────────
+    spacing1: 'calc(0.25rem * var(--brand-density-factor, 1))', // 4px * density
+    spacing2: 'calc(0.5rem * var(--brand-density-factor, 1))', // 8px * density
+    spacing3: 'calc(0.75rem * var(--brand-density-factor, 1))', // 12px * density
+    spacing4: 'calc(1rem * var(--brand-density-factor, 1))', // 16px * density
+    spacing5: 'calc(1.25rem * var(--brand-density-factor, 1))', // 20px * density
+    spacing6: 'calc(1.5rem * var(--brand-density-factor, 1))', // 24px * density
+    spacing7: 'calc(1.75rem * var(--brand-density-factor, 1))', // 28px * density
+    spacing8: 'calc(2rem * var(--brand-density-factor, 1))', // 32px * density
+    // ── Border radius ─────────────────────────────────────────────────
+    radiusNone: '0',
+    radiusSm: 'calc(0.375rem * var(--brand-radius-factor, 1))',
+    radiusMd: 'calc(0.75rem * var(--brand-radius-factor, 1))',
+    radiusLg: 'calc(1.25rem * var(--brand-radius-factor, 1))',
+    radiusFull: '9999px',
+    // ── Shadows — use colorShadow token for the shadow color ──────────
+    shadowSm: '0 1px 2px 0 var(--colorShadow)',
+    shadowMd: '0 4px 6px -1px var(--colorShadow), 0 2px 4px -2px var(--colorShadow)',
+    shadowLg: '0 10px 15px -3px var(--colorShadow), 0 4px 6px -4px var(--colorShadow)',
+    // ── Z-index ───────────────────────────────────────────────────────
+    zIndexBase: '0',
+    zIndexDropdown: '1000',
+    zIndexModal: '1300',
+    zIndexTooltip: '1500',
+    zIndexToast: '1700',
+    // ── Chart Colors (8 steps for light/dark responsive graphs) ───────
+    colorChart1: 'light-dark(oklch(0.60 0.18 250), oklch(0.65 0.16 250))', // Blue
+    colorChart2: 'light-dark(oklch(0.75 0.15 75),  oklch(0.75 0.14 75))', // Yellow / Gold
+    colorChart3: 'light-dark(oklch(0.65 0.18 5),   oklch(0.68 0.16 5))', // Rose / Pink
+    colorChart4: 'light-dark(oklch(0.62 0.20 300), oklch(0.65 0.18 300))', // Purple / Violet
+    colorChart5: 'light-dark(oklch(0.68 0.16 195), oklch(0.70 0.14 195))', // Teal / Cyan
+    colorChart6: 'light-dark(oklch(0.58 0.16 45),  oklch(0.62 0.15 45))', // Orange / Rust
+    colorChart7: 'light-dark(oklch(0.64 0.17 145), oklch(0.68 0.15 145))', // Green
+    colorChart8: 'light-dark(oklch(0.60 0 0),      oklch(0.65 0 0))', // Gray / Neutral
 };
-//#endregion
-export { e as tokens };
+export const rawTokens = tokens;
+export const tokenValues = tokens;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moul-dev/ui",
-  "version": "2026.08.21",
+  "version": "2026.08.22",
   "description": "Accessible, zero-runtime React component library built on React Aria and StyleX",
   "license": "MIT",
   "type": "module",