@bysages/solid 0.3.1 → 0.4.1

package/dist/components/spotlight/index.mjs

@@ -1,12 +1,13 @@
-import { injectComponentStyle } from "@bysages/core";
+import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
 import { insert, spread, template } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
 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) {
+const Spotlight = withSelfRoot(function Spotlight(props) {
 	injectComponentStyle("spotlight");
 	const [own, rest] = splitProps(props, ["radius"]);
 	const track = (event) => {
@@ -33,6 +34,6 @@ function Spotlight(props) {
 		return props.children;
 	});
 	return _el$;
-}
+});
 //#endregion
 export { Spotlight };

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

@@ -7,5 +7,7 @@ export interface StackProps extends JSX.HTMLAttributes<HTMLDivElement> {
   align?: string;
   justify?: string;
 }
-export declare function Stack(props: StackProps): JSX.Element;
+export declare const Stack: ((props: StackProps) => JSX.Element) & {
+  Root: (props: StackProps) => JSX.Element;
+};
 //#endregion

package/dist/components/stack/index.mjs

@@ -1,5 +1,6 @@
-import { injectComponentStyle } from "@bysages/core";
+import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
 import { spread, template } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { splitProps } from "solid-js";
 //#region src/components/stack/index.tsx
 var _tmpl$ = /* @__PURE__ */ template(`<div>`);
@@ -13,7 +14,7 @@ const gapVars = {
 	lg: "var(--bs-gap-lg)",
 	xl: "var(--bs-gap-xl)"
 };
-function Stack(props) {
+const Stack = withSelfRoot(function Stack(props) {
 	injectComponentStyle("stack");
 	const [own, rest] = splitProps(props, [
 		"direction",
@@ -28,9 +29,9 @@ function Stack(props) {
 			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
+				"--bs-stack-align": own.align,
+				"--bs-stack-justify": own.justify,
+				"--bs-stack-wrap": own.wrap ? "wrap" : void 0
 			};
 		},
 		"data-scope": "stack",
@@ -40,6 +41,6 @@ function Stack(props) {
 		}
 	}], false);
 	return _el$;
-}
+});
 //#endregion
 export { Stack };

package/dist/components/stat/index.mjs

@@ -1,5 +1,5 @@
-import { injectComponentStyle } from "@bysages/core";
 import { createComponent, mergeProps, spread, template } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { splitProps } from "solid-js";
 //#region src/components/stat/index.tsx
 var _tmpl$ = /* @__PURE__ */ template(`<span>`);

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

@@ -8,16 +8,33 @@ import { Steps as Steps$1, StepsRootProps } from "@ark-ui/solid/steps";
  * PrevTrigger, NextTrigger, Progress. Indicator and Separator carry
  * data-complete / data-current / data-incomplete.
  */
+type StepsRootProps$1 = StepsRootProps & StepsOwnProps;
 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;
+declare function StepsRoot(props: StepsRootProps$1): import("solid-js").JSX.Element;
+type StepsItem = {
+  title: string;
+};
+export interface StepsFacadeProps {
+  items: StepsItem[];
+  step?: number;
+  defaultStep?: number;
+  linear?: boolean;
+  orientation?: "horizontal" | "vertical";
+  /** One rung of the control-height ladder every indicator stands on. */
+  size?: "sm" | "md" | "lg";
+  class?: string;
+  onStepChange?: (step: number) => void;
+}
+declare function StepsFacade(props: StepsFacadeProps): import("solid-js").JSX.Element;
 /** The machine wraps each tab in an item div; presentation keeps the
  * tablist owned children legal while the tab itself keeps its role. */
 declare function StepsItem(props: ComponentProps<typeof Steps$1.Item>): import("solid-js").JSX.Element;
-export declare const Steps: Omit<typeof Steps$1, "Root" | "Item"> & {
+export declare const Steps: typeof StepsFacade & Omit<typeof Steps$1, "Root" | "Item"> & {
   Root: typeof StepsRoot;
   Item: typeof StepsItem;
 };
-//#endregion
+//#endregion
+export { StepsItem };

package/dist/components/steps/index.mjs

@@ -1,24 +1,83 @@
-import { injectComponentStyle } from "@bysages/core";
-import { createComponent, mergeProps } from "@solidjs/web";
-import { splitProps } from "solid-js";
+import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
+import { t as useElementId } from "../../id-2ygNzPHF.mjs";
+import { createComponent, memo, mergeProps } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
+import { For, 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 id = useElementId("steps", () => rest.id);
+	return createComponent(Steps$1.Root, mergeProps(rest, {
+		get id() {
+			return id();
+		},
+		get "data-size"() {
+			return own.size ?? "md";
+		}
+	}));
+}
+function StepsFacade(props) {
+	injectComponentStyle("steps");
+	return createComponent(StepsRoot, mergeProps({
+		get "class"() {
+			return props.class;
+		},
+		get size() {
+			return props.size ?? "md";
+		},
+		get count() {
+			return props.items.length;
+		},
+		get linear() {
+			return props.linear ?? false;
+		},
+		get orientation() {
+			return props.orientation ?? "horizontal";
+		},
+		get defaultStep() {
+			return props.defaultStep ?? 0;
+		}
+	}, () => {
+		return props.step === void 0 ? {} : { step: props.step };
+	}, {
+		onStepChange: (details) => props.onStepChange?.(details.step),
+		get children() {
+			return createComponent(Steps$1.List, { get children() {
+				return createComponent(For, {
+					get each() {
+						return props.items;
+					},
+					children: (item, index) => createComponent(Steps$1.Item, {
+						get index() {
+							return index();
+						},
+						role: "presentation",
+						get children() {
+							return [createComponent(Steps$1.Trigger, { get children() {
+								return [createComponent(Steps$1.Indicator, { get children() {
+									return String(index() + 1);
+								} }), memo(() => {
+									return item.title;
+								})];
+							} }), createComponent(Steps$1.Separator, {})];
+						}
+					})
+				});
+			} });
+		}
+	}));
 }
 /** The machine wraps each tab in an item div; presentation keeps the
 * tablist owned children legal while the tab itself keeps its role. */
 function StepsItem(props) {
 	return createComponent(Steps$1.Item, mergeProps(props, { role: "presentation" }));
 }
-const Steps = {
+const Steps = defineFamily(StepsFacade, {
 	...Steps$1,
 	Root: StepsRoot,
 	Item: StepsItem
-};
+});
 injectComponentStyle("steps");
 //#endregion
 export { Steps };

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

@@ -1,8 +1,12 @@
+import { ComponentProps } from "solid-js";
 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;
+declare function SwapRoot(props: ComponentProps<typeof Swap$1.Root>): import("solid-js").JSX.Element;
+export declare const Swap: typeof SwapRoot & Omit<typeof Swap$1, "Root"> & {
+  Root: typeof SwapRoot;
+};
 //#endregion

package/dist/components/swap/index.mjs

@@ -1,11 +1,23 @@
-import { injectComponentStyle } from "@bysages/core";
+import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
+import { t as useElementId } from "../../id-2ygNzPHF.mjs";
+import { injectComponentStyle } from "@bysages/core/styling";
+import { createComponent, mergeProps } from "solid-js";
 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;
+function SwapRoot(props) {
+	const id = useElementId("swap", () => props.id);
+	return createComponent(Swap$1.Root, mergeProps(props, { get id() {
+		return id();
+	} }));
+}
+const Swap = defineFamily(SwapRoot, {
+	...Swap$1,
+	Root: SwapRoot
+});
 injectComponentStyle("swap");
 //#endregion
 export { Swap };

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

@@ -9,7 +9,7 @@ type SwitchOwnProps = {
   size?: "sm" | "md" | "lg";
 };
 declare function SwitchRoot(props: SwitchRootProps & SwitchOwnProps): import("solid-js").JSX.Element;
-export declare const Switch: Omit<typeof Switch$1, "Root"> & {
+export declare const Switch: typeof SwitchRoot & Omit<typeof Switch$1, "Root"> & {
   Root: typeof SwitchRoot;
 };
 //#endregion

package/dist/components/switch/index.mjs

@@ -1,18 +1,26 @@
-import { injectComponentStyle } from "@bysages/core";
+import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
+import { t as useElementId } from "../../id-2ygNzPHF.mjs";
 import { createComponent, mergeProps } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
 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 id = useElementId("switch", () => rest.id);
+	return createComponent(Switch$1.Root, mergeProps(rest, {
+		get id() {
+			return id();
+		},
+		get "data-size"() {
+			return own.size ?? "md";
+		}
+	}));
 }
-const Switch = {
+const Switch = defineFamily(SwitchRoot, {
 	...Switch$1,
 	Root: SwitchRoot
-};
+});
 injectComponentStyle("switch");
 //#endregion
 export { Switch };

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

@@ -72,6 +72,8 @@ export interface DataTableProps {
   /** Fires with the full leaf-column id order after a header drop. */
   onColumnReorder?: (ids: string[]) => void;
 }
-export declare function DataTable(props: DataTableProps): JSX.Element;
+export declare const DataTable: ((props: DataTableProps) => JSX.Element) & {
+  Root: (props: DataTableProps) => JSX.Element;
+};
 //#endregion
 export { type ColumnDef, FlexRender, type SortingState, createColumnHelper };