magick-ui 0.1.0 → 0.1.2

package/dist/index.cjs

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,14 +17,27 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
-  ButtonGroupPrimitive: () => ButtonGroupPrimitive,
-  CardPrimitive: () => CardPrimitive,
-  KeyValuePrimitive: () => KeyValuePrimitive,
+  Button: () => Button,
+  Card: () => Card,
+  CardAction: () => CardAction,
+  CardContent: () => CardContent,
+  CardDescription: () => CardDescription,
+  CardFooter: () => CardFooter,
+  CardHeader: () => CardHeader,
+  CardTitle: () => CardTitle,
   UIRenderer: () => UIRenderer,
   cn: () => cn,
   componentSchema: () => componentSchema,
@@ -37,294 +52,381 @@ __export(src_exports, {
 });
 module.exports = __toCommonJS(src_exports);
 
-// src/primitives/CardPrimitive.tsx
+// src/utils.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
+// src/ui/Card.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-function CardPrimitive({
-  title,
-  subtitle,
-  children
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+function Card({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {
-      style: {
-        width: "100%",
-        maxWidth: "28rem",
-        overflow: "hidden",
-        borderRadius: "1rem",
-        border: "1px solid var(--gen-ui-border, #e2e8f0)",
-        backgroundColor: "var(--gen-ui-card-bg, #ffffff)"
-      },
-      children: [
-        (title || subtitle) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-          "div",
-          {
-            style: {
-              padding: "0.75rem 1rem",
-              borderBottom: "1px solid var(--gen-ui-border, #e2e8f0)"
-            },
-            children: [
-              title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                "h3",
-                {
-                  style: {
-                    margin: 0,
-                    fontSize: "0.875rem",
-                    fontWeight: 600,
-                    color: "var(--gen-ui-text, #1a202c)"
-                  },
-                  children: title
-                }
-              ),
-              subtitle && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                "p",
-                {
-                  style: {
-                    margin: "0.125rem 0 0",
-                    fontSize: "0.75rem",
-                    color: "var(--gen-ui-text-muted, #718096)"
-                  },
-                  children: subtitle
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { padding: "1rem", display: "flex", flexDirection: "column", gap: "0.75rem" }, children })
-      ]
+      "data-slot": "card",
+      className: cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className
+      ),
+      ...props
     }
   );
 }
-
-// src/primitives/KeyValuePrimitive.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-function KeyValuePrimitive({
-  items = []
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: "0.375rem" }, children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+function CardHeader({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {
-      style: {
-        display: "flex",
-        alignItems: "baseline",
-        justifyContent: "space-between",
-        gap: "1rem"
-      },
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-          "span",
-          {
-            style: {
-              flexShrink: 0,
-              fontSize: "0.75rem",
-              fontWeight: 500,
-              color: "var(--gen-ui-text-muted, #718096)"
-            },
-            children: item.label
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-          "span",
-          {
-            style: {
-              fontSize: "0.875rem",
-              fontWeight: 500,
-              textAlign: "right",
-              overflow: "hidden",
-              textOverflow: "ellipsis",
-              whiteSpace: "nowrap",
-              color: "var(--gen-ui-text, #1a202c)"
-            },
-            children: item.value
-          }
-        )
-      ]
-    },
-    i
-  )) });
+      "data-slot": "card-header",
+      className: cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      ),
+      ...props
+    }
+  );
 }
-
-// src/primitives/ButtonGroupPrimitive.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var variantStyles = {
-  primary: {
-    backgroundColor: "var(--gen-ui-btn-primary-bg, #3182ce)",
-    color: "var(--gen-ui-btn-primary-text, #ffffff)",
-    border: "none"
-  },
-  secondary: {
-    backgroundColor: "var(--gen-ui-btn-secondary-bg, #edf2f7)",
-    color: "var(--gen-ui-btn-secondary-text, #2d3748)",
-    border: "none"
-  },
-  outline: {
-    backgroundColor: "transparent",
-    color: "var(--gen-ui-btn-outline-text, #2d3748)",
-    border: "1px solid var(--gen-ui-border, #e2e8f0)"
-  }
-};
-function ButtonGroupPrimitive({
-  buttons = []
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { display: "flex", flexWrap: "wrap", gap: "0.5rem" }, children: buttons.map((btn, i) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-    "button",
+function CardTitle({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      "data-slot": "card-title",
+      className: cn("leading-none font-semibold", className),
+      ...props
+    }
+  );
+}
+function CardDescription({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
     {
-      style: {
-        padding: "0.375rem 0.75rem",
-        fontSize: "0.875rem",
-        fontWeight: 500,
-        borderRadius: "0.5rem",
-        cursor: "pointer",
-        ...variantStyles[btn.variant ?? "primary"]
+      "data-slot": "card-description",
+      className: cn("text-muted-foreground text-sm", className),
+      ...props
+    }
+  );
+}
+function CardAction({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      "data-slot": "card-action",
+      className: cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CardContent({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      "data-slot": "card-content",
+      className: cn("px-6", className),
+      ...props
+    }
+  );
+}
+function CardFooter({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      "data-slot": "card-footer",
+      className: cn("flex items-center px-6 [.border-t]:pt-6", className),
+      ...props
+    }
+  );
+}
+
+// src/ui/Button.tsx
+var import_react_slot = require("@radix-ui/react-slot");
+var import_class_variance_authority = require("class-variance-authority");
+var import_lucide_react = require("lucide-react");
+var React = __toESM(require("react"), 1);
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var buttonVariants = (0, import_class_variance_authority.cva)(
+  "flex group leading-body-sm line-height-body-sm items-center cursor-pointer justify-center gap-2 whitespace-nowrap rounded-md font-medium transition-all disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-[20px] shrink-0 [&_svg]:shrink-0 outline-none ring-0",
+  {
+    variants: {
+      variant: {
+        // default:
+        //   "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+        primary: "bg-button-primary-enabled text-element-static-white! hover:bg-button-primary-hovered active:bg-button-primary-pressed focus-visible:bg-button-primary-pressed disabled:bg-button-primary-disabled disabled:text-element-inverse-disabled!",
+        secondary: "bg-button-secondary-enabled text-element-inverse-default-alt! hover:bg-button-secondary-hovered active:bg-button-secondary-pressed disabled:bg-button-secondary-disabled disabled:text-element-inverse-disabled!",
+        destructive: "bg-button-destructive-enabled text-element-static-white! hover:bg-button-destructive-hovered active:bg-button-destructive-pressed disabled:bg-button-destructive-disabled disabled:text-element-inverse-disabled!",
+        outline: "border border-stroke-inverse-slate-03 text-element-inverse-default rounded-unit-corner-radius-lg bg-button-outline-enabled hover:bg-button-outline-hovered active:bg-button-outline-pressed disabled:bg-button-outline-disabled disabled:text-element-inverse-disabled!",
+        ghost: "bg-transparent text-element-inverse-default hover:bg-button-ghost-hovered active:bg-button-ghost-pressed disabled:bg-button-ghost-disabled disabled:text-element-inverse-disabled!",
+        soft: "bg-button-soft-enabled text-element-inverse-default hover:bg-button-soft-hovered active:bg-button-soft-pressed disabled:bg-button-soft-disabled disabled:text-element-inverse-disabled!",
+        "ai-filled": "relative",
+        "ai-outline": "relative",
+        glass: "glass-effect bg-button-glass-enabled border border-stroke-inverse-slate-01 hover:bg-button-glass-hovered active:bg-button-glass-pressed disabled:bg-button-glass-disabled"
       },
-      onClick: () => {
-        if (btn.url) window.open(btn.url, "_blank");
+      size: {
+        sm: "rounded-lg gap-1 px-1.5 py-1 text-body-sm",
+        // "icon-sm": "p-4px rounded-md ",
+        md: "px-2.5 py-2 rounded-[10px] gap-2 text-body-sm",
+        // "icon-md": "rounded-lg p-2",
+        lg: "px-3.5 py-3 rounded-xl gap-2 text-body-lg"
+        // "icon-lg": "rounded-xl p-3",
       },
-      children: btn.label
+      state: {
+        loading: "opacity-80 cursor-progress",
+        default: ""
+      }
     },
-    i
-  )) });
+    defaultVariants: {
+      variant: "primary",
+      size: "md",
+      state: "default"
+    }
+  }
+);
+function getButtonPadding(size, prefix, suffix, onlyIcon) {
+  if (prefix && suffix) {
+    if (size === "sm") return "px-1.5";
+    if (size === "md") return "p-2.5";
+    if (size === "lg") return "px-3";
+  } else if (prefix) {
+    if (size === "sm") return "pl-1.5 pr-2";
+    if (size === "md") return "pl-2.5 py-2.5 pr-3";
+    if (size === "lg") return "pl-3.5 pr-4";
+  } else if (suffix) {
+    if (size === "sm") return "pr-1.5 pl-2";
+    if (size === "md") return "pl-3";
+    if (size === "lg") return "pr-3.5 pl-4";
+  } else if (onlyIcon) {
+    if (size === "sm") return "p-1";
+    if (size === "md") return "p-2";
+    if (size === "lg") return "p-3";
+  }
+  return "";
+}
+function Button({
+  className,
+  variant = "primary",
+  state,
+  size = "md",
+  prefix,
+  suffix,
+  onlyIcon,
+  label,
+  url,
+  asChild = false,
+  children,
+  ...props
+}) {
+  const Comp = asChild ? import_react_slot.Slot : "button";
+  const isDisabled = state === "loading" || props.disabled;
+  const content = children ?? label;
+  const handleClick = url ? (e) => {
+    props.onClick?.(e);
+    window.open(url, "_blank");
+  } : props.onClick;
+  const renderAffix = (node) => {
+    if (!node) return null;
+    if (React.isValidElement(node)) {
+      const nodeElement = node;
+      return React.cloneElement(nodeElement, {
+        className: cn(
+          nodeElement.props?.className || "",
+          isDisabled && "text-element-inverse-disabled"
+        )
+      });
+    }
+    return node;
+  };
+  if (variant === "ai-filled" || variant === "ai-outline") {
+    const isAiFilled = variant === "ai-filled";
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      Comp,
+      {
+        "data-variant": variant,
+        "data-slot": "button",
+        className: cn("group relative cursor-pointer p-0.5"),
+        disabled: isDisabled,
+        ...props,
+        onClick: handleClick,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "div",
+            {
+              className: cn(
+                "absolute inset-0 block",
+                buttonVariants({ size, className })
+              ),
+              style: {
+                backgroundImage: `url(${""})`,
+                backgroundSize: "cover",
+                backgroundPosition: "center"
+              }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+            "div",
+            {
+              className: cn(
+                buttonVariants({ variant, size, className }),
+                size === "sm" && "rounded-[7px]",
+                size === "md" && "rounded-[9px]",
+                size === "lg" && "rounded-[11px]",
+                getButtonPadding(size, prefix, suffix, onlyIcon),
+                {
+                  "gap-1": size === "sm",
+                  "hover:text-element-inverse-default text-white hover:bg-white": isAiFilled,
+                  "text-element-inverse-default dark:bg-fill-background bg-white hover:bg-transparent hover:text-white": !isAiFilled
+                }
+              ),
+              children: [
+                state === "loading" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.Loader2Icon, { className: "animate-spin" }),
+                renderAffix(prefix),
+                content,
+                renderAffix(suffix)
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    Comp,
+    {
+      "data-variant": variant,
+      "data-slot": "button",
+      className: cn(
+        buttonVariants({ variant, size, className }),
+        getButtonPadding(size || "md", prefix, suffix, onlyIcon || false)
+      ),
+      disabled: isDisabled,
+      ...props,
+      onClick: handleClick,
+      children: [
+        state === "loading" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.Loader2Icon, { className: "animate-spin" }),
+        renderAffix(prefix),
+        content,
+        renderAffix(suffix)
+      ]
+    }
+  );
 }
 
 // src/renderer.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var defaultPrimitives = {
-  card: CardPrimitive,
-  "key-value": KeyValuePrimitive,
-  "button-group": ButtonGroupPrimitive
-};
-var registeredPrimitives = {
-  ...defaultPrimitives
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var defaultComponents = {
+  card: Card,
+  "card-header": CardHeader,
+  "card-title": CardTitle,
+  "card-description": CardDescription,
+  "card-content": CardContent,
+  "card-footer": CardFooter,
+  button: Button
 };
-function registerPrimitives(primitives) {
-  registeredPrimitives = { ...registeredPrimitives, ...primitives };
+var registry = { ...defaultComponents };
+function registerPrimitives(components) {
+  registry = { ...registry, ...components };
 }
 function isUINode(data) {
-  return typeof data === "object" && data !== null && "type" in data && typeof data.type === "string" && data.type in registeredPrimitives;
+  return typeof data === "object" && data !== null && "type" in data && typeof data.type === "string" && data.type in registry;
 }
 function getAvailablePrimitives() {
-  return Object.keys(registeredPrimitives);
+  return Object.keys(registry);
 }
 function UIRenderer({ node }) {
-  const Component = registeredPrimitives[node.type];
+  const Component = registry[node.type];
   if (!Component) return null;
-  const childElements = node.children?.map((child, i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(UIRenderer, { node: child }, i));
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Component, { ...node.props ?? {}, children: childElements });
+  const childElements = node.children?.map((child, i) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(UIRenderer, { node: child }, i));
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Component, { ...node.props ?? {}, children: childElements });
 }
 
 // schema/component-schema.json
 var component_schema_default = {
   $schema: "Generative UI Component Schema",
-  description: "Available primitive components for composing chat UI. The AI should return a JSON tree using these types. Each node has: type (string), props (object), children (array of nodes, optional).",
-  primitives: {
+  description: "Available UI components for composing chat UI. The AI should return a JSON tree using these types. Each node has: type (string), props (object), children (array of nodes, optional).",
+  components: {
     card: {
-      description: "Container with optional title and subtitle. Can wrap other components as children.",
-      props: {
-        title: { type: "string", required: false, description: "Card heading text" },
-        subtitle: { type: "string", required: false, description: "Secondary text below the title" }
-      },
+      description: "Container card. Compose with card-header, card-content, card-footer as children.",
+      props: {},
       accepts_children: true,
       example: {
         type: "card",
-        props: { title: "Project Summary", subtitle: "Last updated 2 hours ago" },
-        children: []
+        children: [
+          {
+            type: "card-header",
+            children: [
+              { type: "card-title", props: {}, children: [] },
+              { type: "card-description", props: {}, children: [] }
+            ]
+          },
+          { type: "card-content", children: [] }
+        ]
       }
     },
-    "key-value": {
-      description: "Displays a list of label-value pairs. Use for entity details like name, status, email, etc.",
-      props: {
-        items: {
-          type: "array",
-          required: true,
-          description: "Array of { label, value } objects",
-          item_schema: {
-            label: { type: "string", description: "Field name (e.g. 'Email', 'Status')" },
-            value: { type: "string", description: "Field value" }
-          }
-        }
-      },
-      accepts_children: false,
-      example: {
-        type: "key-value",
-        props: {
-          items: [
-            { label: "Client", value: "Orchid Flo" },
-            { label: "Status", value: "Active" },
-            { label: "Email", value: "ray@example.com" }
-          ]
-        }
-      }
+    "card-header": {
+      description: "Header section of a card. Place card-title and card-description inside.",
+      props: {},
+      accepts_children: true
+    },
+    "card-title": {
+      description: "Title inside a card-header.",
+      props: {},
+      accepts_children: true
+    },
+    "card-description": {
+      description: "Description text inside a card-header.",
+      props: {},
+      accepts_children: true
+    },
+    "card-content": {
+      description: "Main content area of a card.",
+      props: {},
+      accepts_children: true
     },
-    "button-group": {
-      description: "Row of action buttons. Use when offering choices or actions to the user.",
+    "card-footer": {
+      description: "Footer section of a card, typically for actions.",
+      props: {},
+      accepts_children: true
+    },
+    button: {
+      description: "An action button. Use label prop for text, or compose children.",
       props: {
-        buttons: {
-          type: "array",
-          required: true,
-          description: "Array of button definitions",
-          item_schema: {
-            label: { type: "string", description: "Button text" },
-            variant: { type: "string", enum: ["primary", "secondary", "outline"], description: "Button style" },
-            url: { type: "string", required: false, description: "URL to open when clicked" }
-          }
-        }
+        label: { type: "string", required: false, description: "Button text (shorthand for children)" },
+        variant: { type: "string", enum: ["primary", "secondary", "outline", "destructive", "ghost", "soft"], required: false, description: "Defaults to 'primary'" },
+        size: { type: "string", enum: ["sm", "md", "lg"], required: false, description: "Defaults to 'md'" },
+        url: { type: "string", required: false, description: "URL to open when clicked" },
+        disabled: { type: "boolean", required: false }
       },
-      accepts_children: false,
+      accepts_children: true,
       example: {
-        type: "button-group",
-        props: {
-          buttons: [
-            { label: "Open Project", variant: "primary", url: "/projects/123" },
-            { label: "View Documents", variant: "outline" }
-          ]
-        }
+        type: "button",
+        props: { label: "View Details", variant: "primary" }
       }
     }
   },
   ui_tree_format: {
-    description: "The AI should return a JSON object with this structure. Send it via Centrifugo as the message payload.",
+    description: "The AI should return a JSON object with this structure.",
     schema: {
-      type: { type: "string", description: "One of the primitive type names above" },
-      props: { type: "object", description: "Props matching the primitive's prop schema" },
+      type: { type: "string", description: "One of the component type names above" },
+      props: { type: "object", description: "Props matching the component's prop schema" },
       children: { type: "array", description: "Optional array of nested nodes (only for types with accepts_children: true)" }
     }
   },
   full_example: {
     type: "card",
-    props: { title: "Client Overview" },
     children: [
       {
-        type: "key-value",
-        props: {
-          items: [
-            { label: "Name", value: "Orchid Flo" },
-            { label: "Type", value: "Company" },
-            { label: "Email", value: "ray@example.com" }
-          ]
-        }
+        type: "card-header",
+        children: [
+          { type: "card-title", props: {}, children: [] }
+        ]
       },
       {
-        type: "card",
-        props: { title: "Project: Promotion" },
+        type: "card-content",
         children: [
-          {
-            type: "key-value",
-            props: {
-              items: [
-                { label: "Status", value: "Active" },
-                { label: "Workspaces", value: "3" }
-              ]
-            }
-          },
-          {
-            type: "button-group",
-            props: {
-              buttons: [
-                { label: "Open Project", variant: "primary" },
-                { label: "View Documents", variant: "outline" }
-              ]
-            }
-          }
+          { type: "button", props: { label: "Open Project", variant: "primary" } },
+          { type: "button", props: { label: "View Documents", variant: "outline" } }
         ]
       }
     ]
@@ -334,19 +436,12 @@ var component_schema_default = {
 // src/schema.ts
 var componentSchema = component_schema_default;
 function getPrimitiveSchemas() {
-  return componentSchema.primitives;
+  return componentSchema.components;
 }
 function getFullExample() {
   return componentSchema.full_example;
 }
 
-// src/utils.ts
-var import_clsx = require("clsx");
-var import_tailwind_merge = require("tailwind-merge");
-function cn(...inputs) {
-  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
-}
-
 // src/design-tokens/design-tokens.ts
 var designTokens = {
   "color-slate-50": "var(--color-slate-50)",
@@ -1307,9 +1402,14 @@ function getTokenValueWithFallback(tokenName, fallback) {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  ButtonGroupPrimitive,
-  CardPrimitive,
-  KeyValuePrimitive,
+  Button,
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
   UIRenderer,
   cn,
   componentSchema,