@cratis/components 0.1.18 → 1.0.3

package/dist/cjs/TimeMachine/TimeMachine.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimeMachine.js","sources":["../../../TimeMachine/TimeMachine.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport React, { useState, useCallback, useRef, useEffect } from 'react';\nimport type { Version } from './types';\nimport { ReadModelView } from './ReadModelView';\nimport { EventsView } from './EventsView';\nimport './TimeMachine.css';\n\nenum ViewModes {\n  ReadModel = 'ReadModel',\n  Events = 'Events',\n}\n\ninterface TimeMachineProps {\n  versions: Version[];\n  currentVersionIndex?: number;\n  onVersionChange?: (index: number) => void;\n  /** Scroll sensitivity - higher values require more scrolling to change versions */\n  scrollSensitivity?: number;\n}\n\nexport const TimeMachine: React.FC<TimeMachineProps> = ({\n  versions,\n  currentVersionIndex = 0,\n  onVersionChange,\n  scrollSensitivity = 50,\n}) => {\n  const [selectedIndex, setSelectedIndex] = useState(currentVersionIndex);\n  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);\n  const [isHoveringCard, setIsHoveringCard] = useState(false);\n  const [viewMode, setViewMode] = useState<ViewModes>(ViewModes.ReadModel);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const scrollAccumulatorRef = useRef(0);\n\n  const handleVersionSelect = useCallback((index: number) => {\n    setSelectedIndex(index);\n    onVersionChange?.(index);\n  }, [onVersionChange]);\n\n  const handleTimelineHover = useCallback((index: number | null) => {\n    setHoveredIndex(index);\n  }, []);\n\n  // Handle trackpad two-finger scroll gesture\n  useEffect(() => {\n    if (viewMode !== ViewModes.ReadModel) {\n      return;\n    }\n\n    const container = containerRef.current;\n    if (!container) return;\n\n    const handleWheel = (e: WheelEvent) => {\n      // Only handle navigation when not hovering over a card\n      if (isHoveringCard) {\n        return; // Allow normal scrolling within cards\n      }\n\n      // Prevent default scrolling behavior\n      e.preventDefault();\n\n      // Use deltaX for horizontal scroll, fallback to deltaY for vertical\n      // Most trackpads send horizontal delta for two-finger swipe\n      const delta = Math.abs(e.deltaX) > Math.abs(e.deltaY) ? e.deltaX : e.deltaY;\n\n      // Accumulate scroll delta\n      scrollAccumulatorRef.current += delta;\n\n      // Check if we've accumulated enough scroll to change version\n      if (Math.abs(scrollAccumulatorRef.current) >= scrollSensitivity) {\n        const direction = scrollAccumulatorRef.current > 0 ? 1 : -1;\n        const newIndex = Math.max(0, Math.min(versions.length - 1, selectedIndex + direction));\n\n        if (newIndex !== selectedIndex) {\n          setSelectedIndex(newIndex);\n          onVersionChange?.(newIndex);\n        }\n\n        // Reset accumulator after version change\n        scrollAccumulatorRef.current = 0;\n      }\n    };\n\n    container.addEventListener('wheel', handleWheel, { passive: false });\n\n    return () => {\n      container.removeEventListener('wheel', handleWheel);\n    };\n  }, [versions.length, selectedIndex, onVersionChange, scrollSensitivity, isHoveringCard, viewMode]);\n\n  // Calculate the display index - either hovered or selected\n  // (not used in this component; ReadModelView computes its own display index)\n  void hoveredIndex;\n  void selectedIndex;\n\n  // Get all events from all versions\n  const allEvents = versions.flatMap(version => version.events || []);\n\n  return (\n    <div className=\"time-machine\" ref={containerRef}>\n      {/* View Switcher */}\n      <div className=\"view-switcher\">\n        <button\n          className={`view-button ${viewMode === ViewModes.ReadModel ? 'active' : ''}`}\n          onClick={() => setViewMode(ViewModes.ReadModel)}\n          aria-label=\"Read Model View\"\n          title=\"Read Model View\"\n        >\n          <i className=\"pi pi-box\" />\n        </button>\n        <button\n          className={`view-button ${viewMode === ViewModes.Events ? 'active' : ''}`}\n          onClick={() => setViewMode(ViewModes.Events)}\n          aria-label=\"Events View\"\n          title=\"Events View\"\n        >\n          <i className=\"pi pi-list\" />\n        </button>\n      </div>\n\n      {/* Render the appropriate view */}\n      {viewMode === ViewModes.ReadModel ? (\n        <ReadModelView\n          versions={versions}\n          selectedIndex={selectedIndex}\n          hoveredIndex={hoveredIndex}\n          onVersionSelect={handleVersionSelect}\n          onHoveringCardChange={setIsHoveringCard}\n        />\n      ) : (\n        <EventsView events={allEvents} />\n      )}\n\n      {/* Timeline - only show in ReadModel view */}\n      {viewMode === ViewModes.ReadModel && (\n        <Timeline\n          versions={versions}\n          selectedIndex={selectedIndex}\n          hoveredIndex={hoveredIndex}\n          onSelect={handleVersionSelect}\n          onHover={handleTimelineHover}\n        />\n      )}\n\n      {/* Navigation arrows - only show in ReadModel view */}\n      {viewMode === ViewModes.ReadModel && (\n        <div className=\"navigation-controls\">\n          <button\n            className=\"nav-button prev\"\n            disabled={selectedIndex === 0}\n            onClick={() => handleVersionSelect(Math.max(0, selectedIndex - 1))}\n            aria-label=\"Previous version\"\n          >\n            ‹\n          </button>\n          <button\n            className=\"nav-button next\"\n            disabled={selectedIndex === versions.length - 1}\n            onClick={() => handleVersionSelect(Math.min(versions.length - 1, selectedIndex + 1))}\n            aria-label=\"Next version\"\n          >\n            ›\n          </button>\n        </div>\n      )}\n    </div>\n  );\n};\n\ninterface TimelineProps {\n  versions: Version[];\n  selectedIndex: number;\n  hoveredIndex: number | null;\n  onSelect: (index: number) => void;\n  onHover: (index: number | null) => void;\n}\n\nconst Timeline: React.FC<TimelineProps> = ({\n  versions,\n  selectedIndex,\n  hoveredIndex,\n  onSelect,\n  onHover,\n}) => {\n  const getMagnification = (index: number, hoverIdx: number | null): number => {\n    if (hoverIdx === null) return 1;\n    const distance = Math.abs(index - hoverIdx);\n    // Fish-eye effect: items close to hover get magnified\n    if (distance === 0) return 2.0;\n    if (distance === 1) return 1.6;\n    if (distance === 2) return 1.3;\n    if (distance === 3) return 1.1;\n    return 1;\n  };\n\n  const formatDate = (date: Date): string => {\n    return date.toLocaleDateString('en-US', {\n      month: 'short',\n      day: 'numeric',\n      year: 'numeric',\n    });\n  };\n\n  const formatTime = (date: Date): string => {\n    return date.toLocaleTimeString('en-US', {\n      hour: 'numeric',\n      minute: '2-digit',\n      hour12: true,\n    });\n  };\n\n  return (\n    <div\n      className=\"timeline\"\n      onMouseLeave={() => onHover(null)}\n    >\n      <div className=\"timeline-track\">\n        {versions.map((version, index) => {\n          const magnification = getMagnification(index, hoveredIndex);\n          const isSelected = index === selectedIndex;\n          const isHovered = index === hoveredIndex;\n\n          return (\n            <div\n              key={version.id}\n              className={`timeline-entry ${isSelected ? 'selected' : ''} ${isHovered ? 'hovered' : ''}`}\n              style={{\n                '--magnification': magnification,\n              } as React.CSSProperties}\n              onMouseEnter={() => onHover(index)}\n              onClick={() => onSelect(index)}\n            >\n              <div className=\"timeline-tick\"></div>\n              <div className=\"timeline-label\">\n                <span className=\"timeline-date\">{formatDate(version.timestamp)}</span>\n                <span className=\"timeline-time\">{formatTime(version.timestamp)}</span>\n              </div>\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n};\n\nexport default TimeMachine;\n"],"names":["useState","useRef","useCallback","useEffect","_jsxs","_jsx","ReadModelView","EventsView"],"mappings":"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"}
+{"version":3,"file":"TimeMachine.js","sources":["../../../TimeMachine/TimeMachine.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport React, { useState, useCallback, useRef, useEffect } from 'react';\nimport type { Version } from './types';\nimport { ReadModelView } from './ReadModelView';\nimport { EventsView } from './EventsView';\nimport './TimeMachine.css';\n\nenum ViewModes {\n  ReadModel = 'ReadModel',\n  Events = 'Events',\n}\n\ninterface TimeMachineProps {\n  versions: Version[];\n  currentVersionIndex?: number;\n  onVersionChange?: (index: number) => void;\n  /** Scroll sensitivity - higher values require more scrolling to change versions */\n  scrollSensitivity?: number;\n}\n\nexport const TimeMachine: React.FC<TimeMachineProps> = ({\n  versions,\n  currentVersionIndex = 0,\n  onVersionChange,\n  scrollSensitivity = 50,\n}) => {\n  const [selectedIndex, setSelectedIndex] = useState(currentVersionIndex);\n  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);\n  const [isHoveringCard, setIsHoveringCard] = useState(false);\n  const [viewMode, setViewMode] = useState<ViewModes>(ViewModes.ReadModel);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const scrollAccumulatorRef = useRef(0);\n\n  const handleVersionSelect = useCallback((index: number) => {\n    setSelectedIndex(index);\n    onVersionChange?.(index);\n  }, [onVersionChange]);\n\n  const handleTimelineHover = useCallback((index: number | null) => {\n    setHoveredIndex(index);\n  }, []);\n\n  // Handle trackpad two-finger scroll gesture\n  useEffect(() => {\n    if (viewMode !== ViewModes.ReadModel) {\n      return;\n    }\n\n    const container = containerRef.current;\n    if (!container) return;\n\n    const handleWheel = (e: WheelEvent) => {\n      // Only handle navigation when not hovering over a card\n      if (isHoveringCard) {\n        return; // Allow normal scrolling within cards\n      }\n\n      // Prevent default scrolling behavior\n      e.preventDefault();\n\n      // Use deltaX for horizontal scroll, fallback to deltaY for vertical\n      // Most trackpads send horizontal delta for two-finger swipe\n      const delta = Math.abs(e.deltaX) > Math.abs(e.deltaY) ? e.deltaX : e.deltaY;\n\n      // Accumulate scroll delta\n      scrollAccumulatorRef.current += delta;\n\n      // Check if we've accumulated enough scroll to change version\n      if (Math.abs(scrollAccumulatorRef.current) >= scrollSensitivity) {\n        const direction = scrollAccumulatorRef.current > 0 ? 1 : -1;\n        const newIndex = Math.max(0, Math.min(versions.length - 1, selectedIndex + direction));\n\n        if (newIndex !== selectedIndex) {\n          setSelectedIndex(newIndex);\n          onVersionChange?.(newIndex);\n        }\n\n        // Reset accumulator after version change\n        scrollAccumulatorRef.current = 0;\n      }\n    };\n\n    container.addEventListener('wheel', handleWheel, { passive: false });\n\n    return () => {\n      container.removeEventListener('wheel', handleWheel);\n    };\n  }, [versions.length, selectedIndex, onVersionChange, scrollSensitivity, isHoveringCard, viewMode]);\n\n  // Calculate the display index - either hovered or selected\n  // (not used in this component; ReadModelView computes its own display index)\n  void hoveredIndex;\n  void selectedIndex;\n\n  // Get all events from all versions\n  const allEvents = versions.flatMap(version => version.events || []);\n\n  return (\n    <div className=\"time-machine\" ref={containerRef}>\n      {/* View Switcher */}\n      <div className=\"view-switcher\">\n        <button\n          className={`view-button ${viewMode === ViewModes.ReadModel ? 'active' : ''}`}\n          onClick={() => setViewMode(ViewModes.ReadModel)}\n          aria-label=\"Read Model View\"\n          title=\"Read Model View\"\n        >\n          <i className=\"pi pi-box\" />\n        </button>\n        <button\n          className={`view-button ${viewMode === ViewModes.Events ? 'active' : ''}`}\n          onClick={() => setViewMode(ViewModes.Events)}\n          aria-label=\"Events View\"\n          title=\"Events View\"\n        >\n          <i className=\"pi pi-list\" />\n        </button>\n      </div>\n\n      {/* Render the appropriate view */}\n      {viewMode === ViewModes.ReadModel ? (\n        <ReadModelView\n          versions={versions}\n          selectedIndex={selectedIndex}\n          hoveredIndex={hoveredIndex}\n          onVersionSelect={handleVersionSelect}\n          onHoveringCardChange={setIsHoveringCard}\n        />\n      ) : (\n        <EventsView events={allEvents} />\n      )}\n\n      {/* Timeline - only show in ReadModel view */}\n      {viewMode === ViewModes.ReadModel && (\n        <Timeline\n          versions={versions}\n          selectedIndex={selectedIndex}\n          hoveredIndex={hoveredIndex}\n          onSelect={handleVersionSelect}\n          onHover={handleTimelineHover}\n        />\n      )}\n\n      {/* Navigation arrows - only show in ReadModel view */}\n      {viewMode === ViewModes.ReadModel && (\n        <div className=\"navigation-controls\">\n          <button\n            className=\"nav-button prev\"\n            disabled={selectedIndex === 0}\n            onClick={() => handleVersionSelect(Math.max(0, selectedIndex - 1))}\n            aria-label=\"Previous version\"\n          >\n            ‹\n          </button>\n          <button\n            className=\"nav-button next\"\n            disabled={selectedIndex === versions.length - 1}\n            onClick={() => handleVersionSelect(Math.min(versions.length - 1, selectedIndex + 1))}\n            aria-label=\"Next version\"\n          >\n            ›\n          </button>\n        </div>\n      )}\n    </div>\n  );\n};\n\ninterface TimelineProps {\n  versions: Version[];\n  selectedIndex: number;\n  hoveredIndex: number | null;\n  onSelect: (index: number) => void;\n  onHover: (index: number | null) => void;\n}\n\nconst Timeline: React.FC<TimelineProps> = ({\n  versions,\n  selectedIndex,\n  hoveredIndex,\n  onSelect,\n  onHover,\n}) => {\n  const getMagnification = (index: number, hoverIdx: number | null): number => {\n    if (hoverIdx === null) return 1;\n    const distance = Math.abs(index - hoverIdx);\n    // Fish-eye effect: items close to hover get magnified\n    if (distance === 0) return 2.0;\n    if (distance === 1) return 1.6;\n    if (distance === 2) return 1.3;\n    if (distance === 3) return 1.1;\n    return 1;\n  };\n\n  const formatDate = (date: Date): string => {\n    return date.toLocaleDateString('en-US', {\n      month: 'short',\n      day: 'numeric',\n      year: 'numeric',\n    });\n  };\n\n  const formatTime = (date: Date): string => {\n    return date.toLocaleTimeString('en-US', {\n      hour: 'numeric',\n      minute: '2-digit',\n      hour12: true,\n    });\n  };\n\n  return (\n    <div\n      className=\"timeline\"\n      onMouseLeave={() => onHover(null)}\n    >\n      <div className=\"timeline-track\">\n        {versions.map((version, index) => {\n          const magnification = getMagnification(index, hoveredIndex);\n          const isSelected = index === selectedIndex;\n          const isHovered = index === hoveredIndex;\n\n          return (\n            <div\n              key={version.id}\n              className={`timeline-entry ${isSelected ? 'selected' : ''} ${isHovered ? 'hovered' : ''}`}\n              style={{\n                '--magnification': magnification,\n              } as React.CSSProperties}\n              onMouseEnter={() => onHover(index)}\n              onClick={() => onSelect(index)}\n            >\n              <div className=\"timeline-tick\"></div>\n              <div className=\"timeline-label\">\n                <span className=\"timeline-date\">{formatDate(version.timestamp)}</span>\n                <span className=\"timeline-time\">{formatTime(version.timestamp)}</span>\n              </div>\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n};\n\nexport default TimeMachine;\n"],"names":["useState","useRef","useCallback","useEffect","_jsxs","_jsx","ReadModelView","EventsView"],"mappings":"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"}

package/dist/cjs/index.js

@@ -2,21 +2,29 @@
 
 var index = require('./CommandDialog/index.js');
 var index$1 = require('./CommandForm/index.js');
-var index$2 = require('./DataPage/index.js');
-var index$3 = require('./DataTables/index.js');
-var index$4 = require('./Dialogs/index.js');
-var index$5 = require('./Dropdown/index.js');
-var index$6 = require('./PivotViewer/index.js');
-var index$7 = require('./TimeMachine/index.js');
+var index$2 = require('./Common/index.js');
+var index$3 = require('./DataPage/index.js');
+var index$4 = require('./DataTables/index.js');
+var index$5 = require('./Dialogs/index.js');
+var index$6 = require('./Dropdown/index.js');
+var index$7 = require('./ObjectContentEditor/index.js');
+var index$8 = require('./ObjectNavigationalBar/index.js');
+var index$9 = require('./PivotViewer/index.js');
+var index$a = require('./SchemaEditor/index.js');
+var index$b = require('./TimeMachine/index.js');
 
 
 
 exports.CommandDialog = index;
 exports.CommandForm = index$1;
-exports.DataPage = index$2;
-exports.dataTables = index$3;
-exports.dialogs = index$4;
-exports.Dropdown = index$5;
-exports.PivotViewer = index$6;
-exports.TimeMachine = index$7;
+exports.Common = index$2;
+exports.DataPage = index$3;
+exports.DataTables = index$4;
+exports.Dialogs = index$5;
+exports.Dropdown = index$6;
+exports.ObjectContentEditor = index$7;
+exports.ObjectNavigationalBar = index$8;
+exports.PivotViewer = index$9;
+exports.SchemaEditor = index$a;
+exports.TimeMachine = index$b;
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/cjs/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "commonjs"
+}

package/dist/cjs/types/TypeFormat.js

@@ -0,0 +1,20 @@
+'use strict';
+
+const DEFAULT_TYPE_FORMATS = [
+    { jsonType: 'string', format: '' },
+    { jsonType: 'string', format: 'guid' },
+    { jsonType: 'string', format: 'date-time' },
+    { jsonType: 'string', format: 'date' },
+    { jsonType: 'string', format: 'time' },
+    { jsonType: 'integer', format: '' },
+    { jsonType: 'integer', format: 'int16' },
+    { jsonType: 'integer', format: 'int32' },
+    { jsonType: 'integer', format: 'int64' },
+    { jsonType: 'number', format: '' },
+    { jsonType: 'number', format: 'float' },
+    { jsonType: 'number', format: 'double' },
+    { jsonType: 'boolean', format: '' },
+];
+
+exports.DEFAULT_TYPE_FORMATS = DEFAULT_TYPE_FORMATS;
+//# sourceMappingURL=TypeFormat.js.map

package/dist/cjs/types/TypeFormat.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TypeFormat.js","sources":["../../../types/TypeFormat.ts"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nexport interface TypeFormat {\n    jsonType: string;\n    format: string;\n}\n\nexport const DEFAULT_TYPE_FORMATS: TypeFormat[] = [\n    { jsonType: 'string', format: '' },\n    { jsonType: 'string', format: 'guid' },\n    { jsonType: 'string', format: 'date-time' },\n    { jsonType: 'string', format: 'date' },\n    { jsonType: 'string', format: 'time' },\n    { jsonType: 'integer', format: '' },\n    { jsonType: 'integer', format: 'int16' },\n    { jsonType: 'integer', format: 'int32' },\n    { jsonType: 'integer', format: 'int64' },\n    { jsonType: 'number', format: '' },\n    { jsonType: 'number', format: 'float' },\n    { jsonType: 'number', format: 'double' },\n    { jsonType: 'boolean', format: '' },\n];\n"],"names":[],"mappings":";;AAQO,MAAM,oBAAoB,GAAiB;AAC9C,IAAA,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE;AAClC,IAAA,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE;AACtC,IAAA,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,WAAW,EAAE;AAC3C,IAAA,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE;AACtC,IAAA,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE;AACtC,IAAA,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,EAAE,EAAE;AACnC,IAAA,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE;AACxC,IAAA,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE;AACxC,IAAA,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE;AACxC,IAAA,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE;AAClC,IAAA,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE;AACvC,IAAA,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE;AACxC,IAAA,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,EAAE,EAAE;;;;;"}

package/dist/esm/CommandDialog/CommandDialog.d.ts

@@ -1,7 +1,7 @@
 import { ICommandResult } from '@cratis/arc/commands';
 import { Constructor } from '@cratis/fundamentals';
 import React from 'react';
-import { BeforeExecuteCallback } from '../CommandForm/CommandForm';
+export type BeforeExecuteCallback<TCommand> = (values: TCommand) => TCommand;
 export type FieldValidator<TCommand> = (command: TCommand, fieldName: string, oldValue: unknown, newValue: unknown) => string | undefined;
 export type FieldChangeCallback<TCommand> = (command: TCommand, fieldName: string, oldValue: unknown, newValue: unknown) => void;
 export interface CommandDialogProps<TCommand, TResponse = object> {

package/dist/esm/CommandDialog/CommandDialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CommandDialog.d.ts","sourceRoot":"","sources":["../../../CommandDialog/CommandDialog.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAGnD,OAAO,KAAoC,MAAM,OAAO,CAAC;AACzD,OAAO,EAAsC,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AAGvG,MAAM,MAAM,cAAc,CAAC,QAAQ,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,KAAK,MAAM,GAAG,SAAS,CAAC;AAC1I,MAAM,MAAM,mBAAmB,CAAC,QAAQ,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;AAEjI,MAAM,WAAW,kBAAkB,CAAC,QAAQ,EAAE,SAAS,GAAG,MAAM;IAC5D,OAAO,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC;IAC/B,aAAa,CAAC,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAC;IAClC,aAAa,CAAC,EAAE,OAAO,CAAC,QAAQ,CAAC,GAAG,SAAS,CAAC;IAC9C,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,CAAC,MAAM,EAAE,cAAc,CAAC,SAAS,CAAC,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACvE,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,eAAe,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC;IAC3C,aAAa,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IAC9C,eAAe,CAAC,EAAE,qBAAqB,CAAC,QAAQ,CAAC,CAAC;IAClD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,yBAAyB,CAAC,QAAQ,GAAG,OAAO;IAClD,SAAS,EAAE,CAAC,MAAM,EAAE,cAAc,CAAC,OAAO,CAAC,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACrE,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC;IAC3C,aAAa,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IAC9C,eAAe,CAAC,EAAE,qBAAqB,CAAC,QAAQ,CAAC,CAAC;CACrD;AAID,eAAO,MAAM,uBAAuB,GAAI,QAAQ,GAAG,OAAO,OAKpC,yBAAyB,CAAC,QAAQ,CACvD,CAAC;AA0GF,eAAO,MAAM,aAAa;KAvDM,QAAQ,SAAS,MAAM,WAAW,SAAS,kBAAkB,kBAAkB,CAAC,QAAQ,EAAE,SAAS,CAAC;oBAjBzF;QAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;KAAE;CAwErB,CAAC"}
+{"version":3,"file":"CommandDialog.d.ts","sourceRoot":"","sources":["../../../CommandDialog/CommandDialog.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAGnD,OAAO,KAAoC,MAAM,OAAO,CAAC;AAQzD,MAAM,MAAM,qBAAqB,CAAC,QAAQ,IAAI,CAAC,MAAM,EAAE,QAAQ,KAAK,QAAQ,CAAC;AAE7E,MAAM,MAAM,cAAc,CAAC,QAAQ,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,KAAK,MAAM,GAAG,SAAS,CAAC;AAC1I,MAAM,MAAM,mBAAmB,CAAC,QAAQ,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;AAEjI,MAAM,WAAW,kBAAkB,CAAC,QAAQ,EAAE,SAAS,GAAG,MAAM;IAC5D,OAAO,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC;IAC/B,aAAa,CAAC,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAC;IAClC,aAAa,CAAC,EAAE,OAAO,CAAC,QAAQ,CAAC,GAAG,SAAS,CAAC;IAC9C,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,CAAC,MAAM,EAAE,cAAc,CAAC,SAAS,CAAC,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACvE,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,eAAe,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC;IAC3C,aAAa,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IAC9C,eAAe,CAAC,EAAE,qBAAqB,CAAC,QAAQ,CAAC,CAAC;IAClD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,yBAAyB,CAAC,QAAQ,GAAG,OAAO;IAClD,SAAS,EAAE,CAAC,MAAM,EAAE,cAAc,CAAC,OAAO,CAAC,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACrE,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC;IAC3C,aAAa,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IAC9C,eAAe,CAAC,EAAE,qBAAqB,CAAC,QAAQ,CAAC,CAAC;CACrD;AAID,eAAO,MAAM,uBAAuB,GAAI,QAAQ,GAAG,OAAO,OAKpC,yBAAyB,CAAC,QAAQ,CACvD,CAAC;AA8HF,eAAO,MAAM,aAAa;KA5DM,QAAQ,SAAS,MAAM,WAAW,SAAS,kBAAkB,kBAAkB,CAAC,QAAQ,EAAE,SAAS,CAAC;oBARzF;QAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;KAAE;CAoErB,CAAC"}

package/dist/esm/CommandDialog/CommandDialog.js

@@ -1,8 +1,8 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { Dialog } from 'primereact/dialog';
-import { Button } from 'primereact/button';
-import React, { createContext, useContext } from 'react';
-import { CommandForm, useCommandInstance, useCommandFormContext } from '../CommandForm/CommandForm.js';
+import { jsx } from 'react/jsx-runtime';
+import { DialogButtons } from '@cratis/arc.react/dialogs';
+import { Dialog } from '../Dialogs/Dialog.js';
+import { createContext, useContext } from 'react';
+import { CommandForm, useCommandFormContext, useCommandInstance } from '@cratis/arc.react/commands';
 
 const CommandDialogContext = createContext(undefined);
 const useCommandDialogContext = () => {
@@ -12,42 +12,31 @@ const useCommandDialogContext = () => {
     }
     return context;
 };
-const CommandDialogFormContent = () => {
-    const command = useCommandInstance();
-    const { setCommandResult, setCommandValues, isValid, onBeforeExecute } = useCommandFormContext();
-    const { onSuccess: onConfirm, onCancel, confirmLabel, cancelLabel, confirmIcon, cancelIcon } = useCommandDialogContext();
+const CommandDialogWrapper = ({ header, visible, width, confirmLabel, cancelLabel, onConfirm, onCancel, onBeforeExecute, children }) => {
+    const { isValid, setCommandValues, setCommandResult } = useCommandFormContext();
+    const commandInstance = useCommandInstance();
     const handleConfirm = async () => {
         if (onBeforeExecute) {
-            const transformedValues = onBeforeExecute(command);
+            const transformedValues = onBeforeExecute(commandInstance);
             setCommandValues(transformedValues);
         }
-        const result = await command.execute();
+        const result = await commandInstance.execute();
         if (result.isSuccess) {
             await onConfirm(result);
+            return true;
         }
         else {
             setCommandResult(result);
+            return false;
         }
     };
-    const handleCancel = () => {
-        onCancel();
-    };
-    return (jsx(Fragment, { children: jsxs("div", { className: "card flex flex-wrap justify-content-center gap-3 mt-8", children: [jsx(Button, { label: confirmLabel, icon: confirmIcon, onClick: handleConfirm, disabled: !isValid }), jsx(Button, { label: cancelLabel, icon: cancelIcon, severity: 'secondary', onClick: handleCancel })] }) }));
+    return (jsx(Dialog, { title: header, visible: visible, width: width, onConfirm: handleConfirm, onCancel: onCancel, buttons: DialogButtons.OkCancel, okLabel: confirmLabel, cancelLabel: cancelLabel, isValid: isValid, children: children }));
 };
 const CommandDialogFieldsWrapper = (props) => {
-    React.Children.forEach(props.children, child => {
-        if (React.isValidElement(child)) {
-            const component = child.type;
-            if (component.displayName !== 'CommandFormField') {
-                throw new Error(`Only CommandFormField components are allowed as children of CommandDialog.Fields. Got: ${component.displayName || component.name || 'Unknown'}`);
-            }
-        }
-    });
     return (jsx(CommandForm.Fields, { children: props.children }));
 };
 const CommandDialogComponent = (props) => {
-    const { command, initialValues, currentValues, visible, header, confirmLabel = 'Confirm', cancelLabel = 'Cancel', confirmIcon = 'pi pi-check', cancelIcon = 'pi pi-times', onConfirm, onCancel, onFieldValidate, onFieldChange, onBeforeExecute, children, style = { width: '50vw' }, width } = props;
-    const dialogStyle = width ? { ...style, width } : style;
+    const { command, initialValues, currentValues, visible, header, confirmLabel = 'Confirm', cancelLabel = 'Cancel', confirmIcon = 'pi pi-check', cancelIcon = 'pi pi-times', onConfirm, onCancel, onFieldValidate, onFieldChange, onBeforeExecute, children, width = '50vw' } = props;
     const contextValue = {
         onSuccess: onConfirm,
         onCancel,
@@ -59,7 +48,7 @@ const CommandDialogComponent = (props) => {
         onFieldChange,
         onBeforeExecute
     };
-    return (jsx(Dialog, { header: header, visible: visible, style: dialogStyle, onHide: onCancel, contentStyle: { overflow: 'visible' }, children: jsx(CommandDialogContext.Provider, { value: contextValue, children: jsxs(CommandForm, { command: command, initialValues: initialValues, currentValues: currentValues, onFieldValidate: onFieldValidate, onFieldChange: onFieldChange, onBeforeExecute: onBeforeExecute, children: [children, jsx(CommandDialogFormContent, {})] }) }) }));
+    return (jsx(CommandDialogContext.Provider, { value: contextValue, children: jsx(CommandForm, { command: command, initialValues: initialValues, currentValues: currentValues, onFieldValidate: onFieldValidate, onFieldChange: onFieldChange, onBeforeExecute: onBeforeExecute, children: jsx(CommandDialogWrapper, { header: header, visible: visible, width: width, confirmLabel: confirmLabel, cancelLabel: cancelLabel, onConfirm: onConfirm, onCancel: onCancel, onBeforeExecute: onBeforeExecute, children: children }) }) }));
 };
 CommandDialogComponent.Fields = CommandDialogFieldsWrapper;
 const CommandDialog = CommandDialogComponent;

package/dist/esm/CommandDialog/CommandDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"CommandDialog.js","sources":["../../../CommandDialog/CommandDialog.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { ICommandResult } from '@cratis/arc/commands';\nimport { Constructor } from '@cratis/fundamentals';\nimport { Dialog } from 'primereact/dialog';\nimport { Button } from 'primereact/button';\nimport React, { createContext, useContext } from 'react';\nimport { CommandForm, useCommandFormContext, BeforeExecuteCallback } from '../CommandForm/CommandForm';\nimport { useCommandInstance } from '../CommandForm/CommandForm';\n\nexport type FieldValidator<TCommand> = (command: TCommand, fieldName: string, oldValue: unknown, newValue: unknown) => string | undefined;\nexport type FieldChangeCallback<TCommand> = (command: TCommand, fieldName: string, oldValue: unknown, newValue: unknown) => void;\n\nexport interface CommandDialogProps<TCommand, TResponse = object> {\n    command: Constructor<TCommand>;\n    initialValues?: Partial<TCommand>;\n    currentValues?: Partial<TCommand> | undefined;\n    visible: boolean;\n    header: string;\n    confirmLabel?: string;\n    cancelLabel?: string;\n    confirmIcon?: string;\n    cancelIcon?: string;\n    onConfirm: (result: ICommandResult<TResponse>) => void | Promise<void>;\n    onCancel: () => void;\n    onFieldValidate?: FieldValidator<TCommand>;\n    onFieldChange?: FieldChangeCallback<TCommand>;\n    onBeforeExecute?: BeforeExecuteCallback<TCommand>;\n    children?: React.ReactNode;\n    style?: React.CSSProperties;\n    width?: string;\n}\n\ninterface CommandDialogContextValue<TCommand = unknown> {\n    onSuccess: (result: ICommandResult<unknown>) => void | Promise<void>;\n    onCancel: () => void;\n    confirmLabel: string;\n    cancelLabel: string;\n    confirmIcon: string;\n    cancelIcon: string;\n    onFieldValidate?: FieldValidator<TCommand>;\n    onFieldChange?: FieldChangeCallback<TCommand>;\n    onBeforeExecute?: BeforeExecuteCallback<TCommand>;\n}\n\nconst CommandDialogContext = createContext<CommandDialogContextValue<unknown> | undefined>(undefined);\n\nexport const useCommandDialogContext = <TCommand = unknown,>() => {\n    const context = useContext(CommandDialogContext);\n    if (!context) {\n        throw new Error('useCommandDialogContext must be used within a CommandDialog');\n    }\n    return context as CommandDialogContextValue<TCommand>;\n};\n\nconst CommandDialogFormContent = <TCommand extends { execute: () => Promise<ICommandResult<unknown>> }>() => {\n    const command = useCommandInstance<TCommand>();\n    const { setCommandResult, setCommandValues, isValid, onBeforeExecute } = useCommandFormContext<TCommand>();\n    const { onSuccess: onConfirm, onCancel, confirmLabel, cancelLabel, confirmIcon, cancelIcon } = useCommandDialogContext<TCommand>();\n\n    const handleConfirm = async () => {\n        if (onBeforeExecute) {\n            const transformedValues = onBeforeExecute(command);\n            setCommandValues(transformedValues);\n        }\n        const result = await command.execute();\n        if (result.isSuccess) {\n            await onConfirm(result);\n        } else {\n            setCommandResult(result);\n        }\n    };\n\n    const handleCancel = () => {\n        onCancel();\n    };\n\n    return (\n        <>\n            <div className=\"card flex flex-wrap justify-content-center gap-3 mt-8\">\n                <Button label={confirmLabel} icon={confirmIcon} onClick={handleConfirm} disabled={!isValid} />\n                <Button label={cancelLabel} icon={cancelIcon} severity='secondary' onClick={handleCancel} />\n            </div>\n        </>\n    );\n};\n\nconst CommandDialogFieldsWrapper = (props: { children: React.ReactNode }) => {\n    React.Children.forEach(props.children, child => {\n        if (React.isValidElement(child)) {\n            const component = child.type as React.ComponentType<unknown>;\n            if (component.displayName !== 'CommandFormField') {\n                throw new Error(`Only CommandFormField components are allowed as children of CommandDialog.Fields. Got: ${component.displayName || component.name || 'Unknown'}`);\n            }\n        }\n    });\n\n    return (\n        <CommandForm.Fields>\n            {props.children}\n        </CommandForm.Fields>\n    );\n};\n\nconst CommandDialogComponent = <TCommand extends object = object, TResponse = object>(props: CommandDialogProps<TCommand, TResponse>) => {\n    const {\n        command,\n        initialValues,\n        currentValues,\n        visible,\n        header,\n        confirmLabel = 'Confirm',\n        cancelLabel = 'Cancel',\n        confirmIcon = 'pi pi-check',\n        cancelIcon = 'pi pi-times',\n        onConfirm,\n        onCancel,\n        onFieldValidate,\n        onFieldChange,\n        onBeforeExecute,\n        children,\n        style = { width: '50vw' },\n        width\n    } = props;\n\n    const dialogStyle = width ? { ...style, width } : style;\n\n    const contextValue: CommandDialogContextValue<TCommand> = {\n        onSuccess: onConfirm,\n        onCancel,\n        confirmLabel,\n        cancelLabel,\n        confirmIcon,\n        cancelIcon,\n        onFieldValidate,\n        onFieldChange,\n        onBeforeExecute\n    };\n\n    return (\n        <Dialog\n            header={header}\n            visible={visible}\n            style={dialogStyle}\n            onHide={onCancel}\n            contentStyle={{ overflow: 'visible' }}\n        >\n            <CommandDialogContext.Provider value={contextValue}>\n                <CommandForm command={command} initialValues={initialValues} currentValues={currentValues} onFieldValidate={onFieldValidate} onFieldChange={onFieldChange} onBeforeExecute={onBeforeExecute}>\n                    {children}\n                    <CommandDialogFormContent />\n                </CommandForm>\n            </CommandDialogContext.Provider>\n        </Dialog>\n    );\n};\n\nCommandDialogComponent.Fields = CommandDialogFieldsWrapper;\n\nexport const CommandDialog = CommandDialogComponent;\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"CommandDialog.js","sources":["../../../CommandDialog/CommandDialog.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { ICommandResult } from '@cratis/arc/commands';\nimport { Constructor } from '@cratis/fundamentals';\nimport { DialogButtons } from '@cratis/arc.react/dialogs';\nimport { Dialog } from '../Dialogs/Dialog';\nimport React, { createContext, useContext } from 'react';\nimport { \n    CommandForm, \n    useCommandFormContext, \n    useCommandInstance\n} from '@cratis/arc.react/commands';\n\n// Local type definitions\nexport type BeforeExecuteCallback<TCommand> = (values: TCommand) => TCommand;\n\nexport type FieldValidator<TCommand> = (command: TCommand, fieldName: string, oldValue: unknown, newValue: unknown) => string | undefined;\nexport type FieldChangeCallback<TCommand> = (command: TCommand, fieldName: string, oldValue: unknown, newValue: unknown) => void;\n\nexport interface CommandDialogProps<TCommand, TResponse = object> {\n    command: Constructor<TCommand>;\n    initialValues?: Partial<TCommand>;\n    currentValues?: Partial<TCommand> | undefined;\n    visible: boolean;\n    header: string;\n    confirmLabel?: string;\n    cancelLabel?: string;\n    confirmIcon?: string;\n    cancelIcon?: string;\n    onConfirm: (result: ICommandResult<TResponse>) => void | Promise<void>;\n    onCancel: () => void;\n    onFieldValidate?: FieldValidator<TCommand>;\n    onFieldChange?: FieldChangeCallback<TCommand>;\n    onBeforeExecute?: BeforeExecuteCallback<TCommand>;\n    children?: React.ReactNode;\n    style?: React.CSSProperties;\n    width?: string;\n}\n\ninterface CommandDialogContextValue<TCommand = unknown> {\n    onSuccess: (result: ICommandResult<unknown>) => void | Promise<void>;\n    onCancel: () => void;\n    confirmLabel: string;\n    cancelLabel: string;\n    confirmIcon: string;\n    cancelIcon: string;\n    onFieldValidate?: FieldValidator<TCommand>;\n    onFieldChange?: FieldChangeCallback<TCommand>;\n    onBeforeExecute?: BeforeExecuteCallback<TCommand>;\n}\n\nconst CommandDialogContext = createContext<CommandDialogContextValue<unknown> | undefined>(undefined);\n\nexport const useCommandDialogContext = <TCommand = unknown,>() => {\n    const context = useContext(CommandDialogContext);\n    if (!context) {\n        throw new Error('useCommandDialogContext must be used within a CommandDialog');\n    }\n    return context as CommandDialogContextValue<TCommand>;\n};\n\nconst CommandDialogWrapper = <TCommand extends object>({\n    header,\n    visible,\n    width,\n    confirmLabel,\n    cancelLabel,\n    onConfirm,\n    onCancel,\n    onBeforeExecute,\n    children\n}: {\n    header: string;\n    visible: boolean;\n    width: string;\n    confirmLabel: string;\n    cancelLabel: string;\n    onConfirm: (result: ICommandResult<unknown>) => void | Promise<void>;\n    onCancel: () => void;\n    onBeforeExecute?: BeforeExecuteCallback<TCommand>;\n    children: React.ReactNode;\n}) => {\n    const { isValid, setCommandValues, setCommandResult } = useCommandFormContext<TCommand>();\n    const commandInstance = useCommandInstance<TCommand>();\n\n    const handleConfirm = async () => {\n        if (onBeforeExecute) {\n            const transformedValues = onBeforeExecute(commandInstance);\n            setCommandValues(transformedValues);\n        }\n        const result = await (commandInstance as unknown as { execute: () => Promise<ICommandResult<unknown>> }).execute();\n        if (result.isSuccess) {\n            await onConfirm(result);\n            return true;\n        } else {\n            setCommandResult(result);\n            return false;\n        }\n    };\n\n    return (\n        <Dialog\n            title={header}\n            visible={visible}\n            width={width}\n            onConfirm={handleConfirm}\n            onCancel={onCancel}\n            buttons={DialogButtons.OkCancel}\n            okLabel={confirmLabel}\n            cancelLabel={cancelLabel}\n            isValid={isValid}\n        >\n            {children}\n        </Dialog>\n    );\n};\n\nconst CommandDialogFieldsWrapper = (props: { children: React.ReactNode }) => {\n    return (\n        <CommandForm.Fields>\n            {props.children}\n        </CommandForm.Fields>\n    );\n};\n\nconst CommandDialogComponent = <TCommand extends object = object, TResponse = object>(props: CommandDialogProps<TCommand, TResponse>) => {\n    const {\n        command,\n        initialValues,\n        currentValues,\n        visible,\n        header,\n        confirmLabel = 'Confirm',\n        cancelLabel = 'Cancel',\n        confirmIcon = 'pi pi-check',\n        cancelIcon = 'pi pi-times',\n        onConfirm,\n        onCancel,\n        onFieldValidate,\n        onFieldChange,\n        onBeforeExecute,\n        children,\n        width = '50vw'\n    } = props;\n\n    const contextValue: CommandDialogContextValue<TCommand> = {\n        onSuccess: onConfirm,\n        onCancel,\n        confirmLabel,\n        cancelLabel,\n        confirmIcon,\n        cancelIcon,\n        onFieldValidate,\n        onFieldChange,\n        onBeforeExecute\n    };\n\n    return (\n        <CommandDialogContext.Provider value={contextValue}>\n            <CommandForm\n                command={command}\n                initialValues={initialValues}\n                currentValues={currentValues}\n                onFieldValidate={onFieldValidate}\n                onFieldChange={onFieldChange}\n                onBeforeExecute={onBeforeExecute}>\n                <CommandDialogWrapper\n                    header={header}\n                    visible={visible}\n                    width={width}\n                    confirmLabel={confirmLabel}\n                    cancelLabel={cancelLabel}\n                    onConfirm={onConfirm}\n                    onCancel={onCancel}\n                    onBeforeExecute={onBeforeExecute}\n                >\n                    {children}\n                </CommandDialogWrapper>\n            </CommandForm>\n        </CommandDialogContext.Provider>\n    );\n};\n\nCommandDialogComponent.Fields = CommandDialogFieldsWrapper;\n\nexport const CommandDialog = CommandDialogComponent;\n"],"names":["_jsx"],"mappings":"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"}

package/dist/esm/CommandDialog/CommandDialog.stories.d.ts

@@ -1,5 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { CommandDialog } from './CommandDialog';
+import '@cratis/arc/validation';
 declare const meta: Meta<typeof CommandDialog>;
 export default meta;
 type Story = StoryObj<typeof CommandDialog>;

package/dist/esm/CommandDialog/CommandDialog.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CommandDialog.stories.d.ts","sourceRoot":"","sources":["../../../CommandDialog/CommandDialog.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,aAAa,CAGpC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,aAAa,CAAC,CAAC;AAE5C,eAAO,MAAM,OAAO,EAAE,KASrB,CAAC"}
+{"version":3,"file":"CommandDialog.stories.d.ts","sourceRoot":"","sources":["../../../CommandDialog/CommandDialog.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAIhD,OAAO,wBAAwB,CAAC;AAEhC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,aAAa,CAGpC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,aAAa,CAAC,CAAC;AAsG5C,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC"}

package/dist/esm/CommandDialog/CommandDialog.stories.js

@@ -1,12 +1,66 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
 import { CommandDialog } from './CommandDialog';
+import { Command, CommandValidator } from '@cratis/arc/commands';
+import { PropertyDescriptor } from '@cratis/arc/reflection';
+import { InputTextField, NumberField } from '../CommandForm/fields';
+import '@cratis/arc/validation';
 const meta = {
     title: 'CommandDialog/CommandDialog',
     component: CommandDialog,
 };
 export default meta;
+class UpdateUserCommandValidator extends CommandValidator {
+    constructor() {
+        super();
+        this.ruleFor((c) => c.name).notEmpty().minLength(2).maxLength(50);
+        this.ruleFor((c) => c.email).notEmpty().emailAddress();
+        this.ruleFor((c) => c.age).greaterThanOrEqual(18).lessThanOrEqual(120);
+    }
+}
+class UpdateUserCommand extends Command {
+    route = '/api/users/update';
+    validation = new UpdateUserCommandValidator();
+    propertyDescriptors = [
+        new PropertyDescriptor('name', String),
+        new PropertyDescriptor('email', String),
+        new PropertyDescriptor('age', Number),
+    ];
+    name = '';
+    email = '';
+    age = 0;
+    constructor() {
+        super(Object, false);
+    }
+    get requestParameters() {
+        return [];
+    }
+    get properties() {
+        return ['name', 'email', 'age'];
+    }
+}
+const DialogWrapper = () => {
+    const [visible, setVisible] = useState(true);
+    const [result, setResult] = useState('');
+    const [validationErrors, setValidationErrors] = useState([]);
+    return (_jsxs("div", { className: "storybook-wrapper", children: [_jsx("button", { className: "p-button p-component mb-3", onClick: () => {
+                    setVisible(true);
+                    setValidationErrors([]);
+                    setResult('');
+                }, children: "Open Dialog" }), validationErrors.length > 0 && (_jsxs("div", { className: "p-3 mt-3 bg-red-100 border-round", children: [_jsx("strong", { children: "Validation Errors:" }), _jsx("ul", { className: "mt-2 mb-0", children: validationErrors.map((error, index) => (_jsx("li", { children: error }, index))) })] })), result && (_jsxs("div", { className: "p-3 mt-3 bg-green-100 border-round", children: [_jsx("strong", { children: "Command executed:" }), " ", result] })), _jsxs(CommandDialog, { command: UpdateUserCommand, visible: visible, header: "Update User Information (with Validation)", confirmLabel: "Save", cancelLabel: "Cancel", onConfirm: async (commandResult) => {
+                    setResult(JSON.stringify(commandResult));
+                    setVisible(false);
+                }, onCancel: () => setVisible(false), onFieldChange: async (command) => {
+                    const validationResult = await command.validate();
+                    if (!validationResult.isValid) {
+                        setValidationErrors(validationResult.validationResults.map(v => v.message));
+                    }
+                    else {
+                        setValidationErrors([]);
+                    }
+                }, children: [_jsx(InputTextField, { value: (c) => c.name, title: "Name", placeholder: "Enter name (min 2 chars)" }), _jsx(InputTextField, { value: (c) => c.email, title: "Email", placeholder: "Enter email", type: "email" }), _jsx(NumberField, { value: (c) => c.age, title: "Age", placeholder: "Enter age (18-120)" })] })] }));
+};
 export const Default = {
-    args: {},
-    render: (args) => (_jsx("div", { className: "storybook-wrapper", children: _jsx(CommandDialog, { ...args }) }))
+    render: () => _jsx(DialogWrapper, {}),
 };
 //# sourceMappingURL=CommandDialog.stories.js.map

package/dist/esm/CommandDialog/CommandDialog.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"CommandDialog.stories.js","sourceRoot":"","sources":["../../../CommandDialog/CommandDialog.stories.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,MAAM,IAAI,GAA+B;IACvC,KAAK,EAAE,6BAA6B;IACpC,SAAS,EAAE,aAAa;CACzB,CAAC;AAEF,eAAe,IAAI,CAAC;AAGpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC1B,IAAI,EAAE,EAEL;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CACd,cAAK,SAAS,EAAC,mBAAmB,YAC9B,KAAC,aAAa,OAAK,IAAI,GAAI,GACzB,CACT;CACJ,CAAC"}
+{"version":3,"file":"CommandDialog.stories.js","sourceRoot":"","sources":["../../../CommandDialog/CommandDialog.stories.tsx"],"names":[],"mappings":"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"}

package/dist/esm/CommandForm/fields/CheckboxField.d.ts

@@ -1,9 +1,10 @@
-import { WrappedFieldProps } from '../asCommandFormField';
+import React from 'react';
+import { WrappedFieldProps } from '@cratis/arc.react/commands';
 interface CheckboxFieldComponentProps extends WrappedFieldProps<boolean> {
     label?: string;
 }
 export declare const CheckboxField: {
-    <TCommand>(props: Omit<CheckboxFieldComponentProps, keyof WrappedFieldProps<unknown>> & import("..").BaseCommandFormFieldProps<TCommand> & import("..").InjectedCommandFormFieldProps): import("react/jsx-runtime").JSX.Element;
+    <TCommand = unknown>(props: import("@cratis/arc.react/commands").CommandFormFieldComponentProps<CheckboxFieldComponentProps, TCommand>): React.ReactElement;
     displayName: string;
 };
 export {};

package/dist/esm/CommandForm/fields/CheckboxField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxField.d.ts","sourceRoot":"","sources":["../../../../CommandForm/fields/CheckboxField.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAsB,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAE9E,UAAU,2BAA4B,SAAQ,iBAAiB,CAAC,OAAO,CAAC;IACpE,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,aAAa;;;CAezB,CAAC"}
+{"version":3,"file":"CheckboxField.d.ts","sourceRoot":"","sources":["../../../../CommandForm/fields/CheckboxField.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAsB,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAEnF,UAAU,2BAA4B,SAAQ,iBAAiB,CAAC,OAAO,CAAC;IACpE,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,aAAa;;;CAezB,CAAC"}

package/dist/esm/CommandForm/fields/CheckboxField.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Checkbox } from 'primereact/checkbox';
-import { asCommandFormField } from '../asCommandFormField.js';
+import { asCommandFormField } from '@cratis/arc.react/commands';
 
 const CheckboxField = asCommandFormField((props) => (jsxs("div", { className: "flex align-items-center", children: [jsx(Checkbox, { checked: props.value, onChange: props.onChange, invalid: props.invalid }), props.label && jsx("label", { className: "ml-2", children: props.label })] })), {
     defaultValue: false,

package/dist/esm/CommandForm/fields/CheckboxField.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxField.js","sources":["../../../../CommandForm/fields/CheckboxField.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { Checkbox } from 'primereact/checkbox';\nimport React from 'react';\nimport { asCommandFormField, WrappedFieldProps } from '../asCommandFormField';\n\ninterface CheckboxFieldComponentProps extends WrappedFieldProps<boolean> {\n    label?: string;\n}\n\nexport const CheckboxField = asCommandFormField<CheckboxFieldComponentProps>(\n    (props) => (\n        <div className=\"flex align-items-center\">\n            <Checkbox\n                checked={props.value}\n                onChange={props.onChange}\n                invalid={props.invalid}\n            />\n            {props.label && <label className=\"ml-2\">{props.label}</label>}\n        </div>\n    ),\n    {\n        defaultValue: false,\n        extractValue: (e: { checked: boolean }) => e.checked\n    }\n);\n"],"names":["_jsxs","_jsx"],"mappings":";;;;AAWO,MAAM,aAAa,GAAG,kBAAkB,CAC3C,CAAC,KAAK,MACFA,cAAK,SAAS,EAAC,yBAAyB,EAAA,QAAA,EAAA,CACpCC,GAAA,CAAC,QAAQ,EAAA,EACL,OAAO,EAAE,KAAK,CAAC,KAAK,EACpB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,OAAO,EAAE,KAAK,CAAC,OAAO,EAAA,CACxB,EACD,KAAK,CAAC,KAAK,IAAIA,GAAA,CAAA,OAAA,EAAA,EAAO,SAAS,EAAC,MAAM,EAAA,QAAA,EAAE,KAAK,CAAC,KAAK,EAAA,CAAS,CAAA,EAAA,CAC3D,CACT,EACD;AACI,IAAA,YAAY,EAAE,KAAK;IACnB,YAAY,EAAE,CAAC,CAAuB,KAAK,CAAC,CAAC;AAChD,CAAA;;;;"}
+{"version":3,"file":"CheckboxField.js","sources":["../../../../CommandForm/fields/CheckboxField.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { Checkbox } from 'primereact/checkbox';\nimport React from 'react';\nimport { asCommandFormField, WrappedFieldProps } from '@cratis/arc.react/commands';\n\ninterface CheckboxFieldComponentProps extends WrappedFieldProps<boolean> {\n    label?: string;\n}\n\nexport const CheckboxField = asCommandFormField<CheckboxFieldComponentProps>(\n    (props) => (\n        <div className=\"flex align-items-center\">\n            <Checkbox\n                checked={props.value}\n                onChange={props.onChange}\n                invalid={props.invalid}\n            />\n            {props.label && <label className=\"ml-2\">{props.label}</label>}\n        </div>\n    ),\n    {\n        defaultValue: false,\n        extractValue: (e: { checked: boolean }) => e.checked\n    }\n);\n"],"names":["_jsxs","_jsx"],"mappings":";;;;AAWO,MAAM,aAAa,GAAG,kBAAkB,CAC3C,CAAC,KAAK,MACFA,cAAK,SAAS,EAAC,yBAAyB,EAAA,QAAA,EAAA,CACpCC,GAAA,CAAC,QAAQ,EAAA,EACL,OAAO,EAAE,KAAK,CAAC,KAAK,EACpB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,OAAO,EAAE,KAAK,CAAC,OAAO,EAAA,CACxB,EACD,KAAK,CAAC,KAAK,IAAIA,GAAA,CAAA,OAAA,EAAA,EAAO,SAAS,EAAC,MAAM,EAAA,QAAA,EAAE,KAAK,CAAC,KAAK,EAAA,CAAS,CAAA,EAAA,CAC3D,CACT,EACD;AACI,IAAA,YAAY,EAAE,KAAK;IACnB,YAAY,EAAE,CAAC,CAAuB,KAAK,CAAC,CAAC;AAChD,CAAA;;;;"}

package/dist/esm/CommandForm/fields/DropdownField.d.ts

@@ -1,14 +1,15 @@
-import { WrappedFieldProps } from '../asCommandFormField';
-interface SelectComponentProps extends WrappedFieldProps<string> {
+import React from 'react';
+import { WrappedFieldProps } from '@cratis/arc.react/commands';
+interface DropdownFieldComponentProps extends WrappedFieldProps<string | number> {
     options: Array<{
         [key: string]: unknown;
     }>;
-    optionIdField: string;
-    optionLabelField: string;
+    optionValue: string;
+    optionLabel: string;
     placeholder?: string;
 }
-export declare const SelectField: {
-    <TCommand>(props: Omit<SelectComponentProps, keyof WrappedFieldProps<unknown>> & import("..").BaseCommandFormFieldProps<TCommand> & import("..").InjectedCommandFormFieldProps): import("react/jsx-runtime").JSX.Element;
+export declare const DropdownField: {
+    <TCommand = unknown>(props: import("@cratis/arc.react/commands").CommandFormFieldComponentProps<DropdownFieldComponentProps, TCommand>): React.ReactElement;
     displayName: string;
 };
 export {};

package/dist/esm/CommandForm/fields/DropdownField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownField.d.ts","sourceRoot":"","sources":["../../../../CommandForm/fields/DropdownField.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAsB,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAE9E,UAAU,oBAAqB,SAAQ,iBAAiB,CAAC,MAAM,CAAC;IAC5D,OAAO,EAAE,KAAK,CAAC;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;KAAE,CAAC,CAAC;IAC3C,aAAa,EAAE,MAAM,CAAC;IACtB,gBAAgB,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB;AAkBD,eAAO,MAAM,WAAW;;;CAMvB,CAAC"}
+{"version":3,"file":"DropdownField.d.ts","sourceRoot":"","sources":["../../../../CommandForm/fields/DropdownField.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAsB,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAEnF,UAAU,2BAA4B,SAAQ,iBAAiB,CAAC,MAAM,GAAG,MAAM,CAAC;IAC5E,OAAO,EAAE,KAAK,CAAC;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;KAAE,CAAC,CAAC;IAC3C,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,aAAa;;;CAiBzB,CAAC"}

package/dist/esm/CommandForm/fields/DropdownField.js

@@ -1,11 +1,11 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { asCommandFormField } from '../asCommandFormField.js';
+import { jsx } from 'react/jsx-runtime';
+import { Dropdown } from 'primereact/dropdown';
+import { asCommandFormField } from '@cratis/arc.react/commands';
 
-const SelectComponent = (props) => (jsxs("select", { value: props.value || '', onChange: props.onChange, required: props.required, className: `w-full p-3 rounded-md text-base ${props.invalid ? 'border border-red-500' : 'border border-gray-300'}`, children: [props.placeholder && jsx("option", { value: "", children: props.placeholder }), props.options.map((option, index) => (jsx("option", { value: String(option[props.optionIdField]), children: String(option[props.optionLabelField]) }, index)))] }));
-const SelectField = asCommandFormField(SelectComponent, {
+const DropdownField = asCommandFormField((props) => (jsx(Dropdown, { value: props.value, onChange: (e) => props.onChange(e.value), options: props.options, optionValue: props.optionValue, optionLabel: props.optionLabel, placeholder: props.placeholder, invalid: props.invalid, className: "w-full" })), {
     defaultValue: '',
-    extractValue: (e) => e.target.value
+    extractValue: (e) => e
 });
 
-export { SelectField };
+export { DropdownField };
 //# sourceMappingURL=DropdownField.js.map

package/dist/esm/CommandForm/fields/DropdownField.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownField.js","sources":["../../../../CommandForm/fields/DropdownField.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport React from 'react';\nimport { asCommandFormField, WrappedFieldProps } from '../asCommandFormField';\n\ninterface SelectComponentProps extends WrappedFieldProps<string> {\n    options: Array<{ [key: string]: unknown }>;\n    optionIdField: string;\n    optionLabelField: string;\n    placeholder?: string;\n}\n\nconst SelectComponent = (props: SelectComponentProps) => (\n    <select\n        value={props.value || ''}\n        onChange={props.onChange}\n        required={props.required}\n        className={`w-full p-3 rounded-md text-base ${props.invalid ? 'border border-red-500' : 'border border-gray-300'}`}\n    >\n        {props.placeholder && <option value=\"\">{props.placeholder}</option>}\n        {props.options.map((option, index) => (\n            <option key={index} value={String(option[props.optionIdField])}>\n                {String(option[props.optionLabelField])}\n            </option>\n        ))}\n    </select>\n);\n\nexport const SelectField = asCommandFormField<SelectComponentProps>(\n    SelectComponent,\n    {\n        defaultValue: '',\n        extractValue: (e: React.ChangeEvent<HTMLSelectElement>) => e.target.value\n    }\n);\n"],"names":["_jsxs","_jsx"],"mappings":";;;AAaA,MAAM,eAAe,GAAG,CAAC,KAA2B,MAChDA,IAAA,CAAA,QAAA,EAAA,EACI,KAAK,EAAE,KAAK,CAAC,KAAK,IAAI,EAAE,EACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,SAAS,EAAE,CAAA,gCAAA,EAAmC,KAAK,CAAC,OAAO,GAAG,uBAAuB,GAAG,wBAAwB,CAAA,CAAE,aAEjH,KAAK,CAAC,WAAW,IAAIC,GAAA,CAAA,QAAA,EAAA,EAAQ,KAAK,EAAC,EAAE,EAAA,QAAA,EAAE,KAAK,CAAC,WAAW,GAAU,EAClE,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,MAC7BA,GAAA,CAAA,QAAA,EAAA,EAAoB,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,EAAA,QAAA,EACzD,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,gBAAgB,CAAC,CAAC,EAAA,EAD9B,KAAK,CAET,CACZ,CAAC,CAAA,EAAA,CACG,CACZ;AAEM,MAAM,WAAW,GAAG,kBAAkB,CACzC,eAAe,EACf;AACI,IAAA,YAAY,EAAE,EAAE;IAChB,YAAY,EAAE,CAAC,CAAuC,KAAK,CAAC,CAAC,MAAM,CAAC;AACvE,CAAA;;;;"}
+{"version":3,"file":"DropdownField.js","sources":["../../../../CommandForm/fields/DropdownField.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { Dropdown } from 'primereact/dropdown';\nimport React from 'react';\nimport { asCommandFormField, WrappedFieldProps } from '@cratis/arc.react/commands';\n\ninterface DropdownFieldComponentProps extends WrappedFieldProps<string | number> {\n    options: Array<{ [key: string]: unknown }>;\n    optionValue: string;\n    optionLabel: string;\n    placeholder?: string;\n}\n\nexport const DropdownField = asCommandFormField<DropdownFieldComponentProps>(\n    (props) => (\n        <Dropdown\n            value={props.value}\n            onChange={(e) => props.onChange(e.value)}\n            options={props.options}\n            optionValue={props.optionValue}\n            optionLabel={props.optionLabel}\n            placeholder={props.placeholder}\n            invalid={props.invalid}\n            className=\"w-full\"\n        />\n    ),\n    {\n        defaultValue: '',\n        extractValue: (e: unknown) => e as string | number\n    }\n);\n"],"names":["_jsx"],"mappings":";;;;AAcO,MAAM,aAAa,GAAG,kBAAkB,CAC3C,CAAC,KAAK,MACFA,GAAA,CAAC,QAAQ,IACL,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,QAAQ,EAAE,CAAC,CAAC,KAAK,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,EACxC,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,SAAS,EAAC,QAAQ,EAAA,CACpB,CACL,EACD;AACI,IAAA,YAAY,EAAE,EAAE;AAChB,IAAA,YAAY,EAAE,CAAC,CAAU,KAAK;AACjC,CAAA;;;;"}

package/dist/esm/CommandForm/fields/Fields.stories.d.ts

@@ -0,0 +1,13 @@
+import { Meta, StoryObj } from '@storybook/react';
+import '@cratis/arc/validation';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const AllFields: Story;
+export declare const InputTextFieldExample: Story;
+export declare const NumberFieldExample: Story;
+export declare const TextAreaFieldExample: Story;
+export declare const DropdownFieldExample: Story;
+export declare const SliderFieldExample: Story;
+export declare const CheckboxFieldExample: Story;
+//# sourceMappingURL=Fields.stories.d.ts.map

package/dist/esm/CommandForm/fields/Fields.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Fields.stories.d.ts","sourceRoot":"","sources":["../../../../CommandForm/fields/Fields.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAKlD,OAAO,wBAAwB,CAAC;AAUhC,QAAA,MAAM,IAAI,EAAE,IAKX,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAkEtB,eAAO,MAAM,SAAS,EAAE,KAsMvB,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,KAkCnC,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAuBhC,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAqBlC,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAuBlC,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAsBhC,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAwBlC,CAAC"}