asheeui 0.7.0 → 1.1.0

package/dist/components/{select/select-styles.js → dropmenu/dropmenu-styles.js}

@@ -1,6 +1,6 @@
 "use client";
 import { FIELD_STATUS_BORDER_CLASS as e } from "../field/field-styles.js";
-//#region src/components/select/select-styles.ts
+//#region src/components/dropmenu/dropmenu-styles.ts
 var t = e;
 //#endregion
 export { t as SELECT_STATUS_BORDER_CLASS };

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/dropmenu/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,mBAAmB,CAAC"}

package/dist/components/dropmenu/index.js

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

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

@@ -0,0 +1,77 @@
+import { ElementType, HTMLAttributes, ReactNode } from 'react';
+import { ActionConfig } from '../../shared';
+import { EmptyStateConfig } from './empty-state-config';
+type BaseEmptyStateProps = EmptyStateConfig & Omit<HTMLAttributes<HTMLDivElement>, "color" | "title">;
+/**
+ * Props for the EmptyState component.
+ */
+export interface EmptyStateProps extends BaseEmptyStateProps {
+    /** Icon shown above the title. */
+    icon?: ReactNode;
+    /** What the region is and, where useful, why it is empty. */
+    title: ReactNode;
+    /** What the reader can do about it. */
+    description?: ReactNode;
+    /** The emphasised action, for example the one that creates the first item. */
+    primaryAction?: ActionConfig;
+    /** The supporting action, typically a link to the documentation. */
+    secondaryAction?: ActionConfig;
+    /**
+     * Live-region role of the state.
+     * Leave it unset for a state that is part of the page's initial markup. Pass
+     * `"status"` or `"alert"` for a state that replaces content after an
+     * asynchronous result, so the change is announced.
+     */
+    role?: "status" | "alert";
+    /**
+     * Element to render.
+     * Defaults to a `div`.
+     *
+     * @default "div"
+     */
+    as?: ElementType;
+    /** Content below the actions. */
+    children?: ReactNode;
+}
+/**
+ * A region with nothing in it.
+ *
+ * EmptyState covers the empty, the "no results" and the failed presentations of
+ * a region. Loading is deliberately not one of them: a loading region is a
+ * `Skeleton` or a `Spinner`, and pretending an in-progress region is empty would
+ * tell the reader the wrong thing.
+ *
+ * The state carries no live-region role of its own, because a state rendered
+ * with the page should not be announced as a change and a state that replaces
+ * content should be. A consumer that renders the state in response to a result
+ * passes `role="status"` or `role="alert"`.
+ *
+ * @param props - EmptyState configuration options and element attributes.
+ * @param props.title - What the region is.
+ * @param props.icon - Icon shown above the title.
+ * @param props.description - What the reader can do about it.
+ * @param props.primaryAction - The emphasised action.
+ * @param props.secondaryAction - The supporting action.
+ * @param props.type - Tone of the state. Defaults to "info".
+ * @param props.size - Density. Defaults to "md".
+ * @param props.panel - Draw the state as a panel. Defaults to false.
+ * @param props.role - Live-region role, for a state that replaces content.
+ * @param props.as - Element to render. Defaults to "div".
+ * @returns The rendered state.
+ *
+ * @example
+ * ```tsx
+ * <EmptyState
+ *   icon={<SearchIcon />}
+ *   title="No campaigns match that filter"
+ *   description="Try a different name, or clear the filter to see everything."
+ *   primaryAction={{ label: "Clear filters", onClick: clearFilters }}
+ * />
+ * ```
+ *
+ * @see Skeleton - The loading presentation of the same region.
+ * @see Alert - An inline message that is not a whole region.
+ */
+export declare const EmptyState: import('react').ForwardRefExoticComponent<EmptyStateProps & import('react').RefAttributes<HTMLDivElement>>;
+export {};
+//# sourceMappingURL=EmptyState.d.ts.map

package/dist/components/empty-state/EmptyState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.d.ts","sourceRoot":"","sources":["../../../src/components/empty-state/EmptyState.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;AAKjD,OAAO,EACL,KAAK,gBAAgB,EAEtB,MAAM,sBAAsB,CAAC;AAS9B,KAAK,mBAAmB,GAAG,gBAAgB,GACzC,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC,CAAC;AAE1D;;GAEG;AACH,MAAM,WAAW,eAAgB,SAAQ,mBAAmB;IAC1D,kCAAkC;IAClC,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB,6DAA6D;IAC7D,KAAK,EAAE,SAAS,CAAC;IAEjB,uCAAuC;IACvC,WAAW,CAAC,EAAE,SAAS,CAAC;IAExB,8EAA8E;IAC9E,aAAa,CAAC,EAAE,YAAY,CAAC;IAE7B,oEAAoE;IACpE,eAAe,CAAC,EAAE,YAAY,CAAC;IAE/B;;;;;OAKG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAE1B;;;;;OAKG;IACH,EAAE,CAAC,EAAE,WAAW,CAAC;IAEjB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,eAAO,MAAM,UAAU,4GAsEtB,CAAC"}

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

@@ -0,0 +1,46 @@
+"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 { ActionGroup as i } from "../section-kit/ActionGroup.js";
+import { FALLBACK_EMPTY_STATE_CONFIG as a } from "./empty-state-config.js";
+import { EMPTY_STATE_CLASS as o, EMPTY_STATE_ICON_CLASS as s, EMPTY_STATE_ICON_SIZE_CLASS as c, EMPTY_STATE_SIZE_CLASS as l } from "./empty-state-styles.js";
+import { forwardRef as u } from "react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+//#region src/components/empty-state/EmptyState.tsx
+var p = u(({ icon: u, title: p, description: m, primaryAction: h, secondaryAction: g, type: _, size: v, panel: y, role: b, as: x, className: S, children: C, ...w }, T) => {
+	let E = t(), D = n({
+		type: _,
+		size: v,
+		panel: y
+	}, E.components?.emptystate, a);
+	return /* @__PURE__ */ f(x ?? "div", {
+		ref: T,
+		role: b,
+		className: e(o, l[D.size], D.panel && "rounded-md border border-border bg-background", S),
+		...w,
+		children: [
+			u && /* @__PURE__ */ d("div", {
+				className: e(s[D.type], c[D.size]),
+				children: u
+			}),
+			/* @__PURE__ */ d(r, {
+				title: p,
+				description: m,
+				align: "center",
+				size: "md"
+			}),
+			/* @__PURE__ */ d(i, {
+				primaryAction: h,
+				secondaryAction: g,
+				align: "center"
+			}),
+			C
+		]
+	});
+});
+p.displayName = "EmptyState";
+//#endregion
+export { p as EmptyState };

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

@@ -0,0 +1,44 @@
+import { Size } from '../../shared';
+/**
+ * The tone of an empty region.
+ *
+ * - `info`: nothing is here yet, which is expected.
+ * - `success`: the region is empty because the work finished.
+ * - `warning`: the region is empty and something needs attention.
+ * - `error`: the region could not be filled because something failed.
+ */
+export type EmptyStateType = "info" | "success" | "warning" | "error";
+/**
+ * Theme configuration options for the EmptyState component.
+ *
+ * Set under `components.emptystate` in the AsheeUI config. Values feed the
+ * component-level fallback tier of the theme cascade.
+ */
+export interface EmptyStateConfig {
+    /** Tone of the state. @default "info" */
+    type?: EmptyStateType;
+    /** Density of the state. @default "md" */
+    size?: Size;
+    /**
+     * Whether the state is drawn as a panel.
+     * A panel suits a region inside a dashboard; without one the state sits
+     * directly on the page, which suits a whole-page empty view.
+     *
+     * @default false
+     */
+    panel?: boolean;
+}
+/**
+ * Default config values registered for the EmptyState component.
+ */
+export declare const defaultEmptyStateConfig: EmptyStateConfig;
+declare module "../../libs/registry" {
+    interface ComponentTypeConfigRegistry {
+        emptystate: EmptyStateConfig;
+    }
+}
+/**
+ * Hard fallback values used when no config tier provides a value.
+ */
+export declare const FALLBACK_EMPTY_STATE_CONFIG: Required<EmptyStateConfig>;
+//# sourceMappingURL=empty-state-config.d.ts.map

package/dist/components/empty-state/empty-state-config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"empty-state-config.d.ts","sourceRoot":"","sources":["../../../src/components/empty-state/empty-state-config.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEzC;;;;;;;GAOG;AACH,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAEtE;;;;;GAKG;AACH,MAAM,WAAW,gBAAgB;IAC/B,yCAAyC;IACzC,IAAI,CAAC,EAAE,cAAc,CAAC;IAEtB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,IAAI,CAAC;IAEZ;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED;;GAEG;AACH,eAAO,MAAM,uBAAuB,EAAE,gBAIrC,CAAC;AAEF,OAAO,QAAQ,qBAAqB,CAAC;IACnC,UAAU,2BAA2B;QACnC,UAAU,EAAE,gBAAgB,CAAC;KAC9B;CACF;AAID;;GAEG;AACH,eAAO,MAAM,2BAA2B,EAAE,QAAQ,CAAC,gBAAgB,CAIlE,CAAC"}

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

@@ -0,0 +1,16 @@
+"use client";
+import { registerComponentDefaults as e } from "../../libs/registry.js";
+//#region src/components/empty-state/empty-state-config.ts
+var t = {
+	type: "info",
+	size: "md",
+	panel: !1
+};
+e("emptystate", t);
+var n = {
+	type: "info",
+	size: "md",
+	panel: !1
+};
+//#endregion
+export { n as FALLBACK_EMPTY_STATE_CONFIG, t as defaultEmptyStateConfig };

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

@@ -0,0 +1,13 @@
+import { Size } from '../../shared';
+import { EmptyStateType } from './empty-state-config';
+/** Inner arrangement of the state. */
+export declare const EMPTY_STATE_CLASS = "flex flex-col items-center gap-4 text-center";
+/** Padding of the state at each density. */
+export declare const EMPTY_STATE_SIZE_CLASS: Record<Size, string>;
+/** The panel treatment. */
+export declare const EMPTY_STATE_PANEL_CLASS = "rounded-md border border-border bg-background";
+/** Spacing between the icon badge and the text at each density. */
+export declare const EMPTY_STATE_ICON_SIZE_CLASS: Record<Size, string>;
+/** Badge that holds the state's icon, coloured by tone. */
+export declare const EMPTY_STATE_ICON_CLASS: Record<EmptyStateType, string>;
+//# sourceMappingURL=empty-state-styles.d.ts.map

package/dist/components/empty-state/empty-state-styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"empty-state-styles.d.ts","sourceRoot":"","sources":["../../../src/components/empty-state/empty-state-styles.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAE3D,sCAAsC;AACtC,eAAO,MAAM,iBAAiB,iDAAiD,CAAC;AAEhF,4CAA4C;AAC5C,eAAO,MAAM,sBAAsB,EAAE,MAAM,CAAC,IAAI,EAAE,MAAM,CAIvD,CAAC;AAEF,2BAA2B;AAC3B,eAAO,MAAM,uBAAuB,kDACa,CAAC;AAElD,mEAAmE;AACnE,eAAO,MAAM,2BAA2B,EAAE,MAAM,CAAC,IAAI,EAAE,MAAM,CAI5D,CAAC;AAEF,2DAA2D;AAC3D,eAAO,MAAM,sBAAsB,EAAE,MAAM,CAAC,cAAc,EAAE,MAAM,CAQjE,CAAC"}

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

@@ -0,0 +1,18 @@
+"use client";
+//#region src/components/empty-state/empty-state-styles.ts
+var e = "flex flex-col items-center gap-4 text-center", t = {
+	sm: "p-4",
+	md: "p-6",
+	lg: "p-10"
+}, n = "rounded-md border border-border bg-background", r = {
+	sm: "size-8",
+	md: "size-10",
+	lg: "size-12"
+}, i = {
+	info: "flex shrink-0 items-center justify-center rounded-full bg-primary/10 text-primary",
+	success: "flex shrink-0 items-center justify-center rounded-full bg-success/10 text-success",
+	warning: "flex shrink-0 items-center justify-center rounded-full bg-warning/10 text-warning",
+	error: "flex shrink-0 items-center justify-center rounded-full bg-danger/10 text-danger"
+};
+//#endregion
+export { e as EMPTY_STATE_CLASS, i as EMPTY_STATE_ICON_CLASS, r as EMPTY_STATE_ICON_SIZE_CLASS, n as EMPTY_STATE_PANEL_CLASS, t as EMPTY_STATE_SIZE_CLASS };

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

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

package/dist/components/empty-state/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/empty-state/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,sBAAsB,CAAC"}

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

@@ -0,0 +1,3 @@
+export * from "./EmptyState.js";
+export * from "./empty-state-config.js";
+export * from "./empty-state-styles.js";

package/dist/components/feature-grid/FeatureGrid.d.ts

@@ -0,0 +1,107 @@
+import { ElementType, HTMLAttributes, ReactNode } from 'react';
+import { FeatureGridConfig } from './feature-grid-config';
+/**
+ * One feature in the grid.
+ */
+export interface FeatureItem {
+    /**
+     * Stable identifier for the feature.
+     * Defaults to its position in the list.
+     */
+    id?: string | number;
+    /**
+     * Icon shown above the feature title.
+     */
+    icon?: ReactNode;
+    /**
+     * Name of the feature.
+     */
+    title: ReactNode;
+    /**
+     * Explanation of the feature.
+     */
+    description?: ReactNode;
+    /**
+     * Destination of the feature.
+     * With one, the whole card becomes a link.
+     */
+    href?: string;
+}
+/**
+ * Substitution for the link each feature card renders.
+ */
+export interface FeatureGridLink {
+    /**
+     * Component that replaces the anchor, such as a framework router link.
+     */
+    component?: ElementType;
+    /**
+     * Additional props for that component.
+     */
+    props?: Record<string, unknown>;
+}
+type BaseFeatureGridProps = FeatureGridConfig & Omit<HTMLAttributes<HTMLElement>, "color" | "title">;
+/**
+ * Props for the FeatureGrid component.
+ */
+export interface FeatureGridProps extends BaseFeatureGridProps {
+    /** Short label above the heading. */
+    eyebrow?: ReactNode;
+    /** Heading of the band. */
+    title?: ReactNode;
+    /** Supporting sentence under the heading. */
+    description?: ReactNode;
+    /** The features to show. */
+    items: FeatureItem[];
+    /** Substitution applied to the link of every feature card. */
+    link?: FeatureGridLink;
+    /**
+     * Element to render the band as.
+     * Defaults to `section`.
+     *
+     * @default "section"
+     */
+    as?: ElementType;
+    /** Content below the grid. */
+    children?: ReactNode;
+}
+/**
+ * A band of features laid out in a responsive grid.
+ *
+ * Each feature renders through the public `Card`, so a feature grid inherits the
+ * framework's card variants, radius, hover and focus treatment and its
+ * router-link substitution. The grid is one column on a phone, two on a tablet
+ * and three from the `lg` breakpoint by default, and every part of that is
+ * configurable through `components.featuregrid`.
+ *
+ * @param props - FeatureGrid configuration options and element attributes.
+ * @param props.items - The features to show.
+ * @param props.title - Heading of the band.
+ * @param props.eyebrow - Short label above the heading.
+ * @param props.description - Supporting sentence under the heading.
+ * @param props.columns - Columns from the smallest viewport. Defaults to 1.
+ * @param props.columnsMd - Columns from `md` upwards. Defaults to 2.
+ * @param props.columnsLg - Columns from `lg` upwards. Defaults to 3.
+ * @param props.gap - Space between cards. Defaults to "lg".
+ * @param props.align - Heading alignment. Defaults to "center".
+ * @param props.link - Substitution for the feature card links.
+ * @param props.as - Element to render. Defaults to "section".
+ * @returns The rendered band.
+ *
+ * @example
+ * ```tsx
+ * <FeatureGrid
+ *   eyebrow="Why teams switch"
+ *   title="Everything the campaign needs"
+ *   items={[
+ *     { title: "Templates", description: "Reusable messages." },
+ *     { title: "Scheduling", description: "Send at the right time." },
+ *   ]}
+ * />
+ * ```
+ *
+ * @see Card - The surface each feature renders in.
+ */
+export declare const FeatureGrid: import('react').ForwardRefExoticComponent<FeatureGridProps & import('react').RefAttributes<HTMLElement>>;
+export {};
+//# sourceMappingURL=FeatureGrid.d.ts.map

package/dist/components/feature-grid/FeatureGrid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FeatureGrid.d.ts","sourceRoot":"","sources":["../../../src/components/feature-grid/FeatureGrid.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAIH,OAAO,EACL,KAAK,WAAW,EAEhB,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AASf,OAAO,EAEL,KAAK,iBAAiB,EACvB,MAAM,uBAAuB,CAAC;AAO/B;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAErB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IAExB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,SAAS,CAAC,EAAE,WAAW,CAAC;IAExB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACjC;AAED,KAAK,oBAAoB,GAAG,iBAAiB,GAC3C,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC,CAAC;AAEvD;;GAEG;AACH,MAAM,WAAW,gBAAiB,SAAQ,oBAAoB;IAC5D,qCAAqC;IACrC,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB,2BAA2B;IAC3B,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB,6CAA6C;IAC7C,WAAW,CAAC,EAAE,SAAS,CAAC;IAExB,4BAA4B;IAC5B,KAAK,EAAE,WAAW,EAAE,CAAC;IAErB,8DAA8D;IAC9D,IAAI,CAAC,EAAE,eAAe,CAAC;IAEvB;;;;;OAKG;IACH,EAAE,CAAC,EAAE,WAAW,CAAC;IAEjB,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,eAAO,MAAM,WAAW,0GAgHvB,CAAC"}

package/dist/components/feature-grid/FeatureGrid.js

@@ -0,0 +1,94 @@
+"use client";
+"use client";
+import { useAsheeConfig as e } from "../../libs/context.js";
+import { resolveConfigCascade as t } from "../../utils/resolve-token.js";
+import { Typography as n } from "../typography/Typography.js";
+import { SectionHeading as r } from "../section-kit/SectionHeading.js";
+import { Card as i } from "../card/Card.js";
+import { Container as a } from "../container/Container.js";
+import { Section as o } from "../section/Section.js";
+import { Grid as s } from "../grid/Grid.js";
+import { FALLBACK_FEATURE_GRID_CONFIG as c } from "./feature-grid-config.js";
+import { FEATURE_CARD_BODY_CLASS as l, FEATURE_HEADING_CLASS as u } from "./feature-grid-styles.js";
+import { forwardRef as d } from "react";
+import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
+//#region src/components/feature-grid/FeatureGrid.tsx
+var h = d(({ eyebrow: d, title: h, description: g, items: _, link: v, columns: y, columnsMd: b, columnsLg: x, gap: S, spacing: C, background: w, align: T, containerSize: E, contained: D, as: O, className: k, children: A, ...j }, M) => {
+	let N = e(), P = t({
+		columns: y,
+		columnsMd: b,
+		columnsLg: x,
+		gap: S,
+		spacing: C,
+		background: w,
+		align: T,
+		containerSize: E,
+		contained: D
+	}, N.components?.featuregrid, c), F = /* @__PURE__ */ m(f, { children: [
+		/* @__PURE__ */ p(r, {
+			eyebrow: d,
+			title: h,
+			description: g,
+			align: P.align,
+			className: u
+		}),
+		/* @__PURE__ */ p(s, {
+			columns: P.columns,
+			columnsMd: P.columnsMd,
+			columnsLg: P.columnsLg,
+			gap: P.gap,
+			as: "ul",
+			children: _.map((e, t) => /* @__PURE__ */ p("li", {
+				className: "min-w-0",
+				children: /* @__PURE__ */ p(i, {
+					variant: "bordered",
+					size: "md",
+					className: "h-full",
+					link: e.href ? {
+						component: v?.component,
+						componentProps: {
+							...v?.props,
+							href: e.href
+						}
+					} : void 0,
+					children: /* @__PURE__ */ m("div", {
+						className: l,
+						children: [
+							e.icon && /* @__PURE__ */ p("div", {
+								className: "flex size-10 shrink-0 items-center justify-center rounded-md bg-primary/10 text-primary",
+								children: e.icon
+							}),
+							/* @__PURE__ */ p(n, {
+								as: "h3",
+								role: "heading-sm",
+								children: e.title
+							}),
+							e.description && /* @__PURE__ */ p(n, {
+								role: "body-sm",
+								tone: "muted",
+								children: e.description
+							})
+						]
+					})
+				})
+			}, e.id ?? t))
+		}),
+		A
+	] });
+	return /* @__PURE__ */ p(o, {
+		ref: M,
+		as: O,
+		spacing: P.spacing,
+		background: P.background,
+		contained: !1,
+		className: k,
+		...j,
+		children: P.contained ? /* @__PURE__ */ p(a, {
+			size: P.containerSize,
+			children: F
+		}) : F
+	});
+});
+h.displayName = "FeatureGrid";
+//#endregion
+export { h as FeatureGrid };

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

@@ -0,0 +1,80 @@
+import { Space } from '../../shared';
+import { ContainerSize } from '../container/container-config';
+import { GridColumns } from '../grid/grid-config';
+import { SectionBackground } from '../section/section-config';
+/**
+ * Theme configuration options for the FeatureGrid component.
+ *
+ * Set under `components.featuregrid` in the AsheeUI config. Values feed the
+ * component-level fallback tier of the theme cascade.
+ */
+export interface FeatureGridConfig {
+    /**
+     * Columns from the smallest viewport upwards.
+     *
+     * @default 1
+     */
+    columns?: GridColumns;
+    /**
+     * Columns from the `md` breakpoint upwards.
+     *
+     * @default 2
+     */
+    columnsMd?: GridColumns;
+    /**
+     * Columns from the `lg` breakpoint upwards.
+     *
+     * @default 3
+     */
+    columnsLg?: GridColumns;
+    /**
+     * Space between the feature cards.
+     *
+     * @default "lg"
+     */
+    gap?: Space;
+    /**
+     * Vertical padding of the band.
+     *
+     * @default "lg"
+     */
+    spacing?: Space;
+    /**
+     * Background treatment of the band.
+     *
+     * @default "none"
+     */
+    background?: SectionBackground;
+    /**
+     * Alignment of the heading above the grid.
+     *
+     * @default "center"
+     */
+    align?: "start" | "center";
+    /**
+     * Maximum content width of the band.
+     *
+     * @default "lg"
+     */
+    containerSize?: ContainerSize;
+    /**
+     * Whether the band wraps its content in a {@link Container}.
+     *
+     * @default true
+     */
+    contained?: boolean;
+}
+/**
+ * Default config values registered for the FeatureGrid component.
+ */
+export declare const defaultFeatureGridConfig: FeatureGridConfig;
+declare module "../../libs/registry" {
+    interface ComponentTypeConfigRegistry {
+        featuregrid: FeatureGridConfig;
+    }
+}
+/**
+ * Hard fallback values used when no config tier provides a value.
+ */
+export declare const FALLBACK_FEATURE_GRID_CONFIG: Required<FeatureGridConfig>;
+//# sourceMappingURL=feature-grid-config.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"feature-grid-config.d.ts","sourceRoot":"","sources":["../../../src/components/feature-grid/feature-grid-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,WAAW,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAEnE;;;;;GAKG;AACH,MAAM,WAAW,iBAAiB;IAChC;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;;OAIG;IACH,SAAS,CAAC,EAAE,WAAW,CAAC;IAExB;;;;OAIG;IACH,SAAS,CAAC,EAAE,WAAW,CAAC;IAExB;;;;OAIG;IACH,GAAG,CAAC,EAAE,KAAK,CAAC;IAEZ;;;;OAIG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC;IAEhB;;;;OAIG;IACH,UAAU,CAAC,EAAE,iBAAiB,CAAC;IAE/B;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAE3B;;;;OAIG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;IAE9B;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;GAEG;AACH,eAAO,MAAM,wBAAwB,EAAE,iBAUtC,CAAC;AAEF,OAAO,QAAQ,qBAAqB,CAAC;IACnC,UAAU,2BAA2B;QACnC,WAAW,EAAE,iBAAiB,CAAC;KAChC;CACF;AAID;;GAEG;AACH,eAAO,MAAM,4BAA4B,EAAE,QAAQ,CAAC,iBAAiB,CAUpE,CAAC"}

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

@@ -0,0 +1,28 @@
+"use client";
+import { registerComponentDefaults as e } from "../../libs/registry.js";
+//#region src/components/feature-grid/feature-grid-config.ts
+var t = {
+	columns: 1,
+	columnsMd: 2,
+	columnsLg: 3,
+	gap: "lg",
+	spacing: "lg",
+	background: "none",
+	align: "center",
+	containerSize: "lg",
+	contained: !0
+};
+e("featuregrid", t);
+var n = {
+	columns: 1,
+	columnsMd: 2,
+	columnsLg: 3,
+	gap: "lg",
+	spacing: "lg",
+	background: "none",
+	align: "center",
+	containerSize: "lg",
+	contained: !0
+};
+//#endregion
+export { n as FALLBACK_FEATURE_GRID_CONFIG, t as defaultFeatureGridConfig };

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

@@ -0,0 +1,11 @@
+/**
+ * FeatureGrid component styles for AsheeUI.
+ * This file provides the static class mappings for the FeatureGrid pattern.
+ */
+/** The badge that holds a feature's icon. */
+export declare const FEATURE_ICON_CLASS = "flex size-10 shrink-0 items-center justify-center rounded-md bg-primary/10 text-primary";
+/** The inner arrangement of a feature card. */
+export declare const FEATURE_CARD_BODY_CLASS = "flex flex-col gap-3";
+/** The heading block above the grid. */
+export declare const FEATURE_HEADING_CLASS = "mb-10";
+//# sourceMappingURL=feature-grid-styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"feature-grid-styles.d.ts","sourceRoot":"","sources":["../../../src/components/feature-grid/feature-grid-styles.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,6CAA6C;AAC7C,eAAO,MAAM,kBAAkB,4FAC4D,CAAC;AAE5F,+CAA+C;AAC/C,eAAO,MAAM,uBAAuB,wBAAwB,CAAC;AAE7D,wCAAwC;AACxC,eAAO,MAAM,qBAAqB,UAAU,CAAC"}

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

@@ -0,0 +1,5 @@
+"use client";
+//#region src/components/feature-grid/feature-grid-styles.ts
+var e = "flex size-10 shrink-0 items-center justify-center rounded-md bg-primary/10 text-primary", t = "flex flex-col gap-3", n = "mb-10";
+//#endregion
+export { t as FEATURE_CARD_BODY_CLASS, n as FEATURE_HEADING_CLASS, e as FEATURE_ICON_CLASS };

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

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

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

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

package/dist/components/feature-grid/index.js

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

package/dist/components/field/FieldShell.d.ts

@@ -10,6 +10,18 @@ export interface FieldShellProps {
      * Used to associate the label with the input via htmlFor.
      */
     id: string;
+    /**
+     * ID for the label element.
+     * A container that groups several controls (a radio group, for example)
+     * references the visible label with `aria-labelledby` instead of `htmlFor`.
+     */
+    labelId?: string;
+    /**
+     * ID of the control the label describes.
+     * Defaults to `id`. Pass `null` when the label describes a group of controls
+     * rather than one control, so no reference is emitted.
+     */
+    htmlFor?: string | null;
     /**
      * The label text for the field.
      */
@@ -99,5 +111,5 @@ export interface FieldShellProps {
  *
  * @see FieldConfig - The configuration type for field components.
  */
-export declare function FieldShell({ id, label, labelAlign, description, descriptionId, message, messageId, status, required, isLoading, children, }: FieldShellProps): import("react").JSX.Element;
+export declare function FieldShell({ id, labelId, htmlFor, label, labelAlign, description, descriptionId, message, messageId, status, required, isLoading, children, }: FieldShellProps): import("react").JSX.Element;
 //# sourceMappingURL=FieldShell.d.ts.map