doodleui-react 0.1.1 → 0.3.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/dist/index.d.cts CHANGED
@@ -1,10 +1,17 @@
1
1
  import * as react from 'react';
2
- import { CSSProperties, HTMLAttributes, ReactNode, ButtonHTMLAttributes, InputHTMLAttributes, TextareaHTMLAttributes, ComponentPropsWithoutRef } from 'react';
2
+ import { CSSProperties, HTMLAttributes, ReactNode, RefObject, ButtonHTMLAttributes, InputHTMLAttributes, TextareaHTMLAttributes, ComponentPropsWithoutRef, TableHTMLAttributes, TdHTMLAttributes, ThHTMLAttributes } from 'react';
3
3
  import { Options } from 'roughjs/bin/core';
4
4
  import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
5
5
  import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
6
6
  import * as Dialog from '@radix-ui/react-dialog';
7
7
  import * as TooltipPrimitive from '@radix-ui/react-tooltip';
8
+ import * as SelectPrimitive from '@radix-ui/react-select';
9
+ import * as SwitchPrimitive from '@radix-ui/react-switch';
10
+ import * as TabsPrimitive from '@radix-ui/react-tabs';
11
+ import * as ToastPrimitive from '@radix-ui/react-toast';
12
+ import * as AccordionPrimitive from '@radix-ui/react-accordion';
13
+ import * as AvatarPrimitive from '@radix-ui/react-avatar';
14
+ import * as SliderPrimitive from '@radix-ui/react-slider';
8
15
 
9
16
  type FillStyle = "hachure" | "solid" | "zigzag" | "cross-hatch" | "dots" | "dashed" | "zigzag-line";
10
17
  type RoughShape = "rectangle" | "ellipse" | "line" | "line-vertical" | "path";
@@ -68,6 +75,14 @@ interface SketchBoxProps extends SketchProps, Omit<HTMLAttributes<HTMLDivElement
68
75
  contentStyle?: CSSProperties;
69
76
  inset?: number;
70
77
  path?: string;
78
+ /**
79
+ * Sketch-in the border on mount. Defaults to the DoodleUIProvider value.
80
+ */
81
+ animate?: boolean;
82
+ /** Override the default 400ms draw-in duration. */
83
+ drawInDuration?: number;
84
+ /** Replay draw-in when this value changes. */
85
+ drawInKey?: unknown;
71
86
  }
72
87
  declare const SketchBox: react.ForwardRefExoticComponent<SketchBoxProps & react.RefAttributes<HTMLDivElement>>;
73
88
 
@@ -99,26 +114,96 @@ declare function useSketchSeed(): SketchSeedContextValue;
99
114
  */
100
115
  declare function useResolvedSeed(seed?: number): number;
101
116
 
117
+ interface DoodleUIContextValue {
118
+ /** Default for components that do not set their own `animate` prop. */
119
+ animate: boolean;
120
+ /** When true, skip the prefers-reduced-motion disable. */
121
+ forceAnimate: boolean;
122
+ }
123
+ interface DoodleUIProviderProps {
124
+ children: ReactNode;
125
+ /**
126
+ * Default animation setting for descendant doodle-ui components.
127
+ * Per-component `animate` still wins when it is set.
128
+ */
129
+ animate?: boolean;
130
+ /**
131
+ * Play animations even when the user prefers reduced motion.
132
+ * Off by default — only set this as an explicit escape hatch.
133
+ */
134
+ forceAnimate?: boolean;
135
+ }
136
+ declare function DoodleUIProvider({ children, animate, forceAnimate, }: DoodleUIProviderProps): react.JSX.Element;
137
+ declare function useDoodleUI(): DoodleUIContextValue;
138
+
139
+ /**
140
+ * Whether the calling component should play sketch animations.
141
+ * Per-component `animate` overrides the provider. Reduced motion
142
+ * disables animation unless the provider set `forceAnimate`.
143
+ */
144
+ declare function useAnimate(animate?: boolean): boolean;
145
+
146
+ /** Default sketch-in duration. Ease-out over ~400ms. */
147
+ declare const DRAW_IN_DURATION_MS = 400;
148
+ /** Alerts often appear dynamically — keep the sketch-in snappy. */
149
+ declare const DRAW_IN_ALERT_MS = 200;
150
+ /** Tooltips are transient — draw in quickly. */
151
+ declare const DRAW_IN_TOOLTIP_MS = 180;
152
+ /** Checkmarks, radio dots, and tab underlines. */
153
+ declare const DRAW_IN_MARK_MS = 240;
154
+ /** Delay between table row rules. */
155
+ declare const TABLE_STAGGER_MS = 40;
156
+ /**
157
+ * Sketch-in the rough.js stroke path on the first paint, and again when
158
+ * `replayKey` changes (e.g. a hover seed swap).
159
+ *
160
+ * `pathRef` may point at an SVG path, an `<svg>`, or any element that
161
+ * contains one — the hook finds the outline path either way.
162
+ */
163
+ declare function useDrawIn(pathRef: RefObject<Element | null>, duration?: number, enabled?: boolean, replayKey?: unknown, delay?: number): void;
164
+
102
165
  type ButtonVariant = "primary" | "secondary" | "outline" | "ghost";
103
166
  type ButtonSize = "sm" | "md" | "lg";
104
167
  interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "color">, SketchProps {
105
168
  variant?: ButtonVariant;
106
169
  size?: ButtonSize;
170
+ /**
171
+ * Play sketch animations (draw-in on mount, seed morph on hover).
172
+ * Defaults to the DoodleUIProvider value (true). Explicit `false`
173
+ * renders a static sketch. `prefers-reduced-motion: reduce` disables
174
+ * animation unless the provider set `forceAnimate`.
175
+ */
176
+ animate?: boolean;
107
177
  }
108
178
  declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
109
179
 
110
180
  interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "color" | "size">, SketchProps {
111
181
  label?: ReactNode;
182
+ /**
183
+ * Draw-in the border on mount and seed-morph on focus.
184
+ * Defaults to the DoodleUIProvider value (true).
185
+ */
186
+ animate?: boolean;
112
187
  }
113
188
  declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<HTMLInputElement>>;
114
189
 
115
190
  interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "color">, SketchProps {
116
191
  label?: ReactNode;
192
+ /**
193
+ * Draw-in the border on mount and seed-morph on focus.
194
+ * Defaults to the DoodleUIProvider value (true).
195
+ */
196
+ animate?: boolean;
117
197
  }
118
198
  declare const Textarea: react.ForwardRefExoticComponent<TextareaProps & react.RefAttributes<HTMLTextAreaElement>>;
119
199
 
120
200
  interface CheckboxProps extends Omit<CheckboxPrimitive.CheckboxProps, "asChild">, SketchProps {
121
201
  label?: ReactNode;
202
+ /**
203
+ * Draw-in the box on mount and the checkmark when checked.
204
+ * Defaults to the DoodleUIProvider value (true).
205
+ */
206
+ animate?: boolean;
122
207
  }
123
208
  declare const Checkbox: react.ForwardRefExoticComponent<CheckboxProps & react.RefAttributes<HTMLButtonElement>>;
124
209
 
@@ -127,6 +212,11 @@ interface RadioGroupProps extends ComponentPropsWithoutRef<typeof RadioGroupPrim
127
212
  declare const RadioGroup: react.ForwardRefExoticComponent<RadioGroupProps & react.RefAttributes<HTMLDivElement>>;
128
213
  interface RadioProps extends Omit<ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>, "asChild">, SketchProps {
129
214
  label?: ReactNode;
215
+ /**
216
+ * Draw-in the ring on mount and scale/draw the dot on select.
217
+ * Defaults to the DoodleUIProvider value (true).
218
+ */
219
+ animate?: boolean;
130
220
  }
131
221
  declare const Radio: react.ForwardRefExoticComponent<RadioProps & react.RefAttributes<HTMLButtonElement>>;
132
222
 
@@ -135,12 +225,20 @@ interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, "color" | "titl
135
225
  fill?: string;
136
226
  title?: ReactNode;
137
227
  footer?: ReactNode;
228
+ /**
229
+ * Draw-in the border on mount. Defaults to the DoodleUIProvider value (true).
230
+ */
231
+ animate?: boolean;
138
232
  }
139
233
  declare const Card: react.ForwardRefExoticComponent<CardProps & react.RefAttributes<HTMLDivElement>>;
140
234
 
141
235
  type BadgeVariant = "default" | "accent" | "outline";
142
236
  interface BadgeProps extends Omit<HTMLAttributes<HTMLSpanElement>, "color">, SketchProps {
143
237
  variant?: BadgeVariant;
238
+ /**
239
+ * Draw-in the border on mount. Defaults to the DoodleUIProvider value (true).
240
+ */
241
+ animate?: boolean;
144
242
  }
145
243
  declare const Badge: react.ForwardRefExoticComponent<BadgeProps & react.RefAttributes<HTMLSpanElement>>;
146
244
 
@@ -148,6 +246,10 @@ type AlertVariant = "info" | "warning" | "error" | "success";
148
246
  interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, "color" | "title">, SketchProps {
149
247
  variant?: AlertVariant;
150
248
  title?: ReactNode;
249
+ /**
250
+ * Draw-in the border on mount (~200ms). Defaults to the DoodleUIProvider value (true).
251
+ */
252
+ animate?: boolean;
151
253
  }
152
254
  declare const Alert: react.ForwardRefExoticComponent<AlertProps & react.RefAttributes<HTMLDivElement>>;
153
255
 
@@ -160,8 +262,13 @@ interface ModalProps extends SketchProps {
160
262
  description?: ReactNode;
161
263
  children?: ReactNode;
162
264
  className?: string;
265
+ /**
266
+ * Backdrop fade, panel enter/exit, and border draw-in on open.
267
+ * Defaults to the DoodleUIProvider value (true).
268
+ */
269
+ animate?: boolean;
163
270
  }
164
- declare function Modal({ open, defaultOpen, onOpenChange, trigger, title, description, children, className, roughness, seed, sketchColor, bowing, fillStyle, strokeWidth, }: ModalProps): react.JSX.Element;
271
+ declare function Modal({ open, defaultOpen, onOpenChange, trigger, title, description, children, className, roughness, seed, sketchColor, bowing, fillStyle, strokeWidth, animate, }: ModalProps): react.JSX.Element;
165
272
  declare const ModalRoot: react.FC<Dialog.DialogProps>;
166
273
  declare const ModalTrigger: react.ForwardRefExoticComponent<Dialog.DialogTriggerProps & react.RefAttributes<HTMLButtonElement>>;
167
274
  declare const ModalClose: react.ForwardRefExoticComponent<Dialog.DialogCloseProps & react.RefAttributes<HTMLButtonElement>>;
@@ -171,12 +278,22 @@ declare const ModalDescription: react.ForwardRefExoticComponent<Dialog.DialogDes
171
278
  type DividerOrientation = "horizontal" | "vertical";
172
279
  interface DividerProps extends Omit<HTMLAttributes<HTMLDivElement>, "color">, SketchProps {
173
280
  orientation?: DividerOrientation;
281
+ /**
282
+ * Draw-in so the line extends across its length. Defaults to the
283
+ * DoodleUIProvider value (true).
284
+ */
285
+ animate?: boolean;
174
286
  }
175
287
  declare const Divider: react.ForwardRefExoticComponent<DividerProps & react.RefAttributes<HTMLDivElement>>;
176
288
 
177
289
  interface ProgressProps extends Omit<HTMLAttributes<HTMLDivElement>, "color">, SketchProps {
178
290
  value?: number;
179
291
  max?: number;
292
+ /**
293
+ * Draw-in the track on mount and redraw the fill as value changes.
294
+ * Defaults to the DoodleUIProvider value (true).
295
+ */
296
+ animate?: boolean;
180
297
  }
181
298
  declare const Progress: react.ForwardRefExoticComponent<ProgressProps & react.RefAttributes<HTMLDivElement>>;
182
299
 
@@ -187,7 +304,220 @@ interface TooltipProps extends SketchProps {
187
304
  side?: ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>["side"];
188
305
  delayDuration?: number;
189
306
  className?: string;
307
+ /**
308
+ * Quick draw-in when the bubble shows (~180ms). Defaults to the
309
+ * DoodleUIProvider value (true).
310
+ */
311
+ animate?: boolean;
312
+ }
313
+ declare function Tooltip({ content, children, side, delayDuration, className, roughness, seed, sketchColor, bowing, fillStyle, strokeWidth, animate, }: TooltipProps): react.JSX.Element;
314
+
315
+ /**
316
+ * Offset a resolved sketch seed by a stable hash of `key`.
317
+ * Items in a list keep distinct wobbles that still redraw together on Shuffle.
318
+ */
319
+ declare function deriveSeed(base: number, key: string): number;
320
+
321
+ interface SelectOption {
322
+ value: string;
323
+ label: ReactNode;
324
+ disabled?: boolean;
325
+ }
326
+ interface SelectProps extends Omit<SelectPrimitive.SelectProps, "children">, SketchProps {
327
+ options: SelectOption[];
328
+ placeholder?: string;
329
+ className?: string;
330
+ style?: CSSProperties;
331
+ "aria-label"?: string;
332
+ /**
333
+ * Draw-in the trigger on mount and the popover border on open.
334
+ * Defaults to the DoodleUIProvider value (true).
335
+ */
336
+ animate?: boolean;
337
+ }
338
+ declare function Select({ options, placeholder, className, style, roughness, seed, sketchColor, bowing, fillStyle, strokeWidth, value, defaultValue, onValueChange, animate, "aria-label": ariaLabel, ...rest }: SelectProps): react.JSX.Element;
339
+ interface SelectTriggerProps extends Omit<SelectPrimitive.SelectTriggerProps, "asChild"> {
340
+ placeholder?: string;
341
+ }
342
+ declare const SelectTrigger: react.ForwardRefExoticComponent<SelectTriggerProps & react.RefAttributes<HTMLButtonElement>>;
343
+ interface SelectContentProps extends Omit<SelectPrimitive.SelectContentProps, "asChild" | "position"> {
344
+ children?: ReactNode;
345
+ }
346
+ declare const SelectContent: react.ForwardRefExoticComponent<SelectContentProps & react.RefAttributes<HTMLDivElement>>;
347
+ interface SelectItemProps extends Omit<SelectPrimitive.SelectItemProps, "asChild"> {
348
+ children?: ReactNode;
349
+ }
350
+ declare const SelectItem: react.ForwardRefExoticComponent<SelectItemProps & react.RefAttributes<HTMLDivElement>>;
351
+ declare const SelectRoot: react.FC<SelectPrimitive.SelectProps>;
352
+ declare const SelectValue: react.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & react.RefAttributes<HTMLSpanElement>>;
353
+ declare const SelectGroup: react.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & react.RefAttributes<HTMLDivElement>>;
354
+ declare const SelectLabel: react.ForwardRefExoticComponent<SelectPrimitive.SelectLabelProps & react.RefAttributes<HTMLDivElement>>;
355
+ declare const SelectSeparator: react.ForwardRefExoticComponent<SelectPrimitive.SelectSeparatorProps & react.RefAttributes<HTMLDivElement>>;
356
+
357
+ interface SwitchProps extends Omit<SwitchPrimitive.SwitchProps, "asChild">, SketchProps {
358
+ label?: ReactNode;
359
+ /**
360
+ * Slide the thumb and seed-morph the track on toggle.
361
+ * Defaults to the DoodleUIProvider value (true).
362
+ */
363
+ animate?: boolean;
364
+ }
365
+ declare const Switch: react.ForwardRefExoticComponent<SwitchProps & react.RefAttributes<HTMLButtonElement>>;
366
+
367
+ interface TabsProps extends Omit<ComponentPropsWithoutRef<typeof TabsPrimitive.Root>, "asChild">, SketchProps {
368
+ /**
369
+ * Draw-in the active underline and slide it on tab change.
370
+ * Defaults to the DoodleUIProvider value (true).
371
+ */
372
+ animate?: boolean;
373
+ }
374
+ declare const Tabs: react.ForwardRefExoticComponent<TabsProps & react.RefAttributes<HTMLDivElement>>;
375
+ interface TabListProps extends Omit<ComponentPropsWithoutRef<typeof TabsPrimitive.List>, "asChild"> {
376
+ }
377
+ declare const TabList: react.ForwardRefExoticComponent<TabListProps & react.RefAttributes<HTMLDivElement>>;
378
+ interface TabProps extends Omit<ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>, "asChild"> {
379
+ children?: ReactNode;
380
+ }
381
+ declare const Tab: react.ForwardRefExoticComponent<TabProps & react.RefAttributes<HTMLButtonElement>>;
382
+ interface TabPanelProps extends Omit<ComponentPropsWithoutRef<typeof TabsPrimitive.Content>, "asChild"> {
383
+ }
384
+ declare const TabPanel: react.ForwardRefExoticComponent<TabPanelProps & react.RefAttributes<HTMLDivElement>>;
385
+
386
+ interface TableProps extends Omit<TableHTMLAttributes<HTMLTableElement>, "color">, SketchProps {
387
+ headerUnderline?: boolean;
388
+ children?: ReactNode;
389
+ /**
390
+ * Draw-in row rules on mount, staggered slightly. Defaults to the
391
+ * DoodleUIProvider value (true).
392
+ */
393
+ animate?: boolean;
394
+ }
395
+ declare const Table: react.ForwardRefExoticComponent<TableProps & react.RefAttributes<HTMLTableElement>>;
396
+ declare const TableHead: react.ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & react.RefAttributes<HTMLTableSectionElement>>;
397
+ declare const TableBody: react.ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & react.RefAttributes<HTMLTableSectionElement>>;
398
+ declare const TableRow: react.ForwardRefExoticComponent<HTMLAttributes<HTMLTableRowElement> & react.RefAttributes<HTMLTableRowElement>>;
399
+ interface TableHeaderCellProps extends Omit<ThHTMLAttributes<HTMLTableCellElement>, "color"> {
400
+ }
401
+ declare const TableHeaderCell: react.ForwardRefExoticComponent<TableHeaderCellProps & react.RefAttributes<HTMLTableCellElement>>;
402
+ interface TableCellProps extends Omit<TdHTMLAttributes<HTMLTableCellElement>, "color"> {
403
+ }
404
+ declare const TableCell: react.ForwardRefExoticComponent<TableCellProps & react.RefAttributes<HTMLTableCellElement>>;
405
+
406
+ type ToastVariant = "info" | "warning" | "error" | "success";
407
+ type ToastPosition = "top-left" | "top-right" | "bottom-left" | "bottom-right";
408
+ interface ToastProviderProps {
409
+ children?: ReactNode;
410
+ position?: ToastPosition;
411
+ duration?: number;
412
+ swipeDirection?: ToastPrimitive.ToastProviderProps["swipeDirection"];
413
+ label?: string;
414
+ }
415
+ declare function ToastProvider({ children, position, duration, swipeDirection, label, }: ToastProviderProps): react.JSX.Element;
416
+ interface ToastProps extends SketchProps {
417
+ open?: boolean;
418
+ defaultOpen?: boolean;
419
+ onOpenChange?: (open: boolean) => void;
420
+ title?: ReactNode;
421
+ children?: ReactNode;
422
+ variant?: ToastVariant;
423
+ duration?: number;
424
+ className?: string;
425
+ style?: CSSProperties;
426
+ /**
427
+ * Slide-in with a sketchy settle wobble, reversed on exit.
428
+ * Defaults to the DoodleUIProvider value (true).
429
+ */
430
+ animate?: boolean;
431
+ }
432
+ declare function Toast({ open, defaultOpen, onOpenChange, title, children, variant, duration, className, style, roughness, seed, sketchColor, bowing, fillStyle, strokeWidth, animate, }: ToastProps): react.JSX.Element;
433
+ declare const ToastRoot: react.ForwardRefExoticComponent<ToastPrimitive.ToastProps & react.RefAttributes<HTMLLIElement>>;
434
+ declare const ToastTitle: react.ForwardRefExoticComponent<ToastPrimitive.ToastTitleProps & react.RefAttributes<HTMLDivElement>>;
435
+ declare const ToastDescription: react.ForwardRefExoticComponent<ToastPrimitive.ToastDescriptionProps & react.RefAttributes<HTMLDivElement>>;
436
+ declare const ToastClose: react.ForwardRefExoticComponent<ToastPrimitive.ToastCloseProps & react.RefAttributes<HTMLButtonElement>>;
437
+ declare const ToastAction: react.ForwardRefExoticComponent<ToastPrimitive.ToastActionProps & react.RefAttributes<HTMLButtonElement>>;
438
+ declare const ToastViewport: react.ForwardRefExoticComponent<ToastPrimitive.ToastViewportProps & react.RefAttributes<HTMLOListElement>>;
439
+
440
+ interface AccordionProps extends SketchProps {
441
+ type?: "single" | "multiple";
442
+ collapsible?: boolean;
443
+ value?: string | string[];
444
+ defaultValue?: string | string[];
445
+ onValueChange?: (value: string | string[]) => void;
446
+ disabled?: boolean;
447
+ className?: string;
448
+ style?: CSSProperties;
449
+ children?: ReactNode;
450
+ }
451
+ declare const Accordion: react.ForwardRefExoticComponent<AccordionProps & react.RefAttributes<HTMLDivElement>>;
452
+ interface AccordionItemProps extends Omit<ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>, "asChild"> {
453
+ }
454
+ declare const AccordionItem: react.ForwardRefExoticComponent<AccordionItemProps & react.RefAttributes<HTMLDivElement>>;
455
+ interface AccordionTriggerProps extends Omit<ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>, "asChild"> {
456
+ children?: ReactNode;
457
+ }
458
+ declare const AccordionTrigger: react.ForwardRefExoticComponent<AccordionTriggerProps & react.RefAttributes<HTMLButtonElement>>;
459
+ interface AccordionContentProps extends Omit<ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>, "asChild"> {
460
+ }
461
+ declare const AccordionContent: react.ForwardRefExoticComponent<AccordionContentProps & react.RefAttributes<HTMLDivElement>>;
462
+
463
+ type AvatarStatus = "online" | "offline" | "busy";
464
+ type AvatarShape = "circle" | "square";
465
+ interface AvatarProps extends Omit<AvatarPrimitive.AvatarProps, "asChild">, SketchProps {
466
+ src?: string;
467
+ alt?: string;
468
+ fallback?: ReactNode;
469
+ size?: number;
470
+ shape?: AvatarShape;
471
+ status?: AvatarStatus;
472
+ }
473
+ declare const Avatar: react.ForwardRefExoticComponent<AvatarProps & react.RefAttributes<HTMLSpanElement>>;
474
+
475
+ type SliderThumbShape = "circle" | "square";
476
+ interface SliderProps extends Omit<ComponentPropsWithoutRef<typeof SliderPrimitive.Root>, "asChild">, SketchProps {
477
+ thumbShape?: SliderThumbShape;
478
+ }
479
+ declare const Slider: react.ForwardRefExoticComponent<SliderProps & react.RefAttributes<HTMLSpanElement>>;
480
+
481
+ interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, "color" | "onChange">, SketchProps {
482
+ page: number;
483
+ count: number;
484
+ onPageChange?: (page: number) => void;
485
+ }
486
+ declare const Pagination: react.ForwardRefExoticComponent<PaginationProps & react.RefAttributes<HTMLElement>>;
487
+
488
+ type BreadcrumbSeparator = "slash" | "chevron";
489
+ interface BreadcrumbProps extends Omit<HTMLAttributes<HTMLElement>, "color">, SketchProps {
490
+ separator?: BreadcrumbSeparator;
491
+ children?: ReactNode;
492
+ }
493
+ declare const Breadcrumb: react.ForwardRefExoticComponent<BreadcrumbProps & react.RefAttributes<HTMLElement>>;
494
+ interface BreadcrumbItemProps extends Omit<HTMLAttributes<HTMLSpanElement>, "color"> {
495
+ href?: string;
496
+ current?: boolean;
497
+ index?: number;
498
+ children?: ReactNode;
499
+ }
500
+ declare const BreadcrumbItem: react.ForwardRefExoticComponent<BreadcrumbItemProps & react.RefAttributes<HTMLSpanElement>>;
501
+
502
+ type SkeletonVariant = "text" | "rect" | "circle";
503
+ interface SkeletonProps extends Omit<HTMLAttributes<HTMLDivElement>, "color">, SketchProps {
504
+ variant?: SkeletonVariant;
505
+ pulse?: boolean;
506
+ width?: number | string;
507
+ height?: number | string;
508
+ }
509
+ declare const Skeleton: react.ForwardRefExoticComponent<SkeletonProps & react.RefAttributes<HTMLDivElement>>;
510
+
511
+ type StepperOrientation = "horizontal" | "vertical";
512
+ interface StepperStep {
513
+ label: ReactNode;
514
+ description?: ReactNode;
515
+ }
516
+ interface StepperProps extends Omit<HTMLAttributes<HTMLDivElement>, "color">, SketchProps {
517
+ steps: Array<StepperStep | ReactNode>;
518
+ current?: number;
519
+ orientation?: StepperOrientation;
190
520
  }
191
- declare function Tooltip({ content, children, side, delayDuration, className, roughness, seed, sketchColor, bowing, fillStyle, strokeWidth, }: TooltipProps): react.JSX.Element;
521
+ declare const Stepper: react.ForwardRefExoticComponent<StepperProps & react.RefAttributes<HTMLDivElement>>;
192
522
 
193
- export { Alert, type AlertProps, type AlertVariant, Badge, type BadgeProps, type BadgeVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardProps, Checkbox, type CheckboxProps, DEFAULT_BOWING, DEFAULT_INK, DEFAULT_ROUGHNESS, DEFAULT_STROKE_WIDTH, Divider, type DividerOrientation, type DividerProps, type FillStyle, Input, type InputProps, Modal, ModalClose, ModalDescription, type ModalProps, ModalRoot, ModalTitle, ModalTrigger, Progress, type ProgressProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, type RoughShape, RoughSvg, type RoughSvgProps, SKETCH_COLORS, SketchBox, type SketchBoxProps, type SketchProps, type SketchSeedContextValue, SketchSeedProvider, type SketchSeedProviderProps, Textarea, type TextareaProps, Tooltip, type TooltipProps, TooltipProvider, toRoughOptions, useResolvedSeed, useSketchSeed };
523
+ export { Accordion, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, Alert, type AlertProps, type AlertVariant, Avatar, type AvatarProps, type AvatarShape, type AvatarStatus, Badge, type BadgeProps, type BadgeVariant, Breadcrumb, BreadcrumbItem, type BreadcrumbItemProps, type BreadcrumbProps, type BreadcrumbSeparator, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardProps, Checkbox, type CheckboxProps, DEFAULT_BOWING, DEFAULT_INK, DEFAULT_ROUGHNESS, DEFAULT_STROKE_WIDTH, DRAW_IN_ALERT_MS, DRAW_IN_DURATION_MS, DRAW_IN_MARK_MS, DRAW_IN_TOOLTIP_MS, Divider, type DividerOrientation, type DividerProps, type DoodleUIContextValue, DoodleUIProvider, type DoodleUIProviderProps, type FillStyle, Input, type InputProps, Modal, ModalClose, ModalDescription, type ModalProps, ModalRoot, ModalTitle, ModalTrigger, Pagination, type PaginationProps, Progress, type ProgressProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, type RoughShape, RoughSvg, type RoughSvgProps, SKETCH_COLORS, Select, SelectContent, type SelectContentProps, SelectGroup, SelectItem, type SelectItemProps, SelectLabel, type SelectOption, type SelectProps, SelectRoot, SelectSeparator, SelectTrigger, type SelectTriggerProps, SelectValue, Skeleton, type SkeletonProps, type SkeletonVariant, SketchBox, type SketchBoxProps, type SketchProps, type SketchSeedContextValue, SketchSeedProvider, type SketchSeedProviderProps, Slider, type SliderProps, type SliderThumbShape, Stepper, type StepperOrientation, type StepperProps, type StepperStep, Switch, type SwitchProps, TABLE_STAGGER_MS, Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Table, TableBody, TableCell, type TableCellProps, TableHead, TableHeaderCell, type TableHeaderCellProps, type TableProps, TableRow, Tabs, type TabsProps, Textarea, type TextareaProps, Toast, ToastAction, ToastClose, ToastDescription, type ToastPosition, type ToastProps, ToastProvider, type ToastProviderProps, ToastRoot, ToastTitle, type ToastVariant, ToastViewport, Tooltip, type TooltipProps, TooltipProvider, deriveSeed, toRoughOptions, useAnimate, useDoodleUI, useDrawIn, useResolvedSeed, useSketchSeed };