doodleui-react 0.1.0 → 0.2.0

package/dist/index.js

@@ -1,11 +1,18 @@
 "use client";
-import { createContext, forwardRef, useState, useId, useRef, useLayoutEffect, useContext, useCallback, useMemo } from 'react';
+import { createContext, forwardRef, useState, useId, useRef, useLayoutEffect, useContext, Children, isValidElement, cloneElement, useEffect, useCallback, useMemo } from 'react';
 import rough from 'roughjs';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import * as Dialog from '@radix-ui/react-dialog';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import * as SwitchPrimitive from '@radix-ui/react-switch';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import * as ToastPrimitive from '@radix-ui/react-toast';
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import * as SliderPrimitive from '@radix-ui/react-slider';
 
 // src/types.ts
 function toRoughOptions(props) {
@@ -44,22 +51,61 @@ var SKETCH_COLORS = {
 function randomSeed() {
   return Math.floor(Math.random() * 2 ** 31);
 }
+var doodleUiFontFamily = "var(--doodle-ui-font, inherit)";
+function doodleUiFontWeight(fallback) {
+  return `var(--doodle-ui-font-weight, ${fallback})`;
+}
+function nextFontIndex(current, count) {
+  if (count <= 1) return 0;
+  let next = current;
+  while (next === current) {
+    next = Math.floor(Math.random() * count);
+  }
+  return next;
+}
 function cn(...parts) {
   const value = parts.filter(Boolean).join(" ");
   return value.length > 0 ? value : void 0;
 }
+function deriveSeed(base, key) {
+  let hash = 0;
+  for (let i = 0; i < key.length; i += 1) {
+    hash = hash * 31 + key.charCodeAt(i) | 0;
+  }
+  return (base + (hash >>> 0)) % 2 ** 31;
+}
 var SketchSeedContext = createContext(null);
 function SketchSeedProvider({
   children,
-  initialSeed
+  initialSeed,
+  fonts,
+  initialFontIndex = 0
 }) {
   const [seed, setSeed] = useState(() => initialSeed ?? randomSeed());
+  const [fontIndex, setFontIndex] = useState(initialFontIndex);
+  const fontCount = fonts?.length ?? 0;
   const shuffle = useCallback(() => {
     setSeed(randomSeed());
-  }, []);
+    setFontIndex((current) => nextFontIndex(current, fontCount));
+  }, [fontCount]);
+  const activeFamily = fontIndex > 0 ? fonts?.[fontIndex] : void 0;
+  useLayoutEffect(() => {
+    const root = document.documentElement;
+    if (activeFamily) {
+      root.style.setProperty("--doodle-ui-font", activeFamily);
+      root.style.setProperty("--doodle-ui-font-weight", "400");
+    } else {
+      root.style.setProperty("--doodle-ui-font", "initial");
+      root.style.setProperty("--doodle-ui-font-weight", "initial");
+    }
+    return () => {
+      root.style.removeProperty("--doodle-ui-font");
+      root.style.removeProperty("--doodle-ui-font-weight");
+    };
+  }, [activeFamily]);
   const value = useMemo(
-    () => ({ seed, shuffle, setSeed }),
-    [seed, shuffle]
+    () => ({ seed, fontIndex, shuffle, setSeed }),
+    [seed, fontIndex, shuffle]
   );
   return /* @__PURE__ */ jsx(SketchSeedContext.Provider, { value, children });
 }
@@ -264,7 +310,12 @@ var SketchBox = forwardRef(
             "div",
             {
               className: contentClassName,
-              style: { position: "relative", zIndex: 1, ...contentStyle },
+              style: {
+                position: "relative",
+                zIndex: 1,
+                fontFamily: doodleUiFontFamily,
+                ...contentStyle
+              },
               children
             }
           )
@@ -325,8 +376,8 @@ var Button = forwardRef(
           background: "transparent",
           cursor: disabled ? "not-allowed" : "pointer",
           color: ink,
-          fontFamily: "inherit",
-          fontWeight: 600,
+          fontFamily: doodleUiFontFamily,
+          fontWeight: doodleUiFontWeight(600),
           lineHeight: 1.2,
           opacity: disabled ? 0.45 : 1,
           ...SIZE_STYLES[size],
@@ -382,7 +433,18 @@ var Input = forwardRef(function Input2({
         width: "100%"
       },
       children: [
-        label ? /* @__PURE__ */ jsx("span", { style: { fontSize: 13, fontWeight: 600, color: ink }, children: label }) : null,
+        label ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: {
+              fontSize: 13,
+              fontWeight: doodleUiFontWeight(600),
+              fontFamily: doodleUiFontFamily,
+              color: ink
+            },
+            children: label
+          }
+        ) : null,
         /* @__PURE__ */ jsxs("span", { style: { position: "relative", display: "block" }, children: [
           /* @__PURE__ */ jsx(
             RoughSvg,
@@ -419,7 +481,7 @@ var Input = forwardRef(function Input2({
                 outline: "none",
                 background: "transparent",
                 color: ink,
-                fontFamily: "inherit",
+                fontFamily: doodleUiFontFamily,
                 fontSize: 15,
                 padding: "8px 12px",
                 ...style
@@ -462,7 +524,18 @@ var Textarea = forwardRef(
           width: "100%"
         },
         children: [
-          label ? /* @__PURE__ */ jsx("span", { style: { fontSize: 13, fontWeight: 600, color: ink }, children: label }) : null,
+          label ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: {
+                fontSize: 13,
+                fontWeight: doodleUiFontWeight(600),
+                fontFamily: doodleUiFontFamily,
+                color: ink
+              },
+              children: label
+            }
+          ) : null,
           /* @__PURE__ */ jsxs("span", { style: { position: "relative", display: "block" }, children: [
             /* @__PURE__ */ jsx(
               RoughSvg,
@@ -500,7 +573,7 @@ var Textarea = forwardRef(
                   outline: "none",
                   background: "transparent",
                   color: ink,
-                  fontFamily: "inherit",
+                  fontFamily: doodleUiFontFamily,
                   fontSize: 15,
                   lineHeight: 1.5,
                   padding: "10px 12px",
@@ -610,7 +683,14 @@ var Checkbox = forwardRef(
               ]
             }
           ),
-          label ? /* @__PURE__ */ jsx("label", { htmlFor: inputId, style: { fontSize: 15, cursor: "pointer" }, children: label }) : null
+          label ? /* @__PURE__ */ jsx(
+            "label",
+            {
+              htmlFor: inputId,
+              style: { fontSize: 15, cursor: "pointer", fontFamily: doodleUiFontFamily },
+              children: label
+            }
+          ) : null
         ]
       }
     );
@@ -723,7 +803,14 @@ var Radio = forwardRef(function Radio2({
             ]
           }
         ),
-        label ? /* @__PURE__ */ jsx("label", { htmlFor: inputId, style: { fontSize: 15, cursor: "pointer" }, children: label }) : null
+        label ? /* @__PURE__ */ jsx(
+          "label",
+          {
+            htmlFor: inputId,
+            style: { fontSize: 15, cursor: "pointer", fontFamily: doodleUiFontFamily },
+            children: label
+          }
+        ) : null
       ]
     }
   );
@@ -768,7 +855,7 @@ var Card = forwardRef(function Card2({
           "div",
           {
             style: {
-              fontWeight: 700,
+              fontWeight: doodleUiFontWeight(700),
               fontSize: 16,
               marginBottom: 10
             },
@@ -808,7 +895,7 @@ var Badge = forwardRef(function Badge2({
       contentStyle: {
         padding: "2px 10px",
         fontSize: 12,
-        fontWeight: 650,
+        fontWeight: doodleUiFontWeight(650),
         lineHeight: 1.4,
         letterSpacing: "0.01em"
       },
@@ -869,7 +956,17 @@ var Alert = forwardRef(function Alert2({
       strokeWidth,
       ...rest,
       children: [
-        title ? /* @__PURE__ */ jsx("div", { style: { fontWeight: 700, marginBottom: 4, fontSize: 15 }, children: title }) : null,
+        title ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              fontWeight: doodleUiFontWeight(700),
+              marginBottom: 4,
+              fontSize: 15
+            },
+            children: title
+          }
+        ) : null,
         /* @__PURE__ */ jsx("div", { style: { fontSize: 14, lineHeight: 1.5, color: SKETCH_COLORS.ink }, children })
       ]
     }
@@ -949,7 +1046,8 @@ function Modal({
                           style: {
                             margin: 0,
                             fontSize: 18,
-                            fontWeight: 700,
+                            fontWeight: doodleUiFontWeight(700),
+                            fontFamily: doodleUiFontFamily,
                             color: ink
                           },
                           children: title
@@ -1158,6 +1256,7 @@ function Tooltip({
               padding: "6px 10px",
               fontSize: 13,
               lineHeight: 1.35,
+              fontFamily: doodleUiFontFamily,
               color: ink,
               maxWidth: 240
             },
@@ -1168,7 +1267,1950 @@ function Tooltip({
     ) })
   ] });
 }
+var CHEVRON_PATH = "M 4 6 L 10 12 L 16 6";
+var UNDERLINE_INSET = 4;
+var SelectSketchContext = createContext(
+  null
+);
+function useSelectSketch() {
+  const ctx = useContext(SelectSketchContext);
+  if (!ctx) {
+    throw new Error("Select parts must be used inside <Select>.");
+  }
+  return ctx;
+}
+function Select({
+  options,
+  placeholder = "Select\u2026",
+  className,
+  style,
+  roughness,
+  seed,
+  sketchColor,
+  bowing,
+  fillStyle,
+  strokeWidth,
+  value,
+  defaultValue,
+  onValueChange,
+  "aria-label": ariaLabel,
+  ...rest
+}) {
+  const [uncontrolled, setUncontrolled] = useState(defaultValue);
+  const selectedValue = value ?? uncontrolled;
+  const selectedLabel = options.find((option) => option.value === selectedValue)?.label;
+  const resolvedSeed = useResolvedSeed(seed);
+  const ink = sketchColor ?? SKETCH_COLORS.ink;
+  return /* @__PURE__ */ jsx(
+    SelectSketchContext.Provider,
+    {
+      value: {
+        roughness,
+        seed: resolvedSeed,
+        sketchColor,
+        bowing,
+        fillStyle,
+        strokeWidth,
+        resolvedSeed,
+        ink,
+        selectedValue,
+        selectedLabel,
+        placeholder
+      },
+      children: /* @__PURE__ */ jsxs(
+        SelectPrimitive.Root,
+        {
+          value,
+          defaultValue,
+          onValueChange: (next) => {
+            setUncontrolled(next);
+            onValueChange?.(next);
+          },
+          ...rest,
+          children: [
+            /* @__PURE__ */ jsx(
+              SelectTrigger,
+              {
+                className,
+                style,
+                placeholder,
+                "aria-label": ariaLabel
+              }
+            ),
+            /* @__PURE__ */ jsx(SelectContent, { children: options.map((option) => /* @__PURE__ */ jsx(
+              SelectItem,
+              {
+                value: option.value,
+                disabled: option.disabled,
+                children: option.label
+              },
+              option.value
+            )) })
+          ]
+        }
+      )
+    }
+  );
+}
+var SelectTrigger = forwardRef(
+  function SelectTrigger2({ className, style, placeholder, children, ...rest }, ref) {
+    const sketch = useSelectSketch();
+    const [openish, setOpenish] = useState(false);
+    return /* @__PURE__ */ jsxs(
+      SelectPrimitive.Trigger,
+      {
+        ref,
+        className: cn(className),
+        onPointerDown: () => setOpenish(true),
+        onBlur: () => setOpenish(false),
+        style: {
+          position: "relative",
+          display: "inline-flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          gap: 12,
+          minWidth: 180,
+          minHeight: 38,
+          padding: "8px 12px",
+          border: "none",
+          background: "transparent",
+          cursor: "pointer",
+          color: sketch.ink,
+          fontFamily: doodleUiFontFamily,
+          fontSize: 15,
+          lineHeight: 1.2,
+          outline: "none",
+          textAlign: "left",
+          ...style
+        },
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx(
+            RoughSvg,
+            {
+              shape: "rectangle",
+              roughness: sketch.roughness,
+              seed: sketch.resolvedSeed,
+              sketchColor: openish ? SKETCH_COLORS.accent : sketch.ink,
+              bowing: sketch.bowing,
+              fillStyle: sketch.fillStyle,
+              strokeWidth: openish ? (sketch.strokeWidth ?? 1.75) + 0.35 : sketch.strokeWidth
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: {
+                position: "relative",
+                zIndex: 1,
+                flex: 1,
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap"
+              },
+              children: children ?? sketch.selectedLabel ?? placeholder
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            SelectPrimitive.Icon,
+            {
+              style: {
+                position: "relative",
+                zIndex: 1,
+                width: 18,
+                height: 18,
+                flexShrink: 0
+              },
+              children: /* @__PURE__ */ jsx(
+                RoughSvg,
+                {
+                  shape: "path",
+                  path: CHEVRON_PATH,
+                  roughness: (sketch.roughness ?? 1.5) * 0.7,
+                  seed: sketch.resolvedSeed,
+                  sketchColor: sketch.ink,
+                  bowing: sketch.bowing,
+                  strokeWidth: (sketch.strokeWidth ?? 1.6) + 0.2,
+                  inset: 0
+                }
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+var SelectContent = forwardRef(
+  function SelectContent2({ className, style, children, ...rest }, ref) {
+    const sketch = useSelectSketch();
+    return /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+      SelectPrimitive.Content,
+      {
+        ref,
+        position: "popper",
+        sideOffset: 6,
+        className: cn(className),
+        style: {
+          zIndex: 80,
+          outline: "none",
+          minWidth: "var(--radix-select-trigger-width)",
+          ...style
+        },
+        ...rest,
+        children: /* @__PURE__ */ jsx(
+          SketchBox,
+          {
+            roughness: sketch.roughness,
+            seed: sketch.resolvedSeed,
+            sketchColor: sketch.ink,
+            bowing: sketch.bowing,
+            fillStyle: sketch.fillStyle ?? "solid",
+            fill: "#f7f6f2",
+            strokeWidth: sketch.strokeWidth ?? 1.5,
+            contentStyle: { padding: "6px 4px" },
+            children: /* @__PURE__ */ jsx(SelectPrimitive.Viewport, { children })
+          }
+        )
+      }
+    ) });
+  }
+);
+var SelectItem = forwardRef(
+  function SelectItem2({ className, style, children, value, ...rest }, ref) {
+    const sketch = useSelectSketch();
+    const [highlighted, setHighlighted] = useState(false);
+    const selected = sketch.selectedValue === value;
+    const mark = highlighted || selected;
+    return /* @__PURE__ */ jsxs(
+      SelectPrimitive.Item,
+      {
+        ref,
+        value,
+        className: cn(className),
+        onPointerMove: () => setHighlighted(true),
+        onPointerLeave: () => setHighlighted(false),
+        onFocus: () => setHighlighted(true),
+        onBlur: () => setHighlighted(false),
+        style: {
+          position: "relative",
+          display: "flex",
+          alignItems: "center",
+          padding: "7px 12px",
+          fontFamily: doodleUiFontFamily,
+          fontSize: 14,
+          color: sketch.ink,
+          outline: "none",
+          cursor: "pointer",
+          userSelect: "none",
+          fontWeight: selected ? doodleUiFontWeight(650) : doodleUiFontWeight(400),
+          ...style
+        },
+        ...rest,
+        children: [
+          mark ? /* @__PURE__ */ jsx(
+            RoughSvg,
+            {
+              shape: "line",
+              roughness: (sketch.roughness ?? 1.5) + 0.4,
+              seed: sketch.resolvedSeed,
+              sketchColor: selected ? SKETCH_COLORS.accent : sketch.ink,
+              bowing: sketch.bowing ?? 1.6,
+              strokeWidth: selected ? 1.8 : 1.3,
+              inset: UNDERLINE_INSET,
+              style: { opacity: selected ? 0.9 : 0.45 }
+            }
+          ) : null,
+          /* @__PURE__ */ jsx(
+            SelectPrimitive.ItemText,
+            {
+              style: { position: "relative", zIndex: 1 },
+              children
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+var SelectRoot = SelectPrimitive.Root;
+var SelectValue = SelectPrimitive.Value;
+var SelectGroup = SelectPrimitive.Group;
+var SelectLabel = SelectPrimitive.Label;
+var SelectSeparator = SelectPrimitive.Separator;
+var TRACK_W = 44;
+var TRACK_H = 24;
+var THUMB = 18;
+var THUMB_OFF = 3;
+var THUMB_ON = TRACK_W - THUMB - 3;
+var Switch = forwardRef(
+  function Switch2({
+    className,
+    style,
+    label,
+    roughness,
+    seed,
+    sketchColor,
+    bowing,
+    fillStyle,
+    strokeWidth,
+    checked,
+    defaultChecked,
+    onCheckedChange,
+    id,
+    ...rest
+  }, ref) {
+    const [uncontrolled, setUncontrolled] = useState(defaultChecked === true);
+    const isOn = checked ?? uncontrolled;
+    const ink = sketchColor ?? SKETCH_COLORS.ink;
+    const resolvedSeed = useResolvedSeed(seed);
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: cn(className),
+        style: {
+          display: "inline-flex",
+          alignItems: "center",
+          gap: 8,
+          cursor: "pointer",
+          userSelect: "none",
+          ...style
+        },
+        children: [
+          /* @__PURE__ */ jsxs(
+            SwitchPrimitive.Root,
+            {
+              ref,
+              id,
+              checked,
+              defaultChecked,
+              onCheckedChange: (next) => {
+                setUncontrolled(next);
+                onCheckedChange?.(next);
+              },
+              style: {
+                position: "relative",
+                width: TRACK_W,
+                height: TRACK_H,
+                padding: 0,
+                border: "none",
+                background: "transparent",
+                flexShrink: 0,
+                cursor: "pointer",
+                outline: "none"
+              },
+              ...rest,
+              children: [
+                /* @__PURE__ */ jsx(
+                  RoughSvg,
+                  {
+                    shape: "rectangle",
+                    roughness,
+                    seed: resolvedSeed,
+                    sketchColor: isOn ? SKETCH_COLORS.accent : ink,
+                    bowing: bowing ?? 1.4,
+                    fillStyle: fillStyle ?? (isOn ? "hachure" : void 0),
+                    fill: isOn ? SKETCH_COLORS.accentFill : void 0,
+                    strokeWidth: strokeWidth ?? 1.6,
+                    inset: 1.5
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  SwitchPrimitive.Thumb,
+                  {
+                    style: {
+                      position: "absolute",
+                      top: (TRACK_H - THUMB) / 2,
+                      left: 0,
+                      width: THUMB,
+                      height: THUMB,
+                      display: "block",
+                      transform: `translateX(${isOn ? THUMB_ON : THUMB_OFF}px)`,
+                      transition: "transform 160ms ease",
+                      zIndex: 1
+                    },
+                    children: /* @__PURE__ */ jsx(
+                      RoughSvg,
+                      {
+                        shape: "ellipse",
+                        roughness: (roughness ?? 1.5) * 0.85,
+                        seed: deriveSeed(resolvedSeed, "thumb"),
+                        sketchColor: isOn ? SKETCH_COLORS.accent : ink,
+                        fill: "#f7f6f2",
+                        fillStyle: "solid",
+                        bowing,
+                        strokeWidth: (strokeWidth ?? 1.5) + 0.2,
+                        inset: 1
+                      }
+                    )
+                  }
+                )
+              ]
+            }
+          ),
+          label ? /* @__PURE__ */ jsx(
+            "label",
+            {
+              htmlFor: id,
+              style: {
+                fontSize: 15,
+                cursor: "pointer",
+                fontFamily: doodleUiFontFamily
+              },
+              children: label
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+var TabsSketchContext = createContext(null);
+function useTabsSketch() {
+  const ctx = useContext(TabsSketchContext);
+  if (!ctx) {
+    throw new Error("Tab parts must be used inside <Tabs>.");
+  }
+  return ctx;
+}
+var Tabs = forwardRef(function Tabs2({
+  className,
+  style,
+  children,
+  value,
+  defaultValue,
+  onValueChange,
+  roughness,
+  seed,
+  sketchColor,
+  bowing,
+  fillStyle,
+  strokeWidth,
+  ...rest
+}, ref) {
+  const [uncontrolled, setUncontrolled] = useState(defaultValue);
+  const current = value ?? uncontrolled;
+  const resolvedSeed = useResolvedSeed(seed);
+  const ink = sketchColor ?? SKETCH_COLORS.ink;
+  return /* @__PURE__ */ jsx(
+    TabsSketchContext.Provider,
+    {
+      value: {
+        roughness,
+        seed: resolvedSeed,
+        sketchColor,
+        bowing,
+        fillStyle,
+        strokeWidth,
+        resolvedSeed,
+        ink,
+        current
+      },
+      children: /* @__PURE__ */ jsx(
+        TabsPrimitive.Root,
+        {
+          ref,
+          className: cn(className),
+          style,
+          value: current,
+          defaultValue,
+          onValueChange: (next) => {
+            setUncontrolled(next);
+            onValueChange?.(next);
+          },
+          ...rest,
+          children
+        }
+      )
+    }
+  );
+});
+var TabList = forwardRef(
+  function TabList2({ className, style, children, ...rest }, ref) {
+    return /* @__PURE__ */ jsx(
+      TabsPrimitive.List,
+      {
+        ref,
+        className: cn(className),
+        style: {
+          display: "flex",
+          flexWrap: "wrap",
+          gap: 4,
+          ...style
+        },
+        ...rest,
+        children
+      }
+    );
+  }
+);
+var Tab = forwardRef(function Tab2({ className, style, children, value, ...rest }, ref) {
+  const sketch = useTabsSketch();
+  const active = sketch.current === value;
+  return /* @__PURE__ */ jsxs(
+    TabsPrimitive.Trigger,
+    {
+      ref,
+      value,
+      className: cn(className),
+      style: {
+        position: "relative",
+        border: "none",
+        background: "transparent",
+        cursor: "pointer",
+        padding: "8px 14px 12px",
+        fontFamily: doodleUiFontFamily,
+        fontSize: 15,
+        fontWeight: active ? doodleUiFontWeight(650) : doodleUiFontWeight(400),
+        color: sketch.ink,
+        outline: "none",
+        ...style
+      },
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx("span", { style: { position: "relative", zIndex: 1 }, children }),
+        active ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: {
+              position: "absolute",
+              left: 8,
+              right: 8,
+              bottom: 2,
+              height: 10,
+              pointerEvents: "none"
+            },
+            children: /* @__PURE__ */ jsx(
+              RoughSvg,
+              {
+                shape: "line",
+                roughness: (sketch.roughness ?? 1.5) + 0.35,
+                seed: deriveSeed(sketch.resolvedSeed, value),
+                sketchColor: SKETCH_COLORS.accent,
+                bowing: sketch.bowing ?? 1.8,
+                strokeWidth: (sketch.strokeWidth ?? 1.75) + 0.4,
+                inset: 2
+              }
+            )
+          }
+        ) : null
+      ]
+    }
+  );
+});
+var TabPanel = forwardRef(
+  function TabPanel2({ className, style, children, ...rest }, ref) {
+    const sketch = useTabsSketch();
+    return /* @__PURE__ */ jsx(
+      TabsPrimitive.Content,
+      {
+        ref,
+        className: cn(className),
+        style: {
+          paddingTop: 14,
+          fontFamily: doodleUiFontFamily,
+          color: sketch.ink,
+          fontSize: 15,
+          lineHeight: 1.5,
+          outline: "none",
+          ...style
+        },
+        ...rest,
+        children
+      }
+    );
+  }
+);
+var TableSketchContext = createContext(null);
+function useTableSketch() {
+  const ctx = useContext(TableSketchContext);
+  if (!ctx) {
+    throw new Error("Table parts must be used inside <Table>.");
+  }
+  return ctx;
+}
+var Table = forwardRef(function Table2({
+  className,
+  style,
+  children,
+  headerUnderline = true,
+  roughness,
+  seed,
+  sketchColor,
+  bowing,
+  fillStyle,
+  strokeWidth,
+  ...rest
+}, ref) {
+  const wrapperRef = useRef(null);
+  const tableRef = useRef(null);
+  const [lines, setLines] = useState([]);
+  const resolvedSeed = useResolvedSeed(seed);
+  const ink = sketchColor ?? SKETCH_COLORS.ink;
+  useLayoutEffect(() => {
+    const wrapper = wrapperRef.current;
+    const table = tableRef.current;
+    if (!wrapper || !table) return;
+    const measure = () => {
+      const rows = Array.from(table.querySelectorAll("tr"));
+      const next = [];
+      rows.forEach((row, index) => {
+        const isLast = index === rows.length - 1;
+        const isHeader = row.parentElement?.tagName === "THEAD";
+        if (isLast && !isHeader) return;
+        next.push({
+          y: row.offsetTop + row.offsetHeight,
+          width: table.offsetWidth,
+          key: isHeader ? `header-${index}` : `row-${index}`,
+          header: Boolean(isHeader)
+        });
+      });
+      setLines(next);
+    };
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(table);
+    observer.observe(wrapper);
+    return () => observer.disconnect();
+  }, [children]);
+  return /* @__PURE__ */ jsx(
+    TableSketchContext.Provider,
+    {
+      value: {
+        roughness,
+        seed: resolvedSeed,
+        sketchColor,
+        bowing,
+        fillStyle,
+        strokeWidth,
+        resolvedSeed,
+        ink
+      },
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: wrapperRef,
+          className: cn(className),
+          style: { position: "relative", width: "100%", ...style },
+          children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                "aria-hidden": "true",
+                style: {
+                  position: "absolute",
+                  inset: 0,
+                  pointerEvents: "none",
+                  zIndex: 1,
+                  overflow: "visible"
+                },
+                children: lines.map((line) => {
+                  if (line.header && !headerUnderline) return null;
+                  return /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      style: {
+                        position: "absolute",
+                        left: 0,
+                        width: line.width,
+                        top: line.y - 6,
+                        height: 12
+                      },
+                      children: /* @__PURE__ */ jsx(
+                        RoughSvg,
+                        {
+                          shape: "line",
+                          roughness: line.header ? (roughness ?? 1.5) + 0.2 : roughness ?? 1.7,
+                          seed: deriveSeed(resolvedSeed, line.key),
+                          sketchColor: ink,
+                          bowing: bowing ?? (line.header ? 1.4 : 2),
+                          strokeWidth: line.header ? (strokeWidth ?? 1.75) + 0.35 : strokeWidth ?? 1.35,
+                          inset: 6
+                        }
+                      )
+                    },
+                    line.key
+                  );
+                })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "table",
+              {
+                ref: (node) => {
+                  tableRef.current = node;
+                  if (typeof ref === "function") ref(node);
+                  else if (ref) ref.current = node;
+                },
+                style: {
+                  width: "100%",
+                  borderCollapse: "collapse",
+                  position: "relative",
+                  zIndex: 0,
+                  fontFamily: doodleUiFontFamily,
+                  color: ink
+                },
+                ...rest,
+                children
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+});
+var TableHead = forwardRef(function TableHead2({ className, style, ...rest }, ref) {
+  return /* @__PURE__ */ jsx(
+    "thead",
+    {
+      ref,
+      className: cn(className),
+      style,
+      ...rest
+    }
+  );
+});
+var TableBody = forwardRef(function TableBody2({ className, style, ...rest }, ref) {
+  return /* @__PURE__ */ jsx(
+    "tbody",
+    {
+      ref,
+      className: cn(className),
+      style,
+      ...rest
+    }
+  );
+});
+var TableRow = forwardRef(function TableRow2({ className, style, ...rest }, ref) {
+  return /* @__PURE__ */ jsx(
+    "tr",
+    {
+      ref,
+      className: cn(className),
+      style,
+      ...rest
+    }
+  );
+});
+var TableHeaderCell = forwardRef(function TableHeaderCell2({ className, style, children, ...rest }, ref) {
+  useTableSketch();
+  return /* @__PURE__ */ jsx(
+    "th",
+    {
+      ref,
+      className: cn(className),
+      style: {
+        textAlign: "left",
+        fontWeight: doodleUiFontWeight(650),
+        fontSize: 13,
+        padding: "10px 12px",
+        ...style
+      },
+      ...rest,
+      children
+    }
+  );
+});
+var TableCell = forwardRef(
+  function TableCell2({ className, style, children, ...rest }, ref) {
+    useTableSketch();
+    return /* @__PURE__ */ jsx(
+      "td",
+      {
+        ref,
+        className: cn(className),
+        style: {
+          fontSize: 14,
+          padding: "10px 12px",
+          ...style
+        },
+        ...rest,
+        children
+      }
+    );
+  }
+);
+var VARIANT_COLOR2 = {
+  info: SKETCH_COLORS.info,
+  warning: SKETCH_COLORS.warning,
+  error: SKETCH_COLORS.error,
+  success: SKETCH_COLORS.success
+};
+var VARIANT_FILL2 = {
+  info: "#d2deec",
+  warning: "#f3e2c0",
+  error: "#f3d0cc",
+  success: "#d3e8dc"
+};
+var POSITION_STYLE = {
+  "top-left": { top: 16, left: 16 },
+  "top-right": { top: 16, right: 16 },
+  "bottom-left": { bottom: 16, left: 16 },
+  "bottom-right": { bottom: 16, right: 16 }
+};
+var ToastPositionContext = createContext("bottom-right");
+function ToastProvider({
+  children,
+  position = "bottom-right",
+  duration = 4e3,
+  swipeDirection = "right",
+  label
+}) {
+  return /* @__PURE__ */ jsx(ToastPositionContext.Provider, { value: position, children: /* @__PURE__ */ jsxs(
+    ToastPrimitive.Provider,
+    {
+      duration,
+      swipeDirection,
+      label,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(
+          ToastPrimitive.Viewport,
+          {
+            style: {
+              position: "fixed",
+              zIndex: 90,
+              display: "flex",
+              flexDirection: "column",
+              gap: 10,
+              width: "min(360px, calc(100vw - 32px))",
+              margin: 0,
+              padding: 0,
+              listStyle: "none",
+              outline: "none",
+              ...POSITION_STYLE[position]
+            }
+          }
+        )
+      ]
+    }
+  ) });
+}
+function Toast({
+  open,
+  defaultOpen,
+  onOpenChange,
+  title,
+  children,
+  variant = "info",
+  duration,
+  className,
+  style,
+  roughness,
+  seed,
+  sketchColor,
+  bowing,
+  fillStyle,
+  strokeWidth
+}) {
+  const position = useContext(ToastPositionContext);
+  const fromTop = position.startsWith("top");
+  const [entered, setEntered] = useState(false);
+  const color = sketchColor ?? VARIANT_COLOR2[variant];
+  const visible = open ?? true;
+  useLayoutEffect(() => {
+    if (!visible) {
+      setEntered(false);
+      return;
+    }
+    setEntered(false);
+    const frame = requestAnimationFrame(() => {
+      requestAnimationFrame(() => setEntered(true));
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [visible]);
+  return /* @__PURE__ */ jsx(
+    ToastPrimitive.Root,
+    {
+      open,
+      defaultOpen,
+      onOpenChange,
+      duration,
+      className: cn(className),
+      style: {
+        transform: entered ? "translateY(0)" : `translateY(${fromTop ? "-10px" : "10px"})`,
+        opacity: entered ? 1 : 0,
+        transition: "transform 200ms ease, opacity 200ms ease",
+        outline: "none",
+        ...style
+      },
+      children: /* @__PURE__ */ jsxs(
+        SketchBox,
+        {
+          roughness,
+          seed,
+          sketchColor: color,
+          bowing,
+          fillStyle: fillStyle ?? "hachure",
+          fill: VARIANT_FILL2[variant],
+          strokeWidth: strokeWidth ?? 1.7,
+          shadow: true,
+          contentStyle: { padding: "12px 16px" },
+          children: [
+            title ? /* @__PURE__ */ jsx(
+              ToastPrimitive.Title,
+              {
+                style: {
+                  margin: 0,
+                  fontWeight: doodleUiFontWeight(700),
+                  fontSize: 15,
+                  fontFamily: doodleUiFontFamily,
+                  color,
+                  marginBottom: children ? 4 : 0
+                },
+                children: title
+              }
+            ) : null,
+            children ? /* @__PURE__ */ jsx(
+              ToastPrimitive.Description,
+              {
+                style: {
+                  margin: 0,
+                  fontSize: 14,
+                  lineHeight: 1.5,
+                  fontFamily: doodleUiFontFamily,
+                  color: SKETCH_COLORS.ink
+                },
+                children
+              }
+            ) : null
+          ]
+        }
+      )
+    }
+  );
+}
+var ToastRoot = ToastPrimitive.Root;
+var ToastTitle = ToastPrimitive.Title;
+var ToastDescription = ToastPrimitive.Description;
+var ToastClose = ToastPrimitive.Close;
+var ToastAction = ToastPrimitive.Action;
+var ToastViewport = ToastPrimitive.Viewport;
+var CHEVRON_PATH2 = "M 6 4 L 12 10 L 6 16";
+var AccordionSketchContext = createContext(null);
+function useAccordionSketch() {
+  const ctx = useContext(AccordionSketchContext);
+  if (!ctx) {
+    throw new Error("Accordion parts must be used inside <Accordion>.");
+  }
+  return ctx;
+}
+var AccordionItemContext = createContext("");
+var Accordion = forwardRef(
+  function Accordion2({
+    className,
+    style,
+    children,
+    type = "single",
+    collapsible = true,
+    value,
+    defaultValue,
+    onValueChange,
+    disabled,
+    roughness,
+    seed,
+    sketchColor,
+    bowing,
+    fillStyle,
+    strokeWidth
+  }, ref) {
+    const resolvedSeed = useResolvedSeed(seed);
+    const ink = sketchColor ?? SKETCH_COLORS.ink;
+    const [uncontrolled, setUncontrolled] = useState(defaultValue ?? (type === "multiple" ? [] : void 0));
+    const openValue = value ?? uncontrolled;
+    const sketchValue = {
+      roughness,
+      seed: resolvedSeed,
+      sketchColor,
+      bowing,
+      fillStyle,
+      strokeWidth,
+      resolvedSeed,
+      ink,
+      openValue
+    };
+    function handleChange(next) {
+      setUncontrolled(next);
+      onValueChange?.(next);
+    }
+    const root = type === "multiple" ? /* @__PURE__ */ jsx(
+      AccordionPrimitive.Root,
+      {
+        ref,
+        type: "multiple",
+        disabled,
+        className: cn(className),
+        style,
+        value: openValue,
+        defaultValue,
+        onValueChange: handleChange,
+        children
+      }
+    ) : /* @__PURE__ */ jsx(
+      AccordionPrimitive.Root,
+      {
+        ref,
+        type: "single",
+        collapsible,
+        disabled,
+        className: cn(className),
+        style,
+        value: openValue,
+        defaultValue,
+        onValueChange: handleChange,
+        children
+      }
+    );
+    return /* @__PURE__ */ jsx(AccordionSketchContext.Provider, { value: sketchValue, children: root });
+  }
+);
+var AccordionItem = forwardRef(
+  function AccordionItem2({ className, style, children, value, ...rest }, ref) {
+    const sketch = useAccordionSketch();
+    return /* @__PURE__ */ jsx(AccordionItemContext.Provider, { value, children: /* @__PURE__ */ jsxs(
+      AccordionPrimitive.Item,
+      {
+        ref,
+        value,
+        className: cn(className),
+        style: { position: "relative", ...style },
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                left: 0,
+                right: 0,
+                top: -6,
+                height: 12,
+                pointerEvents: "none"
+              },
+              children: /* @__PURE__ */ jsx(
+                RoughSvg,
+                {
+                  shape: "line",
+                  roughness: (sketch.roughness ?? 1.5) + 0.25,
+                  seed: deriveSeed(sketch.resolvedSeed, `div-${value}`),
+                  sketchColor: sketch.ink,
+                  bowing: sketch.bowing ?? 1.8,
+                  strokeWidth: sketch.strokeWidth ?? 1.4,
+                  inset: 2
+                }
+              )
+            }
+          ),
+          children
+        ]
+      }
+    ) });
+  }
+);
+var AccordionTrigger = forwardRef(function AccordionTrigger2({ className, style, children, ...rest }, ref) {
+  const sketch = useAccordionSketch();
+  const itemValue = useContext(AccordionItemContext);
+  const open = Array.isArray(sketch.openValue) ? sketch.openValue.includes(itemValue) : sketch.openValue === itemValue;
+  return /* @__PURE__ */ jsx(AccordionPrimitive.Header, { asChild: true, children: /* @__PURE__ */ jsx("h3", { style: { margin: 0 }, children: /* @__PURE__ */ jsxs(
+    AccordionPrimitive.Trigger,
+    {
+      ref,
+      className: cn(className),
+      style: {
+        display: "flex",
+        width: "100%",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: 12,
+        padding: "12px 4px",
+        border: "none",
+        background: "transparent",
+        cursor: "pointer",
+        fontFamily: doodleUiFontFamily,
+        fontSize: 15,
+        fontWeight: doodleUiFontWeight(600),
+        color: sketch.ink,
+        textAlign: "left",
+        outline: "none",
+        ...style
+      },
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx("span", { children }),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: {
+              position: "relative",
+              width: 18,
+              height: 18,
+              flexShrink: 0,
+              transform: open ? "rotate(90deg)" : "rotate(0deg)",
+              transition: "transform 180ms ease"
+            },
+            children: /* @__PURE__ */ jsx(
+              RoughSvg,
+              {
+                shape: "path",
+                path: CHEVRON_PATH2,
+                roughness: (sketch.roughness ?? 1.5) * 0.7,
+                seed: deriveSeed(sketch.resolvedSeed, `chevron-${itemValue}`),
+                sketchColor: sketch.ink,
+                bowing: sketch.bowing,
+                strokeWidth: (sketch.strokeWidth ?? 1.6) + 0.2,
+                inset: 0
+              }
+            )
+          }
+        )
+      ]
+    }
+  ) }) });
+});
+var AccordionContent = forwardRef(function AccordionContent2({ className, style, children, ...rest }, ref) {
+  const sketch = useAccordionSketch();
+  return /* @__PURE__ */ jsx(
+    AccordionPrimitive.Content,
+    {
+      ref,
+      className: cn(className),
+      style: {
+        padding: "0 4px 14px",
+        fontFamily: doodleUiFontFamily,
+        fontSize: 14,
+        lineHeight: 1.5,
+        color: sketch.ink,
+        ...style
+      },
+      ...rest,
+      children
+    }
+  );
+});
+var STATUS_COLOR = {
+  online: SKETCH_COLORS.success,
+  offline: "#8a8680",
+  busy: SKETCH_COLORS.accent
+};
+var Avatar = forwardRef(
+  function Avatar2({
+    className,
+    style,
+    src,
+    alt,
+    fallback,
+    size = 40,
+    shape = "circle",
+    status,
+    roughness,
+    seed,
+    sketchColor,
+    bowing,
+    fillStyle,
+    strokeWidth,
+    ...rest
+  }, ref) {
+    const ink = sketchColor ?? SKETCH_COLORS.ink;
+    const resolvedSeed = useResolvedSeed(seed);
+    const roughShape = shape === "circle" ? "ellipse" : "rectangle";
+    const badge = 12;
+    const rootStyle = {
+      position: "relative",
+      display: "inline-flex",
+      width: size,
+      height: size,
+      flexShrink: 0,
+      verticalAlign: "middle",
+      ...style
+    };
+    return /* @__PURE__ */ jsxs(
+      AvatarPrimitive.Root,
+      {
+        ref,
+        className: cn(className),
+        style: rootStyle,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx(
+            RoughSvg,
+            {
+              shape: roughShape,
+              roughness,
+              seed: resolvedSeed,
+              sketchColor: ink,
+              bowing,
+              fillStyle: fillStyle ?? "solid",
+              fill: "#f7f6f2",
+              strokeWidth: strokeWidth ?? 1.6,
+              inset: 1.5
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "span",
+            {
+              style: {
+                position: "absolute",
+                inset: 4,
+                overflow: "hidden",
+                borderRadius: shape === "circle" ? "50%" : 4,
+                zIndex: 1,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center"
+              },
+              children: [
+                src ? /* @__PURE__ */ jsx(
+                  AvatarPrimitive.Image,
+                  {
+                    src,
+                    alt,
+                    style: {
+                      width: "100%",
+                      height: "100%",
+                      objectFit: "cover"
+                    }
+                  }
+                ) : null,
+                /* @__PURE__ */ jsx(
+                  AvatarPrimitive.Fallback,
+                  {
+                    delayMs: src ? 400 : 0,
+                    style: {
+                      width: "100%",
+                      height: "100%",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      fontFamily: doodleUiFontFamily,
+                      fontWeight: doodleUiFontWeight(650),
+                      fontSize: Math.max(12, size * 0.36),
+                      color: ink,
+                      background: SKETCH_COLORS.secondaryFill
+                    },
+                    children: fallback
+                  }
+                )
+              ]
+            }
+          ),
+          status ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: {
+                position: "absolute",
+                width: badge,
+                height: badge,
+                right: -1,
+                bottom: -1,
+                zIndex: 2
+              },
+              children: /* @__PURE__ */ jsx(
+                RoughSvg,
+                {
+                  shape: "ellipse",
+                  roughness: (roughness ?? 1.5) * 0.8,
+                  seed: deriveSeed(resolvedSeed, "status"),
+                  sketchColor: STATUS_COLOR[status],
+                  fill: STATUS_COLOR[status],
+                  fillStyle: "solid",
+                  bowing,
+                  strokeWidth: 1,
+                  inset: 0.5
+                }
+              )
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+var Slider = forwardRef(function Slider2({
+  className,
+  style,
+  roughness,
+  seed,
+  sketchColor,
+  bowing,
+  fillStyle,
+  strokeWidth,
+  thumbShape = "circle",
+  ...rest
+}, ref) {
+  const ink = sketchColor ?? SKETCH_COLORS.ink;
+  const resolvedSeed = useResolvedSeed(seed);
+  return /* @__PURE__ */ jsxs(
+    SliderPrimitive.Root,
+    {
+      ref,
+      className: cn(className),
+      style: {
+        position: "relative",
+        display: "flex",
+        alignItems: "center",
+        width: "100%",
+        height: 28,
+        userSelect: "none",
+        touchAction: "none",
+        ...style
+      },
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxs(
+          SliderPrimitive.Track,
+          {
+            style: {
+              position: "relative",
+              flex: 1,
+              height: 16
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                RoughSvg,
+                {
+                  shape: "line",
+                  roughness: roughness ?? 1.8,
+                  seed: resolvedSeed,
+                  sketchColor: ink,
+                  bowing: bowing ?? 2,
+                  strokeWidth: strokeWidth ?? 1.6,
+                  inset: 4
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                SliderPrimitive.Range,
+                {
+                  style: {
+                    position: "absolute",
+                    left: 0,
+                    height: "100%"
+                  },
+                  children: /* @__PURE__ */ jsx(
+                    RoughSvg,
+                    {
+                      shape: "line",
+                      roughness: (roughness ?? 1.5) + 0.4,
+                      seed: deriveSeed(resolvedSeed, "range"),
+                      sketchColor: SKETCH_COLORS.accent,
+                      bowing: bowing ?? 1.6,
+                      strokeWidth: (strokeWidth ?? 1.6) + 0.6,
+                      inset: 4
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          SliderPrimitive.Thumb,
+          {
+            style: {
+              display: "block",
+              width: 20,
+              height: 20,
+              position: "relative",
+              outline: "none",
+              cursor: "grab"
+            },
+            children: /* @__PURE__ */ jsx(
+              RoughSvg,
+              {
+                shape: thumbShape === "square" ? "rectangle" : "ellipse",
+                roughness: (roughness ?? 1.5) * 0.85,
+                seed: deriveSeed(resolvedSeed, "thumb"),
+                sketchColor: SKETCH_COLORS.accent,
+                fill: "#f7f6f2",
+                fillStyle: fillStyle ?? "solid",
+                bowing,
+                strokeWidth: (strokeWidth ?? 1.5) + 0.3,
+                inset: 1
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+});
+var PREV_PATH = "M 12 4 L 6 10 L 12 16";
+var NEXT_PATH = "M 6 4 L 12 10 L 6 16";
+function pageItems(page, count) {
+  if (count <= 7) {
+    return Array.from({ length: count }, (_, i) => i + 1);
+  }
+  const items = [1];
+  const start = Math.max(2, page - 1);
+  const end = Math.min(count - 1, page + 1);
+  if (start > 2) items.push("ellipsis");
+  for (let n = start; n <= end; n += 1) items.push(n);
+  if (end < count - 1) items.push("ellipsis");
+  items.push(count);
+  return items;
+}
+var Pagination = forwardRef(
+  function Pagination2({
+    className,
+    style,
+    page,
+    count,
+    onPageChange,
+    roughness,
+    seed,
+    sketchColor,
+    bowing,
+    strokeWidth,
+    ...rest
+  }, ref) {
+    const ink = sketchColor ?? SKETCH_COLORS.ink;
+    const resolvedSeed = useResolvedSeed(seed);
+    const items = pageItems(page, count);
+    return /* @__PURE__ */ jsxs(
+      "nav",
+      {
+        ref,
+        className: cn(className),
+        "aria-label": "Pagination",
+        style: {
+          display: "inline-flex",
+          alignItems: "center",
+          gap: 4,
+          ...style
+        },
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx(
+            PageButton,
+            {
+              "aria-label": "Previous page",
+              disabled: page <= 1,
+              onClick: () => onPageChange?.(Math.max(1, page - 1)),
+              roughness,
+              seed: deriveSeed(resolvedSeed, "prev"),
+              ink,
+              bowing,
+              strokeWidth,
+              children: /* @__PURE__ */ jsx("span", { style: { position: "relative", width: 16, height: 16, display: "block" }, children: /* @__PURE__ */ jsx(
+                RoughSvg,
+                {
+                  shape: "path",
+                  path: PREV_PATH,
+                  roughness: (roughness ?? 1.5) * 0.7,
+                  seed: deriveSeed(resolvedSeed, "prev-arrow"),
+                  sketchColor: ink,
+                  strokeWidth: (strokeWidth ?? 1.5) + 0.2,
+                  inset: 0
+                }
+              ) })
+            }
+          ),
+          items.map(
+            (item, index) => item === "ellipsis" ? /* @__PURE__ */ jsx(
+              "span",
+              {
+                style: {
+                  width: 28,
+                  textAlign: "center",
+                  fontFamily: doodleUiFontFamily,
+                  color: ink
+                },
+                children: "\u2026"
+              },
+              `e-${index}`
+            ) : /* @__PURE__ */ jsx(
+              PageButton,
+              {
+                "aria-label": `Page ${item}`,
+                "aria-current": item === page ? "page" : void 0,
+                active: item === page,
+                onClick: () => onPageChange?.(item),
+                roughness,
+                seed: deriveSeed(resolvedSeed, `page-${item}`),
+                ink,
+                bowing,
+                strokeWidth,
+                children: item
+              },
+              item
+            )
+          ),
+          /* @__PURE__ */ jsx(
+            PageButton,
+            {
+              "aria-label": "Next page",
+              disabled: page >= count,
+              onClick: () => onPageChange?.(Math.min(count, page + 1)),
+              roughness,
+              seed: deriveSeed(resolvedSeed, "next"),
+              ink,
+              bowing,
+              strokeWidth,
+              children: /* @__PURE__ */ jsx("span", { style: { position: "relative", width: 16, height: 16, display: "block" }, children: /* @__PURE__ */ jsx(
+                RoughSvg,
+                {
+                  shape: "path",
+                  path: NEXT_PATH,
+                  roughness: (roughness ?? 1.5) * 0.7,
+                  seed: deriveSeed(resolvedSeed, "next-arrow"),
+                  sketchColor: ink,
+                  strokeWidth: (strokeWidth ?? 1.5) + 0.2,
+                  inset: 0
+                }
+              ) })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+function PageButton({
+  children,
+  className,
+  style,
+  active,
+  disabled,
+  roughness,
+  seed,
+  ink,
+  bowing,
+  strokeWidth,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      disabled,
+      className: cn(className),
+      style: {
+        position: "relative",
+        width: 36,
+        height: 36,
+        padding: 0,
+        border: "none",
+        background: "transparent",
+        cursor: disabled ? "not-allowed" : "pointer",
+        color: ink,
+        fontFamily: doodleUiFontFamily,
+        fontWeight: active ? doodleUiFontWeight(700) : doodleUiFontWeight(400),
+        fontSize: 14,
+        outline: "none",
+        opacity: disabled ? 0.4 : 1,
+        ...style
+      },
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(
+          RoughSvg,
+          {
+            shape: "ellipse",
+            roughness,
+            seed,
+            sketchColor: active ? SKETCH_COLORS.accent : ink,
+            bowing,
+            fill: active ? SKETCH_COLORS.accentFill : void 0,
+            fillStyle: active ? "hachure" : void 0,
+            strokeWidth: active ? (strokeWidth ?? 1.6) + 0.3 : strokeWidth ?? 1.4,
+            inset: 1.5
+          }
+        ),
+        active ? /* @__PURE__ */ jsx(
+          RoughSvg,
+          {
+            shape: "ellipse",
+            roughness: (roughness ?? 1.5) + 0.45,
+            seed,
+            sketchColor: SKETCH_COLORS.accent,
+            bowing: bowing ?? 1.6,
+            strokeWidth: 1.1,
+            inset: -1.5,
+            style: { opacity: 0.7 }
+          }
+        ) : null,
+        /* @__PURE__ */ jsx("span", { style: { position: "relative", zIndex: 1 }, children })
+      ]
+    }
+  );
+}
+var SLASH_PATH = "M 10 3 L 6 15";
+var CHEVRON_PATH3 = "M 5 4 L 11 9 L 5 14";
+var BreadcrumbSketchContext = createContext(null);
+function useBreadcrumbSketch() {
+  const ctx = useContext(BreadcrumbSketchContext);
+  if (!ctx) {
+    throw new Error("BreadcrumbItem must be used inside <Breadcrumb>.");
+  }
+  return ctx;
+}
+var Breadcrumb = forwardRef(
+  function Breadcrumb2({
+    className,
+    style,
+    children,
+    separator = "slash",
+    roughness,
+    seed,
+    sketchColor,
+    bowing,
+    strokeWidth,
+    ...rest
+  }, ref) {
+    const ink = sketchColor ?? SKETCH_COLORS.ink;
+    const resolvedSeed = useResolvedSeed(seed);
+    const items = Children.toArray(children).filter(isValidElement);
+    return /* @__PURE__ */ jsx(
+      BreadcrumbSketchContext.Provider,
+      {
+        value: {
+          roughness,
+          seed: resolvedSeed,
+          sketchColor,
+          bowing,
+          strokeWidth,
+          resolvedSeed,
+          ink,
+          separator
+        },
+        children: /* @__PURE__ */ jsx(
+          "nav",
+          {
+            ref,
+            className: cn(className),
+            "aria-label": "Breadcrumb",
+            style,
+            ...rest,
+            children: /* @__PURE__ */ jsx(
+              "ol",
+              {
+                style: {
+                  display: "flex",
+                  flexWrap: "wrap",
+                  alignItems: "center",
+                  gap: 4,
+                  listStyle: "none",
+                  margin: 0,
+                  padding: 0,
+                  fontFamily: doodleUiFontFamily,
+                  color: ink,
+                  fontSize: 14
+                },
+                children: items.map((child, index) => /* @__PURE__ */ jsxs(
+                  "li",
+                  {
+                    style: { display: "inline-flex", alignItems: "center", gap: 4 },
+                    children: [
+                      cloneElement(child, {
+                        index
+                      }),
+                      index < items.length - 1 ? /* @__PURE__ */ jsx(
+                        SeparatorMark,
+                        {
+                          index,
+                          separator,
+                          resolvedSeed,
+                          roughness,
+                          ink,
+                          bowing,
+                          strokeWidth
+                        }
+                      ) : null
+                    ]
+                  },
+                  index
+                ))
+              }
+            )
+          }
+        )
+      }
+    );
+  }
+);
+function SeparatorMark({
+  index,
+  separator,
+  resolvedSeed,
+  roughness,
+  ink,
+  bowing,
+  strokeWidth
+}) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      style: { position: "relative", width: 16, height: 18, display: "inline-block" },
+      children: /* @__PURE__ */ jsx(
+        RoughSvg,
+        {
+          shape: "path",
+          path: separator === "chevron" ? CHEVRON_PATH3 : SLASH_PATH,
+          roughness: (roughness ?? 1.5) * 0.85,
+          seed: deriveSeed(resolvedSeed, `sep-${index}`),
+          sketchColor: ink,
+          bowing: bowing ?? 1.6,
+          strokeWidth: strokeWidth ?? 1.4,
+          inset: 0
+        }
+      )
+    }
+  );
+}
+var BreadcrumbItem = forwardRef(
+  function BreadcrumbItem2({ className, style, href, current, children, index: _index, ...rest }, ref) {
+    const sketch = useBreadcrumbSketch();
+    const contentStyle = {
+      color: current ? sketch.ink : sketch.ink,
+      opacity: current ? 1 : 0.75,
+      textDecoration: "none",
+      fontFamily: doodleUiFontFamily,
+      ...style
+    };
+    if (href && !current) {
+      return /* @__PURE__ */ jsx(
+        "a",
+        {
+          href,
+          className: cn(className),
+          style: contentStyle,
+          ...rest,
+          children
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        className: cn(className),
+        "aria-current": current ? "page" : void 0,
+        style: contentStyle,
+        ...rest,
+        children
+      }
+    );
+  }
+);
+var Skeleton = forwardRef(
+  function Skeleton2({
+    className,
+    style,
+    variant = "rect",
+    pulse = true,
+    width,
+    height,
+    roughness,
+    seed,
+    sketchColor,
+    bowing,
+    fillStyle,
+    strokeWidth,
+    ...rest
+  }, ref) {
+    const base = useResolvedSeed(seed);
+    const [tick, setTick] = useState(0);
+    const ink = sketchColor ?? SKETCH_COLORS.ink;
+    useEffect(() => {
+      if (!pulse) return;
+      const id = window.setInterval(() => {
+        setTick((current) => current + 1);
+      }, 900);
+      return () => window.clearInterval(id);
+    }, [pulse]);
+    const resolved = pulse ? deriveSeed(base, `pulse-${tick}`) : base;
+    const shape = variant === "circle" ? "ellipse" : "rectangle";
+    const defaultHeight = variant === "text" ? 14 : variant === "circle" ? 40 : 80;
+    const defaultWidth = variant === "circle" ? 40 : "100%";
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "aria-hidden": "true",
+        className: cn(className),
+        style: {
+          position: "relative",
+          width: width ?? defaultWidth,
+          height: height ?? defaultHeight,
+          maxWidth: "100%",
+          ...style
+        },
+        ...rest,
+        children: /* @__PURE__ */ jsx(
+          RoughSvg,
+          {
+            shape,
+            roughness: (roughness ?? 1.5) + 0.4,
+            seed: resolved,
+            sketchColor: ink,
+            fill: ink,
+            fillStyle: fillStyle ?? "hachure",
+            bowing: bowing ?? 1.6,
+            strokeWidth: strokeWidth ?? 1.1,
+            inset: 2,
+            style: { opacity: 0.28 }
+          }
+        )
+      }
+    );
+  }
+);
+function normalizeSteps(steps) {
+  return steps.map(
+    (step) => step !== null && typeof step === "object" && "label" in step ? step : { label: step }
+  );
+}
+var Stepper = forwardRef(
+  function Stepper2({
+    className,
+    style,
+    steps,
+    current = 0,
+    orientation = "horizontal",
+    roughness,
+    seed,
+    sketchColor,
+    bowing,
+    fillStyle,
+    strokeWidth,
+    ...rest
+  }, ref) {
+    const ink = sketchColor ?? SKETCH_COLORS.ink;
+    const resolvedSeed = useResolvedSeed(seed);
+    const items = normalizeSteps(steps);
+    const horizontal = orientation === "horizontal";
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "list",
+        className: cn(className),
+        style: {
+          display: "flex",
+          flexDirection: horizontal ? "row" : "column",
+          alignItems: horizontal ? "flex-start" : "stretch",
+          ...style
+        },
+        ...rest,
+        children: items.map((step, index) => {
+          const complete = index < current;
+          const active = index === current;
+          const markerColor = complete || active ? SKETCH_COLORS.accent : ink;
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              role: "listitem",
+              "aria-current": active ? "step" : void 0,
+              style: {
+                display: "flex",
+                flex: horizontal ? 1 : void 0,
+                flexDirection: horizontal ? "column" : "row",
+                alignItems: horizontal ? "center" : "flex-start",
+                minWidth: 0
+              },
+              children: [
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    style: {
+                      display: "flex",
+                      flexDirection: horizontal ? "row" : "column",
+                      alignItems: "center",
+                      width: horizontal ? "100%" : void 0
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxs(
+                        "span",
+                        {
+                          style: {
+                            position: "relative",
+                            width: 28,
+                            height: 28,
+                            flexShrink: 0,
+                            display: "inline-flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            fontFamily: doodleUiFontFamily,
+                            fontWeight: doodleUiFontWeight(700),
+                            fontSize: 13,
+                            color: markerColor
+                          },
+                          children: [
+                            /* @__PURE__ */ jsx(
+                              RoughSvg,
+                              {
+                                shape: "ellipse",
+                                roughness,
+                                seed: deriveSeed(resolvedSeed, `step-${index}`),
+                                sketchColor: markerColor,
+                                fill: complete ? SKETCH_COLORS.accentFill : active ? "#f7f6f2" : void 0,
+                                fillStyle: complete || active ? fillStyle ?? "hachure" : void 0,
+                                bowing,
+                                strokeWidth: active ? (strokeWidth ?? 1.6) + 0.4 : strokeWidth ?? 1.5,
+                                inset: 1.5
+                              }
+                            ),
+                            /* @__PURE__ */ jsx("span", { style: { position: "relative", zIndex: 1 }, children: complete ? "\u2713" : index + 1 })
+                          ]
+                        }
+                      ),
+                      index < items.length - 1 ? /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          style: {
+                            position: "relative",
+                            flex: 1,
+                            width: horizontal ? void 0 : 12,
+                            height: horizontal ? 12 : 28,
+                            minWidth: horizontal ? 16 : 12,
+                            alignSelf: "center"
+                          },
+                          children: /* @__PURE__ */ jsx(
+                            RoughSvg,
+                            {
+                              shape: horizontal ? "line" : "line-vertical",
+                              roughness: (roughness ?? 1.5) + 0.3,
+                              seed: deriveSeed(resolvedSeed, `connector-${index}`),
+                              sketchColor: complete ? SKETCH_COLORS.accent : ink,
+                              bowing: bowing ?? 2,
+                              strokeWidth: strokeWidth ?? 1.4,
+                              inset: 2
+                            }
+                          )
+                        }
+                      ) : null
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    style: {
+                      marginTop: horizontal ? 8 : 0,
+                      marginLeft: horizontal ? 0 : 10,
+                      paddingBottom: horizontal ? 0 : 8,
+                      textAlign: horizontal ? "center" : "left",
+                      fontFamily: doodleUiFontFamily,
+                      fontSize: 13,
+                      color: ink
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx("div", { style: { fontWeight: doodleUiFontWeight(600) }, children: step.label }),
+                      step.description ? /* @__PURE__ */ jsx("div", { style: { opacity: 0.7, fontSize: 12, marginTop: 2 }, children: step.description }) : null
+                    ]
+                  }
+                )
+              ]
+            },
+            index
+          );
+        })
+      }
+    );
+  }
+);
 
-export { Alert, Badge, Button, Card, Checkbox, DEFAULT_BOWING, DEFAULT_INK, DEFAULT_ROUGHNESS, DEFAULT_STROKE_WIDTH, Divider, Input, Modal, ModalClose, ModalDescription, ModalRoot, ModalTitle, ModalTrigger, Progress, Radio, RadioGroup, RoughSvg, SKETCH_COLORS, SketchBox, SketchSeedProvider, Textarea, Tooltip, TooltipProvider, toRoughOptions, useResolvedSeed, useSketchSeed };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, Avatar, Badge, Breadcrumb, BreadcrumbItem, Button, Card, Checkbox, DEFAULT_BOWING, DEFAULT_INK, DEFAULT_ROUGHNESS, DEFAULT_STROKE_WIDTH, Divider, Input, Modal, ModalClose, ModalDescription, ModalRoot, ModalTitle, ModalTrigger, Pagination, Progress, Radio, RadioGroup, RoughSvg, SKETCH_COLORS, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectRoot, SelectSeparator, SelectTrigger, SelectValue, Skeleton, SketchBox, SketchSeedProvider, Slider, Stepper, Switch, Tab, TabList, TabPanel, Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRow, Tabs, Textarea, Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastRoot, ToastTitle, ToastViewport, Tooltip, TooltipProvider, deriveSeed, toRoughOptions, useResolvedSeed, useSketchSeed };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map