@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.
- package/README.md +221 -30
- package/dist/animations.css +12 -0
- package/dist/components/alert/alert.d.ts +0 -2
- package/dist/components/alert/alert.js +8 -9
- package/dist/components/avatar/avatar.d.ts +4 -6
- package/dist/components/avatar/avatar.js +7 -8
- package/dist/components/badge/badge.d.ts +0 -2
- package/dist/components/badge/badge.js +15 -16
- package/dist/components/button/button.d.ts +1 -4
- package/dist/components/button/button.js +15 -16
- package/dist/components/calendar/calendar.d.ts +1 -3
- package/dist/components/calendar/calendar.js +29 -30
- package/dist/components/checkbox/checkbox.d.ts +0 -2
- package/dist/components/checkbox/checkbox.js +4 -5
- package/dist/components/combobox/combobox.d.ts +0 -2
- package/dist/components/combobox/combobox.js +25 -25
- package/dist/components/data-table/data-table.d.ts +0 -2
- package/dist/components/data-table/data-table.js +8 -9
- package/dist/components/data-table/filter-header.d.ts +1 -3
- package/dist/components/data-table/filter-header.js +5 -6
- package/dist/components/data-table/sort-header.js +3 -4
- package/dist/components/date-picker/date-picker.d.ts +0 -2
- package/dist/components/date-picker/date-picker.js +15 -16
- package/dist/components/description-list/description-list.d.ts +24 -0
- package/dist/components/description-list/description-list.js +88 -0
- package/dist/components/dialog/dialog.d.ts +0 -2
- package/dist/components/dialog/dialog.js +12 -13
- package/dist/components/drawer/drawer.d.ts +0 -2
- package/dist/components/drawer/drawer.js +13 -14
- package/dist/components/empty/empty.d.ts +0 -2
- package/dist/components/empty/empty.js +9 -10
- package/dist/components/field/field.d.ts +0 -2
- package/dist/components/field/field.js +7 -8
- package/dist/components/field/labeled-field.d.ts +33 -0
- package/dist/components/field/labeled-field.js +67 -0
- package/dist/components/form/choice-fields.d.ts +1 -3
- package/dist/components/form/choice-fields.js +1 -2
- package/dist/components/form/date-fields.d.ts +0 -2
- package/dist/components/form/date-fields.js +2 -3
- package/dist/components/form/errors.d.ts +1 -3
- package/dist/components/form/errors.js +1 -2
- package/dist/components/form/form-context.d.ts +1 -3
- package/dist/components/form/form-context.js +1 -2
- package/dist/components/form/form-item.d.ts +6 -17
- package/dist/components/form/form-item.js +9 -58
- package/dist/components/form/form.d.ts +1 -3
- package/dist/components/form/form.js +1 -2
- package/dist/components/form/lazy-field-components.js +2 -3
- package/dist/components/form/submit-button.d.ts +1 -3
- package/dist/components/form/submit-button.js +1 -2
- package/dist/components/form/text-field.d.ts +1 -3
- package/dist/components/form/text-field.js +1 -2
- package/dist/components/form/toggle-fields.d.ts +1 -3
- package/dist/components/form/toggle-fields.js +30 -46
- package/dist/components/input/input.d.ts +0 -2
- package/dist/components/input/input.js +2 -3
- package/dist/components/input-group/input-group.d.ts +0 -2
- package/dist/components/input-group/input-group.js +12 -13
- package/dist/components/menu/menu.d.ts +14 -4
- package/dist/components/menu/menu.js +43 -31
- package/dist/components/number-field/number-field.d.ts +0 -2
- package/dist/components/number-field/number-field.js +8 -9
- package/dist/components/pagination/pagination.d.ts +1 -3
- package/dist/components/pagination/pagination.js +13 -14
- package/dist/components/popover/popover.d.ts +3 -3
- package/dist/components/popover/popover.js +14 -7
- package/dist/components/progress/progress.d.ts +17 -0
- package/dist/components/progress/progress.js +35 -0
- package/dist/components/radio-group/radio-group.d.ts +0 -2
- package/dist/components/radio-group/radio-group.js +4 -5
- package/dist/components/select/select.d.ts +0 -2
- package/dist/components/select/select.js +18 -18
- package/dist/components/separator/separator.d.ts +0 -2
- package/dist/components/separator/separator.js +2 -3
- package/dist/components/sidebar/sidebar.d.ts +0 -2
- package/dist/components/sidebar/sidebar.js +11 -12
- package/dist/components/skeleton/skeleton.d.ts +0 -2
- package/dist/components/skeleton/skeleton.js +2 -3
- package/dist/components/spinner/spinner.d.ts +12 -0
- package/dist/components/spinner/spinner.js +27 -0
- package/dist/components/switch/switch.d.ts +0 -2
- package/dist/components/switch/switch.js +3 -4
- package/dist/components/table/table.d.ts +0 -2
- package/dist/components/table/table.js +8 -9
- package/dist/components/tabs/tabs.d.ts +0 -2
- package/dist/components/tabs/tabs.js +5 -6
- package/dist/components/textarea/textarea.d.ts +0 -2
- package/dist/components/textarea/textarea.js +2 -3
- package/dist/components/toast/toast.d.ts +0 -2
- package/dist/components/toast/toast.js +19 -20
- package/dist/components/tooltip/tooltip.d.ts +0 -2
- package/dist/components/tooltip/tooltip.js +5 -4
- package/dist/config/config-provider.d.ts +1 -3
- package/dist/config/config-provider.js +1 -2
- package/dist/config/messages.d.ts +5 -3
- package/dist/config/messages.js +3 -2
- package/dist/index.d.ts +6 -2
- package/dist/index.js +7 -3
- package/dist/lib/cn.js +5 -6
- package/dist/lib/control.js +4 -5
- package/dist/lib/popup.js +6 -6
- package/dist/theme.css +220 -0
- package/dist/tokens/contrast.d.ts +1 -3
- package/dist/tokens/contrast.js +1 -2
- package/dist/tokens/palette.d.ts +0 -2
- package/dist/tokens/palette.js +1 -2
- package/dist/tokens/scale.js +1 -2
- package/dist/tokens/semantic.d.ts +0 -2
- package/dist/tokens/semantic.js +0 -1
- package/dist/tokens/types.d.ts +1 -3
- package/dist/tokens/types.js +1 -2
- package/package.json +11 -9
- 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
|
-
|
|
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("
|
|
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: "
|
|
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
|
-
|
|
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]>; };
|
package/dist/config/messages.js
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
|
-
|
|
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 {
|
|
2
|
-
|
|
3
|
-
/** Merges class names;
|
|
4
|
-
const cn =
|
|
5
|
-
|
|
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 };
|
package/dist/lib/control.js
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
const controlSurface = "
|
|
3
|
-
const controlFocus = "
|
|
4
|
-
const controlFocusWithin = "
|
|
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
|
-
|
|
2
|
-
const
|
|
3
|
-
const
|
|
4
|
-
const
|
|
5
|
-
|
|
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[];
|
package/dist/tokens/contrast.js
CHANGED
|
@@ -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
|
-
|
|
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 };
|
package/dist/tokens/palette.d.ts
CHANGED
package/dist/tokens/palette.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { FAMILIES, STEPS } from "./types.js";
|
|
2
2
|
import { buildPalette } from "./scale.js";
|
|
3
|
-
|
|
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 };
|
package/dist/tokens/scale.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { STEPS } from "./types.js";
|
|
2
2
|
import { clampChroma, formatHex, oklch, parse } from "culori";
|
|
3
|
-
|
|
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 {};
|
package/dist/tokens/semantic.js
CHANGED
package/dist/tokens/types.d.ts
CHANGED
|
@@ -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>>;
|