@plastic-js/tsumiki 0.1.26 → 0.1.28

package/dist/components/ConfirmDialog.js

@@ -35,10 +35,7 @@ function ConfirmDialog(props) {
 	const handleConfirm = () => {
 		local.onConfirm?.();
 	};
-	return jsx(Dialog, mergeProps({
-		get mode() {
-			return local.mode;
-		},
+	return jsx(Dialog, mergeProps(() => local.mode ? { mode: local.mode } : {}, {
 		get cancelText() {
 			return local.cancelText;
 		},
@@ -112,10 +109,7 @@ function ensureInit() {
 	renderApp(container, () => {
 		const s = state();
 		if (!s) return null;
-		return jsx(Dialog, mergeProps({
-			get mode() {
-				return s.mode;
-			},
+		return jsx(Dialog, mergeProps(() => s.mode ? { mode: s.mode } : {}, {
 			get open() {
 				return s.open;
 			},

package/dist/components/Field.js

@@ -1,11 +1,9 @@
 import { insert, jsx, mergeProps, setProp, template } from "@plastic-js/plastic/jsx-runtime";
 import { css } from "@emotion/css";
-import { mergeProps as mergeProps$1, splitProps } from "@plastic-js/plastic";
+import { Field } from "@plastic-js/ark";
+import { mergeProps as mergeProps$2, splitProps } from "@plastic-js/plastic";
 //#region src/components/Field.jsx
-var _tmpl4 = template("<p></p>");
-var _tmpl3 = template("<div></div>");
-var _tmpl2 = template("<span>*</span>");
-var _tmpl = template("<span><!><!></span>");
+var _tmpl = template("<div></div>");
 var rootClass = css({
 	display: "flex",
 	flexDirection: "column",
@@ -51,8 +49,8 @@ var helperTextClass = css({
 	flexBasis: "100%"
 });
 var read = (v) => typeof v === "function" ? v() : v;
-var Field = (props = {}) => {
-	const [local, rest] = splitProps(mergeProps$1({
+var Field$1 = (props = {}) => {
+	const [local, rest] = splitProps(mergeProps$2({
 		label: "",
 		error: "",
 		helper: "",
@@ -64,6 +62,9 @@ var Field = (props = {}) => {
 		"helper",
 		"required",
 		"compact",
+		"invalid",
+		"disabled",
+		"readOnly",
 		"className",
 		"children"
 	]);
@@ -72,52 +73,61 @@ var Field = (props = {}) => {
 	const hasError = () => !!error();
 	const hasHelper = () => !!helper();
 	const isCompact = () => read(local.compact);
-	return jsx("div", mergeProps(rest, {
-		className: () => [isCompact() ? compactRootClass : rootClass, local.className].filter(Boolean).join(" "),
-		get "data-invalid"() {
-			return hasError() ? "" : void 0;
+	const required = () => read(local.required);
+	const invalid = () => {
+		if (hasError()) return true;
+		return local.invalid === void 0 ? void 0 : read(local.invalid);
+	};
+	const disabled = () => local.disabled === void 0 ? void 0 : read(local.disabled);
+	const readOnly = () => local.readOnly === void 0 ? void 0 : read(local.readOnly);
+	return jsx(Field.Root, mergeProps(rest, {
+		get invalid() {
+			return invalid();
+		},
+		get disabled() {
+			return disabled();
+		},
+		get readOnly() {
+			return readOnly();
 		},
+		get required() {
+			return required();
+		},
+		className: () => [isCompact() ? compactRootClass : rootClass, local.className].filter(Boolean).join(" "),
 		children: [
-			() => {
-				const label = read(local.label);
-				if (!label) return null;
-				return () => {
-					const _el0 = _tmpl.cloneNode(true);
-					const _el1 = _el0.firstChild;
-					const _el2 = _el0.firstChild.nextSibling;
-					insert(_el0, () => label, _el1);
-					insert(_el0, () => read(local.required) && (() => {
-						const _el0 = _tmpl2.cloneNode(true);
-						setProp(_el0, "className", () => requiredClass);
-						return _el0;
-					})(), _el2);
-					setProp(_el0, "className", () => [labelClass, isCompact() && compactLabelClass].filter(Boolean).join(" "));
-					return _el0;
-				};
-			},
+			() => read(local.label) ? jsx(Field.Label, mergeProps({
+				className: () => [labelClass, isCompact() && compactLabelClass].filter(Boolean).join(" "),
+				children: [() => read(local.label), () => required() && jsx(Field.RequiredIndicator, mergeProps({
+					className: requiredClass,
+					children: "*"
+				}))]
+			})) : null,
 			() => isCompact() ? () => {
-				const _el0 = _tmpl3.cloneNode(true);
+				const _el0 = _tmpl.cloneNode(true);
 				insert(_el0, () => local.children);
 				setProp(_el0, "className", () => inputWrapClass);
 				return _el0;
 			} : local.children,
-			() => {
-				if (hasError()) return () => {
-					const _el0 = _tmpl4.cloneNode(true);
-					insert(_el0, () => error());
-					setProp(_el0, "className", () => errorTextClass);
-					return _el0;
-				};
-				if (hasHelper()) return () => {
-					const _el0 = _tmpl4.cloneNode(true);
-					insert(_el0, () => helper());
-					setProp(_el0, "className", () => helperTextClass);
-					return _el0;
-				};
-				return null;
-			}
+			() => hasError() ? jsx(Field.ErrorText, mergeProps({
+				className: errorTextClass,
+				children: () => error()
+			})) : hasHelper() ? jsx(Field.HelperText, mergeProps({
+				className: helperTextClass,
+				children: () => helper()
+			})) : null
 		]
 	}));
 };
+Field$1.origin = {
+	Root: Field.Root,
+	Label: Field.Label,
+	Input: Field.Input,
+	Textarea: Field.Textarea,
+	Select: Field.Select,
+	HelperText: Field.HelperText,
+	ErrorText: Field.ErrorText,
+	RequiredIndicator: Field.RequiredIndicator,
+	Item: Field.Item
+};
 //#endregion
-export { Field as default };
+export { Field$1 as default };

package/dist/components/Fieldset.js

@@ -1,9 +1,8 @@
-import { insert, jsx, mergeProps, setProp, template } from "@plastic-js/plastic/jsx-runtime";
+import { jsx, mergeProps } from "@plastic-js/plastic/jsx-runtime";
 import { css } from "@emotion/css";
-import { mergeProps as mergeProps$1, splitProps } from "@plastic-js/plastic";
+import { Fieldset } from "@plastic-js/ark";
+import { mergeProps as mergeProps$2, splitProps } from "@plastic-js/plastic";
 //#region src/components/Fieldset.jsx
-var _tmpl2 = template("<p></p>");
-var _tmpl = template("<div></div>");
 var rootClass = css({
 	display: "flex",
 	flexDirection: "column",
@@ -25,8 +24,8 @@ var helperClass = css({
 	margin: 0
 });
 var read = (v) => typeof v === "function" ? v() : v;
-var Fieldset = (props = {}) => {
-	const [local, rest] = splitProps(mergeProps$1({
+var Fieldset$1 = (props = {}) => {
+	const [local, rest] = splitProps(mergeProps$2({
 		legend: "",
 		helper: ""
 	}, props), [
@@ -35,32 +34,26 @@ var Fieldset = (props = {}) => {
 		"className",
 		"children"
 	]);
-	return jsx("div", mergeProps(rest, {
+	return jsx(Fieldset.Root, mergeProps(rest, {
 		className: () => [rootClass, local.className].filter(Boolean).join(" "),
 		children: [
-			() => {
-				const legend = read(local.legend);
-				if (!legend) return null;
-				return () => {
-					const _el0 = _tmpl.cloneNode(true);
-					insert(_el0, () => legend);
-					setProp(_el0, "className", () => legendClass);
-					return _el0;
-				};
-			},
+			() => read(local.legend) ? jsx(Fieldset.Legend, mergeProps({
+				className: legendClass,
+				children: () => read(local.legend)
+			})) : null,
 			() => local.children,
-			() => {
-				const helper = read(local.helper);
-				if (!helper) return null;
-				return () => {
-					const _el0 = _tmpl2.cloneNode(true);
-					insert(_el0, () => helper);
-					setProp(_el0, "className", () => helperClass);
-					return _el0;
-				};
-			}
+			() => read(local.helper) ? jsx(Fieldset.HelperText, mergeProps({
+				className: helperClass,
+				children: () => read(local.helper)
+			})) : null
 		]
 	}));
 };
+Fieldset$1.origin = {
+	Root: Fieldset.Root,
+	Legend: Fieldset.Legend,
+	HelperText: Fieldset.HelperText,
+	ErrorText: Fieldset.ErrorText
+};
 //#endregion
-export { Fieldset as default };
+export { Fieldset$1 as default };

package/dist/components/Input.js

@@ -1,7 +1,8 @@
 import { insert, jsx, mergeProps, setProp, template } from "@plastic-js/plastic/jsx-runtime";
 import { css } from "@emotion/css";
-import { createSignal, mergeProps as mergeProps$1, splitProps } from "@plastic-js/plastic";
-import { ark } from "@plastic-js/ark/factory";
+import { useFieldContext } from "@plastic-js/ark";
+import { createSignal, mergeProps as mergeProps$2, splitProps } from "@plastic-js/plastic";
+import { ark as ark$1 } from "@plastic-js/ark/factory";
 //#region src/components/Input.jsx
 var _tmpl5 = template("<svg fill=\"none\" stroke=\"currentColor\" strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth=\"2\" viewBox=\"0 0 24 24\"><path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\"></path><circle cx=\"12\" cy=\"12\" r=\"3\"></circle></svg>");
 var _tmpl4 = template("<svg fill=\"none\" stroke=\"currentColor\" strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth=\"2\" viewBox=\"0 0 24 24\"><path d=\"M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94\"></path><path d=\"M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19\"></path><line x1=\"1\" y1=\"1\" x2=\"23\" y2=\"23\"></line></svg>");
@@ -128,7 +129,7 @@ var eyeButtonClass = css({
 });
 var read = (v) => typeof v === "function" ? v() : v;
 var Input = (props = {}) => {
-	const [local, rest] = splitProps(mergeProps$1({
+	const [local, rest] = splitProps(mergeProps$2({
 		solid: false,
 		size: "md",
 		disabled: false,
@@ -147,12 +148,17 @@ var Input = (props = {}) => {
 	]);
 	const showPassword = createSignal(false);
 	const isPassword = read(local.type) === "password";
+	const field = useFieldContext();
+	const fieldInvalid = () => field?.invalid?.() ?? false;
+	const fieldDisabled = () => field?.disabled?.() ?? false;
+	const effectiveInvalid = () => read(local.invalid) || fieldInvalid();
+	const effectiveDisabled = () => read(local.disabled) || fieldDisabled();
 	const wrapperClassName = () => [
 		wrapperClass,
 		sizeClasses[read(local.size)],
 		read(local.solid) ? variantClasses.solid : variantClasses.outline,
-		read(local.invalid) && errorClass,
-		read(local.disabled) && disabledClass,
+		effectiveInvalid() && errorClass,
+		effectiveDisabled() && disabledClass,
 		read(local.className)
 	].filter(Boolean).join(" ");
 	const inputType = () => {
@@ -178,11 +184,13 @@ var Input = (props = {}) => {
 			if (p == null) return null;
 			return renderAffix(p);
 		}, _el1);
-		insert(_el0, () => jsx(ark.input, mergeProps({ get ref() {
+		insert(_el0, () => jsx(ark$1.input, mergeProps({ get ref() {
 			return local.ref;
-		} }, rest, {
+		} }, () => field ? field.getInputProps() : {}, rest, {
 			type: inputType,
-			disabled: () => read(local.disabled),
+			"aria-invalid": () => effectiveInvalid() ? "true" : "false",
+			"data-invalid": () => effectiveInvalid() ? "" : void 0,
+			disabled: () => effectiveDisabled(),
 			className: () => [inputClass, read(local.inputClassName)].filter(Boolean).join(" ")
 		})), _el2);
 		insert(_el0, () => {
@@ -206,6 +214,6 @@ var Input = (props = {}) => {
 		return _el0;
 	};
 };
-Input.origin = { Root: ark.input };
+Input.origin = { Root: ark$1.input };
 //#endregion
 export { Input as default };

package/docs/api.md

@@ -52,9 +52,9 @@ The shared `size` prop accepts: `xs | sm | md | lg | xl | xxl` (default `md`).
 
 ### Field
 
-A labeled field wrapper combining a label, an error message and helper text.
+A labeled field wrapper combining a label, an error message and helper text, backed by `ArkField`.
 
-**Exports:** `Field`
+**Exports:** `Field` · Escape hatch: `Field.origin.{Root, Label, Input, Textarea, Select, HelperText, ErrorText, RequiredIndicator, Item}`
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
@@ -63,13 +63,18 @@ A labeled field wrapper combining a label, an error message and helper text.
 | `helper` | `string` | `''` | Helper text below the control. |
 | `required` | `boolean` | `false` | Marks the label with a required indicator. |
 | `compact` | `boolean` | `false` | Renders in a compact (smaller) layout. |
+| `invalid` | `boolean` | `false` | Error state (also implied by a non-empty `error`). |
+| `disabled` | `boolean` | — | Disables the control; inherits from an enclosing `Fieldset`. |
+| `readOnly` | `boolean` | — | Read-only state. |
 | `children` | `node` | — | The input control (e.g. `<Input />`). |
 
+Passthrough: Ark `Field.Root` props (`id`, `ids`, …).
+
 ### Fieldset
 
-Groups several `Field`s with a legend.
+Groups several `Field`s with a legend, backed by `ArkFieldset` (native `<fieldset>`).
 
-**Exports:** `Fieldset`
+**Exports:** `Fieldset` · Escape hatch: `Fieldset.origin.{Root, Legend, HelperText, ErrorText}`
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
@@ -77,6 +82,8 @@ Groups several `Field`s with a legend.
 | `helper` | `string` | `''` | Helper text below the fields. |
 | `children` | `node` | — | `Field` components to group. |
 
+Passthrough: Ark `Fieldset.Root` props (`disabled`, `invalid`, …).
+
 ### Input
 
 **Exports:** `Input` · Escape hatch: `Input.origin.Root`

package/docs/component-api-pattern.md

@@ -28,7 +28,7 @@ Whether the component is built on top of a same-named Ark primitive, or implemen
 
 ### Component Matrix
 
-#### Completed · Ark-Backed (30)
+#### Completed · Ark-Backed (32)
 
 | Component | Ark Primitive |
 |-----------|---------------|
@@ -39,6 +39,8 @@ Whether the component is built on top of a same-named Ark primitive, or implemen
 | ColorPicker | `ArkColorPicker` |
 | Dialog | `ArkDialog` |
 | Drawer | `ArkDrawer` |
+| Field | `ArkField` |
+| Fieldset | `ArkFieldset` |
 | FileUpload | `ArkFileUpload` |
 | FocusTrap | `ArkFocusTrap` |
 | Input | `ark("input")` via factory |
@@ -63,7 +65,7 @@ Whether the component is built on top of a same-named Ark primitive, or implemen
 | Toggle | `ArkToggle` |
 | ToggleGroup | `ArkToggleGroup` |
 
-#### Completed · Custom-Built (15)
+#### Completed · Custom-Built (13)
 
 | Component | Built With |
 |-----------|------------|
@@ -73,8 +75,6 @@ Whether the component is built on top of a same-named Ark primitive, or implemen
 | CloseButton | `@emotion/css` |
 | ConfirmDialog | Composes `Dialog` |
 | DateInput | `DateWheel` utility |
-| Field | `@emotion/css` |
-| Fieldset | `@emotion/css` |
 | Icon | `@emotion/css` |
 | MoneyInput | Composes `Input` |
 | SearchInput | Composes `Input` |
@@ -103,11 +103,11 @@ Whether the component is built on top of a same-named Ark primitive, or implemen
 ```
                     Ark-Backed          Custom-Built
                   ┌─────────────────┬─────────────────┐
-    Completed     │       30        │       15        │  45
+    Completed     │       32        │       13        │  45
                   ├─────────────────┼─────────────────┤
  In Development   │        6        │        0        │   6
                   └─────────────────┴─────────────────┘
-                        36                   15          51
+                        38                   13          51
 ```
 
 ---

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plastic-js/tsumiki",
-  "version": "0.1.26",
+  "version": "0.1.28",
   "description": "A UI component library for Plastic JS.",
   "license": "MIT",
   "author": "tigre",