@lukeashford/aurelius 2.0.0 → 2.2.0

package/dist/index.mjs

@@ -74,28 +74,40 @@ Input.displayName = "Input";
 
 // src/components/Card.tsx
 import React3 from "react";
+import { Check } from "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 = React3.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__ */ React3.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__ */ React3.createElement(
+        "div",
+        {
+          className: "absolute top-3 right-3 flex items-center justify-center h-6 w-6 rounded-full bg-gold text-obsidian"
+        },
+        /* @__PURE__ */ React3.createElement(Check, { className: "h-4 w-4" })
+      )
     );
   }
 );
@@ -133,10 +145,7 @@ var Avatar = React4.forwardRef(
         ),
         ...rest
       },
-      src ? (
-        // eslint-disable-next-line @next/next/no-img-element
-        /* @__PURE__ */ React4.createElement("img", { src, alt: alt || name || "Avatar", className: "h-full w-full object-cover" })
-      ) : /* @__PURE__ */ React4.createElement("span", { "aria-hidden": true }, initials(name) || "\xB7"),
+      src ? /* @__PURE__ */ React4.createElement("img", { src, alt: alt || name || "Avatar", className: "h-full w-full object-cover" }) : /* @__PURE__ */ React4.createElement("span", { "aria-hidden": true }, initials(name) || "\xB7"),
       status && /* @__PURE__ */ React4.createElement(
         "span",
         {
@@ -186,12 +195,12 @@ var Tooltip = ({ content, children, open = false, side = "top" }) => {
     {
       role: "tooltip",
       className: cx6(
-        "pointer-events-none absolute z-50 whitespace-nowrap rounded-md border border-ash bg-graphite px-3 py-1.5 text-sm text-white shadow-lg transition-opacity duration-fast ease-out",
+        "pointer-events-none absolute z-50 whitespace-nowrap rounded-md border border-ash bg-graphite px-3 py-1.5 text-sm text-white shadow-lg transition-opacity duration-200 ease-out",
         open ? "opacity-100" : "opacity-0",
-        side === "top" && "left-1/2 -translate-x-1/2 -top-2 translate-y-[-100%]",
-        side === "bottom" && "left-1/2 -translate-x-1/2 -bottom-2 translate-y-[100%]",
-        side === "left" && "top-1/2 -translate-y-1/2 -left-2 -translate-x-[100%]",
-        side === "right" && "top-1/2 -translate-y-1/2 -right-2 translate-x-[100%]"
+        side === "top" && "left-1/2 -translate-x-1/2 -top-2 -translate-y-full",
+        side === "bottom" && "left-1/2 -translate-x-1/2 -bottom-2 translate-y-full",
+        side === "left" && "top-1/2 -translate-y-1/2 -left-2 -translate-x-full",
+        side === "right" && "top-1/2 -translate-y-1/2 -right-2 translate-x-full"
       )
     },
     content
@@ -629,23 +638,456 @@ var Modal = ({ isOpen, onClose, title, children, className }) => {
 };
 Modal.displayName = "Modal";
 
+// src/components/Stepper.tsx
+import React18 from "react";
+import { Check as Check2 } from "lucide-react";
+function cx18(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+var Stepper = React18.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__ */ React18.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__ */ React18.createElement(React18.Fragment, { key: step.id }, /* @__PURE__ */ React18.createElement("div", { className: "flex flex-col items-center" }, /* @__PURE__ */ React18.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__ */ React18.createElement(Check2, { className: "h-5 w-5" }) : /* @__PURE__ */ React18.createElement("span", null, index + 1)
+        ), /* @__PURE__ */ React18.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__ */ React18.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
+import React21 from "react";
+
+// src/components/MarkdownContent.tsx
+import React19, { useMemo } from "react";
+import DOMPurify from "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() {
+  useMemo(() => {
+    DOMPurify.addHook("afterSanitizeAttributes", (node) => {
+      if (node.tagName === "A") {
+        node.setAttribute("target", "_blank");
+        node.setAttribute("rel", "noopener noreferrer");
+      }
+    });
+  }, []);
+}
+var MarkdownContent = React19.forwardRef(
+  ({ className, content, sanitizeConfig, ...rest }, ref) => {
+    useDOMPurifySetup();
+    const sanitizedHtml = useMemo(() => {
+      if (!content) {
+        return "";
+      }
+      const config = sanitizeConfig ?? DEFAULT_SANITIZE_CONFIG;
+      return DOMPurify.sanitize(content, config);
+    }, [content, sanitizeConfig]);
+    return /* @__PURE__ */ React19.createElement(
+      "div",
+      {
+        ref,
+        className: cx19("prose", className),
+        dangerouslySetInnerHTML: { __html: sanitizedHtml },
+        ...rest
+      }
+    );
+  }
+);
+MarkdownContent.displayName = "MarkdownContent";
+
+// src/components/StreamingCursor.tsx
+import React20 from "react";
+function cx20(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+var StreamingCursor = React20.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__ */ React20.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 = React21.forwardRef(
+  ({ variant = "assistant", className, content, isStreaming, ...rest }, ref) => {
+    const isUser = variant === "user";
+    return /* @__PURE__ */ React21.createElement(
+      "div",
+      {
+        ref,
+        className: cx21(
+          "px-3 py-2 w-fit",
+          variantStyles2[variant],
+          className
+        ),
+        ...rest
+      },
+      /* @__PURE__ */ React21.createElement(
+        MarkdownContent,
+        {
+          content,
+          className: cx21("prose-sm", isUser ? "prose-inherit" : "prose-invert")
+        }
+      ),
+      isStreaming && /* @__PURE__ */ React21.createElement(StreamingCursor, { className: "ml-0.5" })
+    );
+  }
+);
+Message.displayName = "Message";
+
+// src/components/ChatHistory.tsx
+import React22 from "react";
+function cx22(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+var ChatHistory = React22.forwardRef(
+  ({ messages, className, ...rest }, ref) => {
+    return /* @__PURE__ */ React22.createElement(
+      "div",
+      {
+        ref,
+        className: cx22("flex flex-col gap-3 w-full", className),
+        ...rest
+      },
+      messages.map(({ id, variant, className: messageClassName, ...messageProps }, index) => /* @__PURE__ */ React22.createElement(
+        Message,
+        {
+          key: id ?? index,
+          variant,
+          className: messageClassName,
+          ...messageProps
+        }
+      ))
+    );
+  }
+);
+ChatHistory.displayName = "ChatHistory";
+
+// src/components/BrandIcon.tsx
+import React23 from "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 = React23.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__ */ React23.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
+import React24 from "react";
+function cx24(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+var ColorSwatch = React24.forwardRef(
+  ({ color, label, className, ...rest }, ref) => {
+    return /* @__PURE__ */ React24.createElement(
+      "div",
+      {
+        ref,
+        className: cx24("flex flex-col items-center gap-2", className),
+        ...rest
+      },
+      /* @__PURE__ */ React24.createElement(
+        "div",
+        {
+          className: "h-16 w-16 border-2 border-ash rounded-none shadow-sm",
+          style: { backgroundColor: color },
+          "aria-label": label || color
+        }
+      ),
+      label && /* @__PURE__ */ React24.createElement("span", { className: "text-xs text-silver font-medium" }, label)
+    );
+  }
+);
+ColorSwatch.displayName = "ColorSwatch";
+
+// src/components/ImageCard.tsx
+import React25 from "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 = React25.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__ */ React25.createElement(Card, { ref, className: cx25("p-0 overflow-hidden group w-fit", className), ...props }, /* @__PURE__ */ React25.createElement(
+      "div",
+      {
+        className: cx25(
+          "relative",
+          hasAspectRatio && "overflow-hidden",
+          mediaClassName
+        ),
+        style: hasAspectRatio ? { aspectRatio: resolveAspectRatio(aspectRatio) } : void 0
+      },
+      /* @__PURE__ */ React25.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__ */ React25.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__ */ React25.createElement("div", { className: cx25("px-4 pt-4", contentClassName) }, title && /* @__PURE__ */ React25.createElement("h4", { className: "text-lg font-semibold leading-tight" }, title), subtitle && /* @__PURE__ */ React25.createElement("p", { className: "text-sm text-silver leading-normal" }, subtitle), children));
+  }
+);
+ImageCard.displayName = "ImageCard";
+
+// src/components/SectionHeading.tsx
+import React26 from "react";
+function cx26(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+var levelStyles = {
+  h2: "text-2xl mb-4",
+  h3: "text-xl mb-3"
+};
+var SectionHeading = React26.forwardRef(
+  ({ level = "h2", children, className, ...rest }, ref) => {
+    const Component = level;
+    return /* @__PURE__ */ React26.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";
 export {
   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,