asheeui 0.6.15 → 1.0.0

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

@@ -0,0 +1,32 @@
+import { Color } from '../../shared';
+import { AlertType } from './alert-config';
+/**
+ * Colour each intent is presented in.
+ * The colour resolves through the framework's colour engine, so an alert has
+ * no palette colour of its own.
+ */
+export declare const ALERT_TYPE_COLOR: Record<AlertType, Color>;
+/**
+ * How urgently each intent is announced.
+ * `alert` interrupts what assistive technology is reading, so it is reserved
+ * for the two intents that need attention now.
+ */
+export declare const ALERT_TYPE_ROLE: Record<AlertType, "alert" | "status">;
+/**
+ * Colour of the leading icon for each intent.
+ * The icon is decoration: the message text carries the information.
+ */
+export declare const ALERT_TYPE_ICON_CLASS: Record<AlertType, string>;
+/**
+ * Base classes for the alert surface and its content layout.
+ */
+export declare const ALERT_BASE_CLASS = "relative flex items-start gap-3 w-full p-3 text-sm transition-colors";
+/**
+ * Classes for the icon slot.
+ */
+export declare const ALERT_ICON_CLASS = "shrink-0 mt-0.5 [&_svg]:size-5";
+/**
+ * Classes for the dismiss control.
+ */
+export declare const ALERT_DISMISS_CLASS = "shrink-0 inline-flex items-center justify-center size-6 rounded-sm text-current/70 hover:text-current transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-current";
+//# sourceMappingURL=alert-styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"alert-styles.d.ts","sourceRoot":"","sources":["../../../src/components/alert/alert-styles.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAEhD;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,SAAS,EAAE,KAAK,CAKrD,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,eAAe,EAAE,MAAM,CAAC,SAAS,EAAE,OAAO,GAAG,QAAQ,CAKjE,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,qBAAqB,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAK3D,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,gBAAgB,yEAC2C,CAAC;AAEzE;;GAEG;AACH,eAAO,MAAM,gBAAgB,mCAAmC,CAAC;AAEjE;;GAEG;AACH,eAAO,MAAM,mBAAmB,+LAC8J,CAAC"}

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

@@ -0,0 +1,20 @@
+"use client";
+//#region src/components/alert/alert-styles.ts
+var e = {
+	info: "primary",
+	success: "success",
+	warning: "warning",
+	error: "danger"
+}, t = {
+	info: "status",
+	success: "status",
+	warning: "alert",
+	error: "alert"
+}, n = {
+	info: "text-primary",
+	success: "text-success",
+	warning: "text-warning",
+	error: "text-danger"
+}, r = "relative flex items-start gap-3 w-full p-3 text-sm transition-colors", i = "shrink-0 mt-0.5 [&_svg]:size-5", a = "shrink-0 inline-flex items-center justify-center size-6 rounded-sm text-current/70 hover:text-current transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-current";
+//#endregion
+export { r as ALERT_BASE_CLASS, a as ALERT_DISMISS_CLASS, i as ALERT_ICON_CLASS, e as ALERT_TYPE_COLOR, n as ALERT_TYPE_ICON_CLASS, t as ALERT_TYPE_ROLE };

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/alert/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC"}

package/dist/components/alert/index.js

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

package/dist/components/autocomplete/Autocomplete.d.ts

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 import { InputProps } from '../input/Input';
-import { SelectMenuOption } from '../select-menu';
-import { MenuProps } from '../select-menu/SelectMenu';
+import { MenuOption } from '../menu';
+import { MenuProps } from '../menu/Menu';
 import { AutocompleteConfig } from './autocomplete-config';
 /**
  * Configuration options for the Autocomplete component.
@@ -15,7 +15,7 @@ export interface AutocompleteProps extends Omit<InputProps, "value" | "onChange"
      *
      * @default []
      */
-    options: SelectMenuOption[];
+    options: MenuOption[];
     /**
      * Controlled selected value, shown as its option label.
      * When allowCustomValue is true, this can be a free-form string.
@@ -25,7 +25,7 @@ export interface AutocompleteProps extends Omit<InputProps, "value" | "onChange"
      * Callback fired with the selected value and option.
      * Called when a suggestion is selected from the dropdown.
      */
-    onValueChange?: (value: string | number, option?: SelectMenuOption) => void;
+    onValueChange?: (value: string | number, option?: MenuOption) => void;
     /**
      * Callback fired whenever the raw input text changes.
      * Called on every keystroke, providing the current input value.
@@ -56,7 +56,7 @@ export interface AutocompleteProps extends Omit<InputProps, "value" | "onChange"
  * A text input with a filterable suggestion dropdown.
  *
  * Autocomplete combines an {@link Input} trigger with a floating
- * {@link SelectMenu}. Suggestions are filtered as the user types, the
+ * {@link Menu}. Suggestions are filtered as the user types, the
  * selected value is reported through `onValueChange`, and free-form
  * values are supported via `allowCustomValue`. Menu tokens resolve
  * through the standard AsheeUI cascade.
@@ -134,7 +134,7 @@ export interface AutocompleteProps extends Omit<InputProps, "value" | "onChange"
  *
  * @see AutocompleteConfig - The configuration type for component defaults.
  * @see Input - The underlying input component for the trigger.
- * @see SelectMenu - The dropdown component used for suggestions.
+ * @see Menu - The dropdown component used for suggestions.
  * @see useAsheeConfig - Hook for accessing the global configuration.
  */
 export declare const Autocomplete: import('react').ForwardRefExoticComponent<AutocompleteProps & import('react').RefAttributes<HTMLInputElement>>;

package/dist/components/autocomplete/Autocomplete.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Autocomplete.d.ts","sourceRoot":"","sources":["../../../src/components/autocomplete/Autocomplete.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAEL,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AAKf,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAE,KAAK,gBAAgB,EAAqB,MAAM,gBAAgB,CAAC;AAC1E,OAAO,EAAE,KAAK,SAAS,EAAc,MAAM,2BAA2B,CAAC;AACvE,OAAO,EACL,KAAK,kBAAkB,EAExB,MAAM,uBAAuB,CAAC;AAI/B;;;;GAIG;AACH,MAAM,WAAW,iBACf,SAAQ,IAAI,CAAC,UAAU,EAAE,OAAO,GAAG,UAAU,GAAG,UAAU,CAAC,EACzD,IAAI,CAAC,kBAAkB,EAAE,MAAM,CAAC;IAClC;;;;;OAKG;IACH,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAE5B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB;;;OAGG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,MAAM,CAAC,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAE5E;;;OAGG;IACH,aAAa,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAE7C;;;;;;;;OAQG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoFG;AACH,eAAO,MAAM,YAAY,gHAkMxB,CAAC"}
+{"version":3,"file":"Autocomplete.d.ts","sourceRoot":"","sources":["../../../src/components/autocomplete/Autocomplete.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAEL,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AAKf,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAE,KAAK,UAAU,EAAiC,MAAM,SAAS,CAAC;AAEzE,OAAO,EAAE,KAAK,SAAS,EAAQ,MAAM,cAAc,CAAC;AACpD,OAAO,EACL,KAAK,kBAAkB,EAExB,MAAM,uBAAuB,CAAC;AAI/B;;;;GAIG;AACH,MAAM,WAAW,iBACf,SAAQ,IAAI,CAAC,UAAU,EAAE,OAAO,GAAG,UAAU,GAAG,UAAU,CAAC,EACzD,IAAI,CAAC,kBAAkB,EAAE,MAAM,CAAC;IAClC;;;;;OAKG;IACH,OAAO,EAAE,UAAU,EAAE,CAAC;IAEtB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB;;;OAGG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,MAAM,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAEtE;;;OAGG;IACH,aAAa,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAE7C;;;;;;;;OAQG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoFG;AACH,eAAO,MAAM,YAAY,gHA2RxB,CAAC"}

package/dist/components/autocomplete/Autocomplete.js

@@ -1,137 +1,115 @@
 "use client";
-import { jsxs as V, jsx as A } from "react/jsx-runtime";
-import { useFocus as g, useDismiss as C, useRole as ee, useInteractions as te } from "@floating-ui/react";
-import { forwardRef as se, useMemo as F, useState as K, useEffect as re, useCallback as L } from "react";
-import { useAsheeConfig as oe } from "../../libs/context.js";
-import { resolveCascade as v, resolveRadiusKey as ie } from "../../utils/resolve-token.js";
-import { Input as le } from "../input/Input.js";
-import { SelectMenu as ce } from "../select-menu/SelectMenu.js";
-import { FALLBACK_AUTOCOMPLETE_CONFIG as p } from "./autocomplete-config.js";
-import { useSelectFloating as fe } from "../select-menu/use-select-floating.js";
-const me = se(
-  ({
-    options: o = [],
-    value: s,
-    onValueChange: r,
-    onInputChange: l,
-    allowCustomValue: R = !1,
-    belowList: M,
-    menu: P,
-    variant: z,
-    color: w,
-    radius: E,
-    size: N,
-    endContent: T,
-    onClick: n,
-    disabled: O,
-    placeholder: j = "Type to search...",
-    className: _,
-    ...B
-  }, c) => {
-    var b;
-    const f = oe(), e = (b = f.components) == null ? void 0 : b.autocomplete, D = v(
-      z,
-      e == null ? void 0 : e.variant,
-      f.defaultVariant,
-      p.variant
-    ), G = v(
-      w,
-      e == null ? void 0 : e.color,
-      f.defaultColor,
-      p.color
-    ), I = ie(
-      E,
-      e == null ? void 0 : e.radius,
-      f.defaultRadius,
-      p.radius
-    ), U = v(
-      N,
-      e == null ? void 0 : e.size,
-      void 0,
-      p.size
-    ), i = F(
-      () => o.find((t) => t.value === s),
-      [o, s]
-    ), [S, m] = K(!1), [a, u] = K(
-      () => i ? i.label : String(s ?? "")
-    );
-    re(() => {
-      i ? u(i.label) : s != null && u(String(s));
-    }, [i, s]);
-    const { refs: x, context: d, isPositioned: q, floatingStyles: H } = fe({
-      isOpen: S,
-      onOpenChange: m,
-      disabled: O
-    }), J = g(d), Q = C(d), W = ee(d, { role: "combobox" }), { getReferenceProps: X, getFloatingProps: Y } = te([
-      J,
-      Q,
-      W
-    ]), Z = F(() => a.trim() ? o.filter(
-      (t) => t.label.toLowerCase().includes(a.toLowerCase())
-    ) : o, [o, a]), $ = L(
-      (t) => {
-        const y = t.target.value;
-        u(y), l == null || l(y), m(!0), R && (r == null || r(y));
-      },
-      [R, l, r]
-    ), k = L(
-      (t) => {
-        u(t.label), r == null || r(t.value, t), m(!1);
-      },
-      [r]
-    ), h = F(
-      () => s != null ? [s] : [],
-      [s]
-    );
-    return /* @__PURE__ */ V("div", { className: "w-full relative inline-block", children: [
-      /* @__PURE__ */ A(
-        le,
-        {
-          ref: (t) => {
-            x.setReference(t), typeof c == "function" ? c(t) : c && (c.current = t);
-          },
-          variant: D,
-          radius: I,
-          color: G,
-          size: U,
-          disabled: O,
-          placeholder: j,
-          value: a,
-          onChange: $,
-          onClick: (t) => {
-            O || m(!0), n == null || n(t);
-          },
-          "aria-expanded": S,
-          "aria-autocomplete": "none",
-          endContent: T,
-          className: _,
-          ...X(B)
-        }
-      ),
-      /* @__PURE__ */ A(
-        ce,
-        {
-          isOpen: S,
-          floatingStyles: H,
-          context: d,
-          getFloatingProps: Y,
-          setFloatingRef: x.setFloating,
-          isPositioned: q,
-          options: Z,
-          selectedValues: h,
-          onSelectMenuOption: k,
-          isSearch: !1,
-          belowList: M,
-          menuProps: P,
-          menuConfig: e == null ? void 0 : e.menu,
-          initialFocus: -1,
-          returnFocus: !1
-        }
-      )
-    ] });
-  }
-);
-me.displayName = "Autocomplete";
-export {
-  me as Autocomplete
-};
+"use client";
+import { useAsheeConfig as e } from "../../libs/context.js";
+import { resolveCascade as t, resolveRadiusKey as n } from "../../utils/resolve-token.js";
+import { Input as r } from "../input/Input.js";
+import { edgeOptionIndex as i, nextOptionIndex as a } from "../menu/menu-navigation.js";
+import { Menu as o, menuOptionId as s } from "../menu/Menu.js";
+import { useMenuFloating as c } from "../menu/use-menu-floating.js";
+import { FALLBACK_AUTOCOMPLETE_CONFIG as l } from "./autocomplete-config.js";
+import { forwardRef as u, useCallback as d, useEffect as f, useMemo as p, useState as m } from "react";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
+import { useDismiss as _, useFocus as ee, useInteractions as v, useRole as y } from "@floating-ui/react";
+//#region src/components/autocomplete/Autocomplete.tsx
+var b = u(({ options: u = [], value: b, onValueChange: x, onInputChange: S, allowCustomValue: C = !1, belowList: w, menu: T, variant: te, color: ne, radius: E, size: D, endContent: O, onClick: k, onKeyDown: A, disabled: j, placeholder: M = "Type to search...", className: N, ...P }, F) => {
+	let I = e(), L = I.components?.autocomplete, R = t(te, L?.variant, I.defaultVariant, l.variant), z = t(ne, L?.color, I.defaultColor, l.color), B = n(E, L?.radius, I.defaultRadius, l.radius), V = t(D, L?.size, void 0, l.size), H = p(() => u.find((e) => e.value === b), [u, b]), [U, W] = m(!1), [G, K] = m(() => H ? H.label : String(b ?? "")), [q, J] = m(null);
+	f(() => {
+		H ? K(H.label) : b != null && K(String(b));
+	}, [H, b]);
+	let { refs: Y, context: X, isPositioned: Z, floatingStyles: re } = c({
+		isOpen: U,
+		onOpenChange: W,
+		disabled: j
+	}), ie = ee(X), ae = _(X), oe = y(X, { role: "combobox" }), { getReferenceProps: se, getFloatingProps: ce } = v([
+		ie,
+		ae,
+		oe
+	]), Q = p(() => G.trim() ? u.filter((e) => e.label.toLowerCase().includes(G.toLowerCase())) : u, [u, G]), le = d((e) => {
+		let t = e.target.value;
+		K(t), S?.(t), W(!0), J(null), C && x?.(t);
+	}, [
+		C,
+		S,
+		x
+	]), $ = d((e) => {
+		K(e.label), x?.(e.value, e), W(!1), J(null);
+	}, [x]), ue = d((e) => {
+		if (A?.(e), e.defaultPrevented || j) return;
+		let t = e.key === "ArrowDown" ? 1 : e.key === "ArrowUp" ? -1 : 0;
+		if (t !== 0) {
+			if (e.preventDefault(), !U) {
+				W(!0);
+				return;
+			}
+			J((e) => a(Q, e, t));
+			return;
+		}
+		if (e.key === "Home" || e.key === "End") {
+			if (!U) return;
+			e.preventDefault(), J(i(Q, e.key === "Home" ? "first" : "last"));
+			return;
+		}
+		if (e.key === "Enter" && U) {
+			let t = q === null ? void 0 : Q[q];
+			t && !t.disabled && (e.preventDefault(), $(t));
+			return;
+		}
+		e.key === "Escape" && U && (W(!1), J(null));
+	}, [
+		q,
+		A,
+		j,
+		Q,
+		$,
+		U
+	]), de = q === null ? void 0 : s(X.floatingId, q), fe = se({
+		...P,
+		onKeyDown: ue
+	}), pe = p(() => b == null ? [] : [b], [b]);
+	return /* @__PURE__ */ g("div", {
+		className: "w-full relative inline-block",
+		children: [/* @__PURE__ */ h(r, {
+			ref: (e) => {
+				Y.setReference(e), typeof F == "function" ? F(e) : F && (F.current = e);
+			},
+			variant: R,
+			radius: B,
+			color: z,
+			size: V,
+			disabled: j,
+			placeholder: M,
+			value: G,
+			onChange: le,
+			onClick: (e) => {
+				j || W(!0), k?.(e);
+			},
+			"aria-expanded": U,
+			"aria-autocomplete": "list",
+			"aria-activedescendant": de,
+			endContent: O,
+			className: N,
+			...fe
+		}), /* @__PURE__ */ h(o, {
+			isOpen: U,
+			floatingStyles: re,
+			context: X,
+			getFloatingProps: ce,
+			setFloatingRef: Y.setFloating,
+			isPositioned: Z,
+			activeIndex: q,
+			onActiveIndexChange: J,
+			options: Q,
+			selectedValues: pe,
+			onOptionSelect: $,
+			isSearch: !1,
+			belowList: w,
+			menuProps: T,
+			menuConfig: L?.menu,
+			initialFocus: -1,
+			returnFocus: !1
+		})]
+	});
+});
+b.displayName = "Autocomplete";
+//#endregion
+export { b as Autocomplete };

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

@@ -1,5 +1,5 @@
 import { InputConfig } from '../input';
-import { MenuConfig } from '../select-menu';
+import { MenuConfig } from '../menu';
 /**
  * Theme configuration options for the Autocomplete component.
  *

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

@@ -1 +1 @@
-{"version":3,"file":"autocomplete-config.d.ts","sourceRoot":"","sources":["../../../src/components/autocomplete/autocomplete-config.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,EAAsB,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAChE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAEjD;;;;;;GAMG;AACH,MAAM,WAAW,kBAAmB,SAAQ,WAAW;IACrD;;;OAGG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB;AAED;;;;GAIG;AACH,eAAO,MAAM,yBAAyB,EAAE,kBAEvC,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,4BAA4B;;;;;;;;CAE/B,CAAC;AAEX,OAAO,QAAQ,qBAAqB,CAAC;IACnC,UAAU,2BAA2B;QACnC,YAAY,EAAE,kBAAkB,CAAC;KAClC;CACF"}
+{"version":3,"file":"autocomplete-config.d.ts","sourceRoot":"","sources":["../../../src/components/autocomplete/autocomplete-config.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,EAAsB,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAChE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE1C;;;;;;GAMG;AACH,MAAM,WAAW,kBAAmB,SAAQ,WAAW;IACrD;;;OAGG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB;AAED;;;;GAIG;AACH,eAAO,MAAM,yBAAyB,EAAE,kBAEvC,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,4BAA4B;;;;;;;;CAE/B,CAAC;AAEX,OAAO,QAAQ,qBAAqB,CAAC;IACnC,UAAU,2BAA2B;QACnC,YAAY,EAAE,kBAAkB,CAAC;KAClC;CACF"}

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

@@ -1,14 +1,9 @@
 "use client";
-import { registerComponentDefaults as o } from "../../libs/registry.js";
+import { registerComponentDefaults as e } from "../../libs/registry.js";
 import { FALLBACK_FIELD_CONFIG as t } from "../field/field-config.js";
-import { defaultInputConfig as e } from "../input/input-config.js";
-const m = {
-  ...e
-}, p = {
-  ...t
-};
-o("autocomplete", m);
-export {
-  p as FALLBACK_AUTOCOMPLETE_CONFIG,
-  m as defaultAutocompleteConfig
-};
+import { defaultInputConfig as n } from "../input/input-config.js";
+//#region src/components/autocomplete/autocomplete-config.ts
+var r = { ...n }, i = { ...t };
+e("autocomplete", r);
+//#endregion
+export { i as FALLBACK_AUTOCOMPLETE_CONFIG, r as defaultAutocompleteConfig };

package/dist/components/avatar/Avatar.d.ts

@@ -0,0 +1,87 @@
+import { ElementType, HTMLAttributes, ReactNode } from 'react';
+import { AvatarConfig } from './avatar-config';
+type BaseAvatarProps = AvatarConfig & Omit<HTMLAttributes<HTMLDivElement>, "color" | "children">;
+/**
+ * Configuration options for the Avatar component.
+ */
+export interface AvatarProps extends BaseAvatarProps {
+    /**
+     * Name of the represented entity.
+     * Supplies the initials the avatar falls back to and, unless `alt` overrides
+     * it, the name assistive technology reads.
+     */
+    name?: string;
+    /**
+     * Picture of the represented entity.
+     * When it is missing or fails to load, the avatar shows its fallback.
+     */
+    src?: string;
+    /**
+     * Name assistive technology reads, instead of `name`.
+     * Use it when the entity's name is not the wording the avatar should carry.
+     */
+    alt?: string;
+    /**
+     * Component that replaces the picture inside the avatar, passed to
+     * {@link Image}. This is how a consumer keeps a framework image working
+     * inside an avatar.
+     */
+    component?: ElementType;
+    /**
+     * Additional props for that component, passed to {@link Image}.
+     */
+    componentProps?: Record<string, unknown>;
+    /**
+     * Content shown in place of the initials when there is no picture.
+     */
+    fallback?: ReactNode;
+}
+/**
+ * An entity representation with an initials fallback.
+ *
+ * Avatar shows the picture of a person or an entity, and falls back to that
+ * entity's initials when there is no picture or the picture fails to load. The
+ * fallback sits on the accent surface of the resolved colour, and the picture
+ * is rendered through the framework's {@link Image} primitive, so a consumer
+ * keeps its own image component by passing `component`.
+ *
+ * The avatar carries the entity's name as a single image role with a label, so
+ * assistive technology reads one name instead of the initials and the picture
+ * separately. With neither a name nor an alternative given, the avatar is
+ * decoration and is hidden from assistive technology: that is the right
+ * behaviour for a purely decorative picture beside text that already names the
+ * entity.
+ *
+ * Diameter, radius and colour resolve through the standard AsheeUI cascade:
+ * prop, component config, global theme defaults, and the built-in fallback.
+ *
+ * @param props - Avatar configuration options and div attributes.
+ * @param props.name - The represented entity's name.
+ * @param props.src - The picture's source.
+ * @param props.alt - Name for assistive technology, instead of `name`.
+ * @param props.component - Custom image component, passed to `Image`.
+ * @param props.componentProps - Additional props for that component.
+ * @param props.fallback - Content shown when there is no picture.
+ * @param props.size - Diameter scale. Defaults to "md".
+ * @param props.radius - Corner rounding. Defaults to "full".
+ * @param props.color - Accent colour of the fallback surface.
+ * @param props.className - Extra classes applied last, which is where a
+ * consumer overrides the diameter.
+ *
+ * @example
+ * ```tsx
+ * <Avatar name="Ada Lovelace" src="/ada.png" />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // No picture: the initials carry the identity.
+ * <Avatar name="Ada Lovelace" size="lg" />
+ * ```
+ *
+ * @see AvatarConfig - The configuration type for component defaults.
+ * @see Image - The framework's image primitive.
+ */
+export declare const Avatar: import('react').ForwardRefExoticComponent<AvatarProps & import('react').RefAttributes<HTMLDivElement>>;
+export {};
+//# sourceMappingURL=Avatar.d.ts.map

package/dist/components/avatar/Avatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/Avatar.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH,OAAO,EACL,KAAK,WAAW,EAEhB,KAAK,cAAc,EACnB,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AAOf,OAAO,EACL,KAAK,YAAY,EAElB,MAAM,iBAAiB,CAAC;AASzB,KAAK,eAAe,GAAG,YAAY,GACjC,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,CAAC;AAE7D;;GAEG;AACH,MAAM,WAAW,WAAY,SAAQ,eAAe;IAClD;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;;OAIG;IACH,SAAS,CAAC,EAAE,WAAW,CAAC;IAExB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAEzC;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,eAAO,MAAM,MAAM,wGAsGlB,CAAC"}

package/dist/components/avatar/Avatar.js

@@ -0,0 +1,43 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.js";
+import { RADIUS_CLASS as t } from "../../shared/radius.js";
+import { resolveVariantClass as n } from "../../shared/variant.js";
+import { useAsheeConfig as r } from "../../libs/context.js";
+import { resolveCascade as i, resolveClassKey as a } from "../../utils/resolve-token.js";
+import { Image as o } from "../image/Image.js";
+import { FALLBACK_AVATAR_CONFIG as s } from "./avatar-config.js";
+import { AVATAR_BASE_CLASS as c, AVATAR_FALLBACK_VARIANT as l, AVATAR_FONT_CLASS as u, AVATAR_SIZE_CLASS as d } from "./avatar-styles.js";
+import { getInitials as f } from "./avatar.helpers.js";
+import { forwardRef as p, useState as m } from "react";
+import { jsx as h } from "react/jsx-runtime";
+//#region src/components/avatar/Avatar.tsx
+var g = p(({ name: p, src: g, alt: _, component: v, componentProps: y, fallback: b, size: x, radius: S, color: C, className: w, ...T }, E) => {
+	let D = r(), O = D.components?.avatar, [k, A] = m(!1), j = i(x, O?.size, void 0, s.size), M = i(S, O?.radius, D.defaultRadius, s.radius), N = i(C, O?.color, D.defaultColor, s.color), P = a(j, d, s.size), F = a(j, u, s.size), I = a(M, t, s.radius), L = _ ?? p, R = !!g && !k;
+	return /* @__PURE__ */ h("div", {
+		ref: E,
+		role: "img",
+		"aria-label": L,
+		"aria-hidden": !L || void 0,
+		className: e(c, P, I, w),
+		...T,
+		children: R ? /* @__PURE__ */ h(o, {
+			src: g,
+			alt: "",
+			component: v,
+			componentProps: y,
+			fit: "cover",
+			radius: M,
+			showSkeleton: !1,
+			onError: () => A(!0),
+			className: "size-full"
+		}) : /* @__PURE__ */ h("span", {
+			"aria-hidden": "true",
+			className: e("inline-flex items-center justify-center size-full", F, n(l, N)),
+			children: b ?? f(p ?? "")
+		})
+	});
+});
+g.displayName = "Avatar";
+//#endregion
+export { g as Avatar };

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

@@ -0,0 +1,48 @@
+import { Color, Radius, Size } from '../../shared';
+/**
+ * Theme configuration options for the Avatar component.
+ *
+ * Set under `components.avatar` in the AsheeUI config. Values feed the
+ * component-level fallback tier of the theme cascade.
+ */
+export interface AvatarConfig {
+    /**
+     * Diameter scale of the avatar.
+     *
+     * @default "md"
+     */
+    size?: Size;
+    /**
+     * Corner rounding.
+     * The default makes a circular avatar; a smaller radius makes it square.
+     *
+     * @default "full"
+     */
+    radius?: Radius;
+    /**
+     * Theme accent colour.
+     * Colours the surface the initials fall back to. It does not tint the image.
+     *
+     * @default "primary"
+     */
+    color?: Color;
+}
+/**
+ * Default config values registered for the Avatar component.
+ *
+ * `color` is intentionally absent so it inherits from the global
+ * `defaultColor`.
+ */
+export declare const defaultAvatarConfig: AvatarConfig;
+/**
+ * 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_AVATAR_CONFIG: Required<AvatarConfig>;
+declare module "../../libs/registry" {
+    interface ComponentTypeConfigRegistry {
+        avatar: AvatarConfig;
+    }
+}
+//# sourceMappingURL=avatar-config.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"avatar-config.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/avatar-config.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAExD;;;;;GAKG;AACH,MAAM,WAAW,YAAY;IAC3B;;;;OAIG;IACH,IAAI,CAAC,EAAE,IAAI,CAAC;IAEZ;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC;CACf;AAED;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,EAAE,YAGjC,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,EAAE,QAAQ,CAAC,YAAY,CAIhD,CAAC;AAEX,OAAO,QAAQ,qBAAqB,CAAC;IACnC,UAAU,2BAA2B;QACnC,MAAM,EAAE,YAAY,CAAC;KACtB;CACF"}

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

@@ -0,0 +1,14 @@
+"use client";
+import { registerComponentDefaults as e } from "../../libs/registry.js";
+//#region src/components/avatar/avatar-config.ts
+var t = {
+	size: "md",
+	radius: "full"
+}, n = {
+	size: "md",
+	radius: "full",
+	color: "primary"
+};
+e("avatar", t);
+//#endregion
+export { n as FALLBACK_AVATAR_CONFIG, t as defaultAvatarConfig };

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

@@ -0,0 +1,21 @@
+import { Size, Variant } from '../../shared';
+/**
+ * CSS classes for the avatar's diameter based on size.
+ */
+export declare const AVATAR_SIZE_CLASS: Record<Size, string>;
+/**
+ * CSS classes for the initials' font size based on size.
+ */
+export declare const AVATAR_FONT_CLASS: Record<Size, string>;
+/**
+ * Base classes for the avatar frame.
+ * The frame clips the picture to the resolved radius and centres a fallback.
+ */
+export declare const AVATAR_BASE_CLASS = "relative inline-flex items-center justify-center shrink-0 overflow-hidden select-none font-medium uppercase";
+/**
+ * The variant the initials fall back to.
+ * An avatar shows an entity, so its fallback is a filled accent surface rather
+ * than an outline or a tint.
+ */
+export declare const AVATAR_FALLBACK_VARIANT: Variant;
+//# sourceMappingURL=avatar-styles.d.ts.map