@openwarelabs/ui 0.0.0-stage → 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Alexander Silver
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,101 @@
-# Temporary Holding Version
+# Openware UI
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+React components and design tokens with a quiet, tactile look: a midnight brand colour, a brass accent kept small, cool slate surfaces, buttons that press in, and Inter. Light and dark themes, and a brand colour you can swap.
+
+## Docs
+
+```sh
+npm install         # installs and builds dist/
+npm run dev         # the docs site: http://localhost:5173
+npm run docs:build  # the same site as static files in docs-dist/
+```
+
+The docs have a page for every component, with live examples, the code to copy, keyboard behaviour, accessibility notes and a props table read from the TypeScript source, plus guides to installation, theming, colours, type and tokens. The Blocks section has 92 whole page sections (headers, heroes, pricing, settings, sign-in, chat and more), each live in a frame you can narrow to a tablet or a phone, with its `.tsx` and `.css` to copy. Search with ⌘K or Ctrl+K. They rebuild as you edit `src/`, `docs/` or `tokens/tokens.json`.
+
+To document a new component, add `docs/examples/<Name>.tsx`: a `meta` export (title, category, description, source file) and one exported function per example. The function's JSDoc becomes the example's description, and its code is what the page shows.
+
+To add a block, list it in `docs/app/blocks.tsx` and write `docs/blocks/<category>/<Name>.tsx` and `<Name>.css`; `docs/blocks/README.md` has the rules, and `npm run blocks:check` checks them.
+
+## Install in a project
+
+```sh
+npm install @openwarelabs/ui
+```
+
+React 18 or 19 is a peer dependency. Toasts come from [sonner](https://sonner.emilkowal.ski) and the colour picker from [react-colorful](https://github.com/omgovich/react-colorful), both installed with it.
+
+## Set up once
+
+```tsx
+import "@openwarelabs/ui/fonts.css";   // Inter and Geist Mono, self-hosted
+import "@openwarelabs/ui/styles.css";  // tokens + components
+```
+
+```html
+<html data-theme="light">          <!-- "light", "dark", or "system" to follow the OS -->
+  <body class="ow-app">            <!-- the system's font, 14px text, colours and canvas -->
+```
+
+Then use the components:
+
+```tsx
+import { Button, Field, Input, Toaster, toast } from "@openwarelabs/ui";
+
+<Field label="Project name" hint="Letters, numbers and dashes.">
+  <Input placeholder="recipe-app" />
+</Field>
+<Button variant="primary" onClick={() => toast.success("Saved")}>Save</Button>
+<Toaster />
+```
+
+## Components
+
+70 components, each with a page in the docs.
+
+| Group | Components |
+| --- | --- |
+| Buttons | `Button` (primary, secondary, ghost, danger; sm, md, lg; `loading`; `shape="pill"`), `buttonClassName()` for links, `ButtonGroup`, `ToggleButton`, `CloseButton`, `CopyButton`, `SegmentedControl`, `ChoiceCard` |
+| Forms | `Field`, `Fieldset`, `Input` (start and end content), `SearchField`, `NumberField`, `InputOTP`, `Textarea` (`autoGrow`), `Select`, `Combobox`, `Checkbox`, `CheckboxGroup`, `RadioGroup` (plain or cards), `Switch`, `Slider` (one value or a range), `ColorPicker`, `ColorField`, `FileDropZone` |
+| Dates | `Calendar`, `DatePicker` |
+| Feedback | `Alert`, `Badge`, `ProgressBar`, `ProgressCircle`, `Spinner`, `Skeleton`, `SkeletonRows`, `Toaster` + `toast()` (sonner: stacked, swipeable, with actions and promises), `Tooltip` |
+| Overlays | `Dialog`, `ConfirmDialog`, `Drawer`, `Popover`, `Menu` + `MenuItem`, `CommandPalette` |
+| Navigation | `Tabs`, `Accordion`, `Disclosure`, `Breadcrumbs`, `Link`, `Pagination`, `Steps`, `NavList` + `NavItem` |
+| Data display | `Table` (sorting, selection), `Stat`, `FileTree`, `EmptyState`, `Tag`, `ColorSwatch`, `Avatar`, `AvatarGroup`, `User`, `Kbd`, `Code`, `CodeBlock`, `Snippet` |
+| Layout | `Card`, `SettingsRow`, `Stack`, `Separator`, `ScrollShadow`, `VisuallyHidden` |
+| Marketing | `SiteHeader`, `SectionHeading`, `Chip`, `DotGrid` |
+
+Hooks for your own components: `useControllableState`, `useFloating` (top-layer positioning that flips), `usePresence` (keeps a layer mounted while it animates out), `useDismiss`, `useModalDialog`, `useMenuKeyboard`. Every prop is typed and described, so your editor explains it on hover.
+
+## Tokens
+
+Every colour, space, radius, shadow and weight is a CSS variable named `--ow-…` (`var(--ow-surface)`, `var(--ow-radius-container)`), and every text style is a class (`ow-type-section-title`, `ow-type-lead`). `tokens/tokens.json` is the single source; `npm run tokens` regenerates the CSS and `npm run contrast` checks every text and focus pair in both themes.
+
+**Rebrand** by overriding the eleven brand steps; the primary button, focus ring, checkboxes, tints and the primary button's glow follow, in both themes. `brandScale` builds the steps from any colour, on Openware's lightness curve so the contrast holds, and `applyBrand` puts them on the page:
+
+```ts
+import { applyBrand, brandCss, brandPresets, brandScale } from "@openwarelabs/ui";
+
+applyBrand("#0d9488");               // the whole page, from one colour
+applyBrand(brandPresets[2]!.scale);  // or a preset: Midnight, Ocean, Teal, Forest, Plum, Rose, Ember
+brandCss("#0d9488");                 // ":root { --ow-brand-50: …; }" for a stylesheet
+```
+
+The docs' header has a colour picker that does this live, and the Theming page shows each preset in both themes.
+
+**Motion** uses the timing tokens: things enter with `ow-ease-emphasized` and leave faster with `ow-ease-exit`, and knobs and indicators settle with `ow-ease-spring`. Menus, popovers, listboxes and tooltips grow from their trigger and shrink back into it; dialogs and drawers animate both ways; segmented controls and tabs slide their indicator. Everything stands still under `prefers-reduced-motion`.
+
+**Tailwind v4**: `@import "@openwarelabs/ui/tailwind.css";` after `@import "tailwindcss";` gives you `bg-surface`, `text-text-muted`, `rounded-container`, `p-lg`, `font-action`, `shadow-menu` and the rest, plus a `dark:` variant tied to `data-theme="dark"`.
+
+**No bundler?** `dist/openware-ui.iife.js` sets `window.OpenwareUI`, reading React from `window.React`. A CDN serves it straight from npm: `https://cdn.jsdelivr.net/npm/@openwarelabs/ui/dist/openware-ui.iife.js`, with `dist/styles.css` beside it.
+
+## Rules worth keeping
+
+- One primary button per view. Everything else is secondary or ghost.
+- Borders before shadows: cards are `--ow-surface` with a 1px `--ow-border`. Shadows are for things that float or press.
+- Brass stays small: dots, a star, the pointer on the grid. Never a button.
+- Sentence case for every label. Name the action on the button ("Delete project"), never "OK".
+- Icons are [Lucide](https://lucide.dev) (`lucide-react`), 16px, 2px stroke; icon-only buttons need an `aria-label`.
+
+## Credits
+
+Icons drawn inside the components are Lucide shapes (ISC). Inter and Geist Mono are under the SIL Open Font License 1.1. Toasts use sonner and the colour picker uses react-colorful, both under the MIT licence.

package/dist/components/Accordion/Accordion.d.cts

@@ -0,0 +1,54 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+export interface DisclosureProps {
+    title: ReactNode;
+    /** A muted line under the title. */
+    subtitle?: ReactNode;
+    /** A 15px icon between the chevron and the title. */
+    icon?: ReactNode;
+    /** Controls on the right of the header, outside the toggle (a ghost Button). */
+    actions?: ReactNode;
+    open?: boolean;
+    /** @default false */
+    defaultOpen?: boolean;
+    onOpenChange?(open: boolean): void;
+    /** `card` is a bordered surface; `plain` is just the toggle and its content, for "Show details".
+     * @default "card" */
+    variant?: "card" | "plain";
+    /** The heading level of the title, to fit the page's outline.
+     * @default 3 */
+    headingLevel?: 2 | 3 | 4 | 5 | 6;
+    disabled?: boolean;
+    children: ReactNode;
+    className?: string;
+}
+/** A section that opens and closes under its title, like "3 files changed" in a code review. */
+export declare function Disclosure({ open, defaultOpen, onOpenChange, variant, headingLevel, className, ...props }: DisclosureProps): import("react").JSX.Element;
+export interface AccordionProps extends Omit<HTMLAttributes<HTMLDivElement>, "defaultValue" | "onChange"> {
+    /** `single` keeps one item open at a time; `multiple` lets any number be open.
+     * @default "single" */
+    type?: "single" | "multiple";
+    /** The open items' values. */
+    value?: string[];
+    /** @default [] */
+    defaultValue?: string[];
+    onValueChange?(value: string[]): void;
+    /** `bordered` puts the items in one card with hairlines between; `separated` gives each its own card.
+     * @default "bordered" */
+    variant?: "bordered" | "separated";
+    /** @default 3 */
+    headingLevel?: 2 | 3 | 4 | 5 | 6;
+    children: ReactNode;
+}
+/** A stack of Disclosures, such as an FAQ. Up and Down move between the headers. */
+export declare function Accordion({ type, value, defaultValue, onValueChange, variant, headingLevel, className, children, onKeyDown, ...props }: AccordionProps): import("react").JSX.Element;
+export interface AccordionItemProps {
+    value: string;
+    title: ReactNode;
+    subtitle?: ReactNode;
+    icon?: ReactNode;
+    disabled?: boolean;
+    children: ReactNode;
+    className?: string;
+}
+/** One section of an Accordion. */
+export declare function AccordionItem({ value, ...props }: AccordionItemProps): import("react").JSX.Element;

package/dist/components/Accordion/Accordion.d.ts

@@ -0,0 +1,54 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+export interface DisclosureProps {
+    title: ReactNode;
+    /** A muted line under the title. */
+    subtitle?: ReactNode;
+    /** A 15px icon between the chevron and the title. */
+    icon?: ReactNode;
+    /** Controls on the right of the header, outside the toggle (a ghost Button). */
+    actions?: ReactNode;
+    open?: boolean;
+    /** @default false */
+    defaultOpen?: boolean;
+    onOpenChange?(open: boolean): void;
+    /** `card` is a bordered surface; `plain` is just the toggle and its content, for "Show details".
+     * @default "card" */
+    variant?: "card" | "plain";
+    /** The heading level of the title, to fit the page's outline.
+     * @default 3 */
+    headingLevel?: 2 | 3 | 4 | 5 | 6;
+    disabled?: boolean;
+    children: ReactNode;
+    className?: string;
+}
+/** A section that opens and closes under its title, like "3 files changed" in a code review. */
+export declare function Disclosure({ open, defaultOpen, onOpenChange, variant, headingLevel, className, ...props }: DisclosureProps): import("react").JSX.Element;
+export interface AccordionProps extends Omit<HTMLAttributes<HTMLDivElement>, "defaultValue" | "onChange"> {
+    /** `single` keeps one item open at a time; `multiple` lets any number be open.
+     * @default "single" */
+    type?: "single" | "multiple";
+    /** The open items' values. */
+    value?: string[];
+    /** @default [] */
+    defaultValue?: string[];
+    onValueChange?(value: string[]): void;
+    /** `bordered` puts the items in one card with hairlines between; `separated` gives each its own card.
+     * @default "bordered" */
+    variant?: "bordered" | "separated";
+    /** @default 3 */
+    headingLevel?: 2 | 3 | 4 | 5 | 6;
+    children: ReactNode;
+}
+/** A stack of Disclosures, such as an FAQ. Up and Down move between the headers. */
+export declare function Accordion({ type, value, defaultValue, onValueChange, variant, headingLevel, className, children, onKeyDown, ...props }: AccordionProps): import("react").JSX.Element;
+export interface AccordionItemProps {
+    value: string;
+    title: ReactNode;
+    subtitle?: ReactNode;
+    icon?: ReactNode;
+    disabled?: boolean;
+    children: ReactNode;
+    className?: string;
+}
+/** One section of an Accordion. */
+export declare function AccordionItem({ value, ...props }: AccordionItemProps): import("react").JSX.Element;

package/dist/components/Alert/Alert.d.cts

@@ -0,0 +1,18 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export type AlertVariant = "info" | "success" | "warning" | "danger" | "neutral";
+export interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    /** info for news, success for something done, warning for something that needs the person, danger for something that failed.
+     * @default "info" */
+    variant?: AlertVariant;
+    /** A short bold line. */
+    title?: ReactNode;
+    /** Replaces the variant's icon; false hides it. */
+    icon?: ReactNode | false;
+    /** Buttons under the text, usually small ones. */
+    actions?: ReactNode;
+    /** Shows a ✕ that calls this. */
+    onClose?(): void;
+    children?: ReactNode;
+}
+/** A message inside the page about the page: a notice, a warning before an action, an error that blocks the work. */
+export declare function Alert({ variant, title, icon, actions, onClose, children, className, role, ...props }: AlertProps): import("react").JSX.Element;

package/dist/components/Alert/Alert.d.ts

@@ -0,0 +1,18 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export type AlertVariant = "info" | "success" | "warning" | "danger" | "neutral";
+export interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    /** info for news, success for something done, warning for something that needs the person, danger for something that failed.
+     * @default "info" */
+    variant?: AlertVariant;
+    /** A short bold line. */
+    title?: ReactNode;
+    /** Replaces the variant's icon; false hides it. */
+    icon?: ReactNode | false;
+    /** Buttons under the text, usually small ones. */
+    actions?: ReactNode;
+    /** Shows a ✕ that calls this. */
+    onClose?(): void;
+    children?: ReactNode;
+}
+/** A message inside the page about the page: a notice, a warning before an action, an error that blocks the work. */
+export declare function Alert({ variant, title, icon, actions, onClose, children, className, role, ...props }: AlertProps): import("react").JSX.Element;

package/dist/components/Avatar/Avatar.d.cts

@@ -0,0 +1,14 @@
+export interface AvatarProps {
+    /** The person's name; its initials show when there's no image. */
+    name: string;
+    /** A photo URL. If it fails to load, the initials show instead. */
+    src?: string;
+    /** sm 24px, md 28px, lg 36px.
+     * @default "md" */
+    size?: "sm" | "md" | "lg";
+    /** Give it when the avatar stands alone; beside the name, leave it out and it's hidden from screen readers. */
+    label?: string;
+    className?: string;
+}
+/** A round picture of a person: their photo, else their initials on the brand colour, else a person icon. */
+export declare function Avatar({ name, src, size, label, className }: AvatarProps): import("react").JSX.Element;

package/dist/components/Avatar/Avatar.d.ts

@@ -0,0 +1,14 @@
+export interface AvatarProps {
+    /** The person's name; its initials show when there's no image. */
+    name: string;
+    /** A photo URL. If it fails to load, the initials show instead. */
+    src?: string;
+    /** sm 24px, md 28px, lg 36px.
+     * @default "md" */
+    size?: "sm" | "md" | "lg";
+    /** Give it when the avatar stands alone; beside the name, leave it out and it's hidden from screen readers. */
+    label?: string;
+    className?: string;
+}
+/** A round picture of a person: their photo, else their initials on the brand colour, else a person icon. */
+export declare function Avatar({ name, src, size, label, className }: AvatarProps): import("react").JSX.Element;

package/dist/components/Avatar/AvatarGroup.d.cts

@@ -0,0 +1,28 @@
+import { type ReactNode } from "react";
+import { type AvatarProps } from "./Avatar.cjs";
+export interface AvatarGroupProps {
+    /** Avatars. */
+    children: ReactNode;
+    /** Shows this many, then a "+3" count.
+     * @default 4 */
+    max?: number;
+    /** Applied to every avatar in the group.
+     * @default "md" */
+    size?: AvatarProps["size"];
+    /** Names the group for screen readers, e.g. "5 people on this project". */
+    label?: string;
+    className?: string;
+}
+/** Overlapping avatars for the people on something, with a count for the rest. */
+export declare function AvatarGroup({ children, max, size, label, className }: AvatarGroupProps): import("react").JSX.Element;
+export interface UserProps {
+    name: string;
+    /** A second line: an email, a role. */
+    description?: ReactNode;
+    src?: string;
+    /** @default "md" */
+    size?: AvatarProps["size"];
+    className?: string;
+}
+/** A person: avatar, name and a line about them, as in an account menu. */
+export declare function User({ name, description, src, size, className }: UserProps): import("react").JSX.Element;

package/dist/components/Avatar/AvatarGroup.d.ts

@@ -0,0 +1,28 @@
+import { type ReactNode } from "react";
+import { type AvatarProps } from "./Avatar.js";
+export interface AvatarGroupProps {
+    /** Avatars. */
+    children: ReactNode;
+    /** Shows this many, then a "+3" count.
+     * @default 4 */
+    max?: number;
+    /** Applied to every avatar in the group.
+     * @default "md" */
+    size?: AvatarProps["size"];
+    /** Names the group for screen readers, e.g. "5 people on this project". */
+    label?: string;
+    className?: string;
+}
+/** Overlapping avatars for the people on something, with a count for the rest. */
+export declare function AvatarGroup({ children, max, size, label, className }: AvatarGroupProps): import("react").JSX.Element;
+export interface UserProps {
+    name: string;
+    /** A second line: an email, a role. */
+    description?: ReactNode;
+    src?: string;
+    /** @default "md" */
+    size?: AvatarProps["size"];
+    className?: string;
+}
+/** A person: avatar, name and a line about them, as in an account menu. */
+export declare function User({ name, description, src, size, className }: UserProps): import("react").JSX.Element;

package/dist/components/Badge/Badge.d.cts

@@ -0,0 +1,13 @@
+import type { HTMLAttributes, ReactNode } from "react";
+/** `active` is for work in progress, so it isn't confused with `warning` (something needs you). */
+export type BadgeVariant = "neutral" | "active" | "success" | "warning" | "danger";
+export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    /** A 12px icon before the text. */
+    icon?: ReactNode;
+    /** @default "md" */
+    size?: "sm" | "md" | "lg";
+    /** @default "neutral" */
+    variant?: BadgeVariant;
+}
+/** A pill-shaped status label: one or two words, with an optional icon. */
+export declare function Badge({ children, className, icon, size, variant, ...spanProps }: BadgeProps): import("react").JSX.Element;

package/dist/components/Badge/Badge.d.ts

@@ -0,0 +1,13 @@
+import type { HTMLAttributes, ReactNode } from "react";
+/** `active` is for work in progress, so it isn't confused with `warning` (something needs you). */
+export type BadgeVariant = "neutral" | "active" | "success" | "warning" | "danger";
+export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    /** A 12px icon before the text. */
+    icon?: ReactNode;
+    /** @default "md" */
+    size?: "sm" | "md" | "lg";
+    /** @default "neutral" */
+    variant?: BadgeVariant;
+}
+/** A pill-shaped status label: one or two words, with an optional icon. */
+export declare function Badge({ children, className, icon, size, variant, ...spanProps }: BadgeProps): import("react").JSX.Element;

package/dist/components/Breadcrumbs/Breadcrumbs.d.cts

@@ -0,0 +1,33 @@
+import { type AnchorHTMLAttributes, type MouseEvent, type ReactNode } from "react";
+export interface BreadcrumbItem {
+    label: ReactNode;
+    /** Where it goes. The last item is the current page and isn't a link. */
+    href?: string;
+    onClick?(event: MouseEvent<HTMLElement>): void;
+}
+export interface BreadcrumbsProps {
+    items: BreadcrumbItem[];
+    /** @default "chevron" */
+    separator?: "chevron" | "slash";
+    /** Names the trail for screen readers.
+     * @default "Breadcrumb" */
+    label?: string;
+    className?: string;
+}
+/** Where the current page sits: a trail of links from the top level down. */
+export declare function Breadcrumbs({ items, separator, label, className }: BreadcrumbsProps): import("react").JSX.Element;
+export interface LinkStyleOptions {
+    /** `default` underlines in a hairline and turns brass on hover; `muted` is quieter, for footnotes; `standalone` has no underline until hovered, for lists of links.
+     * @default "default" */
+    variant?: "default" | "muted" | "standalone";
+}
+export interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement>, LinkStyleOptions {
+    /** Opens in a new tab with an ↗ arrow, for links that leave your site.
+     * @default false */
+    external?: boolean;
+    children?: ReactNode;
+}
+/** The class names of a link, for a router's own <Link>: `<RouterLink className={linkClassName()}>`. */
+export declare function linkClassName({ variant }?: LinkStyleOptions): string;
+/** A text link. Its hover turns brass, the one place brass is text on a light ground. */
+export declare const Link: import("react").ForwardRefExoticComponent<LinkProps & import("react").RefAttributes<HTMLAnchorElement>>;

package/dist/components/Breadcrumbs/Breadcrumbs.d.ts

@@ -0,0 +1,33 @@
+import { type AnchorHTMLAttributes, type MouseEvent, type ReactNode } from "react";
+export interface BreadcrumbItem {
+    label: ReactNode;
+    /** Where it goes. The last item is the current page and isn't a link. */
+    href?: string;
+    onClick?(event: MouseEvent<HTMLElement>): void;
+}
+export interface BreadcrumbsProps {
+    items: BreadcrumbItem[];
+    /** @default "chevron" */
+    separator?: "chevron" | "slash";
+    /** Names the trail for screen readers.
+     * @default "Breadcrumb" */
+    label?: string;
+    className?: string;
+}
+/** Where the current page sits: a trail of links from the top level down. */
+export declare function Breadcrumbs({ items, separator, label, className }: BreadcrumbsProps): import("react").JSX.Element;
+export interface LinkStyleOptions {
+    /** `default` underlines in a hairline and turns brass on hover; `muted` is quieter, for footnotes; `standalone` has no underline until hovered, for lists of links.
+     * @default "default" */
+    variant?: "default" | "muted" | "standalone";
+}
+export interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement>, LinkStyleOptions {
+    /** Opens in a new tab with an ↗ arrow, for links that leave your site.
+     * @default false */
+    external?: boolean;
+    children?: ReactNode;
+}
+/** The class names of a link, for a router's own <Link>: `<RouterLink className={linkClassName()}>`. */
+export declare function linkClassName({ variant }?: LinkStyleOptions): string;
+/** A text link. Its hover turns brass, the one place brass is text on a light ground. */
+export declare const Link: import("react").ForwardRefExoticComponent<LinkProps & import("react").RefAttributes<HTMLAnchorElement>>;

package/dist/components/Button/Button.d.cts

@@ -0,0 +1,42 @@
+import { type ButtonHTMLAttributes, type ReactNode } from "react";
+export type ButtonVariant = "primary" | "secondary" | "ghost" | "danger";
+export type ButtonSize = "sm" | "md" | "lg";
+/** `rounded` is the app's 8px corner; `pill` is the marketing site's. */
+export type ButtonShape = "rounded" | "pill";
+export interface ButtonStyleOptions {
+    /** primary for the one main action, secondary for the rest, ghost for low-stakes actions, danger for destructive ones.
+     * @default "secondary" */
+    variant?: ButtonVariant;
+    /** sm 32px, md 40px, lg 44px (36, 40 and 46px as pills).
+     * @default "md" */
+    size?: ButtonSize;
+    /** @default "rounded" */
+    shape?: ButtonShape;
+    /** A square button holding only an icon. Give it an aria-label.
+     * @default false */
+    iconOnly?: boolean;
+}
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, ButtonStyleOptions {
+    /** An icon before the label, usually a 16px lucide-react icon. */
+    startIcon?: ReactNode;
+    /** An icon after the label, such as an arrow or a chevron. */
+    endIcon?: ReactNode;
+    /** Keyboard shortcut shown at the end, e.g. "⌘N". Only pass one that actually works. */
+    shortcut?: string;
+    /** Shows a spinner in place of the start icon and disables the button, keeping its width.
+     * @default false */
+    loading?: boolean;
+    /** Stretches the button to its container's width.
+     * @default false */
+    fullWidth?: boolean;
+}
+/**
+ * The class names of a button, for things that must be another element: a router <Link>, an <a>.
+ * `<Link className={buttonClassName({ variant: "primary" })}>Pricing</Link>`
+ */
+export declare function buttonClassName({ variant, size, shape, iconOnly, }?: ButtonStyleOptions): string;
+/**
+ * A tactile button: a light top-to-bottom gradient, a highlight along the top edge and a soft shadow,
+ * pressed in by a pixel on click.
+ */
+export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/Button/Button.d.ts

@@ -0,0 +1,42 @@
+import { type ButtonHTMLAttributes, type ReactNode } from "react";
+export type ButtonVariant = "primary" | "secondary" | "ghost" | "danger";
+export type ButtonSize = "sm" | "md" | "lg";
+/** `rounded` is the app's 8px corner; `pill` is the marketing site's. */
+export type ButtonShape = "rounded" | "pill";
+export interface ButtonStyleOptions {
+    /** primary for the one main action, secondary for the rest, ghost for low-stakes actions, danger for destructive ones.
+     * @default "secondary" */
+    variant?: ButtonVariant;
+    /** sm 32px, md 40px, lg 44px (36, 40 and 46px as pills).
+     * @default "md" */
+    size?: ButtonSize;
+    /** @default "rounded" */
+    shape?: ButtonShape;
+    /** A square button holding only an icon. Give it an aria-label.
+     * @default false */
+    iconOnly?: boolean;
+}
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, ButtonStyleOptions {
+    /** An icon before the label, usually a 16px lucide-react icon. */
+    startIcon?: ReactNode;
+    /** An icon after the label, such as an arrow or a chevron. */
+    endIcon?: ReactNode;
+    /** Keyboard shortcut shown at the end, e.g. "⌘N". Only pass one that actually works. */
+    shortcut?: string;
+    /** Shows a spinner in place of the start icon and disables the button, keeping its width.
+     * @default false */
+    loading?: boolean;
+    /** Stretches the button to its container's width.
+     * @default false */
+    fullWidth?: boolean;
+}
+/**
+ * The class names of a button, for things that must be another element: a router <Link>, an <a>.
+ * `<Link className={buttonClassName({ variant: "primary" })}>Pricing</Link>`
+ */
+export declare function buttonClassName({ variant, size, shape, iconOnly, }?: ButtonStyleOptions): string;
+/**
+ * A tactile button: a light top-to-bottom gradient, a highlight along the top edge and a soft shadow,
+ * pressed in by a pixel on click.
+ */
+export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/Button/ButtonGroup.d.cts

@@ -0,0 +1,33 @@
+import { type ButtonHTMLAttributes, type HTMLAttributes } from "react";
+import { type ButtonProps } from "./Button.cjs";
+export interface ButtonGroupProps extends HTMLAttributes<HTMLDivElement> {
+    /** Joins the buttons into one control with shared borders. Off, they sit 8px apart.
+     * @default true */
+    attached?: boolean;
+    /** @default "horizontal" */
+    orientation?: "horizontal" | "vertical";
+}
+/** Buttons that belong together: a toolbar's actions, or a split choice like "Day · Week · Month". */
+export declare function ButtonGroup({ attached, orientation, className, ...props }: ButtonGroupProps): import("react").JSX.Element;
+export interface CloseButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
+    /** sm 24px for toasts and tags, md 32px for dialogs and panels.
+     * @default "md" */
+    size?: "sm" | "md";
+    /** What it closes, for screen readers.
+     * @default "Close" */
+    label?: string;
+}
+/** The ✕ in a dialog, drawer or panel header. */
+export declare const CloseButton: import("react").ForwardRefExoticComponent<CloseButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export interface ToggleButtonProps extends Omit<ButtonProps, "variant"> {
+    /** Whether it's on. Leave out to let the button keep its own state. */
+    pressed?: boolean;
+    /** The starting state when uncontrolled.
+     * @default false */
+    defaultPressed?: boolean;
+    onPressedChange?(pressed: boolean): void;
+    /** @default "secondary" */
+    variant?: "secondary" | "ghost";
+}
+/** A button that stays pressed in while something is on: bold text, a filter, a view mode. */
+export declare const ToggleButton: import("react").ForwardRefExoticComponent<ToggleButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/Button/ButtonGroup.d.ts

@@ -0,0 +1,33 @@
+import { type ButtonHTMLAttributes, type HTMLAttributes } from "react";
+import { type ButtonProps } from "./Button.js";
+export interface ButtonGroupProps extends HTMLAttributes<HTMLDivElement> {
+    /** Joins the buttons into one control with shared borders. Off, they sit 8px apart.
+     * @default true */
+    attached?: boolean;
+    /** @default "horizontal" */
+    orientation?: "horizontal" | "vertical";
+}
+/** Buttons that belong together: a toolbar's actions, or a split choice like "Day · Week · Month". */
+export declare function ButtonGroup({ attached, orientation, className, ...props }: ButtonGroupProps): import("react").JSX.Element;
+export interface CloseButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
+    /** sm 24px for toasts and tags, md 32px for dialogs and panels.
+     * @default "md" */
+    size?: "sm" | "md";
+    /** What it closes, for screen readers.
+     * @default "Close" */
+    label?: string;
+}
+/** The ✕ in a dialog, drawer or panel header. */
+export declare const CloseButton: import("react").ForwardRefExoticComponent<CloseButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export interface ToggleButtonProps extends Omit<ButtonProps, "variant"> {
+    /** Whether it's on. Leave out to let the button keep its own state. */
+    pressed?: boolean;
+    /** The starting state when uncontrolled.
+     * @default false */
+    defaultPressed?: boolean;
+    onPressedChange?(pressed: boolean): void;
+    /** @default "secondary" */
+    variant?: "secondary" | "ghost";
+}
+/** A button that stays pressed in while something is on: bold text, a filter, a view mode. */
+export declare const ToggleButton: import("react").ForwardRefExoticComponent<ToggleButtonProps & import("react").RefAttributes<HTMLButtonElement>>;