@lukeashford/aurelius 2.1.0 → 2.2.0

package/dist/index.js

@@ -33,17 +33,26 @@ __export(index_exports, {
   Alert: () => Alert,
   Avatar: () => Avatar,
   Badge: () => Badge,
+  BrandIcon: () => BrandIcon,
   Button: () => Button,
   Card: () => Card,
+  ChatHistory: () => ChatHistory,
   Checkbox: () => Checkbox,
+  ColorSwatch: () => ColorSwatch,
   HelperText: () => HelperText,
+  ImageCard: () => ImageCard,
   Input: () => Input,
   Label: () => Label,
+  MarkdownContent: () => MarkdownContent,
+  Message: () => Message,
   Modal: () => Modal,
   Radio: () => Radio,
+  SectionHeading: () => SectionHeading,
   Select: () => Select,
   Skeleton: () => Skeleton,
   Spinner: () => Spinner,
+  Stepper: () => Stepper,
+  StreamingCursor: () => StreamingCursor,
   Switch: () => Switch,
   Textarea: () => Textarea,
   Tooltip: () => Tooltip,
@@ -127,28 +136,40 @@ Input.displayName = "Input";
 
 // src/components/Card.tsx
 var import_react3 = __toESM(require("react"));
+var import_lucide_react = require("lucide-react");
+var VARIANT_STYLES = {
+  default: "bg-charcoal shadow-sm border border-gold/30",
+  elevated: "bg-charcoal shadow-lg border-0",
+  outlined: "bg-charcoal shadow-none border border-ash",
+  ghost: "bg-transparent shadow-none border-0",
+  featured: "bg-charcoal border border-gold shadow-glow-sm"
+};
 function cx3(...classes) {
   return classes.filter(Boolean).join(" ");
 }
 var Card = import_react3.default.forwardRef(
-  ({ variant = "default", interactive = false, className, ...rest }, ref) => {
-    const base = "rounded-none p-6";
-    const variantClasses = {
-      default: "bg-charcoal shadow-sm border border-gold/30",
-      elevated: "bg-charcoal shadow-lg border-0",
-      outlined: "bg-charcoal shadow-none border border-ash",
-      ghost: "bg-transparent shadow-none border-0",
-      featured: "bg-charcoal border border-gold shadow-[0_0_10px_rgba(201,162,39,0.2)]"
-    };
-    const interactiveClass = interactive ? "transition-all duration-200 hover:border-gold hover:shadow-glow cursor-pointer" : "";
-    const variantClass = variantClasses[variant];
+  ({ variant = "default", interactive = false, selected = false, className, children, ...props }, ref) => {
     return /* @__PURE__ */ import_react3.default.createElement(
       "div",
       {
         ref,
-        className: cx3(base, variantClass, interactiveClass, className),
-        ...rest
-      }
+        className: cx3(
+          "rounded-none p-6 relative",
+          VARIANT_STYLES[variant],
+          interactive && "transition-all duration-200 hover:border-gold hover:shadow-glow cursor-pointer",
+          selected && "border-gold shadow-glow-md",
+          className
+        ),
+        ...props
+      },
+      children,
+      selected && /* @__PURE__ */ import_react3.default.createElement(
+        "div",
+        {
+          className: "absolute top-3 right-3 flex items-center justify-center h-6 w-6 rounded-full bg-gold text-obsidian"
+        },
+        /* @__PURE__ */ import_react3.default.createElement(import_lucide_react.Check, { className: "h-4 w-4" })
+      )
     );
   }
 );
@@ -543,15 +564,15 @@ Switch.displayName = "Switch";
 
 // src/components/Alert.tsx
 var import_react14 = __toESM(require("react"));
-var import_lucide_react = require("lucide-react");
+var import_lucide_react2 = require("lucide-react");
 function cx14(...classes) {
   return classes.filter(Boolean).join(" ");
 }
 var icons = {
-  info: import_lucide_react.Info,
-  success: import_lucide_react.CheckCircle,
-  warning: import_lucide_react.AlertTriangle,
-  error: import_lucide_react.XCircle
+  info: import_lucide_react2.Info,
+  success: import_lucide_react2.CheckCircle,
+  warning: import_lucide_react2.AlertTriangle,
+  error: import_lucide_react2.XCircle
 };
 var variantStyles = {
   info: "bg-info/10 border-info text-info",
@@ -628,7 +649,7 @@ Skeleton.displayName = "Skeleton";
 // src/components/Modal.tsx
 var import_react17 = __toESM(require("react"));
 var import_react_dom = require("react-dom");
-var import_lucide_react2 = require("lucide-react");
+var import_lucide_react3 = require("lucide-react");
 function cx17(...classes) {
   return classes.filter(Boolean).join(" ");
 }
@@ -672,13 +693,437 @@ var Modal = ({ isOpen, onClose, title, children, className }) => {
       "data-state": "open",
       onClick: (e) => e.stopPropagation()
     },
-    /* @__PURE__ */ import_react17.default.createElement("div", { className: "flex items-center justify-between mb-2" }, title ? /* @__PURE__ */ import_react17.default.createElement("h3", { className: "text-xl font-semibold text-white m-0" }, title) : /* @__PURE__ */ import_react17.default.createElement("div", null), /* @__PURE__ */ import_react17.default.createElement("button", { onClick: onClose, className: "text-silver hover:text-white transition-colors ml-auto" }, /* @__PURE__ */ import_react17.default.createElement(import_lucide_react2.X, { className: "h-5 w-5" }), /* @__PURE__ */ import_react17.default.createElement("span", { className: "sr-only" }, "Close"))),
+    /* @__PURE__ */ import_react17.default.createElement("div", { className: "flex items-center justify-between mb-2" }, title ? /* @__PURE__ */ import_react17.default.createElement("h3", { className: "text-xl font-semibold text-white m-0" }, title) : /* @__PURE__ */ import_react17.default.createElement("div", null), /* @__PURE__ */ import_react17.default.createElement("button", { onClick: onClose, className: "text-silver hover:text-white transition-colors ml-auto" }, /* @__PURE__ */ import_react17.default.createElement(import_lucide_react3.X, { className: "h-5 w-5" }), /* @__PURE__ */ import_react17.default.createElement("span", { className: "sr-only" }, "Close"))),
     /* @__PURE__ */ import_react17.default.createElement("div", null, children)
   ));
   return (0, import_react_dom.createPortal)(content, document.body);
 };
 Modal.displayName = "Modal";
 
+// src/components/Stepper.tsx
+var import_react18 = __toESM(require("react"));
+var import_lucide_react4 = require("lucide-react");
+function cx18(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+var Stepper = import_react18.default.forwardRef(
+  ({ steps, currentStep, status, className, ...rest }, ref) => {
+    const currentIndex = steps.findIndex((step) => step.id === currentStep);
+    const getStepState = (index) => {
+      if (index < currentIndex) {
+        return "complete";
+      }
+      if (index === currentIndex) {
+        return status || "current";
+      }
+      return "future";
+    };
+    return /* @__PURE__ */ import_react18.default.createElement(
+      "div",
+      {
+        ref,
+        className: cx18("flex items-center w-full", className),
+        ...rest
+      },
+      steps.map((step, index) => {
+        const state = getStepState(index);
+        const isLast = index === steps.length - 1;
+        return /* @__PURE__ */ import_react18.default.createElement(import_react18.default.Fragment, { key: step.id }, /* @__PURE__ */ import_react18.default.createElement("div", { className: "flex flex-col items-center" }, /* @__PURE__ */ import_react18.default.createElement(
+          "div",
+          {
+            className: cx18(
+              "flex items-center justify-center w-10 h-10 rounded-full border-2 font-semibold text-sm transition-all duration-200",
+              state === "complete" && "bg-gold border-gold text-obsidian",
+              state === "current" && "bg-charcoal border-gold text-gold",
+              state === "error" && "bg-error border-error text-white",
+              state === "future" && "bg-charcoal border-ash text-silver"
+            )
+          },
+          state === "complete" ? /* @__PURE__ */ import_react18.default.createElement(import_lucide_react4.Check, { className: "h-5 w-5" }) : /* @__PURE__ */ import_react18.default.createElement("span", null, index + 1)
+        ), /* @__PURE__ */ import_react18.default.createElement(
+          "span",
+          {
+            className: cx18(
+              "mt-2 text-xs font-medium",
+              state === "complete" && "text-gold",
+              state === "current" && "text-white",
+              state === "error" && "text-error",
+              state === "future" && "text-silver"
+            )
+          },
+          step.label
+        )), !isLast && /* @__PURE__ */ import_react18.default.createElement(
+          "div",
+          {
+            className: cx18(
+              "flex-1 h-0.5 mx-4 transition-all duration-200",
+              index < currentIndex ? "bg-gold" : "bg-ash"
+            )
+          }
+        ));
+      })
+    );
+  }
+);
+Stepper.displayName = "Stepper";
+
+// src/components/Message.tsx
+var import_react21 = __toESM(require("react"));
+
+// src/components/MarkdownContent.tsx
+var import_react19 = __toESM(require("react"));
+var import_dompurify = __toESM(require("dompurify"));
+function cx19(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+var DEFAULT_SANITIZE_CONFIG = {
+  ALLOWED_TAGS: [
+    "h1",
+    "h2",
+    "h3",
+    "h4",
+    "h5",
+    "h6",
+    "p",
+    "br",
+    "hr",
+    "strong",
+    "b",
+    "em",
+    "i",
+    "u",
+    "s",
+    "strike",
+    "del",
+    "ins",
+    "sup",
+    "sub",
+    "mark",
+    "small",
+    "ul",
+    "ol",
+    "li",
+    "a",
+    "code",
+    "pre",
+    "kbd",
+    "samp",
+    "var",
+    "blockquote",
+    "q",
+    "cite",
+    "abbr",
+    "table",
+    "thead",
+    "tbody",
+    "tfoot",
+    "tr",
+    "th",
+    "td",
+    "caption",
+    "colgroup",
+    "col",
+    "div",
+    "span",
+    "details",
+    "summary"
+  ],
+  ALLOWED_ATTR: [
+    "href",
+    "title",
+    "target",
+    "rel",
+    "class",
+    "id",
+    "colspan",
+    "rowspan",
+    "scope",
+    "open"
+  ],
+  ADD_ATTR: ["target", "rel"],
+  ALLOWED_URI_REGEXP: /^(?:(?:https?|mailto|tel):|[^a-z]|[a-z+.-]+(?:[^a-z+.\-:]|$))/i
+};
+function useDOMPurifySetup() {
+  (0, import_react19.useMemo)(() => {
+    import_dompurify.default.addHook("afterSanitizeAttributes", (node) => {
+      if (node.tagName === "A") {
+        node.setAttribute("target", "_blank");
+        node.setAttribute("rel", "noopener noreferrer");
+      }
+    });
+  }, []);
+}
+var MarkdownContent = import_react19.default.forwardRef(
+  ({ className, content, sanitizeConfig, ...rest }, ref) => {
+    useDOMPurifySetup();
+    const sanitizedHtml = (0, import_react19.useMemo)(() => {
+      if (!content) {
+        return "";
+      }
+      const config = sanitizeConfig ?? DEFAULT_SANITIZE_CONFIG;
+      return import_dompurify.default.sanitize(content, config);
+    }, [content, sanitizeConfig]);
+    return /* @__PURE__ */ import_react19.default.createElement(
+      "div",
+      {
+        ref,
+        className: cx19("prose", className),
+        dangerouslySetInnerHTML: { __html: sanitizedHtml },
+        ...rest
+      }
+    );
+  }
+);
+MarkdownContent.displayName = "MarkdownContent";
+
+// src/components/StreamingCursor.tsx
+var import_react20 = __toESM(require("react"));
+function cx20(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+var StreamingCursor = import_react20.default.forwardRef(
+  ({ className, variant = "line", ...rest }, ref) => {
+    const variantStyles3 = {
+      block: "w-2.5 h-cursor translate-y-cursor-offset",
+      line: "w-0.5 h-cursor translate-y-cursor-offset",
+      underscore: "w-2.5 h-0.5 self-end mb-0.5"
+    };
+    return /* @__PURE__ */ import_react20.default.createElement(
+      "span",
+      {
+        ref,
+        className: cx20(
+          "inline-block bg-current animate-cursor-blink",
+          variantStyles3[variant],
+          className
+        ),
+        "aria-hidden": "true",
+        ...rest
+      }
+    );
+  }
+);
+StreamingCursor.displayName = "StreamingCursor";
+
+// src/components/Message.tsx
+function cx21(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+var variantStyles2 = {
+  user: "bg-gold text-obsidian ml-auto",
+  assistant: "bg-charcoal border border-ash text-white mr-auto"
+};
+var Message = import_react21.default.forwardRef(
+  ({ variant = "assistant", className, content, isStreaming, ...rest }, ref) => {
+    const isUser = variant === "user";
+    return /* @__PURE__ */ import_react21.default.createElement(
+      "div",
+      {
+        ref,
+        className: cx21(
+          "px-3 py-2 w-fit",
+          variantStyles2[variant],
+          className
+        ),
+        ...rest
+      },
+      /* @__PURE__ */ import_react21.default.createElement(
+        MarkdownContent,
+        {
+          content,
+          className: cx21("prose-sm", isUser ? "prose-inherit" : "prose-invert")
+        }
+      ),
+      isStreaming && /* @__PURE__ */ import_react21.default.createElement(StreamingCursor, { className: "ml-0.5" })
+    );
+  }
+);
+Message.displayName = "Message";
+
+// src/components/ChatHistory.tsx
+var import_react22 = __toESM(require("react"));
+function cx22(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+var ChatHistory = import_react22.default.forwardRef(
+  ({ messages, className, ...rest }, ref) => {
+    return /* @__PURE__ */ import_react22.default.createElement(
+      "div",
+      {
+        ref,
+        className: cx22("flex flex-col gap-3 w-full", className),
+        ...rest
+      },
+      messages.map(({ id, variant, className: messageClassName, ...messageProps }, index) => /* @__PURE__ */ import_react22.default.createElement(
+        Message,
+        {
+          key: id ?? index,
+          variant,
+          className: messageClassName,
+          ...messageProps
+        }
+      ))
+    );
+  }
+);
+ChatHistory.displayName = "ChatHistory";
+
+// src/components/BrandIcon.tsx
+var import_react23 = __toESM(require("react"));
+function cx23(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+var sizeMap2 = {
+  sm: "h-8 w-8 text-sm",
+  md: "h-12 w-12 text-base",
+  lg: "h-16 w-16 text-lg"
+};
+var BrandIcon = import_react23.default.forwardRef(
+  ({ size = "md", variant = "solid", children, className, ...rest }, ref) => {
+    const variantClasses = variant === "solid" ? "bg-gold text-obsidian border-2 border-gold" : "bg-transparent text-gold border-2 border-gold";
+    return /* @__PURE__ */ import_react23.default.createElement(
+      "div",
+      {
+        ref,
+        className: cx23(
+          "inline-flex items-center justify-center rounded-none font-bold select-none overflow-hidden",
+          sizeMap2[size],
+          variantClasses,
+          className
+        ),
+        ...rest
+      },
+      children
+    );
+  }
+);
+BrandIcon.displayName = "BrandIcon";
+
+// src/components/ColorSwatch.tsx
+var import_react24 = __toESM(require("react"));
+function cx24(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+var ColorSwatch = import_react24.default.forwardRef(
+  ({ color, label, className, ...rest }, ref) => {
+    return /* @__PURE__ */ import_react24.default.createElement(
+      "div",
+      {
+        ref,
+        className: cx24("flex flex-col items-center gap-2", className),
+        ...rest
+      },
+      /* @__PURE__ */ import_react24.default.createElement(
+        "div",
+        {
+          className: "h-16 w-16 border-2 border-ash rounded-none shadow-sm",
+          style: { backgroundColor: color },
+          "aria-label": label || color
+        }
+      ),
+      label && /* @__PURE__ */ import_react24.default.createElement("span", { className: "text-xs text-silver font-medium" }, label)
+    );
+  }
+);
+ColorSwatch.displayName = "ColorSwatch";
+
+// src/components/ImageCard.tsx
+var import_react25 = __toESM(require("react"));
+var ASPECT_RATIO_PRESETS = {
+  landscape: "3 / 2",
+  portrait: "2 / 3",
+  square: "1 / 1"
+};
+function resolveAspectRatio(ratio) {
+  if (ratio in ASPECT_RATIO_PRESETS) {
+    return ASPECT_RATIO_PRESETS[ratio];
+  }
+  return ratio.replace("/", " / ");
+}
+function cx25(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+var ImageCard = import_react25.default.forwardRef(
+  ({
+    src,
+    alt,
+    title,
+    subtitle,
+    aspectRatio,
+    objectFit = "cover",
+    overlay,
+    mediaClassName,
+    contentClassName,
+    className,
+    children,
+    ...props
+  }, ref) => {
+    const hasAspectRatio = aspectRatio !== void 0;
+    const isContain = objectFit === "contain";
+    return /* @__PURE__ */ import_react25.default.createElement(Card, { ref, className: cx25("p-0 overflow-hidden group w-fit", className), ...props }, /* @__PURE__ */ import_react25.default.createElement(
+      "div",
+      {
+        className: cx25(
+          "relative",
+          hasAspectRatio && "overflow-hidden",
+          mediaClassName
+        ),
+        style: hasAspectRatio ? { aspectRatio: resolveAspectRatio(aspectRatio) } : void 0
+      },
+      /* @__PURE__ */ import_react25.default.createElement(
+        "img",
+        {
+          src,
+          alt,
+          className: cx25(
+            "block max-w-full",
+            hasAspectRatio && "w-full h-full",
+            hasAspectRatio && (isContain ? "object-contain" : "object-cover"),
+            !hasAspectRatio && "h-auto"
+          )
+        }
+      ),
+      overlay && /* @__PURE__ */ import_react25.default.createElement(
+        "div",
+        {
+          className: "absolute inset-0 bg-obsidian/80 opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex items-center justify-center"
+        },
+        overlay
+      )
+    ), (title || subtitle || children) && /* @__PURE__ */ import_react25.default.createElement("div", { className: cx25("px-4 pt-4", contentClassName) }, title && /* @__PURE__ */ import_react25.default.createElement("h4", { className: "text-lg font-semibold leading-tight" }, title), subtitle && /* @__PURE__ */ import_react25.default.createElement("p", { className: "text-sm text-silver leading-normal" }, subtitle), children));
+  }
+);
+ImageCard.displayName = "ImageCard";
+
+// src/components/SectionHeading.tsx
+var import_react26 = __toESM(require("react"));
+function cx26(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+var levelStyles = {
+  h2: "text-2xl mb-4",
+  h3: "text-xl mb-3"
+};
+var SectionHeading = import_react26.default.forwardRef(
+  ({ level = "h2", children, className, ...rest }, ref) => {
+    const Component = level;
+    return /* @__PURE__ */ import_react26.default.createElement(
+      Component,
+      {
+        ref,
+        className: cx26(
+          "text-gold font-semibold tracking-tight",
+          levelStyles[level],
+          className
+        ),
+        ...rest
+      },
+      children
+    );
+  }
+);
+SectionHeading.displayName = "SectionHeading";
+
 // src/index.ts
 var version = "2.0.0";
 // Annotate the CommonJS export names for ESM import in node:
@@ -686,17 +1131,26 @@ var version = "2.0.0";
   Alert,
   Avatar,
   Badge,
+  BrandIcon,
   Button,
   Card,
+  ChatHistory,
   Checkbox,
+  ColorSwatch,
   HelperText,
+  ImageCard,
   Input,
   Label,
+  MarkdownContent,
+  Message,
   Modal,
   Radio,
+  SectionHeading,
   Select,
   Skeleton,
   Spinner,
+  Stepper,
+  StreamingCursor,
   Switch,
   Textarea,
   Tooltip,