@stll/ui 0.28.2 → 0.29.1

package/dist/components/button.d.ts

@@ -1,9 +1,22 @@
 import { OverlayLayer } from "../lib/overlay-layer.js";
-import { buttonVariants } from "./button-variants.js";
 import * as React$1 from "react";
 import { useRender } from "@base-ui/react/use-render";
 import { VariantProps } from "class-variance-authority";
 //#region src/components/button.d.ts
+/**
+ * Disabled styling for a button that is only `aria-disabled`.
+ *
+ * The `disabled:` utilities below are CSS `:disabled`, which cannot match an
+ * element that carries no native `disabled` attribute, and `pointer-events-none`
+ * is deliberately not repeated: that rule is the reason a disabled button's
+ * tooltip can never open. Matches the treatment `disabled:opacity-64` gives, and
+ * swaps the cursor so the control still reads as unavailable on hover.
+ */
+declare const buttonAccessibleDisabledClass = "cursor-not-allowed opacity-64";
+declare const buttonVariants: (props?: ({
+  size?: "default" | "chip" | "icon" | "icon-lg" | "icon-sm" | "icon-xl" | "icon-xs" | "lg" | "sm" | "xl" | "xs" | null | undefined;
+  variant?: "link" | "default" | "destructive" | "destructive-outline" | "destructive-ghost" | "ghost" | "muted" | "outline" | "secondary" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type ButtonProps = {
   variant?: VariantProps<typeof buttonVariants>["variant"];
   size?: VariantProps<typeof buttonVariants>["size"];
@@ -17,4 +30,4 @@ type ButtonProps = {
 } & useRender.ComponentProps<"button">;
 declare function Button({ className, variant, size, render, loading, children, disabled, tooltip, tooltipLayer, ...props }: ButtonProps): React$1.JSX.Element;
 //#endregion
-export { Button };
+export { Button, buttonAccessibleDisabledClass, buttonVariants };

package/dist/components/button.js

@@ -2,12 +2,54 @@
 import { cn } from "../lib/utils.js";
 import { renderTooltipTrigger } from "./tooltip-trigger-helper.js";
 import { BUTTON_DISPOSITION, blockDisabledActivation, blockDisabledKeyActivation, resolveButtonDisposition } from "../lib/button-disposition.js";
-import { buttonVariants } from "./button-variants.js";
 import { LoaderIcon } from "lucide-react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
+import { cva } from "class-variance-authority";
 //#region src/components/button.tsx
+/**
+* Disabled styling for a button that is only `aria-disabled`.
+*
+* The `disabled:` utilities below are CSS `:disabled`, which cannot match an
+* element that carries no native `disabled` attribute, and `pointer-events-none`
+* is deliberately not repeated: that rule is the reason a disabled button's
+* tooltip can never open. Matches the treatment `disabled:opacity-64` gives, and
+* swaps the cursor so the control still reads as unavailable on hover.
+*/
+const buttonAccessibleDisabledClass = "cursor-not-allowed opacity-64";
+const buttonVariants = cva("focus-visible:ring-ring focus-visible:ring-offset-background relative inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 rounded-lg border text-base font-medium whitespace-nowrap transition-shadow outline-none before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] focus-visible:ring-2 focus-visible:ring-offset-1 disabled:pointer-events-none disabled:opacity-64 sm:text-sm pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0 [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4", {
+	defaultVariants: {
+		size: "default",
+		variant: "default"
+	},
+	variants: {
+		size: {
+			chip: "h-7 gap-1.5 rounded-full px-2.5 text-xs before:rounded-full sm:text-xs",
+			default: "h-9 px-[calc(--spacing(3)-1px)] sm:h-8",
+			icon: "size-9 sm:size-8",
+			"icon-lg": "size-10 sm:size-9",
+			"icon-sm": "size-8 sm:size-7",
+			"icon-xl": "size-11 sm:size-10 [&_svg:not([class*='size-'])]:size-5 sm:[&_svg:not([class*='size-'])]:size-4.5",
+			"icon-xs": "size-7 rounded-md before:rounded-[calc(var(--radius-md)-1px)] sm:size-6 not-in-data-[slot=input-group]:[&_svg:not([class*='size-'])]:size-4 sm:not-in-data-[slot=input-group]:[&_svg:not([class*='size-'])]:size-3.5",
+			lg: "h-10 px-[calc(--spacing(3.5)-1px)] sm:h-9",
+			sm: "h-8 gap-1.5 px-[calc(--spacing(2.5)-1px)] text-sm sm:h-7 sm:text-xs",
+			xl: "h-11 px-[calc(--spacing(4)-1px)] text-lg sm:h-10 sm:text-base [&_svg:not([class*='size-'])]:size-5 sm:[&_svg:not([class*='size-'])]:size-4.5",
+			xs: "h-7 gap-1 rounded-md px-[calc(--spacing(2)-1px)] text-sm before:rounded-[calc(var(--radius-md)-1px)] sm:h-6 sm:text-xs [&_svg:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-3.5"
+		},
+		variant: {
+			default: "border-primary bg-primary text-primary-foreground shadow-primary/24 [:hover,[data-pressed]]:bg-primary/90 shadow-xs not-disabled:inset-shadow-[0_1px_--theme(--color-white/16%)] [:active,[data-pressed]]:inset-shadow-[0_1px_--theme(--color-black/8%)] [:disabled,:active,[data-pressed]]:shadow-none",
+			destructive: "border-destructive/32 bg-destructive/10 text-destructive-foreground shadow-destructive/8 [:hover,[data-pressed]]:border-destructive/40 [:hover,[data-pressed]]:bg-destructive/14 [:active,[data-pressed]]:bg-destructive/18 shadow-xs not-dark:bg-clip-padding not-disabled:not-active:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] [:disabled,:active,[data-pressed]]:shadow-none",
+			"destructive-outline": "border-input bg-popover text-destructive-foreground dark:bg-input/32 [:hover,[data-pressed]]:border-destructive/32 [:hover,[data-pressed]]:bg-destructive/4 shadow-xs/5 not-dark:bg-clip-padding not-disabled:not-active:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] dark:not-disabled:before:shadow-[0_-1px_--theme(--color-white/2%)] dark:not-disabled:not-active:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] [:disabled,:active,[data-pressed]]:shadow-none",
+			"destructive-ghost": "text-destructive data-pressed:bg-destructive/10 [:hover,[data-pressed]]:bg-destructive/10 border-transparent",
+			ghost: "text-foreground data-pressed:bg-accent [:hover,[data-pressed]]:bg-accent border-transparent",
+			link: "border-transparent underline-offset-4 [:hover,[data-pressed]]:underline",
+			muted: "text-muted-foreground data-pressed:bg-accent data-pressed:text-foreground [:hover,[data-pressed]]:bg-accent [:hover,[data-pressed]]:text-foreground border-transparent",
+			outline: "border-input bg-popover text-foreground dark:bg-input/32 [:hover,[data-pressed]]:bg-accent/50 dark:[:hover,[data-pressed]]:bg-input/64 shadow-xs/5 not-dark:bg-clip-padding not-disabled:not-active:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] dark:not-disabled:before:shadow-[0_-1px_--theme(--color-white/2%)] dark:not-disabled:not-active:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] [:disabled,:active,[data-pressed]]:shadow-none",
+			secondary: "bg-secondary text-secondary-foreground [:active,[data-pressed]]:bg-secondary/80 [:hover,[data-pressed]]:bg-secondary/90 border-transparent"
+		}
+	}
+});
 function Button({ className, variant, size, render, loading, children, disabled, tooltip, tooltipLayer, ...props }) {
 	const typeValue = render ? void 0 : "button";
 	const tooltipContent = tooltip ?? props["aria-label"] ?? props.title;
@@ -53,4 +95,4 @@ function Button({ className, variant, size, render, loading, children, disabled,
 	});
 }
 //#endregion
-export { Button };
+export { Button, buttonAccessibleDisabledClass, buttonVariants };

package/dist/components/color-picker.js

@@ -147,12 +147,12 @@ const CustomColorControls = ({ handleInputChange, handlePickerChange, inputHex,
 	className: "flex items-center gap-1.5",
 	children: [
 		/* @__PURE__ */ jsx("span", {
-			className: "text-muted-foreground text-[11px]",
+			className: "text-muted-foreground text-2xs",
 			children: "#"
 		}),
 		/* @__PURE__ */ jsx("input", {
 			"aria-label": "Custom hex color",
-			className: "border-input bg-background text-foreground h-6 flex-1 rounded border px-1.5 font-mono text-[11px] outline-none",
+			className: "border-input bg-background text-foreground text-2xs h-6 flex-1 rounded border px-1.5 font-mono outline-none",
 			dir: "ltr",
 			maxLength: 6,
 			onChange: (event) => handleInputChange(event.target.value),
@@ -248,7 +248,7 @@ const ColorPickerContent = ({ value, onSelect, onClear, presets, columns, defaul
 			onClear && /* @__PURE__ */ jsxs(Popover.Close, {
 				render: /* @__PURE__ */ jsx("button", {
 					"aria-label": "No color",
-					className: "text-muted-foreground hover:bg-accent hover:text-accent-foreground flex h-6 w-full items-center gap-1.5 rounded px-1 text-[11px] transition-colors",
+					className: "text-muted-foreground hover:bg-accent hover:text-accent-foreground text-2xs flex h-6 w-full items-center gap-1.5 rounded px-1 transition-colors",
 					onClick: onClear,
 					type: "button"
 				}),
@@ -271,7 +271,7 @@ const ColorPickerContent = ({ value, onSelect, onClear, presets, columns, defaul
 				}, preset.value))
 			}),
 			!expanded ? /* @__PURE__ */ jsxs("button", {
-				className: "text-muted-foreground hover:text-foreground flex items-center justify-center gap-1 py-0.5 text-[11px] transition-colors",
+				className: "text-muted-foreground hover:text-foreground text-2xs flex items-center justify-center gap-1 py-0.5 transition-colors",
 				onClick: () => setExpanded(true),
 				type: "button",
 				children: [moreLabel, /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-3" })]

package/dist/components/composer.d.ts

@@ -69,7 +69,7 @@ export declare const COMPOSER_SEND_BUTTON_CLASS = "bg-foreground text-background
  * law home's scope and jurisdiction): quiet text with a hover surface, so
  * the row stays subordinate to the box above it.
  */
-export declare const COMPOSER_PICKER_TRIGGER_CLASS = "text-muted-foreground hover:text-foreground hover:bg-accent inline-flex min-w-0 shrink items-center gap-1 rounded-md px-1.5 py-0.5 text-[11px] transition-colors";
+export declare const COMPOSER_PICKER_TRIGGER_CLASS = "text-muted-foreground hover:text-foreground hover:bg-accent inline-flex min-w-0 shrink items-center gap-1 rounded-md px-1.5 py-0.5 text-2xs transition-colors";
 type ComposerStatusRowProps = {
   /** Left cluster: matter picker, web-search / anonymize toggles, ... */
   start?: ReactNode | undefined;

package/dist/components/composer.js

@@ -73,7 +73,7 @@ const COMPOSER_SEND_BUTTON_CLASS = "bg-foreground text-background hover:bg-foreg
 * law home's scope and jurisdiction): quiet text with a hover surface, so
 * the row stays subordinate to the box above it.
 */
-const COMPOSER_PICKER_TRIGGER_CLASS = "text-muted-foreground hover:text-foreground hover:bg-accent inline-flex min-w-0 shrink items-center gap-1 rounded-md px-1.5 py-0.5 text-[11px] transition-colors";
+const COMPOSER_PICKER_TRIGGER_CLASS = "text-muted-foreground hover:text-foreground hover:bg-accent inline-flex min-w-0 shrink items-center gap-1 rounded-md px-1.5 py-0.5 text-2xs transition-colors";
 /**
 * The slim status row rendered beneath a composer box: a `text-xs` row with
 * a start cluster and an end slot pinned to the far edge. Shared by every

package/dist/components/date-picker-popover.js

@@ -355,8 +355,8 @@ const DatePickerPopoverContent = ({ id, labelledBy, value: rawValue, onChange, l
 				})
 			]
 		}), /* @__PURE__ */ jsx(PopoverPopup, {
-			className: "*:data-[slot=popover-viewport]:p-2!",
 			layer,
+			padding: "sm",
 			side: "bottom",
 			sideOffset: 4,
 			children: /* @__PURE__ */ jsxs("div", {
@@ -403,7 +403,7 @@ const DatePickerPopoverContent = ({ id, labelledBy, value: rawValue, onChange, l
 						role: "row",
 						"aria-hidden": "true",
 						children: weekdays.map((weekday) => /* @__PURE__ */ jsx("span", {
-							className: cn("py-1 text-center text-[10px]", weekday.isWeekend ? "text-muted-foreground" : "text-foreground-label"),
+							className: cn("text-3xs py-1 text-center", weekday.isWeekend ? "text-muted-foreground" : "text-foreground-label"),
 							children: weekday.label
 						}, weekday.label))
 					}), /* @__PURE__ */ jsx("div", {
@@ -510,7 +510,7 @@ const MonthGrid = ({ locale, viewYear, currentMonth, currentYear, onSelect, toda
 					type: "button",
 					children: [!/^\d/u.test(labels[month] ?? "") && /* @__PURE__ */ jsx("span", {
 						"aria-hidden": "true",
-						className: cn("me-1 text-[10px] tabular-nums opacity-50", !isSelected && "text-muted-foreground"),
+						className: cn("text-3xs me-1 tabular-nums opacity-50", !isSelected && "text-muted-foreground"),
 						children: month + 1
 					}), labels[month]]
 				}, month);

package/dist/components/input-group.d.ts

@@ -5,7 +5,7 @@ import { VariantProps } from "class-variance-authority";
 //#region src/components/input-group.d.ts
 declare const InputGroup: ({ className, ...props }: React$1.ComponentProps<"div">) => React$1.JSX.Element;
 declare const inputGroupAddonVariants: (props?: ({
-  align?: "inline-start" | "block-end" | "block-start" | "inline-end" | null | undefined;
+  align?: "inline-end" | "inline-start" | "block-start" | "block-end" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare const InputGroupAddon: ({ className, align, ...props }: React$1.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) => React$1.JSX.Element;
 declare const InputGroupText: ({ className, ...props }: React$1.ComponentProps<"span">) => React$1.JSX.Element;

package/dist/components/loader.js

@@ -38,7 +38,7 @@ const LoaderState = ({ label, detail, hint, className }) => /* @__PURE__ */ jsxs
 				children: detail
 			}),
 			hint !== void 0 && /* @__PURE__ */ jsx("p", {
-				className: "text-muted-foreground text-[11px] text-pretty",
+				className: "text-muted-foreground text-2xs text-pretty",
 				children: hint
 			})
 		]

package/dist/components/outline-rail.js

@@ -315,7 +315,7 @@ const OutlineRail = ({ items, scrollContainerRef, resolvePct, onJump, activeId,
 					})] })
 				}), /* @__PURE__ */ jsx(TooltipPopup, { children: outlineEntryText(node.item) })] }),
 				node.item.meta !== void 0 && /* @__PURE__ */ jsx("span", {
-					className: "text-foreground-placeholder shrink-0 ps-2 text-[11px] tabular-nums",
+					className: "text-foreground-placeholder text-2xs shrink-0 ps-2 tabular-nums",
 					children: node.item.meta
 				})
 			]

package/dist/components/pagination.js

@@ -1,6 +1,6 @@
 "use client";
 import { cn } from "../lib/utils.js";
-import { buttonVariants } from "./button-variants.js";
+import { buttonVariants } from "./button.js";
 import { DirectionalIcon } from "./directional-icon.js";
 import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/components/popover.d.ts

@@ -8,7 +8,20 @@ declare const Popover: typeof Popover$1.Root;
 declare function PopoverTrigger({ tooltip, ...props }: Popover$1.Trigger.Props & {
   tooltip?: React$1.ReactNode;
 }): React$1.JSX.Element;
-declare const PopoverPopup: ({ children, className, side, align, sideOffset, alignOffset, tooltipStyle, anchor, layer, ...props }: Popover$1.Popup.Props & {
+/**
+ * Viewport padding. The inline value also feeds the page-width calculation of
+ * the viewport, so both axes change together.
+ */
+declare const POPOVER_PADDING: {
+  readonly none: "py-0 [--viewport-inline-padding:0px]";
+  readonly xs: "py-1 [--viewport-inline-padding:--spacing(1)]";
+  readonly sm: "py-2 [--viewport-inline-padding:--spacing(2)]";
+  readonly md: "py-3 [--viewport-inline-padding:--spacing(3)]";
+  readonly default: "py-4 [--viewport-inline-padding:--spacing(4)]";
+};
+type PopoverPadding = keyof typeof POPOVER_PADDING;
+declare const PopoverPopup: ({ children, className, side, align, sideOffset, alignOffset, tooltipStyle, padding, anchor, layer, ...props }: Popover$1.Popup.Props & {
+  padding?: PopoverPadding;
   side?: Popover$1.Positioner.Props["side"];
   align?: Popover$1.Positioner.Props["align"];
   sideOffset?: Popover$1.Positioner.Props["sideOffset"];

package/dist/components/popover.js

@@ -17,7 +17,18 @@ function PopoverTrigger({ tooltip, ...props }) {
 		})
 	});
 }
-const PopoverPopup = ({ children, className, side = "bottom", align = "center", sideOffset = 4, alignOffset = 0, tooltipStyle = false, anchor, layer = "default", ...props }) => /* @__PURE__ */ jsx(Popover$1.Portal, { children: /* @__PURE__ */ jsx(Popover$1.Positioner, {
+/**
+* Viewport padding. The inline value also feeds the page-width calculation of
+* the viewport, so both axes change together.
+*/
+const POPOVER_PADDING = {
+	none: "py-0 [--viewport-inline-padding:0px]",
+	xs: "py-1 [--viewport-inline-padding:--spacing(1)]",
+	sm: "py-2 [--viewport-inline-padding:--spacing(2)]",
+	md: "py-3 [--viewport-inline-padding:--spacing(3)]",
+	default: "py-4 [--viewport-inline-padding:--spacing(4)]"
+};
+const PopoverPopup = ({ children, className, side = "bottom", align = "center", sideOffset = 4, alignOffset = 0, tooltipStyle = false, padding = "default", anchor, layer = "default", ...props }) => /* @__PURE__ */ jsx(Popover$1.Portal, { children: /* @__PURE__ */ jsx(Popover$1.Positioner, {
 	align,
 	alignOffset,
 	anchor,
@@ -31,7 +42,7 @@ const PopoverPopup = ({ children, className, side = "bottom", align = "center",
 		"data-slot": "popover-popup",
 		...props,
 		children: /* @__PURE__ */ jsx(Popover$1.Viewport, {
-			className: cn("relative size-full max-h-(--available-height) overflow-clip px-(--viewport-inline-padding) py-4 outline-none [--viewport-inline-padding:--spacing(4)] **:data-current:w-[calc(var(--popup-width)-2*var(--viewport-inline-padding)-2px)] **:data-current:opacity-100 **:data-current:transition-opacity **:data-current:data-ending-style:opacity-0 data-instant:transition-none **:data-previous:w-[calc(var(--popup-width)-2*var(--viewport-inline-padding)-2px)] **:data-previous:opacity-100 **:data-previous:transition-opacity **:data-previous:data-ending-style:opacity-0 **:data-current:data-starting-style:opacity-0 **:data-previous:data-starting-style:opacity-0", tooltipStyle ? "py-1 [--viewport-inline-padding:--spacing(2)]" : "not-data-transitioning:overflow-y-auto"),
+			className: cn("relative size-full max-h-(--available-height) overflow-clip px-(--viewport-inline-padding) outline-none **:data-current:w-[calc(var(--popup-width)-2*var(--viewport-inline-padding)-2px)] **:data-current:opacity-100 **:data-current:transition-opacity **:data-current:data-ending-style:opacity-0 data-instant:transition-none **:data-previous:w-[calc(var(--popup-width)-2*var(--viewport-inline-padding)-2px)] **:data-previous:opacity-100 **:data-previous:transition-opacity **:data-previous:data-ending-style:opacity-0 **:data-current:data-starting-style:opacity-0 **:data-previous:data-starting-style:opacity-0", tooltipStyle ? "py-1 [--viewport-inline-padding:--spacing(2)]" : [POPOVER_PADDING[padding], "not-data-transitioning:overflow-y-auto"]),
 			"data-slot": "popover-viewport",
 			children
 		})

package/dist/components/select.js

@@ -40,7 +40,7 @@ const SelectTrigger = ({ className, size = CONTROL_SIZE.default, children, ...pr
 	})]
 });
 const SELECT_TRIGGER_SIZE_CLASS_NAMES = {
-	[CONTROL_SIZE.sm]: "min-h-8 gap-1.5 px-[calc(--spacing(2.5)-1px)] sm:min-h-7",
+	[CONTROL_SIZE.sm]: "min-h-8 gap-1.5 px-[calc(--spacing(2.5)-1px)] text-sm sm:min-h-7 sm:text-xs",
 	[CONTROL_SIZE.default]: void 0,
 	[CONTROL_SIZE.lg]: "min-h-10 sm:min-h-9"
 };

package/dist/components/sidebar.d.ts

@@ -30,7 +30,7 @@ declare function useSidebar(): SidebarContextProps;
  * left for the content column. Mobile reports 0: there the sidebar is an
  * overlay sheet and occupies no layout width.
  */
-declare function useSidebarInlineSize(): 0 | 48 | 256;
+declare function useSidebarInlineSize(): 0 | 256 | 48;
 declare const SidebarProvider: ({ defaultOpen, forceCollapsed, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }: React.ComponentProps<"div"> & {
   defaultOpen?: boolean;
   forceCollapsed?: boolean;
@@ -83,7 +83,7 @@ declare const SidebarMenu: ({ className, ...props }: React.ComponentProps<"ul">)
 declare const SidebarMenuItem: ({ className, ...props }: React.ComponentProps<"li">) => import("react").JSX.Element;
 declare const sidebarMenuButtonVariants: (props?: ({
   variant?: "default" | "outline" | null | undefined;
-  size?: "sm" | "default" | "lg" | "rail" | null | undefined;
+  size?: "default" | "lg" | "sm" | "rail" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare const SidebarMenuButton: ({ asChild, isActive, variant, size, tooltip, className, ...props }: React.ComponentProps<"button"> & {
   asChild?: boolean;

package/dist/components/toast.js

@@ -1,6 +1,6 @@
 "use client";
 import { cn } from "../lib/utils.js";
-import { buttonVariants } from "./button-variants.js";
+import { buttonVariants } from "./button.js";
 import { CircleAlertIcon, CircleCheckIcon, InfoIcon, LoaderCircleIcon, TriangleAlertIcon, XIcon } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React$1 from "react";

package/dist/index.d.ts

@@ -10,8 +10,7 @@ import { Avatar, AvatarFallback, AvatarImage } from "./components/avatar.js";
 import { BidiDirection, BidiText, BidiTextProps, UserText } from "./components/bidi-text.js";
 import { DiscordLogoIcon, GitHubLogoIcon } from "./components/brand-icons.js";
 import { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "./components/breadcrumb.js";
-import { buttonAccessibleDisabledClass, buttonVariants } from "./components/button-variants.js";
-import { Button } from "./components/button.js";
+import { Button, buttonAccessibleDisabledClass, buttonVariants } from "./components/button.js";
 import { Checkbox } from "./components/checkbox.js";
 import { ColorPicker, ColorPickerContent, ColorPickerContentProps, ColorPickerProps, ColorPreset, DEFAULT_PRESETS } from "./components/color-picker.js";
 import { CONTROL_SIZE, CONTROL_SIZES, ControlSize } from "./lib/control-size.js";

package/dist/index.js

@@ -7,8 +7,7 @@ import { Tooltip, TooltipContent as TooltipPopup, TooltipCreateHandle, TooltipPr
 import { AlertDialog, AlertDialogBackdrop, AlertDialogClose, AlertDialogContent as AlertDialogPopup, AlertDialogCreateHandle, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogPanel, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertDialogViewport } from "./components/alert-dialog.js";
 import { useIsMobile } from "./hooks/use-mobile.js";
 import { Inspector, InspectorActions, InspectorContent, InspectorDescription, InspectorEmptyRow, InspectorHeader, InspectorHeaderText, InspectorProperty, InspectorPropertyLabel, InspectorPropertyList, InspectorPropertyValue, InspectorRail, InspectorRailCell, InspectorRailContent, InspectorRailFooter, InspectorRailIconButton, InspectorRailTab, InspectorSection, InspectorSectionTitle, InspectorTitle } from "./inspector/chrome.js";
-import { buttonAccessibleDisabledClass, buttonVariants } from "./components/button-variants.js";
-import { Button } from "./components/button.js";
+import { Button, buttonAccessibleDisabledClass, buttonVariants } from "./components/button.js";
 import { ScrollArea, ScrollBar } from "./components/scroll-area.js";
 import { Sheet, SheetBackdrop, SheetClose, SheetContent as SheetPopup, SheetDescription, SheetFooter, SheetHeader, SheetPanel, SheetPortal, SheetTitle, SheetTrigger } from "./components/sheet.js";
 import { WorkspaceEndRail, WorkspaceShell } from "./components/workspace-shell.js";

package/dist/inspector/chrome.js

@@ -94,7 +94,7 @@ const InspectorTitle = ({ children, className, ...props }) => /* @__PURE__ */ js
 	children
 });
 const InspectorDescription = ({ className, ...props }) => /* @__PURE__ */ jsx("p", {
-	className: cn("text-muted-foreground truncate text-[11px] [unicode-bidi:isolate]", className),
+	className: cn("text-muted-foreground text-2xs truncate [unicode-bidi:isolate]", className),
 	"data-slot": "inspector-description",
 	dir: "auto",
 	...props

package/dist/lib/control-size.d.ts

@@ -5,6 +5,6 @@ declare const CONTROL_SIZE: Readonly<{
   readonly lg: "lg";
 }>;
 type ControlSize = (typeof CONTROL_SIZE)[keyof typeof CONTROL_SIZE];
-declare const CONTROL_SIZES: readonly ("sm" | "default" | "lg")[];
+declare const CONTROL_SIZES: readonly ("default" | "lg" | "sm")[];
 //#endregion
 export { CONTROL_SIZE, CONTROL_SIZES, type ControlSize };

package/dist/review/review-comment-card.js

@@ -22,7 +22,7 @@ const ReviewCommentCard = ({ author, timestamp, formattedTime, body, anchorText,
 			className: "min-w-0 flex-1",
 			children: [
 				/* @__PURE__ */ jsxs("p", {
-					className: "text-muted-foreground flex min-w-0 items-baseline gap-1.5 text-[11px]",
+					className: "text-muted-foreground text-2xs flex min-w-0 items-baseline gap-1.5",
 					children: [/* @__PURE__ */ jsx(BidiText, {
 						as: "span",
 						className: "text-foreground-strong-muted truncate font-medium",
@@ -40,11 +40,11 @@ const ReviewCommentCard = ({ author, timestamp, formattedTime, body, anchorText,
 				}),
 				anchorText === void 0 || anchorText === "" ? null : /* @__PURE__ */ jsx(BidiText, {
 					as: "p",
-					className: "text-muted-foreground mt-0.5 truncate text-[11px] italic",
+					className: "text-muted-foreground text-2xs mt-0.5 truncate italic",
 					children: anchorText
 				}),
 				isStale && staleLabel !== void 0 ? /* @__PURE__ */ jsx("p", {
-					className: "text-muted-foreground mt-0.5 text-[11px]",
+					className: "text-muted-foreground text-2xs mt-0.5",
 					children: staleLabel
 				}) : null
 			]

package/dist/review/review-decision-actions.js

@@ -54,11 +54,10 @@ const renderControls = ({ acceptLabel, acceptTooltip, disabled, onAccept, onReje
 		case "dismissed":
 			if (onRevert === void 0 && onReopen === void 0) return null;
 			return /* @__PURE__ */ jsxs(Fragment, { children: [onRevert === void 0 ? null : /* @__PURE__ */ jsx(Button, {
-				className: "text-muted-foreground hover:text-foreground",
 				disabled,
 				onClick: onRevert,
 				size,
-				variant: "ghost",
+				variant: "muted",
 				children: revertLabel
 			}), onReopen === void 0 ? null : /* @__PURE__ */ jsx(Button, {
 				"aria-label": reopenLabel,

package/dist/review/review-status-badge.js

@@ -10,7 +10,7 @@ const ReviewStatusBadge = ({ tone, variant = "outline", size = "xs", icon, class
 });
 const REVIEW_STATUS_BADGE_BASE_CLASS = "inline-flex shrink-0 items-center rounded-full border font-medium whitespace-nowrap";
 const SIZE_CLASS = {
-	xs: "gap-1 px-1.5 py-0.5 text-[11px]",
+	xs: "gap-1 px-1.5 py-0.5 text-2xs",
 	sm: "gap-1.5 px-2 py-0.5 text-xs"
 };
 const TONE_CLASS = {

package/dist/styles/theme.css

@@ -20,6 +20,16 @@
   --font-sans:
     "DM Sans", "Noto Sans Arabic", ui-sans-serif, system-ui, sans-serif,
     "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  /* Below Tailwind's `text-xs`: badges, counts, and captions. */
+  --text-2xs: 0.6875rem;
+  --text-2xs--line-height: 1rem;
+  --text-3xs: 0.625rem;
+  --text-3xs--line-height: 0.875rem;
+  /* Floating surfaces (cards, previews, docked bars) share one elevation. */
+  --shadow-floating: 0 1px 2px rgb(0 0 0 / 0.04), 0 8px 24px rgb(0 0 0 / 0.06);
+  --shadow-floating-ring:
+    0 0 0 1px rgb(0 0 0 / 0.02), 0 1px 2px rgb(0 0 0 / 0.03),
+    0 8px 20px rgb(0 0 0 / 0.05);
   --color-background: var(--background);
   --color-foreground: var(--foreground);
   --color-sidebar-ring: var(--sidebar-ring);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stll/ui",
-  "version": "0.28.2",
+  "version": "0.29.1",
   "description": "Stella's design system: bidi-aware React primitives built on Base UI, the dockable inspector pane, and the Tailwind v4 theme they are styled with.",
   "keywords": [
     "base-ui",
@@ -73,10 +73,6 @@
       "types": "./dist/components/button.d.ts",
       "import": "./dist/components/button.js"
     },
-    "./button-variants": {
-      "types": "./dist/components/button-variants.d.ts",
-      "import": "./dist/components/button-variants.js"
-    },
     "./checkbox": {
       "types": "./dist/components/checkbox.d.ts",
       "import": "./dist/components/checkbox.js"
@@ -390,10 +386,6 @@
       "types": "./dist/components/button.d.ts",
       "import": "./dist/components/button.js"
     },
-    "./components/button-variants": {
-      "types": "./dist/components/button-variants.d.ts",
-      "import": "./dist/components/button-variants.js"
-    },
     "./components/checkbox": {
       "types": "./dist/components/checkbox.d.ts",
       "import": "./dist/components/checkbox.js"
@@ -618,7 +610,7 @@
     "@playwright/test": "^1.63.0",
     "@stll/typescript-config": "0.0.0",
     "@tailwindcss/vite": "4.3.3",
-    "@tanstack/react-virtual": "^3.14.11",
+    "@tanstack/react-virtual": "^3.14.12",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.7",
     "bun-types": "1.4.2",
@@ -634,7 +626,7 @@
     "@base-ui/react": "^1.7.0",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
-    "@tanstack/react-virtual": "^3.14.11",
+    "@tanstack/react-virtual": "^3.14.12",
     "react": ">=19",
     "react-dom": ">=19",
     "tailwindcss": "^4.3.0"

package/dist/components/button-variants.d.ts

@@ -1,16 +0,0 @@
-//#region src/components/button-variants.d.ts
-/**
- * Disabled styling for a button that is only `aria-disabled`.
- *
- * The `disabled:` utilities below are CSS `:disabled`, which cannot match an
- * element that carries no native `disabled` attribute, and `pointer-events-none`
- * is deliberately not repeated: that rule is the reason a disabled button's
- * tooltip can never open. Matches the treatment `disabled:opacity-64` gives, and
- * swaps the cursor so the control still reads as unavailable on hover.
- */
-export declare const buttonAccessibleDisabledClass = "cursor-not-allowed opacity-64";
-export declare const buttonVariants: (props?: ({
-  size?: "sm" | "default" | "lg" | "icon" | "chip" | "icon-lg" | "icon-sm" | "icon-xl" | "icon-xs" | "xl" | "xs" | null | undefined;
-  variant?: "link" | "default" | "outline" | "destructive" | "destructive-outline" | "ghost" | "secondary" | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
-//#endregion

package/dist/components/button-variants.js

@@ -1,44 +0,0 @@
-import { cva } from "class-variance-authority";
-//#region src/components/button-variants.tsx
-/**
-* Disabled styling for a button that is only `aria-disabled`.
-*
-* The `disabled:` utilities below are CSS `:disabled`, which cannot match an
-* element that carries no native `disabled` attribute, and `pointer-events-none`
-* is deliberately not repeated: that rule is the reason a disabled button's
-* tooltip can never open. Matches the treatment `disabled:opacity-64` gives, and
-* swaps the cursor so the control still reads as unavailable on hover.
-*/
-const buttonAccessibleDisabledClass = "cursor-not-allowed opacity-64";
-const buttonVariants = cva("focus-visible:ring-ring focus-visible:ring-offset-background relative inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 rounded-lg border text-base font-medium whitespace-nowrap transition-shadow outline-none before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] focus-visible:ring-2 focus-visible:ring-offset-1 disabled:pointer-events-none disabled:opacity-64 sm:text-sm pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0 [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4", {
-	defaultVariants: {
-		size: "default",
-		variant: "default"
-	},
-	variants: {
-		size: {
-			chip: "h-7 gap-1.5 rounded-full px-2.5 text-xs before:rounded-full sm:text-xs",
-			default: "h-9 px-[calc(--spacing(3)-1px)] sm:h-8",
-			icon: "size-9 sm:size-8",
-			"icon-lg": "size-10 sm:size-9",
-			"icon-sm": "size-8 sm:size-7",
-			"icon-xl": "size-11 sm:size-10 [&_svg:not([class*='size-'])]:size-5 sm:[&_svg:not([class*='size-'])]:size-4.5",
-			"icon-xs": "size-7 rounded-md before:rounded-[calc(var(--radius-md)-1px)] sm:size-6 not-in-data-[slot=input-group]:[&_svg:not([class*='size-'])]:size-4 sm:not-in-data-[slot=input-group]:[&_svg:not([class*='size-'])]:size-3.5",
-			lg: "h-10 px-[calc(--spacing(3.5)-1px)] sm:h-9",
-			sm: "h-8 gap-1.5 px-[calc(--spacing(2.5)-1px)] sm:h-7",
-			xl: "h-11 px-[calc(--spacing(4)-1px)] text-lg sm:h-10 sm:text-base [&_svg:not([class*='size-'])]:size-5 sm:[&_svg:not([class*='size-'])]:size-4.5",
-			xs: "h-7 gap-1 rounded-md px-[calc(--spacing(2)-1px)] text-sm before:rounded-[calc(var(--radius-md)-1px)] sm:h-6 sm:text-xs [&_svg:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-3.5"
-		},
-		variant: {
-			default: "border-primary bg-primary text-primary-foreground shadow-primary/24 [:hover,[data-pressed]]:bg-primary/90 shadow-xs not-disabled:inset-shadow-[0_1px_--theme(--color-white/16%)] [:active,[data-pressed]]:inset-shadow-[0_1px_--theme(--color-black/8%)] [:disabled,:active,[data-pressed]]:shadow-none",
-			destructive: "border-destructive/32 bg-destructive/10 text-destructive-foreground shadow-destructive/8 [:hover,[data-pressed]]:border-destructive/40 [:hover,[data-pressed]]:bg-destructive/14 [:active,[data-pressed]]:bg-destructive/18 shadow-xs not-dark:bg-clip-padding not-disabled:not-active:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] [:disabled,:active,[data-pressed]]:shadow-none",
-			"destructive-outline": "border-input bg-popover text-destructive-foreground dark:bg-input/32 [:hover,[data-pressed]]:border-destructive/32 [:hover,[data-pressed]]:bg-destructive/4 shadow-xs/5 not-dark:bg-clip-padding not-disabled:not-active:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] dark:not-disabled:before:shadow-[0_-1px_--theme(--color-white/2%)] dark:not-disabled:not-active:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] [:disabled,:active,[data-pressed]]:shadow-none",
-			ghost: "text-foreground data-pressed:bg-accent [:hover,[data-pressed]]:bg-accent border-transparent",
-			link: "border-transparent underline-offset-4 [:hover,[data-pressed]]:underline",
-			outline: "border-input bg-popover text-foreground dark:bg-input/32 [:hover,[data-pressed]]:bg-accent/50 dark:[:hover,[data-pressed]]:bg-input/64 shadow-xs/5 not-dark:bg-clip-padding not-disabled:not-active:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] dark:not-disabled:before:shadow-[0_-1px_--theme(--color-white/2%)] dark:not-disabled:not-active:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] [:disabled,:active,[data-pressed]]:shadow-none",
-			secondary: "bg-secondary text-secondary-foreground [:active,[data-pressed]]:bg-secondary/80 [:hover,[data-pressed]]:bg-secondary/90 border-transparent"
-		}
-	}
-});
-//#endregion
-export { buttonAccessibleDisabledClass, buttonVariants };