@awaitio/theme-default 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,64 @@
+# AwaitIO License
+
+Copyright © 2026 Orukami s.r.o., Rybná 716/24, 110 00 Praha 1, Czech Republic, company ID 64049159, registered in the Commercial Register kept by the Municipal Court in Prague, section C, file 74046 (the "Licensor")
+
+The source code of AwaitIO is public. Whether you can use it for free depends on how many people use it: small teams use AwaitIO for free, including commercially, while for-profit organizations with more users need a Company License. This keeps AwaitIO free for most people and funds its development.
+
+This license covers everything in this repository, the package `awaitio` and every package published by the Licensor under the `@awaitio` scope on npm, now or in the future, such as `@awaitio/input-text`, `@awaitio/input-textarea` and `@awaitio/input-datetime` (together, "AwaitIO").
+
+## Users
+
+A "user" is a person who uses an application built with AwaitIO, whether it runs locally or is deployed: an employee, a contractor or anyone else who opens it, runs its actions or answers them. What counts is the number of real people, not the number of logins: several people sharing one login are several users. Count each person once across all of your organization's AwaitIO applications and environments.
+
+## Free License
+
+### Who is eligible
+
+You may use AwaitIO for free if you are:
+
+- an individual or a for-profit organization with up to 3 users;
+- a non-profit or not-for-profit organization, or an educational institution; or
+- evaluating whether AwaitIO fits your needs, and not yet using it commercially.
+
+### What you may do
+
+If you are eligible, you are granted permission, free of charge, to:
+
+- use AwaitIO, commercially or not, including in production;
+- build applications and internal tools with AwaitIO, for yourself and for your clients; and
+- modify AwaitIO for your own use, or to contribute fixes and improvements back to AwaitIO.
+
+## Company License
+
+A for-profit organization with more than 3 users needs a Company License to use AwaitIO, priced by the number of users (see the pricing in the README). It allows the same use as the Free License. To get one, write to p.homoky@gmail.com.
+
+Eligibility is decided by the organization that uses AwaitIO. If you build tools with AwaitIO for a client and the client runs them, the client's users count and the client needs a Company License unless it is eligible for the Free License itself.
+
+## Same software, honor system
+
+The Free License and the Company License cover exactly the same software. AwaitIO has no paid features, no license keys, no usage limits and no telemetry, and it never checks which license you have. The licensing works on trust: if your organization needs a Company License, get one.
+
+## What nobody may do
+
+Whatever your license, without a separate written agreement with the Licensor you may not:
+
+1. copy or modify AwaitIO in order to sell, rent, license, relicense or sublicense AwaitIO itself or your own derivative or fork of it;
+2. offer AwaitIO, or a derivative or fork of it, to third parties as a product or service that competes with AwaitIO;
+3. offer to third parties a commercial hosted or managed service built on AwaitIO, such as a dashboard, cloud, monitoring or management service for applications that use AwaitIO; or
+4. sell or license to third parties components, plugins or extensions made for AwaitIO.
+
+Building applications with AwaitIO, running them and handing them over to your clients is none of the above.
+
+## Changes to this license
+
+The Licensor may change this license, including its prices and eligibility, at any time. A change applies to the versions of AwaitIO released after it; each version is governed by the license included with that version.
+
+If you do not agree with the license of a newer version, you may keep using the versions you already have under the license they came with, but you may not upgrade to a version released under the license you do not agree with. Installing or using a newer version means you accept its license.
+
+## Warranty
+
+AwaitIO is provided "as is", without warranty of any kind, express or implied, including but not limited to the warranties of merchantability, fitness for a particular purpose and non-infringement. In no event shall the Licensor or copyright holders be liable for any claim, damages or other liability, whether in an action of contract, tort or otherwise, arising from, out of or in connection with AwaitIO or the use of or other dealings in AwaitIO.
+
+## Support
+
+Support is provided on a best-effort basis through GitHub issues. Company License holders get priority.

package/README.md

@@ -1,3 +1,37 @@
-# Temporary Holding Version
+# @awaitio/theme-default
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+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/Button.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/blocks/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAC9C,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAEhC,eAAO,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,CAUlC,CAAC"}

package/dist/blocks/Button.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Button = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Button = ({ variant = 'primary', className, type = 'button', ...props }) => {
+    const variantClassName = variant === 'primary' ? 'bg-gray-900 text-white hover:bg-gray-700' : 'border border-gray-300 bg-white text-gray-900 hover:bg-gray-100';
+    return ((0, jsx_runtime_1.jsx)("button", { type: type, className: ['rounded-md px-4 py-2 text-sm font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50', variantClassName, className].filter(Boolean).join(' '), ...props }));
+};
+exports.Button = Button;

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/Card.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/blocks/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAC5C,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAEhC,eAAO,MAAM,IAAI,EAAE,EAAE,CAAC,SAAS,CAE9B,CAAC"}

package/dist/blocks/Card.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Card = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Card = ({ children }) => {
+    return (0, jsx_runtime_1.jsx)("div", { className: "rounded-lg border border-gray-200 bg-white p-6 shadow-sm", children: children });
+};
+exports.Card = Card;

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/ChoiceList.d.ts

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

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

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

package/dist/blocks/ChoiceList.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChoiceList = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ui_1 = require("awaitio/ui");
+// Options as a list of cards to pick from, for a short list; a long one reads better as a Select.
+const ChoiceList = ({ choices, mode, value, onChange, disabled }) => {
+    const name = (0, ui_1.useFieldId)();
+    return ((0, jsx_runtime_1.jsx)("div", { role: mode === 'single' ? 'radiogroup' : 'group', id: name, className: "flex flex-col gap-2", children: choices.map((choice) => {
+            const isChosen = value.includes(choice.value);
+            return ((0, jsx_runtime_1.jsxs)("label", { className: ['flex cursor-pointer items-start gap-3 rounded-md border bg-white px-3 py-2.5 text-sm', isChosen && 'border-gray-900', !isChosen && 'border-gray-300 hover:border-gray-400']
+                    .filter(Boolean)
+                    .join(' '), children: [(0, jsx_runtime_1.jsx)("input", { type: mode === 'single' ? 'radio' : 'checkbox', name: name, checked: isChosen, disabled: disabled, onChange: () => {
+                            if (mode === 'single') {
+                                onChange([choice.value]);
+                                return;
+                            }
+                            onChange(isChosen
+                                ? value.filter((chosen) => {
+                                    return chosen !== choice.value;
+                                })
+                                : [...value, choice.value]);
+                        }, className: "mt-0.5 accent-gray-900" }), (0, jsx_runtime_1.jsxs)("span", { className: "flex flex-col gap-0.5", children: [(0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: choice.label }), choice.description && (0, jsx_runtime_1.jsx)("span", { className: "text-gray-500", children: choice.description })] })] }, choice.value));
+        }) }));
+};
+exports.ChoiceList = ChoiceList;

package/dist/blocks/Field.d.ts

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

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

@@ -0,0 +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,CAoBhC,CAAC"}

package/dist/blocks/Field.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Field = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+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, 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.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

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

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

@@ -0,0 +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,CAgBpC,CAAC"}

package/dist/blocks/Heading.js

@@ -0,0 +1,12 @@
+"use strict";
+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; 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/Hint.d.ts

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

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

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

package/dist/blocks/Hint.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Hint = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// Small secondary text under a control, e.g. the time zone of a date field.
+const Hint = ({ children }) => {
+    return (0, jsx_runtime_1.jsx)("p", { className: "text-xs text-gray-500", children: children });
+};
+exports.Hint = Hint;

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/Input.d.ts

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

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

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

package/dist/blocks/Input.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Input = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ui_1 = require("awaitio/ui");
+const constants_1 = require("../constants");
+const Input = ({ value, onChange, type = 'text', ...props }) => {
+    return ((0, jsx_runtime_1.jsx)("input", { ...props, id: (0, ui_1.useFieldId)(), type: type, value: value, onChange: (event) => {
+            onChange(event.target.value);
+        }, className: constants_1.constants.CONTROL_CLASS_NAME }));
+};
+exports.Input = Input;

package/dist/blocks/Label.d.ts

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

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

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

package/dist/blocks/Label.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Label = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Label = ({ htmlFor, children }) => {
+    return ((0, jsx_runtime_1.jsx)("label", { htmlFor: htmlFor, className: "text-sm font-medium", children: children }));
+};
+exports.Label = Label;

package/dist/blocks/Link.d.ts

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

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

@@ -0,0 +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,CAyB9B,CAAC"}

package/dist/blocks/Link.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Link = void 0;
+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, 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;
+            }
+            event.preventDefault();
+            (0, ui_1.navigateTo)(href);
+        }, children: children }));
+};
+exports.Link = Link;

package/dist/blocks/Metadata.d.ts

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

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

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

package/dist/blocks/Metadata.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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, 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/RowMenu.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"RowMenu.d.ts","sourceRoot":"","sources":["../../src/blocks/RowMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,YAAY,EAAE,MAAM,YAAY,CAAC;AACrD,OAAO,EAA+B,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAS7D,eAAO,MAAM,OAAO,EAAE,EAAE,CAAC,YAAY,CA6DpC,CAAC"}

package/dist/blocks/RowMenu.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RowMenu = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ui_1 = require("awaitio/ui");
+const react_1 = require("react");
+// The "…" button at the end of a table row with links for that row. The list is fixed to the window, so the table's
+// sideways scroll box cannot cut it off at the last rows; it closes on a click outside, Escape or scrolling.
+const RowMenu = ({ items }) => {
+    const [position, setPosition] = (0, react_1.useState)(null);
+    const root = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        if (!position) {
+            return undefined;
+        }
+        const close = (event) => {
+            const isInside = event.type === 'mousedown' && root.current?.contains(event.target);
+            const isOtherKey = event instanceof KeyboardEvent && event.key !== 'Escape';
+            if (!isInside && !isOtherKey) {
+                setPosition(null);
+            }
+        };
+        document.addEventListener('mousedown', close);
+        document.addEventListener('keydown', close);
+        window.addEventListener('scroll', close, true);
+        window.addEventListener('resize', close);
+        return () => {
+            document.removeEventListener('mousedown', close);
+            document.removeEventListener('keydown', close);
+            window.removeEventListener('scroll', close, true);
+            window.removeEventListener('resize', close);
+        };
+    }, [position]);
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: root, className: "flex justify-end", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", "aria-label": "Row actions", "aria-expanded": position !== null, onClick: (event) => {
+                    const rect = event.currentTarget.getBoundingClientRect();
+                    setPosition(position ? null : { top: rect.bottom + 4, right: window.innerWidth - rect.right });
+                }, className: "rounded-md p-1 text-gray-500 hover:bg-gray-100 hover:text-gray-900", children: (0, jsx_runtime_1.jsxs)("svg", { "aria-hidden": "true", viewBox: "0 0 20 20", className: "h-5 w-5 fill-current", children: [(0, jsx_runtime_1.jsx)("circle", { cx: "4.5", cy: "10", r: "1.5" }), (0, jsx_runtime_1.jsx)("circle", { cx: "10", cy: "10", r: "1.5" }), (0, jsx_runtime_1.jsx)("circle", { cx: "15.5", cy: "10", r: "1.5" })] }) }), position && ((0, jsx_runtime_1.jsx)("div", { style: { top: position.top, right: position.right }, className: "fixed z-20 flex min-w-40 flex-col rounded-lg border border-gray-200 bg-white py-1 shadow-lg", children: items.map((item) => {
+                    return ((0, jsx_runtime_1.jsx)(ui_1.Link, { href: item.href, className: "px-3 py-2 text-sm whitespace-nowrap text-gray-700 hover:bg-gray-50 hover:text-gray-900", children: item.label }, item.label));
+                }) }))] }));
+};
+exports.RowMenu = RowMenu;

package/dist/blocks/Select.d.ts

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

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,16 @@
+"use strict";
+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)("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

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

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

@@ -0,0 +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,CA0IhC,CAAC"}

package/dist/blocks/Table.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Table = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ui_1 = require("awaitio/ui");
+const react_1 = require("react");
+// A data table for layouts: an optional filter, a header row, one row per record with an optional "…" menu, and a pager.
+// 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
+        ? rows.filter((row) => {
+            return row.searchText.toLowerCase().includes(query);
+        })
+        : rows;
+    const pageCount = Math.max(1, Math.ceil(matching.length / pageSize));
+    const current = Math.min(page, pageCount - 1);
+    const shown = matching.slice(current * pageSize, (current + 1) * pageSize);
+    const hasMenu = rows.some((row) => {
+        return (row.menu ?? []).length > 0;
+    });
+    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', 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 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);
+                                        }, className: pagerButton, children: "Next" })] }))] }))] })), shown.length === 0 ? ((0, jsx_runtime_1.jsx)("p", { className: "px-4 py-6 text-sm text-gray-500", children: query ? 'No rows match the filter.' : emptyText })) : ((0, jsx_runtime_1.jsx)("div", { className: "overflow-x-auto", children: (0, jsx_runtime_1.jsxs)("table", { className: "w-full text-left text-sm", children: [(0, jsx_runtime_1.jsx)("thead", { className: hasToolbar ? 'bg-gray-50' : 'bg-gray-50 [&_th:first-child]:rounded-tl-lg [&_th:last-child]:rounded-tr-lg', children: (0, jsx_runtime_1.jsxs)("tr", { className: "border-b border-gray-200", children: [selection && (0, jsx_runtime_1.jsx)("th", { className: "w-10", "aria-label": "Selected" }), columns.map((column) => {
+                                        return ((0, jsx_runtime_1.jsx)("th", { className: "px-4 py-2.5 font-medium whitespace-nowrap text-gray-500", children: column.label }, column.key));
+                                    }), hasMenu && (0, jsx_runtime_1.jsx)("th", { className: "w-10", "aria-label": "Row actions" })] }) }), (0, jsx_runtime_1.jsx)("tbody", { children: shown.map((row, rowIndex) => {
+                                return ((0, jsx_runtime_1.jsxs)("tr", { className: "border-b border-gray-100 last:border-0", children: [selection && row.id !== undefined && ((0, jsx_runtime_1.jsx)("td", { className: "py-2.5 pl-4", children: (0, jsx_runtime_1.jsx)("input", { type: selection.mode === 'single' ? 'radio' : 'checkbox', "aria-label": "Select row", checked: selection.selected.includes(row.id), disabled: selection.disabled, onChange: () => {
+                                                    const id = row.id ?? -1;
+                                                    const isSelected = selection.selected.includes(id);
+                                                    selection.onChange(selection.mode === 'single'
+                                                        ? [id]
+                                                        : isSelected
+                                                            ? selection.selected.filter((selected) => {
+                                                                return selected !== id;
+                                                            })
+                                                            : [...selection.selected, id]);
+                                                }, className: "accent-gray-900" }) })), columns.map((column) => {
+                                            return ((0, jsx_runtime_1.jsx)("td", { className: "px-4 py-2.5", children: row.cells[column.key] }, column.key));
+                                        }), hasMenu && (0, jsx_runtime_1.jsx)("td", { className: "px-2 py-1.5", children: row.menu && row.menu.length > 0 && (0, jsx_runtime_1.jsx)(ui_1.RowMenu, { items: row.menu }) })] }, row.id ?? current * pageSize + rowIndex));
+                            }) })] }) }))] }));
+};
+exports.Table = Table;

package/dist/blocks/Textarea.d.ts

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

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

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

package/dist/blocks/Textarea.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Textarea = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ui_1 = require("awaitio/ui");
+const constants_1 = require("../constants");
+const Textarea = ({ value, onChange, ...props }) => {
+    return ((0, jsx_runtime_1.jsx)("textarea", { ...props, id: (0, ui_1.useFieldId)(), value: value, onChange: (event) => {
+            onChange(event.target.value);
+        }, className: constants_1.constants.CONTROL_CLASS_NAME }));
+};
+exports.Textarea = Textarea;

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

@@ -0,0 +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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,10 @@
+"use strict";
+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. 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

@@ -0,0 +1,23 @@
+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>;
+    Textarea: import("react").FC<import("awaitio/ui").TextareaProps>;
+}>;
+//# sourceMappingURL=defaultTheme.d.ts.map

package/dist/defaultTheme.d.ts.map

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

package/dist/defaultTheme.js

@@ -0,0 +1,46 @@
+"use strict";
+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");
+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,
+    Textarea: Textarea_1.Textarea,
+});

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { defaultTheme } from './defaultTheme';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultTheme = void 0;
+var defaultTheme_1 = require("./defaultTheme");
+Object.defineProperty(exports, "defaultTheme", { enumerable: true, get: function () { return defaultTheme_1.defaultTheme; } });

package/dist/ui/ui.css

@@ -0,0 +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-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

@@ -0,0 +1 @@
+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,46 @@
 {
   "name": "@awaitio/theme-default",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "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",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "@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"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.1.0",
+    "@types/node": "^22.14.0",
+    "@types/react": "^19.1.0",
+    "@typescript/native": "npm:typescript@^7.0.2",
+    "@vitejs/plugin-react": "^5.0.0",
+    "tailwindcss": "^4.1.0",
+    "typescript": "npm:@typescript/typescript6@^6.0.2",
+    "vite": "^7.1.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"
+  }
 }