@cratis/scene.blueprint.default 4.31.0 → 4.32.0

package/dist/esm/foundation/FoundationIcon.js

@@ -0,0 +1,55 @@
+import { jsx } from 'react/jsx-runtime';
+
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+const paths = {
+    check: 'M5 13l4 4L19 7',
+    close: 'M6 6l12 12M18 6L6 18',
+    'arrow-up': 'M12 19V5M5 12l7-7 7 7',
+    'arrow-down': 'M12 5v14M5 12l7 7 7-7',
+    minus: 'M5 12h14',
+    alert: 'M12 8v5M12 16.5v.5M10.3 3.9L2.5 17.5A2 2 0 004.2 20.5h15.6a2 2 0 001.7-3L13.7 3.9a2 2 0 00-3.4 0z',
+    info: 'M12 11v6M12 7.5v.5M12 21a9 9 0 100-18 9 9 0 000 18z',
+    lock: 'M7 11V8a5 5 0 0110 0v3M6 11h12a1 1 0 011 1v8a1 1 0 01-1 1H6a1 1 0 01-1-1v-8a1 1 0 011-1z',
+    clock: 'M12 7v5l3 2M12 21a9 9 0 100-18 9 9 0 000 18z',
+    inbox: 'M3 13l3-8h12l3 8M3 13v6a1 1 0 001 1h16a1 1 0 001-1v-6M3 13h5l1 3h6l1-3h5',
+    refresh: 'M20 11a8 8 0 10-2.3 6.3M20 4v7h-7',
+    plus: 'M12 5v14M5 12h14',
+    'chevron-right': 'M9 5l7 7-7 7',
+    'chevron-down': 'M5 9l7 7 7-7',
+    upload: 'M12 16V4M7 9l5-5 5 5M4 17v2a1 1 0 001 1h14a1 1 0 001-1v-2',
+    file: 'M14 3H7a1 1 0 00-1 1v16a1 1 0 001 1h10a1 1 0 001-1V7l-4-4zM14 3v4h4',
+    user: 'M12 12a4 4 0 100-8 4 4 0 000 8zM4 21a8 8 0 0116 0',
+    columns: 'M4 5h16v14H4zM9.5 5v14M14.5 5v14',
+    filter: 'M4 5h16l-6 8v6l-4-2v-4L4 5z',
+    star: 'M12 3l2.7 5.6 6.1.9-4.4 4.3 1 6.1L12 17l-5.4 2.9 1-6.1L3.2 9.5l6.1-.9L12 3z',
+    circle: 'M12 20a8 8 0 100-16 8 8 0 000 16z'
+};
+/** Whether a name is one of the icons drawn here. */ function isFoundationIcon(name) {
+    return name in paths;
+}
+/**
+ * One icon. It is decorative unless given a label: the meaning an icon carries is always repeated in text, so no status is
+ * conveyed by color or shape alone (WCAG 1.4.1).
+ */ function FoundationIcon({ name, label }) {
+    return /*#__PURE__*/ jsx("svg", {
+        className: "foundation-icon",
+        viewBox: "0 0 24 24",
+        width: "1em",
+        height: "1em",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        "aria-hidden": label ? undefined : true,
+        role: label ? 'img' : undefined,
+        "aria-label": label,
+        children: /*#__PURE__*/ jsx("path", {
+            d: paths[name]
+        })
+    });
+}
+
+export { FoundationIcon, isFoundationIcon };
+//# sourceMappingURL=FoundationIcon.js.map

package/dist/esm/foundation/FoundationIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FoundationIcon.js","sources":["../../../foundation/FoundationIcon.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\n/** The icons the foundation components draw themselves, so none of them depends on an icon font being loaded. */\nexport type FoundationIconName =\n    | 'check' | 'close' | 'arrow-up' | 'arrow-down' | 'minus' | 'alert' | 'info' | 'lock' | 'clock' | 'inbox' | 'refresh'\n    | 'plus' | 'chevron-right' | 'chevron-down' | 'upload' | 'file' | 'user' | 'columns' | 'filter' | 'star' | 'circle';\n\nconst paths: Record<FoundationIconName, string> = {\n    check: 'M5 13l4 4L19 7',\n    close: 'M6 6l12 12M18 6L6 18',\n    'arrow-up': 'M12 19V5M5 12l7-7 7 7',\n    'arrow-down': 'M12 5v14M5 12l7 7 7-7',\n    minus: 'M5 12h14',\n    alert: 'M12 8v5M12 16.5v.5M10.3 3.9L2.5 17.5A2 2 0 004.2 20.5h15.6a2 2 0 001.7-3L13.7 3.9a2 2 0 00-3.4 0z',\n    info: 'M12 11v6M12 7.5v.5M12 21a9 9 0 100-18 9 9 0 000 18z',\n    lock: 'M7 11V8a5 5 0 0110 0v3M6 11h12a1 1 0 011 1v8a1 1 0 01-1 1H6a1 1 0 01-1-1v-8a1 1 0 011-1z',\n    clock: 'M12 7v5l3 2M12 21a9 9 0 100-18 9 9 0 000 18z',\n    inbox: 'M3 13l3-8h12l3 8M3 13v6a1 1 0 001 1h16a1 1 0 001-1v-6M3 13h5l1 3h6l1-3h5',\n    refresh: 'M20 11a8 8 0 10-2.3 6.3M20 4v7h-7',\n    plus: 'M12 5v14M5 12h14',\n    'chevron-right': 'M9 5l7 7-7 7',\n    'chevron-down': 'M5 9l7 7 7-7',\n    upload: 'M12 16V4M7 9l5-5 5 5M4 17v2a1 1 0 001 1h14a1 1 0 001-1v-2',\n    file: 'M14 3H7a1 1 0 00-1 1v16a1 1 0 001 1h10a1 1 0 001-1V7l-4-4zM14 3v4h4',\n    user: 'M12 12a4 4 0 100-8 4 4 0 000 8zM4 21a8 8 0 0116 0',\n    columns: 'M4 5h16v14H4zM9.5 5v14M14.5 5v14',\n    filter: 'M4 5h16l-6 8v6l-4-2v-4L4 5z',\n    star: 'M12 3l2.7 5.6 6.1.9-4.4 4.3 1 6.1L12 17l-5.4 2.9 1-6.1L3.2 9.5l6.1-.9L12 3z',\n    circle: 'M12 20a8 8 0 100-16 8 8 0 000 16z',\n};\n\n/** Whether a name is one of the icons drawn here. */\nexport function isFoundationIcon(name: string): name is FoundationIconName {\n    return name in paths;\n}\n\n/**\n * One icon. It is decorative unless given a label: the meaning an icon carries is always repeated in text, so no status is\n * conveyed by color or shape alone (WCAG 1.4.1).\n */\nexport function FoundationIcon({ name, label }: { name: FoundationIconName; label?: string }) {\n    return (\n        <svg className='foundation-icon' viewBox='0 0 24 24' width='1em' height='1em' fill='none' stroke='currentColor' strokeWidth='2'\n            strokeLinecap='round' strokeLinejoin='round' aria-hidden={label ? undefined : true} role={label ? 'img' : undefined} aria-label={label}>\n            <path d={paths[name]} />\n        </svg>\n    );\n}\n"],"names":["paths","check","close","minus","alert","info","lock","clock","inbox","refresh","plus","upload","file","user","columns","filter","star","circle","isFoundationIcon","name","FoundationIcon","label","_jsx","svg","className","viewBox","width","height","fill","stroke","strokeWidth","strokeLinecap","strokeLinejoin","aria-hidden","undefined","role","aria-label","path","d"],"mappings":";;AAAA;AACA;AAOA,MAAMA,KAAAA,GAA4C;IAC9CC,KAAAA,EAAO,gBAAA;IACPC,KAAAA,EAAO,sBAAA;IACP,UAAA,EAAY,uBAAA;IACZ,YAAA,EAAc,uBAAA;IACdC,KAAAA,EAAO,UAAA;IACPC,KAAAA,EAAO,mGAAA;IACPC,IAAAA,EAAM,qDAAA;IACNC,IAAAA,EAAM,0FAAA;IACNC,KAAAA,EAAO,8CAAA;IACPC,KAAAA,EAAO,0EAAA;IACPC,OAAAA,EAAS,mCAAA;IACTC,IAAAA,EAAM,kBAAA;IACN,eAAA,EAAiB,cAAA;IACjB,cAAA,EAAgB,cAAA;IAChBC,MAAAA,EAAQ,2DAAA;IACRC,IAAAA,EAAM,qEAAA;IACNC,IAAAA,EAAM,mDAAA;IACNC,OAAAA,EAAS,kCAAA;IACTC,MAAAA,EAAQ,6BAAA;IACRC,IAAAA,EAAM,6EAAA;IACNC,MAAAA,EAAQ;AACZ,CAAA;AAEA,sDACO,SAASC,gBAAAA,CAAiBC,IAAY,EAAA;AACzC,IAAA,OAAOA,IAAAA,IAAQnB,KAAAA;AACnB;AAEA;;;AAGC,IACM,SAASoB,cAAAA,CAAe,EAAED,IAAI,EAAEE,KAAK,EAAgD,EAAA;AACxF,IAAA,qBACIC,GAAA,CAACC,KAAAA,EAAAA;QAAIC,SAAAA,EAAU,iBAAA;QAAkBC,OAAAA,EAAQ,WAAA;QAAYC,KAAAA,EAAM,KAAA;QAAMC,MAAAA,EAAO,KAAA;QAAMC,IAAAA,EAAK,MAAA;QAAOC,MAAAA,EAAO,cAAA;QAAeC,WAAAA,EAAY,GAAA;QACxHC,aAAAA,EAAc,OAAA;QAAQC,cAAAA,EAAe,OAAA;AAAQC,QAAAA,aAAAA,EAAaZ,QAAQa,SAAAA,GAAY,IAAA;AAAMC,QAAAA,IAAAA,EAAMd,QAAQ,KAAA,GAAQa,SAAAA;QAAWE,YAAAA,EAAYf,KAAAA;AACjI,QAAA,QAAA,gBAAAC,GAAA,CAACe,MAAAA,EAAAA;YAAKC,CAAAA,EAAGtC,KAAK,CAACmB,IAAAA;;;AAG3B;;"}

package/dist/esm/foundation/FoundationStates.d.ts

@@ -0,0 +1,8 @@
+export interface FoundationStatesProps {
+    component: string;
+    theme: 'light' | 'dark';
+    properties?: Record<string, unknown>;
+    rightToLeft?: boolean;
+}
+export declare function FoundationStates({ component, theme, properties, rightToLeft }: FoundationStatesProps): import("react").JSX.Element;
+//# sourceMappingURL=FoundationStates.d.ts.map

package/dist/esm/foundation/FoundationStates.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FoundationStates.d.ts","sourceRoot":"","sources":["../../../foundation/FoundationStates.tsx"],"names":[],"mappings":"AAUA,MAAM,WAAW,qBAAqB;IAElC,SAAS,EAAE,MAAM,CAAC;IAGlB,KAAK,EAAE,OAAO,GAAG,MAAM,CAAC;IAGxB,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAGrC,WAAW,CAAC,EAAE,OAAO,CAAC;CACzB;AAMD,wBAAgB,gBAAgB,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,EAAE,qBAAqB,+BAiBpG"}

package/dist/esm/foundation/FoundationStates.js

@@ -0,0 +1,60 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { componentRegistryKey, SceneThemeProvider } from '@cratis/scene.react';
+import { defaultBlueprintComponents } from '../defaultBlueprintComponents.js';
+import { defaultBlueprintName } from '../packageName.js';
+import { lightTheme } from '../themes/light.js';
+import { darkTheme } from '../themes/dark.js';
+import 'react';
+import { componentStates, ComponentState } from './ComponentState.js';
+import { foundationSamples, foundationElement } from './foundationSamples.js';
+
+/**
+ * Every standard state of one foundation component side by side in one theme: the preview of spec Part B 6 ("all standard states
+ * implemented and previewable"), used by the stories and by the gallery.
+ */ function FoundationStates({ component, theme, properties, rightToLeft }) {
+    const Component = defaultBlueprintComponents[componentRegistryKey(defaultBlueprintName, component)];
+    const sample = foundationSamples[component];
+    const states = sample?.stateful ? componentStates : [
+        ComponentState.Ready
+    ];
+    return /*#__PURE__*/ jsx(SceneThemeProvider, {
+        theme: theme === 'dark' ? darkTheme : lightTheme,
+        children: /*#__PURE__*/ jsx("div", {
+            dir: rightToLeft ? 'rtl' : 'ltr',
+            className: "foundation-states",
+            style: {
+                display: 'grid',
+                gap: '1rem',
+                padding: '1rem',
+                gridTemplateColumns: 'repeat(auto-fill, minmax(18rem, 1fr))',
+                background: 'var(--scene-surface-background)',
+                color: 'var(--scene-text-color)'
+            },
+            children: states.map((state)=>/*#__PURE__*/ jsxs("figure", {
+                    style: {
+                        margin: 0
+                    },
+                    children: [
+                        /*#__PURE__*/ jsx("figcaption", {
+                            style: {
+                                fontSize: '0.75rem',
+                                textTransform: 'uppercase',
+                                marginBlockEnd: '0.5rem'
+                            },
+                            children: state
+                        }),
+                        /*#__PURE__*/ jsx(Component, {
+                            element: foundationElement(component, {
+                                ...sample?.properties,
+                                ...properties
+                            }, state === ComponentState.Ready ? undefined : state),
+                            slots: {}
+                        })
+                    ]
+                }, state))
+        })
+    });
+}
+
+export { FoundationStates };
+//# sourceMappingURL=FoundationStates.js.map

package/dist/esm/foundation/FoundationStates.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FoundationStates.js","sources":["../../../foundation/FoundationStates.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 { componentRegistryKey, SceneThemeProvider } from '@cratis/scene.react';\nimport { defaultBlueprintComponents } from '../defaultBlueprintComponents';\nimport { defaultBlueprintName } from '../packageName';\nimport { darkTheme, lightTheme } from '../themes';\nimport { ComponentState, componentStates } from './ComponentState';\nimport { foundationElement, foundationSamples } from './foundationSamples';\n\nexport interface FoundationStatesProps {\n    /** The bare name of the foundation component. */\n    component: string;\n\n    /** The theme the states are drawn in. */\n    theme: 'light' | 'dark';\n\n    /** Properties to lay over the sample, to show a variant. */\n    properties?: Record<string, unknown>;\n\n    /** Whether the page reads right to left. */\n    rightToLeft?: boolean;\n}\n\n/**\n * Every standard state of one foundation component side by side in one theme: the preview of spec Part B 6 (\"all standard states\n * implemented and previewable\"), used by the stories and by the gallery.\n */\nexport function FoundationStates({ component, theme, properties, rightToLeft }: FoundationStatesProps) {\n    const Component = defaultBlueprintComponents[componentRegistryKey(defaultBlueprintName, component)];\n    const sample = foundationSamples[component];\n    const states = sample?.stateful ? componentStates : [ComponentState.Ready];\n\n    return (\n        <SceneThemeProvider theme={theme === 'dark' ? darkTheme : lightTheme}>\n            <div dir={rightToLeft ? 'rtl' : 'ltr'} className='foundation-states' style={{ display: 'grid', gap: '1rem', padding: '1rem', gridTemplateColumns: 'repeat(auto-fill, minmax(18rem, 1fr))', background: 'var(--scene-surface-background)', color: 'var(--scene-text-color)' }}>\n                {states.map(state => (\n                    <figure key={state} style={{ margin: 0 }}>\n                        <figcaption style={{ fontSize: '0.75rem', textTransform: 'uppercase', marginBlockEnd: '0.5rem' }}>{state}</figcaption>\n                        <Component element={foundationElement(component, { ...sample?.properties, ...properties }, state === ComponentState.Ready ? undefined : state)} slots={{}} />\n                    </figure>\n                ))}\n            </div>\n        </SceneThemeProvider>\n    );\n}\n"],"names":["FoundationStates","component","theme","properties","rightToLeft","Component","defaultBlueprintComponents","componentRegistryKey","defaultBlueprintName","sample","foundationSamples","states","stateful","componentStates","ComponentState","Ready","_jsx","SceneThemeProvider","darkTheme","lightTheme","div","dir","className","style","display","gap","padding","gridTemplateColumns","background","color","map","state","_jsxs","figure","margin","figcaption","fontSize","textTransform","marginBlockEnd","element","foundationElement","undefined","slots"],"mappings":";;;;;;;;;;AAwBA;;;IAIO,SAASA,gBAAAA,CAAiB,EAAEC,SAAS,EAAEC,KAAK,EAAEC,UAAU,EAAEC,WAAW,EAAyB,EAAA;AACjG,IAAA,MAAMC,SAAAA,GAAYC,0BAA0B,CAACC,oBAAAA,CAAqBC,sBAAsBP,SAAAA,CAAAA,CAAW;IACnG,MAAMQ,MAAAA,GAASC,iBAAiB,CAACT,SAAAA,CAAU;IAC3C,MAAMU,MAAAA,GAASF,MAAAA,EAAQG,QAAAA,GAAWC,eAAAA,GAAkB;AAACC,QAAAA,cAAAA,CAAeC;AAAM,KAAA;AAE1E,IAAA,qBACIC,GAAA,CAACC,kBAAAA,EAAAA;QAAmBf,KAAAA,EAAOA,KAAAA,KAAU,SAASgB,SAAAA,GAAYC,UAAAA;AACtD,QAAA,QAAA,gBAAAH,GAAA,CAACI,KAAAA,EAAAA;AAAIC,YAAAA,GAAAA,EAAKjB,cAAc,KAAA,GAAQ,KAAA;YAAOkB,SAAAA,EAAU,mBAAA;YAAoBC,KAAAA,EAAO;gBAAEC,OAAAA,EAAS,MAAA;gBAAQC,GAAAA,EAAK,MAAA;gBAAQC,OAAAA,EAAS,MAAA;gBAAQC,mBAAAA,EAAqB,uCAAA;gBAAyCC,UAAAA,EAAY,iCAAA;gBAAmCC,KAAAA,EAAO;AAA0B,aAAA;AACtQlB,YAAAA,QAAAA,EAAAA,MAAAA,CAAOmB,GAAG,CAACC,CAAAA,KAAAA,iBACRC,IAAA,CAACC,QAAAA,EAAAA;oBAAmBV,KAAAA,EAAO;wBAAEW,MAAAA,EAAQ;AAAE,qBAAA;;sCACnClB,GAAA,CAACmB,YAAAA,EAAAA;4BAAWZ,KAAAA,EAAO;gCAAEa,QAAAA,EAAU,SAAA;gCAAWC,aAAAA,EAAe,WAAA;gCAAaC,cAAAA,EAAgB;AAAS,6BAAA;AAAIP,4BAAAA,QAAAA,EAAAA;;sCACnGf,GAAA,CAACX,SAAAA,EAAAA;AAAUkC,4BAAAA,OAAAA,EAASC,kBAAkBvC,SAAAA,EAAW;AAAE,gCAAA,GAAGQ,QAAQN,UAAU;AAAE,gCAAA,GAAGA;AAAW,6BAAA,EAAG4B,KAAAA,KAAUjB,cAAAA,CAAeC,KAAK,GAAG0B,SAAAA,GAAYV,KAAAA,CAAAA;AAAQW,4BAAAA,KAAAA,EAAO;;;AAF9IX,iBAAAA,EAAAA,KAAAA,CAAAA;;;AAQjC;;"}

package/dist/esm/foundation/PermissionRule.d.ts

@@ -0,0 +1,8 @@
+import { ExternalComponent } from '@cratis/scene.model';
+export declare enum PermissionRule {
+    Enabled = "enabled",
+    Disabled = "disabled",
+    Hidden = "hidden"
+}
+export declare function readPermissionRule(element: ExternalComponent, property?: string): PermissionRule;
+//# sourceMappingURL=PermissionRule.d.ts.map

package/dist/esm/foundation/PermissionRule.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PermissionRule.d.ts","sourceRoot":"","sources":["../../../foundation/PermissionRule.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAOxD,oBAAY,cAAc;IAEtB,OAAO,YAAY;IAGnB,QAAQ,aAAa;IAGrB,MAAM,WAAW;CACpB;AAGD,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,iBAAiB,EAAE,QAAQ,SAAe,GAAG,cAAc,CAGtG"}

package/dist/esm/foundation/PermissionRule.js

@@ -0,0 +1,19 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+/**
+ * What an action control does when the user lacks the permission it needs (spec Part B 1.5): it is shown and works, shown and
+ * refuses, or not shown. A template never assumes a role, so every action declares one of these and the host's permission
+ * evaluation sets it.
+ */ var PermissionRule = /*#__PURE__*/ function(PermissionRule) {
+    /** The control works. */ PermissionRule["Enabled"] = "enabled";
+    /** The control is shown but cannot be used, and says why. */ PermissionRule["Disabled"] = "disabled";
+    /** The control is not rendered. */ PermissionRule["Hidden"] = "hidden";
+    return PermissionRule;
+}({});
+/** Reads a permission rule from a property, defaulting to Enabled for anything that is not a rule. */ function readPermissionRule(element, property = 'permission') {
+    const value = element.properties[property];
+    return value === "disabled" || value === "hidden" ? value : "enabled";
+}
+
+export { PermissionRule, readPermissionRule };
+//# sourceMappingURL=PermissionRule.js.map

package/dist/esm/foundation/PermissionRule.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PermissionRule.js","sources":["../../../foundation/PermissionRule.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\nimport { ExternalComponent } from '@cratis/scene.model';\n\n/**\n * What an action control does when the user lacks the permission it needs (spec Part B 1.5): it is shown and works, shown and\n * refuses, or not shown. A template never assumes a role, so every action declares one of these and the host's permission\n * evaluation sets it.\n */\nexport enum PermissionRule {\n    /** The control works. */\n    Enabled = 'enabled',\n\n    /** The control is shown but cannot be used, and says why. */\n    Disabled = 'disabled',\n\n    /** The control is not rendered. */\n    Hidden = 'hidden',\n}\n\n/** Reads a permission rule from a property, defaulting to Enabled for anything that is not a rule. */\nexport function readPermissionRule(element: ExternalComponent, property = 'permission'): PermissionRule {\n    const value = element.properties[property];\n    return value === PermissionRule.Disabled || value === PermissionRule.Hidden ? value : PermissionRule.Enabled;\n}\n"],"names":["PermissionRule","readPermissionRule","element","property","value","properties"],"mappings":"AAAA;AACA;AAIA;;;;IAKO,IAAKA,cAAAA,iBAAAA,SAAAA,cAAAA,EAAAA;8BACe,cAAA,CAAA,SAAA,CAAA,GAAA,SAAA;kEAGoC,cAAA,CAAA,UAAA,CAAA,GAAA,UAAA;wCAG1B,cAAA,CAAA,QAAA,CAAA,GAAA,QAAA;AAPzBA,IAAAA,OAAAA,cAAAA;AASX,CAAA,CAAA,EAAA;AAED,uGACO,SAASC,mBAAmBC,OAA0B,EAAEC,WAAW,YAAY,EAAA;AAClF,IAAA,MAAMC,KAAAA,GAAQF,OAAAA,CAAQG,UAAU,CAACF,QAAAA,CAAS;AAC1C,IAAA,OAAOC,wBAAqCA,KAAAA,KAAAA,QAAAA,GAAkCA,KAAAA,GAAAA,SAAAA;AAClF;;"}

package/dist/esm/foundation/StatCard.d.ts

@@ -0,0 +1,3 @@
+import { RegisteredComponentProps } from '@cratis/scene.react';
+export declare function StatCard({ element, interactions }: RegisteredComponentProps): import("react").JSX.Element;
+//# sourceMappingURL=StatCard.d.ts.map

package/dist/esm/foundation/StatCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatCard.d.ts","sourceRoot":"","sources":["../../../foundation/StatCard.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAgB/D,wBAAgB,QAAQ,CAAC,EAAE,OAAO,EAAE,YAAY,EAAE,EAAE,wBAAwB,+BAwB3E"}

package/dist/esm/foundation/StatCard.js

@@ -0,0 +1,59 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { readComponentState, ComponentState } from './ComponentState.js';
+import { FoundationFrame } from './StateFrame.js';
+import { TrendChipView } from './TrendChip.js';
+import { readLocale, formatNumber, readNumberFormat } from './formatting.js';
+import { readFoundationStrings } from './foundationStrings.js';
+import { readString, readOptionalString } from '../shell/elementProperties.js';
+
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+/**
+ * The `statCard` component: one key figure with its label, its trend and what the trend is compared to - the unit of a dashboard's
+ * `kpis` slot.
+ *
+ * The value is a bound number, never embedded in the component (a figure is data, not design); it is formatted for the locale as
+ * a number, currency, percent or compact. With no value the card is empty, and it shows all five standard states
+ * independently of its neighbours, so a dashboard whose one query failed still shows the other cards.
+ */ function StatCard({ element, interactions }) {
+    const value = element.properties.value;
+    const hasValue = typeof value === 'number';
+    const state = readComponentState(element, hasValue);
+    const locale = readLocale(element);
+    const label = readString(element, 'label');
+    const change = element.properties.change;
+    const currency = readOptionalString(element, 'currency');
+    return /*#__PURE__*/ jsx(FoundationFrame, {
+        element: element,
+        interactions: interactions,
+        name: "stat-card",
+        state: state,
+        skeleton: [
+            40,
+            70,
+            30
+        ],
+        children: state !== ComponentState.Loading && /*#__PURE__*/ jsxs(Fragment, {
+            children: [
+                /*#__PURE__*/ jsx("h3", {
+                    className: "foundation-stat-label",
+                    children: label
+                }),
+                /*#__PURE__*/ jsx("p", {
+                    className: "foundation-stat-value",
+                    children: hasValue ? formatNumber(value, locale, readNumberFormat(element), currency, typeof element.properties.fractionDigits === 'number' ? element.properties.fractionDigits : undefined) : ''
+                }),
+                typeof change === 'number' && /*#__PURE__*/ jsx(TrendChipView, {
+                    change: change,
+                    locale: locale,
+                    goodDirection: element.properties.goodDirection === 'down' ? 'down' : 'up',
+                    comparison: readOptionalString(element, 'comparison'),
+                    strings: readFoundationStrings(element)
+                })
+            ]
+        })
+    });
+}
+
+export { StatCard };
+//# sourceMappingURL=StatCard.js.map

package/dist/esm/foundation/StatCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatCard.js","sources":["../../../foundation/StatCard.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 { RegisteredComponentProps } from '@cratis/scene.react';\nimport { ComponentState, readComponentState } from './ComponentState';\nimport { FoundationFrame } from './StateFrame';\nimport { TrendChipView } from './TrendChip';\nimport { formatNumber, readLocale, readNumberFormat } from './formatting';\nimport { readFoundationStrings } from './foundationStrings';\nimport { readOptionalString, readString } from '../shell/elementProperties';\n\n/**\n * The `statCard` component: one key figure with its label, its trend and what the trend is compared to - the unit of a dashboard's\n * `kpis` slot.\n *\n * The value is a bound number, never embedded in the component (a figure is data, not design); it is formatted for the locale as\n * a number, currency, percent or compact. With no value the card is empty, and it shows all five standard states\n * independently of its neighbours, so a dashboard whose one query failed still shows the other cards.\n */\nexport function StatCard({ element, interactions }: RegisteredComponentProps) {\n    const value = element.properties.value;\n    const hasValue = typeof value === 'number';\n    const state = readComponentState(element, hasValue);\n    const locale = readLocale(element);\n    const label = readString(element, 'label');\n    const change = element.properties.change;\n    const currency = readOptionalString(element, 'currency');\n\n    return (\n        <FoundationFrame element={element} interactions={interactions}\n            name='stat-card' state={state} skeleton={[40, 70, 30]}>\n            {state !== ComponentState.Loading && (\n                <>\n                    <h3 className='foundation-stat-label'>{label}</h3>\n                    <p className='foundation-stat-value'>{hasValue ? formatNumber(value, locale, readNumberFormat(element), currency, typeof element.properties.fractionDigits === 'number' ? element.properties.fractionDigits : undefined) : ''}</p>\n                    {typeof change === 'number' && (\n                        <TrendChipView change={change} locale={locale} goodDirection={element.properties.goodDirection === 'down' ? 'down' : 'up'}\n                            comparison={readOptionalString(element, 'comparison')} strings={readFoundationStrings(element)} />\n                    )}\n                </>\n            )}\n        </FoundationFrame>\n    );\n}\n"],"names":["StatCard","element","interactions","value","properties","hasValue","state","readComponentState","locale","readLocale","label","readString","change","currency","readOptionalString","_jsx","FoundationFrame","name","skeleton","ComponentState","Loading","_jsxs","_Fragment","h3","className","p","formatNumber","readNumberFormat","fractionDigits","undefined","TrendChipView","goodDirection","comparison","strings","readFoundationStrings"],"mappings":";;;;;;;;AAAA;AACA;AAUA;;;;;;;AAOC,IACM,SAASA,QAAAA,CAAS,EAAEC,OAAO,EAAEC,YAAY,EAA4B,EAAA;AACxE,IAAA,MAAMC,KAAAA,GAAQF,OAAAA,CAAQG,UAAU,CAACD,KAAK;IACtC,MAAME,QAAAA,GAAW,OAAOF,KAAAA,KAAU,QAAA;IAClC,MAAMG,KAAAA,GAAQC,mBAAmBN,OAAAA,EAASI,QAAAA,CAAAA;AAC1C,IAAA,MAAMG,SAASC,UAAAA,CAAWR,OAAAA,CAAAA;IAC1B,MAAMS,KAAAA,GAAQC,WAAWV,OAAAA,EAAS,OAAA,CAAA;AAClC,IAAA,MAAMW,MAAAA,GAASX,OAAAA,CAAQG,UAAU,CAACQ,MAAM;IACxC,MAAMC,QAAAA,GAAWC,mBAAmBb,OAAAA,EAAS,UAAA,CAAA;AAE7C,IAAA,qBACIc,GAAA,CAACC,eAAAA,EAAAA;QAAgBf,OAAAA,EAASA,OAAAA;QAASC,YAAAA,EAAcA,YAAAA;QAC7Ce,IAAAA,EAAK,WAAA;QAAYX,KAAAA,EAAOA,KAAAA;QAAOY,QAAAA,EAAU;AAAC,YAAA,EAAA;AAAI,YAAA,EAAA;AAAI,YAAA;AAAG,SAAA;kBACpDZ,KAAAA,KAAUa,cAAAA,CAAeC,OAAO,kBAC7BC,IAAA,CAAAC,QAAA,EAAA;;8BACIP,GAAA,CAACQ,IAAAA,EAAAA;oBAAGC,SAAAA,EAAU,uBAAA;AAAyBd,oBAAAA,QAAAA,EAAAA;;8BACvCK,GAAA,CAACU,GAAAA,EAAAA;oBAAED,SAAAA,EAAU,uBAAA;AAAyBnB,oBAAAA,QAAAA,EAAAA,QAAAA,GAAWqB,aAAavB,KAAAA,EAAOK,MAAAA,EAAQmB,iBAAiB1B,OAAAA,CAAAA,EAAUY,QAAAA,EAAU,OAAOZ,OAAAA,CAAQG,UAAU,CAACwB,cAAc,KAAK,QAAA,GAAW3B,OAAAA,CAAQG,UAAU,CAACwB,cAAc,GAAGC,SAAAA,CAAAA,GAAa;;gBAC1N,OAAOjB,MAAAA,KAAW,0BACfG,GAAA,CAACe,aAAAA,EAAAA;oBAAclB,MAAAA,EAAQA,MAAAA;oBAAQJ,MAAAA,EAAQA,MAAAA;AAAQuB,oBAAAA,aAAAA,EAAe9B,QAAQG,UAAU,CAAC2B,aAAa,KAAK,SAAS,MAAA,GAAS,IAAA;AACjHC,oBAAAA,UAAAA,EAAYlB,mBAAmBb,OAAAA,EAAS,YAAA,CAAA;AAAegC,oBAAAA,OAAAA,EAASC,qBAAAA,CAAsBjC,OAAAA;;;;;AAMlH;;"}

package/dist/esm/foundation/StateFrame.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { ComponentState } from './ComponentState';
+import { FoundationStrings } from './foundationStrings';
+export interface FoundationFrameProps extends Pick<RegisteredComponentProps, 'element' | 'interactions'> {
+    name: string;
+    state: ComponentState;
+    skeleton?: number[];
+    children?: ReactNode;
+}
+export declare function FoundationFrame({ element, interactions, name, state, skeleton, children }: FoundationFrameProps): import("react").JSX.Element;
+export declare function EmptyStateView({ element, interactions, strings }: Pick<FoundationFrameProps, 'element' | 'interactions'> & {
+    strings: FoundationStrings;
+}): import("react").JSX.Element;
+//# sourceMappingURL=StateFrame.d.ts.map

package/dist/esm/foundation/StateFrame.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StateFrame.d.ts","sourceRoot":"","sources":["../../../foundation/StateFrame.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,OAAO,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAG/D,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,OAAO,EAAE,iBAAiB,EAAqC,MAAM,qBAAqB,CAAC;AAI3F,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAAC,wBAAwB,EAAE,SAAS,GAAG,cAAc,CAAC;IAEpG,IAAI,EAAE,MAAM,CAAC;IAGb,KAAK,EAAE,cAAc,CAAC;IAGtB,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IAGpB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB;AAgBD,wBAAgB,eAAe,CAAC,EAAE,OAAO,EAAE,YAAY,EAAE,IAAI,EAAE,KAAK,EAAE,QAAwB,EAAE,QAAQ,EAAE,EAAE,oBAAoB,+BAW/H;AAyDD,wBAAgB,cAAc,CAAC,EAAE,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,EAAE,IAAI,CAAC,oBAAoB,EAAE,SAAS,GAAG,cAAc,CAAC,GAAG;IAAE,OAAO,EAAE,iBAAiB,CAAA;CAAE,+BAczJ"}

package/dist/esm/foundation/StateFrame.js

@@ -0,0 +1,197 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { readOptionalString, readStrings } from '../shell/elementProperties.js';
+import { ActionButton } from './ActionButton.js';
+import { ComponentState } from './ComponentState.js';
+import { FoundationIcon } from './FoundationIcon.js';
+import { readFoundationStrings, formatText } from './foundationStrings.js';
+import { readPermissionRule } from './PermissionRule.js';
+import { readLocale } from './formatting.js';
+
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+/** The accessible name of a region, from the element's `label` property. */ function regionLabel(element) {
+    return readOptionalString(element, 'label') ?? readOptionalString(element, 'title');
+}
+/**
+ * The root every foundation component renders, and the five standard states of spec Part B 1.4 in one place:
+ * a skeleton while loading (never a spinner alone), an explanation with the primary action when empty, a message with a
+ * retry on error, what is missing - and nothing of the data - when the user is not allowed, and the loaded part with a
+ * note naming what failed when only some regions did.
+ *
+ * The region carries an ARIA landmark role when it has a label, a `dir` is left to the document so right-to-left is
+ * inherited, and every piece of text comes from the strings table.
+ */ function FoundationFrame({ element, interactions, name, state, skeleton = [
+    60,
+    100,
+    80
+], children }) {
+    const strings = readFoundationStrings(element);
+    const label = regionLabel(element);
+    const density = element.properties.density === 'compact' ? 'compact' : 'comfortable';
+    return /*#__PURE__*/ jsx("section", {
+        className: `foundation foundation-${name}`,
+        "data-scene-id": element.id,
+        "data-state": state,
+        "data-density": density,
+        lang: readLocale(element),
+        role: label ? 'region' : undefined,
+        "aria-label": label,
+        "aria-busy": state === ComponentState.Loading || undefined,
+        children: renderState(element, interactions, strings, state, skeleton, children)
+    });
+}
+function renderState(element, interactions, strings, state, skeleton, children) {
+    switch(state){
+        case ComponentState.Loading:
+            return /*#__PURE__*/ jsxs("div", {
+                className: "foundation-skeleton",
+                role: "status",
+                children: [
+                    /*#__PURE__*/ jsx("span", {
+                        className: "foundation-visually-hidden",
+                        children: strings.loading
+                    }),
+                    skeleton.map((width, index)=>/*#__PURE__*/ jsx("span", {
+                            className: "foundation-skeleton-block",
+                            style: {
+                                width: `${width}%`
+                            },
+                            "aria-hidden": "true"
+                        }, index))
+                ]
+            });
+        case ComponentState.Empty:
+            return /*#__PURE__*/ jsx(EmptyStateView, {
+                element: element,
+                interactions: interactions,
+                strings: strings
+            });
+        case ComponentState.Error:
+            return /*#__PURE__*/ jsxs("div", {
+                className: "foundation-message",
+                "data-tone": "danger",
+                role: "alert",
+                children: [
+                    /*#__PURE__*/ jsx(FoundationIcon, {
+                        name: "alert"
+                    }),
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "foundation-message-text",
+                        children: [
+                            /*#__PURE__*/ jsx("strong", {
+                                children: strings.errorHeadline
+                            }),
+                            /*#__PURE__*/ jsx("span", {
+                                children: typeof element.properties.error === 'string' && element.properties.error.length > 0 ? element.properties.error : strings.errorHint
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx(ActionButton, {
+                        emphasis: "secondary",
+                        disabledReason: strings.disabledNoPermission,
+                        onClick: interactions?.onClick,
+                        children: strings.retry
+                    })
+                ]
+            });
+        case ComponentState.NoPermission:
+            {
+                const subject = readOptionalString(element, 'permissionSubject') ?? strings.noPermissionSubject;
+                return /*#__PURE__*/ jsxs("div", {
+                    className: "foundation-message",
+                    "data-tone": "neutral",
+                    role: "status",
+                    children: [
+                        /*#__PURE__*/ jsx(FoundationIcon, {
+                            name: "lock"
+                        }),
+                        /*#__PURE__*/ jsxs("div", {
+                            className: "foundation-message-text",
+                            children: [
+                                /*#__PURE__*/ jsx("strong", {
+                                    children: strings.noPermissionHeadline
+                                }),
+                                /*#__PURE__*/ jsx("span", {
+                                    children: formatText(strings.noPermissionHint, {
+                                        subject
+                                    })
+                                })
+                            ]
+                        })
+                    ]
+                });
+            }
+        case ComponentState.Partial:
+            return /*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "foundation-message",
+                        "data-tone": "warning",
+                        role: "status",
+                        children: [
+                            /*#__PURE__*/ jsx(FoundationIcon, {
+                                name: "alert"
+                            }),
+                            /*#__PURE__*/ jsxs("div", {
+                                className: "foundation-message-text",
+                                children: [
+                                    /*#__PURE__*/ jsx("strong", {
+                                        children: strings.partialHeadline
+                                    }),
+                                    readStrings(element, 'failedRegions').length > 0 && /*#__PURE__*/ jsx("span", {
+                                        children: formatText(strings.partialHint, {
+                                            regions: readStrings(element, 'failedRegions').join(', ')
+                                        })
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsx(ActionButton, {
+                                emphasis: "secondary",
+                                disabledReason: strings.disabledNoPermission,
+                                onClick: interactions?.onClick,
+                                children: strings.retry
+                            })
+                        ]
+                    }),
+                    children
+                ]
+            });
+        default:
+            return /*#__PURE__*/ jsx(Fragment, {
+                children: children
+            });
+    }
+}
+/** What an empty region says: an icon, a headline, a hint and the primary action, with the action's permission rule applied. */ function EmptyStateView({ element, interactions, strings }) {
+    const icon = readOptionalString(element, 'emptyIcon') ?? readOptionalString(element, 'icon');
+    const actionLabel = readOptionalString(element, 'emptyActionLabel') ?? readOptionalString(element, 'actionLabel');
+    return /*#__PURE__*/ jsxs("div", {
+        className: "foundation-empty",
+        role: "status",
+        children: [
+            /*#__PURE__*/ jsx("span", {
+                className: "foundation-empty-icon",
+                children: /*#__PURE__*/ jsx(FoundationIcon, {
+                    name: icon ?? 'inbox'
+                })
+            }),
+            /*#__PURE__*/ jsx("strong", {
+                className: "foundation-empty-headline",
+                children: readOptionalString(element, 'emptyHeadline') ?? readOptionalString(element, 'headline') ?? strings.emptyHeadline
+            }),
+            /*#__PURE__*/ jsx("span", {
+                className: "foundation-empty-hint",
+                children: readOptionalString(element, 'emptyHint') ?? readOptionalString(element, 'hint') ?? strings.emptyHint
+            }),
+            actionLabel && /*#__PURE__*/ jsx(ActionButton, {
+                rule: readPermissionRule(element, 'actionPermission'),
+                disabledReason: strings.disabledNoPermission,
+                onClick: interactions?.onClick,
+                children: actionLabel
+            })
+        ]
+    });
+}
+
+export { EmptyStateView, FoundationFrame };
+//# sourceMappingURL=StateFrame.js.map

package/dist/esm/foundation/StateFrame.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StateFrame.js","sources":["../../../foundation/StateFrame.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 { ReactNode } from 'react';\nimport { ExternalComponent } from '@cratis/scene.model';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { readOptionalString, readStrings } from '../shell/elementProperties';\nimport { ActionButton } from './ActionButton';\nimport { ComponentState } from './ComponentState';\nimport { FoundationIcon, FoundationIconName } from './FoundationIcon';\nimport { FoundationStrings, formatText, readFoundationStrings } from './foundationStrings';\nimport { readPermissionRule } from './PermissionRule';\nimport { readLocale } from './formatting';\n\nexport interface FoundationFrameProps extends Pick<RegisteredComponentProps, 'element' | 'interactions'> {\n    /** The component's own class, added after `foundation`. */\n    name: string;\n\n    /** The state the component is in; compute it with `readComponentState`. */\n    state: ComponentState;\n\n    /** The shape of the skeleton, as the width of each block in percent; the skeleton keeps the footprint of the content. */\n    skeleton?: number[];\n\n    /** What the component draws when it is ready or partial. */\n    children?: ReactNode;\n}\n\n/** The accessible name of a region, from the element's `label` property. */\nfunction regionLabel(element: ExternalComponent): string | undefined {\n    return readOptionalString(element, 'label') ?? readOptionalString(element, 'title');\n}\n\n/**\n * The root every foundation component renders, and the five standard states of spec Part B 1.4 in one place:\n * a skeleton while loading (never a spinner alone), an explanation with the primary action when empty, a message with a\n * retry on error, what is missing - and nothing of the data - when the user is not allowed, and the loaded part with a\n * note naming what failed when only some regions did.\n *\n * The region carries an ARIA landmark role when it has a label, a `dir` is left to the document so right-to-left is\n * inherited, and every piece of text comes from the strings table.\n */\nexport function FoundationFrame({ element, interactions, name, state, skeleton = [60, 100, 80], children }: FoundationFrameProps) {\n    const strings = readFoundationStrings(element);\n    const label = regionLabel(element);\n    const density = element.properties.density === 'compact' ? 'compact' : 'comfortable';\n\n    return (\n        <section className={`foundation foundation-${name}`} data-scene-id={element.id} data-state={state} data-density={density}\n            lang={readLocale(element)} role={label ? 'region' : undefined} aria-label={label} aria-busy={state === ComponentState.Loading || undefined}>\n            {renderState(element, interactions, strings, state, skeleton, children)}\n        </section>\n    );\n}\n\nfunction renderState(element: ExternalComponent, interactions: RegisteredComponentProps['interactions'], strings: FoundationStrings, state: ComponentState, skeleton: number[], children: ReactNode) {\n    switch (state) {\n        case ComponentState.Loading:\n            return (\n                <div className='foundation-skeleton' role='status'>\n                    <span className='foundation-visually-hidden'>{strings.loading}</span>\n                    {skeleton.map((width, index) => <span key={index} className='foundation-skeleton-block' style={{ width: `${width}%` }} aria-hidden='true' />)}\n                </div>\n            );\n        case ComponentState.Empty:\n            return <EmptyStateView element={element} interactions={interactions} strings={strings} />;\n        case ComponentState.Error:\n            return (\n                <div className='foundation-message' data-tone='danger' role='alert'>\n                    <FoundationIcon name='alert' />\n                    <div className='foundation-message-text'>\n                        <strong>{strings.errorHeadline}</strong>\n                        <span>{typeof element.properties.error === 'string' && element.properties.error.length > 0 ? element.properties.error : strings.errorHint}</span>\n                    </div>\n                    <ActionButton emphasis='secondary' disabledReason={strings.disabledNoPermission} onClick={interactions?.onClick}>{strings.retry}</ActionButton>\n                </div>\n            );\n        case ComponentState.NoPermission: {\n            const subject = readOptionalString(element, 'permissionSubject') ?? strings.noPermissionSubject;\n            return (\n                <div className='foundation-message' data-tone='neutral' role='status'>\n                    <FoundationIcon name='lock' />\n                    <div className='foundation-message-text'>\n                        <strong>{strings.noPermissionHeadline}</strong>\n                        <span>{formatText(strings.noPermissionHint, { subject })}</span>\n                    </div>\n                </div>\n            );\n        }\n\n        case ComponentState.Partial:\n            return (\n                <>\n                    <div className='foundation-message' data-tone='warning' role='status'>\n                        <FoundationIcon name='alert' />\n                        <div className='foundation-message-text'>\n                            <strong>{strings.partialHeadline}</strong>\n                            {readStrings(element, 'failedRegions').length > 0 && <span>{formatText(strings.partialHint, { regions: readStrings(element, 'failedRegions').join(', ') })}</span>}\n                        </div>\n                        <ActionButton emphasis='secondary' disabledReason={strings.disabledNoPermission} onClick={interactions?.onClick}>{strings.retry}</ActionButton>\n                    </div>\n                    {children}\n                </>\n            );\n        default:\n            return <>{children}</>;\n    }\n}\n\n/** What an empty region says: an icon, a headline, a hint and the primary action, with the action's permission rule applied. */\nexport function EmptyStateView({ element, interactions, strings }: Pick<FoundationFrameProps, 'element' | 'interactions'> & { strings: FoundationStrings }) {\n    const icon = (readOptionalString(element, 'emptyIcon') ?? readOptionalString(element, 'icon')) as FoundationIconName | undefined;\n    const actionLabel = readOptionalString(element, 'emptyActionLabel') ?? readOptionalString(element, 'actionLabel');\n\n    return (\n        <div className='foundation-empty' role='status'>\n            <span className='foundation-empty-icon'><FoundationIcon name={icon ?? 'inbox'} /></span>\n            <strong className='foundation-empty-headline'>{readOptionalString(element, 'emptyHeadline') ?? readOptionalString(element, 'headline') ?? strings.emptyHeadline}</strong>\n            <span className='foundation-empty-hint'>{readOptionalString(element, 'emptyHint') ?? readOptionalString(element, 'hint') ?? strings.emptyHint}</span>\n            {actionLabel && (\n                <ActionButton rule={readPermissionRule(element, 'actionPermission')} disabledReason={strings.disabledNoPermission} onClick={interactions?.onClick}>{actionLabel}</ActionButton>\n            )}\n        </div>\n    );\n}\n\n"],"names":["regionLabel","element","readOptionalString","FoundationFrame","interactions","name","state","skeleton","children","strings","readFoundationStrings","label","density","properties","_jsx","section","className","data-scene-id","id","data-state","data-density","lang","readLocale","role","undefined","aria-label","aria-busy","ComponentState","Loading","renderState","_jsxs","div","span","loading","map","width","index","style","aria-hidden","Empty","EmptyStateView","Error","data-tone","FoundationIcon","strong","errorHeadline","error","length","errorHint","ActionButton","emphasis","disabledReason","disabledNoPermission","onClick","retry","NoPermission","subject","noPermissionSubject","noPermissionHeadline","formatText","noPermissionHint","Partial","_Fragment","partialHeadline","readStrings","partialHint","regions","join","icon","actionLabel","emptyHeadline","emptyHint","rule","readPermissionRule"],"mappings":"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"}

package/dist/esm/foundation/StatusChip.d.ts

@@ -0,0 +1,13 @@
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { FoundationIconName } from './FoundationIcon';
+export declare enum StatusTone {
+    Success = "success",
+    Warning = "warning",
+    Danger = "danger",
+    Info = "info",
+    Neutral = "neutral"
+}
+export declare const statusToneIcons: Record<StatusTone, FoundationIconName>;
+export declare function readStatusTone(value: unknown): StatusTone;
+export declare function StatusChip({ element }: RegisteredComponentProps): import("react").JSX.Element;
+//# sourceMappingURL=StatusChip.d.ts.map

package/dist/esm/foundation/StatusChip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusChip.d.ts","sourceRoot":"","sources":["../../../foundation/StatusChip.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAE/D,OAAO,EAAkB,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAItE,oBAAY,UAAU;IAClB,OAAO,YAAY;IACnB,OAAO,YAAY;IACnB,MAAM,WAAW;IACjB,IAAI,SAAS;IACb,OAAO,YAAY;CACtB;AAGD,eAAO,MAAM,eAAe,EAAE,MAAM,CAAC,UAAU,EAAE,kBAAkB,CAMlE,CAAC;AAGF,wBAAgB,cAAc,CAAC,KAAK,EAAE,OAAO,GAAG,UAAU,CAEzD;AASD,wBAAgB,UAAU,CAAC,EAAE,OAAO,EAAE,EAAE,wBAAwB,+BAY/D"}

package/dist/esm/foundation/StatusChip.js

@@ -0,0 +1,59 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { readFoundationStrings } from './foundationStrings.js';
+import { FoundationIcon } from './FoundationIcon.js';
+import { readString, readOptionalString } from '../shell/elementProperties.js';
+
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+/** The semantic tone of a status. */ var StatusTone = /*#__PURE__*/ function(StatusTone) {
+    StatusTone["Success"] = "success";
+    StatusTone["Warning"] = "warning";
+    StatusTone["Danger"] = "danger";
+    StatusTone["Info"] = "info";
+    StatusTone["Neutral"] = "neutral";
+    return StatusTone;
+}({});
+/** The icon each tone gets, so a status is told by shape as well as color (WCAG 1.4.1). */ const statusToneIcons = {
+    ["success"]: 'check',
+    ["warning"]: 'alert',
+    ["danger"]: 'close',
+    ["info"]: 'info',
+    ["neutral"]: 'circle'
+};
+/** Reads a tone, defaulting to Neutral. */ function readStatusTone(value) {
+    return Object.values(StatusTone).includes(value) ? value : "neutral";
+}
+/**
+ * The `statusChip` component: a status as a semantic color, an icon and its text.
+ *
+ * The text is always shown - the status of a record is never only a colored dot - and the tone picks the icon and the color from
+ * the theme's status tokens. A status the application names ("Awaiting approval") is its own `status` text; `tone` maps it onto
+ * one of the five tones.
+ */ function StatusChip({ element }) {
+    const tone = readStatusTone(element.properties.tone);
+    const strings = readFoundationStrings(element);
+    const fallback = {
+        success: strings.statusSuccess,
+        warning: strings.statusWarning,
+        danger: strings.statusDanger,
+        info: strings.statusInfo,
+        neutral: strings.statusNeutral
+    }[tone];
+    const text = readString(element, 'status', readOptionalString(element, 'label') ?? fallback);
+    return /*#__PURE__*/ jsxs("span", {
+        className: "foundation foundation-chip foundation-status-chip",
+        "data-scene-id": element.id,
+        "data-tone": tone,
+        children: [
+            /*#__PURE__*/ jsx(FoundationIcon, {
+                name: statusToneIcons[tone]
+            }),
+            /*#__PURE__*/ jsx("span", {
+                children: text
+            })
+        ]
+    });
+}
+
+export { StatusChip, StatusTone, readStatusTone, statusToneIcons };
+//# sourceMappingURL=StatusChip.js.map

package/dist/esm/foundation/StatusChip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusChip.js","sources":["../../../foundation/StatusChip.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 { RegisteredComponentProps } from '@cratis/scene.react';\nimport { readFoundationStrings } from './foundationStrings';\nimport { FoundationIcon, FoundationIconName } from './FoundationIcon';\nimport { readOptionalString, readString } from '../shell/elementProperties';\n\n/** The semantic tone of a status. */\nexport enum StatusTone {\n    Success = 'success',\n    Warning = 'warning',\n    Danger = 'danger',\n    Info = 'info',\n    Neutral = 'neutral',\n}\n\n/** The icon each tone gets, so a status is told by shape as well as color (WCAG 1.4.1). */\nexport const statusToneIcons: Record<StatusTone, FoundationIconName> = {\n    [StatusTone.Success]: 'check',\n    [StatusTone.Warning]: 'alert',\n    [StatusTone.Danger]: 'close',\n    [StatusTone.Info]: 'info',\n    [StatusTone.Neutral]: 'circle',\n};\n\n/** Reads a tone, defaulting to Neutral. */\nexport function readStatusTone(value: unknown): StatusTone {\n    return (Object.values(StatusTone) as string[]).includes(value as string) ? (value as StatusTone) : StatusTone.Neutral;\n}\n\n/**\n * The `statusChip` component: a status as a semantic color, an icon and its text.\n *\n * The text is always shown - the status of a record is never only a colored dot - and the tone picks the icon and the color from\n * the theme's status tokens. A status the application names (\"Awaiting approval\") is its own `status` text; `tone` maps it onto\n * one of the five tones.\n */\nexport function StatusChip({ element }: RegisteredComponentProps) {\n    const tone = readStatusTone(element.properties.tone);\n    const strings = readFoundationStrings(element);\n    const fallback = { success: strings.statusSuccess, warning: strings.statusWarning, danger: strings.statusDanger, info: strings.statusInfo, neutral: strings.statusNeutral }[tone];\n    const text = readString(element, 'status', readOptionalString(element, 'label') ?? fallback);\n\n    return (\n        <span className='foundation foundation-chip foundation-status-chip' data-scene-id={element.id} data-tone={tone}>\n            <FoundationIcon name={statusToneIcons[tone]} />\n            <span>{text}</span>\n        </span>\n    );\n}\n"],"names":["StatusTone","statusToneIcons","readStatusTone","value","Object","values","includes","StatusChip","element","tone","properties","strings","readFoundationStrings","fallback","success","statusSuccess","warning","statusWarning","danger","statusDanger","info","statusInfo","neutral","statusNeutral","text","readString","readOptionalString","_jsxs","span","className","data-scene-id","id","data-tone","_jsx","FoundationIcon","name"],"mappings":";;;;;AAAA;AACA;AAOA,sCACO,IAAKA,UAAAA,iBAAAA,SAAAA,UAAAA,EAAAA;;;;;;AAAAA,IAAAA,OAAAA,UAAAA;AAMX,CAAA,CAAA,EAAA;AAED,4FACO,MAAMC,eAAAA,GAA0D;AACnE,IAAA,CAAA,SAAA,GAAsB,OAAA;AACtB,IAAA,CAAA,SAAA,GAAsB,OAAA;AACtB,IAAA,CAAA,QAAA,GAAqB,OAAA;AACrB,IAAA,CAAA,MAAA,GAAmB,MAAA;AACnB,IAAA,CAAA,SAAA,GAAsB;AAC1B;AAEA,4CACO,SAASC,cAAAA,CAAeC,KAAc,EAAA;AACzC,IAAA,OAAO,MAACC,CAAOC,MAAM,CAACL,UAAAA,CAAAA,CAAyBM,QAAQ,CAACH,KAAAA,CAAAA,GAAoBA,KAAAA,GAAAA,SAAAA;AAChF;AAEA;;;;;;AAMC,IACM,SAASI,UAAAA,CAAW,EAAEC,OAAO,EAA4B,EAAA;AAC5D,IAAA,MAAMC,IAAAA,GAAOP,cAAAA,CAAeM,OAAAA,CAAQE,UAAU,CAACD,IAAI,CAAA;AACnD,IAAA,MAAME,UAAUC,qBAAAA,CAAsBJ,OAAAA,CAAAA;AACtC,IAAA,MAAMK,QAAAA,GAAW;AAAEC,QAAAA,OAAAA,EAASH,QAAQI,aAAa;AAAEC,QAAAA,OAAAA,EAASL,QAAQM,aAAa;AAAEC,QAAAA,MAAAA,EAAQP,QAAQQ,YAAY;AAAEC,QAAAA,IAAAA,EAAMT,QAAQU,UAAU;AAAEC,QAAAA,OAAAA,EAASX,QAAQY;AAAc,KAAC,CAACd,IAAAA,CAAK;AACjL,IAAA,MAAMe,OAAOC,UAAAA,CAAWjB,OAAAA,EAAS,QAAA,EAAUkB,kBAAAA,CAAmBlB,SAAS,OAAA,CAAA,IAAYK,QAAAA,CAAAA;AAEnF,IAAA,qBACIc,IAAA,CAACC,MAAAA,EAAAA;QAAKC,SAAAA,EAAU,mDAAA;AAAoDC,QAAAA,eAAAA,EAAetB,QAAQuB,EAAE;QAAEC,WAAAA,EAAWvB,IAAAA;;0BACtGwB,GAAA,CAACC,cAAAA,EAAAA;gBAAeC,IAAAA,EAAMlC,eAAe,CAACQ,IAAAA;;0BACtCwB,GAAA,CAACL,MAAAA,EAAAA;AAAMJ,gBAAAA,QAAAA,EAAAA;;;;AAGnB;;"}