@zvk/composite 0.1.1 → 0.1.2

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 }));
+}