@tanishqkancharla/maui 0.0.43 → 0.0.45

package/dist/components/Button.d.ts

@@ -2,6 +2,13 @@ import React from "react";
 import { type ButtonProps as RACButtonProps } from "react-aria-components";
 import { type ColorName } from "../tokens/colors";
 export type ButtonVariant = "default" | "quiet" | "primary";
+export type ButtonSize = "default" | "sm";
+/** Internal style primitives for controls that compose Button visuals. */
+export declare const buttonStyles: {
+    readonly base: import("purse-styles").StyleElement;
+    readonly quiet: import("purse-styles").StyleElement;
+    readonly text: import("purse-styles").StyleElement;
+};
 /** Opaque hex or `rgb()`. Palette names stay ColorName (`"blue"` is Radix, not CSS `blue`). */
 export type ButtonCssColor = `#${string}` | `rgb(${string}`;
 export type ButtonVariantColor = ColorName | ButtonCssColor;
@@ -14,6 +21,7 @@ type ButtonData = {
 export type ButtonProps = Omit<RACButtonProps, "children" | "className"> & {
     children: React.ReactNode;
     className?: string;
+    size?: ButtonSize;
     variant?: ButtonVariant;
     variantColor?: ButtonVariantColor;
 };
@@ -24,6 +32,7 @@ export declare function useButton(props: Pick<ButtonProps, "onClick" | "onFocus"
 export declare const Button: React.ForwardRefExoticComponent<Omit<RACButtonProps, "children" | "className"> & {
     children: React.ReactNode;
     className?: string;
+    size?: ButtonSize;
     variant?: ButtonVariant;
     variantColor?: ButtonVariantColor;
 } & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/Button.js

@@ -10,7 +10,7 @@ import { colors } from "../tokens/colors";
 import { focusRing } from "../tokens/focusRing";
 import { radius } from "../tokens/radius";
 import { shadowVars } from "../tokens/shadow";
-import { controlSize } from "../tokens/sizing";
+import { controlSize, iconSizeValues } from "../tokens/sizing";
 import { spacing } from "../tokens/spacing";
 import { text } from "../tokens/text";
 import { memoize } from "../utils/memoize";
@@ -64,6 +64,29 @@ const buttonTextClass = style({
     minWidth: 0,
     textBox: "trim-both cap alphabetic",
 });
+const smallButtonClass = style(text({ size: "2xs", fontWeight: 400, color: "highContrast" }), {
+    height: controlSize.smHeight,
+    gap: spacing.value(1),
+    paddingInline: spacing.value(4),
+    paddingBlock: spacing.value(2),
+    "& > svg": {
+        width: iconSizeValues.xs,
+        height: iconSizeValues.xs,
+    },
+    "&:has(> svg)": {
+        paddingBlock: spacing.value(2),
+    },
+    "&:has(> svg:first-child:not(:only-child))": {
+        paddingInlineStart: spacing.value(3),
+    },
+    "&:has(> svg:last-child:not(:only-child))": {
+        paddingInlineEnd: spacing.value(3),
+    },
+    "&:has(> svg:only-child)": {
+        width: controlSize.smHeight,
+        paddingInline: 0,
+    },
+});
 const buttonClass = style(buttonBaseClass, {
     backgroundColor: backgroundColor.element,
     "&:hover:not(:disabled)": {
@@ -84,6 +107,12 @@ const quietClass = memoize((color, hoverColor, wash) => style(buttonBaseClass, f
     "&:disabled": disabledQuiet,
 }));
 const quietButtonClass = quietClass(colors.gray[11], colors.gray[12], colors.grayAlpha[9]);
+/** Internal style primitives for controls that compose Button visuals. */
+export const buttonStyles = {
+    base: buttonBaseClass,
+    quiet: quietButtonClass,
+    text: buttonTextClass,
+};
 const darkTextOnSolid = new Set([
     "amber",
     "lime",
@@ -169,9 +198,9 @@ export function useButton(props, forwardedRef) {
     ];
 }
 export const Button = React.forwardRef(function Button(props, forwardedRef) {
-    const { children, className: classNameProp, onClick, onFocus, type = "button", variant = "default", variantColor, isDisabled, ...buttonProps } = props;
+    const { children, className: classNameProp, onClick, onFocus, type = "button", size = "default", variant = "default", variantColor, isDisabled, ...buttonProps } = props;
     const [, attributes] = useButton({ onClick, onFocus }, forwardedRef);
-    const className = useStyles(buttonVariantClass(variant, variantColor));
+    const className = useStyles(buttonVariantClass(variant, variantColor), size === "sm" && smallButtonClass);
     const textClassName = useStyles(buttonTextClass);
     const mergedClassName = [className, classNameProp].filter(Boolean).join(" ");
     return (_jsx(RACButton, { ...buttonProps, ref: attributes.ref, type: type, isDisabled: isDisabled, className: mergedClassName, onClick: attributes.onClick, onFocus: attributes.onFocus, children: renderButtonChildren(children, textClassName) }));

package/dist/components/TabBar.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+export type TabBarItem = {
+    id: string;
+    label: string;
+    icon?: React.ReactNode;
+    isClosable?: boolean;
+};
+export type TabBarProps = {
+    items: readonly TabBarItem[];
+    selectedId: string;
+    onSelectionChange: (id: string) => void;
+    onClose?: (id: string) => void;
+    onAdd?: () => void;
+    addLabel?: string;
+    "aria-label": string;
+    className?: string;
+};
+export declare function TabBar({ items, selectedId, onSelectionChange, onClose, onAdd, addLabel, "aria-label": ariaLabel, className, }: TabBarProps): React.JSX.Element;

package/dist/components/TabBar.js

@@ -0,0 +1,177 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useLayoutEffect, useRef } from "react";
+import { useLocale } from "react-aria";
+import { Button as RACButton } from "react-aria-components";
+import { style, useStyles } from "purse-styles";
+import { backgroundColor, surfaceMixPercent, surfaceWash, } from "../tokens/background";
+import { colors } from "../tokens/colors";
+import { controlSize } from "../tokens/sizing";
+import { spacing } from "../tokens/spacing";
+import { Button, buttonStyles } from "./Button";
+import { Icons } from "./Icons";
+const tabBarClass = style({
+    display: "flex",
+    alignItems: "center",
+    height: `calc(${controlSize.height} + ${spacing.value(3)} * 2)`,
+    minWidth: 0,
+    paddingInline: spacing.value(4),
+    backgroundColor: backgroundColor.app,
+    borderBottom: `1px solid ${colors.gray[6]}`,
+});
+const tabListClass = style({
+    display: "flex",
+    alignItems: "center",
+    flex: "0 1 auto",
+    minWidth: 0,
+    paddingBlock: spacing.value(3),
+    overflowX: "auto",
+    overflowY: "hidden",
+    scrollbarWidth: "none",
+    "&::-webkit-scrollbar": {
+        display: "none",
+    },
+    "& > div:has(button[data-hovered], button[aria-pressed='true']) + span": {
+        backgroundColor: "transparent",
+    },
+    "& > span:has(+ div button[data-hovered]), & > span:has(+ div button[aria-pressed='true'])": {
+        backgroundColor: "transparent",
+    },
+});
+const quietTabHover = {
+    color: colors.gray[12],
+    backgroundColor: surfaceWash(colors.grayAlpha[9], surfaceMixPercent.hover),
+};
+const tabClass = style({
+    position: "relative",
+    display: "flex",
+    alignItems: "center",
+    flex: "0 1 140px",
+    width: "140px",
+    minWidth: "56px",
+    maxWidth: "140px",
+    "&:not([data-selected='true']) > [data-close-control]": {
+        opacity: 0,
+        pointerEvents: "none",
+    },
+    "&:not([data-selected='true']):hover > [data-close-control]": {
+        opacity: 1,
+        pointerEvents: "auto",
+    },
+    "&:not([data-selected='true']):has(> button:first-child[data-hovered]) > [data-close-control], &:not([data-selected='true']):has(> [data-close-control][data-hovered]) > [data-close-control]": {
+        opacity: 1,
+        pointerEvents: "auto",
+    },
+    "&:not([data-selected='true']):hover > button:first-child": quietTabHover,
+    "&:not([data-selected='true']):has(> button:first-child[data-hovered]) > button:first-child, &:not([data-selected='true']):has(> [data-close-control][data-hovered]) > button:first-child": quietTabHover,
+    "&[data-selected='true'] > [data-close-control]:hover, &[data-selected='true'] > [data-close-control][data-hovered]": {
+        backgroundColor: backgroundColor.elementHover,
+    },
+});
+const tabButtonClass = style({
+    width: "100%",
+    minWidth: 0,
+    justifyContent: "flex-start",
+    "& > span": {
+        minWidth: 0,
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        textBox: "normal",
+        whiteSpace: "nowrap",
+    },
+});
+const selectedTabButtonClass = style({
+    backgroundColor: backgroundColor.element,
+});
+const closeButtonClass = style({
+    position: "absolute",
+    top: "50%",
+    insetInlineEnd: spacing.value(1),
+    zIndex: 1,
+    width: controlSize.smHeight,
+    minWidth: controlSize.smHeight,
+    maxWidth: controlSize.smHeight,
+    flexShrink: 0,
+    transform: "translateY(-50%)",
+});
+const separatorClass = style({
+    flex: "0 0 auto",
+    width: "0.5px",
+    height: "14px",
+    backgroundColor: colors.gray[6],
+});
+const addButtonClass = style({
+    flex: "0 0 auto",
+    marginInlineStart: spacing.value(2),
+});
+export function TabBar({ items, selectedId, onSelectionChange, onClose, onAdd, addLabel = "New tab", "aria-label": ariaLabel, className, }) {
+    const { direction } = useLocale();
+    const buttons = useRef(new Map());
+    const focusSelectedAfterClose = useRef(false);
+    const tabBarClassName = useStyles(tabBarClass);
+    const tabListClassName = useStyles(tabListClass);
+    const tabClassName = useStyles(tabClass);
+    const selectedTabButtonClassName = useStyles(buttonStyles.base, selectedTabButtonClass, tabButtonClass);
+    const quietTabButtonClassName = useStyles(buttonStyles.quiet, tabButtonClass);
+    const tabTextClassName = useStyles(buttonStyles.text);
+    const closeButtonClassName = useStyles(closeButtonClass);
+    const separatorClassName = useStyles(separatorClass);
+    const addButtonClassName = useStyles(addButtonClass);
+    useLayoutEffect(() => {
+        if (!focusSelectedAfterClose.current)
+            return;
+        focusSelectedAfterClose.current = false;
+        buttons.current.get(selectedId)?.focus();
+    }, [items, selectedId]);
+    function closeTab(id) {
+        if (!onClose)
+            return;
+        focusSelectedAfterClose.current = true;
+        onClose(id);
+    }
+    function selectAt(index) {
+        const item = items[index];
+        if (!item)
+            return;
+        onSelectionChange(item.id);
+        buttons.current.get(item.id)?.focus();
+    }
+    function onTabKeyDown(event, index, item) {
+        let nextIndex;
+        if (event.key === "Home")
+            nextIndex = 0;
+        if (event.key === "End")
+            nextIndex = items.length - 1;
+        if (event.key === "ArrowRight") {
+            nextIndex =
+                (index + (direction === "rtl" ? -1 : 1) + items.length) % items.length;
+        }
+        if (event.key === "ArrowLeft") {
+            nextIndex =
+                (index + (direction === "rtl" ? 1 : -1) + items.length) % items.length;
+        }
+        if ((event.key === "Delete" || event.key === "Backspace") &&
+            item.id === selectedId &&
+            item.isClosable &&
+            onClose) {
+            event.preventDefault();
+            closeTab(item.id);
+            return;
+        }
+        if (nextIndex === undefined)
+            return;
+        event.preventDefault();
+        selectAt(nextIndex);
+    }
+    return (_jsxs("div", { className: [tabBarClassName, className].filter(Boolean).join(" "), children: [_jsx("div", { className: tabListClassName, role: "toolbar", "aria-label": ariaLabel, children: items.map((item, index) => {
+                    const selected = item.id === selectedId;
+                    const reserveClose = Boolean(item.isClosable && onClose);
+                    return (_jsxs(React.Fragment, { children: [_jsxs("div", { className: tabClassName, "data-selected": selected ? "true" : undefined, children: [_jsxs(RACButton, { ref: (element) => {
+                                            if (element)
+                                                buttons.current.set(item.id, element);
+                                            else
+                                                buttons.current.delete(item.id);
+                                        }, "aria-pressed": selected, excludeFromTabOrder: !selected, className: selected
+                                            ? selectedTabButtonClassName
+                                            : quietTabButtonClassName, style: reserveClose ? { paddingInlineEnd: "32px" } : undefined, onPress: () => onSelectionChange(item.id), onKeyDown: (event) => onTabKeyDown(event, index, item), children: [item.icon, _jsx("span", { className: tabTextClassName, children: item.label })] }), reserveClose && (_jsx(Button, { size: "sm", variant: "quiet", "aria-label": `Close ${item.label}`, "data-close-control": true, excludeFromTabOrder: !selected, className: closeButtonClassName, onPress: () => closeTab(item.id), children: _jsx(Icons.Close, {}) }))] }), index < items.length - 1 && (_jsx("span", { className: separatorClassName, "aria-hidden": "true" }))] }, item.id));
+                }) }), onAdd && (_jsx(Button, { size: "sm", variant: "quiet", "aria-label": addLabel, className: addButtonClassName, onPress: onAdd, children: _jsx(Icons.Plus, {}) }))] }));
+}

package/dist/maui.d.ts

@@ -20,7 +20,8 @@ export { prose, proseRhythm, proseHtml, proseStreamingMarkers, type ProseSize, }
 export { visuallyHidden } from "./tokens/visuallyHidden";
 export { Avatar } from "./components/Avatar";
 export { Badge } from "./components/Badge";
-export { Button, useButton, type ButtonCssColor, type ButtonProps, type ButtonVariant, type ButtonVariantColor, } from "./components/Button";
+export { Button, useButton, type ButtonCssColor, type ButtonProps, type ButtonSize, type ButtonVariant, type ButtonVariantColor, } from "./components/Button";
+export { TabBar, type TabBarItem, type TabBarProps, } from "./components/TabBar";
 export { Checkbox } from "./components/Checkbox";
 export { Switch } from "./components/Switch";
 export { Slider } from "./components/Slider";

package/dist/maui.js

@@ -24,6 +24,7 @@ export { visuallyHidden } from "./tokens/visuallyHidden";
 export { Avatar } from "./components/Avatar";
 export { Badge } from "./components/Badge";
 export { Button, useButton, } from "./components/Button";
+export { TabBar, } from "./components/TabBar";
 export { Checkbox } from "./components/Checkbox";
 export { Switch } from "./components/Switch";
 export { Slider } from "./components/Slider";

package/dist/tokens/shadow.d.ts

@@ -1,7 +1,7 @@
 export declare const shadowVars: import("purse-styles").VariableGroup<{
     readonly control: {
-        readonly default: "inset 0 1px #fff8, inset 0 0 1px 1px #fff8, 0 .5px 1px #00000018, 0 0 1px #0001, 0 0 4px -1px #0001";
-        readonly ":root[data-theme=\"dark\"]": "inset 0 1px #ffffff08, inset 0 0 1px .5px #fff1, 0 1px .5px #00000018, 0 0 3px -1px #000a";
+        readonly default: "inset 0 1px #fff8, inset 0 0 1px 1px #fff8, 0 .5px 1px #00000018, 0 0 0 .5px rgb(0 0 0 / 8%), 0 0 4px -1px #0001";
+        readonly ":root[data-theme=\"dark\"]": "inset 0 1px #ffffff08, 0 0 0 .5px rgb(255 255 255 / 8%), 0 1px .5px #00000018, 0 0 3px -1px #000a";
     };
     readonly subtle: `rgba(var(--${string}), 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, var(--${string})) 0px 1px 1px -0.5px, rgba(0, 0, 0, var(--${string})) 0px 3px 3px -1.5px`;
     readonly medium: `rgba(var(--${string}), 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, var(--${string})) 0px 1px 1px -0.5px, rgba(0, 0, 0, var(--${string})) 0px 3px 3px -1.5px, rgba(0, 0, 0, var(--${string})) 0px 6px 6px -3px`;

package/dist/tokens/shadow.js

@@ -14,8 +14,8 @@ const rgb = shadowParams.foregroundRgb;
 const blur = shadowParams.blurOpacity;
 export const shadowVars = defineVars({
     control: {
-        default: `inset 0 1px #fff8, inset 0 0 1px 1px #fff8, 0 .5px 1px #00000018, 0 0 1px #0001, 0 0 4px -1px #0001`,
-        [DARK_THEME]: `inset 0 1px #ffffff08, inset 0 0 1px .5px #fff1, 0 1px .5px #00000018, 0 0 3px -1px #000a`,
+        default: `inset 0 1px #fff8, inset 0 0 1px 1px #fff8, 0 .5px 1px #00000018, 0 0 0 .5px rgb(0 0 0 / 8%), 0 0 4px -1px #0001`,
+        [DARK_THEME]: `inset 0 1px #ffffff08, 0 0 0 .5px rgb(255 255 255 / 8%), 0 1px .5px #00000018, 0 0 3px -1px #000a`,
     },
     subtle: `rgba(${rgb}, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, ${blur}) 0px 1px 1px -0.5px, rgba(0, 0, 0, ${blur}) 0px 3px 3px -1.5px`,
     medium: `rgba(${rgb}, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, ${blur}) 0px 1px 1px -0.5px, rgba(0, 0, 0, ${blur}) 0px 3px 3px -1.5px, rgba(0, 0, 0, ${blur}) 0px 6px 6px -3px`,

package/dist/tokens/sizing.d.ts

@@ -13,6 +13,10 @@ export declare const controlSize: import("purse-styles").VariableGroup<{
         readonly default: "28px";
         readonly ":root[data-scale=\"large\"]": "40px";
     };
+    readonly smHeight: {
+        readonly default: "24px";
+        readonly ":root[data-scale=\"large\"]": "40px";
+    };
     readonly minTarget: {
         readonly default: "0px";
         readonly ":root[data-scale=\"large\"]": "40px";

package/dist/tokens/sizing.js

@@ -16,6 +16,7 @@ export const iconSizeValues = defineVars({
 /** Shared control height and minimum touch target. */
 export const controlSize = defineVars({
     height: { default: "28px", [LARGE_SCALE]: "40px" },
+    smHeight: { default: "24px", [LARGE_SCALE]: "40px" },
     minTarget: { default: "0px", [LARGE_SCALE]: "40px" },
 });
 /** Reading measure for long-form columns. */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@tanishqkancharla/maui",
-	"version": "0.0.43",
+	"version": "0.0.45",
 	"description": "Maui design system",
 	"type": "module",
 	"main": "./dist/maui.js",

package/skills/maui/SKILL.md

@@ -23,6 +23,7 @@ Read the reference for the work you are doing:
 | Avatar           | [avatar.md](references/components/avatar.md)                                                 |
 | Badge            | [badge.md](references/components/badge.md)                                                   |
 | Buttons          | [buttons.md](references/components/buttons.md) (`Button`, `Overlay`, `Dialog`)               |
+| Tab bar          | [tab-bar.md](references/components/tab-bar.md)                                               |
 | Drawer           | [drawer.md](references/components/drawer.md)                                                 |
 | Prose            | [prose.md](references/components/prose.md) (`Prose`, `H1`–`H4`, `P`, lists, `Label`, `Link`) |
 | Editor / MarkdownEditor | [editor.md](references/components/editor.md) (optional TipTap peers; separate imports) |

package/skills/maui/references/components/buttons.md

@@ -4,7 +4,7 @@ Gallery: `/components/buttons`. Import from `"maui"`. Overlay and Dialog live on
 
 ## `Button`
 
-Styled React Aria `Button` (default `type="button"`). Consumes `ButtonContext`, so it works as a `MenuTrigger`, `Select`, `DialogTrigger`, `ComboBox`, or `DatePicker` child. Height 28px, `shadow.control`, `radius` 4px.
+Styled React Aria `Button` (default `type="button"`). Consumes `ButtonContext`, so it works as a `MenuTrigger`, `Select`, `DialogTrigger`, `ComboBox`, or `DatePicker` child. Default height 28px, `shadow.control`, `radius` 4px.
 
 ```tsx
 <Button>Save</Button>
@@ -12,6 +12,7 @@ Styled React Aria `Button` (default `type="button"`). Consumes `ButtonContext`,
 <Button variant="quiet" variantColor="accent">Quiet accent</Button>
 <Button variant="primary" variantColor="blue">Create</Button>
 <Button variant="primary" variantColor="#6366f1">Indigo</Button>
+<Button size="sm">Compact</Button>
 <Button isDisabled>Wait</Button>
 <Button aria-label="Search"><Search size="sm" /></Button>
 <Button>
@@ -22,6 +23,7 @@ Styled React Aria `Button` (default `type="button"`). Consumes `ButtonContext`,
 
 | Prop | Notes |
 | --- | --- |
+| `size` | `"default"` (28px) \| `"sm"` (24px with 10px text and 14px icons). Large/touch scale keeps both at a 40px target |
 | `variant` | `"default"` (raised element) \| `"quiet"` (no shadow, transparent) \| `"primary"` (solid fill) |
 | `variantColor` | Palette name or opaque `#hex` / `rgb(...)`. Primary default is `"accent"`. Quiet ignores color unless set; when set, tints the label with no fill |
 | `isDisabled` | React Aria name. Maps to native `disabled`. **No `disabled` React prop** |

package/skills/maui/references/components/tab-bar.md

@@ -0,0 +1,34 @@
+# Tab bar
+
+Gallery: `/components/tab-bar`. Import from `"maui"`.
+
+`TabBar` is a controlled, horizontally scrollable workspace tab toolbar. The selected tab uses Maui’s default outlined `Button` treatment. Unselected tabs are quiet and separated by hairlines. Optional icons, closing, and adding are built in.
+
+```tsx
+const [selectedId, setSelectedId] = useState("changes")
+
+<TabBar
+  aria-label="Workspace tabs"
+  items={[
+    { id: "changes", label: "Changes", icon: <FileText /> },
+    { id: "pull-request", label: "PR #34", icon: <GitPullRequest />, isClosable: true },
+  ]}
+  selectedId={selectedId}
+  onSelectionChange={setSelectedId}
+  onClose={(id) => closeTab(id)}
+  onAdd={() => addTab()}
+  addLabel="New session"
+/>
+```
+
+| Prop | Notes |
+| --- | --- |
+| `items` | `{ id, label, icon?, isClosable? }[]` |
+| `selectedId` | Controlled selected item ID |
+| `onSelectionChange` | Called when a tab is pressed or selected with the keyboard |
+| `onClose` | Enables a close control for every item where `isClosable` is true. Selected tabs show it persistently; unselected tabs reveal it on hover |
+| `onAdd` | Shows an icon-only add button |
+| `addLabel` | Accessible add-button label; defaults to `"New tab"` |
+| `aria-label` | Required accessible label for the tab toolbar |
+
+Left/Right arrows wrap through tabs (and respect RTL). Home/End select the first/last tab. Delete or Backspace calls `onClose` for a selected closable tab.

package/src/apps/JsxEditor/JsxEditor.tsx

@@ -349,7 +349,7 @@ const paneClass = style(border([], "outline"), radius.lg, {
 	minHeight: 0,
 	minWidth: 0,
 	overflow: "hidden",
-	backgroundColor: backgroundColor.element,
+	backgroundColor: backgroundColor.app,
 })
 
 const paneHeaderClass = style(

package/src/apps/JsxEditor/catalog.ts

@@ -34,6 +34,7 @@ import {
 	TableRow,
 } from "../../components/Table"
 import { Text } from "../../components/Text"
+import { TabBar } from "../../components/TabBar"
 import { Thinking } from "../../components/Thinking"
 import { Crossfade } from "../../components/Crossfade"
 import { LoadingScreen } from "../../components/LoadingScreen"
@@ -248,6 +249,7 @@ export const catalog: CatalogComponent[] = [
 		info: "Button. default is raised, quiet is borderless, primary fills with accent 9. Works as a MenuTrigger child.",
 		html: true,
 		attributes: [
+			{ name: "size", values: ["default", "sm"] },
 			{ name: "variant", values: ["default", "quiet", "primary"] },
 			{
 				name: "variantColor",
@@ -259,6 +261,18 @@ export const catalog: CatalogComponent[] = [
 			{ name: "isDisabled", boolean: true },
 		],
 	},
+	{
+		name: "TabBar",
+		info: "Controlled workspace tab bar. Selected tab uses the default outlined button; quiet tabs have separators.",
+		html: true,
+		attributes: [
+			{ name: "items", object: true },
+			{ name: "selectedId" },
+			{ name: "aria-label" },
+			{ name: "addLabel" },
+			{ name: "className" },
+		],
+	},
 	{
 		name: "Drawer",
 		info: "Start/end edge modal overlay. RAC isOpen / onOpenChange. Swipe toward the edge, tap scrim, or Escape to dismiss. Not a Sidebar prop.",
@@ -534,6 +548,7 @@ export const previewScope: Record<string, unknown> = {
 	TableHeader,
 	TableRow,
 	Text,
+	TabBar,
 	Thinking,
 	Crossfade,
 	LoadingScreen,

package/src/apps/JsxEditor/lint.test.ts

@@ -23,6 +23,13 @@ describe("collectJsxDiagnosticsFromSource", () => {
 		expect(diagnostics).toEqual([])
 	})
 
+	test("accepts a small Button", () => {
+		const diagnostics = collectJsxDiagnosticsFromSource(
+			`<Button size="sm">Compact</Button>`,
+		)
+		expect(diagnostics).toEqual([])
+	})
+
 	test("accepts a braced string hex variantColor", () => {
 		const diagnostics = collectJsxDiagnosticsFromSource(
 			`<Button variant="primary" variantColor={"#1A73E8"}>Connect</Button>`,
@@ -213,6 +220,12 @@ describe("JSX editor catalog", () => {
 		).toBe(true)
 	})
 
+	test("catalog exposes TabBar", async () => {
+		const { catalog, previewScope } = await import("./catalog")
+		expect(catalog.some((entry) => entry.name === "TabBar")).toBe(true)
+		expect(previewScope).toHaveProperty("TabBar")
+	})
+
 	test("accepts Crossfade without direction", () => {
 		const diagnostics = collectJsxDiagnosticsFromSource(
 			`<Crossfade contentKey="inbox"><Text>Inbox</Text></Crossfade>`,

package/src/components/Button.tsx

@@ -16,12 +16,13 @@ import { colors, type ColorName, type ColorScale } from "../tokens/colors"
 import { focusRing } from "../tokens/focusRing"
 import { radius } from "../tokens/radius"
 import { shadowVars } from "../tokens/shadow"
-import { controlSize } from "../tokens/sizing"
+import { controlSize, iconSizeValues } from "../tokens/sizing"
 import { spacing } from "../tokens/spacing"
 import { text } from "../tokens/text"
 import { memoize } from "../utils/memoize"
 
 export type ButtonVariant = "default" | "quiet" | "primary"
+export type ButtonSize = "default" | "sm"
 
 const buttonShadow = shadowVars.control
 
@@ -84,6 +85,33 @@ const buttonTextClass = style({
 	textBox: "trim-both cap alphabetic",
 })
 
+const smallButtonClass = style(
+	text({ size: "2xs", fontWeight: 400, color: "highContrast" }),
+	{
+		height: controlSize.smHeight,
+		gap: spacing.value(1),
+		paddingInline: spacing.value(4),
+		paddingBlock: spacing.value(2),
+		"& > svg": {
+			width: iconSizeValues.xs,
+			height: iconSizeValues.xs,
+		},
+		"&:has(> svg)": {
+			paddingBlock: spacing.value(2),
+		},
+		"&:has(> svg:first-child:not(:only-child))": {
+			paddingInlineStart: spacing.value(3),
+		},
+		"&:has(> svg:last-child:not(:only-child))": {
+			paddingInlineEnd: spacing.value(3),
+		},
+		"&:has(> svg:only-child)": {
+			width: controlSize.smHeight,
+			paddingInline: 0,
+		},
+	},
+)
+
 const buttonClass = style(buttonBaseClass, {
 	backgroundColor: backgroundColor.element,
 	"&:hover:not(:disabled)": {
@@ -114,6 +142,13 @@ const quietButtonClass = quietClass(
 	colors.grayAlpha[9],
 )
 
+/** Internal style primitives for controls that compose Button visuals. */
+export const buttonStyles = {
+	base: buttonBaseClass,
+	quiet: quietButtonClass,
+	text: buttonTextClass,
+} as const
+
 const darkTextOnSolid: ReadonlySet<ColorName> = new Set([
 	"amber",
 	"lime",
@@ -225,6 +260,7 @@ type ButtonData = {
 export type ButtonProps = Omit<RACButtonProps, "children" | "className"> & {
 	children: React.ReactNode
 	className?: string
+	size?: ButtonSize
 	variant?: ButtonVariant
 	variantColor?: ButtonVariantColor
 }
@@ -274,13 +310,17 @@ export const Button = React.forwardRef(function Button(
 		onClick,
 		onFocus,
 		type = "button",
+		size = "default",
 		variant = "default",
 		variantColor,
 		isDisabled,
 		...buttonProps
 	} = props
 	const [, attributes] = useButton({ onClick, onFocus }, forwardedRef)
-	const className = useStyles(buttonVariantClass(variant, variantColor))
+	const className = useStyles(
+		buttonVariantClass(variant, variantColor),
+		size === "sm" && smallButtonClass,
+	)
 	const textClassName = useStyles(buttonTextClass)
 	const mergedClassName = [className, classNameProp].filter(Boolean).join(" ")
 

package/src/components/TabBar.tsx

@@ -0,0 +1,289 @@
+import React, { useLayoutEffect, useRef } from "react"
+import { useLocale } from "react-aria"
+import { Button as RACButton } from "react-aria-components"
+import { style, useStyles } from "purse-styles"
+import {
+	backgroundColor,
+	surfaceMixPercent,
+	surfaceWash,
+} from "../tokens/background"
+import { colors } from "../tokens/colors"
+import { controlSize } from "../tokens/sizing"
+import { spacing } from "../tokens/spacing"
+import { Button, buttonStyles } from "./Button"
+import { Icons } from "./Icons"
+
+export type TabBarItem = {
+	id: string
+	label: string
+	icon?: React.ReactNode
+	isClosable?: boolean
+}
+
+export type TabBarProps = {
+	items: readonly TabBarItem[]
+	selectedId: string
+	onSelectionChange: (id: string) => void
+	onClose?: (id: string) => void
+	onAdd?: () => void
+	addLabel?: string
+	"aria-label": string
+	className?: string
+}
+
+const tabBarClass = style({
+	display: "flex",
+	alignItems: "center",
+	height: `calc(${controlSize.height} + ${spacing.value(3)} * 2)`,
+	minWidth: 0,
+	paddingInline: spacing.value(4),
+	backgroundColor: backgroundColor.app,
+	borderBottom: `1px solid ${colors.gray[6]}`,
+})
+
+const tabListClass = style({
+	display: "flex",
+	alignItems: "center",
+	flex: "0 1 auto",
+	minWidth: 0,
+	paddingBlock: spacing.value(3),
+	overflowX: "auto",
+	overflowY: "hidden",
+	scrollbarWidth: "none",
+	"&::-webkit-scrollbar": {
+		display: "none",
+	},
+	"& > div:has(button[data-hovered], button[aria-pressed='true']) + span": {
+		backgroundColor: "transparent",
+	},
+	"& > span:has(+ div button[data-hovered]), & > span:has(+ div button[aria-pressed='true'])": {
+		backgroundColor: "transparent",
+	},
+})
+
+const quietTabHover = {
+	color: colors.gray[12],
+	backgroundColor: surfaceWash(
+		colors.grayAlpha[9],
+		surfaceMixPercent.hover,
+	),
+} as const
+
+const tabClass = style({
+	position: "relative",
+	display: "flex",
+	alignItems: "center",
+	flex: "0 1 140px",
+	width: "140px",
+	minWidth: "56px",
+	maxWidth: "140px",
+	"&:not([data-selected='true']) > [data-close-control]": {
+		opacity: 0,
+		pointerEvents: "none",
+	},
+	"&:not([data-selected='true']):hover > [data-close-control]": {
+		opacity: 1,
+		pointerEvents: "auto",
+	},
+	"&:not([data-selected='true']):has(> button:first-child[data-hovered]) > [data-close-control], &:not([data-selected='true']):has(> [data-close-control][data-hovered]) > [data-close-control]":
+		{
+			opacity: 1,
+			pointerEvents: "auto",
+		},
+	"&:not([data-selected='true']):hover > button:first-child": quietTabHover,
+	"&:not([data-selected='true']):has(> button:first-child[data-hovered]) > button:first-child, &:not([data-selected='true']):has(> [data-close-control][data-hovered]) > button:first-child":
+		quietTabHover,
+	"&[data-selected='true'] > [data-close-control]:hover, &[data-selected='true'] > [data-close-control][data-hovered]":
+		{
+			backgroundColor: backgroundColor.elementHover,
+		},
+})
+
+const tabButtonClass = style({
+	width: "100%",
+	minWidth: 0,
+	justifyContent: "flex-start",
+	"& > span": {
+		minWidth: 0,
+		overflow: "hidden",
+		textOverflow: "ellipsis",
+		textBox: "normal",
+		whiteSpace: "nowrap",
+	},
+})
+
+const selectedTabButtonClass = style({
+	backgroundColor: backgroundColor.element,
+})
+
+const closeButtonClass = style({
+	position: "absolute",
+	top: "50%",
+	insetInlineEnd: spacing.value(1),
+	zIndex: 1,
+	width: controlSize.smHeight,
+	minWidth: controlSize.smHeight,
+	maxWidth: controlSize.smHeight,
+	flexShrink: 0,
+	transform: "translateY(-50%)",
+})
+
+const separatorClass = style({
+	flex: "0 0 auto",
+	width: "0.5px",
+	height: "14px",
+	backgroundColor: colors.gray[6],
+})
+
+const addButtonClass = style({
+	flex: "0 0 auto",
+	marginInlineStart: spacing.value(2),
+})
+
+export function TabBar({
+	items,
+	selectedId,
+	onSelectionChange,
+	onClose,
+	onAdd,
+	addLabel = "New tab",
+	"aria-label": ariaLabel,
+	className,
+}: TabBarProps) {
+	const { direction } = useLocale()
+	const buttons = useRef(new Map<string, HTMLButtonElement>())
+	const focusSelectedAfterClose = useRef(false)
+	const tabBarClassName = useStyles(tabBarClass)
+	const tabListClassName = useStyles(tabListClass)
+	const tabClassName = useStyles(tabClass)
+	const selectedTabButtonClassName = useStyles(
+		buttonStyles.base,
+		selectedTabButtonClass,
+		tabButtonClass,
+	)
+	const quietTabButtonClassName = useStyles(
+		buttonStyles.quiet,
+		tabButtonClass,
+	)
+	const tabTextClassName = useStyles(buttonStyles.text)
+	const closeButtonClassName = useStyles(closeButtonClass)
+	const separatorClassName = useStyles(separatorClass)
+	const addButtonClassName = useStyles(addButtonClass)
+
+	useLayoutEffect(() => {
+		if (!focusSelectedAfterClose.current) return
+		focusSelectedAfterClose.current = false
+		buttons.current.get(selectedId)?.focus()
+	}, [items, selectedId])
+
+	function closeTab(id: string) {
+		if (!onClose) return
+		focusSelectedAfterClose.current = true
+		onClose(id)
+	}
+
+	function selectAt(index: number) {
+		const item = items[index]
+		if (!item) return
+		onSelectionChange(item.id)
+		buttons.current.get(item.id)?.focus()
+	}
+
+	function onTabKeyDown(
+		event: React.KeyboardEvent<HTMLButtonElement>,
+		index: number,
+		item: TabBarItem,
+	) {
+		let nextIndex: number | undefined
+		if (event.key === "Home") nextIndex = 0
+		if (event.key === "End") nextIndex = items.length - 1
+		if (event.key === "ArrowRight") {
+			nextIndex =
+				(index + (direction === "rtl" ? -1 : 1) + items.length) % items.length
+		}
+		if (event.key === "ArrowLeft") {
+			nextIndex =
+				(index + (direction === "rtl" ? 1 : -1) + items.length) % items.length
+		}
+		if (
+			(event.key === "Delete" || event.key === "Backspace") &&
+			item.id === selectedId &&
+			item.isClosable &&
+			onClose
+		) {
+			event.preventDefault()
+			closeTab(item.id)
+			return
+		}
+		if (nextIndex === undefined) return
+		event.preventDefault()
+		selectAt(nextIndex)
+	}
+
+	return (
+		<div className={[tabBarClassName, className].filter(Boolean).join(" ")}>
+			<div className={tabListClassName} role="toolbar" aria-label={ariaLabel}>
+				{items.map((item, index) => {
+					const selected = item.id === selectedId
+					const reserveClose = Boolean(item.isClosable && onClose)
+
+					return (
+						<React.Fragment key={item.id}>
+							<div
+								className={tabClassName}
+								data-selected={selected ? "true" : undefined}
+							>
+								<RACButton
+									ref={(element) => {
+										if (element) buttons.current.set(item.id, element)
+										else buttons.current.delete(item.id)
+									}}
+									aria-pressed={selected}
+									excludeFromTabOrder={!selected}
+									className={
+										selected
+											? selectedTabButtonClassName
+											: quietTabButtonClassName
+									}
+									style={reserveClose ? { paddingInlineEnd: "32px" } : undefined}
+									onPress={() => onSelectionChange(item.id)}
+									onKeyDown={(event) => onTabKeyDown(event, index, item)}
+								>
+									{item.icon}
+									<span className={tabTextClassName}>{item.label}</span>
+								</RACButton>
+								{reserveClose && (
+									<Button
+										size="sm"
+										variant="quiet"
+										aria-label={`Close ${item.label}`}
+										data-close-control
+										excludeFromTabOrder={!selected}
+										className={closeButtonClassName}
+										onPress={() => closeTab(item.id)}
+									>
+										<Icons.Close />
+									</Button>
+								)}
+							</div>
+							{index < items.length - 1 && (
+								<span className={separatorClassName} aria-hidden="true" />
+							)}
+						</React.Fragment>
+					)
+				})}
+			</div>
+			{onAdd && (
+				<Button
+					size="sm"
+					variant="quiet"
+					aria-label={addLabel}
+					className={addButtonClassName}
+					onPress={onAdd}
+				>
+					<Icons.Plus />
+				</Button>
+			)}
+		</div>
+	)
+}

package/src/maui.ts

@@ -61,9 +61,15 @@ export {
 	useButton,
 	type ButtonCssColor,
 	type ButtonProps,
+	type ButtonSize,
 	type ButtonVariant,
 	type ButtonVariantColor,
 } from "./components/Button"
+export {
+	TabBar,
+	type TabBarItem,
+	type TabBarProps,
+} from "./components/TabBar"
 export { Checkbox } from "./components/Checkbox"
 export { Switch } from "./components/Switch"
 export { Slider } from "./components/Slider"

package/src/pages/ButtonsPage.tsx

@@ -25,6 +25,27 @@ export function ButtonsPage() {
 				<Button onClick={() => setOverlayOpen(true)}>Open Overlay</Button>
 			</Flex>
 
+			<H3>Small</H3>
+			<P>
+				<Code>size="sm"</Code> creates a compact button for dense interfaces.
+			</P>
+			<Flex row alignItems="center" gap={4} style={{ flexWrap: "wrap" }}>
+				<Button size="sm">Button</Button>
+				<Button size="sm" variant="primary">
+					Save
+				</Button>
+				<Button size="sm" variant="quiet">
+					Quiet
+				</Button>
+				<Button size="sm">
+					<Plus />
+					Create
+				</Button>
+				<Button size="sm" aria-label="Search">
+					<Search />
+				</Button>
+			</Flex>
+
 			<H3>Disabled</H3>
 			<P>
 				<Code>isDisabled</Code> is React Aria’s disabled prop. It sets the

package/src/pages/Maui.tsx

@@ -69,6 +69,7 @@ import { SpacingTokenPage } from "./SpacingTokenPage"
 import { TextPage } from "./TextPage"
 import { TextTokenPage } from "./TextTokenPage"
 import { TablePage } from "./TablePage"
+import { TabBarPage } from "./TabBarPage"
 import { TooltipPage } from "./TooltipPage"
 
 export function Maui() {
@@ -139,6 +140,7 @@ const navigation: NavEntry[] = [
 			{ label: "Avatar", path: "/components/avatar", page: AvatarPage },
 			{ label: "Badge", path: "/components/badge", page: BadgePage },
 			{ label: "Buttons", path: "/components/buttons", page: ButtonsPage },
+			{ label: "Tab bar", path: "/components/tab-bar", page: TabBarPage },
 			{ label: "Drawer", path: "/components/drawer", page: DrawerPage },
 			{
 				label: "Prose",

package/src/pages/TabBarPage.tsx

@@ -0,0 +1,90 @@
+import { useRef, useState } from "react"
+import { TabBar, type TabBarItem } from "../components/TabBar"
+import { Code } from "../components/Code"
+import { Icons } from "../components/Icons"
+import { Prose } from "../components/Prose"
+import { H2, P } from "../components/Typography"
+import { Panel } from "./Panel"
+
+const initialTabs: TabBarItem[] = [
+	{
+		id: "changes",
+		label: "Changes",
+		icon: <Icons.FileText />,
+		isClosable: true,
+	},
+	{
+		id: "pr-339",
+		label: "PR #339",
+		icon: <Icons.GitPullRequest />,
+		isClosable: true,
+	},
+	{
+		id: "desktop",
+		label: "Desktop",
+		icon: <Icons.World />,
+		isClosable: true,
+	},
+	{
+		id: "pr-34",
+		label: "PR #34",
+		icon: <Icons.GitPullRequest />,
+		isClosable: true,
+	},
+	{
+		id: "github",
+		label: "Use sandbox",
+		icon: <Icons.Github />,
+		isClosable: true,
+	},
+]
+
+export function TabBarPage() {
+	const [tabs, setTabs] = useState(initialTabs)
+	const [selectedId, setSelectedId] = useState("pr-34")
+	const nextTabId = useRef(1)
+
+	function closeTab(id: string) {
+		setTabs((current) => {
+			const index = current.findIndex((tab) => tab.id === id)
+			const next = current.filter((tab) => tab.id !== id)
+			if (id === selectedId && next.length > 0) {
+				setSelectedId(next[Math.min(index, next.length - 1)]!.id)
+			}
+			return next
+		})
+	}
+
+	function addTab() {
+		const id = `new-${nextTabId.current++}`
+		setTabs((current) => [
+			...current,
+			{ id, label: "New session", isClosable: true },
+		])
+		setSelectedId(id)
+	}
+
+	return (
+		<Prose style={{ maxWidth: "1200px", paddingBottom: "32px" }}>
+			<H2>Tab bar</H2>
+			<P>
+				A horizontally scrollable workspace tab bar. The selected tab uses the
+				default outlined <Code>Button</Code> treatment; quiet tabs are separated
+				by hairlines. Arrow keys, Home, and End move selection. Delete or
+				Backspace closes a selected closable tab.
+			</P>
+			<Panel style={{ padding: 0, overflow: "hidden" }}>
+				<TabBar
+					aria-label="Workspace tabs"
+					items={tabs}
+					selectedId={selectedId}
+					onSelectionChange={setSelectedId}
+					onClose={closeTab}
+					onAdd={addTab}
+					addLabel="New session"
+				/>
+				<div style={{ minHeight: "120px" }} />
+			</Panel>
+		</Prose>
+	)
+}

package/src/tokens/shadow.ts

@@ -17,8 +17,8 @@ const blur = shadowParams.blurOpacity
 
 export const shadowVars = defineVars({
 	control: {
-		default: `inset 0 1px #fff8, inset 0 0 1px 1px #fff8, 0 .5px 1px #00000018, 0 0 1px #0001, 0 0 4px -1px #0001`,
-		[DARK_THEME]: `inset 0 1px #ffffff08, inset 0 0 1px .5px #fff1, 0 1px .5px #00000018, 0 0 3px -1px #000a`,
+		default: `inset 0 1px #fff8, inset 0 0 1px 1px #fff8, 0 .5px 1px #00000018, 0 0 0 .5px rgb(0 0 0 / 8%), 0 0 4px -1px #0001`,
+		[DARK_THEME]: `inset 0 1px #ffffff08, 0 0 0 .5px rgb(255 255 255 / 8%), 0 1px .5px #00000018, 0 0 3px -1px #000a`,
 	},
 	subtle: `rgba(${rgb}, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, ${blur}) 0px 1px 1px -0.5px, rgba(0, 0, 0, ${blur}) 0px 3px 3px -1.5px`,
 	medium: `rgba(${rgb}, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, ${blur}) 0px 1px 1px -0.5px, rgba(0, 0, 0, ${blur}) 0px 3px 3px -1.5px, rgba(0, 0, 0, ${blur}) 0px 6px 6px -3px`,

package/src/tokens/sizing.ts

@@ -22,6 +22,7 @@ export const iconSizeValues: Record<IconSize, string> = defineVars({
 /** Shared control height and minimum touch target. */
 export const controlSize = defineVars({
 	height: { default: "28px", [LARGE_SCALE]: "40px" },
+	smHeight: { default: "24px", [LARGE_SCALE]: "40px" },
 	minTarget: { default: "0px", [LARGE_SCALE]: "40px" },
 })