@awaitio/theme-default 0.0.1 → 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +39 -9
- package/README.md +37 -0
- package/dist/blocks/Badge.d.ts +4 -0
- package/dist/blocks/Badge.d.ts.map +1 -0
- package/dist/blocks/Badge.js +20 -0
- package/dist/blocks/ButtonRow.d.ts +4 -0
- package/dist/blocks/ButtonRow.d.ts.map +1 -0
- package/dist/blocks/ButtonRow.js +9 -0
- package/dist/blocks/Checkbox.d.ts +4 -0
- package/dist/blocks/Checkbox.d.ts.map +1 -0
- package/dist/blocks/Checkbox.js +12 -0
- package/dist/blocks/Field.d.ts.map +1 -1
- package/dist/blocks/Field.js +2 -2
- package/dist/blocks/Heading.d.ts.map +1 -1
- package/dist/blocks/Heading.js +6 -3
- package/dist/blocks/Image.d.ts +4 -0
- package/dist/blocks/Image.d.ts.map +1 -0
- package/dist/blocks/Image.js +10 -0
- package/dist/blocks/Link.d.ts.map +1 -1
- package/dist/blocks/Link.js +4 -1
- package/dist/blocks/Metadata.js +2 -2
- package/dist/blocks/MultiSelect.d.ts +4 -0
- package/dist/blocks/MultiSelect.d.ts.map +1 -0
- package/dist/blocks/MultiSelect.js +28 -0
- package/dist/blocks/Prose.d.ts +4 -0
- package/dist/blocks/Prose.d.ts.map +1 -0
- package/dist/blocks/Prose.js +9 -0
- package/dist/blocks/Select.d.ts.map +1 -1
- package/dist/blocks/Select.js +6 -5
- package/dist/blocks/Table.d.ts.map +1 -1
- package/dist/blocks/Table.js +4 -2
- package/dist/components/SelectArrow.d.ts +3 -0
- package/dist/components/SelectArrow.d.ts.map +1 -0
- package/dist/components/SelectArrow.js +9 -0
- package/dist/constants.d.ts +1 -0
- package/dist/constants.d.ts.map +1 -1
- package/dist/constants.js +5 -2
- package/dist/defaultTheme.d.ts +6 -0
- package/dist/defaultTheme.d.ts.map +1 -1
- package/dist/defaultTheme.js +12 -2
- package/dist/ui/ui.css +1 -1
- package/dist/ui/ui.js +1 -1
- package/package.json +23 -16
package/LICENSE
CHANGED
|
@@ -10,15 +10,19 @@ This license covers everything in this repository, the package `awaitio` and eve
|
|
|
10
10
|
|
|
11
11
|
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.
|
|
12
12
|
|
|
13
|
+
## Organization
|
|
14
|
+
|
|
15
|
+
Your "organization" is you, if you are an individual, or the legal entity that uses AwaitIO, together with every entity that controls it, is controlled by it or is under common control with it. "Control" means owning more than 50% of the voting shares or other ownership interest, or having the power to direct the entity's management. Users are counted across the whole organization: entities in one group count their users together and cannot each use the Free License separately.
|
|
16
|
+
|
|
13
17
|
## Free License
|
|
14
18
|
|
|
15
19
|
### Who is eligible
|
|
16
20
|
|
|
17
21
|
You may use AwaitIO for free if you are:
|
|
18
22
|
|
|
19
|
-
- an individual or a for-profit organization with up to 3 users;
|
|
23
|
+
- an individual, including a sole trader or a freelancer, or a for-profit organization, in each case with up to 3 users;
|
|
20
24
|
- a non-profit or not-for-profit organization, or an educational institution; or
|
|
21
|
-
- evaluating whether AwaitIO fits your needs, and not
|
|
25
|
+
- evaluating whether AwaitIO fits your needs, with any number of users, for 30 days from your organization's first use of AwaitIO. The evaluation period is counted once per organization and does not start again with a new application, environment or version. After it ends, an organization that is not eligible for the Free License otherwise needs a Company License or an Enterprise agreement to keep using AwaitIO.
|
|
22
26
|
|
|
23
27
|
### What you may do
|
|
24
28
|
|
|
@@ -30,24 +34,36 @@ If you are eligible, you are granted permission, free of charge, to:
|
|
|
30
34
|
|
|
31
35
|
## Company License
|
|
32
36
|
|
|
33
|
-
|
|
37
|
+
An individual or a for-profit organization with more than 3 users needs a Company License to use AwaitIO. It allows the same use as the Free License, in any number of applications and environments. Its price depends on the number of users:
|
|
38
|
+
|
|
39
|
+
- 4 to 10 users: 50 USD per month per organization;
|
|
40
|
+
- 11 to 50 users: 250 USD per month per organization.
|
|
41
|
+
|
|
42
|
+
An individual or a for-profit organization with more than 50 users needs an Enterprise agreement instead of a Company License (see below).
|
|
34
43
|
|
|
35
|
-
|
|
44
|
+
To get one, sponsor AwaitIO on GitHub Sponsors (https://github.com/sponsors/awaitio) with the monthly Company License tier for your number of users, from your organization's GitHub account or on its behalf. The Company License is valid for as long as the monthly sponsorship is active; when it ends, so does the Company License. When your organization grows past 10 users, move to the higher tier; when it grows past 50 users, agree on an Enterprise agreement.
|
|
45
|
+
|
|
46
|
+
The Licensor issues an invoice for every payment on request: write to license@awaitio.com with your organization's billing details. For more than 50 users, a written contract, a service-level agreement, priority support or other custom terms, write to the same address to agree on an Enterprise agreement.
|
|
47
|
+
|
|
48
|
+
Eligibility is decided by the organization that runs the application. 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. People who only develop, test or demonstrate an application for a client, such as the developers of an agency or a freelancer, are not users of it and do not count towards their own organization either. Whoever runs the application for its users pays: if you run it for your client yourself, for example as a hosted back office, its users count as yours. An agency or a freelancer may get the client's Company License on the client's behalf, for example as part of its own price: the license then covers the client, in the tier for the client's number of users, for as long as the sponsorship for it is active.
|
|
36
49
|
|
|
37
50
|
## Same software, honor system
|
|
38
51
|
|
|
39
52
|
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.
|
|
40
53
|
|
|
54
|
+
## Sponsoring
|
|
55
|
+
|
|
56
|
+
Anyone may sponsor AwaitIO on GitHub Sponsors, once or monthly, with any amount, to support its development. A sponsorship other than a monthly Company License tier is a gift and does not grant a Company License.
|
|
57
|
+
|
|
41
58
|
## What nobody may do
|
|
42
59
|
|
|
43
60
|
Whatever your license, without a separate written agreement with the Licensor you may not:
|
|
44
61
|
|
|
45
62
|
1. copy or modify AwaitIO in order to sell, rent, license, relicense or sublicense AwaitIO itself or your own derivative or fork of it;
|
|
46
|
-
2. offer AwaitIO, or a derivative or fork of it, to third parties as a
|
|
47
|
-
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
|
|
48
|
-
4. sell or license to third parties components, plugins or extensions made for AwaitIO.
|
|
63
|
+
2. offer AwaitIO, or a derivative or fork of it, to third parties as a framework, builder or platform for making internal tools, admin panels or back offices, that is, a product whose main purpose is to let others build their own applications;
|
|
64
|
+
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.
|
|
49
65
|
|
|
50
|
-
Building applications with AwaitIO, running them and handing them over to your clients is none of the above.
|
|
66
|
+
Building applications with AwaitIO, running them and handing them over to your clients is none of the above. An application with its own purpose, such as the back office of a particular business, or the same application delivered to many clients, is not a framework, builder or platform under point 2, even when it is built with AwaitIO. Neither is making your own components, plugins or extensions for AwaitIO and sharing, selling or licensing them, as long as they do not include AwaitIO itself or a modified copy of it.
|
|
51
67
|
|
|
52
68
|
## Changes to this license
|
|
53
69
|
|
|
@@ -59,6 +75,20 @@ If you do not agree with the license of a newer version, you may keep using the
|
|
|
59
75
|
|
|
60
76
|
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.
|
|
61
77
|
|
|
78
|
+
## Questions and license confirmation
|
|
79
|
+
|
|
80
|
+
If you are not sure whether or which license you need, for example how to count your users or whether your use is allowed, write to license@awaitio.com before you decide; the Licensor will answer in writing. If you need a confirmation that your organization holds a valid license, for example for an audit, a client or a procurement process, write to the same address and the Licensor will confirm in writing which license your organization holds and for how long it is valid.
|
|
81
|
+
|
|
82
|
+
## Governing law
|
|
83
|
+
|
|
84
|
+
This license and every dispute arising from it or in connection with AwaitIO are governed by the laws of the Czech Republic, excluding its conflict-of-laws rules and the United Nations Convention on Contracts for the International Sale of Goods. The courts of the Czech Republic with jurisdiction for Prague have exclusive jurisdiction, unless mandatory law gives a consumer the right to sue in the courts of their own country.
|
|
85
|
+
|
|
62
86
|
## Support
|
|
63
87
|
|
|
64
|
-
Support is provided
|
|
88
|
+
Support is provided through GitHub issues:
|
|
89
|
+
|
|
90
|
+
- under the Free License, on a best-effort basis;
|
|
91
|
+
- under a Company License, standard support with a first response within 3 working days;
|
|
92
|
+
- under an Enterprise agreement, priority support with a first response within 12 hours on working days, unless the agreement says otherwise.
|
|
93
|
+
|
|
94
|
+
Working days are business days in the Czech Republic. The response times are targets, not a service-level agreement; an Enterprise agreement may add one.
|
package/README.md
ADDED
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
# @awaitio/theme-default
|
|
2
|
+
|
|
3
|
+
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.
|
|
4
|
+
|
|
5
|
+

|
|
6
|
+
|
|
7
|
+
## Install
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npm install @awaitio/theme-default
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
Needs `awaitio` and `zod` in the app, see the [quickstart](https://docs.awaitio.com/quickstart).
|
|
14
|
+
|
|
15
|
+
## Setup
|
|
16
|
+
|
|
17
|
+
`theme` is required and has no default:
|
|
18
|
+
|
|
19
|
+
```ts
|
|
20
|
+
import { defaultTheme } from '@awaitio/theme-default';
|
|
21
|
+
import { AwaitIO } from 'awaitio';
|
|
22
|
+
|
|
23
|
+
export const app = new AwaitIO({
|
|
24
|
+
// name, actionsDirectory, secret, users, components…
|
|
25
|
+
theme: defaultTheme,
|
|
26
|
+
});
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
## Change one block
|
|
30
|
+
|
|
31
|
+
Spread the theme and replace the blocks you want with blocks of another theme package:
|
|
32
|
+
|
|
33
|
+
```ts
|
|
34
|
+
theme: { ...defaultTheme, Label: myTheme.Label },
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
Writing your own blocks is on the [Theme docs page](https://docs.awaitio.com/core/theme).
|
|
@@ -0,0 +1 @@
|
|
|
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"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.Badge = void 0;
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
// Whole class names, so Tailwind finds them in the source.
|
|
6
|
+
const colorClassNames = {
|
|
7
|
+
red: 'bg-red-100 text-red-800',
|
|
8
|
+
orange: 'bg-orange-100 text-orange-800',
|
|
9
|
+
yellow: 'bg-yellow-100 text-yellow-800',
|
|
10
|
+
green: 'bg-green-100 text-green-800',
|
|
11
|
+
blue: 'bg-blue-100 text-blue-800',
|
|
12
|
+
purple: 'bg-purple-100 text-purple-800',
|
|
13
|
+
pink: 'bg-pink-100 text-pink-800',
|
|
14
|
+
gray: 'bg-gray-100 text-gray-700',
|
|
15
|
+
};
|
|
16
|
+
// A small rounded label in a soft background of its color.
|
|
17
|
+
const Badge = ({ color, children }) => {
|
|
18
|
+
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 });
|
|
19
|
+
};
|
|
20
|
+
exports.Badge = Badge;
|
|
@@ -0,0 +1 @@
|
|
|
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"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.ButtonRow = void 0;
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
// Buttons next to each other with a small gap, wrapping on a narrow screen.
|
|
6
|
+
const ButtonRow = ({ children }) => {
|
|
7
|
+
return (0, jsx_runtime_1.jsx)("div", { className: "flex flex-wrap gap-2", children: children });
|
|
8
|
+
};
|
|
9
|
+
exports.ButtonRow = ButtonRow;
|
|
@@ -0,0 +1 @@
|
|
|
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"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.Checkbox = void 0;
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
const ui_1 = require("awaitio/ui");
|
|
6
|
+
// A checkbox with its text to the right; its id comes from the Field, so the label above toggles it as well.
|
|
7
|
+
const Checkbox = ({ checked, onChange, text, disabled, autoFocus }) => {
|
|
8
|
+
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) => {
|
|
9
|
+
onChange(event.target.checked);
|
|
10
|
+
}, className: "size-4 accent-gray-900" }), text] }));
|
|
11
|
+
};
|
|
12
|
+
exports.Checkbox = Checkbox;
|
|
@@ -1 +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,
|
|
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
CHANGED
|
@@ -6,8 +6,8 @@ const ui_1 = require("awaitio/ui");
|
|
|
6
6
|
const react_1 = require("react");
|
|
7
7
|
// Label, control, help text and error of one form field. The SDK wraps every component in it unless the component
|
|
8
8
|
// sets `wrap: false`; a component drawing its own layout can use it directly too.
|
|
9
|
-
const Field = ({ label, helpText, error, children }) => {
|
|
9
|
+
const Field = ({ label, helpText, optional, error, children }) => {
|
|
10
10
|
const id = (0, react_1.useId)();
|
|
11
|
-
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.
|
|
11
|
+
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 }))] }) }));
|
|
12
12
|
};
|
|
13
13
|
exports.Field = Field;
|
|
@@ -1 +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,
|
|
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
CHANGED
|
@@ -2,8 +2,11 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.Heading = void 0;
|
|
4
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
-
// The title of one block of a page, e.g. above a table.
|
|
6
|
-
const Heading = ({ children, description }) => {
|
|
7
|
-
|
|
5
|
+
// The title of one block of a page, e.g. above a table; level 2 is a bigger section title with room above it.
|
|
6
|
+
const Heading = ({ children, description, level = 3 }) => {
|
|
7
|
+
if (level === 2) {
|
|
8
|
+
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 })] }));
|
|
9
|
+
}
|
|
10
|
+
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 })] }));
|
|
8
11
|
};
|
|
9
12
|
exports.Heading = Heading;
|
|
@@ -0,0 +1 @@
|
|
|
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"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.Image = void 0;
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
// A picture with a thin border, kept within the width of the page and, with a size, within that height.
|
|
6
|
+
const Image = ({ src, alt, size }) => {
|
|
7
|
+
const sizeClassName = { thumbnail: 'max-h-16', small: 'max-h-32', medium: 'max-h-64', large: 'max-h-96' }[size ?? 'large'];
|
|
8
|
+
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(' ') });
|
|
9
|
+
};
|
|
10
|
+
exports.Image = Image;
|
|
@@ -1 +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,
|
|
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
CHANGED
|
@@ -5,7 +5,10 @@ const jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
5
5
|
const ui_1 = require("awaitio/ui");
|
|
6
6
|
// 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
|
|
7
7
|
// a modifier key opens a new tab as usual.
|
|
8
|
-
const Link = ({ href, children, className = 'text-blue-600 underline-offset-2 hover:text-blue-800 hover:underline' }) => {
|
|
8
|
+
const Link = ({ href, children, external = false, className = 'text-blue-600 underline-offset-2 hover:text-blue-800 hover:underline' }) => {
|
|
9
|
+
if (external) {
|
|
10
|
+
return ((0, jsx_runtime_1.jsx)("a", { href: href, target: "_blank", rel: "noopener noreferrer", className: className, children: children }));
|
|
11
|
+
}
|
|
9
12
|
return ((0, jsx_runtime_1.jsx)("a", { href: href, className: className, onClick: (event) => {
|
|
10
13
|
if (event.metaKey || event.ctrlKey || event.shiftKey || event.button !== 0) {
|
|
11
14
|
return;
|
package/dist/blocks/Metadata.js
CHANGED
|
@@ -4,8 +4,8 @@ exports.Metadata = void 0;
|
|
|
4
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
5
|
// Label and value tiles in a grid, e.g. "Total accounts 542" above a table.
|
|
6
6
|
const Metadata = ({ items }) => {
|
|
7
|
-
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) => {
|
|
8
|
-
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 })] },
|
|
7
|
+
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) => {
|
|
8
|
+
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));
|
|
9
9
|
}) }));
|
|
10
10
|
};
|
|
11
11
|
exports.Metadata = Metadata;
|
|
@@ -0,0 +1 @@
|
|
|
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"}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.MultiSelect = void 0;
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
const ui_1 = require("awaitio/ui");
|
|
6
|
+
const SelectArrow_1 = require("../components/SelectArrow");
|
|
7
|
+
const constants_1 = require("../constants");
|
|
8
|
+
// One frame: the drop-down as a normal control on top, the chosen options under it, a row each with a × on the right.
|
|
9
|
+
const MultiSelect = ({ choices, value, onChange, placeholder = 'Add…', isFull = false, disabled, autoFocus }) => {
|
|
10
|
+
const remaining = choices.filter((choice) => {
|
|
11
|
+
return !value.includes(choice.value);
|
|
12
|
+
});
|
|
13
|
+
const chosen = choices.filter((choice) => {
|
|
14
|
+
return value.includes(choice.value);
|
|
15
|
+
});
|
|
16
|
+
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) => {
|
|
17
|
+
onChange([...value, event.target.value]);
|
|
18
|
+
}, className: constants_1.constants.SELECT_CLASS_NAME, children: [(0, jsx_runtime_1.jsx)("option", { value: "", disabled: true, children: placeholder }), remaining.map((choice) => {
|
|
19
|
+
return ((0, jsx_runtime_1.jsx)("option", { value: choice.value, children: choice.label }, choice.value));
|
|
20
|
+
})] }), (0, jsx_runtime_1.jsx)(SelectArrow_1.SelectArrow, {})] }) }), chosen.map((choice) => {
|
|
21
|
+
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: () => {
|
|
22
|
+
onChange(value.filter((candidate) => {
|
|
23
|
+
return candidate !== choice.value;
|
|
24
|
+
}));
|
|
25
|
+
}, 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));
|
|
26
|
+
})] }));
|
|
27
|
+
};
|
|
28
|
+
exports.MultiSelect = MultiSelect;
|
|
@@ -0,0 +1 @@
|
|
|
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"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.Prose = void 0;
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
// Styles the plain elements markdown turns into, so text from io.display.markdown reads like the rest of the app.
|
|
6
|
+
const Prose = ({ children }) => {
|
|
7
|
+
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 }));
|
|
8
|
+
};
|
|
9
|
+
exports.Prose = Prose;
|
|
@@ -1 +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;
|
|
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
CHANGED
|
@@ -3,13 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.Select = void 0;
|
|
4
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
5
|
const ui_1 = require("awaitio/ui");
|
|
6
|
+
const SelectArrow_1 = require("../components/SelectArrow");
|
|
6
7
|
const constants_1 = require("../constants");
|
|
7
8
|
// A native drop-down for one of many options.
|
|
8
9
|
const Select = ({ choices, value, onChange, placeholder = 'Choose…', disabled, autoFocus }) => {
|
|
9
|
-
return ((0, jsx_runtime_1.jsxs)("select", { id: (0, ui_1.useFieldId)(), value: value, disabled: disabled, autoFocus: autoFocus, onChange: (event) => {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
10
|
+
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) => {
|
|
11
|
+
onChange(event.target.value);
|
|
12
|
+
}, className: constants_1.constants.SELECT_CLASS_NAME, children: [(0, jsx_runtime_1.jsx)("option", { value: "", disabled: true, children: placeholder }), choices.map((choice) => {
|
|
13
|
+
return ((0, jsx_runtime_1.jsx)("option", { value: choice.value, children: choice.label }, choice.value));
|
|
14
|
+
})] }), (0, jsx_runtime_1.jsx)(SelectArrow_1.SelectArrow, {})] }));
|
|
14
15
|
};
|
|
15
16
|
exports.Select = Select;
|
|
@@ -1 +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,
|
|
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
CHANGED
|
@@ -8,6 +8,8 @@ const react_1 = require("react");
|
|
|
8
8
|
// Filtering and paging happen in the browser, on the rows the page sent.
|
|
9
9
|
const Table = ({ columns, rows, pageSize = 20, filterable = true, emptyText = 'Nothing to show.', selection }) => {
|
|
10
10
|
const [filter, setFilter] = (0, react_1.useState)('');
|
|
11
|
+
// A locked selection (disabled io.select.table) greys the table out; paging stays, to see what is there.
|
|
12
|
+
const isDisabled = selection?.disabled === true;
|
|
11
13
|
const [page, setPage] = (0, react_1.useState)(0);
|
|
12
14
|
const query = filter.trim().toLowerCase();
|
|
13
15
|
const matching = query
|
|
@@ -23,10 +25,10 @@ const Table = ({ columns, rows, pageSize = 20, filterable = true, emptyText = 'N
|
|
|
23
25
|
});
|
|
24
26
|
const hasToolbar = filterable || matching.length > pageSize;
|
|
25
27
|
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';
|
|
26
|
-
return ((0, jsx_runtime_1.jsxs)("div", { className:
|
|
28
|
+
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) => {
|
|
27
29
|
setFilter(event.target.value);
|
|
28
30
|
setPage(0);
|
|
29
|
-
}, className: "w-full max-w-56 rounded-md border border-gray-300
|
|
31
|
+
}, 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: () => {
|
|
30
32
|
setPage(current - 1);
|
|
31
33
|
}, className: pagerButton, children: "Prev" }), (0, jsx_runtime_1.jsx)("button", { type: "button", disabled: current >= pageCount - 1, onClick: () => {
|
|
32
34
|
setPage(current + 1);
|
|
@@ -0,0 +1 @@
|
|
|
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"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.SelectArrow = void 0;
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
// The chevron of a drop-down, drawn by the theme instead of the browser so it keeps a gap from the right edge.
|
|
6
|
+
const SelectArrow = () => {
|
|
7
|
+
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" }) }));
|
|
8
|
+
};
|
|
9
|
+
exports.SelectArrow = SelectArrow;
|
package/dist/constants.d.ts
CHANGED
package/dist/constants.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,SAAS;
|
|
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
CHANGED
|
@@ -2,6 +2,9 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.constants = void 0;
|
|
4
4
|
exports.constants = {
|
|
5
|
-
// One look for every text-like control, so all inputs of the theme match.
|
|
6
|
-
|
|
5
|
+
// One look for every text-like control, so all inputs of the theme match. The background is set per state
|
|
6
|
+
// (enabled:/disabled:) because a plain bg-white from the SDK's utilities would win over disabled:bg-gray-100.
|
|
7
|
+
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',
|
|
8
|
+
// A drop-down without the browser's arrow; SelectArrow draws one with room on the right.
|
|
9
|
+
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',
|
|
7
10
|
};
|
package/dist/defaultTheme.d.ts
CHANGED
|
@@ -1,14 +1,20 @@
|
|
|
1
1
|
export declare const defaultTheme: import("awaitio").ThemeBlockRefs<{
|
|
2
|
+
Badge: import("react").FC<import("awaitio/ui").BadgeProps>;
|
|
2
3
|
Button: import("react").FC<import("awaitio/ui").ButtonProps>;
|
|
4
|
+
ButtonRow: import("react").FC<import("awaitio/ui").ButtonRowProps>;
|
|
3
5
|
Card: import("react").FC<import("awaitio/ui").CardProps>;
|
|
6
|
+
Checkbox: import("react").FC<import("awaitio/ui").CheckboxProps>;
|
|
4
7
|
ChoiceList: import("react").FC<import("awaitio/ui").ChoiceListProps>;
|
|
5
8
|
Field: import("react").FC<import("awaitio/ui").FieldProps>;
|
|
6
9
|
Heading: import("react").FC<import("awaitio/ui").HeadingProps>;
|
|
7
10
|
Hint: import("react").FC<import("awaitio/ui").HintProps>;
|
|
11
|
+
Image: import("react").FC<import("awaitio/ui").ImageProps>;
|
|
8
12
|
Input: import("react").FC<import("awaitio/ui").InputProps>;
|
|
9
13
|
Label: import("react").FC<import("awaitio/ui").LabelProps>;
|
|
10
14
|
Link: import("react").FC<import("awaitio/ui").LinkProps>;
|
|
11
15
|
Metadata: import("react").FC<import("awaitio/ui").MetadataProps>;
|
|
16
|
+
MultiSelect: import("react").FC<import("awaitio/ui").MultiSelectProps>;
|
|
17
|
+
Prose: import("react").FC<import("awaitio/ui").ProseProps>;
|
|
12
18
|
RowMenu: import("react").FC<import("awaitio/ui").RowMenuProps>;
|
|
13
19
|
Select: import("react").FC<import("awaitio/ui").SelectProps>;
|
|
14
20
|
Table: import("react").FC<import("awaitio/ui").TableProps>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"defaultTheme.d.ts","sourceRoot":"","sources":["../src/defaultTheme.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"defaultTheme.d.ts","sourceRoot":"","sources":["../src/defaultTheme.tsx"],"names":[],"mappings":"AAsBA,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;EAqBvB,CAAC"}
|
package/dist/defaultTheme.js
CHANGED
|
@@ -2,33 +2,43 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.defaultTheme = void 0;
|
|
4
4
|
const awaitio_1 = require("awaitio");
|
|
5
|
+
const Badge_1 = require("./blocks/Badge");
|
|
5
6
|
const Button_1 = require("./blocks/Button");
|
|
7
|
+
const ButtonRow_1 = require("./blocks/ButtonRow");
|
|
6
8
|
const Card_1 = require("./blocks/Card");
|
|
9
|
+
const Checkbox_1 = require("./blocks/Checkbox");
|
|
7
10
|
const ChoiceList_1 = require("./blocks/ChoiceList");
|
|
8
11
|
const Field_1 = require("./blocks/Field");
|
|
9
12
|
const Heading_1 = require("./blocks/Heading");
|
|
10
13
|
const Hint_1 = require("./blocks/Hint");
|
|
14
|
+
const Image_1 = require("./blocks/Image");
|
|
11
15
|
const Input_1 = require("./blocks/Input");
|
|
12
16
|
const Label_1 = require("./blocks/Label");
|
|
13
17
|
const Link_1 = require("./blocks/Link");
|
|
14
18
|
const Metadata_1 = require("./blocks/Metadata");
|
|
19
|
+
const MultiSelect_1 = require("./blocks/MultiSelect");
|
|
20
|
+
const Prose_1 = require("./blocks/Prose");
|
|
15
21
|
const RowMenu_1 = require("./blocks/RowMenu");
|
|
16
22
|
const Select_1 = require("./blocks/Select");
|
|
17
23
|
const Table_1 = require("./blocks/Table");
|
|
18
24
|
const Textarea_1 = require("./blocks/Textarea");
|
|
19
|
-
// The look AwaitIO ships with: every block. Replace single ones with blocks of your own theme:
|
|
20
|
-
// theme: { ...defaultTheme, Label: myTheme.Label }.
|
|
21
25
|
exports.defaultTheme = (0, awaitio_1.defineTheme)({
|
|
26
|
+
Badge: Badge_1.Badge,
|
|
22
27
|
Button: Button_1.Button,
|
|
28
|
+
ButtonRow: ButtonRow_1.ButtonRow,
|
|
23
29
|
Card: Card_1.Card,
|
|
30
|
+
Checkbox: Checkbox_1.Checkbox,
|
|
24
31
|
ChoiceList: ChoiceList_1.ChoiceList,
|
|
25
32
|
Field: Field_1.Field,
|
|
26
33
|
Heading: Heading_1.Heading,
|
|
27
34
|
Hint: Hint_1.Hint,
|
|
35
|
+
Image: Image_1.Image,
|
|
28
36
|
Input: Input_1.Input,
|
|
29
37
|
Label: Label_1.Label,
|
|
30
38
|
Link: Link_1.Link,
|
|
31
39
|
Metadata: Metadata_1.Metadata,
|
|
40
|
+
MultiSelect: MultiSelect_1.MultiSelect,
|
|
41
|
+
Prose: Prose_1.Prose,
|
|
32
42
|
RowMenu: RowMenu_1.RowMenu,
|
|
33
43
|
Select: Select_1.Select,
|
|
34
44
|
Table: Table_1.Table,
|
package/dist/ui/ui.css
CHANGED
|
@@ -1 +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}
|
|
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
CHANGED
|
@@ -1 +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);
|
|
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
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@awaitio/theme-default",
|
|
3
|
-
"version": "0.0
|
|
3
|
+
"version": "1.0.0",
|
|
4
4
|
"description": "The default look of AwaitIO: every block of awaitio/ui, with its styles.",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -8,21 +8,18 @@
|
|
|
8
8
|
"files": [
|
|
9
9
|
"dist"
|
|
10
10
|
],
|
|
11
|
-
"scripts": {
|
|
12
|
-
"build": "rm -rf dist && tsc -p tsconfig.build.json && vite build",
|
|
13
|
-
"dev": "tsc -p tsconfig.build.json --watch --preserveWatchOutput & vite build --watch",
|
|
14
|
-
"tsc": "tsc --noEmit",
|
|
15
|
-
"lint": "eslint .",
|
|
16
|
-
"lint:fix": "eslint . --fix",
|
|
17
|
-
"test": "vitest run",
|
|
18
|
-
"release": "pnpm build && pnpm publish --access public --no-git-checks"
|
|
19
|
-
},
|
|
20
11
|
"peerDependencies": {
|
|
21
|
-
"
|
|
12
|
+
"@types/react": "^19.0.0",
|
|
13
|
+
"zod": "^3.25.0 || ^4.0.0",
|
|
14
|
+
"awaitio": "^1.0.0"
|
|
15
|
+
},
|
|
16
|
+
"peerDependenciesMeta": {
|
|
17
|
+
"@types/react": {
|
|
18
|
+
"optional": true
|
|
19
|
+
}
|
|
22
20
|
},
|
|
23
21
|
"dependencies": {
|
|
24
|
-
"react": "^19.1.0"
|
|
25
|
-
"zod": "3.22.4"
|
|
22
|
+
"react": "^19.1.0"
|
|
26
23
|
},
|
|
27
24
|
"devDependencies": {
|
|
28
25
|
"@tailwindcss/vite": "^4.1.0",
|
|
@@ -30,10 +27,20 @@
|
|
|
30
27
|
"@types/react": "^19.1.0",
|
|
31
28
|
"@typescript/native": "npm:typescript@^7.0.2",
|
|
32
29
|
"@vitejs/plugin-react": "^5.0.0",
|
|
33
|
-
"awaitio": "workspace:*",
|
|
34
30
|
"tailwindcss": "^4.1.0",
|
|
35
31
|
"typescript": "npm:@typescript/typescript6@^6.0.2",
|
|
36
32
|
"vite": "^7.1.0",
|
|
37
|
-
"vitest": "^3.2.0"
|
|
33
|
+
"vitest": "^3.2.0",
|
|
34
|
+
"zod": "^4.3.6",
|
|
35
|
+
"awaitio": "1.0.0"
|
|
36
|
+
},
|
|
37
|
+
"scripts": {
|
|
38
|
+
"build": "rm -rf dist && tsc -p tsconfig.build.json && vite build",
|
|
39
|
+
"dev": "tsc -p tsconfig.build.json --watch --preserveWatchOutput & vite build --watch",
|
|
40
|
+
"tsc": "tsc --noEmit",
|
|
41
|
+
"lint": "eslint .",
|
|
42
|
+
"lint:fix": "eslint . --fix",
|
|
43
|
+
"test": "vitest run",
|
|
44
|
+
"release": "pnpm build && pnpm publish --access public --no-git-checks"
|
|
38
45
|
}
|
|
39
|
-
}
|
|
46
|
+
}
|