@zvk/composite 0.1.1 → 0.1.3

package/dist/navigation/entity-switcher-menu.js

@@ -0,0 +1,56 @@
+"use client";
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Button } from "@zvk/ui/button";
+import { Command } from "@zvk/ui/command";
+import { Popover } from "@zvk/ui/popover";
+import { cn } from "../utils/cn.js";
+function useControllableValue({ defaultValue, onChange, value }) {
+    const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue);
+    const resolvedValue = value ?? uncontrolledValue;
+    const setValue = React.useCallback((nextValue) => {
+        if (value === undefined) {
+            setUncontrolledValue(nextValue);
+        }
+        onChange?.(nextValue);
+    }, [onChange, value]);
+    return [resolvedValue, setValue];
+}
+function hasRenderableNode(value) {
+    return value !== undefined && value !== null && value !== false;
+}
+export function EntitySwitcherMenu({ className, createAction, current, defaultOpen = false, defaultQuery = "", empty = "No entities found.", groups, label, loading = false, loadingLabel = "Loading...", manageAction, onOpenChange, onQueryChange, onSelect, open, placeholder = "Search...", query, ref, size = "md", ...props }) {
+    const [resolvedOpen, setResolvedOpen] = useControllableValue({
+        defaultValue: defaultOpen,
+        ...(onOpenChange ? { onChange: onOpenChange } : {}),
+        ...(open !== undefined ? { value: open } : {})
+    });
+    const [resolvedQuery, setResolvedQuery] = useControllableValue({
+        defaultValue: defaultQuery,
+        ...(onQueryChange ? { onChange: onQueryChange } : {}),
+        ...(query !== undefined ? { value: query } : {})
+    });
+    const hasActions = hasRenderableNode(createAction) || hasRenderableNode(manageAction);
+    const hasItems = groups.some((group) => group.items.length > 0);
+    const popoverProps = {
+        ...(ref !== undefined ? { ref } : {})
+    };
+    const handleSelect = React.useCallback((item) => {
+        onSelect?.(item);
+        setResolvedOpen(false);
+    }, [onSelect, setResolvedOpen]);
+    return (_jsxs(Popover, { ...props, ...popoverProps, className: cn("zvk-composite-entity-switcher-menu", className), "data-size": size, onOpenChange: setResolvedOpen, open: resolvedOpen, placement: "bottom-start", children: [_jsx(Popover.Trigger, { asChild: true, children: _jsxs(Button, { className: "zvk-composite-entity-switcher-menu__trigger", "data-state": resolvedOpen ? "open" : "closed", type: "button", variant: "outline", children: [_jsxs("span", { className: "zvk-composite-entity-switcher-menu__trigger-content", children: [_jsx("span", { className: "zvk-composite-entity-switcher-menu__label", children: label }), _jsxs("span", { className: "zvk-composite-entity-switcher-menu__current", children: [current?.icon ? (_jsx("span", { className: "zvk-composite-entity-switcher-menu__current-icon", "aria-hidden": "true", children: current.icon })) : null, current ? (_jsxs("span", { className: "zvk-composite-entity-switcher-menu__current-text", children: [_jsx("span", { className: "zvk-composite-entity-switcher-menu__current-label", children: current.label }), current.description ? (_jsx("span", { className: "zvk-composite-entity-switcher-menu__current-description", children: current.description })) : null] })) : null] })] }), _jsx("span", { className: "zvk-composite-entity-switcher-menu__chevron", "aria-hidden": "true", children: "v" })] }) }), _jsx(Popover.Content, { align: "start", className: "zvk-composite-entity-switcher-menu__content", matchTriggerWidth: true, side: "bottom", sideOffset: 8, children: _jsxs(Command, { className: "zvk-composite-entity-switcher-menu__command", onValueChange: setResolvedQuery, value: resolvedQuery, children: [_jsx(Command.Input, { className: "zvk-composite-entity-switcher-menu__search", placeholder: placeholder }), _jsxs(Command.List, { className: "zvk-composite-entity-switcher-menu__list", children: [loading ? (_jsx("div", { className: "zvk-composite-entity-switcher-menu__state", "data-state": "loading", children: loadingLabel })) : null, !loading && !hasItems ? (_jsx("div", { className: "zvk-composite-entity-switcher-menu__state", "data-state": "empty", children: empty })) : null, !loading && hasItems ? _jsx(Command.Empty, { children: empty }) : null, !loading
+                                    ? groups.map((group) => (_jsx(Command.Group, { className: "zvk-composite-entity-switcher-menu__group", heading: group.label, children: group.items.map((item) => {
+                                            const itemProps = {
+                                                ...(item.disabled !== undefined ? { disabled: item.disabled } : {}),
+                                                ...(item.keywords !== undefined ? { keywords: item.keywords } : {})
+                                            };
+                                            return (_createElement(Command.Item, { ...itemProps, className: "zvk-composite-entity-switcher-menu__item", "data-current": current && item.id === current.id ? "true" : undefined, key: item.id, onSelect: () => handleSelect(item), value: item.id },
+                                                item.icon ? (_jsx("span", { className: "zvk-composite-entity-switcher-menu__item-icon", "aria-hidden": "true", children: item.icon })) : null,
+                                                _jsxs("span", { className: "zvk-composite-entity-switcher-menu__item-content", children: [_jsx("span", { className: "zvk-composite-entity-switcher-menu__item-label", children: item.label }), item.description ? (_jsx("span", { className: "zvk-composite-entity-switcher-menu__item-description", children: item.description })) : null] }),
+                                                item.meta ? (_jsx("span", { className: "zvk-composite-entity-switcher-menu__item-meta", children: item.meta })) : null,
+                                                item.badge ? (_jsx("span", { className: "zvk-composite-entity-switcher-menu__item-badge", children: item.badge })) : null));
+                                        }) }, group.id)))
+                                    : null] }), hasActions ? (_jsxs("div", { className: "zvk-composite-entity-switcher-menu__actions", children: [createAction ? (_jsx("div", { className: "zvk-composite-entity-switcher-menu__action", "data-action": "create", children: createAction })) : null, manageAction ? (_jsx("div", { className: "zvk-composite-entity-switcher-menu__action", "data-action": "manage", children: manageAction })) : null] })) : null] }) })] }));
+}

package/dist/navigation/link-action.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+import type { ButtonSize, ButtonVariant } from "@zvk/ui/button";
+export interface LinkActionProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "disabled"> {
+    readonly disabled?: boolean;
+    readonly leadingIcon?: React.ReactNode;
+    readonly ref?: React.Ref<HTMLAnchorElement>;
+    readonly size?: ButtonSize;
+    readonly trailingIcon?: React.ReactNode;
+    readonly variant?: ButtonVariant;
+}
+export declare function LinkAction({ children, className, disabled, leadingIcon, onClickCapture, onKeyDownCapture, ["aria-disabled"]: ariaDisabled, ref, size, trailingIcon, variant, ...props }: LinkActionProps): React.JSX.Element;

package/dist/navigation/link-action.js

@@ -0,0 +1,41 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../utils/cn.js";
+function hasRenderableNode(value) {
+    if (value === null || value === undefined || value === false) {
+        return false;
+    }
+    if (typeof value === "string" || typeof value === "number" || typeof value === "bigint") {
+        return true;
+    }
+    if (React.isValidElement(value)) {
+        const props = value.props;
+        if (props["aria-hidden"] === true || props["aria-hidden"] === "true") {
+            return false;
+        }
+        if (typeof props["aria-label"] === "string" && props["aria-label"].trim() !== "") {
+            return true;
+        }
+        if (typeof props["aria-labelledby"] === "string" && props["aria-labelledby"].trim() !== "") {
+            return true;
+        }
+        if (typeof props["title"] === "string" && props["title"].trim() !== "") {
+            return true;
+        }
+        return React.Children.toArray(props.children).some(hasRenderableNode);
+    }
+    return false;
+}
+export function LinkAction({ children, className, disabled, leadingIcon, onClickCapture, onKeyDownCapture, ["aria-disabled"]: ariaDisabled, ref, size = "md", trailingIcon, variant = "outline", ...props }) {
+    const isDisabled = Boolean(disabled || ariaDisabled === true || ariaDisabled === "true");
+    const suppressDisabledActivation = React.useCallback((event) => {
+        if (!isDisabled) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+    }, [isDisabled]);
+    const hasContent = React.Children.count(children) > 0;
+    return (_jsxs("a", { ...props, "aria-disabled": isDisabled ? true : ariaDisabled, className: cn("zvk-ui-button", "zvk-composite-link-action", className), "data-disabled": isDisabled ? "true" : undefined, "data-size": size, "data-variant": variant, onClickCapture: isDisabled ? suppressDisabledActivation : onClickCapture, onKeyDownCapture: isDisabled ? suppressDisabledActivation : onKeyDownCapture, ref: ref, tabIndex: isDisabled ? -1 : props.tabIndex, children: [leadingIcon ? (_jsx("span", { "aria-hidden": hasRenderableNode(leadingIcon) ? undefined : true, className: "zvk-ui-button__icon zvk-composite-link-action__icon", children: leadingIcon })) : null, hasContent ? _jsx("span", { className: "zvk-ui-button__content zvk-composite-link-action__content", children: children }) : null, trailingIcon ? (_jsx("span", { "aria-hidden": hasRenderableNode(trailingIcon) ? undefined : true, className: "zvk-ui-button__icon zvk-composite-link-action__icon", children: trailingIcon })) : null] }));
+}

package/dist/navigation/sectioned-workspace-shell.d.ts

@@ -25,9 +25,10 @@ export interface SectionedWorkspaceShellProps extends Omit<React.HTMLAttributes<
     onItemSelect?: ((itemId: string) => void) | undefined;
     ref?: React.Ref<HTMLDivElement> | undefined;
     sections: SectionedWorkspaceShellSection[];
+    sidebarFooter?: React.ReactNode | undefined;
     title?: React.ReactNode | undefined;
     toolbar?: React.ReactNode | undefined;
 }
 export type SectionedWorkspaceItem = SectionedWorkspaceShellItem;
 export type SectionedWorkspaceSection = SectionedWorkspaceShellSection;
-export declare function SectionedWorkspaceShell({ actions, activeItemId, children, className, description, footer, headingLevel, navLabel, onItemSelect, ref, sections, title, toolbar, ...props }: SectionedWorkspaceShellProps): React.JSX.Element;
+export declare function SectionedWorkspaceShell({ actions, activeItemId, children, className, description, footer, headingLevel, navLabel, onItemSelect, ref, sections, sidebarFooter, title, toolbar, ...props }: SectionedWorkspaceShellProps): React.JSX.Element;

package/dist/navigation/sectioned-workspace-shell.js

@@ -3,7 +3,7 @@ import * as React from "react";
 import { SectionedSidebarNav } from "@zvk/ui/sectioned-sidebar-nav";
 import { cn } from "../utils/cn.js";
 import { WorkspaceHeader } from "./workspace-header.js";
-export function SectionedWorkspaceShell({ actions, activeItemId, children, className, description, footer, headingLevel, navLabel = "Workspace navigation", onItemSelect, ref, sections, title, toolbar, ...props }) {
+export function SectionedWorkspaceShell({ actions, activeItemId, children, className, description, footer, headingLevel, navLabel = "Workspace navigation", onItemSelect, ref, sections, sidebarFooter, title, toolbar, ...props }) {
     const hasHeader = Boolean(title || description || actions || toolbar);
     const navigationProps = {
         ...(activeItemId === undefined ? {} : { activeItemId }),
@@ -15,7 +15,7 @@ export function SectionedWorkspaceShell({ actions, activeItemId, children, class
         ...(headingLevel === undefined ? {} : { headingLevel }),
         ...(toolbar === undefined ? {} : { toolbar })
     };
-    return (_jsxs("div", { ...props, ref: ref, className: cn("zvk-composite-sectioned-workspace-shell", className), children: [_jsx("aside", { className: "zvk-composite-sectioned-workspace-shell__sidebar", children: _jsx(SectionedWorkspaceNavigation, { ...navigationProps, navLabel: navLabel, sections: sections }) }), _jsxs("div", { className: "zvk-composite-sectioned-workspace-shell__body", children: [hasHeader ? (_jsx(WorkspaceHeader, { ...headerProps, className: "zvk-composite-sectioned-workspace-shell__header", title: title ?? "" })) : null, _jsx("main", { className: "zvk-composite-sectioned-workspace-shell__content", children: children }), footer ? _jsx("footer", { className: "zvk-composite-sectioned-workspace-shell__footer", children: footer }) : null] })] }));
+    return (_jsxs("div", { ...props, ref: ref, className: cn("zvk-composite-sectioned-workspace-shell", className), children: [_jsxs("aside", { className: "zvk-composite-sectioned-workspace-shell__sidebar", children: [_jsx(SectionedWorkspaceNavigation, { ...navigationProps, navLabel: navLabel, sections: sections }), sidebarFooter ? (_jsx("div", { className: "zvk-composite-sectioned-workspace-shell__sidebar-footer", children: sidebarFooter })) : null] }), _jsxs("div", { className: "zvk-composite-sectioned-workspace-shell__body", children: [hasHeader ? (_jsx(WorkspaceHeader, { ...headerProps, className: "zvk-composite-sectioned-workspace-shell__header", title: title ?? "" })) : null, _jsx("main", { className: "zvk-composite-sectioned-workspace-shell__content", children: children }), footer ? _jsx("footer", { className: "zvk-composite-sectioned-workspace-shell__footer", children: footer }) : null] })] }));
 }
 function SectionedWorkspaceNavigation({ activeItemId, navLabel, onItemSelect, sections }) {
     return (_jsx(SectionedSidebarNav, { className: "zvk-composite-sectioned-workspace-shell__nav", label: navLabel, children: sections.map((section) => (_jsxs(SectionedSidebarNav.Section, { children: [_jsx(SectionedSidebarNav.SectionTitle, { children: section.label }), _jsx(SectionedSidebarNav.List, { children: section.items.map((item) => (_jsx(SectionedWorkspaceNavigationItem, { active: item.id === activeItemId, item: item, onItemSelect: onItemSelect }, item.id))) })] }, section.id))) }));

package/dist/settings/parameter-editor.d.ts

@@ -0,0 +1,27 @@
+import * as React from "react";
+export type ParameterEditorDensity = "compact" | "default";
+export interface ParameterEditorGroup {
+    readonly id: string;
+    readonly title?: React.ReactNode;
+    readonly description?: React.ReactNode;
+    readonly rows: readonly ParameterEditorRow[];
+}
+export interface ParameterEditorRow {
+    readonly id: string;
+    readonly label: React.ReactNode;
+    readonly description?: React.ReactNode;
+    readonly value?: React.ReactNode;
+    readonly control: React.ReactNode;
+    readonly actions?: React.ReactNode;
+    readonly changed?: boolean;
+    readonly invalid?: boolean;
+    readonly disabled?: boolean;
+}
+export interface ParameterEditorProps extends React.HTMLAttributes<HTMLDivElement> {
+    readonly groups: readonly ParameterEditorGroup[];
+    readonly density?: ParameterEditorDensity;
+    readonly resetAllAction?: React.ReactNode;
+    readonly footer?: React.ReactNode;
+    readonly ref?: React.Ref<HTMLDivElement>;
+}
+export declare function ParameterEditor({ className, density, footer, groups, ref, resetAllAction, ...props }: ParameterEditorProps): React.JSX.Element;

package/dist/settings/parameter-editor.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../utils/cn.js";
+function hasValue(value) {
+    return value !== null && value !== undefined && value !== false;
+}
+function shouldRenderGroup(group) {
+    return hasValue(group.title) || hasValue(group.description) || group.rows.length > 0;
+}
+export function ParameterEditor({ className, density = "default", footer, groups, ref, resetAllAction, ...props }) {
+    return (_jsxs("div", { ...props, ref: ref, className: cn("zvk-composite-parameter-editor", className), "data-density": density, children: [hasValue(resetAllAction) ? (_jsx("div", { className: "zvk-composite-parameter-editor__toolbar", children: resetAllAction })) : null, _jsx("div", { className: "zvk-composite-parameter-editor__groups", children: groups.filter(shouldRenderGroup).map((group) => (_jsxs("section", { className: "zvk-composite-parameter-editor__group", children: [hasValue(group.title) || hasValue(group.description) ? (_jsxs("div", { className: "zvk-composite-parameter-editor__group-header", children: [hasValue(group.title) ? (_jsx("h3", { className: "zvk-composite-parameter-editor__group-title", children: group.title })) : null, hasValue(group.description) ? (_jsx("p", { className: "zvk-composite-parameter-editor__group-description", children: group.description })) : null] })) : null, group.rows.length > 0 ? (_jsx("div", { className: "zvk-composite-parameter-editor__rows", children: group.rows.map((row) => (_jsxs("div", { className: "zvk-composite-parameter-editor__row", "data-changed": row.changed ? "" : undefined, "data-disabled": row.disabled ? "" : undefined, "data-invalid": row.invalid ? "" : undefined, children: [_jsxs("div", { className: "zvk-composite-parameter-editor__row-copy", children: [_jsx("div", { className: "zvk-composite-parameter-editor__row-label", children: row.label }), hasValue(row.description) ? (_jsx("p", { className: "zvk-composite-parameter-editor__row-description", children: row.description })) : null] }), hasValue(row.value) ? (_jsx("div", { className: "zvk-composite-parameter-editor__row-value", children: row.value })) : null, _jsx("div", { className: "zvk-composite-parameter-editor__row-control", children: row.control }), hasValue(row.actions) ? (_jsx("div", { className: "zvk-composite-parameter-editor__row-actions", children: row.actions })) : null] }, row.id))) })) : null] }, group.id))) }), hasValue(footer) ? _jsx("div", { className: "zvk-composite-parameter-editor__footer", children: footer }) : null] }));
+}

package/dist/settings/settings-section-stack.d.ts

@@ -0,0 +1,20 @@
+import * as React from "react";
+export interface SettingsSection {
+    readonly id: string;
+    readonly title: React.ReactNode;
+    readonly description?: React.ReactNode;
+    readonly content: React.ReactNode;
+    readonly alert?: React.ReactNode;
+    readonly actions?: React.ReactNode;
+    readonly disabled?: boolean;
+}
+export interface SettingsSectionStackProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    readonly title?: React.ReactNode;
+    readonly description?: React.ReactNode;
+    readonly sections: readonly SettingsSection[];
+    readonly dirty?: boolean;
+    readonly saveBar?: React.ReactNode;
+    readonly footer?: React.ReactNode;
+    readonly ref?: React.Ref<HTMLDivElement>;
+}
+export declare function SettingsSectionStack({ className, description, dirty, footer, ref, saveBar, sections, title, ...props }: SettingsSectionStackProps): React.JSX.Element;

package/dist/settings/settings-section-stack.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../utils/cn.js";
+function hasValue(value) {
+    return value !== null && value !== undefined && value !== false;
+}
+export function SettingsSectionStack({ className, description, dirty = false, footer, ref, saveBar, sections, title, ...props }) {
+    const hasHeader = hasValue(title) || hasValue(description);
+    return (_jsxs("div", { ...props, ref: ref, className: cn("zvk-composite-settings-section-stack", className), "data-dirty": dirty ? "" : undefined, children: [hasHeader ? (_jsxs("div", { className: "zvk-composite-settings-section-stack__header", children: [hasValue(title) ? _jsx("h2", { className: "zvk-composite-settings-section-stack__title", children: title }) : null, hasValue(description) ? (_jsx("p", { className: "zvk-composite-settings-section-stack__description", children: description })) : null] })) : null, _jsx("div", { className: "zvk-composite-settings-section-stack__sections", children: sections.map((section) => (_jsxs("section", { className: "zvk-composite-settings-section-stack__section", "data-disabled": section.disabled ? "" : undefined, children: [_jsxs("div", { className: "zvk-composite-settings-section-stack__section-header", children: [_jsxs("div", { className: "zvk-composite-settings-section-stack__section-copy", children: [_jsx("h3", { className: "zvk-composite-settings-section-stack__section-title", children: section.title }), hasValue(section.description) ? (_jsx("p", { className: "zvk-composite-settings-section-stack__section-description", children: section.description })) : null] }), hasValue(section.actions) ? (_jsx("div", { className: "zvk-composite-settings-section-stack__section-actions", children: section.actions })) : null] }), hasValue(section.alert) ? (_jsx("div", { className: "zvk-composite-settings-section-stack__section-alert", children: section.alert })) : null, _jsx("div", { className: "zvk-composite-settings-section-stack__section-content", children: section.content })] }, section.id))) }), hasValue(saveBar) ? (_jsx("div", { className: "zvk-composite-settings-section-stack__save-bar", "data-dirty": dirty ? "" : undefined, children: saveBar })) : null, hasValue(footer) ? _jsx("div", { className: "zvk-composite-settings-section-stack__footer", children: footer }) : null] }));
+}

package/dist/state/route-state-frame.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+export type RouteStateFrameStatus = "loading" | "empty" | "error" | "not-found" | "ready";
+export interface RouteStateFrameProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "title"> {
+    readonly status: RouteStateFrameStatus;
+    readonly title?: React.ReactNode;
+    readonly description?: React.ReactNode;
+    readonly actions?: React.ReactNode;
+    readonly children?: React.ReactNode;
+}
+export declare function RouteStateFrame({ actions, children, className, description, status, title, ...props }: RouteStateFrameProps): React.JSX.Element;

package/dist/state/route-state-frame.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { StateSurface } from "../state/state-surface.js";
+import { cn } from "../utils/cn.js";
+const routeStateDefaults = {
+    loading: {
+        title: "Loading",
+        description: "Please wait while this view prepares its data."
+    },
+    empty: {
+        title: "Nothing to show",
+        description: "There are no items to display yet."
+    },
+    error: {
+        title: "Something went wrong",
+        description: "An error prevented this route from loading."
+    },
+    "not-found": {
+        title: "Page not found",
+        description: "The requested route is unavailable."
+    }
+};
+export function RouteStateFrame({ actions, children, className, description, status, title, ...props }) {
+    if (status === "ready") {
+        return (_jsx("section", { ...props, className: cn("zvk-composite-route-state-frame", className), "data-status": status, children: children }));
+    }
+    const fallback = routeStateDefaults[status];
+    const resolvedTitle = title ?? fallback.title;
+    const resolvedDescription = description ?? fallback.description;
+    return (_jsx(StateSurface, { ...props, actions: actions, className: cn("zvk-composite-route-state-frame", "zvk-composite-route-state-frame__surface", className), "data-status": status, description: resolvedDescription, state: status, title: resolvedTitle }));
+}