pixelize-design-library 2.4.2-beta.9 → 3.0.0

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

@@ -0,0 +1,96 @@
+import type { ElementType, ReactNode } from "react";
+import type { ControlSize } from "../../Theme/tokens/primitives/controlSizes";
+/** Visual treatment; follows the repo's solid/subtle/outline/ghost/line vocabulary. Defaults to "line". */
+export type TabsVariant = "solid" | "subtle" | "outline" | "ghost" | "line";
+/** Arrow-key direction and tablist layout axis. */
+export type TabsOrientation = "horizontal" | "vertical";
+/** "automatic" (default) selects a tab as focus reaches it; "manual" only selects on Enter/Space/click. */
+export type TabActivationMode = "automatic" | "manual";
+/** Category colour for the selected tab's ink/fill and its count badge. */
+export type TabsColorScheme = "primary" | "secondary" | "tertiary" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink";
+/** One entry in the declarative `items` API; omit `content` when panels are rendered elsewhere (e.g. a route). With `href` on every item it is a navigation link, not a tab. */
+export interface TabItem {
+    /** Unique value of the tab; what `value` and `onChange` use. */
+    id: string;
+    /** Tab text or node. */
+    label: ReactNode;
+    /** Decorative — rendered aria-hidden, never a substitute for `label`. */
+    icon?: ReactNode;
+    /** Renders a soft count badge after the label; omit for no badge. */
+    count?: number | string;
+    /** Dims the tab and makes it unselectable; also skipped when picking the default selection. */
+    isDisabled?: boolean;
+    /** Panel body for this tab; if no item in `items` sets one, no panel container is rendered at all. */
+    content?: ReactNode;
+    /** Makes the item a link. When every item has one, `Tabs` renders a `<nav>` of links instead of a tablist. */
+    href?: string;
+}
+/** Themed, accessible tabs. Pass `items` for the declarative API, or `children` (TabList/Tab/TabPanels/TabPanel) to compose by hand. */
+export interface TabsProps {
+    /** Declarative API — builds TabList/Tab/TabPanels/TabPanel for you. Ignored when `children` is passed. */
+    items?: TabItem[];
+    /** Composed API — render TabList/Tab/TabPanels/TabPanel yourself; `items` is ignored. */
+    children?: ReactNode;
+    /** Controlled selected tab id; pass with `onChange`. */
+    value?: string;
+    /** Uncontrolled initial tab id; with `items` and neither this nor `value`, the first enabled tab is selected. */
+    defaultValue?: string;
+    /** Called with the new tab value on selection, controlled or not. */
+    onChange?: (value: string) => void;
+    /** Visual treatment; defaults to "line". */
+    variant?: TabsVariant;
+    /** Defaults to "sm", on the button control scale (sm 32 · md 40 · lg 48px), not form fields. */
+    size?: ControlSize;
+    /** Colour of the selected tab and count badges; defaults to "primary". */
+    colorScheme?: TabsColorScheme;
+    /** Layout axis and arrow-key direction; defaults to "horizontal". */
+    orientation?: TabsOrientation;
+    /** Whether focus alone selects a tab; defaults to "automatic". */
+    activationMode?: TabActivationMode;
+    /** Keeps an unselected panel unmounted until its tab is first selected; stays mounted after that. */
+    isLazy?: boolean;
+    /** Tabs share the tablist's width/height equally instead of sizing to their own content. */
+    isFitted?: boolean;
+    /** Stable id prefix for the generated tab/panel ids; auto-generated via useId() when omitted. */
+    id?: string;
+    /** Accessible name of the tablist, or of the nav in link mode. */
+    "aria-label"?: string;
+    /** Id of an element that names the tablist, or the nav in link mode. */
+    "aria-labelledby"?: string;
+    /** Anchor-like component for `href` items, e.g. a router link. Defaults to "a"; link mode only. */
+    linkAs?: ElementType;
+}
+/** Composed-API tablist wrapper; renders `Tab` children and owns keyboard navigation + overflow scroll. */
+export interface TabListProps {
+    /** `Tab` elements in order. */
+    children: ReactNode;
+    /** Accessible name of the tablist. */
+    "aria-label"?: string;
+    /** Id of an element that names the tablist. */
+    "aria-labelledby"?: string;
+}
+/** Composed-API single tab button; read from the nearest `<Tabs>` context for variant/size/colours. */
+export interface TabProps {
+    /** Must match a TabPanel's `value` to be controllable/reachable by aria-controls. */
+    value: string;
+    /** Tab label. */
+    children: ReactNode;
+    /** Decorative — rendered aria-hidden. */
+    icon?: ReactNode;
+    /** Soft count badge after the label; omit for none. */
+    count?: number | string;
+    /** Dims the tab and makes it unselectable. */
+    isDisabled?: boolean;
+}
+/** Composed-API panel wrapper; renders `TabPanel` children and registers that this Tabs instance has panels. */
+export interface TabPanelsProps {
+    /** `TabPanel` elements. */
+    children: ReactNode;
+}
+/** Composed-API panel body; hidden (and, with isLazy, unmounted) whenever its `value` isn't selected. */
+export interface TabPanelProps {
+    /** Must match the Tab's `value` this panel belongs to. */
+    value: string;
+    /** Panel content. */
+    children?: ReactNode;
+}

package/dist/Components/Tabs/TabsProps.js

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

package/dist/Components/Tabs/components/CountBadge.d.ts

@@ -0,0 +1,17 @@
+import type { ColorScale, PaletteProps } from "../../../Theme/tokens/types";
+import type { ControlSize } from "../../../Theme/tokens/primitives/controlSizes";
+/** Internal count pill on a tab; ink is lifted against `surface`. */
+export interface CountBadgeProps {
+    /** Number or text shown in the pill. */
+    count: number | string;
+    /** Active theme palette. */
+    colors: PaletteProps;
+    /** Colour scale the pill's tone is resolved from. */
+    scale: ColorScale;
+    /** Surface the badge actually sits on — the page canvas, or the tab's own solid fill when selected. */
+    surface: string;
+    /** Control size; picks the font size. */
+    size: ControlSize;
+}
+declare const CountBadge: ({ count, colors, scale, surface, size }: CountBadgeProps) => import("react/jsx-runtime").JSX.Element;
+export default CountBadge;

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

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const tone_1 = require("../../../Theme/tokens/builders/tone");
+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 = (0, tone_1.resolveSoftTone)(colors, scale, surface);
+    return ((0, jsx_runtime_1.jsx)(react_1.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 }));
+};
+exports.default = CountBadge;

package/dist/Components/Tabs/components/Tab.d.ts

@@ -0,0 +1,4 @@
+import type { TabProps } from "../TabsProps";
+/** One role="tab" button inside a TabList; `ref` is that `<button>`. */
+declare const Tab: import("react").ForwardRefExoticComponent<TabProps & import("react").RefAttributes<HTMLButtonElement>>;
+export default Tab;

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

@@ -0,0 +1,22 @@
+"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 TabsContext_1 = require("../TabsContext");
+const useTabAppearance_1 = require("../useTabAppearance");
+const CountBadge_1 = __importDefault(require("./CountBadge"));
+/** One role="tab" button inside a TabList; `ref` is that `<button>`. */
+const Tab = (0, react_1.forwardRef)(function Tab({ value, children, icon, count, isDisabled }, ref) {
+    var _a;
+    const ctx = (0, TabsContext_1.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 } = (0, useTabAppearance_1.useTabAppearance)(isSelected, isDisabled);
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { as: "button", type: "button", ref: ref, role: "tab", id: (0, TabsContext_1.tabId)(ctx.baseId, value), "aria-selected": isSelected, "aria-disabled": isDisabled || undefined, "aria-controls": ctx.hasPanels ? (0, TabsContext_1.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 ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", "aria-hidden": true, boxSize: `${iconSize}px`, sx: iconSx, children: icon })) : null, (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", children: children }), count !== undefined ? ((0, jsx_runtime_1.jsx)(CountBadge_1.default, { count: count, colors: colors, scale: scale, surface: ctx.variant === "solid" && isSelected ? style.bg : canvas, size: ctx.size })) : null] }));
+});
+Tab.displayName = "Tab";
+exports.default = Tab;

package/dist/Components/Tabs/components/TabLinkList.d.ts

@@ -0,0 +1,7 @@
+import type { ElementType } from "react";
+import type { TabsProps } from "../TabsProps";
+type TabLinkListProps = Pick<TabsProps, "items" | "aria-label" | "aria-labelledby"> & {
+    linkAs: ElementType;
+};
+declare const TabLinkList: ({ items, linkAs, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy }: TabLinkListProps) => import("react/jsx-runtime").JSX.Element;
+export default TabLinkList;

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

@@ -0,0 +1,34 @@
+"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("@chakra-ui/react");
+const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+const scrollbar_1 = require("../../../Theme/tokens/builders/scrollbar");
+const TabsContext_1 = require("../TabsContext");
+const useTabAppearance_1 = require("../useTabAppearance");
+const CountBadge_1 = __importDefault(require("./CountBadge"));
+const isPlainPrimaryClick = (event) => event.button === 0 && !event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey;
+const TabLink = ({ item, linkAs }) => {
+    const ctx = (0, TabsContext_1.useTabsContext)();
+    const isSelected = ctx.selectedId === item.id;
+    const { colors, canvas, scale, style, iconSize, iconSx, boxProps } = (0, useTabAppearance_1.useTabAppearance)(isSelected, item.isDisabled);
+    const content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [item.icon ? ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", "aria-hidden": true, boxSize: `${iconSize}px`, sx: iconSx, children: item.icon })) : null, (0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", children: item.label }), item.count !== undefined ? ((0, jsx_runtime_1.jsx)(CountBadge_1.default, { count: item.count, colors: colors, scale: scale, surface: ctx.variant === "solid" && isSelected ? style.bg : canvas, size: ctx.size })) : null] }));
+    if (item.isDisabled) {
+        return ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", "aria-disabled": "true", "data-value": item.id, ...boxProps, children: content }));
+    }
+    return ((0, jsx_runtime_1.jsx)(react_1.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 } = (0, useCustomTheme_1.useCustomTheme)();
+    const ctx = (0, TabsContext_1.useTabsContext)();
+    const isVertical = ctx.orientation === "vertical";
+    const isLine = ctx.variant === "line";
+    return ((0, jsx_runtime_1.jsx)(react_1.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: (0, scrollbar_1.scrollbarStyles)(colors, "hover"), children: items === null || items === void 0 ? void 0 : items.map((item) => ((0, jsx_runtime_1.jsx)(TabLink, { item: item, linkAs: linkAs }, item.id))) }));
+};
+exports.default = TabLinkList;

package/dist/Components/Tabs/components/TabList.d.ts

@@ -0,0 +1,4 @@
+import type { TabListProps } from "../TabsProps";
+/** Tablist that scrolls to keep the focused or selected tab in view. */
+declare const TabList: ({ children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy }: TabListProps) => import("react/jsx-runtime").JSX.Element;
+export default TabList;

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

@@ -0,0 +1,87 @@
+"use strict";
+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 useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+const scrollbar_1 = require("../../../Theme/tokens/builders/scrollbar");
+const TabsContext_1 = require("../TabsContext");
+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 } = (0, useCustomTheme_1.useCustomTheme)();
+    const ctx = (0, TabsContext_1.useTabsContext)();
+    const ref = (0, react_1.useRef)(null);
+    const isVertical = ctx.orientation === "vertical";
+    const isLine = ctx.variant === "line";
+    const revealed = (0, react_1.useRef)(false);
+    (0, react_1.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 ((0, jsx_runtime_1.jsx)(react_2.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: (0, scrollbar_1.scrollbarStyles)(colors, "hover"), children: children }));
+};
+exports.default = TabList;

package/dist/Components/Tabs/components/TabPanel.d.ts

@@ -0,0 +1,4 @@
+import type { TabPanelProps } from "../TabsProps";
+/** Panel for the tab with the same `value`; mounts on first selection when lazy. */
+declare const TabPanel: ({ value, children }: TabPanelProps) => import("react/jsx-runtime").JSX.Element | null;
+export default TabPanel;

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

@@ -0,0 +1,18 @@
+"use strict";
+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 TabsContext_1 = require("../TabsContext");
+/** Panel for the tab with the same `value`; mounts on first selection when lazy. */
+const TabPanel = ({ value, children }) => {
+    const ctx = (0, TabsContext_1.useTabsContext)();
+    const isSelected = ctx.selectedId === value;
+    const hasRenderedRef = (0, react_1.useRef)(isSelected);
+    if (isSelected)
+        hasRenderedRef.current = true;
+    if (ctx.isLazy && !hasRenderedRef.current)
+        return null;
+    return ((0, jsx_runtime_1.jsx)(react_2.Box, { role: "tabpanel", id: (0, TabsContext_1.panelId)(ctx.baseId, value), "aria-labelledby": (0, TabsContext_1.tabId)(ctx.baseId, value), hidden: !isSelected, tabIndex: 0, children: children }));
+};
+exports.default = TabPanel;

package/dist/Components/Tabs/components/TabPanels.d.ts

@@ -0,0 +1,4 @@
+import type { TabPanelsProps } from "../TabsProps";
+/** Container for `TabPanel`s in the composed API; registers with the nearest `Tabs` so tabs link to their panels. */
+declare const TabPanels: ({ children }: TabPanelsProps) => import("react/jsx-runtime").JSX.Element;
+export default TabPanels;

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

@@ -0,0 +1,15 @@
+"use strict";
+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 TabsContext_1 = require("../TabsContext");
+/** Container for `TabPanel`s in the composed API; registers with the nearest `Tabs` so tabs link to their panels. */
+const TabPanels = ({ children }) => {
+    const ctx = (0, TabsContext_1.useTabsContext)();
+    (0, react_1.useEffect)(() => {
+        ctx.registerPanels();
+    }, [ctx]);
+    return ((0, jsx_runtime_1.jsx)(react_2.Box, { flex: "1", minW: 0, children: children }));
+};
+exports.default = TabPanels;

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

@@ -0,0 +1,6 @@
+export { default as Tabs } from "./Tabs";
+export { default as TabList } from "./components/TabList";
+export { default as Tab } from "./components/Tab";
+export { default as TabPanels } from "./components/TabPanels";
+export { default as TabPanel } from "./components/TabPanel";
+export type { TabsProps, TabItem, TabsVariant, TabsOrientation, TabActivationMode, TabsColorScheme, TabListProps, TabProps, TabPanelsProps, TabPanelProps, } from "./TabsProps";

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,4 +1,5 @@
 import React from "react";
 import { TagProps } from "./TagProps";
-declare const Tag: React.FC<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,20 +1,43 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("@chakra-ui/react");
-// Icon size scales with the tag size so the right icon stays proportional.
+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 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 = (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;
-    return ((0, jsx_runtime_1.jsxs)(react_1.Tag, { size: size, variant: variant, colorScheme: colorScheme, borderRadius: "full", children: [isInteractive ? ((0, jsx_runtime_1.jsx)(react_1.TagLabel, { as: "button", type: "button", cursor: "pointer", onClick: () => onTagClick === null || onTagClick === void 0 ? void 0 : onTagClick(), children: label })) : ((0, jsx_runtime_1.jsx)(react_1.TagLabel, { children: label })), icon &&
-                (onIconClick ? ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "button", type: "button", "aria-label": `Remove ${label}`, onClick: (e) => {
+    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();
-                        onIconClick();
-                    }, display: "inline-flex", alignItems: "center", ml: "0.25rem", transition: "all 0.2s ease", _hover: { opacity: 0.8, transform: "scale(1.05)" }, children: (0, jsx_runtime_1.jsx)(react_1.Icon, { as: icon, boxSize: ICON_SIZE[size] }) })) : ((0, jsx_runtime_1.jsx)(react_1.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: (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 { 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;