@refraction-ui/react 0.19.1 → 0.20.0

package/dist/react-status-indicator.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../status-indicator/src/status-indicator.ts", "../../status-indicator/src/status-indicator.styles.ts", "../../react-status-indicator/src/status-indicator.tsx"],
+  "sourcesContent": ["export type StatusType = 'success' | 'error' | 'warning' | 'info' | 'pending' | 'neutral'\n\nexport interface StatusProps {\n  /** The status type */\n  type: StatusType\n  /** Label to display alongside the status dot */\n  label?: string\n  /** Whether to show a pulse animation (primarily for 'pending' status) */\n  pulse?: boolean\n}\n\nexport interface StatusAPI {\n  /** ARIA attributes for the status indicator */\n  ariaProps: Record<string, string | number | boolean>\n  /** The status type */\n  type: StatusType\n  /** The display label */\n  label: string\n  /** Whether to show pulse animation */\n  pulse: boolean\n  /** CSS color class name for the dot */\n  color: string\n}\n\nconst STATUS_INDICATOR_COLORS: Record<StatusType, string> = {\n  success: 'green',\n  error: 'red',\n  warning: 'yellow',\n  info: 'blue',\n  pending: 'orange',\n  neutral: 'gray',\n}\n\nconst STATUS_INDICATOR_LABELS: Record<StatusType, string> = {\n  success: 'Success',\n  error: 'Error',\n  warning: 'Warning',\n  info: 'Info',\n  pending: 'Pending',\n  neutral: 'Neutral',\n}\n\nexport {\n  STATUS_INDICATOR_COLORS as STATUS_COLORS,\n  STATUS_INDICATOR_LABELS as STATUS_LABELS,\n}\n\nexport function createStatusIndicator(props: StatusProps): StatusAPI {\n  const { type, label: labelOverride, pulse: pulseOverride } = props\n\n  const color = STATUS_INDICATOR_COLORS[type]\n  const label = labelOverride ?? STATUS_INDICATOR_LABELS[type]\n  const pulse = pulseOverride ?? (type === 'pending')\n\n  const ariaProps: Record<string, string | number | boolean> = {\n    role: 'status',\n    'aria-label': label,\n  }\n\n  return {\n    ariaProps,\n    type,\n    label,\n    pulse,\n    color,\n  }\n}\n", "import { cva } from '@refraction-ui/shared'\n\nexport const statusContainerStyles =\n  'inline-flex items-center gap-1.5'\n\nexport const statusDotVariants = cva({\n  base: 'inline-block h-2 w-2 rounded-full',\n  variants: {\n    type: {\n      success: 'bg-success',\n      error: 'bg-destructive',\n      warning: 'bg-warning',\n      info: 'bg-info',\n      pending: 'bg-orange-500',\n      neutral: 'bg-gray-400',\n    },\n  },\n  defaultVariants: {\n    type: 'neutral',\n  },\n})\n\nexport const statusPulseVariants = cva({\n  base: 'animate-pulse inline-block h-2 w-2 rounded-full',\n  variants: {\n    type: {\n      success: 'bg-success',\n      error: 'bg-destructive',\n      warning: 'bg-warning',\n      info: 'bg-info',\n      pending: 'bg-orange-500',\n      neutral: 'bg-gray-400',\n    },\n  },\n  defaultVariants: {\n    type: 'pending',\n  },\n})\n\nexport const statusLabelStyles =\n  'text-sm text-muted-foreground'\n", "import * as React from 'react'\nimport {\n  createStatusIndicator,\n  statusContainerStyles,\n  statusDotVariants,\n  statusPulseVariants,\n  statusLabelStyles,\n  type StatusType,\n} from '@refraction-ui/status-indicator'\nimport { cn } from '@refraction-ui/shared'\n\nexport interface StatusIndicatorProps {\n  type: StatusType\n  /** Explicit text label. Takes precedence over `children`. */\n  label?: string\n  /** Composable label content. Used when `label` is omitted. */\n  children?: React.ReactNode\n  pulse?: boolean\n  showLabel?: boolean\n  className?: string\n}\n\n/** Best ARIA-label: explicit prop wins, then string children, else headless default. */\nfunction deriveAriaLabel(\n  label: string | undefined,\n  children: React.ReactNode,\n  fallback: string,\n): string {\n  if (label) return label\n  if (typeof children === 'string' || typeof children === 'number') {\n    return String(children)\n  }\n  return fallback\n}\n\nexport const StatusIndicator = React.forwardRef<HTMLSpanElement, StatusIndicatorProps>(\n  function StatusIndicator({ type, label, children, pulse, showLabel = true, className }, ref) {\n  const api = createStatusIndicator({ type, label, pulse })\n  const ariaLabel = deriveAriaLabel(label, children, api.label)\n  const visibleLabel: React.ReactNode = label ?? children ?? api.label\n\n  const dotClassName = api.pulse\n    ? statusPulseVariants({ type })\n    : statusDotVariants({ type })\n\n  return (\n    <span\n      ref={ref}\n      {...api.ariaProps}\n      aria-label={ariaLabel}\n      className={cn(statusContainerStyles, className)}\n    >\n      <span className={dotClassName} />\n      {showLabel && <span className={statusLabelStyles}>{visibleLabel}</span>}\n    </span>\n  )\n  },\n)\n"],
+  "mappings": ";;;;;;;;;AAwBA,IAAM,0BAAsD;EAC1D,SAAS;EACT,OAAO;EACP,SAAS;EACT,MAAM;EACN,SAAS;EACT,SAAS;AACX;AAEA,IAAM,0BAAsD;EAC1D,SAAS;EACT,OAAO;EACP,SAAS;EACT,MAAM;EACN,SAAS;EACT,SAAS;AACX;AAOO,SAAS,sBAAsB,OAA+B;AACnE,QAAM,EAAE,MAAM,OAAO,eAAe,OAAO,cAAA,IAAkB;AAE7D,QAAM,QAAQ,wBAAwB,IAAI;AAC1C,QAAM,QAAQ,iBAAiB,wBAAwB,IAAI;AAC3D,QAAM,QAAQ,iBAAkB,SAAS;AAEzC,QAAM,YAAuD;IAC3D,MAAM;IACN,cAAc;EAAA;AAGhB,SAAO;IACL;IACA;IACA;IACA;IACA;EAAA;AAEJ;AChEO,IAAM,wBACX;AAEK,IAAM,oBAAoB,IAAI;EACnC,MAAM;EACN,UAAU;IACR,MAAM;MACJ,SAAS;MACT,OAAO;MACP,SAAS;MACT,MAAM;MACN,SAAS;MACT,SAAS;IAAA;EACX;EAEF,iBAAiB;IACf,MAAM;EAAA;AAEV,CAAC;AAEM,IAAM,sBAAsB,IAAI;EACrC,MAAM;EACN,UAAU;IACR,MAAM;MACJ,SAAS;MACT,OAAO;MACP,SAAS;MACT,MAAM;MACN,SAAS;MACT,SAAS;IAAA;EACX;EAEF,iBAAiB;IACf,MAAM;EAAA;AAEV,CAAC;AAEM,IAAM,oBACX;;;;ACjBF,SAAS,gBACP,OACA,UACA,UACQ;AACR,MAAI,MAAO,QAAO;AAClB,MAAI,OAAO,aAAa,YAAY,OAAO,aAAa,UAAU;AAChE,WAAO,OAAO,QAAQ;EACxB;AACA,SAAO;AACT;AAEO,IAAM,kBAAwB;EACnC,SAASA,iBAAgB,EAAE,MAAM,OAAO,UAAU,OAAO,YAAY,MAAM,UAAA,GAAa,KAAK;AAC7F,UAAM,MAAM,sBAAsB,EAAE,MAAM,OAAO,MAAA,CAAO;AACxD,UAAM,YAAY,gBAAgB,OAAO,UAAU,IAAI,KAAK;AAC5D,UAAM,eAAgC,SAAS,YAAY,IAAI;AAE/D,UAAM,eAAe,IAAI,QACrB,oBAAoB,EAAE,KAAA,CAAM,IAC5B,kBAAkB,EAAE,KAAA,CAAM;AAE9B,WACE;MAAC;MAAA;QACC;QACC,GAAG,IAAI;QACR,cAAY;QACZ,WAAW,GAAG,uBAAuB,SAAS;QAE9C,UAAA;UAAA,oBAAC,QAAA,EAAK,WAAW,aAAA,CAAc;UAC9B,aAAa,oBAAC,QAAA,EAAK,WAAW,mBAAoB,UAAA,aAAA,CAAa;QAAA;MAAA;IAAA;EAGpE;AACF;",
+  "names": ["StatusIndicator"]
+}

package/dist/react-steps.js

@@ -0,0 +1,167 @@
+import {
+  cn,
+  cva
+} from "./chunk-ZF3OHCGV.js";
+
+// ../react-steps/dist/index.js
+import * as React from "react";
+
+// ../steps/dist/index.js
+function createSteps() {
+  return { dataAttributes: { "data-slot": "steps" } };
+}
+function createStep() {
+  return { dataAttributes: { "data-slot": "step" } };
+}
+function createStepIndicator() {
+  return { dataAttributes: { "data-slot": "step-indicator" } };
+}
+function createStepContent() {
+  return { dataAttributes: { "data-slot": "step-content" } };
+}
+function createStepTitle() {
+  return { dataAttributes: { "data-slot": "step-title" } };
+}
+function createStepDescription() {
+  return { dataAttributes: { "data-slot": "step-description" } };
+}
+var stepsVariants = cva({
+  base: "flex flex-col gap-0",
+  variants: {
+    orientation: {
+      vertical: "flex-col",
+      horizontal: "flex-row"
+    }
+  },
+  defaultVariants: {
+    orientation: "vertical"
+  }
+});
+var stepVariants = cva({
+  base: "flex gap-3",
+  variants: {
+    status: {
+      completed: "text-foreground",
+      active: "text-foreground",
+      upcoming: "text-muted-foreground"
+    }
+  },
+  defaultVariants: {
+    status: "upcoming"
+  }
+});
+var stepIndicatorVariants = cva({
+  base: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full border-2 text-sm font-semibold",
+  variants: {
+    status: {
+      completed: "border-primary bg-primary text-primary-foreground",
+      active: "border-primary bg-background text-primary",
+      upcoming: "border-muted bg-background text-muted-foreground"
+    }
+  },
+  defaultVariants: {
+    status: "upcoming"
+  }
+});
+var stepTitleVariants = cva({
+  base: "font-semibold leading-none tracking-tight"
+});
+var stepDescriptionVariants = cva({
+  base: "text-sm text-muted-foreground mt-1"
+});
+
+// ../react-steps/dist/index.js
+import { jsx } from "react/jsx-runtime";
+var Steps = React.forwardRef(
+  function Steps2({ className, orientation, ...props }, ref) {
+    const api = createSteps();
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(stepsVariants({ orientation }), className),
+        ...api.dataAttributes,
+        ...props
+      }
+    );
+  }
+);
+var Step = React.forwardRef(
+  function Step2({ className, status, ...props }, ref) {
+    const api = createStep();
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(stepVariants({ status }), className),
+        ...api.dataAttributes,
+        ...props
+      }
+    );
+  }
+);
+var StepIndicator = React.forwardRef(
+  function StepIndicator2({ className, status, ...props }, ref) {
+    const api = createStepIndicator();
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(stepIndicatorVariants({ status }), className),
+        ...api.dataAttributes,
+        ...props
+      }
+    );
+  }
+);
+var StepContent = React.forwardRef(
+  function StepContent2({ className, ...props }, ref) {
+    const api = createStepContent();
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn("flex-1 pb-8", className),
+        ...api.dataAttributes,
+        ...props
+      }
+    );
+  }
+);
+var StepTitle = React.forwardRef(
+  function StepTitle2({ className, ...props }, ref) {
+    const api = createStepTitle();
+    return /* @__PURE__ */ jsx(
+      "h4",
+      {
+        ref,
+        className: cn(stepTitleVariants(), className),
+        ...api.dataAttributes,
+        ...props
+      }
+    );
+  }
+);
+var StepDescription = React.forwardRef(
+  function StepDescription2({ className, ...props }, ref) {
+    const api = createStepDescription();
+    return /* @__PURE__ */ jsx(
+      "p",
+      {
+        ref,
+        className: cn(stepDescriptionVariants(), className),
+        ...api.dataAttributes,
+        ...props
+      }
+    );
+  }
+);
+export {
+  Step,
+  StepContent,
+  StepDescription,
+  StepIndicator,
+  StepTitle,
+  Steps
+};
+//# sourceMappingURL=react-steps.js.map

package/dist/react-steps.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../steps/src/steps.ts", "../../react-steps/src/steps.tsx"],
+  "sourcesContent": ["import { cva } from '@refraction-ui/shared'\n\nexport interface StepsAPI {\n  dataAttributes: Record<string, string>\n}\n\nexport function createSteps(): StepsAPI {\n  return { dataAttributes: { 'data-slot': 'steps' } }\n}\n\nexport function createStep(): StepsAPI {\n  return { dataAttributes: { 'data-slot': 'step' } }\n}\n\nexport function createStepIndicator(): StepsAPI {\n  return { dataAttributes: { 'data-slot': 'step-indicator' } }\n}\n\nexport function createStepContent(): StepsAPI {\n  return { dataAttributes: { 'data-slot': 'step-content' } }\n}\n\nexport function createStepTitle(): StepsAPI {\n  return { dataAttributes: { 'data-slot': 'step-title' } }\n}\n\nexport function createStepDescription(): StepsAPI {\n  return { dataAttributes: { 'data-slot': 'step-description' } }\n}\n\nexport const stepsVariants = cva({\n  base: 'flex flex-col gap-0',\n  variants: {\n    orientation: {\n      vertical: 'flex-col',\n      horizontal: 'flex-row',\n    },\n  },\n  defaultVariants: {\n    orientation: 'vertical',\n  },\n})\n\nexport const stepVariants = cva({\n  base: 'flex gap-3',\n  variants: {\n    status: {\n      completed: 'text-foreground',\n      active: 'text-foreground',\n      upcoming: 'text-muted-foreground',\n    },\n  },\n  defaultVariants: {\n    status: 'upcoming',\n  },\n})\n\nexport const stepIndicatorVariants = cva({\n  base: 'flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full border-2 text-sm font-semibold',\n  variants: {\n    status: {\n      completed: 'border-primary bg-primary text-primary-foreground',\n      active: 'border-primary bg-background text-primary',\n      upcoming: 'border-muted bg-background text-muted-foreground',\n    },\n  },\n  defaultVariants: {\n    status: 'upcoming',\n  },\n})\n\nexport const stepTitleVariants = cva({\n  base: 'font-semibold leading-none tracking-tight',\n})\n\nexport const stepDescriptionVariants = cva({\n  base: 'text-sm text-muted-foreground mt-1',\n})", "import * as React from 'react'\nimport {\n  createSteps,\n  createStep,\n  createStepIndicator,\n  createStepContent,\n  createStepTitle,\n  createStepDescription,\n  stepsVariants,\n  stepVariants,\n  stepIndicatorVariants,\n  stepTitleVariants,\n  stepDescriptionVariants,\n} from '@refraction-ui/steps'\nimport { cn } from '@refraction-ui/shared'\n\nexport interface StepsProps extends React.HTMLAttributes<HTMLDivElement> {\n  orientation?: 'vertical' | 'horizontal'\n}\n\nexport const Steps = React.forwardRef<HTMLDivElement, StepsProps>(\n  function Steps({ className, orientation, ...props }, ref) {\n    const api = createSteps()\n    return (\n      <div\n        ref={ref}\n        className={cn(stepsVariants({ orientation }), className)}\n        {...api.dataAttributes}\n        {...props}\n      />\n    )\n  },\n)\n\nexport interface StepProps extends React.HTMLAttributes<HTMLDivElement> {\n  status?: 'completed' | 'active' | 'upcoming'\n}\n\nexport const Step = React.forwardRef<HTMLDivElement, StepProps>(\n  function Step({ className, status, ...props }, ref) {\n    const api = createStep()\n    return (\n      <div\n        ref={ref}\n        className={cn(stepVariants({ status }), className)}\n        {...api.dataAttributes}\n        {...props}\n      />\n    )\n  },\n)\n\nexport interface StepIndicatorProps extends React.HTMLAttributes<HTMLDivElement> {\n  status?: 'completed' | 'active' | 'upcoming'\n}\n\nexport const StepIndicator = React.forwardRef<HTMLDivElement, StepIndicatorProps>(\n  function StepIndicator({ className, status, ...props }, ref) {\n    const api = createStepIndicator()\n    return (\n      <div\n        ref={ref}\n        className={cn(stepIndicatorVariants({ status }), className)}\n        {...api.dataAttributes}\n        {...props}\n      />\n    )\n  },\n)\n\nexport const StepContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  function StepContent({ className, ...props }, ref) {\n    const api = createStepContent()\n    return (\n      <div\n        ref={ref}\n        className={cn('flex-1 pb-8', className)}\n        {...api.dataAttributes}\n        {...props}\n      />\n    )\n  },\n)\n\nexport const StepTitle = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(\n  function StepTitle({ className, ...props }, ref) {\n    const api = createStepTitle()\n    return (\n      <h4\n        ref={ref}\n        className={cn(stepTitleVariants(), className)}\n        {...api.dataAttributes}\n        {...props}\n      />\n    )\n  },\n)\n\nexport const StepDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(\n  function StepDescription({ className, ...props }, ref) {\n    const api = createStepDescription()\n    return (\n      <p\n        ref={ref}\n        className={cn(stepDescriptionVariants(), className)}\n        {...api.dataAttributes}\n        {...props}\n      />\n    )\n  },\n)\n"],
+  "mappings": "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",
+  "names": ["Steps", "Step", "StepIndicator", "StepContent", "StepTitle", "StepDescription"]
+}

package/dist/react-sticky-note.js

@@ -0,0 +1,131 @@
+import {
+  cn,
+  cva
+} from "./chunk-ZF3OHCGV.js";
+
+// ../react-sticky-note/dist/index.js
+import * as React from "react";
+
+// ../sticky-note/dist/index.js
+var STICKY_NOTE_COLORS = [
+  "yellow",
+  "pink",
+  "blue",
+  "green",
+  "purple",
+  "orange"
+];
+function nextStickyColor(color) {
+  const index = STICKY_NOTE_COLORS.indexOf(color);
+  const next = (index + 1) % STICKY_NOTE_COLORS.length;
+  return STICKY_NOTE_COLORS[next];
+}
+function createStickyNote(options) {
+  return {
+    dataAttributes: { "data-color": options.color },
+    ariaProps: { role: "group" }
+  };
+}
+var stickyNoteVariants = cva({
+  base: [
+    "relative inline-flex flex-col gap-2 rounded-md p-4",
+    "shadow-md",
+    "min-w-[160px] min-h-[120px]"
+  ].join(" "),
+  variants: {
+    color: {
+      yellow: "bg-yellow-100 text-yellow-900",
+      pink: "bg-pink-100 text-pink-900",
+      blue: "bg-blue-100 text-blue-900",
+      green: "bg-green-100 text-green-900",
+      purple: "bg-purple-100 text-purple-900",
+      orange: "bg-orange-100 text-orange-900"
+    }
+  },
+  defaultVariants: {
+    color: "yellow"
+  }
+});
+var stickyNoteTextClass = "flex-1 w-full resize-none bg-transparent text-sm leading-relaxed placeholder:opacity-60 outline-none";
+var stickyNoteAuthorClass = "mt-auto text-xs font-medium opacity-70 truncate";
+
+// ../react-sticky-note/dist/index.js
+import { jsxs, jsx } from "react/jsx-runtime";
+var StickyNote = React.forwardRef(
+  function StickyNote2({
+    color = "yellow",
+    text,
+    onTextChange,
+    author,
+    x,
+    y,
+    draggable = false,
+    onMove,
+    className,
+    style,
+    children,
+    ...props
+  }, ref) {
+    const { ariaProps, dataAttributes } = createStickyNote({ color });
+    const dragOrigin = React.useRef(null);
+    const positionStyle = x !== void 0 && y !== void 0 ? { position: "absolute", left: x, top: y } : {};
+    const handlePointerDown = React.useCallback(
+      (e) => {
+        if (!draggable || !onMove) return;
+        if (e.button !== 0) return;
+        e.currentTarget.setPointerCapture(e.pointerId);
+        dragOrigin.current = {
+          pointerX: e.clientX,
+          pointerY: e.clientY,
+          noteX: x ?? 0,
+          noteY: y ?? 0
+        };
+      },
+      [draggable, onMove, x, y]
+    );
+    const handlePointerMove = React.useCallback(
+      (e) => {
+        if (!dragOrigin.current || !onMove) return;
+        const dx = e.clientX - dragOrigin.current.pointerX;
+        const dy = e.clientY - dragOrigin.current.pointerY;
+        onMove({ x: dragOrigin.current.noteX + dx, y: dragOrigin.current.noteY + dy });
+      },
+      [onMove]
+    );
+    const handlePointerUp = React.useCallback(() => {
+      dragOrigin.current = null;
+    }, []);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(stickyNoteVariants({ color }), className),
+        style: { ...positionStyle, ...style },
+        ...ariaProps,
+        ...dataAttributes,
+        onPointerDown: draggable && onMove ? handlePointerDown : void 0,
+        onPointerMove: draggable && onMove ? handlePointerMove : void 0,
+        onPointerUp: draggable && onMove ? handlePointerUp : void 0,
+        ...props,
+        children: [
+          onTextChange != null ? /* @__PURE__ */ jsx(
+            "textarea",
+            {
+              className: stickyNoteTextClass,
+              value: text ?? "",
+              onChange: (e) => onTextChange(e.target.value),
+              placeholder: "Type a note\u2026"
+            }
+          ) : /* @__PURE__ */ jsx("p", { className: `${stickyNoteTextClass} whitespace-pre-wrap`, children: text ?? children }),
+          author != null && /* @__PURE__ */ jsx("span", { className: stickyNoteAuthorClass, children: author })
+        ]
+      }
+    );
+  }
+);
+export {
+  STICKY_NOTE_COLORS,
+  StickyNote,
+  nextStickyColor
+};
+//# sourceMappingURL=react-sticky-note.js.map

package/dist/react-sticky-note.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../sticky-note/src/sticky-note.ts", "../../sticky-note/src/sticky-note.styles.ts", "../../react-sticky-note/src/sticky-note.tsx"],
+  "sourcesContent": ["/** The available color variants for a sticky note. */\nexport type StickyNoteColor = 'yellow' | 'pink' | 'blue' | 'green' | 'purple' | 'orange'\n\n/** Ordered list of all sticky note colors — used for cycling and iteration. */\nexport const STICKY_NOTE_COLORS: StickyNoteColor[] = [\n  'yellow',\n  'pink',\n  'blue',\n  'green',\n  'purple',\n  'orange',\n]\n\n/**\n * Returns the next color in the cycle. Wraps from the last color back to the\n * first. Useful for \"add note\" flows that auto-assign colors in sequence.\n */\nexport function nextStickyColor(color: StickyNoteColor): StickyNoteColor {\n  const index = STICKY_NOTE_COLORS.indexOf(color)\n  const next = (index + 1) % STICKY_NOTE_COLORS.length\n  return STICKY_NOTE_COLORS[next]\n}\n\nexport interface CreateStickyNoteOptions {\n  /** Color of the note. */\n  color: StickyNoteColor\n}\n\nexport interface StickyNoteAPI {\n  /** Data attributes for styling hooks; spread onto the note container. */\n  dataAttributes: { 'data-color': StickyNoteColor }\n  /** ARIA props for the note container. */\n  ariaProps: { role: 'group' }\n}\n\n/**\n * Build the framework-agnostic props for a sticky note container.\n *\n * Returns `role=\"group\"` plus the `data-color` attribute that adapters use\n * as a styling hook. Logic is pure and SSR-safe — no Math.random, no Date.\n */\nexport function createStickyNote(options: CreateStickyNoteOptions): StickyNoteAPI {\n  return {\n    dataAttributes: { 'data-color': options.color },\n    ariaProps: { role: 'group' },\n  }\n}\n", "import { cva } from '@refraction-ui/shared'\n\n/**\n * Note container with color variant.\n *\n * Sticky notes are intrinsically colorful — an approved exception to the\n * semantic-token-only rule. Each color maps to a soft tint background with a\n * readable dark text.\n */\nexport const stickyNoteVariants = cva({\n  base: [\n    'relative inline-flex flex-col gap-2 rounded-md p-4',\n    'shadow-md',\n    'min-w-[160px] min-h-[120px]',\n  ].join(' '),\n  variants: {\n    color: {\n      yellow: 'bg-yellow-100 text-yellow-900',\n      pink: 'bg-pink-100 text-pink-900',\n      blue: 'bg-blue-100 text-blue-900',\n      green: 'bg-green-100 text-green-900',\n      purple: 'bg-purple-100 text-purple-900',\n      orange: 'bg-orange-100 text-orange-900',\n    },\n  },\n  defaultVariants: {\n    color: 'yellow',\n  },\n})\n\n/** Class for the editable/static text area inside the note. */\nexport const stickyNoteTextClass =\n  'flex-1 w-full resize-none bg-transparent text-sm leading-relaxed placeholder:opacity-60 outline-none'\n\n/** Class for the author chip rendered in the note footer. */\nexport const stickyNoteAuthorClass =\n  'mt-auto text-xs font-medium opacity-70 truncate'\n", "import * as React from 'react'\nimport {\n  createStickyNote,\n  stickyNoteVariants,\n  stickyNoteTextClass,\n  stickyNoteAuthorClass,\n  type StickyNoteColor,\n} from '@refraction-ui/sticky-note'\nimport { cn } from '@refraction-ui/shared'\n\nexport type { StickyNoteColor }\n\nexport interface StickyNoteProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color' | 'content' | 'onSelect'> {\n  /** Color of the sticky note. */\n  color?: StickyNoteColor\n  /** Text content of the note. */\n  text?: string\n  /** Called when the text changes (makes text editable via a textarea). */\n  onTextChange?: (value: string) => void\n  /** Optional author name shown in the note footer. */\n  author?: string\n  /** Absolute x position in pixels (for board/canvas placement). */\n  x?: number\n  /** Absolute y position in pixels (for board/canvas placement). */\n  y?: number\n  /** Whether the note can be dragged. Requires `onMove` to receive updates. */\n  draggable?: boolean\n  /** Called with the new `{ x, y }` position after a drag completes. */\n  onMove?: (position: { x: number; y: number }) => void\n}\n\n/**\n * StickyNote — a draggable colored note for whiteboard / canvas surfaces.\n *\n * - `color` selects the soft-tint palette (yellow, pink, blue, green, purple, orange).\n * - `text` + `onTextChange` switch to an editable textarea; without `onTextChange` the\n *   text is static.\n * - `x` / `y` absolutely position the note; pair with `draggable` + `onMove` for\n *   drag-to-reposition. Drag is implemented via pointer events and is SSR-safe (no\n *   handlers attach until the component mounts on the client).\n * - Forwards the ref to the outer `<div>`.\n */\nexport const StickyNote = React.forwardRef<HTMLDivElement, StickyNoteProps>(\n  function StickyNote(\n    {\n      color = 'yellow',\n      text,\n      onTextChange,\n      author,\n      x,\n      y,\n      draggable = false,\n      onMove,\n      className,\n      style,\n      children,\n      ...props\n    },\n    ref,\n  ) {\n    const { ariaProps, dataAttributes } = createStickyNote({ color })\n\n    // Drag state — kept in refs to avoid re-renders during drag.\n    const dragOrigin = React.useRef<{ pointerX: number; pointerY: number; noteX: number; noteY: number } | null>(null)\n\n    const positionStyle: React.CSSProperties =\n      x !== undefined && y !== undefined\n        ? { position: 'absolute', left: x, top: y }\n        : {}\n\n    const handlePointerDown = React.useCallback(\n      (e: React.PointerEvent<HTMLDivElement>) => {\n        if (!draggable || !onMove) return\n        // Only primary button.\n        if (e.button !== 0) return\n        e.currentTarget.setPointerCapture(e.pointerId)\n        dragOrigin.current = {\n          pointerX: e.clientX,\n          pointerY: e.clientY,\n          noteX: x ?? 0,\n          noteY: y ?? 0,\n        }\n      },\n      [draggable, onMove, x, y],\n    )\n\n    const handlePointerMove = React.useCallback(\n      (e: React.PointerEvent<HTMLDivElement>) => {\n        if (!dragOrigin.current || !onMove) return\n        const dx = e.clientX - dragOrigin.current.pointerX\n        const dy = e.clientY - dragOrigin.current.pointerY\n        onMove({ x: dragOrigin.current.noteX + dx, y: dragOrigin.current.noteY + dy })\n      },\n      [onMove],\n    )\n\n    const handlePointerUp = React.useCallback(() => {\n      dragOrigin.current = null\n    }, [])\n\n    return (\n      <div\n        ref={ref}\n        className={cn(stickyNoteVariants({ color }), className)}\n        style={{ ...positionStyle, ...style }}\n        {...ariaProps}\n        {...dataAttributes}\n        onPointerDown={draggable && onMove ? handlePointerDown : undefined}\n        onPointerMove={draggable && onMove ? handlePointerMove : undefined}\n        onPointerUp={draggable && onMove ? handlePointerUp : undefined}\n        {...props}\n      >\n        {onTextChange != null ? (\n          <textarea\n            className={stickyNoteTextClass}\n            value={text ?? ''}\n            onChange={(e) => onTextChange(e.target.value)}\n            placeholder=\"Type a note…\"\n          />\n        ) : (\n          <p className={`${stickyNoteTextClass} whitespace-pre-wrap`}>{text ?? children}</p>\n        )}\n        {author != null && (\n          <span className={stickyNoteAuthorClass}>{author}</span>\n        )}\n      </div>\n    )\n  },\n)\n"],
+  "mappings": ";;;;;;;;;AAIO,IAAM,qBAAwC;EACnD;EACA;EACA;EACA;EACA;EACA;AACF;AAMO,SAAS,gBAAgB,OAAyC;AACvE,QAAM,QAAQ,mBAAmB,QAAQ,KAAK;AAC9C,QAAM,QAAQ,QAAQ,KAAK,mBAAmB;AAC9C,SAAO,mBAAmB,IAAI;AAChC;AAoBO,SAAS,iBAAiB,SAAiD;AAChF,SAAO;IACL,gBAAgB,EAAE,cAAc,QAAQ,MAAA;IACxC,WAAW,EAAE,MAAM,QAAA;EAAQ;AAE/B;ACrCO,IAAM,qBAAqB,IAAI;EACpC,MAAM;IACJ;IACA;IACA;EAAA,EACA,KAAK,GAAG;EACV,UAAU;IACR,OAAO;MACL,QAAQ;MACR,MAAM;MACN,MAAM;MACN,OAAO;MACP,QAAQ;MACR,QAAQ;IAAA;EACV;EAEF,iBAAiB;IACf,OAAO;EAAA;AAEX,CAAC;AAGM,IAAM,sBACX;AAGK,IAAM,wBACX;;;;ACOK,IAAM,aAAmB;EAC9B,SAASA,YACP;IACE,QAAQ;IACR;IACA;IACA;IACA;IACA;IACA,YAAY;IACZ;IACA;IACA;IACA;IACA,GAAG;EAAA,GAEL,KACA;AACA,UAAM,EAAE,WAAW,eAAA,IAAmB,iBAAiB,EAAE,MAAA,CAAO;AAGhE,UAAM,aAAmB,aAAoF,IAAI;AAEjH,UAAM,gBACJ,MAAM,UAAa,MAAM,SACrB,EAAE,UAAU,YAAY,MAAM,GAAG,KAAK,EAAA,IACtC,CAAA;AAEN,UAAM,oBAA0B;MAC9B,CAAC,MAA0C;AACzC,YAAI,CAAC,aAAa,CAAC,OAAQ;AAE3B,YAAI,EAAE,WAAW,EAAG;AACpB,UAAE,cAAc,kBAAkB,EAAE,SAAS;AAC7C,mBAAW,UAAU;UACnB,UAAU,EAAE;UACZ,UAAU,EAAE;UACZ,OAAO,KAAK;UACZ,OAAO,KAAK;QAAA;MAEhB;MACA,CAAC,WAAW,QAAQ,GAAG,CAAC;IAAA;AAG1B,UAAM,oBAA0B;MAC9B,CAAC,MAA0C;AACzC,YAAI,CAAC,WAAW,WAAW,CAAC,OAAQ;AACpC,cAAM,KAAK,EAAE,UAAU,WAAW,QAAQ;AAC1C,cAAM,KAAK,EAAE,UAAU,WAAW,QAAQ;AAC1C,eAAO,EAAE,GAAG,WAAW,QAAQ,QAAQ,IAAI,GAAG,WAAW,QAAQ,QAAQ,GAAA,CAAI;MAC/E;MACA,CAAC,MAAM;IAAA;AAGT,UAAM,kBAAwB,kBAAY,MAAM;AAC9C,iBAAW,UAAU;IACvB,GAAG,CAAA,CAAE;AAEL,WACE;MAAC;MAAA;QACC;QACA,WAAW,GAAG,mBAAmB,EAAE,MAAA,CAAO,GAAG,SAAS;QACtD,OAAO,EAAE,GAAG,eAAe,GAAG,MAAA;QAC7B,GAAG;QACH,GAAG;QACJ,eAAe,aAAa,SAAS,oBAAoB;QACzD,eAAe,aAAa,SAAS,oBAAoB;QACzD,aAAa,aAAa,SAAS,kBAAkB;QACpD,GAAG;QAEH,UAAA;UAAA,gBAAgB,OACf;YAAC;YAAA;cACC,WAAW;cACX,OAAO,QAAQ;cACf,UAAU,CAAC,MAAM,aAAa,EAAE,OAAO,KAAK;cAC5C,aAAY;YAAA;UAAA,IACd,oBAEC,KAAA,EAAE,WAAW,GAAG,mBAAmB,wBAAyB,UAAA,QAAQ,SAAA,CAAS;UAE/E,UAAU,QACT,oBAAC,QAAA,EAAK,WAAW,uBAAwB,UAAA,OAAA,CAAO;QAAA;MAAA;IAAA;EAIxD;AACF;",
+  "names": ["StickyNote"]
+}

package/dist/react-switch.js

@@ -0,0 +1,139 @@
+import {
+  Keys,
+  cn,
+  cva
+} from "./chunk-ZF3OHCGV.js";
+
+// ../react-switch/dist/index.js
+import * as React from "react";
+
+// ../switch/dist/index.js
+function createSwitch(props = {}) {
+  const { checked = false, disabled = false } = props;
+  const isInteractive = !disabled;
+  const ariaProps = {
+    role: "switch",
+    "aria-checked": checked
+  };
+  if (disabled) {
+    ariaProps["aria-disabled"] = true;
+  }
+  const dataAttributes = {};
+  if (checked) {
+    dataAttributes["data-state"] = "checked";
+  } else {
+    dataAttributes["data-state"] = "unchecked";
+  }
+  if (disabled) {
+    dataAttributes["data-disabled"] = "";
+  }
+  const keyboardHandlers = {};
+  if (!isInteractive) {
+    keyboardHandlers[Keys.Space] = (e) => e.preventDefault();
+  }
+  return {
+    ariaProps,
+    keyboardHandlers,
+    isInteractive,
+    dataAttributes,
+    state: { checked, disabled }
+  };
+}
+var switchTokens = {
+  name: "switch",
+  tokens: {
+    bg: { variable: "--rfr-switch-bg", fallback: "hsl(var(--input))" },
+    "bg-checked": { variable: "--rfr-switch-bg-checked", fallback: "hsl(var(--primary))" },
+    thumb: { variable: "--rfr-switch-thumb", fallback: "hsl(var(--background))" },
+    ring: { variable: "--rfr-switch-ring", fallback: "hsl(var(--ring))" }
+  }
+};
+var switchVariants = cva({
+  base: "peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50",
+  variants: {
+    checked: {
+      true: "bg-primary",
+      false: "bg-input"
+    },
+    size: {
+      sm: "h-4 w-7",
+      default: "h-5 w-9",
+      lg: "h-6 w-11"
+    }
+  },
+  defaultVariants: {
+    checked: "false",
+    size: "default"
+  }
+});
+var switchThumbVariants = cva({
+  base: "pointer-events-none block rounded-full bg-background shadow-lg ring-0 transition-transform",
+  variants: {
+    checked: {
+      true: "",
+      false: "translate-x-0"
+    },
+    size: {
+      sm: "h-3 w-3",
+      default: "h-4 w-4",
+      lg: "h-5 w-5"
+    }
+  },
+  defaultVariants: {
+    checked: "false",
+    size: "default"
+  },
+  compoundVariants: [
+    { checked: "true", size: "sm", class: "translate-x-3" },
+    { checked: "true", size: "default", class: "translate-x-4" },
+    { checked: "true", size: "lg", class: "translate-x-5" }
+  ]
+});
+
+// ../react-switch/dist/index.js
+import { jsx } from "react/jsx-runtime";
+var Switch = React.forwardRef(
+  function Switch2({ checked = false, onCheckedChange, disabled = false, size = "default", className, ...props }, ref) {
+    const api = createSwitch({ checked, disabled });
+    const handleClick = () => {
+      if (api.isInteractive) {
+        onCheckedChange?.(!checked);
+      }
+    };
+    const handleKeyDown = (e) => {
+      if (e.key === " ") {
+        e.preventDefault();
+        if (api.isInteractive) {
+          onCheckedChange?.(!checked);
+        }
+      }
+    };
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        type: "button",
+        className: cn(switchVariants({ checked: checked ? "true" : "false", size }), className),
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
+        disabled,
+        ...api.ariaProps,
+        ...api.dataAttributes,
+        ...props,
+        children: /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(switchThumbVariants({ checked: checked ? "true" : "false", size }))
+          }
+        )
+      }
+    );
+  }
+);
+export {
+  Switch,
+  switchThumbVariants,
+  switchTokens,
+  switchVariants
+};
+//# sourceMappingURL=react-switch.js.map

package/dist/react-switch.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../switch/src/switch.ts", "../../switch/src/switch.styles.ts", "../../react-switch/src/switch.tsx"],
+  "sourcesContent": ["import type { AccessibilityProps, KeyboardHandlerMap } from '@refraction-ui/shared'\nimport { Keys } from '@refraction-ui/shared'\n\nexport interface SwitchProps {\n  checked?: boolean\n  disabled?: boolean\n  required?: boolean\n  name?: string\n  value?: string\n}\n\nexport interface SwitchAPI {\n  /** ARIA attributes to spread on the element */\n  ariaProps: Partial<AccessibilityProps>\n  /** Keyboard handlers to attach */\n  keyboardHandlers: KeyboardHandlerMap\n  /** Whether interaction should be blocked */\n  isInteractive: boolean\n  /** Data attributes for CSS styling hooks */\n  dataAttributes: Record<string, string>\n  /** Current state */\n  state: {\n    checked: boolean\n    disabled: boolean\n  }\n}\n\nexport function createSwitch(props: SwitchProps = {}): SwitchAPI {\n  const { checked = false, disabled = false } = props\n  const isInteractive = !disabled\n\n  const ariaProps: Partial<AccessibilityProps> = {\n    role: 'switch',\n    'aria-checked': checked,\n  }\n\n  if (disabled) {\n    ariaProps['aria-disabled'] = true\n  }\n\n  const dataAttributes: Record<string, string> = {}\n  if (checked) {\n    dataAttributes['data-state'] = 'checked'\n  } else {\n    dataAttributes['data-state'] = 'unchecked'\n  }\n  if (disabled) {\n    dataAttributes['data-disabled'] = ''\n  }\n\n  const keyboardHandlers: KeyboardHandlerMap = {}\n  if (!isInteractive) {\n    keyboardHandlers[Keys.Space] = (e) => e.preventDefault()\n  }\n\n  return {\n    ariaProps,\n    keyboardHandlers,\n    isInteractive,\n    dataAttributes,\n    state: { checked, disabled },\n  }\n}\n", "import { cva } from '@refraction-ui/shared'\nimport type { TokenContract } from '@refraction-ui/shared'\n\nexport const switchTokens: TokenContract = {\n  name: 'switch',\n  tokens: {\n    bg: { variable: '--rfr-switch-bg', fallback: 'hsl(var(--input))' },\n    'bg-checked': { variable: '--rfr-switch-bg-checked', fallback: 'hsl(var(--primary))' },\n    thumb: { variable: '--rfr-switch-thumb', fallback: 'hsl(var(--background))' },\n    ring: { variable: '--rfr-switch-ring', fallback: 'hsl(var(--ring))' },\n  },\n}\n\nexport const switchVariants = cva({\n  base: 'peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50',\n  variants: {\n    checked: {\n      true: 'bg-primary',\n      false: 'bg-input',\n    },\n    size: {\n      sm: 'h-4 w-7',\n      default: 'h-5 w-9',\n      lg: 'h-6 w-11',\n    },\n  },\n  defaultVariants: {\n    checked: 'false',\n    size: 'default',\n  },\n})\n\nexport const switchThumbVariants = cva({\n  base: 'pointer-events-none block rounded-full bg-background shadow-lg ring-0 transition-transform',\n  variants: {\n    checked: {\n      true: '',\n      false: 'translate-x-0',\n    },\n    size: {\n      sm: 'h-3 w-3',\n      default: 'h-4 w-4',\n      lg: 'h-5 w-5',\n    },\n  },\n  defaultVariants: {\n    checked: 'false',\n    size: 'default',\n  },\n  compoundVariants: [\n    { checked: 'true', size: 'sm', class: 'translate-x-3' },\n    { checked: 'true', size: 'default', class: 'translate-x-4' },\n    { checked: 'true', size: 'lg', class: 'translate-x-5' },\n  ],\n})\n", "import * as React from 'react'\nimport {\n  createSwitch,\n  switchVariants,\n  switchThumbVariants,\n} from '@refraction-ui/switch'\nimport { cn } from '@refraction-ui/shared'\n\nexport interface SwitchProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'> {\n  checked?: boolean\n  onCheckedChange?: (checked: boolean) => void\n  disabled?: boolean\n  size?: 'sm' | 'default' | 'lg'\n}\n\n/**\n * Switch component -- a toggle switch with accessible keyboard and ARIA support.\n *\n * Uses the headless @refraction-ui/switch core for state, ARIA, and keyboard handling.\n */\nexport const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(\n  function Switch({ checked = false, onCheckedChange, disabled = false, size = 'default', className, ...props }, ref) {\n    const api = createSwitch({ checked, disabled })\n\n    const handleClick = () => {\n      if (api.isInteractive) {\n        onCheckedChange?.(!checked)\n      }\n    }\n\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>) => {\n      if (e.key === ' ') {\n        e.preventDefault()\n        if (api.isInteractive) {\n          onCheckedChange?.(!checked)\n        }\n      }\n    }\n\n    return (\n      <button\n        ref={ref}\n        type=\"button\"\n        className={cn(switchVariants({ checked: checked ? 'true' : 'false', size }), className)}\n        onClick={handleClick}\n        onKeyDown={handleKeyDown}\n        disabled={disabled}\n        {...api.ariaProps}\n        {...api.dataAttributes}\n        {...props}\n      >\n        <span\n          className={cn(switchThumbVariants({ checked: checked ? 'true' : 'false', size }))}\n        />\n      </button>\n    )\n  },\n)\n"],
+  "mappings": ";;;;;;;;;;AA2BO,SAAS,aAAa,QAAqB,CAAA,GAAe;AAC/D,QAAM,EAAE,UAAU,OAAO,WAAW,MAAA,IAAU;AAC9C,QAAM,gBAAgB,CAAC;AAEvB,QAAM,YAAyC;IAC7C,MAAM;IACN,gBAAgB;EAAA;AAGlB,MAAI,UAAU;AACZ,cAAU,eAAe,IAAI;EAC/B;AAEA,QAAM,iBAAyC,CAAA;AAC/C,MAAI,SAAS;AACX,mBAAe,YAAY,IAAI;EACjC,OAAO;AACL,mBAAe,YAAY,IAAI;EACjC;AACA,MAAI,UAAU;AACZ,mBAAe,eAAe,IAAI;EACpC;AAEA,QAAM,mBAAuC,CAAA;AAC7C,MAAI,CAAC,eAAe;AAClB,qBAAiB,KAAK,KAAK,IAAI,CAAC,MAAM,EAAE,eAAA;EAC1C;AAEA,SAAO;IACL;IACA;IACA;IACA;IACA,OAAO,EAAE,SAAS,SAAA;EAAS;AAE/B;AC3DO,IAAM,eAA8B;EACzC,MAAM;EACN,QAAQ;IACN,IAAI,EAAE,UAAU,mBAAmB,UAAU,oBAAA;IAC7C,cAAc,EAAE,UAAU,2BAA2B,UAAU,sBAAA;IAC/D,OAAO,EAAE,UAAU,sBAAsB,UAAU,yBAAA;IACnD,MAAM,EAAE,UAAU,qBAAqB,UAAU,mBAAA;EAAmB;AAExE;AAEO,IAAM,iBAAiB,IAAI;EAChC,MAAM;EACN,UAAU;IACR,SAAS;MACP,MAAM;MACN,OAAO;IAAA;IAET,MAAM;MACJ,IAAI;MACJ,SAAS;MACT,IAAI;IAAA;EACN;EAEF,iBAAiB;IACf,SAAS;IACT,MAAM;EAAA;AAEV,CAAC;AAEM,IAAM,sBAAsB,IAAI;EACrC,MAAM;EACN,UAAU;IACR,SAAS;MACP,MAAM;MACN,OAAO;IAAA;IAET,MAAM;MACJ,IAAI;MACJ,SAAS;MACT,IAAI;IAAA;EACN;EAEF,iBAAiB;IACf,SAAS;IACT,MAAM;EAAA;EAER,kBAAkB;IAChB,EAAE,SAAS,QAAQ,MAAM,MAAM,OAAO,gBAAA;IACtC,EAAE,SAAS,QAAQ,MAAM,WAAW,OAAO,gBAAA;IAC3C,EAAE,SAAS,QAAQ,MAAM,MAAM,OAAO,gBAAA;EAAgB;AAE1D,CAAC;;;;AClCM,IAAM,SAAe;EAC1B,SAASA,QAAO,EAAE,UAAU,OAAO,iBAAiB,WAAW,OAAO,OAAO,WAAW,WAAW,GAAG,MAAA,GAAS,KAAK;AAClH,UAAM,MAAM,aAAa,EAAE,SAAS,SAAA,CAAU;AAE9C,UAAM,cAAc,MAAM;AACxB,UAAI,IAAI,eAAe;AACrB,0BAAkB,CAAC,OAAO;MAC5B;IACF;AAEA,UAAM,gBAAgB,CAAC,MAA8C;AACnE,UAAI,EAAE,QAAQ,KAAK;AACjB,UAAE,eAAA;AACF,YAAI,IAAI,eAAe;AACrB,4BAAkB,CAAC,OAAO;QAC5B;MACF;IACF;AAEA,WACE;MAAC;MAAA;QACC;QACA,MAAK;QACL,WAAW,GAAG,eAAe,EAAE,SAAS,UAAU,SAAS,SAAS,KAAA,CAAM,GAAG,SAAS;QACtF,SAAS;QACT,WAAW;QACX;QACC,GAAG,IAAI;QACP,GAAG,IAAI;QACP,GAAG;QAEJ,UAAA;UAAC;UAAA;YACC,WAAW,GAAG,oBAAoB,EAAE,SAAS,UAAU,SAAS,SAAS,KAAA,CAAM,CAAC;UAAA;QAAA;MAClF;IAAA;EAGN;AACF;",
+  "names": ["Switch"]
+}

package/dist/react-table-of-contents.js

@@ -0,0 +1,80 @@
+import {
+  cn
+} from "./chunk-ZF3OHCGV.js";
+
+// ../react-table-of-contents/dist/index.js
+import * as React from "react";
+
+// ../table-of-contents/dist/index.js
+function parseHeadings(container, selectors = "h2, h3, h4") {
+  const headings = Array.from(container.querySelectorAll(selectors));
+  return headings.map((h) => ({
+    id: h.id || h.textContent?.toLowerCase().replace(/\s+/g, "-") || "",
+    text: h.textContent || "",
+    level: parseInt(h.tagName.charAt(1), 10)
+  })).filter((h) => h.id !== "");
+}
+function observeHeadings(headingIds, callback, options) {
+  const observer = new IntersectionObserver((entries) => {
+    for (const entry of entries) {
+      if (entry.isIntersecting) {
+        callback(entry.target.id);
+        break;
+      }
+    }
+  }, { rootMargin: "0px 0px -80% 0px", ...options });
+  headingIds.forEach((id) => {
+    const el = document.getElementById(id);
+    if (el) observer.observe(el);
+  });
+  return () => observer.disconnect();
+}
+
+// ../react-table-of-contents/dist/index.js
+import { jsx } from "react/jsx-runtime";
+var TableOfContents = React.forwardRef(
+  function TableOfContents2({ className, containerRef, selectors = "h2, h3, h4", onActiveIdChange, ...props }, ref) {
+    const [headings, setHeadings] = React.useState([]);
+    const [activeId, setActiveId] = React.useState("");
+    React.useEffect(() => {
+      const container = containerRef?.current || document.body;
+      if (!container) return;
+      const parsedHeadings = parseHeadings(container, selectors);
+      setHeadings(parsedHeadings);
+      if (parsedHeadings.length === 0) return;
+      const disconnect = observeHeadings(parsedHeadings.map((h) => h.id), (id) => {
+        setActiveId(id);
+        onActiveIdChange?.(id);
+      });
+      return () => disconnect();
+    }, [containerRef, selectors, onActiveIdChange]);
+    if (headings.length === 0) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx("nav", { ref, className: cn("space-y-1", className), ...props, children: /* @__PURE__ */ jsx("ul", { className: "m-0 list-none p-0", children: headings.map((heading) => /* @__PURE__ */ jsx(
+      "li",
+      {
+        className: cn(
+          "py-1",
+          heading.level === 3 ? "pl-4" : heading.level === 4 ? "pl-8" : ""
+        ),
+        children: /* @__PURE__ */ jsx(
+          "a",
+          {
+            href: `#${heading.id}`,
+            className: cn(
+              "block text-sm transition-colors hover:text-foreground",
+              activeId === heading.id ? "font-medium text-foreground" : "text-muted-foreground"
+            ),
+            children: heading.text
+          }
+        )
+      },
+      heading.id
+    )) }) });
+  }
+);
+export {
+  TableOfContents
+};
+//# sourceMappingURL=react-table-of-contents.js.map

package/dist/react-table-of-contents.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../table-of-contents/src/table-of-contents.ts", "../../react-table-of-contents/src/table-of-contents.tsx"],
+  "sourcesContent": ["export interface TocItem {\n  id: string;\n  text: string;\n  level: number;\n}\n\nexport function parseHeadings(container: HTMLElement, selectors = 'h2, h3, h4'): TocItem[] {\n  const headings = Array.from(container.querySelectorAll(selectors));\n  return headings.map(h => ({\n    id: h.id || h.textContent?.toLowerCase().replace(/\\s+/g, '-') || '',\n    text: h.textContent || '',\n    level: parseInt(h.tagName.charAt(1), 10)\n  })).filter(h => h.id !== ''); // Ensure headings have IDs\n}\n\nexport function observeHeadings(\n  headingIds: string[],\n  callback: (activeId: string) => void,\n  options?: IntersectionObserverInit\n): () => void {\n  const observer = new IntersectionObserver((entries) => {\n    // Find the first intersecting entry\n    for (const entry of entries) {\n      if (entry.isIntersecting) {\n        callback(entry.target.id);\n        break; // Or handle multiple, but usually we just care about one\n      }\n    }\n  }, { rootMargin: '0px 0px -80% 0px', ...options });\n\n  headingIds.forEach(id => {\n    const el = document.getElementById(id);\n    if (el) observer.observe(el);\n  });\n\n  return () => observer.disconnect();\n}\n", "import * as React from 'react'\nimport { cn } from '@refraction-ui/shared'\nimport { parseHeadings, observeHeadings, TocItem } from '@refraction-ui/table-of-contents'\n\nexport interface TableOfContentsProps extends React.HTMLAttributes<HTMLDivElement> {\n  containerRef?: React.RefObject<HTMLElement | null>\n  selectors?: string\n  onActiveIdChange?: (id: string) => void\n}\n\nexport const TableOfContents = React.forwardRef<HTMLDivElement, TableOfContentsProps>(\n  function TableOfContents({ className, containerRef, selectors = 'h2, h3, h4', onActiveIdChange, ...props }, ref) {\n    const [headings, setHeadings] = React.useState<TocItem[]>([])\n    const [activeId, setActiveId] = React.useState<string>('')\n\n    React.useEffect(() => {\n      const container = containerRef?.current || document.body\n      if (!container) return\n\n      const parsedHeadings = parseHeadings(container, selectors)\n      setHeadings(parsedHeadings)\n\n      if (parsedHeadings.length === 0) return\n\n      const disconnect = observeHeadings(parsedHeadings.map(h => h.id), (id) => {\n        setActiveId(id)\n        onActiveIdChange?.(id)\n      })\n\n      return () => disconnect()\n    }, [containerRef, selectors, onActiveIdChange])\n\n    if (headings.length === 0) {\n      return null\n    }\n\n    return (\n      <nav ref={ref} className={cn(\"space-y-1\", className)} {...props}>\n        <ul className=\"m-0 list-none p-0\">\n          {headings.map((heading) => (\n            <li\n              key={heading.id}\n              className={cn(\n                \"py-1\",\n                heading.level === 3 ? \"pl-4\" : heading.level === 4 ? \"pl-8\" : \"\"\n              )}\n            >\n              <a\n                href={`#${heading.id}`}\n                className={cn(\n                  \"block text-sm transition-colors hover:text-foreground\",\n                  activeId === heading.id ? \"font-medium text-foreground\" : \"text-muted-foreground\"\n                )}\n              >\n                {heading.text}\n              </a>\n            </li>\n          ))}\n        </ul>\n      </nav>\n    )\n  }\n)\n"],
+  "mappings": ";;;;;;;;AAMO,SAAS,cAAc,WAAwB,YAAY,cAAyB;AACzF,QAAM,WAAW,MAAM,KAAK,UAAU,iBAAiB,SAAS,CAAC;AACjE,SAAO,SAAS,IAAI,CAAA,OAAM;IACxB,IAAI,EAAE,MAAM,EAAE,aAAa,YAAA,EAAc,QAAQ,QAAQ,GAAG,KAAK;IACjE,MAAM,EAAE,eAAe;IACvB,OAAO,SAAS,EAAE,QAAQ,OAAO,CAAC,GAAG,EAAE;EAAA,EACvC,EAAE,OAAO,CAAA,MAAK,EAAE,OAAO,EAAE;AAC7B;AAEO,SAAS,gBACd,YACA,UACA,SACY;AACZ,QAAM,WAAW,IAAI,qBAAqB,CAAC,YAAY;AAErD,eAAW,SAAS,SAAS;AAC3B,UAAI,MAAM,gBAAgB;AACxB,iBAAS,MAAM,OAAO,EAAE;AACxB;MACF;IACF;EACF,GAAG,EAAE,YAAY,oBAAoB,GAAG,QAAA,CAAS;AAEjD,aAAW,QAAQ,CAAA,OAAM;AACvB,UAAM,KAAK,SAAS,eAAe,EAAE;AACrC,QAAI,GAAI,UAAS,QAAQ,EAAE;EAC7B,CAAC;AAED,SAAO,MAAM,SAAS,WAAA;AACxB;;;;AC1BO,IAAM,kBAAwB;EACnC,SAASA,iBAAgB,EAAE,WAAW,cAAc,YAAY,cAAc,kBAAkB,GAAG,MAAA,GAAS,KAAK;AAC/G,UAAM,CAAC,UAAU,WAAW,IAAU,eAAoB,CAAA,CAAE;AAC5D,UAAM,CAAC,UAAU,WAAW,IAAU,eAAiB,EAAE;AAEnD,IAAA,gBAAU,MAAM;AACpB,YAAM,YAAY,cAAc,WAAW,SAAS;AACpD,UAAI,CAAC,UAAW;AAEhB,YAAM,iBAAiB,cAAc,WAAW,SAAS;AACzD,kBAAY,cAAc;AAE1B,UAAI,eAAe,WAAW,EAAG;AAEjC,YAAM,aAAa,gBAAgB,eAAe,IAAI,CAAA,MAAK,EAAE,EAAE,GAAG,CAAC,OAAO;AACxE,oBAAY,EAAE;AACd,2BAAmB,EAAE;MACvB,CAAC;AAED,aAAO,MAAM,WAAA;IACf,GAAG,CAAC,cAAc,WAAW,gBAAgB,CAAC;AAE9C,QAAI,SAAS,WAAW,GAAG;AACzB,aAAO;IACT;AAEA,WAAA,oBACG,OAAA,EAAI,KAAU,WAAW,GAAG,aAAa,SAAS,GAAI,GAAG,OACxD,UAAA,oBAAC,MAAA,EAAG,WAAU,qBACX,UAAA,SAAS,IAAI,CAAC,YACb;MAAC;MAAA;QAEC,WAAW;UACT;UACA,QAAQ,UAAU,IAAI,SAAS,QAAQ,UAAU,IAAI,SAAS;QAAA;QAGhE,UAAA;UAAC;UAAA;YACC,MAAM,IAAI,QAAQ,EAAE;YACpB,WAAW;cACT;cACA,aAAa,QAAQ,KAAK,gCAAgC;YAAA;YAG3D,UAAA,QAAQ;UAAA;QAAA;MACX;MAdK,QAAQ;IAAA,CAgBhB,EAAA,CACH,EAAA,CACF;EAEJ;AACF;",
+  "names": ["TableOfContents"]
+}