@moul-dev/ui 2026.8.20 → 2026.8.22

package/dist/src/components/Skeleton/index.d.ts

@@ -1,2 +1,2 @@
-export type { SkeletonProps } from './Skeleton';
+export type { SkeletonProps, SkeletonShape, SkeletonVariant } from './Skeleton';
 export { Skeleton } from './Skeleton';

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

@@ -1,6 +1,8 @@
 import { StyleXStyles } from '@stylexjs/stylex';
 import * as React from 'react';
+export type SpinnerSize = 'sm' | 'md' | 'lg' | 'xl';
 export interface SpinnerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'style'> {
+    size?: SpinnerSize;
     style?: StyleXStyles;
     className?: string;
     'aria-label'?: string;

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

@@ -7,14 +7,32 @@ export declare const styles: Readonly<{
         readonly borderColor: stylex.StyleXClassNameFor<"borderColor", string>;
         readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
         readonly borderStyle: stylex.StyleXClassNameFor<"borderStyle", "solid">;
-        readonly borderWidth: stylex.StyleXClassNameFor<"borderWidth", string>;
         readonly animationDuration: stylex.StyleXClassNameFor<"animationDuration", "0.8s">;
         readonly animationIterationCount: stylex.StyleXClassNameFor<"animationIterationCount", "infinite">;
         readonly animationName: stylex.StyleXClassNameFor<"animationName", string>;
         readonly animationTimingFunction: stylex.StyleXClassNameFor<"animationTimingFunction", "linear">;
         readonly borderBlockStartColor: stylex.StyleXClassNameFor<"borderBlockStartColor", string>;
         readonly display: stylex.StyleXClassNameFor<"display", "inline-block">;
+        readonly boxSizing: stylex.StyleXClassNameFor<"boxSizing", "border-box">;
+    }>;
+    readonly sm: Readonly<{
+        readonly height: stylex.StyleXClassNameFor<"height", string>;
+        readonly width: stylex.StyleXClassNameFor<"width", string>;
+        readonly borderWidth: stylex.StyleXClassNameFor<"borderWidth", "2px">;
+    }>;
+    readonly md: Readonly<{
+        readonly height: stylex.StyleXClassNameFor<"height", string>;
+        readonly width: stylex.StyleXClassNameFor<"width", string>;
+        readonly borderWidth: stylex.StyleXClassNameFor<"borderWidth", string>;
+    }>;
+    readonly lg: Readonly<{
         readonly height: stylex.StyleXClassNameFor<"height", string>;
         readonly width: stylex.StyleXClassNameFor<"width", string>;
+        readonly borderWidth: stylex.StyleXClassNameFor<"borderWidth", string>;
+    }>;
+    readonly xl: Readonly<{
+        readonly height: stylex.StyleXClassNameFor<"height", string>;
+        readonly width: stylex.StyleXClassNameFor<"width", string>;
+        readonly borderWidth: stylex.StyleXClassNameFor<"borderWidth", string>;
     }>;
 }>;

package/dist/src/components/Spinner/index.d.ts

@@ -1,2 +1,2 @@
-export type { SpinnerProps } from './Spinner';
+export type { SpinnerProps, SpinnerSize } from './Spinner';
 export { Spinner } from './Spinner';

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/components/TextArea/TextArea.styles.d.ts

@@ -16,6 +16,8 @@ export declare const styles: Readonly<{
         readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
         readonly borderWidth: stylex.StyleXClassNameFor<"borderWidth", "1px">;
         readonly borderStyle: stylex.StyleXClassNameFor<"borderStyle", "solid">;
+        readonly borderColor: stylex.StyleXClassNameFor<"borderColor", string>;
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
         readonly color: stylex.StyleXClassNameFor<"color", string>;
         readonly fontFamily: stylex.StyleXClassNameFor<"fontFamily", string>;
         readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;

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

@@ -11,6 +11,8 @@ export declare const styles: Readonly<{
         readonly width: stylex.StyleXClassNameFor<"width", "100%">;
         readonly borderWidth: stylex.StyleXClassNameFor<"borderWidth", "1px">;
         readonly borderStyle: stylex.StyleXClassNameFor<"borderStyle", "solid">;
+        readonly borderColor: stylex.StyleXClassNameFor<"borderColor", string>;
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
         readonly color: stylex.StyleXClassNameFor<"color", string>;
         readonly fontFamily: stylex.StyleXClassNameFor<"fontFamily", string>;
         readonly outline: stylex.StyleXClassNameFor<"outline", "none">;

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

@@ -7,6 +7,7 @@ export declare const styles: Readonly<{
         readonly gap: stylex.StyleXClassNameFor<"gap", string>;
         readonly fontWeight: stylex.StyleXClassNameFor<"fontWeight", string>;
         readonly cursor: stylex.StyleXClassNameFor<"cursor", "pointer">;
+        readonly boxSizing: stylex.StyleXClassNameFor<"boxSizing", "border-box">;
         readonly transitionProperty: stylex.StyleXClassNameFor<"transitionProperty", "background-color, border-color, color, transform">;
         readonly transitionDuration: stylex.StyleXClassNameFor<"transitionDuration", "0.15s">;
         readonly transitionTimingFunction: stylex.StyleXClassNameFor<"transitionTimingFunction", "ease-in-out">;
@@ -27,21 +28,24 @@ export declare const styles: Readonly<{
         }>;
     }>;
     readonly sm: Readonly<{
-        readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", string>;
+        readonly height: stylex.StyleXClassNameFor<"height", `calc(${stylex.StyleXVar<string>} * 2 + ${stylex.StyleXVar<string>})`>;
+        readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", 0>;
         readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
         readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
         readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
         readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", string>;
     }>;
     readonly md: Readonly<{
-        readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", string>;
+        readonly height: stylex.StyleXClassNameFor<"height", `calc(${stylex.StyleXVar<string>} * 2 + ${stylex.StyleXVar<string>})`>;
+        readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", 0>;
         readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
         readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
         readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
         readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", string>;
     }>;
     readonly lg: Readonly<{
-        readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", string>;
+        readonly height: stylex.StyleXClassNameFor<"height", `calc(${stylex.StyleXVar<string>} * 2 + ${stylex.StyleXVar<string>})`>;
+        readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", 0>;
         readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
         readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
         readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
@@ -210,15 +214,18 @@ export declare const styles: Readonly<{
         readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
     }>;
     readonly iconSm: Readonly<{
-        readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
-        readonly aspectRatio: stylex.StyleXClassNameFor<"aspectRatio", "1/1">;
+        readonly width: stylex.StyleXClassNameFor<"width", `calc(${stylex.StyleXVar<string>} * 2 + ${stylex.StyleXVar<string>})`>;
+        readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", 0>;
+        readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", 0>;
     }>;
     readonly iconMd: Readonly<{
-        readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
-        readonly aspectRatio: stylex.StyleXClassNameFor<"aspectRatio", "1/1">;
+        readonly width: stylex.StyleXClassNameFor<"width", `calc(${stylex.StyleXVar<string>} * 2 + ${stylex.StyleXVar<string>})`>;
+        readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", 0>;
+        readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", 0>;
     }>;
     readonly iconLg: Readonly<{
-        readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
-        readonly aspectRatio: stylex.StyleXClassNameFor<"aspectRatio", "1/1">;
+        readonly width: stylex.StyleXClassNameFor<"width", `calc(${stylex.StyleXVar<string>} * 2 + ${stylex.StyleXVar<string>})`>;
+        readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", 0>;
+        readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", 0>;
     }>;
 }>;

package/dist/src/index.d.ts

@@ -1,14 +1,14 @@
-export declare const version = "2026.08.20";
+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';
@@ -103,4 +117,5 @@ export { Typography, TypographyHeading, TypographyLabel, TypographyParagraph, Ty
 export type { HeadingProps, ParagraphProps, SpanProps, TypographyLabelProps, TypographyProps, TypographyTag, } from './components/Typography/Typography';
 export type { ThemeProviderProps } from './theme/ThemeProvider';
 export { ThemeProvider } from './theme/ThemeProvider';
+export type { Tokens } from './tokens/tokens.stylex';
 export { tokens } from './tokens/tokens.stylex';

package/dist/src/tokens/tokens.stylex.d.ts

@@ -119,3 +119,4 @@ export declare const tokens: stylex.VarGroup<Readonly<{
     colorChart7: string;
     colorChart8: string;
 }>, symbol>;
+export type Tokens = typeof tokens;

package/dist/tokens.stylex.js

@@ -0,0 +1,138 @@
+'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
+};
+export const rawTokens = tokens;
+export const tokenValues = tokens;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moul-dev/ui",
-  "version": "2026.08.20",
+  "version": "2026.08.22",
   "description": "Accessible, zero-runtime React component library built on React Aria and StyleX",
   "license": "MIT",
   "type": "module",
@@ -39,6 +39,14 @@
       "types": "./dist/src/index.d.ts",
       "import": "./dist/moul-ui.js"
     },
+    "./tokens": {
+      "types": "./dist/src/tokens/tokens.stylex.d.ts",
+      "import": "./dist/tokens.stylex.js"
+    },
+    "./tokens.stylex": {
+      "types": "./dist/src/tokens/tokens.stylex.d.ts",
+      "import": "./dist/tokens.stylex.js"
+    },
     "./style": {
       "style": "./dist/assets/stylex.css",
       "default": "./dist/assets/stylex.css"