@askrjs/themes 0.0.2 → 0.0.4

package/README.md

@@ -0,0 +1,78 @@
+# @askrjs/themes
+
+CSS tokens, shell chrome, and styled composition helpers 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.
+
+## Install
+
+```bash
+npm install @askrjs/themes @askrjs/ui
+```
+
+## Quick Start
+
+Import the default theme CSS in your app stylesheet:
+
+```css
+@import "@askrjs/themes/default";
+```
+
+Add the optional cat preset layer after the default theme when you want the
+curated preset family:
+
+```css
+@import "@askrjs/themes/default";
+@import "@askrjs/themes/presets";
+```
+
+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:
+
+```tsx
+import { ThemeProvider, ThemeToggle } from "@askrjs/themes/theme";
+import { Button, ButtonGroup, Field, InputGroup } from "@askrjs/themes/controls";
+
+export function AppShell() {
+  return (
+    <ThemeProvider>
+      <ButtonGroup>
+        <Button variant="primary">Save</Button>
+        <ThemeToggle>{({ nextTheme }) => nextTheme}</ThemeToggle>
+      </ButtonGroup>
+
+      <Field>
+        <InputGroup>
+          <input />
+        </InputGroup>
+      </Field>
+    </ThemeProvider>
+  );
+}
+```
+
+## What To Import
+
+- `@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
+
+## Theme Contract
+
+- Style public `data-*` hooks and token variables, not internal DOM structure.
+- Prefer token overrides before component overrides.
+- 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 `visual-check.html` for manual QA across light and dark modes.

package/THEMING.md

@@ -4,6 +4,9 @@
 `@askrjs/charts`. It owns the app frame and shared visual language, while chart
 rendering stays in the chart package.
 
+See [docs/architecture.md](./docs/architecture.md) for the package boundary
+between `@askrjs/askr`, `@askrjs/ui`, and `@askrjs/themes`.
+
 Import a theme:
 
 ```css
@@ -45,6 +48,38 @@ Icon override:
 
 Rules: style only public data-\* hooks, never internal DOM, no deep selectors, no !important.
 
+## Visual Quality Standard
+
+The default theme is optimized for quiet SaaS products: dense enough for repeated daily use,
+restrained enough for application chrome, and polished enough that downstream apps should not
+need to fix basic spacing or type rhythm.
+
+Use `visual-check.html` as the manual audit surface before shipping theme changes. Review every
+component family in light and dark mode at desktop, tablet, and mobile widths.
+Use `320`, `390`, `768`, `1024`, and desktop widths as the standard responsive
+manual pass.
+
+Manual acceptance criteria:
+
+- No clipped text, awkward wrapping, accidental overflow, collapsed gaps, or misaligned icons.
+- Interactive controls share height, padding, radius, typography, and focus treatment.
+- Headings and body text use deliberate hierarchy, readable line lengths, and calm letter spacing.
+- Dark mode has equal polish and contrast, not just inverted colors.
+- Dense SaaS compositions scan cleanly without feeling cramped.
+- Overlays, menus, and popups use the shared elevated surface language.
+- Long labels and realistic enterprise copy remain legible without breaking layout.
+
+## Template Sync
+
+- When changing `src/themes/default/styles/**`, update the matching
+  `templates/theme/styles/**` file in the same change unless a test documents
+  an intentional template difference.
+- Keep generated theme templates visually aligned with the default theme so
+  scaffolded themes inherit the same density, spacing, typography, and
+  responsive behavior.
+- `visual-check.html` is the primary manual audit surface; browser tests should
+  assert stable computed-style contracts and no page-level overflow.
+
 Selector contract:
 
 - Tokens keep the `--ak-*` prefix because they are global.
@@ -53,6 +88,7 @@ Selector contract:
 - Alias selectors must be grouped with canonical selectors in the same low-specificity rule. Classes are convenience API, not a replacement source of truth.
 - Theme-owned pattern components use plain kebab-case classes such as `.page-header`, and public pattern parts should emit matching `data-slot` hooks so the same grouped selector pattern applies there as well.
 - Semantic `askr-ui` table primitives are styled from `styles/display/table.css` using their `data-slot` hooks only; keep the surface semantic and avoid restoring data-grid behavior in themes.
+- `Button` comes from `@askrjs/ui`; `@askrjs/themes` re-exports and styles it. `ButtonGroup`, `Close`, `Field`, and `InputGroup` stay in themes because they are visual composition wrappers.
 
 Example:
 
@@ -73,24 +109,30 @@ Package boundaries:
 - `@askrjs/themes` owns visual-only components, layout composition, and
   default styling.
 
-Use `@askrjs/themes/components` for styled components such as Button, Box,
-Stack, Inline, Flex, Grid, Container, Section, Spacer, Badge, Skeleton,
-Separator/Divider, SidebarLayout, TopbarLayout, and EmptyState.
+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.
 
 Theme state helpers also live there: `ThemeProvider`, `ThemePicker`,
 `ThemeToggle`, and `useTheme`. `ThemeToggle` intentionally has no built-in
 icons; applications pass their own icon/content props.
+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.
 
 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`.
 - 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-sidebar-position`, and `data-sidebar-width`.
+- 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`.
 - 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 `topbar-layout` or `sidebar-layout`.
-- Named layout hooks such as `data-size`, `data-max-width`, `data-padding`, `data-gap`, and `data-sidebar-width` 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` 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.
 - 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.
@@ -563,7 +605,7 @@ Generic interaction overlays for neutral interactive surfaces.
 
 ### Selected
 
-Selection state for tabs, nav items, rows, or toggles.
+Selection state for nav items, rows, or toggles.
 
 ### Disabled
 
@@ -925,7 +967,7 @@ All official themes are tested for WCAG AA compliance:
 - Status ink on soft backgrounds: 3:1 minimum
 - Inverse text on primary: 4.5:1 minimum
 
-The automated test suite (`tests/contrast.test.ts`) validates these pairs across all themes in both light and dark modes.
+The automated test suite (`tests/unit/contrast.test.ts`) validates these pairs across all themes in both light and dark modes.
 
 ---
 

package/dist/{_internal → components/_internal}/box-layout.js

@@ -1,4 +1,5 @@
 import { mergeLayoutStyles, resolveSpaceValue, setResponsiveStyleVar } from "./layout.js";
+import { styleDeclarationsToClass } from "./style.js";
 //#region src/components/_internal/box-layout.ts
 const SPACE_PROP_KEYS = new Set([
 	"m",
@@ -106,10 +107,10 @@ function applyBoxLayoutStyles(styles, boxProps) {
 		setResponsiveStyleVar(styles, variable, value, (input) => input);
 	}
 }
-function withBoxLayoutStyle(styles, userStyle) {
-	return mergeLayoutStyles(styles, userStyle);
+function withBoxLayoutClass(styles, userStyle) {
+	return styleDeclarationsToClass(mergeLayoutStyles(styles, userStyle));
 }
 //#endregion
-export { applyBoxLayoutStyles, splitBoxLayoutProps, withBoxLayoutStyle };
+export { applyBoxLayoutStyles, splitBoxLayoutProps, withBoxLayoutClass };
 
 //# sourceMappingURL=box-layout.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"box-layout.js","names":[],"sources":["../../../src/components/_internal/box-layout.ts"],"sourcesContent":["import { mergeLayoutStyles, resolveSpaceValue, setResponsiveStyleVar } from \"./layout\";\nimport { styleDeclarationsToClass } from \"./style\";\nimport type { BoxLayoutOwnProps } from \"../box/box.types\";\n\nconst SPACE_PROP_KEYS = new Set([\n  \"m\",\n  \"mx\",\n  \"my\",\n  \"mt\",\n  \"mr\",\n  \"mb\",\n  \"ml\",\n  \"p\",\n  \"px\",\n  \"py\",\n  \"pt\",\n  \"pr\",\n  \"pb\",\n  \"pl\",\n  \"inset\",\n  \"top\",\n  \"right\",\n  \"bottom\",\n  \"left\",\n]);\n\nconst BOX_PROP_KEYS = new Set<keyof BoxLayoutOwnProps>([\n  \"display\",\n  \"m\",\n  \"mx\",\n  \"my\",\n  \"mt\",\n  \"mr\",\n  \"mb\",\n  \"ml\",\n  \"p\",\n  \"px\",\n  \"py\",\n  \"pt\",\n  \"pr\",\n  \"pb\",\n  \"pl\",\n  \"width\",\n  \"minWidth\",\n  \"maxWidth\",\n  \"height\",\n  \"minHeight\",\n  \"maxHeight\",\n  \"position\",\n  \"inset\",\n  \"top\",\n  \"right\",\n  \"bottom\",\n  \"left\",\n  \"overflow\",\n  \"overflowX\",\n  \"overflowY\",\n  \"flexBasis\",\n  \"flexGrow\",\n  \"flexShrink\",\n  \"gridArea\",\n  \"gridColumn\",\n  \"gridColumnStart\",\n  \"gridColumnEnd\",\n  \"gridRow\",\n  \"gridRowStart\",\n  \"gridRowEnd\",\n]);\n\nfunction variableNameForProp(prop: keyof BoxLayoutOwnProps): string {\n  switch (prop) {\n    case \"overflowX\":\n      return \"overflow-x\";\n    case \"overflowY\":\n      return \"overflow-y\";\n    case \"minWidth\":\n      return \"min-width\";\n    case \"maxWidth\":\n      return \"max-width\";\n    case \"minHeight\":\n      return \"min-height\";\n    case \"maxHeight\":\n      return \"max-height\";\n    case \"flexBasis\":\n      return \"flex-basis\";\n    case \"flexGrow\":\n      return \"flex-grow\";\n    case \"flexShrink\":\n      return \"flex-shrink\";\n    case \"gridArea\":\n      return \"grid-area\";\n    case \"gridColumn\":\n      return \"grid-column\";\n    case \"gridColumnStart\":\n      return \"grid-column-start\";\n    case \"gridColumnEnd\":\n      return \"grid-column-end\";\n    case \"gridRow\":\n      return \"grid-row\";\n    case \"gridRowStart\":\n      return \"grid-row-start\";\n    case \"gridRowEnd\":\n      return \"grid-row-end\";\n    default:\n      return prop;\n  }\n}\n\nexport function splitBoxLayoutProps<T extends Record<string, unknown>>(\n  props: T,\n): {\n  boxProps: Partial<BoxLayoutOwnProps>;\n  rest: Omit<T, keyof BoxLayoutOwnProps>;\n} {\n  const boxProps: Partial<BoxLayoutOwnProps> = {};\n  const rest: Record<string, unknown> = {};\n\n  for (const [key, value] of Object.entries(props)) {\n    if (BOX_PROP_KEYS.has(key as keyof BoxLayoutOwnProps)) {\n      (boxProps as Record<string, unknown>)[key] = value;\n    } else {\n      rest[key] = value;\n    }\n  }\n\n  return { boxProps, rest: rest as Omit<T, keyof BoxLayoutOwnProps> };\n}\n\nexport function applyBoxLayoutStyles(\n  styles: Record<string, string | number>,\n  boxProps: Partial<BoxLayoutOwnProps>,\n) {\n  for (const key of BOX_PROP_KEYS) {\n    const value = boxProps[key];\n    if (value === undefined) continue;\n\n    const variable = variableNameForProp(key);\n    if (SPACE_PROP_KEYS.has(key)) {\n      setResponsiveStyleVar(styles, variable, value as string | number, resolveSpaceValue);\n      continue;\n    }\n\n    setResponsiveStyleVar(\n      styles,\n      variable,\n      value as string | number,\n      (input) => input as string | number,\n    );\n  }\n}\n\nexport function withBoxLayoutStyle(\n  styles: Record<string, string | number>,\n  userStyle: unknown,\n): string | undefined {\n  return mergeLayoutStyles(styles, userStyle);\n}\n\nexport function withBoxLayoutClass(\n  styles: Record<string, string | number>,\n  userStyle: unknown,\n): string | undefined {\n  return styleDeclarationsToClass(mergeLayoutStyles(styles, userStyle));\n}\n"],"mappings":";;;AAIA,MAAM,kBAAkB,IAAI,IAAI;CAC9B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,CAAC;AAEF,MAAM,gBAAgB,IAAI,IAA6B;CACrD;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,CAAC;AAEF,SAAS,oBAAoB,MAAuC;CAClE,QAAQ,MAAR;EACE,KAAK,aACH,OAAO;EACT,KAAK,aACH,OAAO;EACT,KAAK,YACH,OAAO;EACT,KAAK,YACH,OAAO;EACT,KAAK,aACH,OAAO;EACT,KAAK,aACH,OAAO;EACT,KAAK,aACH,OAAO;EACT,KAAK,YACH,OAAO;EACT,KAAK,cACH,OAAO;EACT,KAAK,YACH,OAAO;EACT,KAAK,cACH,OAAO;EACT,KAAK,mBACH,OAAO;EACT,KAAK,iBACH,OAAO;EACT,KAAK,WACH,OAAO;EACT,KAAK,gBACH,OAAO;EACT,KAAK,cACH,OAAO;EACT,SACE,OAAO;;;AAIb,SAAgB,oBACd,OAIA;CACA,MAAM,WAAuC,EAAE;CAC/C,MAAM,OAAgC,EAAE;CAExC,KAAK,MAAM,CAAC,KAAK,UAAU,OAAO,QAAQ,MAAM,EAC9C,IAAI,cAAc,IAAI,IAA+B,EACnD,SAAsC,OAAO;MAE7C,KAAK,OAAO;CAIhB,OAAO;EAAE;EAAgB;EAA0C;;AAGrE,SAAgB,qBACd,QACA,UACA;CACA,KAAK,MAAM,OAAO,eAAe;EAC/B,MAAM,QAAQ,SAAS;EACvB,IAAI,UAAU,KAAA,GAAW;EAEzB,MAAM,WAAW,oBAAoB,IAAI;EACzC,IAAI,gBAAgB,IAAI,IAAI,EAAE;GAC5B,sBAAsB,QAAQ,UAAU,OAA0B,kBAAkB;GACpF;;EAGF,sBACE,QACA,UACA,QACC,UAAU,MACZ;;;AAWL,SAAgB,mBACd,QACA,WACoB;CACpB,OAAO,yBAAyB,kBAAkB,QAAQ,UAAU,CAAC"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"classes.js","names":[],"sources":["../../../src/components/_internal/classes.ts"],"sourcesContent":["export function classes(...values: Array<unknown>): string | undefined {\n  const value = values.filter((item) => typeof item === \"string\" && item.trim()).join(\" \");\n\n  return value || undefined;\n}\n"],"mappings":";AAAA,SAAgB,QAAQ,GAAG,QAA4C;CAGrE,OAFc,OAAO,QAAQ,SAAS,OAAO,SAAS,YAAY,KAAK,MAAM,CAAC,CAAC,KAAK,IAExE,IAAI,KAAA"}

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

@@ -0,0 +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;;AAO1F,SAAgB,aAAa,UAA8B;CACzD,IAAI,MAAM,QAAQ,SAAS,EACzB,OAAO;CAGT,OAAO,aAAa,KAAA,KAAa,aAAa,OAAO,EAAE,GAAG,CAAC,SAAS"}

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

@@ -1,31 +1,9 @@
+//#region src/components/_internal/layout.d.ts
 /**
  * Layout helpers shared by headless layout primitives.
  */
-export type LayoutBreakpoint = "initial" | "sm" | "md" | "lg" | "xl";
-export type ResponsiveValue<T> = T | Partial<Record<LayoutBreakpoint, T>>;
-/**
- * Returns true when `value` is a concrete CSS length/size that can be applied
- * directly as an inline style.
- */
-export declare function isCssLength(value: unknown): value is string;
-export declare function isResponsiveValue<T>(value: ResponsiveValue<T> | undefined): value is Partial<Record<LayoutBreakpoint, T>>;
-export declare function normalizeResponsiveValue<T>(value: ResponsiveValue<T> | undefined): Partial<Record<LayoutBreakpoint, T>> | undefined;
-export declare function serializeResponsiveValue<T>(value: ResponsiveValue<T> | undefined): string | undefined;
-export declare function serializeResponsiveValueIf<T>(value: ResponsiveValue<T> | undefined, predicate: (value: T) => boolean): string | undefined;
-export declare function serializeValueIf<T>(value: T | undefined, predicate: (value: T) => boolean): string | undefined;
-export declare function setResponsiveStyleVar<T>(styles: Record<string, string | number>, variable: string, value: ResponsiveValue<T> | undefined, resolve?: (value: T) => string | number | undefined): void;
-export declare function resolveSpaceValue(value: string | number): string | number;
-export declare function resolveContainerSizeValue(value: string): string;
-export declare function resolveSectionSizeValue(value: string): string;
-export declare function resolveGridTrackValue(value: string | number): string;
-export declare function resolveJustifyValue(value: string): string;
-export declare function resolveAlignValue(value: string): string;
-export declare function resolveInlineAlignValue(value: "left" | "center" | "right"): {
-    marginLeft?: string;
-    marginRight?: string;
-};
-/**
- * Merges a record of computed layout styles with a user-supplied `style` prop.
- * The user's styles take precedence for conflicting keys.
- */
-export declare function mergeLayoutStyles(layout: Record<string, string | number>, user: unknown): string | undefined;
+type LayoutBreakpoint = "initial" | "sm" | "md" | "lg" | "xl";
+type ResponsiveValue<T> = T | Partial<Record<LayoutBreakpoint, T>>;
+//#endregion
+export { ResponsiveValue };
+//# sourceMappingURL=layout.d.ts.map

package/dist/{_internal → components/_internal}/layout.js

@@ -37,8 +37,8 @@ const CONTAINER_SIZE_MAP = {
 	xl: "var(--ak-container-4)"
 };
 /**
-* Returns true when `value` is a concrete CSS length/size that can be applied
-* directly as an inline style.
+* Returns true when `value` is a concrete CSS length/size that can be serialized
+* into a CSS declaration without token translation.
 */
 function isCssLength(value) {
 	if (typeof value !== "string") return false;
@@ -76,10 +76,6 @@ function serializeResponsiveValueIf(value, predicate) {
 	}
 	return serializeResponsiveValue(value);
 }
-function serializeValueIf(value, predicate) {
-	if (value === void 0 || !predicate(value)) return void 0;
-	return String(value);
-}
 function setResponsiveStyleVar(styles, variable, value, resolve = (input) => input) {
 	const normalized = normalizeResponsiveValue(value);
 	if (!normalized) return;
@@ -100,12 +96,6 @@ function resolveContainerSizeValue(value) {
 	const trimmed = value.trim();
 	return CONTAINER_SIZE_MAP[trimmed] ?? trimmed;
 }
-function resolveGridTrackValue(value) {
-	if (typeof value === "number") return `repeat(${value}, minmax(0, 1fr))`;
-	const trimmed = value.trim();
-	if (/^\d+$/.test(trimmed)) return `repeat(${trimmed}, minmax(0, 1fr))`;
-	return trimmed;
-}
 function resolveJustifyValue(value) {
 	const trimmed = value.trim();
 	if (trimmed === "between") return "space-between";
@@ -134,8 +124,8 @@ function resolveInlineAlignValue(value) {
 	};
 }
 /**
-* Merges a record of computed layout styles with a user-supplied `style` prop.
-* The user's styles take precedence for conflicting keys.
+* Merges a record of computed layout declarations with a user-supplied style
+* value. The user's declarations take precedence for conflicting keys.
 */
 function mergeLayoutStyles(layout, user) {
 	const merged = { ...layout };
@@ -151,6 +141,6 @@ function objectToCssString(styles) {
 	return Object.entries(styles).filter(([, value]) => value !== void 0 && value !== null).map(([key, value]) => `${camelToKebab(key)}:${String(value)}`).join(";");
 }
 //#endregion
-export { isCssLength, isResponsiveValue, mergeLayoutStyles, resolveAlignValue, resolveContainerSizeValue, resolveGridTrackValue, resolveInlineAlignValue, resolveJustifyValue, resolveSpaceValue, serializeResponsiveValueIf, serializeValueIf, setResponsiveStyleVar };
+export { isCssLength, isResponsiveValue, mergeLayoutStyles, resolveAlignValue, resolveContainerSizeValue, resolveInlineAlignValue, resolveJustifyValue, resolveSpaceValue, serializeResponsiveValueIf, setResponsiveStyleVar };
 
 //# sourceMappingURL=layout.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"layout.js","names":[],"sources":["../../../src/components/_internal/layout.ts"],"sourcesContent":["/**\n * Layout helpers shared by headless layout primitives.\n */\n\nexport type LayoutBreakpoint = \"initial\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\nexport type ResponsiveValue<T> = T | Partial<Record<LayoutBreakpoint, T>>;\n\nconst BREAKPOINTS: readonly LayoutBreakpoint[] = [\"initial\", \"sm\", \"md\", \"lg\", \"xl\"];\n\n/** Units and patterns that identify a concrete CSS length value. */\nconst CSS_UNIT_RE =\n  /^-?[\\d.]+(%|px|em|rem|ex|ch|ic|lh|rlh|vw|vh|vmin|vmax|svw|svh|dvw|dvh|cqw|cqh|cqi|cqb|fr|cm|mm|in|pt|pc|Q)$/;\n\nconst SPACE_TOKEN_MAP: Record<string, string> = {\n  \"1\": \"var(--ak-space-1)\",\n  \"2\": \"var(--ak-space-2)\",\n  \"3\": \"var(--ak-space-3)\",\n  \"4\": \"var(--ak-space-4)\",\n  \"5\": \"var(--ak-space-5)\",\n  \"6\": \"var(--ak-space-6)\",\n  \"7\": \"var(--ak-space-7)\",\n  \"8\": \"var(--ak-space-8)\",\n  \"9\": \"var(--ak-space-9)\",\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};\n\nconst CONTAINER_SIZE_MAP: Record<string, string> = {\n  \"1\": \"var(--ak-container-1)\",\n  \"2\": \"var(--ak-container-2)\",\n  \"3\": \"var(--ak-container-3)\",\n  \"4\": \"var(--ak-container-4)\",\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 SECTION_SIZE_MAP: Record<string, string> = {\n  \"1\": \"var(--ak-section-1)\",\n  \"2\": \"var(--ak-section-2)\",\n  \"3\": \"var(--ak-section-3)\",\n  \"4\": \"var(--ak-section-4)\",\n};\n\n/**\n * Returns true when `value` is a concrete CSS length/size that can be serialized\n * into a CSS declaration without token translation.\n */\nexport function isCssLength(value: unknown): value is string {\n  if (typeof value !== \"string\") return false;\n  const v = value.trim();\n  if (v === \"0\") return true;\n  if (CSS_UNIT_RE.test(v)) return true;\n  // CSS functions: calc(), min(), max(), clamp(), fit-content(), env(), var()\n  if (/^[a-z][a-z-]*\\(/.test(v)) return true;\n  return false;\n}\n\nexport function isResponsiveValue<T>(\n  value: ResponsiveValue<T> | undefined,\n): value is Partial<Record<LayoutBreakpoint, T>> {\n  if (!value || typeof value !== \"object\" || Array.isArray(value)) return false;\n  return BREAKPOINTS.some((breakpoint) => breakpoint in value);\n}\n\nexport function 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 { initial: value };\n}\n\nexport function serializeResponsiveValue<T>(\n  value: ResponsiveValue<T> | undefined,\n): string | undefined {\n  const normalized = normalizeResponsiveValue(value);\n  if (!normalized) return undefined;\n\n  return BREAKPOINTS.map((breakpoint) => {\n    const breakpointValue = normalized[breakpoint];\n    if (breakpointValue === undefined) return \"\";\n    return `${breakpoint}:${String(breakpointValue)}`;\n  })\n    .filter(Boolean)\n    .join(\"|\");\n}\n\nexport function serializeResponsiveValueIf<T>(\n  value: ResponsiveValue<T> | undefined,\n  predicate: (value: T) => boolean,\n): string | undefined {\n  const normalized = normalizeResponsiveValue(value);\n  if (!normalized) return undefined;\n\n  for (const breakpoint of BREAKPOINTS) {\n    const breakpointValue = normalized[breakpoint];\n    if (breakpointValue === undefined) continue;\n    if (!predicate(breakpointValue)) return undefined;\n  }\n\n  return serializeResponsiveValue(value);\n}\n\nexport function serializeValueIf<T>(\n  value: T | undefined,\n  predicate: (value: T) => boolean,\n): string | undefined {\n  if (value === undefined || !predicate(value)) return undefined;\n  return String(value);\n}\n\nexport function setResponsiveStyleVar<T>(\n  styles: Record<string, string | number>,\n  variable: string,\n  value: ResponsiveValue<T> | undefined,\n  resolve: (value: T) => string | number | undefined = (input) =>\n    input as 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 === null || resolved === \"\") continue;\n    styles[`--ak-${variable}-${breakpoint}`] = resolved;\n  }\n}\n\nexport function resolveSpaceValue(value: string | number): string | number {\n  if (typeof value === \"number\") return String(value);\n  const trimmed = value.trim();\n  return SPACE_TOKEN_MAP[trimmed] ?? trimmed;\n}\n\nexport function resolveContainerSizeValue(value: string): string {\n  const trimmed = value.trim();\n  return CONTAINER_SIZE_MAP[trimmed] ?? trimmed;\n}\n\nexport function resolveSectionSizeValue(value: string): string {\n  const trimmed = value.trim();\n  return SECTION_SIZE_MAP[trimmed] ?? trimmed;\n}\n\nexport function resolveJustifyValue(value: string): string {\n  const trimmed = value.trim();\n  if (trimmed === \"between\") return \"space-between\";\n  if (trimmed === \"start\") return \"flex-start\";\n  if (trimmed === \"end\") return \"flex-end\";\n  return trimmed;\n}\n\nexport function resolveAlignValue(value: string): string {\n  const trimmed = value.trim();\n  if (trimmed === \"start\") return \"flex-start\";\n  if (trimmed === \"end\") return \"flex-end\";\n  return trimmed;\n}\n\nexport function resolveInlineAlignValue(value: \"left\" | \"center\" | \"right\"): {\n  marginLeft?: string;\n  marginRight?: string;\n} {\n  if (value === \"left\") return { marginLeft: \"0\", marginRight: \"auto\" };\n  if (value === \"right\") return { marginLeft: \"auto\", marginRight: \"0\" };\n  return { marginLeft: \"auto\", marginRight: \"auto\" };\n}\n\n/**\n * Merges a record of computed layout declarations with a user-supplied style\n * value. The user's declarations take precedence for conflicting keys.\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 = objectToCssString(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\nfunction camelToKebab(s: string): string {\n  return s.replace(/([A-Z])/g, (c) => `-${c.toLowerCase()}`);\n}\n\nfunction objectToCssString(styles: Record<string, unknown>): string {\n  return Object.entries(styles)\n    .filter(([, value]) => value !== undefined && value !== null)\n    .map(([key, value]) => `${camelToKebab(key)}:${String(value)}`)\n    .join(\";\");\n}\n"],"mappings":"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"}

package/dist/{_internal → components/_internal}/merge-props.js

@@ -1,3 +1,4 @@
+import { classes } from "./classes.js";
 //#region src/components/_internal/merge-props.ts
 function isEventHandlerKey(key) {
 	return key.startsWith("on");
@@ -40,6 +41,10 @@ function mergeProps(base, injected) {
 			out[key] = composeHandlers(injectedValue, baseValue);
 			continue;
 		}
+		if (key === "class") {
+			out[key] = classes(injectedValue, baseValue);
+			continue;
+		}
 		out[key] = baseValue;
 	}
 	return out;

package/dist/components/_internal/merge-props.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"merge-props.js","names":[],"sources":["../../../src/components/_internal/merge-props.ts"],"sourcesContent":["import { classes } from \"./classes\";\n\ntype Handler = (...args: readonly unknown[]) => void;\ntype Ref<T> = { current: T | null } | ((value: T | null) => void) | null | undefined;\n\nfunction isEventHandlerKey(key: string): boolean {\n  return key.startsWith(\"on\");\n}\n\nfunction isDefaultPrevented(value: unknown): value is { defaultPrevented: true } {\n  return (\n    typeof value === \"object\" &&\n    value !== null &&\n    \"defaultPrevented\" in value &&\n    (value as { defaultPrevented?: boolean }).defaultPrevented === true\n  );\n}\n\nfunction composeHandlers(first: Handler, second: Handler): Handler {\n  return (...args) => {\n    // Internal composition runs first so wrappers can normalize state or stop\n    // follow-on handlers when the event has already been consumed.\n    first(...args);\n\n    if (isDefaultPrevented(args[0])) {\n      return;\n    }\n\n    second(...args);\n  };\n}\n\nfunction setRef<T>(ref: Ref<T>, value: T | null): void {\n  if (!ref) return;\n\n  if (typeof ref === \"function\") {\n    ref(value);\n    return;\n  }\n\n  if (Object.isExtensible(ref)) {\n    (ref as { current: T | null }).current = value;\n  }\n}\n\nfunction composeRefs<T>(...refs: Array<Ref<T>>): (value: T | null) => void {\n  return (value: T | null) => {\n    for (const ref of refs) {\n      setRef(ref, value);\n    }\n  };\n}\n\nexport function mergeProps<TBase extends object, TInjected extends object>(\n  base: TBase,\n  injected: TInjected,\n): TInjected & TBase {\n  const baseKeys = Object.keys(base);\n  if (baseKeys.length === 0) {\n    return injected as TInjected & TBase;\n  }\n\n  const out = { ...(injected as object) } as TInjected & TBase;\n\n  for (const key of baseKeys as Array<Extract<keyof TBase, string>>) {\n    const baseValue = (base as Record<string, unknown>)[key];\n    const injectedValue = (injected as Record<string, unknown>)[key];\n\n    if (key === \"ref\") {\n      (out as Record<string, unknown>)[key] = composeRefs(\n        injectedValue as Ref<unknown>,\n        baseValue as Ref<unknown>,\n      );\n      continue;\n    }\n\n    if (\n      isEventHandlerKey(key) &&\n      typeof baseValue === \"function\" &&\n      typeof injectedValue === \"function\"\n    ) {\n      (out as Record<string, unknown>)[key] = composeHandlers(\n        injectedValue as Handler,\n        baseValue as Handler,\n      );\n      continue;\n    }\n\n    if (key === \"class\") {\n      (out as Record<string, unknown>)[key] = classes(injectedValue, baseValue);\n      continue;\n    }\n\n    (out as Record<string, unknown>)[key] = baseValue;\n  }\n\n  return out;\n}\n"],"mappings":";;AAKA,SAAS,kBAAkB,KAAsB;CAC/C,OAAO,IAAI,WAAW,KAAK;;AAG7B,SAAS,mBAAmB,OAAqD;CAC/E,OACE,OAAO,UAAU,YACjB,UAAU,QACV,sBAAsB,SACrB,MAAyC,qBAAqB;;AAInE,SAAS,gBAAgB,OAAgB,QAA0B;CACjE,QAAQ,GAAG,SAAS;EAGlB,MAAM,GAAG,KAAK;EAEd,IAAI,mBAAmB,KAAK,GAAG,EAC7B;EAGF,OAAO,GAAG,KAAK;;;AAInB,SAAS,OAAU,KAAa,OAAuB;CACrD,IAAI,CAAC,KAAK;CAEV,IAAI,OAAO,QAAQ,YAAY;EAC7B,IAAI,MAAM;EACV;;CAGF,IAAI,OAAO,aAAa,IAAI,EAC1B,IAA+B,UAAU;;AAI7C,SAAS,YAAe,GAAG,MAAgD;CACzE,QAAQ,UAAoB;EAC1B,KAAK,MAAM,OAAO,MAChB,OAAO,KAAK,MAAM;;;AAKxB,SAAgB,WACd,MACA,UACmB;CACnB,MAAM,WAAW,OAAO,KAAK,KAAK;CAClC,IAAI,SAAS,WAAW,GACtB,OAAO;CAGT,MAAM,MAAM,EAAE,GAAI,UAAqB;CAEvC,KAAK,MAAM,OAAO,UAAiD;EACjE,MAAM,YAAa,KAAiC;EACpD,MAAM,gBAAiB,SAAqC;EAE5D,IAAI,QAAQ,OAAO;GACjB,IAAiC,OAAO,YACtC,eACA,UACD;GACD;;EAGF,IACE,kBAAkB,IAAI,IACtB,OAAO,cAAc,cACrB,OAAO,kBAAkB,YACzB;GACA,IAAiC,OAAO,gBACtC,eACA,UACD;GACD;;EAGF,IAAI,QAAQ,SAAS;GACnB,IAAiC,OAAO,QAAQ,eAAe,UAAU;GACzE;;EAGF,IAAiC,OAAO;;CAG1C,OAAO"}

package/dist/components/_internal/pathname.js

@@ -0,0 +1,39 @@
+//#region src/components/_internal/pathname.ts
+function normalizePathname(pathname) {
+	return pathname.endsWith("/") && pathname !== "/" ? pathname.slice(0, -1) : pathname;
+}
+function getWindowLocation() {
+	return typeof window === "undefined" ? null : window.location;
+}
+function resolvePathname(href) {
+	if (href.startsWith("#")) return null;
+	const location = getWindowLocation();
+	if (href.startsWith("/") && !href.startsWith("//")) {
+		const queryIndex = href.indexOf("?");
+		const hashIndex = href.indexOf("#");
+		let pathEnd = href.length;
+		if (queryIndex !== -1) pathEnd = Math.min(pathEnd, queryIndex);
+		if (hashIndex !== -1) pathEnd = Math.min(pathEnd, hashIndex);
+		const pathname = normalizePathname(href.slice(0, pathEnd));
+		if (location && hashIndex !== -1) {
+			const searchEnd = hashIndex === -1 ? href.length : hashIndex;
+			const search = queryIndex === -1 ? "" : href.slice(queryIndex, searchEnd);
+			if (pathname === normalizePathname(location.pathname || "/") && search === location.search) return null;
+		}
+		return pathname;
+	}
+	const baseHref = location?.href ?? "http://localhost/";
+	const baseOrigin = location?.origin ?? "http://localhost";
+	try {
+		const target = new URL(href, baseHref);
+		if (target.origin !== baseOrigin) return null;
+		if (location && target.hash && normalizePathname(target.pathname) === normalizePathname(location.pathname || "/") && target.search === location.search) return null;
+		return normalizePathname(target.pathname);
+	} catch {
+		return null;
+	}
+}
+//#endregion
+export { resolvePathname };
+
+//# sourceMappingURL=pathname.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pathname.js","names":[],"sources":["../../../src/components/_internal/pathname.ts"],"sourcesContent":["function normalizePathname(pathname: string): string {\n  return pathname.endsWith(\"/\") && pathname !== \"/\" ? pathname.slice(0, -1) : pathname;\n}\n\nfunction getWindowLocation(): Location | null {\n  return typeof window === \"undefined\" ? null : window.location;\n}\n\nexport function resolvePathname(href: string): string | null {\n  if (href.startsWith(\"#\")) {\n    return null;\n  }\n\n  const location = getWindowLocation();\n\n  if (href.startsWith(\"/\") && !href.startsWith(\"//\")) {\n    const queryIndex = href.indexOf(\"?\");\n    const hashIndex = href.indexOf(\"#\");\n    let pathEnd = href.length;\n\n    if (queryIndex !== -1) {\n      pathEnd = Math.min(pathEnd, queryIndex);\n    }\n\n    if (hashIndex !== -1) {\n      pathEnd = Math.min(pathEnd, hashIndex);\n    }\n\n    const pathname = normalizePathname(href.slice(0, pathEnd));\n\n    if (location && hashIndex !== -1) {\n      const searchEnd = hashIndex === -1 ? href.length : hashIndex;\n      const search = queryIndex === -1 ? \"\" : href.slice(queryIndex, searchEnd);\n      const locationPathname = normalizePathname(location.pathname || \"/\");\n\n      if (pathname === locationPathname && search === location.search) {\n        return null;\n      }\n    }\n\n    return pathname;\n  }\n\n  const baseHref = location?.href ?? \"http://localhost/\";\n  const baseOrigin = location?.origin ?? \"http://localhost\";\n\n  try {\n    const target = new URL(href, baseHref);\n\n    if (target.origin !== baseOrigin) {\n      return null;\n    }\n\n    if (\n      location &&\n      target.hash &&\n      normalizePathname(target.pathname) === normalizePathname(location.pathname || \"/\") &&\n      target.search === location.search\n    ) {\n      return null;\n    }\n\n    return normalizePathname(target.pathname);\n  } catch {\n    return null;\n  }\n}\n"],"mappings":";AAAA,SAAS,kBAAkB,UAA0B;CACnD,OAAO,SAAS,SAAS,IAAI,IAAI,aAAa,MAAM,SAAS,MAAM,GAAG,GAAG,GAAG;;AAG9E,SAAS,oBAAqC;CAC5C,OAAO,OAAO,WAAW,cAAc,OAAO,OAAO;;AAGvD,SAAgB,gBAAgB,MAA6B;CAC3D,IAAI,KAAK,WAAW,IAAI,EACtB,OAAO;CAGT,MAAM,WAAW,mBAAmB;CAEpC,IAAI,KAAK,WAAW,IAAI,IAAI,CAAC,KAAK,WAAW,KAAK,EAAE;EAClD,MAAM,aAAa,KAAK,QAAQ,IAAI;EACpC,MAAM,YAAY,KAAK,QAAQ,IAAI;EACnC,IAAI,UAAU,KAAK;EAEnB,IAAI,eAAe,IACjB,UAAU,KAAK,IAAI,SAAS,WAAW;EAGzC,IAAI,cAAc,IAChB,UAAU,KAAK,IAAI,SAAS,UAAU;EAGxC,MAAM,WAAW,kBAAkB,KAAK,MAAM,GAAG,QAAQ,CAAC;EAE1D,IAAI,YAAY,cAAc,IAAI;GAChC,MAAM,YAAY,cAAc,KAAK,KAAK,SAAS;GACnD,MAAM,SAAS,eAAe,KAAK,KAAK,KAAK,MAAM,YAAY,UAAU;GAGzE,IAAI,aAFqB,kBAAkB,SAAS,YAAY,IAE/B,IAAI,WAAW,SAAS,QACvD,OAAO;;EAIX,OAAO;;CAGT,MAAM,WAAW,UAAU,QAAQ;CACnC,MAAM,aAAa,UAAU,UAAU;CAEvC,IAAI;EACF,MAAM,SAAS,IAAI,IAAI,MAAM,SAAS;EAEtC,IAAI,OAAO,WAAW,YACpB,OAAO;EAGT,IACE,YACA,OAAO,QACP,kBAAkB,OAAO,SAAS,KAAK,kBAAkB,SAAS,YAAY,IAAI,IAClF,OAAO,WAAW,SAAS,QAE3B,OAAO;EAGT,OAAO,kBAAkB,OAAO,SAAS;SACnC;EACN,OAAO"}

package/dist/components/_internal/style.js

@@ -0,0 +1,41 @@
+//#region src/components/_internal/style.ts
+const STYLE_REGISTRY_ATTR = "data-askr-style-registry";
+const STYLE_CLASS_PREFIX = "ak-style-";
+const styleClassCache = /* @__PURE__ */ new Map();
+const registeredDeclarations = /* @__PURE__ */ new Set();
+let nextStyleClassId = 0;
+function ensureStyleElement() {
+	if (typeof document === "undefined") return null;
+	const existing = document.querySelector(`style[${STYLE_REGISTRY_ATTR}]`);
+	if (existing instanceof HTMLStyleElement) return existing;
+	const styleElement = document.createElement("style");
+	styleElement.setAttribute(STYLE_REGISTRY_ATTR, "true");
+	(document.head ?? document.documentElement).append(styleElement);
+	return styleElement;
+}
+function normalizeDeclarations(declarations) {
+	return declarations.trim().replace(/;+\s*$/, "");
+}
+function styleDeclarationsToClass(declarations) {
+	if (typeof declarations !== "string") return void 0;
+	const normalized = normalizeDeclarations(declarations);
+	if (!normalized) return void 0;
+	let className = styleClassCache.get(normalized);
+	if (className === void 0) {
+		className = `${STYLE_CLASS_PREFIX}${++nextStyleClassId}`;
+		styleClassCache.set(normalized, className);
+	}
+	if (!registeredDeclarations.has(normalized)) {
+		const styleElement = ensureStyleElement();
+		if (styleElement) {
+			const rule = `.${className}{${normalized}}`;
+			styleElement.textContent = `${styleElement.textContent ?? ""}\n${rule}`;
+			registeredDeclarations.add(normalized);
+		}
+	}
+	return className;
+}
+//#endregion
+export { styleDeclarationsToClass };
+
+//# sourceMappingURL=style.js.map

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

@@ -0,0 +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,KAAqB;AACjD,MAAM,yCAAyB,IAAI,KAAa;AAEhD,IAAI,mBAAmB;AAEvB,SAAS,qBAA8C;CACrD,IAAI,OAAO,aAAa,aAAa,OAAO;CAE5C,MAAM,WAAW,SAAS,cAAc,SAAS,oBAAoB,GAAG;CACxE,IAAI,oBAAoB,kBACtB,OAAO;CAGT,MAAM,eAAe,SAAS,cAAc,QAAQ;CACpD,aAAa,aAAa,qBAAqB,OAAO;CACtD,CAAC,SAAS,QAAQ,SAAS,iBAAiB,OAAO,aAAa;CAEhE,OAAO;;AAGT,SAAS,sBAAsB,cAA8B;CAC3D,OAAO,aAAa,MAAM,CAAC,QAAQ,UAAU,GAAG;;AAGlD,SAAgB,yBAAyB,cAAsD;CAC7F,IAAI,OAAO,iBAAiB,UAAU,OAAO,KAAA;CAE7C,MAAM,aAAa,sBAAsB,aAAa;CACtD,IAAI,CAAC,YAAY,OAAO,KAAA;CAExB,IAAI,YAAY,gBAAgB,IAAI,WAAW;CAC/C,IAAI,cAAc,KAAA,GAAW;EAC3B,YAAY,GAAG,qBAAqB,EAAE;EACtC,gBAAgB,IAAI,YAAY,UAAU;;CAG5C,IAAI,CAAC,uBAAuB,IAAI,WAAW,EAAE;EAC3C,MAAM,eAAe,oBAAoB;EACzC,IAAI,cAAc;GAChB,MAAM,OAAO,IAAI,UAAU,GAAG,WAAW;GACzC,aAAa,cAAc,GAAG,aAAa,eAAe,GAAG,IAAI;GACjE,uBAAuB,IAAI,WAAW;;;CAI1C,OAAO"}

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

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

package/dist/components/alert/alert.js

@@ -0,0 +1,65 @@
+import { classes } from "../_internal/classes.js";
+import { Close } from "../close/close.js";
+import { jsx, jsxs } from "@askrjs/askr/jsx-runtime";
+//#region src/components/alert/alert.tsx
+function resolveAlertRole(variant) {
+	if (variant === "danger" || variant === "warning") return "alert";
+	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 resolvedRole = role ?? resolveAlertRole(variant);
+	const hasVariant = variant !== "default";
+	return /* @__PURE__ */ jsxs("div", {
+		...rest,
+		ref,
+		class: classes("alert", hasVariant ? `alert-${variant}` : void 0, shouldRenderDismiss ? "alert-dismissible" : void 0, className),
+		"data-dismissible": shouldRenderDismiss ? "true" : void 0,
+		"data-slot": "alert",
+		"data-variant": hasVariant ? variant : void 0,
+		role: resolvedRole,
+		children: [
+			icon !== void 0 ? /* @__PURE__ */ jsx("div", {
+				"aria-hidden": "true",
+				class: "alert-icon",
+				"data-slot": "alert-icon",
+				children: icon
+			}) : null,
+			/* @__PURE__ */ jsxs("div", {
+				class: "alert-content",
+				"data-slot": "alert-content",
+				children: [
+					title !== void 0 ? /* @__PURE__ */ jsx(TitleTag, {
+						class: "alert-title",
+						"data-slot": "alert-title",
+						children: title
+					}) : null,
+					description !== void 0 ? /* @__PURE__ */ jsx("p", {
+						class: "alert-description",
+						"data-slot": "alert-description",
+						children: description
+					}) : null,
+					children,
+					actions !== void 0 ? /* @__PURE__ */ jsx("div", {
+						class: "alert-actions",
+						"data-slot": "alert-actions",
+						children: actions
+					}) : null
+				]
+			}),
+			shouldRenderDismiss ? /* @__PURE__ */ jsx("div", {
+				class: "alert-close",
+				"data-slot": "alert-close",
+				children: /* @__PURE__ */ jsx(Close, {
+					label: dismissLabel,
+					onPress: onDismiss
+				})
+			}) : null
+		]
+	});
+}
+//#endregion
+export { Alert };
+
+//# sourceMappingURL=alert.js.map

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

@@ -0,0 +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;;AAGT,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,QAAQ;CACtD,MAAM,aAAa,YAAY;CAE/B,OACE,qBAAC,OAAD;EACE,GAAI;EACC;EACL,OAAO,QACL,SACA,aAAa,SAAS,YAAY,KAAA,GAClC,sBAAsB,sBAAsB,KAAA,GAC5C,UACD;EACD,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;IACG,CAAA,GACJ;GAEJ,qBAAC,OAAD;IAAK,OAAM;IAAgB,aAAU;cAArC;KACG,UAAU,KAAA,IACT,oBAAC,UAAD;MAAU,OAAM;MAAc,aAAU;gBACrC;MACQ,CAAA,GACT;KAEH,gBAAgB,KAAA,IACf,oBAAC,KAAD;MAAG,OAAM;MAAoB,aAAU;gBACpC;MACC,CAAA,GACF;KAEH;KAEA,YAAY,KAAA,IACX,oBAAC,OAAD;MAAK,OAAM;MAAgB,aAAU;gBAClC;MACG,CAAA,GACJ;KACA;;GAEL,sBACC,oBAAC,OAAD;IAAK,OAAM;IAAc,aAAU;cACjC,oBAAC,OAAD;KAAO,OAAO;KAAc,SAAS;KAAa,CAAA;IAC9C,CAAA,GACJ;GACA"}

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

@@ -0,0 +1,22 @@
+import { Ref } from "@askrjs/askr/foundations/utilities";
+
+//#region src/components/alert/alert.types.d.ts
+type AlertVariant = "default" | "info" | "success" | "warning" | "danger";
+type AlertHeadingTag = "h2" | "h3" | "h4" | "h5" | "h6";
+type DivProps = Omit<JSX.IntrinsicElements["div"], "children" | "ref">;
+type AlertProps = DivProps & {
+  actions?: unknown;
+  children?: unknown;
+  description?: unknown;
+  dismissLabel?: string;
+  dismissible?: boolean;
+  icon?: unknown;
+  onDismiss?: () => void;
+  title?: unknown;
+  titleAs?: AlertHeadingTag;
+  variant?: AlertVariant;
+  ref?: Ref<HTMLDivElement>;
+};
+//#endregion
+export { AlertHeadingTag, AlertProps, AlertVariant };
+//# sourceMappingURL=alert.types.d.ts.map

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

@@ -0,0 +1,2 @@
+import { AlertHeadingTag, AlertProps, AlertVariant } from "./alert.types.js";
+import { Alert } from "./alert.js";

package/dist/components/aspect-ratio/aspect-ratio.d.ts

@@ -1,3 +1,8 @@
-import type { AspectRatioAsChildProps, AspectRatioProps } from "./aspect-ratio.types";
-export declare function AspectRatio(props: AspectRatioProps): JSX.Element;
-export declare function AspectRatio(props: AspectRatioAsChildProps): JSX.Element;
+import { AspectRatioAsChildProps, AspectRatioProps } from "./aspect-ratio.types.js";
+
+//#region src/components/aspect-ratio/aspect-ratio.d.ts
+declare function AspectRatio(props: AspectRatioProps): JSX.Element;
+declare function AspectRatio(props: AspectRatioAsChildProps): JSX.Element;
+//#endregion
+export { AspectRatio };
+//# sourceMappingURL=aspect-ratio.d.ts.map