@zovaris/sephiro 0.8.0 → 0.9.0

package/dist/index.js

@@ -365,7 +365,7 @@ function Spinner({ size = "md", label, className, ...props }) {
 }
 //#endregion
 //#region src/atoms/Button/index.tsx
-function Button({ variant = "secondary", size = "md", loading = false, disabled, className, type = "button", children, onClick, "aria-busy": ariaBusy, "aria-disabled": ariaDisabled, ...props }) {
+function Button({ variant = "secondary", size = "md", density = "default", motion = "lift", loading = false, disabled, className, type = "button", children, onClick, "aria-busy": ariaBusy, "aria-disabled": ariaDisabled, ...props }) {
 	const handleClick = (event) => {
 		if (loading) {
 			event.preventDefault();
@@ -378,6 +378,8 @@ function Button({ variant = "secondary", size = "md", loading = false, disabled,
 		className: cn("sph-button", className),
 		"data-variant": variant,
 		"data-size": size,
+		"data-density": density,
+		"data-motion": motion,
 		"data-loading": loading || void 0,
 		disabled,
 		...node(props),
@@ -422,7 +424,7 @@ function Checkbox({ label, size = "md", invalid = false, className, ...props })
 }
 //#endregion
 //#region src/atoms/IconButton/index.tsx
-function IconButton({ icon, label, size = "md", variant = "ghost", loading = false, disabled, className, type = "button", onClick, ...props }) {
+function IconButton({ icon, label, size = "md", density = "default", variant = "ghost", loading = false, disabled, className, type = "button", onClick, ...props }) {
 	const handleClick = (event) => {
 		if (loading) {
 			event.preventDefault();
@@ -435,9 +437,10 @@ function IconButton({ icon, label, size = "md", variant = "ghost", loading = fal
 		type,
 		className: cn("sph-icon-button", className),
 		"data-size": size,
+		"data-density": density,
 		"data-variant": variant,
 		"data-loading": loading || void 0,
-		"aria-label": label,
+		"aria-label": props["aria-label"] ?? label,
 		"aria-busy": loading ? true : props["aria-busy"],
 		"aria-disabled": loading ? true : props["aria-disabled"],
 		disabled,
@@ -1364,11 +1367,6 @@ function matchText(text, query) {
 		indexes
 	};
 }
-/**
-* Filters `items` with `query`, preserving their original order.
-* `label` is matched first (its indexes drive highlighting); `keywords`
-* are a fallback that keeps an item visible without highlightable ranges.
-*/
 function filterItems(items, query, read) {
 	const trimmed = query.trim();
 	if (trimmed.length === 0) return items.map((item) => ({
@@ -1393,6 +1391,13 @@ function filterItems(items, query, read) {
 	}
 	return results;
 }
+function filterItemsWith(items, query, read, filter) {
+	if (!filter) return filterItems(items, query, read);
+	return items.filter((item) => filter(item, query)).map((item) => ({
+		item,
+		indexes: matchText(read(item).label, query)?.indexes ?? []
+	}));
+}
 //#endregion
 //#region src/lib/highlight.tsx
 /**
@@ -2309,7 +2314,10 @@ function Field({ label, htmlFor, description, message, messageType = "hint", req
 	const descriptionId = description ? `${generatedId}-description` : void 0;
 	const messageId = message ? `${generatedId}-message` : void 0;
 	const describedBy = [descriptionId, messageId].filter(Boolean).join(" ");
-	const control = isValidElement(children) ? cloneElement(children, {
+	const isControl = isValidElement(children);
+	const controlId = (isControl ? children.props.id : void 0) ?? htmlFor ?? (isControl ? `${generatedId}-control` : void 0);
+	const control = isControl ? cloneElement(children, {
+		id: controlId,
 		"aria-describedby": [children.props["aria-describedby"], describedBy].filter(Boolean).join(" ") || void 0,
 		"aria-required": children.props["aria-required"] ?? (required || void 0),
 		"aria-invalid": children.props["aria-invalid"] ?? (messageType === "error" && messageId ? true : void 0)
@@ -2319,7 +2327,7 @@ function Field({ label, htmlFor, description, message, messageType = "hint", req
 		children: [
 			label !== void 0 && /* @__PURE__ */ jsxs("label", {
 				className: "sph-field__label",
-				htmlFor,
+				htmlFor: htmlFor ?? controlId,
 				children: [/* @__PURE__ */ jsx("span", { children: node(label) }), required && /* @__PURE__ */ jsx("span", {
 					className: "sph-field__required",
 					children: "Required"
@@ -4231,7 +4239,6 @@ function Chart({ categories, series, variant = "line", height = 160, smooth = fa
 }
 //#endregion
 //#region src/organisms/CommandPalette/index.tsx
-/** Re-runs a CSS animation by detaching, reflowing, and re-attaching it. */
 function replay(element, className) {
 	if (!element) return;
 	element.classList.remove(className);
@@ -4256,7 +4263,7 @@ function resolveActive(options, wanted) {
 	for (let index = 0; index < start; index += 1) if (enabled(index)) return index;
 	return start;
 }
-function CommandPalette({ open, onOpenChange, items, onSelect, placeholder = "Type a command or search…", emptyMessage = "No results.", homeLabel = "Home", ariaLabel = "Command palette", hotkey = false, className }) {
+function CommandPalette({ open, onOpenChange, items, onSelect, placeholder = "Type a command or search…", emptyMessage = "No results.", homeLabel = "Home", ariaLabel = "Command palette", hotkey = false, className, filter }) {
 	const listId = useId();
 	const rootRef = useRef(null);
 	const panelRef = useRef(null);
@@ -4275,12 +4282,13 @@ function CommandPalette({ open, onOpenChange, items, onSelect, placeholder = "Ty
 	const visible = present && portaled;
 	useFocusTrap(rootRef, visible, inputRef);
 	const levelItems = path.length > 0 ? path[path.length - 1]?.children ?? [] : items;
+	const hasNestedLevels = items.some((item) => (item.children?.length ?? 0) > 0);
 	const { sections, options } = useMemo(() => {
 		const read = (item) => ({
 			label: readableLabel(item),
 			keywords: [item.keywords ?? "", ...(item.children ?? []).map((child) => readableLabel(child))].filter(Boolean).join(" ")
 		});
-		const filtered = filterItems(levelItems, query, read);
+		const filtered = filterItemsWith(levelItems, query, read, filter);
 		const ungrouped = filtered.filter((entry) => entry.item.group === void 0);
 		const grouped = [...new Set(filtered.map((entry) => entry.item.group).filter((name) => name !== void 0))].map((name) => ({
 			heading: name,
@@ -4305,6 +4313,7 @@ function CommandPalette({ open, onOpenChange, items, onSelect, placeholder = "Ty
 			options: built.flatMap((s) => s.entries)
 		};
 	}, [
+		filter,
 		levelItems,
 		listId,
 		query
@@ -4502,7 +4511,7 @@ function CommandPalette({ open, onOpenChange, items, onSelect, placeholder = "Ty
 				ref: panelRef,
 				className: "sph-palette__panel",
 				children: [
-					/* @__PURE__ */ jsxs("nav", {
+					hasNestedLevels && /* @__PURE__ */ jsxs("nav", {
 						className: "sph-palette__crumbs",
 						"aria-label": "Breadcrumb",
 						children: [
@@ -5163,8 +5172,38 @@ function Resizable({ panes, direction = "horizontal", sizes, defaultSizes, onSiz
 	});
 }
 //#endregion
+//#region src/organisms/SidePanel/index.tsx
+function SidePanel({ children, side = "left", width = 280, collapsed, defaultCollapsed = false, onCollapsedChange, peek = false, className, style, ...props }) {
+	const [uncontrolled, setUncontrolled] = useState(defaultCollapsed);
+	const isCollapsed = collapsed ?? uncontrolled;
+	const setCollapsed = (next) => {
+		setUncontrolled(next);
+		onCollapsedChange?.(next);
+	};
+	const state = {
+		collapsed: isCollapsed,
+		setCollapsed,
+		toggle: () => setCollapsed(!isCollapsed)
+	};
+	return /* @__PURE__ */ jsx("aside", {
+		...node(props),
+		className: cn("sph-side-panel", className),
+		style: {
+			...style,
+			"--sph-side-panel-width": typeof width === "number" ? `${width}px` : width
+		},
+		"data-side": side,
+		"data-collapsed": isCollapsed || void 0,
+		"data-peek": isCollapsed && peek || void 0,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "sph-side-panel__inner",
+			children: node(typeof children === "function" ? children(state) : children)
+		})
+	});
+}
+//#endregion
 //#region src/organisms/Sidebar/index.tsx
-function Sidebar({ sections, value, defaultValue, onSelect, header, footer, collapsible = false, collapsed, defaultCollapsed = false, onCollapsedChange, ariaLabel = "Primary", className, ...props }) {
+function Sidebar({ sections, value, defaultValue, onSelect, header, footer, side = "left", collapsible = false, collapsed, collapsedMode = "rail", defaultCollapsed = collapsedMode !== "rail", onCollapsedChange, ariaLabel = "Primary", className, ...props }) {
 	const listId = useId();
 	const [uncontrolled, setUncontrolled] = useState(defaultCollapsed);
 	const isCollapsed = collapsed ?? uncontrolled;
@@ -5174,10 +5213,16 @@ function Sidebar({ sections, value, defaultValue, onSelect, header, footer, coll
 		setUncontrolled(next);
 		onCollapsedChange?.(next);
 	};
+	const expandChevron = side === "left" ? "»" : "«";
+	const collapseChevron = side === "left" ? "«" : "»";
+	const showItemTitle = isCollapsed && collapsedMode !== "hover";
 	return /* @__PURE__ */ jsxs("aside", {
 		...node(props),
 		className: cn("sph-sidebar", className),
+		"data-side": side,
 		"data-collapsed": isCollapsed || void 0,
+		"data-collapsed-mode": collapsedMode,
+		"data-rail": isCollapsed || void 0,
 		children: [
 			header !== void 0 && /* @__PURE__ */ jsx("div", {
 				className: "sph-sidebar__header",
@@ -5200,7 +5245,7 @@ function Sidebar({ sections, value, defaultValue, onSelect, header, footer, coll
 							"data-active": isActive || void 0,
 							"aria-current": isActive ? "page" : void 0,
 							disabled: item.disabled,
-							title: isCollapsed && typeof item.label === "string" ? item.label : void 0,
+							title: showItemTitle && typeof item.label === "string" ? item.label : void 0,
 							onClick: () => onSelect?.(item.value),
 							children: [
 								item.icon !== void 0 && /* @__PURE__ */ jsx("span", {
@@ -5238,7 +5283,7 @@ function Sidebar({ sections, value, defaultValue, onSelect, header, footer, coll
 					onClick: toggleCollapsed,
 					children: /* @__PURE__ */ jsx("span", {
 						"aria-hidden": "true",
-						children: isCollapsed ? "»" : "«"
+						children: isCollapsed ? expandChevron : collapseChevron
 					})
 				})]
 			})
@@ -6241,7 +6286,7 @@ function segmentTarget(options, index, key) {
 	}
 	return -1;
 }
-function SegmentedControl({ options, ariaLabel, value, defaultValue, onValueChange, size = "md", fullWidth = false, disabled = false, className }) {
+function SegmentedControl({ options, ariaLabel, value, defaultValue, onValueChange, size = "md", density = "default", fullWidth = false, disabled = false, className }) {
 	const generatedId = useId();
 	const [uncontrolledValue, setUncontrolledValue] = useState(() => defaultValue ?? options.find((option) => !option.disabled)?.value ?? "");
 	const activeValue = value ?? uncontrolledValue;
@@ -6270,6 +6315,7 @@ function SegmentedControl({ options, ariaLabel, value, defaultValue, onValueChan
 		"aria-disabled": disabled || void 0,
 		className: cn("sph-segmented-control", className),
 		"data-size": size,
+		"data-density": density,
 		"data-full-width": fullWidth || void 0,
 		"data-disabled": disabled || void 0,
 		style,
@@ -7462,6 +7508,6 @@ function ChatScroller({ children, itemCount, newCount, threshold = 48, ariaLabel
 	});
 }
 //#endregion
-export { Accordion, Alert, AnimatedNumber, Attachment, Avatar, AvatarGroup, Badge, Breadcrumb, Button, Calendar, Card, Chart, ChatScroller, Checkbox, Citation, Collapsible, Combobox, CommandPalette, ContextMenu, Delta, Dialog, Drawer, EmptyState, Field, FieldMessage, HoldButton, HoverCard, IconButton, Input, Kbd, MagneticDropzone, Menu, Menubar, MetadataList, Notice, NumberInput, OTPInput, OverflowList, Pagination, PlanCard, Popover, Progress, QuestionCard, RadioGroup, ReasoningSteps, Resizable, Reveal, ScrollArea, SegmentedControl, Select, Separator, Sidebar, Skeleton, Slider, Spinner, Stat, StatGroup, StatusMark, Stepper, StreamingText, Surface, Table, Tabs, TaskList, Textarea, Timeline, Timestamp, Toast, ToastViewport, Toggle, ToolCalls, Toolbar, Tooltip, TooltipGroup, describeDropzoneResult, motionDurationMs, parseDurationMs, toast, usePresence, validateDropzoneFiles };
+export { Accordion, Alert, AnimatedNumber, Attachment, Avatar, AvatarGroup, Badge, Breadcrumb, Button, Calendar, Card, Chart, ChatScroller, Checkbox, Citation, Collapsible, Combobox, CommandPalette, ContextMenu, Delta, Dialog, Drawer, EmptyState, Field, FieldMessage, HoldButton, HoverCard, IconButton, Input, Kbd, MagneticDropzone, Menu, Menubar, MetadataList, Notice, NumberInput, OTPInput, OverflowList, Pagination, PlanCard, Popover, Progress, QuestionCard, RadioGroup, ReasoningSteps, Resizable, Reveal, ScrollArea, SegmentedControl, Select, Separator, SidePanel, Sidebar, Skeleton, Slider, Spinner, Stat, StatGroup, StatusMark, Stepper, StreamingText, Surface, Table, Tabs, TaskList, Textarea, Timeline, Timestamp, Toast, ToastViewport, Toggle, ToolCalls, Toolbar, Tooltip, TooltipGroup, describeDropzoneResult, motionDurationMs, parseDurationMs, toast, usePresence, validateDropzoneFiles };
 
 //# sourceMappingURL=index.js.map