@askrjs/themes 0.0.1

package/dist/container/container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"container.js","names":[],"sources":["../../src/components/container/container.tsx"],"sourcesContent":["import { Slot } from \"@askrjs/askr/foundations\";\nimport { mergeProps } from \"../_internal/merge-props\";\nimport {\n  applyBoxLayoutStyles,\n  splitBoxLayoutProps,\n  withBoxLayoutStyle,\n} from \"../_internal/box-layout\";\nimport {\n  isResponsiveValue,\n  resolveContainerSizeValue,\n  resolveInlineAlignValue,\n  resolveSpaceValue,\n  serializeResponsiveValueIf,\n  setResponsiveStyleVar,\n} from \"../_internal/layout\";\nimport type { ContainerAsChildProps, ContainerNativeProps } from \"./container.types\";\n\nconst CONTAINER_WIDTH_TOKENS = new Set([\"1\", \"2\", \"3\", \"4\", \"sm\", \"md\", \"lg\", \"xl\"]);\n\nfunction isContainerWidthToken(value: unknown): value is string {\n  return typeof value === \"string\" && CONTAINER_WIDTH_TOKENS.has(value.trim());\n}\n\nfunction isContainerAlignToken(value: unknown): value is \"left\" | \"center\" | \"right\" {\n  return typeof value === \"string\" && [\"left\", \"center\", \"right\"].includes(value.trim());\n}\n\nfunction hasStyleValue(value: unknown): boolean {\n  if (typeof value === \"string\") return value.trim().length > 0;\n  if (value && typeof value === \"object\") {\n    return Object.keys(value as Record<string, unknown>).length > 0;\n  }\n\n  return false;\n}\n\nfunction isStaticValue(value: unknown): boolean {\n  return !isResponsiveValue(value as Record<string, unknown> | undefined);\n}\n\nexport function Container(props: ContainerNativeProps): JSX.Element;\nexport function Container(props: ContainerAsChildProps): JSX.Element;\nexport function Container(props: ContainerNativeProps | ContainerAsChildProps) {\n  const {\n    asChild,\n    children,\n    variant,\n    fluid = false,\n    maxWidth,\n    padding,\n    size,\n    align = \"center\",\n    ref,\n    style: userStyle,\n    ...rest\n  } = props;\n\n  const responsiveVariant =\n    fluid || (size === undefined && maxWidth === undefined)\n      ? fluid\n        ? \"fluid\"\n        : (variant ?? \"default\")\n      : undefined;\n\n  const { boxProps, rest: passthroughProps } = splitBoxLayoutProps(rest);\n  const layoutStyle: Record<string, string | number> = {\n    boxSizing: \"border-box\",\n    width: \"100%\",\n  };\n  applyBoxLayoutStyles(layoutStyle, boxProps);\n\n  const widthValue = fluid ? undefined : (maxWidth ?? size);\n  const usesInlineMaxWidth =\n    boxProps.maxWidth === undefined &&\n    widthValue !== undefined &&\n    (isResponsiveValue(widthValue) || !isContainerWidthToken(widthValue));\n\n  if (usesInlineMaxWidth) {\n    setResponsiveStyleVar(layoutStyle, \"max-width\", widthValue, (value) =>\n      typeof value === \"string\" && isContainerWidthToken(value)\n        ? resolveContainerSizeValue(value)\n        : value,\n    );\n  }\n\n  if (\n    padding !== undefined &&\n    boxProps.px === undefined &&\n    boxProps.pl === undefined &&\n    boxProps.pr === undefined\n  ) {\n    setResponsiveStyleVar(layoutStyle, \"px\", padding, resolveSpaceValue);\n  }\n\n  const applyAlign = (side: \"marginLeft\" | \"marginRight\", value: typeof align) => {\n    setResponsiveStyleVar(layoutStyle, side === \"marginLeft\" ? \"ml\" : \"mr\", value, (input) => {\n      const margins = resolveInlineAlignValue(input);\n      return side === \"marginLeft\" ? margins.marginLeft : margins.marginRight;\n    });\n  };\n\n  if (boxProps.ml === undefined && boxProps.mr === undefined && isResponsiveValue(align)) {\n    applyAlign(\"marginLeft\", align);\n    applyAlign(\"marginRight\", align);\n  }\n\n  const mergedStyle =\n    Object.keys(layoutStyle).length > 2 || hasStyleValue(userStyle)\n      ? withBoxLayoutStyle(layoutStyle, userStyle)\n      : undefined;\n\n  const finalProps = mergeProps(passthroughProps, {\n    ref,\n    \"data-slot\": \"container\",\n    \"data-ak-layout\": \"true\",\n    \"data-variant\": responsiveVariant,\n    \"data-fluid\": fluid ? \"true\" : undefined,\n    \"data-size\": fluid\n      ? undefined\n      : isStaticValue(size)\n        ? serializeResponsiveValueIf(size, isContainerWidthToken)\n        : undefined,\n    \"data-align\": isStaticValue(align)\n      ? serializeResponsiveValueIf(align, isContainerAlignToken)\n      : undefined,\n    \"data-max-width\": fluid\n      ? undefined\n      : isStaticValue(maxWidth)\n        ? serializeResponsiveValueIf(maxWidth, isContainerWidthToken)\n        : undefined,\n    style: mergedStyle,\n  });\n\n  if (asChild) {\n    return <Slot asChild {...finalProps} children={children} />;\n  }\n\n  return <div {...finalProps}>{children}</div>;\n}\n"],"mappings":";;;;;;AAiBA,MAAM,yBAAyB,IAAI,IAAI;CAAC;CAAK;CAAK;CAAK;CAAK;CAAM;CAAM;CAAM;CAAK,CAAC;AAEpF,SAAS,sBAAsB,OAAiC;AAC9D,QAAO,OAAO,UAAU,YAAY,uBAAuB,IAAI,MAAM,MAAM,CAAC;;AAG9E,SAAS,sBAAsB,OAAsD;AACnF,QAAO,OAAO,UAAU,YAAY;EAAC;EAAQ;EAAU;EAAQ,CAAC,SAAS,MAAM,MAAM,CAAC;;AAGxF,SAAS,cAAc,OAAyB;AAC9C,KAAI,OAAO,UAAU,SAAU,QAAO,MAAM,MAAM,CAAC,SAAS;AAC5D,KAAI,SAAS,OAAO,UAAU,SAC5B,QAAO,OAAO,KAAK,MAAiC,CAAC,SAAS;AAGhE,QAAO;;AAGT,SAAS,cAAc,OAAyB;AAC9C,QAAO,CAAC,kBAAkB,MAA6C;;AAKzE,SAAgB,UAAU,OAAqD;CAC7E,MAAM,EACJ,SACA,UACA,SACA,QAAQ,OACR,UACA,SACA,MACA,QAAQ,UACR,KACA,OAAO,WACP,GAAG,SACD;CAEJ,MAAM,oBACJ,SAAU,SAAS,KAAA,KAAa,aAAa,KAAA,IACzC,QACE,UACC,WAAW,YACd,KAAA;CAEN,MAAM,EAAE,UAAU,MAAM,qBAAqB,oBAAoB,KAAK;CACtE,MAAM,cAA+C;EACnD,WAAW;EACX,OAAO;EACR;AACD,sBAAqB,aAAa,SAAS;CAE3C,MAAM,aAAa,QAAQ,KAAA,IAAa,YAAY;AAMpD,KAJE,SAAS,aAAa,KAAA,KACtB,eAAe,KAAA,MACd,kBAAkB,WAAW,IAAI,CAAC,sBAAsB,WAAW,EAGpE,uBAAsB,aAAa,aAAa,aAAa,UAC3D,OAAO,UAAU,YAAY,sBAAsB,MAAM,GACrD,0BAA0B,MAAM,GAChC,MACL;AAGH,KACE,YAAY,KAAA,KACZ,SAAS,OAAO,KAAA,KAChB,SAAS,OAAO,KAAA,KAChB,SAAS,OAAO,KAAA,EAEhB,uBAAsB,aAAa,MAAM,SAAS,kBAAkB;CAGtE,MAAM,cAAc,MAAoC,UAAwB;AAC9E,wBAAsB,aAAa,SAAS,eAAe,OAAO,MAAM,QAAQ,UAAU;GACxF,MAAM,UAAU,wBAAwB,MAAM;AAC9C,UAAO,SAAS,eAAe,QAAQ,aAAa,QAAQ;IAC5D;;AAGJ,KAAI,SAAS,OAAO,KAAA,KAAa,SAAS,OAAO,KAAA,KAAa,kBAAkB,MAAM,EAAE;AACtF,aAAW,cAAc,MAAM;AAC/B,aAAW,eAAe,MAAM;;CAGlC,MAAM,cACJ,OAAO,KAAK,YAAY,CAAC,SAAS,KAAK,cAAc,UAAU,GAC3D,mBAAmB,aAAa,UAAU,GAC1C,KAAA;CAEN,MAAM,aAAa,WAAW,kBAAkB;EAC9C;EACA,aAAa;EACb,kBAAkB;EAClB,gBAAgB;EAChB,cAAc,QAAQ,SAAS,KAAA;EAC/B,aAAa,QACT,KAAA,IACA,cAAc,KAAK,GACjB,2BAA2B,MAAM,sBAAsB,GACvD,KAAA;EACN,cAAc,cAAc,MAAM,GAC9B,2BAA2B,OAAO,sBAAsB,GACxD,KAAA;EACJ,kBAAkB,QACd,KAAA,IACA,cAAc,SAAS,GACrB,2BAA2B,UAAU,sBAAsB,GAC3D,KAAA;EACN,OAAO;EACR,CAAC;AAEF,KAAI,QACF,QAAO,oBAAC,MAAD;EAAM,SAAA;EAAQ,GAAI;EAAsB;EAAY,CAAA;AAG7D,QAAO,oBAAC,OAAD;EAAK,GAAI;EAAa;EAAe,CAAA"}

package/dist/container/container.types.d.ts

@@ -0,0 +1,28 @@
+import { BoxLayoutOwnProps, LayoutResponsive } from "../box/box.types.js";
+import { JSXElement, Ref } from "@askrjs/askr/foundations";
+
+//#region src/components/container/container.types.d.ts
+type ContainerVariant = "default" | "sm" | "md" | "lg" | "xl" | "xxl" | "fluid";
+type ContainerOwnProps = BoxLayoutOwnProps & {
+  /** Bootstrap-like responsive container variant. */variant?: ContainerVariant; /** Makes the container span the full available width while preserving gutters. */
+  fluid?: boolean; /** Radix-style container size token. */
+  size?: LayoutResponsive<"1" | "2" | "3" | "4" | "sm" | "md" | "lg" | "xl">; /** Horizontal alignment of the constrained container. */
+  align?: LayoutResponsive<"left" | "center" | "right">; /** Compatibility max-width override. */
+  maxWidth?: LayoutResponsive<string>; /** Compatibility horizontal padding override. */
+  padding?: LayoutResponsive<string | number>;
+  children?: unknown;
+};
+type ContainerNativeProps = Omit<JSX.IntrinsicElements["div"], "children" | "ref"> & ContainerOwnProps & {
+  asChild?: false;
+  ref?: Ref<HTMLDivElement>;
+};
+type ContainerAsChildProps = ContainerOwnProps & {
+  asChild: true;
+  children: JSXElement;
+  ref?: Ref<unknown>;
+  style?: JSX.IntrinsicElements["div"]["style"];
+};
+type ContainerProps = ContainerNativeProps | ContainerAsChildProps;
+//#endregion
+export { ContainerAsChildProps, ContainerNativeProps, ContainerOwnProps, ContainerProps, ContainerVariant };
+//# sourceMappingURL=container.types.d.ts.map

package/dist/container/index.d.ts

@@ -0,0 +1,2 @@
+import { ContainerAsChildProps, ContainerNativeProps, ContainerOwnProps, ContainerProps, ContainerVariant } from "./container.types.js";
+import { Container } from "./container.js";

package/dist/empty-state/empty-state.d.ts

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

package/dist/empty-state/empty-state.js

@@ -0,0 +1,39 @@
+import { classes } from "../_internal/classes.js";
+import { jsx, jsxs } from "@askrjs/askr/jsx-runtime";
+//#region src/components/empty-state/empty-state.tsx
+function EmptyState(props) {
+	const { icon, title, titleAs: TitleTag = "h2", description, actions, children, ref, class: className, ...rest } = props;
+	return /* @__PURE__ */ jsxs("div", {
+		...rest,
+		ref,
+		class: classes("empty-state", className),
+		"data-slot": "empty-state",
+		children: [
+			icon !== void 0 ? /* @__PURE__ */ jsx("div", {
+				class: "empty-state-icon",
+				"data-slot": "empty-state-icon",
+				children: icon
+			}) : null,
+			title !== void 0 ? /* @__PURE__ */ jsx(TitleTag, {
+				class: "empty-state-title",
+				"data-slot": "empty-state-title",
+				children: title
+			}) : null,
+			description !== void 0 ? /* @__PURE__ */ jsx("p", {
+				class: "empty-state-description",
+				"data-slot": "empty-state-description",
+				children: description
+			}) : null,
+			children,
+			actions !== void 0 ? /* @__PURE__ */ jsx("div", {
+				class: "empty-state-actions",
+				"data-slot": "empty-state-actions",
+				children: actions
+			}) : null
+		]
+	});
+}
+//#endregion
+export { EmptyState };
+
+//# sourceMappingURL=empty-state.js.map

package/dist/empty-state/empty-state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"empty-state.js","names":[],"sources":["../../src/components/empty-state/empty-state.tsx"],"sourcesContent":["import { classes } from \"../_internal/classes\";\nimport type { EmptyStateProps } from \"./empty-state.types\";\n\nexport function EmptyState(props: EmptyStateProps): JSX.Element {\n  const {\n    icon,\n    title,\n    titleAs: TitleTag = \"h2\",\n    description,\n    actions,\n    children,\n    ref,\n    class: className,\n    ...rest\n  } = props;\n\n  return (\n    <div {...rest} ref={ref} class={classes(\"empty-state\", className)} data-slot=\"empty-state\">\n      {icon !== undefined ? (\n        <div class=\"empty-state-icon\" data-slot=\"empty-state-icon\">\n          {icon}\n        </div>\n      ) : null}\n      {title !== undefined ? (\n        <TitleTag class=\"empty-state-title\" data-slot=\"empty-state-title\">\n          {title}\n        </TitleTag>\n      ) : null}\n      {description !== undefined ? (\n        <p class=\"empty-state-description\" data-slot=\"empty-state-description\">\n          {description}\n        </p>\n      ) : null}\n      {children}\n      {actions !== undefined ? (\n        <div class=\"empty-state-actions\" data-slot=\"empty-state-actions\">\n          {actions}\n        </div>\n      ) : null}\n    </div>\n  );\n}\n"],"mappings":";;;AAGA,SAAgB,WAAW,OAAqC;CAC9D,MAAM,EACJ,MACA,OACA,SAAS,WAAW,MACpB,aACA,SACA,UACA,KACA,OAAO,WACP,GAAG,SACD;AAEJ,QACE,qBAAC,OAAD;EAAK,GAAI;EAAW;EAAK,OAAO,QAAQ,eAAe,UAAU;EAAE,aAAU;YAA7E;GACG,SAAS,KAAA,IACR,oBAAC,OAAD;IAAK,OAAM;IAAmB,aAAU;cACrC;IACG,CAAA,GACJ;GACH,UAAU,KAAA,IACT,oBAAC,UAAD;IAAU,OAAM;IAAoB,aAAU;cAC3C;IACQ,CAAA,GACT;GACH,gBAAgB,KAAA,IACf,oBAAC,KAAD;IAAG,OAAM;IAA0B,aAAU;cAC1C;IACC,CAAA,GACF;GACH;GACA,YAAY,KAAA,IACX,oBAAC,OAAD;IAAK,OAAM;IAAsB,aAAU;cACxC;IACG,CAAA,GACJ;GACA"}

package/dist/empty-state/empty-state.types.d.ts

@@ -0,0 +1,13 @@
+//#region src/components/empty-state/empty-state.types.d.ts
+type EmptyStateHeadingTag = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+type EmptyStateProps = Omit<JSX.IntrinsicElements["div"], "children"> & {
+  icon?: unknown;
+  title?: unknown;
+  titleAs?: EmptyStateHeadingTag;
+  description?: unknown;
+  actions?: unknown;
+  children?: unknown;
+};
+//#endregion
+export { EmptyStateHeadingTag, EmptyStateProps };
+//# sourceMappingURL=empty-state.types.d.ts.map

package/dist/flex/flex.d.ts

@@ -0,0 +1,9 @@
+import { FlexAsChildProps, FlexDivProps, FlexSpanProps } from "./flex.types.js";
+
+//#region src/components/flex/flex.d.ts
+declare function Flex(props: FlexDivProps): JSX.Element;
+declare function Flex(props: FlexSpanProps): JSX.Element;
+declare function Flex(props: FlexAsChildProps): JSX.Element;
+//#endregion
+export { Flex };
+//# sourceMappingURL=flex.d.ts.map

package/dist/flex/flex.js

@@ -0,0 +1,114 @@
+import { mergeProps } from "../_internal/merge-props.js";
+import { isResponsiveValue, resolveAlignValue, resolveJustifyValue, resolveSpaceValue, serializeResponsiveValueIf, setResponsiveStyleVar } from "../_internal/layout.js";
+import { applyBoxLayoutStyles, splitBoxLayoutProps, withBoxLayoutStyle } from "../_internal/box-layout.js";
+import { jsx } from "@askrjs/askr/jsx-runtime";
+import { Slot } from "@askrjs/askr/foundations";
+//#region src/components/flex/flex.tsx
+const SPACE_TOKENS = new Set([
+	"1",
+	"2",
+	"3",
+	"4",
+	"5",
+	"6",
+	"7",
+	"8",
+	"9",
+	"xs",
+	"sm",
+	"md",
+	"lg",
+	"xl",
+	"2xl",
+	"3xl"
+]);
+function isResponsiveObject(value) {
+	return value !== null && typeof value === "object" && !Array.isArray(value);
+}
+function isCssCoveredSpaceValue(value) {
+	return typeof value === "string" && SPACE_TOKENS.has(value.trim());
+}
+function isCssCoveredDirectionValue(value) {
+	return typeof value === "string" && [
+		"row",
+		"column",
+		"row-reverse",
+		"column-reverse"
+	].includes(value.trim());
+}
+function isCssCoveredAlignValue(value) {
+	return typeof value === "string" && [
+		"start",
+		"end",
+		"center",
+		"stretch",
+		"baseline"
+	].includes(value.trim());
+}
+function isCssCoveredJustifyValue(value) {
+	return typeof value === "string" && [
+		"start",
+		"end",
+		"center",
+		"between"
+	].includes(value.trim());
+}
+function isCssCoveredWrapValue(value) {
+	return typeof value === "string" && [
+		"wrap",
+		"nowrap",
+		"wrap-reverse"
+	].includes(value.trim());
+}
+function serializeStaticThemeValue(value, predicate) {
+	if (isResponsiveValue(value)) return void 0;
+	return serializeResponsiveValueIf(value, predicate);
+}
+const SLOTS = { root: "flex" };
+function Flex(props) {
+	const as = "as" in props ? props.as : "div";
+	const { asChild, children, direction = "row", gap, gapX, gapY, align, justify, wrap, collapseBelow, ref, style: userStyle, ...rest } = props;
+	const { boxProps, rest: passthroughProps } = splitBoxLayoutProps(rest);
+	const rootSlot = typeof passthroughProps["data-slot"] === "string" ? String(passthroughProps["data-slot"]) : SLOTS.root;
+	const layoutStyle = {};
+	applyBoxLayoutStyles(layoutStyle, boxProps);
+	if (boxProps.display !== void 0) setResponsiveStyleVar(layoutStyle, "display", boxProps.display, (value) => value);
+	if (direction !== "row" && (!isCssCoveredDirectionValue(direction) || isResponsiveObject(direction))) setResponsiveStyleVar(layoutStyle, "flex-direction", direction, (value) => value);
+	if (!isCssCoveredSpaceValue(gap) || isResponsiveObject(gap)) setResponsiveStyleVar(layoutStyle, "gap", gap, resolveSpaceValue);
+	if (!isCssCoveredSpaceValue(gapX) || isResponsiveObject(gapX)) setResponsiveStyleVar(layoutStyle, "column-gap", gapX, resolveSpaceValue);
+	if (!isCssCoveredSpaceValue(gapY) || isResponsiveObject(gapY)) setResponsiveStyleVar(layoutStyle, "row-gap", gapY, resolveSpaceValue);
+	if (!isCssCoveredAlignValue(align) || isResponsiveObject(align)) setResponsiveStyleVar(layoutStyle, "align-items", align, resolveAlignValue);
+	if (!isCssCoveredJustifyValue(justify) || isResponsiveObject(justify)) setResponsiveStyleVar(layoutStyle, "justify-content", justify, resolveJustifyValue);
+	if (!isCssCoveredWrapValue(wrap) || isResponsiveObject(wrap)) setResponsiveStyleVar(layoutStyle, "flex-wrap", wrap, (value) => value);
+	const finalProps = mergeProps(passthroughProps, {
+		ref,
+		"data-slot": rootSlot,
+		"data-ak-layout": "true",
+		"data-direction": serializeStaticThemeValue(direction, isCssCoveredDirectionValue),
+		"data-gap": serializeStaticThemeValue(gap, isCssCoveredSpaceValue),
+		"data-gap-x": serializeStaticThemeValue(gapX, isCssCoveredSpaceValue),
+		"data-gap-y": serializeStaticThemeValue(gapY, isCssCoveredSpaceValue),
+		"data-align": serializeStaticThemeValue(align, isCssCoveredAlignValue),
+		"data-justify": serializeStaticThemeValue(justify, isCssCoveredJustifyValue),
+		"data-wrap": serializeStaticThemeValue(wrap, isCssCoveredWrapValue),
+		"data-collapse-below": collapseBelow,
+		style: withBoxLayoutStyle(layoutStyle, userStyle)
+	});
+	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 { Flex };
+
+//# sourceMappingURL=flex.js.map

package/dist/flex/flex.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flex.js","names":[],"sources":["../../src/components/flex/flex.tsx"],"sourcesContent":["import { Slot } from \"@askrjs/askr/foundations\";\nimport { mergeProps } from \"../_internal/merge-props\";\nimport {\n  applyBoxLayoutStyles,\n  splitBoxLayoutProps,\n  withBoxLayoutStyle,\n} from \"../_internal/box-layout\";\nimport {\n  isResponsiveValue,\n  resolveAlignValue,\n  resolveJustifyValue,\n  resolveSpaceValue,\n  serializeResponsiveValueIf,\n  setResponsiveStyleVar,\n} from \"../_internal/layout\";\nimport type { FlexAsChildProps, FlexDivProps, FlexSpanProps } from \"./flex.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\nfunction isResponsiveObject(value: unknown): boolean {\n  return value !== null && typeof value === \"object\" && !Array.isArray(value);\n}\n\nfunction isCssCoveredSpaceValue(value: unknown): value is string {\n  return typeof value === \"string\" && SPACE_TOKENS.has(value.trim());\n}\n\nfunction isCssCoveredDirectionValue(value: unknown): value is string {\n  return (\n    typeof value === \"string\" &&\n    [\"row\", \"column\", \"row-reverse\", \"column-reverse\"].includes(value.trim())\n  );\n}\n\nfunction isCssCoveredAlignValue(value: unknown): value is string {\n  return (\n    typeof value === \"string\" &&\n    [\"start\", \"end\", \"center\", \"stretch\", \"baseline\"].includes(value.trim())\n  );\n}\n\nfunction isCssCoveredJustifyValue(value: unknown): value is string {\n  return typeof value === \"string\" && [\"start\", \"end\", \"center\", \"between\"].includes(value.trim());\n}\n\nfunction isCssCoveredWrapValue(value: unknown): value is string {\n  return typeof value === \"string\" && [\"wrap\", \"nowrap\", \"wrap-reverse\"].includes(value.trim());\n}\n\nfunction serializeStaticThemeValue<T>(\n  value: T | Partial<Record<\"initial\" | \"sm\" | \"md\" | \"lg\" | \"xl\", T>> | undefined,\n  predicate: (value: T) => boolean,\n): string | undefined {\n  if (isResponsiveValue(value)) return undefined;\n  return serializeResponsiveValueIf(value, predicate);\n}\n\nconst SLOTS = {\n  root: \"flex\",\n} as const;\n\nexport function Flex(props: FlexDivProps): JSX.Element;\nexport function Flex(props: FlexSpanProps): JSX.Element;\nexport function Flex(props: FlexAsChildProps): JSX.Element;\nexport function Flex(props: FlexDivProps | FlexSpanProps | FlexAsChildProps) {\n  const as = \"as\" in props ? props.as : \"div\";\n  const {\n    asChild,\n    children,\n    direction = \"row\",\n    gap,\n    gapX,\n    gapY,\n    align,\n    justify,\n    wrap,\n    collapseBelow,\n    ref,\n    style: userStyle,\n    ...rest\n  } = props;\n\n  const { boxProps, rest: passthroughProps } = splitBoxLayoutProps(rest);\n  const rootSlot =\n    typeof (passthroughProps as Record<string, unknown>)[\"data-slot\"] === \"string\"\n      ? String((passthroughProps as Record<string, unknown>)[\"data-slot\"])\n      : SLOTS.root;\n  const layoutStyle: Record<string, string | number> = {};\n  applyBoxLayoutStyles(layoutStyle, boxProps);\n\n  if (boxProps.display !== undefined) {\n    setResponsiveStyleVar(layoutStyle, \"display\", boxProps.display, (value) => value);\n  }\n  if (\n    direction !== \"row\" &&\n    (!isCssCoveredDirectionValue(direction) || isResponsiveObject(direction))\n  ) {\n    setResponsiveStyleVar(layoutStyle, \"flex-direction\", direction, (value) => value);\n  }\n  if (!isCssCoveredSpaceValue(gap) || isResponsiveObject(gap)) {\n    setResponsiveStyleVar(layoutStyle, \"gap\", gap, resolveSpaceValue);\n  }\n  if (!isCssCoveredSpaceValue(gapX) || isResponsiveObject(gapX)) {\n    setResponsiveStyleVar(layoutStyle, \"column-gap\", gapX, resolveSpaceValue);\n  }\n  if (!isCssCoveredSpaceValue(gapY) || isResponsiveObject(gapY)) {\n    setResponsiveStyleVar(layoutStyle, \"row-gap\", gapY, resolveSpaceValue);\n  }\n  if (!isCssCoveredAlignValue(align) || isResponsiveObject(align)) {\n    setResponsiveStyleVar(layoutStyle, \"align-items\", align, resolveAlignValue);\n  }\n  if (!isCssCoveredJustifyValue(justify) || isResponsiveObject(justify)) {\n    setResponsiveStyleVar(layoutStyle, \"justify-content\", justify, resolveJustifyValue);\n  }\n  if (!isCssCoveredWrapValue(wrap) || isResponsiveObject(wrap)) {\n    setResponsiveStyleVar(layoutStyle, \"flex-wrap\", wrap, (value) => value);\n  }\n\n  const finalProps = mergeProps(passthroughProps, {\n    ref,\n    \"data-slot\": rootSlot,\n    \"data-ak-layout\": \"true\",\n    \"data-direction\": serializeStaticThemeValue(direction, isCssCoveredDirectionValue),\n    \"data-gap\": serializeStaticThemeValue(gap, isCssCoveredSpaceValue),\n    \"data-gap-x\": serializeStaticThemeValue(gapX, isCssCoveredSpaceValue),\n    \"data-gap-y\": serializeStaticThemeValue(gapY, isCssCoveredSpaceValue),\n    \"data-align\": serializeStaticThemeValue(align, isCssCoveredAlignValue),\n    \"data-justify\": serializeStaticThemeValue(justify, isCssCoveredJustifyValue),\n    \"data-wrap\": serializeStaticThemeValue(wrap, isCssCoveredWrapValue),\n    \"data-collapse-below\": collapseBelow,\n    style: withBoxLayoutStyle(layoutStyle, userStyle),\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":"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"}

package/dist/flex/flex.types.d.ts

@@ -0,0 +1,41 @@
+import { BoxLayoutOwnProps, LayoutResponsive } from "../box/box.types.js";
+import { JSXElement, Ref } from "@askrjs/askr/foundations";
+
+//#region src/components/flex/flex.types.d.ts
+type FlexOwnProps = BoxLayoutOwnProps & {
+  direction?: LayoutResponsive<"row" | "column" | "row-reverse" | "column-reverse">;
+  gap?: LayoutResponsive<string | number>;
+  gapX?: LayoutResponsive<string | number>;
+  gapY?: LayoutResponsive<string | number>;
+  align?: LayoutResponsive<string>;
+  justify?: LayoutResponsive<string>;
+  wrap?: LayoutResponsive<"wrap" | "nowrap" | "wrap-reverse">;
+  /**
+   * Compatibility breakpoint helper. Prefer responsive `direction` instead.
+   */
+  collapseBelow?: string;
+  as?: "div" | "span";
+  children?: unknown;
+};
+type FlexNativeProps = Omit<JSX.IntrinsicElements["div"], "children" | "ref"> & FlexOwnProps & {
+  as?: "div";
+  asChild?: false;
+  ref?: Ref<HTMLDivElement>;
+};
+type FlexSpanProps = Omit<JSX.IntrinsicElements["span"], "children" | "ref"> & FlexOwnProps & {
+  as: "span";
+  asChild?: false;
+  ref?: Ref<HTMLSpanElement>;
+};
+type FlexAsChildProps = Omit<FlexOwnProps, "as"> & {
+  asChild: true;
+  children: JSXElement;
+  ref?: Ref<unknown>;
+  style?: JSX.IntrinsicElements["div"]["style"];
+};
+type FlexDivProps = FlexNativeProps;
+type FlexProps = FlexDivProps | FlexSpanProps | FlexAsChildProps;
+type InlineProps = FlexProps;
+//#endregion
+export { FlexAsChildProps, FlexDivProps, FlexNativeProps, FlexOwnProps, FlexProps, FlexSpanProps, InlineProps };
+//# sourceMappingURL=flex.types.d.ts.map

package/dist/flex/index.d.ts

@@ -0,0 +1,2 @@
+import { FlexAsChildProps, FlexDivProps, FlexNativeProps, FlexOwnProps, FlexProps, FlexSpanProps, InlineProps } from "./flex.types.js";
+import { Flex } from "./flex.js";

package/dist/grid/grid.d.ts

@@ -0,0 +1,9 @@
+import { GridAsChildProps, GridDivProps, GridSpanProps } from "./grid.types.js";
+
+//#region src/components/grid/grid.d.ts
+declare function Grid(props: GridDivProps): JSX.Element;
+declare function Grid(props: GridSpanProps): JSX.Element;
+declare function Grid(props: GridAsChildProps): JSX.Element;
+//#endregion
+export { Grid };
+//# sourceMappingURL=grid.d.ts.map

package/dist/grid/grid.js

@@ -0,0 +1,115 @@
+import { mergeProps } from "../_internal/merge-props.js";
+import { isResponsiveValue, resolveAlignValue, resolveGridTrackValue, resolveJustifyValue, resolveSpaceValue, serializeResponsiveValueIf, serializeValueIf, setResponsiveStyleVar } from "../_internal/layout.js";
+import { applyBoxLayoutStyles, splitBoxLayoutProps, withBoxLayoutStyle } from "../_internal/box-layout.js";
+import { isJsxElement, toChildArray } from "../_internal/jsx.js";
+import { For } from "@askrjs/askr";
+import { jsx } from "@askrjs/askr/jsx-runtime";
+import { Slot } from "@askrjs/askr/foundations";
+//#region src/components/grid/grid.tsx
+const SPACE_TOKENS = new Set([
+	"1",
+	"2",
+	"3",
+	"4",
+	"5",
+	"6",
+	"7",
+	"8",
+	"9",
+	"xs",
+	"sm",
+	"md",
+	"lg",
+	"xl",
+	"2xl",
+	"3xl"
+]);
+function isResponsiveObject(value) {
+	return value !== null && typeof value === "object" && !Array.isArray(value);
+}
+function isCssCoveredSpaceValue(value) {
+	return typeof value === "string" && SPACE_TOKENS.has(value.trim());
+}
+function isCssCoveredAlignValue(value) {
+	return typeof value === "string" && [
+		"start",
+		"end",
+		"center",
+		"stretch",
+		"baseline"
+	].includes(value.trim());
+}
+function isCssCoveredJustifyValue(value) {
+	return typeof value === "string" && [
+		"start",
+		"end",
+		"center",
+		"between"
+	].includes(value.trim());
+}
+function isCssCoveredGridColumnValue(value) {
+	return typeof value === "number" || typeof value === "string" && /^\d+$/.test(value.trim());
+}
+function isCssCoveredAutoFitValue(value) {
+	return typeof value === "boolean";
+}
+function serializeStaticThemeValue(value, predicate) {
+	if (isResponsiveValue(value)) return void 0;
+	return serializeResponsiveValueIf(value, predicate);
+}
+function resolveCompatibilityGridTemplate(minItemWidth, autoFit) {
+	if (!minItemWidth) return void 0;
+	return `repeat(${autoFit === false ? "auto-fill" : "auto-fit"}, minmax(${minItemWidth}, 1fr))`;
+}
+function Grid(props) {
+	const as = "as" in props ? props.as : "div";
+	const { asChild, children, areas, columns, rows, flow, gap, gapX, gapY, align, justify, minItemWidth, autoFit, ref, style: userStyle, ...rest } = props;
+	const { boxProps, rest: passthroughProps } = splitBoxLayoutProps(rest);
+	const layoutStyle = {};
+	applyBoxLayoutStyles(layoutStyle, boxProps);
+	if (boxProps.display !== void 0) setResponsiveStyleVar(layoutStyle, "display", boxProps.display, (value) => value);
+	setResponsiveStyleVar(layoutStyle, "grid-template-areas", areas, (value) => value);
+	setResponsiveStyleVar(layoutStyle, "grid-template-columns", columns ?? resolveCompatibilityGridTemplate(minItemWidth, autoFit), resolveGridTrackValue);
+	setResponsiveStyleVar(layoutStyle, "grid-template-rows", rows, resolveGridTrackValue);
+	setResponsiveStyleVar(layoutStyle, "grid-auto-flow", flow, (value) => value);
+	if (!isCssCoveredSpaceValue(gap) || isResponsiveObject(gap)) setResponsiveStyleVar(layoutStyle, "gap", gap, resolveSpaceValue);
+	if (!isCssCoveredSpaceValue(gapX) || isResponsiveObject(gapX)) setResponsiveStyleVar(layoutStyle, "column-gap", gapX, resolveSpaceValue);
+	if (!isCssCoveredSpaceValue(gapY) || isResponsiveObject(gapY)) setResponsiveStyleVar(layoutStyle, "row-gap", gapY, resolveSpaceValue);
+	if (!isCssCoveredAlignValue(align) || isResponsiveObject(align)) setResponsiveStyleVar(layoutStyle, "align-items", align, resolveAlignValue);
+	if (!isCssCoveredJustifyValue(justify) || isResponsiveObject(justify)) setResponsiveStyleVar(layoutStyle, "justify-content", justify, resolveJustifyValue);
+	const finalProps = mergeProps(passthroughProps, {
+		ref,
+		"data-slot": "grid",
+		"data-ak-layout": "true",
+		"data-columns": serializeStaticThemeValue(columns, isCssCoveredGridColumnValue),
+		"data-gap": serializeStaticThemeValue(gap, isCssCoveredSpaceValue),
+		"data-gap-x": serializeStaticThemeValue(gapX, isCssCoveredSpaceValue),
+		"data-gap-y": serializeStaticThemeValue(gapY, isCssCoveredSpaceValue),
+		"data-align": serializeStaticThemeValue(align, isCssCoveredAlignValue),
+		"data-justify": serializeStaticThemeValue(justify, isCssCoveredJustifyValue),
+		"data-auto-fit": serializeValueIf(autoFit, isCssCoveredAutoFitValue),
+		style: withBoxLayoutStyle(layoutStyle, userStyle)
+	});
+	const keyedChildren = /* @__PURE__ */ jsx(For, {
+		each: () => toChildArray(children),
+		by: (child, index) => isJsxElement(child) && child.key != null ? child.key : index,
+		children: (child) => child
+	});
+	if (asChild) return /* @__PURE__ */ jsx(Slot, {
+		asChild: true,
+		...finalProps,
+		children
+	});
+	if (as === "span") return /* @__PURE__ */ jsx("span", {
+		...finalProps,
+		children: keyedChildren
+	});
+	return /* @__PURE__ */ jsx("div", {
+		...finalProps,
+		children: keyedChildren
+	});
+}
+//#endregion
+export { Grid };
+
+//# sourceMappingURL=grid.js.map

package/dist/grid/grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.js","names":[],"sources":["../../src/components/grid/grid.tsx"],"sourcesContent":["import { For } from \"@askrjs/askr\";\nimport { Slot } from \"@askrjs/askr/foundations\";\nimport { mergeProps } from \"../_internal/merge-props\";\nimport {\n  applyBoxLayoutStyles,\n  splitBoxLayoutProps,\n  withBoxLayoutStyle,\n} from \"../_internal/box-layout\";\nimport { isJsxElement, toChildArray } from \"../_internal/jsx\";\nimport {\n  isResponsiveValue,\n  resolveAlignValue,\n  resolveGridTrackValue,\n  resolveJustifyValue,\n  resolveSpaceValue,\n  serializeResponsiveValueIf,\n  serializeValueIf,\n  setResponsiveStyleVar,\n} from \"../_internal/layout\";\nimport type { GridAsChildProps, GridDivProps, GridSpanProps } from \"./grid.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\nfunction isResponsiveObject(value: unknown): boolean {\n  return value !== null && typeof value === \"object\" && !Array.isArray(value);\n}\n\nfunction isCssCoveredSpaceValue(value: unknown): value is string {\n  return typeof value === \"string\" && SPACE_TOKENS.has(value.trim());\n}\n\nfunction isCssCoveredAlignValue(value: unknown): value is string {\n  return (\n    typeof value === \"string\" &&\n    [\"start\", \"end\", \"center\", \"stretch\", \"baseline\"].includes(value.trim())\n  );\n}\n\nfunction isCssCoveredJustifyValue(value: unknown): value is string {\n  return typeof value === \"string\" && [\"start\", \"end\", \"center\", \"between\"].includes(value.trim());\n}\n\nfunction isCssCoveredGridColumnValue(value: unknown): boolean {\n  return typeof value === \"number\" || (typeof value === \"string\" && /^\\d+$/.test(value.trim()));\n}\n\nfunction isCssCoveredAutoFitValue(value: unknown): value is boolean {\n  return typeof value === \"boolean\";\n}\n\nfunction serializeStaticThemeValue<T>(\n  value: T | Partial<Record<\"initial\" | \"sm\" | \"md\" | \"lg\" | \"xl\", T>> | undefined,\n  predicate: (value: T) => boolean,\n): string | undefined {\n  if (isResponsiveValue(value)) return undefined;\n  return serializeResponsiveValueIf(value, predicate);\n}\n\nfunction resolveCompatibilityGridTemplate(\n  minItemWidth: string | undefined,\n  autoFit: boolean | undefined,\n): string | undefined {\n  if (!minItemWidth) return undefined;\n  const fitKeyword = autoFit === false ? \"auto-fill\" : \"auto-fit\";\n  return `repeat(${fitKeyword}, minmax(${minItemWidth}, 1fr))`;\n}\n\nexport function Grid(props: GridDivProps): JSX.Element;\nexport function Grid(props: GridSpanProps): JSX.Element;\nexport function Grid(props: GridAsChildProps): JSX.Element;\nexport function Grid(props: GridDivProps | GridSpanProps | GridAsChildProps) {\n  const as = \"as\" in props ? props.as : \"div\";\n  const {\n    asChild,\n    children,\n    areas,\n    columns,\n    rows,\n    flow,\n    gap,\n    gapX,\n    gapY,\n    align,\n    justify,\n    minItemWidth,\n    autoFit,\n    ref,\n    style: userStyle,\n    ...rest\n  } = props;\n\n  const { boxProps, rest: passthroughProps } = splitBoxLayoutProps(rest);\n  const layoutStyle: Record<string, string | number> = {};\n  applyBoxLayoutStyles(layoutStyle, boxProps);\n\n  if (boxProps.display !== undefined) {\n    setResponsiveStyleVar(layoutStyle, \"display\", boxProps.display, (value) => value);\n  }\n  setResponsiveStyleVar(layoutStyle, \"grid-template-areas\", areas, (value) => value);\n  setResponsiveStyleVar(\n    layoutStyle,\n    \"grid-template-columns\",\n    columns ?? resolveCompatibilityGridTemplate(minItemWidth, autoFit),\n    resolveGridTrackValue,\n  );\n  setResponsiveStyleVar(layoutStyle, \"grid-template-rows\", rows, resolveGridTrackValue);\n  setResponsiveStyleVar(layoutStyle, \"grid-auto-flow\", flow, (value) => value);\n  if (!isCssCoveredSpaceValue(gap) || isResponsiveObject(gap)) {\n    setResponsiveStyleVar(layoutStyle, \"gap\", gap, resolveSpaceValue);\n  }\n  if (!isCssCoveredSpaceValue(gapX) || isResponsiveObject(gapX)) {\n    setResponsiveStyleVar(layoutStyle, \"column-gap\", gapX, resolveSpaceValue);\n  }\n  if (!isCssCoveredSpaceValue(gapY) || isResponsiveObject(gapY)) {\n    setResponsiveStyleVar(layoutStyle, \"row-gap\", gapY, resolveSpaceValue);\n  }\n  if (!isCssCoveredAlignValue(align) || isResponsiveObject(align)) {\n    setResponsiveStyleVar(layoutStyle, \"align-items\", align, resolveAlignValue);\n  }\n  if (!isCssCoveredJustifyValue(justify) || isResponsiveObject(justify)) {\n    setResponsiveStyleVar(layoutStyle, \"justify-content\", justify, resolveJustifyValue);\n  }\n\n  const finalProps = mergeProps(passthroughProps, {\n    ref,\n    \"data-slot\": \"grid\",\n    \"data-ak-layout\": \"true\",\n    \"data-columns\": serializeStaticThemeValue(columns, isCssCoveredGridColumnValue),\n    \"data-gap\": serializeStaticThemeValue(gap, isCssCoveredSpaceValue),\n    \"data-gap-x\": serializeStaticThemeValue(gapX, isCssCoveredSpaceValue),\n    \"data-gap-y\": serializeStaticThemeValue(gapY, isCssCoveredSpaceValue),\n    \"data-align\": serializeStaticThemeValue(align, isCssCoveredAlignValue),\n    \"data-justify\": serializeStaticThemeValue(justify, isCssCoveredJustifyValue),\n    \"data-auto-fit\": serializeValueIf(autoFit, isCssCoveredAutoFitValue),\n    style: withBoxLayoutStyle(layoutStyle, userStyle),\n  });\n  const keyedChildren = (\n    <For\n      each={() => toChildArray(children)}\n      by={(child, index) => (isJsxElement(child) && child.key != null ? child.key : index)}\n    >\n      {(child) => child as never}\n    </For>\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}>{keyedChildren}</span>;\n  }\n\n  return <div {...finalProps}>{keyedChildren}</div>;\n}\n"],"mappings":"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"}

package/dist/grid/grid.types.d.ts

@@ -0,0 +1,40 @@
+import { BoxLayoutOwnProps, LayoutResponsive } from "../box/box.types.js";
+import { JSXElement, Ref } from "@askrjs/askr/foundations";
+
+//#region src/components/grid/grid.types.d.ts
+type GridOwnProps = BoxLayoutOwnProps & {
+  areas?: LayoutResponsive<string>;
+  columns?: LayoutResponsive<number | string>;
+  rows?: LayoutResponsive<number | string>;
+  flow?: LayoutResponsive<string>;
+  gap?: LayoutResponsive<string | number>;
+  gapX?: LayoutResponsive<string | number>;
+  gapY?: LayoutResponsive<string | number>;
+  align?: LayoutResponsive<string>;
+  justify?: LayoutResponsive<string>; /** Compatibility helper for auto-fit grids. */
+  minItemWidth?: string; /** Compatibility helper for auto-fit grids. */
+  autoFit?: boolean;
+  as?: "div" | "span";
+  children?: unknown;
+};
+type GridNativeProps = Omit<JSX.IntrinsicElements["div"], "children" | "ref"> & GridOwnProps & {
+  as?: "div";
+  asChild?: false;
+  ref?: Ref<HTMLDivElement>;
+};
+type GridSpanProps = Omit<JSX.IntrinsicElements["span"], "children" | "ref"> & GridOwnProps & {
+  as: "span";
+  asChild?: false;
+  ref?: Ref<HTMLSpanElement>;
+};
+type GridAsChildProps = Omit<GridOwnProps, "as"> & {
+  asChild: true;
+  children: JSXElement;
+  ref?: Ref<unknown>;
+  style?: JSX.IntrinsicElements["div"]["style"];
+};
+type GridDivProps = GridNativeProps;
+type GridProps = GridDivProps | GridSpanProps | GridAsChildProps;
+//#endregion
+export { GridAsChildProps, GridDivProps, GridNativeProps, GridOwnProps, GridProps, GridSpanProps };
+//# sourceMappingURL=grid.types.d.ts.map

package/dist/grid/index.d.ts

@@ -0,0 +1,2 @@
+import { GridAsChildProps, GridDivProps, GridNativeProps, GridOwnProps, GridProps, GridSpanProps } from "./grid.types.js";
+import { Grid } from "./grid.js";

package/dist/header/header.d.ts

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

package/dist/header/header.js

@@ -0,0 +1,18 @@
+import { classes } from "../_internal/classes.js";
+import { jsx } from "@askrjs/askr/jsx-runtime";
+//#region src/components/header/header.tsx
+function Header(props) {
+	const { children, position = "static", ref, class: className, ...rest } = props;
+	return /* @__PURE__ */ jsx("header", {
+		...rest,
+		ref,
+		class: classes("header", className),
+		"data-slot": "header",
+		"data-position": position,
+		children
+	});
+}
+//#endregion
+export { Header };
+
+//# sourceMappingURL=header.js.map

package/dist/header/header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"header.js","names":[],"sources":["../../src/components/header/header.tsx"],"sourcesContent":["import { classes } from \"../_internal/classes\";\nimport type { HeaderProps } from \"./header.types\";\n\nexport function Header(props: HeaderProps): JSX.Element {\n  const { children, position = \"static\", ref, class: className, ...rest } = props;\n\n  return (\n    <header\n      {...rest}\n      ref={ref}\n      class={classes(\"header\", className)}\n      data-slot=\"header\"\n      data-position={position}\n    >\n      {children}\n    </header>\n  );\n}\n"],"mappings":";;;AAGA,SAAgB,OAAO,OAAiC;CACtD,MAAM,EAAE,UAAU,WAAW,UAAU,KAAK,OAAO,WAAW,GAAG,SAAS;AAE1E,QACE,oBAAC,UAAD;EACE,GAAI;EACC;EACL,OAAO,QAAQ,UAAU,UAAU;EACnC,aAAU;EACV,iBAAe;EAEd;EACM,CAAA"}

package/dist/header/header.types.d.ts

@@ -0,0 +1,9 @@
+//#region src/components/header/header.types.d.ts
+type HeaderPosition = "static" | "relative" | "sticky" | "absolute" | "fixed";
+type HeaderProps = Omit<JSX.IntrinsicElements["header"], "children"> & {
+  position?: HeaderPosition;
+  children?: unknown;
+};
+//#endregion
+export { HeaderPosition, HeaderProps };
+//# sourceMappingURL=header.types.d.ts.map

package/dist/inline/index.d.ts

@@ -0,0 +1,7 @@
+import { FlexAsChildProps, FlexDivProps, FlexNativeProps, FlexOwnProps, FlexProps, FlexSpanProps, InlineProps } from "../flex/flex.types.js";
+import { Flex } from "../flex/flex.js";
+//#region src/components/inline/index.d.ts
+declare function Inline(props: InlineProps): JSX.Element;
+//#endregion
+export { Inline };
+//# sourceMappingURL=index.d.ts.map

package/dist/inline/index.js

@@ -0,0 +1,13 @@
+import { Flex } from "../flex/flex.js";
+import { jsx } from "@askrjs/askr/jsx-runtime";
+//#region src/components/inline/index.tsx
+function Inline(props) {
+	return /* @__PURE__ */ jsx(Flex, {
+		...props,
+		"data-slot": "inline"
+	});
+}
+//#endregion
+export { Inline };
+
+//# sourceMappingURL=index.js.map

package/dist/inline/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/components/inline/index.tsx"],"sourcesContent":["import { Flex } from \"../flex\";\nimport type { InlineProps } from \"../flex\";\n\nexport function Inline(props: InlineProps): JSX.Element {\n  return <Flex {...(props as Record<string, unknown>)} data-slot=\"inline\" />;\n}\n\nexport { Flex };\nexport {\n  FLEX_A11Y_CONTRACT,\n  FLEX_A11Y_CONTRACT as INLINE_A11Y_CONTRACT,\n  type FlexA11yContract,\n  type FlexA11yContract as InlineA11yContract,\n} from \"../flex/flex.a11y\";\nexport type {\n  FlexProps,\n  FlexOwnProps,\n  FlexNativeProps,\n  FlexDivProps,\n  FlexSpanProps,\n  FlexAsChildProps,\n  FlexProps as InlineProps,\n  FlexOwnProps as InlineOwnProps,\n  FlexNativeProps as InlineNativeProps,\n  FlexDivProps as InlineDivProps,\n  FlexSpanProps as InlineSpanProps,\n  FlexAsChildProps as InlineAsChildProps,\n} from \"../flex/flex.types\";\n"],"mappings":";;;AAGA,SAAgB,OAAO,OAAiC;AACtD,QAAO,oBAAC,MAAD;EAAM,GAAK;EAAmC,aAAU;EAAW,CAAA"}