@openwarelabs/blocks 0.9.0 → 0.10.1

package/dist/shared/appShell.d.ts

@@ -0,0 +1,19 @@
+import type { Command } from "@openwarelabs/ui";
+import type { AppShellStateOptions, BlockMenuItem } from "./shared.types.js";
+/**
+ * What every app shell keeps: the current place (its own, unless `current` is given), the phone drawer, and the
+ * search, which ⌘K or Ctrl+K opens from anywhere when there are commands. Choosing a place closes the drawer.
+ */
+export declare function useAppShell({ current, defaultCurrent, onNavigate, commands }: AppShellStateOptions): {
+    active: string | undefined;
+    navigate: (id: string) => void;
+    navOpen: boolean;
+    setNavOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    searchOpen: boolean;
+    setSearchOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    hasSearch: boolean;
+    paletteCommands: Command[];
+    afterMenuSelect: (item: BlockMenuItem & {
+        page?: string;
+    }) => void;
+};

package/dist/shared/icons.d.cts

@@ -1,14 +1,60 @@
 import type { BlockIconProps } from "./shared.types.cjs";
-export declare const CheckIcon: ({ size, strokeWidth }: BlockIconProps) => import("react").JSX.Element;
-export declare const MailIcon: ({ size, strokeWidth }: BlockIconProps) => import("react").JSX.Element;
-export declare const DownloadIcon: ({ size, strokeWidth }: BlockIconProps) => import("react").JSX.Element;
-export declare const MenuIcon: ({ size, strokeWidth }: BlockIconProps) => import("react").JSX.Element;
-export declare const XIcon: ({ size, strokeWidth }: BlockIconProps) => import("react").JSX.Element;
-export declare const ChevronDownIcon: ({ size, strokeWidth }: BlockIconProps) => import("react").JSX.Element;
-export declare const ChevronRightIcon: ({ size, strokeWidth }: BlockIconProps) => import("react").JSX.Element;
-export declare const ArrowRightIcon: ({ size, strokeWidth }: BlockIconProps) => import("react").JSX.Element;
-export declare const MinusIcon: ({ size, strokeWidth }: BlockIconProps) => import("react").JSX.Element;
-export declare const SunIcon: ({ size, strokeWidth }: BlockIconProps) => import("react").JSX.Element;
-export declare const MoonIcon: ({ size, strokeWidth }: BlockIconProps) => import("react").JSX.Element;
-export declare const MonitorIcon: ({ size, strokeWidth }: BlockIconProps) => import("react").JSX.Element;
-export declare const CircleCheckIcon: ({ size, strokeWidth }: BlockIconProps) => import("react").JSX.Element;
+export declare const CheckIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const MailIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const DownloadIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const MenuIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const XIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const ChevronDownIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const ChevronRightIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const ArrowRightIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const MinusIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const SunIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const MoonIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const MonitorIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const CircleCheckIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const PauseIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const PlayIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const QuoteIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const ArrowLeftIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const CalendarDaysIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const ClockIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const MapPinIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const LinkIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const MailCheckIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const ShieldCheckIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const KeyRoundIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const EyeIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const EyeOffIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const PlusIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const EllipsisIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const CopyIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const UserMinusIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const RotateCwIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const SendIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const Trash2Icon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const ArchiveIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const ArchiveRestoreIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const ArrowLeftRightIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const RotateCcwIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const SearchIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const ChevronsUpDownIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const ChevronLeftIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const PanelRightIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const PanelLeftOpenIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const PanelLeftCloseIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const SearchXIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const MessageSquareIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const PencilIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const TriangleAlertIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const CreditCardIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const ArrowUpIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const CircleStopIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const SquarePenIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const StarIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const ListFilterIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const CloudOffIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const ArrowUpRightIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const BellRingIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const BellIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const CheckCheckIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const SettingsIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;

package/dist/shared/icons.d.ts

@@ -1,14 +1,60 @@
 import type { BlockIconProps } from "./shared.types.js";
-export declare const CheckIcon: ({ size, strokeWidth }: BlockIconProps) => import("react").JSX.Element;
-export declare const MailIcon: ({ size, strokeWidth }: BlockIconProps) => import("react").JSX.Element;
-export declare const DownloadIcon: ({ size, strokeWidth }: BlockIconProps) => import("react").JSX.Element;
-export declare const MenuIcon: ({ size, strokeWidth }: BlockIconProps) => import("react").JSX.Element;
-export declare const XIcon: ({ size, strokeWidth }: BlockIconProps) => import("react").JSX.Element;
-export declare const ChevronDownIcon: ({ size, strokeWidth }: BlockIconProps) => import("react").JSX.Element;
-export declare const ChevronRightIcon: ({ size, strokeWidth }: BlockIconProps) => import("react").JSX.Element;
-export declare const ArrowRightIcon: ({ size, strokeWidth }: BlockIconProps) => import("react").JSX.Element;
-export declare const MinusIcon: ({ size, strokeWidth }: BlockIconProps) => import("react").JSX.Element;
-export declare const SunIcon: ({ size, strokeWidth }: BlockIconProps) => import("react").JSX.Element;
-export declare const MoonIcon: ({ size, strokeWidth }: BlockIconProps) => import("react").JSX.Element;
-export declare const MonitorIcon: ({ size, strokeWidth }: BlockIconProps) => import("react").JSX.Element;
-export declare const CircleCheckIcon: ({ size, strokeWidth }: BlockIconProps) => import("react").JSX.Element;
+export declare const CheckIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const MailIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const DownloadIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const MenuIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const XIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const ChevronDownIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const ChevronRightIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const ArrowRightIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const MinusIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const SunIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const MoonIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const MonitorIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const CircleCheckIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const PauseIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const PlayIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const QuoteIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const ArrowLeftIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const CalendarDaysIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const ClockIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const MapPinIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const LinkIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const MailCheckIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const ShieldCheckIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const KeyRoundIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const EyeIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const EyeOffIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const PlusIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const EllipsisIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const CopyIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const UserMinusIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const RotateCwIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const SendIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const Trash2Icon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const ArchiveIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const ArchiveRestoreIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const ArrowLeftRightIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const RotateCcwIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const SearchIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const ChevronsUpDownIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const ChevronLeftIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const PanelRightIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const PanelLeftOpenIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const PanelLeftCloseIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const SearchXIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const MessageSquareIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const PencilIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const TriangleAlertIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const CreditCardIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const ArrowUpIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const CircleStopIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const SquarePenIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const StarIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const ListFilterIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const CloudOffIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const ArrowUpRightIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const BellRingIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const BellIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const CheckCheckIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;
+export declare const SettingsIcon: ({ size, strokeWidth, className }: BlockIconProps) => import("react").JSX.Element;

package/dist/shared/shared.types.d.cts

@@ -1,4 +1,5 @@
 import type { MouseEvent, ReactNode } from "react";
+import type { BadgeVariant, Command, TableColumn } from "@openwarelabs/ui";
 /**
  * A call to action. With `href` it's a link styled as a button, so it works with any router's links as an
  * ordinary <a>; without one it's a button that runs `onClick`.
@@ -57,6 +58,9 @@ export interface BlockActionButtonProps {
     /** lg for heroes and calls to action, sm for headers.
      * @default "lg" */
     size?: "sm" | "md" | "lg";
+    /** pill for marketing pages, rounded for application pages.
+     * @default "pill" */
+    shape?: "pill" | "rounded";
     className?: string;
     /** Runs after the action's own onClick, such as closing a menu. */
     onAfterClick?(): void;
@@ -72,6 +76,7 @@ export interface BlockIconProps {
     size?: number;
     /** @default 2 */
     strokeWidth?: number;
+    className?: string;
 }
 export interface BlockBrandLinkProps {
     brand: BlockBrand;
@@ -84,3 +89,126 @@ export interface FooterColumnsProps {
     /** For a link's badge. */
     badgeClassName?: string;
 }
+/** A way in with another account, such as GitHub or Google, as a button above the email form. */
+export interface SignInProvider {
+    /** Passed back to `onProviderSelect`: "github", "google". */
+    id: string;
+    /** The button's words: "Continue with GitHub". */
+    label: ReactNode;
+    /** A 16px mark before them. */
+    icon?: ReactNode;
+}
+/** One choice in a menu of actions. */
+export interface BlockMenuItem {
+    /** The item's words: name the action, in sentence case ("Archive project"). */
+    label: ReactNode;
+    /** A 15px icon before the label, usually from lucide-react. */
+    icon?: ReactNode;
+    /** What it does; the menu closes after it. */
+    onSelect?(): void;
+    /** Shows the item greyed out, so it can't be chosen right now. */
+    disabled?: boolean;
+    /** Red, for actions that delete or can't be undone. */
+    destructive?: boolean;
+    /** Draws a line above the item, starting a new group. */
+    separatorBefore?: boolean;
+}
+/** A button in an app's page: a page's primary action, a toolbar's button. */
+export interface BlockButton {
+    /** The button's words: name the action ("Deploy", "Invite people"). */
+    label: ReactNode;
+    /** A 16px icon before the label, usually from lucide-react. */
+    icon?: ReactNode;
+    /** What it does. */
+    onClick?(): void;
+    /** Shows it greyed out. */
+    disabled?: boolean;
+    /** Shows a spinner while what it started is under way. */
+    loading?: boolean;
+}
+/** A status shown as a badge: "Live", "Needs review". */
+export interface BlockStatus {
+    /** The badge's words. */
+    label: ReactNode;
+    /** Its colour: success, warning, danger, active (in progress) or neutral.
+     * @default "neutral" */
+    tone?: BadgeVariant;
+}
+/** A place in an app's navigation. */
+export interface AppNavItem {
+    /** Unique in the navigation; what `current` and `onNavigate` use. */
+    id: string;
+    /** Its name, as the item shows it. */
+    label: string;
+    /** A 15px icon before the label, usually from lucide-react, or a small coloured dot for a project. */
+    icon?: ReactNode;
+    /** A count or a badge at the item's end: unread messages, open reviews. */
+    count?: ReactNode;
+    /** Makes the item a link to this address instead of a button. */
+    href?: string;
+}
+/** A group of places in an app's navigation, under an optional heading. */
+export interface AppNavGroup {
+    /** Names the group for screen readers ("Workspace", "Projects"). */
+    label: string;
+    /** A small heading shown above the group. */
+    heading?: ReactNode;
+    /** Its places, in order. */
+    items: AppNavItem[];
+}
+/** A workspace the person can switch to, in the workspace menu. */
+export interface AppWorkspace {
+    /** Its name. */
+    name: string;
+    /** The one they're in: ticked in the menu. */
+    current?: boolean;
+    /** Switches to it. */
+    onSelect?(): void;
+}
+/** The person who's signed in. */
+export interface AppAccount {
+    /** Their name; its initials show when there's no picture. */
+    name: string;
+    /** Their email address, under the name. */
+    email?: string;
+    /** A photo URL. */
+    avatar?: string;
+}
+/** A choice in an app shell's menus. With `page`, choosing it opens that place, as a navigation item would. */
+export interface AppMenuItem extends BlockMenuItem {
+    /** The id of the place it opens ("settings"): it becomes current and the phone drawer closes. */
+    page?: string;
+}
+/** A command in an app shell's search (⌘K). With `page`, running it opens that place. */
+export interface AppCommand extends Omit<Command, "run"> {
+    /** What it does. */
+    run?(): void;
+    /** The id of the place it opens: it becomes current and the phone drawer closes. */
+    page?: string;
+}
+export interface BlockMenuItemsProps {
+    items: BlockMenuItem[];
+    /** Runs after an item's own onSelect. */
+    onAfterSelect?(item: BlockMenuItem): void;
+}
+/** A column of a block's table: a Table column that can step aside on smaller screens. */
+export interface BlockTableColumn<Row> extends TableColumn<Row> {
+    /** Hides the column under 1024px wide ("tablet") or under 760px ("phone"), to keep the table readable there. */
+    hideBelow?: "tablet" | "phone";
+}
+export interface AppShellStateOptions {
+    current?: string;
+    defaultCurrent?: string;
+    onNavigate?(id: string): void;
+    commands?: AppCommand[];
+}
+export interface AppWorkspaceItemsProps {
+    workspaces: AppWorkspace[];
+    onNewWorkspace?(): void;
+    /** The menu's heading. */
+    heading: ReactNode;
+    /** The last item's words. */
+    newWorkspace: ReactNode;
+    /** Keeps the unticked workspaces' names in line with the ticked one's. */
+    spacerClassName: string;
+}

package/dist/shared/shared.types.d.ts

@@ -1,4 +1,5 @@
 import type { MouseEvent, ReactNode } from "react";
+import type { BadgeVariant, Command, TableColumn } from "@openwarelabs/ui";
 /**
  * A call to action. With `href` it's a link styled as a button, so it works with any router's links as an
  * ordinary <a>; without one it's a button that runs `onClick`.
@@ -57,6 +58,9 @@ export interface BlockActionButtonProps {
     /** lg for heroes and calls to action, sm for headers.
      * @default "lg" */
     size?: "sm" | "md" | "lg";
+    /** pill for marketing pages, rounded for application pages.
+     * @default "pill" */
+    shape?: "pill" | "rounded";
     className?: string;
     /** Runs after the action's own onClick, such as closing a menu. */
     onAfterClick?(): void;
@@ -72,6 +76,7 @@ export interface BlockIconProps {
     size?: number;
     /** @default 2 */
     strokeWidth?: number;
+    className?: string;
 }
 export interface BlockBrandLinkProps {
     brand: BlockBrand;
@@ -84,3 +89,126 @@ export interface FooterColumnsProps {
     /** For a link's badge. */
     badgeClassName?: string;
 }
+/** A way in with another account, such as GitHub or Google, as a button above the email form. */
+export interface SignInProvider {
+    /** Passed back to `onProviderSelect`: "github", "google". */
+    id: string;
+    /** The button's words: "Continue with GitHub". */
+    label: ReactNode;
+    /** A 16px mark before them. */
+    icon?: ReactNode;
+}
+/** One choice in a menu of actions. */
+export interface BlockMenuItem {
+    /** The item's words: name the action, in sentence case ("Archive project"). */
+    label: ReactNode;
+    /** A 15px icon before the label, usually from lucide-react. */
+    icon?: ReactNode;
+    /** What it does; the menu closes after it. */
+    onSelect?(): void;
+    /** Shows the item greyed out, so it can't be chosen right now. */
+    disabled?: boolean;
+    /** Red, for actions that delete or can't be undone. */
+    destructive?: boolean;
+    /** Draws a line above the item, starting a new group. */
+    separatorBefore?: boolean;
+}
+/** A button in an app's page: a page's primary action, a toolbar's button. */
+export interface BlockButton {
+    /** The button's words: name the action ("Deploy", "Invite people"). */
+    label: ReactNode;
+    /** A 16px icon before the label, usually from lucide-react. */
+    icon?: ReactNode;
+    /** What it does. */
+    onClick?(): void;
+    /** Shows it greyed out. */
+    disabled?: boolean;
+    /** Shows a spinner while what it started is under way. */
+    loading?: boolean;
+}
+/** A status shown as a badge: "Live", "Needs review". */
+export interface BlockStatus {
+    /** The badge's words. */
+    label: ReactNode;
+    /** Its colour: success, warning, danger, active (in progress) or neutral.
+     * @default "neutral" */
+    tone?: BadgeVariant;
+}
+/** A place in an app's navigation. */
+export interface AppNavItem {
+    /** Unique in the navigation; what `current` and `onNavigate` use. */
+    id: string;
+    /** Its name, as the item shows it. */
+    label: string;
+    /** A 15px icon before the label, usually from lucide-react, or a small coloured dot for a project. */
+    icon?: ReactNode;
+    /** A count or a badge at the item's end: unread messages, open reviews. */
+    count?: ReactNode;
+    /** Makes the item a link to this address instead of a button. */
+    href?: string;
+}
+/** A group of places in an app's navigation, under an optional heading. */
+export interface AppNavGroup {
+    /** Names the group for screen readers ("Workspace", "Projects"). */
+    label: string;
+    /** A small heading shown above the group. */
+    heading?: ReactNode;
+    /** Its places, in order. */
+    items: AppNavItem[];
+}
+/** A workspace the person can switch to, in the workspace menu. */
+export interface AppWorkspace {
+    /** Its name. */
+    name: string;
+    /** The one they're in: ticked in the menu. */
+    current?: boolean;
+    /** Switches to it. */
+    onSelect?(): void;
+}
+/** The person who's signed in. */
+export interface AppAccount {
+    /** Their name; its initials show when there's no picture. */
+    name: string;
+    /** Their email address, under the name. */
+    email?: string;
+    /** A photo URL. */
+    avatar?: string;
+}
+/** A choice in an app shell's menus. With `page`, choosing it opens that place, as a navigation item would. */
+export interface AppMenuItem extends BlockMenuItem {
+    /** The id of the place it opens ("settings"): it becomes current and the phone drawer closes. */
+    page?: string;
+}
+/** A command in an app shell's search (⌘K). With `page`, running it opens that place. */
+export interface AppCommand extends Omit<Command, "run"> {
+    /** What it does. */
+    run?(): void;
+    /** The id of the place it opens: it becomes current and the phone drawer closes. */
+    page?: string;
+}
+export interface BlockMenuItemsProps {
+    items: BlockMenuItem[];
+    /** Runs after an item's own onSelect. */
+    onAfterSelect?(item: BlockMenuItem): void;
+}
+/** A column of a block's table: a Table column that can step aside on smaller screens. */
+export interface BlockTableColumn<Row> extends TableColumn<Row> {
+    /** Hides the column under 1024px wide ("tablet") or under 760px ("phone"), to keep the table readable there. */
+    hideBelow?: "tablet" | "phone";
+}
+export interface AppShellStateOptions {
+    current?: string;
+    defaultCurrent?: string;
+    onNavigate?(id: string): void;
+    commands?: AppCommand[];
+}
+export interface AppWorkspaceItemsProps {
+    workspaces: AppWorkspace[];
+    onNewWorkspace?(): void;
+    /** The menu's heading. */
+    heading: ReactNode;
+    /** The last item's words. */
+    newWorkspace: ReactNode;
+    /** Keeps the unticked workspaces' names in line with the ticked one's. */
+    spacerClassName: string;
+}

package/dist/shared/tableColumns.d.cts

@@ -0,0 +1,10 @@
+import type { BlockTableColumn } from "./shared.types.cjs";
+/**
+ * The data attributes that hide a table's columns on smaller screens: the positions of the columns to hide under
+ * 1024px and under 760px, counted as the cells are (from 1, after `offset` cells of its own such as checkboxes).
+ * Each block's stylesheet turns them into `display: none` for those cells.
+ */
+export declare function hiddenColumns<Row>(columns: Array<BlockTableColumn<Row>>, offset?: number): {
+    "data-hide-tablet": string | undefined;
+    "data-hide-phone": string | undefined;
+};

package/dist/shared/tableColumns.d.ts

@@ -0,0 +1,10 @@
+import type { BlockTableColumn } from "./shared.types.js";
+/**
+ * The data attributes that hide a table's columns on smaller screens: the positions of the columns to hide under
+ * 1024px and under 760px, counted as the cells are (from 1, after `offset` cells of its own such as checkboxes).
+ * Each block's stylesheet turns them into `display: none` for those cells.
+ */
+export declare function hiddenColumns<Row>(columns: Array<BlockTableColumn<Row>>, offset?: number): {
+    "data-hide-tablet": string | undefined;
+    "data-hide-phone": string | undefined;
+};

package/dist/sign-in/SignIn01/SignIn01.d.cts

@@ -0,0 +1,3 @@
+import type { SignIn01Props } from "./SignIn01.types.cjs";
+/** One card in the middle of the window: the mark and heading above it, other accounts and the email form on it. */
+export declare function SignIn01({ title, description, logo, providers, onProviderSelect, onSubmit, forgotPasswordHref, footer, labels, className, ...props }: SignIn01Props): import("react").JSX.Element;

package/dist/sign-in/SignIn01/SignIn01.d.ts

@@ -0,0 +1,3 @@
+import type { SignIn01Props } from "./SignIn01.types.js";
+/** One card in the middle of the window: the mark and heading above it, other accounts and the email form on it. */
+export declare function SignIn01({ title, description, logo, providers, onProviderSelect, onSubmit, forgotPasswordHref, footer, labels, className, ...props }: SignIn01Props): import("react").JSX.Element;

package/dist/sign-in/SignIn01/SignIn01.types.d.cts

@@ -0,0 +1,52 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { SignInProvider } from "../../shared/shared.types.cjs";
+export interface SignIn01Labels {
+    /** @default "Email" */
+    email?: string;
+    /** @default "maya@example.com" */
+    emailPlaceholder?: string;
+    /** @default "Password" */
+    password?: string;
+    /** The link beside the password's label. @default "Forgot password?" */
+    forgotPassword?: string;
+    /** The form's button. @default "Sign in" */
+    submit?: string;
+    /** The word on the line between the providers and the form. @default "or" */
+    separator?: string;
+    /** @default "Enter the email address you signed up with." */
+    emailEmpty?: string;
+    /** @default "That doesn't look like an email address." */
+    emailInvalid?: string;
+    /** @default "Enter your password." */
+    passwordEmpty?: string;
+}
+/** What was typed into the form. */
+export interface SignIn01Values {
+    /** The email address, trimmed. */
+    email: string;
+    password: string;
+}
+export interface SignIn01Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children" | "onSubmit"> {
+    /** The page's heading: "Sign in to Acme". */
+    title: ReactNode;
+    /** A line under it. */
+    description?: ReactNode;
+    /** The product's mark above the heading: an `<img>` or an inline SVG about 40px square. */
+    logo?: ReactNode;
+    /** Buttons above the form for signing in with another account. Leave it out for the form alone. */
+    providers?: SignInProvider[];
+    /** Starts signing in with a provider, usually by sending the browser there. While its promise is pending the button shows a spinner. */
+    onProviderSelect?(id: string): void | Promise<void>;
+    /** Signs in with the email and password, once both are filled in. While its promise is pending the button shows a spinner; if it throws, its message shows under the password. */
+    onSubmit?(values: SignIn01Values): void | Promise<void>;
+    /** Where "Forgot password?" goes. Without it there's no link. */
+    forgotPasswordHref?: string;
+    /** A line under the card, such as "New to Acme? Create an account" with its link. */
+    footer?: ReactNode;
+    /** Words that aren't content (the fields' labels, the button, the messages), in English unless you pass your own. */
+    labels?: SignIn01Labels;
+}
+export interface SignIn01Errors {
+    email?: string;
+    password?: string;
+}

package/dist/sign-in/SignIn01/SignIn01.types.d.ts

@@ -0,0 +1,52 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { SignInProvider } from "../../shared/shared.types.js";
+export interface SignIn01Labels {
+    /** @default "Email" */
+    email?: string;
+    /** @default "maya@example.com" */
+    emailPlaceholder?: string;
+    /** @default "Password" */
+    password?: string;
+    /** The link beside the password's label. @default "Forgot password?" */
+    forgotPassword?: string;
+    /** The form's button. @default "Sign in" */
+    submit?: string;
+    /** The word on the line between the providers and the form. @default "or" */
+    separator?: string;
+    /** @default "Enter the email address you signed up with." */
+    emailEmpty?: string;
+    /** @default "That doesn't look like an email address." */
+    emailInvalid?: string;
+    /** @default "Enter your password." */
+    passwordEmpty?: string;
+}
+/** What was typed into the form. */
+export interface SignIn01Values {
+    /** The email address, trimmed. */
+    email: string;
+    password: string;
+}
+export interface SignIn01Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children" | "onSubmit"> {
+    /** The page's heading: "Sign in to Acme". */
+    title: ReactNode;
+    /** A line under it. */
+    description?: ReactNode;
+    /** The product's mark above the heading: an `<img>` or an inline SVG about 40px square. */
+    logo?: ReactNode;
+    /** Buttons above the form for signing in with another account. Leave it out for the form alone. */
+    providers?: SignInProvider[];
+    /** Starts signing in with a provider, usually by sending the browser there. While its promise is pending the button shows a spinner. */
+    onProviderSelect?(id: string): void | Promise<void>;
+    /** Signs in with the email and password, once both are filled in. While its promise is pending the button shows a spinner; if it throws, its message shows under the password. */
+    onSubmit?(values: SignIn01Values): void | Promise<void>;
+    /** Where "Forgot password?" goes. Without it there's no link. */
+    forgotPasswordHref?: string;
+    /** A line under the card, such as "New to Acme? Create an account" with its link. */
+    footer?: ReactNode;
+    /** Words that aren't content (the fields' labels, the button, the messages), in English unless you pass your own. */
+    labels?: SignIn01Labels;
+}
+export interface SignIn01Errors {
+    email?: string;
+    password?: string;
+}

package/dist/sign-in/SignIn02/SignIn02.d.cts

@@ -0,0 +1,3 @@
+import type { SignIn02Props } from "./SignIn02.types.cjs";
+/** Signing up: the form on one side of the window, a midnight plate with the product and a quote on the other. */
+export declare function SignIn02({ brand, title, description, providers, onProviderSelect, onSubmit, passwordMinLength, terms, footer, eyebrow, headline, visual, quote, labels, className, ...props }: SignIn02Props): import("react").JSX.Element;

package/dist/sign-in/SignIn02/SignIn02.d.ts

@@ -0,0 +1,3 @@
+import type { SignIn02Props } from "./SignIn02.types.js";
+/** Signing up: the form on one side of the window, a midnight plate with the product and a quote on the other. */
+export declare function SignIn02({ brand, title, description, providers, onProviderSelect, onSubmit, passwordMinLength, terms, footer, eyebrow, headline, visual, quote, labels, className, ...props }: SignIn02Props): import("react").JSX.Element;