doodleui-react 0.5.0 → 0.6.1

package/dist/index.d.cts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { CSSProperties, HTMLAttributes, ReactNode, RefObject, ButtonHTMLAttributes, InputHTMLAttributes, TextareaHTMLAttributes, ComponentPropsWithoutRef, TableHTMLAttributes, TdHTMLAttributes, ThHTMLAttributes } from 'react';
+import { CSSProperties, HTMLAttributes, ReactNode, RefObject, ButtonHTMLAttributes, InputHTMLAttributes, TextareaHTMLAttributes, ComponentPropsWithoutRef, TableHTMLAttributes, TdHTMLAttributes, ThHTMLAttributes, SelectHTMLAttributes, ReactElement } 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';
@@ -27,6 +27,7 @@ import * as HoverCardPrimitive from '@radix-ui/react-hover-card';
 import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
 import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu';
 import * as MenubarPrimitive from '@radix-ui/react-menubar';
+import useEmblaCarousel, { UseEmblaCarouselType } from 'embla-carousel-react';
 
 type FillStyle = "hachure" | "solid" | "zigzag" | "cross-hatch" | "dots" | "dashed" | "zigzag-line";
 type RoughShape = "rectangle" | "ellipse" | "line" | "line-vertical" | "path";
@@ -41,6 +42,12 @@ interface SketchProps {
     bowing?: number;
     fillStyle?: FillStyle;
     strokeWidth?: number;
+    /** Spacing between hatch lines for patterned fills. Defaults to 4 in roughjs, higher = airier */
+    hachureGap?: number;
+    /** Angle in degrees of the hatch lines */
+    hachureAngle?: number;
+    /** Weight/thickness of the hatch lines */
+    fillWeight?: number;
 }
 interface RoughSvgProps extends SketchProps {
     shape?: RoughShape;
@@ -62,6 +69,10 @@ declare const DEFAULT_ROUGHNESS = 1.5;
 declare const DEFAULT_BOWING = 1;
 declare const DEFAULT_STROKE_WIDTH = 1.75;
 declare const DEFAULT_INK = "#1f1d1a";
+declare const DEFAULT_DARK_INK = "#f3f4f6";
+declare const DEFAULT_PAPER = "#f7f6f2";
+declare const DEFAULT_DARK_PAPER = "#131923";
+declare const DEFAULT_DARK_CARD_BG = "#131923";
 declare const SKETCH_COLORS: {
     readonly ink: "#1f1d1a";
     readonly accent: "#e24b3b";
@@ -73,12 +84,25 @@ declare const SKETCH_COLORS: {
     readonly error: "#c0392b";
     readonly success: "#2d6a4f";
 };
+declare const DARK_SKETCH_COLORS: {
+    readonly ink: "#f3f4f6";
+    readonly accent: "#f87171";
+    readonly accentFill: "rgba(248, 113, 113, 0.22)";
+    readonly secondaryFill: "rgba(255, 255, 255, 0.08)";
+    readonly paper: "#131923";
+    readonly cardBg: "#131923";
+    readonly shadow: "#000000";
+    readonly info: "#60a5fa";
+    readonly warning: "#fbbf24";
+    readonly error: "#f87171";
+    readonly success: "#34d399";
+};
 
 /**
  * Absolutely-positioned SVG layer that draws a rough.js shape behind HTML content.
  * Parent must be `position: relative`.
  */
-declare function RoughSvg({ shape, width: widthProp, height: heightProp, roughness, seed: seedProp, sketchColor, bowing, fillStyle, strokeWidth, fill, inset, path, className, style, }: RoughSvgProps): react.JSX.Element;
+declare function RoughSvg({ shape, width: widthProp, height: heightProp, roughness, seed: seedProp, sketchColor, bowing, fillStyle, strokeWidth, fill, hachureGap, hachureAngle, fillWeight, inset, path, className, style, }: RoughSvgProps): react.JSX.Element;
 
 interface SketchBoxProps extends SketchProps, Omit<HTMLAttributes<HTMLDivElement>, "color"> {
     children?: ReactNode;
@@ -129,11 +153,34 @@ declare function useSketchSeed(): SketchSeedContextValue;
  */
 declare function useResolvedSeed(seed?: number): number;
 
+interface ResolvedSketchTheme {
+    isDark: boolean;
+    ink: string;
+    paper: string;
+    cardBg: string;
+    shadow: string;
+    accent: string;
+    accentFill: string;
+    secondaryFill: string;
+    info: string;
+    warning: string;
+    error: string;
+    success: string;
+}
+type SketchTheme = ResolvedSketchTheme;
+declare function useSketchTheme(sketchColorOverride?: string): ResolvedSketchTheme;
+
+type DoodleUITheme = "light" | "dark" | "system";
 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;
+    /**
+     * Theme mode: "light", "dark", or "system". Defaults to "system"
+     * (automatically tracks document .dark class or prefers-color-scheme).
+     */
+    theme?: DoodleUITheme;
 }
 interface DoodleUIProviderProps {
     children: ReactNode;
@@ -147,8 +194,13 @@ interface DoodleUIProviderProps {
      * Off by default — only set this as an explicit escape hatch.
      */
     forceAnimate?: boolean;
+    /**
+     * Theme mode: "light", "dark", or "system". Defaults to "system"
+     * (automatically reacts to html.dark, [data-theme="dark"], and system dark mode).
+     */
+    theme?: DoodleUITheme;
 }
-declare function DoodleUIProvider({ children, animate, forceAnimate, }: DoodleUIProviderProps): react.JSX.Element;
+declare function DoodleUIProvider({ children, animate, forceAnimate, theme, }: DoodleUIProviderProps): react.JSX.Element;
 declare function useDoodleUI(): DoodleUIContextValue;
 
 /**
@@ -214,6 +266,7 @@ declare const Textarea: react.ForwardRefExoticComponent<TextareaProps & react.Re
 
 interface CheckboxProps extends Omit<CheckboxPrimitive.CheckboxProps, "asChild">, SketchProps {
     label?: ReactNode;
+    fill?: string;
     /**
      * Draw-in the box on mount and the checkmark when checked.
      * Defaults to the DoodleUIProvider value (true).
@@ -227,6 +280,7 @@ 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;
+    fill?: string;
     /**
      * Draw-in the ring on mount and scale/draw the dot on select.
      * Defaults to the DoodleUIProvider value (true).
@@ -261,6 +315,7 @@ type AlertVariant = "info" | "warning" | "error" | "success";
 interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, "color" | "title">, SketchProps {
     variant?: AlertVariant;
     title?: ReactNode;
+    fill?: string;
     /**
      * Draw-in the border on mount (~200ms). Defaults to the DoodleUIProvider value (true).
      */
@@ -277,13 +332,14 @@ interface ModalProps extends SketchProps {
     description?: ReactNode;
     children?: ReactNode;
     className?: string;
+    fill?: 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, animate, }: ModalProps): react.JSX.Element;
+declare function Modal({ open, defaultOpen, onOpenChange, trigger, title, description, children, className, fill, roughness, seed, sketchColor, bowing, fillStyle, strokeWidth, hachureGap, hachureAngle, fillWeight, animate, }: ModalProps): react.JSX.Element;
 declare const ModalRoot: react.FC<DialogPrimitive.DialogProps>;
 declare const ModalTrigger: react.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & react.RefAttributes<HTMLButtonElement>>;
 declare const ModalClose: react.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & react.RefAttributes<HTMLButtonElement>>;
@@ -319,13 +375,14 @@ interface TooltipProps extends SketchProps {
     side?: ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>["side"];
     delayDuration?: number;
     className?: string;
+    fill?: 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, animate, }: TooltipProps): react.JSX.Element;
+declare function Tooltip({ content, children, side, delayDuration, className, fill, roughness, seed, sketchColor, bowing, fillStyle, strokeWidth, hachureGap, hachureAngle, fillWeight, animate, }: TooltipProps): react.JSX.Element;
 
 /**
  * Offset a resolved sketch seed by a stable hash of `key`.
@@ -343,6 +400,7 @@ interface SelectProps extends Omit<SelectPrimitive.SelectProps, "children">, Ske
     placeholder?: string;
     className?: string;
     style?: CSSProperties;
+    fill?: string;
     "aria-label"?: string;
     /**
      * Draw-in the trigger on mount and the popover border on open.
@@ -350,13 +408,14 @@ interface SelectProps extends Omit<SelectPrimitive.SelectProps, "children">, Ske
      */
     animate?: boolean;
 }
-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;
+declare function Select({ options, placeholder, className, style, fill, roughness, seed, sketchColor, bowing, fillStyle, strokeWidth, hachureGap, hachureAngle, fillWeight, value, defaultValue, onValueChange, animate, "aria-label": ariaLabel, ...rest }: SelectProps): react.JSX.Element;
 interface SelectTriggerProps extends Omit<SelectPrimitive.SelectTriggerProps, "asChild"> {
     placeholder?: string;
 }
 declare const SelectTrigger: react.ForwardRefExoticComponent<SelectTriggerProps & react.RefAttributes<HTMLButtonElement>>;
 interface SelectContentProps extends Omit<SelectPrimitive.SelectContentProps, "asChild" | "position"> {
     children?: ReactNode;
+    fill?: string;
 }
 declare const SelectContent: react.ForwardRefExoticComponent<SelectContentProps & react.RefAttributes<HTMLDivElement>>;
 interface SelectItemProps extends Omit<SelectPrimitive.SelectItemProps, "asChild"> {
@@ -435,6 +494,7 @@ interface ToastProps extends SketchProps {
     title?: ReactNode;
     children?: ReactNode;
     variant?: ToastVariant;
+    fill?: string;
     duration?: number;
     className?: string;
     style?: CSSProperties;
@@ -444,7 +504,7 @@ interface ToastProps extends SketchProps {
      */
     animate?: boolean;
 }
-declare function Toast({ open, defaultOpen, onOpenChange, title, children, variant, duration, className, style, roughness, seed, sketchColor, bowing, fillStyle, strokeWidth, animate, }: ToastProps): react.JSX.Element;
+declare function Toast({ open, defaultOpen, onOpenChange, title, children, variant, fill, duration, className, style, roughness, seed, sketchColor, bowing, fillStyle, strokeWidth, hachureGap, hachureAngle, fillWeight, 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>>;
@@ -484,12 +544,14 @@ interface AvatarProps extends Omit<AvatarPrimitive.AvatarProps, "asChild">, Sket
     size?: number;
     shape?: AvatarShape;
     status?: AvatarStatus;
+    fill?: string;
 }
 declare const Avatar: react.ForwardRefExoticComponent<AvatarProps & react.RefAttributes<HTMLSpanElement>>;
 
 type SliderThumbShape = "circle" | "square";
 interface SliderProps extends Omit<ComponentPropsWithoutRef<typeof SliderPrimitive.Root>, "asChild">, SketchProps {
     thumbShape?: SliderThumbShape;
+    fill?: string;
 }
 declare const Slider: react.ForwardRefExoticComponent<SliderProps & react.RefAttributes<HTMLSpanElement>>;
 
@@ -532,6 +594,7 @@ interface StepperProps extends Omit<HTMLAttributes<HTMLDivElement>, "color">, Sk
     steps: Array<StepperStep | ReactNode>;
     current?: number;
     orientation?: StepperOrientation;
+    fill?: string;
 }
 declare const Stepper: react.ForwardRefExoticComponent<StepperProps & react.RefAttributes<HTMLDivElement>>;
 
@@ -566,39 +629,41 @@ declare const CollapsibleContent: react.ForwardRefExoticComponent<CollapsibleCon
 
 interface PopoverProps extends Omit<PopoverPrimitive.PopoverProps, "children">, SketchProps {
     children?: ReactNode;
+    fill?: string;
     /**
      * Draw-in the panel border when the popover opens.
      * Defaults to the DoodleUIProvider value (true).
      */
     animate?: boolean;
 }
-declare function Popover({ children, roughness, seed, sketchColor, bowing, fillStyle, strokeWidth, animate, ...rest }: PopoverProps): react.JSX.Element;
+declare function Popover({ children, fill, roughness, seed, sketchColor, bowing, fillStyle, strokeWidth, hachureGap, hachureAngle, fillWeight, animate, ...rest }: PopoverProps): react.JSX.Element;
 declare const PopoverTrigger: react.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & react.RefAttributes<HTMLButtonElement>>;
 declare const PopoverAnchor: react.ForwardRefExoticComponent<PopoverPrimitive.PopoverAnchorProps & react.RefAttributes<HTMLDivElement>>;
 declare const PopoverClose: react.ForwardRefExoticComponent<PopoverPrimitive.PopoverCloseProps & react.RefAttributes<HTMLButtonElement>>;
 interface PopoverContentProps extends Omit<PopoverPrimitive.PopoverContentProps, "asChild"> {
     children?: ReactNode;
+    fill?: string;
 }
 declare const PopoverContent: react.ForwardRefExoticComponent<PopoverContentProps & react.RefAttributes<HTMLDivElement>>;
-interface PopoverArrowProps extends ComponentPropsWithoutRef<typeof PopoverPrimitive.Arrow> {
-}
-declare const PopoverArrow: react.ForwardRefExoticComponent<PopoverArrowProps & react.RefAttributes<SVGSVGElement>>;
+declare function PopoverArrow(props: ComponentPropsWithoutRef<typeof PopoverPrimitive.Arrow>): react.JSX.Element;
 
 interface DropdownMenuProps extends Omit<DropdownMenuPrimitive.DropdownMenuProps, "children">, SketchProps {
     children?: ReactNode;
+    fill?: string;
     /**
      * Draw-in the panel border when the menu opens.
      * Defaults to the DoodleUIProvider value (true).
      */
     animate?: boolean;
 }
-declare function DropdownMenu({ children, roughness, seed, sketchColor, bowing, fillStyle, strokeWidth, animate, ...rest }: DropdownMenuProps): react.JSX.Element;
+declare function DropdownMenu({ children, fill, roughness, seed, sketchColor, bowing, fillStyle, strokeWidth, hachureGap, hachureAngle, fillWeight, animate, ...rest }: DropdownMenuProps): react.JSX.Element;
 declare const DropdownMenuTrigger: react.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & react.RefAttributes<HTMLButtonElement>>;
 declare const DropdownMenuGroup: react.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuGroupProps & react.RefAttributes<HTMLDivElement>>;
 declare const DropdownMenuRadioGroup: react.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuRadioGroupProps & react.RefAttributes<HTMLDivElement>>;
 declare const DropdownMenuSub: react.FC<DropdownMenuPrimitive.DropdownMenuSubProps>;
 interface DropdownMenuContentProps extends Omit<DropdownMenuPrimitive.DropdownMenuContentProps, "asChild"> {
     children?: ReactNode;
+    fill?: string;
 }
 declare const DropdownMenuContent: react.ForwardRefExoticComponent<DropdownMenuContentProps & react.RefAttributes<HTMLDivElement>>;
 interface DropdownMenuItemProps extends Omit<DropdownMenuPrimitive.DropdownMenuItemProps, "asChild"> {
@@ -624,6 +689,7 @@ declare const DropdownMenuSeparator: react.ForwardRefExoticComponent<DropdownMen
 
 interface DialogProps extends Omit<DialogPrimitive.DialogProps, "children">, SketchProps {
     children?: ReactNode;
+    fill?: string;
     /**
      * Backdrop fade, panel enter/exit, and border draw-in on open.
      * Defaults to the DoodleUIProvider value (true).
@@ -637,7 +703,7 @@ interface DialogProps extends Omit<DialogPrimitive.DialogProps, "children">, Ske
  * `Modal`, `DialogContent` has no forced width or shadow and no built-in
  * close button — compose your own layout inside it.
  */
-declare function Dialog({ children, open, defaultOpen, onOpenChange, roughness, seed, sketchColor, bowing, fillStyle, strokeWidth, animate, ...rest }: DialogProps): react.JSX.Element;
+declare function Dialog({ children, open, defaultOpen, onOpenChange, fill, roughness, seed, sketchColor, bowing, fillStyle, strokeWidth, hachureGap, hachureAngle, fillWeight, animate, ...rest }: DialogProps): react.JSX.Element;
 declare const DialogTrigger: react.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & react.RefAttributes<HTMLButtonElement>>;
 declare const DialogPortal: react.FC<DialogPrimitive.DialogPortalProps>;
 declare const DialogClose: react.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & react.RefAttributes<HTMLButtonElement>>;
@@ -646,6 +712,7 @@ interface DialogOverlayProps extends Omit<DialogPrimitive.DialogOverlayProps, "a
 declare const DialogOverlay: react.ForwardRefExoticComponent<DialogOverlayProps & react.RefAttributes<HTMLDivElement>>;
 interface DialogContentProps extends Omit<DialogPrimitive.DialogContentProps, "asChild" | "forceMount"> {
     children?: ReactNode;
+    fill?: string;
     /** Panel width. Defaults to `min(420px, calc(100vw - 32px))`. */
     contentStyle?: CSSProperties;
 }
@@ -671,6 +738,7 @@ declare const DialogDescription: react.ForwardRefExoticComponent<DialogDescripti
 
 interface AlertDialogProps extends Omit<AlertDialogPrimitive.AlertDialogProps, "children">, SketchProps {
     children?: ReactNode;
+    fill?: string;
     /**
      * Backdrop fade, panel enter/exit, and border draw-in on open.
      * Defaults to the DoodleUIProvider value (true).
@@ -683,7 +751,7 @@ interface AlertDialogProps extends Omit<AlertDialogPrimitive.AlertDialogProps, "
  * no dismiss-on-outside-click or Escape by default, and `AlertDialogAction`
  * / `AlertDialogCancel` give the confirm button visual emphasis.
  */
-declare function AlertDialog({ children, open, defaultOpen, onOpenChange, roughness, seed, sketchColor, bowing, fillStyle, strokeWidth, animate, ...rest }: AlertDialogProps): react.JSX.Element;
+declare function AlertDialog({ children, open, defaultOpen, onOpenChange, fill, roughness, seed, sketchColor, bowing, fillStyle, strokeWidth, hachureGap, hachureAngle, fillWeight, animate, ...rest }: AlertDialogProps): react.JSX.Element;
 declare const AlertDialogTrigger: react.ForwardRefExoticComponent<AlertDialogPrimitive.AlertDialogTriggerProps & react.RefAttributes<HTMLButtonElement>>;
 declare const AlertDialogPortal: react.FC<AlertDialogPrimitive.AlertDialogPortalProps>;
 interface AlertDialogOverlayProps extends Omit<AlertDialogPrimitive.AlertDialogOverlayProps, "asChild" | "forceMount"> {
@@ -691,6 +759,7 @@ interface AlertDialogOverlayProps extends Omit<AlertDialogPrimitive.AlertDialogO
 declare const AlertDialogOverlay: react.ForwardRefExoticComponent<AlertDialogOverlayProps & react.RefAttributes<HTMLDivElement>>;
 interface AlertDialogContentProps extends Omit<AlertDialogPrimitive.AlertDialogContentProps, "asChild" | "forceMount"> {
     children?: ReactNode;
+    fill?: string;
     contentStyle?: CSSProperties;
 }
 declare const AlertDialogContent: react.ForwardRefExoticComponent<AlertDialogContentProps & react.RefAttributes<HTMLDivElement>>;
@@ -780,9 +849,10 @@ interface ComboboxProps extends SketchProps {
  * filtering/list) behind a sketchy `Input`-styled trigger button — the same
  * recipe shadcn uses, since Radix has no dedicated Combobox primitive.
  */
-declare function Combobox({ options, placeholder, searchPlaceholder, emptyMessage, value, defaultValue, onValueChange, disabled, className, style, roughness, seed, sketchColor, bowing, fillStyle, strokeWidth, animate, "aria-label": ariaLabel, }: ComboboxProps): react.JSX.Element;
+declare function Combobox({ options, placeholder, searchPlaceholder, emptyMessage, value, defaultValue, onValueChange, disabled, className, style, roughness, seed, sketchColor, bowing, fillStyle, strokeWidth, hachureGap, hachureAngle, fillWeight, animate, "aria-label": ariaLabel, }: ComboboxProps): react.JSX.Element;
 
 interface KbdProps extends Omit<HTMLAttributes<HTMLElement>, "color">, SketchProps {
+    fill?: string;
     /**
      * Draw-in the border on mount. Defaults to the DoodleUIProvider value (true).
      */
@@ -831,7 +901,7 @@ interface InputGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, "color">,
     children?: ReactNode;
     animate?: boolean;
 }
-declare function InputGroup({ children, className, style, roughness, seed, sketchColor, bowing, fillStyle, strokeWidth, animate, onFocus, onBlur, ...rest }: InputGroupProps): react.JSX.Element;
+declare function InputGroup({ children, className, style, roughness, seed, sketchColor, bowing, fillStyle, strokeWidth, hachureGap, hachureAngle, fillWeight, animate, onFocus, onBlur, ...rest }: InputGroupProps): react.JSX.Element;
 interface InputGroupAddonProps extends HTMLAttributes<HTMLSpanElement> {
     align?: "inline-start" | "inline-end";
 }
@@ -844,6 +914,7 @@ interface InputGroupButtonProps extends HTMLAttributes<HTMLSpanElement> {
 declare const InputGroupButton: react.ForwardRefExoticComponent<InputGroupButtonProps & react.RefAttributes<HTMLSpanElement>>;
 
 interface InputOTPProps extends Omit<ComponentPropsWithoutRef<typeof OTPInput>, "render">, SketchProps {
+    fill?: string;
     animate?: boolean;
 }
 declare const InputOTP: react.ForwardRefExoticComponent<InputOTPProps & react.RefAttributes<HTMLInputElement>>;
@@ -861,6 +932,7 @@ declare const InputOTPSeparator: react.ForwardRefExoticComponent<InputOTPSeparat
 
 interface ScrollAreaProps extends Omit<ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>, "children">, SketchProps {
     children?: ReactNode;
+    fill?: string;
     animate?: boolean;
 }
 declare const ScrollArea: react.ForwardRefExoticComponent<ScrollAreaProps & react.RefAttributes<HTMLDivElement>>;
@@ -896,31 +968,35 @@ declare function ResizableHandle({ className, style, withHandle, roughness, seed
 
 interface HoverCardProps extends Omit<ComponentPropsWithoutRef<typeof HoverCardPrimitive.Root>, "children">, SketchProps {
     children?: ReactNode;
+    fill?: string;
     animate?: boolean;
 }
-declare function HoverCard({ children, roughness, seed, sketchColor, bowing, fillStyle, strokeWidth, animate, ...rest }: HoverCardProps): react.JSX.Element;
+declare function HoverCard({ children, fill, roughness, seed, sketchColor, bowing, fillStyle, strokeWidth, hachureGap, hachureAngle, fillWeight, animate, ...rest }: HoverCardProps): react.JSX.Element;
 declare const HoverCardTrigger: react.ForwardRefExoticComponent<HoverCardPrimitive.HoverCardTriggerProps & react.RefAttributes<HTMLAnchorElement>>;
 interface HoverCardContentProps extends ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content> {
     children?: ReactNode;
+    fill?: string;
 }
 declare const HoverCardContent: react.ForwardRefExoticComponent<HoverCardContentProps & react.RefAttributes<HTMLDivElement>>;
 declare const HoverCardArrow: react.ForwardRefExoticComponent<HoverCardPrimitive.HoverCardArrowProps & react.RefAttributes<SVGSVGElement>>;
 
 interface ContextMenuProps extends Omit<ContextMenuPrimitive.ContextMenuProps, "children">, SketchProps {
     children?: ReactNode;
+    fill?: string;
     /**
      * Draw-in the panel border when the menu opens.
      * Defaults to the DoodleUIProvider value (true).
      */
     animate?: boolean;
 }
-declare function ContextMenu({ children, roughness, seed, sketchColor, bowing, fillStyle, strokeWidth, animate, ...rest }: ContextMenuProps): react.JSX.Element;
+declare function ContextMenu({ children, fill, roughness, seed, sketchColor, bowing, fillStyle, strokeWidth, hachureGap, hachureAngle, fillWeight, animate, ...rest }: ContextMenuProps): react.JSX.Element;
 declare const ContextMenuTrigger: react.ForwardRefExoticComponent<ContextMenuPrimitive.ContextMenuTriggerProps & react.RefAttributes<HTMLSpanElement>>;
 declare const ContextMenuGroup: react.ForwardRefExoticComponent<ContextMenuPrimitive.ContextMenuGroupProps & react.RefAttributes<HTMLDivElement>>;
 declare const ContextMenuRadioGroup: react.ForwardRefExoticComponent<ContextMenuPrimitive.ContextMenuRadioGroupProps & react.RefAttributes<HTMLDivElement>>;
 declare const ContextMenuSub: react.FC<ContextMenuPrimitive.ContextMenuSubProps>;
 interface ContextMenuContentProps extends Omit<ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>, "asChild"> {
     children?: ReactNode;
+    fill?: string;
 }
 declare const ContextMenuContent: react.ForwardRefExoticComponent<ContextMenuContentProps & react.RefAttributes<HTMLDivElement>>;
 interface ContextMenuItemProps extends Omit<ContextMenuPrimitive.ContextMenuItemProps, "asChild"> {
@@ -946,13 +1022,16 @@ declare const ContextMenuSeparator: react.ForwardRefExoticComponent<ContextMenuS
 
 interface NavigationMenuProps extends Omit<ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>, "children">, SketchProps {
     children?: ReactNode;
+    fill?: string;
     animate?: boolean;
 }
-declare function NavigationMenu({ children, roughness, seed, sketchColor, bowing, fillStyle, strokeWidth, animate, ...rest }: NavigationMenuProps): react.JSX.Element;
+declare function NavigationMenu({ children, fill, roughness, seed, sketchColor, bowing, fillStyle, strokeWidth, hachureGap, hachureAngle, fillWeight, animate, ...rest }: NavigationMenuProps): react.JSX.Element;
 declare const NavigationMenuList: react.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuListProps & react.RefAttributes<HTMLUListElement>, "ref"> & react.RefAttributes<HTMLUListElement>>;
 declare const NavigationMenuItem: react.ForwardRefExoticComponent<NavigationMenuPrimitive.NavigationMenuItemProps & react.RefAttributes<HTMLLIElement>>;
 declare const NavigationMenuTrigger: react.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuTriggerProps & react.RefAttributes<HTMLButtonElement>, "ref"> & react.RefAttributes<HTMLButtonElement>>;
-declare const NavigationMenuContent: react.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+declare const NavigationMenuContent: react.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & {
+    fill?: string;
+} & react.RefAttributes<HTMLDivElement>>;
 declare const NavigationMenuLink: react.ForwardRefExoticComponent<NavigationMenuPrimitive.NavigationMenuLinkProps & react.RefAttributes<HTMLAnchorElement>>;
 declare const NavigationMenuViewport: react.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuViewportProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
 declare const NavigationMenuIndicator: react.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuIndicatorProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
@@ -963,12 +1042,15 @@ declare const NavigationMenuItemLink: react.ForwardRefExoticComponent<Navigation
 
 interface MenubarProps extends Omit<ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>, "children">, SketchProps {
     children?: ReactNode;
+    fill?: string;
     animate?: boolean;
 }
-declare function Menubar({ children, className, style, roughness, seed, sketchColor, bowing, fillStyle, strokeWidth, animate, ...rest }: MenubarProps): react.JSX.Element;
+declare function Menubar({ children, className, style, fill, roughness, seed, sketchColor, bowing, fillStyle, strokeWidth, hachureGap, hachureAngle, fillWeight, animate, ...rest }: MenubarProps): react.JSX.Element;
 declare const MenubarMenu: typeof MenubarPrimitive.Menu;
 declare const MenubarTrigger: react.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarTriggerProps & react.RefAttributes<HTMLButtonElement>, "ref"> & react.RefAttributes<HTMLButtonElement>>;
-declare const MenubarContent: react.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+declare const MenubarContent: react.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & {
+    fill?: string;
+} & react.RefAttributes<HTMLDivElement>>;
 declare const MenubarItem: react.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarItemProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
 declare const MenubarSeparator: react.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarSeparatorProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
 declare const MenubarLabel: react.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarLabelProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
@@ -984,11 +1066,13 @@ type SlidingPanelSide = "top" | "right" | "bottom" | "left";
 interface SlidingPanelRootProps extends Omit<DialogPrimitive.DialogProps, "children">, SketchProps {
     children?: ReactNode;
     side?: SlidingPanelSide;
+    fill?: string;
     animate?: boolean;
 }
 interface SlidingPanelContentProps extends Omit<DialogPrimitive.DialogContentProps, "asChild" | "forceMount"> {
     children?: ReactNode;
     contentStyle?: CSSProperties;
+    fill?: string;
     /** Extra chrome above panel content (e.g. drawer handle). */
     chrome?: ReactNode;
 }
@@ -1032,4 +1116,167 @@ declare const DrawerFooter: typeof SlidingPanelFooter;
 declare const DrawerTitle: react.ForwardRefExoticComponent<DialogPrimitive.DialogTitleProps & react.RefAttributes<HTMLHeadingElement>>;
 declare const DrawerDescription: react.ForwardRefExoticComponent<DialogPrimitive.DialogDescriptionProps & react.RefAttributes<HTMLParagraphElement>>;
 
-export { Accordion, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, Alert, AlertDialog, AlertDialogAction, type AlertDialogActionProps, AlertDialogCancel, type AlertDialogCancelProps, AlertDialogContent, type AlertDialogContentProps, AlertDialogDescription, type AlertDialogDescriptionProps, AlertDialogFooter, type AlertDialogFooterProps, AlertDialogHeader, type AlertDialogHeaderProps, AlertDialogOverlay, AlertDialogPortal, type AlertDialogProps, AlertDialogTitle, type AlertDialogTitleProps, AlertDialogTrigger, 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, Collapsible, CollapsibleContent, type CollapsibleContentProps, type CollapsibleProps, CollapsibleTrigger, type CollapsibleTriggerProps, Combobox, type ComboboxProps, Command, CommandEmpty, type CommandEmptyProps, CommandGroup, type CommandGroupProps, CommandInput, type CommandInputProps, CommandItem, type CommandItemProps, CommandList, type CommandListProps, type CommandProps, CommandSeparator, type CommandSeparatorProps, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, type ContextMenuCheckboxItemProps, ContextMenuContent, type ContextMenuContentProps, ContextMenuGroup, ContextMenuItem, type ContextMenuItemProps, ContextMenuLabel, type ContextMenuLabelProps, type ContextMenuProps, ContextMenuRadioGroup, ContextMenuRadioItem, type ContextMenuRadioItemProps, ContextMenuSeparator, type ContextMenuSeparatorProps, ContextMenuSub, ContextMenuTrigger, 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, Dialog, DialogClose, DialogContent, type DialogContentProps, DialogDescription, type DialogDescriptionProps, DialogFooter, type DialogFooterProps, DialogHeader, type DialogHeaderProps, DialogOverlay, DialogPortal, type DialogProps, DialogTitle, type DialogTitleProps, DialogTrigger, Divider, type DividerOrientation, type DividerProps, type DoodleUIContextValue, DoodleUIProvider, type DoodleUIProviderProps, Drawer, DrawerClose, DrawerContent, type DrawerContentProps, DrawerDescription, DrawerFooter, DrawerHandle, DrawerHeader, type DrawerProps, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, type DropdownMenuCheckboxItemProps, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuGroup, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuLabel, type DropdownMenuLabelProps, type DropdownMenuProps, DropdownMenuRadioGroup, DropdownMenuRadioItem, type DropdownMenuRadioItemProps, DropdownMenuSeparator, type DropdownMenuSeparatorProps, DropdownMenuSub, DropdownMenuTrigger, type FillStyle, HoverCard, HoverCardArrow, HoverCardContent, type HoverCardContentProps, type HoverCardProps, HoverCardTrigger, Input, InputGroup, InputGroupAddon, type InputGroupAddonProps, InputGroupButton, type InputGroupButtonProps, InputGroupInput, type InputGroupInputProps, type InputGroupProps, InputOTP, InputOTPGroup, type InputOTPGroupProps, type InputOTPProps, InputOTPSeparator, type InputOTPSeparatorProps, InputOTPSlot, type InputOTPSlotProps, type InputProps, Kbd, type KbdProps, Label, type LabelProps, Menubar, MenubarCheckboxItem, MenubarContent, MenubarItem, MenubarLabel, MenubarMenu, type MenubarProps, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, Modal, ModalClose, ModalDescription, type ModalProps, ModalRoot, ModalTitle, ModalTrigger, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuItemLink, type NavigationMenuItemLinkProps, NavigationMenuLink, NavigationMenuList, type NavigationMenuProps, NavigationMenuTrigger, NavigationMenuViewport, Pagination, type PaginationProps, Popover, PopoverAnchor, PopoverArrow, PopoverClose, PopoverContent, type PopoverContentProps, type PopoverProps, PopoverTrigger, Progress, type ProgressProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, ResizableHandle, type ResizableHandleProps, ResizablePanel, ResizablePanelGroup, type ResizablePanelGroupProps, type RoughShape, RoughSvg, type RoughSvgProps, SKETCH_COLORS, ScrollArea, ScrollAreaCorner, type ScrollAreaProps, ScrollAreaViewport, ScrollBar, type ScrollBarProps, Select, SelectContent, type SelectContentProps, SelectGroup, SelectItem, type SelectItemProps, SelectLabel, type SelectOption, type SelectProps, SelectRoot, SelectSeparator, SelectTrigger, type SelectTriggerProps, SelectValue, Sheet, SheetClose, SheetContent, type SheetContentProps, SheetDescription, SheetFooter, SheetHeader, type SheetProps, SheetTitle, SheetTrigger, Skeleton, type SkeletonProps, type SkeletonVariant, SketchBox, type SketchBoxProps, type SketchProps, type SketchSeedContextValue, SketchSeedProvider, type SketchSeedProviderProps, Slider, type SliderProps, type SliderThumbShape, Spinner, type SpinnerProps, type SpinnerSize, 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, Toggle, ToggleGroup, ToggleGroupItem, type ToggleGroupItemProps, type ToggleGroupProps, type ToggleProps, type ToggleSize, Tooltip, type TooltipProps, TooltipProvider, deriveSeed, toRoughOptions, useAnimate, useDoodleUI, useDrawIn, useResolvedSeed, useSketchSeed };
+interface AspectRatioProps extends SketchProps {
+    ratio?: number;
+    /** Wrap content in a hand-drawn frame. Default false — ratio box only. */
+    bordered?: boolean;
+    className?: string;
+    style?: CSSProperties;
+    children?: ReactNode;
+    fill?: string;
+    animate?: boolean;
+}
+declare function AspectRatio({ ratio, bordered, className, style, children, fill, roughness, seed, sketchColor, bowing, fillStyle, strokeWidth, hachureGap, hachureAngle, fillWeight, animate, }: AspectRatioProps): react.JSX.Element;
+
+interface NativeSelectOption {
+    value: string;
+    label: ReactNode;
+    disabled?: boolean;
+}
+interface NativeSelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, "color" | "size">, SketchProps {
+    options?: NativeSelectOption[];
+    fill?: string;
+    /** Draw-in the border on mount. Defaults to DoodleUIProvider (true). */
+    animate?: boolean;
+    className?: string;
+    style?: CSSProperties;
+}
+declare const NativeSelect: react.ForwardRefExoticComponent<NativeSelectProps & react.RefAttributes<HTMLSelectElement>>;
+
+interface EmptyProps extends Omit<HTMLAttributes<HTMLDivElement>, "color">, SketchProps {
+    bordered?: boolean;
+    fill?: string;
+    animate?: boolean;
+}
+declare const Empty: react.ForwardRefExoticComponent<EmptyProps & react.RefAttributes<HTMLDivElement>>;
+declare function EmptyMedia({ className, style, children, }: HTMLAttributes<HTMLDivElement>): react.JSX.Element;
+declare function EmptyTitle({ className, style, children, }: HTMLAttributes<HTMLHeadingElement>): react.JSX.Element;
+declare function EmptyDescription({ className, style, children, }: HTMLAttributes<HTMLParagraphElement>): react.JSX.Element;
+declare function EmptyAction({ className, style, children, }: HTMLAttributes<HTMLDivElement>): react.JSX.Element;
+
+interface FieldProps extends HTMLAttributes<HTMLDivElement> {
+    invalid?: boolean;
+    error?: ReactNode;
+}
+declare function Field({ className, style, children, invalid, error, ...rest }: FieldProps): react.JSX.Element;
+interface FieldLabelProps extends Omit<React.ComponentProps<typeof Label>, "htmlFor"> {
+}
+declare function FieldLabel({ className, style, ...rest }: FieldLabelProps): react.JSX.Element;
+declare function FieldDescription({ className, style, children, ...rest }: HTMLAttributes<HTMLParagraphElement>): react.JSX.Element;
+declare function FieldError({ className, style, children, ...rest }: HTMLAttributes<HTMLParagraphElement>): react.JSX.Element | null;
+interface FieldControlProps {
+    children: ReactElement;
+}
+declare function FieldControl({ children }: FieldControlProps): ReactElement<Record<string, unknown>, string | react.JSXElementConstructor<any>>;
+
+type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+type HeadingAccent = "none" | "underline" | "highlight";
+interface HeadingProps extends Omit<HTMLAttributes<HTMLHeadingElement>, "color">, SketchProps {
+    level?: HeadingLevel;
+    accent?: HeadingAccent;
+    animate?: boolean;
+}
+declare const Heading: react.ForwardRefExoticComponent<HeadingProps & react.RefAttributes<HTMLHeadingElement>>;
+interface TextProps extends HTMLAttributes<HTMLParagraphElement> {
+    variant?: "body" | "lead" | "muted";
+}
+declare const Text: react.ForwardRefExoticComponent<TextProps & react.RefAttributes<HTMLParagraphElement>>;
+declare const Paragraph: react.ForwardRefExoticComponent<TextProps & react.RefAttributes<HTMLParagraphElement>>;
+interface BlockquoteProps extends Omit<HTMLAttributes<HTMLQuoteElement>, "color">, SketchProps {
+    animate?: boolean;
+}
+declare const Blockquote: react.ForwardRefExoticComponent<BlockquoteProps & react.RefAttributes<HTMLQuoteElement>>;
+interface InlineCodeProps extends Omit<HTMLAttributes<HTMLElement>, "color">, SketchProps {
+    fill?: string;
+    animate?: boolean;
+}
+declare const InlineCode: react.ForwardRefExoticComponent<InlineCodeProps & react.RefAttributes<HTMLElement>>;
+interface HighlightProps extends Omit<HTMLAttributes<HTMLSpanElement>, "color">, SketchProps {
+    fill?: string;
+    animate?: boolean;
+}
+declare const Highlight: react.ForwardRefExoticComponent<HighlightProps & react.RefAttributes<HTMLSpanElement>>;
+
+interface SidebarContextValue {
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    collapsed: boolean;
+    toggleCollapsed: () => void;
+    ink: string;
+    paper: string;
+    sketch: SketchProps;
+}
+declare function useSidebar(): SidebarContextValue;
+interface SidebarProviderProps extends SketchProps {
+    defaultOpen?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    defaultCollapsed?: boolean;
+    children?: ReactNode;
+}
+declare function SidebarProvider({ defaultOpen, open: openProp, onOpenChange, defaultCollapsed, children, roughness, seed, sketchColor, bowing, strokeWidth, }: SidebarProviderProps): react.JSX.Element;
+interface SidebarProps extends HTMLAttributes<HTMLElement> {
+    side?: "left" | "right";
+    fill?: string;
+}
+declare const Sidebar: react.ForwardRefExoticComponent<SidebarProps & react.RefAttributes<HTMLElement>>;
+declare function SidebarHeader({ className, style, children, ...rest }: HTMLAttributes<HTMLDivElement>): react.JSX.Element;
+declare function SidebarContent({ className, style, children, ...rest }: HTMLAttributes<HTMLDivElement>): react.JSX.Element;
+declare function SidebarFooter({ className, style, children, ...rest }: HTMLAttributes<HTMLDivElement>): react.JSX.Element;
+declare function SidebarGroup({ className, style, children, title, ...rest }: HTMLAttributes<HTMLDivElement> & {
+    title?: ReactNode;
+}): react.JSX.Element;
+interface SidebarItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    active?: boolean;
+}
+declare const SidebarItem: react.ForwardRefExoticComponent<SidebarItemProps & react.RefAttributes<HTMLButtonElement>>;
+declare function SidebarTrigger({ className, style, children, ...rest }: ButtonHTMLAttributes<HTMLButtonElement>): react.JSX.Element;
+interface SidebarLayoutProps extends HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+}
+declare function SidebarLayout({ className, style, children, ...rest }: SidebarLayoutProps): react.JSX.Element;
+declare function SidebarInset({ className, style, children, ...rest }: HTMLAttributes<HTMLDivElement>): react.JSX.Element;
+
+type CarouselApi = UseEmblaCarouselType[1];
+interface CarouselContextValue {
+    emblaRef: ReturnType<typeof useEmblaCarousel>[0];
+    api: CarouselApi;
+    scrollPrev: () => void;
+    scrollNext: () => void;
+    canScrollPrev: boolean;
+    canScrollNext: boolean;
+    orientation: "horizontal" | "vertical";
+    sketch: SketchProps & {
+        animate?: boolean;
+        paper: string;
+        ink: string;
+    };
+    bordered: boolean;
+}
+declare function useCarousel(): CarouselContextValue;
+type CarouselOptions = Parameters<typeof useEmblaCarousel>[0];
+interface CarouselProps extends SketchProps {
+    opts?: CarouselOptions;
+    plugins?: Parameters<typeof useEmblaCarousel>[1];
+    orientation?: "horizontal" | "vertical";
+    bordered?: boolean;
+    className?: string;
+    style?: CSSProperties;
+    children?: ReactNode;
+    setApi?: (api: CarouselApi) => void;
+    fill?: string;
+    animate?: boolean;
+}
+declare function Carousel({ opts, plugins, orientation, bordered, className, style, children, setApi, fill, roughness, seed, sketchColor, bowing, strokeWidth, fillStyle, hachureGap, hachureAngle, fillWeight, animate, }: CarouselProps): react.JSX.Element;
+interface CarouselContentProps extends HTMLAttributes<HTMLDivElement> {
+}
+declare const CarouselContent: react.ForwardRefExoticComponent<CarouselContentProps & react.RefAttributes<HTMLDivElement>>;
+interface CarouselItemProps extends HTMLAttributes<HTMLDivElement> {
+}
+declare const CarouselItem: react.ForwardRefExoticComponent<CarouselItemProps & react.RefAttributes<HTMLDivElement>>;
+interface CarouselArrowProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+}
+declare const CarouselPrevious: react.ForwardRefExoticComponent<CarouselArrowProps & react.RefAttributes<HTMLButtonElement>>;
+declare const CarouselNext: react.ForwardRefExoticComponent<CarouselArrowProps & react.RefAttributes<HTMLButtonElement>>;
+
+export { Accordion, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, Alert, AlertDialog, AlertDialogAction, type AlertDialogActionProps, AlertDialogCancel, type AlertDialogCancelProps, AlertDialogContent, type AlertDialogContentProps, AlertDialogDescription, type AlertDialogDescriptionProps, AlertDialogFooter, type AlertDialogFooterProps, AlertDialogHeader, type AlertDialogHeaderProps, AlertDialogOverlay, AlertDialogPortal, type AlertDialogProps, AlertDialogTitle, type AlertDialogTitleProps, AlertDialogTrigger, type AlertProps, type AlertVariant, AspectRatio, type AspectRatioProps, Avatar, type AvatarProps, type AvatarShape, type AvatarStatus, Badge, type BadgeProps, type BadgeVariant, Blockquote, type BlockquoteProps, Breadcrumb, BreadcrumbItem, type BreadcrumbItemProps, type BreadcrumbProps, type BreadcrumbSeparator, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardProps, Carousel, type CarouselArrowProps, CarouselContent, type CarouselContentProps, CarouselItem, type CarouselItemProps, CarouselNext, type CarouselOptions, CarouselPrevious, type CarouselProps, Checkbox, type CheckboxProps, Collapsible, CollapsibleContent, type CollapsibleContentProps, type CollapsibleProps, CollapsibleTrigger, type CollapsibleTriggerProps, Combobox, type ComboboxProps, Command, CommandEmpty, type CommandEmptyProps, CommandGroup, type CommandGroupProps, CommandInput, type CommandInputProps, CommandItem, type CommandItemProps, CommandList, type CommandListProps, type CommandProps, CommandSeparator, type CommandSeparatorProps, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, type ContextMenuCheckboxItemProps, ContextMenuContent, type ContextMenuContentProps, ContextMenuGroup, ContextMenuItem, type ContextMenuItemProps, ContextMenuLabel, type ContextMenuLabelProps, type ContextMenuProps, ContextMenuRadioGroup, ContextMenuRadioItem, type ContextMenuRadioItemProps, ContextMenuSeparator, type ContextMenuSeparatorProps, ContextMenuSub, ContextMenuTrigger, DARK_SKETCH_COLORS, DEFAULT_BOWING, DEFAULT_DARK_CARD_BG, DEFAULT_DARK_INK, DEFAULT_DARK_PAPER, DEFAULT_INK, DEFAULT_PAPER, DEFAULT_ROUGHNESS, DEFAULT_STROKE_WIDTH, DRAW_IN_ALERT_MS, DRAW_IN_DURATION_MS, DRAW_IN_MARK_MS, DRAW_IN_TOOLTIP_MS, Dialog, DialogClose, DialogContent, type DialogContentProps, DialogDescription, type DialogDescriptionProps, DialogFooter, type DialogFooterProps, DialogHeader, type DialogHeaderProps, DialogOverlay, DialogPortal, type DialogProps, DialogTitle, type DialogTitleProps, DialogTrigger, Divider, type DividerOrientation, type DividerProps, type DoodleUIContextValue, DoodleUIProvider, type DoodleUIProviderProps, type DoodleUITheme, Drawer, DrawerClose, DrawerContent, type DrawerContentProps, DrawerDescription, DrawerFooter, DrawerHandle, DrawerHeader, type DrawerProps, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, type DropdownMenuCheckboxItemProps, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuGroup, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuLabel, type DropdownMenuLabelProps, type DropdownMenuProps, DropdownMenuRadioGroup, DropdownMenuRadioItem, type DropdownMenuRadioItemProps, DropdownMenuSeparator, type DropdownMenuSeparatorProps, DropdownMenuSub, DropdownMenuTrigger, Empty, EmptyAction, EmptyDescription, EmptyMedia, type EmptyProps, EmptyTitle, Field, FieldControl, type FieldControlProps, FieldDescription, FieldError, FieldLabel, type FieldLabelProps, type FieldProps, type FillStyle, Heading, type HeadingProps, Highlight, type HighlightProps, HoverCard, HoverCardArrow, HoverCardContent, type HoverCardContentProps, type HoverCardProps, HoverCardTrigger, InlineCode, type InlineCodeProps, Input, InputGroup, InputGroupAddon, type InputGroupAddonProps, InputGroupButton, type InputGroupButtonProps, InputGroupInput, type InputGroupInputProps, type InputGroupProps, InputOTP, InputOTPGroup, type InputOTPGroupProps, type InputOTPProps, InputOTPSeparator, type InputOTPSeparatorProps, InputOTPSlot, type InputOTPSlotProps, type InputProps, Kbd, type KbdProps, Label, type LabelProps, Menubar, MenubarCheckboxItem, MenubarContent, MenubarItem, MenubarLabel, MenubarMenu, type MenubarProps, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, Modal, ModalClose, ModalDescription, type ModalProps, ModalRoot, ModalTitle, ModalTrigger, NativeSelect, type NativeSelectOption, type NativeSelectProps, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuItemLink, type NavigationMenuItemLinkProps, NavigationMenuLink, NavigationMenuList, type NavigationMenuProps, NavigationMenuTrigger, NavigationMenuViewport, Pagination, type PaginationProps, Paragraph, Popover, PopoverAnchor, PopoverArrow, PopoverClose, PopoverContent, type PopoverContentProps, type PopoverProps, PopoverTrigger, Progress, type ProgressProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, ResizableHandle, type ResizableHandleProps, ResizablePanel, ResizablePanelGroup, type ResizablePanelGroupProps, type RoughShape, RoughSvg, type RoughSvgProps, SKETCH_COLORS, ScrollArea, ScrollAreaCorner, type ScrollAreaProps, ScrollAreaViewport, ScrollBar, type ScrollBarProps, Select, SelectContent, type SelectContentProps, SelectGroup, SelectItem, type SelectItemProps, SelectLabel, type SelectOption, type SelectProps, SelectRoot, SelectSeparator, SelectTrigger, type SelectTriggerProps, SelectValue, Sheet, SheetClose, SheetContent, type SheetContentProps, SheetDescription, SheetFooter, SheetHeader, type SheetProps, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarHeader, SidebarInset, SidebarItem, type SidebarItemProps, SidebarLayout, type SidebarLayoutProps, type SidebarProps, SidebarProvider, type SidebarProviderProps, SidebarTrigger, Skeleton, type SkeletonProps, type SkeletonVariant, SketchBox, type SketchBoxProps, type SketchProps, type SketchSeedContextValue, SketchSeedProvider, type SketchSeedProviderProps, type SketchTheme, Slider, type SliderProps, type SliderThumbShape, Spinner, type SpinnerProps, type SpinnerSize, 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, Text, type TextProps, Textarea, type TextareaProps, Toast, ToastAction, ToastClose, ToastDescription, type ToastPosition, type ToastProps, ToastProvider, type ToastProviderProps, ToastRoot, ToastTitle, type ToastVariant, ToastViewport, Toggle, ToggleGroup, ToggleGroupItem, type ToggleGroupItemProps, type ToggleGroupProps, type ToggleProps, type ToggleSize, Tooltip, type TooltipProps, TooltipProvider, deriveSeed, toRoughOptions, useAnimate, useCarousel, useDoodleUI, useDrawIn, useResolvedSeed, useSidebar, useSketchSeed, useSketchTheme };