@askrjs/themes 0.0.9 → 0.0.10

package/dist/components/section/section.types.d.ts

@@ -1,23 +1,6 @@
-import { BoxLayoutOwnProps, LayoutResponsive } from "../box/box.types.js";
-import { JSXElement } from "@askrjs/askr/foundations";
-import { Ref } from "@askrjs/askr/foundations/utilities";
-
+import { BlockElementProps } from "../block/block.types.js";
 //#region src/components/section/section.types.d.ts
-type SectionOwnProps = BoxLayoutOwnProps & {
-  size?: LayoutResponsive<"1" | "2" | "3" | "4">;
-  children?: unknown;
-};
-type SectionElementProps = Omit<JSX.IntrinsicElements["section"], "children" | "ref"> & SectionOwnProps & {
-  asChild?: false;
-  ref?: Ref<HTMLElement>;
-};
-type SectionAsChildProps = SectionOwnProps & {
-  asChild: true;
-  children: JSXElement;
-  ref?: Ref<unknown>;
-  style?: JSX.IntrinsicElements["section"]["style"];
-};
-type SectionProps = SectionElementProps | SectionAsChildProps;
+type SectionProps = Omit<BlockElementProps<"section">, "as">;
 //#endregion
-export { SectionAsChildProps, SectionElementProps, SectionOwnProps, SectionProps };
+export { SectionProps };
 //# sourceMappingURL=section.types.d.ts.map

package/dist/components/separator/index.d.ts

@@ -1,3 +1,2 @@
 import { SeparatorAsChildProps, SeparatorNativeProps, SeparatorOwnProps, SeparatorProps } from "./separator.types.js";
-import { Separator } from "./separator.js";
-import { SEPARATOR_A11Y_CONTRACT, SeparatorA11yContract } from "./separator.a11y.js";
+import { Separator } from "./separator.js";

package/dist/components/sidebar/index.d.ts

@@ -0,0 +1,2 @@
+import { SidebarButtonProps, SidebarCollapsible, SidebarPartProps, SidebarProps, SidebarSide, SidebarTooltipSide, SidebarVariant } from "./sidebar.types.js";
+import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarProvider, SidebarRail, SidebarTrigger } from "./sidebar.js";

package/dist/components/sidebar/sidebar.d.ts

@@ -1,7 +1,22 @@
-import { SidebarProps } from "./sidebar.types.js";
+import { SidebarButtonProps, SidebarPartProps, SidebarProps } from "./sidebar.types.js";
 
 //#region src/components/sidebar/sidebar.d.ts
 declare function Sidebar(props: SidebarProps): JSX.Element;
+declare function SidebarProvider(props: SidebarPartProps): JSX.Element;
+declare function SidebarInset(props: SidebarPartProps): JSX.Element;
+declare function SidebarContent(props: SidebarPartProps): JSX.Element;
+declare function SidebarHeader(props: SidebarPartProps): JSX.Element;
+declare function SidebarFooter(props: SidebarPartProps): JSX.Element;
+declare function SidebarGroup(props: SidebarPartProps): JSX.Element;
+declare function SidebarGroupLabel(props: SidebarPartProps): JSX.Element;
+declare function SidebarGroupContent(props: SidebarPartProps): JSX.Element;
+declare function SidebarMenu(props: SidebarPartProps): JSX.Element;
+declare function SidebarMenuItem(props: SidebarPartProps): JSX.Element;
+declare function SidebarMenuButton(props: SidebarButtonProps): JSX.Element;
+declare function SidebarMenuAction(props: SidebarButtonProps): JSX.Element;
+declare function SidebarMenuBadge(props: SidebarPartProps): JSX.Element;
+declare function SidebarRail(props: SidebarPartProps): JSX.Element;
+declare function SidebarTrigger(props: SidebarButtonProps): JSX.Element;
 //#endregion
-export { Sidebar };
+export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarProvider, SidebarRail, SidebarTrigger };
 //# sourceMappingURL=sidebar.d.ts.map

package/dist/components/sidebar/sidebar.js

@@ -1,242 +1,132 @@
 import { classes } from "../_internal/classes.js";
 import { mergeProps } from "../_internal/merge-props.js";
-import { isJsxElement, toChildArray } from "../_internal/jsx.js";
-import { ShellPanelWatcher, ShellResponsiveWatcher, isShellPanelChild, renderKeyedShellChildren, renderKeyedShellPanelChildren } from "../shell/shell-responsive.js";
-import { NavBrand } from "../navbar/navbar.js";
-import { SidebarContext, SidebarResponsiveContext } from "./sidebar.context.js";
-import { SidebarPanel } from "./sidebar-panel.js";
-import { SidebarToggle } from "./sidebar-toggle.js";
-import { isSidebarCollapsed, resolveSidebarCollapsible } from "./sidebar.shared.js";
-import { Fragment, jsx, jsxs } from "@askrjs/askr/jsx-runtime";
-import { state } from "@askrjs/askr";
+import { Block } from "../block/block.js";
+import { jsx } from "@askrjs/askr/jsx-runtime";
+import { Slot } from "@askrjs/askr/foundations";
 //#region src/components/sidebar/sidebar.tsx
-function isSidebarToggleChild(child) {
-	return isJsxElement(child) && child.type === SidebarToggle;
-}
-function splitSidebarChildren(children) {
-	const explicitPanelItems = [];
-	const drawerSourceItems = [];
-	let drawerItems;
-	let brand;
-	let hasBrand = false;
-	let hasToggle = false;
-	let toggle;
-	for (const child of children) {
-		if (isShellPanelChild(child, SidebarPanel)) {
-			explicitPanelItems.push(child);
-			continue;
-		}
-		if (!hasToggle && isSidebarToggleChild(child)) {
-			hasToggle = true;
-			toggle = child?.props;
-			continue;
-		}
-		drawerSourceItems.push(child);
-		if (!hasBrand && isJsxElement(child) && child.type === NavBrand) {
-			brand = child;
-			hasBrand = true;
-			drawerItems ??= drawerSourceItems.slice(0, drawerSourceItems.length - 1);
-			continue;
-		}
-		drawerItems?.push(child);
-	}
+function sidebarTooltipProps(tooltip, tooltipSide) {
 	return {
-		brand: hasBrand ? brand : void 0,
-		drawerItems: drawerItems ?? drawerSourceItems,
-		drawerSourceItems,
-		explicitPanelItems,
-		toggle
+		"data-tooltip": tooltip,
+		"data-tooltip-side": tooltip ? tooltipSide : void 0
 	};
 }
-function renderSidebarMenuContents(label, icon, iconPlacement) {
-	const renderedIcon = /* @__PURE__ */ jsx("span", {
-		class: "sidebar-toggle-icon",
-		"data-slot": "sidebar-toggle-icon",
-		"aria-hidden": "true",
-		children: icon ?? /* @__PURE__ */ jsxs("span", {
-			class: "sidebar-toggle-glyph sidebar-toggle-glyph--menu",
-			children: [
-				/* @__PURE__ */ jsx("span", {}),
-				/* @__PURE__ */ jsx("span", {}),
-				/* @__PURE__ */ jsx("span", {})
-			]
-		})
+function sidebarPart(props, slot, element = "div") {
+	const { as, asChild, children, class: className, ...rest } = props;
+	const Element = as ?? element;
+	const finalProps = mergeProps(rest, {
+		class: className,
+		"data-slot": slot
+	});
+	if (asChild) return /* @__PURE__ */ jsx(Slot, {
+		asChild: true,
+		...finalProps,
+		children
 	});
-	const renderedLabel = /* @__PURE__ */ jsx("span", {
-		class: "sidebar-toggle-label",
-		"data-slot": "sidebar-toggle-label",
-		children: label
+	return /* @__PURE__ */ jsx(Element, {
+		...finalProps,
+		children
 	});
-	if (iconPlacement === "end") return /* @__PURE__ */ jsxs(Fragment, { children: [renderedLabel, renderedIcon] });
-	return /* @__PURE__ */ jsxs(Fragment, { children: [renderedIcon, renderedLabel] });
-}
-function renderSidebarRailContents(label, collapsed, toggle) {
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
-		class: "sidebar-rail-toggle-icon",
-		"data-slot": "sidebar-rail-toggle-icon",
-		"aria-hidden": "true",
-		children: (collapsed ? toggle?.collapsedIcon : toggle?.expandedIcon) ?? /* @__PURE__ */ jsx("span", { class: classes("sidebar-toggle-glyph", "sidebar-toggle-glyph--rail", collapsed ? "is-collapsed" : "is-expanded") })
-	}), /* @__PURE__ */ jsx("span", {
-		class: "sidebar-rail-toggle-label",
-		"data-slot": "sidebar-rail-toggle-label",
-		children: label
-	})] });
 }
 function Sidebar(props) {
-	const { children, collapsed: controlledCollapsed, breakpoint, collapseIcon, collapseIconPlacement = "start", collapseLabel, collapsible, defaultCollapsed = false, id, "aria-label": ariaLabel, onCollapsedChange, class: className, ref, ...rest } = props;
-	const effectiveCollapseLabel = collapseLabel ?? (typeof ariaLabel === "string" ? ariaLabel : void 0) ?? "Menu";
-	const sidebarChildren = splitSidebarChildren(toChildArray(children));
-	const isResponsive = breakpoint !== void 0;
-	const responsiveCollapsedState = state(isResponsive ? isSidebarCollapsed(breakpoint) : false);
-	const drawerOpenState = state(false);
-	const panelId = typeof id === "string" ? `${id}-panel` : void 0;
-	const collapseBehavior = resolveSidebarCollapsible(collapsible);
-	const isRailCollapsible = collapseBehavior === "icon";
-	const railCollapsedState = state(defaultCollapsed);
-	const responsiveCollapsed = responsiveCollapsedState();
-	const drawerOpen = drawerOpenState();
-	const internalRailCollapsed = railCollapsedState();
-	const isMobile = isResponsive ? responsiveCollapsed : false;
-	const isDrawerOpen = isResponsive && isMobile && drawerOpen;
-	const isRailCollapsed = isRailCollapsible ? controlledCollapsed ?? internalRailCollapsed ?? false : false;
-	const closeDrawer = () => drawerOpenState.set(false);
-	const closeDrawerOnNavActivation = (event) => {
-		const target = event.target;
-		if (!(target instanceof Element)) return;
-		if (target.closest("a[data-slot=\"nav-link\"], a[data-slot=\"nav-item\"], a.navbar-item")) closeDrawer();
-	};
-	const toggleDrawer = () => {
-		drawerOpenState.set(!drawerOpenState());
-	};
-	const setRailCollapsed = (nextCollapsed) => {
-		if (!isRailCollapsible) return;
-		if (controlledCollapsed === void 0) railCollapsedState.set(nextCollapsed);
-		onCollapsedChange?.(nextCollapsed);
-	};
-	const toggleRail = () => {
-		if (!isRailCollapsible) return;
-		setRailCollapsed(!isRailCollapsed);
-	};
-	const desktopChildren = renderKeyedShellChildren(sidebarChildren.drawerSourceItems, "sidebar-desktop");
-	const drawerChildren = renderKeyedShellChildren(sidebarChildren.drawerItems, "sidebar-drawer");
-	const contextValue = {
-		active: () => isResponsive,
-		collapseLabel: () => effectiveCollapseLabel,
-		closePanel: closeDrawer,
-		iconCollapsed: () => isRailCollapsed,
-		isRailCollapsible: () => isRailCollapsible,
-		orientation: () => "vertical",
-		panelId: () => panelId,
-		panelOpen: () => isDrawerOpen,
-		togglePanel: toggleDrawer,
-		toggleRail
-	};
-	const panelContext = {
-		active: isResponsive,
-		collapseLabel: effectiveCollapseLabel,
-		onClose: closeDrawer,
-		open: isDrawerOpen,
-		panelId
-	};
-	const panels = sidebarChildren.explicitPanelItems.length > 0 ? renderKeyedShellPanelChildren(sidebarChildren.explicitPanelItems, "sidebar-panel", panelContext) : isResponsive ? /* @__PURE__ */ jsx(SidebarPanel, {
-		active: isResponsive,
-		brand: sidebarChildren.brand,
-		collapseLabel: effectiveCollapseLabel,
-		onClose: closeDrawer,
-		onClick: closeDrawerOnNavActivation,
-		open: isDrawerOpen,
-		panelId,
-		children: drawerChildren
-	}) : null;
+	const { children, collapsible = "offcanvas", side = "left", variant = "sidebar", width = "sidebar", shrink = false, ...rest } = props;
+	return /* @__PURE__ */ jsx(Block, {
+		as: "aside",
+		width,
+		shrink,
+		minHeight: "screen",
+		padding: "md",
+		gap: "lg",
+		borderRight: true,
+		...rest,
+		"data-collapsible": collapsible,
+		"data-side": side,
+		"data-slot": "sidebar",
+		"data-variant": variant,
+		children
+	});
+}
+function SidebarProvider(props) {
+	return sidebarPart(props, "sidebar-provider");
+}
+function SidebarInset(props) {
+	return sidebarPart(props, "sidebar-inset", "main");
+}
+function SidebarContent(props) {
+	return sidebarPart(props, "sidebar-content");
+}
+function SidebarHeader(props) {
+	return sidebarPart(props, "sidebar-header");
+}
+function SidebarFooter(props) {
+	return sidebarPart(props, "sidebar-footer");
+}
+function SidebarGroup(props) {
+	return sidebarPart(props, "sidebar-group");
+}
+function SidebarGroupLabel(props) {
+	return sidebarPart(props, "sidebar-group-label");
+}
+function SidebarGroupContent(props) {
+	return sidebarPart(props, "sidebar-group-content");
+}
+function SidebarMenu(props) {
+	return sidebarPart(props, "sidebar-menu", "ul");
+}
+function SidebarMenuItem(props) {
+	return sidebarPart(props, "sidebar-menu-item", "li");
+}
+function SidebarMenuButton(props) {
+	const { active, asChild, children, class: className, size, tooltip, tooltipSide, type = "button", variant, ...rest } = props;
 	const finalProps = mergeProps(rest, {
-		ref,
-		"aria-label": ariaLabel,
-		class: classes("sidebar", className),
-		"data-collapse-below": breakpoint,
-		"data-collapsible": collapseBehavior === "none" ? void 0 : collapseBehavior,
-		"data-icon-collapsed": isRailCollapsible ? isRailCollapsed ? "true" : "false" : void 0,
-		"data-mobile-open": isResponsive ? drawerOpen ? "true" : "false" : void 0,
-		"data-orientation": "vertical",
-		"data-responsive-collapsed": isMobile ? "true" : "false",
-		"data-slot": "sidebar"
+		class: classes(className),
+		"data-active": active ? "true" : void 0,
+		"data-size": size && size !== "default" ? size : void 0,
+		"data-slot": "sidebar-menu-button",
+		...sidebarTooltipProps(tooltip, tooltipSide),
+		"data-variant": variant && variant !== "default" ? variant : void 0
+	});
+	if (asChild) return /* @__PURE__ */ jsx(Slot, {
+		asChild: true,
+		...finalProps,
+		children
 	});
-	return /* @__PURE__ */ jsx(SidebarContext.Scope, {
-		value: { orientation: () => "vertical" },
-		children: /* @__PURE__ */ jsx(SidebarResponsiveContext.Scope, {
-			value: contextValue,
-			children: /* @__PURE__ */ jsxs("nav", {
-				...finalProps,
-				children: [
-					isResponsive ? /* @__PURE__ */ jsx("div", {
-						class: "sidebar-mobile",
-						"data-slot": "sidebar-mobile",
-						children: /* @__PURE__ */ jsx("button", {
-							"aria-controls": panelId,
-							"aria-expanded": isDrawerOpen ? "true" : "false",
-							"aria-label": effectiveCollapseLabel,
-							class: "sidebar-toggle",
-							"data-slot": "sidebar-toggle",
-							"data-state": isDrawerOpen ? "open" : "closed",
-							"data-variant": "mobile",
-							type: "button",
-							onClick: toggleDrawer,
-							children: renderSidebarMenuContents(effectiveCollapseLabel, collapseIcon, collapseIconPlacement)
-						})
-					}) : null,
-					/* @__PURE__ */ jsxs("div", {
-						class: "sidebar-shell",
-						"data-orientation": "vertical",
-						"data-slot": "sidebar-shell",
-						children: [isRailCollapsible && !isMobile ? /* @__PURE__ */ jsx("div", {
-							class: "sidebar-rail",
-							"data-slot": "sidebar-rail",
-							"data-state": isRailCollapsed ? "collapsed" : "expanded",
-							children: /* @__PURE__ */ jsx("button", {
-								"aria-expanded": isRailCollapsed ? "false" : "true",
-								"aria-label": isRailCollapsed ? `Expand ${effectiveCollapseLabel}` : `Collapse ${effectiveCollapseLabel}`,
-								class: "sidebar-rail-toggle",
-								"data-slot": "sidebar-rail-toggle",
-								"data-state": isRailCollapsed ? "collapsed" : "expanded",
-								type: "button",
-								onClick: toggleRail,
-								children: renderSidebarRailContents(effectiveCollapseLabel, isRailCollapsed, sidebarChildren.toggle)
-							})
-						}) : null, desktopChildren]
-					}),
-					panels,
-					isResponsive && isDrawerOpen ? /* @__PURE__ */ jsx("button", {
-						"aria-label": `Close ${effectiveCollapseLabel}`,
-						class: "sidebar-backdrop",
-						"data-slot": "sidebar-backdrop",
-						"data-state": "open",
-						tabIndex: -1,
-						type: "button",
-						onClick: closeDrawer
-					}) : null,
-					isResponsive ? /* @__PURE__ */ jsx(ShellResponsiveWatcher, {
-						breakpoint,
-						isCollapsed: isSidebarCollapsed,
-						onResize: (nextCollapsed) => {
-							responsiveCollapsedState.set(nextCollapsed);
-						},
-						onExpand: () => {
-							drawerOpenState.set(false);
-						}
-					}) : null,
-					/* @__PURE__ */ jsx(ShellPanelWatcher, {
-						contentId: panelId,
-						open: isDrawerOpen,
-						panelSlot: "sidebar-panel",
-						onClose: () => {
-							closeDrawer();
-						}
-					})
-				]
-			})
-		})
+	return /* @__PURE__ */ jsx("button", {
+		type,
+		...finalProps,
+		children
+	});
+}
+function SidebarMenuAction(props) {
+	const { children, class: className, tooltip, tooltipSide, type = "button", ...rest } = props;
+	return /* @__PURE__ */ jsx("button", {
+		type,
+		...mergeProps(rest, {
+			class: classes(className),
+			"data-slot": "sidebar-menu-action",
+			...sidebarTooltipProps(tooltip, tooltipSide)
+		}),
+		children
+	});
+}
+function SidebarMenuBadge(props) {
+	return sidebarPart(props, "sidebar-menu-badge", "span");
+}
+function SidebarRail(props) {
+	return sidebarPart(props, "sidebar-rail", "button");
+}
+function SidebarTrigger(props) {
+	const { children, class: className, tooltip, tooltipSide, type = "button", ...rest } = props;
+	return /* @__PURE__ */ jsx("button", {
+		type,
+		...mergeProps(rest, {
+			class: classes("btn btn-ghost btn-icon", className),
+			"data-slot": "sidebar-trigger",
+			...sidebarTooltipProps(tooltip, tooltipSide)
+		}),
+		children
 	});
 }
 //#endregion
-export { Sidebar };
+export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarProvider, SidebarRail, SidebarTrigger };
 
 //# sourceMappingURL=sidebar.js.map

package/dist/components/sidebar/sidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar.js","names":[],"sources":["../../../src/components/sidebar/sidebar.tsx"],"sourcesContent":["import { state } from \"@askrjs/askr\";\nimport { classes } from \"../_internal/classes\";\nimport { isJsxElement, toChildArray } from \"../_internal/jsx\";\nimport { mergeProps } from \"../_internal/merge-props\";\nimport { NavBrand } from \"../navbar/navbar\";\nimport {\n  isShellPanelChild,\n  renderKeyedShellChildren,\n  renderKeyedShellPanelChildren,\n  ShellPanelWatcher,\n  ShellResponsiveWatcher,\n} from \"../shell/shell-responsive\";\nimport { SidebarContext, SidebarResponsiveContext } from \"./sidebar.context\";\nimport { SidebarPanel } from \"./sidebar-panel\";\nimport { SidebarToggle } from \"./sidebar-toggle\";\nimport { isSidebarCollapsed, resolveSidebarCollapsible } from \"./sidebar.shared\";\nimport type { SidebarProps } from \"./sidebar.types\";\nimport type { CollapseIconPlacement } from \"../shell/shell-nav.types\";\n\ntype SidebarChildren = {\n  brand?: unknown;\n  drawerItems: unknown[];\n  drawerSourceItems: unknown[];\n  explicitPanelItems: unknown[];\n  toggle?: SidebarToggleConfig;\n};\n\ntype SidebarToggleConfig = {\n  collapsedIcon?: unknown;\n  expandedIcon?: unknown;\n};\n\nfunction isSidebarToggleChild(child: unknown): boolean {\n  return isJsxElement(child) && child.type === SidebarToggle;\n}\n\nfunction splitSidebarChildren(children: unknown[]): SidebarChildren {\n  const explicitPanelItems: unknown[] = [];\n  const drawerSourceItems: unknown[] = [];\n  let drawerItems: unknown[] | undefined;\n  let brand: unknown;\n  let hasBrand = false;\n  let hasToggle = false;\n  let toggle: SidebarToggleConfig | undefined;\n\n  for (const child of children) {\n    if (isShellPanelChild(child, SidebarPanel)) {\n      explicitPanelItems.push(child);\n      continue;\n    }\n\n    if (!hasToggle && isSidebarToggleChild(child)) {\n      hasToggle = true;\n      toggle = (child as { props?: SidebarToggleConfig } | undefined)?.props;\n      continue;\n    }\n\n    drawerSourceItems.push(child);\n\n    if (!hasBrand && isJsxElement(child) && child.type === NavBrand) {\n      brand = child;\n      hasBrand = true;\n      drawerItems ??= drawerSourceItems.slice(0, drawerSourceItems.length - 1);\n      continue;\n    }\n\n    drawerItems?.push(child);\n  }\n\n  return {\n    brand: hasBrand ? brand : undefined,\n    drawerItems: drawerItems ?? drawerSourceItems,\n    drawerSourceItems,\n    explicitPanelItems,\n    toggle,\n  };\n}\n\nfunction renderSidebarMenuContents(\n  label: string,\n  icon: unknown,\n  iconPlacement: CollapseIconPlacement,\n): JSX.Element {\n  const renderedIcon = (\n    <span class=\"sidebar-toggle-icon\" data-slot=\"sidebar-toggle-icon\" aria-hidden=\"true\">\n      {icon ?? (\n        <span class=\"sidebar-toggle-glyph sidebar-toggle-glyph--menu\">\n          <span />\n          <span />\n          <span />\n        </span>\n      )}\n    </span>\n  );\n  const renderedLabel = (\n    <span class=\"sidebar-toggle-label\" data-slot=\"sidebar-toggle-label\">\n      {label}\n    </span>\n  );\n\n  if (iconPlacement === \"end\") {\n    return (\n      <>\n        {renderedLabel}\n        {renderedIcon}\n      </>\n    );\n  }\n\n  return (\n    <>\n      {renderedIcon}\n      {renderedLabel}\n    </>\n  );\n}\n\nfunction renderSidebarRailContents(\n  label: string,\n  collapsed: boolean,\n  toggle: SidebarToggleConfig | undefined,\n): JSX.Element {\n  const icon = collapsed ? toggle?.collapsedIcon : toggle?.expandedIcon;\n\n  return (\n    <>\n      <span\n        class=\"sidebar-rail-toggle-icon\"\n        data-slot=\"sidebar-rail-toggle-icon\"\n        aria-hidden=\"true\"\n      >\n        {icon ?? (\n          <span\n            class={classes(\n              \"sidebar-toggle-glyph\",\n              \"sidebar-toggle-glyph--rail\",\n              collapsed ? \"is-collapsed\" : \"is-expanded\",\n            )}\n          />\n        )}\n      </span>\n      <span class=\"sidebar-rail-toggle-label\" data-slot=\"sidebar-rail-toggle-label\">\n        {label}\n      </span>\n    </>\n  );\n}\n\nexport function Sidebar(props: SidebarProps): JSX.Element {\n  const {\n    children,\n    collapsed: controlledCollapsed,\n    breakpoint,\n    collapseIcon,\n    collapseIconPlacement = \"start\",\n    collapseLabel,\n    collapsible,\n    defaultCollapsed = false,\n    id,\n    \"aria-label\": ariaLabel,\n    onCollapsedChange,\n    class: className,\n    ref,\n    ...rest\n  } = props;\n  const effectiveCollapseLabel =\n    collapseLabel ?? (typeof ariaLabel === \"string\" ? ariaLabel : undefined) ?? \"Menu\";\n  const childItems = toChildArray(children);\n  const sidebarChildren = splitSidebarChildren(childItems);\n  const isResponsive = breakpoint !== undefined;\n  const responsiveCollapsedState = state(isResponsive ? isSidebarCollapsed(breakpoint) : false);\n  const drawerOpenState = state(false);\n  const panelId = typeof id === \"string\" ? `${id}-panel` : undefined;\n  const collapseBehavior = resolveSidebarCollapsible(collapsible);\n  const isRailCollapsible = collapseBehavior === \"icon\";\n  const railCollapsedState = state(defaultCollapsed);\n  const responsiveCollapsed = responsiveCollapsedState();\n  const drawerOpen = drawerOpenState();\n  const internalRailCollapsed = railCollapsedState();\n  const isMobile = isResponsive ? responsiveCollapsed : false;\n  const isDrawerOpen = isResponsive && isMobile && drawerOpen;\n  const isRailCollapsed = isRailCollapsible\n    ? (controlledCollapsed ?? internalRailCollapsed ?? false)\n    : false;\n  const closeDrawer = () => drawerOpenState.set(false);\n  const closeDrawerOnNavActivation = (event: MouseEvent) => {\n    const target = event.target;\n\n    if (!(target instanceof Element)) {\n      return;\n    }\n\n    if (target.closest('a[data-slot=\"nav-link\"], a[data-slot=\"nav-item\"], a.navbar-item')) {\n      closeDrawer();\n    }\n  };\n  const toggleDrawer = () => {\n    drawerOpenState.set(!drawerOpenState());\n  };\n  const setRailCollapsed = (nextCollapsed: boolean) => {\n    if (!isRailCollapsible) {\n      return;\n    }\n\n    if (controlledCollapsed === undefined) {\n      railCollapsedState.set(nextCollapsed);\n    }\n\n    onCollapsedChange?.(nextCollapsed);\n  };\n  const toggleRail = () => {\n    if (!isRailCollapsible) {\n      return;\n    }\n\n    setRailCollapsed(!isRailCollapsed);\n  };\n  const desktopChildren = renderKeyedShellChildren(\n    sidebarChildren.drawerSourceItems,\n    \"sidebar-desktop\",\n  );\n  const drawerChildren = renderKeyedShellChildren(sidebarChildren.drawerItems, \"sidebar-drawer\");\n\n  const contextValue = {\n    active: () => isResponsive,\n    collapseLabel: () => effectiveCollapseLabel,\n    closePanel: closeDrawer,\n    iconCollapsed: () => isRailCollapsed,\n    isRailCollapsible: () => isRailCollapsible,\n    orientation: () => \"vertical\" as const,\n    panelId: () => panelId,\n    panelOpen: () => isDrawerOpen,\n    togglePanel: toggleDrawer,\n    toggleRail,\n  };\n  const panelContext = {\n    active: isResponsive,\n    collapseLabel: effectiveCollapseLabel,\n    onClose: closeDrawer,\n    open: isDrawerOpen,\n    panelId,\n  };\n  const panels =\n    sidebarChildren.explicitPanelItems.length > 0 ? (\n      renderKeyedShellPanelChildren(\n        sidebarChildren.explicitPanelItems,\n        \"sidebar-panel\",\n        panelContext,\n      )\n    ) : isResponsive ? (\n      <SidebarPanel\n        active={isResponsive}\n        brand={sidebarChildren.brand}\n        collapseLabel={effectiveCollapseLabel}\n        onClose={closeDrawer}\n        onClick={closeDrawerOnNavActivation}\n        open={isDrawerOpen}\n        panelId={panelId}\n      >\n        {drawerChildren}\n      </SidebarPanel>\n    ) : null;\n\n  const finalProps = mergeProps(rest, {\n    ref,\n    \"aria-label\": ariaLabel,\n    class: classes(\"sidebar\", className),\n    \"data-collapse-below\": breakpoint,\n    \"data-collapsible\": collapseBehavior === \"none\" ? undefined : collapseBehavior,\n    \"data-icon-collapsed\": isRailCollapsible ? (isRailCollapsed ? \"true\" : \"false\") : undefined,\n    \"data-mobile-open\": isResponsive ? (drawerOpen ? \"true\" : \"false\") : undefined,\n    \"data-orientation\": \"vertical\",\n    \"data-responsive-collapsed\": isMobile ? \"true\" : \"false\",\n    \"data-slot\": \"sidebar\",\n  });\n\n  return (\n    <SidebarContext.Scope value={{ orientation: () => \"vertical\" as const }}>\n      <SidebarResponsiveContext.Scope value={contextValue}>\n        <nav {...finalProps}>\n          {isResponsive ? (\n            <div class=\"sidebar-mobile\" data-slot=\"sidebar-mobile\">\n              <button\n                aria-controls={panelId}\n                aria-expanded={isDrawerOpen ? \"true\" : \"false\"}\n                aria-label={effectiveCollapseLabel}\n                class=\"sidebar-toggle\"\n                data-slot=\"sidebar-toggle\"\n                data-state={isDrawerOpen ? \"open\" : \"closed\"}\n                data-variant=\"mobile\"\n                type=\"button\"\n                onClick={toggleDrawer}\n              >\n                {renderSidebarMenuContents(\n                  effectiveCollapseLabel,\n                  collapseIcon,\n                  collapseIconPlacement,\n                )}\n              </button>\n            </div>\n          ) : null}\n\n          <div class=\"sidebar-shell\" data-orientation=\"vertical\" data-slot=\"sidebar-shell\">\n            {isRailCollapsible && !isMobile ? (\n              <div\n                class=\"sidebar-rail\"\n                data-slot=\"sidebar-rail\"\n                data-state={isRailCollapsed ? \"collapsed\" : \"expanded\"}\n              >\n                <button\n                  aria-expanded={isRailCollapsed ? \"false\" : \"true\"}\n                  aria-label={\n                    isRailCollapsed\n                      ? `Expand ${effectiveCollapseLabel}`\n                      : `Collapse ${effectiveCollapseLabel}`\n                  }\n                  class=\"sidebar-rail-toggle\"\n                  data-slot=\"sidebar-rail-toggle\"\n                  data-state={isRailCollapsed ? \"collapsed\" : \"expanded\"}\n                  type=\"button\"\n                  onClick={toggleRail}\n                >\n                  {renderSidebarRailContents(\n                    effectiveCollapseLabel,\n                    isRailCollapsed,\n                    sidebarChildren.toggle,\n                  )}\n                </button>\n              </div>\n            ) : null}\n            {desktopChildren}\n          </div>\n\n          {panels}\n\n          {isResponsive && isDrawerOpen ? (\n            <button\n              aria-label={`Close ${effectiveCollapseLabel}`}\n              class=\"sidebar-backdrop\"\n              data-slot=\"sidebar-backdrop\"\n              data-state=\"open\"\n              tabIndex={-1}\n              type=\"button\"\n              onClick={closeDrawer}\n            />\n          ) : null}\n\n          {isResponsive ? (\n            <ShellResponsiveWatcher\n              breakpoint={breakpoint}\n              isCollapsed={isSidebarCollapsed}\n              onResize={(nextCollapsed) => {\n                responsiveCollapsedState.set(nextCollapsed);\n              }}\n              onExpand={() => {\n                drawerOpenState.set(false);\n              }}\n            />\n          ) : null}\n\n          <ShellPanelWatcher\n            contentId={panelId}\n            open={isDrawerOpen}\n            panelSlot=\"sidebar-panel\"\n            onClose={() => {\n              closeDrawer();\n            }}\n          />\n        </nav>\n      </SidebarResponsiveContext.Scope>\n    </SidebarContext.Scope>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"sidebar.js","names":[],"sources":["../../../src/components/sidebar/sidebar.tsx"],"sourcesContent":["import { Slot } from \"@askrjs/askr/foundations\";\nimport { Block } from \"../block\";\nimport { classes } from \"../_internal/classes\";\nimport { mergeProps } from \"../_internal/merge-props\";\nimport type {\n  SidebarButtonProps,\n  SidebarPartProps,\n  SidebarProps,\n  SidebarTooltipSide,\n} from \"./sidebar.types\";\n\nfunction sidebarTooltipProps(\n  tooltip: string | undefined,\n  tooltipSide: SidebarTooltipSide | undefined,\n): Record<string, string | undefined> {\n  return {\n    \"data-tooltip\": tooltip,\n    \"data-tooltip-side\": tooltip ? tooltipSide : undefined,\n  };\n}\n\nfunction sidebarPart(\n  props: SidebarPartProps,\n  slot: string,\n  element: keyof JSX.IntrinsicElements = \"div\",\n): JSX.Element {\n  const { as, asChild, children, class: className, ...rest } = props;\n  const Element = (as ?? element) as \"div\";\n  const finalProps = mergeProps(rest, {\n    class: className,\n    \"data-slot\": slot,\n  });\n\n  if (asChild) {\n    return <Slot asChild {...finalProps} children={children as JSX.Element} />;\n  }\n\n  return <Element {...finalProps}>{children}</Element>;\n}\n\nexport function Sidebar(props: SidebarProps): JSX.Element {\n  const {\n    children,\n    collapsible = \"offcanvas\",\n    side = \"left\",\n    variant = \"sidebar\",\n    width = \"sidebar\",\n    shrink = false,\n    ...rest\n  } = props;\n\n  return (\n    <Block\n      as=\"aside\"\n      width={width}\n      shrink={shrink}\n      minHeight=\"screen\"\n      padding=\"md\"\n      gap=\"lg\"\n      borderRight={true}\n      {...rest}\n      data-collapsible={collapsible}\n      data-side={side}\n      data-slot=\"sidebar\"\n      data-variant={variant}\n    >\n      {children}\n    </Block>\n  );\n}\n\nexport function SidebarProvider(props: SidebarPartProps): JSX.Element {\n  return sidebarPart(props, \"sidebar-provider\");\n}\n\nexport function SidebarInset(props: SidebarPartProps): JSX.Element {\n  return sidebarPart(props, \"sidebar-inset\", \"main\");\n}\n\nexport function SidebarContent(props: SidebarPartProps): JSX.Element {\n  return sidebarPart(props, \"sidebar-content\");\n}\n\nexport function SidebarHeader(props: SidebarPartProps): JSX.Element {\n  return sidebarPart(props, \"sidebar-header\");\n}\n\nexport function SidebarFooter(props: SidebarPartProps): JSX.Element {\n  return sidebarPart(props, \"sidebar-footer\");\n}\n\nexport function SidebarGroup(props: SidebarPartProps): JSX.Element {\n  return sidebarPart(props, \"sidebar-group\");\n}\n\nexport function SidebarGroupLabel(props: SidebarPartProps): JSX.Element {\n  return sidebarPart(props, \"sidebar-group-label\");\n}\n\nexport function SidebarGroupContent(props: SidebarPartProps): JSX.Element {\n  return sidebarPart(props, \"sidebar-group-content\");\n}\n\nexport function SidebarMenu(props: SidebarPartProps): JSX.Element {\n  return sidebarPart(props, \"sidebar-menu\", \"ul\");\n}\n\nexport function SidebarMenuItem(props: SidebarPartProps): JSX.Element {\n  return sidebarPart(props, \"sidebar-menu-item\", \"li\");\n}\n\nexport function SidebarMenuButton(props: SidebarButtonProps): JSX.Element {\n  const {\n    active,\n    asChild,\n    children,\n    class: className,\n    size,\n    tooltip,\n    tooltipSide,\n    type = \"button\",\n    variant,\n    ...rest\n  } = props;\n  const finalProps = mergeProps(rest, {\n    class: classes(className),\n    \"data-active\": active ? \"true\" : undefined,\n    \"data-size\": size && size !== \"default\" ? size : undefined,\n    \"data-slot\": \"sidebar-menu-button\",\n    ...sidebarTooltipProps(tooltip, tooltipSide),\n    \"data-variant\": variant && variant !== \"default\" ? variant : undefined,\n  });\n\n  if (asChild) {\n    return <Slot asChild {...finalProps} children={children as JSX.Element} />;\n  }\n\n  return (\n    <button type={type} {...finalProps}>\n      {children}\n    </button>\n  );\n}\n\nexport function SidebarMenuAction(props: SidebarButtonProps): JSX.Element {\n  const { children, class: className, tooltip, tooltipSide, type = \"button\", ...rest } = props;\n  return (\n    <button\n      type={type}\n      {...mergeProps(rest, {\n        class: classes(className),\n        \"data-slot\": \"sidebar-menu-action\",\n        ...sidebarTooltipProps(tooltip, tooltipSide),\n      })}\n    >\n      {children}\n    </button>\n  );\n}\n\nexport function SidebarMenuBadge(props: SidebarPartProps): JSX.Element {\n  return sidebarPart(props, \"sidebar-menu-badge\", \"span\");\n}\n\nexport function SidebarRail(props: SidebarPartProps): JSX.Element {\n  return sidebarPart(props, \"sidebar-rail\", \"button\");\n}\n\nexport function SidebarTrigger(props: SidebarButtonProps): JSX.Element {\n  const { children, class: className, tooltip, tooltipSide, type = \"button\", ...rest } = props;\n  return (\n    <button\n      type={type}\n      {...mergeProps(rest, {\n        class: classes(\"btn btn-ghost btn-icon\", className),\n        \"data-slot\": \"sidebar-trigger\",\n        ...sidebarTooltipProps(tooltip, tooltipSide),\n      })}\n    >\n      {children}\n    </button>\n  );\n}\n"],"mappings":"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"}

package/dist/components/sidebar/sidebar.types.d.ts

@@ -1,30 +1,28 @@
-import { CollapseBreakpoint, CollapseIconPlacement, Collapsible } from "../shell/shell-nav.types.js";
-
+import { BlockElementProps } from "../block/block.types.js";
 //#region src/components/sidebar/sidebar.types.d.ts
-type SidebarProps = Omit<JSX.IntrinsicElements["nav"], "children"> & {
-  children?: unknown;
-  breakpoint?: CollapseBreakpoint;
-  collapseIcon?: unknown;
-  collapseIconPlacement?: CollapseIconPlacement;
-  collapsed?: boolean;
-  collapseLabel?: string;
-  collapsible?: Collapsible;
-  defaultCollapsed?: boolean;
-  onCollapsedChange?: (collapsed: boolean) => void;
+type SidebarCollapsible = "offcanvas" | "icon" | "none";
+type SidebarSide = "left" | "right";
+type SidebarTooltipSide = "top" | "bottom" | "left" | "right";
+type SidebarVariant = "sidebar" | "floating" | "inset";
+type SidebarProps = Omit<BlockElementProps<"aside">, "as" | "width" | "shrink"> & {
+  collapsible?: SidebarCollapsible;
+  side?: SidebarSide;
+  variant?: SidebarVariant;
+  width?: BlockElementProps<"aside">["width"];
+  shrink?: BlockElementProps<"aside">["shrink"];
 };
-type SidebarToggleProps = Omit<JSX.IntrinsicElements["button"], "children" | "onClick" | "type"> & {
-  collapsedIcon: unknown;
-  expandedIcon: unknown;
+type SidebarPartProps = JSX.IntrinsicElements["div"] & {
+  as?: keyof JSX.IntrinsicElements;
+  asChild?: boolean;
 };
-type SidebarPanelProps = Omit<JSX.IntrinsicElements["div"], "children"> & {
+type SidebarButtonProps = JSX.IntrinsicElements["button"] & {
   active?: boolean;
-  brand?: unknown;
-  children?: unknown;
-  collapseLabel?: string;
-  onClose?: () => void;
-  open?: boolean;
-  panelId?: string;
+  asChild?: boolean;
+  size?: "default" | "sm" | "lg";
+  tooltip?: string;
+  tooltipSide?: SidebarTooltipSide;
+  variant?: "default" | "outline";
 };
 //#endregion
-export { SidebarPanelProps, SidebarProps, SidebarToggleProps };
+export { SidebarButtonProps, SidebarCollapsible, SidebarPartProps, SidebarProps, SidebarSide, SidebarTooltipSide, SidebarVariant };
 //# sourceMappingURL=sidebar.types.d.ts.map

package/dist/components/skeleton/index.d.ts

@@ -1,3 +1,2 @@
 import { SkeletonAsChildProps, SkeletonOwnProps, SkeletonProps } from "./skeleton.types.js";
-import { Skeleton } from "./skeleton.js";
-import { SKELETON_A11Y_CONTRACT, SkeletonA11yContract } from "./skeleton.a11y.js";
+import { Skeleton } from "./skeleton.js";

package/dist/components/skeleton/skeleton.js

@@ -1,11 +1,22 @@
+import { classes } from "../_internal/classes.js";
 import { mergeProps } from "../_internal/merge-props.js";
+import { styleDeclarationsToClass } from "../_internal/style.js";
+import { mergeLayoutStyles } from "../_internal/block-layout.js";
 import { jsx } from "@askrjs/askr/jsx-runtime";
 import { Slot } from "@askrjs/askr/foundations";
 //#region src/components/skeleton/skeleton.tsx
+function resolveSkeletonDimension(value) {
+	if (typeof value === "number") return `${value}px`;
+	return value;
+}
 function Skeleton(props) {
-	const { asChild, children, ref, ...rest } = props;
+	const { asChild, children, class: classProp, className, height, ref, style, width, ...rest } = props;
 	const finalProps = mergeProps(rest, {
 		ref,
+		class: classes(classProp, className, styleDeclarationsToClass(mergeLayoutStyles({
+			blockSize: resolveSkeletonDimension(height),
+			inlineSize: resolveSkeletonDimension(width)
+		}, style))),
 		"data-slot": "skeleton",
 		"data-skeleton": "true",
 		"aria-hidden": "true"

package/dist/components/skeleton/skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton.js","names":[],"sources":["../../../src/components/skeleton/skeleton.tsx"],"sourcesContent":["import { Slot } from \"@askrjs/askr/foundations\";\nimport { mergeProps } from \"../_internal/merge-props\";\nimport type { SkeletonAsChildProps, SkeletonProps } from \"./skeleton.types\";\n\nexport function Skeleton(props: SkeletonProps): JSX.Element;\nexport function Skeleton(props: SkeletonAsChildProps): JSX.Element;\nexport function Skeleton(props: SkeletonProps | SkeletonAsChildProps) {\n  const { asChild, children, ref, ...rest } = props;\n  const finalProps = mergeProps(rest, {\n    ref,\n    \"data-slot\": \"skeleton\",\n    \"data-skeleton\": \"true\",\n    \"aria-hidden\": \"true\",\n  });\n\n  if (asChild) {\n    return <Slot asChild {...finalProps} children={children} />;\n  }\n\n  return <div {...finalProps}>{children}</div>;\n}\n"],"mappings":";;;;AAMA,SAAgB,SAAS,OAA6C;CACpE,MAAM,EAAE,SAAS,UAAU,KAAK,GAAG,SAAS;CAC5C,MAAM,aAAa,WAAW,MAAM;EAClC;EACA,aAAa;EACb,iBAAiB;EACjB,eAAe;CACjB,CAAC;CAED,IAAI,SACF,OAAO,oBAAC,MAAD;EAAM,SAAA;EAAQ,GAAI;EAAsB;CAAW,CAAA;CAG5D,OAAO,oBAAC,OAAD;EAAK,GAAI;EAAa;CAAc,CAAA;AAC7C"}
+{"version":3,"file":"skeleton.js","names":[],"sources":["../../../src/components/skeleton/skeleton.tsx"],"sourcesContent":["import { Slot } from \"@askrjs/askr/foundations\";\nimport { mergeLayoutStyles } from \"../_internal/block-layout\";\nimport { classes } from \"../_internal/classes\";\nimport { mergeProps } from \"../_internal/merge-props\";\nimport { styleDeclarationsToClass } from \"../_internal/style\";\nimport type { SkeletonAsChildProps, SkeletonProps } from \"./skeleton.types\";\n\nfunction resolveSkeletonDimension(value: string | number | undefined): string | undefined {\n  if (typeof value === \"number\") return `${value}px`;\n  return value;\n}\n\nexport function Skeleton(props: SkeletonProps): JSX.Element;\nexport function Skeleton(props: SkeletonAsChildProps): JSX.Element;\nexport function Skeleton(props: SkeletonProps | SkeletonAsChildProps) {\n  const {\n    asChild,\n    children,\n    class: classProp,\n    className,\n    height,\n    ref,\n    style,\n    width,\n    ...rest\n  } = props as (SkeletonProps | SkeletonAsChildProps) & {\n    class?: unknown;\n    className?: unknown;\n    style?: unknown;\n  };\n  const layoutClass = styleDeclarationsToClass(\n    mergeLayoutStyles(\n      {\n        blockSize: resolveSkeletonDimension(height),\n        inlineSize: resolveSkeletonDimension(width),\n      },\n      style,\n    ),\n  );\n  const finalProps = mergeProps(rest, {\n    ref,\n    class: classes(classProp, className, layoutClass),\n    \"data-slot\": \"skeleton\",\n    \"data-skeleton\": \"true\",\n    \"aria-hidden\": \"true\",\n  });\n\n  if (asChild) {\n    return <Slot asChild {...finalProps} children={children} />;\n  }\n\n  return <div {...finalProps}>{children}</div>;\n}\n"],"mappings":";;;;;;;AAOA,SAAS,yBAAyB,OAAwD;CACxF,IAAI,OAAO,UAAU,UAAU,OAAO,GAAG,MAAM;CAC/C,OAAO;AACT;AAIA,SAAgB,SAAS,OAA6C;CACpE,MAAM,EACJ,SACA,UACA,OAAO,WACP,WACA,QACA,KACA,OACA,OACA,GAAG,SACD;CAcJ,MAAM,aAAa,WAAW,MAAM;EAClC;EACA,OAAO,QAAQ,WAAW,WAXR,yBAClB,kBACE;GACE,WAAW,yBAAyB,MAAM;GAC1C,YAAY,yBAAyB,KAAK;EAC5C,GACA,KACF,CAI+C,CAAC;EAChD,aAAa;EACb,iBAAiB;EACjB,eAAe;CACjB,CAAC;CAED,IAAI,SACF,OAAO,oBAAC,MAAD;EAAM,SAAA;EAAQ,GAAI;EAAsB;CAAW,CAAA;CAG5D,OAAO,oBAAC,OAAD;EAAK,GAAI;EAAa;CAAc,CAAA;AAC7C"}

package/dist/components/skeleton/skeleton.types.d.ts

@@ -4,6 +4,8 @@ import { Ref } from "@askrjs/askr/foundations/utilities";
 //#region src/components/skeleton/skeleton.types.d.ts
 type SkeletonOwnProps = {
   children?: unknown;
+  height?: string | number;
+  width?: string | number;
 };
 type SkeletonProps = Omit<JSX.IntrinsicElements["div"], "children" | "ref"> & SkeletonOwnProps & {
   asChild?: false;

package/dist/components/spinner/index.d.ts

@@ -1,2 +1,2 @@
-import { SpinnerOwnProps, SpinnerProps } from "./spinner.types.js";
+import { SpinnerOwnProps, SpinnerProps, SpinnerSize } from "./spinner.types.js";
 import { Spinner } from "./spinner.js";

package/dist/components/spinner/spinner.js

@@ -1,13 +1,16 @@
-import { ProgressCircle } from "@askrjs/ui";
+import { ProgressCircle, ProgressCircleIndicator } from "@askrjs/ui";
 import { jsx } from "@askrjs/askr/jsx-runtime";
 //#region src/components/spinner/spinner.tsx
 function Spinner(props) {
-	const { label, "aria-label": ariaLabel, ...rest } = props;
+	const { label, size, "aria-label": ariaLabel, ...rest } = props;
 	return /* @__PURE__ */ jsx(ProgressCircle, {
 		...rest,
 		"aria-label": ariaLabel ?? label ?? "Loading",
+		"data-spinner": "true",
+		"data-size": size && size !== "md" ? size : void 0,
 		value: null,
-		getValueLabel: () => label ?? "Loading"
+		getValueLabel: () => label ?? "Loading",
+		children: /* @__PURE__ */ jsx(ProgressCircleIndicator, {})
 	});
 }
 //#endregion

package/dist/components/spinner/spinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"spinner.js","names":[],"sources":["../../../src/components/spinner/spinner.tsx"],"sourcesContent":["import { ProgressCircle } from \"@askrjs/ui\";\nimport type { SpinnerProps } from \"./spinner.types\";\n\nexport function Spinner(props: SpinnerProps): JSX.Element {\n  const {\n    label,\n    \"aria-label\": ariaLabel,\n    ...rest\n  } = props as SpinnerProps & {\n    \"aria-label\"?: string;\n  };\n\n  return (\n    <ProgressCircle\n      {...rest}\n      aria-label={ariaLabel ?? label ?? \"Loading\"}\n      value={null}\n      getValueLabel={() => label ?? \"Loading\"}\n    />\n  );\n}\n"],"mappings":";;;AAGA,SAAgB,QAAQ,OAAkC;CACxD,MAAM,EACJ,OACA,cAAc,WACd,GAAG,SACD;CAIJ,OACE,oBAAC,gBAAD;EACE,GAAI;EACJ,cAAY,aAAa,SAAS;EAClC,OAAO;EACP,qBAAqB,SAAS;CAC/B,CAAA;AAEL"}
+{"version":3,"file":"spinner.js","names":[],"sources":["../../../src/components/spinner/spinner.tsx"],"sourcesContent":["import { ProgressCircle, ProgressCircleIndicator } from \"@askrjs/ui\";\nimport type { SpinnerProps } from \"./spinner.types\";\n\nexport function Spinner(props: SpinnerProps): JSX.Element {\n  const {\n    label,\n    size,\n    \"aria-label\": ariaLabel,\n    ...rest\n  } = props as SpinnerProps & {\n    \"aria-label\"?: string;\n  };\n\n  return (\n    <ProgressCircle\n      {...rest}\n      aria-label={ariaLabel ?? label ?? \"Loading\"}\n      data-spinner=\"true\"\n      data-size={size && size !== \"md\" ? size : undefined}\n      value={null}\n      getValueLabel={() => label ?? \"Loading\"}\n    >\n      <ProgressCircleIndicator />\n    </ProgressCircle>\n  );\n}\n"],"mappings":";;;AAGA,SAAgB,QAAQ,OAAkC;CACxD,MAAM,EACJ,OACA,MACA,cAAc,WACd,GAAG,SACD;CAIJ,OACE,oBAAC,gBAAD;EACE,GAAI;EACJ,cAAY,aAAa,SAAS;EAClC,gBAAa;EACb,aAAW,QAAQ,SAAS,OAAO,OAAO,KAAA;EAC1C,OAAO;EACP,qBAAqB,SAAS;YAE9B,oBAAC,yBAAD,CAA0B,CAAA;CACZ,CAAA;AAEpB"}