@bysages/solid 0.3.0 → 0.4.0

package/dist/components/collapsible/index.mjs

@@ -1,10 +1,47 @@
+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 { injectComponentStyle } from "@bysages/core";
+import { createComponent, memo, mergeProps } from "@solidjs/web";
+import { createComponent as createComponent$1, mergeProps as mergeProps$1 } from "solid-js";
 import { Collapsible as Collapsible$1 } from "@ark-ui/solid/collapsible";
-//#region src/components/collapsible/index.ts
+//#region src/components/collapsible/index.tsx
 /** Ark's Collapsible, dressed in the paper-and-ink system: one control on
 * the paper, its panel dissolving open to the machine's measured height.
 * The API is Ark's own — Root, Trigger, Content, Indicator. */
-const Collapsible = Collapsible$1;
+function CollapsibleRoot(props) {
+	const id = useElementId("collapsible", () => props.id);
+	return createComponent$1(Collapsible$1.Root, mergeProps$1(props, { get id() {
+		return id();
+	} }));
+}
+function CollapsibleFacade(props) {
+	injectComponentStyle("collapsible");
+	return createComponent(CollapsibleRoot, mergeProps({ get disabled() {
+		return props.disabled;
+	} }, () => {
+		return props.open === void 0 ? {} : { open: props.open };
+	}, () => {
+		return props.defaultOpen === void 0 ? {} : { defaultOpen: props.defaultOpen };
+	}, {
+		onOpenChange: (details) => props.onOpenChange?.(details.open),
+		get children() {
+			return [createComponent(Collapsible$1.Trigger, { get children() {
+				return [memo(() => {
+					return props.label;
+				}), createComponent(Collapsible$1.Indicator, { get children() {
+					return iconNode("chevron-right");
+				} })];
+			} }), createComponent(Collapsible$1.Content, { get children() {
+				return props.children;
+			} })];
+		}
+	}));
+}
+const Collapsible = defineFamily(CollapsibleFacade, {
+	...Collapsible$1,
+	Root: CollapsibleRoot
+});
 injectComponentStyle("collapsible");
 //#endregion
 export { Collapsible };

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

@@ -1,4 +1,5 @@
-import { ColorPicker as ColorPicker$1, ColorPickerRootProps } from "@ark-ui/solid/color-picker";
+import { ComponentProps } from "solid-js";
+import { Color, ColorPicker as ColorPicker$1, ColorPickerRootProps } from "@ark-ui/solid/color-picker";
 //#region src/components/color-picker/index.d.ts
 /** Ark's ColorPicker, dressed in the paper-and-ink system: a seal-sized swatch
  * on the paper, opening into an area and channel sliders where pigment is
@@ -13,7 +14,17 @@ type ColorPickerOwnProps = {
   size?: "sm" | "md" | "lg";
 };
 declare function ColorPickerRoot(props: ColorPickerRootProps & ColorPickerOwnProps): import("solid-js").JSX.Element;
-export declare const ColorPicker: Omit<typeof ColorPicker$1, "Root"> & {
+type ColorPickerFacadeProps = Omit<ComponentProps<typeof ColorPickerRoot>, "children" | "defaultValue" | "disabled" | "invalid" | "label" | "onValueChange" | "required" | "value"> & {
+  value?: string | Color;
+  defaultValue?: string | Color;
+  disabled?: boolean;
+  invalid?: boolean;
+  required?: boolean;
+  label?: string;
+  onValueChange?: (value: unknown) => void;
+};
+declare function ColorPickerFacade(props: ColorPickerFacadeProps): import("solid-js").JSX.Element;
+export declare const ColorPicker: typeof ColorPickerFacade & Omit<typeof ColorPicker$1, "Root"> & {
   Root: typeof ColorPickerRoot;
 };
 //#endregion

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

@@ -1,18 +1,105 @@
+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 { injectComponentStyle } from "@bysages/core";
-import { createComponent, mergeProps } from "@solidjs/web";
-import { splitProps } from "solid-js";
-import { ColorPicker as ColorPicker$1 } from "@ark-ui/solid/color-picker";
+import { createComponent, insert, mergeProps, template } from "@solidjs/web";
+import { Show, splitProps } from "solid-js";
+import { ColorPicker as ColorPicker$1, parseColor } from "@ark-ui/solid/color-picker";
 //#region src/components/color-picker/index.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<div data-scope=color-picker data-part=channel-controls><div data-scope=color-picker data-part=channel-sliders><!><!>`);
 function ColorPickerRoot(props) {
 	const [own, rest] = splitProps(props, ["size"]);
-	return createComponent(ColorPicker$1.Root, mergeProps(rest, { get "data-size"() {
-		return own.size ?? "md";
-	} }));
+	const id = useElementId("color-picker", () => rest.id);
+	return createComponent(ColorPicker$1.Root, mergeProps(rest, {
+		get id() {
+			return id();
+		},
+		get "data-size"() {
+			return own.size ?? "md";
+		}
+	}));
 }
-const ColorPicker = {
+function ColorPickerFacade(props) {
+	injectComponentStyle("color-picker");
+	const toColor = (color) => typeof color === "string" ? parseColor(color) : color;
+	return createComponent(ColorPickerRoot, mergeProps(props, {
+		get value() {
+			return toColor(props.value);
+		},
+		get defaultValue() {
+			return toColor(props.defaultValue);
+		},
+		get disabled() {
+			return props.disabled;
+		},
+		get invalid() {
+			return props.invalid;
+		},
+		get required() {
+			return props.required;
+		},
+		onValueChange: (details) => props.onValueChange?.(details.value),
+		get children() {
+			return [
+				createComponent(Show, {
+					get when() {
+						return props.label;
+					},
+					get children() {
+						return createComponent(ColorPicker$1.Label, { get children() {
+							return props.label;
+						} });
+					}
+				}),
+				createComponent(ColorPicker$1.Control, { get children() {
+					return [createComponent(ColorPicker$1.ChannelInput, { channel: "hex" }), createComponent(ColorPicker$1.Trigger, { get children() {
+						return [createComponent(ColorPicker$1.TransparencyGrid, {}), createComponent(ColorPicker$1.ValueSwatch, {})];
+					} })];
+				} }),
+				createComponent(ColorPicker$1.Positioner, { get children() {
+					return createComponent(ColorPicker$1.Content, { get children() {
+						return [createComponent(ColorPicker$1.Area, { get children() {
+							return [createComponent(ColorPicker$1.AreaBackground, {}), createComponent(ColorPicker$1.AreaThumb, {})];
+						} }), (() => {
+							var _el$ = _tmpl$();
+							var _el$2 = _el$.firstChild;
+							var _el$3 = _el$2.firstChild;
+							var _el$4 = _el$3.nextSibling;
+							insert(_el$, createComponent(ColorPicker$1.EyeDropperTrigger, { get children() {
+								return iconNode("pipette", {
+									width: 14,
+									height: 14
+								});
+							} }), _el$2);
+							insert(_el$2, createComponent(ColorPicker$1.ChannelSlider, {
+								channel: "hue",
+								get children() {
+									return [createComponent(ColorPicker$1.ChannelSliderTrack, {}), createComponent(ColorPicker$1.ChannelSliderThumb, {})];
+								}
+							}), _el$3);
+							insert(_el$2, createComponent(ColorPicker$1.ChannelSlider, {
+								channel: "alpha",
+								get children() {
+									return [
+										createComponent(ColorPicker$1.TransparencyGrid, {}),
+										createComponent(ColorPicker$1.ChannelSliderTrack, {}),
+										createComponent(ColorPicker$1.ChannelSliderThumb, {})
+									];
+								}
+							}), _el$4);
+							return _el$;
+						})()];
+					} });
+				} }),
+				createComponent(ColorPicker$1.HiddenInput, {})
+			];
+		}
+	}));
+}
+const ColorPicker = defineFamily(ColorPickerFacade, {
 	...ColorPicker$1,
 	Root: ColorPickerRoot
-};
+});
 injectComponentStyle("color-picker");
 //#endregion
 export { ColorPicker };

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

@@ -11,7 +11,30 @@ type ComboboxOwnProps = {
   size?: "sm" | "md" | "lg";
 };
 declare function ComboboxRoot<T extends CollectionItem>(props: ComboboxRootProps<T> & ComboboxOwnProps): import("solid-js").JSX.Element;
-export declare const Combobox: Omit<typeof Combobox$1, "Root"> & {
+type ComboboxOption = {
+  label: string;
+  value: string;
+};
+type ComboboxFacadeValue = string | string[];
+type ComboboxParts = Omit<typeof Combobox$1, "Root"> & {
   Root: typeof ComboboxRoot;
 };
+export interface ComboboxFacadeProps {
+  value?: ComboboxFacadeValue;
+  defaultValue?: ComboboxFacadeValue;
+  options: ComboboxOption[];
+  multiple?: boolean;
+  /** Show the clear-value control when the machine allows it. */
+  clearable?: boolean;
+  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";
+  onValueChange?: (value?: ComboboxFacadeValue) => void;
+}
+declare function ComboboxFacade(props: ComboboxFacadeProps): import("solid-js").JSX.Element;
+export declare const Combobox: typeof ComboboxFacade & ComboboxParts;
 //#endregion

package/dist/components/combobox/index.mjs

@@ -1,18 +1,139 @@
+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 { injectComponentStyle } from "@bysages/core";
-import { createComponent, mergeProps } from "@solidjs/web";
-import { splitProps } from "solid-js";
-import { Combobox as Combobox$1 } from "@ark-ui/solid/combobox";
+import { createComponent, memo, mergeProps } from "@solidjs/web";
+import { For, Show, splitProps } from "solid-js";
+import { Combobox as Combobox$1, createListCollection } from "@ark-ui/solid/combobox";
 //#region src/components/combobox/index.tsx
 function ComboboxRoot(props) {
 	const [own, rest] = splitProps(props, ["size"]);
-	return createComponent(Combobox$1.Root, mergeProps(rest, { get "data-size"() {
-		return own.size ?? "md";
-	} }));
+	const id = useElementId("combobox", () => rest.id);
+	return createComponent(Combobox$1.Root, mergeProps(rest, {
+		get id() {
+			return id();
+		},
+		get "data-size"() {
+			return own.size ?? "md";
+		}
+	}));
 }
-const Combobox = {
+function toComboboxValue(value) {
+	if (value === void 0) return void 0;
+	return Array.isArray(value) ? value : [value];
+}
+function fromComboboxValue(value, multiple) {
+	return multiple ? value : value.at(0);
+}
+function ComboboxFacade(props) {
+	injectComponentStyle("combobox");
+	const collection = createListCollection({ items: props.options });
+	return createComponent(ComboboxRoot, mergeProps({
+		get size() {
+			return props.size ?? "md";
+		},
+		collection,
+		get defaultValue() {
+			return toComboboxValue(props.defaultValue);
+		},
+		get disabled() {
+			return props.disabled;
+		},
+		get invalid() {
+			return props.invalid;
+		},
+		get multiple() {
+			return props.multiple;
+		},
+		get placeholder() {
+			return props.placeholder;
+		},
+		get required() {
+			return props.required;
+		},
+		lazyMount: true,
+		unmountOnExit: true
+	}, () => {
+		return props.value === void 0 ? {} : { value: toComboboxValue(props.value) };
+	}, {
+		onValueChange: (event) => props.onValueChange?.(fromComboboxValue(event.value, props.multiple)),
+		get children() {
+			return [
+				createComponent(Show, {
+					get when() {
+						return props.label;
+					},
+					get children() {
+						return createComponent(Combobox$1.Label, { get children() {
+							return props.label;
+						} });
+					}
+				}),
+				createComponent(Combobox$1.Control, { get children() {
+					return [
+						createComponent(Combobox$1.Input, {
+							get "aria-label"() {
+								return memo(() => {
+									return !!props.label;
+								})() ? void 0 : props.placeholder;
+							},
+							get placeholder() {
+								return props.placeholder;
+							}
+						}),
+						createComponent(Show, {
+							get when() {
+								return props.clearable !== false;
+							},
+							get children() {
+								return createComponent(Combobox$1.ClearTrigger, { get children() {
+									return iconNode("x", {
+										width: "14",
+										height: "14"
+									});
+								} });
+							}
+						}),
+						createComponent(Combobox$1.Trigger, { get children() {
+							return iconNode("chevron-down", {
+								width: "16",
+								height: "16"
+							});
+						} })
+					];
+				} }),
+				createComponent(Combobox$1.Positioner, { get children() {
+					return createComponent(Combobox$1.Content, { get children() {
+						return [createComponent(Combobox$1.Empty, { children: "No results found" }), createComponent(Combobox$1.List, { get children() {
+							return createComponent(For, {
+								get each() {
+									return collection.items;
+								},
+								children: (item) => createComponent(Combobox$1.Item, {
+									item,
+									get children() {
+										return [createComponent(Combobox$1.ItemText, { get children() {
+											return item.label;
+										} }), createComponent(Combobox$1.ItemIndicator, { get children() {
+											return iconNode("check", {
+												width: "14",
+												height: "14"
+											});
+										} })];
+									}
+								})
+							});
+						} })];
+					} });
+				} })
+			];
+		}
+	}));
+}
+const Combobox = defineFamily(ComboboxFacade, {
 	...Combobox$1,
 	Root: ComboboxRoot
-};
+});
 injectComponentStyle("combobox");
 //#endregion
 export { Combobox };

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

@@ -1,3 +1,4 @@
+import { Dialog } from "../dialog/index.mjs";
 //#region src/components/command/index.d.ts
 export interface CommandEntry {
   label: string;
@@ -8,6 +9,7 @@ export interface CommandEntry {
   hint?: string;
 }
 export interface CommandProps {
+  id?: string;
   /** The commands on offer, grouped as they arrive. */
   items?: CommandEntry[];
   placeholder?: string;
@@ -39,5 +41,6 @@ export interface CommandProps {
  * so the combobox renders no separate popup and the machine's content
  * grafts onto the sheet's list.
  */
-export declare function Command(props: CommandProps): import("solid-js").JSX.Element;
+declare function CommandImpl(props: CommandProps): import("solid-js").JSX.Element;
+export declare const Command: typeof CommandImpl & typeof Dialog;
 //#endregion

package/dist/components/command/index.mjs

@@ -1,3 +1,7 @@
+import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
+import { t as useElementId } from "../../id-2ygNzPHF.mjs";
+import { n as useComponentMessages } from "../../use-component-messages-C4SCVYjD.mjs";
+import { Dialog as Dialog$1 } from "../dialog/index.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { createComponent, insert, mergeProps, spread, template } from "@solidjs/web";
 import { For, Show, createEffect, createSignal, splitProps } from "solid-js";
@@ -63,10 +67,12 @@ function Row(props) {
 * so the combobox renders no separate popup and the machine's content
 * grafts onto the sheet's list.
 */
-function Command(props) {
+function CommandImpl(props) {
 	injectComponentStyle("command");
 	injectComponentStyle("dialog");
+	const messages = useComponentMessages();
 	const [own, rest] = splitProps(props, [
+		"id",
 		"items",
 		"placeholder",
 		"open",
@@ -77,6 +83,7 @@ function Command(props) {
 		"onOpenChange",
 		"onInputValueChange"
 	]);
+	const id = useElementId("command", () => props.id);
 	const [internalOpen, setInternalOpen] = createSignal(false);
 	const [listOpen, setListOpen] = createSignal(true);
 	let fieldText = "";
@@ -116,6 +123,9 @@ function Command(props) {
 		}));
 	};
 	return createComponent(Dialog.Root, mergeProps(rest, {
+		get id() {
+			return id();
+		},
 		get open() {
 			return open();
 		},
@@ -132,9 +142,15 @@ function Command(props) {
 						var _el$7 = _tmpl$4();
 						spread(_el$7, [contentProps, {
 							"data-scope": "command",
-							"data-part": "content"
+							"data-part": "content",
+							get "aria-label"() {
+								return messages().command.palette;
+							}
 						}], true);
 						insert(_el$7, createComponent(Combobox.Root, {
+							get id() {
+								return `${id()}-palette`;
+							},
 							get collection() {
 								return collection();
 							},
@@ -164,7 +180,10 @@ function Command(props) {
 									spread(_el$8, [inputProps, {
 										type: "text",
 										get placeholder() {
-											return own.placeholder;
+											return own.placeholder ?? messages().command.search;
+										},
+										get "aria-label"() {
+											return messages().command.search;
 										},
 										"data-scope": "command",
 										"data-part": "input"
@@ -232,7 +251,7 @@ function Command(props) {
 										get children() {
 											var _el$11 = _tmpl$6();
 											insert(_el$11, () => {
-												return own.emptyText ?? "No matching commands";
+												return own.emptyText ?? messages().command.noMatches;
 											});
 											return _el$11;
 										}
@@ -249,5 +268,6 @@ function Command(props) {
 		}
 	}));
 }
+const Command = defineFamily(CommandImpl, Dialog$1);
 //#endregion
 export { Command };

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

@@ -13,5 +13,7 @@ export interface CommentProps extends JSX.HTMLAttributes<HTMLElement> {
  * the body carries the byline from `author` and `datetime`, the ink is
  * the children, and `actions` is the row of answers.
  */
-export declare function Comment(props: CommentProps): JSX.Element;
+export declare const Comment: ((props: CommentProps) => JSX.Element) & {
+  Root: (props: CommentProps) => JSX.Element;
+};
 //#endregion

package/dist/components/comment/index.mjs

@@ -1,3 +1,4 @@
+import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { createComponent, effect, insert, setAttribute, spread, template } from "@solidjs/web";
 import { Show, splitProps } from "solid-js";
@@ -13,7 +14,7 @@ var _tmpl$6 = /* @__PURE__ */ template(`<article><div data-scope=comment data-pa
 * the body carries the byline from `author` and `datetime`, the ink is
 * the children, and `actions` is the row of answers.
 */
-function Comment(props) {
+const Comment = withSelfRoot(function Comment(props) {
 	injectComponentStyle("comment");
 	const [own, rest] = splitProps(props, [
 		"author",
@@ -96,6 +97,6 @@ function Comment(props) {
 		}
 	}), _el$11);
 	return _el$;
-}
+});
 //#endregion
 export { Comment };

package/dist/components/config-provider/index.d.mts

@@ -1,4 +1,4 @@
-import { ThemeScene } from "@bysages/core";
+import { ComponentMessagesOverride, ThemeScene } from "@bysages/core";
 import { JSX } from "solid-js";
 //#region src/components/config-provider/index.d.ts
 /** The four density tiers the token layer's `[data-density]` selectors
@@ -22,6 +22,8 @@ export interface ConfigContext {
   dir?: "ltr" | "rtl";
   /** BCP-47 locale, landing as the native `lang` attribute. */
   locale?: string;
+  /** Wrapper-owned copy, resolved with `locale` and merged over its locale defaults leaf by leaf. */
+  messages?: ComponentMessagesOverride;
 }
 /** Solid context for the provider's snapshot — a custom part reads it
  * with `useContext(ConfigContextKey)`. */
@@ -36,6 +38,7 @@ export interface ConfigProviderProps extends JSX.HTMLAttributes<HTMLDivElement>
   accent?: string;
   dir?: "ltr" | "rtl";
   locale?: string;
+  messages?: ComponentMessagesOverride;
 }
 /**
  * The declarative host for global configuration: one element that both
@@ -44,5 +47,7 @@ export interface ConfigProviderProps extends JSX.HTMLAttributes<HTMLDivElement>
  * descendants through `useConfig`, so interactive behavior (formatting,
  * messages) and visual theming stay one decision.
  */
-export declare function ConfigProvider(props: ConfigProviderProps): JSX.Element;
+export declare const ConfigProvider: ((props: ConfigProviderProps) => JSX.Element) & {
+  Root: (props: ConfigProviderProps) => JSX.Element;
+};
 //#endregion

package/dist/components/config-provider/index.mjs

@@ -1,3 +1,4 @@
+import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
 import { createComponent, insert, spread, template } from "@solidjs/web";
 import { createContext, splitProps, useContext } from "solid-js";
 //#region src/components/config-provider/index.tsx
@@ -18,13 +19,14 @@ function useConfig() {
 * descendants through `useConfig`, so interactive behavior (formatting,
 * messages) and visual theming stay one decision.
 */
-function ConfigProvider(props) {
+const ConfigProvider = withSelfRoot(function ConfigProvider(props) {
 	const [own, rest] = splitProps(props, [
 		"density",
 		"scene",
 		"accent",
 		"dir",
 		"locale",
+		"messages",
 		"children"
 	]);
 	return createComponent(ConfigContextKey.Provider, {
@@ -33,7 +35,8 @@ function ConfigProvider(props) {
 			scene: own.scene,
 			accent: own.accent,
 			dir: own.dir,
-			locale: own.locale
+			locale: own.locale,
+			messages: own.messages
 		}),
 		get children() {
 			var _el$ = _tmpl$();
@@ -62,6 +65,6 @@ function ConfigProvider(props) {
 			return _el$;
 		}
 	});
-}
+});
 //#endregion
 export { ConfigContextKey, ConfigProvider, useConfig };

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

@@ -9,5 +9,7 @@ export interface ContainerProps extends JSX.HTMLAttributes<HTMLDivElement> {
    * than the measure. */
   padding?: boolean;
 }
-export declare function Container(props: ContainerProps): JSX.Element;
+export declare const Container: ((props: ContainerProps) => JSX.Element) & {
+  Root: (props: ContainerProps) => JSX.Element;
+};
 //#endregion

package/dist/components/container/index.mjs

@@ -1,9 +1,10 @@
+import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { spread, template } from "@solidjs/web";
 import { splitProps } from "solid-js";
 //#region src/components/container/index.tsx
 var _tmpl$ = /* @__PURE__ */ template(`<div>`);
-function Container(props) {
+const Container = withSelfRoot(function Container(props) {
 	injectComponentStyle("container");
 	const [own, rest] = splitProps(props, ["size", "padding"]);
 	var _el$ = _tmpl$();
@@ -18,6 +19,6 @@ function Container(props) {
 		}
 	}], false);
 	return _el$;
-}
+});
 //#endregion
 export { Container };

package/dist/components/data-view/index.d.mts

@@ -14,5 +14,7 @@ export interface DataViewProps extends JSX.HTMLAttributes<HTMLDivElement> {
  * renderItem, the view lays the records out as a ledger or a lattice
  * and — when a page size is given — pages them with the pagination
  * family's own parts rather than a second implementation. */
-export declare function DataView(props: DataViewProps): JSX.Element;
+export declare const DataView: ((props: DataViewProps) => JSX.Element) & {
+  Root: (props: DataViewProps) => JSX.Element;
+};
 //#endregion