@refraction-ui/react 0.19.1 → 0.20.0

package/dist/react-mini-map.js

@@ -0,0 +1,207 @@
+import {
+  cn,
+  cva
+} from "./chunk-ZF3OHCGV.js";
+
+// ../react-mini-map/dist/index.js
+import * as React from "react";
+
+// ../mini-map/dist/index.js
+function contentBounds(items) {
+  if (items.length === 0) return { x: 0, y: 0, width: 0, height: 0 };
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+  for (const item of items) {
+    const right = item.x + (item.width ?? 0);
+    const bottom = item.y + (item.height ?? 0);
+    if (item.x < minX) minX = item.x;
+    if (item.y < minY) minY = item.y;
+    if (right > maxX) maxX = right;
+    if (bottom > maxY) maxY = bottom;
+  }
+  return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
+}
+function miniScale(contentRect, miniW, miniH, padding = 8) {
+  const availW = miniW - padding * 2;
+  const availH = miniH - padding * 2;
+  if (availW <= 0 || availH <= 0) return 1;
+  if (contentRect.width === 0 || contentRect.height === 0) return 1;
+  return Math.min(availW / contentRect.width, availH / contentRect.height);
+}
+function worldToMini(point, contentRect, scale, padding = 8) {
+  return {
+    x: (point.x - contentRect.x) * scale + padding,
+    y: (point.y - contentRect.y) * scale + padding
+  };
+}
+function viewportRectInMini(viewport, contentRect, scale, padding = 8) {
+  const { x, y } = worldToMini(
+    { x: viewport.x, y: viewport.y },
+    contentRect,
+    scale,
+    padding
+  );
+  return {
+    x,
+    y,
+    width: viewport.width * scale,
+    height: viewport.height * scale
+  };
+}
+function createMiniMap() {
+  return {
+    ariaProps: { role: "img", "aria-label": "Minimap" },
+    dataAttributes: { "data-component": "mini-map" }
+  };
+}
+var miniMapVariants = cva({
+  base: [
+    "relative overflow-hidden rounded-md border border-border bg-card",
+    "select-none"
+  ].join(" "),
+  variants: {
+    interactive: {
+      true: "cursor-grab active:cursor-grabbing",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    interactive: "false"
+  }
+});
+var miniMapDotClass = "absolute rounded-sm bg-muted";
+var miniMapViewportClass = "absolute rounded-sm border border-primary ring-1 ring-primary bg-primary/10";
+
+// ../react-mini-map/dist/index.js
+import { jsxs, jsx } from "react/jsx-runtime";
+var MiniMap = React.forwardRef(
+  function MiniMap2({
+    items,
+    viewport,
+    width = 200,
+    height = 140,
+    padding = 8,
+    onViewportChange,
+    className,
+    ...props
+  }, ref) {
+    const containerRef = React.useRef(null);
+    const isDragging = React.useRef(false);
+    const bounds = React.useMemo(() => contentBounds(items), [items]);
+    const scale = React.useMemo(
+      () => miniScale(bounds, width, height, padding),
+      [bounds, width, height, padding]
+    );
+    const viewportRect = React.useMemo(
+      () => viewport != null ? viewportRectInMini(viewport, bounds, scale, padding) : null,
+      [viewport, bounds, scale, padding]
+    );
+    const { ariaProps, dataAttributes } = createMiniMap();
+    const miniToWorld = React.useCallback(
+      (miniX, miniY) => {
+        return {
+          x: (miniX - padding) / scale + bounds.x,
+          y: (miniY - padding) / scale + bounds.y
+        };
+      },
+      [scale, bounds, padding]
+    );
+    const handlePointerEvent = React.useCallback(
+      (e) => {
+        if (!onViewportChange) return;
+        const el = containerRef.current;
+        if (!el) return;
+        const rect = el.getBoundingClientRect();
+        const miniX = e.clientX - rect.left;
+        const miniY = e.clientY - rect.top;
+        onViewportChange(miniToWorld(miniX, miniY));
+      },
+      [onViewportChange, miniToWorld]
+    );
+    const handlePointerDown = React.useCallback(
+      (e) => {
+        if (!onViewportChange) return;
+        isDragging.current = true;
+        e.currentTarget.setPointerCapture(e.pointerId);
+        handlePointerEvent(e);
+      },
+      [onViewportChange, handlePointerEvent]
+    );
+    const handlePointerMove = React.useCallback(
+      (e) => {
+        if (!isDragging.current) return;
+        handlePointerEvent(e);
+      },
+      [handlePointerEvent]
+    );
+    const handlePointerUp = React.useCallback(() => {
+      isDragging.current = false;
+    }, []);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: (node) => {
+          containerRef.current = node;
+          if (typeof ref === "function") {
+            ref(node);
+          } else if (ref) {
+            ref.current = node;
+          }
+        },
+        className: cn(
+          miniMapVariants({ interactive: onViewportChange ? "true" : "false" }),
+          className
+        ),
+        style: { width, height, position: "relative" },
+        ...ariaProps,
+        ...dataAttributes,
+        onPointerDown: onViewportChange ? handlePointerDown : void 0,
+        onPointerMove: onViewportChange ? handlePointerMove : void 0,
+        onPointerUp: onViewportChange ? handlePointerUp : void 0,
+        ...props,
+        children: [
+          items.map((item) => {
+            const pos = worldToMini(item, bounds, scale, padding);
+            const w = (item.width ?? 8) * scale;
+            const h = (item.height ?? 8) * scale;
+            return /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: miniMapDotClass,
+                style: {
+                  position: "absolute",
+                  left: `${pos.x}px`,
+                  top: `${pos.y}px`,
+                  width: `${Math.max(4, w)}px`,
+                  height: `${Math.max(4, h)}px`
+                },
+                "aria-hidden": "true"
+              },
+              item.id
+            );
+          }),
+          viewportRect != null && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: miniMapViewportClass,
+              style: {
+                position: "absolute",
+                left: `${viewportRect.x}px`,
+                top: `${viewportRect.y}px`,
+                width: `${viewportRect.width}px`,
+                height: `${viewportRect.height}px`
+              },
+              "aria-hidden": "true"
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+export {
+  MiniMap
+};
+//# sourceMappingURL=react-mini-map.js.map

package/dist/react-mini-map.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../mini-map/src/mini-map.ts", "../../mini-map/src/mini-map.styles.ts", "../../react-mini-map/src/mini-map.tsx"],
+  "sourcesContent": ["/** A rectangle in 2-D space. */\nexport interface Rect {\n  x: number\n  y: number\n  width: number\n  height: number\n}\n\n/** A single item to be represented as a dot on the minimap. */\nexport interface MiniMapItem {\n  id: string\n  x: number\n  y: number\n  width?: number\n  height?: number\n}\n\nexport interface MiniMapAPI {\n  /** ARIA attributes to spread on the minimap container element. */\n  ariaProps: { role: 'img'; 'aria-label': string }\n  /** Data attributes for styling hooks. */\n  dataAttributes: Record<string, string>\n}\n\n/**\n * Compute the bounding box that encloses all items (using their x/y + optional\n * width/height). Returns a zero-size rect at the origin when `items` is empty.\n */\nexport function contentBounds(items: MiniMapItem[]): Rect {\n  if (items.length === 0) return { x: 0, y: 0, width: 0, height: 0 }\n\n  let minX = Infinity\n  let minY = Infinity\n  let maxX = -Infinity\n  let maxY = -Infinity\n\n  for (const item of items) {\n    const right = item.x + (item.width ?? 0)\n    const bottom = item.y + (item.height ?? 0)\n    if (item.x < minX) minX = item.x\n    if (item.y < minY) minY = item.y\n    if (right > maxX) maxX = right\n    if (bottom > maxY) maxY = bottom\n  }\n\n  return { x: minX, y: minY, width: maxX - minX, height: maxY - minY }\n}\n\n/**\n * Compute the uniform scale factor that fits `contentRect` into the minimap\n * box (after subtracting `padding` on each side). Returns 1 when the content\n * has zero area (nothing to scale).\n */\nexport function miniScale(\n  contentRect: Rect,\n  miniW: number,\n  miniH: number,\n  padding = 8,\n): number {\n  const availW = miniW - padding * 2\n  const availH = miniH - padding * 2\n  if (availW <= 0 || availH <= 0) return 1\n  if (contentRect.width === 0 || contentRect.height === 0) return 1\n  return Math.min(availW / contentRect.width, availH / contentRect.height)\n}\n\n/**\n * Map a world-space point `{ x, y }` to minimap pixel coordinates.\n *\n * @param point       World coordinate\n * @param contentRect Bounding box of all content (from `contentBounds`)\n * @param scale       Scale factor (from `miniScale`)\n * @param padding     Padding inset in px (must match the value passed to `miniScale`)\n */\nexport function worldToMini(\n  point: { x: number; y: number },\n  contentRect: Rect,\n  scale: number,\n  padding = 8,\n): { x: number; y: number } {\n  return {\n    x: (point.x - contentRect.x) * scale + padding,\n    y: (point.y - contentRect.y) * scale + padding,\n  }\n}\n\n/**\n * Compute the position and size of the viewport indicator rectangle in\n * minimap coordinates, ready to be applied as CSS `left/top/width/height`.\n */\nexport function viewportRectInMini(\n  viewport: Rect,\n  contentRect: Rect,\n  scale: number,\n  padding = 8,\n): Rect {\n  const { x, y } = worldToMini(\n    { x: viewport.x, y: viewport.y },\n    contentRect,\n    scale,\n    padding,\n  )\n  return {\n    x,\n    y,\n    width: viewport.width * scale,\n    height: viewport.height * scale,\n  }\n}\n\n/**\n * Build the framework-agnostic ARIA props for the minimap container.\n *\n * Every adapter spreads `ariaProps` onto its outermost element; `dataAttributes`\n * are available for CSS hooks.\n */\nexport function createMiniMap(): MiniMapAPI {\n  return {\n    ariaProps: { role: 'img', 'aria-label': 'Minimap' },\n    dataAttributes: { 'data-component': 'mini-map' },\n  }\n}\n", "import { cva } from '@refraction-ui/shared'\n\n/**\n * The outer minimap box: small, rounded, bordered, card background.\n * The `interactive` variant switches to grab cursor for clickable minimaps.\n */\nexport const miniMapVariants = cva({\n  base: [\n    'relative overflow-hidden rounded-md border border-border bg-card',\n    'select-none',\n  ].join(' '),\n  variants: {\n    interactive: {\n      true: 'cursor-grab active:cursor-grabbing',\n      false: '',\n    },\n  },\n  defaultVariants: {\n    interactive: 'false',\n  },\n})\n\n/** A single node dot in the minimap (represents one `MiniMapItem`). */\nexport const miniMapDotClass =\n  'absolute rounded-sm bg-muted'\n\n/**\n * The draggable viewport indicator rectangle.\n * Uses a semi-transparent primary fill with a primary ring/border.\n */\nexport const miniMapViewportClass =\n  'absolute rounded-sm border border-primary ring-1 ring-primary bg-primary/10'\n", "import * as React from 'react'\nimport {\n  contentBounds,\n  miniScale,\n  worldToMini,\n  viewportRectInMini,\n  createMiniMap,\n  miniMapVariants,\n  miniMapDotClass,\n  miniMapViewportClass,\n  type MiniMapItem,\n  type Rect,\n} from '@refraction-ui/mini-map'\nimport { cn } from '@refraction-ui/shared'\n\nexport type { MiniMapItem, Rect }\n\nexport interface MiniMapProps\n  extends Omit<\n    React.HTMLAttributes<HTMLDivElement>,\n    'onSelect' | 'results' | 'color' | 'content'\n  > {\n  /** Items to render as dots on the minimap. */\n  items: MiniMapItem[]\n  /** Current viewport in world coordinates. Renders a viewport indicator rect. */\n  viewport?: Rect\n  /** Width of the minimap box in px. */\n  width?: number\n  /** Height of the minimap box in px. */\n  height?: number\n  /** Padding inset in px (applied to all sides). */\n  padding?: number\n  /**\n   * Called when the user clicks or drags in the minimap, with the new\n   * world-space viewport center `{ x, y }`.\n   */\n  onViewportChange?: (center: { x: number; y: number }) => void\n}\n\n/**\n * MiniMap — a canvas/editor overview map.\n *\n * Renders each `MiniMapItem` as a positioned dot and an optional `viewport`\n * as a draggable indicator rectangle. All scale math lives in the headless\n * `@refraction-ui/mini-map` core; the React layer only handles event binding\n * and rendering. SSR-safe (no `Math.random` or `Date.now`).\n */\nexport const MiniMap = React.forwardRef<HTMLDivElement, MiniMapProps>(\n  function MiniMap(\n    {\n      items,\n      viewport,\n      width = 200,\n      height = 140,\n      padding = 8,\n      onViewportChange,\n      className,\n      ...props\n    },\n    ref,\n  ) {\n    const containerRef = React.useRef<HTMLDivElement | null>(null)\n    const isDragging = React.useRef(false)\n\n    const bounds = React.useMemo(() => contentBounds(items), [items])\n    const scale = React.useMemo(\n      () => miniScale(bounds, width, height, padding),\n      [bounds, width, height, padding],\n    )\n\n    const viewportRect = React.useMemo(\n      () =>\n        viewport != null\n          ? viewportRectInMini(viewport, bounds, scale, padding)\n          : null,\n      [viewport, bounds, scale, padding],\n    )\n\n    const { ariaProps, dataAttributes } = createMiniMap()\n\n    const miniToWorld = React.useCallback(\n      (miniX: number, miniY: number): { x: number; y: number } => {\n        return {\n          x: (miniX - padding) / scale + bounds.x,\n          y: (miniY - padding) / scale + bounds.y,\n        }\n      },\n      [scale, bounds, padding],\n    )\n\n    const handlePointerEvent = React.useCallback(\n      (e: React.PointerEvent<HTMLDivElement>) => {\n        if (!onViewportChange) return\n        const el = containerRef.current\n        if (!el) return\n        const rect = el.getBoundingClientRect()\n        const miniX = e.clientX - rect.left\n        const miniY = e.clientY - rect.top\n        onViewportChange(miniToWorld(miniX, miniY))\n      },\n      [onViewportChange, miniToWorld],\n    )\n\n    const handlePointerDown = React.useCallback(\n      (e: React.PointerEvent<HTMLDivElement>) => {\n        if (!onViewportChange) return\n        isDragging.current = true\n        ;(e.currentTarget as HTMLDivElement).setPointerCapture(e.pointerId)\n        handlePointerEvent(e)\n      },\n      [onViewportChange, handlePointerEvent],\n    )\n\n    const handlePointerMove = React.useCallback(\n      (e: React.PointerEvent<HTMLDivElement>) => {\n        if (!isDragging.current) return\n        handlePointerEvent(e)\n      },\n      [handlePointerEvent],\n    )\n\n    const handlePointerUp = React.useCallback(() => {\n      isDragging.current = false\n    }, [])\n\n    return (\n      <div\n        ref={(node) => {\n          containerRef.current = node\n          if (typeof ref === 'function') {\n            ref(node)\n          } else if (ref) {\n            ref.current = node\n          }\n        }}\n        className={cn(\n          miniMapVariants({ interactive: onViewportChange ? 'true' : 'false' }),\n          className,\n        )}\n        style={{ width, height, position: 'relative' }}\n        {...ariaProps}\n        {...dataAttributes}\n        onPointerDown={onViewportChange ? handlePointerDown : undefined}\n        onPointerMove={onViewportChange ? handlePointerMove : undefined}\n        onPointerUp={onViewportChange ? handlePointerUp : undefined}\n        {...props}\n      >\n        {items.map((item) => {\n          const pos = worldToMini(item, bounds, scale, padding)\n          const w = (item.width ?? 8) * scale\n          const h = (item.height ?? 8) * scale\n          return (\n            <span\n              key={item.id}\n              className={miniMapDotClass}\n              style={{\n                position: 'absolute',\n                left: `${pos.x}px`,\n                top: `${pos.y}px`,\n                width: `${Math.max(4, w)}px`,\n                height: `${Math.max(4, h)}px`,\n              }}\n              aria-hidden=\"true\"\n            />\n          )\n        })}\n        {viewportRect != null && (\n          <span\n            className={miniMapViewportClass}\n            style={{\n              position: 'absolute',\n              left: `${viewportRect.x}px`,\n              top: `${viewportRect.y}px`,\n              width: `${viewportRect.width}px`,\n              height: `${viewportRect.height}px`,\n            }}\n            aria-hidden=\"true\"\n          />\n        )}\n      </div>\n    )\n  },\n)\n"],
+  "mappings": ";;;;;;;;;AA4BO,SAAS,cAAc,OAA4B;AACxD,MAAI,MAAM,WAAW,EAAG,QAAO,EAAE,GAAG,GAAG,GAAG,GAAG,OAAO,GAAG,QAAQ,EAAA;AAE/D,MAAI,OAAO;AACX,MAAI,OAAO;AACX,MAAI,OAAO;AACX,MAAI,OAAO;AAEX,aAAW,QAAQ,OAAO;AACxB,UAAM,QAAQ,KAAK,KAAK,KAAK,SAAS;AACtC,UAAM,SAAS,KAAK,KAAK,KAAK,UAAU;AACxC,QAAI,KAAK,IAAI,KAAM,QAAO,KAAK;AAC/B,QAAI,KAAK,IAAI,KAAM,QAAO,KAAK;AAC/B,QAAI,QAAQ,KAAM,QAAO;AACzB,QAAI,SAAS,KAAM,QAAO;EAC5B;AAEA,SAAO,EAAE,GAAG,MAAM,GAAG,MAAM,OAAO,OAAO,MAAM,QAAQ,OAAO,KAAA;AAChE;AAOO,SAAS,UACd,aACA,OACA,OACA,UAAU,GACF;AACR,QAAM,SAAS,QAAQ,UAAU;AACjC,QAAM,SAAS,QAAQ,UAAU;AACjC,MAAI,UAAU,KAAK,UAAU,EAAG,QAAO;AACvC,MAAI,YAAY,UAAU,KAAK,YAAY,WAAW,EAAG,QAAO;AAChE,SAAO,KAAK,IAAI,SAAS,YAAY,OAAO,SAAS,YAAY,MAAM;AACzE;AAUO,SAAS,YACd,OACA,aACA,OACA,UAAU,GACgB;AAC1B,SAAO;IACL,IAAI,MAAM,IAAI,YAAY,KAAK,QAAQ;IACvC,IAAI,MAAM,IAAI,YAAY,KAAK,QAAQ;EAAA;AAE3C;AAMO,SAAS,mBACd,UACA,aACA,OACA,UAAU,GACJ;AACN,QAAM,EAAE,GAAG,EAAA,IAAM;IACf,EAAE,GAAG,SAAS,GAAG,GAAG,SAAS,EAAA;IAC7B;IACA;IACA;EAAA;AAEF,SAAO;IACL;IACA;IACA,OAAO,SAAS,QAAQ;IACxB,QAAQ,SAAS,SAAS;EAAA;AAE9B;AAQO,SAAS,gBAA4B;AAC1C,SAAO;IACL,WAAW,EAAE,MAAM,OAAO,cAAc,UAAA;IACxC,gBAAgB,EAAE,kBAAkB,WAAA;EAAW;AAEnD;ACnHO,IAAM,kBAAkB,IAAI;EACjC,MAAM;IACJ;IACA;EAAA,EACA,KAAK,GAAG;EACV,UAAU;IACR,aAAa;MACX,MAAM;MACN,OAAO;IAAA;EACT;EAEF,iBAAiB;IACf,aAAa;EAAA;AAEjB,CAAC;AAGM,IAAM,kBACX;AAMK,IAAM,uBACX;;;;ACgBK,IAAM,UAAgB;EAC3B,SAASA,SACP;IACE;IACA;IACA,QAAQ;IACR,SAAS;IACT,UAAU;IACV;IACA;IACA,GAAG;EAAA,GAEL,KACA;AACA,UAAM,eAAqB,aAA8B,IAAI;AAC7D,UAAM,aAAmB,aAAO,KAAK;AAErC,UAAM,SAAe,cAAQ,MAAM,cAAc,KAAK,GAAG,CAAC,KAAK,CAAC;AAChE,UAAM,QAAc;MAClB,MAAM,UAAU,QAAQ,OAAO,QAAQ,OAAO;MAC9C,CAAC,QAAQ,OAAO,QAAQ,OAAO;IAAA;AAGjC,UAAM,eAAqB;MACzB,MACE,YAAY,OACR,mBAAmB,UAAU,QAAQ,OAAO,OAAO,IACnD;MACN,CAAC,UAAU,QAAQ,OAAO,OAAO;IAAA;AAGnC,UAAM,EAAE,WAAW,eAAA,IAAmB,cAAA;AAEtC,UAAM,cAAoB;MACxB,CAAC,OAAe,UAA4C;AAC1D,eAAO;UACL,IAAI,QAAQ,WAAW,QAAQ,OAAO;UACtC,IAAI,QAAQ,WAAW,QAAQ,OAAO;QAAA;MAE1C;MACA,CAAC,OAAO,QAAQ,OAAO;IAAA;AAGzB,UAAM,qBAA2B;MAC/B,CAAC,MAA0C;AACzC,YAAI,CAAC,iBAAkB;AACvB,cAAM,KAAK,aAAa;AACxB,YAAI,CAAC,GAAI;AACT,cAAM,OAAO,GAAG,sBAAA;AAChB,cAAM,QAAQ,EAAE,UAAU,KAAK;AAC/B,cAAM,QAAQ,EAAE,UAAU,KAAK;AAC/B,yBAAiB,YAAY,OAAO,KAAK,CAAC;MAC5C;MACA,CAAC,kBAAkB,WAAW;IAAA;AAGhC,UAAM,oBAA0B;MAC9B,CAAC,MAA0C;AACzC,YAAI,CAAC,iBAAkB;AACvB,mBAAW,UAAU;AACnB,UAAE,cAAiC,kBAAkB,EAAE,SAAS;AAClE,2BAAmB,CAAC;MACtB;MACA,CAAC,kBAAkB,kBAAkB;IAAA;AAGvC,UAAM,oBAA0B;MAC9B,CAAC,MAA0C;AACzC,YAAI,CAAC,WAAW,QAAS;AACzB,2BAAmB,CAAC;MACtB;MACA,CAAC,kBAAkB;IAAA;AAGrB,UAAM,kBAAwB,kBAAY,MAAM;AAC9C,iBAAW,UAAU;IACvB,GAAG,CAAA,CAAE;AAEL,WACE;MAAC;MAAA;QACC,KAAK,CAAC,SAAS;AACb,uBAAa,UAAU;AACvB,cAAI,OAAO,QAAQ,YAAY;AAC7B,gBAAI,IAAI;UACV,WAAW,KAAK;AACd,gBAAI,UAAU;UAChB;QACF;QACA,WAAW;UACT,gBAAgB,EAAE,aAAa,mBAAmB,SAAS,QAAA,CAAS;UACpE;QAAA;QAEF,OAAO,EAAE,OAAO,QAAQ,UAAU,WAAA;QACjC,GAAG;QACH,GAAG;QACJ,eAAe,mBAAmB,oBAAoB;QACtD,eAAe,mBAAmB,oBAAoB;QACtD,aAAa,mBAAmB,kBAAkB;QACjD,GAAG;QAEH,UAAA;UAAA,MAAM,IAAI,CAAC,SAAS;AACnB,kBAAM,MAAM,YAAY,MAAM,QAAQ,OAAO,OAAO;AACpD,kBAAM,KAAK,KAAK,SAAS,KAAK;AAC9B,kBAAM,KAAK,KAAK,UAAU,KAAK;AAC/B,mBACE;cAAC;cAAA;gBAEC,WAAW;gBACX,OAAO;kBACL,UAAU;kBACV,MAAM,GAAG,IAAI,CAAC;kBACd,KAAK,GAAG,IAAI,CAAC;kBACb,OAAO,GAAG,KAAK,IAAI,GAAG,CAAC,CAAC;kBACxB,QAAQ,GAAG,KAAK,IAAI,GAAG,CAAC,CAAC;gBAAA;gBAE3B,eAAY;cAAA;cATP,KAAK;YAAA;UAYhB,CAAC;UACA,gBAAgB,QACf;YAAC;YAAA;cACC,WAAW;cACX,OAAO;gBACL,UAAU;gBACV,MAAM,GAAG,aAAa,CAAC;gBACvB,KAAK,GAAG,aAAa,CAAC;gBACtB,OAAO,GAAG,aAAa,KAAK;gBAC5B,QAAQ,GAAG,aAAa,MAAM;cAAA;cAEhC,eAAY;YAAA;UAAA;QACd;MAAA;IAAA;EAIR;AACF;",
+  "names": ["MiniMap"]
+}

package/dist/react-mobile-nav.js

@@ -0,0 +1,216 @@
+import {
+  Keys,
+  cn,
+  createKeyboardHandler,
+  cva,
+  devWarn,
+  generateId
+} from "./chunk-ZF3OHCGV.js";
+
+// ../react-mobile-nav/dist/index.js
+import * as React from "react";
+
+// ../mobile-nav/dist/index.js
+function createMobileNav(props = {}) {
+  const isOpen = props.open ?? false;
+  const id = props.id ?? generateId("rfr-mobile-nav");
+  const contentId = `${id}-content`;
+  const state = {
+    open: isOpen
+  };
+  const triggerProps = {
+    "aria-expanded": isOpen,
+    "aria-controls": contentId,
+    "aria-label": "Toggle menu"
+  };
+  const contentProps = {
+    id: contentId,
+    role: "menu",
+    "data-state": isOpen ? "open" : "closed"
+  };
+  function setOpen(value) {
+    state.open = value;
+    props.onOpenChange?.(value);
+  }
+  const toggle = () => setOpen(!state.open);
+  const open = () => setOpen(true);
+  const close = () => setOpen(false);
+  const keyboardHandlers = {
+    [Keys.Escape]: () => close()
+  };
+  return {
+    state,
+    triggerProps,
+    contentProps,
+    toggle,
+    open,
+    close,
+    keyboardHandlers
+  };
+}
+var mobileNavTokens = {
+  name: "mobile-nav",
+  tokens: {
+    bg: { variable: "--rfr-mobile-nav-bg", fallback: "hsl(var(--background))" },
+    fg: { variable: "--rfr-mobile-nav-fg", fallback: "hsl(var(--foreground))" },
+    border: { variable: "--rfr-mobile-nav-border", fallback: "hsl(var(--border))" }
+  }
+};
+var mobileNavVariants = cva({
+  base: "relative",
+  variants: {}
+});
+var mobileNavContentVariants = cva({
+  base: "w-full overflow-hidden border-b bg-background transition-all duration-200",
+  variants: {
+    state: {
+      open: "max-h-screen opacity-100 animate-in slide-in-from-top",
+      closed: "max-h-0 opacity-0 pointer-events-none animate-out slide-out-to-top"
+    }
+  },
+  defaultVariants: {
+    state: "closed"
+  }
+});
+var mobileNavTriggerVariants = cva({
+  base: "inline-flex items-center justify-center rounded-md p-2 transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+  variants: {}
+});
+var mobileNavLinkVariants = cva({
+  base: "block w-full px-4 py-2 text-sm transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2",
+  variants: {}
+});
+
+// ../react-mobile-nav/dist/index.js
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+var MobileNavContext = React.createContext(null);
+function useMobileNavContext() {
+  const ctx = React.useContext(MobileNavContext);
+  if (!ctx) {
+    devWarn(
+      "react-mobile-nav/compound-outside-provider",
+      "A MobileNav compound component was rendered outside of <MobileNav>. Wrap it in <MobileNav>."
+    );
+    throw new Error("MobileNav compound components must be used within <MobileNav>");
+  }
+  return ctx;
+}
+var MobileNav = React.forwardRef(
+  function MobileNav2({ open: controlledOpen, onOpenChange, defaultOpen = false, className, children, ...props }, ref) {
+    const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen);
+    const isControlled = controlledOpen !== void 0;
+    const open = isControlled ? controlledOpen : uncontrolledOpen;
+    const setOpen = React.useCallback(
+      (value) => {
+        if (!isControlled) {
+          setUncontrolledOpen(value);
+        }
+        onOpenChange?.(value);
+      },
+      [isControlled, onOpenChange]
+    );
+    const api = createMobileNav({ open, onOpenChange: setOpen, id: props.id });
+    const handleKeyDown = React.useMemo(
+      () => createKeyboardHandler(api.keyboardHandlers),
+      [open]
+    );
+    const contextValue = React.useMemo(
+      () => ({ open, setOpen, contentId: api.contentProps.id }),
+      [open, setOpen, api.contentProps.id]
+    );
+    return /* @__PURE__ */ jsx(MobileNavContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+      "nav",
+      {
+        ref,
+        className: cn(mobileNavVariants(), className),
+        onKeyDown: handleKeyDown,
+        ...props,
+        children
+      }
+    ) });
+  }
+);
+var MobileNavTrigger = React.forwardRef(
+  function MobileNavTrigger2({ className, children, ...props }, ref) {
+    const { open, setOpen, contentId } = useMobileNavContext();
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        type: "button",
+        "aria-expanded": open,
+        "aria-controls": contentId,
+        "aria-label": "Toggle menu",
+        className: cn(mobileNavTriggerVariants(), className),
+        onClick: () => setOpen(!open),
+        ...props,
+        children: children ?? /* @__PURE__ */ jsx(
+          "svg",
+          {
+            width: "24",
+            height: "24",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            "aria-hidden": "true",
+            children: open ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+              /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+            ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("line", { x1: "4", y1: "6", x2: "20", y2: "6" }),
+              /* @__PURE__ */ jsx("line", { x1: "4", y1: "12", x2: "20", y2: "12" }),
+              /* @__PURE__ */ jsx("line", { x1: "4", y1: "18", x2: "20", y2: "18" })
+            ] })
+          }
+        )
+      }
+    );
+  }
+);
+var MobileNavContent = React.forwardRef(
+  function MobileNavContent2({ className, children, ...props }, ref) {
+    const { open, contentId } = useMobileNavContext();
+    const state = open ? "open" : "closed";
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        id: contentId,
+        role: "menu",
+        "data-state": state,
+        className: cn(mobileNavContentVariants({ state }), className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+var MobileNavLink = React.forwardRef(
+  function MobileNavLink2({ className, children, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "a",
+      {
+        ref,
+        role: "menuitem",
+        className: cn(mobileNavLinkVariants(), className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+export {
+  MobileNav,
+  MobileNavContent,
+  MobileNavLink,
+  MobileNavTrigger,
+  mobileNavContentVariants,
+  mobileNavLinkVariants,
+  mobileNavTokens,
+  mobileNavTriggerVariants,
+  mobileNavVariants
+};
+//# sourceMappingURL=react-mobile-nav.js.map

package/dist/react-mobile-nav.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../mobile-nav/src/mobile-nav.ts", "../../mobile-nav/src/mobile-nav.styles.ts", "../../react-mobile-nav/src/mobile-nav.tsx"],
+  "sourcesContent": ["import type { AccessibilityProps, KeyboardHandlerMap } from '@refraction-ui/shared'\nimport { Keys, generateId } from '@refraction-ui/shared'\n\nexport interface MobileNavProps {\n  open?: boolean\n  onOpenChange?: (open: boolean) => void\n  id?: string\n}\n\nexport interface MobileNavState {\n  open: boolean\n}\n\nexport interface MobileNavAPI {\n  /** Current state */\n  state: MobileNavState\n  /** ARIA and interaction props for the trigger button */\n  triggerProps: Partial<AccessibilityProps> & Record<string, string | boolean | undefined>\n  /** ARIA and data attributes for the content panel */\n  contentProps: Partial<AccessibilityProps> & Record<string, string | boolean | undefined>\n  /** Toggle open state */\n  toggle: () => void\n  /** Open the nav */\n  open: () => void\n  /** Close the nav */\n  close: () => void\n  /** Keyboard handlers (Escape closes) */\n  keyboardHandlers: KeyboardHandlerMap\n}\n\nexport function createMobileNav(props: MobileNavProps = {}): MobileNavAPI {\n  const isOpen = props.open ?? false\n  const id = props.id ?? generateId('rfr-mobile-nav')\n  const contentId = `${id}-content`\n\n  const state: MobileNavState = {\n    open: isOpen,\n  }\n\n  const triggerProps: MobileNavAPI['triggerProps'] = {\n    'aria-expanded': isOpen,\n    'aria-controls': contentId,\n    'aria-label': 'Toggle menu',\n  }\n\n  const contentProps: MobileNavAPI['contentProps'] = {\n    id: contentId,\n    role: 'menu',\n    'data-state': isOpen ? 'open' : 'closed',\n  }\n\n  function setOpen(value: boolean) {\n    state.open = value\n    props.onOpenChange?.(value)\n  }\n\n  const toggle = () => setOpen(!state.open)\n  const open = () => setOpen(true)\n  const close = () => setOpen(false)\n\n  const keyboardHandlers: KeyboardHandlerMap = {\n    [Keys.Escape]: () => close(),\n  }\n\n  return {\n    state,\n    triggerProps,\n    contentProps,\n    toggle,\n    open,\n    close,\n    keyboardHandlers,\n  }\n}\n", "import { cva } from '@refraction-ui/shared'\nimport type { TokenContract } from '@refraction-ui/shared'\n\nexport const mobileNavTokens: TokenContract = {\n  name: 'mobile-nav',\n  tokens: {\n    bg: { variable: '--rfr-mobile-nav-bg', fallback: 'hsl(var(--background))' },\n    fg: { variable: '--rfr-mobile-nav-fg', fallback: 'hsl(var(--foreground))' },\n    border: { variable: '--rfr-mobile-nav-border', fallback: 'hsl(var(--border))' },\n  },\n}\n\nexport const mobileNavVariants = cva({\n  base: 'relative',\n  variants: {},\n})\n\nexport const mobileNavContentVariants = cva({\n  base: 'w-full overflow-hidden border-b bg-background transition-all duration-200',\n  variants: {\n    state: {\n      open: 'max-h-screen opacity-100 animate-in slide-in-from-top',\n      closed: 'max-h-0 opacity-0 pointer-events-none animate-out slide-out-to-top',\n    },\n  },\n  defaultVariants: {\n    state: 'closed',\n  },\n})\n\nexport const mobileNavTriggerVariants = cva({\n  base: 'inline-flex items-center justify-center rounded-md p-2 transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',\n  variants: {},\n})\n\nexport const mobileNavLinkVariants = cva({\n  base: 'block w-full px-4 py-2 text-sm transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2',\n  variants: {},\n})\n", "import * as React from 'react'\nimport {\n  createMobileNav,\n  mobileNavVariants,\n  mobileNavContentVariants,\n  mobileNavTriggerVariants,\n  mobileNavLinkVariants,\n} from '@refraction-ui/mobile-nav'\nimport { cn, createKeyboardHandler, devWarn } from '@refraction-ui/shared'\n\n/* ------------------------------------------------------------------ */\n/*  Context                                                            */\n/* ------------------------------------------------------------------ */\n\ninterface MobileNavContextValue {\n  open: boolean\n  setOpen: (open: boolean) => void\n  contentId: string\n}\n\nconst MobileNavContext = React.createContext<MobileNavContextValue | null>(null)\n\nfunction useMobileNavContext(): MobileNavContextValue {\n  const ctx = React.useContext(MobileNavContext)\n  if (!ctx) {\n    devWarn(\n      'react-mobile-nav/compound-outside-provider',\n      'A MobileNav compound component was rendered outside of <MobileNav>. Wrap it in <MobileNav>.',\n    )\n    throw new Error('MobileNav compound components must be used within <MobileNav>')\n  }\n  return ctx\n}\n\n/* ------------------------------------------------------------------ */\n/*  MobileNav (root)                                                   */\n/* ------------------------------------------------------------------ */\n\nexport interface MobileNavProps extends React.HTMLAttributes<HTMLElement> {\n  open?: boolean\n  onOpenChange?: (open: boolean) => void\n  defaultOpen?: boolean\n}\n\n/**\n * MobileNav — root wrapper that manages open/closed state via context.\n * Supports both controlled (open + onOpenChange) and uncontrolled (defaultOpen) usage.\n */\nexport const MobileNav = React.forwardRef<HTMLElement, MobileNavProps>(\n  function MobileNav({ open: controlledOpen, onOpenChange, defaultOpen = false, className, children, ...props }, ref) {\n    const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen)\n    const isControlled = controlledOpen !== undefined\n    const open = isControlled ? controlledOpen : uncontrolledOpen\n\n    const setOpen = React.useCallback(\n      (value: boolean) => {\n        if (!isControlled) {\n          setUncontrolledOpen(value)\n        }\n        onOpenChange?.(value)\n      },\n      [isControlled, onOpenChange],\n    )\n\n    const api = createMobileNav({ open, onOpenChange: setOpen, id: props.id })\n\n    const handleKeyDown = React.useMemo(\n      () => createKeyboardHandler(api.keyboardHandlers),\n      [open],\n    )\n\n    const contextValue = React.useMemo<MobileNavContextValue>(\n      () => ({ open, setOpen, contentId: api.contentProps.id as string }),\n      [open, setOpen, api.contentProps.id],\n    )\n\n    return (\n      <MobileNavContext.Provider value={contextValue}>\n        <nav\n          ref={ref}\n          className={cn(mobileNavVariants(), className)}\n          onKeyDown={handleKeyDown as unknown as React.KeyboardEventHandler}\n          {...props}\n        >\n          {children}\n        </nav>\n      </MobileNavContext.Provider>\n    )\n  },\n)\n\n/* ------------------------------------------------------------------ */\n/*  MobileNavTrigger                                                   */\n/* ------------------------------------------------------------------ */\n\nexport interface MobileNavTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {}\n\n/**\n * MobileNavTrigger — hamburger button that toggles the mobile nav.\n */\nexport const MobileNavTrigger = React.forwardRef<HTMLButtonElement, MobileNavTriggerProps>(\n  function MobileNavTrigger({ className, children, ...props }, ref) {\n    const { open, setOpen, contentId } = useMobileNavContext()\n\n    return (\n      <button\n        ref={ref}\n        type=\"button\"\n        aria-expanded={open}\n        aria-controls={contentId}\n        aria-label=\"Toggle menu\"\n        className={cn(mobileNavTriggerVariants(), className)}\n        onClick={() => setOpen(!open)}\n        {...props}\n      >\n        {children ?? (\n          <svg\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            strokeWidth=\"2\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            {open ? (\n              <>\n                <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n                <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n              </>\n            ) : (\n              <>\n                <line x1=\"4\" y1=\"6\" x2=\"20\" y2=\"6\" />\n                <line x1=\"4\" y1=\"12\" x2=\"20\" y2=\"12\" />\n                <line x1=\"4\" y1=\"18\" x2=\"20\" y2=\"18\" />\n              </>\n            )}\n          </svg>\n        )}\n      </button>\n    )\n  },\n)\n\n/* ------------------------------------------------------------------ */\n/*  MobileNavContent                                                   */\n/* ------------------------------------------------------------------ */\n\nexport interface MobileNavContentProps extends React.HTMLAttributes<HTMLDivElement> {}\n\n/**\n * MobileNavContent — the collapsible dropdown panel that holds nav links.\n */\nexport const MobileNavContent = React.forwardRef<HTMLDivElement, MobileNavContentProps>(\n  function MobileNavContent({ className, children, ...props }, ref) {\n    const { open, contentId } = useMobileNavContext()\n    const state = open ? 'open' : 'closed'\n\n    return (\n      <div\n        ref={ref}\n        id={contentId}\n        role=\"menu\"\n        data-state={state}\n        className={cn(mobileNavContentVariants({ state }), className)}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  },\n)\n\n/* ------------------------------------------------------------------ */\n/*  MobileNavLink                                                      */\n/* ------------------------------------------------------------------ */\n\nexport interface MobileNavLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {}\n\n/**\n * MobileNavLink — a styled link inside the mobile nav dropdown.\n */\nexport const MobileNavLink = React.forwardRef<HTMLAnchorElement, MobileNavLinkProps>(\n  function MobileNavLink({ className, children, ...props }, ref) {\n    return (\n      <a\n        ref={ref}\n        role=\"menuitem\"\n        className={cn(mobileNavLinkVariants(), className)}\n        {...props}\n      >\n        {children}\n      </a>\n    )\n  },\n)\n"],
+  "mappings": "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",
+  "names": ["MobileNav", "MobileNavTrigger", "MobileNavContent", "MobileNavLink"]
+}

package/dist/react-navbar.js

@@ -0,0 +1,96 @@
+import {
+  cn,
+  cva
+} from "./chunk-ZF3OHCGV.js";
+
+// ../react-navbar/dist/index.js
+import * as React from "react";
+
+// ../navbar/dist/index.js
+function createNavbar(props = {}) {
+  const { currentPath = "/" } = props;
+  function isActive(href) {
+    if (href === "/") return currentPath === "/";
+    return currentPath.startsWith(href);
+  }
+  function linkAriaProps(href) {
+    const active = isActive(href);
+    return active ? { "aria-current": "page" } : {};
+  }
+  return {
+    ariaProps: { role: "navigation", "aria-label": "Main navigation" },
+    isActive,
+    linkAriaProps
+  };
+}
+var navbarVariants = cva({
+  base: "sticky top-0 z-40 w-full border-b",
+  variants: {
+    variant: {
+      solid: "bg-background",
+      blur: "bg-background/80 backdrop-blur-md",
+      gradient: "bg-gradient-to-b from-background to-background/80 backdrop-blur-sm",
+      transparent: "bg-transparent border-transparent"
+    }
+  },
+  defaultVariants: {
+    variant: "blur"
+  }
+});
+var navLinkVariants = cva({
+  base: "text-sm font-medium transition-colors hover:text-foreground",
+  variants: {
+    active: {
+      true: "text-foreground",
+      false: "text-muted-foreground"
+    }
+  },
+  defaultVariants: {
+    active: "false"
+  }
+});
+
+// ../react-navbar/dist/index.js
+import { jsx, jsxs } from "react/jsx-runtime";
+var Navbar = React.forwardRef(
+  function Navbar2({
+    links = [],
+    currentPath,
+    variant,
+    logo,
+    actions,
+    className,
+    ...props
+  }, ref) {
+    const api = createNavbar({ links, currentPath, variant });
+    const classes = cn(navbarVariants({ variant }), className);
+    return /* @__PURE__ */ jsx("header", { ref, className: classes, ...props, children: /* @__PURE__ */ jsxs(
+      "nav",
+      {
+        className: "mx-auto flex h-14 max-w-7xl items-center justify-between px-4",
+        ...api.ariaProps,
+        children: [
+          logo && /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: logo }),
+          /* @__PURE__ */ jsx("ul", { className: "hidden items-center gap-6 md:flex", children: links.map((link) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+            "a",
+            {
+              href: link.href,
+              className: navLinkVariants({
+                active: api.isActive(link.href) ? "true" : "false"
+              }),
+              ...api.linkAriaProps(link.href),
+              children: link.label
+            }
+          ) }, link.href)) }),
+          actions && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: actions })
+        ]
+      }
+    ) });
+  }
+);
+export {
+  Navbar,
+  navLinkVariants,
+  navbarVariants
+};
+//# sourceMappingURL=react-navbar.js.map

package/dist/react-navbar.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../navbar/src/navbar.ts", "../../navbar/src/navbar.styles.ts", "../../react-navbar/src/navbar.tsx"],
+  "sourcesContent": ["export interface NavLink {\n  label: string\n  href: string\n  icon?: string\n}\n\nexport type NavbarVariant = 'solid' | 'blur' | 'gradient' | 'transparent'\n\nexport interface NavbarProps {\n  links?: NavLink[]\n  currentPath?: string\n  variant?: NavbarVariant\n}\n\nexport interface NavbarAPI {\n  ariaProps: Record<string, string>\n  isActive: (href: string) => boolean\n  linkAriaProps: (href: string) => Record<string, string>\n}\n\nexport function createNavbar(props: NavbarProps = {}): NavbarAPI {\n  const { currentPath = '/' } = props\n\n  function isActive(href: string): boolean {\n    if (href === '/') return currentPath === '/'\n    return currentPath.startsWith(href)\n  }\n\n  function linkAriaProps(href: string): Record<string, string> {\n    const active = isActive(href)\n    return active ? { 'aria-current': 'page' } : {}\n  }\n\n  return {\n    ariaProps: { role: 'navigation', 'aria-label': 'Main navigation' },\n    isActive,\n    linkAriaProps,\n  }\n}\n", "import { cva } from '@refraction-ui/shared'\n\nexport const navbarVariants = cva({\n  base: 'sticky top-0 z-40 w-full border-b',\n  variants: {\n    variant: {\n      solid: 'bg-background',\n      blur: 'bg-background/80 backdrop-blur-md',\n      gradient: 'bg-gradient-to-b from-background to-background/80 backdrop-blur-sm',\n      transparent: 'bg-transparent border-transparent',\n    },\n  },\n  defaultVariants: {\n    variant: 'blur',\n  },\n})\n\nexport const navLinkVariants = cva({\n  base: 'text-sm font-medium transition-colors hover:text-foreground',\n  variants: {\n    active: {\n      true: 'text-foreground',\n      false: 'text-muted-foreground',\n    },\n  },\n  defaultVariants: {\n    active: 'false',\n  },\n})\n", "import * as React from 'react'\nimport {\n  createNavbar,\n  navbarVariants,\n  navLinkVariants,\n  type NavLink,\n  type NavbarVariant,\n} from '@refraction-ui/navbar'\nimport { cn } from '@refraction-ui/shared'\n\nexport interface NavbarProps extends React.HTMLAttributes<HTMLElement> {\n  /** Navigation links */\n  links?: NavLink[]\n  /** Current pathname for active state */\n  currentPath?: string\n  /** Visual variant */\n  variant?: NavbarVariant\n  /** Logo or brand slot */\n  logo?: React.ReactNode\n  /** Right-side actions slot */\n  actions?: React.ReactNode\n}\n\n/**\n * Navbar component — renders a sticky header with navigation links.\n *\n * Uses the headless @refraction-ui/navbar core for state and ARIA attributes.\n * Hidden on mobile (links use md:flex).\n */\nexport const Navbar = React.forwardRef<HTMLElement, NavbarProps>(\n  function Navbar(\n    {\n      links = [],\n      currentPath,\n      variant,\n      logo,\n      actions,\n      className,\n      ...props\n    },\n    ref,\n  ) {\n    const api = createNavbar({ links, currentPath, variant })\n    const classes = cn(navbarVariants({ variant }), className)\n\n    return (\n      <header ref={ref} className={classes} {...props}>\n        <nav\n          className=\"mx-auto flex h-14 max-w-7xl items-center justify-between px-4\"\n          {...api.ariaProps}\n        >\n          {logo && <div className=\"flex-shrink-0\">{logo}</div>}\n          <ul className=\"hidden items-center gap-6 md:flex\">\n            {links.map((link) => (\n              <li key={link.href}>\n                <a\n                  href={link.href}\n                  className={navLinkVariants({\n                    active: api.isActive(link.href) ? 'true' : 'false',\n                  })}\n                  {...api.linkAriaProps(link.href)}\n                >\n                  {link.label}\n                </a>\n              </li>\n            ))}\n          </ul>\n          {actions && <div className=\"flex items-center gap-2\">{actions}</div>}\n        </nav>\n      </header>\n    )\n  },\n)\n"],
+  "mappings": ";;;;;;;;;AAoBO,SAAS,aAAa,QAAqB,CAAA,GAAe;AAC/D,QAAM,EAAE,cAAc,IAAA,IAAQ;AAE9B,WAAS,SAAS,MAAuB;AACvC,QAAI,SAAS,IAAK,QAAO,gBAAgB;AACzC,WAAO,YAAY,WAAW,IAAI;EACpC;AAEA,WAAS,cAAc,MAAsC;AAC3D,UAAM,SAAS,SAAS,IAAI;AAC5B,WAAO,SAAS,EAAE,gBAAgB,OAAA,IAAW,CAAA;EAC/C;AAEA,SAAO;IACL,WAAW,EAAE,MAAM,cAAc,cAAc,kBAAA;IAC/C;IACA;EAAA;AAEJ;ACpCO,IAAM,iBAAiB,IAAI;EAChC,MAAM;EACN,UAAU;IACR,SAAS;MACP,OAAO;MACP,MAAM;MACN,UAAU;MACV,aAAa;IAAA;EACf;EAEF,iBAAiB;IACf,SAAS;EAAA;AAEb,CAAC;AAEM,IAAM,kBAAkB,IAAI;EACjC,MAAM;EACN,UAAU;IACR,QAAQ;MACN,MAAM;MACN,OAAO;IAAA;EACT;EAEF,iBAAiB;IACf,QAAQ;EAAA;AAEZ,CAAC;;;;ACCM,IAAM,SAAe;EAC1B,SAASA,QACP;IACE,QAAQ,CAAA;IACR;IACA;IACA;IACA;IACA;IACA,GAAG;EAAA,GAEL,KACA;AACA,UAAM,MAAM,aAAa,EAAE,OAAO,aAAa,QAAA,CAAS;AACxD,UAAM,UAAU,GAAG,eAAe,EAAE,QAAA,CAAS,GAAG,SAAS;AAEzD,WAAA,oBACG,UAAA,EAAO,KAAU,WAAW,SAAU,GAAG,OACxC,UAAA;MAAC;MAAA;QACC,WAAU;QACT,GAAG,IAAI;QAEP,UAAA;UAAA,QAAQ,oBAAC,OAAA,EAAI,WAAU,iBAAiB,UAAA,KAAA,CAAK;UAC9C,oBAAC,MAAA,EAAG,WAAU,qCACX,UAAA,MAAM,IAAI,CAAC,SACV,oBAAC,MAAA,EACC,UAAA;YAAC;YAAA;cACC,MAAM,KAAK;cACX,WAAW,gBAAgB;gBACzB,QAAQ,IAAI,SAAS,KAAK,IAAI,IAAI,SAAS;cAAA,CAC5C;cACA,GAAG,IAAI,cAAc,KAAK,IAAI;cAE9B,UAAA,KAAK;YAAA;UAAA,EACR,GATO,KAAK,IAUd,CACD,EAAA,CACH;UACC,WAAW,oBAAC,OAAA,EAAI,WAAU,2BAA2B,UAAA,QAAA,CAAQ;QAAA;MAAA;IAAA,EAChE,CACF;EAEJ;AACF;",
+  "names": ["Navbar"]
+}

package/dist/react-numbered-steps.js

@@ -0,0 +1,67 @@
+import {
+  cn,
+  cva
+} from "./chunk-ZF3OHCGV.js";
+
+// ../react-numbered-steps/dist/index.js
+import * as React from "react";
+
+// ../numbered-steps/dist/index.js
+function padOrdinal(n) {
+  return String(n).padStart(2, "0");
+}
+function stepColumns(count) {
+  return Math.min(5, Math.max(2, count));
+}
+function createNumberedSteps() {
+  const ariaProps = { role: "list" };
+  const dataAttributes = {
+    "data-component": "numbered-steps"
+  };
+  return { ariaProps, dataAttributes };
+}
+var numberedStepsVariants = cva({
+  base: "grid gap-6",
+  variants: {
+    columns: {
+      "2": "grid-cols-2",
+      "3": "grid-cols-3",
+      "4": "grid-cols-4",
+      "5": "grid-cols-5"
+    }
+  },
+  defaultVariants: {
+    columns: "3"
+  }
+});
+var numberedStepsItemClass = "rounded-xl border border-border bg-card p-5";
+var numberedStepsOrdinalClass = "font-mono text-sm text-primary";
+var numberedStepsTitleClass = "mt-2 text-sm font-bold text-foreground";
+var numberedStepsBodyClass = "mt-1 text-xs text-muted-foreground leading-relaxed";
+
+// ../react-numbered-steps/dist/index.js
+import { jsx, jsxs } from "react/jsx-runtime";
+var NumberedSteps = React.forwardRef(function NumberedSteps2({ items, columns, className, ...props }, ref) {
+  const cols = columns ?? stepColumns(items.length);
+  const { ariaProps, dataAttributes } = createNumberedSteps();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(numberedStepsVariants(), className),
+      style: { gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))` },
+      ...ariaProps,
+      ...dataAttributes,
+      ...props,
+      children: items.map((item, index) => /* @__PURE__ */ jsxs("div", { role: "listitem", className: numberedStepsItemClass, children: [
+        /* @__PURE__ */ jsx("span", { className: numberedStepsOrdinalClass, children: padOrdinal(index + 1) }),
+        /* @__PURE__ */ jsx("p", { className: numberedStepsTitleClass, children: item.title }),
+        /* @__PURE__ */ jsx("p", { className: numberedStepsBodyClass, children: item.body })
+      ] }, index))
+    }
+  );
+});
+export {
+  NumberedSteps
+};
+//# sourceMappingURL=react-numbered-steps.js.map