@bysages/solid 0.4.1 → 0.4.2

package/dist/components/clipboard/index.d.mts

@@ -10,7 +10,20 @@ type ClipboardOwnProps = {
   size?: "sm" | "md" | "lg";
 };
 declare function ClipboardRoot(props: ClipboardRootProps & ClipboardOwnProps): import("solid-js").JSX.Element;
-export declare const Clipboard: typeof ClipboardRoot & Omit<typeof Clipboard$1, "Root"> & {
+export interface ClipboardFacadeProps {
+  value?: string;
+  defaultValue?: string;
+  disabled?: boolean;
+  label?: string;
+  placeholder?: string;
+  /** One rung of the control-height ladder for the value field and its copy seal. */
+  size?: "sm" | "md" | "lg";
+  onValueChange?: (value: string) => void;
+}
+/** The complete copy field behind one value: a labelled read-only input and
+ * its confirmed copy trigger. */
+declare function ClipboardFacade(props: ClipboardFacadeProps): import("solid-js").JSX.Element;
+export declare const Clipboard: typeof ClipboardFacade & Omit<typeof Clipboard$1, "Root"> & {
   Root: typeof ClipboardRoot;
 };
 //#endregion

package/dist/components/clipboard/index.mjs

@@ -1,6 +1,7 @@
 import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
+import { r as iconNode } from "../../icon-DTqmJCd5.mjs";
 import { t as useElementId } from "../../id-2ygNzPHF.mjs";
-import { createComponent, mergeProps } from "@solidjs/web";
+import { createComponent, memo, mergeProps } from "@solidjs/web";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { splitProps } from "solid-js";
 import { Clipboard as Clipboard$1 } from "@ark-ui/solid/clipboard";
@@ -18,7 +19,61 @@ function ClipboardRoot(props) {
 		}
 	}));
 }
-const Clipboard = defineFamily(ClipboardRoot, {
+/** The complete copy field behind one value: a labelled read-only input and
+* its confirmed copy trigger. */
+function ClipboardFacade(props) {
+	return createComponent(ClipboardRoot, mergeProps({
+		get size() {
+			return props.size ?? "md";
+		},
+		get defaultValue() {
+			return props.defaultValue;
+		}
+	}, () => {
+		return props.value === void 0 ? {} : { value: props.value };
+	}, {
+		onValueChange: (details) => props.onValueChange?.(details.value),
+		get children() {
+			return [memo(() => {
+				return memo(() => {
+					return !!props.label;
+				})() ? createComponent(Clipboard$1.Label, { get children() {
+					return props.label;
+				} }) : null;
+			}), createComponent(Clipboard$1.Control, { get children() {
+				return [createComponent(Clipboard$1.Input, {
+					get placeholder() {
+						return props.placeholder;
+					},
+					get disabled() {
+						return props.disabled;
+					}
+				}), createComponent(Clipboard$1.Trigger, {
+					get disabled() {
+						return props.disabled;
+					},
+					get children() {
+						return createComponent(Clipboard$1.Indicator, {
+							get copied() {
+								return iconNode("check", {
+									width: "14",
+									height: "14"
+								});
+							},
+							get children() {
+								return iconNode("copy", {
+									width: "14",
+									height: "14"
+								});
+							}
+						});
+					}
+				})];
+			} })];
+		}
+	}));
+}
+const Clipboard = defineFamily(ClipboardFacade, {
 	...Clipboard$1,
 	Root: ClipboardRoot
 });

package/dist/components/date-input/index.d.mts

@@ -1,4 +1,4 @@
-import { DateInput as DateInput$1, DateInputRootProps } from "@ark-ui/solid/date-input";
+import { DateInput as DateInput$1, DateInputDateValue, DateInputRootProps } from "@ark-ui/solid/date-input";
 //#region src/components/date-input/index.d.ts
 /** Ark's DateInput, dressed in the paper-and-ink system: a segmented
  * field where the focused segment takes the flat ink fill. The API is
@@ -9,7 +9,21 @@ type DateInputOwnProps = {
   size?: "sm" | "md" | "lg";
 };
 declare function DateInputRoot(props: DateInputRootProps & DateInputOwnProps): import("solid-js").JSX.Element;
-export declare const DateInput: typeof DateInputRoot & Omit<typeof DateInput$1, "Root"> & {
+type DateInputFacadeValue = DateInputDateValue | DateInputDateValue[];
+export interface DateInputFacadeProps {
+  value?: DateInputFacadeValue;
+  defaultValue?: DateInputFacadeValue;
+  disabled?: boolean;
+  invalid?: boolean;
+  required?: boolean;
+  label?: string;
+  /** One rung of the control-height ladder for the segmented field. */
+  size?: "sm" | "md" | "lg";
+  onValueChange?: (value: DateInputDateValue[]) => void;
+}
+/** The complete segmented date field behind one value. */
+declare function DateInputFacade(props: DateInputFacadeProps): import("solid-js").JSX.Element;
+export declare const DateInput: typeof DateInputFacade & Omit<typeof DateInput$1, "Root"> & {
   Root: typeof DateInputRoot;
 };
 //#endregion

package/dist/components/date-input/index.mjs

@@ -2,7 +2,7 @@ import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
 import { t as useElementId } from "../../id-2ygNzPHF.mjs";
 import { createComponent, mergeProps } from "@solidjs/web";
 import { injectComponentStyle } from "@bysages/core/styling";
-import { splitProps } from "solid-js";
+import { Show, splitProps } from "solid-js";
 import { DateInput as DateInput$1 } from "@ark-ui/solid/date-input";
 //#region src/components/date-input/index.tsx
 function DateInputRoot(props) {
@@ -17,7 +17,56 @@ function DateInputRoot(props) {
 		}
 	}));
 }
-const DateInput = defineFamily(DateInputRoot, {
+function toDateInputValue(value) {
+	if (value === void 0) return void 0;
+	return Array.isArray(value) ? value : [value];
+}
+/** The complete segmented date field behind one value. */
+function DateInputFacade(props) {
+	injectComponentStyle("date-input");
+	return createComponent(DateInputRoot, mergeProps({
+		get size() {
+			return props.size ?? "md";
+		},
+		get defaultValue() {
+			return toDateInputValue(props.defaultValue);
+		},
+		get disabled() {
+			return props.disabled;
+		},
+		get invalid() {
+			return props.invalid;
+		},
+		get required() {
+			return props.required;
+		}
+	}, () => {
+		return props.value === void 0 ? {} : { value: toDateInputValue(props.value) };
+	}, {
+		onValueChange: (details) => props.onValueChange?.(details.value),
+		get children() {
+			return [
+				createComponent(Show, {
+					get when() {
+						return props.label;
+					},
+					get children() {
+						return createComponent(DateInput$1.Label, { get children() {
+							return props.label;
+						} });
+					}
+				}),
+				createComponent(DateInput$1.Control, { get children() {
+					return createComponent(DateInput$1.SegmentGroup, { get children() {
+						return createComponent(DateInput$1.SegmentContext, { children: (segment) => createComponent(DateInput$1.Segment, { segment }) });
+					} });
+				} }),
+				createComponent(DateInput$1.HiddenInput, {})
+			];
+		}
+	}));
+}
+const DateInput = defineFamily(DateInputFacade, {
 	...DateInput$1,
 	Root: DateInputRoot
 });

package/dist/components/date-picker/index.d.mts

@@ -1,4 +1,4 @@
-import { DatePicker as DatePicker$1, DatePickerRootProps } from "@ark-ui/solid/date-picker";
+import { DatePicker as DatePicker$1, DatePickerDateRangePreset, DatePickerRootProps, DateValue } from "@ark-ui/solid/date-picker";
 //#region src/components/date-picker/index.d.ts
 /** Ark's DatePicker, dressed in the paper-and-ink system: the popup
  * dissolves in on elevation, selected days take the flat ink fill, and
@@ -11,7 +11,32 @@ type DatePickerOwnProps = {
   size?: "sm" | "md" | "lg";
 };
 declare function DatePickerRoot(props: DatePickerRootProps & DatePickerOwnProps): import("solid-js").JSX.Element;
-export declare const DatePicker: typeof DatePickerRoot & Omit<typeof DatePicker$1, "Root"> & {
+type DatePickerFacadeValue = DateValue | DateValue[];
+/** One quick choice in the popup: a named range, or exact dates. */
+export type DatePickerPreset = {
+  label: string;
+  value: DatePickerDateRangePreset | DateValue[];
+};
+/** The complete picker behind one date: the field opens a single day grid,
+ * while ranges, multiple selection, and custom views remain anatomy work. */
+export interface DatePickerFacadeProps {
+  value?: DatePickerFacadeValue;
+  defaultValue?: DatePickerFacadeValue;
+  disabled?: boolean;
+  invalid?: boolean;
+  required?: boolean;
+  label?: string;
+  placeholder?: string;
+  /** One rung of the control-height ladder for the field row. */
+  size?: "sm" | "md" | "lg";
+  /** Quick choices rendered above the calendar; the picker's own preset
+   * machine resolves named ranges. */
+  presets?: DatePickerPreset[];
+  onValueChange?: (value: DateValue[]) => void;
+}
+declare function DatePickerFacade(props: DatePickerFacadeProps): import("solid-js").JSX.Element;
+type DatePickerParts = Omit<typeof DatePicker$1, "Root"> & {
   Root: typeof DatePickerRoot;
 };
+export declare const DatePicker: typeof DatePickerFacade & DatePickerParts;
 //#endregion

package/dist/components/date-picker/index.mjs

@@ -1,10 +1,12 @@
 import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
+import { r as iconNode } from "../../icon-DTqmJCd5.mjs";
 import { t as useElementId } from "../../id-2ygNzPHF.mjs";
-import { createComponent, mergeProps } from "@solidjs/web";
+import { createComponent, insert, memo, mergeProps, template } from "@solidjs/web";
 import { injectComponentStyle } from "@bysages/core/styling";
-import { splitProps } from "solid-js";
+import { For, Show, splitProps } from "solid-js";
 import { DatePicker as DatePicker$1 } from "@ark-ui/solid/date-picker";
 //#region src/components/date-picker/index.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<div data-scope=date-picker data-part=presets>`);
 function DatePickerRoot(props) {
 	const [own, rest] = splitProps(props, ["size"]);
 	const id = useElementId("date-picker", () => rest.id);
@@ -17,7 +19,154 @@ function DatePickerRoot(props) {
 		}
 	}));
 }
-const DatePicker = defineFamily(DatePickerRoot, {
+function toDatePickerValue(value) {
+	if (value === void 0) return void 0;
+	return Array.isArray(value) ? value : [value];
+}
+function DatePickerFacade(props) {
+	injectComponentStyle("date-picker");
+	return createComponent(DatePickerRoot, mergeProps({
+		get size() {
+			return props.size ?? "md";
+		},
+		get defaultValue() {
+			return toDatePickerValue(props.defaultValue);
+		},
+		get disabled() {
+			return props.disabled;
+		},
+		get invalid() {
+			return props.invalid;
+		},
+		get placeholder() {
+			return props.placeholder;
+		},
+		get required() {
+			return props.required;
+		}
+	}, () => {
+		return props.value === void 0 ? {} : { value: toDatePickerValue(props.value) };
+	}, {
+		onValueChange: (details) => props.onValueChange?.(details.value),
+		get children() {
+			return [
+				createComponent(Show, {
+					get when() {
+						return props.label;
+					},
+					get children() {
+						return createComponent(DatePicker$1.Label, { get children() {
+							return props.label;
+						} });
+					}
+				}),
+				createComponent(DatePicker$1.Control, { get children() {
+					return [createComponent(DatePicker$1.Input, { get "aria-label"() {
+						return memo(() => {
+							return !!props.label;
+						})() ? void 0 : props.placeholder;
+					} }), createComponent(DatePicker$1.Trigger, { get children() {
+						return iconNode("calendar", {
+							width: "16",
+							height: "16"
+						});
+					} })];
+				} }),
+				createComponent(DatePicker$1.Positioner, { get children() {
+					return createComponent(DatePicker$1.Content, { get children() {
+						return createComponent(DatePicker$1.View, {
+							view: "day",
+							get children() {
+								return createComponent(DatePicker$1.Context, { children: (dp) => [
+									createComponent(Show, {
+										get when() {
+											return props.presets?.length;
+										},
+										get children() {
+											var _el$ = _tmpl$();
+											insert(_el$, createComponent(For, {
+												get each() {
+													return props.presets;
+												},
+												children: (preset) => createComponent(DatePicker$1.PresetTrigger, {
+													get value() {
+														return preset.value;
+													},
+													get children() {
+														return preset.label;
+													}
+												})
+											}));
+											return _el$;
+										}
+									}),
+									createComponent(DatePicker$1.ViewControl, { get children() {
+										return [
+											createComponent(DatePicker$1.PrevTrigger, { get children() {
+												return iconNode("chevron-left", {
+													width: "14",
+													height: "14"
+												});
+											} }),
+											createComponent(DatePicker$1.ViewTrigger, { get children() {
+												return createComponent(DatePicker$1.RangeText, {});
+											} }),
+											createComponent(DatePicker$1.NextTrigger, { get children() {
+												return iconNode("chevron-right", {
+													width: "14",
+													height: "14"
+												});
+											} })
+										];
+									} }),
+									createComponent(DatePicker$1.Table, { get children() {
+										return [createComponent(DatePicker$1.TableHead, { get children() {
+											return createComponent(DatePicker$1.TableRow, { get children() {
+												return createComponent(For, {
+													get each() {
+														return dp().weekDays;
+													},
+													children: (day) => createComponent(DatePicker$1.TableHeader, {
+														get "aria-label"() {
+															return day.long;
+														},
+														get children() {
+															return day.narrow;
+														}
+													})
+												});
+											} });
+										} }), createComponent(DatePicker$1.TableBody, { get children() {
+											return createComponent(For, {
+												get each() {
+													return dp().weeks;
+												},
+												children: (week) => createComponent(DatePicker$1.TableRow, { get children() {
+													return createComponent(For, {
+														each: week,
+														children: (day) => createComponent(DatePicker$1.TableCell, {
+															value: day,
+															get children() {
+																return createComponent(DatePicker$1.TableCellTrigger, { get children() {
+																	return day.day;
+																} });
+															}
+														})
+													});
+												} })
+											});
+										} })];
+									} })
+								] });
+							}
+						});
+					} });
+				} })
+			];
+		}
+	}));
+}
+const DatePicker = defineFamily(DatePickerFacade, {
 	...DatePicker$1,
 	Root: DatePickerRoot
 });

package/dist/components/editable/index.d.mts

@@ -9,7 +9,23 @@ type EditableOwnProps = {
   size?: "sm" | "md" | "lg";
 };
 declare function EditableRoot(props: EditableRootProps & EditableOwnProps): import("solid-js").JSX.Element;
-export declare const Editable: typeof EditableRoot & Omit<typeof Editable$1, "Root"> & {
+export interface EditableFacadeProps {
+  value?: string;
+  defaultValue?: string;
+  label?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  invalid?: boolean;
+  required?: boolean;
+  /** One rung of the control-height ladder for the editing field. */
+  size?: "sm" | "md" | "lg";
+  onValueChange?: (value: string) => void;
+}
+/** The one-tag path: a named value with the house edit controls. Modes,
+ * custom triggers, and alternate editors stay on the anatomy. */
+declare function EditableFacade(props: EditableFacadeProps): import("solid-js").JSX.Element;
+type EditableParts = Omit<typeof Editable$1, "Root"> & {
   Root: typeof EditableRoot;
 };
+export declare const Editable: typeof EditableFacade & EditableParts;
 //#endregion

package/dist/components/editable/index.mjs

@@ -1,8 +1,9 @@
 import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
+import { r as iconNode } from "../../icon-DTqmJCd5.mjs";
 import { t as useElementId } from "../../id-2ygNzPHF.mjs";
 import { createComponent, mergeProps } from "@solidjs/web";
 import { injectComponentStyle } from "@bysages/core/styling";
-import { splitProps } from "solid-js";
+import { Show, splitProps } from "solid-js";
 import { Editable as Editable$1 } from "@ark-ui/solid/editable";
 //#region src/components/editable/index.tsx
 function EditableRoot(props) {
@@ -17,7 +18,84 @@ function EditableRoot(props) {
 		}
 	}));
 }
-const Editable = defineFamily(EditableRoot, {
+/** The one-tag path: a named value with the house edit controls. Modes,
+* custom triggers, and alternate editors stay on the anatomy. */
+function EditableFacade(props) {
+	injectComponentStyle("editable");
+	return createComponent(EditableRoot, mergeProps({
+		get size() {
+			return props.size ?? "md";
+		},
+		get disabled() {
+			return props.disabled;
+		},
+		get invalid() {
+			return props.invalid;
+		},
+		get required() {
+			return props.required;
+		},
+		get placeholder() {
+			return props.placeholder;
+		},
+		get defaultValue() {
+			return props.defaultValue;
+		}
+	}, () => {
+		return props.value === void 0 ? {} : { value: props.value };
+	}, {
+		onValueChange: (details) => props.onValueChange?.(details.value),
+		get children() {
+			return [
+				createComponent(Show, {
+					get when() {
+						return props.label;
+					},
+					get children() {
+						return createComponent(Editable$1.Label, { get children() {
+							return props.label;
+						} });
+					}
+				}),
+				createComponent(Editable$1.Area, { get children() {
+					return [createComponent(Editable$1.Preview, {}), createComponent(Editable$1.Input, {})];
+				} }),
+				createComponent(Editable$1.Control, { get children() {
+					return [
+						createComponent(Editable$1.EditTrigger, {
+							"aria-label": "Edit",
+							get children() {
+								return iconNode("pencil", {
+									width: 14,
+									height: 14
+								});
+							}
+						}),
+						createComponent(Editable$1.SubmitTrigger, {
+							"aria-label": "Submit",
+							get children() {
+								return iconNode("check", {
+									width: 14,
+									height: 14
+								});
+							}
+						}),
+						createComponent(Editable$1.CancelTrigger, {
+							"aria-label": "Cancel",
+							get children() {
+								return iconNode("x", {
+									width: 14,
+									height: 14
+								});
+							}
+						})
+					];
+				} })
+			];
+		}
+	}));
+}
+const Editable = defineFamily(EditableFacade, {
 	...Editable$1,
 	Root: EditableRoot
 });

package/dist/components/field/index.d.mts

@@ -6,7 +6,22 @@ import { Field as Field$1 } from "@ark-ui/solid/field";
  * Root, Label, Input, Textarea, Select, HelperText, ErrorText,
  * RequiredIndicator. */
 declare function FieldRoot(props: ComponentProps<typeof Field$1.Root>): import("solid-js").JSX.Element;
-export declare const Field: typeof FieldRoot & Omit<typeof Field$1, "Root"> & {
+/** The one-tag path for a simple text field; textarea, select, and
+ * custom controls keep the anatomy. */
+export interface FieldFacadeProps {
+  value?: string | number;
+  defaultValue?: string | number;
+  label?: string;
+  description?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  invalid?: boolean;
+  required?: boolean;
+  onValueChange?: (value: string) => void;
+}
+declare function FieldFacade(props: FieldFacadeProps): import("solid-js").JSX.Element;
+type FieldParts = Omit<typeof Field$1, "Root"> & {
   Root: typeof FieldRoot;
 };
+export declare const Field: typeof FieldFacade & FieldParts;
 //#endregion

package/dist/components/field/index.mjs

@@ -1,20 +1,68 @@
 import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
 import { t as useElementId } from "../../id-2ygNzPHF.mjs";
+import { createComponent } from "@solidjs/web";
 import { injectComponentStyle } from "@bysages/core/styling";
-import { createComponent, mergeProps } from "solid-js";
+import { Show, createComponent as createComponent$1, mergeProps as mergeProps$1 } from "solid-js";
 import { Field as Field$1 } from "@ark-ui/solid/field";
-//#region src/components/field/index.ts
+//#region src/components/field/index.tsx
 /** Ark's Field, dressed in the paper-and-ink system: a tracked label, a
 * border-and-halo control, and quiet help text. The API is Ark's own —
 * Root, Label, Input, Textarea, Select, HelperText, ErrorText,
 * RequiredIndicator. */
 function FieldRoot(props) {
 	const id = useElementId("field", () => props.id);
-	return createComponent(Field$1.Root, mergeProps(props, { get id() {
+	return createComponent$1(Field$1.Root, mergeProps$1(props, { get id() {
 		return id();
 	} }));
 }
-const Field = defineFamily(FieldRoot, {
+function FieldFacade(props) {
+	injectComponentStyle("field");
+	return createComponent(FieldRoot, {
+		get disabled() {
+			return props.disabled;
+		},
+		get invalid() {
+			return props.invalid;
+		},
+		get required() {
+			return props.required;
+		},
+		get children() {
+			return [
+				createComponent(Show, {
+					get when() {
+						return props.label;
+					},
+					get children() {
+						return createComponent(Field$1.Label, { get children() {
+							return props.label;
+						} });
+					}
+				}),
+				createComponent(Field$1.Input, {
+					get placeholder() {
+						return props.placeholder;
+					},
+					get value() {
+						return props.value ?? props.defaultValue;
+					},
+					onInput: (event) => props.onValueChange?.(event.currentTarget.value)
+				}),
+				createComponent(Show, {
+					get when() {
+						return props.description;
+					},
+					get children() {
+						return createComponent(Field$1.HelperText, { get children() {
+							return props.description;
+						} });
+					}
+				})
+			];
+		}
+	});
+}
+const Field = defineFamily(FieldFacade, {
 	...Field$1,
 	Root: FieldRoot
 });

package/dist/components/fieldset/index.d.mts

@@ -1,11 +1,23 @@
-import { ComponentProps } from "solid-js";
+import { ComponentProps, JSX } from "solid-js";
 import { Fieldset as Fieldset$1 } from "@ark-ui/solid/fieldset";
 //#region src/components/fieldset/index.d.ts
 /** Ark's Fieldset, dressed in the paper-and-ink system: a song-serif
  * legend heading a column of fields. The API is Ark's own — Root, Legend,
  * HelperText, ErrorText. */
-declare function FieldsetRoot(props: ComponentProps<typeof Fieldset$1.Root>): import("solid-js").JSX.Element;
-export declare const Fieldset: typeof FieldsetRoot & Omit<typeof Fieldset$1, "Root"> & {
+declare function FieldsetRoot(props: ComponentProps<typeof Fieldset$1.Root>): JSX.Element;
+/** The one-tag path: one label and optional description around the
+ * caller's controls; compound or bespoke groups keep the anatomy. */
+export interface FieldsetFacadeProps {
+  label?: string;
+  description?: string;
+  disabled?: boolean;
+  invalid?: boolean;
+  required?: boolean;
+  children?: JSX.Element;
+}
+declare function FieldsetFacade(props: FieldsetFacadeProps): JSX.Element;
+type FieldsetParts = Omit<typeof Fieldset$1, "Root"> & {
   Root: typeof FieldsetRoot;
 };
+export declare const Fieldset: typeof FieldsetFacade & FieldsetParts;
 //#endregion