pixelize-design-library 3.0.1-beta.1 → 3.1.1

package/dist/Components/Tabs/index.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TabPanel = exports.TabPanels = exports.Tab = exports.TabList = exports.Tabs = void 0;
+var Tabs_1 = require("./Tabs");
+Object.defineProperty(exports, "Tabs", { enumerable: true, get: function () { return __importDefault(Tabs_1).default; } });
+var TabList_1 = require("./components/TabList");
+Object.defineProperty(exports, "TabList", { enumerable: true, get: function () { return __importDefault(TabList_1).default; } });
+var Tab_1 = require("./components/Tab");
+Object.defineProperty(exports, "Tab", { enumerable: true, get: function () { return __importDefault(Tab_1).default; } });
+var TabPanels_1 = require("./components/TabPanels");
+Object.defineProperty(exports, "TabPanels", { enumerable: true, get: function () { return __importDefault(TabPanels_1).default; } });
+var TabPanel_1 = require("./components/TabPanel");
+Object.defineProperty(exports, "TabPanel", { enumerable: true, get: function () { return __importDefault(TabPanel_1).default; } });

package/dist/Components/Tabs/tabStyles.d.ts

@@ -0,0 +1,19 @@
+import type { ColorScale, PaletteProps } from "../../Theme/tokens/types";
+import type { TabsColorScheme, TabsVariant } from "./TabsProps";
+export declare const scaleForColorScheme: (colors: PaletteProps, scheme: TabsColorScheme) => ColorScale;
+export interface TabVisualStyle {
+    /** Background of the tab. */
+    bg: string;
+    /** Text colour of the tab. */
+    color: string;
+    /** Background while hovered. */
+    hoverBg: string;
+    /** Text colour while hovered. */
+    hoverColor: string;
+    /** Only set for the "outline" variant. */
+    border?: string;
+    /** Only set for the "line" variant, selected state — the underline/side-rail color. */
+    indicator?: string;
+}
+/** Rest/selected/hover ink+fill for one tab, mirroring Button.styles.ts's per-variant resolution. */
+export declare const resolveTabStyle: (colors: PaletteProps, scale: ColorScale, canvas: string, variant: TabsVariant, isSelected: boolean) => TabVisualStyle;

package/dist/Components/Tabs/tabStyles.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveTabStyle = exports.scaleForColorScheme = void 0;
+const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const filledSurface_1 = require("../../Theme/tokens/builders/filledSurface");
+const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
+const tone_1 = require("../../Theme/tokens/builders/tone");
+const scaleForColorScheme = (colors, scheme) => colors[scheme];
+exports.scaleForColorScheme = scaleForColorScheme;
+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. */
+const resolveTabStyle = (colors, scale, canvas, variant, isSelected) => {
+    const pagePlanes = [canvas, colors.backgroundColor.base];
+    const accent = (0, accentText_1.accentTextOnPlanes)(scale, pagePlanes);
+    const hoverTint = (0, outlineRung_1.resolveHoverTint)(colors.gray[50], canvas);
+    if (!isSelected)
+        return restStyle(colors, hoverTint);
+    if (variant === "solid") {
+        const fill = (0, filledSurface_1.resolveFilledSurface)(scale, colors);
+        return { bg: fill.fill, color: fill.color, hoverBg: fill.hoverFill, hoverColor: fill.hoverColor };
+    }
+    if (variant === "subtle") {
+        const tone = (0, tone_1.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 = (0, accentText_1.accentTextOnCanvas)(scale, hoverTint);
+        return { bg: hoverTint, color: ghostAccent, hoverBg: hoverTint, hoverColor: ghostAccent };
+    }
+    return { bg: "transparent", color: accent, hoverBg: "transparent", hoverColor: accent, indicator: accent };
+};
+exports.resolveTabStyle = resolveTabStyle;

package/dist/Components/Tabs/useTabAppearance.d.ts

@@ -0,0 +1,17 @@
+import type { BoxProps } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme";
+import { iconBoxSx } from "../Common/iconBox";
+import { resolveTabStyle, scaleForColorScheme } from "./tabStyles";
+import { useTabsContext } from "./TabsContext";
+type TabAppearance = {
+    ctx: ReturnType<typeof useTabsContext>;
+    colors: ReturnType<typeof useCustomTheme>["colors"];
+    canvas: string;
+    scale: ReturnType<typeof scaleForColorScheme>;
+    style: ReturnType<typeof resolveTabStyle>;
+    iconSize: number | string;
+    iconSx: ReturnType<typeof iconBoxSx>;
+    boxProps: BoxProps;
+};
+export declare const useTabAppearance: (isSelected: boolean, isDisabled?: boolean) => TabAppearance;
+export {};

package/dist/Components/Tabs/useTabAppearance.js

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTabAppearance = void 0;
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
+const color_1 = require("../../Theme/tokens/builders/color");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const motion_2 = require("../../Theme/chakra/motion");
+const controlSizes_1 = require("../../Theme/tokens/primitives/controlSizes");
+const iconBox_1 = require("../Common/iconBox");
+const tabStyles_1 = require("./tabStyles");
+const TabsContext_1 = require("./TabsContext");
+const useTabAppearance = (isSelected, isDisabled) => {
+    var _a, _b, _c;
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const ctx = (0, TabsContext_1.useTabsContext)();
+    const isVertical = ctx.orientation === "vertical";
+    const isLine = ctx.variant === "line";
+    const canvas = colors.backgroundColor.main;
+    const scale = (0, tabStyles_1.scaleForColorScheme)(colors, ctx.colorScheme);
+    const style = (0, tabStyles_1.resolveTabStyle)(colors, scale, canvas, ctx.variant, isSelected);
+    const spec = controlSizes_1.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 ${(0, outlineRung_1.liftToContrast)(colors.primary[500], 
+        // subtle/ghost fills are translucent tints; contrast has no meaning until they are flattened.
+        style.bg === "transparent" ? canvas : (0, color_1.compositeOver)(style.bg, canvas), outlineRung_1.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: (0, motion_1.transitionFor)(["background-color", "color", "border-color"]),
+        sx: { _focusVisible: focusRing, [focusRing_styles_1.FOCUS_VISIBLE_OVER_STATE]: focusRing, ...(0, motion_2.reducedMotionSx)() },
+        _hover: !isDisabled ? { bg: style.hoverBg, color: style.hoverColor, textDecoration: "none" } : undefined,
+    };
+    return { ctx, colors, canvas, scale, style, iconSize: spec.iconSize, iconSx: (0, iconBox_1.iconBoxSx)(spec.iconSize), boxProps };
+};
+exports.useTabAppearance = useTabAppearance;

package/dist/Components/Tag/Tag.d.ts

@@ -1,12 +1,5 @@
-import React, { ElementType } from "react";
-interface ChipProps {
-    label: string;
-    onIconClick?: () => void;
-    onTagClick?: () => void;
-    icon?: ElementType;
-    colorScheme?: "primary" | "secondary" | "tertiary" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink";
-    size?: "sm" | "md" | "lg";
-    variant?: "solid" | "outline";
-}
-declare const Tag: React.FC<ChipProps>;
+import React from "react";
+import { TagProps } from "./TagProps";
+/** Pill-shaped status/filter chip (Chakra Tag), not the raw Badge primitive; `ref` is the root element. */
+declare const Tag: React.ForwardRefExoticComponent<TagProps & React.RefAttributes<HTMLElement>>;
 export default Tag;

package/dist/Components/Tag/Tag.js

@@ -1,21 +1,43 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
-var react_2 = require("@chakra-ui/react");
-var Tag = function (_a) {
-    var label = _a.label, _b = _a.colorScheme, colorScheme = _b === void 0 ? "primary" : _b, _c = _a.variant, variant = _c === void 0 ? "solid" : _c, _d = _a.size, size = _d === void 0 ? "md" : _d, icon = _a.icon, onTagClick = _a.onTagClick, onIconClick = _a.onIconClick;
-    return (react_1.default.createElement(react_2.Tag, { size: size, variant: variant, colorScheme: colorScheme, borderRadius: "full", cursor: "pointer", onClick: function () { return onTagClick === null || onTagClick === void 0 ? void 0 : onTagClick(); } },
-        react_1.default.createElement(react_2.TagLabel, null, label),
-        icon && (react_1.default.createElement(react_2.TagRightIcon, { as: icon, boxSize: "1em", cursor: onIconClick ? "pointer" : "default", onClick: function (e) {
-                e.stopPropagation();
-                onIconClick === null || onIconClick === void 0 ? void 0 : onIconClick();
-            }, transition: "all 0.2s ease", _hover: {
-                opacity: 0.8,
-                transform: "scale(1.05)",
-                cursor: onIconClick ? "pointer" : "default",
-            } }))));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const tone_1 = require("../../Theme/tokens/builders/tone");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const states_1 = require("../../Theme/tokens/primitives/states");
+const motion_2 = require("../../Theme/chakra/motion");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const tagDot_1 = require("./tagDot");
+// NOTE: the label's pill radius would slice descenders, so clipping lives on a square child.
+const LabelText = ({ children, title }) => ((0, jsx_runtime_1.jsx)(react_2.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 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 = (0, react_1.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 } = (0, useCustomTheme_1.useCustomTheme)();
+    const isInteractive = !!onTagClick;
+    if (display === "dot") {
+        return ((0, jsx_runtime_1.jsxs)(react_2.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 ? states_1.DISABLED_OPACITY : undefined, onClick: isInteractive && !isDisabled ? onTagClick : undefined, ...dataAttributes, "data-testid": testId, "data-display": "dot", "data-disabled": isDisabled || undefined, sx: isInteractive ? (0, focusRing_styles_1.focusVisibleStyles)(colors) : undefined, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", "aria-hidden": true, boxSize: "0.5rem", flexShrink: 0, borderRadius: "full", bg: (0, tagDot_1.dotColor)(colors, tone, colorScheme) }), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", noOfLines: 1, title: maxW ? label : undefined, children: label })] }));
+    }
+    return ((0, jsx_runtime_1.jsxs)(react_2.Tag, { ref: ref, size: size, variant: variant, colorScheme: tone ? tone_1.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 && (0, jsx_runtime_1.jsx)(react_2.TagLeftIcon, { as: leadingIcon, boxSize: ICON_SIZE[size], "aria-hidden": true }), isInteractive ? ((0, jsx_runtime_1.jsx)(react_2.TagLabel, { as: "button", type: "button", noOfLines: undefined, disabled: isDisabled || undefined, cursor: "pointer", onClick: isDisabled ? undefined : onTagClick, children: (0, jsx_runtime_1.jsx)(LabelText, { title: maxW ? label : undefined, children: label }) })) : ((0, jsx_runtime_1.jsx)(react_2.TagLabel, { noOfLines: undefined, children: (0, jsx_runtime_1.jsx)(LabelText, { title: maxW ? label : undefined, children: label }) })), icon &&
+                (onIconClick ? ((0, jsx_runtime_1.jsx)(react_2.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();
+                        if (!isDisabled)
+                            onIconClick();
+                    }, display: "inline-flex", alignItems: "center", flexShrink: 0, ml: "0.25rem", borderRadius: "full", transition: (0, motion_1.transitionFor)(["opacity"]), _hover: { opacity: 0.8 }, sx: { ...(0, focusRing_styles_1.focusVisibleStyles)(colors), ...(0, motion_2.reducedMotionSx)() }, children: (0, jsx_runtime_1.jsx)(react_2.Icon, { as: icon, boxSize: ICON_SIZE[size] }) })) : ((0, jsx_runtime_1.jsx)(react_2.TagRightIcon, { as: icon, boxSize: ICON_SIZE[size], "aria-hidden": true })))] }));
+});
+Tag.displayName = "Tag";
 exports.default = Tag;

package/dist/Components/Tag/Tag.styles.d.ts

@@ -1,2 +1,4 @@
-import { ComponentStyleConfig } from "@chakra-ui/react";
-export declare const Tag: ComponentStyleConfig;
+import { ComponentMultiStyleConfig } from "@chakra-ui/react";
+export declare const INTERACTIVE_HOVER = "&[data-interactive]:hover";
+export declare const INTERACTIVE_ACTIVE = "&[data-interactive]:active";
+export declare const Tag: ComponentMultiStyleConfig;

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

@@ -1,63 +1,111 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Tag = void 0;
+exports.Tag = exports.INTERACTIVE_ACTIVE = exports.INTERACTIVE_HOVER = void 0;
+const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const filledSurface_1 = require("../../Theme/tokens/builders/filledSurface");
+const tone_1 = require("../../Theme/tokens/builders/tone");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const states_1 = require("../../Theme/tokens/primitives/states");
+const typography_1 = require("../../Theme/tokens/primitives/typography");
+const borderWidths_1 = require("../../Theme/tokens/primitives/borderWidths");
+const motion_2 = require("../../Theme/chakra/motion");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+exports.INTERACTIVE_HOVER = "&[data-interactive]:hover";
+exports.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",
+];
+const isScaleKey = (key) => SCALE_KEYS.includes(key);
+const swatch = (theme, colorScheme = "primary") => isScaleKey(colorScheme) ? theme.colors[colorScheme] : theme.colors.gray;
+// Chakra Tag is a multipart component (container / label / closeButton); styling
+// is keyed under those parts, so it needs a multi-style config with `parts`.
 exports.Tag = {
-    baseStyle: {
-        borderRadius: "full",
-        fontWeight: "bold",
-        px: 3,
-        py: 1,
-    },
+    parts: ["container", "label", "closeButton"],
+    baseStyle: ({ theme }) => ({
+        container: {
+            borderRadius: "full",
+            fontWeight: 500,
+            lineHeight: 1.2,
+            display: "inline-flex",
+            alignItems: "center",
+            minW: 0,
+            boxSizing: "border-box",
+            transition: (0, motion_1.transitionFor)(["background-color", "color", "border-color", "box-shadow"]),
+            ...(0, motion_2.reducedMotionSx)(),
+            "&[data-interactive]": { cursor: "pointer" },
+            "&[data-disabled]": { opacity: states_1.DISABLED_OPACITY, cursor: "not-allowed", pointerEvents: "none" },
+        },
+        label: {
+            lineHeight: 1.45,
+            minW: 0,
+            borderRadius: "full",
+            overflow: "visible",
+            _focusVisible: (0, focusRing_styles_1.focusVisibleRing)(theme.colors),
+        },
+    }),
     sizes: {
+        xs: {
+            container: { fontSize: typography_1.fontSizes["xs-minus"], px: 2, h: "1.25rem" },
+        },
         sm: {
-            fontSize: "0.75rem",
-            px: 2,
-            py: 1,
+            container: { fontSize: typography_1.fontSizes.xs, px: 2.5, h: "1.5rem" },
         },
         md: {
-            fontSize: "0.875rem",
-            px: 3,
-            py: 1.5,
+            container: { fontSize: typography_1.fontSizes["xs-plus"], px: 3, h: "1.75rem" },
         },
         lg: {
-            fontSize: "1rem",
-            px: 4,
-            py: 2,
+            container: { fontSize: "0.9375rem", px: 3.5, h: "2rem" },
         },
     },
     variants: {
-        solid: function (_a) {
-            var theme = _a.theme, _b = _a.colorScheme, colorScheme = _b === void 0 ? "primary" : _b;
-            return ({
-                bg: theme.colors[colorScheme][500],
-                color: theme.colors.white,
-                _hover: {
-                    bg: theme.colors[colorScheme][600],
+        solid: ({ theme, colorScheme = "primary" }) => {
+            const palette = theme.colors;
+            const c = swatch(theme, colorScheme);
+            const { fill, color, hoverFill, hoverColor, activeFill, activeColor } = (0, filledSurface_1.resolveFilledSurface)(c, palette);
+            return {
+                container: {
+                    bg: fill,
+                    color,
+                    [exports.INTERACTIVE_HOVER]: { bg: hoverFill, color: hoverColor },
+                    [exports.INTERACTIVE_ACTIVE]: { bg: activeFill, color: activeColor },
                 },
-                _active: {
-                    bg: theme.colors[colorScheme][700],
-                },
-            });
-        },
-        outline: function (_a) {
-            var theme = _a.theme, _b = _a.colorScheme, colorScheme = _b === void 0 ? "primary" : _b;
-            return ({
-                border: "0.125rem solid",
-                borderColor: theme.colors[colorScheme][500],
-                color: theme.colors[colorScheme][500],
-                bg: "transparent",
-                _hover: {
-                    bg: theme.colors[colorScheme][50],
+            };
+        },
+        subtle: ({ theme, colorScheme = "primary" }) => {
+            const c = swatch(theme, colorScheme);
+            const { bg, fg, border, hoverBg, hoverBorder, activeBg, activeBorder } = (0, tone_1.resolveSoftTone)(theme.colors, c);
+            return {
+                container: {
+                    bg,
+                    color: fg,
+                    boxShadow: `inset 0 0 0 ${borderWidths_1.BORDER_WIDTHS.hairline} ${border}`,
+                    [exports.INTERACTIVE_HOVER]: { bg: hoverBg, boxShadow: `inset 0 0 0 ${borderWidths_1.BORDER_WIDTHS.hairline} ${hoverBorder}` },
+                    [exports.INTERACTIVE_ACTIVE]: { bg: activeBg, boxShadow: `inset 0 0 0 ${borderWidths_1.BORDER_WIDTHS.hairline} ${activeBorder}` },
                 },
-                _active: {
-                    bg: theme.colors[colorScheme][100],
+            };
+        },
+        outline: ({ theme, colorScheme = "primary" }) => {
+            const c = swatch(theme, colorScheme);
+            const canvas = theme.colors.backgroundColor.main;
+            const ink = (0, accentText_1.accentTextOnCanvas)(c, canvas);
+            return {
+                container: {
+                    border: "none",
+                    boxShadow: `inset 0 0 0 ${borderWidths_1.BORDER_WIDTHS.hairline} ${ink}`,
+                    color: ink,
+                    bg: "transparent",
+                    [exports.INTERACTIVE_HOVER]: { bg: softTint(c, 16) },
+                    [exports.INTERACTIVE_ACTIVE]: { bg: softTint(c, 24) },
                 },
-            });
+            };
         },
     },
     defaultProps: {
-        size: "md",
-        variant: "solid",
+        size: "sm",
+        variant: "subtle",
         colorScheme: "primary",
     },
 };

package/dist/Components/Tag/TagProps.d.ts

@@ -0,0 +1,43 @@
+import { ElementType } from "react";
+import type { BoxProps } from "@chakra-ui/react";
+import type { DataAttributes } from "../Common/dataAttributes";
+import type { Tone } from "../../Theme/tokens/builders/tone";
+/** Category colour, not status — for a status chip use `tone`, which wins when both are set. */
+export type TagColorScheme = "primary" | "secondary" | "tertiary" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink";
+/** Tag size; also scales any icon via ICON_SIZE. Defaults to "sm". */
+export type TagSize = "xs" | "sm" | "md" | "lg";
+/** "solid" for emphasis, "outline" on dense/colored surfaces, "subtle" (default) for everyday chips. */
+export type TagVariant = "solid" | "outline" | "subtle";
+/** "chip" is the filled/outlined pill; "dot" is a tone dot beside plain text. */
+export type TagDisplay = "chip" | "dot";
+/** Props for the pill-shaped status/filter Tag chip — see Tag.tsx for interactive/icon behavior. */
+export interface TagProps extends DataAttributes {
+    /** Chip text; truncates with an ellipsis when `maxW` is set. */
+    label: string;
+    /** No effect without icon — turns it into a remove button and stops the click from bubbling to onTagClick. */
+    onIconClick?: () => void;
+    /** Accessible name of the remove button: a string as is, or a function of the label. Defaults to `Remove ${label}`. */
+    removeLabel?: string | ((label: string) => string);
+    /** Makes the label a real button and turns on hover/cursor/focus styles; keyboard (Enter/Space) works natively. */
+    onTagClick?: () => void;
+    /** Decorative (aria-hidden) unless onIconClick is also passed — icon alone adds no interactivity. */
+    icon?: ElementType;
+    /** A decorative icon before the label; always aria-hidden and never clickable. */
+    leadingIcon?: ElementType;
+    /** Category colour, defaults to "primary"; ignored when `tone` is set. */
+    colorScheme?: TagColorScheme;
+    /** Status tone (neutral/info/success/warning/error); overrides colorScheme for state, not category. */
+    tone?: Tone;
+    /** Caps the width; the label truncates with an ellipsis and shows the full text as a title. */
+    maxW?: BoxProps["maxW"];
+    /** Defaults to "sm"; also scales the icons. */
+    size?: TagSize;
+    /** Defaults to "subtle"; ignored when `display` is "dot". */
+    variant?: TagVariant;
+    /** "dot" renders an 8px tone dot plus plain label for quiet rows; variant and icons are ignored. Default "chip". */
+    display?: TagDisplay;
+    /** Dims the tag and disables its button(s) (native disabled); no effect on a purely static tag. */
+    isDisabled?: boolean;
+    /** Test hook on the root; the remove button gets `${"$"}{testId}-remove`. */
+    "data-testid"?: string;
+}

package/dist/Components/Tag/TagProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/Tag/tagDot.d.ts

@@ -0,0 +1,3 @@
+import type { Tone } from "../../Theme/tokens/builders/tone";
+import type { PaletteProps } from "../../Theme/tokens/types";
+export declare const dotColor: (colors: PaletteProps, tone: Tone | undefined, colorScheme: string) => string;

package/dist/Components/Tag/tagDot.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.dotColor = void 0;
+const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
+const tone_1 = require("../../Theme/tokens/builders/tone");
+const paletteScale_1 = require("../../Theme/tokens/builders/paletteScale");
+const paletteFromTheme_1 = require("../../Theme/chakra/paletteFromTheme");
+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) ? (0, paletteScale_1.scaleNamed)(colors, colorScheme) : undefined;
+    if (scale)
+        return scale;
+    (0, paletteFromTheme_1.warnUnknownColorScheme)(colorScheme);
+    return colors.gray;
+};
+const dotColor = (colors, tone, colorScheme) => {
+    const surfaces = [colors.background[50], colors.backgroundColor.main];
+    if (tone === "neutral")
+        return colors.textMuted;
+    const scale = tone
+        ? colors.semantic[tone_1.toneToSemantic[tone]]
+        : themedScale(colors, colorScheme);
+    return surfaces.reduce((ink, surface) => (0, outlineRung_1.liftToContrast)(ink, surface), scale[500]);
+};
+exports.dotColor = dotColor;

package/dist/Components/TagInput/TagInput.d.ts

@@ -0,0 +1,4 @@
+import type { TagInputProps } from "./TagInputProps";
+/** Free-text tag field that commits entries as removable chips; forwards its ref to the text input. */
+declare const TagInput: import("react").ForwardRefExoticComponent<TagInputProps & import("react").RefAttributes<HTMLInputElement>>;
+export default TagInput;

package/dist/Components/TagInput/TagInput.js

@@ -0,0 +1,101 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const controlSizes_1 = require("../../Theme/tokens/primitives/controlSizes");
+const placeholderInk_1 = require("../../Theme/tokens/builders/placeholderInk");
+const motion_1 = require("../../Theme/chakra/motion");
+const fieldStyles_1 = require("../Common/fieldStyles");
+const FormLabel_1 = require("../Common/FormLabel");
+const FieldMessage_1 = __importDefault(require("../Common/FieldMessage"));
+const useFieldIds_1 = require("../Common/useFieldIds");
+const searchSelectSize_1 = require("../SearchSelect/searchSelectSize");
+const Tag_1 = __importDefault(require("../Tag/Tag"));
+const tagEntries_1 = require("./tagEntries");
+/** Free-text tag field that commits entries as removable chips; forwards its ref to the text input. */
+const TagInput = (0, react_1.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 = controlSizes_1.DEFAULT_CONTROL_SIZE, labels, width = "100%", }, ref) {
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const s = (0, searchSelectSize_1.getSearchSelectSizeStyles)(size);
+    const inputRef = (0, react_1.useRef)(null);
+    const mergedRef = (0, react_2.useMergeRefs)(inputRef, ref);
+    const [draft, setDraft] = (0, react_1.useState)("");
+    const [rejection, setRejection] = (0, react_1.useState)(null);
+    const [announcement, setAnnouncement] = (0, react_1.useState)("");
+    const isInvalid = Boolean(error || rejection);
+    const shownError = rejection !== null && rejection !== void 0 ? rejection : errorMessage;
+    const ids = (0, useFieldIds_1.useFieldIds)(id, { error: isInvalid, errorMessage: shownError, helperText });
+    const locked = isDisabled || isReadOnly;
+    const messages = (0, react_1.useMemo)(() => (0, tagEntries_1.resolveTagInputLabels)(labels), [labels]);
+    const commit = (text) => {
+        const result = (0, tagEntries_1.addTags)(value, (0, tagEntries_1.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 || !(0, tagEntries_1.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 ((0, jsx_runtime_1.jsxs)(react_2.Box, { width: width, children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, id: ids.inputId, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), (0, jsx_runtime_1.jsxs)(react_2.Flex, { wrap: "wrap", gap: s.gap, align: "center", px: s.px, minH: s.minH, onMouseDown: focusFromBox, sx: {
+                    ...(0, fieldStyles_1.getFieldStateStyles)(theme, { error: isInvalid, disabled: isDisabled }),
+                    ...(0, motion_1.reducedMotionSx)(),
+                }, _hover: isDisabled || isInvalid ? undefined : { borderColor: (0, fieldStyles_1.fieldHoverBorder)(theme.colors) }, _focusWithin: {
+                    borderColor: isInvalid ? theme.colors.semanticText.error : theme.colors.primary[500],
+                    boxShadow: (0, fieldStyles_1.fieldFocusRing)(theme),
+                }, children: [value.map((tag, index) => ((0, jsx_runtime_1.jsx)(Tag_1.default, { size: s.tagSize, colorScheme: "primary", label: tag, removeLabel: messages.remove, isDisabled: isDisabled, icon: locked ? undefined : lucide_react_1.X, onIconClick: locked
+                            ? undefined
+                            : () => {
+                                var _a;
+                                removeAt(index);
+                                (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                            } }, `${index}:${tag}`))), (0, jsx_runtime_1.jsx)(react_2.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: (0, placeholderInk_1.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) => (0, jsx_runtime_1.jsx)("input", { type: "hidden", name: name, value: tag }, `${index}:${tag}`)), (0, jsx_runtime_1.jsx)(react_2.VisuallyHidden, { role: "status", "aria-live": "polite", position: "fixed", top: 0, left: 0, children: announcement }), (0, jsx_runtime_1.jsx)(FieldMessage_1.default, { error: isInvalid, errorMessage: shownError, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
+});
+TagInput.displayName = "TagInput";
+exports.default = TagInput;