@tanishqkancharla/maui 0.0.42 → 0.0.44

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/prose.d.ts

@@ -8,6 +8,11 @@
  * (https://github.com/tailwindlabs/tailwindcss-typography): `sm` -> 14px base,
  * `md` -> Tailwind's `base` (16px), `lg` -> 18px. Tailwind's em-relative values
  * are resolved to px here so they compose with Maui's px-based tokens.
+ *
+ * On the Large platform scale (coarse pointers) block font sizes and line
+ * heights step up ~1.2x — the same idea as the `text` tokens — so reading
+ * content grows with the rest of the UI on touch devices. Block gaps tighten
+ * separately (see `blockGaps`).
  */
 export type ProseSize = "sm" | "md" | "lg";
 export declare const prose: (size: ProseSize) => {

package/dist/tokens/prose.js

@@ -4,36 +4,100 @@ import { memoize } from "../utils/memoize";
 import { colors } from "./colors";
 import { motionEasing, motionStreamDurationMs } from "./motion";
 import { fontFamily, monoFontStyle } from "./text";
+/** A block size that steps up with the platform data scale. */
+const scaledPx = (normal, large) => defineVars({
+    px: { default: `${normal}px`, [LARGE_SCALE]: `${large}px` },
+}).px;
 const metrics = {
     sm: {
         blockGap: 16,
-        paragraph: { fontSize: 14, lineHeight: 24 },
-        h1: { fontSize: 30, lineHeight: 36, marginTop: 32, marginBottom: 24 },
-        h2: { fontSize: 20, lineHeight: 28, marginTop: 32, marginBottom: 16 },
-        h3: { fontSize: 18, lineHeight: 28, marginTop: 28, marginBottom: 8 },
-        h4: { fontSize: 14, lineHeight: 20, marginTop: 20, marginBottom: 8 },
+        paragraph: { fontSize: scaledPx(14, 17), lineHeight: scaledPx(24, 29) },
+        h1: {
+            fontSize: scaledPx(30, 36),
+            lineHeight: scaledPx(36, 43),
+            marginTop: 32,
+            marginBottom: 24,
+        },
+        h2: {
+            fontSize: scaledPx(20, 24),
+            lineHeight: scaledPx(28, 34),
+            marginTop: 32,
+            marginBottom: 16,
+        },
+        h3: {
+            fontSize: scaledPx(18, 22),
+            lineHeight: scaledPx(28, 34),
+            marginTop: 28,
+            marginBottom: 8,
+        },
+        h4: {
+            fontSize: scaledPx(14, 17),
+            lineHeight: scaledPx(20, 24),
+            marginTop: 20,
+            marginBottom: 8,
+        },
         listPadding: 22,
         listItemGap: 4,
         listNestedGap: 8,
     },
     md: {
         blockGap: 20,
-        paragraph: { fontSize: 16, lineHeight: 28 },
-        h1: { fontSize: 36, lineHeight: 40, marginTop: 48, marginBottom: 32 },
-        h2: { fontSize: 24, lineHeight: 32, marginTop: 48, marginBottom: 24 },
-        h3: { fontSize: 20, lineHeight: 32, marginTop: 32, marginBottom: 12 },
-        h4: { fontSize: 16, lineHeight: 24, marginTop: 24, marginBottom: 8 },
+        paragraph: { fontSize: scaledPx(16, 19), lineHeight: scaledPx(28, 34) },
+        h1: {
+            fontSize: scaledPx(36, 43),
+            lineHeight: scaledPx(40, 48),
+            marginTop: 48,
+            marginBottom: 32,
+        },
+        h2: {
+            fontSize: scaledPx(24, 29),
+            lineHeight: scaledPx(32, 38),
+            marginTop: 48,
+            marginBottom: 24,
+        },
+        h3: {
+            fontSize: scaledPx(20, 24),
+            lineHeight: scaledPx(32, 38),
+            marginTop: 32,
+            marginBottom: 12,
+        },
+        h4: {
+            fontSize: scaledPx(16, 19),
+            lineHeight: scaledPx(24, 29),
+            marginTop: 24,
+            marginBottom: 8,
+        },
         listPadding: 26,
         listItemGap: 8,
         listNestedGap: 12,
     },
     lg: {
         blockGap: 24,
-        paragraph: { fontSize: 18, lineHeight: 32 },
-        h1: { fontSize: 48, lineHeight: 48, marginTop: 56, marginBottom: 40 },
-        h2: { fontSize: 30, lineHeight: 40, marginTop: 56, marginBottom: 32 },
-        h3: { fontSize: 24, lineHeight: 36, marginTop: 40, marginBottom: 16 },
-        h4: { fontSize: 18, lineHeight: 28, marginTop: 32, marginBottom: 8 },
+        paragraph: { fontSize: scaledPx(18, 22), lineHeight: scaledPx(32, 38) },
+        h1: {
+            fontSize: scaledPx(48, 58),
+            lineHeight: scaledPx(48, 58),
+            marginTop: 56,
+            marginBottom: 40,
+        },
+        h2: {
+            fontSize: scaledPx(30, 36),
+            lineHeight: scaledPx(40, 48),
+            marginTop: 56,
+            marginBottom: 32,
+        },
+        h3: {
+            fontSize: scaledPx(24, 29),
+            lineHeight: scaledPx(36, 43),
+            marginTop: 40,
+            marginBottom: 16,
+        },
+        h4: {
+            fontSize: scaledPx(18, 22),
+            lineHeight: scaledPx(28, 34),
+            marginTop: 32,
+            marginBottom: 8,
+        },
         listPadding: 28,
         listItemGap: 12,
         listNestedGap: 16,
@@ -52,8 +116,8 @@ const bodyColor = colors.gray[12];
 const quoteColor = colors.gray[11];
 const px = (value) => `${value}px`;
 const block = (metric) => ({
-    fontSize: px(metric.fontSize),
-    lineHeight: px(metric.lineHeight),
+    fontSize: metric.fontSize,
+    lineHeight: metric.lineHeight,
     fontFamily,
 });
 export const prose = memoize((size) => {

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.42",
+	"version": "0.0.44",
 	"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/skills/maui/references/tokens.md

@@ -113,11 +113,13 @@ text({
 | `lg` | 16px | 24px |
 | `xl` | 22px | 30px |
 
+Sizes step up on the **Large platform scale** (`:root[data-scale="large"]`, driven by `(pointer: coarse)` under the system preference): `md` is 14px/22px on desktop and 17px/26px on coarse pointers. See `useScale` / `ScaleProvider`.
+
 - `lowContrast` → `gray[11]`, `highContrast` → `gray[12]`, `accent` → `accent[11]`, `onAccent` → white.
 - UI sans: `fontFamily` (system ui-sans-serif stack). Mono: Commit Mono with `ss05` smart kerning (`monoFontStyle` / `monospace`).
 - `tabular: true` → `font-variant-numeric: tabular-nums`. NumberField, TableHead, and TableCell turn this on by default. Body copy and Prose stay off.
 - `baseTextStyle` is md / 400 / highContrast — already on `html, body`.
-- Inside `Prose`, `H1`–`H4` / `P` / lists switch to the **prose** scale (`sm` 14px, `md` 16px, `lg` 18px), which is larger and has reading rhythm. Do not put app chrome inside `Prose`.
+- Inside `Prose`, `H1`–`H4` / `P` / lists switch to the **prose** scale (`sm` 14px, `md` 16px, `lg` 18px), which is larger and has reading rhythm. Prose block sizes and line heights also step up ~1.2x on the Large platform scale. Do not put app chrome inside `Prose`.
 
 `proseContainerStyle` is the composable column (`maxWidth: proseMaxWidth`, `"80ch"`). `sizing.contentWidth` is that same style. `sizing.fullWidth` is `width: 100%`.
 

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>`,