@refraction-ui/react 0.19.1 → 0.20.0

package/dist/react-rating-scale.js

@@ -0,0 +1,171 @@
+import {
+  cn,
+  cva
+} from "./chunk-ZF3OHCGV.js";
+
+// ../react-rating-scale/dist/index.js
+import * as React from "react";
+
+// ../rating-scale/dist/index.js
+function createRatingScale(props = {}) {
+  const { value, size = "md" } = props;
+  const ariaProps = {
+    role: "radiogroup"
+  };
+  const dataAttributes = {
+    "data-size": size
+  };
+  if (value !== void 0) {
+    dataAttributes["data-value"] = String(value);
+  }
+  return { ariaProps, dataAttributes };
+}
+function resolveRatingPoints(points, count = 5) {
+  if (points && points.length > 0) return points;
+  return Array.from({ length: Math.max(0, count) }, (_, i) => ({ value: i + 1 }));
+}
+function getNextRatingIndex(current, key, count) {
+  if (count <= 0) return current;
+  switch (key) {
+    case "ArrowRight":
+    case "ArrowUp":
+      return Math.min(current + 1, count - 1);
+    case "ArrowLeft":
+    case "ArrowDown":
+      return Math.max(current - 1, 0);
+    case "Home":
+      return 0;
+    case "End":
+      return count - 1;
+    default:
+      return current;
+  }
+}
+var ratingScaleVariants = cva({
+  base: "inline-flex items-center gap-3",
+  variants: {
+    size: {
+      sm: "",
+      md: ""
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+var ratingScaleTrackClass = "inline-flex items-center gap-1.5";
+var ratingScaleItemVariants = cva({
+  base: [
+    "inline-flex items-center justify-center rounded-md border font-medium tabular-nums",
+    "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:pointer-events-none disabled:opacity-50"
+  ].join(" "),
+  variants: {
+    size: {
+      sm: "size-8 text-xs",
+      md: "size-10 text-sm"
+    },
+    state: {
+      checked: "border-primary bg-primary text-primary-foreground",
+      unchecked: "border-input bg-background text-foreground hover:bg-accent hover:text-accent-foreground"
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    state: "unchecked"
+  }
+});
+var ratingScaleLabelClass = "text-xs text-muted-foreground";
+
+// ../react-rating-scale/dist/index.js
+import { jsxs, jsx } from "react/jsx-runtime";
+var RatingScale = React.forwardRef(
+  function RatingScale2({
+    value: valueProp,
+    defaultValue,
+    onValueChange,
+    count = 5,
+    points,
+    minLabel,
+    maxLabel,
+    size = "md",
+    disabled = false,
+    className,
+    ...props
+  }, ref) {
+    const resolved = React.useMemo(
+      () => resolveRatingPoints(points, count),
+      [points, count]
+    );
+    const isControlled = valueProp !== void 0;
+    const [internal, setInternal] = React.useState(
+      defaultValue
+    );
+    const value = isControlled ? valueProp : internal;
+    const btnRefs = React.useRef([]);
+    const select = React.useCallback(
+      (next) => {
+        if (!isControlled) setInternal(next);
+        onValueChange?.(next);
+      },
+      [isControlled, onValueChange]
+    );
+    const selectedIndex = resolved.findIndex((p) => p.value === value);
+    const tabbableIndex = selectedIndex === -1 ? 0 : selectedIndex;
+    const handleKeyDown = (event, index) => {
+      const target = getNextRatingIndex(index, event.key, resolved.length);
+      if (target !== index) {
+        event.preventDefault();
+        select(resolved[target].value);
+        btnRefs.current[target]?.focus();
+      }
+    };
+    const api = createRatingScale({ value, size });
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(ratingScaleVariants({ size }), className),
+        "aria-disabled": disabled || void 0,
+        ...api.ariaProps,
+        ...api.dataAttributes,
+        ...props,
+        children: [
+          minLabel != null && /* @__PURE__ */ jsx("span", { className: ratingScaleLabelClass, children: minLabel }),
+          /* @__PURE__ */ jsx("div", { className: ratingScaleTrackClass, children: resolved.map((point, index) => {
+            const checked = point.value === value;
+            return /* @__PURE__ */ jsx(
+              "button",
+              {
+                ref: (node) => {
+                  btnRefs.current[index] = node;
+                },
+                type: "button",
+                role: "radio",
+                "aria-checked": checked,
+                "aria-label": point.label ?? String(point.value),
+                tabIndex: index === tabbableIndex ? 0 : -1,
+                disabled,
+                "data-state": checked ? "checked" : "unchecked",
+                className: ratingScaleItemVariants({
+                  size,
+                  state: checked ? "checked" : "unchecked"
+                }),
+                onClick: () => select(point.value),
+                onKeyDown: (e) => handleKeyDown(e, index),
+                children: point.label ?? point.value
+              },
+              point.value
+            );
+          }) }),
+          maxLabel != null && /* @__PURE__ */ jsx("span", { className: ratingScaleLabelClass, children: maxLabel })
+        ]
+      }
+    );
+  }
+);
+export {
+  RatingScale
+};
+//# sourceMappingURL=react-rating-scale.js.map

package/dist/react-rating-scale.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../rating-scale/src/rating-scale.ts", "../../rating-scale/src/rating-scale.styles.ts", "../../react-rating-scale/src/rating-scale.tsx"],
+  "sourcesContent": ["import type { AccessibilityProps } from '@refraction-ui/shared'\n\n/** Visual size of a rating scale. */\nexport type RatingScaleSize = 'sm' | 'md'\n\n/** A single selectable point on the scale (1-indexed value + accessible label). */\nexport interface RatingScalePoint {\n  /** The value this point represents. */\n  value: number\n  /** Accessible label for the point (falls back to the value). */\n  label?: string\n}\n\nexport interface RatingScaleProps {\n  /** Currently selected value (controlled). */\n  value?: number\n  /** Number of points on the scale. Ignored when {@link points} is given. */\n  count?: number\n  /** Visual size. */\n  size?: RatingScaleSize\n}\n\nexport interface RatingScaleAPI {\n  /** ARIA attributes to spread on the group element (`role=\"radiogroup\"`). */\n  ariaProps: Partial<AccessibilityProps>\n  /** Data attributes for styling hooks. */\n  dataAttributes: Record<string, string>\n}\n\n/**\n * Build the framework-agnostic group props for a rating / Likert scale.\n *\n * Returns `role=\"radiogroup\"` plus data attributes; adapters spread these onto\n * their container and render the points themselves. A rating scale is a\n * single-select control with radio semantics, like a segmented control, but\n * tuned for ordinal self-rating (e.g. a 1–5 Likert prompt with end labels).\n */\nexport function createRatingScale(props: RatingScaleProps = {}): RatingScaleAPI {\n  const { value, size = 'md' } = props\n\n  const ariaProps: Partial<AccessibilityProps> = {\n    role: 'radiogroup',\n  }\n\n  const dataAttributes: Record<string, string> = {\n    'data-size': size,\n  }\n  if (value !== undefined) {\n    dataAttributes['data-value'] = String(value)\n  }\n\n  return { ariaProps, dataAttributes }\n}\n\n/**\n * Resolve the list of points for a scale from either an explicit list or a\n * `count` (producing `1..count`). The single source of truth shared by every\n * adapter so a `count={5}` scale renders identical points everywhere.\n */\nexport function resolveRatingPoints(\n  points: RatingScalePoint[] | undefined,\n  count = 5,\n): RatingScalePoint[] {\n  if (points && points.length > 0) return points\n  return Array.from({ length: Math.max(0, count) }, (_, i) => ({ value: i + 1 }))\n}\n\n/**\n * Pure keyboard-navigation rule shared by every adapter.\n *\n * Unlike a wrapping segmented control, an ordinal rating scale **clamps** at\n * the ends (you can't wrap from \"5 — strongly agree\" back to \"1\"). Home/End\n * jump to the extremes; unhandled keys return `current` unchanged.\n *\n * - ArrowRight / ArrowUp   → next (clamped to last)\n * - ArrowLeft  / ArrowDown → previous (clamped to first)\n * - Home                   → first\n * - End                    → last\n */\nexport function getNextRatingIndex(\n  current: number,\n  key: string,\n  count: number,\n): number {\n  if (count <= 0) return current\n\n  switch (key) {\n    case 'ArrowRight':\n    case 'ArrowUp':\n      return Math.min(current + 1, count - 1)\n    case 'ArrowLeft':\n    case 'ArrowDown':\n      return Math.max(current - 1, 0)\n    case 'Home':\n      return 0\n    case 'End':\n      return count - 1\n    default:\n      return current\n  }\n}\n", "import { cva } from '@refraction-ui/shared'\n\n/** Container row that holds the points plus optional end labels. */\nexport const ratingScaleVariants = cva({\n  base: 'inline-flex items-center gap-3',\n  variants: {\n    size: {\n      sm: '',\n      md: '',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n})\n\n/** Row of point buttons (the scale itself, between the end labels). */\nexport const ratingScaleTrackClass = 'inline-flex items-center gap-1.5'\n\n/**\n * A single point button. The `state` variant carries the selected vs unselected\n * treatment so adapters never inline these classes.\n */\nexport const ratingScaleItemVariants = cva({\n  base: [\n    'inline-flex items-center justify-center rounded-md border font-medium tabular-nums',\n    'transition-colors focus-visible:outline-none focus-visible:ring-2',\n    'focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',\n    'disabled:pointer-events-none disabled:opacity-50',\n  ].join(' '),\n  variants: {\n    size: {\n      sm: 'size-8 text-xs',\n      md: 'size-10 text-sm',\n    },\n    state: {\n      checked: 'border-primary bg-primary text-primary-foreground',\n      unchecked: 'border-input bg-background text-foreground hover:bg-accent hover:text-accent-foreground',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n    state: 'unchecked',\n  },\n})\n\n/** End-label text flanking the scale (e.g. \"Never seen this\" / \"Could write it\"). */\nexport const ratingScaleLabelClass = 'text-xs text-muted-foreground'\n", "import * as React from 'react'\nimport {\n  createRatingScale,\n  resolveRatingPoints,\n  getNextRatingIndex,\n  ratingScaleVariants,\n  ratingScaleTrackClass,\n  ratingScaleItemVariants,\n  ratingScaleLabelClass,\n  type RatingScaleSize,\n  type RatingScalePoint,\n} from '@refraction-ui/rating-scale'\nimport { cn } from '@refraction-ui/shared'\n\nexport type { RatingScaleSize, RatingScalePoint }\n\nexport interface RatingScaleProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  /** Controlled selected value. */\n  value?: number\n  /** Initial value for uncontrolled usage. */\n  defaultValue?: number\n  /** Called with the newly selected value. */\n  onValueChange?: (value: number) => void\n  /** Number of points (1..count). Ignored when `points` is provided. */\n  count?: number\n  /** Explicit points with accessible labels. */\n  points?: RatingScalePoint[]\n  /** Label shown before the scale (the low end). */\n  minLabel?: React.ReactNode\n  /** Label shown after the scale (the high end). */\n  maxLabel?: React.ReactNode\n  /** Visual size. */\n  size?: RatingScaleSize\n  /** Disables the whole scale. */\n  disabled?: boolean\n  /** Accessible name for the group. */\n  'aria-label'?: string\n}\n\n/**\n * RatingScale — a single-select ordinal rating / Likert control.\n *\n * Renders `role=\"radiogroup\"`; each point is a `role=\"radio\"` button with\n * roving tabindex and arrow/Home/End keyboard navigation (clamped at the\n * ends — ordinal scales don't wrap). Supports controlled (`value`) and\n * uncontrolled (`defaultValue`) usage. Logic, point resolution, and styles\n * come from the headless `@refraction-ui/rating-scale` core.\n */\nexport const RatingScale = React.forwardRef<HTMLDivElement, RatingScaleProps>(\n  function RatingScale(\n    {\n      value: valueProp,\n      defaultValue,\n      onValueChange,\n      count = 5,\n      points,\n      minLabel,\n      maxLabel,\n      size = 'md',\n      disabled = false,\n      className,\n      ...props\n    },\n    ref,\n  ) {\n    const resolved = React.useMemo(\n      () => resolveRatingPoints(points, count),\n      [points, count],\n    )\n    const isControlled = valueProp !== undefined\n    const [internal, setInternal] = React.useState<number | undefined>(\n      defaultValue,\n    )\n    const value = isControlled ? valueProp : internal\n\n    const btnRefs = React.useRef<(HTMLButtonElement | null)[]>([])\n\n    const select = React.useCallback(\n      (next: number) => {\n        if (!isControlled) setInternal(next)\n        onValueChange?.(next)\n      },\n      [isControlled, onValueChange],\n    )\n\n    const selectedIndex = resolved.findIndex((p) => p.value === value)\n    // First point is tabbable when nothing is selected (roving tabindex).\n    const tabbableIndex = selectedIndex === -1 ? 0 : selectedIndex\n\n    const handleKeyDown = (\n      event: React.KeyboardEvent<HTMLButtonElement>,\n      index: number,\n    ) => {\n      const target = getNextRatingIndex(index, event.key, resolved.length)\n      if (target !== index) {\n        event.preventDefault()\n        select(resolved[target].value)\n        btnRefs.current[target]?.focus()\n      }\n    }\n\n    const api = createRatingScale({ value, size })\n\n    return (\n      <div\n        ref={ref}\n        className={cn(ratingScaleVariants({ size }), className)}\n        aria-disabled={disabled || undefined}\n        {...api.ariaProps}\n        {...api.dataAttributes}\n        {...props}\n      >\n        {minLabel != null && (\n          <span className={ratingScaleLabelClass}>{minLabel}</span>\n        )}\n        <div className={ratingScaleTrackClass}>\n          {resolved.map((point, index) => {\n            const checked = point.value === value\n            return (\n              <button\n                key={point.value}\n                ref={(node) => {\n                  btnRefs.current[index] = node\n                }}\n                type=\"button\"\n                role=\"radio\"\n                aria-checked={checked}\n                aria-label={point.label ?? String(point.value)}\n                tabIndex={index === tabbableIndex ? 0 : -1}\n                disabled={disabled}\n                data-state={checked ? 'checked' : 'unchecked'}\n                className={ratingScaleItemVariants({\n                  size,\n                  state: checked ? 'checked' : 'unchecked',\n                })}\n                onClick={() => select(point.value)}\n                onKeyDown={(e) => handleKeyDown(e, index)}\n              >\n                {point.label ?? point.value}\n              </button>\n            )\n          })}\n        </div>\n        {maxLabel != null && (\n          <span className={ratingScaleLabelClass}>{maxLabel}</span>\n        )}\n      </div>\n    )\n  },\n)\n"],
+  "mappings": "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",
+  "names": ["RatingScale"]
+}

package/dist/react-reaction-bar.js

@@ -0,0 +1,111 @@
+import {
+  cn,
+  cva,
+  generateId
+} from "./chunk-ZF3OHCGV.js";
+
+// ../react-reaction-bar/dist/index.js
+import * as React from "react";
+
+// ../reaction-bar/dist/index.js
+function createReactionBar(props) {
+  const { reactions, onToggle, onAdd } = props;
+  const containerId = generateId("rfr-reactions");
+  const labelId = generateId("rfr-reactions-label");
+  function toggle(emoji) {
+    onToggle?.(emoji);
+  }
+  function add(emoji) {
+    onAdd?.(emoji);
+  }
+  const ariaProps = {
+    role: "group",
+    "aria-label": "Reactions",
+    id: containerId
+  };
+  function getReactionAriaProps(reaction) {
+    return {
+      role: "button",
+      "aria-pressed": reaction.userReacted,
+      "aria-label": `${reaction.emoji} ${reaction.count} reaction${reaction.count === 1 ? "" : "s"}${reaction.userReacted ? ", you reacted" : ""}`
+    };
+  }
+  const addButtonAriaProps = {
+    role: "button",
+    "aria-label": "Add reaction"
+  };
+  return {
+    reactions,
+    toggle,
+    add,
+    ariaProps,
+    getReactionAriaProps,
+    addButtonAriaProps,
+    ids: {
+      container: containerId,
+      label: labelId
+    }
+  };
+}
+var reactionBarStyles = "flex flex-wrap items-center gap-1";
+var reactionPillVariants = cva({
+  base: "inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-xs cursor-pointer transition-colors hover:bg-accent",
+  variants: {
+    state: {
+      active: "border-primary bg-primary/10 text-primary",
+      inactive: "border-border bg-background text-foreground"
+    }
+  },
+  defaultVariants: {
+    state: "inactive"
+  }
+});
+var reactionAddButtonStyles = "inline-flex items-center justify-center h-6 w-6 rounded-full border border-dashed border-muted-foreground/30 text-muted-foreground hover:border-muted-foreground hover:text-foreground cursor-pointer transition-colors text-xs";
+var reactionEmojiStyles = "text-sm";
+var reactionCountStyles = "text-xs font-medium tabular-nums";
+
+// ../react-reaction-bar/dist/index.js
+var ReactionBar = React.forwardRef(
+  function ReactionBar2({ reactions, onToggle, onAdd, showAddButton = true, className }, ref) {
+    const api = createReactionBar({ reactions, onToggle, onAdd });
+    return React.createElement(
+      "div",
+      { ref, ...api.ariaProps, className: cn(reactionBarStyles, className) },
+      api.reactions.map(
+        (reaction, i) => React.createElement(
+          "button",
+          {
+            key: `${reaction.emoji}-${i}`,
+            type: "button",
+            className: reactionPillVariants({
+              state: reaction.userReacted ? "active" : "inactive"
+            }),
+            onClick: () => api.toggle(reaction.emoji),
+            ...api.getReactionAriaProps(reaction)
+          },
+          React.createElement("span", { className: reactionEmojiStyles }, reaction.emoji),
+          React.createElement("span", { className: reactionCountStyles }, reaction.count)
+        )
+      ),
+      showAddButton && React.createElement(
+        "button",
+        {
+          type: "button",
+          className: reactionAddButtonStyles,
+          onClick: () => onAdd?.("\u{1F44D}"),
+          ...api.addButtonAriaProps
+        },
+        "+"
+      )
+    );
+  }
+);
+export {
+  ReactionBar,
+  reactionAddButtonStyles,
+  reactionBarStyles,
+  reactionCountStyles,
+  reactionEmojiStyles,
+  reactionPillVariants
+};
+//# sourceMappingURL=react-reaction-bar.js.map

package/dist/react-reaction-bar.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../reaction-bar/src/reaction-bar.ts", "../../reaction-bar/src/reaction-bar.styles.ts", "../../react-reaction-bar/src/reaction-bar.tsx"],
+  "sourcesContent": ["import { generateId } from '@refraction-ui/shared'\n\nexport interface Reaction {\n  /** The emoji character */\n  emoji: string\n  /** Number of users who reacted with this emoji */\n  count: number\n  /** Whether the current user has reacted */\n  userReacted: boolean\n}\n\nexport interface ReactionBarProps {\n  /** Current reactions */\n  reactions: Reaction[]\n  /** Callback when a reaction is toggled */\n  onToggle?: (emoji: string) => void\n  /** Callback when a new reaction is added */\n  onAdd?: (emoji: string) => void\n}\n\nexport interface ReactionBarAPI {\n  /** Current reactions */\n  reactions: Reaction[]\n  /** Toggle a reaction */\n  toggle(emoji: string): void\n  /** Add a new reaction */\n  add(emoji: string): void\n  /** ARIA props for the reaction bar container */\n  ariaProps: Record<string, string | number | boolean>\n  /** Get ARIA props for an individual reaction pill */\n  getReactionAriaProps(reaction: Reaction): Record<string, unknown>\n  /** ARIA props for the \"add reaction\" button */\n  addButtonAriaProps: Record<string, unknown>\n  /** Generated IDs */\n  ids: {\n    container: string\n    label: string\n  }\n}\n\nexport function createReactionBar(props: ReactionBarProps): ReactionBarAPI {\n  const { reactions, onToggle, onAdd } = props\n\n  const containerId = generateId('rfr-reactions')\n  const labelId = generateId('rfr-reactions-label')\n\n  function toggle(emoji: string): void {\n    onToggle?.(emoji)\n  }\n\n  function add(emoji: string): void {\n    onAdd?.(emoji)\n  }\n\n  const ariaProps: Record<string, string | number | boolean> = {\n    role: 'group',\n    'aria-label': 'Reactions',\n    id: containerId,\n  }\n\n  function getReactionAriaProps(reaction: Reaction): Record<string, unknown> {\n    return {\n      role: 'button',\n      'aria-pressed': reaction.userReacted,\n      'aria-label': `${reaction.emoji} ${reaction.count} reaction${reaction.count === 1 ? '' : 's'}${reaction.userReacted ? ', you reacted' : ''}`,\n    }\n  }\n\n  const addButtonAriaProps: Record<string, unknown> = {\n    role: 'button',\n    'aria-label': 'Add reaction',\n  }\n\n  return {\n    reactions,\n    toggle,\n    add,\n    ariaProps,\n    getReactionAriaProps,\n    addButtonAriaProps,\n    ids: {\n      container: containerId,\n      label: labelId,\n    },\n  }\n}\n", "import { cva } from '@refraction-ui/shared'\n\nexport const reactionBarStyles =\n  'flex flex-wrap items-center gap-1'\n\nexport const reactionPillVariants = cva({\n  base: 'inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-xs cursor-pointer transition-colors hover:bg-accent',\n  variants: {\n    state: {\n      active: 'border-primary bg-primary/10 text-primary',\n      inactive: 'border-border bg-background text-foreground',\n    },\n  },\n  defaultVariants: {\n    state: 'inactive',\n  },\n})\n\nexport const reactionAddButtonStyles =\n  'inline-flex items-center justify-center h-6 w-6 rounded-full border border-dashed border-muted-foreground/30 text-muted-foreground hover:border-muted-foreground hover:text-foreground cursor-pointer transition-colors text-xs'\n\nexport const reactionEmojiStyles = 'text-sm'\nexport const reactionCountStyles = 'text-xs font-medium tabular-nums'\n", "import * as React from 'react'\nimport {\n  createReactionBar,\n  reactionBarStyles,\n  reactionPillVariants,\n  reactionAddButtonStyles,\n  reactionEmojiStyles,\n  reactionCountStyles,\n  type Reaction,\n} from '@refraction-ui/reaction-bar'\nimport { cn } from '@refraction-ui/shared'\n\nexport interface ReactionBarProps {\n  reactions: Reaction[]\n  onToggle?: (emoji: string) => void\n  onAdd?: (emoji: string) => void\n  showAddButton?: boolean\n  className?: string\n}\n\nexport const ReactionBar = React.forwardRef<HTMLDivElement, ReactionBarProps>(\n  function ReactionBar({ reactions, onToggle, onAdd, showAddButton = true, className }, ref) {\n  const api = createReactionBar({ reactions, onToggle, onAdd })\n\n  return React.createElement(\n    'div',\n    { ref, ...api.ariaProps, className: cn(reactionBarStyles, className) },\n    api.reactions.map((reaction, i) =>\n      React.createElement(\n        'button',\n        {\n          key: `${reaction.emoji}-${i}`,\n          type: 'button',\n          className: reactionPillVariants({\n            state: reaction.userReacted ? 'active' : 'inactive',\n          }),\n          onClick: () => api.toggle(reaction.emoji),\n          ...api.getReactionAriaProps(reaction),\n        },\n        React.createElement('span', { className: reactionEmojiStyles }, reaction.emoji),\n        React.createElement('span', { className: reactionCountStyles }, reaction.count),\n      ),\n    ),\n    showAddButton &&\n      React.createElement(\n        'button',\n        {\n          type: 'button',\n          className: reactionAddButtonStyles,\n          onClick: () => onAdd?.('\\u{1F44D}'),\n          ...api.addButtonAriaProps,\n        },\n        '+',\n      ),\n  )\n  },\n)\n"],
+  "mappings": ";;;;;;;;;;AAwCO,SAAS,kBAAkB,OAAyC;AACzE,QAAM,EAAE,WAAW,UAAU,MAAA,IAAU;AAEvC,QAAM,cAAc,WAAW,eAAe;AAC9C,QAAM,UAAU,WAAW,qBAAqB;AAEhD,WAAS,OAAO,OAAqB;AACnC,eAAW,KAAK;EAClB;AAEA,WAAS,IAAI,OAAqB;AAChC,YAAQ,KAAK;EACf;AAEA,QAAM,YAAuD;IAC3D,MAAM;IACN,cAAc;IACd,IAAI;EAAA;AAGN,WAAS,qBAAqB,UAA6C;AACzE,WAAO;MACL,MAAM;MACN,gBAAgB,SAAS;MACzB,cAAc,GAAG,SAAS,KAAK,IAAI,SAAS,KAAK,YAAY,SAAS,UAAU,IAAI,KAAK,GAAG,GAAG,SAAS,cAAc,kBAAkB,EAAE;IAAA;EAE9I;AAEA,QAAM,qBAA8C;IAClD,MAAM;IACN,cAAc;EAAA;AAGhB,SAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACA,KAAK;MACH,WAAW;MACX,OAAO;IAAA;EACT;AAEJ;ACnFO,IAAM,oBACX;AAEK,IAAM,uBAAuB,IAAI;EACtC,MAAM;EACN,UAAU;IACR,OAAO;MACL,QAAQ;MACR,UAAU;IAAA;EACZ;EAEF,iBAAiB;IACf,OAAO;EAAA;AAEX,CAAC;AAEM,IAAM,0BACX;AAEK,IAAM,sBAAsB;AAC5B,IAAM,sBAAsB;;;ACF5B,IAAM,cAAoB;EAC/B,SAASA,aAAY,EAAE,WAAW,UAAU,OAAO,gBAAgB,MAAM,UAAA,GAAa,KAAK;AAC3F,UAAM,MAAM,kBAAkB,EAAE,WAAW,UAAU,MAAA,CAAO;AAE5D,WAAa;MACX;MACA,EAAE,KAAK,GAAG,IAAI,WAAW,WAAW,GAAG,mBAAmB,SAAS,EAAA;MACnE,IAAI,UAAU;QAAI,CAAC,UAAU,MACrB;UACJ;UACA;YACE,KAAK,GAAG,SAAS,KAAK,IAAI,CAAC;YAC3B,MAAM;YACN,WAAW,qBAAqB;cAC9B,OAAO,SAAS,cAAc,WAAW;YAAA,CAC1C;YACD,SAAS,MAAM,IAAI,OAAO,SAAS,KAAK;YACxC,GAAG,IAAI,qBAAqB,QAAQ;UAAA;UAEhC,oBAAc,QAAQ,EAAE,WAAW,oBAAA,GAAuB,SAAS,KAAK;UACxE,oBAAc,QAAQ,EAAE,WAAW,oBAAA,GAAuB,SAAS,KAAK;QAAA;MAChF;MAEF,iBACQ;QACJ;QACA;UACE,MAAM;UACN,WAAW;UACX,SAAS,MAAM,QAAQ,WAAW;UAClC,GAAG,IAAI;QAAA;QAET;MAAA;IACF;EAEJ;AACF;",
+  "names": ["ReactionBar"]
+}

package/dist/react-resizable-layout.js

@@ -0,0 +1,298 @@
+import {
+  cn,
+  cva,
+  devWarn
+} from "./chunk-ZF3OHCGV.js";
+
+// ../react-resizable-layout/dist/index.js
+import * as React from "react";
+
+// ../resizable-layout/dist/index.js
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+function createResizableLayout(props = {}) {
+  const {
+    orientation = "horizontal",
+    defaultSizes = [50, 50],
+    minSizes = [],
+    maxSizes = [],
+    persistKey
+  } = props;
+  const sizes = loadSizes(persistKey) ?? [...defaultSizes];
+  let resizingIndex = null;
+  let sizesBeforeResize = [];
+  function loadSizes(key) {
+    if (!key) return null;
+    try {
+      if (typeof globalThis.localStorage !== "undefined") {
+        const stored = globalThis.localStorage.getItem(key);
+        if (stored) {
+          const parsed = JSON.parse(stored);
+          if (Array.isArray(parsed) && parsed.length === defaultSizes.length) {
+            return parsed;
+          }
+        }
+      }
+    } catch {
+    }
+    return null;
+  }
+  function saveSizes(key, values) {
+    try {
+      if (typeof globalThis.localStorage !== "undefined") {
+        globalThis.localStorage.setItem(key, JSON.stringify(values));
+      }
+    } catch {
+    }
+  }
+  function getMinSize(index) {
+    return minSizes[index] ?? 0;
+  }
+  function getMaxSize(index) {
+    return maxSizes[index] ?? 100;
+  }
+  function startResize(index) {
+    resizingIndex = index;
+    sizesBeforeResize = [...sizes];
+  }
+  function onResize(delta) {
+    if (resizingIndex === null) return;
+    const i = resizingIndex;
+    const j = i + 1;
+    if (j >= sizes.length) return;
+    const totalAvailable = sizesBeforeResize[i] + sizesBeforeResize[j];
+    let newSizeI = sizesBeforeResize[i] + delta;
+    newSizeI = clamp(newSizeI, getMinSize(i), getMaxSize(i));
+    let newSizeJ = totalAvailable - newSizeI;
+    newSizeJ = clamp(newSizeJ, getMinSize(j), getMaxSize(j));
+    newSizeI = totalAvailable - newSizeJ;
+    sizes[i] = newSizeI;
+    sizes[j] = newSizeJ;
+  }
+  function endResize() {
+    resizingIndex = null;
+    sizesBeforeResize = [];
+    if (persistKey) {
+      saveSizes(persistKey, sizes);
+    }
+  }
+  function getCSSVariables() {
+    const vars = {};
+    for (let i = 0; i < sizes.length; i++) {
+      vars[`--rfr-pane-${i}-size`] = `${sizes[i]}%`;
+    }
+    return vars;
+  }
+  return {
+    sizes,
+    startResize,
+    onResize,
+    endResize,
+    getCSSVariables,
+    orientation
+  };
+}
+var resizableLayoutTokens = {
+  name: "resizable-layout",
+  tokens: {
+    dividerColor: { variable: "--rfr-resizable-divider-color", fallback: "hsl(var(--border))" },
+    dividerHover: { variable: "--rfr-resizable-divider-hover", fallback: "hsl(var(--primary))" },
+    dividerSize: { variable: "--rfr-resizable-divider-size", fallback: "4px" }
+  }
+};
+var resizableLayoutVariants = cva({
+  base: "flex h-full w-full",
+  variants: {
+    orientation: {
+      horizontal: "flex-row",
+      vertical: "flex-col"
+    }
+  },
+  defaultVariants: {
+    orientation: "horizontal"
+  }
+});
+var resizableDividerVariants = cva({
+  base: "relative flex items-center justify-center bg-border transition-colors hover:bg-primary/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 active:bg-primary/70",
+  variants: {
+    orientation: {
+      horizontal: "w-1 cursor-col-resize",
+      vertical: "h-1 cursor-row-resize"
+    }
+  },
+  defaultVariants: {
+    orientation: "horizontal"
+  }
+});
+var resizablePaneVariants = cva({
+  base: "overflow-auto",
+  variants: {
+    orientation: {
+      horizontal: "h-full",
+      vertical: "w-full"
+    }
+  },
+  defaultVariants: {
+    orientation: "horizontal"
+  }
+});
+
+// ../react-resizable-layout/dist/index.js
+import { jsx } from "react/jsx-runtime";
+var ResizableLayoutContext = React.createContext(null);
+function useResizableLayoutContext() {
+  const ctx = React.useContext(ResizableLayoutContext);
+  if (!ctx) {
+    devWarn(
+      "react-resizable-layout/compound-outside-provider",
+      "A Resizable compound component was rendered outside of <ResizableLayout>. Wrap it in <ResizableLayout>."
+    );
+    throw new Error("Resizable compound components must be used within <ResizableLayout>");
+  }
+  return ctx;
+}
+var ResizableLayout = React.forwardRef(
+  function ResizableLayout2({
+    orientation = "horizontal",
+    defaultSizes = [50, 50],
+    minSizes,
+    maxSizes,
+    persistKey,
+    onSizesChange,
+    className,
+    style,
+    children,
+    ...props
+  }, ref) {
+    const apiRef = React.useRef(null);
+    if (!apiRef.current) {
+      apiRef.current = createResizableLayout({
+        orientation,
+        defaultSizes,
+        minSizes,
+        maxSizes,
+        persistKey
+      });
+    }
+    const api = apiRef.current;
+    const [sizes, setSizesState] = React.useState(api.sizes);
+    const setSizes = React.useCallback(
+      (newSizes) => {
+        setSizesState([...newSizes]);
+        onSizesChange?.(newSizes);
+      },
+      [onSizesChange]
+    );
+    const cssVars = React.useMemo(() => {
+      const vars = {};
+      for (let i = 0; i < sizes.length; i++) {
+        vars[`--rfr-pane-${i}-size`] = `${sizes[i]}%`;
+      }
+      return vars;
+    }, [sizes]);
+    const contextValue = React.useMemo(
+      () => ({ api, orientation, sizes, setSizes }),
+      [api, orientation, sizes, setSizes]
+    );
+    return /* @__PURE__ */ jsx(ResizableLayoutContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(resizableLayoutVariants({ orientation }), className),
+        style: { ...cssVars, ...style },
+        "data-orientation": orientation,
+        ...props,
+        children
+      }
+    ) });
+  }
+);
+var ResizablePane = React.forwardRef(
+  function ResizablePane2({ index, className, style, children, ...props }, ref) {
+    const { orientation, sizes } = useResizableLayoutContext();
+    const size = sizes[index] ?? 50;
+    const paneStyle = {
+      flexBasis: `${size}%`,
+      flexGrow: 0,
+      flexShrink: 0,
+      ...style
+    };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(resizablePaneVariants({ orientation }), className),
+        style: paneStyle,
+        "data-pane-index": index,
+        ...props,
+        children
+      }
+    );
+  }
+);
+var ResizableDivider = React.forwardRef(
+  function ResizableDivider2({ index, className, ...props }, ref) {
+    const { api, orientation, setSizes } = useResizableLayoutContext();
+    const startPosRef = React.useRef(0);
+    const containerSizeRef = React.useRef(0);
+    const onPointerDown = React.useCallback(
+      (e) => {
+        e.preventDefault();
+        const target = e.currentTarget;
+        target.setPointerCapture(e.pointerId);
+        const container = target.parentElement;
+        if (!container) return;
+        const rect = container.getBoundingClientRect();
+        containerSizeRef.current = orientation === "horizontal" ? rect.width : rect.height;
+        startPosRef.current = orientation === "horizontal" ? e.clientX : e.clientY;
+        api.startResize(index);
+      },
+      [api, index, orientation]
+    );
+    const onPointerMove = React.useCallback(
+      (e) => {
+        if (containerSizeRef.current === 0) return;
+        const currentPos = orientation === "horizontal" ? e.clientX : e.clientY;
+        const pxDelta = currentPos - startPosRef.current;
+        const pctDelta = pxDelta / containerSizeRef.current * 100;
+        api.onResize(pctDelta);
+        setSizes([...api.sizes]);
+      },
+      [api, orientation, setSizes]
+    );
+    const onPointerUp = React.useCallback(
+      (e) => {
+        e.currentTarget.releasePointerCapture(e.pointerId);
+        containerSizeRef.current = 0;
+        api.endResize();
+      },
+      [api]
+    );
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "separator",
+        "aria-orientation": orientation,
+        tabIndex: 0,
+        className: cn(resizableDividerVariants({ orientation }), className),
+        "data-divider-index": index,
+        onPointerDown,
+        onPointerMove,
+        onPointerUp,
+        ...props
+      }
+    );
+  }
+);
+export {
+  ResizableDivider,
+  ResizableLayout,
+  ResizablePane,
+  resizableDividerVariants,
+  resizableLayoutTokens,
+  resizableLayoutVariants,
+  resizablePaneVariants
+};
+//# sourceMappingURL=react-resizable-layout.js.map

package/dist/react-resizable-layout.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../resizable-layout/src/resizable-layout.ts", "../../resizable-layout/src/resizable-layout.styles.ts", "../../react-resizable-layout/src/resizable-layout.tsx"],
+  "sourcesContent": ["import type { Orientation } from '@refraction-ui/shared'\n\nexport interface ResizableLayoutProps {\n  orientation?: Orientation\n  /** Initial sizes as percentages (must sum to 100) */\n  defaultSizes?: number[]\n  /** Minimum size for each pane (percentage) */\n  minSizes?: number[]\n  /** Maximum size for each pane (percentage) */\n  maxSizes?: number[]\n  /** localStorage key for persisting sizes */\n  persistKey?: string\n}\n\nexport interface ResizableLayoutAPI {\n  /** Current pane sizes as percentages */\n  sizes: number[]\n  /** Begin a resize operation at divider index */\n  startResize: (index: number) => void\n  /** Apply a delta (percentage) during resize */\n  onResize: (delta: number) => void\n  /** End the current resize operation */\n  endResize: () => void\n  /** Generate CSS custom properties for pane sizes */\n  getCSSVariables: () => Record<string, string>\n  /** Current orientation */\n  orientation: Orientation\n}\n\n/**\n * Clamp a value between min and max.\n */\nfunction clamp(value: number, min: number, max: number): number {\n  return Math.min(Math.max(value, min), max)\n}\n\nexport function createResizableLayout(props: ResizableLayoutProps = {}): ResizableLayoutAPI {\n  const {\n    orientation = 'horizontal',\n    defaultSizes = [50, 50],\n    minSizes = [],\n    maxSizes = [],\n    persistKey,\n  } = props\n\n  const sizes = loadSizes(persistKey) ?? [...defaultSizes]\n  let resizingIndex: number | null = null\n  let sizesBeforeResize: number[] = []\n\n  function loadSizes(key?: string): number[] | null {\n    if (!key) return null\n    try {\n      if (typeof globalThis.localStorage !== 'undefined') {\n        const stored = globalThis.localStorage.getItem(key)\n        if (stored) {\n          const parsed = JSON.parse(stored) as number[]\n          if (Array.isArray(parsed) && parsed.length === defaultSizes.length) {\n            return parsed\n          }\n        }\n      }\n    } catch {\n      // localStorage not available or invalid data\n    }\n    return null\n  }\n\n  function saveSizes(key: string, values: number[]): void {\n    try {\n      if (typeof globalThis.localStorage !== 'undefined') {\n        globalThis.localStorage.setItem(key, JSON.stringify(values))\n      }\n    } catch {\n      // localStorage not available\n    }\n  }\n\n  function getMinSize(index: number): number {\n    return minSizes[index] ?? 0\n  }\n\n  function getMaxSize(index: number): number {\n    return maxSizes[index] ?? 100\n  }\n\n  function startResize(index: number): void {\n    resizingIndex = index\n    sizesBeforeResize = [...sizes]\n  }\n\n  function onResize(delta: number): void {\n    if (resizingIndex === null) return\n\n    const i = resizingIndex\n    const j = i + 1\n    if (j >= sizes.length) return\n\n    const totalAvailable = sizesBeforeResize[i] + sizesBeforeResize[j]\n\n    // Compute new size for pane i\n    let newSizeI = sizesBeforeResize[i] + delta\n    newSizeI = clamp(newSizeI, getMinSize(i), getMaxSize(i))\n\n    // Compute new size for pane j from remaining\n    let newSizeJ = totalAvailable - newSizeI\n    newSizeJ = clamp(newSizeJ, getMinSize(j), getMaxSize(j))\n\n    // Re-adjust pane i if pane j was constrained\n    newSizeI = totalAvailable - newSizeJ\n\n    sizes[i] = newSizeI\n    sizes[j] = newSizeJ\n  }\n\n  function endResize(): void {\n    resizingIndex = null\n    sizesBeforeResize = []\n    if (persistKey) {\n      saveSizes(persistKey, sizes)\n    }\n  }\n\n  function getCSSVariables(): Record<string, string> {\n    const vars: Record<string, string> = {}\n    for (let i = 0; i < sizes.length; i++) {\n      vars[`--rfr-pane-${i}-size`] = `${sizes[i]}%`\n    }\n    return vars\n  }\n\n  return {\n    sizes,\n    startResize,\n    onResize,\n    endResize,\n    getCSSVariables,\n    orientation,\n  }\n}\n", "import { cva } from '@refraction-ui/shared'\nimport type { TokenContract } from '@refraction-ui/shared'\n\nexport const resizableLayoutTokens: TokenContract = {\n  name: 'resizable-layout',\n  tokens: {\n    dividerColor: { variable: '--rfr-resizable-divider-color', fallback: 'hsl(var(--border))' },\n    dividerHover: { variable: '--rfr-resizable-divider-hover', fallback: 'hsl(var(--primary))' },\n    dividerSize: { variable: '--rfr-resizable-divider-size', fallback: '4px' },\n  },\n}\n\nexport const resizableLayoutVariants = cva({\n  base: 'flex h-full w-full',\n  variants: {\n    orientation: {\n      horizontal: 'flex-row',\n      vertical: 'flex-col',\n    },\n  },\n  defaultVariants: {\n    orientation: 'horizontal',\n  },\n})\n\nexport const resizableDividerVariants = cva({\n  base: 'relative flex items-center justify-center bg-border transition-colors hover:bg-primary/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 active:bg-primary/70',\n  variants: {\n    orientation: {\n      horizontal: 'w-1 cursor-col-resize',\n      vertical: 'h-1 cursor-row-resize',\n    },\n  },\n  defaultVariants: {\n    orientation: 'horizontal',\n  },\n})\n\nexport const resizablePaneVariants = cva({\n  base: 'overflow-auto',\n  variants: {\n    orientation: {\n      horizontal: 'h-full',\n      vertical: 'w-full',\n    },\n  },\n  defaultVariants: {\n    orientation: 'horizontal',\n  },\n})\n", "import * as React from 'react'\nimport {\n  createResizableLayout,\n  resizableLayoutVariants,\n  resizableDividerVariants,\n  resizablePaneVariants,\n  type ResizableLayoutProps as CoreProps,\n  type ResizableLayoutAPI,\n} from '@refraction-ui/resizable-layout'\nimport { cn, devWarn } from '@refraction-ui/shared'\nimport type { Orientation } from '@refraction-ui/shared'\n\n/* ------------------------------------------------------------------ */\n/*  Context                                                            */\n/* ------------------------------------------------------------------ */\n\ninterface ResizableLayoutContextValue {\n  api: ResizableLayoutAPI\n  orientation: Orientation\n  sizes: number[]\n  setSizes: (sizes: number[]) => void\n}\n\nconst ResizableLayoutContext = React.createContext<ResizableLayoutContextValue | null>(null)\n\nfunction useResizableLayoutContext(): ResizableLayoutContextValue {\n  const ctx = React.useContext(ResizableLayoutContext)\n  if (!ctx) {\n    devWarn(\n      'react-resizable-layout/compound-outside-provider',\n      'A Resizable compound component was rendered outside of <ResizableLayout>. Wrap it in <ResizableLayout>.',\n    )\n    throw new Error('Resizable compound components must be used within <ResizableLayout>')\n  }\n  return ctx\n}\n\n/* ------------------------------------------------------------------ */\n/*  ResizableLayout (root)                                             */\n/* ------------------------------------------------------------------ */\n\nexport interface ResizableLayoutProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'defaultValue'> {\n  orientation?: Orientation\n  defaultSizes?: number[]\n  minSizes?: number[]\n  maxSizes?: number[]\n  persistKey?: string\n  onSizesChange?: (sizes: number[]) => void\n}\n\n/**\n * ResizableLayout — flex container with resizable panes separated by draggable dividers.\n * Uses pointer events for cross-platform drag support.\n */\nexport const ResizableLayout = React.forwardRef<HTMLDivElement, ResizableLayoutProps>(\n  function ResizableLayout(\n    {\n      orientation = 'horizontal',\n      defaultSizes = [50, 50],\n      minSizes,\n      maxSizes,\n      persistKey,\n      onSizesChange,\n      className,\n      style,\n      children,\n      ...props\n    },\n    ref,\n  ) {\n    const apiRef = React.useRef<ResizableLayoutAPI | null>(null)\n\n    if (!apiRef.current) {\n      apiRef.current = createResizableLayout({\n        orientation,\n        defaultSizes,\n        minSizes,\n        maxSizes,\n        persistKey,\n      })\n    }\n\n    const api = apiRef.current\n    const [sizes, setSizesState] = React.useState<number[]>(api.sizes)\n\n    const setSizes = React.useCallback(\n      (newSizes: number[]) => {\n        setSizesState([...newSizes])\n        onSizesChange?.(newSizes)\n      },\n      [onSizesChange],\n    )\n\n    const cssVars = React.useMemo(() => {\n      const vars: Record<string, string> = {}\n      for (let i = 0; i < sizes.length; i++) {\n        vars[`--rfr-pane-${i}-size`] = `${sizes[i]}%`\n      }\n      return vars\n    }, [sizes])\n\n    const contextValue = React.useMemo<ResizableLayoutContextValue>(\n      () => ({ api, orientation, sizes, setSizes }),\n      [api, orientation, sizes, setSizes],\n    )\n\n    return (\n      <ResizableLayoutContext.Provider value={contextValue}>\n        <div\n          ref={ref}\n          className={cn(resizableLayoutVariants({ orientation }), className)}\n          style={{ ...cssVars, ...style }}\n          data-orientation={orientation}\n          {...props}\n        >\n          {children}\n        </div>\n      </ResizableLayoutContext.Provider>\n    )\n  },\n)\n\n/* ------------------------------------------------------------------ */\n/*  ResizablePane                                                      */\n/* ------------------------------------------------------------------ */\n\nexport interface ResizablePaneProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Zero-based index of this pane (order in the layout) */\n  index: number\n}\n\n/**\n * ResizablePane — a single pane whose size is driven by CSS custom properties.\n */\nexport const ResizablePane = React.forwardRef<HTMLDivElement, ResizablePaneProps>(\n  function ResizablePane({ index, className, style, children, ...props }, ref) {\n    const { orientation, sizes } = useResizableLayoutContext()\n    const size = sizes[index] ?? 50\n\n    const paneStyle: React.CSSProperties = {\n      flexBasis: `${size}%`,\n      flexGrow: 0,\n      flexShrink: 0,\n      ...style,\n    }\n\n    return (\n      <div\n        ref={ref}\n        className={cn(resizablePaneVariants({ orientation }), className)}\n        style={paneStyle}\n        data-pane-index={index}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  },\n)\n\n/* ------------------------------------------------------------------ */\n/*  ResizableDivider                                                   */\n/* ------------------------------------------------------------------ */\n\nexport interface ResizableDividerProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Index of the divider (between pane[index] and pane[index+1]) */\n  index: number\n}\n\n/**\n * ResizableDivider — draggable handle between two panes.\n * Uses pointer events for cross-platform drag support (mouse + touch).\n */\nexport const ResizableDivider = React.forwardRef<HTMLDivElement, ResizableDividerProps>(\n  function ResizableDivider({ index, className, ...props }, ref) {\n    const { api, orientation, setSizes } = useResizableLayoutContext()\n    const startPosRef = React.useRef<number>(0)\n    const containerSizeRef = React.useRef<number>(0)\n\n    const onPointerDown = React.useCallback(\n      (e: React.PointerEvent<HTMLDivElement>) => {\n        e.preventDefault()\n        const target = e.currentTarget\n        target.setPointerCapture(e.pointerId)\n\n        // Get the container size to convert px delta to percentage\n        const container = target.parentElement\n        if (!container) return\n\n        const rect = container.getBoundingClientRect()\n        containerSizeRef.current =\n          orientation === 'horizontal' ? rect.width : rect.height\n        startPosRef.current =\n          orientation === 'horizontal' ? e.clientX : e.clientY\n\n        api.startResize(index)\n      },\n      [api, index, orientation],\n    )\n\n    const onPointerMove = React.useCallback(\n      (e: React.PointerEvent<HTMLDivElement>) => {\n        if (containerSizeRef.current === 0) return\n\n        const currentPos =\n          orientation === 'horizontal' ? e.clientX : e.clientY\n        const pxDelta = currentPos - startPosRef.current\n        const pctDelta = (pxDelta / containerSizeRef.current) * 100\n\n        api.onResize(pctDelta)\n        setSizes([...api.sizes])\n      },\n      [api, orientation, setSizes],\n    )\n\n    const onPointerUp = React.useCallback(\n      (e: React.PointerEvent<HTMLDivElement>) => {\n        e.currentTarget.releasePointerCapture(e.pointerId)\n        containerSizeRef.current = 0\n        api.endResize()\n      },\n      [api],\n    )\n\n    return (\n      <div\n        ref={ref}\n        role=\"separator\"\n        aria-orientation={orientation}\n        tabIndex={0}\n        className={cn(resizableDividerVariants({ orientation }), className)}\n        data-divider-index={index}\n        onPointerDown={onPointerDown}\n        onPointerMove={onPointerMove}\n        onPointerUp={onPointerUp}\n        {...props}\n      />\n    )\n  },\n)\n"],
+  "mappings": "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",
+  "names": ["ResizableLayout", "ResizablePane", "ResizableDivider"]
+}