@api7/ui-components 0.3.0 → 0.5.0

package/dist/index.d.ts

@@ -13,6 +13,7 @@ import { Alert, AlertDescription, AlertDescriptionProps, AlertProps, AlertTitle,
 import { Avatar, AvatarProps, AvatarSize } from "./components/avatar/avatar.js";
 import { Badge, BadgeColor, BadgeProps, badgeVariants } from "./components/badge/badge.js";
 import { Combobox, ComboboxChip, ComboboxChipProps, ComboboxChips, ComboboxChipsInput, ComboboxChipsInputProps, ComboboxChipsProps, ComboboxContent, ComboboxContentProps, ComboboxEmpty, ComboboxEmptyProps, ComboboxGroup, ComboboxGroupLabel, ComboboxGroupLabelProps, ComboboxGroupProps, ComboboxInput, ComboboxInputProps, ComboboxItem, ComboboxItemProps, ComboboxProps, ComboboxValue, ComboboxValueProps } from "./components/combobox/combobox.js";
+import { DescriptionList, DescriptionListItem, DescriptionListItemProps, DescriptionListLabel, DescriptionListLabelProps, DescriptionListProps, DescriptionListValue, DescriptionListValueProps, descriptionListVariants } from "./components/description-list/description-list.js";
 import { Empty, EmptyContent, EmptyContentProps, EmptyDescription, EmptyDescriptionProps, EmptyHeader, EmptyHeaderProps, EmptyMedia, EmptyMediaProps, EmptyProps, EmptyTitle, EmptyTitleProps, emptyMediaVariants } from "./components/empty/empty.js";
 import { Field, FieldDescription, FieldDescriptionProps, FieldError, FieldErrorProps, FieldLabel, FieldLabelProps, FieldProps, Fieldset, FieldsetLegend, FieldsetLegendProps, FieldsetProps } from "./components/field/field.js";
 import { Dialog, DialogBody, DialogBodyProps, DialogClose, DialogCloseProps, DialogContent, DialogContentProps, DialogDescription, DialogDescriptionProps, DialogFooter, DialogFooterProps, DialogHeader, DialogHeaderProps, DialogProps, DialogTitle, DialogTitleProps, DialogTrigger, DialogTriggerProps } from "./components/dialog/dialog.js";
@@ -22,11 +23,13 @@ import { Menu, MenuCheckboxItem, MenuCheckboxItemProps, MenuContent, MenuContent
 import { Pagination, PaginationProps, getPageItems } from "./components/pagination/pagination.js";
 import { Popover, PopoverClose, PopoverCloseProps, PopoverContent, PopoverContentProps, PopoverDescription, PopoverDescriptionProps, PopoverTitle, PopoverTitleProps, PopoverTrigger, PopoverTriggerProps } from "./components/popover/popover.js";
 import { RadioGroup, RadioGroupItem, RadioGroupItemProps, RadioGroupProps } from "./components/radio-group/radio-group.js";
+import { Progress, ProgressProps } from "./components/progress/progress.js";
 import { Separator, SeparatorProps } from "./components/separator/separator.js";
 import { Sidebar, SidebarGroup, SidebarGroupProps, SidebarItem, SidebarItemProps, SidebarProps } from "./components/sidebar/sidebar.js";
 import { Skeleton, SkeletonProps } from "./components/skeleton/skeleton.js";
+import { Spinner, SpinnerProps, spinnerVariants } from "./components/spinner/spinner.js";
 import { Table, TableBody, TableBodyProps, TableCaption, TableCaptionProps, TableCell, TableCellProps, TableHead, TableHeadProps, TableHeader, TableHeaderProps, TableProps, TableRow, TableRowProps } from "./components/table/table.js";
 import { Tabs, TabsContent, TabsContentProps, TabsList, TabsListProps, TabsProps, TabsTrigger, TabsTriggerProps } from "./components/tabs/tabs.js";
 import { ToastActionOptions, ToastOptions, ToastPromiseMessage, Toaster, ToasterProps, toast } from "./components/toast/toast.js";
 import { Tooltip, TooltipContent, TooltipContentProps, TooltipProvider, TooltipProviderProps, TooltipTrigger, TooltipTriggerProps } from "./components/tooltip/tooltip.js";
-export { Alert, AlertDescription, type AlertDescriptionProps, type AlertProps, AlertTitle, type AlertTitleProps, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeColor, type BadgeProps, Button, type ButtonProps, Calendar, type CalendarProps, Checkbox, type CheckboxProps, Combobox, ComboboxChip, type ComboboxChipProps, ComboboxChips, ComboboxChipsInput, type ComboboxChipsInputProps, type ComboboxChipsProps, ComboboxContent, type ComboboxContentProps, ComboboxEmpty, type ComboboxEmptyProps, ComboboxGroup, ComboboxGroupLabel, type ComboboxGroupLabelProps, type ComboboxGroupProps, ComboboxInput, type ComboboxInputProps, ComboboxItem, type ComboboxItemProps, type ComboboxProps, ComboboxValue, type ComboboxValueProps, ConfigProvider, type ConfigProviderProps, DatePicker, type DatePickerProps, type DateRange, DateRangePicker, type DateRangePickerProps, type DateRangePreset, Dialog, DialogBody, type DialogBodyProps, DialogClose, type DialogCloseProps, DialogContent, type DialogContentProps, DialogDescription, type DialogDescriptionProps, DialogFooter, type DialogFooterProps, DialogHeader, type DialogHeaderProps, type DialogProps, DialogTitle, type DialogTitleProps, DialogTrigger, type DialogTriggerProps, Drawer, DrawerBody, type DrawerBodyProps, DrawerClose, type DrawerCloseProps, DrawerContent, type DrawerContentProps, DrawerDescription, type DrawerDescriptionProps, DrawerFooter, type DrawerFooterProps, DrawerHeader, type DrawerHeaderProps, type DrawerProps, DrawerTitle, type DrawerTitleProps, DrawerTrigger, type DrawerTriggerProps, Empty, EmptyContent, type EmptyContentProps, EmptyDescription, type EmptyDescriptionProps, EmptyHeader, type EmptyHeaderProps, EmptyMedia, type EmptyMediaProps, type EmptyProps, EmptyTitle, type EmptyTitleProps, Field, FieldDescription, type FieldDescriptionProps, FieldError, type FieldErrorProps, FieldLabel, type FieldLabelProps, type FieldProps, Fieldset, FieldsetLegend, type FieldsetLegendProps, type FieldsetProps, Input, InputGroup, InputGroupAddon, type InputGroupAddonProps, type InputGroupProps, type InputProps, type Locale, Menu, MenuCheckboxItem, type MenuCheckboxItemProps, MenuContent, type MenuContentProps, MenuGroup, MenuGroupLabel, type MenuGroupLabelProps, type MenuGroupProps, MenuItem, type MenuItemProps, MenuRadioGroup, type MenuRadioGroupProps, MenuRadioItem, type MenuRadioItemProps, MenuSeparator, type MenuSeparatorProps, MenuSub, MenuSubContent, type MenuSubContentProps, MenuSubTrigger, type MenuSubTriggerProps, MenuTrigger, type MenuTriggerProps, type Messages, type MessagesOverride, NumberField, type NumberFieldProps, Pagination, type PaginationProps, Popover, PopoverClose, type PopoverCloseProps, PopoverContent, type PopoverContentProps, PopoverDescription, type PopoverDescriptionProps, PopoverTitle, type PopoverTitleProps, PopoverTrigger, type PopoverTriggerProps, RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps, Select, SelectContent, type SelectContentProps, SelectGroup, SelectGroupLabel, type SelectGroupLabelProps, type SelectGroupProps, SelectItem, type SelectItemProps, type SelectProps, SelectSeparator, type SelectSeparatorProps, SelectTrigger, type SelectTriggerProps, SelectValue, type SelectValueProps, Separator, type SeparatorProps, Sidebar, SidebarGroup, type SidebarGroupProps, SidebarItem, type SidebarItemProps, type SidebarProps, Skeleton, type SkeletonProps, Switch, type SwitchProps, Table, TableBody, type TableBodyProps, TableCaption, type TableCaptionProps, TableCell, type TableCellProps, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, type TableProps, TableRow, type TableRowProps, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, Textarea, type TextareaProps, type ToastActionOptions, type ToastOptions, type ToastPromiseMessage, Toaster, type ToasterProps, Tooltip, TooltipContent, type TooltipContentProps, TooltipProvider, type TooltipProviderProps, TooltipTrigger, type TooltipTriggerProps, alertVariants, badgeVariants, buttonVariants, emptyMediaVariants, getPageItems, toast, useLocale, useMessages };
+export { Alert, AlertDescription, type AlertDescriptionProps, type AlertProps, AlertTitle, type AlertTitleProps, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeColor, type BadgeProps, Button, type ButtonProps, Calendar, type CalendarProps, Checkbox, type CheckboxProps, Combobox, ComboboxChip, type ComboboxChipProps, ComboboxChips, ComboboxChipsInput, type ComboboxChipsInputProps, type ComboboxChipsProps, ComboboxContent, type ComboboxContentProps, ComboboxEmpty, type ComboboxEmptyProps, ComboboxGroup, ComboboxGroupLabel, type ComboboxGroupLabelProps, type ComboboxGroupProps, ComboboxInput, type ComboboxInputProps, ComboboxItem, type ComboboxItemProps, type ComboboxProps, ComboboxValue, type ComboboxValueProps, ConfigProvider, type ConfigProviderProps, DatePicker, type DatePickerProps, type DateRange, DateRangePicker, type DateRangePickerProps, type DateRangePreset, DescriptionList, DescriptionListItem, type DescriptionListItemProps, DescriptionListLabel, type DescriptionListLabelProps, type DescriptionListProps, DescriptionListValue, type DescriptionListValueProps, Dialog, DialogBody, type DialogBodyProps, DialogClose, type DialogCloseProps, DialogContent, type DialogContentProps, DialogDescription, type DialogDescriptionProps, DialogFooter, type DialogFooterProps, DialogHeader, type DialogHeaderProps, type DialogProps, DialogTitle, type DialogTitleProps, DialogTrigger, type DialogTriggerProps, Drawer, DrawerBody, type DrawerBodyProps, DrawerClose, type DrawerCloseProps, DrawerContent, type DrawerContentProps, DrawerDescription, type DrawerDescriptionProps, DrawerFooter, type DrawerFooterProps, DrawerHeader, type DrawerHeaderProps, type DrawerProps, DrawerTitle, type DrawerTitleProps, DrawerTrigger, type DrawerTriggerProps, Empty, EmptyContent, type EmptyContentProps, EmptyDescription, type EmptyDescriptionProps, EmptyHeader, type EmptyHeaderProps, EmptyMedia, type EmptyMediaProps, type EmptyProps, EmptyTitle, type EmptyTitleProps, Field, FieldDescription, type FieldDescriptionProps, FieldError, type FieldErrorProps, FieldLabel, type FieldLabelProps, type FieldProps, Fieldset, FieldsetLegend, type FieldsetLegendProps, type FieldsetProps, Input, InputGroup, InputGroupAddon, type InputGroupAddonProps, type InputGroupProps, type InputProps, type Locale, Menu, MenuCheckboxItem, type MenuCheckboxItemProps, MenuContent, type MenuContentProps, MenuGroup, MenuGroupLabel, type MenuGroupLabelProps, type MenuGroupProps, MenuItem, type MenuItemProps, MenuRadioGroup, type MenuRadioGroupProps, MenuRadioItem, type MenuRadioItemProps, MenuSeparator, type MenuSeparatorProps, MenuSub, MenuSubContent, type MenuSubContentProps, MenuSubTrigger, type MenuSubTriggerProps, MenuTrigger, type MenuTriggerProps, type Messages, type MessagesOverride, NumberField, type NumberFieldProps, Pagination, type PaginationProps, Popover, PopoverClose, type PopoverCloseProps, PopoverContent, type PopoverContentProps, PopoverDescription, type PopoverDescriptionProps, PopoverTitle, type PopoverTitleProps, PopoverTrigger, type PopoverTriggerProps, Progress, type ProgressProps, RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps, Select, SelectContent, type SelectContentProps, SelectGroup, SelectGroupLabel, type SelectGroupLabelProps, type SelectGroupProps, SelectItem, type SelectItemProps, type SelectProps, SelectSeparator, type SelectSeparatorProps, SelectTrigger, type SelectTriggerProps, SelectValue, type SelectValueProps, Separator, type SeparatorProps, Sidebar, SidebarGroup, type SidebarGroupProps, SidebarItem, type SidebarItemProps, type SidebarProps, Skeleton, type SkeletonProps, Spinner, type SpinnerProps, Switch, type SwitchProps, Table, TableBody, type TableBodyProps, TableCaption, type TableCaptionProps, TableCell, type TableCellProps, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, type TableProps, TableRow, type TableRowProps, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, Textarea, type TextareaProps, type ToastActionOptions, type ToastOptions, type ToastPromiseMessage, Toaster, type ToasterProps, Tooltip, TooltipContent, type TooltipContentProps, TooltipProvider, type TooltipProviderProps, TooltipTrigger, type TooltipTriggerProps, alertVariants, badgeVariants, buttonVariants, descriptionListVariants, emptyMediaVariants, getPageItems, spinnerVariants, toast, useLocale, useMessages };

package/dist/index.js

@@ -8,6 +8,7 @@ import { Checkbox } from "./components/checkbox/checkbox.js";
 import { Popover, PopoverClose, PopoverContent, PopoverDescription, PopoverTitle, PopoverTrigger } from "./components/popover/popover.js";
 import { DatePicker, DateRangePicker } from "./components/date-picker/date-picker.js";
 import { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxValue } from "./components/combobox/combobox.js";
+import { DescriptionList, DescriptionListItem, DescriptionListLabel, DescriptionListValue, descriptionListVariants } from "./components/description-list/description-list.js";
 import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, emptyMediaVariants } from "./components/empty/empty.js";
 import { Field, FieldDescription, FieldError, FieldLabel, Fieldset, FieldsetLegend } from "./components/field/field.js";
 import { Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "./components/dialog/dialog.js";
@@ -19,13 +20,15 @@ import { NumberField } from "./components/number-field/number-field.js";
 import { Select, SelectContent, SelectGroup, SelectGroupLabel, SelectItem, SelectSeparator, SelectTrigger, SelectValue } from "./components/select/select.js";
 import { Pagination, getPageItems } from "./components/pagination/pagination.js";
 import { RadioGroup, RadioGroupItem } from "./components/radio-group/radio-group.js";
+import { Progress } from "./components/progress/progress.js";
 import { Separator } from "./components/separator/separator.js";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./components/tooltip/tooltip.js";
 import { Sidebar, SidebarGroup, SidebarItem } from "./components/sidebar/sidebar.js";
 import { Skeleton } from "./components/skeleton/skeleton.js";
+import { Spinner, spinnerVariants } from "./components/spinner/spinner.js";
 import { Switch } from "./components/switch/switch.js";
 import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from "./components/table/table.js";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "./components/tabs/tabs.js";
 import { Textarea } from "./components/textarea/textarea.js";
 import { Toaster, toast } from "./components/toast/toast.js";
-export { Alert, AlertDescription, AlertTitle, Avatar, Badge, Button, Calendar, Checkbox, Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxValue, ConfigProvider, DatePicker, DateRangePicker, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, Field, FieldDescription, FieldError, FieldLabel, Fieldset, FieldsetLegend, Input, InputGroup, InputGroupAddon, Menu, MenuCheckboxItem, MenuContent, MenuGroup, MenuGroupLabel, MenuItem, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuSub, MenuSubContent, MenuSubTrigger, MenuTrigger, NumberField, Pagination, Popover, PopoverClose, PopoverContent, PopoverDescription, PopoverTitle, PopoverTrigger, RadioGroup, RadioGroupItem, Select, SelectContent, SelectGroup, SelectGroupLabel, SelectItem, SelectSeparator, SelectTrigger, SelectValue, Separator, Sidebar, SidebarGroup, SidebarItem, Skeleton, Switch, Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, alertVariants, badgeVariants, buttonVariants, emptyMediaVariants, getPageItems, toast, useLocale, useMessages };
+export { Alert, AlertDescription, AlertTitle, Avatar, Badge, Button, Calendar, Checkbox, Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxValue, ConfigProvider, DatePicker, DateRangePicker, DescriptionList, DescriptionListItem, DescriptionListLabel, DescriptionListValue, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, Field, FieldDescription, FieldError, FieldLabel, Fieldset, FieldsetLegend, Input, InputGroup, InputGroupAddon, Menu, MenuCheckboxItem, MenuContent, MenuGroup, MenuGroupLabel, MenuItem, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuSub, MenuSubContent, MenuSubTrigger, MenuTrigger, NumberField, Pagination, Popover, PopoverClose, PopoverContent, PopoverDescription, PopoverTitle, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, Select, SelectContent, SelectGroup, SelectGroupLabel, SelectItem, SelectSeparator, SelectTrigger, SelectValue, Separator, Sidebar, SidebarGroup, SidebarItem, Skeleton, Spinner, Switch, Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, alertVariants, badgeVariants, buttonVariants, descriptionListVariants, emptyMediaVariants, getPageItems, spinnerVariants, toast, useLocale, useMessages };

package/dist/lib/cn.js

@@ -1,6 +1,6 @@
-import { createCn } from "cn/config";
+import { cn } from "cn";
 //#region src/lib/cn.ts
-/** Merges class names; conflict resolution only applies to utilities with the library's `asu` prefix. */
-const cn = createCn({ prefix: "asu" });
+/** Merges class names; a later utility replaces an earlier one that sets the same property. */
+const cn$1 = cn;
 //#endregion
-export { cn };
+export { cn$1 as cn };

package/dist/lib/control.js

@@ -1,6 +1,6 @@
 //#region src/lib/control.ts
-const controlSurface = "asu:w-full asu:min-w-0 asu:rounded-sm asu:border asu:border-input asu:bg-background asu:text-sm asu:text-foreground asu:transition-colors asu:outline-none asu:placeholder:text-muted-foreground asu:disabled:cursor-not-allowed asu:disabled:bg-muted asu:disabled:opacity-50 asu:data-disabled:cursor-not-allowed asu:data-disabled:bg-muted asu:data-disabled:opacity-50 asu:aria-invalid:border-destructive asu:data-invalid:border-destructive asu:not-disabled:not-data-disabled:not-aria-invalid:not-data-invalid:hover:border-primary-hover";
-const controlFocus = "asu:focus-visible:border-ring asu:focus-visible:ring-2 asu:focus-visible:ring-ring/30 asu:aria-invalid:focus-visible:ring-destructive/30 asu:data-invalid:focus-visible:ring-destructive/30";
-const controlFocusWithin = "asu:focus-within:border-ring asu:focus-within:ring-2 asu:focus-within:ring-ring/30 asu:aria-invalid:focus-within:ring-destructive/30 asu:data-invalid:focus-within:ring-destructive/30";
+const controlSurface = "w-full min-w-0 rounded-sm border border-input bg-background text-sm text-foreground transition-colors outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:bg-muted disabled:opacity-50 data-disabled:cursor-not-allowed data-disabled:bg-muted data-disabled:opacity-50 aria-invalid:border-destructive data-invalid:border-destructive not-disabled:not-data-disabled:not-aria-invalid:not-data-invalid:hover:border-primary-hover";
+const controlFocus = "focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/40 aria-invalid:focus-visible:ring-destructive/40 data-invalid:focus-visible:ring-destructive/40";
+const controlFocusWithin = "focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/40 aria-invalid:focus-within:ring-destructive/40 data-invalid:focus-within:ring-destructive/40";
 //#endregion
 export { controlFocus, controlFocusWithin, controlSurface };

package/dist/lib/popup.js

@@ -1,6 +1,7 @@
 //#region src/lib/popup.ts
-const popupClassName = "asu:rounded-md asu:border asu:border-border asu:bg-popover asu:text-popover-foreground asu:shadow-md asu:outline-none";
-const listboxClassName = "asu:max-h-[300px] asu:overflow-y-auto asu:rounded-sm asu:bg-muted asu:text-sm asu:shadow-md";
-const listItemClassName = "asu:flex asu:cursor-default asu:items-center asu:gap-2 asu:px-4 asu:py-2.5 asu:text-sm asu:outline-none asu:select-none asu:data-highlighted:bg-accent-hover asu:data-selected:bg-accent-selected asu:data-disabled:pointer-events-none asu:data-disabled:opacity-50";
+const popupLayerClassName = "z-50";
+const popupClassName = "rounded-md border border-border bg-popover text-popover-foreground shadow-md outline-none";
+const listboxClassName = "max-h-[300px] overflow-y-auto rounded-sm bg-muted text-sm shadow-md dark:ring-1 dark:ring-border";
+const listItemClassName = "flex cursor-default items-center gap-2 px-4 py-2.5 text-sm outline-none select-none data-highlighted:bg-accent-hover data-selected:bg-accent-selected data-disabled:pointer-events-none data-disabled:opacity-50";
 //#endregion
-export { listItemClassName, listboxClassName, popupClassName };
+export { listItemClassName, listboxClassName, popupClassName, popupLayerClassName };

package/dist/theme.css

@@ -0,0 +1,220 @@
+/* Generated by scripts/generate-tokens.ts from src/tokens/*.ts. Do not edit. */
+
+@import './animations.css';
+
+@source './components';
+@source './lib';
+@source not './**/*.test.tsx';
+@source not './**/*.stories.tsx';
+
+@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *):not(:where([data-theme=dark] [data-theme=light], [data-theme=dark] [data-theme=light] *)));
+
+@theme static {
+  --color-background: #FFFFFF;
+  --color-foreground: #2C2C2C;
+  --color-card: #FFFFFF;
+  --color-card-foreground: #2C2C2C;
+  --color-popover: #FFFFFF;
+  --color-popover-foreground: #2C2C2C;
+  --color-primary: #065FD4;
+  --color-primary-hover: #084BA4;
+  --color-primary-foreground: #FFFFFF;
+  --color-primary-text: #065FD4;
+  --color-secondary: #F7F7F7;
+  --color-secondary-foreground: #2C2C2C;
+  --color-muted: #F7F7F7;
+  --color-muted-foreground: #686868;
+  --color-accent: #F7F7F7;
+  --color-accent-foreground: #2C2C2C;
+  --color-destructive: #C40A04;
+  --color-destructive-hover: #910601;
+  --color-destructive-foreground: #FFFFFF;
+  --color-destructive-text: #C40A04;
+  --color-destructive-subtle: #FFF8F7;
+  --color-success: #1FA333;
+  --color-success-foreground: #11701F;
+  --color-success-subtle: #F7FFF9;
+  --color-warning: #CC7F08;
+  --color-warning-foreground: #995F06;
+  --color-warning-subtle: #FFF9F0;
+  --color-info: #065FD4;
+  --color-info-foreground: #084BA4;
+  --color-info-subtle: #ECF5FD;
+  --color-border: #F0F0F0;
+  --color-input: #E0E0E0;
+  --color-ring: #065FD4;
+  --color-tooltip: #3C4557;
+  --color-tooltip-foreground: #FFFFFF;
+  --color-table-header: #F5F6FA;
+  --color-secondary-hover: #F0F0F0;
+  --color-accent-hover: #F0F0F0;
+  --color-accent-selected: #E0E0E0;
+  --color-overlay: #2C2C2C73;
+  --color-sidebar-accent: #F0F0F0;
+  --color-sidebar-indicator: #F84037;
+  --radius-sm: 2px;
+  --radius-md: 4px;
+  --font-sans: "Inter Variable", "Inter", ui-sans-serif, system-ui, sans-serif;
+  --badge-gray-bg: #F7F7F7;
+  --badge-gray-fg: #484848;
+  --badge-slate-bg: #EAECF3;
+  --badge-slate-fg: #44506F;
+  --badge-blue-bg: #D6EAFF;
+  --badge-blue-fg: #084BA4;
+  --badge-green-bg: #E1FAE5;
+  --badge-green-fg: #11701F;
+  --badge-red-bg: #FFE2E0;
+  --badge-red-fg: #910601;
+  --badge-yellow-bg: #FFF8D6;
+  --badge-yellow-fg: #665202;
+  --badge-orange-bg: #FFEFD6;
+  --badge-orange-fg: #995F06;
+  --badge-cyan-bg: #D6F3FF;
+  --badge-cyan-fg: #1E6E8F;
+  --badge-indigo-bg: #E4E4F5;
+  --badge-indigo-fg: #201F99;
+  --badge-purple-bg: #F4E3FD;
+  --badge-purple-fg: #65188C;
+  --badge-pink-bg: #FFE0ED;
+  --badge-pink-fg: #991147;
+}
+
+:root {
+  color-scheme: light;
+}
+
+[data-theme=light] {
+  color-scheme: light;
+  --color-background: #FFFFFF;
+  --color-foreground: #2C2C2C;
+  --color-card: #FFFFFF;
+  --color-card-foreground: #2C2C2C;
+  --color-popover: #FFFFFF;
+  --color-popover-foreground: #2C2C2C;
+  --color-primary: #065FD4;
+  --color-primary-hover: #084BA4;
+  --color-primary-foreground: #FFFFFF;
+  --color-primary-text: #065FD4;
+  --color-secondary: #F7F7F7;
+  --color-secondary-foreground: #2C2C2C;
+  --color-muted: #F7F7F7;
+  --color-muted-foreground: #686868;
+  --color-accent: #F7F7F7;
+  --color-accent-foreground: #2C2C2C;
+  --color-destructive: #C40A04;
+  --color-destructive-hover: #910601;
+  --color-destructive-foreground: #FFFFFF;
+  --color-destructive-text: #C40A04;
+  --color-destructive-subtle: #FFF8F7;
+  --color-success: #1FA333;
+  --color-success-foreground: #11701F;
+  --color-success-subtle: #F7FFF9;
+  --color-warning: #CC7F08;
+  --color-warning-foreground: #995F06;
+  --color-warning-subtle: #FFF9F0;
+  --color-info: #065FD4;
+  --color-info-foreground: #084BA4;
+  --color-info-subtle: #ECF5FD;
+  --color-border: #F0F0F0;
+  --color-input: #E0E0E0;
+  --color-ring: #065FD4;
+  --color-tooltip: #3C4557;
+  --color-tooltip-foreground: #FFFFFF;
+  --color-table-header: #F5F6FA;
+  --color-secondary-hover: #F0F0F0;
+  --color-accent-hover: #F0F0F0;
+  --color-accent-selected: #E0E0E0;
+  --color-overlay: #2C2C2C73;
+  --color-sidebar-accent: #F0F0F0;
+  --color-sidebar-indicator: #F84037;
+  --badge-gray-bg: #F7F7F7;
+  --badge-gray-fg: #484848;
+  --badge-slate-bg: #EAECF3;
+  --badge-slate-fg: #44506F;
+  --badge-blue-bg: #D6EAFF;
+  --badge-blue-fg: #084BA4;
+  --badge-green-bg: #E1FAE5;
+  --badge-green-fg: #11701F;
+  --badge-red-bg: #FFE2E0;
+  --badge-red-fg: #910601;
+  --badge-yellow-bg: #FFF8D6;
+  --badge-yellow-fg: #665202;
+  --badge-orange-bg: #FFEFD6;
+  --badge-orange-fg: #995F06;
+  --badge-cyan-bg: #D6F3FF;
+  --badge-cyan-fg: #1E6E8F;
+  --badge-indigo-bg: #E4E4F5;
+  --badge-indigo-fg: #201F99;
+  --badge-purple-bg: #F4E3FD;
+  --badge-purple-fg: #65188C;
+  --badge-pink-bg: #FFE0ED;
+  --badge-pink-fg: #991147;
+}
+
+[data-theme=dark] {
+  color-scheme: dark;
+  --color-background: #1A1A1A;
+  --color-foreground: #F7F7F7;
+  --color-card: #1A1A1A;
+  --color-card-foreground: #F7F7F7;
+  --color-popover: #1A1A1A;
+  --color-popover-foreground: #F7F7F7;
+  --color-primary: #065FD4;
+  --color-primary-hover: #084BA4;
+  --color-primary-foreground: #FFFFFF;
+  --color-primary-text: #5E9AE8;
+  --color-secondary: #232323;
+  --color-secondary-foreground: #F7F7F7;
+  --color-muted: #232323;
+  --color-muted-foreground: #C0C0C0;
+  --color-accent: #232323;
+  --color-accent-foreground: #F7F7F7;
+  --color-destructive: #C40A04;
+  --color-destructive-hover: #910601;
+  --color-destructive-foreground: #FFFFFF;
+  --color-destructive-text: #FA7069;
+  --color-destructive-subtle: #5E0401;
+  --color-success: #32D74B;
+  --color-success-foreground: #95EDA3;
+  --color-success-subtle: #074210;
+  --color-warning: #FF9F0A;
+  --color-warning-foreground: #FECA86;
+  --color-warning-subtle: #664004;
+  --color-info: #5E9AE8;
+  --color-info-foreground: #84B6F0;
+  --color-info-subtle: #043566;
+  --color-border: #FFFFFF1A;
+  --color-input: #FFFFFF26;
+  --color-ring: #5E9AE8;
+  --color-tooltip: #EAECF3;
+  --color-tooltip-foreground: #151B25;
+  --color-table-header: #282F3D;
+  --color-secondary-hover: #2C2C2C;
+  --color-accent-hover: #2C2C2C;
+  --color-accent-selected: #484848;
+  --color-overlay: #00000099;
+  --color-sidebar-accent: #2C2C2C;
+  --color-sidebar-indicator: #F84037;
+  --badge-gray-bg: #484848;
+  --badge-gray-fg: #F7F7F7;
+  --badge-slate-bg: #44506F;
+  --badge-slate-fg: #EAECF3;
+  --badge-blue-bg: #084BA4;
+  --badge-blue-fg: #D6EAFF;
+  --badge-green-bg: #11701F;
+  --badge-green-fg: #E1FAE5;
+  --badge-red-bg: #910601;
+  --badge-red-fg: #FFE2E0;
+  --badge-yellow-bg: #665202;
+  --badge-yellow-fg: #FFF8D6;
+  --badge-orange-bg: #995F06;
+  --badge-orange-fg: #FFEFD6;
+  --badge-cyan-bg: #1E6E8F;
+  --badge-cyan-fg: #D6F3FF;
+  --badge-indigo-bg: #201F99;
+  --badge-indigo-fg: #E4E4F5;
+  --badge-purple-bg: #65188C;
+  --badge-purple-fg: #F4E3FD;
+  --badge-pink-bg: #991147;
+  --badge-pink-fg: #FFE0ED;
+}

package/dist/tokens/contrast.d.ts

@@ -9,5 +9,5 @@ export interface ContrastPair {
   ratio: number;
 }
 export declare function semanticPairs(map: SemanticMap): ContrastPair[];
-export declare function badgePairs(p?: Palette): ContrastPair[];
+export declare function badgePairs(theme?: 'light' | 'dark', p?: Palette): ContrastPair[];
 //#endregion

package/dist/tokens/contrast.js

@@ -11,8 +11,8 @@ const TEXT_TOKENS = [
 	"secondary-foreground",
 	"muted-foreground",
 	"accent-foreground",
-	"primary",
-	"destructive",
+	"primary-text",
+	"destructive-text",
 	"success-foreground",
 	"warning-foreground",
 	"info-foreground"
@@ -33,7 +33,7 @@ const ON_COLOR_PAIRS = [
 	["primary-foreground", "primary-hover"],
 	["destructive-foreground", "destructive"],
 	["destructive-foreground", "destructive-hover"],
-	["destructive", "destructive-subtle"],
+	["destructive-text", "destructive-subtle"],
 	["success-foreground", "success-subtle"],
 	["warning-foreground", "warning-subtle"],
 	["info-foreground", "info-subtle"],
@@ -61,8 +61,19 @@ function pair(name, foreground, background) {
 function semanticPairs(map) {
 	return SEMANTIC_PAIRS.map(([fg, bg]) => pair(`${fg} on ${bg}`, resolveRef(map[fg]), resolveRef(map[bg])));
 }
-function badgePairs(p = palette) {
-	return FAMILIES.map((family) => pair(`badge ${family}`, p[family][700], p[family][100]));
+const BADGE_STEPS = {
+	light: {
+		background: 100,
+		foreground: 700
+	},
+	dark: {
+		background: 700,
+		foreground: 100
+	}
+};
+function badgePairs(theme = "light", p = palette) {
+	const { background, foreground } = BADGE_STEPS[theme];
+	return FAMILIES.map((family) => pair(`badge ${family}`, p[family][foreground], p[family][background]));
 }
 //#endregion
-export { AA, SURFACE_TOKENS, TEXT_TOKENS, badgePairs, semanticPairs };
+export { AA, BADGE_STEPS, SURFACE_TOKENS, TEXT_TOKENS, badgePairs, semanticPairs };

package/dist/tokens/semantic.d.ts

@@ -2,12 +2,12 @@ import { Family, Step } from "./types.js";
 //#region src/tokens/semantic.d.ts
 type OpaqueRef = 'white' | 'black' | `${Family}-${Step}`;
 export type ColorRef = OpaqueRef | `${OpaqueRef}/${number}`;
-export declare const SEMANTIC_TOKENS: readonly ["background", "foreground", "card", "card-foreground", "popover", "popover-foreground", "primary", "primary-hover", "primary-foreground", "secondary", "secondary-foreground", "muted", "muted-foreground", "accent", "accent-foreground", "destructive", "destructive-hover", "destructive-foreground", "destructive-subtle", "success", "success-foreground", "success-subtle", "warning", "warning-foreground", "warning-subtle", "info", "info-foreground", "info-subtle", "border", "input", "ring", "tooltip", "tooltip-foreground", "table-header", "secondary-hover", "accent-hover", "accent-selected", "overlay", "sidebar-accent", "sidebar-indicator"];
+export declare const SEMANTIC_TOKENS: readonly ["background", "foreground", "card", "card-foreground", "popover", "popover-foreground", "primary", "primary-hover", "primary-foreground", "primary-text", "secondary", "secondary-foreground", "muted", "muted-foreground", "accent", "accent-foreground", "destructive", "destructive-hover", "destructive-foreground", "destructive-text", "destructive-subtle", "success", "success-foreground", "success-subtle", "warning", "warning-foreground", "warning-subtle", "info", "info-foreground", "info-subtle", "border", "input", "ring", "tooltip", "tooltip-foreground", "table-header", "secondary-hover", "accent-hover", "accent-selected", "overlay", "sidebar-accent", "sidebar-indicator"];
 export type SemanticToken = (typeof SEMANTIC_TOKENS)[number];
 export type SemanticMap = Record<SemanticToken, ColorRef>;
 export declare const themes: {
   light: SemanticMap;
-  dark?: SemanticMap;
+  dark: SemanticMap;
 };
 //#endregion
 export {};

package/dist/tokens/semantic.js

@@ -1,46 +1,94 @@
 import { palette } from "./palette.js";
-const themes = { light: {
-	background: "white",
-	foreground: "gray-800",
-	card: "white",
-	"card-foreground": "gray-800",
-	popover: "white",
-	"popover-foreground": "gray-800",
-	primary: "blue-600",
-	"primary-hover": "blue-700",
-	"primary-foreground": "white",
-	secondary: "gray-100",
-	"secondary-foreground": "gray-800",
-	muted: "gray-100",
-	"muted-foreground": "gray-600",
-	accent: "gray-100",
-	"accent-foreground": "gray-800",
-	destructive: "red-600",
-	"destructive-hover": "red-700",
-	"destructive-foreground": "white",
-	"destructive-subtle": "red-50",
-	success: "green-600",
-	"success-foreground": "green-700",
-	"success-subtle": "green-50",
-	warning: "orange-600",
-	"warning-foreground": "orange-700",
-	"warning-subtle": "orange-50",
-	info: "blue-600",
-	"info-foreground": "blue-700",
-	"info-subtle": "blue-50",
-	border: "gray-200",
-	input: "gray-300",
-	ring: "blue-600",
-	tooltip: "slate-800",
-	"tooltip-foreground": "white",
-	"table-header": "slate-50",
-	"secondary-hover": "gray-200",
-	"accent-hover": "gray-200",
-	"accent-selected": "gray-300",
-	overlay: "gray-800/45",
-	"sidebar-accent": "gray-200",
-	"sidebar-indicator": "red-400"
-} };
+const themes = {
+	light: {
+		background: "white",
+		foreground: "gray-800",
+		card: "white",
+		"card-foreground": "gray-800",
+		popover: "white",
+		"popover-foreground": "gray-800",
+		primary: "blue-600",
+		"primary-hover": "blue-700",
+		"primary-foreground": "white",
+		"primary-text": "blue-600",
+		secondary: "gray-100",
+		"secondary-foreground": "gray-800",
+		muted: "gray-100",
+		"muted-foreground": "gray-600",
+		accent: "gray-100",
+		"accent-foreground": "gray-800",
+		destructive: "red-600",
+		"destructive-hover": "red-700",
+		"destructive-foreground": "white",
+		"destructive-text": "red-600",
+		"destructive-subtle": "red-50",
+		success: "green-600",
+		"success-foreground": "green-700",
+		"success-subtle": "green-50",
+		warning: "orange-600",
+		"warning-foreground": "orange-700",
+		"warning-subtle": "orange-50",
+		info: "blue-600",
+		"info-foreground": "blue-700",
+		"info-subtle": "blue-50",
+		border: "gray-200",
+		input: "gray-300",
+		ring: "blue-600",
+		tooltip: "slate-800",
+		"tooltip-foreground": "white",
+		"table-header": "slate-50",
+		"secondary-hover": "gray-200",
+		"accent-hover": "gray-200",
+		"accent-selected": "gray-300",
+		overlay: "gray-800/45",
+		"sidebar-accent": "gray-200",
+		"sidebar-indicator": "red-400"
+	},
+	dark: {
+		background: "gray-950",
+		foreground: "gray-100",
+		card: "gray-950",
+		"card-foreground": "gray-100",
+		popover: "gray-950",
+		"popover-foreground": "gray-100",
+		primary: "blue-600",
+		"primary-hover": "blue-700",
+		"primary-foreground": "white",
+		"primary-text": "blue-400",
+		secondary: "gray-900",
+		"secondary-foreground": "gray-100",
+		muted: "gray-900",
+		"muted-foreground": "gray-400",
+		accent: "gray-900",
+		"accent-foreground": "gray-100",
+		destructive: "red-600",
+		"destructive-hover": "red-700",
+		"destructive-foreground": "white",
+		"destructive-text": "red-300",
+		"destructive-subtle": "red-800",
+		success: "green-500",
+		"success-foreground": "green-300",
+		"success-subtle": "green-800",
+		warning: "orange-500",
+		"warning-foreground": "orange-300",
+		"warning-subtle": "orange-800",
+		info: "blue-400",
+		"info-foreground": "blue-300",
+		"info-subtle": "blue-800",
+		border: "white/10",
+		input: "white/15",
+		ring: "blue-400",
+		tooltip: "slate-100",
+		"tooltip-foreground": "slate-950",
+		"table-header": "slate-900",
+		"secondary-hover": "gray-800",
+		"accent-hover": "gray-800",
+		"accent-selected": "gray-700",
+		overlay: "black/60",
+		"sidebar-accent": "gray-800",
+		"sidebar-indicator": "red-400"
+	}
+};
 function resolveRef(ref, p = palette) {
 	const slash = ref.indexOf("/");
 	if (slash !== -1) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@api7/ui-components",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "description": "API7 React component library",
   "type": "module",
   "sideEffects": [
@@ -12,6 +12,7 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
+      "style": "./dist/theme.css",
       "default": "./dist/index.js"
     },
     "./form": {
@@ -26,7 +27,7 @@
       "types": "./dist/tokens/index.d.ts",
       "default": "./dist/tokens/index.js"
     },
-    "./styles.css": "./dist/styles.css",
+    "./theme.css": "./dist/theme.css",
     "./package.json": "./package.json"
   },
   "dependencies": {
@@ -41,7 +42,8 @@
     "lucide-react": "^1",
     "react": "^19",
     "react-day-picker": "^10.0.1",
-    "react-dom": "^19"
+    "react-dom": "^19",
+    "tailwindcss": "^4.1.0"
   },
   "peerDependenciesMeta": {
     "@tanstack/react-form": {
@@ -91,10 +93,10 @@
     "node": ">=22"
   },
   "scripts": {
-    "build": "tsdown && tailwindcss -i src/styles.css -o dist/styles.css --minify",
-    "check-package": "publint --strict && attw --pack . --profile esm-only --exclude-entrypoints ./styles.css",
+    "build": "tsdown && cp src/theme.css src/animations.css dist/",
+    "check-package": "publint --strict && attw --pack . --profile esm-only --exclude-entrypoints ./theme.css",
     "typecheck": "tsc -b tsconfig.json",
-    "lint": "eslint .",
+    "lint": "eslint . --max-warnings 0",
     "test": "vitest run --project unit --maxWorkers=2 && vitest run --project browser --maxWorkers=2",
     "tokens": "jiti scripts/generate-tokens.ts"
   }