@bysages/solid 0.2.2 → 0.3.0

package/dist/components/split-button/index.mjs

@@ -0,0 +1,124 @@
+import { Button } from "../button/index.mjs";
+import { injectComponentStyle } from "@bysages/core";
+import { createComponent, insert, spread, template } from "@solidjs/web";
+import { For, splitProps } from "solid-js";
+import { Portal } from "solid-js/web";
+import { Menu } from "@ark-ui/solid/menu";
+//#region src/components/split-button/index.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<div><!><!>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<button>`);
+var _tmpl$3 = /* @__PURE__ */ template(`<svg width=16 height=16 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=1.75 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path d="m6 9 6 6 6-6">`);
+/**
+* A primary action with its alternatives one seam away: the main button
+* fires `onClick`, the fitted arrow opens a paper vessel of the same
+* register whose entries call `onSelect` with their value. The arrow is
+* the menu machine's trigger with the button recipe riding over it —
+* the machine keeps the element (positioning, focus, `data-state`), the
+* button stylesheet's trigger register dresses it. The popup keeps the
+* menu parts untouched.
+*/
+function SplitButton(props) {
+	injectComponentStyle("split-button");
+	injectComponentStyle("menu");
+	const [own, rest] = splitProps(props, [
+		"label",
+		"items",
+		"variant",
+		"tone",
+		"size",
+		"disabled",
+		"onClick",
+		"onSelect",
+		"children"
+	]);
+	const variant = () => own.variant ?? "solid";
+	const tone = () => own.tone ?? "ink";
+	const size = () => own.size ?? "md";
+	var _el$ = _tmpl$();
+	var _el$2 = _el$.firstChild;
+	var _el$3 = _el$2.nextSibling;
+	spread(_el$, [rest, {
+		"data-scope": "split-button",
+		"data-part": "root"
+	}], true);
+	insert(_el$, createComponent(Button, {
+		get variant() {
+			return variant();
+		},
+		get tone() {
+			return tone();
+		},
+		get size() {
+			return size();
+		},
+		get disabled() {
+			return own.disabled;
+		},
+		onClick: (event) => own.onClick?.(event),
+		get children() {
+			return own.label;
+		}
+	}), _el$2);
+	insert(_el$, createComponent(Menu.Root, {
+		positioning: { placement: "bottom-end" },
+		get children() {
+			return [createComponent(Menu.Trigger, { asChild: (propsFn) => (() => {
+				var _el$4 = _tmpl$2();
+				spread(_el$4, [propsFn, {
+					type: "button",
+					get disabled() {
+						return own.disabled;
+					},
+					"aria-label": "More actions",
+					get "data-variant"() {
+						return variant();
+					},
+					get "data-tone"() {
+						return tone();
+					},
+					get "data-size"() {
+						return size();
+					},
+					"data-square": "true",
+					"data-motion": "ink-ripple lit"
+				}], true);
+				insert(_el$4, chevronDown);
+				return _el$4;
+			})() }), createComponent(Portal, { get children() {
+				return createComponent(Menu.Positioner, { get children() {
+					return createComponent(Menu.Content, { get children() {
+						return createComponent(For, {
+							get each() {
+								return own.items ?? [];
+							},
+							children: (entry) => createComponent(Menu.Item, {
+								get value() {
+									return entry.value;
+								},
+								get disabled() {
+									return entry.disabled;
+								},
+								get "data-danger"() {
+									return entry.danger ? "" : void 0;
+								},
+								onSelect: () => own.onSelect?.(entry.value),
+								get children() {
+									return createComponent(Menu.ItemText, { get children() {
+										return entry.label;
+									} });
+								}
+							})
+						});
+					} });
+				} });
+			} })];
+		}
+	}), _el$3);
+	return _el$;
+}
+/** One stroke pointing down: all a fitted dropdown arrow needs. */
+function chevronDown() {
+	return _tmpl$3();
+}
+//#endregion
+export { SplitButton };

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

@@ -0,0 +1,7 @@
+import { Splitter as Splitter$1 } from "@ark-ui/solid/splitter";
+//#region src/components/splitter/index.d.ts
+/** Ark's Splitter, dressed in the paper-and-ink system: panels divide on
+ * a hairline and a small paper-seal thumb answers the hand. The API is
+ * Ark's own — Root, Panel, ResizeTrigger, ResizeTriggerIndicator. */
+export declare const Splitter: typeof Splitter$1;
+//#endregion

package/dist/components/splitter/index.mjs

@@ -0,0 +1,10 @@
+import { injectComponentStyle } from "@bysages/core";
+import { Splitter as Splitter$1 } from "@ark-ui/solid/splitter";
+//#region src/components/splitter/index.ts
+/** Ark's Splitter, dressed in the paper-and-ink system: panels divide on
+* a hairline and a small paper-seal thumb answers the hand. The API is
+* Ark's own — Root, Panel, ResizeTrigger, ResizeTriggerIndicator. */
+const Splitter = Splitter$1;
+injectComponentStyle("splitter");
+//#endregion
+export { Splitter };

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

@@ -0,0 +1,11 @@
+import { JSX } from "solid-js";
+//#region src/components/spotlight/index.d.ts
+export interface SpotlightProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  /** How far the lamp throws before the ink swallows it. */
+  radius?: string;
+}
+/** The ink-light card: a vessel whose rim and face take light from the
+ * reader's hand. The wrapper only measures and writes the geometry —
+ * the lamp itself is the two layers the stylesheet paints. */
+export declare function Spotlight(props: SpotlightProps): JSX.Element;
+//#endregion

package/dist/components/spotlight/index.mjs

@@ -0,0 +1,38 @@
+import { injectComponentStyle } from "@bysages/core";
+import { insert, spread, template } from "@solidjs/web";
+import { splitProps } from "solid-js";
+//#region src/components/spotlight/index.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<div>`);
+/** The ink-light card: a vessel whose rim and face take light from the
+* reader's hand. The wrapper only measures and writes the geometry —
+* the lamp itself is the two layers the stylesheet paints. */
+function Spotlight(props) {
+	injectComponentStyle("spotlight");
+	const [own, rest] = splitProps(props, ["radius"]);
+	const track = (event) => {
+		const host = event.currentTarget;
+		const rect = host.getBoundingClientRect();
+		host.style.setProperty("--bs-spot-x", `${event.clientX - rect.left}px`);
+		host.style.setProperty("--bs-spot-y", `${event.clientY - rect.top}px`);
+	};
+	var _el$ = _tmpl$();
+	spread(_el$, [rest, {
+		"data-scope": "spotlight",
+		"data-part": "root",
+		get style() {
+			return { "--bs-spot-radius": own.radius };
+		},
+		onPointerMove: track,
+		onPointerEnter: (event) => {
+			track(event);
+			event.currentTarget.setAttribute("data-hovered", "");
+		},
+		onPointerLeave: (event) => event.currentTarget.removeAttribute("data-hovered")
+	}], true);
+	insert(_el$, () => {
+		return props.children;
+	});
+	return _el$;
+}
+//#endregion
+export { Spotlight };

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

@@ -0,0 +1,11 @@
+import { JSX } from "solid-js";
+//#region src/components/stack/index.d.ts
+export interface StackProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  direction?: "column" | "row";
+  gap?: "none" | "xs" | "sm" | "md" | "lg" | "xl";
+  wrap?: boolean;
+  align?: string;
+  justify?: string;
+}
+export declare function Stack(props: StackProps): JSX.Element;
+//#endregion

package/dist/components/stack/index.mjs

@@ -0,0 +1,45 @@
+import { injectComponentStyle } from "@bysages/core";
+import { spread, template } from "@solidjs/web";
+import { splitProps } from "solid-js";
+//#region src/components/stack/index.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<div>`);
+/** Whitespace chosen by name: the named steps point at the space ramp so
+* siblings are held apart by one token, never by ad-hoc margins. */
+const gapVars = {
+	none: "0",
+	xs: "var(--bs-gap-xs)",
+	sm: "var(--bs-gap-sm)",
+	md: "var(--bs-gap-md)",
+	lg: "var(--bs-gap-lg)",
+	xl: "var(--bs-gap-xl)"
+};
+function Stack(props) {
+	injectComponentStyle("stack");
+	const [own, rest] = splitProps(props, [
+		"direction",
+		"gap",
+		"wrap",
+		"align",
+		"justify"
+	]);
+	var _el$ = _tmpl$();
+	spread(_el$, [rest, {
+		get style() {
+			return {
+				...rest.style,
+				"--bs-stack-gap": gapVars[own.gap ?? "md"] ?? gapVars.md,
+				"align-items": own.align,
+				"justify-content": own.justify,
+				"flex-wrap": own.wrap ? "wrap" : void 0
+			};
+		},
+		"data-scope": "stack",
+		"data-part": "root",
+		get "data-direction"() {
+			return own.direction ?? "column";
+		}
+	}], false);
+	return _el$;
+}
+//#endregion
+export { Stack };

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

@@ -0,0 +1,17 @@
+import { JSX } from "solid-js";
+//#region src/components/stat/index.d.ts
+export interface StatDeltaProps extends JSX.HTMLAttributes<HTMLElement> {
+  direction?: "up" | "down" | "flat";
+  "data-direction"?: string;
+}
+/** The delta reads the direction in the fixed semantic pigments; an
+ * explicit `data-direction` attribute on the consumer side still wins. */
+declare function Delta(props: StatDeltaProps): JSX.Element;
+export declare const Stat: ((props: JSX.HTMLAttributes<HTMLDivElement>) => JSX.Element) & {
+  Root: (props: JSX.HTMLAttributes<HTMLDivElement>) => JSX.Element;
+  Label: (props: JSX.HTMLAttributes<HTMLDivElement>) => JSX.Element;
+  Value: (props: JSX.HTMLAttributes<HTMLDivElement>) => JSX.Element;
+  Delta: typeof Delta;
+  Description: (props: JSX.HTMLAttributes<HTMLDivElement>) => JSX.Element;
+};
+//#endregion

package/dist/components/stat/index.mjs

@@ -0,0 +1,44 @@
+import { injectComponentStyle } from "@bysages/core";
+import { createComponent, mergeProps, spread, template } from "@solidjs/web";
+import { splitProps } from "solid-js";
+//#region src/components/stat/index.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<span>`);
+function part(name, tag) {
+	function Component(props) {
+		return createComponent(tag, mergeProps(props, {
+			"data-scope": "stat",
+			get "data-part"() {
+				return name.toLowerCase();
+			}
+		}));
+	}
+	return Component;
+}
+const Root = part("Root", "div");
+const Label = part("Label", "p");
+const Value = part("Value", "div");
+const Description = part("Description", "p");
+/** The delta reads the direction in the fixed semantic pigments; an
+* explicit `data-direction` attribute on the consumer side still wins. */
+function Delta(props) {
+	const [own, rest] = splitProps(props, ["direction"]);
+	var _el$ = _tmpl$();
+	spread(_el$, [rest, {
+		"data-scope": "stat",
+		"data-part": "delta",
+		get "data-direction"() {
+			return rest["data-direction"] ?? own.direction ?? "flat";
+		}
+	}], false);
+	return _el$;
+}
+const Stat = Object.assign(Root, {
+	Root,
+	Label,
+	Value,
+	Delta,
+	Description
+});
+injectComponentStyle("stat");
+//#endregion
+export { Stat };

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

@@ -0,0 +1,18 @@
+import { Steps as Steps$1, StepsRootProps } from "@ark-ui/solid/steps";
+//#region src/components/steps/index.d.ts
+/**
+ * Steps — linear progress through a sequence.
+ *
+ * Parts: Root, List, Item, Trigger, Indicator, Separator, Content,
+ * PrevTrigger, NextTrigger, Progress. Indicator and Separator carry
+ * data-complete / data-current / data-incomplete.
+ */
+type StepsOwnProps = {
+  /** One rung of the control-height ladder every indicator stands on. */
+  size?: "sm" | "md" | "lg";
+};
+declare function StepsRoot(props: StepsRootProps & StepsOwnProps): import("solid-js").JSX.Element;
+export declare const Steps: Omit<typeof Steps$1, "Root"> & {
+  Root: typeof StepsRoot;
+};
+//#endregion

package/dist/components/steps/index.mjs

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

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

@@ -0,0 +1,8 @@
+import { Swap as Swap$1 } from "@ark-ui/solid/swap";
+//#region src/components/swap/index.d.ts
+/** Ark's Swap, dressed in the paper-and-ink system: two impressions
+ * occupying one seal, the arriving one growing into place on the spring
+ * while the departing one shrinks away. The API is Ark's own — Root,
+ * Indicator (type="on" | "off"), RootProvider. */
+export declare const Swap: typeof Swap$1;
+//#endregion

package/dist/components/swap/index.mjs

@@ -0,0 +1,11 @@
+import { injectComponentStyle } from "@bysages/core";
+import { Swap as Swap$1 } from "@ark-ui/solid/swap";
+//#region src/components/swap/index.ts
+/** Ark's Swap, dressed in the paper-and-ink system: two impressions
+* occupying one seal, the arriving one growing into place on the spring
+* while the departing one shrinks away. The API is Ark's own — Root,
+* Indicator (type="on" | "off"), RootProvider. */
+const Swap = Swap$1;
+injectComponentStyle("swap");
+//#endregion
+export { Swap };

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

@@ -0,0 +1,15 @@
+import { Switch as Switch$1, SwitchRootProps } from "@ark-ui/solid/switch";
+//#region src/components/switch/index.d.ts
+/** Ark's Switch, dressed in the paper-and-ink system: a track that rests
+ * in the inset shade of the paper and fills flat with primary ink when on,
+ * the thumb sliding on the spring. The API is Ark's own — Root, Label,
+ * Control, Thumb, HiddenInput. */
+type SwitchOwnProps = {
+  /** One rung for the thumb; the track travels with it. */
+  size?: "sm" | "md" | "lg";
+};
+declare function SwitchRoot(props: SwitchRootProps & SwitchOwnProps): import("solid-js").JSX.Element;
+export declare const Switch: Omit<typeof Switch$1, "Root"> & {
+  Root: typeof SwitchRoot;
+};
+//#endregion

package/dist/components/switch/index.mjs

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

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

@@ -0,0 +1,77 @@
+import { JSX } from "solid-js";
+import { CellData, ColumnDef, FlexRender, RowData, SortingState, TableFeatures, createColumnHelper } from "@tanstack/solid-table";
+//#region src/components/table/index.d.ts
+/** Column metadata understood by this table: mark columns whose values
+ * read right-aligned in tabular figures. The type parameters mirror the
+ * library's own declaration — augmentation merging demands an identical
+ * parameter list. */
+declare module "@tanstack/solid-table" {
+  interface ColumnMeta<in out TFeatures extends TableFeatures, in out TData extends RowData, TValue extends CellData = CellData> {
+    numeric?: boolean;
+  }
+}
+/** One-stop data table on TanStack Table v9, dressed in the paper-and-ink
+ * system: rows are CSS grids under ARIA table semantics, so sticky headers,
+ * pinned columns, merged cells, and a virtualized window all stay honest
+ * while sorting, filtering, tree expansion, selection, and pagination come
+ * from the row-model pipeline. */
+export interface DataTableProps {
+  /** Row data; replaced wholesale on change — TanStack's memoized row
+   * models keep unrelated rows untouched, so edits land without a full
+   * re-render. Tree rows nest under `subRows`. */
+  data: RowData[];
+  /** Column definitions (TanStack `ColumnDef`, preferably built with
+   * `createColumnHelper().columns([...])`). Give every column an `id`
+   * unless it uses `accessorKey`. `size` fixes a px width; `minSize`
+   * floors a flexing track; otherwise the track hugs its content and
+   * only the table's leftover width is shared between columns. */
+  columns: ColumnDef<any, any, any>[];
+  /** Render a leading checkbox column with select-all. */
+  selectable?: boolean;
+  /** Allow header-click sorting (default true). */
+  sortable?: boolean;
+  /** Render a global-filter toolbar and per-column filter inputs. */
+  filterable?: boolean;
+  /** Keep the built-in toolbar row above the table (default true when
+   * `filterable`). Turn it off to host the global filter in your own
+   * toolbar — the feature stays registered and the instance methods
+   * keep working. */
+  showToolbar?: boolean;
+  /** Enable tree expansion over `subRows`; the first column hosts the
+   * expander and depth indent. */
+  tree?: boolean;
+  /** Column ids whose equal adjacent values merge into one cell (mutually
+   * exclusive with `virtual`). */
+  merge?: string[];
+  /** Column ids pinned to the start edge. */
+  pinStart?: string[];
+  /** Column ids pinned to the end edge. */
+  pinEnd?: string[];
+  /** Virtualize the body through a fixed-height window (mutually exclusive
+   * with `merge`). */
+  virtual?: boolean;
+  /** Row height in px; must match CSS so the virtual window aligns. */
+  rowHeight?: number;
+  /** Render the pagination bar and slice rows client-side. */
+  paginated?: boolean;
+  pageSize?: number;
+  pageSizeOptions?: number[];
+  /** Keep the (optional) footer row pinned to the viewport bottom. */
+  stickyFooter?: boolean;
+  initialSorting?: SortingState;
+  globalFilterPlaceholder?: string;
+  emptyText?: string;
+  /** Allow dragging header cells onto each other to reorder columns and
+   * body rows onto each other to reorder data — with `tree`, row drops
+   * read as before / inside / after, so a drop can also nest a branch
+   * under its target. Rows need a stable `id`. Row dragging rests while
+   * sorting or filtering hides the data order. */
+  reorderable?: boolean;
+  /** Fires with the reordered data array (the whole tree in tree mode). */
+  onRowReorder?: (rows: RowData[]) => void;
+  /** Fires with the full leaf-column id order after a header drop. */
+  onColumnReorder?: (ids: string[]) => void;
+}
+export declare function DataTable(props: DataTableProps): JSX.Element;
+//#endregion
+export { type ColumnDef, FlexRender, type SortingState, createColumnHelper };