@minlang/design-system 0.2.0 → 0.3.0

package/dist/components/DetailCard.d.ts

@@ -0,0 +1,3 @@
+import type { WidgetProps } from "@minlang/runtime-web";
+import type { ReactElement } from "react";
+export declare const DetailCard: ({ node, deps }: WidgetProps<"detail">) => ReactElement;

package/dist/components/DetailCard.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cellText, rowsFromViewModel } from "./cellText.js";
+export const DetailCard = ({ node, deps }) => {
+    const row = rowsFromViewModel(deps.viewModels[node.query])[0];
+    if (row === undefined) {
+        return (_jsx("p", { role: "note", className: "rounded-ml-md border border-dashed border-edge p-ml-lg text-center text-ink-muted", children: "No result yet." }));
+    }
+    return (_jsx("section", { "aria-label": node.a11y.label, className: "rounded-ml-lg border border-edge bg-surface p-ml-lg", children: _jsx("dl", { className: "grid gap-ml-sm", children: node.fields.map((field) => (_jsxs("div", { className: "grid gap-1", children: [_jsx("dt", { className: "text-xs font-semibold uppercase tracking-wide text-ink-muted", children: field.label }), _jsx("dd", { className: "text-ink", children: cellText(row, field) })] }, field.field))) }) }));
+};

package/dist/components/EffectForm.d.ts

@@ -0,0 +1,3 @@
+import type { WidgetProps } from "@minlang/runtime-web";
+import type { ReactElement } from "react";
+export declare const EffectForm: ({ node, deps }: WidgetProps<"effect_form">) => ReactElement;

package/dist/components/EffectForm.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ActionFormClient } from "./ActionFormClient.js";
+import { fieldOptions } from "./fieldOptions.js";
+export const EffectForm = ({ node, deps }) => (_jsxs("section", { "aria-label": node.a11y.label, className: "rounded-ml-lg border border-edge bg-surface p-ml-lg shadow-ml-sm", children: [_jsx(ActionFormClient, { label: node.a11y.label, submitLabel: node.submitLabel, errorId: `effect-form-error-${node.name}`, fields: node.fields.map((field) => ({
+                field,
+                options: fieldOptions(field, deps.state),
+            })), handler: deps.actions[node.action] ?? null }), _jsx("p", { className: "mt-ml-sm text-sm text-ink-muted", "aria-live": "polite", children: node.pendingCopy })] }));

package/dist/components/FormField.js

@@ -8,6 +8,9 @@ const Control = ({ id, field, options, }) => {
     if (field.control === "checkbox") {
         return _jsx("input", { id: id, name: field.name, type: "checkbox", className: "h-4 w-4 accent-primary" });
     }
+    if (field.control === "file") {
+        return _jsx("input", { id: id, name: field.name, type: "file", className: inputClass });
+    }
     const type = field.control === "number" ? "number" : field.control === "datetime" ? "datetime-local" : "text";
     return _jsx("input", { id: id, name: field.name, type: type, className: inputClass });
 };

package/dist/index.d.ts

@@ -10,6 +10,8 @@ export { ActionForm } from "./components/ActionForm.js";
 export { ActionFormClient } from "./components/ActionFormClient.js";
 export { CardGrid } from "./components/CardGrid.js";
 export { DataTable } from "./components/DataTable.js";
+export { DetailCard } from "./components/DetailCard.js";
+export { EffectForm } from "./components/EffectForm.js";
 export { EmptyState } from "./components/EmptyState.js";
 export { FormField } from "./components/FormField.js";
 export { Heading } from "./components/Heading.js";

package/dist/index.js

@@ -12,6 +12,8 @@ export { ActionForm } from "./components/ActionForm.js";
 export { ActionFormClient } from "./components/ActionFormClient.js";
 export { CardGrid } from "./components/CardGrid.js";
 export { DataTable } from "./components/DataTable.js";
+export { DetailCard } from "./components/DetailCard.js";
+export { EffectForm } from "./components/EffectForm.js";
 export { EmptyState } from "./components/EmptyState.js";
 export { FormField } from "./components/FormField.js";
 export { Heading } from "./components/Heading.js";

package/dist/registry.js

@@ -5,6 +5,8 @@
 import { ActionForm } from "./components/ActionForm.js";
 import { CardGrid } from "./components/CardGrid.js";
 import { DataTable } from "./components/DataTable.js";
+import { DetailCard } from "./components/DetailCard.js";
+import { EffectForm } from "./components/EffectForm.js";
 import { EmptyState } from "./components/EmptyState.js";
 import { Heading } from "./components/Heading.js";
 import { HeadlineBanner } from "./components/HeadlineBanner.js";
@@ -24,6 +26,8 @@ export const defaultRegistry = {
     table: DataTable,
     card_grid: CardGrid,
     form: ActionForm,
+    effect_form: EffectForm,
+    detail: DetailCard,
     primary_action: PrimaryActionButton,
     secondary_action: SecondaryActionButton,
     tap_target: TapTargetButton,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@minlang/design-system",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "type": "module",
   "exports": {
     ".": {
@@ -9,7 +9,7 @@
     }
   },
   "dependencies": {
-    "@minlang/runtime-web": "^0.2.0"
+    "@minlang/runtime-web": "^0.3.0"
   },
   "peerDependencies": {
     "react": "19.2.7"