@imfusion/web-ui 0.8.1-dev.48.g0dad5878 → 0.8.1-dev.50.g91c115bb

package/CHANGELOG.md

@@ -59,6 +59,9 @@ workflows already ask for stay as they are. Say "change my profile" to answer ag
     values such as emails anywhere, and takes a `render` prop for router links.
   - `Skeleton` holds the place of loading data: `Skeleton.Text` is one line of its parent's font tall, `Skeleton.Block`
     takes a size or a circle, and `Skeleton.Root` announces the load once and can hold its scan line still.
+  - `Button` has a `justify` prop: `center` or `spread`, which pins the icons to the edges of a stretched button.
+  - `Meter` shows a measured amount within a range, such as seats in use, as a read-only bar with an optional label and
+    value readout. ([WEBSDK-250](https://imfusion.atlassian.net/browse/WEBSDK-250))
 - Components — Stephan Wenninger <wenninger@imfusion.com>
   - `Slider.Root` has a `variant="position"` that draws a scrollbar-like trough and bar thumb for picking one position in a
     range.
@@ -98,6 +101,9 @@ workflows already ask for stay as they are. Say "change my profile" to answer ag
     catalog filters by origin and badges every icon with it. While no category filter is set, each tile also names the
     icon's category.
 
+- Components — Nikolaus Brunner <brunner@imfusion.com>
+  - `Button` centers its icons and label when a container stretches it wider than its content; `justify="spread"`
+    keeps the icons at the edges.
 - Documentation — Nikolaus Brunner <brunner@imfusion.com>
   - The `CodeHighlight` install section names TanStack Highlight 0.1.x and the 0.1.0 build it is tested against.
   - The consumer agent tooling diagram groups the skills you run in one lane, so the router and the profile each reach them
@@ -145,6 +151,7 @@ workflows already ask for stay as they are. Say "change my profile" to answer ag
   - Screen readers announce `Field.Error` when its message appears; it has `role="alert"` by default.
   - `WebUIProvider` and the components under it render on React 18, the runtime Claude's design canvases use.
   - On-color `ghost` and `outline` Buttons invert to a white fill on hover instead of near-black.
+  - `Button`'s `startIcon` sits level with the label.
 - Peer dependencies — Nikolaus Brunner <brunner@imfusion.com>
   - The `@imfusion/sdk` and `@imfusion/sdk-react` peers accept any version, SDK dev builds included. The
     `FrameSelection` and `ImageDisplayOptions` install sections name SDK 1.x and the 1.0.0 build they are tested against.

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

@@ -6,11 +6,12 @@ declare const button: (props?: ({
     chamfer?: boolean | null | undefined;
     radius?: "sm" | "md" | "lg" | "none" | "round" | null | undefined;
     context?: "default" | "oncolor" | null | undefined;
+    justify?: "center" | "spread" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 interface Props extends VariantProps<typeof button>, React.ComponentProps<typeof ButtonPrimitive> {
-    /** Leading slot — typically a label. When present, the label aligns right and the icon pins left. */
+    /** 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;
 }
 /**
@@ -21,5 +22,5 @@ interface Props extends VariantProps<typeof button>, React.ComponentProps<typeof
  */
 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, children, ...props }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,6 +1,6 @@
 import { Button } from '../button';
 import { Icon, IconComponent } from '../icon';
-interface Props extends Omit<React.ComponentProps<typeof Button>, "children" | "startIcon" | "endIcon"> {
+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. */

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/index.d.ts

@@ -28,6 +28,7 @@ export { Code, codeMeta } from './components/code';
 export { Collapsible, collapsibleMeta } from './components/collapsible';
 export { Icon, iconMeta } from './components/icon';
 export { Logo, logoMeta } from './components/logo';
+export { Meter, meterMeta } from './components/meter';
 export { NavigationMenu, navigationMenuMeta } from './components/navigation-menu';
 export { Skeleton, skeletonMeta } from './components/skeleton';
 export { Spinner, spinnerMeta } from './components/spinner';