@bysages/solid 0.4.3 → 0.5.0

package/dist/components/collapsible/index.mjs

@@ -1,11 +1,11 @@
-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, memo, mergeProps } from "@solidjs/web";
+import { t as defineFamily } from "../../family-B5HtE0on.mjs";
+import { r as iconNode } from "../../icon-DQqYA2fO.mjs";
+import { t as useElementId } from "../../id-DGvz-2rQ.mjs";
+import { createComponent, memo, mergeProps } from "solid-js/web";
 import { injectComponentStyle } from "@bysages/core/styling";
 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.tsx
+// 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. */
@@ -19,17 +19,11 @@ 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 };
-	}, {
+	} }, () => props.open === void 0 ? {} : { open: props.open }, () => 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 [memo(() => props.label), createComponent(Collapsible$1.Indicator, { get children() {
 					return iconNode("chevron-right");
 				} })];
 			} }), createComponent(Collapsible$1.Content, { get children() {
@@ -43,5 +37,4 @@ const Collapsible = defineFamily(CollapsibleFacade, {
 	Root: CollapsibleRoot
 });
 injectComponentStyle("collapsible");
-//#endregion
 export { Collapsible };

package/dist/components/collection/index.mjs

@@ -1,2 +1 @@
-import { createFileTreeCollection, createGridCollection, createListCollection, createTreeCollection, useAsyncList, useListCollection, useListSelection } from "@ark-ui/solid/collection";
-export { createFileTreeCollection, createGridCollection, createListCollection, createTreeCollection, useAsyncList, useListCollection, useListSelection };
+export { createFileTreeCollection, createGridCollection, createListCollection, createTreeCollection, useAsyncList, useListCollection, useListSelection } from "@ark-ui/solid/collection";

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

@@ -1,6 +1,5 @@
 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
  * picked. The API is Ark's own — Root, Label, Control, Trigger, Positioner,
@@ -12,6 +11,8 @@ import { Color, ColorPicker as ColorPicker$1, ColorPickerRootProps } from "@ark-
 type ColorPickerOwnProps = {
   /** One rung of the control-height ladder for the swatch seal. */
   size?: "sm" | "md" | "lg";
+  /** Saved colors rendered as a flat swatch row. */
+  swatches?: string[];
 };
 declare function ColorPickerRoot(props: ColorPickerRootProps & ColorPickerOwnProps): import("solid-js").JSX.Element;
 type ColorPickerFacadeProps = Omit<ComponentProps<typeof ColorPickerRoot>, "children" | "defaultValue" | "disabled" | "invalid" | "label" | "onValueChange" | "required" | "value"> & {
@@ -21,10 +22,12 @@ type ColorPickerFacadeProps = Omit<ComponentProps<typeof ColorPickerRoot>, "chil
   invalid?: boolean;
   required?: boolean;
   label?: string;
+  /** Saved colors rendered as a flat swatch row. */
+  swatches?: 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
+export {};

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

@@ -1,12 +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, insert, mergeProps, template } from "@solidjs/web";
+import { t as defineFamily } from "../../family-B5HtE0on.mjs";
+import { r as iconNode } from "../../icon-DQqYA2fO.mjs";
+import { t as useElementId } from "../../id-DGvz-2rQ.mjs";
+import { createComponent, insert, mergeProps, template } from "solid-js/web";
 import { injectComponentStyle } from "@bysages/core/styling";
-import { Show, splitProps } from "solid-js";
+import { For, 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><!><!>`);
+// 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"]);
 	const id = useElementId("color-picker", () => rest.id);
@@ -14,15 +14,16 @@ function ColorPickerRoot(props) {
 		get id() {
 			return id();
 		},
-		get "data-size"() {
+		get ["data-size"]() {
 			return own.size ?? "md";
 		}
 	}));
 }
 function ColorPickerFacade(props) {
 	injectComponentStyle("color-picker");
+	const [own, rootProps] = splitProps(props, ["size", "swatches"]);
 	const toColor = (color) => typeof color === "string" ? parseColor(color) : color;
-	return createComponent(ColorPickerRoot, mergeProps(props, {
+	return createComponent(ColorPickerRoot, mergeProps(rootProps, {
 		get value() {
 			return toColor(props.value);
 		},
@@ -58,37 +59,67 @@ function ColorPickerFacade(props) {
 				} }),
 				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",
+						return [
+							createComponent(ColorPicker$1.Area, { get children() {
+								return [createComponent(ColorPicker$1.AreaBackground, {}), createComponent(ColorPicker$1.AreaThumb, {})];
+							} }),
+							(() => {
+								var _el$ = _tmpl$(), _el$2 = _el$.firstChild;
+								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, {})];
+									}
+								}), null);
+								insert(_el$2, createComponent(ColorPicker$1.ChannelSlider, {
+									channel: "alpha",
+									get children() {
+										return [
+											createComponent(ColorPicker$1.TransparencyGrid, {}),
+											createComponent(ColorPicker$1.ChannelSliderTrack, {}),
+											createComponent(ColorPicker$1.ChannelSliderThumb, {})
+										];
+									}
+								}), null);
+								return _el$;
+							})(),
+							createComponent(Show, {
+								get when() {
+									return (own.swatches ?? []).length > 0;
+								},
 								get children() {
-									return [createComponent(ColorPicker$1.ChannelSliderTrack, {}), createComponent(ColorPicker$1.ChannelSliderThumb, {})];
+									return createComponent(ColorPicker$1.SwatchGroup, { get children() {
+										return createComponent(For, {
+											get each() {
+												return own.swatches;
+											},
+											children: (color) => createComponent(ColorPicker$1.SwatchTrigger, {
+												value: color,
+												get children() {
+													return createComponent(ColorPicker$1.Swatch, {
+														value: color,
+														get children() {
+															return createComponent(ColorPicker$1.SwatchIndicator, { get children() {
+																return iconNode("check", {
+																	width: "12",
+																	height: "12"
+																});
+															} });
+														}
+													});
+												}
+											})
+										});
+									} });
 								}
-							}), _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, {})
@@ -101,5 +132,4 @@ const ColorPicker = defineFamily(ColorPickerFacade, {
 	Root: ColorPickerRoot
 });
 injectComponentStyle("color-picker");
-//#endregion
 export { ColorPicker };

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

@@ -1,6 +1,5 @@
 import { CollectionItem } from "@ark-ui/solid/collection";
 import { Combobox as Combobox$1, ComboboxRootProps } from "@ark-ui/solid/combobox";
-//#region src/components/combobox/index.d.ts
 /** Ark's Combobox, dressed in the paper-and-ink system: the field carries
  * the control recipe and its matches dissolve open as a paper vessel, the
  * checked row taking the flat ink fill. The API is Ark's own — Root, Label,
@@ -37,4 +36,4 @@ export interface ComboboxFacadeProps {
 }
 declare function ComboboxFacade(props: ComboboxFacadeProps): import("solid-js").JSX.Element;
 export declare const Combobox: typeof ComboboxFacade & ComboboxParts;
-//#endregion
+export {};

package/dist/components/combobox/index.mjs

@@ -1,11 +1,11 @@
-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, memo, mergeProps } from "@solidjs/web";
+import { t as defineFamily } from "../../family-B5HtE0on.mjs";
+import { r as iconNode } from "../../icon-DQqYA2fO.mjs";
+import { t as useElementId } from "../../id-DGvz-2rQ.mjs";
+import { createComponent, memo, mergeProps } from "solid-js/web";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { For, Show, splitProps } from "solid-js";
 import { Combobox as Combobox$1, createListCollection } from "@ark-ui/solid/combobox";
-//#region src/components/combobox/index.tsx
+// src/components/combobox/index.tsx
 function ComboboxRoot(props) {
 	const [own, rest] = splitProps(props, ["size"]);
 	const id = useElementId("combobox", () => rest.id);
@@ -13,7 +13,7 @@ function ComboboxRoot(props) {
 		get id() {
 			return id();
 		},
-		get "data-size"() {
+		get ["data-size"]() {
 			return own.size ?? "md";
 		}
 	}));
@@ -53,9 +53,7 @@ function ComboboxFacade(props) {
 		},
 		lazyMount: true,
 		unmountOnExit: true
-	}, () => {
-		return props.value === void 0 ? {} : { value: toComboboxValue(props.value) };
-	}, {
+	}, () => props.value === void 0 ? {} : { value: toComboboxValue(props.value) }, {
 		onValueChange: (event) => props.onValueChange?.(fromComboboxValue(event.value, props.multiple)),
 		get children() {
 			return [
@@ -72,10 +70,8 @@ function ComboboxFacade(props) {
 				createComponent(Combobox$1.Control, { get children() {
 					return [
 						createComponent(Combobox$1.Input, {
-							get "aria-label"() {
-								return memo(() => {
-									return !!props.label;
-								})() ? void 0 : props.placeholder;
+							get ["aria-label"]() {
+								return memo(() => !!props.label)() ? void 0 : props.placeholder;
 							},
 							get placeholder() {
 								return props.placeholder;
@@ -135,5 +131,4 @@ const Combobox = defineFamily(ComboboxFacade, {
 	Root: ComboboxRoot
 });
 injectComponentStyle("combobox");
-//#endregion
 export { Combobox };

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

@@ -1,5 +1,4 @@
 import { Dialog } from "../dialog/index.mjs";
-//#region src/components/command/index.d.ts
 export interface CommandEntry {
   label: string;
   value: string;
@@ -43,4 +42,4 @@ export interface CommandProps {
  */
 declare function CommandImpl(props: CommandProps): import("solid-js").JSX.Element;
 export declare const Command: typeof CommandImpl & typeof Dialog;
-//#endregion
+export {};

package/dist/components/command/index.mjs

@@ -1,21 +1,19 @@
-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 { t as defineFamily } from "../../family-B5HtE0on.mjs";
+import { t as useElementId } from "../../id-DGvz-2rQ.mjs";
+import { n as useComponentMessages } from "../../use-component-messages-DS9ppb4C.mjs";
 import { Dialog as Dialog$1 } from "../dialog/index.mjs";
-import { createComponent, insert, mergeProps, spread, template } from "@solidjs/web";
+import { Portal, createComponent, insert, mergeProps, spread, template } from "solid-js/web";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { For, Show, createEffect, createSignal, splitProps } from "solid-js";
 import { useListCollection } from "@ark-ui/solid/collection";
 import { Combobox } from "@ark-ui/solid/combobox";
-import { Portal } from "solid-js/web";
 import { Dialog } from "@ark-ui/solid/dialog";
-//#region src/components/command/index.tsx
-var _tmpl$ = /* @__PURE__ */ template(`<span data-scope=command data-part=item-hint>`);
-var _tmpl$2 = /* @__PURE__ */ template(`<div><!><!>`);
-var _tmpl$3 = /* @__PURE__ */ template(`<span>`);
-var _tmpl$4 = /* @__PURE__ */ template(`<div>`);
-var _tmpl$5 = /* @__PURE__ */ template(`<input>`);
-var _tmpl$6 = /* @__PURE__ */ template(`<div data-scope=command data-part=empty>`);
+// src/components/command/index.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<span data-scope=command data-part=item-hint>`);
+var _tmpl$2 = /*#__PURE__*/ template(`<div>`);
+var _tmpl$3 = /*#__PURE__*/ template(`<span>`);
+var _tmpl$4 = /*#__PURE__*/ template(`<input>`);
+var _tmpl$5 = /*#__PURE__*/ template(`<div data-scope=command data-part=empty>`);
 /** A command row: the machine's item grafted onto a vessel of our own,
 * the label riding the machine's item text. */
 function Row(props) {
@@ -25,35 +23,29 @@ function Row(props) {
 		},
 		asChild: (itemProps) => (() => {
 			var _el$ = _tmpl$2();
-			var _el$2 = _el$.firstChild;
-			var _el$4 = _el$2.nextSibling;
-			spread(_el$, [itemProps, {
+			spread(_el$, mergeProps(itemProps, {
 				"data-scope": "command",
 				"data-part": "item"
-			}], true);
+			}), false, true);
 			insert(_el$, createComponent(Combobox.ItemText, { asChild: (textProps) => (() => {
-				var _el$5 = _tmpl$3();
-				spread(_el$5, [textProps, {
+				var _el$3 = _tmpl$3();
+				spread(_el$3, mergeProps(textProps, {
 					"data-scope": "command",
 					"data-part": "item-label"
-				}], true);
-				insert(_el$5, () => {
-					return props.entry.label;
-				});
-				return _el$5;
-			})() }), _el$2);
+				}), false, true);
+				insert(_el$3, () => props.entry.label);
+				return _el$3;
+			})() }), null);
 			insert(_el$, createComponent(Show, {
 				get when() {
 					return props.entry.hint;
 				},
 				get children() {
-					var _el$3 = _tmpl$();
-					insert(_el$3, () => {
-						return props.entry.hint;
-					});
-					return _el$3;
+					var _el$2 = _tmpl$();
+					insert(_el$2, () => props.entry.hint);
+					return _el$2;
 				}
-			}), _el$4);
+			}), null);
 			return _el$;
 		})()
 	});
@@ -133,21 +125,21 @@ function CommandImpl(props) {
 		get children() {
 			return createComponent(Portal, { get children() {
 				return [createComponent(Dialog.Backdrop, {}), createComponent(Dialog.Positioner, { asChild: (positionerProps) => (() => {
-					var _el$6 = _tmpl$4();
-					spread(_el$6, [positionerProps, {
+					var _el$4 = _tmpl$2();
+					spread(_el$4, mergeProps(positionerProps, {
 						"data-scope": "command",
 						"data-part": "positioner"
-					}], true);
-					insert(_el$6, createComponent(Dialog.Content, { asChild: (contentProps) => (() => {
-						var _el$7 = _tmpl$4();
-						spread(_el$7, [contentProps, {
+					}), false, true);
+					insert(_el$4, createComponent(Dialog.Content, { asChild: (contentProps) => (() => {
+						var _el$5 = _tmpl$2();
+						spread(_el$5, mergeProps(contentProps, {
 							"data-scope": "command",
 							"data-part": "content",
-							get "aria-label"() {
+							get ["aria-label"]() {
 								return messages().command.palette;
 							}
-						}], true);
-						insert(_el$7, createComponent(Combobox.Root, {
+						}), false, true);
+						insert(_el$5, createComponent(Combobox.Root, {
 							get id() {
 								return `${id()}-palette`;
 							},
@@ -176,28 +168,26 @@ function CommandImpl(props) {
 							},
 							get children() {
 								return [createComponent(Combobox.Input, { asChild: (inputProps) => (() => {
-									var _el$8 = _tmpl$5();
-									spread(_el$8, [inputProps, {
-										type: "text",
+									var _el$6 = _tmpl$4();
+									spread(_el$6, mergeProps(inputProps, {
+										"type": "text",
 										get placeholder() {
 											return own.placeholder ?? messages().command.search;
 										},
-										get "aria-label"() {
+										get ["aria-label"]() {
 											return messages().command.search;
 										},
 										"data-scope": "command",
 										"data-part": "input"
-									}], false);
-									return _el$8;
+									}), false, false);
+									return _el$6;
 								})() }), createComponent(Combobox.Content, { asChild: (listProps) => (() => {
-									var _el$9 = _tmpl$2();
-									var _el$10 = _el$9.firstChild;
-									var _el$12 = _el$10.nextSibling;
-									spread(_el$9, [listProps, {
+									var _el$7 = _tmpl$2();
+									spread(_el$7, mergeProps(listProps, {
 										"data-scope": "command",
 										"data-part": "list"
-									}], true);
-									insert(_el$9, createComponent(For, {
+									}), false, true);
+									insert(_el$7, createComponent(For, {
 										get each() {
 											return sections();
 										},
@@ -215,59 +205,52 @@ function CommandImpl(props) {
 											},
 											get children() {
 												return createComponent(Combobox.ItemGroup, { asChild: (groupProps) => (() => {
-													var _el$13 = _tmpl$2();
-													var _el$14 = _el$13.firstChild;
-													var _el$15 = _el$14.nextSibling;
-													spread(_el$13, [groupProps, {
+													var _el$9 = _tmpl$2();
+													spread(_el$9, mergeProps(groupProps, {
 														"data-scope": "command",
 														"data-part": "group"
-													}], true);
-													insert(_el$13, createComponent(Combobox.ItemGroupLabel, { asChild: (labelProps) => (() => {
-														var _el$16 = _tmpl$4();
-														spread(_el$16, [labelProps, {
+													}), false, true);
+													insert(_el$9, createComponent(Combobox.ItemGroupLabel, { asChild: (labelProps) => (() => {
+														var _el$0 = _tmpl$2();
+														spread(_el$0, mergeProps(labelProps, {
 															"data-scope": "command",
 															"data-part": "group-label"
-														}], true);
-														insert(_el$16, () => {
-															return section.group;
-														});
-														return _el$16;
-													})() }), _el$14);
-													insert(_el$13, createComponent(For, {
+														}), false, true);
+														insert(_el$0, () => section.group);
+														return _el$0;
+													})() }), null);
+													insert(_el$9, createComponent(For, {
 														get each() {
 															return section.entries;
 														},
 														children: (entry) => createComponent(Row, { entry })
-													}), _el$15);
-													return _el$13;
+													}), null);
+													return _el$9;
 												})() });
 											}
 										})
-									}), _el$10);
-									insert(_el$9, createComponent(Show, {
+									}), null);
+									insert(_el$7, createComponent(Show, {
 										get when() {
 											return sections().length === 0;
 										},
 										get children() {
-											var _el$11 = _tmpl$6();
-											insert(_el$11, () => {
-												return own.emptyText ?? messages().command.noMatches;
-											});
-											return _el$11;
+											var _el$8 = _tmpl$5();
+											insert(_el$8, () => own.emptyText ?? messages().command.noMatches);
+											return _el$8;
 										}
-									}), _el$12);
-									return _el$9;
+									}), null);
+									return _el$7;
 								})() })];
 							}
 						}));
-						return _el$7;
+						return _el$5;
 					})() }));
-					return _el$6;
+					return _el$4;
 				})() })];
 			} });
 		}
 	}));
 }
 const Command = defineFamily(CommandImpl, Dialog$1);
-//#endregion
 export { Command };

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

@@ -1,5 +1,4 @@
 import { JSX } from "solid-js";
-//#region src/components/comment/index.d.ts
 export interface CommentProps extends JSX.HTMLAttributes<HTMLElement> {
   author?: string;
   datetime?: string;
@@ -15,5 +14,4 @@ export interface CommentProps extends JSX.HTMLAttributes<HTMLElement> {
  */
 export declare const Comment: ((props: CommentProps) => JSX.Element) & {
   Root: (props: CommentProps) => JSX.Element;
-};
-//#endregion
+};