@refraction-ui/react 0.19.1 → 0.20.0

package/dist/react-call-controls.js

@@ -0,0 +1,113 @@
+import {
+  cn,
+  cva
+} from "./chunk-ZF3OHCGV.js";
+
+// ../react-call-controls/dist/index.js
+import * as React from "react";
+
+// ../call-controls/dist/index.js
+function createCallControls(_props = {}) {
+  const ariaProps = {
+    role: "toolbar",
+    "aria-label": "Call controls"
+  };
+  const dataAttributes = {
+    "data-component": "call-controls"
+  };
+  return { ariaProps, dataAttributes };
+}
+var callControlsVariants = cva({
+  base: [
+    "inline-flex items-center justify-center gap-2",
+    "rounded-xl bg-card px-4 py-3",
+    "shadow-sm border border-border"
+  ].join(" "),
+  variants: {
+    size: {
+      sm: "gap-1.5 px-3 py-2",
+      md: "gap-2 px-4 py-3"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+var callControlButtonVariants = cva({
+  base: [
+    "inline-flex flex-col items-center justify-center rounded-full",
+    "font-medium 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",
+    "cursor-pointer"
+  ].join(" "),
+  variants: {
+    size: {
+      sm: "size-9 text-xs",
+      md: "size-11 text-xs"
+    },
+    tone: {
+      default: "bg-muted text-foreground hover:bg-muted/80",
+      active: "bg-primary text-primary-foreground hover:bg-primary/90",
+      destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90"
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    tone: "default"
+  }
+});
+var callControlLabelClass = "sr-only text-[10px] leading-none mt-0.5";
+
+// ../react-call-controls/dist/index.js
+import { jsxs, jsx } from "react/jsx-runtime";
+var CallControlButton = React.forwardRef(
+  function CallControlButton2({
+    label,
+    icon,
+    tone = "default",
+    pressed,
+    size = "md",
+    className,
+    ...props
+  }, ref) {
+    const ariaPressedProps = pressed !== void 0 ? { "aria-pressed": pressed } : {};
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref,
+        type: "button",
+        "aria-label": label,
+        ...ariaPressedProps,
+        className: cn(callControlButtonVariants({ tone, size }), className),
+        ...props,
+        children: [
+          icon,
+          /* @__PURE__ */ jsx("span", { className: callControlLabelClass, children: label })
+        ]
+      }
+    );
+  }
+);
+var CallControls = React.forwardRef(
+  function CallControls2({ size = "md", className, children, ...props }, ref) {
+    const api = createCallControls();
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(callControlsVariants({ size }), className),
+        ...api.ariaProps,
+        ...api.dataAttributes,
+        ...props,
+        children
+      }
+    );
+  }
+);
+export {
+  CallControlButton,
+  CallControls
+};
+//# sourceMappingURL=react-call-controls.js.map

package/dist/react-call-controls.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../call-controls/src/call-controls.ts", "../../call-controls/src/call-controls.styles.ts", "../../react-call-controls/src/call-controls.tsx"],
+  "sourcesContent": ["/** Visual/semantic tone of a call control button. */\nexport type CallControlTone = 'default' | 'active' | 'destructive'\n\n/**\n * Toggleable state for controls like mic or camera.\n * `'on'`  = currently active (mic/camera live).\n * `'off'` = currently muted/disabled.\n */\nexport type CallControlState = 'on' | 'off'\n\n/**\n * A single control descriptor used by adapters to drive button rendering.\n */\nexport interface CallControlItem {\n  /** Unique identifier for this control. */\n  id: string\n  /** Visible label (also used as aria-label). */\n  label: string\n  /** Optional icon to render inside the button. */\n  icon?: string\n  /** Explicit tone override; when omitted `controlTone` is used with `state`. */\n  tone?: CallControlTone\n  /** Toggleable state (present only for toggleable controls). */\n  pressed?: boolean\n}\n\nexport interface CallControlsProps {\n  /** Controls to render. */\n  controls?: CallControlItem[]\n}\n\nexport interface CallControlsAPI {\n  /** ARIA attributes to spread on the toolbar element (`role=\"toolbar\"`). */\n  ariaProps: Record<string, string | number | boolean>\n  /** Data attributes for styling hooks. */\n  dataAttributes: Record<string, string>\n}\n\n/**\n * Derive the visual tone for a control given its kind and current toggle state.\n *\n * Convention used by easyloops meeting toolbar:\n * - `leave` / `end`  → always `'destructive'`\n * - any control that is `'off'` (muted/stopped) → `'destructive'` to signal\n *   the user that something is disabled (e.g. mic muted = red indicator).\n * - a control that is `'on'` → `'active'` (lit up / highlighted).\n * - otherwise → `'default'` (neutral).\n */\nexport function controlTone(\n  kind: string,\n  state: CallControlState | undefined,\n): CallControlTone {\n  const normalised = kind.toLowerCase()\n  if (normalised === 'leave' || normalised === 'end') return 'destructive'\n  if (state === 'off') return 'destructive'\n  if (state === 'on') return 'active'\n  return 'default'\n}\n\n/**\n * Build the framework-agnostic toolbar props for a call-controls bar.\n *\n * Returns `role=\"toolbar\"` plus `aria-label=\"Call controls\"` and data\n * attributes; adapters spread these onto their container element.\n */\nexport function createCallControls(_props: CallControlsProps = {}): CallControlsAPI {\n  const ariaProps: Record<string, string | number | boolean> = {\n    role: 'toolbar',\n    'aria-label': 'Call controls',\n  }\n\n  const dataAttributes: Record<string, string> = {\n    'data-component': 'call-controls',\n  }\n\n  return { ariaProps, dataAttributes }\n}\n", "import { cva } from '@refraction-ui/shared'\n\n/**\n * Toolbar container — flex row, centred, with a card background and gap\n * between the control buttons.\n */\nexport const callControlsVariants = cva({\n  base: [\n    'inline-flex items-center justify-center gap-2',\n    'rounded-xl bg-card px-4 py-3',\n    'shadow-sm border border-border',\n  ].join(' '),\n  variants: {\n    size: {\n      sm: 'gap-1.5 px-3 py-2',\n      md: 'gap-2 px-4 py-3',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n})\n\n/**\n * Individual call-control button.\n *\n * `tone` variants:\n * - `default`     → neutral muted appearance (standard inactive controls)\n * - `active`      → primary/highlighted (e.g. mic on, screen-share running)\n * - `destructive` → red/danger (leave button or a muted mic indicator)\n *\n * `size` variants match the toolbar container.\n */\nexport const callControlButtonVariants = cva({\n  base: [\n    'inline-flex flex-col items-center justify-center rounded-full',\n    'font-medium transition-colors',\n    '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    'cursor-pointer',\n  ].join(' '),\n  variants: {\n    size: {\n      sm: 'size-9 text-xs',\n      md: 'size-11 text-xs',\n    },\n    tone: {\n      default: 'bg-muted text-foreground hover:bg-muted/80',\n      active: 'bg-primary text-primary-foreground hover:bg-primary/90',\n      destructive:\n        'bg-destructive text-destructive-foreground hover:bg-destructive/90',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n    tone: 'default',\n  },\n})\n\n/** Label beneath the icon inside a call-control button. */\nexport const callControlLabelClass =\n  'sr-only text-[10px] leading-none mt-0.5'\n", "import * as React from 'react'\nimport {\n  createCallControls,\n  callControlsVariants,\n  callControlButtonVariants,\n  callControlLabelClass,\n  type CallControlTone,\n  type CallControlItem,\n} from '@refraction-ui/call-controls'\nimport { cn } from '@refraction-ui/shared'\n\nexport type { CallControlTone, CallControlItem }\n\n// ─── CallControlButton ────────────────────────────────────────────────────────\n\nexport interface CallControlButtonProps\n  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color' | 'content'> {\n  /** Accessible label (used as aria-label and visible to screen readers). */\n  label: string\n  /** Optional icon node rendered inside the button. */\n  icon?: React.ReactNode\n  /** Visual/semantic tone of the button. */\n  tone?: CallControlTone\n  /**\n   * Whether this control is currently in a \"pressed\" / toggled-on state.\n   * When provided, the button gains `aria-pressed`.\n   */\n  pressed?: boolean\n  /** Visual size of the button. */\n  size?: 'sm' | 'md'\n}\n\n/**\n * A single round meeting-control button with icon, accessible label,\n * tone variants (default / active / destructive), and optional aria-pressed\n * for toggleable controls (mic, camera, screen-share).\n */\nexport const CallControlButton = React.forwardRef<\n  HTMLButtonElement,\n  CallControlButtonProps\n>(\n  function CallControlButton(\n    {\n      label,\n      icon,\n      tone = 'default',\n      pressed,\n      size = 'md',\n      className,\n      ...props\n    },\n    ref,\n  ) {\n    const ariaPressedProps =\n      pressed !== undefined ? { 'aria-pressed': pressed } : {}\n\n    return (\n      <button\n        ref={ref}\n        type=\"button\"\n        aria-label={label}\n        {...ariaPressedProps}\n        className={cn(callControlButtonVariants({ tone, size }), className)}\n        {...props}\n      >\n        {icon}\n        <span className={callControlLabelClass}>{label}</span>\n      </button>\n    )\n  },\n)\n\n// ─── CallControls ─────────────────────────────────────────────────────────────\n\nexport interface CallControlsProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color' | 'content'> {\n  /** Visual size passed down to child buttons when using the composable API. */\n  size?: 'sm' | 'md'\n}\n\n/**\n * Toolbar wrapper for a set of meeting-control buttons.\n *\n * Composable: render `<CallControlButton>` children directly.\n *\n * ```tsx\n * <CallControls>\n *   <CallControlButton label=\"Mute\" icon={<MicIcon />} tone=\"active\" pressed={true} />\n *   <CallControlButton label=\"Leave\" tone=\"destructive\" />\n * </CallControls>\n * ```\n */\nexport const CallControls = React.forwardRef<HTMLDivElement, CallControlsProps>(\n  function CallControls({ size = 'md', className, children, ...props }, ref) {\n    const api = createCallControls()\n\n    return (\n      <div\n        ref={ref}\n        className={cn(callControlsVariants({ size }), className)}\n        {...api.ariaProps}\n        {...api.dataAttributes}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  },\n)\n"],
+  "mappings": ";;;;;;;;;AAiEO,SAAS,mBAAmB,SAA4B,CAAA,GAAqB;AAClF,QAAM,YAAuD;IAC3D,MAAM;IACN,cAAc;EAAA;AAGhB,QAAM,iBAAyC;IAC7C,kBAAkB;EAAA;AAGpB,SAAO,EAAE,WAAW,eAAA;AACtB;ACtEO,IAAM,uBAAuB,IAAI;EACtC,MAAM;IACJ;IACA;IACA;EAAA,EACA,KAAK,GAAG;EACV,UAAU;IACR,MAAM;MACJ,IAAI;MACJ,IAAI;IAAA;EACN;EAEF,iBAAiB;IACf,MAAM;EAAA;AAEV,CAAC;AAYM,IAAM,4BAA4B,IAAI;EAC3C,MAAM;IACJ;IACA;IACA;IACA;IACA;IACA;EAAA,EACA,KAAK,GAAG;EACV,UAAU;IACR,MAAM;MACJ,IAAI;MACJ,IAAI;IAAA;IAEN,MAAM;MACJ,SAAS;MACT,QAAQ;MACR,aACE;IAAA;EACJ;EAEF,iBAAiB;IACf,MAAM;IACN,MAAM;EAAA;AAEV,CAAC;AAGM,IAAM,wBACX;;;;ACzBK,IAAM,oBAA0B;EAIrC,SAASA,mBACP;IACE;IACA;IACA,OAAO;IACP;IACA,OAAO;IACP;IACA,GAAG;EAAA,GAEL,KACA;AACA,UAAM,mBACJ,YAAY,SAAY,EAAE,gBAAgB,QAAA,IAAY,CAAA;AAExD,WACE;MAAC;MAAA;QACC;QACA,MAAK;QACL,cAAY;QACX,GAAG;QACJ,WAAW,GAAG,0BAA0B,EAAE,MAAM,KAAA,CAAM,GAAG,SAAS;QACjE,GAAG;QAEH,UAAA;UAAA;UACD,oBAAC,QAAA,EAAK,WAAW,uBAAwB,UAAA,MAAA,CAAM;QAAA;MAAA;IAAA;EAGrD;AACF;AAsBO,IAAM,eAAqB;EAChC,SAASC,cAAa,EAAE,OAAO,MAAM,WAAW,UAAU,GAAG,MAAA,GAAS,KAAK;AACzE,UAAM,MAAM,mBAAA;AAEZ,WACE;MAAC;MAAA;QACC;QACA,WAAW,GAAG,qBAAqB,EAAE,KAAA,CAAM,GAAG,SAAS;QACtD,GAAG,IAAI;QACP,GAAG,IAAI;QACP,GAAG;QAEH;MAAA;IAAA;EAGP;AACF;",
+  "names": ["CallControlButton", "CallControls"]
+}

package/dist/react-callout.js

@@ -0,0 +1,152 @@
+import {
+  Slot
+} from "./chunk-WSPJTQAV.js";
+import {
+  cn,
+  cva
+} from "./chunk-ZF3OHCGV.js";
+
+// ../react-callout/dist/index.js
+import * as React from "react";
+
+// ../callout/dist/index.js
+function createCallout(props = {}) {
+  const ariaProps = {};
+  if (props.role) {
+    ariaProps.role = props.role;
+  } else {
+    ariaProps.role = "region";
+  }
+  return {
+    ariaProps,
+    dataAttributes: { "data-slot": "callout" }
+  };
+}
+function createCalloutIcon() {
+  return { dataAttributes: { "data-slot": "callout-icon" } };
+}
+function createCalloutContent() {
+  return { dataAttributes: { "data-slot": "callout-content" } };
+}
+function createCalloutTitle() {
+  return { dataAttributes: { "data-slot": "callout-title" } };
+}
+function createCalloutDescription() {
+  return { dataAttributes: { "data-slot": "callout-description" } };
+}
+var calloutVariants = cva({
+  base: "relative w-full rounded-lg border p-4 text-sm flex gap-3",
+  variants: {
+    variant: {
+      default: "bg-muted/50 border-border text-foreground",
+      destructive: "bg-destructive/10 border-destructive/20 text-destructive",
+      success: "bg-success/10 border-success/20 text-success",
+      warning: "bg-warning/10 border-warning/20 text-warning",
+      info: "bg-info/10 border-info/20 text-info"
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+var calloutTitleVariants = cva({
+  base: "font-semibold leading-none tracking-tight mb-1"
+});
+var calloutDescriptionVariants = cva({
+  base: "text-sm opacity-90 leading-relaxed"
+});
+
+// ../react-callout/dist/index.js
+import { jsx } from "react/jsx-runtime";
+var Callout = React.forwardRef(
+  function Callout2({ className, variant, asChild = false, ...props }, ref) {
+    const api = createCallout({ role: variant === "destructive" ? "alert" : "region" });
+    const classes = cn(calloutVariants({ variant }), className);
+    if (asChild) {
+      return /* @__PURE__ */ jsx(
+        Slot,
+        {
+          ref,
+          className: classes,
+          ...api.ariaProps,
+          ...api.dataAttributes,
+          ...props
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: classes,
+        ...api.ariaProps,
+        ...api.dataAttributes,
+        ...props
+      }
+    );
+  }
+);
+var CalloutIcon = React.forwardRef(
+  function CalloutIcon2({ className, ...props }, ref) {
+    const api = createCalloutIcon();
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn("flex-shrink-0 mt-0.5", className),
+        ...api.dataAttributes,
+        ...props
+      }
+    );
+  }
+);
+var CalloutContent = React.forwardRef(
+  function CalloutContent2({ className, ...props }, ref) {
+    const api = createCalloutContent();
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn("flex-1", className),
+        ...api.dataAttributes,
+        ...props
+      }
+    );
+  }
+);
+var CalloutTitle = React.forwardRef(
+  function CalloutTitle2({ className, ...props }, ref) {
+    const api = createCalloutTitle();
+    return /* @__PURE__ */ jsx(
+      "h5",
+      {
+        ref,
+        className: cn(calloutTitleVariants(), className),
+        ...api.dataAttributes,
+        ...props
+      }
+    );
+  }
+);
+var CalloutDescription = React.forwardRef(
+  function CalloutDescription2({ className, ...props }, ref) {
+    const api = createCalloutDescription();
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(calloutDescriptionVariants(), className),
+        ...api.dataAttributes,
+        ...props
+      }
+    );
+  }
+);
+export {
+  Callout,
+  CalloutContent,
+  CalloutDescription,
+  CalloutIcon,
+  CalloutTitle
+};
+//# sourceMappingURL=react-callout.js.map

package/dist/react-callout.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../callout/src/callout.ts", "../../callout/src/callout.styles.ts", "../../react-callout/src/callout.tsx"],
+  "sourcesContent": ["import type { AccessibilityProps } from '@refraction-ui/shared'\n\nexport interface CalloutProps {\n  /** Optional accessible role override */\n  role?: string\n}\n\nexport interface CalloutAPI {\n  ariaProps: Partial<AccessibilityProps>\n  dataAttributes: Record<string, string>\n}\n\nexport function createCallout(props: CalloutProps = {}): CalloutAPI {\n  const ariaProps: Partial<AccessibilityProps> = {}\n  \n  // Callouts are usually alert or region depending on severity\n  if (props.role) {\n    ariaProps.role = props.role\n  } else {\n    ariaProps.role = 'region'\n  }\n\n  return {\n    ariaProps,\n    dataAttributes: { 'data-slot': 'callout' },\n  }\n}\n\nexport function createCalloutIcon(): { dataAttributes: Record<string, string> } {\n  return { dataAttributes: { 'data-slot': 'callout-icon' } }\n}\n\nexport function createCalloutContent(): { dataAttributes: Record<string, string> } {\n  return { dataAttributes: { 'data-slot': 'callout-content' } }\n}\n\nexport function createCalloutTitle(): { dataAttributes: Record<string, string> } {\n  return { dataAttributes: { 'data-slot': 'callout-title' } }\n}\n\nexport function createCalloutDescription(): { dataAttributes: Record<string, string> } {\n  return { dataAttributes: { 'data-slot': 'callout-description' } }\n}", "import { cva } from '@refraction-ui/shared'\n\nexport const calloutVariants = cva({\n  base: 'relative w-full rounded-lg border p-4 text-sm flex gap-3',\n  variants: {\n    variant: {\n      default: 'bg-muted/50 border-border text-foreground',\n      destructive: 'bg-destructive/10 border-destructive/20 text-destructive',\n      success: 'bg-success/10 border-success/20 text-success',\n      warning: 'bg-warning/10 border-warning/20 text-warning',\n      info: 'bg-info/10 border-info/20 text-info',\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n  },\n})\n\nexport const calloutTitleVariants = cva({\n  base: 'font-semibold leading-none tracking-tight mb-1',\n})\n\nexport const calloutDescriptionVariants = cva({\n  base: 'text-sm opacity-90 leading-relaxed',\n})\n", "import * as React from 'react'\nimport {\n  createCallout,\n  createCalloutIcon,\n  createCalloutContent,\n  createCalloutTitle,\n  createCalloutDescription,\n  calloutVariants,\n  calloutTitleVariants,\n  calloutDescriptionVariants,\n} from '@refraction-ui/callout'\nimport { cn } from '@refraction-ui/shared'\nimport { Slot } from '@refraction-ui/react-slot'\n\nexport interface CalloutProps extends React.HTMLAttributes<HTMLDivElement> {\n  variant?: 'default' | 'destructive' | 'success' | 'warning' | 'info'\n  /** Merge the callout's classes/props onto the single child element instead\n   * of rendering a `<div>` (Radix-style `asChild`). Expects exactly one React\n   * element child. */\n  asChild?: boolean\n}\n\nexport const Callout = React.forwardRef<HTMLDivElement, CalloutProps>(\n  function Callout({ className, variant, asChild = false, ...props }, ref) {\n    const api = createCallout({ role: variant === 'destructive' ? 'alert' : 'region' })\n    const classes = cn(calloutVariants({ variant }), className)\n\n    if (asChild) {\n      return (\n        <Slot\n          ref={ref as React.Ref<HTMLElement>}\n          className={classes}\n          {...api.ariaProps}\n          {...api.dataAttributes}\n          {...props}\n        />\n      )\n    }\n\n    return (\n      <div\n        ref={ref}\n        className={classes}\n        {...api.ariaProps}\n        {...api.dataAttributes}\n        {...props}\n      />\n    )\n  },\n)\n\nexport const CalloutIcon = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  function CalloutIcon({ className, ...props }, ref) {\n    const api = createCalloutIcon()\n    return (\n      <div\n        ref={ref}\n        className={cn('flex-shrink-0 mt-0.5', className)}\n        {...api.dataAttributes}\n        {...props}\n      />\n    )\n  },\n)\n\nexport const CalloutContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  function CalloutContent({ className, ...props }, ref) {\n    const api = createCalloutContent()\n    return (\n      <div\n        ref={ref}\n        className={cn('flex-1', className)}\n        {...api.dataAttributes}\n        {...props}\n      />\n    )\n  },\n)\n\nexport const CalloutTitle = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(\n  function CalloutTitle({ className, ...props }, ref) {\n    const api = createCalloutTitle()\n    return (\n      <h5\n        ref={ref}\n        className={cn(calloutTitleVariants(), className)}\n        {...api.dataAttributes}\n        {...props}\n      />\n    )\n  },\n)\n\nexport const CalloutDescription = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  function CalloutDescription({ className, ...props }, ref) {\n    const api = createCalloutDescription()\n    return (\n      <div\n        ref={ref}\n        className={cn(calloutDescriptionVariants(), className)}\n        {...api.dataAttributes}\n        {...props}\n      />\n    )\n  },\n)\n"],
+  "mappings": ";;;;;;;;;;;;AAYO,SAAS,cAAc,QAAsB,CAAA,GAAgB;AAClE,QAAM,YAAyC,CAAA;AAG/C,MAAI,MAAM,MAAM;AACd,cAAU,OAAO,MAAM;EACzB,OAAO;AACL,cAAU,OAAO;EACnB;AAEA,SAAO;IACL;IACA,gBAAgB,EAAE,aAAa,UAAA;EAAU;AAE7C;AAEO,SAAS,oBAAgE;AAC9E,SAAO,EAAE,gBAAgB,EAAE,aAAa,eAAA,EAAe;AACzD;AAEO,SAAS,uBAAmE;AACjF,SAAO,EAAE,gBAAgB,EAAE,aAAa,kBAAA,EAAkB;AAC5D;AAEO,SAAS,qBAAiE;AAC/E,SAAO,EAAE,gBAAgB,EAAE,aAAa,gBAAA,EAAgB;AAC1D;AAEO,SAAS,2BAAuE;AACrF,SAAO,EAAE,gBAAgB,EAAE,aAAa,sBAAA,EAAsB;AAChE;ACxCO,IAAM,kBAAkB,IAAI;EACjC,MAAM;EACN,UAAU;IACR,SAAS;MACP,SAAS;MACT,aAAa;MACb,SAAS;MACT,SAAS;MACT,MAAM;IAAA;EACR;EAEF,iBAAiB;IACf,SAAS;EAAA;AAEb,CAAC;AAEM,IAAM,uBAAuB,IAAI;EACtC,MAAM;AACR,CAAC;AAEM,IAAM,6BAA6B,IAAI;EAC5C,MAAM;AACR,CAAC;;;;ACFM,IAAM,UAAgB;EAC3B,SAASA,SAAQ,EAAE,WAAW,SAAS,UAAU,OAAO,GAAG,MAAA,GAAS,KAAK;AACvE,UAAM,MAAM,cAAc,EAAE,MAAM,YAAY,gBAAgB,UAAU,SAAA,CAAU;AAClF,UAAM,UAAU,GAAG,gBAAgB,EAAE,QAAA,CAAS,GAAG,SAAS;AAE1D,QAAI,SAAS;AACX,aACE;QAAC;QAAA;UACC;UACA,WAAW;UACV,GAAG,IAAI;UACP,GAAG,IAAI;UACP,GAAG;QAAA;MAAA;IAGV;AAEA,WACE;MAAC;MAAA;QACC;QACA,WAAW;QACV,GAAG,IAAI;QACP,GAAG,IAAI;QACP,GAAG;MAAA;IAAA;EAGV;AACF;AAEO,IAAM,cAAoB;EAC/B,SAASC,aAAY,EAAE,WAAW,GAAG,MAAA,GAAS,KAAK;AACjD,UAAM,MAAM,kBAAA;AACZ,WACE;MAAC;MAAA;QACC;QACA,WAAW,GAAG,wBAAwB,SAAS;QAC9C,GAAG,IAAI;QACP,GAAG;MAAA;IAAA;EAGV;AACF;AAEO,IAAM,iBAAuB;EAClC,SAASC,gBAAe,EAAE,WAAW,GAAG,MAAA,GAAS,KAAK;AACpD,UAAM,MAAM,qBAAA;AACZ,WACE;MAAC;MAAA;QACC;QACA,WAAW,GAAG,UAAU,SAAS;QAChC,GAAG,IAAI;QACP,GAAG;MAAA;IAAA;EAGV;AACF;AAEO,IAAM,eAAqB;EAChC,SAASC,cAAa,EAAE,WAAW,GAAG,MAAA,GAAS,KAAK;AAClD,UAAM,MAAM,mBAAA;AACZ,WACE;MAAC;MAAA;QACC;QACA,WAAW,GAAG,qBAAA,GAAwB,SAAS;QAC9C,GAAG,IAAI;QACP,GAAG;MAAA;IAAA;EAGV;AACF;AAEO,IAAM,qBAA2B;EACtC,SAASC,oBAAmB,EAAE,WAAW,GAAG,MAAA,GAAS,KAAK;AACxD,UAAM,MAAM,yBAAA;AACZ,WACE;MAAC;MAAA;QACC;QACA,WAAW,GAAG,2BAAA,GAA8B,SAAS;QACpD,GAAG,IAAI;QACP,GAAG;MAAA;IAAA;EAGV;AACF;",
+  "names": ["Callout", "CalloutIcon", "CalloutContent", "CalloutTitle", "CalloutDescription"]
+}

package/dist/react-card-grid.js

@@ -0,0 +1,34 @@
+import {
+  cn
+} from "./chunk-ZF3OHCGV.js";
+
+// ../react-card-grid/dist/index.js
+import * as React from "react";
+
+// ../card-grid/dist/index.js
+function createCardGrid(_props = {}) {
+  return {
+    dataAttributes: { "data-slot": "card-grid" }
+  };
+}
+
+// ../react-card-grid/dist/index.js
+import { jsx } from "react/jsx-runtime";
+var CardGrid = React.forwardRef(
+  function CardGrid2({ className, columns = 3, ...props }, ref) {
+    const api = createCardGrid({ columns });
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(className),
+        ...api.dataAttributes,
+        ...props
+      }
+    );
+  }
+);
+export {
+  CardGrid
+};
+//# sourceMappingURL=react-card-grid.js.map

package/dist/react-card-grid.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../card-grid/src/card-grid.ts", "../../react-card-grid/src/card-grid.tsx"],
+  "sourcesContent": ["export interface CardGridProps {\n  columns?: number\n}\n\nexport function createCardGrid(_props: CardGridProps = {}) {\n  return {\n    dataAttributes: { 'data-slot': 'card-grid' }\n  }\n}", "import * as React from 'react'\nimport { createCardGrid, type CardGridProps } from '@refraction-ui/card-grid'\nimport { cn } from '@refraction-ui/shared'\n\nexport interface ReactCardGridProps extends React.HTMLAttributes<HTMLDivElement>, CardGridProps {}\n\nexport const CardGrid = React.forwardRef<HTMLDivElement, ReactCardGridProps>(\n  function CardGrid({ className, columns = 3, ...props }, ref) {\n    const api = createCardGrid({ columns })\n    return (\n      <div\n        ref={ref}\n        className={cn(className)}\n        {...api.dataAttributes}\n        {...props}\n      />\n    )\n  }\n)\n"],
+  "mappings": ";;;;;;;;AAIO,SAAS,eAAe,SAAwB,CAAA,GAAI;AACzD,SAAO;IACL,gBAAgB,EAAE,aAAa,YAAA;EAAY;AAE/C;;;;ACFO,IAAM,WAAiB;EAC5B,SAASA,UAAS,EAAE,WAAW,UAAU,GAAG,GAAG,MAAA,GAAS,KAAK;AAC3D,UAAM,MAAM,eAAe,EAAE,QAAA,CAAS;AACtC,WACE;MAAC;MAAA;QACC;QACA,WAAW,GAAG,SAAS;QACtB,GAAG,IAAI;QACP,GAAG;MAAA;IAAA;EAGV;AACF;",
+  "names": ["CardGrid"]
+}

package/dist/react-card.js

@@ -0,0 +1,200 @@
+import {
+  Slot
+} from "./chunk-WSPJTQAV.js";
+import {
+  cn,
+  cva
+} from "./chunk-ZF3OHCGV.js";
+
+// ../react-card/dist/index.js
+import * as React from "react";
+
+// ../card/dist/index.js
+function createCard(props = {}) {
+  const ariaProps = {};
+  if (props.role) {
+    ariaProps.role = props.role;
+  }
+  return {
+    ariaProps,
+    dataAttributes: { "data-slot": "card" }
+  };
+}
+function createCardHeader() {
+  return { dataAttributes: { "data-slot": "card-header" } };
+}
+function createCardTitle() {
+  return { dataAttributes: { "data-slot": "card-title" } };
+}
+function createCardDescription() {
+  return { dataAttributes: { "data-slot": "card-description" } };
+}
+function createCardContent() {
+  return { dataAttributes: { "data-slot": "card-content" } };
+}
+function createCardFooter() {
+  return { dataAttributes: { "data-slot": "card-footer" } };
+}
+var cardTokens = {
+  name: "card",
+  tokens: {
+    bg: { variable: "--rfr-card-bg", fallback: "hsl(var(--card))" },
+    fg: { variable: "--rfr-card-fg", fallback: "hsl(var(--card-foreground))" },
+    border: { variable: "--rfr-card-border", fallback: "hsl(var(--border))" }
+  }
+};
+var cardVariants = cva({
+  base: "rounded-lg border bg-card text-card-foreground shadow",
+  variants: {
+    padding: {
+      none: "",
+      default: "p-6",
+      compact: "p-4"
+    }
+  },
+  defaultVariants: {
+    padding: "none"
+  }
+});
+var cardHeaderVariants = cva({
+  base: "flex flex-col space-y-1.5 p-6"
+});
+var cardTitleVariants = cva({
+  base: "font-semibold leading-none tracking-tight",
+  variants: {
+    size: {
+      sm: "text-lg",
+      default: "text-2xl",
+      lg: "text-3xl"
+    }
+  },
+  defaultVariants: {
+    size: "default"
+  }
+});
+var cardDescriptionVariants = cva({
+  base: "text-sm text-muted-foreground"
+});
+var cardContentVariants = cva({
+  base: "p-6 pt-0"
+});
+var cardFooterVariants = cva({
+  base: "flex items-center p-6 pt-0"
+});
+
+// ../react-card/dist/index.js
+import { jsx } from "react/jsx-runtime";
+var Card = React.forwardRef(
+  function Card2({ className, asChild = false, ...props }, ref) {
+    const api = createCard();
+    const classes = cn(cardVariants(), className);
+    if (asChild) {
+      return /* @__PURE__ */ jsx(
+        Slot,
+        {
+          ref,
+          className: classes,
+          ...api.ariaProps,
+          ...api.dataAttributes,
+          ...props
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: classes,
+        ...api.ariaProps,
+        ...api.dataAttributes,
+        ...props
+      }
+    );
+  }
+);
+var CardHeader = React.forwardRef(
+  function CardHeader2({ className, ...props }, ref) {
+    const api = createCardHeader();
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(cardHeaderVariants(), className),
+        ...api.dataAttributes,
+        ...props
+      }
+    );
+  }
+);
+var CardTitle = React.forwardRef(
+  function CardTitle2({ className, ...props }, ref) {
+    const api = createCardTitle();
+    return /* @__PURE__ */ jsx(
+      "h3",
+      {
+        ref,
+        className: cn(cardTitleVariants(), className),
+        ...api.dataAttributes,
+        ...props
+      }
+    );
+  }
+);
+var CardDescription = React.forwardRef(
+  function CardDescription2({ className, ...props }, ref) {
+    const api = createCardDescription();
+    return /* @__PURE__ */ jsx(
+      "p",
+      {
+        ref,
+        className: cn(cardDescriptionVariants(), className),
+        ...api.dataAttributes,
+        ...props
+      }
+    );
+  }
+);
+var CardContent = React.forwardRef(
+  function CardContent2({ className, ...props }, ref) {
+    const api = createCardContent();
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(cardContentVariants(), className),
+        ...api.dataAttributes,
+        ...props
+      }
+    );
+  }
+);
+var CardFooter = React.forwardRef(
+  function CardFooter2({ className, ...props }, ref) {
+    const api = createCardFooter();
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(cardFooterVariants(), className),
+        ...api.dataAttributes,
+        ...props
+      }
+    );
+  }
+);
+export {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  cardContentVariants,
+  cardDescriptionVariants,
+  cardFooterVariants,
+  cardHeaderVariants,
+  cardTitleVariants,
+  cardTokens,
+  cardVariants
+};
+//# sourceMappingURL=react-card.js.map

package/dist/react-card.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../card/src/card.ts", "../../card/src/card.styles.ts", "../../react-card/src/card.tsx"],
+  "sourcesContent": ["import type { AccessibilityProps } from '@refraction-ui/shared'\n\nexport interface CardProps {\n  /** Optional accessible role override */\n  role?: string\n}\n\nexport interface CardAPI {\n  /** ARIA attributes to spread on the element */\n  ariaProps: Partial<AccessibilityProps>\n  /** Data attributes for CSS styling hooks */\n  dataAttributes: Record<string, string>\n}\n\nexport function createCard(props: CardProps = {}): CardAPI {\n  const ariaProps: Partial<AccessibilityProps> = {}\n  if (props.role) {\n    ariaProps.role = props.role\n  }\n\n  return {\n    ariaProps,\n    dataAttributes: { 'data-slot': 'card' },\n  }\n}\n\nexport function createCardHeader(): { dataAttributes: Record<string, string> } {\n  return { dataAttributes: { 'data-slot': 'card-header' } }\n}\n\nexport function createCardTitle(): { dataAttributes: Record<string, string> } {\n  return { dataAttributes: { 'data-slot': 'card-title' } }\n}\n\nexport function createCardDescription(): { dataAttributes: Record<string, string> } {\n  return { dataAttributes: { 'data-slot': 'card-description' } }\n}\n\nexport function createCardContent(): { dataAttributes: Record<string, string> } {\n  return { dataAttributes: { 'data-slot': 'card-content' } }\n}\n\nexport function createCardFooter(): { dataAttributes: Record<string, string> } {\n  return { dataAttributes: { 'data-slot': 'card-footer' } }\n}\n", "import { cva } from '@refraction-ui/shared'\nimport type { TokenContract } from '@refraction-ui/shared'\n\nexport const cardTokens: TokenContract = {\n  name: 'card',\n  tokens: {\n    bg: { variable: '--rfr-card-bg', fallback: 'hsl(var(--card))' },\n    fg: { variable: '--rfr-card-fg', fallback: 'hsl(var(--card-foreground))' },\n    border: { variable: '--rfr-card-border', fallback: 'hsl(var(--border))' },\n  },\n}\n\nexport const cardVariants = cva({\n  base: 'rounded-lg border bg-card text-card-foreground shadow',\n  variants: {\n    padding: {\n      none: '',\n      default: 'p-6',\n      compact: 'p-4',\n    },\n  },\n  defaultVariants: {\n    padding: 'none',\n  },\n})\n\nexport const cardHeaderVariants = cva({\n  base: 'flex flex-col space-y-1.5 p-6',\n})\n\nexport const cardTitleVariants = cva({\n  base: 'font-semibold leading-none tracking-tight',\n  variants: {\n    size: {\n      sm: 'text-lg',\n      default: 'text-2xl',\n      lg: 'text-3xl',\n    },\n  },\n  defaultVariants: {\n    size: 'default',\n  },\n})\n\nexport const cardDescriptionVariants = cva({\n  base: 'text-sm text-muted-foreground',\n})\n\nexport const cardContentVariants = cva({\n  base: 'p-6 pt-0',\n})\n\nexport const cardFooterVariants = cva({\n  base: 'flex items-center p-6 pt-0',\n})\n", "import * as React from 'react'\nimport {\n  createCard,\n  createCardHeader,\n  createCardTitle,\n  createCardDescription,\n  createCardContent,\n  createCardFooter,\n  cardVariants,\n  cardHeaderVariants,\n  cardTitleVariants,\n  cardDescriptionVariants,\n  cardContentVariants,\n  cardFooterVariants,\n} from '@refraction-ui/card'\nimport { cn } from '@refraction-ui/shared'\nimport { Slot } from '@refraction-ui/react-slot'\n\nexport interface CardProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Merge the card's classes/props onto the single child element instead of\n   * rendering a `<div>` (Radix-style `asChild`) — e.g.\n   * `<Card asChild><a href=\"/x\">…</a></Card>` for a clickable card. Expects\n   * exactly one React element child. */\n  asChild?: boolean\n}\n\n/**\n * Card -- a container with rounded corners, border, and shadow.\n */\nexport const Card = React.forwardRef<HTMLDivElement, CardProps>(\n  function Card({ className, asChild = false, ...props }, ref) {\n    const api = createCard()\n    const classes = cn(cardVariants(), className)\n\n    if (asChild) {\n      return (\n        <Slot\n          ref={ref as React.Ref<HTMLElement>}\n          className={classes}\n          {...api.ariaProps}\n          {...api.dataAttributes}\n          {...props}\n        />\n      )\n    }\n\n    return (\n      <div\n        ref={ref}\n        className={classes}\n        {...api.ariaProps}\n        {...api.dataAttributes}\n        {...props}\n      />\n    )\n  },\n)\n\n/**\n * CardHeader -- top section of a card, typically contains title and description.\n */\nexport const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  function CardHeader({ className, ...props }, ref) {\n    const api = createCardHeader()\n    return (\n      <div\n        ref={ref}\n        className={cn(cardHeaderVariants(), className)}\n        {...api.dataAttributes}\n        {...props}\n      />\n    )\n  },\n)\n\n/**\n * CardTitle -- heading within a card header.\n */\nexport const CardTitle = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(\n  function CardTitle({ className, ...props }, ref) {\n    const api = createCardTitle()\n    return (\n      <h3\n        ref={ref}\n        className={cn(cardTitleVariants(), className)}\n        {...api.dataAttributes}\n        {...props}\n      />\n    )\n  },\n)\n\n/**\n * CardDescription -- subtext within a card header.\n */\nexport const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(\n  function CardDescription({ className, ...props }, ref) {\n    const api = createCardDescription()\n    return (\n      <p\n        ref={ref}\n        className={cn(cardDescriptionVariants(), className)}\n        {...api.dataAttributes}\n        {...props}\n      />\n    )\n  },\n)\n\n/**\n * CardContent -- main body content area of a card.\n */\nexport const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  function CardContent({ className, ...props }, ref) {\n    const api = createCardContent()\n    return (\n      <div\n        ref={ref}\n        className={cn(cardContentVariants(), className)}\n        {...api.dataAttributes}\n        {...props}\n      />\n    )\n  },\n)\n\n/**\n * CardFooter -- bottom section of a card, typically contains actions.\n */\nexport const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  function CardFooter({ className, ...props }, ref) {\n    const api = createCardFooter()\n    return (\n      <div\n        ref={ref}\n        className={cn(cardFooterVariants(), className)}\n        {...api.dataAttributes}\n        {...props}\n      />\n    )\n  },\n)\n"],
+  "mappings": "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",
+  "names": ["Card", "CardHeader", "CardTitle", "CardDescription", "CardContent", "CardFooter"]
+}