@imfusion/web-ui 0.6.4-dev.8.g41d03f2f → 0.7.0

package/dist/components/toggle-group/toggle-group.d.ts

@@ -1,23 +1,6 @@
 import { ToggleGroup as ToggleGroupPrimitive } from '@base-ui/react/toggle-group';
-type UpstreamRoot = React.ComponentProps<typeof ToggleGroupPrimitive>;
-type Props = Omit<React.HTMLAttributes<HTMLDivElement>, "className" | "style" | "defaultValue"> & {
-    /** Values of the currently pressed items (controlled). Always an array, even in single-select. */
-    value?: UpstreamRoot["value"];
-    /** Values of the initially pressed items (uncontrolled). */
-    defaultValue?: UpstreamRoot["defaultValue"];
-    onValueChange?: UpstreamRoot["onValueChange"];
-    /** @default false */
-    multiple?: UpstreamRoot["multiple"];
-    /** @default false */
-    disabled?: UpstreamRoot["disabled"];
-    /** @default "horizontal" */
-    orientation?: UpstreamRoot["orientation"];
-    /** @default true */
-    loopFocus?: UpstreamRoot["loopFocus"];
-    className?: UpstreamRoot["className"];
-    style?: UpstreamRoot["style"];
-    render?: UpstreamRoot["render"];
-};
+interface Props extends React.ComponentProps<typeof ToggleGroupPrimitive> {
+}
 /**
  * ToggleGroup - a set of connected `Toggle`s sharing one value. Single-select by
  * default (a segmented control); set `multiple` for multi-select. Compose one
@@ -26,5 +9,5 @@ type Props = Omit<React.HTMLAttributes<HTMLDivElement>, "className" | "style" |
  * @doc https://base-ui.com/react/components/toggle-group
  * @llm https://base-ui.com/react/components/toggle-group.md
  */
-export declare function ToggleGroup({ className, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export declare function ToggleGroup(props: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/tooltip/tooltip.d.ts

@@ -1,21 +1,14 @@
 import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip';
-type UpstreamProvider = React.ComponentProps<typeof TooltipPrimitive.Provider>;
+import { VariantProps } from 'class-variance-authority';
 type UpstreamTrigger = React.ComponentProps<typeof TooltipPrimitive.Trigger>;
-type UpstreamPortal = React.ComponentProps<typeof TooltipPrimitive.Portal>;
-type UpstreamPositioner = React.ComponentProps<typeof TooltipPrimitive.Positioner>;
-type UpstreamPopup = React.ComponentProps<typeof TooltipPrimitive.Popup>;
-type UpstreamArrow = React.ComponentProps<typeof TooltipPrimitive.Arrow>;
-type UpstreamViewport = React.ComponentProps<typeof TooltipPrimitive.Viewport>;
+declare const tooltipTrigger: (props?: ({
+    variant?: "primary" | "secondary" | "positive" | "negative" | null | undefined;
+    inline?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+declare const tooltipPopup: (props?: ({
+    variant?: "primary" | "secondary" | "positive" | "negative" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export declare const createHandle: typeof TooltipPrimitive.createHandle;
-type ProviderProps = {
-    /** @default undefined */
-    delay?: UpstreamProvider["delay"];
-    /** @default undefined */
-    closeDelay?: UpstreamProvider["closeDelay"];
-    /** @default 400 */
-    timeout?: UpstreamProvider["timeout"];
-    children?: UpstreamProvider["children"];
-};
 /**
  * Tooltip.Provider — shares open/close delay across a group of tooltips so
  * moving between neighbouring triggers feels instant. Renders no DOM element.
@@ -23,7 +16,7 @@ type ProviderProps = {
  * @see https://base-ui.com/react/components/tooltip
  * @llm https://base-ui.com/react/components/tooltip.md
  */
-export declare function Provider(props: ProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function Provider(props: React.ComponentProps<typeof TooltipPrimitive.Provider>): import("react/jsx-runtime").JSX.Element;
 export declare namespace Provider {
     var displayName: string;
 }
@@ -38,103 +31,51 @@ export declare function Root<Payload = unknown>(props: RootProps<Payload>): impo
 export declare namespace Root {
     var displayName: string;
 }
-type TriggerProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "className"> & {
-    variant?: "primary" | "secondary" | "positive" | "negative";
-    inline?: boolean;
+interface TriggerProps extends UpstreamTrigger, VariantProps<typeof tooltipTrigger> {
     /**
-     * Milliseconds to wait before opening on hover. Defaults to a snappier value
-     * than Base UI's 600ms — a deliberate imf default per "make the correct
-     * choice the easy one". Grouped triggers under a `Tooltip.Provider` open
-     * instantly after the first regardless of this value.
+     * Milliseconds to wait before opening on hover. Defaults to less than Base
+     * UI's 600ms, deliberately. Grouped triggers under a `Tooltip.Provider` open instantly
+     * after the first, regardless of this value.
      */
     delay?: UpstreamTrigger["delay"];
-    /** @default 0 */
-    closeDelay?: UpstreamTrigger["closeDelay"];
-    /** @default false */
-    disabled?: UpstreamTrigger["disabled"];
-    handle?: UpstreamTrigger["handle"];
-    payload?: UpstreamTrigger["payload"];
-    className?: UpstreamTrigger["className"];
-    render?: UpstreamTrigger["render"];
-};
+}
 /** Tooltip.Trigger — element that reveals the tooltip on hover or focus. */
-export declare function Trigger({ variant, inline, delay, className, ...props }: TriggerProps): import("react/jsx-runtime").JSX.Element;
+export declare function Trigger({ variant, inline, delay, ...props }: TriggerProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Trigger {
     var displayName: string;
 }
-type PortalProps = {
-    container?: UpstreamPortal["container"];
-    /** @default false */
-    keepMounted?: UpstreamPortal["keepMounted"];
-    children?: UpstreamPortal["children"];
-};
 /** Tooltip.Portal — renders the positioner in a portal outside the main document flow. */
-export declare function Portal(props: PortalProps): import("react/jsx-runtime").JSX.Element;
+export declare function Portal(props: React.ComponentProps<typeof TooltipPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
 export declare namespace Portal {
     var displayName: string;
 }
-type PositionerProps = Omit<React.HTMLAttributes<HTMLDivElement>, "className"> & {
-    /** @default 'top' */
-    side?: UpstreamPositioner["side"];
-    /** @default 'center' */
-    align?: UpstreamPositioner["align"];
-    sideOffset?: UpstreamPositioner["sideOffset"];
-    /** @default 0 */
-    alignOffset?: UpstreamPositioner["alignOffset"];
-    /** @default 5 */
-    arrowPadding?: UpstreamPositioner["arrowPadding"];
-    anchor?: UpstreamPositioner["anchor"];
-    /** @default false */
-    disableAnchorTracking?: UpstreamPositioner["disableAnchorTracking"];
-    collisionAvoidance?: UpstreamPositioner["collisionAvoidance"];
-    /** @default 'clipping-ancestors' */
-    collisionBoundary?: UpstreamPositioner["collisionBoundary"];
-    /** @default 5 */
-    collisionPadding?: UpstreamPositioner["collisionPadding"];
-    /** @default false */
-    sticky?: UpstreamPositioner["sticky"];
-    className?: UpstreamPositioner["className"];
-    render?: UpstreamPositioner["render"];
-};
 /**
  * Tooltip.Positioner — positions the popup relative to the trigger via
  * floating-point layout.
  *
- * `sideOffset` defaults to `--arrow-size` (tooltip.module.css) + 4px — enough
- * gap for the arrow to bridge with a few px of breathing room past its tip,
- * rather than landing flush on the trigger. Keep the two in sync if either
- * changes.
+ * `sideOffset` defaults to `--arrow-size` (tooltip.module.css) + 4px, for
+ * gap past the arrow tip. Keep the two values in sync.
  */
-export declare function Positioner({ className, sideOffset, ...props }: PositionerProps): import("react/jsx-runtime").JSX.Element;
+export declare function Positioner({ sideOffset, ...props }: React.ComponentProps<typeof TooltipPrimitive.Positioner>): import("react/jsx-runtime").JSX.Element;
 export declare namespace Positioner {
     var displayName: string;
 }
-type PopupProps = Omit<React.HTMLAttributes<HTMLDivElement>, "className"> & {
+interface PopupProps extends React.ComponentProps<typeof TooltipPrimitive.Popup>, VariantProps<typeof tooltipPopup> {
     /** Match to the Trigger variant to tint the popup border accordingly. */
-    variant?: "primary" | "secondary" | "positive" | "negative";
-    className?: UpstreamPopup["className"];
-    render?: UpstreamPopup["render"];
-};
+    variant?: VariantProps<typeof tooltipPopup>["variant"];
+}
 /** Tooltip.Popup — the visible label surface. Token-mapped background and border, flat by brand default. */
-export declare function Popup({ className, variant, ...props }: PopupProps): import("react/jsx-runtime").JSX.Element;
+export declare function Popup({ variant, ...props }: PopupProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Popup {
     var displayName: string;
 }
-type ArrowProps = Omit<React.HTMLAttributes<HTMLDivElement>, "className"> & {
-    className?: UpstreamArrow["className"];
-    render?: UpstreamArrow["render"];
-};
 /** Tooltip.Arrow — visual pointer arrow anchored to the popup edge. Receives data-side for orientation. */
-export declare function Arrow({ className, ...props }: ArrowProps): import("react/jsx-runtime").JSX.Element;
+export declare function Arrow(props: React.ComponentProps<typeof TooltipPrimitive.Arrow>): import("react/jsx-runtime").JSX.Element;
 export declare namespace Arrow {
     var displayName: string;
 }
-type ViewportProps = Omit<React.HTMLAttributes<HTMLDivElement>, "className"> & {
-    className?: UpstreamViewport["className"];
-    render?: UpstreamViewport["render"];
-};
 /** Tooltip.Viewport — content wrapper that supports direction-aware animations when content swaps. */
-export declare function Viewport({ className, ...props }: ViewportProps): import("react/jsx-runtime").JSX.Element;
+export declare function Viewport(props: React.ComponentProps<typeof TooltipPrimitive.Viewport>): import("react/jsx-runtime").JSX.Element;
 export declare namespace Viewport {
     var displayName: string;
 }
@@ -146,7 +87,7 @@ type InlineProps = {
     /** Hover delay in ms before the tooltip opens. @default 150 */
     delay?: number;
     /** Which side of the trigger the popup appears on. @default 'top' */
-    side?: UpstreamPositioner["side"];
+    side?: React.ComponentProps<typeof TooltipPrimitive.Positioner>["side"];
     /** Gap between trigger and popup in px. @default 13 */
     sideOffset?: number;
 };

package/dist/components/typo/typo.d.ts

@@ -2,7 +2,7 @@ import { useRender } from '@base-ui/react/use-render';
 import { VariantProps } from 'class-variance-authority';
 import { Code } from '../code';
 declare const typo: (props?: ({
-    variant?: "primary" | "positive" | "negative" | "main" | "support" | "minor" | "brand" | "warning" | "info" | "oncolor" | "accent-1" | "accent-2" | "accent-3" | null | undefined;
+    variant?: "primary" | "positive" | "negative" | "oncolor" | "main" | "support" | "minor" | "brand" | "warning" | "info" | "accent-1" | "accent-2" | "accent-3" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 declare const spacingVariants: (props?: ({
     spacing?: "none" | "default" | null | undefined;
@@ -10,91 +10,91 @@ declare const spacingVariants: (props?: ({
 type TypoProps = VariantProps<typeof typo>;
 type SpacingProps = VariantProps<typeof spacingVariants>;
 type HeadingProps = useRender.ComponentProps<"h1"> & TypoProps & SpacingProps;
+type LongHeadingProps = HeadingProps & {
+    /** Whether lines after the first use a translucent text color. */
+    fadeAfterFirstLine?: boolean;
+};
 type ParagraphProps = useRender.ComponentProps<"p"> & TypoProps & SpacingProps;
-type DetailProps = useRender.ComponentProps<"p"> & TypoProps;
-type InlineProps = useRender.ComponentProps<"mark"> & TypoProps;
-type InlineCodeProps = React.ComponentProps<typeof Code.Inline>;
-type SmallProps = useRender.ComponentProps<"small"> & TypoProps;
-type BlockquoteProps = useRender.ComponentProps<"blockquote"> & TypoProps & SpacingProps;
-type OrderedListProps = useRender.ComponentProps<"ol"> & TypoProps & SpacingProps;
-type UnorderedListProps = useRender.ComponentProps<"ul"> & TypoProps & SpacingProps;
 export type TypoLinkKind = "external" | "internal";
 type LinkProps = useRender.ComponentProps<"a"> & TypoProps & {
     /** Link target scope. `"external"` (default) opens in a new tab; `"internal"` stays in the current tab. */
     kind?: TypoLinkKind;
 };
+/** Typo.Hero — oversized page heading. */
+export declare function Hero({ variant, spacing, fadeAfterFirstLine, render, ...props }: LongHeadingProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+export declare namespace Hero {
+    var displayName: string;
+}
 /** Typo.H1 — top-level page heading. */
-export declare function H1({ variant, spacing, className, render, ...props }: HeadingProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+export declare function H1({ variant, spacing, fadeAfterFirstLine, render, ...props }: LongHeadingProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
 export declare namespace H1 {
     var displayName: string;
 }
 /** Typo.H2 — section heading. */
-export declare function H2({ variant, spacing, className, render, ...props }: HeadingProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+export declare function H2({ variant, spacing, fadeAfterFirstLine, render, ...props }: LongHeadingProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
 export declare namespace H2 {
     var displayName: string;
 }
 /** Typo.H3 — sub-section heading. */
-export declare function H3({ variant, spacing, className, render, ...props }: HeadingProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+export declare function H3({ variant, spacing, render, ...props }: HeadingProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
 export declare namespace H3 {
     var displayName: string;
 }
 /** Typo.H4 — minor heading. */
-export declare function H4({ variant, spacing, className, render, ...props }: HeadingProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+export declare function H4({ variant, spacing, render, ...props }: HeadingProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
 export declare namespace H4 {
     var displayName: string;
 }
 /** Typo.P — body paragraph. */
-export declare function P({ variant, spacing, className, render, ...props }: ParagraphProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+export declare function P({ variant, spacing, render, ...props }: ParagraphProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
 export declare namespace P {
     var displayName: string;
 }
 /** Typo.Lead — emphasised intro paragraph. */
-export declare function Lead({ variant, spacing, className, render, ...props }: ParagraphProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+export declare function Lead({ variant, spacing, render, ...props }: ParagraphProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
 export declare namespace Lead {
     var displayName: string;
 }
 /** Typo.Detail — compact UI text, between Small (12px) and P (16px). */
-export declare function Detail({ variant, className, render, ...props }: DetailProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+export declare function Detail({ variant, render, ...props }: useRender.ComponentProps<"p"> & TypoProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
 export declare namespace Detail {
     var displayName: string;
 }
 /** Typo.Small — fine print. */
-export declare function Small({ variant, className, render, ...props }: SmallProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+export declare function Small({ variant, render, ...props }: useRender.ComponentProps<"small"> & TypoProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
 export declare namespace Small {
     var displayName: string;
 }
 /** Typo.Blockquote — pulled quotation. */
-export declare function Blockquote({ variant, spacing, className, render, ...props }: BlockquoteProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+export declare function Blockquote({ variant, spacing, render, ...props }: useRender.ComponentProps<"blockquote"> & TypoProps & SpacingProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
 export declare namespace Blockquote {
     var displayName: string;
 }
 /**
  * Typo.InlineCode — inline code fragment. Thin wrapper over `Code.Inline`, which
- * owns the inline-code styling; the rendered `<code>` carries the `Code.Inline`
- * identity. Unlike other Typo members it has no color-`variant` axis — inline
- * code is a fixed neutral chip.
+ * owns the styling and identity. No color-`variant` axis — it's a fixed neutral chip.
  */
-export declare function InlineCode(props: InlineCodeProps): import("react/jsx-runtime").JSX.Element;
+export declare function InlineCode(props: React.ComponentProps<typeof Code.Inline>): import("react/jsx-runtime").JSX.Element;
 export declare namespace InlineCode {
     var displayName: string;
 }
 /** Typo.Highlight — inline mark/highlight. */
-export declare function Highlight({ variant, className, render, ...props }: InlineProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+export declare function Highlight({ variant, render, ...props }: useRender.ComponentProps<"mark"> & TypoProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
 export declare namespace Highlight {
     var displayName: string;
 }
 /** Typo.Link — inline anchor with an optional local Web UI directional icon. */
-export declare function Link({ variant, kind, className, render, ...props }: LinkProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+export declare function Link({ variant, kind, render, ...props }: LinkProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
 export declare namespace Link {
     var displayName: string;
 }
 /** Typo.OrderedList — numbered list. */
-export declare function OrderedList({ variant, spacing, className, render, ...props }: OrderedListProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+export declare function OrderedList({ variant, spacing, render, ...props }: useRender.ComponentProps<"ol"> & TypoProps & SpacingProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
 export declare namespace OrderedList {
     var displayName: string;
 }
 /** Typo.UnorderedList — bulleted list. */
-export declare function UnorderedList({ variant, spacing, className, render, ...props }: UnorderedListProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+export declare function UnorderedList({ variant, spacing, render, ...props }: useRender.ComponentProps<"ul"> & TypoProps & SpacingProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
 export declare namespace UnorderedList {
     var displayName: string;
 }

package/dist/docgen/gen-docgen.utils.d.ts

@@ -3,10 +3,9 @@ export declare const docgenOptions: ParserOptions;
 /** Converts a kebab-case folder name to PascalCase component prefix. */
 export declare function toPascalCase(s: string): string;
 /**
- * Extracts the default value string from a react-docgen-typescript PropItem.
- * Parses JSDoc @default string literals via JSON.parse so that quoted strings
- * ("primary" → primary) and non-string literals (false, 0) both render
- * consistently with destructured defaults in the prop table.
+ * Extracts a default value from a react-docgen-typescript PropItem. Parses
+ * JSDoc @default string literals via JSON.parse so quoted strings and
+ * non-string literals render consistently with destructured defaults.
  */
 export declare function extractDefault(raw: unknown): string | null;
 /** Strips the minimum leading whitespace shared by all non-empty lines. */

package/dist/hooks/use-color-scheme.d.ts

@@ -6,20 +6,14 @@ import { ColorScheme, ColorSchemePreference } from '../types/theme';
  */
 export declare function parsePreference(stored: string | null): ColorSchemePreference;
 /**
- * Manages the active color scheme with OS preference support and localStorage persistence.
- *
- * Pass `{ value }` to drive it from an external source (e.g. a Storybook toolbar
- * global) — in that controlled mode localStorage is bypassed entirely.
- *
- * @returns `colorScheme` — the active preference; "system" means follow the OS
- * @returns `resolvedColorScheme` — the scheme currently in effect ("light" | "dark")
- * @returns `setColorScheme` — updates the preference and applies it immediately (no-op when controlled)
+ * Manages the active color scheme with OS preference support and localStorage
+ * persistence. Pass `{ value }` to drive it from an external source (e.g. a
+ * Storybook toolbar global); see the `value` param for controlled-mode behavior.
  */
 export declare function useColorScheme({ value }?: {
     /**
-     * Controlled preference. When provided, the hook applies this scheme and
-     * ignores localStorage (neither reads nor writes it), and `setColorScheme`
-     * becomes a no-op — the caller owns the value. Omit for the default
+     * Controlled preference. When provided, the hook applies this scheme and ignores
+     * localStorage entirely; `setColorScheme` becomes a no-op. Omit for the default
      * localStorage-backed behavior.
      */
     value?: ColorSchemePreference;

package/dist/hooks/use-media-query.d.ts

@@ -2,12 +2,7 @@ export interface UseMediaQueryOptions {
     getInitialValueInEffect: boolean;
 }
 /**
- * Returns whether the given media query string currently matches.
- * Updates reactively as the viewport changes.
- *
- * Copied and adapted from Mantine's useMediaQuery; no upstream
- * runtime dependency.
- *
- * @see https://github.com/mantinedev/mantine/blob/master/packages/%40mantine/hooks/src/use-media-query/use-media-query.ts
+ * Returns whether the given media query currently matches, updating
+ * reactively as the viewport changes.
  */
 export declare function useMediaQuery(query: string, initialValue?: boolean, { getInitialValueInEffect }?: UseMediaQueryOptions): boolean;