@povio/ui 5.0.0-rc.1 → 5.0.0-rc.11

package/dist/theme-model-DtTsIxou.js

@@ -0,0 +1,408 @@
+//#region src/configurator/theme-model.ts
+const groups = [
+	"Colors",
+	"Typography",
+	"Spacing",
+	"Radius",
+	"Sizing",
+	"Effects"
+];
+const declarations = (source) => Object.fromEntries([...source.matchAll(/(--[\w-]+)\s*:\s*([^;]+);/g)].map(([, name, value]) => [name, value.trim()]));
+const selectorDeclarations = (source, selector) => Object.assign({}, ...[...source.matchAll(selector)].map((match) => declarations(match[1])));
+const parseThemeCss = (themeSource) => ({
+	light: selectorDeclarations(themeSource, /:root\s*\{([^}]+)\}/g),
+	dark: selectorDeclarations(themeSource, /\.dark\s*\{([^}]+)\}/g),
+	theme: declarations([...themeSource.matchAll(/@theme(?:\s+static)?\s*\{([^}]+)\}/g)].map((match) => match[1]).join("\n"))
+});
+function groupFor(name) {
+	if (name.startsWith("--color-") || name.endsWith("-base")) return "Colors";
+	if (/^--(font|text|tracking)-/.test(name)) return "Typography";
+	if (name.startsWith("--spacing-")) return "Spacing";
+	if (name.startsWith("--radius-")) return "Radius";
+	if (name.startsWith("--container-")) return "Sizing";
+	return "Effects";
+}
+/** Whether the configurator lists this token, so an inspector can link to it. `--color-*` wrappers link via `-base`. */
+const isEditableToken = (name, defaults) => (name in defaults.theme || name in defaults.light || name in defaults.dark) && !name.startsWith("--color-");
+const labelFor = (name) => name.replace(/^--/, "").replace(/-base$/, "").replaceAll("-", " ");
+const isRgb = (value) => /^\d+\s+\d+\s+\d+$/.test(value);
+const toHex = (value) => `#${value.split(/\s+/).map((part) => Number(part).toString(16).padStart(2, "0")).join("")}`;
+const toRgb = (hex) => [
+	1,
+	3,
+	5
+].map((offset) => parseInt(hex.slice(offset, offset + 2), 16)).join(" ");
+function validToken(name, value, original) {
+	if (!value.trim() || /[;{}<>]/.test(value)) return false;
+	if (isRgb(original)) return isRgb(value) && value.split(/\s+/).every((part) => Number(part) <= 255);
+	if (name.endsWith("-base") && /^var\(--[\w-]+\)$/.test(original)) return /^var\(--[\w-]+\)$/.test(value) || isRgb(value) && value.split(/\s+/).every((part) => Number(part) <= 255);
+	const property = name.startsWith("--color-") || /^#[0-9a-f]+$/i.test(original) ? "color" : name.startsWith("--font-weight-") ? "font-weight" : name.startsWith("--font-") ? "font-family" : name.endsWith("--line-height") ? "line-height" : name.endsWith("--letter-spacing") || name.startsWith("--tracking-") ? "letter-spacing" : name.startsWith("--shadow-") || name.startsWith("--drop-shadow-") ? "box-shadow" : "width";
+	return CSS.supports(property, value);
+}
+const emptyTheme = () => ({
+	light: {},
+	dark: {},
+	theme: {}
+});
+function previewTokens(defaults, edits, mode) {
+	return mode === "dark" ? {
+		...defaults.theme,
+		...edits.theme,
+		...defaults.light,
+		...edits.light,
+		...defaults.dark,
+		...edits.dark
+	} : {
+		...defaults.theme,
+		...edits.theme,
+		...defaults.light,
+		...edits.light
+	};
+}
+/** Numbered RGB shades in the root theme form the shared base palette. */
+/**
+* Tailwind-style shade weights around a 500 base: lighter steps mix toward white by the weight, darker steps scale
+* the channels by it. Matches common Tailwind shade generators, extended with the 10, 950 and 1000 steps used here.
+*/
+const lighten = {
+	10: .98,
+	50: .95,
+	100: .9,
+	200: .75,
+	300: .6,
+	400: .3,
+	500: 0
+};
+const darken = {
+	500: 1,
+	600: .9,
+	700: .6,
+	800: .45,
+	900: .3,
+	950: .2,
+	1e3: .15
+};
+/** Interpolates a weight for steps between the known ones, such as 150 or 850. */
+function weightFor(table, step) {
+	const known = Object.keys(table).map(Number).sort((a, b) => a - b);
+	if (step <= known[0]) return table[known[0]];
+	if (step >= known.at(-1)) return table[known.at(-1)];
+	const upper = known.findIndex((value) => value >= step);
+	const [low, high] = [known[upper - 1], known[upper]];
+	return table[low] + (table[high] - table[low]) * (step - low) / (high - low);
+}
+/** Generates a palette's RGB channel values from its 500 color, keyed by step. */
+function generateShades(baseRgb, steps) {
+	const channels = baseRgb.split(/\s+/).map(Number);
+	return Object.fromEntries(steps.map((step) => {
+		return [step, (step <= 500 ? channels.map((channel) => channel + (255 - channel) * weightFor(lighten, step)) : channels.map((channel) => channel * weightFor(darken, step))).map((channel) => Math.round(channel)).join(" ")];
+	}));
+}
+/** Global rounding steps, from square corners to pills; level 2 keeps the theme's own radii. */
+const roundingLevels = [
+	{
+		label: "Square",
+		factor: 0
+	},
+	{
+		label: "×0.5",
+		factor: .5
+	},
+	{
+		label: "Default",
+		factor: 1
+	},
+	{
+		label: "×1.5",
+		factor: 1.5
+	},
+	{
+		label: "×2",
+		factor: 2
+	},
+	{
+		label: "×3",
+		factor: 3
+	},
+	{
+		label: "Pill",
+		factor: Infinity
+	}
+];
+/**
+* Focus rings sit outside their element, so they keep the theme's offset from the inner radius instead of scaling on
+* their own; otherwise the ring drifts away from the corner it outlines.
+*/
+const focusRadii = {
+	"--radius-button-focus-rounding-default": "--radius-button-rounding-default",
+	"--radius-button-focus-rounding-small": "--radius-button-rounding-small",
+	"--radius-accordion-rounding-focus": "--radius-accordion-rounding-filled",
+	"--radius-segmented-control-rounding-segmented-control": "--radius-segmented-control-rounding-segment"
+};
+/**
+* Pill rounding only rounds controls fully; surfaces such as cards, modals, menus and alerts keep the theme radii,
+* since a fully rounded container clips its content.
+*/
+const pillControls = /^--radius-(button|input|floating-label-input|badge|segmented-control|slider|progress)-/;
+const radiusLength = (value) => {
+	const match = value.trim().match(/^(-?\d*\.?\d+)(rem|px)$/);
+	return match ? {
+		amount: Number(match[1]),
+		unit: match[2]
+	} : void 0;
+};
+const formatLength = (amount, unit) => `${Number(amount.toFixed(4))}${unit}`;
+/**
+* Radius tokens for a global rounding level, always derived from the theme defaults so repeated steps never compound.
+* Square corners and full radii (pills, avatars) are left alone, as are values that are not plain lengths.
+*/
+function scaleRadii(defaults, level) {
+	const { factor } = roundingLevels[level];
+	const full = defaults.theme["--radius-full"];
+	const fullAmount = full ? radiusLength(full) : void 0;
+	const isFull = (value) => {
+		const length = radiusLength(value);
+		return value === full || !!length && length.amount >= (fullAmount?.amount ?? 100);
+	};
+	const scale = (name, value) => {
+		const length = radiusLength(value);
+		if (!length || length.amount === 0 || isFull(value)) return value;
+		if (factor === Infinity) return full && pillControls.test(name) ? full : value;
+		return formatLength(length.amount * factor, length.unit);
+	};
+	const radii = Object.entries(defaults.theme).filter(([name]) => groupFor(name) === "Radius");
+	const scaled = Object.fromEntries(radii.map(([name, value]) => [name, scale(name, value)]));
+	for (const [focus, inner] of Object.entries(focusRadii)) {
+		const [focusLength, innerLength] = [defaults.theme[focus], defaults.theme[inner]].map((v) => v && radiusLength(v));
+		const scaledInner = scaled[inner] && radiusLength(scaled[inner]);
+		if (!focusLength || !innerLength || !scaledInner || focusLength.unit !== innerLength.unit) continue;
+		scaled[focus] = scaledInner.amount === 0 || isFull(scaled[inner]) ? scaled[inner] : formatLength(scaledInner.amount + focusLength.amount - innerLength.amount, focusLength.unit);
+	}
+	return scaled;
+}
+/** Padding and gap steps; level 2 keeps the theme's own spacing. */
+const spacingLevels = [
+	{
+		label: "×0.5",
+		factor: .5
+	},
+	{
+		label: "×0.75",
+		factor: .75
+	},
+	{
+		label: "Default",
+		factor: 1
+	},
+	{
+		label: "×1.25",
+		factor: 1.25
+	},
+	{
+		label: "×1.5",
+		factor: 1.5
+	},
+	{
+		label: "×2",
+		factor: 2
+	}
+];
+/** Font size steps; line heights are ratios, so they follow. Level 3 keeps the theme's own sizes. */
+const fontSizeLevels = [
+	{
+		label: "×0.75",
+		factor: .75
+	},
+	{
+		label: "×0.875",
+		factor: .875
+	},
+	{
+		label: "×0.9375",
+		factor: .9375
+	},
+	{
+		label: "Default",
+		factor: 1
+	},
+	{
+		label: "×1.0625",
+		factor: 1.0625
+	},
+	{
+		label: "×1.125",
+		factor: 1.125
+	},
+	{
+		label: "×1.25",
+		factor: 1.25
+	}
+];
+/** Component size steps; level 2 keeps the theme's own sizes. */
+const sizingLevels = [
+	{
+		label: "×0.75",
+		factor: .75
+	},
+	{
+		label: "×0.875",
+		factor: .875
+	},
+	{
+		label: "Default",
+		factor: 1
+	},
+	{
+		label: "×1.125",
+		factor: 1.125
+	},
+	{
+		label: "×1.25",
+		factor: 1.25
+	},
+	{
+		label: "×1.5",
+		factor: 1.5
+	}
+];
+/**
+* Component tokens are mirrored in `--spacing-*` (padding, gap and height utilities) and `--container-*` (width
+* utilities), so both are scaled together. Sizes are avatar heights, button and input heights (the vertical padding
+* that sets a control's height), minimum widths, the icon size and the container width scale; everything else is padding or a gap.
+* The icon stroke weight is neither.
+*/
+const layoutName = (name) => name.replace(/^--(spacing|container)-/, "");
+const isSizeToken = (name) => /^(avatar-height-|(button|input)-height-(small|default)$|input-width-|button-min-width-|icons?-size$|\d+$|(\d(-5)?)?(xs|sm|md|lg|xl)$)/.test(layoutName(name));
+const isLayoutToken = (name, sizes) => /^--(spacing|container)-/.test(name) && !name.endsWith("-icon-weight") && isSizeToken(name) === sizes;
+/** Text style font sizes, without their `--line-height` and `--letter-spacing` companions. */
+const isFontSizeToken = (name) => /^--text-[\w-]+$/.test(name) && !name.includes("--", 2);
+function scaleLengths(defaults, include, factor, resize = (_name, length) => length.amount * factor, growsFromZero = (_name) => false) {
+	return Object.fromEntries(Object.entries(defaults.theme).filter(([name]) => include(name)).map(([name, value]) => {
+		const length = radiusLength(value);
+		if (!length || length.amount === 0 && !growsFromZero(name)) return [name, value];
+		const step = length.unit === "rem" ? 1 / 16 : 1;
+		return [name, formatLength(Math.max(0, Math.round(resize(name, length) / step) * step), length.unit)];
+	}));
+}
+/**
+* A button's or input's height is its vertical padding around one line of content, roughly the icon size. Scaling only
+* the few pixels of padding barely changes a small control (a small input has none), so the padding grows by enough to
+* scale the whole control instead.
+*/
+function scaleSizes(defaults, factor) {
+	const icon = defaults.theme["--spacing-icons-size"] ?? defaults.theme["--container-icons-size"];
+	const content = icon ? radiusLength(icon) : void 0;
+	const isControlHeight = (name) => /^--(spacing|container)-(button|input)-height-(small|default)$/.test(name);
+	return scaleLengths(defaults, (name) => isLayoutToken(name, true), factor, (name, length) => isControlHeight(name) && content?.unit === length.unit ? length.amount + (factor - 1) * (length.amount + content.amount / 2) : length.amount * factor, isControlHeight);
+}
+const layoutKinds = [
+	"Radius",
+	"Spacing",
+	"Sizing",
+	"Font size"
+];
+/**
+* The layout sub-tab a token belongs to, if any. Spacing and container tokens are split by meaning rather than by
+* namespace: sizes (and the icon stroke weight) go to Sizing, padding and gaps to Spacing.
+*/
+function layoutKindFor(name) {
+	if (isFontSizeToken(name)) return "Font size";
+	if (/^--(spacing|container)-/.test(name)) return isSizeToken(name) || name.endsWith("-icon-weight") ? "Sizing" : "Spacing";
+	return groupFor(name) === "Radius" ? "Radius" : void 0;
+}
+/** The other copy of a token defined as both `--spacing-*` and `--container-*`. */
+function layoutMirror(name, defaults) {
+	const match = name.match(/^--(spacing|container)-(.+)$/);
+	const mirror = match && `--${match[1] === "spacing" ? "container" : "spacing"}-${match[2]}`;
+	return mirror && mirror in defaults.theme ? mirror : void 0;
+}
+/** The button height an input height of the same size matches, or the input height a button height matches. */
+function controlHeightCounterpart(name) {
+	const match = name.match(/^(--(?:spacing|container)-)(button|input)(-height-(?:small|default))$/);
+	return match ? `${match[1]}${match[2] === "button" ? "input" : "button"}${match[3]}` : void 0;
+}
+/**
+* Tokens that must hold the same value as this one: its spacing/container mirror and, because buttons and inputs of
+* a size share one height, the matching control height and its mirror. A counterpart that already aliases this token
+* in the theme follows on its own and is left alone.
+*/
+function linkedLayoutTokens(name, defaults) {
+	const linked = [layoutMirror(name, defaults)];
+	const counterpart = controlHeightCounterpart(name);
+	if (counterpart && counterpart in defaults.theme && !defaults.theme[counterpart].startsWith("var(")) linked.push(counterpart, layoutMirror(counterpart, defaults));
+	return linked.filter((token) => !!token);
+}
+/** Of a mirrored pair, the copy the editor lists: `--container-*` for sizes, `--spacing-*` for padding and gaps. */
+function listedLayoutToken(name, defaults) {
+	const mirror = layoutMirror(name, defaults);
+	if (!mirror) return name;
+	return name.startsWith(layoutKindFor(name) === "Sizing" ? "--container-" : "--spacing-") ? name : mirror;
+}
+const defaultLayoutLevel = 2;
+/** Each layout tab's global control: its steps and the tokens a step sets, derived from the theme defaults. */
+const layoutScales = {
+	Radius: {
+		levels: roundingLevels,
+		defaultLevel: 2,
+		scale: scaleRadii
+	},
+	Spacing: {
+		levels: spacingLevels,
+		defaultLevel: defaultLayoutLevel,
+		scale: (defaults, level) => scaleLengths(defaults, (name) => isLayoutToken(name, false), spacingLevels[level].factor)
+	},
+	Sizing: {
+		levels: sizingLevels,
+		defaultLevel: defaultLayoutLevel,
+		scale: (defaults, level) => scaleSizes(defaults, sizingLevels[level].factor)
+	},
+	"Font size": {
+		levels: fontSizeLevels,
+		defaultLevel: 3,
+		scale: (defaults, level) => scaleLengths(defaults, isFontSizeToken, fontSizeLevels[level].factor)
+	}
+};
+/** The global level the current tokens match, or undefined once individual tokens were edited. */
+function layoutLevelFor(defaults, edits, kind) {
+	const { levels, scale } = layoutScales[kind];
+	const index = levels.findIndex((_, level) => Object.entries(scale(defaults, level)).every(([name, value]) => (edits[name] ?? defaults.theme[name]) === value));
+	return index === -1 ? void 0 : index;
+}
+function baseColorNames(defaults) {
+	return new Set(Object.entries(defaults.light).filter(([name, value]) => /^--[\w-]+-\d+-base$/.test(name) && isRgb(value) && !(name in defaults.dark)).map(([name]) => name));
+}
+function exportCss(edits, defaults) {
+	const block = (selector, values) => {
+		const entries = Object.entries(values).sort(([a], [b]) => a.localeCompare(b));
+		return entries.length ? `${selector} {\n${entries.map(([key, value]) => `  ${key}: ${value};`).join("\n")}\n}\n` : "";
+	};
+	return "/* Import after your Povio UI theme in your Tailwind CSS entrypoint. */\n\n" + (block(":root", edits.light) + block(".dark", {
+		...darkFallback(defaults, edits),
+		...edits.dark
+	}) + block("@theme", edits.theme) || "/* No token overrides. */\n");
+}
+/** Runtime rules must use ordinary selectors: Tailwind directives only work at build time. */
+function runtimeCss(defaults, edits) {
+	const block = (selector, values) => `${selector} {${Object.entries(values).map(([key, value]) => `${key}: ${value};`).join(" ")}}`;
+	return block(":root", {
+		...referencedThemeTokens(defaults, edits.theme),
+		...edits.theme,
+		...edits.light
+	}) + block(".dark", {
+		...darkFallback(defaults, edits),
+		...edits.dark
+	});
+}
+/**
+* Tailwind only emits `@theme` variables that utilities use, so an edit aliasing another theme token (for example
+* `var(--radius-global-rounding-m)`) redeclares that token's value to make sure it resolves at runtime.
+*/
+function referencedThemeTokens(defaults, edits) {
+	const referenced = Object.values(edits).flatMap((value) => [...value.matchAll(/var\((--[\w-]+)/g)].map((match) => match[1]));
+	return Object.fromEntries(referenced.filter((name) => name in defaults.theme && !(name in edits)).map((name) => [name, defaults.theme[name]]));
+}
+function darkFallback(defaults, edits) {
+	return Object.fromEntries(Object.keys(edits.light).filter((key) => key in defaults.dark).map((key) => [key, defaults.dark[key]]));
+}
+//#endregion
+export { toRgb as C, toHex as S, listedLayoutToken as _, generateShades as a, runtimeCss as b, isEditableToken as c, labelFor as d, layoutKindFor as f, linkedLayoutTokens as g, layoutScales as h, exportCss as i, isFontSizeToken as l, layoutLevelFor as m, controlHeightCounterpart as n, groupFor as o, layoutKinds as p, emptyTheme as r, groups as s, baseColorNames as t, isRgb as u, parseThemeCss as v, validToken as w, spacingLevels as x, previewTokens as y };

package/dist/theme-model-T1zIdBg8.d.ts

@@ -0,0 +1,12 @@
+//#region src/configurator/theme-model.d.ts
+type Mode = "light" | "dark";
+type Tokens = Record<string, string>;
+declare const parseThemeCss: (themeSource: string) => ThemeEdits;
+interface ThemeEdits {
+  light: Tokens;
+  dark: Tokens;
+  theme: Tokens;
+}
+declare function exportCss(edits: ThemeEdits, defaults: ThemeEdits): string;
+//#endregion
+export { parseThemeCss as a, exportCss as i, ThemeEdits as n, Tokens as r, Mode as t };

package/dist/{time-picker-Cz1GIzpF.d.ts → time-picker-DhnDKh97.d.ts}

@@ -1,6 +1,6 @@
 import { t as ControlProps } from "./form.types-ZNGbcqJS.js";
 import { t as FireBlurOnChangeProps } from "./fieldAdapter-C4sDFC8f.js";
-import { r as TimePickerProps } from "./TimePicker-CmT89X7v.js";
+import { r as TimePickerProps } from "./TimePicker-Dex9aU7D.js";
 import { FieldValues } from "react-hook-form";
 //#region src/entries/rhf/time-picker.d.ts
 type ControlledTimePickerProps<T extends FieldValues> = ControlProps<TimePickerProps & FireBlurOnChangeProps, T>;

package/dist/{toast.cva-Cj6o2Rmu.d.ts → toast.cva-By5lvAfr.d.ts}

@@ -1,5 +1,6 @@
-import { n as StyleMergeUtils, t as UIOverrides } from "./uiOverrides.context-C3xb4Ttq.js";
-import "./button.cva-BvRI-3Gn.js";
+import { t as StyleMergeUtils } from "./style-merge.util-zLimKwt6.js";
+import { t as UIOverrides } from "./uiOverrides.context-DEp139He.js";
+import "./button.cva-C7kEhgoA.js";
 //#region src/components/status/Toast/toast.cva.d.ts
 declare const toastDefinition: {
   base: string[];

package/dist/toast.cva-C_L_RffH.js

@@ -0,0 +1,163 @@
+import { t as clsx } from "./clsx-CnD0nOiA.js";
+import { t as UIOverrides } from "./uiOverrides.context-BTCH9y5a.js";
+import { t as compoundMapper } from "./compoundMapper-Di3SKZnS.js";
+//#region src/components/status/Toast/toast.cva.ts
+const toastContainerDefinition = UIOverrides.defineConfig({
+	base: ["m-toast-gap-margin-mobile w-auto gap-toast-gap-margin-mobile p-0 md:m-toast-gap-margin-desktop md:gap-toast-gap-margin-desktop"],
+	config: { variants: { position: {
+		"bottom-right": "right-0 bottom-0",
+		"bottom-left": "bottom-0 left-0",
+		"top-right": "top-0 right-0",
+		"top-left": "top-0 left-0",
+		"bottom-center": "bottom-0",
+		"top-center": "top-0"
+	} } }
+});
+const toastWrapper = clsx("m-0! min-h-0! w-auto! max-w-toast bg-transparent! p-0! shadow-none!");
+const toastDefinition = UIOverrides.defineConfig({
+	base: ["m-0 inline-flex w-auto flex-col items-center overflow-hidden rounded-toast-rounding-default shadow-4 md:flex-row"],
+	config: {
+		variants: {
+			variant: {
+				outlined: "border bg-surface-default-card text-surface-default-card-foreground",
+				contained: ""
+			},
+			color: {
+				neutral: "",
+				success: "",
+				warning: "",
+				error: ""
+			},
+			position: {
+				"bottom-right": "",
+				"bottom-left": "",
+				"bottom-center": "",
+				"top-right": "",
+				"top-left": "",
+				"top-center": ""
+			}
+		},
+		compoundVariants: [
+			{
+				variant: "outlined",
+				color: "neutral",
+				className: "border-border-default-subtle"
+			},
+			{
+				variant: "outlined",
+				color: "success",
+				className: "border-surface-success-base"
+			},
+			{
+				variant: "outlined",
+				color: "warning",
+				className: "border-surface-warning-base"
+			},
+			{
+				variant: "outlined",
+				color: "error",
+				className: "border-border-destructive-base"
+			},
+			{
+				variant: "contained",
+				color: "neutral",
+				className: "bg-surface-inverted-card text-surface-inverted-card-foreground"
+			},
+			{
+				variant: "contained",
+				color: "success",
+				className: "bg-surface-success-base text-surface-success-inverted-base"
+			},
+			{
+				variant: "contained",
+				color: "warning",
+				className: "bg-surface-warning-base text-surface-warning-inverted-base"
+			},
+			{
+				variant: "contained",
+				color: "error",
+				className: "bg-surface-destructive-base text-surface-destructive-inverted-base"
+			}
+		],
+		defaultVariants: {
+			variant: "outlined",
+			color: "neutral"
+		}
+	}
+});
+const buttonColorVariant = compoundMapper({
+	compoundVariants: [{
+		variant: "contained",
+		value: {
+			color: "primary",
+			inverted: true
+		}
+	}],
+	default: {
+		color: "primary",
+		inverted: false
+	}
+});
+const statusIconDefinition = UIOverrides.defineConfig({
+	base: ["size-icons-size shrink-0"],
+	config: {
+		variants: {
+			variant: {
+				outlined: "",
+				contained: "text-inherit"
+			},
+			color: {
+				neutral: "",
+				success: "",
+				warning: "",
+				error: ""
+			}
+		},
+		compoundVariants: [
+			{
+				variant: "outlined",
+				color: "neutral",
+				className: "text-surface-default-foreground"
+			},
+			{
+				variant: "outlined",
+				color: "success",
+				className: "text-surface-success-base"
+			},
+			{
+				variant: "outlined",
+				color: "warning",
+				className: "text-surface-warning-base"
+			},
+			{
+				variant: "outlined",
+				color: "error",
+				className: "text-surface-destructive-base"
+			}
+		],
+		defaultVariants: {
+			variant: "outlined",
+			color: "neutral"
+		}
+	}
+});
+const statusSeparatorDefinition = UIOverrides.defineConfig({
+	base: ["h-px shrink-0 self-stretch md:h-auto md:w-px"],
+	config: {
+		variants: {
+			variant: {
+				outlined: "",
+				contained: "hidden"
+			},
+			color: {
+				neutral: "bg-border-default-subtle",
+				success: "bg-surface-success-base",
+				warning: "bg-surface-warning-base",
+				error: "bg-surface-destructive-base"
+			}
+		},
+		defaultVariants: { color: "neutral" }
+	}
+});
+//#endregion
+export { toastDefinition as a, toastContainerDefinition as i, statusIconDefinition as n, toastWrapper as o, statusSeparatorDefinition as r, buttonColorVariant as t };

package/dist/{toast.runtime-CIKvmkjo.js → toast.runtime-cxex9e4E.js}

@@ -1,4 +1,5 @@
-import { n as y, r as Toast } from "./dist-B8h0VT0E.js";
+import { t as Toast } from "./Toast-DtG3pA61.js";
+import { n as y } from "./dist-CAdwxJbe.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/status/Toast/toast.runtime.tsx
 const showToast = (id, color, params, options) => {

package/dist/{toggle-group-CPkKHm1t.d.ts → toggle-group-C1nMDOwz.d.ts}

@@ -1,5 +1,5 @@
 import { t as ControlProps } from "./form.types-ZNGbcqJS.js";
-import { s as ToggleGroupProps } from "./toggleGroup.types-DD6uRI5G.js";
+import { s as ToggleGroupProps } from "./toggleGroup.types-Bp43zbSQ.js";
 import { Key } from "react-aria-components";
 import { FieldValues } from "react-hook-form";
 //#region src/entries/rhf/toggle-group.d.ts

package/dist/toggleGroup.cva-MbpaEBg1.js

@@ -0,0 +1,35 @@
+import { t as UIOverrides } from "./uiOverrides.context-BTCH9y5a.js";
+import { n as uiOutlineClass } from "./outline.clsx-50W_vNDl.js";
+//#region src/components/ToggleGroup/toggleGroup.cva.ts
+const toggleGroupDefinition = UIOverrides.defineConfig({ base: [
+	"group/segment grid w-fit items-center gap-segmented-control-side-segmented-control p-segmented-control-side-segmented-control",
+	"bg-surface-default-popover",
+	"rounded-segmented-control-rounding-segmented-control"
+] });
+const toggleGroupItemDefinition = UIOverrides.defineConfig({
+	base: [
+		"flex items-center justify-center gap-segmented-control-gap-content-icon-to-text transition-all duration-200",
+		"border border-support-transparent-outline",
+		"py-segmented-control-height-segment",
+		"rounded-segmented-control-rounding-segment",
+		uiOutlineClass,
+		"bg-support-transparent-outline text-interactive-subtle-secondary-foreground",
+		"not-selected:not-disabled:not-pressed:hover:border-state-interactive-subtle-secondary-background/hover not-selected:not-disabled:not-pressed:hover:bg-state-interactive-subtle-secondary-background/hover not-selected:not-disabled:not-pressed:hover:text-state-interactive-subtle-secondary-foreground/hover",
+		"not-selected:not-disabled:pressed:border-state-interactive-subtle-secondary-background/pressed not-selected:not-disabled:pressed:bg-state-interactive-subtle-secondary-background/pressed not-selected:not-disabled:pressed:text-state-interactive-subtle-secondary-foreground/pressed",
+		"not-selected:not-disabled:focus-visible:border-state-interactive-subtle-secondary-background/focus not-selected:not-disabled:focus-visible:bg-state-interactive-subtle-secondary-background/focus not-selected:not-disabled:focus-visible:text-state-interactive-subtle-secondary-foreground/focus",
+		"focus-visible:outline-interactive-ring",
+		"not-selected:disabled:text-state-interactive-subtle-secondary-foreground/disabled",
+		"selected:border-state-interactive-secondary-background/toggled selected:bg-state-interactive-secondary-background/toggled selected:text-interactive-secondary-foreground",
+		"selected:not-disabled:hover:border-state-interactive-secondary-background/toggled-hovered selected:not-disabled:hover:bg-state-interactive-secondary-background/toggled-hovered",
+		"selected:disabled:border-state-interactive-secondary-background/toggled-disabled selected:disabled:bg-state-interactive-secondary-background/toggled-disabled selected:disabled:text-interactive-secondary-foreground/40"
+	],
+	config: {
+		variants: { iconOnly: {
+			true: "px-segmented-control-height-segment",
+			false: "px-segmented-control-side-segment"
+		} },
+		defaultVariants: { iconOnly: false }
+	}
+});
+//#endregion
+export { toggleGroupItemDefinition as n, toggleGroupDefinition as t };

package/dist/{toggleGroup.types-DD6uRI5G.d.ts → toggleGroup.types-Bp43zbSQ.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 { n as FieldValues } from "./form.binding-DVJ5F0JE.js";
 import { t as ControlProps } from "./form.types-CecYaerF.js";
 import { FC, ReactElement, Ref, SVGProps } from "react";