@almadar/shell-web 0.0.0-stage → 1.0.0

package/dist/chunk-AE7VCQB6.js

@@ -0,0 +1,561 @@
+import { resolveThemeForRuntime, themeTokensToCssVars } from './chunk-3BBUBJFF.js';
+import { useUISlotManager } from './chunk-YHMRX6YA.js';
+import { useThemeScope, useTheme, keyInViewerMode, ThemeScopeContext, Box, cn } from './chunk-4YXBKHHM.js';
+import { createContext, useMemo, useContext, useCallback, useEffect } from 'react';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { ANONYMOUS_USER, isThemeRegistryKey, toPayloadValue } from '@almadar/core';
+export { ANONYMOUS_USER } from '@almadar/core';
+import { createLogger } from '@almadar/logger';
+
+var UISlotContext = createContext(null);
+function UISlotProvider({ children }) {
+  const slotManager = useUISlotManager();
+  const contextValue = useMemo(() => slotManager, [slotManager]);
+  return /* @__PURE__ */ jsx(UISlotContext.Provider, { value: contextValue, children });
+}
+function useUISlots() {
+  const context = useContext(UISlotContext);
+  if (!context) {
+    throw new Error(
+      "useUISlots must be used within a UISlotProvider. Make sure your component tree is wrapped with <UISlotProvider>."
+    );
+  }
+  return context;
+}
+function useSlotContent(slot) {
+  const { getContent } = useUISlots();
+  return getContent(slot);
+}
+function useSlotHasContent(slot) {
+  const { hasContent } = useUISlots();
+  return hasContent(slot);
+}
+var CurrentPagePathContext = createContext(void 0);
+var CurrentPagePathProvider = ({
+  value,
+  children
+}) => /* @__PURE__ */ jsx(CurrentPagePathContext.Provider, { value, children });
+CurrentPagePathProvider.displayName = "CurrentPagePathProvider";
+var useCurrentPagePath = () => useContext(CurrentPagePathContext);
+var UserContext = createContext(null);
+function UserProvider({
+  user = null,
+  children
+}) {
+  const hasRole = useCallback(
+    (role) => {
+      if (!user) return role === "anonymous";
+      return user.role === role;
+    },
+    [user]
+  );
+  const hasPermission = useCallback(
+    (permission) => {
+      if (!user) return false;
+      return user.permissions?.includes(permission) ?? false;
+    },
+    [user]
+  );
+  const hasAnyRole = useCallback(
+    (roles) => {
+      if (!user) return roles.includes("anonymous");
+      return user.role ? roles.includes(user.role) : false;
+    },
+    [user]
+  );
+  const hasAllPermissions = useCallback(
+    (permissions) => {
+      if (!user || !user.permissions) return false;
+      return permissions.every((p) => user.permissions?.includes(p));
+    },
+    [user]
+  );
+  const getUserField = useCallback(
+    (path) => {
+      const viewer = user ?? ANONYMOUS_USER;
+      const [first, ...rest] = path.split(".");
+      if (!first) return void 0;
+      let value = viewer[first];
+      for (const segment of rest) {
+        if (value === null || typeof value !== "object" || Array.isArray(value) || value instanceof Date) {
+          return void 0;
+        }
+        value = value[segment];
+      }
+      return value;
+    },
+    [user]
+  );
+  const contextValue = useMemo(
+    () => ({
+      user,
+      isLoggedIn: user !== null,
+      hasRole,
+      hasPermission,
+      hasAnyRole,
+      hasAllPermissions,
+      getUserField
+    }),
+    [user, hasRole, hasPermission, hasAnyRole, hasAllPermissions, getUserField]
+  );
+  return /* @__PURE__ */ jsx(UserContext.Provider, { value: contextValue, children });
+}
+function useUser() {
+  const context = useContext(UserContext);
+  if (!context) {
+    return {
+      user: null,
+      isLoggedIn: false,
+      hasRole: (role) => role === "anonymous",
+      hasPermission: () => false,
+      hasAnyRole: (roles) => roles.includes("anonymous"),
+      hasAllPermissions: () => false,
+      getUserField: () => void 0
+    };
+  }
+  return context;
+}
+function useHasRole(role) {
+  const { hasRole } = useUser();
+  return hasRole(role);
+}
+function useHasPermission(permission) {
+  const { hasPermission } = useUser();
+  return hasPermission(permission);
+}
+function useUserForEvaluation() {
+  const { user, isLoggedIn } = useUser();
+  return isLoggedIn && user ? user : void 0;
+}
+var DESIGN_COLOR_TOKENS = [
+  "primary",
+  "primary-foreground",
+  "primary-hover",
+  "secondary",
+  "secondary-foreground",
+  "secondary-hover",
+  "muted",
+  "muted-foreground",
+  "accent",
+  "accent-foreground",
+  "background",
+  "foreground",
+  "card",
+  "card-foreground",
+  "surface",
+  "border",
+  "input",
+  "ring",
+  "error",
+  "error-foreground",
+  "success",
+  "success-foreground",
+  "warning",
+  "warning-foreground",
+  "info",
+  "info-foreground"
+];
+var DESIGN_COLOR_UTILITIES = ["bg", "text", "border"];
+var DESIGN_RADIUS_TOKENS = ["none", "sm", "md", "lg", "xl", "full"];
+var DESIGN_SPACING_SCALE = [
+  0,
+  0.5,
+  1,
+  1.5,
+  2,
+  2.5,
+  3,
+  3.5,
+  4,
+  5,
+  6,
+  7,
+  8,
+  9,
+  10,
+  11,
+  12,
+  14,
+  16,
+  20,
+  24,
+  28,
+  32,
+  36,
+  40,
+  44,
+  48,
+  52,
+  56,
+  60,
+  64,
+  72,
+  80,
+  96
+];
+var DESIGN_SPACING_UTILITIES = [
+  "w",
+  "h",
+  "min-w",
+  "max-w",
+  "min-h",
+  "max-h",
+  "p",
+  "px",
+  "py",
+  "pt",
+  "pr",
+  "pb",
+  "pl",
+  "m",
+  "mx",
+  "my",
+  "gap"
+];
+var DESIGN_SPACING_STEP_PX = 4;
+var defaultSpacingStepPx = (step) => step * DESIGN_SPACING_STEP_PX;
+var DESIGN_SPACING_TOKEN_STEPS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
+function spacingTokenOf(step) {
+  return DESIGN_SPACING_TOKEN_STEPS.includes(step) ? `--space-${step}` : null;
+}
+function snapToSpacingStep(px, pxOf = defaultSpacingStepPx) {
+  const target = Math.max(0, px);
+  let best = DESIGN_SPACING_SCALE[0];
+  for (const step of DESIGN_SPACING_SCALE) {
+    const d = Math.abs(pxOf(step) - target);
+    const bestD = Math.abs(pxOf(best) - target);
+    if (d < bestD || d === bestD && spacingTokenOf(step) !== null && spacingTokenOf(best) === null) best = step;
+  }
+  return best;
+}
+var SPACING_STEP_BY_TEXT = new Map(
+  DESIGN_SPACING_SCALE.map((step) => [String(step), step])
+);
+function stepOf(className, utility) {
+  if (!className.startsWith(`${utility}-`)) return void 0;
+  return SPACING_STEP_BY_TEXT.get(className.slice(utility.length + 1));
+}
+function isAxisSizeClass(className, axis) {
+  return className.startsWith(`${axis}-`);
+}
+function sizingOf(classes, axis) {
+  for (const c of classes) {
+    if (c === `${axis}-full`) return { mode: "fill" };
+    if (c === `${axis}-fit`) return { mode: "hug" };
+    const step = stepOf(c, axis);
+    if (step !== void 0) return { mode: "fixed", step };
+  }
+  return { mode: "hug" };
+}
+function withSizing(classes, axis, sizing) {
+  const kept = classes.filter((c) => !isAxisSizeClass(c, axis));
+  const next = sizing.mode === "fixed" ? `${axis}-${sizing.step}` : sizing.mode === "hug" ? `${axis}-fit` : `${axis}-full`;
+  return [...kept, next];
+}
+function sizeLimitOf(classes, axis, limit) {
+  for (const c of classes) {
+    const step = stepOf(c, `${limit}-${axis}`);
+    if (step !== void 0) return step;
+  }
+  return null;
+}
+function withSizeLimit(classes, axis, limit, step) {
+  const kept = classes.filter((c) => !c.startsWith(`${limit}-${axis}-`));
+  return step === null ? kept : [...kept, `${limit}-${axis}-${step}`];
+}
+var PADDING_UTILITIES = ["p", "px", "py", "pt", "pr", "pb", "pl"];
+function isSpacingClass(className) {
+  return stepOf(className, "gap") !== void 0 || PADDING_UTILITIES.some((u) => stepOf(className, u) !== void 0);
+}
+function spacingOf(classes) {
+  const find = (utility) => {
+    for (const c of classes) {
+      const step = stepOf(c, utility);
+      if (step !== void 0) return step;
+    }
+    return void 0;
+  };
+  const all = find("p") ?? 0;
+  const x = find("px") ?? all;
+  const y = find("py") ?? all;
+  return {
+    gap: find("gap") ?? 0,
+    top: find("pt") ?? y,
+    right: find("pr") ?? x,
+    bottom: find("pb") ?? y,
+    left: find("pl") ?? x
+  };
+}
+function withSpacing(classes, change) {
+  const next = { ...spacingOf(classes), ...change };
+  const kept = classes.filter((c) => !isSpacingClass(c));
+  const out = [...kept];
+  if (next.gap !== 0) out.push(`gap-${next.gap}`);
+  const { top, right, bottom, left } = next;
+  if (top === right && right === bottom && bottom === left) {
+    if (top !== 0) out.push(`p-${top}`);
+  } else if (top === bottom && left === right) {
+    out.push(`px-${left}`, `py-${top}`);
+  } else {
+    out.push(`pt-${top}`, `pr-${right}`, `pb-${bottom}`, `pl-${left}`);
+  }
+  return out;
+}
+var DIRECTION_CLASSES = ["flex-row", "flex-row-reverse", "flex-col", "flex-col-reverse"];
+var ALIGNMENTS = ["start", "center", "end"];
+var JUSTIFIES = [...ALIGNMENTS, "between"];
+var WRAP_CLASSES = ["flex-wrap", "flex-nowrap", "flex-wrap-reverse"];
+function firstOf(classes, utility, values) {
+  for (const c of classes) {
+    for (const v of values) if (c === `${utility}-${v}`) return v;
+  }
+  return null;
+}
+function layoutOf(classes) {
+  const direction = classes.find((c) => DIRECTION_CLASSES.includes(c));
+  return {
+    direction: direction === void 0 ? null : direction.startsWith("flex-row") ? "horizontal" : "vertical",
+    align: firstOf(classes, "items", ALIGNMENTS),
+    justify: firstOf(classes, "justify", JUSTIFIES),
+    wrap: classes.includes("flex-wrap")
+  };
+}
+function withLayout(classes, change) {
+  let next = [...classes];
+  if (change.direction) {
+    next = next.filter((c) => !DIRECTION_CLASSES.includes(c));
+    next.push(change.direction === "horizontal" ? "flex-row" : "flex-col");
+  }
+  if (change.align) {
+    next = next.filter((c) => !c.startsWith("items-"));
+    next.push(`items-${change.align}`);
+  }
+  if (change.justify) {
+    next = next.filter((c) => !c.startsWith("justify-"));
+    next.push(`justify-${change.justify}`);
+  }
+  if (change.wrap !== void 0) {
+    next = next.filter((c) => !WRAP_CLASSES.includes(c));
+    if (change.wrap) next.push("flex-wrap");
+  }
+  return next;
+}
+var AXIS_SIDES = { x: ["left", "right"], y: ["top", "bottom"] };
+var CENTER_CLASSES = { x: ["left-1/2", "-translate-x-1/2"], y: ["top-1/2", "-translate-y-1/2"] };
+function offsetOf(classes, side) {
+  for (const c of classes) {
+    if (!c.startsWith(`${side}-`)) continue;
+    const step = stepOf(c, side);
+    if (step !== void 0) return { value: defaultSpacingStepPx(step), unit: "px" };
+    const m = /^\[(-?\d+(?:\.\d+)?)(px|%)\]$/.exec(c.slice(side.length + 1));
+    if (m) return { value: Number(m[1]), unit: m[2] === "%" ? "%" : "px" };
+  }
+  return null;
+}
+function centerOffsetOf(classes, side) {
+  for (const c of classes) {
+    if (c === `${side}-1/2`) return 0;
+    const m = new RegExp(`^${side}-\\[calc\\(50%([+-])(\\d+(?:\\.\\d+)?)px\\)\\]$`).exec(c);
+    if (m) return (m[1] === "-" ? -1 : 1) * Number(m[2]);
+  }
+  return null;
+}
+function axisPositionOf(classes, axis) {
+  const [startSide, endSide] = AXIS_SIDES[axis];
+  const center = centerOffsetOf(classes, startSide);
+  if (center !== null && classes.includes(CENTER_CLASSES[axis][1])) return { constraint: "center", start: center, end: 0 };
+  const start = offsetOf(classes, startSide);
+  const end = offsetOf(classes, endSide);
+  if (start?.unit === "%" || end?.unit === "%") {
+    return { constraint: "scale", start: start?.value ?? 0, end: end?.value ?? 0 };
+  }
+  if (start && end) return { constraint: "both", start: start.value, end: end.value };
+  if (end) return { constraint: "end", start: 0, end: end.value };
+  return { constraint: "start", start: start?.value ?? 0, end: 0 };
+}
+function positionOf(classes) {
+  return {
+    absolute: classes.includes("absolute"),
+    x: axisPositionOf(classes, "x"),
+    y: axisPositionOf(classes, "y")
+  };
+}
+function isPositionClass(className) {
+  if (className === "absolute") return true;
+  if (CENTER_CLASSES.x.some((c) => c === className) || CENTER_CLASSES.y.some((c) => c === className)) return true;
+  return [...AXIS_SIDES.x, ...AXIS_SIDES.y].some((side) => className.startsWith(`${side}-`));
+}
+function offsetClass(side, value, unit) {
+  const rounded = unit === "%" ? Math.round(value * 10) / 10 : Math.round(value);
+  return rounded === 0 ? `${side}-0` : `${side}-[${rounded}${unit}]`;
+}
+function axisClasses(axis, p) {
+  const [startSide, endSide] = AXIS_SIDES[axis];
+  switch (p.constraint) {
+    case "center": {
+      const offset = Math.round(p.start);
+      const pin = offset === 0 ? CENTER_CLASSES[axis][0] : `${startSide}-[calc(50%${offset < 0 ? "-" : "+"}${Math.abs(offset)}px)]`;
+      return [pin, CENTER_CLASSES[axis][1]];
+    }
+    case "end":
+      return [offsetClass(endSide, p.end, "px")];
+    case "both":
+      return [offsetClass(startSide, p.start, "px"), offsetClass(endSide, p.end, "px")];
+    case "scale":
+      return [offsetClass(startSide, p.start, "%"), offsetClass(endSide, p.end, "%")];
+    case "start":
+      return [offsetClass(startSide, p.start, "px")];
+  }
+}
+function withPosition(classes, position) {
+  const kept = classes.filter((c) => !isPositionClass(c));
+  if (!position.absolute) return kept;
+  return [...kept, "absolute", ...axisClasses("x", position.x), ...axisClasses("y", position.y)];
+}
+var COLOR_TOKEN_SET = new Set(DESIGN_COLOR_TOKENS);
+var RADIUS_TOKEN_SET = new Set(DESIGN_RADIUS_TOKENS);
+function isColorToken(value) {
+  return COLOR_TOKEN_SET.has(value);
+}
+function isRadiusToken(value) {
+  return RADIUS_TOKEN_SET.has(value);
+}
+function tokenOfDesignClass(className) {
+  const base = className.slice(className.lastIndexOf(":") + 1);
+  if (base.startsWith("rounded-")) {
+    const key = base.slice("rounded-".length);
+    return isRadiusToken(key) ? { group: "radii", key } : null;
+  }
+  for (const utility of DESIGN_COLOR_UTILITIES) {
+    const prefix = `${utility}-`;
+    if (!base.startsWith(prefix)) continue;
+    const key = base.slice(prefix.length);
+    if (isColorToken(key)) return { group: "colors", key };
+  }
+  for (const utility of DESIGN_SPACING_UTILITIES) {
+    const step = stepOf(base, utility);
+    if (step !== void 0 && spacingTokenOf(step) !== null) return { group: "spacing", key: String(step) };
+  }
+  return null;
+}
+function isArbitraryClass(className) {
+  return /^[a-z0-9:@/-]*-\[[^\]\s]+\]$/i.test(className);
+}
+function collectClasses(value, found) {
+  if (Array.isArray(value)) {
+    for (const item of value) collectClasses(item, found);
+    return;
+  }
+  if (value === null || typeof value !== "object") return;
+  for (const [key, child] of Object.entries(value)) {
+    if (key === "className" && typeof child === "string") {
+      for (const cls of child.split(/\s+/)) if (cls && isArbitraryClass(cls)) found.add(cls);
+    } else {
+      collectClasses(child, found);
+    }
+  }
+}
+function classesOfPart(part) {
+  const found = /* @__PURE__ */ new Set();
+  collectClasses(toPayloadValue(part), found);
+  return [...found];
+}
+var classesByOrbital = /* @__PURE__ */ new WeakMap();
+function arbitraryClassesOf(schema) {
+  const { orbitals, _metadata: _provenance, ledger: _identities, ...rest } = schema;
+  const found = new Set(classesOfPart(rest));
+  for (const orbital of orbitals ?? []) {
+    let classes = classesByOrbital.get(orbital);
+    if (!classes) {
+      classes = classesOfPart(orbital);
+      classesByOrbital.set(orbital, classes);
+    }
+    for (const cls of classes) found.add(cls);
+  }
+  return [...found].sort();
+}
+var log = createLogger("almadar:ui:arbitrary-classes");
+var ARBITRARY_CLASS_STYLE_ID = "almadar-arbitrary-classes";
+var CompilerContext = createContext(null);
+function ArbitraryClassCompilerProvider({ compile, children }) {
+  return /* @__PURE__ */ jsx(CompilerContext.Provider, { value: compile, children });
+}
+var compiled = /* @__PURE__ */ new Set();
+var pending = /* @__PURE__ */ new Set();
+function appendCss(css) {
+  let el = document.getElementById(ARBITRARY_CLASS_STYLE_ID);
+  if (!el) {
+    el = document.createElement("style");
+    el.id = ARBITRARY_CLASS_STYLE_ID;
+    document.head.appendChild(el);
+  }
+  el.textContent = `${el.textContent ?? ""}${css}
+`;
+}
+function resetArbitraryClassStyles() {
+  compiled.clear();
+  pending.clear();
+  document.getElementById(ARBITRARY_CLASS_STYLE_ID)?.remove();
+}
+function useArbitraryClassStyles(schema) {
+  const compile = useContext(CompilerContext);
+  const classes = useMemo(() => schema ? arbitraryClassesOf(schema) : [], [schema]);
+  useEffect(() => {
+    if (!compile) return;
+    const missing = classes.filter((c) => !compiled.has(c) && !pending.has(c));
+    if (missing.length === 0) return;
+    missing.forEach((c) => pending.add(c));
+    compile(missing).then((css) => {
+      missing.forEach((c) => {
+        pending.delete(c);
+        compiled.add(c);
+      });
+      if (css) appendCss(css);
+    }).catch((err) => {
+      missing.forEach((c) => pending.delete(c));
+      log.warn("compile:failed", { classes: missing, error: err instanceof Error ? err.message : String(err) });
+    });
+  }, [compile, classes]);
+}
+var SURFACE = "h-full min-h-full bg-background surface-page text-foreground";
+function useFontImport(href) {
+  useEffect(() => {
+    if (!href || typeof document === "undefined") return;
+    const existing = Array.from(document.head.querySelectorAll("link[data-almadar-font]")).some((el) => el.getAttribute("href") === href);
+    if (existing) return;
+    const link = document.createElement("link");
+    link.rel = "stylesheet";
+    link.href = href;
+    link.setAttribute("data-almadar-font", "");
+    document.head.appendChild(link);
+  }, [href]);
+}
+function OrbitalThemeProvider({ theme: declared, override, children }) {
+  const parent = useThemeScope();
+  const hostOverride = override || parent.override || void 0;
+  const theme = hostOverride ?? declared;
+  const resolved = resolveThemeForRuntime(theme);
+  const { resolvedMode, availableThemes } = useTheme();
+  const darkTypeScale = resolvedMode === "dark" ? resolved?.variants?.dark?.typeScale : void 0;
+  useFontImport(darkTypeScale?.fontImport ?? resolved?.tokens.typeScale?.fontImport);
+  if (isThemeRegistryKey(theme)) {
+    const inherited = !override && parent.override ? { key: parent.override, mode: parent.mode } : void 0;
+    const { key, mode: keyMode } = inherited ?? keyInViewerMode(theme, availableThemes, resolvedMode);
+    const mode = keyMode ?? parent.mode;
+    return /* @__PURE__ */ jsx(
+      ThemeScopeContext.Provider,
+      {
+        value: hostOverride ? { ...parent, theme: key, mode, vars: void 0, override: key } : { ...parent, theme: key, mode },
+        children: /* @__PURE__ */ jsx(Box, { "data-theme": key, className: cn(SURFACE, keyMode), children })
+      }
+    );
+  }
+  if (!resolved) {
+    return /* @__PURE__ */ jsx(Fragment, { children });
+  }
+  const vars = themeTokensToCssVars(resolved.tokens, resolvedMode, resolved.variants?.dark);
+  return /* @__PURE__ */ jsx(ThemeScopeContext.Provider, { value: { ...parent, vars: { ...parent.vars, ...vars } }, children: /* @__PURE__ */ jsx(Box, { "data-orbital-theme": resolved.name, className: SURFACE, style: vars, children }) });
+}
+OrbitalThemeProvider.displayName = "OrbitalThemeProvider";
+
+export { ARBITRARY_CLASS_STYLE_ID, ArbitraryClassCompilerProvider, CurrentPagePathContext, CurrentPagePathProvider, DESIGN_COLOR_TOKENS, DESIGN_RADIUS_TOKENS, DESIGN_SPACING_SCALE, OrbitalThemeProvider, UISlotContext, UISlotProvider, UserContext, UserProvider, defaultSpacingStepPx, isArbitraryClass, layoutOf, positionOf, resetArbitraryClassStyles, sizeLimitOf, sizingOf, snapToSpacingStep, spacingOf, spacingTokenOf, tokenOfDesignClass, useArbitraryClassStyles, useCurrentPagePath, useHasPermission, useHasRole, useSlotContent, useSlotHasContent, useUISlots, useUser, useUserForEvaluation, withLayout, withPosition, withSizeLimit, withSizing, withSpacing };

package/dist/chunk-AGXD77SL.js

@@ -0,0 +1,98 @@
+import { useEventBus, useTranslate, Box, VStack, Icon, cn, Typography, Button, domPassthrough } from './chunk-4YXBKHHM.js';
+import { EMPTY_STATE_MARKER } from '@almadar/core';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var ICON_NAME_ALIASES = {
+  check: "check-circle",
+  error: "x-circle",
+  warning: "alert-circle"
+};
+var lookStyles = {
+  "icon-only": "",
+  illustrated: "[&_svg]:w-32 [&_svg]:h-32",
+  "text-only": "[&_svg]:hidden",
+  mascot: "[&_svg]:w-24 [&_svg]:h-24 [&_svg]:rounded-pill"
+};
+var EmptyState = ({
+  icon,
+  title,
+  message,
+  description,
+  actionLabel,
+  onAction,
+  className,
+  destructive,
+  variant,
+  actionEvent,
+  look = "icon-only",
+  ...rest
+}) => {
+  const eventBus = useEventBus();
+  const { t } = useTranslate();
+  const handleAction = () => {
+    if (actionEvent) eventBus.emit(`UI:${actionEvent}`, {});
+    onAction?.();
+  };
+  const iconName = typeof icon === "string" ? ICON_NAME_ALIASES[icon] ?? icon : void 0;
+  const iconComponent = typeof icon === "string" ? void 0 : icon;
+  const hasIcon = Boolean(iconName || iconComponent);
+  const isDestructive = destructive || variant === "error";
+  const isSuccess = variant === "success";
+  const displayText = title || message || t("empty.noItems");
+  return /* @__PURE__ */ jsx(Box, { ...domPassthrough(rest), className: "contents", ...{ [EMPTY_STATE_MARKER]: "" }, children: /* @__PURE__ */ jsxs(
+    VStack,
+    {
+      align: "center",
+      className: cn(
+        "justify-center py-12 text-center",
+        lookStyles[look],
+        className
+      ),
+      children: [
+        hasIcon && /* @__PURE__ */ jsx(
+          Box,
+          {
+            className: cn(
+              "mb-4 rounded-full p-3",
+              isDestructive ? "bg-error/10" : isSuccess ? "bg-success/10" : "bg-muted"
+            ),
+            children: /* @__PURE__ */ jsx(
+              Icon,
+              {
+                ...iconName ? { name: iconName } : { icon: iconComponent },
+                className: cn(
+                  "h-8 w-8",
+                  isDestructive ? "text-error" : isSuccess ? "text-success" : "text-muted-foreground"
+                )
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Typography,
+          {
+            variant: "h3",
+            className: cn(
+              "text-lg",
+              isDestructive ? "text-error" : isSuccess ? "text-success" : "text-foreground"
+            ),
+            children: displayText
+          }
+        ),
+        description && /* @__PURE__ */ jsx(Typography, { variant: "small", className: "mt-1 text-muted-foreground max-w-sm", children: description }),
+        actionLabel && (onAction || actionEvent) && /* @__PURE__ */ jsx(
+          Button,
+          {
+            className: "mt-4",
+            variant: isDestructive ? "danger" : "primary",
+            onClick: handleAction,
+            children: actionLabel
+          }
+        )
+      ]
+    }
+  ) });
+};
+EmptyState.displayName = "EmptyState";
+
+export { EmptyState };