themelia-react-ui 2.0.5 → 2.0.6

package/dist/feedback-Dzo1xtAU.js

@@ -0,0 +1,246 @@
+"use client";
+import { v as e } from "./ui-provider-C-74NVLc.js";
+import { useStrings as t } from "./lib/strings.js";
+import { t as n } from "./utils-DhuoqFy4.js";
+import { n as r } from "./buttons-DeW0bQeK.js";
+import { c as i } from "./typography-C7-YMW1S.js";
+import { i as a } from "./text.styles-B64My8RZ.js";
+import { t as o } from "./structure-DZJ2wbAU.js";
+import { i as s } from "./tone-recipes-BPsRAvhu.js";
+import { t as c } from "./row-recipes-DL8n7t_b.js";
+import { t as l } from "./progress-DZFXXzPs.js";
+import { t as u } from "./skeleton-DDgdhmu9.js";
+import { forwardRef as d } from "react";
+import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
+import { AlertCircle as h, Loader2 as g } from "lucide-react";
+import { cva as _ } from "class-variance-authority";
+//#region src/components/ui/empty.tsx
+function v({ className: e, ...t }) {
+	return /* @__PURE__ */ p("div", {
+		"data-slot": "empty",
+		className: n("box-border flex w-full min-w-0 flex-1 flex-col items-center justify-center text-center text-balance", e),
+		...t
+	});
+}
+function y({ className: e, ...t }) {
+	return /* @__PURE__ */ p("div", {
+		"data-slot": "empty-header",
+		className: n("flex max-w-sm flex-col items-center", e),
+		...t
+	});
+}
+var b = _("mb-space-md flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0", {
+	variants: { variant: {
+		default: "bg-transparent",
+		icon: "bg-muted text-foreground flex size-avatar-lg shrink-0 items-center justify-center rounded-radius [&_svg:not([class*='size-'])]:size-[calc(var(--icon)*1.5)]"
+	} },
+	defaultVariants: { variant: "default" }
+});
+function x({ className: e, variant: t = "default", ...r }) {
+	return /* @__PURE__ */ p("div", {
+		"data-slot": "empty-icon",
+		"data-variant": t,
+		className: n(b({
+			variant: t,
+			className: e
+		})),
+		...r
+	});
+}
+function S({ className: e, ...t }) {
+	return /* @__PURE__ */ p("div", {
+		"data-slot": "empty-title",
+		className: n("text-lg font-medium tracking-tight", e),
+		...t
+	});
+}
+function C({ className: e, ...t }) {
+	return /* @__PURE__ */ p("div", {
+		"data-slot": "empty-description",
+		className: n("text-sm/relaxed text-muted-foreground [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4", e),
+		...t
+	});
+}
+function w({ className: e, ...t }) {
+	return /* @__PURE__ */ p("div", {
+		"data-slot": "empty-content",
+		className: n("text-sm flex w-full max-w-sm min-w-0 flex-col items-center text-balance", e),
+		...t
+	});
+}
+//#endregion
+//#region src/components/base/feedback/empty.tsx
+function T(e) {
+	return typeof e == "string" || typeof e == "number" || typeof e == "bigint";
+}
+function E({ className: e, ...t }) {
+	return /* @__PURE__ */ p(v, {
+		className: n("empty--component gap-space-lg rounded-surface p-surface", e),
+		...t
+	});
+}
+function D({ className: e, ...t }) {
+	return /* @__PURE__ */ p(y, {
+		className: n("empty-header--component gap-normal", e),
+		...t
+	});
+}
+function O({ className: e, ...t }) {
+	return /* @__PURE__ */ p(x, {
+		className: n("empty-media--component mb-space-sm", e),
+		...t
+	});
+}
+function k({ className: e, headingLevel: t = 3, role: r, "aria-level": a, children: o, ...s }) {
+	let c = r ?? "heading";
+	return /* @__PURE__ */ p(S, {
+		role: c,
+		"aria-level": a ?? (c === "heading" ? t : void 0),
+		className: n("empty-title--component tracking-normal", e),
+		...s,
+		children: T(o) ? /* @__PURE__ */ p(i, {
+			tag: "span",
+			size: "base",
+			weight: "semibold",
+			lineHeight: "tight",
+			children: o
+		}) : o
+	});
+}
+function A({ className: e, children: t, ...r }) {
+	return /* @__PURE__ */ p(C, {
+		className: n("empty-description--component", e),
+		...r,
+		children: T(t) ? /* @__PURE__ */ p(i, {
+			tag: "span",
+			type: "secondary",
+			lineHeight: "relaxed",
+			children: t
+		}) : t
+	});
+}
+function j({ className: e, children: t, ...r }) {
+	return /* @__PURE__ */ p(w, {
+		className: n("empty-content--component gap-space-md", e),
+		...r,
+		children: T(t) ? /* @__PURE__ */ p(i, { children: t }) : t
+	});
+}
+E.displayName = "Empty", D.displayName = "EmptyHeader", O.displayName = "EmptyMedia", k.displayName = "EmptyTitle", A.displayName = "EmptyDescription", j.displayName = "EmptyContent";
+//#endregion
+//#region src/components/base/feedback/state-display.strings.ts
+var M = {
+	title: "Something went wrong",
+	description: "Please try again.",
+	retry: "Try again"
+}, N = {
+	inline: "w-full max-w-full py-row-y",
+	panel: "w-full border"
+}, P = {
+	neutral: "rounded-surface p-surface border-border bg-card text-card-foreground",
+	destructive: `rounded-radius px-row-x ${c.default} gap-x-space-lg ${s.destructive.edge} ${s.destructive.wash} text-card-foreground`
+};
+function F(e) {
+	return typeof e == "string" || typeof e == "number" || typeof e == "bigint";
+}
+var I = d(function({ componentClassName: t, variant: r, tone: s, icon: c, title: l, description: u, action: d, details: f, className: h, ...g }, _) {
+	let v = t.replace("--component", ""), { defaultTextSize: y } = e();
+	return /* @__PURE__ */ m("div", {
+		ref: _,
+		"data-variant": r,
+		"data-tone": s,
+		className: n(a({
+			size: y,
+			type: "inherit"
+		}), t, "box-border grid min-w-0 grid-cols-[auto_minmax(0,1fr)] items-start gap-x-space-sm", "sm:grid-cols-[auto_minmax(0,1fr)_auto]", N[r], r === "panel" && P[s], h),
+		...g,
+		children: [
+			/* @__PURE__ */ p("span", {
+				"aria-hidden": "true",
+				className: n(`${v}--icon`, "mt-space-2xs inline-flex size-icon shrink-0 items-center justify-center"),
+				children: c
+			}),
+			(l !== void 0 || u !== void 0) && /* @__PURE__ */ m("div", {
+				className: n(`${v}--message`, "grid min-w-0", r === "inline" ? "gap-dense" : "gap-normal"),
+				children: [l !== void 0 && (F(l) ? /* @__PURE__ */ p(i, {
+					tag: "span",
+					type: "inherit",
+					weight: "semibold",
+					className: n(`${v}--title`, "block min-w-0"),
+					children: l
+				}) : /* @__PURE__ */ p("div", {
+					className: n(`${v}--title`, "min-w-0"),
+					children: l
+				})), u !== void 0 && (F(u) ? /* @__PURE__ */ p(i, {
+					tag: "span",
+					size: r === "inline" ? "xs" : void 0,
+					type: "secondary",
+					className: n(`${v}--description`, "block min-w-0"),
+					children: u
+				}) : /* @__PURE__ */ p("div", {
+					className: n(`${v}--description`, "min-w-0"),
+					children: u
+				}))]
+			}),
+			d !== void 0 && /* @__PURE__ */ p("div", {
+				className: n(`${v}--action`, "col-start-2 row-start-2 mt-space-sm justify-self-start", "sm:col-start-3 sm:row-start-1 sm:mt-0 sm:justify-self-end sm:self-start"),
+				children: d
+			}),
+			f !== void 0 && /* @__PURE__ */ p(o, {
+				gap: "md",
+				className: n(`${v}--details`, "col-start-2 col-end-[-1] mt-space-md"),
+				children: f
+			})
+		]
+	});
+});
+I.displayName = "StateDisplayFrame";
+var L = d(function({ label: e, description: t, progress: n, variant: r = "inline", skeleton: i = !1, lines: a = 3, icon: o, className: s, ...c }, d) {
+	let h = typeof n == "number" ? Math.min(100, Math.max(0, n)) : void 0;
+	return /* @__PURE__ */ p(I, {
+		ref: d,
+		role: "status",
+		"aria-live": "polite",
+		componentClassName: "loading-state--component",
+		variant: r,
+		tone: "neutral",
+		icon: o ?? /* @__PURE__ */ p(g, { className: "size-icon animate-spin text-muted-foreground" }),
+		title: e,
+		description: t,
+		details: h !== void 0 || i ? /* @__PURE__ */ m(f, { children: [h !== void 0 && /* @__PURE__ */ p(l, {
+			value: h,
+			size: "sm",
+			showValue: !1,
+			"aria-label": typeof e == "string" ? e : void 0
+		}), i === !0 ? /* @__PURE__ */ p(u, { lines: a }) : i] }) : void 0,
+		className: s,
+		...c
+	});
+});
+L.displayName = "LoadingState";
+var R = d(function({ title: e, description: n, action: i, onRetry: a, retryLabel: o, strings: s, variant: c = "panel", icon: l, className: u, ...d }, f) {
+	let m = t(M, s), g = o === void 0 ? m.retry : o, _ = i ?? (a && g ? /* @__PURE__ */ p(r, {
+		type: "button",
+		size: c === "inline" ? "sm" : void 0,
+		onClick: a,
+		children: g
+	}) : void 0);
+	return /* @__PURE__ */ p(I, {
+		ref: f,
+		role: "alert",
+		componentClassName: "error-state--component",
+		variant: c,
+		tone: "destructive",
+		icon: l ?? /* @__PURE__ */ p(h, { className: "size-icon text-destructive" }),
+		title: e === void 0 ? m.title : e,
+		description: n === void 0 ? m.description : n,
+		action: _,
+		className: u,
+		...d
+	});
+});
+R.displayName = "ErrorState";
+//#endregion
+export { j as a, O as c, E as i, k as l, L as n, A as o, M as r, D as s, R as t };
+
+//# sourceMappingURL=feedback-Dzo1xtAU.js.map

package/dist/feedback-Dzo1xtAU.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"feedback-Dzo1xtAU.js","names":["Empty","EmptyHeader","EmptyMedia","EmptyTitle","EmptyDescription","EmptyContent","isSimpleText","EmptyPrimitive","EmptyHeaderPrimitive","EmptyMediaPrimitive","EmptyTitlePrimitive","EmptyDescriptionPrimitive","EmptyContentPrimitive","_Fragment","useTypographyConfig","cn","Button","Text","resolveTextClassNames","Stack","toneRecipes","rowBlockPaddingClasses","Progress","ContentSkeleton","Fragment$1","Empty$1","props","className","EmptyHeader$1","emptyMediaVariants","cva","EmptyMedia$1","variant","EmptyTitle$1","EmptyDescription$1","EmptyContent$1","isSimpleText$1","value","Empty","EmptyHeader","EmptyMedia","EmptyTitle","ariaLevel","resolvedRole","role","headingLevel","children","EmptyDescription","EmptyContent","defaultErrorStateStrings","frameVariantClass","frameToneClass","isSimpleText","StateDisplayFrame","forwardRef","regionPrefix","componentClassName","tone","defaultTextSize","icon","title","description","action","details","LoadingState","resolvedProgress","progress","Loader2","label","skeleton","ErrorState","stringsProp","strings","useStrings","resolvedRetryLabel","retryLabel","retryAction","onRetry","AlertCircle"],"sources":["../src/components/ui/empty.tsx","../src/components/base/feedback/empty.tsx","../src/components/base/feedback/state-display.strings.ts","../src/components/base/feedback/state-display.tsx"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"../../lib/utils\"\n\nfunction Empty({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty\"\n      className={cn(\n        // No border style here: without preflight a bare `border-dashed` paints a\n        // 3px currentColor frame. Callers that want a frame add a semantic border.\n        \"box-border flex w-full min-w-0 flex-1 flex-col items-center justify-center text-center text-balance\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-header\"\n      className={cn(\n        \"flex max-w-sm flex-col items-center\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst emptyMediaVariants = cva(\n  \"mb-space-md flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"bg-muted text-foreground flex size-avatar-lg shrink-0 items-center justify-center rounded-radius [&_svg:not([class*='size-'])]:size-[calc(var(--icon)*1.5)]\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction EmptyMedia({\n  className,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof emptyMediaVariants>) {\n  return (\n    <div\n      data-slot=\"empty-icon\"\n      data-variant={variant}\n      className={cn(emptyMediaVariants({ variant, className }))}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-title\"\n      className={cn(\"text-lg font-medium tracking-tight\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <div\n      data-slot=\"empty-description\"\n      className={cn(\n        \"text-sm/relaxed text-muted-foreground [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-content\"\n      className={cn(\n        \"text-sm flex w-full max-w-sm min-w-0 flex-col items-center text-balance\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Empty,\n  EmptyHeader,\n  EmptyTitle,\n  EmptyDescription,\n  EmptyContent,\n  EmptyMedia,\n}\n","/**\n * Tokenized low-level empty-state parts.\n *\n * Use the blocks `EmptyState` for an opinionated ready-made state. These\n * parts are for consumers that need to assemble their own media/content/action\n * anatomy without importing the internal shadcn primitive.\n */\nimport type { ComponentProps, ReactNode } from 'react';\n\nimport {\n\tEmpty as EmptyPrimitive,\n\tEmptyContent as EmptyContentPrimitive,\n\tEmptyDescription as EmptyDescriptionPrimitive,\n\tEmptyHeader as EmptyHeaderPrimitive,\n\tEmptyMedia as EmptyMediaPrimitive,\n\tEmptyTitle as EmptyTitlePrimitive,\n} from '../../ui/empty';\nimport { Text } from '../../typography';\nimport { cn } from '../../../lib/utils';\n\nexport type EmptyProps = ComponentProps<typeof EmptyPrimitive>;\nexport type EmptyContentProps = ComponentProps<typeof EmptyContentPrimitive>;\nexport type EmptyDescriptionProps = ComponentProps<typeof EmptyDescriptionPrimitive>;\nexport type EmptyHeaderProps = ComponentProps<typeof EmptyHeaderPrimitive>;\nexport type EmptyMediaProps = ComponentProps<typeof EmptyMediaPrimitive>;\nexport interface EmptyTitleProps extends ComponentProps<typeof EmptyTitlePrimitive> {\n\t/** Accessible heading level used by the default `role=\"heading\"` output. */\n\theadingLevel?: 2 | 3 | 4 | 5 | 6;\n}\n\nfunction isSimpleText(value: ReactNode): value is string | number | bigint {\n\treturn typeof value === 'string' || typeof value === 'number' || typeof value === 'bigint';\n}\n\n/** Root layout for a consumer-blocks empty state. */\nexport function Empty({ className, ...props }: EmptyProps) {\n\treturn (\n\t\t<EmptyPrimitive\n\t\t\tclassName={cn('empty--component gap-space-lg rounded-surface p-surface', className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\n/** Centered title and description stack. */\nexport function EmptyHeader({ className, ...props }: EmptyHeaderProps) {\n\treturn <EmptyHeaderPrimitive className={cn('empty-header--component gap-normal', className)} {...props} />;\n}\n\n/** Optional icon or illustration region. */\nexport function EmptyMedia({ className, ...props }: EmptyMediaProps) {\n\treturn <EmptyMediaPrimitive className={cn('empty-media--component mb-space-sm', className)} {...props} />;\n}\n\n/** Empty-state heading calibrated to the admin typography scale. */\nexport function EmptyTitle({ className, headingLevel = 3, role, 'aria-level': ariaLevel, children, ...props }: EmptyTitleProps) {\n\tconst resolvedRole = role ?? 'heading';\n\treturn (\n\t\t<EmptyTitlePrimitive\n\t\t\trole={resolvedRole}\n\t\t\taria-level={ariaLevel ?? (resolvedRole === 'heading' ? headingLevel : undefined)}\n\t\t\tclassName={cn('empty-title--component tracking-normal', className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{isSimpleText(children) ? (\n\t\t\t\t<Text tag=\"span\" size=\"base\" weight=\"semibold\" lineHeight=\"tight\">\n\t\t\t\t\t{children}\n\t\t\t\t</Text>\n\t\t\t) : children}\n\t\t</EmptyTitlePrimitive>\n\t);\n}\n\n/** Supporting explanation for the absence of content. */\nexport function EmptyDescription({ className, children, ...props }: EmptyDescriptionProps) {\n\treturn (\n\t\t<EmptyDescriptionPrimitive className={cn('empty-description--component', className)} {...props}>\n\t\t\t{isSimpleText(children) ? (\n\t\t\t\t<Text tag=\"span\" type=\"secondary\" lineHeight=\"relaxed\">\n\t\t\t\t\t{children}\n\t\t\t\t</Text>\n\t\t\t) : children}\n\t\t</EmptyDescriptionPrimitive>\n\t);\n}\n\n/** Actions or next-step content rendered below the explanation. */\nexport function EmptyContent({ className, children, ...props }: EmptyContentProps) {\n\treturn (\n\t\t<EmptyContentPrimitive className={cn('empty-content--component gap-space-md', className)} {...props}>\n\t\t\t{isSimpleText(children) ? <Text>{children}</Text> : children}\n\t\t</EmptyContentPrimitive>\n\t);\n}\n\nEmpty.displayName = 'Empty';\nEmptyHeader.displayName = 'EmptyHeader';\nEmptyMedia.displayName = 'EmptyMedia';\nEmptyTitle.displayName = 'EmptyTitle';\nEmptyDescription.displayName = 'EmptyDescription';\nEmptyContent.displayName = 'EmptyContent';\n","export interface ErrorStateStrings {\n\t/** Default heading when no error-specific title was supplied. */\n\ttitle: string;\n\t/** Default guidance when no error-specific description was supplied. */\n\tdescription: string;\n\t/** Label of the recovery action when `onRetry` is supplied. */\n\tretry: string;\n}\n\nexport const defaultErrorStateStrings: ErrorStateStrings = {\n\ttitle: 'Something went wrong',\n\tdescription: 'Please try again.',\n\tretry: 'Try again',\n};\n","/**\n * Shared async-state presentations for bounded admin surfaces.\n *\n * `inline` is a compact, chrome-free status for menus, table regions, and\n * existing panels. `panel` owns one deliberate frame so consumers do not\n * have to recreate card padding around loading and error states. Loading and\n * error use the same icon/message/action grid, which keeps transitions between\n * states visually stable.\n */\nimport { AlertCircle, Loader2 } from 'lucide-react';\nimport {\n\tforwardRef,\n\ttype ComponentPropsWithoutRef,\n\ttype ReactNode,\n} from 'react';\n\nimport { Button } from '../buttons';\nimport { Stack } from '../structure';\nimport { Text } from '../../typography';\nimport { resolveTextClassNames } from '../../typography/text.styles';\nimport { useTypographyConfig } from '../../../lib/ui-provider';\nimport { cn } from '../../../lib/utils';\nimport { useStrings, type StringsProp } from '../../../lib/strings';\n\nimport { Progress } from './progress';\nimport { ContentSkeleton } from '../skeleton/skeleton';\nimport { toneRecipes } from '../../../lib/tone-recipes';\nimport { rowBlockPaddingClasses } from '../../../lib/row-recipes';\nimport { defaultErrorStateStrings, type ErrorStateStrings } from './state-display.strings';\n\nexport { defaultErrorStateStrings, type ErrorStateStrings } from './state-display.strings';\n\ntype DivProps = ComponentPropsWithoutRef<'div'>;\ntype StateDisplayVariant = 'inline' | 'panel';\ntype StateDisplayTone = 'neutral' | 'destructive';\n\ninterface StateDisplayFrameProps extends Omit<DivProps, 'title'> {\n\tcomponentClassName: string;\n\t/** `inline` is chrome-free; `panel` owns one framed surface. */\n\tvariant: StateDisplayVariant;\n\ttone: StateDisplayTone;\n\t/** Leading glyph beside the message. */\n\ticon: ReactNode;\n\t/** Heading above the description. */\n\ttitle?: ReactNode;\n\t/** Supporting copy under the label. */\n\tdescription?: ReactNode;\n\t/** Control offered alongside the message. */\n\taction?: ReactNode;\n\tdetails?: ReactNode;\n}\n\nconst frameVariantClass: Record<StateDisplayVariant, string> = {\n\tinline: 'w-full max-w-full py-row-y',\n\tpanel: 'w-full border',\n};\n\n// The neutral panel is a loading surface and keeps the surface inset. The tinted\n// destructive panel is a notice, so it takes Alert's row geometry (corner, row\n// insets and media gap) and a failure reads the same as a destructive Alert.\nconst frameToneClass: Record<StateDisplayTone, string> = {\n\tneutral: 'rounded-surface p-surface border-border bg-card text-card-foreground',\n\tdestructive: `rounded-radius px-row-x ${rowBlockPaddingClasses.default} gap-x-space-lg ${toneRecipes.destructive.edge} ${toneRecipes.destructive.wash} text-card-foreground`,\n};\n\nfunction isSimpleText(value: ReactNode): value is string | number | bigint {\n\treturn typeof value === 'string' || typeof value === 'number' || typeof value === 'bigint';\n}\n\nconst StateDisplayFrame = forwardRef<HTMLDivElement, StateDisplayFrameProps>(\n\tfunction StateDisplayFrame({\n\t\tcomponentClassName,\n\t\tvariant,\n\t\ttone,\n\t\ticon,\n\t\ttitle,\n\t\tdescription,\n\t\taction,\n\t\tdetails,\n\t\tclassName,\n\t\t...props\n\t}, ref) {\n\t\tconst regionPrefix = componentClassName.replace('--component', '');\n\t\tconst { defaultTextSize } = useTypographyConfig();\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\tref={ref}\n\t\t\t\tdata-variant={variant}\n\t\t\t\tdata-tone={tone}\n\t\t\t\tclassName={cn(\n\t\t\t\t\tresolveTextClassNames({ size: defaultTextSize, type: 'inherit' }),\n\t\t\t\t\tcomponentClassName,\n\t\t\t\t\t'box-border grid min-w-0 grid-cols-[auto_minmax(0,1fr)] items-start gap-x-space-sm',\n\t\t\t\t\t'sm:grid-cols-[auto_minmax(0,1fr)_auto]',\n\t\t\t\t\tframeVariantClass[variant],\n\t\t\t\t\tvariant === 'panel' && frameToneClass[tone],\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<span\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t`${regionPrefix}--icon`,\n\t\t\t\t\t\t'mt-space-2xs inline-flex size-icon shrink-0 items-center justify-center',\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t{icon}\n\t\t\t\t</span>\n\t\t\t\t{(title !== undefined || description !== undefined) && (\n\t\t\t\t\t<div className={cn(`${regionPrefix}--message`, 'grid min-w-0', variant === 'inline' ? 'gap-dense' : 'gap-normal')}>\n\t\t\t\t\t\t{title !== undefined && (\n\t\t\t\t\t\t\tisSimpleText(title) ? (\n\t\t\t\t\t\t\t\t<Text tag=\"span\" type=\"inherit\" weight=\"semibold\" className={cn(`${regionPrefix}--title`, 'block min-w-0')}>\n\t\t\t\t\t\t\t\t\t{title}\n\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t) : <div className={cn(`${regionPrefix}--title`, 'min-w-0')}>{title}</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{description !== undefined && (\n\t\t\t\t\t\t\tisSimpleText(description) ? (\n\t\t\t\t\t\t\t\t<Text\n\t\t\t\t\t\t\t\t\ttag=\"span\"\n\t\t\t\t\t\t\t\t\tsize={variant === 'inline' ? 'xs' : undefined}\n\t\t\t\t\t\t\t\t\ttype=\"secondary\"\n\t\t\t\t\t\t\t\t\tclassName={cn(`${regionPrefix}--description`, 'block min-w-0')}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{description}\n\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<div className={cn(`${regionPrefix}--description`, 'min-w-0')}>\n\t\t\t\t\t\t\t\t\t{description}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t{action !== undefined && (\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t`${regionPrefix}--action`,\n\t\t\t\t\t\t\t'col-start-2 row-start-2 mt-space-sm justify-self-start',\n\t\t\t\t\t\t\t'sm:col-start-3 sm:row-start-1 sm:mt-0 sm:justify-self-end sm:self-start',\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t{action}\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t{details !== undefined && (\n\t\t\t\t\t<Stack\n\t\t\t\t\t\tgap=\"md\"\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t`${regionPrefix}--details`,\n\t\t\t\t\t\t\t'col-start-2 col-end-[-1] mt-space-md',\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t{details}\n\t\t\t\t\t</Stack>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t);\n\t},\n);\nStateDisplayFrame.displayName = 'StateDisplayFrame';\n\nexport type LoadingStateVariant = StateDisplayVariant;\n\nexport interface LoadingStateProps extends DivProps {\n\t/** Primary line of the state message. */\n\tlabel?: ReactNode;\n\t/** Supporting copy under the label. */\n\tdescription?: ReactNode;\n\t/** Completion percentage, 0-100, for determinate loading. */\n\tprogress?: number;\n\t/** `inline` (default) for a chrome-free status inside an existing region; `panel` for one framed surface. */\n\tvariant?: LoadingStateVariant;\n\t/** Renders placeholder bars instead of a message. */\n\tskeleton?: boolean | ReactNode;\n\t/** How many skeleton bars to draw. */\n\tlines?: number;\n\t/** Leading glyph beside the message. Defaults to a spinning loader. */\n\ticon?: ReactNode;\n}\n\nexport const LoadingState = forwardRef<HTMLDivElement, LoadingStateProps>(\n\tfunction LoadingState({\n\t\tlabel,\n\t\tdescription,\n\t\tprogress,\n\t\tvariant = 'inline',\n\t\tskeleton = false,\n\t\tlines = 3,\n\t\ticon,\n\t\tclassName,\n\t\t...props\n\t}, ref) {\n\t\tconst resolvedProgress = typeof progress === 'number'\n\t\t\t? Math.min(100, Math.max(0, progress))\n\t\t\t: undefined;\n\t\tconst details = resolvedProgress !== undefined || skeleton\n\t\t\t? (\n\t\t\t\t<>\n\t\t\t\t\t{resolvedProgress !== undefined && (\n\t\t\t\t\t\t<Progress\n\t\t\t\t\t\t\tvalue={resolvedProgress}\n\t\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\t\tshowValue={false}\n\t\t\t\t\t\t\taria-label={typeof label === 'string' ? label : undefined}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t\t{skeleton === true ? <ContentSkeleton lines={lines} /> : skeleton}\n\t\t\t\t</>\n\t\t\t)\n\t\t\t: undefined;\n\n\t\treturn (\n\t\t\t<StateDisplayFrame\n\t\t\t\tref={ref}\n\t\t\t\trole=\"status\"\n\t\t\t\taria-live=\"polite\"\n\t\t\t\tcomponentClassName=\"loading-state--component\"\n\t\t\t\tvariant={variant}\n\t\t\t\ttone=\"neutral\"\n\t\t\t\ticon={icon ?? (\n\t\t\t\t\t<Loader2 className=\"size-icon animate-spin text-muted-foreground\" />\n\t\t\t\t)}\n\t\t\t\ttitle={label}\n\t\t\t\tdescription={description}\n\t\t\t\tdetails={details}\n\t\t\t\tclassName={className}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nLoadingState.displayName = 'LoadingState';\n\nexport type ErrorStateVariant = StateDisplayVariant;\n\nexport interface ErrorStateProps extends Omit<DivProps, 'title'> {\n\t/** Default error copy. Explicit title, description and retryLabel props win. */\n\tstrings?: StringsProp<ErrorStateStrings>;\n\t/** Heading above the description. */\n\ttitle?: ReactNode;\n\t/** Supporting copy under the label. */\n\tdescription?: ReactNode;\n\t/** Control offered alongside the message. */\n\taction?: ReactNode;\n\t/** Renders a retry button (with `retryLabel`) that calls this. Ignored when `action` is set. */\n\tonRetry?: () => void;\n\t/** Copy for the retry action in the error state. */\n\tretryLabel?: ReactNode;\n\t/** `panel` (default) for one framed surface; `inline` for a chrome-free status inside an existing region. */\n\tvariant?: ErrorStateVariant;\n\t/** Leading glyph beside the message. Defaults to an alert icon. */\n\ticon?: ReactNode;\n}\n\nexport const ErrorState = forwardRef<HTMLDivElement, ErrorStateProps>(\n\tfunction ErrorState({\n\t\ttitle,\n\t\tdescription,\n\t\taction,\n\t\tonRetry,\n\t\tretryLabel,\n\t\tstrings: stringsProp,\n\t\tvariant = 'panel',\n\t\ticon,\n\t\tclassName,\n\t\t...props\n\t}, ref) {\n\t\tconst strings = useStrings(defaultErrorStateStrings, stringsProp);\n\t\tconst resolvedRetryLabel = retryLabel === undefined ? strings.retry : retryLabel;\n\t\t// Retrying recovers; it destroys nothing. The default (neutral outline)\n\t\t// button keeps red for the failure itself, not the way out of it.\n\t\tconst retryAction = action ?? (onRetry && resolvedRetryLabel ? (\n\t\t\t<Button\n\t\t\t\ttype=\"button\"\n\t\t\t\tsize={variant === 'inline' ? 'sm' : undefined}\n\t\t\t\tonClick={onRetry}\n\t\t\t>\n\t\t\t\t{resolvedRetryLabel}\n\t\t\t</Button>\n\t\t) : undefined);\n\n\t\treturn (\n\t\t\t<StateDisplayFrame\n\t\t\t\tref={ref}\n\t\t\t\trole=\"alert\"\n\t\t\t\tcomponentClassName=\"error-state--component\"\n\t\t\t\tvariant={variant}\n\t\t\t\ttone=\"destructive\"\n\t\t\t\ticon={icon ?? <AlertCircle className=\"size-icon text-destructive\" />}\n\t\t\t\ttitle={title === undefined ? strings.title : title}\n\t\t\t\tdescription={description === undefined ? strings.description : description}\n\t\t\t\taction={retryAction}\n\t\t\t\tclassName={className}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nErrorState.displayName = 'ErrorState';\n"],"mappings":"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"}

package/dist/{field-affordance-recipes-DWcNcOjh.js → field-affordance-recipes-D6H7tVJi.js}

@@ -1,6 +1,6 @@
 import { t as e } from "./affordance-geometry.generated-P-aVJisu.js";
 import { t } from "./focus-recipes-B653VaLq.js";
-import { t as n } from "./interaction-recipes-XR9ZpVYL.js";
+import { t as n } from "./interaction-recipes-4wZ2tvfb.js";
 import { XIcon as r } from "lucide-react";
 //#region src/lib/field-affordance-recipes.ts
 var i = r, a = {
@@ -38,4 +38,4 @@ var i = r, a = {
 //#endregion
 export { a as n, o as r, i as t };
 
-//# sourceMappingURL=field-affordance-recipes-DWcNcOjh.js.map
+//# sourceMappingURL=field-affordance-recipes-D6H7tVJi.js.map

package/dist/{field-affordance-recipes-DWcNcOjh.js.map → field-affordance-recipes-D6H7tVJi.js.map}

@@ -1 +1 @@
-{"version":3,"file":"field-affordance-recipes-DWcNcOjh.js","names":["affordanceGeometry","interactionRecipes","FieldClearGlyph","XIcon","fieldAffordanceRecipes","focusRecipes","selectToggleRecipes"],"sources":["../src/lib/field-affordance-recipes.ts"],"sourcesContent":["import { XIcon } from 'lucide-react';\nimport { affordanceGeometry } from './affordance-geometry.generated';\nimport { focusRecipes } from './focus-recipes';\nimport { interactionRecipes } from './interaction-recipes';\n\n/**\n * The one clear glyph: a plain X drawn at `fieldAffordanceRecipes.icon`, never a\n * circled X, so Input, Textarea, Cascader and Combobox clear actions match.\n */\nexport const FieldClearGlyph = XIcon;\n\n/** Field affordances have one target/clearance owner. Primitives own behavior. */\nexport const fieldAffordanceRecipes = {\n\t/** Content-sized targets for a chip/reaction that already owns its chrome. */\n\tinline: `${interactionRecipes.nativeButtonReset} inline-flex shrink-0 items-center justify-center rounded-radius outline-none transition-[color,box-shadow]`,\n\ttarget: `${interactionRecipes.nativeButtonReset} inline-flex size-control-clear shrink-0 items-center justify-center rounded-radius outline-none transition-[color,box-shadow]`,\n\tfocus: `focus-visible:z-10 ${focusRecipes.edge} disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50`,\n\tclear: 'text-muted-foreground hover:text-foreground',\n\ttoggle: 'text-muted-foreground hover:bg-accent hover:text-accent-foreground',\n\ticon: 'size-control-clear-icon shrink-0 max-h-full max-w-full',\n\tcentered: 'absolute top-1/2 -translate-y-1/2',\n\tclearEnd: affordanceGeometry.clearEnd,\n\tclearPadding: affordanceGeometry.clearPadding,\n\ttogglePadding: affordanceGeometry.togglePadding,\n\ttextareaCountPadding: affordanceGeometry.textareaCountPadding,\n\tmeasuredPadding: affordanceGeometry.measuredPadding,\n\tmeasuredStartPadding: affordanceGeometry.measuredStartPadding,\n\tpairedClearPadding: affordanceGeometry.pairedClearPadding,\n\tpairedIconPadding: affordanceGeometry.pairedIconPadding,\n\tpairedAddonPadding: affordanceGeometry.pairedAddonPadding,\n\tpairedCountPadding: affordanceGeometry.pairedCountPadding,\n} as const;\n\n/**\n * Select-like toggles share one chevron geometry: the glyph scales with the\n * control size, and the toggle track is offset by half the difference between\n * its 1.375rem target and the glyph, so the chevron centres where a Select\n * trigger draws its own (inside the 1px border plus the control padding).\n * Written from the root tokens so scoped density and spacing apply.\n */\nexport const selectToggleRecipes = {\n\ticon: { sm: 'size-icon-sm', md: 'size-icon', lg: 'size-icon-lg' },\n\ttrack: affordanceGeometry.selectToggleTrack,\n\t/**\n\t * Text clearance for an editable field with the toggle track: the track offset,\n\t * the whole 1.375rem target (not only its glyph) and the spaced copy gap, so a\n\t * value never runs under the target at any density or spacing.\n\t */\n\tpadding: affordanceGeometry.selectTogglePadding,\n\t/** The same clearance when a clear target precedes the toggle in the track. */\n\tclearPadding: {\n\t\tsm: 'pe-[calc((var(--control-x)*0.8333333+0.625rem)*var(--space-scale)+1px+(4.125rem*var(--density-scale)+var(--icon)*0.75)/2)]',\n\t\tmd: 'pe-[calc((var(--control-x)+0.625rem)*var(--space-scale)+1px+(4.125rem*var(--density-scale)+var(--icon))/2)]',\n\t\tlg: 'pe-[calc((var(--control-x)+0.625rem)*var(--space-scale)+1px+(4.125rem*var(--density-scale)+var(--icon)*1.25)/2)]',\n\t},\n} as const satisfies Record<string, Record<'sm' | 'md' | 'lg', string>>;\n"],"mappings":";;;;;AASA,IAAaE,IAAkBC,GAGlBC,IAAyB;CAErC,QAAQ,GAAGH,EAAmB,kBAAkB;CAChD,QAAQ,GAAGA,EAAmB,kBAAkB;CAChD,OAAO,sBAAsBI,EAAa,KAAK;CAC/C,OAAO;CACP,QAAQ;CACR,MAAM;CACN,UAAU;CACV,UAAUL,EAAmB;CAC7B,cAAcA,EAAmB;CACjC,eAAeA,EAAmB;CAClC,sBAAsBA,EAAmB;CACzC,iBAAiBA,EAAmB;CACpC,sBAAsBA,EAAmB;CACzC,oBAAoBA,EAAmB;CACvC,mBAAmBA,EAAmB;CACtC,oBAAoBA,EAAmB;CACvC,oBAAoBA,EAAmB;AACxC,GASaM,IAAsB;CAClC,MAAM;EAAE,IAAI;EAAgB,IAAI;EAAa,IAAI;CAAe;CAChE,OAAON,EAAmB;CAM1B,SAASA,EAAmB;CAE5B,cAAc;EACb,IAAI;EACJ,IAAI;EACJ,IAAI;CACL;AACD"}
+{"version":3,"file":"field-affordance-recipes-D6H7tVJi.js","names":["affordanceGeometry","interactionRecipes","FieldClearGlyph","XIcon","fieldAffordanceRecipes","focusRecipes","selectToggleRecipes"],"sources":["../src/lib/field-affordance-recipes.ts"],"sourcesContent":["import { XIcon } from 'lucide-react';\nimport { affordanceGeometry } from './affordance-geometry.generated';\nimport { focusRecipes } from './focus-recipes';\nimport { interactionRecipes } from './interaction-recipes';\n\n/**\n * The one clear glyph: a plain X drawn at `fieldAffordanceRecipes.icon`, never a\n * circled X, so Input, Textarea, Cascader and Combobox clear actions match.\n */\nexport const FieldClearGlyph = XIcon;\n\n/** Field affordances have one target/clearance owner. Primitives own behavior. */\nexport const fieldAffordanceRecipes = {\n\t/** Content-sized targets for a chip/reaction that already owns its chrome. */\n\tinline: `${interactionRecipes.nativeButtonReset} inline-flex shrink-0 items-center justify-center rounded-radius outline-none transition-[color,box-shadow]`,\n\ttarget: `${interactionRecipes.nativeButtonReset} inline-flex size-control-clear shrink-0 items-center justify-center rounded-radius outline-none transition-[color,box-shadow]`,\n\tfocus: `focus-visible:z-10 ${focusRecipes.edge} disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50`,\n\tclear: 'text-muted-foreground hover:text-foreground',\n\ttoggle: 'text-muted-foreground hover:bg-accent hover:text-accent-foreground',\n\ticon: 'size-control-clear-icon shrink-0 max-h-full max-w-full',\n\tcentered: 'absolute top-1/2 -translate-y-1/2',\n\tclearEnd: affordanceGeometry.clearEnd,\n\tclearPadding: affordanceGeometry.clearPadding,\n\ttogglePadding: affordanceGeometry.togglePadding,\n\ttextareaCountPadding: affordanceGeometry.textareaCountPadding,\n\tmeasuredPadding: affordanceGeometry.measuredPadding,\n\tmeasuredStartPadding: affordanceGeometry.measuredStartPadding,\n\tpairedClearPadding: affordanceGeometry.pairedClearPadding,\n\tpairedIconPadding: affordanceGeometry.pairedIconPadding,\n\tpairedAddonPadding: affordanceGeometry.pairedAddonPadding,\n\tpairedCountPadding: affordanceGeometry.pairedCountPadding,\n} as const;\n\n/**\n * Select-like toggles share one chevron geometry: the glyph scales with the\n * control size, and the toggle track is offset by half the difference between\n * its 1.375rem target and the glyph, so the chevron centres where a Select\n * trigger draws its own (inside the 1px border plus the control padding).\n * Written from the root tokens so scoped density and spacing apply.\n */\nexport const selectToggleRecipes = {\n\ticon: { sm: 'size-icon-sm', md: 'size-icon', lg: 'size-icon-lg' },\n\ttrack: affordanceGeometry.selectToggleTrack,\n\t/**\n\t * Text clearance for an editable field with the toggle track: the track offset,\n\t * the whole 1.375rem target (not only its glyph) and the spaced copy gap, so a\n\t * value never runs under the target at any density or spacing.\n\t */\n\tpadding: affordanceGeometry.selectTogglePadding,\n\t/** The same clearance when a clear target precedes the toggle in the track. */\n\tclearPadding: {\n\t\tsm: 'pe-[calc((var(--control-x)*0.8333333+0.625rem)*var(--space-scale)+1px+(4.125rem*var(--density-scale)+var(--icon)*0.75)/2)]',\n\t\tmd: 'pe-[calc((var(--control-x)+0.625rem)*var(--space-scale)+1px+(4.125rem*var(--density-scale)+var(--icon))/2)]',\n\t\tlg: 'pe-[calc((var(--control-x)+0.625rem)*var(--space-scale)+1px+(4.125rem*var(--density-scale)+var(--icon)*1.25)/2)]',\n\t},\n} as const satisfies Record<string, Record<'sm' | 'md' | 'lg', string>>;\n"],"mappings":";;;;;AASA,IAAaE,IAAkBC,GAGlBC,IAAyB;CAErC,QAAQ,GAAGH,EAAmB,kBAAkB;CAChD,QAAQ,GAAGA,EAAmB,kBAAkB;CAChD,OAAO,sBAAsBI,EAAa,KAAK;CAC/C,OAAO;CACP,QAAQ;CACR,MAAM;CACN,UAAU;CACV,UAAUL,EAAmB;CAC7B,cAAcA,EAAmB;CACjC,eAAeA,EAAmB;CAClC,sBAAsBA,EAAmB;CACzC,iBAAiBA,EAAmB;CACpC,sBAAsBA,EAAmB;CACzC,oBAAoBA,EAAmB;CACvC,mBAAmBA,EAAmB;CACtC,oBAAoBA,EAAmB;CACvC,oBAAoBA,EAAmB;AACxC,GASaM,IAAsB;CAClC,MAAM;EAAE,IAAI;EAAgB,IAAI;EAAa,IAAI;CAAe;CAChE,OAAON,EAAmB;CAM1B,SAASA,EAAmB;CAE5B,cAAc;EACb,IAAI;EACJ,IAAI;EACJ,IAAI;CACL;AACD"}

package/dist/field-control-attributes-B6i335wr.js

@@ -0,0 +1,18 @@
+//#region src/lib/field-control-attributes.ts
+function e(e, t) {
+	let n = e ? !0 : t ?? e;
+	return {
+		invalid: !!(n && n !== "false"),
+		ariaInvalid: n
+	};
+}
+function t(e, ...t) {
+	if (e) return (n) => {
+		let { currentTarget: r, relatedTarget: i } = n;
+		!r.contains(i) && !t.some((e) => e.current?.contains(i)) && e(n);
+	};
+}
+//#endregion
+export { e as n, t };
+
+//# sourceMappingURL=field-control-attributes-B6i335wr.js.map

package/dist/field-control-attributes-B6i335wr.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-control-attributes-B6i335wr.js","names":["resolveFieldInvalid","state","invalid","ariaInvalid","fieldBoundaryBlur","otherSurfaces","onBlur","event","currentTarget","relatedTarget","surface"],"sources":["../src/lib/field-control-attributes.ts"],"sourcesContent":["import type { AriaAttributes, FocusEventHandler, RefObject } from 'react';\n\nexport interface FieldControlAttributes extends Pick<AriaAttributes,\n\t'aria-label' | 'aria-labelledby' | 'aria-describedby' | 'aria-invalid'\n> {\n\t/** ID of the field's interactive target or group. */\n\tid?: string;\n}\n\nexport function resolveFieldInvalid(invalid: boolean | undefined, ariaInvalid: AriaAttributes['aria-invalid']) {\n\tconst state = invalid ? true : ariaInvalid ?? invalid;\n\treturn { invalid: Boolean(state && state !== 'false'), ariaInvalid: state };\n}\n\n/** Treat the visible field and its portaled content as one focus boundary. */\nexport function fieldBoundaryBlur<T extends HTMLElement>(\n\tonBlur: FocusEventHandler<T> | undefined,\n\t...otherSurfaces: RefObject<HTMLElement | null>[]\n): FocusEventHandler<T> | undefined {\n\tif (!onBlur) return undefined;\n\treturn event => {\n\t\tconst { currentTarget, relatedTarget } = event;\n\t\tif (!currentTarget.contains(relatedTarget) &&\n\t\t\t!otherSurfaces.some(surface => surface.current?.contains(relatedTarget))) {\n\t\t\tonBlur(event);\n\t\t}\n\t};\n}\n"],"mappings":";AASA,SAAgBA,EAAoB,GAA8B,GAA6C;CAC9G,IAAMC,IAAQC,IAAU,KAAOC,KAAeD;CAC9C,OAAO;EAAE,SAAS,GAAQD,KAASA,MAAU;EAAU,aAAaA;CAAM;AAC3E;AAGA,SAAgBG,EACf,GACA,GAAGC,GACgC;CACnC,IAAKC,GACL,QAAO,MAAS;EACf,IAAM,EAAE,kBAAe,qBAAkBC;EACzC,AAAI,CAACC,EAAc,SAASC,CAAa,KACxC,CAACJ,EAAc,MAAK,MAAWK,EAAQ,SAAS,SAASD,CAAa,CAAC,KACvEH,EAAOC,CAAK;CAEd;AACD"}

package/dist/{field-state-recipes-BVA2CWHo.js → field-state-recipes-7sza8QbC.js}

@@ -4,9 +4,11 @@ var t = {
 	focus: e.frame,
 	invalid: "aria-invalid:border-destructive aria-invalid:focus-visible:border-destructive aria-invalid:focus-visible:ring-destructive/30 dark:aria-invalid:focus-visible:ring-destructive/50",
 	groupFocus: "has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50",
-	groupInvalid: "has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:has-[[data-slot=input-group-control]:focus-visible]:border-destructive has-[[data-slot][aria-invalid=true]]:has-[[data-slot=input-group-control]:focus-visible]:ring-destructive/30 dark:has-[[data-slot][aria-invalid=true]]:has-[[data-slot=input-group-control]:focus-visible]:ring-destructive/50"
+	groupInvalid: "has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:has-[[data-slot=input-group-control]:focus-visible]:border-destructive has-[[data-slot][aria-invalid=true]]:has-[[data-slot=input-group-control]:focus-visible]:ring-destructive/30 dark:has-[[data-slot][aria-invalid=true]]:has-[[data-slot=input-group-control]:focus-visible]:ring-destructive/50",
+	editorFocus: "has-[[data-slot=editor-field]:focus-visible]:border-ring has-[[data-slot=editor-field]:focus-visible]:ring-3 has-[[data-slot=editor-field]:focus-visible]:ring-ring/50",
+	editorInvalid: "has-[[data-slot=editor-field][aria-invalid=true]]:border-destructive has-[[data-slot=editor-field][aria-invalid=true]]:has-[[data-slot=editor-field]:focus-visible]:border-destructive has-[[data-slot=editor-field][aria-invalid=true]]:has-[[data-slot=editor-field]:focus-visible]:ring-destructive/30 dark:has-[[data-slot=editor-field][aria-invalid=true]]:has-[[data-slot=editor-field]:focus-visible]:ring-destructive/50"
 };
 //#endregion
 export { t };
 
-//# sourceMappingURL=field-state-recipes-BVA2CWHo.js.map
+//# sourceMappingURL=field-state-recipes-7sza8QbC.js.map

package/dist/{field-state-recipes-BVA2CWHo.js.map → field-state-recipes-7sza8QbC.js.map}

@@ -1 +1 @@
-{"version":3,"file":"field-state-recipes-BVA2CWHo.js","names":["focusRecipes","fieldStateRecipes"],"sources":["../src/lib/field-state-recipes.ts"],"sourcesContent":["import { focusRecipes } from './focus-recipes';\n\n/** Native fields and field-shaped triggers share one frame-state contract.\n * Focus is the shared frame recipe: the 1px frame takes --ring inside a soft\n * halo. Validation marks the frame with the destructive border; a focused\n * invalid field keeps that border and shows the halo in the destructive color.\n * Editable values retain the semantic foreground. Compound fields apply the same\n * state to their outer frame, never each child.\n */\nexport const fieldStateRecipes = {\n\tfocus: focusRecipes.frame,\n\tinvalid: 'aria-invalid:border-destructive aria-invalid:focus-visible:border-destructive aria-invalid:focus-visible:ring-destructive/30 dark:aria-invalid:focus-visible:ring-destructive/50',\n\tgroupFocus: 'has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50',\n\tgroupInvalid: 'has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:has-[[data-slot=input-group-control]:focus-visible]:border-destructive has-[[data-slot][aria-invalid=true]]:has-[[data-slot=input-group-control]:focus-visible]:ring-destructive/30 dark:has-[[data-slot][aria-invalid=true]]:has-[[data-slot=input-group-control]:focus-visible]:ring-destructive/50',\n} as const;\n"],"mappings":";;AASA,IAAaC,IAAoB;CAChC,OAAOD,EAAa;CACpB,SAAS;CACT,YAAY;CACZ,cAAc;AACf"}
+{"version":3,"file":"field-state-recipes-7sza8QbC.js","names":["focusRecipes","fieldStateRecipes"],"sources":["../src/lib/field-state-recipes.ts"],"sourcesContent":["import { focusRecipes } from './focus-recipes';\n\n/** Native fields and field-shaped triggers share one frame-state contract.\n * Focus is the shared frame recipe: the 1px frame takes --ring inside a soft\n * halo. Validation marks the frame with the destructive border; a focused\n * invalid field keeps that border and shows the halo in the destructive color.\n * Editable values retain the semantic foreground. Compound fields apply the same\n * state to their outer frame, never each child.\n */\nexport const fieldStateRecipes = {\n\tfocus: focusRecipes.frame,\n\tinvalid: 'aria-invalid:border-destructive aria-invalid:focus-visible:border-destructive aria-invalid:focus-visible:ring-destructive/30 dark:aria-invalid:focus-visible:ring-destructive/50',\n\tgroupFocus: 'has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50',\n\tgroupInvalid: 'has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:has-[[data-slot=input-group-control]:focus-visible]:border-destructive has-[[data-slot][aria-invalid=true]]:has-[[data-slot=input-group-control]:focus-visible]:ring-destructive/30 dark:has-[[data-slot][aria-invalid=true]]:has-[[data-slot=input-group-control]:focus-visible]:ring-destructive/50',\n\teditorFocus: 'has-[[data-slot=editor-field]:focus-visible]:border-ring has-[[data-slot=editor-field]:focus-visible]:ring-3 has-[[data-slot=editor-field]:focus-visible]:ring-ring/50',\n\teditorInvalid: 'has-[[data-slot=editor-field][aria-invalid=true]]:border-destructive has-[[data-slot=editor-field][aria-invalid=true]]:has-[[data-slot=editor-field]:focus-visible]:border-destructive has-[[data-slot=editor-field][aria-invalid=true]]:has-[[data-slot=editor-field]:focus-visible]:ring-destructive/30 dark:has-[[data-slot=editor-field][aria-invalid=true]]:has-[[data-slot=editor-field]:focus-visible]:ring-destructive/50',\n} as const;\n"],"mappings":";;AASA,IAAaC,IAAoB;CAChC,OAAOD,EAAa;CACpB,SAAS;CACT,YAAY;CACZ,cAAc;CACd,aAAa;CACb,eAAe;AAChB"}