@bysages/solid 0.2.1 → 0.2.3

package/dist/components/icon/index.mjs

@@ -0,0 +1,53 @@
+import { injectComponentStyle } from "@bysages/core";
+import { effect, insert, mergeProps, setAttribute, spread, template } from "solid-js/web";
+import { splitProps } from "solid-js";
+import { getIcon } from "@bysages/icons";
+//#region src/components/icon/index.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<span>`);
+var _tmpl$2 = /*#__PURE__*/ template(`<svg fill=currentColor aria-hidden=true>`);
+function Icon(props) {
+	injectComponentStyle("icon");
+	const [own, rest] = splitProps(props, [
+		"size",
+		"label",
+		"name",
+		"children"
+	]);
+	const glyph = own.name && own.children == null ? getIcon(own.name) : void 0;
+	if (own.name && own.children == null && !glyph) console.error(`[icons] unknown icon name "${own.name}" — extend packages/icons/icons.config.json and rerun the generator`);
+	return (() => {
+		var _el$ = _tmpl$();
+		spread(_el$, mergeProps(rest, {
+			get role() {
+				return own.label != null ? "img" : void 0;
+			},
+			get ["aria-label"]() {
+				return own.label;
+			},
+			get ["aria-hidden"]() {
+				return own.label != null ? void 0 : "true";
+			},
+			"data-scope": "icon",
+			"data-part": "root",
+			get ["data-size"]() {
+				return own.size ?? "inherit";
+			}
+		}), false, true);
+		insert(_el$, () => own.children ?? (glyph ? (() => {
+			var _el$2 = _tmpl$2();
+			effect((_p$) => {
+				var _v$ = `0 0 ${glyph.width ?? 24} ${glyph.height ?? 24}`, _v$2 = glyph.body;
+				_v$ !== _p$.e && setAttribute(_el$2, "viewBox", _p$.e = _v$);
+				_v$2 !== _p$.t && (_el$2.innerHTML = _p$.t = _v$2);
+				return _p$;
+			}, {
+				e: void 0,
+				t: void 0
+			});
+			return _el$2;
+		})() : null));
+		return _el$;
+	})();
+}
+//#endregion
+export { Icon };

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

@@ -0,0 +1,17 @@
+import { JSX } from "solid-js";
+//#region src/components/image/index.d.ts
+/** A framed picture: while the source loads, the frame keeps the
+ * skeleton's breath; the picture dissolves in when it lands; a broken
+ * source leaves the `fallback` prop — or the placeholder glyph when the
+ * caller has nothing local to say. The frame's size is the consumer's
+ * to give. */
+export interface ImageProps extends JSX.HTMLAttributes<HTMLElement> {
+  src: string;
+  alt?: string;
+  fit?: "cover" | "contain" | "fill" | "none";
+  loading?: "lazy" | "eager";
+  /** What a broken source leaves instead of the picture. */
+  fallback?: JSX.Element;
+}
+export declare function Image(props: ImageProps): JSX.Element;
+//#endregion

package/dist/components/image/index.mjs

@@ -0,0 +1,69 @@
+import { injectComponentStyle } from "@bysages/core";
+import { createComponent, effect, insert, mergeProps, setAttribute, spread, template } from "solid-js/web";
+import { Show, createEffect, createSignal, on, splitProps } from "solid-js";
+//#region src/components/image/index.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<svg><rect x=3 y=4 width=18 height=16 rx=1.5></svg>`, false, true, false);
+var _tmpl$2 = /*#__PURE__*/ template(`<svg><circle cx=9 cy=10 r=1.5></svg>`, false, true, false);
+var _tmpl$3 = /*#__PURE__*/ template(`<svg><path d="m5.5 17.5 4.5-5 3 3.5 2.5-3 3 4.5"></svg>`, false, true, false);
+var _tmpl$4 = /*#__PURE__*/ template(`<div data-scope=image data-part=fallback>`);
+var _tmpl$5 = /*#__PURE__*/ template(`<figure><img data-scope=image data-part=img decoding=async>`, true, false, false);
+/** The mark for a source that never arrived: a quiet mountain-and-sun,
+* drawn in the stylesheet's stroke and hidden from the reader. */
+function placeholderGlyph() {
+	return [
+		_tmpl$(),
+		_tmpl$2(),
+		_tmpl$3()
+	];
+}
+function Image(props) {
+	injectComponentStyle("image");
+	const [own, rest] = splitProps(props, [
+		"src",
+		"alt",
+		"fit",
+		"loading",
+		"fallback"
+	]);
+	const [state, setState] = createSignal("loading");
+	createEffect(on(() => own.src, () => setState("loading")));
+	return (() => {
+		var _el$4 = _tmpl$5(), _el$5 = _el$4.firstChild;
+		spread(_el$4, mergeProps(rest, {
+			"data-scope": "image",
+			"data-part": "root",
+			get ["data-state"]() {
+				return state();
+			},
+			get ["data-fit"]() {
+				return own.fit ?? "cover";
+			}
+		}), false, true);
+		_el$5.addEventListener("error", () => setState("error"));
+		_el$5.addEventListener("load", () => setState("loaded"));
+		insert(_el$4, createComponent(Show, {
+			get when() {
+				return state() === "error";
+			},
+			get children() {
+				var _el$6 = _tmpl$4();
+				insert(_el$6, () => own.fallback ?? placeholderGlyph());
+				return _el$6;
+			}
+		}), null);
+		effect((_p$) => {
+			var _v$ = own.src, _v$2 = own.alt ?? "", _v$3 = own.loading ?? "lazy";
+			_v$ !== _p$.e && setAttribute(_el$5, "src", _p$.e = _v$);
+			_v$2 !== _p$.t && setAttribute(_el$5, "alt", _p$.t = _v$2);
+			_v$3 !== _p$.a && setAttribute(_el$5, "loading", _p$.a = _v$3);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0
+		});
+		return _el$4;
+	})();
+}
+//#endregion
+export { Image };

package/dist/components/image-cropper/index.d.mts

@@ -0,0 +1,8 @@
+import { ImageCropper as ImageCropper$1 } from "@ark-ui/solid/image-cropper";
+//#region src/components/image-cropper/index.d.ts
+/** Ark's ImageCropper, dressed in the paper-and-ink system: a rounded vessel
+ * holding the photograph, one lit selection window framed by light hairlines.
+ * The API is Ark's own — Root, Viewport, Image, Selection, Handle, Grid,
+ * Context. */
+export declare const ImageCropper: typeof ImageCropper$1;
+//#endregion

package/dist/components/image-cropper/index.mjs

@@ -0,0 +1,11 @@
+import { injectComponentStyle } from "@bysages/core";
+import { ImageCropper as ImageCropper$1 } from "@ark-ui/solid/image-cropper";
+//#region src/components/image-cropper/index.ts
+/** Ark's ImageCropper, dressed in the paper-and-ink system: a rounded vessel
+* holding the photograph, one lit selection window framed by light hairlines.
+* The API is Ark's own — Root, Viewport, Image, Selection, Handle, Grid,
+* Context. */
+const ImageCropper = ImageCropper$1;
+injectComponentStyle("image-cropper");
+//#endregion
+export { ImageCropper };

package/dist/components/image-viewer/index.d.mts

@@ -0,0 +1,19 @@
+import { JSX } from "solid-js";
+//#region src/components/image-viewer/index.d.ts
+/**
+ * A lightbox: the picture over a dimmed page, with a small toolbar
+ * beneath it. Zoom is the reader's hand (half to three times, clamped),
+ * a quarter turn at a time rotates, Escape and the scrim close — the
+ * dialog machine carries the modal part. `open` may stay with the
+ * caller; left undefined the viewer keeps it to itself.
+ */
+export interface ImageViewerProps {
+  src: string;
+  alt?: string;
+  open?: boolean;
+  zoomable?: boolean;
+  /** The openness changed — from the scrim, Escape or the toolbar. */
+  onOpenChange?: (open: boolean) => void;
+}
+export declare function ImageViewer(props: ImageViewerProps): JSX.Element;
+//#endregion

package/dist/components/image-viewer/index.mjs

@@ -0,0 +1,143 @@
+import { Button } from "../button/index.mjs";
+import { ButtonGroup } from "../button-group/index.mjs";
+import { injectComponentStyle } from "@bysages/core";
+import { Portal, createComponent, effect, insert, memo, setAttribute, setStyleProperty, template } from "solid-js/web";
+import { Show, createEffect, createSignal, splitProps } from "solid-js";
+import { Dialog } from "@ark-ui/solid/dialog";
+//#region src/components/image-viewer/index.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<svg><circle cx=11 cy=11 r=7></svg>`, false, true, false);
+var _tmpl$2 = /*#__PURE__*/ template(`<svg><path d="m16.2 16.2 4.8 4.8"></svg>`, false, true, false);
+var _tmpl$3 = /*#__PURE__*/ template(`<svg><path d="M8 11h6"></svg>`, false, true, false);
+var _tmpl$4 = /*#__PURE__*/ template(`<svg><path d="M11 8v6"></svg>`, false, true, false);
+var _tmpl$5 = /*#__PURE__*/ template(`<svg><path d="M20.49 12A8.5 8.5 0 1 1 18 6.06"></svg>`, false, true, false);
+var _tmpl$6 = /*#__PURE__*/ template(`<svg><path d="M20.5 3.5v4h-4"></svg>`, false, true, false);
+var _tmpl$7 = /*#__PURE__*/ template(`<svg><path d="m6 6 12 12"></svg>`, false, true, false);
+var _tmpl$8 = /*#__PURE__*/ template(`<svg><path d="M18 6 6 18"></svg>`, false, true, false);
+var _tmpl$9 = /*#__PURE__*/ template(`<svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=1.5 stroke-linecap=round stroke-linejoin=round aria-hidden=true>`);
+var _tmpl$0 = /*#__PURE__*/ template(`<img data-scope=image-viewer data-part=viewport>`);
+var _tmpl$1 = /*#__PURE__*/ template(`<div data-scope=image-viewer data-part=toolbar>`);
+const MIN_SCALE = .5;
+const MAX_SCALE = 3;
+const SCALE_STEP = .25;
+/** The toolbar's line-drawn glyphs, fresh per render. */
+const TOOL_GLYPHS = {
+	zoomIn: () => [
+		_tmpl$(),
+		_tmpl$2(),
+		_tmpl$3(),
+		_tmpl$4()
+	],
+	zoomOut: () => [
+		_tmpl$(),
+		_tmpl$2(),
+		_tmpl$3()
+	],
+	rotate: () => [_tmpl$5(), _tmpl$6()],
+	close: () => [_tmpl$7(), _tmpl$8()]
+};
+function ImageViewer(props) {
+	injectComponentStyle("image-viewer");
+	const [own] = splitProps(props, [
+		"src",
+		"alt",
+		"open",
+		"zoomable",
+		"onOpenChange"
+	]);
+	const [localOpen, setLocalOpen] = createSignal(false);
+	const [scale, setScale] = createSignal(1);
+	const [rotation, setRotation] = createSignal(0);
+	const isOpen = () => own.open ?? localOpen();
+	const setOpen = (value) => {
+		if (own.open === void 0) setLocalOpen(value);
+		own.onOpenChange?.(value);
+	};
+	createEffect(() => {
+		if (isOpen()) {
+			setScale(1);
+			setRotation(0);
+		}
+	});
+	function zoom(step) {
+		setScale(Math.min(MAX_SCALE, Math.max(MIN_SCALE, scale() + step)));
+	}
+	function rotate() {
+		setRotation((rotation() + 90) % 360);
+	}
+	function toolButton(label, glyph, onClick) {
+		return createComponent(Button, {
+			variant: "ghost",
+			square: true,
+			size: "lg",
+			"aria-label": label,
+			onClick,
+			get children() {
+				var _el$10 = _tmpl$9();
+				insert(_el$10, glyph);
+				return _el$10;
+			}
+		});
+	}
+	return createComponent(Dialog.Root, {
+		get open() {
+			return isOpen();
+		},
+		onOpenChange: (details) => setOpen(details.open),
+		lazyMount: true,
+		unmountOnExit: true,
+		get children() {
+			return createComponent(Portal, { get children() {
+				return [createComponent(Dialog.Backdrop, { "class": "bs-image-viewer-backdrop" }), createComponent(Dialog.Positioner, {
+					"class": "bs-image-viewer-positioner",
+					get children() {
+						return createComponent(Dialog.Content, {
+							"class": "bs-image-viewer-content",
+							get ["aria-label"]() {
+								return own.alt || "Image preview";
+							},
+							onClick: (event) => {
+								if (event.target === event.currentTarget) setOpen(false);
+							},
+							get children() {
+								return [(() => {
+									var _el$11 = _tmpl$0();
+									effect((_p$) => {
+										var _v$ = own.src, _v$2 = own.alt ?? "", _v$3 = `scale(${scale()}) rotate(${rotation()}deg)`;
+										_v$ !== _p$.e && setAttribute(_el$11, "src", _p$.e = _v$);
+										_v$2 !== _p$.t && setAttribute(_el$11, "alt", _p$.t = _v$2);
+										_v$3 !== _p$.a && setStyleProperty(_el$11, "transform", _p$.a = _v$3);
+										return _p$;
+									}, {
+										e: void 0,
+										t: void 0,
+										a: void 0
+									});
+									return _el$11;
+								})(), (() => {
+									var _el$12 = _tmpl$1();
+									insert(_el$12, createComponent(ButtonGroup, { get children() {
+										return [
+											createComponent(Show, {
+												get when() {
+													return own.zoomable ?? true;
+												},
+												get children() {
+													return [memo(() => toolButton("Zoom in", TOOL_GLYPHS.zoomIn, () => zoom(SCALE_STEP))), memo(() => toolButton("Zoom out", TOOL_GLYPHS.zoomOut, () => zoom(-.25)))];
+												}
+											}),
+											memo(() => toolButton("Rotate 90 degrees", TOOL_GLYPHS.rotate, rotate)),
+											memo(() => toolButton("Close", TOOL_GLYPHS.close, () => setOpen(false)))
+										];
+									} }));
+									return _el$12;
+								})()];
+							}
+						});
+					}
+				})];
+			} });
+		}
+	});
+}
+//#endregion
+export { ImageViewer };

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

@@ -0,0 +1,16 @@
+import { JSX } from "solid-js";
+//#region src/components/input/index.d.ts
+export interface InputProps extends JSX.InputHTMLAttributes<HTMLInputElement> {
+  value?: string | number;
+  onValueChange?: (value: string) => void;
+  size?: "sm" | "md" | "lg";
+  invalid?: boolean;
+}
+/** The bare text input: the field recipe — border, surface, focus halo —
+ * on a native control. Standing alone it styles itself from the `invalid`
+ * prop; inside a `Field.Root` it consumes the field context, picking up
+ * the label id, the described-by wiring and the invalid state for free,
+ * which is also the seam the Form validation layer will drive. Disabled
+ * rides the native attribute. */
+export declare function Input(props: InputProps): JSX.Element;
+//#endregion

package/dist/components/input/index.mjs

@@ -0,0 +1,42 @@
+import { injectComponentStyle } from "@bysages/core";
+import { mergeProps, spread, template } from "solid-js/web";
+import { mergeProps as mergeProps$1, splitProps } from "solid-js";
+import { useFieldContext } from "@ark-ui/solid/field";
+//#region src/components/input/index.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<input>`);
+/** The bare text input: the field recipe — border, surface, focus halo —
+* on a native control. Standing alone it styles itself from the `invalid`
+* prop; inside a `Field.Root` it consumes the field context, picking up
+* the label id, the described-by wiring and the invalid state for free,
+* which is also the seam the Form validation layer will drive. Disabled
+* rides the native attribute. */
+function Input(props) {
+	injectComponentStyle("input");
+	const field = useFieldContext();
+	const [own, rest] = splitProps(props, [
+		"value",
+		"size",
+		"invalid",
+		"onValueChange"
+	]);
+	return (() => {
+		var _el$ = _tmpl$();
+		spread(_el$, mergeProps(() => mergeProps$1(() => field?.().getInputProps() ?? {}, rest, {
+			get value() {
+				return own.value;
+			},
+			"data-scope": "input",
+			"data-part": "root",
+			get "data-size"() {
+				return own.size ?? "md";
+			},
+			get "data-invalid"() {
+				return own.invalid || field?.().getInputProps()["data-invalid"] != null ? "" : void 0;
+			},
+			onInput: (event) => own.onValueChange?.(event.currentTarget.value)
+		})), false, false);
+		return _el$;
+	})();
+}
+//#endregion
+export { Input };

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

@@ -0,0 +1,18 @@
+import { JSX } from "solid-js";
+//#region src/components/input-group/index.d.ts
+/**
+ * Merged controls: attachments and the entry fused into one seal. The
+ * Root draws the single hairline and carries the group's focus halo;
+ * the Addon is a recessed cell for the reader's fixed words — a scheme,
+ * a unit, a quiet button — placed before or after the entry. Put our
+ * Input (or Textarea) inside and its own border and halo step aside in
+ * favor of the group's; the stylesheet does the merging, the wrapper
+ * adds no visuals of its own.
+ */
+declare function InputGroupRoot(props: JSX.HTMLAttributes<HTMLDivElement>): JSX.Element;
+declare function InputGroupAddon(props: JSX.HTMLAttributes<HTMLDivElement>): JSX.Element;
+export declare const InputGroup: typeof InputGroupRoot & {
+  Root: typeof InputGroupRoot;
+  Addon: typeof InputGroupAddon;
+};
+//#endregion

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

@@ -0,0 +1,40 @@
+import { injectComponentStyle } from "@bysages/core";
+import { mergeProps, spread, template } from "solid-js/web";
+//#region src/components/input-group/index.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<div>`);
+/**
+* Merged controls: attachments and the entry fused into one seal. The
+* Root draws the single hairline and carries the group's focus halo;
+* the Addon is a recessed cell for the reader's fixed words — a scheme,
+* a unit, a quiet button — placed before or after the entry. Put our
+* Input (or Textarea) inside and its own border and halo step aside in
+* favor of the group's; the stylesheet does the merging, the wrapper
+* adds no visuals of its own.
+*/
+function InputGroupRoot(props) {
+	return (() => {
+		var _el$ = _tmpl$();
+		spread(_el$, mergeProps(props, {
+			"data-scope": "input-group",
+			"data-part": "root"
+		}), false, false);
+		return _el$;
+	})();
+}
+function InputGroupAddon(props) {
+	return (() => {
+		var _el$2 = _tmpl$();
+		spread(_el$2, mergeProps(props, {
+			"data-scope": "input-group",
+			"data-part": "addon"
+		}), false, false);
+		return _el$2;
+	})();
+}
+const InputGroup = Object.assign(InputGroupRoot, {
+	Root: InputGroupRoot,
+	Addon: InputGroupAddon
+});
+injectComponentStyle("input-group");
+//#endregion
+export { InputGroup };

package/dist/components/json-tree-view/index.d.mts

@@ -0,0 +1,7 @@
+import { JsonTreeView as JsonTreeView$1 } from "@ark-ui/solid/json-tree-view";
+//#region src/components/json-tree-view/index.d.ts
+/** Ark's JsonTreeView, dressed in the paper-and-ink system: the tree-view
+ * recipes re-scoped, with value nodes reading as tabular data. The API is
+ * Ark's own — Root, Tree, plus createJsonTreeCollection. */
+export declare const JsonTreeView: typeof JsonTreeView$1;
+//#endregion

package/dist/components/json-tree-view/index.mjs

@@ -0,0 +1,10 @@
+import { injectComponentStyle } from "@bysages/core";
+import { JsonTreeView as JsonTreeView$1 } from "@ark-ui/solid/json-tree-view";
+//#region src/components/json-tree-view/index.ts
+/** Ark's JsonTreeView, dressed in the paper-and-ink system: the tree-view
+* recipes re-scoped, with value nodes reading as tabular data. The API is
+* Ark's own — Root, Tree, plus createJsonTreeCollection. */
+const JsonTreeView = JsonTreeView$1;
+injectComponentStyle("json-tree-view");
+//#endregion
+export { JsonTreeView };

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

@@ -0,0 +1,6 @@
+import { JSX } from "solid-js";
+//#region src/components/kbd/index.d.ts
+/** A keycap in miniature, riding the type it annotates. */
+export type KbdProps = JSX.HTMLAttributes<HTMLElement>;
+export declare function Kbd(props: KbdProps): JSX.Element;
+//#endregion

package/dist/components/kbd/index.mjs

@@ -0,0 +1,17 @@
+import { injectComponentStyle } from "@bysages/core";
+import { mergeProps, spread, template } from "solid-js/web";
+//#region src/components/kbd/index.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<kbd>`);
+function Kbd(props) {
+	injectComponentStyle("kbd");
+	return (() => {
+		var _el$ = _tmpl$();
+		spread(_el$, mergeProps(props, {
+			"data-scope": "kbd",
+			"data-part": "root"
+		}), false, false);
+		return _el$;
+	})();
+}
+//#endregion
+export { Kbd };

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

@@ -0,0 +1,60 @@
+import { JSX } from "solid-js";
+//#region src/components/layout/index.d.ts
+export interface LayoutRootProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  /** Declare which edge the skeleton reserves for its sider — without
+   * it the root is a single column. */
+  sider?: "start" | "end";
+}
+/** Which edge the enclosing root reserves for its rail — shared so the
+ * sider's resize handle knows which way the hand pulls. */
+export interface LayoutContextValue {
+  siderPlacement: () => "start" | "end" | undefined;
+}
+/**
+ * The application skeleton: Root, Header, Sider, Content, Footer —
+ * the admin arrangement dressed in the paper-and-ink surfaces. The
+ * root is a full-height grid; a declared `sider` turns the columns
+ * around to meet whichever edge the rail stands on.
+ */
+declare function LayoutRoot(props: LayoutRootProps): JSX.Element;
+declare function LayoutHeader(props: JSX.HTMLAttributes<HTMLElement>): JSX.Element;
+declare function LayoutContent(props: JSX.HTMLAttributes<HTMLElement>): JSX.Element;
+declare function LayoutFooter(props: JSX.HTMLAttributes<HTMLElement>): JSX.Element;
+export interface LayoutSiderProps extends Omit<JSX.HTMLAttributes<HTMLElement>, "children"> {
+  /** The caller drives the fold; the sider mirrors it and echoes every
+   * change back through `onCollapsedChange`. */
+  collapsed?: boolean;
+  /** The rail's resting inline size — a layout parameter, not a visual
+   * token, so it rides an inline variable. */
+  width?: string;
+  /** The inline size when folded. */
+  collapsedWidth?: string;
+  /** Offer the hairline at the flow edge: the rail's width follows the
+   * hand (and the arrow keys), clamped by `min-width`/`max-width`, and
+   * every change rides `onWidthChange`. */
+  resizable?: boolean;
+  /** The rail's narrowest inline size while resizing. */
+  minWidth?: string;
+  /** The rail's widest inline size while resizing. */
+  maxWidth?: string;
+  /** The fold flipped. */
+  onCollapsedChange?: (collapsed: boolean) => void;
+  /** The rail's inline size changed — the hand, the arrow keys, or the
+   * caller's own width prop moving. */
+  onWidthChange?: (width: string) => void;
+  /** The children, or a function of the fold state — a rail can swap
+   * its labels for icons instead of being clipped mid-word by the
+   * narrowing edge. */
+  children?: JSX.Element | ((state: {
+    collapsed: boolean;
+  }) => JSX.Element);
+}
+declare function LayoutSider(props: LayoutSiderProps): JSX.Element;
+export declare const Layout: typeof LayoutRoot & {
+  Root: typeof LayoutRoot;
+  Header: typeof LayoutHeader;
+  Sider: typeof LayoutSider;
+  Content: typeof LayoutContent;
+  Footer: typeof LayoutFooter;
+};
+//#endregion