asheeui 1.0.0 → 1.1.0

package/dist/components/footer/Footer.d.ts

@@ -0,0 +1,73 @@
+import { ElementType, HTMLAttributes, ReactNode } from 'react';
+import { FooterConfig } from './footer-config';
+/**
+ * One link in the footer.
+ */
+export interface FooterLinkItem {
+    /** Stable identifier for the link. Defaults to its position in the list. */
+    id?: string | number;
+    /** Visible name of the link. */
+    label: ReactNode;
+    /** Destination of the link. */
+    href?: string;
+    /** Content before the label, typically an icon or a social mark. */
+    icon?: ReactNode;
+    /** Whether the link leaves the site, which marks the anchor accordingly. */
+    isExternal?: boolean;
+    /** Component that replaces the anchor for this link only. */
+    component?: ElementType;
+    /** Additional props for that component. */
+    componentProps?: Record<string, unknown>;
+}
+/**
+ * One column of footer navigation.
+ */
+export interface FooterGroup {
+    /** Stable identifier for the group. Defaults to its position in the list. */
+    id?: string | number;
+    /** Title of the column, which also names its navigation landmark. */
+    title: string;
+    /** The links in the column. */
+    links: FooterLinkItem[];
+}
+/**
+ * Substitution applied to every link in the footer.
+ */
+export interface FooterLink {
+    /** Component that replaces the anchor, such as a framework router link. */
+    component?: ElementType;
+    /** Additional props for that component. */
+    props?: Record<string, unknown>;
+}
+type BaseFooterProps = FooterConfig & Omit<HTMLAttributes<HTMLElement>, "color" | "title">;
+/**
+ * Props for the Footer component.
+ */
+export interface FooterProps extends BaseFooterProps {
+    /** Brand content, typically a logo and a product name. */
+    brand?: ReactNode;
+    /** Short description under the brand. */
+    description?: ReactNode;
+    /** The navigation groups. */
+    groups?: FooterGroup[];
+    /** Social links, rendered as a row of icon links under the groups. */
+    social?: FooterLinkItem[];
+    /** Legal links, rendered beside the copyright line. */
+    legal?: FooterLinkItem[];
+    /** The copyright line. */
+    copyright?: ReactNode;
+    /** Action area in the brand column, typically a newsletter signup. */
+    newsletter?: ReactNode;
+    /** Substitution applied to every link the footer renders. */
+    link?: FooterLink;
+    /**
+     * Element to render the footer as.
+     * Defaults to `footer`, which is the contentinfo landmark.
+     *
+     * @default "footer"
+     */
+    as?: ElementType;
+}
+export declare const Footer: import('react').ForwardRefExoticComponent<FooterProps & import('react').RefAttributes<HTMLElement>>;
+export {};
+//# sourceMappingURL=Footer.d.ts.map

package/dist/components/footer/Footer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Footer.d.ts","sourceRoot":"","sources":["../../../src/components/footer/Footer.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAIH,OAAO,EACL,KAAK,WAAW,EAEhB,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAQf,OAAO,EAA0B,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAc5E;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,4EAA4E;IAC5E,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAErB,gCAAgC;IAChC,KAAK,EAAE,SAAS,CAAC;IAEjB,+BAA+B;IAC/B,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,oEAAoE;IACpE,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB,4EAA4E;IAC5E,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,6DAA6D;IAC7D,SAAS,CAAC,EAAE,WAAW,CAAC;IAExB,2CAA2C;IAC3C,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAC1C;AAED;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,6EAA6E;IAC7E,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAErB,qEAAqE;IACrE,KAAK,EAAE,MAAM,CAAC;IAEd,+BAA+B;IAC/B,KAAK,EAAE,cAAc,EAAE,CAAC;CACzB;AAED;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB,2EAA2E;IAC3E,SAAS,CAAC,EAAE,WAAW,CAAC;IAExB,2CAA2C;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACjC;AAED,KAAK,eAAe,GAAG,YAAY,GACjC,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC,CAAC;AAEvD;;GAEG;AACH,MAAM,WAAW,WAAY,SAAQ,eAAe;IAClD,0DAA0D;IAC1D,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB,yCAAyC;IACzC,WAAW,CAAC,EAAE,SAAS,CAAC;IAExB,6BAA6B;IAC7B,MAAM,CAAC,EAAE,WAAW,EAAE,CAAC;IAEvB,sEAAsE;IACtE,MAAM,CAAC,EAAE,cAAc,EAAE,CAAC;IAE1B,uDAAuD;IACvD,KAAK,CAAC,EAAE,cAAc,EAAE,CAAC;IAEzB,0BAA0B;IAC1B,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB,sEAAsE;IACtE,UAAU,CAAC,EAAE,SAAS,CAAC;IAEvB,6DAA6D;IAC7D,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB;;;;;OAKG;IACH,EAAE,CAAC,EAAE,WAAW,CAAC;CAClB;AA6ED,eAAO,MAAM,MAAM,qGAiIlB,CAAC"}

package/dist/components/footer/Footer.js

@@ -0,0 +1,112 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.js";
+import { SPACE_PADDING_Y_CLASS as t } from "../../shared/spacing.js";
+import { useAsheeConfig as n } from "../../libs/context.js";
+import { resolveConfigCascade as r } from "../../utils/resolve-token.js";
+import { Typography as i } from "../typography/Typography.js";
+import { Link as a } from "../link/Link.js";
+import { Container as o } from "../container/Container.js";
+import { FALLBACK_FOOTER_CONFIG as s } from "./footer-config.js";
+import { FOOTER_LINK_CLASS as c, FOOTER_VARIANT_CLASS as l } from "./footer-styles.js";
+import { forwardRef as u } from "react";
+import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
+//#region src/components/footer/Footer.tsx
+function m({ links: e, link: t, className: n }) {
+	return /* @__PURE__ */ f("ul", {
+		className: n,
+		children: e.map((e, n) => /* @__PURE__ */ f("li", { children: /* @__PURE__ */ f(a, {
+			href: e.href,
+			startIcon: e.icon,
+			isExternal: e.isExternal,
+			component: e.component ?? t?.component,
+			componentProps: {
+				...t?.props,
+				...e.componentProps
+			},
+			className: c,
+			children: e.label
+		}) }, e.id ?? n))
+	});
+}
+var h = u(({ brand: a, description: c, groups: u, social: h, legal: g, copyright: _, newsletter: v, link: y, variant: b, spacing: x, contained: S, containerSize: C, as: w, className: T, children: E, ...D }, O) => {
+	let k = n(), A = r({
+		variant: b,
+		spacing: x,
+		contained: S,
+		containerSize: C
+	}, k.components?.footer, s), j = w ?? "footer", M = !!(a || c || v), N = !!(_ || g || h), P = /* @__PURE__ */ p(d, { children: [
+		(M || u && u.length > 0) && /* @__PURE__ */ p("div", {
+			className: "flex flex-col gap-10 lg:flex-row lg:items-start lg:justify-between",
+			children: [M && /* @__PURE__ */ p("div", {
+				className: "flex max-w-sm flex-col gap-3",
+				children: [
+					a && /* @__PURE__ */ f(i, {
+						as: "span",
+						role: "heading-sm",
+						children: a
+					}),
+					c && /* @__PURE__ */ f(i, {
+						role: "body-sm",
+						tone: "muted",
+						children: c
+					}),
+					v
+				]
+			}), u && u.length > 0 && /* @__PURE__ */ f("div", {
+				className: "flex flex-wrap gap-10",
+				children: u.map((e, t) => /* @__PURE__ */ p("nav", {
+					"aria-label": e.title,
+					className: "flex min-w-32 flex-col gap-3",
+					children: [/* @__PURE__ */ f(i, {
+						as: "h2",
+						role: "label",
+						children: e.title
+					}), /* @__PURE__ */ f(m, {
+						links: e.links,
+						link: y,
+						className: "flex flex-col gap-2"
+					})]
+				}, e.id ?? t))
+			})]
+		}),
+		N && /* @__PURE__ */ p("div", {
+			className: "mt-10 flex flex-col gap-4 border-t border-border pt-6 sm:flex-row sm:items-center sm:justify-between",
+			children: [_ && /* @__PURE__ */ f(i, {
+				role: "caption",
+				tone: "muted",
+				children: _
+			}), /* @__PURE__ */ p("div", {
+				className: "flex flex-wrap items-center gap-4",
+				children: [g && g.length > 0 && /* @__PURE__ */ f("nav", {
+					"aria-label": "Legal",
+					children: /* @__PURE__ */ f(m, {
+						links: g,
+						link: y,
+						className: "flex flex-wrap items-center gap-4"
+					})
+				}), h && h.length > 0 && /* @__PURE__ */ f("nav", {
+					"aria-label": "Social",
+					children: /* @__PURE__ */ f(m, {
+						links: h,
+						link: y,
+						className: "flex items-center gap-3"
+					})
+				})]
+			})]
+		}),
+		E
+	] });
+	return /* @__PURE__ */ f(j, {
+		ref: O,
+		className: e(l[A.variant], t[A.spacing], T),
+		...D,
+		children: A.contained ? /* @__PURE__ */ f(o, {
+			size: A.containerSize,
+			children: P
+		}) : P
+	});
+});
+h.displayName = "Footer";
+//#endregion
+export { h as Footer };

package/dist/components/footer/footer-config.d.ts

@@ -0,0 +1,40 @@
+import { Space } from '../../shared';
+import { ContainerSize } from '../container/container-config';
+/**
+ * Surface treatment of the footer.
+ *
+ * - `solid`: the page background, so the footer reads as part of the page.
+ * - `muted`: a subdued band.
+ * - `bordered`: the page background with a separator above it.
+ */
+export type FooterVariant = "solid" | "muted" | "bordered";
+/**
+ * Theme configuration options for the Footer component.
+ *
+ * Set under `components.footer` in the AsheeUI config. Values feed the
+ * component-level fallback tier of the theme cascade.
+ */
+export interface FooterConfig {
+    /** Surface treatment. @default "bordered" */
+    variant?: FooterVariant;
+    /** Vertical padding of the footer. @default "lg" */
+    spacing?: Space;
+    /** Whether the footer wraps its content in a `Container`. @default true */
+    contained?: boolean;
+    /** Maximum content width of the footer. @default "lg" */
+    containerSize?: ContainerSize;
+}
+/**
+ * Default config values registered for the Footer component.
+ */
+export declare const defaultFooterConfig: FooterConfig;
+declare module "../../libs/registry" {
+    interface ComponentTypeConfigRegistry {
+        footer: FooterConfig;
+    }
+}
+/**
+ * Hard fallback values used when no config tier provides a value.
+ */
+export declare const FALLBACK_FOOTER_CONFIG: Required<FooterConfig>;
+//# sourceMappingURL=footer-config.d.ts.map

package/dist/components/footer/footer-config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"footer-config.d.ts","sourceRoot":"","sources":["../../../src/components/footer/footer-config.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAEnE;;;;;;GAMG;AACH,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,OAAO,GAAG,UAAU,CAAC;AAE3D;;;;;GAKG;AACH,MAAM,WAAW,YAAY;IAC3B,6CAA6C;IAC7C,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB,oDAAoD;IACpD,OAAO,CAAC,EAAE,KAAK,CAAC;IAEhB,2EAA2E;IAC3E,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,yDAAyD;IACzD,aAAa,CAAC,EAAE,aAAa,CAAC;CAC/B;AAED;;GAEG;AACH,eAAO,MAAM,mBAAmB,EAAE,YAKjC,CAAC;AAEF,OAAO,QAAQ,qBAAqB,CAAC;IACnC,UAAU,2BAA2B;QACnC,MAAM,EAAE,YAAY,CAAC;KACtB;CACF;AAID;;GAEG;AACH,eAAO,MAAM,sBAAsB,EAAE,QAAQ,CAAC,YAAY,CAKzD,CAAC"}

package/dist/components/footer/footer-config.js

@@ -0,0 +1,18 @@
+"use client";
+import { registerComponentDefaults as e } from "../../libs/registry.js";
+//#region src/components/footer/footer-config.ts
+var t = {
+	variant: "bordered",
+	spacing: "lg",
+	contained: !0,
+	containerSize: "lg"
+};
+e("footer", t);
+var n = {
+	variant: "bordered",
+	spacing: "lg",
+	contained: !0,
+	containerSize: "lg"
+};
+//#endregion
+export { n as FALLBACK_FOOTER_CONFIG, t as defaultFooterConfig };

package/dist/components/footer/footer-styles.d.ts

@@ -0,0 +1,22 @@
+import { FooterVariant } from './footer-config';
+/** Surface treatment classes. */
+export declare const FOOTER_VARIANT_CLASS: Record<FooterVariant, string>;
+/** The upper region: the brand column beside the navigation groups. */
+export declare const FOOTER_TOP_CLASS = "flex flex-col gap-10 lg:flex-row lg:items-start lg:justify-between";
+/** The brand column. */
+export declare const FOOTER_BRAND_COLUMN_CLASS = "flex max-w-sm flex-col gap-3";
+/** The navigation groups. */
+export declare const FOOTER_GROUPS_CLASS = "flex flex-wrap gap-10";
+/** One navigation group. */
+export declare const FOOTER_GROUP_CLASS = "flex min-w-32 flex-col gap-3";
+/** A list inside the footer. */
+export declare const FOOTER_LIST_CLASS = "flex flex-col gap-2";
+/** One link inside the footer. */
+export declare const FOOTER_LINK_CLASS = "text-sm text-foreground/70 transition-colors hover:text-foreground";
+/** The lower region: copyright, legal links and social links. */
+export declare const FOOTER_BOTTOM_CLASS = "mt-10 flex flex-col gap-4 border-t border-border pt-6 sm:flex-row sm:items-center sm:justify-between";
+/** The legal and social link rows. */
+export declare const FOOTER_BOTTOM_LINKS_CLASS = "flex flex-wrap items-center gap-4";
+/** The row of icon links. */
+export declare const FOOTER_SOCIAL_ROW_CLASS = "flex items-center gap-3";
+//# sourceMappingURL=footer-styles.d.ts.map

package/dist/components/footer/footer-styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"footer-styles.d.ts","sourceRoot":"","sources":["../../../src/components/footer/footer-styles.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAErD,iCAAiC;AACjC,eAAO,MAAM,oBAAoB,EAAE,MAAM,CAAC,aAAa,EAAE,MAAM,CAI9D,CAAC;AAEF,uEAAuE;AACvE,eAAO,MAAM,gBAAgB,uEACyC,CAAC;AAEvE,wBAAwB;AACxB,eAAO,MAAM,yBAAyB,iCAAiC,CAAC;AAExE,6BAA6B;AAC7B,eAAO,MAAM,mBAAmB,0BAA0B,CAAC;AAE3D,4BAA4B;AAC5B,eAAO,MAAM,kBAAkB,iCAAiC,CAAC;AAEjE,gCAAgC;AAChC,eAAO,MAAM,iBAAiB,wBAAwB,CAAC;AAEvD,kCAAkC;AAClC,eAAO,MAAM,iBAAiB,uEACwC,CAAC;AAEvE,iEAAiE;AACjE,eAAO,MAAM,mBAAmB,yGACwE,CAAC;AAEzG,sCAAsC;AACtC,eAAO,MAAM,yBAAyB,sCAAsC,CAAC;AAE7E,6BAA6B;AAC7B,eAAO,MAAM,uBAAuB,4BAA4B,CAAC"}

package/dist/components/footer/footer-styles.js

@@ -0,0 +1,9 @@
+"use client";
+//#region src/components/footer/footer-styles.ts
+var e = {
+	solid: "bg-background",
+	muted: "bg-secondary/50",
+	bordered: "bg-background border-t border-border"
+}, t = "flex flex-col gap-10 lg:flex-row lg:items-start lg:justify-between", n = "flex max-w-sm flex-col gap-3", r = "flex flex-wrap gap-10", i = "flex min-w-32 flex-col gap-3", a = "flex flex-col gap-2", o = "text-sm text-foreground/70 transition-colors hover:text-foreground", s = "mt-10 flex flex-col gap-4 border-t border-border pt-6 sm:flex-row sm:items-center sm:justify-between", c = "flex flex-wrap items-center gap-4", l = "flex items-center gap-3";
+//#endregion
+export { s as FOOTER_BOTTOM_CLASS, c as FOOTER_BOTTOM_LINKS_CLASS, n as FOOTER_BRAND_COLUMN_CLASS, r as FOOTER_GROUPS_CLASS, i as FOOTER_GROUP_CLASS, o as FOOTER_LINK_CLASS, a as FOOTER_LIST_CLASS, l as FOOTER_SOCIAL_ROW_CLASS, t as FOOTER_TOP_CLASS, e as FOOTER_VARIANT_CLASS };

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

@@ -0,0 +1,3 @@
+export * from './Footer';
+export * from './footer-config';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/footer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/footer/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC"}

package/dist/components/footer/index.js

@@ -0,0 +1,3 @@
+export * from "./Footer.js";
+export * from "./footer-config.js";
+export * from "./footer-styles.js";

package/dist/components/form/Form.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../../src/components/form/Form.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH,OAAO,EACL,KAAK,WAAW,EAChB,KAAK,kBAAkB,EAEvB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAMf,OAAO,EAAE,KAAK,UAAU,EAAwB,MAAM,eAAe,CAAC;AAQtE,KAAK,aAAa,GAAG,UAAU,GAC7B,IAAI,CAAC,kBAAkB,CAAC,eAAe,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,CAAC;AAElE;;GAEG;AACH,MAAM,WAAW,SAAU,SAAQ,aAAa;IAC9C;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;;;OAKG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,WAAW,CAAC;IAExB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAC1C;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0DG;AACH,eAAO,MAAM,IAAI,uGAyFhB,CAAC"}
+{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../../src/components/form/Form.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH,OAAO,EACL,KAAK,WAAW,EAChB,KAAK,kBAAkB,EAEvB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAMf,OAAO,EAAwB,KAAK,UAAU,EAAE,MAAM,eAAe,CAAC;AAQtE,KAAK,aAAa,GAAG,UAAU,GAC7B,IAAI,CAAC,kBAAkB,CAAC,eAAe,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,CAAC;AAElE;;GAEG;AACH,MAAM,WAAW,SAAU,SAAQ,aAAa;IAC9C;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;;;OAKG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,WAAW,CAAC;IAExB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAC1C;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0DG;AACH,eAAO,MAAM,IAAI,uGAyFhB,CAAC"}

package/dist/components/grid/Grid.d.ts

@@ -0,0 +1,71 @@
+import { ElementType, HTMLAttributes } from 'react';
+import { Space } from '../../shared';
+import { GridColumns, GridConfig } from './grid-config';
+type BaseGridProps = GridConfig & Omit<HTMLAttributes<HTMLDivElement>, "color">;
+/**
+ * Props for the Grid component.
+ */
+export interface GridProps extends BaseGridProps {
+    /**
+     * Element to render.
+     * Defaults to a `div`. A grid whose cells are list items should render `ul`
+     * and receive `li` children.
+     *
+     * @default "div"
+     */
+    as?: ElementType;
+    /**
+     * Column count from the smallest viewport upwards.
+     * Resolved through the standard cascade: prop, then
+     * `components.grid.columns`, then the framework fallback of a single column.
+     *
+     * @default 1
+     */
+    columns?: GridColumns;
+    /**
+     * Column count from the `md` breakpoint upwards.
+     */
+    columnsMd?: GridColumns;
+    /**
+     * Column count from the `lg` breakpoint upwards.
+     */
+    columnsLg?: GridColumns;
+    /**
+     * Space between cells, from the shared spacing scale.
+     *
+     * @default "md"
+     */
+    gap?: Space;
+}
+/**
+ * A responsive column grid.
+ *
+ * Grid states its column count per breakpoint rather than as a single number, so
+ * a deck of cards is one column on a phone, two on a tablet and three on a
+ * desktop without writing media queries by hand. A column count left undefined
+ * inherits the value of the next smaller breakpoint through the cascade, so a
+ * grid that never changes shape only has to state `columns`.
+ *
+ * @param props - Grid configuration options and element attributes.
+ * @param props.columns - Columns from the smallest viewport. Defaults to 1.
+ * @param props.columnsMd - Columns from `md` upwards.
+ * @param props.columnsLg - Columns from `lg` upwards.
+ * @param props.gap - Space between cells. Defaults to "md".
+ * @param props.align - Cross-axis alignment. Defaults to "stretch".
+ * @param props.as - Element to render. Defaults to "div".
+ * @returns The rendered grid.
+ *
+ * @example
+ * ```tsx
+ * <Grid columns={1} columnsMd={2} columnsLg={3} gap="lg">
+ *   <Card title="Inbox" description="12 unread" />
+ *   <Card title="Sent" description="348 this month" />
+ *   <Card title="Drafts" description="3 unfinished" />
+ * </Grid>
+ * ```
+ *
+ * @see Stack - The one-axis equivalent.
+ */
+export declare const Grid: import('react').ForwardRefExoticComponent<GridProps & import('react').RefAttributes<HTMLDivElement>>;
+export {};
+//# sourceMappingURL=Grid.d.ts.map

package/dist/components/grid/Grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../../src/components/grid/Grid.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAIH,OAAO,EAAE,KAAK,WAAW,EAAc,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAE1E,OAAO,EAAmB,KAAK,KAAK,EAAE,MAAM,cAAc,CAAC;AAG3D,OAAO,EAGL,KAAK,WAAW,EAChB,KAAK,UAAU,EAChB,MAAM,eAAe,CAAC;AASvB,KAAK,aAAa,GAAG,UAAU,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,CAAC;AAEhF;;GAEG;AACH,MAAM,WAAW,SAAU,SAAQ,aAAa;IAC9C;;;;;;OAMG;IACH,EAAE,CAAC,EAAE,WAAW,CAAC;IAEjB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;OAEG;IACH,SAAS,CAAC,EAAE,WAAW,CAAC;IAExB;;OAEG;IACH,SAAS,CAAC,EAAE,WAAW,CAAC;IAExB;;;;OAIG;IACH,GAAG,CAAC,EAAE,KAAK,CAAC;CACb;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,eAAO,MAAM,IAAI,sGA+DhB,CAAC"}

package/dist/components/grid/Grid.js

@@ -0,0 +1,23 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.js";
+import { SPACE_GAP_CLASS as t } from "../../shared/spacing.js";
+import { useAsheeConfig as n } from "../../libs/context.js";
+import { resolveCascade as r } from "../../utils/resolve-token.js";
+import { FALLBACK_GRID_CONFIG as i } from "./grid-config.js";
+import { GRID_ALIGN_CLASS as a, GRID_BASE_CLASS as o, GRID_COLUMNS_CLASS as s, GRID_COLUMNS_LG_CLASS as c, GRID_COLUMNS_MD_CLASS as l } from "./grid-styles.js";
+import { forwardRef as u } from "react";
+import { jsx as d } from "react/jsx-runtime";
+//#region src/components/grid/Grid.tsx
+var f = u(({ as: u, columns: f, columnsMd: p, columnsLg: m, gap: h, align: g, className: _, children: v, ...y }, b) => {
+	let x = n().components?.grid, S = r(f, x?.columns, void 0, i.columns), C = p ?? x?.columnsMd, w = m ?? x?.columnsLg, T = r(h, x?.gap, void 0, i.gap), E = r(g, x?.align, void 0, i.align);
+	return /* @__PURE__ */ d(u ?? "div", {
+		ref: b,
+		className: e(o, s[S], C !== void 0 && l[C], w !== void 0 && c[w], a[E], t[T], _),
+		...y,
+		children: v
+	});
+});
+f.displayName = "Grid";
+//#endregion
+export { f as Grid };

package/dist/components/grid/grid-config.d.ts

@@ -0,0 +1,63 @@
+import { Space } from '../../shared';
+/**
+ * Column counts a grid can declare.
+ * Only the counts the framework's own layouts use are offered, so the class
+ * map stays small and every entry is a complete literal.
+ */
+export type GridColumns = 1 | 2 | 3 | 4 | 6 | 12;
+/**
+ * Cross-axis alignment of the grid's items.
+ * `stretch` makes every cell fill the row height, which is what a row of cards
+ * wants.
+ */
+export type GridAlign = "start" | "center" | "end" | "stretch";
+/**
+ * Theme configuration options for the Grid component.
+ *
+ * Set under `components.grid` in the AsheeUI config. Values feed the
+ * component-level fallback tier of the theme cascade.
+ */
+export interface GridConfig {
+    /**
+     * Column count from the smallest viewport upwards.
+     *
+     * @default 1
+     */
+    columns?: GridColumns;
+    /**
+     * Column count from the `md` breakpoint upwards.
+     */
+    columnsMd?: GridColumns;
+    /**
+     * Column count from the `lg` breakpoint upwards.
+     */
+    columnsLg?: GridColumns;
+    /**
+     * Space between cells.
+     *
+     * @default "md"
+     */
+    gap?: Space;
+    /**
+     * Cross-axis alignment of the cells.
+     *
+     * @default "stretch"
+     */
+    align?: GridAlign;
+}
+/**
+ * Default config values registered for the Grid component.
+ */
+export declare const defaultGridConfig: GridConfig;
+declare module "../../libs/registry" {
+    interface ComponentTypeConfigRegistry {
+        grid: GridConfig;
+    }
+}
+/**
+ * Hard fallback values used when no config tier provides a value.
+ * `columnsMd` and `columnsLg` have no fallback on purpose: an unstated
+ * breakpoint inherits the value below it rather than forcing a column count.
+ */
+export declare const FALLBACK_GRID_CONFIG: Required<Pick<GridConfig, "columns" | "gap" | "align">>;
+//# sourceMappingURL=grid-config.d.ts.map

package/dist/components/grid/grid-config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-config.d.ts","sourceRoot":"","sources":["../../../src/components/grid/grid-config.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AAE1C;;;;GAIG;AACH,MAAM,MAAM,WAAW,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC;AAEjD;;;;GAIG;AACH,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;AAE/D;;;;;GAKG;AACH,MAAM,WAAW,UAAU;IACzB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;OAEG;IACH,SAAS,CAAC,EAAE,WAAW,CAAC;IAExB;;OAEG;IACH,SAAS,CAAC,EAAE,WAAW,CAAC;IAExB;;;;OAIG;IACH,GAAG,CAAC,EAAE,KAAK,CAAC;IAEZ;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAED;;GAEG;AACH,eAAO,MAAM,iBAAiB,EAAE,UAI/B,CAAC;AAEF,OAAO,QAAQ,qBAAqB,CAAC;IACnC,UAAU,2BAA2B;QACnC,IAAI,EAAE,UAAU,CAAC;KAClB;CACF;AAID;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,EAAE,QAAQ,CACzC,IAAI,CAAC,UAAU,EAAE,SAAS,GAAG,KAAK,GAAG,OAAO,CAAC,CAK9C,CAAC"}

package/dist/components/grid/grid-config.js

@@ -0,0 +1,16 @@
+"use client";
+import { registerComponentDefaults as e } from "../../libs/registry.js";
+//#region src/components/grid/grid-config.ts
+var t = {
+	columns: 1,
+	gap: "md",
+	align: "stretch"
+};
+e("grid", t);
+var n = {
+	columns: 1,
+	gap: "md",
+	align: "stretch"
+};
+//#endregion
+export { n as FALLBACK_GRID_CONFIG, t as defaultGridConfig };

package/dist/components/grid/grid-styles.d.ts

@@ -0,0 +1,12 @@
+import { GridAlign, GridColumns } from './grid-config';
+/** Column classes from the smallest viewport upwards. */
+export declare const GRID_COLUMNS_CLASS: Record<GridColumns, string>;
+/** Column classes from the `md` breakpoint upwards. */
+export declare const GRID_COLUMNS_MD_CLASS: Record<GridColumns, string>;
+/** Column classes from the `lg` breakpoint upwards. */
+export declare const GRID_COLUMNS_LG_CLASS: Record<GridColumns, string>;
+/** Cross-axis alignment classes. */
+export declare const GRID_ALIGN_CLASS: Record<GridAlign, string>;
+/** Shared base classes for every grid. */
+export declare const GRID_BASE_CLASS = "grid w-full min-w-0";
+//# sourceMappingURL=grid-styles.d.ts.map

package/dist/components/grid/grid-styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-styles.d.ts","sourceRoot":"","sources":["../../../src/components/grid/grid-styles.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5D,yDAAyD;AACzD,eAAO,MAAM,kBAAkB,EAAE,MAAM,CAAC,WAAW,EAAE,MAAM,CAO1D,CAAC;AAEF,uDAAuD;AACvD,eAAO,MAAM,qBAAqB,EAAE,MAAM,CAAC,WAAW,EAAE,MAAM,CAO7D,CAAC;AAEF,uDAAuD;AACvD,eAAO,MAAM,qBAAqB,EAAE,MAAM,CAAC,WAAW,EAAE,MAAM,CAO7D,CAAC;AAEF,oCAAoC;AACpC,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAKtD,CAAC;AAEF,0CAA0C;AAC1C,eAAO,MAAM,eAAe,wBAAwB,CAAC"}

package/dist/components/grid/grid-styles.js

@@ -0,0 +1,31 @@
+"use client";
+//#region src/components/grid/grid-styles.ts
+var e = {
+	1: "grid-cols-1",
+	2: "grid-cols-2",
+	3: "grid-cols-3",
+	4: "grid-cols-4",
+	6: "grid-cols-6",
+	12: "grid-cols-12"
+}, t = {
+	1: "md:grid-cols-1",
+	2: "md:grid-cols-2",
+	3: "md:grid-cols-3",
+	4: "md:grid-cols-4",
+	6: "md:grid-cols-6",
+	12: "md:grid-cols-12"
+}, n = {
+	1: "lg:grid-cols-1",
+	2: "lg:grid-cols-2",
+	3: "lg:grid-cols-3",
+	4: "lg:grid-cols-4",
+	6: "lg:grid-cols-6",
+	12: "lg:grid-cols-12"
+}, r = {
+	start: "items-start",
+	center: "items-center",
+	end: "items-end",
+	stretch: "items-stretch"
+}, i = "grid w-full min-w-0";
+//#endregion
+export { r as GRID_ALIGN_CLASS, i as GRID_BASE_CLASS, e as GRID_COLUMNS_CLASS, n as GRID_COLUMNS_LG_CLASS, t as GRID_COLUMNS_MD_CLASS };

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

@@ -0,0 +1,3 @@
+export * from './Grid';
+export * from './grid-config';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/grid/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/grid/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC"}

package/dist/components/grid/index.js

@@ -0,0 +1,3 @@
+export * from "./Grid.js";
+export * from "./grid-config.js";
+export * from "./grid-styles.js";

package/dist/components/hero/Hero.d.ts

@@ -0,0 +1,90 @@
+import { ElementType, HTMLAttributes, ReactNode } from 'react';
+import { ActionConfig } from '../../shared';
+import { HeroConfig } from './hero-config';
+type BaseHeroProps = HeroConfig & Omit<HTMLAttributes<HTMLElement>, "color" | "title">;
+/**
+ * Props for the Hero component.
+ */
+export interface HeroProps extends BaseHeroProps {
+    /**
+     * Short label above the title, for example the product category.
+     */
+    eyebrow?: ReactNode;
+    /**
+     * The headline.
+     */
+    title: ReactNode;
+    /**
+     * Supporting sentence under the headline.
+     */
+    description?: ReactNode;
+    /**
+     * The emphasised action of the hero.
+     */
+    primaryAction?: ActionConfig;
+    /**
+     * The supporting action of the hero.
+     */
+    secondaryAction?: ActionConfig;
+    /**
+     * Content placed beside the text column from the `lg` breakpoint upwards,
+     * typically an illustration or a product screenshot.
+     */
+    media?: ReactNode;
+    /**
+     * Element to render the hero band as.
+     * Defaults to `section`.
+     *
+     * @default "section"
+     */
+    as?: ElementType;
+    /**
+     * Content below the actions, for example a row of customer logos.
+     */
+    children?: ReactNode;
+}
+/**
+ * The leading statement of a page.
+ *
+ * Hero places an eyebrow, a headline, a description and up to two configured
+ * actions, with media beside them when the consumer provides any. It stays a
+ * single component rather than a set of headline, subtitle and action
+ * components, because the arrangement between them is the point.
+ *
+ * The hero is a `section` landmark and is named by its own heading, so a reader
+ * navigating by region hears the headline rather than an unnamed region.
+ *
+ * @param props - Hero configuration options and element attributes.
+ * @param props.title - The headline.
+ * @param props.eyebrow - Short label above the headline.
+ * @param props.description - Supporting sentence under the headline.
+ * @param props.primaryAction - The emphasised action.
+ * @param props.secondaryAction - The supporting action.
+ * @param props.media - Content beside the text column.
+ * @param props.align - Text alignment. Defaults to "start".
+ * @param props.spacing - Vertical padding. Defaults to "xl".
+ * @param props.background - Background treatment. Defaults to "none".
+ * @param props.mediaPosition - Side the media occupies. Defaults to "end".
+ * @param props.containerSize - Maximum content width. Defaults to "lg".
+ * @param props.contained - Respect the framework's width and gutter.
+ * Defaults to true.
+ * @param props.as - Element to render. Defaults to "section".
+ * @returns The rendered hero.
+ *
+ * @example
+ * ```tsx
+ * <Hero
+ *   eyebrow="Everything in one place"
+ *   title="Run your campaigns from a single workspace"
+ *   description="Messages, templates and results, without switching tools."
+ *   primaryAction={{ label: "Start free", href: "/signup" }}
+ *   media={<Image src="/dashboard.png" alt="The campaign dashboard" />}
+ * />
+ * ```
+ *
+ * @see Section - The band a hero is built on.
+ * @see CTA - The closing band of the same page.
+ */
+export declare const Hero: import('react').ForwardRefExoticComponent<HeroProps & import('react').RefAttributes<HTMLElement>>;
+export {};
+//# sourceMappingURL=Hero.d.ts.map