doodleui-react 0.1.0

package/dist/index.cjs

@@ -0,0 +1,1231 @@
+"use client";
+'use strict';
+
+var react = require('react');
+var rough = require('roughjs');
+var jsxRuntime = require('react/jsx-runtime');
+var CheckboxPrimitive = require('@radix-ui/react-checkbox');
+var RadioGroupPrimitive = require('@radix-ui/react-radio-group');
+var Dialog = require('@radix-ui/react-dialog');
+var TooltipPrimitive = require('@radix-ui/react-tooltip');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var rough__default = /*#__PURE__*/_interopDefault(rough);
+var CheckboxPrimitive__namespace = /*#__PURE__*/_interopNamespace(CheckboxPrimitive);
+var RadioGroupPrimitive__namespace = /*#__PURE__*/_interopNamespace(RadioGroupPrimitive);
+var Dialog__namespace = /*#__PURE__*/_interopNamespace(Dialog);
+var TooltipPrimitive__namespace = /*#__PURE__*/_interopNamespace(TooltipPrimitive);
+
+// src/types.ts
+function toRoughOptions(props) {
+  const stroke = props.stroke ?? props.sketchColor ?? DEFAULT_INK;
+  const options = {
+    roughness: props.roughness ?? DEFAULT_ROUGHNESS,
+    bowing: props.bowing ?? DEFAULT_BOWING,
+    stroke,
+    strokeWidth: props.strokeWidth ?? DEFAULT_STROKE_WIDTH,
+    seed: props.seed
+  };
+  if (props.fill) {
+    options.fill = props.fill;
+    options.fillStyle = props.fillStyle ?? "hachure";
+  }
+  return options;
+}
+var DEFAULT_ROUGHNESS = 1.5;
+var DEFAULT_BOWING = 1;
+var DEFAULT_STROKE_WIDTH = 1.75;
+var DEFAULT_INK = "#1f1d1a";
+var DEFAULT_INSET = 3;
+var SKETCH_COLORS = {
+  ink: DEFAULT_INK,
+  accent: "#e24b3b",
+  accentFill: "#f4c4bc",
+  secondaryFill: "#d7e3d4",
+  paper: "#eef0ea",
+  info: "#1d4e89",
+  warning: "#c47b17",
+  error: "#c0392b",
+  success: "#2d6a4f"
+};
+
+// src/utils.ts
+function randomSeed() {
+  return Math.floor(Math.random() * 2 ** 31);
+}
+function cn(...parts) {
+  const value = parts.filter(Boolean).join(" ");
+  return value.length > 0 ? value : void 0;
+}
+var SketchSeedContext = react.createContext(null);
+function SketchSeedProvider({
+  children,
+  initialSeed
+}) {
+  const [seed, setSeed] = react.useState(() => initialSeed ?? randomSeed());
+  const shuffle = react.useCallback(() => {
+    setSeed(randomSeed());
+  }, []);
+  const value = react.useMemo(
+    () => ({ seed, shuffle, setSeed }),
+    [seed, shuffle]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(SketchSeedContext.Provider, { value, children });
+}
+function useSketchSeed() {
+  const ctx = react.useContext(SketchSeedContext);
+  if (!ctx) {
+    throw new Error(
+      "useSketchSeed() must be used inside <SketchSeedProvider>. Wrap your tree so Shuffle can redraw every sketch."
+    );
+  }
+  return ctx;
+}
+function useOptionalSketchSeed() {
+  return react.useContext(SketchSeedContext);
+}
+
+// src/hooks/useResolvedSeed.ts
+function useResolvedSeed(seed) {
+  const ctx = useOptionalSketchSeed();
+  const [fallback] = react.useState(randomSeed);
+  if (seed != null) return seed;
+  if (ctx) return ctx.seed;
+  return fallback;
+}
+function useElementSize(ref) {
+  const [size, setSize] = react.useState({ width: 0, height: 0 });
+  react.useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const update = () => {
+      setSize({ width: el.offsetWidth, height: el.offsetHeight });
+    };
+    update();
+    const observer = new ResizeObserver(update);
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [ref]);
+  return size;
+}
+function RoughSvg({
+  shape = "rectangle",
+  width: widthProp,
+  height: heightProp,
+  roughness,
+  seed: seedProp,
+  sketchColor,
+  bowing,
+  fillStyle,
+  strokeWidth,
+  fill,
+  inset = DEFAULT_INSET,
+  path,
+  className,
+  style
+}) {
+  const containerRef = react.useRef(null);
+  const svgRef = react.useRef(null);
+  const measured = useElementSize(containerRef);
+  const seed = useResolvedSeed(seedProp);
+  const width = widthProp ?? measured.width;
+  const height = heightProp ?? measured.height;
+  react.useLayoutEffect(() => {
+    const svg = svgRef.current;
+    if (!svg || width < 2 || height < 2) return;
+    while (svg.firstChild) svg.removeChild(svg.firstChild);
+    const rc = rough__default.default.svg(svg);
+    const options = toRoughOptions({
+      roughness,
+      seed,
+      sketchColor,
+      bowing,
+      fillStyle,
+      strokeWidth,
+      fill
+    });
+    const x = inset;
+    const y = inset;
+    const w = Math.max(1, width - inset * 2);
+    const h = Math.max(1, height - inset * 2);
+    let node;
+    switch (shape) {
+      case "ellipse":
+        node = rc.ellipse(width / 2, height / 2, w, h, options);
+        break;
+      case "line":
+        node = rc.line(inset, height / 2, width - inset, height / 2, options);
+        break;
+      case "line-vertical":
+        node = rc.line(width / 2, inset, width / 2, height - inset, options);
+        break;
+      case "path":
+        if (!path) return;
+        node = rc.path(path, options);
+        break;
+      default:
+        node = rc.rectangle(x, y, w, h, options);
+    }
+    svg.appendChild(node);
+  }, [
+    width,
+    height,
+    shape,
+    roughness,
+    seed,
+    sketchColor,
+    bowing,
+    fillStyle,
+    strokeWidth,
+    fill,
+    inset,
+    path
+  ]);
+  const overlayStyle = {
+    position: "absolute",
+    inset: 0,
+    width: "100%",
+    height: "100%",
+    pointerEvents: "none",
+    overflow: "visible",
+    zIndex: 0,
+    ...style
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: containerRef,
+      "aria-hidden": "true",
+      className,
+      style: overlayStyle,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "svg",
+        {
+          ref: svgRef,
+          width: "100%",
+          height: "100%",
+          overflow: "visible",
+          style: { display: "block" }
+        }
+      )
+    }
+  );
+}
+var SketchBox = react.forwardRef(
+  function SketchBox2({
+    children,
+    className,
+    style,
+    contentClassName,
+    contentStyle,
+    shape = "rectangle",
+    fill,
+    fillStyle,
+    shadow = false,
+    roughness,
+    seed,
+    sketchColor,
+    bowing,
+    strokeWidth,
+    inset,
+    path,
+    ...rest
+  }, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: cn(className),
+        style: { position: "relative", ...style },
+        ...rest,
+        children: [
+          shadow ? /* @__PURE__ */ jsxRuntime.jsx(
+            RoughSvg,
+            {
+              shape,
+              roughness: (roughness ?? 1.5) + 0.35,
+              seed,
+              sketchColor,
+              bowing,
+              fillStyle: "hachure",
+              fill: sketchColor ?? "#1f1d1a",
+              strokeWidth: 1,
+              inset,
+              style: { transform: "translate(5px, 6px)", opacity: 0.16 }
+            }
+          ) : null,
+          /* @__PURE__ */ jsxRuntime.jsx(
+            RoughSvg,
+            {
+              shape,
+              roughness,
+              seed,
+              sketchColor,
+              bowing,
+              fillStyle: fill ? fillStyle : shadow ? "solid" : fillStyle,
+              fill: fill ?? (shadow ? "#f7f6f2" : void 0),
+              strokeWidth,
+              inset,
+              path
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: contentClassName,
+              style: { position: "relative", zIndex: 1, ...contentStyle },
+              children
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+var SIZE_STYLES = {
+  sm: { fontSize: 13, padding: "4px 12px", minHeight: 30 },
+  md: { fontSize: 15, padding: "8px 16px", minHeight: 38 },
+  lg: { fontSize: 17, padding: "11px 22px", minHeight: 46 }
+};
+var Button = react.forwardRef(
+  function Button2({
+    children,
+    className,
+    style,
+    variant = "primary",
+    size = "md",
+    roughness,
+    seed,
+    sketchColor,
+    bowing,
+    fillStyle,
+    strokeWidth,
+    disabled,
+    onMouseEnter,
+    onMouseLeave,
+    ...rest
+  }, ref) {
+    const [hovered, setHovered] = react.useState(false);
+    const ink = sketchColor ?? SKETCH_COLORS.ink;
+    const fill = variant === "primary" ? SKETCH_COLORS.accentFill : variant === "secondary" ? SKETCH_COLORS.secondaryFill : void 0;
+    const stroke = variant === "ghost" && !hovered ? "transparent" : variant === "primary" ? sketchColor ?? SKETCH_COLORS.accent : ink;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        ref,
+        type: "button",
+        className: cn(className),
+        disabled,
+        onMouseEnter: (event) => {
+          setHovered(true);
+          onMouseEnter?.(event);
+        },
+        onMouseLeave: (event) => {
+          setHovered(false);
+          onMouseLeave?.(event);
+        },
+        style: {
+          position: "relative",
+          display: "inline-flex",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: 8,
+          border: "none",
+          background: "transparent",
+          cursor: disabled ? "not-allowed" : "pointer",
+          color: ink,
+          fontFamily: "inherit",
+          fontWeight: 600,
+          lineHeight: 1.2,
+          opacity: disabled ? 0.45 : 1,
+          ...SIZE_STYLES[size],
+          ...style
+        },
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            RoughSvg,
+            {
+              shape: "rectangle",
+              roughness,
+              seed,
+              sketchColor: stroke,
+              bowing,
+              fillStyle: fillStyle ?? "hachure",
+              fill,
+              strokeWidth: hovered ? (strokeWidth ?? 1.75) + 0.4 : strokeWidth
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { style: { position: "relative", zIndex: 1 }, children })
+        ]
+      }
+    );
+  }
+);
+var Input = react.forwardRef(function Input2({
+  className,
+  style,
+  label,
+  roughness,
+  seed,
+  sketchColor,
+  bowing,
+  fillStyle,
+  strokeWidth,
+  id,
+  onFocus,
+  onBlur,
+  ...rest
+}, ref) {
+  const [focused, setFocused] = react.useState(false);
+  const ink = sketchColor ?? SKETCH_COLORS.ink;
+  const inputId = id;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "label",
+    {
+      htmlFor: inputId,
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: 6,
+        width: "100%"
+      },
+      children: [
+        label ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 13, fontWeight: 600, color: ink }, children: label }) : null,
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { position: "relative", display: "block" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            RoughSvg,
+            {
+              shape: "rectangle",
+              roughness,
+              seed,
+              sketchColor: focused ? SKETCH_COLORS.accent : ink,
+              bowing,
+              fillStyle,
+              strokeWidth: focused ? (strokeWidth ?? 1.75) + 0.35 : strokeWidth
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              ref,
+              id: inputId,
+              className: cn(className),
+              onFocus: (event) => {
+                setFocused(true);
+                onFocus?.(event);
+              },
+              onBlur: (event) => {
+                setFocused(false);
+                onBlur?.(event);
+              },
+              style: {
+                position: "relative",
+                zIndex: 1,
+                width: "100%",
+                boxSizing: "border-box",
+                border: "none",
+                outline: "none",
+                background: "transparent",
+                color: ink,
+                fontFamily: "inherit",
+                fontSize: 15,
+                padding: "8px 12px",
+                ...style
+              },
+              ...rest
+            }
+          )
+        ] })
+      ]
+    }
+  );
+});
+var Textarea = react.forwardRef(
+  function Textarea2({
+    className,
+    style,
+    label,
+    roughness,
+    seed,
+    sketchColor,
+    bowing,
+    fillStyle,
+    strokeWidth,
+    id,
+    rows = 4,
+    onFocus,
+    onBlur,
+    ...rest
+  }, ref) {
+    const [focused, setFocused] = react.useState(false);
+    const ink = sketchColor ?? SKETCH_COLORS.ink;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "label",
+      {
+        htmlFor: id,
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          gap: 6,
+          width: "100%"
+        },
+        children: [
+          label ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 13, fontWeight: 600, color: ink }, children: label }) : null,
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { position: "relative", display: "block" }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              RoughSvg,
+              {
+                shape: "rectangle",
+                roughness,
+                seed,
+                sketchColor: focused ? SKETCH_COLORS.accent : ink,
+                bowing,
+                fillStyle,
+                strokeWidth: focused ? (strokeWidth ?? 1.75) + 0.35 : strokeWidth
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "textarea",
+              {
+                ref,
+                id,
+                rows,
+                className: cn(className),
+                onFocus: (event) => {
+                  setFocused(true);
+                  onFocus?.(event);
+                },
+                onBlur: (event) => {
+                  setFocused(false);
+                  onBlur?.(event);
+                },
+                style: {
+                  position: "relative",
+                  zIndex: 1,
+                  width: "100%",
+                  boxSizing: "border-box",
+                  border: "none",
+                  outline: "none",
+                  background: "transparent",
+                  color: ink,
+                  fontFamily: "inherit",
+                  fontSize: 15,
+                  lineHeight: 1.5,
+                  padding: "10px 12px",
+                  resize: "vertical",
+                  ...style
+                },
+                ...rest
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+var BOX = 20;
+var CHECK_PATH = "M 4.5 10.5 L 8.5 14.5 L 15.5 5.5";
+var Checkbox = react.forwardRef(
+  function Checkbox2({
+    className,
+    style,
+    label,
+    roughness,
+    seed,
+    sketchColor,
+    bowing,
+    fillStyle,
+    strokeWidth,
+    checked,
+    defaultChecked,
+    onCheckedChange,
+    id,
+    ...rest
+  }, ref) {
+    const ink = sketchColor ?? SKETCH_COLORS.ink;
+    const generatedId = react.useId();
+    const inputId = id ?? generatedId;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "span",
+      {
+        className: cn(className),
+        style: {
+          display: "inline-flex",
+          alignItems: "center",
+          gap: 8,
+          cursor: "pointer",
+          userSelect: "none",
+          ...style
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            CheckboxPrimitive__namespace.Root,
+            {
+              ref,
+              id: inputId,
+              checked,
+              defaultChecked,
+              onCheckedChange,
+              style: {
+                position: "relative",
+                width: BOX,
+                height: BOX,
+                padding: 0,
+                border: "none",
+                background: "transparent",
+                flexShrink: 0,
+                cursor: "pointer"
+              },
+              ...rest,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  RoughSvg,
+                  {
+                    shape: "rectangle",
+                    roughness,
+                    seed,
+                    sketchColor: ink,
+                    bowing,
+                    fillStyle,
+                    strokeWidth: strokeWidth ?? 1.6,
+                    inset: 1.5
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  CheckboxPrimitive__namespace.Indicator,
+                  {
+                    style: {
+                      position: "absolute",
+                      inset: 0,
+                      display: "block"
+                    },
+                    children: /* @__PURE__ */ jsxRuntime.jsx(
+                      RoughSvg,
+                      {
+                        shape: "path",
+                        path: CHECK_PATH,
+                        roughness: (roughness ?? 1.5) * 0.7,
+                        seed,
+                        sketchColor: SKETCH_COLORS.accent,
+                        bowing,
+                        strokeWidth: (strokeWidth ?? 1.6) + 0.4,
+                        inset: 0
+                      }
+                    )
+                  }
+                )
+              ]
+            }
+          ),
+          label ? /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: inputId, style: { fontSize: 15, cursor: "pointer" }, children: label }) : null
+        ]
+      }
+    );
+  }
+);
+var RadioGroup = react.forwardRef(
+  function RadioGroup2({ className, style, children, ...rest }, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      RadioGroupPrimitive__namespace.Root,
+      {
+        ref,
+        className: cn(className),
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          gap: 10,
+          ...style
+        },
+        ...rest,
+        children
+      }
+    );
+  }
+);
+var SIZE = 20;
+var Radio = react.forwardRef(function Radio2({
+  className,
+  style,
+  label,
+  roughness,
+  seed,
+  sketchColor,
+  bowing,
+  fillStyle,
+  strokeWidth,
+  id,
+  ...rest
+}, ref) {
+  const ink = sketchColor ?? SKETCH_COLORS.ink;
+  const generatedId = react.useId();
+  const inputId = id ?? generatedId;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      className: cn(className),
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 8,
+        cursor: "pointer",
+        userSelect: "none",
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          RadioGroupPrimitive__namespace.Item,
+          {
+            ref,
+            id: inputId,
+            style: {
+              position: "relative",
+              width: SIZE,
+              height: SIZE,
+              padding: 0,
+              border: "none",
+              background: "transparent",
+              flexShrink: 0,
+              cursor: "pointer",
+              borderRadius: "50%"
+            },
+            ...rest,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                RoughSvg,
+                {
+                  shape: "ellipse",
+                  roughness,
+                  seed,
+                  sketchColor: ink,
+                  bowing,
+                  fillStyle,
+                  strokeWidth: strokeWidth ?? 1.6,
+                  inset: 1.5
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                RadioGroupPrimitive__namespace.Indicator,
+                {
+                  style: {
+                    position: "absolute",
+                    inset: 0,
+                    display: "block"
+                  },
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    RoughSvg,
+                    {
+                      shape: "ellipse",
+                      roughness: (roughness ?? 1.5) + 0.2,
+                      seed,
+                      sketchColor: SKETCH_COLORS.accent,
+                      fill: SKETCH_COLORS.accent,
+                      fillStyle: "solid",
+                      bowing,
+                      strokeWidth: 1,
+                      inset: 6
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        label ? /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: inputId, style: { fontSize: 15, cursor: "pointer" }, children: label }) : null
+      ]
+    }
+  );
+});
+var Card = react.forwardRef(function Card2({
+  children,
+  className,
+  style,
+  shadow = true,
+  fill,
+  title,
+  footer,
+  roughness,
+  seed,
+  sketchColor,
+  bowing,
+  fillStyle,
+  strokeWidth,
+  ...rest
+}, ref) {
+  const boxProps = {
+    shadow,
+    fill,
+    roughness,
+    seed,
+    sketchColor: sketchColor ?? SKETCH_COLORS.ink,
+    bowing,
+    fillStyle,
+    strokeWidth
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    SketchBox,
+    {
+      ref,
+      className: cn(className),
+      style,
+      contentStyle: { padding: "16px 18px" },
+      ...boxProps,
+      ...rest,
+      children: [
+        title ? /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            style: {
+              fontWeight: 700,
+              fontSize: 16,
+              marginBottom: 10
+            },
+            children: title
+          }
+        ) : null,
+        children,
+        footer ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginTop: 14, fontSize: 13, opacity: 0.8 }, children: footer }) : null
+      ]
+    }
+  );
+});
+var Badge = react.forwardRef(function Badge2({
+  children,
+  className,
+  style,
+  variant = "default",
+  roughness,
+  seed,
+  sketchColor,
+  bowing,
+  fillStyle,
+  strokeWidth,
+  ...rest
+}, ref) {
+  const ink = variant === "accent" ? sketchColor ?? SKETCH_COLORS.accent : sketchColor ?? SKETCH_COLORS.ink;
+  const fill = variant === "accent" ? SKETCH_COLORS.accentFill : variant === "outline" ? void 0 : SKETCH_COLORS.secondaryFill;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    SketchBox,
+    {
+      className: cn(className),
+      style: {
+        display: "inline-flex",
+        verticalAlign: "middle",
+        ...style
+      },
+      contentStyle: {
+        padding: "2px 10px",
+        fontSize: 12,
+        fontWeight: 650,
+        lineHeight: 1.4,
+        letterSpacing: "0.01em"
+      },
+      fill,
+      fillStyle: fillStyle ?? "hachure",
+      roughness,
+      seed,
+      sketchColor: ink,
+      bowing,
+      strokeWidth: strokeWidth ?? 1.4,
+      ...rest,
+      children: /* @__PURE__ */ jsxRuntime.jsx("span", { ref, children })
+    }
+  );
+});
+var VARIANT_COLOR = {
+  info: SKETCH_COLORS.info,
+  warning: SKETCH_COLORS.warning,
+  error: SKETCH_COLORS.error,
+  success: SKETCH_COLORS.success
+};
+var VARIANT_FILL = {
+  info: "#d2deec",
+  warning: "#f3e2c0",
+  error: "#f3d0cc",
+  success: "#d3e8dc"
+};
+var Alert = react.forwardRef(function Alert2({
+  children,
+  className,
+  style,
+  variant = "info",
+  title,
+  roughness,
+  seed,
+  sketchColor,
+  bowing,
+  fillStyle,
+  strokeWidth,
+  role = "status",
+  ...rest
+}, ref) {
+  const color = sketchColor ?? VARIANT_COLOR[variant];
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    SketchBox,
+    {
+      ref,
+      role,
+      className: cn(className),
+      style: { color, ...style },
+      contentStyle: { padding: "12px 16px" },
+      roughness,
+      seed,
+      sketchColor: color,
+      bowing,
+      fillStyle: fillStyle ?? "hachure",
+      fill: VARIANT_FILL[variant],
+      strokeWidth,
+      ...rest,
+      children: [
+        title ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontWeight: 700, marginBottom: 4, fontSize: 15 }, children: title }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 14, lineHeight: 1.5, color: SKETCH_COLORS.ink }, children })
+      ]
+    }
+  );
+});
+function Modal({
+  open,
+  defaultOpen,
+  onOpenChange,
+  trigger,
+  title,
+  description,
+  children,
+  className,
+  roughness,
+  seed,
+  sketchColor,
+  bowing,
+  fillStyle,
+  strokeWidth
+}) {
+  const ink = sketchColor ?? SKETCH_COLORS.ink;
+  return /* @__PURE__ */ jsxRuntime.jsxs(Dialog__namespace.Root, { open, defaultOpen, onOpenChange, children: [
+    trigger ? /* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Trigger, { asChild: true, children: trigger }) : null,
+    /* @__PURE__ */ jsxRuntime.jsxs(Dialog__namespace.Portal, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Dialog__namespace.Overlay,
+        {
+          style: {
+            position: "fixed",
+            inset: 0,
+            background: "rgba(31, 29, 26, 0.38)",
+            zIndex: 70
+          }
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Dialog__namespace.Content,
+        {
+          className: cn(className),
+          style: {
+            position: "fixed",
+            left: "50%",
+            top: "50%",
+            transform: "translate(-50%, -50%)",
+            zIndex: 80,
+            width: "min(480px, calc(100vw - 32px))",
+            outline: "none"
+          },
+          children: /* @__PURE__ */ jsxRuntime.jsxs(
+            SketchBox,
+            {
+              roughness,
+              seed,
+              sketchColor: ink,
+              bowing,
+              fillStyle: fillStyle ?? "solid",
+              fill: "#f7f6f2",
+              strokeWidth: strokeWidth ?? 2,
+              shadow: true,
+              contentStyle: { padding: "20px 22px 18px" },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    style: {
+                      display: "flex",
+                      alignItems: "flex-start",
+                      justifyContent: "space-between",
+                      gap: 12,
+                      marginBottom: title ? 10 : 0
+                    },
+                    children: [
+                      title ? /* @__PURE__ */ jsxRuntime.jsx(
+                        Dialog__namespace.Title,
+                        {
+                          style: {
+                            margin: 0,
+                            fontSize: 18,
+                            fontWeight: 700,
+                            color: ink
+                          },
+                          children: title
+                        }
+                      ) : /* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Title, { style: { position: "absolute", width: 1, height: 1, overflow: "hidden", clip: "rect(0 0 0 0)" }, children: "Dialog" }),
+                      /* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+                        Button,
+                        {
+                          variant: "ghost",
+                          size: "sm",
+                          roughness,
+                          seed,
+                          sketchColor: ink,
+                          "aria-label": "Close",
+                          children: "Close"
+                        }
+                      ) })
+                    ]
+                  }
+                ),
+                description ? /* @__PURE__ */ jsxRuntime.jsx(
+                  Dialog__namespace.Description,
+                  {
+                    style: {
+                      margin: "0 0 14px",
+                      fontSize: 14,
+                      lineHeight: 1.5,
+                      color: ink,
+                      opacity: 0.8
+                    },
+                    children: description
+                  }
+                ) : null,
+                /* @__PURE__ */ jsxRuntime.jsx("div", { children })
+              ]
+            }
+          )
+        }
+      )
+    ] })
+  ] });
+}
+var ModalRoot = Dialog__namespace.Root;
+var ModalTrigger = Dialog__namespace.Trigger;
+var ModalClose = Dialog__namespace.Close;
+var ModalTitle = Dialog__namespace.Title;
+var ModalDescription = Dialog__namespace.Description;
+var Divider = react.forwardRef(
+  function Divider2({
+    className,
+    style,
+    orientation = "horizontal",
+    roughness,
+    seed,
+    sketchColor,
+    bowing,
+    strokeWidth,
+    ...rest
+  }, ref) {
+    const horizontal = orientation === "horizontal";
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        role: "separator",
+        "aria-orientation": orientation,
+        className: cn(className),
+        style: {
+          position: "relative",
+          width: horizontal ? "100%" : 12,
+          height: horizontal ? 12 : "100%",
+          minHeight: horizontal ? 12 : 48,
+          ...style
+        },
+        ...rest,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          RoughSvg,
+          {
+            shape: horizontal ? "line" : "line-vertical",
+            roughness: roughness ?? 1.8,
+            seed,
+            sketchColor: sketchColor ?? SKETCH_COLORS.ink,
+            bowing: bowing ?? 2,
+            strokeWidth: strokeWidth ?? 1.5,
+            inset: 4
+          }
+        )
+      }
+    );
+  }
+);
+var Progress = react.forwardRef(
+  function Progress2({
+    className,
+    style,
+    value = 0,
+    max = 100,
+    roughness,
+    seed,
+    sketchColor,
+    bowing,
+    fillStyle,
+    strokeWidth,
+    ...rest
+  }, ref) {
+    const ink = sketchColor ?? SKETCH_COLORS.accent;
+    const clamped = Math.min(max, Math.max(0, value));
+    const percent = max === 0 ? 0 : clamped / max * 100;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        role: "progressbar",
+        "aria-valuemin": 0,
+        "aria-valuemax": max,
+        "aria-valuenow": clamped,
+        className: cn(className),
+        style: {
+          position: "relative",
+          width: "100%",
+          height: 18,
+          ...style
+        },
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            RoughSvg,
+            {
+              shape: "rectangle",
+              roughness,
+              seed,
+              sketchColor: SKETCH_COLORS.ink,
+              bowing,
+              strokeWidth: strokeWidth ?? 1.5,
+              inset: 2
+            }
+          ),
+          percent > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                left: 5,
+                top: 4,
+                bottom: 4,
+                width: `calc(${percent}% - 10px)`,
+                minWidth: percent > 0 ? 8 : 0,
+                overflow: "hidden"
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                RoughSvg,
+                {
+                  shape: "rectangle",
+                  roughness: (roughness ?? 1.5) + 0.55,
+                  seed,
+                  sketchColor: ink,
+                  fill: ink,
+                  fillStyle: fillStyle ?? "hachure",
+                  bowing,
+                  strokeWidth: 1.1,
+                  inset: 1
+                }
+              )
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+var TooltipProvider = TooltipPrimitive__namespace.Provider;
+function Tooltip({
+  content,
+  children,
+  side = "top",
+  delayDuration = 200,
+  className,
+  roughness,
+  seed,
+  sketchColor,
+  bowing,
+  fillStyle,
+  strokeWidth
+}) {
+  const ink = sketchColor ?? SKETCH_COLORS.ink;
+  return /* @__PURE__ */ jsxRuntime.jsxs(TooltipPrimitive__namespace.Root, { delayDuration, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive__namespace.Trigger, { asChild: true, children }),
+    /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      TooltipPrimitive__namespace.Content,
+      {
+        side,
+        sideOffset: 8,
+        className: cn(className),
+        style: { zIndex: 60, outline: "none" },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          SketchBox,
+          {
+            roughness: roughness ?? 1.3,
+            seed,
+            sketchColor: ink,
+            bowing,
+            fillStyle: fillStyle ?? "solid",
+            fill: "#f7f6f2",
+            strokeWidth: strokeWidth ?? 1.4,
+            contentStyle: {
+              padding: "6px 10px",
+              fontSize: 13,
+              lineHeight: 1.35,
+              color: ink,
+              maxWidth: 240
+            },
+            children: content
+          }
+        )
+      }
+    ) })
+  ] });
+}
+
+exports.Alert = Alert;
+exports.Badge = Badge;
+exports.Button = Button;
+exports.Card = Card;
+exports.Checkbox = Checkbox;
+exports.DEFAULT_BOWING = DEFAULT_BOWING;
+exports.DEFAULT_INK = DEFAULT_INK;
+exports.DEFAULT_ROUGHNESS = DEFAULT_ROUGHNESS;
+exports.DEFAULT_STROKE_WIDTH = DEFAULT_STROKE_WIDTH;
+exports.Divider = Divider;
+exports.Input = Input;
+exports.Modal = Modal;
+exports.ModalClose = ModalClose;
+exports.ModalDescription = ModalDescription;
+exports.ModalRoot = ModalRoot;
+exports.ModalTitle = ModalTitle;
+exports.ModalTrigger = ModalTrigger;
+exports.Progress = Progress;
+exports.Radio = Radio;
+exports.RadioGroup = RadioGroup;
+exports.RoughSvg = RoughSvg;
+exports.SKETCH_COLORS = SKETCH_COLORS;
+exports.SketchBox = SketchBox;
+exports.SketchSeedProvider = SketchSeedProvider;
+exports.Textarea = Textarea;
+exports.Tooltip = Tooltip;
+exports.TooltipProvider = TooltipProvider;
+exports.toRoughOptions = toRoughOptions;
+exports.useResolvedSeed = useResolvedSeed;
+exports.useSketchSeed = useSketchSeed;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map