@wirekyt/solid 0.0.1 → 0.0.2

package/dist/field-CQr_Dibp.js

@@ -0,0 +1,317 @@
+import { t as __exportAll } from "./rolldown-runtime-D7D4PA-g.js";
+import { a as mergeProps$2, d as createContext$1, l as createSplitProps, u as composeRefs } from "./core-7QKBNp9p.js";
+import { t as wire } from "./factory-D2A7xdtl.js";
+import { l as useEnvironmentContext } from "./providers-B-Vi5wQ7.js";
+import { u as useFieldsetContext } from "./fieldset-D5teGLZ9.js";
+import { Show, createMemo, createSignal, createUniqueId, mergeProps, onCleanup, onMount, splitProps } from "solid-js";
+import { createComponent, mergeProps as mergeProps$1 } from "solid-js/web";
+import { ariaAttr, dataAttr } from "@wirekyt/dom/dom-query";
+import { createAnatomy } from "@wirekyt/dom/anatomy";
+import { autoresizeTextarea } from "@wirekyt/dom/auto-resize";
+//#region src/components/field/use-context.ts
+const [FieldProvider, useFieldContext] = createContext$1({
+	hookName: "useFieldContext",
+	providerName: "<FieldProvider />",
+	strict: false
+});
+//#endregion
+//#region src/components/field/context.tsx
+const FieldContext = (props) => props.children(useFieldContext());
+//#endregion
+//#region src/components/field/error-text.tsx
+const FieldErrorText = (props) => {
+	const field = useFieldContext();
+	const mergedProps = mergeProps$2(() => field().getErrorTextProps(), props);
+	return createComponent(Show, {
+		get when() {
+			return field?.().invalid;
+		},
+		get children() {
+			return createComponent(wire.span, mergedProps);
+		}
+	});
+};
+//#endregion
+//#region src/components/field/helper-text.tsx
+const FieldHelperText = (props) => {
+	const field = useFieldContext();
+	const mergedProps = mergeProps$2(() => field().getHelperTextProps(), props);
+	return createComponent(wire.span, mergedProps);
+};
+//#endregion
+//#region src/components/field/input.tsx
+const FieldInput = (props) => {
+	const field = useFieldContext();
+	const mergedProps = mergeProps$2(() => field?.().getInputProps(), props);
+	return createComponent(wire.input, mergedProps);
+};
+//#endregion
+//#region src/components/field/anatomy.ts
+const fieldAnatomy = createAnatomy("field").parts("root", "errorText", "helperText", "input", "label", "select", "textarea", "requiredIndicator");
+const parts = fieldAnatomy.build();
+//#endregion
+//#region src/components/field/item.tsx
+const FieldItem = (props) => {
+	const parentField = useFieldContext();
+	const itemField = createMemo(() => {
+		const parent = parentField?.();
+		if (!parent) throw new Error("Field.Item must be used within Field.Root");
+		const controlId = `field::${parent.ids.control}::item::${props.value}`;
+		const labelId = `${controlId}::label`;
+		const getControlProps = () => ({
+			...parent.getInputProps(),
+			id: controlId
+		});
+		return () => ({
+			...parent,
+			ids: {
+				...parent.ids,
+				control: controlId,
+				label: labelId
+			},
+			getLabelProps: () => ({
+				...parent.getLabelProps(),
+				id: labelId,
+				htmlFor: controlId
+			}),
+			getInputProps: () => ({
+				...getControlProps(),
+				...parts.input.attrs
+			}),
+			getSelectProps: () => ({
+				...getControlProps(),
+				...parts.select.attrs
+			}),
+			getTextareaProps: () => ({
+				...getControlProps(),
+				...parts.textarea.attrs
+			})
+		});
+	});
+	return createComponent(FieldProvider, {
+		get value() {
+			return itemField();
+		},
+		get children() {
+			return props.children;
+		}
+	});
+};
+//#endregion
+//#region src/components/field/label.tsx
+const FieldLabel = (props) => {
+	const field = useFieldContext();
+	const mergedProps = mergeProps$2(() => field?.().getLabelProps(), props);
+	return createComponent(wire.label, mergedProps);
+};
+//#endregion
+//#region src/components/field/required-indicator.tsx
+const FieldRequiredIndicator = (props) => {
+	const field = useFieldContext();
+	const mergedProps = mergeProps$2(() => field().getRequiredIndicatorProps(), props);
+	return createComponent(Show, {
+		get when() {
+			return field().required;
+		},
+		get fallback() {
+			return props.fallback;
+		},
+		get children() {
+			return createComponent(wire.span, mergeProps$1(mergedProps, { get children() {
+				return props.children ?? "*";
+			} }));
+		}
+	});
+};
+//#endregion
+//#region src/components/field/use.ts
+const useField = (props) => {
+	const fieldset = useFieldsetContext();
+	const env = useEnvironmentContext();
+	const fieldProps = mergeProps({
+		disabled: Boolean(fieldset?.().disabled),
+		required: false,
+		invalid: false,
+		readOnly: false
+	}, props);
+	const [hasErrorText, setHasErrorText] = createSignal(false);
+	const [hasHelperText, setHasHelperText] = createSignal(false);
+	const id = fieldProps.id ?? createUniqueId();
+	const [rootRef, setRootRef] = createSignal(void 0);
+	const rootId = fieldProps.ids?.control ?? `field::${id}`;
+	const errorTextId = fieldProps.ids?.errorText ?? `field::${id}::error-text`;
+	const helperTextId = fieldProps.ids?.helperText ?? `field::${id}::helper-text`;
+	const labelId = fieldProps.ids?.label ?? `field::${id}::label`;
+	onMount(() => {
+		const rootNode = rootRef();
+		if (!rootNode) return;
+		const checkTextElements = () => {
+			const docOrShadowRoot = env().getRootNode();
+			setHasErrorText(!!docOrShadowRoot.getElementById(errorTextId));
+			setHasHelperText(!!docOrShadowRoot.getElementById(helperTextId));
+		};
+		checkTextElements();
+		const observer = new (env().getWindow()).MutationObserver(checkTextElements);
+		observer.observe(rootNode, {
+			childList: true,
+			subtree: true
+		});
+		onCleanup(() => observer.disconnect());
+	});
+	const getRootProps = () => ({
+		...parts.root.attrs,
+		id: rootId,
+		role: "group",
+		"data-disabled": dataAttr(fieldProps.disabled),
+		"data-invalid": dataAttr(fieldProps.invalid),
+		"data-readonly": dataAttr(fieldProps.readOnly)
+	});
+	const targetControlId = fieldProps.target ? `field::${id}::item::${fieldProps.target}` : void 0;
+	const getLabelProps = () => ({
+		...parts.label.attrs,
+		id: labelId,
+		"data-disabled": dataAttr(fieldProps.disabled),
+		"data-invalid": dataAttr(fieldProps.invalid),
+		"data-readonly": dataAttr(fieldProps.readOnly),
+		"data-required": dataAttr(fieldProps.required),
+		htmlFor: targetControlId ?? id
+	});
+	const errorMessageId = createMemo(() => hasErrorText() && fieldProps.invalid ? errorTextId : void 0);
+	const getControlProps = () => ({
+		"aria-describedby": hasHelperText() ? helperTextId : void 0,
+		"aria-errormessage": errorMessageId(),
+		"aria-invalid": ariaAttr(fieldProps.invalid),
+		"data-invalid": dataAttr(fieldProps.invalid),
+		"data-required": dataAttr(fieldProps.required),
+		"data-readonly": dataAttr(fieldProps.readOnly),
+		id,
+		required: fieldProps.required,
+		disabled: fieldProps.disabled,
+		readOnly: fieldProps.readOnly || void 0
+	});
+	const getInputProps = () => ({
+		...getControlProps(),
+		...parts.input.attrs
+	});
+	const getTextareaProps = () => ({
+		...getControlProps(),
+		...parts.textarea.attrs
+	});
+	const getSelectProps = () => ({
+		...getControlProps(),
+		...parts.select.attrs
+	});
+	const getHelperTextProps = () => ({
+		id: helperTextId,
+		...parts.helperText.attrs,
+		"data-disabled": dataAttr(fieldProps.disabled)
+	});
+	const getErrorTextProps = () => ({
+		id: errorTextId,
+		...parts.errorText.attrs,
+		"aria-live": "polite"
+	});
+	const getRequiredIndicatorProps = () => ({
+		"aria-hidden": true,
+		...parts.requiredIndicator.attrs
+	});
+	return createMemo(() => ({
+		ariaDescribedby: hasHelperText() ? helperTextId : void 0,
+		ids: {
+			control: id,
+			label: labelId,
+			errorText: errorTextId,
+			helperText: helperTextId
+		},
+		refs: { rootRef: setRootRef },
+		disabled: fieldProps.disabled,
+		invalid: fieldProps.invalid,
+		readOnly: fieldProps.readOnly,
+		required: fieldProps.required,
+		getLabelProps,
+		getRootProps,
+		getInputProps,
+		getTextareaProps,
+		getSelectProps,
+		getHelperTextProps,
+		getErrorTextProps,
+		getRequiredIndicatorProps
+	}));
+};
+//#endregion
+//#region src/components/field/root.tsx
+const FieldRoot = (props) => {
+	const [useFieldProps, localProps] = createSplitProps()(props, [
+		"id",
+		"ids",
+		"disabled",
+		"invalid",
+		"readOnly",
+		"required",
+		"target"
+	]);
+	const field = useField(useFieldProps);
+	const mergedProps = mergeProps$2(() => field().getRootProps(), localProps);
+	return createComponent(FieldProvider, {
+		value: field,
+		get children() {
+			return createComponent(wire.div, mergeProps$1(mergedProps, { ref(r$) {
+				var _ref$ = composeRefs(field().refs.rootRef, props.ref);
+				typeof _ref$ === "function" && _ref$(r$);
+			} }));
+		}
+	});
+};
+//#endregion
+//#region src/components/field/root-provider.tsx
+const FieldRootProvider = (props) => {
+	const [{ value: field }, localProps] = createSplitProps()(props, ["value"]);
+	const mergedProps = mergeProps$2(() => field().getRootProps(), localProps);
+	return createComponent(FieldProvider, {
+		value: field,
+		get children() {
+			return createComponent(wire.div, mergedProps);
+		}
+	});
+};
+//#endregion
+//#region src/components/field/select.tsx
+const FieldSelect = (props) => {
+	const field = useFieldContext();
+	const mergedProps = mergeProps$2(() => field?.().getSelectProps(), props);
+	return createComponent(wire.select, mergedProps);
+};
+//#endregion
+//#region src/components/field/textarea.tsx
+const FieldTextarea = (props) => {
+	const field = useFieldContext();
+	let textareaRef;
+	const [autoresizeProps, textareaProps] = splitProps(props, ["autoresize"]);
+	const mergedProps = mergeProps$2(() => field?.().getTextareaProps(), () => ({ style: { resize: autoresizeProps.autoresize ? "none" : void 0 } }), textareaProps);
+	onMount(() => {
+		if (!autoresizeProps.autoresize) return;
+		const cleanup = autoresizeTextarea(textareaRef);
+		onCleanup(() => cleanup?.());
+	});
+	return createComponent(wire.textarea, mergeProps$1(mergedProps, { ref(r$) {
+		var _ref$ = composeRefs((el) => textareaRef = el, props.ref);
+		typeof _ref$ === "function" && _ref$(r$);
+	} }));
+};
+//#endregion
+//#region src/components/field/field.ts
+var field_exports = /* @__PURE__ */ __exportAll({
+	Context: () => FieldContext,
+	ErrorText: () => FieldErrorText,
+	HelperText: () => FieldHelperText,
+	Input: () => FieldInput,
+	Item: () => FieldItem,
+	Label: () => FieldLabel,
+	RequiredIndicator: () => FieldRequiredIndicator,
+	Root: () => FieldRoot,
+	RootProvider: () => FieldRootProvider,
+	Select: () => FieldSelect,
+	Textarea: () => FieldTextarea
+});
+//#endregion
+export { FieldRoot as a, FieldLabel as c, FieldInput as d, FieldHelperText as f, useFieldContext as h, FieldRootProvider as i, FieldItem as l, FieldContext as m, FieldTextarea as n, useField as o, FieldErrorText as p, FieldSelect as r, FieldRequiredIndicator as s, field_exports as t, fieldAnatomy as u };

package/dist/field-R5jVNdtK.jsx

@@ -0,0 +1,282 @@
+import { t as __exportAll } from "./rolldown-runtime-D7D4PA-g.jsx";
+import { a as mergeProps$1, d as createContext$1, l as createSplitProps, u as composeRefs } from "./core-7QKBNp9p.jsx";
+import { t as wire } from "./factory-DRw_slzE.jsx";
+import { l as useEnvironmentContext } from "./providers-CqNHqLpB.jsx";
+import { u as useFieldsetContext } from "./fieldset-5shfE0Z5.jsx";
+import { Show, createMemo, createSignal, createUniqueId, mergeProps, onCleanup, onMount, splitProps } from "solid-js";
+import { ariaAttr, dataAttr } from "@wirekyt/dom/dom-query";
+import { createAnatomy } from "@wirekyt/dom/anatomy";
+import { autoresizeTextarea } from "@wirekyt/dom/auto-resize";
+//#region src/components/field/use-context.ts
+const [FieldProvider, useFieldContext] = createContext$1({
+	hookName: "useFieldContext",
+	providerName: "<FieldProvider />",
+	strict: false
+});
+//#endregion
+//#region src/components/field/context.tsx
+const FieldContext = (props) => props.children(useFieldContext());
+//#endregion
+//#region src/components/field/error-text.tsx
+const FieldErrorText = (props) => {
+	const field = useFieldContext();
+	const mergedProps = mergeProps$1(() => field().getErrorTextProps(), props);
+	return <Show when={field?.().invalid}>
+      <wire.span {...mergedProps} />
+    </Show>;
+};
+//#endregion
+//#region src/components/field/helper-text.tsx
+const FieldHelperText = (props) => {
+	const field = useFieldContext();
+	const mergedProps = mergeProps$1(() => field().getHelperTextProps(), props);
+	return <wire.span {...mergedProps} />;
+};
+//#endregion
+//#region src/components/field/input.tsx
+const FieldInput = (props) => {
+	const field = useFieldContext();
+	const mergedProps = mergeProps$1(() => field?.().getInputProps(), props);
+	return <wire.input {...mergedProps} />;
+};
+//#endregion
+//#region src/components/field/anatomy.ts
+const fieldAnatomy = createAnatomy("field").parts("root", "errorText", "helperText", "input", "label", "select", "textarea", "requiredIndicator");
+const parts = fieldAnatomy.build();
+//#endregion
+//#region src/components/field/item.tsx
+const FieldItem = (props) => {
+	const parentField = useFieldContext();
+	const itemField = createMemo(() => {
+		const parent = parentField?.();
+		if (!parent) throw new Error("Field.Item must be used within Field.Root");
+		const controlId = `field::${parent.ids.control}::item::${props.value}`;
+		const labelId = `${controlId}::label`;
+		const getControlProps = () => ({
+			...parent.getInputProps(),
+			id: controlId
+		});
+		return (() => ({
+			...parent,
+			ids: {
+				...parent.ids,
+				control: controlId,
+				label: labelId
+			},
+			getLabelProps: () => ({
+				...parent.getLabelProps(),
+				id: labelId,
+				htmlFor: controlId
+			}),
+			getInputProps: () => ({
+				...getControlProps(),
+				...parts.input.attrs
+			}),
+			getSelectProps: () => ({
+				...getControlProps(),
+				...parts.select.attrs
+			}),
+			getTextareaProps: () => ({
+				...getControlProps(),
+				...parts.textarea.attrs
+			})
+		}));
+	});
+	return <FieldProvider value={itemField()}>{props.children}</FieldProvider>;
+};
+//#endregion
+//#region src/components/field/label.tsx
+const FieldLabel = (props) => {
+	const field = useFieldContext();
+	const mergedProps = mergeProps$1(() => field?.().getLabelProps(), props);
+	return <wire.label {...mergedProps} />;
+};
+//#endregion
+//#region src/components/field/required-indicator.tsx
+const FieldRequiredIndicator = (props) => {
+	const field = useFieldContext();
+	const mergedProps = mergeProps$1(() => field().getRequiredIndicatorProps(), props);
+	return <Show when={field().required} fallback={props.fallback}>
+      <wire.span {...mergedProps}>{props.children ?? "*"}</wire.span>
+    </Show>;
+};
+//#endregion
+//#region src/components/field/use.ts
+const useField = (props) => {
+	const fieldset = useFieldsetContext();
+	const env = useEnvironmentContext();
+	const fieldProps = mergeProps({
+		disabled: Boolean(fieldset?.().disabled),
+		required: false,
+		invalid: false,
+		readOnly: false
+	}, props);
+	const [hasErrorText, setHasErrorText] = createSignal(false);
+	const [hasHelperText, setHasHelperText] = createSignal(false);
+	const id = fieldProps.id ?? createUniqueId();
+	const [rootRef, setRootRef] = createSignal(void 0);
+	const rootId = fieldProps.ids?.control ?? `field::${id}`;
+	const errorTextId = fieldProps.ids?.errorText ?? `field::${id}::error-text`;
+	const helperTextId = fieldProps.ids?.helperText ?? `field::${id}::helper-text`;
+	const labelId = fieldProps.ids?.label ?? `field::${id}::label`;
+	onMount(() => {
+		const rootNode = rootRef();
+		if (!rootNode) return;
+		const checkTextElements = () => {
+			const docOrShadowRoot = env().getRootNode();
+			setHasErrorText(!!docOrShadowRoot.getElementById(errorTextId));
+			setHasHelperText(!!docOrShadowRoot.getElementById(helperTextId));
+		};
+		checkTextElements();
+		const observer = new (env().getWindow()).MutationObserver(checkTextElements);
+		observer.observe(rootNode, {
+			childList: true,
+			subtree: true
+		});
+		onCleanup(() => observer.disconnect());
+	});
+	const getRootProps = () => ({
+		...parts.root.attrs,
+		id: rootId,
+		role: "group",
+		"data-disabled": dataAttr(fieldProps.disabled),
+		"data-invalid": dataAttr(fieldProps.invalid),
+		"data-readonly": dataAttr(fieldProps.readOnly)
+	});
+	const targetControlId = fieldProps.target ? `field::${id}::item::${fieldProps.target}` : void 0;
+	const getLabelProps = () => ({
+		...parts.label.attrs,
+		id: labelId,
+		"data-disabled": dataAttr(fieldProps.disabled),
+		"data-invalid": dataAttr(fieldProps.invalid),
+		"data-readonly": dataAttr(fieldProps.readOnly),
+		"data-required": dataAttr(fieldProps.required),
+		htmlFor: targetControlId ?? id
+	});
+	const errorMessageId = createMemo(() => hasErrorText() && fieldProps.invalid ? errorTextId : void 0);
+	const getControlProps = () => ({
+		"aria-describedby": hasHelperText() ? helperTextId : void 0,
+		"aria-errormessage": errorMessageId(),
+		"aria-invalid": ariaAttr(fieldProps.invalid),
+		"data-invalid": dataAttr(fieldProps.invalid),
+		"data-required": dataAttr(fieldProps.required),
+		"data-readonly": dataAttr(fieldProps.readOnly),
+		id,
+		required: fieldProps.required,
+		disabled: fieldProps.disabled,
+		readOnly: fieldProps.readOnly || void 0
+	});
+	const getInputProps = () => ({
+		...getControlProps(),
+		...parts.input.attrs
+	});
+	const getTextareaProps = () => ({
+		...getControlProps(),
+		...parts.textarea.attrs
+	});
+	const getSelectProps = () => ({
+		...getControlProps(),
+		...parts.select.attrs
+	});
+	const getHelperTextProps = () => ({
+		id: helperTextId,
+		...parts.helperText.attrs,
+		"data-disabled": dataAttr(fieldProps.disabled)
+	});
+	const getErrorTextProps = () => ({
+		id: errorTextId,
+		...parts.errorText.attrs,
+		"aria-live": "polite"
+	});
+	const getRequiredIndicatorProps = () => ({
+		"aria-hidden": true,
+		...parts.requiredIndicator.attrs
+	});
+	return createMemo(() => ({
+		ariaDescribedby: hasHelperText() ? helperTextId : void 0,
+		ids: {
+			control: id,
+			label: labelId,
+			errorText: errorTextId,
+			helperText: helperTextId
+		},
+		refs: { rootRef: setRootRef },
+		disabled: fieldProps.disabled,
+		invalid: fieldProps.invalid,
+		readOnly: fieldProps.readOnly,
+		required: fieldProps.required,
+		getLabelProps,
+		getRootProps,
+		getInputProps,
+		getTextareaProps,
+		getSelectProps,
+		getHelperTextProps,
+		getErrorTextProps,
+		getRequiredIndicatorProps
+	}));
+};
+//#endregion
+//#region src/components/field/root.tsx
+const FieldRoot = (props) => {
+	const [useFieldProps, localProps] = createSplitProps()(props, [
+		"id",
+		"ids",
+		"disabled",
+		"invalid",
+		"readOnly",
+		"required",
+		"target"
+	]);
+	const field = useField(useFieldProps);
+	const mergedProps = mergeProps$1(() => field().getRootProps(), localProps);
+	return <FieldProvider value={field}>
+      <wire.div {...mergedProps} ref={composeRefs(field().refs.rootRef, props.ref)} />
+    </FieldProvider>;
+};
+//#endregion
+//#region src/components/field/root-provider.tsx
+const FieldRootProvider = (props) => {
+	const [{ value: field }, localProps] = createSplitProps()(props, ["value"]);
+	const mergedProps = mergeProps$1(() => field().getRootProps(), localProps);
+	return <FieldProvider value={field}>
+      <wire.div {...mergedProps} />
+    </FieldProvider>;
+};
+//#endregion
+//#region src/components/field/select.tsx
+const FieldSelect = (props) => {
+	const field = useFieldContext();
+	const mergedProps = mergeProps$1(() => field?.().getSelectProps(), props);
+	return <wire.select {...mergedProps} />;
+};
+//#endregion
+//#region src/components/field/textarea.tsx
+const FieldTextarea = (props) => {
+	const field = useFieldContext();
+	let textareaRef;
+	const [autoresizeProps, textareaProps] = splitProps(props, ["autoresize"]);
+	const mergedProps = mergeProps$1(() => field?.().getTextareaProps(), () => ({ style: { resize: autoresizeProps.autoresize ? "none" : void 0 } }), textareaProps);
+	onMount(() => {
+		if (!autoresizeProps.autoresize) return;
+		const cleanup = autoresizeTextarea(textareaRef);
+		onCleanup(() => cleanup?.());
+	});
+	return <wire.textarea {...mergedProps} ref={composeRefs((el) => textareaRef = el, props.ref)} />;
+};
+//#endregion
+//#region src/components/field/field.ts
+var field_exports = /* @__PURE__ */ __exportAll({
+	Context: () => FieldContext,
+	ErrorText: () => FieldErrorText,
+	HelperText: () => FieldHelperText,
+	Input: () => FieldInput,
+	Item: () => FieldItem,
+	Label: () => FieldLabel,
+	RequiredIndicator: () => FieldRequiredIndicator,
+	Root: () => FieldRoot,
+	RootProvider: () => FieldRootProvider,
+	Select: () => FieldSelect,
+	Textarea: () => FieldTextarea
+});
+//#endregion
+export { FieldRoot as a, FieldLabel as c, FieldInput as d, FieldHelperText as f, useFieldContext as h, FieldRootProvider as i, FieldItem as l, FieldContext as m, FieldTextarea as n, useField as o, FieldErrorText as p, FieldSelect as r, FieldRequiredIndicator as s, field_exports as t, fieldAnatomy as u };