@imfusion/web-ui 0.8.1-dev.6.g254fcc45 → 0.8.1-dev.64.gbde1f63f

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

@@ -1,57 +1,54 @@
-/**
- * AppShell — application layout shell.
- *
- * The classic dashboard frame: a fixed header, collapsible navbar/aside
- * sidebars, an optional footer, and a scrolling main content area. Also called
- * an app layout, application frame, dashboard shell, or sidebar layout.
- *
- * Composed of seven sub-components used with dot-notation: `AppShell.Root` wraps
- * `AppShell.Header`, `AppShell.Navbar`, `AppShell.Aside`, `AppShell.Footer`,
- * `AppShell.Main`, and (inside a sidebar) `AppShell.Section`.
- *
- * Sizing is CSS-driven — override the `--imf-ui-appshell-*` custom properties
- * rather than passing dimension props. Below the responsive breakpoints the
- * navbar (`md`) and aside (`lg`) become sliding overlays toggled via the `open`
- * prop; the consumer wires that to a burger button.
- *
- * Copied and adapted from Mantine's AppShell; no upstream runtime dependency.
- * MIT licensed (see Mantine repo).
- *
- * @see https://mantine.dev/llms/core-app-shell.md
- */
-declare function Root(props: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+import { Button as ButtonPrimitive } from '@base-ui/react/button';
+import { useRender } from '@base-ui/react/use-render';
+import { VariantProps } from 'class-variance-authority';
+declare const navbarSurface: (props?: ({
+    variant?: "default" | "branded" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+declare function Root({ ref, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
 declare namespace Root {
     var displayName: string;
 }
-declare function Header(props: React.HTMLAttributes<HTMLElement>): import("react/jsx-runtime").JSX.Element;
+declare function Header(props: React.ComponentProps<"header">): import("react/jsx-runtime").JSX.Element;
 declare namespace Header {
     var displayName: string;
 }
-type NavbarProps = React.HTMLAttributes<HTMLElement> & {
-    /** Whether the mobile overlay is open. Ignored above the `md` breakpoint, where the navbar is always visible. */
+type DrawerProps = {
+    /** Whether the drawer is open below the breakpoint. Ignored while the section is docked. */
     open?: boolean;
+    /** Called when the drawer asks to open or close: scrim, swipe, or Escape. */
+    onOpenChange?: (open: boolean) => void;
 };
-declare function Navbar({ open, ...props }: NavbarProps): import("react/jsx-runtime").JSX.Element;
+type NavbarProps = React.ComponentProps<"nav"> & VariantProps<typeof navbarSurface> & DrawerProps;
+/**
+ * `variant="branded"` paints the primary color; children opt into on-color themselves. Below `md` the navbar opens as a
+ * drawer from the inline end.
+ */
+declare function Navbar({ variant, open, onOpenChange, ...props }: NavbarProps): import("react/jsx-runtime").JSX.Element;
 declare namespace Navbar {
     var displayName: string;
 }
-type AsideProps = React.HTMLAttributes<HTMLElement> & {
-    /** Whether the mobile overlay is open. Ignored above the `lg` breakpoint, where the aside is always visible. */
-    open?: boolean;
+type AsideProps = React.ComponentProps<"aside"> & DrawerProps & {
+    /** Adds a drag handle on the inline-start edge from the `lg` breakpoint up. Double-click or Home restores the default width. */
+    resizable?: boolean;
+    /** Called with the new width in px when a drag ends, on each arrow-key step, and on reset. */
+    onWidthChange?: (width: number) => void;
+    /** Accessible name of the drag handle. */
+    resizeLabel?: string;
 };
-declare function Aside({ open, ...props }: AsideProps): import("react/jsx-runtime").JSX.Element;
+/** Below `lg` the aside opens as a drawer: from the bottom on phones, from the inline end on tablets. */
+declare function Aside({ open, onOpenChange, resizable, onWidthChange, resizeLabel, children, ...props }: AsideProps): import("react/jsx-runtime").JSX.Element;
 declare namespace Aside {
     var displayName: string;
 }
-declare function Footer(props: React.HTMLAttributes<HTMLElement>): import("react/jsx-runtime").JSX.Element;
+declare function Footer(props: React.ComponentProps<"footer">): import("react/jsx-runtime").JSX.Element;
 declare namespace Footer {
     var displayName: string;
 }
-declare function Main(props: React.HTMLAttributes<HTMLElement>): import("react/jsx-runtime").JSX.Element;
+declare function Main(props: React.ComponentProps<"main">): import("react/jsx-runtime").JSX.Element;
 declare namespace Main {
     var displayName: string;
 }
-type SectionProps = React.HTMLAttributes<HTMLDivElement> & {
+type SectionProps = React.ComponentProps<"div"> & {
     /** If set, the section expands to fill the remaining space in its sidebar. */
     grow?: boolean;
 };
@@ -59,4 +56,32 @@ declare function Section({ grow, ...props }: SectionProps): import("react/jsx-ru
 declare namespace Section {
     var displayName: string;
 }
-export { Root, Header, Navbar, Aside, Footer, Main, Section };
+type BurgerProps = React.ComponentProps<typeof ButtonPrimitive> & {
+    /** Whether the navigation it controls is open; draws the cross and sets `aria-expanded`. */
+    opened?: boolean;
+    /** Accessible name. Defaults to "Open navigation" or "Close navigation" from `opened`. */
+    label?: string;
+};
+/**
+ * AppShell.Burger — the header's menu toggle: three sheared bands that cross when `opened`. Takes its color from the
+ * surface and hides from `md` up, where the navbar is docked.
+ */
+declare function Burger({ opened, label, className, ...props }: BurgerProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Burger {
+    var displayName: string;
+}
+type NavItemProps = useRender.ComponentProps<"a"> & {
+    /** Leading icon, decorative. */
+    icon?: React.ReactNode;
+    /** One line under the label saying what is behind the link. */
+    description?: React.ReactNode;
+};
+/**
+ * AppShell.NavItem — a navbar link: icon, mono label, and an optional description. Takes its color from the navbar;
+ * `aria-current="page"` marks the current page. Pass a router link through `render`.
+ */
+declare function NavItem({ icon, description, children, render, ...props }: NavItemProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+declare namespace NavItem {
+    var displayName: string;
+}
+export { Root, Header, Navbar, Aside, Footer, Main, Section, Burger, NavItem };

package/dist/components/avatar/avatar.d.ts

@@ -2,7 +2,7 @@ import { Avatar as AvatarPrimitive } from '@base-ui/react/avatar';
 import { VariantProps } from 'class-variance-authority';
 declare const root: (props?: ({
     size?: "sm" | "md" | "lg" | null | undefined;
-    context?: "default" | "oncolor" | null | undefined;
+    context?: "oncolor" | "default" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 interface RootProps extends React.ComponentProps<typeof AvatarPrimitive.Root>, VariantProps<typeof root> {
 }

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

@@ -1,17 +1,24 @@
 import { Button as ButtonPrimitive } from '@base-ui/react/button';
 import { VariantProps } from 'class-variance-authority';
 declare const button: (props?: ({
-    variant?: "primary" | "secondary" | "positive" | "negative" | "outline" | "ghost" | null | undefined;
+    variant?: "primary" | "positive" | "negative" | "secondary" | "outline" | "ghost" | null | undefined;
     size?: "sm" | "md" | "lg" | "hero" | null | undefined;
     chamfer?: boolean | null | undefined;
-    radius?: "sm" | "md" | "lg" | "none" | "round" | null | undefined;
-    context?: "default" | "oncolor" | null | undefined;
+    radius?: "none" | "round" | "sm" | "md" | "lg" | null | undefined;
+    context?: "oncolor" | "default" | null | undefined;
+    justify?: "center" | "spread" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
-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. */
+interface Props extends VariantProps<typeof button>, React.ComponentProps<typeof ButtonPrimitive> {
+    /** Leading slot, typically an icon. */
     startIcon?: React.ReactNode;
-    /** Trailing slot — typically an icon. When present, the label aligns left and the icon pins right. */
+    /** Trailing slot, typically an icon. */
     endIcon?: React.ReactNode;
+    /**
+     * Key hint shown in the top corner at the end of the line, such as `"S"` or `"Ctrl Z"`. It also sets
+     * `aria-keyshortcuts` in its notation (`Control+Z`), which an explicit
+     * `aria-keyshortcuts` prop overrides. Display only: bind the key in the app, for example with `useHotkey` from TanStack Hotkeys.
+     */
+    shortcut?: string;
 }
 /**
  * Button
@@ -21,5 +28,5 @@ interface Props extends React.ComponentProps<typeof ButtonPrimitive>, VariantPro
  */
 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;
+context, chamfer, radius, justify, startIcon, endIcon, shortcut, children, ...props }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -9,7 +9,7 @@ declare const root: (props?: ({
  * 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, children, ...props }: React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof root>): import("react/jsx-runtime").JSX.Element;
+declare function Root({ variant, maxWidth, children, ...props }: React.ComponentProps<"div"> & VariantProps<typeof root>): import("react/jsx-runtime").JSX.Element;
 declare namespace Root {
     var displayName: string;
 }
@@ -18,17 +18,17 @@ declare namespace Root {
  * 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({ children, ...props }: React.HTMLAttributes<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;
+declare function Icon({ children, ...props }: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
 declare namespace Icon {
     var displayName: string;
 }
 /** Callout.Title — an optional short heading, set in the semi-mono UPPERCASE technical voice. */
-declare function Title(props: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+declare function Title(props: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
 declare namespace Title {
     var displayName: string;
 }
 /** Callout.Description — the message body, set in the editorial (grotesk) body voice. */
-declare function Description(props: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+declare function Description(props: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
 declare namespace Description {
     var displayName: string;
 }

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

@@ -1,12 +1,12 @@
 import { VariantProps } from 'class-variance-authority';
 declare const root: (props?: ({
     density?: "compact" | "comfortable" | "spacious" | null | undefined;
-    variant?: "primary" | "main" | "support" | "minor" | "brand" | null | undefined;
-    shadow?: "sm" | "md" | "lg" | "none" | null | undefined;
-    radius?: "sm" | "md" | "lg" | "brand" | null | undefined;
+    variant?: "main" | "support" | "minor" | "brand" | "primary" | null | undefined;
+    shadow?: "none" | "sm" | "md" | "lg" | null | undefined;
+    radius?: "brand" | "sm" | "md" | "lg" | null | undefined;
     orientation?: "horizontal" | "vertical" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
-type RootProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof root> & {
+type RootProps = React.ComponentProps<"div"> & VariantProps<typeof root> & {
     /** Draws the hairline border. Applies to the neutral variants only — coloured variants are always borderless. */
     /** @default true */
     withBorder?: boolean;
@@ -30,7 +30,7 @@ declare function Root({ density, variant, shadow, radius, orientation, withBorde
 declare namespace Root {
     var displayName: string;
 }
-type ImageProps = React.ImgHTMLAttributes<HTMLImageElement> & {
+type ImageProps = React.ComponentProps<"img"> & {
     /** Width divided by height, or "auto" to use the image's intrinsic ratio. */
     aspectRatio?: number | "auto";
 };
@@ -42,7 +42,21 @@ declare function Image({ alt, aspectRatio, style, ...props }: ImageProps): impor
 declare namespace Image {
     var displayName: string;
 }
-type SlotProps = React.HTMLAttributes<HTMLDivElement>;
+declare const status: (props?: ({
+    variant?: "positive" | "negative" | "warning" | "info" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+type StatusProps = React.ComponentProps<"div"> & VariantProps<typeof status>;
+/**
+ * Card.Status — a tinted slot that marks the card's status with the variant's glyph. Pass
+ * children to replace the glyph. Like `Card.Image`, place it first among the slots: a column
+ * beside the body in a horizontal card, a band above it in a vertical one. Decorative
+ * (`aria-hidden`); the card's text carries the status.
+ */
+declare function Status({ variant, children, ...props }: StatusProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Status {
+    var displayName: string;
+}
+type SlotProps = React.ComponentProps<"div">;
 /** Card.Header — the padded title region at the top of the card body. */
 declare function Header(props: SlotProps): import("react/jsx-runtime").JSX.Element;
 declare namespace Header {
@@ -62,4 +76,4 @@ declare function Footer(props: SlotProps): import("react/jsx-runtime").JSX.Eleme
 declare namespace Footer {
     var displayName: string;
 }
-export { Root, Image, Header, Content, Footer };
+export { Root, Image, Status, Header, Content, Footer };

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

@@ -4,7 +4,7 @@
  * 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;
+    variant?: "main" | "support" | "minor" | "brand" | "primary" | "positive" | "negative" | "warning" | "info" | "accent-1" | "accent-2" | "accent-3" | null | undefined;
     appearance?: "outline" | "solid" | "subtle" | null | undefined;
     inline?: boolean | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;

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

@@ -1,6 +1,6 @@
 import { VariantProps } from 'class-variance-authority';
 import { chip } from './chip.cva';
-type Props = React.HTMLAttributes<HTMLSpanElement> & VariantProps<typeof chip> & {
+type Props = React.ComponentProps<"span"> & VariantProps<typeof chip> & {
     children: React.ReactNode;
 };
 /**

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

@@ -1,7 +1,7 @@
 import { chip } from '../chip/chip.cva';
 import { VariantProps } from 'class-variance-authority';
 export type ChipLinkKind = "external" | "internal";
-type Props = React.AnchorHTMLAttributes<HTMLAnchorElement> & VariantProps<typeof chip> & {
+type Props = React.ComponentProps<"a"> & VariantProps<typeof chip> & {
     href: string;
     /** Link target scope. `"external"` (default) opens in a new tab with a diagonal `ArrowUpRight` icon; `"internal"` stays in the current tab with a horizontal `ArrowRight` icon. */
     kind?: ChipLinkKind;

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

@@ -30,7 +30,7 @@ export declare function InlineLink({ kind, ...props }: InlineLinkProps): import(
 export declare namespace InlineLink {
     var displayName: string;
 }
-type BlockProps = Omit<React.HTMLAttributes<HTMLPreElement>, "children"> & {
+type BlockProps = Omit<React.ComponentProps<"pre">, "children"> & {
     /** Code content shown in the block. The copy button copies its rendered text. */
     children: React.ReactNode;
     /** Language label shown in the corner notch. Omit to hide the notch. */

package/dist/components/field/field.d.ts

@@ -29,8 +29,11 @@ export declare function Control(props: React.ComponentProps<typeof FieldPrimitiv
 export declare namespace Control {
     var displayName: string;
 }
-/** Field.Error — an inline validation message shown when its match condition fails. */
-export declare function Error(props: React.ComponentProps<typeof FieldPrimitive.Error>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Field.Error — an inline validation message shown when its match condition fails.
+ * It announces itself with `role="alert"`; pass another `role` to quiet it.
+ */
+export declare function Error({ role, ...props }: React.ComponentProps<typeof FieldPrimitive.Error>): import("react/jsx-runtime").JSX.Element;
 export declare namespace Error {
     var displayName: string;
 }

package/dist/components/icon/icon.d.ts

@@ -3,7 +3,7 @@ import { IconComponent } from './types';
 export declare const ICON_VARIANTS: readonly ["inherit", "main", "support", "minor", "brand", "primary", "positive", "negative", "warning", "info", "oncolor", "accent-1", "accent-2", "accent-3"];
 export type IconVariant = (typeof ICON_VARIANTS)[number];
 declare const icon: (props?: ({
-    variant?: "primary" | "positive" | "negative" | "oncolor" | "main" | "inherit" | "support" | "minor" | "brand" | "warning" | "info" | "accent-1" | "accent-2" | "accent-3" | null | undefined;
+    variant?: "inherit" | "main" | "support" | "minor" | "brand" | "primary" | "positive" | "negative" | "warning" | "info" | "oncolor" | "accent-1" | "accent-2" | "accent-3" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 type Props = Omit<React.ComponentProps<IconComponent>, "color"> & VariantProps<typeof icon> & {
     /** Icon component imported from `@imfusion/web-ui/icons`. */

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

@@ -0,0 +1,19 @@
+import { Button } from '../button';
+import { Icon, IconComponent } from '../icon';
+interface Props extends Omit<React.ComponentProps<typeof Button>, "children" | "startIcon" | "endIcon" | "justify"> {
+    /** Icon component imported from `@imfusion/web-ui/icons`. */
+    glyph: IconComponent;
+    /** Accessible name; the button renders no visible text. */
+    label: string;
+    /** Props for the inner Icon, such as `strokeWidth` or a `size` override. */
+    iconProps?: Omit<React.ComponentProps<typeof Icon>, "glyph">;
+}
+/**
+ * IconButton — a square Button that shows a single Icon. Composes Button, so every Button variant and native attribute
+ * passes through.
+ */
+export declare function IconButton({ glyph, label, iconProps, size, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace IconButton {
+    var displayName: string;
+}
+export {};

package/dist/components/icon-button/icon-button.meta.d.ts

@@ -0,0 +1,2 @@
+import { ComponentMeta } from '../../types/meta';
+export declare const iconButtonMeta: ComponentMeta;

package/dist/components/icon-button/index.d.ts

@@ -0,0 +1,2 @@
+export { IconButton } from './icon-button';
+export { iconButtonMeta } from './icon-button.meta';

package/dist/components/kbd/aria-key-shortcuts.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Turns a displayed shortcut such as `"Ctrl Shift Z"` into the `aria-keyshortcuts` form `"Control+Shift+Z"`, which joins
+ * the keys of one combination with `+` and reserves spaces for alternatives.
+ */
+export declare function toAriaKeyShortcuts(shortcut: string): string | undefined;

package/dist/components/kbd/index.d.ts

@@ -0,0 +1,2 @@
+export { Kbd } from './kbd';
+export { kbdMeta } from './kbd.meta';

package/dist/components/kbd/kbd.d.ts

@@ -0,0 +1,14 @@
+import { VariantProps } from 'class-variance-authority';
+declare const kbd: (props?: ({
+    variant?: "primary" | "flat" | "default" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+interface Props extends React.ComponentProps<"kbd">, VariantProps<typeof kbd> {
+    /** Show a keyboard glyph before the key, to mark it as a shortcut in running text. @default false */
+    icon?: boolean;
+}
+/**
+ * Kbd — a keyboard key or shortcut, drawn as a keycap tinted from the surrounding text. A combination such as `Ctrl Z` goes
+ * in one Kbd. `flat` drops the side face for a hint inside a control.
+ */
+export declare function Kbd({ variant, icon, children, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/kbd/kbd.meta.d.ts

@@ -0,0 +1,2 @@
+import { ComponentMeta } from '../../types/meta';
+export declare const kbdMeta: ComponentMeta;

package/dist/components/logo/logo.d.ts

@@ -1,10 +1,10 @@
 import { ReactNode } from 'react';
 import { VariantProps } from 'class-variance-authority';
 declare const logo: (props?: ({
-    size?: "sm" | "md" | "lg" | "hero" | "xs" | "xl" | "fit" | null | undefined;
-    variant?: "oncolor" | "main" | "inherit" | "support" | "minor" | "brand" | null | undefined;
+    size?: "sm" | "md" | "lg" | "hero" | "xl" | "xs" | "fit" | null | undefined;
+    variant?: "inherit" | "main" | "support" | "minor" | "brand" | "oncolor" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
-type Props = Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> & VariantProps<typeof logo> & {
+type Props = Omit<React.ComponentProps<"span">, "children"> & VariantProps<typeof logo> & {
     /** Logo source — an image URL or inline SVG node. No brand default; see `ImFusionLogo` for the ImFusion mark. */
     src: string | ReactNode;
     alt: string;

package/dist/components/meter/index.d.ts

@@ -0,0 +1,2 @@
+export * as Meter from './meter';
+export { meterMeta } from './meter.meta';

package/dist/components/meter/meter.d.ts

@@ -0,0 +1,33 @@
+import { Meter as MeterPrimitive } from '@base-ui/react/meter';
+/**
+ * Meter.Root — read-only measurement of a value within a known range.
+ *
+ * Without a visible `Meter.Label`, name the meter with `aria-label`.
+ *
+ * @doc https://base-ui.com/react/components/meter
+ * @llm https://base-ui.com/react/components/meter.md
+ */
+export declare function Root({ min, max, ...props }: React.ComponentProps<typeof MeterPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Root {
+    var displayName: string;
+}
+/** Meter.Label — accessible label for the meter. */
+export declare function Label(props: React.ComponentProps<typeof MeterPrimitive.Label>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Label {
+    var displayName: string;
+}
+/** Meter.Value — formatted readout of the current value. */
+export declare function Value(props: React.ComponentProps<typeof MeterPrimitive.Value>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Value {
+    var displayName: string;
+}
+/** Meter.Track — the full range. */
+export declare function Track(props: React.ComponentProps<typeof MeterPrimitive.Track>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Track {
+    var displayName: string;
+}
+/** Meter.Indicator — filled portion of the track up to the value. */
+export declare function Indicator(props: React.ComponentProps<typeof MeterPrimitive.Indicator>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Indicator {
+    var displayName: string;
+}

package/dist/components/meter/meter.meta.d.ts

@@ -0,0 +1,2 @@
+import { ComponentMeta } from '../../types/meta';
+export declare const meterMeta: ComponentMeta;

package/dist/components/navigation-menu/subs/link.d.ts

@@ -15,7 +15,7 @@ export declare namespace Link {
  * Owns the flyout list layout so consumers wrap each card in an `<li>` and add no
  * layout styling of their own. Renders a `<ul>`.
  */
-export declare function LinkList(props: React.HTMLAttributes<HTMLUListElement>): import("react/jsx-runtime").JSX.Element;
+export declare function LinkList(props: React.ComponentProps<"ul">): import("react/jsx-runtime").JSX.Element;
 export declare namespace LinkList {
     var displayName: string;
 }

package/dist/components/popover/popover.d.ts

@@ -1,11 +1,11 @@
 import { Popover as PopoverPrimitive } from '@base-ui/react/popover';
 import { VariantProps } from 'class-variance-authority';
 declare const popoverTrigger: (props?: ({
-    variant?: "primary" | "secondary" | "positive" | "negative" | "outline" | "ghost" | null | undefined;
+    variant?: "primary" | "positive" | "negative" | "secondary" | "outline" | "ghost" | null | undefined;
     inline?: boolean | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 declare const popoverPopup: (props?: ({
-    variant?: "primary" | "secondary" | "positive" | "negative" | "outline" | "ghost" | null | undefined;
+    variant?: "primary" | "positive" | "negative" | "secondary" | "outline" | "ghost" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export declare const createHandle: typeof PopoverPrimitive.createHandle;
 type RootProps<Payload = unknown> = React.ComponentProps<typeof PopoverPrimitive.Root<Payload>>;
@@ -59,7 +59,7 @@ export declare namespace Viewport {
     var displayName: string;
 }
 /** Popover.Eyebrow — small uppercase label above Title, for a category or kicker (e.g. "Glossary definition"). */
-export declare function Eyebrow(props: React.HTMLAttributes<HTMLParagraphElement>): import("react/jsx-runtime").JSX.Element;
+export declare function Eyebrow(props: React.ComponentProps<"p">): import("react/jsx-runtime").JSX.Element;
 export declare namespace Eyebrow {
     var displayName: string;
 }

package/dist/components/prose/prose.d.ts

@@ -1 +1 @@
-export declare function Prose(props: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+export declare function Prose(props: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;

package/dist/components/row/row.d.ts

@@ -1,11 +1,11 @@
 import { VariantProps } from 'class-variance-authority';
 declare const row: (props?: ({
     gap?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | null | undefined;
-    align?: "center" | "end" | "start" | "stretch" | null | undefined;
-    justify?: "center" | "end" | "start" | "between" | "around" | "evenly" | null | undefined;
+    align?: "end" | "center" | "start" | "stretch" | null | undefined;
+    justify?: "end" | "center" | "start" | "between" | "around" | "evenly" | null | undefined;
     wrap?: boolean | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
-type Props = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof row> & {
+type Props = React.ComponentProps<"div"> & VariantProps<typeof row> & {
     /**
      * Cross-axis alignment. Sets both `align-items` (item alignment within a
      * row) and `align-content` (row distribution when `wrap` is on). `"stretch"`

package/dist/components/skeleton/index.d.ts

@@ -0,0 +1,2 @@
+export * as Skeleton from './skeleton';
+export { skeletonMeta } from './skeleton.meta';

package/dist/components/skeleton/skeleton.d.ts

@@ -0,0 +1,47 @@
+import { useRender } from '@base-ui/react/use-render';
+type RootProps = useRender.ComponentProps<"div"> & {
+    /** Announced once through a visually hidden status. Pass `""` when something else already speaks for the region. */
+    label: string;
+    /** `none` holds every bone inside still. */
+    animation?: "shimmer" | "none";
+};
+/**
+ * Skeleton.Root — marks a region as loading. The view inside renders for real; bones stand in for the data. Sets
+ * `aria-busy` and announces `label` once, however many bones it holds.
+ */
+declare function Root({ label, animation, render, ...props }: RootProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Root {
+    var displayName: string;
+}
+type TextProps = React.ComponentProps<"span"> & {
+    /** Width of the bar, capped at the container width. */
+    width?: React.CSSProperties["width"];
+    /** Number of stacked lines. The last of several is 60% wide. */
+    lines?: number;
+};
+/**
+ * Skeleton.Text — a text bar exactly one line of the parent's font tall. Place it inside the real Typo element so the
+ * row keeps the loaded row's height.
+ */
+declare function Text({ width, lines, style, ...props }: TextProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Text {
+    var displayName: string;
+}
+type BlockProps = React.ComponentProps<"span"> & ({
+    /** `circle` takes its size from `width`, for avatars. */
+    shape?: "rect";
+    /** Width of the block, capped at the container width. A circle uses it for both sides. */
+    width?: React.CSSProperties["width"];
+    /** Height of the block. */
+    height: React.CSSProperties["height"];
+} | {
+    shape: "circle";
+    width: React.CSSProperties["width"];
+    height?: never;
+});
+/** Skeleton.Block — a sized placeholder for a shaped element such as a meter, chip, or avatar. */
+declare function Block({ width, shape, height, style, ...props }: BlockProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Block {
+    var displayName: string;
+}
+export { Root, Text, Block };

package/dist/components/skeleton/skeleton.meta.d.ts

@@ -0,0 +1,2 @@
+import { ComponentMeta } from '../../types/meta';
+export declare const skeletonMeta: ComponentMeta;

package/dist/components/slider/slider.d.ts

@@ -1,11 +1,20 @@
 import { Slider as SliderPrimitive } from '@base-ui/react/slider';
+import { VariantProps } from 'class-variance-authority';
+declare const sliderRoot: (props?: ({
+    variant?: "default" | "position" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+interface RootProps extends React.ComponentProps<typeof SliderPrimitive.Root>, VariantProps<typeof sliderRoot> {
+}
 /**
  * Slider.Root — value selector along a continuous or stepped track.
  *
+ * `variant="position"` draws a scrollbar-like trough and bar thumb for picking one position
+ * between `min` and `max`, such as a slice or frame; `onValueChange` reports the position.
+ *
  * @doc https://base-ui.com/react/components/slider
  * @llm https://base-ui.com/react/components/slider.md
  */
-export declare function Root({ value, defaultValue, onValueChange, onValueCommitted, min, max, step, largeStep, minStepsBetweenValues, disabled, orientation, name, form, locale, thumbAlignment, thumbCollisionBehavior, format, ...props }: React.ComponentProps<typeof SliderPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+export declare function Root({ variant, value, defaultValue, onValueChange, onValueCommitted, min, max, step, largeStep, minStepsBetweenValues, disabled, orientation, name, form, locale, thumbAlignment, thumbCollisionBehavior, format, ...props }: RootProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Root {
     var displayName: string;
 }
@@ -39,3 +48,4 @@ export declare function Thumb({ index, ...props }: React.ComponentProps<typeof S
 export declare namespace Thumb {
     var displayName: string;
 }
+export {};

package/dist/components/spinner/spinner.d.ts

@@ -7,7 +7,7 @@ declare const sources: {
 declare const spinner: (props?: ({
     size?: "sm" | "md" | "lg" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
-type Props = Omit<React.HTMLAttributes<HTMLSpanElement>, "role"> & VariantProps<typeof spinner> & {
+type Props = Omit<React.ComponentProps<"span">, "role"> & VariantProps<typeof spinner> & {
     /** Accessible label announced by assistive tech. */
     label?: string;
     /**

package/dist/components/stack/stack.d.ts

@@ -1,10 +1,10 @@
 import { VariantProps } from 'class-variance-authority';
 declare const stack: (props?: ({
     gap?: "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | null | undefined;
-    align?: "center" | "end" | "start" | "stretch" | null | undefined;
-    justify?: "center" | "end" | "start" | "between" | "around" | "evenly" | null | undefined;
+    align?: "end" | "center" | "start" | "stretch" | null | undefined;
+    justify?: "end" | "center" | "start" | "between" | "around" | "evenly" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
-type Props = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof stack>;
+type Props = React.ComponentProps<"div"> & VariantProps<typeof stack>;
 /**
  * Stack — vertical layout primitive.
  *