@vantageos/mosaic 0.2.1 → 0.3.0-alpha.1

package/dist/index.cjs

@@ -33,7 +33,16 @@ var EN = {
   "TokenDisplayOnceModal.warning.once": "This token will only be shown once. Copy it now.",
   "TokenDisplayOnceModal.copied": "Copied",
   "StatusBadge.aria.status": "Status",
-  "StatusBadge.error.invalidProps": "StatusBadge: invalid props"
+  "StatusBadge.error.invalidProps": "StatusBadge: invalid props",
+  "EmptyState.error.invalidProps": "EmptyState: invalid props",
+  "Toast.aria.close": "Close notification",
+  "Toast.error.invalidProps": "Toast: invalid props",
+  "Alert.aria.dismiss": "Dismiss alert",
+  "Alert.error.invalidProps": "Alert: invalid props",
+  "VirtualList.empty.message": "No items to display",
+  "VirtualList.error.invalidProps": "VirtualList: invalid props",
+  "Skeleton.aria.label": "Loading",
+  "Skeleton.error.invalidProps": "Skeleton: invalid props"
 };
 var FR = {
   "ProgressBar.aria.label": "Progression",
@@ -54,7 +63,16 @@ var FR = {
   "TokenDisplayOnceModal.warning.once": "Ce jeton ne sera affich\xE9 qu'une seule fois. Copiez-le maintenant.",
   "TokenDisplayOnceModal.copied": "Copi\xE9",
   "StatusBadge.aria.status": "Statut",
-  "StatusBadge.error.invalidProps": "StatusBadge : propri\xE9t\xE9s invalides"
+  "StatusBadge.error.invalidProps": "StatusBadge : propri\xE9t\xE9s invalides",
+  "EmptyState.error.invalidProps": "EmptyState : propri\xE9t\xE9s invalides",
+  "Toast.aria.close": "Fermer la notification",
+  "Toast.error.invalidProps": "Toast : propri\xE9t\xE9s invalides",
+  "Alert.aria.dismiss": "Fermer l'alerte",
+  "Alert.error.invalidProps": "Alert : propri\xE9t\xE9s invalides",
+  "VirtualList.empty.message": "Aucun \xE9l\xE9ment \xE0 afficher",
+  "VirtualList.error.invalidProps": "VirtualList : propri\xE9t\xE9s invalides",
+  "Skeleton.aria.label": "Chargement",
+  "Skeleton.error.invalidProps": "Skeleton : propri\xE9t\xE9s invalides"
 };
 var TABLE = {
   en: EN,
@@ -216,6 +234,23 @@ function ConfirmDialog(raw) {
     return null;
   }
 }
+var TabItemSchema = zod.z.object({
+  id: zod.z.string().min(1),
+  label: zod.z.string().min(1),
+  /** ReactNode / PreactNode — accepted as unknown at Zod layer (JSX not serialisable). */
+  content: zod.z.unknown(),
+  disabled: zod.z.boolean().optional().default(false)
+});
+var TabsPropsSchema = zod.z.object({
+  tabs: zod.z.array(TabItemSchema).min(1),
+  value: zod.z.string().optional(),
+  defaultValue: zod.z.string().optional(),
+  orientation: zod.z.enum(["horizontal", "vertical"]).default("horizontal"),
+  locale: zod.z.enum(["en", "fr"]).default("en")
+});
+function validateTabsProps(raw) {
+  return TabsPropsSchema.parse(raw);
+}
 var ColumnDefSchema = zod.z.object({
   key: zod.z.string().min(1),
   header: zod.z.string().min(1)
@@ -461,6 +496,125 @@ function VirtualTable({
     }
   );
 }
+var EmptyStatePropsSchema = zod.z.object({
+  title: zod.z.string().min(1),
+  description: zod.z.string().optional(),
+  action: zod.z.object({
+    label: zod.z.string().min(1),
+    variant: zod.z.enum(["primary", "secondary"]).default("primary")
+  }).optional(),
+  locale: zod.z.enum(["en", "fr"]).default("en")
+});
+function validateEmptyStateProps(raw) {
+  return EmptyStatePropsSchema.parse(raw);
+}
+
+// src/components/display/Skeleton.logic.ts
+function getAnimationClass(animation) {
+  switch (animation) {
+    case "pulse":
+      return "animate-pulse";
+    case "wave":
+      return "skeleton-wave";
+    case "none":
+      return "";
+  }
+}
+function getVariantClass(variant) {
+  switch (variant) {
+    case "rect":
+      return "rounded-md";
+    case "circle":
+      return "rounded-full";
+    case "text":
+      return "rounded";
+  }
+}
+var SKELETON_BG_CLASS = "bg-gray-200 dark:bg-gray-700";
+function textLineKey(index) {
+  return `skeleton-line-${index}`;
+}
+function lastLineWidth(index, total, baseWidth) {
+  if (total > 1 && index === total - 1) {
+    return "75%";
+  }
+  return baseWidth;
+}
+var SkeletonPropsSchema = zod.z.object({
+  variant: zod.z.enum(["rect", "circle", "text"]).default("rect"),
+  width: zod.z.union([zod.z.string().min(1), zod.z.number().positive()]).optional(),
+  height: zod.z.union([zod.z.string().min(1), zod.z.number().positive()]).optional(),
+  count: zod.z.number().int().min(1).max(20).default(1),
+  animation: zod.z.enum(["pulse", "wave", "none"]).default("pulse"),
+  locale: zod.z.enum(["en", "fr"]).default("en")
+});
+function validateSkeletonProps(raw) {
+  return SkeletonPropsSchema.parse(raw);
+}
+function resolveSkeletonDimensions(variant, width, height) {
+  const toCss = (v, fallback) => {
+    if (v === void 0) return fallback;
+    if (typeof v === "number") return `${v}px`;
+    return v;
+  };
+  if (variant === "circle") {
+    const size = width !== void 0 ? toCss(width, "40px") : height !== void 0 ? toCss(height, "40px") : "40px";
+    return { widthCss: size, heightCss: size };
+  }
+  if (variant === "text") {
+    return {
+      widthCss: toCss(width, "100%"),
+      heightCss: toCss(height, "16px")
+    };
+  }
+  return {
+    widthCss: toCss(width, "100%"),
+    heightCss: toCss(height, "100px")
+  };
+}
+function SkeletonInner({ variant, width, height, count, animation, locale }) {
+  const { widthCss, heightCss } = resolveSkeletonDimensions(variant, width, height);
+  const animClass = getAnimationClass(animation);
+  const variantClass = getVariantClass(variant);
+  const ariaLabel = t("Skeleton.aria.label", locale);
+  const baseClass = `${SKELETON_BG_CLASS} ${variantClass} ${animClass}`.trim();
+  if (variant === "text") {
+    return (
+      // biome-ignore lint/a11y/useSemanticElements: role="status" is the correct ARIA pattern for loading indicators; <output> conveys form output semantics which is incorrect here
+      /* @__PURE__ */ jsxRuntime.jsx("div", { role: "status", "aria-label": ariaLabel, "aria-busy": "true", className: "flex flex-col gap-2", children: Array.from({ length: count }, (_, i) => /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          className: `block ${baseClass}`,
+          style: {
+            width: lastLineWidth(i, count, widthCss),
+            height: heightCss
+          },
+          "aria-hidden": "true"
+        },
+        textLineKey(i)
+      )) })
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      role: "status",
+      "aria-label": ariaLabel,
+      "aria-busy": "true",
+      className: `block ${baseClass}`,
+      style: { width: widthCss, height: heightCss }
+    }
+  );
+}
+function Skeleton(raw) {
+  try {
+    const props = validateSkeletonProps(raw);
+    return /* @__PURE__ */ jsxRuntime.jsx(SkeletonInner, { ...props });
+  } catch {
+    const locale = raw.locale === "fr" ? "fr" : "en";
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { role: "alert", className: "text-red-600 text-sm", children: t("Skeleton.error.invalidProps", locale) });
+  }
+}
 var MarkdownRendererPropsSchema = zod.z.object({
   content: zod.z.string(),
   locale: zod.z.enum(["en", "fr"]),
@@ -621,6 +775,26 @@ function TokenDisplayOnceModal(raw) {
     return null;
   }
 }
+var ToastPropsSchema = zod.z.object({
+  variant: zod.z.enum(["success", "error", "info", "warning"]),
+  title: zod.z.string().min(1),
+  description: zod.z.string().optional(),
+  duration: zod.z.number().int().nonnegative().default(5e3),
+  locale: zod.z.enum(["en", "fr"]).default("en")
+});
+function validateToastProps(raw) {
+  return ToastPropsSchema.parse(raw);
+}
+var AlertPropsSchema = zod.z.object({
+  variant: zod.z.enum(["success", "error", "info", "warning"]),
+  title: zod.z.string().min(1),
+  description: zod.z.string().optional(),
+  dismissible: zod.z.boolean().default(false),
+  locale: zod.z.enum(["en", "fr"]).default("en")
+});
+function validateAlertProps(raw) {
+  return AlertPropsSchema.parse(raw);
+}
 var StatusBadgePropsSchema = zod.z.object({
   status: zod.z.string(),
   variant: zod.z.enum(["success", "warning", "danger", "info", "neutral"]).default("neutral"),
@@ -745,8 +919,10 @@ function createMosaicResource(componentName, props, locale = "en") {
 }
 var MOSAIC_SUPPORTED_COMPONENTS = COMPONENT_KEYS;
 
+exports.AlertPropsSchema = AlertPropsSchema;
 exports.ConfirmDialog = ConfirmDialog;
 exports.ConfirmDialogPropsSchema = ConfirmDialogPropsSchema;
+exports.EmptyStatePropsSchema = EmptyStatePropsSchema;
 exports.MCP_UI_CAPABILITY_KEY = MCP_UI_CAPABILITY_KEY;
 exports.MOSAIC_MIME_TYPE = MOSAIC_MIME_TYPE;
 exports.MOSAIC_STREAM_CHUNK_TYPE = MOSAIC_STREAM_CHUNK_TYPE;
@@ -755,21 +931,31 @@ exports.MarkdownRenderer = MarkdownRenderer;
 exports.MarkdownRendererPropsSchema = MarkdownRendererPropsSchema;
 exports.ProgressBar = ProgressBar;
 exports.ProgressBarPropsSchema = ProgressBarPropsSchema;
+exports.Skeleton = Skeleton;
+exports.SkeletonPropsSchema = SkeletonPropsSchema;
 exports.StatusBadge = StatusBadge;
 exports.StatusBadgePropsSchema = StatusBadgePropsSchema;
 exports.StreamingTableView = StreamingTableView;
 exports.TableView = TableView;
 exports.TableViewPropsSchema = TableViewPropsSchema;
+exports.TabsPropsSchema = TabsPropsSchema;
+exports.ToastPropsSchema = ToastPropsSchema;
 exports.TokenDisplayOnceModal = TokenDisplayOnceModal;
 exports.TokenDisplayOnceModalPropsSchema = TokenDisplayOnceModalPropsSchema;
 exports.createMosaicResource = createMosaicResource;
 exports.createPostMessageObservable = createPostMessageObservable;
+exports.resolveSkeletonDimensions = resolveSkeletonDimensions;
 exports.useStreamingHydration = useStreamingHydration;
+exports.validateAlertProps = validateAlertProps;
 exports.validateConfirmDialogProps = validateConfirmDialogProps;
+exports.validateEmptyStateProps = validateEmptyStateProps;
 exports.validateMarkdownRendererProps = validateProps2;
 exports.validateProps = validateProps;
+exports.validateSkeletonProps = validateSkeletonProps;
 exports.validateStatusBadgeProps = validateProps3;
 exports.validateTableViewProps = validateTableViewProps;
+exports.validateTabsProps = validateTabsProps;
+exports.validateToastProps = validateToastProps;
 exports.validateTokenDisplayOnceModalProps = validateTokenDisplayOnceModalProps;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map