@api7/ui-components 0.4.0 → 0.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (113) hide show
  1. package/README.md +221 -30
  2. package/dist/animations.css +12 -0
  3. package/dist/components/alert/alert.d.ts +0 -2
  4. package/dist/components/alert/alert.js +8 -9
  5. package/dist/components/avatar/avatar.d.ts +4 -6
  6. package/dist/components/avatar/avatar.js +7 -8
  7. package/dist/components/badge/badge.d.ts +0 -2
  8. package/dist/components/badge/badge.js +15 -16
  9. package/dist/components/button/button.d.ts +1 -4
  10. package/dist/components/button/button.js +15 -16
  11. package/dist/components/calendar/calendar.d.ts +1 -3
  12. package/dist/components/calendar/calendar.js +29 -30
  13. package/dist/components/checkbox/checkbox.d.ts +0 -2
  14. package/dist/components/checkbox/checkbox.js +4 -5
  15. package/dist/components/combobox/combobox.d.ts +0 -2
  16. package/dist/components/combobox/combobox.js +25 -25
  17. package/dist/components/data-table/data-table.d.ts +0 -2
  18. package/dist/components/data-table/data-table.js +8 -9
  19. package/dist/components/data-table/filter-header.d.ts +1 -3
  20. package/dist/components/data-table/filter-header.js +5 -6
  21. package/dist/components/data-table/sort-header.js +3 -4
  22. package/dist/components/date-picker/date-picker.d.ts +0 -2
  23. package/dist/components/date-picker/date-picker.js +15 -16
  24. package/dist/components/description-list/description-list.d.ts +24 -0
  25. package/dist/components/description-list/description-list.js +88 -0
  26. package/dist/components/dialog/dialog.d.ts +0 -2
  27. package/dist/components/dialog/dialog.js +12 -13
  28. package/dist/components/drawer/drawer.d.ts +0 -2
  29. package/dist/components/drawer/drawer.js +13 -14
  30. package/dist/components/empty/empty.d.ts +0 -2
  31. package/dist/components/empty/empty.js +9 -10
  32. package/dist/components/field/field.d.ts +0 -2
  33. package/dist/components/field/field.js +7 -8
  34. package/dist/components/field/labeled-field.d.ts +33 -0
  35. package/dist/components/field/labeled-field.js +67 -0
  36. package/dist/components/form/choice-fields.d.ts +1 -3
  37. package/dist/components/form/choice-fields.js +1 -2
  38. package/dist/components/form/date-fields.d.ts +0 -2
  39. package/dist/components/form/date-fields.js +2 -3
  40. package/dist/components/form/errors.d.ts +1 -3
  41. package/dist/components/form/errors.js +1 -2
  42. package/dist/components/form/form-context.d.ts +1 -3
  43. package/dist/components/form/form-context.js +1 -2
  44. package/dist/components/form/form-item.d.ts +6 -17
  45. package/dist/components/form/form-item.js +9 -58
  46. package/dist/components/form/form.d.ts +1 -3
  47. package/dist/components/form/form.js +1 -2
  48. package/dist/components/form/lazy-field-components.js +2 -3
  49. package/dist/components/form/submit-button.d.ts +1 -3
  50. package/dist/components/form/submit-button.js +1 -2
  51. package/dist/components/form/text-field.d.ts +1 -3
  52. package/dist/components/form/text-field.js +1 -2
  53. package/dist/components/form/toggle-fields.d.ts +1 -3
  54. package/dist/components/form/toggle-fields.js +30 -46
  55. package/dist/components/input/input.d.ts +0 -2
  56. package/dist/components/input/input.js +2 -3
  57. package/dist/components/input-group/input-group.d.ts +0 -2
  58. package/dist/components/input-group/input-group.js +12 -13
  59. package/dist/components/menu/menu.d.ts +14 -4
  60. package/dist/components/menu/menu.js +43 -31
  61. package/dist/components/number-field/number-field.d.ts +0 -2
  62. package/dist/components/number-field/number-field.js +8 -9
  63. package/dist/components/pagination/pagination.d.ts +1 -3
  64. package/dist/components/pagination/pagination.js +13 -14
  65. package/dist/components/popover/popover.d.ts +3 -3
  66. package/dist/components/popover/popover.js +14 -7
  67. package/dist/components/progress/progress.d.ts +17 -0
  68. package/dist/components/progress/progress.js +35 -0
  69. package/dist/components/radio-group/radio-group.d.ts +0 -2
  70. package/dist/components/radio-group/radio-group.js +4 -5
  71. package/dist/components/select/select.d.ts +0 -2
  72. package/dist/components/select/select.js +18 -18
  73. package/dist/components/separator/separator.d.ts +0 -2
  74. package/dist/components/separator/separator.js +2 -3
  75. package/dist/components/sidebar/sidebar.d.ts +0 -2
  76. package/dist/components/sidebar/sidebar.js +11 -12
  77. package/dist/components/skeleton/skeleton.d.ts +0 -2
  78. package/dist/components/skeleton/skeleton.js +2 -3
  79. package/dist/components/spinner/spinner.d.ts +12 -0
  80. package/dist/components/spinner/spinner.js +27 -0
  81. package/dist/components/switch/switch.d.ts +0 -2
  82. package/dist/components/switch/switch.js +3 -4
  83. package/dist/components/table/table.d.ts +0 -2
  84. package/dist/components/table/table.js +8 -9
  85. package/dist/components/tabs/tabs.d.ts +0 -2
  86. package/dist/components/tabs/tabs.js +5 -6
  87. package/dist/components/textarea/textarea.d.ts +0 -2
  88. package/dist/components/textarea/textarea.js +2 -3
  89. package/dist/components/toast/toast.d.ts +0 -2
  90. package/dist/components/toast/toast.js +19 -20
  91. package/dist/components/tooltip/tooltip.d.ts +0 -2
  92. package/dist/components/tooltip/tooltip.js +5 -4
  93. package/dist/config/config-provider.d.ts +1 -3
  94. package/dist/config/config-provider.js +1 -2
  95. package/dist/config/messages.d.ts +5 -3
  96. package/dist/config/messages.js +3 -2
  97. package/dist/index.d.ts +6 -2
  98. package/dist/index.js +7 -3
  99. package/dist/lib/cn.js +5 -6
  100. package/dist/lib/control.js +4 -5
  101. package/dist/lib/popup.js +6 -6
  102. package/dist/theme.css +220 -0
  103. package/dist/tokens/contrast.d.ts +1 -3
  104. package/dist/tokens/contrast.js +1 -2
  105. package/dist/tokens/palette.d.ts +0 -2
  106. package/dist/tokens/palette.js +1 -2
  107. package/dist/tokens/scale.js +1 -2
  108. package/dist/tokens/semantic.d.ts +0 -2
  109. package/dist/tokens/semantic.js +0 -1
  110. package/dist/tokens/types.d.ts +1 -3
  111. package/dist/tokens/types.js +1 -2
  112. package/package.json +11 -9
  113. package/dist/styles.css +0 -2
@@ -1,9 +1,10 @@
1
1
  "use client";
2
2
  import { cn } from "../../lib/cn.js";
3
+ import { popupLayerClassName } from "../../lib/popup.js";
3
4
  import { createContext, useContext } from "react";
4
5
  import { jsx, jsxs } from "react/jsx-runtime";
5
6
  import { Tooltip } from "@base-ui/react/tooltip";
6
- //#region src/components/tooltip/tooltip.tsx
7
+ // src/components/tooltip/tooltip.tsx
7
8
  const DEFAULT_TOOLTIP_DELAY = 300;
8
9
  const TooltipDelayContext = createContext(void 0);
9
10
  const Tooltip$1 = Tooltip.Root;
@@ -29,19 +30,19 @@ function TooltipTrigger({ className, delay, ...props }) {
29
30
  }
30
31
  function TooltipContent({ className, side = "top", sideOffset = 6, align, children, ...props }) {
31
32
  return /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(Tooltip.Positioner, {
33
+ className: popupLayerClassName,
32
34
  side,
33
35
  sideOffset,
34
36
  align,
35
37
  children: /* @__PURE__ */ jsxs(Tooltip.Popup, {
36
- className: cn("asu:rounded-sm asu:bg-tooltip asu:px-2 asu:py-1 asu:text-sm asu:leading-5 asu:text-tooltip-foreground asu:max-w-xs", className),
38
+ className: cn("rounded-sm bg-tooltip px-2 py-1 text-sm leading-5 text-tooltip-foreground max-w-xs", className),
37
39
  ...props,
38
40
  "data-slot": "tooltip-content",
39
41
  children: [children, /* @__PURE__ */ jsx(Tooltip.Arrow, {
40
- className: "asu:size-2.5 asu:rotate-45 asu:bg-tooltip asu:data-[side=bottom]:-top-1 asu:data-[side=left]:-right-1 asu:data-[side=right]:-left-1 asu:data-[side=top]:-bottom-1",
42
+ className: "size-2.5 rotate-45 bg-tooltip data-[side=bottom]:-top-1 data-[side=left]:-right-1 data-[side=right]:-left-1 data-[side=top]:-bottom-1",
41
43
  "data-slot": "tooltip-arrow"
42
44
  })]
43
45
  })
44
46
  }) });
45
47
  }
46
- //#endregion
47
48
  export { Tooltip$1 as Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };
@@ -1,6 +1,5 @@
1
1
  import { Locale, Messages, MessagesOverride } from "./messages.js";
2
2
  import { ReactNode } from "react";
3
- //#region src/config/config-provider.d.ts
4
3
  export interface ConfigProviderProps {
5
4
  locale?: Locale;
6
5
  /** Memoize this object or define it at module scope; a new object on every render re-renders every useMessages() consumer. */
@@ -10,5 +9,4 @@ export interface ConfigProviderProps {
10
9
  /** Global configuration entry for the library; currently carries the locale and built-in message overrides used by components. */
11
10
  export declare function ConfigProvider({ locale, messages, children }: ConfigProviderProps): import("react").JSX.Element;
12
11
  export declare function useMessages(): Messages;
13
- export declare function useLocale(): Locale;
14
- //#endregion
12
+ export declare function useLocale(): Locale;
@@ -2,7 +2,7 @@
2
2
  import { resolveMessages } from "./messages.js";
3
3
  import { createContext, useContext, useMemo } from "react";
4
4
  import { jsx } from "react/jsx-runtime";
5
- //#region src/config/config-provider.tsx
5
+ // src/config/config-provider.tsx
6
6
  const ConfigContext = createContext({
7
7
  locale: "en-US",
8
8
  messages: resolveMessages("en-US")
@@ -24,5 +24,4 @@ function useMessages() {
24
24
  function useLocale() {
25
25
  return useContext(ConfigContext).locale;
26
26
  }
27
- //#endregion
28
27
  export { ConfigProvider, useLocale, useMessages };
@@ -1,9 +1,12 @@
1
- //#region src/config/messages.d.ts
2
1
  export type Locale = 'en-US' | 'zh-CN';
3
2
  export interface Messages {
4
3
  readonly button: {
5
4
  readonly loading: string;
6
5
  };
6
+ /** Accessible name of a Spinner, announced as a status. */
7
+ readonly spinner: {
8
+ readonly label: string;
9
+ };
7
10
  readonly numberField: {
8
11
  readonly increment: string;
9
12
  readonly decrement: string;
@@ -75,5 +78,4 @@ export interface Messages {
75
78
  readonly presetsLabel: string;
76
79
  };
77
80
  }
78
- export type MessagesOverride = { [K in keyof Messages]?: Partial<Messages[K]>; };
79
- //#endregion
81
+ export type MessagesOverride = { [K in keyof Messages]?: Partial<Messages[K]>; };
@@ -1,10 +1,11 @@
1
- //#region src/config/messages.ts
1
+ // src/config/messages.ts
2
2
  function deepFreeze(value) {
3
3
  for (const nested of Object.values(value)) if (nested && typeof nested === "object") Object.freeze(nested);
4
4
  return Object.freeze(value);
5
5
  }
6
6
  const enUS = deepFreeze({
7
7
  button: { loading: "Loading" },
8
+ spinner: { label: "Loading" },
8
9
  numberField: {
9
10
  increment: "Increase",
10
11
  decrement: "Decrease"
@@ -50,6 +51,7 @@ const enUS = deepFreeze({
50
51
  });
51
52
  const zhCN = deepFreeze({
52
53
  button: { loading: "加载中" },
54
+ spinner: { label: "加载中" },
53
55
  numberField: {
54
56
  increment: "增加",
55
57
  decrement: "减少"
@@ -109,5 +111,4 @@ function resolveMessages(locale, override) {
109
111
  const keys = Object.keys(base);
110
112
  return Object.fromEntries(keys.map((key) => [key, mergeSection(base[key], override[key])]));
111
113
  }
112
- //#endregion
113
114
  export { enUS, resolveMessages, zhCN };
package/dist/index.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ import { LabeledField, LabeledFieldLayout, LabeledFieldProps } from "./components/field/labeled-field.js";
1
2
  import { NumberField, NumberFieldProps } from "./components/number-field/number-field.js";
2
3
  import { Select, SelectContent, SelectContentProps, SelectGroup, SelectGroupLabel, SelectGroupLabelProps, SelectGroupProps, SelectItem, SelectItemProps, SelectProps, SelectSeparator, SelectSeparatorProps, SelectTrigger, SelectTriggerProps, SelectValue, SelectValueProps } from "./components/select/select.js";
3
4
  import { Calendar, CalendarProps } from "./components/calendar/calendar.js";
@@ -13,6 +14,7 @@ import { Alert, AlertDescription, AlertDescriptionProps, AlertProps, AlertTitle,
13
14
  import { Avatar, AvatarProps, AvatarSize } from "./components/avatar/avatar.js";
14
15
  import { Badge, BadgeColor, BadgeProps, badgeVariants } from "./components/badge/badge.js";
15
16
  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";
17
+ import { DescriptionList, DescriptionListItem, DescriptionListItemProps, DescriptionListLabel, DescriptionListLabelProps, DescriptionListProps, DescriptionListValue, DescriptionListValueProps, descriptionListVariants } from "./components/description-list/description-list.js";
16
18
  import { Empty, EmptyContent, EmptyContentProps, EmptyDescription, EmptyDescriptionProps, EmptyHeader, EmptyHeaderProps, EmptyMedia, EmptyMediaProps, EmptyProps, EmptyTitle, EmptyTitleProps, emptyMediaVariants } from "./components/empty/empty.js";
17
19
  import { Field, FieldDescription, FieldDescriptionProps, FieldError, FieldErrorProps, FieldLabel, FieldLabelProps, FieldProps, Fieldset, FieldsetLegend, FieldsetLegendProps, FieldsetProps } from "./components/field/field.js";
18
20
  import { Dialog, DialogBody, DialogBodyProps, DialogClose, DialogCloseProps, DialogContent, DialogContentProps, DialogDescription, DialogDescriptionProps, DialogFooter, DialogFooterProps, DialogHeader, DialogHeaderProps, DialogProps, DialogTitle, DialogTitleProps, DialogTrigger, DialogTriggerProps } from "./components/dialog/dialog.js";
@@ -20,13 +22,15 @@ import { Drawer, DrawerBody, DrawerBodyProps, DrawerClose, DrawerCloseProps, Dra
20
22
  import { InputGroup, InputGroupAddon, InputGroupAddonProps, InputGroupProps } from "./components/input-group/input-group.js";
21
23
  import { Menu, MenuCheckboxItem, MenuCheckboxItemProps, MenuContent, MenuContentProps, MenuGroup, MenuGroupLabel, MenuGroupLabelProps, MenuGroupProps, MenuItem, MenuItemProps, MenuRadioGroup, MenuRadioGroupProps, MenuRadioItem, MenuRadioItemProps, MenuSeparator, MenuSeparatorProps, MenuSub, MenuSubContent, MenuSubContentProps, MenuSubTrigger, MenuSubTriggerProps, MenuTrigger, MenuTriggerProps } from "./components/menu/menu.js";
22
24
  import { Pagination, PaginationProps, getPageItems } from "./components/pagination/pagination.js";
23
- import { Popover, PopoverClose, PopoverCloseProps, PopoverContent, PopoverContentProps, PopoverDescription, PopoverDescriptionProps, PopoverTitle, PopoverTitleProps, PopoverTrigger, PopoverTriggerProps } from "./components/popover/popover.js";
25
+ import { Popover, PopoverArrow, PopoverArrowProps, PopoverClose, PopoverCloseProps, PopoverContent, PopoverContentProps, PopoverDescription, PopoverDescriptionProps, PopoverTitle, PopoverTitleProps, PopoverTrigger, PopoverTriggerProps } from "./components/popover/popover.js";
24
26
  import { RadioGroup, RadioGroupItem, RadioGroupItemProps, RadioGroupProps } from "./components/radio-group/radio-group.js";
27
+ import { Progress, ProgressProps } from "./components/progress/progress.js";
25
28
  import { Separator, SeparatorProps } from "./components/separator/separator.js";
26
29
  import { Sidebar, SidebarGroup, SidebarGroupProps, SidebarItem, SidebarItemProps, SidebarProps } from "./components/sidebar/sidebar.js";
27
30
  import { Skeleton, SkeletonProps } from "./components/skeleton/skeleton.js";
31
+ import { Spinner, SpinnerProps, spinnerVariants } from "./components/spinner/spinner.js";
28
32
  import { Table, TableBody, TableBodyProps, TableCaption, TableCaptionProps, TableCell, TableCellProps, TableHead, TableHeadProps, TableHeader, TableHeaderProps, TableProps, TableRow, TableRowProps } from "./components/table/table.js";
29
33
  import { Tabs, TabsContent, TabsContentProps, TabsList, TabsListProps, TabsProps, TabsTrigger, TabsTriggerProps } from "./components/tabs/tabs.js";
30
34
  import { ToastActionOptions, ToastOptions, ToastPromiseMessage, Toaster, ToasterProps, toast } from "./components/toast/toast.js";
31
35
  import { Tooltip, TooltipContent, TooltipContentProps, TooltipProvider, TooltipProviderProps, TooltipTrigger, TooltipTriggerProps } from "./components/tooltip/tooltip.js";
32
- 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 };
36
+ 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, LabeledField, type LabeledFieldLayout, type LabeledFieldProps, 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, PopoverArrow, type PopoverArrowProps, 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 CHANGED
@@ -5,11 +5,14 @@ import { Badge, badgeVariants } from "./components/badge/badge.js";
5
5
  import { Button, buttonVariants } from "./components/button/button.js";
6
6
  import { Calendar } from "./components/calendar/calendar.js";
7
7
  import { Checkbox } from "./components/checkbox/checkbox.js";
8
- import { Popover, PopoverClose, PopoverContent, PopoverDescription, PopoverTitle, PopoverTrigger } from "./components/popover/popover.js";
8
+ import { Popover, PopoverArrow, PopoverClose, PopoverContent, PopoverDescription, PopoverTitle, PopoverTrigger } from "./components/popover/popover.js";
9
9
  import { DatePicker, DateRangePicker } from "./components/date-picker/date-picker.js";
10
10
  import { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxValue } from "./components/combobox/combobox.js";
11
+ import { DescriptionList, DescriptionListItem, DescriptionListLabel, DescriptionListValue, descriptionListVariants } from "./components/description-list/description-list.js";
11
12
  import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, emptyMediaVariants } from "./components/empty/empty.js";
12
13
  import { Field, FieldDescription, FieldError, FieldLabel, Fieldset, FieldsetLegend } from "./components/field/field.js";
14
+ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./components/tooltip/tooltip.js";
15
+ import { LabeledField } from "./components/field/labeled-field.js";
13
16
  import { Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "./components/dialog/dialog.js";
14
17
  import { Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger } from "./components/drawer/drawer.js";
15
18
  import { Input } from "./components/input/input.js";
@@ -19,13 +22,14 @@ import { NumberField } from "./components/number-field/number-field.js";
19
22
  import { Select, SelectContent, SelectGroup, SelectGroupLabel, SelectItem, SelectSeparator, SelectTrigger, SelectValue } from "./components/select/select.js";
20
23
  import { Pagination, getPageItems } from "./components/pagination/pagination.js";
21
24
  import { RadioGroup, RadioGroupItem } from "./components/radio-group/radio-group.js";
25
+ import { Progress } from "./components/progress/progress.js";
22
26
  import { Separator } from "./components/separator/separator.js";
23
- import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./components/tooltip/tooltip.js";
24
27
  import { Sidebar, SidebarGroup, SidebarItem } from "./components/sidebar/sidebar.js";
25
28
  import { Skeleton } from "./components/skeleton/skeleton.js";
29
+ import { Spinner, spinnerVariants } from "./components/spinner/spinner.js";
26
30
  import { Switch } from "./components/switch/switch.js";
27
31
  import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from "./components/table/table.js";
28
32
  import { Tabs, TabsContent, TabsList, TabsTrigger } from "./components/tabs/tabs.js";
29
33
  import { Textarea } from "./components/textarea/textarea.js";
30
34
  import { Toaster, toast } from "./components/toast/toast.js";
31
- 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 };
35
+ 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, LabeledField, Menu, MenuCheckboxItem, MenuContent, MenuGroup, MenuGroupLabel, MenuItem, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuSub, MenuSubContent, MenuSubTrigger, MenuTrigger, NumberField, Pagination, Popover, PopoverArrow, 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 CHANGED
@@ -1,6 +1,5 @@
1
- import { createCn } from "cn/config";
2
- //#region src/lib/cn.ts
3
- /** Merges class names; conflict resolution only applies to utilities with the library's `asu` prefix. */
4
- const cn = createCn({ prefix: "asu" });
5
- //#endregion
6
- export { cn };
1
+ import { cn } from "cn";
2
+ // src/lib/cn.ts
3
+ /** Merges class names; a later utility replaces an earlier one that sets the same property. */
4
+ const cn$1 = cn;
5
+ export { cn$1 as cn };
@@ -1,6 +1,5 @@
1
- //#region src/lib/control.ts
2
- 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";
3
- const controlFocus = "asu:focus-visible:border-ring asu:focus-visible:ring-2 asu:focus-visible:ring-ring/40 asu:aria-invalid:focus-visible:ring-destructive/40 asu:data-invalid:focus-visible:ring-destructive/40";
4
- const controlFocusWithin = "asu:focus-within:border-ring asu:focus-within:ring-2 asu:focus-within:ring-ring/40 asu:aria-invalid:focus-within:ring-destructive/40 asu:data-invalid:focus-within:ring-destructive/40";
5
- //#endregion
1
+ // src/lib/control.ts
2
+ 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";
3
+ 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";
4
+ 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";
6
5
  export { controlFocus, controlFocusWithin, controlSurface };
package/dist/lib/popup.js CHANGED
@@ -1,6 +1,6 @@
1
- //#region src/lib/popup.ts
2
- const popupClassName = "asu:rounded-md asu:border asu:border-border asu:bg-popover asu:text-popover-foreground asu:shadow-md asu:outline-none";
3
- const listboxClassName = "asu:max-h-[300px] asu:overflow-y-auto asu:rounded-sm asu:bg-muted asu:text-sm asu:shadow-md asu:dark:ring-1 asu:dark:ring-border";
4
- 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";
5
- //#endregion
6
- export { listItemClassName, listboxClassName, popupClassName };
1
+ // src/lib/popup.ts
2
+ const popupLayerClassName = "z-50";
3
+ const popupClassName = "rounded-md border border-border bg-popover text-popover-foreground shadow-md outline-none";
4
+ const listboxClassName = "max-h-[300px] overflow-y-auto rounded-sm bg-muted text-sm shadow-md dark:ring-1 dark:ring-border";
5
+ 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";
6
+ export { listItemClassName, listboxClassName, popupClassName, popupLayerClassName };
package/dist/theme.css ADDED
@@ -0,0 +1,220 @@
1
+ /* Generated by scripts/generate-tokens.ts from src/tokens/*.ts. Do not edit. */
2
+
3
+ @import './animations.css';
4
+
5
+ @source './components';
6
+ @source './lib';
7
+ @source not './**/*.test.tsx';
8
+ @source not './**/*.stories.tsx';
9
+
10
+ @custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *):not(:where([data-theme=dark] [data-theme=light], [data-theme=dark] [data-theme=light] *)));
11
+
12
+ @theme static {
13
+ --color-background: #FFFFFF;
14
+ --color-foreground: #2C2C2C;
15
+ --color-card: #FFFFFF;
16
+ --color-card-foreground: #2C2C2C;
17
+ --color-popover: #FFFFFF;
18
+ --color-popover-foreground: #2C2C2C;
19
+ --color-primary: #065FD4;
20
+ --color-primary-hover: #084BA4;
21
+ --color-primary-foreground: #FFFFFF;
22
+ --color-primary-text: #065FD4;
23
+ --color-secondary: #F7F7F7;
24
+ --color-secondary-foreground: #2C2C2C;
25
+ --color-muted: #F7F7F7;
26
+ --color-muted-foreground: #686868;
27
+ --color-accent: #F7F7F7;
28
+ --color-accent-foreground: #2C2C2C;
29
+ --color-destructive: #C40A04;
30
+ --color-destructive-hover: #910601;
31
+ --color-destructive-foreground: #FFFFFF;
32
+ --color-destructive-text: #C40A04;
33
+ --color-destructive-subtle: #FFF8F7;
34
+ --color-success: #1FA333;
35
+ --color-success-foreground: #11701F;
36
+ --color-success-subtle: #F7FFF9;
37
+ --color-warning: #CC7F08;
38
+ --color-warning-foreground: #995F06;
39
+ --color-warning-subtle: #FFF9F0;
40
+ --color-info: #065FD4;
41
+ --color-info-foreground: #084BA4;
42
+ --color-info-subtle: #ECF5FD;
43
+ --color-border: #F0F0F0;
44
+ --color-input: #E0E0E0;
45
+ --color-ring: #065FD4;
46
+ --color-tooltip: #3C4557;
47
+ --color-tooltip-foreground: #FFFFFF;
48
+ --color-table-header: #F5F6FA;
49
+ --color-secondary-hover: #F0F0F0;
50
+ --color-accent-hover: #F0F0F0;
51
+ --color-accent-selected: #E0E0E0;
52
+ --color-overlay: #2C2C2C73;
53
+ --color-sidebar-accent: #F0F0F0;
54
+ --color-sidebar-indicator: #F84037;
55
+ --radius-sm: 2px;
56
+ --radius-md: 4px;
57
+ --font-sans: "Inter Variable", "Inter", ui-sans-serif, system-ui, sans-serif;
58
+ --badge-gray-bg: #F7F7F7;
59
+ --badge-gray-fg: #484848;
60
+ --badge-slate-bg: #EAECF3;
61
+ --badge-slate-fg: #44506F;
62
+ --badge-blue-bg: #D6EAFF;
63
+ --badge-blue-fg: #084BA4;
64
+ --badge-green-bg: #E1FAE5;
65
+ --badge-green-fg: #11701F;
66
+ --badge-red-bg: #FFE2E0;
67
+ --badge-red-fg: #910601;
68
+ --badge-yellow-bg: #FFF8D6;
69
+ --badge-yellow-fg: #665202;
70
+ --badge-orange-bg: #FFEFD6;
71
+ --badge-orange-fg: #995F06;
72
+ --badge-cyan-bg: #D6F3FF;
73
+ --badge-cyan-fg: #1E6E8F;
74
+ --badge-indigo-bg: #E4E4F5;
75
+ --badge-indigo-fg: #201F99;
76
+ --badge-purple-bg: #F4E3FD;
77
+ --badge-purple-fg: #65188C;
78
+ --badge-pink-bg: #FFE0ED;
79
+ --badge-pink-fg: #991147;
80
+ }
81
+
82
+ :root {
83
+ color-scheme: light;
84
+ }
85
+
86
+ [data-theme=light] {
87
+ color-scheme: light;
88
+ --color-background: #FFFFFF;
89
+ --color-foreground: #2C2C2C;
90
+ --color-card: #FFFFFF;
91
+ --color-card-foreground: #2C2C2C;
92
+ --color-popover: #FFFFFF;
93
+ --color-popover-foreground: #2C2C2C;
94
+ --color-primary: #065FD4;
95
+ --color-primary-hover: #084BA4;
96
+ --color-primary-foreground: #FFFFFF;
97
+ --color-primary-text: #065FD4;
98
+ --color-secondary: #F7F7F7;
99
+ --color-secondary-foreground: #2C2C2C;
100
+ --color-muted: #F7F7F7;
101
+ --color-muted-foreground: #686868;
102
+ --color-accent: #F7F7F7;
103
+ --color-accent-foreground: #2C2C2C;
104
+ --color-destructive: #C40A04;
105
+ --color-destructive-hover: #910601;
106
+ --color-destructive-foreground: #FFFFFF;
107
+ --color-destructive-text: #C40A04;
108
+ --color-destructive-subtle: #FFF8F7;
109
+ --color-success: #1FA333;
110
+ --color-success-foreground: #11701F;
111
+ --color-success-subtle: #F7FFF9;
112
+ --color-warning: #CC7F08;
113
+ --color-warning-foreground: #995F06;
114
+ --color-warning-subtle: #FFF9F0;
115
+ --color-info: #065FD4;
116
+ --color-info-foreground: #084BA4;
117
+ --color-info-subtle: #ECF5FD;
118
+ --color-border: #F0F0F0;
119
+ --color-input: #E0E0E0;
120
+ --color-ring: #065FD4;
121
+ --color-tooltip: #3C4557;
122
+ --color-tooltip-foreground: #FFFFFF;
123
+ --color-table-header: #F5F6FA;
124
+ --color-secondary-hover: #F0F0F0;
125
+ --color-accent-hover: #F0F0F0;
126
+ --color-accent-selected: #E0E0E0;
127
+ --color-overlay: #2C2C2C73;
128
+ --color-sidebar-accent: #F0F0F0;
129
+ --color-sidebar-indicator: #F84037;
130
+ --badge-gray-bg: #F7F7F7;
131
+ --badge-gray-fg: #484848;
132
+ --badge-slate-bg: #EAECF3;
133
+ --badge-slate-fg: #44506F;
134
+ --badge-blue-bg: #D6EAFF;
135
+ --badge-blue-fg: #084BA4;
136
+ --badge-green-bg: #E1FAE5;
137
+ --badge-green-fg: #11701F;
138
+ --badge-red-bg: #FFE2E0;
139
+ --badge-red-fg: #910601;
140
+ --badge-yellow-bg: #FFF8D6;
141
+ --badge-yellow-fg: #665202;
142
+ --badge-orange-bg: #FFEFD6;
143
+ --badge-orange-fg: #995F06;
144
+ --badge-cyan-bg: #D6F3FF;
145
+ --badge-cyan-fg: #1E6E8F;
146
+ --badge-indigo-bg: #E4E4F5;
147
+ --badge-indigo-fg: #201F99;
148
+ --badge-purple-bg: #F4E3FD;
149
+ --badge-purple-fg: #65188C;
150
+ --badge-pink-bg: #FFE0ED;
151
+ --badge-pink-fg: #991147;
152
+ }
153
+
154
+ [data-theme=dark] {
155
+ color-scheme: dark;
156
+ --color-background: #1A1A1A;
157
+ --color-foreground: #F7F7F7;
158
+ --color-card: #1A1A1A;
159
+ --color-card-foreground: #F7F7F7;
160
+ --color-popover: #1A1A1A;
161
+ --color-popover-foreground: #F7F7F7;
162
+ --color-primary: #065FD4;
163
+ --color-primary-hover: #084BA4;
164
+ --color-primary-foreground: #FFFFFF;
165
+ --color-primary-text: #5E9AE8;
166
+ --color-secondary: #232323;
167
+ --color-secondary-foreground: #F7F7F7;
168
+ --color-muted: #232323;
169
+ --color-muted-foreground: #C0C0C0;
170
+ --color-accent: #232323;
171
+ --color-accent-foreground: #F7F7F7;
172
+ --color-destructive: #C40A04;
173
+ --color-destructive-hover: #910601;
174
+ --color-destructive-foreground: #FFFFFF;
175
+ --color-destructive-text: #FA7069;
176
+ --color-destructive-subtle: #5E0401;
177
+ --color-success: #32D74B;
178
+ --color-success-foreground: #95EDA3;
179
+ --color-success-subtle: #074210;
180
+ --color-warning: #FF9F0A;
181
+ --color-warning-foreground: #FECA86;
182
+ --color-warning-subtle: #664004;
183
+ --color-info: #5E9AE8;
184
+ --color-info-foreground: #84B6F0;
185
+ --color-info-subtle: #043566;
186
+ --color-border: #FFFFFF1A;
187
+ --color-input: #FFFFFF26;
188
+ --color-ring: #5E9AE8;
189
+ --color-tooltip: #EAECF3;
190
+ --color-tooltip-foreground: #151B25;
191
+ --color-table-header: #282F3D;
192
+ --color-secondary-hover: #2C2C2C;
193
+ --color-accent-hover: #2C2C2C;
194
+ --color-accent-selected: #484848;
195
+ --color-overlay: #00000099;
196
+ --color-sidebar-accent: #2C2C2C;
197
+ --color-sidebar-indicator: #F84037;
198
+ --badge-gray-bg: #484848;
199
+ --badge-gray-fg: #F7F7F7;
200
+ --badge-slate-bg: #44506F;
201
+ --badge-slate-fg: #EAECF3;
202
+ --badge-blue-bg: #084BA4;
203
+ --badge-blue-fg: #D6EAFF;
204
+ --badge-green-bg: #11701F;
205
+ --badge-green-fg: #E1FAE5;
206
+ --badge-red-bg: #910601;
207
+ --badge-red-fg: #FFE2E0;
208
+ --badge-yellow-bg: #665202;
209
+ --badge-yellow-fg: #FFF8D6;
210
+ --badge-orange-bg: #995F06;
211
+ --badge-orange-fg: #FFEFD6;
212
+ --badge-cyan-bg: #1E6E8F;
213
+ --badge-cyan-fg: #D6F3FF;
214
+ --badge-indigo-bg: #201F99;
215
+ --badge-indigo-fg: #E4E4F5;
216
+ --badge-purple-bg: #65188C;
217
+ --badge-purple-fg: #F4E3FD;
218
+ --badge-pink-bg: #991147;
219
+ --badge-pink-fg: #FFE0ED;
220
+ }
@@ -1,6 +1,5 @@
1
1
  import { Palette } from "./types.js";
2
2
  import { SemanticMap } from "./semantic.js";
3
- //#region src/tokens/contrast.d.ts
4
3
  export declare const AA = 4.5;
5
4
  export interface ContrastPair {
6
5
  name: string;
@@ -9,5 +8,4 @@ export interface ContrastPair {
9
8
  ratio: number;
10
9
  }
11
10
  export declare function semanticPairs(map: SemanticMap): ContrastPair[];
12
- export declare function badgePairs(theme?: 'light' | 'dark', p?: Palette): ContrastPair[];
13
- //#endregion
11
+ export declare function badgePairs(theme?: 'light' | 'dark', p?: Palette): ContrastPair[];
@@ -2,7 +2,7 @@ import { FAMILIES } from "./types.js";
2
2
  import { palette } from "./palette.js";
3
3
  import { resolveRef } from "./semantic.js";
4
4
  import { wcagContrast } from "culori";
5
- //#region src/tokens/contrast.ts
5
+ // src/tokens/contrast.ts
6
6
  const AA = 4.5;
7
7
  const TEXT_TOKENS = [
8
8
  "foreground",
@@ -75,5 +75,4 @@ function badgePairs(theme = "light", p = palette) {
75
75
  const { background, foreground } = BADGE_STEPS[theme];
76
76
  return FAMILIES.map((family) => pair(`badge ${family}`, p[family][foreground], p[family][background]));
77
77
  }
78
- //#endregion
79
78
  export { AA, BADGE_STEPS, SURFACE_TOKENS, TEXT_TOKENS, badgePairs, semanticPairs };
@@ -1,5 +1,3 @@
1
1
  import { FAMILIES, Family, Palette, STEPS, Step } from "./types.js";
2
- //#region src/tokens/palette.d.ts
3
2
  export declare const palette: Palette;
4
- //#endregion
5
3
  export { FAMILIES, type Family, type Palette, STEPS, type Step };
@@ -1,6 +1,6 @@
1
1
  import { FAMILIES, STEPS } from "./types.js";
2
2
  import { buildPalette } from "./scale.js";
3
- //#region src/tokens/palette.ts
3
+ // src/tokens/palette.ts
4
4
  const ANCHORS = {
5
5
  gray: {
6
6
  50: "#FCFCFC",
@@ -93,5 +93,4 @@ const ANCHORS = {
93
93
  }
94
94
  };
95
95
  const palette = buildPalette(ANCHORS);
96
- //#endregion
97
96
  export { ANCHORS, FAMILIES, STEPS, palette };
@@ -1,6 +1,6 @@
1
1
  import { STEPS } from "./types.js";
2
2
  import { clampChroma, formatHex, oklch, parse } from "culori";
3
- //#region src/tokens/scale.ts
3
+ // src/tokens/scale.ts
4
4
  const LIGHTEST_MIN = .975;
5
5
  const LIGHTEST_MAX = .995;
6
6
  const DARKEST_MAX = .22;
@@ -94,5 +94,4 @@ function buildScale(anchors) {
94
94
  function buildPalette(anchors) {
95
95
  return Object.fromEntries(Object.entries(anchors).map(([family, set]) => [family, buildScale(set)]));
96
96
  }
97
- //#endregion
98
97
  export { buildPalette, buildScale };
@@ -1,5 +1,4 @@
1
1
  import { Family, Step } from "./types.js";
2
- //#region src/tokens/semantic.d.ts
3
2
  type OpaqueRef = 'white' | 'black' | `${Family}-${Step}`;
4
3
  export type ColorRef = OpaqueRef | `${OpaqueRef}/${number}`;
5
4
  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"];
@@ -9,5 +8,4 @@ export declare const themes: {
9
8
  light: SemanticMap;
10
9
  dark: SemanticMap;
11
10
  };
12
- //#endregion
13
11
  export {};
@@ -106,5 +106,4 @@ function resolveRef(ref, p = palette) {
106
106
  if (!hex) throw new Error(`Unknown color reference: ${ref}`);
107
107
  return hex;
108
108
  }
109
- //#endregion
110
109
  export { resolveRef, themes };
@@ -1,7 +1,5 @@
1
- //#region src/tokens/types.d.ts
2
1
  export declare const STEPS: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
3
2
  export type Step = (typeof STEPS)[number];
4
3
  export declare const FAMILIES: readonly ["gray", "slate", "blue", "green", "red", "yellow", "orange", "cyan", "indigo", "purple", "pink"];
5
4
  export type Family = (typeof FAMILIES)[number];
6
- export type Palette = Record<Family, Record<Step, string>>;
7
- //#endregion
5
+ export type Palette = Record<Family, Record<Step, string>>;
@@ -1,4 +1,4 @@
1
- //#region src/tokens/types.ts
1
+ // src/tokens/types.ts
2
2
  const STEPS = [
3
3
  50,
4
4
  100,
@@ -25,5 +25,4 @@ const FAMILIES = [
25
25
  "purple",
26
26
  "pink"
27
27
  ];
28
- //#endregion
29
28
  export { FAMILIES, STEPS };