@bysages/react 0.2.2 → 0.3.0

package/dist/components/spinner/index.mjs

@@ -0,0 +1,36 @@
+import { injectComponentStyle } from "@bysages/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/spinner/index.tsx
+/** A wheel of waiting: one arc of ink turning about its center. Quiet by
+* default — it reports progress without claiming attention. */
+function Spinner({ size = "md", children, ...rest }) {
+	injectComponentStyle("spinner");
+	return /* @__PURE__ */ jsxs("span", {
+		...rest,
+		role: "status",
+		"aria-label": rest["aria-label"] ?? "Loading",
+		"data-scope": "spinner",
+		"data-part": "root",
+		"data-size": size,
+		children: [/* @__PURE__ */ jsxs("svg", {
+			viewBox: "0 0 24 24",
+			fill: "none",
+			"aria-hidden": true,
+			children: [/* @__PURE__ */ jsx("circle", {
+				cx: 12,
+				cy: 12,
+				r: 9,
+				stroke: "currentColor",
+				strokeOpacity: .2,
+				strokeWidth: 2.5
+			}), /* @__PURE__ */ jsx("path", {
+				d: "M21 12a9 9 0 0 0-9-9",
+				stroke: "currentColor",
+				strokeWidth: 2.5,
+				strokeLinecap: "round"
+			})]
+		}), children]
+	});
+}
+//#endregion
+export { Spinner };

package/dist/components/split-button/index.d.mts

@@ -0,0 +1,36 @@
+import { HTMLAttributes } from "react";
+//#region src/components/split-button/index.d.ts
+export interface SplitButtonEntry {
+  label: string;
+  /** Handed back with `onSelect` when the entry is chosen. */
+  value: string;
+  danger?: boolean;
+  disabled?: boolean;
+}
+export interface SplitButtonProps extends Omit<HTMLAttributes<HTMLDivElement>, "onSelect"> {
+  /** The main action's label. */
+  label: string;
+  /** The dropdown's entries. */
+  items?: SplitButtonEntry[];
+  /** How both halves rest; the arrow always reads as one control with
+   * the main button. */
+  variant?: "solid" | "outline" | "ghost" | "subtle";
+  tone?: "ink" | "info" | "success" | "warning" | "danger";
+  size?: "sm" | "md" | "lg";
+  disabled?: boolean;
+  /** The main button was pressed. */
+  onClick?: () => void;
+  /** An entry was chosen; carries its `value`. */
+  onSelect?: (value: string) => void;
+}
+/**
+ * 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 report `onSelect` with their value. The arrow
+ * is the menu machine's trigger grafting the button recipe — the
+ * machine keeps the element (positioning, focus, `data-state`), the
+ * button stylesheet's trigger register dresses it. The popup keeps the
+ * menu parts untouched.
+ */
+export declare function SplitButton({ label, items, variant, tone, size, disabled, onClick, onSelect, ...rest }: SplitButtonProps): import("react").JSX.Element;
+//#endregion

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

@@ -0,0 +1,71 @@
+import { Button } from "../button/index.mjs";
+import { injectComponentStyle } from "@bysages/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Portal } from "@ark-ui/react/portal";
+import { Menu } from "@ark-ui/react/menu";
+//#region src/components/split-button/index.tsx
+/**
+* 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 report `onSelect` with their value. The arrow
+* is the menu machine's trigger grafting the button recipe — 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({ label, items = [], variant = "solid", tone = "ink", size = "md", disabled = false, onClick, onSelect, ...rest }) {
+	injectComponentStyle("split-button");
+	injectComponentStyle("menu");
+	return /* @__PURE__ */ jsxs("div", {
+		...rest,
+		"data-scope": "split-button",
+		"data-part": "root",
+		children: [/* @__PURE__ */ jsx(Button, {
+			variant,
+			tone,
+			size,
+			disabled,
+			onClick,
+			children: label
+		}), /* @__PURE__ */ jsxs(Menu.Root, {
+			positioning: { placement: "bottom-end" },
+			children: [/* @__PURE__ */ jsx(Menu.Trigger, {
+				asChild: true,
+				children: /* @__PURE__ */ jsx("button", {
+					type: "button",
+					disabled,
+					"data-variant": variant,
+					"data-tone": tone,
+					"data-size": size,
+					"data-square": "true",
+					"data-motion": "ink-ripple lit",
+					"aria-label": "More actions",
+					children: chevronDown()
+				})
+			}), /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, { children: /* @__PURE__ */ jsx(Menu.Content, { children: items.map((entry) => /* @__PURE__ */ jsx(Menu.Item, {
+				value: entry.value,
+				disabled: entry.disabled,
+				"data-danger": entry.danger ? "" : void 0,
+				onSelect: () => onSelect?.(entry.value),
+				children: /* @__PURE__ */ jsx(Menu.ItemText, { children: entry.label })
+			}, entry.value)) }) }) })]
+		})]
+	});
+}
+/** One stroke pointing down: all a fitted dropdown arrow needs. */
+function chevronDown() {
+	return /* @__PURE__ */ jsx("svg", {
+		width: 16,
+		height: 16,
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 1.75,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
+	});
+}
+//#endregion
+export { SplitButton };

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

@@ -0,0 +1,7 @@
+import { Splitter as Splitter$1 } from "@ark-ui/react/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/react/splitter";
+//#region src/components/splitter/index.tsx
+/** 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,12 @@
+import { HTMLAttributes, ReactNode } from "react";
+//#region src/components/spotlight/index.d.ts
+export interface SpotlightProps extends HTMLAttributes<HTMLDivElement> {
+  /** How far the lamp throws before the ink swallows it. */
+  radius?: string;
+  children?: ReactNode;
+}
+/** 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({ radius, children, ...rest }: SpotlightProps): import("react").JSX.Element;
+//#endregion

package/dist/components/spotlight/index.mjs

@@ -0,0 +1,33 @@
+import { injectComponentStyle } from "@bysages/core";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/spotlight/index.tsx
+/** 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({ radius, children, ...rest }) {
+	injectComponentStyle("spotlight");
+	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`);
+	};
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		"data-scope": "spotlight",
+		"data-part": "root",
+		style: {
+			...rest.style,
+			"--bs-spot-radius": radius
+		},
+		onPointerMove: track,
+		onPointerEnter: (event) => {
+			track(event);
+			event.currentTarget.setAttribute("data-hovered", "");
+		},
+		onPointerLeave: (event) => event.currentTarget.removeAttribute("data-hovered"),
+		children
+	});
+}
+//#endregion
+export { Spotlight };

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

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

package/dist/components/stack/index.mjs

@@ -0,0 +1,32 @@
+import { injectComponentStyle } from "@bysages/core";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/stack/index.tsx
+/** 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({ direction = "column", gap = "md", wrap = false, align, justify, ...rest }) {
+	injectComponentStyle("stack");
+	const style = {
+		...rest.style,
+		"--bs-stack-gap": gapVars[gap] ?? gapVars.md,
+		alignItems: align,
+		justifyContent: justify,
+		flexWrap: wrap ? "wrap" : void 0
+	};
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		style,
+		"data-scope": "stack",
+		"data-part": "root",
+		"data-direction": direction
+	});
+}
+//#endregion
+export { Stack };

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

@@ -0,0 +1,29 @@
+import { HTMLAttributes } from "react";
+//#region src/components/stat/index.d.ts
+export interface StatDeltaProps extends HTMLAttributes<HTMLElement> {
+  direction?: "up" | "down" | "flat";
+  "data-direction"?: string;
+}
+export declare const Stat: {
+  ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
+  displayName: string;
+} & {
+  Root: {
+    ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
+    displayName: string;
+  };
+  Label: {
+    ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
+    displayName: string;
+  };
+  Value: {
+    ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
+    displayName: string;
+  };
+  Delta: ({ direction, children, ...rest }: StatDeltaProps) => import("react").JSX.Element;
+  Description: {
+    ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
+    displayName: string;
+  };
+};
+//#endregion

package/dist/components/stat/index.mjs

@@ -0,0 +1,37 @@
+import { injectComponentStyle } from "@bysages/core";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/stat/index.tsx
+function part(name, tag) {
+	const Tag = tag;
+	const Component = ({ children, ...rest }) => /* @__PURE__ */ jsx(Tag, {
+		...rest,
+		"data-scope": "stat",
+		"data-part": name.toLowerCase(),
+		children
+	});
+	Component.displayName = "Stat" + name;
+	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. */
+const Delta = ({ direction = "flat", children, ...rest }) => /* @__PURE__ */ jsx("span", {
+	...rest,
+	"data-scope": "stat",
+	"data-part": "delta",
+	"data-direction": rest["data-direction"] ?? direction,
+	children
+});
+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,19 @@
+import { ComponentProps } from "react";
+import { Steps as Steps$1 } from "@ark-ui/react/steps";
+//#region src/components/steps/index.d.ts
+type StepsRootProps = ComponentProps<typeof Steps$1.Root> & {
+  /** One rung of the control-height ladder every indicator stands on. */
+  size?: "sm" | "md" | "lg";
+};
+declare function StepsRoot({ size, ...rest }: StepsRootProps): import("react").JSX.Element;
+/**
+ * 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.
+ */
+export declare const Steps: Omit<typeof Steps$1, "Root"> & {
+  Root: typeof StepsRoot;
+};
+//#endregion

package/dist/components/steps/index.mjs

@@ -0,0 +1,24 @@
+import { injectComponentStyle } from "@bysages/core";
+import { jsx } from "react/jsx-runtime";
+import { Steps as Steps$1 } from "@ark-ui/react/steps";
+//#region src/components/steps/index.tsx
+function StepsRoot({ size = "md", ...rest }) {
+	return /* @__PURE__ */ jsx(Steps$1.Root, {
+		...rest,
+		"data-size": size
+	});
+}
+/**
+* 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.
+*/
+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/react/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/react/swap";
+//#region src/components/swap/index.tsx
+/** 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,16 @@
+import { ComponentProps } from "react";
+import { Switch as Switch$1 } from "@ark-ui/react/switch";
+//#region src/components/switch/index.d.ts
+type SwitchRootProps = ComponentProps<typeof Switch$1.Root> & {
+  /** One rung for the thumb; the track travels with it. */
+  size?: "sm" | "md" | "lg";
+};
+declare function SwitchRoot({ size, ...rest }: SwitchRootProps): import("react").JSX.Element;
+/** 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. */
+export declare const Switch: Omit<typeof Switch$1, "Root"> & {
+  Root: typeof SwitchRoot;
+};
+//#endregion

package/dist/components/switch/index.mjs

@@ -0,0 +1,21 @@
+import { injectComponentStyle } from "@bysages/core";
+import { jsx } from "react/jsx-runtime";
+import { Switch as Switch$1 } from "@ark-ui/react/switch";
+//#region src/components/switch/index.tsx
+function SwitchRoot({ size = "md", ...rest }) {
+	return /* @__PURE__ */ jsx(Switch$1.Root, {
+		...rest,
+		"data-size": size
+	});
+}
+/** 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. */
+const Switch = {
+	...Switch$1,
+	Root: SwitchRoot
+};
+injectComponentStyle("switch");
+//#endregion
+export { Switch };

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

@@ -0,0 +1,79 @@
+import { CSSProperties } from "react";
+import { CellData, ColumnDef, FlexRender, RowData, SortingState, TableFeatures, createColumnHelper } from "@tanstack/react-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/react-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;
+  /** Applied to the root vessel. */
+  style?: CSSProperties;
+}
+export declare function DataTable(rawProps: DataTableProps): import("react").JSX.Element;
+//#endregion
+export { type ColumnDef, FlexRender, type SortingState, createColumnHelper };