@refraction-ui/react 0.19.1 → 0.20.0

package/dist/react-tooltip.js

@@ -0,0 +1,221 @@
+import {
+  cn,
+  cva,
+  devWarn,
+  generateId
+} from "./chunk-ZF3OHCGV.js";
+
+// ../react-tooltip/dist/index.js
+import * as React from "react";
+import { createPortal } from "react-dom";
+
+// ../tooltip/dist/index.js
+function createTooltip(props = {}) {
+  const {
+    open: controlledOpen,
+    defaultOpen = false,
+    onOpenChange,
+    placement = "top",
+    delayDuration = 300
+  } = props;
+  const contentId = generateId("rfr-tooltip");
+  let isOpen = controlledOpen ?? defaultOpen;
+  let delayTimer = null;
+  const state = { open: isOpen };
+  function setOpen(value) {
+    isOpen = value;
+    state.open = value;
+    onOpenChange?.(value);
+  }
+  function cancelDelay() {
+    if (delayTimer !== null) {
+      clearTimeout(delayTimer);
+      delayTimer = null;
+    }
+  }
+  function open() {
+    cancelDelay();
+    setOpen(true);
+  }
+  function close() {
+    cancelDelay();
+    setOpen(false);
+  }
+  function openWithDelay() {
+    cancelDelay();
+    if (delayDuration <= 0) {
+      setOpen(true);
+      return;
+    }
+    delayTimer = setTimeout(() => {
+      setOpen(true);
+      delayTimer = null;
+    }, delayDuration);
+  }
+  const triggerProps = {
+    "aria-describedby": contentId
+  };
+  const contentProps = {
+    role: "tooltip",
+    id: contentId
+  };
+  return {
+    state,
+    triggerProps,
+    contentProps,
+    placement,
+    open,
+    close,
+    openWithDelay,
+    delayDuration,
+    cancelDelay
+  };
+}
+var tooltipContentVariants = cva({
+  base: "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground shadow-md",
+  variants: {
+    side: {
+      top: "animate-slide-down-fade",
+      right: "animate-slide-left-fade",
+      bottom: "animate-slide-up-fade",
+      left: "animate-slide-right-fade"
+    }
+  },
+  defaultVariants: {
+    side: "top"
+  }
+});
+
+// ../react-tooltip/dist/index.js
+import { jsx } from "react/jsx-runtime";
+var TooltipContext = React.createContext(null);
+function useTooltipContext() {
+  const ctx = React.useContext(TooltipContext);
+  if (!ctx) {
+    devWarn(
+      "react-tooltip/context-outside-provider",
+      "Tooltip compound components (TooltipTrigger/TooltipContent/etc.) must be rendered inside a <Tooltip>. The missing TooltipContext makes this throw."
+    );
+    throw new Error("Tooltip compound components must be used within <Tooltip>");
+  }
+  return ctx;
+}
+function Tooltip({
+  open: controlledOpen,
+  defaultOpen = false,
+  onOpenChange,
+  placement,
+  delayDuration = 300,
+  children
+}) {
+  const [internalOpen, setInternalOpen] = React.useState(controlledOpen ?? defaultOpen);
+  const isControlled = controlledOpen !== void 0;
+  const isOpen = isControlled ? controlledOpen : internalOpen;
+  const timerRef = React.useRef(null);
+  const handleOpenChange = React.useCallback(
+    (value) => {
+      if (!isControlled) {
+        setInternalOpen(value);
+      }
+      onOpenChange?.(value);
+    },
+    [isControlled, onOpenChange]
+  );
+  const api = React.useMemo(
+    () => createTooltip({ open: isOpen, onOpenChange: handleOpenChange, placement, delayDuration }),
+    [isOpen, handleOpenChange, placement, delayDuration]
+  );
+  const cancelDelay = React.useCallback(() => {
+    if (timerRef.current !== null) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+  }, []);
+  const openWithDelay = React.useCallback(() => {
+    cancelDelay();
+    if (delayDuration <= 0) {
+      handleOpenChange(true);
+      return;
+    }
+    timerRef.current = setTimeout(() => {
+      handleOpenChange(true);
+      timerRef.current = null;
+    }, delayDuration);
+  }, [cancelDelay, delayDuration, handleOpenChange]);
+  React.useEffect(() => {
+    return () => {
+      if (timerRef.current !== null) {
+        clearTimeout(timerRef.current);
+      }
+    };
+  }, []);
+  const ctx = React.useMemo(
+    () => ({ api, open: isOpen, setOpen: handleOpenChange, openWithDelay, cancelDelay }),
+    [api, isOpen, handleOpenChange, openWithDelay, cancelDelay]
+  );
+  return React.createElement(TooltipContext.Provider, { value: ctx }, children);
+}
+var TooltipTrigger = React.forwardRef(
+  function TooltipTrigger2({ onMouseEnter, onMouseLeave, onFocus, onBlur, children, ...props }, ref) {
+    const { api, setOpen, openWithDelay, cancelDelay } = useTooltipContext();
+    const handleMouseEnter = (e) => {
+      openWithDelay();
+      onMouseEnter?.(e);
+    };
+    const handleMouseLeave = (e) => {
+      cancelDelay();
+      setOpen(false);
+      onMouseLeave?.(e);
+    };
+    const handleFocus = (e) => {
+      openWithDelay();
+      onFocus?.(e);
+    };
+    const handleBlur = (e) => {
+      cancelDelay();
+      setOpen(false);
+      onBlur?.(e);
+    };
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        "aria-describedby": api.triggerProps["aria-describedby"],
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        ...props,
+        children
+      }
+    );
+  }
+);
+var TooltipContent = React.forwardRef(
+  function TooltipContent2({ side, className, children, ...props }, ref) {
+    const { api, open } = useTooltipContext();
+    if (!open) return null;
+    const content = /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: api.contentProps.role,
+        id: api.contentProps.id,
+        className: cn(tooltipContentVariants({ side: side ?? api.placement }), className),
+        ...props,
+        children
+      }
+    );
+    if (typeof document !== "undefined") {
+      return createPortal(content, document.body);
+    }
+    return content;
+  }
+);
+export {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+  tooltipContentVariants
+};
+//# sourceMappingURL=react-tooltip.js.map

package/dist/react-tooltip.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../tooltip/src/tooltip.ts", "../../tooltip/src/tooltip.styles.ts", "../../react-tooltip/src/tooltip.tsx"],
+  "sourcesContent": ["import type { AccessibilityProps, Side } from '@refraction-ui/shared'\nimport { generateId } from '@refraction-ui/shared'\n\nexport interface TooltipProps {\n  open?: boolean\n  defaultOpen?: boolean\n  onOpenChange?: (open: boolean) => void\n  placement?: Side\n  delayDuration?: number\n}\n\nexport interface TooltipAPI {\n  /** Current open state */\n  state: { open: boolean }\n  /** Props to spread on the trigger element */\n  triggerProps: Partial<AccessibilityProps> & {\n    'aria-describedby': string\n  }\n  /** Props to spread on the content element */\n  contentProps: {\n    role: 'tooltip'\n    id: string\n  }\n  /** Resolved placement */\n  placement: Side\n  /** Open the tooltip */\n  open: () => void\n  /** Close the tooltip (and clear any pending delay) */\n  close: () => void\n  /** Open with delay */\n  openWithDelay: () => void\n  /** The configured delay duration */\n  delayDuration: number\n  /** Cancel any pending delay timer */\n  cancelDelay: () => void\n}\n\nexport function createTooltip(props: TooltipProps = {}): TooltipAPI {\n  const {\n    open: controlledOpen,\n    defaultOpen = false,\n    onOpenChange,\n    placement = 'top',\n    delayDuration = 300,\n  } = props\n\n  const contentId = generateId('rfr-tooltip')\n\n  let isOpen = controlledOpen ?? defaultOpen\n  let delayTimer: ReturnType<typeof setTimeout> | null = null\n\n  const state = { open: isOpen }\n\n  function setOpen(value: boolean) {\n    isOpen = value\n    state.open = value\n    onOpenChange?.(value)\n  }\n\n  function cancelDelay() {\n    if (delayTimer !== null) {\n      clearTimeout(delayTimer)\n      delayTimer = null\n    }\n  }\n\n  function open() {\n    cancelDelay()\n    setOpen(true)\n  }\n\n  function close() {\n    cancelDelay()\n    setOpen(false)\n  }\n\n  function openWithDelay() {\n    cancelDelay()\n    if (delayDuration <= 0) {\n      setOpen(true)\n      return\n    }\n    delayTimer = setTimeout(() => {\n      setOpen(true)\n      delayTimer = null\n    }, delayDuration)\n  }\n\n  const triggerProps = {\n    'aria-describedby': contentId,\n  }\n\n  const contentProps = {\n    role: 'tooltip' as const,\n    id: contentId,\n  }\n\n  return {\n    state,\n    triggerProps,\n    contentProps,\n    placement,\n    open,\n    close,\n    openWithDelay,\n    delayDuration,\n    cancelDelay,\n  }\n}\n", "import { cva } from '@refraction-ui/shared'\n\nexport const tooltipContentVariants = cva({\n  base: 'z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground shadow-md',\n  variants: {\n    side: {\n      top: 'animate-slide-down-fade',\n      right: 'animate-slide-left-fade',\n      bottom: 'animate-slide-up-fade',\n      left: 'animate-slide-right-fade',\n    },\n  },\n  defaultVariants: {\n    side: 'top',\n  },\n})\n", "import * as React from 'react'\nimport { createPortal } from 'react-dom'\nimport {\n  createTooltip,\n  tooltipContentVariants,\n  type TooltipAPI,\n} from '@refraction-ui/tooltip'\nimport type { Side } from '@refraction-ui/shared'\nimport { cn, devWarn } from '@refraction-ui/shared'\n\n/* ------------------------------------------------------------------ */\n/*  Context                                                            */\n/* ------------------------------------------------------------------ */\n\ninterface TooltipContextValue {\n  api: TooltipAPI\n  open: boolean\n  setOpen: (value: boolean) => void\n  openWithDelay: () => void\n  cancelDelay: () => void\n}\n\nconst TooltipContext = React.createContext<TooltipContextValue | null>(null)\n\nfunction useTooltipContext(): TooltipContextValue {\n  const ctx = React.useContext(TooltipContext)\n  if (!ctx) {\n    devWarn(\n      'react-tooltip/context-outside-provider',\n      'Tooltip compound components (TooltipTrigger/TooltipContent/etc.) must be rendered inside a <Tooltip>. The missing TooltipContext makes this throw.',\n    )\n    throw new Error('Tooltip compound components must be used within <Tooltip>')\n  }\n  return ctx\n}\n\n/* ------------------------------------------------------------------ */\n/*  Tooltip (root provider)                                            */\n/* ------------------------------------------------------------------ */\n\nexport interface TooltipProps {\n  open?: boolean\n  defaultOpen?: boolean\n  onOpenChange?: (open: boolean) => void\n  placement?: Side\n  delayDuration?: number\n  children: React.ReactNode\n}\n\nexport function Tooltip({\n  open: controlledOpen,\n  defaultOpen = false,\n  onOpenChange,\n  placement,\n  delayDuration = 300,\n  children,\n}: TooltipProps) {\n  const [internalOpen, setInternalOpen] = React.useState(controlledOpen ?? defaultOpen)\n  const isControlled = controlledOpen !== undefined\n  const isOpen = isControlled ? controlledOpen : internalOpen\n  const timerRef = React.useRef<ReturnType<typeof setTimeout> | null>(null)\n\n  const handleOpenChange = React.useCallback(\n    (value: boolean) => {\n      if (!isControlled) {\n        setInternalOpen(value)\n      }\n      onOpenChange?.(value)\n    },\n    [isControlled, onOpenChange],\n  )\n\n  const api = React.useMemo(\n    () => createTooltip({ open: isOpen, onOpenChange: handleOpenChange, placement, delayDuration }),\n    [isOpen, handleOpenChange, placement, delayDuration],\n  )\n\n  const cancelDelay = React.useCallback(() => {\n    if (timerRef.current !== null) {\n      clearTimeout(timerRef.current)\n      timerRef.current = null\n    }\n  }, [])\n\n  const openWithDelay = React.useCallback(() => {\n    cancelDelay()\n    if (delayDuration <= 0) {\n      handleOpenChange(true)\n      return\n    }\n    timerRef.current = setTimeout(() => {\n      handleOpenChange(true)\n      timerRef.current = null\n    }, delayDuration)\n  }, [cancelDelay, delayDuration, handleOpenChange])\n\n  // Clean up timer on unmount\n  React.useEffect(() => {\n    return () => {\n      if (timerRef.current !== null) {\n        clearTimeout(timerRef.current)\n      }\n    }\n  }, [])\n\n  const ctx = React.useMemo<TooltipContextValue>(\n    () => ({ api, open: isOpen, setOpen: handleOpenChange, openWithDelay, cancelDelay }),\n    [api, isOpen, handleOpenChange, openWithDelay, cancelDelay],\n  )\n\n  return React.createElement(TooltipContext.Provider, { value: ctx }, children)\n}\n\n/* ------------------------------------------------------------------ */\n/*  TooltipTrigger                                                     */\n/* ------------------------------------------------------------------ */\n\nexport interface TooltipTriggerProps extends React.HTMLAttributes<HTMLSpanElement> {}\n\nexport const TooltipTrigger = React.forwardRef<HTMLSpanElement, TooltipTriggerProps>(\n  function TooltipTrigger({ onMouseEnter, onMouseLeave, onFocus, onBlur, children, ...props }, ref) {\n    const { api, setOpen, openWithDelay, cancelDelay } = useTooltipContext()\n\n    const handleMouseEnter = (e: React.MouseEvent<HTMLSpanElement>) => {\n      openWithDelay()\n      onMouseEnter?.(e)\n    }\n\n    const handleMouseLeave = (e: React.MouseEvent<HTMLSpanElement>) => {\n      cancelDelay()\n      setOpen(false)\n      onMouseLeave?.(e)\n    }\n\n    const handleFocus = (e: React.FocusEvent<HTMLSpanElement>) => {\n      openWithDelay()\n      onFocus?.(e)\n    }\n\n    const handleBlur = (e: React.FocusEvent<HTMLSpanElement>) => {\n      cancelDelay()\n      setOpen(false)\n      onBlur?.(e)\n    }\n\n    return (\n      <span\n        ref={ref}\n        aria-describedby={api.triggerProps['aria-describedby']}\n        onMouseEnter={handleMouseEnter}\n        onMouseLeave={handleMouseLeave}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        {...props}\n      >\n        {children}\n      </span>\n    )\n  },\n)\n\n/* ------------------------------------------------------------------ */\n/*  TooltipContent                                                     */\n/* ------------------------------------------------------------------ */\n\nexport interface TooltipContentProps extends React.HTMLAttributes<HTMLDivElement> {\n  side?: Side\n}\n\nexport const TooltipContent = React.forwardRef<HTMLDivElement, TooltipContentProps>(\n  function TooltipContent({ side, className, children, ...props }, ref) {\n    const { api, open } = useTooltipContext()\n\n    if (!open) return null\n\n    const content = (\n      <div\n        ref={ref}\n        role={api.contentProps.role}\n        id={api.contentProps.id}\n        className={cn(tooltipContentVariants({ side: side ?? api.placement }), className)}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n\n    if (typeof document !== 'undefined') {\n      return createPortal(content, document.body)\n    }\n\n    return content\n  },\n)\n"],
+  "mappings": "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",
+  "names": ["TooltipTrigger", "TooltipContent"]
+}

package/dist/react-version-selector.js

@@ -0,0 +1,270 @@
+import {
+  Keys,
+  cn,
+  createKeyboardHandler,
+  cva,
+  generateId
+} from "./chunk-ZF3OHCGV.js";
+
+// ../react-version-selector/dist/index.js
+import * as React from "react";
+
+// ../version-selector/dist/index.js
+function createVersionSelector(props) {
+  const {
+    value: initialValue = "",
+    onValueChange,
+    versions
+  } = props;
+  const contentId = generateId("rfr-ver-sel");
+  let selectedVersion = initialValue;
+  let isOpen = false;
+  const state = { selectedVersion, isOpen };
+  function setOpen(value) {
+    isOpen = value;
+    state.isOpen = value;
+  }
+  function select(value) {
+    selectedVersion = value;
+    state.selectedVersion = value;
+    onValueChange?.(value);
+    setOpen(false);
+  }
+  const triggerProps = {
+    "aria-expanded": isOpen,
+    "aria-controls": contentId,
+    "aria-haspopup": "listbox",
+    role: "combobox"
+  };
+  const contentProps = {
+    role: "listbox",
+    id: contentId
+  };
+  function getOptionProps(value) {
+    const version = versions.find((v) => v.value === value);
+    const base = {
+      role: "option",
+      "aria-selected": selectedVersion === value,
+      "data-value": value
+    };
+    if (version?.isLatest) {
+      return { ...base, "data-latest": "true" };
+    }
+    return base;
+  }
+  const keyboardHandlers = {
+    [Keys.Escape]: () => {
+      setOpen(false);
+    },
+    [Keys.Enter]: () => {
+      setOpen(!isOpen);
+    },
+    [Keys.Space]: () => {
+      setOpen(!isOpen);
+    },
+    [Keys.ArrowDown]: () => {
+      if (!isOpen) {
+        setOpen(true);
+      }
+    },
+    [Keys.ArrowUp]: () => {
+      if (!isOpen) {
+        setOpen(true);
+      }
+    }
+  };
+  const handleKeyDown = createKeyboardHandler(keyboardHandlers);
+  return {
+    state,
+    triggerProps,
+    contentProps,
+    getOptionProps,
+    select,
+    open: () => setOpen(true),
+    close: () => setOpen(false),
+    keyboardHandlers,
+    handleKeyDown
+  };
+}
+var versionSelectorVariants = cva({
+  base: "relative inline-flex items-center justify-between rounded-md border bg-background text-foreground cursor-pointer",
+  variants: {
+    size: {
+      sm: "h-8 text-sm px-2 min-w-[100px]",
+      md: "h-10 text-base px-3 min-w-[140px]",
+      lg: "h-12 text-lg px-4 min-w-[180px]"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+var versionSelectorOptionVariants = cva({
+  base: "flex items-center gap-2 px-3 py-2 cursor-pointer hover:bg-accent",
+  variants: {
+    selected: {
+      true: "bg-accent/50 font-medium",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    selected: "false"
+  }
+});
+var latestBadgeVariants = cva({
+  base: "inline-flex items-center rounded-full text-xs font-medium px-2 py-0.5",
+  variants: {
+    variant: {
+      default: "bg-primary/10 text-primary",
+      accent: "bg-accent text-accent-foreground"
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+
+// ../react-version-selector/dist/index.js
+var VersionSelectorContext = React.createContext(null);
+var VersionSelector = React.forwardRef(
+  function VersionSelector2({ value: controlledValue, onValueChange, versions, placeholder = "Select version...", className }, ref) {
+    const [selectedVersion, setSelectedVersion] = React.useState(controlledValue ?? "");
+    const [isOpen, setIsOpen] = React.useState(false);
+    const containerRef = React.useRef(null);
+    const mergedRef = React.useCallback(
+      (node) => {
+        containerRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      },
+      [ref]
+    );
+    const handleValueChange = React.useCallback(
+      (val) => {
+        setSelectedVersion(val);
+        onValueChange?.(val);
+      },
+      [onValueChange]
+    );
+    const api = React.useMemo(
+      () => createVersionSelector({
+        value: selectedVersion,
+        onValueChange: handleValueChange,
+        versions
+      }),
+      [selectedVersion, handleValueChange, versions]
+    );
+    const handleSelect = React.useCallback(
+      (val) => {
+        setSelectedVersion(val);
+        onValueChange?.(val);
+        setIsOpen(false);
+      },
+      [onValueChange]
+    );
+    const handleTriggerClick = React.useCallback(() => {
+      setIsOpen((prev) => !prev);
+    }, []);
+    const handleKeyDown = React.useCallback(
+      (e) => {
+        if (e.key === "Escape") {
+          setIsOpen(false);
+        } else if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          setIsOpen((prev) => !prev);
+        } else if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+          if (!isOpen) {
+            setIsOpen(true);
+          }
+        }
+      },
+      [isOpen]
+    );
+    React.useEffect(() => {
+      if (!isOpen) return;
+      function handleClickOutside(e) {
+        if (containerRef.current && !containerRef.current.contains(e.target)) {
+          setIsOpen(false);
+        }
+      }
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, [isOpen]);
+    const ctx = React.useMemo(
+      () => ({
+        api,
+        isOpen,
+        setOpen: setIsOpen,
+        select: handleSelect,
+        versions
+      }),
+      [api, isOpen, handleSelect, versions]
+    );
+    const selectedOpt = versions.find((v) => v.value === selectedVersion);
+    const displayLabel = selectedOpt ? selectedOpt.label : placeholder;
+    return React.createElement(
+      VersionSelectorContext.Provider,
+      { value: ctx },
+      React.createElement(
+        "div",
+        { ref: mergedRef, className: cn("rfr-version-selector relative inline-block", className) },
+        // Trigger
+        React.createElement(
+          "button",
+          {
+            type: "button",
+            role: api.triggerProps.role,
+            "aria-expanded": isOpen,
+            "aria-controls": api.triggerProps["aria-controls"],
+            "aria-haspopup": api.triggerProps["aria-haspopup"],
+            className: versionSelectorVariants(),
+            onClick: handleTriggerClick,
+            onKeyDown: handleKeyDown
+          },
+          React.createElement("span", null, displayLabel),
+          selectedOpt?.isLatest && React.createElement(
+            "span",
+            { className: cn(latestBadgeVariants(), "ml-2") },
+            "Latest"
+          ),
+          React.createElement("span", { "aria-hidden": "true", className: "ml-2" }, "\u25BE")
+        ),
+        // Dropdown
+        isOpen && React.createElement(
+          "ul",
+          {
+            role: api.contentProps.role,
+            id: api.contentProps.id,
+            className: "absolute top-full left-0 w-full mt-1 rounded-md border bg-popover text-popover-foreground shadow-md z-50 overflow-auto max-h-60"
+          },
+          ...versions.map((ver) => {
+            const optProps = api.getOptionProps(ver.value);
+            const isSelected = selectedVersion === ver.value;
+            return React.createElement(
+              "li",
+              {
+                key: ver.value,
+                ...optProps,
+                className: versionSelectorOptionVariants({ selected: isSelected ? "true" : "false" }),
+                onClick: () => handleSelect(ver.value)
+              },
+              React.createElement("span", null, ver.label),
+              ver.isLatest && React.createElement(
+                "span",
+                { className: latestBadgeVariants() },
+                "Latest"
+              )
+            );
+          })
+        )
+      )
+    );
+  }
+);
+export {
+  VersionSelector,
+  latestBadgeVariants,
+  versionSelectorOptionVariants as optionVariants,
+  versionSelectorVariants
+};
+//# sourceMappingURL=react-version-selector.js.map

package/dist/react-version-selector.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../version-selector/src/version-selector.ts", "../../version-selector/src/version-selector.styles.ts", "../../react-version-selector/src/version-selector.tsx"],
+  "sourcesContent": ["import type { KeyboardHandlerMap } from '@refraction-ui/shared'\nimport { generateId, Keys, createKeyboardHandler } from '@refraction-ui/shared'\n\nexport interface VersionOption {\n  value: string\n  label: string\n  isLatest?: boolean\n}\n\nexport interface VersionSelectorProps {\n  value?: string\n  onValueChange?: (value: string) => void\n  versions: VersionOption[]\n}\n\nexport interface VersionSelectorAPI {\n  /** Current state */\n  state: { selectedVersion: string; isOpen: boolean }\n  /** Props to spread on the trigger element */\n  triggerProps: {\n    'aria-expanded': boolean\n    'aria-controls': string\n    'aria-haspopup': 'listbox'\n    role: 'combobox'\n  }\n  /** Props to spread on the content/dropdown element */\n  contentProps: {\n    role: 'listbox'\n    id: string\n  }\n  /** Get props for an individual option */\n  getOptionProps: (value: string) => {\n    role: 'option'\n    'aria-selected': boolean\n    'data-value': string\n    'data-latest'?: string\n  }\n  /** Select a version */\n  select: (value: string) => void\n  /** Open the dropdown */\n  open: () => void\n  /** Close the dropdown */\n  close: () => void\n  /** Keyboard handler map */\n  keyboardHandlers: KeyboardHandlerMap\n  /** Pre-built keyboard event handler */\n  handleKeyDown: (event: KeyboardEvent) => void\n}\n\nexport function createVersionSelector(props: VersionSelectorProps): VersionSelectorAPI {\n  const {\n    value: initialValue = '',\n    onValueChange,\n    versions,\n  } = props\n\n  const contentId = generateId('rfr-ver-sel')\n\n  let selectedVersion = initialValue\n  let isOpen = false\n\n  const state = { selectedVersion, isOpen }\n\n  function setOpen(value: boolean) {\n    isOpen = value\n    state.isOpen = value\n  }\n\n  function select(value: string) {\n    selectedVersion = value\n    state.selectedVersion = value\n    onValueChange?.(value)\n    setOpen(false)\n  }\n\n  const triggerProps = {\n    'aria-expanded': isOpen,\n    'aria-controls': contentId,\n    'aria-haspopup': 'listbox' as const,\n    role: 'combobox' as const,\n  }\n\n  const contentProps = {\n    role: 'listbox' as const,\n    id: contentId,\n  }\n\n  function getOptionProps(value: string) {\n    const version = versions.find((v) => v.value === value)\n    const base = {\n      role: 'option' as const,\n      'aria-selected': selectedVersion === value,\n      'data-value': value,\n    }\n    if (version?.isLatest) {\n      return { ...base, 'data-latest': 'true' }\n    }\n    return base\n  }\n\n  const keyboardHandlers: KeyboardHandlerMap = {\n    [Keys.Escape]: () => {\n      setOpen(false)\n    },\n    [Keys.Enter]: () => {\n      setOpen(!isOpen)\n    },\n    [Keys.Space]: () => {\n      setOpen(!isOpen)\n    },\n    [Keys.ArrowDown]: () => {\n      if (!isOpen) {\n        setOpen(true)\n      }\n    },\n    [Keys.ArrowUp]: () => {\n      if (!isOpen) {\n        setOpen(true)\n      }\n    },\n  }\n\n  const handleKeyDown = createKeyboardHandler(keyboardHandlers)\n\n  return {\n    state,\n    triggerProps,\n    contentProps,\n    getOptionProps,\n    select,\n    open: () => setOpen(true),\n    close: () => setOpen(false),\n    keyboardHandlers,\n    handleKeyDown,\n  }\n}\n", "import { cva } from '@refraction-ui/shared'\n\nexport const versionSelectorVariants = cva({\n  base: 'relative inline-flex items-center justify-between rounded-md border bg-background text-foreground cursor-pointer',\n  variants: {\n    size: {\n      sm: 'h-8 text-sm px-2 min-w-[100px]',\n      md: 'h-10 text-base px-3 min-w-[140px]',\n      lg: 'h-12 text-lg px-4 min-w-[180px]',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n})\n\nconst versionSelectorOptionVariants = cva({\n  base: 'flex items-center gap-2 px-3 py-2 cursor-pointer hover:bg-accent',\n  variants: {\n    selected: {\n      true: 'bg-accent/50 font-medium',\n      false: '',\n    },\n  },\n  defaultVariants: {\n    selected: 'false',\n  },\n})\n\nexport { versionSelectorOptionVariants as optionVariants }\n\nexport const latestBadgeVariants = cva({\n  base: 'inline-flex items-center rounded-full text-xs font-medium px-2 py-0.5',\n  variants: {\n    variant: {\n      default: 'bg-primary/10 text-primary',\n      accent: 'bg-accent text-accent-foreground',\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n  },\n})\n", "import * as React from 'react'\nimport {\n  createVersionSelector,\n  versionSelectorVariants,\n  optionVariants,\n  latestBadgeVariants,\n  type VersionSelectorAPI,\n  type VersionOption,\n} from '@refraction-ui/version-selector'\nimport { cn, devWarn } from '@refraction-ui/shared'\n\n/* ------------------------------------------------------------------ */\n/*  Context                                                            */\n/* ------------------------------------------------------------------ */\n\ninterface VersionSelectorContextValue {\n  api: VersionSelectorAPI\n  isOpen: boolean\n  setOpen: (value: boolean) => void\n  select: (value: string) => void\n  versions: VersionOption[]\n}\n\nconst VersionSelectorContext = React.createContext<VersionSelectorContextValue | null>(null)\n\nfunction useVersionSelectorContext(): VersionSelectorContextValue {\n  const ctx = React.useContext(VersionSelectorContext)\n  if (!ctx) {\n    devWarn(\n      'react-version-selector/compound-outside-provider',\n      'A VersionSelector compound component was rendered outside of <VersionSelector>. Wrap it in <VersionSelector>.',\n    )\n    throw new Error('VersionSelector compound components must be used within <VersionSelector>')\n  }\n  return ctx\n}\n\n/* ------------------------------------------------------------------ */\n/*  VersionSelector (root component)                                   */\n/* ------------------------------------------------------------------ */\n\nexport interface VersionSelectorProps {\n  value?: string\n  onValueChange?: (value: string) => void\n  versions: VersionOption[]\n  placeholder?: string\n  className?: string\n}\n\nexport const VersionSelector = React.forwardRef<HTMLDivElement, VersionSelectorProps>(\n  function VersionSelector({ value: controlledValue, onValueChange, versions, placeholder = 'Select version...', className }: VersionSelectorProps, ref) {\n  const [selectedVersion, setSelectedVersion] = React.useState(controlledValue ?? '')\n  const [isOpen, setIsOpen] = React.useState(false)\n  const containerRef = React.useRef<HTMLDivElement>(null)\n  const mergedRef = React.useCallback(\n    (node: HTMLDivElement | null) => {\n      containerRef.current = node\n      if (typeof ref === 'function') ref(node)\n      else if (ref) ref.current = node\n    },\n    [ref],\n  )\n\n  const handleValueChange = React.useCallback(\n    (val: string) => {\n      setSelectedVersion(val)\n      onValueChange?.(val)\n    },\n    [onValueChange],\n  )\n\n  const api = React.useMemo(\n    () =>\n      createVersionSelector({\n        value: selectedVersion,\n        onValueChange: handleValueChange,\n        versions,\n      }),\n    [selectedVersion, handleValueChange, versions],\n  )\n\n  const handleSelect = React.useCallback(\n    (val: string) => {\n      setSelectedVersion(val)\n      onValueChange?.(val)\n      setIsOpen(false)\n    },\n    [onValueChange],\n  )\n\n  const handleTriggerClick = React.useCallback(() => {\n    setIsOpen((prev) => !prev)\n  }, [])\n\n  const handleKeyDown = React.useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        setIsOpen(false)\n      } else if (e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault()\n        setIsOpen((prev) => !prev)\n      } else if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {\n        if (!isOpen) {\n          setIsOpen(true)\n        }\n      }\n    },\n    [isOpen],\n  )\n\n  // Click outside to close\n  React.useEffect(() => {\n    if (!isOpen) return\n    function handleClickOutside(e: MouseEvent) {\n      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {\n        setIsOpen(false)\n      }\n    }\n    document.addEventListener('mousedown', handleClickOutside)\n    return () => document.removeEventListener('mousedown', handleClickOutside)\n  }, [isOpen])\n\n  const ctx = React.useMemo<VersionSelectorContextValue>(\n    () => ({\n      api,\n      isOpen,\n      setOpen: setIsOpen,\n      select: handleSelect,\n      versions,\n    }),\n    [api, isOpen, handleSelect, versions],\n  )\n\n  const selectedOpt = versions.find((v) => v.value === selectedVersion)\n  const displayLabel = selectedOpt ? selectedOpt.label : placeholder\n\n  return React.createElement(\n    VersionSelectorContext.Provider,\n    { value: ctx },\n    React.createElement(\n      'div',\n      { ref: mergedRef, className: cn('rfr-version-selector relative inline-block', className) },\n      // Trigger\n      React.createElement(\n        'button',\n        {\n          type: 'button',\n          role: api.triggerProps.role,\n          'aria-expanded': isOpen,\n          'aria-controls': api.triggerProps['aria-controls'],\n          'aria-haspopup': api.triggerProps['aria-haspopup'],\n          className: versionSelectorVariants(),\n          onClick: handleTriggerClick,\n          onKeyDown: handleKeyDown,\n        },\n        React.createElement('span', null, displayLabel),\n        selectedOpt?.isLatest &&\n          React.createElement(\n            'span',\n            { className: cn(latestBadgeVariants(), 'ml-2') },\n            'Latest',\n          ),\n        React.createElement('span', { 'aria-hidden': 'true', className: 'ml-2' }, '\\u25BE'),\n      ),\n      // Dropdown\n      isOpen &&\n        React.createElement(\n          'ul',\n          {\n            role: api.contentProps.role,\n            id: api.contentProps.id,\n            className:\n              'absolute top-full left-0 w-full mt-1 rounded-md border bg-popover text-popover-foreground shadow-md z-50 overflow-auto max-h-60',\n          },\n          ...versions.map((ver) => {\n            const optProps = api.getOptionProps(ver.value)\n            const isSelected = selectedVersion === ver.value\n            return React.createElement(\n              'li',\n              {\n                key: ver.value,\n                ...optProps,\n                className: optionVariants({ selected: isSelected ? 'true' : 'false' }),\n                onClick: () => handleSelect(ver.value),\n              },\n              React.createElement('span', null, ver.label),\n              ver.isLatest &&\n                React.createElement(\n                  'span',\n                  { className: latestBadgeVariants() },\n                  'Latest',\n                ),\n            )\n          }),\n        ),\n    ),\n  )\n  },\n)\n"],
+  "mappings": "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",
+  "names": ["VersionSelector"]
+}

package/dist/react-video-grid.js

@@ -0,0 +1,129 @@
+import {
+  VideoTile
+} from "./chunk-H54FLNAF.js";
+import {
+  cn,
+  cva
+} from "./chunk-ZF3OHCGV.js";
+
+// ../react-video-grid/dist/index.js
+import * as React from "react";
+
+// ../video-grid/dist/index.js
+function computeGridColumns(count) {
+  if (count <= 1) return 1;
+  if (count <= 4) return 2;
+  if (count <= 9) return 3;
+  if (count <= 16) return 4;
+  if (count <= 25) return 5;
+  return 6;
+}
+function createVideoGrid(props = {}) {
+  const { layout = "auto" } = props;
+  return {
+    ariaProps: {
+      role: "group"
+    },
+    dataAttributes: {
+      "data-layout": layout
+    }
+  };
+}
+var videoGridVariants = cva({
+  base: "w-full h-full gap-2",
+  variants: {
+    layout: {
+      grid: "grid",
+      speaker: "flex flex-col",
+      auto: "grid"
+    }
+  },
+  defaultVariants: {
+    layout: "auto"
+  }
+});
+var videoGridSpotlightClass = "relative flex-1 min-h-0 rounded-xl overflow-hidden bg-muted";
+var videoGridFilmstripClass = "flex flex-row gap-2 overflow-x-auto py-1 shrink-0";
+var videoGridFilmstripTileClass = "w-36 shrink-0";
+
+// ../react-video-grid/dist/index.js
+import { jsxs, jsx } from "react/jsx-runtime";
+var VideoGrid = React.forwardRef(
+  function VideoGrid2({
+    participants,
+    layout = "auto",
+    spotlightId,
+    className,
+    style,
+    ...props
+  }, ref) {
+    const count = participants.length;
+    const effectiveLayout = layout === "auto" ? count <= 1 ? "speaker" : "grid" : layout;
+    const api = createVideoGrid({ layout: effectiveLayout });
+    const columns = computeGridColumns(count);
+    const gridStyle = effectiveLayout !== "speaker" ? { gridTemplateColumns: `repeat(${columns}, 1fr)`, ...style } : { ...style };
+    if (effectiveLayout === "speaker") {
+      const spotlightParticipant = participants.find((p) => p.id === spotlightId) ?? participants[0];
+      const filmstrip = participants.filter(
+        (p) => p.id !== spotlightParticipant?.id
+      );
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref,
+          className: cn(videoGridVariants({ layout: "speaker" }), className),
+          style,
+          ...api.ariaProps,
+          ...api.dataAttributes,
+          ...props,
+          children: [
+            /* @__PURE__ */ jsx("div", { className: videoGridSpotlightClass, children: spotlightParticipant && /* @__PURE__ */ jsx(
+              VideoTile,
+              {
+                name: spotlightParticipant.name,
+                micState: spotlightParticipant.micState ?? "on",
+                speaking: spotlightParticipant.speaking,
+                pinned: spotlightParticipant.pinned
+              },
+              spotlightParticipant.id
+            ) }),
+            filmstrip.length > 0 && /* @__PURE__ */ jsx("div", { className: videoGridFilmstripClass, children: filmstrip.map((p) => /* @__PURE__ */ jsx("div", { className: videoGridFilmstripTileClass, children: /* @__PURE__ */ jsx(
+              VideoTile,
+              {
+                name: p.name,
+                micState: p.micState ?? "on",
+                speaking: p.speaking,
+                pinned: p.pinned
+              }
+            ) }, p.id)) })
+          ]
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(videoGridVariants({ layout: effectiveLayout }), className),
+        style: gridStyle,
+        ...api.ariaProps,
+        ...api.dataAttributes,
+        ...props,
+        children: participants.map((p) => /* @__PURE__ */ jsx(
+          VideoTile,
+          {
+            name: p.name,
+            micState: p.micState ?? "on",
+            speaking: p.speaking,
+            pinned: p.pinned
+          },
+          p.id
+        ))
+      }
+    );
+  }
+);
+export {
+  VideoGrid
+};
+//# sourceMappingURL=react-video-grid.js.map