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

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";
@@ -25,7 +26,7 @@ The broad `@povio/ui`, `@povio/ui/rhf`, and `@povio/ui/tanstack` entries remain
 
 Feature dependencies are optional peers. Install the matching packages when using date/calendar entries, `@povio/ui/tanstack/table`, RHF/TanStack Form inputs, or the rich text editor. Basic components such as Button, Typography, and Dialog do not require table, drag-and-drop, calendar, or TipTap packages.
 
-React Aria is an internal `@povio/ui` dependency and does not need to be installed separately. Povio component entries include the React Aria implementation they use. Component-scoped escape-hatch entries expose only the corresponding React Aria primitive and its types for custom implementations:
+React Aria is an internal `@povio/ui` dependency and does not need to be installed separately. The build keeps `react-aria` and all its subpaths external so providers and Povio components share the installed module contexts. Component-scoped escape-hatch entries expose only the corresponding React Aria primitive and its types for custom implementations:
 
 ```tsx
 import { Link, type LinkProps } from "@povio/ui/link/react-aria";
@@ -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. **Advanced → 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`.
@@ -54,6 +72,10 @@ Inputs support `size="small"` and `default`. Omit `size` for the default. This a
 
 Replace `size="extra-small"` with `size="small"`, and remove `size="large"` or `size="default"` to use the default. Small and default retain their existing spacing.
 
+## Built-package tests
+
+From `packages/ui`, run `bun run test:package` to build the publishable package and run its Chromium regressions. The tests resolve public imports through `dist/package.json`, covering both date pickers with empty and populated values in static and editable modes, including locale switches without remounting.
+
 ## Versioning
 
 `^2.1` still corresponds to Atlas 2.1. All versions after that currently target Atlas 2.2 and follow semantic versioning — breaking changes bump the major version.
@@ -124,9 +146,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 +156,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