@bysages/solid 0.4.0 → 0.4.2

package/dist/components/tour/index.mjs

@@ -1,8 +1,8 @@
 import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
 import { t as useElementId } from "../../id-2ygNzPHF.mjs";
 import { Button } from "../button/index.mjs";
-import { injectComponentStyle } from "@bysages/core";
 import { createComponent, memo } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { Show, mergeProps as mergeProps$1 } from "solid-js";
 import { Tour as Tour$1, useTour as useTour$1 } from "@ark-ui/solid/tour";
 //#region src/components/tour/index.tsx

package/dist/components/transfer/index.mjs

@@ -3,10 +3,10 @@ import { r as iconNode } from "../../icon-DTqmJCd5.mjs";
 import { t as useElementId } from "../../id-2ygNzPHF.mjs";
 import { Button } from "../button/index.mjs";
 import { n as useComponentMessages, t as formatComponentMessage } from "../../use-component-messages-C4SCVYjD.mjs";
-import { t as Input } from "../../input-CPAJdwDb.mjs";
+import { t as Input } from "../../input-BL3N3L8g.mjs";
 import { Checkbox as Checkbox$1 } from "../checkbox/index.mjs";
-import { injectComponentStyle } from "@bysages/core";
 import { createComponent, insert, setAttribute, spread, template } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { For, Show, createSignal, splitProps } from "solid-js";
 import { Checkbox } from "@ark-ui/solid/checkbox";
 //#region src/components/transfer/index.tsx

package/dist/components/tree-select/index.mjs

@@ -2,10 +2,10 @@ import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
 import { r as iconNode } from "../../icon-DTqmJCd5.mjs";
 import { t as useElementId } from "../../id-2ygNzPHF.mjs";
 import { n as useComponentMessages } from "../../use-component-messages-C4SCVYjD.mjs";
-import { t as Input } from "../../input-CPAJdwDb.mjs";
+import { t as Input } from "../../input-BL3N3L8g.mjs";
 import { Popover as Popover$1 } from "../popover/index.mjs";
-import { injectComponentStyle } from "@bysages/core";
 import { createComponent, insert, memo, mergeProps, spread, template } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { For, Show, createMemo, createSignal, splitProps } from "solid-js";
 import { Portal } from "solid-js/web";
 import { useFilter } from "@ark-ui/solid/locale";

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

@@ -1,3 +1,4 @@
+import { ComponentProps, JSX } from "solid-js";
 import { TreeNode, TreeView as TreeView$1, TreeViewRootProps } from "@ark-ui/solid/tree-view";
 //#region src/components/tree-view/index.d.ts
 /** Ark's TreeView, dressed in the paper-and-ink system: quiet rows where
@@ -11,8 +12,37 @@ type TreeViewOwnProps = {
   /** One rung of the row register: the rows' breathing room follows it. */
   size?: "sm" | "md" | "lg";
 };
-declare function TreeViewRoot<T extends TreeNode>(props: TreeViewRootProps<T> & TreeViewOwnProps): import("solid-js").JSX.Element;
-export declare const TreeView: typeof TreeViewRoot & Omit<typeof TreeView$1, "Root"> & {
+declare function TreeViewRoot<T extends TreeNode>(props: TreeViewRootProps<T> & TreeViewOwnProps): JSX.Element;
+/** The node checkbox rides inside the branch control; the branch
+ * itself answers the keyboard, so the checkbox stays visual only. */
+declare function TreeViewNodeCheckbox(props: ComponentProps<typeof TreeView$1.NodeCheckbox>): JSX.Element;
+declare function TreeViewBranchIndicator(props: ComponentProps<typeof TreeView$1.BranchIndicator>): JSX.Element;
+type TreeOption = {
+  label: string;
+  value: string;
+  disabled?: boolean;
+  children?: TreeOption[];
+};
+export interface TreeViewFacadeProps {
+  value?: string[];
+  defaultValue?: string[];
+  /** Branch values expanded on first render; top-level branches by default. */
+  defaultExpandedValue?: string[];
+  /** Controlled expanded branch values. */
+  expandedValue?: string[];
+  options: TreeOption[];
+  multiple?: boolean;
+  label?: string;
+  /** One rung of the row register: the rows' breathing room follows it. */
+  size?: "sm" | "md" | "lg";
+  onValueChange?: (value: string[]) => void;
+}
+/** The complete tree behind selected values: nested options render their own
+ * branches and leaves, while async and checkbox trees remain anatomy work. */
+declare function TreeViewFacade(props: TreeViewFacadeProps): JSX.Element;
+export declare const TreeView: typeof TreeViewFacade & Omit<typeof TreeView$1, "Root" | "NodeCheckbox" | "BranchIndicator"> & {
   Root: typeof TreeViewRoot;
+  NodeCheckbox: typeof TreeViewNodeCheckbox;
+  BranchIndicator: typeof TreeViewBranchIndicator;
 };
 //#endregion

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

@@ -1,10 +1,10 @@
 import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
 import { r as iconNode } from "../../icon-DTqmJCd5.mjs";
 import { t as useElementId } from "../../id-2ygNzPHF.mjs";
-import { injectComponentStyle } from "@bysages/core";
-import { createComponent, mergeProps } from "@solidjs/web";
-import { splitProps } from "solid-js";
-import { TreeView as TreeView$1 } from "@ark-ui/solid/tree-view";
+import { createComponent, memo, mergeProps } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
+import { For, Show, createMemo, splitProps } from "solid-js";
+import { TreeView as TreeView$1, createTreeCollection } from "@ark-ui/solid/tree-view";
 //#region src/components/tree-view/index.tsx
 const ArkRoot = TreeView$1.Root;
 function TreeViewRoot(props) {
@@ -29,7 +29,96 @@ function TreeViewBranchIndicator(props) {
 		return props.children ?? iconNode("chevron-right");
 	} }));
 }
-const TreeView = defineFamily(TreeViewRoot, {
+/** The complete tree behind selected values: nested options render their own
+* branches and leaves, while async and checkbox trees remain anatomy work. */
+function TreeViewFacade(props) {
+	injectComponentStyle("tree-view");
+	const collection = createMemo(() => createTreeCollection({
+		nodeToValue: (node) => node.value,
+		nodeToString: (node) => node.label,
+		isNodeDisabled: (node) => !!node.disabled,
+		rootNode: {
+			value: "root",
+			label: "",
+			children: props.options
+		}
+	}));
+	const renderNode = (node, indexPath) => createComponent(TreeView$1.NodeProvider, {
+		node,
+		indexPath,
+		get children() {
+			return memo(() => {
+				return !!node.children?.length;
+			})() ? createComponent(TreeView$1.Branch, { get children() {
+				return [createComponent(TreeView$1.BranchControl, { get children() {
+					return [createComponent(TreeView$1.BranchIndicator, { get children() {
+						return iconNode("chevron-right");
+					} }), createComponent(TreeView$1.BranchText, { get children() {
+						return node.label;
+					} })];
+				} }), createComponent(TreeView$1.BranchContent, { get children() {
+					return createComponent(For, {
+						get each() {
+							return node.children;
+						},
+						children: (child, index) => renderNode(child, [...indexPath, index()])
+					});
+				} })];
+			} }) : createComponent(TreeView$1.Item, { get children() {
+				return createComponent(TreeView$1.ItemText, { get children() {
+					return node.label;
+				} });
+			} });
+		}
+	});
+	const branchValues = () => props.options.filter((option) => option.children?.length).map((option) => option.value);
+	return createComponent(TreeViewRoot, mergeProps({
+		get size() {
+			return props.size ?? "md";
+		},
+		get collection() {
+			return collection();
+		},
+		get defaultExpandedValue() {
+			return props.defaultExpandedValue ?? branchValues();
+		},
+		get defaultSelectedValue() {
+			return props.defaultValue;
+		},
+		get selectionMode() {
+			return props.multiple ? "multiple" : "single";
+		}
+	}, () => {
+		return props.expandedValue === void 0 ? {} : { expandedValue: props.expandedValue };
+	}, () => {
+		return props.value === void 0 ? {} : { selectedValue: props.value };
+	}, {
+		onSelectionChange: (event) => props.onValueChange?.(event.selectedValue),
+		get children() {
+			return [createComponent(Show, {
+				get when() {
+					return props.label;
+				},
+				get children() {
+					return createComponent(TreeView$1.Label, {
+						"data-visually-hidden": "",
+						get children() {
+							return props.label;
+						}
+					});
+				}
+			}), createComponent(TreeView$1.Tree, { get children() {
+				return createComponent(For, {
+					get each() {
+						return props.options;
+					},
+					children: (option, index) => renderNode(option, [index()])
+				});
+			} })];
+		}
+	}));
+}
+const TreeView = defineFamily(TreeViewFacade, {
 	...TreeView$1,
 	Root: TreeViewRoot,
 	NodeCheckbox: TreeViewNodeCheckbox,

package/dist/components/typography/index.mjs

@@ -1,5 +1,5 @@
-import { injectComponentStyle } from "@bysages/core";
 import { createComponent, mergeProps } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
 //#region src/components/typography/index.tsx
 /** The typographic voices, named so prose can ask for one: display and
 * heading ride the song-serif, the rest ride the hei. Nothing here is

package/dist/components/user/index.mjs

@@ -1,7 +1,7 @@
 import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
 import { t as useElementId } from "../../id-2ygNzPHF.mjs";
-import { injectComponentStyle } from "@bysages/core";
 import { createComponent, insert, memo, spread, template } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { splitProps } from "solid-js";
 import { Avatar } from "@ark-ui/solid/avatar";
 //#region src/components/user/index.tsx

package/dist/components/virtual-list/index.mjs

@@ -1,6 +1,6 @@
 import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
-import { injectComponentStyle } from "@bysages/core";
 import { createComponent, effect, insert, ref, setStyleProperty, spread, template } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { For, createSignal, splitProps } from "solid-js";
 import { createVirtualizer } from "@tanstack/solid-virtual";
 //#region src/components/virtual-list/index.tsx

package/dist/components/watermark/index.mjs

@@ -1,6 +1,6 @@
 import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
-import { injectComponentStyle } from "@bysages/core";
 import { effect, insert, ref, setStyleProperty, spread, template } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { createEffect, createSignal, splitProps } from "solid-js";
 //#region src/components/watermark/index.tsx
 var _tmpl$ = /* @__PURE__ */ template(`<div><div data-scope=watermark data-part=content></div><div data-scope=watermark data-part=marks aria-hidden=true>`);

package/dist/{image-viewer-B9A5lXsk.mjs → image-viewer-19s75Hz_.mjs}

@@ -5,8 +5,8 @@ import { Button } from "./components/button/index.mjs";
 import { n as useComponentMessages } from "./use-component-messages-C4SCVYjD.mjs";
 import { ButtonGroup } from "./components/button-group/index.mjs";
 import { Dialog as Dialog$1 } from "./components/dialog/index.mjs";
-import { injectComponentStyle } from "@bysages/core";
 import { createComponent, effect, insert, memo, mergeProps, setAttribute, setStyleProperty, spread, template } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { Show, createEffect, createSignal, splitProps } from "solid-js";
 import { Portal } from "solid-js/web";
 import { Dialog } from "@ark-ui/solid/dialog";

package/dist/index-BU5U5w04.d.mts

@@ -0,0 +1,35 @@
+import { ComponentProps } from "solid-js";
+import { Toc } from "@ark-ui/solid/toc";
+//#region src/components/toc/TocIndicator.d.ts
+/** The active stroke is decoration; hidden so the list reads as links
+ * alone. */
+declare function TocIndicator(props: ComponentProps<typeof Toc.Indicator>): import("solid-js").JSX.Element;
+//#endregion
+//#region src/components/toc/index.d.ts
+/** Ark's Toc, dressed in the paper-and-ink system: a quiet rail of links
+ * beside the scroll, one stroke of primary ink marking where the reader
+ * stands. The API is Ark's own — Root, Title, List, Item, Link, Indicator. */
+declare function TocRoot(props: ComponentProps<typeof Toc.Root>): import("solid-js").JSX.Element;
+/** The content column is the scroller the rail walks — a keyboard
+ * reader needs to reach it like any scroll region. */
+declare function TocContent(props: ComponentProps<typeof Toc.Content>): import("solid-js").JSX.Element;
+type TocItem = {
+  value: string;
+  label: string;
+  depth?: number;
+};
+interface TocFacadeProps {
+  items: TocItem[];
+  scrollEl?: () => HTMLElement | null;
+  title?: string;
+}
+/** The complete rail behind one page: items become anchor rows, the
+ * title names the list, and the active stroke follows the scroller. */
+declare function TocFacade(props: TocFacadeProps): import("solid-js").JSX.Element;
+declare const Toc$1: typeof TocFacade & Omit<typeof Toc, "Root" | "Indicator" | "Content"> & {
+  Root: typeof TocRoot;
+  Indicator: typeof TocIndicator;
+  Content: typeof TocContent;
+};
+//#endregion
+export { TocFacadeProps as n, Toc$1 as t };