@stll/ui 0.25.2 → 0.26.0

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

@@ -10,7 +10,7 @@
  */
 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;
+  size?: "default" | "sm" | "lg" | "chip" | "icon" | "icon-lg" | "icon-sm" | "icon-xl" | "icon-xs" | "xl" | "xs" | null | undefined;
   variant?: "link" | "default" | "destructive" | "destructive-outline" | "ghost" | "outline" | "secondary" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //#endregion

package/dist/components/color-picker.d.ts

@@ -31,17 +31,27 @@ type ColorPickerProps = {
   align?: "start" | "center" | "end";
   className?: string;
 };
-type ColorPickerContentProps = {
+type ColorPickerContentBaseProps = {
   value?: string | undefined;
   onSelect?: ((value: string) => void) | undefined;
-  onClear?: (() => void) | undefined;
   presets: ColorPreset[];
-  columns: number;
-  defaultExpanded: boolean;
   moreLabel: string;
 };
+type ColorPickerContentProps = ColorPickerContentBaseProps & ({
+  columns: number;
+  defaultExpanded: boolean;
+  onClear?: (() => void) | undefined;
+  /** Popover content closes on preset selection. */
+  presentation?: "popover";
+} | {
+  columns?: never;
+  defaultExpanded?: never;
+  onClear?: never;
+  /** Inline content stays mounted and reserves its popup for custom color. */
+  presentation: "inline";
+});
 declare const DEFAULT_PRESETS: ColorPreset[];
-declare const ColorPickerContent: ({ value, onSelect, onClear, presets, columns, defaultExpanded, moreLabel }: ColorPickerContentProps) => React$1.JSX.Element;
+declare const ColorPickerContent: ({ value, onSelect, onClear, presets, columns, defaultExpanded, moreLabel, presentation }: ColorPickerContentProps) => React$1.JSX.Element;
 declare const ColorPicker: ({ value, onSelect, onClear, presets, columns, defaultExpanded, moreLabel, children, side, align, className }: ColorPickerProps) => React$1.JSX.Element;
 //#endregion
 export { ColorPicker, ColorPickerContent, type ColorPickerContentProps, type ColorPickerProps, type ColorPreset, DEFAULT_PRESETS };

package/dist/components/color-picker.js

@@ -1,7 +1,8 @@
 "use client";
 import { cn } from "../lib/utils.js";
+import { OVERLAY_LAYER_CLASS_NAMES } from "../lib/overlay-layer.js";
 import { CheckIcon, ChevronDownIcon } from "lucide-react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Suspense, lazy, useState } from "react";
 import { Popover } from "@base-ui/react/popover";
 //#region src/components/color-picker.tsx
@@ -112,25 +113,97 @@ const isLightHex = (hex) => {
 	const b = Number.parseInt(hex.slice(4, 6), 16);
 	return (r * 299 + g * 587 + b * 114) / 1e3 > 220;
 };
+const checkIconColorClassNames = {
+	dark: "text-(--color-white)",
+	light: "text-(--color-black)"
+};
 /** Check if a value looks like a 6-char hex (no CSS vars, no named colors). */
 const looksLikeHex = (v) => /^[0-9A-Fa-f]{6}$/u.test(v);
-const ColorSwatch = ({ cssColor, selected, label, isLight, onClick }) => /* @__PURE__ */ jsx(Popover.Close, {
-	render: /* @__PURE__ */ jsx("button", {
+const ColorSwatch = ({ cssColor, selected, label, isLight, onClick, presentation }) => {
+	let selectionClassName = "border-border/40";
+	if (selected) selectionClassName = presentation === "inline" ? "border-transparent ring-2 ring-ring" : "border-foreground ring-ring/24 ring-1";
+	const swatch = /* @__PURE__ */ jsx("button", {
 		"aria-label": label,
-		className: cn("hover:border-foreground relative flex size-6 items-center justify-center rounded-md border transition-[transform,border-color] hover:scale-115 sm:size-5", selected ? "border-foreground ring-ring/24 ring-1" : "border-border/40", isLight && !selected && "border-border"),
+		"aria-pressed": selected,
+		className: cn(presentation === "inline" ? "ring-offset-popover relative grid size-11 shrink-0 place-items-center rounded-full border ring-offset-2 transition-transform outline-none hover:scale-105 focus-visible:ring-2" : "hover:border-foreground relative flex size-6 items-center justify-center rounded-md border transition-[transform,border-color] hover:scale-115 sm:size-5", selectionClassName, isLight && !selected && "border-border"),
 		onClick,
 		style: { backgroundColor: cssColor },
-		type: "button"
+		type: "button",
+		children: selected && /* @__PURE__ */ jsx(CheckIcon, { className: cn("pointer-events-none", presentation === "inline" ? "bg-background/88 text-foreground size-5 rounded-full p-0.5 shadow-sm" : "size-3 sm:size-2.5", presentation === "popover" && checkIconColorClassNames[isLight ? "light" : "dark"]) })
+	});
+	return presentation === "inline" ? swatch : /* @__PURE__ */ jsx(Popover.Close, { render: swatch });
+};
+const CustomColorControls = ({ handleInputChange, handlePickerChange, inputHex, pickerHex }) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Suspense, {
+	fallback: /* @__PURE__ */ jsx("div", {
+		"aria-hidden": true,
+		className: "ring-border/30 h-[140px] w-full rounded-lg ring-1"
 	}),
-	children: selected && /* @__PURE__ */ jsx(CheckIcon, {
-		className: "pointer-events-none size-3 sm:size-2.5",
-		style: { color: isLight ? "#000" : "#fff" }
+	children: /* @__PURE__ */ jsx(HexColorPicker, {
+		className: "ring-border/30 !h-[140px] !w-full overflow-hidden rounded-lg ring-1",
+		color: pickerHex,
+		onChange: (hex) => handlePickerChange(hex.replace("#", ""))
 	})
-});
-const ColorPickerContent = ({ value, onSelect, onClear, presets, columns, defaultExpanded, moreLabel }) => {
+}), /* @__PURE__ */ jsxs("div", {
+	className: "flex items-center gap-1.5",
+	children: [
+		/* @__PURE__ */ jsx("span", {
+			className: "text-muted-foreground text-[11px]",
+			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",
+			dir: "ltr",
+			maxLength: 6,
+			onChange: (event) => handleInputChange(event.target.value),
+			onKeyDown: (event) => {
+				if (event.key !== "Escape") event.stopPropagation();
+			},
+			onMouseDown: (event) => event.stopPropagation(),
+			onPointerDown: (event) => event.stopPropagation(),
+			placeholder: "FF0000",
+			value: inputHex
+		}),
+		isValidHex(inputHex) && /* @__PURE__ */ jsx("span", {
+			className: "border-border size-6 shrink-0 rounded border",
+			style: { backgroundColor: `#${inputHex}` }
+		})
+	]
+})] });
+const InlineCustomColor = ({ customSelected, handleInputChange, handlePickerChange, inputHex, label, pickerHex, presets, value }) => {
+	const customColor = customSelected ? `#${value}` : void 0;
+	const customGradient = `conic-gradient(${presets.map((preset) => swatchColor(preset)).join(", ")})`;
+	return /* @__PURE__ */ jsxs(Popover.Root, { children: [/* @__PURE__ */ jsx(Popover.Trigger, {
+		render: /* @__PURE__ */ jsx("button", {
+			"aria-label": label,
+			"aria-pressed": customSelected,
+			className: cn("ring-offset-popover relative grid size-11 shrink-0 place-items-center rounded-full border border-transparent ring-offset-2 transition-transform outline-none hover:scale-105 focus-visible:ring-2", customSelected && "ring-ring ring-2"),
+			style: customColor ? { backgroundColor: customColor } : { backgroundImage: customGradient },
+			type: "button"
+		}),
+		children: customSelected ? /* @__PURE__ */ jsx(CheckIcon, { className: "bg-background/88 text-foreground pointer-events-none size-5 rounded-full p-0.5 shadow-sm" }) : null
+	}), /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(Popover.Positioner, {
+		align: "end",
+		className: OVERLAY_LAYER_CLASS_NAMES.popup,
+		side: "bottom",
+		sideOffset: 4,
+		children: /* @__PURE__ */ jsx(Popover.Popup, {
+			className: "bg-popover text-popover-foreground flex w-56 flex-col gap-2 rounded-lg border p-2 shadow-lg/5",
+			"data-slot": "color-picker-custom-popup",
+			children: /* @__PURE__ */ jsx(CustomColorControls, {
+				handleInputChange,
+				handlePickerChange,
+				inputHex,
+				pickerHex
+			})
+		})
+	}) })] });
+};
+const ColorPickerContent = ({ value, onSelect, onClear, presets, columns, defaultExpanded, moreLabel, presentation = "popover" }) => {
 	const [expanded, setExpanded] = useState(defaultExpanded);
 	const [pickerHex, setPickerHex] = useState(() => (looksLikeHex(value ?? "") ? value : "000000") ?? "000000");
 	const [inputHex, setInputHex] = useState("");
+	const customSelected = !presets.some((preset) => preset.value === value) && looksLikeHex(value ?? "");
 	/** Called when the visual picker (SB square / hue strip) emits a color. */
 	const handlePickerChange = (hex) => {
 		const normalized = normalizeHex(hex);
@@ -147,6 +220,27 @@ const ColorPickerContent = ({ value, onSelect, onClear, presets, columns, defaul
 			onSelect?.(cleaned);
 		}
 	};
+	if (presentation === "inline") return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-1",
+		"data-slot": "color-picker",
+		children: [presets.map((preset) => /* @__PURE__ */ jsx(ColorSwatch, {
+			cssColor: swatchColor(preset),
+			isLight: looksLikeHex(preset.value) && isLightHex(preset.value),
+			label: preset.label,
+			onClick: () => onSelect?.(preset.value),
+			presentation: "inline",
+			selected: value === preset.value
+		}, preset.value)), /* @__PURE__ */ jsx(InlineCustomColor, {
+			customSelected,
+			handleInputChange,
+			handlePickerChange,
+			inputHex,
+			label: moreLabel,
+			pickerHex,
+			presets,
+			value
+		})]
+	});
 	return /* @__PURE__ */ jsxs("div", {
 		className: "flex flex-col gap-1.5",
 		"data-slot": "color-picker",
@@ -172,6 +266,7 @@ const ColorPickerContent = ({ value, onSelect, onClear, presets, columns, defaul
 					isLight: looksLikeHex(preset.value) && isLightHex(preset.value),
 					label: preset.label,
 					onClick: () => onSelect?.(preset.value),
+					presentation: "popover",
 					selected: value === preset.value
 				}, preset.value))
 			}),
@@ -180,43 +275,14 @@ const ColorPickerContent = ({ value, onSelect, onClear, presets, columns, defaul
 				onClick: () => setExpanded(true),
 				type: "button",
 				children: [moreLabel, /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-3" })]
-			}) : /* @__PURE__ */ jsxs("div", {
+			}) : /* @__PURE__ */ jsx("div", {
 				className: "border-border flex flex-col gap-2 border-t pt-2",
-				children: [/* @__PURE__ */ jsx(Suspense, {
-					fallback: /* @__PURE__ */ jsx("div", {
-						"aria-hidden": true,
-						className: "ring-border/30 h-[140px] w-full rounded-lg ring-1"
-					}),
-					children: /* @__PURE__ */ jsx(HexColorPicker, {
-						className: "ring-border/30 !h-[140px] !w-full overflow-hidden rounded-lg ring-1",
-						color: pickerHex,
-						onChange: (hex) => handlePickerChange(hex.replace("#", ""))
-					})
-				}), /* @__PURE__ */ jsxs("div", {
-					className: "flex items-center gap-1.5",
-					children: [
-						/* @__PURE__ */ jsx("span", {
-							className: "text-muted-foreground text-[11px]",
-							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",
-							dir: "ltr",
-							maxLength: 6,
-							onChange: (e) => handleInputChange(e.target.value),
-							onKeyDown: (e) => e.stopPropagation(),
-							onMouseDown: (e) => e.stopPropagation(),
-							onPointerDown: (e) => e.stopPropagation(),
-							placeholder: "FF0000",
-							value: inputHex
-						}),
-						isValidHex(inputHex) && /* @__PURE__ */ jsx("span", {
-							className: "border-border size-6 shrink-0 rounded border",
-							style: { backgroundColor: `#${inputHex}` }
-						})
-					]
-				})]
+				children: /* @__PURE__ */ jsx(CustomColorControls, {
+					handleInputChange,
+					handlePickerChange,
+					inputHex,
+					pickerHex
+				})
 			})
 		]
 	});
@@ -228,7 +294,7 @@ const ColorPicker = ({ value, onSelect, onClear, presets = DEFAULT_PRESETS, colu
 	children
 }), /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(Popover.Positioner, {
 	align,
-	className: "z-50",
+	className: OVERLAY_LAYER_CLASS_NAMES.popup,
 	side,
 	sideOffset: 4,
 	children: /* @__PURE__ */ jsx(Popover.Popup, {
@@ -240,6 +306,7 @@ const ColorPicker = ({ value, onSelect, onClear, presets = DEFAULT_PRESETS, colu
 			moreLabel,
 			onClear,
 			onSelect,
+			presentation: "popover",
 			presets,
 			value
 		})

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-end" | "inline-start" | "block-end" | "block-start" | 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/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?: "default" | "lg" | "sm" | "rail" | null | undefined;
+  size?: "default" | "sm" | "lg" | "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/inspector/tabs.d.ts

@@ -8,7 +8,7 @@ import { Tabs } from "@base-ui/react/tabs";
  */
 declare const InspectorTabs: ({ className, ...props }: Omit<Tabs.Root.Props, "orientation">) => React$1.JSX.Element;
 declare const INSPECTOR_RAIL_MEDIA_QUERY: "(min-width: 48rem)";
-declare const resolveInspectorTabOrientation: (isRailLayout: boolean) => "vertical" | "horizontal";
+declare const resolveInspectorTabOrientation: (isRailLayout: boolean) => "horizontal" | "vertical";
 declare const InspectorTabList: ({ className, ...props }: Tabs.List.Props) => React$1.JSX.Element;
 declare const InspectorTab: ({ className, ...props }: Tabs.Tab.Props) => React$1.JSX.Element;
 declare const InspectorTabPanel: ({ className, ...props }: Tabs.Panel.Props) => React$1.JSX.Element;

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 ("default" | "lg" | "sm")[];
+declare const CONTROL_SIZES: readonly ("default" | "sm" | "lg")[];
 //#endregion
 export { CONTROL_SIZE, CONTROL_SIZES, type ControlSize };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stll/ui",
-  "version": "0.25.2",
+  "version": "0.26.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",