@bysages/solid 0.2.2 → 0.2.3

package/dist/components/checkbox-group/index.mjs

@@ -0,0 +1,99 @@
+import { injectComponentStyle } from "@bysages/core";
+import { createComponent, insert, mergeProps, spread, template } from "solid-js/web";
+import { For, createUniqueId, splitProps } from "solid-js";
+import { useFieldContext } from "@ark-ui/solid/field";
+import { Checkbox } from "@ark-ui/solid/checkbox";
+//#region src/components/checkbox-group/index.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=3 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path d="m5 12.5 5 5L19 7">`);
+var _tmpl$2 = /*#__PURE__*/ template(`<div>`);
+function checkGlyph() {
+	return _tmpl$();
+}
+/**
+* One question, many answers: a labelled stack (or row) of the seal-cut
+* checkboxes bound to a single array. Toggling a box adds or removes its
+* value; the group itself is semantics (`role="group"`), the boxes stay
+* the machine-driven originals. Inside a `Field.Root` the group picks up
+* the field context, so the invalid and disabled states a Form routes to
+* its name dress every box at once.
+*/
+function CheckboxGroup(props) {
+	injectComponentStyle("checkbox-group");
+	injectComponentStyle("checkbox");
+	const field = useFieldContext();
+	const uid = createUniqueId();
+	const [own, rest] = splitProps(props, [
+		"value",
+		"options",
+		"layout",
+		"size",
+		"invalid",
+		"disabled",
+		"onValueChange"
+	]);
+	const selected = () => new Set(own.value ?? []);
+	const isInvalid = () => own.invalid || field?.().invalid === true;
+	const isDisabled = () => own.disabled || field?.().disabled === true;
+	function toggle(value) {
+		const next = new Set(selected());
+		if (next.has(value)) next.delete(value);
+		else next.add(value);
+		own.onValueChange?.([...next]);
+	}
+	return (() => {
+		var _el$2 = _tmpl$2();
+		spread(_el$2, mergeProps(rest, {
+			"role": "group",
+			"data-scope": "checkbox-group",
+			"data-part": "root",
+			get ["data-layout"]() {
+				return own.layout ?? "vertical";
+			},
+			get ["data-invalid"]() {
+				return isInvalid() ? "" : void 0;
+			}
+		}), false, true);
+		insert(_el$2, createComponent(For, {
+			get each() {
+				return own.options;
+			},
+			children: (option) => createComponent(Checkbox.Root, {
+				get ids() {
+					return {
+						label: `${uid}:${option.value}:label`,
+						hiddenInput: `${uid}:${option.value}:input`
+					};
+				},
+				get checked() {
+					return selected().has(option.value);
+				},
+				get ["data-size"]() {
+					return own.size ?? "md";
+				},
+				get invalid() {
+					return isInvalid();
+				},
+				get disabled() {
+					return isDisabled() || option.disabled === true;
+				},
+				onCheckedChange: () => toggle(option.value),
+				get children() {
+					return [
+						createComponent(Checkbox.Control, { get children() {
+							return createComponent(Checkbox.Indicator, { get children() {
+								return checkGlyph();
+							} });
+						} }),
+						createComponent(Checkbox.Label, { get children() {
+							return option.label;
+						} }),
+						createComponent(Checkbox.HiddenInput, {})
+					];
+				}
+			})
+		}));
+		return _el$2;
+	})();
+}
+//#endregion
+export { CheckboxGroup };

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

@@ -0,0 +1,12 @@
+import { JSX } from "solid-js";
+//#region src/components/chip/index.d.ts
+/** A counting coin: the numeric value, capped at `max` with an ellipsis
+ * of the remainder ("99+"). */
+export interface ChipProps extends JSX.HTMLAttributes<HTMLSpanElement> {
+  value: number;
+  max?: number;
+  tone?: "ink" | "info" | "success" | "warning" | "danger";
+  variant?: "solid" | "subtle" | "outline";
+}
+export declare function Chip(props: ChipProps): JSX.Element;
+//#endregion

package/dist/components/chip/index.mjs

@@ -0,0 +1,34 @@
+import { injectComponentStyle } from "@bysages/core";
+import { insert, memo, mergeProps, spread, template } from "solid-js/web";
+import { splitProps } from "solid-js";
+//#region src/components/chip/index.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<span>`);
+function Chip(props) {
+	injectComponentStyle("chip");
+	const [own, rest] = splitProps(props, [
+		"value",
+		"max",
+		"tone",
+		"variant"
+	]);
+	return (() => {
+		var _el$ = _tmpl$();
+		spread(_el$, mergeProps(rest, {
+			"data-scope": "chip",
+			"data-part": "root",
+			get ["data-tone"]() {
+				return own.tone ?? "ink";
+			},
+			get ["data-variant"]() {
+				return own.variant ?? "solid";
+			}
+		}), false, true);
+		insert(_el$, (() => {
+			var _c$ = memo(() => !!(own.max != null && own.value > own.max));
+			return () => _c$() ? `${own.max}+` : String(own.value);
+		})());
+		return _el$;
+	})();
+}
+//#endregion
+export { Chip };

package/dist/components/client-only/index.d.mts

@@ -0,0 +1,2 @@
+import { ClientOnly, ClientOnlyProps } from "@ark-ui/solid/client-only";
+export { ClientOnly, type ClientOnlyProps };

package/dist/components/client-only/index.mjs

@@ -0,0 +1,2 @@
+import { ClientOnly } from "@ark-ui/solid/client-only";
+export { ClientOnly };

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

@@ -0,0 +1,16 @@
+import { Clipboard as Clipboard$1, ClipboardRootProps } from "@ark-ui/solid/clipboard";
+//#region src/components/clipboard/index.d.ts
+/** Ark's Clipboard, dressed in the paper-and-ink system: a hairline value
+ * field beside an icon-sized copy trigger whose ink turns bamboo while the
+ * copy is confirmed. The API is Ark's own — Root, Label, Control, Input,
+ * Trigger, Indicator, Context, HiddenInput. */
+type ClipboardOwnProps = {
+  /** One rung of the control-height ladder for the value field and
+   * its copy seal. */
+  size?: "sm" | "md" | "lg";
+};
+declare function ClipboardRoot(props: ClipboardRootProps & ClipboardOwnProps): import("solid-js").JSX.Element;
+export declare const Clipboard: Omit<typeof Clipboard$1, "Root"> & {
+  Root: typeof ClipboardRoot;
+};
+//#endregion

package/dist/components/clipboard/index.mjs

@@ -0,0 +1,19 @@
+import { injectComponentStyle } from "@bysages/core";
+import { createComponent, mergeProps } from "solid-js/web";
+import { splitProps } from "solid-js";
+import { Clipboard as Clipboard$1 } from "@ark-ui/solid/clipboard";
+//#region src/components/clipboard/index.tsx
+const ArkRoot = Clipboard$1.Root;
+function ClipboardRoot(props) {
+	const [own, rest] = splitProps(props, ["size"]);
+	return createComponent(ArkRoot, mergeProps(rest, { get ["data-size"]() {
+		return own.size ?? "md";
+	} }));
+}
+const Clipboard = {
+	...Clipboard$1,
+	Root: ClipboardRoot
+};
+injectComponentStyle("clipboard");
+//#endregion
+export { Clipboard };

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

@@ -0,0 +1,7 @@
+import { Collapsible as Collapsible$1 } from "@ark-ui/solid/collapsible";
+//#region src/components/collapsible/index.d.ts
+/** 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. */
+export declare const Collapsible: typeof Collapsible$1;
+//#endregion

package/dist/components/collapsible/index.mjs

@@ -0,0 +1,10 @@
+import { injectComponentStyle } from "@bysages/core";
+import { Collapsible as Collapsible$1 } from "@ark-ui/solid/collapsible";
+//#region src/components/collapsible/index.ts
+/** 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;
+injectComponentStyle("collapsible");
+//#endregion
+export { Collapsible };

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

@@ -0,0 +1,2 @@
+import { CollectionItem, CollectionOptions, FilePathTreeNode, FlatTreeNode, GridCollection, GridCollectionOptions, ListCollection, TreeCollection, TreeCollectionOptions, TreeNode, UseAsyncListProps, UseAsyncListReturn, UseListCollectionProps, UseListCollectionReturn, UseListSelectionProps, UseListSelectionReturn, createFileTreeCollection, createGridCollection, createListCollection, createTreeCollection, useAsyncList, useListCollection, useListSelection } from "@ark-ui/solid/collection";
+export { type CollectionItem, type CollectionOptions, type FilePathTreeNode, type FlatTreeNode, type GridCollection, type GridCollectionOptions, type ListCollection, type TreeCollection, type TreeCollectionOptions, type TreeNode, type UseAsyncListProps, type UseAsyncListReturn, type UseListCollectionProps, type UseListCollectionReturn, type UseListSelectionProps, type UseListSelectionReturn, createFileTreeCollection, createGridCollection, createListCollection, createTreeCollection, useAsyncList, useListCollection, useListSelection };

package/dist/components/collection/index.mjs

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

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

@@ -0,0 +1,19 @@
+import { 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,
+ * Content, Area, AreaThumb, AreaBackground, ValueText, ValueSwatch,
+ * ChannelSlider, ChannelSliderLabel, ChannelSliderTrack, ChannelSliderThumb,
+ * ChannelSliderValueText, ChannelInput, TransparencyGrid, SwatchGroup,
+ * SwatchTrigger, SwatchIndicator, Swatch, EyeDropperTrigger, FormatTrigger,
+ * FormatSelect, HiddenInput, Context. */
+type ColorPickerOwnProps = {
+  /** One rung of the control-height ladder for the swatch seal. */
+  size?: "sm" | "md" | "lg";
+};
+declare function ColorPickerRoot(props: ColorPickerRootProps & ColorPickerOwnProps): import("solid-js").JSX.Element;
+export declare const ColorPicker: Omit<typeof ColorPicker$1, "Root"> & {
+  Root: typeof ColorPickerRoot;
+};
+//#endregion

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

@@ -0,0 +1,18 @@
+import { injectComponentStyle } from "@bysages/core";
+import { createComponent, mergeProps } from "solid-js/web";
+import { splitProps } from "solid-js";
+import { ColorPicker as ColorPicker$1 } from "@ark-ui/solid/color-picker";
+//#region src/components/color-picker/index.tsx
+function ColorPickerRoot(props) {
+	const [own, rest] = splitProps(props, ["size"]);
+	return createComponent(ColorPicker$1.Root, mergeProps(rest, { get ["data-size"]() {
+		return own.size ?? "md";
+	} }));
+}
+const ColorPicker = {
+	...ColorPicker$1,
+	Root: ColorPickerRoot
+};
+injectComponentStyle("color-picker");
+//#endregion
+export { ColorPicker };

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

@@ -0,0 +1,17 @@
+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,
+ * Control, Input, Trigger, ClearTrigger, Positioner, Content, List, Empty,
+ * Item, ItemText, ItemIndicator, ItemGroup, ItemGroupLabel. */
+type ComboboxOwnProps = {
+  /** One rung of the control-height ladder for the field row. */
+  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"> & {
+  Root: typeof ComboboxRoot;
+};
+//#endregion

package/dist/components/combobox/index.mjs

@@ -0,0 +1,18 @@
+import { injectComponentStyle } from "@bysages/core";
+import { createComponent, mergeProps } from "solid-js/web";
+import { splitProps } from "solid-js";
+import { Combobox as Combobox$1 } 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 Combobox = {
+	...Combobox$1,
+	Root: ComboboxRoot
+};
+injectComponentStyle("combobox");
+//#endregion
+export { Combobox };

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

@@ -0,0 +1,43 @@
+//#region src/components/command/index.d.ts
+export interface CommandEntry {
+  label: string;
+  value: string;
+  /** Entries sharing a group are listed under one heading. */
+  group?: string;
+  /** A short affordance note, set as a keycap at the row's end. */
+  hint?: string;
+}
+export interface CommandProps {
+  /** The commands on offer, grouped as they arrive. */
+  items?: CommandEntry[];
+  placeholder?: string;
+  /** Whether the palette is up. Supply it to control the palette;
+   * changes are reported through `onOpenChange`. */
+  open?: boolean;
+  /** Whether the shell narrows `items` as the reader types. Turn it off
+   * when the caller owns the searching — a ranked engine or a remote
+   * source — and hands down the already-narrowed list. */
+  autoFilter?: boolean;
+  /** The field's text under the caller's control; changes are reported
+   * through `onInputValueChange`. */
+  inputValue?: string;
+  /** What the list whispers when nothing matches. */
+  emptyText?: string;
+  /** Called with the chosen entry's `value`; the palette closes after. */
+  onSelect?: (value: string) => void;
+  /** The palette's openness changed. */
+  onOpenChange?: (open: boolean) => void;
+  /** The field's text changed. */
+  onInputValueChange?: (value: string) => void;
+}
+/**
+ * The command palette: a modal sheet at the top of the page carrying a
+ * search field over the caller's commands, grouped as a ledger with a
+ * keycap hint at each row. The shell is the dialog machinery — scrim,
+ * focus trap, Escape — and the searching is the combobox machinery
+ * driving our own list: the vessel and the list live inside the sheet,
+ * 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;
+//#endregion

package/dist/components/command/index.mjs

@@ -0,0 +1,237 @@
+import { injectComponentStyle } from "@bysages/core";
+import { Portal, createComponent, insert, mergeProps, spread, template } from "solid-js/web";
+import { For, Show, createEffect, createSignal, splitProps } from "solid-js";
+import { useListCollection } from "@ark-ui/solid/collection";
+import { Combobox } from "@ark-ui/solid/combobox";
+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(`<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) {
+	return createComponent(Combobox.Item, {
+		get item() {
+			return props.entry.value;
+		},
+		asChild: (itemProps) => (() => {
+			var _el$ = _tmpl$2();
+			spread(_el$, mergeProps(itemProps, {
+				"data-scope": "command",
+				"data-part": "item"
+			}), false, true);
+			insert(_el$, createComponent(Combobox.ItemText, { asChild: (textProps) => (() => {
+				var _el$3 = _tmpl$3();
+				spread(_el$3, mergeProps(textProps, {
+					"data-scope": "command",
+					"data-part": "item-label"
+				}), 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$2 = _tmpl$();
+					insert(_el$2, () => props.entry.hint);
+					return _el$2;
+				}
+			}), null);
+			return _el$;
+		})()
+	});
+}
+/**
+* The command palette: a modal sheet at the top of the page carrying a
+* search field over the caller's commands, grouped as a ledger with a
+* keycap hint at each row. The shell is the dialog machinery — scrim,
+* focus trap, Escape — and the searching is the combobox machinery
+* driving our own list: the vessel and the list live inside the sheet,
+* so the combobox renders no separate popup and the machine's content
+* grafts onto the sheet's list.
+*/
+function Command(props) {
+	injectComponentStyle("command");
+	injectComponentStyle("dialog");
+	const [own, rest] = splitProps(props, [
+		"items",
+		"placeholder",
+		"open",
+		"autoFilter",
+		"inputValue",
+		"emptyText",
+		"onSelect",
+		"onOpenChange",
+		"onInputValueChange"
+	]);
+	const [internalOpen, setInternalOpen] = createSignal(false);
+	const [listOpen, setListOpen] = createSignal(true);
+	let fieldText = "";
+	const { collection, set, filter } = useListCollection({
+		initialItems: (own.items ?? []).map((entry) => entry.value),
+		filter: (value, input) => {
+			const entry = (own.items ?? []).find((candidate) => candidate.value === value);
+			if (!entry) return false;
+			const query = input.toLowerCase();
+			return entry.label.toLowerCase().includes(query) || value.toLowerCase().includes(query);
+		}
+	});
+	createEffect(() => {
+		set((own.items ?? []).map((entry) => entry.value));
+		if (own.autoFilter ?? true) filter(fieldText);
+	});
+	const open = () => own.open ?? internalOpen();
+	const setOpen = (value) => {
+		if (own.open === void 0) setInternalOpen(value);
+		own.onOpenChange?.(value);
+	};
+	createEffect(() => {
+		if (open()) setListOpen(true);
+	});
+	const sections = () => {
+		const available = new Set(collection().items);
+		const groups = /* @__PURE__ */ new Map();
+		for (const entry of own.items ?? []) {
+			if (!available.has(entry.value)) continue;
+			const key = entry.group ?? "";
+			if (!groups.has(key)) groups.set(key, []);
+			groups.get(key).push(entry);
+		}
+		return Array.from(groups, ([group, entries]) => ({
+			group,
+			entries
+		}));
+	};
+	return createComponent(Dialog.Root, mergeProps(rest, {
+		get open() {
+			return open();
+		},
+		onOpenChange: (details) => setOpen(details.open),
+		get children() {
+			return createComponent(Portal, { get children() {
+				return [createComponent(Dialog.Backdrop, {}), createComponent(Dialog.Positioner, { asChild: (positionerProps) => (() => {
+					var _el$4 = _tmpl$2();
+					spread(_el$4, mergeProps(positionerProps, {
+						"data-scope": "command",
+						"data-part": "positioner"
+					}), 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"
+						}), false, true);
+						insert(_el$5, createComponent(Combobox.Root, {
+							get collection() {
+								return collection();
+							},
+							get inputValue() {
+								return own.inputValue;
+							},
+							get open() {
+								return listOpen();
+							},
+							onOpenChange: (details) => setListOpen(details.open),
+							inputBehavior: "autohighlight",
+							loopFocus: true,
+							onInputValueChange: (details) => {
+								fieldText = details.inputValue;
+								if (own.autoFilter ?? true) filter(details.inputValue);
+								own.onInputValueChange?.(details.inputValue);
+							},
+							onValueChange: (details) => {
+								const [first] = details.value;
+								if (first == null) return;
+								own.onSelect?.(first);
+								setOpen(false);
+							},
+							get children() {
+								return [createComponent(Combobox.Input, { asChild: (inputProps) => (() => {
+									var _el$6 = _tmpl$4();
+									spread(_el$6, mergeProps(inputProps, {
+										"type": "text",
+										get placeholder() {
+											return own.placeholder;
+										},
+										"data-scope": "command",
+										"data-part": "input"
+									}), false, false);
+									return _el$6;
+								})() }), createComponent(Combobox.Content, { asChild: (listProps) => (() => {
+									var _el$7 = _tmpl$2();
+									spread(_el$7, mergeProps(listProps, {
+										"data-scope": "command",
+										"data-part": "list"
+									}), false, true);
+									insert(_el$7, createComponent(For, {
+										get each() {
+											return sections();
+										},
+										children: (section) => createComponent(Show, {
+											get when() {
+												return section.group !== "";
+											},
+											get fallback() {
+												return createComponent(For, {
+													get each() {
+														return section.entries;
+													},
+													children: (entry) => createComponent(Row, { entry })
+												});
+											},
+											get children() {
+												return createComponent(Combobox.ItemGroup, { asChild: (groupProps) => (() => {
+													var _el$9 = _tmpl$2();
+													spread(_el$9, mergeProps(groupProps, {
+														"data-scope": "command",
+														"data-part": "group"
+													}), 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"
+														}), 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 })
+													}), null);
+													return _el$9;
+												})() });
+											}
+										})
+									}), null);
+									insert(_el$7, createComponent(Show, {
+										get when() {
+											return sections().length === 0;
+										},
+										get children() {
+											var _el$8 = _tmpl$5();
+											insert(_el$8, () => own.emptyText ?? "No matching commands");
+											return _el$8;
+										}
+									}), null);
+									return _el$7;
+								})() })];
+							}
+						}));
+						return _el$5;
+					})() }));
+					return _el$4;
+				})() })];
+			} });
+		}
+	}));
+}
+//#endregion
+export { Command };

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

@@ -0,0 +1,17 @@
+import { JSX } from "solid-js";
+//#region src/components/comment/index.d.ts
+export interface CommentProps extends JSX.HTMLAttributes<HTMLElement> {
+  author?: string;
+  datetime?: string;
+  /** The portrait hanging to the left of the body. */
+  avatar?: JSX.Element;
+  /** The row of answers beneath the ink. */
+  actions?: JSX.Element;
+}
+/**
+ * A voice on the record: the portrait hangs left (the `avatar` prop),
+ * 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;
+//#endregion