@gradeui/ui 0.1.1
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/LICENSE +21 -0
- package/README.md +53 -0
- package/dist/index.d.mts +824 -0
- package/dist/index.d.ts +824 -0
- package/dist/index.js +231 -0
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +231 -0
- package/dist/index.mjs.map +1 -0
- package/dist/styles.css +1 -0
- package/dist/tailwind-preset.d.mts +20 -0
- package/dist/tailwind-preset.d.ts +20 -0
- package/dist/tailwind-preset.js +2 -0
- package/dist/tailwind-preset.js.map +1 -0
- package/dist/tailwind-preset.mjs +2 -0
- package/dist/tailwind-preset.mjs.map +1 -0
- package/package.json +110 -0
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,824 @@
|
|
|
1
|
+
import * as React$1 from 'react';
|
|
2
|
+
import * as AccordionPrimitive from '@radix-ui/react-accordion';
|
|
3
|
+
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
4
|
+
import { VariantProps } from 'class-variance-authority';
|
|
5
|
+
import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
|
|
6
|
+
import * as DialogPrimitive from '@radix-ui/react-dialog';
|
|
7
|
+
import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
|
|
8
|
+
import * as LabelPrimitive from '@radix-ui/react-label';
|
|
9
|
+
import * as ProgressPrimitive from '@radix-ui/react-progress';
|
|
10
|
+
import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
|
|
11
|
+
import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
|
|
12
|
+
import * as SelectPrimitive from '@radix-ui/react-select';
|
|
13
|
+
import * as SeparatorPrimitive from '@radix-ui/react-separator';
|
|
14
|
+
import * as SliderPrimitive from '@radix-ui/react-slider';
|
|
15
|
+
import * as SwitchPrimitives from '@radix-ui/react-switch';
|
|
16
|
+
import * as TabsPrimitive from '@radix-ui/react-tabs';
|
|
17
|
+
import * as TooltipPrimitive from '@radix-ui/react-tooltip';
|
|
18
|
+
import { ClassValue } from 'clsx';
|
|
19
|
+
|
|
20
|
+
declare const Accordion: React$1.ForwardRefExoticComponent<(AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps) & React$1.RefAttributes<HTMLDivElement>>;
|
|
21
|
+
declare const AccordionItem: React$1.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionItemProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
22
|
+
declare const AccordionTrigger: React$1.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionTriggerProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
|
|
23
|
+
declare const AccordionContent: React$1.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
24
|
+
|
|
25
|
+
declare const Alert: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
|
|
26
|
+
variant?: "success" | "warning" | "info" | "highlight" | "destructive" | "default" | null | undefined;
|
|
27
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string> & React$1.RefAttributes<HTMLDivElement>>;
|
|
28
|
+
declare const AlertTitle: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLHeadingElement> & React$1.RefAttributes<HTMLParagraphElement>>;
|
|
29
|
+
declare const AlertDescription: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLParagraphElement> & React$1.RefAttributes<HTMLParagraphElement>>;
|
|
30
|
+
|
|
31
|
+
declare const badgeVariants: (props?: ({
|
|
32
|
+
variant?: "success" | "warning" | "info" | "highlight" | "secondary" | "destructive" | "default" | "outline" | "success-soft" | "warning-soft" | "destructive-soft" | "info-soft" | "highlight-soft" | "success-outline" | "warning-outline" | "destructive-outline" | "info-outline" | null | undefined;
|
|
33
|
+
rounded?: "default" | "full" | null | undefined;
|
|
34
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
35
|
+
interface BadgeProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
|
|
36
|
+
}
|
|
37
|
+
declare function Badge({ className, variant, rounded, ...props }: BadgeProps): React$1.JSX.Element;
|
|
38
|
+
|
|
39
|
+
declare const buttonVariants: (props?: ({
|
|
40
|
+
variant?: "link" | "secondary" | "destructive" | "default" | "outline" | "ghost" | null | undefined;
|
|
41
|
+
size?: "lg" | "sm" | "default" | "icon" | null | undefined;
|
|
42
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
43
|
+
interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
|
|
44
|
+
asChild?: boolean;
|
|
45
|
+
}
|
|
46
|
+
declare const Button: React$1.ForwardRefExoticComponent<ButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
|
|
47
|
+
|
|
48
|
+
declare const Card: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
|
|
49
|
+
declare const CardHeader: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
|
|
50
|
+
declare const CardTitle: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
|
|
51
|
+
declare const CardDescription: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
|
|
52
|
+
declare const CardContent: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
|
|
53
|
+
declare const CardFooter: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
|
|
54
|
+
|
|
55
|
+
declare const Checkbox: React$1.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
|
|
56
|
+
|
|
57
|
+
declare const Dialog: React$1.FC<DialogPrimitive.DialogProps>;
|
|
58
|
+
declare const DialogTrigger: React$1.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
|
|
59
|
+
declare const DialogPortal: React$1.FC<DialogPrimitive.DialogPortalProps>;
|
|
60
|
+
declare const DialogClose: React$1.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React$1.RefAttributes<HTMLButtonElement>>;
|
|
61
|
+
declare const DialogOverlay: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
62
|
+
declare const DialogContent: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
63
|
+
declare const DialogHeader: {
|
|
64
|
+
({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): React$1.JSX.Element;
|
|
65
|
+
displayName: string;
|
|
66
|
+
};
|
|
67
|
+
declare const DialogFooter: {
|
|
68
|
+
({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): React$1.JSX.Element;
|
|
69
|
+
displayName: string;
|
|
70
|
+
};
|
|
71
|
+
declare const DialogTitle: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React$1.RefAttributes<HTMLHeadingElement>, "ref"> & React$1.RefAttributes<HTMLHeadingElement>>;
|
|
72
|
+
declare const DialogDescription: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React$1.RefAttributes<HTMLParagraphElement>, "ref"> & React$1.RefAttributes<HTMLParagraphElement>>;
|
|
73
|
+
|
|
74
|
+
declare const DropdownMenu: React$1.FC<DropdownMenuPrimitive.DropdownMenuProps>;
|
|
75
|
+
declare const DropdownMenuTrigger: React$1.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
|
|
76
|
+
declare const DropdownMenuGroup: React$1.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuGroupProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
77
|
+
declare const DropdownMenuPortal: React$1.FC<DropdownMenuPrimitive.DropdownMenuPortalProps>;
|
|
78
|
+
declare const DropdownMenuSub: React$1.FC<DropdownMenuPrimitive.DropdownMenuSubProps>;
|
|
79
|
+
declare const DropdownMenuRadioGroup: React$1.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuRadioGroupProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
80
|
+
declare const DropdownMenuSubTrigger: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubTriggerProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
81
|
+
inset?: boolean;
|
|
82
|
+
} & React$1.RefAttributes<HTMLDivElement>>;
|
|
83
|
+
declare const DropdownMenuSubContent: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
84
|
+
declare const DropdownMenuContent: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
85
|
+
declare const DropdownMenuItem: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
86
|
+
inset?: boolean;
|
|
87
|
+
} & React$1.RefAttributes<HTMLDivElement>>;
|
|
88
|
+
declare const DropdownMenuCheckboxItem: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuCheckboxItemProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
89
|
+
declare const DropdownMenuRadioItem: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuRadioItemProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
90
|
+
declare const DropdownMenuLabel: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuLabelProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
91
|
+
inset?: boolean;
|
|
92
|
+
} & React$1.RefAttributes<HTMLDivElement>>;
|
|
93
|
+
declare const DropdownMenuSeparator: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSeparatorProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
94
|
+
declare const DropdownMenuShortcut: {
|
|
95
|
+
({ className, ...props }: React$1.HTMLAttributes<HTMLSpanElement>): React$1.JSX.Element;
|
|
96
|
+
displayName: string;
|
|
97
|
+
};
|
|
98
|
+
|
|
99
|
+
declare const Input: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
|
|
100
|
+
|
|
101
|
+
declare const Label: React$1.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React$1.RefAttributes<HTMLLabelElement>, "ref"> & VariantProps<(props?: class_variance_authority_types.ClassProp | undefined) => string> & React$1.RefAttributes<HTMLLabelElement>>;
|
|
102
|
+
|
|
103
|
+
declare const Progress: React$1.ForwardRefExoticComponent<Omit<ProgressPrimitive.ProgressProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
104
|
+
|
|
105
|
+
declare const RadioGroup: React$1.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
106
|
+
declare const RadioGroupItem: React$1.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupItemProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
|
|
107
|
+
|
|
108
|
+
declare const ScrollArea: React$1.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
109
|
+
declare const ScrollBar: React$1.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaScrollbarProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
110
|
+
|
|
111
|
+
declare const Select: React$1.FC<SelectPrimitive.SelectProps>;
|
|
112
|
+
declare const SelectGroup: React$1.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
113
|
+
declare const SelectValue: React$1.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React$1.RefAttributes<HTMLSpanElement>>;
|
|
114
|
+
declare const SelectTrigger: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
|
|
115
|
+
declare const SelectScrollUpButton: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
116
|
+
declare const SelectScrollDownButton: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollDownButtonProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
117
|
+
declare const SelectContent: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
118
|
+
declare const SelectLabel: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
119
|
+
declare const SelectItem: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
120
|
+
declare const SelectSeparator: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
121
|
+
|
|
122
|
+
declare const Separator: React$1.ForwardRefExoticComponent<Omit<SeparatorPrimitive.SeparatorProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
123
|
+
|
|
124
|
+
declare const Sheet: React$1.FC<DialogPrimitive.DialogProps>;
|
|
125
|
+
declare const SheetTrigger: React$1.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
|
|
126
|
+
declare const SheetClose: React$1.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React$1.RefAttributes<HTMLButtonElement>>;
|
|
127
|
+
declare const SheetPortal: React$1.FC<DialogPrimitive.DialogPortalProps>;
|
|
128
|
+
declare const SheetOverlay: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
129
|
+
declare const sheetVariants: (props?: ({
|
|
130
|
+
side?: "top" | "right" | "bottom" | "left" | null | undefined;
|
|
131
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
132
|
+
interface SheetContentProps extends React$1.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, VariantProps<typeof sheetVariants> {
|
|
133
|
+
}
|
|
134
|
+
declare const SheetContent: React$1.ForwardRefExoticComponent<SheetContentProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
135
|
+
declare const SheetHeader: {
|
|
136
|
+
({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): React$1.JSX.Element;
|
|
137
|
+
displayName: string;
|
|
138
|
+
};
|
|
139
|
+
declare const SheetFooter: {
|
|
140
|
+
({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): React$1.JSX.Element;
|
|
141
|
+
displayName: string;
|
|
142
|
+
};
|
|
143
|
+
declare const SheetTitle: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React$1.RefAttributes<HTMLHeadingElement>, "ref"> & React$1.RefAttributes<HTMLHeadingElement>>;
|
|
144
|
+
declare const SheetDescription: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React$1.RefAttributes<HTMLParagraphElement>, "ref"> & React$1.RefAttributes<HTMLParagraphElement>>;
|
|
145
|
+
|
|
146
|
+
declare function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React$1.JSX.Element;
|
|
147
|
+
|
|
148
|
+
declare const Slider: React$1.ForwardRefExoticComponent<Omit<SliderPrimitive.SliderProps & React$1.RefAttributes<HTMLSpanElement>, "ref"> & React$1.RefAttributes<HTMLSpanElement>>;
|
|
149
|
+
|
|
150
|
+
declare const Switch: React$1.ForwardRefExoticComponent<Omit<SwitchPrimitives.SwitchProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
|
|
151
|
+
|
|
152
|
+
declare const Table: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLTableElement> & React$1.RefAttributes<HTMLTableElement>>;
|
|
153
|
+
declare const TableHeader: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLTableSectionElement> & React$1.RefAttributes<HTMLTableSectionElement>>;
|
|
154
|
+
declare const TableBody: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLTableSectionElement> & React$1.RefAttributes<HTMLTableSectionElement>>;
|
|
155
|
+
declare const TableFooter: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLTableSectionElement> & React$1.RefAttributes<HTMLTableSectionElement>>;
|
|
156
|
+
declare const TableRow: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLTableRowElement> & React$1.RefAttributes<HTMLTableRowElement>>;
|
|
157
|
+
declare const TableHead: React$1.ForwardRefExoticComponent<React$1.ThHTMLAttributes<HTMLTableCellElement> & React$1.RefAttributes<HTMLTableCellElement>>;
|
|
158
|
+
declare const TableCell: React$1.ForwardRefExoticComponent<React$1.TdHTMLAttributes<HTMLTableCellElement> & React$1.RefAttributes<HTMLTableCellElement>>;
|
|
159
|
+
declare const TableCaption: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLTableCaptionElement> & React$1.RefAttributes<HTMLTableCaptionElement>>;
|
|
160
|
+
|
|
161
|
+
declare const Tabs: React$1.ForwardRefExoticComponent<TabsPrimitive.TabsProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
162
|
+
declare const TabsList: React$1.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsListProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
163
|
+
declare const TabsTrigger: React$1.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
|
|
164
|
+
declare const TabsContent: React$1.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
165
|
+
|
|
166
|
+
declare const Textarea: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref"> & React$1.RefAttributes<HTMLTextAreaElement>>;
|
|
167
|
+
|
|
168
|
+
interface SideMenuItem {
|
|
169
|
+
id: string;
|
|
170
|
+
label: string;
|
|
171
|
+
href?: string;
|
|
172
|
+
icon?: React$1.ReactNode;
|
|
173
|
+
badge?: string | number;
|
|
174
|
+
onClick?: () => void;
|
|
175
|
+
disabled?: boolean;
|
|
176
|
+
}
|
|
177
|
+
interface SideMenuSection {
|
|
178
|
+
id: string;
|
|
179
|
+
title: string;
|
|
180
|
+
icon?: React$1.ReactNode;
|
|
181
|
+
items: SideMenuItem[];
|
|
182
|
+
defaultExpanded?: boolean;
|
|
183
|
+
}
|
|
184
|
+
interface SideMenuProps {
|
|
185
|
+
/** Header content (logo, title, etc.) */
|
|
186
|
+
header?: React$1.ReactNode;
|
|
187
|
+
/** Header content shown when collapsed (icon, etc.) */
|
|
188
|
+
collapsedHeader?: React$1.ReactNode;
|
|
189
|
+
/** Navigation sections with collapsible groups */
|
|
190
|
+
sections?: SideMenuSection[];
|
|
191
|
+
/** Standalone items without sections */
|
|
192
|
+
items?: SideMenuItem[];
|
|
193
|
+
/** Footer content */
|
|
194
|
+
footer?: React$1.ReactNode;
|
|
195
|
+
/** Whether the sidebar is collapsed */
|
|
196
|
+
collapsed?: boolean;
|
|
197
|
+
/** Callback when collapsed state changes */
|
|
198
|
+
onCollapsedChange?: (collapsed: boolean) => void;
|
|
199
|
+
/** Whether the sidebar can be collapsed */
|
|
200
|
+
collapsible?: boolean;
|
|
201
|
+
/** Default collapsed state */
|
|
202
|
+
defaultCollapsed?: boolean;
|
|
203
|
+
/** Currently active item id */
|
|
204
|
+
activeItem?: string;
|
|
205
|
+
/** Custom className */
|
|
206
|
+
className?: string;
|
|
207
|
+
/** Custom link component (e.g., Next.js Link) */
|
|
208
|
+
linkComponent?: React$1.ComponentType<{
|
|
209
|
+
href: string;
|
|
210
|
+
className?: string;
|
|
211
|
+
children: React$1.ReactNode;
|
|
212
|
+
}>;
|
|
213
|
+
}
|
|
214
|
+
declare const SideMenu: React$1.ForwardRefExoticComponent<SideMenuProps & React$1.RefAttributes<HTMLElement>>;
|
|
215
|
+
|
|
216
|
+
interface BreadcrumbItem {
|
|
217
|
+
label: string;
|
|
218
|
+
href?: string;
|
|
219
|
+
}
|
|
220
|
+
interface TopMenuProps {
|
|
221
|
+
/** Breadcrumb navigation items */
|
|
222
|
+
breadcrumbs?: BreadcrumbItem[];
|
|
223
|
+
/** Show mobile menu button */
|
|
224
|
+
showMobileMenu?: boolean;
|
|
225
|
+
/** Mobile menu button click handler */
|
|
226
|
+
onMobileMenuClick?: () => void;
|
|
227
|
+
/** Left side content (appears after breadcrumbs) */
|
|
228
|
+
leftContent?: React$1.ReactNode;
|
|
229
|
+
/** Right side content (actions, user menu, etc.) */
|
|
230
|
+
rightContent?: React$1.ReactNode;
|
|
231
|
+
/** Custom className */
|
|
232
|
+
className?: string;
|
|
233
|
+
/** Custom link component (e.g., Next.js Link) */
|
|
234
|
+
linkComponent?: React$1.ComponentType<{
|
|
235
|
+
href: string;
|
|
236
|
+
className?: string;
|
|
237
|
+
children: React$1.ReactNode;
|
|
238
|
+
}>;
|
|
239
|
+
}
|
|
240
|
+
declare const TopMenu: React$1.ForwardRefExoticComponent<TopMenuProps & React$1.RefAttributes<HTMLElement>>;
|
|
241
|
+
interface TopMenuUserProps {
|
|
242
|
+
/** User name */
|
|
243
|
+
name?: string;
|
|
244
|
+
/** User email */
|
|
245
|
+
email?: string;
|
|
246
|
+
/** User avatar URL */
|
|
247
|
+
avatarUrl?: string;
|
|
248
|
+
/** Custom avatar content (icon, initials, etc.) */
|
|
249
|
+
avatarContent?: React$1.ReactNode;
|
|
250
|
+
/** Avatar background color class */
|
|
251
|
+
avatarClassName?: string;
|
|
252
|
+
/** Menu items */
|
|
253
|
+
children?: React$1.ReactNode;
|
|
254
|
+
/** Custom className */
|
|
255
|
+
className?: string;
|
|
256
|
+
}
|
|
257
|
+
declare const TopMenuUser: React$1.ForwardRefExoticComponent<TopMenuUserProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
258
|
+
interface TopMenuUserItemProps {
|
|
259
|
+
/** Item icon */
|
|
260
|
+
icon?: React$1.ReactNode;
|
|
261
|
+
/** Item label */
|
|
262
|
+
children: React$1.ReactNode;
|
|
263
|
+
/** Click handler */
|
|
264
|
+
onClick?: () => void;
|
|
265
|
+
/** Href for link items */
|
|
266
|
+
href?: string;
|
|
267
|
+
/** Variant */
|
|
268
|
+
variant?: "default" | "danger" | "success";
|
|
269
|
+
/** Custom className */
|
|
270
|
+
className?: string;
|
|
271
|
+
}
|
|
272
|
+
declare const TopMenuUserItem: React$1.ForwardRefExoticComponent<TopMenuUserItemProps & React$1.RefAttributes<HTMLButtonElement>>;
|
|
273
|
+
declare const TopMenuUserSection: React$1.ForwardRefExoticComponent<{
|
|
274
|
+
children: React$1.ReactNode;
|
|
275
|
+
className?: string;
|
|
276
|
+
} & React$1.RefAttributes<HTMLDivElement>>;
|
|
277
|
+
|
|
278
|
+
interface SimpleTab {
|
|
279
|
+
id: string;
|
|
280
|
+
label: string;
|
|
281
|
+
icon?: React$1.ReactNode;
|
|
282
|
+
disabled?: boolean;
|
|
283
|
+
}
|
|
284
|
+
interface SimpleTabsProps {
|
|
285
|
+
/** Array of tab definitions */
|
|
286
|
+
tabs: SimpleTab[];
|
|
287
|
+
/** Currently active tab id */
|
|
288
|
+
activeTab?: string;
|
|
289
|
+
/** Default active tab id (for uncontrolled mode) */
|
|
290
|
+
defaultTab?: string;
|
|
291
|
+
/** Callback when tab changes */
|
|
292
|
+
onTabChange?: (tabId: string) => void;
|
|
293
|
+
/** Tab panel children */
|
|
294
|
+
children?: React$1.ReactNode;
|
|
295
|
+
/** Custom className for the container */
|
|
296
|
+
className?: string;
|
|
297
|
+
/** Custom className for the tabs list */
|
|
298
|
+
tabsClassName?: string;
|
|
299
|
+
}
|
|
300
|
+
interface SimpleTabsPanelProps {
|
|
301
|
+
/** Tab id this panel corresponds to */
|
|
302
|
+
id: string;
|
|
303
|
+
/** Panel content */
|
|
304
|
+
children: React$1.ReactNode;
|
|
305
|
+
/** Custom className */
|
|
306
|
+
className?: string;
|
|
307
|
+
}
|
|
308
|
+
declare const SimpleTabs: React$1.ForwardRefExoticComponent<SimpleTabsProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
309
|
+
declare const SimpleTabsPanel: React$1.ForwardRefExoticComponent<SimpleTabsPanelProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
310
|
+
interface SimpleTabsRootProps {
|
|
311
|
+
/** Currently active tab id */
|
|
312
|
+
activeTab?: string;
|
|
313
|
+
/** Default active tab id (for uncontrolled mode) */
|
|
314
|
+
defaultTab?: string;
|
|
315
|
+
/** Callback when tab changes */
|
|
316
|
+
onTabChange?: (tabId: string) => void;
|
|
317
|
+
/** Children (SimpleTabsList and SimpleTabsPanel components) */
|
|
318
|
+
children: React$1.ReactNode;
|
|
319
|
+
/** Custom className */
|
|
320
|
+
className?: string;
|
|
321
|
+
}
|
|
322
|
+
declare const SimpleTabsRoot: React$1.ForwardRefExoticComponent<SimpleTabsRootProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
323
|
+
interface SimpleTabsListProps {
|
|
324
|
+
children: React$1.ReactNode;
|
|
325
|
+
className?: string;
|
|
326
|
+
}
|
|
327
|
+
declare const SimpleTabsList: React$1.ForwardRefExoticComponent<SimpleTabsListProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
328
|
+
interface SimpleTabsTriggerProps {
|
|
329
|
+
/** Tab id */
|
|
330
|
+
value: string;
|
|
331
|
+
/** Tab content */
|
|
332
|
+
children: React$1.ReactNode;
|
|
333
|
+
/** Tab icon */
|
|
334
|
+
icon?: React$1.ReactNode;
|
|
335
|
+
/** Disabled state */
|
|
336
|
+
disabled?: boolean;
|
|
337
|
+
/** Custom className */
|
|
338
|
+
className?: string;
|
|
339
|
+
}
|
|
340
|
+
declare const SimpleTabsTrigger: React$1.ForwardRefExoticComponent<SimpleTabsTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
|
|
341
|
+
declare const SimpleTabsContent: React$1.ForwardRefExoticComponent<{
|
|
342
|
+
value: string;
|
|
343
|
+
children: React$1.ReactNode;
|
|
344
|
+
className?: string;
|
|
345
|
+
} & React$1.RefAttributes<HTMLDivElement>>;
|
|
346
|
+
|
|
347
|
+
declare const TooltipProvider: React$1.FC<TooltipPrimitive.TooltipProviderProps>;
|
|
348
|
+
declare const Tooltip: React$1.FC<TooltipPrimitive.TooltipProps>;
|
|
349
|
+
declare const TooltipTrigger: React$1.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
|
|
350
|
+
declare const TooltipContent: React$1.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
351
|
+
|
|
352
|
+
declare function cn(...inputs: ClassValue[]): string;
|
|
353
|
+
|
|
354
|
+
interface LenisProviderProps {
|
|
355
|
+
children: React.ReactNode;
|
|
356
|
+
}
|
|
357
|
+
declare function LenisProvider({ children }: LenisProviderProps): React$1.JSX.Element;
|
|
358
|
+
|
|
359
|
+
/**
|
|
360
|
+
* OKLCH ramp generation.
|
|
361
|
+
*
|
|
362
|
+
* OKLCH (Oklab in cylindrical coords) is a perceptually uniform color space —
|
|
363
|
+
* the same `L` value looks equally light across all hues, which HSL does not
|
|
364
|
+
* give you. That makes it ideal for generating color ramps programmatically:
|
|
365
|
+
* pin the L curve, vary the hue, and every ramp looks like a sibling.
|
|
366
|
+
*
|
|
367
|
+
* We output space-separated `"L C H"` triplets (not `oklch(L C H)` strings),
|
|
368
|
+
* because the CSS variables are consumed via Tailwind as
|
|
369
|
+
* `oklch(var(--primary) / <alpha-value>)`
|
|
370
|
+
* which needs the bare components inside the function call to get the
|
|
371
|
+
* `/alpha` shortcut (`bg-primary/50`) working.
|
|
372
|
+
*/
|
|
373
|
+
/** One of four brightness modes the theme system supports. */
|
|
374
|
+
type ModeName = "superLight" | "light" | "dark" | "superDark";
|
|
375
|
+
/** A bare OKLCH triplet — "L C H" space-separated. Consumed inside oklch(). */
|
|
376
|
+
type OKLCHTriplet = string;
|
|
377
|
+
/** A full 11-stop color ramp, Tailwind-style. */
|
|
378
|
+
interface Ramp {
|
|
379
|
+
50: OKLCHTriplet;
|
|
380
|
+
100: OKLCHTriplet;
|
|
381
|
+
200: OKLCHTriplet;
|
|
382
|
+
300: OKLCHTriplet;
|
|
383
|
+
400: OKLCHTriplet;
|
|
384
|
+
500: OKLCHTriplet;
|
|
385
|
+
600: OKLCHTriplet;
|
|
386
|
+
700: OKLCHTriplet;
|
|
387
|
+
800: OKLCHTriplet;
|
|
388
|
+
900: OKLCHTriplet;
|
|
389
|
+
950: OKLCHTriplet;
|
|
390
|
+
}
|
|
391
|
+
|
|
392
|
+
/**
|
|
393
|
+
* The CSS font-family string for each available font. Keys match the CSS
|
|
394
|
+
* variables set by app/layout.tsx's font loaders. Adding a new font means
|
|
395
|
+
* loading it in the root layout AND registering it here.
|
|
396
|
+
*
|
|
397
|
+
* Geist is the recommended default sans (replaces Satoshi). Jetbrains Mono
|
|
398
|
+
* is the default mono. Serif and alternative options round out the list for
|
|
399
|
+
* the theme builder's font picker — expected to grow as we allow dynamic
|
|
400
|
+
* Google Font loading later.
|
|
401
|
+
*/
|
|
402
|
+
declare const FONTS: {
|
|
403
|
+
readonly geist: "var(--font-geist), system-ui, sans-serif";
|
|
404
|
+
readonly inter: "var(--font-inter), system-ui, sans-serif";
|
|
405
|
+
readonly manrope: "var(--font-manrope), system-ui, sans-serif";
|
|
406
|
+
readonly figtree: "var(--font-figtree), system-ui, sans-serif";
|
|
407
|
+
readonly dmSans: "var(--font-dm-sans), system-ui, sans-serif";
|
|
408
|
+
readonly lexend: "var(--font-lexend), system-ui, sans-serif";
|
|
409
|
+
readonly outfit: "var(--font-outfit), system-ui, sans-serif";
|
|
410
|
+
readonly plusJakarta: "var(--font-plus-jakarta), system-ui, sans-serif";
|
|
411
|
+
readonly spaceGrotesk: "var(--font-space-grotesk), system-ui, sans-serif";
|
|
412
|
+
readonly fraunces: "var(--font-fraunces), Georgia, serif";
|
|
413
|
+
readonly instrumentSerif: "var(--font-instrument-serif), Georgia, serif";
|
|
414
|
+
readonly sourceSerif: "var(--font-source-serif), Georgia, serif";
|
|
415
|
+
readonly jetbrainsMono: "var(--font-jetbrains-mono), ui-monospace, monospace";
|
|
416
|
+
readonly geistMono: "var(--font-geist-mono), ui-monospace, monospace";
|
|
417
|
+
readonly ibmPlexMono: "var(--font-ibm-plex-mono), ui-monospace, monospace";
|
|
418
|
+
readonly system: "system-ui, -apple-system, sans-serif";
|
|
419
|
+
readonly serif: "Georgia, 'Times New Roman', serif";
|
|
420
|
+
readonly mono: "ui-monospace, Menlo, monospace";
|
|
421
|
+
};
|
|
422
|
+
type FontKey = keyof typeof FONTS;
|
|
423
|
+
/** Type scale preset — controls how generous the size ladder is. */
|
|
424
|
+
type TypeScalePreset = "compact" | "default" | "spacious";
|
|
425
|
+
/** Density preset — controls spacing tightness. */
|
|
426
|
+
type SpacingDensity = "tight" | "default" | "roomy";
|
|
427
|
+
/** Radius preset — controls how rounded corners are across the system. */
|
|
428
|
+
type RadiusStyle = "sharp" | "subtle" | "soft" | "round" | "pill";
|
|
429
|
+
/** Shadow intensity preset. */
|
|
430
|
+
type ShadowIntensity = "none" | "subtle" | "default" | "dramatic";
|
|
431
|
+
/**
|
|
432
|
+
* Chroma intensity — applied globally on top of per-ramp chroma multipliers.
|
|
433
|
+
* "muted" dials all ramps down (pastel / editorial feel).
|
|
434
|
+
* "vibrant" pushes them past the defaults (popping / marketing feel).
|
|
435
|
+
*/
|
|
436
|
+
type ColorIntensity = "muted" | "default" | "vibrant";
|
|
437
|
+
/** Button rendering shape (orthogonal to radius). */
|
|
438
|
+
type ButtonShape = "default" | "pill" | "square";
|
|
439
|
+
/** Input rendering style. */
|
|
440
|
+
type InputStyle = "outlined" | "filled" | "underline";
|
|
441
|
+
/** Card rendering style. */
|
|
442
|
+
type CardStyle = "flat" | "outlined" | "elevated" | "glass";
|
|
443
|
+
/**
|
|
444
|
+
* The user-facing theme definition. This is what gets saved to
|
|
445
|
+
* localStorage, exported as JSON, and shared via URL. The generator
|
|
446
|
+
* consumes this and produces a full GeneratedTheme.
|
|
447
|
+
*/
|
|
448
|
+
interface ThemeInput {
|
|
449
|
+
/** Stable id. For user themes: "user:<uuid>"; for built-ins: short slug. */
|
|
450
|
+
id: string;
|
|
451
|
+
/** Display name. */
|
|
452
|
+
name: string;
|
|
453
|
+
/** Optional one-line description for the switcher. */
|
|
454
|
+
description?: string;
|
|
455
|
+
/** Optional tagline (category tag). */
|
|
456
|
+
tagline?: string;
|
|
457
|
+
/** The three hues that drive the entire color system. */
|
|
458
|
+
hues: {
|
|
459
|
+
/** 0–360. The gray ramp's tint. Low chroma, subtle. */
|
|
460
|
+
neutral: number;
|
|
461
|
+
/** 0–360. The brand primary. */
|
|
462
|
+
primary: number;
|
|
463
|
+
/** 0–360. The secondary brand accent. Often primary ± 30–180°. */
|
|
464
|
+
accent: number;
|
|
465
|
+
};
|
|
466
|
+
/**
|
|
467
|
+
* Optional chroma overrides. Defaults tuned to produce pleasant ramps:
|
|
468
|
+
* neutrals get a subtle tint (0.1× peak), primary/accent get full chroma.
|
|
469
|
+
* Raise above 1.0 for vibrant; lower for muted.
|
|
470
|
+
*/
|
|
471
|
+
chroma?: {
|
|
472
|
+
neutral?: number;
|
|
473
|
+
primary?: number;
|
|
474
|
+
accent?: number;
|
|
475
|
+
};
|
|
476
|
+
/** If true, the neutral ramp is pure gray regardless of neutral hue. */
|
|
477
|
+
neutralPureGray?: boolean;
|
|
478
|
+
/**
|
|
479
|
+
* Global chroma intensity. Multiplies every ramp's chroma — a quick way to
|
|
480
|
+
* flip the whole theme between muted / default / vibrant without touching
|
|
481
|
+
* the per-ramp chroma values.
|
|
482
|
+
*/
|
|
483
|
+
intensity?: ColorIntensity;
|
|
484
|
+
typography: {
|
|
485
|
+
display: FontKey;
|
|
486
|
+
body: FontKey;
|
|
487
|
+
mono: FontKey;
|
|
488
|
+
scale: TypeScalePreset;
|
|
489
|
+
/** Override heading weight. Defaults to 600 for sans, 500 for serif. */
|
|
490
|
+
headingWeight?: number;
|
|
491
|
+
/** Override body weight. Defaults to 400. */
|
|
492
|
+
bodyWeight?: number;
|
|
493
|
+
/** Letter-spacing applied to headings. Default "-0.01em". */
|
|
494
|
+
headingTracking?: string;
|
|
495
|
+
};
|
|
496
|
+
spacing: {
|
|
497
|
+
density: SpacingDensity;
|
|
498
|
+
};
|
|
499
|
+
radius: {
|
|
500
|
+
style: RadiusStyle;
|
|
501
|
+
};
|
|
502
|
+
effects?: {
|
|
503
|
+
shadows?: ShadowIntensity;
|
|
504
|
+
/** 0 = instant, 1 = default, 2 = luxurious. */
|
|
505
|
+
motionIntensity?: number;
|
|
506
|
+
borderWidth?: string;
|
|
507
|
+
};
|
|
508
|
+
components?: {
|
|
509
|
+
buttonShape?: ButtonShape;
|
|
510
|
+
inputStyle?: InputStyle;
|
|
511
|
+
cardStyle?: CardStyle;
|
|
512
|
+
};
|
|
513
|
+
}
|
|
514
|
+
/**
|
|
515
|
+
* Per-mode semantic token mapping. Each token holds a bare OKLCH triplet
|
|
516
|
+
* (not an `oklch(…)` string) — the consumer wraps it with oklch(var(--x) /
|
|
517
|
+
* <alpha-value>) via Tailwind config.
|
|
518
|
+
*/
|
|
519
|
+
interface GeneratedColorsMode {
|
|
520
|
+
background: OKLCHTriplet;
|
|
521
|
+
foreground: OKLCHTriplet;
|
|
522
|
+
card: OKLCHTriplet;
|
|
523
|
+
cardForeground: OKLCHTriplet;
|
|
524
|
+
popover: OKLCHTriplet;
|
|
525
|
+
popoverForeground: OKLCHTriplet;
|
|
526
|
+
primary: OKLCHTriplet;
|
|
527
|
+
primaryForeground: OKLCHTriplet;
|
|
528
|
+
secondary: OKLCHTriplet;
|
|
529
|
+
secondaryForeground: OKLCHTriplet;
|
|
530
|
+
muted: OKLCHTriplet;
|
|
531
|
+
mutedForeground: OKLCHTriplet;
|
|
532
|
+
accent: OKLCHTriplet;
|
|
533
|
+
accentForeground: OKLCHTriplet;
|
|
534
|
+
destructive: OKLCHTriplet;
|
|
535
|
+
destructiveForeground: OKLCHTriplet;
|
|
536
|
+
border: OKLCHTriplet;
|
|
537
|
+
input: OKLCHTriplet;
|
|
538
|
+
ring: OKLCHTriplet;
|
|
539
|
+
success: OKLCHTriplet;
|
|
540
|
+
warning: OKLCHTriplet;
|
|
541
|
+
info: OKLCHTriplet;
|
|
542
|
+
highlight: OKLCHTriplet;
|
|
543
|
+
}
|
|
544
|
+
/** Concrete resolved CSS values for the typography dimension. */
|
|
545
|
+
interface GeneratedTypography {
|
|
546
|
+
fontSans: string;
|
|
547
|
+
fontMono: string;
|
|
548
|
+
fontDisplay: string;
|
|
549
|
+
headingWeight: number;
|
|
550
|
+
bodyWeight: number;
|
|
551
|
+
headingTracking: string;
|
|
552
|
+
/** Explicit font-size for each step in the scale. */
|
|
553
|
+
scale: {
|
|
554
|
+
display: string;
|
|
555
|
+
h1: string;
|
|
556
|
+
h2: string;
|
|
557
|
+
h3: string;
|
|
558
|
+
h4: string;
|
|
559
|
+
h5: string;
|
|
560
|
+
h6: string;
|
|
561
|
+
body: string;
|
|
562
|
+
bodySm: string;
|
|
563
|
+
};
|
|
564
|
+
}
|
|
565
|
+
/** Concrete resolved CSS values for radius. */
|
|
566
|
+
interface GeneratedRadius {
|
|
567
|
+
base: string;
|
|
568
|
+
sm: string;
|
|
569
|
+
md: string;
|
|
570
|
+
lg: string;
|
|
571
|
+
xl: string;
|
|
572
|
+
"2xl": string;
|
|
573
|
+
full: string;
|
|
574
|
+
}
|
|
575
|
+
/** Concrete resolved spacing values. */
|
|
576
|
+
interface GeneratedSpacing {
|
|
577
|
+
baseUnit: string;
|
|
578
|
+
densityFactor: number;
|
|
579
|
+
}
|
|
580
|
+
/** Concrete resolved effects values. */
|
|
581
|
+
interface GeneratedEffects {
|
|
582
|
+
shadows: {
|
|
583
|
+
sm: string;
|
|
584
|
+
md: string;
|
|
585
|
+
lg: string;
|
|
586
|
+
xl: string;
|
|
587
|
+
"2xl": string;
|
|
588
|
+
inner: string;
|
|
589
|
+
};
|
|
590
|
+
motion: {
|
|
591
|
+
fast: string;
|
|
592
|
+
base: string;
|
|
593
|
+
slow: string;
|
|
594
|
+
slower: string;
|
|
595
|
+
};
|
|
596
|
+
borderWidth: string;
|
|
597
|
+
}
|
|
598
|
+
/**
|
|
599
|
+
* A 5-stop categorical chart palette derived from the theme hues. Each
|
|
600
|
+
* entry is an OKLCH triplet. Written to --chart-1 through --chart-5 at
|
|
601
|
+
* :root — chart components (recharts) read them via var(--chart-N).
|
|
602
|
+
*/
|
|
603
|
+
interface ChartPalette {
|
|
604
|
+
1: OKLCHTriplet;
|
|
605
|
+
2: OKLCHTriplet;
|
|
606
|
+
3: OKLCHTriplet;
|
|
607
|
+
4: OKLCHTriplet;
|
|
608
|
+
5: OKLCHTriplet;
|
|
609
|
+
}
|
|
610
|
+
/**
|
|
611
|
+
* The full output of the generator. This is what gets applied to :root by
|
|
612
|
+
* the provider, written to CSS vars, and used for rendering previews.
|
|
613
|
+
*
|
|
614
|
+
* The original ThemeInput is preserved on `input` so the theme can be
|
|
615
|
+
* round-tripped back into the builder UI for editing.
|
|
616
|
+
*/
|
|
617
|
+
interface GeneratedTheme {
|
|
618
|
+
id: string;
|
|
619
|
+
name: string;
|
|
620
|
+
description?: string;
|
|
621
|
+
tagline?: string;
|
|
622
|
+
/** The original input, preserved for round-trip editing. */
|
|
623
|
+
input: ThemeInput;
|
|
624
|
+
/** The three base ramps. Same content regardless of which mode is active. */
|
|
625
|
+
ramps: {
|
|
626
|
+
neutral: Ramp;
|
|
627
|
+
primary: Ramp;
|
|
628
|
+
accent: Ramp;
|
|
629
|
+
};
|
|
630
|
+
/** Semantic tokens for all four modes. */
|
|
631
|
+
colors: Record<ModeName, GeneratedColorsMode>;
|
|
632
|
+
/** 5-stop palette for chart series. */
|
|
633
|
+
chart: ChartPalette;
|
|
634
|
+
typography: GeneratedTypography;
|
|
635
|
+
radius: GeneratedRadius;
|
|
636
|
+
spacing: GeneratedSpacing;
|
|
637
|
+
effects: GeneratedEffects;
|
|
638
|
+
components: NonNullable<ThemeInput["components"]>;
|
|
639
|
+
}
|
|
640
|
+
|
|
641
|
+
/**
|
|
642
|
+
* Theme generator — the one true source for producing themes.
|
|
643
|
+
*
|
|
644
|
+
* Takes a compact ThemeInput (hues + a handful of presets) and returns a
|
|
645
|
+
* fully resolved GeneratedTheme with three OKLCH color ramps, semantic
|
|
646
|
+
* tokens for all four brightness modes, and concrete values for typography,
|
|
647
|
+
* radius, spacing, and effects.
|
|
648
|
+
*
|
|
649
|
+
* Every theme in the system — built-in or user-built — flows through here.
|
|
650
|
+
* Built-ins are just curated ThemeInputs; user themes live in localStorage
|
|
651
|
+
* as ThemeInputs and get re-generated on load.
|
|
652
|
+
*/
|
|
653
|
+
|
|
654
|
+
/**
|
|
655
|
+
* Turn a compact ThemeInput into a fully resolved GeneratedTheme.
|
|
656
|
+
* Pure function — safe to run on the client, server, or at build time.
|
|
657
|
+
*/
|
|
658
|
+
declare function generateTheme(input: ThemeInput): GeneratedTheme;
|
|
659
|
+
|
|
660
|
+
/**
|
|
661
|
+
* Produce every CSS custom property a given GeneratedTheme + mode implies,
|
|
662
|
+
* as a flat { key: value } map. Useful for the provider (applies to :root)
|
|
663
|
+
* and the builder preview pane (applies to a scoped wrapper).
|
|
664
|
+
*/
|
|
665
|
+
declare function themeToCSSVars(theme: GeneratedTheme, mode: ModeName): Record<string, string>;
|
|
666
|
+
/**
|
|
667
|
+
* Apply a theme to the document root. Writes every CSS variable produced by
|
|
668
|
+
* themeToCSSVars and sets a set of data attributes that component-shape
|
|
669
|
+
* CSS rules key off of.
|
|
670
|
+
*
|
|
671
|
+
* Safe to call repeatedly — each call fully resets the vars the theme
|
|
672
|
+
* controls. Vars the theme doesn't touch (e.g. --rds-green-500 in
|
|
673
|
+
* globals.css) are left alone.
|
|
674
|
+
*/
|
|
675
|
+
declare function applyThemeToRoot(theme: GeneratedTheme, mode: ModeName): void;
|
|
676
|
+
|
|
677
|
+
/**
|
|
678
|
+
* Built-in ThemeInputs. Every theme — built-in or user-built — is a
|
|
679
|
+
* ThemeInput. Built-ins are just curated ones we ship as starting points.
|
|
680
|
+
*
|
|
681
|
+
* "Calm" is the canonical Ramp DS look: warm neutrals, terracotta primary,
|
|
682
|
+
* serif display + body, roomier spacing, rounded corners, pill buttons,
|
|
683
|
+
* subtle shadows. "Energy" is a bolder alternate — teal primary, Geist
|
|
684
|
+
* sans, tighter feel.
|
|
685
|
+
*
|
|
686
|
+
* To add a new built-in: define a ThemeInput here, import it in index.ts,
|
|
687
|
+
* and add it to the registry.
|
|
688
|
+
*/
|
|
689
|
+
/**
|
|
690
|
+
* Calm — the canonical Ramp DS theme.
|
|
691
|
+
*
|
|
692
|
+
* Warm neutral tint (~40° amber), terracotta primary (~20°), amber accent.
|
|
693
|
+
* Serif display and body (Fraunces with its full variable weight range),
|
|
694
|
+
* roomier spacing, rounder corners, pill buttons, outlined cards, subtle
|
|
695
|
+
* shadows, slower motion.
|
|
696
|
+
*/
|
|
697
|
+
declare const calmInput: ThemeInput;
|
|
698
|
+
/**
|
|
699
|
+
* Energy — bolder alternate theme.
|
|
700
|
+
*
|
|
701
|
+
* Teal primary + indigo accent (complementary-cool pairing). Neutral gets
|
|
702
|
+
* a whisper of chroma (0.08× default curve) so grays read cool against
|
|
703
|
+
* both brand colors rather than clinical. Modern sans (Geist) with
|
|
704
|
+
* tighter spacing and standard corners.
|
|
705
|
+
*/
|
|
706
|
+
declare const energyInput: ThemeInput;
|
|
707
|
+
declare const BUILT_IN_INPUTS: ThemeInput[];
|
|
708
|
+
|
|
709
|
+
/**
|
|
710
|
+
* Theme system public API.
|
|
711
|
+
*
|
|
712
|
+
* Every theme — built-in or user-built — is a ThemeInput that flows
|
|
713
|
+
* through generateTheme() to produce a GeneratedTheme. The provider
|
|
714
|
+
* consumes GeneratedThemes and writes them to :root via applyThemeToRoot.
|
|
715
|
+
*
|
|
716
|
+
* Built-in themes are defined in inputs.ts and generated on module load.
|
|
717
|
+
* User themes are persisted as ThemeInputs in localStorage (phase 4) and
|
|
718
|
+
* generated on demand.
|
|
719
|
+
*/
|
|
720
|
+
|
|
721
|
+
/**
|
|
722
|
+
* Generated built-in themes, keyed by id. These are pure — generated once
|
|
723
|
+
* at module load and shared across the app. Adding a new built-in means
|
|
724
|
+
* updating inputs.ts; this map follows automatically.
|
|
725
|
+
*/
|
|
726
|
+
declare const builtInThemes: Record<string, GeneratedTheme>;
|
|
727
|
+
declare const defaultThemeId: string;
|
|
728
|
+
/**
|
|
729
|
+
* Look up a theme by id — built-in or user-built. User themes are read
|
|
730
|
+
* from localStorage lazily (only called from client code).
|
|
731
|
+
*
|
|
732
|
+
* Returns undefined if no theme matches.
|
|
733
|
+
*/
|
|
734
|
+
declare function getTheme(id: string): GeneratedTheme | undefined;
|
|
735
|
+
/** Enumerate every theme — built-in first, then user themes. */
|
|
736
|
+
declare function listThemes(): GeneratedTheme[];
|
|
737
|
+
/** Return every user-saved theme (generated from the stored inputs). */
|
|
738
|
+
declare function listUserThemes(): GeneratedTheme[];
|
|
739
|
+
/** Load a single user theme's input by id, if present. */
|
|
740
|
+
declare function loadUserThemeInput(id: string): ThemeInput | undefined;
|
|
741
|
+
/** Save (create or replace) a user theme. */
|
|
742
|
+
declare function saveUserTheme(input: ThemeInput): GeneratedTheme;
|
|
743
|
+
/** Remove a user theme. Built-in ids are ignored. */
|
|
744
|
+
declare function deleteUserTheme(id: string): void;
|
|
745
|
+
/** Duplicate an existing theme (built-in or user) as a new user theme. */
|
|
746
|
+
declare function duplicateTheme(sourceId: string, newId: string, newName: string): ThemeInput | undefined;
|
|
747
|
+
|
|
748
|
+
declare const ALL_MODES: ModeName[];
|
|
749
|
+
/**
|
|
750
|
+
* Inline script body (no React, no imports) that runs in <head> before
|
|
751
|
+
* hydration. Applies the `.dark` class and `data-mode` attribute so the
|
|
752
|
+
* initial paint matches the stored mode / system preference — prevents
|
|
753
|
+
* the classic dark-mode FOUC.
|
|
754
|
+
*
|
|
755
|
+
* NOTE: this string is embedded directly into the <head> via
|
|
756
|
+
* dangerouslySetInnerHTML. Keep it self-contained and dependency-free.
|
|
757
|
+
*/
|
|
758
|
+
declare const RAMP_PRE_HYDRATION_SCRIPT = "\n(function() {\n try {\n var mode = localStorage.getItem('ramp-mode');\n var valid = ['superLight','light','dark','superDark'];\n if (!mode || valid.indexOf(mode) === -1) {\n mode = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';\n }\n if (mode === 'dark' || mode === 'superDark') {\n document.documentElement.classList.add('dark');\n }\n document.documentElement.setAttribute('data-mode', mode);\n var themeId = localStorage.getItem('ramp-theme');\n if (themeId) document.documentElement.setAttribute('data-ramp-theme', themeId);\n } catch(e) {}\n})();\n";
|
|
759
|
+
type RampThemeContextValue = {
|
|
760
|
+
/** The currently active theme object. */
|
|
761
|
+
theme: GeneratedTheme;
|
|
762
|
+
/** The active theme's id. */
|
|
763
|
+
themeId: string;
|
|
764
|
+
/** Active brightness mode. */
|
|
765
|
+
mode: ModeName;
|
|
766
|
+
/** True if the active mode is dark or super-dark. Convenience for
|
|
767
|
+
* components that only care about a binary light/dark split. */
|
|
768
|
+
isDark: boolean;
|
|
769
|
+
/** Switch active theme by id (built-in or user). Persists. */
|
|
770
|
+
setThemeId: (id: string) => void;
|
|
771
|
+
/** Switch active brightness mode. Persists. */
|
|
772
|
+
setMode: (mode: ModeName) => void;
|
|
773
|
+
/** Every theme visible in the switcher (built-ins + user themes). */
|
|
774
|
+
themes: GeneratedTheme[];
|
|
775
|
+
/** Save (create/replace) a user theme and switch to it. */
|
|
776
|
+
saveAndActivate: (input: ThemeInput) => void;
|
|
777
|
+
/** Delete a user theme (built-ins are no-ops). Falls back to default if active. */
|
|
778
|
+
deleteTheme: (id: string) => void;
|
|
779
|
+
/** Refresh the themes list (call after external user-theme mutations). */
|
|
780
|
+
refresh: () => void;
|
|
781
|
+
};
|
|
782
|
+
interface RampThemeProviderProps {
|
|
783
|
+
children: React$1.ReactNode;
|
|
784
|
+
defaultTheme?: string;
|
|
785
|
+
defaultMode?: ModeName;
|
|
786
|
+
}
|
|
787
|
+
declare function RampThemeProvider({ children, defaultTheme, defaultMode, }: RampThemeProviderProps): React$1.JSX.Element;
|
|
788
|
+
/** Read the active theme + mode. Must be used inside <RampThemeProvider>. */
|
|
789
|
+
declare function useRampTheme(): RampThemeContextValue;
|
|
790
|
+
/** Safe variant — returns null outside a provider instead of throwing. */
|
|
791
|
+
declare function useMaybeRampTheme(): RampThemeContextValue | null;
|
|
792
|
+
|
|
793
|
+
/**
|
|
794
|
+
* Theme switcher — iterates every registered theme (built-in + user) and
|
|
795
|
+
* lets you pick one. User themes get a delete button on hover.
|
|
796
|
+
*
|
|
797
|
+
* Renders nothing when no <RampThemeProvider> is mounted, so it's safe to
|
|
798
|
+
* drop into any layout.
|
|
799
|
+
*/
|
|
800
|
+
declare function RampThemeSwitcher({ className }: {
|
|
801
|
+
className?: string;
|
|
802
|
+
}): React$1.JSX.Element | null;
|
|
803
|
+
|
|
804
|
+
/**
|
|
805
|
+
* 4-way mode switcher. Segmented control: super-light / light / dark / super-dark.
|
|
806
|
+
*
|
|
807
|
+
* Renders nothing without a RampThemeProvider. Default layout is a compact
|
|
808
|
+
* 4-icon row suitable for a header; the `variant="labeled"` form adds
|
|
809
|
+
* text labels for settings pages.
|
|
810
|
+
*/
|
|
811
|
+
interface RampModeSwitcherProps {
|
|
812
|
+
className?: string;
|
|
813
|
+
variant?: "icons" | "labeled";
|
|
814
|
+
}
|
|
815
|
+
declare function RampModeSwitcher({ className, variant }: RampModeSwitcherProps): React$1.JSX.Element | null;
|
|
816
|
+
|
|
817
|
+
/**
|
|
818
|
+
* Binary light/dark toggle — flips between `light` and `dark` modes.
|
|
819
|
+
* For the full 4-way picker (including super-light / super-dark), use
|
|
820
|
+
* <RampModeSwitcher /> instead.
|
|
821
|
+
*/
|
|
822
|
+
declare function ThemeToggle(): React$1.JSX.Element;
|
|
823
|
+
|
|
824
|
+
export { ALL_MODES, Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, BUILT_IN_INPUTS, Badge, type BreadcrumbItem, Button, type ButtonShape, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardStyle, CardTitle, type ChartPalette, Checkbox, type ColorIntensity, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, type FontKey, type GeneratedTheme, Input, type InputStyle, Label, LenisProvider, type ModeName, type OKLCHTriplet, Progress, RAMP_PRE_HYDRATION_SCRIPT, RadioGroup, RadioGroupItem, type RadiusStyle, type Ramp, RampModeSwitcher, RampThemeProvider, type RampThemeProviderProps, RampThemeSwitcher, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, type ShadowIntensity, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SideMenu, type SideMenuItem, type SideMenuProps, type SideMenuSection, type SimpleTab, SimpleTabs, SimpleTabsContent, SimpleTabsList, type SimpleTabsListProps, SimpleTabsPanel, type SimpleTabsPanelProps, type SimpleTabsProps, SimpleTabsRoot, type SimpleTabsRootProps, SimpleTabsTrigger, type SimpleTabsTriggerProps, Skeleton, Slider, type SpacingDensity, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type ThemeInput, ThemeToggle, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TopMenu, type TopMenuProps, TopMenuUser, TopMenuUserItem, type TopMenuUserItemProps, type TopMenuUserProps, TopMenuUserSection, type TypeScalePreset, applyThemeToRoot, badgeVariants, builtInThemes, buttonVariants, calmInput, cn, defaultThemeId, deleteUserTheme, duplicateTheme, energyInput, generateTheme, getTheme, listThemes, listUserThemes, loadUserThemeInput, saveUserTheme, themeToCSSVars, useMaybeRampTheme, useRampTheme };
|