@fairgarden/design 0.1.0-alpha.0 → 0.1.0-alpha.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Connor Davis
+
+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

@@ -2,34 +2,15 @@
 
 <!-- fg:version -->
 
-Version **0.1.0-alpha.0**
+Version **0.1.0-alpha.2**
 
 <!-- /fg:version -->
 
-<!-- fg:releasing -->
-
-## Releasing
-
-This module releases on its own. `0.1.0-alpha.0` is what main is working towards,
-not what is published — the version here is always the next one.
-
-1. **Publish it.** Run the *Publish* workflow from the Actions tab, picking the
-   dist tag. It refuses if that version is already on npm.
-2. **Move it on.** `pnpm release` — opens a pull request bumping this branch
-   to `0.1.0-alpha.1`, or `pnpm release --id rc` to change
-   identifier. A prerelease gets no maintenance branch; there is no released
-   line behind it yet.
-
-Every push to main publishes `@fairgarden-private/design@canary`. A canary is not a release and
-carries no promise; it is there so main can be tried without a checkout.
-
-<!-- /fg:releasing -->
-
 ## Stack
 
 - **React 19** and **Base UI** (`@base-ui/react`, a peer dependency): unstyled, accessible primitives under every interactive component.
 - **CSS Modules plus CVA** (`class-variance-authority`): one module per component, one class per variant value, typed variant axes, all in cascade layers (`reset, tokens, theme, roles, base, variants, compounds, scales, states, print`).
-- **Open Props** for the non-color tokens, plus the system's own `--ds-*` extensions. Text sizes are in rem, spacing in px.
+- **Open Props** for the non-color tokens. A step the system adds between two Open Props steps is named by its position (`--size-px-2-5` sits halfway between `--size-px-2` and `--size-px-3`); every other FairGarden-only token takes `--fgd-*`. Text sizes are in rem, spacing in px.
 - **Radix Colors**: the 31 standard scales as one unified `--{scale}{step}` set (no alpha scales). Light and dark swap the values, never the names: `data-theme="light|dark"` on `html` forces a mode, otherwise the OS `prefers-color-scheme` decides. Components read only scale steps and role variables (`--primary1…12`, `--secondary1…12`, `--role-*`) and never see the mode. Every component takes `primary` and `secondary` scale props; grounds (`Ground`: 8 page grounds, the `night` band, 7 fields) set them for a region.
 - **Material Symbols** (Rounded, FILL 0 by default) compiled to inline SVG paths by `scripts/build-icons.js`; no icon font.
 - **Recharts** for charts (SVG, role colors, opaque fills, pattern defs, no animation unless motion is allowed).
@@ -40,47 +21,92 @@ carries no promise; it is there so main can be tried without a checkout.
 ## Usage
 
 ```bash
-pnpm add @fairgarden-private/design @base-ui/react
+pnpm add @fairgarden/design @base-ui/react
 # only for Map:
 pnpm add maplibre-gl pmtiles @protomaps/basemaps
+# only for Code Block, Demo, Types Table, Search Dialog and utils/docs:
+pnpm add @fairgarden/docs@^0.13.4-canary.18
 ```
 
 ```tsx
 // app shell, once
-import '@fairgarden-private/design/utils/global.css'
-import '@fairgarden-private/design/utils/fonts'
-import { ClientProvider } from '@fairgarden-private/design/utils/ClientProvider'
+import '@fairgarden/design/utils/global.css'
+import '@fairgarden/design/utils/fonts'
+import { ClientProvider } from '@fairgarden/design/utils/ClientProvider'
 
 // anywhere
-import { Button } from '@fairgarden-private/design/components/Button'
+import { Button } from '@fairgarden/design/actions/button'
 
 <ClientProvider locale="en-US">
   <Button variant="solid">Sign Up</Button>
 </ClientProvider>
 ```
 
-Each component is imported from its own path, `@fairgarden-private/design/components/<Name>`.
+Each component is imported from its own path, `@fairgarden/design/<category>/<name>`: the category folder, then the component's name in kebab case (`@fairgarden/design/forms/number-field` exports `NumberField`). The shared utilities stay at `@fairgarden/design/utils/<name>` and the generated icon paths at `@fairgarden/design/icons/paths`.
 
 ## Components
 
-**Foundations:** Ground, Icon, Separator, Sticker, and the shared utilities: patterns (`utils/pattern.module.css`), type roles (`utils/type.module.css`), lines, ornaments and the navigation data type (`utils/navigation`).
+| Category | Components (import path `@fairgarden/design/<category>/…`) |
+| --- | --- |
+| `foundations` | Ground (`ground`), Icon (`icon`), Separator (`separator`), Sticker (`sticker`), Expanding Box (`expanding-box`) |
+| `actions` | Button (`button`), Link (`link`), Toggle (`toggle`), Toggle Group (`toggle-group`), Chip (`chip`) |
+| `navigation` | Navigation Menu (`navigation-menu`), Navigation Bar (`navigation-bar`), Nav Drawer (`nav-drawer`), Breadcrumb (`breadcrumb`), Pagination (`pagination`), Tabs (`tabs`), File Tabs (`file-tabs`: the folder-tab header Code Block and Demo use, with optional `controls` at its end and a busy `status`; no docs engine needed), Toolbar (`toolbar`), Sidebar Nav (`sidebar-nav`: the docs page tree, from plain data, in the Docs Layout's column and drawer), Table of Contents (`table-of-contents`: "On this page" as a list, or with `kind="bar"` the compact bar that names the section in view and opens the list; with the `useActiveHeading` scrollspy hook) |
+| `forms` | Field (`field`), Fieldset (`fieldset`), Form (`form`), Input (`input`), Number Field (`number-field`), Select (`select`), Combobox (`combobox`), Autocomplete (`autocomplete`), Search (`search`), Checkbox (`checkbox`), Checkbox Group (`checkbox-group`), Radio (`radio`), Radio Group (`radio-group`), Switch (`switch`), Slider (`slider`) |
+| `feedback` | Alert (`alert`), Badge (`badge`), Tag (`tag`), Avatar (`avatar`), Progress (`progress`), Meter (`meter`), Toast (`toast`) |
+| `overlays` | Dialog (`dialog`), Alert Dialog (`alert-dialog`), Popover (`popover`), Preview Card (`preview-card`), Menu (`menu`), Context Menu (`context-menu`), Menubar (`menubar`), Tooltip (`tooltip`), Search Dialog (`search-dialog`) |
+| `disclosure` | Accordion (`accordion`), Collapsible (`collapsible`), FAQ (`faq`) |
+| `page` | Hero (`hero`), Footer (`footer`), Section Bar (`section-bar`), Section Divider (`section-divider`), Section Header (`section-header`), CTA Block (`cta-block`), Newsletter (`newsletter`), Marquee (`marquee`), Announcement Bar (`announcement-bar`), Docs Layout (`docs-layout`: the documentation frame, with a sidebar from 1024 px, a drawer below it, and a contents column from 1440 px, the contents bar sticky under the header below it) |
+| `content` | Card (`card`), Card Grid (`card-grid`), Feature Grid (`feature-grid`), Carousel (`carousel`), Quote (`quote`), Index Rows (`index-rows`), Profile (`profile`), Pricing (`pricing`), Timeline (`timeline`), Empty State (`empty-state`), Code Block (`code-block`), Demo (`demo`), Types Table (`types-table`) |
+| `data` | Table (`table`), Scroll Area (`scroll-area`), Spec Grid (`spec-grid`), Spec List (`spec-list`), Spec Sheet (`spec-sheet`), Figure (`figure`), Stat (`stat`), Chart (`chart`), Map (`map`) |
 
-**Actions and navigation:** Button, Link, Toggle and Toggle Group, Tabs, Navigation Menu, Menu, Context Menu, Menubar, Breadcrumb, Pagination, Search, Toolbar.
+### With `@fairgarden/docs`
 
-**Forms:** Form, Field, Fieldset, Input, Number Field, Select, Combobox, Autocomplete, Checkbox and Checkbox Group, Radio and Radio Group, Switch, Slider.
+`@fairgarden/docs` is an optional peer dependency (`^0.13.4-canary.18`, the `canary` release; `latest` is still 0.13.3, outside the range). Four components and one utility are built on the docs engine and import it directly; no other module does, so install it only if you use them:
 
-**Status and overlays:** Alert, Badge, Tag, Chip, Avatar, Accordion, Collapsible, Dialog, Alert Dialog, Popover, Preview Card, Tooltip, Toast, Progress, Meter, Scroll Area.
+| Import path | Exports |
+| --- | --- |
+| `@fairgarden/design/content/code-block` | `CodeBlock`: a Content component for `CodeHighlighter`. It calls `useCode(props)` and renders the engine's highlighted files, variants, TS \| JS transform, copy, swap and window. `CodeBlockLazy` is the same in its own chunk, and `CodeBlockLoading` its light loading state (the precomputed fallback in the same frame). Copies confirm with a toast through a `ToastProvider` (`feedback/toast`) in the app shell; without one they're silent. |
+| `@fairgarden/design/content/demo` | `DemoContent`: the demo factories' content. It calls `useDemo(props)` and renders the live component above the Code Block's code section. `DemoLazy` and `DemoLoading` as above; `renderPreview` wraps the preview (an iframe, say). |
+| `@fairgarden/design/content/types-table` | `TypesTable` and `TypePre`: the types factories' API table (through `useTypes`) and type signatures. |
+| `@fairgarden/design/overlays/search-dialog` | `SearchDialog`: the header search. It calls `useSearch` over your `sitemap` loader and renders the engine's results; a chosen row calls `onNavigate(href, result)` with `buildResultUrl(result)`, so pass your router: `<SearchDialog sitemap={() => import('./sitemap')} onNavigate={(href) => router.push(href)} keyboardShortcut />`. |
+| `@fairgarden/design/utils/docs` | `createDemo`, `createDemoWithVariants`, `createTypes`, `createMultipleTypes` (the engine's factories pre-wired with the components above; `createDemoFactory`, `createDemoWithVariantsFactory`, `createTypesFactory` and `createMultipleTypesFactory` take overrides) and `createMdxComponents({ Link, Image, components, … })` (the MDX map: fenced blocks as Code Blocks, headings, links, prose). `toSidebarItems(sitemap)` maps the engine's sitemap to the Sidebar Nav's page tree. Each also has its own path: `…/utils/docs/createDemo`, `…/createTypes`, `…/createMdxComponents`, `…/toSidebarItems`. |
 
-**Page frame:** Navigation Bar, Nav Drawer, Section Bar, Announcement Bar, Section Header, Section Divider, Hero, CTA Block, Newsletter, Marquee, Footer.
+None of them contains framework code: pass navigation in (`onNavigate`, `Link`). Put the engine's `CodeProviderLazy` (`@fairgarden/docs/CodeProvider`) in your root layout, so code the browser produces is highlighted too.
 
-**Content modules:** Card, Card Grid, Carousel, FAQ, Feature Grid, Spec Sheet, Quote, Pricing, Stat, Index Rows, Timeline, Profile, Empty State.
-
-**Data:** Table, Spec List, Spec Grid, Figure, Chart, Map.
+**Utilities** (`@fairgarden/design/utils/…`): the global stylesheet (`global.css`), the fonts (`fonts`), `ClientProvider`, the pattern tiles (`pattern.module.css`), the type roles (`type.module.css`), the syntax tiers for code outside a Code Block (`syntax.module.css`), the line styles (`line.module.css`), ornaments (`Ornament`), the navigation data type (`navigation`) and the docs factories (`docs`, above).
 
 ## Development
 
-- `pnpm --filter @fairgarden-private/design build`: generates the color and icon files, the CSS Module typings, then compiles with `tsc` and PostCSS into `components/`, `utils/` and `icons/`.
-- `pnpm --filter @fairgarden-private/design lint`
-- Documentation site in `docs/` (`@fairgarden-private/design-docs`, port 3032): `pnpm --filter @fairgarden-private/design-docs dev`. It compiles `src/` directly through tsconfig paths. After changing a component's props or adding a page, run `pnpm validate` in `docs/` to regenerate the `types.md` files and the page indexes.
+- `pnpm --filter @fairgarden/design build`: generates the color and icon files, the CSS Module typings, then compiles `src/` with `tsc` and PostCSS into one folder per category (`foundations/`, `actions/` … `data/`), `utils/` and `icons/` at the package root.
+- `pnpm --filter @fairgarden/design lint`
+- Source layout: `src/<category>/<name>/` holds `<Name>.tsx`, `<name>.module.css` (with its generated `.d.ts`) and `index.ts`; the shared utilities are in `src/utils/` and the generated icons in `src/icons/`.
+- Documentation site in `docs/` (`@fairgarden/design-docs`, port 3032): `pnpm --filter @fairgarden/design-docs dev`. It compiles `src/` directly through tsconfig paths, with one section per category (`docs/app/<category>/<name>/`). After changing a component's props or adding a page, run `pnpm validate` in `docs/` to regenerate the `types.md` files and the section indexes.
 
 Install dependencies from the monorepo root only. The full specification lives outside this repository (`DESIGN-SYSTEM.md`).
+
+<!-- fg:releasing -->
+
+## Releasing
+
+This module releases on its own. `0.1.0-alpha.2` is what main is working towards,
+not what is published — the version here is always the next one. Its release
+notes are the top section of `CHANGELOG.md`, where every pull request adds a
+line linking itself.
+
+1. **Publish it.** Run the *Publish* workflow from the Actions tab, picking the
+   dist tag. It refuses if that version is already on npm. Once it is out, open
+   pull requests are held — their changelog check fails — so nothing is noted
+   under a version that has already shipped.
+2. **Start the next version.** `pnpm next-version` opens a pull request moving
+   main to `0.1.0-alpha.3` and starting its section of the
+   changelog, or `pnpm next-version --id rc` to change identifier. Merging it
+   lifts the hold. A prerelease gets no maintenance branch; there is no
+   released line behind it yet.
+
+A held pull request goes on once it is brought up to date with main and its
+line is moved into the new version's section.
+
+Every push to main publishes `@fairgarden/design@canary`. A canary is not a release and
+carries no promise; it is there so main can be tried without a checkout.
+
+<!-- /fg:releasing -->

package/actions/button/Button.d.ts

@@ -0,0 +1,107 @@
+import * as React from 'react';
+import { Button as BaseButton } from '@base-ui/react/button';
+import { type VariantProps } from 'class-variance-authority';
+import { type IconName } from '../../foundations/icon';
+/**
+ * Button classes (§9.2, §1.11.10). `primary` and `secondary` are never
+ * defaulted [D133]: the `solid` class falls back to the scope's action scale
+ * for `secondary`, and an explicit `secondary` wins from the scales layer.
+ * `destructive` swaps in the danger roles per variant (compounds) [D192].
+ */
+export declare const button: (props?: ({
+    variant?: "outline" | "text" | "solid" | null | undefined;
+    size?: "sm" | "md" | "lg" | "xl" | null | undefined;
+    iconOnly?: boolean | null | undefined;
+    onMedia?: boolean | null | undefined;
+    butted?: "end" | "start" | null | undefined;
+    destructive?: boolean | null | undefined;
+    primary?: "ruby" | "brown" | "crimson" | "gold" | "gray" | "indigo" | "olive" | "pink" | "plum" | "purple" | "red" | "tomato" | "violet" | "bronze" | "iris" | "mauve" | "sage" | "sand" | "slate" | null | undefined;
+    secondary?: "ruby" | "blue" | "brown" | "crimson" | "cyan" | "gold" | "gray" | "green" | "indigo" | "lime" | "olive" | "orange" | "pink" | "plum" | "purple" | "red" | "teal" | "tomato" | "violet" | "yellow" | "amber" | "bronze" | "grass" | "iris" | "jade" | "mauve" | "mint" | "sage" | "sand" | "sky" | "slate" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type ButtonVariants = VariantProps<typeof button>;
+/** Handler type of the deprecated `onPress` alias, kept for existing callers. */
+export type PressCallback = (event: React.MouseEvent<HTMLButtonElement>) => void;
+type ButtonCommonProps = Omit<BaseButton.Props, 'children'> & {
+    /**
+     * `outline` (default) is the outline twin; `solid` is the page's primary
+     * action, filled with the scope's action scale; `text` is a text button
+     * whose glyph trails (§9.2).
+     */
+    variant?: ButtonVariants['variant'];
+    /**
+     * Butts the button against an adjacent field on its `start` or `end`
+     * edge, as in the butted submit. Default: none.
+     */
+    butted?: ButtonVariants['butted'];
+    /**
+     * Marks a destructive action (delete, remove, discard, clear): the
+     * danger (red) roles replace the action and primary inks in every
+     * variant [D192]. `solid` takes the danger fill, label and edge;
+     * `outline` the danger edge and label; `text` the danger label and
+     * glyph. Focus and pressed are unchanged. Default `false`.
+     */
+    destructive?: ButtonVariants['destructive'];
+    /**
+     * Primary Radix scale, from the primary roster: the outline edge, labels
+     * and focus ring. Never defaulted; omitted, it inherits the scope [D133].
+     */
+    primary?: ButtonVariants['primary'];
+    /**
+     * Secondary Radix scale: the `solid` fill and the `text` glyph. Omitted,
+     * `solid` falls back to the scope's action scale.
+     */
+    secondary?: ButtonVariants['secondary'];
+    /** Which side of the label the glyph sits on (a `text` Button's chevron trails). */
+    iconPosition?: 'start' | 'end';
+    /**
+     * Called on click, after `onClick`.
+     * @deprecated Use `onClick`. Kept as an alias from the react-aria Button.
+     */
+    onPress?: PressCallback;
+};
+type LabelledButtonProps = {
+    /** `true` hides the label and shows only `icon`. Default `false`. */
+    iconOnly?: false | null;
+    /** Only with `iconOnly`. */
+    onMedia?: false | null;
+    /**
+     * Fixed height: `sm` 32 px (hit area extended to 44), `md` 40 px (default),
+     * `lg` 48 px, `xl` 56 px for the page's single transactional action.
+     */
+    size?: ButtonVariants['size'];
+    /** One optional functional glyph (§6.10), inline tier, FILL 0. */
+    icon?: IconName;
+    /** The label: verb plus object, authored in title case [D160]. */
+    children?: React.ReactNode;
+};
+type IconOnlyButtonProps = {
+    /**
+     * Shows only `icon`; `children` becomes the visually hidden accessible
+     * name. Pair the button with a Tooltip. Default `false`.
+     */
+    iconOnly: true;
+    /** Media button: place it inside a `night` Ground [D148]. */
+    onMedia?: boolean | null;
+    /** `sm`, `md` (default) or `lg`: `xl` is excluded for icon-only buttons. */
+    size?: Exclude<ButtonVariants['size'], 'xl'>;
+    /** The glyph (§6.10). */
+    icon: IconName;
+    /** The accessible name, visually hidden. Pair the button with a Tooltip. */
+    children: React.ReactNode;
+};
+/**
+ * Props for Button: Base UI Button props plus the variant and color axes.
+ * With `iconOnly`, `icon` and an accessible-name `children` are required.
+ */
+export type ButtonProps = ButtonCommonProps & (LabelledButtonProps | IconOnlyButtonProps);
+/**
+ * A Base UI Button. A navigating action renders an anchor through `render`
+ * (with `nativeButton={false}`), keeping link semantics. States come from
+ * Base UI and ARIA attributes only: pass `disabled` (with
+ * `focusableWhenDisabled` where the reason matters) or `aria-busy` together
+ * with an authored "-ing…" label; a busy button holds its rest width and
+ * ignores clicks.
+ */
+export declare function Button(props: ButtonProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=Button.d.ts.map

package/actions/button/Button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/actions/button/Button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,uBAAuB,CAAA;AAC5D,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,EAAkB,KAAK,QAAQ,EAAE,MAAM,wBAAwB,CAAA;AAYtE;;;;;GAKG;AACH,eAAO,MAAM,MAAM;;;;;;;;;8EA4CjB,CAAA;AAEF,KAAK,cAAc,GAAG,YAAY,CAAC,OAAO,MAAM,CAAC,CAAA;AAEjD,iFAAiF;AACjF,MAAM,MAAM,aAAa,GAAG,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAA;AAMhF,KAAK,iBAAiB,GAAG,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,UAAU,CAAC,GAAG;IAC1D;;;;OAIG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,CAAA;IACnC;;;OAGG;IACH,MAAM,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAA;IACjC;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,cAAc,CAAC,aAAa,CAAC,CAAA;IAC3C;;;OAGG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,CAAA;IACnC;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,CAAA;IACvC,oFAAoF;IACpF,YAAY,CAAC,EAAE,OAAO,GAAG,KAAK,CAAA;IAC9B;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAA;CACxB,CAAA;AAEH,KAAK,mBAAmB,GAAG;IACzB,qEAAqE;IACrE,QAAQ,CAAC,EAAE,KAAK,GAAG,IAAI,CAAA;IACvB,4BAA4B;IAC5B,OAAO,CAAC,EAAE,KAAK,GAAG,IAAI,CAAA;IACtB;;;OAGG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC,CAAA;IAC7B,kEAAkE;IAClE,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,kEAAkE;IAClE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B,CAAA;AAED,KAAK,mBAAmB,GAAG;IACzB;;;OAGG;IACH,QAAQ,EAAE,IAAI,CAAA;IACd,6DAA6D;IAC7D,OAAO,CAAC,EAAE,OAAO,GAAG,IAAI,CAAA;IACxB,4EAA4E;IAC5E,IAAI,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,IAAI,CAAC,CAAA;IAC5C,yBAAyB;IACzB,IAAI,EAAE,QAAQ,CAAA;IACd,4EAA4E;IAC5E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,CAAA;AAED;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG,iBAAiB,GACzC,CAAC,mBAAmB,GAAG,mBAAmB,CAAC,CAAA;AAE7C;;;;;;;GAOG;AACH,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,qBAsIxC"}

package/actions/button/Button.js

@@ -0,0 +1,148 @@
+'use client';
+import * as React from 'react';
+import { Button as BaseButton } from '@base-ui/react/button';
+import { cva } from 'class-variance-authority';
+import { Icon, iconHost } from '../../foundations/icon';
+import { assignRef } from '../../utils/assignRef';
+import { cx, resolveClassName } from '../../utils/className';
+import { primaryScaleVariants, secondaryScaleVariants, } from '../../utils/scales';
+import { useScopeAttributes } from '../../utils/scope';
+import { useReleaseMark } from '../../utils/useReleaseMark';
+import styles from './button.module.css';
+/**
+ * Button classes (§9.2, §1.11.10). `primary` and `secondary` are never
+ * defaulted [D133]: the `solid` class falls back to the scope's action scale
+ * for `secondary`, and an explicit `secondary` wins from the scales layer.
+ * `destructive` swaps in the danger roles per variant (compounds) [D192].
+ */
+export const button = cva(styles.base, {
+    variants: {
+        variant: {
+            solid: styles.solid,
+            outline: styles.outline,
+            text: styles.text,
+        },
+        size: {
+            sm: styles.sm,
+            md: styles.md,
+            lg: styles.lg,
+            xl: styles.xl,
+        },
+        iconOnly: {
+            true: styles.iconOnly,
+        },
+        onMedia: {
+            true: styles.onMedia,
+        },
+        butted: {
+            start: styles.buttedStart,
+            end: styles.buttedEnd,
+        },
+        destructive: {
+            true: styles.destructive,
+        },
+        primary: primaryScaleVariants,
+        secondary: secondaryScaleVariants,
+    },
+    compoundVariants: [
+        { iconOnly: true, onMedia: true, class: styles.iconOnlyOnMedia },
+        { iconOnly: true, butted: 'start', class: styles.iconOnlyButtedStart },
+        { iconOnly: true, butted: 'end', class: styles.iconOnlyButtedEnd },
+        { variant: 'solid', destructive: true, class: styles.solidDestructive },
+        { variant: 'outline', destructive: true, class: styles.outlineDestructive },
+        { variant: 'text', destructive: true, class: styles.textDestructive },
+    ],
+    defaultVariants: {
+        variant: 'outline',
+        size: 'md',
+        iconOnly: false,
+        onMedia: false,
+        destructive: false,
+    },
+});
+/**
+ * A Base UI Button. A navigating action renders an anchor through `render`
+ * (with `nativeButton={false}`), keeping link semantics. States come from
+ * Base UI and ARIA attributes only: pass `disabled` (with
+ * `focusableWhenDisabled` where the reason matters) or `aria-busy` together
+ * with an authored "-ing…" label; a busy button holds its rest width and
+ * ignores clicks.
+ */
+export function Button(props) {
+    const { variant, size, iconOnly, onMedia, butted, destructive, primary, secondary, icon, iconPosition = 'start', onPress, onClick, className, children, disabled, ref, ...rest } = props;
+    const scope = useScopeAttributes();
+    const busy = rest['aria-busy'] === true || rest['aria-busy'] === 'true';
+    // A navigating Button keeps link semantics: drop Base UI's role="button".
+    const linkSemantics = React.isValidElement(rest.render) &&
+        rest.render.props.href != null &&
+        !('role' in rest)
+        ? { role: undefined }
+        : null;
+    const element = React.useRef(null);
+    const restWidth = React.useRef(null);
+    const setRef = React.useCallback((node) => {
+        element.current = node;
+        assignRef(ref, node);
+    }, [ref]);
+    // Remember the rest width, then hold it while busy [D84].
+    React.useLayoutEffect(() => {
+        if (!busy && element.current) {
+            restWidth.current = element.current.getBoundingClientRect().width;
+        }
+    }, [busy, children]);
+    React.useLayoutEffect(() => {
+        const node = element.current;
+        if (!busy || !node || restWidth.current === null)
+            return undefined;
+        node.style.setProperty('--button-rest-width', `${restWidth.current}px`);
+        return () => {
+            node.style.removeProperty('--button-rest-width');
+        };
+    }, [busy]);
+    // A `solid` press swaps fill and ink as a pair; the release mark lets the
+    // module step the release too, never fading one over the other [D205].
+    const releaseMark = useReleaseMark(element);
+    const handlePointerDown = (event) => {
+        releaseMark.onPointerDown();
+        rest.onPointerDown?.(event);
+    };
+    const handleKeyUp = (event) => {
+        releaseMark.onKeyUp(event);
+        rest.onKeyUp?.(event);
+    };
+    const handleClick = (event) => {
+        if (busy) {
+            event.preventDefault();
+            event.preventBaseUIHandler();
+            return;
+        }
+        restWidth.current = event.currentTarget.getBoundingClientRect().width;
+        onClick?.(event);
+        onPress?.(event);
+    };
+    const variants = {
+        variant,
+        size,
+        iconOnly,
+        onMedia,
+        butted,
+        destructive,
+        primary,
+        secondary,
+    };
+    // The text Button and icon-only buttons swap the glyph to the next tier's
+    // weight on hover and press (§10.1 icon states) [D181]; the root hosts it.
+    const interactiveGlyph = icon != null && (variant === 'text' || iconOnly === true);
+    const host = interactiveGlyph ? iconHost : undefined;
+    const resolvedClassName = resolveClassName(className, (extra) => button({ ...variants, className: cx(host, extra) }));
+    // Icon-only lg takes the tag tier (20 px) as its own instance, never a resize.
+    const glyph = icon ? (React.createElement(Icon, { name: icon, size: iconOnly && size === 'lg' ? 'tag' : 'inline', weight: interactiveGlyph ? 'interactive' : 'rest', className: styles.icon })) : null;
+    const label = children == null ? null : React.createElement("span", { className: styles.label }, children);
+    const edge = disabled && variant !== 'text' ? (React.createElement("svg", { className: styles.edge, "aria-hidden": "true", focusable: "false" },
+        React.createElement("rect", { className: styles.edgeLine, width: "100%", height: "100%" }))) : null;
+    return (React.createElement(BaseButton, { ...rest, ...linkSemantics, ...scope, ref: setRef, disabled: disabled, className: resolvedClassName, onClick: handleClick, onPointerDown: handlePointerDown, onKeyUp: handleKeyUp },
+        iconPosition === 'end' ? label : glyph,
+        iconPosition === 'end' ? glyph : label,
+        edge));
+}
+//# sourceMappingURL=Button.js.map

package/actions/button/Button.js.map

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