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

package/dist/esm/Components/Table/settings/TableSettings.js

@@ -0,0 +1,83 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Flex, IconButton, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalOverlay, Tabs, TabList, TabPanels, Tab, TabPanel, Text, } from "@chakra-ui/react";
+import { useCallback, useMemo, useRef, useState } from "react";
+import { motion } from "framer-motion";
+import ManageColumns from "./ManageColumns.js";
+import Button from "../../Button/Button.js";
+import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
+import { raisedRule } from "../../../Theme/tokens/builders/surfaceRaised.js";
+import { scrollbarStyles } from "../../../Theme/tokens/builders/scrollbar.js";
+import { columnLabelText } from "../columnLabel.js";
+import { Settings, Check } from "lucide-react";
+import ToolTip from "../../ToolTip/ToolTip.js";
+import { listRowBackgrounds } from "../../../Theme/tokens/builders/rowStates.js";
+import { motionTransition, transitionFor } from "../../../Theme/tokens/primitives/motion.js";
+import { usePrefersReducedMotion } from "../../../Theme/chakra/motion.js";
+const MotionModalContent = motion(ModalContent);
+const SHEET_ENTER = motionTransition("enter", "out");
+const SHEET_EXIT = motionTransition("exit", "in");
+const DENSITY_OPTIONS = [
+    { value: "compact", label: "Compact", desc: "Tight rows — fit more data on screen" },
+    { value: "normal", label: "Normal", desc: "Balanced default spacing" },
+    { value: "comfortable", label: "Comfortable", desc: "Roomy rows, easier scanning" },
+];
+const TableSettings = ({ columns, onSave, density = "normal", onDensityChange, groupBy, }) => {
+    const theme = useCustomTheme();
+    const sheetOffset = usePrefersReducedMotion() ? 0 : "-100%";
+    const rowBackgrounds = useMemo(() => listRowBackgrounds(theme.colors), [theme.colors]);
+    const childInputMethodsRef = useRef({});
+    const [settingsOpen, setSettingsOpen] = useState(false);
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const [items, setItems] = useState(columns);
+    // Group selection is applied on Save (not live), per "click Apply to group".
+    const [selectedGroup, setSelectedGroup] = useState(groupBy);
+    const handleSave = useCallback(() => {
+        onSave(items, selectedGroup);
+        setSettingsOpen(false);
+    }, [onSave, items, selectedGroup]);
+    const handleOpen = useCallback(() => {
+        setItems(columns);
+        setSelectedGroup(groupBy);
+        setSettingsOpen(true);
+    }, [columns, groupBy]);
+    const tabStyle = {
+        fontSize: "xs-plus",
+        fontWeight: 500,
+        px: 4,
+        py: 2,
+        borderBottom: "2px solid transparent",
+        color: theme.colors.textMuted,
+        _selected: {
+            borderBottom: `2px solid ${theme.colors.accentText}`,
+            color: theme.colors.accentText,
+            fontWeight: 600,
+        },
+        _hover: { color: theme.colors.text[600] },
+    };
+    return (_jsxs(Box, { children: [_jsx(ToolTip, { label: "Table Settings", placement: "top", children: _jsx(IconButton, { "aria-label": "Table settings", icon: _jsx(Settings, { size: "1.25rem" }), onClick: handleOpen, variant: "unstyled", minW: "auto", h: "auto", display: "flex", justifyContent: "flex-end", cursor: "pointer", transition: transitionFor(["color", "transform"], "base"), color: theme.colors.text[500], _hover: {
+                        transform: "scale(1.1)",
+                        color: theme.colors.accentText
+                    } }) }), _jsxs(Modal, { isOpen: settingsOpen, onClose: () => setSettingsOpen(false), size: { base: "full", md: "md" }, children: [_jsx(ModalOverlay, {}), _jsxs(MotionModalContent, { mt: "0", top: "0", left: { base: 0, md: "auto" }, right: { base: 0, md: "auto" }, position: "absolute", borderTopRadius: "none", initial: { y: sheetOffset, opacity: 0 }, animate: { y: 0, opacity: 1 }, exit: { y: sheetOffset, opacity: 0, transition: SHEET_EXIT }, transition: SHEET_ENTER, padding: "0", minW: { base: "auto", md: "620px" }, minH: { base: "auto", md: "520px" }, maxH: "90vh", display: "flex", flexDirection: "column", bg: theme.colors.surfaceRaised, overflow: "hidden", children: [_jsx(ModalCloseButton, { top: 3, right: 3, zIndex: 2 }), _jsxs(Tabs, { index: selectedIndex, onChange: setSelectedIndex, variant: "unstyled", display: "flex", flexDirection: "column", flex: "1", minH: 0, children: [_jsxs(Box, { pt: 4, px: 4, children: [_jsx(Text, { fontWeight: 600, fontSize: "md", mb: 3, children: "Table Settings" }), _jsxs(TabList, { gap: 0, borderBottom: "1px solid", borderColor: raisedRule(theme.colors), children: [_jsx(Tab, { ...tabStyle, children: "Density" }), _jsx(Tab, { ...tabStyle, children: "Manage Columns" }), _jsx(Tab, { ...tabStyle, children: "Group" })] })] }), _jsx(ModalBody, { px: 4, py: 3, flex: "1", overflowY: "auto", sx: scrollbarStyles(theme.colors), children: _jsxs(TabPanels, { children: [_jsx(TabPanel, { px: 0, py: 1, children: _jsx(Flex, { direction: "column", gap: 2, children: DENSITY_OPTIONS.map((opt) => {
+                                                            const selected = density === opt.value;
+                                                            return (_jsxs(Flex, { as: "button", type: "button", align: "center", gap: 3, px: 3, py: 2.5, borderRadius: "lg", border: "1px solid", borderColor: selected ? theme.colors.accentText : raisedRule(theme.colors), bg: selected ? rowBackgrounds.selected : theme.colors.transparent, transition: transitionFor(["background-color", "border-color"]), _hover: { borderColor: theme.colors.accentText }, onClick: () => onDensityChange === null || onDensityChange === void 0 ? void 0 : onDensityChange(opt.value), children: [_jsx(Box, { boxSize: "1.1rem", borderRadius: "full", border: "2px solid", borderColor: selected ? theme.colors.accentText : theme.colors.boxborder[500], display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, children: selected && _jsx(Check, { size: 11, color: theme.colors.accentText, strokeWidth: 3 }) }), _jsxs(Box, { textAlign: "left", children: [_jsx(Text, { fontSize: "xs-plus", fontWeight: 600, color: theme.colors.text[700], children: opt.label }), _jsx(Text, { fontSize: "xs-minus", color: theme.colors.textMuted, children: opt.desc })] })] }, opt.value));
+                                                        }) }) }), _jsx(TabPanel, { px: 0, py: 0, children: _jsx(Box, { sx: {
+                                                            "& [role='listitem'], & > div > div": {
+                                                                py: "4px !important",
+                                                                minHeight: "unset !important",
+                                                            },
+                                                            "& label": { fontSize: "13px !important" },
+                                                            "& .chakra-checkbox": { gap: "8px !important" },
+                                                            "& .chakra-checkbox__label": { fontSize: "13px !important" },
+                                                            "& [draggable]": { py: "5px !important" },
+                                                        }, children: _jsx(ManageColumns, { columns: columns, items: items, setItems: setItems, childInputMethodsRef: childInputMethodsRef }) }) }), _jsxs(TabPanel, { px: 0, py: 1, children: [_jsx(Text, { fontSize: "xs", color: theme.colors.textMuted, mb: 2, children: "Group rows by a column. Click Save to apply." }), _jsx(Flex, { direction: "column", gap: 2, children: [{ id: undefined, label: "None (no grouping)" },
+                                                                // Only columns that declare a `columnType` are groupable.
+                                                                ...columns
+                                                                    .filter((c) => !!c.columnType && !c.isHidden)
+                                                                    .map((c) => ({ id: c.id, label: columnLabelText(c) }))]
+                                                                .map((opt) => {
+                                                                var _a;
+                                                                const selected = selectedGroup === opt.id;
+                                                                return (_jsxs(Flex, { as: "button", type: "button", align: "center", gap: 3, px: 3, py: 2.5, borderRadius: "lg", border: "1px solid", borderColor: selected ? theme.colors.accentText : raisedRule(theme.colors), bg: selected ? rowBackgrounds.selected : theme.colors.transparent, transition: transitionFor(["background-color", "border-color"]), _hover: { borderColor: theme.colors.accentText }, onClick: () => setSelectedGroup(opt.id), children: [_jsx(Box, { boxSize: "1.1rem", borderRadius: "full", border: "2px solid", borderColor: selected ? theme.colors.accentText : theme.colors.boxborder[500], display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, children: selected && _jsx(Check, { size: 11, color: theme.colors.accentText, strokeWidth: 3 }) }), _jsx(Text, { fontSize: "xs-plus", fontWeight: 600, color: theme.colors.text[700], textAlign: "left", children: opt.label })] }, String((_a = opt.id) !== null && _a !== void 0 ? _a : "__none__")));
+                                                            }) })] })] }) })] }), _jsxs(ModalFooter, { gap: "0.5rem", borderTop: "1px solid", borderColor: raisedRule(theme.colors), pt: 3, pb: 3, px: 4, children: [_jsx(Button, { label: "Close", size: "sm", onClick: () => setSettingsOpen(false), variant: "outline", colorScheme: "red" }), _jsx(Button, { label: "Save", size: "sm", onClick: handleSave })] })] })] })] }));
+};
+export default TableSettings;

package/dist/esm/Components/Table/variants/TableVariantContext.js

@@ -0,0 +1,13 @@
+import { createContext, useContext, useMemo } from "react";
+import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
+import { isDarkCanvas } from "../../../Theme/tokens/builders/accentText.js";
+import { studioPreset } from "./studio.js";
+const TableVariantContext = createContext(null);
+export const TableVariantProvider = TableVariantContext.Provider;
+/** No provider means the default variant — studio, the same preset `Table` falls back to. */
+export function useTableVariant() {
+    const provided = useContext(TableVariantContext);
+    const theme = useCustomTheme();
+    const isDark = isDarkCanvas(theme.colors.backgroundColor.main);
+    return useMemo(() => provided !== null && provided !== void 0 ? provided : studioPreset(theme.colors, isDark), [provided, theme.colors, isDark]);
+}

package/dist/esm/Components/Table/variants/classic.js

@@ -0,0 +1,46 @@
+import { accentTextOnCanvas } from "../../../Theme/tokens/builders/accentText.js";
+import { cardRule } from "../../../Theme/tokens/builders/planeStep.js";
+import { getTableRowHoverStyle } from "../components/tableRowHoverStyle.js";
+import { stripeFill } from "./stripe.js";
+/**
+ * The table as it shipped. Pinned by snapshot: every value here is read off the
+ * live component, so adding a variant cannot move it.
+ */
+export const classicPreset = (colors, isDark) => {
+    const headerBg = colors.table.hover[200];
+    return {
+        header: {
+            bg: headerBg,
+            ink: accentTextOnCanvas(colors.secondary, headerBg),
+            fontSize: 13,
+            fontWeight: 600,
+            textTransform: "capitalize",
+            letterSpacing: "normal",
+            height: "45px",
+            ruleColor: cardRule(colors),
+            showColumnRule: true,
+            actions: "always",
+        },
+        row: {
+            hoverBg: getTableRowHoverStyle(colors, isDark).backgroundColor,
+            hoverScope: "cell",
+            ruleColor: cardRule(colors),
+            frozenRuleColor: colors.boxborder[300],
+            selectedBg: colors.primary.opacity[16],
+            selectedBarColor: colors.primary[500],
+            showSelectedBar: false,
+            stripeBg: stripeFill(colors),
+        },
+        slot: {
+            width: "6",
+            rest: "checkbox",
+            indexInk: colors.textMuted,
+            centered: false,
+        },
+        cells: {
+            ink: colors.text[500],
+            statusFill: "bleed",
+            pillRadius: "0",
+        },
+    };
+};

package/dist/esm/Components/Table/variants/index.js

@@ -0,0 +1,9 @@
+import { classicPreset } from "./classic.js";
+import { studioPreset } from "./studio.js";
+/** Adding a variant is one file and one union member — no component changes. */
+export const TABLE_VARIANTS = {
+    classic: classicPreset,
+    studio: studioPreset,
+};
+export * from "./tokens.js";
+export { classicPreset, studioPreset };

package/dist/esm/Components/Table/variants/pillInk.js

@@ -0,0 +1,18 @@
+import { AA_NORMAL_TEXT } from "../../../Theme/tokens/builders/accentText.js";
+import { compositeOver } from "../../../Theme/tokens/builders/color.js";
+import { liftToContrast } from "../../../Theme/tokens/builders/outlineRung.js";
+const cache = new Map();
+/**
+ * A consumer `statusColors` hex is a FILL, and `pickTableColor` hands it straight back as ink
+ * over a 13%-alpha tint of itself — legible reversed out of a solid cell, ~1.9:1 on a pill.
+ * The palette path is already resolved by `resolveStatusTone`; this rescues the override path.
+ */
+export function resolvePillInk(ink, soft, surface) {
+    const key = `${ink}|${soft}|${surface}`;
+    const hit = cache.get(key);
+    if (hit !== undefined)
+        return hit;
+    const resolved = liftToContrast(ink, compositeOver(soft, surface), AA_NORMAL_TEXT);
+    cache.set(key, resolved);
+    return resolved;
+}

package/dist/esm/Components/Table/variants/stripe.js

@@ -0,0 +1,3 @@
+import { liftToContrast } from "../../../Theme/tokens/builders/outlineRung.js";
+export const STRIPE_STEP = 1.04;
+export const stripeFill = (colors) => liftToContrast(colors.table.hover[50], colors.background[50], STRIPE_STEP);

package/dist/esm/Components/Table/variants/studio.js

@@ -0,0 +1,48 @@
+import { CHROME_RULE, MIN_PERCEPTIBLE_STEP, liftToContrast, } from "../../../Theme/tokens/builders/outlineRung.js";
+import { getTableRowHoverStyle } from "../components/tableRowHoverStyle.js";
+import { stripeFill } from "./stripe.js";
+/**
+ * Quieter chrome, one rule instead of a grid, and a slot that rests on the row
+ * number. Every colour is lifted against the surface it actually sits on.
+ */
+export const studioPreset = (colors, isDark) => {
+    const surface = colors.background[50];
+    // Studio drops the per-column rule, so the one line left has to be visible on
+    // every brand — `boxborder[200]` measures as low as 1.09:1 on some of them.
+    const rule = liftToContrast(colors.boxborder[200], surface, CHROME_RULE);
+    return {
+        header: {
+            bg: surface,
+            ink: colors.text[500],
+            fontSize: 11,
+            fontWeight: 600,
+            textTransform: "uppercase",
+            letterSpacing: "0.06em",
+            height: "40px",
+            ruleColor: rule,
+            showColumnRule: false,
+            actions: "hover",
+        },
+        row: {
+            hoverBg: getTableRowHoverStyle(colors, isDark).backgroundColor,
+            hoverScope: "row",
+            ruleColor: rule,
+            frozenRuleColor: rule,
+            selectedBg: liftToContrast(colors.primary[50], surface, MIN_PERCEPTIBLE_STEP),
+            selectedBarColor: colors.primary[500],
+            showSelectedBar: true,
+            stripeBg: stripeFill(colors),
+        },
+        slot: {
+            width: "3.5rem",
+            rest: "index",
+            indexInk: colors.textMuted,
+            centered: true,
+        },
+        cells: {
+            ink: colors.text[500],
+            statusFill: "pill",
+            pillRadius: "0.375rem",
+        },
+    };
+};

package/dist/esm/Components/Table/variants/tokens.js

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

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

@@ -0,0 +1,79 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useId, useMemo, useState } from "react";
+import { Box } from "@chakra-ui/react";
+import { TabsContext } from "./TabsContext.js";
+import TabList from "./components/TabList.js";
+import Tab from "./components/Tab.js";
+import TabPanels from "./components/TabPanels.js";
+import TabPanel from "./components/TabPanel.js";
+import TabLinkList from "./components/TabLinkList.js";
+/** Tabs from `items` or composed TabList and TabPanels; all-`href` items render a nav. */
+const Tabs = ({ items, children, value, defaultValue, onChange, variant = "line", size = "sm", colorScheme = "primary", orientation = "horizontal", activationMode = "automatic", isLazy = false, isFitted = false, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, linkAs = "a", }) => {
+    var _a;
+    const generatedId = useId();
+    const baseId = id !== null && id !== void 0 ? id : generatedId;
+    const isControlled = value !== undefined;
+    const linkCount = (_a = items === null || items === void 0 ? void 0 : items.filter((item) => item.href !== undefined).length) !== null && _a !== void 0 ? _a : 0;
+    const isLinkMode = !children && !!(items === null || items === void 0 ? void 0 : items.length) && linkCount === items.length;
+    const isMixed = !children && linkCount > 0 && !isLinkMode;
+    useEffect(() => {
+        if (isMixed && process.env.NODE_ENV !== "production") {
+            console.warn("Tabs: some items have `href` and some do not. Link mode needs `href` on every item; rendering a tablist and ignoring `href`.");
+        }
+    }, [isMixed]);
+    const [internalValue, setInternalValue] = useState(() => { var _a; return defaultValue !== null && defaultValue !== void 0 ? defaultValue : (isLinkMode ? undefined : (_a = items === null || items === void 0 ? void 0 : items.find((item) => !item.isDisabled)) === null || _a === void 0 ? void 0 : _a.id); });
+    const selectedId = isControlled ? value : internalValue;
+    const [focusedId, setFocusedId] = useState(selectedId);
+    const [hasPanels, setHasPanels] = useState(() => !!(items === null || items === void 0 ? void 0 : items.some((item) => item.content !== undefined)));
+    useEffect(() => {
+        setFocusedId(selectedId);
+    }, [selectedId]);
+    const select = useCallback((next) => {
+        if (!isControlled)
+            setInternalValue(next);
+        setFocusedId(next);
+        onChange === null || onChange === void 0 ? void 0 : onChange(next);
+    }, [isControlled, onChange]);
+    const focusTab = useCallback((next) => setFocusedId(next), []);
+    const registerPanels = useCallback(() => setHasPanels(true), []);
+    const contextValue = useMemo(() => ({
+        baseId,
+        selectedId,
+        focusedId,
+        select,
+        focusTab,
+        hasPanels,
+        registerPanels,
+        orientation,
+        activationMode,
+        variant,
+        size,
+        colorScheme,
+        isLazy,
+        isFitted,
+    }), [
+        baseId,
+        selectedId,
+        focusedId,
+        select,
+        focusTab,
+        hasPanels,
+        registerPanels,
+        orientation,
+        activationMode,
+        variant,
+        size,
+        colorScheme,
+        isLazy,
+        isFitted,
+    ]);
+    if (children) {
+        return _jsx(TabsContext.Provider, { value: contextValue, children: children });
+    }
+    if (isLinkMode) {
+        return (_jsx(TabsContext.Provider, { value: contextValue, children: _jsx(TabLinkList, { items: items, linkAs: linkAs, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy }) }));
+    }
+    const hasContent = !!(items === null || items === void 0 ? void 0 : items.some((item) => item.content !== undefined));
+    return (_jsx(TabsContext.Provider, { value: contextValue, children: _jsxs(Box, { display: "flex", flexDirection: orientation === "vertical" ? "row" : "column", alignItems: orientation === "vertical" ? "flex-start" : undefined, gap: orientation === "vertical" ? 4 : 2, children: [_jsx(TabList, { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, children: items === null || items === void 0 ? void 0 : items.map((item) => (_jsx(Tab, { value: item.id, icon: item.icon, count: item.count, isDisabled: item.isDisabled, children: item.label }, item.id))) }), hasContent ? (_jsx(TabPanels, { children: items === null || items === void 0 ? void 0 : items.filter((item) => item.content !== undefined).map((item) => (_jsx(TabPanel, { value: item.id, children: item.content }, item.id))) })) : null] }) }));
+};
+export default Tabs;

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

@@ -0,0 +1,10 @@
+import { createContext, useContext } from "react";
+export const TabsContext = createContext(undefined);
+export const useTabsContext = () => {
+    const ctx = useContext(TabsContext);
+    if (!ctx)
+        throw new Error("Tabs.List/Tab/Panels/Panel must be rendered inside <Tabs>");
+    return ctx;
+};
+export const tabId = (baseId, value) => `${baseId}-tab-${value}`;
+export const panelId = (baseId, value) => `${baseId}-panel-${value}`;

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

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

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 };
+};