@ifhover/leaf-ui 0.0.0-stage → 0.5.0

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

@@ -0,0 +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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"}

package/dist/esm/tabs/use-moving-indicator.d.ts

@@ -0,0 +1,4 @@
+import { type RefObject } from 'react';
+/** A single selection surface follows the actual item geometry, including RTL scroll offsets. */
+export declare function useMovingIndicator(container: RefObject<HTMLElement | null>, indicator: RefObject<HTMLElement | null>, selector: string, selection: unknown, enabled?: boolean): void;
+//# sourceMappingURL=use-moving-indicator.d.ts.map

package/dist/esm/tabs/use-moving-indicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-moving-indicator.d.ts","sourceRoot":"","sources":["../../../src/tabs/use-moving-indicator.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAsC,MAAM,OAAO,CAAC;AAI3E,iGAAiG;AACjG,wBAAgB,kBAAkB,CAChC,SAAS,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EACxC,SAAS,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EACxC,QAAQ,EAAE,MAAM,EAChB,SAAS,EAAE,OAAO,EAClB,OAAO,UAAO,QA0Ef"}

package/dist/esm/tabs/use-moving-indicator.js

@@ -0,0 +1,81 @@
+"use client";
+import { useEffect, useLayoutEffect, useRef } from "react";
+const useBrowserLayoutEffect = "u" < typeof window ? useEffect : useLayoutEffect;
+function useMovingIndicator(container, indicator, selector, selection, enabled = true) {
+    const previous = useRef(null);
+    const refresh = useRef(()=>{});
+    useBrowserLayoutEffect(()=>{
+        const host = container.current;
+        const marker = indicator.current;
+        if (!enabled || !host || !marker) return;
+        let frame = 0;
+        const measure = (animate)=>{
+            const active = host.querySelector(selector);
+            if (!active || active.closest('[inert],[hidden]')) {
+                marker.dataset.visible = 'false';
+                previous.current = null;
+                return;
+            }
+            const bounds = host.getBoundingClientRect();
+            const item = active.getBoundingClientRect();
+            const scaleX = host.offsetWidth ? bounds.width / host.offsetWidth : 1;
+            const scaleY = host.offsetHeight ? bounds.height / host.offsetHeight : 1;
+            const geometry = {
+                '--leaf-indicator-x': `${(item.left - bounds.left) / (scaleX || 1) + host.scrollLeft - host.clientLeft}px`,
+                '--leaf-indicator-y': `${(item.top - bounds.top) / (scaleY || 1) + host.scrollTop - host.clientTop}px`,
+                '--leaf-indicator-width': `${item.width / (scaleX || 1)}px`,
+                '--leaf-indicator-height': `${item.height / (scaleY || 1)}px`
+            };
+            if ('true' === marker.dataset.visible && Object.entries(geometry).every(([key, value])=>marker.style.getPropertyValue(key) === value)) return;
+            marker.dataset.animate = String(animate && null !== previous.current);
+            for (const [key, value] of Object.entries(geometry))marker.style.setProperty(key, value);
+            marker.dataset.visible = String(item.width > 0 && item.height > 0);
+            previous.current = active;
+        };
+        refresh.current = measure;
+        const schedule = ()=>{
+            cancelAnimationFrame(frame);
+            frame = requestAnimationFrame(()=>{
+                for (const node of host.querySelectorAll('[data-leaf-indicator-item]'))observer?.observe(node);
+                measure(false);
+            });
+        };
+        const observer = "u" < typeof ResizeObserver ? null : new ResizeObserver(schedule);
+        observer?.observe(host);
+        for (const node of host.querySelectorAll('[data-leaf-indicator-item]'))observer?.observe(node);
+        const mutation = "u" < typeof MutationObserver ? null : new MutationObserver((records)=>{
+            if (records.some((record)=>record.target !== marker)) schedule();
+        });
+        mutation?.observe(host, {
+            childList: true,
+            subtree: true,
+            characterData: true
+        });
+        host.addEventListener('scroll', schedule, {
+            passive: true
+        });
+        window.addEventListener('resize', schedule);
+        measure(false);
+        document.fonts?.addEventListener('loadingdone', schedule);
+        return ()=>{
+            cancelAnimationFrame(frame);
+            observer?.disconnect();
+            mutation?.disconnect();
+            host.removeEventListener('scroll', schedule);
+            window.removeEventListener('resize', schedule);
+            document.fonts?.removeEventListener('loadingdone', schedule);
+            refresh.current = ()=>{};
+        };
+    }, [
+        container,
+        indicator,
+        selector,
+        enabled
+    ]);
+    useBrowserLayoutEffect(()=>refresh.current(true), [
+        selection
+    ]);
+}
+export { useMovingIndicator };
+
+//# sourceMappingURL=use-moving-indicator.js.map

package/dist/esm/tabs/use-moving-indicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs/use-moving-indicator.js","sources":["../../../src/tabs/use-moving-indicator.ts"],"sourcesContent":["import { type RefObject, useEffect, useLayoutEffect, useRef } from 'react';\n\nconst useBrowserLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;\n\n/** A single selection surface follows the actual item geometry, including RTL scroll offsets. */\nexport function useMovingIndicator(\n  container: RefObject<HTMLElement | null>,\n  indicator: RefObject<HTMLElement | null>,\n  selector: string,\n  selection: unknown,\n  enabled = true,\n) {\n  const previous = useRef<HTMLElement | null>(null);\n  const refresh = useRef<(animate: boolean) => void>(() => {});\n  useBrowserLayoutEffect(() => {\n    const host = container.current;\n    const marker = indicator.current;\n    if (!enabled || !host || !marker) return;\n    let frame = 0;\n    const measure = (animate: boolean) => {\n      const active = host.querySelector<HTMLElement>(selector);\n      if (!active || active.closest('[inert],[hidden]')) {\n        marker.dataset.visible = 'false';\n        previous.current = null;\n        return;\n      }\n      const bounds = host.getBoundingClientRect();\n      const item = active.getBoundingClientRect();\n      const scaleX = host.offsetWidth ? bounds.width / host.offsetWidth : 1;\n      const scaleY = host.offsetHeight ? bounds.height / host.offsetHeight : 1;\n      const geometry = {\n        '--leaf-indicator-x': `${(item.left - bounds.left) / (scaleX || 1) + host.scrollLeft - host.clientLeft}px`,\n        '--leaf-indicator-y': `${(item.top - bounds.top) / (scaleY || 1) + host.scrollTop - host.clientTop}px`,\n        '--leaf-indicator-width': `${item.width / (scaleX || 1)}px`,\n        '--leaf-indicator-height': `${item.height / (scaleY || 1)}px`,\n      };\n      if (\n        marker.dataset.visible === 'true' &&\n        Object.entries(geometry).every(\n          ([key, value]) => marker.style.getPropertyValue(key) === value,\n        )\n      )\n        return;\n      marker.dataset.animate = String(animate && previous.current !== null);\n      for (const [key, value] of Object.entries(geometry)) marker.style.setProperty(key, value);\n      marker.dataset.visible = String(item.width > 0 && item.height > 0);\n      previous.current = active;\n    };\n    refresh.current = measure;\n    const schedule = () => {\n      cancelAnimationFrame(frame);\n      frame = requestAnimationFrame(() => {\n        for (const node of host.querySelectorAll<HTMLElement>('[data-leaf-indicator-item]'))\n          observer?.observe(node);\n        measure(false);\n      });\n    };\n    const observer = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(schedule);\n    observer?.observe(host);\n    for (const node of host.querySelectorAll<HTMLElement>('[data-leaf-indicator-item]'))\n      observer?.observe(node);\n    const mutation =\n      typeof MutationObserver === 'undefined'\n        ? null\n        : new MutationObserver((records) => {\n            if (records.some((record) => record.target !== marker)) schedule();\n          });\n    mutation?.observe(host, { childList: true, subtree: true, characterData: true });\n    host.addEventListener('scroll', schedule, { passive: true });\n    window.addEventListener('resize', schedule);\n    measure(false);\n    // Font loading can change intrinsic widths without a viewport resize.\n    document.fonts?.addEventListener('loadingdone', schedule);\n    return () => {\n      cancelAnimationFrame(frame);\n      observer?.disconnect();\n      mutation?.disconnect();\n      host.removeEventListener('scroll', schedule);\n      window.removeEventListener('resize', schedule);\n      document.fonts?.removeEventListener('loadingdone', schedule);\n      refresh.current = () => {};\n    };\n  }, [container, indicator, selector, enabled]);\n  useBrowserLayoutEffect(() => refresh.current(true), [selection]);\n}\n"],"names":["useBrowserLayoutEffect","window","useEffect","useLayoutEffect","useMovingIndicator","container","indicator","selector","selection","enabled","previous","useRef","refresh","host","marker","frame","measure","animate","active","bounds","item","scaleX","scaleY","geometry","Object","key","value","String","schedule","cancelAnimationFrame","requestAnimationFrame","node","observer","ResizeObserver","mutation","MutationObserver","records","record","document"],"mappings":"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"}

package/dist/esm/tag/group.d.ts

@@ -0,0 +1,27 @@
+import { type ButtonHTMLAttributes, type HTMLAttributes, type ReactNode } from 'react';
+import type { ControlSize } from '../shared/types.js';
+export interface CheckableTagProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'> {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onChange?: (checked: boolean) => void;
+    size?: ControlSize;
+}
+export declare function CheckableTag({ checked, defaultChecked, onChange, size, children, className, onClick, ...props }: CheckableTagProps): import("react").JSX.Element;
+export interface TagOption {
+    value: string;
+    label: ReactNode;
+    disabled?: boolean;
+}
+export interface TagGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {
+    options: readonly TagOption[];
+    value?: readonly string[];
+    defaultValue?: readonly string[];
+    onChange?: (values: string[]) => void;
+    disabled?: boolean;
+    size?: ControlSize;
+    name?: string;
+    form?: string;
+    required?: boolean;
+}
+export declare function TagGroup({ options, value, defaultValue, onChange, disabled, size, name, form, required, className, ...props }: TagGroupProps): import("react").JSX.Element;
+//# sourceMappingURL=group.d.ts.map

package/dist/esm/tag/group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"group.d.ts","sourceRoot":"","sources":["../../../src/tag/group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,oBAAoB,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAU,MAAM,OAAO,CAAC;AAI/F,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEnD,MAAM,WAAW,iBACf,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC;IACjE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB;AACD,wBAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,cAAsB,EACtB,QAAQ,EACR,IAAW,EACX,QAAQ,EACR,SAAS,EACT,OAAO,EACP,GAAG,KAAK,EACT,EAAE,iBAAiB,+BAuBnB;AACD,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AACD,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,GAAG,cAAc,CAAC;IACzE,OAAO,EAAE,SAAS,SAAS,EAAE,CAAC;IAC9B,KAAK,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAC1B,YAAY,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IACjC,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AACD,wBAAgB,QAAQ,CAAC,EACvB,OAAO,EACP,KAAK,EACL,YAAiB,EACjB,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,aAAa,+BA+Cf"}

package/dist/esm/tag/group.js

@@ -0,0 +1,64 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+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 }) {
+    const [current, change] = useControllable(checked, defaultChecked, onChange);
+    return /*#__PURE__*/ jsx("button", {
+        ...props,
+        type: props.type ?? 'button',
+        className: classes('leaf-tag', 'leaf-tag--soft', `leaf-tag--${size}`, 'leaf-checkable-tag', className),
+        "aria-pressed": current,
+        "data-color": current ? 'primary' : 'default',
+        onClick: (event)=>{
+            onClick?.(event);
+            if (!event.defaultPrevented) change(!current);
+        },
+        children: children
+    });
+}
+function TagGroup({ options, value, defaultValue = [], onChange, disabled, size, name, form, required, className, ...props }) {
+    const trigger = useRef(null);
+    const root = useRef(null);
+    const [current, setCurrent] = useFieldValue(value, defaultValue, trigger, form);
+    useListMotion(root, JSON.stringify(options.map((option)=>option.value)), '.leaf-checkable-tag[data-motion-key]');
+    return /*#__PURE__*/ jsxs("div", {
+        ...props,
+        ref: root,
+        className: classes('leaf-tag-group', className),
+        children: [
+            options.map((option, index)=>/*#__PURE__*/ jsx("button", {
+                    ref: 0 === index ? trigger : void 0,
+                    type: "button",
+                    className: classes('leaf-tag', 'leaf-tag--soft', `leaf-tag--${size ?? 'md'}`, 'leaf-checkable-tag'),
+                    "data-color": current.includes(option.value) ? 'primary' : 'default',
+                    "data-motion-key": option.value,
+                    "aria-pressed": current.includes(option.value),
+                    disabled: disabled || option.disabled,
+                    onClick: ()=>{
+                        const next = current.includes(option.value) ? current.filter((key)=>key !== option.value) : [
+                            ...current,
+                            option.value
+                        ];
+                        setCurrent(next);
+                        onChange?.(next);
+                    },
+                    children: option.label
+                }, option.value)),
+            /*#__PURE__*/ jsx(FormValue, {
+                name: name,
+                form: form,
+                required: required,
+                disabled: disabled,
+                value: current.length ? JSON.stringify(current) : '',
+                triggerRef: trigger
+            })
+        ]
+    });
+}
+export { CheckableTag, TagGroup };
+
+//# sourceMappingURL=group.js.map

package/dist/esm/tag/group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tag/group.js","sources":["../../../src/tag/group.tsx"],"sourcesContent":["import { type ButtonHTMLAttributes, type HTMLAttributes, type ReactNode, useRef } from 'react';\nimport { classes } from '../shared/classes';\nimport { FormValue, useFieldValue } from '../shared/field';\nimport { useListMotion } from '../shared/motion';\nimport type { ControlSize } from '../shared/types';\nimport { useControllable } from '../shared/use-controllable';\nexport interface CheckableTagProps\n  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'> {\n  checked?: boolean;\n  defaultChecked?: boolean;\n  onChange?: (checked: boolean) => void;\n  size?: ControlSize;\n}\nexport function CheckableTag({\n  checked,\n  defaultChecked = false,\n  onChange,\n  size = 'md',\n  children,\n  className,\n  onClick,\n  ...props\n}: CheckableTagProps) {\n  const [current, change] = useControllable(checked, defaultChecked, onChange);\n  return (\n    <button\n      {...props}\n      type={props.type ?? 'button'}\n      className={classes(\n        'leaf-tag',\n        'leaf-tag--soft',\n        `leaf-tag--${size}`,\n        'leaf-checkable-tag',\n        className,\n      )}\n      aria-pressed={current}\n      data-color={current ? 'primary' : 'default'}\n      onClick={(event) => {\n        onClick?.(event);\n        if (!event.defaultPrevented) change(!current);\n      }}\n    >\n      {children}\n    </button>\n  );\n}\nexport interface TagOption {\n  value: string;\n  label: ReactNode;\n  disabled?: boolean;\n}\nexport interface TagGroupProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {\n  options: readonly TagOption[];\n  value?: readonly string[];\n  defaultValue?: readonly string[];\n  onChange?: (values: string[]) => void;\n  disabled?: boolean;\n  size?: ControlSize;\n  name?: string;\n  form?: string;\n  required?: boolean;\n}\nexport function TagGroup({\n  options,\n  value,\n  defaultValue = [],\n  onChange,\n  disabled,\n  size,\n  name,\n  form,\n  required,\n  className,\n  ...props\n}: TagGroupProps) {\n  const trigger = useRef<HTMLButtonElement>(null);\n  const root = useRef<HTMLDivElement>(null);\n  const [current, setCurrent] = useFieldValue(value, defaultValue, trigger, form);\n  useListMotion(\n    root,\n    JSON.stringify(options.map((option) => option.value)),\n    '.leaf-checkable-tag[data-motion-key]',\n  );\n  return (\n    <div {...props} ref={root} className={classes('leaf-tag-group', className)}>\n      {options.map((option, index) => (\n        <button\n          key={option.value}\n          ref={index === 0 ? trigger : undefined}\n          type=\"button\"\n          className={classes(\n            'leaf-tag',\n            'leaf-tag--soft',\n            `leaf-tag--${size ?? 'md'}`,\n            'leaf-checkable-tag',\n          )}\n          data-color={current.includes(option.value) ? 'primary' : 'default'}\n          data-motion-key={option.value}\n          aria-pressed={current.includes(option.value)}\n          disabled={disabled || option.disabled}\n          onClick={() => {\n            const next = current.includes(option.value)\n              ? current.filter((key) => key !== option.value)\n              : [...current, option.value];\n            setCurrent(next);\n            onChange?.(next);\n          }}\n        >\n          {option.label}\n        </button>\n      ))}\n      <FormValue\n        name={name}\n        form={form}\n        required={required}\n        disabled={disabled}\n        value={current.length ? JSON.stringify(current) : ''}\n        triggerRef={trigger}\n      />\n    </div>\n  );\n}\n"],"names":["CheckableTag","checked","defaultChecked","onChange","size","children","className","onClick","props","current","change","useControllable","classes","event","TagGroup","options","value","defaultValue","disabled","name","form","required","trigger","useRef","root","setCurrent","useFieldValue","useListMotion","JSON","option","index","undefined","next","key","FormValue"],"mappings":";;;;;;;AAaO,SAASA,aAAa,EAC3BC,OAAO,EACPC,iBAAiB,KAAK,EACtBC,QAAQ,EACRC,OAAO,IAAI,EACXC,QAAQ,EACRC,SAAS,EACTC,OAAO,EACP,GAAGC,OACe;IAClB,MAAM,CAACC,SAASC,OAAO,GAAGC,gBAAgBV,SAASC,gBAAgBC;IACnE,OAAO,WAAP,GACE,IAAC;QACE,GAAGK,KAAK;QACT,MAAMA,MAAM,IAAI,IAAI;QACpB,WAAWI,QACT,YACA,kBACA,CAAC,UAAU,EAAER,MAAM,EACnB,sBACAE;QAEF,gBAAcG;QACd,cAAYA,UAAU,YAAY;QAClC,SAAS,CAACI;YACRN,UAAUM;YACV,IAAI,CAACA,MAAM,gBAAgB,EAAEH,OAAO,CAACD;QACvC;kBAECJ;;AAGP;AAkBO,SAASS,SAAS,EACvBC,OAAO,EACPC,KAAK,EACLC,eAAe,EAAE,EACjBd,QAAQ,EACRe,QAAQ,EACRd,IAAI,EACJe,IAAI,EACJC,IAAI,EACJC,QAAQ,EACRf,SAAS,EACT,GAAGE,OACW;IACd,MAAMc,UAAUC,OAA0B;IAC1C,MAAMC,OAAOD,OAAuB;IACpC,MAAM,CAACd,SAASgB,WAAW,GAAGC,cAAcV,OAAOC,cAAcK,SAASF;IAC1EO,cACEH,MACAI,KAAK,SAAS,CAACb,QAAQ,GAAG,CAAC,CAACc,SAAWA,OAAO,KAAK,IACnD;IAEF,OAAO,WAAP,GACE,KAAC;QAAK,GAAGrB,KAAK;QAAE,KAAKgB;QAAM,WAAWZ,QAAQ,kBAAkBN;;YAC7DS,QAAQ,GAAG,CAAC,CAACc,QAAQC,QAAAA,WAAAA,GACpB,IAAC;oBAEC,KAAKA,AAAU,MAAVA,QAAcR,UAAUS;oBAC7B,MAAK;oBACL,WAAWnB,QACT,YACA,kBACA,CAAC,UAAU,EAAER,QAAQ,MAAM,EAC3B;oBAEF,cAAYK,QAAQ,QAAQ,CAACoB,OAAO,KAAK,IAAI,YAAY;oBACzD,mBAAiBA,OAAO,KAAK;oBAC7B,gBAAcpB,QAAQ,QAAQ,CAACoB,OAAO,KAAK;oBAC3C,UAAUX,YAAYW,OAAO,QAAQ;oBACrC,SAAS;wBACP,MAAMG,OAAOvB,QAAQ,QAAQ,CAACoB,OAAO,KAAK,IACtCpB,QAAQ,MAAM,CAAC,CAACwB,MAAQA,QAAQJ,OAAO,KAAK,IAC5C;+BAAIpB;4BAASoB,OAAO,KAAK;yBAAC;wBAC9BJ,WAAWO;wBACX7B,WAAW6B;oBACb;8BAECH,OAAO,KAAK;mBArBRA,OAAO,KAAK;0BAwBrB,IAACK,WAASA;gBACR,MAAMf;gBACN,MAAMC;gBACN,UAAUC;gBACV,UAAUH;gBACV,OAAOT,QAAQ,MAAM,GAAGmB,KAAK,SAAS,CAACnB,WAAW;gBAClD,YAAYa;;;;AAIpB"}

package/dist/esm/tag/index.d.ts

@@ -0,0 +1,5 @@
+export type { CheckableTagProps, TagGroupProps, TagOption } from './group.js';
+export { CheckableTag, TagGroup } from './group.js';
+export type { TagProps } from './tag.js';
+export { Tag } from './tag.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/tag/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/tag/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,iBAAiB,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAC3E,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AACjD,YAAY,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC"}

package/dist/esm/tag/index.js

@@ -0,0 +1,3 @@
+"use client";
+export { CheckableTag, TagGroup } from "./group.js";
+export { Tag } from "./tag.js";

package/dist/esm/tag/tag.d.ts

@@ -0,0 +1,12 @@
+import { type HTMLAttributes, type MouseEvent, type ReactNode } from 'react';
+import type { ControlSize } from '../shared/types.js';
+export interface TagProps extends HTMLAttributes<HTMLSpanElement> {
+    color?: 'default' | 'primary' | 'success' | 'warning' | 'error' | 'info' | (string & {});
+    variant?: 'soft' | 'outline' | 'solid';
+    size?: ControlSize;
+    icon?: ReactNode;
+    closable?: boolean;
+    onClose?: (event: MouseEvent<HTMLButtonElement>) => void;
+}
+export declare function Tag({ color, variant, size, icon, closable, onClose, className, style, children, ...props }: TagProps): import("react").JSX.Element | null;
+//# sourceMappingURL=tag.d.ts.map

package/dist/esm/tag/tag.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../../src/tag/tag.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,UAAU,EACf,KAAK,SAAS,EAIf,MAAM,OAAO,CAAC;AAOf,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEnD,MAAM,WAAW,QAAS,SAAQ,cAAc,CAAC,eAAe,CAAC;IAC/D,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IACzF,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC;IACvC,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CAC1D;AAED,wBAAgB,GAAG,CAAC,EAClB,KAAiB,EACjB,OAAgB,EAChB,IAAW,EACX,IAAI,EACJ,QAAgB,EAChB,OAAO,EACP,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,QAAQ,sCAoGV"}

package/dist/esm/tag/tag.js

@@ -0,0 +1,137 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { X } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { defaultColors, mixColors } from "../colors.js";
+import { useLeafConfig } from "../config-provider/context.js";
+import { classes } from "../shared/classes.js";
+import { composedParent } from "../shared/dom.js";
+import { inertProps } from "../shared/inert.js";
+import { usePresence } from "../shared/presence.js";
+const presets = [
+    'default',
+    'primary',
+    'success',
+    'warning',
+    'error',
+    'info'
+];
+function Tag({ color = 'default', variant = 'soft', size = 'md', icon, closable = false, onClose, className, style, children, ...props }) {
+    const { messages, theme } = useLeafConfig();
+    const [closed, setClosed] = useState(false);
+    const root = useRef(null);
+    const present = usePresence(!closed, root);
+    const custom = !presets.includes(color);
+    const surface = theme.tokens?.surfaceColor ?? defaultColors[theme.appearance ?? 'light'].surface;
+    const customVariables = custom ? {
+        '--leaf-tag-color': color,
+        '--leaf-tag-color-alpha-22': mixColors(color, 'transparent', 22),
+        '--leaf-tag-color-alpha-10': mixColors(color, 'transparent', 10),
+        '--leaf-tag-color-surface-8': mixColors(color, surface, 8)
+    } : {};
+    useEffect(()=>{
+        const node = root.current;
+        if (!node || !custom) return;
+        const sync = ()=>{
+            const probe = document.createElement('span');
+            probe.style.color = color;
+            probe.hidden = true;
+            node.append(probe);
+            const concrete = getComputedStyle(probe).color;
+            const background = getComputedStyle(node).getPropertyValue('--leaf-color-surface').trim() || surface;
+            probe.remove();
+            for (const [suffix, target, weight] of [
+                [
+                    'alpha-22',
+                    'transparent',
+                    22
+                ],
+                [
+                    'alpha-10',
+                    'transparent',
+                    10
+                ],
+                [
+                    'surface-8',
+                    background,
+                    8
+                ]
+            ]){
+                const value = mixColors(concrete, target, weight);
+                const key = `--leaf-tag-color-${suffix}`;
+                if (value && node.style.getPropertyValue(key) !== value) node.style.setProperty(key, value);
+            }
+        };
+        sync();
+        const observer = new MutationObserver(sync);
+        let ancestor = node;
+        while(ancestor){
+            observer.observe(ancestor, {
+                attributes: true,
+                attributeFilter: [
+                    'class',
+                    'style',
+                    'data-leaf-theme'
+                ]
+            });
+            ancestor = composedParent(ancestor);
+        }
+        return ()=>observer.disconnect();
+    }, [
+        color,
+        custom,
+        surface
+    ]);
+    if (!present) return null;
+    return /*#__PURE__*/ jsxs("span", {
+        ...props,
+        ...inertProps(closed),
+        ref: root,
+        "data-state": closed ? 'closing' : void 0,
+        "aria-hidden": closed || props['aria-hidden'],
+        className: classes('leaf-tag', `leaf-tag--${variant}`, `leaf-tag--${size}`, className),
+        "data-color": presets.includes(color) ? color : void 0,
+        style: {
+            ...customVariables,
+            ...style
+        },
+        children: [
+            icon && /*#__PURE__*/ jsx("span", {
+                className: "leaf-tag__icon",
+                "aria-hidden": "true",
+                children: icon
+            }),
+            /*#__PURE__*/ jsx("span", {
+                children: children
+            }),
+            closable && /*#__PURE__*/ jsx("button", {
+                type: "button",
+                className: "leaf-tag__close",
+                "aria-label": messages.remove,
+                onClick: (event)=>{
+                    onClose?.(event);
+                    if (!event.defaultPrevented) {
+                        const node = root.current;
+                        if (node) {
+                            node.style.setProperty('--leaf-tag-width', `${node.getBoundingClientRect().width}px`);
+                            node.offsetWidth;
+                            if (node.contains(document.activeElement)) {
+                                const buttons = Array.from(node.parentElement?.querySelectorAll('.leaf-tag__close') ?? []);
+                                const index = buttons.indexOf(event.currentTarget);
+                                (buttons[index + 1] ?? buttons[index - 1])?.focus();
+                            }
+                        }
+                        setClosed(true);
+                    }
+                },
+                children: /*#__PURE__*/ jsx(X, {
+                    size: 12,
+                    "aria-hidden": "true"
+                })
+            })
+        ]
+    });
+}
+export { Tag };
+
+//# sourceMappingURL=tag.js.map

package/dist/esm/tag/tag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tag/tag.js","sources":["../../../src/tag/tag.tsx"],"sourcesContent":["import { X } from 'lucide-react';\nimport {\n  type HTMLAttributes,\n  type MouseEvent,\n  type ReactNode,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { defaultColors, mixColors } from '../colors';\nimport { useLeafConfig } from '../config-provider/context';\nimport { classes } from '../shared/classes';\nimport { composedParent } from '../shared/dom';\nimport { inertProps } from '../shared/inert';\nimport { usePresence } from '../shared/presence';\nimport type { ControlSize } from '../shared/types';\n\nexport interface TagProps extends HTMLAttributes<HTMLSpanElement> {\n  color?: 'default' | 'primary' | 'success' | 'warning' | 'error' | 'info' | (string & {});\n  variant?: 'soft' | 'outline' | 'solid';\n  size?: ControlSize;\n  icon?: ReactNode;\n  closable?: boolean;\n  onClose?: (event: MouseEvent<HTMLButtonElement>) => void;\n}\nconst presets = ['default', 'primary', 'success', 'warning', 'error', 'info'];\nexport function Tag({\n  color = 'default',\n  variant = 'soft',\n  size = 'md',\n  icon,\n  closable = false,\n  onClose,\n  className,\n  style,\n  children,\n  ...props\n}: TagProps) {\n  const { messages, theme } = useLeafConfig();\n  const [closed, setClosed] = useState(false);\n  const root = useRef<HTMLSpanElement>(null);\n  const present = usePresence(!closed, root);\n  const custom = !presets.includes(color);\n  const surface = theme.tokens?.surfaceColor ?? defaultColors[theme.appearance ?? 'light'].surface;\n  const customVariables = custom\n    ? {\n        '--leaf-tag-color': color,\n        '--leaf-tag-color-alpha-22': mixColors(color, 'transparent', 22),\n        '--leaf-tag-color-alpha-10': mixColors(color, 'transparent', 10),\n        '--leaf-tag-color-surface-8': mixColors(color, surface, 8),\n      }\n    : {};\n  useEffect(() => {\n    const node = root.current;\n    if (!node || !custom) return;\n    const sync = () => {\n      const probe = document.createElement('span');\n      probe.style.color = color;\n      probe.hidden = true;\n      node.append(probe);\n      const concrete = getComputedStyle(probe).color;\n      const background =\n        getComputedStyle(node).getPropertyValue('--leaf-color-surface').trim() || surface;\n      probe.remove();\n      for (const [suffix, target, weight] of [\n        ['alpha-22', 'transparent', 22],\n        ['alpha-10', 'transparent', 10],\n        ['surface-8', background, 8],\n      ] as const) {\n        const value = mixColors(concrete, target, weight);\n        const key = `--leaf-tag-color-${suffix}`;\n        if (value && node.style.getPropertyValue(key) !== value) node.style.setProperty(key, value);\n      }\n    };\n    sync();\n    const observer = new MutationObserver(sync);\n    let ancestor: HTMLElement | null = node;\n    while (ancestor) {\n      observer.observe(ancestor, {\n        attributes: true,\n        attributeFilter: ['class', 'style', 'data-leaf-theme'],\n      });\n      ancestor = composedParent(ancestor);\n    }\n    return () => observer.disconnect();\n  }, [color, custom, surface]);\n  if (!present) return null;\n  return (\n    <span\n      {...props}\n      {...inertProps(closed)}\n      ref={root}\n      data-state={closed ? 'closing' : undefined}\n      aria-hidden={closed || props['aria-hidden']}\n      className={classes('leaf-tag', `leaf-tag--${variant}`, `leaf-tag--${size}`, className)}\n      data-color={presets.includes(color) ? color : undefined}\n      style={{ ...customVariables, ...style }}\n    >\n      {icon && (\n        <span className=\"leaf-tag__icon\" aria-hidden=\"true\">\n          {icon}\n        </span>\n      )}\n      <span>{children}</span>\n      {closable && (\n        <button\n          type=\"button\"\n          className=\"leaf-tag__close\"\n          aria-label={messages.remove}\n          onClick={(event) => {\n            onClose?.(event);\n            if (!event.defaultPrevented) {\n              const node = root.current;\n              if (node) {\n                node.style.setProperty(\n                  '--leaf-tag-width',\n                  `${node.getBoundingClientRect().width}px`,\n                );\n                void node.offsetWidth;\n                if (node.contains(document.activeElement)) {\n                  const buttons = Array.from(\n                    node.parentElement?.querySelectorAll<HTMLButtonElement>('.leaf-tag__close') ??\n                      [],\n                  );\n                  const index = buttons.indexOf(event.currentTarget);\n                  (buttons[index + 1] ?? buttons[index - 1])?.focus();\n                }\n              }\n              setClosed(true);\n            }\n          }}\n        >\n          <X size={12} aria-hidden=\"true\" />\n        </button>\n      )}\n    </span>\n  );\n}\n"],"names":["presets","Tag","color","variant","size","icon","closable","onClose","className","style","children","props","messages","theme","useLeafConfig","closed","setClosed","useState","root","useRef","present","usePresence","custom","surface","defaultColors","customVariables","mixColors","useEffect","node","sync","probe","document","concrete","getComputedStyle","background","suffix","target","weight","value","key","observer","MutationObserver","ancestor","composedParent","inertProps","undefined","classes","event","buttons","Array","index","X"],"mappings":"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"}

package/dist/esm/textarea/index.d.ts

@@ -0,0 +1,3 @@
+export type { TextareaAutoSize } from './textarea.js';
+export * from './textarea.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/textarea/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/textarea/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AACnD,cAAc,YAAY,CAAC"}

package/dist/esm/textarea/index.js

@@ -0,0 +1,2 @@
+"use client";
+export * from "./textarea.js";

package/dist/esm/textarea/textarea.d.ts

@@ -0,0 +1,15 @@
+import { type ReactNode, type TextareaHTMLAttributes } from 'react';
+import type { ControlSize, ControlStatus } from '../shared/types.js';
+export interface TextareaAutoSize {
+    minRows?: number;
+    maxRows?: number;
+}
+export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+    size?: ControlSize;
+    status?: ControlStatus;
+    resize?: 'none' | 'vertical' | 'both';
+    autoSize?: boolean | TextareaAutoSize;
+    showCount?: boolean | ((value: string, maxLength?: number) => ReactNode);
+}
+export declare const Textarea: import("react").ForwardRefExoticComponent<TextareaProps & import("react").RefAttributes<HTMLTextAreaElement>>;
+//# sourceMappingURL=textarea.d.ts.map

package/dist/esm/textarea/textarea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../src/textarea/textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,SAAS,EACd,KAAK,sBAAsB,EAI5B,MAAM,OAAO,CAAC;AAKf,OAAO,KAAK,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAElE,MAAM,WAAW,gBAAgB;IAC/B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AACD,MAAM,WAAW,aAAc,SAAQ,sBAAsB,CAAC,mBAAmB,CAAC;IAChF,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,MAAM,CAAC;IACtC,QAAQ,CAAC,EAAE,OAAO,GAAG,gBAAgB,CAAC;IACtC,SAAS,CAAC,EAAE,OAAO,GAAG,CAAC,CAAC,KAAK,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,MAAM,KAAK,SAAS,CAAC,CAAC;CAC1E;AAID,eAAO,MAAM,QAAQ,+GAyHnB,CAAC"}