@imfusion/web-ui 0.6.4-dev.57.g664ba66a → 0.6.4-dev.58.g88c8fcaa

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (58) hide show
  1. package/README.md +19 -54
  2. package/dist/assets/vendors/base-ui.d.ts +2 -3
  3. package/dist/breakpoints/min-width.d.ts +3 -7
  4. package/dist/breakpoints/registry.d.ts +3 -9
  5. package/dist/codegen/gen-breakpoints-css.d.ts +0 -4
  6. package/dist/codegen/gen-token-css.d.ts +0 -2
  7. package/dist/components/button/button.d.ts +1 -1
  8. package/dist/components/callout/callout.d.ts +7 -10
  9. package/dist/components/card/card.d.ts +2 -4
  10. package/dist/components/chip/chip.cva.d.ts +2 -4
  11. package/dist/components/code/code.d.ts +1 -1
  12. package/dist/components/logo/imfusion/imfusion.d.ts +1 -4
  13. package/dist/components/logo/logo.d.ts +1 -1
  14. package/dist/components/navigation-menu/subs/flyout-link.d.ts +3 -5
  15. package/dist/components/navigation-menu/subs/inline-submenu.d.ts +2 -4
  16. package/dist/components/navigation-menu/subs/trigger.d.ts +5 -7
  17. package/dist/components/number-field/number-field.d.ts +2 -3
  18. package/dist/components/select/select.d.ts +3 -3
  19. package/dist/components/stack/stack.d.ts +2 -3
  20. package/dist/components/table/table.d.ts +3 -5
  21. package/dist/components/tabs/tabs.d.ts +5 -8
  22. package/dist/components/tooltip/tooltip.d.ts +5 -8
  23. package/dist/components/typo/typo.d.ts +1 -3
  24. package/dist/docgen/gen-docgen.utils.d.ts +3 -4
  25. package/dist/hooks/use-color-scheme.d.ts +5 -11
  26. package/dist/hooks/use-media-query.d.ts +2 -7
  27. package/dist/integrations/image-display-options/image-display-options-view.utils.d.ts +0 -1
  28. package/dist/style.css +1 -1
  29. package/dist/tokens/apply.d.ts +4 -9
  30. package/dist/tokens/control-registry.d.ts +3 -6
  31. package/dist/tokens/types.d.ts +7 -24
  32. package/dist/tokens/use-token-controls.d.ts +3 -12
  33. package/dist/types/meta.d.ts +15 -32
  34. package/dist/vite/readable-css-module-names.d.ts +3 -12
  35. package/dist/web-ui-cli.js +322 -0
  36. package/docs/user-guide/AgentTooling.mdx +127 -0
  37. package/docs/user-guide/BrandAssets.mdx +25 -28
  38. package/docs/user-guide/GettingStarted.mdx +34 -19
  39. package/docs/user-guide/HowItsBuilt.mdx +92 -12
  40. package/docs/user-guide/Tokens.mdx +12 -10
  41. package/docs/user-guide/UsagePatterns.mdx +64 -21
  42. package/package.json +6 -5
  43. package/src/docgen/doc.gen.json +20 -20
  44. package/src/llms/install-templates/AGENTS.md +4 -4
  45. package/src/llms/install-templates/hooks/baseline-staleness.sh +9 -2
  46. package/src/llms/skills/imf-web-ui/SKILL.md +8 -9
  47. package/src/llms/skills/imf-web-ui-audit/SKILL.md +4 -4
  48. package/src/llms/skills/imf-web-ui-components/SKILL.md +3 -0
  49. package/src/llms/skills/imf-web-ui-conventions/templates/AUDIT_CHECKLIST.md +0 -1
  50. package/src/llms/skills/imf-web-ui-conventions/topics/agent-tooling.md +15 -10
  51. package/src/llms/skills/imf-web-ui-conventions/topics/git.md +2 -1
  52. package/src/llms/skills/imf-web-ui-conventions/topics/styling.md +1 -1
  53. package/src/llms/skills/imf-web-ui-conventions/topics/tooling.md +1 -1
  54. package/src/llms/skills/imf-web-ui-setup/SKILL.md +1 -1
  55. package/src/llms/skills/imf-web-ui-update/SKILL.md +15 -13
  56. package/bin/install.js +0 -446
  57. package/docs/user-guide/AiAgents.mdx +0 -51
  58. package/docs/user-guide/Introduction.mdx +0 -21
package/README.md CHANGED
@@ -28,48 +28,13 @@ To follow builds from `master`, use the `dev` dist-tag:
28
28
  npm install @imfusion/web-ui@dev
29
29
  ```
30
30
 
31
- Import the stylesheet and mount the provider once at your app root:
32
-
33
- ```tsx
34
- import "@imfusion/web-ui/styles.css";
35
- import { WebUIProvider } from "@imfusion/web-ui";
36
-
37
- export function App() {
38
- return <WebUIProvider>{/* app */}</WebUIProvider>;
39
- }
40
- ```
41
-
42
- ### Agent skills
43
-
44
- The package can install optional skills for agents working in a consumer project:
45
-
46
- ```sh
47
- npx web-ui-install
48
- ```
49
-
50
- Run the command again after updating the package. It refreshes the skills already installed in the project. Use
51
- `--reconfigure` to choose a different target. Add `--hooks` to install the lifecycle hooks for Claude Code and Codex.
52
-
53
- Start with `/imf-web-ui`. It routes library questions to the packaged user guides and UI work to the companion skills it
54
- needs. Agents read the guides from `node_modules/@imfusion/web-ui/docs/user-guide/` without a running Storybook.
55
-
56
- | Skill | Use it for |
57
- | ------------------------- | ------------------------------------------------------------ |
58
- | `/imf-web-ui` | Route UI work and library questions to skills and guides. |
59
- | `/imf-web-ui-setup` | Plan library wiring, project setup, or tooling changes. |
60
- | `/imf-web-ui-components` | Look up component and icon APIs. |
61
- | `/imf-web-ui-ux` | Choose components and shape screens and flows. |
62
- | `/imf-web-ui-conventions` | Follow the frontend conventions and token seams. |
63
- | `/imf-web-ui-audit` | Inspect an existing frontend without changing it. |
64
- | `/imf-web-ui-update` | Update the package, skills, and hooks in a consumer project. |
65
-
66
- The shipped [`agent-tooling` topic](./src/llms/skills/imf-web-ui-conventions/topics/agent-tooling.md) explains the hook
67
- installation and Codex trust step.
31
+ [Getting Started](./docs/user-guide/GettingStarted.mdx) covers the setup, with or without an agent.
32
+ [Agent Tooling](./docs/user-guide/AgentTooling.mdx) covers the skills and hooks the package ships for coding agents.
68
33
 
69
34
  ### Versions
70
35
 
71
- Use a release version or range for normal development. Follow `master` through the `dev` dist-tag while building against the
72
- library:
36
+ Use a release version or range for normal development, or follow `master` through the `dev` dist-tag while building against
37
+ the library:
73
38
 
74
39
  | Dependency spec | Resolves to | Update with |
75
40
  | --------------- | -------------------------------- | ----------------------------- |
@@ -85,7 +50,7 @@ copy, so it never updates by itself.
85
50
  ## Read the docs
86
51
 
87
52
  [Storybook](https://storybook.js.org/) is the project documentation. It contains the setup guide, usage patterns, token
88
- reference, and component examples. It currently runs locally from this repository:
53
+ reference, and component examples. It runs locally from this repository:
89
54
 
90
55
  ```sh
91
56
  npm run dev
@@ -105,17 +70,17 @@ npm run git:config
105
70
 
106
71
  The main development skills are:
107
72
 
108
- | Skill | Use it for |
109
- | -------------------------------------- | ------------------------------------------------ |
110
- | `/web-ui-dev-getting-started` | Route a first task based on experience and goal. |
111
- | `/web-ui-dev-start` | Establish task context and working location. |
112
- | `/web-ui-dev-new-component` | Add a primitive. |
113
- | `/web-ui-dev-update-component` | Change an existing primitive. |
114
- | `/web-ui-dev-design-component` | Apply the ImFusion brand to a component. |
115
- | `/web-ui-dev-story` | Author a Storybook story. |
116
- | `/web-ui-dev-commit` | Verify and commit a change. |
117
- | `/web-ui-dev-release` | Prepare and ship a release. |
118
- | `/web-ui-dev-audit-docs` | Check docs for drift before a commit. |
119
- | `/web-ui-dev-refresh-design-reference` | Refresh the committed brand snapshots. |
120
- | `/web-ui-dev-teardown-worktree` | Remove a finished worktree. |
121
- | `/web-ui-dev-mcp` | Recover one optional MCP capability. |
73
+ | Skill | Use it for |
74
+ | -------------------------------- | ------------------------------------------------ |
75
+ | `/web-ui-dev-getting-started` | Route a first task based on experience and goal. |
76
+ | `/web-ui-dev-start` | Establish task context and working location. |
77
+ | `/web-ui-dev-new-component` | Add a primitive. |
78
+ | `/web-ui-dev-update-component` | Change an existing primitive. |
79
+ | `/web-ui-dev-design-component` | Apply the ImFusion brand to a component. |
80
+ | `/web-ui-dev-story` | Author a Storybook story. |
81
+ | `/web-ui-dev-commit` | Verify and commit a change. |
82
+ | `/web-ui-dev-release` | Prepare and ship a release. |
83
+ | `/web-ui-dev-audit-docs` | Check docs for drift before a commit. |
84
+ | `/web-ui-dev-claude-design-sync` | Update the design system in Claude Design. |
85
+ | `/web-ui-dev-teardown-worktree` | Remove a finished worktree. |
86
+ | `/web-ui-dev-mcp` | Recover one optional MCP capability. |
@@ -1,7 +1,6 @@
1
1
  /**
2
- * Base UI brandmark — compact glyph. Internal asset (not part of the public
3
- * package API); consumed by the Storybook origin badge to flag adapted
4
- * components. New upstreams (Mantine, …) get a sibling file here.
2
+ * Internal asset (not part of the public package API), consumed by the Storybook origin badge
3
+ * to flag adapted components. New upstreams get a sibling file here.
5
4
  */
6
5
  export declare function BaseUILogo({ size }: {
7
6
  size?: number;
@@ -1,9 +1,5 @@
1
1
  import { BreakpointName } from './registry';
2
- /**
3
- * Resolve a registry breakpoint name to the plain media-query string
4
- * `useMediaQuery` expects, e.g. `minWidth("md")` → `"(min-width: 768px)"`.
5
- *
6
- * Keeps JS-side viewport checks (e.g. a mobile burger toggle) reading from the
7
- * same numeric source as the CSS-side `@custom-media` definitions.
8
- */
2
+ /** Resolves a registry breakpoint name to the media-query string `useMediaQuery` expects, e.g.
3
+ * `minWidth("md")` → `"(min-width: 768px)"`. Keeps JS viewport checks reading from the same numeric
4
+ * source as the CSS-side `@custom-media` definitions. */
9
5
  export declare function minWidth(name: BreakpointName): string;
@@ -1,13 +1,7 @@
1
1
  /**
2
- * Breakpoint registry — the single source of truth for every
3
- * `@custom-media --imf-ui-*` definition AND the `minWidth()` JS helper.
4
- * `styles/custom-media.gen.css` is generated from this list by the codegen
5
- * runner (see `./gen-breakpoints-css.ts`), so CSS and JS can never drift.
6
- *
7
- * Values are min-width breakpoints (mobile-first). Component CSS consumes them
8
- * via `@media (--imf-ui-{name})`; Lightning CSS substitutes the literal at
9
- * build time (`drafts.customMedia`, enabled in `vite.config.ts` and
10
- * `.storybook/main.ts`).
2
+ * The single source of truth for every `@custom-media --imf-ui-*` definition and the
3
+ * `minWidth()` JS helper. `src/styles/custom-media.gen.css` is generated from this list
4
+ * by `src/codegen/gen-breakpoints-css.ts`, so CSS and JS can never drift.
11
5
  */
12
6
  export declare const BREAKPOINTS: {
13
7
  readonly mobile: 375;
@@ -1,6 +1,2 @@
1
1
  import { BREAKPOINTS } from '../breakpoints/registry';
2
- /**
3
- * Render the `@custom-media --imf-ui-*` declarations from the breakpoint
4
- * registry. Pure function.
5
- */
6
2
  export declare function renderBreakpointsCss(registry: typeof BREAKPOINTS): string;
@@ -1,6 +1,4 @@
1
1
  import { Token } from '../tokens/types';
2
- /** Render `token-controls.gen.css` — every non-font token's `:root` declarations, in registry order. */
3
2
  export declare function renderColorTokensCss(registry?: readonly Token[]): string;
4
- /** Render `font-families.gen.css` — the `--imf-ui-font-family-*` tokens, base stacks and aliases. */
5
3
  export declare function renderFontTokensCss(registry?: readonly Token[]): string;
6
4
  export declare function writeTokenCss(): void;
@@ -14,7 +14,7 @@ interface Props extends React.ComponentProps<typeof ButtonPrimitive>, VariantPro
14
14
  endIcon?: React.ReactNode;
15
15
  }
16
16
  /**
17
- * Button component
17
+ * Button
18
18
  *
19
19
  * @doc https://base-ui.com/react/components/button
20
20
  * @llm https://base-ui.com/react/components/button.md
@@ -4,22 +4,19 @@ declare const root: (props?: ({
4
4
  maxWidth?: "sm" | "md" | "lg" | "full" | null | undefined;
5
5
  } & import('class-variance-authority/types').ClassProp) | undefined) => string;
6
6
  /**
7
- * Callout.Root — the banner container. Sets the `variant` (which tints the
8
- * surface and colours the icon and text) and lays out a leading `Callout.Icon`
9
- * beside a text region of `Callout.Title` / `Callout.Description`. `maxWidth`
10
- * caps the banner so it reads as a block region rather than stretching full
11
- * container width. A persistent element in the content flow — not a transient
12
- * Toast, not a modal Alert Dialog.
7
+ * Callout.Root — the banner container. Sets `variant` (tints surface, icon, and text) and lays
8
+ * out a leading `Callout.Icon` beside `Callout.Title` / `Callout.Description`. `maxWidth` caps
9
+ * the banner so it reads as a block region, not full container width. A persistent content-flow
10
+ * element — not a transient Toast, not a modal Alert Dialog.
13
11
  */
14
12
  declare function Root({ variant, maxWidth, children, ...props }: React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof root>): import("react/jsx-runtime").JSX.Element;
15
13
  declare namespace Root {
16
14
  var displayName: string;
17
15
  }
18
16
  /**
19
- * Callout.Icon — the leading status glyph. With no children it renders the
20
- * variant's default local icon; pass a custom icon as children to override.
21
- * `aria-hidden` (the variant is conveyed by copy, not the glyph) and inherits
22
- * the status colour via `currentColor`.
17
+ * Callout.Icon — the leading status glyph. Renders the variant's default icon when no children
18
+ * are passed; pass a custom icon as children to override. `aria-hidden` (variant is conveyed by
19
+ * copy) and inherits colour via `currentColor`.
23
20
  */
24
21
  declare function Icon({ children, ...props }: React.HTMLAttributes<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;
25
22
  declare namespace Icon {
@@ -23,10 +23,8 @@ type RootProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof root
23
23
  * The image is always the first entry in the stack, so `orientation` just
24
24
  * switches the stack between a column and a row without reordering slots.
25
25
  *
26
- * The ImFusion brand ships flat (`shadow="none"`), but the shadow scale is a
27
- * first-class opt-in axis for third-party consumers. `shadow` picks the elevation
28
- * level only — how hard or spread that shadow reads is a global lighting decision,
29
- * owned by the `--imf-ui-shadow-hardness` / `--imf-ui-shadow-spread` tokens.
26
+ * `shadow` defaults to `lg`; `shadow="none"` gives the flat surface. It picks the elevation level only: how hard or
27
+ * spread the shadow reads is global, set by `--imf-ui-shadow-hardness` and `--imf-ui-shadow-spread`.
30
28
  */
31
29
  declare function Root({ density, variant, shadow, radius, orientation, withBorder, ...props }: RootProps): import("react/jsx-runtime").JSX.Element;
32
30
  declare namespace Root {
@@ -1,9 +1,7 @@
1
1
  /**
2
2
  * Shared variants for `Chip` and any sibling primitive that renders the same
3
- * Chip visual on a different element (`ChipLink` renders `<a>`; a future
4
- * `ChipButton` would render `<button>`). Keeping them in their own module
5
- * means variant axes stay aligned without cross-component imports of a
6
- * component file.
3
+ * visual on a different element (`ChipLink` renders `<a>`). Keeping them here
4
+ * avoids cross-component imports between Chip and its siblings.
7
5
  */
8
6
  export declare const chip: (props?: ({
9
7
  variant?: "primary" | "positive" | "negative" | "main" | "support" | "minor" | "brand" | "warning" | "info" | "accent-1" | "accent-2" | "accent-3" | null | undefined;
@@ -22,7 +22,7 @@ type InlineLinkProps = useRender.ComponentProps<"a"> & {
22
22
  /**
23
23
  * Code.InlineLink — the inline-code chip rendered as a link: the same hairline
24
24
  * box, with an optional directional arrow behind the separator instead of a copy button.
25
- * Sibling of `Code.Inline`, sharing its chip visual (`.inline`) — never both a
25
+ * Sibling of `Code.Inline`, sharing its chip visual (`.inline`). Never both a
26
26
  * copy button and a link on the same chip. Mirrors `ChipLink`'s shape (anchor
27
27
  * is the chip root, trailing icon nudges on hover, `data-kind` picks the icon).
28
28
  */
@@ -7,10 +7,7 @@ type Props = Omit<React.ComponentProps<typeof Logo>, "src" | "alt"> & {
7
7
  };
8
8
  /**
9
9
  * ImFusion's own logo — the generic {@link Logo} primitive pre-wired with the
10
- * ImFusion marks and the brand variant. The single branded entry point and the
11
- * only export from this module; external consumers compose `<Logo src={…} />`
12
- * with their own asset. Pass `glyph` for the compact mark; the default is the
13
- * Standard lockup.
10
+ * ImFusion marks and the brand variant. Pass `glyph` for the compact mark.
14
11
  */
15
12
  export declare function ImFusionLogo({ glyph, alt, variant, ...props }: Props): import("react/jsx-runtime").JSX.Element;
16
13
  export {};
@@ -5,7 +5,7 @@ declare const logo: (props?: ({
5
5
  variant?: "oncolor" | "main" | "inherit" | "support" | "minor" | "brand" | null | undefined;
6
6
  } & import('class-variance-authority/types').ClassProp) | undefined) => string;
7
7
  type Props = Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> & VariantProps<typeof logo> & {
8
- /** Logo source — an image URL or an inline SVG node. Required; this primitive carries no brand default (see `ImFusionLogo` for our own mark). */
8
+ /** Logo source — an image URL or inline SVG node. No brand default; see `ImFusionLogo` for the ImFusion mark. */
9
9
  src: string | ReactNode;
10
10
  alt: string;
11
11
  /** Explicit height — overrides `size` variant when set. */
@@ -1,10 +1,8 @@
1
1
  import { NavigationMenu as NavigationMenuPrimitive } from '@base-ui/react/navigation-menu';
2
2
  /**
3
- * NavigationMenu.FlyoutLink — a quiet text link inside a flyout `Content`, the
4
- * lightweight alternative to a `LinkCard` when a card is too heavy. Renders an
5
- * `<a>`. A trailing `ArrowRight` slides in on hover/focus and the label nudges to
6
- * meet it; the current page is marked in primary. When a custom `render` is
7
- * supplied the icon is omitted — the consumer's element owns its content.
3
+ * NavigationMenu.FlyoutLink — a quiet text link inside a flyout `Content`, the lightweight
4
+ * alternative to `LinkCard`. Renders an `<a>`; a trailing `ArrowRight` slides in on hover/focus,
5
+ * and the current page is marked in primary. A custom `render` omits the icon.
8
6
  */
9
7
  export declare function FlyoutLink({ children, render, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Link>): import("react/jsx-runtime").JSX.Element;
10
8
  export declare namespace FlyoutLink {
@@ -29,10 +29,8 @@ type InlineSubmenuProps = {
29
29
  *
30
30
  * A curated partial over the namespace's own primitives (a nested vertical
31
31
  * `Root` without a `Portal`, plus the rail/detail layout). Drop it directly
32
- * inside a `NavigationMenu.Content`. It bakes in Base UI's viewport
33
- * responsiveness: the nested Root flips `orientation` at `md` via `useMediaQuery`
34
- * and the CSS flips the rail from a horizontal tab strip to a side rail at the
35
- * same breakpoint — no work for the consumer, no container queries.
32
+ * inside a `NavigationMenu.Content`. Switches from a tab strip to a side rail
33
+ * at `md` — no work for the consumer, no container queries.
36
34
  */
37
35
  export declare function InlineSubmenu({ items, defaultValue }: InlineSubmenuProps): import("react/jsx-runtime").JSX.Element;
38
36
  export declare namespace InlineSubmenu {
@@ -2,10 +2,9 @@ import { NavigationMenu as NavigationMenuPrimitive } from '@base-ui/react/naviga
2
2
  import { UpstreamTrigger } from './shared';
3
3
  interface TriggerProps extends UpstreamTrigger {
4
4
  /**
5
- * Marks this section as the current page so it shows the active treatment even
6
- * when its flyout is closed — the "active trail" anchor for a nav where the
7
- * open section isn't the current one. Base UI's Trigger has no active state of
8
- * its own, so this stamps `data-active`.
5
+ * Marks this section as the current page, showing the active treatment even when its
6
+ * flyout is closed. Base UI's Trigger has no active state of its own, so this stamps
7
+ * `data-active`.
9
8
  * @default false
10
9
  */
11
10
  active?: boolean;
@@ -24,9 +23,8 @@ interface TriggerProps extends UpstreamTrigger {
24
23
  }
25
24
  /**
26
25
  * NavigationMenu.Trigger — opens an item's flyout on hover or click. Renders a
27
- * `<button>`. Ships a built-in `ChevronDown` (rotates when open) so consumers
28
- * don't hand-author an indicator; pass `hideChevron` to supply a custom `Icon`,
29
- * and `nested` when the trigger opens a submenu from inside another flyout.
26
+ * `<button>` with a built-in `ChevronDown` that rotates when open; pass
27
+ * `hideChevron` for a custom `Icon`, and `nested` for a trigger inside a flyout.
30
28
  */
31
29
  export declare function Trigger({ active, hideChevron, nested, children, ...props }: TriggerProps): import("react/jsx-runtime").JSX.Element;
32
30
  export declare namespace Trigger {
@@ -48,9 +48,8 @@ interface StepperProps extends React.ComponentProps<typeof NumberFieldPrimitive.
48
48
  /** Control height, matching Input's scale. @default "md" */
49
49
  size?: "sm" | "md" | "lg";
50
50
  /**
51
- * Content rendered above the field as a drag handle: pressing it and moving
52
- * sideways changes the value. Usually the field's label. The scrub cursor is
53
- * supplied automatically.
51
+ * Drag handle rendered above the field: press and move sideways to change the value, usually
52
+ * the field's label. The scrub cursor is supplied automatically.
54
53
  */
55
54
  scrub?: React.ReactNode;
56
55
  }
@@ -5,9 +5,9 @@ interface RootProps<Value = unknown, Multiple extends boolean | undefined = fals
5
5
  /**
6
6
  * Select.Root — accessible select / listbox primitive.
7
7
  *
8
- * Renders a thin wrapper div so that a sibling Select.Label stacks above the
9
- * Select.Trigger regardless of the parent's layout. Select.Portal is unaffected
10
- * (it renders to document.body).
8
+ * Wraps children in a div so a sibling Select.Label stacks above Select.Trigger
9
+ * regardless of the parent's layout. Select.Portal is unaffected (it renders to
10
+ * document.body).
11
11
  *
12
12
  * @doc https://base-ui.com/react/components/select
13
13
  * @llm https://base-ui.com/react/components/select.md
@@ -8,9 +8,8 @@ type Props = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof stack>;
8
8
  /**
9
9
  * Stack — vertical layout primitive.
10
10
  *
11
- * Copied and adapted from Mantine's Stack; no upstream runtime
12
- * dependency. Pure column flex container with token-driven gap and constrained
13
- * align/justify unions.
11
+ * Adapted from Mantine's Stack, no upstream runtime dependency: a pure column
12
+ * flex container with token-driven gap and constrained align/justify unions.
14
13
  *
15
14
  * @see https://mantine.dev/core/stack/
16
15
  */
@@ -47,11 +47,9 @@ type SortableHeaderCellProps = Omit<HeaderCellProps, "aria-sort"> & {
47
47
  onToggle?: React.MouseEventHandler<HTMLButtonElement>;
48
48
  };
49
49
  /**
50
- * Table.SortableHeaderCell — a partial: a header cell whose label is a sort
51
- * toggle, pre-composing HeaderCell + HeaderButton so the `aria-sort` state and
52
- * direction indicator don't get re-derived per consumer app. Headless-upstream-
53
- * agnostic: feed it `sortDirection` and `onToggle` (e.g. from a TanStack
54
- * column). Omit `onToggle` and it renders a plain non-sortable header cell.
50
+ * Table.SortableHeaderCell — a header cell whose label is a sort toggle,
51
+ * pre-composing HeaderCell + HeaderButton so `aria-sort` and the direction
52
+ * indicator aren't re-derived per consumer. Omit `onToggle` for a plain cell.
55
53
  */
56
54
  export declare function SortableHeaderCell({ sortDirection, onToggle, children, ...props }: SortableHeaderCellProps): import("react/jsx-runtime").JSX.Element;
57
55
  export declare namespace SortableHeaderCell {
@@ -32,11 +32,9 @@ export declare namespace Tab {
32
32
  var displayName: string;
33
33
  }
34
34
  /**
35
- * Tabs.Indicator — the bordered box marking the active tab, overlapping the
36
- * shared hairline border to visually fuse the active tab with the panel
37
- * frame beneath it. Positioned via the `--active-tab-*` CSS custom
38
- * properties Base UI writes onto it; render once per Tabs.List, after the
39
- * Tabs.Tab list.
35
+ * Tabs.Indicator — the bordered box marking the active tab, positioned via
36
+ * the `--active-tab-*` CSS custom properties Base UI writes onto it. Render
37
+ * once per Tabs.List, after the Tabs.Tab list.
40
38
  */
41
39
  export declare function Indicator(props: React.ComponentProps<typeof TabsPrimitive.Indicator>): import("react/jsx-runtime").JSX.Element;
42
40
  export declare namespace Indicator {
@@ -44,9 +42,8 @@ export declare namespace Indicator {
44
42
  }
45
43
  /**
46
44
  * Tabs.PanelViewport — the shared frame Tabs.Panel elements render inside.
47
- * No Base UI equivalent exists (upstream leaves this as a plain wrapper div
48
- * in its own reference); we surface it as a named part since its hairline
49
- * border is what Tabs.Indicator visually fuses into.
45
+ * No Base UI equivalent exists; it's surfaced as a named part since its
46
+ * hairline border is what Tabs.Indicator visually fuses into.
50
47
  */
51
48
  export declare function PanelViewport(props: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
52
49
  export declare namespace PanelViewport {
@@ -33,10 +33,9 @@ export declare namespace Root {
33
33
  }
34
34
  interface TriggerProps extends UpstreamTrigger, VariantProps<typeof tooltipTrigger> {
35
35
  /**
36
- * Milliseconds to wait before opening on hover. Defaults to a snappier value
37
- * than Base UI's 600ms — a deliberate imf default per "make the correct
38
- * choice the easy one". Grouped triggers under a `Tooltip.Provider` open
39
- * instantly after the first regardless of this value.
36
+ * Milliseconds to wait before opening on hover. Defaults to less than Base
37
+ * UI's 600ms, deliberately. Grouped triggers under a `Tooltip.Provider` open instantly
38
+ * after the first, regardless of this value.
40
39
  */
41
40
  delay?: UpstreamTrigger["delay"];
42
41
  }
@@ -54,10 +53,8 @@ export declare namespace Portal {
54
53
  * Tooltip.Positioner — positions the popup relative to the trigger via
55
54
  * floating-point layout.
56
55
  *
57
- * `sideOffset` defaults to `--arrow-size` (tooltip.module.css) + 4px — enough
58
- * gap for the arrow to bridge with a few px of breathing room past its tip,
59
- * rather than landing flush on the trigger. Keep the two in sync if either
60
- * changes.
56
+ * `sideOffset` defaults to `--arrow-size` (tooltip.module.css) + 4px, for
57
+ * gap past the arrow tip. Keep the two values in sync.
61
58
  */
62
59
  export declare function Positioner({ sideOffset, ...props }: React.ComponentProps<typeof TooltipPrimitive.Positioner>): import("react/jsx-runtime").JSX.Element;
63
60
  export declare namespace Positioner {
@@ -63,9 +63,7 @@ export declare namespace Blockquote {
63
63
  }
64
64
  /**
65
65
  * Typo.InlineCode — inline code fragment. Thin wrapper over `Code.Inline`, which
66
- * owns the inline-code styling; the rendered `<code>` carries the `Code.Inline`
67
- * identity. Unlike other Typo members it has no color-`variant` axis — inline
68
- * code is a fixed neutral chip.
66
+ * owns the styling and identity. No color-`variant` axis — it's a fixed neutral chip.
69
67
  */
70
68
  export declare function InlineCode(props: React.ComponentProps<typeof Code.Inline>): import("react/jsx-runtime").JSX.Element;
71
69
  export declare namespace InlineCode {
@@ -3,10 +3,9 @@ export declare const docgenOptions: ParserOptions;
3
3
  /** Converts a kebab-case folder name to PascalCase component prefix. */
4
4
  export declare function toPascalCase(s: string): string;
5
5
  /**
6
- * Extracts the default value string from a react-docgen-typescript PropItem.
7
- * Parses JSDoc @default string literals via JSON.parse so that quoted strings
8
- * ("primary" → primary) and non-string literals (false, 0) both render
9
- * consistently with destructured defaults in the prop table.
6
+ * Extracts a default value from a react-docgen-typescript PropItem. Parses
7
+ * JSDoc @default string literals via JSON.parse so quoted strings and
8
+ * non-string literals render consistently with destructured defaults.
10
9
  */
11
10
  export declare function extractDefault(raw: unknown): string | null;
12
11
  /** Strips the minimum leading whitespace shared by all non-empty lines. */
@@ -6,20 +6,14 @@ import { ColorScheme, ColorSchemePreference } from '../types/theme';
6
6
  */
7
7
  export declare function parsePreference(stored: string | null): ColorSchemePreference;
8
8
  /**
9
- * Manages the active color scheme with OS preference support and localStorage persistence.
10
- *
11
- * Pass `{ value }` to drive it from an external source (e.g. a Storybook toolbar
12
- * global) — in that controlled mode localStorage is bypassed entirely.
13
- *
14
- * @returns `colorScheme` — the active preference; "system" means follow the OS
15
- * @returns `resolvedColorScheme` — the scheme currently in effect ("light" | "dark")
16
- * @returns `setColorScheme` — updates the preference and applies it immediately (no-op when controlled)
9
+ * Manages the active color scheme with OS preference support and localStorage
10
+ * persistence. Pass `{ value }` to drive it from an external source (e.g. a
11
+ * Storybook toolbar global); see the `value` param for controlled-mode behavior.
17
12
  */
18
13
  export declare function useColorScheme({ value }?: {
19
14
  /**
20
- * Controlled preference. When provided, the hook applies this scheme and
21
- * ignores localStorage (neither reads nor writes it), and `setColorScheme`
22
- * becomes a no-op — the caller owns the value. Omit for the default
15
+ * Controlled preference. When provided, the hook applies this scheme and ignores
16
+ * localStorage entirely; `setColorScheme` becomes a no-op. Omit for the default
23
17
  * localStorage-backed behavior.
24
18
  */
25
19
  value?: ColorSchemePreference;
@@ -2,12 +2,7 @@ export interface UseMediaQueryOptions {
2
2
  getInitialValueInEffect: boolean;
3
3
  }
4
4
  /**
5
- * Returns whether the given media query string currently matches.
6
- * Updates reactively as the viewport changes.
7
- *
8
- * Copied and adapted from Mantine's useMediaQuery; no upstream
9
- * runtime dependency.
10
- *
11
- * @see https://github.com/mantinedev/mantine/blob/master/packages/%40mantine/hooks/src/use-media-query/use-media-query.ts
5
+ * Returns whether the given media query currently matches, updating
6
+ * reactively as the viewport changes.
12
7
  */
13
8
  export declare function useMediaQuery(query: string, initialValue?: boolean, { getInitialValueInEffect }?: UseMediaQueryOptions): boolean;
@@ -19,7 +19,6 @@ export type FieldSpec = {
19
19
  step: number;
20
20
  format: Intl.NumberFormatOptions;
21
21
  };
22
- /** Per-slider bounds override. */
23
22
  type SliderRange = {
24
23
  min?: number;
25
24
  max?: number;