@askrjs/themes 0.0.8 → 0.0.10

package/README.md

@@ -1,11 +1,10 @@
 # @askrjs/themes
 
-CSS tokens, shell chrome, and styled composition helpers for Askr apps.
+CSS tokens and a shadcn-style styled component catalog for Askr apps.
 
 `@askrjs/themes` is the visual companion to `@askrjs/ui` and
-`@askrjs/charts`. It owns the default theme, shared layout wrappers, and
-theme-aware component styling while behavior and data contracts stay in the
-other packages.
+`@askrjs/charts`. It owns the default theme and styled component catalog while
+behavior stays in `@askrjs/ui` and chart components stay in `@askrjs/charts`.
 
 ## Install
 
@@ -33,11 +32,11 @@ Then set `data-theme` to `tabby`, `ginger`, `tuxedo`, `calico`, or `torty`.
 For picker/toggle composition, import `CAT_THEME_OPTIONS` and `CAT_THEME_NAMES`
 from `@askrjs/themes/theme`.
 
-Then use the theme helpers and curated component surfaces:
+Then use the theme helpers and component catalog:
 
 ```tsx
 import { ThemeProvider, ThemeToggle } from "@askrjs/themes/theme";
-import { Button, ButtonGroup, Field, InputGroup } from "@askrjs/themes/controls";
+import { Button, ButtonGroup, Field, Input, InputGroup, Label } from "@askrjs/themes/components";
 
 export function AppShell() {
   return (
@@ -48,8 +47,9 @@ export function AppShell() {
       </ButtonGroup>
 
       <Field>
+        <Label for="workspace">Workspace</Label>
         <InputGroup>
-          <input />
+          <Input id="workspace" name="workspace" />
         </InputGroup>
       </Field>
     </ThemeProvider>
@@ -59,13 +59,14 @@ export function AppShell() {
 
 ## What To Import
 
+- `@askrjs/themes/components` for the styled component catalog.
+- `@askrjs/themes/<component>` for package subpaths such as
+  `@askrjs/themes/button`, `@askrjs/themes/card`, and
+  `@askrjs/themes/dialog`.
 - `@askrjs/themes/theme` for `ThemeProvider`, `ThemePicker`, `ThemeToggle`,
-  and `useTheme`
-- `@askrjs/themes/controls` for theme-styled controls such as `Button`,
-  `ButtonGroup`, `Close`, `Field`, and `InputGroup`
-- `@askrjs/themes/layouts`, `@askrjs/themes/shells`, `@askrjs/themes/navs`,
-  `@askrjs/themes/surfaces`, `@askrjs/themes/feedback`, and
-  `@askrjs/themes/overlays` for the curated visual composition surfaces
+  and `useTheme`.
+- `@askrjs/charts` for charts; chart components are intentionally not exported
+  from `@askrjs/themes`.
 
 ## Theme Contract
 
@@ -74,5 +75,10 @@ export function AppShell() {
 - Keep selectors low specificity so downstream apps can customize them cleanly.
 - Use [THEMING.md](./THEMING.md) and [docs/architecture.md](./docs/architecture.md)
   for the full contract and package boundaries.
+- Use [docs/component-anatomy.md](./docs/component-anatomy.md) for stable slot
+  hooks and [docs/customization.md](./docs/customization.md) for the KISS
+  customization path.
+- Use [docs/recipes.md](./docs/recipes.md) for copyable login, admin shell,
+  settings form, table, dropdown, and detail-page patterns.
 
 - Use `visual-check.html` for manual QA across light and dark modes.

package/THEMING.md

@@ -1,8 +1,8 @@
 # Theming
 
-`@askrjs/themes` is the shell, token, and component styling companion to
-`@askrjs/charts`. It owns the app frame and shared visual language, while chart
-rendering stays in the chart package.
+`@askrjs/themes` is the token, structural preset, and component styling
+companion to `@askrjs/charts`. It owns the shared visual language while
+product-specific app layouts stay in userland recipes.
 
 See [docs/architecture.md](./docs/architecture.md) for the package boundary
 between `@askrjs/askr`, `@askrjs/ui`, and `@askrjs/themes`.
@@ -106,14 +106,14 @@ Package boundaries:
 
 - `@askrjs/askr` owns what exists and when.
 - `@askrjs/ui` owns behavior, state, focus, and ARIA coordination.
-- `@askrjs/themes` owns visual-only components, layout composition, and
-  default styling.
+- `@askrjs/themes` owns visual-only components, Block-first structural
+  presets, and default styling.
 
 Use the curated theme entrypoints such as `@askrjs/themes/controls`,
-`@askrjs/themes/surfaces`, `@askrjs/themes/navs`, and `@askrjs/themes/shells`
-for styled components such as Button, ButtonGroup, Close, InputGroup, Alert,
-Badge, Box, Block, ListGroup, Pagination, Skeleton, Separator/Divider, Shell,
-ShellNav, ShellMain, and EmptyState.
+`@askrjs/themes/core`, `@askrjs/themes/surfaces`, and `@askrjs/themes/navs`
+for styled components such as Button, ButtonGroup, Close, InputGroup, Block,
+Container, Header, Main, Sidebar, Navbar, NavBrand, NavDropdown, Alert, Badge,
+Tabs, Tab, Pills, Pill, Skeleton, Separator, and EmptyState.
 
 Theme state helpers also live there: `ThemeProvider`, `ThemePicker`,
 `ThemeToggle`, and `useTheme`. `ThemeToggle` intentionally has no built-in
@@ -123,23 +123,27 @@ be styled consistently across themes. If you use icon children, the direct child
 icon is sized from `var(--ak-theme-toggle-icon-size, var(--ak-icon-size, 1em))`,
 so apps can override `--ak-theme-toggle-icon-size` to fit custom icon dimensions.
 The common wrapper components also emit familiar alias classes such as
-`alert`, `btn-group`, `btn-close`, `input-group`, `list-group`, and
-`pagination` so app-level CSS can stay close to the Bootstrap mental model
-without giving up the canonical `data-slot` contract.
+`alert`, `btn-group`, `btn-close`, `input-group`, `tabs`, and `pills` so
+app-level CSS can stay close to familiar HTML authoring without
+giving up the canonical `data-slot` contract.
 
 Responsive rules:
 
 - Build mobile first. Base selectors must work on narrow screens; larger layouts are additive via `min-width` media queries.
-- The default theme uses semantic breakpoints `sm`, `md`, `lg`, and `xl` for `data-collapse-below`.
+- `Block` is the only layout engine. Responsive layout props use `base`, `sm`, `md`, `lg`, and `xl`.
+- The default theme uses semantic breakpoints `sm`, `md`, `lg`, and `xl` for layout variables.
 - Keep breakpoint values centralized in theme tokens so the default theme and generated themes stay aligned.
-- Responsive behavior must target only public hooks such as `data-collapse-below`, `data-columns`, `data-min-item-width`, `data-gap`, `data-size`, and `data-variant`.
+- Responsive behavior must target only public hooks and Block-owned CSS variables.
+- Navbar collapse is a semantic preset: put `NavBrand` first, use `collapseAt`
+  for the single responsive pattern, and use `NavDropdown` for simple
+  single-level menus.
 - Prefer token overrides first. Reach for component CSS overrides only when tokens are insufficient.
 - Keep selectors low-specificity so a custom theme can override a rule with one equally specific selector. `:where(...)` is preferred for the default theme baseline.
-- Broad layout slots like `main`, `sidebar`, and `navbar` must always be anchored to a public layout root such as `shell`.
-- Named layout hooks such as `data-size`, `data-max-width`, `data-padding`, and `data-gap` are part of the public theme contract and should resolve through theme tokens rather than hard-coded values.
+- Broad layout slots like `main`, `sidebar`, and `navbar` are semantic Block presets, not independent layout engines.
+- Block-owned layout variables are part of the public theme contract and should resolve through theme tokens rather than hard-coded values.
 - Icons are part of the public theme contract. `@askrjs/ui` owns the canonical icon hooks, and official icon wrappers should implement that contract by emitting `data-slot="icon"`, `data-icon`, semantic `data-size`, and `data-decorative` so themes can style them uniformly across icon sets.
 - Icon size and stroke defaults should resolve through the shared icon tokens: `--ak-icon-size-sm|md|lg|xl` and `--ak-icon-stroke-width-sm|md|lg|xl`.
-- Product SaaS scaffolds should compose broad visual primitives first. Keep first-class pattern exports general; put narrow dashboard, auth, or table-page recipes in docs/examples unless they prove reusable across apps. Recipe shells such as product-style or marketing-style page wrappers belong in userland composition, not the shipped theme package.
+- Product SaaS scaffolds should compose broad visual primitives first. Keep first-class pattern exports general; put narrow dashboard, auth, or table-page recipes in docs/examples unless they prove reusable across apps. Product-style or marketing-style page layouts belong in userland composition, not the shipped theme package.
 - Comfortable density is tokenized through `--ak-density-control-height-*` and `--ak-density-control-padding-x-*`; apps should tune those before overriding component CSS.
 - Future class aliases must be added selectively with contract tests; do not mirror every internal slot as a class by default.
 
@@ -152,7 +156,7 @@ This document defines the default theme token contract for `askr-themes`.
 The purpose of this token set is to provide a stable, reusable semantic theming layer for:
 
 - `askr-ui` headless components
-- application shell layouts
+- application layouts
 - docs layouts
 - admin dashboards
 - forms
@@ -326,6 +330,7 @@ These are required for the default theme and any future theme reintroduced to th
 Required:
 
 - `--ak-font-family-body`
+- `--ak-font-family-display`
 - `--ak-font-family-mono`
 - `--ak-font-size-xs`
 - `--ak-font-size-sm`
@@ -662,6 +667,7 @@ These are recommended implementation defaults for component authors:
 :root {
   /* typography */
   --ak-font-family-body: system-ui, sans-serif;
+  --ak-font-family-display: system-ui, sans-serif;
   --ak-font-family-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
 
   --ak-font-size-xs: 0.75rem;

package/dist/components/_internal/block-layout.d.ts

@@ -0,0 +1,49 @@
+//#region src/components/_internal/block-layout.d.ts
+type LayoutBreakpoint = "base" | "sm" | "md" | "lg" | "xl";
+type ResponsiveValue<T> = T | Partial<Record<LayoutBreakpoint, T>>;
+type BlockSpace = "0" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "page";
+type BlockMargin = BlockSpace | "auto";
+type BlockSize = "auto" | "full" | "screen" | "content" | "sidebar" | "page" | "sm" | "md" | "lg" | "xl";
+type BlockDirection = "row" | "column" | "row-reverse" | "column-reverse";
+type BlockRowFrom = Exclude<LayoutBreakpoint, "base">;
+type BlockAlign = "start" | "end" | "center" | "stretch" | "baseline";
+type BlockJustify = "start" | "end" | "center" | "between";
+type BlockBackground = "surface" | "muted" | "selected" | "canvas" | "raised" | "overlay" | "transparent";
+type BlockRadius = true | "sm" | "md" | "lg" | "xl" | "round";
+type BlockShadow = true | "sm" | "md" | "lg";
+type BlockZIndex = "header" | "sticky" | "fixed" | "dropdown" | "modal" | "popover" | "toast" | "tooltip";
+type BlockLayoutProps = {
+  padding?: ResponsiveValue<BlockSpace>;
+  paddingX?: ResponsiveValue<BlockSpace>;
+  paddingY?: ResponsiveValue<BlockSpace>;
+  margin?: ResponsiveValue<BlockMargin>;
+  marginX?: ResponsiveValue<BlockMargin>;
+  marginY?: ResponsiveValue<BlockMargin>;
+  width?: ResponsiveValue<BlockSize>;
+  minWidth?: ResponsiveValue<BlockSize>;
+  maxWidth?: ResponsiveValue<BlockSize>;
+  height?: ResponsiveValue<BlockSize>;
+  minHeight?: ResponsiveValue<BlockSize>;
+  maxHeight?: ResponsiveValue<BlockSize>;
+  rowFrom?: BlockRowFrom;
+  direction?: ResponsiveValue<BlockDirection>;
+  align?: ResponsiveValue<BlockAlign>;
+  justify?: ResponsiveValue<BlockJustify>;
+  gap?: ResponsiveValue<BlockSpace>;
+  grow?: ResponsiveValue<boolean | number>;
+  shrink?: ResponsiveValue<boolean | number>;
+  center?: ResponsiveValue<boolean>;
+  sticky?: boolean;
+  top?: ResponsiveValue<BlockSpace>;
+  zIndex?: ResponsiveValue<BlockZIndex>;
+  background?: ResponsiveValue<BlockBackground>;
+  border?: ResponsiveValue<boolean>;
+  borderBottom?: ResponsiveValue<boolean>;
+  borderRight?: ResponsiveValue<boolean>;
+  radius?: ResponsiveValue<BlockRadius>;
+  shadow?: ResponsiveValue<BlockShadow>;
+  hide?: ResponsiveValue<boolean>;
+};
+//#endregion
+export { BlockAlign, BlockBackground, BlockDirection, BlockJustify, BlockLayoutProps, BlockMargin, BlockRadius, BlockRowFrom, BlockShadow, BlockSize, BlockSpace, BlockZIndex, ResponsiveValue };
+//# sourceMappingURL=block-layout.d.ts.map

package/dist/components/_internal/block-layout.js

@@ -0,0 +1,210 @@
+import { serializeCssDeclarations } from "./style.js";
+//#region src/components/_internal/block-layout.ts
+const BREAKPOINTS = [
+	"base",
+	"sm",
+	"md",
+	"lg",
+	"xl"
+];
+const SPACE_TOKEN_MAP = {
+	"0": "0",
+	xs: "var(--ak-space-xs)",
+	sm: "var(--ak-space-sm)",
+	md: "var(--ak-space-md)",
+	lg: "var(--ak-space-lg)",
+	xl: "var(--ak-space-xl)",
+	"2xl": "var(--ak-space-2xl)",
+	"3xl": "var(--ak-space-3xl)",
+	page: "var(--ak-layout-page-gutter)"
+};
+const SIZE_TOKEN_MAP = {
+	auto: "auto",
+	full: "100%",
+	screen: "100dvh",
+	content: "min(60vh, 36rem)",
+	sidebar: "var(--ak-layout-sidebar-width)",
+	page: "var(--ak-layout-content-max-width)",
+	sm: "var(--ak-container-1)",
+	md: "var(--ak-container-2)",
+	lg: "var(--ak-container-3)",
+	xl: "var(--ak-container-4)"
+};
+const BACKGROUND_TOKEN_MAP = {
+	canvas: "var(--ak-color-bg)",
+	surface: "var(--ak-color-surface)",
+	muted: "var(--ak-color-surface-muted)",
+	raised: "var(--ak-color-surface-raised)",
+	overlay: "var(--ak-color-surface-overlay)",
+	selected: "var(--ak-color-selected)",
+	transparent: "transparent"
+};
+const RADIUS_TOKEN_MAP = {
+	sm: "var(--ak-radius-sm)",
+	md: "var(--ak-radius-md)",
+	lg: "var(--ak-radius-lg)",
+	xl: "var(--ak-radius-xl)",
+	round: "var(--ak-radius-round)"
+};
+const SHADOW_TOKEN_MAP = {
+	sm: "var(--ak-shadow-sm)",
+	md: "var(--ak-shadow-md)",
+	lg: "var(--ak-shadow-lg)"
+};
+const Z_INDEX_TOKEN_MAP = {
+	header: "var(--ak-z-sticky)",
+	sticky: "var(--ak-z-sticky)",
+	fixed: "var(--ak-z-fixed)",
+	dropdown: "var(--ak-z-dropdown)",
+	modal: "var(--ak-z-modal)",
+	popover: "var(--ak-z-popover)",
+	toast: "var(--ak-z-toast)",
+	tooltip: "var(--ak-z-tooltip)"
+};
+const BORDER_VALUE = "1px solid var(--ak-color-border-subtle)";
+const BLOCK_LAYOUT_KEYS = new Set([
+	"padding",
+	"paddingX",
+	"paddingY",
+	"margin",
+	"marginX",
+	"marginY",
+	"width",
+	"minWidth",
+	"maxWidth",
+	"height",
+	"minHeight",
+	"maxHeight",
+	"rowFrom",
+	"direction",
+	"align",
+	"justify",
+	"gap",
+	"grow",
+	"shrink",
+	"center",
+	"sticky",
+	"top",
+	"zIndex",
+	"background",
+	"border",
+	"borderBottom",
+	"borderRight",
+	"radius",
+	"shadow",
+	"hide"
+]);
+function isResponsiveValue(value) {
+	return Boolean(value && typeof value === "object" && !Array.isArray(value) && BREAKPOINTS.some((breakpoint) => breakpoint in value));
+}
+function normalizeResponsiveValue(value) {
+	if (value === void 0) return void 0;
+	if (isResponsiveValue(value)) return value;
+	return { base: value };
+}
+function resolveTokenValue(value, tokens) {
+	if (typeof value === "number") return value;
+	const trimmed = value.trim();
+	return tokens[trimmed] ?? trimmed;
+}
+function resolveSpaceValue(value) {
+	return resolveTokenValue(value, SPACE_TOKEN_MAP);
+}
+function resolveSizeValue(value) {
+	return String(resolveTokenValue(value, SIZE_TOKEN_MAP));
+}
+function resolveAlignValue(value) {
+	if (value === "start") return "flex-start";
+	if (value === "end") return "flex-end";
+	return value;
+}
+function resolveJustifyValue(value) {
+	if (value === "start") return "flex-start";
+	if (value === "end") return "flex-end";
+	if (value === "between") return "space-between";
+	return value;
+}
+function resolveFlexFlag(value) {
+	if (value === true) return 1;
+	if (value === false) return 0;
+	return value;
+}
+function resolveBorderValue(value) {
+	if (value === false) return "0";
+	return BORDER_VALUE;
+}
+function resolveRadiusValue(value) {
+	if (value === true) return RADIUS_TOKEN_MAP.md;
+	return String(resolveTokenValue(value, RADIUS_TOKEN_MAP));
+}
+function resolveShadowValue(value) {
+	if (value === true) return SHADOW_TOKEN_MAP.sm;
+	return String(resolveTokenValue(value, SHADOW_TOKEN_MAP));
+}
+function setResponsiveVar(styles, property, value, resolve) {
+	const normalized = normalizeResponsiveValue(value);
+	if (!normalized) return;
+	for (const breakpoint of BREAKPOINTS) {
+		const breakpointValue = normalized[breakpoint];
+		if (breakpointValue === void 0) continue;
+		const resolved = resolve(breakpointValue);
+		if (resolved === void 0 || resolved === "") continue;
+		styles[`--ak-${property}-${breakpoint}`] = resolved;
+	}
+}
+function splitBlockLayoutProps(props) {
+	const blockProps = {};
+	const rest = {};
+	for (const [key, value] of Object.entries(props)) if (BLOCK_LAYOUT_KEYS.has(key)) blockProps[key] = value;
+	else rest[key] = value;
+	return {
+		blockProps,
+		rest
+	};
+}
+function applyBlockLayoutStyles(styles, props) {
+	setResponsiveVar(styles, "p", props.padding, resolveSpaceValue);
+	setResponsiveVar(styles, "px", props.paddingX, resolveSpaceValue);
+	setResponsiveVar(styles, "py", props.paddingY, resolveSpaceValue);
+	setResponsiveVar(styles, "m", props.margin, resolveSpaceValue);
+	setResponsiveVar(styles, "mx", props.marginX, resolveSpaceValue);
+	setResponsiveVar(styles, "my", props.marginY, resolveSpaceValue);
+	setResponsiveVar(styles, "width", props.width, resolveSizeValue);
+	setResponsiveVar(styles, "min-width", props.minWidth, resolveSizeValue);
+	setResponsiveVar(styles, "max-width", props.maxWidth, resolveSizeValue);
+	setResponsiveVar(styles, "height", props.height, resolveSizeValue);
+	setResponsiveVar(styles, "min-height", props.minHeight, resolveSizeValue);
+	setResponsiveVar(styles, "max-height", props.maxHeight, resolveSizeValue);
+	if (props.rowFrom !== void 0) styles[`--ak-flex-direction-${props.rowFrom}`] = "row";
+	setResponsiveVar(styles, "flex-direction", props.direction, (value) => value);
+	setResponsiveVar(styles, "align-items", props.align, resolveAlignValue);
+	setResponsiveVar(styles, "justify-content", props.justify, resolveJustifyValue);
+	setResponsiveVar(styles, "gap", props.gap, resolveSpaceValue);
+	setResponsiveVar(styles, "flex-grow", props.grow, resolveFlexFlag);
+	setResponsiveVar(styles, "flex-shrink", props.shrink, resolveFlexFlag);
+	if (props.center !== void 0) {
+		setResponsiveVar(styles, "align-items", props.center, (value) => value ? "center" : void 0);
+		setResponsiveVar(styles, "justify-content", props.center, (value) => value ? "center" : void 0);
+	}
+	if (props.sticky) styles["--ak-position-base"] = "sticky";
+	setResponsiveVar(styles, "top", props.top, resolveSpaceValue);
+	setResponsiveVar(styles, "z-index", props.zIndex, (value) => String(resolveTokenValue(value, Z_INDEX_TOKEN_MAP)));
+	setResponsiveVar(styles, "background", props.background, (value) => String(resolveTokenValue(value, BACKGROUND_TOKEN_MAP)));
+	setResponsiveVar(styles, "border", props.border, resolveBorderValue);
+	setResponsiveVar(styles, "border-bottom", props.borderBottom, resolveBorderValue);
+	setResponsiveVar(styles, "border-right", props.borderRight, resolveBorderValue);
+	setResponsiveVar(styles, "border-radius", props.radius, resolveRadiusValue);
+	setResponsiveVar(styles, "box-shadow", props.shadow, resolveShadowValue);
+	setResponsiveVar(styles, "display", props.hide, (value) => value ? "none" : "flex");
+}
+function mergeLayoutStyles(layout, user) {
+	const merged = { ...layout };
+	if (user !== null && user !== void 0 && typeof user === "object") Object.assign(merged, user);
+	const mergedString = serializeCssDeclarations(merged);
+	if (typeof user === "string" && user.trim()) return mergedString ? `${mergedString};${user.trim()}` : user.trim();
+	return mergedString || void 0;
+}
+//#endregion
+export { applyBlockLayoutStyles, mergeLayoutStyles, splitBlockLayoutProps };
+
+//# sourceMappingURL=block-layout.js.map

package/dist/components/_internal/block-layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"block-layout.js","names":[],"sources":["../../../src/components/_internal/block-layout.ts"],"sourcesContent":["import { serializeCssDeclarations } from \"./style\";\n\nexport type LayoutBreakpoint = \"base\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\nexport type ResponsiveValue<T> = T | Partial<Record<LayoutBreakpoint, T>>;\n\nexport type BlockSpace = \"0\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\" | \"page\";\nexport type BlockMargin = BlockSpace | \"auto\";\nexport type BlockSize =\n  | \"auto\"\n  | \"full\"\n  | \"screen\"\n  | \"content\"\n  | \"sidebar\"\n  | \"page\"\n  | \"sm\"\n  | \"md\"\n  | \"lg\"\n  | \"xl\";\nexport type BlockDirection = \"row\" | \"column\" | \"row-reverse\" | \"column-reverse\";\nexport type BlockRowFrom = Exclude<LayoutBreakpoint, \"base\">;\nexport type BlockAlign = \"start\" | \"end\" | \"center\" | \"stretch\" | \"baseline\";\nexport type BlockJustify = \"start\" | \"end\" | \"center\" | \"between\";\nexport type BlockBackground =\n  | \"surface\"\n  | \"muted\"\n  | \"selected\"\n  | \"canvas\"\n  | \"raised\"\n  | \"overlay\"\n  | \"transparent\";\nexport type BlockRadius = true | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"round\";\nexport type BlockShadow = true | \"sm\" | \"md\" | \"lg\";\nexport type BlockZIndex =\n  | \"header\"\n  | \"sticky\"\n  | \"fixed\"\n  | \"dropdown\"\n  | \"modal\"\n  | \"popover\"\n  | \"toast\"\n  | \"tooltip\";\n\nexport type BlockLayoutProps = {\n  padding?: ResponsiveValue<BlockSpace>;\n  paddingX?: ResponsiveValue<BlockSpace>;\n  paddingY?: ResponsiveValue<BlockSpace>;\n  margin?: ResponsiveValue<BlockMargin>;\n  marginX?: ResponsiveValue<BlockMargin>;\n  marginY?: ResponsiveValue<BlockMargin>;\n  width?: ResponsiveValue<BlockSize>;\n  minWidth?: ResponsiveValue<BlockSize>;\n  maxWidth?: ResponsiveValue<BlockSize>;\n  height?: ResponsiveValue<BlockSize>;\n  minHeight?: ResponsiveValue<BlockSize>;\n  maxHeight?: ResponsiveValue<BlockSize>;\n  rowFrom?: BlockRowFrom;\n  direction?: ResponsiveValue<BlockDirection>;\n  align?: ResponsiveValue<BlockAlign>;\n  justify?: ResponsiveValue<BlockJustify>;\n  gap?: ResponsiveValue<BlockSpace>;\n  grow?: ResponsiveValue<boolean | number>;\n  shrink?: ResponsiveValue<boolean | number>;\n  center?: ResponsiveValue<boolean>;\n  sticky?: boolean;\n  top?: ResponsiveValue<BlockSpace>;\n  zIndex?: ResponsiveValue<BlockZIndex>;\n  background?: ResponsiveValue<BlockBackground>;\n  border?: ResponsiveValue<boolean>;\n  borderBottom?: ResponsiveValue<boolean>;\n  borderRight?: ResponsiveValue<boolean>;\n  radius?: ResponsiveValue<BlockRadius>;\n  shadow?: ResponsiveValue<BlockShadow>;\n  hide?: ResponsiveValue<boolean>;\n};\n\nconst BREAKPOINTS: readonly LayoutBreakpoint[] = [\"base\", \"sm\", \"md\", \"lg\", \"xl\"];\n\nconst SPACE_TOKEN_MAP: Record<string, string> = {\n  \"0\": \"0\",\n  xs: \"var(--ak-space-xs)\",\n  sm: \"var(--ak-space-sm)\",\n  md: \"var(--ak-space-md)\",\n  lg: \"var(--ak-space-lg)\",\n  xl: \"var(--ak-space-xl)\",\n  \"2xl\": \"var(--ak-space-2xl)\",\n  \"3xl\": \"var(--ak-space-3xl)\",\n  page: \"var(--ak-layout-page-gutter)\",\n};\n\nconst SIZE_TOKEN_MAP: Record<string, string> = {\n  auto: \"auto\",\n  full: \"100%\",\n  screen: \"100dvh\",\n  content: \"min(60vh, 36rem)\",\n  sidebar: \"var(--ak-layout-sidebar-width)\",\n  page: \"var(--ak-layout-content-max-width)\",\n  sm: \"var(--ak-container-1)\",\n  md: \"var(--ak-container-2)\",\n  lg: \"var(--ak-container-3)\",\n  xl: \"var(--ak-container-4)\",\n};\n\nconst BACKGROUND_TOKEN_MAP: Record<string, string> = {\n  canvas: \"var(--ak-color-bg)\",\n  surface: \"var(--ak-color-surface)\",\n  muted: \"var(--ak-color-surface-muted)\",\n  raised: \"var(--ak-color-surface-raised)\",\n  overlay: \"var(--ak-color-surface-overlay)\",\n  selected: \"var(--ak-color-selected)\",\n  transparent: \"transparent\",\n};\n\nconst RADIUS_TOKEN_MAP: Record<string, string> = {\n  sm: \"var(--ak-radius-sm)\",\n  md: \"var(--ak-radius-md)\",\n  lg: \"var(--ak-radius-lg)\",\n  xl: \"var(--ak-radius-xl)\",\n  round: \"var(--ak-radius-round)\",\n};\n\nconst SHADOW_TOKEN_MAP: Record<string, string> = {\n  sm: \"var(--ak-shadow-sm)\",\n  md: \"var(--ak-shadow-md)\",\n  lg: \"var(--ak-shadow-lg)\",\n};\n\nconst Z_INDEX_TOKEN_MAP: Record<string, string> = {\n  header: \"var(--ak-z-sticky)\",\n  sticky: \"var(--ak-z-sticky)\",\n  fixed: \"var(--ak-z-fixed)\",\n  dropdown: \"var(--ak-z-dropdown)\",\n  modal: \"var(--ak-z-modal)\",\n  popover: \"var(--ak-z-popover)\",\n  toast: \"var(--ak-z-toast)\",\n  tooltip: \"var(--ak-z-tooltip)\",\n};\n\nconst BORDER_VALUE = \"1px solid var(--ak-color-border-subtle)\";\n\nconst BLOCK_LAYOUT_KEYS = new Set<keyof BlockLayoutProps>([\n  \"padding\",\n  \"paddingX\",\n  \"paddingY\",\n  \"margin\",\n  \"marginX\",\n  \"marginY\",\n  \"width\",\n  \"minWidth\",\n  \"maxWidth\",\n  \"height\",\n  \"minHeight\",\n  \"maxHeight\",\n  \"rowFrom\",\n  \"direction\",\n  \"align\",\n  \"justify\",\n  \"gap\",\n  \"grow\",\n  \"shrink\",\n  \"center\",\n  \"sticky\",\n  \"top\",\n  \"zIndex\",\n  \"background\",\n  \"border\",\n  \"borderBottom\",\n  \"borderRight\",\n  \"radius\",\n  \"shadow\",\n  \"hide\",\n]);\n\nfunction isResponsiveValue<T>(\n  value: ResponsiveValue<T> | undefined,\n): value is Partial<Record<LayoutBreakpoint, T>> {\n  return Boolean(\n    value &&\n    typeof value === \"object\" &&\n    !Array.isArray(value) &&\n    BREAKPOINTS.some((breakpoint) => breakpoint in value),\n  );\n}\n\nfunction normalizeResponsiveValue<T>(\n  value: ResponsiveValue<T> | undefined,\n): Partial<Record<LayoutBreakpoint, T>> | undefined {\n  if (value === undefined) return undefined;\n  if (isResponsiveValue(value)) return value;\n  return { base: value };\n}\n\nfunction resolveTokenValue(\n  value: string | number,\n  tokens: Record<string, string>,\n): string | number {\n  if (typeof value === \"number\") return value;\n  const trimmed = value.trim();\n  return tokens[trimmed] ?? trimmed;\n}\n\nfunction resolveSpaceValue(value: string | number): string | number {\n  return resolveTokenValue(value, SPACE_TOKEN_MAP);\n}\n\nfunction resolveSizeValue(value: string): string {\n  return String(resolveTokenValue(value, SIZE_TOKEN_MAP));\n}\n\nfunction resolveAlignValue(value: BlockAlign): string {\n  if (value === \"start\") return \"flex-start\";\n  if (value === \"end\") return \"flex-end\";\n  return value;\n}\n\nfunction resolveJustifyValue(value: BlockJustify): string {\n  if (value === \"start\") return \"flex-start\";\n  if (value === \"end\") return \"flex-end\";\n  if (value === \"between\") return \"space-between\";\n  return value;\n}\n\nfunction resolveFlexFlag(value: boolean | number): string | number {\n  if (value === true) return 1;\n  if (value === false) return 0;\n  return value;\n}\n\nfunction resolveBorderValue(value: boolean): string | undefined {\n  if (value === false) return \"0\";\n  return BORDER_VALUE;\n}\n\nfunction resolveRadiusValue(value: BlockRadius): string | undefined {\n  if (value === true) return RADIUS_TOKEN_MAP.md;\n  return String(resolveTokenValue(value, RADIUS_TOKEN_MAP));\n}\n\nfunction resolveShadowValue(value: BlockShadow): string | undefined {\n  if (value === true) return SHADOW_TOKEN_MAP.sm;\n  return String(resolveTokenValue(value, SHADOW_TOKEN_MAP));\n}\n\nfunction setResponsiveVar<T>(\n  styles: Record<string, string | number>,\n  property: string,\n  value: ResponsiveValue<T> | undefined,\n  resolve: (value: T) => string | number | undefined,\n) {\n  const normalized = normalizeResponsiveValue(value);\n  if (!normalized) return;\n\n  for (const breakpoint of BREAKPOINTS) {\n    const breakpointValue = normalized[breakpoint];\n    if (breakpointValue === undefined) continue;\n    const resolved = resolve(breakpointValue);\n    if (resolved === undefined || resolved === \"\") continue;\n    styles[`--ak-${property}-${breakpoint}`] = resolved;\n  }\n}\n\nexport function splitBlockLayoutProps<T extends Record<string, unknown>>(\n  props: T,\n): {\n  blockProps: Partial<BlockLayoutProps>;\n  rest: Omit<T, keyof BlockLayoutProps>;\n} {\n  const blockProps: Partial<BlockLayoutProps> = {};\n  const rest: Record<string, unknown> = {};\n\n  for (const [key, value] of Object.entries(props)) {\n    if (BLOCK_LAYOUT_KEYS.has(key as keyof BlockLayoutProps)) {\n      (blockProps as Record<string, unknown>)[key] = value;\n    } else {\n      rest[key] = value;\n    }\n  }\n\n  return { blockProps, rest: rest as Omit<T, keyof BlockLayoutProps> };\n}\n\nexport function applyBlockLayoutStyles(\n  styles: Record<string, string | number>,\n  props: Partial<BlockLayoutProps>,\n) {\n  setResponsiveVar(styles, \"p\", props.padding, resolveSpaceValue);\n  setResponsiveVar(styles, \"px\", props.paddingX, resolveSpaceValue);\n  setResponsiveVar(styles, \"py\", props.paddingY, resolveSpaceValue);\n  setResponsiveVar(styles, \"m\", props.margin, resolveSpaceValue);\n  setResponsiveVar(styles, \"mx\", props.marginX, resolveSpaceValue);\n  setResponsiveVar(styles, \"my\", props.marginY, resolveSpaceValue);\n\n  setResponsiveVar(styles, \"width\", props.width, resolveSizeValue);\n  setResponsiveVar(styles, \"min-width\", props.minWidth, resolveSizeValue);\n  setResponsiveVar(styles, \"max-width\", props.maxWidth, resolveSizeValue);\n  setResponsiveVar(styles, \"height\", props.height, resolveSizeValue);\n  setResponsiveVar(styles, \"min-height\", props.minHeight, resolveSizeValue);\n  setResponsiveVar(styles, \"max-height\", props.maxHeight, resolveSizeValue);\n\n  if (props.rowFrom !== undefined) {\n    styles[`--ak-flex-direction-${props.rowFrom}`] = \"row\";\n  }\n  setResponsiveVar(styles, \"flex-direction\", props.direction, (value) => value);\n  setResponsiveVar(styles, \"align-items\", props.align, resolveAlignValue);\n  setResponsiveVar(styles, \"justify-content\", props.justify, resolveJustifyValue);\n  setResponsiveVar(styles, \"gap\", props.gap, resolveSpaceValue);\n  setResponsiveVar(styles, \"flex-grow\", props.grow, resolveFlexFlag);\n  setResponsiveVar(styles, \"flex-shrink\", props.shrink, resolveFlexFlag);\n\n  if (props.center !== undefined) {\n    setResponsiveVar(styles, \"align-items\", props.center, (value) =>\n      value ? \"center\" : undefined,\n    );\n    setResponsiveVar(styles, \"justify-content\", props.center, (value) =>\n      value ? \"center\" : undefined,\n    );\n  }\n\n  if (props.sticky) {\n    styles[\"--ak-position-base\"] = \"sticky\";\n  }\n  setResponsiveVar(styles, \"top\", props.top, resolveSpaceValue);\n  setResponsiveVar(styles, \"z-index\", props.zIndex, (value) =>\n    String(resolveTokenValue(value, Z_INDEX_TOKEN_MAP)),\n  );\n\n  setResponsiveVar(styles, \"background\", props.background, (value) =>\n    String(resolveTokenValue(value, BACKGROUND_TOKEN_MAP)),\n  );\n  setResponsiveVar(styles, \"border\", props.border, resolveBorderValue);\n  setResponsiveVar(styles, \"border-bottom\", props.borderBottom, resolveBorderValue);\n  setResponsiveVar(styles, \"border-right\", props.borderRight, resolveBorderValue);\n  setResponsiveVar(styles, \"border-radius\", props.radius, resolveRadiusValue);\n  setResponsiveVar(styles, \"box-shadow\", props.shadow, resolveShadowValue);\n  setResponsiveVar(styles, \"display\", props.hide, (value) => (value ? \"none\" : \"flex\"));\n}\n\nexport function mergeLayoutStyles(\n  layout: Record<string, string | number>,\n  user: unknown,\n): string | undefined {\n  const merged: Record<string, unknown> = { ...layout };\n\n  if (user !== null && user !== undefined && typeof user === \"object\") {\n    Object.assign(merged, user as Record<string, unknown>);\n  }\n\n  const mergedString = serializeCssDeclarations(merged);\n\n  if (typeof user === \"string\" && user.trim()) {\n    return mergedString ? `${mergedString};${user.trim()}` : user.trim();\n  }\n\n  return mergedString || undefined;\n}\n"],"mappings":"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"}

package/dist/components/_internal/jsx.js.map

@@ -1 +1 @@
-{"version":3,"file":"jsx.js","names":[],"sources":["../../../src/components/_internal/jsx.ts"],"sourcesContent":["import type { JSXElement } from \"@askrjs/askr/foundations\";\n\nexport function isJsxElement(value: unknown): value is JSXElement {\n  return typeof value === \"object\" && value !== null && \"$$typeof\" in value && \"props\" in value;\n}\n\nexport function hasJsxIntrinsicType(value: unknown, expectedType: string): value is JSXElement {\n  return isJsxElement(value) && value.type === expectedType;\n}\n\nexport function toChildArray(children: unknown): unknown[] {\n  if (Array.isArray(children)) {\n    return children;\n  }\n\n  return children === undefined || children === null ? [] : [children];\n}\n\nexport function mapJsxTree(children: unknown, mapper: (element: JSXElement) => unknown): unknown {\n  if (Array.isArray(children)) {\n    return children.map((child) => mapJsxTree(child, mapper));\n  }\n\n  if (!isJsxElement(children)) {\n    return children;\n  }\n\n  const mapped = mapper(children);\n\n  if (!isJsxElement(mapped)) {\n    return mapped;\n  }\n\n  const currentChildren = mapped.props?.children;\n  const nextChildren = mapJsxTree(currentChildren, mapper);\n\n  if (nextChildren === currentChildren) {\n    return mapped;\n  }\n\n  return {\n    ...mapped,\n    props: {\n      ...mapped.props,\n      children: nextChildren,\n    },\n  };\n}\n\nexport function collectJsxElements(\n  children: unknown,\n  predicate?: (element: JSXElement) => boolean,\n): JSXElement[] {\n  const result: JSXElement[] = [];\n\n  const visit = (value: unknown) => {\n    if (Array.isArray(value)) {\n      value.forEach(visit);\n      return;\n    }\n\n    if (!isJsxElement(value)) {\n      return;\n    }\n\n    if (!predicate || predicate(value)) {\n      result.push(value);\n    }\n\n    visit(value.props?.children);\n  };\n\n  visit(children);\n\n  return result;\n}\n\nfunction serializeArray(value: readonly unknown[]): string {\n  if (value.length === 0) {\n    return \"\";\n  }\n\n  if (value.length === 1) {\n    return serializeForId(value[0]);\n  }\n\n  if (value.length === 2) {\n    return `${serializeForId(value[0])}|${serializeForId(value[1])}`;\n  }\n\n  let result = serializeForId(value[0]);\n\n  for (let index = 1; index < value.length; index += 1) {\n    result += `|${serializeForId(value[index])}`;\n  }\n\n  return result;\n}\n\nfunction serializeSerializableProps(props: Record<string, unknown>): string {\n  const keys: string[] = [];\n\n  for (const key of Object.keys(props)) {\n    if (key === \"children\" || key === \"ref\" || key.startsWith(\"on\")) {\n      continue;\n    }\n\n    const entryValue = props[key];\n\n    if (\n      typeof entryValue === \"string\" ||\n      typeof entryValue === \"number\" ||\n      typeof entryValue === \"boolean\"\n    ) {\n      keys.push(key);\n    }\n  }\n\n  if (keys.length === 0) {\n    return \"\";\n  }\n\n  if (keys.length === 1) {\n    const key = keys[0];\n\n    return `${key}:${String(props[key])}`;\n  }\n\n  if (keys.length === 2) {\n    if (keys[1].localeCompare(keys[0]) < 0) {\n      [keys[0], keys[1]] = [keys[1], keys[0]];\n    }\n\n    return `${keys[0]}:${String(props[keys[0]])},${keys[1]}:${String(props[keys[1]])}`;\n  }\n\n  keys.sort((left, right) => left.localeCompare(right));\n\n  let result = `${keys[0]}:${String(props[keys[0]])}`;\n\n  for (let index = 1; index < keys.length; index += 1) {\n    const key = keys[index];\n    result += `,${key}:${String(props[key])}`;\n  }\n\n  return result;\n}\n\nfunction hasEmptyJsxChildren(children: unknown): boolean {\n  return (\n    children === undefined ||\n    children === null ||\n    typeof children === \"boolean\" ||\n    (Array.isArray(children) && children.length === 0)\n  );\n}\n\nexport function extractTextContent(value: unknown): string {\n  if (Array.isArray(value)) {\n    return value.map((entry) => extractTextContent(entry)).join(\"\");\n  }\n\n  if (\n    value === undefined ||\n    value === null ||\n    typeof value === \"boolean\" ||\n    typeof value === \"function\"\n  ) {\n    return \"\";\n  }\n\n  if (typeof value === \"string\" || typeof value === \"number\") {\n    return String(value);\n  }\n\n  if (isJsxElement(value)) {\n    return extractTextContent(value.props?.children);\n  }\n\n  return \"\";\n}\n\nexport function serializeForId(value: unknown): string {\n  if (Array.isArray(value)) {\n    return serializeArray(value);\n  }\n\n  if (value === undefined || value === null || typeof value === \"boolean\") {\n    return \"\";\n  }\n\n  if (typeof value === \"string\" || typeof value === \"number\") {\n    return String(value);\n  }\n\n  if (isJsxElement(value)) {\n    const typeName =\n      typeof value.type === \"string\"\n        ? value.type\n        : typeof value.type === \"function\"\n          ? value.type.name || \"component\"\n          : \"component\";\n    const props = (value.props ?? {}) as Record<string, unknown>;\n    const propEntries = serializeSerializableProps(props);\n    const children = props.children;\n    const propsPrefix = propEntries === \"\" ? `${typeName}[]` : `${typeName}[${propEntries}]`;\n\n    if (hasEmptyJsxChildren(children)) {\n      return `${propsPrefix}()`;\n    }\n\n    return `${propsPrefix}(${serializeForId(children)})`;\n  }\n\n  return typeof value;\n}\n"],"mappings":";AAEA,SAAgB,aAAa,OAAqC;CAChE,OAAO,OAAO,UAAU,YAAY,UAAU,QAAQ,cAAc,SAAS,WAAW;AAC1F;AAMA,SAAgB,aAAa,UAA8B;CACzD,IAAI,MAAM,QAAQ,QAAQ,GACxB,OAAO;CAGT,OAAO,aAAa,KAAA,KAAa,aAAa,OAAO,CAAC,IAAI,CAAC,QAAQ;AACrE"}
+{"version":3,"file":"jsx.js","names":[],"sources":["../../../src/components/_internal/jsx.ts"],"sourcesContent":["import type { JSXElement } from \"@askrjs/askr/foundations\";\n\nexport function isJsxElement(value: unknown): value is JSXElement {\n  return typeof value === \"object\" && value !== null && \"$$typeof\" in value && \"props\" in value;\n}\n\nexport function hasJsxIntrinsicType(value: unknown, expectedType: string): value is JSXElement {\n  return isJsxElement(value) && value.type === expectedType;\n}\n\nexport function toChildArray(children: unknown): unknown[] {\n  if (Array.isArray(children)) {\n    return children;\n  }\n\n  return children === undefined || children === null ? [] : [children];\n}\n\nexport function mapJsxTree(children: unknown, mapper: (element: JSXElement) => unknown): unknown {\n  if (Array.isArray(children)) {\n    return children.map((child) => mapJsxTree(child, mapper));\n  }\n\n  if (!isJsxElement(children)) {\n    return children;\n  }\n\n  const mapped = mapper(children);\n\n  if (!isJsxElement(mapped)) {\n    return mapped;\n  }\n\n  const currentChildren = mapped.props?.children;\n  const nextChildren = mapJsxTree(currentChildren, mapper);\n\n  if (nextChildren === currentChildren) {\n    return mapped;\n  }\n\n  return {\n    ...mapped,\n    props: {\n      ...mapped.props,\n      children: nextChildren,\n    },\n  };\n}\n\nexport function collectJsxElements(\n  children: unknown,\n  predicate?: (element: JSXElement) => boolean,\n): JSXElement[] {\n  const result: JSXElement[] = [];\n\n  function visit(value: unknown): void {\n    if (Array.isArray(value)) {\n      for (let index = 0; index < value.length; index += 1) {\n        visit(value[index]);\n      }\n      return;\n    }\n\n    if (!isJsxElement(value)) {\n      return;\n    }\n\n    if (!predicate || predicate(value)) {\n      result.push(value);\n    }\n\n    visit(value.props?.children);\n  }\n\n  visit(children);\n\n  return result;\n}\n\nfunction isEventHandlerLikeKey(key: string): boolean {\n  return key.length >= 2 && key.charCodeAt(0) === 111 && key.charCodeAt(1) === 110;\n}\n\nfunction compareKeys(left: string, right: string): number {\n  if (left < right) return -1;\n  if (left > right) return 1;\n  return 0;\n}\n\nfunction serializeArray(value: readonly unknown[]): string {\n  if (value.length === 0) {\n    return \"\";\n  }\n\n  if (value.length === 1) {\n    return serializeForId(value[0]);\n  }\n\n  if (value.length === 2) {\n    return `${serializeForId(value[0])}|${serializeForId(value[1])}`;\n  }\n\n  let result = serializeForId(value[0]);\n\n  for (let index = 1; index < value.length; index += 1) {\n    result += `|${serializeForId(value[index])}`;\n  }\n\n  return result;\n}\n\nfunction serializeSerializableProps(props: Record<string, unknown>): string {\n  const keys: string[] = [];\n\n  for (const key of Object.keys(props)) {\n    if (key === \"children\" || key === \"ref\" || isEventHandlerLikeKey(key)) {\n      continue;\n    }\n\n    const entryValue = props[key];\n\n    if (\n      typeof entryValue === \"string\" ||\n      typeof entryValue === \"number\" ||\n      typeof entryValue === \"boolean\"\n    ) {\n      keys.push(key);\n    }\n  }\n\n  if (keys.length === 0) {\n    return \"\";\n  }\n\n  if (keys.length === 1) {\n    const key = keys[0];\n\n    return `${key}:${String(props[key])}`;\n  }\n\n  if (keys.length === 2) {\n    if (keys[1] < keys[0]) {\n      [keys[0], keys[1]] = [keys[1], keys[0]];\n    }\n\n    return `${keys[0]}:${String(props[keys[0]])},${keys[1]}:${String(props[keys[1]])}`;\n  }\n\n  keys.sort(compareKeys);\n\n  let result = `${keys[0]}:${String(props[keys[0]])}`;\n\n  for (let index = 1; index < keys.length; index += 1) {\n    const key = keys[index];\n    result += `,${key}:${String(props[key])}`;\n  }\n\n  return result;\n}\n\nfunction hasEmptyJsxChildren(children: unknown): boolean {\n  return (\n    children === undefined ||\n    children === null ||\n    typeof children === \"boolean\" ||\n    (Array.isArray(children) && children.length === 0)\n  );\n}\n\nexport function extractTextContent(value: unknown): string {\n  if (Array.isArray(value)) {\n    return value.map((entry) => extractTextContent(entry)).join(\"\");\n  }\n\n  if (\n    value === undefined ||\n    value === null ||\n    typeof value === \"boolean\" ||\n    typeof value === \"function\"\n  ) {\n    return \"\";\n  }\n\n  if (typeof value === \"string\" || typeof value === \"number\") {\n    return String(value);\n  }\n\n  if (isJsxElement(value)) {\n    return extractTextContent(value.props?.children);\n  }\n\n  return \"\";\n}\n\nexport function serializeForId(value: unknown): string {\n  if (Array.isArray(value)) {\n    return serializeArray(value);\n  }\n\n  if (value === undefined || value === null || typeof value === \"boolean\") {\n    return \"\";\n  }\n\n  if (typeof value === \"string\" || typeof value === \"number\") {\n    return String(value);\n  }\n\n  if (isJsxElement(value)) {\n    const typeName =\n      typeof value.type === \"string\"\n        ? value.type\n        : typeof value.type === \"function\"\n          ? value.type.name || \"component\"\n          : \"component\";\n    const props = (value.props ?? {}) as Record<string, unknown>;\n    const propEntries = serializeSerializableProps(props);\n    const children = props.children;\n    const propsPrefix = propEntries === \"\" ? `${typeName}[]` : `${typeName}[${propEntries}]`;\n\n    if (hasEmptyJsxChildren(children)) {\n      return `${propsPrefix}()`;\n    }\n\n    return `${propsPrefix}(${serializeForId(children)})`;\n  }\n\n  return typeof value;\n}\n"],"mappings":";AAEA,SAAgB,aAAa,OAAqC;CAChE,OAAO,OAAO,UAAU,YAAY,UAAU,QAAQ,cAAc,SAAS,WAAW;AAC1F;AAMA,SAAgB,aAAa,UAA8B;CACzD,IAAI,MAAM,QAAQ,QAAQ,GACxB,OAAO;CAGT,OAAO,aAAa,KAAA,KAAa,aAAa,OAAO,CAAC,IAAI,CAAC,QAAQ;AACrE"}

package/dist/components/_internal/style.js

@@ -1,4 +1,28 @@
 //#region src/components/_internal/style.ts
+const cssPropertyNameCache = /* @__PURE__ */ new Map();
+function cssPropertyName(name) {
+	let cached = cssPropertyNameCache.get(name);
+	if (cached !== void 0) return cached;
+	let result = "";
+	for (let index = 0; index < name.length; index += 1) {
+		const code = name.charCodeAt(index);
+		if (code >= 65 && code <= 90) result += `-${String.fromCharCode(code + 32)}`;
+		else result += name[index];
+	}
+	cssPropertyNameCache.set(name, result);
+	return result;
+}
+function serializeCssDeclarations(styles) {
+	const keys = Object.keys(styles);
+	let result = "";
+	for (const key of keys) {
+		const value = styles[key];
+		if (value === void 0 || value === null) continue;
+		const declaration = `${cssPropertyName(key)}:${String(value)}`;
+		result = result ? `${result};${declaration}` : declaration;
+	}
+	return result;
+}
 const STYLE_REGISTRY_ATTR = "data-askr-style-registry";
 const STYLE_CLASS_PREFIX = "ak-style-";
 const styleClassCache = /* @__PURE__ */ new Map();
@@ -36,6 +60,6 @@ function styleDeclarationsToClass(declarations) {
 	return className;
 }
 //#endregion
-export { styleDeclarationsToClass };
+export { serializeCssDeclarations, styleDeclarationsToClass };
 
 //# sourceMappingURL=style.js.map

package/dist/components/_internal/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/_internal/style.ts"],"sourcesContent":["export function mergeCssVar(style: unknown, name: string, value: string): string {\n  const decl = `${name}:${value}`;\n\n  if (typeof style === \"string\") {\n    const trimmed = style.trim();\n    return trimmed ? `${trimmed};${decl}` : decl;\n  }\n\n  if (style && typeof style === \"object\") {\n    const entries = Object.entries(style as Record<string, unknown>)\n      .filter(([, v]) => v !== undefined && v !== null)\n      .map(([k, v]) => `${k.replace(/([A-Z])/g, (c) => `-${c.toLowerCase()}`)}:${String(v)}`)\n      .join(\";\");\n    return entries ? `${entries};${decl}` : decl;\n  }\n\n  return decl;\n}\n\nconst STYLE_REGISTRY_ATTR = \"data-askr-style-registry\";\nconst STYLE_CLASS_PREFIX = \"ak-style-\";\n\nconst styleClassCache = new Map<string, string>();\nconst registeredDeclarations = new Set<string>();\n\nlet nextStyleClassId = 0;\n\nfunction ensureStyleElement(): HTMLStyleElement | null {\n  if (typeof document === \"undefined\") return null;\n\n  const existing = document.querySelector(`style[${STYLE_REGISTRY_ATTR}]`);\n  if (existing instanceof HTMLStyleElement) {\n    return existing;\n  }\n\n  const styleElement = document.createElement(\"style\");\n  styleElement.setAttribute(STYLE_REGISTRY_ATTR, \"true\");\n  (document.head ?? document.documentElement).append(styleElement);\n\n  return styleElement;\n}\n\nfunction normalizeDeclarations(declarations: string): string {\n  return declarations.trim().replace(/;+\\s*$/, \"\");\n}\n\nexport function styleDeclarationsToClass(declarations: string | undefined): string | undefined {\n  if (typeof declarations !== \"string\") return undefined;\n\n  const normalized = normalizeDeclarations(declarations);\n  if (!normalized) return undefined;\n\n  let className = styleClassCache.get(normalized);\n  if (className === undefined) {\n    className = `${STYLE_CLASS_PREFIX}${++nextStyleClassId}`;\n    styleClassCache.set(normalized, className);\n  }\n\n  if (!registeredDeclarations.has(normalized)) {\n    const styleElement = ensureStyleElement();\n    if (styleElement) {\n      const rule = `.${className}{${normalized}}`;\n      styleElement.textContent = `${styleElement.textContent ?? \"\"}\\n${rule}`;\n      registeredDeclarations.add(normalized);\n    }\n  }\n\n  return className;\n}\n"],"mappings":";AAmBA,MAAM,sBAAsB;AAC5B,MAAM,qBAAqB;AAE3B,MAAM,kCAAkB,IAAI,IAAoB;AAChD,MAAM,yCAAyB,IAAI,IAAY;AAE/C,IAAI,mBAAmB;AAEvB,SAAS,qBAA8C;CACrD,IAAI,OAAO,aAAa,aAAa,OAAO;CAE5C,MAAM,WAAW,SAAS,cAAc,SAAS,oBAAoB,EAAE;CACvE,IAAI,oBAAoB,kBACtB,OAAO;CAGT,MAAM,eAAe,SAAS,cAAc,OAAO;CACnD,aAAa,aAAa,qBAAqB,MAAM;CACrD,CAAC,SAAS,QAAQ,SAAS,gBAAA,CAAiB,OAAO,YAAY;CAE/D,OAAO;AACT;AAEA,SAAS,sBAAsB,cAA8B;CAC3D,OAAO,aAAa,KAAK,CAAC,CAAC,QAAQ,UAAU,EAAE;AACjD;AAEA,SAAgB,yBAAyB,cAAsD;CAC7F,IAAI,OAAO,iBAAiB,UAAU,OAAO,KAAA;CAE7C,MAAM,aAAa,sBAAsB,YAAY;CACrD,IAAI,CAAC,YAAY,OAAO,KAAA;CAExB,IAAI,YAAY,gBAAgB,IAAI,UAAU;CAC9C,IAAI,cAAc,KAAA,GAAW;EAC3B,YAAY,GAAG,qBAAqB,EAAE;EACtC,gBAAgB,IAAI,YAAY,SAAS;CAC3C;CAEA,IAAI,CAAC,uBAAuB,IAAI,UAAU,GAAG;EAC3C,MAAM,eAAe,mBAAmB;EACxC,IAAI,cAAc;GAChB,MAAM,OAAO,IAAI,UAAU,GAAG,WAAW;GACzC,aAAa,cAAc,GAAG,aAAa,eAAe,GAAG,IAAI;GACjE,uBAAuB,IAAI,UAAU;EACvC;CACF;CAEA,OAAO;AACT"}
+{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/_internal/style.ts"],"sourcesContent":["const cssPropertyNameCache = new Map<string, string>();\n\nfunction cssPropertyName(name: string): string {\n  let cached = cssPropertyNameCache.get(name);\n  if (cached !== undefined) {\n    return cached;\n  }\n\n  let result = \"\";\n\n  for (let index = 0; index < name.length; index += 1) {\n    const code = name.charCodeAt(index);\n\n    if (code >= 65 && code <= 90) {\n      result += `-${String.fromCharCode(code + 32)}`;\n    } else {\n      result += name[index];\n    }\n  }\n\n  cssPropertyNameCache.set(name, result);\n  return result;\n}\n\nexport function serializeCssDeclarations(styles: Record<string, unknown>): string {\n  const keys = Object.keys(styles);\n  let result = \"\";\n\n  for (const key of keys) {\n    const value = styles[key];\n    if (value === undefined || value === null) {\n      continue;\n    }\n\n    const declaration = `${cssPropertyName(key)}:${String(value)}`;\n    result = result ? `${result};${declaration}` : declaration;\n  }\n\n  return result;\n}\n\nexport function mergeCssVar(style: unknown, name: string, value: string): string {\n  const decl = `${name}:${value}`;\n\n  if (typeof style === \"string\") {\n    const trimmed = style.trim();\n    return trimmed ? `${trimmed};${decl}` : decl;\n  }\n\n  if (style && typeof style === \"object\") {\n    const entries = serializeCssDeclarations(style as Record<string, unknown>);\n    return entries ? `${entries};${decl}` : decl;\n  }\n\n  return decl;\n}\n\nconst STYLE_REGISTRY_ATTR = \"data-askr-style-registry\";\nconst STYLE_CLASS_PREFIX = \"ak-style-\";\n\nconst styleClassCache = new Map<string, string>();\nconst registeredDeclarations = new Set<string>();\n\nlet nextStyleClassId = 0;\n\nfunction ensureStyleElement(): HTMLStyleElement | null {\n  if (typeof document === \"undefined\") return null;\n\n  const existing = document.querySelector(`style[${STYLE_REGISTRY_ATTR}]`);\n  if (existing instanceof HTMLStyleElement) {\n    return existing;\n  }\n\n  const styleElement = document.createElement(\"style\");\n  styleElement.setAttribute(STYLE_REGISTRY_ATTR, \"true\");\n  (document.head ?? document.documentElement).append(styleElement);\n\n  return styleElement;\n}\n\nfunction normalizeDeclarations(declarations: string): string {\n  return declarations.trim().replace(/;+\\s*$/, \"\");\n}\n\nexport function styleDeclarationsToClass(declarations: string | undefined): string | undefined {\n  if (typeof declarations !== \"string\") return undefined;\n\n  const normalized = normalizeDeclarations(declarations);\n  if (!normalized) return undefined;\n\n  let className = styleClassCache.get(normalized);\n  if (className === undefined) {\n    className = `${STYLE_CLASS_PREFIX}${++nextStyleClassId}`;\n    styleClassCache.set(normalized, className);\n  }\n\n  if (!registeredDeclarations.has(normalized)) {\n    const styleElement = ensureStyleElement();\n    if (styleElement) {\n      const rule = `.${className}{${normalized}}`;\n      styleElement.textContent = `${styleElement.textContent ?? \"\"}\\n${rule}`;\n      registeredDeclarations.add(normalized);\n    }\n  }\n\n  return className;\n}\n"],"mappings":";AAAA,MAAM,uCAAuB,IAAI,IAAoB;AAErD,SAAS,gBAAgB,MAAsB;CAC7C,IAAI,SAAS,qBAAqB,IAAI,IAAI;CAC1C,IAAI,WAAW,KAAA,GACb,OAAO;CAGT,IAAI,SAAS;CAEb,KAAK,IAAI,QAAQ,GAAG,QAAQ,KAAK,QAAQ,SAAS,GAAG;EACnD,MAAM,OAAO,KAAK,WAAW,KAAK;EAElC,IAAI,QAAQ,MAAM,QAAQ,IACxB,UAAU,IAAI,OAAO,aAAa,OAAO,EAAE;OAE3C,UAAU,KAAK;CAEnB;CAEA,qBAAqB,IAAI,MAAM,MAAM;CACrC,OAAO;AACT;AAEA,SAAgB,yBAAyB,QAAyC;CAChF,MAAM,OAAO,OAAO,KAAK,MAAM;CAC/B,IAAI,SAAS;CAEb,KAAK,MAAM,OAAO,MAAM;EACtB,MAAM,QAAQ,OAAO;EACrB,IAAI,UAAU,KAAA,KAAa,UAAU,MACnC;EAGF,MAAM,cAAc,GAAG,gBAAgB,GAAG,EAAE,GAAG,OAAO,KAAK;EAC3D,SAAS,SAAS,GAAG,OAAO,GAAG,gBAAgB;CACjD;CAEA,OAAO;AACT;AAkBA,MAAM,sBAAsB;AAC5B,MAAM,qBAAqB;AAE3B,MAAM,kCAAkB,IAAI,IAAoB;AAChD,MAAM,yCAAyB,IAAI,IAAY;AAE/C,IAAI,mBAAmB;AAEvB,SAAS,qBAA8C;CACrD,IAAI,OAAO,aAAa,aAAa,OAAO;CAE5C,MAAM,WAAW,SAAS,cAAc,SAAS,oBAAoB,EAAE;CACvE,IAAI,oBAAoB,kBACtB,OAAO;CAGT,MAAM,eAAe,SAAS,cAAc,OAAO;CACnD,aAAa,aAAa,qBAAqB,MAAM;CACrD,CAAC,SAAS,QAAQ,SAAS,gBAAA,CAAiB,OAAO,YAAY;CAE/D,OAAO;AACT;AAEA,SAAS,sBAAsB,cAA8B;CAC3D,OAAO,aAAa,KAAK,CAAC,CAAC,QAAQ,UAAU,EAAE;AACjD;AAEA,SAAgB,yBAAyB,cAAsD;CAC7F,IAAI,OAAO,iBAAiB,UAAU,OAAO,KAAA;CAE7C,MAAM,aAAa,sBAAsB,YAAY;CACrD,IAAI,CAAC,YAAY,OAAO,KAAA;CAExB,IAAI,YAAY,gBAAgB,IAAI,UAAU;CAC9C,IAAI,cAAc,KAAA,GAAW;EAC3B,YAAY,GAAG,qBAAqB,EAAE;EACtC,gBAAgB,IAAI,YAAY,SAAS;CAC3C;CAEA,IAAI,CAAC,uBAAuB,IAAI,UAAU,GAAG;EAC3C,MAAM,eAAe,mBAAmB;EACxC,IAAI,cAAc;GAChB,MAAM,OAAO,IAAI,UAAU,GAAG,WAAW;GACzC,aAAa,cAAc,GAAG,aAAa,eAAe,GAAG,IAAI;GACjE,uBAAuB,IAAI,UAAU;EACvC;CACF;CAEA,OAAO;AACT"}

package/dist/components/alert/alert.js

@@ -7,8 +7,8 @@ function resolveAlertRole(variant) {
 	return "status";
 }
 function Alert(props) {
-	const { actions, children, class: className, description, dismissLabel = "Dismiss alert", dismissible = false, icon, onDismiss, ref, title, titleAs: TitleTag = "h3", variant = "default", role, ...rest } = props;
-	const shouldRenderDismiss = dismissible && onDismiss !== void 0;
+	const { actions, children, class: className, description, dismissLabel = "Dismiss alert", icon, onDismiss, ref, title, titleAs: TitleTag = "h3", variant = "default", role, ...rest } = props;
+	const shouldRenderDismiss = onDismiss !== void 0;
 	const resolvedRole = role ?? resolveAlertRole(variant);
 	const hasVariant = variant !== "default";
 	return /* @__PURE__ */ jsxs("div", {

package/dist/components/alert/alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert.js","names":[],"sources":["../../../src/components/alert/alert.tsx"],"sourcesContent":["import { classes } from \"../_internal/classes\";\nimport { Close } from \"../close\";\nimport type { AlertProps } from \"./alert.types\";\n\nfunction resolveAlertRole(variant: AlertProps[\"variant\"] | undefined): \"alert\" | \"status\" {\n  if (variant === \"danger\" || variant === \"warning\") {\n    return \"alert\";\n  }\n\n  return \"status\";\n}\n\nexport function Alert(props: AlertProps): JSX.Element {\n  const {\n    actions,\n    children,\n    class: className,\n    description,\n    dismissLabel = \"Dismiss alert\",\n    dismissible = false,\n    icon,\n    onDismiss,\n    ref,\n    title,\n    titleAs: TitleTag = \"h3\",\n    variant = \"default\",\n    role,\n    ...rest\n  } = props;\n  const shouldRenderDismiss = dismissible && onDismiss !== undefined;\n  const resolvedRole = role ?? resolveAlertRole(variant);\n  const hasVariant = variant !== \"default\";\n\n  return (\n    <div\n      {...rest}\n      ref={ref}\n      class={classes(\n        \"alert\",\n        hasVariant ? `alert-${variant}` : undefined,\n        shouldRenderDismiss ? \"alert-dismissible\" : undefined,\n        className,\n      )}\n      data-dismissible={shouldRenderDismiss ? \"true\" : undefined}\n      data-slot=\"alert\"\n      data-variant={hasVariant ? variant : undefined}\n      role={resolvedRole}\n    >\n      {icon !== undefined ? (\n        <div aria-hidden=\"true\" class=\"alert-icon\" data-slot=\"alert-icon\">\n          {icon}\n        </div>\n      ) : null}\n\n      <div class=\"alert-content\" data-slot=\"alert-content\">\n        {title !== undefined ? (\n          <TitleTag class=\"alert-title\" data-slot=\"alert-title\">\n            {title}\n          </TitleTag>\n        ) : null}\n\n        {description !== undefined ? (\n          <p class=\"alert-description\" data-slot=\"alert-description\">\n            {description}\n          </p>\n        ) : null}\n\n        {children}\n\n        {actions !== undefined ? (\n          <div class=\"alert-actions\" data-slot=\"alert-actions\">\n            {actions}\n          </div>\n        ) : null}\n      </div>\n\n      {shouldRenderDismiss ? (\n        <div class=\"alert-close\" data-slot=\"alert-close\">\n          <Close label={dismissLabel} onPress={onDismiss} />\n        </div>\n      ) : null}\n    </div>\n  );\n}\n"],"mappings":";;;;AAIA,SAAS,iBAAiB,SAAgE;CACxF,IAAI,YAAY,YAAY,YAAY,WACtC,OAAO;CAGT,OAAO;AACT;AAEA,SAAgB,MAAM,OAAgC;CACpD,MAAM,EACJ,SACA,UACA,OAAO,WACP,aACA,eAAe,iBACf,cAAc,OACd,MACA,WACA,KACA,OACA,SAAS,WAAW,MACpB,UAAU,WACV,MACA,GAAG,SACD;CACJ,MAAM,sBAAsB,eAAe,cAAc,KAAA;CACzD,MAAM,eAAe,QAAQ,iBAAiB,OAAO;CACrD,MAAM,aAAa,YAAY;CAE/B,OACE,qBAAC,OAAD;EACE,GAAI;EACC;EACL,OAAO,QACL,SACA,aAAa,SAAS,YAAY,KAAA,GAClC,sBAAsB,sBAAsB,KAAA,GAC5C,SACF;EACA,oBAAkB,sBAAsB,SAAS,KAAA;EACjD,aAAU;EACV,gBAAc,aAAa,UAAU,KAAA;EACrC,MAAM;YAZR;GAcG,SAAS,KAAA,IACR,oBAAC,OAAD;IAAK,eAAY;IAAO,OAAM;IAAa,aAAU;cAClD;GACE,CAAA,IACH;GAEJ,qBAAC,OAAD;IAAK,OAAM;IAAgB,aAAU;cAArC;KACG,UAAU,KAAA,IACT,oBAAC,UAAD;MAAU,OAAM;MAAc,aAAU;gBACrC;KACO,CAAA,IACR;KAEH,gBAAgB,KAAA,IACf,oBAAC,KAAD;MAAG,OAAM;MAAoB,aAAU;gBACpC;KACA,CAAA,IACD;KAEH;KAEA,YAAY,KAAA,IACX,oBAAC,OAAD;MAAK,OAAM;MAAgB,aAAU;gBAClC;KACE,CAAA,IACH;IACD;;GAEJ,sBACC,oBAAC,OAAD;IAAK,OAAM;IAAc,aAAU;cACjC,oBAAC,OAAD;KAAO,OAAO;KAAc,SAAS;IAAY,CAAA;GAC9C,CAAA,IACH;EACD;;AAET"}
+{"version":3,"file":"alert.js","names":[],"sources":["../../../src/components/alert/alert.tsx"],"sourcesContent":["import { classes } from \"../_internal/classes\";\nimport { Close } from \"../close\";\nimport type { AlertProps } from \"./alert.types\";\n\nfunction resolveAlertRole(variant: AlertProps[\"variant\"] | undefined): \"alert\" | \"status\" {\n  if (variant === \"danger\" || variant === \"warning\") {\n    return \"alert\";\n  }\n\n  return \"status\";\n}\n\nexport function Alert(props: AlertProps): JSX.Element {\n  const {\n    actions,\n    children,\n    class: className,\n    description,\n    dismissLabel = \"Dismiss alert\",\n    icon,\n    onDismiss,\n    ref,\n    title,\n    titleAs: TitleTag = \"h3\",\n    variant = \"default\",\n    role,\n    ...rest\n  } = props;\n  const shouldRenderDismiss = onDismiss !== undefined;\n  const resolvedRole = role ?? resolveAlertRole(variant);\n  const hasVariant = variant !== \"default\";\n\n  return (\n    <div\n      {...rest}\n      ref={ref}\n      class={classes(\n        \"alert\",\n        hasVariant ? `alert-${variant}` : undefined,\n        shouldRenderDismiss ? \"alert-dismissible\" : undefined,\n        className,\n      )}\n      data-dismissible={shouldRenderDismiss ? \"true\" : undefined}\n      data-slot=\"alert\"\n      data-variant={hasVariant ? variant : undefined}\n      role={resolvedRole}\n    >\n      {icon !== undefined ? (\n        <div aria-hidden=\"true\" class=\"alert-icon\" data-slot=\"alert-icon\">\n          {icon}\n        </div>\n      ) : null}\n\n      <div class=\"alert-content\" data-slot=\"alert-content\">\n        {title !== undefined ? (\n          <TitleTag class=\"alert-title\" data-slot=\"alert-title\">\n            {title}\n          </TitleTag>\n        ) : null}\n\n        {description !== undefined ? (\n          <p class=\"alert-description\" data-slot=\"alert-description\">\n            {description}\n          </p>\n        ) : null}\n\n        {children}\n\n        {actions !== undefined ? (\n          <div class=\"alert-actions\" data-slot=\"alert-actions\">\n            {actions}\n          </div>\n        ) : null}\n      </div>\n\n      {shouldRenderDismiss ? (\n        <div class=\"alert-close\" data-slot=\"alert-close\">\n          <Close label={dismissLabel} onPress={onDismiss} />\n        </div>\n      ) : null}\n    </div>\n  );\n}\n"],"mappings":";;;;AAIA,SAAS,iBAAiB,SAAgE;CACxF,IAAI,YAAY,YAAY,YAAY,WACtC,OAAO;CAGT,OAAO;AACT;AAEA,SAAgB,MAAM,OAAgC;CACpD,MAAM,EACJ,SACA,UACA,OAAO,WACP,aACA,eAAe,iBACf,MACA,WACA,KACA,OACA,SAAS,WAAW,MACpB,UAAU,WACV,MACA,GAAG,SACD;CACJ,MAAM,sBAAsB,cAAc,KAAA;CAC1C,MAAM,eAAe,QAAQ,iBAAiB,OAAO;CACrD,MAAM,aAAa,YAAY;CAE/B,OACE,qBAAC,OAAD;EACE,GAAI;EACC;EACL,OAAO,QACL,SACA,aAAa,SAAS,YAAY,KAAA,GAClC,sBAAsB,sBAAsB,KAAA,GAC5C,SACF;EACA,oBAAkB,sBAAsB,SAAS,KAAA;EACjD,aAAU;EACV,gBAAc,aAAa,UAAU,KAAA;EACrC,MAAM;YAZR;GAcG,SAAS,KAAA,IACR,oBAAC,OAAD;IAAK,eAAY;IAAO,OAAM;IAAa,aAAU;cAClD;GACE,CAAA,IACH;GAEJ,qBAAC,OAAD;IAAK,OAAM;IAAgB,aAAU;cAArC;KACG,UAAU,KAAA,IACT,oBAAC,UAAD;MAAU,OAAM;MAAc,aAAU;gBACrC;KACO,CAAA,IACR;KAEH,gBAAgB,KAAA,IACf,oBAAC,KAAD;MAAG,OAAM;MAAoB,aAAU;gBACpC;KACA,CAAA,IACD;KAEH;KAEA,YAAY,KAAA,IACX,oBAAC,OAAD;MAAK,OAAM;MAAgB,aAAU;gBAClC;KACE,CAAA,IACH;IACD;;GAEJ,sBACC,oBAAC,OAAD;IAAK,OAAM;IAAc,aAAU;cACjC,oBAAC,OAAD;KAAO,OAAO;KAAc,SAAS;IAAY,CAAA;GAC9C,CAAA,IACH;EACD;;AAET"}

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

@@ -9,7 +9,6 @@ type AlertProps = DivProps & {
   children?: unknown;
   description?: unknown;
   dismissLabel?: string;
-  dismissible?: boolean;
   icon?: unknown;
   onDismiss?: () => void;
   title?: unknown;

package/dist/components/aside/aside.d.ts

@@ -0,0 +1,7 @@
+import { AsideProps } from "./aside.types.js";
+
+//#region src/components/aside/aside.d.ts
+declare function Aside(props: AsideProps): JSX.Element;
+//#endregion
+export { Aside };
+//# sourceMappingURL=aside.d.ts.map

package/dist/components/aside/aside.js

@@ -0,0 +1,16 @@
+import { Block } from "../block/block.js";
+import { jsx } from "@askrjs/askr/jsx-runtime";
+//#region src/components/aside/aside.tsx
+function Aside(props) {
+	const { children, ...rest } = props;
+	return /* @__PURE__ */ jsx(Block, {
+		as: "aside",
+		...rest,
+		"data-slot": "aside",
+		children
+	});
+}
+//#endregion
+export { Aside };
+
+//# sourceMappingURL=aside.js.map

package/dist/components/aside/aside.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"aside.js","names":[],"sources":["../../../src/components/aside/aside.tsx"],"sourcesContent":["import { Block } from \"../block\";\nimport type { AsideProps } from \"./aside.types\";\n\nexport function Aside(props: AsideProps): JSX.Element {\n  const { children, ...rest } = props;\n\n  return (\n    <Block as=\"aside\" {...rest} data-slot=\"aside\">\n      {children}\n    </Block>\n  );\n}\n"],"mappings":";;;AAGA,SAAgB,MAAM,OAAgC;CACpD,MAAM,EAAE,UAAU,GAAG,SAAS;CAE9B,OACE,oBAAC,OAAD;EAAO,IAAG;EAAQ,GAAI;EAAM,aAAU;EACnC;CACI,CAAA;AAEX"}

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

@@ -0,0 +1,6 @@
+import { BlockElementProps } from "../block/block.types.js";
+//#region src/components/aside/aside.types.d.ts
+type AsideProps = Omit<BlockElementProps<"aside">, "as">;
+//#endregion
+export { AsideProps };
+//# sourceMappingURL=aside.types.d.ts.map