@refraction-ui/react 0.19.1 → 0.20.0

package/dist/react-slot.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/react-social-auth-button.js

@@ -0,0 +1,169 @@
+import {
+  Button
+} from "./chunk-F7B64KT3.js";
+import "./chunk-WK2IIUFO.js";
+import {
+  cn,
+  cva
+} from "./chunk-ZF3OHCGV.js";
+
+// ../react-social-auth-button/dist/index.js
+import * as React from "react";
+
+// ../social-auth-button/dist/index.js
+var PROVIDER_LABELS = {
+  google: "Continue with Google",
+  github: "Continue with GitHub",
+  microsoft: "Continue with Microsoft",
+  apple: "Continue with Apple"
+};
+var PROVIDER_MONO = {
+  google: false,
+  github: true,
+  microsoft: false,
+  apple: true
+};
+function createSocialAuthButton(props) {
+  const { provider } = props;
+  return {
+    dataAttributes: { "data-provider": provider },
+    label: PROVIDER_LABELS[provider],
+    mono: PROVIDER_MONO[provider]
+  };
+}
+var socialAuthButtonVariants = cva({
+  base: "relative"
+});
+var socialAuthRowVariants = cva({
+  base: "grid grid-cols-1 sm:grid-cols-2 gap-3"
+});
+var lastUsedBadgeVariants = cva({
+  base: "absolute -top-2 -right-2 rounded-full bg-primary text-primary-foreground text-[10px] px-1.5"
+});
+
+// ../react-social-auth-button/dist/index.js
+import { jsxs, jsx } from "react/jsx-runtime";
+var baseProps = {
+  width: 18,
+  height: 18,
+  viewBox: "0 0 24 24",
+  xmlns: "http://www.w3.org/2000/svg",
+  "aria-hidden": true
+};
+function GoogleIcon({ mono, ...props }) {
+  if (mono) {
+    return /* @__PURE__ */ jsx("svg", { ...baseProps, ...props, children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        fill: "currentColor",
+        d: "M21.35 11.1H12v2.92h5.35c-.23 1.4-1.65 4.1-5.35 4.1a5.99 5.99 0 0 1 0-11.98c1.71 0 2.86.73 3.52 1.36l2.4-2.31C16.46 3.7 14.43 2.8 12 2.8a9.2 9.2 0 1 0 0 18.4c5.31 0 8.82-3.73 8.82-8.99 0-.6-.07-1.06-.17-1.51Z"
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxs("svg", { ...baseProps, ...props, children: [
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        fill: "#4285F4",
+        d: "M21.35 11.1H12v2.92h5.35c-.23 1.4-1.65 4.1-5.35 4.1a5.99 5.99 0 0 1 0-11.98c1.71 0 2.86.73 3.52 1.36l2.4-2.31C16.46 3.7 14.43 2.8 12 2.8a9.2 9.2 0 0 0 0 18.4c5.31 0 8.82-3.73 8.82-8.99 0-.6-.07-1.06-.17-1.51Z"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        fill: "#34A853",
+        d: "M3.88 7.55l2.41 1.77C6.93 7.76 8.32 6.74 10 6.4l-.34-2.85C7.06 4.02 4.93 5.5 3.88 7.55Z",
+        opacity: 0
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        fill: "#FBBC05",
+        d: "M12 21.2c2.43 0 4.46-.8 5.95-2.18l-2.74-2.13c-.74.5-1.74.86-3.21.86-2.66 0-4.92-1.79-5.73-4.2l-2.84 2.18A9.2 9.2 0 0 0 12 21.2Z",
+        opacity: 0
+      }
+    )
+  ] });
+}
+function GitHubIcon({ mono: _mono, ...props }) {
+  return /* @__PURE__ */ jsx("svg", { ...baseProps, ...props, children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      fill: "currentColor",
+      d: "M12 2a10 10 0 0 0-3.16 19.49c.5.09.68-.22.68-.48l-.01-1.7c-2.78.6-3.37-1.34-3.37-1.34-.45-1.16-1.11-1.46-1.11-1.46-.91-.62.07-.61.07-.61 1 .07 1.53 1.03 1.53 1.03.9 1.53 2.36 1.09 2.94.83.09-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.94 0-1.09.39-1.98 1.03-2.68-.1-.25-.45-1.27.1-2.65 0 0 .84-.27 2.75 1.02a9.6 9.6 0 0 1 5 0c1.91-1.29 2.75-1.02 2.75-1.02.55 1.38.2 2.4.1 2.65.64.7 1.03 1.59 1.03 2.68 0 3.84-2.34 4.69-4.57 4.94.36.31.68.92.68 1.85l-.01 2.74c0 .27.18.58.69.48A10 10 0 0 0 12 2Z"
+    }
+  ) });
+}
+function MicrosoftIcon({ mono, ...props }) {
+  if (mono) {
+    return /* @__PURE__ */ jsxs("svg", { ...baseProps, ...props, children: [
+      /* @__PURE__ */ jsx("path", { fill: "currentColor", d: "M3 3h8v8H3z" }),
+      /* @__PURE__ */ jsx("path", { fill: "currentColor", d: "M13 3h8v8h-8z", opacity: 0.7 }),
+      /* @__PURE__ */ jsx("path", { fill: "currentColor", d: "M3 13h8v8H3z", opacity: 0.7 }),
+      /* @__PURE__ */ jsx("path", { fill: "currentColor", d: "M13 13h8v8h-8z", opacity: 0.4 })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("svg", { ...baseProps, ...props, children: [
+    /* @__PURE__ */ jsx("path", { fill: "#F25022", d: "M3 3h8v8H3z" }),
+    /* @__PURE__ */ jsx("path", { fill: "#7FBA00", d: "M13 3h8v8h-8z" }),
+    /* @__PURE__ */ jsx("path", { fill: "#00A4EF", d: "M3 13h8v8H3z" }),
+    /* @__PURE__ */ jsx("path", { fill: "#FFB900", d: "M13 13h8v8h-8z" })
+  ] });
+}
+function AppleIcon({ mono: _mono, ...props }) {
+  return /* @__PURE__ */ jsx("svg", { ...baseProps, ...props, children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      fill: "currentColor",
+      d: "M16.37 12.78c-.03-2.62 2.14-3.88 2.24-3.94-1.22-1.79-3.12-2.03-3.79-2.06-1.61-.16-3.15.95-3.97.95-.82 0-2.08-.93-3.42-.9-1.76.03-3.39 1.02-4.29 2.6-1.83 3.18-.47 7.88 1.31 10.46.87 1.26 1.91 2.67 3.27 2.62 1.31-.05 1.81-.85 3.4-.85 1.58 0 2.03.85 3.42.82 1.41-.02 2.31-1.28 3.17-2.55.99-1.46 1.4-2.88 1.42-2.95-.03-.01-2.73-1.05-2.76-4.15M13.9 5.1c.72-.88 1.21-2.09 1.08-3.3-1.04.04-2.3.69-3.04 1.56-.66.77-1.24 2.01-1.09 3.19 1.16.09 2.34-.59 3.05-1.45"
+    }
+  ) });
+}
+var PROVIDER_ICONS = {
+  google: GoogleIcon,
+  github: GitHubIcon,
+  microsoft: MicrosoftIcon,
+  apple: AppleIcon
+};
+var SocialAuthButton = React.forwardRef(function SocialAuthButton2({ provider, lastUsed, loading, disabled, className, ...props }, ref) {
+  const { label, mono, dataAttributes } = createSocialAuthButton({ provider });
+  const Icon = PROVIDER_ICONS[provider];
+  return /* @__PURE__ */ jsxs("div", { className: socialAuthButtonVariants(), children: [
+    /* @__PURE__ */ jsxs(
+      Button,
+      {
+        ref,
+        variant: "outline",
+        loading,
+        disabled,
+        className: cn("w-full justify-center gap-2", className),
+        ...dataAttributes,
+        ...props,
+        children: [
+          !loading && /* @__PURE__ */ jsx(Icon, { mono, className: "shrink-0" }),
+          label
+        ]
+      }
+    ),
+    lastUsed && /* @__PURE__ */ jsx("span", { className: lastUsedBadgeVariants(), children: "Last used" })
+  ] });
+});
+var SocialAuthRow = React.forwardRef(
+  function SocialAuthRow2({ className, children, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(socialAuthRowVariants(), className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+export {
+  SocialAuthButton,
+  SocialAuthRow
+};
+//# sourceMappingURL=react-social-auth-button.js.map

package/dist/react-social-auth-button.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../social-auth-button/src/social-auth-button.ts", "../../social-auth-button/src/social-auth-button.styles.ts", "../../react-social-auth-button/src/brand-icons.tsx", "../../react-social-auth-button/src/social-auth-button.tsx"],
+  "sourcesContent": ["export type SocialProvider = 'google' | 'github' | 'microsoft' | 'apple'\n\n/** \"Continue with …\" label shown on each provider's button. */\nexport const PROVIDER_LABELS: Record<SocialProvider, string> = {\n  google: 'Continue with Google',\n  github: 'Continue with GitHub',\n  microsoft: 'Continue with Microsoft',\n  apple: 'Continue with Apple',\n}\n\n/**\n * Which providers render their brand mark monochrome (currentColor). GitHub and\n * Apple are monochrome by design so they read correctly on dark/outline\n * surfaces; Google and Microsoft keep their full brand color.\n */\nexport const PROVIDER_MONO: Record<SocialProvider, boolean> = {\n  google: false,\n  github: true,\n  microsoft: false,\n  apple: true,\n}\n\nexport interface SocialAuthButtonProps {\n  /** Identity provider this button authenticates against. */\n  provider: SocialProvider\n}\n\nexport interface SocialAuthButtonAPI {\n  /** Data attributes for CSS styling hooks. */\n  dataAttributes: Record<string, string>\n  /** \"Continue with …\" label for the provider. */\n  label: string\n  /** Whether the brand mark should render monochrome. */\n  mono: boolean\n}\n\n/**\n * Framework-agnostic core for a social sign-in button. Returns the provider\n * label, monochrome hint, and the `data-provider` styling hook. No React/JSX.\n */\nexport function createSocialAuthButton(\n  props: SocialAuthButtonProps,\n): SocialAuthButtonAPI {\n  const { provider } = props\n\n  return {\n    dataAttributes: { 'data-provider': provider },\n    label: PROVIDER_LABELS[provider],\n    mono: PROVIDER_MONO[provider],\n  }\n}\n", "import { cva } from '@refraction-ui/shared'\n\n/** Wrapper around an individual social auth button (positions the lastUsed badge). */\nexport const socialAuthButtonVariants = cva({\n  base: 'relative',\n})\n\n/** Responsive grid wrapper: one column on mobile, two columns from `sm` up. */\nexport const socialAuthRowVariants = cva({\n  base: 'grid grid-cols-1 sm:grid-cols-2 gap-3',\n})\n\n/** Floating \"Last used\" badge anchored to the top-right of a button. */\nexport const lastUsedBadgeVariants = cva({\n  base: 'absolute -top-2 -right-2 rounded-full bg-primary text-primary-foreground text-[10px] px-1.5',\n})\n", "import * as React from 'react'\n\nexport interface BrandIconProps extends React.SVGProps<SVGSVGElement> {\n  /** Use a monochrome (currentColor) rendering suitable for dark surfaces. */\n  mono?: boolean\n}\n\nconst baseProps = {\n  width: 18,\n  height: 18,\n  viewBox: '0 0 24 24',\n  xmlns: 'http://www.w3.org/2000/svg',\n  'aria-hidden': true as const,\n}\n\n/** Google \"G\" mark — full brand colors, or a flat currentColor mono variant. */\nexport function GoogleIcon({ mono, ...props }: BrandIconProps) {\n  if (mono) {\n    return (\n      <svg {...baseProps} {...props}>\n        <path\n          fill=\"currentColor\"\n          d=\"M21.35 11.1H12v2.92h5.35c-.23 1.4-1.65 4.1-5.35 4.1a5.99 5.99 0 0 1 0-11.98c1.71 0 2.86.73 3.52 1.36l2.4-2.31C16.46 3.7 14.43 2.8 12 2.8a9.2 9.2 0 1 0 0 18.4c5.31 0 8.82-3.73 8.82-8.99 0-.6-.07-1.06-.17-1.51Z\"\n        />\n      </svg>\n    )\n  }\n  return (\n    <svg {...baseProps} {...props}>\n      <path\n        fill=\"#4285F4\"\n        d=\"M21.35 11.1H12v2.92h5.35c-.23 1.4-1.65 4.1-5.35 4.1a5.99 5.99 0 0 1 0-11.98c1.71 0 2.86.73 3.52 1.36l2.4-2.31C16.46 3.7 14.43 2.8 12 2.8a9.2 9.2 0 0 0 0 18.4c5.31 0 8.82-3.73 8.82-8.99 0-.6-.07-1.06-.17-1.51Z\"\n      />\n      <path\n        fill=\"#34A853\"\n        d=\"M3.88 7.55l2.41 1.77C6.93 7.76 8.32 6.74 10 6.4l-.34-2.85C7.06 4.02 4.93 5.5 3.88 7.55Z\"\n        opacity={0}\n      />\n      <path\n        fill=\"#FBBC05\"\n        d=\"M12 21.2c2.43 0 4.46-.8 5.95-2.18l-2.74-2.13c-.74.5-1.74.86-3.21.86-2.66 0-4.92-1.79-5.73-4.2l-2.84 2.18A9.2 9.2 0 0 0 12 21.2Z\"\n        opacity={0}\n      />\n    </svg>\n  )\n}\n\n/** GitHub Octocat mark — monochrome by design. */\nexport function GitHubIcon({ mono: _mono, ...props }: BrandIconProps) {\n  return (\n    <svg {...baseProps} {...props}>\n      <path\n        fill=\"currentColor\"\n        d=\"M12 2a10 10 0 0 0-3.16 19.49c.5.09.68-.22.68-.48l-.01-1.7c-2.78.6-3.37-1.34-3.37-1.34-.45-1.16-1.11-1.46-1.11-1.46-.91-.62.07-.61.07-.61 1 .07 1.53 1.03 1.53 1.03.9 1.53 2.36 1.09 2.94.83.09-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.94 0-1.09.39-1.98 1.03-2.68-.1-.25-.45-1.27.1-2.65 0 0 .84-.27 2.75 1.02a9.6 9.6 0 0 1 5 0c1.91-1.29 2.75-1.02 2.75-1.02.55 1.38.2 2.4.1 2.65.64.7 1.03 1.59 1.03 2.68 0 3.84-2.34 4.69-4.57 4.94.36.31.68.92.68 1.85l-.01 2.74c0 .27.18.58.69.48A10 10 0 0 0 12 2Z\"\n      />\n    </svg>\n  )\n}\n\n/** Microsoft four-square logo — brand colors, or mono. */\nexport function MicrosoftIcon({ mono, ...props }: BrandIconProps) {\n  if (mono) {\n    return (\n      <svg {...baseProps} {...props}>\n        <path fill=\"currentColor\" d=\"M3 3h8v8H3z\" />\n        <path fill=\"currentColor\" d=\"M13 3h8v8h-8z\" opacity={0.7} />\n        <path fill=\"currentColor\" d=\"M3 13h8v8H3z\" opacity={0.7} />\n        <path fill=\"currentColor\" d=\"M13 13h8v8h-8z\" opacity={0.4} />\n      </svg>\n    )\n  }\n  return (\n    <svg {...baseProps} {...props}>\n      <path fill=\"#F25022\" d=\"M3 3h8v8H3z\" />\n      <path fill=\"#7FBA00\" d=\"M13 3h8v8h-8z\" />\n      <path fill=\"#00A4EF\" d=\"M3 13h8v8H3z\" />\n      <path fill=\"#FFB900\" d=\"M13 13h8v8h-8z\" />\n    </svg>\n  )\n}\n\n/** Apple logo — monochrome by design. */\nexport function AppleIcon({ mono: _mono, ...props }: BrandIconProps) {\n  return (\n    <svg {...baseProps} {...props}>\n      <path\n        fill=\"currentColor\"\n        d=\"M16.37 12.78c-.03-2.62 2.14-3.88 2.24-3.94-1.22-1.79-3.12-2.03-3.79-2.06-1.61-.16-3.15.95-3.97.95-.82 0-2.08-.93-3.42-.9-1.76.03-3.39 1.02-4.29 2.6-1.83 3.18-.47 7.88 1.31 10.46.87 1.26 1.91 2.67 3.27 2.62 1.31-.05 1.81-.85 3.4-.85 1.58 0 2.03.85 3.42.82 1.41-.02 2.31-1.28 3.17-2.55.99-1.46 1.4-2.88 1.42-2.95-.03-.01-2.73-1.05-2.76-4.15M13.9 5.1c.72-.88 1.21-2.09 1.08-3.3-1.04.04-2.3.69-3.04 1.56-.66.77-1.24 2.01-1.09 3.19 1.16.09 2.34-.59 3.05-1.45\"\n      />\n    </svg>\n  )\n}\n", "import * as React from 'react'\nimport { Button, type ButtonProps } from '@refraction-ui/react-button'\nimport {\n  createSocialAuthButton,\n  socialAuthButtonVariants,\n  socialAuthRowVariants,\n  lastUsedBadgeVariants,\n  type SocialProvider,\n} from '@refraction-ui/social-auth-button'\nimport { cn } from '@refraction-ui/shared'\nimport {\n  GoogleIcon,\n  GitHubIcon,\n  MicrosoftIcon,\n  AppleIcon,\n  type BrandIconProps,\n} from './brand-icons.js'\n\nexport type { SocialProvider }\n\n/** Brand mark component per provider (the markup that the JSX-free core omits). */\nconst PROVIDER_ICONS: Record<\n  SocialProvider,\n  (props: BrandIconProps) => React.JSX.Element\n> = {\n  google: GoogleIcon,\n  github: GitHubIcon,\n  microsoft: MicrosoftIcon,\n  apple: AppleIcon,\n}\n\nexport interface SocialAuthButtonProps\n  extends Omit<ButtonProps, 'variant' | 'children'> {\n  /** Identity provider this button authenticates against. */\n  provider: SocialProvider\n  /** Marks this as the provider the user signed in with last. */\n  lastUsed?: boolean\n  /** Shows a spinner and disables interaction. */\n  loading?: boolean\n}\n\n/**\n * A branded social sign-in button built on the outline Button. Renders the\n * provider's brand icon and a \"Continue with …\" label, with optional loading\n * and \"Last used\" affordances. Labels, the `data-provider` hook, and the\n * monochrome decision come from the headless @refraction-ui/social-auth-button\n * core; only the icon markup lives here.\n */\nexport const SocialAuthButton = React.forwardRef<\n  HTMLButtonElement,\n  SocialAuthButtonProps\n>(function SocialAuthButton({ provider, lastUsed, loading, disabled, className, ...props }, ref) {\n  const { label, mono, dataAttributes } = createSocialAuthButton({ provider })\n  const Icon = PROVIDER_ICONS[provider]\n\n  return (\n    <div className={socialAuthButtonVariants()}>\n      <Button\n        ref={ref}\n        variant=\"outline\"\n        loading={loading}\n        disabled={disabled}\n        className={cn('w-full justify-center gap-2', className)}\n        {...dataAttributes}\n        {...props}\n      >\n        {!loading && <Icon mono={mono} className=\"shrink-0\" />}\n        {label}\n      </Button>\n      {lastUsed && <span className={lastUsedBadgeVariants()}>Last used</span>}\n    </div>\n  )\n})\n\nexport interface SocialAuthRowProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  children?: React.ReactNode\n}\n\n/**\n * Responsive grid wrapper for SocialAuthButtons: one column on mobile, two\n * columns from the `sm` breakpoint up.\n */\nexport const SocialAuthRow = React.forwardRef<HTMLDivElement, SocialAuthRowProps>(\n  function SocialAuthRow({ className, children, ...props }, ref) {\n    return (\n      <div\n        ref={ref}\n        className={cn(socialAuthRowVariants(), className)}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  },\n)\n"],
+  "mappings": "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",
+  "names": ["SocialAuthButton", "jsxs", "jsx", "SocialAuthRow"]
+}

package/dist/react-sortable-list.js

@@ -0,0 +1,204 @@
+import {
+  cn,
+  cva
+} from "./chunk-ZF3OHCGV.js";
+
+// ../react-sortable-list/dist/index.js
+import * as React from "react";
+
+// ../sortable-list/dist/index.js
+function reorder(items, from, to) {
+  const len = items.length;
+  if (len === 0 || from < 0 || from >= len || to < 0 || to >= len || from === to) {
+    return [...items];
+  }
+  const result = [...items];
+  const [moved] = result.splice(from, 1);
+  result.splice(to, 0, moved);
+  return result;
+}
+function getNextOrderIndex(current, key, count) {
+  if (count <= 0) return current;
+  const clamped = Math.max(0, Math.min(current, count - 1));
+  switch (key) {
+    case "ArrowUp":
+    case "ArrowLeft":
+      return Math.max(0, clamped - 1);
+    case "ArrowDown":
+    case "ArrowRight":
+      return Math.min(count - 1, clamped + 1);
+    case "Home":
+      return 0;
+    case "End":
+      return count - 1;
+    default:
+      return clamped;
+  }
+}
+function createSortableList() {
+  return {
+    ariaProps: {
+      role: "list"
+    },
+    dataAttributes: {
+      "data-component": "sortable-list"
+    }
+  };
+}
+var sortableListVariants = cva({
+  base: "flex flex-col gap-1 w-full",
+  variants: {
+    disabled: {
+      true: "opacity-50 pointer-events-none",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    disabled: "false"
+  }
+});
+var sortableListRowVariants = cva({
+  base: [
+    "flex items-center gap-3 rounded-md border border-border bg-card px-3 py-2",
+    "transition-opacity"
+  ].join(" "),
+  variants: {
+    dragging: {
+      true: "opacity-50 ring-2 ring-ring",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    dragging: "false"
+  }
+});
+var sortableListGripClass = "cursor-grab text-muted-foreground shrink-0 flex items-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background rounded";
+var sortableListContentClass = "flex-1 min-w-0";
+
+// ../react-sortable-list/dist/index.js
+import { jsx, jsxs } from "react/jsx-runtime";
+function SortableListInner({
+  items,
+  getKey,
+  renderItem,
+  onReorder,
+  disabled = false,
+  className,
+  ...props
+}, ref) {
+  const dragFromRef = React.useRef(null);
+  const [draggingIndex, setDraggingIndex] = React.useState(null);
+  const { ariaProps, dataAttributes } = createSortableList();
+  const handleDragStart = (index) => (event) => {
+    if (disabled) {
+      event.preventDefault();
+      return;
+    }
+    dragFromRef.current = index;
+    setDraggingIndex(index);
+    event.dataTransfer.effectAllowed = "move";
+    event.dataTransfer.setData("text/plain", String(index));
+  };
+  const handleDragOver = (event) => {
+    event.preventDefault();
+    event.dataTransfer.dropEffect = "move";
+  };
+  const handleDragEnter = (toIndex) => (event) => {
+    event.preventDefault();
+    if (disabled || dragFromRef.current === null || dragFromRef.current === toIndex) return;
+    const next = reorder(items, dragFromRef.current, toIndex);
+    dragFromRef.current = toIndex;
+    setDraggingIndex(toIndex);
+    onReorder?.(next);
+  };
+  const handleDrop = (event) => {
+    event.preventDefault();
+  };
+  const handleDragEnd = () => {
+    dragFromRef.current = null;
+    setDraggingIndex(null);
+  };
+  const handleGripKeyDown = (index) => (event) => {
+    if (disabled) return;
+    const next = getNextOrderIndex(index, event.key, items.length);
+    if (next !== index) {
+      event.preventDefault();
+      onReorder?.(reorder(items, index, next));
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(sortableListVariants({ disabled: disabled ? "true" : "false" }), className),
+      ...ariaProps,
+      ...dataAttributes,
+      ...props,
+      children: items.map((item, index) => {
+        const key = getKey(item, index);
+        const isDragging = draggingIndex === index;
+        const dragHandleProps = {
+          "aria-label": "Reorder item",
+          role: "button",
+          tabIndex: 0,
+          onKeyDown: handleGripKeyDown(index),
+          onDragStart: handleDragStart(index)
+        };
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            role: "listitem",
+            draggable: !disabled,
+            className: sortableListRowVariants({ dragging: isDragging ? "true" : "false" }),
+            onDragOver: handleDragOver,
+            onDragEnter: handleDragEnter(index),
+            onDrop: handleDrop,
+            onDragEnd: handleDragEnd,
+            children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": dragHandleProps["aria-label"],
+                  role: dragHandleProps.role,
+                  tabIndex: dragHandleProps.tabIndex,
+                  onKeyDown: dragHandleProps.onKeyDown,
+                  onDragStart: dragHandleProps.onDragStart,
+                  className: sortableListGripClass,
+                  draggable: !disabled,
+                  disabled,
+                  children: /* @__PURE__ */ jsx(
+                    "svg",
+                    {
+                      width: "16",
+                      height: "16",
+                      viewBox: "0 0 16 16",
+                      fill: "none",
+                      "aria-hidden": "true",
+                      children: /* @__PURE__ */ jsx(
+                        "path",
+                        {
+                          d: `M2 4h12M2 8h12M2 12h12`,
+                          stroke: "currentColor",
+                          strokeWidth: "1.5",
+                          strokeLinecap: "round"
+                        }
+                      )
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { className: sortableListContentClass, children: renderItem(item, { index, dragHandleProps }) })
+            ]
+          },
+          key
+        );
+      })
+    }
+  );
+}
+var SortableList = React.forwardRef(SortableListInner);
+export {
+  SortableList
+};
+//# sourceMappingURL=react-sortable-list.js.map

package/dist/react-sortable-list.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../sortable-list/src/sortable-list.ts", "../../sortable-list/src/sortable-list.styles.ts", "../../react-sortable-list/src/sortable-list.tsx"],
+  "sourcesContent": ["/**\n * Pure, JSX-free headless logic for a drag-to-reorder vertical list.\n *\n * Three exports:\n *   - `reorder`           — immutable array move, clamped\n *   - `getNextOrderIndex` — keyboard navigation rule (clamped, no wrap)\n *   - `createSortableList` — builds ARIA props for the list container\n */\n\nexport interface SortableListAPI {\n  /** ARIA attributes to spread on the list element. */\n  ariaProps: Record<string, string | number | boolean>\n  /** Data attributes for styling hooks. */\n  dataAttributes: Record<string, string>\n}\n\n/**\n * Move an item from index `from` to index `to` in `items`, returning a new\n * array. Out-of-range indices return a shallow copy of the original array\n * (no mutation, no throw).\n */\nexport function reorder<T>(items: T[], from: number, to: number): T[] {\n  const len = items.length\n  if (\n    len === 0 ||\n    from < 0 ||\n    from >= len ||\n    to < 0 ||\n    to >= len ||\n    from === to\n  ) {\n    return [...items]\n  }\n  const result = [...items]\n  const [moved] = result.splice(from, 1)\n  result.splice(to, 0, moved)\n  return result\n}\n\n/**\n * Keyboard reorder navigation — returns the next index for a given key.\n *\n * - ArrowUp / ArrowLeft   → max(0, current - 1)\n * - ArrowDown / ArrowRight → min(count - 1, current + 1)\n * - Home → 0\n * - End → count - 1\n * - All other keys / empty list → current (clamped to valid range)\n *\n * Never wraps.\n */\nexport function getNextOrderIndex(\n  current: number,\n  key: string,\n  count: number,\n): number {\n  if (count <= 0) return current\n  const clamped = Math.max(0, Math.min(current, count - 1))\n\n  switch (key) {\n    case 'ArrowUp':\n    case 'ArrowLeft':\n      return Math.max(0, clamped - 1)\n    case 'ArrowDown':\n    case 'ArrowRight':\n      return Math.min(count - 1, clamped + 1)\n    case 'Home':\n      return 0\n    case 'End':\n      return count - 1\n    default:\n      return clamped\n  }\n}\n\n/**\n * Build the framework-agnostic props for a sortable list container.\n *\n * Returns `role=\"list\"` so screen readers announce the number of items\n * correctly, plus a `data-component` hook for styling.\n */\nexport function createSortableList(): SortableListAPI {\n  return {\n    ariaProps: {\n      role: 'list',\n    },\n    dataAttributes: {\n      'data-component': 'sortable-list',\n    },\n  }\n}\n", "import { cva } from '@refraction-ui/shared'\n\n/** The outer list container. */\nexport const sortableListVariants = cva({\n  base: 'flex flex-col gap-1 w-full',\n  variants: {\n    disabled: {\n      true: 'opacity-50 pointer-events-none',\n      false: '',\n    },\n  },\n  defaultVariants: {\n    disabled: 'false',\n  },\n})\n\n/**\n * A single row in the list. The `dragging` variant visually lifts the row\n * while it is being dragged.\n */\nexport const sortableListRowVariants = cva({\n  base: [\n    'flex items-center gap-3 rounded-md border border-border bg-card px-3 py-2',\n    'transition-opacity',\n  ].join(' '),\n  variants: {\n    dragging: {\n      true: 'opacity-50 ring-2 ring-ring',\n      false: '',\n    },\n  },\n  defaultVariants: {\n    dragging: 'false',\n  },\n})\n\n/** The drag-grip handle button/icon area. */\nexport const sortableListGripClass =\n  'cursor-grab text-muted-foreground shrink-0 flex items-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background rounded'\n\n/** Wraps the caller-supplied row content (fills remaining space). */\nexport const sortableListContentClass = 'flex-1 min-w-0'\n", "import * as React from 'react'\nimport {\n  reorder,\n  getNextOrderIndex,\n  createSortableList,\n  sortableListVariants,\n  sortableListRowVariants,\n  sortableListGripClass,\n  sortableListContentClass,\n} from '@refraction-ui/sortable-list'\nimport { cn } from '@refraction-ui/shared'\n\n/** Props injected into each rendered row via renderItem. */\nexport interface DragHandleProps {\n  /** Must be spread onto the grip element (button). */\n  'aria-label': string\n  /** Role is already set inside the component; exposed for convenience. */\n  role: 'button'\n  tabIndex: number\n  onKeyDown: (event: React.KeyboardEvent<HTMLButtonElement>) => void\n  onDragStart: (event: React.DragEvent<HTMLButtonElement>) => void\n}\n\nexport interface SortableListProps<T>\n  extends Omit<\n    React.HTMLAttributes<HTMLDivElement>,\n    'onSelect' | 'results' | 'color' | 'content' | 'children'\n  > {\n  /** The ordered list of items to render. */\n  items: T[]\n  /** Return a stable key for each item. */\n  getKey: (item: T, index: number) => string | number\n  /**\n   * Render the content of a single row.\n   * Spread `dragHandleProps` onto your grip button so keyboard + DnD work.\n   */\n  renderItem: (\n    item: T,\n    meta: { index: number; dragHandleProps: DragHandleProps },\n  ) => React.ReactNode\n  /** Called when the user reorders an item. Receives the new items array. */\n  onReorder?: (items: T[]) => void\n  /** Disables all drag and keyboard reordering. */\n  disabled?: boolean\n}\n\n/**\n * SortableList — a generic, accessible drag-to-reorder vertical list.\n *\n * Uses native HTML5 DnD for mouse/pointer reordering and keyboard\n * (ArrowUp/Down, Home/End on the grip button) for keyboard reordering.\n * All interaction state is managed internally; the caller receives the\n * new items array via `onReorder`.\n *\n * SSR-safe: no `window` access at render time; DnD event handlers are\n * attached only in the browser.\n */\nfunction SortableListInner<T>(\n  {\n    items,\n    getKey,\n    renderItem,\n    onReorder,\n    disabled = false,\n    className,\n    ...props\n  }: SortableListProps<T>,\n  ref: React.ForwardedRef<HTMLDivElement>,\n) {\n  const dragFromRef = React.useRef<number | null>(null)\n  const [draggingIndex, setDraggingIndex] = React.useState<number | null>(null)\n\n  const { ariaProps, dataAttributes } = createSortableList()\n\n  const handleDragStart = (index: number) => (event: React.DragEvent<HTMLButtonElement>) => {\n    if (disabled) { event.preventDefault(); return }\n    dragFromRef.current = index\n    setDraggingIndex(index)\n    // Required by some browsers to initiate drag\n    event.dataTransfer.effectAllowed = 'move'\n    event.dataTransfer.setData('text/plain', String(index))\n  }\n\n  const handleDragOver = (event: React.DragEvent<HTMLDivElement>) => {\n    event.preventDefault()\n    event.dataTransfer.dropEffect = 'move'\n  }\n\n  const handleDragEnter = (toIndex: number) => (event: React.DragEvent<HTMLDivElement>) => {\n    event.preventDefault()\n    if (disabled || dragFromRef.current === null || dragFromRef.current === toIndex) return\n    const next = reorder(items, dragFromRef.current, toIndex)\n    dragFromRef.current = toIndex\n    setDraggingIndex(toIndex)\n    onReorder?.(next)\n  }\n\n  const handleDrop = (event: React.DragEvent<HTMLDivElement>) => {\n    event.preventDefault()\n  }\n\n  const handleDragEnd = () => {\n    dragFromRef.current = null\n    setDraggingIndex(null)\n  }\n\n  const handleGripKeyDown =\n    (index: number) => (event: React.KeyboardEvent<HTMLButtonElement>) => {\n      if (disabled) return\n      const next = getNextOrderIndex(index, event.key, items.length)\n      if (next !== index) {\n        event.preventDefault()\n        onReorder?.(reorder(items, index, next))\n      }\n    }\n\n  return (\n    <div\n      ref={ref}\n      className={cn(sortableListVariants({ disabled: disabled ? 'true' : 'false' }), className)}\n      {...ariaProps}\n      {...dataAttributes}\n      {...props}\n    >\n      {items.map((item, index) => {\n        const key = getKey(item, index)\n        const isDragging = draggingIndex === index\n\n        const dragHandleProps: DragHandleProps = {\n          'aria-label': 'Reorder item',\n          role: 'button',\n          tabIndex: 0,\n          onKeyDown: handleGripKeyDown(index),\n          onDragStart: handleDragStart(index),\n        }\n\n        return (\n          <div\n            key={key}\n            role=\"listitem\"\n            draggable={!disabled}\n            className={sortableListRowVariants({ dragging: isDragging ? 'true' : 'false' })}\n            onDragOver={handleDragOver}\n            onDragEnter={handleDragEnter(index)}\n            onDrop={handleDrop}\n            onDragEnd={handleDragEnd}\n          >\n            <button\n              type=\"button\"\n              aria-label={dragHandleProps['aria-label']}\n              role={dragHandleProps.role}\n              tabIndex={dragHandleProps.tabIndex}\n              onKeyDown={dragHandleProps.onKeyDown}\n              onDragStart={dragHandleProps.onDragStart}\n              className={sortableListGripClass}\n              draggable={!disabled}\n              disabled={disabled}\n            >\n              {/* Grip icon — three horizontal lines */}\n              <svg\n                width=\"16\"\n                height=\"16\"\n                viewBox=\"0 0 16 16\"\n                fill=\"none\"\n                aria-hidden=\"true\"\n              >\n                <path\n                  d={`M2 4h12M2 8h12M2 12h12`}\n                  stroke=\"currentColor\"\n                  strokeWidth=\"1.5\"\n                  strokeLinecap=\"round\"\n                />\n              </svg>\n            </button>\n            <div className={sortableListContentClass}>\n              {renderItem(item, { index, dragHandleProps })}\n            </div>\n          </div>\n        )\n      })}\n    </div>\n  )\n}\n\nexport const SortableList = React.forwardRef(SortableListInner) as <T>(\n  props: SortableListProps<T> & { ref?: React.ForwardedRef<HTMLDivElement> },\n) => React.ReactElement | null\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/react-stat-grid.js

@@ -0,0 +1,69 @@
+import {
+  cn,
+  cva
+} from "./chunk-ZF3OHCGV.js";
+
+// ../react-stat-grid/dist/index.js
+import * as React from "react";
+
+// ../stat-grid/dist/index.js
+function statColumns(count, max = 3) {
+  if (count <= 0) return 1;
+  if (count === 1) return 1;
+  if (count === 2) return 2;
+  return Math.min(count, max);
+}
+function createStatGrid() {
+  return {
+    ariaProps: { role: "list" },
+    dataAttributes: {}
+  };
+}
+var statGridVariants = cva({
+  base: "grid gap-8",
+  variants: {
+    columns: {
+      "1": "grid-cols-1",
+      "2": "grid-cols-2",
+      "3": "grid-cols-3"
+    }
+  },
+  defaultVariants: {
+    columns: "3"
+  }
+});
+var statItemClass = "flex flex-col";
+var statValueClass = "text-xl sm:text-2xl font-bold text-primary";
+var statLabelClass = "mt-1 text-sm text-muted-foreground leading-snug";
+
+// ../react-stat-grid/dist/index.js
+import { jsx, jsxs } from "react/jsx-runtime";
+var StatGrid = React.forwardRef(
+  function StatGrid2({ items, columns, className, ...props }, ref) {
+    const cols = columns ?? statColumns(items.length);
+    const { ariaProps, dataAttributes } = createStatGrid();
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          statGridVariants({ columns: String(cols) }),
+          className
+        ),
+        style: { gridTemplateColumns: `repeat(${cols}, 1fr)` },
+        ...ariaProps,
+        ...dataAttributes,
+        ...props,
+        children: items.map((item, index) => /* @__PURE__ */ jsxs("div", { role: "listitem", className: statItemClass, children: [
+          /* @__PURE__ */ jsx("span", { className: statValueClass, children: item.value }),
+          /* @__PURE__ */ jsx("span", { className: statLabelClass, children: item.label })
+        ] }, index))
+      }
+    );
+  }
+);
+export {
+  StatGrid,
+  statColumns
+};
+//# sourceMappingURL=react-stat-grid.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../stat-grid/src/stat-grid.ts", "../../stat-grid/src/stat-grid.styles.ts", "../../react-stat-grid/src/stat-grid.tsx"],
+  "sourcesContent": ["/** A single stat callout displayed in the grid. */\nexport type StatItem = {\n  /** The primary value displayed prominently (e.g. \"10k+\", \"$4.2M\"). */\n  value: string\n  /** The descriptive label shown below the value. */\n  label: string\n}\n\nexport interface StatGridAPI {\n  /** ARIA attributes to spread on the grid container element (`role=\"list\"`). */\n  ariaProps: { role: 'list' }\n  /** Data attributes for styling hooks. */\n  dataAttributes: Record<string, string>\n}\n\n/**\n * Compute the number of grid columns for a stat grid.\n *\n * - 1 item  → 1 column\n * - 2 items → 2 columns\n * - 3 or more items → capped at `max` (default 3)\n */\nexport function statColumns(count: number, max = 3): number {\n  if (count <= 0) return 1\n  if (count === 1) return 1\n  if (count === 2) return 2\n  return Math.min(count, max)\n}\n\n/**\n * Build the framework-agnostic container props for a stat grid.\n *\n * Returns `role=\"list\"` and data attributes; adapters spread these onto their\n * container element and render the items themselves.\n */\nexport function createStatGrid(): StatGridAPI {\n  return {\n    ariaProps: { role: 'list' },\n    dataAttributes: {},\n  }\n}\n", "import { cva } from '@refraction-ui/shared'\n\n/** Grid container that lays out stat items. */\nexport const statGridVariants = cva({\n  base: 'grid gap-8',\n  variants: {\n    columns: {\n      '1': 'grid-cols-1',\n      '2': 'grid-cols-2',\n      '3': 'grid-cols-3',\n    },\n  },\n  defaultVariants: {\n    columns: '3',\n  },\n})\n\n/** Individual stat item container (role=\"listitem\"). */\nexport const statItemClass = 'flex flex-col'\n\n/** The large bold value of the stat. */\nexport const statValueClass = 'text-xl sm:text-2xl font-bold text-primary'\n\n/** The descriptive label below the value. */\nexport const statLabelClass = 'mt-1 text-sm text-muted-foreground leading-snug'\n", "import * as React from 'react'\nimport {\n  createStatGrid,\n  statColumns,\n  statGridVariants,\n  statItemClass,\n  statValueClass,\n  statLabelClass,\n} from '@refraction-ui/stat-grid'\nimport { cn } from '@refraction-ui/shared'\n\nexport type { StatItem } from '@refraction-ui/stat-grid'\n\nexport interface StatGridItem {\n  /** The primary value displayed prominently. Allows rich content in React. */\n  value: React.ReactNode\n  /** The descriptive label shown below the value. */\n  label: React.ReactNode\n}\n\nexport interface StatGridProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'content'> {\n  /** The stat items to display in the grid. */\n  items: StatGridItem[]\n  /**\n   * Number of columns. Defaults to `statColumns(items.length)`:\n   * 1 item → 1, 2 items → 2, 3+ items → 3.\n   */\n  columns?: number\n}\n\n/**\n * StatGrid — a marketing-style grid of stat callouts.\n *\n * Each item shows a large bold value and a small muted label. The grid\n * automatically computes the column count from the number of items, or you can\n * override it with `columns`. Uses `role=\"list\"` / `role=\"listitem\"` for\n * accessible enumeration.\n */\nexport const StatGrid = React.forwardRef<HTMLDivElement, StatGridProps>(\n  function StatGrid({ items, columns, className, ...props }, ref) {\n    const cols = columns ?? statColumns(items.length)\n    const { ariaProps, dataAttributes } = createStatGrid()\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          statGridVariants({ columns: String(cols) as '1' | '2' | '3' }),\n          className,\n        )}\n        style={{ gridTemplateColumns: `repeat(${cols}, 1fr)` }}\n        {...ariaProps}\n        {...dataAttributes}\n        {...props}\n      >\n        {items.map((item, index) => (\n          <div key={index} role=\"listitem\" className={statItemClass}>\n            <span className={statValueClass}>{item.value}</span>\n            <span className={statLabelClass}>{item.label}</span>\n          </div>\n        ))}\n      </div>\n    )\n  },\n)\n"],
+  "mappings": ";;;;;;;;;AAsBO,SAAS,YAAY,OAAe,MAAM,GAAW;AAC1D,MAAI,SAAS,EAAG,QAAO;AACvB,MAAI,UAAU,EAAG,QAAO;AACxB,MAAI,UAAU,EAAG,QAAO;AACxB,SAAO,KAAK,IAAI,OAAO,GAAG;AAC5B;AAQO,SAAS,iBAA8B;AAC5C,SAAO;IACL,WAAW,EAAE,MAAM,OAAA;IACnB,gBAAgB,CAAA;EAAC;AAErB;ACrCO,IAAM,mBAAmB,IAAI;EAClC,MAAM;EACN,UAAU;IACR,SAAS;MACP,KAAK;MACL,KAAK;MACL,KAAK;IAAA;EACP;EAEF,iBAAiB;IACf,SAAS;EAAA;AAEb,CAAC;AAGM,IAAM,gBAAgB;AAGtB,IAAM,iBAAiB;AAGvB,IAAM,iBAAiB;;;;ACevB,IAAM,WAAiB;EAC5B,SAASA,UAAS,EAAE,OAAO,SAAS,WAAW,GAAG,MAAA,GAAS,KAAK;AAC9D,UAAM,OAAO,WAAW,YAAY,MAAM,MAAM;AAChD,UAAM,EAAE,WAAW,eAAA,IAAmB,eAAA;AAEtC,WACE;MAAC;MAAA;QACC;QACA,WAAW;UACT,iBAAiB,EAAE,SAAS,OAAO,IAAI,EAAA,CAAsB;UAC7D;QAAA;QAEF,OAAO,EAAE,qBAAqB,UAAU,IAAI,SAAA;QAC3C,GAAG;QACH,GAAG;QACH,GAAG;QAEH,UAAA,MAAM,IAAI,CAAC,MAAM,UAAA,qBACf,OAAA,EAAgB,MAAK,YAAW,WAAW,eAC1C,UAAA;UAAA,oBAAC,QAAA,EAAK,WAAW,gBAAiB,UAAA,KAAK,MAAA,CAAM;UAC7C,oBAAC,QAAA,EAAK,WAAW,gBAAiB,UAAA,KAAK,MAAA,CAAM;QAAA,EAAA,GAFrC,KAGV,CACD;MAAA;IAAA;EAGP;AACF;",
+  "names": ["StatGrid"]
+}

package/dist/react-status-indicator.js

@@ -0,0 +1,117 @@
+import {
+  cn,
+  cva
+} from "./chunk-ZF3OHCGV.js";
+
+// ../react-status-indicator/dist/index.js
+import * as React from "react";
+
+// ../status-indicator/dist/index.js
+var STATUS_INDICATOR_COLORS = {
+  success: "green",
+  error: "red",
+  warning: "yellow",
+  info: "blue",
+  pending: "orange",
+  neutral: "gray"
+};
+var STATUS_INDICATOR_LABELS = {
+  success: "Success",
+  error: "Error",
+  warning: "Warning",
+  info: "Info",
+  pending: "Pending",
+  neutral: "Neutral"
+};
+function createStatusIndicator(props) {
+  const { type, label: labelOverride, pulse: pulseOverride } = props;
+  const color = STATUS_INDICATOR_COLORS[type];
+  const label = labelOverride ?? STATUS_INDICATOR_LABELS[type];
+  const pulse = pulseOverride ?? type === "pending";
+  const ariaProps = {
+    role: "status",
+    "aria-label": label
+  };
+  return {
+    ariaProps,
+    type,
+    label,
+    pulse,
+    color
+  };
+}
+var statusContainerStyles = "inline-flex items-center gap-1.5";
+var statusDotVariants = cva({
+  base: "inline-block h-2 w-2 rounded-full",
+  variants: {
+    type: {
+      success: "bg-success",
+      error: "bg-destructive",
+      warning: "bg-warning",
+      info: "bg-info",
+      pending: "bg-orange-500",
+      neutral: "bg-gray-400"
+    }
+  },
+  defaultVariants: {
+    type: "neutral"
+  }
+});
+var statusPulseVariants = cva({
+  base: "animate-pulse inline-block h-2 w-2 rounded-full",
+  variants: {
+    type: {
+      success: "bg-success",
+      error: "bg-destructive",
+      warning: "bg-warning",
+      info: "bg-info",
+      pending: "bg-orange-500",
+      neutral: "bg-gray-400"
+    }
+  },
+  defaultVariants: {
+    type: "pending"
+  }
+});
+var statusLabelStyles = "text-sm text-muted-foreground";
+
+// ../react-status-indicator/dist/index.js
+import { jsxs, jsx } from "react/jsx-runtime";
+function deriveAriaLabel(label, children, fallback) {
+  if (label) return label;
+  if (typeof children === "string" || typeof children === "number") {
+    return String(children);
+  }
+  return fallback;
+}
+var StatusIndicator = React.forwardRef(
+  function StatusIndicator2({ type, label, children, pulse, showLabel = true, className }, ref) {
+    const api = createStatusIndicator({ type, label, pulse });
+    const ariaLabel = deriveAriaLabel(label, children, api.label);
+    const visibleLabel = label ?? children ?? api.label;
+    const dotClassName = api.pulse ? statusPulseVariants({ type }) : statusDotVariants({ type });
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        ref,
+        ...api.ariaProps,
+        "aria-label": ariaLabel,
+        className: cn(statusContainerStyles, className),
+        children: [
+          /* @__PURE__ */ jsx("span", { className: dotClassName }),
+          showLabel && /* @__PURE__ */ jsx("span", { className: statusLabelStyles, children: visibleLabel })
+        ]
+      }
+    );
+  }
+);
+export {
+  STATUS_INDICATOR_COLORS as STATUS_COLORS,
+  STATUS_INDICATOR_LABELS as STATUS_LABELS,
+  StatusIndicator,
+  statusContainerStyles,
+  statusDotVariants,
+  statusLabelStyles,
+  statusPulseVariants
+};
+//# sourceMappingURL=react-status-indicator.js.map