@imfusion/web-ui 0.6.4-dev.7.g1840f300 → 0.6.4-dev.84.gbfc0d437

package/README.md

@@ -28,48 +28,13 @@ To follow builds from `master`, use the `dev` dist-tag:
 npm install @imfusion/web-ui@dev
 ```
 
-Import the stylesheet and mount the provider once at your app root:
-
-```tsx
-import "@imfusion/web-ui/styles.css";
-import { WebUIProvider } from "@imfusion/web-ui";
-
-export function App() {
-  return <WebUIProvider>{/* app */}</WebUIProvider>;
-}
-```
-
-### Agent skills
-
-The package can install optional skills for agents working in a consumer project:
-
-```sh
-npx web-ui-install
-```
-
-Run the command again after updating the package. It refreshes the skills already installed in the project. Use
-`--reconfigure` to choose a different target. Add `--hooks` to install the lifecycle hooks for Claude Code and Codex.
-
-Start with `/imf-web-ui`. It routes a task to the companion skills it needs, or tells the agent to work without extra
-guidance.
-
-| Skill                     | Use it for                                                   |
-| ------------------------- | ------------------------------------------------------------ |
-| `/imf-web-ui`             | Route UI work to the right companion.                        |
-| `/imf-web-ui-setup`       | Plan library wiring, project setup, or tooling changes.      |
-| `/imf-web-ui-components`  | Look up component and icon APIs.                             |
-| `/imf-web-ui-ux`          | Choose components and shape screens and flows.               |
-| `/imf-web-ui-conventions` | Follow the frontend conventions and token seams.             |
-| `/imf-web-ui-audit`       | Inspect an existing frontend without changing it.            |
-| `/imf-web-ui-update`      | Update the package, skills, and hooks in a consumer project. |
-
-The shipped [`agent-tooling` topic](./src/llms/skills/imf-web-ui-conventions/topics/agent-tooling.md) explains the hook
-installation and Codex trust step.
+[Getting Started](./docs/user-guide/GettingStarted.mdx) covers the setup, with or without an agent.
+[Agent Tooling](./docs/user-guide/AgentTooling.mdx) covers the skills and hooks the package ships for coding agents.
 
 ### Versions
 
-Use a release version or range for normal development. Follow `master` through the `dev` dist-tag while building against the
-library:
+Use a release version or range for normal development, or follow `master` through the `dev` dist-tag while building against
+the library:
 
 | Dependency spec | Resolves to                      | Update with                   |
 | --------------- | -------------------------------- | ----------------------------- |
@@ -85,7 +50,7 @@ copy, so it never updates by itself.
 ## Read the docs
 
 [Storybook](https://storybook.js.org/) is the project documentation. It contains the setup guide, usage patterns, token
-reference, and component examples. It currently runs locally from this repository:
+reference, and component examples. It runs locally from this repository:
 
 ```sh
 npm run dev
@@ -105,18 +70,17 @@ npm run git:config
 
 The main development skills are:
 
-| Skill                                     | Use it for                                       |
-| ----------------------------------------- | ------------------------------------------------ |
-| `/web-ui-dev-getting-started`             | Route a first task based on experience and goal. |
-| `/web-ui-dev-start`                       | Establish task context and working location.     |
-| `/web-ui-dev-new-component`               | Add a primitive.                                 |
-| `/web-ui-dev-update-component`            | Change an existing primitive.                    |
-| `/web-ui-dev-design-component`            | Apply the ImFusion brand to a component.         |
-| `/web-ui-dev-story`                       | Author a Storybook story.                        |
-| `/web-ui-dev-commit`                      | Verify and commit a change.                      |
-| `/web-ui-dev-release`                     | Prepare and ship a release.                      |
-| `/web-ui-dev-audit-docs`                  | Check docs for drift before a commit.            |
-| `/web-ui-dev-audit-pass-through-defaults` | Check adapted prop defaults against Base UI.     |
-| `/web-ui-dev-refresh-design-reference`    | Refresh the committed brand snapshots.           |
-| `/web-ui-dev-teardown-worktree`           | Remove a finished worktree.                      |
-| `/web-ui-dev-mcp`                         | Recover one optional MCP capability.             |
+| Skill                            | Use it for                                       |
+| -------------------------------- | ------------------------------------------------ |
+| `/web-ui-dev-getting-started`    | Route a first task based on experience and goal. |
+| `/web-ui-dev-start`              | Establish task context and working location.     |
+| `/web-ui-dev-new-component`      | Add a primitive.                                 |
+| `/web-ui-dev-update-component`   | Change an existing primitive.                    |
+| `/web-ui-dev-design-component`   | Apply the ImFusion brand to a component.         |
+| `/web-ui-dev-story`              | Author a Storybook story.                        |
+| `/web-ui-dev-commit`             | Verify and commit a change.                      |
+| `/web-ui-dev-release`            | Prepare and ship a release.                      |
+| `/web-ui-dev-audit-docs`         | Check docs for drift before a commit.            |
+| `/web-ui-dev-claude-design-sync` | Update the design system in Claude Design.       |
+| `/web-ui-dev-teardown-worktree`  | Remove a finished worktree.                      |
+| `/web-ui-dev-mcp`                | Recover one optional MCP capability.             |

package/dist/assets/vendors/base-ui.d.ts

@@ -1,7 +1,6 @@
 /**
- * Base UI brandmark — compact glyph. Internal asset (not part of the public
- * package API); consumed by the Storybook origin badge to flag adapted
- * components. New upstreams (Mantine, …) get a sibling file here.
+ * Internal asset (not part of the public package API), consumed by the Storybook origin badge
+ * to flag adapted components. New upstreams get a sibling file here.
  */
 export declare function BaseUILogo({ size }: {
     size?: number;

package/dist/breakpoints/min-width.d.ts

@@ -1,9 +1,5 @@
 import { BreakpointName } from './registry';
-/**
- * Resolve a registry breakpoint name to the plain media-query string
- * `useMediaQuery` expects, e.g. `minWidth("md")` → `"(min-width: 768px)"`.
- *
- * Keeps JS-side viewport checks (e.g. a mobile burger toggle) reading from the
- * same numeric source as the CSS-side `@custom-media` definitions.
- */
+/** Resolves a registry breakpoint name to the media-query string `useMediaQuery` expects, e.g.
+ *  `minWidth("md")` → `"(min-width: 768px)"`. Keeps JS viewport checks reading from the same numeric
+ *  source as the CSS-side `@custom-media` definitions. */
 export declare function minWidth(name: BreakpointName): string;

package/dist/breakpoints/registry.d.ts

@@ -1,13 +1,7 @@
 /**
- * Breakpoint registry — the single source of truth for every
- * `@custom-media --imf-ui-*` definition AND the `minWidth()` JS helper.
- * `styles/custom-media.gen.css` is generated from this list by the codegen
- * runner (see `./gen-breakpoints-css.ts`), so CSS and JS can never drift.
- *
- * Values are min-width breakpoints (mobile-first). Component CSS consumes them
- * via `@media (--imf-ui-{name})`; Lightning CSS substitutes the literal at
- * build time (`drafts.customMedia`, enabled in `vite.config.ts` and
- * `.storybook/main.ts`).
+ * The single source of truth for every `@custom-media --imf-ui-*` definition and the
+ * `minWidth()` JS helper. `src/styles/custom-media.gen.css` is generated from this list
+ * by `src/codegen/gen-breakpoints-css.ts`, so CSS and JS can never drift.
  */
 export declare const BREAKPOINTS: {
     readonly mobile: 375;

package/dist/{code-Ce8uiPsv.js → code-D2lwxHgd.js}

@@ -1,6 +1,6 @@
 import { t as e } from "./chunk-DmhlhrBa.js";
-import { t } from "./meta-CySnRuVp.js";
-import { Ma as n, Xo as r, r as i } from "./icons-Cy1HAosO.js";
+import { t } from "./meta-j-7HGrWv.js";
+import { Ma as n, Xo as r, r as i } from "./icons-CaGCCwG-.js";
 import { cx as a } from "class-variance-authority";
 import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
 import { useCallback as l, useEffect as u, useRef as d, useState as f } from "react";
@@ -32,28 +32,28 @@ var g = {
 	Inline: () => v,
 	InlineLink: () => y
 });
-function v({ className: e, copyable: t = !1, children: l, render: u, ...f }) {
-	let { copied: _, copy: v } = h(), y = d(null), b = _ ? n : r;
+function v({ copyable: e = !1, children: t, render: a, ...l }) {
+	let { copied: u, copy: f } = h(), _ = d(null), v = u ? n : r;
 	return m({
 		defaultTagName: "code",
-		render: u,
+		render: a,
 		props: {
-			...p(f, {
-				className: a(g.inline, e),
+			...p(l, {
+				className: g.inline,
 				children: /* @__PURE__ */ c(o, { children: [
 					/* @__PURE__ */ s("span", {
-						ref: y,
-						children: l
+						ref: _,
+						children: t
 					}),
-					t && /* @__PURE__ */ s("span", { className: g.separator }),
-					t && /* @__PURE__ */ s("button", {
+					e && /* @__PURE__ */ s("span", { className: g.separator }),
+					e && /* @__PURE__ */ s("button", {
 						type: "button",
 						className: g.inlineCopy,
-						"data-copied": _ || void 0,
-						"aria-label": _ ? "Copied" : "Copy",
-						onClick: () => v(y.current?.textContent ?? ""),
+						"data-copied": u || void 0,
+						"aria-label": u ? "Copied" : "Copy",
+						onClick: () => f(_.current?.textContent ?? ""),
 						children: /* @__PURE__ */ s(i, {
-							glyph: b,
+							glyph: v,
 							size: 12,
 							strokeWidth: 2,
 							"aria-hidden": !0

package/dist/codegen/gen-breakpoints-css.d.ts

@@ -1,6 +1,2 @@
 import { BREAKPOINTS } from '../breakpoints/registry';
-/**
- * Render the `@custom-media --imf-ui-*` declarations from the breakpoint
- * registry. Pure function.
- */
 export declare function renderBreakpointsCss(registry: typeof BREAKPOINTS): string;

package/dist/codegen/gen-token-css.d.ts

@@ -1,6 +1,4 @@
 import { Token } from '../tokens/types';
-/** Render `token-controls.gen.css` — every non-font token's `:root` declarations, in registry order. */
 export declare function renderColorTokensCss(registry?: readonly Token[]): string;
-/** Render `font-families.gen.css` — the `--imf-ui-font-family-*` tokens, base stacks and aliases. */
 export declare function renderFontTokensCss(registry?: readonly Token[]): string;
 export declare function writeTokenCss(): void;

package/dist/components/app-shell/app-shell.d.ts

@@ -1,4 +1,3 @@
-type RootProps = React.HTMLAttributes<HTMLDivElement>;
 /**
  * AppShell — application layout shell.
  *
@@ -20,12 +19,11 @@ type RootProps = React.HTMLAttributes<HTMLDivElement>;
  *
  * @see https://mantine.dev/llms/core-app-shell.md
  */
-declare function Root({ className, ...props }: RootProps): import("react/jsx-runtime").JSX.Element;
+declare function Root(props: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
 declare namespace Root {
     var displayName: string;
 }
-type HeaderProps = React.HTMLAttributes<HTMLElement>;
-declare function Header({ className, ...props }: HeaderProps): import("react/jsx-runtime").JSX.Element;
+declare function Header(props: React.HTMLAttributes<HTMLElement>): import("react/jsx-runtime").JSX.Element;
 declare namespace Header {
     var displayName: string;
 }
@@ -33,7 +31,7 @@ type NavbarProps = React.HTMLAttributes<HTMLElement> & {
     /** Whether the mobile overlay is open. Ignored above the `md` breakpoint, where the navbar is always visible. */
     open?: boolean;
 };
-declare function Navbar({ className, open, ...props }: NavbarProps): import("react/jsx-runtime").JSX.Element;
+declare function Navbar({ open, ...props }: NavbarProps): import("react/jsx-runtime").JSX.Element;
 declare namespace Navbar {
     var displayName: string;
 }
@@ -41,17 +39,15 @@ type AsideProps = React.HTMLAttributes<HTMLElement> & {
     /** Whether the mobile overlay is open. Ignored above the `lg` breakpoint, where the aside is always visible. */
     open?: boolean;
 };
-declare function Aside({ className, open, ...props }: AsideProps): import("react/jsx-runtime").JSX.Element;
+declare function Aside({ open, ...props }: AsideProps): import("react/jsx-runtime").JSX.Element;
 declare namespace Aside {
     var displayName: string;
 }
-type FooterProps = React.HTMLAttributes<HTMLElement>;
-declare function Footer({ className, ...props }: FooterProps): import("react/jsx-runtime").JSX.Element;
+declare function Footer(props: React.HTMLAttributes<HTMLElement>): import("react/jsx-runtime").JSX.Element;
 declare namespace Footer {
     var displayName: string;
 }
-type MainProps = React.HTMLAttributes<HTMLElement>;
-declare function Main({ className, ...props }: MainProps): import("react/jsx-runtime").JSX.Element;
+declare function Main(props: React.HTMLAttributes<HTMLElement>): import("react/jsx-runtime").JSX.Element;
 declare namespace Main {
     var displayName: string;
 }
@@ -59,7 +55,7 @@ type SectionProps = React.HTMLAttributes<HTMLDivElement> & {
     /** If set, the section expands to fill the remaining space in its sidebar. */
     grow?: boolean;
 };
-declare function Section({ className, grow, ...props }: SectionProps): import("react/jsx-runtime").JSX.Element;
+declare function Section({ grow, ...props }: SectionProps): import("react/jsx-runtime").JSX.Element;
 declare namespace Section {
     var displayName: string;
 }

package/dist/components/button/button.d.ts

@@ -5,26 +5,21 @@ declare const button: (props?: ({
     size?: "sm" | "md" | "lg" | "hero" | null | undefined;
     chamfer?: boolean | null | undefined;
     radius?: "sm" | "md" | "lg" | "none" | "round" | null | undefined;
+    context?: "default" | "oncolor" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
-type UpstreamButton = React.ComponentProps<typeof ButtonPrimitive>;
-type Props = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "className" | "style"> & VariantProps<typeof button> & {
-    /** @default false */
-    focusableWhenDisabled?: boolean;
-    /** @default true */
-    nativeButton?: boolean;
+interface Props extends React.ComponentProps<typeof ButtonPrimitive>, VariantProps<typeof button> {
     /** Leading slot — typically a label. When present, the label aligns right and the icon pins left. */
     startIcon?: React.ReactNode;
     /** Trailing slot — typically an icon. When present, the label aligns left and the icon pins right. */
     endIcon?: React.ReactNode;
-    className?: UpstreamButton["className"];
-    style?: UpstreamButton["style"];
-    render?: UpstreamButton["render"];
-};
+}
 /**
- * Button component
+ * Button
  *
  * @doc https://base-ui.com/react/components/button
  * @llm https://base-ui.com/react/components/button.md
  */
-export declare function Button({ variant, size, chamfer, radius, className, startIcon, endIcon, children, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export declare function Button({ variant, size, 
+/** Explicit saturated-surface context; this is never inferred from an ancestor. */
+context, chamfer, radius, startIcon, endIcon, children, ...props }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/callout/callout.d.ts

@@ -3,39 +3,32 @@ declare const root: (props?: ({
     variant?: "positive" | "negative" | "warning" | "info" | "accent-1" | "accent-2" | "accent-3" | null | undefined;
     maxWidth?: "sm" | "md" | "lg" | "full" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
-type RootProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof root>;
 /**
- * Callout.Root — the banner container. Sets the `variant` (which tints the
- * surface and colours the icon and text) and lays out a leading `Callout.Icon`
- * beside a text region of `Callout.Title` / `Callout.Description`. `maxWidth`
- * caps the banner so it reads as a block region rather than stretching full
- * container width. A persistent element in the content flow — not a transient
- * Toast, not a modal Alert Dialog.
+ * Callout.Root — the banner container. Sets `variant` (tints surface, icon, and text) and lays
+ * out a leading `Callout.Icon` beside `Callout.Title` / `Callout.Description`. `maxWidth` caps
+ * the banner so it reads as a block region, not full container width. A persistent content-flow
+ * element — not a transient Toast, not a modal Alert Dialog.
  */
-declare function Root({ variant, maxWidth, className, children, ...props }: RootProps): import("react/jsx-runtime").JSX.Element;
+declare function Root({ variant, maxWidth, children, ...props }: React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof root>): import("react/jsx-runtime").JSX.Element;
 declare namespace Root {
     var displayName: string;
 }
-type IconProps = React.HTMLAttributes<HTMLSpanElement>;
 /**
- * Callout.Icon — the leading status glyph. With no children it renders the
- * variant's default local icon; pass a custom icon as children to override.
- * `aria-hidden` (the variant is conveyed by copy, not the glyph) and inherits
- * the status colour via `currentColor`.
+ * Callout.Icon — the leading status glyph. Renders the variant's default icon when no children
+ * are passed; pass a custom icon as children to override. `aria-hidden` (variant is conveyed by
+ * copy) and inherits colour via `currentColor`.
  */
-declare function Icon({ className, children, ...props }: IconProps): import("react/jsx-runtime").JSX.Element;
+declare function Icon({ children, ...props }: React.HTMLAttributes<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;
 declare namespace Icon {
     var displayName: string;
 }
-type TitleProps = React.HTMLAttributes<HTMLDivElement>;
 /** Callout.Title — an optional short heading, set in the semi-mono UPPERCASE technical voice. */
-declare function Title({ className, ...props }: TitleProps): import("react/jsx-runtime").JSX.Element;
+declare function Title(props: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
 declare namespace Title {
     var displayName: string;
 }
-type DescriptionProps = React.HTMLAttributes<HTMLDivElement>;
 /** Callout.Description — the message body, set in the editorial (grotesk) body voice. */
-declare function Description({ className, ...props }: DescriptionProps): import("react/jsx-runtime").JSX.Element;
+declare function Description(props: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
 declare namespace Description {
     var displayName: string;
 }

package/dist/components/card/card.d.ts

@@ -23,32 +23,33 @@ type RootProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof root
  * The image is always the first entry in the stack, so `orientation` just
  * switches the stack between a column and a row without reordering slots.
  *
- * The ImFusion brand ships flat (`shadow="none"`), but the shadow scale is a
- * first-class opt-in axis for third-party consumers. `shadow` picks the elevation
- * level only — how hard or spread that shadow reads is a global lighting decision,
- * owned by the `--imf-ui-shadow-hardness` / `--imf-ui-shadow-spread` tokens.
+ * `shadow` defaults to `lg`; `shadow="none"` gives the flat surface. It picks the elevation level only: how hard or
+ * spread the shadow reads is global, set by `--imf-ui-shadow-hardness` and `--imf-ui-shadow-spread`.
  */
-declare function Root({ density, variant, shadow, radius, orientation, withBorder, className, ...props }: RootProps): import("react/jsx-runtime").JSX.Element;
+declare function Root({ density, variant, shadow, radius, orientation, withBorder, ...props }: RootProps): import("react/jsx-runtime").JSX.Element;
 declare namespace Root {
     var displayName: string;
 }
-type ImageProps = React.ImgHTMLAttributes<HTMLImageElement>;
+type ImageProps = React.ImgHTMLAttributes<HTMLImageElement> & {
+    /** Width divided by height, or "auto" to use the image's intrinsic ratio. */
+    aspectRatio?: number | "auto";
+};
 /**
  * Card.Image — an edge-to-edge media slot. Has no padding, so the image bleeds
  * to the card edges. Always place it first among the slots.
  */
-declare function Image({ className, alt, ...props }: ImageProps): import("react/jsx-runtime").JSX.Element;
+declare function Image({ alt, aspectRatio, style, ...props }: ImageProps): import("react/jsx-runtime").JSX.Element;
 declare namespace Image {
     var displayName: string;
 }
 type SlotProps = React.HTMLAttributes<HTMLDivElement>;
 /** Card.Header — the padded title region at the top of the card body. */
-declare function Header({ className, ...props }: SlotProps): import("react/jsx-runtime").JSX.Element;
+declare function Header(props: SlotProps): import("react/jsx-runtime").JSX.Element;
 declare namespace Header {
     var displayName: string;
 }
 /** Card.Content — the padded main body of the card. */
-declare function Content({ className, ...props }: SlotProps): import("react/jsx-runtime").JSX.Element;
+declare function Content(props: SlotProps): import("react/jsx-runtime").JSX.Element;
 declare namespace Content {
     var displayName: string;
 }
@@ -57,7 +58,7 @@ declare namespace Content {
  * the card fill by default; override `background` in `style` for a distinct
  * action bar.
  */
-declare function Footer({ className, ...props }: SlotProps): import("react/jsx-runtime").JSX.Element;
+declare function Footer(props: SlotProps): import("react/jsx-runtime").JSX.Element;
 declare namespace Footer {
     var displayName: string;
 }

package/dist/components/checkbox/checkbox.d.ts

@@ -1,56 +1,20 @@
 import { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox';
-type UpstreamRoot = React.ComponentProps<typeof CheckboxPrimitive.Root>;
-type UpstreamIndicator = React.ComponentProps<typeof CheckboxPrimitive.Indicator>;
-type RootProps = Omit<React.HTMLAttributes<HTMLSpanElement>, "className" | "style"> & {
-    /** @default false */
-    defaultChecked?: boolean;
-    checked?: boolean;
-    onCheckedChange?: UpstreamRoot["onCheckedChange"];
-    /** @default false */
-    indeterminate?: boolean;
-    /** @default false */
-    disabled?: boolean;
-    /** @default false */
-    readOnly?: boolean;
-    /** @default false */
-    required?: boolean;
-    /** @default false */
-    nativeButton?: boolean;
-    /** @default false */
-    parent?: boolean;
-    name?: string;
-    value?: string;
-    uncheckedValue?: string;
-    form?: string;
-    inputRef?: React.Ref<HTMLInputElement>;
-    className?: UpstreamRoot["className"];
-    style?: UpstreamRoot["style"];
-    render?: UpstreamRoot["render"];
-};
 /**
  * Checkbox.Root — binary form control; renders a `<span>` plus a hidden `<input>`.
  *
  * @doc https://base-ui.com/react/components/checkbox
  * @llm https://base-ui.com/react/components/checkbox.md
  */
-export declare function Root({ className, ...props }: RootProps): import("react/jsx-runtime").JSX.Element;
+export declare function Root(props: React.ComponentProps<typeof CheckboxPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
 export declare namespace Root {
     var displayName: string;
 }
-type IndicatorProps = Omit<React.HTMLAttributes<HTMLSpanElement>, "className" | "style"> & {
-    /** @default false */
-    keepMounted?: boolean;
-    className?: UpstreamIndicator["className"];
-    style?: UpstreamIndicator["style"];
-    render?: UpstreamIndicator["render"];
-};
 /**
  * Checkbox.Indicator — shows the checked / indeterminate mark. Ships brand
  * icons by default (check, and a minus while `indeterminate`); pass children
  * to replace them.
  */
-export declare function Indicator({ className, children, ...props }: IndicatorProps): import("react/jsx-runtime").JSX.Element;
+export declare function Indicator({ children, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Indicator>): import("react/jsx-runtime").JSX.Element;
 export declare namespace Indicator {
     var displayName: string;
 }
-export {};

package/dist/components/chip/chip.cva.d.ts

@@ -1,9 +1,7 @@
 /**
  * Shared variants for `Chip` and any sibling primitive that renders the same
- * Chip visual on a different element (`ChipLink` renders `<a>`; a future
- * `ChipButton` would render `<button>`). Keeping them in their own module
- * means variant axes stay aligned without cross-component imports of a
- * component file.
+ * visual on a different element (`ChipLink` renders `<a>`). Keeping them here
+ * avoids cross-component imports between Chip and its siblings.
  */
 export declare const chip: (props?: ({
     variant?: "primary" | "positive" | "negative" | "main" | "support" | "minor" | "brand" | "warning" | "info" | "accent-1" | "accent-2" | "accent-3" | null | undefined;

package/dist/components/chip/chip.d.ts

@@ -7,5 +7,5 @@ type Props = React.HTMLAttributes<HTMLSpanElement> & VariantProps<typeof chip> &
  * Chip — compact inline label for status or category.
  * Not based on any upstream component.
  */
-export declare function Chip({ variant, appearance, inline, className, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export declare function Chip({ variant, appearance, inline, ...props }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/code/code.d.ts

@@ -10,7 +10,7 @@ type InlineProps = Omit<useRender.ComponentProps<"code">, "children"> & {
  * text. `Typo.InlineCode` renders this under the hood so inline-code chrome is
  * defined in one place. The copy button copies the rendered text.
  */
-export declare function Inline({ className, copyable, children, render, ...props }: InlineProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+export declare function Inline({ copyable, children, render, ...props }: InlineProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
 export declare namespace Inline {
     var displayName: string;
 }
@@ -22,7 +22,7 @@ type InlineLinkProps = useRender.ComponentProps<"a"> & {
 /**
  * Code.InlineLink — the inline-code chip rendered as a link: the same hairline
  * box, with an optional directional arrow behind the separator instead of a copy button.
- * Sibling of `Code.Inline`, sharing its chip visual (`.inline`) — never both a
+ * Sibling of `Code.Inline`, sharing its chip visual (`.inline`). Never both a
  * copy button and a link on the same chip. Mirrors `ChipLink`'s shape (anchor
  * is the chip root, trailing icon nudges on hover, `data-kind` picks the icon).
  */

package/dist/components/collapsible/collapsible.d.ts

@@ -1,56 +1,25 @@
 import { Collapsible as CollapsiblePrimitive } from '@base-ui/react/collapsible';
 import { VariantProps } from 'class-variance-authority';
-type UpstreamRoot = React.ComponentProps<typeof CollapsiblePrimitive.Root>;
-type UpstreamTrigger = React.ComponentProps<typeof CollapsiblePrimitive.Trigger>;
-type UpstreamPanel = React.ComponentProps<typeof CollapsiblePrimitive.Panel>;
 declare const collapsibleRoot: (props?: ({
-    variant?: "solid" | "default" | null | undefined;
+    variant?: "default" | "solid" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
-type RootProps = Omit<React.HTMLAttributes<HTMLDivElement>, "className" | "style"> & VariantProps<typeof collapsibleRoot> & {
-    /** Visual treatment applied to the trigger. `solid` gives the trigger a contained surface background; `default` is transparent at rest and drenched-blue when open. */
-    /** @default false */
-    defaultOpen?: UpstreamRoot["defaultOpen"];
-    open?: UpstreamRoot["open"];
-    onOpenChange?: UpstreamRoot["onOpenChange"];
-    /** @default false */
-    disabled?: UpstreamRoot["disabled"];
-    className?: UpstreamRoot["className"];
-    style?: UpstreamRoot["style"];
-    render?: UpstreamRoot["render"];
-};
 /**
  * Collapsible.Root — container that manages open/closed state for a trigger–panel pair.
  *
  * @see https://base-ui.com/react/components/collapsible
  * @llm https://base-ui.com/react/components/collapsible.md
  */
-export declare function Root({ variant, className, ...props }: RootProps): import("react/jsx-runtime").JSX.Element;
+export declare function Root({ variant, ...props }: React.ComponentProps<typeof CollapsiblePrimitive.Root> & VariantProps<typeof collapsibleRoot>): import("react/jsx-runtime").JSX.Element;
 export declare namespace Root {
     var displayName: string;
 }
-type TriggerProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "className" | "style"> & {
-    /** @default true */
-    nativeButton?: UpstreamTrigger["nativeButton"];
-    className?: UpstreamTrigger["className"];
-    style?: UpstreamTrigger["style"];
-    render?: UpstreamTrigger["render"];
-};
 /** Collapsible.Trigger — button that toggles the panel open and closed. */
-export declare function Trigger({ className, children, ...props }: TriggerProps): import("react/jsx-runtime").JSX.Element;
+export declare function Trigger({ children, ...props }: React.ComponentProps<typeof CollapsiblePrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
 export declare namespace Trigger {
     var displayName: string;
 }
-type PanelProps = Omit<React.HTMLAttributes<HTMLDivElement>, "className" | "style"> & {
-    /** @default false */
-    hiddenUntilFound?: UpstreamPanel["hiddenUntilFound"];
-    /** @default false */
-    keepMounted?: UpstreamPanel["keepMounted"];
-    className?: UpstreamPanel["className"];
-    style?: UpstreamPanel["style"];
-    render?: UpstreamPanel["render"];
-};
 /** Collapsible.Panel — region that expands and collapses when the trigger is activated. */
-export declare function Panel({ className, ...props }: PanelProps): import("react/jsx-runtime").JSX.Element;
+export declare function Panel(props: React.ComponentProps<typeof CollapsiblePrimitive.Panel>): import("react/jsx-runtime").JSX.Element;
 export declare namespace Panel {
     var displayName: string;
 }

package/dist/components/copy-button/copy-button.d.ts

@@ -14,7 +14,7 @@ type Props = Omit<React.ComponentProps<typeof Button>, "children" | "onClick"> &
  * transient confirmation (Copy → Check). Composes Button rather than rendering
  * its own element, so all Button variants and native attributes pass through.
  */
-export declare function CopyButton({ value, label, copiedLabel, variant, size, className, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export declare function CopyButton({ value, label, copiedLabel, variant, size, ...props }: Props): import("react/jsx-runtime").JSX.Element;
 export declare namespace CopyButton {
     var displayName: string;
 }