@stll/ui 0.19.0 → 0.20.0

package/dist/kanban/virtual-cell.js

@@ -1,5 +1,6 @@
 import { cn } from "../lib/utils.js";
 import { useKanbanDropTarget } from "./sortable-interactions.js";
+import { resolveOptionColor } from "../lib/option-color.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useId, useRef } from "react";
 import { useDndContext } from "@dnd-kit/core";
@@ -9,6 +10,18 @@ import { defaultRangeExtractor, useVirtualizer } from "@tanstack/react-virtual";
 const DEFAULT_ESTIMATE_SIZE_PX = 128;
 const DEFAULT_OVERSCAN = 8;
 const DEFAULT_LOAD_MORE_THRESHOLD_PX = 200;
+/** The CSS custom property every accent tint and the active accent ring are
+*  derived from, so both stay in lockstep with the resolved colour token. */
+const KANBAN_CELL_ACCENT_VAR = "--kanban-cell-accent";
+/** Faint resting wash: matches the alpha `option-color` already uses for its
+*  own subtle background token, so a tinted cell reads at the same weight as
+*  the swatch and badges that carry the same colour. */
+const KANBAN_CELL_ACCENT_RESTING_ALPHA = 12;
+/** Stronger wash while a card is dragged over an accented cell. */
+const KANBAN_CELL_ACCENT_ACTIVE_ALPHA = 22;
+/** Ring alpha for the active accent frame, well above the wash so the frame
+*  still reads as the drag-over affordance rather than more background tint. */
+const KANBAN_CELL_ACCENT_ACTIVE_RING_ALPHA = 55;
 const retainActiveSortableIndex = (range, activeIndex) => {
 	const indexes = defaultRangeExtractor(range);
 	if (activeIndex < 0 || indexes.includes(activeIndex)) return indexes;
@@ -21,7 +34,7 @@ const KANBAN_VIRTUAL_CELL_PAGINATION = {
 	CURSOR: "cursor"
 };
 /** Bounded, virtualized Kanban cell with cursor-page request deduplication. */
-const KanbanVirtualCell = ({ rows, getRowKey, renderRow, pagination, sortable, containerRef, active = false, backgroundColor, footer, estimateSize = DEFAULT_ESTIMATE_SIZE_PX, overscan = DEFAULT_OVERSCAN, loadMoreThreshold = DEFAULT_LOAD_MORE_THRESHOLD_PX, className }) => {
+const KanbanVirtualCell = ({ rows, getRowKey, renderRow, pagination, sortable, containerRef, active = false, backgroundColor, accent, footer, estimateSize = DEFAULT_ESTIMATE_SIZE_PX, overscan = DEFAULT_OVERSCAN, loadMoreThreshold = DEFAULT_LOAD_MORE_THRESHOLD_PX, className }) => {
 	const internalRef = useRef(null);
 	const fallbackDropTargetId = useId();
 	const scrollRef = internalRef;
@@ -69,12 +82,21 @@ const KanbanVirtualCell = ({ rows, getRowKey, renderRow, pagination, sortable, c
 		if (containerRef) containerRef.current = element;
 		dropTarget.setNodeRef(element);
 	};
+	const accentVariants = accent === void 0 ? void 0 : resolveOptionColor(accent);
+	const accentBackground = accentVariants === void 0 ? void 0 : `color-mix(in srgb, var(${KANBAN_CELL_ACCENT_VAR}) ${active ? KANBAN_CELL_ACCENT_ACTIVE_ALPHA : KANBAN_CELL_ACCENT_RESTING_ALPHA}%, var(--background))`;
+	const activeAccentRing = active && accentVariants !== void 0 ? `0 0 0 2px color-mix(in srgb, var(${KANBAN_CELL_ACCENT_VAR}) ${KANBAN_CELL_ACCENT_ACTIVE_RING_ALPHA}%, transparent)` : void 0;
+	const style = backgroundColor === void 0 && accentVariants === void 0 ? void 0 : {
+		backgroundColor: backgroundColor ?? accentBackground,
+		...activeAccentRing === void 0 ? void 0 : { boxShadow: activeAccentRing },
+		...accentVariants === void 0 ? void 0 : { [KANBAN_CELL_ACCENT_VAR]: accentVariants.color }
+	};
 	const content = /* @__PURE__ */ jsxs("div", {
-		className: cn("bg-muted/20 max-h-[min(60vh,40rem)] min-h-20 overflow-y-auto overscroll-y-contain rounded-xl p-2 transition-[background-color,outline-color]", active && "bg-primary/5 ring-primary/50 ring-2", className),
+		className: cn("bg-muted/20 max-h-[min(60vh,40rem)] min-h-20 overflow-y-auto overscroll-y-contain rounded-xl p-2 transition-[background-color,outline-color]", active && accentVariants === void 0 && "bg-primary/5 ring-primary/50 ring-2", className),
 		"data-kanban-cell": sortable?.dropTarget.id,
+		"data-kanban-cell-accent": accentVariants === void 0 ? void 0 : "true",
 		onScroll: handleScroll,
 		ref: setScrollElement,
-		style: backgroundColor ? { backgroundColor } : void 0,
+		style,
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "relative",
 			style: { height: virtualizer.getTotalSize() },

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

package/dist/lib/slot.d.ts

@@ -0,0 +1,28 @@
+//#region src/lib/slot.d.ts
+/**
+ * Minimal replacement for `@radix-ui/react-slot`.
+ *
+ * Renders its single child element with the parent's props
+ * (className, style, event handlers, ref, data-* attributes)
+ * merged onto it. Used by the sidebar shell for the `asChild`
+ * pattern.
+ *
+ * Ref composition logic adapted from the MIT-licensed
+ * `@radix-ui/react-compose-refs` (v1.1.2).
+ *
+ * This module intentionally uses `Children.only` and
+ * `cloneElement`: it is a low-level composition primitive
+ * that merges props onto a single child, which is exactly
+ * the use case React documents for these APIs.
+ *
+ * Several lint suppressions are necessary because prop
+ * merging is inherently dynamic; the types of child props
+ * are not statically known.
+ */
+type SlotProps = React.HTMLAttributes<HTMLElement> & {
+  children?: React.ReactNode;
+  ref?: React.Ref<HTMLElement> | undefined;
+};
+declare const Slot: ({ ref: parentRef, children, className, style, ...rest }: SlotProps) => React.ReactNode;
+//#endregion
+export { Slot };

package/dist/lib/slot.js

@@ -0,0 +1,64 @@
+import { cn } from "./utils.js";
+import { Children, Fragment, cloneElement, isValidElement } from "react";
+//#region src/lib/slot.tsx
+/**
+* Minimal replacement for `@radix-ui/react-slot`.
+*
+* Renders its single child element with the parent's props
+* (className, style, event handlers, ref, data-* attributes)
+* merged onto it. Used by the sidebar shell for the `asChild`
+* pattern.
+*
+* Ref composition logic adapted from the MIT-licensed
+* `@radix-ui/react-compose-refs` (v1.1.2).
+*
+* This module intentionally uses `Children.only` and
+* `cloneElement`: it is a low-level composition primitive
+* that merges props onto a single child, which is exactly
+* the use case React documents for these APIs.
+*
+* Several lint suppressions are necessary because prop
+* merging is inherently dynamic; the types of child props
+* are not statically known.
+*/
+const Slot = ({ ref: parentRef, children, className, style, ...rest }) => {
+	const child = Children.only(children);
+	if (!isValidElement(child)) return child;
+	if (child.type === Fragment) return child;
+	const childProps = child.props;
+	const mergedProps = {
+		...rest,
+		...childProps
+	};
+	const childRef = childProps["ref"];
+	if (parentRef !== void 0 || childRef !== void 0) mergedProps["ref"] = composeSlotRefs(parentRef, childRef);
+	const childClassName = childProps["className"];
+	if (className || typeof childClassName === "string") mergedProps["className"] = cn(className, typeof childClassName === "string" ? childClassName : void 0);
+	const childStyle = childProps["style"];
+	if (style || typeof childStyle === "object" && childStyle !== null) mergedProps["style"] = {
+		...style,
+		...typeof childStyle === "object" && childStyle !== null ? childStyle : {}
+	};
+	const restEntries = Object.entries(rest);
+	for (const [key, parentValue] of restEntries) if (key.startsWith("on") && typeof parentValue === "function") {
+		const childValue = childProps[key];
+		if (typeof childValue === "function") mergedProps[key] = (...args) => {
+			Reflect.apply(childValue, void 0, args);
+			Reflect.apply(parentValue, void 0, args);
+		};
+	}
+	return cloneElement(child, mergedProps);
+};
+const composeSlotRefs = (parentRef, childRef) => (node) => {
+	setSlotRef(parentRef, node);
+	setSlotRef(childRef, node);
+};
+const setSlotRef = (ref, node) => {
+	if (typeof ref === "function") {
+		Reflect.apply(ref, void 0, [node]);
+		return;
+	}
+	if (typeof ref === "object" && ref !== null && "current" in ref) ref.current = node;
+};
+//#endregion
+export { Slot };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stll/ui",
-  "version": "0.19.0",
+  "version": "0.20.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",
@@ -257,6 +257,10 @@
       "types": "./dist/components/sheet.d.ts",
       "import": "./dist/components/sheet.js"
     },
+    "./sidebar": {
+      "types": "./dist/components/sidebar.d.ts",
+      "import": "./dist/components/sidebar.js"
+    },
     "./loader": {
       "types": "./dist/components/loader.d.ts",
       "import": "./dist/components/loader.js"
@@ -494,6 +498,10 @@
       "types": "./dist/components/sheet.d.ts",
       "import": "./dist/components/sheet.js"
     },
+    "./components/sidebar": {
+      "types": "./dist/components/sidebar.d.ts",
+      "import": "./dist/components/sidebar.js"
+    },
     "./components/skeleton": {
       "types": "./dist/components/skeleton.d.ts",
       "import": "./dist/components/skeleton.js"