@refraction-ui/react 0.19.1 → 0.20.0

package/dist/react-avatar-group.js

@@ -0,0 +1,154 @@
+import {
+  cn,
+  cva,
+  generateId
+} from "./chunk-ZF3OHCGV.js";
+
+// ../react-avatar-group/dist/index.js
+import * as React from "react";
+
+// ../avatar-group/dist/index.js
+function getInitials(name) {
+  const parts = name.trim().split(/\s+/);
+  if (parts.length === 0) return "";
+  if (parts.length === 1) return parts[0].charAt(0).toUpperCase();
+  return (parts[0].charAt(0) + parts[parts.length - 1].charAt(0)).toUpperCase();
+}
+function createAvatarGroup(props) {
+  const { users, max, size = "md" } = props;
+  const visibleUsers = max && max > 0 ? users.slice(0, max) : users;
+  const overflowUsers = max && max > 0 ? users.slice(max) : [];
+  const overflowCount = overflowUsers.length;
+  const groupId = generateId("rfr-avatar-group");
+  const labelId = generateId("rfr-avatar-group-label");
+  const ariaProps = {
+    role: "group",
+    "aria-label": `${users.length} users`,
+    id: groupId
+  };
+  function getAvatarAriaProps(user) {
+    const label = user.status ? `${user.name} (${user.status})` : user.name;
+    return {
+      role: "img",
+      "aria-label": label
+    };
+  }
+  const overflowBadgeProps = {
+    role: "button",
+    "aria-label": `${overflowCount} more users`
+  };
+  return {
+    visibleUsers,
+    overflowCount,
+    overflowUsers,
+    ariaProps,
+    getAvatarAriaProps,
+    getInitials,
+    overflowBadgeProps,
+    ids: {
+      group: groupId,
+      label: labelId
+    }
+  };
+}
+var avatarGroupStyles = "flex items-center -space-x-2";
+var avatarVariants = cva({
+  base: "relative inline-flex items-center justify-center rounded-full border-2 border-background bg-muted text-muted-foreground font-medium overflow-hidden ring-2 ring-background",
+  variants: {
+    size: {
+      xs: "h-6 w-6 text-[10px]",
+      sm: "h-8 w-8 text-xs",
+      md: "h-10 w-10 text-sm",
+      lg: "h-12 w-12 text-base",
+      xl: "h-16 w-16 text-xl"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+var avatarOverflowBadgeVariants = cva({
+  base: "relative inline-flex items-center justify-center rounded-full border-2 border-background bg-muted text-muted-foreground font-medium ring-2 ring-background",
+  variants: {
+    size: {
+      xs: "h-6 w-6 text-[10px]",
+      sm: "h-8 w-8 text-xs",
+      md: "h-10 w-10 text-sm",
+      lg: "h-12 w-12 text-base",
+      xl: "h-16 w-16 text-xl"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+var avatarImageStyles = "h-full w-full object-cover";
+var avatarPresenceDotVariants = cva({
+  base: "absolute bottom-0 right-0 rounded-full border-2 border-background",
+  variants: {
+    size: {
+      xs: "h-2 w-2",
+      sm: "h-2.5 w-2.5",
+      md: "h-3 w-3",
+      lg: "h-3.5 w-3.5",
+      xl: "h-4 w-4"
+    },
+    status: {
+      online: "bg-success",
+      offline: "bg-gray-400",
+      away: "bg-warning",
+      busy: "bg-destructive",
+      dnd: "bg-destructive"
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    status: "offline"
+  }
+});
+
+// ../react-avatar-group/dist/index.js
+var AvatarGroup = React.forwardRef(
+  function AvatarGroup2({ users, max, size = "md", className }, ref) {
+    const api = createAvatarGroup({ users, max, size });
+    return React.createElement(
+      "div",
+      { ref, ...api.ariaProps, className: cn(avatarGroupStyles, className) },
+      api.visibleUsers.map(
+        (user) => React.createElement(
+          "div",
+          {
+            key: user.id,
+            className: avatarVariants({ size }),
+            ...api.getAvatarAriaProps(user)
+          },
+          user.src ? React.createElement("img", {
+            src: user.src,
+            alt: user.name,
+            className: avatarImageStyles
+          }) : React.createElement("span", null, api.getInitials(user.name)),
+          user.status && React.createElement("span", {
+            className: avatarPresenceDotVariants({ size, status: user.status })
+          })
+        )
+      ),
+      api.overflowCount > 0 && React.createElement(
+        "div",
+        {
+          className: avatarOverflowBadgeVariants({ size }),
+          ...api.overflowBadgeProps
+        },
+        `+${api.overflowCount}`
+      )
+    );
+  }
+);
+export {
+  AvatarGroup,
+  avatarGroupStyles,
+  avatarImageStyles,
+  avatarOverflowBadgeVariants,
+  avatarPresenceDotVariants,
+  avatarVariants
+};
+//# sourceMappingURL=react-avatar-group.js.map

package/dist/react-avatar-group.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../avatar-group/src/avatar-group.ts", "../../avatar-group/src/avatar-group.styles.ts", "../../react-avatar-group/src/avatar-group.tsx"],
+  "sourcesContent": ["import type { AccessibilityProps } from '@refraction-ui/shared'\nimport { generateId } from '@refraction-ui/shared'\n\nexport type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'\nexport type PresenceStatus = 'online' | 'offline' | 'away' | 'busy' | 'dnd'\n\nexport interface AvatarUser {\n  /** Unique identifier */\n  id: string\n  /** Display name */\n  name: string\n  /** Avatar image URL */\n  src?: string\n  /** Online presence status */\n  status?: PresenceStatus\n}\n\nexport interface AvatarGroupProps {\n  /** Array of users to display */\n  users: AvatarUser[]\n  /** Maximum number of visible avatars */\n  max?: number\n  /** Avatar size */\n  size?: AvatarSize\n}\n\nexport interface AvatarGroupAPI {\n  /** Users that are visible (within max limit) */\n  visibleUsers: AvatarUser[]\n  /** Number of overflow users */\n  overflowCount: number\n  /** All overflow users (for tooltip/popup) */\n  overflowUsers: AvatarUser[]\n  /** ARIA props for the group container */\n  ariaProps: Partial<AccessibilityProps> & Record<string, unknown>\n  /** Get ARIA props for an individual avatar */\n  getAvatarAriaProps(user: AvatarUser): Record<string, unknown>\n  /** Get initials from a user's name */\n  getInitials(name: string): string\n  /** Get the overflow badge ARIA props */\n  overflowBadgeProps: Record<string, unknown>\n  /** Generated IDs */\n  ids: {\n    group: string\n    label: string\n  }\n}\n\nexport const AVATAR_SIZES: Record<AvatarSize, { width: number; fontSize: number }> = {\n  xs: { width: 24, fontSize: 10 },\n  sm: { width: 32, fontSize: 12 },\n  md: { width: 40, fontSize: 14 },\n  lg: { width: 48, fontSize: 16 },\n  xl: { width: 64, fontSize: 20 },\n}\n\nexport function getInitials(name: string): string {\n  const parts = name.trim().split(/\\s+/)\n  if (parts.length === 0) return ''\n  if (parts.length === 1) return parts[0].charAt(0).toUpperCase()\n  return (parts[0].charAt(0) + parts[parts.length - 1].charAt(0)).toUpperCase()\n}\n\nexport function createAvatarGroup(props: AvatarGroupProps): AvatarGroupAPI {\n  const { users, max, size = 'md' } = props\n\n  const visibleUsers = max && max > 0 ? users.slice(0, max) : users\n  const overflowUsers = max && max > 0 ? users.slice(max) : []\n  const overflowCount = overflowUsers.length\n\n  const groupId = generateId('rfr-avatar-group')\n  const labelId = generateId('rfr-avatar-group-label')\n\n  const ariaProps: Partial<AccessibilityProps> & Record<string, unknown> = {\n    role: 'group',\n    'aria-label': `${users.length} users`,\n    id: groupId,\n  }\n\n  function getAvatarAriaProps(user: AvatarUser): Record<string, unknown> {\n    const label = user.status ? `${user.name} (${user.status})` : user.name\n    return {\n      role: 'img',\n      'aria-label': label,\n    }\n  }\n\n  const overflowBadgeProps: Record<string, unknown> = {\n    role: 'button',\n    'aria-label': `${overflowCount} more users`,\n  }\n\n  return {\n    visibleUsers,\n    overflowCount,\n    overflowUsers,\n    ariaProps,\n    getAvatarAriaProps,\n    getInitials,\n    overflowBadgeProps,\n    ids: {\n      group: groupId,\n      label: labelId,\n    },\n  }\n}\n", "import { cva } from '@refraction-ui/shared'\n\nexport const avatarGroupStyles =\n  'flex items-center -space-x-2'\n\nexport const avatarVariants = cva({\n  base: 'relative inline-flex items-center justify-center rounded-full border-2 border-background bg-muted text-muted-foreground font-medium overflow-hidden ring-2 ring-background',\n  variants: {\n    size: {\n      xs: 'h-6 w-6 text-[10px]',\n      sm: 'h-8 w-8 text-xs',\n      md: 'h-10 w-10 text-sm',\n      lg: 'h-12 w-12 text-base',\n      xl: 'h-16 w-16 text-xl',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n})\n\nexport const avatarOverflowBadgeVariants = cva({\n  base: 'relative inline-flex items-center justify-center rounded-full border-2 border-background bg-muted text-muted-foreground font-medium ring-2 ring-background',\n  variants: {\n    size: {\n      xs: 'h-6 w-6 text-[10px]',\n      sm: 'h-8 w-8 text-xs',\n      md: 'h-10 w-10 text-sm',\n      lg: 'h-12 w-12 text-base',\n      xl: 'h-16 w-16 text-xl',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n})\n\nexport const avatarImageStyles =\n  'h-full w-full object-cover'\n\nexport const avatarPresenceDotVariants = cva({\n  base: 'absolute bottom-0 right-0 rounded-full border-2 border-background',\n  variants: {\n    size: {\n      xs: 'h-2 w-2',\n      sm: 'h-2.5 w-2.5',\n      md: 'h-3 w-3',\n      lg: 'h-3.5 w-3.5',\n      xl: 'h-4 w-4',\n    },\n    status: {\n      online: 'bg-success',\n      offline: 'bg-gray-400',\n      away: 'bg-warning',\n      busy: 'bg-destructive',\n      dnd: 'bg-destructive',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n    status: 'offline',\n  },\n})\n", "import * as React from 'react'\nimport {\n  createAvatarGroup,\n  avatarGroupStyles,\n  avatarVariants,\n  avatarOverflowBadgeVariants,\n  avatarImageStyles,\n  avatarPresenceDotVariants,\n  type AvatarUser,\n  type AvatarSize,\n} from '@refraction-ui/avatar-group'\nimport { cn } from '@refraction-ui/shared'\n\nexport interface AvatarGroupProps {\n  users: AvatarUser[]\n  max?: number\n  size?: AvatarSize\n  className?: string\n}\n\nexport const AvatarGroup = React.forwardRef<HTMLDivElement, AvatarGroupProps>(\n  function AvatarGroup({ users, max, size = 'md', className }, ref) {\n  const api = createAvatarGroup({ users, max, size })\n\n  return React.createElement(\n    'div',\n    { ref, ...api.ariaProps, className: cn(avatarGroupStyles, className) },\n    api.visibleUsers.map((user) =>\n      React.createElement(\n        'div',\n        {\n          key: user.id,\n          className: avatarVariants({ size }),\n          ...api.getAvatarAriaProps(user),\n        },\n        user.src\n          ? React.createElement('img', {\n              src: user.src,\n              alt: user.name,\n              className: avatarImageStyles,\n            })\n          : React.createElement('span', null, api.getInitials(user.name)),\n        user.status &&\n          React.createElement('span', {\n            className: avatarPresenceDotVariants({ size, status: user.status }),\n          }),\n      ),\n    ),\n    api.overflowCount > 0 &&\n      React.createElement(\n        'div',\n        {\n          className: avatarOverflowBadgeVariants({ size }),\n          ...api.overflowBadgeProps,\n        },\n        `+${api.overflowCount}`,\n      ),\n  )\n  },\n)\n"],
+  "mappings": "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",
+  "names": ["AvatarGroup"]
+}

package/dist/react-avatar.js

@@ -0,0 +1,168 @@
+import {
+  cn,
+  cva
+} from "./chunk-ZF3OHCGV.js";
+
+// ../react-avatar/dist/index.js
+import * as React from "react";
+
+// ../avatar/dist/index.js
+function getInitials(name) {
+  const parts = name.trim().split(/\s+/);
+  if (parts.length === 0 || parts[0] === "") return "";
+  if (parts.length === 1) return parts[0].charAt(0).toUpperCase();
+  return (parts[0].charAt(0) + parts[parts.length - 1].charAt(0)).toUpperCase();
+}
+function createAvatar(props = {}) {
+  const { src, alt = "", fallback = "", size = "md" } = props;
+  const ariaProps = {
+    role: "img"
+  };
+  if (alt) {
+    ariaProps["aria-label"] = alt;
+  }
+  const fallbackText = fallback ? getInitials(fallback) : alt ? getInitials(alt) : "";
+  const dataAttributes = {
+    "data-slot": "avatar"
+  };
+  return {
+    ariaProps,
+    dataAttributes,
+    imageProps: {
+      alt,
+      role: "img"
+    },
+    fallbackText,
+    state: {
+      size,
+      hasSrc: !!src
+    }
+  };
+}
+var avatarTokens = {
+  name: "avatar",
+  tokens: {
+    bg: { variable: "--rfr-avatar-bg", fallback: "hsl(var(--muted))" },
+    fg: { variable: "--rfr-avatar-fg", fallback: "hsl(var(--muted-foreground))" },
+    border: { variable: "--rfr-avatar-border", fallback: "hsl(var(--border))" }
+  }
+};
+var avatarVariants = cva({
+  base: "relative flex shrink-0 overflow-hidden rounded-full",
+  variants: {
+    size: {
+      xs: "h-6 w-6",
+      sm: "h-8 w-8",
+      md: "h-10 w-10",
+      lg: "h-12 w-12",
+      xl: "h-16 w-16"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+var avatarImageVariants = cva({
+  base: "aspect-square h-full w-full object-cover"
+});
+var avatarFallbackVariants = cva({
+  base: "flex h-full w-full items-center justify-center rounded-full bg-muted text-muted-foreground",
+  variants: {
+    size: {
+      xs: "text-xs",
+      sm: "text-xs",
+      md: "text-sm",
+      lg: "text-base",
+      xl: "text-lg"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+
+// ../react-avatar/dist/index.js
+import { jsx } from "react/jsx-runtime";
+var AvatarContext = React.createContext({
+  size: "md",
+  imageLoaded: false,
+  imageError: false,
+  setImageLoaded: () => {
+  },
+  setImageError: () => {
+  }
+});
+var Avatar = React.forwardRef(
+  function Avatar2({ size = "md", className, children, ...props }, ref) {
+    const [imageLoaded, setImageLoaded] = React.useState(false);
+    const [imageError, setImageError] = React.useState(false);
+    const api = createAvatar({ size });
+    return /* @__PURE__ */ jsx(AvatarContext.Provider, { value: { size, imageLoaded, imageError, setImageLoaded, setImageError }, children: /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        className: cn(avatarVariants({ size }), className),
+        ...api.ariaProps,
+        ...api.dataAttributes,
+        ...props,
+        children
+      }
+    ) });
+  }
+);
+var AvatarImage = React.forwardRef(
+  function AvatarImage2({ className, src, alt = "", onLoad, onError, ...props }, ref) {
+    const { imageError, setImageLoaded, setImageError } = React.useContext(AvatarContext);
+    React.useEffect(() => {
+      setImageLoaded(false);
+      setImageError(false);
+    }, [src, setImageLoaded, setImageError]);
+    const handleLoad = (e) => {
+      setImageLoaded(true);
+      onLoad?.(e);
+    };
+    const handleError = (e) => {
+      setImageError(true);
+      onError?.(e);
+    };
+    if (imageError) return null;
+    return /* @__PURE__ */ jsx(
+      "img",
+      {
+        ref,
+        className: cn(avatarImageVariants(), className),
+        src,
+        alt,
+        onLoad: handleLoad,
+        onError: handleError,
+        ...props
+      }
+    );
+  }
+);
+var AvatarFallback = React.forwardRef(
+  function AvatarFallback2({ className, children, ...props }, ref) {
+    const { size, imageLoaded, imageError } = React.useContext(AvatarContext);
+    if (imageLoaded && !imageError) return null;
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        className: cn(avatarFallbackVariants({ size }), className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+export {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+  avatarFallbackVariants,
+  avatarImageVariants,
+  avatarTokens,
+  avatarVariants,
+  getInitials
+};
+//# sourceMappingURL=react-avatar.js.map

package/dist/react-avatar.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../avatar/src/avatar.ts", "../../avatar/src/avatar.styles.ts", "../../react-avatar/src/avatar.tsx"],
+  "sourcesContent": ["import type { AccessibilityProps } from '@refraction-ui/shared'\n\nexport type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n\nexport type AvatarLoadingStatus = 'idle' | 'loading' | 'loaded' | 'error'\n\nexport interface AvatarProps {\n  src?: string\n  alt?: string\n  fallback?: string\n  size?: AvatarSize\n}\n\nexport interface AvatarAPI {\n  /** ARIA attributes to spread on the root element */\n  ariaProps: Partial<AccessibilityProps>\n  /** Data attributes for CSS styling hooks */\n  dataAttributes: Record<string, string>\n  /** Image ARIA props */\n  imageProps: {\n    alt: string\n    role: string\n  }\n  /** Fallback text (initials) */\n  fallbackText: string\n  /** Current state */\n  state: {\n    size: AvatarSize\n    hasSrc: boolean\n  }\n}\n\n/**\n * Extract initials from a name or fallback string.\n * Takes first letter of first two words, uppercased.\n */\nexport function getInitials(name: string): string {\n  const parts = name.trim().split(/\\s+/)\n  if (parts.length === 0 || parts[0] === '') return ''\n  if (parts.length === 1) return parts[0].charAt(0).toUpperCase()\n  return (parts[0].charAt(0) + parts[parts.length - 1].charAt(0)).toUpperCase()\n}\n\nexport function createAvatar(props: AvatarProps = {}): AvatarAPI {\n  const { src, alt = '', fallback = '', size = 'md' } = props\n\n  const ariaProps: Partial<AccessibilityProps> = {\n    role: 'img',\n  }\n  if (alt) {\n    ariaProps['aria-label'] = alt\n  }\n\n  const fallbackText = fallback ? getInitials(fallback) : (alt ? getInitials(alt) : '')\n\n  const dataAttributes: Record<string, string> = {\n    'data-slot': 'avatar',\n  }\n\n  return {\n    ariaProps,\n    dataAttributes,\n    imageProps: {\n      alt,\n      role: 'img',\n    },\n    fallbackText,\n    state: {\n      size,\n      hasSrc: !!src,\n    },\n  }\n}\n", "import { cva } from '@refraction-ui/shared'\nimport type { TokenContract } from '@refraction-ui/shared'\n\nexport const avatarTokens: TokenContract = {\n  name: 'avatar',\n  tokens: {\n    bg: { variable: '--rfr-avatar-bg', fallback: 'hsl(var(--muted))' },\n    fg: { variable: '--rfr-avatar-fg', fallback: 'hsl(var(--muted-foreground))' },\n    border: { variable: '--rfr-avatar-border', fallback: 'hsl(var(--border))' },\n  },\n}\n\nexport const avatarVariants = cva({\n  base: 'relative flex shrink-0 overflow-hidden rounded-full',\n  variants: {\n    size: {\n      xs: 'h-6 w-6',\n      sm: 'h-8 w-8',\n      md: 'h-10 w-10',\n      lg: 'h-12 w-12',\n      xl: 'h-16 w-16',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n})\n\nexport const avatarImageVariants = cva({\n  base: 'aspect-square h-full w-full object-cover',\n})\n\nexport const avatarFallbackVariants = cva({\n  base: 'flex h-full w-full items-center justify-center rounded-full bg-muted text-muted-foreground',\n  variants: {\n    size: {\n      xs: 'text-xs',\n      sm: 'text-xs',\n      md: 'text-sm',\n      lg: 'text-base',\n      xl: 'text-lg',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n})\n", "import * as React from 'react'\nimport {\n  createAvatar,\n  avatarVariants,\n  avatarImageVariants,\n  avatarFallbackVariants,\n  type AvatarSize,\n} from '@refraction-ui/avatar'\nimport { cn } from '@refraction-ui/shared'\n\n/* ─── Context ──────────────────────────────────────────────────── */\ninterface AvatarContextValue {\n  size: AvatarSize\n  imageLoaded: boolean\n  imageError: boolean\n  setImageLoaded: (loaded: boolean) => void\n  setImageError: (error: boolean) => void\n}\n\nconst AvatarContext = React.createContext<AvatarContextValue>({\n  size: 'md',\n  imageLoaded: false,\n  imageError: false,\n  setImageLoaded: () => {},\n  setImageError: () => {},\n})\n\n/* ─── Avatar (root) ────────────────────────────────────────────── */\nexport interface AvatarProps extends React.HTMLAttributes<HTMLSpanElement> {\n  size?: AvatarSize\n}\n\n/**\n * Avatar -- circular image with fallback support.\n * Compound component: use Avatar > AvatarImage + AvatarFallback.\n */\nexport const Avatar = React.forwardRef<HTMLSpanElement, AvatarProps>(\n  function Avatar({ size = 'md', className, children, ...props }, ref) {\n    const [imageLoaded, setImageLoaded] = React.useState(false)\n    const [imageError, setImageError] = React.useState(false)\n\n    const api = createAvatar({ size })\n\n    return (\n      <AvatarContext.Provider value={{ size, imageLoaded, imageError, setImageLoaded, setImageError }}>\n        <span\n          ref={ref}\n          className={cn(avatarVariants({ size }), className)}\n          {...api.ariaProps}\n          {...api.dataAttributes}\n          {...props}\n        >\n          {children}\n        </span>\n      </AvatarContext.Provider>\n    )\n  },\n)\n\n/* ─── AvatarImage ──────────────────────────────────────────────── */\nexport interface AvatarImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {}\n\nexport const AvatarImage = React.forwardRef<HTMLImageElement, AvatarImageProps>(\n  function AvatarImage({ className, src, alt = '', onLoad, onError, ...props }, ref) {\n    const { imageError, setImageLoaded, setImageError } = React.useContext(AvatarContext)\n\n    React.useEffect(() => {\n      setImageLoaded(false)\n      setImageError(false)\n    }, [src, setImageLoaded, setImageError])\n\n    const handleLoad = (e: React.SyntheticEvent<HTMLImageElement>) => {\n      setImageLoaded(true)\n      onLoad?.(e)\n    }\n\n    const handleError = (e: React.SyntheticEvent<HTMLImageElement>) => {\n      setImageError(true)\n      onError?.(e)\n    }\n\n    if (imageError) return null\n\n    return (\n      <img\n        ref={ref}\n        className={cn(avatarImageVariants(), className)}\n        src={src}\n        alt={alt}\n        onLoad={handleLoad}\n        onError={handleError}\n        {...props}\n      />\n    )\n  },\n)\n\n/* ─── AvatarFallback ───────────────────────────────────────────── */\nexport interface AvatarFallbackProps extends React.HTMLAttributes<HTMLSpanElement> {}\n\nexport const AvatarFallback = React.forwardRef<HTMLSpanElement, AvatarFallbackProps>(\n  function AvatarFallback({ className, children, ...props }, ref) {\n    const { size, imageLoaded, imageError } = React.useContext(AvatarContext)\n\n    if (imageLoaded && !imageError) return null\n\n    return (\n      <span\n        ref={ref}\n        className={cn(avatarFallbackVariants({ size }), className)}\n        {...props}\n      >\n        {children}\n      </span>\n    )\n  },\n)\n"],
+  "mappings": "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",
+  "names": ["Avatar", "AvatarImage", "AvatarFallback"]
+}

package/dist/react-badge.js

@@ -0,0 +1,86 @@
+import {
+  Slot
+} from "./chunk-WSPJTQAV.js";
+import {
+  cn,
+  cva
+} from "./chunk-ZF3OHCGV.js";
+
+// ../react-badge/dist/index.js
+import * as React from "react";
+
+// ../badge/dist/index.js
+var statusVariants = ["success", "warning", "destructive"];
+function createBadge(props = {}) {
+  const { variant = "default" } = props;
+  const ariaProps = {};
+  if (statusVariants.includes(variant)) {
+    ariaProps.role = "status";
+  }
+  const dataAttributes = {};
+  dataAttributes["data-variant"] = variant;
+  return {
+    ariaProps,
+    dataAttributes
+  };
+}
+var badgeVariants = cva({
+  base: "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  variants: {
+    variant: {
+      default: "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+      primary: "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+      secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+      destructive: "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80 font-semibold",
+      outline: "text-foreground",
+      success: "border-transparent bg-success text-success-foreground shadow hover:bg-success/80 font-semibold",
+      warning: "border-transparent bg-warning text-warning-foreground shadow hover:bg-warning/80 font-semibold"
+    },
+    size: {
+      sm: "px-2 py-0 text-[10px]",
+      md: "px-2.5 py-0.5 text-xs"
+    }
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "md"
+  }
+});
+
+// ../react-badge/dist/index.js
+import { jsx } from "react/jsx-runtime";
+var Badge = React.forwardRef(
+  function Badge2({ variant, size, asChild = false, className, children, ...props }, ref) {
+    const api = createBadge({ variant, size });
+    const classes = cn(badgeVariants({ variant, size }), className);
+    if (asChild) {
+      return /* @__PURE__ */ jsx(
+        Slot,
+        {
+          ref,
+          className: classes,
+          ...api.ariaProps,
+          ...api.dataAttributes,
+          ...props,
+          children
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: classes,
+        ...api.ariaProps,
+        ...api.dataAttributes,
+        ...props,
+        children
+      }
+    );
+  }
+);
+export {
+  Badge,
+  badgeVariants
+};
+//# sourceMappingURL=react-badge.js.map

package/dist/react-badge.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../badge/src/badge.ts", "../../badge/src/badge.styles.ts", "../../react-badge/src/badge.tsx"],
+  "sourcesContent": ["import type { AccessibilityProps } from '@refraction-ui/shared'\n\nexport type BadgeVariant = 'default' | 'primary' | 'secondary' | 'destructive' | 'outline' | 'success' | 'warning'\nexport type BadgeSize = 'sm' | 'md'\n\nexport interface BadgeProps {\n  variant?: BadgeVariant\n  size?: BadgeSize\n}\n\nexport interface BadgeAPI {\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\nconst statusVariants: BadgeVariant[] = ['success', 'warning', 'destructive']\n\n/** Icon name for status badge variants — non-color indicator for colorblind safety */\nconst BADGE_ICONS: Partial<Record<BadgeVariant, string>> = {\n  success: 'check',\n  warning: 'alert',\n  destructive: 'x',\n}\n\n/** Get the icon name for a badge variant (undefined for non-status variants) */\nexport function getBadgeIcon(variant: BadgeVariant): string | undefined {\n  return BADGE_ICONS[variant]\n}\n\nexport function createBadge(props: BadgeProps = {}): BadgeAPI {\n  const { variant = 'default' } = props\n\n  const ariaProps: Partial<AccessibilityProps> = {}\n\n  if (statusVariants.includes(variant)) {\n    ariaProps.role = 'status'\n  }\n\n  const dataAttributes: Record<string, string> = {}\n  dataAttributes['data-variant'] = variant\n\n  return {\n    ariaProps,\n    dataAttributes,\n  }\n}\n", "import { cva } from '@refraction-ui/shared'\n\nexport const badgeVariants = cva({\n  base: 'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',\n  variants: {\n    variant: {\n      default: 'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',\n      primary: 'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',\n      secondary: 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',\n      destructive: 'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80 font-semibold',\n      outline: 'text-foreground',\n      success: 'border-transparent bg-success text-success-foreground shadow hover:bg-success/80 font-semibold',\n      warning: 'border-transparent bg-warning text-warning-foreground shadow hover:bg-warning/80 font-semibold',\n    },\n    size: {\n      sm: 'px-2 py-0 text-[10px]',\n      md: 'px-2.5 py-0.5 text-xs',\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n    size: 'md',\n  },\n})\n", "import * as React from 'react'\nimport {\n  createBadge,\n  badgeVariants,\n  type BadgeVariant,\n  type BadgeSize,\n} from '@refraction-ui/badge'\nimport { cn } from '@refraction-ui/shared'\nimport { Slot } from '@refraction-ui/react-slot'\n\nexport interface BadgeProps extends React.HTMLAttributes<HTMLDivElement> {\n  variant?: BadgeVariant\n  size?: BadgeSize\n  /** Merge the badge's classes/props onto the single child element instead of\n   * rendering a `<div>` (Radix-style `asChild`) — e.g.\n   * `<Badge asChild><a href=\"/x\">…</a></Badge>` for a linked badge. Expects\n   * exactly one React element child. */\n  asChild?: boolean\n}\n\n/**\n * Badge component — renders a styled badge with variant and size support.\n *\n * Uses the headless @refraction-ui/badge core for state and ARIA attributes.\n * Styling via Tailwind utility classes (no external CSS-in-JS).\n */\nexport const Badge = React.forwardRef<HTMLDivElement, BadgeProps>(\n  function Badge({ variant, size, asChild = false, className, children, ...props }, ref) {\n    const api = createBadge({ variant, size })\n    const classes = cn(badgeVariants({ variant, size }), 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          {children}\n        </Slot>\n      )\n    }\n\n    return (\n      <div\n        ref={ref}\n        className={classes}\n        {...api.ariaProps}\n        {...api.dataAttributes}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  },\n)\n"],
+  "mappings": ";;;;;;;;;;;;AAiBA,IAAM,iBAAiC,CAAC,WAAW,WAAW,aAAa;AAcpE,SAAS,YAAY,QAAoB,CAAA,GAAc;AAC5D,QAAM,EAAE,UAAU,UAAA,IAAc;AAEhC,QAAM,YAAyC,CAAA;AAE/C,MAAI,eAAe,SAAS,OAAO,GAAG;AACpC,cAAU,OAAO;EACnB;AAEA,QAAM,iBAAyC,CAAA;AAC/C,iBAAe,cAAc,IAAI;AAEjC,SAAO;IACL;IACA;EAAA;AAEJ;AC7CO,IAAM,gBAAgB,IAAI;EAC/B,MAAM;EACN,UAAU;IACR,SAAS;MACP,SAAS;MACT,SAAS;MACT,WAAW;MACX,aAAa;MACb,SAAS;MACT,SAAS;MACT,SAAS;IAAA;IAEX,MAAM;MACJ,IAAI;MACJ,IAAI;IAAA;EACN;EAEF,iBAAiB;IACf,SAAS;IACT,MAAM;EAAA;AAEV,CAAC;;;;ACGM,IAAM,QAAc;EACzB,SAASA,OAAM,EAAE,SAAS,MAAM,UAAU,OAAO,WAAW,UAAU,GAAG,MAAA,GAAS,KAAK;AACrF,UAAM,MAAM,YAAY,EAAE,SAAS,KAAA,CAAM;AACzC,UAAM,UAAU,GAAG,cAAc,EAAE,SAAS,KAAA,CAAM,GAAG,SAAS;AAE9D,QAAI,SAAS;AACX,aACE;QAAC;QAAA;UACC;UACA,WAAW;UACV,GAAG,IAAI;UACP,GAAG,IAAI;UACP,GAAG;UAEH;QAAA;MAAA;IAGP;AAEA,WACE;MAAC;MAAA;QACC;QACA,WAAW;QACV,GAAG,IAAI;QACP,GAAG,IAAI;QACP,GAAG;QAEH;MAAA;IAAA;EAGP;AACF;",
+  "names": ["Badge"]
+}

package/dist/react-bottom-nav.js

@@ -0,0 +1,67 @@
+import {
+  cn,
+  cva
+} from "./chunk-ZF3OHCGV.js";
+
+// ../react-bottom-nav/dist/index.js
+import * as React from "react";
+
+// ../bottom-nav/dist/index.js
+function createBottomNav(props = {}) {
+  const { currentPath = "/" } = props;
+  function isActive(href) {
+    if (href === "/") return currentPath === "/";
+    return currentPath.startsWith(href);
+  }
+  return {
+    ariaProps: { role: "navigation", "aria-label": "Main navigation" },
+    isActive,
+    tabAriaProps: (href) => isActive(href) ? { "aria-current": "page" } : {}
+  };
+}
+var bottomNavVariants = cva({
+  base: "fixed bottom-0 left-0 right-0 z-40 border-t bg-background md:hidden"
+});
+var bottomNavTabVariants = cva({
+  base: "flex flex-1 flex-col items-center justify-center gap-1 py-2 text-xs transition-colors",
+  variants: {
+    active: {
+      true: "text-foreground",
+      false: "text-muted-foreground"
+    }
+  },
+  defaultVariants: {
+    active: "false"
+  }
+});
+
+// ../react-bottom-nav/dist/index.js
+import { jsx, jsxs } from "react/jsx-runtime";
+var BottomNav = React.forwardRef(
+  function BottomNav2({ tabs = [], currentPath, className, ...props }, ref) {
+    const api = createBottomNav({ tabs, currentPath });
+    const classes = cn(bottomNavVariants(), className);
+    return /* @__PURE__ */ jsx("nav", { ref, className: classes, ...api.ariaProps, ...props, children: /* @__PURE__ */ jsx("div", { className: "flex", children: tabs.map((tab) => {
+      const active = api.isActive(tab.href);
+      return /* @__PURE__ */ jsxs(
+        "a",
+        {
+          href: tab.href,
+          className: bottomNavTabVariants({ active: active ? "true" : "false" }),
+          ...api.tabAriaProps(tab.href),
+          children: [
+            tab.icon && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: active && tab.activeIcon ? tab.activeIcon : tab.icon }),
+            /* @__PURE__ */ jsx("span", { children: tab.label })
+          ]
+        },
+        tab.href
+      );
+    }) }) });
+  }
+);
+export {
+  BottomNav,
+  bottomNavTabVariants,
+  bottomNavVariants
+};
+//# sourceMappingURL=react-bottom-nav.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../bottom-nav/src/bottom-nav.ts", "../../bottom-nav/src/bottom-nav.styles.ts", "../../react-bottom-nav/src/bottom-nav.tsx"],
+  "sourcesContent": ["export interface NavTab {\n  label: string\n  href: string\n  icon?: string\n  activeIcon?: string\n}\n\nexport interface BottomNavProps {\n  tabs?: NavTab[]\n  currentPath?: string\n}\n\nexport interface BottomNavAPI {\n  ariaProps: Record<string, string>\n  isActive: (href: string) => boolean\n  tabAriaProps: (href: string) => Record<string, string>\n}\n\nexport function createBottomNav(props: BottomNavProps = {}): BottomNavAPI {\n  const { currentPath = '/' } = props\n\n  function isActive(href: string): boolean {\n    if (href === '/') return currentPath === '/'\n    return currentPath.startsWith(href)\n  }\n\n  return {\n    ariaProps: { role: 'navigation', 'aria-label': 'Main navigation' },\n    isActive,\n    tabAriaProps: (href: string): Record<string, string> =>\n      isActive(href) ? { 'aria-current': 'page' } : {},\n  }\n}\n", "import { cva } from '@refraction-ui/shared'\n\nexport const bottomNavVariants = cva({\n  base: 'fixed bottom-0 left-0 right-0 z-40 border-t bg-background md:hidden',\n})\n\nexport const bottomNavTabVariants = cva({\n  base: 'flex flex-1 flex-col items-center justify-center gap-1 py-2 text-xs transition-colors',\n  variants: {\n    active: {\n      true: 'text-foreground',\n      false: 'text-muted-foreground',\n    },\n  },\n  defaultVariants: {\n    active: 'false',\n  },\n})\n", "import * as React from 'react'\nimport {\n  createBottomNav,\n  bottomNavVariants,\n  bottomNavTabVariants,\n  type NavTab,\n} from '@refraction-ui/bottom-nav'\nimport { cn } from '@refraction-ui/shared'\n\nexport interface BottomNavProps extends React.HTMLAttributes<HTMLElement> {\n  /** Tab items */\n  tabs?: NavTab[]\n  /** Current pathname for active state */\n  currentPath?: string\n}\n\n/**\n * BottomNav component — renders a fixed bottom navigation bar with tab buttons.\n *\n * Uses the headless @refraction-ui/bottom-nav core for state and ARIA attributes.\n * Visible on mobile only (md:hidden via styles).\n */\nexport const BottomNav = React.forwardRef<HTMLElement, BottomNavProps>(\n  function BottomNav({ tabs = [], currentPath, className, ...props }, ref) {\n    const api = createBottomNav({ tabs, currentPath })\n    const classes = cn(bottomNavVariants(), className)\n\n    return (\n      <nav ref={ref} className={classes} {...api.ariaProps} {...props}>\n        <div className=\"flex\">\n          {tabs.map((tab) => {\n            const active = api.isActive(tab.href)\n            return (\n              <a\n                key={tab.href}\n                href={tab.href}\n                className={bottomNavTabVariants({ active: active ? 'true' : 'false' })}\n                {...api.tabAriaProps(tab.href)}\n              >\n                {tab.icon && <span aria-hidden=\"true\">{active && tab.activeIcon ? tab.activeIcon : tab.icon}</span>}\n                <span>{tab.label}</span>\n              </a>\n            )\n          })}\n        </div>\n      </nav>\n    )\n  },\n)\n"],
+  "mappings": ";;;;;;;;;AAkBO,SAAS,gBAAgB,QAAwB,CAAA,GAAkB;AACxE,QAAM,EAAE,cAAc,IAAA,IAAQ;AAE9B,WAAS,SAAS,MAAuB;AACvC,QAAI,SAAS,IAAK,QAAO,gBAAgB;AACzC,WAAO,YAAY,WAAW,IAAI;EACpC;AAEA,SAAO;IACL,WAAW,EAAE,MAAM,cAAc,cAAc,kBAAA;IAC/C;IACA,cAAc,CAAC,SACb,SAAS,IAAI,IAAI,EAAE,gBAAgB,OAAA,IAAW,CAAA;EAAC;AAErD;AC9BO,IAAM,oBAAoB,IAAI;EACnC,MAAM;AACR,CAAC;AAEM,IAAM,uBAAuB,IAAI;EACtC,MAAM;EACN,UAAU;IACR,QAAQ;MACN,MAAM;MACN,OAAO;IAAA;EACT;EAEF,iBAAiB;IACf,QAAQ;EAAA;AAEZ,CAAC;;;;ACKM,IAAM,YAAkB;EAC7B,SAASA,WAAU,EAAE,OAAO,CAAA,GAAI,aAAa,WAAW,GAAG,MAAA,GAAS,KAAK;AACvE,UAAM,MAAM,gBAAgB,EAAE,MAAM,YAAA,CAAa;AACjD,UAAM,UAAU,GAAG,kBAAA,GAAqB,SAAS;AAEjD,WAAA,oBACG,OAAA,EAAI,KAAU,WAAW,SAAU,GAAG,IAAI,WAAY,GAAG,OACxD,UAAA,oBAAC,OAAA,EAAI,WAAU,QACZ,UAAA,KAAK,IAAI,CAAC,QAAQ;AACjB,YAAM,SAAS,IAAI,SAAS,IAAI,IAAI;AACpC,aACE;QAAC;QAAA;UAEC,MAAM,IAAI;UACV,WAAW,qBAAqB,EAAE,QAAQ,SAAS,SAAS,QAAA,CAAS;UACpE,GAAG,IAAI,aAAa,IAAI,IAAI;UAE5B,UAAA;YAAA,IAAI,QAAQ,oBAAC,QAAA,EAAK,eAAY,QAAQ,UAAA,UAAU,IAAI,aAAa,IAAI,aAAa,IAAI,KAAA,CAAK;YAC5F,oBAAC,QAAA,EAAM,UAAA,IAAI,MAAA,CAAM;UAAA;QAAA;QANZ,IAAI;MAAA;IASf,CAAC,EAAA,CACH,EAAA,CACF;EAEJ;AACF;",
+  "names": ["BottomNav"]
+}

package/dist/react-brand-network-cell.js

@@ -0,0 +1,92 @@
+import {
+  cn,
+  cva
+} from "./chunk-ZF3OHCGV.js";
+
+// ../react-brand-network-cell/dist/index.js
+import * as React from "react";
+
+// ../brand-network-cell/dist/index.js
+function createBrandNetworkCell(props = {}) {
+  const { current = false } = props;
+  const ariaProps = {
+    role: "group"
+  };
+  const dataAttributes = {
+    "data-current": String(current)
+  };
+  return { ariaProps, dataAttributes };
+}
+var brandNetworkCellVariants = cva({
+  base: [
+    "relative rounded-xl border border-border bg-card p-4",
+    "flex flex-col gap-3 transition-shadow"
+  ].join(" "),
+  variants: {
+    current: {
+      true: "ring-1 ring-primary",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    current: "false"
+  }
+});
+var brandNetworkCellGlyphClass = "flex size-10 items-center justify-center rounded-lg text-sm font-bold";
+var brandNetworkCellDomainClass = "font-semibold text-foreground";
+var brandNetworkCellCurrentBadgeClass = "inline-flex items-center rounded-md bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary";
+var brandNetworkCellBodyClass = "text-sm text-muted-foreground";
+var brandNetworkCellLinkClass = "text-sm text-primary";
+
+// ../react-brand-network-cell/dist/index.js
+import { jsxs, jsx } from "react/jsx-runtime";
+var BrandNetworkCell = React.forwardRef(
+  function BrandNetworkCell2({
+    glyph,
+    glyphBg,
+    glyphColor,
+    domain,
+    body,
+    href,
+    linkLabel,
+    current = false,
+    className,
+    ...props
+  }, ref) {
+    const api = createBrandNetworkCell({ current });
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          brandNetworkCellVariants({ current: current ? "true" : "false" }),
+          className
+        ),
+        ...api.ariaProps,
+        ...api.dataAttributes,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: brandNetworkCellGlyphClass,
+              style: { background: glyphBg, color: glyphColor },
+              "aria-hidden": "true",
+              children: glyph
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx("span", { className: brandNetworkCellDomainClass, children: domain }),
+            current && /* @__PURE__ */ jsx("span", { className: brandNetworkCellCurrentBadgeClass, children: "You are here" })
+          ] }),
+          /* @__PURE__ */ jsx("p", { className: brandNetworkCellBodyClass, children: body }),
+          href != null && /* @__PURE__ */ jsx("a", { href, className: brandNetworkCellLinkClass, children: linkLabel ?? "Visit \u2192" })
+        ]
+      }
+    );
+  }
+);
+export {
+  BrandNetworkCell
+};
+//# sourceMappingURL=react-brand-network-cell.js.map