@arcfusionz/arc-primitive-ui 0.3.12 → 0.3.14

package/dist/components/AILoader/AILoader.js

@@ -28,14 +28,16 @@ const textSizeClasses = {
 };
 const textClasses = "inline-block whitespace-nowrap font-sans leading-none text-muted-foreground";
 const textShimmerClasses = "bg-[linear-gradient(90deg,transparent_38%,var(--color-secondary)_50%,transparent_62%),linear-gradient(var(--color-muted-foreground),var(--color-muted-foreground))] bg-[length:250%_100%,100%_100%] bg-clip-text [background-repeat:no-repeat,no-repeat] motion-safe:animate-ai-loader-text-shimmer motion-safe:text-transparent motion-safe:[&_*]:!text-inherit motion-safe:will-change-[background-position]";
-const rotationMotionClasses = "motion-safe:animate-ai-loader-rotate motion-safe:will-change-transform";
+const processingRotationMotionClasses = "motion-safe:animate-ai-loader-processing-spin motion-safe:will-change-transform";
 const processingPulseMotionClasses = "motion-safe:animate-ai-loader-processing-pulse motion-safe:will-change-transform";
 const coreMotionClasses = "motion-safe:animate-ai-loader-core motion-safe:will-change-transform";
 const facetMotionClasses = "motion-safe:animate-ai-loader-facet motion-safe:will-change-transform";
 const firstSparkMotionClasses = "motion-safe:animate-ai-loader-spark motion-safe:will-change-transform";
-const quarterSparkMotionClasses = "motion-safe:animate-ai-loader-spark motion-safe:[animation-delay:0.6s] motion-safe:will-change-transform";
 const secondSparkMotionClasses = "motion-safe:animate-ai-loader-spark motion-safe:[animation-delay:1.2s] motion-safe:will-change-transform";
-const threeQuarterSparkMotionClasses = "motion-safe:animate-ai-loader-spark motion-safe:[animation-delay:1.8s] motion-safe:will-change-transform";
+const firstProcessingSparkMotionClasses = "motion-safe:animate-ai-loader-processing-spark motion-safe:will-change-transform";
+const quarterProcessingSparkMotionClasses = "motion-safe:animate-ai-loader-processing-spark motion-safe:[animation-delay:0.6s] motion-safe:will-change-transform";
+const secondProcessingSparkMotionClasses = "motion-safe:animate-ai-loader-processing-spark motion-safe:[animation-delay:1.2s] motion-safe:will-change-transform";
+const threeQuarterProcessingSparkMotionClasses = "motion-safe:animate-ai-loader-processing-spark motion-safe:[animation-delay:1.8s] motion-safe:will-change-transform";
 const processingSatelliteMotionClasses = "motion-safe:animate-ai-loader-processing-satellite motion-safe:will-change-opacity";
 const AILoader = forwardRef(({ state = "default", size = "md", tone = "brand", text, label, render, className, ...rest }, ref) => {
 	const gradientId = `ai-loader-${useId().replaceAll(":", "")}`;
@@ -85,59 +87,64 @@ const AILoader = forwardRef(({ state = "default", size = "md", tone = "brand", t
 								stopColor: endColor
 							})
 						]
-					}) }), /* @__PURE__ */ jsxs("g", {
-						className: cn("origin-center [transform-box:view-box]", processing && rotationMotionClasses),
-						children: [
-							!processing && /* @__PURE__ */ jsx("g", {
-								className: cn("origin-center rotate-45 scale-75 opacity-15 [transform-box:fill-box]", facetMotionClasses),
-								children: /* @__PURE__ */ jsx("path", {
-									fill: `url(#${gradientId})`,
-									d: SPARKLE_PATH
-								})
-							}),
-							/* @__PURE__ */ jsx("path", {
+					}) }), /* @__PURE__ */ jsxs("g", { children: [
+						!processing && /* @__PURE__ */ jsx("g", {
+							className: cn("origin-center rotate-45 scale-75 opacity-15 [transform-box:fill-box]", facetMotionClasses),
+							children: /* @__PURE__ */ jsx("path", {
+								fill: `url(#${gradientId})`,
+								d: SPARKLE_PATH
+							})
+						}),
+						/* @__PURE__ */ jsx("g", {
+							className: cn("origin-center [transform-box:view-box]", processing && processingRotationMotionClasses),
+							children: /* @__PURE__ */ jsx("path", {
 								fill: `url(#${gradientId})`,
 								d: SPARKLE_PATH,
 								className: cn("origin-center opacity-95 [transform-box:fill-box]", processing ? processingPulseMotionClasses : coreMotionClasses)
-							}),
-							/* @__PURE__ */ jsx("g", {
-								transform: "translate(19 4.75)",
-								className: processing ? processingSatelliteMotionClasses : void 0,
-								children: /* @__PURE__ */ jsx("path", {
-									fill: `url(#${gradientId})`,
-									className: cn("origin-center opacity-45 [transform-box:fill-box]", firstSparkMotionClasses),
-									d: LARGE_SATELLITE_PATH
-								})
-							}),
-							processing && /* @__PURE__ */ jsx("g", {
-								transform: "translate(19 19.25)",
-								className: processingSatelliteMotionClasses,
-								children: /* @__PURE__ */ jsx("path", {
-									fill: `url(#${gradientId})`,
-									className: cn("origin-center opacity-45 [transform-box:fill-box]", quarterSparkMotionClasses),
-									d: SMALL_SATELLITE_PATH
-								})
-							}),
-							/* @__PURE__ */ jsx("g", {
-								transform: processing ? "translate(5 19.25)" : "translate(5 18.25)",
-								className: processing ? processingSatelliteMotionClasses : void 0,
-								children: /* @__PURE__ */ jsx("path", {
-									fill: `url(#${gradientId})`,
-									className: cn("origin-center opacity-45 [transform-box:fill-box]", secondSparkMotionClasses),
-									d: processing ? LARGE_SATELLITE_PATH : SMALL_SATELLITE_PATH
-								})
-							}),
-							processing && /* @__PURE__ */ jsx("g", {
-								transform: "translate(5 4.75)",
-								className: processingSatelliteMotionClasses,
-								children: /* @__PURE__ */ jsx("path", {
-									fill: `url(#${gradientId})`,
-									className: cn("origin-center opacity-45 [transform-box:fill-box]", threeQuarterSparkMotionClasses),
-									d: SMALL_SATELLITE_PATH
-								})
 							})
-						]
-					})]
+						}),
+						/* @__PURE__ */ jsxs("g", {
+							className: cn("origin-center [transform-box:view-box]", processing && processingRotationMotionClasses),
+							children: [
+								/* @__PURE__ */ jsx("g", {
+									transform: "translate(19 4.75)",
+									className: processing ? processingSatelliteMotionClasses : void 0,
+									children: /* @__PURE__ */ jsx("path", {
+										fill: `url(#${gradientId})`,
+										className: cn("origin-center opacity-45 [transform-box:fill-box]", processing ? firstProcessingSparkMotionClasses : firstSparkMotionClasses),
+										d: LARGE_SATELLITE_PATH
+									})
+								}),
+								processing && /* @__PURE__ */ jsx("g", {
+									transform: "translate(19 19.25)",
+									className: processingSatelliteMotionClasses,
+									children: /* @__PURE__ */ jsx("path", {
+										fill: `url(#${gradientId})`,
+										className: cn("origin-center opacity-45 [transform-box:fill-box]", secondProcessingSparkMotionClasses),
+										d: SMALL_SATELLITE_PATH
+									})
+								}),
+								/* @__PURE__ */ jsx("g", {
+									transform: processing ? "translate(5 19.25)" : "translate(5 18.25)",
+									className: processing ? processingSatelliteMotionClasses : void 0,
+									children: /* @__PURE__ */ jsx("path", {
+										fill: `url(#${gradientId})`,
+										className: cn("origin-center opacity-45 [transform-box:fill-box]", processing ? quarterProcessingSparkMotionClasses : secondSparkMotionClasses),
+										d: processing ? LARGE_SATELLITE_PATH : SMALL_SATELLITE_PATH
+									})
+								}),
+								processing && /* @__PURE__ */ jsx("g", {
+									transform: "translate(5 4.75)",
+									className: processingSatelliteMotionClasses,
+									children: /* @__PURE__ */ jsx("path", {
+										fill: `url(#${gradientId})`,
+										className: cn("origin-center opacity-45 [transform-box:fill-box]", threeQuarterProcessingSparkMotionClasses),
+										d: SMALL_SATELLITE_PATH
+									})
+								})
+							]
+						})
+					] })]
 				}),
 				hasText && /* @__PURE__ */ jsx("span", {
 					className: cn(textClasses, textSizeClasses[size], processing && textShimmerClasses),

package/dist/components/Accordion/Accordion.js

@@ -18,7 +18,7 @@ const itemVariantClasses = {
 	contained: "border-b border-border last:border-b-0",
 	separated: "overflow-hidden rounded-md border border-border"
 };
-const triggerBaseClasses = "group flex w-full cursor-pointer items-center gap-3 text-start font-sans font-medium text-foreground transition-colors duration-150 select-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50";
+const triggerBaseClasses = "group flex w-full cursor-pointer items-center gap-3 text-start font-sans font-medium text-foreground transition-colors duration-150 select-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 disabled:cursor-not-allowed disabled:opacity-50 data-disabled:cursor-not-allowed data-disabled:opacity-50";
 const triggerVariantClasses = {
 	divided: "px-0 hover:underline underline-offset-4",
 	contained: "hover:bg-muted active:bg-slate-200",

package/dist/components/Badge/Badge.js

@@ -46,7 +46,7 @@ const dotOnlyFillClasses = {
 	warning: "bg-warning",
 	destructive: "bg-destructive"
 };
-const deleteButtonClasses = "relative -mr-1 inline-flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-full text-current opacity-70 transition-colors duration-150 before:absolute before:-inset-1 hover:bg-current/10 hover:opacity-100 active:bg-current/20 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50";
+const deleteButtonClasses = "relative -mr-1 inline-flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-full text-current opacity-70 transition-colors duration-150 before:absolute before:-inset-1 hover:bg-current/10 hover:opacity-100 active:bg-current/20 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:cursor-not-allowed disabled:opacity-50 data-disabled:cursor-not-allowed data-disabled:opacity-50";
 function DeleteIcon() {
 	return /* @__PURE__ */ jsx("svg", {
 		viewBox: "0 0 24 24",

package/dist/components/Button/Button.js

@@ -3,7 +3,7 @@ import { forwardRef, useRef } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Button } from "@base-ui/react/button";
 //#region src/components/Button/Button.tsx
-const baseClasses = "relative inline-flex items-center justify-center whitespace-nowrap select-none rounded-md font-sans font-medium transition-colors duration-150 cursor-pointer focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50";
+const baseClasses = "relative inline-flex items-center justify-center whitespace-nowrap select-none rounded-md font-sans font-medium transition-colors duration-150 cursor-pointer focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 disabled:cursor-not-allowed disabled:opacity-50 data-disabled:cursor-not-allowed data-disabled:opacity-50";
 const variantClasses = {
 	primary: "bg-primary text-primary-foreground hover:bg-primary-700 active:bg-primary-800",
 	secondary: "border border-primary-200 bg-primary-50 text-secondary-foreground hover:bg-primary-100 active:bg-primary-200",

package/dist/components/Calendar/Calendar.js

@@ -76,8 +76,8 @@ function useControlled(controlled, initial) {
 	const [internal, setInternal] = useState(initial);
 	return [controlled !== void 0 ? controlled : internal, setInternal];
 }
-const dayButtonClasses = "relative inline-flex size-9 cursor-pointer select-none items-center justify-center rounded-full font-sans text-sm text-foreground duration-150 hover:bg-muted active:bg-slate-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-today:border data-today:border-primary-500 data-outside:text-muted-foreground data-hidden:invisible data-unavailable:cursor-default data-unavailable:text-muted-foreground data-unavailable:line-through data-unavailable:hover:bg-transparent data-unavailable:active:bg-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary-700 data-selected:active:bg-primary-800 data-range-middle:rounded-none data-range-middle:bg-primary-100 data-range-middle:text-foreground data-range-middle:data-today:rounded-full data-range-middle:hover:bg-primary-200 data-range-middle:active:bg-primary-200";
-const navButtonClasses = "inline-flex size-9 cursor-pointer items-center justify-center rounded-md text-foreground transition-colors duration-150 hover:bg-muted active:bg-slate-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4";
+const dayButtonClasses = "relative inline-flex size-9 cursor-pointer select-none items-center justify-center rounded-full font-sans text-sm text-foreground duration-150 hover:bg-muted active:bg-slate-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:cursor-not-allowed disabled:opacity-50 data-today:border data-today:border-primary-500 data-outside:text-muted-foreground data-hidden:invisible data-unavailable:cursor-default data-unavailable:text-muted-foreground data-unavailable:line-through data-unavailable:hover:bg-transparent data-unavailable:active:bg-transparent data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary-700 data-selected:active:bg-primary-800 data-range-middle:rounded-none data-range-middle:bg-primary-100 data-range-middle:text-foreground data-range-middle:data-today:rounded-full data-range-middle:hover:bg-primary-200 data-range-middle:active:bg-primary-200";
+const navButtonClasses = "inline-flex size-9 cursor-pointer items-center justify-center rounded-md text-foreground transition-colors duration-150 hover:bg-muted active:bg-slate-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:cursor-not-allowed disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4";
 const captionClasses = "font-sans text-sm font-semibold text-foreground";
 const weekdayClasses = "size-9 p-0 text-center align-middle font-sans text-xs font-medium text-muted-foreground";
 function ChevronLeftIcon(props) {

package/dist/components/Checkbox/Checkbox.js

@@ -4,7 +4,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Checkbox } from "@base-ui/react/checkbox";
 import { CheckboxGroup } from "@base-ui/react/checkbox-group";
 //#region src/components/Checkbox/Checkbox.tsx
-const boxClasses = "inline-flex shrink-0 cursor-pointer select-none items-center justify-center rounded-md border border-border bg-background text-primary-foreground transition-colors duration-150 hover:border-slate-300 data-checked:border-primary data-checked:bg-primary data-indeterminate:border-primary data-indeterminate:bg-primary hover:data-checked:border-primary-700 hover:data-checked:bg-primary-700 hover:data-indeterminate:border-primary-700 hover:data-indeterminate:bg-primary-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring aria-invalid:border-destructive data-invalid:border-destructive aria-invalid:focus-visible:outline-destructive data-invalid:focus-visible:outline-destructive data-readonly:cursor-default disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0";
+const boxClasses = "inline-flex shrink-0 cursor-pointer select-none items-center justify-center rounded-md border border-border bg-background text-primary-foreground transition-colors duration-150 hover:border-slate-300 data-checked:border-primary data-checked:bg-primary data-indeterminate:border-primary data-indeterminate:bg-primary hover:data-checked:border-primary-700 hover:data-checked:bg-primary-700 hover:data-indeterminate:border-primary-700 hover:data-indeterminate:bg-primary-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring aria-invalid:border-destructive data-invalid:border-destructive aria-invalid:focus-visible:outline-destructive data-invalid:focus-visible:outline-destructive data-readonly:cursor-default disabled:cursor-not-allowed disabled:opacity-50 data-disabled:cursor-not-allowed data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0";
 const boxSizeClasses = {
 	sm: "size-4 [&_svg]:size-3",
 	md: "size-5 [&_svg]:size-3.5",
@@ -92,9 +92,9 @@ const Checkbox$1 = forwardRef(({ size = "md", label, description, required, clas
 	});
 	if (!hasText) return control;
 	return /* @__PURE__ */ jsxs("span", {
-		className: cn("inline-flex max-w-full flex-col gap-1 font-sans", "has-data-disabled:pointer-events-none has-data-disabled:opacity-50"),
+		className: cn("inline-flex max-w-full flex-col gap-1 font-sans", "has-data-disabled:cursor-not-allowed has-data-disabled:opacity-50"),
 		children: [hasLabel ? /* @__PURE__ */ jsxs("label", {
-			className: cn("inline-flex cursor-pointer items-start gap-2", "has-data-readonly:cursor-default"),
+			className: cn("inline-flex cursor-pointer items-start gap-2", "has-data-disabled:cursor-not-allowed", "has-data-readonly:cursor-default"),
 			children: [control, /* @__PURE__ */ jsxs("span", {
 				className: cn("font-medium text-foreground select-none", labelTextClasses[size]),
 				children: [label, required && /* @__PURE__ */ jsx("span", {

package/dist/components/Combobox/Combobox.js

@@ -89,8 +89,8 @@ const ComboboxLabel = forwardRef(({ className, ...rest }, ref) => /* @__PURE__ *
 	...rest
 }));
 ComboboxLabel.displayName = "ComboboxLabel";
-const fieldButtonClasses = "flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-md text-muted-foreground transition-colors duration-150 hover:bg-primary-50 hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50";
-const inputGroupBaseClasses = "flex w-full min-w-0 flex-wrap items-center cursor-text rounded-md border border-border bg-background font-sans text-foreground transition-colors duration-150 hover:border-slate-300 has-[input:focus-visible]:outline-2 has-[input:focus-visible]:outline-offset-2 has-[input:focus-visible]:outline-ring data-invalid:border-destructive data-invalid:hover:border-destructive data-invalid:has-[input:focus-visible]:outline-destructive has-aria-invalid:border-destructive has-aria-invalid:hover:border-destructive has-aria-invalid:has-[input:focus-visible]:outline-destructive data-readonly:cursor-default data-readonly:bg-surface data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4";
+const fieldButtonClasses = "flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-md text-muted-foreground transition-colors duration-150 hover:bg-primary-50 hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:cursor-not-allowed disabled:opacity-50 data-disabled:cursor-not-allowed data-disabled:opacity-50";
+const inputGroupBaseClasses = "flex w-full min-w-0 flex-wrap items-center cursor-text rounded-md border border-border bg-background font-sans text-foreground transition-colors duration-150 hover:border-slate-300 has-[input:focus-visible]:outline-2 has-[input:focus-visible]:outline-offset-2 has-[input:focus-visible]:outline-ring data-invalid:border-destructive data-invalid:hover:border-destructive data-invalid:has-[input:focus-visible]:outline-destructive has-aria-invalid:border-destructive has-aria-invalid:hover:border-destructive has-aria-invalid:has-[input:focus-visible]:outline-destructive data-readonly:cursor-default data-readonly:bg-surface data-disabled:cursor-not-allowed data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4";
 const inputGroupSizeClasses = {
 	sm: "min-h-8 gap-x-1.5 gap-y-1 px-2.5 py-1 text-sm any-pointer-coarse:text-base",
 	md: "min-h-10 gap-x-2 gap-y-1 px-3 py-1 text-sm any-pointer-coarse:text-base",
@@ -138,8 +138,8 @@ const ComboboxInputGroup = forwardRef(({ size = "md", showTrigger = true, showCl
 	})
 }));
 ComboboxInputGroup.displayName = "ComboboxInputGroup";
-const bareInputClasses = "h-6 min-w-16 flex-1 appearance-none rounded-none border-0 bg-transparent p-0 font-sans text-inherit placeholder:text-muted-foreground outline-none disabled:pointer-events-none";
-const popupInputClasses = "h-10 w-full shrink-0 appearance-none rounded-none border-0 border-b border-border bg-transparent px-3 font-sans text-sm any-pointer-coarse:text-base text-foreground placeholder:text-muted-foreground outline-none disabled:pointer-events-none";
+const bareInputClasses = "h-6 min-w-16 flex-1 appearance-none rounded-none border-0 bg-transparent p-0 font-sans text-inherit placeholder:text-muted-foreground outline-none disabled:cursor-not-allowed";
+const popupInputClasses = "h-10 w-full shrink-0 appearance-none rounded-none border-0 border-b border-border bg-transparent px-3 font-sans text-sm any-pointer-coarse:text-base text-foreground placeholder:text-muted-foreground outline-none disabled:cursor-not-allowed";
 /**
 * The text input that filters the list. Context-aware: bare inside a
 * `ComboboxInputGroup` (the group owns the frame), a pinned search row
@@ -287,7 +287,7 @@ const ComboboxPopup = forwardRef(({ align = "center", sideOffset = 4, alignOffse
 	})
 }));
 ComboboxPopup.displayName = "ComboboxPopup";
-const itemClasses = "relative flex cursor-pointer items-center gap-2 rounded-md py-1.5 pr-8 pl-2 font-sans text-sm text-foreground outline-none select-none scroll-my-1 data-highlighted:bg-primary-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4";
+const itemClasses = "relative flex cursor-pointer items-center gap-2 rounded-md py-1.5 pr-8 pl-2 font-sans text-sm text-foreground outline-none select-none scroll-my-1 data-highlighted:bg-primary-50 data-disabled:cursor-not-allowed data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4";
 /**
 * One option in the popup. Children render as the option's label; a check
 * mark appears at the item's right edge while selected. Filtering matches
@@ -348,7 +348,7 @@ const ComboboxChips = forwardRef(({ className, ...rest }, ref) => /* @__PURE__ *
 	...rest
 }));
 ComboboxChips.displayName = "ComboboxChips";
-const chipClasses = "flex h-6 min-w-0 cursor-default select-none items-center gap-1 rounded-md bg-muted ps-2 pe-1 font-sans text-sm text-slate-700 data-highlighted:bg-primary-100 focus-within:bg-primary-100 data-disabled:pointer-events-none data-disabled:opacity-50";
+const chipClasses = "flex h-6 min-w-0 cursor-default select-none items-center gap-1 rounded-md bg-muted ps-2 pe-1 font-sans text-sm text-slate-700 data-highlighted:bg-primary-100 focus-within:bg-primary-100 data-disabled:cursor-not-allowed data-disabled:opacity-50";
 /**
 * One selected value in a `multiple` combobox. ArrowLeft from the input
 * walks the chips and Backspace removes the last one; give each chip an
@@ -361,7 +361,7 @@ const ComboboxChip = forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */
 	...rest
 }));
 ComboboxChip.displayName = "ComboboxChip";
-const chipRemoveClasses = "relative inline-flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-full text-current opacity-70 transition-colors duration-150 before:absolute before:-inset-1 hover:bg-current/10 hover:opacity-100 active:bg-current/20 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50";
+const chipRemoveClasses = "relative inline-flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-full text-current opacity-70 transition-colors duration-150 before:absolute before:-inset-1 hover:bg-current/10 hover:opacity-100 active:bg-current/20 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:cursor-not-allowed disabled:opacity-50 data-disabled:cursor-not-allowed data-disabled:opacity-50";
 /**
 * Removes its chip's value from the selection. Icon-only, so an accessible
 * name is required — include the value it removes, e.g.

package/dist/components/DatePicker/DatePicker.js

@@ -4,7 +4,7 @@ import { Popover, PopoverPopup, PopoverTrigger } from "../Popover/Popover.js";
 import { forwardRef, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/DatePicker/DatePicker.tsx
-const triggerBaseClasses = "inline-flex w-64 cursor-pointer items-center justify-start gap-2 rounded-md whitespace-nowrap select-none font-sans text-primary transition-colors duration-150 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring data-empty:text-muted-foreground data-readonly:cursor-default data-invalid:border-destructive data-invalid:focus-visible:outline-destructive aria-invalid:border-destructive aria-invalid:focus-visible:outline-destructive disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4";
+const triggerBaseClasses = "inline-flex w-64 cursor-pointer items-center justify-start gap-2 rounded-md whitespace-nowrap select-none font-sans text-primary transition-colors duration-150 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring data-empty:text-muted-foreground data-readonly:cursor-default data-invalid:border-destructive data-invalid:focus-visible:outline-destructive aria-invalid:border-destructive aria-invalid:focus-visible:outline-destructive disabled:cursor-not-allowed disabled:opacity-50 data-disabled:cursor-not-allowed data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4";
 const triggerVariantClasses = {
 	outline: "border border-border bg-background hover:bg-primary-50 data-popup-open:bg-primary-50",
 	ghost: "border border-transparent bg-transparent hover:bg-primary-50 data-popup-open:bg-primary-50"

package/dist/components/FileUpload/FileUpload.js

@@ -268,7 +268,7 @@ const FileUpload = forwardRef(({ accept, multiple = false, maxFiles, maxSize, mi
 	});
 });
 FileUpload.displayName = "FileUpload";
-const dropzoneClasses = "relative flex w-full flex-col items-center justify-center rounded-md border-2 border-dashed border-border bg-transparent cursor-pointer transition-colors duration-150 hover:border-slate-300 hover:bg-surface has-[:focus-visible]:border-primary has-[:focus-visible]:bg-primary-50 data-dragging:border-primary data-dragging:bg-primary-50 data-invalid:border-destructive data-at-max:cursor-default data-at-max:hover:border-border data-at-max:hover:bg-transparent data-disabled:cursor-default data-disabled:opacity-50 data-disabled:hover:border-border data-disabled:hover:bg-transparent";
+const dropzoneClasses = "relative flex w-full flex-col items-center justify-center rounded-md border-2 border-dashed border-border bg-transparent cursor-pointer transition-colors duration-150 hover:border-slate-300 hover:bg-surface has-[:focus-visible]:border-primary has-[:focus-visible]:bg-primary-50 data-dragging:border-primary data-dragging:bg-primary-50 data-invalid:border-destructive data-at-max:cursor-default data-at-max:hover:border-border data-at-max:hover:bg-transparent data-disabled:cursor-not-allowed data-disabled:opacity-50 data-disabled:hover:border-border data-disabled:hover:bg-transparent";
 const dropzoneCompactClasses = "flex-row items-center gap-3 px-4 py-3 text-start";
 /**
 * Class list for an element styled as the dashed drop area — for building a

package/dist/components/Input/Input.js

@@ -4,7 +4,7 @@ import { createContext, forwardRef, useContext, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 import { Input } from "@base-ui/react/input";
 //#region src/components/Input/Input.tsx
-const inputBaseClasses = "block w-full min-w-0 appearance-none rounded-md border border-border bg-background font-sans text-foreground placeholder:text-muted-foreground transition-colors duration-150 hover:border-slate-300 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring data-invalid:border-destructive data-invalid:hover:border-destructive data-invalid:focus-visible:outline-destructive aria-invalid:border-destructive aria-invalid:hover:border-destructive aria-invalid:focus-visible:outline-destructive [&[readonly]]:bg-surface disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 file:me-3 file:h-full file:cursor-pointer file:border-0 file:bg-transparent file:font-sans file:text-sm file:font-medium file:text-foreground";
+const inputBaseClasses = "block w-full min-w-0 appearance-none rounded-md border border-border bg-background font-sans text-foreground placeholder:text-muted-foreground transition-colors duration-150 hover:border-slate-300 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring data-invalid:border-destructive data-invalid:hover:border-destructive data-invalid:focus-visible:outline-destructive aria-invalid:border-destructive aria-invalid:hover:border-destructive aria-invalid:focus-visible:outline-destructive [&[readonly]]:bg-surface disabled:cursor-not-allowed disabled:opacity-50 data-disabled:cursor-not-allowed data-disabled:opacity-50 file:me-3 file:h-full file:cursor-pointer disabled:file:cursor-not-allowed file:border-0 file:bg-transparent file:font-sans file:text-sm file:font-medium file:text-foreground";
 const inputSizeClasses = {
 	sm: "h-8 px-2.5 text-sm any-pointer-coarse:text-base",
 	md: "h-10 px-3 text-sm any-pointer-coarse:text-base",
@@ -19,7 +19,7 @@ const inputSizeClasses = {
 function inputVariants({ size = "md", className } = {}) {
 	return cn(inputBaseClasses, inputSizeClasses[size], className);
 }
-const bareInputClasses = "h-full w-full min-w-0 flex-1 appearance-none rounded-none border-0 bg-transparent p-0 font-sans text-inherit placeholder:text-muted-foreground outline-none disabled:pointer-events-none file:me-3 file:h-full file:cursor-pointer file:border-0 file:bg-transparent file:font-sans file:text-sm file:font-medium file:text-foreground";
+const bareInputClasses = "h-full w-full min-w-0 flex-1 appearance-none rounded-none border-0 bg-transparent p-0 font-sans text-inherit placeholder:text-muted-foreground outline-none disabled:cursor-not-allowed file:me-3 file:h-full file:cursor-pointer disabled:file:cursor-not-allowed file:border-0 file:bg-transparent file:font-sans file:text-sm file:font-medium file:text-foreground";
 function composeRefs(...refs) {
 	return (node) => {
 		for (const ref of refs) if (typeof ref === "function") ref(node);
@@ -71,7 +71,7 @@ const Input$1 = forwardRef(({ size = "md", htmlSize, invalid, type, name, value,
 });
 Input$1.displayName = "Input";
 const InputGroupContext = createContext(null);
-const groupBaseClasses = "flex w-full min-w-0 items-center rounded-md border border-border bg-background font-sans text-foreground transition-colors duration-150 hover:border-slate-300 focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-ring has-data-invalid:border-destructive has-data-invalid:hover:border-destructive has-data-invalid:focus-within:outline-destructive has-aria-invalid:border-destructive has-aria-invalid:hover:border-destructive has-aria-invalid:focus-within:outline-destructive has-[input[readonly]]:bg-surface has-[input:disabled]:pointer-events-none has-[input:disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4";
+const groupBaseClasses = "flex w-full min-w-0 items-center rounded-md border border-border bg-background font-sans text-foreground transition-colors duration-150 hover:border-slate-300 focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-ring has-data-invalid:border-destructive has-data-invalid:hover:border-destructive has-data-invalid:focus-within:outline-destructive has-aria-invalid:border-destructive has-aria-invalid:hover:border-destructive has-aria-invalid:focus-within:outline-destructive has-[input[readonly]]:bg-surface has-[input:disabled]:cursor-not-allowed has-[input:disabled]:opacity-50 [&:has(input:disabled)_*]:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4";
 const groupSizeClasses = {
 	sm: "h-8 gap-1.5 px-2.5 text-sm any-pointer-coarse:text-base",
 	md: "h-10 gap-2 px-3 text-sm any-pointer-coarse:text-base",

package/dist/components/Menu/Menu.js

@@ -125,7 +125,7 @@ const MenuPopup = forwardRef(({ side, align, sideOffset = side === void 0 ? adap
 	})
 }));
 MenuPopup.displayName = "MenuPopup";
-const itemBaseClasses = "relative flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 font-sans text-sm outline-none select-none scroll-my-1 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4";
+const itemBaseClasses = "relative flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 font-sans text-sm outline-none select-none scroll-my-1 data-disabled:cursor-not-allowed data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4";
 const itemVariantClasses = {
 	default: "text-foreground data-highlighted:bg-primary-50 [&_svg:not([class*='text-'])]:text-muted-foreground",
 	destructive: "text-error-700 data-highlighted:bg-error-50"

package/dist/components/Radio/Radio.js

@@ -4,7 +4,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Radio } from "@base-ui/react/radio";
 import { RadioGroup } from "@base-ui/react/radio-group";
 //#region src/components/Radio/Radio.tsx
-const circleClasses = "inline-flex shrink-0 cursor-pointer select-none items-center justify-center rounded-full border border-border bg-background text-primary-foreground transition-colors duration-150 hover:border-slate-300 data-checked:border-primary data-checked:bg-primary hover:data-checked:border-primary-700 hover:data-checked:bg-primary-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring aria-invalid:border-destructive data-invalid:border-destructive aria-invalid:focus-visible:outline-destructive data-invalid:focus-visible:outline-destructive data-readonly:cursor-default disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50";
+const circleClasses = "inline-flex shrink-0 cursor-pointer select-none items-center justify-center rounded-full border border-border bg-background text-primary-foreground transition-colors duration-150 hover:border-slate-300 data-checked:border-primary data-checked:bg-primary hover:data-checked:border-primary-700 hover:data-checked:bg-primary-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring aria-invalid:border-destructive data-invalid:border-destructive aria-invalid:focus-visible:outline-destructive data-invalid:focus-visible:outline-destructive data-readonly:cursor-default disabled:cursor-not-allowed disabled:opacity-50 data-disabled:cursor-not-allowed data-disabled:opacity-50";
 const circleSizeClasses = {
 	sm: "size-4",
 	md: "size-5",
@@ -58,9 +58,9 @@ const Radio$1 = forwardRef(({ size = "md", label, description, className, "aria-
 	});
 	if (!hasText) return control;
 	return /* @__PURE__ */ jsxs("span", {
-		className: cn("inline-flex max-w-full flex-col gap-1 font-sans", "has-data-disabled:pointer-events-none has-data-disabled:opacity-50"),
+		className: cn("inline-flex max-w-full flex-col gap-1 font-sans", "has-data-disabled:cursor-not-allowed has-data-disabled:opacity-50"),
 		children: [hasLabel ? /* @__PURE__ */ jsxs("label", {
-			className: cn("inline-flex cursor-pointer items-start gap-2", "has-data-readonly:cursor-default"),
+			className: cn("inline-flex cursor-pointer items-start gap-2", "has-data-disabled:cursor-not-allowed", "has-data-readonly:cursor-default"),
 			children: [control, /* @__PURE__ */ jsx("span", {
 				className: cn("font-medium text-foreground select-none", labelTextClasses[size]),
 				children: label

package/dist/components/Select/Select.js

@@ -64,7 +64,7 @@ const SelectLabel = forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */
 	...rest
 }));
 SelectLabel.displayName = "SelectLabel";
-const triggerBaseClasses = "inline-flex cursor-pointer items-center justify-between gap-2 rounded-md whitespace-nowrap select-none font-sans text-foreground transition-colors duration-150 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring data-readonly:cursor-default data-invalid:border-destructive data-invalid:focus-visible:outline-destructive aria-invalid:border-destructive aria-invalid:focus-visible:outline-destructive disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4";
+const triggerBaseClasses = "inline-flex cursor-pointer items-center justify-between gap-2 rounded-md whitespace-nowrap select-none font-sans text-foreground transition-colors duration-150 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring data-readonly:cursor-default data-invalid:border-destructive data-invalid:focus-visible:outline-destructive aria-invalid:border-destructive aria-invalid:focus-visible:outline-destructive disabled:cursor-not-allowed disabled:opacity-50 data-disabled:cursor-not-allowed data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4";
 const triggerVariantClasses = {
 	outline: "border border-border bg-background hover:bg-primary-50 data-popup-open:bg-primary-50",
 	ghost: "border border-transparent bg-transparent hover:bg-primary-50 data-popup-open:bg-primary-50"
@@ -194,7 +194,7 @@ const SelectPopup = forwardRef(({ align = "center", sideOffset = 4, alignOffset
 	})
 }));
 SelectPopup.displayName = "SelectPopup";
-const itemClasses = "relative flex cursor-pointer items-center gap-2 rounded-md py-1.5 pr-8 pl-2 font-sans text-sm text-foreground outline-none select-none scroll-my-1 data-highlighted:bg-primary-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4";
+const itemClasses = "relative flex cursor-pointer items-center gap-2 rounded-md py-1.5 pr-8 pl-2 font-sans text-sm text-foreground outline-none select-none scroll-my-1 data-highlighted:bg-primary-50 data-disabled:cursor-not-allowed data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4";
 /**
 * One option in the popup. Children render as the option's label (wrapped in
 * Base UI's `ItemText`); a check mark appears at the item's right edge while

package/dist/components/Stepper/Stepper.js

@@ -63,7 +63,7 @@ const gapClasses = {
 	md: "gap-3",
 	lg: "gap-4"
 };
-const itemClasses = "relative data-disabled:pointer-events-none data-disabled:opacity-50";
+const itemClasses = "relative data-disabled:cursor-not-allowed data-disabled:opacity-50";
 const itemOrientationClasses = {
 	horizontal: "flex min-w-0 flex-1 items-center last:flex-initial",
 	vertical: "flex flex-col"
@@ -73,7 +73,7 @@ const itemVerticalGapClasses = {
 	md: "[&:not(:last-child)]:pb-6",
 	lg: "[&:not(:last-child)]:pb-8"
 };
-const triggerClasses = "group/trigger grid cursor-pointer select-none grid-cols-[auto_1fr] items-center gap-y-0.5 rounded-md text-start transition-colors duration-150 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:pointer-events-none data-disabled:opacity-50";
+const triggerClasses = "group/trigger grid cursor-pointer select-none grid-cols-[auto_1fr] items-center gap-y-0.5 rounded-md text-start transition-colors duration-150 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:cursor-not-allowed data-disabled:opacity-50";
 const triggerGapClasses = {
 	sm: "gap-x-2",
 	md: "gap-x-2.5",

package/dist/components/Switch/Switch.js

@@ -3,7 +3,7 @@ import { forwardRef, useId } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Switch } from "@base-ui/react/switch";
 //#region src/components/Switch/Switch.tsx
-const trackClasses = "inline-flex shrink-0 cursor-pointer select-none items-center rounded-full border border-border bg-muted p-px transition-colors duration-150 hover:border-slate-300 hover:bg-slate-200 data-checked:border-primary data-checked:bg-primary hover:data-checked:border-primary-700 hover:data-checked:bg-primary-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring aria-invalid:border-destructive data-invalid:border-destructive aria-invalid:focus-visible:outline-destructive data-invalid:focus-visible:outline-destructive data-readonly:cursor-default disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50";
+const trackClasses = "inline-flex shrink-0 cursor-pointer select-none items-center rounded-full border border-border bg-muted p-px transition-colors duration-150 hover:border-slate-300 hover:bg-slate-200 data-checked:border-primary data-checked:bg-primary hover:data-checked:border-primary-700 hover:data-checked:bg-primary-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring aria-invalid:border-destructive data-invalid:border-destructive aria-invalid:focus-visible:outline-destructive data-invalid:focus-visible:outline-destructive data-readonly:cursor-default disabled:cursor-not-allowed disabled:opacity-50 data-disabled:cursor-not-allowed data-disabled:opacity-50";
 const trackSizeClasses = {
 	sm: "h-4 w-7",
 	md: "h-5 w-9",
@@ -71,9 +71,9 @@ const Switch$1 = forwardRef(({ size = "md", label, description, labelPosition =
 		})]
 	});
 	return /* @__PURE__ */ jsxs("span", {
-		className: cn("inline-flex max-w-full flex-col gap-1 font-sans", "has-data-disabled:pointer-events-none has-data-disabled:opacity-50"),
+		className: cn("inline-flex max-w-full flex-col gap-1 font-sans", "has-data-disabled:cursor-not-allowed has-data-disabled:opacity-50"),
 		children: [hasLabel ? /* @__PURE__ */ jsx("label", {
-			className: cn("inline-flex cursor-pointer items-start gap-2", "has-data-readonly:cursor-default", labelPosition === "start" && "justify-between"),
+			className: cn("inline-flex cursor-pointer items-start gap-2", "has-data-disabled:cursor-not-allowed", "has-data-readonly:cursor-default", labelPosition === "start" && "justify-between"),
 			children: labelPosition === "start" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [labelText, control] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [control, labelText] })
 		}) : control, description != null && /* @__PURE__ */ jsx("span", {
 			id: descriptionId,

package/dist/components/Tabs/Tabs.js

@@ -22,7 +22,7 @@ const listIndicatorPositionClasses = {
 	start: "data-[orientation=vertical]:border-s",
 	end: "data-[orientation=vertical]:border-e"
 };
-const tabBaseClasses = "inline-flex shrink-0 cursor-pointer items-center justify-center whitespace-nowrap select-none rounded-md font-sans font-medium text-slate-600 transition-colors duration-150 hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[orientation=vertical]:justify-start";
+const tabBaseClasses = "inline-flex shrink-0 cursor-pointer items-center justify-center whitespace-nowrap select-none rounded-md font-sans font-medium text-slate-600 transition-colors duration-150 hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:cursor-not-allowed disabled:opacity-50 data-disabled:cursor-not-allowed data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[orientation=vertical]:justify-start";
 const tabSizeClasses = {
 	underline: {
 		sm: "h-8 gap-1.5 px-2.5 text-sm",

package/dist/components/Toggle/Toggle.js

@@ -5,7 +5,7 @@ import { Toggle } from "@base-ui/react/toggle";
 import { ToggleGroup } from "@base-ui/react/toggle-group";
 //#region src/components/Toggle/Toggle.tsx
 const ToggleGroupStyleContext = createContext(null);
-const baseClasses = "inline-flex items-center justify-center whitespace-nowrap select-none rounded-md font-sans font-medium text-slate-600 transition-colors duration-150 cursor-pointer hover:bg-muted hover:text-foreground active:bg-slate-200 data-pressed:bg-primary-100 data-pressed:text-primary-700 hover:data-pressed:bg-primary-200 active:data-pressed:bg-primary-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50";
+const baseClasses = "inline-flex items-center justify-center whitespace-nowrap select-none rounded-md font-sans font-medium text-slate-600 transition-colors duration-150 cursor-pointer hover:bg-muted hover:text-foreground active:bg-slate-200 data-pressed:bg-primary-100 data-pressed:text-primary-700 hover:data-pressed:bg-primary-200 active:data-pressed:bg-primary-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 disabled:cursor-not-allowed disabled:opacity-50 data-disabled:cursor-not-allowed data-disabled:opacity-50";
 const variantClasses = {
 	ghost: "bg-transparent",
 	outline: "border border-border bg-transparent data-pressed:border-primary-300"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcfusionz/arc-primitive-ui",
-  "version": "0.3.12",
+  "version": "0.3.14",
   "description": "ArcFusion primitive UI components",
   "license": "MIT",
   "type": "module",

package/src/styles/theme.css

@@ -50,18 +50,22 @@
   /* ---------------------------------------------------------------------
    * Motion
    * AI Loader uses an asymmetric 2.4s ambient rhythm. Processing combines a
-   * variable-speed 3.6s rotation, a strong whole-mark pulse, and a monochrome
-   * currentColor fill. Its satellites fade at peak speed and return as the
-   * rotation eases. The four-point path itself never morphs. Skeleton's wave
+   * four eased quarter-turn beats shared by the core and satellites across a
+   * 4.8s revolution, a strong core pulse, and a monochrome currentColor fill.
+   * The satellites soften at each beat's midpoint and return as the shared
+   * rotation eases; their staggered scale cycles peak at 140% and collapse to
+   * zero. The
+   * four-point path itself never morphs. Skeleton's wave
    * crosses a placeholder in 1.6s and rests off-canvas when motion is reduced.
    * Progress sweeps its indeterminate segment across the track in 1.8s;
    * reduced motion swaps the sweep for Tailwind's opacity pulse so activity
    * still reads without positional movement.
    * `motion-safe` leaves a still frame for reduced-motion users.
    * ------------------------------------------------------------------- */
-  --animate-ai-loader-rotate: ai-loader-rotate 3.6s infinite;
+  --animate-ai-loader-processing-spin: ai-loader-processing-spin 4.8s infinite;
   --animate-ai-loader-processing-pulse: ai-loader-processing-pulse 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
-  --animate-ai-loader-processing-satellite: ai-loader-processing-satellite 3.6s linear infinite;
+  --animate-ai-loader-processing-satellite: ai-loader-processing-satellite 4.8s linear infinite;
+  --animate-ai-loader-processing-spark: ai-loader-processing-spark 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
   --animate-ai-loader-core: ai-loader-core 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
   --animate-ai-loader-facet: ai-loader-facet 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
   --animate-ai-loader-spark: ai-loader-spark 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
@@ -178,28 +182,6 @@
   }
 }
 
-@keyframes ai-loader-rotate {
-  0% {
-    transform: rotate(0deg);
-    animation-timing-function: cubic-bezier(0.45, 0, 0.75, 0.35);
-  }
-  28% {
-    transform: rotate(60deg);
-    animation-timing-function: cubic-bezier(0.15, 0.75, 0.25, 1);
-  }
-  58% {
-    transform: rotate(220deg);
-    animation-timing-function: cubic-bezier(0.55, 0, 0.8, 0.45);
-  }
-  76% {
-    transform: rotate(276deg);
-    animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
 @keyframes ai-loader-processing-pulse {
   0%,
   100% {
@@ -220,18 +202,43 @@
   }
 }
 
+/* Four eased quarter turns create a repeatable visual beat. The fourfold core
+   reaches the same upright brand-mark orientation at every 1.2s boundary. */
+@keyframes ai-loader-processing-spin {
+  0% {
+    transform: rotate(0deg);
+    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  }
+  25% {
+    transform: rotate(90deg);
+    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  }
+  50% {
+    transform: rotate(180deg);
+    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  }
+  75% {
+    transform: rotate(270deg);
+    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
 @keyframes ai-loader-processing-satellite {
   0%,
-  18%,
+  25%,
+  50%,
+  75%,
   100% {
     opacity: 1;
   }
-  28%,
-  38% {
-    opacity: 0;
-  }
-  58% {
-    opacity: 1;
+  12.5%,
+  37.5%,
+  62.5%,
+  87.5% {
+    opacity: 0.35;
   }
 }
 
@@ -284,6 +291,30 @@
   }
 }
 
+@keyframes ai-loader-processing-spark {
+  0%,
+  100% {
+    opacity: 0;
+    transform: scale(0);
+  }
+  18% {
+    opacity: 0.35;
+    transform: scale(0.5);
+  }
+  42% {
+    opacity: 1;
+    transform: scale(1.4);
+  }
+  62% {
+    opacity: 0.75;
+    transform: scale(1.05);
+  }
+  82% {
+    opacity: 0;
+    transform: scale(0);
+  }
+}
+
 @keyframes ai-loader-spark {
   0%,
   100% {