@sole-ui/react 0.0.0-stage → 0.2.0

package/dist/components/sole/copy-field.js

@@ -0,0 +1,32 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Check, Copy } from 'lucide-react';
+import { cn } from '../../lib/cn.js';
+import { Button } from '../ui/button.js';
+export const CopyField = React.forwardRef(function CopyField({ value, secret = false, label, onCopied, className, ...props }, ref) {
+    const id = React.useId();
+    const [copied, setCopied] = React.useState(false);
+    React.useEffect(() => {
+        if (!copied)
+            return;
+        const t = setTimeout(() => setCopied(false), 2000);
+        return () => clearTimeout(t);
+    }, [copied]);
+    const copy = async () => {
+        try {
+            await navigator.clipboard.writeText(value);
+            setCopied(true);
+            onCopied?.();
+        }
+        catch {
+            // The clipboard can be refused (an insecure context, a denied permission). The
+            // value stays selectable, so select it for a manual copy.
+            const el = document.getElementById(id);
+            if (el)
+                window.getSelection()?.selectAllChildren(el);
+        }
+    };
+    return (_jsxs("div", { ref: ref, "data-copy-field": secret ? 'secret' : 'plain', className: cn('flex h-10 min-w-0 items-center gap-2 rounded-lg border border-input bg-field pr-[5px] pl-3', className), ...props, children: [_jsx("span", { id: id, className: cn('min-w-0 flex-1 truncate text-foreground select-all', secret ? 'font-mono text-[15px] leading-5' : 'text-body'), children: value }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: copy, className: "gap-2 bg-background px-[11px] shadow-none", "aria-label": `Copy ${label.toLocaleLowerCase('en-AU')}`, children: [copied ? _jsx(Check, { "aria-hidden": "true", className: "size-4 text-success" }) : _jsx(Copy, { "aria-hidden": "true", className: "size-4" }), copied ? 'Copied' : 'Copy'] }), _jsx("span", { role: "status", className: "sr-only", children: copied ? `${label} copied` : '' })] }));
+});
+CopyField.displayName = 'CopyField';

package/dist/components/sole/count-badge.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+export interface CountBadgeProps extends React.ComponentPropsWithoutRef<'span'> {
+    children: React.ReactNode;
+    variant?: 'tint' | 'muted';
+    /** The accessible text, e.g. "2 unread mentions". */
+    label?: string;
+}
+export declare const CountBadge: React.ForwardRefExoticComponent<CountBadgeProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/sole/count-badge.js

@@ -0,0 +1,8 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { cn } from '../../lib/cn.js';
+export const CountBadge = React.forwardRef(function CountBadge({ children, variant = 'tint', label, className, ...props }, ref) {
+    return (_jsx("span", { ref: ref, "aria-label": label, title: label, className: cn('tnum inline-flex h-[18px] min-w-[18px] shrink-0 items-center justify-center rounded-full px-[5px] text-[11px] leading-none font-semibold', variant === 'tint' && 'bg-accent text-accent-foreground', variant === 'muted' && 'bg-muted text-subtle-foreground', className), ...props, children: children }));
+});
+CountBadge.displayName = 'CountBadge';

package/dist/components/sole/field.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+export interface FieldProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {
+    label: React.ReactNode;
+    hint?: React.ReactNode;
+    /** "Could not ..." sentence; replaces the hint and marks the control invalid. */
+    error?: React.ReactNode;
+    /** One control: an Input, Textarea, FieldSelectButton or the like. */
+    children: React.ReactElement<{
+        id?: string;
+        'aria-describedby'?: string;
+        'aria-invalid'?: boolean;
+    }>;
+    /** The control's id, when the caller needs to know it. Otherwise the control's own, or a generated one. */
+    id?: string;
+}
+export declare const Field: React.ForwardRefExoticComponent<FieldProps & React.RefAttributes<HTMLDivElement>>;
+export interface ReadOnlyFieldProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {
+    label: React.ReactNode;
+    value: React.ReactNode;
+    /** Why it cannot change: "Set by your Google account". */
+    note?: React.ReactNode;
+}
+/** Field/Read only (80.3 Email): the label, then the value and why it cannot change. */
+export declare const ReadOnlyField: React.ForwardRefExoticComponent<ReadOnlyFieldProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/sole/field.js

@@ -0,0 +1,27 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { cn } from '../../lib/cn.js';
+import { InlineError } from './banner.js';
+export const Field = React.forwardRef(function Field({ label, hint, error, children, className, id: idProp, ...props }, ref) {
+    const auto = React.useId();
+    const own = React.isValidElement(children) ? children.props : undefined;
+    const id = idProp ?? own?.id ?? auto;
+    const messageId = `${id}-message`;
+    // Keeps what the control already points at (a password's rule list, say), adds the message.
+    const describedBy = [own?.['aria-describedby'], hint || error ? messageId : undefined].filter(Boolean).join(' ') || undefined;
+    const control = React.isValidElement(children)
+        ? React.cloneElement(children, {
+            id,
+            'aria-describedby': describedBy,
+            'aria-invalid': error ? true : own?.['aria-invalid'],
+        })
+        : children;
+    return (_jsxs("div", { ref: ref, className: cn('flex min-w-0 flex-col gap-1.5', className), ...props, children: [_jsx("label", { htmlFor: id, className: "text-label text-foreground", children: label }), control, error ? (_jsx(InlineError, { id: messageId, children: error })) : (hint && (_jsx("p", { id: messageId, className: "text-label font-normal text-subtle-foreground", children: hint })))] }));
+});
+Field.displayName = 'Field';
+/** Field/Read only (80.3 Email): the label, then the value and why it cannot change. */
+export const ReadOnlyField = React.forwardRef(function ReadOnlyField({ label, value, note, className, ...props }, ref) {
+    return (_jsxs("div", { ref: ref, className: cn('min-w-0', className), ...props, children: [_jsx("p", { className: "text-label text-foreground", children: label }), _jsxs("p", { className: "mt-1 text-body text-foreground", children: [value, note && (_jsxs("span", { className: "text-subtle-foreground", children: [_jsx("span", { "aria-hidden": "true", className: "px-2.5", children: "\u00B7" }), note] }))] })] }));
+});
+ReadOnlyField.displayName = 'ReadOnlyField';

package/dist/components/sole/filters.d.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+/**
+ * Filter chip: 26px, an outline, a 14px icon and 12/500 text. Active is the accent fill
+ * with a blue border and blue text, and an x that clears it (50.2 "Assignee: Ava").
+ * It is the trigger for its picker, so it forwards its ref and props to the button.
+ */
+export declare const FilterChip: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "children"> & {
+    icon?: React.ReactNode;
+    label: React.ReactNode;
+    active?: boolean;
+    onClear?: () => void;
+    clearLabel?: string;
+} & React.RefAttributes<HTMLButtonElement>>;
+/** Chip/Removable (90.7 allowed domains): 26px neutral chip with an x. */
+export declare const RemovableChip: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "children"> & {
+    children: React.ReactNode;
+    onRemove: () => void;
+    removeLabel: string;
+} & React.RefAttributes<HTMLSpanElement>>;
+export type BoardView = 'list' | 'kanban';
+/** View switch (50.1, 50.3): List and Kanban on a muted track; the current one is white. */
+export declare const ViewSwitch: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "aria-label" | "children" | "onChange" | "role"> & {
+    value: BoardView;
+    onChange: (view: BoardView) => void;
+} & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Field/Search (60.1 "Search pages", 80.1): a 32px field with a search icon and the "/"
+ * hint. The "/" key is the screen's to wire (focus()), through the forwarded ref.
+ */
+export declare const SearchField: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "type"> & {
+    shortcut?: string | null;
+    wrapperClassName?: string;
+} & React.RefAttributes<HTMLInputElement>>;

package/dist/components/sole/filters.js

@@ -0,0 +1,48 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { List, Search, SquareKanban, X } from 'lucide-react';
+import { cn } from '../../lib/cn.js';
+import { Kbd } from './kbd.js';
+// Filters and switches (02-components.png 02.3; 50.1 to 50.3, 60.1, 90.7).
+/**
+ * Filter chip: 26px, an outline, a 14px icon and 12/500 text. Active is the accent fill
+ * with a blue border and blue text, and an x that clears it (50.2 "Assignee: Ava").
+ * It is the trigger for its picker, so it forwards its ref and props to the button.
+ */
+export const FilterChip = React.forwardRef(function FilterChip({ icon, label, active = false, onClear, clearLabel, className, ...props }, ref) {
+    return (_jsxs("span", { "data-filter-chip": active ? 'active' : 'default', className: cn('inline-flex h-[26px] shrink-0 items-center rounded-md border text-label transition-colors duration-[120ms]', active ? 'border-brand bg-accent text-accent-foreground' : 'border-border bg-card text-secondary-foreground hover:bg-row-hover', className), children: [_jsxs("button", { ref: ref, type: "button", "aria-pressed": active, className: cn('inline-flex h-full min-w-0 items-center gap-1.5 rounded-md pl-2 outline-none focus-visible:shadow-[var(--focus-ring)] [&_svg]:size-3.5 [&_svg]:shrink-0', active && onClear ? 'pr-1' : 'pr-2.5', active ? '[&_svg]:text-accent-foreground' : '[&_svg]:text-muted-foreground'), ...props, children: [icon, _jsx("span", { className: "truncate", children: label })] }), active && onClear && (_jsx("button", { type: "button", onClick: onClear, "aria-label": clearLabel ?? `Clear ${typeof label === 'string' ? label : 'this filter'}`, className: "mr-[3px] inline-flex size-4 items-center justify-center rounded-sm text-accent-foreground outline-none hover:bg-brand/10 focus-visible:shadow-[var(--focus-ring)]", children: _jsx(X, { className: "size-3", strokeWidth: 2, "aria-hidden": "true" }) }))] }));
+});
+FilterChip.displayName = 'FilterChip';
+/** Chip/Removable (90.7 allowed domains): 26px neutral chip with an x. */
+export const RemovableChip = React.forwardRef(function RemovableChip({ children, onRemove, removeLabel, className, ...props }, ref) {
+    return (_jsxs("span", { ref: ref, className: cn('inline-flex h-6 shrink-0 items-center gap-1 rounded-md bg-muted pr-[3px] pl-2.5 text-label text-foreground', className), ...props, children: [_jsx("span", { className: "truncate", children: children }), _jsx("button", { type: "button", onClick: onRemove, "aria-label": removeLabel, className: "inline-flex size-[18px] items-center justify-center rounded-sm text-muted-foreground outline-none hover:bg-sidebar-hover hover:text-foreground focus-visible:shadow-[var(--focus-ring)]", children: _jsx(X, { className: "size-3", strokeWidth: 2, "aria-hidden": "true" }) })] }));
+});
+RemovableChip.displayName = 'RemovableChip';
+/** View switch (50.1, 50.3): List and Kanban on a muted track; the current one is white. */
+export const ViewSwitch = React.forwardRef(function ViewSwitch({ value, onChange, className, ...props }, ref) {
+    const items = [
+        { value: 'list', label: 'List', Icon: List },
+        { value: 'kanban', label: 'Kanban', Icon: SquareKanban },
+    ];
+    return (_jsx("div", { ref: ref, ...props, role: "radiogroup", "aria-label": "View", className: cn('inline-flex h-[30px] shrink-0 items-center rounded-lg bg-muted p-0.5', className), children: items.map(({ value: v, label, Icon }) => {
+            const on = v === value;
+            return (_jsxs("button", { type: "button", "data-view": v, role: "radio", "aria-checked": on, onClick: () => !on && onChange(v), onKeyDown: (e) => {
+                    if (e.key === 'ArrowRight' || e.key === 'ArrowLeft' || e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+                        e.preventDefault();
+                        const next = value === 'list' ? 'kanban' : 'list';
+                        e.currentTarget.parentElement?.querySelector(`[data-view="${next}"]`)?.focus();
+                        onChange(next);
+                    }
+                }, tabIndex: on ? 0 : -1, className: cn('inline-flex h-[26px] items-center gap-1.5 rounded-md px-2.5 text-label outline-none transition-colors duration-[120ms] focus-visible:shadow-[var(--focus-ring)] [&_svg]:size-3.5', on ? 'bg-card text-foreground shadow-sm [&_svg]:text-foreground' : 'text-muted-foreground hover:text-foreground [&_svg]:text-muted-foreground'), children: [_jsx(Icon, { "aria-hidden": "true", strokeWidth: 1.8 }), label] }, v));
+        }) }));
+});
+ViewSwitch.displayName = 'ViewSwitch';
+/**
+ * Field/Search (60.1 "Search pages", 80.1): a 32px field with a search icon and the "/"
+ * hint. The "/" key is the screen's to wire (focus()), through the forwarded ref.
+ */
+export const SearchField = React.forwardRef(function SearchField({ shortcut = '/', wrapperClassName, className, ...props }, ref) {
+    return (_jsxs("label", { className: cn('flex h-8 min-w-0 cursor-text items-center gap-2 rounded-lg border border-input bg-field pr-2 pl-2.5 transition-[color,box-shadow] duration-[120ms] focus-within:border-ring focus-within:shadow-[var(--focus-ring)]', wrapperClassName), children: [_jsx(Search, { "aria-hidden": "true", strokeWidth: 1.8, className: "size-3.5 shrink-0 text-subtle-foreground" }), _jsx("input", { ref: ref, type: "search", className: cn('h-full min-w-0 flex-1 bg-transparent text-body text-foreground outline-none placeholder:text-subtle-foreground [&::-webkit-search-cancel-button]:hidden', className), ...props }), shortcut && _jsx(Kbd, { keys: [shortcut], className: "bg-muted" })] }));
+});
+SearchField.displayName = 'SearchField';

package/dist/components/sole/index.d.ts

@@ -0,0 +1,17 @@
+export * from './avatar.tsx';
+export * from './banner.tsx';
+export * from './column-header.tsx';
+export * from './copy-field.tsx';
+export * from './count-badge.tsx';
+export * from './field.tsx';
+export * from './filters.tsx';
+export * from './kbd.tsx';
+export * from './label-tag.tsx';
+export * from './layout.tsx';
+export * from './logo.tsx';
+export * from './nav.tsx';
+export * from './person-chip.tsx';
+export * from './person-header.tsx';
+export * from './pill.tsx';
+export * from './states.tsx';
+export * from './table.tsx';

package/dist/components/sole/index.js

@@ -0,0 +1,17 @@
+export * from './avatar.js';
+export * from './banner.js';
+export * from './column-header.js';
+export * from './copy-field.js';
+export * from './count-badge.js';
+export * from './field.js';
+export * from './filters.js';
+export * from './kbd.js';
+export * from './label-tag.js';
+export * from './layout.js';
+export * from './logo.js';
+export * from './nav.js';
+export * from './person-chip.js';
+export * from './person-header.js';
+export * from './pill.js';
+export * from './states.js';
+export * from './table.js';

package/dist/components/sole/kbd.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+export interface KbdProps extends Omit<React.ComponentPropsWithoutRef<'kbd'>, 'children'> {
+    keys: readonly string[];
+}
+export declare const Kbd: React.ForwardRefExoticComponent<KbdProps & React.RefAttributes<HTMLElement>>;
+/** The same hint as words: "Cmd+K", or "Cmd K" with a space, as tooltips show it. */
+export declare function keysText(keys: readonly string[], separator?: string): string;

package/dist/components/sole/kbd.js

@@ -0,0 +1,14 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { cn } from '../../lib/cn.js';
+import { modKeyName } from '../../lib/platform.js';
+export const Kbd = React.forwardRef(function Kbd({ keys, className, ...props }, ref) {
+    const text = keys.map((k) => (k === 'mod' ? modKeyName() : k)).join(' ');
+    return (_jsx("kbd", { ref: ref, className: cn('inline-flex h-[18px] min-w-[18px] shrink-0 items-center justify-center rounded-sm border border-border bg-muted px-1 font-sans text-[11px] leading-none font-medium text-muted-foreground', className), ...props, children: text }));
+});
+Kbd.displayName = 'Kbd';
+/** The same hint as words: "Cmd+K", or "Cmd K" with a space, as tooltips show it. */
+export function keysText(keys, separator = '+') {
+    return keys.map((k) => (k === 'mod' ? modKeyName() : k)).join(separator);
+}

package/dist/components/sole/label-tag.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import type { Hue } from '../../lib/hue.ts';
+export interface LabelTagProps extends Omit<React.ComponentPropsWithoutRef<'span'>, 'children'> {
+    name: string;
+    hue: Hue;
+}
+export declare const LabelTag: React.ForwardRefExoticComponent<LabelTagProps & React.RefAttributes<HTMLSpanElement>>;
+export interface LabelTagsProps extends Omit<React.ComponentPropsWithoutRef<'span'>, 'children'> {
+    labels: Array<{
+        id: string;
+        name: string;
+        hue: Hue;
+    }>;
+    /** How many labels to show before "+n". */
+    max?: number;
+}
+/** Up to `max` labels, then "+n" in the same shape. */
+export declare const LabelTags: React.ForwardRefExoticComponent<LabelTagsProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/sole/label-tag.js

@@ -0,0 +1,17 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { cn } from '../../lib/cn.js';
+export const LabelTag = React.forwardRef(function LabelTag({ name, hue, className, ...props }, ref) {
+    return (_jsxs("span", { ref: ref, className: cn(`hue-${hue}`, 'inline-flex h-5 max-w-40 shrink-0 items-center gap-[5px] rounded-md border border-tag-border bg-tag-bg px-[7px] text-[11.5px] leading-none font-medium text-tag-fg', className), ...props, children: [_jsx("span", { "aria-hidden": "true", className: "size-1 shrink-0 rounded-full bg-tag-dot" }), _jsx("span", { className: "truncate", children: name })] }));
+});
+LabelTag.displayName = 'LabelTag';
+/** Up to `max` labels, then "+n" in the same shape. */
+export const LabelTags = React.forwardRef(function LabelTags({ labels, max = 2, className, ...props }, ref) {
+    if (!labels.length)
+        return null;
+    const shown = labels.slice(0, max);
+    const extra = labels.length - shown.length;
+    return (_jsxs("span", { ref: ref, className: cn('inline-flex min-w-0 items-center gap-1', className), ...props, children: [shown.map((l) => (_jsx(LabelTag, { name: l.name, hue: l.hue }, l.id))), extra > 0 && (_jsxs("span", { title: labels.slice(max).map((l) => l.name).join(', '), className: "inline-flex h-5 shrink-0 items-center rounded-md border border-border px-1.5 text-[11.5px] font-medium text-muted-foreground", children: ["+", extra] }))] }));
+});
+LabelTags.displayName = 'LabelTags';

package/dist/components/sole/layout.d.ts

@@ -0,0 +1,54 @@
+import * as React from 'react';
+/** Page header (60.1, 80.1, 90.7): a 20/28 title, one 13px line under it, actions on the right. */
+export declare const PageHeader: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "children" | "title"> & {
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    actions?: React.ReactNode;
+    as?: 'h1' | 'h2';
+} & React.RefAttributes<HTMLElement>>;
+/** Section label (30.1 "RECENTLY VIEWED", 60.5 "COMMENTS 2"): 11/600 uppercase, a count, an action on the right. */
+export declare const SectionLabel: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "children"> & {
+    children: React.ReactNode;
+    count?: number;
+    /** A link-style button: "New sticky", "Show resolved". */
+    action?: React.ReactNode;
+    as?: 'h2' | 'h3' | 'div';
+} & React.RefAttributes<HTMLDivElement>>;
+/** The quiet link-style action a SectionLabel carries: 12/500 in the link colour. */
+export declare const SectionAction: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+/** Card/Section (90.7, 90.8, 50.11): a bordered 12px card, a 14/600 title, a 13px line, then the body. */
+export declare const SectionCard: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "title"> & {
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    actions?: React.ReactNode;
+} & React.RefAttributes<HTMLElement>>;
+/** List card (30.1 My work, 80.2 Open work): a 12px card with a 42px header, rows below. */
+export declare const ListCard: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "title"> & {
+    title: React.ReactNode;
+    /** "9 open", or a number. */
+    count?: React.ReactNode;
+    /** On the right of the header: "Assigned to you, not done". */
+    meta?: React.ReactNode;
+    footer?: React.ReactNode;
+    children: React.ReactNode;
+} & React.RefAttributes<HTMLElement>>;
+/** Property row (50.6 side panel): a 96px 13px label, then the value, 36px tall. */
+export declare const PropertyRow: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "children" | "title"> & {
+    label: React.ReactNode;
+    /** The whole label, shown on hover when it is cut to the column. */
+    title?: string;
+    /** Before the label, inside the same 96px column: 14px, decorative. */
+    icon?: React.ReactNode;
+    children: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Table header (90.1 Access, 80.1 People): 32px, the muted fill, 12/500 labels. Give it
+ * the same grid template as the rows, e.g. `className="grid-cols-[1fr_140px_180px_160px_40px]"`.
+ * A column is its label, or `{ id, label }` for one with no words (the row menu).
+ */
+export declare const TableHeader: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "children"> & {
+    columns: ReadonlyArray<string | {
+        id: string;
+        label?: React.ReactNode;
+    }>;
+} & React.RefAttributes<HTMLDivElement>>;

package/dist/components/sole/layout.js

@@ -0,0 +1,48 @@
+'use client';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { cn } from '../../lib/cn.js';
+// Page parts (02-components.png 02.5, 02.9): the page header, the uppercase section
+// label, the section card, the list card, property rows and table headers.
+/** Page header (60.1, 80.1, 90.7): a 20/28 title, one 13px line under it, actions on the right. */
+export const PageHeader = React.forwardRef(function PageHeader({ title, description, actions, as: Heading = 'h1', className, ...props }, ref) {
+    return (_jsxs("header", { ref: ref, className: cn('flex min-w-0 items-start gap-4', className), ...props, children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx(Heading, { className: "text-page text-foreground", children: title }), description && _jsx("p", { className: "text-body text-subtle-foreground", children: description })] }), actions && _jsx("div", { className: "flex shrink-0 items-center gap-2", children: actions })] }));
+});
+PageHeader.displayName = 'PageHeader';
+/** Section label (30.1 "RECENTLY VIEWED", 60.5 "COMMENTS 2"): 11/600 uppercase, a count, an action on the right. */
+export const SectionLabel = React.forwardRef(function SectionLabel({ children, count, action, as: Heading = 'h2', className, ...props }, ref) {
+    return (_jsxs("div", { ref: ref, className: cn('flex h-6 min-w-0 items-center gap-2', className), ...props, children: [_jsx(Heading, { className: "text-micro text-subtle-foreground", children: children }), count !== undefined && _jsx("span", { className: "tnum text-label font-normal text-subtle-foreground", children: count }), action && _jsx("div", { className: "ml-auto flex shrink-0 items-center", children: action })] }));
+});
+SectionLabel.displayName = 'SectionLabel';
+/** The quiet link-style action a SectionLabel carries: 12/500 in the link colour. */
+export const SectionAction = React.forwardRef(function SectionAction({ className, ...props }, ref) {
+    return (_jsx("button", { ref: ref, type: "button", className: cn('rounded-sm text-label text-link outline-none hover:underline focus-visible:shadow-[var(--focus-ring)] disabled:opacity-50', className), ...props }));
+});
+SectionAction.displayName = 'SectionAction';
+/** Card/Section (90.7, 90.8, 50.11): a bordered 12px card, a 14/600 title, a 13px line, then the body. */
+export const SectionCard = React.forwardRef(function SectionCard({ title, description, actions, children, className, ...props }, ref) {
+    return (_jsxs("section", { ref: ref, className: cn('rounded-xl border border-border bg-card px-5 pt-[18px] pb-5', className), ...props, children: [_jsxs("div", { className: "flex min-w-0 items-start gap-4", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("h2", { className: "text-strong text-foreground", children: title }), description && _jsx("p", { className: "mt-0.5 text-body text-muted-foreground", children: description })] }), actions && _jsx("div", { className: "flex shrink-0 items-center gap-2", children: actions })] }), children && _jsx("div", { className: "mt-4", children: children })] }));
+});
+SectionCard.displayName = 'SectionCard';
+/** List card (30.1 My work, 80.2 Open work): a 12px card with a 42px header, rows below. */
+export const ListCard = React.forwardRef(function ListCard({ title, count, meta, children, footer, className, ...props }, ref) {
+    return (_jsxs("section", { ref: ref, className: cn('overflow-hidden rounded-xl border border-border bg-card', className), ...props, children: [_jsxs("header", { className: "flex h-[43px] min-w-0 items-center gap-2 border-b border-border px-4", children: [_jsx("h2", { className: "text-strong text-foreground", children: title }), count !== undefined && _jsx("span", { className: "tnum text-label font-normal text-subtle-foreground", children: count }), meta && _jsx("span", { className: "ml-auto truncate text-label font-normal text-subtle-foreground", children: meta })] }), _jsx("div", { className: "[&>*:last-child]:border-b-0", children: children }), footer && _jsx("div", { className: "border-t border-hairline px-4 py-2.5", children: footer })] }));
+});
+ListCard.displayName = 'ListCard';
+/** Property row (50.6 side panel): a 96px 13px label, then the value, 36px tall. */
+export const PropertyRow = React.forwardRef(function PropertyRow({ label, title, icon, children, className, ...props }, ref) {
+    return (_jsxs("div", { ref: ref, className: cn('flex min-h-9 min-w-0 items-center', className), ...props, children: [_jsx("div", { title: title, className: cn('w-24 shrink-0 pr-2 text-body text-subtle-foreground', icon ? 'flex items-center gap-1.5' : 'truncate'), children: icon ? (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": "true", className: "flex shrink-0 items-center [&_svg]:size-3.5 [&_svg]:shrink-0", children: icon }), _jsx("span", { className: "min-w-0 truncate", children: label })] })) : (label) }), _jsx("div", { className: "flex min-w-0 flex-1 items-center gap-1.5", children: children })] }));
+});
+PropertyRow.displayName = 'PropertyRow';
+/**
+ * Table header (90.1 Access, 80.1 People): 32px, the muted fill, 12/500 labels. Give it
+ * the same grid template as the rows, e.g. `className="grid-cols-[1fr_140px_180px_160px_40px]"`.
+ * A column is its label, or `{ id, label }` for one with no words (the row menu).
+ */
+export const TableHeader = React.forwardRef(function TableHeader({ columns, className, ...props }, ref) {
+    return (_jsx("div", { ref: ref, ...props, role: "row", className: cn('grid h-8 items-center gap-4 bg-muted px-4 text-label text-subtle-foreground', className), children: columns.map((c) => {
+            const col = typeof c === 'string' ? { id: c, label: c } : c;
+            return (_jsx("div", { role: "columnheader", className: "min-w-0 truncate", children: col.label }, col.id));
+        }) }));
+});
+TableHeader.displayName = 'TableHeader';

package/dist/components/sole/logo.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+export interface SoleMarkProps extends Omit<React.ComponentPropsWithoutRef<'img'>, 'width' | 'height'> {
+    /** Width and height in px. */
+    size?: number;
+}
+export declare const SoleMark: React.ForwardRefExoticComponent<SoleMarkProps & React.RefAttributes<HTMLImageElement>>;
+export interface SoleLockupProps extends Omit<React.ComponentPropsWithoutRef<'span'>, 'children'> {
+    /** The mark's size in px; the wordmark follows it. */
+    size?: number;
+    /** The product's name beside the mark. */
+    name?: string;
+}
+export declare const SoleLockup: React.ForwardRefExoticComponent<SoleLockupProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/sole/logo.js

@@ -0,0 +1,17 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { cn } from '../../lib/cn.js';
+// The Sole mark and the lockup (brand-and-ux 1.2). Indigo lives in the mark only; the
+// interface accent is blue (D31). The mark is a PNG until a vector exists. HQ serves it
+// from /mark.png; the package carries the same 202px image inline, so a consumer needs no
+// file in its public folder. Pass `src` to use a file instead.
+const MARK_SRC = 'data:image/png;base64,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';
+export const SoleMark = React.forwardRef(function SoleMark({ size = 20, src = MARK_SRC, className, ...props }, ref) {
+    return _jsx("img", { ref: ref, src: src, alt: "", width: size, height: size, draggable: false, className: cn('shrink-0 select-none', className), ...props });
+});
+SoleMark.displayName = 'SoleMark';
+export const SoleLockup = React.forwardRef(function SoleLockup({ size = 20, name = 'Sole HQ', className, style, ...props }, ref) {
+    return (_jsxs("span", { ref: ref, className: cn('inline-flex items-center', className), style: { gap: Math.round(size * 0.3), ...style }, ...props, children: [_jsx(SoleMark, { size: size }), _jsx("span", { className: cn('font-semibold text-foreground', size >= 24 ? 'text-title' : 'text-strong tracking-[-0.01em]'), children: name })] }));
+});
+SoleLockup.displayName = 'SoleLockup';

package/dist/components/sole/nav.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+/**
+ * One item. With `href` it is a link (the provider's link component) and `active` marks the
+ * current page with `aria-current`; the caller decides, so a matching address never marks
+ * an item as current that is drawn as not. Without `href` it is a button that sets state
+ * (the wiki rail's filters) and `active` is `aria-pressed`.
+ */
+export declare const SubNavItem: React.ForwardRefExoticComponent<{
+    icon?: React.ReactNode;
+    label: React.ReactNode;
+    count?: number | string;
+    /** An address in the app: the item is a link. */
+    href?: string;
+    active?: boolean;
+    onClick?: () => void;
+    className?: string;
+} & React.RefAttributes<HTMLElement>>;
+/** A column of sub-nav items with an optional 11px heading ("SPACES", "FOLDERS"). */
+export declare const SubNav: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "children"> & {
+    label?: React.ReactNode;
+    children: React.ReactNode;
+} & React.RefAttributes<HTMLElement>>;

package/dist/components/sole/nav.js

@@ -0,0 +1,32 @@
+'use client';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { cn } from '../../lib/cn.js';
+import { SoleLink } from '../../lib/sole-provider.js';
+// Sub-navigation item (02.5; the wiki rail in 60.1, Settings and Admin nav in 80.3 and
+// 90.1): 32px, a 16px icon, 13/500 text, a count on the right. Active is the accent fill
+// with blue text, the same as the sidebar.
+const base = 'group/subnav flex h-8 w-full min-w-0 items-center gap-2 rounded-md px-2.5 text-left text-body font-medium text-sidebar-foreground outline-none transition-colors duration-[120ms] [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground hover:bg-sidebar-hover focus-visible:shadow-[var(--focus-ring)]';
+const activeClass = 'bg-accent text-accent-foreground hover:bg-accent [&_svg]:text-accent-foreground';
+function Inner({ icon, label, count }) {
+    return (_jsxs(_Fragment, { children: [icon, _jsx("span", { className: "min-w-0 flex-1 truncate", children: label }), count !== undefined && _jsx("span", { className: "tnum shrink-0 text-label font-normal text-subtle-foreground", children: count })] }));
+}
+/**
+ * One item. With `href` it is a link (the provider's link component) and `active` marks the
+ * current page with `aria-current`; the caller decides, so a matching address never marks
+ * an item as current that is drawn as not. Without `href` it is a button that sets state
+ * (the wiki rail's filters) and `active` is `aria-pressed`.
+ */
+export const SubNavItem = React.forwardRef(function SubNavItem({ icon, label, count, href, active, onClick, className }, ref) {
+    // One ref type for both elements; each branch narrows it to the element it renders.
+    if (href) {
+        return (_jsx(SoleLink, { ref: ref, href: href, onClick: onClick, className: cn(base, active && activeClass, className), "aria-current": active ? 'page' : undefined, children: _jsx(Inner, { icon: icon, label: label, count: count }) }));
+    }
+    return (_jsx("button", { ref: ref, type: "button", onClick: onClick, "aria-pressed": active, className: cn(base, active && activeClass, className), children: _jsx(Inner, { icon: icon, label: label, count: count }) }));
+});
+SubNavItem.displayName = 'SubNavItem';
+/** A column of sub-nav items with an optional 11px heading ("SPACES", "FOLDERS"). */
+export const SubNav = React.forwardRef(function SubNav({ label, children, className, ...props }, ref) {
+    return (_jsxs("nav", { ref: ref, "aria-label": typeof label === 'string' ? label : undefined, className: cn('flex flex-col gap-0.5', className), ...props, children: [label && _jsx("div", { className: "flex h-7 items-end px-2.5 pb-1.5 text-micro text-subtle-foreground", children: label }), children] }));
+});
+SubNav.displayName = 'SubNav';

package/dist/components/sole/person-chip.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { type SolePerson } from '../../lib/person.ts';
+export interface PersonChipProps extends Omit<React.ComponentPropsWithoutRef<'span'>, 'children'> {
+    person: SolePerson | null | undefined;
+    /** Set false for a chip that must not link, e.g. inside another link. */
+    link?: boolean;
+}
+export declare const PersonChip: React.ForwardRefExoticComponent<PersonChipProps & React.RefAttributes<HTMLElement>>;

package/dist/components/sole/person-chip.js

@@ -0,0 +1,19 @@
+'use client';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { cn } from '../../lib/cn.js';
+import { FORMER_MEMBER, personName } from '../../lib/person.js';
+import { SoleLink, useSole } from '../../lib/sole-provider.js';
+import { Avatar } from './avatar.js';
+export const PersonChip = React.forwardRef(function PersonChip({ person, link = true, className, ...props }, ref) {
+    const { personHref } = useSole();
+    const name = person ? personName(person) : FORMER_MEMBER;
+    const inner = (_jsxs(_Fragment, { children: [_jsx(Avatar, { person: person, size: 20 }), _jsx("span", { className: cn('truncate', !person && 'text-subtle-foreground'), children: name })] }));
+    const base = 'inline-flex max-w-full min-w-0 items-center gap-1.5 rounded-md px-1 py-0.5 text-body font-medium';
+    const href = link && person && !person.isBot ? personHref(person) : null;
+    if (!href) {
+        return (_jsx("span", { ref: ref, className: cn(base, className), ...props, children: inner }));
+    }
+    return (_jsx(SoleLink, { ref: ref, href: href, className: cn(base, 'transition-colors duration-[120ms] hover:bg-row-hover focus-visible:shadow-[var(--focus-ring)] focus-visible:outline-none', className), ...props, children: inner }));
+});
+PersonChip.displayName = 'PersonChip';

package/dist/components/sole/person-header.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { type SolePerson } from '../../lib/person.ts';
+export interface PersonHeaderProps extends Omit<React.ComponentPropsWithoutRef<'header'>, 'children'> {
+    person: SolePerson;
+    admin?: boolean;
+    /** "Payroll lead", the email, "Perth, 2 hours behind Sydney". Empty parts are dropped. */
+    meta?: ReadonlyArray<string | null | undefined | false>;
+    actions?: React.ReactNode;
+}
+export declare const PersonHeader: React.ForwardRefExoticComponent<PersonHeaderProps & React.RefAttributes<HTMLElement>>;
+export interface AvatarRowProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'title' | 'children'> {
+    person: SolePerson;
+    title: React.ReactNode;
+    body?: React.ReactNode;
+    actions?: React.ReactNode;
+}
+/**
+ * Avatar row (80.3 Profile): the 64px avatar with a 13/500 line and a 12px line beside it, and
+ * the buttons that change the picture (Change, Remove) on the right.
+ */
+export declare const AvatarRow: React.ForwardRefExoticComponent<AvatarRowProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/sole/person-header.js

@@ -0,0 +1,22 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { cn } from '../../lib/cn.js';
+import { personName } from '../../lib/person.js';
+import { Avatar } from './avatar.js';
+import { Pill } from './pill.js';
+const NO_META = [];
+export const PersonHeader = React.forwardRef(function PersonHeader({ person, admin = false, meta = NO_META, actions, className, ...props }, ref) {
+    // Each part once, so it can be its own key.
+    const parts = [...new Set(meta.filter((m) => typeof m === 'string' && m !== ''))];
+    return (_jsxs("header", { ref: ref, className: cn('flex min-w-0 items-center gap-4', className), ...props, children: [_jsx(Avatar, { person: person, size: 64 }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [_jsx("h1", { className: "truncate text-page text-foreground", children: personName(person) }), admin && _jsx(Pill, { tone: "neutral", children: "Admin" })] }), parts.length > 0 && (_jsx("p", { className: "mt-px truncate text-body text-subtle-foreground", children: parts.map((part, i) => (_jsxs("span", { children: [i > 0 && (_jsx("span", { "aria-hidden": "true", className: "px-[7px]", children: "\u00B7" })), part] }, part))) }))] }), actions && _jsx("div", { className: "flex shrink-0 items-center gap-2", children: actions })] }));
+});
+PersonHeader.displayName = 'PersonHeader';
+/**
+ * Avatar row (80.3 Profile): the 64px avatar with a 13/500 line and a 12px line beside it, and
+ * the buttons that change the picture (Change, Remove) on the right.
+ */
+export const AvatarRow = React.forwardRef(function AvatarRow({ person, title, body, actions, className, ...props }, ref) {
+    return (_jsxs("div", { ref: ref, className: cn('flex min-w-0 items-center gap-3.5', className), ...props, children: [_jsx(Avatar, { person: person, size: 64 }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { className: "text-body font-medium text-foreground", children: title }), body && _jsx("p", { className: "text-label font-normal text-subtle-foreground", children: body })] }), actions && _jsx("div", { className: "flex shrink-0 items-center gap-2", children: actions })] }));
+});
+AvatarRow.displayName = 'AvatarRow';

package/dist/components/sole/pill.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export type PillTone = 'success' | 'warning' | 'neutral' | 'info';
+export interface PillProps extends React.ComponentPropsWithoutRef<'span'> {
+    tone?: PillTone;
+    /** A 12px icon before the text. */
+    icon?: React.ReactNode;
+    children: React.ReactNode;
+}
+export declare const Pill: React.ForwardRefExoticComponent<PillProps & React.RefAttributes<HTMLSpanElement>>;