@askrjs/themes 0.0.2 → 0.0.4

package/dist/components/aspect-ratio/aspect-ratio.js

@@ -0,0 +1,33 @@
+import { mergeProps } from "../_internal/merge-props.js";
+import { mergeLayoutStyles } from "../_internal/layout.js";
+import { styleDeclarationsToClass } from "../_internal/style.js";
+import { jsx } from "@askrjs/askr/jsx-runtime";
+import { Slot } from "@askrjs/askr/foundations";
+//#region src/components/aspect-ratio/aspect-ratio.tsx
+function AspectRatio(props) {
+	const { asChild, children, ratio = 1, ref, style, ...rest } = props;
+	const layoutClass = styleDeclarationsToClass(mergeLayoutStyles({
+		display: "block",
+		width: "100%",
+		aspectRatio: String(ratio),
+		overflow: "hidden"
+	}, style));
+	const finalProps = mergeProps(rest, {
+		ref,
+		"data-slot": "aspect-ratio",
+		...layoutClass ? { class: layoutClass } : {}
+	});
+	if (asChild) return /* @__PURE__ */ jsx(Slot, {
+		asChild: true,
+		...finalProps,
+		children
+	});
+	return /* @__PURE__ */ jsx("div", {
+		...finalProps,
+		children
+	});
+}
+//#endregion
+export { AspectRatio };
+
+//# sourceMappingURL=aspect-ratio.js.map

package/dist/components/aspect-ratio/aspect-ratio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"aspect-ratio.js","names":[],"sources":["../../../src/components/aspect-ratio/aspect-ratio.tsx"],"sourcesContent":["import { Slot } from \"@askrjs/askr/foundations\";\nimport { mergeProps } from \"../_internal/merge-props\";\nimport { mergeLayoutStyles } from \"../_internal/layout\";\nimport { styleDeclarationsToClass } from \"../_internal/style\";\nimport type { AspectRatioAsChildProps, AspectRatioProps } from \"./aspect-ratio.types\";\n\nexport function AspectRatio(props: AspectRatioProps): JSX.Element;\nexport function AspectRatio(props: AspectRatioAsChildProps): JSX.Element;\nexport function AspectRatio(props: AspectRatioProps | AspectRatioAsChildProps) {\n  const { asChild, children, ratio = 1, ref, style, ...rest } = props;\n  const layoutClass = styleDeclarationsToClass(\n    mergeLayoutStyles(\n      {\n        display: \"block\",\n        width: \"100%\",\n        aspectRatio: String(ratio),\n        overflow: \"hidden\",\n      },\n      style,\n    ),\n  );\n\n  const finalProps = mergeProps(rest, {\n    ref,\n    \"data-slot\": \"aspect-ratio\",\n    ...(layoutClass ? { class: layoutClass } : {}),\n  });\n\n  if (asChild) {\n    return <Slot asChild {...finalProps} children={children} />;\n  }\n\n  return <div {...finalProps}>{children}</div>;\n}\n"],"mappings":";;;;;;AAQA,SAAgB,YAAY,OAAmD;CAC7E,MAAM,EAAE,SAAS,UAAU,QAAQ,GAAG,KAAK,OAAO,GAAG,SAAS;CAC9D,MAAM,cAAc,yBAClB,kBACE;EACE,SAAS;EACT,OAAO;EACP,aAAa,OAAO,MAAM;EAC1B,UAAU;EACX,EACD,MACD,CACF;CAED,MAAM,aAAa,WAAW,MAAM;EAClC;EACA,aAAa;EACb,GAAI,cAAc,EAAE,OAAO,aAAa,GAAG,EAAE;EAC9C,CAAC;CAEF,IAAI,SACF,OAAO,oBAAC,MAAD;EAAM,SAAA;EAAQ,GAAI;EAAsB;EAAY,CAAA;CAG7D,OAAO,oBAAC,OAAD;EAAK,GAAI;EAAa;EAAe,CAAA"}

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

@@ -1,15 +1,21 @@
-import type { JSXElement, Ref } from "@askrjs/askr/foundations";
-export type AspectRatioOwnProps = {
-    children?: unknown;
-    ratio?: number | string;
-    style?: unknown;
+import { JSXElement } from "@askrjs/askr/foundations";
+import { Ref } from "@askrjs/askr/foundations/utilities";
+
+//#region src/components/aspect-ratio/aspect-ratio.types.d.ts
+type AspectRatioOwnProps = {
+  children?: unknown;
+  ratio?: number | string;
+  style?: unknown;
 };
-export type AspectRatioProps = Omit<JSX.IntrinsicElements["div"], "children" | "ref"> & AspectRatioOwnProps & {
-    asChild?: false;
-    ref?: Ref<HTMLDivElement>;
+type AspectRatioProps = Omit<JSX.IntrinsicElements["div"], "children" | "ref"> & AspectRatioOwnProps & {
+  asChild?: false;
+  ref?: Ref<HTMLDivElement>;
 };
-export type AspectRatioAsChildProps = AspectRatioOwnProps & {
-    asChild: true;
-    children: JSXElement;
-    ref?: Ref<unknown>;
+type AspectRatioAsChildProps = AspectRatioOwnProps & {
+  asChild: true;
+  children: JSXElement;
+  ref?: Ref<unknown>;
 };
+//#endregion
+export { AspectRatioAsChildProps, AspectRatioProps };
+//# sourceMappingURL=aspect-ratio.types.d.ts.map

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

@@ -1,2 +1,2 @@
-export { AspectRatio } from "./aspect-ratio";
-export type { AspectRatioAsChildProps, AspectRatioProps } from "./aspect-ratio.types";
+import { AspectRatioAsChildProps, AspectRatioProps } from "./aspect-ratio.types.js";
+import { AspectRatio } from "./aspect-ratio.js";

package/dist/components/badge/badge.a11y.d.ts

@@ -1,13 +1,17 @@
+//#region src/components/badge/badge.a11y.d.ts
 /**
  * Accessibility contract for Badge.
  */
-export declare const BADGE_A11Y_CONTRACT: {
-    readonly DATA_ATTRIBUTES: {
-        readonly slot: "data-slot";
-    };
-    readonly MARKER: "data-badge";
-    readonly CONTENT: {
-        readonly textAllowed: true;
-    };
+declare const BADGE_A11Y_CONTRACT: {
+  readonly DATA_ATTRIBUTES: {
+    readonly slot: "data-slot";
+  };
+  readonly MARKER: "data-badge";
+  readonly CONTENT: {
+    readonly textAllowed: true;
+  };
 };
-export type BadgeA11yContract = typeof BADGE_A11Y_CONTRACT;
+type BadgeA11yContract = typeof BADGE_A11Y_CONTRACT;
+//#endregion
+export { BADGE_A11Y_CONTRACT, BadgeA11yContract };
+//# sourceMappingURL=badge.a11y.d.ts.map

package/dist/components/badge/badge.d.ts

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

package/dist/{badge → components/badge}/badge.js

@@ -1,10 +1,15 @@
+import { classes } from "../_internal/classes.js";
 import { mergeProps } from "../_internal/merge-props.js";
 import { jsx } from "@askrjs/askr/jsx-runtime";
 import { Slot } from "@askrjs/askr/foundations";
 //#region src/components/badge/badge.tsx
+function normalizeBadgeVariant(variant) {
+	return variant && variant !== "default" ? `badge-${variant}` : void 0;
+}
 function Badge(props) {
 	const { asChild, children, variant, ref, ...rest } = props;
 	const finalProps = mergeProps(rest, {
+		class: classes("badge", normalizeBadgeVariant(variant)),
 		ref,
 		"data-slot": "badge",
 		"data-badge": "true",

package/dist/components/badge/badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.js","names":[],"sources":["../../../src/components/badge/badge.tsx"],"sourcesContent":["import { Slot } from \"@askrjs/askr/foundations\";\nimport { classes } from \"../_internal/classes\";\nimport { mergeProps } from \"../_internal/merge-props\";\nimport type { BadgeAsChildProps, BadgeProps } from \"./badge.types\";\n\nfunction normalizeBadgeVariant(variant: BadgeProps[\"variant\"] | undefined) {\n  return variant && variant !== \"default\" ? `badge-${variant}` : undefined;\n}\n\nexport function Badge(props: BadgeProps): JSX.Element;\nexport function Badge(props: BadgeAsChildProps): JSX.Element;\nexport function Badge(props: BadgeProps | BadgeAsChildProps) {\n  const { asChild, children, variant, ref, ...rest } = props;\n  const finalProps = mergeProps(rest, {\n    class: classes(\"badge\", normalizeBadgeVariant(variant)),\n    ref,\n    \"data-slot\": \"badge\",\n    \"data-badge\": \"true\",\n    \"data-variant\": variant && variant !== \"default\" ? variant : undefined,\n  });\n\n  if (asChild) {\n    return <Slot asChild {...finalProps} children={children} />;\n  }\n\n  return <span {...finalProps}>{children}</span>;\n}\n"],"mappings":";;;;;AAKA,SAAS,sBAAsB,SAA4C;CACzE,OAAO,WAAW,YAAY,YAAY,SAAS,YAAY,KAAA;;AAKjE,SAAgB,MAAM,OAAuC;CAC3D,MAAM,EAAE,SAAS,UAAU,SAAS,KAAK,GAAG,SAAS;CACrD,MAAM,aAAa,WAAW,MAAM;EAClC,OAAO,QAAQ,SAAS,sBAAsB,QAAQ,CAAC;EACvD;EACA,aAAa;EACb,cAAc;EACd,gBAAgB,WAAW,YAAY,YAAY,UAAU,KAAA;EAC9D,CAAC;CAEF,IAAI,SACF,OAAO,oBAAC,MAAD;EAAM,SAAA;EAAQ,GAAI;EAAsB;EAAY,CAAA;CAG7D,OAAO,oBAAC,QAAD;EAAM,GAAI;EAAa;EAAgB,CAAA"}

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

@@ -1,15 +1,21 @@
-import type { JSXElement, Ref } from "@askrjs/askr/foundations";
-export type BadgeVariant = "default" | "secondary" | "outline" | "success" | "warning" | "danger" | "info";
-export type BadgeOwnProps = {
-    children?: unknown;
-    variant?: BadgeVariant;
+import { JSXElement } from "@askrjs/askr/foundations";
+import { Ref } from "@askrjs/askr/foundations/utilities";
+
+//#region src/components/badge/badge.types.d.ts
+type BadgeVariant = "default" | "secondary" | "outline" | "success" | "warning" | "danger" | "info";
+type BadgeOwnProps = {
+  children?: unknown;
+  variant?: BadgeVariant;
 };
-export type BadgeProps = Omit<JSX.IntrinsicElements["span"], "children" | "ref"> & BadgeOwnProps & {
-    asChild?: false;
-    ref?: Ref<HTMLSpanElement>;
+type BadgeProps = Omit<JSX.IntrinsicElements["span"], "children" | "ref"> & BadgeOwnProps & {
+  asChild?: false;
+  ref?: Ref<HTMLSpanElement>;
 };
-export type BadgeAsChildProps = BadgeOwnProps & {
-    asChild: true;
-    children: JSXElement;
-    ref?: Ref<unknown>;
+type BadgeAsChildProps = BadgeOwnProps & {
+  asChild: true;
+  children: JSXElement;
+  ref?: Ref<unknown>;
 };
+//#endregion
+export { BadgeAsChildProps, BadgeOwnProps, BadgeProps };
+//# sourceMappingURL=badge.types.d.ts.map

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

@@ -1,3 +1,3 @@
-export { Badge } from "./badge";
-export { BADGE_A11Y_CONTRACT, type BadgeA11yContract } from "./badge.a11y";
-export type { BadgeOwnProps, BadgeProps, BadgeAsChildProps } from "./badge.types";
+import { BadgeAsChildProps, BadgeOwnProps, BadgeProps } from "./badge.types.js";
+import { Badge } from "./badge.js";
+import { BADGE_A11Y_CONTRACT, BadgeA11yContract } from "./badge.a11y.js";

package/dist/components/block/block.a11y.d.ts

@@ -0,0 +1,20 @@
+//#region src/components/block/block.a11y.d.ts
+declare const BLOCK_A11Y_CONTRACT: {
+  readonly DATA_ATTRIBUTES: {
+    readonly slot: "data-slot";
+    readonly layout: "data-ak-layout";
+    readonly gap: "data-gap";
+    readonly gapX: "data-gap-x";
+    readonly gapY: "data-gap-y";
+    readonly align: "data-align";
+    readonly justify: "data-justify";
+    readonly size: "data-size";
+  };
+  readonly SLOT_VALUES: {
+    readonly root: "block";
+  };
+};
+type BlockA11yContract = typeof BLOCK_A11Y_CONTRACT;
+//#endregion
+export { BLOCK_A11Y_CONTRACT, BlockA11yContract };
+//# sourceMappingURL=block.a11y.d.ts.map

package/dist/components/block/block.d.ts

@@ -0,0 +1,9 @@
+import { BlockAsChildProps, BlockDivProps, BlockSpanProps } from "./block.types.js";
+
+//#region src/components/block/block.d.ts
+declare function Block(props: BlockDivProps): JSX.Element;
+declare function Block(props: BlockSpanProps): JSX.Element;
+declare function Block(props: BlockAsChildProps): JSX.Element;
+//#endregion
+export { Block };
+//# sourceMappingURL=block.d.ts.map

package/dist/components/block/block.js

@@ -0,0 +1,66 @@
+import { mergeProps } from "../_internal/merge-props.js";
+import { serializeResponsiveValueIf } from "../_internal/layout.js";
+import { jsx } from "@askrjs/askr/jsx-runtime";
+import { Slot } from "@askrjs/askr/foundations";
+//#region src/components/block/block.tsx
+const SPACE_TOKENS = new Set([
+	"1",
+	"2",
+	"3",
+	"4",
+	"5",
+	"6",
+	"7",
+	"8",
+	"9",
+	"xs",
+	"sm",
+	"md",
+	"lg",
+	"xl",
+	"2xl",
+	"3xl"
+]);
+function Block(props) {
+	const as = "as" in props ? props.as : "div";
+	const { asChild, children, gap, gapX, gapY, align, justify, size = "md", ref, ...rest } = props;
+	const finalProps = mergeProps(rest, {
+		ref,
+		"data-slot": "block",
+		"data-ak-layout": "true",
+		"data-gap": serializeResponsiveValueIf(gap, (value) => typeof value === "string" && SPACE_TOKENS.has(value.trim())),
+		"data-gap-x": serializeResponsiveValueIf(gapX, (value) => typeof value === "string" && SPACE_TOKENS.has(value.trim())),
+		"data-gap-y": serializeResponsiveValueIf(gapY, (value) => typeof value === "string" && SPACE_TOKENS.has(value.trim())),
+		"data-align": serializeResponsiveValueIf(align, (value) => typeof value === "string" && [
+			"start",
+			"end",
+			"center",
+			"stretch",
+			"baseline"
+		].includes(value.trim())),
+		"data-justify": serializeResponsiveValueIf(justify, (value) => typeof value === "string" && [
+			"start",
+			"end",
+			"center",
+			"between"
+		].includes(value.trim())),
+		"data-size": `initial:${size}`
+	});
+	if (asChild) return /* @__PURE__ */ jsx(Slot, {
+		asChild: true,
+		...finalProps,
+		children
+	});
+	if (as === "span") return /* @__PURE__ */ jsx("span", {
+		...finalProps,
+		children
+	});
+	return /* @__PURE__ */ jsx("div", {
+		...finalProps,
+		children
+	});
+}
+//#endregion
+export { Block };
+
+//# sourceMappingURL=block.js.map

package/dist/components/block/block.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"block.js","names":[],"sources":["../../../src/components/block/block.tsx"],"sourcesContent":["import { Slot } from \"@askrjs/askr/foundations\";\nimport { mergeProps } from \"../_internal/merge-props\";\nimport { serializeResponsiveValueIf } from \"../_internal/layout\";\nimport type { BlockAsChildProps, BlockDivProps, BlockSpanProps } from \"./block.types\";\n\nconst SPACE_TOKENS = new Set([\n  \"1\",\n  \"2\",\n  \"3\",\n  \"4\",\n  \"5\",\n  \"6\",\n  \"7\",\n  \"8\",\n  \"9\",\n  \"xs\",\n  \"sm\",\n  \"md\",\n  \"lg\",\n  \"xl\",\n  \"2xl\",\n  \"3xl\",\n]);\n\nexport function Block(props: BlockDivProps): JSX.Element;\nexport function Block(props: BlockSpanProps): JSX.Element;\nexport function Block(props: BlockAsChildProps): JSX.Element;\nexport function Block(props: BlockDivProps | BlockSpanProps | BlockAsChildProps) {\n  const as = \"as\" in props ? props.as : \"div\";\n  const { asChild, children, gap, gapX, gapY, align, justify, size = \"md\", ref, ...rest } = props;\n\n  const finalProps = mergeProps(rest, {\n    ref,\n    \"data-slot\": \"block\",\n    \"data-ak-layout\": \"true\",\n    \"data-gap\": serializeResponsiveValueIf(\n      gap,\n      (value) => typeof value === \"string\" && SPACE_TOKENS.has(value.trim()),\n    ),\n    \"data-gap-x\": serializeResponsiveValueIf(\n      gapX,\n      (value) => typeof value === \"string\" && SPACE_TOKENS.has(value.trim()),\n    ),\n    \"data-gap-y\": serializeResponsiveValueIf(\n      gapY,\n      (value) => typeof value === \"string\" && SPACE_TOKENS.has(value.trim()),\n    ),\n    \"data-align\": serializeResponsiveValueIf(\n      align,\n      (value) =>\n        typeof value === \"string\" &&\n        [\"start\", \"end\", \"center\", \"stretch\", \"baseline\"].includes(value.trim()),\n    ),\n    \"data-justify\": serializeResponsiveValueIf(\n      justify,\n      (value) =>\n        typeof value === \"string\" && [\"start\", \"end\", \"center\", \"between\"].includes(value.trim()),\n    ),\n    \"data-size\": `initial:${size}`,\n  });\n\n  if (asChild) {\n    return <Slot asChild {...finalProps} children={children as JSX.Element} />;\n  }\n\n  if (as === \"span\") {\n    return <span {...finalProps}>{children}</span>;\n  }\n\n  return <div {...finalProps}>{children}</div>;\n}\n"],"mappings":";;;;;AAKA,MAAM,eAAe,IAAI,IAAI;CAC3B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,CAAC;AAKF,SAAgB,MAAM,OAA2D;CAC/E,MAAM,KAAK,QAAQ,QAAQ,MAAM,KAAK;CACtC,MAAM,EAAE,SAAS,UAAU,KAAK,MAAM,MAAM,OAAO,SAAS,OAAO,MAAM,KAAK,GAAG,SAAS;CAE1F,MAAM,aAAa,WAAW,MAAM;EAClC;EACA,aAAa;EACb,kBAAkB;EAClB,YAAY,2BACV,MACC,UAAU,OAAO,UAAU,YAAY,aAAa,IAAI,MAAM,MAAM,CAAC,CACvE;EACD,cAAc,2BACZ,OACC,UAAU,OAAO,UAAU,YAAY,aAAa,IAAI,MAAM,MAAM,CAAC,CACvE;EACD,cAAc,2BACZ,OACC,UAAU,OAAO,UAAU,YAAY,aAAa,IAAI,MAAM,MAAM,CAAC,CACvE;EACD,cAAc,2BACZ,QACC,UACC,OAAO,UAAU,YACjB;GAAC;GAAS;GAAO;GAAU;GAAW;GAAW,CAAC,SAAS,MAAM,MAAM,CAAC,CAC3E;EACD,gBAAgB,2BACd,UACC,UACC,OAAO,UAAU,YAAY;GAAC;GAAS;GAAO;GAAU;GAAU,CAAC,SAAS,MAAM,MAAM,CAAC,CAC5F;EACD,aAAa,WAAW;EACzB,CAAC;CAEF,IAAI,SACF,OAAO,oBAAC,MAAD;EAAM,SAAA;EAAQ,GAAI;EAAsB;EAA2B,CAAA;CAG5E,IAAI,OAAO,QACT,OAAO,oBAAC,QAAD;EAAM,GAAI;EAAa;EAAgB,CAAA;CAGhD,OAAO,oBAAC,OAAD;EAAK,GAAI;EAAa;EAAe,CAAA"}

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

@@ -0,0 +1,38 @@
+import { JSXElement } from "@askrjs/askr/foundations";
+import { Ref } from "@askrjs/askr/foundations/utilities";
+
+//#region src/components/block/block.types.d.ts
+type BlockSize = "xs" | "sm" | "md" | "lg" | "xl";
+type BlockSpace = "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";
+type BlockAlign = "start" | "end" | "center" | "stretch" | "baseline";
+type BlockJustify = "start" | "end" | "center" | "between";
+type BlockOwnProps = {
+  gap?: BlockSpace;
+  gapX?: BlockSpace;
+  gapY?: BlockSpace;
+  align?: BlockAlign;
+  justify?: BlockJustify;
+  size?: BlockSize;
+  as?: "div" | "span";
+  children?: unknown;
+};
+type BlockNativeProps = Omit<JSX.IntrinsicElements["div"], "children" | "ref"> & BlockOwnProps & {
+  as?: "div";
+  asChild?: false;
+  ref?: Ref<HTMLDivElement>;
+};
+type BlockSpanProps = Omit<JSX.IntrinsicElements["span"], "children" | "ref"> & BlockOwnProps & {
+  as: "span";
+  asChild?: false;
+  ref?: Ref<HTMLSpanElement>;
+};
+type BlockAsChildProps = Omit<BlockOwnProps, "as"> & {
+  asChild: true;
+  children: JSXElement;
+  ref?: Ref<unknown>;
+};
+type BlockDivProps = BlockNativeProps;
+type BlockProps = BlockDivProps | BlockSpanProps | BlockAsChildProps;
+//#endregion
+export { BlockAsChildProps, BlockDivProps, BlockNativeProps, BlockOwnProps, BlockProps, BlockSize, BlockSpanProps };
+//# sourceMappingURL=block.types.d.ts.map

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

@@ -0,0 +1,3 @@
+import { BlockAsChildProps, BlockDivProps, BlockNativeProps, BlockOwnProps, BlockProps, BlockSize, BlockSpanProps } from "./block.types.js";
+import { Block } from "./block.js";
+import { BLOCK_A11Y_CONTRACT, BlockA11yContract } from "./block.a11y.js";

package/dist/components/box/box.a11y.d.ts

@@ -1,10 +1,14 @@
-export declare const BOX_A11Y_CONTRACT: {
-    readonly DATA_ATTRIBUTES: {
-        readonly slot: "data-slot";
-        readonly layout: "data-ak-layout";
-    };
-    readonly SLOT_VALUES: {
-        readonly root: "box";
-    };
+//#region src/components/box/box.a11y.d.ts
+declare const BOX_A11Y_CONTRACT: {
+  readonly DATA_ATTRIBUTES: {
+    readonly slot: "data-slot";
+    readonly layout: "data-ak-layout";
+  };
+  readonly SLOT_VALUES: {
+    readonly root: "box";
+  };
 };
-export type BoxA11yContract = typeof BOX_A11Y_CONTRACT;
+type BoxA11yContract = typeof BOX_A11Y_CONTRACT;
+//#endregion
+export { BOX_A11Y_CONTRACT, BoxA11yContract };
+//# sourceMappingURL=box.a11y.d.ts.map

package/dist/components/box/box.d.ts

@@ -1,4 +1,9 @@
-import type { BoxAsChildProps, BoxDivProps, BoxSpanProps } from "./box.types";
-export declare function Box(props: BoxDivProps): JSX.Element;
-export declare function Box(props: BoxSpanProps): JSX.Element;
-export declare function Box(props: BoxAsChildProps): JSX.Element;
+import { BoxAsChildProps, BoxDivProps, BoxSpanProps } from "./box.types.js";
+
+//#region src/components/box/box.d.ts
+declare function Box(props: BoxDivProps): JSX.Element;
+declare function Box(props: BoxSpanProps): JSX.Element;
+declare function Box(props: BoxAsChildProps): JSX.Element;
+//#endregion
+export { Box };
+//# sourceMappingURL=box.d.ts.map

package/dist/{box → components/box}/box.js

@@ -1,5 +1,5 @@
 import { mergeProps } from "../_internal/merge-props.js";
-import { applyBoxLayoutStyles, splitBoxLayoutProps, withBoxLayoutStyle } from "../_internal/box-layout.js";
+import { applyBoxLayoutStyles, splitBoxLayoutProps, withBoxLayoutClass } from "../_internal/box-layout.js";
 import { jsx } from "@askrjs/askr/jsx-runtime";
 import { Slot } from "@askrjs/askr/foundations";
 //#region src/components/box/box.tsx
@@ -9,11 +9,12 @@ function Box(props) {
 	const { boxProps, rest: passthroughProps } = splitBoxLayoutProps(rest);
 	const layoutStyle = {};
 	applyBoxLayoutStyles(layoutStyle, boxProps);
+	const layoutClass = withBoxLayoutClass(layoutStyle, userStyle);
 	const finalProps = mergeProps(passthroughProps, {
 		ref,
 		"data-slot": "box",
 		"data-ak-layout": "true",
-		style: withBoxLayoutStyle(layoutStyle, userStyle)
+		...layoutClass ? { class: layoutClass } : {}
 	});
 	if (asChild) return /* @__PURE__ */ jsx(Slot, {
 		asChild: true,

package/dist/components/box/box.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"box.js","names":[],"sources":["../../../src/components/box/box.tsx"],"sourcesContent":["import { Slot } from \"@askrjs/askr/foundations\";\nimport { mergeProps } from \"../_internal/merge-props\";\nimport {\n  applyBoxLayoutStyles,\n  splitBoxLayoutProps,\n  withBoxLayoutClass,\n} from \"../_internal/box-layout\";\nimport type { BoxAsChildProps, BoxDivProps, BoxSpanProps } from \"./box.types\";\n\nexport function Box(props: BoxDivProps): JSX.Element;\nexport function Box(props: BoxSpanProps): JSX.Element;\nexport function Box(props: BoxAsChildProps): JSX.Element;\nexport function Box(props: BoxDivProps | BoxSpanProps | BoxAsChildProps) {\n  const as = \"as\" in props ? props.as : \"div\";\n  const { asChild, children, ref, style: userStyle, ...rest } = props;\n\n  const { boxProps, rest: passthroughProps } = splitBoxLayoutProps(rest);\n  const layoutStyle: Record<string, string | number> = {};\n  applyBoxLayoutStyles(layoutStyle, boxProps);\n  const layoutClass = withBoxLayoutClass(layoutStyle, userStyle);\n\n  const finalProps = mergeProps(passthroughProps, {\n    ref,\n    \"data-slot\": \"box\",\n    \"data-ak-layout\": \"true\",\n    ...(layoutClass ? { class: layoutClass } : {}),\n  });\n\n  if (asChild) {\n    return <Slot asChild {...finalProps} children={children} />;\n  }\n\n  if (as === \"span\") {\n    return <span {...finalProps}>{children}</span>;\n  }\n\n  return <div {...finalProps}>{children}</div>;\n}\n"],"mappings":";;;;;AAYA,SAAgB,IAAI,OAAqD;CACvE,MAAM,KAAK,QAAQ,QAAQ,MAAM,KAAK;CACtC,MAAM,EAAE,SAAS,UAAU,KAAK,OAAO,WAAW,GAAG,SAAS;CAE9D,MAAM,EAAE,UAAU,MAAM,qBAAqB,oBAAoB,KAAK;CACtE,MAAM,cAA+C,EAAE;CACvD,qBAAqB,aAAa,SAAS;CAC3C,MAAM,cAAc,mBAAmB,aAAa,UAAU;CAE9D,MAAM,aAAa,WAAW,kBAAkB;EAC9C;EACA,aAAa;EACb,kBAAkB;EAClB,GAAI,cAAc,EAAE,OAAO,aAAa,GAAG,EAAE;EAC9C,CAAC;CAEF,IAAI,SACF,OAAO,oBAAC,MAAD;EAAM,SAAA;EAAQ,GAAI;EAAsB;EAAY,CAAA;CAG7D,IAAI,OAAO,QACT,OAAO,oBAAC,QAAD;EAAM,GAAI;EAAa;EAAgB,CAAA;CAGhD,OAAO,oBAAC,OAAD;EAAK,GAAI;EAAa;EAAe,CAAA"}

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

@@ -1,66 +1,72 @@
-import type { JSXElement, Ref } from "@askrjs/askr/foundations";
-import type { ResponsiveValue } from "../_internal/layout";
-export type LayoutResponsive<T> = ResponsiveValue<T>;
-export type BoxLayoutOwnProps = {
-    display?: ResponsiveValue<string>;
-    m?: ResponsiveValue<string | number>;
-    mx?: ResponsiveValue<string | number>;
-    my?: ResponsiveValue<string | number>;
-    mt?: ResponsiveValue<string | number>;
-    mr?: ResponsiveValue<string | number>;
-    mb?: ResponsiveValue<string | number>;
-    ml?: ResponsiveValue<string | number>;
-    p?: ResponsiveValue<string | number>;
-    px?: ResponsiveValue<string | number>;
-    py?: ResponsiveValue<string | number>;
-    pt?: ResponsiveValue<string | number>;
-    pr?: ResponsiveValue<string | number>;
-    pb?: ResponsiveValue<string | number>;
-    pl?: ResponsiveValue<string | number>;
-    width?: ResponsiveValue<string>;
-    minWidth?: ResponsiveValue<string>;
-    maxWidth?: ResponsiveValue<string>;
-    height?: ResponsiveValue<string>;
-    minHeight?: ResponsiveValue<string>;
-    maxHeight?: ResponsiveValue<string>;
-    position?: ResponsiveValue<string>;
-    inset?: ResponsiveValue<string | number>;
-    top?: ResponsiveValue<string | number>;
-    right?: ResponsiveValue<string | number>;
-    bottom?: ResponsiveValue<string | number>;
-    left?: ResponsiveValue<string | number>;
-    overflow?: ResponsiveValue<string>;
-    overflowX?: ResponsiveValue<string>;
-    overflowY?: ResponsiveValue<string>;
-    flexBasis?: ResponsiveValue<string>;
-    flexGrow?: ResponsiveValue<string | number>;
-    flexShrink?: ResponsiveValue<string | number>;
-    gridArea?: ResponsiveValue<string>;
-    gridColumn?: ResponsiveValue<string>;
-    gridColumnStart?: ResponsiveValue<string>;
-    gridColumnEnd?: ResponsiveValue<string>;
-    gridRow?: ResponsiveValue<string>;
-    gridRowStart?: ResponsiveValue<string>;
-    gridRowEnd?: ResponsiveValue<string>;
-    children?: unknown;
+import { ResponsiveValue } from "../_internal/layout.js";
+import { JSXElement } from "@askrjs/askr/foundations";
+import { Ref } from "@askrjs/askr/foundations/utilities";
+
+//#region src/components/box/box.types.d.ts
+type LayoutResponsive<T> = ResponsiveValue<T>;
+type BoxLayoutOwnProps = {
+  display?: ResponsiveValue<string>;
+  m?: ResponsiveValue<string | number>;
+  mx?: ResponsiveValue<string | number>;
+  my?: ResponsiveValue<string | number>;
+  mt?: ResponsiveValue<string | number>;
+  mr?: ResponsiveValue<string | number>;
+  mb?: ResponsiveValue<string | number>;
+  ml?: ResponsiveValue<string | number>;
+  p?: ResponsiveValue<string | number>;
+  px?: ResponsiveValue<string | number>;
+  py?: ResponsiveValue<string | number>;
+  pt?: ResponsiveValue<string | number>;
+  pr?: ResponsiveValue<string | number>;
+  pb?: ResponsiveValue<string | number>;
+  pl?: ResponsiveValue<string | number>;
+  width?: ResponsiveValue<string>;
+  minWidth?: ResponsiveValue<string>;
+  maxWidth?: ResponsiveValue<string>;
+  height?: ResponsiveValue<string>;
+  minHeight?: ResponsiveValue<string>;
+  maxHeight?: ResponsiveValue<string>;
+  position?: ResponsiveValue<string>;
+  inset?: ResponsiveValue<string | number>;
+  top?: ResponsiveValue<string | number>;
+  right?: ResponsiveValue<string | number>;
+  bottom?: ResponsiveValue<string | number>;
+  left?: ResponsiveValue<string | number>;
+  overflow?: ResponsiveValue<string>;
+  overflowX?: ResponsiveValue<string>;
+  overflowY?: ResponsiveValue<string>;
+  flexBasis?: ResponsiveValue<string>;
+  flexGrow?: ResponsiveValue<string | number>;
+  flexShrink?: ResponsiveValue<string | number>;
+  gridArea?: ResponsiveValue<string>;
+  gridColumn?: ResponsiveValue<string>;
+  gridColumnStart?: ResponsiveValue<string>;
+  gridColumnEnd?: ResponsiveValue<string>;
+  gridRow?: ResponsiveValue<string>;
+  gridRowStart?: ResponsiveValue<string>;
+  gridRowEnd?: ResponsiveValue<string>;
+  children?: unknown;
 };
-export type BoxOwnProps = BoxLayoutOwnProps & {
-    as?: "div" | "span";
+type BoxOwnProps = BoxLayoutOwnProps & {
+  as?: "div" | "span";
 };
-export type BoxDivProps = Omit<JSX.IntrinsicElements["div"], "children" | "ref"> & BoxOwnProps & {
-    as?: "div";
-    asChild?: false;
-    ref?: Ref<HTMLDivElement>;
+type BoxDivProps = Omit<JSX.IntrinsicElements["div"], "children" | "ref"> & BoxOwnProps & {
+  as?: "div";
+  asChild?: false;
+  ref?: Ref<HTMLDivElement>;
 };
-export type BoxSpanProps = Omit<JSX.IntrinsicElements["span"], "children" | "ref"> & BoxOwnProps & {
-    as: "span";
-    asChild?: false;
-    ref?: Ref<HTMLSpanElement>;
+type BoxSpanProps = Omit<JSX.IntrinsicElements["span"], "children" | "ref"> & BoxOwnProps & {
+  as: "span";
+  asChild?: false;
+  ref?: Ref<HTMLSpanElement>;
 };
-export type BoxAsChildProps = Omit<BoxOwnProps, "as"> & {
-    asChild: true;
-    children: JSXElement;
-    ref?: Ref<unknown>;
-    style?: JSX.IntrinsicElements["div"]["style"];
+type BoxAsChildProps = Omit<BoxOwnProps, "as"> & {
+  asChild: true;
+  children: JSXElement;
+  ref?: Ref<unknown>;
+  style?: JSX.IntrinsicElements["div"]["style"];
 };
-export type BoxProps = BoxDivProps | BoxSpanProps | BoxAsChildProps;
+type BoxProps = BoxDivProps | BoxSpanProps | BoxAsChildProps;
+//#endregion
+export { BoxAsChildProps, BoxDivProps, BoxLayoutOwnProps, BoxOwnProps, BoxProps, BoxSpanProps, LayoutResponsive };
+//# sourceMappingURL=box.types.d.ts.map

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

@@ -1,3 +1,3 @@
-export { Box } from "./box";
-export { BOX_A11Y_CONTRACT, type BoxA11yContract } from "./box.a11y";
-export type { BoxProps, BoxOwnProps, BoxLayoutOwnProps, BoxDivProps, BoxSpanProps, BoxAsChildProps, LayoutResponsive, } from "./box.types";
+import { BoxAsChildProps, BoxDivProps, BoxLayoutOwnProps, BoxOwnProps, BoxProps, BoxSpanProps, LayoutResponsive } from "./box.types.js";
+import { Box } from "./box.js";
+import { BOX_A11Y_CONTRACT, BoxA11yContract } from "./box.a11y.js";

package/dist/components/breadcrumb/breadcrumb.a11y.d.ts

@@ -1,13 +1,17 @@
+//#region src/components/breadcrumb/breadcrumb.a11y.d.ts
 /**
  * Breadcrumb accessibility contract.
  */
-export declare const BREADCRUMB_A11Y_CONTRACT: {
-    readonly DATA_ATTRIBUTES: {
-        readonly slot: "data-slot";
-    };
-    readonly NAV_ROLE: "navigation";
-    readonly CURRENT_PAGE_ATTRIBUTE: "aria-current";
-    readonly CURRENT_PAGE_VALUE: "page";
-    readonly SEPARATOR_MARKER: "data-breadcrumb-separator";
+declare const BREADCRUMB_A11Y_CONTRACT: {
+  readonly DATA_ATTRIBUTES: {
+    readonly slot: "data-slot";
+  };
+  readonly NAV_ROLE: "navigation";
+  readonly CURRENT_PAGE_ATTRIBUTE: "aria-current";
+  readonly CURRENT_PAGE_VALUE: "page";
+  readonly SEPARATOR_MARKER: "data-breadcrumb-separator";
 };
-export type BreadcrumbA11yContract = typeof BREADCRUMB_A11Y_CONTRACT;
+type BreadcrumbA11yContract = typeof BREADCRUMB_A11Y_CONTRACT;
+//#endregion
+export { BREADCRUMB_A11Y_CONTRACT, BreadcrumbA11yContract };
+//# sourceMappingURL=breadcrumb.a11y.d.ts.map

package/dist/components/breadcrumb/breadcrumb.a11y.js

@@ -0,0 +1,15 @@
+//#region src/components/breadcrumb/breadcrumb.a11y.ts
+/**
+* Breadcrumb accessibility contract.
+*/
+const BREADCRUMB_A11Y_CONTRACT = {
+	DATA_ATTRIBUTES: { slot: "data-slot" },
+	NAV_ROLE: "navigation",
+	CURRENT_PAGE_ATTRIBUTE: "aria-current",
+	CURRENT_PAGE_VALUE: "page",
+	SEPARATOR_MARKER: "data-breadcrumb-separator"
+};
+//#endregion
+export { BREADCRUMB_A11Y_CONTRACT };
+
+//# sourceMappingURL=breadcrumb.a11y.js.map

package/dist/components/breadcrumb/breadcrumb.a11y.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb.a11y.js","names":[],"sources":["../../../src/components/breadcrumb/breadcrumb.a11y.ts"],"sourcesContent":["/**\n * Breadcrumb accessibility contract.\n */\n\nexport const BREADCRUMB_A11Y_CONTRACT = {\n  DATA_ATTRIBUTES: {\n    slot: \"data-slot\" as const,\n  },\n  NAV_ROLE: \"navigation\" as const,\n  CURRENT_PAGE_ATTRIBUTE: \"aria-current\" as const,\n  CURRENT_PAGE_VALUE: \"page\" as const,\n  SEPARATOR_MARKER: \"data-breadcrumb-separator\" as const,\n} as const;\n\nexport type BreadcrumbA11yContract = typeof BREADCRUMB_A11Y_CONTRACT;\n"],"mappings":";;;;AAIA,MAAa,2BAA2B;CACtC,iBAAiB,EACf,MAAM,aACP;CACD,UAAU;CACV,wBAAwB;CACxB,oBAAoB;CACpB,kBAAkB;CACnB"}