@bysages/solid 0.3.0 → 0.4.0

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

@@ -7,5 +7,7 @@ export interface AvatarGroupProps extends JSX.HTMLAttributes<HTMLDivElement> {
    * stylesheet to re-point the avatars' measure. */
   size?: "sm" | "md" | "lg";
 }
-export declare function AvatarGroup(props: AvatarGroupProps): JSX.Element;
+export declare const AvatarGroup: ((props: AvatarGroupProps) => JSX.Element) & {
+  Root: (props: AvatarGroupProps) => JSX.Element;
+};
 //#endregion

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

@@ -1,9 +1,10 @@
+import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { spread, template } from "@solidjs/web";
 import { splitProps } from "solid-js";
 //#region src/components/avatar-group/index.tsx
 var _tmpl$ = /* @__PURE__ */ template(`<div>`);
-function AvatarGroup(props) {
+const AvatarGroup = withSelfRoot(function AvatarGroup(props) {
 	injectComponentStyle("avatar-group");
 	const [own, rest] = splitProps(props, ["size"]);
 	var _el$ = _tmpl$();
@@ -15,6 +16,6 @@ function AvatarGroup(props) {
 		}
 	}], false);
 	return _el$;
-}
+});
 //#endregion
 export { AvatarGroup };

package/dist/components/back-top/index.d.mts

@@ -25,5 +25,7 @@ export interface BackTopProps extends JSX.HTMLAttributes<HTMLButtonElement> {
  * paper, hairline and halo are its; this family owns only the floating
  * and the entrance.
  */
-export declare function BackTop(props: BackTopProps): JSX.Element;
+export declare const BackTop: ((props: BackTopProps) => JSX.Element) & {
+  Root: (props: BackTopProps) => JSX.Element;
+};
 //#endregion

package/dist/components/back-top/index.mjs

@@ -1,10 +1,11 @@
+import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
+import { r as iconNode } from "../../icon-DTqmJCd5.mjs";
 import { Button } from "../button/index.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { createComponent, insert, mergeProps, spread, template } from "@solidjs/web";
 import { createSignal, onCleanup, onMount, splitProps } from "solid-js";
 //#region src/components/back-top/index.tsx
 var _tmpl$ = /* @__PURE__ */ template(`<div>`);
-var _tmpl$2 = /* @__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 14 6-6 6 6">`);
 /**
 * A way home: after the page has scrolled past `threshold`, a small
 * floating control rises at the page's corner and returns the reader to
@@ -19,7 +20,7 @@ var _tmpl$2 = /* @__PURE__ */ template(`<svg width=16 height=16 viewBox="0 0 24
 * paper, hairline and halo are its; this family owns only the floating
 * and the entrance.
 */
-function BackTop(props) {
+const BackTop = withSelfRoot(function BackTop(props) {
 	injectComponentStyle("back-top");
 	const [own, rest] = splitProps(props, [
 		"threshold",
@@ -84,10 +85,13 @@ function BackTop(props) {
 		}
 	})));
 	return _el$;
-}
-/** The single glyph a way-home control needs: one stroke pointing up. */
+});
+/** The single icon a way-home control needs: one stroke pointing up. */
 function chevronUp() {
-	return _tmpl$2();
+	return iconNode("chevron-up", {
+		width: "16",
+		height: "16"
+	});
 }
 //#endregion
 export { BackTop };

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

@@ -6,5 +6,7 @@ export interface BadgeProps extends JSX.HTMLAttributes<HTMLSpanElement> {
   tone?: "ink" | "info" | "success" | "warning" | "danger";
   variant?: "solid" | "subtle" | "outline";
 }
-export declare function Badge(props: BadgeProps): JSX.Element;
+export declare const Badge: ((props: BadgeProps) => JSX.Element) & {
+  Root: (props: BadgeProps) => JSX.Element;
+};
 //#endregion

package/dist/components/badge/index.mjs

@@ -1,9 +1,10 @@
+import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { spread, template } from "@solidjs/web";
 import { splitProps } from "solid-js";
 //#region src/components/badge/index.tsx
 var _tmpl$ = /* @__PURE__ */ template(`<span>`);
-function Badge(props) {
+const Badge = withSelfRoot(function Badge(props) {
 	injectComponentStyle("badge");
 	const [own, rest] = splitProps(props, ["tone", "variant"]);
 	var _el$ = _tmpl$();
@@ -18,6 +19,6 @@ function Badge(props) {
 		}
 	}], false);
 	return _el$;
-}
+});
 //#endregion
 export { Badge };

package/dist/components/banner/index.mjs

@@ -1,9 +1,11 @@
+import { r as iconNode } from "../../icon-DTqmJCd5.mjs";
+import { n as useComponentMessages } from "../../use-component-messages-C4SCVYjD.mjs";
 import { injectComponentStyle } from "@bysages/core";
-import { createComponent, mergeProps, spread, template } from "@solidjs/web";
+import { createComponent, insert, mergeProps, spread, template } from "@solidjs/web";
 import { splitProps } from "solid-js";
 //#region src/components/banner/index.tsx
 var _tmpl$ = /* @__PURE__ */ template(`<div>`);
-var _tmpl$2 = /* @__PURE__ */ template(`<button><svg viewBox="0 0 16 16"fill=none aria-hidden=true><path d="M4 4l8 8M12 4l-8 8"stroke=currentColor stroke-width=1.5 stroke-linecap=round>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<button>`);
 /** A page-level notice, spoken across the full measure: a wash of the
 * status pigment, one heavier hairline on the leading edge, and room
 * for actions and a quiet close. Ink is the neutral register; the four
@@ -40,17 +42,21 @@ const Actions = part("Actions", "div");
 * consumer's state. */
 function Close(props) {
 	const [own, rest] = splitProps(props, ["type"]);
+	const messages = useComponentMessages();
 	var _el$2 = _tmpl$2();
 	spread(_el$2, [rest, {
 		get type() {
 			return own.type ?? "button";
 		},
 		get "aria-label"() {
-			return rest["aria-label"] ?? "Dismiss";
+			return rest["aria-label"] ?? messages().banner.dismiss;
 		},
 		"data-scope": "banner",
 		"data-part": "close"
 	}], true);
+	insert(_el$2, () => {
+		return iconNode("x");
+	});
 	return _el$2;
 }
 const Banner = Object.assign(Root, {

package/dist/components/block-ui/index.d.mts

@@ -8,5 +8,7 @@ export interface BlockUIProps extends JSX.HTMLAttributes<HTMLDivElement> {
 /** A curtain over content that must wait: the blocked region keeps its
  * shape and dims under frosted paper while a quiet wheel reports the
  * wait. Callers own the state; the curtain only answers it. */
-export declare function BlockUI(props: BlockUIProps): JSX.Element;
+export declare const BlockUI: ((props: BlockUIProps) => JSX.Element) & {
+  Root: (props: BlockUIProps) => JSX.Element;
+};
 //#endregion

package/dist/components/block-ui/index.mjs

@@ -1,3 +1,4 @@
+import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
 import { Spinner } from "../spinner/index.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { createComponent, insert, spread, template } from "@solidjs/web";
@@ -8,7 +9,7 @@ var _tmpl$2 = /* @__PURE__ */ template(`<div><!><!>`);
 /** A curtain over content that must wait: the blocked region keeps its
 * shape and dims under frosted paper while a quiet wheel reports the
 * wait. Callers own the state; the curtain only answers it. */
-function BlockUI(props) {
+const BlockUI = withSelfRoot(function BlockUI(props) {
 	injectComponentStyle("block-ui");
 	const [own, rest] = splitProps(props, ["blocked", "children"]);
 	var _el$ = _tmpl$2();
@@ -38,6 +39,6 @@ function BlockUI(props) {
 		}
 	}), _el$4);
 	return _el$;
-}
+});
 //#endregion
 export { BlockUI };

package/dist/components/breadcrumb/index.mjs

@@ -1,14 +1,14 @@
+import { n as useComponentMessages } from "../../use-component-messages-C4SCVYjD.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { createComponent, mergeProps, spread, template } from "@solidjs/web";
 import { mergeProps as mergeProps$1 } from "solid-js";
 //#region src/components/breadcrumb/index.tsx
 var _tmpl$ = /* @__PURE__ */ template(`<span>`);
-/** A trail of waymarks: Root wraps the nav, List the ordered trail, and
-* each Item carries a Link — or the Current page — parted by a quiet
-* Separator. Links take href and the rest through attributes. */
 function part(name, tag, extra = {}) {
 	return ((props) => {
-		return createComponent(tag, mergeProps(extra, props, {
+		const messages = useComponentMessages();
+		const partExtra = typeof extra === "function" ? extra(messages()) : extra;
+		return createComponent(tag, mergeProps(partExtra, props, {
 			"data-scope": "breadcrumb",
 			get "data-part"() {
 				return name.toLowerCase();
@@ -16,7 +16,7 @@ function part(name, tag, extra = {}) {
 		}));
 	});
 }
-const Root = part("Root", "nav", { "aria-label": "Breadcrumb" });
+const Root = part("Root", "nav", (messages) => ({ "aria-label": messages.breadcrumb.label }));
 const List = part("List", "ol");
 const Item = part("Item", "li");
 const Link = part("Link", "a");

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

@@ -11,5 +11,7 @@ export interface ButtonProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement>
   /** Icon-only: the silhouette squares to the control height. */
   square?: boolean;
 }
-export declare function Button(props: ButtonProps): JSX.Element;
+export declare const Button: ((props: ButtonProps) => JSX.Element) & {
+  Root: (props: ButtonProps) => JSX.Element;
+};
 //#endregion

package/dist/components/button/index.mjs

@@ -1,9 +1,10 @@
+import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { spread, template } from "@solidjs/web";
 import { splitProps } from "solid-js";
 //#region src/components/button/index.tsx
 var _tmpl$ = /* @__PURE__ */ template(`<button>`);
-function Button(props) {
+const Button = withSelfRoot(function Button(props) {
 	injectComponentStyle("button");
 	const [own, rest] = splitProps(props, [
 		"variant",
@@ -38,6 +39,6 @@ function Button(props) {
 		"data-motion": "ink-ripple lit"
 	}], false);
 	return _el$;
-}
+});
 //#endregion
 export { Button };

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

@@ -1,3 +1,4 @@
+import { DatePicker as DatePicker$1 } from "../date-picker/index.mjs";
 import { JSX } from "solid-js";
 import { DatePickerRootProps } from "@ark-ui/solid/date-picker";
 //#region src/components/calendar/index.d.ts
@@ -13,5 +14,6 @@ export interface CalendarProps extends JSX.HTMLAttributes<HTMLDivElement> {
  * title zooms out through month and year grids; the grids themselves
  * are the shared machinery — value, range selection, and focus ride
  * Ark's own contract. */
-export declare function Calendar(props: CalendarProps): JSX.Element;
+declare function CalendarImpl(props: CalendarProps): JSX.Element;
+export declare const Calendar: typeof CalendarImpl & typeof DatePicker$1;
 //#endregion

package/dist/components/calendar/index.mjs

@@ -1,32 +1,36 @@
+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 { DatePicker as DatePicker$1 } from "../date-picker/index.mjs";
 import { injectComponentStyle } from "@bysages/core";
-import { createComponent, effect, insert, memo, mergeProps, readShallow, spread, style, template } from "@solidjs/web";
+import { createComponent, insert, memo, mergeProps, spread, template } from "@solidjs/web";
 import { For, Show, splitProps } from "solid-js";
 import { DatePicker } from "@ark-ui/solid/date-picker";
 //#region src/components/calendar/index.tsx
-var _tmpl$ = /* @__PURE__ */ template(`<svg width=16 height=16 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=1.75 aria-hidden=true><path d="m9 5 7 7-7 7">`);
-var _tmpl$2 = /* @__PURE__ */ template(`<div data-scope=calendar data-part=header>`);
-var _tmpl$3 = /* @__PURE__ */ template(`<div><!><!>`);
+var _tmpl$ = /* @__PURE__ */ template(`<div data-scope=calendar data-part=header>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<div><!><!>`);
 function chevron(dir) {
-	var _el$ = _tmpl$();
-	effect(() => readShallow(dir === "left" ? { transform: "rotate(180deg)" } : void 0), (_v$, _$p) => {
-		style(_el$, _v$, _$p);
+	return iconNode(dir === "left" ? "chevron-left" : "chevron-right", {
+		width: "16",
+		height: "16"
 	});
-	return _el$;
 }
 /** The date-picker's month grid, standing on the page without its
 * popup: always open, the trigger gone, the vessel a quiet card. The
 * title zooms out through month and year grids; the grids themselves
 * are the shared machinery — value, range selection, and focus ride
 * Ark's own contract. */
-function Calendar(props) {
+function CalendarImpl(props) {
 	injectComponentStyle("calendar");
 	injectComponentStyle("date-picker");
 	const [own, rest] = splitProps(props, [
+		"id",
 		"value",
 		"min",
 		"max",
 		"onValueChange"
 	]);
+	const id = useElementId("calendar", () => own.id);
 	const title = (dp) => {
 		const api = dp();
 		const d = api.focusedValue;
@@ -40,8 +44,8 @@ function Calendar(props) {
 		return `${decade} - ${decade + 9}`;
 	};
 	const header = () => (() => {
-		var _el$2 = _tmpl$2();
-		insert(_el$2, createComponent(DatePicker.ViewControl, { get children() {
+		var _el$ = _tmpl$();
+		insert(_el$, createComponent(DatePicker.ViewControl, { get children() {
 			return [
 				createComponent(DatePicker.PrevTrigger, { get children() {
 					return chevron("left");
@@ -54,16 +58,19 @@ function Calendar(props) {
 				} })
 			];
 		} }));
-		return _el$2;
+		return _el$;
 	})();
-	var _el$3 = _tmpl$3();
-	var _el$4 = _el$3.firstChild;
-	var _el$5 = _el$4.nextSibling;
-	spread(_el$3, [rest, {
+	var _el$2 = _tmpl$2();
+	var _el$3 = _el$2.firstChild;
+	var _el$4 = _el$3.nextSibling;
+	spread(_el$2, [rest, {
 		"data-scope": "calendar",
 		"data-part": "root"
 	}], true);
-	insert(_el$3, createComponent(DatePicker.Root, mergeProps({
+	insert(_el$2, createComponent(DatePicker.Root, mergeProps({
+		get id() {
+			return id();
+		},
 		open: true,
 		closeOnSelect: true,
 		inline: true
@@ -194,16 +201,17 @@ function Calendar(props) {
 				})
 			];
 		}
-	})), _el$4);
-	insert(_el$3, createComponent(Show, {
+	})), _el$3);
+	insert(_el$2, createComponent(Show, {
 		get when() {
 			return rest.children;
 		},
 		get children() {
 			return rest.children;
 		}
-	}), _el$5);
-	return _el$3;
+	}), _el$4);
+	return _el$2;
 }
+const Calendar = defineFamily(CalendarImpl, DatePicker$1);
 //#endregion
 export { Calendar };

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

@@ -1,3 +1,4 @@
+import { ComponentProps } from "solid-js";
 import { Carousel as Carousel$1 } from "@ark-ui/solid/carousel";
 //#region src/components/carousel/index.d.ts
 /** Ark's Carousel, dressed in the paper-and-ink system: slides ride in one
@@ -5,5 +6,8 @@ import { Carousel as Carousel$1 } from "@ark-ui/solid/carousel";
  * current indicator alone carries the ink. The API is Ark's own — Root,
  * Control, PrevTrigger, NextTrigger, ItemGroup, Item, IndicatorGroup,
  * Indicator, AutoplayTrigger, ProgressText. */
-export declare const Carousel: typeof Carousel$1;
+declare function CarouselRoot(props: ComponentProps<typeof Carousel$1.Root>): import("solid-js").JSX.Element;
+export declare const Carousel: typeof CarouselRoot & Omit<typeof Carousel$1, "Root"> & {
+  Root: typeof CarouselRoot;
+};
 //#endregion

package/dist/components/carousel/index.mjs

@@ -1,4 +1,7 @@
+import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
+import { t as useElementId } from "../../id-2ygNzPHF.mjs";
 import { injectComponentStyle } from "@bysages/core";
+import { createComponent, mergeProps } from "solid-js";
 import { Carousel as Carousel$1 } from "@ark-ui/solid/carousel";
 //#region src/components/carousel/index.ts
 /** Ark's Carousel, dressed in the paper-and-ink system: slides ride in one
@@ -6,7 +9,16 @@ import { Carousel as Carousel$1 } from "@ark-ui/solid/carousel";
 * current indicator alone carries the ink. The API is Ark's own — Root,
 * Control, PrevTrigger, NextTrigger, ItemGroup, Item, IndicatorGroup,
 * Indicator, AutoplayTrigger, ProgressText. */
-const Carousel = Carousel$1;
+function CarouselRoot(props) {
+	const id = useElementId("carousel", () => props.id);
+	return createComponent(Carousel$1.Root, mergeProps(props, { get id() {
+		return id();
+	} }));
+}
+const Carousel = defineFamily(CarouselRoot, {
+	...Carousel$1,
+	Root: CarouselRoot
+});
 injectComponentStyle("carousel");
 //#endregion
 export { Carousel };

package/dist/components/cascade-select/index.d.mts

@@ -27,5 +27,7 @@ export interface CascadeSelectProps extends JSX.HTMLAttributes<HTMLDivElement> {
  * swaps the corridor for a flat list of matching paths while a query
  * runs — each hit still reads as its full route.
  */
-export declare function CascadeSelect(props: CascadeSelectProps): JSX.Element;
+export declare const CascadeSelect: ((props: CascadeSelectProps) => JSX.Element) & {
+  Root: (props: CascadeSelectProps) => JSX.Element;
+};
 //#endregion