pixelize-design-library 2.4.2 → 3.0.0

package/dist/esm/Components/Tabs/components/CountBadge.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Badge } from "@chakra-ui/react";
+import { resolveSoftTone } from "../../../Theme/tokens/builders/tone.js";
+const BADGE_FONT_SIZE = {
+    xs: "0.625rem",
+    sm: "xs-minus",
+    md: "xs",
+    lg: "xs-plus",
+};
+// Same resolveSoftTone(colors, scale, surface) pattern as SideBar/Header's own count badges.
+const CountBadge = ({ count, colors, scale, surface, size }) => {
+    const tone = resolveSoftTone(colors, scale, surface);
+    return (_jsx(Badge, { as: "span", bg: tone.bg, color: tone.fg, fontSize: BADGE_FONT_SIZE[size], fontWeight: 600, borderRadius: "full", px: "0.375rem", minW: "1.25rem", textAlign: "center", lineHeight: "1.4", flexShrink: 0, children: count }));
+};
+export default CountBadge;

package/dist/esm/Components/Tabs/components/Tab.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Box } from "@chakra-ui/react";
+import { panelId, tabId, useTabsContext } from "../TabsContext.js";
+import { useTabAppearance } from "../useTabAppearance.js";
+import CountBadge from "./CountBadge.js";
+/** One role="tab" button inside a TabList; `ref` is that `<button>`. */
+const Tab = forwardRef(function Tab({ value, children, icon, count, isDisabled }, ref) {
+    var _a;
+    const ctx = useTabsContext();
+    const isSelected = ctx.selectedId === value;
+    const isFocusTarget = ((_a = ctx.focusedId) !== null && _a !== void 0 ? _a : ctx.selectedId) === value;
+    const { colors, canvas, scale, style, iconSize, iconSx, boxProps } = useTabAppearance(isSelected, isDisabled);
+    return (_jsxs(Box, { as: "button", type: "button", ref: ref, role: "tab", id: tabId(ctx.baseId, value), "aria-selected": isSelected, "aria-disabled": isDisabled || undefined, "aria-controls": ctx.hasPanels ? panelId(ctx.baseId, value) : undefined, "data-value": value, tabIndex: isDisabled ? -1 : isFocusTarget ? 0 : -1, disabled: isDisabled, onClick: () => !isDisabled && ctx.select(value), onFocus: () => ctx.focusTab(value), ...boxProps, children: [icon ? (_jsx(Box, { as: "span", "aria-hidden": true, boxSize: `${iconSize}px`, sx: iconSx, children: icon })) : null, _jsx(Box, { as: "span", children: children }), count !== undefined ? (_jsx(CountBadge, { count: count, colors: colors, scale: scale, surface: ctx.variant === "solid" && isSelected ? style.bg : canvas, size: ctx.size })) : null] }));
+});
+Tab.displayName = "Tab";
+export default Tab;

package/dist/esm/Components/Tabs/components/TabLinkList.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Flex } from "@chakra-ui/react";
+import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
+import { scrollbarStyles } from "../../../Theme/tokens/builders/scrollbar.js";
+import { useTabsContext } from "../TabsContext.js";
+import { useTabAppearance } from "../useTabAppearance.js";
+import CountBadge from "./CountBadge.js";
+const isPlainPrimaryClick = (event) => event.button === 0 && !event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey;
+const TabLink = ({ item, linkAs }) => {
+    const ctx = useTabsContext();
+    const isSelected = ctx.selectedId === item.id;
+    const { colors, canvas, scale, style, iconSize, iconSx, boxProps } = useTabAppearance(isSelected, item.isDisabled);
+    const content = (_jsxs(_Fragment, { children: [item.icon ? (_jsx(Box, { as: "span", "aria-hidden": true, boxSize: `${iconSize}px`, sx: iconSx, children: item.icon })) : null, _jsx(Box, { as: "span", children: item.label }), item.count !== undefined ? (_jsx(CountBadge, { count: item.count, colors: colors, scale: scale, surface: ctx.variant === "solid" && isSelected ? style.bg : canvas, size: ctx.size })) : null] }));
+    if (item.isDisabled) {
+        return (_jsx(Box, { as: "span", "aria-disabled": "true", "data-value": item.id, ...boxProps, children: content }));
+    }
+    return (_jsx(Box, { as: linkAs, href: item.href, "aria-current": isSelected ? "page" : undefined, "data-value": item.id, onClick: (event) => {
+            if (!event.defaultPrevented && isPlainPrimaryClick(event))
+                ctx.select(item.id);
+        }, ...boxProps, children: content }));
+};
+const TabLinkList = ({ items, linkAs, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy }) => {
+    const { colors } = useCustomTheme();
+    const ctx = useTabsContext();
+    const isVertical = ctx.orientation === "vertical";
+    const isLine = ctx.variant === "line";
+    return (_jsx(Flex, { as: "nav", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, direction: isVertical ? "column" : "row", flexShrink: 0, minW: isVertical ? "10rem" : undefined, overflowX: isVertical ? undefined : "auto", overflowY: isVertical ? "auto" : undefined, flexWrap: "nowrap", gap: isLine ? 1 : 1.5, borderBottom: isLine && !isVertical ? "1px solid" : undefined, borderBottomColor: isLine && !isVertical ? colors.boxborder[200] : undefined, borderRight: isLine && isVertical ? "1px solid" : undefined, borderRightColor: isLine && isVertical ? colors.boxborder[200] : undefined, sx: scrollbarStyles(colors, "hover"), children: items === null || items === void 0 ? void 0 : items.map((item) => (_jsx(TabLink, { item: item, linkAs: linkAs }, item.id))) }));
+};
+export default TabLinkList;

package/dist/esm/Components/Tabs/components/TabList.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { Flex } from "@chakra-ui/react";
+import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
+import { scrollbarStyles } from "../../../Theme/tokens/builders/scrollbar.js";
+import { useTabsContext } from "../TabsContext.js";
+const ENABLED_TAB_SELECTOR = '[role="tab"]:not([aria-disabled="true"])';
+const findByValue = (container, value) => Array.from(container.querySelectorAll("[data-value]")).find((node) => node.dataset.value === value);
+const overshoot = (start, end, boxStart, boxEnd) => start < boxStart ? start - boxStart : Math.max(0, end - boxEnd);
+const revealWithinList = (list, tab) => {
+    const box = list.getBoundingClientRect();
+    const rect = tab.getBoundingClientRect();
+    list.scrollLeft += overshoot(rect.left, rect.right, box.left, box.right);
+    list.scrollTop += overshoot(rect.top, rect.bottom, box.top, box.bottom);
+};
+/** Tablist that scrolls to keep the focused or selected tab in view. */
+const TabList = ({ children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy }) => {
+    const { colors } = useCustomTheme();
+    const ctx = useTabsContext();
+    const ref = useRef(null);
+    const isVertical = ctx.orientation === "vertical";
+    const isLine = ctx.variant === "line";
+    const revealed = useRef(false);
+    useEffect(() => {
+        var _a, _b;
+        const activeId = (_a = ctx.focusedId) !== null && _a !== void 0 ? _a : ctx.selectedId;
+        if (!activeId || !ref.current)
+            return;
+        const el = findByValue(ref.current, activeId);
+        if (!el)
+            return;
+        if (!revealed.current) {
+            revealed.current = true;
+            revealWithinList(ref.current, el);
+            return;
+        }
+        (_b = el.scrollIntoView) === null || _b === void 0 ? void 0 : _b.call(el, { block: "nearest", inline: "nearest" });
+    }, [ctx.focusedId, ctx.selectedId]);
+    const focusAndMaybeSelect = (el) => {
+        el.focus();
+        const value = el.dataset.value;
+        if (value && ctx.activationMode === "automatic")
+            ctx.select(value);
+    };
+    const enabledTabs = () => { var _a, _b; return Array.from((_b = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll(ENABLED_TAB_SELECTOR)) !== null && _b !== void 0 ? _b : []); };
+    const moveFocus = (from, delta) => {
+        const tabs = enabledTabs();
+        if (!tabs.length)
+            return;
+        const index = tabs.indexOf(from);
+        const nextIndex = index === -1 ? 0 : (index + delta + tabs.length) % tabs.length;
+        focusAndMaybeSelect(tabs[nextIndex]);
+    };
+    const focusEdge = (edge) => {
+        const tabs = enabledTabs();
+        if (!tabs.length)
+            return;
+        focusAndMaybeSelect(tabs[edge === "first" ? 0 : tabs.length - 1]);
+    };
+    const handleKeyDown = (event) => {
+        const target = event.target;
+        if (target.getAttribute("role") !== "tab")
+            return;
+        const forwardKey = isVertical ? "ArrowDown" : "ArrowRight";
+        const backwardKey = isVertical ? "ArrowUp" : "ArrowLeft";
+        if (event.key === forwardKey) {
+            event.preventDefault();
+            moveFocus(target, 1);
+        }
+        else if (event.key === backwardKey) {
+            event.preventDefault();
+            moveFocus(target, -1);
+        }
+        else if (event.key === "Home") {
+            event.preventDefault();
+            focusEdge("first");
+        }
+        else if (event.key === "End") {
+            event.preventDefault();
+            focusEdge("last");
+        }
+    };
+    return (_jsx(Flex, { ref: ref, role: "tablist", "aria-orientation": ctx.orientation, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, onKeyDown: handleKeyDown, direction: isVertical ? "column" : "row", flexShrink: 0, minW: isVertical ? "10rem" : undefined, overflowX: isVertical ? undefined : "auto", overflowY: isVertical ? "auto" : undefined, flexWrap: "nowrap", gap: isLine ? 1 : 1.5, borderBottom: isLine && !isVertical ? "1px solid" : undefined, borderBottomColor: isLine && !isVertical ? colors.boxborder[200] : undefined, borderRight: isLine && isVertical ? "1px solid" : undefined, borderRightColor: isLine && isVertical ? colors.boxborder[200] : undefined, sx: scrollbarStyles(colors, "hover"), children: children }));
+};
+export default TabList;

package/dist/esm/Components/Tabs/components/TabPanel.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef } from "react";
+import { Box } from "@chakra-ui/react";
+import { panelId, tabId, useTabsContext } from "../TabsContext.js";
+/** Panel for the tab with the same `value`; mounts on first selection when lazy. */
+const TabPanel = ({ value, children }) => {
+    const ctx = useTabsContext();
+    const isSelected = ctx.selectedId === value;
+    const hasRenderedRef = useRef(isSelected);
+    if (isSelected)
+        hasRenderedRef.current = true;
+    if (ctx.isLazy && !hasRenderedRef.current)
+        return null;
+    return (_jsx(Box, { role: "tabpanel", id: panelId(ctx.baseId, value), "aria-labelledby": tabId(ctx.baseId, value), hidden: !isSelected, tabIndex: 0, children: children }));
+};
+export default TabPanel;

package/dist/esm/Components/Tabs/components/TabPanels.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { Box } from "@chakra-ui/react";
+import { useTabsContext } from "../TabsContext.js";
+/** Container for `TabPanel`s in the composed API; registers with the nearest `Tabs` so tabs link to their panels. */
+const TabPanels = ({ children }) => {
+    const ctx = useTabsContext();
+    useEffect(() => {
+        ctx.registerPanels();
+    }, [ctx]);
+    return (_jsx(Box, { flex: "1", minW: 0, children: children }));
+};
+export default TabPanels;

package/dist/esm/Components/Tabs/index.js

@@ -0,0 +1,5 @@
+export { default as Tabs } from "./Tabs.js";
+export { default as TabList } from "./components/TabList.js";
+export { default as Tab } from "./components/Tab.js";
+export { default as TabPanels } from "./components/TabPanels.js";
+export { default as TabPanel } from "./components/TabPanel.js";

package/dist/esm/Components/Tabs/tabStyles.js

@@ -0,0 +1,35 @@
+import { accentTextOnCanvas, accentTextOnPlanes } from "../../Theme/tokens/builders/accentText.js";
+import { resolveFilledSurface } from "../../Theme/tokens/builders/filledSurface.js";
+import { resolveHoverTint } from "../../Theme/tokens/builders/outlineRung.js";
+import { resolveSoftTone } from "../../Theme/tokens/builders/tone.js";
+export const scaleForColorScheme = (colors, scheme) => colors[scheme];
+const restStyle = (colors, hoverBg) => ({
+    bg: "transparent",
+    color: colors.textMuted,
+    hoverBg,
+    hoverColor: colors.text[700],
+});
+/** Rest/selected/hover ink+fill for one tab, mirroring Button.styles.ts's per-variant resolution. */
+export const resolveTabStyle = (colors, scale, canvas, variant, isSelected) => {
+    const pagePlanes = [canvas, colors.backgroundColor.base];
+    const accent = accentTextOnPlanes(scale, pagePlanes);
+    const hoverTint = resolveHoverTint(colors.gray[50], canvas);
+    if (!isSelected)
+        return restStyle(colors, hoverTint);
+    if (variant === "solid") {
+        const fill = resolveFilledSurface(scale, colors);
+        return { bg: fill.fill, color: fill.color, hoverBg: fill.hoverFill, hoverColor: fill.hoverColor };
+    }
+    if (variant === "subtle") {
+        const tone = resolveSoftTone(colors, scale, canvas);
+        return { bg: tone.bg, color: tone.fg, hoverBg: tone.hoverBg, hoverColor: tone.fg };
+    }
+    if (variant === "outline") {
+        return { bg: "transparent", color: accent, hoverBg: "transparent", hoverColor: accent, border: accent };
+    }
+    if (variant === "ghost") {
+        const ghostAccent = accentTextOnCanvas(scale, hoverTint);
+        return { bg: hoverTint, color: ghostAccent, hoverBg: hoverTint, hoverColor: ghostAccent };
+    }
+    return { bg: "transparent", color: accent, hoverBg: "transparent", hoverColor: accent, indicator: accent };
+};

package/dist/esm/Components/Tabs/useTabAppearance.js

@@ -0,0 +1,63 @@
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { FOCUS_VISIBLE_OVER_STATE } from "../../Theme/chakra/focusRing.styles.js";
+import { AA_NON_TEXT, liftToContrast } from "../../Theme/tokens/builders/outlineRung.js";
+import { compositeOver } from "../../Theme/tokens/builders/color.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { reducedMotionSx } from "../../Theme/chakra/motion.js";
+import { BUTTON_SIZES } from "../../Theme/tokens/primitives/controlSizes.js";
+import { iconBoxSx } from "../Common/iconBox.js";
+import { resolveTabStyle, scaleForColorScheme } from "./tabStyles.js";
+import { useTabsContext } from "./TabsContext.js";
+export const useTabAppearance = (isSelected, isDisabled) => {
+    var _a, _b, _c;
+    const { colors } = useCustomTheme();
+    const ctx = useTabsContext();
+    const isVertical = ctx.orientation === "vertical";
+    const isLine = ctx.variant === "line";
+    const canvas = colors.backgroundColor.main;
+    const scale = scaleForColorScheme(colors, ctx.colorScheme);
+    const style = resolveTabStyle(colors, scale, canvas, ctx.variant, isSelected);
+    const spec = BUTTON_SIZES[ctx.size];
+    // The list scrolls on both axes, so an outer ring is clipped into arcs; a negative offset draws it
+    // inside the tab, clear of its own border rather than thickening it.
+    const focusRing = {
+        outline: `1px solid ${liftToContrast(colors.primary[500], 
+        // subtle/ghost fills are translucent tints; contrast has no meaning until they are flattened.
+        style.bg === "transparent" ? canvas : compositeOver(style.bg, canvas), AA_NON_TEXT)}`,
+        outlineOffset: "-2px",
+    };
+    const borderProps = ctx.variant === "outline"
+        ? { border: "1px solid", borderColor: (_a = style.border) !== null && _a !== void 0 ? _a : "transparent" }
+        : isLine
+            ? isVertical
+                ? { borderLeft: "0.125rem solid", borderLeftColor: (_b = style.indicator) !== null && _b !== void 0 ? _b : "transparent" }
+                : { borderBottom: "0.125rem solid", borderBottomColor: (_c = style.indicator) !== null && _c !== void 0 ? _c : "transparent" }
+            : {};
+    const boxProps = {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: "0.375rem",
+        flexShrink: 0,
+        flex: ctx.isFitted ? 1 : undefined,
+        w: isVertical ? "100%" : undefined,
+        h: isVertical ? "auto" : spec.height,
+        minH: spec.height,
+        py: isVertical ? "0.5rem" : undefined,
+        px: spec.paddingX,
+        fontSize: spec.fontSize,
+        fontWeight: isSelected ? 600 : 500,
+        whiteSpace: "nowrap",
+        textDecoration: "none",
+        cursor: isDisabled ? "not-allowed" : "pointer",
+        opacity: isDisabled ? 0.5 : 1,
+        borderRadius: isLine ? "none" : "lg",
+        bg: style.bg,
+        color: style.color,
+        ...borderProps,
+        transition: transitionFor(["background-color", "color", "border-color"]),
+        sx: { _focusVisible: focusRing, [FOCUS_VISIBLE_OVER_STATE]: focusRing, ...reducedMotionSx() },
+        _hover: !isDisabled ? { bg: style.hoverBg, color: style.hoverColor, textDecoration: "none" } : undefined,
+    };
+    return { ctx, colors, canvas, scale, style, iconSize: spec.iconSize, iconSx: iconBoxSx(spec.iconSize), boxProps };
+};

package/dist/esm/Components/Tag/Tag.js

@@ -1,18 +1,41 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Icon, Tag as ChakraTag, TagLabel, TagRightIcon } from "@chakra-ui/react";
-// Icon size scales with the tag size so the right icon stays proportional.
+import { forwardRef } from "react";
+import { Box, Flex, Icon, Tag as ChakraTag, TagLabel, TagLeftIcon, TagRightIcon, Text } from "@chakra-ui/react";
+import { toneToColorScheme } from "../../Theme/tokens/builders/tone.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { DISABLED_OPACITY } from "../../Theme/tokens/primitives/states.js";
+import { reducedMotionSx } from "../../Theme/chakra/motion.js";
+import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { dotColor } from "./tagDot.js";
+// NOTE: the label's pill radius would slice descenders, so clipping lives on a square child.
+const LabelText = ({ children, title }) => (_jsx(Box, { as: "span", title: title, display: "block", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", borderRadius: 0, px: "0.05em", mx: "-0.05em", children: children }));
 const ICON_SIZE = {
     xs: "0.75rem",
     sm: "0.875rem",
     md: "1em",
     lg: "1.1em",
 };
-const Tag = ({ label, colorScheme = "primary", variant = "solid", size = "md", icon, onTagClick, onIconClick, }) => {
+const DOT_FONT_SIZE = {
+    xs: "xs",
+    sm: "xs-plus",
+    md: "sm",
+    lg: "0.9375rem",
+};
+const defaultRemoveLabel = (label) => `Remove ${label}`;
+/** Pill-shaped status/filter chip (Chakra Tag), not the raw Badge primitive; `ref` is the root element. */
+const Tag = forwardRef(function Tag({ label, colorScheme = "primary", tone, variant = "subtle", display = "chip", size = "sm", maxW, icon, leadingIcon, onTagClick, onIconClick, removeLabel = defaultRemoveLabel, isDisabled, "data-testid": testId, ...dataAttributes }, ref) {
+    const { colors } = useCustomTheme();
     const isInteractive = !!onTagClick;
-    return (_jsxs(ChakraTag, { size: size, variant: variant, colorScheme: colorScheme, borderRadius: "full", children: [isInteractive ? (_jsx(TagLabel, { as: "button", type: "button", cursor: "pointer", onClick: () => onTagClick === null || onTagClick === void 0 ? void 0 : onTagClick(), children: label })) : (_jsx(TagLabel, { children: label })), icon &&
-                (onIconClick ? (_jsx(Box, { as: "button", type: "button", "aria-label": `Remove ${label}`, onClick: (e) => {
+    if (display === "dot") {
+        return (_jsxs(Flex, { ref: ref, as: isInteractive ? "button" : "span", ...(isInteractive ? { type: "button", disabled: isDisabled || undefined } : {}), display: "inline-flex", alignItems: "center", gap: 2, maxW: maxW, minW: 0, borderRadius: "sm", bg: "transparent", fontSize: DOT_FONT_SIZE[size], fontWeight: 500, color: colors.text[700], cursor: isInteractive ? "pointer" : undefined, opacity: isDisabled ? DISABLED_OPACITY : undefined, onClick: isInteractive && !isDisabled ? onTagClick : undefined, ...dataAttributes, "data-testid": testId, "data-display": "dot", "data-disabled": isDisabled || undefined, sx: isInteractive ? focusVisibleStyles(colors) : undefined, children: [_jsx(Box, { as: "span", "aria-hidden": true, boxSize: "0.5rem", flexShrink: 0, borderRadius: "full", bg: dotColor(colors, tone, colorScheme) }), _jsx(Text, { as: "span", noOfLines: 1, title: maxW ? label : undefined, children: label })] }));
+    }
+    return (_jsxs(ChakraTag, { ref: ref, size: size, variant: variant, colorScheme: tone ? toneToColorScheme[tone] : colorScheme, borderRadius: "full", maxW: maxW, ...dataAttributes, "data-testid": testId, "data-interactive": isInteractive || undefined, "data-disabled": isDisabled || undefined, "aria-disabled": isDisabled || undefined, children: [leadingIcon && _jsx(TagLeftIcon, { as: leadingIcon, boxSize: ICON_SIZE[size], "aria-hidden": true }), isInteractive ? (_jsx(TagLabel, { as: "button", type: "button", noOfLines: undefined, disabled: isDisabled || undefined, cursor: "pointer", onClick: isDisabled ? undefined : onTagClick, children: _jsx(LabelText, { title: maxW ? label : undefined, children: label }) })) : (_jsx(TagLabel, { noOfLines: undefined, children: _jsx(LabelText, { title: maxW ? label : undefined, children: label }) })), icon &&
+                (onIconClick ? (_jsx(Box, { as: "button", type: "button", "aria-label": typeof removeLabel === "function" ? removeLabel(label) : removeLabel, "data-testid": testId ? `${testId}-remove` : undefined, disabled: isDisabled || undefined, onClick: (e) => {
                         e.stopPropagation();
-                        onIconClick();
-                    }, display: "inline-flex", alignItems: "center", ml: "0.25rem", transition: "all 0.2s ease", _hover: { opacity: 0.8, transform: "scale(1.05)" }, children: _jsx(Icon, { as: icon, boxSize: ICON_SIZE[size] }) })) : (_jsx(TagRightIcon, { as: icon, boxSize: ICON_SIZE[size], "aria-hidden": true })))] }));
-};
+                        if (!isDisabled)
+                            onIconClick();
+                    }, display: "inline-flex", alignItems: "center", flexShrink: 0, ml: "0.25rem", borderRadius: "full", transition: transitionFor(["opacity"]), _hover: { opacity: 0.8 }, sx: { ...focusVisibleStyles(colors), ...reducedMotionSx() }, children: _jsx(Icon, { as: icon, boxSize: ICON_SIZE[size] }) })) : (_jsx(TagRightIcon, { as: icon, boxSize: ICON_SIZE[size], "aria-hidden": true })))] }));
+});
+Tag.displayName = "Tag";
 export default Tag;

package/dist/esm/Components/Tag/Tag.styles.js

@@ -1,7 +1,16 @@
-import { accentTextOnCanvas, onFilled } from "../../Theme/tokens/builders/accentText.js";
-// Resolve a colorScheme key to a numeric swatch from the theme. All supported
-// colorScheme values (brand + global scales) expose a 50-900 scale; fall back to
-// gray so an unknown/missing key can never throw at render time.
+import { accentTextOnCanvas } from "../../Theme/tokens/builders/accentText.js";
+import { resolveFilledSurface } from "../../Theme/tokens/builders/filledSurface.js";
+import { resolveSoftTone } from "../../Theme/tokens/builders/tone.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { DISABLED_OPACITY } from "../../Theme/tokens/primitives/states.js";
+import { fontSizes } from "../../Theme/tokens/primitives/typography.js";
+import { BORDER_WIDTHS } from "../../Theme/tokens/primitives/borderWidths.js";
+import { reducedMotionSx } from "../../Theme/chakra/motion.js";
+import { focusVisibleRing } from "../../Theme/chakra/focusRing.styles.js";
+export const INTERACTIVE_HOVER = "&[data-interactive]:hover";
+export const INTERACTIVE_ACTIVE = "&[data-interactive]:active";
+const softTint = (scale, step) => "opacity" in scale ? scale.opacity[step] : scale[50];
+// NOTE: falls back to gray so an unknown/missing colorScheme key can never throw at render time.
 const SCALE_KEYS = [
     "primary", "secondary", "tertiary", "gray", "red", "orange", "yellow",
     "green", "teal", "blue", "cyan", "purple", "pink",
@@ -12,82 +21,88 @@ const swatch = (theme, colorScheme = "primary") => isScaleKey(colorScheme) ? the
 // is keyed under those parts, so it needs a multi-style config with `parts`.
 export const Tag = {
     parts: ["container", "label", "closeButton"],
-    baseStyle: {
+    baseStyle: ({ theme }) => ({
         container: {
             borderRadius: "full",
-            fontWeight: 600,
+            fontWeight: 500,
             lineHeight: 1.2,
             display: "inline-flex",
             alignItems: "center",
-            transition: "background 0.15s ease, color 0.15s ease, border-color 0.15s ease",
+            minW: 0,
+            boxSizing: "border-box",
+            transition: transitionFor(["background-color", "color", "border-color", "box-shadow"]),
+            ...reducedMotionSx(),
+            "&[data-interactive]": { cursor: "pointer" },
+            "&[data-disabled]": { opacity: DISABLED_OPACITY, cursor: "not-allowed", pointerEvents: "none" },
         },
-    },
+        label: {
+            lineHeight: 1.45,
+            minW: 0,
+            borderRadius: "full",
+            overflow: "visible",
+            _focusVisible: focusVisibleRing(theme.colors),
+        },
+    }),
     sizes: {
         xs: {
-            container: { fontSize: "0.6875rem", px: 2, py: 0.5, minH: "1.25rem" },
+            container: { fontSize: fontSizes["xs-minus"], px: 2, h: "1.25rem" },
         },
         sm: {
-            container: { fontSize: "0.75rem", px: 2.5, py: 1, minH: "1.5rem" },
+            container: { fontSize: fontSizes.xs, px: 2.5, h: "1.5rem" },
         },
         md: {
-            container: { fontSize: "0.8125rem", px: 3, py: 1, minH: "1.75rem" },
+            container: { fontSize: fontSizes["xs-plus"], px: 3, h: "1.75rem" },
         },
         lg: {
-            container: { fontSize: "0.9375rem", px: 3.5, py: 1.5, minH: "2rem" },
+            container: { fontSize: "0.9375rem", px: 3.5, h: "2rem" },
         },
     },
     variants: {
         solid: ({ theme, colorScheme = "primary" }) => {
+            const palette = theme.colors;
             const c = swatch(theme, colorScheme);
-            const { white, black } = theme.colors;
-            const fill = c[500];
-            const hoverFill = c[600];
-            const activeFill = c[700];
+            const { fill, color, hoverFill, hoverColor, activeFill, activeColor } = resolveFilledSurface(c, palette);
             return {
                 container: {
                     bg: fill,
-                    color: onFilled(fill, white, black),
-                    _hover: { bg: hoverFill, color: onFilled(hoverFill, white, black) },
-                    _active: { bg: activeFill, color: onFilled(activeFill, white, black) },
+                    color,
+                    [INTERACTIVE_HOVER]: { bg: hoverFill, color: hoverColor },
+                    [INTERACTIVE_ACTIVE]: { bg: activeFill, color: activeColor },
                 },
             };
         },
         subtle: ({ theme, colorScheme = "primary" }) => {
             const c = swatch(theme, colorScheme);
-            const bg = c[50];
+            const { bg, fg, border, hoverBg, hoverBorder, activeBg, activeBorder } = resolveSoftTone(theme.colors, c);
             return {
                 container: {
                     bg,
-                    // A fixed [700] fails AA against [50] for some hues (orange 3.89, borderline green
-                    // 4.39) — walk the scale's own rungs against this specific tint instead.
-                    color: accentTextOnCanvas(c, bg),
-                    border: "0.063rem solid",
-                    borderColor: c[100],
-                    _hover: { bg: c[100] },
-                    _active: { bg: c[200] },
+                    color: fg,
+                    boxShadow: `inset 0 0 0 ${BORDER_WIDTHS.hairline} ${border}`,
+                    [INTERACTIVE_HOVER]: { bg: hoverBg, boxShadow: `inset 0 0 0 ${BORDER_WIDTHS.hairline} ${hoverBorder}` },
+                    [INTERACTIVE_ACTIVE]: { bg: activeBg, boxShadow: `inset 0 0 0 ${BORDER_WIDTHS.hairline} ${activeBorder}` },
                 },
             };
         },
         outline: ({ theme, colorScheme = "primary" }) => {
             const c = swatch(theme, colorScheme);
             const canvas = theme.colors.backgroundColor.main;
+            const ink = accentTextOnCanvas(c, canvas);
             return {
                 container: {
-                    border: "0.094rem solid",
-                    borderColor: c[500],
-                    // Text sits directly on the page canvas here — a fixed [600] failed AA for several
-                    // hues (orange 2.51, green 2.94, red 4.09); use the canvas-text helper instead.
-                    color: accentTextOnCanvas(c, canvas),
+                    border: "none",
+                    boxShadow: `inset 0 0 0 ${BORDER_WIDTHS.hairline} ${ink}`,
+                    color: ink,
                     bg: "transparent",
-                    _hover: { bg: c[50] },
-                    _active: { bg: c[100] },
+                    [INTERACTIVE_HOVER]: { bg: softTint(c, 16) },
+                    [INTERACTIVE_ACTIVE]: { bg: softTint(c, 24) },
                 },
             };
         },
     },
     defaultProps: {
-        size: "md",
-        variant: "solid",
+        size: "sm",
+        variant: "subtle",
         colorScheme: "primary",
     },
 };

package/dist/esm/Components/Tag/tagDot.js

@@ -0,0 +1,24 @@
+import { liftToContrast } from "../../Theme/tokens/builders/outlineRung.js";
+import { toneToSemantic } from "../../Theme/tokens/builders/tone.js";
+import { scaleNamed } from "../../Theme/tokens/builders/paletteScale.js";
+import { warnUnknownColorScheme } from "../../Theme/chakra/paletteFromTheme.js";
+const SCALE_KEYS = [
+    "primary", "secondary", "tertiary", "gray", "red", "orange", "yellow",
+    "green", "teal", "blue", "cyan", "purple", "pink",
+];
+const themedScale = (colors, colorScheme) => {
+    const scale = SCALE_KEYS.includes(colorScheme) ? scaleNamed(colors, colorScheme) : undefined;
+    if (scale)
+        return scale;
+    warnUnknownColorScheme(colorScheme);
+    return colors.gray;
+};
+export const dotColor = (colors, tone, colorScheme) => {
+    const surfaces = [colors.background[50], colors.backgroundColor.main];
+    if (tone === "neutral")
+        return colors.textMuted;
+    const scale = tone
+        ? colors.semantic[toneToSemantic[tone]]
+        : themedScale(colors, colorScheme);
+    return surfaces.reduce((ink, surface) => liftToContrast(ink, surface), scale[500]);
+};

package/dist/esm/Components/TagInput/TagInput.js

@@ -0,0 +1,96 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useMemo, useRef, useState } from "react";
+import { Box, Flex, Input, VisuallyHidden, useMergeRefs } from "@chakra-ui/react";
+import { X } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { DEFAULT_CONTROL_SIZE } from "../../Theme/tokens/primitives/controlSizes.js";
+import { placeholderInk } from "../../Theme/tokens/builders/placeholderInk.js";
+import { reducedMotionSx } from "../../Theme/chakra/motion.js";
+import { fieldFocusRing, fieldHoverBorder, getFieldStateStyles } from "../Common/fieldStyles.js";
+import { TextLabel } from "../Common/FormLabel.js";
+import FieldMessage from "../Common/FieldMessage.js";
+import { useFieldIds } from "../Common/useFieldIds.js";
+import { getSearchSelectSizeStyles } from "../SearchSelect/searchSelectSize.js";
+import Tag from "../Tag/Tag.js";
+import { addTags, hasSeparator, resolveTagInputLabels, splitEntries } from "./tagEntries.js";
+/** Free-text tag field that commits entries as removable chips; forwards its ref to the text input. */
+const TagInput = forwardRef(function TagInput({ value, onChange, validate, maxTags, allowDuplicates = false, addOnBlur = false, id, name, label, "aria-label": ariaLabel, placeholder, isRequired = false, isInformation, informationMessage, isDisabled = false, isReadOnly = false, error, errorMessage, helperText, size = DEFAULT_CONTROL_SIZE, labels, width = "100%", }, ref) {
+    const theme = useCustomTheme();
+    const s = getSearchSelectSizeStyles(size);
+    const inputRef = useRef(null);
+    const mergedRef = useMergeRefs(inputRef, ref);
+    const [draft, setDraft] = useState("");
+    const [rejection, setRejection] = useState(null);
+    const [announcement, setAnnouncement] = useState("");
+    const isInvalid = Boolean(error || rejection);
+    const shownError = rejection !== null && rejection !== void 0 ? rejection : errorMessage;
+    const ids = useFieldIds(id, { error: isInvalid, errorMessage: shownError, helperText });
+    const locked = isDisabled || isReadOnly;
+    const messages = useMemo(() => resolveTagInputLabels(labels), [labels]);
+    const commit = (text) => {
+        const result = addTags(value, splitEntries(text), { validate, maxTags, allowDuplicates, labels: messages });
+        if (result.added.length) {
+            onChange(result.tags);
+            setAnnouncement(messages.added(result.added));
+        }
+        setRejection(result.message);
+        setDraft(result.rejected.join(", "));
+    };
+    const removeAt = (index) => {
+        const removed = value[index];
+        onChange(value.filter((_, i) => i !== index));
+        setAnnouncement(messages.removed(removed));
+        setRejection(null);
+    };
+    const onKeyDown = (event) => {
+        if (locked)
+            return;
+        if (event.key === "Enter" || event.key === ",") {
+            if (event.key === "Enter" && !draft.trim())
+                return;
+            event.preventDefault();
+            commit(draft);
+        }
+        else if (event.key === "Backspace" && draft === "" && value.length > 0) {
+            removeAt(value.length - 1);
+        }
+    };
+    const onPaste = (event) => {
+        const pasted = event.clipboardData.getData("text");
+        if (locked || !hasSeparator(pasted))
+            return;
+        event.preventDefault();
+        const { selectionStart, selectionEnd } = event.currentTarget;
+        commit(`${draft.slice(0, selectionStart !== null && selectionStart !== void 0 ? selectionStart : draft.length)}${pasted}${draft.slice(selectionEnd !== null && selectionEnd !== void 0 ? selectionEnd : draft.length)}`);
+    };
+    const onInput = (event) => {
+        setDraft(event.target.value);
+        setRejection(null);
+    };
+    const onBlur = () => {
+        if (addOnBlur && !locked && draft.trim())
+            commit(draft);
+    };
+    const focusFromBox = (event) => {
+        var _a;
+        if (event.target !== event.currentTarget || isDisabled)
+            return;
+        event.preventDefault();
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+    return (_jsxs(Box, { width: width, children: [label && (_jsx(TextLabel, { label: label, id: ids.inputId, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), _jsxs(Flex, { wrap: "wrap", gap: s.gap, align: "center", px: s.px, minH: s.minH, onMouseDown: focusFromBox, sx: {
+                    ...getFieldStateStyles(theme, { error: isInvalid, disabled: isDisabled }),
+                    ...reducedMotionSx(),
+                }, _hover: isDisabled || isInvalid ? undefined : { borderColor: fieldHoverBorder(theme.colors) }, _focusWithin: {
+                    borderColor: isInvalid ? theme.colors.semanticText.error : theme.colors.primary[500],
+                    boxShadow: fieldFocusRing(theme),
+                }, children: [value.map((tag, index) => (_jsx(Tag, { size: s.tagSize, colorScheme: "primary", label: tag, removeLabel: messages.remove, isDisabled: isDisabled, icon: locked ? undefined : X, onIconClick: locked
+                            ? undefined
+                            : () => {
+                                var _a;
+                                removeAt(index);
+                                (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                            } }, `${index}:${tag}`))), _jsx(Input, { ref: mergedRef, type: "text", value: draft, isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired, isInvalid: isInvalid, ...ids.controlProps, "aria-label": label ? undefined : ariaLabel, size: size, variant: "unstyled", h: s.fieldHeight, minH: s.fieldHeight, fontSize: s.fieldFontSize, fontWeight: 400, color: theme.colors.text[900], flex: "1", minW: 0, _placeholder: { color: placeholderInk(theme.colors), opacity: 1 }, style: { backgroundColor: "transparent" }, onChange: onInput, onKeyDown: onKeyDown, onPaste: onPaste, onBlur: onBlur, placeholder: value.length === 0 ? placeholder : "" })] }), name && value.map((tag, index) => _jsx("input", { type: "hidden", name: name, value: tag }, `${index}:${tag}`)), _jsx(VisuallyHidden, { role: "status", "aria-live": "polite", position: "fixed", top: 0, left: 0, children: announcement }), _jsx(FieldMessage, { error: isInvalid, errorMessage: shownError, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
+});
+TagInput.displayName = "TagInput";
+export default TagInput;

package/dist/esm/Components/TagInput/TagInputProps.js

@@ -0,0 +1 @@
+export {};