doodleui-react 0.2.0 → 0.3.0

package/dist/index.d.cts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { CSSProperties, HTMLAttributes, ReactNode, ButtonHTMLAttributes, InputHTMLAttributes, TextareaHTMLAttributes, ComponentPropsWithoutRef, TableHTMLAttributes, TdHTMLAttributes, ThHTMLAttributes } from 'react';
+import { CSSProperties, HTMLAttributes, ReactNode, RefObject, ButtonHTMLAttributes, InputHTMLAttributes, TextareaHTMLAttributes, ComponentPropsWithoutRef, TableHTMLAttributes, TdHTMLAttributes, ThHTMLAttributes } from 'react';
 import { Options } from 'roughjs/bin/core';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
@@ -75,6 +75,14 @@ interface SketchBoxProps extends SketchProps, Omit<HTMLAttributes<HTMLDivElement
     contentStyle?: CSSProperties;
     inset?: number;
     path?: string;
+    /**
+     * Sketch-in the border on mount. Defaults to the DoodleUIProvider value.
+     */
+    animate?: boolean;
+    /** Override the default 400ms draw-in duration. */
+    drawInDuration?: number;
+    /** Replay draw-in when this value changes. */
+    drawInKey?: unknown;
 }
 declare const SketchBox: react.ForwardRefExoticComponent<SketchBoxProps & react.RefAttributes<HTMLDivElement>>;
 
@@ -106,26 +114,96 @@ declare function useSketchSeed(): SketchSeedContextValue;
  */
 declare function useResolvedSeed(seed?: number): number;
 
+interface DoodleUIContextValue {
+    /** Default for components that do not set their own `animate` prop. */
+    animate: boolean;
+    /** When true, skip the prefers-reduced-motion disable. */
+    forceAnimate: boolean;
+}
+interface DoodleUIProviderProps {
+    children: ReactNode;
+    /**
+     * Default animation setting for descendant doodle-ui components.
+     * Per-component `animate` still wins when it is set.
+     */
+    animate?: boolean;
+    /**
+     * Play animations even when the user prefers reduced motion.
+     * Off by default — only set this as an explicit escape hatch.
+     */
+    forceAnimate?: boolean;
+}
+declare function DoodleUIProvider({ children, animate, forceAnimate, }: DoodleUIProviderProps): react.JSX.Element;
+declare function useDoodleUI(): DoodleUIContextValue;
+
+/**
+ * Whether the calling component should play sketch animations.
+ * Per-component `animate` overrides the provider. Reduced motion
+ * disables animation unless the provider set `forceAnimate`.
+ */
+declare function useAnimate(animate?: boolean): boolean;
+
+/** Default sketch-in duration. Ease-out over ~400ms. */
+declare const DRAW_IN_DURATION_MS = 400;
+/** Alerts often appear dynamically — keep the sketch-in snappy. */
+declare const DRAW_IN_ALERT_MS = 200;
+/** Tooltips are transient — draw in quickly. */
+declare const DRAW_IN_TOOLTIP_MS = 180;
+/** Checkmarks, radio dots, and tab underlines. */
+declare const DRAW_IN_MARK_MS = 240;
+/** Delay between table row rules. */
+declare const TABLE_STAGGER_MS = 40;
+/**
+ * Sketch-in the rough.js stroke path on the first paint, and again when
+ * `replayKey` changes (e.g. a hover seed swap).
+ *
+ * `pathRef` may point at an SVG path, an `<svg>`, or any element that
+ * contains one — the hook finds the outline path either way.
+ */
+declare function useDrawIn(pathRef: RefObject<Element | null>, duration?: number, enabled?: boolean, replayKey?: unknown, delay?: number): void;
+
 type ButtonVariant = "primary" | "secondary" | "outline" | "ghost";
 type ButtonSize = "sm" | "md" | "lg";
 interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "color">, SketchProps {
     variant?: ButtonVariant;
     size?: ButtonSize;
+    /**
+     * Play sketch animations (draw-in on mount, seed morph on hover).
+     * Defaults to the DoodleUIProvider value (true). Explicit `false`
+     * renders a static sketch. `prefers-reduced-motion: reduce` disables
+     * animation unless the provider set `forceAnimate`.
+     */
+    animate?: boolean;
 }
 declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
 
 interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "color" | "size">, SketchProps {
     label?: ReactNode;
+    /**
+     * Draw-in the border on mount and seed-morph on focus.
+     * Defaults to the DoodleUIProvider value (true).
+     */
+    animate?: boolean;
 }
 declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<HTMLInputElement>>;
 
 interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "color">, SketchProps {
     label?: ReactNode;
+    /**
+     * Draw-in the border on mount and seed-morph on focus.
+     * Defaults to the DoodleUIProvider value (true).
+     */
+    animate?: boolean;
 }
 declare const Textarea: react.ForwardRefExoticComponent<TextareaProps & react.RefAttributes<HTMLTextAreaElement>>;
 
 interface CheckboxProps extends Omit<CheckboxPrimitive.CheckboxProps, "asChild">, SketchProps {
     label?: ReactNode;
+    /**
+     * Draw-in the box on mount and the checkmark when checked.
+     * Defaults to the DoodleUIProvider value (true).
+     */
+    animate?: boolean;
 }
 declare const Checkbox: react.ForwardRefExoticComponent<CheckboxProps & react.RefAttributes<HTMLButtonElement>>;
 
@@ -134,6 +212,11 @@ interface RadioGroupProps extends ComponentPropsWithoutRef<typeof RadioGroupPrim
 declare const RadioGroup: react.ForwardRefExoticComponent<RadioGroupProps & react.RefAttributes<HTMLDivElement>>;
 interface RadioProps extends Omit<ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>, "asChild">, SketchProps {
     label?: ReactNode;
+    /**
+     * Draw-in the ring on mount and scale/draw the dot on select.
+     * Defaults to the DoodleUIProvider value (true).
+     */
+    animate?: boolean;
 }
 declare const Radio: react.ForwardRefExoticComponent<RadioProps & react.RefAttributes<HTMLButtonElement>>;
 
@@ -142,12 +225,20 @@ interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, "color" | "titl
     fill?: string;
     title?: ReactNode;
     footer?: ReactNode;
+    /**
+     * Draw-in the border on mount. Defaults to the DoodleUIProvider value (true).
+     */
+    animate?: boolean;
 }
 declare const Card: react.ForwardRefExoticComponent<CardProps & react.RefAttributes<HTMLDivElement>>;
 
 type BadgeVariant = "default" | "accent" | "outline";
 interface BadgeProps extends Omit<HTMLAttributes<HTMLSpanElement>, "color">, SketchProps {
     variant?: BadgeVariant;
+    /**
+     * Draw-in the border on mount. Defaults to the DoodleUIProvider value (true).
+     */
+    animate?: boolean;
 }
 declare const Badge: react.ForwardRefExoticComponent<BadgeProps & react.RefAttributes<HTMLSpanElement>>;
 
@@ -155,6 +246,10 @@ type AlertVariant = "info" | "warning" | "error" | "success";
 interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, "color" | "title">, SketchProps {
     variant?: AlertVariant;
     title?: ReactNode;
+    /**
+     * Draw-in the border on mount (~200ms). Defaults to the DoodleUIProvider value (true).
+     */
+    animate?: boolean;
 }
 declare const Alert: react.ForwardRefExoticComponent<AlertProps & react.RefAttributes<HTMLDivElement>>;
 
@@ -167,8 +262,13 @@ interface ModalProps extends SketchProps {
     description?: ReactNode;
     children?: ReactNode;
     className?: string;
+    /**
+     * Backdrop fade, panel enter/exit, and border draw-in on open.
+     * Defaults to the DoodleUIProvider value (true).
+     */
+    animate?: boolean;
 }
-declare function Modal({ open, defaultOpen, onOpenChange, trigger, title, description, children, className, roughness, seed, sketchColor, bowing, fillStyle, strokeWidth, }: ModalProps): react.JSX.Element;
+declare function Modal({ open, defaultOpen, onOpenChange, trigger, title, description, children, className, roughness, seed, sketchColor, bowing, fillStyle, strokeWidth, animate, }: ModalProps): react.JSX.Element;
 declare const ModalRoot: react.FC<Dialog.DialogProps>;
 declare const ModalTrigger: react.ForwardRefExoticComponent<Dialog.DialogTriggerProps & react.RefAttributes<HTMLButtonElement>>;
 declare const ModalClose: react.ForwardRefExoticComponent<Dialog.DialogCloseProps & react.RefAttributes<HTMLButtonElement>>;
@@ -178,12 +278,22 @@ declare const ModalDescription: react.ForwardRefExoticComponent<Dialog.DialogDes
 type DividerOrientation = "horizontal" | "vertical";
 interface DividerProps extends Omit<HTMLAttributes<HTMLDivElement>, "color">, SketchProps {
     orientation?: DividerOrientation;
+    /**
+     * Draw-in so the line extends across its length. Defaults to the
+     * DoodleUIProvider value (true).
+     */
+    animate?: boolean;
 }
 declare const Divider: react.ForwardRefExoticComponent<DividerProps & react.RefAttributes<HTMLDivElement>>;
 
 interface ProgressProps extends Omit<HTMLAttributes<HTMLDivElement>, "color">, SketchProps {
     value?: number;
     max?: number;
+    /**
+     * Draw-in the track on mount and redraw the fill as value changes.
+     * Defaults to the DoodleUIProvider value (true).
+     */
+    animate?: boolean;
 }
 declare const Progress: react.ForwardRefExoticComponent<ProgressProps & react.RefAttributes<HTMLDivElement>>;
 
@@ -194,8 +304,13 @@ interface TooltipProps extends SketchProps {
     side?: ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>["side"];
     delayDuration?: number;
     className?: string;
+    /**
+     * Quick draw-in when the bubble shows (~180ms). Defaults to the
+     * DoodleUIProvider value (true).
+     */
+    animate?: boolean;
 }
-declare function Tooltip({ content, children, side, delayDuration, className, roughness, seed, sketchColor, bowing, fillStyle, strokeWidth, }: TooltipProps): react.JSX.Element;
+declare function Tooltip({ content, children, side, delayDuration, className, roughness, seed, sketchColor, bowing, fillStyle, strokeWidth, animate, }: TooltipProps): react.JSX.Element;
 
 /**
  * Offset a resolved sketch seed by a stable hash of `key`.
@@ -214,8 +329,13 @@ interface SelectProps extends Omit<SelectPrimitive.SelectProps, "children">, Ske
     className?: string;
     style?: CSSProperties;
     "aria-label"?: string;
+    /**
+     * Draw-in the trigger on mount and the popover border on open.
+     * Defaults to the DoodleUIProvider value (true).
+     */
+    animate?: boolean;
 }
-declare function Select({ options, placeholder, className, style, roughness, seed, sketchColor, bowing, fillStyle, strokeWidth, value, defaultValue, onValueChange, "aria-label": ariaLabel, ...rest }: SelectProps): react.JSX.Element;
+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;
 interface SelectTriggerProps extends Omit<SelectPrimitive.SelectTriggerProps, "asChild"> {
     placeholder?: string;
 }
@@ -236,10 +356,20 @@ declare const SelectSeparator: react.ForwardRefExoticComponent<SelectPrimitive.S
 
 interface SwitchProps extends Omit<SwitchPrimitive.SwitchProps, "asChild">, SketchProps {
     label?: ReactNode;
+    /**
+     * Slide the thumb and seed-morph the track on toggle.
+     * Defaults to the DoodleUIProvider value (true).
+     */
+    animate?: boolean;
 }
 declare const Switch: react.ForwardRefExoticComponent<SwitchProps & react.RefAttributes<HTMLButtonElement>>;
 
 interface TabsProps extends Omit<ComponentPropsWithoutRef<typeof TabsPrimitive.Root>, "asChild">, SketchProps {
+    /**
+     * Draw-in the active underline and slide it on tab change.
+     * Defaults to the DoodleUIProvider value (true).
+     */
+    animate?: boolean;
 }
 declare const Tabs: react.ForwardRefExoticComponent<TabsProps & react.RefAttributes<HTMLDivElement>>;
 interface TabListProps extends Omit<ComponentPropsWithoutRef<typeof TabsPrimitive.List>, "asChild"> {
@@ -256,6 +386,11 @@ declare const TabPanel: react.ForwardRefExoticComponent<TabPanelProps & react.Re
 interface TableProps extends Omit<TableHTMLAttributes<HTMLTableElement>, "color">, SketchProps {
     headerUnderline?: boolean;
     children?: ReactNode;
+    /**
+     * Draw-in row rules on mount, staggered slightly. Defaults to the
+     * DoodleUIProvider value (true).
+     */
+    animate?: boolean;
 }
 declare const Table: react.ForwardRefExoticComponent<TableProps & react.RefAttributes<HTMLTableElement>>;
 declare const TableHead: react.ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & react.RefAttributes<HTMLTableSectionElement>>;
@@ -288,8 +423,13 @@ interface ToastProps extends SketchProps {
     duration?: number;
     className?: string;
     style?: CSSProperties;
+    /**
+     * Slide-in with a sketchy settle wobble, reversed on exit.
+     * Defaults to the DoodleUIProvider value (true).
+     */
+    animate?: boolean;
 }
-declare function Toast({ open, defaultOpen, onOpenChange, title, children, variant, duration, className, style, roughness, seed, sketchColor, bowing, fillStyle, strokeWidth, }: ToastProps): react.JSX.Element;
+declare function Toast({ open, defaultOpen, onOpenChange, title, children, variant, duration, className, style, roughness, seed, sketchColor, bowing, fillStyle, strokeWidth, animate, }: ToastProps): react.JSX.Element;
 declare const ToastRoot: react.ForwardRefExoticComponent<ToastPrimitive.ToastProps & react.RefAttributes<HTMLLIElement>>;
 declare const ToastTitle: react.ForwardRefExoticComponent<ToastPrimitive.ToastTitleProps & react.RefAttributes<HTMLDivElement>>;
 declare const ToastDescription: react.ForwardRefExoticComponent<ToastPrimitive.ToastDescriptionProps & react.RefAttributes<HTMLDivElement>>;
@@ -380,4 +520,4 @@ interface StepperProps extends Omit<HTMLAttributes<HTMLDivElement>, "color">, Sk
 }
 declare const Stepper: react.ForwardRefExoticComponent<StepperProps & react.RefAttributes<HTMLDivElement>>;
 
-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, Divider, type DividerOrientation, type DividerProps, 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, 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, useResolvedSeed, useSketchSeed };
+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 };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { CSSProperties, HTMLAttributes, ReactNode, ButtonHTMLAttributes, InputHTMLAttributes, TextareaHTMLAttributes, ComponentPropsWithoutRef, TableHTMLAttributes, TdHTMLAttributes, ThHTMLAttributes } from 'react';
+import { CSSProperties, HTMLAttributes, ReactNode, RefObject, ButtonHTMLAttributes, InputHTMLAttributes, TextareaHTMLAttributes, ComponentPropsWithoutRef, TableHTMLAttributes, TdHTMLAttributes, ThHTMLAttributes } from 'react';
 import { Options } from 'roughjs/bin/core';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
@@ -75,6 +75,14 @@ interface SketchBoxProps extends SketchProps, Omit<HTMLAttributes<HTMLDivElement
     contentStyle?: CSSProperties;
     inset?: number;
     path?: string;
+    /**
+     * Sketch-in the border on mount. Defaults to the DoodleUIProvider value.
+     */
+    animate?: boolean;
+    /** Override the default 400ms draw-in duration. */
+    drawInDuration?: number;
+    /** Replay draw-in when this value changes. */
+    drawInKey?: unknown;
 }
 declare const SketchBox: react.ForwardRefExoticComponent<SketchBoxProps & react.RefAttributes<HTMLDivElement>>;
 
@@ -106,26 +114,96 @@ declare function useSketchSeed(): SketchSeedContextValue;
  */
 declare function useResolvedSeed(seed?: number): number;
 
+interface DoodleUIContextValue {
+    /** Default for components that do not set their own `animate` prop. */
+    animate: boolean;
+    /** When true, skip the prefers-reduced-motion disable. */
+    forceAnimate: boolean;
+}
+interface DoodleUIProviderProps {
+    children: ReactNode;
+    /**
+     * Default animation setting for descendant doodle-ui components.
+     * Per-component `animate` still wins when it is set.
+     */
+    animate?: boolean;
+    /**
+     * Play animations even when the user prefers reduced motion.
+     * Off by default — only set this as an explicit escape hatch.
+     */
+    forceAnimate?: boolean;
+}
+declare function DoodleUIProvider({ children, animate, forceAnimate, }: DoodleUIProviderProps): react.JSX.Element;
+declare function useDoodleUI(): DoodleUIContextValue;
+
+/**
+ * Whether the calling component should play sketch animations.
+ * Per-component `animate` overrides the provider. Reduced motion
+ * disables animation unless the provider set `forceAnimate`.
+ */
+declare function useAnimate(animate?: boolean): boolean;
+
+/** Default sketch-in duration. Ease-out over ~400ms. */
+declare const DRAW_IN_DURATION_MS = 400;
+/** Alerts often appear dynamically — keep the sketch-in snappy. */
+declare const DRAW_IN_ALERT_MS = 200;
+/** Tooltips are transient — draw in quickly. */
+declare const DRAW_IN_TOOLTIP_MS = 180;
+/** Checkmarks, radio dots, and tab underlines. */
+declare const DRAW_IN_MARK_MS = 240;
+/** Delay between table row rules. */
+declare const TABLE_STAGGER_MS = 40;
+/**
+ * Sketch-in the rough.js stroke path on the first paint, and again when
+ * `replayKey` changes (e.g. a hover seed swap).
+ *
+ * `pathRef` may point at an SVG path, an `<svg>`, or any element that
+ * contains one — the hook finds the outline path either way.
+ */
+declare function useDrawIn(pathRef: RefObject<Element | null>, duration?: number, enabled?: boolean, replayKey?: unknown, delay?: number): void;
+
 type ButtonVariant = "primary" | "secondary" | "outline" | "ghost";
 type ButtonSize = "sm" | "md" | "lg";
 interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "color">, SketchProps {
     variant?: ButtonVariant;
     size?: ButtonSize;
+    /**
+     * Play sketch animations (draw-in on mount, seed morph on hover).
+     * Defaults to the DoodleUIProvider value (true). Explicit `false`
+     * renders a static sketch. `prefers-reduced-motion: reduce` disables
+     * animation unless the provider set `forceAnimate`.
+     */
+    animate?: boolean;
 }
 declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
 
 interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "color" | "size">, SketchProps {
     label?: ReactNode;
+    /**
+     * Draw-in the border on mount and seed-morph on focus.
+     * Defaults to the DoodleUIProvider value (true).
+     */
+    animate?: boolean;
 }
 declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<HTMLInputElement>>;
 
 interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "color">, SketchProps {
     label?: ReactNode;
+    /**
+     * Draw-in the border on mount and seed-morph on focus.
+     * Defaults to the DoodleUIProvider value (true).
+     */
+    animate?: boolean;
 }
 declare const Textarea: react.ForwardRefExoticComponent<TextareaProps & react.RefAttributes<HTMLTextAreaElement>>;
 
 interface CheckboxProps extends Omit<CheckboxPrimitive.CheckboxProps, "asChild">, SketchProps {
     label?: ReactNode;
+    /**
+     * Draw-in the box on mount and the checkmark when checked.
+     * Defaults to the DoodleUIProvider value (true).
+     */
+    animate?: boolean;
 }
 declare const Checkbox: react.ForwardRefExoticComponent<CheckboxProps & react.RefAttributes<HTMLButtonElement>>;
 
@@ -134,6 +212,11 @@ interface RadioGroupProps extends ComponentPropsWithoutRef<typeof RadioGroupPrim
 declare const RadioGroup: react.ForwardRefExoticComponent<RadioGroupProps & react.RefAttributes<HTMLDivElement>>;
 interface RadioProps extends Omit<ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>, "asChild">, SketchProps {
     label?: ReactNode;
+    /**
+     * Draw-in the ring on mount and scale/draw the dot on select.
+     * Defaults to the DoodleUIProvider value (true).
+     */
+    animate?: boolean;
 }
 declare const Radio: react.ForwardRefExoticComponent<RadioProps & react.RefAttributes<HTMLButtonElement>>;
 
@@ -142,12 +225,20 @@ interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, "color" | "titl
     fill?: string;
     title?: ReactNode;
     footer?: ReactNode;
+    /**
+     * Draw-in the border on mount. Defaults to the DoodleUIProvider value (true).
+     */
+    animate?: boolean;
 }
 declare const Card: react.ForwardRefExoticComponent<CardProps & react.RefAttributes<HTMLDivElement>>;
 
 type BadgeVariant = "default" | "accent" | "outline";
 interface BadgeProps extends Omit<HTMLAttributes<HTMLSpanElement>, "color">, SketchProps {
     variant?: BadgeVariant;
+    /**
+     * Draw-in the border on mount. Defaults to the DoodleUIProvider value (true).
+     */
+    animate?: boolean;
 }
 declare const Badge: react.ForwardRefExoticComponent<BadgeProps & react.RefAttributes<HTMLSpanElement>>;
 
@@ -155,6 +246,10 @@ type AlertVariant = "info" | "warning" | "error" | "success";
 interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, "color" | "title">, SketchProps {
     variant?: AlertVariant;
     title?: ReactNode;
+    /**
+     * Draw-in the border on mount (~200ms). Defaults to the DoodleUIProvider value (true).
+     */
+    animate?: boolean;
 }
 declare const Alert: react.ForwardRefExoticComponent<AlertProps & react.RefAttributes<HTMLDivElement>>;
 
@@ -167,8 +262,13 @@ interface ModalProps extends SketchProps {
     description?: ReactNode;
     children?: ReactNode;
     className?: string;
+    /**
+     * Backdrop fade, panel enter/exit, and border draw-in on open.
+     * Defaults to the DoodleUIProvider value (true).
+     */
+    animate?: boolean;
 }
-declare function Modal({ open, defaultOpen, onOpenChange, trigger, title, description, children, className, roughness, seed, sketchColor, bowing, fillStyle, strokeWidth, }: ModalProps): react.JSX.Element;
+declare function Modal({ open, defaultOpen, onOpenChange, trigger, title, description, children, className, roughness, seed, sketchColor, bowing, fillStyle, strokeWidth, animate, }: ModalProps): react.JSX.Element;
 declare const ModalRoot: react.FC<Dialog.DialogProps>;
 declare const ModalTrigger: react.ForwardRefExoticComponent<Dialog.DialogTriggerProps & react.RefAttributes<HTMLButtonElement>>;
 declare const ModalClose: react.ForwardRefExoticComponent<Dialog.DialogCloseProps & react.RefAttributes<HTMLButtonElement>>;
@@ -178,12 +278,22 @@ declare const ModalDescription: react.ForwardRefExoticComponent<Dialog.DialogDes
 type DividerOrientation = "horizontal" | "vertical";
 interface DividerProps extends Omit<HTMLAttributes<HTMLDivElement>, "color">, SketchProps {
     orientation?: DividerOrientation;
+    /**
+     * Draw-in so the line extends across its length. Defaults to the
+     * DoodleUIProvider value (true).
+     */
+    animate?: boolean;
 }
 declare const Divider: react.ForwardRefExoticComponent<DividerProps & react.RefAttributes<HTMLDivElement>>;
 
 interface ProgressProps extends Omit<HTMLAttributes<HTMLDivElement>, "color">, SketchProps {
     value?: number;
     max?: number;
+    /**
+     * Draw-in the track on mount and redraw the fill as value changes.
+     * Defaults to the DoodleUIProvider value (true).
+     */
+    animate?: boolean;
 }
 declare const Progress: react.ForwardRefExoticComponent<ProgressProps & react.RefAttributes<HTMLDivElement>>;
 
@@ -194,8 +304,13 @@ interface TooltipProps extends SketchProps {
     side?: ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>["side"];
     delayDuration?: number;
     className?: string;
+    /**
+     * Quick draw-in when the bubble shows (~180ms). Defaults to the
+     * DoodleUIProvider value (true).
+     */
+    animate?: boolean;
 }
-declare function Tooltip({ content, children, side, delayDuration, className, roughness, seed, sketchColor, bowing, fillStyle, strokeWidth, }: TooltipProps): react.JSX.Element;
+declare function Tooltip({ content, children, side, delayDuration, className, roughness, seed, sketchColor, bowing, fillStyle, strokeWidth, animate, }: TooltipProps): react.JSX.Element;
 
 /**
  * Offset a resolved sketch seed by a stable hash of `key`.
@@ -214,8 +329,13 @@ interface SelectProps extends Omit<SelectPrimitive.SelectProps, "children">, Ske
     className?: string;
     style?: CSSProperties;
     "aria-label"?: string;
+    /**
+     * Draw-in the trigger on mount and the popover border on open.
+     * Defaults to the DoodleUIProvider value (true).
+     */
+    animate?: boolean;
 }
-declare function Select({ options, placeholder, className, style, roughness, seed, sketchColor, bowing, fillStyle, strokeWidth, value, defaultValue, onValueChange, "aria-label": ariaLabel, ...rest }: SelectProps): react.JSX.Element;
+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;
 interface SelectTriggerProps extends Omit<SelectPrimitive.SelectTriggerProps, "asChild"> {
     placeholder?: string;
 }
@@ -236,10 +356,20 @@ declare const SelectSeparator: react.ForwardRefExoticComponent<SelectPrimitive.S
 
 interface SwitchProps extends Omit<SwitchPrimitive.SwitchProps, "asChild">, SketchProps {
     label?: ReactNode;
+    /**
+     * Slide the thumb and seed-morph the track on toggle.
+     * Defaults to the DoodleUIProvider value (true).
+     */
+    animate?: boolean;
 }
 declare const Switch: react.ForwardRefExoticComponent<SwitchProps & react.RefAttributes<HTMLButtonElement>>;
 
 interface TabsProps extends Omit<ComponentPropsWithoutRef<typeof TabsPrimitive.Root>, "asChild">, SketchProps {
+    /**
+     * Draw-in the active underline and slide it on tab change.
+     * Defaults to the DoodleUIProvider value (true).
+     */
+    animate?: boolean;
 }
 declare const Tabs: react.ForwardRefExoticComponent<TabsProps & react.RefAttributes<HTMLDivElement>>;
 interface TabListProps extends Omit<ComponentPropsWithoutRef<typeof TabsPrimitive.List>, "asChild"> {
@@ -256,6 +386,11 @@ declare const TabPanel: react.ForwardRefExoticComponent<TabPanelProps & react.Re
 interface TableProps extends Omit<TableHTMLAttributes<HTMLTableElement>, "color">, SketchProps {
     headerUnderline?: boolean;
     children?: ReactNode;
+    /**
+     * Draw-in row rules on mount, staggered slightly. Defaults to the
+     * DoodleUIProvider value (true).
+     */
+    animate?: boolean;
 }
 declare const Table: react.ForwardRefExoticComponent<TableProps & react.RefAttributes<HTMLTableElement>>;
 declare const TableHead: react.ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & react.RefAttributes<HTMLTableSectionElement>>;
@@ -288,8 +423,13 @@ interface ToastProps extends SketchProps {
     duration?: number;
     className?: string;
     style?: CSSProperties;
+    /**
+     * Slide-in with a sketchy settle wobble, reversed on exit.
+     * Defaults to the DoodleUIProvider value (true).
+     */
+    animate?: boolean;
 }
-declare function Toast({ open, defaultOpen, onOpenChange, title, children, variant, duration, className, style, roughness, seed, sketchColor, bowing, fillStyle, strokeWidth, }: ToastProps): react.JSX.Element;
+declare function Toast({ open, defaultOpen, onOpenChange, title, children, variant, duration, className, style, roughness, seed, sketchColor, bowing, fillStyle, strokeWidth, animate, }: ToastProps): react.JSX.Element;
 declare const ToastRoot: react.ForwardRefExoticComponent<ToastPrimitive.ToastProps & react.RefAttributes<HTMLLIElement>>;
 declare const ToastTitle: react.ForwardRefExoticComponent<ToastPrimitive.ToastTitleProps & react.RefAttributes<HTMLDivElement>>;
 declare const ToastDescription: react.ForwardRefExoticComponent<ToastPrimitive.ToastDescriptionProps & react.RefAttributes<HTMLDivElement>>;
@@ -380,4 +520,4 @@ interface StepperProps extends Omit<HTMLAttributes<HTMLDivElement>, "color">, Sk
 }
 declare const Stepper: react.ForwardRefExoticComponent<StepperProps & react.RefAttributes<HTMLDivElement>>;
 
-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, Divider, type DividerOrientation, type DividerProps, 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, 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, useResolvedSeed, useSketchSeed };
+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 };