asheeui 0.7.0 → 1.1.0

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Hero.d.ts","sourceRoot":"","sources":["../../../src/components/hero/Hero.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAIH,OAAO,EACL,KAAK,WAAW,EAEhB,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAOjD,OAAO,EAAwB,KAAK,UAAU,EAAE,MAAM,eAAe,CAAC;AAUtE,KAAK,aAAa,GAAG,UAAU,GAC7B,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC,CAAC;AAEvD;;GAEG;AACH,MAAM,WAAW,SAAU,SAAQ,aAAa;IAC9C;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IAExB;;OAEG;IACH,aAAa,CAAC,EAAE,YAAY,CAAC;IAE7B;;OAEG;IACH,eAAe,CAAC,EAAE,YAAY,CAAC;IAE/B;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;;;OAKG;IACH,EAAE,CAAC,EAAE,WAAW,CAAC;IAEjB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,eAAO,MAAM,IAAI,mGAuFhB,CAAC"}

package/dist/components/hero/Hero.js

@@ -0,0 +1,63 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.js";
+import { useAsheeConfig as t } from "../../libs/context.js";
+import { resolveConfigCascade as n } from "../../utils/resolve-token.js";
+import { SectionHeading as r } from "../section-kit/SectionHeading.js";
+import { Container as i } from "../container/Container.js";
+import { Section as a } from "../section/Section.js";
+import { ActionGroup as o } from "../section-kit/ActionGroup.js";
+import { FALLBACK_HERO_CONFIG as s } from "./hero-config.js";
+import { HERO_LAYOUT_CLASS as c, HERO_MEDIA_CLASS as l, HERO_TEXT_COLUMN_CLASS as u } from "./hero-styles.js";
+import { forwardRef as d } from "react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+//#region src/components/hero/Hero.tsx
+var m = d(({ eyebrow: d, title: m, description: h, primaryAction: g, secondaryAction: _, media: v, align: y, spacing: b, background: x, mediaPosition: S, containerSize: C, contained: w, as: T, className: E, children: D, ...O }, k) => {
+	let A = t(), j = n({
+		align: y,
+		spacing: b,
+		background: x,
+		mediaPosition: S,
+		containerSize: C,
+		contained: w
+	}, A.components?.hero, s), M = j.align === "center", N = /* @__PURE__ */ p("div", {
+		className: e(u, M && "items-center text-center", !v && "max-w-2xl"),
+		children: [
+			/* @__PURE__ */ f(r, {
+				eyebrow: d,
+				title: m,
+				description: h,
+				align: j.align,
+				size: "xl"
+			}),
+			/* @__PURE__ */ f(o, {
+				primaryAction: g,
+				secondaryAction: _,
+				align: j.align
+			}),
+			D
+		]
+	}), P = v ? /* @__PURE__ */ p("div", {
+		className: c,
+		children: [N, /* @__PURE__ */ f("div", {
+			className: e(l, j.mediaPosition === "start" && "lg:order-first"),
+			children: v
+		})]
+	}) : N;
+	return /* @__PURE__ */ f(a, {
+		ref: k,
+		as: T,
+		spacing: j.spacing,
+		background: j.background,
+		contained: !1,
+		className: E,
+		...O,
+		children: j.contained ? /* @__PURE__ */ f(i, {
+			size: j.containerSize,
+			children: P
+		}) : P
+	});
+});
+m.displayName = "Hero";
+//#endregion
+export { m as Hero };

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

@@ -0,0 +1,71 @@
+import { Space } from '../../shared';
+import { ContainerSize } from '../container/container-config';
+import { SectionBackground } from '../section/section-config';
+/**
+ * Horizontal alignment of a hero's text column.
+ */
+export type HeroAlign = "start" | "center";
+/**
+ * Side the media occupies on a wide screen.
+ */
+export type HeroMediaPosition = "end" | "start";
+/**
+ * Theme configuration options for the Hero component.
+ *
+ * Set under `components.hero` in the AsheeUI config. Values feed the
+ * component-level fallback tier of the theme cascade.
+ */
+export interface HeroConfig {
+    /**
+     * Alignment of the text column.
+     *
+     * @default "start"
+     */
+    align?: HeroAlign;
+    /**
+     * Vertical padding of the hero band.
+     *
+     * @default "xl"
+     */
+    spacing?: Space;
+    /**
+     * Background treatment of the hero band.
+     *
+     * @default "none"
+     */
+    background?: SectionBackground;
+    /**
+     * Side the media occupies from the `lg` breakpoint upwards.
+     *
+     * @default "end"
+     */
+    mediaPosition?: HeroMediaPosition;
+    /**
+     * Maximum content width of the hero.
+     *
+     * @default "lg"
+     */
+    containerSize?: ContainerSize;
+    /**
+     * Whether the hero wraps its content in a {@link Container}.
+     * The hero is contained automatically, so the framework's width and gutter
+     * apply; a consumer turns this off to nest the hero in its own layout.
+     *
+     * @default true
+     */
+    contained?: boolean;
+}
+/**
+ * Default config values registered for the Hero component.
+ */
+export declare const defaultHeroConfig: HeroConfig;
+declare module "../../libs/registry" {
+    interface ComponentTypeConfigRegistry {
+        hero: HeroConfig;
+    }
+}
+/**
+ * Hard fallback values used when no config tier provides a value.
+ */
+export declare const FALLBACK_HERO_CONFIG: Required<HeroConfig>;
+//# sourceMappingURL=hero-config.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hero-config.d.ts","sourceRoot":"","sources":["../../../src/components/hero/hero-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;AACnE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAEnE;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;AAE3C;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,KAAK,GAAG,OAAO,CAAC;AAEhD;;;;;GAKG;AACH,MAAM,WAAW,UAAU;IACzB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;;OAIG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC;IAEhB;;;;OAIG;IACH,UAAU,CAAC,EAAE,iBAAiB,CAAC;IAE/B;;;;OAIG;IACH,aAAa,CAAC,EAAE,iBAAiB,CAAC;IAElC;;;;OAIG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;IAE9B;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;GAEG;AACH,eAAO,MAAM,iBAAiB,EAAE,UAO/B,CAAC;AAEF,OAAO,QAAQ,qBAAqB,CAAC;IACnC,UAAU,2BAA2B;QACnC,IAAI,EAAE,UAAU,CAAC;KAClB;CACF;AAID;;GAEG;AACH,eAAO,MAAM,oBAAoB,EAAE,QAAQ,CAAC,UAAU,CAOrD,CAAC"}

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

@@ -0,0 +1,22 @@
+"use client";
+import { registerComponentDefaults as e } from "../../libs/registry.js";
+//#region src/components/hero/hero-config.ts
+var t = {
+	align: "start",
+	spacing: "xl",
+	background: "none",
+	mediaPosition: "end",
+	containerSize: "lg",
+	contained: !0
+};
+e("hero", t);
+var n = {
+	align: "start",
+	spacing: "xl",
+	background: "none",
+	mediaPosition: "end",
+	containerSize: "lg",
+	contained: !0
+};
+//#endregion
+export { n as FALLBACK_HERO_CONFIG, t as defaultHeroConfig };

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

@@ -0,0 +1,19 @@
+/**
+ * Hero component styles for AsheeUI.
+ * This file provides the static class mappings for the Hero pattern: the
+ * two-column arrangement used when the hero has media, and the measure of the
+ * text column.
+ */
+/** The grid that places the text column and the media beside each other. */
+export declare const HERO_LAYOUT_CLASS = "grid items-center gap-10 lg:grid-cols-2";
+/** The text column. */
+export declare const HERO_TEXT_COLUMN_CLASS = "flex min-w-0 flex-col gap-6";
+/** Puts the media column first from the `lg` breakpoint upwards. */
+export declare const HERO_MEDIA_FIRST_CLASS = "lg:order-first";
+/** The media column. */
+export declare const HERO_MEDIA_CLASS = "min-w-0";
+/** Added to the text column when the hero is centred. */
+export declare const HERO_CENTERED_CLASS = "items-center text-center";
+/** Measure of the description when the hero stands alone. */
+export declare const HERO_DESCRIPTION_MEASURE_CLASS = "max-w-2xl";
+//# sourceMappingURL=hero-styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hero-styles.d.ts","sourceRoot":"","sources":["../../../src/components/hero/hero-styles.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,4EAA4E;AAC5E,eAAO,MAAM,iBAAiB,4CAA4C,CAAC;AAE3E,uBAAuB;AACvB,eAAO,MAAM,sBAAsB,gCAAgC,CAAC;AAEpE,oEAAoE;AACpE,eAAO,MAAM,sBAAsB,mBAAmB,CAAC;AAEvD,wBAAwB;AACxB,eAAO,MAAM,gBAAgB,YAAY,CAAC;AAE1C,yDAAyD;AACzD,eAAO,MAAM,mBAAmB,6BAA6B,CAAC;AAE9D,6DAA6D;AAC7D,eAAO,MAAM,8BAA8B,cAAc,CAAC"}

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

@@ -0,0 +1,5 @@
+"use client";
+//#region src/components/hero/hero-styles.ts
+var e = "grid items-center gap-10 lg:grid-cols-2", t = "flex min-w-0 flex-col gap-6", n = "lg:order-first", r = "min-w-0", i = "items-center text-center", a = "max-w-2xl";
+//#endregion
+export { i as HERO_CENTERED_CLASS, a as HERO_DESCRIPTION_MEASURE_CLASS, e as HERO_LAYOUT_CLASS, r as HERO_MEDIA_CLASS, n as HERO_MEDIA_FIRST_CLASS, t as HERO_TEXT_COLUMN_CLASS };

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

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

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

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

package/dist/components/hero/index.js

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

package/dist/components/image/Image.d.ts

@@ -17,14 +17,13 @@ export interface ImageProps extends BaseImageProps {
      */
     component?: ElementType;
     /**
-     * Additional props to pass to the custom image component
-     * (e.g. `{ priority: true, sizes: "..." }`).
+     * Additional props for `component` (for example `{ priority: true }`).
      *
      * If `component` is set and neither `width`/`height` nor `fill`
      * are provided here, `fill: true` is applied automatically since
      * this component is container/ratio driven.
      */
-    props?: Record<string, unknown>;
+    componentProps?: Record<string, unknown>;
 }
 /**
  * An image element with ratio locking, object-fit control, radius
@@ -51,7 +50,7 @@ export interface ImageProps extends BaseImageProps {
  * @param props.showSkeleton - Loading placeholder. Defaults to true.
  * @param props.className - Extra classes for the image element.
  * @param props.component - Custom image component.
- * @param props.props - Props forwarded to the image component.
+ * @param props.componentProps - Props forwarded to the image component.
  * @param props.src - The image source URL.
  * @param props.onLoad - Callback fired when the image loads.
  * @param props.onError - Callback fired when the image fails to load.
@@ -83,7 +82,7 @@ export interface ImageProps extends BaseImageProps {
  *   src="/hero.png"
  *   alt="Hero image"
  *   component={NextImage}
- *   props={{ priority: true, sizes: "100vw" }}
+ *   componentProps={{ priority: true, sizes: "100vw" }}
  * />
  * ```
  *

package/dist/components/image/Image.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../../../src/components/image/Image.tsx"],"names":[],"mappings":"AAUA,OAAO,EACL,KAAK,WAAW,EAEhB,KAAK,iBAAiB,EAKvB,MAAM,OAAO,CAAC;AASf,OAAO,EAEL,KAAK,WAAW,EAGjB,MAAM,gBAAgB,CAAC;AAGxB,KAAK,cAAc,GAAG,WAAW,GAAG,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;AAExE;;GAEG;AACH,MAAM,WAAW,UAAW,SAAQ,cAAc;IAChD;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;;OAIG;IACH,SAAS,CAAC,EAAE,WAAW,CAAC;IAExB;;;;;;;OAOG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACjC;AAUD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+DG;AACH,eAAO,MAAM,KAAK,yGAsNjB,CAAC"}
+{"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../../../src/components/image/Image.tsx"],"names":[],"mappings":"AAUA,OAAO,EACL,KAAK,WAAW,EAEhB,KAAK,iBAAiB,EAKvB,MAAM,OAAO,CAAC;AASf,OAAO,EAEL,KAAK,WAAW,EAGjB,MAAM,gBAAgB,CAAC;AAGxB,KAAK,cAAc,GAAG,WAAW,GAAG,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;AAExE;;GAEG;AACH,MAAM,WAAW,UAAW,SAAQ,cAAc;IAChD;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;;OAIG;IACH,SAAS,CAAC,EAAE,WAAW,CAAC;IAExB;;;;;;OAMG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAC1C;AAUD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+DG;AACH,eAAO,MAAM,KAAK,yGAsNjB,CAAC"}

package/dist/components/image/Image.js

@@ -1,8 +1,8 @@
 "use client";
 "use client";
 import { cn as e } from "../../utils/cn.js";
-import { useAsheeConfig as t } from "../../libs/context.js";
-import { RADIUS_CLASS as n } from "../../shared/radius.js";
+import { RADIUS_CLASS as t } from "../../shared/radius.js";
+import { useAsheeConfig as n } from "../../libs/context.js";
 import { resolveCascade as r, resolveClassKey as i, resolveRadiusKey as a } from "../../utils/resolve-token.js";
 import { FALLBACK_IMAGE_CONFIG as o } from "./image-config.js";
 import { IMAGE_FIT_CLASS as s, IMAGE_RATIO_CLASS as c } from "./image-styles.js";
@@ -12,8 +12,8 @@ import { jsx as p, jsxs as m } from "react/jsx-runtime";
 function h(e) {
 	return typeof e == "string" && e.trim().length > 0;
 }
-var g = l(({ alt: l, fit: g, ratio: _, radius: v, fallbackSrc: y, showSkeleton: ee, loading: b, src: x, className: S, onLoad: C, onError: w, component: T, props: E, ...D }, O) => {
-	let k = t(), A = k.components?.image, [j, M] = f(!1), [N, P] = f(x), F = d(null);
+var g = l(({ alt: l, fit: g, ratio: _, radius: v, fallbackSrc: y, showSkeleton: ee, loading: b, src: x, className: S, onLoad: C, onError: w, component: T, componentProps: E, ...D }, O) => {
+	let k = n(), A = k.components?.image, [j, M] = f(!1), [N, P] = f(x), F = d(null);
 	u(() => {
 		P(x), M(!1);
 	}, [x]), u(() => {
@@ -30,7 +30,7 @@ var g = l(({ alt: l, fit: g, ratio: _, radius: v, fallbackSrc: y, showSkeleton:
 		M(!0), w?.(e);
 	}, R = (e) => {
 		F.current = e, typeof O == "function" ? O(e) : O && (O.current = e);
-	}, z = r(g, A?.fit, void 0, o.fit), B = r(_, A?.ratio, void 0, o.ratio), V = a(v, A?.radius, k.defaultRadius, o.radius), H = r(b, A?.loading, void 0, o.loading), U = r(ee, A?.showSkeleton, void 0, o.showSkeleton), W = i(z, s, o.fit), G = i(B, c, o.ratio), K = i(V, n, o.radius), q = T || "img", J = !!T, Y = h(N), X = E?.width !== void 0 || E?.height !== void 0 || E?.fill !== void 0, Z = J && !X ? {
+	}, z = r(g, A?.fit, void 0, o.fit), B = r(_, A?.ratio, void 0, o.ratio), V = a(v, A?.radius, k.defaultRadius, o.radius), H = r(b, A?.loading, void 0, o.loading), U = r(ee, A?.showSkeleton, void 0, o.showSkeleton), W = i(z, s, o.fit), G = i(B, c, o.ratio), K = i(V, t, o.radius), q = T || "img", J = !!T, Y = h(N), X = E?.width !== void 0 || E?.height !== void 0 || E?.fill !== void 0, Z = J && !X ? {
 		fill: !0,
 		sizes: "100%"
 	} : {}, Q = e("h-full w-full transition-opacity duration-300", W, j ? "opacity-100" : "opacity-0", K, S), $ = { ...E ?? {} };