@awaitio/theme-default 0.0.1 → 0.1.0

package/README.md

@@ -0,0 +1,37 @@
+# @awaitio/theme-default
+
+The default look of [AwaitIO](https://awaitio.com): every building block of `awaitio/ui` (`Field`, `Label`, `Input`, `Button`, `Table` and the rest), with its styles. Components never style themselves, so the theme restyles every form, table and page at once.
+
+![An AwaitIO action asking for a company name and an owner email](https://docs.awaitio.com/images/intro-form.png)
+
+## Install
+
+```bash
+npm install @awaitio/theme-default
+```
+
+Needs `awaitio` and `zod` in the app, see the [quickstart](https://docs.awaitio.com/quickstart).
+
+## Setup
+
+`theme` is required and has no default:
+
+```ts
+import { defaultTheme } from '@awaitio/theme-default';
+import { AwaitIO } from 'awaitio';
+
+export const app = new AwaitIO({
+  // name, actionsDirectory, secret, users, components…
+  theme: defaultTheme,
+});
+```
+
+## Change one block
+
+Spread the theme and replace the blocks you want with blocks of another theme package:
+
+```ts
+theme: { ...defaultTheme, Label: myTheme.Label },
+```
+
+Writing your own blocks is on the [Theme docs page](https://docs.awaitio.com/core/theme).

package/dist/blocks/Badge.d.ts

@@ -0,0 +1,4 @@
+import type { BadgeProps } from 'awaitio/ui';
+import type { FC } from 'react';
+export declare const Badge: FC<BadgeProps>;
+//# sourceMappingURL=Badge.d.ts.map

package/dist/blocks/Badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../src/blocks/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAkB,MAAM,YAAY,CAAC;AAC7D,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAehC,eAAO,MAAM,KAAK,EAAE,EAAE,CAAC,UAAU,CAEhC,CAAC"}

package/dist/blocks/Badge.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Badge = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// Whole class names, so Tailwind finds them in the source.
+const colorClassNames = {
+    red: 'bg-red-100 text-red-800',
+    orange: 'bg-orange-100 text-orange-800',
+    yellow: 'bg-yellow-100 text-yellow-800',
+    green: 'bg-green-100 text-green-800',
+    blue: 'bg-blue-100 text-blue-800',
+    purple: 'bg-purple-100 text-purple-800',
+    pink: 'bg-pink-100 text-pink-800',
+    gray: 'bg-gray-100 text-gray-700',
+};
+// A small rounded label in a soft background of its color.
+const Badge = ({ color, children }) => {
+    return (0, jsx_runtime_1.jsx)("span", { className: `inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${colorClassNames[color]}`, children: children });
+};
+exports.Badge = Badge;

package/dist/blocks/ButtonRow.d.ts

@@ -0,0 +1,4 @@
+import type { ButtonRowProps } from 'awaitio/ui';
+import type { FC } from 'react';
+export declare const ButtonRow: FC<ButtonRowProps>;
+//# sourceMappingURL=ButtonRow.d.ts.map

package/dist/blocks/ButtonRow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonRow.d.ts","sourceRoot":"","sources":["../../src/blocks/ButtonRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAGhC,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CAExC,CAAC"}

package/dist/blocks/ButtonRow.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonRow = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// Buttons next to each other with a small gap, wrapping on a narrow screen.
+const ButtonRow = ({ children }) => {
+    return (0, jsx_runtime_1.jsx)("div", { className: "flex flex-wrap gap-2", children: children });
+};
+exports.ButtonRow = ButtonRow;

package/dist/blocks/Checkbox.d.ts

@@ -0,0 +1,4 @@
+import { type CheckboxProps } from 'awaitio/ui';
+import type { FC } from 'react';
+export declare const Checkbox: FC<CheckboxProps>;
+//# sourceMappingURL=Checkbox.d.ts.map

package/dist/blocks/Checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../src/blocks/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,aAAa,EAAE,MAAM,YAAY,CAAC;AAC5D,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAGhC,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,CAiBtC,CAAC"}

package/dist/blocks/Checkbox.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Checkbox = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ui_1 = require("awaitio/ui");
+// A checkbox with its text to the right; its id comes from the Field, so the label above toggles it as well.
+const Checkbox = ({ checked, onChange, text, disabled, autoFocus }) => {
+    return ((0, jsx_runtime_1.jsxs)("label", { className: "flex cursor-pointer items-center gap-2 self-start text-sm text-gray-600", children: [(0, jsx_runtime_1.jsx)("input", { id: (0, ui_1.useFieldId)(), type: "checkbox", checked: checked, disabled: disabled, autoFocus: autoFocus, onChange: (event) => {
+                    onChange(event.target.checked);
+                }, className: "size-4 accent-gray-900" }), text] }));
+};
+exports.Checkbox = Checkbox;

package/dist/blocks/Field.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../src/blocks/Field.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA6B,KAAK,UAAU,EAAE,MAAM,YAAY,CAAC;AACxE,OAAO,EAAS,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAIvC,eAAO,MAAM,KAAK,EAAE,EAAE,CAAC,UAAU,CAiBhC,CAAC"}
+{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../src/blocks/Field.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA6B,KAAK,UAAU,EAAE,MAAM,YAAY,CAAC;AACxE,OAAO,EAAS,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAIvC,eAAO,MAAM,KAAK,EAAE,EAAE,CAAC,UAAU,CAoBhC,CAAC"}

package/dist/blocks/Field.js

@@ -6,8 +6,8 @@ const ui_1 = require("awaitio/ui");
 const react_1 = require("react");
 // Label, control, help text and error of one form field. The SDK wraps every component in it unless the component
 // sets `wrap: false`; a component drawing its own layout can use it directly too.
-const Field = ({ label, helpText, error, children }) => {
+const Field = ({ label, helpText, optional, error, children }) => {
     const id = (0, react_1.useId)();
-    return ((0, jsx_runtime_1.jsx)(ui_1.FieldContext.Provider, { value: id, children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-1", children: [(0, jsx_runtime_1.jsx)(ui_1.Label, { htmlFor: id, children: label }), children, helpText && (0, jsx_runtime_1.jsx)(ui_1.Hint, { children: helpText }), error && ((0, jsx_runtime_1.jsx)("p", { role: "alert", className: "text-xs text-red-600", children: error }))] }) }));
+    return ((0, jsx_runtime_1.jsx)(ui_1.FieldContext.Provider, { value: id, children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-1", children: [(0, jsx_runtime_1.jsxs)(ui_1.Label, { htmlFor: id, children: [label, optional && (0, jsx_runtime_1.jsx)("span", { className: "ml-1.5 text-xs font-normal text-gray-500", children: "optional" })] }), children, helpText && (0, jsx_runtime_1.jsx)(ui_1.Hint, { children: helpText }), error && ((0, jsx_runtime_1.jsx)("p", { role: "alert", className: "text-xs text-red-600", children: error }))] }) }));
 };
 exports.Field = Field;

package/dist/blocks/Heading.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Heading.d.ts","sourceRoot":"","sources":["../../src/blocks/Heading.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAC/C,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAGhC,eAAO,MAAM,OAAO,EAAE,EAAE,CAAC,YAAY,CAOpC,CAAC"}
+{"version":3,"file":"Heading.d.ts","sourceRoot":"","sources":["../../src/blocks/Heading.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAC/C,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAGhC,eAAO,MAAM,OAAO,EAAE,EAAE,CAAC,YAAY,CAgBpC,CAAC"}

package/dist/blocks/Heading.js

@@ -2,8 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Heading = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-// The title of one block of a page, e.g. above a table.
-const Heading = ({ children, description }) => {
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-1", children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-base font-semibold text-gray-900", children: children }), description && (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-gray-500", children: description })] }));
+// The title of one block of a page, e.g. above a table; level 2 is a bigger section title with room above it.
+const Heading = ({ children, description, level = 3 }) => {
+    if (level === 2) {
+        return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-1 pt-2", children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-lg font-semibold text-gray-900", children: children }), description && (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-gray-500", children: description })] }));
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-1", children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-base font-semibold text-gray-900", children: children }), description && (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-gray-500", children: description })] }));
 };
 exports.Heading = Heading;

package/dist/blocks/Image.d.ts

@@ -0,0 +1,4 @@
+import type { ImageProps } from 'awaitio/ui';
+import type { FC } from 'react';
+export declare const Image: FC<ImageProps>;
+//# sourceMappingURL=Image.d.ts.map

package/dist/blocks/Image.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../../src/blocks/Image.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAGhC,eAAO,MAAM,KAAK,EAAE,EAAE,CAAC,UAAU,CAIhC,CAAC"}

package/dist/blocks/Image.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Image = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// A picture with a thin border, kept within the width of the page and, with a size, within that height.
+const Image = ({ src, alt, size }) => {
+    const sizeClassName = { thumbnail: 'max-h-16', small: 'max-h-32', medium: 'max-h-64', large: 'max-h-96' }[size ?? 'large'];
+    return (0, jsx_runtime_1.jsx)("img", { src: src, alt: alt, loading: "lazy", className: ['max-w-full self-start rounded-md border border-gray-200 object-contain', size ? sizeClassName : ''].join(' ') });
+};
+exports.Image = Image;

package/dist/blocks/Link.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../src/blocks/Link.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,SAAS,EAAE,MAAM,YAAY,CAAC;AACxD,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAIhC,eAAO,MAAM,IAAI,EAAE,EAAE,CAAC,SAAS,CAiB9B,CAAC"}
+{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../src/blocks/Link.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,SAAS,EAAE,MAAM,YAAY,CAAC;AACxD,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAIhC,eAAO,MAAM,IAAI,EAAE,EAAE,CAAC,SAAS,CAyB9B,CAAC"}

package/dist/blocks/Link.js

@@ -5,7 +5,10 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const ui_1 = require("awaitio/ui");
 // A link to another page of the AwaitIO UI, e.g. an action with params. A plain click stays in the app; a click with
 // a modifier key opens a new tab as usual.
-const Link = ({ href, children, className = 'text-blue-600 underline-offset-2 hover:text-blue-800 hover:underline' }) => {
+const Link = ({ href, children, external = false, className = 'text-blue-600 underline-offset-2 hover:text-blue-800 hover:underline' }) => {
+    if (external) {
+        return ((0, jsx_runtime_1.jsx)("a", { href: href, target: "_blank", rel: "noopener noreferrer", className: className, children: children }));
+    }
     return ((0, jsx_runtime_1.jsx)("a", { href: href, className: className, onClick: (event) => {
             if (event.metaKey || event.ctrlKey || event.shiftKey || event.button !== 0) {
                 return;

package/dist/blocks/Metadata.js

@@ -4,8 +4,8 @@ exports.Metadata = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 // Label and value tiles in a grid, e.g. "Total accounts 542" above a table.
 const Metadata = ({ items }) => {
-    return ((0, jsx_runtime_1.jsx)("dl", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-4", children: items.map((item) => {
-            return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-1 rounded-lg border border-gray-200 bg-white px-4 py-3", children: [(0, jsx_runtime_1.jsx)("dt", { className: "text-sm text-gray-500", children: item.label }), (0, jsx_runtime_1.jsx)("dd", { className: "text-2xl font-semibold text-gray-900", children: item.value }), item.description && (0, jsx_runtime_1.jsx)("dd", { className: "text-xs text-gray-500", children: item.description })] }, item.label));
+    return ((0, jsx_runtime_1.jsx)("dl", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-4", children: items.map((item, index) => {
+            return ((0, jsx_runtime_1.jsxs)("div", { className: "flex min-w-0 flex-col gap-1 rounded-lg border border-gray-200 bg-white px-4 py-3", children: [item.label && (0, jsx_runtime_1.jsx)("dt", { className: "text-sm text-gray-500", children: item.label }), (0, jsx_runtime_1.jsx)("dd", { className: "text-2xl font-semibold wrap-break-word text-gray-900", children: item.value }), item.description && (0, jsx_runtime_1.jsx)("dd", { className: "text-xs text-gray-500", children: item.description })] }, index));
         }) }));
 };
 exports.Metadata = Metadata;

package/dist/blocks/MultiSelect.d.ts

@@ -0,0 +1,4 @@
+import { type MultiSelectProps } from 'awaitio/ui';
+import type { FC } from 'react';
+export declare const MultiSelect: FC<MultiSelectProps>;
+//# sourceMappingURL=MultiSelect.d.ts.map

package/dist/blocks/MultiSelect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelect.d.ts","sourceRoot":"","sources":["../../src/blocks/MultiSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAG/D,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAGhC,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CAoE5C,CAAC"}

package/dist/blocks/MultiSelect.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MultiSelect = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ui_1 = require("awaitio/ui");
+const SelectArrow_1 = require("../components/SelectArrow");
+const constants_1 = require("../constants");
+// One frame: the drop-down as a normal control on top, the chosen options under it, a row each with a × on the right.
+const MultiSelect = ({ choices, value, onChange, placeholder = 'Add…', isFull = false, disabled, autoFocus }) => {
+    const remaining = choices.filter((choice) => {
+        return !value.includes(choice.value);
+    });
+    const chosen = choices.filter((choice) => {
+        return value.includes(choice.value);
+    });
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "divide-y divide-gray-200 rounded-md border border-gray-300 bg-gray-50 text-sm", children: [(0, jsx_runtime_1.jsx)("div", { className: "p-2", children: (0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsxs)("select", { id: (0, ui_1.useFieldId)(), value: "", disabled: disabled || isFull || remaining.length === 0, autoFocus: autoFocus, onChange: (event) => {
+                                onChange([...value, event.target.value]);
+                            }, className: constants_1.constants.SELECT_CLASS_NAME, children: [(0, jsx_runtime_1.jsx)("option", { value: "", disabled: true, children: placeholder }), remaining.map((choice) => {
+                                    return ((0, jsx_runtime_1.jsx)("option", { value: choice.value, children: choice.label }, choice.value));
+                                })] }), (0, jsx_runtime_1.jsx)(SelectArrow_1.SelectArrow, {})] }) }), chosen.map((choice) => {
+                return ((0, jsx_runtime_1.jsxs)("div", { className: ['flex items-center justify-between gap-3 py-1.5 pr-3.5 pl-5 last:rounded-b-md', disabled ? 'min-h-9 bg-gray-100 text-gray-500' : 'bg-white text-gray-900'].join(' '), children: [choice.label, !disabled && ((0, jsx_runtime_1.jsx)("button", { type: "button", "aria-label": `Remove ${choice.label}`, disabled: disabled, onClick: () => {
+                                onChange(value.filter((candidate) => {
+                                    return candidate !== choice.value;
+                                }));
+                            }, className: "flex size-6 shrink-0 items-center justify-center rounded text-gray-400 hover:bg-gray-100 hover:text-gray-900 disabled:cursor-not-allowed disabled:opacity-50", children: (0, jsx_runtime_1.jsx)("svg", { "aria-hidden": "true", viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", className: "size-3.5", children: (0, jsx_runtime_1.jsx)("path", { d: "M6 6l8 8m0-8-8 8" }) }) }))] }, choice.value));
+            })] }));
+};
+exports.MultiSelect = MultiSelect;

package/dist/blocks/Prose.d.ts

@@ -0,0 +1,4 @@
+import type { ProseProps } from 'awaitio/ui';
+import type { FC } from 'react';
+export declare const Prose: FC<ProseProps>;
+//# sourceMappingURL=Prose.d.ts.map

package/dist/blocks/Prose.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Prose.d.ts","sourceRoot":"","sources":["../../src/blocks/Prose.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAGhC,eAAO,MAAM,KAAK,EAAE,EAAE,CAAC,UAAU,CAMhC,CAAC"}

package/dist/blocks/Prose.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Prose = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// Styles the plain elements markdown turns into, so text from io.display.markdown reads like the rest of the app.
+const Prose = ({ children }) => {
+    return ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-col gap-3 text-sm [&>div]:flex [&>div]:flex-col [&>div]:gap-3 leading-6 text-gray-700 [&_a]:text-blue-600 [&_a:hover]:underline [&_code]:rounded [&_code]:bg-gray-100 [&_code]:px-1 [&_code]:py-0.5 [&_code]:text-[13px] [&_h1]:text-lg [&_h1]:font-semibold [&_h1]:text-gray-900 [&_h2]:text-base [&_h2]:font-semibold [&_h2]:text-gray-900 [&_h3]:font-semibold [&_h3]:text-gray-900 [&_li]:my-0.5 [&_ol]:list-decimal [&_ol]:pl-5 [&_pre]:overflow-x-auto [&_pre]:rounded-md [&_pre]:bg-gray-100 [&_pre]:p-3 [&_pre_code]:bg-transparent [&_pre_code]:p-0 [&_strong]:font-semibold [&_strong]:text-gray-900 [&_ul]:list-disc [&_ul]:pl-5", children: children }));
+};
+exports.Prose = Prose;

package/dist/blocks/Select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../src/blocks/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,WAAW,EAAE,MAAM,YAAY,CAAC;AAE1D,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAGhC,eAAO,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,CAwBlC,CAAC"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../src/blocks/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,WAAW,EAAE,MAAM,YAAY,CAAC;AAG1D,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAGhC,eAAO,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,CA2BlC,CAAC"}

package/dist/blocks/Select.js

@@ -3,13 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Select = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ui_1 = require("awaitio/ui");
+const SelectArrow_1 = require("../components/SelectArrow");
 const constants_1 = require("../constants");
 // A native drop-down for one of many options.
 const Select = ({ choices, value, onChange, placeholder = 'Choose…', disabled, autoFocus }) => {
-    return ((0, jsx_runtime_1.jsxs)("select", { id: (0, ui_1.useFieldId)(), value: value, disabled: disabled, autoFocus: autoFocus, onChange: (event) => {
-            onChange(event.target.value);
-        }, className: constants_1.constants.CONTROL_CLASS_NAME, children: [(0, jsx_runtime_1.jsx)("option", { value: "", disabled: true, children: placeholder }), choices.map((choice) => {
-                return ((0, jsx_runtime_1.jsx)("option", { value: choice.value, children: choice.label }, choice.value));
-            })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsxs)("select", { id: (0, ui_1.useFieldId)(), value: value, disabled: disabled, autoFocus: autoFocus, onChange: (event) => {
+                    onChange(event.target.value);
+                }, className: constants_1.constants.SELECT_CLASS_NAME, children: [(0, jsx_runtime_1.jsx)("option", { value: "", disabled: true, children: placeholder }), choices.map((choice) => {
+                        return ((0, jsx_runtime_1.jsx)("option", { value: choice.value, children: choice.label }, choice.value));
+                    })] }), (0, jsx_runtime_1.jsx)(SelectArrow_1.SelectArrow, {})] }));
 };
 exports.Select = Select;

package/dist/blocks/Table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../src/blocks/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,KAAK,UAAU,EAAE,MAAM,YAAY,CAAC;AACtD,OAAO,EAAY,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAI1C,eAAO,MAAM,KAAK,EAAE,EAAE,CAAC,UAAU,CAuIhC,CAAC"}
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../src/blocks/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,KAAK,UAAU,EAAE,MAAM,YAAY,CAAC;AACtD,OAAO,EAAY,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAI1C,eAAO,MAAM,KAAK,EAAE,EAAE,CAAC,UAAU,CA0IhC,CAAC"}

package/dist/blocks/Table.js

@@ -8,6 +8,8 @@ const react_1 = require("react");
 // Filtering and paging happen in the browser, on the rows the page sent.
 const Table = ({ columns, rows, pageSize = 20, filterable = true, emptyText = 'Nothing to show.', selection }) => {
     const [filter, setFilter] = (0, react_1.useState)('');
+    // A locked selection (disabled io.select.table) greys the table out; paging stays, to see what is there.
+    const isDisabled = selection?.disabled === true;
     const [page, setPage] = (0, react_1.useState)(0);
     const query = filter.trim().toLowerCase();
     const matching = query
@@ -23,10 +25,10 @@ const Table = ({ columns, rows, pageSize = 20, filterable = true, emptyText = 'N
     });
     const hasToolbar = filterable || matching.length > pageSize;
     const pagerButton = 'rounded-md border border-gray-200 px-2.5 py-1 text-xs font-medium text-gray-700 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-40';
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "rounded-lg border border-gray-200 bg-white", children: [hasToolbar && ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap items-center justify-between gap-3 border-b border-gray-200 px-3 py-2", children: [filterable ? ((0, jsx_runtime_1.jsx)("input", { type: "search", value: filter, placeholder: "Filter", "aria-label": "Filter rows", onChange: (event) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: ['rounded-lg border border-gray-200', isDisabled ? 'bg-gray-100 text-gray-500' : 'bg-white'].join(' '), children: [hasToolbar && ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap items-center justify-between gap-3 border-b border-gray-200 px-3 py-2", children: [filterable ? ((0, jsx_runtime_1.jsx)("input", { type: "search", value: filter, placeholder: "Filter", "aria-label": "Filter rows", disabled: isDisabled, onChange: (event) => {
                             setFilter(event.target.value);
                             setPage(0);
-                        }, className: "w-full max-w-56 rounded-md border border-gray-300 bg-white px-3 py-1 text-sm shadow-sm focus:border-gray-900 focus:outline-none" })) : ((0, jsx_runtime_1.jsx)("span", {})), matching.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 text-xs text-gray-500", children: [(0, jsx_runtime_1.jsxs)("span", { children: [current * pageSize + 1, "\u2013", Math.min((current + 1) * pageSize, matching.length), " of ", matching.length] }), matching.length > pageSize && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("button", { type: "button", disabled: current === 0, onClick: () => {
+                        }, className: "w-full max-w-56 rounded-md border border-gray-300 px-3 py-1 text-sm shadow-sm focus:border-gray-900 focus:outline-none enabled:bg-white disabled:bg-gray-100" })) : ((0, jsx_runtime_1.jsx)("span", {})), matching.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 text-xs text-gray-500", children: [(0, jsx_runtime_1.jsxs)("span", { children: [current * pageSize + 1, "\u2013", Math.min((current + 1) * pageSize, matching.length), " of ", matching.length] }), matching.length > pageSize && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("button", { type: "button", disabled: current === 0, onClick: () => {
                                             setPage(current - 1);
                                         }, className: pagerButton, children: "Prev" }), (0, jsx_runtime_1.jsx)("button", { type: "button", disabled: current >= pageCount - 1, onClick: () => {
                                             setPage(current + 1);

package/dist/components/SelectArrow.d.ts

@@ -0,0 +1,3 @@
+import type { FC } from 'react';
+export declare const SelectArrow: FC;
+//# sourceMappingURL=SelectArrow.d.ts.map

package/dist/components/SelectArrow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectArrow.d.ts","sourceRoot":"","sources":["../../src/components/SelectArrow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAGhC,eAAO,MAAM,WAAW,EAAE,EAezB,CAAC"}

package/dist/components/SelectArrow.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectArrow = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// The chevron of a drop-down, drawn by the theme instead of the browser so it keeps a gap from the right edge.
+const SelectArrow = () => {
+    return ((0, jsx_runtime_1.jsx)("svg", { "aria-hidden": "true", viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", className: "pointer-events-none absolute top-1/2 right-3 size-4 -translate-y-1/2 text-gray-500", children: (0, jsx_runtime_1.jsx)("path", { d: "M6 8l4 4 4-4" }) }));
+};
+exports.SelectArrow = SelectArrow;

package/dist/constants.d.ts

@@ -1,4 +1,5 @@
 export declare const constants: {
     CONTROL_CLASS_NAME: string;
+    SELECT_CLASS_NAME: string;
 };
 //# sourceMappingURL=constants.d.ts.map

package/dist/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,SAAS;IAEpB,kBAAkB;CACnB,CAAC"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,SAAS;IAGpB,kBAAkB;IAElB,iBAAiB;CAElB,CAAC"}

package/dist/constants.js

@@ -2,6 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.constants = void 0;
 exports.constants = {
-    // One look for every text-like control, so all inputs of the theme match.
-    CONTROL_CLASS_NAME: 'w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm shadow-sm focus:border-gray-900 focus:outline-none disabled:bg-gray-100',
+    // One look for every text-like control, so all inputs of the theme match. The background is set per state
+    // (enabled:/disabled:) because a plain bg-white from the SDK's utilities would win over disabled:bg-gray-100.
+    CONTROL_CLASS_NAME: 'w-full rounded-md border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-gray-900 focus:outline-none enabled:bg-white disabled:bg-gray-100 disabled:text-gray-500',
+    // A drop-down without the browser's arrow; SelectArrow draws one with room on the right.
+    SELECT_CLASS_NAME: 'w-full appearance-none rounded-md border border-gray-300 py-2 pr-9 pl-3 text-sm shadow-sm focus:border-gray-900 focus:outline-none enabled:bg-white disabled:bg-gray-100 disabled:text-gray-500',
 };

package/dist/defaultTheme.d.ts

@@ -1,14 +1,20 @@
 export declare const defaultTheme: import("awaitio").ThemeBlockRefs<{
+    Badge: import("react").FC<import("awaitio/ui").BadgeProps>;
     Button: import("react").FC<import("awaitio/ui").ButtonProps>;
+    ButtonRow: import("react").FC<import("awaitio/ui").ButtonRowProps>;
     Card: import("react").FC<import("awaitio/ui").CardProps>;
+    Checkbox: import("react").FC<import("awaitio/ui").CheckboxProps>;
     ChoiceList: import("react").FC<import("awaitio/ui").ChoiceListProps>;
     Field: import("react").FC<import("awaitio/ui").FieldProps>;
     Heading: import("react").FC<import("awaitio/ui").HeadingProps>;
     Hint: import("react").FC<import("awaitio/ui").HintProps>;
+    Image: import("react").FC<import("awaitio/ui").ImageProps>;
     Input: import("react").FC<import("awaitio/ui").InputProps>;
     Label: import("react").FC<import("awaitio/ui").LabelProps>;
     Link: import("react").FC<import("awaitio/ui").LinkProps>;
     Metadata: import("react").FC<import("awaitio/ui").MetadataProps>;
+    MultiSelect: import("react").FC<import("awaitio/ui").MultiSelectProps>;
+    Prose: import("react").FC<import("awaitio/ui").ProseProps>;
     RowMenu: import("react").FC<import("awaitio/ui").RowMenuProps>;
     Select: import("react").FC<import("awaitio/ui").SelectProps>;
     Table: import("react").FC<import("awaitio/ui").TableProps>;

package/dist/defaultTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"defaultTheme.d.ts","sourceRoot":"","sources":["../src/defaultTheme.tsx"],"names":[],"mappings":"AAkBA,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;EAevB,CAAC"}
+{"version":3,"file":"defaultTheme.d.ts","sourceRoot":"","sources":["../src/defaultTheme.tsx"],"names":[],"mappings":"AAsBA,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;EAqBvB,CAAC"}

package/dist/defaultTheme.js

@@ -2,33 +2,43 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.defaultTheme = void 0;
 const awaitio_1 = require("awaitio");
+const Badge_1 = require("./blocks/Badge");
 const Button_1 = require("./blocks/Button");
+const ButtonRow_1 = require("./blocks/ButtonRow");
 const Card_1 = require("./blocks/Card");
+const Checkbox_1 = require("./blocks/Checkbox");
 const ChoiceList_1 = require("./blocks/ChoiceList");
 const Field_1 = require("./blocks/Field");
 const Heading_1 = require("./blocks/Heading");
 const Hint_1 = require("./blocks/Hint");
+const Image_1 = require("./blocks/Image");
 const Input_1 = require("./blocks/Input");
 const Label_1 = require("./blocks/Label");
 const Link_1 = require("./blocks/Link");
 const Metadata_1 = require("./blocks/Metadata");
+const MultiSelect_1 = require("./blocks/MultiSelect");
+const Prose_1 = require("./blocks/Prose");
 const RowMenu_1 = require("./blocks/RowMenu");
 const Select_1 = require("./blocks/Select");
 const Table_1 = require("./blocks/Table");
 const Textarea_1 = require("./blocks/Textarea");
-// The look AwaitIO ships with: every block. Replace single ones with blocks of your own theme:
-// theme: { ...defaultTheme, Label: myTheme.Label }.
 exports.defaultTheme = (0, awaitio_1.defineTheme)({
+    Badge: Badge_1.Badge,
     Button: Button_1.Button,
+    ButtonRow: ButtonRow_1.ButtonRow,
     Card: Card_1.Card,
+    Checkbox: Checkbox_1.Checkbox,
     ChoiceList: ChoiceList_1.ChoiceList,
     Field: Field_1.Field,
     Heading: Heading_1.Heading,
     Hint: Hint_1.Hint,
+    Image: Image_1.Image,
     Input: Input_1.Input,
     Label: Label_1.Label,
     Link: Link_1.Link,
     Metadata: Metadata_1.Metadata,
+    MultiSelect: MultiSelect_1.MultiSelect,
+    Prose: Prose_1.Prose,
     RowMenu: RowMenu_1.RowMenu,
     Select: Select_1.Select,
     Table: Table_1.Table,

package/dist/ui/ui.css

@@ -1 +1 @@
-@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}@layer theme{:root,:host{--color-red-600:oklch(57.7% .245 27.325);--color-blue-600:oklch(54.6% .245 262.881);--color-blue-800:oklch(42.4% .199 265.638);--color-gray-50:oklch(98.5% .002 247.839);--color-gray-100:oklch(96.7% .003 264.542);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-700:oklch(37.3% .034 259.733);--color-gray-900:oklch(21% .034 264.665);--color-white:#fff;--spacing:.25rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height: 1.5 ;--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--font-weight-medium:500;--font-weight-semibold:600;--radius-md:.375rem;--radius-lg:.5rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1)}}@layer components{.fixed{position:fixed}.z-20{z-index:20}.mt-0\.5{margin-top:calc(var(--spacing) * .5)}.block{display:block}.flex{display:flex}.grid{display:grid}.table{display:table}.h-5{height:calc(var(--spacing) * 5)}.w-5{width:calc(var(--spacing) * 5)}.w-10{width:calc(var(--spacing) * 10)}.w-full{width:100%}.max-w-56{max-width:calc(var(--spacing) * 56)}.min-w-40{min-width:calc(var(--spacing) * 40)}.cursor-pointer{cursor:pointer}.resize{resize:both}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-end{justify-content:flex-end}.gap-0\.5{gap:calc(var(--spacing) * .5)}.gap-1{gap:var(--spacing)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}.overflow-x-auto{overflow-x:auto}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.border{border-style:var(--tw-border-style);border-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-gray-100{border-color:var(--color-gray-100)}.border-gray-200{border-color:var(--color-gray-200)}.border-gray-300{border-color:var(--color-gray-300)}.border-gray-900{border-color:var(--color-gray-900)}.bg-gray-50{background-color:var(--color-gray-50)}.bg-gray-900{background-color:var(--color-gray-900)}.bg-white{background-color:var(--color-white)}.fill-current{fill:currentColor}.p-1{padding:var(--spacing)}.p-6{padding:calc(var(--spacing) * 6)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.py-1{padding-block:var(--spacing)}.py-1\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-6{padding-block:calc(var(--spacing) * 6)}.pl-4{padding-left:calc(var(--spacing) * 4)}.text-left{text-align:left}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.whitespace-nowrap{white-space:nowrap}.text-blue-600{color:var(--color-blue-600)}.text-gray-500{color:var(--color-gray-500)}.text-gray-700{color:var(--color-gray-700)}.text-gray-900{color:var(--color-gray-900)}.text-red-600{color:var(--color-red-600)}.text-white{color:var(--color-white)}.underline-offset-2{text-underline-offset:2px}.accent-gray-900{accent-color:var(--color-gray-900)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.last\:border-0:last-child{border-style:var(--tw-border-style);border-width:0}@media(hover:hover){.hover\:border-gray-400:hover{border-color:var(--color-gray-400)}.hover\:bg-gray-50:hover{background-color:var(--color-gray-50)}.hover\:bg-gray-100:hover{background-color:var(--color-gray-100)}.hover\:bg-gray-700:hover{background-color:var(--color-gray-700)}.hover\:text-blue-800:hover{color:var(--color-blue-800)}.hover\:text-gray-900:hover{color:var(--color-gray-900)}.hover\:underline:hover{text-decoration-line:underline}}.focus\:border-gray-900:focus{border-color:var(--color-gray-900)}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:bg-gray-100:disabled{background-color:var(--color-gray-100)}.disabled\:opacity-40:disabled{opacity:.4}.disabled\:opacity-50:disabled{opacity:.5}@media(min-width:40rem){.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(min-width:64rem){.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}.\[\&_th\:first-child\]\:rounded-tl-lg th:first-child{border-top-left-radius:var(--radius-lg)}.\[\&_th\:last-child\]\:rounded-tr-lg th:last-child{border-top-right-radius:var(--radius-lg)}}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-divide-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}@layer theme{:root,:host{--color-red-100:oklch(93.6% .032 17.717);--color-red-600:oklch(57.7% .245 27.325);--color-red-800:oklch(44.4% .177 26.899);--color-orange-100:oklch(95.4% .038 75.164);--color-orange-800:oklch(47% .157 37.304);--color-yellow-100:oklch(97.3% .071 103.193);--color-yellow-800:oklch(47.6% .114 61.907);--color-green-100:oklch(96.2% .044 156.743);--color-green-800:oklch(44.8% .119 151.328);--color-blue-100:oklch(93.2% .032 255.585);--color-blue-600:oklch(54.6% .245 262.881);--color-blue-800:oklch(42.4% .199 265.638);--color-purple-100:oklch(94.6% .033 307.174);--color-purple-800:oklch(43.8% .218 303.724);--color-pink-100:oklch(94.8% .028 342.258);--color-pink-800:oklch(45.9% .187 3.815);--color-gray-50:oklch(98.5% .002 247.839);--color-gray-100:oklch(96.7% .003 264.542);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-600:oklch(44.6% .03 256.802);--color-gray-700:oklch(37.3% .034 259.733);--color-gray-900:oklch(21% .034 264.665);--color-white:#fff;--spacing:.25rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height: 1.5 ;--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--radius-md:.375rem;--radius-lg:.5rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1)}}@layer components{.pointer-events-none{pointer-events:none}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.top-1\/2{top:50%}.right-3{right:calc(var(--spacing) * 3)}.z-20{z-index:20}.mt-0\.5{margin-top:calc(var(--spacing) * .5)}.ml-1\.5{margin-left:calc(var(--spacing) * 1.5)}.block{display:block}.flex{display:flex}.grid{display:grid}.inline-flex{display:inline-flex}.table{display:table}.size-3\.5{width:calc(var(--spacing) * 3.5);height:calc(var(--spacing) * 3.5)}.size-4{width:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4)}.size-6{width:calc(var(--spacing) * 6);height:calc(var(--spacing) * 6)}.h-5{height:calc(var(--spacing) * 5)}.max-h-16{max-height:calc(var(--spacing) * 16)}.max-h-32{max-height:calc(var(--spacing) * 32)}.max-h-64{max-height:calc(var(--spacing) * 64)}.max-h-96{max-height:calc(var(--spacing) * 96)}.min-h-9{min-height:calc(var(--spacing) * 9)}.w-5{width:calc(var(--spacing) * 5)}.w-10{width:calc(var(--spacing) * 10)}.w-full{width:100%}.max-w-56{max-width:calc(var(--spacing) * 56)}.max-w-full{max-width:100%}.min-w-0{min-width:0}.min-w-40{min-width:calc(var(--spacing) * 40)}.shrink-0{flex-shrink:0}.-translate-y-1\/2{--tw-translate-y: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y)}.cursor-pointer{cursor:pointer}.resize{resize:both}.appearance-none{appearance:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-0\.5{gap:calc(var(--spacing) * .5)}.gap-1{gap:var(--spacing)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}:where(.divide-y>:not(:last-child)){--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px * var(--tw-divide-y-reverse));border-bottom-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)))}:where(.divide-gray-200>:not(:last-child)){border-color:var(--color-gray-200)}.self-start{align-self:flex-start}.overflow-x-auto{overflow-x:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.border{border-style:var(--tw-border-style);border-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-gray-100{border-color:var(--color-gray-100)}.border-gray-200{border-color:var(--color-gray-200)}.border-gray-300{border-color:var(--color-gray-300)}.border-gray-900{border-color:var(--color-gray-900)}.bg-blue-100{background-color:var(--color-blue-100)}.bg-gray-50{background-color:var(--color-gray-50)}.bg-gray-100{background-color:var(--color-gray-100)}.bg-gray-900{background-color:var(--color-gray-900)}.bg-green-100{background-color:var(--color-green-100)}.bg-orange-100{background-color:var(--color-orange-100)}.bg-pink-100{background-color:var(--color-pink-100)}.bg-purple-100{background-color:var(--color-purple-100)}.bg-red-100{background-color:var(--color-red-100)}.bg-white{background-color:var(--color-white)}.bg-yellow-100{background-color:var(--color-yellow-100)}.fill-current{fill:currentColor}.object-contain{object-fit:contain}.p-1{padding:var(--spacing)}.p-2{padding:calc(var(--spacing) * 2)}.p-6{padding:calc(var(--spacing) * 6)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.py-0\.5{padding-block:calc(var(--spacing) * .5)}.py-1{padding-block:var(--spacing)}.py-1\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-6{padding-block:calc(var(--spacing) * 6)}.pt-2{padding-top:calc(var(--spacing) * 2)}.pr-3\.5{padding-right:calc(var(--spacing) * 3.5)}.pr-9{padding-right:calc(var(--spacing) * 9)}.pl-3{padding-left:calc(var(--spacing) * 3)}.pl-4{padding-left:calc(var(--spacing) * 4)}.pl-5{padding-left:calc(var(--spacing) * 5)}.text-left{text-align:left}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.leading-6{--tw-leading:calc(var(--spacing) * 6);line-height:calc(var(--spacing) * 6)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-normal{--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.wrap-break-word{overflow-wrap:break-word}.whitespace-nowrap{white-space:nowrap}.text-blue-600{color:var(--color-blue-600)}.text-blue-800{color:var(--color-blue-800)}.text-gray-400{color:var(--color-gray-400)}.text-gray-500{color:var(--color-gray-500)}.text-gray-600{color:var(--color-gray-600)}.text-gray-700{color:var(--color-gray-700)}.text-gray-900{color:var(--color-gray-900)}.text-green-800{color:var(--color-green-800)}.text-orange-800{color:var(--color-orange-800)}.text-pink-800{color:var(--color-pink-800)}.text-purple-800{color:var(--color-purple-800)}.text-red-600{color:var(--color-red-600)}.text-red-800{color:var(--color-red-800)}.text-white{color:var(--color-white)}.text-yellow-800{color:var(--color-yellow-800)}.underline-offset-2{text-underline-offset:2px}.accent-gray-900{accent-color:var(--color-gray-900)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.last\:rounded-b-md:last-child{border-bottom-right-radius:var(--radius-md);border-bottom-left-radius:var(--radius-md)}.last\:border-0:last-child{border-style:var(--tw-border-style);border-width:0}@media(hover:hover){.hover\:border-gray-400:hover{border-color:var(--color-gray-400)}.hover\:bg-gray-50:hover{background-color:var(--color-gray-50)}.hover\:bg-gray-100:hover{background-color:var(--color-gray-100)}.hover\:bg-gray-700:hover{background-color:var(--color-gray-700)}.hover\:text-blue-800:hover{color:var(--color-blue-800)}.hover\:text-gray-900:hover{color:var(--color-gray-900)}.hover\:underline:hover{text-decoration-line:underline}}.focus\:border-gray-900:focus{border-color:var(--color-gray-900)}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.enabled\:bg-white:enabled{background-color:var(--color-white)}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:bg-gray-100:disabled{background-color:var(--color-gray-100)}.disabled\:text-gray-500:disabled{color:var(--color-gray-500)}.disabled\:opacity-40:disabled{opacity:.4}.disabled\:opacity-50:disabled{opacity:.5}@media(min-width:40rem){.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(min-width:64rem){.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}.\[\&_a\]\:text-blue-600 a{color:var(--color-blue-600)}.\[\&_a\:hover\]\:underline a:hover{text-decoration-line:underline}.\[\&_code\]\:rounded code{border-radius:.25rem}.\[\&_code\]\:bg-gray-100 code{background-color:var(--color-gray-100)}.\[\&_code\]\:px-1 code{padding-inline:var(--spacing)}.\[\&_code\]\:py-0\.5 code{padding-block:calc(var(--spacing) * .5)}.\[\&_code\]\:text-\[13px\] code{font-size:13px}.\[\&_h1\]\:text-lg h1{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.\[\&_h1\]\:font-semibold h1{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.\[\&_h1\]\:text-gray-900 h1{color:var(--color-gray-900)}.\[\&_h2\]\:text-base h2{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.\[\&_h2\]\:font-semibold h2{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.\[\&_h2\]\:text-gray-900 h2{color:var(--color-gray-900)}.\[\&_h3\]\:font-semibold h3{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.\[\&_h3\]\:text-gray-900 h3{color:var(--color-gray-900)}.\[\&_li\]\:my-0\.5 li{margin-block:calc(var(--spacing) * .5)}.\[\&_ol\]\:list-decimal ol{list-style-type:decimal}.\[\&_ol\]\:pl-5 ol{padding-left:calc(var(--spacing) * 5)}.\[\&_pre\]\:overflow-x-auto pre{overflow-x:auto}.\[\&_pre\]\:rounded-md pre{border-radius:var(--radius-md)}.\[\&_pre\]\:bg-gray-100 pre{background-color:var(--color-gray-100)}.\[\&_pre\]\:p-3 pre{padding:calc(var(--spacing) * 3)}.\[\&_pre_code\]\:bg-transparent pre code{background-color:#0000}.\[\&_pre_code\]\:p-0 pre code{padding:0}.\[\&_strong\]\:font-semibold strong{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.\[\&_strong\]\:text-gray-900 strong{color:var(--color-gray-900)}.\[\&_th\:first-child\]\:rounded-tl-lg th:first-child{border-top-left-radius:var(--radius-lg)}.\[\&_th\:last-child\]\:rounded-tr-lg th:last-child{border-top-right-radius:var(--radius-lg)}.\[\&_ul\]\:list-disc ul{list-style-type:disc}.\[\&_ul\]\:pl-5 ul{padding-left:calc(var(--spacing) * 5)}.\[\&\>div\]\:flex>div{display:flex}.\[\&\>div\]\:flex-col>div{flex-direction:column}.\[\&\>div\]\:gap-3>div{gap:calc(var(--spacing) * 3)}}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-divide-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}

package/dist/ui/ui.js

@@ -1 +1 @@
-var awaitioComponent=(function(m,e,c,y){"use strict";const E=r=>Object.fromEntries(Object.entries(r).map(([t,a])=>[t,{kind:"awaitio-theme-block",name:t,component:a,uiDirectory:null}])),A=({variant:r="primary",className:t,type:a="button",...s})=>{const n=r==="primary"?"bg-gray-900 text-white hover:bg-gray-700":"border border-gray-300 bg-white text-gray-900 hover:bg-gray-100";return e.jsx("button",{type:a,className:["rounded-md px-4 py-2 text-sm font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50",n,t].filter(Boolean).join(" "),...s})},O=({children:r})=>e.jsx("div",{className:"rounded-lg border border-gray-200 bg-white p-6 shadow-sm",children:r}),T=({choices:r,mode:t,value:a,onChange:s,disabled:n})=>{const o=c.useFieldId();return e.jsx("div",{role:t==="single"?"radiogroup":"group",id:o,className:"flex flex-col gap-2",children:r.map(l=>{const p=a.includes(l.value);return e.jsxs("label",{className:["flex cursor-pointer items-start gap-3 rounded-md border bg-white px-3 py-2.5 text-sm",p&&"border-gray-900",!p&&"border-gray-300 hover:border-gray-400"].filter(Boolean).join(" "),children:[e.jsx("input",{type:t==="single"?"radio":"checkbox",name:o,checked:p,disabled:n,onChange:()=>{if(t==="single"){s([l.value]);return}s(p?a.filter(f=>f!==l.value):[...a,l.value])},className:"mt-0.5 accent-gray-900"}),e.jsxs("span",{className:"flex flex-col gap-0.5",children:[e.jsx("span",{className:"font-medium",children:l.label}),l.description&&e.jsx("span",{className:"text-gray-500",children:l.description})]})]},l.value)})})},k=({label:r,helpText:t,error:a,children:s})=>{const n=y.useId();return e.jsx(c.FieldContext.Provider,{value:n,children:e.jsxs("div",{className:"flex flex-col gap-1",children:[e.jsx(c.Label,{htmlFor:n,children:r}),s,t&&e.jsx(c.Hint,{children:t}),a&&e.jsx("p",{role:"alert",className:"text-xs text-red-600",children:a})]})})},S=({children:r,description:t})=>e.jsxs("div",{className:"flex flex-col gap-1",children:[e.jsx("h2",{className:"text-base font-semibold text-gray-900",children:r}),t&&e.jsx("p",{className:"text-sm text-gray-500",children:t})]}),M=({children:r})=>e.jsx("p",{className:"text-xs text-gray-500",children:r}),x={CONTROL_CLASS_NAME:"w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm shadow-sm focus:border-gray-900 focus:outline-none disabled:bg-gray-100"},U=({value:r,onChange:t,type:a="text",...s})=>e.jsx("input",{...s,id:c.useFieldId(),type:a,value:r,onChange:n=>{t(n.target.value)},className:x.CONTROL_CLASS_NAME}),j=({htmlFor:r,children:t})=>e.jsx("label",{htmlFor:r,className:"text-sm font-medium",children:t}),F=({href:r,children:t,className:a="text-blue-600 underline-offset-2 hover:text-blue-800 hover:underline"})=>e.jsx("a",{href:r,className:a,onClick:s=>{s.metaKey||s.ctrlKey||s.shiftKey||s.button!==0||(s.preventDefault(),c.navigateTo(r))},children:t}),H=({items:r})=>e.jsx("dl",{className:"grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-4",children:r.map(t=>e.jsxs("div",{className:"flex flex-col gap-1 rounded-lg border border-gray-200 bg-white px-4 py-3",children:[e.jsx("dt",{className:"text-sm text-gray-500",children:t.label}),e.jsx("dd",{className:"text-2xl font-semibold text-gray-900",children:t.value}),t.description&&e.jsx("dd",{className:"text-xs text-gray-500",children:t.description})]},t.label))}),B=({items:r})=>{const[t,a]=y.useState(null),s=y.useRef(null);return y.useEffect(()=>{if(!t)return;const n=o=>{const l=o.type==="mousedown"&&s.current?.contains(o.target),p=o instanceof KeyboardEvent&&o.key!=="Escape";!l&&!p&&a(null)};return document.addEventListener("mousedown",n),document.addEventListener("keydown",n),window.addEventListener("scroll",n,!0),window.addEventListener("resize",n),()=>{document.removeEventListener("mousedown",n),document.removeEventListener("keydown",n),window.removeEventListener("scroll",n,!0),window.removeEventListener("resize",n)}},[t]),e.jsxs("div",{ref:s,className:"flex justify-end",children:[e.jsx("button",{type:"button","aria-label":"Row actions","aria-expanded":t!==null,onClick:n=>{const o=n.currentTarget.getBoundingClientRect();a(t?null:{top:o.bottom+4,right:window.innerWidth-o.right})},className:"rounded-md p-1 text-gray-500 hover:bg-gray-100 hover:text-gray-900",children:e.jsxs("svg",{"aria-hidden":"true",viewBox:"0 0 20 20",className:"h-5 w-5 fill-current",children:[e.jsx("circle",{cx:"4.5",cy:"10",r:"1.5"}),e.jsx("circle",{cx:"10",cy:"10",r:"1.5"}),e.jsx("circle",{cx:"15.5",cy:"10",r:"1.5"})]})}),t&&e.jsx("div",{style:{top:t.top,right:t.right},className:"fixed z-20 flex min-w-40 flex-col rounded-lg border border-gray-200 bg-white py-1 shadow-lg",children:r.map(n=>e.jsx(c.Link,{href:n.href,className:"px-3 py-2 text-sm whitespace-nowrap text-gray-700 hover:bg-gray-50 hover:text-gray-900",children:n.label},n.label))})]})},K=({choices:r,value:t,onChange:a,placeholder:s="Choose…",disabled:n,autoFocus:o})=>e.jsxs("select",{id:c.useFieldId(),value:t,disabled:n,autoFocus:o,onChange:l=>{a(l.target.value)},className:x.CONTROL_CLASS_NAME,children:[e.jsx("option",{value:"",disabled:!0,children:s}),r.map(l=>e.jsx("option",{value:l.value,children:l.label},l.value))]}),P=({columns:r,rows:t,pageSize:a=20,filterable:s=!0,emptyText:n="Nothing to show.",selection:o})=>{const[l,p]=y.useState(""),[f,w]=y.useState(0),N=l.trim().toLowerCase(),g=N?t.filter(d=>d.searchText.toLowerCase().includes(N)):t,v=Math.max(1,Math.ceil(g.length/a)),h=Math.min(f,v-1),C=g.slice(h*a,(h+1)*a),L=t.some(d=>(d.menu??[]).length>0),I=s||g.length>a,_="rounded-md border border-gray-200 px-2.5 py-1 text-xs font-medium text-gray-700 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-40";return e.jsxs("div",{className:"rounded-lg border border-gray-200 bg-white",children:[I&&e.jsxs("div",{className:"flex flex-wrap items-center justify-between gap-3 border-b border-gray-200 px-3 py-2",children:[s?e.jsx("input",{type:"search",value:l,placeholder:"Filter","aria-label":"Filter rows",onChange:d=>{p(d.target.value),w(0)},className:"w-full max-w-56 rounded-md border border-gray-300 bg-white px-3 py-1 text-sm shadow-sm focus:border-gray-900 focus:outline-none"}):e.jsx("span",{}),g.length>0&&e.jsxs("div",{className:"flex items-center gap-2 text-xs text-gray-500",children:[e.jsxs("span",{children:[h*a+1,"–",Math.min((h+1)*a,g.length)," of ",g.length]}),g.length>a&&e.jsxs(e.Fragment,{children:[e.jsx("button",{type:"button",disabled:h===0,onClick:()=>{w(h-1)},className:_,children:"Prev"}),e.jsx("button",{type:"button",disabled:h>=v-1,onClick:()=>{w(h+1)},className:_,children:"Next"})]})]})]}),C.length===0?e.jsx("p",{className:"px-4 py-6 text-sm text-gray-500",children:N?"No rows match the filter.":n}):e.jsx("div",{className:"overflow-x-auto",children:e.jsxs("table",{className:"w-full text-left text-sm",children:[e.jsx("thead",{className:I?"bg-gray-50":"bg-gray-50 [&_th:first-child]:rounded-tl-lg [&_th:last-child]:rounded-tr-lg",children:e.jsxs("tr",{className:"border-b border-gray-200",children:[o&&e.jsx("th",{className:"w-10","aria-label":"Selected"}),r.map(d=>e.jsx("th",{className:"px-4 py-2.5 font-medium whitespace-nowrap text-gray-500",children:d.label},d.key)),L&&e.jsx("th",{className:"w-10","aria-label":"Row actions"})]})}),e.jsx("tbody",{children:C.map((d,J)=>e.jsxs("tr",{className:"border-b border-gray-100 last:border-0",children:[o&&d.id!==void 0&&e.jsx("td",{className:"py-2.5 pl-4",children:e.jsx("input",{type:o.mode==="single"?"radio":"checkbox","aria-label":"Select row",checked:o.selected.includes(d.id),disabled:o.disabled,onChange:()=>{const b=d.id??-1,Q=o.selected.includes(b);o.onChange(o.mode==="single"?[b]:Q?o.selected.filter(X=>X!==b):[...o.selected,b])},className:"accent-gray-900"})}),r.map(b=>e.jsx("td",{className:"px-4 py-2.5",children:d.cells[b.key]},b.key)),L&&e.jsx("td",{className:"px-2 py-1.5",children:d.menu&&d.menu.length>0&&e.jsx(c.RowMenu,{items:d.menu})})]},d.id??h*a+J))})]})})]})},W=({value:r,onChange:t,...a})=>e.jsx("textarea",{...a,id:c.useFieldId(),value:r,onChange:s=>{t(s.target.value)},className:x.CONTROL_CLASS_NAME}),u="__AWAITIO__",D=r=>{const t=window[u],a=document.currentScript,s=a instanceof HTMLScriptElement?a.dataset.type:void 0;if(!t||!s)throw new Error("A component UI script must be loaded by the AwaitIO UI.");t.registerComponent(s,r)},V=r=>{const t=window[u],a=document.currentScript,s=a instanceof HTMLScriptElement?a.dataset.type:void 0;if(!t||!s)throw new Error("A display component UI script must be loaded by the AwaitIO UI.");t.registerDisplay(s,r)},q=r=>{const t=window[u],a=document.currentScript,s=a instanceof HTMLScriptElement?a.dataset.type:void 0;if(!t||!s)throw new Error("A layout UI script must be loaded by the AwaitIO UI.");t.registerLayout(s,r)},G=r=>{const t=window[u],a=document.currentScript,s=a instanceof HTMLScriptElement?a.dataset.type:void 0;if(!t||!s)throw new Error("A theme UI script must be loaded by the AwaitIO UI.");t.registerTheme(s,r)},i=E({Button:A,Card:O,ChoiceList:T,Field:k,Heading:S,Hint:M,Input:U,Label:j,Link:F,Metadata:H,RowMenu:B,Select:K,Table:P,Textarea:W});return Object.values(i).every(r=>r&&r.kind==="awaitio-theme-block")?G({blocks:Object.fromEntries(Object.entries(i).map(([r,t])=>[r,t.component]))}):i.kind==="awaitio-layout"?q({component:i.component}):i.kind==="awaitio-display"?V({component:i.component}):D({component:i.component,initialValue:i.initialValue,wrap:i.wrap??!0}),m.defaultTheme=i,Object.defineProperty(m,Symbol.toStringTag,{value:"Module"}),m})({},__AWAITIO__.jsxRuntime,__AWAITIO__.ui,__AWAITIO__.React);
+var awaitioComponent=(function(v,e,i,u){"use strict";const I=r=>Object.fromEntries(Object.entries(r).map(([t,a])=>[t,{kind:"awaitio-theme-block",name:t,component:a,uiDirectory:null}])),S={red:"bg-red-100 text-red-800",orange:"bg-orange-100 text-orange-800",yellow:"bg-yellow-100 text-yellow-800",green:"bg-green-100 text-green-800",blue:"bg-blue-100 text-blue-800",purple:"bg-purple-100 text-purple-800",pink:"bg-pink-100 text-pink-800",gray:"bg-gray-100 text-gray-700"},T=({color:r,children:t})=>e.jsx("span",{className:`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${S[r]}`,children:t}),M=({variant:r="primary",className:t,type:a="button",...s})=>{const l=r==="primary"?"bg-gray-900 text-white hover:bg-gray-700":"border border-gray-300 bg-white text-gray-900 hover:bg-gray-100";return e.jsx("button",{type:a,className:["rounded-md px-4 py-2 text-sm font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50",l,t].filter(Boolean).join(" "),...s})},O=({children:r})=>e.jsx("div",{className:"flex flex-wrap gap-2",children:r}),j=({children:r})=>e.jsx("div",{className:"rounded-lg border border-gray-200 bg-white p-6 shadow-sm",children:r}),F=({checked:r,onChange:t,text:a,disabled:s,autoFocus:l})=>e.jsxs("label",{className:"flex cursor-pointer items-center gap-2 self-start text-sm text-gray-600",children:[e.jsx("input",{id:i.useFieldId(),type:"checkbox",checked:r,disabled:s,autoFocus:l,onChange:o=>{t(o.target.checked)},className:"size-4 accent-gray-900"}),a]}),B=({choices:r,mode:t,value:a,onChange:s,disabled:l})=>{const o=i.useFieldId();return e.jsx("div",{role:t==="single"?"radiogroup":"group",id:o,className:"flex flex-col gap-2",children:r.map(n=>{const p=a.includes(n.value);return e.jsxs("label",{className:["flex cursor-pointer items-start gap-3 rounded-md border bg-white px-3 py-2.5 text-sm",p&&"border-gray-900",!p&&"border-gray-300 hover:border-gray-400"].filter(Boolean).join(" "),children:[e.jsx("input",{type:t==="single"?"radio":"checkbox",name:o,checked:p,disabled:l,onChange:()=>{if(t==="single"){s([n.value]);return}s(p?a.filter(x=>x!==n.value):[...a,n.value])},className:"mt-0.5 accent-gray-900"}),e.jsxs("span",{className:"flex flex-col gap-0.5",children:[e.jsx("span",{className:"font-medium",children:n.label}),n.description&&e.jsx("span",{className:"text-gray-500",children:n.description})]})]},n.value)})})},U=({label:r,helpText:t,optional:a,error:s,children:l})=>{const o=u.useId();return e.jsx(i.FieldContext.Provider,{value:o,children:e.jsxs("div",{className:"flex flex-col gap-1",children:[e.jsxs(i.Label,{htmlFor:o,children:[r,a&&e.jsx("span",{className:"ml-1.5 text-xs font-normal text-gray-500",children:"optional"})]}),l,t&&e.jsx(i.Hint,{children:t}),s&&e.jsx("p",{role:"alert",className:"text-xs text-red-600",children:s})]})})},H=({children:r,description:t,level:a=3})=>a===2?e.jsxs("div",{className:"flex flex-col gap-1 pt-2",children:[e.jsx("h2",{className:"text-lg font-semibold text-gray-900",children:r}),t&&e.jsx("p",{className:"text-sm text-gray-500",children:t})]}):e.jsxs("div",{className:"flex flex-col gap-1",children:[e.jsx("h3",{className:"text-base font-semibold text-gray-900",children:r}),t&&e.jsx("p",{className:"text-sm text-gray-500",children:t})]}),W=({children:r})=>e.jsx("p",{className:"text-xs text-gray-500",children:r}),P=({src:r,alt:t,size:a})=>{const s={thumbnail:"max-h-16",small:"max-h-32",medium:"max-h-64",large:"max-h-96"}[a??"large"];return e.jsx("img",{src:r,alt:t,loading:"lazy",className:["max-w-full self-start rounded-md border border-gray-200 object-contain",a?s:""].join(" ")})},f={CONTROL_CLASS_NAME:"w-full rounded-md border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-gray-900 focus:outline-none enabled:bg-white disabled:bg-gray-100 disabled:text-gray-500",SELECT_CLASS_NAME:"w-full appearance-none rounded-md border border-gray-300 py-2 pr-9 pl-3 text-sm shadow-sm focus:border-gray-900 focus:outline-none enabled:bg-white disabled:bg-gray-100 disabled:text-gray-500"},D=({value:r,onChange:t,type:a="text",...s})=>e.jsx("input",{...s,id:i.useFieldId(),type:a,value:r,onChange:l=>{t(l.target.value)},className:f.CONTROL_CLASS_NAME}),K=({htmlFor:r,children:t})=>e.jsx("label",{htmlFor:r,className:"text-sm font-medium",children:t}),V=({href:r,children:t,external:a=!1,className:s="text-blue-600 underline-offset-2 hover:text-blue-800 hover:underline"})=>a?e.jsx("a",{href:r,target:"_blank",rel:"noopener noreferrer",className:s,children:t}):e.jsx("a",{href:r,className:s,onClick:l=>{l.metaKey||l.ctrlKey||l.shiftKey||l.button!==0||(l.preventDefault(),i.navigateTo(r))},children:t}),$=({items:r})=>e.jsx("dl",{className:"grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-4",children:r.map((t,a)=>e.jsxs("div",{className:"flex min-w-0 flex-col gap-1 rounded-lg border border-gray-200 bg-white px-4 py-3",children:[t.label&&e.jsx("dt",{className:"text-sm text-gray-500",children:t.label}),e.jsx("dd",{className:"text-2xl font-semibold wrap-break-word text-gray-900",children:t.value}),t.description&&e.jsx("dd",{className:"text-xs text-gray-500",children:t.description})]},a))}),_=()=>e.jsx("svg",{"aria-hidden":"true",viewBox:"0 0 20 20",fill:"none",stroke:"currentColor",strokeWidth:"1.8",strokeLinecap:"round",strokeLinejoin:"round",className:"pointer-events-none absolute top-1/2 right-3 size-4 -translate-y-1/2 text-gray-500",children:e.jsx("path",{d:"M6 8l4 4 4-4"})}),q=({choices:r,value:t,onChange:a,placeholder:s="Add…",isFull:l=!1,disabled:o,autoFocus:n})=>{const p=r.filter(c=>!t.includes(c.value)),x=r.filter(c=>t.includes(c.value));return e.jsxs("div",{className:"divide-y divide-gray-200 rounded-md border border-gray-300 bg-gray-50 text-sm",children:[e.jsx("div",{className:"p-2",children:e.jsxs("div",{className:"relative",children:[e.jsxs("select",{id:i.useFieldId(),value:"",disabled:o||l||p.length===0,autoFocus:n,onChange:c=>{a([...t,c.target.value])},className:f.SELECT_CLASS_NAME,children:[e.jsx("option",{value:"",disabled:!0,children:s}),p.map(c=>e.jsx("option",{value:c.value,children:c.label},c.value))]}),e.jsx(_,{})]})}),x.map(c=>e.jsxs("div",{className:["flex items-center justify-between gap-3 py-1.5 pr-3.5 pl-5 last:rounded-b-md",o?"min-h-9 bg-gray-100 text-gray-500":"bg-white text-gray-900"].join(" "),children:[c.label,!o&&e.jsx("button",{type:"button","aria-label":`Remove ${c.label}`,disabled:o,onClick:()=>{a(t.filter(m=>m!==c.value))},className:"flex size-6 shrink-0 items-center justify-center rounded text-gray-400 hover:bg-gray-100 hover:text-gray-900 disabled:cursor-not-allowed disabled:opacity-50",children:e.jsx("svg",{"aria-hidden":"true",viewBox:"0 0 20 20",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",className:"size-3.5",children:e.jsx("path",{d:"M6 6l8 8m0-8-8 8"})})})]},c.value))]})},z=({children:r})=>e.jsx("div",{className:"flex flex-col gap-3 text-sm [&>div]:flex [&>div]:flex-col [&>div]:gap-3 leading-6 text-gray-700 [&_a]:text-blue-600 [&_a:hover]:underline [&_code]:rounded [&_code]:bg-gray-100 [&_code]:px-1 [&_code]:py-0.5 [&_code]:text-[13px] [&_h1]:text-lg [&_h1]:font-semibold [&_h1]:text-gray-900 [&_h2]:text-base [&_h2]:font-semibold [&_h2]:text-gray-900 [&_h3]:font-semibold [&_h3]:text-gray-900 [&_li]:my-0.5 [&_ol]:list-decimal [&_ol]:pl-5 [&_pre]:overflow-x-auto [&_pre]:rounded-md [&_pre]:bg-gray-100 [&_pre]:p-3 [&_pre_code]:bg-transparent [&_pre_code]:p-0 [&_strong]:font-semibold [&_strong]:text-gray-900 [&_ul]:list-disc [&_ul]:pl-5",children:r}),G=({items:r})=>{const[t,a]=u.useState(null),s=u.useRef(null);return u.useEffect(()=>{if(!t)return;const l=o=>{const n=o.type==="mousedown"&&s.current?.contains(o.target),p=o instanceof KeyboardEvent&&o.key!=="Escape";!n&&!p&&a(null)};return document.addEventListener("mousedown",l),document.addEventListener("keydown",l),window.addEventListener("scroll",l,!0),window.addEventListener("resize",l),()=>{document.removeEventListener("mousedown",l),document.removeEventListener("keydown",l),window.removeEventListener("scroll",l,!0),window.removeEventListener("resize",l)}},[t]),e.jsxs("div",{ref:s,className:"flex justify-end",children:[e.jsx("button",{type:"button","aria-label":"Row actions","aria-expanded":t!==null,onClick:l=>{const o=l.currentTarget.getBoundingClientRect();a(t?null:{top:o.bottom+4,right:window.innerWidth-o.right})},className:"rounded-md p-1 text-gray-500 hover:bg-gray-100 hover:text-gray-900",children:e.jsxs("svg",{"aria-hidden":"true",viewBox:"0 0 20 20",className:"h-5 w-5 fill-current",children:[e.jsx("circle",{cx:"4.5",cy:"10",r:"1.5"}),e.jsx("circle",{cx:"10",cy:"10",r:"1.5"}),e.jsx("circle",{cx:"15.5",cy:"10",r:"1.5"})]})}),t&&e.jsx("div",{style:{top:t.top,right:t.right},className:"fixed z-20 flex min-w-40 flex-col rounded-lg border border-gray-200 bg-white py-1 shadow-lg",children:r.map(l=>e.jsx(i.Link,{href:l.href,className:"px-3 py-2 text-sm whitespace-nowrap text-gray-700 hover:bg-gray-50 hover:text-gray-900",children:l.label},l.label))})]})},J=({choices:r,value:t,onChange:a,placeholder:s="Choose…",disabled:l,autoFocus:o})=>e.jsxs("div",{className:"relative",children:[e.jsxs("select",{id:i.useFieldId(),value:t,disabled:l,autoFocus:o,onChange:n=>{a(n.target.value)},className:f.SELECT_CLASS_NAME,children:[e.jsx("option",{value:"",disabled:!0,children:s}),r.map(n=>e.jsx("option",{value:n.value,children:n.label},n.value))]}),e.jsx(_,{})]}),Q=({columns:r,rows:t,pageSize:a=20,filterable:s=!0,emptyText:l="Nothing to show.",selection:o})=>{const[n,p]=u.useState(""),x=o?.disabled===!0,[c,m]=u.useState(0),N=n.trim().toLowerCase(),h=N?t.filter(d=>d.searchText.toLowerCase().includes(N)):t,C=Math.max(1,Math.ceil(h.length/a)),b=Math.min(c,C-1),k=h.slice(b*a,(b+1)*a),L=t.some(d=>(d.menu??[]).length>0),E=s||h.length>a,A="rounded-md border border-gray-200 px-2.5 py-1 text-xs font-medium text-gray-700 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-40";return e.jsxs("div",{className:["rounded-lg border border-gray-200",x?"bg-gray-100 text-gray-500":"bg-white"].join(" "),children:[E&&e.jsxs("div",{className:"flex flex-wrap items-center justify-between gap-3 border-b border-gray-200 px-3 py-2",children:[s?e.jsx("input",{type:"search",value:n,placeholder:"Filter","aria-label":"Filter rows",disabled:x,onChange:d=>{p(d.target.value),m(0)},className:"w-full max-w-56 rounded-md border border-gray-300 px-3 py-1 text-sm shadow-sm focus:border-gray-900 focus:outline-none enabled:bg-white disabled:bg-gray-100"}):e.jsx("span",{}),h.length>0&&e.jsxs("div",{className:"flex items-center gap-2 text-xs text-gray-500",children:[e.jsxs("span",{children:[b*a+1,"–",Math.min((b+1)*a,h.length)," of ",h.length]}),h.length>a&&e.jsxs(e.Fragment,{children:[e.jsx("button",{type:"button",disabled:b===0,onClick:()=>{m(b-1)},className:A,children:"Prev"}),e.jsx("button",{type:"button",disabled:b>=C-1,onClick:()=>{m(b+1)},className:A,children:"Next"})]})]})]}),k.length===0?e.jsx("p",{className:"px-4 py-6 text-sm text-gray-500",children:N?"No rows match the filter.":l}):e.jsx("div",{className:"overflow-x-auto",children:e.jsxs("table",{className:"w-full text-left text-sm",children:[e.jsx("thead",{className:E?"bg-gray-50":"bg-gray-50 [&_th:first-child]:rounded-tl-lg [&_th:last-child]:rounded-tr-lg",children:e.jsxs("tr",{className:"border-b border-gray-200",children:[o&&e.jsx("th",{className:"w-10","aria-label":"Selected"}),r.map(d=>e.jsx("th",{className:"px-4 py-2.5 font-medium whitespace-nowrap text-gray-500",children:d.label},d.key)),L&&e.jsx("th",{className:"w-10","aria-label":"Row actions"})]})}),e.jsx("tbody",{children:k.map((d,te)=>e.jsxs("tr",{className:"border-b border-gray-100 last:border-0",children:[o&&d.id!==void 0&&e.jsx("td",{className:"py-2.5 pl-4",children:e.jsx("input",{type:o.mode==="single"?"radio":"checkbox","aria-label":"Select row",checked:o.selected.includes(d.id),disabled:o.disabled,onChange:()=>{const y=d.id??-1,re=o.selected.includes(y);o.onChange(o.mode==="single"?[y]:re?o.selected.filter(ae=>ae!==y):[...o.selected,y])},className:"accent-gray-900"})}),r.map(y=>e.jsx("td",{className:"px-4 py-2.5",children:d.cells[y.key]},y.key)),L&&e.jsx("td",{className:"px-2 py-1.5",children:d.menu&&d.menu.length>0&&e.jsx(i.RowMenu,{items:d.menu})})]},d.id??b*a+te))})]})})]})},X=({value:r,onChange:t,...a})=>e.jsx("textarea",{...a,id:i.useFieldId(),value:r,onChange:s=>{t(s.target.value)},className:f.CONTROL_CLASS_NAME}),w="__AWAITIO__",Y=r=>{const t=window[w],a=document.currentScript,s=a instanceof HTMLScriptElement?a.dataset.type:void 0;if(!t||!s)throw new Error("A component UI script must be loaded by the AwaitIO UI.");t.registerComponent(s,r)},Z=r=>{const t=window[w],a=document.currentScript,s=a instanceof HTMLScriptElement?a.dataset.type:void 0;if(!t||!s)throw new Error("A display component UI script must be loaded by the AwaitIO UI.");t.registerDisplay(s,r)},R=r=>{const t=window[w],a=document.currentScript,s=a instanceof HTMLScriptElement?a.dataset.type:void 0;if(!t||!s)throw new Error("A layout UI script must be loaded by the AwaitIO UI.");t.registerLayout(s,r)},ee=r=>{const t=window[w],a=document.currentScript,s=a instanceof HTMLScriptElement?a.dataset.type:void 0;if(!t||!s)throw new Error("A theme UI script must be loaded by the AwaitIO UI.");t.registerTheme(s,r)},g=I({Badge:T,Button:M,ButtonRow:O,Card:j,Checkbox:F,ChoiceList:B,Field:U,Heading:H,Hint:W,Image:P,Input:D,Label:K,Link:V,Metadata:$,MultiSelect:q,Prose:z,RowMenu:G,Select:J,Table:Q,Textarea:X});return Object.values(g).every(r=>r&&r.kind==="awaitio-theme-block")?ee({blocks:Object.fromEntries(Object.entries(g).map(([r,t])=>[r,t.component]))}):g.kind==="awaitio-layout"?R({component:g.component}):g.kind==="awaitio-display"?Z({component:g.component,wrap:g.wrap??!0}):Y({component:g.component,initialValue:g.initialValue,wrap:g.wrap??!0,submitButton:g.submitButton??!0}),v.defaultTheme=g,Object.defineProperty(v,Symbol.toStringTag,{value:"Module"}),v})({},__AWAITIO__.jsxRuntime,__AWAITIO__.ui,__AWAITIO__.React);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@awaitio/theme-default",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "description": "The default look of AwaitIO: every block of awaitio/ui, with its styles.",
   "license": "SEE LICENSE IN LICENSE",
   "main": "dist/index.js",
@@ -8,21 +8,18 @@
   "files": [
     "dist"
   ],
-  "scripts": {
-    "build": "rm -rf dist && tsc -p tsconfig.build.json && vite build",
-    "dev": "tsc -p tsconfig.build.json --watch --preserveWatchOutput & vite build --watch",
-    "tsc": "tsc --noEmit",
-    "lint": "eslint .",
-    "lint:fix": "eslint . --fix",
-    "test": "vitest run",
-    "release": "pnpm build && pnpm publish --access public --no-git-checks"
-  },
   "peerDependencies": {
-    "awaitio": "workspace:^"
+    "@types/react": "^19.0.0",
+    "zod": "^3.25.0 || ^4.0.0",
+    "awaitio": "^0.1.0"
+  },
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    }
   },
   "dependencies": {
-    "react": "^19.1.0",
-    "zod": "3.22.4"
+    "react": "^19.1.0"
   },
   "devDependencies": {
     "@tailwindcss/vite": "^4.1.0",
@@ -30,10 +27,20 @@
     "@types/react": "^19.1.0",
     "@typescript/native": "npm:typescript@^7.0.2",
     "@vitejs/plugin-react": "^5.0.0",
-    "awaitio": "workspace:*",
     "tailwindcss": "^4.1.0",
     "typescript": "npm:@typescript/typescript6@^6.0.2",
     "vite": "^7.1.0",
-    "vitest": "^3.2.0"
+    "vitest": "^3.2.0",
+    "zod": "^4.3.6",
+    "awaitio": "0.1.0"
+  },
+  "scripts": {
+    "build": "rm -rf dist && tsc -p tsconfig.build.json && vite build",
+    "dev": "tsc -p tsconfig.build.json --watch --preserveWatchOutput & vite build --watch",
+    "tsc": "tsc --noEmit",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "test": "vitest run",
+    "release": "pnpm build && pnpm publish --access public --no-git-checks"
   }
-}
+}