asheeui 0.6.15 → 1.0.0

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

@@ -0,0 +1,109 @@
+import { ElementType, FormHTMLAttributes, ReactNode } from 'react';
+import { FormConfig } from './form-config';
+type BaseFormProps = FormConfig & Omit<FormHTMLAttributes<HTMLFormElement>, "color" | "children">;
+/**
+ * Configuration options for the Form component.
+ */
+export interface FormProps extends BaseFormProps {
+    /**
+     * The fields and other content of the form.
+     */
+    children?: ReactNode;
+    /**
+     * Legend that groups the fields.
+     * When it is given the fields are wrapped in a `fieldset` with that legend,
+     * which is how a form tells assistive technology which set of controls it is
+     * describing. A form whose fields are already grouped by other landmarks
+     * omits it and names itself with `aria-label` or `aria-labelledby`.
+     */
+    legend?: string;
+    /**
+     * Label of the submit control.
+     * When it is given the component renders an AsheeUI `Button` as the form's
+     * submit control, so no consumer has to rebuild one. Without it the
+     * consumer places its own control.
+     */
+    submitLabel?: string;
+    /**
+     * Whether a submission is in progress.
+     * While it is true the submit control is disabled and busy, which is how a
+     * consumer shows a pending submission without bespoke markup.
+     *
+     * @default false
+     */
+    isPending?: boolean;
+    /**
+     * Component that replaces the native `form` element, such as a framework
+     * form primitive.
+     *
+     * The substitution API is shared with `Link` and `Image`: `component` names
+     * the component and `componentProps` carries the props it needs.
+     */
+    component?: ElementType;
+    /**
+     * Additional props for `component`.
+     */
+    componentProps?: Record<string, unknown>;
+}
+/**
+ * A framework-native form element.
+ *
+ * Form wraps the native `form` element the way `Link` wraps the anchor and
+ * `Image` wraps the picture, so form-level improvements have one home without
+ * the framework taking responsibility for form state. It preserves native
+ * submission and validation: `action`, `method`, `encType`, `target`,
+ * `noValidate` and the submit event all pass through untouched, and the
+ * forwarded ref reaches the element itself.
+ *
+ * It is deliberately thin, because a consumer's form state belongs to the
+ * consumer or to a form library. There is no AsheeUI field registry, no
+ * validation schema, and no submission state: `onSubmit` is the native event,
+ * so a form library binds to it exactly as it binds to a plain form.
+ *
+ * Fields keep their own presentation through the framework's field
+ * components, and the component renders an AsheeUI `Button` as the submit
+ * control when a label is given for it. Page layout stays with the consumer's
+ * Tailwind classes.
+ *
+ * The form never moves focus, on mount or on a rejected submission: where a
+ * consumer sends focus after a failed validation is a consumer decision.
+ *
+ * The form element itself can be replaced, the way `Link` replaces the anchor
+ * and `Image` replaces the picture: pass `component` to name a form component
+ * and `componentProps` for the props it needs.
+ *
+ * @param props - Form configuration options and native form attributes.
+ * @param props.children - The fields and other content of the form.
+ * @param props.legend - Legend that groups the fields.
+ * @param props.submitLabel - Label of the submit control the component renders.
+ * @param props.isPending - Whether a submission is in progress. Defaults to false.
+ * @param props.component - Component that replaces the native form element.
+ * @param props.componentProps - Additional props for that component.
+ * @param props.submitVariant - Style of the submit control. Defaults to the configured value.
+ * @param props.submitColor - Colour of the submit control. Defaults to the configured value.
+ * @param props.submitSize - Size of the submit control. Defaults to "md".
+ * @param props.submitRadius - Corner rounding of the submit control. Defaults to "md".
+ * @param props.className - Extra classes applied last.
+ *
+ * @example
+ * ```tsx
+ * <Form legend="Invoice details" submitLabel="Save" onSubmit={handleSubmit}>
+ *   <Input label="Reference" name="reference" />
+ *   <Textarea label="Notes" name="notes" />
+ * </Form>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // A form library binds to the native submit event, unchanged.
+ * <Form onSubmit={form.handleSubmit(save)}>
+ *   <Input label="Email" name="email" />
+ * </Form>
+ * ```
+ *
+ * @see FormConfig - The configuration type for component defaults.
+ * @see Button - The submit control the component renders.
+ */
+export declare const Form: import('react').ForwardRefExoticComponent<FormProps & import('react').RefAttributes<HTMLFormElement>>;
+export {};
+//# sourceMappingURL=Form.d.ts.map

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

@@ -0,0 +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"}

package/dist/components/form/Form.js

@@ -0,0 +1,42 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.js";
+import { useAsheeConfig as t } from "../../libs/context.js";
+import { resolveCascade as n, resolveRadiusKey as r } from "../../utils/resolve-token.js";
+import { Button as i } from "../button/Button.js";
+import { FALLBACK_FORM_CONFIG as a } from "./form-config.js";
+import { FORM_BASE_CLASS as o, FORM_FIELD_GROUP_CLASS as s, FORM_LEGEND_CLASS as c } from "./form-styles.js";
+import { forwardRef as l } from "react";
+import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
+//#region src/components/form/Form.tsx
+var p = l(({ children: l, legend: p, submitLabel: m, isPending: h = !1, component: g, componentProps: _, submitVariant: v, submitColor: y, submitSize: b, submitRadius: x, className: S, ...C }, w) => {
+	let T = t(), E = T.components?.form, D = n(v, E?.submitVariant, T.defaultVariant, a.submitVariant), O = n(y, E?.submitColor, T.defaultColor, a.submitColor), k = n(b, E?.submitSize, void 0, a.submitSize), A = r(x, E?.submitRadius, T.defaultRadius, a.submitRadius), j = /* @__PURE__ */ f(u, { children: [l, m && /* @__PURE__ */ d("div", {
+		className: "flex items-center gap-2 mt-4",
+		children: /* @__PURE__ */ d(i, {
+			type: "submit",
+			variant: D,
+			color: O,
+			size: k,
+			radius: A,
+			isLoading: h,
+			isDisabled: h,
+			children: m
+		})
+	})] });
+	return /* @__PURE__ */ d(g || "form", {
+		ref: w,
+		className: e(o, S),
+		...C,
+		..._,
+		children: p ? /* @__PURE__ */ f("fieldset", {
+			className: s,
+			children: [/* @__PURE__ */ d("legend", {
+				className: c,
+				children: p
+			}), j]
+		}) : j
+	});
+});
+p.displayName = "Form";
+//#endregion
+export { p as Form };

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

@@ -0,0 +1,57 @@
+import { Color, Radius, Size, Variant } from '../../shared';
+/**
+ * Theme configuration options for the Form component.
+ *
+ * Set under `components.form` in the AsheeUI config. Values feed the
+ * component-level fallback tier of the theme cascade.
+ *
+ * The form element itself carries no visual treatment: it is a grouping and
+ * submission element, and the fields inside it style themselves. These options
+ * describe the submit control the component renders when a label is given for
+ * it.
+ */
+export interface FormConfig {
+    /**
+     * Visual style variant of the submit control.
+     *
+     * @default "solid"
+     */
+    submitVariant?: Variant;
+    /**
+     * Theme accent colour of the submit control.
+     *
+     * @default "primary"
+     */
+    submitColor?: Color;
+    /**
+     * Size of the submit control.
+     *
+     * @default "md"
+     */
+    submitSize?: Size;
+    /**
+     * Corner rounding of the submit control.
+     *
+     * @default "md"
+     */
+    submitRadius?: Radius;
+}
+/**
+ * Default config values registered for the Form component.
+ *
+ * The visual tokens are intentionally absent so they inherit from the global
+ * defaults and the built-in fallback.
+ */
+export declare const defaultFormConfig: FormConfig;
+/**
+ * Hard fallback values used when no config tier provides a value.
+ * These values are used when instance props, component config,
+ * and global defaults are all undefined.
+ */
+export declare const FALLBACK_FORM_CONFIG: Required<FormConfig>;
+declare module "../../libs/registry" {
+    interface ComponentTypeConfigRegistry {
+        form: FormConfig;
+    }
+}
+//# sourceMappingURL=form-config.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"form-config.d.ts","sourceRoot":"","sources":["../../../src/components/form/form-config.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEjE;;;;;;;;;;GAUG;AACH,MAAM,WAAW,UAAU;IACzB;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;;OAIG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC;IAEpB;;;;OAIG;IACH,UAAU,CAAC,EAAE,IAAI,CAAC;IAElB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,EAAE,UAE/B,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,EAAE,QAAQ,CAAC,UAAU,CAK5C,CAAC;AAEX,OAAO,QAAQ,qBAAqB,CAAC;IACnC,UAAU,2BAA2B;QACnC,IAAI,EAAE,UAAU,CAAC;KAClB;CACF"}

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

@@ -0,0 +1,12 @@
+"use client";
+import { registerComponentDefaults as e } from "../../libs/registry.js";
+//#region src/components/form/form-config.ts
+var t = { submitRadius: "md" }, n = {
+	submitVariant: "solid",
+	submitColor: "primary",
+	submitSize: "md",
+	submitRadius: "md"
+};
+e("form", t);
+//#endregion
+export { n as FALLBACK_FORM_CONFIG, t as defaultFormConfig };

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

@@ -0,0 +1,27 @@
+/**
+ * Form component styles for AsheeUI.
+ * This file provides the static classes the Form component is built from.
+ *
+ * The list is deliberately short: a form groups and submits, and page layout
+ * belongs to the consumer's Tailwind classes. Nothing here styles
+ * a field, because fields are the framework's field components.
+ */
+/**
+ * Base classes for the form element.
+ */
+export declare const FORM_BASE_CLASS = "w-full";
+/**
+ * Classes for the group that wraps the fields when the consumer names them.
+ * The browser's default fieldset frame is removed, because the grouping is
+ * semantic rather than visual.
+ */
+export declare const FORM_FIELD_GROUP_CLASS = "border-0 p-0 m-0 min-w-0";
+/**
+ * Classes for the legend of that group.
+ */
+export declare const FORM_LEGEND_CLASS = "p-0 mb-2 text-sm font-medium text-foreground";
+/**
+ * Classes for the row that holds the submit control.
+ */
+export declare const FORM_SUBMIT_ROW_CLASS = "flex items-center gap-2 mt-4";
+//# sourceMappingURL=form-styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"form-styles.d.ts","sourceRoot":"","sources":["../../../src/components/form/form-styles.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH;;GAEG;AACH,eAAO,MAAM,eAAe,WAAW,CAAC;AAExC;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,6BAA6B,CAAC;AAEjE;;GAEG;AACH,eAAO,MAAM,iBAAiB,iDAAiD,CAAC;AAEhF;;GAEG;AACH,eAAO,MAAM,qBAAqB,iCAAiC,CAAC"}

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

@@ -0,0 +1,5 @@
+"use client";
+//#region src/components/form/form-styles.ts
+var e = "w-full", t = "border-0 p-0 m-0 min-w-0", n = "p-0 mb-2 text-sm font-medium text-foreground", r = "flex items-center gap-2 mt-4";
+//#endregion
+export { e as FORM_BASE_CLASS, t as FORM_FIELD_GROUP_CLASS, n as FORM_LEGEND_CLASS, r as FORM_SUBMIT_ROW_CLASS };

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

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

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

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

package/dist/components/form/index.js

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

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

@@ -15,16 +15,15 @@ export interface ImageProps extends BaseImageProps {
      * (e.g. `next/image`).
      * When provided, the component renders this instead of img.
      */
-    imageComponent?: ElementType;
+    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 `imageComponent` is set and neither `width`/`height` nor `fill`
+     * 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.
      */
-    imageProps?: Record<string, unknown>;
+    componentProps?: Record<string, unknown>;
 }
 /**
  * An image element with ratio locking, object-fit control, radius
@@ -50,8 +49,8 @@ export interface ImageProps extends BaseImageProps {
  * @param props.fallbackSrc - Error fallback source.
  * @param props.showSkeleton - Loading placeholder. Defaults to true.
  * @param props.className - Extra classes for the image element.
- * @param props.imageComponent - Custom image component.
- * @param props.imageProps - Props forwarded to the image component.
+ * @param props.component - Custom 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.
@@ -82,8 +81,8 @@ export interface ImageProps extends BaseImageProps {
  * <Image
  *   src="/hero.png"
  *   alt="Hero image"
- *   imageComponent={NextImage}
- *   imageProps={{ priority: true, sizes: "100vw" }}
+ *   component={NextImage}
+ *   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,cAAc,CAAC,EAAE,WAAW,CAAC;IAE7B;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACtC;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,134 +1,67 @@
 "use client";
-import { jsxs as P, jsx as _ } from "react/jsx-runtime";
-import { forwardRef as tt, useState as N, useRef as et, useEffect as z } from "react";
-import { useAsheeConfig as st } from "../../libs/context.js";
-import { resolveCascade as o, resolveRadiusKey as it, resolveClassKey as v } from "../../utils/resolve-token.js";
-import { FALLBACK_IMAGE_CONFIG as i } from "./image-config.js";
-import { IMAGE_FIT_CLASS as nt, IMAGE_RATIO_CLASS as lt } from "./image-styles.js";
-import { RADIUS_CLASS as at } from "../../shared/radius.js";
-import { cn as I } from "../../utils/cn.js";
-function F(l) {
-  return typeof l == "string" && l.trim().length > 0;
+"use client";
+import { cn as e } from "../../utils/cn.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";
+import { forwardRef as l, useEffect as u, useRef as d, useState as f } from "react";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+//#region src/components/image/Image.tsx
+function h(e) {
+	return typeof e == "string" && e.trim().length > 0;
 }
-const dt = tt(
-  ({
-    alt: l,
-    fit: x,
-    ratio: G,
-    radius: K,
-    fallbackSrc: u,
-    showSkeleton: E,
-    loading: M,
-    src: r,
-    className: b,
-    onLoad: f,
-    onError: h,
-    imageComponent: S,
-    imageProps: t,
-    ...j
-  }, a) => {
-    var L;
-    const A = st(), e = (L = A.components) == null ? void 0 : L.image, [R, d] = N(!1), [n, w] = N(r), C = et(null);
-    z(() => {
-      w(r), d(!1);
-    }, [r]), z(() => {
-      const s = C.current;
-      s != null && s.complete && s.naturalWidth > 0 && d(!0);
-    }, [n]);
-    const k = (s) => {
-      d(!0), f == null || f(s);
-    }, B = (s) => {
-      if (F(u) && n !== u) {
-        w(u);
-        return;
-      }
-      d(!0), h == null || h(s);
-    }, O = (s) => {
-      C.current = s, typeof a == "function" ? a(s) : a && (a.current = s);
-    }, T = o(
-      x,
-      e == null ? void 0 : e.fit,
-      void 0,
-      i.fit
-    ), V = o(
-      G,
-      e == null ? void 0 : e.ratio,
-      void 0,
-      i.ratio
-    ), D = it(
-      K,
-      e == null ? void 0 : e.radius,
-      A.defaultRadius,
-      i.radius
-    ), U = o(
-      M,
-      e == null ? void 0 : e.loading,
-      void 0,
-      i.loading
-    ), W = o(
-      E,
-      e == null ? void 0 : e.showSkeleton,
-      void 0,
-      i.showSkeleton
-    ), $ = v(
-      T,
-      nt,
-      i.fit
-    ), g = v(
-      V,
-      lt,
-      i.ratio
-    ), m = v(
-      D,
-      at,
-      i.radius
-    ), q = S || "img", y = !!S, H = F(n), J = (t == null ? void 0 : t.width) !== void 0 || (t == null ? void 0 : t.height) !== void 0 || (t == null ? void 0 : t.fill) !== void 0, Q = y && !J ? { fill: !0, sizes: "100%" } : {}, X = I(
-      "h-full w-full transition-opacity duration-300",
-      $,
-      R ? "opacity-100" : "opacity-0",
-      m,
-      b
-    );
-    let c = { ...t ?? {} };
-    if (y) {
-      const s = (t == null ? void 0 : t.loading) === "lazy", p = (t == null ? void 0 : t.priority) === !0;
-      (s || p) && console.warn(
-        `[Image] ${s ? '`loading="lazy"`' : "`priority={true}`"} with custom image component may cause rendering issues. Consider using \`loading="eager"\` and removing \`priority\` for this image.`
-      ), c = {
-        ...c,
-        loading: "eager",
-        // Remove priority if present to avoid conflicts
-        ...c.priority !== void 0 && { priority: !1 }
-      };
-    }
-    const Y = {
-      src: n,
-      alt: l,
-      loading: U,
-      onLoad: k,
-      onError: B,
-      className: X,
-      ref: O,
-      ...Q,
-      ...j,
-      ...c
-    }, Z = !y || H;
-    return /* @__PURE__ */ P("span", { className: I("relative block w-full", g, m), children: [
-      W && !R && /* @__PURE__ */ _(
-        "span",
-        {
-          "aria-hidden": "true",
-          className: I(
-            "absolute inset-0 animate-pulse bg-border/40",
-            m
-          )
-        }
-      ),
-      Z && /* @__PURE__ */ _(q, { ...Y }, n)
-    ] });
-  }
-);
-dt.displayName = "Image";
-export {
-  dt as Image
-};
+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(() => {
+		let e = F.current;
+		e?.complete && e.naturalWidth > 0 && M(!0);
+	}, [N]);
+	let I = (e) => {
+		M(!0), C?.(e);
+	}, L = (e) => {
+		if (h(y) && N !== y) {
+			P(y);
+			return;
+		}
+		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, 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 ?? {} };
+	if (J) {
+		let e = E?.loading === "lazy", t = E?.priority === !0;
+		(e || t) && console.warn(`[Image] ${e ? "`loading=\"lazy\"`" : "`priority={true}`"} with custom image component may cause rendering issues. Consider using \`loading="eager"\` and removing \`priority\` for this image.`), $ = {
+			...$,
+			loading: "eager",
+			...$.priority !== void 0 && { priority: !1 }
+		};
+	}
+	let te = {
+		src: N,
+		alt: l,
+		loading: H,
+		onLoad: I,
+		onError: L,
+		className: Q,
+		ref: R,
+		...Z,
+		...D,
+		...$
+	}, ne = !J || Y;
+	return /* @__PURE__ */ m("span", {
+		className: e("relative block w-full", G, K),
+		children: [U && !j && /* @__PURE__ */ p("span", {
+			"aria-hidden": "true",
+			className: e("absolute inset-0 animate-pulse bg-border/40", K)
+		}), ne && /* @__PURE__ */ p(q, { ...te }, N)]
+	});
+});
+g.displayName = "Image";
+//#endregion
+export { g as Image };

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

@@ -1,20 +1,19 @@
 "use client";
-import { registerComponentDefaults as o } from "../../libs/registry.js";
-const t = {
-  fit: "cover",
-  ratio: "auto",
-  radius: "md",
-  loading: "lazy",
-  showSkeleton: !0
-}, a = {
-  fit: "cover",
-  ratio: "auto",
-  radius: "md",
-  loading: "lazy",
-  showSkeleton: !0
-};
-o("image", t);
-export {
-  a as FALLBACK_IMAGE_CONFIG,
-  t as defaultImageConfig
+import { registerComponentDefaults as e } from "../../libs/registry.js";
+//#region src/components/image/image-config.ts
+var t = {
+	fit: "cover",
+	ratio: "auto",
+	radius: "md",
+	loading: "lazy",
+	showSkeleton: !0
+}, n = {
+	fit: "cover",
+	ratio: "auto",
+	radius: "md",
+	loading: "lazy",
+	showSkeleton: !0
 };
+e("image", t);
+//#endregion
+export { n as FALLBACK_IMAGE_CONFIG, t as defaultImageConfig };

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

@@ -1,17 +1,16 @@
 "use client";
-const e = {
-  cover: "object-cover",
-  contain: "object-contain",
-  fill: "object-fill",
-  none: "object-none",
-  "scale-down": "object-scale-down"
-}, o = {
-  auto: "",
-  square: "aspect-square",
-  video: "aspect-video",
-  portrait: "aspect-[3/4]"
-};
-export {
-  e as IMAGE_FIT_CLASS,
-  o as IMAGE_RATIO_CLASS
+//#region src/components/image/image-styles.ts
+var e = {
+	cover: "object-cover",
+	contain: "object-contain",
+	fill: "object-fill",
+	none: "object-none",
+	"scale-down": "object-scale-down"
+}, t = {
+	auto: "",
+	square: "aspect-square",
+	video: "aspect-video",
+	portrait: "aspect-[3/4]"
 };
+//#endregion
+export { e as IMAGE_FIT_CLASS, t as IMAGE_RATIO_CLASS };