@povio/ui 5.0.0-rc.2 → 5.0.0-rc.3

package/.rulesync/rules/ui-buttons-and-content.md

@@ -24,13 +24,14 @@ Use `Button` for an action. Its content is `children`; use `link` only when it n
 - Use `ToggleButton` for one independently toggled state (`isSelected`, `defaultSelected`, `onChange`). It defaults to outlined primary but honors supplied `variant` and `color`.
 - Use `SplitButton` only for a primary action with menu alternatives; use `ButtonGroup` for peer actions.
 - `variant`, `size`, and other CVA props belong to the active override. Never normalize their values inside a component; define default compatibility aliases as CVA entries instead.
-- `PillButton` has its own CVA but follows the same variant contract: `solid` and `outline` are default aliases and are passed unchanged to `pillButton.cva` overrides.
+- Use `BadgeButton` from `@povio/ui/badge-button` for a compact, badge-styled action. It has its own CVA but follows the same variant contract: `solid` and `outline` are default aliases and are passed unchanged to `badgeButton.cva` overrides.
 
 ## Tags, links, typography
 
 Typography sizes are `headline-l`, `h1`–`h4`, `lead`, `body`, `large`, and `small`; There is no typography `variant`; use `className="font-bold"` or `className="italic"` for emphasis. `large` and `small` do not add font weight; use explicit emphasis when needed. Use the same size on mobile and desktop unless explicitly overridden.
 
 - `Badge` and `Tag` are display components, not generic buttons. Use `dismissible` and `onRemove` for removal; `dismissable` and `onDismiss` are legacy forms.
+- `Badge` and `BadgeButton` support primary, secondary, success, warning, and error colors with contained, outlined, and subtle variants. Their padding is 2px vertically and 8px horizontally, or 6px horizontally when an icon/dismiss control is present. `Badge isSelected` displays the toggled state; use `BadgeButton toggle` for an interactive toggle. Toggled colors use the same state modifiers as buttons.
 - Pass remove-button behavior through `dismissButtonProps`; arbitrary button props do not belong on the display container.
 - Use `Link` for navigation and `Button` for actions.
 - Use `Typography` with semantic `as` elements (`h1`, `h2`, `p`, `span`) and library typography variants/sizes. Token changes belong in UI overrides, not consumers.
@@ -39,6 +40,7 @@ Typography sizes are `headline-l`, `h1`–`h4`, `lead`, `body`, `large`, and `sm
 
 - Use `Alert` for persistent inline status, `Toast`/`useToast` for transient notifications, `Spinner` for indeterminate progress, and `Progress` for numeric progress.
 - For alerts and toasts, keep `variant` (`contained`/`outlined`) separate from semantic `color` (`neutral`, `success`, `warning`, `error`).
+- Alert and Toast message text uses `large` typography. Outlined messages use `surface-default-card-foreground` text and primary text-button actions. Contained messages use `surface-inverted-card-foreground` for neutral, `surface-success-inverted-base` for success, `surface-warning-inverted-base` for warning, and `surface-destructive-inverted-base` for error; actions use inverted primary text buttons. Actions use `size="none"`, with `toast-gap-action` spacing between them. Alert's `rightContent` is caller supplied, so configure its actions with `TextButton size="none" color="primary" inverted={variant === "contained"}`.
 - Toast actions are `{ text, onPress }`; keep them short and non-destructive.
 
 ## Reference

package/README.md

@@ -12,6 +12,7 @@ Use component and feature subpaths in application code. Each subpath resolves to
 
 ```tsx
 import { Button } from "@povio/ui/button";
+import { BadgeButton } from "@povio/ui/badge-button";
 import { Dialog } from "@povio/ui/dialog";
 import { Select } from "@povio/ui/tanstack/select";
 import { useForm } from "@povio/ui/tanstack/form";
@@ -40,6 +41,23 @@ The React Aria hooks used by Povio are similarly isolated under `use-text-field`
 
 Each emitted entry is independently bundled and tree-shaken; it does not forward React Aria's aggregate barrel or share a generated aggregate chunk with unrelated controls. Ordinary Povio component imports do not include the escape-hatch entries.
 
+Use `Badge` for display content, `BadgeButton` for a compact, badge-styled action, and `ToggleButton` or `ToggleGroup` for selection. `BadgeButton` uses the theme's `badge-*` spacing and radius tokens; customize its recipe through `UIOverrides.badgeButton`.
+
+## Theme configurator
+
+The live theme editor ships separately as `@povio/ui/ui-configurator`, with its stylesheet at `@povio/ui/ui-configurator/styles`. It is independent of Storybook and is excluded from ordinary component imports. For only the `parseThemeCss` / `exportCss` helpers and token types, use the lightweight `@povio/ui/ui-configurator/theme` entry.
+
+To save its Tailwind CSS export directly to your app's theme during development, add the bundled Vite plugin:
+
+```ts
+import { uiConfigurator } from "@povio/ui/ui-configurator/vite";
+
+// In your Vite plugins array:
+uiConfigurator({ themeFile: "src/styles/theme.css" });
+```
+
+The path defaults to `src/styles/theme.css` relative to this app's Vite root. **Export → Tailwind CSS → Save theme** updates that file's token declarations and lets Vite reload the CSS. Each app writes only its own configured theme. Apply remains session-only; Cancel does not undo a file save. The plugin and save action are absent from builds and preview servers. See [the configurator guide](./src/configurator/README.md) for provider setup, preview behavior, and supported theme blocks.
+
 ## Button sizes
 
 `Button` supports `sm` (with `s` as an equivalent alias), `default`, and `none` (zero padding). Omitting `size` uses `default`. The same sizes apply to `IconButton`, `InlineIconButton`, `TextButton`, `ToggleButton`, and `SplitButton`.
@@ -124,9 +142,9 @@ We also use a custom tailwind plugin to shorten some selectors inside the @povio
 @plugin "@povio/ui/tw-ui-plugin";
 ```
 
-### Background tint utility
+### State color utilities
 
-Import the color utilities in your application's Tailwind stylesheet. This import is required because `@povio/ui` button styles use these utilities:
+Import the color utilities in your application's Tailwind stylesheet. This import is required because `@povio/ui` components use these utilities:
 
 ```css
 @import "tailwindcss";
@@ -134,18 +152,39 @@ Import the color utilities in your application's Tailwind stylesheet. This impor
 @import "@povio/ui/color-utilities";
 ```
 
-Use `bg-tint-<color>/<percentage>` to mix a theme color with white in sRGB. The color name resolves to your theme's `--color-<color>` token. The required modifier is an integer from `0` to `100`: `/80` keeps 80% of the original color and adds 20% white, `/100` keeps the original color, and `/0` produces white. Lower numbers produce lighter tints.
+Use `bg-state-<color>/<state>`, `border-state-<color>/<state>`, `border-b-state-<color>/<state>`, or `text-state-<color>/<state>` to mix a theme color with a named state color in sRGB. The color resolves to `--color-<color>`. For each state, define `--states-<state>-color` and `--states-<state>-opacity` in the light and dark themes, then expose them as `--state-color-<state>` and `--state-opacity-<state>` in `@theme inline`. The theme export supplies these aliases, so additional state names require no change to the utilities.
 
 ```tsx
 <button
   type="button"
-  className="bg-interactive-primary-background text-interactive-primary-foreground hover:bg-tint-interactive-primary-background/80"
+  className="bg-interactive-primary-background border-interactive-primary-background text-interactive-primary-foreground hover:bg-state-interactive-primary-background/hover hover:border-state-interactive-primary-background/hover"
 >
-  Hover to lighten
+  Hover to change state color
 </button>
 ```
 
-The utility supports standard Tailwind variants such as `hover:`, `focus-visible:`, and `dark:`. With an opaque starting color, the result remains fully opaque and does not depend on the background behind the element. This differs from the standard `bg-<color>/80` opacity modifier. It mixes with white rather than adjusting OKLCH lightness, and only changes the background color; text and children are unaffected.
+The utilities support standard Tailwind variants such as `hover:`, `focus-visible:`, and `dark:`. With an opaque starting color and state mix color, the result remains opaque. Using the same base color and state for background and border gives them exactly the same result. The state mix color can be white, black, or another color supplied by the theme.
+
+### Icon slots
+
+`IconSlot` reserves the Figma `icons-size` spacing token (`--spacing-icons-size`, exposed as `size-icons-size`) and centers an SVG at 80% of that size. Buttons and input icon props use it automatically, whether you pass a component reference or an element. Export this token in your Tailwind theme alongside the other Figma spacing tokens.
+
+```tsx
+import { Plus } from "lucide-react";
+import { IconSlot } from "@povio/ui/icon-slot";
+
+<IconSlot icon={Plus} />;
+<IconSlot
+  icon={<Plus strokeWidth={1.5} />}
+  scale={0.8}
+/>;
+```
+
+`IconSlot` is also exported from `@povio/ui`, `@povio/ui/rhf`, `@povio/ui/tanstack`, and `@povio/ui/icons`. `className` styles the outer slot; `iconClassName` styles the SVG. The slot controls SVG dimensions, including supplied SVGs with their own size classes. Use the inherited CSS variable `--icons-scale` to change the default ratio throughout a theme, or `scale` to override one slot. A 20px token at `0.8` produces a 16px SVG; a 24px token produces a 19.2px SVG. Stroke width continues to follow the icon's own configuration.
+
+Override the shared recipe through `UIOverrides` at `iconSlot.cva`. Component-specific icon recipes, such as `button.iconSize`, now style the outer slot. An explicitly configured slot passed to a button or input keeps its configuration without nesting another slot.
+
+Storybook's **UI / Components / Icons / IconSlot** page includes a playground, raw-versus-slotted comparisons, and button/input examples. Adjust `tokenSize` and `scale` in Controls and enable slot outlines to compare against the Figma frame at 100% browser zoom.
 
 ### Z-Index
 

package/dist/{Accordion-CzFKi8Bp.js → Accordion-BzwO4_ml.js}

@@ -1,12 +1,15 @@
 import { t as ChevronDown } from "./chevron-down-B4Pr8bD3.js";
 import { t as clsx } from "./clsx-CnD0nOiA.js";
+import { t as UIOverrides } from "./uiOverrides.context-BTCH9y5a.js";
+import { t as IconSlot } from "./IconSlot-DSK7qNxc.js";
 import { n as $7230ffa83bc0c2cf$export$29f1550f4b0d4415, o as $7230ffa83bc0c2cf$export$c62b8e45d58ddad9, r as $7230ffa83bc0c2cf$export$4d86445c2cf5e3, s as $7230ffa83bc0c2cf$export$df3a06d6289f983e, t as $7230ffa83bc0c2cf$export$2881499e37b75b9a } from "./utils-Czcqspm7.js";
 import { n as $7705c033048f6da7$export$353f5b6fc5456de1, t as $7705c033048f6da7$export$24d547caef80ccd1 } from "./Button-D6KlWSFL.js";
 import { t as $2ec61d1d4f780267$export$a8a3e93435678ff9 } from "./Heading-nI1_VOaE.js";
-import { t as UIOverrides } from "./uiOverrides.context-Bfm2n-n8.js";
-import { t as Typography } from "./Typography-B0Gp1lpc.js";
+import { t as Typography } from "./Typography-LU4z2pR1.js";
+import { a as accordionHeadingTitleDefinition, c as accordionPanelContentDefinition, i as accordionHeadingSubtitleDefinition, l as accordionPanelDefinition, n as accordionDefinition, o as accordionIconDefinition, r as accordionHeadingDefinition, s as accordionItemDefinition, t as accordionChevronDefinition, u as accordionTriggerDefinition } from "./accordion.cva-CL1bVscW.js";
 import $ahdqC$react, { createContext, forwardRef, useContext } from "react";
 import { c } from "react/compiler-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { mergeProps } from "react-aria/mergeProps";
 import { mergeRefs } from "react-aria/mergeRefs";
 import { filterDOMProps } from "react-aria/filterDOMProps";
@@ -15,7 +18,6 @@ import { useId as useId$1 } from "react-aria/useId";
 import { useDisclosure } from "react-aria/useDisclosure";
 import { useDisclosureGroupState } from "react-stately/useDisclosureGroupState";
 import { useDisclosureState } from "react-stately/useDisclosureState";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region ../../node_modules/.bun/react-aria-components@1.21.1+67f6792bdf102c28/node_modules/react-aria-components/dist/private/Disclosure.mjs
 const $a3e16eab0ea4036c$export$1d40e3e0cc4d5de = /*#__PURE__*/ createContext(null);
 const $a3e16eab0ea4036c$export$944aceb4f8c89f10 = /*#__PURE__*/ forwardRef(function DisclosureGroup(props, ref) {
@@ -113,133 +115,6 @@ const $a3e16eab0ea4036c$export$feabaa331e1d464c = /*#__PURE__*/ forwardRef(funct
 	}, /*#__PURE__*/ $ahdqC$react.createElement($7230ffa83bc0c2cf$export$2881499e37b75b9a, { values: [[$7705c033048f6da7$export$24d547caef80ccd1, null]] }, props.children));
 });
 //#endregion
-//#region src/components/navigation/Accordion/accordion.cva.ts
-const accordionDefinition = UIOverrides.defineConfig({
-	base: ["flex w-full flex-col"],
-	config: {
-		variants: {
-			variant: {
-				filled: "gap-1",
-				outlined: ""
-			},
-			singleItem: {
-				true: "",
-				false: ""
-			}
-		},
-		defaultVariants: {
-			variant: "filled",
-			singleItem: false
-		},
-		compoundVariants: [{
-			variant: "outlined",
-			singleItem: false,
-			className: "rounded-global-rounding-s border border-border-default-subtle"
-		}]
-	}
-});
-const accordionItemDefinition = UIOverrides.defineConfig({
-	base: ["flex w-full flex-col"],
-	config: {
-		variants: {
-			variant: {
-				filled: "rounded-accordion-rounding-filled bg-surface-default-background",
-				outlined: ""
-			},
-			singleItem: {
-				true: "",
-				false: ""
-			}
-		},
-		defaultVariants: {
-			variant: "filled",
-			singleItem: false
-		},
-		compoundVariants: [{
-			singleItem: true,
-			variant: "outlined",
-			className: "border-border-default-subtle border-b"
-		}, {
-			singleItem: false,
-			variant: "outlined",
-			className: "not-last:border-border-default-subtle not-last:border-b"
-		}]
-	}
-});
-const accordionTriggerDefinition = UIOverrides.defineConfig({
-	base: [
-		"group flex w-full items-center gap-accordion-gap-content-to-arrow",
-		"px-accordion-side-accordion py-accordion-height-accordion",
-		"outline-none focus-visible:ring-2 focus-visible:ring-interactive-ring"
-	],
-	config: {
-		variants: {
-			variant: {
-				outlined: "rounded-accordion-rounding-outlined hover:bg-tint-surface-default-popover/80",
-				filled: "rounded-accordion-rounding-filled bg-surface-default-background hover:bg-tint-surface-default-popover/80"
-			},
-			actionPosition: {
-				left: "flex-row-reverse",
-				right: "flex-row"
-			},
-			disabled: { true: "opacity-50" }
-		},
-		defaultVariants: {
-			variant: "filled",
-			actionPosition: "right"
-		}
-	}
-});
-const accordionHeadingDefinition = UIOverrides.defineConfig({
-	base: ["flex flex-1 items-center justify-between gap-accordion-gap-content-to-arrow"],
-	config: {
-		variants: {},
-		defaultVariants: {}
-	}
-});
-const accordionHeadingTitleDefinition = UIOverrides.defineConfig({
-	base: ["flex-1 text-left text-surface-default-card-foreground"],
-	config: {
-		variants: {},
-		defaultVariants: {}
-	}
-});
-const accordionHeadingSubtitleDefinition = UIOverrides.defineConfig({
-	base: ["flex-1 text-left text-surface-default-foreground"],
-	config: {
-		variants: {},
-		defaultVariants: {}
-	}
-});
-const accordionChevronDefinition = UIOverrides.defineConfig({
-	base: ["size-6 shrink-0 text-surface-default-popover-foreground transition-transform duration-200"],
-	config: {
-		variants: { isExpanded: {
-			true: "rotate-180",
-			false: "rotate-0"
-		} },
-		defaultVariants: { isExpanded: false }
-	}
-});
-const accordionIconDefinition = UIOverrides.defineConfig({
-	base: ["size-6 shrink-0 text-surface-default-popover-foreground"],
-	config: {
-		variants: {},
-		defaultVariants: {}
-	}
-});
-const accordionPanelDefinition = UIOverrides.defineConfig({
-	base: [""],
-	config: { variants: { isExpanded: { true: "px-accordion-side-accordion pt-0 pb-accordion-height-accordion" } } }
-});
-const accordionPanelContentDefinition = UIOverrides.defineConfig({
-	base: ["py-accordion-height-content"],
-	config: {
-		variants: {},
-		defaultVariants: {}
-	}
-});
-//#endregion
 //#region src/components/navigation/Accordion/AccordionItem.tsx
 const AccordionItem = (t0) => {
 	const $ = c(25);
@@ -282,7 +157,10 @@ const AccordionItem = (t0) => {
 					children: /* @__PURE__ */ jsxs("div", {
 						className: "flex flex-1 items-center gap-accordion-gap-icon-to-text",
 						children: [
-							Icon && /* @__PURE__ */ jsx(Icon, { className: iconCva({}) }),
+							Icon && /* @__PURE__ */ jsx(IconSlot, {
+								icon: Icon,
+								className: iconCva({})
+							}),
 							/* @__PURE__ */ jsx(Typography, {
 								size: "small",
 								className: headingTitleCva({}),
@@ -295,12 +173,18 @@ const AccordionItem = (t0) => {
 							})
 						]
 					})
-				}), /* @__PURE__ */ jsx(ChevronDown, { className: chevronCva({ isExpanded }) })]
+				}), /* @__PURE__ */ jsx(IconSlot, {
+					icon: ChevronDown,
+					className: chevronCva({ isExpanded })
+				})]
 			}) }), /* @__PURE__ */ jsx($a3e16eab0ea4036c$export$feabaa331e1d464c, {
-				className: panelCva({ isExpanded }),
+				className: clsx("h-(--disclosure-panel-height) overflow-clip transition-[height,opacity] duration-200 ease-out motion-reduce:transition-none", isExpanded ? "opacity-100" : "opacity-0"),
 				children: /* @__PURE__ */ jsx("div", {
-					className: panelContentCva({}),
-					children
+					className: panelCva({ isExpanded }),
+					children: /* @__PURE__ */ jsx("div", {
+						className: panelContentCva({}),
+						children
+					})
 				})
 			})] });
 		};
@@ -411,4 +295,4 @@ const Accordion = (t0) => {
 	return t7;
 };
 //#endregion
-export { accordionHeadingSubtitleDefinition as a, accordionItemDefinition as c, accordionTriggerDefinition as d, accordionHeadingDefinition as i, accordionPanelContentDefinition as l, accordionChevronDefinition as n, accordionHeadingTitleDefinition as o, accordionDefinition as r, accordionIconDefinition as s, Accordion as t, accordionPanelDefinition as u };
+export { Accordion as t };

package/dist/{Alert-T25LY8ZL.js → Alert-CnvEb1D_.js}

@@ -1,11 +1,12 @@
-import { t as UIOverrides } from "./uiOverrides.context-Bfm2n-n8.js";
-import { t as Typography } from "./Typography-B0Gp1lpc.js";
-import { t as Spinner } from "./Spinner-BEYBu85B.js";
+import { t as UIOverrides } from "./uiOverrides.context-BTCH9y5a.js";
+import { t as IconSlot } from "./IconSlot-DSK7qNxc.js";
+import { t as Typography } from "./Typography-LU4z2pR1.js";
+import { t as Spinner } from "./Spinner-BeVTUzzx.js";
 import { c } from "react/compiler-runtime";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/status/Alert/alert.cva.ts
 const alertDefinition = UIOverrides.defineConfig({
-	base: ["min-h-0 overflow-hidden rounded-alert-rounding-default p-0"],
+	base: ["min-h-0 overflow-hidden rounded-alert-rounding-default p-0 shadow-4"],
 	config: {
 		variants: {
 			variant: {
@@ -38,7 +39,7 @@ const alertDefinition = UIOverrides.defineConfig({
 			{
 				variant: "outlined",
 				color: "error",
-				className: "border-surface-destructive-base"
+				className: "border-border-destructive-base"
 			},
 			{
 				variant: "contained",
@@ -70,7 +71,7 @@ const alertDefinition = UIOverrides.defineConfig({
 //#endregion
 //#region src/components/status/shared/status.cva.ts
 const statusIconDefinition = UIOverrides.defineConfig({
-	base: ["size-6 shrink-0"],
+	base: ["size-icons-size shrink-0"],
 	config: {
 		variants: {
 			variant: {
@@ -163,10 +164,13 @@ const Alert = (t0) => {
 	} else t3 = $[6];
 	let t4;
 	if ($[7] !== Icon || $[8] !== color || $[9] !== iconCva || $[10] !== isLoading || $[11] !== variant) {
-		t4 = !isLoading && Icon && /* @__PURE__ */ jsx(Icon, { className: iconCva({
-			variant,
-			color
-		}) });
+		t4 = !isLoading && Icon && /* @__PURE__ */ jsx(IconSlot, {
+			icon: Icon,
+			className: iconCva({
+				variant,
+				color
+			})
+		});
 		$[7] = Icon;
 		$[8] = color;
 		$[9] = iconCva;
@@ -177,7 +181,7 @@ const Alert = (t0) => {
 	let t5;
 	if ($[13] !== text) {
 		t5 = /* @__PURE__ */ jsx(Typography, {
-			size: "small",
+			size: "large",
 			children: text
 		});
 		$[13] = text;
@@ -204,7 +208,7 @@ const Alert = (t0) => {
 			variant,
 			color
 		}) }), /* @__PURE__ */ jsx("div", {
-			className: "flex w-full shrink-0 flex-wrap items-center justify-end gap-alert-gap-action px-alert-side-default py-alert-height-actions-mobile md:w-auto md:justify-center md:py-alert-height-actions-desktop",
+			className: "flex w-full shrink-0 flex-wrap items-center justify-end gap-toast-gap-action px-alert-side-default py-alert-height-actions-mobile md:w-auto md:justify-center md:py-alert-height-actions-desktop",
 			children: rightContent
 		})] });
 		$[19] = color;

package/dist/{Alert-f1dG-4Uy.d.ts → Alert-DfiJbKH0.d.ts}

@@ -1,4 +1,5 @@
-import { n as StyleMergeUtils, t as UIOverrides } from "./uiOverrides.context-C3xb4Ttq.js";
+import { t as StyleMergeUtils } from "./style-merge.util-zLimKwt6.js";
+import { t as UIOverrides } from "./uiOverrides.context-DEp139He.js";
 import { FC, ReactNode, SVGProps } from "react";
 //#region src/components/status/Alert/alert.cva.d.ts
 declare const alertDefinition: {

package/dist/{AlertDialog-B6R2MbNg.d.ts → AlertDialog-OWTbR4km.d.ts}

@@ -1,6 +1,6 @@
-import { n as ButtonVariantProps } from "./button.cva-BvRI-3Gn.js";
-import { n as DialogProps } from "./Dialog-DEbI_9S-.js";
-import { r as TypographyPropsCva } from "./Typography-BiuidzDC.js";
+import { n as ButtonVariantProps } from "./button.cva-C7kEhgoA.js";
+import { n as DialogProps } from "./Dialog-CW93T9X1.js";
+import { r as TypographyPropsCva } from "./Typography-XljT9s02.js";
 //#region src/components/overlays/AlertDialog/AlertDialog.d.ts
 interface AlertDialogAction {
   label: string;

package/dist/{Autocomplete-CQ63Cynd.d.ts → Autocomplete-BwNHp8fy.d.ts}

@@ -1,5 +1,5 @@
 import { n as FieldValues } from "./form.binding-DVJ5F0JE.js";
-import { n as GroupedSelectControlProps, o as SelectBaseProps, r as GroupedSelectProps, t as DefaultInitialSelectItem } from "./SelectBase-7SE9Za2r.js";
+import { n as GroupedSelectControlProps, o as SelectBaseProps, r as GroupedSelectProps, t as DefaultInitialSelectItem } from "./SelectBase-Omiq2D3M.js";
 import { s as OmitDiscriminatedUnion } from "./common-UBFya8WY.js";
 import { ReactElement } from "react";
 import { Key } from "react-aria-components";

package/dist/{Badge-YKlKz-Jy.d.ts → Badge-CBNpj823.d.ts}

@@ -1,9 +1,9 @@
-import { t as PillButtonVariants } from "./pillButton.cva-BEWuu0qm.js";
-import { n as TypographyProps } from "./Typography-BiuidzDC.js";
-import { Ref } from "react";
+import { t as BadgeButtonVariants } from "./badgeButton.cva-B2bgCQP6.js";
+import { n as TypographyProps } from "./Typography-XljT9s02.js";
+import { FC, Ref, SVGProps } from "react";
 import { ButtonProps } from "react-aria-components";
 //#region src/components/text/Badge/Badge.d.ts
-interface BadgeProps extends PillButtonVariants {
+interface BadgeProps extends BadgeButtonVariants {
   className?: string;
   children: string;
   /** Preferred spelling. `dismissable` remains supported. */
@@ -11,6 +11,9 @@ interface BadgeProps extends PillButtonVariants {
   dismissable?: boolean;
   isDisabled?: boolean;
   disabled?: boolean;
+  /** Display the toggled appearance without making the badge interactive. */
+  isSelected?: boolean;
+  icon?: FC<SVGProps<SVGSVGElement>>;
   contentRef?: Ref<HTMLElement>;
   textSize?: TypographyProps["size"];
   /** Preferred callback name. */
@@ -22,6 +25,6 @@ interface BadgeProps extends PillButtonVariants {
   /** Compatibility callback for the historical button-like prop surface. */
   onPress?: ButtonProps["onPress"];
 }
-declare const Badge: ({ className, children, dismissible, dismissable, isDisabled, disabled, onRemove, onDismiss, dismissButtonProps, excludeFromTabOrder, onPress, contentRef, variant, textSize: textSizeProp, ...appearanceProps }: BadgeProps) => import("react").JSX.Element;
+declare const Badge: ({ className, children, dismissible, dismissable, isDisabled, disabled, isSelected, icon: Icon, onRemove, onDismiss, dismissButtonProps, excludeFromTabOrder, onPress, contentRef, variant, textSize: textSizeProp, ...appearanceProps }: BadgeProps) => import("react").JSX.Element;
 //#endregion
 export { BadgeProps as n, Badge as t };

package/dist/BadgeButton-Ccgt3oGO.d.ts

@@ -0,0 +1,15 @@
+import { t as BadgeButtonVariants } from "./badgeButton.cva-B2bgCQP6.js";
+import { t as ButtonContentVariantProps } from "./buttonContent.cva-DPIlROA9.js";
+import { FC, ReactNode, Ref, SVGProps } from "react";
+import { ButtonProps, ToggleButtonProps } from "react-aria-components";
+//#region src/components/buttons/BadgeButton/BadgeButton.d.ts
+interface BadgeButtonProps extends ButtonProps, Omit<ToggleButtonProps, keyof ButtonProps>, ButtonContentVariantProps, BadgeButtonVariants {
+  children: ReactNode;
+  dismissable?: boolean;
+  toggle?: boolean;
+  icon?: FC<SVGProps<SVGSVGElement>>;
+  contentRef?: Ref<HTMLElement>;
+}
+declare const BadgeButton: ({ children, dismissable, toggle, icon, iconPosition, contentRef, ...props }: BadgeButtonProps) => import("react").JSX.Element;
+//#endregion
+export { BadgeButtonProps as n, BadgeButton as t };

package/dist/{BottomSheet-DvqBvth_.js → BottomSheet-BXLE3161.js}

@@ -1,13 +1,14 @@
-import { t as UIConfig } from "./uiConfig.context-D2eUIPHn.js";
+import { t as UIConfig } from "./uiConfig.context-BS3r_kTS.js";
 import { t as X } from "./x-B6vfz8Ps.js";
 import { t as clsx } from "./clsx-CnD0nOiA.js";
-import { n as $f2ff30fde7b014be$export$3ddf2d174ce01153, t as $f2ff30fde7b014be$export$2e1e1122cf0cba88 } from "./Dialog-CXoVeIkU.js";
+import { t as IconSlot } from "./IconSlot-DSK7qNxc.js";
+import { n as $f2ff30fde7b014be$export$3ddf2d174ce01153, t as $f2ff30fde7b014be$export$2e1e1122cf0cba88 } from "./Dialog-CKLkS00H.js";
 import { n as $7705c033048f6da7$export$353f5b6fc5456de1 } from "./Button-D6KlWSFL.js";
-import { n as $8b8d26808cb8cb53$export$8948f78d83984c69, t as $8b8d26808cb8cb53$export$2b77a92f1a5ad772 } from "./Modal-CoFt5PGP.js";
-import { t as Typography } from "./Typography-B0Gp1lpc.js";
+import { n as $8b8d26808cb8cb53$export$8948f78d83984c69, t as $8b8d26808cb8cb53$export$2b77a92f1a5ad772 } from "./Modal-w60dVQcb.js";
+import { t as Typography } from "./Typography-LU4z2pR1.js";
 import { a as $a8ea2faf2ebe4d2f$re_export$useResizeObserver, o as $a8ea2faf2ebe4d2f$re_export$useViewportSize } from "./import-BE0r63d8.js";
 import "./i18n-CX2EjhJI.js";
-import { n as useStateAndRef, t as DomUtils } from "./dom.utils-DjuRTR6U.js";
+import { n as useStateAndRef, t as DomUtils } from "./dom.utils-D1AopHx9.js";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { c } from "react/compiler-runtime";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -54,7 +55,7 @@ const BottomSheetHeader = (t0) => {
 				onPress: onClose,
 				"aria-label": t(_temp),
 				className: "-m-2 shrink-0 p-2 text-surface-default-foreground focus-visible:outline-interactive-ring",
-				children: /* @__PURE__ */ jsx(X, { className: "size-6" })
+				children: /* @__PURE__ */ jsx(IconSlot, { icon: X })
 			})]
 		});
 		$[6] = headerTypography;

package/dist/{BottomSheet-xaymO7aQ.d.ts → BottomSheet-DbQuzfAB.d.ts}

@@ -1,4 +1,4 @@
-import { t as TypographyVariantProps } from "./typography.cva-jtp6WWUH.js";
+import { t as TypographyVariantProps } from "./typography.cva-D1JOEYl-.js";
 import { ReactNode, RefObject } from "react";
 //#region src/components/overlays/BottomSheet/BottomSheet.d.ts
 type BottomSheetState = "closed" | "opening" | "opened" | "closing";

package/dist/{BottomSheet.lazy-CGBRPve_.d.ts → BottomSheet.lazy-D9LCEo7s.d.ts}

@@ -1,4 +1,4 @@
-import { t as BottomSheetProps } from "./BottomSheet-xaymO7aQ.js";
+import { t as BottomSheetProps } from "./BottomSheet-DbQuzfAB.js";
 //#region src/components/overlays/BottomSheet/BottomSheet.lazy.d.ts
 declare const BottomSheet: ({ isOpen, onOpenChange, trigger, ...props }: BottomSheetProps) => import("react").JSX.Element;
 //#endregion

package/dist/{Breadcrumbs-DyriI-Bi.d.ts → Breadcrumbs-CUV6CU8Q.d.ts}

@@ -1,4 +1,4 @@
-import { n as LinkNavigationProps } from "./Link-QYpprkN1.js";
+import { n as LinkNavigationProps } from "./Link-Ow9H7kNv.js";
 import { FC, SVGProps } from "react";
 import { Key } from "react-aria-components";
 //#region src/components/Breadcrumbs/Breadcrumbs.d.ts

package/dist/{Breadcrumbs-DiIYJAWf.js → Breadcrumbs-CbKzAq1v.js}

@@ -1,23 +1,25 @@
-import { t as DropdownMenuDesktop } from "./DropdownMenuDesktop-CGYxsavQ.js";
+import { t as DropdownMenuDesktop } from "./DropdownMenuDesktop-Cl9gZVq0.js";
 import { t as ChevronRight } from "./chevron-right-3nKJR5Bb.js";
 import { t as clsx } from "./clsx-CnD0nOiA.js";
+import { t as UIOverrides } from "./uiOverrides.context-BTCH9y5a.js";
+import { t as IconSlot } from "./IconSlot-DSK7qNxc.js";
 import { l as $7230ffa83bc0c2cf$export$fabf2dc03a41866e, n as $7230ffa83bc0c2cf$export$29f1550f4b0d4415, r as $7230ffa83bc0c2cf$export$4d86445c2cf5e3, s as $7230ffa83bc0c2cf$export$df3a06d6289f983e } from "./utils-Czcqspm7.js";
-import { p as $263ab7fc0f95ccdb$export$4feb769f8ddf26c5 } from "./Dialog-CXoVeIkU.js";
+import { m as $263ab7fc0f95ccdb$export$4feb769f8ddf26c5 } from "./Dialog-CKLkS00H.js";
 import { n as $984a1fc08f87e4f3$export$e2509388b49734e7, t as $984a1fc08f87e4f3$export$a6c7ac8248d6e38a } from "./Link-FupWOW1f.js";
 import { n as $7705c033048f6da7$export$353f5b6fc5456de1 } from "./Button-D6KlWSFL.js";
-import { t as Tooltip } from "./Tooltip-aE1Vswxz.js";
-import { t as UIOverrides } from "./uiOverrides.context-Bfm2n-n8.js";
-import { t as Typography } from "./Typography-B0Gp1lpc.js";
+import { t as Tooltip } from "./Tooltip-B9DKcYvr.js";
+import { a as breadcrumbsDefinition, i as breadcrumbSegmentDefinition, n as breadcrumbIconDefinition, r as breadcrumbItemDefinition, t as breadcrumbChevronDefinition } from "./breadcrumbs.cva-7zzdDhVR.js";
+import { t as Typography } from "./Typography-LU4z2pR1.js";
 import { t as LinkContext } from "./link.context-J7aQtMOr.js";
 import $ahdqC$react, { createContext, forwardRef, useContext, useLayoutEffect, useRef, useState } from "react";
 import { c } from "react/compiler-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { mergeProps } from "react-aria/mergeProps";
 import { CollectionBuilder, createLeafComponent } from "react-aria/CollectionBuilder";
 import { filterDOMProps } from "react-aria/filterDOMProps";
 import { useBreadcrumbs } from "react-aria/useBreadcrumbs";
 import { Collection } from "react-aria/Collection";
 import { CollectionNode } from "react-aria/private/collections/BaseCollection";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region ../../node_modules/.bun/react-aria-components@1.21.1+67f6792bdf102c28/node_modules/react-aria-components/dist/private/Breadcrumbs.mjs
 const $65dbe90f868fa5f4$export$65596d3621b0a4a0 = /*#__PURE__*/ createContext(null);
 const $65dbe90f868fa5f4$export$2dc68d50d56fbbd = /*#__PURE__*/ forwardRef(function Breadcrumbs(props, ref) {
@@ -73,31 +75,6 @@ const $65dbe90f868fa5f4$export$dabcc1ec9dd9d1cc = /*#__PURE__*/ createLeafCompon
 	}, /*#__PURE__*/ $ahdqC$react.createElement($984a1fc08f87e4f3$export$e2509388b49734e7.Provider, { value: linkProps }, renderProps.children));
 });
 //#endregion
-//#region src/components/Breadcrumbs/breadcrumbs.cva.ts
-const breadcrumbsDefinition = UIOverrides.defineConfig({ base: ["flex items-center gap-breadcrumbs-gap-segment-to-segment"] });
-const breadcrumbSegmentDefinition = UIOverrides.defineConfig({ base: ["flex items-center gap-breadcrumbs-gap-segment-to-segment"] });
-const breadcrumbChevronDefinition = UIOverrides.defineConfig({ base: ["size-6 shrink-0 text-surface-default-foreground"] });
-const breadcrumbIconDefinition = UIOverrides.defineConfig({ base: ["size-4 shrink-0"] });
-const breadcrumbItemDefinition = UIOverrides.defineConfig({
-	base: ["inline-flex cursor-pointer items-center gap-breadcrumbs-gap-icon-to-text whitespace-nowrap font-inter font-medium text-small no-underline"],
-	config: {
-		variants: {
-			isCurrent: {
-				true: "text-interactive-primary-background",
-				false: "text-surface-default-foreground hover:text-tint-surface-default-foreground/80"
-			},
-			isEllipsis: {
-				true: "hover:text-tint-interactive-primary-background/80!",
-				false: ""
-			}
-		},
-		defaultVariants: {
-			isCurrent: false,
-			isEllipsis: false
-		}
-	}
-});
-//#endregion
 //#region src/components/Breadcrumbs/Breadcrumbs.tsx
 const Breadcrumbs = (t0) => {
 	const $ = c(58);
@@ -145,9 +122,9 @@ const Breadcrumbs = (t0) => {
 		t4 = (item, isCurrent, iconOnly_0) => /* @__PURE__ */ jsxs(LinkComponent, {
 			...item.link,
 			className: breadcrumbItem({ isCurrent }),
-			children: [item.icon && /* @__PURE__ */ jsx(item.icon, {
-				className: breadcrumbIconCva({}),
-				"aria-label": item.label
+			children: [item.icon && /* @__PURE__ */ jsx(IconSlot, {
+				icon: /* @__PURE__ */ jsx(item.icon, { "aria-label": item.label }),
+				className: breadcrumbIconCva({})
 			}), !iconOnly_0 && /* @__PURE__ */ jsx(Typography, {
 				size: "small",
 				children: item.label
@@ -209,7 +186,10 @@ const Breadcrumbs = (t0) => {
 		} else t9 = $[18];
 		let t10;
 		if ($[19] !== t9) {
-			t10 = /* @__PURE__ */ jsx(ChevronRight, { className: t9 });
+			t10 = /* @__PURE__ */ jsx(IconSlot, {
+				icon: ChevronRight,
+				className: t9
+			});
 			$[19] = t9;
 			$[20] = t10;
 		} else t10 = $[20];
@@ -241,7 +221,10 @@ const Breadcrumbs = (t0) => {
 		} else t14 = $[29];
 		let t15;
 		if ($[30] !== t14) {
-			t15 = /* @__PURE__ */ jsx(ChevronRight, { className: t14 });
+			t15 = /* @__PURE__ */ jsx(IconSlot, {
+				icon: ChevronRight,
+				className: t14
+			});
 			$[30] = t14;
 			$[31] = t15;
 		} else t15 = $[31];
@@ -306,7 +289,10 @@ const Breadcrumbs = (t0) => {
 			className: breadcrumbSegmentCva({}),
 			children: (t9) => {
 				const { isCurrent: isCurrent_0 } = t9;
-				return /* @__PURE__ */ jsxs(Fragment$1, { children: [renderBreadcrumbLink(item_1, isCurrent_0, iconOnly && item_1 === items[0]), !isCurrent_0 && /* @__PURE__ */ jsx(ChevronRight, { className: breadcrumbChevronCva({}) })] });
+				return /* @__PURE__ */ jsxs(Fragment$1, { children: [renderBreadcrumbLink(item_1, isCurrent_0, iconOnly && item_1 === items[0]), !isCurrent_0 && /* @__PURE__ */ jsx(IconSlot, {
+					icon: ChevronRight,
+					className: breadcrumbChevronCva({})
+				})] });
 			}
 		});
 		$[46] = breadcrumbChevronCva;
@@ -346,4 +332,4 @@ function _temp2(i) {
 	return i.label;
 }
 //#endregion
-export { breadcrumbSegmentDefinition as a, breadcrumbItemDefinition as i, breadcrumbChevronDefinition as n, breadcrumbsDefinition as o, breadcrumbIconDefinition as r, Breadcrumbs as t };
+export { Breadcrumbs as t };