@bysages/svelte 0.2.3 → 0.3.0

package/dist/dock-CKGRnXWu.mjs

@@ -0,0 +1,84 @@
+import { injectComponentStyle } from "@bysages/core";
+import "svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+//#region src/components/dock/Dock.svelte
+var rest_excludes$1 = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"maxScale",
+	"radius",
+	"children"
+]);
+var root$1 = $.from_html(`<div><!></div>`);
+function Dock$1($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("dock");
+	/** The tallest an item swells under the hand — 1 stands still. */
+	/** How far the hand reaches, in px, before an item stops answering. */
+	let maxScale = $.prop($$props, "maxScale", 3, 1.5), radius = $.prop($$props, "radius", 3, 96), rest = $.rest_props($$props, rest_excludes$1);
+	const ITEM = "[data-scope=\"dock\"][data-part=\"item\"]";
+	function magnify(event) {
+		for (const item of event.currentTarget.querySelectorAll(ITEM)) {
+			const rect = item.getBoundingClientRect();
+			const dist = Math.abs(event.clientX - (rect.left + rect.width / 2));
+			const t = Math.max(0, 1 - dist / radius());
+			item.style.setProperty("--bs-dock-scale", (1 + (maxScale() - 1) * t * t).toFixed(4));
+		}
+	}
+	function reset(event) {
+		for (const item of event.currentTarget.querySelectorAll(ITEM)) item.style.removeProperty("--bs-dock-scale");
+	}
+	var div = root$1();
+	$.attribute_effect(div, ($0) => ({
+		...rest,
+		"data-scope": "dock",
+		"data-part": "root",
+		style: $0,
+		onpointermove: magnify,
+		onpointerleave: reset
+	}), [() => ({
+		...$$props.style,
+		"--bs-dock-max-scale": String(maxScale())
+	})]);
+	var node = $.child(div);
+	$.snippet(node, () => $$props.children ?? $.noop);
+	$.reset(div);
+	$.append($$anchor, div);
+	$.pop();
+}
+//#endregion
+//#region src/components/dock/DockItem.svelte
+var rest_excludes = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"children"
+]);
+var root = $.from_html(`<div><!></div>`);
+function DockItem($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("dock");
+	let rest = $.rest_props($$props, rest_excludes);
+	var div = root();
+	$.attribute_effect(div, () => ({
+		...rest,
+		"data-scope": "dock",
+		"data-part": "item"
+	}));
+	var node = $.child(div);
+	$.snippet(node, () => $$props.children ?? $.noop);
+	$.reset(div);
+	$.append($$anchor, div);
+	$.pop();
+}
+//#endregion
+//#region src/components/dock/index.ts
+/** The magnifying dock: a floating rail whose icons swell toward the
+* hand — Dock, Dock.Item. */
+const Dock = Object.assign(Dock$1, {
+	Root: Dock$1,
+	Item: DockItem
+});
+//#endregion
+export { Dock as t };

package/dist/{form-De-ZwM1P.mjs → form-BTL9S1gn.mjs}

@@ -3,14 +3,14 @@ import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
 import { Field } from "@ark-ui/svelte/field";
 import { getContext, setContext } from "svelte";
-import { createField, createForm } from "@tanstack/svelte-form";
+import { createField, createField as useField, createForm, createForm as useForm } from "@tanstack/svelte-form";
 //#region src/components/form/context.ts
 const FORM_KEY = Symbol("bysages-form");
 function provideForm(engine) {
 	setContext(FORM_KEY, engine);
 	return engine;
 }
-function useForm() {
+function useForm$1() {
 	return getContext(FORM_KEY) ?? null;
 }
 //#endregion
@@ -163,7 +163,7 @@ function FormField$1($$anchor, $$props) {
 	};
 	injectComponentStyle("form");
 	let required = $.prop($$props, "required", 3, false), invalid = $.prop($$props, "invalid", 3, false), disabled = $.prop($$props, "disabled", 3, false), rest = $.rest_props($$props, rest_excludes);
-	const engine = $$props.form ?? useForm();
+	const engine = $$props.form ?? useForm$1();
 	function errorText(error) {
 		if (error == null) return "";
 		if (typeof error === "string") return error;
@@ -209,4 +209,4 @@ const Form = Form$1;
 const FormField = FormField$1;
 injectComponentStyle("field");
 //#endregion
-export { createForm as i, FormField as n, createField as r, Form as t };
+export { useField as a, createForm as i, FormField as n, useForm as o, createField as r, Form as t };

package/dist/{icon-B6_cYYzO.mjs → icon-D7AeDq0M.mjs}

@@ -1,7 +1,7 @@
 import { injectComponentStyle } from "@bysages/core";
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
-import { getIcon } from "@bysages/icons";
+import { getIcon } from "@bysages/core/icons";
 //#region src/components/icon/Icon.svelte
 var rest_excludes = /* @__PURE__ */ new Set([
 	"$$slots",
@@ -9,6 +9,7 @@ var rest_excludes = /* @__PURE__ */ new Set([
 	"$$legacy",
 	"size",
 	"label",
+	"glyph",
 	"name",
 	"children"
 ]);
@@ -18,8 +19,8 @@ function Icon$1($$anchor, $$props) {
 	$.push($$props, true);
 	injectComponentStyle("icon");
 	let size = $.prop($$props, "size", 3, "inherit"), rest = $.rest_props($$props, rest_excludes);
-	const glyph = $$props.name && $$props.children == null ? getIcon($$props.name) : void 0;
-	if ($$props.name && $$props.children == null && !glyph) console.error(`[icons] unknown icon name "${$$props.name}" — extend packages/icons/icons.config.json and rerun the generator`);
+	const resolved = $$props.glyph ?? ($$props.name && $$props.children == null ? getIcon($$props.name) : void 0);
+	if ($$props.name && $$props.children == null && $$props.glyph == null && !resolved) console.error(`[icons] unknown icon name "${$$props.name}" — not in the wrappers' whitelist; import the glyph from @bysages/icons and pass it as glyph`);
 	var span = root_1();
 	$.attribute_effect(span, () => ({
 		...rest,
@@ -39,14 +40,14 @@ function Icon$1($$anchor, $$props) {
 	};
 	var consequent_1 = ($$anchor) => {
 		var svg = root();
-		$.html(svg, () => glyph.body, true);
+		$.html(svg, () => resolved.body, true);
 		$.reset(svg);
-		$.template_effect(() => $.set_attribute(svg, "viewBox", `0 0 ${glyph.width ?? 24 ?? ""} ${glyph.height ?? 24 ?? ""}`));
+		$.template_effect(() => $.set_attribute(svg, "viewBox", `0 0 ${resolved.width ?? 24 ?? ""} ${resolved.height ?? 24 ?? ""}`));
 		$.append($$anchor, svg);
 	};
 	$.if(node, ($$render) => {
 		if ($$props.children) $$render(consequent);
-		else if (glyph) $$render(consequent_1, 1);
+		else if (resolved) $$render(consequent_1, 1);
 	});
 	$.reset(span);
 	$.append($$anchor, span);

package/dist/index-0k-VxNRm.d.mts

@@ -0,0 +1,15 @@
+import { HTMLAttributes } from "svelte/elements";
+//#region src/components/spotlight/props.d.ts
+interface SpotlightProps extends HTMLAttributes<HTMLDivElement> {
+  /** How far the lamp throws before the ink swallows it. */
+  radius?: string;
+}
+//#endregion
+//#region src/components/spotlight/index.d.ts
+/** The ink-light card: a vessel whose rim and face take light from the
+ * reader's hand. */
+declare const Spotlight: import("svelte").Component<import("svelte/elements").HTMLAttributes<HTMLDivElement> & {
+  radius?: string;
+}, {}, "">;
+//#endregion
+export { SpotlightProps as n, Spotlight as t };

package/dist/{index-NJ21Q4f4.d.mts → index-BEfqqxjl.d.mts}

@@ -5,6 +5,16 @@ interface DescriptionsRootProps extends HTMLAttributes<HTMLDListElement> {
   /** The horizontal layout reads as a table of two columns; the
    * vertical one stacks each pair for narrow measures. */
   layout?: "horizontal" | "vertical";
+  /** The framed register: one hairline round the whole, terms on
+   * inset paper. */
+  bordered?: boolean;
+  /** Pairs across the grid: one ledger per column. */
+  column?: number;
+  children?: Snippet;
+}
+interface DescriptionsItemProps extends HTMLAttributes<HTMLElement> {
+  /** Column pairs this entry stretches across. */
+  span?: number;
   children?: Snippet;
 }
 interface DescriptionsPartProps extends HTMLAttributes<HTMLElement> {
@@ -17,7 +27,7 @@ interface DescriptionsPartProps extends HTMLAttributes<HTMLElement> {
  * stacks each pair for narrow measures. */
 declare const Descriptions: import("svelte").Component<DescriptionsRootProps, {}, ""> & {
   Root: import("svelte").Component<DescriptionsRootProps, {}, "">;
-  Item: import("svelte").Component<DescriptionsPartProps, {}, "">;
+  Item: import("svelte").Component<DescriptionsItemProps, {}, "">;
   Term: import("svelte").Component<DescriptionsPartProps, {}, "">;
   Detail: import("svelte").Component<DescriptionsPartProps, {}, "">;
 };

package/dist/index-BmFfkztS.d.mts

@@ -0,0 +1,14 @@
+import { HTMLAttributes } from "svelte/elements";
+//#region src/components/block-ui/props.d.ts
+interface BlockUIProps extends HTMLAttributes<HTMLDivElement> {
+  /** Whether the curtain is drawn. */
+  blocked?: boolean;
+  children?: import("svelte").Snippet;
+}
+//#endregion
+//#region src/components/block-ui/index.d.ts
+/** A curtain over content that must wait: frosted paper and one
+ * quiet wheel. */
+declare const BlockUI: import("svelte").Component<BlockUIProps, {}, "">;
+//#endregion
+export { BlockUIProps as n, BlockUI as t };

package/dist/{index-BgLAlGbg.d.mts → index-BoR_54C_.d.mts}

@@ -2,6 +2,9 @@ import { Snippet } from "svelte";
 import { HTMLAttributes } from "svelte/elements";
 //#region src/components/timeline/props.d.ts
 interface TimelineProps extends HTMLAttributes<HTMLOListElement> {
+  /** The thread's direction: a vertical line of moments, or one
+   * running left to right. */
+  orientation?: "vertical" | "horizontal";
   children?: Snippet;
 }
 interface TimelineItemProps extends HTMLAttributes<HTMLLIElement> {

package/dist/index-BolxaoaW.d.mts

@@ -0,0 +1,18 @@
+import { Snippet } from "svelte";
+import { HTMLAttributes } from "svelte/elements";
+//#region src/components/deferred-content/props.d.ts
+interface DeferredContentProps extends Omit<HTMLAttributes<HTMLDivElement>, "placeholder"> {
+  /** How much of the placeholder must be visible before the content
+   * mounts, from 0 (any pixel) to 1 (the whole box). */
+  threshold?: number;
+  /** Drawn until the box approaches the viewport. */
+  placeholder?: Snippet;
+  children?: Snippet;
+}
+//#endregion
+//#region src/components/deferred-content/index.d.ts
+/** Content that waits to be worth rendering: the slot mounts when the
+ * placeholder approaches the viewport. */
+declare const DeferredContent: import("svelte").Component<DeferredContentProps, {}, "">;
+//#endregion
+export { DeferredContentProps as n, DeferredContent as t };

package/dist/index-CAb_-2Bn.d.mts

@@ -0,0 +1,21 @@
+import { HTMLAttributes } from "svelte/elements";
+//#region src/components/order-list/props.d.ts
+interface OrderOption {
+  label: string;
+  value: string;
+}
+interface OrderListProps extends HTMLAttributes<HTMLDivElement> {
+  /** Two-way bindable — the rows in their current order; the value is
+   * the order. */
+  value?: string[];
+  /** Every row the ledger knows, in no particular order. */
+  options: OrderOption[];
+  label?: string;
+}
+//#endregion
+//#region src/components/order-list/index.d.ts
+/** A ledger the reader may rewrite: rows move by grip or by the side
+ * arrows; the value is the order. */
+declare const OrderList: import("svelte").Component<OrderListProps, {}, "value">;
+//#endregion
+export { OrderListProps as n, OrderOption as r, OrderList as t };

package/dist/{index-Cd5VU1DI.d.mts → index-CV1LSzq5.d.mts}

@@ -6,6 +6,9 @@ interface AvatarProps {
    * default (large) stands as tall as the biggest control so an avatar
    * rides a row without stretching it. */
   size?: AvatarSize;
+  /** The corner: round by default; square cuts it sharp, a stamp
+   * beside a round portrait. */
+  shape?: "circle" | "square";
   children?: import("svelte").Snippet;
 }
 //#endregion

package/dist/index-CmskeLd_.d.mts

@@ -0,0 +1,23 @@
+import { HTMLAttributes } from "svelte/elements";
+//#region src/components/bento/props.d.ts
+interface BentoProps extends HTMLAttributes<HTMLDivElement> {
+  /** Tracks across the lattice. */
+  columns?: number;
+}
+//#endregion
+//#region src/components/bento/index.d.ts
+/** The bento lattice: a grid of unequal tiles that reads as one plate
+ * — Bento, Bento.Cell. */
+declare const Bento: import("svelte").Component<import("svelte/elements").HTMLAttributes<HTMLDivElement> & {
+  columns?: number;
+}, {}, ""> & {
+  Root: import("svelte").Component<import("svelte/elements").HTMLAttributes<HTMLDivElement> & {
+    columns?: number;
+  }, {}, "">;
+  Cell: import("svelte").Component<import("svelte/elements").HTMLAttributes<HTMLDivElement> & {
+    span?: number;
+    rowSpan?: number;
+  }, {}, "">;
+};
+//#endregion
+export { BentoProps as n, Bento as t };

package/dist/index-CnrohEXe.d.mts

@@ -0,0 +1,24 @@
+import { HTMLAttributes } from "svelte/elements";
+//#region src/components/dock/props.d.ts
+interface DockProps extends HTMLAttributes<HTMLDivElement> {
+  /** The tallest an item swells under the hand — 1 stands still. */
+  maxScale?: number;
+  /** How far the hand reaches, in px, before an item stops answering. */
+  radius?: number;
+}
+//#endregion
+//#region src/components/dock/index.d.ts
+/** The magnifying dock: a floating rail whose icons swell toward the
+ * hand — Dock, Dock.Item. */
+declare const Dock: import("svelte").Component<import("svelte/elements").HTMLAttributes<HTMLDivElement> & {
+  maxScale?: number;
+  radius?: number;
+}, {}, ""> & {
+  Root: import("svelte").Component<import("svelte/elements").HTMLAttributes<HTMLDivElement> & {
+    maxScale?: number;
+    radius?: number;
+  }, {}, "">;
+  Item: import("svelte").Component<import("svelte/elements").HTMLAttributes<HTMLDivElement>, {}, "">;
+};
+//#endregion
+export { DockProps as n, Dock as t };