@setsquare/ui 0.2.4 → 0.5.0

package/dist/ui/tree.d.ts

@@ -0,0 +1,98 @@
+import type { ReactNode } from 'react';
+import { TreeSection as RACTreeSection, type TreeItemProps as RACTreeItemProps, type TreeProps as RACTreeProps } from 'react-aria-components';
+import { type IconProp } from './icon.js';
+/** A tree is named by a visible heading (`aria-labelledby`) or, when it has none, by `aria-label`. */
+type TreeName = {
+    'aria-label': string;
+} | {
+    'aria-labelledby': string;
+};
+export type TreeProps<T extends object> = Omit<RACTreeProps<T>, 'className' | 'aria-label' | 'aria-labelledby'> & TreeName & {
+    className?: string;
+};
+/**
+ * Nested things people open, close and act on: the blocks of a page, the steps of a workflow and their outcomes,
+ * operations grouped by resource. React Aria's Tree, a `treegrid` and one tab stop. ↑ ↓ move between rows, → opens a
+ * row and ← closes it, Home and End go to the ends, and typing jumps to the next row whose name starts with what you
+ * typed. On an open row, → moves to the row's own buttons.
+ *
+ * It draws no box of its own: rows sit on whatever surface holds the tree (a panel, a card), `--nav-item-gap`
+ * apart, like a nav list. The tree is `relative` because it scrolls, and because React Aria positions its drop
+ * indicators absolutely.
+ *
+ * Drag and drop: pass `dragAndDropHooks` from React Aria's `useDragAndDrop`, with
+ * `renderDropIndicator: (target) => <DropIndicator target={target} />`. Every draggable row then shows a drag
+ * button, which is how a keyboard or screen reader drag starts: Enter on it, ↑ ↓ to a drop place, Enter to drop,
+ * Esc to cancel.
+ */
+export declare function Tree<T extends object>({ className, ...props }: TreeProps<T>): import("react").JSX.Element;
+export interface TreeItemProps<T extends object = object> extends Omit<RACTreeItemProps<T>, 'className' | 'children' | 'textValue' | 'style'> {
+    /** What the row is called. A string is also its `textValue`. */
+    title: ReactNode;
+    /** Required when `title` isn't a string: the words typeahead matches and a screen reader reads. */
+    textValue?: string;
+    /** What kind of thing the row is: a block's type, a step's verb. 16px, `brand` while the row is selected. */
+    icon?: IconProp;
+    /**
+     * A few words after the title, on the same line: a block's heading, a count. When they don't fit beside the
+     * title they move under it and wrap there. They're never cut short, so text spacing and zoom lose none of them
+     * (1.4.12). A string is added to the row's accessible name, so the words are never only seen.
+     */
+    description?: ReactNode;
+    /**
+     * A `StatusBadge` for this row: a check result ("2nd H1"), a draft, a lock. It sits after the description,
+     * before the actions. Always an icon and a word.
+     */
+    status?: ReactNode;
+    /**
+     * The status in words for a screen reader ("2nd H1, must fix"). React Aria names a row from its `textValue`
+     * alone, so without this the status is only seen, never heard. Added to the row's name after the description.
+     */
+    statusLabel?: string;
+    /**
+     * Buttons for this row only. Name them with the row ("Actions for Fixtures"). They show on the selected row,
+     * the row with focus and the row under the pointer, so the tree stays quiet; keyboard focus on a row shows them
+     * before → reaches them. `alwaysShowActions` keeps them showing, for a row that can't be selected.
+     */
+    actions?: ReactNode;
+    alwaysShowActions?: boolean;
+    /** The rows inside this one: `TreeItem`s, or a React Aria `Collection` of them. */
+    children?: ReactNode;
+    /** Words for the drag button, when the row can be dragged. React Aria's own ("Drag {title}") by default. */
+    dragLabel?: string;
+    /**
+     * `false` leaves the drag button off a row that can't move, such as a column in a page layout, in a tree that
+     * otherwise drags. React Aria has no per-row switch for dragging (only for `disabledBehavior="all"`, which also
+     * takes the row out of focus), so the tree's `getItems` should give such a row a type its drop targets refuse.
+     */
+    allowsDragging?: boolean;
+    className?: string;
+}
+/**
+ * One row and the rows inside it, on one line while it fits: chevron, icon, title, description, status, then its
+ * buttons. Each level indents by `--tree-indent` (16px). A row is at least `--nav-item-height` tall and `--target-min` at AAA,
+ * rounded, with the `accent` ground on hover. Selected: `brand-subtle`, the 3px `sidebar-primary` marker, a bold
+ * title and a `brand` icon, as in a GridList and the sidebar; with multiple selection, a ticked box too.
+ *
+ * A row that only holds other rows, such as a column in a page layout, can be focused and opened but never
+ * selected: put its id in the Tree's `disabledKeys` and set `disabledBehavior="selection"`. React Aria then
+ * leaves it focusable and doesn't mark it disabled, so it isn't dimmed.
+ *
+ * While a drag is over the row, as a place to drop into, it gets the `brand-subtle` ground and a 2px `brand`
+ * outline inside its edge. The row being dragged fades to 50%.
+ */
+export declare function TreeItem<T extends object = object>({ title, textValue, icon, description, status, statusLabel, actions, alwaysShowActions, children, dragLabel, allowsDragging: rowDrags, className, ...props }: TreeItemProps<T>): import("react").JSX.Element;
+/** React Aria doesn't export its TreeSection's props by name. */
+type RACTreeSectionProps<T extends object> = Parameters<typeof RACTreeSection<T>>[0];
+export interface TreeSectionProps<T extends object> extends Omit<RACTreeSectionProps<T>, 'className'> {
+    className?: string;
+}
+/** A group of top-level rows under a `TreeHeader`: operations by resource, steps by phase. */
+export declare function TreeSection<T extends object>({ className, ...props }: TreeSectionProps<T>): import("react").JSX.Element;
+/** The name of a `TreeSection`, read before its rows. Not a target: arrow keys pass over it. */
+export declare function TreeHeader({ children, className }: {
+    children: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=tree.d.ts.map

package/dist/ui/tree.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree.d.ts","sourceRoot":"","sources":["../../src/ui/tree.tsx"],"names":[],"mappings":"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"}

package/dist/ui/tree.js

@@ -0,0 +1,75 @@
+'use client';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronRight, GripVertical } from 'lucide-react';
+import { Button as RACButton, Tree as RACTree, TreeHeader as RACTreeHeader, TreeItem as RACTreeItem, TreeItemContent, TreeSection as RACTreeSection, } from 'react-aria-components';
+import { cn } from '../lib/cn.js';
+import { SelectionCheckbox } from './checkbox.js';
+import { renderIcon } from './icon.js';
+/**
+ * Nested things people open, close and act on: the blocks of a page, the steps of a workflow and their outcomes,
+ * operations grouped by resource. React Aria's Tree, a `treegrid` and one tab stop. ↑ ↓ move between rows, → opens a
+ * row and ← closes it, Home and End go to the ends, and typing jumps to the next row whose name starts with what you
+ * typed. On an open row, → moves to the row's own buttons.
+ *
+ * It draws no box of its own: rows sit on whatever surface holds the tree (a panel, a card), `--nav-item-gap`
+ * apart, like a nav list. The tree is `relative` because it scrolls, and because React Aria positions its drop
+ * indicators absolutely.
+ *
+ * Drag and drop: pass `dragAndDropHooks` from React Aria's `useDragAndDrop`, with
+ * `renderDropIndicator: (target) => <DropIndicator target={target} />`. Every draggable row then shows a drag
+ * button, which is how a keyboard or screen reader drag starts: Enter on it, ↑ ↓ to a drop place, Enter to drop,
+ * Esc to cancel.
+ */
+export function Tree({ className, ...props }) {
+    return (_jsx(RACTree, { ...props, className: cn('relative flex max-h-[inherit] flex-col gap-(--nav-item-gap) overflow-auto text-sm outline-none data-focus-visible:focus-ring', 
+        // Dropping onto the tree itself (an empty tree, or the end of it).
+        'data-drop-target:bg-brand-subtle data-drop-target:outline-2 data-drop-target:outline-solid data-drop-target:outline-brand data-drop-target:-outline-offset-2', className) }));
+}
+/** The column the chevron, or the space for one, takes: one target wide, so every title lines up. */
+const lead = 'w-[max(var(--target-min),var(--control-height-sm))] shrink-0';
+/**
+ * One row and the rows inside it, on one line while it fits: chevron, icon, title, description, status, then its
+ * buttons. Each level indents by `--tree-indent` (16px). A row is at least `--nav-item-height` tall and `--target-min` at AAA,
+ * rounded, with the `accent` ground on hover. Selected: `brand-subtle`, the 3px `sidebar-primary` marker, a bold
+ * title and a `brand` icon, as in a GridList and the sidebar; with multiple selection, a ticked box too.
+ *
+ * A row that only holds other rows, such as a column in a page layout, can be focused and opened but never
+ * selected: put its id in the Tree's `disabledKeys` and set `disabledBehavior="selection"`. React Aria then
+ * leaves it focusable and doesn't mark it disabled, so it isn't dimmed.
+ *
+ * While a drag is over the row, as a place to drop into, it gets the `brand-subtle` ground and a 2px `brand`
+ * outline inside its edge. The row being dragged fades to 50%.
+ */
+export function TreeItem({ title, textValue, icon, description, status, statusLabel, actions, alwaysShowActions, children, dragLabel, allowsDragging: rowDrags = true, className, ...props }) {
+    const text = textValue ?? (typeof title === 'string' ? title : '');
+    const named = [
+        props['aria-label'] ?? text,
+        typeof description === 'string' ? description : '',
+        statusLabel ?? '',
+    ]
+        .filter(Boolean)
+        .join(', ');
+    return (_jsxs(RACTreeItem, { ...props, textValue: text, "aria-label": named || undefined, style: ({ level }) => ({ '--tree-level': level }), className: cn(
+        // React Aria sets data-hovered only on a row that can be selected or has an action: the pointer then.
+        'group/tree-item relative flex min-h-[max(var(--target-min),var(--nav-item-height))] cursor-default items-center gap-0.5 rounded-md py-1 ps-[calc((var(--tree-level)-1)*var(--tree-indent))] pe-1 outline-none', 'data-hovered:cursor-pointer data-disabled:cursor-not-allowed data-hovered:bg-accent data-selected:bg-brand-subtle data-selected:shadow-[inset_3px_0_0_var(--sidebar-primary)] data-focus-visible:focus-ring-inset data-disabled:opacity-60', 'data-dragging:opacity-50 data-drop-target:bg-brand-subtle data-drop-target:outline-2 data-drop-target:outline-solid data-drop-target:outline-brand data-drop-target:-outline-offset-2', 
+        // Forced colours drop the selected ground and the inset marker: draw the marker in Highlight instead.
+        "forced-colors:data-selected:before:absolute forced-colors:data-selected:before:inset-y-1 forced-colors:data-selected:before:start-0 forced-colors:data-selected:before:w-[3px] forced-colors:data-selected:before:bg-[Highlight] forced-colors:data-selected:before:forced-color-adjust-none forced-colors:data-selected:before:content-['']", className), children: [_jsx(TreeItemContent, { children: ({ hasChildItems, selectionMode, selectionBehavior, allowsDragging: treeDrags }) => {
+                    const allowsDragging = treeDrags && rowDrags;
+                    return (_jsxs(_Fragment, { children: [hasChildItems ? (_jsx(RACButton, { slot: "chevron", className: cn('group/tree-chevron relative flex min-h-target cursor-pointer items-center justify-center outline-none', lead), children: _jsx("span", { className: "flex size-control-sm items-center justify-center rounded-md text-muted-foreground group-data-hovered/tree-chevron:bg-muted group-data-hovered/tree-chevron:text-foreground", children: _jsx(ChevronRight, { "aria-hidden": "true", className: "size-4 group-data-expanded/tree-item:rotate-90" }) }) })) : (_jsx("span", { "aria-hidden": "true", className: lead })), selectionMode === 'multiple' && selectionBehavior === 'toggle' && (_jsx(SelectionCheckbox, {})), _jsxs("span", { className: "flex min-w-0 flex-1 flex-wrap items-center gap-x-2 px-2", children: [icon &&
+                                        renderIcon(icon, 'size-4 shrink-0 text-muted-foreground group-data-selected/tree-item:text-brand'), _jsx("span", { className: "min-w-0 leading-5 font-semibold [overflow-wrap:anywhere] text-foreground group-data-selected/tree-item:font-bold", children: title }), description && (_jsx("span", { className: "min-w-0 leading-5 [overflow-wrap:anywhere] text-muted-foreground", children: description })), status && (_jsx("span", { className: "flex flex-wrap items-center gap-1", children: status }))] }), (actions || allowsDragging) && (_jsxs("span", { className: cn('flex shrink-0 items-center gap-0.5', !alwaysShowActions &&
+                                    // Faded out, not hidden: they stay focusable, so focus can land on them (and shows
+                                    // them) and React Aria can hand focus back to the drag button when a drag ends. No
+                                    // pointer events until they show: group-hover needs a device that hovers, so on touch
+                                    // a tap selects the row first.
+                                    'pointer-events-none opacity-0', 'group-hover/tree-item:pointer-events-auto group-hover/tree-item:opacity-100', 'group-focus-within/tree-item:pointer-events-auto group-focus-within/tree-item:opacity-100', 'group-data-selected/tree-item:pointer-events-auto group-data-selected/tree-item:opacity-100', 'group-data-dragging/tree-item:opacity-100'), children: [allowsDragging && (_jsx(RACButton, { slot: "drag", "aria-label": dragLabel, className: "group/tree-drag relative flex min-h-target min-w-target shrink-0 cursor-grab items-center justify-center outline-none", children: _jsx("span", { className: "flex size-control-sm items-center justify-center rounded-md text-muted-foreground group-data-focus-visible/tree-drag:focus-ring group-data-hovered/tree-drag:bg-muted group-data-hovered/tree-drag:text-foreground", children: _jsx(GripVertical, { "aria-hidden": "true", className: "size-4" }) }) })), actions] }))] }));
+                } }), children] }));
+}
+/** A group of top-level rows under a `TreeHeader`: operations by resource, steps by phase. */
+export function TreeSection({ className, ...props }) {
+    return _jsx(RACTreeSection, { ...props, className: className });
+}
+/** The name of a `TreeSection`, read before its rows. Not a target: arrow keys pass over it. */
+export function TreeHeader({ children, className }) {
+    return (_jsx(RACTreeHeader, { className: cn('px-3 pt-3 pb-1 text-caption-strong text-muted-foreground first:pt-1', className), children: children }));
+}
+//# sourceMappingURL=tree.js.map

package/dist/ui/tree.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree.js","sourceRoot":"","sources":["../../src/ui/tree.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@setsquare/ui",
-  "version": "0.2.4",
+  "version": "0.5.0",
   "description": "React Aria components, design tokens, a dashboard shell and a site shell, with a switch between WCAG 2.2 AA and AAA sizing, spacing and contrast.",
   "license": "Apache-2.0",
   "homepage": "https://github.com/Worktree-Amigos/setsquare-ui#readme",
@@ -11,7 +11,6 @@
     "type": "git",
     "url": "git+https://github.com/Worktree-Amigos/setsquare-ui.git"
   },
-  "packageManager": "pnpm@11.21.0",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -59,29 +58,11 @@
     "wcag",
     "nextjs"
   ],
-  "scripts": {
-    "build": "node scripts/build-css.mjs && tsc -p tsconfig.json",
-    "typecheck": "tsc -p tsconfig.json --noEmit && tsc -p tsconfig.test.json",
-    "typecheck:react18": "node scripts/typecheck-react18.mjs",
-    "lint": "oxlint && node scripts/check-contrast.mjs",
-    "format": "oxfmt",
-    "format:check": "oxfmt --check",
-    "test": "vitest run",
-    "test:browser": "node test/browser/run.mjs",
-    "docs:build": "node scripts/build-docs.mjs",
-    "package:verify": "node scripts/verify-package.mjs",
-    "ci:local": "node scripts/ci-local.mjs",
-    "test:axe": "node test/browser/axe.mjs",
-    "docs:site": "pnpm --filter @setsquare/ui-docs dev",
-    "docs:site:build": "pnpm --filter @setsquare/ui-docs build",
-    "test:site": "node test/site/pages.mjs",
-    "test:setsquare": "node test/setsquare/run.mjs"
-  },
   "peerDependencies": {
     "@internationalized/date": "^3.12.4",
-    "react": ">=18.3.0",
+    "react": ">=19.2.0",
     "react-aria-components": "^1.21.1",
-    "react-dom": ">=18.3.0",
+    "react-dom": ">=19.2.0",
     "tailwindcss": "^4.3.0"
   },
   "peerDependenciesMeta": {
@@ -110,15 +91,30 @@
     "oxfmt": "0.70.0",
     "oxlint": "1.85.0",
     "react": "19.3.0",
-    "react-18": "npm:react@18.3.1",
     "react-aria-components": "1.21.1",
     "react-dom": "19.3.0",
-    "react-dom-18": "npm:react-dom@18.3.1",
     "tailwindcss": "4.3.3",
     "typescript": "7.0.2",
     "vitest": "5.0.2"
   },
   "publishConfig": {
     "access": "public"
+  },
+  "scripts": {
+    "build": "node scripts/build-css.mjs && tsc -p tsconfig.json && pnpm --filter @setsquare/ui-flows build && pnpm --filter @setsquare/ui-blocks build",
+    "typecheck": "tsc -p tsconfig.json --noEmit && tsc -p tsconfig.test.json && pnpm --filter @setsquare/ui-flows typecheck && pnpm --filter @setsquare/ui-blocks typecheck",
+    "lint": "oxlint && node scripts/check-contrast.mjs",
+    "format": "oxfmt",
+    "format:check": "oxfmt --check",
+    "test": "vitest run",
+    "test:browser": "node test/browser/run.mjs",
+    "docs:build": "node scripts/build-docs.mjs",
+    "package:verify": "node scripts/verify-package.mjs",
+    "ci:local": "node scripts/ci-local.mjs",
+    "test:axe": "node test/browser/axe.mjs",
+    "docs:site": "pnpm --filter @setsquare/ui-docs dev",
+    "docs:site:build": "pnpm --filter @setsquare/ui-docs build",
+    "test:site": "node test/site/pages.mjs",
+    "test:setsquare": "node test/setsquare/run.mjs"
   }
-}
+}

package/templates/next/page-transition.tsx

@@ -1,4 +1,4 @@
-// Next.js only (React 19.3+): not part of the design-system bundle, which runs on React 18.
+// Next.js only (React 19.3+, for <ViewTransition>): not part of the design-system bundle.
 // Wrap each page.tsx's ShellMain — <PageTransition><ShellMain>…</ShellMain></PageTransition> — never the other way
 // round: a ViewTransition only enters and exits if it comes before every DOM node, and ShellMain is a <main>.
 // Never in a layout.tsx either, where enter and exit never fire.