@oprt/react 0.0.0-stage → 0.1.0

package/dist/Tabs/Tabs.js

@@ -0,0 +1,181 @@
+"use client";
+
+// src/Tabs/Tabs.tsx
+import {
+  Tabs as AriaTabs,
+  TabList as AriaTabList,
+  Tab as AriaTab,
+  TabPanel as AriaTabPanel
+} from "react-aria-components";
+import {
+  createContext,
+  forwardRef,
+  useContext,
+  useRef
+} from "react";
+import clsx from "clsx";
+import { TabsManifest } from "./Tabs.manifest.js";
+import { devValidate } from "../_internal/devValidate.js";
+import { useHydrationRoot } from "../_internal/hydration.js";
+import { useMergedRefs } from "../_internal/mergeRefs.js";
+import {
+  useMotion,
+  composeMotionHandlers,
+  MotionContext
+} from "../_internal/motion.js";
+import { useTabsIndicator } from "./useTabsIndicator.js";
+import { useTabsScroll } from "./useTabsScroll.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var TabsOrientationContext = createContext("horizontal");
+var Tabs = forwardRef(
+  ({
+    className,
+    motion = "auto",
+    orientation = "horizontal",
+    value,
+    defaultValue,
+    onValueChange,
+    children,
+    ...props
+  }, ref) => {
+    const motionState = useMotion(motion);
+    const rootProps = { orientation };
+    if (value !== void 0) rootProps["selectedKey"] = value;
+    if (defaultValue !== void 0) rootProps["defaultSelectedKey"] = defaultValue;
+    if (onValueChange !== void 0) {
+      rootProps["onSelectionChange"] = (key) => onValueChange(String(key));
+    }
+    if (process.env.NODE_ENV !== "production") {
+      devValidate("Tabs", TabsManifest.Tabs.props, { orientation });
+    }
+    const hydration = useHydrationRoot();
+    return /* @__PURE__ */ jsx(MotionContext.Provider, { value: motionState.mode, children: /* @__PURE__ */ jsx(TabsOrientationContext.Provider, { value: orientation, children: /* @__PURE__ */ jsx(
+      AriaTabs,
+      {
+        ...hydration.probeProps,
+        ref,
+        className: clsx("oprt-motion min-w-0 font-sans", className),
+        ...rootProps,
+        ...props,
+        ...composeMotionHandlers(motionState.props, props),
+        render: (domProps) => /* @__PURE__ */ jsx("div", { ...domProps, ...composeMotionHandlers(motionState.props, props) }),
+        children
+      },
+      hydration.key
+    ) }) });
+  }
+);
+Tabs.displayName = "Tabs";
+var scrollingRow = [
+  "min-w-0 -mb-px overflow-x-auto overflow-y-hidden p-px scroll-px-4u",
+  "[scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+  // A fade on each side that hides tabs. A mask uses only alpha, so it suits any background; the
+  // color of its opaque stop does not show.
+  "data-[fade=left]:[mask-image:linear-gradient(to_right,transparent,var(--oprt-text)_var(--oprt-space-4))]",
+  "data-[fade=right]:[mask-image:linear-gradient(to_left,transparent,var(--oprt-text)_var(--oprt-space-4))]",
+  "data-[fade=both]:[mask-image:linear-gradient(to_right,transparent,var(--oprt-text)_var(--oprt-space-4),var(--oprt-text)_calc(100%_-_var(--oprt-space-4)),transparent)]"
+];
+var TabsList = forwardRef(
+  ({ className, children, ...props }, ref) => {
+    const orientation = useContext(TabsOrientationContext);
+    const list = useRef(null);
+    const setNode = useMergedRefs(list, ref);
+    const vertical = orientation === "vertical";
+    const geometry = useTabsIndicator(list, vertical);
+    const fade = useTabsScroll(list, vertical);
+    return /* @__PURE__ */ jsx(
+      AriaTabList,
+      {
+        ref: setNode,
+        className: clsx(
+          "oprt-motion-tabs flex gap-1u",
+          vertical ? "border-b border-oprt-border" : scrollingRow,
+          className
+        ),
+        ...props,
+        "data-orientation": orientation,
+        "data-indicator-ready": geometry ? "true" : void 0,
+        "data-fade": fade,
+        render: (domProps) => (
+          // The row: it draws the rail line under a horizontal list, outside what scrolls. The
+          // same element in both orientations, so changing orientation does not remount the tabs.
+          // A vertical list draws its own rail, so there the row takes no box (`contents`): the
+          // tablist stays its root's flex item, a stretching root runs the rail beside the whole
+          // panel, and placement classes on TabsList (sticky, self-start, order) still place it.
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-oprt-tabs-row": "",
+              className: vertical ? "contents" : "min-w-0 border-b border-oprt-border",
+              children: /* @__PURE__ */ jsxs("div", { ...domProps, children: [
+                domProps.children,
+                geometry && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    "aria-hidden": "true",
+                    className: "oprt-motion-indicator",
+                    "data-immediate": geometry.immediate,
+                    style: {
+                      transform: vertical ? `translateY(${geometry.y}px) scaleY(${geometry.length})` : `translateX(${geometry.x}px) scaleX(${geometry.length})`
+                    }
+                  }
+                )
+              ] })
+            }
+          )
+        ),
+        children
+      }
+    );
+  }
+);
+TabsList.displayName = "TabsList";
+var TabsTrigger = forwardRef(
+  ({ className, value, disabled, ...props }, ref) => /* @__PURE__ */ jsx(
+    AriaTab,
+    {
+      ref,
+      id: value,
+      isDisabled: disabled ?? false,
+      className: clsx(
+        // inline-flex/centering/select-none reproduce the UA <button> defaults (label centered,
+        // no text selection) that the div-based RAC Tab does not get for free.
+        "inline-flex items-center justify-center text-center select-none px-2u -mb-px border border-b-2 border-transparent text-oprt-base font-medium uppercase tracking-oprt-caps [&_code]:normal-case [&_code]:tracking-normal [&_kbd]:normal-case [&_kbd]:tracking-normal text-oprt-text-dim hover:text-oprt-text data-[selected]:text-oprt-text data-[selected]:border-b-oprt-accent data-[selected]:font-semibold data-[disabled]:opacity-50 data-[focus-visible]:border-oprt-border-focus data-[focus-visible]:shadow-oprt-focus outline-hidden",
+        // A tab keeps its width in a row that scrolls (DC-14), never wider than the row. A label
+        // wider than that wraps, breaking a long token anywhere, and the tab grows taller (the DC-8
+        // rule): the height is a minimum, and the padding is what is left of it around one line
+        // and the 3 px of border, so a one-line tab is exactly 32 px.
+        "shrink-0 max-w-full oprt-wrap-anywhere min-h-oprt-md py-[calc((var(--oprt-height-md)-3px-var(--oprt-line-base))/2)]",
+        // Forced colors drop the focus border color and shadow, and would paint the transparent
+        // outline on every tab: only a focused tab draws one, in CanvasText (Tabs-R3).
+        "forced-colors:outline-0 forced-colors:data-[focus-visible]:outline-solid forced-colors:data-[focus-visible]:outline-2 forced-colors:data-[focus-visible]:-outline-offset-2 forced-colors:data-[focus-visible]:outline-[CanvasText]",
+        className
+      ),
+      ...props
+    }
+  )
+);
+TabsTrigger.displayName = "TabsTrigger";
+var TabsContent = forwardRef(
+  ({ className, value, ...props }, ref) => /* @__PURE__ */ jsx(
+    AriaTabPanel,
+    {
+      ref,
+      id: value,
+      className: clsx(
+        // break-words, as CardBody: an unbroken token wraps inside the panel instead of widening it.
+        "min-w-0 break-words pt-3u border border-transparent text-oprt-md normal-case text-oprt-text data-[focus-visible]:border-oprt-border-focus data-[focus-visible]:shadow-oprt-focus outline-hidden",
+        "forced-colors:outline-0 forced-colors:data-[focus-visible]:outline-solid forced-colors:data-[focus-visible]:outline-2 forced-colors:data-[focus-visible]:-outline-offset-2 forced-colors:data-[focus-visible]:outline-[CanvasText]",
+        className
+      ),
+      ...props
+    }
+  )
+);
+TabsContent.displayName = "TabsContent";
+export {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger
+};

package/dist/Tabs/Tabs.manifest.js

@@ -0,0 +1,72 @@
+// src/Tabs/Tabs.manifest.ts
+var TabsManifest = {
+  Tabs: {
+    description: "Tabbed interface root. Underline-accent style. Wraps TabsList and one TabsContent per TabsTrigger.",
+    props: {
+      motion: {
+        type: "enum",
+        values: ["auto", "none"],
+        default: "auto",
+        description: "Tactile pointer/touch feedback. None disables motion; keyboard and system reduced motion are always immediate."
+      },
+      value: { type: "string" },
+      defaultValue: { type: "string" },
+      onValueChange: { type: "function" },
+      orientation: {
+        type: "enum",
+        values: ["horizontal", "vertical"],
+        default: "horizontal"
+      }
+    },
+    slots: {
+      children: { type: "TabsList | TabsContent", required: true }
+    },
+    composable_with: ["Card"],
+    never_inside: ["Button", "Badge"],
+    example: '<Tabs defaultValue="overview">\n  <TabsList>\n    <TabsTrigger value="overview">OVERVIEW</TabsTrigger>\n    <TabsTrigger value="logs">LOGS</TabsTrigger>\n  </TabsList>\n  <TabsContent value="overview">System nominal.</TabsContent>\n  <TabsContent value="logs">No entries.</TabsContent>\n</Tabs>'
+  },
+  TabsList: {
+    description: "Row (or column, when vertical) of tab triggers with a rail on the panel side. A row wider than its container stays one row and scrolls sideways inside itself: an edge fade marks each side with hidden tabs, and the selected tab is scrolled into view on open and on selection. Name it with aria-label.",
+    props: {},
+    slots: {
+      children: { type: "TabsTrigger", required: true }
+    },
+    composable_with: ["Tabs"],
+    never_inside: ["TabsTrigger", "TabsContent"],
+    example: '<TabsList>\n  <TabsTrigger value="overview">OVERVIEW</TabsTrigger>\n  <TabsTrigger value="logs">LOGS</TabsTrigger>\n</TabsList>'
+  },
+  TabsTrigger: {
+    description: "Single tab trigger. Active tab shows an accent underline and bolder weight. A label wider than the row wraps inside the tab, which grows taller. Must be a child of TabsList.",
+    props: {
+      value: { type: "string", required: true },
+      disabled: { type: "boolean", default: false }
+    },
+    composable_with: ["TabsList"],
+    never_inside: ["TabsContent", "Button", "Badge"],
+    example: '<TabsTrigger value="overview">OVERVIEW</TabsTrigger>'
+  },
+  TabsContent: {
+    description: "Content panel associated with a TabsTrigger by matching value. Must be a child of Tabs.",
+    props: {
+      value: { type: "string", required: true }
+    },
+    slots: {
+      children: { type: "any", required: false }
+    },
+    composable_with: ["Tabs"],
+    never_inside: ["TabsList", "TabsTrigger"],
+    example: '<TabsContent value="overview">System nominal.</TabsContent>'
+  }
+};
+var TabsCompositionRules = {
+  Tabs: {
+    allowed_children: ["TabsList", "TabsContent"],
+    children: {
+      TabsList: { allowed_children: ["TabsTrigger"] }
+    }
+  }
+};
+export {
+  TabsCompositionRules,
+  TabsManifest
+};

package/dist/Tabs/index.js

@@ -0,0 +1,16 @@
+// src/Tabs/index.ts
+import {
+  Tabs,
+  TabsList,
+  TabsTrigger,
+  TabsContent
+} from "./Tabs.js";
+import { TabsManifest, TabsCompositionRules } from "./Tabs.manifest.js";
+export {
+  Tabs,
+  TabsCompositionRules,
+  TabsContent,
+  TabsList,
+  TabsManifest,
+  TabsTrigger
+};

package/dist/Tabs/useTabsIndicator.js

@@ -0,0 +1,71 @@
+"use client";
+
+// src/Tabs/useTabsIndicator.ts
+import { useRef, useState } from "react";
+import { createResizeObserver } from "../_internal/useElementWidth.js";
+import { useIsomorphicLayoutEffect } from "../_internal/useIsomorphicLayoutEffect.js";
+function useTabsIndicator(list, vertical) {
+  const [geometry, setGeometry] = useState();
+  const selectedId = useRef();
+  useIsomorphicLayoutEffect(() => {
+    const node = list.current;
+    if (!node) return;
+    let alive = true;
+    const measure = (selection) => {
+      if (!alive) return;
+      const selected = node.querySelector('[role="tab"][data-selected]');
+      if (!selected) {
+        setGeometry(void 0);
+        selectedId.current = void 0;
+        return;
+      }
+      const length = vertical ? selected.offsetHeight : selected.offsetWidth;
+      if (!length) return;
+      const x = selected.offsetLeft;
+      const y = selected.offsetTop;
+      const changedSelection = selectedId.current !== void 0 && selectedId.current !== selected.id;
+      selectedId.current = selected.id;
+      setGeometry((previous) => {
+        if (previous && previous.x === x && previous.y === y && previous.length === length)
+          return previous;
+        return { x, y, length, immediate: !selection || !changedSelection };
+      });
+    };
+    const resize = createResizeObserver(() => measure(false));
+    const observe = () => {
+      if (!resize) return;
+      resize.disconnect();
+      resize.observe(node);
+      for (const tab of node.querySelectorAll('[role="tab"]')) resize.observe(tab);
+    };
+    observe();
+    measure(false);
+    const mutation = new MutationObserver((records) => {
+      if (records.some((r) => r.type === "childList")) observe();
+      measure(records.some((r) => r.attributeName === "data-selected"));
+    });
+    mutation.observe(node, {
+      subtree: true,
+      childList: true,
+      attributes: true,
+      attributeFilter: ["data-selected", "dir"]
+    });
+    for (let ancestor = node.parentElement; ancestor; ancestor = ancestor.parentElement) {
+      mutation.observe(ancestor, { attributes: true, attributeFilter: ["dir"] });
+    }
+    const settle = () => measure(false);
+    document.fonts?.addEventListener("loadingdone", settle);
+    window.addEventListener("resize", settle);
+    return () => {
+      alive = false;
+      resize?.disconnect();
+      mutation.disconnect();
+      document.fonts?.removeEventListener("loadingdone", settle);
+      window.removeEventListener("resize", settle);
+    };
+  }, [list, vertical]);
+  return geometry;
+}
+export {
+  useTabsIndicator
+};

package/dist/Tabs/useTabsScroll.js

@@ -0,0 +1,123 @@
+"use client";
+
+// src/Tabs/useTabsScroll.ts
+import { useState } from "react";
+import { createResizeObserver } from "../_internal/useElementWidth.js";
+import { useIsomorphicLayoutEffect } from "../_internal/useIsomorphicLayoutEffect.js";
+function hiddenSides(row) {
+  const range = row.scrollWidth - row.clientWidth;
+  if (range <= 1) return void 0;
+  const traveled = Math.abs(row.scrollLeft);
+  const start = traveled > 1;
+  const end = traveled < range - 1;
+  const rtl = getComputedStyle(row).direction === "rtl";
+  const left = rtl ? end : start;
+  const right = rtl ? start : end;
+  if (left && right) return "both";
+  if (left) return "left";
+  return right ? "right" : void 0;
+}
+function revealTab(row, tab) {
+  const style = getComputedStyle(row);
+  const rowBox = row.getBoundingClientRect();
+  const tabBox = tab.getBoundingClientRect();
+  const inner = rowBox.left + row.clientLeft;
+  const visibleLeft = inner + (Number.parseFloat(style.scrollPaddingLeft) || 0);
+  const visibleRight = inner + row.clientWidth - (Number.parseFloat(style.scrollPaddingRight) || 0);
+  let delta = 0;
+  if (tabBox.left < visibleLeft) delta = tabBox.left - visibleLeft;
+  else if (tabBox.right > visibleRight)
+    delta = Math.min(tabBox.right - visibleRight, tabBox.left - visibleLeft);
+  if (delta !== 0) row.scrollLeft += delta;
+}
+function useTabsScroll(list, vertical) {
+  const [fade, setFade] = useState();
+  useIsomorphicLayoutEffect(() => {
+    const row = list.current;
+    if (!row || vertical) {
+      setFade(void 0);
+      return;
+    }
+    let alive = true;
+    let revealed = null;
+    let pinned = true;
+    const update = () => {
+      if (alive) setFade(hiddenSides(row));
+    };
+    const selectedTab = () => row.querySelector('[role="tab"][data-selected]');
+    const reveal = () => {
+      const selected = selectedTab();
+      revealed = selected;
+      pinned = true;
+      if (selected) revealTab(row, selected);
+      update();
+    };
+    const unpin = () => {
+      pinned = false;
+    };
+    let frame = 0;
+    const entered = (event) => {
+      if (event.relatedTarget instanceof Node && row.contains(event.relatedTarget)) return;
+      cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(() => {
+        const selected = selectedTab();
+        if (pinned && selected) revealTab(row, selected);
+        update();
+      });
+    };
+    const resized = () => {
+      const selected = selectedTab();
+      if (pinned && selected) revealTab(row, selected);
+      update();
+    };
+    const resize = createResizeObserver(resized);
+    const watched = /* @__PURE__ */ new Set();
+    const observe = () => {
+      if (!resize) return;
+      const current = /* @__PURE__ */ new Set([row, ...row.querySelectorAll('[role="tab"]')]);
+      for (const element of watched)
+        if (!current.has(element)) {
+          resize.unobserve(element);
+          watched.delete(element);
+        }
+      for (const element of current)
+        if (!watched.has(element)) {
+          resize.observe(element);
+          watched.add(element);
+        }
+    };
+    observe();
+    reveal();
+    row.addEventListener("scroll", update, { passive: true });
+    row.addEventListener("focusin", entered);
+    row.addEventListener("wheel", unpin, { passive: true });
+    row.addEventListener("touchmove", unpin, { passive: true });
+    const mutation = new MutationObserver((records) => {
+      if (records.some((record) => record.type === "childList")) observe();
+      if (selectedTab() !== revealed) reveal();
+      else update();
+    });
+    mutation.observe(row, {
+      subtree: true,
+      childList: true,
+      attributes: true,
+      attributeFilter: ["data-selected"]
+    });
+    return () => {
+      alive = false;
+      resize?.disconnect();
+      mutation.disconnect();
+      cancelAnimationFrame(frame);
+      row.removeEventListener("scroll", update);
+      row.removeEventListener("focusin", entered);
+      row.removeEventListener("wheel", unpin);
+      row.removeEventListener("touchmove", unpin);
+    };
+  }, [list, vertical]);
+  return fade;
+}
+export {
+  hiddenSides,
+  revealTab,
+  useTabsScroll
+};

package/dist/TagGroup/TagGroup.js

@@ -0,0 +1,142 @@
+"use client";
+
+// src/TagGroup/TagGroup.tsx
+import {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef
+} from "react";
+import { Button, TagGroup as AriaTagGroup, TagList, Tag } from "react-aria-components";
+import { cva } from "class-variance-authority";
+import clsx from "clsx";
+import { X } from "@oprt/icons";
+import { useRestoreFocusOnRemoval } from "../_internal/useRestoreFocusOnRemoval.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var groupStyles = cva("min-w-0 font-sans normal-case text-oprt-base font-medium text-oprt-text");
+var tagStyles = cva(
+  "flex min-h-oprt-sm min-w-0 max-w-full items-center gap-1u border border-oprt-border bg-oprt-surface-2 pl-1u outline-hidden data-[focus-visible]:border-oprt-border-focus data-[focus-visible]:shadow-oprt-focus data-[disabled]:opacity-50"
+);
+var removeStyles = cva(
+  "flex h-oprt-sm w-oprt-sm shrink-0 items-center justify-center border border-transparent bg-transparent text-oprt-text outline-hidden hover:bg-oprt-surface-3 data-[focus-visible]:border-oprt-border-focus data-[focus-visible]:shadow-oprt-focus disabled:cursor-not-allowed"
+);
+var LIST_PROPS = ["aria-labelledby", "aria-describedby", "aria-details"];
+var reportedNotApplied = /* @__PURE__ */ new Set();
+function reportNotApplied(prop) {
+  if (process.env.NODE_ENV === "production" || reportedNotApplied.has(prop)) return;
+  reportedNotApplied.add(prop);
+  const suggestion = prop === "aria-label" ? "TagGroup's `label` names the tag list; an aria-label is not applied. Pass the name as `label`." : "TagGroup draws its own tags; dangerouslySetInnerHTML is not applied. Supply the tags as `items`.";
+  console.error(
+    JSON.stringify(
+      { component: "TagGroup", error: "PROP_NOT_APPLIED", prop, received: prop, suggestion },
+      null,
+      2
+    )
+  );
+}
+var TagGroup = forwardRef(
+  ({
+    items,
+    label,
+    onRemove,
+    disabled = false,
+    emptyMessage,
+    returnFocusRef,
+    className,
+    "aria-label": ariaLabel,
+    dangerouslySetInnerHTML,
+    ...props
+  }, ref) => {
+    const rootRef = useRef(null);
+    useImperativeHandle(ref, () => rootRef.current, []);
+    const { onFocusCapture, onBlurCapture } = useRestoreFocusOnRemoval(
+      rootRef,
+      {
+        track: (element) => {
+          const id = element.closest('[role="row"][data-key]')?.dataset["key"];
+          return id === void 0 ? null : { id };
+        },
+        isGone: (_element, { id }) => !items.some((item) => item.id === id),
+        findTarget: () => items.length === 0 && !disabled && onRemove && rootRef.current?.contains(document.activeElement) ? returnFocusRef?.current ?? null : null
+      }
+    );
+    const notApplied = [
+      ariaLabel !== void 0 && "aria-label",
+      dangerouslySetInnerHTML !== void 0 && "dangerouslySetInnerHTML"
+    ].filter(Boolean).join(" ");
+    useEffect(() => {
+      if (process.env.NODE_ENV === "production") return;
+      for (const prop of notApplied ? notApplied.split(" ") : []) reportNotApplied(prop);
+    }, [notApplied]);
+    const rootProps = { ...props };
+    for (const name of LIST_PROPS) delete rootProps[name];
+    function remove(keys) {
+      if (disabled || !onRemove) return;
+      for (const key of keys) {
+        const item = items.find((candidate) => candidate.id === key);
+        if (!item || item.disabled) continue;
+        onRemove(item.id);
+      }
+    }
+    return /* @__PURE__ */ jsx(
+      AriaTagGroup,
+      {
+        ...props,
+        ref: rootRef,
+        "aria-label": label,
+        selectionMode: "none",
+        className: clsx(groupStyles(), className),
+        ...onRemove ? { onRemove: remove } : {},
+        render: (domProps) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            ...rootProps,
+            ...domProps,
+            onFocusCapture: (event) => {
+              rootProps.onFocusCapture?.(event);
+              onFocusCapture(event);
+            },
+            onBlurCapture: (event) => {
+              rootProps.onBlurCapture?.(event);
+              onBlurCapture(event);
+            }
+          }
+        ),
+        children: /* @__PURE__ */ jsx(
+          TagList,
+          {
+            items,
+            dependencies: [disabled, !!onRemove],
+            className: "flex min-w-0 flex-wrap gap-1u outline-hidden data-[focus-visible]:shadow-oprt-focus",
+            renderEmptyState: () => emptyMessage ? /* @__PURE__ */ jsx("span", { className: "text-oprt-text-dim", children: emptyMessage }) : null,
+            children: (item) => /* @__PURE__ */ jsxs(
+              Tag,
+              {
+                id: item.id,
+                textValue: item.label,
+                isDisabled: disabled || !!item.disabled,
+                className: tagStyles(),
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "min-w-0 whitespace-pre-wrap oprt-wrap-anywhere py-0.5u pr-1u", children: item.label }),
+                  onRemove && /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      slot: "remove",
+                      isDisabled: disabled || !!item.disabled,
+                      className: removeStyles(),
+                      children: /* @__PURE__ */ jsx(X, { size: 12, "aria-hidden": "true" })
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        )
+      }
+    );
+  }
+);
+TagGroup.displayName = "TagGroup";
+export {
+  TagGroup
+};

package/dist/TagGroup/TagGroup.manifest.js

@@ -0,0 +1,35 @@
+// src/TagGroup/TagGroup.manifest.ts
+var TagGroupManifest = {
+  TagGroup: {
+    description: "A labeled collection of tags with optional controlled removal, native keyboard navigation and authored label casing.",
+    props: {
+      items: {
+        type: "array",
+        required: true,
+        description: "Readonly TagItem[]: unique string id, label and optional disabled."
+      },
+      label: {
+        type: "string",
+        required: true,
+        description: "Accessible name for the tag collection."
+      },
+      onRemove: {
+        type: "function",
+        description: "Requests removal by id. The parent supplies the updated items; declined removals retain the item and focus."
+      },
+      disabled: { type: "boolean", default: false },
+      emptyMessage: { type: "string", description: "Optional message when items is empty." },
+      returnFocusRef: {
+        type: "node",
+        description: "RefObject<HTMLElement | null> focused when the application removes the last tag while focus is in the group, on the next render or after a server round trip. An operator who has moved on keeps their focus."
+      },
+      className: { type: "string" }
+    },
+    composable_with: ["PropertyFilter"],
+    never_inside: ["Button"],
+    example: '<TagGroup label="Active filters" items={filters} onRemove={(id) => setFilters(filters.filter((item) => item.id !== id))} returnFocusRef={addButtonRef} />'
+  }
+};
+export {
+  TagGroupManifest
+};

package/dist/TagGroup/index.js

@@ -0,0 +1,7 @@
+// src/TagGroup/index.ts
+import { TagGroup } from "./TagGroup.js";
+import { TagGroupManifest } from "./TagGroup.manifest.js";
+export {
+  TagGroup,
+  TagGroupManifest
+};