@karakuri-ui/react 0.3.11 → 0.3.12

package/dist/components/ui/modal.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ui/modal.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport * as DialogPrimitive from '@radix-ui/react-dialog'\nimport * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// ─── Default Close Icon (built-in, no external dependency) ──\nconst DefaultCloseIcon = ({ className }: { className?: string }) => (\n  <svg\n    className={className}\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n    stroke=\"currentColor\"\n    strokeWidth={2}\n    aria-hidden=\"true\"\n  >\n    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\n  </svg>\n)\n\n// ─── Style Context ──────────────────────────────────────────\ntype ModalStyleContextValue = {\n  scrollBehavior: 'inside' | 'outside'\n}\nconst ModalStyleContext = React.createContext<ModalStyleContextValue>({\n  scrollBehavior: 'outside',\n})\n\n// ═══════════════════════════════════════════════════════════════\n// Modal (Dialog)\n// ═══════════════════════════════════════════════════════════════\n\n// ─── Modal (Root) — wrapper to keep our own component identity separate from DialogPrimitive.Root ──\nfunction Modal(props: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Root>) {\n  return <DialogPrimitive.Root {...props} />\n}\n\n// ─── ModalTrigger ───────────────────────────────────────────\nconst ModalTrigger = DialogPrimitive.Trigger\n\n// ─── ModalPortal ────────────────────────────────────────────\nconst ModalPortal = DialogPrimitive.Portal\n\n// ─── ModalClose ─────────────────────────────────────────────\nconst ModalClose = DialogPrimitive.Close\n\n// ─── ModalOverlay ───────────────────────────────────────────\nconst ModalOverlay = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Overlay\n    ref={ref}\n    className={cn(\n      'fixed inset-0 z-overlay bg-black/50',\n      'data-[state=open]:animate-modal-overlay-enter data-[state=closed]:animate-modal-overlay-exit',\n      className\n    )}\n    {...props}\n  />\n))\nModalOverlay.displayName = 'ModalOverlay'\n\n// ─── ModalContent ───────────────────────────────────────────\nconst modalContentVariants = cva('', {\n  variants: {\n    size: {\n      xs: 'max-w-[360px]',   // 360px — simple confirmation\n      sm: 'max-w-[480px]',   // 480px — standard (default)\n      md: 'max-w-[600px]',   // 600px — standard form\n      lg: 'max-w-[760px]',   // 760px — complex form\n      xl: 'max-w-[960px]',   // 960px — table, dashboard\n      full: 'max-w-none',    // full width (constrained by wrapper padding)\n    },\n  },\n  defaultVariants: {\n    size: 'sm',\n  },\n})\n\nexport interface ModalContentProps\n  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>,\n    VariantProps<typeof modalContentVariants> {\n  /** Scroll behavior when content overflows */\n  scrollBehavior?: 'inside' | 'outside'\n  /** Show built-in close button */\n  showCloseButton?: boolean\n  /** Custom close icon (replaces default X) */\n  closeIcon?: React.ReactNode\n}\n\nconst ModalContent = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Content>,\n  ModalContentProps\n>(({ className, children, size = 'sm', scrollBehavior = 'outside', showCloseButton = true, closeIcon, ...props }, ref) => {\n  const isInside = scrollBehavior === 'inside'\n  const isFull = size === 'full'\n  const useInsideScroll = isInside || isFull\n\n  const closeButton = showCloseButton && (\n    <DialogPrimitive.Close className={cn(\n      'absolute right-4 top-4 rounded-md p-1',\n      'text-text-muted hover:text-foreground',\n      'transition-colors duration-fast',\n      'focus-visible:focus-ring focus-visible:outline-none',\n      'disabled:pointer-events-none'\n    )}>\n      {closeIcon || <DefaultCloseIcon className=\"icon-sm\" />}\n      <span className=\"sr-only\">Close</span>\n    </DialogPrimitive.Close>\n  )\n\n  if (!useInsideScroll) {\n    // Outside scroll: DialogPrimitive.Content becomes the full-screen scrollable container.\n    // Radix's internal RemoveScroll detects its own root element as scrollable,\n    // allowing wheel/touch scroll events to pass through correctly.\n    return (\n      <ModalPortal>\n        <ModalOverlay />\n        <ModalStyleContext.Provider value={{ scrollBehavior: 'outside' }}>\n          <DialogPrimitive.Content\n            ref={ref}\n            className={cn(\n              'fixed inset-0 z-modal overflow-y-auto',\n              'focus:outline-none',\n              'data-[state=open]:animate-modal-content-enter data-[state=closed]:animate-modal-content-exit',\n            )}\n            {...props}\n          >\n            {/* Backdrop click area: closes dialog when clicking outside the panel */}\n            <DialogPrimitive.Close asChild>\n              <div className=\"flex min-h-full items-center justify-center p-4\">\n                <div\n                  className={cn(\n                    'relative w-full rounded-xl bg-background text-foreground shadow-xl overflow-hidden',\n                    modalContentVariants({ size }),\n                    className,\n                  )}\n                  onClick={(e) => e.stopPropagation()}\n                >\n                  {children}\n                  {closeButton}\n                </div>\n              </div>\n            </DialogPrimitive.Close>\n          </DialogPrimitive.Content>\n        </ModalStyleContext.Provider>\n      </ModalPortal>\n    )\n  }\n\n  // Inside scroll / full: DialogPrimitive.Content is the visual modal panel.\n  return (\n    <ModalPortal>\n      <ModalOverlay />\n      <ModalStyleContext.Provider value={{ scrollBehavior: 'inside' }}>\n        <div className=\"fixed inset-0 z-modal flex items-center justify-center p-4\">\n          <DialogPrimitive.Content\n            ref={ref}\n            className={cn(\n              'relative w-full rounded-xl bg-background text-foreground shadow-xl overflow-hidden',\n              'focus:outline-none',\n              'data-[state=open]:animate-modal-content-enter data-[state=closed]:animate-modal-content-exit',\n              modalContentVariants({ size }),\n              isInside && 'flex flex-col max-h-[85vh]',\n              isFull && 'flex flex-col h-full',\n              className,\n            )}\n            {...props}\n          >\n            {children}\n            {closeButton}\n          </DialogPrimitive.Content>\n        </div>\n      </ModalStyleContext.Provider>\n    </ModalPortal>\n  )\n})\nModalContent.displayName = 'ModalContent'\n\n// ─── ModalHeader ────────────────────────────────────────────\nconst ModalHeader = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn('flex flex-col gap-1.5 p-6 pb-0', className)}\n    {...props}\n  />\n))\nModalHeader.displayName = 'ModalHeader'\n\n// ─── ModalTitle ─────────────────────────────────────────────\nconst ModalTitle = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Title\n    ref={ref}\n    className={cn('text-lg font-semibold text-foreground', className)}\n    {...props}\n  />\n))\nModalTitle.displayName = 'ModalTitle'\n\n// ─── ModalDescription ───────────────────────────────────────\nconst ModalDescription = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Description\n    ref={ref}\n    className={cn('text-md text-text-muted', className)}\n    {...props}\n  />\n))\nModalDescription.displayName = 'ModalDescription'\n\n// ─── ModalBody ──────────────────────────────────────────────\nconst ModalBody = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n  const { scrollBehavior } = React.useContext(ModalStyleContext)\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        'p-6',\n        scrollBehavior === 'inside' && 'flex-1 overflow-y-auto',\n        className\n      )}\n      {...props}\n    />\n  )\n})\nModalBody.displayName = 'ModalBody'\n\n// ─── ModalFooter ────────────────────────────────────────────\nconst ModalFooter = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      'flex items-center justify-end gap-3 p-6 pt-0',\n      className\n    )}\n    {...props}\n  />\n))\nModalFooter.displayName = 'ModalFooter'\n\n// ═══════════════════════════════════════════════════════════════\n// AlertModal (AlertDialog)\n// ═══════════════════════════════════════════════════════════════\n\n// ─── AlertModal (Root) ──────────────────────────────────────\nconst AlertModal = AlertDialogPrimitive.Root\n\n// ─── AlertModalTrigger ──────────────────────────────────────\nconst AlertModalTrigger = AlertDialogPrimitive.Trigger\n\n// ─── AlertModalPortal ───────────────────────────────────────\nconst AlertModalPortal = AlertDialogPrimitive.Portal\n\n// ─── AlertModalOverlay ──────────────────────────────────────\nconst AlertModalOverlay = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n  <AlertDialogPrimitive.Overlay\n    ref={ref}\n    className={cn(\n      'fixed inset-0 z-overlay bg-black/50',\n      'data-[state=open]:animate-modal-overlay-enter data-[state=closed]:animate-modal-overlay-exit',\n      className\n    )}\n    {...props}\n  />\n))\nAlertModalOverlay.displayName = 'AlertModalOverlay'\n\n// ─── AlertModalContent ──────────────────────────────────────\nconst alertModalContentVariants = cva('', {\n  variants: {\n    size: {\n      xs: 'max-w-[360px]',  // 360px\n      sm: 'max-w-[480px]',  // 480px (default)\n    },\n  },\n  defaultVariants: {\n    size: 'sm',\n  },\n})\n\nexport interface AlertModalContentProps\n  extends React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>,\n    VariantProps<typeof alertModalContentVariants> {}\n\nconst AlertModalContent = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Content>,\n  AlertModalContentProps\n>(({ className, children, size = 'sm', ...props }, ref) => (\n  <AlertModalPortal>\n    <AlertModalOverlay />\n    <div className=\"fixed inset-0 z-modal flex items-center justify-center p-4\">\n      <AlertDialogPrimitive.Content\n        ref={ref}\n        className={cn(\n          'relative w-full rounded-xl bg-background text-foreground shadow-xl',\n          'focus:outline-none',\n          'data-[state=open]:animate-modal-content-enter data-[state=closed]:animate-modal-content-exit',\n          alertModalContentVariants({ size }),\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </AlertDialogPrimitive.Content>\n    </div>\n  </AlertModalPortal>\n))\nAlertModalContent.displayName = 'AlertModalContent'\n\n// ─── AlertModalHeader ───────────────────────────────────────\nconst AlertModalHeader = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn('flex flex-col gap-1.5 p-6 pb-0', className)}\n    {...props}\n  />\n))\nAlertModalHeader.displayName = 'AlertModalHeader'\n\n// ─── AlertModalTitle ────────────────────────────────────────\nconst AlertModalTitle = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <AlertDialogPrimitive.Title\n    ref={ref}\n    className={cn('text-lg font-semibold text-foreground', className)}\n    {...props}\n  />\n))\nAlertModalTitle.displayName = 'AlertModalTitle'\n\n// ─── AlertModalDescription ──────────────────────────────────\nconst AlertModalDescription = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <AlertDialogPrimitive.Description\n    ref={ref}\n    className={cn('text-md text-text-muted', className)}\n    {...props}\n  />\n))\nAlertModalDescription.displayName = 'AlertModalDescription'\n\n// ─── AlertModalBody ─────────────────────────────────────────\nconst AlertModalBody = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn('p-6', className)}\n    {...props}\n  />\n))\nAlertModalBody.displayName = 'AlertModalBody'\n\n// ─── AlertModalFooter ───────────────────────────────────────\nconst AlertModalFooter = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      'flex items-center justify-end gap-3 p-6 pt-0',\n      className\n    )}\n    {...props}\n  />\n))\nAlertModalFooter.displayName = 'AlertModalFooter'\n\n// ─── AlertModalAction ───────────────────────────────────────\nconst AlertModalAction = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Action>,\n  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>\n>(({ className, ...props }, ref) => (\n  <AlertDialogPrimitive.Action\n    ref={ref}\n    className={className}\n    {...props}\n  />\n))\nAlertModalAction.displayName = 'AlertModalAction'\n\n// ─── AlertModalCancel ───────────────────────────────────────\nconst AlertModalCancel = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,\n  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>\n>(({ className, ...props }, ref) => (\n  <AlertDialogPrimitive.Cancel\n    ref={ref}\n    className={className}\n    {...props}\n  />\n))\nAlertModalCancel.displayName = 'AlertModalCancel'\n\n// ─── Exports ────────────────────────────────────────────────\nexport {\n  Modal,\n  ModalTrigger,\n  ModalPortal,\n  ModalOverlay,\n  ModalContent,\n  ModalHeader,\n  ModalTitle,\n  ModalDescription,\n  ModalBody,\n  ModalFooter,\n  ModalClose,\n  modalContentVariants,\n  AlertModal,\n  AlertModalTrigger,\n  AlertModalPortal,\n  AlertModalOverlay,\n  AlertModalContent,\n  AlertModalHeader,\n  AlertModalTitle,\n  AlertModalDescription,\n  AlertModalBody,\n  AlertModalFooter,\n  AlertModalAction,\n  AlertModalCancel,\n  alertModalContentVariants,\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/components/ui/modal.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport * as DialogPrimitive from '@radix-ui/react-dialog'\nimport * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// ─── Default Close Icon (built-in, no external dependency) ──\nconst DefaultCloseIcon = ({ className }: { className?: string }) => (\n  <svg\n    className={className}\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n    stroke=\"currentColor\"\n    strokeWidth={2}\n    aria-hidden=\"true\"\n  >\n    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\n  </svg>\n)\n\n// ─── Style Context ──────────────────────────────────────────\ntype ModalStyleContextValue = {\n  scrollBehavior: 'inside' | 'outside'\n}\nconst ModalStyleContext = React.createContext<ModalStyleContextValue>({\n  scrollBehavior: 'outside',\n})\n\n// ═══════════════════════════════════════════════════════════════\n// Modal (Dialog)\n// ═══════════════════════════════════════════════════════════════\n\n// ─── Modal (Root) — wrapper to keep our own component identity separate from DialogPrimitive.Root ──\nfunction Modal(props: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Root>) {\n  return <DialogPrimitive.Root {...props} />\n}\n\n// ─── ModalTrigger ───────────────────────────────────────────\nconst ModalTrigger = DialogPrimitive.Trigger\n\n// ─── ModalPortal ────────────────────────────────────────────\nconst ModalPortal = DialogPrimitive.Portal\n\n// ─── ModalClose ─────────────────────────────────────────────\nconst ModalClose = DialogPrimitive.Close\n\n// ─── ModalOverlay ───────────────────────────────────────────\nconst ModalOverlay = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Overlay\n    ref={ref}\n    className={cn(\n      'fixed inset-0 z-overlay bg-black/50',\n      'data-[state=open]:animate-modal-overlay-enter data-[state=closed]:animate-modal-overlay-exit',\n      className\n    )}\n    {...props}\n  />\n))\nModalOverlay.displayName = 'ModalOverlay'\n\n// ─── ModalContent ───────────────────────────────────────────\nconst modalContentVariants = cva('', {\n  variants: {\n    size: {\n      xs: 'max-w-[360px]',   // 360px — simple confirmation\n      sm: 'max-w-[480px]',   // 480px — standard (default)\n      md: 'max-w-[600px]',   // 600px — standard form\n      lg: 'max-w-[760px]',   // 760px — complex form\n      xl: 'max-w-[960px]',   // 960px — table, dashboard\n      full: 'max-w-none',    // full width (constrained by wrapper padding)\n    },\n  },\n  defaultVariants: {\n    size: 'sm',\n  },\n})\n\nexport interface ModalContentProps\n  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>,\n    VariantProps<typeof modalContentVariants> {\n  /** Scroll behavior when content overflows */\n  scrollBehavior?: 'inside' | 'outside'\n  /** Show built-in close button */\n  showCloseButton?: boolean\n  /** Custom close icon (replaces default X) */\n  closeIcon?: React.ReactNode\n  /** Accessible label for the close button (screen readers) — localize per page */\n  closeLabel?: string\n}\n\nconst ModalContent = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Content>,\n  ModalContentProps\n>(({ className, children, size = 'sm', scrollBehavior = 'outside', showCloseButton = true, closeIcon, closeLabel = 'Close', ...props }, ref) => {\n  const isInside = scrollBehavior === 'inside'\n  const isFull = size === 'full'\n  const useInsideScroll = isInside || isFull\n\n  const closeButton = showCloseButton && (\n    <DialogPrimitive.Close className={cn(\n      'absolute right-4 top-4 rounded-md p-1',\n      'text-text-muted hover:text-foreground',\n      'transition-colors duration-fast',\n      'focus-visible:focus-ring focus-visible:outline-none',\n      'disabled:pointer-events-none'\n    )}>\n      {closeIcon || <DefaultCloseIcon className=\"icon-sm\" />}\n      <span className=\"sr-only\">{closeLabel}</span>\n    </DialogPrimitive.Close>\n  )\n\n  if (!useInsideScroll) {\n    // Outside scroll: DialogPrimitive.Content becomes the full-screen scrollable container.\n    // Radix's internal RemoveScroll detects its own root element as scrollable,\n    // allowing wheel/touch scroll events to pass through correctly.\n    return (\n      <ModalPortal>\n        <ModalOverlay />\n        <ModalStyleContext.Provider value={{ scrollBehavior: 'outside' }}>\n          <DialogPrimitive.Content\n            ref={ref}\n            className={cn(\n              'fixed inset-0 z-modal overflow-y-auto',\n              'focus:outline-none',\n              'data-[state=open]:animate-modal-content-enter data-[state=closed]:animate-modal-content-exit',\n            )}\n            {...props}\n          >\n            {/* Backdrop click area: closes dialog when clicking outside the panel */}\n            <DialogPrimitive.Close asChild>\n              <div className=\"flex min-h-full items-center justify-center p-4\">\n                <div\n                  className={cn(\n                    'relative w-full rounded-xl bg-background text-foreground shadow-xl overflow-hidden',\n                    modalContentVariants({ size }),\n                    className,\n                  )}\n                  onClick={(e) => e.stopPropagation()}\n                >\n                  {children}\n                  {closeButton}\n                </div>\n              </div>\n            </DialogPrimitive.Close>\n          </DialogPrimitive.Content>\n        </ModalStyleContext.Provider>\n      </ModalPortal>\n    )\n  }\n\n  // Inside scroll / full: DialogPrimitive.Content is the visual modal panel.\n  return (\n    <ModalPortal>\n      <ModalOverlay />\n      <ModalStyleContext.Provider value={{ scrollBehavior: 'inside' }}>\n        <div className=\"fixed inset-0 z-modal flex items-center justify-center p-4\">\n          <DialogPrimitive.Content\n            ref={ref}\n            className={cn(\n              'relative w-full rounded-xl bg-background text-foreground shadow-xl overflow-hidden',\n              'focus:outline-none',\n              'data-[state=open]:animate-modal-content-enter data-[state=closed]:animate-modal-content-exit',\n              modalContentVariants({ size }),\n              isInside && 'flex flex-col max-h-[85vh]',\n              isFull && 'flex flex-col h-full',\n              className,\n            )}\n            {...props}\n          >\n            {children}\n            {closeButton}\n          </DialogPrimitive.Content>\n        </div>\n      </ModalStyleContext.Provider>\n    </ModalPortal>\n  )\n})\nModalContent.displayName = 'ModalContent'\n\n// ─── ModalHeader ────────────────────────────────────────────\nconst ModalHeader = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn('flex flex-col gap-1.5 p-6 pb-0', className)}\n    {...props}\n  />\n))\nModalHeader.displayName = 'ModalHeader'\n\n// ─── ModalTitle ─────────────────────────────────────────────\nconst ModalTitle = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Title\n    ref={ref}\n    className={cn('text-lg font-semibold text-foreground', className)}\n    {...props}\n  />\n))\nModalTitle.displayName = 'ModalTitle'\n\n// ─── ModalDescription ───────────────────────────────────────\nconst ModalDescription = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Description\n    ref={ref}\n    className={cn('text-md text-text-muted', className)}\n    {...props}\n  />\n))\nModalDescription.displayName = 'ModalDescription'\n\n// ─── ModalBody ──────────────────────────────────────────────\nconst ModalBody = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n  const { scrollBehavior } = React.useContext(ModalStyleContext)\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        'p-6',\n        scrollBehavior === 'inside' && 'flex-1 overflow-y-auto',\n        className\n      )}\n      {...props}\n    />\n  )\n})\nModalBody.displayName = 'ModalBody'\n\n// ─── ModalFooter ────────────────────────────────────────────\nconst ModalFooter = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      'flex items-center justify-end gap-3 p-6 pt-0',\n      className\n    )}\n    {...props}\n  />\n))\nModalFooter.displayName = 'ModalFooter'\n\n// ═══════════════════════════════════════════════════════════════\n// AlertModal (AlertDialog)\n// ═══════════════════════════════════════════════════════════════\n\n// ─── AlertModal (Root) ──────────────────────────────────────\nconst AlertModal = AlertDialogPrimitive.Root\n\n// ─── AlertModalTrigger ──────────────────────────────────────\nconst AlertModalTrigger = AlertDialogPrimitive.Trigger\n\n// ─── AlertModalPortal ───────────────────────────────────────\nconst AlertModalPortal = AlertDialogPrimitive.Portal\n\n// ─── AlertModalOverlay ──────────────────────────────────────\nconst AlertModalOverlay = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n  <AlertDialogPrimitive.Overlay\n    ref={ref}\n    className={cn(\n      'fixed inset-0 z-overlay bg-black/50',\n      'data-[state=open]:animate-modal-overlay-enter data-[state=closed]:animate-modal-overlay-exit',\n      className\n    )}\n    {...props}\n  />\n))\nAlertModalOverlay.displayName = 'AlertModalOverlay'\n\n// ─── AlertModalContent ──────────────────────────────────────\nconst alertModalContentVariants = cva('', {\n  variants: {\n    size: {\n      xs: 'max-w-[360px]',  // 360px\n      sm: 'max-w-[480px]',  // 480px (default)\n    },\n  },\n  defaultVariants: {\n    size: 'sm',\n  },\n})\n\nexport interface AlertModalContentProps\n  extends React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>,\n    VariantProps<typeof alertModalContentVariants> {}\n\nconst AlertModalContent = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Content>,\n  AlertModalContentProps\n>(({ className, children, size = 'sm', ...props }, ref) => (\n  <AlertModalPortal>\n    <AlertModalOverlay />\n    <div className=\"fixed inset-0 z-modal flex items-center justify-center p-4\">\n      <AlertDialogPrimitive.Content\n        ref={ref}\n        className={cn(\n          'relative w-full rounded-xl bg-background text-foreground shadow-xl',\n          'focus:outline-none',\n          'data-[state=open]:animate-modal-content-enter data-[state=closed]:animate-modal-content-exit',\n          alertModalContentVariants({ size }),\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </AlertDialogPrimitive.Content>\n    </div>\n  </AlertModalPortal>\n))\nAlertModalContent.displayName = 'AlertModalContent'\n\n// ─── AlertModalHeader ───────────────────────────────────────\nconst AlertModalHeader = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn('flex flex-col gap-1.5 p-6 pb-0', className)}\n    {...props}\n  />\n))\nAlertModalHeader.displayName = 'AlertModalHeader'\n\n// ─── AlertModalTitle ────────────────────────────────────────\nconst AlertModalTitle = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <AlertDialogPrimitive.Title\n    ref={ref}\n    className={cn('text-lg font-semibold text-foreground', className)}\n    {...props}\n  />\n))\nAlertModalTitle.displayName = 'AlertModalTitle'\n\n// ─── AlertModalDescription ──────────────────────────────────\nconst AlertModalDescription = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <AlertDialogPrimitive.Description\n    ref={ref}\n    className={cn('text-md text-text-muted', className)}\n    {...props}\n  />\n))\nAlertModalDescription.displayName = 'AlertModalDescription'\n\n// ─── AlertModalBody ─────────────────────────────────────────\nconst AlertModalBody = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn('p-6', className)}\n    {...props}\n  />\n))\nAlertModalBody.displayName = 'AlertModalBody'\n\n// ─── AlertModalFooter ───────────────────────────────────────\nconst AlertModalFooter = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      'flex items-center justify-end gap-3 p-6 pt-0',\n      className\n    )}\n    {...props}\n  />\n))\nAlertModalFooter.displayName = 'AlertModalFooter'\n\n// ─── AlertModalAction ───────────────────────────────────────\nconst AlertModalAction = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Action>,\n  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>\n>(({ className, ...props }, ref) => (\n  <AlertDialogPrimitive.Action\n    ref={ref}\n    className={className}\n    {...props}\n  />\n))\nAlertModalAction.displayName = 'AlertModalAction'\n\n// ─── AlertModalCancel ───────────────────────────────────────\nconst AlertModalCancel = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,\n  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>\n>(({ className, ...props }, ref) => (\n  <AlertDialogPrimitive.Cancel\n    ref={ref}\n    className={className}\n    {...props}\n  />\n))\nAlertModalCancel.displayName = 'AlertModalCancel'\n\n// ─── Exports ────────────────────────────────────────────────\nexport {\n  Modal,\n  ModalTrigger,\n  ModalPortal,\n  ModalOverlay,\n  ModalContent,\n  ModalHeader,\n  ModalTitle,\n  ModalDescription,\n  ModalBody,\n  ModalFooter,\n  ModalClose,\n  modalContentVariants,\n  AlertModal,\n  AlertModalTrigger,\n  AlertModalPortal,\n  AlertModalOverlay,\n  AlertModalContent,\n  AlertModalHeader,\n  AlertModalTitle,\n  AlertModalDescription,\n  AlertModalBody,\n  AlertModalFooter,\n  AlertModalAction,\n  AlertModalCancel,\n  alertModalContentVariants,\n}\n"],"mappings":"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","names":[]}

package/dist/components/ui/popover.d.mts

@@ -6,7 +6,7 @@ import { VariantProps } from 'class-variance-authority';
 type PopoverSide = 'top' | 'right' | 'bottom' | 'left';
 declare const popoverContentVariants: (props?: ({
     variant?: "default" | "elevated" | null | undefined;
-    size?: "default" | "sm" | "lg" | null | undefined;
+    size?: "sm" | "default" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface PopoverProps extends React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Root> {
 }
@@ -22,6 +22,8 @@ interface PopoverContentProps extends React.ComponentPropsWithoutRef<typeof Popo
     showClose?: boolean;
     /** Custom close icon (replaces default X icon) */
     closeIcon?: React.ReactNode;
+    /** Accessible label for the close button (screen readers) — localize per page */
+    closeLabel?: string;
 }
 declare const PopoverContent: React.ForwardRefExoticComponent<PopoverContentProps & React.RefAttributes<HTMLDivElement>>;
 declare const PopoverArrow: React.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverArrowProps & React.RefAttributes<SVGSVGElement>, "ref"> & React.RefAttributes<SVGSVGElement>>;

package/dist/components/ui/popover.d.ts

@@ -6,7 +6,7 @@ import { VariantProps } from 'class-variance-authority';
 type PopoverSide = 'top' | 'right' | 'bottom' | 'left';
 declare const popoverContentVariants: (props?: ({
     variant?: "default" | "elevated" | null | undefined;
-    size?: "default" | "sm" | "lg" | null | undefined;
+    size?: "sm" | "default" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface PopoverProps extends React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Root> {
 }
@@ -22,6 +22,8 @@ interface PopoverContentProps extends React.ComponentPropsWithoutRef<typeof Popo
     showClose?: boolean;
     /** Custom close icon (replaces default X icon) */
     closeIcon?: React.ReactNode;
+    /** Accessible label for the close button (screen readers) — localize per page */
+    closeLabel?: string;
 }
 declare const PopoverContent: React.ForwardRefExoticComponent<PopoverContentProps & React.RefAttributes<HTMLDivElement>>;
 declare const PopoverArrow: React.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverArrowProps & React.RefAttributes<SVGSVGElement>, "ref"> & React.RefAttributes<SVGSVGElement>>;

package/dist/components/ui/popover.js

@@ -96,7 +96,7 @@ const PopoverTrigger = PopoverPrimitive.Trigger;
 const PopoverPortal = PopoverPrimitive.Portal;
 const PopoverAnchor = PopoverPrimitive.Anchor;
 const PopoverClose = PopoverPrimitive.Close;
-const PopoverContent = React.forwardRef(({ className, variant = "default", size, side = "bottom", sideOffset, showArrow = true, showClose = false, closeIcon, children, ...props }, ref) => {
+const PopoverContent = React.forwardRef(({ className, variant = "default", size, side = "bottom", sideOffset, showArrow = true, showClose = false, closeIcon, closeLabel = "Close", children, ...props }, ref) => {
   const resolvedSide = side;
   const resolvedOffset = sideOffset ?? (variant === "default" && showArrow ? 12 : 6);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopoverPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
@@ -116,7 +116,7 @@ const PopoverContent = React.forwardRef(({ className, variant = "default", size,
           PopoverPrimitive.Close,
           {
             className: "absolute top-3 right-3 rounded-md p-1 text-text-muted hover:text-foreground hover:bg-background-muted transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring",
-            "aria-label": "Close",
+            "aria-label": closeLabel,
             children: closeIcon || /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DefaultCloseIcon, { className: "icon-sm" })
           }
         ),

package/dist/components/ui/popover.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ui/popover.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport * as PopoverPrimitive from '@radix-ui/react-popover'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// ─── Default Close Icon (built-in, no external dependency) ──\nconst DefaultCloseIcon = ({ className }: { className?: string }) => (\n  <svg\n    className={className}\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n    stroke=\"currentColor\"\n    strokeWidth={2}\n    aria-hidden=\"true\"\n  >\n    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\n  </svg>\n)\n\n// ─── Types ──────────────────────────────────────────────────\nexport type PopoverSide = 'top' | 'right' | 'bottom' | 'left'\n\n// ─── Animation class mapping (static strings for Tailwind scanner) ──\nconst ANIMATION_CLASSES: Record<PopoverSide, string> = {\n  top:    'data-[state=open]:animate-popover-top-enter data-[state=closed]:animate-popover-top-exit',\n  bottom: 'data-[state=open]:animate-popover-bottom-enter data-[state=closed]:animate-popover-bottom-exit',\n  left:   'data-[state=open]:animate-popover-left-enter data-[state=closed]:animate-popover-left-exit',\n  right:  'data-[state=open]:animate-popover-right-enter data-[state=closed]:animate-popover-right-exit',\n}\n\n// ─── Content variants ────────────────────────────────────────\nconst popoverContentVariants = cva(\n  'relative z-popover flex flex-col font-normal select-none w-auto max-w-[calc(100vw-16px)] max-h-[var(--radix-popover-content-available-height)] outline-none',\n  {\n    variants: {\n      variant: {\n        default: 'bg-background-paper text-foreground border border-border shadow-lg',\n        elevated: 'bg-background-paper/95 text-foreground border border-border-subtle shadow-xl backdrop-blur-sm',\n      },\n      size: {\n        sm: 'text-sm p-3 rounded-lg',\n        default: 'text-sm p-4 rounded-xl',\n        lg: 'text-md p-5 rounded-xl',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  }\n)\n\n// ─── Arrow styles ──────────────────────────────────────────────\n// default: CSS rotated square with 2-side border (seamless connection)\n// elevated: Radix SVG arrow with drop-shadow (glassmorphism, subtle border)\nconst CSS_ARROW_CLASSES: Record<PopoverSide, string> = {\n  bottom: '-top-[5px] left-1/2 -translate-x-1/2 border-t border-l border-border',\n  top: '-bottom-[5px] left-1/2 -translate-x-1/2 border-b border-r border-border',\n  right: '-left-[5px] top-1/2 -translate-y-1/2 border-b border-l border-border',\n  left: '-right-[5px] top-1/2 -translate-y-1/2 border-t border-r border-border',\n}\n\nconst ARROW_ELEVATED = 'fill-background-paper drop-shadow-sm'\n\n// ═══════════════════════════════════════════════════════════════\n// Popover\n// ═══════════════════════════════════════════════════════════════\n\n// ─── Popover (Root) — wrapper to keep our own component identity separate from Radix primitive ──\nexport interface PopoverProps extends React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Root> {}\n\nfunction Popover(props: PopoverProps) {\n  return <PopoverPrimitive.Root {...props} />\n}\n\n// ─── PopoverTrigger ──────────────────────────────────────────\nconst PopoverTrigger = PopoverPrimitive.Trigger\n\n// ─── PopoverPortal ───────────────────────────────────────────\nconst PopoverPortal = PopoverPrimitive.Portal\n\n// ─── PopoverAnchor ───────────────────────────────────────────\nconst PopoverAnchor = PopoverPrimitive.Anchor\n\n// ─── PopoverClose ────────────────────────────────────────────\nconst PopoverClose = PopoverPrimitive.Close\n\n// ─── PopoverContent ──────────────────────────────────────────\nexport interface PopoverContentProps\n  extends React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>,\n    VariantProps<typeof popoverContentVariants> {\n  /** Show arrow pointing to trigger */\n  showArrow?: boolean\n  /** Show built-in close button */\n  showClose?: boolean\n  /** Custom close icon (replaces default X icon) */\n  closeIcon?: React.ReactNode\n}\n\nconst PopoverContent = React.forwardRef<\n  React.ElementRef<typeof PopoverPrimitive.Content>,\n  PopoverContentProps\n>(({ className, variant = 'default', size, side = 'bottom', sideOffset, showArrow = true, showClose = false, closeIcon, children, ...props }, ref) => {\n  const resolvedSide = side as PopoverSide\n  // CSS arrow (default) needs more gap since it doesn't occupy layout space\n  const resolvedOffset = sideOffset ?? (variant === 'default' && showArrow ? 12 : 6)\n\n  return (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Content\n        ref={ref}\n        side={side}\n        sideOffset={resolvedOffset}\n        className={cn(\n          popoverContentVariants({ variant, size }),\n          ANIMATION_CLASSES[resolvedSide],\n          className,\n        )}\n        {...props}\n      >\n        {showClose && (\n          <PopoverPrimitive.Close\n            className=\"absolute top-3 right-3 rounded-md p-1 text-text-muted hover:text-foreground hover:bg-background-muted transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring\"\n            aria-label=\"Close\"\n          >\n            {closeIcon || <DefaultCloseIcon className=\"icon-sm\" />}\n          </PopoverPrimitive.Close>\n        )}\n        {/* Scrolls when taller than the viewport space; lives inside Content so the arrow is not clipped.\n            -m-1 p-1 keeps children's focus rings inside the scroll area */}\n        <div className=\"min-h-0 overflow-y-auto -m-1 p-1\">\n          {children}\n        </div>\n        {showArrow && variant === 'default' && (\n          <div\n            className={cn(\n              'absolute w-2.5 h-2.5 rotate-45 bg-background-paper',\n              CSS_ARROW_CLASSES[resolvedSide],\n            )}\n          />\n        )}\n        {showArrow && variant === 'elevated' && (\n          <PopoverPrimitive.Arrow\n            className={ARROW_ELEVATED}\n            width={12}\n            height={6}\n          />\n        )}\n      </PopoverPrimitive.Content>\n    </PopoverPrimitive.Portal>\n  )\n})\nPopoverContent.displayName = 'PopoverContent'\n\n// ─── PopoverArrow (standalone, for manual placement outside Content) ──\nconst PopoverArrow = React.forwardRef<\n  React.ElementRef<typeof PopoverPrimitive.Arrow>,\n  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Arrow>\n>(({ className, ...props }, ref) => (\n  <PopoverPrimitive.Arrow\n    ref={ref}\n    className={cn('fill-background-paper', className)}\n    width={10}\n    height={5}\n    {...props}\n  />\n))\nPopoverArrow.displayName = 'PopoverArrow'\n\n// ─── Exports ────────────────────────────────────────────────\nexport {\n  Popover,\n  PopoverTrigger,\n  PopoverContent,\n  PopoverArrow,\n  PopoverClose,\n  PopoverAnchor,\n  PopoverPortal,\n  popoverContentVariants,\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBI;AAfJ,YAAuB;AACvB,uBAAkC;AAClC,sCAAuC;AACvC,mBAAmB;AAGnB,MAAM,mBAAmB,CAAC,EAAE,UAAU,MACpC;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,MAAK;AAAA,IACL,SAAQ;AAAA,IACR,QAAO;AAAA,IACP,aAAa;AAAA,IACb,eAAY;AAAA,IAEZ,sDAAC,UAAK,eAAc,SAAQ,gBAAe,SAAQ,GAAE,wBAAuB;AAAA;AAC9E;AAOF,MAAM,oBAAiD;AAAA,EACrD,KAAQ;AAAA,EACR,QAAQ;AAAA,EACR,MAAQ;AAAA,EACR,OAAQ;AACV;AAGA,MAAM,6BAAyB;AAAA,EAC7B;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,QACT,UAAU;AAAA,MACZ;AAAA,MACA,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,SAAS;AAAA,QACT,IAAI;AAAA,MACN;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,IACR;AAAA,EACF;AACF;AAKA,MAAM,oBAAiD;AAAA,EACrD,QAAQ;AAAA,EACR,KAAK;AAAA,EACL,OAAO;AAAA,EACP,MAAM;AACR;AAEA,MAAM,iBAAiB;AASvB,SAAS,QAAQ,OAAqB;AACpC,SAAO,4CAAC,iBAAiB,MAAjB,EAAuB,GAAG,OAAO;AAC3C;AAGA,MAAM,iBAAiB,iBAAiB;AAGxC,MAAM,gBAAgB,iBAAiB;AAGvC,MAAM,gBAAgB,iBAAiB;AAGvC,MAAM,eAAe,iBAAiB;AActC,MAAM,iBAAiB,MAAM,WAG3B,CAAC,EAAE,WAAW,UAAU,WAAW,MAAM,OAAO,UAAU,YAAY,YAAY,MAAM,YAAY,OAAO,WAAW,UAAU,GAAG,MAAM,GAAG,QAAQ;AACpJ,QAAM,eAAe;AAErB,QAAM,iBAAiB,eAAe,YAAY,aAAa,YAAY,KAAK;AAEhF,SACE,4CAAC,iBAAiB,QAAjB,EACC;AAAA,IAAC,iBAAiB;AAAA,IAAjB;AAAA,MACC;AAAA,MACA;AAAA,MACA,YAAY;AAAA,MACZ,eAAW;AAAA,QACT,uBAAuB,EAAE,SAAS,KAAK,CAAC;AAAA,QACxC,kBAAkB,YAAY;AAAA,QAC9B;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,qBACC;AAAA,UAAC,iBAAiB;AAAA,UAAjB;AAAA,YACC,WAAU;AAAA,YACV,cAAW;AAAA,YAEV,uBAAa,4CAAC,oBAAiB,WAAU,WAAU;AAAA;AAAA,QACtD;AAAA,QAIF,4CAAC,SAAI,WAAU,oCACZ,UACH;AAAA,QACC,aAAa,YAAY,aACxB;AAAA,UAAC;AAAA;AAAA,YACC,eAAW;AAAA,cACT;AAAA,cACA,kBAAkB,YAAY;AAAA,YAChC;AAAA;AAAA,QACF;AAAA,QAED,aAAa,YAAY,cACxB;AAAA,UAAC,iBAAiB;AAAA,UAAjB;AAAA,YACC,WAAW;AAAA,YACX,OAAO;AAAA,YACP,QAAQ;AAAA;AAAA,QACV;AAAA;AAAA;AAAA,EAEJ,GACF;AAEJ,CAAC;AACD,eAAe,cAAc;AAG7B,MAAM,eAAe,MAAM,WAGzB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC,iBAAiB;AAAA,EAAjB;AAAA,IACC;AAAA,IACA,eAAW,iBAAG,yBAAyB,SAAS;AAAA,IAChD,OAAO;AAAA,IACP,QAAQ;AAAA,IACP,GAAG;AAAA;AACN,CACD;AACD,aAAa,cAAc;","names":[]}
+{"version":3,"sources":["../../../src/components/ui/popover.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport * as PopoverPrimitive from '@radix-ui/react-popover'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// ─── Default Close Icon (built-in, no external dependency) ──\nconst DefaultCloseIcon = ({ className }: { className?: string }) => (\n  <svg\n    className={className}\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n    stroke=\"currentColor\"\n    strokeWidth={2}\n    aria-hidden=\"true\"\n  >\n    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\n  </svg>\n)\n\n// ─── Types ──────────────────────────────────────────────────\nexport type PopoverSide = 'top' | 'right' | 'bottom' | 'left'\n\n// ─── Animation class mapping (static strings for Tailwind scanner) ──\nconst ANIMATION_CLASSES: Record<PopoverSide, string> = {\n  top:    'data-[state=open]:animate-popover-top-enter data-[state=closed]:animate-popover-top-exit',\n  bottom: 'data-[state=open]:animate-popover-bottom-enter data-[state=closed]:animate-popover-bottom-exit',\n  left:   'data-[state=open]:animate-popover-left-enter data-[state=closed]:animate-popover-left-exit',\n  right:  'data-[state=open]:animate-popover-right-enter data-[state=closed]:animate-popover-right-exit',\n}\n\n// ─── Content variants ────────────────────────────────────────\nconst popoverContentVariants = cva(\n  'relative z-popover flex flex-col font-normal select-none w-auto max-w-[calc(100vw-16px)] max-h-[var(--radix-popover-content-available-height)] outline-none',\n  {\n    variants: {\n      variant: {\n        default: 'bg-background-paper text-foreground border border-border shadow-lg',\n        elevated: 'bg-background-paper/95 text-foreground border border-border-subtle shadow-xl backdrop-blur-sm',\n      },\n      size: {\n        sm: 'text-sm p-3 rounded-lg',\n        default: 'text-sm p-4 rounded-xl',\n        lg: 'text-md p-5 rounded-xl',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  }\n)\n\n// ─── Arrow styles ──────────────────────────────────────────────\n// default: CSS rotated square with 2-side border (seamless connection)\n// elevated: Radix SVG arrow with drop-shadow (glassmorphism, subtle border)\nconst CSS_ARROW_CLASSES: Record<PopoverSide, string> = {\n  bottom: '-top-[5px] left-1/2 -translate-x-1/2 border-t border-l border-border',\n  top: '-bottom-[5px] left-1/2 -translate-x-1/2 border-b border-r border-border',\n  right: '-left-[5px] top-1/2 -translate-y-1/2 border-b border-l border-border',\n  left: '-right-[5px] top-1/2 -translate-y-1/2 border-t border-r border-border',\n}\n\nconst ARROW_ELEVATED = 'fill-background-paper drop-shadow-sm'\n\n// ═══════════════════════════════════════════════════════════════\n// Popover\n// ═══════════════════════════════════════════════════════════════\n\n// ─── Popover (Root) — wrapper to keep our own component identity separate from Radix primitive ──\nexport interface PopoverProps extends React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Root> {}\n\nfunction Popover(props: PopoverProps) {\n  return <PopoverPrimitive.Root {...props} />\n}\n\n// ─── PopoverTrigger ──────────────────────────────────────────\nconst PopoverTrigger = PopoverPrimitive.Trigger\n\n// ─── PopoverPortal ───────────────────────────────────────────\nconst PopoverPortal = PopoverPrimitive.Portal\n\n// ─── PopoverAnchor ───────────────────────────────────────────\nconst PopoverAnchor = PopoverPrimitive.Anchor\n\n// ─── PopoverClose ────────────────────────────────────────────\nconst PopoverClose = PopoverPrimitive.Close\n\n// ─── PopoverContent ──────────────────────────────────────────\nexport interface PopoverContentProps\n  extends React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>,\n    VariantProps<typeof popoverContentVariants> {\n  /** Show arrow pointing to trigger */\n  showArrow?: boolean\n  /** Show built-in close button */\n  showClose?: boolean\n  /** Custom close icon (replaces default X icon) */\n  closeIcon?: React.ReactNode\n  /** Accessible label for the close button (screen readers) — localize per page */\n  closeLabel?: string\n}\n\nconst PopoverContent = React.forwardRef<\n  React.ElementRef<typeof PopoverPrimitive.Content>,\n  PopoverContentProps\n>(({ className, variant = 'default', size, side = 'bottom', sideOffset, showArrow = true, showClose = false, closeIcon, closeLabel = 'Close', children, ...props }, ref) => {\n  const resolvedSide = side as PopoverSide\n  // CSS arrow (default) needs more gap since it doesn't occupy layout space\n  const resolvedOffset = sideOffset ?? (variant === 'default' && showArrow ? 12 : 6)\n\n  return (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Content\n        ref={ref}\n        side={side}\n        sideOffset={resolvedOffset}\n        className={cn(\n          popoverContentVariants({ variant, size }),\n          ANIMATION_CLASSES[resolvedSide],\n          className,\n        )}\n        {...props}\n      >\n        {showClose && (\n          <PopoverPrimitive.Close\n            className=\"absolute top-3 right-3 rounded-md p-1 text-text-muted hover:text-foreground hover:bg-background-muted transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring\"\n            aria-label={closeLabel}\n          >\n            {closeIcon || <DefaultCloseIcon className=\"icon-sm\" />}\n          </PopoverPrimitive.Close>\n        )}\n        {/* Scrolls when taller than the viewport space; lives inside Content so the arrow is not clipped.\n            -m-1 p-1 keeps children's focus rings inside the scroll area */}\n        <div className=\"min-h-0 overflow-y-auto -m-1 p-1\">\n          {children}\n        </div>\n        {showArrow && variant === 'default' && (\n          <div\n            className={cn(\n              'absolute w-2.5 h-2.5 rotate-45 bg-background-paper',\n              CSS_ARROW_CLASSES[resolvedSide],\n            )}\n          />\n        )}\n        {showArrow && variant === 'elevated' && (\n          <PopoverPrimitive.Arrow\n            className={ARROW_ELEVATED}\n            width={12}\n            height={6}\n          />\n        )}\n      </PopoverPrimitive.Content>\n    </PopoverPrimitive.Portal>\n  )\n})\nPopoverContent.displayName = 'PopoverContent'\n\n// ─── PopoverArrow (standalone, for manual placement outside Content) ──\nconst PopoverArrow = React.forwardRef<\n  React.ElementRef<typeof PopoverPrimitive.Arrow>,\n  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Arrow>\n>(({ className, ...props }, ref) => (\n  <PopoverPrimitive.Arrow\n    ref={ref}\n    className={cn('fill-background-paper', className)}\n    width={10}\n    height={5}\n    {...props}\n  />\n))\nPopoverArrow.displayName = 'PopoverArrow'\n\n// ─── Exports ────────────────────────────────────────────────\nexport {\n  Popover,\n  PopoverTrigger,\n  PopoverContent,\n  PopoverArrow,\n  PopoverClose,\n  PopoverAnchor,\n  PopoverPortal,\n  popoverContentVariants,\n}\n"],"mappings":"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","names":[]}

package/dist/components/ui/popover.mjs

@@ -56,7 +56,7 @@ const PopoverTrigger = PopoverPrimitive.Trigger;
 const PopoverPortal = PopoverPrimitive.Portal;
 const PopoverAnchor = PopoverPrimitive.Anchor;
 const PopoverClose = PopoverPrimitive.Close;
-const PopoverContent = React.forwardRef(({ className, variant = "default", size, side = "bottom", sideOffset, showArrow = true, showClose = false, closeIcon, children, ...props }, ref) => {
+const PopoverContent = React.forwardRef(({ className, variant = "default", size, side = "bottom", sideOffset, showArrow = true, showClose = false, closeIcon, closeLabel = "Close", children, ...props }, ref) => {
   const resolvedSide = side;
   const resolvedOffset = sideOffset ?? (variant === "default" && showArrow ? 12 : 6);
   return /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
@@ -76,7 +76,7 @@ const PopoverContent = React.forwardRef(({ className, variant = "default", size,
           PopoverPrimitive.Close,
           {
             className: "absolute top-3 right-3 rounded-md p-1 text-text-muted hover:text-foreground hover:bg-background-muted transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring",
-            "aria-label": "Close",
+            "aria-label": closeLabel,
             children: closeIcon || /* @__PURE__ */ jsx(DefaultCloseIcon, { className: "icon-sm" })
           }
         ),

package/dist/components/ui/popover.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ui/popover.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport * as PopoverPrimitive from '@radix-ui/react-popover'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// ─── Default Close Icon (built-in, no external dependency) ──\nconst DefaultCloseIcon = ({ className }: { className?: string }) => (\n  <svg\n    className={className}\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n    stroke=\"currentColor\"\n    strokeWidth={2}\n    aria-hidden=\"true\"\n  >\n    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\n  </svg>\n)\n\n// ─── Types ──────────────────────────────────────────────────\nexport type PopoverSide = 'top' | 'right' | 'bottom' | 'left'\n\n// ─── Animation class mapping (static strings for Tailwind scanner) ──\nconst ANIMATION_CLASSES: Record<PopoverSide, string> = {\n  top:    'data-[state=open]:animate-popover-top-enter data-[state=closed]:animate-popover-top-exit',\n  bottom: 'data-[state=open]:animate-popover-bottom-enter data-[state=closed]:animate-popover-bottom-exit',\n  left:   'data-[state=open]:animate-popover-left-enter data-[state=closed]:animate-popover-left-exit',\n  right:  'data-[state=open]:animate-popover-right-enter data-[state=closed]:animate-popover-right-exit',\n}\n\n// ─── Content variants ────────────────────────────────────────\nconst popoverContentVariants = cva(\n  'relative z-popover flex flex-col font-normal select-none w-auto max-w-[calc(100vw-16px)] max-h-[var(--radix-popover-content-available-height)] outline-none',\n  {\n    variants: {\n      variant: {\n        default: 'bg-background-paper text-foreground border border-border shadow-lg',\n        elevated: 'bg-background-paper/95 text-foreground border border-border-subtle shadow-xl backdrop-blur-sm',\n      },\n      size: {\n        sm: 'text-sm p-3 rounded-lg',\n        default: 'text-sm p-4 rounded-xl',\n        lg: 'text-md p-5 rounded-xl',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  }\n)\n\n// ─── Arrow styles ──────────────────────────────────────────────\n// default: CSS rotated square with 2-side border (seamless connection)\n// elevated: Radix SVG arrow with drop-shadow (glassmorphism, subtle border)\nconst CSS_ARROW_CLASSES: Record<PopoverSide, string> = {\n  bottom: '-top-[5px] left-1/2 -translate-x-1/2 border-t border-l border-border',\n  top: '-bottom-[5px] left-1/2 -translate-x-1/2 border-b border-r border-border',\n  right: '-left-[5px] top-1/2 -translate-y-1/2 border-b border-l border-border',\n  left: '-right-[5px] top-1/2 -translate-y-1/2 border-t border-r border-border',\n}\n\nconst ARROW_ELEVATED = 'fill-background-paper drop-shadow-sm'\n\n// ═══════════════════════════════════════════════════════════════\n// Popover\n// ═══════════════════════════════════════════════════════════════\n\n// ─── Popover (Root) — wrapper to keep our own component identity separate from Radix primitive ──\nexport interface PopoverProps extends React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Root> {}\n\nfunction Popover(props: PopoverProps) {\n  return <PopoverPrimitive.Root {...props} />\n}\n\n// ─── PopoverTrigger ──────────────────────────────────────────\nconst PopoverTrigger = PopoverPrimitive.Trigger\n\n// ─── PopoverPortal ───────────────────────────────────────────\nconst PopoverPortal = PopoverPrimitive.Portal\n\n// ─── PopoverAnchor ───────────────────────────────────────────\nconst PopoverAnchor = PopoverPrimitive.Anchor\n\n// ─── PopoverClose ────────────────────────────────────────────\nconst PopoverClose = PopoverPrimitive.Close\n\n// ─── PopoverContent ──────────────────────────────────────────\nexport interface PopoverContentProps\n  extends React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>,\n    VariantProps<typeof popoverContentVariants> {\n  /** Show arrow pointing to trigger */\n  showArrow?: boolean\n  /** Show built-in close button */\n  showClose?: boolean\n  /** Custom close icon (replaces default X icon) */\n  closeIcon?: React.ReactNode\n}\n\nconst PopoverContent = React.forwardRef<\n  React.ElementRef<typeof PopoverPrimitive.Content>,\n  PopoverContentProps\n>(({ className, variant = 'default', size, side = 'bottom', sideOffset, showArrow = true, showClose = false, closeIcon, children, ...props }, ref) => {\n  const resolvedSide = side as PopoverSide\n  // CSS arrow (default) needs more gap since it doesn't occupy layout space\n  const resolvedOffset = sideOffset ?? (variant === 'default' && showArrow ? 12 : 6)\n\n  return (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Content\n        ref={ref}\n        side={side}\n        sideOffset={resolvedOffset}\n        className={cn(\n          popoverContentVariants({ variant, size }),\n          ANIMATION_CLASSES[resolvedSide],\n          className,\n        )}\n        {...props}\n      >\n        {showClose && (\n          <PopoverPrimitive.Close\n            className=\"absolute top-3 right-3 rounded-md p-1 text-text-muted hover:text-foreground hover:bg-background-muted transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring\"\n            aria-label=\"Close\"\n          >\n            {closeIcon || <DefaultCloseIcon className=\"icon-sm\" />}\n          </PopoverPrimitive.Close>\n        )}\n        {/* Scrolls when taller than the viewport space; lives inside Content so the arrow is not clipped.\n            -m-1 p-1 keeps children's focus rings inside the scroll area */}\n        <div className=\"min-h-0 overflow-y-auto -m-1 p-1\">\n          {children}\n        </div>\n        {showArrow && variant === 'default' && (\n          <div\n            className={cn(\n              'absolute w-2.5 h-2.5 rotate-45 bg-background-paper',\n              CSS_ARROW_CLASSES[resolvedSide],\n            )}\n          />\n        )}\n        {showArrow && variant === 'elevated' && (\n          <PopoverPrimitive.Arrow\n            className={ARROW_ELEVATED}\n            width={12}\n            height={6}\n          />\n        )}\n      </PopoverPrimitive.Content>\n    </PopoverPrimitive.Portal>\n  )\n})\nPopoverContent.displayName = 'PopoverContent'\n\n// ─── PopoverArrow (standalone, for manual placement outside Content) ──\nconst PopoverArrow = React.forwardRef<\n  React.ElementRef<typeof PopoverPrimitive.Arrow>,\n  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Arrow>\n>(({ className, ...props }, ref) => (\n  <PopoverPrimitive.Arrow\n    ref={ref}\n    className={cn('fill-background-paper', className)}\n    width={10}\n    height={5}\n    {...props}\n  />\n))\nPopoverArrow.displayName = 'PopoverArrow'\n\n// ─── Exports ────────────────────────────────────────────────\nexport {\n  Popover,\n  PopoverTrigger,\n  PopoverContent,\n  PopoverArrow,\n  PopoverClose,\n  PopoverAnchor,\n  PopoverPortal,\n  popoverContentVariants,\n}\n"],"mappings":";AAiBI,cA8FE,YA9FF;AAfJ,YAAY,WAAW;AACvB,YAAY,sBAAsB;AAClC,SAAS,WAA8B;AACvC,SAAS,UAAU;AAGnB,MAAM,mBAAmB,CAAC,EAAE,UAAU,MACpC;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,MAAK;AAAA,IACL,SAAQ;AAAA,IACR,QAAO;AAAA,IACP,aAAa;AAAA,IACb,eAAY;AAAA,IAEZ,8BAAC,UAAK,eAAc,SAAQ,gBAAe,SAAQ,GAAE,wBAAuB;AAAA;AAC9E;AAOF,MAAM,oBAAiD;AAAA,EACrD,KAAQ;AAAA,EACR,QAAQ;AAAA,EACR,MAAQ;AAAA,EACR,OAAQ;AACV;AAGA,MAAM,yBAAyB;AAAA,EAC7B;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,QACT,UAAU;AAAA,MACZ;AAAA,MACA,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,SAAS;AAAA,QACT,IAAI;AAAA,MACN;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,IACR;AAAA,EACF;AACF;AAKA,MAAM,oBAAiD;AAAA,EACrD,QAAQ;AAAA,EACR,KAAK;AAAA,EACL,OAAO;AAAA,EACP,MAAM;AACR;AAEA,MAAM,iBAAiB;AASvB,SAAS,QAAQ,OAAqB;AACpC,SAAO,oBAAC,iBAAiB,MAAjB,EAAuB,GAAG,OAAO;AAC3C;AAGA,MAAM,iBAAiB,iBAAiB;AAGxC,MAAM,gBAAgB,iBAAiB;AAGvC,MAAM,gBAAgB,iBAAiB;AAGvC,MAAM,eAAe,iBAAiB;AActC,MAAM,iBAAiB,MAAM,WAG3B,CAAC,EAAE,WAAW,UAAU,WAAW,MAAM,OAAO,UAAU,YAAY,YAAY,MAAM,YAAY,OAAO,WAAW,UAAU,GAAG,MAAM,GAAG,QAAQ;AACpJ,QAAM,eAAe;AAErB,QAAM,iBAAiB,eAAe,YAAY,aAAa,YAAY,KAAK;AAEhF,SACE,oBAAC,iBAAiB,QAAjB,EACC;AAAA,IAAC,iBAAiB;AAAA,IAAjB;AAAA,MACC;AAAA,MACA;AAAA,MACA,YAAY;AAAA,MACZ,WAAW;AAAA,QACT,uBAAuB,EAAE,SAAS,KAAK,CAAC;AAAA,QACxC,kBAAkB,YAAY;AAAA,QAC9B;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,qBACC;AAAA,UAAC,iBAAiB;AAAA,UAAjB;AAAA,YACC,WAAU;AAAA,YACV,cAAW;AAAA,YAEV,uBAAa,oBAAC,oBAAiB,WAAU,WAAU;AAAA;AAAA,QACtD;AAAA,QAIF,oBAAC,SAAI,WAAU,oCACZ,UACH;AAAA,QACC,aAAa,YAAY,aACxB;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA,kBAAkB,YAAY;AAAA,YAChC;AAAA;AAAA,QACF;AAAA,QAED,aAAa,YAAY,cACxB;AAAA,UAAC,iBAAiB;AAAA,UAAjB;AAAA,YACC,WAAW;AAAA,YACX,OAAO;AAAA,YACP,QAAQ;AAAA;AAAA,QACV;AAAA;AAAA;AAAA,EAEJ,GACF;AAEJ,CAAC;AACD,eAAe,cAAc;AAG7B,MAAM,eAAe,MAAM,WAGzB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC,iBAAiB;AAAA,EAAjB;AAAA,IACC;AAAA,IACA,WAAW,GAAG,yBAAyB,SAAS;AAAA,IAChD,OAAO;AAAA,IACP,QAAQ;AAAA,IACP,GAAG;AAAA;AACN,CACD;AACD,aAAa,cAAc;","names":[]}
+{"version":3,"sources":["../../../src/components/ui/popover.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport * as PopoverPrimitive from '@radix-ui/react-popover'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// ─── Default Close Icon (built-in, no external dependency) ──\nconst DefaultCloseIcon = ({ className }: { className?: string }) => (\n  <svg\n    className={className}\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n    stroke=\"currentColor\"\n    strokeWidth={2}\n    aria-hidden=\"true\"\n  >\n    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\n  </svg>\n)\n\n// ─── Types ──────────────────────────────────────────────────\nexport type PopoverSide = 'top' | 'right' | 'bottom' | 'left'\n\n// ─── Animation class mapping (static strings for Tailwind scanner) ──\nconst ANIMATION_CLASSES: Record<PopoverSide, string> = {\n  top:    'data-[state=open]:animate-popover-top-enter data-[state=closed]:animate-popover-top-exit',\n  bottom: 'data-[state=open]:animate-popover-bottom-enter data-[state=closed]:animate-popover-bottom-exit',\n  left:   'data-[state=open]:animate-popover-left-enter data-[state=closed]:animate-popover-left-exit',\n  right:  'data-[state=open]:animate-popover-right-enter data-[state=closed]:animate-popover-right-exit',\n}\n\n// ─── Content variants ────────────────────────────────────────\nconst popoverContentVariants = cva(\n  'relative z-popover flex flex-col font-normal select-none w-auto max-w-[calc(100vw-16px)] max-h-[var(--radix-popover-content-available-height)] outline-none',\n  {\n    variants: {\n      variant: {\n        default: 'bg-background-paper text-foreground border border-border shadow-lg',\n        elevated: 'bg-background-paper/95 text-foreground border border-border-subtle shadow-xl backdrop-blur-sm',\n      },\n      size: {\n        sm: 'text-sm p-3 rounded-lg',\n        default: 'text-sm p-4 rounded-xl',\n        lg: 'text-md p-5 rounded-xl',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  }\n)\n\n// ─── Arrow styles ──────────────────────────────────────────────\n// default: CSS rotated square with 2-side border (seamless connection)\n// elevated: Radix SVG arrow with drop-shadow (glassmorphism, subtle border)\nconst CSS_ARROW_CLASSES: Record<PopoverSide, string> = {\n  bottom: '-top-[5px] left-1/2 -translate-x-1/2 border-t border-l border-border',\n  top: '-bottom-[5px] left-1/2 -translate-x-1/2 border-b border-r border-border',\n  right: '-left-[5px] top-1/2 -translate-y-1/2 border-b border-l border-border',\n  left: '-right-[5px] top-1/2 -translate-y-1/2 border-t border-r border-border',\n}\n\nconst ARROW_ELEVATED = 'fill-background-paper drop-shadow-sm'\n\n// ═══════════════════════════════════════════════════════════════\n// Popover\n// ═══════════════════════════════════════════════════════════════\n\n// ─── Popover (Root) — wrapper to keep our own component identity separate from Radix primitive ──\nexport interface PopoverProps extends React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Root> {}\n\nfunction Popover(props: PopoverProps) {\n  return <PopoverPrimitive.Root {...props} />\n}\n\n// ─── PopoverTrigger ──────────────────────────────────────────\nconst PopoverTrigger = PopoverPrimitive.Trigger\n\n// ─── PopoverPortal ───────────────────────────────────────────\nconst PopoverPortal = PopoverPrimitive.Portal\n\n// ─── PopoverAnchor ───────────────────────────────────────────\nconst PopoverAnchor = PopoverPrimitive.Anchor\n\n// ─── PopoverClose ────────────────────────────────────────────\nconst PopoverClose = PopoverPrimitive.Close\n\n// ─── PopoverContent ──────────────────────────────────────────\nexport interface PopoverContentProps\n  extends React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>,\n    VariantProps<typeof popoverContentVariants> {\n  /** Show arrow pointing to trigger */\n  showArrow?: boolean\n  /** Show built-in close button */\n  showClose?: boolean\n  /** Custom close icon (replaces default X icon) */\n  closeIcon?: React.ReactNode\n  /** Accessible label for the close button (screen readers) — localize per page */\n  closeLabel?: string\n}\n\nconst PopoverContent = React.forwardRef<\n  React.ElementRef<typeof PopoverPrimitive.Content>,\n  PopoverContentProps\n>(({ className, variant = 'default', size, side = 'bottom', sideOffset, showArrow = true, showClose = false, closeIcon, closeLabel = 'Close', children, ...props }, ref) => {\n  const resolvedSide = side as PopoverSide\n  // CSS arrow (default) needs more gap since it doesn't occupy layout space\n  const resolvedOffset = sideOffset ?? (variant === 'default' && showArrow ? 12 : 6)\n\n  return (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Content\n        ref={ref}\n        side={side}\n        sideOffset={resolvedOffset}\n        className={cn(\n          popoverContentVariants({ variant, size }),\n          ANIMATION_CLASSES[resolvedSide],\n          className,\n        )}\n        {...props}\n      >\n        {showClose && (\n          <PopoverPrimitive.Close\n            className=\"absolute top-3 right-3 rounded-md p-1 text-text-muted hover:text-foreground hover:bg-background-muted transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring\"\n            aria-label={closeLabel}\n          >\n            {closeIcon || <DefaultCloseIcon className=\"icon-sm\" />}\n          </PopoverPrimitive.Close>\n        )}\n        {/* Scrolls when taller than the viewport space; lives inside Content so the arrow is not clipped.\n            -m-1 p-1 keeps children's focus rings inside the scroll area */}\n        <div className=\"min-h-0 overflow-y-auto -m-1 p-1\">\n          {children}\n        </div>\n        {showArrow && variant === 'default' && (\n          <div\n            className={cn(\n              'absolute w-2.5 h-2.5 rotate-45 bg-background-paper',\n              CSS_ARROW_CLASSES[resolvedSide],\n            )}\n          />\n        )}\n        {showArrow && variant === 'elevated' && (\n          <PopoverPrimitive.Arrow\n            className={ARROW_ELEVATED}\n            width={12}\n            height={6}\n          />\n        )}\n      </PopoverPrimitive.Content>\n    </PopoverPrimitive.Portal>\n  )\n})\nPopoverContent.displayName = 'PopoverContent'\n\n// ─── PopoverArrow (standalone, for manual placement outside Content) ──\nconst PopoverArrow = React.forwardRef<\n  React.ElementRef<typeof PopoverPrimitive.Arrow>,\n  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Arrow>\n>(({ className, ...props }, ref) => (\n  <PopoverPrimitive.Arrow\n    ref={ref}\n    className={cn('fill-background-paper', className)}\n    width={10}\n    height={5}\n    {...props}\n  />\n))\nPopoverArrow.displayName = 'PopoverArrow'\n\n// ─── Exports ────────────────────────────────────────────────\nexport {\n  Popover,\n  PopoverTrigger,\n  PopoverContent,\n  PopoverArrow,\n  PopoverClose,\n  PopoverAnchor,\n  PopoverPortal,\n  popoverContentVariants,\n}\n"],"mappings":";AAiBI,cAgGE,YAhGF;AAfJ,YAAY,WAAW;AACvB,YAAY,sBAAsB;AAClC,SAAS,WAA8B;AACvC,SAAS,UAAU;AAGnB,MAAM,mBAAmB,CAAC,EAAE,UAAU,MACpC;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,MAAK;AAAA,IACL,SAAQ;AAAA,IACR,QAAO;AAAA,IACP,aAAa;AAAA,IACb,eAAY;AAAA,IAEZ,8BAAC,UAAK,eAAc,SAAQ,gBAAe,SAAQ,GAAE,wBAAuB;AAAA;AAC9E;AAOF,MAAM,oBAAiD;AAAA,EACrD,KAAQ;AAAA,EACR,QAAQ;AAAA,EACR,MAAQ;AAAA,EACR,OAAQ;AACV;AAGA,MAAM,yBAAyB;AAAA,EAC7B;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,QACT,UAAU;AAAA,MACZ;AAAA,MACA,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,SAAS;AAAA,QACT,IAAI;AAAA,MACN;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,IACR;AAAA,EACF;AACF;AAKA,MAAM,oBAAiD;AAAA,EACrD,QAAQ;AAAA,EACR,KAAK;AAAA,EACL,OAAO;AAAA,EACP,MAAM;AACR;AAEA,MAAM,iBAAiB;AASvB,SAAS,QAAQ,OAAqB;AACpC,SAAO,oBAAC,iBAAiB,MAAjB,EAAuB,GAAG,OAAO;AAC3C;AAGA,MAAM,iBAAiB,iBAAiB;AAGxC,MAAM,gBAAgB,iBAAiB;AAGvC,MAAM,gBAAgB,iBAAiB;AAGvC,MAAM,eAAe,iBAAiB;AAgBtC,MAAM,iBAAiB,MAAM,WAG3B,CAAC,EAAE,WAAW,UAAU,WAAW,MAAM,OAAO,UAAU,YAAY,YAAY,MAAM,YAAY,OAAO,WAAW,aAAa,SAAS,UAAU,GAAG,MAAM,GAAG,QAAQ;AAC1K,QAAM,eAAe;AAErB,QAAM,iBAAiB,eAAe,YAAY,aAAa,YAAY,KAAK;AAEhF,SACE,oBAAC,iBAAiB,QAAjB,EACC;AAAA,IAAC,iBAAiB;AAAA,IAAjB;AAAA,MACC;AAAA,MACA;AAAA,MACA,YAAY;AAAA,MACZ,WAAW;AAAA,QACT,uBAAuB,EAAE,SAAS,KAAK,CAAC;AAAA,QACxC,kBAAkB,YAAY;AAAA,QAC9B;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,qBACC;AAAA,UAAC,iBAAiB;AAAA,UAAjB;AAAA,YACC,WAAU;AAAA,YACV,cAAY;AAAA,YAEX,uBAAa,oBAAC,oBAAiB,WAAU,WAAU;AAAA;AAAA,QACtD;AAAA,QAIF,oBAAC,SAAI,WAAU,oCACZ,UACH;AAAA,QACC,aAAa,YAAY,aACxB;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA,kBAAkB,YAAY;AAAA,YAChC;AAAA;AAAA,QACF;AAAA,QAED,aAAa,YAAY,cACxB;AAAA,UAAC,iBAAiB;AAAA,UAAjB;AAAA,YACC,WAAW;AAAA,YACX,OAAO;AAAA,YACP,QAAQ;AAAA;AAAA,QACV;AAAA;AAAA;AAAA,EAEJ,GACF;AAEJ,CAAC;AACD,eAAe,cAAc;AAG7B,MAAM,eAAe,MAAM,WAGzB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC,iBAAiB;AAAA,EAAjB;AAAA,IACC;AAAA,IACA,WAAW,GAAG,yBAAyB,SAAS;AAAA,IAChD,OAAO;AAAA,IACP,QAAQ;AAAA,IACP,GAAG;AAAA;AACN,CACD;AACD,aAAa,cAAc;","names":[]}

package/dist/components/ui/progress.d.mts

@@ -4,7 +4,7 @@ import * as ProgressPrimitive from '@radix-ui/react-progress';
 import { VariantProps } from 'class-variance-authority';
 
 declare const linearTrackVariants: (props?: ({
-    size?: "default" | "sm" | "lg" | null | undefined;
+    size?: "sm" | "default" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ProgressProps extends Omit<React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>, 'children'>, VariantProps<typeof linearTrackVariants> {
     /** Progress type */

package/dist/components/ui/progress.d.ts

@@ -4,7 +4,7 @@ import * as ProgressPrimitive from '@radix-ui/react-progress';
 import { VariantProps } from 'class-variance-authority';
 
 declare const linearTrackVariants: (props?: ({
-    size?: "default" | "sm" | "lg" | null | undefined;
+    size?: "sm" | "default" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ProgressProps extends Omit<React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>, 'children'>, VariantProps<typeof linearTrackVariants> {
     /** Progress type */

package/dist/components/ui/radio-group.d.mts

@@ -24,7 +24,7 @@ interface RadioGroupProps extends React.ComponentPropsWithoutRef<typeof RadioGro
 }
 declare const RadioGroup: React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<HTMLDivElement>>;
 declare const radioItemVariants: (props?: ({
-    size?: "default" | "sm" | "lg" | null | undefined;
+    size?: "sm" | "default" | "lg" | null | undefined;
     weight?: "bold" | "thin" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface RadioGroupItemProps extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item> {

package/dist/components/ui/radio-group.d.ts

@@ -24,7 +24,7 @@ interface RadioGroupProps extends React.ComponentPropsWithoutRef<typeof RadioGro
 }
 declare const RadioGroup: React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<HTMLDivElement>>;
 declare const radioItemVariants: (props?: ({
-    size?: "default" | "sm" | "lg" | null | undefined;
+    size?: "sm" | "default" | "lg" | null | undefined;
     weight?: "bold" | "thin" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface RadioGroupItemProps extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item> {

package/dist/components/ui/segmented.d.mts

@@ -5,15 +5,15 @@ import { VariantProps } from 'class-variance-authority';
 
 declare const segmentedVariants: (props?: ({
     variant?: "default" | "outline" | "ghost" | "underline" | null | undefined;
-    size?: "default" | "sm" | "lg" | "md" | null | undefined;
-    radius?: "default" | "sm" | "lg" | "base" | "none" | "xl" | "2xl" | "3xl" | "full" | null | undefined;
+    size?: "sm" | "default" | "lg" | "md" | null | undefined;
+    radius?: "sm" | "default" | "lg" | "none" | "base" | "xl" | "2xl" | "3xl" | "full" | null | undefined;
     fontWeight?: "normal" | "semibold" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const segmentedItemVariants: (props?: ({
     variant?: "default" | "outline" | "ghost" | "underline" | null | undefined;
-    size?: "default" | "sm" | "lg" | "md" | null | undefined;
-    radius?: "default" | "sm" | "lg" | "base" | "none" | "xl" | "2xl" | "3xl" | "full" | null | undefined;
-    contentType?: "text" | "icon" | "icon-text" | null | undefined;
+    size?: "sm" | "default" | "lg" | "md" | null | undefined;
+    radius?: "sm" | "default" | "lg" | "none" | "base" | "xl" | "2xl" | "3xl" | "full" | null | undefined;
+    contentType?: "icon" | "text" | "icon-text" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface SegmentedProps extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>, VariantProps<typeof segmentedVariants> {
 }

package/dist/components/ui/segmented.d.ts

@@ -5,15 +5,15 @@ import { VariantProps } from 'class-variance-authority';
 
 declare const segmentedVariants: (props?: ({
     variant?: "default" | "outline" | "ghost" | "underline" | null | undefined;
-    size?: "default" | "sm" | "lg" | "md" | null | undefined;
-    radius?: "default" | "sm" | "lg" | "base" | "none" | "xl" | "2xl" | "3xl" | "full" | null | undefined;
+    size?: "sm" | "default" | "lg" | "md" | null | undefined;
+    radius?: "sm" | "default" | "lg" | "none" | "base" | "xl" | "2xl" | "3xl" | "full" | null | undefined;
     fontWeight?: "normal" | "semibold" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const segmentedItemVariants: (props?: ({
     variant?: "default" | "outline" | "ghost" | "underline" | null | undefined;
-    size?: "default" | "sm" | "lg" | "md" | null | undefined;
-    radius?: "default" | "sm" | "lg" | "base" | "none" | "xl" | "2xl" | "3xl" | "full" | null | undefined;
-    contentType?: "text" | "icon" | "icon-text" | null | undefined;
+    size?: "sm" | "default" | "lg" | "md" | null | undefined;
+    radius?: "sm" | "default" | "lg" | "none" | "base" | "xl" | "2xl" | "3xl" | "full" | null | undefined;
+    contentType?: "icon" | "text" | "icon-text" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface SegmentedProps extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>, VariantProps<typeof segmentedVariants> {
 }

package/dist/components/ui/segmented.js

@@ -108,7 +108,9 @@ const segmentedItemVariants = (0, import_class_variance_authority.cva)(
         default: [
           "hover:text-foreground",
           "data-[state=checked]:bg-background data-[state=checked]:text-foreground",
-          "data-[state=checked]:shadow-sm"
+          "data-[state=checked]:shadow-sm",
+          // focus-ring and shadow-sm both set box-shadow; the extra pseudo-class makes the ring win on the selected item
+          "data-[state=checked]:focus-visible:focus-ring"
         ].join(" "),
         // Outline: gray background when selected
         outline: [

package/dist/components/ui/segmented.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ui/segmented.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport * as RadioGroupPrimitive from '@radix-ui/react-radio-group'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// Context to pass variant and size from Segmented to SegmentedItem\ntype SegmentedContextValue = {\n  variant?: 'default' | 'outline' | 'underline' | 'ghost'\n  size?: 'sm' | 'md' | 'default' | 'lg'\n  radius?: 'none' | 'sm' | 'base' | 'default' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n}\nconst SegmentedContext = React.createContext<SegmentedContextValue>({})\nconst useSegmentedContext = () => React.useContext(SegmentedContext)\n\nconst segmentedVariants = cva(\n  'inline-flex items-center text-text-subtle',\n  {\n    variants: {\n      variant: {\n        default: 'bg-background-muted gap-1',\n        outline: 'bg-background border border-border-form gap-1',\n        underline: 'bg-transparent border-b border-border-form gap-0',\n        ghost: 'bg-transparent gap-1',\n      },\n      size: {\n        sm: 'h-8',        // 32px height\n        md: 'h-9',        // 36px height\n        default: 'h-10',  // 40px height\n        lg: 'h-12',       // 48px height\n      },\n      radius: {\n        none: 'rounded-none',\n        sm: 'rounded-sm',\n        base: 'rounded',\n        default: 'rounded-md',\n        lg: 'rounded-lg',\n        xl: 'rounded-xl',\n        '2xl': 'rounded-2xl',\n        '3xl': 'rounded-3xl',\n        full: 'rounded-full',\n      },\n      fontWeight: {\n        normal: '[&>*]:font-normal',\n        semibold: '[&>*]:font-semibold',\n      },\n    },\n    compoundVariants: [\n      // Padding for default/outline/ghost variants\n      { variant: 'default', className: 'p-1' },\n      { variant: 'outline', className: 'p-1' },\n      { variant: 'ghost', className: 'p-1' },\n      // Underline has no padding\n      { variant: 'underline', className: 'p-0' },\n    ],\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n      radius: 'default',\n      fontWeight: 'normal',\n    },\n  }\n)\n\nconst segmentedItemVariants = cva(\n  [\n    'inline-flex items-center justify-center whitespace-nowrap h-full',\n    'transition-all duration-micro ease-out',\n    'focus-visible:focus-ring',\n    'disabled:pointer-events-none disabled:opacity-50',\n  ].join(' '),\n  {\n    variants: {\n      variant: {\n        // Default: light background when selected, text emphasis on hover\n        default: [\n          'hover:text-foreground',\n          'data-[state=checked]:bg-background data-[state=checked]:text-foreground',\n          'data-[state=checked]:shadow-sm',\n        ].join(' '),\n        // Outline: gray background when selected\n        outline: [\n          'data-[state=checked]:bg-background-muted data-[state=checked]:text-foreground',\n          'hover:text-foreground hover:bg-background-muted',\n        ].join(' '),\n        // Underline: bottom border indicator (Stripe/GitHub style)\n        underline: [\n          'border-b-2 border-transparent -mb-px',\n          'hover:text-foreground hover:border-border-form',\n          'data-[state=checked]:text-foreground data-[state=checked]:border-foreground',\n        ].join(' '),\n        // Ghost: pill background only on selected (Notion/Figma style)\n        ghost: [\n          'hover:text-foreground hover:bg-background-muted',\n          'data-[state=checked]:bg-background-muted data-[state=checked]:text-foreground',\n        ].join(' '),\n      },\n      size: {\n        sm: 'text-xs',      // 12px\n        md: 'text-sm',      // 13px\n        default: 'text-sm', // 13px\n        lg: 'text-md',      // 14px\n      },\n      radius: {\n        none: 'rounded-none',\n        sm: 'rounded-sm',\n        base: 'rounded',\n        default: 'rounded-md',\n        lg: 'rounded-md',\n        xl: 'rounded-lg',\n        '2xl': 'rounded-xl',\n        '3xl': 'rounded-2xl',\n        full: 'rounded-full',\n      },\n      // Content type determines padding and aspect ratio\n      contentType: {\n        // Icon only: square aspect ratio like IconButton\n        icon: 'aspect-square',\n        // Icon + text: rectangular (gap is set via compoundVariants)\n        'icon-text': '',\n        // Text only: standard button padding\n        text: '',\n      },\n    },\n    compoundVariants: [\n      // Icon + text - same padding rules as Button/Toggle\n      { contentType: 'icon-text', size: 'sm', className: 'px-3 gap-2' },      // 12px padding, 8px gap\n      { contentType: 'icon-text', size: 'md', className: 'px-3.5 gap-2' },   // 14px padding, 8px gap\n      { contentType: 'icon-text', size: 'default', className: 'px-4 gap-2' }, // 16px padding, 8px gap\n      { contentType: 'icon-text', size: 'lg', className: 'px-6 gap-2' },      // 24px padding, 8px gap\n      // Text only - same padding rules as Button/Toggle\n      { contentType: 'text', size: 'sm', className: 'px-3.5' },    // 14px\n      { contentType: 'text', size: 'md', className: 'px-3.5' },    // 14px\n      { contentType: 'text', size: 'default', className: 'px-4' }, // 16px\n      { contentType: 'text', size: 'lg', className: 'px-6' },      // 24px\n      // Underline variant has no rounded corners\n      { variant: 'underline', className: 'rounded-none' },\n    ],\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n      radius: 'default',\n      contentType: 'text',\n    },\n  }\n)\n\nexport interface SegmentedProps\n  extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>,\n    VariantProps<typeof segmentedVariants> {}\n\nconst Segmented = React.forwardRef<\n  React.ElementRef<typeof RadioGroupPrimitive.Root>,\n  SegmentedProps\n>(({ className, variant, size, radius, fontWeight, ...props }, ref) => {\n  // All variants default to normal font weight\n  const resolvedFontWeight = fontWeight ?? 'normal'\n\n  return (\n    <SegmentedContext.Provider value={{ variant: variant || 'default', size: size || 'default', radius: radius || 'default' }}>\n      <RadioGroupPrimitive.Root\n        className={cn(segmentedVariants({ variant, size, radius, fontWeight: resolvedFontWeight }), className)}\n        {...props}\n        ref={ref}\n      />\n    </SegmentedContext.Provider>\n  )\n})\nSegmented.displayName = 'Segmented'\n\n// Icon size for segmented control (4-step scale, Icon+Text mode)\n// sm: 14px, md~default~lg: 16px\nconst iconSizeClasses = {\n  sm: '[&>svg]:icon-xs',      // 14px\n  md: '[&>svg]:icon-sm',      // 16px\n  default: '[&>svg]:icon-sm', // 16px\n  lg: '[&>svg]:icon-sm',      // 16px\n}\n\nexport interface SegmentedItemProps\n  extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>,\n    Omit<VariantProps<typeof segmentedItemVariants>, 'variant'> {}\n\nconst SegmentedItem = React.forwardRef<\n  React.ElementRef<typeof RadioGroupPrimitive.Item>,\n  SegmentedItemProps\n>(({ className, children, size, radius, contentType, ...props }, ref) => {\n  const { variant, size: contextSize, radius: contextRadius } = useSegmentedContext()\n  const resolvedSize = size || contextSize || 'default'\n  const resolvedRadius = radius || contextRadius || 'default'\n\n  return (\n    <RadioGroupPrimitive.Item\n      ref={ref}\n      className={cn(\n        segmentedItemVariants({ variant, size: resolvedSize, radius: resolvedRadius, contentType }),\n        iconSizeClasses[resolvedSize],\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </RadioGroupPrimitive.Item>\n  )\n})\nSegmentedItem.displayName = 'SegmentedItem'\n\nexport { Segmented, SegmentedItem, segmentedVariants, segmentedItemVariants }\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/components/ui/segmented.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport * as RadioGroupPrimitive from '@radix-ui/react-radio-group'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// Context to pass variant and size from Segmented to SegmentedItem\ntype SegmentedContextValue = {\n  variant?: 'default' | 'outline' | 'underline' | 'ghost'\n  size?: 'sm' | 'md' | 'default' | 'lg'\n  radius?: 'none' | 'sm' | 'base' | 'default' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n}\nconst SegmentedContext = React.createContext<SegmentedContextValue>({})\nconst useSegmentedContext = () => React.useContext(SegmentedContext)\n\nconst segmentedVariants = cva(\n  'inline-flex items-center text-text-subtle',\n  {\n    variants: {\n      variant: {\n        default: 'bg-background-muted gap-1',\n        outline: 'bg-background border border-border-form gap-1',\n        underline: 'bg-transparent border-b border-border-form gap-0',\n        ghost: 'bg-transparent gap-1',\n      },\n      size: {\n        sm: 'h-8',        // 32px height\n        md: 'h-9',        // 36px height\n        default: 'h-10',  // 40px height\n        lg: 'h-12',       // 48px height\n      },\n      radius: {\n        none: 'rounded-none',\n        sm: 'rounded-sm',\n        base: 'rounded',\n        default: 'rounded-md',\n        lg: 'rounded-lg',\n        xl: 'rounded-xl',\n        '2xl': 'rounded-2xl',\n        '3xl': 'rounded-3xl',\n        full: 'rounded-full',\n      },\n      fontWeight: {\n        normal: '[&>*]:font-normal',\n        semibold: '[&>*]:font-semibold',\n      },\n    },\n    compoundVariants: [\n      // Padding for default/outline/ghost variants\n      { variant: 'default', className: 'p-1' },\n      { variant: 'outline', className: 'p-1' },\n      { variant: 'ghost', className: 'p-1' },\n      // Underline has no padding\n      { variant: 'underline', className: 'p-0' },\n    ],\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n      radius: 'default',\n      fontWeight: 'normal',\n    },\n  }\n)\n\nconst segmentedItemVariants = cva(\n  [\n    'inline-flex items-center justify-center whitespace-nowrap h-full',\n    'transition-all duration-micro ease-out',\n    'focus-visible:focus-ring',\n    'disabled:pointer-events-none disabled:opacity-50',\n  ].join(' '),\n  {\n    variants: {\n      variant: {\n        // Default: light background when selected, text emphasis on hover\n        default: [\n          'hover:text-foreground',\n          'data-[state=checked]:bg-background data-[state=checked]:text-foreground',\n          'data-[state=checked]:shadow-sm',\n          // focus-ring and shadow-sm both set box-shadow; the extra pseudo-class makes the ring win on the selected item\n          'data-[state=checked]:focus-visible:focus-ring',\n        ].join(' '),\n        // Outline: gray background when selected\n        outline: [\n          'data-[state=checked]:bg-background-muted data-[state=checked]:text-foreground',\n          'hover:text-foreground hover:bg-background-muted',\n        ].join(' '),\n        // Underline: bottom border indicator (Stripe/GitHub style)\n        underline: [\n          'border-b-2 border-transparent -mb-px',\n          'hover:text-foreground hover:border-border-form',\n          'data-[state=checked]:text-foreground data-[state=checked]:border-foreground',\n        ].join(' '),\n        // Ghost: pill background only on selected (Notion/Figma style)\n        ghost: [\n          'hover:text-foreground hover:bg-background-muted',\n          'data-[state=checked]:bg-background-muted data-[state=checked]:text-foreground',\n        ].join(' '),\n      },\n      size: {\n        sm: 'text-xs',      // 12px\n        md: 'text-sm',      // 13px\n        default: 'text-sm', // 13px\n        lg: 'text-md',      // 14px\n      },\n      radius: {\n        none: 'rounded-none',\n        sm: 'rounded-sm',\n        base: 'rounded',\n        default: 'rounded-md',\n        lg: 'rounded-md',\n        xl: 'rounded-lg',\n        '2xl': 'rounded-xl',\n        '3xl': 'rounded-2xl',\n        full: 'rounded-full',\n      },\n      // Content type determines padding and aspect ratio\n      contentType: {\n        // Icon only: square aspect ratio like IconButton\n        icon: 'aspect-square',\n        // Icon + text: rectangular (gap is set via compoundVariants)\n        'icon-text': '',\n        // Text only: standard button padding\n        text: '',\n      },\n    },\n    compoundVariants: [\n      // Icon + text - same padding rules as Button/Toggle\n      { contentType: 'icon-text', size: 'sm', className: 'px-3 gap-2' },      // 12px padding, 8px gap\n      { contentType: 'icon-text', size: 'md', className: 'px-3.5 gap-2' },   // 14px padding, 8px gap\n      { contentType: 'icon-text', size: 'default', className: 'px-4 gap-2' }, // 16px padding, 8px gap\n      { contentType: 'icon-text', size: 'lg', className: 'px-6 gap-2' },      // 24px padding, 8px gap\n      // Text only - same padding rules as Button/Toggle\n      { contentType: 'text', size: 'sm', className: 'px-3.5' },    // 14px\n      { contentType: 'text', size: 'md', className: 'px-3.5' },    // 14px\n      { contentType: 'text', size: 'default', className: 'px-4' }, // 16px\n      { contentType: 'text', size: 'lg', className: 'px-6' },      // 24px\n      // Underline variant has no rounded corners\n      { variant: 'underline', className: 'rounded-none' },\n    ],\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n      radius: 'default',\n      contentType: 'text',\n    },\n  }\n)\n\nexport interface SegmentedProps\n  extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>,\n    VariantProps<typeof segmentedVariants> {}\n\nconst Segmented = React.forwardRef<\n  React.ElementRef<typeof RadioGroupPrimitive.Root>,\n  SegmentedProps\n>(({ className, variant, size, radius, fontWeight, ...props }, ref) => {\n  // All variants default to normal font weight\n  const resolvedFontWeight = fontWeight ?? 'normal'\n\n  return (\n    <SegmentedContext.Provider value={{ variant: variant || 'default', size: size || 'default', radius: radius || 'default' }}>\n      <RadioGroupPrimitive.Root\n        className={cn(segmentedVariants({ variant, size, radius, fontWeight: resolvedFontWeight }), className)}\n        {...props}\n        ref={ref}\n      />\n    </SegmentedContext.Provider>\n  )\n})\nSegmented.displayName = 'Segmented'\n\n// Icon size for segmented control (4-step scale, Icon+Text mode)\n// sm: 14px, md~default~lg: 16px\nconst iconSizeClasses = {\n  sm: '[&>svg]:icon-xs',      // 14px\n  md: '[&>svg]:icon-sm',      // 16px\n  default: '[&>svg]:icon-sm', // 16px\n  lg: '[&>svg]:icon-sm',      // 16px\n}\n\nexport interface SegmentedItemProps\n  extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>,\n    Omit<VariantProps<typeof segmentedItemVariants>, 'variant'> {}\n\nconst SegmentedItem = React.forwardRef<\n  React.ElementRef<typeof RadioGroupPrimitive.Item>,\n  SegmentedItemProps\n>(({ className, children, size, radius, contentType, ...props }, ref) => {\n  const { variant, size: contextSize, radius: contextRadius } = useSegmentedContext()\n  const resolvedSize = size || contextSize || 'default'\n  const resolvedRadius = radius || contextRadius || 'default'\n\n  return (\n    <RadioGroupPrimitive.Item\n      ref={ref}\n      className={cn(\n        segmentedItemVariants({ variant, size: resolvedSize, radius: resolvedRadius, contentType }),\n        iconSizeClasses[resolvedSize],\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </RadioGroupPrimitive.Item>\n  )\n})\nSegmentedItem.displayName = 'SegmentedItem'\n\nexport { Segmented, SegmentedItem, segmentedVariants, segmentedItemVariants }\n"],"mappings":"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","names":[]}

package/dist/components/ui/segmented.mjs

@@ -72,7 +72,9 @@ const segmentedItemVariants = cva(
         default: [
           "hover:text-foreground",
           "data-[state=checked]:bg-background data-[state=checked]:text-foreground",
-          "data-[state=checked]:shadow-sm"
+          "data-[state=checked]:shadow-sm",
+          // focus-ring and shadow-sm both set box-shadow; the extra pseudo-class makes the ring win on the selected item
+          "data-[state=checked]:focus-visible:focus-ring"
         ].join(" "),
         // Outline: gray background when selected
         outline: [

package/dist/components/ui/segmented.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ui/segmented.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport * as RadioGroupPrimitive from '@radix-ui/react-radio-group'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// Context to pass variant and size from Segmented to SegmentedItem\ntype SegmentedContextValue = {\n  variant?: 'default' | 'outline' | 'underline' | 'ghost'\n  size?: 'sm' | 'md' | 'default' | 'lg'\n  radius?: 'none' | 'sm' | 'base' | 'default' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n}\nconst SegmentedContext = React.createContext<SegmentedContextValue>({})\nconst useSegmentedContext = () => React.useContext(SegmentedContext)\n\nconst segmentedVariants = cva(\n  'inline-flex items-center text-text-subtle',\n  {\n    variants: {\n      variant: {\n        default: 'bg-background-muted gap-1',\n        outline: 'bg-background border border-border-form gap-1',\n        underline: 'bg-transparent border-b border-border-form gap-0',\n        ghost: 'bg-transparent gap-1',\n      },\n      size: {\n        sm: 'h-8',        // 32px height\n        md: 'h-9',        // 36px height\n        default: 'h-10',  // 40px height\n        lg: 'h-12',       // 48px height\n      },\n      radius: {\n        none: 'rounded-none',\n        sm: 'rounded-sm',\n        base: 'rounded',\n        default: 'rounded-md',\n        lg: 'rounded-lg',\n        xl: 'rounded-xl',\n        '2xl': 'rounded-2xl',\n        '3xl': 'rounded-3xl',\n        full: 'rounded-full',\n      },\n      fontWeight: {\n        normal: '[&>*]:font-normal',\n        semibold: '[&>*]:font-semibold',\n      },\n    },\n    compoundVariants: [\n      // Padding for default/outline/ghost variants\n      { variant: 'default', className: 'p-1' },\n      { variant: 'outline', className: 'p-1' },\n      { variant: 'ghost', className: 'p-1' },\n      // Underline has no padding\n      { variant: 'underline', className: 'p-0' },\n    ],\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n      radius: 'default',\n      fontWeight: 'normal',\n    },\n  }\n)\n\nconst segmentedItemVariants = cva(\n  [\n    'inline-flex items-center justify-center whitespace-nowrap h-full',\n    'transition-all duration-micro ease-out',\n    'focus-visible:focus-ring',\n    'disabled:pointer-events-none disabled:opacity-50',\n  ].join(' '),\n  {\n    variants: {\n      variant: {\n        // Default: light background when selected, text emphasis on hover\n        default: [\n          'hover:text-foreground',\n          'data-[state=checked]:bg-background data-[state=checked]:text-foreground',\n          'data-[state=checked]:shadow-sm',\n        ].join(' '),\n        // Outline: gray background when selected\n        outline: [\n          'data-[state=checked]:bg-background-muted data-[state=checked]:text-foreground',\n          'hover:text-foreground hover:bg-background-muted',\n        ].join(' '),\n        // Underline: bottom border indicator (Stripe/GitHub style)\n        underline: [\n          'border-b-2 border-transparent -mb-px',\n          'hover:text-foreground hover:border-border-form',\n          'data-[state=checked]:text-foreground data-[state=checked]:border-foreground',\n        ].join(' '),\n        // Ghost: pill background only on selected (Notion/Figma style)\n        ghost: [\n          'hover:text-foreground hover:bg-background-muted',\n          'data-[state=checked]:bg-background-muted data-[state=checked]:text-foreground',\n        ].join(' '),\n      },\n      size: {\n        sm: 'text-xs',      // 12px\n        md: 'text-sm',      // 13px\n        default: 'text-sm', // 13px\n        lg: 'text-md',      // 14px\n      },\n      radius: {\n        none: 'rounded-none',\n        sm: 'rounded-sm',\n        base: 'rounded',\n        default: 'rounded-md',\n        lg: 'rounded-md',\n        xl: 'rounded-lg',\n        '2xl': 'rounded-xl',\n        '3xl': 'rounded-2xl',\n        full: 'rounded-full',\n      },\n      // Content type determines padding and aspect ratio\n      contentType: {\n        // Icon only: square aspect ratio like IconButton\n        icon: 'aspect-square',\n        // Icon + text: rectangular (gap is set via compoundVariants)\n        'icon-text': '',\n        // Text only: standard button padding\n        text: '',\n      },\n    },\n    compoundVariants: [\n      // Icon + text - same padding rules as Button/Toggle\n      { contentType: 'icon-text', size: 'sm', className: 'px-3 gap-2' },      // 12px padding, 8px gap\n      { contentType: 'icon-text', size: 'md', className: 'px-3.5 gap-2' },   // 14px padding, 8px gap\n      { contentType: 'icon-text', size: 'default', className: 'px-4 gap-2' }, // 16px padding, 8px gap\n      { contentType: 'icon-text', size: 'lg', className: 'px-6 gap-2' },      // 24px padding, 8px gap\n      // Text only - same padding rules as Button/Toggle\n      { contentType: 'text', size: 'sm', className: 'px-3.5' },    // 14px\n      { contentType: 'text', size: 'md', className: 'px-3.5' },    // 14px\n      { contentType: 'text', size: 'default', className: 'px-4' }, // 16px\n      { contentType: 'text', size: 'lg', className: 'px-6' },      // 24px\n      // Underline variant has no rounded corners\n      { variant: 'underline', className: 'rounded-none' },\n    ],\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n      radius: 'default',\n      contentType: 'text',\n    },\n  }\n)\n\nexport interface SegmentedProps\n  extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>,\n    VariantProps<typeof segmentedVariants> {}\n\nconst Segmented = React.forwardRef<\n  React.ElementRef<typeof RadioGroupPrimitive.Root>,\n  SegmentedProps\n>(({ className, variant, size, radius, fontWeight, ...props }, ref) => {\n  // All variants default to normal font weight\n  const resolvedFontWeight = fontWeight ?? 'normal'\n\n  return (\n    <SegmentedContext.Provider value={{ variant: variant || 'default', size: size || 'default', radius: radius || 'default' }}>\n      <RadioGroupPrimitive.Root\n        className={cn(segmentedVariants({ variant, size, radius, fontWeight: resolvedFontWeight }), className)}\n        {...props}\n        ref={ref}\n      />\n    </SegmentedContext.Provider>\n  )\n})\nSegmented.displayName = 'Segmented'\n\n// Icon size for segmented control (4-step scale, Icon+Text mode)\n// sm: 14px, md~default~lg: 16px\nconst iconSizeClasses = {\n  sm: '[&>svg]:icon-xs',      // 14px\n  md: '[&>svg]:icon-sm',      // 16px\n  default: '[&>svg]:icon-sm', // 16px\n  lg: '[&>svg]:icon-sm',      // 16px\n}\n\nexport interface SegmentedItemProps\n  extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>,\n    Omit<VariantProps<typeof segmentedItemVariants>, 'variant'> {}\n\nconst SegmentedItem = React.forwardRef<\n  React.ElementRef<typeof RadioGroupPrimitive.Item>,\n  SegmentedItemProps\n>(({ className, children, size, radius, contentType, ...props }, ref) => {\n  const { variant, size: contextSize, radius: contextRadius } = useSegmentedContext()\n  const resolvedSize = size || contextSize || 'default'\n  const resolvedRadius = radius || contextRadius || 'default'\n\n  return (\n    <RadioGroupPrimitive.Item\n      ref={ref}\n      className={cn(\n        segmentedItemVariants({ variant, size: resolvedSize, radius: resolvedRadius, contentType }),\n        iconSizeClasses[resolvedSize],\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </RadioGroupPrimitive.Item>\n  )\n})\nSegmentedItem.displayName = 'SegmentedItem'\n\nexport { Segmented, SegmentedItem, segmentedVariants, segmentedItemVariants }\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/components/ui/segmented.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport * as RadioGroupPrimitive from '@radix-ui/react-radio-group'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// Context to pass variant and size from Segmented to SegmentedItem\ntype SegmentedContextValue = {\n  variant?: 'default' | 'outline' | 'underline' | 'ghost'\n  size?: 'sm' | 'md' | 'default' | 'lg'\n  radius?: 'none' | 'sm' | 'base' | 'default' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n}\nconst SegmentedContext = React.createContext<SegmentedContextValue>({})\nconst useSegmentedContext = () => React.useContext(SegmentedContext)\n\nconst segmentedVariants = cva(\n  'inline-flex items-center text-text-subtle',\n  {\n    variants: {\n      variant: {\n        default: 'bg-background-muted gap-1',\n        outline: 'bg-background border border-border-form gap-1',\n        underline: 'bg-transparent border-b border-border-form gap-0',\n        ghost: 'bg-transparent gap-1',\n      },\n      size: {\n        sm: 'h-8',        // 32px height\n        md: 'h-9',        // 36px height\n        default: 'h-10',  // 40px height\n        lg: 'h-12',       // 48px height\n      },\n      radius: {\n        none: 'rounded-none',\n        sm: 'rounded-sm',\n        base: 'rounded',\n        default: 'rounded-md',\n        lg: 'rounded-lg',\n        xl: 'rounded-xl',\n        '2xl': 'rounded-2xl',\n        '3xl': 'rounded-3xl',\n        full: 'rounded-full',\n      },\n      fontWeight: {\n        normal: '[&>*]:font-normal',\n        semibold: '[&>*]:font-semibold',\n      },\n    },\n    compoundVariants: [\n      // Padding for default/outline/ghost variants\n      { variant: 'default', className: 'p-1' },\n      { variant: 'outline', className: 'p-1' },\n      { variant: 'ghost', className: 'p-1' },\n      // Underline has no padding\n      { variant: 'underline', className: 'p-0' },\n    ],\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n      radius: 'default',\n      fontWeight: 'normal',\n    },\n  }\n)\n\nconst segmentedItemVariants = cva(\n  [\n    'inline-flex items-center justify-center whitespace-nowrap h-full',\n    'transition-all duration-micro ease-out',\n    'focus-visible:focus-ring',\n    'disabled:pointer-events-none disabled:opacity-50',\n  ].join(' '),\n  {\n    variants: {\n      variant: {\n        // Default: light background when selected, text emphasis on hover\n        default: [\n          'hover:text-foreground',\n          'data-[state=checked]:bg-background data-[state=checked]:text-foreground',\n          'data-[state=checked]:shadow-sm',\n          // focus-ring and shadow-sm both set box-shadow; the extra pseudo-class makes the ring win on the selected item\n          'data-[state=checked]:focus-visible:focus-ring',\n        ].join(' '),\n        // Outline: gray background when selected\n        outline: [\n          'data-[state=checked]:bg-background-muted data-[state=checked]:text-foreground',\n          'hover:text-foreground hover:bg-background-muted',\n        ].join(' '),\n        // Underline: bottom border indicator (Stripe/GitHub style)\n        underline: [\n          'border-b-2 border-transparent -mb-px',\n          'hover:text-foreground hover:border-border-form',\n          'data-[state=checked]:text-foreground data-[state=checked]:border-foreground',\n        ].join(' '),\n        // Ghost: pill background only on selected (Notion/Figma style)\n        ghost: [\n          'hover:text-foreground hover:bg-background-muted',\n          'data-[state=checked]:bg-background-muted data-[state=checked]:text-foreground',\n        ].join(' '),\n      },\n      size: {\n        sm: 'text-xs',      // 12px\n        md: 'text-sm',      // 13px\n        default: 'text-sm', // 13px\n        lg: 'text-md',      // 14px\n      },\n      radius: {\n        none: 'rounded-none',\n        sm: 'rounded-sm',\n        base: 'rounded',\n        default: 'rounded-md',\n        lg: 'rounded-md',\n        xl: 'rounded-lg',\n        '2xl': 'rounded-xl',\n        '3xl': 'rounded-2xl',\n        full: 'rounded-full',\n      },\n      // Content type determines padding and aspect ratio\n      contentType: {\n        // Icon only: square aspect ratio like IconButton\n        icon: 'aspect-square',\n        // Icon + text: rectangular (gap is set via compoundVariants)\n        'icon-text': '',\n        // Text only: standard button padding\n        text: '',\n      },\n    },\n    compoundVariants: [\n      // Icon + text - same padding rules as Button/Toggle\n      { contentType: 'icon-text', size: 'sm', className: 'px-3 gap-2' },      // 12px padding, 8px gap\n      { contentType: 'icon-text', size: 'md', className: 'px-3.5 gap-2' },   // 14px padding, 8px gap\n      { contentType: 'icon-text', size: 'default', className: 'px-4 gap-2' }, // 16px padding, 8px gap\n      { contentType: 'icon-text', size: 'lg', className: 'px-6 gap-2' },      // 24px padding, 8px gap\n      // Text only - same padding rules as Button/Toggle\n      { contentType: 'text', size: 'sm', className: 'px-3.5' },    // 14px\n      { contentType: 'text', size: 'md', className: 'px-3.5' },    // 14px\n      { contentType: 'text', size: 'default', className: 'px-4' }, // 16px\n      { contentType: 'text', size: 'lg', className: 'px-6' },      // 24px\n      // Underline variant has no rounded corners\n      { variant: 'underline', className: 'rounded-none' },\n    ],\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n      radius: 'default',\n      contentType: 'text',\n    },\n  }\n)\n\nexport interface SegmentedProps\n  extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>,\n    VariantProps<typeof segmentedVariants> {}\n\nconst Segmented = React.forwardRef<\n  React.ElementRef<typeof RadioGroupPrimitive.Root>,\n  SegmentedProps\n>(({ className, variant, size, radius, fontWeight, ...props }, ref) => {\n  // All variants default to normal font weight\n  const resolvedFontWeight = fontWeight ?? 'normal'\n\n  return (\n    <SegmentedContext.Provider value={{ variant: variant || 'default', size: size || 'default', radius: radius || 'default' }}>\n      <RadioGroupPrimitive.Root\n        className={cn(segmentedVariants({ variant, size, radius, fontWeight: resolvedFontWeight }), className)}\n        {...props}\n        ref={ref}\n      />\n    </SegmentedContext.Provider>\n  )\n})\nSegmented.displayName = 'Segmented'\n\n// Icon size for segmented control (4-step scale, Icon+Text mode)\n// sm: 14px, md~default~lg: 16px\nconst iconSizeClasses = {\n  sm: '[&>svg]:icon-xs',      // 14px\n  md: '[&>svg]:icon-sm',      // 16px\n  default: '[&>svg]:icon-sm', // 16px\n  lg: '[&>svg]:icon-sm',      // 16px\n}\n\nexport interface SegmentedItemProps\n  extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>,\n    Omit<VariantProps<typeof segmentedItemVariants>, 'variant'> {}\n\nconst SegmentedItem = React.forwardRef<\n  React.ElementRef<typeof RadioGroupPrimitive.Item>,\n  SegmentedItemProps\n>(({ className, children, size, radius, contentType, ...props }, ref) => {\n  const { variant, size: contextSize, radius: contextRadius } = useSegmentedContext()\n  const resolvedSize = size || contextSize || 'default'\n  const resolvedRadius = radius || contextRadius || 'default'\n\n  return (\n    <RadioGroupPrimitive.Item\n      ref={ref}\n      className={cn(\n        segmentedItemVariants({ variant, size: resolvedSize, radius: resolvedRadius, contentType }),\n        iconSizeClasses[resolvedSize],\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </RadioGroupPrimitive.Item>\n  )\n})\nSegmentedItem.displayName = 'SegmentedItem'\n\nexport { Segmented, SegmentedItem, segmentedVariants, segmentedItemVariants }\n"],"mappings":"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","names":[]}

package/dist/components/ui/select.js

@@ -217,7 +217,22 @@ const SelectScrollDownButton = React.forwardRef(({ className, ...props }, ref) =
   }
 ));
 SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+let lastInputWasKeyboard = false;
+let inputTypeTrackerInstalled = false;
+function useLastInputTypeTracker() {
+  React.useEffect(() => {
+    if (inputTypeTrackerInstalled) return;
+    inputTypeTrackerInstalled = true;
+    document.addEventListener("keydown", () => {
+      lastInputWasKeyboard = true;
+    }, true);
+    document.addEventListener("pointerdown", () => {
+      lastInputWasKeyboard = false;
+    }, true);
+  }, []);
+}
 const SelectContent = React.forwardRef(({ className, children, position = "popper", sideOffset = 1, flush = false, onCloseAutoFocus, ...props }, ref) => {
+  useLastInputTypeTracker();
   const { size, radius } = React.useContext(SelectContext);
   const itemSize = itemSizeFromTrigger[size];
   const contentRadius = contentRadiusFromRoot[radius];
@@ -226,7 +241,7 @@ const SelectContent = React.forwardRef(({ className, children, position = "poppe
     {
       ref,
       onCloseAutoFocus: (e) => {
-        e.preventDefault();
+        if (!lastInputWasKeyboard) e.preventDefault();
         onCloseAutoFocus?.(e);
       },
       className: (0, import_utils.cn)(