@imfusion/web-ui 0.7.2-dev.15.g211a27e5 → 0.7.2-dev.18.g7ab1515e

package/CHANGELOG.md

@@ -2,8 +2,18 @@
 
 ## [Unreleased]
 
+### Breaking
+
+- **Breaking:** Web UI components have no outer margin. `Stack` and `Row` gaps space UI, and `Prose` spaces long-form text. — Nikolaus Brunner <brunner@imfusion.com>
+  - Block `Typo` members (`Hero`, `H1`–`H4`, `P`, `Lead`, `Blockquote`, and the lists) have no default margin and no
+    `spacing` prop.
+  - `Callout.Root`, `Table.Root`, and `Code.Block` have no bottom margin.
+  - `Separator` has no `spacing` prop.
+
 ### Added
 
+- Components — Nikolaus Brunner <brunner@imfusion.com>
+  - `Prose` spaces long-form text and the blocks inside it.
 - Vite plugins — Nikolaus Brunner <brunner@imfusion.com>
   - `localWebUILink` dedupes the library's peer dependencies in an app that links a local checkout.
 - Storybook — Nikolaus Brunner <brunner@imfusion.com>
@@ -12,11 +22,15 @@
 ### Changed
 
 - Components — Nikolaus Brunner <brunner@imfusion.com>
+  - Read-only `Input`, `NumberField`, and `Select` share a dashed border, muted text, and no fill.
   - `Drawer` draws its open-edge border at `--imf-ui-border-size-1`.
   - `NavigationMenu.Link` has no hover arrow, so its label sits centered between even padding.
   - `NavigationMenu` flyout text and padding scale with the fluid body size.
   - `NavigationMenu.InlineSubmenu` spaces its rail and detail pane with one flyout padding.
 - Agent skills — Nikolaus Brunner <brunner@imfusion.com>
+  - `imf-web-ui-conventions` says when a locked field uses `readOnly`, `disabled`, or plain text.
+  - `imf-web-ui-conventions` has a Spacing section, and `imf-web-ui-audit` checks it.
+  - `imf-web-ui-update` finds the call sites of a style-only breaking change by component usage.
   - `imf-web-ui-update` measures the delta from a prerelease baseline by diffing the old package's types and styles.
   - The component and story dev skills name the Storybook CLI command for each lookup and check, and route only pixels, DOM,
     focus, and console checks to Chrome DevTools.
@@ -25,6 +39,9 @@
 
 ### Fixed
 
+- Components — Nikolaus Brunner <brunner@imfusion.com>
+  - A read-only search `Input` has no clear button.
+  - `WebUIProvider` and `useColorScheme` render on the server and hydrate from the stored and OS color scheme.
 - Storybook — Nikolaus Brunner <brunner@imfusion.com>
   - Nested sidebar groups and components indent under their parent group.
   - Sidebar components line up with the stories and docs beside them.

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

@@ -0,0 +1,2 @@
+export { Prose } from './prose';
+export { proseMeta } from './prose.meta';

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

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

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

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

package/dist/components/separator/separator.d.ts

@@ -2,7 +2,6 @@ import { Separator as SeparatorPrimitive } from '@base-ui/react/separator';
 import { VariantProps } from 'class-variance-authority';
 declare const separator: (props?: ({
     variant?: "solid" | "dashed" | "dotted" | null | undefined;
-    spacing?: "none" | "small" | "medium" | "large" | "spacious" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 interface Props extends React.ComponentProps<typeof SeparatorPrimitive>, VariantProps<typeof separator> {
 }
@@ -12,5 +11,5 @@ interface Props extends React.ComponentProps<typeof SeparatorPrimitive>, Variant
  * @see https://base-ui.com/react/components/separator
  * @llm https://base-ui.com/react/components/separator.md
  */
-export declare function Separator({ orientation, variant, spacing, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export declare function Separator({ orientation, variant, ...props }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -4,54 +4,50 @@ import { Code } from '../code';
 declare const typo: (props?: ({
     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;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
 type TypoProps = VariantProps<typeof typo>;
-type SpacingProps = VariantProps<typeof spacingVariants>;
-type HeadingProps = useRender.ComponentProps<"h1"> & TypoProps & SpacingProps;
+type HeadingProps = useRender.ComponentProps<"h1"> & TypoProps;
 type LongHeadingProps = HeadingProps & {
     /** Whether lines after the first use a translucent text color. */
     fadeAfterFirstLine?: boolean;
 };
-type ParagraphProps = useRender.ComponentProps<"p"> & TypoProps & SpacingProps;
+type ParagraphProps = useRender.ComponentProps<"p"> & TypoProps;
 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 function Hero({ variant, 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, fadeAfterFirstLine, render, ...props }: LongHeadingProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+export declare function H1({ variant, 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, fadeAfterFirstLine, render, ...props }: LongHeadingProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+export declare function H2({ variant, 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, render, ...props }: HeadingProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+export declare function H3({ variant, 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, render, ...props }: HeadingProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+export declare function H4({ variant, 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, render, ...props }: ParagraphProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+export declare function P({ variant, 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, render, ...props }: ParagraphProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+export declare function Lead({ variant, render, ...props }: ParagraphProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
 export declare namespace Lead {
     var displayName: string;
 }
@@ -66,7 +62,7 @@ export declare namespace Small {
     var displayName: string;
 }
 /** Typo.Blockquote — pulled quotation. */
-export declare function Blockquote({ variant, spacing, render, ...props }: useRender.ComponentProps<"blockquote"> & TypoProps & SpacingProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+export declare function Blockquote({ variant, render, ...props }: useRender.ComponentProps<"blockquote"> & TypoProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
 export declare namespace Blockquote {
     var displayName: string;
 }
@@ -89,12 +85,12 @@ export declare namespace Link {
     var displayName: string;
 }
 /** Typo.OrderedList — numbered list. */
-export declare function OrderedList({ variant, spacing, render, ...props }: useRender.ComponentProps<"ol"> & TypoProps & SpacingProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+export declare function OrderedList({ variant, render, ...props }: useRender.ComponentProps<"ol"> & TypoProps): 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, render, ...props }: useRender.ComponentProps<"ul"> & TypoProps & SpacingProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+export declare function UnorderedList({ variant, render, ...props }: useRender.ComponentProps<"ul"> & TypoProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
 export declare namespace UnorderedList {
     var displayName: string;
 }

package/dist/index.d.ts

@@ -15,6 +15,7 @@ export { AppShell, appShellMeta } from './components/app-shell';
 export { Card, cardMeta } from './components/card';
 export { Drawer, drawerMeta } from './components/drawer';
 export { Popover, popoverMeta } from './components/popover';
+export { Prose, proseMeta } from './components/prose';
 export { Row, rowMeta } from './components/row';
 export { Separator, separatorMeta } from './components/separator';
 export { Stack, stackMeta } from './components/stack';