@cratis/components 1.10.1 → 2.0.0

package/dist/cjs/CommandForm/fields/RadioGroupField.js

@@ -0,0 +1,40 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var radiobutton = require('primereact/radiobutton');
+var commands = require('@cratis/arc.react/commands');
+
+/**
+ * A radio-button group field bound to a `string` or `number` property on a
+ * Cratis Arc command. Use for small mutually-exclusive choice sets where
+ * all options should be visible at once; for larger sets, prefer
+ * {@link DropdownField}. See {@link InputTextField} for the full
+ * `value={c => c.prop}` binding model.
+ *
+ * ```tsx
+ * <RadioGroupField value={c => c.priority}
+ *                  options={priorityOptions}
+ *                  optionLabel="label"
+ *                  optionValue="value"
+ *                  layout="horizontal"
+ *                  title="Priority" />
+ * ```
+ */
+const RadioGroupField = commands.asCommandFormField((props) => {
+    const layout = props.layout ?? 'vertical';
+    const layoutClasses = layout === 'horizontal' ? 'flex-row gap-4 flex-wrap' : 'flex-col gap-2';
+    const containerClassName = props.className
+        ? `flex ${layoutClasses} ${props.className}`
+        : `flex ${layoutClasses}`;
+    return (jsxRuntime.jsx("div", { className: containerClassName, children: props.options.map((option) => {
+            const optValue = option[props.optionValue];
+            const optLabel = option[props.optionLabel];
+            return (jsxRuntime.jsxs("div", { className: "flex items-center", children: [jsxRuntime.jsx(radiobutton.RadioButton, { value: optValue, checked: props.value === optValue, onChange: (e) => props.onChange(e.value), onBlur: props.onBlur, invalid: props.invalid, pt: props.pt, ptOptions: props.ptOptions, unstyled: props.unstyled }), jsxRuntime.jsx("label", { className: "ml-2", children: optLabel })] }, String(optValue)));
+        }) }));
+}, {
+    defaultValue: '',
+    extractValue: (e) => e
+});
+
+exports.RadioGroupField = RadioGroupField;
+//# sourceMappingURL=RadioGroupField.js.map

package/dist/cjs/CommandForm/fields/RadioGroupField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroupField.js","sources":["../../../../CommandForm/fields/RadioGroupField.tsx"],"sourcesContent":[null],"names":["asCommandFormField","_jsx","_jsxs","RadioButton"],"mappings":";;;;;;AAgCA;;;;;;;;;;;;;;;AAeG;MACU,eAAe,GAAGA,2BAAkB,CAC7C,CAAC,KAAK,KAAI;AACN,IAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,IAAI,UAAU;AACzC,IAAA,MAAM,aAAa,GAAG,MAAM,KAAK,YAAY,GAAG,0BAA0B,GAAG,gBAAgB;AAC7F,IAAA,MAAM,kBAAkB,GAAG,KAAK,CAAC;AAC7B,UAAE,CAAA,KAAA,EAAQ,aAAa,IAAI,KAAK,CAAC,SAAS,CAAA;AAC1C,UAAE,CAAA,KAAA,EAAQ,aAAa,CAAA,CAAE;AAC7B,IAAA,QACIC,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,kBAAkB,EAAA,QAAA,EAC7B,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,KAAI;YAC1B,MAAM,QAAQ,GAAG,MAAM,CAAC,KAAK,CAAC,WAAW,CAAoB;YAC7D,MAAM,QAAQ,GAAG,MAAM,CAAC,KAAK,CAAC,WAAW,CAAW;AACpD,YAAA,QACIC,eAAA,CAAA,KAAA,EAAA,EAA4B,SAAS,EAAC,mBAAmB,aACrDD,cAAA,CAACE,uBAAW,EAAA,EACR,KAAK,EAAE,QAAQ,EACf,OAAO,EAAE,KAAK,CAAC,KAAK,KAAK,QAAQ,EACjC,QAAQ,EAAE,CAAC,CAAyB,KAAK,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,EAChE,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,EAAE,EAAE,KAAK,CAAC,EAAE,EACZ,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAA,CAC1B,EACFF,cAAA,CAAA,OAAA,EAAA,EAAO,SAAS,EAAC,MAAM,EAAA,QAAA,EAAE,QAAQ,EAAA,CAAS,KAXpC,MAAM,CAAC,QAAQ,CAAC,CAYpB;QAEd,CAAC,CAAC,EAAA,CACA;AAEd,CAAC,EACD;AACI,IAAA,YAAY,EAAE,EAAE;AAChB,IAAA,YAAY,EAAE,CAAC,CAAU,KAAK;AACjC,CAAA;;;;"}

package/dist/cjs/CommandForm/fields/SliderField.js

@@ -4,7 +4,16 @@ var jsxRuntime = require('react/jsx-runtime');
 var slider = require('primereact/slider');
 var commands = require('@cratis/arc.react/commands');
 
-const SliderField = commands.asCommandFormField((props) => (jsxRuntime.jsxs("div", { className: "w-full", onBlur: props.onBlur, children: [jsxRuntime.jsx(slider.Slider, { value: props.value, onChange: (e) => props.onChange(e.value), min: props.min ?? 0, max: props.max ?? 100, step: props.step ?? 1, className: "w-full" }), jsxRuntime.jsx("div", { className: "text-center mt-2", children: jsxRuntime.jsx("span", { className: "font-semibold", children: props.value }) })] })), {
+/**
+ * A horizontal slider field bound to a `number` property on a Cratis Arc
+ * command. The current value is rendered below the track for feedback. See
+ * {@link InputTextField} for the full `value={c => c.prop}` binding model.
+ *
+ * ```tsx
+ * <SliderField value={c => c.volume} title="Volume" min={0} max={100} />
+ * ```
+ */
+const SliderField = commands.asCommandFormField((props) => (jsxRuntime.jsxs("div", { className: "w-full", onBlur: props.onBlur, children: [jsxRuntime.jsx(slider.Slider, { value: props.value, onChange: (e) => props.onChange(e.value), min: props.min ?? 0, max: props.max ?? 100, step: props.step ?? 1, className: props.className ? `w-full ${props.className}` : 'w-full', pt: props.pt, ptOptions: props.ptOptions, unstyled: props.unstyled }), jsxRuntime.jsx("div", { className: "text-center mt-2", children: jsxRuntime.jsx("span", { className: "font-semibold", children: props.value }) })] })), {
     defaultValue: 0,
     extractValue: (e) => (typeof e === 'number' ? e : 0)
 });

package/dist/cjs/CommandForm/fields/SliderField.js.map

@@ -1 +1 @@
-{"version":3,"file":"SliderField.js","sources":["../../../../CommandForm/fields/SliderField.tsx"],"sourcesContent":[null],"names":["asCommandFormField","_jsxs","_jsx","Slider"],"mappings":";;;;;;MAaa,WAAW,GAAGA,2BAAkB,CACzC,CAAC,KAAK,MACFC,eAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,QAAQ,EAAC,MAAM,EAAE,KAAK,CAAC,MAAM,aACxCC,cAAA,CAACC,aAAM,IACH,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,QAAQ,EAAE,CAAC,CAAC,KAAK,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,EACxC,GAAG,EAAE,KAAK,CAAC,GAAG,IAAI,CAAC,EACnB,GAAG,EAAE,KAAK,CAAC,GAAG,IAAI,GAAG,EACrB,IAAI,EAAE,KAAK,CAAC,IAAI,IAAI,CAAC,EACrB,SAAS,EAAC,QAAQ,EAAA,CACpB,EACFD,wBAAK,SAAS,EAAC,kBAAkB,EAAA,QAAA,EAC7BA,cAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,eAAe,YAAE,KAAK,CAAC,KAAK,EAAA,CAAQ,EAAA,CAClD,CAAA,EAAA,CACJ,CACT,EACD;AACI,IAAA,YAAY,EAAE,CAAC;AACf,IAAA,YAAY,EAAE,CAAC,CAAU,MAAM,OAAO,CAAC,KAAK,QAAQ,GAAG,CAAC,GAAG,CAAC;AAC/D,CAAA;;;;"}
+{"version":3,"file":"SliderField.js","sources":["../../../../CommandForm/fields/SliderField.tsx"],"sourcesContent":[null],"names":["asCommandFormField","_jsxs","_jsx","Slider"],"mappings":";;;;;;AAiCA;;;;;;;;AAQG;AACI,MAAM,WAAW,GAAGA,2BAAkB,CACzC,CAAC,KAAK,MACFC,eAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,QAAQ,EAAC,MAAM,EAAE,KAAK,CAAC,MAAM,EAAA,QAAA,EAAA,CACxCC,cAAA,CAACC,aAAM,EAAA,EACH,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,QAAQ,EAAE,CAAC,CAAC,KAAK,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,EACxC,GAAG,EAAE,KAAK,CAAC,GAAG,IAAI,CAAC,EACnB,GAAG,EAAE,KAAK,CAAC,GAAG,IAAI,GAAG,EACrB,IAAI,EAAE,KAAK,CAAC,IAAI,IAAI,CAAC,EACrB,SAAS,EAAE,KAAK,CAAC,SAAS,GAAG,CAAA,OAAA,EAAU,KAAK,CAAC,SAAS,CAAA,CAAE,GAAG,QAAQ,EACnE,EAAE,EAAE,KAAK,CAAC,EAAE,EACZ,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAA,CAC1B,EACFD,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,kBAAkB,EAAA,QAAA,EAC7BA,cAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,eAAe,EAAA,QAAA,EAAE,KAAK,CAAC,KAAK,EAAA,CAAQ,EAAA,CAClD,CAAA,EAAA,CACJ,CACT,EACD;AACI,IAAA,YAAY,EAAE,CAAC;AACf,IAAA,YAAY,EAAE,CAAC,CAAU,MAAM,OAAO,CAAC,KAAK,QAAQ,GAAG,CAAC,GAAG,CAAC;AAC/D,CAAA;;;;"}

package/dist/cjs/CommandForm/fields/TextAreaField.js

@@ -4,7 +4,18 @@ var jsxRuntime = require('react/jsx-runtime');
 var inputtextarea = require('primereact/inputtextarea');
 var commands = require('@cratis/arc.react/commands');
 
-const TextAreaField = commands.asCommandFormField((props) => (jsxRuntime.jsx(inputtextarea.InputTextarea, { value: props.value, onChange: props.onChange, onBlur: props.onBlur, invalid: props.invalid, placeholder: props.placeholder, rows: props.rows ?? 5, cols: props.cols, className: "w-full" })), {
+/**
+ * A multi-line text field bound to a `string` property on a Cratis Arc
+ * command. Use for descriptions, notes, or any free-form text longer than
+ * a single line. See {@link InputTextField} for the full
+ * `value={c => c.prop}` binding model that every field in this folder
+ * follows.
+ *
+ * ```tsx
+ * <TextAreaField value={c => c.description} title="Description" rows={4} />
+ * ```
+ */
+const TextAreaField = commands.asCommandFormField((props) => (jsxRuntime.jsx(inputtextarea.InputTextarea, { value: props.value, onChange: props.onChange, onBlur: props.onBlur, invalid: props.invalid, placeholder: props.placeholder, rows: props.rows ?? 5, cols: props.cols, className: props.className ? `w-full ${props.className}` : 'w-full', pt: props.pt, ptOptions: props.ptOptions, unstyled: props.unstyled })), {
     defaultValue: '',
     extractValue: (e) => e.target.value
 });

package/dist/cjs/CommandForm/fields/TextAreaField.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextAreaField.js","sources":["../../../../CommandForm/fields/TextAreaField.tsx"],"sourcesContent":[null],"names":["asCommandFormField","_jsx","InputTextarea"],"mappings":";;;;;;AAaO,MAAM,aAAa,GAAGA,2BAAkB,CAC3C,CAAC,KAAK,MACFC,eAACC,2BAAa,EAAA,EACV,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,IAAI,EAAE,KAAK,CAAC,IAAI,IAAI,CAAC,EACrB,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,SAAS,EAAC,QAAQ,EAAA,CACpB,CACL,EACD;AACI,IAAA,YAAY,EAAE,EAAE;IAChB,YAAY,EAAE,CAAC,CAAyC,KAAK,CAAC,CAAC,MAAM,CAAC;AACzE,CAAA;;;;"}
+{"version":3,"file":"TextAreaField.js","sources":["../../../../CommandForm/fields/TextAreaField.tsx"],"sourcesContent":[null],"names":["asCommandFormField","_jsx","InputTextarea"],"mappings":";;;;;;AAiCA;;;;;;;;;;AAUG;MACU,aAAa,GAAGA,2BAAkB,CAC3C,CAAC,KAAK,MACFC,cAAA,CAACC,2BAAa,EAAA,EACV,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,IAAI,EAAE,KAAK,CAAC,IAAI,IAAI,CAAC,EACrB,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,SAAS,EAAE,KAAK,CAAC,SAAS,GAAG,CAAA,OAAA,EAAU,KAAK,CAAC,SAAS,CAAA,CAAE,GAAG,QAAQ,EACnE,EAAE,EAAE,KAAK,CAAC,EAAE,EACZ,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAA,CAC1B,CACL,EACD;AACI,IAAA,YAAY,EAAE,EAAE;IAChB,YAAY,EAAE,CAAC,CAAyC,KAAK,CAAC,CAAC,MAAM,CAAC;AACzE,CAAA;;;;"}

package/dist/cjs/CommandForm/index.js

@@ -10,6 +10,8 @@ var CalendarField = require('./fields/CalendarField.js');
 var ColorPickerField = require('./fields/ColorPickerField.js');
 var MultiSelectField = require('./fields/MultiSelectField.js');
 var ChipsField = require('./fields/ChipsField.js');
+var RadioButtonField = require('./fields/RadioButtonField.js');
+var RadioGroupField = require('./fields/RadioGroupField.js');
 
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
@@ -24,4 +26,6 @@ exports.CalendarField = CalendarField.CalendarField;
 exports.ColorPickerField = ColorPickerField.ColorPickerField;
 exports.MultiSelectField = MultiSelectField.MultiSelectField;
 exports.ChipsField = ChipsField.ChipsField;
+exports.RadioButtonField = RadioButtonField.RadioButtonField;
+exports.RadioGroupField = RadioGroupField.RadioGroupField;
 //# sourceMappingURL=index.js.map

package/dist/cjs/CommandForm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../CommandForm/index.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;AAAA;AACA;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":["../../../CommandForm/index.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA;AACA;;;;;;;;;;;;;;;"}

package/dist/cjs/Common/CratisComponentsProvider.js

@@ -0,0 +1,44 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var api = require('primereact/api');
+var tsDeepmerge = require('ts-deepmerge');
+
+/**
+ * Default configuration applied to every consumer. Intentionally empty today —
+ * reserved for Cratis-wide opinions we may want to ship in the future (for example,
+ * a default pt preset that complements the --cratis-* token layer). Anything added
+ * here is deep-merged with the consumer's `value` so consumer settings always win.
+ *
+ * Exported so specs can verify the merge contract without re-rendering React.
+ */
+const cratisDefaults = {};
+/**
+ * Pure merge of {@link cratisDefaults} and consumer-supplied config. Exposed for
+ * specs; the provider component uses the same logic inside its `useMemo`.
+ */
+const mergeCratisComponentsConfig = (value) => tsDeepmerge.merge(cratisDefaults, value ?? {});
+/**
+ * Single setup point for Cratis Components. Wraps {@link PrimeReactProvider} so the
+ * library can layer Cratis-wide defaults on top of PrimeReact's pass-through and
+ * unstyled mechanisms while still letting the consumer take complete control:
+ *
+ * - Pass `unstyled: true` to disable every PrimeReact base style. The wrappers in
+ *   this package then render structurally only and pick up all visuals from your
+ *   own CSS, Tailwind, or pt definitions.
+ * - Pass `pt` / `ptOptions` to apply global per-component pass-through.
+ *
+ * Consumers who want to talk to PrimeReact directly may still mount
+ * {@link PrimeReactProvider} themselves — this component is an optional convenience,
+ * not a requirement.
+ */
+const CratisComponentsProvider = ({ value, children }) => {
+    const merged = React.useMemo(() => mergeCratisComponentsConfig(value), [value]);
+    return jsxRuntime.jsx(api.PrimeReactProvider, { value: merged, children: children });
+};
+
+exports.CratisComponentsProvider = CratisComponentsProvider;
+exports.cratisDefaults = cratisDefaults;
+exports.mergeCratisComponentsConfig = mergeCratisComponentsConfig;
+//# sourceMappingURL=CratisComponentsProvider.js.map

package/dist/cjs/Common/CratisComponentsProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CratisComponentsProvider.js","sources":["../../../Common/CratisComponentsProvider.tsx"],"sourcesContent":[null],"names":["merge","useMemo","_jsx","PrimeReactProvider"],"mappings":";;;;;;;AAyBA;;;;;;;AAOG;AACI,MAAM,cAAc,GAA2B;AAEtD;;;AAGG;AACI,MAAM,2BAA2B,GAAG,CAAC,KAAyC,KACjFA,iBAAK,CAAC,cAAc,EAAE,KAAK,IAAI,EAAE;AAErC;;;;;;;;;;;;;AAaG;AACI,MAAM,wBAAwB,GAAG,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAiC,KAAI;AAC3F,IAAA,MAAM,MAAM,GAAGC,aAAO,CAAyB,MAAM,2BAA2B,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;IAEjG,OAAOC,cAAA,CAACC,sBAAkB,EAAA,EAAC,KAAK,EAAE,MAAM,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAsB;AAC7E;;;;;;"}

package/dist/cjs/Common/ErrorBoundary.js

@@ -3,14 +3,46 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 
+/**
+ * React error boundary that catches errors thrown by its descendants during
+ * render, lifecycle, and constructor calls. On error, it renders a minimal
+ * inline diagnostic (message + stack) so the rest of the application keeps
+ * working instead of crashing the whole tree.
+ *
+ * Wrap the boundary around any subtree whose failure should be isolated:
+ *
+ * ```tsx
+ * <ErrorBoundary>
+ *     <RiskyFeature />
+ * </ErrorBoundary>
+ * ```
+ *
+ * Use one boundary per logical UI region rather than a single root-level one,
+ * so failures stay scoped to the feature that caused them.
+ */
 class ErrorBoundary extends React.Component {
+    /** Initial state — no error captured. */
     state = {
         hasError: false,
         error: new Error(),
     };
+    /**
+     * React lifecycle hook invoked when a descendant throws. Returns the
+     * next state, which switches the boundary into its fallback render path.
+     *
+     * @param error - The error thrown by the descendant.
+     */
     static getDerivedStateFromError(error) {
         return { hasError: true, error: error };
     }
+    /**
+     * React lifecycle hook invoked alongside {@link getDerivedStateFromError}.
+     * Forwards the error and React's component stack to the console so the
+     * failure is observable in DevTools.
+     *
+     * @param error - The error thrown by the descendant.
+     * @param errorInfo - React-supplied metadata including the component stack.
+     */
     componentDidCatch(error, errorInfo) {
         console.error('Uncaught error:', error, errorInfo);
     }

package/dist/cjs/Common/ErrorBoundary.js.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorBoundary.js","sources":["../../../Common/ErrorBoundary.tsx"],"sourcesContent":[null],"names":["Component","_jsxs","_jsx"],"mappings":";;;;;AAaM,MAAO,aAAc,SAAQA,eAAuB,CAAA;AAC/C,IAAA,KAAK,GAAU;AAClB,QAAA,QAAQ,EAAE,KAAK;QACf,KAAK,EAAE,IAAI,KAAK,EAAE;KACrB;IAEM,OAAO,wBAAwB,CAAC,KAAY,EAAA;QAC/C,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE;IAC3C;IAEO,iBAAiB,CAAC,KAAY,EAAE,SAAoB,EAAA;QACvD,OAAO,CAAC,KAAK,CAAC,iBAAiB,EAAE,KAAK,EAAE,SAAS,CAAC;IACtD;IAEO,MAAM,GAAA;AACT,QAAA,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;AACrB,YAAA,QACIC,eAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,KAAK,EAAA,QAAA,EAAA,CAChBC,cAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,cAAc,EAAA,QAAA,EAAA,OAAA,EAAA,CAAW,EACvCA,cAAA,CAAA,GAAA,EAAA,EAAA,QAAA,EAAI,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,EAAA,CAAK,EACjCA,gCAAI,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,EAAA,CAAK,CAAA,EAAA,CAC7B;QAEd;AAEA,QAAA,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ;IAC9B;AACH;;;;"}
+{"version":3,"file":"ErrorBoundary.js","sources":["../../../Common/ErrorBoundary.tsx"],"sourcesContent":[null],"names":["Component","_jsxs","_jsx"],"mappings":";;;;;AAuBA;;;;;;;;;;;;;;;;AAgBG;AACG,MAAO,aAAc,SAAQA,eAAuB,CAAA;;AAE/C,IAAA,KAAK,GAAU;AAClB,QAAA,QAAQ,EAAE,KAAK;QACf,KAAK,EAAE,IAAI,KAAK,EAAE;KACrB;AAED;;;;;AAKG;IACI,OAAO,wBAAwB,CAAC,KAAY,EAAA;QAC/C,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE;IAC3C;AAEA;;;;;;;AAOG;IACI,iBAAiB,CAAC,KAAY,EAAE,SAAoB,EAAA;QACvD,OAAO,CAAC,KAAK,CAAC,iBAAiB,EAAE,KAAK,EAAE,SAAS,CAAC;IACtD;IAEO,MAAM,GAAA;AACT,QAAA,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;AACrB,YAAA,QACIC,eAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,KAAK,EAAA,QAAA,EAAA,CAChBC,cAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,cAAc,EAAA,QAAA,EAAA,OAAA,EAAA,CAAW,EACvCA,cAAA,CAAA,GAAA,EAAA,EAAA,QAAA,EAAI,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,EAAA,CAAK,EACjCA,gCAAI,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,EAAA,CAAK,CAAA,EAAA,CAC7B;QAEd;AAEA,QAAA,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ;IAC9B;AACH;;;;"}

package/dist/cjs/Common/FormElement.css

@@ -0,0 +1,26 @@
+/* Copyright (c) Cratis. All rights reserved. */
+/* Licensed under the MIT license. See LICENSE file in the project root for full license information. */
+
+.cratis-form-element {
+    display: flex;
+    flex: 1 1 auto;
+    align-items: stretch;
+}
+
+.cratis-form-element__addon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 0.75rem;
+    color: var(--cratis-text-color-secondary);
+    background: var(--cratis-surface-100);
+    border: 1px solid var(--cratis-surface-border);
+    border-right: 0;
+    border-top-left-radius: var(--cratis-border-radius);
+    border-bottom-left-radius: var(--cratis-border-radius);
+}
+
+.cratis-form-element > *:not(.cratis-form-element__addon) {
+    flex: 1 1 auto;
+    min-width: 0;
+}

package/dist/cjs/Common/FormElement.js

@@ -1,9 +1,22 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+require('./FormElement.css');
 
+/**
+ * Lightweight wrapper that places an icon addon to the left of a form input,
+ * styled with the `--cratis-*` token layer (background, border, radius). Use
+ * it to give input fields a leading icon without pulling in PrimeReact's
+ * `InputGroup` chrome.
+ *
+ * ```tsx
+ * <FormElement icon={<i className="pi pi-user" />}>
+ *     <InputText value={name} onChange={…} />
+ * </FormElement>
+ * ```
+ */
 const FormElement = (props) => {
-    return (jsxRuntime.jsx("div", { className: "card flex flex-column md:flex-row gap-3", children: jsxRuntime.jsxs("div", { className: "p-inputgroup flex-1", children: [jsxRuntime.jsx("span", { className: "p-inputgroup-addon", children: props.icon }), props.children] }) }));
+    return (jsxRuntime.jsx("div", { className: "flex flex-col md:flex-row gap-3", children: jsxRuntime.jsxs("div", { className: "cratis-form-element", children: [jsxRuntime.jsx("span", { className: "cratis-form-element__addon", children: props.icon }), props.children] }) }));
 };
 
 exports.FormElement = FormElement;

package/dist/cjs/Common/FormElement.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormElement.js","sources":["../../../Common/FormElement.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs"],"mappings":";;;;AAQO,MAAM,WAAW,GAAG,CAAC,KAAuB,KAAI;IACnD,QACIA,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,yCAAyC,EAAA,QAAA,EACpDC,eAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,qBAAqB,EAAA,QAAA,EAAA,CAChCD,cAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,oBAAoB,EAAA,QAAA,EAC/B,KAAK,CAAC,IAAI,EAAA,CACR,EACN,KAAK,CAAC,QAAQ,CAAA,EAAA,CACb,EAAA,CACJ;AAEd;;;;"}
+{"version":3,"file":"FormElement.js","sources":["../../../Common/FormElement.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs"],"mappings":";;;;;AAoBA;;;;;;;;;;;AAWG;AACI,MAAM,WAAW,GAAG,CAAC,KAAuB,KAAI;IACnD,QACIA,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,iCAAiC,EAAA,QAAA,EAC5CC,eAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,qBAAqB,EAAA,QAAA,EAAA,CAChCD,cAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,4BAA4B,EAAA,QAAA,EACvC,KAAK,CAAC,IAAI,EAAA,CACR,EACN,KAAK,CAAC,QAAQ,CAAA,EAAA,CACb,EAAA,CACJ;AAEd;;;;"}

package/dist/cjs/Common/Page.js

@@ -2,6 +2,19 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 
+/**
+ * Top-level page layout primitive. Renders a flex column that fills its parent
+ * vertically, with optional title heading and optional `panel` chrome around
+ * the main content area. Intended as the root element of every routable view.
+ *
+ * ```tsx
+ * <Page title="Authors" showTitle panel>
+ *     <AuthorList />
+ * </Page>
+ * ```
+ *
+ * @param props - {@link PageProps}.
+ */
 const Page = ({ title, showTitle = false, children, panel, ...rest }) => {
     return (jsxRuntime.jsxs("div", { className: 'flex flex-col h-full flex-1', ...rest, children: [showTitle && jsxRuntime.jsx("h1", { className: 'text-3xl mt-3 mb-4', children: title }), jsxRuntime.jsx("main", { className: `overflow-hidden h-full flex flex-col flex-1 ${panel ? 'panel' : ''}`, children: children })] }));
 };

package/dist/cjs/Common/Page.js.map

@@ -1 +1 @@
-{"version":3,"file":"Page.js","sources":["../../../Common/Page.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;;MAYa,IAAI,GAAG,CAAC,EAAE,KAAK,EAAE,SAAS,GAAG,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,IAAI,EAAa,KAAI;AACtF,IAAA,QACIA,eAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,6BAA6B,KAAK,IAAI,EAAA,QAAA,EAAA,CAChD,SAAS,IAAIC,uBAAI,SAAS,EAAC,oBAAoB,EAAA,QAAA,EAAE,KAAK,EAAA,CAAM,EAC7DA,cAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,CAAA,4CAAA,EAA+C,KAAK,GAAG,OAAO,GAAG,EAAE,CAAA,CAAE,EAAA,QAAA,EACjF,QAAQ,EAAA,CACN,CAAA,EAAA,CACL;AAEd;;;;"}
+{"version":3,"file":"Page.js","sources":["../../../Common/Page.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;;AAoCA;;;;;;;;;;;;AAYG;MACU,IAAI,GAAG,CAAC,EAAE,KAAK,EAAE,SAAS,GAAG,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,IAAI,EAAa,KAAI;AACtF,IAAA,QACIA,eAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,6BAA6B,KAAK,IAAI,EAAA,QAAA,EAAA,CAChD,SAAS,IAAIC,uBAAI,SAAS,EAAC,oBAAoB,EAAA,QAAA,EAAE,KAAK,EAAA,CAAM,EAC7DA,cAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,CAAA,4CAAA,EAA+C,KAAK,GAAG,OAAO,GAAG,EAAE,CAAA,CAAE,EAAA,QAAA,EACjF,QAAQ,EAAA,CACN,CAAA,EAAA,CACL;AAEd;;;;"}

package/dist/cjs/Common/Tooltip.css

@@ -3,8 +3,8 @@
 
 /* ── Tooltip bubble ──────────────────────────────────────────────────────── */
 .tooltip-bubble {
-    background: var(--surface-100);
-    color: var(--text-color);
-    border: 1px solid var(--surface-border);
+    background: var(--cratis-surface-100);
+    color: var(--cratis-text-color);
+    border: 1px solid var(--cratis-surface-border);
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
 }

package/dist/cjs/Common/index.js

@@ -1,5 +1,6 @@
 'use strict';
 
+var CratisComponentsProvider = require('./CratisComponentsProvider.js');
 var ErrorBoundary = require('./ErrorBoundary.js');
 var Icon = require('./Icon.js');
 var Page = require('./Page.js');
@@ -9,6 +10,9 @@ var Tooltip = require('./Tooltip.js');
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
+exports.CratisComponentsProvider = CratisComponentsProvider.CratisComponentsProvider;
+exports.cratisDefaults = CratisComponentsProvider.cratisDefaults;
+exports.mergeCratisComponentsConfig = CratisComponentsProvider.mergeCratisComponentsConfig;
 exports.ErrorBoundary = ErrorBoundary.ErrorBoundary;
 exports.IconDisplay = Icon.IconDisplay;
 exports.Page = Page.Page;

package/dist/cjs/Common/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../Common/index.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;AAAA;AACA;;;;;;;;"}
+{"version":3,"file":"index.js","sources":["../../../Common/index.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;AAAA;AACA;;;;;;;;;;;"}

package/dist/cjs/DataPage/DataPage.js

@@ -9,12 +9,24 @@ var DataTableForObservableQuery = require('../DataTables/DataTableForObservableQ
 var DataTableForQuery = require('../DataTables/DataTableForQuery.js');
 var allotment = require('allotment');
 
+/**
+ * Declarative menu item for use inside `<DataPage.MenuItems>`. Renders nothing
+ * directly; the surrounding {@link MenuItems} component reads its props and
+ * forwards them to the action `Menubar`.
+ */
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const MenuItem = (_) => {
     return null;
 };
+/**
+ * Renders an action `Menubar` at the top of a {@link DataPage}, populated from
+ * `<DataPage.MenuItem>` children. Each menu item's `disableOnUnselected` flag
+ * is automatically honored against the current row selection.
+ *
+ * Use as `<DataPage.MenuItems>` inside a `<DataPage>`.
+ */
 const MenuItems = ({ children }) => {
-    const context = React.useContext(DataPageContext);
+    const context = useDataPageContext();
     const isDisabled = React.useMemo(() => {
         return !context.selectedItem;
     }, [context.selectedItem]);
@@ -31,22 +43,115 @@ const MenuItems = ({ children }) => {
         });
         return menuItems;
     }, [children, context.selectedItem]);
-    return (jsxRuntime.jsx("div", { className: "px-4 py-2", children: jsxRuntime.jsx(menubar.Menubar, { "aria-label": "Actions", model: items }) }));
+    return (jsxRuntime.jsx("div", { className: "px-4 py-2", children: jsxRuntime.jsx(menubar.Menubar, { "aria-label": "Actions", model: items, className: context.menubarClassName, pt: context.menubarPt, ptOptions: context.menubarPtOptions, unstyled: context.menubarUnstyled }) }));
 };
+/**
+ * Renders the data table at the body of a {@link DataPage}. Automatically
+ * selects between {@link DataTableForQuery} (snapshot query) and
+ * {@link DataTableForObservableQuery} (real-time observable) based on the
+ * `query` type provided to the surrounding `<DataPage>`.
+ *
+ * Use as `<DataPage.Columns>` inside a `<DataPage>`, with PrimeReact `<Column>`
+ * children defining the table columns.
+ */
 const Columns = ({ children }) => {
-    const context = React.useContext(DataPageContext);
+    const context = useDataPageContext();
     if (context.query.prototype instanceof queries.QueryFor) {
-        return (jsxRuntime.jsx(DataTableForQuery.DataTableForQuery, { ...context, selection: context.selectedItem, onSelectionChange: context.onSelectionChanged, clientFiltering: context.clientFiltering, children: children }));
+        return (jsxRuntime.jsx(DataTableForQuery.DataTableForQuery, { ...context, selection: context.selectedItem, onSelectionChange: context.onSelectionChanged, clientFiltering: context.clientFiltering, className: context.tableClassName, pt: context.tablePt, ptOptions: context.tablePtOptions, unstyled: context.tableUnstyled, children: children }));
     }
     else {
-        return (jsxRuntime.jsx(DataTableForObservableQuery.DataTableForObservableQuery, { ...context, selection: context.selectedItem, onSelectionChange: context.onSelectionChanged, clientFiltering: context.clientFiltering, children: children }));
+        return (jsxRuntime.jsx(DataTableForObservableQuery.DataTableForObservableQuery, { ...context, selection: context.selectedItem, onSelectionChange: context.onSelectionChanged, clientFiltering: context.clientFiltering, className: context.tableClassName, pt: context.tablePt, ptOptions: context.tablePtOptions, unstyled: context.tableUnstyled, children: children }));
     }
 };
 const DataPageContext = React.createContext(null);
+function useDataPageContext() {
+    const context = React.useContext(DataPageContext);
+    if (!context) {
+        throw new Error('useDataPageContext must be used within a DataPage component');
+    }
+    return context;
+}
 /**
- * Represents a data driven page with a menu and custom defined columns for the data table.
- * @param props Props for the DataPage component
- * @returns Function to render the DataPage component
+ * A page primitive that combines an action menubar, a query-backed data
+ * table, and an optional details pane into one layout. Designed as the
+ * default rendering for "list view" pages in an Arc app.
+ *
+ * ## What `TQuery` is
+ *
+ * `TQuery` is the auto-generated TypeScript class produced by the Arc proxy
+ * generator from a C# read model query. Two flavors are accepted and
+ * **selected automatically at runtime** based on the class hierarchy:
+ *
+ * - **`IQueryFor<TDataType, TArguments>`** — a snapshot query. Re-fetched
+ *   when `queryArguments` change or when the page is mounted. Rendered
+ *   through {@link DataTableForQuery} internally.
+ * - **`IObservableQueryFor<TDataType, TArguments>`** — a real-time
+ *   subscription. Connects to the backend over WebSocket and re-renders
+ *   automatically whenever the underlying read model changes server-side.
+ *   Rendered through {@link DataTableForObservableQuery} internally.
+ *
+ * You don't pick which inner table to use — `DataPage` inspects the
+ * prototype chain (`context.query.prototype instanceof QueryFor`) and
+ * mounts the correct one.
+ *
+ * ## Declarative composition
+ *
+ * Three children build up the page:
+ *
+ * - **`<DataPage.MenuItems>`** wraps `<DataPage.MenuItem>` elements that
+ *   become the action `Menubar` at the top. Each item declares its `icon`,
+ *   `label`, and `command` (an `onClick` handler). Items can be marked
+ *   `disableOnUnselected` so they automatically grey out until the user
+ *   picks a row — useful for Edit / Delete actions that need a target.
+ *
+ * - **`<DataPage.Columns>`** wraps PrimeReact `<Column>` elements that
+ *   describe the visible columns. The columns themselves are
+ *   PrimeReact's — anything supported by their `DataTable` `<Column>` is
+ *   supported here (sorting, filtering, custom body templates, …).
+ *
+ * - **`detailsComponent`** (optional) is a React component rendered in a
+ *   right-hand pane via Allotment when a row is selected. It receives the
+ *   selected item as `item` and an `onRefresh` callback the parent can
+ *   invoke to ask the page to refetch.
+ *
+ * ## Selection lifecycle
+ *
+ * `DataPage` keeps the current selection in local state and threads it to
+ * the inner table, the menubar (`disableOnUnselected` items follow it),
+ * and the optional details pane. The `onSelectionChange` prop is invoked
+ * after every change if the consumer also needs to react to it.
+ *
+ * ```tsx
+ * <DataPage<AllAuthors, Author, never>
+ *     title="Authors"
+ *     query={AllAuthors}                          // proxy from C#
+ *     detailsComponent={AuthorDetails}>
+ *     <DataPage.MenuItems>
+ *         <DataPage.MenuItem icon={FaPlus}   label="Add"    command={onAdd} />
+ *         <DataPage.MenuItem icon={FaPencil} label="Edit"   command={onEdit}
+ *                            disableOnUnselected />
+ *         <DataPage.MenuItem icon={FaTrash}  label="Delete" command={onDelete}
+ *                            disableOnUnselected />
+ *     </DataPage.MenuItems>
+ *     <DataPage.Columns>
+ *         <Column field="name"  header="Name" sortable />
+ *         <Column field="email" header="Email" />
+ *     </DataPage.Columns>
+ * </DataPage>
+ * ```
+ *
+ * ## Styling
+ *
+ * The inner DataTable and Menubar each have their own per-slot props:
+ * `tablePt` / `tableUnstyled` / `tableClassName` for the table;
+ * `menubarPt` / `menubarUnstyled` / `menubarClassName` for the action
+ * menubar. See the [pass-through cheat sheet](../../Documentation/Styling/pass-through.md)
+ * for the full slot reference.
+ *
+ * @typeParam TQuery - The query class (proxy generated from a C# read model query).
+ * @typeParam TDataType - The row type returned by the query.
+ * @typeParam TArguments - The query's argument object type.
+ * @param props - {@link DataPageProps}.
  */
 const DataPage = (props) => {
     const [selectedItem, setSelectedItem] = React.useState(undefined);

package/dist/cjs/DataPage/DataPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataPage.js","sources":["../../../DataPage/DataPage.tsx"],"sourcesContent":[null],"names":["useMemo","_jsx","Menubar","QueryFor","DataTableForQuery","DataTableForObservableQuery","Page","_jsxs","Allotment"],"mappings":"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"}
+{"version":3,"file":"DataPage.js","sources":["../../../DataPage/DataPage.tsx"],"sourcesContent":[null],"names":["useMemo","_jsx","Menubar","QueryFor","DataTableForQuery","DataTableForObservableQuery","Page","_jsxs","Allotment"],"mappings":"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"}

package/dist/cjs/DataTables/DataTableForObservableQuery.js

@@ -9,9 +9,68 @@ var React = require('react');
 
 const paging = new queries.Paging(0, 20);
 /**
- * Represents a DataTable for a query.
- * @param props Props for the component
- * @returns Function to render the DataTableForQuery component
+ * A paged data table bound to a Cratis Arc **observable** query
+ * (`IObservableQueryFor<TDataType, TArguments>`). Subscribes via
+ * `useObservableQueryWithPaging` from `@cratis/arc.react/queries`, which
+ * opens a WebSocket connection to the backend and re-renders the table
+ * automatically whenever the underlying read model changes server-side.
+ *
+ * ## What `TQuery` is
+ *
+ * `TQuery` is the auto-generated TypeScript class produced by the Arc proxy
+ * generator from a C# read model's static observable query method (one
+ * that returns `ISubject<TDataType>` on the backend). The proxy hooks the
+ * WebSocket subscription up; you only deal with the resulting React data.
+ *
+ * ## What's unique
+ *
+ * - **Real-time updates**: server-side projection writes flow into the
+ *   table within the same render cycle, with no manual polling or refresh
+ *   button. The connection re-subscribes automatically when
+ *   `queryArguments` change.
+ * - **Resize-aware scrollable height**: the wrapper observes its container
+ *   via `ResizeObserver` and adjusts the inner DataTable height to fit,
+ *   so the table behaves correctly inside flex layouts (it never overflows
+ *   beyond its parent or shrinks below 200px).
+ * - **Lazy paging + optional client filtering**: same modes as
+ *   {@link DataTableForQuery}, but the page is re-issued through the
+ *   observable subscription when the user pages.
+ *
+ * Use {@link DataTableForQuery} for snapshot queries that don't need live
+ * updates. Use {@link DataPage} for a higher-level layout that combines
+ * this table with a menubar, selection, and a details pane.
+ *
+ * ## Children
+ *
+ * Children are PrimeReact `<Column>` elements — same as
+ * {@link DataTableForQuery}.
+ *
+ * ```tsx
+ * import { DataTableForObservableQuery } from '@cratis/components/DataTables';
+ * import { Column } from 'primereact/column';
+ * import { ActiveSessions } from './ActiveSessions';   // proxy from C#
+ *
+ * <DataTableForObservableQuery
+ *     query={ActiveSessions}
+ *     emptyMessage="No active sessions">
+ *     <Column field="userName"  header="User" />
+ *     <Column field="startedAt" header="Started" />
+ * </DataTableForObservableQuery>
+ * ```
+ *
+ * Rows appear and disappear in this table as users log in / log out
+ * server-side — no manual refresh required.
+ *
+ * ## Styling
+ *
+ * Identical to {@link DataTableForQuery}: `pt` / `ptOptions` / `unstyled` /
+ * `className` target the inner DataTable; `paginatorPt` and friends target
+ * the inner Paginator. See [pass-through cheat sheet](../../Documentation/Styling/pass-through.md).
+ *
+ * @typeParam TQuery - The observable query class (proxy generated from C# `IObservableQueryFor`).
+ * @typeParam TDataType - The row type returned by the query.
+ * @typeParam TArguments - The query's argument object type.
+ * @param props - {@link DataTableForObservableQueryProps}.
  */
 const DataTableForObservableQuery = (props) => {
     const [filters, setFilters] = React.useState(props.defaultFilters ?? {});
@@ -58,8 +117,8 @@ const DataTableForObservableQuery = (props) => {
             display: 'flex',
             flexDirection: 'column',
             height: '100%',
-            border: '1px solid var(--surface-border)',
-            borderRadius: 'var(--border-radius)',
+            border: '1px solid var(--cratis-surface-border)',
+            borderRadius: 'var(--cratis-border-radius)',
             overflow: 'hidden'
         }, children: [jsxRuntime.jsx("div", { style: { height: `${tableHeight}px`, overflow: 'hidden' }, children: jsxRuntime.jsx(datatable.DataTable, { value: result.data, lazy: !isClientFiltering, rows: paging.pageSize, totalRecords: totalRecords, scrollable: true, scrollHeight: '100%', selectionMode: 'single', selection: props.selection, onSelectionChange: props.onSelectionChange, dataKey: props.dataKey, filters: filters, filterDisplay: 'menu', onFilter: (e) => {
                         setFilters(e.filters);
@@ -67,7 +126,7 @@ const DataTableForObservableQuery = (props) => {
                             const filteredValue = e.filteredValue;
                             setFilteredTotal(filteredValue ? filteredValue.length : undefined);
                         }
-                    }, globalFilterFields: props.globalFilterFields, emptyMessage: props.emptyMessage, children: props.children }) }), result.paging.totalItems > 0 && (jsxRuntime.jsx("div", { style: { borderTop: '1px solid var(--surface-border)' }, children: jsxRuntime.jsx(paginator.Paginator, { first: result.paging.page * paging.pageSize, rows: paging.pageSize, totalRecords: result.paging.totalItems, onPageChange: (e) => setPage(e.page) }) }))] }));
+                    }, globalFilterFields: props.globalFilterFields, emptyMessage: props.emptyMessage, className: props.className, pt: props.pt, ptOptions: props.ptOptions, unstyled: props.unstyled, children: props.children }) }), result.paging.totalItems > 0 && (jsxRuntime.jsx("div", { style: { borderTop: '1px solid var(--cratis-surface-border)' }, children: jsxRuntime.jsx(paginator.Paginator, { first: result.paging.page * paging.pageSize, rows: paging.pageSize, totalRecords: result.paging.totalItems, onPageChange: (e) => setPage(e.page), pt: props.paginatorPt, ptOptions: props.paginatorPtOptions, unstyled: props.paginatorUnstyled }) }))] }));
 };
 
 exports.DataTableForObservableQuery = DataTableForObservableQuery;