@imfusion/web-ui 0.11.1-dev.35.g0028b4dd → 0.11.1-dev.39.g98a8338c

package/CHANGELOG.md

@@ -4,6 +4,9 @@
 
 ### Added
 
+- `Progress` is a new bar for the completion of a running task, adapted from Base UI. `size` runs from `xs` (a 2px hairline) to
+  `lg`, `layout` is `stacked` or `inline`, `value={null}` sweeps while the amount is unknown, and the fill turns positive at the
+  maximum. [Progress](src/components/progress/progress.mdx) — Nikolaus Brunner <brunner@imfusion.com>
 - `TabNav` is a new row of links to routes with a bar under the current one, in the underline look of `Tabs`. `TabNav.Item`
   renders an `<a>`, takes a router link as `render`, and sets `aria-current="page"` from `current`.
   [TabNav](src/components/tab-nav/tab-nav.stories.tsx#InAProjectHeader) — Nikolaus Brunner <brunner@imfusion.com>
@@ -96,6 +99,8 @@
 
 - `Drawer.Title` wraps a long title instead of running past the panel edge.
   [Drawer](src/components/drawer/drawer.stories.tsx#LongTitle) — Nikolaus Brunner <brunner@imfusion.com>
+- `Card` describes its coloured fills correctly: they set the background, and their content takes `oncolor` variants. —
+  Nikolaus Brunner <brunner@imfusion.com>
 - Typo inside `Callout.Description`, such as `Typo.UnorderedList` or `Typo.P`, matches the description's size and takes
   the variant's colour. [Callout](src/components/callout/callout.stories.tsx#WithList) — Nikolaus Brunner <brunner@imfusion.com>
 - A `Select` option with `Select.ItemDescription` is named by its text alone and reads the description as its accessible
@@ -110,6 +115,8 @@
 - Components — Nikolaus Brunner <brunner@imfusion.com>
   - A `Drawer.Close` or `Popover.Close` rendered as another component, such as a `Button`, keeps that component's styles.
   - A `Popover.Trigger` rendered as another component keeps that component's styles, so `render={<Button />}` looks like a Button.
+- `Button variant="primary"` hovers to a blue outline on any surface. Its hover fill was the `main` background, which showed as a
+  white box on a `support` card. [Button](src/components/button/button.stories.tsx#OnSupportCard) — Nikolaus Brunner <brunner@imfusion.com>
 
 ---
 

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

@@ -17,8 +17,9 @@ type RootProps = React.ComponentProps<"div"> & VariantProps<typeof root> & {
  * `Card.Footer`. `density` sets one scale that drives both each slot's padding
  * and the gap between slots. `variant` picks the look — neutral tonal surfaces
  * (`main`/`support`/`minor`) carry a hairline border; coloured intent fills
- * (`primary`/`brand`) flip to contrast text and drop the border. `shadow` and
- * `radius` layer on top. Also called a panel, tile, or paper.
+ * (`primary`/`brand`) set the background only and are borderless. Put `oncolor`
+ * content inside them, e.g. `Typo variant="oncolor"` and `Button context="oncolor"`.
+ * `shadow` and `radius` layer on top. Also called a panel, tile, or paper.
  *
  * 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.

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

@@ -0,0 +1,2 @@
+export * as Progress from './progress';
+export { progressMeta } from './progress.meta';

package/dist/components/progress/progress.d.ts

@@ -0,0 +1,40 @@
+import { Progress as ProgressPrimitive } from '@base-ui/react/progress';
+import { VariantProps } from 'class-variance-authority';
+declare const progressRoot: (props?: ({
+    size?: "sm" | "md" | "lg" | "xs" | null | undefined;
+    layout?: "inline" | "stacked" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/**
+ * Progress.Root — completion of a running task, such as an upload or export.
+ *
+ * `value={null}` is indeterminate. Without a visible `Progress.Label`, name the bar with `aria-label`. Base UI hides
+ * `Progress.Value` from assistive tech, so custom Value text needs a matching `aria-valuetext`.
+ *
+ * @doc https://base-ui.com/react/components/progress
+ * @llm https://base-ui.com/react/components/progress.md
+ */
+export declare function Root({ size, layout, ...props }: React.ComponentProps<typeof ProgressPrimitive.Root> & VariantProps<typeof progressRoot>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Root {
+    var displayName: string;
+}
+/** Progress.Label — accessible label for the progress bar. */
+export declare function Label(props: React.ComponentProps<typeof ProgressPrimitive.Label>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Label {
+    var displayName: string;
+}
+/** Progress.Value — formatted readout of the current value. Renders nothing while indeterminate. */
+export declare function Value(props: React.ComponentProps<typeof ProgressPrimitive.Value>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Value {
+    var displayName: string;
+}
+/** Progress.Track — the full range. */
+export declare function Track(props: React.ComponentProps<typeof ProgressPrimitive.Track>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Track {
+    var displayName: string;
+}
+/** Progress.Indicator — filled portion of the track up to the value. */
+export declare function Indicator(props: React.ComponentProps<typeof ProgressPrimitive.Indicator>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Indicator {
+    var displayName: string;
+}
+export {};

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

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

package/dist/index.d.ts

@@ -38,6 +38,7 @@ export { Kbd, kbdMeta } from './components/kbd';
 export { Logo, logoMeta } from './components/logo';
 export { Meter, meterMeta } from './components/meter';
 export { NavigationMenu, navigationMenuMeta } from './components/navigation-menu';
+export { Progress, progressMeta } from './components/progress';
 export { Skeleton, skeletonMeta } from './components/skeleton';
 export { Spinner, spinnerMeta } from './components/spinner';
 export { Table, tableMeta } from './components/table';