@stll/ui 0.33.0 → 0.34.0

package/dist/components/button.d.ts

@@ -13,8 +13,8 @@ import { VariantProps } from "class-variance-authority";
  */
 declare const buttonAccessibleDisabledClass = "cursor-not-allowed opacity-64";
 declare const buttonVariants: (props?: ({
-  size?: "sm" | "default" | "lg" | "row" | "icon" | "chip" | "icon-lg" | "icon-sm" | "icon-xl" | "icon-xs" | "xl" | "xs" | null | undefined;
-  variant?: "link" | "default" | "muted" | "destructive" | "destructive-outline" | "destructive-ghost" | "ghost" | "outline" | "secondary" | null | undefined;
+  size?: "default" | "chip" | "icon" | "icon-lg" | "icon-sm" | "icon-xl" | "icon-xs" | "lg" | "row" | "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"];

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

@@ -1,12 +1,14 @@
-import * as React$1 from "react";
 //#region src/components/file-input.d.ts
-type FileInputProps = Omit<React$1.ComponentProps<"input">, "type" | "value" | "onChange" | "multiple" | "className"> & {
-  className?: string;
+type FileInputProps = {
+  accept?: string | undefined;
+  "aria-labelledby"?: string | undefined;
+  className?: string | undefined;
+  disabled?: boolean | undefined;
   file: File | null;
-  onFileChange: (file: File | null) => void;
+  onFileChange: (file: File) => void;
   chooseLabel: string;
   emptyLabel: string;
 };
-declare const FileInput: ({ className, disabled, file, onFileChange, chooseLabel, emptyLabel, "aria-labelledby": labelledBy, ...props }: FileInputProps) => React$1.JSX.Element;
+declare const FileInput: ({ accept, "aria-labelledby": labelledBy, className, disabled, file, onFileChange, chooseLabel, emptyLabel }: FileInputProps) => import("react").JSX.Element;
 //#endregion
 export { FileInput, type FileInputProps };

package/dist/components/file-input.js

@@ -1,49 +1,33 @@
 "use client";
 import { cn } from "../lib/utils.js";
 import { Button } from "./button.js";
+import { openFilePicker } from "../lib/file-picker.js";
 import { UploadIcon } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useId, useRef } from "react";
+import { useId } from "react";
 //#region src/components/file-input.tsx
-const FileInput = ({ className, disabled, file, onFileChange, chooseLabel, emptyLabel, "aria-labelledby": labelledBy, ...props }) => {
-	const inputRef = useRef(null);
+const FileInput = ({ accept, "aria-labelledby": labelledBy, className, disabled, file, onFileChange, chooseLabel, emptyLabel }) => {
 	const triggerId = useId();
 	return /* @__PURE__ */ jsxs("span", {
 		className: cn("flex min-w-0 items-center gap-3", className),
 		"data-slot": "file-input",
-		children: [
-			/* @__PURE__ */ jsx("input", {
-				"aria-hidden": "true",
-				className: "sr-only",
-				disabled,
-				ref: inputRef,
-				tabIndex: -1,
-				...props,
-				multiple: false,
-				onChange: (event) => {
-					const next = event.currentTarget.files?.item(0) ?? null;
-					event.currentTarget.value = "";
-					onFileChange(next);
-				},
-				type: "file",
-				value: void 0
+		children: [/* @__PURE__ */ jsxs(Button, {
+			"aria-labelledby": labelledBy ? `${labelledBy} ${triggerId}` : void 0,
+			"data-slot": "file-input-trigger",
+			disabled,
+			id: triggerId,
+			onClick: () => openFilePicker({
+				accept,
+				onPick: ([first]) => onFileChange(first)
 			}),
-			/* @__PURE__ */ jsxs(Button, {
-				"aria-labelledby": labelledBy ? `${labelledBy} ${triggerId}` : void 0,
-				"data-slot": "file-input-trigger",
-				disabled,
-				id: triggerId,
-				onClick: () => inputRef.current?.click(),
-				type: "button",
-				variant: "outline",
-				children: [/* @__PURE__ */ jsx(UploadIcon, { "aria-hidden": "true" }), chooseLabel]
-			}),
-			/* @__PURE__ */ jsx("span", {
-				className: "text-muted-foreground min-w-0 truncate text-sm",
-				"data-slot": "file-input-name",
-				children: file ? /* @__PURE__ */ jsx("bdi", { children: file.name }) : emptyLabel
-			})
-		]
+			type: "button",
+			variant: "outline",
+			children: [/* @__PURE__ */ jsx(UploadIcon, { "aria-hidden": "true" }), chooseLabel]
+		}), /* @__PURE__ */ jsx("span", {
+			className: "text-muted-foreground min-w-0 truncate text-sm",
+			"data-slot": "file-input-name",
+			children: file ? /* @__PURE__ */ jsx("bdi", { children: file.name }) : emptyLabel
+		})]
 	});
 };
 //#endregion

package/dist/components/outline-rail.js

@@ -267,7 +267,7 @@ const OutlineRail = ({ items, scrollContainerRef, resolvePct, onJump, activeId,
 		const highlighted = isActive || isHovered;
 		const indent = 8 + Math.min(node.item.level, maxLevel) * 12;
 		return /* @__PURE__ */ jsxs("li", { children: [/* @__PURE__ */ jsxs("div", {
-			className: cn("flex items-center rounded-md pe-2.5 transition-colors", !hasChildren && highlighted && "bg-accent"),
+			className: cn("flex items-center rounded-md pe-2.5", !hasChildren && highlighted && "bg-accent"),
 			...isActive ? { [ACTIVE_ROW_ATTRIBUTE]: "" } : {},
 			onMouseEnter: () => setHoveredId(node.item.id),
 			onMouseLeave: () => setHoveredId(null),
@@ -367,7 +367,7 @@ const OutlineRail = ({ items, scrollContainerRef, resolvePct, onJump, activeId,
 					return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsx("button", {
 						"aria-current": isActive ? "true" : void 0,
 						"aria-label": item.label,
-						className: cn("absolute end-0 rounded-full transition-[width,height,opacity,background-color] duration-150", isHovered || isActive ? "opacity-100" : "opacity-45 hover:opacity-90"),
+						className: cn("absolute end-0 rounded-full transition-[width,height,opacity] duration-150", isHovered || isActive ? "opacity-100" : "opacity-45 hover:opacity-90"),
 						onClick: () => jumpTo(item.id),
 						onMouseEnter: () => setHoveredId(item.id),
 						onMouseLeave: () => setHoveredId(null),

package/dist/components/segmented-icon-toggle.js

@@ -9,6 +9,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * the same across the app. */
 const SegmentedIconToggle = ({ value, options, onChange, size = "compact" }) => /* @__PURE__ */ jsx("div", {
 	className: cn("border-border/70 bg-muted/30 inline-flex shrink-0 items-center overflow-hidden rounded-md border p-0.5", size === "touch" ? "h-7 [@media(any-pointer:coarse)]:h-12" : "h-7"),
+	"data-slot": "segmented-icon-toggle",
 	children: options.map((option) => {
 		const Icon = option.icon;
 		const isActive = value === option.value;
@@ -17,6 +18,7 @@ const SegmentedIconToggle = ({ value, options, onChange, size = "compact" }) =>
 				"aria-label": option.label,
 				"aria-pressed": isActive,
 				className: cn("text-muted-foreground h-6 min-h-0 w-7 rounded-[4px] p-0", size === "touch" && "[@media(any-pointer:coarse)]:h-11 [@media(any-pointer:coarse)]:min-h-11 [@media(any-pointer:coarse)]:w-11", isActive && "bg-muted text-foreground ring-border/80 hover:bg-muted hover:text-foreground shadow-xs ring-1"),
+				"data-control-value": option.value,
 				onClick: () => onChange(option.value),
 				size: "icon-xs",
 				type: "button",

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 | 256 | 48;
+declare function useSidebarInlineSize(): 0 | 48 | 256;
 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/sidebar.js

@@ -174,7 +174,7 @@ const SidebarRail = ({ className, label = DEFAULT_TOGGLE_LABEL, "aria-label": ar
 	return /* @__PURE__ */ jsx("button", {
 		"aria-label": ariaLabel ?? label,
 		type: "button",
-		className: cn("hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 transition-[transform,background-color] ease-linear group-data-[side=left]:-end-4 group-data-[side=right]:start-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] sm:flex", "ltr:-translate-x-1/2 rtl:translate-x-1/2", "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize", "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize", "hover:group-data-[collapsible=offcanvas]:bg-sidebar", "group-data-[collapsible=offcanvas]:ltr:translate-x-0 group-data-[collapsible=offcanvas]:rtl:translate-x-0", "group-data-[collapsible=offcanvas]:group-data-[side=left]:after:end-full group-data-[collapsible=offcanvas]:group-data-[side=right]:after:start-full", "[[data-side=left][data-collapsible=offcanvas]_&]:-end-2", "[[data-side=right][data-collapsible=offcanvas]_&]:-start-2", className),
+		className: cn("hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 transition-transform ease-linear group-data-[side=left]:-end-4 group-data-[side=right]:start-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] sm:flex", "ltr:-translate-x-1/2 rtl:translate-x-1/2", "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize", "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize", "hover:group-data-[collapsible=offcanvas]:bg-sidebar", "group-data-[collapsible=offcanvas]:ltr:translate-x-0 group-data-[collapsible=offcanvas]:rtl:translate-x-0", "group-data-[collapsible=offcanvas]:group-data-[side=left]:after:end-full group-data-[collapsible=offcanvas]:group-data-[side=right]:after:start-full", "[[data-side=left][data-collapsible=offcanvas]_&]:-end-2", "[[data-side=right][data-collapsible=offcanvas]_&]:-start-2", className),
 		"data-sidebar": "rail",
 		"data-slot": "sidebar-rail",
 		onClick: toggleSidebar,
@@ -257,7 +257,7 @@ const SidebarMenuItem = ({ className, ...props }) => /* @__PURE__ */ jsx("li", {
 	"data-slot": "sidebar-menu-item",
 	...props
 });
-const sidebarMenuButtonVariants = cva("peer/menu-button ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-[active=true]:bg-accent data-[active=true]:text-sidebar-accent-foreground data-[active=true]:hover:bg-sidebar-accent data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-start text-sm outline-hidden transition-[width,height,padding,border-radius] group-has-data-[sidebar=menu-action]/menu-item:pe-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:font-medium [&>span:last-child]:truncate [&>span:last-child]:transition-opacity [&>span:last-child]:duration-200 group-data-[collapsible=icon]:[&>span:last-child]:opacity-0 [&>svg]:size-4 [&>svg]:shrink-0", {
+const sidebarMenuButtonVariants = cva("peer/menu-button ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-[active=true]:bg-accent data-[active=true]:text-sidebar-accent-foreground data-[active=true]:hover:bg-sidebar-accent data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-start text-sm outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pe-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:font-medium [&>span:last-child]:truncate [&>span:last-child]:transition-opacity [&>span:last-child]:duration-200 group-data-[collapsible=icon]:[&>span:last-child]:opacity-0 [&>svg]:size-4 [&>svg]:shrink-0", {
 	variants: {
 		variant: {
 			default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",

package/dist/components/tabs.js

@@ -33,7 +33,7 @@ const TabsList = ({ variant = "default", className, children, ref, ...props }) =
 	});
 };
 const TabsTab = ({ className, ...props }) => /* @__PURE__ */ jsx(Tabs$1.Tab, {
-	className: cn("hover:text-foreground focus-visible:ring-ring data-active:text-foreground relative flex h-9 shrink-0 grow cursor-pointer items-center justify-center gap-1.5 rounded-md border border-transparent px-[calc(--spacing(2.5)-1px)] text-base font-medium whitespace-nowrap transition-[color,background-color,box-shadow] outline-none focus-visible:ring-2 focus-visible:ring-inset data-disabled:pointer-events-none data-disabled:opacity-64 data-[orientation=vertical]:w-full data-[orientation=vertical]:justify-start sm:h-8 sm:text-sm [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4", className),
+	className: cn("hover:text-foreground focus-visible:ring-ring data-active:text-foreground relative flex h-9 shrink-0 grow cursor-pointer items-center justify-center gap-1.5 rounded-md border border-transparent px-[calc(--spacing(2.5)-1px)] text-base font-medium whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-disabled:pointer-events-none data-disabled:opacity-64 data-[orientation=vertical]:w-full data-[orientation=vertical]:justify-start sm:h-8 sm:text-sm [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4", className),
 	"data-slot": "tabs-tab",
 	...props
 });

package/dist/inspector/facet-bar.js

@@ -79,6 +79,8 @@ const InspectorFacetBar = ({ facet, facets, labels, disabledFacets, pulseSeq, ac
 	}
 	return /* @__PURE__ */ jsxs("div", {
 		className: cn("bg-background/85 supports-[backdrop-filter]:bg-background/65 sticky top-0 z-10 flex shrink-0 items-center gap-0.5 overflow-hidden border-b px-1.5 backdrop-blur", TOOLBAR_ROW_HEIGHT),
+		"data-active-facet": facet,
+		"data-slot": "inspector-facet-bar",
 		ref: containerRef,
 		children: [
 			visibleFacets.map((value) => /* @__PURE__ */ jsx(FacetChip, {
@@ -86,11 +88,13 @@ const InspectorFacetBar = ({ facet, facets, labels, disabledFacets, pulseSeq, ac
 				disabled: disabledFacets?.has(value) ?? false,
 				isActive: value === facet,
 				label: labels[value],
-				onSelect: () => onChange(value)
+				onSelect: () => onChange(value),
+				value
 			}, value)),
 			overflowing && /* @__PURE__ */ jsxs(Menu, { children: [/* @__PURE__ */ jsx(MenuTrigger, {
 				"aria-label": overflowMenuLabel,
 				className: "ms-auto",
+				"data-slot": "inspector-facet-overflow-trigger",
 				render: /* @__PURE__ */ jsx(Button, {
 					size: "icon-sm",
 					type: "button",
@@ -101,6 +105,7 @@ const InspectorFacetBar = ({ facet, facets, labels, disabledFacets, pulseSeq, ac
 				align: "end",
 				side: "bottom",
 				children: overflowFacets.map((value) => /* @__PURE__ */ jsx(MenuItem, {
+					"data-facet-overflow-value": value,
 					disabled: disabledFacets?.has(value) ?? false,
 					onClick: () => onChange(value),
 					children: labels[value]
@@ -112,6 +117,8 @@ const InspectorFacetBar = ({ facet, facets, labels, disabledFacets, pulseSeq, ac
 				ref: measureRef,
 				children: [facets.map((value) => /* @__PURE__ */ jsx("span", {
 					className: cn(CHIP_CLASS, INACTIVE_CHIP_CLASS),
+					"data-facet-option": value,
+					"data-facet-option-disabled": disabledFacets?.has(value) ? "" : void 0,
 					children: labels[value]
 				}, value)), /* @__PURE__ */ jsx("span", { className: "size-8 shrink-0 rounded-lg border sm:size-7" })]
 			})
@@ -152,10 +159,11 @@ const flashFacetChip = (el) => {
 };
 const CHIP_CLASS = "shrink-0 rounded-md px-1.5 py-1 text-xs font-medium whitespace-nowrap transition-colors";
 const INACTIVE_CHIP_CLASS = "text-muted-foreground hover:bg-muted hover:text-foreground";
-const FacetChip = ({ label, isActive, disabled, activeBadge, onSelect }) => /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+const FacetChip = ({ label, value, isActive, disabled, activeBadge, onSelect }) => /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
 	render: /* @__PURE__ */ jsx("button", {
 		className: cn(CHIP_CLASS, isActive ? "bg-foreground text-background" : INACTIVE_CHIP_CLASS, disabled && "cursor-not-allowed opacity-40 hover:bg-transparent"),
 		"data-facet-chip-active": isActive ? "" : void 0,
+		"data-facet-value": value,
 		disabled,
 		onClick: onSelect,
 		type: "button"

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/lib/file-picker.d.ts

@@ -0,0 +1,20 @@
+//#region src/lib/file-picker.d.ts
+type PickedFiles = [File, ...File[]];
+type OpenFilePickerOptions = {
+  accept?: string | undefined;
+  multiple?: boolean | undefined;
+  onPick: (files: PickedFiles) => void;
+};
+/**
+ * Opens the browser's file chooser without an `<input type="file">` in the
+ * component tree, so no surface carries a hidden input, a ref, or the
+ * value-reset that lets the same file be picked twice.
+ *
+ * Call it synchronously inside a user gesture (a click or keydown handler):
+ * browsers open the chooser only under transient activation, so an `await`
+ * before the call silently does nothing. Dismissing the chooser calls nothing;
+ * `onPick` runs only with at least one file.
+ */
+declare const openFilePicker: ({ accept, multiple, onPick }: OpenFilePickerOptions) => void;
+//#endregion
+export { type OpenFilePickerOptions, openFilePicker };

package/dist/lib/file-picker.js

@@ -0,0 +1,29 @@
+//#region src/lib/file-picker.ts
+/**
+* Opens the browser's file chooser without an `<input type="file">` in the
+* component tree, so no surface carries a hidden input, a ref, or the
+* value-reset that lets the same file be picked twice.
+*
+* Call it synchronously inside a user gesture (a click or keydown handler):
+* browsers open the chooser only under transient activation, so an `await`
+* before the call silently does nothing. Dismissing the chooser calls nothing;
+* `onPick` runs only with at least one file.
+*/
+const openFilePicker = ({ accept, multiple = false, onPick }) => {
+	const input = document.createElement("input");
+	input.type = "file";
+	input.multiple = multiple;
+	if (accept !== void 0) input.accept = accept;
+	input.hidden = true;
+	const settle = () => {
+		input.remove();
+		const [first, ...rest] = Array.from(input.files ?? []);
+		if (first !== void 0) onPick([first, ...rest]);
+	};
+	input.addEventListener("change", settle, { once: true });
+	input.addEventListener("cancel", settle, { once: true });
+	document.body.append(input);
+	input.click();
+};
+//#endregion
+export { openFilePicker };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stll/ui",
-  "version": "0.33.0",
+  "version": "0.34.0",
   "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",
@@ -578,6 +578,10 @@
       "types": "./dist/hooks/use-viewport-width.d.ts",
       "import": "./dist/hooks/use-viewport-width.js"
     },
+    "./file-picker": {
+      "types": "./dist/lib/file-picker.d.ts",
+      "import": "./dist/lib/file-picker.js"
+    },
     "./lib/overlay-layer": {
       "types": "./dist/lib/overlay-layer.d.ts",
       "import": "./dist/lib/overlay-layer.js"
@@ -614,7 +618,7 @@
     "clsx": "^2.1.1",
     "input-otp": "^1.5.0",
     "lucide-react": "1.41.0",
-    "tailwind-merge": "^3.6.0",
+    "tailwind-merge": "^3.7.0",
     "temporal-polyfill": "1.0.4"
   },
   "devDependencies": {