@aloudata/aloudata-design 3.0.22 → 3.0.24

package/dist/Tabs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/Tabs/index.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { cn } from '../lib/utils';\nimport { ChevronLeftLine, ChevronRightLine, CloseLightLine } from '../Icon';\nimport TabPane from './TabPane';\n\nexport type TabsSize = 'default' | 'small';\n\ninterface TabItem {\n  key: string;\n  label: React.ReactNode;\n  children?: React.ReactNode;\n  disabled?: boolean;\n  closable?: boolean;\n  icon?: React.ReactNode;\n  forceRender?: boolean;\n  className?: string;\n}\n\nexport interface ITabsProps {\n  size?: TabsSize;\n  activeKey?: string;\n  defaultActiveKey?: string;\n  onChange?: (activeKey: string) => void;\n  onTabClick?: (activeKey: string, e: React.MouseEvent) => void;\n  destroyInactiveTabPane?: boolean;\n  centered?: boolean;\n  adaptHeight?: boolean;\n  tabPosition?: 'left' | 'right' | 'top' | 'bottom';\n  className?: string;\n  children?: React.ReactNode;\n  headerBackgroundColor?: string;\n  monospace?: boolean;\n  padding?: boolean | number;\n  compact?: boolean;\n  hasDividing?: boolean;\n  items?: TabItem[];\n  type?: 'line' | 'card' | 'editable-card';\n  tabBarExtraContent?:\n    | React.ReactNode\n    | { left?: React.ReactNode; right?: React.ReactNode };\n  onEdit?: (\n    targetKey: string | React.MouseEvent | React.KeyboardEvent,\n    action: 'add' | 'remove',\n  ) => void;\n  hideAdd?: boolean;\n  style?: React.CSSProperties;\n  tabBarStyle?: React.CSSProperties;\n  popupClassName?: string;\n  tabBarGutter?: number;\n  moreIcon?: React.ReactNode;\n  /** 透传到 Tabs 根容器的 data-testid，用于自动化测试定位 */\n  'data-testid'?: string;\n  /** 透传到 Tabs 根容器的 aria-label，用于可访问性与自动化测试定位 */\n  'aria-label'?: string;\n}\n\nexport default function Tabs(props: ITabsProps) {\n  const {\n    size,\n    className,\n    adaptHeight,\n    style = {},\n    monospace: propsMonospace,\n    tabPosition = 'top',\n    padding: propsPadding = false,\n    compact,\n    hasDividing = true,\n    items,\n    activeKey: controlledActiveKey,\n    defaultActiveKey,\n    onChange,\n    onTabClick,\n    destroyInactiveTabPane,\n    centered,\n    tabBarExtraContent,\n    headerBackgroundColor,\n    children,\n    type,\n    onEdit,\n    hideAdd,\n    tabBarStyle,\n    'data-testid': dataTestId,\n    'aria-label': ariaLabel,\n  } = props;\n\n  const isEditable = type === 'editable-card';\n  const isCard = type === 'card' || type === 'editable-card';\n\n  // Derive items from children if not provided\n  const resolvedItems: TabItem[] = useMemo(() => {\n    if (items) return items;\n    return React.Children.toArray(children)\n      .filter(React.isValidElement)\n      .map((child: any) => ({\n        key: child.key || child.props.key || '',\n        label: child.props.tab,\n        children: child.props.children,\n        disabled: child.props.disabled,\n        closable: child.props.closable,\n        forceRender: child.props.forceRender,\n      }));\n  }, [items, children]);\n\n  const firstKey = resolvedItems[0]?.key || '';\n  const [innerActiveKey, setInnerActiveKey] = useState(\n    defaultActiveKey || firstKey,\n  );\n  const mergedActiveKey =\n    controlledActiveKey !== undefined ? controlledActiveKey : innerActiveKey;\n  const activeKey = resolvedItems.some((item) => item.key === mergedActiveKey)\n    ? mergedActiveKey\n    : firstKey;\n\n  const handleTabClick = (key: string, e: React.MouseEvent) => {\n    if (controlledActiveKey === undefined) {\n      setInnerActiveKey(key);\n    }\n    onChange?.(key);\n    onTabClick?.(key, e);\n  };\n\n  const handleRemove = (key: string, e: React.MouseEvent) => {\n    e.stopPropagation();\n    onEdit?.(key, 'remove');\n  };\n\n  const handleAdd = (e: React.MouseEvent) => {\n    onEdit?.(e, 'add');\n  };\n\n  const monospace = tabPosition !== 'top' ? false : propsMonospace;\n  const paddingVal = useMemo(() => {\n    if (tabPosition !== 'top') return 0;\n    if (typeof propsPadding === 'number') return propsPadding;\n    if (typeof propsPadding === 'boolean' && propsPadding) return 20;\n    return 0;\n  }, [propsPadding, tabPosition]);\n\n  const isTop = tabPosition === 'top';\n  const isBottom = tabPosition === 'bottom';\n  const isLeft = tabPosition === 'left';\n  const isRight = tabPosition === 'right';\n  const isVertical = tabPosition === 'left' || tabPosition === 'right';\n  const rootDirectionClass = isRight\n    ? 'tw-flex-row-reverse'\n    : isLeft\n    ? 'tw-flex-row'\n    : isBottom\n    ? 'tw-flex-col-reverse'\n    : 'tw-flex-col';\n\n  const extraLeft =\n    tabBarExtraContent &&\n    typeof tabBarExtraContent === 'object' &&\n    'left' in tabBarExtraContent\n      ? tabBarExtraContent.left\n      : null;\n  const extraRight = tabBarExtraContent\n    ? typeof tabBarExtraContent === 'object' && 'right' in tabBarExtraContent\n      ? tabBarExtraContent.right\n      : React.isValidElement(tabBarExtraContent)\n      ? tabBarExtraContent\n      : null\n    : null;\n\n  // Scroll state for overflow\n  const navListRef = useRef<HTMLDivElement>(null);\n  const [canScrollLeft, setCanScrollLeft] = useState(false);\n  const [canScrollRight, setCanScrollRight] = useState(false);\n\n  const checkScroll = useCallback(() => {\n    const el = navListRef.current;\n    if (!el || isVertical) {\n      setCanScrollLeft(false);\n      setCanScrollRight(false);\n      return;\n    }\n    const { scrollLeft, scrollWidth, clientWidth } = el;\n    setCanScrollLeft(scrollLeft > 1);\n    setCanScrollRight(scrollLeft + clientWidth < scrollWidth - 1);\n  }, [isVertical]);\n\n  useEffect(() => {\n    checkScroll();\n    const el = navListRef.current;\n    if (!el) return;\n    // Use ResizeObserver to detect size changes\n    let ro: ResizeObserver | undefined;\n    if (typeof ResizeObserver !== 'undefined') {\n      ro = new ResizeObserver(() => checkScroll());\n      ro.observe(el);\n    }\n    el.addEventListener('scroll', checkScroll, { passive: true });\n    return () => {\n      el.removeEventListener('scroll', checkScroll);\n      ro?.disconnect();\n    };\n  }, [checkScroll, resolvedItems.length]);\n\n  const scrollBy = (delta: number) => {\n    const el = navListRef.current;\n    if (el) {\n      el.scrollBy({ left: delta, behavior: 'smooth' });\n    }\n  };\n\n  const showScrollButtons = canScrollLeft || canScrollRight;\n\n  return (\n    <div\n      data-testid={dataTestId}\n      aria-label={ariaLabel}\n      className={cn(\n        // antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器\n        'ald-tabs ant-tabs tw-flex',\n        rootDirectionClass,\n        adaptHeight && 'ald-adapt-height tw-h-full',\n        size !== 'small' && 'ald-tabs-default',\n        monospace && 'ald-tabs-monospace',\n        compact && 'ald-tabs-compact',\n        !hasDividing && 'ald-tabs-no-dividing',\n        className,\n      )}\n      style={\n        {\n          ...style,\n          '--header-bg-color': headerBackgroundColor,\n          '--tabs-padding': `${paddingVal}px`,\n        } as React.CSSProperties\n      }\n    >\n      {/* Tab nav */}\n      <div\n        className={cn(\n          // antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器\n          'ald-tabs-nav ant-tabs-nav tw-flex',\n          isVertical ? 'tw-shrink-0 tw-items-stretch' : 'tw-items-center',\n          isTop && 'tw-mb-5',\n          isBottom && 'tw-mt-5',\n          isTop &&\n            hasDividing &&\n            'tw-border-0 tw-border-b tw-border-solid tw-border-b-[var(--border-default)]',\n          isBottom &&\n            hasDividing &&\n            'tw-border-0 tw-border-t tw-border-solid tw-border-t-[var(--border-default)]',\n          isTop && compact && '!tw-mb-0',\n          isBottom && compact && '!tw-mt-0',\n          isLeft &&\n            'tw-flex-col tw-border-0 tw-border-r tw-border-solid tw-border-r-[var(--border-default)]',\n          isRight &&\n            'tw-flex-col tw-border-0 tw-border-l tw-border-solid tw-border-l-[var(--border-default)]',\n        )}\n        style={\n          headerBackgroundColor || tabBarStyle\n            ? {\n                ...tabBarStyle,\n                ...(headerBackgroundColor\n                  ? { backgroundColor: headerBackgroundColor }\n                  : {}),\n              }\n            : undefined\n        }\n      >\n        {extraLeft}\n\n        {/* Scroll left button */}\n        {showScrollButtons && !isVertical && (\n          <button\n            type=\"button\"\n            className={cn(\n              'ald-tabs-scroll-btn tw-flex tw-shrink-0 tw-items-center tw-justify-center tw-border-none tw-bg-[var(--action-ghost-normal)] tw-p-1 tw-text-[var(--content-secondary)] tw-transition-colors hover:tw-text-[var(--content-primary)]',\n              !canScrollLeft && 'tw-invisible',\n            )}\n            onClick={() => scrollBy(-200)}\n            aria-label=\"Scroll tabs left\"\n          >\n            <ChevronLeftLine size={16} />\n          </button>\n        )}\n\n        <div\n          className={cn(\n            'ald-tabs-nav-wrap ant-tabs-nav-wrap',\n            isVertical\n              ? 'tw-w-full tw-shrink-0 tw-self-stretch'\n              : 'tw-min-w-0 tw-flex-1',\n          )}\n          style={paddingVal ? { margin: `0 ${paddingVal}px` } : undefined}\n        >\n          <div\n            ref={navListRef}\n            className={cn(\n              // antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器\n              'ald-tabs-nav-list ant-tabs-nav-list tw-flex tw-overflow-hidden',\n              isVertical && 'tw-w-full tw-shrink-0 tw-flex-col tw-self-stretch',\n              centered && !isVertical && 'tw-justify-center',\n              monospace && '[&>*]:tw-flex-1',\n              isCard ? 'tw-gap-1' : !isVertical && !monospace && 'tw-gap-8',\n            )}\n            style={\n              !isVertical\n                ? { scrollbarWidth: 'none', msOverflowStyle: 'none' }\n                : undefined\n            }\n          >\n            {resolvedItems.map((item) => {\n              const isActive = activeKey === item.key;\n              // For editable-card, closable defaults to true unless explicitly set to false\n              const showClose = isEditable && item.closable !== false;\n\n              return (\n                <div\n                  key={item.key}\n                  className={cn(\n                    // antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器\n                    'ald-tabs-tab ant-tabs-tab tw-relative tw-flex tw-shrink-0 tw-cursor-pointer tw-items-center tw-gap-2 tw-whitespace-nowrap tw-transition-colors',\n                    isVertical && 'tw-w-full tw-self-stretch',\n                    // Card / editable-card styling\n                    isCard\n                      ? cn(\n                          'tw-h-10 tw-rounded-t-[6px] tw-border tw-border-b-0 tw-border-solid tw-px-4 tw-text-sm tw-leading-5',\n                          'tw-gap-sp-75',\n                          isActive\n                            ? 'tw-border-[var(--border-default)] tw-bg-[var(--background-default)] tw-font-medium tw-text-[var(--content-brand-primary)]'\n                            : 'tw-border-[var(--border-default)] tw-bg-[var(--background-default)] tw-text-[var(--content-secondary)] hover:tw-text-inherit',\n                        )\n                      : cn(\n                          size === 'small'\n                            ? 'tw-py-2 tw-text-xs tw-leading-4'\n                            : 'tw-py-2.5 tw-text-sm tw-leading-5',\n                          monospace && 'tw-justify-center',\n                          isActive\n                            ? 'tw-font-medium tw-text-[var(--content-brand-primary)]'\n                            : 'tw-font-medium tw-text-[var(--content-secondary)] hover:tw-text-inherit',\n                        ),\n                    item.disabled &&\n                      'tw-pointer-events-none tw-cursor-default tw-opacity-50',\n                  )}\n                  onClick={\n                    item.disabled\n                      ? undefined\n                      : (e) => handleTabClick(item.key, e)\n                  }\n                >\n                  {item.icon}\n                  {/* antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器 */}\n                  <span className=\"ant-tabs-tab-btn\">{item.label}</span>\n                  {/* Close button for editable-card */}\n                  {showClose && (\n                    <span\n                      className=\"ald-tabs-tab-remove tw-m-0 tw-grid tw-size-4 tw-cursor-pointer tw-place-items-center tw-p-0 tw-text-[var(--content-secondary)] tw-transition-colors hover:tw-text-[var(--content-primary)]\"\n                      onClick={(e) => handleRemove(item.key, e)}\n                      aria-label={`Remove ${item.label}`}\n                    >\n                      <CloseLightLine size={12} />\n                    </span>\n                  )}\n                  {/* Active indicator for non-card line tabs */}\n                  {/* antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器 */}\n                  {!isCard && isActive && isTop && (\n                    <div className=\"ant-tabs-ink-bar tw-absolute tw-inset-x-0 tw--bottom-px tw-h-[2px] tw-rounded-[2px] tw-bg-[var(--border-brand-strong)]\" />\n                  )}\n                  {!isCard && isActive && isBottom && (\n                    <div className=\"ant-tabs-ink-bar tw-absolute tw-inset-x-0 tw--top-px tw-h-[2px] tw-rounded-[2px] tw-bg-[var(--border-brand-strong)]\" />\n                  )}\n                  {!isCard && isActive && isLeft && (\n                    <div className=\"tw-absolute tw-inset-y-0 tw--right-px tw-w-[2px] tw-rounded-[2px] tw-bg-[var(--border-brand-strong)]\" />\n                  )}\n                  {!isCard && isActive && isRight && (\n                    <div className=\"tw-absolute tw-inset-y-0 tw--left-px tw-w-[2px] tw-rounded-[2px] tw-bg-[var(--border-brand-strong)]\" />\n                  )}\n                </div>\n              );\n            })}\n          </div>\n        </div>\n\n        {/* Scroll right button */}\n        {showScrollButtons && !isVertical && (\n          <button\n            type=\"button\"\n            className={cn(\n              'ald-tabs-scroll-btn tw-flex tw-shrink-0 tw-items-center tw-justify-center tw-border-none tw-bg-[var(--action-ghost-normal)] tw-p-1 tw-text-[var(--content-secondary)] tw-transition-colors hover:tw-text-[var(--content-primary)]',\n              !canScrollRight && 'tw-invisible',\n            )}\n            onClick={() => scrollBy(200)}\n            aria-label=\"Scroll tabs right\"\n          >\n            <ChevronRightLine size={16} />\n          </button>\n        )}\n\n        {/* Add button for editable-card */}\n        {isEditable && !hideAdd && (\n          <button\n            type=\"button\"\n            className=\"ald-tabs-nav-add tw-ml-1 tw-flex tw-shrink-0 tw-cursor-pointer tw-items-center tw-justify-center tw-rounded tw-border tw-border-solid tw-border-[var(--border-default)] tw-bg-[var(--background-default)] tw-px-2 tw-py-1 tw-text-[var(--content-secondary)] tw-transition-colors hover:tw-text-[var(--content-primary)]\"\n            onClick={handleAdd}\n            aria-label=\"Add tab\"\n          >\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"14\"\n              height=\"14\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth=\"2\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n            >\n              <line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\" />\n              <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\" />\n            </svg>\n          </button>\n        )}\n\n        {extraRight}\n      </div>\n\n      {/* Tab content */}\n      {/* antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器 */}\n      <div\n        className={cn(\n          'ald-tabs-content ant-tabs-content ant-tabs-content-holder tw-min-h-0 tw-flex-1',\n          adaptHeight && 'tw-h-full',\n        )}\n        style={\n          paddingVal\n            ? { padding: `0 ${paddingVal}px ${paddingVal}px` }\n            : undefined\n        }\n      >\n        {resolvedItems.map((item) => {\n          const isActive = item.key === activeKey;\n          if (!isActive && destroyInactiveTabPane && !item.forceRender) {\n            return null;\n          }\n          return (\n            <div\n              key={item.key}\n              className={cn(\n                // antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器\n                'ald-tabs-tabpane ant-tabs-tabpane',\n                // v2 行为：adaptHeight 时 tabpane 撑满内容区，子元素的百分比高度才能解析\n                adaptHeight && 'tw-h-full tw-overflow-y-auto',\n                isActive ? 'ant-tabs-tabpane-active tw-block' : 'tw-hidden',\n              )}\n              role=\"tabpanel\"\n            >\n              {item.children}\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n\nTabs.TabPane = TabPane;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/Tabs/index.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { cn } from '../lib/utils';\nimport { ChevronLeftLine, ChevronRightLine, CloseLightLine } from '../Icon';\nimport TabPane from './TabPane';\n\nexport type TabsSize = 'default' | 'small';\n\ninterface TabItem {\n  key: string;\n  label: React.ReactNode;\n  children?: React.ReactNode;\n  disabled?: boolean;\n  closable?: boolean;\n  icon?: React.ReactNode;\n  forceRender?: boolean;\n  className?: string;\n}\n\nexport interface ITabsProps {\n  size?: TabsSize;\n  activeKey?: string;\n  defaultActiveKey?: string;\n  onChange?: (activeKey: string) => void;\n  onTabClick?: (activeKey: string, e: React.MouseEvent) => void;\n  destroyInactiveTabPane?: boolean;\n  centered?: boolean;\n  adaptHeight?: boolean;\n  tabPosition?: 'left' | 'right' | 'top' | 'bottom';\n  className?: string;\n  children?: React.ReactNode;\n  headerBackgroundColor?: string;\n  monospace?: boolean;\n  padding?: boolean | number;\n  compact?: boolean;\n  hasDividing?: boolean;\n  items?: TabItem[];\n  type?: 'line' | 'card' | 'editable-card';\n  tabBarExtraContent?:\n    | React.ReactNode\n    | { left?: React.ReactNode; right?: React.ReactNode };\n  onEdit?: (\n    targetKey: string | React.MouseEvent | React.KeyboardEvent,\n    action: 'add' | 'remove',\n  ) => void;\n  hideAdd?: boolean;\n  style?: React.CSSProperties;\n  tabBarStyle?: React.CSSProperties;\n  popupClassName?: string;\n  tabBarGutter?: number;\n  moreIcon?: React.ReactNode;\n  /** 透传到 Tabs 根容器的 data-testid，用于自动化测试定位 */\n  'data-testid'?: string;\n  /** 透传到 tablist 的 aria-label，用于可访问性与自动化测试定位 */\n  'aria-label'?: string;\n}\n\nexport default function Tabs(props: ITabsProps) {\n  const {\n    size,\n    className,\n    adaptHeight,\n    style = {},\n    monospace: propsMonospace,\n    tabPosition = 'top',\n    padding: propsPadding = false,\n    compact,\n    hasDividing = true,\n    items,\n    activeKey: controlledActiveKey,\n    defaultActiveKey,\n    onChange,\n    onTabClick,\n    destroyInactiveTabPane,\n    centered,\n    tabBarExtraContent,\n    headerBackgroundColor,\n    children,\n    type,\n    onEdit,\n    hideAdd,\n    tabBarStyle,\n    'data-testid': dataTestId,\n    'aria-label': ariaLabel,\n  } = props;\n\n  const isEditable = type === 'editable-card';\n  const isCard = type === 'card' || type === 'editable-card';\n\n  // Derive items from children if not provided\n  const resolvedItems: TabItem[] = useMemo(() => {\n    if (items) return items;\n    return React.Children.toArray(children)\n      .filter(React.isValidElement)\n      .map((child: any) => ({\n        key: child.key || child.props.key || '',\n        label: child.props.tab,\n        children: child.props.children,\n        disabled: child.props.disabled,\n        closable: child.props.closable,\n        forceRender: child.props.forceRender,\n      }));\n  }, [items, children]);\n\n  const firstKey = resolvedItems[0]?.key || '';\n  const [innerActiveKey, setInnerActiveKey] = useState(\n    defaultActiveKey || firstKey,\n  );\n  const mergedActiveKey =\n    controlledActiveKey !== undefined ? controlledActiveKey : innerActiveKey;\n  const activeKey = resolvedItems.some((item) => item.key === mergedActiveKey)\n    ? mergedActiveKey\n    : firstKey;\n\n  const tabsId = React.useId();\n  const tabRefs = useRef<Record<string, HTMLDivElement | null>>({});\n  const pendingFocusKeyRef = useRef<string | null>(null);\n  const getPreferredFocusKey = useCallback(\n    (items: TabItem[] = resolvedItems) =>\n      items.find((item) => item.key === activeKey && !item.disabled)?.key ||\n      items.find((item) => !item.disabled)?.key ||\n      '',\n    [activeKey, resolvedItems],\n  );\n  const [focusedKey, setFocusedKey] = useState(() => getPreferredFocusKey());\n\n  const getTabId = (key: string) => `${tabsId}-tab-${key}`;\n  const getPanelId = (key: string) => `${tabsId}-panel-${key}`;\n\n  const focusTab = useCallback((key: string) => {\n    setFocusedKey(key);\n    tabRefs.current[key]?.focus();\n  }, []);\n\n  useEffect(() => {\n    const pendingFocusKey = pendingFocusKeyRef.current;\n    if (\n      pendingFocusKey &&\n      resolvedItems.some(\n        (item) => item.key === pendingFocusKey && !item.disabled,\n      )\n    ) {\n      pendingFocusKeyRef.current = null;\n      focusTab(pendingFocusKey);\n      return;\n    }\n\n    setFocusedKey((currentFocusedKey) => {\n      const focusedItem = resolvedItems.find(\n        (item) => item.key === currentFocusedKey,\n      );\n      return focusedItem && !focusedItem.disabled\n        ? currentFocusedKey\n        : getPreferredFocusKey();\n    });\n  }, [focusTab, getPreferredFocusKey, resolvedItems]);\n\n  const activateTab = useCallback(\n    (key: string) => {\n      if (controlledActiveKey === undefined) {\n        setInnerActiveKey(key);\n      }\n      onChange?.(key);\n    },\n    [controlledActiveKey, onChange],\n  );\n\n  const handleTabClick = (key: string, e: React.MouseEvent) => {\n    setFocusedKey(key);\n    activateTab(key);\n    onTabClick?.(key, e);\n  };\n\n  const handleRemove = (key: string, e: React.MouseEvent) => {\n    e.stopPropagation();\n    const itemIndex = resolvedItems.findIndex((item) => item.key === key);\n    const nextFocusableItem = [\n      ...resolvedItems.slice(itemIndex + 1),\n      ...resolvedItems.slice(0, itemIndex).reverse(),\n    ].find((item) => !item.disabled);\n    pendingFocusKeyRef.current = nextFocusableItem?.key || null;\n    onEdit?.(key, 'remove');\n  };\n\n  const handleTabKeyDown = (\n    item: TabItem,\n    e: React.KeyboardEvent<HTMLDivElement>,\n  ) => {\n    const enabledItems = resolvedItems.filter(\n      (candidate) => !candidate.disabled,\n    );\n    const currentIndex = enabledItems.findIndex(\n      (candidate) => candidate.key === item.key,\n    );\n    if (currentIndex === -1) return;\n\n    let nextIndex: number | undefined;\n    if (\n      (!isVertical && e.key === 'ArrowRight') ||\n      (isVertical && e.key === 'ArrowDown')\n    ) {\n      nextIndex = (currentIndex + 1) % enabledItems.length;\n    } else if (\n      (!isVertical && e.key === 'ArrowLeft') ||\n      (isVertical && e.key === 'ArrowUp')\n    ) {\n      nextIndex =\n        (currentIndex - 1 + enabledItems.length) % enabledItems.length;\n    } else if (e.key === 'Home') {\n      nextIndex = 0;\n    } else if (e.key === 'End') {\n      nextIndex = enabledItems.length - 1;\n    }\n\n    if (nextIndex !== undefined) {\n      e.preventDefault();\n      focusTab(enabledItems[nextIndex].key);\n      return;\n    }\n\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      activateTab(item.key);\n    }\n  };\n\n  const handleAdd = (e: React.MouseEvent) => {\n    onEdit?.(e, 'add');\n  };\n\n  const monospace = tabPosition !== 'top' ? false : propsMonospace;\n  const paddingVal = useMemo(() => {\n    if (tabPosition !== 'top') return 0;\n    if (typeof propsPadding === 'number') return propsPadding;\n    if (typeof propsPadding === 'boolean' && propsPadding) return 20;\n    return 0;\n  }, [propsPadding, tabPosition]);\n\n  const isTop = tabPosition === 'top';\n  const isBottom = tabPosition === 'bottom';\n  const isLeft = tabPosition === 'left';\n  const isRight = tabPosition === 'right';\n  const isVertical = tabPosition === 'left' || tabPosition === 'right';\n  const rootDirectionClass = isRight\n    ? 'tw-flex-row-reverse'\n    : isLeft\n    ? 'tw-flex-row'\n    : isBottom\n    ? 'tw-flex-col-reverse'\n    : 'tw-flex-col';\n\n  const extraLeft =\n    tabBarExtraContent &&\n    typeof tabBarExtraContent === 'object' &&\n    'left' in tabBarExtraContent\n      ? tabBarExtraContent.left\n      : null;\n  const extraRight = tabBarExtraContent\n    ? typeof tabBarExtraContent === 'object' && 'right' in tabBarExtraContent\n      ? tabBarExtraContent.right\n      : React.isValidElement(tabBarExtraContent)\n      ? tabBarExtraContent\n      : null\n    : null;\n\n  // Scroll state for overflow\n  const navListRef = useRef<HTMLDivElement>(null);\n  const [canScrollLeft, setCanScrollLeft] = useState(false);\n  const [canScrollRight, setCanScrollRight] = useState(false);\n\n  const checkScroll = useCallback(() => {\n    const el = navListRef.current;\n    if (!el || isVertical) {\n      setCanScrollLeft(false);\n      setCanScrollRight(false);\n      return;\n    }\n    const { scrollLeft, scrollWidth, clientWidth } = el;\n    setCanScrollLeft(scrollLeft > 1);\n    setCanScrollRight(scrollLeft + clientWidth < scrollWidth - 1);\n  }, [isVertical]);\n\n  useEffect(() => {\n    checkScroll();\n    const el = navListRef.current;\n    if (!el) return;\n    // Use ResizeObserver to detect size changes\n    let ro: ResizeObserver | undefined;\n    if (typeof ResizeObserver !== 'undefined') {\n      ro = new ResizeObserver(() => checkScroll());\n      ro.observe(el);\n    }\n    el.addEventListener('scroll', checkScroll, { passive: true });\n    return () => {\n      el.removeEventListener('scroll', checkScroll);\n      ro?.disconnect();\n    };\n  }, [checkScroll, resolvedItems.length]);\n\n  const scrollBy = (delta: number) => {\n    const el = navListRef.current;\n    if (el) {\n      el.scrollBy({ left: delta, behavior: 'smooth' });\n    }\n  };\n\n  const showScrollButtons = canScrollLeft || canScrollRight;\n\n  return (\n    <div\n      data-testid={dataTestId}\n      className={cn(\n        // antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器\n        'ald-tabs ant-tabs tw-flex',\n        rootDirectionClass,\n        adaptHeight && 'ald-adapt-height tw-h-full',\n        size !== 'small' && 'ald-tabs-default',\n        monospace && 'ald-tabs-monospace',\n        compact && 'ald-tabs-compact',\n        !hasDividing && 'ald-tabs-no-dividing',\n        className,\n      )}\n      style={\n        {\n          ...style,\n          '--header-bg-color': headerBackgroundColor,\n          '--tabs-padding': `${paddingVal}px`,\n        } as React.CSSProperties\n      }\n    >\n      {/* Tab nav */}\n      <div\n        className={cn(\n          // antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器\n          'ald-tabs-nav ant-tabs-nav tw-flex',\n          isVertical ? 'tw-shrink-0 tw-items-stretch' : 'tw-items-center',\n          isTop && 'tw-mb-5',\n          isBottom && 'tw-mt-5',\n          isTop &&\n            hasDividing &&\n            'tw-border-0 tw-border-b tw-border-solid tw-border-b-[var(--border-default)]',\n          isBottom &&\n            hasDividing &&\n            'tw-border-0 tw-border-t tw-border-solid tw-border-t-[var(--border-default)]',\n          isTop && compact && '!tw-mb-0',\n          isBottom && compact && '!tw-mt-0',\n          isLeft &&\n            'tw-flex-col tw-border-0 tw-border-r tw-border-solid tw-border-r-[var(--border-default)]',\n          isRight &&\n            'tw-flex-col tw-border-0 tw-border-l tw-border-solid tw-border-l-[var(--border-default)]',\n        )}\n        style={\n          headerBackgroundColor || tabBarStyle\n            ? {\n                ...tabBarStyle,\n                ...(headerBackgroundColor\n                  ? { backgroundColor: headerBackgroundColor }\n                  : {}),\n              }\n            : undefined\n        }\n      >\n        {extraLeft}\n\n        {/* Scroll left button */}\n        {showScrollButtons && !isVertical && (\n          <button\n            type=\"button\"\n            className={cn(\n              'ald-tabs-scroll-btn tw-flex tw-shrink-0 tw-items-center tw-justify-center tw-border-none tw-bg-[var(--action-ghost-normal)] tw-p-1 tw-text-[var(--content-secondary)] tw-transition-colors hover:tw-text-[var(--content-primary)]',\n              !canScrollLeft && 'tw-invisible',\n            )}\n            onClick={() => scrollBy(-200)}\n            aria-label=\"Scroll tabs left\"\n          >\n            <ChevronLeftLine size={16} />\n          </button>\n        )}\n\n        <div\n          className={cn(\n            'ald-tabs-nav-wrap ant-tabs-nav-wrap',\n            isVertical\n              ? 'tw-w-full tw-shrink-0 tw-self-stretch'\n              : 'tw-min-w-0 tw-flex-1',\n          )}\n          style={paddingVal ? { margin: `0 ${paddingVal}px` } : undefined}\n        >\n          <div\n            ref={navListRef}\n            role=\"tablist\"\n            aria-label={ariaLabel}\n            aria-orientation={isVertical ? 'vertical' : 'horizontal'}\n            onBlur={(e) => {\n              if (!e.currentTarget.contains(e.relatedTarget as Node | null)) {\n                setFocusedKey(getPreferredFocusKey());\n              }\n            }}\n            className={cn(\n              // antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器\n              'ald-tabs-nav-list ant-tabs-nav-list tw-flex tw-overflow-hidden',\n              isVertical && 'tw-w-full tw-shrink-0 tw-flex-col tw-self-stretch',\n              centered && !isVertical && 'tw-justify-center',\n              monospace && '[&>*]:tw-flex-1',\n              isCard ? 'tw-gap-1' : !isVertical && !monospace && 'tw-gap-8',\n            )}\n            style={\n              !isVertical\n                ? { scrollbarWidth: 'none', msOverflowStyle: 'none' }\n                : undefined\n            }\n          >\n            {resolvedItems.map((item) => {\n              const isActive = activeKey === item.key;\n              // For editable-card, closable defaults to true unless explicitly set to false\n              const showClose = isEditable && item.closable !== false;\n              const closeLabel =\n                typeof item.label === 'string' || typeof item.label === 'number'\n                  ? `Remove ${item.label}`\n                  : 'Remove tab';\n\n              return (\n                <div\n                  key={item.key}\n                  className={cn(\n                    // antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器\n                    'ald-tabs-tab ant-tabs-tab tw-relative tw-flex tw-shrink-0 tw-items-center tw-gap-2 tw-whitespace-nowrap tw-transition-colors',\n                    isVertical && 'tw-w-full tw-self-stretch',\n                    // Card / editable-card styling\n                    isCard\n                      ? cn(\n                          'tw-h-10 tw-rounded-t-[6px] tw-border tw-border-b-0 tw-border-solid tw-px-4 tw-text-sm tw-leading-5',\n                          'tw-gap-sp-75',\n                          isActive\n                            ? 'tw-border-[var(--border-default)] tw-bg-[var(--background-default)] tw-font-medium tw-text-[var(--content-brand-primary)]'\n                            : 'tw-border-[var(--border-default)] tw-bg-[var(--background-default)] tw-text-[var(--content-secondary)] hover:tw-text-inherit',\n                        )\n                      : cn(\n                          size === 'small'\n                            ? 'tw-py-2 tw-text-xs tw-leading-4'\n                            : 'tw-py-2.5 tw-text-sm tw-leading-5',\n                          monospace && 'tw-justify-center',\n                          isActive\n                            ? 'tw-font-medium tw-text-[var(--content-brand-primary)]'\n                            : 'tw-font-medium tw-text-[var(--content-secondary)] hover:tw-text-inherit',\n                        ),\n                    item.disabled &&\n                      'tw-pointer-events-none tw-cursor-default tw-opacity-50',\n                  )}\n                >\n                  <div\n                    ref={(node) => {\n                      tabRefs.current[item.key] = node;\n                    }}\n                    id={getTabId(item.key)}\n                    role=\"tab\"\n                    aria-selected={isActive}\n                    aria-controls={getPanelId(item.key)}\n                    aria-disabled={item.disabled || undefined}\n                    tabIndex={\n                      !item.disabled && focusedKey === item.key ? 0 : -1\n                    }\n                    className={cn(\n                      'ald-tabs-tab-trigger tw-flex tw-min-w-0 tw-flex-1 tw-cursor-pointer tw-items-center tw-whitespace-nowrap',\n                      isCard ? 'tw-gap-sp-75' : 'tw-gap-2',\n                      monospace && 'tw-justify-center',\n                    )}\n                    onClick={\n                      item.disabled\n                        ? undefined\n                        : (e) => handleTabClick(item.key, e)\n                    }\n                    onFocus={() => setFocusedKey(item.key)}\n                    onKeyDown={(e) => handleTabKeyDown(item, e)}\n                  >\n                    {item.icon}\n                    {/* antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器 */}\n                    <span className=\"ant-tabs-tab-btn\">{item.label}</span>\n                  </div>\n                  {/* Close button for editable-card */}\n                  {showClose && (\n                    <button\n                      type=\"button\"\n                      className=\"ald-tabs-tab-remove tw-m-0 tw-grid tw-size-4 tw-cursor-pointer tw-place-items-center tw-border-0 tw-bg-transparent tw-p-0 tw-text-[var(--content-secondary)] tw-transition-colors hover:tw-text-[var(--content-primary)]\"\n                      onClick={(e) => handleRemove(item.key, e)}\n                      aria-label={closeLabel}\n                    >\n                      <CloseLightLine size={12} />\n                    </button>\n                  )}\n                  {/* Active indicator for non-card line tabs */}\n                  {/* antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器 */}\n                  {!isCard && isActive && isTop && (\n                    <div className=\"ant-tabs-ink-bar tw-absolute tw-inset-x-0 tw--bottom-px tw-h-[2px] tw-rounded-[2px] tw-bg-[var(--border-brand-strong)]\" />\n                  )}\n                  {!isCard && isActive && isBottom && (\n                    <div className=\"ant-tabs-ink-bar tw-absolute tw-inset-x-0 tw--top-px tw-h-[2px] tw-rounded-[2px] tw-bg-[var(--border-brand-strong)]\" />\n                  )}\n                  {!isCard && isActive && isLeft && (\n                    <div className=\"tw-absolute tw-inset-y-0 tw--right-px tw-w-[2px] tw-rounded-[2px] tw-bg-[var(--border-brand-strong)]\" />\n                  )}\n                  {!isCard && isActive && isRight && (\n                    <div className=\"tw-absolute tw-inset-y-0 tw--left-px tw-w-[2px] tw-rounded-[2px] tw-bg-[var(--border-brand-strong)]\" />\n                  )}\n                </div>\n              );\n            })}\n          </div>\n        </div>\n\n        {/* Scroll right button */}\n        {showScrollButtons && !isVertical && (\n          <button\n            type=\"button\"\n            className={cn(\n              'ald-tabs-scroll-btn tw-flex tw-shrink-0 tw-items-center tw-justify-center tw-border-none tw-bg-[var(--action-ghost-normal)] tw-p-1 tw-text-[var(--content-secondary)] tw-transition-colors hover:tw-text-[var(--content-primary)]',\n              !canScrollRight && 'tw-invisible',\n            )}\n            onClick={() => scrollBy(200)}\n            aria-label=\"Scroll tabs right\"\n          >\n            <ChevronRightLine size={16} />\n          </button>\n        )}\n\n        {/* Add button for editable-card */}\n        {isEditable && !hideAdd && (\n          <button\n            type=\"button\"\n            className=\"ald-tabs-nav-add tw-ml-1 tw-flex tw-shrink-0 tw-cursor-pointer tw-items-center tw-justify-center tw-rounded tw-border tw-border-solid tw-border-[var(--border-default)] tw-bg-[var(--background-default)] tw-px-2 tw-py-1 tw-text-[var(--content-secondary)] tw-transition-colors hover:tw-text-[var(--content-primary)]\"\n            onClick={handleAdd}\n            aria-label=\"Add tab\"\n          >\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"14\"\n              height=\"14\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth=\"2\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n            >\n              <line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\" />\n              <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\" />\n            </svg>\n          </button>\n        )}\n\n        {extraRight}\n      </div>\n\n      {/* Tab content */}\n      {/* antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器 */}\n      <div\n        className={cn(\n          'ald-tabs-content ant-tabs-content ant-tabs-content-holder tw-min-h-0 tw-flex-1',\n          adaptHeight && 'tw-h-full',\n        )}\n        style={\n          paddingVal\n            ? { padding: `0 ${paddingVal}px ${paddingVal}px` }\n            : undefined\n        }\n      >\n        {resolvedItems.map((item) => {\n          const isActive = item.key === activeKey;\n          if (!isActive && destroyInactiveTabPane && !item.forceRender) {\n            return null;\n          }\n          return (\n            <div\n              key={item.key}\n              className={cn(\n                // antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器\n                'ald-tabs-tabpane ant-tabs-tabpane',\n                // v2 行为：adaptHeight 时 tabpane 撑满内容区，子元素的百分比高度才能解析\n                adaptHeight && 'tw-h-full tw-overflow-y-auto',\n                isActive ? 'ant-tabs-tabpane-active tw-block' : 'tw-hidden',\n              )}\n              role=\"tabpanel\"\n              id={getPanelId(item.key)}\n              aria-labelledby={getTabId(item.key)}\n            >\n              {item.children}\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n\nTabs.TabPane = TabPane;\n"],"mappings":"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"}

package/dist/Tour/index.js

@@ -1,6 +1,6 @@
 import { cn } from "../lib/utils.js";
-import Button_default from "../Button/index.js";
 import { FloatingLayerProvider, useFloatingLayer } from "../_utils/floatingLayer.js";
+import Button_default from "../Button/index.js";
 import { useEffect, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/Tour/index.tsx

package/dist/Typography/index.js

@@ -36,7 +36,7 @@ function CopyButton({ copyable, children }) {
 	});
 }
 var Typography = ({ className, style, children }) => /* @__PURE__ */ jsx("article", {
-	className: cn("ald-typography", className),
+	className: cn("ald-typography tw-text-typography-body-reading", className),
 	style,
 	children
 });
@@ -50,7 +50,7 @@ Typography.Text = ({ className, style, children, strong, italic, underline, code
 	if (italic) content = /* @__PURE__ */ jsx("i", { children: content });
 	if (strong) content = /* @__PURE__ */ jsx("strong", { children: content });
 	return /* @__PURE__ */ jsxs("span", {
-		className: cn("ald-typography-text", disabled && "tw-cursor-not-allowed tw-opacity-50", type === "secondary" && "tw-text-[var(--content-secondary)]", type === "success" && "tw-text-[var(--content-positive-primary)]", type === "warning" && "tw-text-[var(--content-warning-primary)]", type === "danger" && "tw-text-[var(--content-negative-primary)]", isEllipsis && (ellipsisRows ? "tw-overflow-hidden" : "tw-truncate"), className),
+		className: cn("ald-typography-text tw-text-typography-body-reading", disabled && "tw-cursor-not-allowed tw-opacity-50", type === "secondary" && "tw-text-[var(--content-secondary)]", type === "success" && "tw-text-[var(--content-positive-primary)]", type === "warning" && "tw-text-[var(--content-warning-primary)]", type === "danger" && "tw-text-[var(--content-negative-primary)]", isEllipsis && (ellipsisRows ? "tw-overflow-hidden" : "tw-truncate"), className),
 		style: {
 			...style,
 			...ellipsisRows ? {
@@ -68,7 +68,7 @@ Typography.Text = ({ className, style, children, strong, italic, underline, code
 };
 Typography.Title = ({ className, style, children, level = 1, ellipsis, ...rest }) => {
 	return /* @__PURE__ */ jsx(`h${level}`, {
-		className: cn("ald-typography-title tw-font-semibold tw-text-[var(--content-primary)]", Boolean(ellipsis) && "tw-truncate", className),
+		className: cn("ald-typography-title tw-text-[var(--content-primary)] tw-text-typography-heading", Boolean(ellipsis) && "tw-truncate", className),
 		style,
 		...rest,
 		children
@@ -78,7 +78,7 @@ Typography.Paragraph = ({ className, style, children, ellipsis, copyable, ...res
 	const isEllipsis = Boolean(ellipsis);
 	const ellipsisRows = typeof ellipsis === "object" ? ellipsis.rows : void 0;
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn("ald-typography-paragraph", isEllipsis && (ellipsisRows ? "tw-overflow-hidden" : "tw-truncate"), className),
+		className: cn("ald-typography-paragraph tw-text-typography-body-reading", isEllipsis && (ellipsisRows ? "tw-overflow-hidden" : "tw-truncate"), className),
 		style: {
 			...style,
 			...ellipsisRows ? {
@@ -95,7 +95,7 @@ Typography.Paragraph = ({ className, style, children, ellipsis, copyable, ...res
 	});
 };
 Typography.Link = ({ className, style, children, href, target, ...rest }) => /* @__PURE__ */ jsx("a", {
-	className: cn("ald-typography-link tw-text-[var(--content-brand-secondary)] hover:tw-text-[var(--content-brand-primary)]", className),
+	className: cn("ald-typography-link tw-text-[var(--content-brand-secondary)] tw-text-typography-body-reading hover:tw-text-[var(--content-brand-primary)]", className),
 	style,
 	href,
 	target,

package/dist/Typography/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/Typography/index.tsx"],"sourcesContent":["import React, { useCallback, useState } from 'react';\nimport { cn } from '../lib/utils';\n\nexport interface TypographyProps {\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n}\n\ninterface TypographyComponent extends React.FC<TypographyProps> {\n  Text: React.FC<TextProps>;\n  Title: React.FC<TitleProps>;\n  Paragraph: React.FC<ParagraphProps>;\n  Link: React.FC<LinkProps>;\n}\n\ninterface CopyableConfig {\n  text?: string;\n  onCopy?: () => void;\n  tooltips?: [React.ReactNode, React.ReactNode];\n}\n\ntype EllipsisConfig = boolean | { rows?: number };\n\ninterface TextProps\n  extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'type'> {\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n  strong?: boolean;\n  italic?: boolean;\n  underline?: boolean;\n  delete?: boolean;\n  code?: boolean;\n  disabled?: boolean;\n  type?: 'secondary' | 'success' | 'warning' | 'danger';\n  ellipsis?: EllipsisConfig;\n  copyable?: boolean | CopyableConfig;\n}\n\ninterface TitleProps extends React.HTMLAttributes<HTMLHeadingElement> {\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n  level?: 1 | 2 | 3 | 4 | 5;\n  ellipsis?: EllipsisConfig;\n}\n\ninterface ParagraphProps extends React.HTMLAttributes<HTMLDivElement> {\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n  ellipsis?: EllipsisConfig;\n  copyable?: boolean | CopyableConfig;\n}\n\ninterface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n  href?: string;\n  target?: string;\n}\n\nfunction CopyButton({\n  copyable,\n  children,\n}: {\n  copyable: boolean | CopyableConfig;\n  children: React.ReactNode;\n}) {\n  const [copied, setCopied] = useState(false);\n\n  const handleCopy = useCallback(() => {\n    const config =\n      typeof copyable === 'object' ? copyable : ({} as CopyableConfig);\n    const textToCopy =\n      config.text ?? (typeof children === 'string' ? children : '');\n    navigator.clipboard.writeText(String(textToCopy)).then(() => {\n      setCopied(true);\n      config.onCopy?.();\n      setTimeout(() => setCopied(false), 2000);\n    });\n  }, [copyable, children]);\n\n  return (\n    <span\n      role=\"button\"\n      tabIndex={0}\n      className=\"ald-typography-copy tw-ml-1 tw-inline-flex tw-cursor-pointer tw-align-middle tw-text-[var(--content-secondary)] hover:tw-text-[var(--content-primary)]\"\n      onClick={handleCopy}\n      onKeyDown={(e) => {\n        if (e.key === 'Enter' || e.key === ' ') handleCopy();\n      }}\n      aria-label=\"Copy\"\n    >\n      {copied ? (\n        <span className=\"tw-text-xs tw-text-[var(--content-positive-primary)]\">\n          Copied!\n        </span>\n      ) : (\n        <svg\n          viewBox=\"0 0 16 16\"\n          width=\"1em\"\n          height=\"1em\"\n          fill=\"currentColor\"\n          aria-hidden=\"true\"\n        >\n          <path d=\"M4 2a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V2zm2-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H6z\" />\n          <path d=\"M2 4a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-1h1v1a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h1v1H2z\" />\n        </svg>\n      )}\n    </span>\n  );\n}\n\nconst Typography: TypographyComponent = ({ className, style, children }) => (\n  <article className={cn('ald-typography', className)} style={style}>\n    {children}\n  </article>\n);\n\nTypography.Text = ({\n  className,\n  style,\n  children,\n  strong,\n  italic,\n  underline,\n  code,\n  disabled,\n  type,\n  ellipsis,\n  copyable,\n  delete: del,\n  ...rest\n}) => {\n  const isEllipsis = Boolean(ellipsis);\n  const ellipsisRows = typeof ellipsis === 'object' ? ellipsis.rows : undefined;\n  let content: React.ReactNode = children;\n  if (code) content = <code>{content}</code>;\n  if (del) content = <del>{content}</del>;\n  if (underline) content = <u>{content}</u>;\n  if (italic) content = <i>{content}</i>;\n  if (strong) content = <strong>{content}</strong>;\n\n  return (\n    <span\n      className={cn(\n        'ald-typography-text',\n        disabled && 'tw-cursor-not-allowed tw-opacity-50',\n        type === 'secondary' && 'tw-text-[var(--content-secondary)]',\n        type === 'success' && 'tw-text-[var(--content-positive-primary)]',\n        type === 'warning' && 'tw-text-[var(--content-warning-primary)]',\n        type === 'danger' && 'tw-text-[var(--content-negative-primary)]',\n        isEllipsis && (ellipsisRows ? 'tw-overflow-hidden' : 'tw-truncate'),\n        className,\n      )}\n      style={{\n        ...style,\n        ...(ellipsisRows\n          ? {\n              display: '-webkit-box',\n              WebkitLineClamp: ellipsisRows,\n              WebkitBoxOrient: 'vertical',\n            }\n          : {}),\n      }}\n      {...rest}\n    >\n      {content}\n      {copyable && <CopyButton copyable={copyable}>{children}</CopyButton>}\n    </span>\n  );\n};\n\nTypography.Title = ({\n  className,\n  style,\n  children,\n  level = 1,\n  ellipsis,\n  ...rest\n}) => {\n  const Tag = `h${level}` as React.ElementType;\n  const isEllipsis = Boolean(ellipsis);\n  return (\n    <Tag\n      className={cn(\n        'ald-typography-title tw-font-semibold tw-text-[var(--content-primary)]',\n        isEllipsis && 'tw-truncate',\n        className,\n      )}\n      style={style}\n      {...rest}\n    >\n      {children}\n    </Tag>\n  );\n};\n\nTypography.Paragraph = ({\n  className,\n  style,\n  children,\n  ellipsis,\n  copyable,\n  ...rest\n}) => {\n  const isEllipsis = Boolean(ellipsis);\n  const ellipsisRows = typeof ellipsis === 'object' ? ellipsis.rows : undefined;\n\n  return (\n    <div\n      className={cn(\n        'ald-typography-paragraph',\n        isEllipsis && (ellipsisRows ? 'tw-overflow-hidden' : 'tw-truncate'),\n        className,\n      )}\n      style={{\n        ...style,\n        ...(ellipsisRows\n          ? {\n              display: '-webkit-box',\n              WebkitLineClamp: ellipsisRows,\n              WebkitBoxOrient: 'vertical',\n            }\n          : {}),\n      }}\n      {...rest}\n    >\n      {children}\n      {copyable && <CopyButton copyable={copyable}>{children}</CopyButton>}\n    </div>\n  );\n};\n\nTypography.Link = ({ className, style, children, href, target, ...rest }) => (\n  <a\n    className={cn(\n      'ald-typography-link tw-text-[var(--content-brand-secondary)] hover:tw-text-[var(--content-brand-primary)]',\n      className,\n    )}\n    style={style}\n    href={href}\n    target={target}\n    {...rest}\n  >\n    {children}\n  </a>\n);\n\nexport default Typography;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/Typography/index.tsx"],"sourcesContent":["import React, { useCallback, useState } from 'react';\nimport { cn } from '../lib/utils';\n\nexport interface TypographyProps {\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n}\n\ninterface TypographyComponent extends React.FC<TypographyProps> {\n  Text: React.FC<TextProps>;\n  Title: React.FC<TitleProps>;\n  Paragraph: React.FC<ParagraphProps>;\n  Link: React.FC<LinkProps>;\n}\n\ninterface CopyableConfig {\n  text?: string;\n  onCopy?: () => void;\n  tooltips?: [React.ReactNode, React.ReactNode];\n}\n\ntype EllipsisConfig = boolean | { rows?: number };\n\ninterface TextProps\n  extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'type'> {\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n  strong?: boolean;\n  italic?: boolean;\n  underline?: boolean;\n  delete?: boolean;\n  code?: boolean;\n  disabled?: boolean;\n  type?: 'secondary' | 'success' | 'warning' | 'danger';\n  ellipsis?: EllipsisConfig;\n  copyable?: boolean | CopyableConfig;\n}\n\ninterface TitleProps extends React.HTMLAttributes<HTMLHeadingElement> {\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n  level?: 1 | 2 | 3 | 4 | 5;\n  ellipsis?: EllipsisConfig;\n}\n\ninterface ParagraphProps extends React.HTMLAttributes<HTMLDivElement> {\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n  ellipsis?: EllipsisConfig;\n  copyable?: boolean | CopyableConfig;\n}\n\ninterface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n  href?: string;\n  target?: string;\n}\n\nfunction CopyButton({\n  copyable,\n  children,\n}: {\n  copyable: boolean | CopyableConfig;\n  children: React.ReactNode;\n}) {\n  const [copied, setCopied] = useState(false);\n\n  const handleCopy = useCallback(() => {\n    const config =\n      typeof copyable === 'object' ? copyable : ({} as CopyableConfig);\n    const textToCopy =\n      config.text ?? (typeof children === 'string' ? children : '');\n    navigator.clipboard.writeText(String(textToCopy)).then(() => {\n      setCopied(true);\n      config.onCopy?.();\n      setTimeout(() => setCopied(false), 2000);\n    });\n  }, [copyable, children]);\n\n  return (\n    <span\n      role=\"button\"\n      tabIndex={0}\n      className=\"ald-typography-copy tw-ml-1 tw-inline-flex tw-cursor-pointer tw-align-middle tw-text-[var(--content-secondary)] hover:tw-text-[var(--content-primary)]\"\n      onClick={handleCopy}\n      onKeyDown={(e) => {\n        if (e.key === 'Enter' || e.key === ' ') handleCopy();\n      }}\n      aria-label=\"Copy\"\n    >\n      {copied ? (\n        <span className=\"tw-text-xs tw-text-[var(--content-positive-primary)]\">\n          Copied!\n        </span>\n      ) : (\n        <svg\n          viewBox=\"0 0 16 16\"\n          width=\"1em\"\n          height=\"1em\"\n          fill=\"currentColor\"\n          aria-hidden=\"true\"\n        >\n          <path d=\"M4 2a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V2zm2-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H6z\" />\n          <path d=\"M2 4a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-1h1v1a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h1v1H2z\" />\n        </svg>\n      )}\n    </span>\n  );\n}\n\nconst Typography: TypographyComponent = ({ className, style, children }) => (\n  <article\n    className={cn('ald-typography tw-text-typography-body-reading', className)}\n    style={style}\n  >\n    {children}\n  </article>\n);\n\nTypography.Text = ({\n  className,\n  style,\n  children,\n  strong,\n  italic,\n  underline,\n  code,\n  disabled,\n  type,\n  ellipsis,\n  copyable,\n  delete: del,\n  ...rest\n}) => {\n  const isEllipsis = Boolean(ellipsis);\n  const ellipsisRows = typeof ellipsis === 'object' ? ellipsis.rows : undefined;\n  let content: React.ReactNode = children;\n  if (code) content = <code>{content}</code>;\n  if (del) content = <del>{content}</del>;\n  if (underline) content = <u>{content}</u>;\n  if (italic) content = <i>{content}</i>;\n  if (strong) content = <strong>{content}</strong>;\n\n  return (\n    <span\n      className={cn(\n        'ald-typography-text tw-text-typography-body-reading',\n        disabled && 'tw-cursor-not-allowed tw-opacity-50',\n        type === 'secondary' && 'tw-text-[var(--content-secondary)]',\n        type === 'success' && 'tw-text-[var(--content-positive-primary)]',\n        type === 'warning' && 'tw-text-[var(--content-warning-primary)]',\n        type === 'danger' && 'tw-text-[var(--content-negative-primary)]',\n        isEllipsis && (ellipsisRows ? 'tw-overflow-hidden' : 'tw-truncate'),\n        className,\n      )}\n      style={{\n        ...style,\n        ...(ellipsisRows\n          ? {\n              display: '-webkit-box',\n              WebkitLineClamp: ellipsisRows,\n              WebkitBoxOrient: 'vertical',\n            }\n          : {}),\n      }}\n      {...rest}\n    >\n      {content}\n      {copyable && <CopyButton copyable={copyable}>{children}</CopyButton>}\n    </span>\n  );\n};\n\nTypography.Title = ({\n  className,\n  style,\n  children,\n  level = 1,\n  ellipsis,\n  ...rest\n}) => {\n  const Tag = `h${level}` as React.ElementType;\n  const isEllipsis = Boolean(ellipsis);\n  return (\n    <Tag\n      className={cn(\n        'ald-typography-title tw-text-[var(--content-primary)] tw-text-typography-heading',\n        isEllipsis && 'tw-truncate',\n        className,\n      )}\n      style={style}\n      {...rest}\n    >\n      {children}\n    </Tag>\n  );\n};\n\nTypography.Paragraph = ({\n  className,\n  style,\n  children,\n  ellipsis,\n  copyable,\n  ...rest\n}) => {\n  const isEllipsis = Boolean(ellipsis);\n  const ellipsisRows = typeof ellipsis === 'object' ? ellipsis.rows : undefined;\n\n  return (\n    <div\n      className={cn(\n        'ald-typography-paragraph tw-text-typography-body-reading',\n        isEllipsis && (ellipsisRows ? 'tw-overflow-hidden' : 'tw-truncate'),\n        className,\n      )}\n      style={{\n        ...style,\n        ...(ellipsisRows\n          ? {\n              display: '-webkit-box',\n              WebkitLineClamp: ellipsisRows,\n              WebkitBoxOrient: 'vertical',\n            }\n          : {}),\n      }}\n      {...rest}\n    >\n      {children}\n      {copyable && <CopyButton copyable={copyable}>{children}</CopyButton>}\n    </div>\n  );\n};\n\nTypography.Link = ({ className, style, children, href, target, ...rest }) => (\n  <a\n    className={cn(\n      'ald-typography-link tw-text-[var(--content-brand-secondary)] tw-text-typography-body-reading hover:tw-text-[var(--content-brand-primary)]',\n      className,\n    )}\n    style={style}\n    href={href}\n    target={target}\n    {...rest}\n  >\n    {children}\n  </a>\n);\n\nexport default Typography;\n"],"mappings":"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"}

package/dist/_utils/floatingLayer.js

@@ -25,6 +25,6 @@ function FloatingLayerProvider({ children, value }) {
 	});
 }
 //#endregion
-export { FloatingLayerProvider, useFloatingLayer, useFloatingPopupZIndex };
+export { FLOATING_LAYER_BASE_Z_INDEX, FloatingLayerProvider, useFloatingLayer, useFloatingPopupZIndex };
 
 //# sourceMappingURL=floatingLayer.js.map

package/dist/_utils/overlayCoordinator.d.ts

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+export interface ModalLayer {
+    id: number;
+    maskZIndex: number;
+    contentZIndex: number;
+    isTop: boolean;
+}
+export declare function useModalLayer(open: boolean, requestedZIndex?: number): ModalLayer;
+export declare function useTopModalContentZIndex(): number;
+export declare function useBodyScrollLock(locked: boolean): void;
+export declare function ModalLayerProvider({ id, children, }: {
+    id: number;
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/_utils/overlayCoordinator.js

@@ -0,0 +1,151 @@
+import { FLOATING_LAYER_BASE_Z_INDEX } from "./floatingLayer.js";
+import { createContext, useContext, useLayoutEffect, useRef, useSyncExternalStore } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/_utils/overlayCoordinator.tsx
+var ModalLayerContext = createContext(void 0);
+var entries = /* @__PURE__ */ new Map();
+var listeners = /* @__PURE__ */ new Set();
+var bodyScrollLockOwners = /* @__PURE__ */ new Set();
+var nextId = 0;
+var nextOpenedAt = 0;
+var version = 0;
+var bodyScrollLocked = false;
+var previousBodyOverflow = "";
+function getOrderedEntries() {
+	const orderedByOpen = Array.from(entries.values()).sort((left, right) => left.openedAt - right.openedAt);
+	const ordered = [];
+	const visited = /* @__PURE__ */ new Set();
+	const visit = (entry) => {
+		if (visited.has(entry.id)) return;
+		const parent = entry.parentId ? entries.get(entry.parentId) : void 0;
+		if (parent) visit(parent);
+		visited.add(entry.id);
+		ordered.push(entry);
+	};
+	orderedByOpen.forEach(visit);
+	return ordered;
+}
+function notify() {
+	version += 1;
+	listeners.forEach((listener) => listener());
+}
+function updateLayers() {
+	let nextZIndex = FLOATING_LAYER_BASE_Z_INDEX;
+	getOrderedEntries().forEach((entry) => {
+		entry.maskZIndex = Math.max(entry.requestedZIndex, nextZIndex);
+		entry.contentZIndex = entry.maskZIndex + 1;
+		nextZIndex = entry.maskZIndex + 10;
+	});
+	notify();
+}
+function acquireBodyScrollLock(owner) {
+	if (typeof document === "undefined") return;
+	if (bodyScrollLockOwners.has(owner)) return;
+	if (!bodyScrollLocked) {
+		previousBodyOverflow = document.body.style.overflow;
+		bodyScrollLocked = true;
+	}
+	bodyScrollLockOwners.add(owner);
+	document.body.style.overflow = "hidden";
+}
+function releaseBodyScrollLock(owner) {
+	if (typeof document === "undefined") return;
+	bodyScrollLockOwners.delete(owner);
+	if (bodyScrollLocked && bodyScrollLockOwners.size === 0) {
+		document.body.style.overflow = previousBodyOverflow;
+		bodyScrollLocked = false;
+	}
+}
+function registerModal(id, requestedZIndex, parentId) {
+	entries.set(id, {
+		id,
+		parentId,
+		requestedZIndex,
+		openedAt: ++nextOpenedAt,
+		maskZIndex: requestedZIndex,
+		contentZIndex: requestedZIndex + 1
+	});
+	acquireBodyScrollLock(id);
+	updateLayers();
+}
+function unregisterModal(id) {
+	if (!entries.delete(id)) return;
+	releaseBodyScrollLock(id);
+	updateLayers();
+}
+function updateModal(id, requestedZIndex, parentId) {
+	const entry = entries.get(id);
+	if (!entry || entry.requestedZIndex === requestedZIndex && entry.parentId === parentId) return;
+	entry.requestedZIndex = requestedZIndex;
+	entry.parentId = parentId;
+	updateLayers();
+}
+function subscribe(listener) {
+	listeners.add(listener);
+	return () => listeners.delete(listener);
+}
+function getVersion() {
+	return version;
+}
+function useModalLayer(open, requestedZIndex = FLOATING_LAYER_BASE_Z_INDEX) {
+	const parentId = useContext(ModalLayerContext);
+	const idRef = useRef();
+	const layerOptionsRef = useRef({
+		parentId,
+		requestedZIndex
+	});
+	layerOptionsRef.current = {
+		parentId,
+		requestedZIndex
+	};
+	if (!idRef.current) idRef.current = ++nextId;
+	const id = idRef.current;
+	useSyncExternalStore(subscribe, getVersion, getVersion);
+	useLayoutEffect(() => {
+		if (!open) return;
+		registerModal(id, layerOptionsRef.current.requestedZIndex, layerOptionsRef.current.parentId);
+		return () => unregisterModal(id);
+	}, [id, open]);
+	useLayoutEffect(() => {
+		if (open) updateModal(id, requestedZIndex, parentId);
+	}, [
+		id,
+		open,
+		parentId,
+		requestedZIndex
+	]);
+	const entry = entries.get(id);
+	const ordered = getOrderedEntries();
+	const topEntry = ordered[ordered.length - 1];
+	return {
+		id,
+		maskZIndex: entry?.maskZIndex ?? requestedZIndex,
+		contentZIndex: entry?.contentZIndex ?? requestedZIndex + 1,
+		isTop: entry ? topEntry?.id === id : true
+	};
+}
+function useTopModalContentZIndex() {
+	useSyncExternalStore(subscribe, getVersion, getVersion);
+	const ordered = getOrderedEntries();
+	return ordered[ordered.length - 1]?.contentZIndex;
+}
+function useBodyScrollLock(locked) {
+	const ownerRef = useRef();
+	if (!ownerRef.current) ownerRef.current = Symbol("body-scroll-lock");
+	useLayoutEffect(() => {
+		if (!locked) return;
+		const owner = ownerRef.current;
+		acquireBodyScrollLock(owner);
+		return () => releaseBodyScrollLock(owner);
+	}, [locked]);
+}
+function ModalLayerProvider({ id, children }) {
+	return /* @__PURE__ */ jsx(ModalLayerContext.Provider, {
+		value: id,
+		children
+	});
+}
+//#endregion
+export { ModalLayerProvider, useBodyScrollLock, useModalLayer, useTopModalContentZIndex };
+
+//# sourceMappingURL=overlayCoordinator.js.map

package/dist/_utils/overlayCoordinator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"overlayCoordinator.js","names":[],"sources":["../../src/_utils/overlayCoordinator.tsx"],"sourcesContent":["import React, {\n  createContext,\n  useContext,\n  useLayoutEffect,\n  useRef,\n  useSyncExternalStore,\n} from 'react';\nimport {\n  FLOATING_LAYER_BASE_Z_INDEX,\n  FLOATING_LAYER_STEP,\n} from './floatingLayer';\n\ninterface ModalLayerEntry {\n  id: number;\n  parentId?: number;\n  requestedZIndex: number;\n  openedAt: number;\n  maskZIndex: number;\n  contentZIndex: number;\n}\n\nexport interface ModalLayer {\n  id: number;\n  maskZIndex: number;\n  contentZIndex: number;\n  isTop: boolean;\n}\n\nconst ModalLayerContext = createContext<number | undefined>(undefined);\nconst entries = new Map<number, ModalLayerEntry>();\nconst listeners = new Set<() => void>();\nconst bodyScrollLockOwners = new Set<unknown>();\nlet nextId = 0;\nlet nextOpenedAt = 0;\nlet version = 0;\nlet bodyScrollLocked = false;\nlet previousBodyOverflow = '';\n\nfunction getOrderedEntries() {\n  const orderedByOpen = Array.from(entries.values()).sort(\n    (left, right) => left.openedAt - right.openedAt,\n  );\n  const ordered: ModalLayerEntry[] = [];\n  const visited = new Set<number>();\n\n  const visit = (entry: ModalLayerEntry) => {\n    if (visited.has(entry.id)) return;\n    const parent = entry.parentId ? entries.get(entry.parentId) : undefined;\n    if (parent) visit(parent);\n    visited.add(entry.id);\n    ordered.push(entry);\n  };\n\n  orderedByOpen.forEach(visit);\n  return ordered;\n}\n\nfunction notify() {\n  version += 1;\n  listeners.forEach((listener) => listener());\n}\n\nfunction updateLayers() {\n  let nextZIndex = FLOATING_LAYER_BASE_Z_INDEX;\n  getOrderedEntries().forEach((entry) => {\n    entry.maskZIndex = Math.max(entry.requestedZIndex, nextZIndex);\n    entry.contentZIndex = entry.maskZIndex + 1;\n    nextZIndex = entry.maskZIndex + FLOATING_LAYER_STEP;\n  });\n  notify();\n}\n\nfunction acquireBodyScrollLock(owner: unknown) {\n  if (typeof document === 'undefined') return;\n  if (bodyScrollLockOwners.has(owner)) return;\n  if (!bodyScrollLocked) {\n    previousBodyOverflow = document.body.style.overflow;\n    bodyScrollLocked = true;\n  }\n  bodyScrollLockOwners.add(owner);\n  document.body.style.overflow = 'hidden';\n}\n\nfunction releaseBodyScrollLock(owner: unknown) {\n  if (typeof document === 'undefined') return;\n  bodyScrollLockOwners.delete(owner);\n  if (bodyScrollLocked && bodyScrollLockOwners.size === 0) {\n    document.body.style.overflow = previousBodyOverflow;\n    bodyScrollLocked = false;\n  }\n}\n\nfunction registerModal(id: number, requestedZIndex: number, parentId?: number) {\n  entries.set(id, {\n    id,\n    parentId,\n    requestedZIndex,\n    openedAt: ++nextOpenedAt,\n    maskZIndex: requestedZIndex,\n    contentZIndex: requestedZIndex + 1,\n  });\n  acquireBodyScrollLock(id);\n  updateLayers();\n}\n\nfunction unregisterModal(id: number) {\n  if (!entries.delete(id)) return;\n  releaseBodyScrollLock(id);\n  updateLayers();\n}\n\nfunction updateModal(id: number, requestedZIndex: number, parentId?: number) {\n  const entry = entries.get(id);\n  if (\n    !entry ||\n    (entry.requestedZIndex === requestedZIndex && entry.parentId === parentId)\n  )\n    return;\n  entry.requestedZIndex = requestedZIndex;\n  entry.parentId = parentId;\n  updateLayers();\n}\n\nfunction subscribe(listener: () => void) {\n  listeners.add(listener);\n  return () => listeners.delete(listener);\n}\n\nfunction getVersion() {\n  return version;\n}\n\nexport function useModalLayer(\n  open: boolean,\n  requestedZIndex = FLOATING_LAYER_BASE_Z_INDEX,\n): ModalLayer {\n  const parentId = useContext(ModalLayerContext);\n  const idRef = useRef<number>();\n  const layerOptionsRef = useRef({ parentId, requestedZIndex });\n  layerOptionsRef.current = { parentId, requestedZIndex };\n  if (!idRef.current) idRef.current = ++nextId;\n  const id = idRef.current;\n\n  useSyncExternalStore(subscribe, getVersion, getVersion);\n\n  useLayoutEffect(() => {\n    if (!open) return;\n    registerModal(\n      id,\n      layerOptionsRef.current.requestedZIndex,\n      layerOptionsRef.current.parentId,\n    );\n    return () => unregisterModal(id);\n  }, [id, open]);\n\n  useLayoutEffect(() => {\n    if (open) updateModal(id, requestedZIndex, parentId);\n  }, [id, open, parentId, requestedZIndex]);\n\n  const entry = entries.get(id);\n  const ordered = getOrderedEntries();\n  const topEntry = ordered[ordered.length - 1];\n\n  return {\n    id,\n    maskZIndex: entry?.maskZIndex ?? requestedZIndex,\n    contentZIndex: entry?.contentZIndex ?? requestedZIndex + 1,\n    isTop: entry ? topEntry?.id === id : true,\n  };\n}\n\nexport function useTopModalContentZIndex() {\n  useSyncExternalStore(subscribe, getVersion, getVersion);\n  const ordered = getOrderedEntries();\n  return ordered[ordered.length - 1]?.contentZIndex;\n}\n\nexport function useBodyScrollLock(locked: boolean) {\n  const ownerRef = useRef<symbol>();\n  if (!ownerRef.current) ownerRef.current = Symbol('body-scroll-lock');\n\n  useLayoutEffect(() => {\n    if (!locked) return;\n    const owner = ownerRef.current!;\n    acquireBodyScrollLock(owner);\n    return () => releaseBodyScrollLock(owner);\n  }, [locked]);\n}\n\nexport function ModalLayerProvider({\n  id,\n  children,\n}: {\n  id: number;\n  children: React.ReactNode;\n}) {\n  return (\n    <ModalLayerContext.Provider value={id}>\n      {children}\n    </ModalLayerContext.Provider>\n  );\n}\n"],"mappings":";;;;AA4BA,IAAM,oBAAoB,cAAkC,OAAU;AACtE,IAAM,0BAAU,IAAI,KAA8B;AAClD,IAAM,4BAAY,IAAI,KAAiB;AACvC,IAAM,uCAAuB,IAAI,KAAc;AAC/C,IAAI,SAAS;AACb,IAAI,eAAe;AACnB,IAAI,UAAU;AACd,IAAI,mBAAmB;AACvB,IAAI,uBAAuB;AAE3B,SAAS,oBAAoB;CAC3B,MAAM,gBAAgB,MAAM,KAAK,QAAQ,QAAQ,CAAC,CAAC,MAChD,MAAM,UAAU,KAAK,WAAW,MAAM,SACxC;CACD,MAAM,UAA6B,EAAE;CACrC,MAAM,0BAAU,IAAI,KAAa;CAEjC,MAAM,SAAS,UAA2B;AACxC,MAAI,QAAQ,IAAI,MAAM,GAAG,CAAE;EAC3B,MAAM,SAAS,MAAM,WAAW,QAAQ,IAAI,MAAM,SAAS,GAAG;AAC9D,MAAI,OAAQ,OAAM,OAAO;AACzB,UAAQ,IAAI,MAAM,GAAG;AACrB,UAAQ,KAAK,MAAM;;AAGrB,eAAc,QAAQ,MAAM;AAC5B,QAAO;;AAGT,SAAS,SAAS;AAChB,YAAW;AACX,WAAU,SAAS,aAAa,UAAU,CAAC;;AAG7C,SAAS,eAAe;CACtB,IAAI,aAAa;AACjB,oBAAmB,CAAC,SAAS,UAAU;AACrC,QAAM,aAAa,KAAK,IAAI,MAAM,iBAAiB,WAAW;AAC9D,QAAM,gBAAgB,MAAM,aAAa;AACzC,eAAa,MAAM,aAAA;GACnB;AACF,SAAQ;;AAGV,SAAS,sBAAsB,OAAgB;AAC7C,KAAI,OAAO,aAAa,YAAa;AACrC,KAAI,qBAAqB,IAAI,MAAM,CAAE;AACrC,KAAI,CAAC,kBAAkB;AACrB,yBAAuB,SAAS,KAAK,MAAM;AAC3C,qBAAmB;;AAErB,sBAAqB,IAAI,MAAM;AAC/B,UAAS,KAAK,MAAM,WAAW;;AAGjC,SAAS,sBAAsB,OAAgB;AAC7C,KAAI,OAAO,aAAa,YAAa;AACrC,sBAAqB,OAAO,MAAM;AAClC,KAAI,oBAAoB,qBAAqB,SAAS,GAAG;AACvD,WAAS,KAAK,MAAM,WAAW;AAC/B,qBAAmB;;;AAIvB,SAAS,cAAc,IAAY,iBAAyB,UAAmB;AAC7E,SAAQ,IAAI,IAAI;EACd;EACA;EACA;EACA,UAAU,EAAE;EACZ,YAAY;EACZ,eAAe,kBAAkB;EAClC,CAAC;AACF,uBAAsB,GAAG;AACzB,eAAc;;AAGhB,SAAS,gBAAgB,IAAY;AACnC,KAAI,CAAC,QAAQ,OAAO,GAAG,CAAE;AACzB,uBAAsB,GAAG;AACzB,eAAc;;AAGhB,SAAS,YAAY,IAAY,iBAAyB,UAAmB;CAC3E,MAAM,QAAQ,QAAQ,IAAI,GAAG;AAC7B,KACE,CAAC,SACA,MAAM,oBAAoB,mBAAmB,MAAM,aAAa,SAEjE;AACF,OAAM,kBAAkB;AACxB,OAAM,WAAW;AACjB,eAAc;;AAGhB,SAAS,UAAU,UAAsB;AACvC,WAAU,IAAI,SAAS;AACvB,cAAa,UAAU,OAAO,SAAS;;AAGzC,SAAS,aAAa;AACpB,QAAO;;AAGT,SAAgB,cACd,MACA,kBAAkB,6BACN;CACZ,MAAM,WAAW,WAAW,kBAAkB;CAC9C,MAAM,QAAQ,QAAgB;CAC9B,MAAM,kBAAkB,OAAO;EAAE;EAAU;EAAiB,CAAC;AAC7D,iBAAgB,UAAU;EAAE;EAAU;EAAiB;AACvD,KAAI,CAAC,MAAM,QAAS,OAAM,UAAU,EAAE;CACtC,MAAM,KAAK,MAAM;AAEjB,sBAAqB,WAAW,YAAY,WAAW;AAEvD,uBAAsB;AACpB,MAAI,CAAC,KAAM;AACX,gBACE,IACA,gBAAgB,QAAQ,iBACxB,gBAAgB,QAAQ,SACzB;AACD,eAAa,gBAAgB,GAAG;IAC/B,CAAC,IAAI,KAAK,CAAC;AAEd,uBAAsB;AACpB,MAAI,KAAM,aAAY,IAAI,iBAAiB,SAAS;IACnD;EAAC;EAAI;EAAM;EAAU;EAAgB,CAAC;CAEzC,MAAM,QAAQ,QAAQ,IAAI,GAAG;CAC7B,MAAM,UAAU,mBAAmB;CACnC,MAAM,WAAW,QAAQ,QAAQ,SAAS;AAE1C,QAAO;EACL;EACA,YAAY,OAAO,cAAc;EACjC,eAAe,OAAO,iBAAiB,kBAAkB;EACzD,OAAO,QAAQ,UAAU,OAAO,KAAK;EACtC;;AAGH,SAAgB,2BAA2B;AACzC,sBAAqB,WAAW,YAAY,WAAW;CACvD,MAAM,UAAU,mBAAmB;AACnC,QAAO,QAAQ,QAAQ,SAAS,IAAI;;AAGtC,SAAgB,kBAAkB,QAAiB;CACjD,MAAM,WAAW,QAAgB;AACjC,KAAI,CAAC,SAAS,QAAS,UAAS,UAAU,OAAO,mBAAmB;AAEpE,uBAAsB;AACpB,MAAI,CAAC,OAAQ;EACb,MAAM,QAAQ,SAAS;AACvB,wBAAsB,MAAM;AAC5B,eAAa,sBAAsB,MAAM;IACxC,CAAC,OAAO,CAAC;;AAGd,SAAgB,mBAAmB,EACjC,IACA,YAIC;AACD,QACE,oBAAC,kBAAkB,UAAnB;EAA4B,OAAO;EAChC;EAC0B,CAAA"}