@igne-agency/react-web-ui 0.3.1 → 0.4.0

package/dist/components/status-message/status-message.css

@@ -1,6 +1,6 @@
 @layer kit.reset, kit.base, kit.components;
 @layer kit.components {
-  ._root_6woix_3 {
+  ._root_lpaie_3 {
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -9,111 +9,112 @@
     color: var(--status-message-fg, var(--sys-color-text));
     text-align: center;
   }
-  ._disc_6woix_12[data-variant=subtle] {
+  ._disc_lpaie_12[data-variant=subtle] {
     --_status-message-disc-bg: var(--sys-color-neutral-bg);
     --_status-message-disc-fg: var(--sys-color-neutral-fg);
     --_status-message-disc-border: transparent;
   }
-  ._disc_6woix_12[data-variant=solid] {
+  ._disc_lpaie_12[data-variant=solid] {
     --_status-message-disc-bg: var(--sys-color-neutral-fg);
     --_status-message-disc-fg: var(--sys-color-neutral-bg);
     --_status-message-disc-border: transparent;
   }
-  ._disc_6woix_12[data-variant=outline] {
+  ._disc_lpaie_12[data-variant=outline] {
     --_status-message-disc-bg: transparent;
     --_status-message-disc-fg: var(--sys-color-neutral-fg);
     --_status-message-disc-border: var(--sys-color-neutral-border);
   }
-  ._disc_6woix_12[data-tone=info][data-variant=subtle] {
+  ._disc_lpaie_12[data-tone=info][data-variant=subtle] {
     --_status-message-disc-bg: var(--sys-color-info-bg);
     --_status-message-disc-fg: var(--sys-color-info-fg);
     --_status-message-disc-border: transparent;
   }
-  ._disc_6woix_12[data-tone=info][data-variant=solid] {
+  ._disc_lpaie_12[data-tone=info][data-variant=solid] {
     --_status-message-disc-bg: var(--sys-color-info-fg);
     --_status-message-disc-fg: var(--sys-color-info-bg);
     --_status-message-disc-border: transparent;
   }
-  ._disc_6woix_12[data-tone=info][data-variant=outline] {
+  ._disc_lpaie_12[data-tone=info][data-variant=outline] {
     --_status-message-disc-bg: transparent;
     --_status-message-disc-fg: var(--sys-color-info-fg);
     --_status-message-disc-border: var(
     	--sys-color-info-border
     );
   }
-  ._disc_6woix_12[data-tone=success][data-variant=subtle] {
+  ._disc_lpaie_12[data-tone=success][data-variant=subtle] {
     --_status-message-disc-bg: var(--sys-color-success-bg);
     --_status-message-disc-fg: var(--sys-color-success-fg);
     --_status-message-disc-border: transparent;
   }
-  ._disc_6woix_12[data-tone=success][data-variant=solid] {
+  ._disc_lpaie_12[data-tone=success][data-variant=solid] {
     --_status-message-disc-bg: var(--sys-color-success-fg);
     --_status-message-disc-fg: var(--sys-color-success-bg);
     --_status-message-disc-border: transparent;
   }
-  ._disc_6woix_12[data-tone=success][data-variant=outline] {
+  ._disc_lpaie_12[data-tone=success][data-variant=outline] {
     --_status-message-disc-bg: transparent;
     --_status-message-disc-fg: var(--sys-color-success-fg);
     --_status-message-disc-border: var(
     	--sys-color-success-border
     );
   }
-  ._disc_6woix_12[data-tone=warning][data-variant=subtle] {
+  ._disc_lpaie_12[data-tone=warning][data-variant=subtle] {
     --_status-message-disc-bg: var(--sys-color-warning-bg);
     --_status-message-disc-fg: var(--sys-color-warning-fg);
     --_status-message-disc-border: transparent;
   }
-  ._disc_6woix_12[data-tone=warning][data-variant=solid] {
+  ._disc_lpaie_12[data-tone=warning][data-variant=solid] {
     --_status-message-disc-bg: var(--sys-color-warning-fg);
     --_status-message-disc-fg: var(--sys-color-warning-bg);
     --_status-message-disc-border: transparent;
   }
-  ._disc_6woix_12[data-tone=warning][data-variant=outline] {
+  ._disc_lpaie_12[data-tone=warning][data-variant=outline] {
     --_status-message-disc-bg: transparent;
     --_status-message-disc-fg: var(--sys-color-warning-fg);
     --_status-message-disc-border: var(
     	--sys-color-warning-border
     );
   }
-  ._disc_6woix_12[data-tone=error][data-variant=subtle] {
+  ._disc_lpaie_12[data-tone=error][data-variant=subtle] {
     --_status-message-disc-bg: var(--sys-color-error-bg);
     --_status-message-disc-fg: var(--sys-color-error-fg);
     --_status-message-disc-border: transparent;
   }
-  ._disc_6woix_12[data-tone=error][data-variant=solid] {
+  ._disc_lpaie_12[data-tone=error][data-variant=solid] {
     --_status-message-disc-bg: var(--sys-color-error-fg);
     --_status-message-disc-fg: var(--sys-color-error-bg);
     --_status-message-disc-border: transparent;
   }
-  ._disc_6woix_12[data-tone=error][data-variant=outline] {
+  ._disc_lpaie_12[data-tone=error][data-variant=outline] {
     --_status-message-disc-bg: transparent;
     --_status-message-disc-fg: var(--sys-color-error-fg);
     --_status-message-disc-border: var(
     	--sys-color-error-border
     );
   }
-  ._disc_6woix_12 {
+  ._disc_lpaie_12 {
     display: grid;
     place-items: center;
     inline-size: var(--status-message-disc-size, var(--sys-unit-32));
     block-size: var(--status-message-disc-size, var(--sys-unit-32));
     border-radius: var(--sys-radius-full);
+    font-size: var(--status-message-icon-size, 2em);
     background: var(--status-message-disc-bg, var(--_status-message-disc-bg));
     color: var(--status-message-disc-fg, var(--_status-message-disc-fg));
   }
-  ._illustration_6woix_104 {
+  ._illustration_lpaie_105 {
     display: grid;
     place-items: center;
     color: var(--status-message-illustration-fg, var(--sys-color-primary));
   }
-  ._title_6woix_109 {
+  ._title_lpaie_110 {
     font: var(--status-message-title-font, var(--sys-font-heading-medium));
   }
-  ._description_6woix_112 {
+  ._description_lpaie_113 {
     max-inline-size: var(--status-message-measure, 40ch);
     font: var(--status-message-description-font, var(--sys-font-body-medium));
   }
-  ._action_6woix_116 {
+  ._action_lpaie_117 {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;

package/dist/components/status-message/status-message.d.ts

@@ -1,6 +1,5 @@
 import type { ReactElement, ReactNode } from "react";
 import type { Tone } from "../../lib/tone.ts";
-import { type SvgComponent } from "../icon/icon.tsx";
 /**
  * How a message is announced: `status` waits for a pause in what a screen
  * reader is saying, `alert` interrupts it.
@@ -16,11 +15,11 @@ export type StatusMessageRootProps = Readonly<{
     children?: ReactNode;
 }>;
 export type StatusMessageIconProps = Readonly<{
-    /** The glyph, from a SVGR `?react` import. */
-    svg: SvgComponent;
     /** The disc's colour. @default "neutral" */
     tone?: Tone;
     className?: string;
+    /** The app's icon, drawn at `1em` in `currentColor`; the disc sizes it. */
+    children: ReactNode;
 }>;
 export type StatusMessageIllustrationProps = Readonly<{
     /** A picture, a logo or an indicator, hidden from assistive technology. */
@@ -42,11 +41,17 @@ export type StatusMessageActionProps = Readonly<{
     /** The buttons or links that lead on from the message. */
     children: ReactNode;
 }>;
+/** The message's frame, and its live region when `live` is set. */
 declare const Root: ({ live, className, children, }: StatusMessageRootProps) => ReactNode;
-declare const StatusIcon: ({ svg, tone, className, }: StatusMessageIconProps) => ReactNode;
+/** The caller's glyph, on a disc tinted in `tone`. */
+declare const StatusIcon: ({ tone, className, children, }: StatusMessageIconProps) => ReactNode;
+/** The caller's picture in place of an icon, hidden from assistive technology. */
 declare const Illustration: ({ className, children, }: StatusMessageIllustrationProps) => ReactNode;
+/** What happened, in one sentence. A paragraph unless `render` names a heading. */
 declare const Title: ({ render, className, children, }: StatusMessageTitleProps) => ReactElement;
+/** What to do next, or who can help. */
 declare const Description: ({ className, children, }: StatusMessageDescriptionProps) => ReactNode;
+/** The way on: the buttons or links under the message. */
 declare const Action: ({ className, children, }: StatusMessageActionProps) => ReactNode;
 type StatusMessageNamespace = Readonly<{
     Root: typeof Root;
@@ -63,7 +68,7 @@ type StatusMessageNamespace = Readonly<{
  *
  * @example
  * <StatusMessage.Root live="status">
- * 	<StatusMessage.Icon svg={InboxIcon} />
+ * 	<StatusMessage.Icon><InboxIcon /></StatusMessage.Icon>
  * 	<StatusMessage.Title>Your inbox is empty</StatusMessage.Title>
  * 	<StatusMessage.Description>New messages show up here.</StatusMessage.Description>
  * </StatusMessage.Root>

package/dist/components/status-message/status-message.js

@@ -1,10 +1,10 @@
-import { Icon } from "../icon/icon.js";
 import status_message_module_default from "./status-message.module.js";
 import { c } from "react/compiler-runtime";
-import { jsx } from "react/jsx-runtime";
-import { clsx } from "clsx";
 import { useRender } from "@base-ui/react/use-render";
+import { clsx } from "clsx";
+import { jsx } from "react/jsx-runtime";
 // src/components/status-message/status-message.tsx
+/** The message's frame, and its live region when `live` is set. */
 var Root = (t0) => {
 	const $ = c(6);
 	const { live, className, children } = t0;
@@ -28,9 +28,10 @@ var Root = (t0) => {
 	} else t2 = $[5];
 	return t2;
 };
+/** The caller's glyph, on a disc tinted in `tone`. */
 var StatusIcon = (t0) => {
-	const $ = c(8);
-	const { svg, tone: t1, className } = t0;
+	const $ = c(6);
+	const { tone: t1, className, children } = t0;
 	const tone = t1 === void 0 ? "neutral" : t1;
 	let t2;
 	if ($[0] !== className) {
@@ -39,30 +40,22 @@ var StatusIcon = (t0) => {
 		$[1] = t2;
 	} else t2 = $[1];
 	let t3;
-	if ($[2] !== svg) {
-		t3 = /* @__PURE__ */ jsx(Icon, {
-			svg,
-			label: "",
-			size: 2
-		});
-		$[2] = svg;
-		$[3] = t3;
-	} else t3 = $[3];
-	let t4;
-	if ($[4] !== t2 || $[5] !== t3 || $[6] !== tone) {
-		t4 = /* @__PURE__ */ jsx("span", {
+	if ($[2] !== children || $[3] !== t2 || $[4] !== tone) {
+		t3 = /* @__PURE__ */ jsx("span", {
 			"data-tone": tone,
 			"data-variant": "subtle",
+			"aria-hidden": "true",
 			className: t2,
-			children: t3
+			children
 		});
-		$[4] = t2;
+		$[2] = children;
+		$[3] = t2;
+		$[4] = tone;
 		$[5] = t3;
-		$[6] = tone;
-		$[7] = t4;
-	} else t4 = $[7];
-	return t4;
+	} else t3 = $[5];
+	return t3;
 };
+/** The caller's picture in place of an icon, hidden from assistive technology. */
 var Illustration = (t0) => {
 	const $ = c(5);
 	const { className, children } = t0;
@@ -85,6 +78,7 @@ var Illustration = (t0) => {
 	} else t2 = $[4];
 	return t2;
 };
+/** What happened, in one sentence. A paragraph unless `render` names a heading. */
 var Title = (t0) => {
 	const $ = c(8);
 	const { render, className, children } = t0;
@@ -117,6 +111,7 @@ var Title = (t0) => {
 	} else t3 = $[7];
 	return useRender(t3);
 };
+/** What to do next, or who can help. */
 var Description = (t0) => {
 	const $ = c(5);
 	const { className, children } = t0;
@@ -138,6 +133,7 @@ var Description = (t0) => {
 	} else t2 = $[4];
 	return t2;
 };
+/** The way on: the buttons or links under the message. */
 var Action = (t0) => {
 	const $ = c(5);
 	const { className, children } = t0;
@@ -166,7 +162,7 @@ var Action = (t0) => {
 *
 * @example
 * <StatusMessage.Root live="status">
-* 	<StatusMessage.Icon svg={InboxIcon} />
+* 	<StatusMessage.Icon><InboxIcon /></StatusMessage.Icon>
 * 	<StatusMessage.Title>Your inbox is empty</StatusMessage.Title>
 * 	<StatusMessage.Description>New messages show up here.</StatusMessage.Description>
 * </StatusMessage.Root>

package/dist/components/status-message/status-message.module.js

@@ -1,10 +1,10 @@
 import './status-message.css';// src/components/status-message/status-message.module.scss
-var root = "_root_6woix_3";
-var disc = "_disc_6woix_12";
-var illustration = "_illustration_6woix_104";
-var title = "_title_6woix_109";
-var description = "_description_6woix_112";
-var action = "_action_6woix_116";
+var root = "_root_lpaie_3";
+var disc = "_disc_lpaie_12";
+var illustration = "_illustration_lpaie_105";
+var title = "_title_lpaie_110";
+var description = "_description_lpaie_113";
+var action = "_action_lpaie_117";
 var status_message_module_default = {
 	root,
 	disc,

package/dist/components/status-message/status-preset.d.ts

@@ -1,15 +1,14 @@
 import type { ReactNode } from "react";
 import type { Tone } from "../../lib/tone.ts";
-import type { SvgComponent } from "../icon/icon.tsx";
 import { type StatusMessageLive } from "./status-message.tsx";
 /** What a status preset such as `EmptyMessage` or `ErrorMessage` shows. */
 export type StatusPresetProps = Readonly<{
-    /** What the region says, such as "No declarations yet". */
+    /** What the region says, such as "No invoices yet". */
     title: string;
     /** What would change it, or who can help. */
     description?: string;
-    /** A glyph on a disc in the preset's tone. */
-    icon?: SvgComponent;
+    /** The app's icon, on a disc in the preset's tone. Left out, none shows. */
+    icon?: ReactNode;
     /** A way on, such as a button to add one or a retry. */
     action?: ReactNode;
     className?: string;
@@ -18,7 +17,7 @@ export type StatusPresetProps = Readonly<{
  * A status message announced as `live`, with its icon on a `tone` disc.
  *
  * @example
- * <StatusPreset live="status" tone="neutral" title="No declarations yet" />
+ * <StatusPreset live="status" tone="neutral" title="No invoices yet" />
  */
 export declare const StatusPreset: ({ live, tone, title, description, icon, action, className, }: StatusPresetProps & Readonly<{
     live: StatusMessageLive;

package/dist/components/status-message/status-preset.js

@@ -6,7 +6,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * A status message announced as `live`, with its icon on a `tone` disc.
 *
 * @example
-* <StatusPreset live="status" tone="neutral" title="No declarations yet" />
+* <StatusPreset live="status" tone="neutral" title="No invoices yet" />
 */
 var StatusPreset = (t0) => {
 	const $ = c(16);
@@ -14,8 +14,8 @@ var StatusPreset = (t0) => {
 	let t1;
 	if ($[0] !== icon || $[1] !== tone) {
 		t1 = icon === void 0 ? null : /* @__PURE__ */ jsx(StatusMessage.Icon, {
-			svg: icon,
-			tone
+			tone,
+			children: icon
 		});
 		$[0] = icon;
 		$[1] = tone;

package/dist/components/switch-field/switch.js

@@ -4,8 +4,8 @@ import { useFieldFocus } from "../field/use-field-focus.js";
 import { useFieldState } from "../field/use-field-state.js";
 import switch_module_default from "./switch.module.js";
 import { c } from "react/compiler-runtime";
-import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
+import { jsx } from "react/jsx-runtime";
 import { Field } from "@base-ui/react/field";
 import { Switch } from "@base-ui/react/switch";
 // src/components/switch-field/switch.tsx

package/dist/components/tabs/tabs.d.ts

@@ -1,54 +1,77 @@
+import { Tabs as BaseTabs } from "@base-ui/react/tabs";
 import { type ReactNode } from "react";
-/** One tab in a bar, and the panel it opens. */
-export type Tab = Readonly<{
-    value: string;
-    label: string;
-    /** A count shown as a trailing badge. */
-    count?: number;
-    disabled?: boolean;
-}>;
-export type TabsRootProps = Readonly<{
-    tabs: readonly Tab[];
-    className?: string;
+import { type BadgeProps } from "../badge/badge.tsx";
+export type TabsRootProps = Omit<BaseTabs.Root.Props, "className" | "value" | "defaultValue" | "onValueChange" | "orientation" | "children"> & Readonly<{
+    /** The `Tabs.List` and the `Tabs.Panel`s it opens. */
     children: ReactNode;
-}> & (Readonly<{
+    className?: string;
+}> & Readonly<{
     /** The open tab's `value`, when controlled. */
+    value?: string;
+    /** The tab open at first, when uncontrolled. */
+    defaultValue?: string;
+    /** Called with the `value` of the tab picked. */
+    onValueChange?: (value: string) => void;
+}> & (Readonly<{
     value: string;
     onValueChange: (value: string) => void;
     defaultValue?: never;
 }> | Readonly<{
     value?: never;
-    /** The tab open at first, when uncontrolled. */
-    defaultValue?: string;
-    onValueChange?: (value: string) => void;
 }>);
-declare const Root: ({ tabs, value, defaultValue, onValueChange, className, children, }: TabsRootProps) => ReactNode;
-export type TabsBarProps = Readonly<{
-    /** What the tabs switch between, such as "Declaration". */
+/** The tabs and the panels they open. */
+declare const Root: ({ value, defaultValue, onValueChange, className, ...props }: TabsRootProps) => ReactNode;
+export type TabsListProps = Omit<BaseTabs.List.Props, "className" | "aria-label"> & Readonly<{
+    /** What the tabs switch between, such as "Invoice". */
     label: string;
     className?: string;
 }>;
-declare const Bar: ({ label, className, }: TabsBarProps) => ReactNode;
-export type TabsPanelProps = Readonly<{
+/** The row of tabs, scrolling sideways when it outgrows its room. */
+declare const List: ({ label, className, children, ...props }: TabsListProps) => ReactNode;
+export type TabsTabProps = Omit<BaseTabs.Tab.Props, "className" | "value"> & Readonly<{
+    /** The `value` of the panel this tab opens. */
+    value: string;
+    className?: string;
+}>;
+/** One tab: its label, and a `Count` where it has one. */
+declare const Tab: ({ value, className, children, ...props }: TabsTabProps) => ReactNode;
+export type TabsCountProps = BadgeProps;
+/** A count after a tab's label, as a neutral badge. */
+declare const Count: ({ tone, variant, ...props }: TabsCountProps) => ReactNode;
+export type TabsIndicatorProps = Omit<BaseTabs.Indicator.Props, "className" | "children"> & Readonly<{
+    className?: string;
+}>;
+/**
+ * The pill that slides to the open tab, inside the `List`. It holds a copy of
+ * the list's tabs, so the open tab's label turns over as the pill arrives.
+ */
+declare const Indicator: ({ className, ...props }: TabsIndicatorProps) => ReactNode;
+export type TabsPanelProps = Omit<BaseTabs.Panel.Props, "className" | "value"> & Readonly<{
     /** The `value` of the tab that opens this panel. */
     value: string;
     className?: string;
-    children: ReactNode;
 }>;
-declare const Panel: ({ value, className, children, }: TabsPanelProps) => ReactNode;
+/** What one tab opens. */
+declare const Panel: ({ className, ...props }: TabsPanelProps) => ReactNode;
 type TabsParts = Readonly<{
     Root: typeof Root;
-    Bar: typeof Bar;
+    List: typeof List;
+    Tab: typeof Tab;
+    Count: typeof Count;
+    Indicator: typeof Indicator;
     Panel: typeof Panel;
 }>;
 /**
- * In-page tabs over base-ui's `Tabs`: `Root` takes the tabs, `Bar` lays them
- * out with a pill that slides to the open one, and each `Panel` holds what its
- * tab opens. Tabs that lead to pages are a horizontal `Nav`.
+ * In-page tabs over base-ui's `Tabs`, with a pill that slides to the open tab.
+ * Tabs that lead to pages are a horizontal `Nav`.
  *
  * @example
- * <Tabs.Root tabs={[{ value: "details", label: "Details" }, { value: "history", label: "History", count: 3 }]} defaultValue="details">
- * 	<Tabs.Bar label="Declaration" />
+ * <Tabs.Root defaultValue="details">
+ * 	<Tabs.List label="Invoice">
+ * 		<Tabs.Tab value="details">Details</Tabs.Tab>
+ * 		<Tabs.Tab value="history">History<Tabs.Count>3</Tabs.Count></Tabs.Tab>
+ * 		<Tabs.Indicator />
+ * 	</Tabs.List>
  * 	<Tabs.Panel value="details">…</Tabs.Panel>
  * 	<Tabs.Panel value="history">…</Tabs.Panel>
  * </Tabs.Root>