@ifhover/leaf-ui 0.5.0 → 0.6.0

package/dist/esm/browser/modules/tabs/tabs.js

@@ -1,22 +1,26 @@
 "use client";
+import '../../../styles/foundation.css';
 import '../../../styles/components/tabs.css';
 import { jsx, jsxs } from "react/jsx-runtime";
 import { DndContext, KeyboardSensor, PointerSensor, closestCenter, useSensor, useSensors } from "@dnd-kit/core";
 import { SortableContext, arrayMove, horizontalListSortingStrategy, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import { Ellipsis, GripVertical, Plus, X } from "lucide-react";
-import { useEffect, useId, useLayoutEffect, useRef, useState } from "react";
-import { Button } from "../button/index.js";
+import { useEffect, useId, useRef, useState } from "react";
+import { ButtonControl } from "../button/button.js";
+import { useComponentProps } from "../config-provider/component-defaults.js";
 import { useLeafConfig } from "../config-provider/context.js";
-import { Dropdown } from "../dropdown/index.js";
+import { DropdownControl } from "../dropdown/dropdown.js";
 import { classes } from "../shared/classes.js";
-import { animateMotion, useMotionEnabled } from "../shared/motion.js";
+import { useMotionEnabled } from "../shared/motion.js";
+import { useDragAnnouncements } from "../shared/use-drag-announcements.js";
+import { useFormattedText } from "../shared/use-formatted-text.js";
 import { useText } from "../shared/use-text.js";
 import { useMovingIndicator } from "./use-moving-indicator.js";
-const useBrowserLayoutEffect = "u" < typeof window ? useEffect : useLayoutEffect;
-function Tabs({ items, activeKey, defaultActiveKey, onChange, type = 'line', placement = 'top', size = 'md', activationMode = 'automatic', destroyInactive = false, extra, onClose, onAdd, addLabel, overflow = true, sortable = false, onReorder, className, 'aria-label': label, ...props }) {
-    const { messages, direction } = useLeafConfig();
+function TabsControl({ items, activeKey, defaultActiveKey, onChange, type = 'line', placement = 'top', size = 'md', activationMode = 'automatic', destroyInactive = false, extra, onClose, onAdd, addLabel, overflow = true, sortable = false, onReorder, className, 'aria-label': label, ...props }) {
+    const { direction } = useLeafConfig();
     const t = useText();
+    const format = useFormattedText();
     const enabled = items.filter((item)=>!item.disabled);
     const [internal, setInternal] = useState(defaultActiveKey ?? enabled[0]?.key);
     const requested = activeKey ?? internal;
@@ -32,11 +36,9 @@ function Tabs({ items, activeKey, defaultActiveKey, onChange, type = 'line', pla
     ]);
     const id = useId();
     const list = useRef(null);
+    const track = useRef(null);
     const indicator = useRef(null);
-    const panels = useRef(null);
-    const motion = useMotionEnabled();
-    useMovingIndicator(list, indicator, '[data-leaf-indicator-item][data-active="true"]', `${selected}-${placement}-${type}-${direction}`);
-    useTabPanelMotion(panels, selected, items.findIndex((item)=>item.key === selected), placement, direction, motion);
+    useMovingIndicator(track, indicator, '[data-leaf-indicator-item][data-active="true"]', `${selected}-${placement}-${type}-${direction}`, items.length > 0);
     const header = useRef(null);
     const [overflowKeys, setOverflowKeys] = useState([]);
     const sorting = sortable && Boolean(onReorder);
@@ -48,7 +50,7 @@ function Tabs({ items, activeKey, defaultActiveKey, onChange, type = 'line', pla
             const horizontal = 'top' === placement || 'bottom' === placement;
             const entries = Array.from(node.querySelectorAll('[data-tab-key]'));
             const more = container.querySelector('[data-tabs-more]');
-            const fullSize = (horizontal ? node.clientWidth : node.clientHeight) + (more ? (horizontal ? more.offsetWidth : more.offsetHeight) + 16 : 0);
+            const fullSize = (horizontal ? node.clientWidth : node.clientHeight) + (more ? (horizontal ? more.offsetWidth : more.offsetHeight) + (Number.parseFloat(getComputedStyle(container)[horizontal ? 'columnGap' : 'rowGap']) || 0) : 0);
             const total = horizontal ? node.scrollWidth : node.scrollHeight;
             const rect = node.getBoundingClientRect();
             const keys = total <= fullSize + 1 ? [] : entries.filter((entry)=>{
@@ -81,6 +83,7 @@ function Tabs({ items, activeKey, defaultActiveKey, onChange, type = 'line', pla
         if (void 0 === activeKey) setInternal(key);
         if (key !== selected) onChange?.(key);
     };
+    if (0 === items.length) return null;
     return /*#__PURE__*/ jsxs("div", {
         ...props,
         className: classes('leaf-tabs', `leaf-tabs--${type}`, `leaf-tabs--${placement}`, `leaf-tabs--${size}`, className),
@@ -93,7 +96,7 @@ function Tabs({ items, activeKey, defaultActiveKey, onChange, type = 'line', pla
                     className: "leaf-tabs__header",
                     ref: header,
                     children: [
-                        /*#__PURE__*/ jsxs("div", {
+                        /*#__PURE__*/ jsx("div", {
                             ref: list,
                             onBlur: (event)=>{
                                 if (!event.currentTarget.contains(event.relatedTarget)) setFocused(void 0);
@@ -102,85 +105,91 @@ function Tabs({ items, activeKey, defaultActiveKey, onChange, type = 'line', pla
                             "aria-label": label,
                             "aria-orientation": 'left' === placement || 'right' === placement ? 'vertical' : 'horizontal',
                             className: "leaf-tabs__list",
-                            children: [
-                                /*#__PURE__*/ jsx("span", {
-                                    ref: indicator,
-                                    className: "leaf-tabs__indicator",
-                                    "aria-hidden": "true"
-                                }),
-                                /*#__PURE__*/ jsx(SortableContext, {
-                                    items: items.map((item)=>item.key),
-                                    strategy: 'top' === placement || 'bottom' === placement ? horizontalListSortingStrategy : verticalListSortingStrategy,
-                                    children: items.map((item, index)=>/*#__PURE__*/ jsxs(TabEntry, {
-                                            item: item,
-                                            sortable: sorting,
-                                            className: "leaf-tabs__entry",
-                                            "data-active": item.key === selected || void 0,
-                                            "data-leaf-indicator-item": "",
-                                            children: [
-                                                /*#__PURE__*/ jsxs("button", {
-                                                    id: `${id}-tab-${index}`,
-                                                    type: "button",
-                                                    role: "tab",
-                                                    "aria-selected": item.key === selected,
-                                                    "aria-controls": `${id}-panel-${index}`,
-                                                    disabled: item.disabled,
-                                                    tabIndex: item.key === focusKey ? 0 : -1,
-                                                    className: "leaf-tabs__tab",
-                                                    onFocus: ()=>setFocused(item.key),
-                                                    onClick: ()=>choose(item.key),
-                                                    onKeyDown: (event)=>{
-                                                        let next;
-                                                        const position = enabled.findIndex((entry)=>entry.key === item.key);
-                                                        const forward = 'left' === placement || 'right' === placement ? 'ArrowDown' : 'rtl' === direction ? 'ArrowLeft' : 'ArrowRight';
-                                                        const backward = 'left' === placement || 'right' === placement ? 'ArrowUp' : 'rtl' === direction ? 'ArrowRight' : 'ArrowLeft';
-                                                        if (event.key === forward) next = enabled[(position + 1) % enabled.length]?.key;
-                                                        else if (event.key === backward) next = enabled[(position - 1 + enabled.length) % enabled.length]?.key;
-                                                        else if ('Home' === event.key) next = enabled[0]?.key;
-                                                        else if ('End' === event.key) next = enabled.at(-1)?.key;
-                                                        if (void 0 !== next) {
-                                                            event.preventDefault();
-                                                            setFocused(next);
-                                                            const nextIndex = items.findIndex((entry)=>entry.key === next);
-                                                            list.current?.querySelector(`[id='${id}-tab-${nextIndex}']`)?.focus();
-                                                            if ('automatic' === activationMode) choose(next);
-                                                        }
-                                                    },
-                                                    children: [
-                                                        item.icon && /*#__PURE__*/ jsx("span", {
-                                                            "aria-hidden": "true",
-                                                            children: item.icon
+                            children: /*#__PURE__*/ jsxs("div", {
+                                ref: track,
+                                className: "leaf-tabs__track",
+                                children: [
+                                    /*#__PURE__*/ jsx("span", {
+                                        ref: indicator,
+                                        className: "leaf-tabs__indicator",
+                                        "aria-hidden": "true"
+                                    }),
+                                    /*#__PURE__*/ jsx(SortableContext, {
+                                        items: items.map((item)=>item.key),
+                                        strategy: 'top' === placement || 'bottom' === placement ? horizontalListSortingStrategy : verticalListSortingStrategy,
+                                        children: items.map((item, index)=>/*#__PURE__*/ jsxs(TabEntry, {
+                                                item: item,
+                                                sortable: sorting,
+                                                className: "leaf-tabs__entry",
+                                                "data-active": item.key === selected || void 0,
+                                                "data-leaf-indicator-item": "",
+                                                children: [
+                                                    /*#__PURE__*/ jsxs("button", {
+                                                        id: `${id}-tab-${index}`,
+                                                        type: "button",
+                                                        role: "tab",
+                                                        "aria-selected": item.key === selected,
+                                                        "aria-controls": `${id}-panel-${index}`,
+                                                        disabled: item.disabled,
+                                                        tabIndex: item.key === focusKey ? 0 : -1,
+                                                        className: "leaf-tabs__tab",
+                                                        onFocus: ()=>setFocused(item.key),
+                                                        onClick: ()=>choose(item.key),
+                                                        onKeyDown: (event)=>{
+                                                            let next;
+                                                            const position = enabled.findIndex((entry)=>entry.key === item.key);
+                                                            const forward = 'left' === placement || 'right' === placement ? 'ArrowDown' : 'rtl' === direction ? 'ArrowLeft' : 'ArrowRight';
+                                                            const backward = 'left' === placement || 'right' === placement ? 'ArrowUp' : 'rtl' === direction ? 'ArrowRight' : 'ArrowLeft';
+                                                            if (event.key === forward) next = enabled[(position + 1) % enabled.length]?.key;
+                                                            else if (event.key === backward) next = enabled[(position - 1 + enabled.length) % enabled.length]?.key;
+                                                            else if ('Home' === event.key) next = enabled[0]?.key;
+                                                            else if ('End' === event.key) next = enabled.at(-1)?.key;
+                                                            if (void 0 !== next) {
+                                                                event.preventDefault();
+                                                                setFocused(next);
+                                                                const nextIndex = items.findIndex((entry)=>entry.key === next);
+                                                                list.current?.querySelector(`[id='${id}-tab-${nextIndex}']`)?.focus();
+                                                                if ('automatic' === activationMode) choose(next);
+                                                            }
+                                                        },
+                                                        children: [
+                                                            item.icon && /*#__PURE__*/ jsx("span", {
+                                                                "aria-hidden": "true",
+                                                                children: item.icon
+                                                            }),
+                                                            item.label
+                                                        ]
+                                                    }),
+                                                    item.closable && /*#__PURE__*/ jsx("button", {
+                                                        type: "button",
+                                                        className: "leaf-tabs__close",
+                                                        disabled: item.disabled || !onClose,
+                                                        "aria-label": format('tabs.closeLabel', {
+                                                            label: 'string' == typeof item.label ? item.label : item.key
                                                         }),
-                                                        item.label
-                                                    ]
-                                                }),
-                                                item.closable && /*#__PURE__*/ jsx("button", {
-                                                    type: "button",
-                                                    className: "leaf-tabs__close",
-                                                    disabled: item.disabled || !onClose,
-                                                    "aria-label": `${messages.closeTab} ${'string' == typeof item.label ? item.label : item.key}`,
-                                                    onClick: (event)=>{
-                                                        onClose?.(item.key, event);
-                                                        if (event.defaultPrevented) return;
-                                                        const position = enabled.findIndex((entry)=>entry.key === item.key);
-                                                        const next = item.key === selected ? enabled[position + 1] ?? enabled[position - 1] : enabled.find((entry)=>entry.key === selected);
-                                                        if (next) {
-                                                            if (item.key === selected) choose(next.key);
-                                                            const nextIndex = items.findIndex((entry)=>entry.key === next.key);
-                                                            list.current?.querySelector(`[id='${id}-tab-${nextIndex}']`)?.focus();
-                                                        }
-                                                    },
-                                                    children: /*#__PURE__*/ jsx(X, {
-                                                        size: 13,
-                                                        "aria-hidden": "true"
+                                                        onClick: (event)=>{
+                                                            onClose?.(item.key, event);
+                                                            if (event.defaultPrevented) return;
+                                                            const position = enabled.findIndex((entry)=>entry.key === item.key);
+                                                            const next = item.key === selected ? enabled[position + 1] ?? enabled[position - 1] : enabled.find((entry)=>entry.key === selected);
+                                                            if (next) {
+                                                                if (item.key === selected) choose(next.key);
+                                                                const nextIndex = items.findIndex((entry)=>entry.key === next.key);
+                                                                list.current?.querySelector(`[id='${id}-tab-${nextIndex}']`)?.focus();
+                                                            }
+                                                        },
+                                                        children: /*#__PURE__*/ jsx(X, {
+                                                            size: 13,
+                                                            "aria-hidden": "true"
+                                                        })
                                                     })
-                                                })
-                                            ]
-                                        }, item.key))
-                                })
-                            ]
+                                                ]
+                                            }, item.key))
+                                    })
+                                ]
+                            })
                         }),
-                        overflowKeys.length > 0 && /*#__PURE__*/ jsx(Dropdown, {
+                        overflowKeys.length > 0 && /*#__PURE__*/ jsx(DropdownControl, {
                             items: items.filter((item)=>overflowKeys.includes(item.key)).map((item)=>({
                                     key: item.key,
                                     label: item.label,
@@ -197,23 +206,25 @@ function Tabs({ items, activeKey, defaultActiveKey, onChange, type = 'line', pla
                                         });
                                     }
                                 })),
-                            children: /*#__PURE__*/ jsx(Button, {
+                            children: /*#__PURE__*/ jsx(ButtonControl, {
+                                className: "leaf-tabs__action",
                                 "data-tabs-more": "",
                                 variant: "ghost",
                                 size: size,
                                 startIcon: /*#__PURE__*/ jsx(Ellipsis, {
                                     size: 16
                                 }),
-                                "aria-label": t('更多标签页', 'More tabs')
+                                "aria-label": t('tabs.moreTabs')
                             })
                         }),
-                        onAdd && /*#__PURE__*/ jsx(Button, {
+                        onAdd && /*#__PURE__*/ jsx(ButtonControl, {
+                            className: "leaf-tabs__action",
                             variant: "ghost",
                             size: size,
                             startIcon: /*#__PURE__*/ jsx(Plus, {
                                 size: 16
                             }),
-                            "aria-label": addLabel ?? t('添加标签页', 'Add tab'),
+                            "aria-label": addLabel ?? t('tabs.addTab'),
                             onClick: onAdd
                         }),
                         extra && /*#__PURE__*/ jsx("div", {
@@ -224,7 +235,6 @@ function Tabs({ items, activeKey, defaultActiveKey, onChange, type = 'line', pla
                 })
             }),
             /*#__PURE__*/ jsx("div", {
-                ref: panels,
                 className: "leaf-tabs__panels",
                 children: items.map((item, index)=>/*#__PURE__*/ jsx("div", {
                         id: `${id}-panel-${index}`,
@@ -239,83 +249,6 @@ function Tabs({ items, activeKey, defaultActiveKey, onChange, type = 'line', pla
         ]
     });
 }
-function useTabPanelMotion(panels, selected, index, placement, direction, enabled) {
-    const previous = useRef({
-        key: selected,
-        index,
-        height: 0
-    });
-    const animations = useRef([]);
-    const heightAnimation = useRef(void 0);
-    useBrowserLayoutEffect(()=>{
-        const host = panels.current;
-        if (!host) return;
-        const active = host.querySelector('.leaf-tabs__panel:not([hidden])');
-        const interruptedHeight = heightAnimation.current?.playState === 'running' ? host.offsetHeight : previous.current.height;
-        for (const animation of animations.current)animation.cancel();
-        animations.current = [];
-        heightAnimation.current = void 0;
-        host.removeAttribute('data-transitioning');
-        const height = host.offsetHeight;
-        if (enabled && active && previous.current.key !== selected) {
-            const vertical = 'left' === placement || 'right' === placement;
-            const delta = (index >= previous.current.index ? 1 : -1) * (vertical || 'rtl' !== direction ? 1 : -1);
-            const enter = animateMotion(active, [
-                {
-                    opacity: 0,
-                    transform: vertical ? `translateY(${8 * delta}px)` : `translateX(${12 * delta}px)`
-                },
-                {
-                    opacity: 1,
-                    transform: 'translate(0, 0)'
-                }
-            ], {
-                durationMultiplier: 1.25
-            });
-            if (enter) animations.current.push(enter);
-            if (interruptedHeight > 0 && Math.abs(height - interruptedHeight) > 1) {
-                const resize = animateMotion(host, [
-                    {
-                        height: `${interruptedHeight}px`
-                    },
-                    {
-                        height: `${height}px`
-                    }
-                ], {
-                    durationMultiplier: 1.5
-                });
-                if (resize) {
-                    host.dataset.transitioning = 'true';
-                    animations.current.push(resize);
-                    heightAnimation.current = resize;
-                    resize.addEventListener('finish', ()=>host.removeAttribute('data-transitioning'), {
-                        once: true
-                    });
-                }
-            }
-        }
-        previous.current = {
-            key: selected,
-            index,
-            height
-        };
-        const observer = "u" < typeof ResizeObserver ? null : new ResizeObserver(()=>{
-            if (!animations.current.some((animation)=>'running' === animation.playState)) previous.current.height = host.offsetHeight;
-        });
-        if (active) observer?.observe(active);
-        return ()=>observer?.disconnect();
-    }, [
-        panels,
-        selected,
-        index,
-        placement,
-        direction,
-        enabled
-    ]);
-    useEffect(()=>()=>{
-            for (const animation of animations.current)animation.cancel();
-        }, []);
-}
 function TabEntry({ item, sortable, ...props }) {
     return sortable ? /*#__PURE__*/ jsx(SortableTab, {
         item: item,
@@ -326,7 +259,7 @@ function TabEntry({ item, sortable, ...props }) {
     });
 }
 function SortableTab({ item, children, ...props }) {
-    const { locale } = useLeafConfig();
+    const format = useFormattedText();
     const motion = useMotionEnabled();
     const { attributes, listeners, setNodeRef, setActivatorNodeRef, transform, transition, isDragging } = useSortable({
         id: item.key,
@@ -350,7 +283,9 @@ function SortableTab({ item, children, ...props }) {
                 ref: setActivatorNodeRef,
                 disabled: item.disabled,
                 className: "leaf-tabs__drag",
-                "aria-label": `${'en-US' === locale ? 'Reorder tab' : '移动标签页'} ${'string' == typeof item.label ? item.label : item.key}`,
+                "aria-label": format('tabs.reorder', {
+                    label: 'string' == typeof item.label ? item.label : item.key
+                }),
                 children: /*#__PURE__*/ jsx(GripVertical, {
                     size: 13,
                     "aria-hidden": "true"
@@ -369,6 +304,10 @@ function TabDragScope({ enabled, items, onReorder, children }) {
 }
 function TabSortScope({ items, onReorder, children }) {
     const id = useId();
+    const accessibility = useDragAnnouncements((key)=>{
+        const item = items.find((entry)=>entry.key === key);
+        return 'string' == typeof item?.label ? item.label : String(key);
+    });
     const sensors = useSensors(useSensor(PointerSensor, {
         activationConstraint: {
             distance: 6
@@ -380,6 +319,7 @@ function TabSortScope({ items, onReorder, children }) {
         id: id,
         sensors: sensors,
         collisionDetection: closestCenter,
+        accessibility: accessibility,
         onDragEnd: ({ active, over })=>{
             if (!over || active.id === over.id) return;
             const from = items.findIndex((item)=>item.key === active.id);
@@ -391,6 +331,12 @@ function TabSortScope({ items, onReorder, children }) {
         children: children
     });
 }
-export { Tabs };
+function Tabs(rawProps) {
+    const props = useComponentProps('Tabs', rawProps);
+    return /*#__PURE__*/ jsx(TabsControl, {
+        ...props
+    });
+}
+export { Tabs, TabsControl };
 
 //# sourceMappingURL=tabs.js.map

package/dist/esm/browser/modules/tabs/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs/tabs.js","sources":["../../../../../src/tabs/tabs.tsx"],"sourcesContent":["import {\n  closestCenter,\n  DndContext,\n  KeyboardSensor,\n  PointerSensor,\n  useSensor,\n  useSensors,\n} from '@dnd-kit/core';\nimport {\n  arrayMove,\n  horizontalListSortingStrategy,\n  SortableContext,\n  sortableKeyboardCoordinates,\n  useSortable,\n  verticalListSortingStrategy,\n} from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\nimport { Ellipsis, GripVertical, Plus, X } from 'lucide-react';\nimport {\n  type HTMLAttributes,\n  type MouseEvent,\n  type ReactNode,\n  useEffect,\n  useId,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { Button } from '../button';\nimport { useLeafConfig } from '../config-provider/context';\nimport { Dropdown } from '../dropdown';\nimport { classes } from '../shared/classes';\nimport { animateMotion, useMotionEnabled } from '../shared/motion';\nimport type { ControlSize } from '../shared/types';\nimport { useText } from '../shared/use-text';\nimport { useMovingIndicator } from './use-moving-indicator';\n\nconst useBrowserLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;\n\nexport interface TabItem {\n  key: string;\n  label: ReactNode;\n  children: ReactNode;\n  disabled?: boolean;\n  icon?: ReactNode;\n  closable?: boolean;\n}\nexport interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  items: readonly TabItem[];\n  activeKey?: string;\n  defaultActiveKey?: string;\n  onChange?: (key: string) => void;\n  type?: 'line' | 'card';\n  placement?: 'top' | 'bottom' | 'left' | 'right';\n  size?: ControlSize;\n  activationMode?: 'automatic' | 'manual';\n  destroyInactive?: boolean;\n  extra?: ReactNode;\n  onClose?: (key: string, event: MouseEvent<HTMLButtonElement>) => void;\n  onAdd?: () => void;\n  addLabel?: string;\n  overflow?: boolean;\n  sortable?: boolean;\n  onReorder?: (items: TabItem[]) => void;\n}\nexport function Tabs({\n  items,\n  activeKey,\n  defaultActiveKey,\n  onChange,\n  type = 'line',\n  placement = 'top',\n  size = 'md',\n  activationMode = 'automatic',\n  destroyInactive = false,\n  extra,\n  onClose,\n  onAdd,\n  addLabel,\n  overflow = true,\n  sortable = false,\n  onReorder,\n  className,\n  'aria-label': label,\n  ...props\n}: TabsProps) {\n  const { messages, direction } = useLeafConfig();\n  const t = useText();\n  const enabled = items.filter((item) => !item.disabled);\n  const [internal, setInternal] = useState(defaultActiveKey ?? enabled[0]?.key);\n  const requested = activeKey ?? internal;\n  const selected = enabled.find((item) => item.key === requested)?.key ?? enabled[0]?.key;\n  const [focused, setFocused] = useState<string>();\n  const focusKey = enabled.some((item) => item.key === focused) ? focused : selected;\n  const [visited, setVisited] = useState<readonly string[]>(selected ? [selected] : []);\n  if (selected && !visited.includes(selected)) setVisited([...visited, selected]);\n  const id = useId();\n  const list = useRef<HTMLDivElement>(null);\n  const indicator = useRef<HTMLSpanElement>(null);\n  const panels = useRef<HTMLDivElement>(null);\n  const motion = useMotionEnabled();\n  useMovingIndicator(\n    list,\n    indicator,\n    '[data-leaf-indicator-item][data-active=\"true\"]',\n    `${selected}-${placement}-${type}-${direction}`,\n  );\n  useTabPanelMotion(\n    panels,\n    selected,\n    items.findIndex((item) => item.key === selected),\n    placement,\n    direction,\n    motion,\n  );\n  const header = useRef<HTMLDivElement>(null);\n  const [overflowKeys, setOverflowKeys] = useState<string[]>([]);\n  const sorting = sortable && Boolean(onReorder);\n  // biome-ignore lint/correctness/useExhaustiveDependencies: Observe the new tab elements after the item list changes.\n  useEffect(() => {\n    const node = list.current;\n    const container = header.current;\n    if (!overflow || !node || !container) {\n      setOverflowKeys([]);\n      return;\n    }\n    const measure = () => {\n      const horizontal = placement === 'top' || placement === 'bottom';\n      const entries = Array.from(node.querySelectorAll<HTMLElement>('[data-tab-key]'));\n      const more = container.querySelector<HTMLElement>('[data-tabs-more]');\n      const fullSize =\n        (horizontal ? node.clientWidth : node.clientHeight) +\n        (more ? (horizontal ? more.offsetWidth : more.offsetHeight) + 16 : 0);\n      const total = horizontal ? node.scrollWidth : node.scrollHeight;\n      const rect = node.getBoundingClientRect();\n      const keys =\n        total <= fullSize + 1\n          ? []\n          : entries\n              .filter((entry) => {\n                const item = entry.getBoundingClientRect();\n                return horizontal\n                  ? item.left < rect.left - 1 || item.right > rect.right + 1\n                  : item.top < rect.top - 1 || item.bottom > rect.bottom + 1;\n              })\n              .map((entry) => entry.dataset.tabKey ?? '');\n      setOverflowKeys((previous) =>\n        previous.length === keys.length && previous.every((key, index) => key === keys[index])\n          ? previous\n          : keys,\n      );\n    };\n    measure();\n    const observer = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(measure);\n    observer?.observe(node);\n    observer?.observe(container);\n    for (const entry of node.children) observer?.observe(entry);\n    node.addEventListener('scroll', measure, { passive: true });\n    window.addEventListener('resize', measure);\n    return () => {\n      observer?.disconnect();\n      node.removeEventListener('scroll', measure);\n      window.removeEventListener('resize', measure);\n    };\n  }, [overflow, placement, items]);\n  const choose = (key: string) => {\n    if (!enabled.some((item) => item.key === key)) return;\n    if (activeKey === undefined) setInternal(key);\n    if (key !== selected) onChange?.(key);\n  };\n  return (\n    <div\n      {...props}\n      className={classes(\n        'leaf-tabs',\n        `leaf-tabs--${type}`,\n        `leaf-tabs--${placement}`,\n        `leaf-tabs--${size}`,\n        className,\n      )}\n    >\n      <TabDragScope enabled={sorting} items={items} onReorder={onReorder}>\n        <div className=\"leaf-tabs__header\" ref={header}>\n          <div\n            ref={list}\n            onBlur={(event) => {\n              if (!event.currentTarget.contains(event.relatedTarget)) setFocused(undefined);\n            }}\n            role=\"tablist\"\n            aria-label={label}\n            aria-orientation={\n              placement === 'left' || placement === 'right' ? 'vertical' : 'horizontal'\n            }\n            className=\"leaf-tabs__list\"\n          >\n            <span ref={indicator} className=\"leaf-tabs__indicator\" aria-hidden=\"true\" />\n            <SortableContext\n              items={items.map((item) => item.key)}\n              strategy={\n                placement === 'top' || placement === 'bottom'\n                  ? horizontalListSortingStrategy\n                  : verticalListSortingStrategy\n              }\n            >\n              {items.map((item, index) => (\n                <TabEntry\n                  item={item}\n                  sortable={sorting}\n                  className=\"leaf-tabs__entry\"\n                  key={item.key}\n                  data-active={item.key === selected || undefined}\n                  data-leaf-indicator-item=\"\"\n                >\n                  <button\n                    id={`${id}-tab-${index}`}\n                    type=\"button\"\n                    role=\"tab\"\n                    aria-selected={item.key === selected}\n                    aria-controls={`${id}-panel-${index}`}\n                    disabled={item.disabled}\n                    tabIndex={item.key === focusKey ? 0 : -1}\n                    className=\"leaf-tabs__tab\"\n                    onFocus={() => setFocused(item.key)}\n                    onClick={() => choose(item.key)}\n                    onKeyDown={(event) => {\n                      let next: string | undefined;\n                      const position = enabled.findIndex((entry) => entry.key === item.key);\n                      const forward =\n                        placement === 'left' || placement === 'right'\n                          ? 'ArrowDown'\n                          : direction === 'rtl'\n                            ? 'ArrowLeft'\n                            : 'ArrowRight';\n                      const backward =\n                        placement === 'left' || placement === 'right'\n                          ? 'ArrowUp'\n                          : direction === 'rtl'\n                            ? 'ArrowRight'\n                            : 'ArrowLeft';\n                      if (event.key === forward)\n                        next = enabled[(position + 1) % enabled.length]?.key;\n                      else if (event.key === backward)\n                        next = enabled[(position - 1 + enabled.length) % enabled.length]?.key;\n                      else if (event.key === 'Home') next = enabled[0]?.key;\n                      else if (event.key === 'End') next = enabled.at(-1)?.key;\n                      if (next !== undefined) {\n                        event.preventDefault();\n                        setFocused(next);\n                        const nextIndex = items.findIndex((entry) => entry.key === next);\n                        list.current\n                          ?.querySelector<HTMLButtonElement>(`[id='${id}-tab-${nextIndex}']`)\n                          ?.focus();\n                        if (activationMode === 'automatic') choose(next);\n                      }\n                    }}\n                  >\n                    {item.icon && <span aria-hidden=\"true\">{item.icon}</span>}\n                    {item.label}\n                  </button>\n                  {item.closable && (\n                    <button\n                      type=\"button\"\n                      className=\"leaf-tabs__close\"\n                      disabled={item.disabled || !onClose}\n                      aria-label={`${messages.closeTab} ${typeof item.label === 'string' ? item.label : item.key}`}\n                      onClick={(event) => {\n                        onClose?.(item.key, event);\n                        if (event.defaultPrevented) return;\n                        const position = enabled.findIndex((entry) => entry.key === item.key);\n                        const next =\n                          item.key === selected\n                            ? (enabled[position + 1] ?? enabled[position - 1])\n                            : enabled.find((entry) => entry.key === selected);\n                        if (next) {\n                          if (item.key === selected) choose(next.key);\n                          const nextIndex = items.findIndex((entry) => entry.key === next.key);\n                          list.current\n                            ?.querySelector<HTMLButtonElement>(`[id='${id}-tab-${nextIndex}']`)\n                            ?.focus();\n                        }\n                      }}\n                    >\n                      <X size={13} aria-hidden=\"true\" />\n                    </button>\n                  )}\n                </TabEntry>\n              ))}\n            </SortableContext>\n          </div>\n          {overflowKeys.length > 0 && (\n            <Dropdown\n              items={items\n                .filter((item) => overflowKeys.includes(item.key))\n                .map((item) => ({\n                  key: item.key,\n                  label: item.label,\n                  disabled: item.disabled,\n                  onClick: () => {\n                    choose(item.key);\n                    requestAnimationFrame(() => {\n                      const target = document.getElementById(`${id}-tab-${items.indexOf(item)}`);\n                      target?.scrollIntoView?.({ block: 'nearest', inline: 'nearest' });\n                      target?.focus();\n                    });\n                  },\n                }))}\n            >\n              <Button\n                data-tabs-more=\"\"\n                variant=\"ghost\"\n                size={size}\n                startIcon={<Ellipsis size={16} />}\n                aria-label={t('更多标签页', 'More tabs')}\n              />\n            </Dropdown>\n          )}\n          {onAdd && (\n            <Button\n              variant=\"ghost\"\n              size={size}\n              startIcon={<Plus size={16} />}\n              aria-label={addLabel ?? t('添加标签页', 'Add tab')}\n              onClick={onAdd}\n            />\n          )}\n          {extra && <div className=\"leaf-tabs__extra\">{extra}</div>}\n        </div>\n      </TabDragScope>\n      <div ref={panels} className=\"leaf-tabs__panels\">\n        {items.map((item, index) => (\n          <div\n            key={item.key}\n            id={`${id}-panel-${index}`}\n            role=\"tabpanel\"\n            aria-labelledby={`${id}-tab-${index}`}\n            hidden={item.key !== selected}\n            // biome-ignore lint/a11y/noNoninteractiveTabindex: Tabpanels are keyboard focus destinations in the ARIA tabs pattern.\n            tabIndex={0}\n            className=\"leaf-tabs__panel\"\n          >\n            {(item.key === selected || (!destroyInactive && visited.includes(item.key))) &&\n              item.children}\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n\nfunction useTabPanelMotion(\n  panels: React.RefObject<HTMLDivElement | null>,\n  selected: string | undefined,\n  index: number,\n  placement: TabsProps['placement'],\n  direction: 'ltr' | 'rtl',\n  enabled: boolean,\n) {\n  const previous = useRef({ key: selected, index, height: 0 });\n  const animations = useRef<Animation[]>([]);\n  const heightAnimation = useRef<Animation | undefined>(undefined);\n  useBrowserLayoutEffect(() => {\n    const host = panels.current;\n    if (!host) return;\n    const active = host.querySelector<HTMLElement>('.leaf-tabs__panel:not([hidden])');\n    const interruptedHeight =\n      heightAnimation.current?.playState === 'running'\n        ? host.offsetHeight\n        : previous.current.height;\n    for (const animation of animations.current) animation.cancel();\n    animations.current = [];\n    heightAnimation.current = undefined;\n    host.removeAttribute('data-transitioning');\n    const height = host.offsetHeight;\n    if (enabled && active && previous.current.key !== selected) {\n      const vertical = placement === 'left' || placement === 'right';\n      const delta =\n        (index >= previous.current.index ? 1 : -1) * (vertical || direction !== 'rtl' ? 1 : -1);\n      const enter = animateMotion(\n        active,\n        [\n          {\n            opacity: 0,\n            transform: vertical ? `translateY(${delta * 8}px)` : `translateX(${delta * 12}px)`,\n          },\n          { opacity: 1, transform: 'translate(0, 0)' },\n        ],\n        { durationMultiplier: 1.25 },\n      );\n      if (enter) animations.current.push(enter);\n      if (interruptedHeight > 0 && Math.abs(height - interruptedHeight) > 1) {\n        const resize = animateMotion(\n          host,\n          [{ height: `${interruptedHeight}px` }, { height: `${height}px` }],\n          { durationMultiplier: 1.5 },\n        );\n        if (resize) {\n          host.dataset.transitioning = 'true';\n          animations.current.push(resize);\n          heightAnimation.current = resize;\n          resize.addEventListener('finish', () => host.removeAttribute('data-transitioning'), {\n            once: true,\n          });\n        }\n      }\n    }\n    previous.current = { key: selected, index, height };\n    const observer =\n      typeof ResizeObserver === 'undefined'\n        ? null\n        : new ResizeObserver(() => {\n            if (!animations.current.some((animation) => animation.playState === 'running'))\n              previous.current.height = host.offsetHeight;\n          });\n    if (active) observer?.observe(active);\n    return () => observer?.disconnect();\n  }, [panels, selected, index, placement, direction, enabled]);\n  useEffect(\n    () => () => {\n      for (const animation of animations.current) animation.cancel();\n    },\n    [],\n  );\n}\n\nfunction TabEntry({\n  item,\n  sortable,\n  ...props\n}: HTMLAttributes<HTMLDivElement> & { item: TabItem; sortable: boolean }) {\n  return sortable ? (\n    <SortableTab item={item} {...props} />\n  ) : (\n    <div {...props} data-tab-key={item.key} />\n  );\n}\nfunction SortableTab({\n  item,\n  children,\n  ...props\n}: HTMLAttributes<HTMLDivElement> & { item: TabItem }) {\n  const { locale } = useLeafConfig();\n  const motion = useMotionEnabled();\n  const {\n    attributes,\n    listeners,\n    setNodeRef,\n    setActivatorNodeRef,\n    transform,\n    transition,\n    isDragging,\n  } = useSortable({ id: item.key, disabled: item.disabled });\n  return (\n    <div\n      {...props}\n      ref={setNodeRef}\n      data-tab-key={item.key}\n      data-dragging={isDragging || undefined}\n      style={{\n        ...props.style,\n        transform: CSS.Transform.toString(transform),\n        transition:\n          motion && transition\n            ? 'transform var(--leaf-motion-slow) var(--leaf-motion-easing)'\n            : undefined,\n      }}\n    >\n      <button\n        type=\"button\"\n        {...attributes}\n        {...listeners}\n        ref={setActivatorNodeRef}\n        disabled={item.disabled}\n        className=\"leaf-tabs__drag\"\n        aria-label={`${locale === 'en-US' ? 'Reorder tab' : '移动标签页'} ${typeof item.label === 'string' ? item.label : item.key}`}\n      >\n        <GripVertical size={13} aria-hidden=\"true\" />\n      </button>\n      {children}\n    </div>\n  );\n}\n\nfunction TabDragScope({\n  enabled,\n  items,\n  onReorder,\n  children,\n}: {\n  enabled: boolean;\n  items: readonly TabItem[];\n  onReorder?: (items: TabItem[]) => void;\n  children: ReactNode;\n}) {\n  return enabled ? (\n    <TabSortScope items={items} onReorder={onReorder}>\n      {children}\n    </TabSortScope>\n  ) : (\n    children\n  );\n}\nfunction TabSortScope({\n  items,\n  onReorder,\n  children,\n}: {\n  items: readonly TabItem[];\n  onReorder?: (items: TabItem[]) => void;\n  children: ReactNode;\n}) {\n  const id = useId();\n  const sensors = useSensors(\n    useSensor(PointerSensor, { activationConstraint: { distance: 6 } }),\n    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),\n  );\n  return (\n    <DndContext\n      id={id}\n      sensors={sensors}\n      collisionDetection={closestCenter}\n      onDragEnd={({ active, over }) => {\n        if (!over || active.id === over.id) return;\n        const from = items.findIndex((item) => item.key === active.id);\n        const to = items.findIndex((item) => item.key === over.id);\n        if (from >= 0 && to >= 0 && !items[to]?.disabled)\n          onReorder?.(arrayMove([...items], from, to));\n      }}\n    >\n      {children}\n    </DndContext>\n  );\n}\n"],"names":["useBrowserLayoutEffect","window","useEffect","useLayoutEffect","Tabs","items","activeKey","defaultActiveKey","onChange","type","placement","size","activationMode","destroyInactive","extra","onClose","onAdd","addLabel","overflow","sortable","onReorder","className","label","props","messages","direction","useLeafConfig","t","useText","enabled","item","internal","setInternal","useState","requested","selected","focused","setFocused","focusKey","visited","setVisited","id","useId","list","useRef","indicator","panels","motion","useMotionEnabled","useMovingIndicator","useTabPanelMotion","header","overflowKeys","setOverflowKeys","sorting","Boolean","node","container","measure","horizontal","entries","Array","more","fullSize","total","rect","keys","entry","previous","key","index","observer","ResizeObserver","choose","undefined","classes","TabDragScope","event","SortableContext","horizontalListSortingStrategy","verticalListSortingStrategy","TabEntry","next","position","forward","backward","nextIndex","X","Dropdown","requestAnimationFrame","target","document","Button","Ellipsis","Plus","animations","heightAnimation","host","active","interruptedHeight","animation","height","vertical","delta","enter","animateMotion","Math","resize","SortableTab","children","locale","attributes","listeners","setNodeRef","setActivatorNodeRef","transform","transition","isDragging","useSortable","CSS","GripVertical","TabSortScope","sensors","useSensors","useSensor","PointerSensor","KeyboardSensor","sortableKeyboardCoordinates","DndContext","closestCenter","over","from","to","arrayMove"],"mappings":"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"}
+{"version":3,"file":"tabs/tabs.js","sources":["../../../../../src/tabs/tabs.tsx"],"sourcesContent":["import {\n  closestCenter,\n  DndContext,\n  KeyboardSensor,\n  PointerSensor,\n  useSensor,\n  useSensors,\n} from '@dnd-kit/core';\nimport {\n  arrayMove,\n  horizontalListSortingStrategy,\n  SortableContext,\n  sortableKeyboardCoordinates,\n  useSortable,\n  verticalListSortingStrategy,\n} from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\nimport { Ellipsis, GripVertical, Plus, X } from 'lucide-react';\nimport {\n  type HTMLAttributes,\n  type MouseEvent,\n  type ReactNode,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n} from 'react';\nimport { ButtonControl } from '../button/button';\nimport { useComponentProps } from '../config-provider/component-defaults';\nimport { useLeafConfig } from '../config-provider/context';\nimport { DropdownControl as Dropdown } from '../dropdown/dropdown';\nimport { classes } from '../shared/classes';\nimport { useMotionEnabled } from '../shared/motion';\nimport type { ControlSize } from '../shared/types';\nimport { useDragAnnouncements } from '../shared/use-drag-announcements';\nimport { useFormattedText } from '../shared/use-formatted-text';\nimport { useText } from '../shared/use-text';\nimport { useMovingIndicator } from './use-moving-indicator';\n\nexport interface TabItem {\n  key: string;\n  label: ReactNode;\n  children: ReactNode;\n  disabled?: boolean;\n  icon?: ReactNode;\n  closable?: boolean;\n}\nexport interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  items: readonly TabItem[];\n  activeKey?: string;\n  defaultActiveKey?: string;\n  onChange?: (key: string) => void;\n  type?: 'line' | 'card';\n  placement?: 'top' | 'bottom' | 'left' | 'right';\n  size?: ControlSize;\n  activationMode?: 'automatic' | 'manual';\n  destroyInactive?: boolean;\n  extra?: ReactNode;\n  onClose?: (key: string, event: MouseEvent<HTMLButtonElement>) => void;\n  onAdd?: () => void;\n  addLabel?: string;\n  overflow?: boolean;\n  sortable?: boolean;\n  onReorder?: (items: TabItem[]) => void;\n}\nexport function TabsControl({\n  items,\n  activeKey,\n  defaultActiveKey,\n  onChange,\n  type = 'line',\n  placement = 'top',\n  size = 'md',\n  activationMode = 'automatic',\n  destroyInactive = false,\n  extra,\n  onClose,\n  onAdd,\n  addLabel,\n  overflow = true,\n  sortable = false,\n  onReorder,\n  className,\n  'aria-label': label,\n  ...props\n}: TabsProps) {\n  const { direction } = useLeafConfig();\n  const t = useText();\n  const format = useFormattedText();\n  const enabled = items.filter((item) => !item.disabled);\n  const [internal, setInternal] = useState(defaultActiveKey ?? enabled[0]?.key);\n  const requested = activeKey ?? internal;\n  const selected = enabled.find((item) => item.key === requested)?.key ?? enabled[0]?.key;\n  const [focused, setFocused] = useState<string>();\n  const focusKey = enabled.some((item) => item.key === focused) ? focused : selected;\n  const [visited, setVisited] = useState<readonly string[]>(selected ? [selected] : []);\n  if (selected && !visited.includes(selected)) setVisited([...visited, selected]);\n  const id = useId();\n  const list = useRef<HTMLDivElement>(null);\n  const track = useRef<HTMLDivElement>(null);\n  const indicator = useRef<HTMLSpanElement>(null);\n  useMovingIndicator(\n    track,\n    indicator,\n    '[data-leaf-indicator-item][data-active=\"true\"]',\n    `${selected}-${placement}-${type}-${direction}`,\n    items.length > 0,\n  );\n  const header = useRef<HTMLDivElement>(null);\n  const [overflowKeys, setOverflowKeys] = useState<string[]>([]);\n  const sorting = sortable && Boolean(onReorder);\n  // biome-ignore lint/correctness/useExhaustiveDependencies: Observe the new tab elements after the item list changes.\n  useEffect(() => {\n    const node = list.current;\n    const container = header.current;\n    if (!overflow || !node || !container) {\n      setOverflowKeys([]);\n      return;\n    }\n    const measure = () => {\n      const horizontal = placement === 'top' || placement === 'bottom';\n      const entries = Array.from(node.querySelectorAll<HTMLElement>('[data-tab-key]'));\n      const more = container.querySelector<HTMLElement>('[data-tabs-more]');\n      const fullSize =\n        (horizontal ? node.clientWidth : node.clientHeight) +\n        (more\n          ? (horizontal ? more.offsetWidth : more.offsetHeight) +\n            (Number.parseFloat(getComputedStyle(container)[horizontal ? 'columnGap' : 'rowGap']) ||\n              0)\n          : 0);\n      const total = horizontal ? node.scrollWidth : node.scrollHeight;\n      const rect = node.getBoundingClientRect();\n      const keys =\n        total <= fullSize + 1\n          ? []\n          : entries\n              .filter((entry) => {\n                const item = entry.getBoundingClientRect();\n                return horizontal\n                  ? item.left < rect.left - 1 || item.right > rect.right + 1\n                  : item.top < rect.top - 1 || item.bottom > rect.bottom + 1;\n              })\n              .map((entry) => entry.dataset.tabKey ?? '');\n      setOverflowKeys((previous) =>\n        previous.length === keys.length && previous.every((key, index) => key === keys[index])\n          ? previous\n          : keys,\n      );\n    };\n    measure();\n    const observer = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(measure);\n    observer?.observe(node);\n    observer?.observe(container);\n    for (const entry of node.children) observer?.observe(entry);\n    node.addEventListener('scroll', measure, { passive: true });\n    window.addEventListener('resize', measure);\n    return () => {\n      observer?.disconnect();\n      node.removeEventListener('scroll', measure);\n      window.removeEventListener('resize', measure);\n    };\n  }, [overflow, placement, items]);\n  const choose = (key: string) => {\n    if (!enabled.some((item) => item.key === key)) return;\n    if (activeKey === undefined) setInternal(key);\n    if (key !== selected) onChange?.(key);\n  };\n  if (items.length === 0) return null;\n  return (\n    <div\n      {...props}\n      className={classes(\n        'leaf-tabs',\n        `leaf-tabs--${type}`,\n        `leaf-tabs--${placement}`,\n        `leaf-tabs--${size}`,\n        className,\n      )}\n    >\n      <TabDragScope enabled={sorting} items={items} onReorder={onReorder}>\n        <div className=\"leaf-tabs__header\" ref={header}>\n          <div\n            ref={list}\n            onBlur={(event) => {\n              if (!event.currentTarget.contains(event.relatedTarget)) setFocused(undefined);\n            }}\n            role=\"tablist\"\n            aria-label={label}\n            aria-orientation={\n              placement === 'left' || placement === 'right' ? 'vertical' : 'horizontal'\n            }\n            className=\"leaf-tabs__list\"\n          >\n            <div ref={track} className=\"leaf-tabs__track\">\n              <span ref={indicator} className=\"leaf-tabs__indicator\" aria-hidden=\"true\" />\n              <SortableContext\n                items={items.map((item) => item.key)}\n                strategy={\n                  placement === 'top' || placement === 'bottom'\n                    ? horizontalListSortingStrategy\n                    : verticalListSortingStrategy\n                }\n              >\n                {items.map((item, index) => (\n                  <TabEntry\n                    item={item}\n                    sortable={sorting}\n                    className=\"leaf-tabs__entry\"\n                    key={item.key}\n                    data-active={item.key === selected || undefined}\n                    data-leaf-indicator-item=\"\"\n                  >\n                    <button\n                      id={`${id}-tab-${index}`}\n                      type=\"button\"\n                      role=\"tab\"\n                      aria-selected={item.key === selected}\n                      aria-controls={`${id}-panel-${index}`}\n                      disabled={item.disabled}\n                      tabIndex={item.key === focusKey ? 0 : -1}\n                      className=\"leaf-tabs__tab\"\n                      onFocus={() => setFocused(item.key)}\n                      onClick={() => choose(item.key)}\n                      onKeyDown={(event) => {\n                        let next: string | undefined;\n                        const position = enabled.findIndex((entry) => entry.key === item.key);\n                        const forward =\n                          placement === 'left' || placement === 'right'\n                            ? 'ArrowDown'\n                            : direction === 'rtl'\n                              ? 'ArrowLeft'\n                              : 'ArrowRight';\n                        const backward =\n                          placement === 'left' || placement === 'right'\n                            ? 'ArrowUp'\n                            : direction === 'rtl'\n                              ? 'ArrowRight'\n                              : 'ArrowLeft';\n                        if (event.key === forward)\n                          next = enabled[(position + 1) % enabled.length]?.key;\n                        else if (event.key === backward)\n                          next = enabled[(position - 1 + enabled.length) % enabled.length]?.key;\n                        else if (event.key === 'Home') next = enabled[0]?.key;\n                        else if (event.key === 'End') next = enabled.at(-1)?.key;\n                        if (next !== undefined) {\n                          event.preventDefault();\n                          setFocused(next);\n                          const nextIndex = items.findIndex((entry) => entry.key === next);\n                          list.current\n                            ?.querySelector<HTMLButtonElement>(`[id='${id}-tab-${nextIndex}']`)\n                            ?.focus();\n                          if (activationMode === 'automatic') choose(next);\n                        }\n                      }}\n                    >\n                      {item.icon && <span aria-hidden=\"true\">{item.icon}</span>}\n                      {item.label}\n                    </button>\n                    {item.closable && (\n                      <button\n                        type=\"button\"\n                        className=\"leaf-tabs__close\"\n                        disabled={item.disabled || !onClose}\n                        aria-label={format('tabs.closeLabel', {\n                          label: typeof item.label === 'string' ? item.label : item.key,\n                        })}\n                        onClick={(event) => {\n                          onClose?.(item.key, event);\n                          if (event.defaultPrevented) return;\n                          const position = enabled.findIndex((entry) => entry.key === item.key);\n                          const next =\n                            item.key === selected\n                              ? (enabled[position + 1] ?? enabled[position - 1])\n                              : enabled.find((entry) => entry.key === selected);\n                          if (next) {\n                            if (item.key === selected) choose(next.key);\n                            const nextIndex = items.findIndex((entry) => entry.key === next.key);\n                            list.current\n                              ?.querySelector<HTMLButtonElement>(`[id='${id}-tab-${nextIndex}']`)\n                              ?.focus();\n                          }\n                        }}\n                      >\n                        <X size={13} aria-hidden=\"true\" />\n                      </button>\n                    )}\n                  </TabEntry>\n                ))}\n              </SortableContext>\n            </div>\n          </div>\n          {overflowKeys.length > 0 && (\n            <Dropdown\n              items={items\n                .filter((item) => overflowKeys.includes(item.key))\n                .map((item) => ({\n                  key: item.key,\n                  label: item.label,\n                  disabled: item.disabled,\n                  onClick: () => {\n                    choose(item.key);\n                    requestAnimationFrame(() => {\n                      const target = document.getElementById(`${id}-tab-${items.indexOf(item)}`);\n                      target?.scrollIntoView?.({ block: 'nearest', inline: 'nearest' });\n                      target?.focus();\n                    });\n                  },\n                }))}\n            >\n              <ButtonControl\n                className=\"leaf-tabs__action\"\n                data-tabs-more=\"\"\n                variant=\"ghost\"\n                size={size}\n                startIcon={<Ellipsis size={16} />}\n                aria-label={t('tabs.moreTabs')}\n              />\n            </Dropdown>\n          )}\n          {onAdd && (\n            <ButtonControl\n              className=\"leaf-tabs__action\"\n              variant=\"ghost\"\n              size={size}\n              startIcon={<Plus size={16} />}\n              aria-label={addLabel ?? t('tabs.addTab')}\n              onClick={onAdd}\n            />\n          )}\n          {extra && <div className=\"leaf-tabs__extra\">{extra}</div>}\n        </div>\n      </TabDragScope>\n      <div className=\"leaf-tabs__panels\">\n        {items.map((item, index) => (\n          <div\n            key={item.key}\n            id={`${id}-panel-${index}`}\n            role=\"tabpanel\"\n            aria-labelledby={`${id}-tab-${index}`}\n            hidden={item.key !== selected}\n            // biome-ignore lint/a11y/noNoninteractiveTabindex: Tabpanels are keyboard focus destinations in the ARIA tabs pattern.\n            tabIndex={0}\n            className=\"leaf-tabs__panel\"\n          >\n            {(item.key === selected || (!destroyInactive && visited.includes(item.key))) &&\n              item.children}\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n\nfunction TabEntry({\n  item,\n  sortable,\n  ...props\n}: HTMLAttributes<HTMLDivElement> & { item: TabItem; sortable: boolean }) {\n  return sortable ? (\n    <SortableTab item={item} {...props} />\n  ) : (\n    <div {...props} data-tab-key={item.key} />\n  );\n}\nfunction SortableTab({\n  item,\n  children,\n  ...props\n}: HTMLAttributes<HTMLDivElement> & { item: TabItem }) {\n  const format = useFormattedText();\n  const motion = useMotionEnabled();\n  const {\n    attributes,\n    listeners,\n    setNodeRef,\n    setActivatorNodeRef,\n    transform,\n    transition,\n    isDragging,\n  } = useSortable({ id: item.key, disabled: item.disabled });\n  return (\n    <div\n      {...props}\n      ref={setNodeRef}\n      data-tab-key={item.key}\n      data-dragging={isDragging || undefined}\n      style={{\n        ...props.style,\n        transform: CSS.Transform.toString(transform),\n        transition:\n          motion && transition\n            ? 'transform var(--leaf-motion-slow) var(--leaf-motion-easing)'\n            : undefined,\n      }}\n    >\n      <button\n        type=\"button\"\n        {...attributes}\n        {...listeners}\n        ref={setActivatorNodeRef}\n        disabled={item.disabled}\n        className=\"leaf-tabs__drag\"\n        aria-label={format('tabs.reorder', {\n          label: typeof item.label === 'string' ? item.label : item.key,\n        })}\n      >\n        <GripVertical size={13} aria-hidden=\"true\" />\n      </button>\n      {children}\n    </div>\n  );\n}\n\nfunction TabDragScope({\n  enabled,\n  items,\n  onReorder,\n  children,\n}: {\n  enabled: boolean;\n  items: readonly TabItem[];\n  onReorder?: (items: TabItem[]) => void;\n  children: ReactNode;\n}) {\n  return enabled ? (\n    <TabSortScope items={items} onReorder={onReorder}>\n      {children}\n    </TabSortScope>\n  ) : (\n    children\n  );\n}\nfunction TabSortScope({\n  items,\n  onReorder,\n  children,\n}: {\n  items: readonly TabItem[];\n  onReorder?: (items: TabItem[]) => void;\n  children: ReactNode;\n}) {\n  const id = useId();\n  const accessibility = useDragAnnouncements((key) => {\n    const item = items.find((entry) => entry.key === key);\n    return typeof item?.label === 'string' ? item.label : String(key);\n  });\n  const sensors = useSensors(\n    useSensor(PointerSensor, { activationConstraint: { distance: 6 } }),\n    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),\n  );\n  return (\n    <DndContext\n      id={id}\n      sensors={sensors}\n      collisionDetection={closestCenter}\n      accessibility={accessibility}\n      onDragEnd={({ active, over }) => {\n        if (!over || active.id === over.id) return;\n        const from = items.findIndex((item) => item.key === active.id);\n        const to = items.findIndex((item) => item.key === over.id);\n        if (from >= 0 && to >= 0 && !items[to]?.disabled)\n          onReorder?.(arrayMove([...items], from, to));\n      }}\n    >\n      {children}\n    </DndContext>\n  );\n}\n\nexport function Tabs(rawProps: TabsProps) {\n  const props = useComponentProps('Tabs', rawProps);\n  return <TabsControl {...props} />;\n}\n"],"names":["TabsControl","items","activeKey","defaultActiveKey","onChange","type","placement","size","activationMode","destroyInactive","extra","onClose","onAdd","addLabel","overflow","sortable","onReorder","className","label","props","direction","useLeafConfig","t","useText","format","useFormattedText","enabled","item","internal","setInternal","useState","requested","selected","focused","setFocused","focusKey","visited","setVisited","id","useId","list","useRef","track","indicator","useMovingIndicator","header","overflowKeys","setOverflowKeys","sorting","Boolean","useEffect","node","container","measure","horizontal","entries","Array","more","fullSize","Number","getComputedStyle","total","rect","keys","entry","previous","key","index","observer","ResizeObserver","window","choose","undefined","classes","TabDragScope","event","SortableContext","horizontalListSortingStrategy","verticalListSortingStrategy","TabEntry","next","position","forward","backward","nextIndex","X","Dropdown","requestAnimationFrame","target","document","ButtonControl","Ellipsis","Plus","SortableTab","children","motion","useMotionEnabled","attributes","listeners","setNodeRef","setActivatorNodeRef","transform","transition","isDragging","useSortable","CSS","GripVertical","TabSortScope","accessibility","useDragAnnouncements","String","sensors","useSensors","useSensor","PointerSensor","KeyboardSensor","sortableKeyboardCoordinates","DndContext","closestCenter","active","over","from","to","arrayMove","Tabs","rawProps","useComponentProps"],"mappings":"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"}

package/dist/esm/browser/modules/tag/group.js

@@ -1,12 +1,15 @@
 "use client";
+import '../../../styles/foundation.css';
 import '../../../styles/components/tag.css';
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useRef } from "react";
+import { useComponentProps } from "../config-provider/component-defaults.js";
 import { classes } from "../shared/classes.js";
 import { FormValue, useFieldValue } from "../shared/field.js";
 import { useListMotion } from "../shared/motion.js";
 import { useControllable } from "../shared/use-controllable.js";
-function CheckableTag({ checked, defaultChecked = false, onChange, size = 'md', children, className, onClick, ...props }) {
+function CheckableTag(rawProps) {
+    const { checked, defaultChecked = false, onChange, size = 'md', children, className, onClick, ...props } = useComponentProps('CheckableTag', rawProps);
     const [current, change] = useControllable(checked, defaultChecked, onChange);
     return /*#__PURE__*/ jsx("button", {
         ...props,
@@ -21,7 +24,8 @@ function CheckableTag({ checked, defaultChecked = false, onChange, size = 'md',
         children: children
     });
 }
-function TagGroup({ options, value, defaultValue = [], onChange, disabled, size, name, form, required, className, ...props }) {
+function TagGroup(rawProps) {
+    const { options, value, defaultValue = [], onChange, disabled, size, name, form, required, className, ...props } = useComponentProps('TagGroup', rawProps);
     const trigger = useRef(null);
     const root = useRef(null);
     const [current, setCurrent] = useFieldValue(value, defaultValue, trigger, form);