@refraction-ui/react 0.22.0 → 0.23.0

package/dist/react-dropdown-menu.js

@@ -138,11 +138,13 @@ function DropdownMenu({
     apiRef.current = createDropdownMenu({ open });
   }
   const api = apiRef.current;
+  const triggerRef = React.useRef(null);
   const ctx = React.useMemo(
     () => ({
       open,
       onOpenChange: handleOpenChange,
-      contentId: api.ids.content
+      contentId: api.ids.content,
+      triggerRef
     }),
     [open, handleOpenChange, api.ids.content]
   );
@@ -150,7 +152,12 @@ function DropdownMenu({
 }
 var DropdownMenuTrigger = React.forwardRef(
   function DropdownMenuTrigger2({ asChild = false, onClick, children, ...props }, ref) {
-    const { open, onOpenChange, contentId } = useDropdownMenuContext();
+    const { open, onOpenChange, contentId, triggerRef } = useDropdownMenuContext();
+    const setRefs = (node) => {
+      triggerRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    };
     const handleClick = (e) => {
       onOpenChange(!open);
       onClick?.(e);
@@ -181,20 +188,63 @@ var DropdownMenuTrigger = React.forwardRef(
           if (!e.defaultPrevented) handleClick(e);
         },
         ref: (node) => {
-          if (typeof ref === "function") ref(node);
-          else if (ref) ref.current = node;
+          setRefs(node);
           if (typeof childRef === "function") childRef(node);
           else if (childRef) childRef.current = node;
         }
       };
       return React.cloneElement(child, mergedProps);
     }
-    return React.createElement("button", { ref, ...triggerProps }, children);
+    return React.createElement("button", { ref: setRefs, ...triggerProps }, children);
   }
 );
+var DEFAULT_SIDE_OFFSET = 4;
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;
+function computeMenuPosition(trigger, contentWidth, align, sideOffset) {
+  const left = align === "end" ? trigger.right - contentWidth : align === "center" ? trigger.left + trigger.width / 2 - contentWidth / 2 : trigger.left;
+  return { position: "fixed", top: trigger.bottom + sideOffset, left: Math.max(0, left), minWidth: trigger.width };
+}
 var DropdownMenuContent = React.forwardRef(
-  function DropdownMenuContent2({ className, children, onKeyDown, ...props }, ref) {
-    const { open, onOpenChange, contentId } = useDropdownMenuContext();
+  function DropdownMenuContent2({ className, children, onKeyDown, align = "start", sideOffset = DEFAULT_SIDE_OFFSET, style, ...props }, forwardedRef) {
+    const { open, onOpenChange, contentId, triggerRef } = useDropdownMenuContext();
+    const contentRef = React.useRef(null);
+    const ref = React.useCallback(
+      (node) => {
+        contentRef.current = node;
+        if (typeof forwardedRef === "function") forwardedRef(node);
+        else if (forwardedRef) forwardedRef.current = node;
+      },
+      [forwardedRef]
+    );
+    const [position, setPosition] = React.useState(null);
+    useIsomorphicLayoutEffect(() => {
+      if (!open) return;
+      const update = () => {
+        const trigger = triggerRef.current;
+        const content2 = contentRef.current;
+        if (!trigger) return;
+        setPosition(
+          computeMenuPosition(trigger.getBoundingClientRect(), content2?.offsetWidth ?? 0, align, sideOffset)
+        );
+      };
+      update();
+      window.addEventListener("resize", update);
+      window.addEventListener("scroll", update, true);
+      return () => {
+        window.removeEventListener("resize", update);
+        window.removeEventListener("scroll", update, true);
+      };
+    }, [open, align, sideOffset, triggerRef]);
+    React.useEffect(() => {
+      if (!open) return;
+      const onPointerDown = (event) => {
+        const target = event.target;
+        if (contentRef.current?.contains(target) || triggerRef.current?.contains(target)) return;
+        onOpenChange(false);
+      };
+      document.addEventListener("pointerdown", onPointerDown);
+      return () => document.removeEventListener("pointerdown", onPointerDown);
+    }, [open, onOpenChange, triggerRef]);
     const handleKeyDown = (e) => {
       const handler = createKeyboardHandler({
         Escape: (ev) => {
@@ -214,6 +264,8 @@ var DropdownMenuContent = React.forwardRef(
         id: contentId,
         "data-state": open ? "open" : "closed",
         className: cn(menuContentVariants(), className),
+        style: position ? { ...position, ...style } : style,
+        "data-align": align,
         onKeyDown: handleKeyDown,
         tabIndex: -1,
         ...props
@@ -286,6 +338,7 @@ export {
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
+  computeMenuPosition,
   menuContentVariants,
   menuItemVariants
 };

package/dist/react-dropdown-menu.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../dropdown-menu/src/dropdown-menu.ts", "../../dropdown-menu/src/dropdown-menu.styles.ts", "../../react-dropdown-menu/src/dropdown-menu.tsx"],
-  "sourcesContent": ["import type { AccessibilityProps, KeyboardHandlerMap } from '@refraction-ui/shared'\nimport { createMachine, Keys, generateId } from '@refraction-ui/shared'\n\nexport interface DropdownMenuProps {\n  /** Whether the menu is open (controlled) */\n  open?: boolean\n  /** Whether the menu starts open (uncontrolled) */\n  defaultOpen?: boolean\n  /** Callback when open state changes */\n  onOpenChange?: (open: boolean) => void\n}\n\nexport interface MenuItemProps {\n  /** Whether the item is disabled */\n  disabled?: boolean\n  /** Callback when the item is selected */\n  onSelect?: () => void\n}\n\nexport interface DropdownMenuState {\n  open: boolean\n}\n\nexport interface DropdownMenuAPI {\n  /** Current menu state */\n  state: DropdownMenuState\n  /** ARIA attributes for the trigger button */\n  triggerProps: Partial<AccessibilityProps> & Record<string, unknown>\n  /** ARIA attributes for the menu content */\n  contentProps: Partial<AccessibilityProps> & Record<string, unknown>\n  /** Factory for menu item props */\n  getItemProps(item: MenuItemProps): Partial<AccessibilityProps> & Record<string, unknown>\n  /** Open the menu */\n  open(): void\n  /** Close the menu */\n  close(): void\n  /** Toggle the menu */\n  toggle(): void\n  /** Keyboard handlers for the menu */\n  keyboardHandlers: KeyboardHandlerMap\n  /** Generated IDs for aria linking */\n  ids: {\n    content: string\n  }\n}\n\nexport function createDropdownMenu(props: DropdownMenuProps = {}): DropdownMenuAPI {\n  const { open: controlledOpen, defaultOpen = false, onOpenChange } = props\n\n  const machine = createMachine<'open' | 'closed', 'OPEN' | 'CLOSE'>({\n    initial: controlledOpen ?? defaultOpen ? 'open' : 'closed',\n    states: {\n      closed: { on: { OPEN: 'open' } },\n      open: { on: { CLOSE: 'closed' } },\n    },\n  })\n\n  const contentId = generateId('rfr-dropdown-menu')\n\n  function isOpen(): boolean {\n    if (controlledOpen !== undefined) return controlledOpen\n    return machine.matches('open')\n  }\n\n  function openMenu(): void {\n    machine.send('OPEN')\n    onOpenChange?.(true)\n  }\n\n  function closeMenu(): void {\n    machine.send('CLOSE')\n    onOpenChange?.(false)\n  }\n\n  function toggleMenu(): void {\n    if (isOpen()) {\n      closeMenu()\n    } else {\n      openMenu()\n    }\n  }\n\n  function getItemProps(item: MenuItemProps): Partial<AccessibilityProps> & Record<string, unknown> {\n    return {\n      role: 'menuitem',\n      tabIndex: item.disabled ? -1 : 0,\n      'data-disabled': item.disabled ? '' : undefined,\n      'aria-disabled': item.disabled || undefined,\n    }\n  }\n\n  const keyboardHandlers: KeyboardHandlerMap = {\n    [Keys.Escape]: (e: KeyboardEvent) => {\n      e.preventDefault()\n      closeMenu()\n    },\n    [Keys.ArrowDown]: (e: KeyboardEvent) => {\n      e.preventDefault()\n    },\n    [Keys.ArrowUp]: (e: KeyboardEvent) => {\n      e.preventDefault()\n    },\n    [Keys.Enter]: (e: KeyboardEvent) => {\n      e.preventDefault()\n    },\n    [Keys.Home]: (e: KeyboardEvent) => {\n      e.preventDefault()\n    },\n    [Keys.End]: (e: KeyboardEvent) => {\n      e.preventDefault()\n    },\n  }\n\n  const triggerProps: Partial<AccessibilityProps> & Record<string, unknown> = {\n    'aria-expanded': isOpen(),\n    'aria-controls': contentId,\n    'aria-haspopup': 'menu',\n  }\n\n  const contentProps: Partial<AccessibilityProps> & Record<string, unknown> = {\n    role: 'menu',\n    id: contentId,\n    'data-state': isOpen() ? 'open' : 'closed',\n  }\n\n  return {\n    state: { open: isOpen() },\n    triggerProps,\n    contentProps,\n    getItemProps,\n    open: openMenu,\n    close: closeMenu,\n    toggle: toggleMenu,\n    keyboardHandlers,\n    ids: {\n      content: contentId,\n    },\n  }\n}\n", "import { cva } from '@refraction-ui/shared'\n\nexport const menuContentVariants = cva({\n  base: 'z-50 rounded-md border bg-popover shadow-md',\n})\n\nexport const menuItemVariants = cva({\n  base: 'relative flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n})\n", "import * as React from 'react'\nimport * as ReactDOM from 'react-dom'\nimport {\n  createDropdownMenu,\n  menuContentVariants,\n  menuItemVariants,\n  type DropdownMenuProps as CoreDropdownMenuProps,\n  type MenuItemProps as CoreMenuItemProps,\n} from '@refraction-ui/dropdown-menu'\nimport { cn, createKeyboardHandler, devWarn } from '@refraction-ui/shared'\n\n// ---------------------------------------------------------------------------\n// Context\n// ---------------------------------------------------------------------------\n\ninterface DropdownMenuContextValue {\n  open: boolean\n  onOpenChange: (open: boolean) => void\n  contentId: string\n}\n\nconst DropdownMenuContext = React.createContext<DropdownMenuContextValue | null>(null)\n\nfunction useDropdownMenuContext(): DropdownMenuContextValue {\n  const ctx = React.useContext(DropdownMenuContext)\n  if (!ctx) {\n    devWarn(\n      'react-dropdown-menu/context-outside-provider',\n      'DropdownMenu compound components (DropdownMenuTrigger/DropdownMenuContent/DropdownMenuItem/etc.) must be rendered inside a <DropdownMenu>. The missing DropdownMenuContext makes this throw.',\n    )\n    throw new Error('DropdownMenu compound components must be used within <DropdownMenu>')\n  }\n  return ctx\n}\n\n// ---------------------------------------------------------------------------\n// DropdownMenu (root provider)\n// ---------------------------------------------------------------------------\n\nexport interface DropdownMenuProps {\n  open?: boolean\n  defaultOpen?: boolean\n  onOpenChange?: (open: boolean) => void\n  children?: React.ReactNode\n}\n\nexport function DropdownMenu({\n  open: controlledOpen,\n  defaultOpen = false,\n  onOpenChange,\n  children,\n}: DropdownMenuProps) {\n  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen)\n  const isControlled = controlledOpen !== undefined\n  const open = isControlled ? controlledOpen : uncontrolledOpen\n\n  const handleOpenChange = React.useCallback(\n    (next: boolean) => {\n      if (!isControlled) {\n        setUncontrolledOpen(next)\n      }\n      onOpenChange?.(next)\n    },\n    [isControlled, onOpenChange],\n  )\n\n  // Use the headless core to get stable IDs\n  const apiRef = React.useRef<ReturnType<typeof createDropdownMenu> | null>(null)\n  if (apiRef.current === null) {\n    apiRef.current = createDropdownMenu({ open })\n  }\n  const api = apiRef.current\n\n  const ctx = React.useMemo<DropdownMenuContextValue>(\n    () => ({\n      open,\n      onOpenChange: handleOpenChange,\n      contentId: api.ids.content,\n    }),\n    [open, handleOpenChange, api.ids.content],\n  )\n\n  return React.createElement(DropdownMenuContext.Provider, { value: ctx }, children)\n}\n\n// ---------------------------------------------------------------------------\n// DropdownMenuTrigger\n// ---------------------------------------------------------------------------\n\nexport interface DropdownMenuTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Merge the trigger's props/behavior onto the child element instead of\n   * rendering a `<button>` around it (Radix-style `asChild`). Use it with\n   * styled triggers like `<Button>` — otherwise you'd nest a button in a\n   * button (invalid HTML and a hydration error). */\n  asChild?: boolean\n}\n\nexport const DropdownMenuTrigger = React.forwardRef<HTMLButtonElement, DropdownMenuTriggerProps>(\n  function DropdownMenuTrigger({ asChild = false, onClick, children, ...props }, ref) {\n    const { open, onOpenChange, contentId } = useDropdownMenuContext()\n\n    const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n      onOpenChange(!open)\n      onClick?.(e)\n    }\n\n    const triggerProps = {\n      type: 'button' as const,\n      'aria-expanded': open,\n      'aria-controls': contentId,\n      'aria-haspopup': 'menu' as const,\n      onClick: handleClick,\n      ...props,\n    }\n\n    if (asChild) {\n      if (!React.isValidElement(children)) {\n        devWarn(\n          'dropdown-menu-trigger-asChild-child',\n          'DropdownMenuTrigger: `asChild` expects a single React element child; rendering nothing.',\n        )\n        return null\n      }\n      const child = children as React.ReactElement<\n        Record<string, unknown>\n      > & { ref?: React.Ref<HTMLButtonElement> }\n      const childOnClick = child.props.onClick as\n        | ((e: React.MouseEvent<HTMLButtonElement>) => void)\n        | undefined\n      const childRef = child.ref\n      const mergedProps = {\n        ...triggerProps,\n        onClick: (e: React.MouseEvent<HTMLButtonElement>) => {\n          childOnClick?.(e)\n          if (!e.defaultPrevented) handleClick(e)\n        },\n        ref: (node: HTMLButtonElement | null) => {\n          if (typeof ref === 'function') ref(node)\n          else if (ref) ref.current = node\n          if (typeof childRef === 'function') childRef(node)\n          else if (childRef) childRef.current = node\n        },\n      }\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      return React.cloneElement(child, mergedProps as any)\n    }\n\n    return React.createElement('button', { ref, ...triggerProps }, children)\n  },\n)\n\n// ---------------------------------------------------------------------------\n// DropdownMenuContent\n// ---------------------------------------------------------------------------\n\nexport interface DropdownMenuContentProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nexport const DropdownMenuContent = React.forwardRef<HTMLDivElement, DropdownMenuContentProps>(\n  function DropdownMenuContent({ className, children, onKeyDown, ...props }, ref) {\n    const { open, onOpenChange, contentId } = useDropdownMenuContext()\n\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n      const handler = createKeyboardHandler({\n        Escape: (ev) => {\n          ev.preventDefault()\n          onOpenChange(false)\n        },\n      })\n      handler(e.nativeEvent)\n      onKeyDown?.(e)\n    }\n\n    if (!open) return null\n\n    const content = React.createElement(\n      'div',\n      {\n        ref,\n        role: 'menu',\n        id: contentId,\n        'data-state': open ? 'open' : 'closed',\n        className: cn(menuContentVariants(), className),\n        onKeyDown: handleKeyDown,\n        tabIndex: -1,\n        ...props,\n      },\n      children,\n    )\n\n    // Render via portal if document is available (client-side)\n    if (typeof document !== 'undefined') {\n      return ReactDOM.createPortal(content, document.body)\n    }\n\n    // SSR fallback: render inline\n    return content\n  },\n)\n\n// ---------------------------------------------------------------------------\n// DropdownMenuItem\n// ---------------------------------------------------------------------------\n\nexport interface DropdownMenuItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {\n  disabled?: boolean\n  onSelect?: () => void\n}\n\nexport const DropdownMenuItem = React.forwardRef<HTMLDivElement, DropdownMenuItemProps>(\n  function DropdownMenuItem({ className, disabled, onSelect, onClick, children, ...props }, ref) {\n    const { onOpenChange } = useDropdownMenuContext()\n\n    const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {\n      if (disabled) return\n      onSelect?.()\n      onOpenChange(false)\n      onClick?.(e)\n    }\n\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n      if (disabled) return\n      if (e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault()\n        onSelect?.()\n        onOpenChange(false)\n      }\n    }\n\n    return React.createElement(\n      'div',\n      {\n        ref,\n        role: 'menuitem',\n        tabIndex: disabled ? -1 : 0,\n        'data-disabled': disabled ? '' : undefined,\n        'aria-disabled': disabled || undefined,\n        className: cn(menuItemVariants(), className),\n        onClick: handleClick,\n        onKeyDown: handleKeyDown,\n        ...props,\n      },\n      children,\n    )\n  },\n)\n\n// ---------------------------------------------------------------------------\n// DropdownMenuSeparator\n// ---------------------------------------------------------------------------\n\nexport interface DropdownMenuSeparatorProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nexport const DropdownMenuSeparator = React.forwardRef<HTMLDivElement, DropdownMenuSeparatorProps>(\n  function DropdownMenuSeparator({ className, ...props }, ref) {\n    return React.createElement('div', {\n      ref,\n      role: 'separator',\n      className: cn('-mx-1 my-1 h-px bg-muted', className),\n      ...props,\n    })\n  },\n)\n\n// ---------------------------------------------------------------------------\n// DropdownMenuLabel\n// ---------------------------------------------------------------------------\n\nexport interface DropdownMenuLabelProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nexport const DropdownMenuLabel = React.forwardRef<HTMLDivElement, DropdownMenuLabelProps>(\n  function DropdownMenuLabel({ className, ...props }, ref) {\n    return React.createElement('div', {\n      ref,\n      className: cn('px-2 py-1.5 text-sm font-semibold', className),\n      ...props,\n    })\n  },\n)\n"],
-  "mappings": "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",
-  "names": ["DropdownMenuTrigger", "DropdownMenuContent", "DropdownMenuItem", "DropdownMenuSeparator", "DropdownMenuLabel"]
+  "sourcesContent": ["import type { AccessibilityProps, KeyboardHandlerMap } from '@refraction-ui/shared'\nimport { createMachine, Keys, generateId } from '@refraction-ui/shared'\n\nexport interface DropdownMenuProps {\n  /** Whether the menu is open (controlled) */\n  open?: boolean\n  /** Whether the menu starts open (uncontrolled) */\n  defaultOpen?: boolean\n  /** Callback when open state changes */\n  onOpenChange?: (open: boolean) => void\n}\n\nexport interface MenuItemProps {\n  /** Whether the item is disabled */\n  disabled?: boolean\n  /** Callback when the item is selected */\n  onSelect?: () => void\n}\n\nexport interface DropdownMenuState {\n  open: boolean\n}\n\nexport interface DropdownMenuAPI {\n  /** Current menu state */\n  state: DropdownMenuState\n  /** ARIA attributes for the trigger button */\n  triggerProps: Partial<AccessibilityProps> & Record<string, unknown>\n  /** ARIA attributes for the menu content */\n  contentProps: Partial<AccessibilityProps> & Record<string, unknown>\n  /** Factory for menu item props */\n  getItemProps(item: MenuItemProps): Partial<AccessibilityProps> & Record<string, unknown>\n  /** Open the menu */\n  open(): void\n  /** Close the menu */\n  close(): void\n  /** Toggle the menu */\n  toggle(): void\n  /** Keyboard handlers for the menu */\n  keyboardHandlers: KeyboardHandlerMap\n  /** Generated IDs for aria linking */\n  ids: {\n    content: string\n  }\n}\n\nexport function createDropdownMenu(props: DropdownMenuProps = {}): DropdownMenuAPI {\n  const { open: controlledOpen, defaultOpen = false, onOpenChange } = props\n\n  const machine = createMachine<'open' | 'closed', 'OPEN' | 'CLOSE'>({\n    initial: controlledOpen ?? defaultOpen ? 'open' : 'closed',\n    states: {\n      closed: { on: { OPEN: 'open' } },\n      open: { on: { CLOSE: 'closed' } },\n    },\n  })\n\n  const contentId = generateId('rfr-dropdown-menu')\n\n  function isOpen(): boolean {\n    if (controlledOpen !== undefined) return controlledOpen\n    return machine.matches('open')\n  }\n\n  function openMenu(): void {\n    machine.send('OPEN')\n    onOpenChange?.(true)\n  }\n\n  function closeMenu(): void {\n    machine.send('CLOSE')\n    onOpenChange?.(false)\n  }\n\n  function toggleMenu(): void {\n    if (isOpen()) {\n      closeMenu()\n    } else {\n      openMenu()\n    }\n  }\n\n  function getItemProps(item: MenuItemProps): Partial<AccessibilityProps> & Record<string, unknown> {\n    return {\n      role: 'menuitem',\n      tabIndex: item.disabled ? -1 : 0,\n      'data-disabled': item.disabled ? '' : undefined,\n      'aria-disabled': item.disabled || undefined,\n    }\n  }\n\n  const keyboardHandlers: KeyboardHandlerMap = {\n    [Keys.Escape]: (e: KeyboardEvent) => {\n      e.preventDefault()\n      closeMenu()\n    },\n    [Keys.ArrowDown]: (e: KeyboardEvent) => {\n      e.preventDefault()\n    },\n    [Keys.ArrowUp]: (e: KeyboardEvent) => {\n      e.preventDefault()\n    },\n    [Keys.Enter]: (e: KeyboardEvent) => {\n      e.preventDefault()\n    },\n    [Keys.Home]: (e: KeyboardEvent) => {\n      e.preventDefault()\n    },\n    [Keys.End]: (e: KeyboardEvent) => {\n      e.preventDefault()\n    },\n  }\n\n  const triggerProps: Partial<AccessibilityProps> & Record<string, unknown> = {\n    'aria-expanded': isOpen(),\n    'aria-controls': contentId,\n    'aria-haspopup': 'menu',\n  }\n\n  const contentProps: Partial<AccessibilityProps> & Record<string, unknown> = {\n    role: 'menu',\n    id: contentId,\n    'data-state': isOpen() ? 'open' : 'closed',\n  }\n\n  return {\n    state: { open: isOpen() },\n    triggerProps,\n    contentProps,\n    getItemProps,\n    open: openMenu,\n    close: closeMenu,\n    toggle: toggleMenu,\n    keyboardHandlers,\n    ids: {\n      content: contentId,\n    },\n  }\n}\n", "import { cva } from '@refraction-ui/shared'\n\nexport const menuContentVariants = cva({\n  base: 'z-50 rounded-md border bg-popover shadow-md',\n})\n\nexport const menuItemVariants = cva({\n  base: 'relative flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n})\n", "import * as React from 'react'\nimport * as ReactDOM from 'react-dom'\nimport {\n  createDropdownMenu,\n  menuContentVariants,\n  menuItemVariants,\n  type DropdownMenuProps as CoreDropdownMenuProps,\n  type MenuItemProps as CoreMenuItemProps,\n} from '@refraction-ui/dropdown-menu'\nimport { cn, createKeyboardHandler, devWarn } from '@refraction-ui/shared'\n\n// ---------------------------------------------------------------------------\n// Context\n// ---------------------------------------------------------------------------\n\ninterface DropdownMenuContextValue {\n  open: boolean\n  onOpenChange: (open: boolean) => void\n  contentId: string\n  /** The trigger element, so the portalled content can anchor to it. */\n  triggerRef: React.MutableRefObject<HTMLElement | null>\n}\n\nconst DropdownMenuContext = React.createContext<DropdownMenuContextValue | null>(null)\n\nfunction useDropdownMenuContext(): DropdownMenuContextValue {\n  const ctx = React.useContext(DropdownMenuContext)\n  if (!ctx) {\n    devWarn(\n      'react-dropdown-menu/context-outside-provider',\n      'DropdownMenu compound components (DropdownMenuTrigger/DropdownMenuContent/DropdownMenuItem/etc.) must be rendered inside a <DropdownMenu>. The missing DropdownMenuContext makes this throw.',\n    )\n    throw new Error('DropdownMenu compound components must be used within <DropdownMenu>')\n  }\n  return ctx\n}\n\n// ---------------------------------------------------------------------------\n// DropdownMenu (root provider)\n// ---------------------------------------------------------------------------\n\nexport interface DropdownMenuProps {\n  open?: boolean\n  defaultOpen?: boolean\n  onOpenChange?: (open: boolean) => void\n  children?: React.ReactNode\n}\n\nexport function DropdownMenu({\n  open: controlledOpen,\n  defaultOpen = false,\n  onOpenChange,\n  children,\n}: DropdownMenuProps) {\n  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen)\n  const isControlled = controlledOpen !== undefined\n  const open = isControlled ? controlledOpen : uncontrolledOpen\n\n  const handleOpenChange = React.useCallback(\n    (next: boolean) => {\n      if (!isControlled) {\n        setUncontrolledOpen(next)\n      }\n      onOpenChange?.(next)\n    },\n    [isControlled, onOpenChange],\n  )\n\n  // Use the headless core to get stable IDs\n  const apiRef = React.useRef<ReturnType<typeof createDropdownMenu> | null>(null)\n  if (apiRef.current === null) {\n    apiRef.current = createDropdownMenu({ open })\n  }\n  const api = apiRef.current\n\n  const triggerRef = React.useRef<HTMLElement | null>(null)\n\n  const ctx = React.useMemo<DropdownMenuContextValue>(\n    () => ({\n      open,\n      onOpenChange: handleOpenChange,\n      contentId: api.ids.content,\n      triggerRef,\n    }),\n    [open, handleOpenChange, api.ids.content],\n  )\n\n  return React.createElement(DropdownMenuContext.Provider, { value: ctx }, children)\n}\n\n// ---------------------------------------------------------------------------\n// DropdownMenuTrigger\n// ---------------------------------------------------------------------------\n\nexport interface DropdownMenuTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Merge the trigger's props/behavior onto the child element instead of\n   * rendering a `<button>` around it (Radix-style `asChild`). Use it with\n   * styled triggers like `<Button>` — otherwise you'd nest a button in a\n   * button (invalid HTML and a hydration error). */\n  asChild?: boolean\n}\n\nexport const DropdownMenuTrigger = React.forwardRef<HTMLButtonElement, DropdownMenuTriggerProps>(\n  function DropdownMenuTrigger({ asChild = false, onClick, children, ...props }, ref) {\n    const { open, onOpenChange, contentId, triggerRef } = useDropdownMenuContext()\n    const setRefs = (node: HTMLButtonElement | null) => {\n      triggerRef.current = node\n      if (typeof ref === 'function') ref(node)\n      else if (ref) ref.current = node\n    }\n\n    const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n      onOpenChange(!open)\n      onClick?.(e)\n    }\n\n    const triggerProps = {\n      type: 'button' as const,\n      'aria-expanded': open,\n      'aria-controls': contentId,\n      'aria-haspopup': 'menu' as const,\n      onClick: handleClick,\n      ...props,\n    }\n\n    if (asChild) {\n      if (!React.isValidElement(children)) {\n        devWarn(\n          'dropdown-menu-trigger-asChild-child',\n          'DropdownMenuTrigger: `asChild` expects a single React element child; rendering nothing.',\n        )\n        return null\n      }\n      const child = children as React.ReactElement<\n        Record<string, unknown>\n      > & { ref?: React.Ref<HTMLButtonElement> }\n      const childOnClick = child.props.onClick as\n        | ((e: React.MouseEvent<HTMLButtonElement>) => void)\n        | undefined\n      const childRef = child.ref\n      const mergedProps = {\n        ...triggerProps,\n        onClick: (e: React.MouseEvent<HTMLButtonElement>) => {\n          childOnClick?.(e)\n          if (!e.defaultPrevented) handleClick(e)\n        },\n        ref: (node: HTMLButtonElement | null) => {\n          setRefs(node)\n          if (typeof childRef === 'function') childRef(node)\n          else if (childRef) childRef.current = node\n        },\n      }\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      return React.cloneElement(child, mergedProps as any)\n    }\n\n    return React.createElement('button', { ref: setRefs, ...triggerProps }, children)\n  },\n)\n\n// ---------------------------------------------------------------------------\n// Positioning\n// ---------------------------------------------------------------------------\n\nexport type DropdownMenuAlign = 'start' | 'center' | 'end'\n\nconst DEFAULT_SIDE_OFFSET = 4\n\nconst useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect\n\n/**\n * Fixed-position coordinates that place a menu under its trigger, aligned to\n * the trigger's start, centre or end edge. Pure, so it is unit-testable.\n */\nexport function computeMenuPosition(\n  trigger: { top: number; bottom: number; left: number; right: number; width: number },\n  contentWidth: number,\n  align: DropdownMenuAlign,\n  sideOffset: number,\n): React.CSSProperties {\n  const left =\n    align === 'end'\n      ? trigger.right - contentWidth\n      : align === 'center'\n        ? trigger.left + trigger.width / 2 - contentWidth / 2\n        : trigger.left\n  return { position: 'fixed', top: trigger.bottom + sideOffset, left: Math.max(0, left), minWidth: trigger.width }\n}\n\n// ---------------------------------------------------------------------------\n// DropdownMenuContent\n// ---------------------------------------------------------------------------\n\nexport interface DropdownMenuContentProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Horizontal alignment to the trigger. Defaults to `start`. */\n  align?: DropdownMenuAlign\n  /** Gap between trigger and menu in px. Defaults to 4. */\n  sideOffset?: number\n}\n\nexport const DropdownMenuContent = React.forwardRef<HTMLDivElement, DropdownMenuContentProps>(\n  function DropdownMenuContent(\n    { className, children, onKeyDown, align = 'start', sideOffset = DEFAULT_SIDE_OFFSET, style, ...props },\n    forwardedRef,\n  ) {\n    const { open, onOpenChange, contentId, triggerRef } = useDropdownMenuContext()\n    const contentRef = React.useRef<HTMLDivElement | null>(null)\n    const ref = React.useCallback(\n      (node: HTMLDivElement | null) => {\n        contentRef.current = node\n        if (typeof forwardedRef === 'function') forwardedRef(node)\n        else if (forwardedRef) forwardedRef.current = node\n      },\n      [forwardedRef],\n    )\n    const [position, setPosition] = React.useState<React.CSSProperties | null>(null)\n\n    // The content is portalled to <body>, so anchor it to the trigger with\n    // fixed coordinates, and follow the trigger on scroll / resize.\n    useIsomorphicLayoutEffect(() => {\n      if (!open) return\n      const update = () => {\n        const trigger = triggerRef.current\n        const content = contentRef.current\n        if (!trigger) return\n        setPosition(\n          computeMenuPosition(trigger.getBoundingClientRect(), content?.offsetWidth ?? 0, align, sideOffset),\n        )\n      }\n      update()\n      window.addEventListener('resize', update)\n      window.addEventListener('scroll', update, true)\n      return () => {\n        window.removeEventListener('resize', update)\n        window.removeEventListener('scroll', update, true)\n      }\n    }, [open, align, sideOffset, triggerRef])\n\n    // Close on a pointer press outside the menu and its trigger.\n    React.useEffect(() => {\n      if (!open) return\n      const onPointerDown = (event: PointerEvent) => {\n        const target = event.target as Node\n        if (contentRef.current?.contains(target) || triggerRef.current?.contains(target)) return\n        onOpenChange(false)\n      }\n      document.addEventListener('pointerdown', onPointerDown)\n      return () => document.removeEventListener('pointerdown', onPointerDown)\n    }, [open, onOpenChange, triggerRef])\n\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n      const handler = createKeyboardHandler({\n        Escape: (ev) => {\n          ev.preventDefault()\n          onOpenChange(false)\n        },\n      })\n      handler(e.nativeEvent)\n      onKeyDown?.(e)\n    }\n\n    if (!open) return null\n\n    const content = React.createElement(\n      'div',\n      {\n        ref,\n        role: 'menu',\n        id: contentId,\n        'data-state': open ? 'open' : 'closed',\n        className: cn(menuContentVariants(), className),\n        style: position ? { ...position, ...style } : style,\n        'data-align': align,\n        onKeyDown: handleKeyDown,\n        tabIndex: -1,\n        ...props,\n      },\n      children,\n    )\n\n    // Render via portal if document is available (client-side)\n    if (typeof document !== 'undefined') {\n      return ReactDOM.createPortal(content, document.body)\n    }\n\n    // SSR fallback: render inline\n    return content\n  },\n)\n\n// ---------------------------------------------------------------------------\n// DropdownMenuItem\n// ---------------------------------------------------------------------------\n\nexport interface DropdownMenuItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {\n  disabled?: boolean\n  onSelect?: () => void\n}\n\nexport const DropdownMenuItem = React.forwardRef<HTMLDivElement, DropdownMenuItemProps>(\n  function DropdownMenuItem({ className, disabled, onSelect, onClick, children, ...props }, ref) {\n    const { onOpenChange } = useDropdownMenuContext()\n\n    const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {\n      if (disabled) return\n      onSelect?.()\n      onOpenChange(false)\n      onClick?.(e)\n    }\n\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n      if (disabled) return\n      if (e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault()\n        onSelect?.()\n        onOpenChange(false)\n      }\n    }\n\n    return React.createElement(\n      'div',\n      {\n        ref,\n        role: 'menuitem',\n        tabIndex: disabled ? -1 : 0,\n        'data-disabled': disabled ? '' : undefined,\n        'aria-disabled': disabled || undefined,\n        className: cn(menuItemVariants(), className),\n        onClick: handleClick,\n        onKeyDown: handleKeyDown,\n        ...props,\n      },\n      children,\n    )\n  },\n)\n\n// ---------------------------------------------------------------------------\n// DropdownMenuSeparator\n// ---------------------------------------------------------------------------\n\nexport interface DropdownMenuSeparatorProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nexport const DropdownMenuSeparator = React.forwardRef<HTMLDivElement, DropdownMenuSeparatorProps>(\n  function DropdownMenuSeparator({ className, ...props }, ref) {\n    return React.createElement('div', {\n      ref,\n      role: 'separator',\n      className: cn('-mx-1 my-1 h-px bg-muted', className),\n      ...props,\n    })\n  },\n)\n\n// ---------------------------------------------------------------------------\n// DropdownMenuLabel\n// ---------------------------------------------------------------------------\n\nexport interface DropdownMenuLabelProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nexport const DropdownMenuLabel = React.forwardRef<HTMLDivElement, DropdownMenuLabelProps>(\n  function DropdownMenuLabel({ className, ...props }, ref) {\n    return React.createElement('div', {\n      ref,\n      className: cn('px-2 py-1.5 text-sm font-semibold', className),\n      ...props,\n    })\n  },\n)\n"],
+  "mappings": "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",
+  "names": ["DropdownMenuTrigger", "DropdownMenuContent", "content", "DropdownMenuItem", "DropdownMenuSeparator", "DropdownMenuLabel"]
 }

package/dist/react-line-chart.js

@@ -16,11 +16,24 @@ var DEFAULT_LINE_CHART_WIDTH = 760;
 var DEFAULT_LINE_CHART_HEIGHT = 230;
 var DEFAULT_TICK_COUNT = 4;
 var DEFAULT_HEADROOM = 1.08;
-var DEFAULT_LABEL_EVERY = 2;
+var MIN_LABEL_SPACING = 48;
 var CHART_TOKEN_COUNT = 5;
 function lineChartColor(index) {
   return `hsl(var(--chart-${index % CHART_TOKEN_COUNT + 1}))`;
 }
+var NICE_STEPS = [1, 2, 5, 10];
+function niceScale(rawMax, tickCount) {
+  const intervals = Math.max(1, Math.floor(tickCount));
+  if (!(rawMax > 0)) return { max: 1, step: 1 / intervals, ticks: Array.from({ length: intervals + 1 }, (_, i) => i / intervals) };
+  const target = rawMax / intervals;
+  const magnitude = 10 ** Math.floor(Math.log10(target));
+  const step = NICE_STEPS.map((m) => m * magnitude).find((candidate) => candidate >= target) ?? 10 * magnitude;
+  const count = Math.ceil(rawMax / step - 1e-9);
+  const decimals = Math.max(0, -Math.floor(Math.log10(step)));
+  const clean = (value) => Number(value.toFixed(decimals));
+  const ticks = Array.from({ length: count + 1 }, (_, i) => clean(i * step));
+  return { max: ticks[ticks.length - 1], step: clean(step), ticks };
+}
 function pathFrom(points) {
   return points.map(([px, py], i) => (i ? "L" : "M") + px.toFixed(1) + " " + py.toFixed(1)).join(" ");
 }
@@ -31,24 +44,22 @@ function computeLineChart(options) {
     width,
     height,
     tickCount = DEFAULT_TICK_COUNT,
-    headroom = DEFAULT_HEADROOM,
-    labelEvery = DEFAULT_LABEL_EVERY
+    headroom = DEFAULT_HEADROOM
   } = options;
   const padding = { ...DEFAULT_LINE_CHART_PADDING, ...options.padding };
   const n = labels.length;
   const values = series.flatMap((s) => s.data);
   const peak = values.length ? Math.max(...values) : 0;
-  const max = peak > 0 ? peak * headroom : 1;
+  const scale = niceScale(peak > 0 ? peak * headroom : 0, tickCount);
+  const max = scale.max;
   const plotW = width - padding.left - padding.right;
   const plotTop = padding.top;
   const plotBottom = height - padding.bottom;
   const plotH = plotBottom - plotTop;
+  const labelEvery = options.labelEvery ?? Math.max(1, Math.ceil(n / Math.max(1, Math.floor(plotW / MIN_LABEL_SPACING))));
   const x = (index) => padding.left + (n > 1 ? index / (n - 1) * plotW : plotW / 2);
   const y = (value) => plotTop + (1 - value / max) * plotH;
-  const ticks = Array.from({ length: tickCount + 1 }, (_, t) => {
-    const value = max / tickCount * t;
-    return { value, y: y(value) };
-  });
+  const ticks = scale.ticks.map((value) => ({ value, y: y(value) }));
   const xLabels = labels.map((label, index) => ({ index, label, x: x(index) })).filter(({ index }) => index % labelEvery === 0 || index === n - 1);
   const paths = series.map((s, si) => {
     const points = s.data.map((v, i) => [x(i), y(v)]);
@@ -107,19 +118,46 @@ var defaultFormat = (value) => String(Math.round(value));
 var MARKER_RADIUS = 3.5;
 var STROKE_WIDTH = 2.2;
 var TOOLTIP_TOP_PX = 8;
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;
+function useMeasuredWidth(ref) {
+  const [measured, setMeasured] = React.useState(null);
+  useIsomorphicLayoutEffect(() => {
+    const node = ref.current;
+    if (!node || typeof ResizeObserver === "undefined") return;
+    const apply = (w) => {
+      const rounded = Math.round(w);
+      if (rounded > 0) setMeasured((prev) => prev === rounded ? prev : rounded);
+    };
+    apply(node.getBoundingClientRect().width);
+    const observer = new ResizeObserver((entries) => apply(entries[0]?.contentRect.width ?? 0));
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [ref]);
+  return measured;
+}
 var LineChart = React.forwardRef(function LineChart2({
   series,
   labels,
   ariaLabel,
   height = DEFAULT_LINE_CHART_HEIGHT,
-  width = DEFAULT_LINE_CHART_WIDTH,
+  width: fallbackWidth = DEFAULT_LINE_CHART_WIDTH,
   formatValue = defaultFormat,
   formatTick,
   area,
   showLegend = true,
   className,
   ...rest
-}, ref) {
+}, forwardedRef) {
+  const rootRef = React.useRef(null);
+  const ref = React.useCallback(
+    (node) => {
+      rootRef.current = node;
+      if (typeof forwardedRef === "function") forwardedRef(node);
+      else if (forwardedRef) forwardedRef.current = node;
+    },
+    [forwardedRef]
+  );
+  const width = useMeasuredWidth(rootRef) ?? fallbackWidth;
   const [active, setActive] = React.useState(null);
   const gradientBase = React.useId().replace(/:/g, "");
   const geo = React.useMemo(

package/dist/react-line-chart.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../line-chart/src/line-chart.ts", "../../line-chart/src/line-chart.styles.ts", "../../react-line-chart/src/line-chart.tsx"],
-  "sourcesContent": ["export interface LineChartSeries {\n  /** Stable key for the series. */\n  id: string\n  /** Legend / tooltip name. */\n  name: string\n  /**\n   * Any CSS colour (a token `hsl(var(--…))` or a data colour). Defaults to the\n   * theme's chart palette (`--chart-1` … `--chart-5`) by series position.\n   */\n  color?: string\n  /** One value per label, in label order. */\n  data: number[]\n}\n\nexport interface LineChartPadding {\n  top: number\n  right: number\n  bottom: number\n  left: number\n}\n\nexport interface LineChartOptions {\n  series: LineChartSeries[]\n  labels: string[]\n  /** viewBox width — the SVG scales to its container's width. */\n  width: number\n  /** viewBox height. */\n  height: number\n  padding?: Partial<LineChartPadding>\n  /** Number of gridline intervals on the y-axis. */\n  tickCount?: number\n  /** Headroom multiplier above the largest value. */\n  headroom?: number\n  /** Show every n-th x label (the last label is always shown). */\n  labelEvery?: number\n}\n\nexport interface LineChartTick {\n  value: number\n  y: number\n}\n\nexport interface LineChartXLabel {\n  index: number\n  label: string\n  x: number\n}\n\nexport interface LineChartPath {\n  id: string\n  /** Resolved stroke colour. */\n  color: string\n  /** The stroke path. */\n  line: string\n  /** The line closed down to the zero baseline, for an area fill. */\n  area: string\n}\n\nexport interface LineChartColumn {\n  index: number\n  x: number\n  width: number\n}\n\nexport interface LineChartGeometry {\n  width: number\n  height: number\n  padding: LineChartPadding\n  /** Top of the shared y-scale. */\n  max: number\n  ticks: LineChartTick[]\n  xLabels: LineChartXLabel[]\n  paths: LineChartPath[]\n  /** One hover/focus column per category. */\n  columns: LineChartColumn[]\n  x: (index: number) => number\n  y: (value: number) => number\n  /** Top and bottom of the plot area, for a crosshair. */\n  plotTop: number\n  plotBottom: number\n}\n\nexport const DEFAULT_LINE_CHART_PADDING: LineChartPadding = {\n  top: 14,\n  right: 14,\n  bottom: 24,\n  left: 40,\n}\n\nexport const DEFAULT_LINE_CHART_WIDTH = 760\nexport const DEFAULT_LINE_CHART_HEIGHT = 230\nconst DEFAULT_TICK_COUNT = 4\nconst DEFAULT_HEADROOM = 1.08\nconst DEFAULT_LABEL_EVERY = 2\n/** Number of `--chart-N` tokens the theme defines. */\nconst CHART_TOKEN_COUNT = 5\n\n/** The theme chart colour for the series at `index` (wraps around). */\nexport function lineChartColor(index: number): string {\n  return `hsl(var(--chart-${(index % CHART_TOKEN_COUNT) + 1}))`\n}\n\nfunction pathFrom(points: Array<[number, number]>): string {\n  return points.map(([px, py], i) => (i ? 'L' : 'M') + px.toFixed(1) + ' ' + py.toFixed(1)).join(' ')\n}\n\n/**\n * Pure geometry for a responsive multi-series line chart. Every series shares\n * ONE y-scale (zero baseline to the largest value plus headroom), so series are\n * comparable. Coordinates are in viewBox units; the SVG scales to its container.\n */\nexport function computeLineChart(options: LineChartOptions): LineChartGeometry {\n  const {\n    series,\n    labels,\n    width,\n    height,\n    tickCount = DEFAULT_TICK_COUNT,\n    headroom = DEFAULT_HEADROOM,\n    labelEvery = DEFAULT_LABEL_EVERY,\n  } = options\n  const padding = { ...DEFAULT_LINE_CHART_PADDING, ...options.padding }\n  const n = labels.length\n  const values = series.flatMap((s) => s.data)\n  const peak = values.length ? Math.max(...values) : 0\n  const max = peak > 0 ? peak * headroom : 1\n  const plotW = width - padding.left - padding.right\n  const plotTop = padding.top\n  const plotBottom = height - padding.bottom\n  const plotH = plotBottom - plotTop\n\n  const x = (index: number) => padding.left + (n > 1 ? (index / (n - 1)) * plotW : plotW / 2)\n  const y = (value: number) => plotTop + (1 - value / max) * plotH\n\n  const ticks: LineChartTick[] = Array.from({ length: tickCount + 1 }, (_, t) => {\n    const value = (max / tickCount) * t\n    return { value, y: y(value) }\n  })\n\n  const xLabels: LineChartXLabel[] = labels\n    .map((label, index) => ({ index, label, x: x(index) }))\n    .filter(({ index }) => index % labelEvery === 0 || index === n - 1)\n\n  const paths: LineChartPath[] = series.map((s, si) => {\n    const points = s.data.map((v, i): [number, number] => [x(i), y(v)])\n    const line = pathFrom(points)\n    const first = points.length ? points[0][0] : x(0)\n    const last = points.length ? points[points.length - 1][0] : x(0)\n    const base = y(0).toFixed(1)\n    const area = `${line} L ${last.toFixed(1)} ${base} L ${first.toFixed(1)} ${base} Z`\n    return { id: s.id, color: s.color ?? lineChartColor(si), line, area }\n  })\n\n  const colW = n > 1 ? plotW / (n - 1) : plotW\n  const columns: LineChartColumn[] = labels.map((_, index) => ({\n    index,\n    x: x(index) - colW / 2,\n    width: colW,\n  }))\n\n  return { width, height, padding, max, ticks, xLabels, paths, columns, x, y, plotTop, plotBottom }\n}\n\n/** Where a tooltip for `index` sits horizontally, as a percent of the chart width. */\nexport function tooltipLeftPercent(geometry: LineChartGeometry, index: number): number {\n  return (geometry.x(index) / geometry.width) * 100\n}\n\n/**\n * The category index a keyboard key moves to from `current` (null = nothing\n * active yet). Returns `current` unchanged for keys the chart doesn't handle.\n */\nexport function nextLineChartIndex(current: number | null, key: string, count: number): number | null {\n  if (count === 0) return null\n  const last = count - 1\n  switch (key) {\n    case 'ArrowRight':\n      return current == null ? 0 : Math.min(current + 1, last)\n    case 'ArrowLeft':\n      return current == null ? last : Math.max(current - 1, 0)\n    case 'Home':\n      return 0\n    case 'End':\n      return last\n    default:\n      return current\n  }\n}\n", "/** Token-class styles for LineChart; no colour literals. */\nexport const lineChartClasses = {\n  root: 'relative',\n  svg: 'block w-full rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',\n  gridline: 'stroke-border',\n  axis: 'fill-muted-foreground text-[9px]',\n  crosshair: 'stroke-border',\n  marker: 'stroke-card',\n  tooltip:\n    'pointer-events-none absolute z-10 -translate-x-1/2 whitespace-nowrap rounded-md bg-tertiary px-2.5 py-2 text-[11px] text-tertiary-foreground shadow-lg',\n  tooltipLabel: 'mb-1 opacity-60',\n  tooltipRow: 'flex justify-between gap-2',\n  legend: 'mt-2.5 flex flex-wrap gap-3.5',\n  legendItem: 'inline-flex items-center gap-1.5 text-[11px] text-muted-foreground',\n  legendSwatch: 'h-[3px] w-2.5 rounded-sm',\n} as const\n", "import * as React from 'react'\nimport {\n  computeLineChart,\n  lineChartClasses as c,\n  nextLineChartIndex,\n  tooltipLeftPercent,\n  DEFAULT_LINE_CHART_WIDTH,\n  DEFAULT_LINE_CHART_HEIGHT,\n  type LineChartSeries,\n} from '@refraction-ui/line-chart'\nimport { cn } from '@refraction-ui/shared'\n\nexport type { LineChartSeries }\n\nexport interface LineChartProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {\n  /** The series to plot, all on one shared y-scale. */\n  series: LineChartSeries[]\n  /** One category label per data point. */\n  labels: string[]\n  /** Accessible name of the chart image (required). */\n  ariaLabel: string\n  /** Rendered height in px (also the viewBox height). Defaults to 230. */\n  height?: number\n  /** viewBox width; the chart always stretches to its container. Defaults to 760. */\n  width?: number\n  /** Formats a value in the tooltip. */\n  formatValue?: (value: number) => string\n  /** Formats a y-axis tick. Defaults to `formatValue`. */\n  formatTick?: (value: number) => string\n  /** Fill the area under each line. Defaults to on for a single series only. */\n  area?: boolean\n  /** Show the series legend under the chart. Defaults to true. */\n  showLegend?: boolean\n}\n\nconst defaultFormat = (value: number) => String(Math.round(value))\nconst MARKER_RADIUS = 3.5\nconst STROKE_WIDTH = 2.2\nconst TOOLTIP_TOP_PX = 8\n\n/**\n * LineChart — a responsive multi-series line chart on one shared y-scale, with\n * gridlines, category x-labels, a hover/keyboard crosshair + tooltip and a\n * legend. The SVG uses a viewBox, so it stretches to its container's width.\n * Keyboard: focus the chart, then ←/→/Home/End move between categories.\n */\nexport const LineChart = React.forwardRef<HTMLDivElement, LineChartProps>(function LineChart(\n  {\n    series,\n    labels,\n    ariaLabel,\n    height = DEFAULT_LINE_CHART_HEIGHT,\n    width = DEFAULT_LINE_CHART_WIDTH,\n    formatValue = defaultFormat,\n    formatTick,\n    area,\n    showLegend = true,\n    className,\n    ...rest\n  },\n  ref,\n) {\n  const [active, setActive] = React.useState<number | null>(null)\n  const gradientBase = React.useId().replace(/:/g, '')\n  const geo = React.useMemo(\n    () => computeLineChart({ series, labels, width, height }),\n    [series, labels, width, height],\n  )\n  const fillArea = area ?? series.length === 1\n  const tick = formatTick ?? formatValue\n\n  const handleKeyDown = (event: React.KeyboardEvent<SVGSVGElement>) => {\n    const next = nextLineChartIndex(active, event.key, labels.length)\n    if (next === active) return\n    event.preventDefault()\n    setActive(next)\n  }\n\n  return (\n    <div ref={ref} className={cn(c.root, className)} data-slot=\"line-chart\" {...rest}>\n      <svg\n        className={c.svg}\n        viewBox={`0 0 ${width} ${height}`}\n        style={{ height }}\n        role=\"img\"\n        aria-label={ariaLabel}\n        tabIndex={0}\n        onKeyDown={handleKeyDown}\n        onBlur={() => setActive(null)}\n        onMouseLeave={() => setActive(null)}\n      >\n        {geo.ticks.map((t, i) => (\n          <g key={i}>\n            <line className={c.gridline} x1={geo.padding.left} y1={t.y} x2={width - geo.padding.right} y2={t.y} />\n            <text className={c.axis} x={geo.padding.left - 8} y={t.y + 3} textAnchor=\"end\">\n              {tick(t.value)}\n            </text>\n          </g>\n        ))}\n        {geo.xLabels.map((l) => (\n          <text key={l.index} className={c.axis} x={l.x} y={height - 6} textAnchor=\"middle\">\n            {l.label}\n          </text>\n        ))}\n        {geo.paths.map((p, si) => {\n          const gid = `${gradientBase}-${si}`\n          const value = active != null ? series[si].data[active] : undefined\n          return (\n            <g key={p.id}>\n              {fillArea && (\n                <>\n                  <defs>\n                    <linearGradient id={gid} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                      <stop offset=\"0%\" stopColor={p.color} stopOpacity=\"0.22\" />\n                      <stop offset=\"100%\" stopColor={p.color} stopOpacity=\"0\" />\n                    </linearGradient>\n                  </defs>\n                  <path d={p.area} fill={`url(#${gid})`} />\n                </>\n              )}\n              <path\n                d={p.line}\n                fill=\"none\"\n                stroke={p.color}\n                strokeWidth={STROKE_WIDTH}\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n              />\n              {active != null && value != null && (\n                <circle\n                  className={c.marker}\n                  cx={geo.x(active)}\n                  cy={geo.y(value)}\n                  r={MARKER_RADIUS}\n                  fill={p.color}\n                  strokeWidth=\"1.5\"\n                />\n              )}\n            </g>\n          )\n        })}\n        {active != null && (\n          <line\n            className={c.crosshair}\n            x1={geo.x(active)}\n            y1={geo.plotTop}\n            x2={geo.x(active)}\n            y2={geo.plotBottom}\n            strokeDasharray=\"3 3\"\n          />\n        )}\n        {geo.columns.map((col) => (\n          <rect\n            key={col.index}\n            data-index={col.index}\n            x={col.x}\n            y={0}\n            width={col.width}\n            height={height}\n            fill=\"transparent\"\n            onMouseEnter={() => setActive(col.index)}\n          />\n        ))}\n      </svg>\n      {active != null && (\n        <div\n          className={c.tooltip}\n          role=\"status\"\n          style={{ left: `${tooltipLeftPercent(geo, active)}%`, top: TOOLTIP_TOP_PX }}\n        >\n          <div className={c.tooltipLabel}>{labels[active]}</div>\n          {series.map((s, si) => (\n            <div key={s.id} className={c.tooltipRow}>\n              <span style={{ color: geo.paths[si].color }}>{s.name}</span>\n              <b>{s.data[active] != null ? formatValue(s.data[active]) : '—'}</b>\n            </div>\n          ))}\n        </div>\n      )}\n      {showLegend && (\n        <div className={c.legend}>\n          {series.map((s, si) => (\n            <span key={s.id} className={c.legendItem}>\n              <i className={c.legendSwatch} style={{ background: geo.paths[si].color }} aria-hidden=\"true\" />\n              {s.name}\n            </span>\n          ))}\n        </div>\n      )}\n    </div>\n  )\n})\n"],
-  "mappings": "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",
+  "sourcesContent": ["export interface LineChartSeries {\n  /** Stable key for the series. */\n  id: string\n  /** Legend / tooltip name. */\n  name: string\n  /**\n   * Any CSS colour (a token `hsl(var(--…))` or a data colour). Defaults to the\n   * theme's chart palette (`--chart-1` … `--chart-5`) by series position.\n   */\n  color?: string\n  /** One value per label, in label order. */\n  data: number[]\n}\n\nexport interface LineChartPadding {\n  top: number\n  right: number\n  bottom: number\n  left: number\n}\n\nexport interface LineChartOptions {\n  series: LineChartSeries[]\n  labels: string[]\n  /** viewBox width — the SVG scales to its container's width. */\n  width: number\n  /** viewBox height. */\n  height: number\n  padding?: Partial<LineChartPadding>\n  /** Target number of gridline intervals on the y-axis (the nice scale may use fewer). */\n  tickCount?: number\n  /** Headroom multiplier above the largest value. */\n  headroom?: number\n  /**\n   * Show every n-th x label (the last label is always shown). Defaults to\n   * thinning so labels are at least ~48 viewBox units apart.\n   */\n  labelEvery?: number\n}\n\nexport interface LineChartTick {\n  value: number\n  y: number\n}\n\nexport interface LineChartXLabel {\n  index: number\n  label: string\n  x: number\n}\n\nexport interface LineChartPath {\n  id: string\n  /** Resolved stroke colour. */\n  color: string\n  /** The stroke path. */\n  line: string\n  /** The line closed down to the zero baseline, for an area fill. */\n  area: string\n}\n\nexport interface LineChartColumn {\n  index: number\n  x: number\n  width: number\n}\n\nexport interface LineChartGeometry {\n  width: number\n  height: number\n  padding: LineChartPadding\n  /** Top of the shared y-scale. */\n  max: number\n  ticks: LineChartTick[]\n  xLabels: LineChartXLabel[]\n  paths: LineChartPath[]\n  /** One hover/focus column per category. */\n  columns: LineChartColumn[]\n  x: (index: number) => number\n  y: (value: number) => number\n  /** Top and bottom of the plot area, for a crosshair. */\n  plotTop: number\n  plotBottom: number\n}\n\nexport const DEFAULT_LINE_CHART_PADDING: LineChartPadding = {\n  top: 14,\n  right: 14,\n  bottom: 24,\n  left: 40,\n}\n\nexport const DEFAULT_LINE_CHART_WIDTH = 760\nexport const DEFAULT_LINE_CHART_HEIGHT = 230\nconst DEFAULT_TICK_COUNT = 4\nconst DEFAULT_HEADROOM = 1.08\n/** Minimum horizontal room per x label when thinning automatically. */\nconst MIN_LABEL_SPACING = 48\n/** Number of `--chart-N` tokens the theme defines. */\nconst CHART_TOKEN_COUNT = 5\n\n/** The theme chart colour for the series at `index` (wraps around). */\nexport function lineChartColor(index: number): string {\n  return `hsl(var(--chart-${(index % CHART_TOKEN_COUNT) + 1}))`\n}\n\nconst NICE_STEPS = [1, 2, 5, 10]\n\n/**\n * A \"nice\" y-scale: a 1-2-5 × 10^k step so there are at most `tickCount`\n * intervals up to `rawMax`, and the max rounded up to a whole step. Tick\n * values are therefore round numbers by construction (0, 2000, 4000, …) —\n * never 5999.9999 — so any tick formatter prints clean labels.\n */\nexport function niceScale(rawMax: number, tickCount: number): { max: number; step: number; ticks: number[] } {\n  const intervals = Math.max(1, Math.floor(tickCount))\n  if (!(rawMax > 0)) return { max: 1, step: 1 / intervals, ticks: Array.from({ length: intervals + 1 }, (_, i) => i / intervals) }\n  const target = rawMax / intervals\n  const magnitude = 10 ** Math.floor(Math.log10(target))\n  const step = NICE_STEPS.map((m) => m * magnitude).find((candidate) => candidate >= target) ?? 10 * magnitude\n  const count = Math.ceil(rawMax / step - 1e-9)\n  // Strip binary floating-point noise (e.g. 0.1 * 3) to the step's precision.\n  const decimals = Math.max(0, -Math.floor(Math.log10(step)))\n  const clean = (value: number) => Number(value.toFixed(decimals))\n  const ticks = Array.from({ length: count + 1 }, (_, i) => clean(i * step))\n  return { max: ticks[ticks.length - 1], step: clean(step), ticks }\n}\n\nfunction pathFrom(points: Array<[number, number]>): string {\n  return points.map(([px, py], i) => (i ? 'L' : 'M') + px.toFixed(1) + ' ' + py.toFixed(1)).join(' ')\n}\n\n/**\n * Pure geometry for a responsive multi-series line chart. Every series shares\n * ONE y-scale (zero baseline to the largest value plus headroom), so series are\n * comparable. Coordinates are in viewBox units; the SVG scales to its container.\n */\nexport function computeLineChart(options: LineChartOptions): LineChartGeometry {\n  const {\n    series,\n    labels,\n    width,\n    height,\n    tickCount = DEFAULT_TICK_COUNT,\n    headroom = DEFAULT_HEADROOM,\n  } = options\n  const padding = { ...DEFAULT_LINE_CHART_PADDING, ...options.padding }\n  const n = labels.length\n  const values = series.flatMap((s) => s.data)\n  const peak = values.length ? Math.max(...values) : 0\n  const scale = niceScale(peak > 0 ? peak * headroom : 0, tickCount)\n  const max = scale.max\n  const plotW = width - padding.left - padding.right\n  const plotTop = padding.top\n  const plotBottom = height - padding.bottom\n  const plotH = plotBottom - plotTop\n\n  const labelEvery =\n    options.labelEvery ??\n    Math.max(1, Math.ceil(n / Math.max(1, Math.floor(plotW / MIN_LABEL_SPACING))))\n\n  const x = (index: number) => padding.left + (n > 1 ? (index / (n - 1)) * plotW : plotW / 2)\n  const y = (value: number) => plotTop + (1 - value / max) * plotH\n\n  const ticks: LineChartTick[] = scale.ticks.map((value) => ({ value, y: y(value) }))\n\n  const xLabels: LineChartXLabel[] = labels\n    .map((label, index) => ({ index, label, x: x(index) }))\n    .filter(({ index }) => index % labelEvery === 0 || index === n - 1)\n\n  const paths: LineChartPath[] = series.map((s, si) => {\n    const points = s.data.map((v, i): [number, number] => [x(i), y(v)])\n    const line = pathFrom(points)\n    const first = points.length ? points[0][0] : x(0)\n    const last = points.length ? points[points.length - 1][0] : x(0)\n    const base = y(0).toFixed(1)\n    const area = `${line} L ${last.toFixed(1)} ${base} L ${first.toFixed(1)} ${base} Z`\n    return { id: s.id, color: s.color ?? lineChartColor(si), line, area }\n  })\n\n  const colW = n > 1 ? plotW / (n - 1) : plotW\n  const columns: LineChartColumn[] = labels.map((_, index) => ({\n    index,\n    x: x(index) - colW / 2,\n    width: colW,\n  }))\n\n  return { width, height, padding, max, ticks, xLabels, paths, columns, x, y, plotTop, plotBottom }\n}\n\n/** Where a tooltip for `index` sits horizontally, as a percent of the chart width. */\nexport function tooltipLeftPercent(geometry: LineChartGeometry, index: number): number {\n  return (geometry.x(index) / geometry.width) * 100\n}\n\n/**\n * The category index a keyboard key moves to from `current` (null = nothing\n * active yet). Returns `current` unchanged for keys the chart doesn't handle.\n */\nexport function nextLineChartIndex(current: number | null, key: string, count: number): number | null {\n  if (count === 0) return null\n  const last = count - 1\n  switch (key) {\n    case 'ArrowRight':\n      return current == null ? 0 : Math.min(current + 1, last)\n    case 'ArrowLeft':\n      return current == null ? last : Math.max(current - 1, 0)\n    case 'Home':\n      return 0\n    case 'End':\n      return last\n    default:\n      return current\n  }\n}\n", "/** Token-class styles for LineChart; no colour literals. */\nexport const lineChartClasses = {\n  root: 'relative',\n  svg: 'block w-full rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',\n  gridline: 'stroke-border',\n  axis: 'fill-muted-foreground text-[9px]',\n  crosshair: 'stroke-border',\n  marker: 'stroke-card',\n  tooltip:\n    'pointer-events-none absolute z-10 -translate-x-1/2 whitespace-nowrap rounded-md bg-tertiary px-2.5 py-2 text-[11px] text-tertiary-foreground shadow-lg',\n  tooltipLabel: 'mb-1 opacity-60',\n  tooltipRow: 'flex justify-between gap-2',\n  legend: 'mt-2.5 flex flex-wrap gap-3.5',\n  legendItem: 'inline-flex items-center gap-1.5 text-[11px] text-muted-foreground',\n  legendSwatch: 'h-[3px] w-2.5 rounded-sm',\n} as const\n", "import * as React from 'react'\nimport {\n  computeLineChart,\n  lineChartClasses as c,\n  nextLineChartIndex,\n  tooltipLeftPercent,\n  DEFAULT_LINE_CHART_WIDTH,\n  DEFAULT_LINE_CHART_HEIGHT,\n  type LineChartSeries,\n} from '@refraction-ui/line-chart'\nimport { cn } from '@refraction-ui/shared'\n\nexport type { LineChartSeries }\n\nexport interface LineChartProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {\n  /** The series to plot, all on one shared y-scale. */\n  series: LineChartSeries[]\n  /** One category label per data point. */\n  labels: string[]\n  /** Accessible name of the chart image (required). */\n  ariaLabel: string\n  /** Rendered height in px (also the viewBox height). Defaults to 230. */\n  height?: number\n  /**\n   * Fallback width, used for the server render and before the container is\n   * measured. On the client the chart measures its container and draws at that\n   * width, so text and strokes stay at their authored size. Defaults to 760.\n   */\n  width?: number\n  /** Formats a value in the tooltip. */\n  formatValue?: (value: number) => string\n  /** Formats a y-axis tick. Defaults to `formatValue`. */\n  formatTick?: (value: number) => string\n  /** Fill the area under each line. Defaults to on for a single series only. */\n  area?: boolean\n  /** Show the series legend under the chart. Defaults to true. */\n  showLegend?: boolean\n}\n\nconst defaultFormat = (value: number) => String(Math.round(value))\nconst MARKER_RADIUS = 3.5\nconst STROKE_WIDTH = 2.2\nconst TOOLTIP_TOP_PX = 8\n\nconst useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect\n\n/**\n * Width of `ref`'s element in CSS px, tracked with a ResizeObserver; `null`\n * until measured (server render, or no ResizeObserver).\n */\nfunction useMeasuredWidth(ref: React.RefObject<HTMLElement | null>): number | null {\n  const [measured, setMeasured] = React.useState<number | null>(null)\n  useIsomorphicLayoutEffect(() => {\n    const node = ref.current\n    if (!node || typeof ResizeObserver === 'undefined') return\n    const apply = (w: number) => {\n      const rounded = Math.round(w)\n      if (rounded > 0) setMeasured((prev) => (prev === rounded ? prev : rounded))\n    }\n    apply(node.getBoundingClientRect().width)\n    const observer = new ResizeObserver((entries) => apply(entries[0]?.contentRect.width ?? 0))\n    observer.observe(node)\n    return () => observer.disconnect()\n  }, [ref])\n  return measured\n}\n\n/**\n * LineChart — a responsive multi-series line chart on one shared y-scale, with\n * gridlines, category x-labels, a hover/keyboard crosshair + tooltip and a\n * legend. It measures its container and draws at that width (1:1 viewBox), so\n * axis text keeps its authored size in narrow panels.\n * Keyboard: focus the chart, then ←/→/Home/End move between categories.\n */\nexport const LineChart = React.forwardRef<HTMLDivElement, LineChartProps>(function LineChart(\n  {\n    series,\n    labels,\n    ariaLabel,\n    height = DEFAULT_LINE_CHART_HEIGHT,\n    width: fallbackWidth = DEFAULT_LINE_CHART_WIDTH,\n    formatValue = defaultFormat,\n    formatTick,\n    area,\n    showLegend = true,\n    className,\n    ...rest\n  },\n  forwardedRef,\n) {\n  const rootRef = React.useRef<HTMLDivElement | null>(null)\n  const ref = React.useCallback(\n    (node: HTMLDivElement | null) => {\n      rootRef.current = node\n      if (typeof forwardedRef === 'function') forwardedRef(node)\n      else if (forwardedRef) forwardedRef.current = node\n    },\n    [forwardedRef],\n  )\n  // Draw at the container's real width: a fixed viewBox stretched to a narrow\n  // panel would shrink the axis text and the chart height with it.\n  const width = useMeasuredWidth(rootRef) ?? fallbackWidth\n  const [active, setActive] = React.useState<number | null>(null)\n  const gradientBase = React.useId().replace(/:/g, '')\n  const geo = React.useMemo(\n    () => computeLineChart({ series, labels, width, height }),\n    [series, labels, width, height],\n  )\n  const fillArea = area ?? series.length === 1\n  const tick = formatTick ?? formatValue\n\n  const handleKeyDown = (event: React.KeyboardEvent<SVGSVGElement>) => {\n    const next = nextLineChartIndex(active, event.key, labels.length)\n    if (next === active) return\n    event.preventDefault()\n    setActive(next)\n  }\n\n  return (\n    <div ref={ref} className={cn(c.root, className)} data-slot=\"line-chart\" {...rest}>\n      <svg\n        className={c.svg}\n        viewBox={`0 0 ${width} ${height}`}\n        style={{ height }}\n        role=\"img\"\n        aria-label={ariaLabel}\n        tabIndex={0}\n        onKeyDown={handleKeyDown}\n        onBlur={() => setActive(null)}\n        onMouseLeave={() => setActive(null)}\n      >\n        {geo.ticks.map((t, i) => (\n          <g key={i}>\n            <line className={c.gridline} x1={geo.padding.left} y1={t.y} x2={width - geo.padding.right} y2={t.y} />\n            <text className={c.axis} x={geo.padding.left - 8} y={t.y + 3} textAnchor=\"end\">\n              {tick(t.value)}\n            </text>\n          </g>\n        ))}\n        {geo.xLabels.map((l) => (\n          <text key={l.index} className={c.axis} x={l.x} y={height - 6} textAnchor=\"middle\">\n            {l.label}\n          </text>\n        ))}\n        {geo.paths.map((p, si) => {\n          const gid = `${gradientBase}-${si}`\n          const value = active != null ? series[si].data[active] : undefined\n          return (\n            <g key={p.id}>\n              {fillArea && (\n                <>\n                  <defs>\n                    <linearGradient id={gid} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                      <stop offset=\"0%\" stopColor={p.color} stopOpacity=\"0.22\" />\n                      <stop offset=\"100%\" stopColor={p.color} stopOpacity=\"0\" />\n                    </linearGradient>\n                  </defs>\n                  <path d={p.area} fill={`url(#${gid})`} />\n                </>\n              )}\n              <path\n                d={p.line}\n                fill=\"none\"\n                stroke={p.color}\n                strokeWidth={STROKE_WIDTH}\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n              />\n              {active != null && value != null && (\n                <circle\n                  className={c.marker}\n                  cx={geo.x(active)}\n                  cy={geo.y(value)}\n                  r={MARKER_RADIUS}\n                  fill={p.color}\n                  strokeWidth=\"1.5\"\n                />\n              )}\n            </g>\n          )\n        })}\n        {active != null && (\n          <line\n            className={c.crosshair}\n            x1={geo.x(active)}\n            y1={geo.plotTop}\n            x2={geo.x(active)}\n            y2={geo.plotBottom}\n            strokeDasharray=\"3 3\"\n          />\n        )}\n        {geo.columns.map((col) => (\n          <rect\n            key={col.index}\n            data-index={col.index}\n            x={col.x}\n            y={0}\n            width={col.width}\n            height={height}\n            fill=\"transparent\"\n            onMouseEnter={() => setActive(col.index)}\n          />\n        ))}\n      </svg>\n      {active != null && (\n        <div\n          className={c.tooltip}\n          role=\"status\"\n          style={{ left: `${tooltipLeftPercent(geo, active)}%`, top: TOOLTIP_TOP_PX }}\n        >\n          <div className={c.tooltipLabel}>{labels[active]}</div>\n          {series.map((s, si) => (\n            <div key={s.id} className={c.tooltipRow}>\n              <span style={{ color: geo.paths[si].color }}>{s.name}</span>\n              <b>{s.data[active] != null ? formatValue(s.data[active]) : '—'}</b>\n            </div>\n          ))}\n        </div>\n      )}\n      {showLegend && (\n        <div className={c.legend}>\n          {series.map((s, si) => (\n            <span key={s.id} className={c.legendItem}>\n              <i className={c.legendSwatch} style={{ background: geo.paths[si].color }} aria-hidden=\"true\" />\n              {s.name}\n            </span>\n          ))}\n        </div>\n      )}\n    </div>\n  )\n})\n"],
+  "mappings": "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",
   "names": ["LineChart", "c"]
 }

package/dist/react-logger.js

@@ -1,6 +1,6 @@
 import {
   createFaroSink
-} from "./chunk-XWP763SH.js";
+} from "./chunk-V727VZOE.js";
 import {
   devWarn
 } from "./chunk-2Q6HHFAN.js";
@@ -159,7 +159,7 @@ function createTelemetry(config) {
   addSinkInternal(createConsoleSink({ pretty: preset.pretty }));
   if (config.endpoint) {
     const endpoint = config.endpoint;
-    void import("./chunk-SDZ3LROZ.js").then(({ createFaroSink: createFaroSink2 }) => createFaroSink2({ app: config.app, endpoint })).then((faro) => {
+    void import("./chunk-7P7EJ56S.js").then(({ createFaroSink: createFaroSink2 }) => createFaroSink2({ app: config.app, endpoint })).then((faro) => {
       if (faro) addSinkInternal(faro);
     }).catch(() => {
     });

package/dist/react-native-select.js

@@ -0,0 +1,52 @@
+import {
+  cn,
+  cva
+} from "./chunk-2Q6HHFAN.js";
+
+// ../react-native-select/dist/index.js
+import * as React from "react";
+
+// ../native-select/dist/index.js
+var nativeSelectChevronPath = "m6 9 6 6 6-6";
+var nativeSelectWrapperClass = "relative inline-flex min-w-0 items-center";
+var nativeSelectVariants = cva({
+  base: "w-full cursor-pointer appearance-none rounded-md border border-input bg-background text-foreground shadow-sm ring-offset-background focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+  variants: {
+    size: {
+      sm: "h-8 pl-2.5 pr-8 text-xs",
+      default: "h-9 pl-3 pr-9 text-sm",
+      lg: "h-10 pl-3 pr-10 text-base"
+    }
+  },
+  defaultVariants: {
+    size: "default"
+  }
+});
+var nativeSelectIconClass = "pointer-events-none absolute right-2.5 h-4 w-4 shrink-0 text-muted-foreground";
+
+// ../react-native-select/dist/index.js
+import { jsxs, jsx } from "react/jsx-runtime";
+var NativeSelect = React.forwardRef(function NativeSelect2({ size = "default", className, containerClassName, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxs("span", { className: cn(nativeSelectWrapperClass, containerClassName), "data-slot": "native-select", children: [
+    /* @__PURE__ */ jsx("select", { ref, className: cn(nativeSelectVariants({ size }), className), ...props, children }),
+    /* @__PURE__ */ jsx(
+      "svg",
+      {
+        className: nativeSelectIconClass,
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        "aria-hidden": "true",
+        children: /* @__PURE__ */ jsx("path", { d: nativeSelectChevronPath })
+      }
+    )
+  ] });
+});
+export {
+  NativeSelect
+};
+//# sourceMappingURL=react-native-select.js.map

package/dist/react-native-select.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../native-select/src/native-select.ts", "../../native-select/src/native-select.styles.ts", "../../react-native-select/src/native-select.tsx"],
+  "sourcesContent": ["/** Visual size of a NativeSelect. */\nexport type NativeSelectSize = 'sm' | 'default' | 'lg'\n\n/** The chevron's path (a down chevron), so adapters ship no icon dependency. */\nexport const nativeSelectChevronPath = 'm6 9 6 6 6-6'\n", "import { cva } from '@refraction-ui/shared'\n\n/** Wrapper that positions the chevron over the select. */\nexport const nativeSelectWrapperClass = 'relative inline-flex min-w-0 items-center'\n\n/**\n * The `<select>`: the platform's own listbox (mobile pickers, type-to-select,\n * form submission, `change` events) with the input look. Size-owned utilities\n * live only in the size variants so `size` always wins.\n */\nexport const nativeSelectVariants = cva({\n  base:\n    'w-full cursor-pointer appearance-none rounded-md border border-input bg-background text-foreground shadow-sm ' +\n    'ring-offset-background focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring ' +\n    'disabled:cursor-not-allowed disabled:opacity-50',\n  variants: {\n    size: {\n      sm: 'h-8 pl-2.5 pr-8 text-xs',\n      default: 'h-9 pl-3 pr-9 text-sm',\n      lg: 'h-10 pl-3 pr-10 text-base',\n    },\n  },\n  defaultVariants: {\n    size: 'default',\n  },\n})\n\n/** The chevron: decorative, and never eats the click meant for the select. */\nexport const nativeSelectIconClass =\n  'pointer-events-none absolute right-2.5 h-4 w-4 shrink-0 text-muted-foreground'\n", "import * as React from 'react'\nimport {\n  nativeSelectChevronPath,\n  nativeSelectIconClass,\n  nativeSelectVariants,\n  nativeSelectWrapperClass,\n  type NativeSelectSize,\n} from '@refraction-ui/native-select'\nimport { cn } from '@refraction-ui/shared'\n\nexport type { NativeSelectSize }\n\nexport interface NativeSelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'size'> {\n  /** Visual size; shadows the native `size` (visible rows), which a dropdown never wants. */\n  size?: NativeSelectSize\n  /** Classes for the positioning wrapper (width, margins); `className` styles the select. */\n  containerClassName?: string\n}\n\n/**\n * NativeSelect — a native `<select>` with the input look and a chevron.\n * Children are ordinary `<option>`/`<optgroup>` elements; every native\n * attribute and event passes through, and the ref is the select itself. Use it\n * for forms and filter bars; use `Select` for a custom listbox.\n */\nexport const NativeSelect = React.forwardRef<HTMLSelectElement, NativeSelectProps>(function NativeSelect(\n  { size = 'default', className, containerClassName, children, ...props },\n  ref,\n) {\n  return (\n    <span className={cn(nativeSelectWrapperClass, containerClassName)} data-slot=\"native-select\">\n      <select ref={ref} className={cn(nativeSelectVariants({ size }), className)} {...props}>\n        {children}\n      </select>\n      <svg\n        className={nativeSelectIconClass}\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path d={nativeSelectChevronPath} />\n      </svg>\n    </span>\n  )\n})\n"],
+  "mappings": ";;;;;;;;;AAIO,IAAM,0BAA0B;ACDhC,IAAM,2BAA2B;AAOjC,IAAM,uBAAuB,IAAI;EACtC,MACE;EAGF,UAAU;IACR,MAAM;MACJ,IAAI;MACJ,SAAS;MACT,IAAI;IAAA;EACN;EAEF,iBAAiB;IACf,MAAM;EAAA;AAEV,CAAC;AAGM,IAAM,wBACX;;;;ACJK,IAAM,eAAqB,iBAAiD,SAASA,cAC1F,EAAE,OAAO,WAAW,WAAW,oBAAoB,UAAU,GAAG,MAAA,GAChE,KACA;AACA,SACE,qBAAC,QAAA,EAAK,WAAW,GAAG,0BAA0B,kBAAkB,GAAG,aAAU,iBAC3E,UAAA;IAAA,oBAAC,UAAA,EAAO,KAAU,WAAW,GAAG,qBAAqB,EAAE,KAAA,CAAM,GAAG,SAAS,GAAI,GAAG,OAC7E,SAAA,CACH;IACA;MAAC;MAAA;QACC,WAAW;QACX,OAAM;QACN,SAAQ;QACR,MAAK;QACL,QAAO;QACP,aAAY;QACZ,eAAc;QACd,gBAAe;QACf,eAAY;QAEZ,UAAA,oBAAC,QAAA,EAAK,GAAG,wBAAA,CAAyB;MAAA;IAAA;EACpC,EAAA,CACF;AAEJ,CAAC;",
+  "names": ["NativeSelect"]
+}

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

@@ -1,6 +1,6 @@
 import {
   Button
-} from "./chunk-3Y2T26QD.js";
+} from "./chunk-Z5IHYNQD.js";
 import "./chunk-QDMLIDYN.js";
 import {
   cn,