poseui 0.0.1
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/README.md +109 -0
- package/dist/index.d.ts +824 -0
- package/dist/index.js +518 -0
- package/package.json +40 -0
package/dist/index.js
ADDED
|
@@ -0,0 +1,518 @@
|
|
|
1
|
+
//#region src/index.ts
|
|
2
|
+
var PoseValidationError = class extends Error {
|
|
3
|
+
issues;
|
|
4
|
+
constructor(issues) {
|
|
5
|
+
const summary = issues.map((i) => {
|
|
6
|
+
const path = i.path?.map((p) => typeof p === "object" ? p.key : p).join(".");
|
|
7
|
+
return path ? `${path}: ${i.message}` : i.message;
|
|
8
|
+
}).join("; ");
|
|
9
|
+
super(`Pose validation failed — ${summary}`);
|
|
10
|
+
this.name = "PoseValidationError";
|
|
11
|
+
this.issues = issues;
|
|
12
|
+
}
|
|
13
|
+
};
|
|
14
|
+
function runSchema(schema, value) {
|
|
15
|
+
const result = schema["~standard"].validate(value);
|
|
16
|
+
if (result instanceof Promise) return result.then(unwrapResult);
|
|
17
|
+
return unwrapResult(result);
|
|
18
|
+
}
|
|
19
|
+
function unwrapResult(result) {
|
|
20
|
+
if (result.issues !== void 0) throw new PoseValidationError(result.issues);
|
|
21
|
+
return result.value;
|
|
22
|
+
}
|
|
23
|
+
function tw(prefix, value) {
|
|
24
|
+
return `${prefix}-${value}`;
|
|
25
|
+
}
|
|
26
|
+
function arbitrary(value) {
|
|
27
|
+
return /^[\w./#%-]+$/.test(value) ? value : `[${value}]`;
|
|
28
|
+
}
|
|
29
|
+
function resolveClasses(classes, props) {
|
|
30
|
+
return classes.map((c) => typeof c === "function" ? c(props) : c).filter(Boolean).join(" ");
|
|
31
|
+
}
|
|
32
|
+
function renderChild(child, props) {
|
|
33
|
+
if (typeof child === "function") return renderChild(child(props), props);
|
|
34
|
+
if (Array.isArray(child)) return child.map((c) => renderChild(c, props)).join("");
|
|
35
|
+
if (child != null && typeof child === "object" && "__pose" in child) return child(props);
|
|
36
|
+
return child == null ? "" : String(child);
|
|
37
|
+
}
|
|
38
|
+
/** A tagless builder used inside .when() callbacks — only accumulates classes. */
|
|
39
|
+
function createBlankBuilder() {
|
|
40
|
+
return createBuilder({
|
|
41
|
+
tag: "div",
|
|
42
|
+
classes: [],
|
|
43
|
+
children: [],
|
|
44
|
+
schema: void 0
|
|
45
|
+
});
|
|
46
|
+
}
|
|
47
|
+
function createBuilder(state) {
|
|
48
|
+
function derive(extraClasses = [], extraChildren = []) {
|
|
49
|
+
return createBuilder({
|
|
50
|
+
...state,
|
|
51
|
+
classes: [...state.classes, ...extraClasses],
|
|
52
|
+
children: [...state.children, ...extraChildren]
|
|
53
|
+
});
|
|
54
|
+
}
|
|
55
|
+
function cls(name) {
|
|
56
|
+
return derive([name]);
|
|
57
|
+
}
|
|
58
|
+
function dynCls(raw, map) {
|
|
59
|
+
if (typeof raw === "function") {
|
|
60
|
+
const fn = raw;
|
|
61
|
+
return derive([(props) => map(fn(props))]);
|
|
62
|
+
}
|
|
63
|
+
return derive([map(raw)]);
|
|
64
|
+
}
|
|
65
|
+
function buildHtml(resolvedProps) {
|
|
66
|
+
const classStr = resolveClasses(state.classes, resolvedProps);
|
|
67
|
+
const childrenStr = state.children.map((c) => renderChild(c, resolvedProps)).join("");
|
|
68
|
+
const classAttr = classStr ? ` class="${classStr}"` : "";
|
|
69
|
+
return `<${state.tag}${classAttr}>${childrenStr}</${state.tag}>`;
|
|
70
|
+
}
|
|
71
|
+
function render(...args) {
|
|
72
|
+
const props = args[0] ?? {};
|
|
73
|
+
if (!state.schema) return buildHtml(props);
|
|
74
|
+
const result = runSchema(state.schema, props);
|
|
75
|
+
if (result instanceof Promise) return result.then((v) => buildHtml(v));
|
|
76
|
+
return buildHtml(result);
|
|
77
|
+
}
|
|
78
|
+
render.__pose = true;
|
|
79
|
+
const el = render;
|
|
80
|
+
Object.defineProperty(el, "classes", {
|
|
81
|
+
get: () => state.classes,
|
|
82
|
+
enumerable: true
|
|
83
|
+
});
|
|
84
|
+
el.input = (schema) => createBuilder({
|
|
85
|
+
tag: state.tag,
|
|
86
|
+
classes: state.classes,
|
|
87
|
+
children: state.children,
|
|
88
|
+
schema
|
|
89
|
+
});
|
|
90
|
+
el.block = () => cls("block");
|
|
91
|
+
el.inline = () => cls("inline");
|
|
92
|
+
el.inline_block = () => cls("inline-block");
|
|
93
|
+
el.flex = () => cls("flex");
|
|
94
|
+
el.inline_flex = () => cls("inline-flex");
|
|
95
|
+
el.grid = () => cls("grid");
|
|
96
|
+
el.inline_grid = () => cls("inline-grid");
|
|
97
|
+
el.flow_root = () => cls("flow-root");
|
|
98
|
+
el.hidden = () => cls("hidden");
|
|
99
|
+
el.contents = () => cls("contents");
|
|
100
|
+
el.table = () => cls("table");
|
|
101
|
+
el.table_caption = () => cls("table-caption");
|
|
102
|
+
el.table_cell = () => cls("table-cell");
|
|
103
|
+
el.table_column = () => cls("table-column");
|
|
104
|
+
el.table_column_group = () => cls("table-column-group");
|
|
105
|
+
el.table_footer_group = () => cls("table-footer-group");
|
|
106
|
+
el.table_header_group = () => cls("table-header-group");
|
|
107
|
+
el.table_row_group = () => cls("table-row-group");
|
|
108
|
+
el.table_row = () => cls("table-row");
|
|
109
|
+
el.flex_row = () => cls("flex-row");
|
|
110
|
+
el.flex_row_reverse = () => cls("flex-row-reverse");
|
|
111
|
+
el.flex_col = () => cls("flex-col");
|
|
112
|
+
el.flex_col_reverse = () => cls("flex-col-reverse");
|
|
113
|
+
el.flex_wrap = () => cls("flex-wrap");
|
|
114
|
+
el.flex_wrap_reverse = () => cls("flex-wrap-reverse");
|
|
115
|
+
el.flex_nowrap = () => cls("flex-nowrap");
|
|
116
|
+
el.flex_1 = () => cls("flex-1");
|
|
117
|
+
el.flex_auto = () => cls("flex-auto");
|
|
118
|
+
el.flex_initial = () => cls("flex-initial");
|
|
119
|
+
el.flex_none = () => cls("flex-none");
|
|
120
|
+
el.grow = () => cls("grow");
|
|
121
|
+
el.grow_0 = () => cls("grow-0");
|
|
122
|
+
el.shrink = () => cls("shrink");
|
|
123
|
+
el.shrink_0 = () => cls("shrink-0");
|
|
124
|
+
el.order = (n) => dynCls(n, (v) => tw("order", v));
|
|
125
|
+
el.order_first = () => cls("order-first");
|
|
126
|
+
el.order_last = () => cls("order-last");
|
|
127
|
+
el.order_none = () => cls("order-none");
|
|
128
|
+
el.grid_cols = (n) => dynCls(n, (v) => tw("grid-cols", v));
|
|
129
|
+
el.grid_rows = (n) => dynCls(n, (v) => tw("grid-rows", v));
|
|
130
|
+
el.col_span = (n) => dynCls(n, (v) => tw("col-span", v));
|
|
131
|
+
el.col_start = (n) => dynCls(n, (v) => tw("col-start", v));
|
|
132
|
+
el.col_end = (n) => dynCls(n, (v) => tw("col-end", v));
|
|
133
|
+
el.row_span = (n) => dynCls(n, (v) => tw("row-span", v));
|
|
134
|
+
el.row_start = (n) => dynCls(n, (v) => tw("row-start", v));
|
|
135
|
+
el.row_end = (n) => dynCls(n, (v) => tw("row-end", v));
|
|
136
|
+
el.grid_flow_row = () => cls("grid-flow-row");
|
|
137
|
+
el.grid_flow_col = () => cls("grid-flow-col");
|
|
138
|
+
el.grid_flow_dense = () => cls("grid-flow-dense");
|
|
139
|
+
el.auto_cols = (v) => dynCls(v, (s) => tw("auto-cols", s));
|
|
140
|
+
el.auto_rows = (v) => dynCls(v, (s) => tw("auto-rows", s));
|
|
141
|
+
el.justify_start = () => cls("justify-start");
|
|
142
|
+
el.justify_end = () => cls("justify-end");
|
|
143
|
+
el.justify_center = () => cls("justify-center");
|
|
144
|
+
el.justify_between = () => cls("justify-between");
|
|
145
|
+
el.justify_around = () => cls("justify-around");
|
|
146
|
+
el.justify_evenly = () => cls("justify-evenly");
|
|
147
|
+
el.justify_items_start = () => cls("justify-items-start");
|
|
148
|
+
el.justify_items_end = () => cls("justify-items-end");
|
|
149
|
+
el.justify_items_center = () => cls("justify-items-center");
|
|
150
|
+
el.justify_items_stretch = () => cls("justify-items-stretch");
|
|
151
|
+
el.justify_self_auto = () => cls("justify-self-auto");
|
|
152
|
+
el.justify_self_start = () => cls("justify-self-start");
|
|
153
|
+
el.justify_self_end = () => cls("justify-self-end");
|
|
154
|
+
el.justify_self_center = () => cls("justify-self-center");
|
|
155
|
+
el.justify_self_stretch = () => cls("justify-self-stretch");
|
|
156
|
+
el.items_start = () => cls("items-start");
|
|
157
|
+
el.items_end = () => cls("items-end");
|
|
158
|
+
el.items_center = () => cls("items-center");
|
|
159
|
+
el.items_stretch = () => cls("items-stretch");
|
|
160
|
+
el.items_baseline = () => cls("items-baseline");
|
|
161
|
+
el.self_auto = () => cls("self-auto");
|
|
162
|
+
el.self_start = () => cls("self-start");
|
|
163
|
+
el.self_end = () => cls("self-end");
|
|
164
|
+
el.self_center = () => cls("self-center");
|
|
165
|
+
el.self_stretch = () => cls("self-stretch");
|
|
166
|
+
el.self_baseline = () => cls("self-baseline");
|
|
167
|
+
el.content_start = () => cls("content-start");
|
|
168
|
+
el.content_end = () => cls("content-end");
|
|
169
|
+
el.content_center = () => cls("content-center");
|
|
170
|
+
el.content_between = () => cls("content-between");
|
|
171
|
+
el.content_around = () => cls("content-around");
|
|
172
|
+
el.content_evenly = () => cls("content-evenly");
|
|
173
|
+
el.place_content = (v) => dynCls(v, (s) => tw("place-content", s));
|
|
174
|
+
el.place_items = (v) => dynCls(v, (s) => tw("place-items", s));
|
|
175
|
+
el.place_self = (v) => dynCls(v, (s) => tw("place-self", s));
|
|
176
|
+
el.gap = (n) => dynCls(n, (v) => tw("gap", v));
|
|
177
|
+
el.gap_0 = () => cls("gap-0");
|
|
178
|
+
el.gap_1 = () => cls("gap-1");
|
|
179
|
+
el.gap_2 = () => cls("gap-2");
|
|
180
|
+
el.gap_3 = () => cls("gap-3");
|
|
181
|
+
el.gap_4 = () => cls("gap-4");
|
|
182
|
+
el.gap_5 = () => cls("gap-5");
|
|
183
|
+
el.gap_6 = () => cls("gap-6");
|
|
184
|
+
el.gap_7 = () => cls("gap-7");
|
|
185
|
+
el.gap_8 = () => cls("gap-8");
|
|
186
|
+
el.gap_x = (n) => dynCls(n, (v) => tw("gap-x", v));
|
|
187
|
+
el.gap_y = (n) => dynCls(n, (v) => tw("gap-y", v));
|
|
188
|
+
el.space_x = (n) => dynCls(n, (v) => tw("space-x", v));
|
|
189
|
+
el.space_y = (n) => dynCls(n, (v) => tw("space-y", v));
|
|
190
|
+
el.space_x_reverse = () => cls("space-x-reverse");
|
|
191
|
+
el.space_y_reverse = () => cls("space-y-reverse");
|
|
192
|
+
el.p = (n) => dynCls(n, (v) => tw("p", v));
|
|
193
|
+
el.px = (n) => dynCls(n, (v) => tw("px", v));
|
|
194
|
+
el.py = (n) => dynCls(n, (v) => tw("py", v));
|
|
195
|
+
el.pt = (n) => dynCls(n, (v) => tw("pt", v));
|
|
196
|
+
el.pr = (n) => dynCls(n, (v) => tw("pr", v));
|
|
197
|
+
el.pb = (n) => dynCls(n, (v) => tw("pb", v));
|
|
198
|
+
el.pl = (n) => dynCls(n, (v) => tw("pl", v));
|
|
199
|
+
el.m = (n) => dynCls(n, (v) => tw("m", v));
|
|
200
|
+
el.mx = (n) => dynCls(n, (v) => tw("mx", v));
|
|
201
|
+
el.my = (n) => dynCls(n, (v) => tw("my", v));
|
|
202
|
+
el.mt = (n) => dynCls(n, (v) => tw("mt", v));
|
|
203
|
+
el.mr = (n) => dynCls(n, (v) => tw("mr", v));
|
|
204
|
+
el.mb = (n) => dynCls(n, (v) => tw("mb", v));
|
|
205
|
+
el.ml = (n) => dynCls(n, (v) => tw("ml", v));
|
|
206
|
+
el.m_auto = () => cls("m-auto");
|
|
207
|
+
el.mx_auto = () => cls("mx-auto");
|
|
208
|
+
el.my_auto = () => cls("my-auto");
|
|
209
|
+
el.size = (n) => dynCls(n, (v) => tw("size", v));
|
|
210
|
+
el.w = (n) => dynCls(n, (v) => tw("w", v));
|
|
211
|
+
el.w_full = () => cls("w-full");
|
|
212
|
+
el.w_screen = () => cls("w-screen");
|
|
213
|
+
el.w_min = () => cls("w-min");
|
|
214
|
+
el.w_max = () => cls("w-max");
|
|
215
|
+
el.w_fit = () => cls("w-fit");
|
|
216
|
+
el.h = (n) => dynCls(n, (v) => tw("h", v));
|
|
217
|
+
el.h_full = () => cls("h-full");
|
|
218
|
+
el.h_screen = () => cls("h-screen");
|
|
219
|
+
el.h_min = () => cls("h-min");
|
|
220
|
+
el.h_max = () => cls("h-max");
|
|
221
|
+
el.h_fit = () => cls("h-fit");
|
|
222
|
+
el.min_w = (n) => dynCls(n, (v) => tw("min-w", v));
|
|
223
|
+
el.max_w = (n) => dynCls(n, (v) => tw("max-w", v));
|
|
224
|
+
el.min_h = (n) => dynCls(n, (v) => tw("min-h", v));
|
|
225
|
+
el.max_h = (n) => dynCls(n, (v) => tw("max-h", v));
|
|
226
|
+
el.aspect = (v) => dynCls(v, (s) => tw("aspect", s));
|
|
227
|
+
el.aspect_auto = () => cls("aspect-auto");
|
|
228
|
+
el.aspect_square = () => cls("aspect-square");
|
|
229
|
+
el.aspect_video = () => cls("aspect-video");
|
|
230
|
+
el.static_pos = () => cls("static");
|
|
231
|
+
el.relative = () => cls("relative");
|
|
232
|
+
el.absolute = () => cls("absolute");
|
|
233
|
+
el.fixed = () => cls("fixed");
|
|
234
|
+
el.sticky = () => cls("sticky");
|
|
235
|
+
el.inset = (n) => dynCls(n, (v) => tw("inset", v));
|
|
236
|
+
el.inset_0 = () => cls("inset-0");
|
|
237
|
+
el.inset_x = (n) => dynCls(n, (v) => tw("inset-x", v));
|
|
238
|
+
el.inset_y = (n) => dynCls(n, (v) => tw("inset-y", v));
|
|
239
|
+
el.top = (n) => dynCls(n, (v) => tw("top", v));
|
|
240
|
+
el.right = (n) => dynCls(n, (v) => tw("right", v));
|
|
241
|
+
el.bottom = (n) => dynCls(n, (v) => tw("bottom", v));
|
|
242
|
+
el.left = (n) => dynCls(n, (v) => tw("left", v));
|
|
243
|
+
el.z = (n) => dynCls(n, (v) => tw("z", v));
|
|
244
|
+
el.visible = () => cls("visible");
|
|
245
|
+
el.invisible = () => cls("invisible");
|
|
246
|
+
el.float_left = () => cls("float-left");
|
|
247
|
+
el.float_right = () => cls("float-right");
|
|
248
|
+
el.float_none = () => cls("float-none");
|
|
249
|
+
el.clear_left = () => cls("clear-left");
|
|
250
|
+
el.clear_right = () => cls("clear-right");
|
|
251
|
+
el.clear_both = () => cls("clear-both");
|
|
252
|
+
el.clear_none = () => cls("clear-none");
|
|
253
|
+
el.box_border = () => cls("box-border");
|
|
254
|
+
el.box_content = () => cls("box-content");
|
|
255
|
+
el.overflow_auto = () => cls("overflow-auto");
|
|
256
|
+
el.overflow_hidden = () => cls("overflow-hidden");
|
|
257
|
+
el.overflow_clip = () => cls("overflow-clip");
|
|
258
|
+
el.overflow_visible = () => cls("overflow-visible");
|
|
259
|
+
el.overflow_scroll = () => cls("overflow-scroll");
|
|
260
|
+
el.overflow_x_auto = () => cls("overflow-x-auto");
|
|
261
|
+
el.overflow_x_hidden = () => cls("overflow-x-hidden");
|
|
262
|
+
el.overflow_x_clip = () => cls("overflow-x-clip");
|
|
263
|
+
el.overflow_x_visible = () => cls("overflow-x-visible");
|
|
264
|
+
el.overflow_x_scroll = () => cls("overflow-x-scroll");
|
|
265
|
+
el.overflow_y_auto = () => cls("overflow-y-auto");
|
|
266
|
+
el.overflow_y_hidden = () => cls("overflow-y-hidden");
|
|
267
|
+
el.overflow_y_clip = () => cls("overflow-y-clip");
|
|
268
|
+
el.overflow_y_visible = () => cls("overflow-y-visible");
|
|
269
|
+
el.overflow_y_scroll = () => cls("overflow-y-scroll");
|
|
270
|
+
el.bg = (c) => dynCls(c, (v) => `bg-${arbitrary(v)}`);
|
|
271
|
+
el.bg_opacity = (v) => dynCls(v, (n) => tw("bg-opacity", n));
|
|
272
|
+
el.text_color = (c) => dynCls(c, (v) => `text-${arbitrary(v)}`);
|
|
273
|
+
el.opacity = (v) => dynCls(v, (n) => tw("opacity", n));
|
|
274
|
+
el.bg_clip = (v) => dynCls(v, (s) => `bg-clip-${s}`);
|
|
275
|
+
el.bg_size = (v) => dynCls(v, (s) => `bg-${s}`);
|
|
276
|
+
el.bg_position = (v) => dynCls(v, (s) => `bg-${s}`);
|
|
277
|
+
el.bg_repeat = (v) => v !== void 0 ? dynCls(v, (s) => s === "none" ? "bg-no-repeat" : `bg-repeat-${s}`) : cls("bg-repeat");
|
|
278
|
+
el.bg_attachment = (v) => dynCls(v, (s) => `bg-${s}`);
|
|
279
|
+
el.bg_gradient = (dir) => dynCls(dir, (d) => `bg-gradient-to-${d}`);
|
|
280
|
+
el.from = (c) => dynCls(c, (v) => `from-${arbitrary(v)}`);
|
|
281
|
+
el.via = (c) => dynCls(c, (v) => `via-${arbitrary(v)}`);
|
|
282
|
+
el.to = (c) => dynCls(c, (v) => `to-${arbitrary(v)}`);
|
|
283
|
+
el.border = () => cls("border");
|
|
284
|
+
el.border_w = (n) => dynCls(n, (v) => tw("border", v));
|
|
285
|
+
el.border_t = (n) => n !== void 0 ? dynCls(n, (v) => tw("border-t", v)) : cls("border-t");
|
|
286
|
+
el.border_r = (n) => n !== void 0 ? dynCls(n, (v) => tw("border-r", v)) : cls("border-r");
|
|
287
|
+
el.border_b = (n) => n !== void 0 ? dynCls(n, (v) => tw("border-b", v)) : cls("border-b");
|
|
288
|
+
el.border_l = (n) => n !== void 0 ? dynCls(n, (v) => tw("border-l", v)) : cls("border-l");
|
|
289
|
+
el.border_x = (n) => n !== void 0 ? dynCls(n, (v) => tw("border-x", v)) : cls("border-x");
|
|
290
|
+
el.border_y = (n) => n !== void 0 ? dynCls(n, (v) => tw("border-y", v)) : cls("border-y");
|
|
291
|
+
el.border_color = (c) => dynCls(c, (v) => `border-${arbitrary(v)}`);
|
|
292
|
+
el.border_solid = () => cls("border-solid");
|
|
293
|
+
el.border_dashed = () => cls("border-dashed");
|
|
294
|
+
el.border_dotted = () => cls("border-dotted");
|
|
295
|
+
el.border_double = () => cls("border-double");
|
|
296
|
+
el.border_none = () => cls("border-none");
|
|
297
|
+
el.border_collapse = () => cls("border-collapse");
|
|
298
|
+
el.border_separate = () => cls("border-separate");
|
|
299
|
+
el.rounded = (s) => s !== void 0 ? dynCls(s, (v) => `rounded-${v}`) : cls("rounded");
|
|
300
|
+
el.rounded_full = () => cls("rounded-full");
|
|
301
|
+
el.rounded_t = (s) => s !== void 0 ? dynCls(s, (v) => `rounded-t-${v}`) : cls("rounded-t");
|
|
302
|
+
el.rounded_r = (s) => s !== void 0 ? dynCls(s, (v) => `rounded-r-${v}`) : cls("rounded-r");
|
|
303
|
+
el.rounded_b = (s) => s !== void 0 ? dynCls(s, (v) => `rounded-b-${v}`) : cls("rounded-b");
|
|
304
|
+
el.rounded_l = (s) => s !== void 0 ? dynCls(s, (v) => `rounded-l-${v}`) : cls("rounded-l");
|
|
305
|
+
el.divide_x = (n) => n !== void 0 ? dynCls(n, (v) => tw("divide-x", v)) : cls("divide-x");
|
|
306
|
+
el.divide_y = (n) => n !== void 0 ? dynCls(n, (v) => tw("divide-y", v)) : cls("divide-y");
|
|
307
|
+
el.divide_x_reverse = () => cls("divide-x-reverse");
|
|
308
|
+
el.divide_y_reverse = () => cls("divide-y-reverse");
|
|
309
|
+
el.divide_color = (c) => dynCls(c, (v) => `divide-${arbitrary(v)}`);
|
|
310
|
+
el.divide_solid = () => cls("divide-solid");
|
|
311
|
+
el.divide_dashed = () => cls("divide-dashed");
|
|
312
|
+
el.divide_dotted = () => cls("divide-dotted");
|
|
313
|
+
el.divide_none = () => cls("divide-none");
|
|
314
|
+
el.ring = () => cls("ring");
|
|
315
|
+
el.ring_w = (n) => dynCls(n, (v) => tw("ring", v));
|
|
316
|
+
el.ring_inset = () => cls("ring-inset");
|
|
317
|
+
el.ring_color = (c) => dynCls(c, (v) => `ring-${arbitrary(v)}`);
|
|
318
|
+
el.ring_offset = (n) => dynCls(n, (v) => tw("ring-offset", v));
|
|
319
|
+
el.ring_offset_color = (c) => dynCls(c, (v) => `ring-offset-${arbitrary(v)}`);
|
|
320
|
+
el.outline_none = () => cls("outline-none");
|
|
321
|
+
el.outline = () => cls("outline");
|
|
322
|
+
el.outline_dashed = () => cls("outline-dashed");
|
|
323
|
+
el.outline_dotted = () => cls("outline-dotted");
|
|
324
|
+
el.outline_double = () => cls("outline-double");
|
|
325
|
+
el.outline_color = (c) => dynCls(c, (v) => `outline-${arbitrary(v)}`);
|
|
326
|
+
el.outline_w = (n) => dynCls(n, (v) => tw("outline", v));
|
|
327
|
+
el.outline_offset = (n) => dynCls(n, (v) => tw("outline-offset", v));
|
|
328
|
+
el.shadow = () => cls("shadow");
|
|
329
|
+
el.shadow_sm = () => cls("shadow-sm");
|
|
330
|
+
el.shadow_md = () => cls("shadow-md");
|
|
331
|
+
el.shadow_lg = () => cls("shadow-lg");
|
|
332
|
+
el.shadow_xl = () => cls("shadow-xl");
|
|
333
|
+
el.shadow_2xl = () => cls("shadow-2xl");
|
|
334
|
+
el.shadow_inner = () => cls("shadow-inner");
|
|
335
|
+
el.shadow_none = () => cls("shadow-none");
|
|
336
|
+
el.shadow_color = (c) => dynCls(c, (v) => `shadow-${arbitrary(v)}`);
|
|
337
|
+
el.text = (s) => dynCls(s, (v) => `text-${v}`);
|
|
338
|
+
el.text_xs = () => cls("text-xs");
|
|
339
|
+
el.text_sm = () => cls("text-sm");
|
|
340
|
+
el.text_base = () => cls("text-base");
|
|
341
|
+
el.text_lg = () => cls("text-lg");
|
|
342
|
+
el.text_xl = () => cls("text-xl");
|
|
343
|
+
el.text_2xl = () => cls("text-2xl");
|
|
344
|
+
el.text_3xl = () => cls("text-3xl");
|
|
345
|
+
el.text_4xl = () => cls("text-4xl");
|
|
346
|
+
el.text_5xl = () => cls("text-5xl");
|
|
347
|
+
el.text_6xl = () => cls("text-6xl");
|
|
348
|
+
el.text_7xl = () => cls("text-7xl");
|
|
349
|
+
el.text_8xl = () => cls("text-8xl");
|
|
350
|
+
el.text_9xl = () => cls("text-9xl");
|
|
351
|
+
el.font_thin = () => cls("font-thin");
|
|
352
|
+
el.font_extralight = () => cls("font-extralight");
|
|
353
|
+
el.font_light = () => cls("font-light");
|
|
354
|
+
el.font_normal = () => cls("font-normal");
|
|
355
|
+
el.font_medium = () => cls("font-medium");
|
|
356
|
+
el.font_semibold = () => cls("font-semibold");
|
|
357
|
+
el.font_bold = () => cls("font-bold");
|
|
358
|
+
el.font_extrabold = () => cls("font-extrabold");
|
|
359
|
+
el.font_black = () => cls("font-black");
|
|
360
|
+
el.italic = () => cls("italic");
|
|
361
|
+
el.not_italic = () => cls("not-italic");
|
|
362
|
+
el.text_left = () => cls("text-left");
|
|
363
|
+
el.text_center = () => cls("text-center");
|
|
364
|
+
el.text_right = () => cls("text-right");
|
|
365
|
+
el.text_justify = () => cls("text-justify");
|
|
366
|
+
el.text_wrap = () => cls("text-wrap");
|
|
367
|
+
el.text_nowrap = () => cls("text-nowrap");
|
|
368
|
+
el.text_balance = () => cls("text-balance");
|
|
369
|
+
el.text_pretty = () => cls("text-pretty");
|
|
370
|
+
el.truncate = () => cls("truncate");
|
|
371
|
+
el.text_ellipsis = () => cls("text-ellipsis");
|
|
372
|
+
el.text_clip = () => cls("text-clip");
|
|
373
|
+
el.leading = (v) => dynCls(v, (n) => tw("leading", n));
|
|
374
|
+
el.tracking = (v) => dynCls(v, (n) => tw("tracking", n));
|
|
375
|
+
el.line_clamp = (n) => dynCls(n, (v) => tw("line-clamp", v));
|
|
376
|
+
el.whitespace = (v) => dynCls(v, (s) => tw("whitespace", s));
|
|
377
|
+
el.break_normal = () => cls("break-normal");
|
|
378
|
+
el.break_words = () => cls("break-words");
|
|
379
|
+
el.break_all = () => cls("break-all");
|
|
380
|
+
el.break_keep = () => cls("break-keep");
|
|
381
|
+
el.uppercase = () => cls("uppercase");
|
|
382
|
+
el.lowercase = () => cls("lowercase");
|
|
383
|
+
el.capitalize = () => cls("capitalize");
|
|
384
|
+
el.normal_case = () => cls("normal-case");
|
|
385
|
+
el.underline = () => cls("underline");
|
|
386
|
+
el.overline = () => cls("overline");
|
|
387
|
+
el.line_through = () => cls("line-through");
|
|
388
|
+
el.no_underline = () => cls("no-underline");
|
|
389
|
+
el.decoration_color = (c) => dynCls(c, (v) => `decoration-${arbitrary(v)}`);
|
|
390
|
+
el.indent = (n) => dynCls(n, (v) => tw("indent", v));
|
|
391
|
+
el.align = (v) => dynCls(v, (s) => tw("align", s));
|
|
392
|
+
el.font_family = (v) => dynCls(v, (s) => tw("font", s));
|
|
393
|
+
el.list_none = () => cls("list-none");
|
|
394
|
+
el.list_disc = () => cls("list-disc");
|
|
395
|
+
el.list_decimal = () => cls("list-decimal");
|
|
396
|
+
el.list_inside = () => cls("list-inside");
|
|
397
|
+
el.list_outside = () => cls("list-outside");
|
|
398
|
+
el.object_contain = () => cls("object-contain");
|
|
399
|
+
el.object_cover = () => cls("object-cover");
|
|
400
|
+
el.object_fill = () => cls("object-fill");
|
|
401
|
+
el.object_none = () => cls("object-none");
|
|
402
|
+
el.object_scale_down = () => cls("object-scale-down");
|
|
403
|
+
el.object_position = (v) => dynCls(v, (s) => `object-${s}`);
|
|
404
|
+
el.scale = (n) => dynCls(n, (v) => tw("scale", v));
|
|
405
|
+
el.scale_x = (n) => dynCls(n, (v) => tw("scale-x", v));
|
|
406
|
+
el.scale_y = (n) => dynCls(n, (v) => tw("scale-y", v));
|
|
407
|
+
el.rotate = (n) => dynCls(n, (v) => tw("rotate", v));
|
|
408
|
+
el.translate_x = (n) => dynCls(n, (v) => tw("translate-x", v));
|
|
409
|
+
el.translate_y = (n) => dynCls(n, (v) => tw("translate-y", v));
|
|
410
|
+
el.skew_x = (n) => dynCls(n, (v) => tw("skew-x", v));
|
|
411
|
+
el.skew_y = (n) => dynCls(n, (v) => tw("skew-y", v));
|
|
412
|
+
el.origin = (v) => dynCls(v, (s) => tw("origin", s));
|
|
413
|
+
el.blur = (s) => s !== void 0 ? dynCls(s, (v) => tw("blur", v)) : cls("blur");
|
|
414
|
+
el.brightness = (n) => dynCls(n, (v) => tw("brightness", v));
|
|
415
|
+
el.contrast = (n) => dynCls(n, (v) => tw("contrast", v));
|
|
416
|
+
el.grayscale = (n) => n !== void 0 ? dynCls(n, (v) => tw("grayscale", v)) : cls("grayscale");
|
|
417
|
+
el.hue_rotate = (n) => dynCls(n, (v) => tw("hue-rotate", v));
|
|
418
|
+
el.invert = (n) => n !== void 0 ? dynCls(n, (v) => tw("invert", v)) : cls("invert");
|
|
419
|
+
el.saturate = (n) => dynCls(n, (v) => tw("saturate", v));
|
|
420
|
+
el.sepia = (n) => n !== void 0 ? dynCls(n, (v) => tw("sepia", v)) : cls("sepia");
|
|
421
|
+
el.drop_shadow = (s) => s !== void 0 ? dynCls(s, (v) => tw("drop-shadow", v)) : cls("drop-shadow");
|
|
422
|
+
el.backdrop_blur = (s) => s !== void 0 ? dynCls(s, (v) => tw("backdrop-blur", v)) : cls("backdrop-blur");
|
|
423
|
+
el.backdrop_brightness = (n) => dynCls(n, (v) => tw("backdrop-brightness", v));
|
|
424
|
+
el.animate_none = () => cls("animate-none");
|
|
425
|
+
el.animate_spin = () => cls("animate-spin");
|
|
426
|
+
el.animate_ping = () => cls("animate-ping");
|
|
427
|
+
el.animate_pulse = () => cls("animate-pulse");
|
|
428
|
+
el.animate_bounce = () => cls("animate-bounce");
|
|
429
|
+
el.transition = () => cls("transition");
|
|
430
|
+
el.transition_prop = (p) => dynCls(p, (v) => `transition-${v}`);
|
|
431
|
+
el.duration = (n) => dynCls(n, (v) => tw("duration", v));
|
|
432
|
+
el.delay = (n) => dynCls(n, (v) => tw("delay", v));
|
|
433
|
+
el.ease = (v) => dynCls(v, (s) => tw("ease", s));
|
|
434
|
+
el.will_change = (v) => dynCls(v, (s) => tw("will-change", s));
|
|
435
|
+
el.cursor_auto = () => cls("cursor-auto");
|
|
436
|
+
el.cursor_default = () => cls("cursor-default");
|
|
437
|
+
el.cursor_pointer = () => cls("cursor-pointer");
|
|
438
|
+
el.cursor_wait = () => cls("cursor-wait");
|
|
439
|
+
el.cursor_text = () => cls("cursor-text");
|
|
440
|
+
el.cursor_move = () => cls("cursor-move");
|
|
441
|
+
el.cursor_not_allowed = () => cls("cursor-not-allowed");
|
|
442
|
+
el.cursor_grab = () => cls("cursor-grab");
|
|
443
|
+
el.cursor_grabbing = () => cls("cursor-grabbing");
|
|
444
|
+
el.cursor_crosshair = () => cls("cursor-crosshair");
|
|
445
|
+
el.select_none = () => cls("select-none");
|
|
446
|
+
el.select_text = () => cls("select-text");
|
|
447
|
+
el.select_all = () => cls("select-all");
|
|
448
|
+
el.select_auto = () => cls("select-auto");
|
|
449
|
+
el.resize_none = () => cls("resize-none");
|
|
450
|
+
el.resize = () => cls("resize");
|
|
451
|
+
el.resize_x = () => cls("resize-x");
|
|
452
|
+
el.resize_y = () => cls("resize-y");
|
|
453
|
+
el.pointer_events_none = () => cls("pointer-events-none");
|
|
454
|
+
el.pointer_events_auto = () => cls("pointer-events-auto");
|
|
455
|
+
el.touch_auto = () => cls("touch-auto");
|
|
456
|
+
el.touch_none = () => cls("touch-none");
|
|
457
|
+
el.touch_pan_x = () => cls("touch-pan-x");
|
|
458
|
+
el.touch_pan_y = () => cls("touch-pan-y");
|
|
459
|
+
el.touch_manipulation = () => cls("touch-manipulation");
|
|
460
|
+
el.appearance_none = () => cls("appearance-none");
|
|
461
|
+
el.mix_blend = (mode) => dynCls(mode, (v) => tw("mix-blend", v));
|
|
462
|
+
el.fill = (c) => dynCls(c, (v) => `fill-${arbitrary(v)}`);
|
|
463
|
+
el.stroke = (c) => dynCls(c, (v) => `stroke-${arbitrary(v)}`);
|
|
464
|
+
el.stroke_w = (n) => dynCls(n, (v) => tw("stroke", v));
|
|
465
|
+
el.sr_only = () => cls("sr-only");
|
|
466
|
+
el.not_sr_only = () => cls("not-sr-only");
|
|
467
|
+
el.when = (...args) => {
|
|
468
|
+
if (typeof args[0] === "function") {
|
|
469
|
+
const [pred, apply] = args;
|
|
470
|
+
return derive([(props) => {
|
|
471
|
+
if (!pred(props)) return "";
|
|
472
|
+
return resolveClasses(apply(createBlankBuilder()).classes, props);
|
|
473
|
+
}]);
|
|
474
|
+
} else {
|
|
475
|
+
const [key, cases] = args;
|
|
476
|
+
return derive([(props) => {
|
|
477
|
+
const branch = cases[props[key]];
|
|
478
|
+
if (!branch) return "";
|
|
479
|
+
return resolveClasses(branch(createBlankBuilder()).classes, props);
|
|
480
|
+
}]);
|
|
481
|
+
}
|
|
482
|
+
};
|
|
483
|
+
el.cls = (value) => typeof value === "function" ? derive([value]) : derive([value]);
|
|
484
|
+
el.render = async (...args) => {
|
|
485
|
+
const html = render(...args);
|
|
486
|
+
const resolvedHtml = html instanceof Promise ? await html : html;
|
|
487
|
+
const { css } = await (await getGenerator()).generate(resolvedHtml, { preflights: false });
|
|
488
|
+
return {
|
|
489
|
+
html: resolvedHtml,
|
|
490
|
+
css
|
|
491
|
+
};
|
|
492
|
+
};
|
|
493
|
+
el.child = (value) => createBuilder({
|
|
494
|
+
...state,
|
|
495
|
+
classes: [...state.classes],
|
|
496
|
+
children: [...state.children, value]
|
|
497
|
+
});
|
|
498
|
+
return el;
|
|
499
|
+
}
|
|
500
|
+
let _generator = null;
|
|
501
|
+
async function getGenerator() {
|
|
502
|
+
if (_generator) return _generator;
|
|
503
|
+
const { createGenerator } = await import("@unocss/core");
|
|
504
|
+
const { default: presetWind4 } = await import("@unocss/preset-wind4");
|
|
505
|
+
_generator = await createGenerator({ presets: [presetWind4()] });
|
|
506
|
+
return _generator;
|
|
507
|
+
}
|
|
508
|
+
const pose = { as(tag) {
|
|
509
|
+
return createBuilder({
|
|
510
|
+
tag,
|
|
511
|
+
classes: [],
|
|
512
|
+
children: [],
|
|
513
|
+
schema: void 0
|
|
514
|
+
});
|
|
515
|
+
} };
|
|
516
|
+
const div = pose.as("div");
|
|
517
|
+
//#endregion
|
|
518
|
+
export { PoseValidationError, pose as default, div };
|
package/package.json
ADDED
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "poseui",
|
|
3
|
+
"version": "0.0.1",
|
|
4
|
+
"description": "Type-safe HTML templating engine on steroids",
|
|
5
|
+
"license": "MIT",
|
|
6
|
+
"author": "Ryuz <ryuzer@proton.me>",
|
|
7
|
+
"repository": {
|
|
8
|
+
"type": "git",
|
|
9
|
+
"url": "git+https://github.com/guarana-studio/poseui.git"
|
|
10
|
+
},
|
|
11
|
+
"files": [
|
|
12
|
+
"dist"
|
|
13
|
+
],
|
|
14
|
+
"type": "module",
|
|
15
|
+
"module": "src/index.ts",
|
|
16
|
+
"exports": {
|
|
17
|
+
".": {
|
|
18
|
+
"types": "./dist/index.d.ts",
|
|
19
|
+
"import": "./dist/index.js"
|
|
20
|
+
}
|
|
21
|
+
},
|
|
22
|
+
"scripts": {
|
|
23
|
+
"build": "tsdown",
|
|
24
|
+
"fmt": "oxfmt",
|
|
25
|
+
"test": "bun test"
|
|
26
|
+
},
|
|
27
|
+
"dependencies": {
|
|
28
|
+
"@unocss/core": "^66.6.7",
|
|
29
|
+
"@unocss/preset-wind4": "^66.6.7"
|
|
30
|
+
},
|
|
31
|
+
"devDependencies": {
|
|
32
|
+
"@types/bun": "latest",
|
|
33
|
+
"oxfmt": "^0.41.0",
|
|
34
|
+
"tsdown": "^0.21.4",
|
|
35
|
+
"zod": "^4.3.6"
|
|
36
|
+
},
|
|
37
|
+
"peerDependencies": {
|
|
38
|
+
"typescript": "^5"
|
|
39
|
+
}
|
|
40
|
+
}
|