@igne-agency/react-web-ui 0.5.0 → 0.6.0

package/dist/components/avatar-group/avatar-group.module.js

@@ -1,12 +1,12 @@
 import './avatar-group.css';// src/components/avatar-group/avatar-group.module.scss
-var group = "_group_6uki6_3";
-var member = "_member_6uki6_8";
-var overflow = "_overflow_6uki6_17";
-var count = "_count_6uki6_39";
-var popup = "_popup_6uki6_42";
-var list = "_list_6uki6_47";
-var item = "_item_6uki6_53";
-var suffix = "_suffix_6uki6_59";
+var group = "_group_82sgm_3";
+var member = "_member_82sgm_8";
+var overflow = "_overflow_82sgm_17";
+var count = "_count_82sgm_39";
+var popup = "_popup_82sgm_42";
+var list = "_list_82sgm_53";
+var item = "_item_82sgm_59";
+var suffix = "_suffix_82sgm_65";
 var avatar_group_module_default = {
 	group,
 	member,

package/dist/components/breadcrumbs/breadcrumbs.css

@@ -1,55 +1,55 @@
 @layer kit.reset, kit.base, kit.components;
 @layer kit.components {
-  ._root_k1utk_3 {
+  ._root_amqs9_3 {
     position: relative;
     min-inline-size: 0;
   }
-  ._list_k1utk_7 {
+  ._list_amqs9_7 {
     display: grid;
     grid-auto-columns: minmax(0, max-content) max-content;
     grid-auto-flow: column;
     align-items: center;
     list-style: none;
   }
-  ._item_k1utk_14 {
+  ._item_amqs9_14 {
     display: flex;
     align-items: center;
     min-inline-size: 0;
   }
-  ._crumb_k1utk_19 {
+  ._crumb_amqs9_19 {
     min-inline-size: 0;
     overflow: hidden;
-    border-radius: var(--sys-radius-xs);
+    border-radius: var(--breadcrumbs-radius, var(--sys-radius-xs));
     font: var(--breadcrumbs-font, var(--sys-font-label-medium));
     text-overflow: ellipsis;
     white-space: nowrap;
   }
-  ._crumb_k1utk_19 {
+  ._crumb_amqs9_19 {
     outline: 0 solid var(--sys-color-focus-ring);
     outline-offset: var(--sys-focus-ring-offset);
   }
-  ._crumb_k1utk_19:focus-visible {
+  ._crumb_amqs9_19:focus-visible {
     outline-width: var(--sys-focus-ring-width);
   }
-  ._separator_k1utk_34 {
+  ._separator_amqs9_34 {
     display: flex;
     align-items: center;
-    padding-inline: var(--sys-unit-4);
+    padding-inline: var(--breadcrumbs-separator-pad-x, var(--sys-unit-4));
   }
-  ._gauge_k1utk_39 {
+  ._gauge_amqs9_39 {
     position: absolute;
     visibility: hidden;
     inset: 0;
     overflow: hidden;
     pointer-events: none;
   }
-  ._gaugeList_k1utk_46 {
+  ._gaugeList_amqs9_46 {
     display: flex;
     align-items: center;
     inline-size: max-content;
     list-style: none;
   }
-  ._popup_k1utk_52 {
+  ._popup_amqs9_52 {
     max-inline-size: var(--available-width);
     max-block-size: var(--available-height);
     overflow-y: auto;

package/dist/components/breadcrumbs/breadcrumbs.d.ts

@@ -1,5 +1,20 @@
 import { useRender } from "@base-ui/react/use-render";
-import type { ComponentPropsWithRef, ReactElement, ReactNode, Ref } from "react";
+import type { ReactElement, ReactNode, Ref } from "react";
+import { type MenuContentProps, type MenuRootProps, type MenuTriggerProps } from "../menu/menu.tsx";
+export type BreadcrumbsClippedHintProps = Readonly<{
+    /** The crumb the hint describes, a `Link` or the `Page`. */
+    render: ReactElement;
+    /** The crumb's text, drawn in the crumb and shown in full in the hint. */
+    children: ReactNode;
+}>;
+/**
+ * Renders a crumb with its text, and shows the full text as a tooltip only
+ * while the crumb cuts it short.
+ *
+ * @example
+ * <Breadcrumbs.ClippedHint render={<Breadcrumbs.Page />}>Invoice 2041</Breadcrumbs.ClippedHint>
+ */
+declare const ClippedHint: ({ render, children, }: BreadcrumbsClippedHintProps) => ReactNode;
 export type BreadcrumbsRootProps = Omit<useRender.ComponentProps<"nav">, "aria-label"> & Readonly<{
     /** The landmark's name, such as "Breadcrumbs". */
     "aria-label": string;
@@ -19,38 +34,62 @@ export type BreadcrumbsLinkProps = useRender.ComponentProps<"a">;
 /**
  * A crumb leading to a page above the current one. It spreads every other prop
  * onto the `<a>` and forwards its ref, so a router's `createLink` can wrap it.
- * When it cuts its text short, it shows the full text as a tooltip.
+ *
+ * @example
+ * <Breadcrumbs.Link href="/invoices">Invoices</Breadcrumbs.Link>
  */
-declare const BreadcrumbLink: ({ render, className, children, ref, ...props }: BreadcrumbsLinkProps) => ReactNode;
-export type BreadcrumbsPageProps = ComponentPropsWithRef<"span">;
+declare const BreadcrumbLink: ({ render, className, ref, ...props }: BreadcrumbsLinkProps) => ReactElement;
+export type BreadcrumbsPageProps = useRender.ComponentProps<"span">;
 /**
- * The current page's crumb, which is not a link. When it cuts its text short,
- * it shows the full text as a tooltip.
+ * The current page's crumb, which is not a link.
+ *
+ * @example
+ * <Breadcrumbs.Page>Invoice 2041</Breadcrumbs.Page>
  */
-declare const Page: ({ className, children, ...props }: BreadcrumbsPageProps) => ReactNode;
+declare const Page: ({ render, className, ref, ...props }: BreadcrumbsPageProps) => ReactElement;
 export type BreadcrumbsSeparatorProps = useRender.ComponentProps<"li">;
 /**
  * The decorative space between two crumbs, holding the app's mark, such as a
  * chevron, given as `children`. Without one it is spacing alone.
  */
 declare const Separator: ({ render, className, ref, ...props }: BreadcrumbsSeparatorProps) => ReactElement;
-export type BreadcrumbsOverflowProps = Readonly<{
-    /** Accessible name of the button, such as "Show more", surfaced as its tooltip. */
-    label: string;
-    /** The button's glyph, such as the app's ellipsis. */
-    icon: ReactNode;
-    /** The folded crumbs, each a `Menu.LinkItem`. */
-    children: ReactNode;
-}>;
-/** A button that opens a menu of the crumbs the trail has no room for. */
-declare const Overflow: ({ label, icon, children, }: BreadcrumbsOverflowProps) => ReactNode;
+export type BreadcrumbsOverflowProps = MenuRootProps;
+/**
+ * Holds the overflow menu's open state for `OverflowTrigger` and
+ * `OverflowContent`. It renders no element of its own.
+ *
+ * @example
+ * <Breadcrumbs.Overflow>
+ * 	<Breadcrumbs.OverflowTrigger render={<IconButton label="Show more" variant="tertiary"><MoreIcon /></IconButton>} />
+ * 	<Breadcrumbs.OverflowContent>…</Breadcrumbs.OverflowContent>
+ * </Breadcrumbs.Overflow>
+ */
+declare const Overflow: (props: BreadcrumbsOverflowProps) => ReactNode;
+export type BreadcrumbsOverflowTriggerProps = MenuTriggerProps;
+/**
+ * The button that opens the menu of the crumbs the trail has no room for. It
+ * renders whichever button it is given.
+ *
+ * @example
+ * <Breadcrumbs.OverflowTrigger render={<IconButton label="Show more" variant="tertiary"><MoreIcon /></IconButton>} />
+ */
+declare const OverflowTrigger: (props: BreadcrumbsOverflowTriggerProps) => ReactNode;
+export type BreadcrumbsOverflowContentProps = MenuContentProps;
+/**
+ * The menu of folded crumbs, each a `Menu.LinkItem`, aligned under the
+ * trigger's start and scrolling when it outgrows the room.
+ *
+ * @example
+ * <Breadcrumbs.OverflowContent>
+ * 	<Menu.LinkItem href="/region">Region</Menu.LinkItem>
+ * </Breadcrumbs.OverflowContent>
+ */
+declare const OverflowContent: ({ align, sideOffset, className, ...props }: BreadcrumbsOverflowContentProps) => ReactNode;
 export type BreadcrumbsGaugeProps = Readonly<{
     /** Every crumb's label, outermost first. */
     labels: readonly ReactNode[];
-    /** The `Overflow` button's label, so the copy measures the same. */
-    overflowLabel: string;
-    /** The `Overflow` button's glyph, so the copy measures the same. */
-    overflowIcon: ReactNode;
+    /** The button `OverflowTrigger` renders, so the copy measures the same. */
+    overflow: ReactElement;
     /** The mark between crumbs, so the copy measures the same. */
     separator?: ReactNode;
     ref: Ref<HTMLOListElement>;
@@ -58,8 +97,11 @@ export type BreadcrumbsGaugeProps = Readonly<{
 /**
  * A hidden copy of the whole trail at its full length, with one separator and
  * the overflow button, for `useFold` to measure.
+ *
+ * @example
+ * <Breadcrumbs.Gauge ref={gauge} labels={labels} overflow={moreButton} separator={<ChevronIcon />} />
  */
-declare const Gauge: ({ labels, overflowLabel, overflowIcon, separator, ref, }: BreadcrumbsGaugeProps) => ReactNode;
+declare const Gauge: ({ labels, overflow, separator, ref, }: BreadcrumbsGaugeProps) => ReactNode;
 /** One crumb of a trail: its label and, above the current page, the link it renders as. */
 export type Crumb = Readonly<{
     /** Stable key, such as the route id. */
@@ -96,12 +138,16 @@ type BreadcrumbsParts = typeof Trail & Readonly<{
     Link: typeof BreadcrumbLink;
     Page: typeof Page;
     Separator: typeof Separator;
+    ClippedHint: typeof ClippedHint;
     Overflow: typeof Overflow;
+    OverflowTrigger: typeof OverflowTrigger;
+    OverflowContent: typeof OverflowContent;
     Gauge: typeof Gauge;
 }>;
 /**
  * The trail to the current page. Given `crumbs`, it folds what does not fit
- * into an overflow menu; the parts hanging off it compose a trail by hand.
+ * into an overflow menu and hints the full text of a crumb it cuts short; the
+ * parts hanging off it compose a trail by hand.
  *
  * @example
  * <Breadcrumbs