@hilum/ui 3.3.4 → 3.5.0

package/src/components/badge.tsx

@@ -1,34 +1,115 @@
-import * as React from "react";
+"use client";
+
+import { forwardRef, type HTMLAttributes } from "react";
 import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "../lib/utils";
+import { useShape } from "../lib/shape-context";
+
+const badgeColors = {
+  gray: "#a3a3a3",
+  red: "#ef4444",
+  orange: "#f97316",
+  amber: "#f59e0b",
+  yellow: "#eab308",
+  lime: "#84cc16",
+  green: "#22c55e",
+  emerald: "#10b981",
+  teal: "#14b8a6",
+  cyan: "#06b6d4",
+  blue: "#3b82f6",
+  indigo: "#6366f1",
+  violet: "#8b5cf6",
+  purple: "#a855f7",
+  fuchsia: "#d946ef",
+  pink: "#ec4899",
+  rose: "#f43f5e",
+} as const;
 
-const badgeVariants = cva(
-  "inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 caption font-medium transition-colors",
-  {
-    variants: {
-      variant: {
-        default: "bg-foreground text-background",
-        secondary: "bg-muted text-muted-foreground",
-        outline: "border border-border text-muted-foreground bg-transparent",
-        brand: "bg-brand-primary text-background",
-        success: "bg-brand-secondary/20 text-muted-foreground border border-brand-secondary/50",
-        warning: "bg-brand-secondary/70 text-muted-foreground border border-brand-secondary",
-        destructive: "bg-destructive/10 text-destructive border border-destructive/20",
-      },
+type BadgeColor = keyof typeof badgeColors;
+
+const badgeVariants = cva("inline-flex items-center font-medium whitespace-nowrap", {
+  variants: {
+    variant: {
+      default: "",
+      secondary: "",
+      outline: "border border-border text-foreground",
+      brand: "",
+      success: "",
+      warning: "",
+      destructive: "",
+      solid: "",
+      dot: "border border-border text-foreground",
     },
-    defaultVariants: {
-      variant: "default",
+    size: {
+      sm: "h-5 px-2 text-[11px] gap-1",
+      md: "h-6 px-2.5 text-[12px] gap-1.5",
+      lg: "h-7 px-3 text-[13px] gap-1.5",
     },
   },
-);
-
-interface BadgeProps extends React.ComponentProps<"span">, VariantProps<typeof badgeVariants> {}
+  defaultVariants: {
+    variant: "solid",
+    size: "md",
+  },
+});
 
-function Badge({ className, variant, ...props }: BadgeProps) {
-  return (
-    <span data-slot="badge" className={cn(badgeVariants({ variant, className }))} {...props} />
-  );
+interface BadgeProps
+  extends Omit<HTMLAttributes<HTMLSpanElement>, "color">, VariantProps<typeof badgeVariants> {
+  color?: BadgeColor;
 }
+
+const Badge = forwardRef<HTMLSpanElement, BadgeProps>(
+  ({ className, variant = "solid", size = "md", color, children, style, ...props }, ref) => {
+    const shape = useShape();
+    const resolvedColor =
+      color ??
+      (variant === "brand"
+        ? "blue"
+        : variant === "success"
+          ? "green"
+          : variant === "warning"
+            ? "amber"
+            : variant === "destructive"
+              ? "red"
+              : "gray");
+    const colorValue = badgeColors[resolvedColor];
+    const isSolid = variant !== "dot" && variant !== "outline";
+    const dotSize = size === "sm" ? 6 : size === "lg" ? 8 : 7;
+
+    const colorStyle = isSolid
+      ? resolvedColor === "gray"
+        ? { backgroundColor: "var(--accent)", color: "var(--foreground)" }
+        : {
+            color: "var(--foreground)",
+            backgroundColor: `color-mix(in srgb, ${colorValue} 15%, var(--background))`,
+          }
+      : {};
+
+    const dotColor = resolvedColor === "gray" ? "var(--muted-foreground)" : colorValue;
+
+    return (
+      <span
+        ref={ref}
+        className={cn(badgeVariants({ variant, size }), shape.item, className)}
+        style={{ ...colorStyle, ...style }}
+        {...props}
+      >
+        {!isSolid && (
+          <span
+            className="shrink-0 rounded-full"
+            style={{
+              width: dotSize,
+              height: dotSize,
+              backgroundColor: dotColor,
+            }}
+          />
+        )}
+        {children}
+      </span>
+    );
+  },
+);
+
 Badge.displayName = "Badge";
 
-export { Badge, badgeVariants };
+export { Badge, badgeVariants, badgeColors };
+export type { BadgeProps, BadgeColor };

package/src/components/button.tsx

@@ -1,63 +1,232 @@
-import * as React from "react";
+"use client";
+
+import {
+  cloneElement,
+  forwardRef,
+  isValidElement,
+  type ButtonHTMLAttributes,
+  type CSSProperties,
+  type ReactElement,
+} from "react";
+import { Slot } from "@radix-ui/react-slot";
 import { cva, type VariantProps } from "class-variance-authority";
-import { Slot } from "radix-ui";
+import type { IconComponent } from "../lib/icon-context";
 import { cn } from "../lib/utils";
+import { useShape } from "../lib/shape-context";
 
 const buttonVariants = cva(
   [
-    "inline-flex shrink-0 items-center justify-center gap-2",
-    "body font-medium whitespace-nowrap",
-    "transition-[background-color,border-color,box-shadow,color,opacity,scale] duration-150 outline-none active:scale-[0.96]",
-    "focus-visible:ring-2 focus-visible:ring-brand-primary/30 focus-visible:ring-offset-1",
-    "disabled:pointer-events-none disabled:opacity-50",
-    "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+    "group relative isolate inline-flex items-center justify-center outline-none cursor-pointer",
+    "text-box-trim-both text-box-edge-cap-alphabetic",
+    "transition-colors duration-80",
+    "disabled:opacity-50 disabled:pointer-events-none",
+    "focus-visible:ring-1 focus-visible:ring-[#6B97FF]",
   ],
   {
     variants: {
       variant: {
-        default:
-          "bg-brand-primary text-background hover:bg-brand-primary/90 active:bg-brand-primary/80",
-        destructive:
-          "bg-destructive text-destructive-foreground hover:bg-destructive/90 active:bg-destructive/80",
-        outline: "bg-card text-muted-foreground shadow-natural hover:bg-muted rounded-xl",
-        secondary: "bg-muted text-muted-foreground hover:bg-muted",
-        brand:
-          "bg-brand-secondary text-foreground hover:bg-brand-secondary/90 active:bg-brand-secondary/80",
-        ghost: "text-muted-foreground hover:bg-muted hover:text-foreground",
+        default: "text-background",
+        primary: "text-background",
+        brand: "text-background",
+        secondary: "text-foreground",
+        outline: "border border-border text-foreground",
+        tertiary: "border border-border text-foreground",
+        destructive: "text-destructive border border-destructive/30",
+        ghost: "text-muted-foreground hover:text-foreground",
         link: "text-foreground underline-offset-4 hover:underline",
       },
       size: {
-        default: "h-10 px-4 py-2 rounded-md",
-        xs: "h-6 gap-1 px-2 caption rounded-md",
-        sm: "h-8 gap-1.5 px-3 rounded-md",
-        lg: "h-11 px-6 rounded-md",
-        icon: "size-9 rounded-md",
-        "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
-        "icon-sm": "size-8 rounded-md",
-        "icon-lg": "size-11 rounded-md",
+        xs: "h-6 px-2.5 text-[11px] gap-1",
+        sm: "h-7 px-3 text-[12px] gap-1",
+        default: "h-8 px-4 text-[13px] gap-1.5",
+        md: "h-8 px-4 text-[13px] gap-1.5",
+        lg: "h-9 px-5 text-[14px] gap-1.5",
+        "icon-xs": "h-7 w-7 p-0 [&_svg]:h-3 [&_svg]:w-3",
+        "icon-sm": "h-8 w-8 p-0 [&_svg]:h-3.5 [&_svg]:w-3.5",
+        icon: "h-9 w-9 p-0 [&_svg]:h-4 [&_svg]:w-4",
+        "icon-lg": "h-10 w-10 p-0 [&_svg]:h-5 [&_svg]:w-5",
       },
+      iconLeft: { true: "" },
+      iconRight: { true: "" },
     },
+    compoundVariants: [
+      { size: "sm", iconLeft: true, className: "pl-[6px]" },
+      { size: "md", iconLeft: true, className: "pl-[10px]" },
+      { size: "lg", iconLeft: true, className: "pl-[14px]" },
+      { size: "sm", iconRight: true, className: "pr-[6px]" },
+      { size: "md", iconRight: true, className: "pr-[10px]" },
+      { size: "lg", iconRight: true, className: "pr-[14px]" },
+    ],
     defaultVariants: {
-      variant: "default",
-      size: "default",
+      variant: "primary",
+      size: "md",
     },
   },
 );
 
-interface ButtonProps extends React.ComponentProps<"button">, VariantProps<typeof buttonVariants> {
+interface ButtonProps
+  extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
   asChild?: boolean;
+  loading?: boolean;
+  leadingIcon?: IconComponent;
+  trailingIcon?: IconComponent;
+  /** Force the visual pressed/held state. Useful when the button drives an
+   *  external open piece of UI (a popover, dropdown, etc.) so it reads as
+   *  engaged while the menu is showing. */
+  active?: boolean;
 }
 
-function Button({ className, variant, size, asChild = false, ...props }: ButtonProps) {
-  const Comp = asChild ? Slot.Root : "button";
-  return (
-    <Comp
-      data-slot="button"
-      className={cn(buttonVariants({ variant, size, className }))}
-      {...props}
-    />
-  );
-}
+const bgVariants: Record<string, string> = {
+  default: "bg-foreground group-hover:bg-foreground/90 group-active:bg-foreground/80",
+  primary: "bg-foreground group-hover:bg-foreground/90 group-active:bg-foreground/80",
+  brand: "bg-brand group-hover:bg-brand/90 group-active:bg-brand/80",
+  secondary: "bg-accent group-hover:bg-accent/80 group-active:bg-accent",
+  outline: "bg-transparent group-hover:bg-hover group-active:bg-active",
+  tertiary: "bg-transparent group-hover:bg-hover group-active:bg-active",
+  destructive: "bg-destructive/10 group-hover:bg-destructive/15 group-active:bg-destructive/20",
+  ghost: "bg-transparent group-hover:bg-hover group-active:bg-active",
+  link: "bg-transparent",
+};
+
+const activeBgVariants: Record<string, string> = {
+  default: "bg-foreground/80",
+  primary: "bg-foreground/80",
+  brand: "bg-brand/80",
+  secondary: "bg-accent",
+  outline: "bg-active",
+  tertiary: "bg-active",
+  destructive: "bg-destructive/20",
+  ghost: "bg-active",
+  link: "bg-transparent",
+};
+
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      className,
+      variant,
+      size,
+      asChild = false,
+      loading = false,
+      leadingIcon: LeadingIcon,
+      trailingIcon: TrailingIcon,
+      active = false,
+      disabled,
+      children,
+      style,
+      ...props
+    },
+    ref,
+  ) => {
+    const Comp = asChild ? Slot : "button";
+    const isIconOnly =
+      size === "icon" || size === "icon-xs" || size === "icon-sm" || size === "icon-lg";
+    const iconSize = size === "xs" || size === "sm" ? 14 : size === "lg" ? 20 : 16;
+    const shape = useShape();
+    const bgClass = active
+      ? activeBgVariants[variant ?? "primary"]
+      : bgVariants[variant ?? "primary"];
+
+    if (asChild && isValidElement(children)) {
+      const child = children as ReactElement<{ className?: string; style?: CSSProperties }>;
+      return (cloneElement as any)(child, {
+        ...props,
+        "data-slot": "button",
+        className: cn(
+          buttonVariants({
+            variant,
+            size,
+            iconLeft: !isIconOnly && !!LeadingIcon,
+            iconRight: !isIconOnly && !!TrailingIcon,
+          }),
+          shape.button,
+          child.props.className,
+          className,
+        ),
+        style: { ...child.props.style, ...style },
+      });
+    }
+
+    return (
+      <Comp
+        ref={ref}
+        data-slot="button"
+        className={cn(
+          buttonVariants({
+            variant,
+            size,
+            iconLeft: !isIconOnly && !!LeadingIcon,
+            iconRight: !isIconOnly && !!TrailingIcon,
+          }),
+          shape.button,
+          className,
+        )}
+        disabled={disabled || loading}
+        style={style}
+        {...props}
+      >
+        <span
+          aria-hidden
+          className={cn(
+            "absolute inset-0 rounded-[inherit] transition-[background-color,transform] duration-80 group-active:scale-[0.98]",
+            bgClass,
+          )}
+        />
+        <span className="relative inline-flex items-center justify-center gap-[inherit]">
+          {loading ? (
+            <>
+              <span className="flex items-center justify-center gap-[inherit] opacity-0">
+                {LeadingIcon && !isIconOnly && <LeadingIcon size={iconSize} strokeWidth={2} />}
+                {children}
+                {TrailingIcon && !isIconOnly && <TrailingIcon size={iconSize} strokeWidth={2} />}
+              </span>
+              <span className="absolute inset-0 flex items-center justify-center">
+                <svg className="h-8 w-8" viewBox="0 0 24 24" fill="none">
+                  <path
+                    d="M 12 12 C 14 8.5 19 8.5 19 12 C 19 15.5 14 15.5 12 12 C 10 8.5 5 8.5 5 12 C 5 15.5 10 15.5 12 12 Z"
+                    stroke="currentColor"
+                    strokeWidth="1.125"
+                    strokeLinecap="round"
+                    pathLength="100"
+                    style={{
+                      strokeDasharray: "15 85",
+                      animation:
+                        "spinner-move 2s linear infinite, spinner-dash 4s ease-in-out infinite",
+                    }}
+                  />
+                </svg>
+              </span>
+            </>
+          ) : isIconOnly ? (
+            <span className="[&_svg]:stroke-[1.5] [&_svg]:transition-[stroke-width] [&_svg]:duration-80 group-hover:[&_svg]:stroke-[2]">
+              {children}
+            </span>
+          ) : (
+            <>
+              {LeadingIcon && (
+                <LeadingIcon
+                  size={iconSize}
+                  strokeWidth={1.5}
+                  className="transition-[stroke-width] duration-80 group-hover:stroke-[2]"
+                />
+              )}
+              <span>{children}</span>
+              {TrailingIcon && (
+                <TrailingIcon
+                  size={iconSize}
+                  strokeWidth={1.5}
+                  className="transition-[stroke-width] duration-80 group-hover:stroke-[2]"
+                />
+              )}
+            </>
+          )}
+        </span>
+      </Comp>
+    );
+  },
+);
+
 Button.displayName = "Button";
 
 export { Button, buttonVariants };
+export type { ButtonProps };

package/src/components/card.tsx

@@ -1,16 +1,17 @@
 import * as React from "react";
 import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "../lib/utils";
+import { motionClasses } from "../lib/interaction";
 
 /* ------------------------------------------------------------------ */
 /*  Card root                                                          */
 /* ------------------------------------------------------------------ */
 
-const cardVariants = cva("rounded-xl", {
+const cardVariants = cva(["rounded-xl", motionClasses], {
   variants: {
     variant: {
       default: "bg-card shadow-natural",
-      muted: "bg-muted",
+      muted: "bg-muted shadow-natural",
       ghost: "bg-transparent",
     },
   },

package/src/components/chat-message.tsx

@@ -0,0 +1,116 @@
+"use client";
+
+import { forwardRef, type ReactNode } from "react";
+import { motion, type HTMLMotionProps } from "framer-motion";
+import { cn } from "../lib/utils";
+import { spring } from "../lib/springs";
+import { useShape } from "../lib/shape-context";
+import { FileThumbnail } from "./file-thumbnail";
+
+interface ChatMessageProps extends Omit<HTMLMotionProps<"div">, "children"> {
+  /** Who sent the message. Drives alignment and bubble colour:
+   *  `user` → right-aligned accent bubble, `assistant` → left-aligned plain text. */
+  from: "user" | "assistant";
+  /** Optional attachments rendered as square thumbnails above the bubble. */
+  files?: File[];
+  /** Side length of each attachment thumbnail in pixels. Defaults to 64. */
+  thumbnailSize?: number;
+  /** Timestamp shown in the hover-revealed meta row, before the actions.
+   *  User-message only — ignored on assistant replies. Caller pre-formats it
+   *  (e.g. `"Wednesday 6:08 PM"`). */
+  time?: ReactNode;
+  /** Icon-only action buttons shown in the hover-revealed meta row (e.g. copy,
+   *  edit, regenerate). Rendered next to the timestamp. */
+  actions?: ReactNode;
+  /** Message body. When omitted the text bubble is dropped (attachment-only message). */
+  children?: ReactNode;
+}
+
+// ─── ChatMessage ──────────────────────────────────────────────────────────
+// A single transcript entry with baked-in entrance + layout motion. Pairs with
+// InputMessage's onSend: render one per sent/received message. `layout="position"`
+// lets earlier messages slide up smoothly when a new one is appended.
+const ChatMessage = forwardRef<HTMLDivElement, ChatMessageProps>(
+  ({ from, files, thumbnailSize = 64, time, actions, children, className, ...props }, ref) => {
+    const shape = useShape();
+    const isUser = from === "user";
+    // Timestamps are a user-message affordance; assistant replies show actions only.
+    const showTime = isUser && time != null;
+
+    return (
+      <motion.div
+        ref={ref}
+        layout="position"
+        initial={{ opacity: 0, y: 8, scale: 0.96 }}
+        animate={{ opacity: 1, y: 0, scale: 1 }}
+        transition={spring.moderate}
+        style={{ transformOrigin: isUser ? "bottom right" : "bottom left" }}
+        className={cn(
+          "group flex max-w-[80%] flex-col gap-1.5",
+          isUser ? "items-end self-end" : "items-start self-start",
+          className,
+        )}
+        {...props}
+      >
+        {files && files.length > 0 && (
+          <div className={cn("flex flex-wrap gap-1.5", isUser ? "justify-end" : "justify-start")}>
+            {files.map((file, i) => (
+              <FileThumbnail
+                key={`${file.name}-${file.size}-${file.lastModified}-${i}`}
+                file={file}
+                size={thumbnailSize}
+              />
+            ))}
+          </div>
+        )}
+        {children != null && children !== "" && (
+          <div
+            className={cn(
+              "py-2 text-[14px] whitespace-pre-wrap break-words",
+              // User keeps the bubble chrome (rounded fill + horizontal padding);
+              // the assistant reply is flush-left plain text with no background.
+              isUser
+                ? cn(
+                    shape.bg,
+                    // `text-pretty` is reserved for settled user bubbles. On the
+                    // assistant reply it's left off on purpose: `text-wrap: pretty`
+                    // re-balances the last lines on every content change, so a
+                    // word-by-word stream visibly reflows earlier words to new
+                    // lines. Default (normal) wrapping appends left-to-right and
+                    // stays put as the text grows.
+                    "px-3.5 text-pretty bg-[color-mix(in_oklab,var(--accent),var(--background)_45%)] text-accent-foreground",
+                  )
+                : "text-foreground",
+            )}
+          >
+            {children}
+          </div>
+        )}
+        {(showTime || actions != null) && (
+          // Meta row: timestamp + icon-only actions. Always rendered (so it
+          // reserves its height and the gap between bubbles never shifts) but
+          // hidden until the message is hovered or an action is focused.
+          // The timestamp is a user-message affordance only — assistant replies
+          // show their actions alone. User rows read date → icons left-to-right.
+          <div
+            className={cn(
+              "flex items-center gap-2 px-1 text-[12px] leading-none text-muted-foreground select-none",
+              "opacity-0 pointer-events-none transition-opacity duration-150",
+              "group-hover:opacity-100 group-hover:pointer-events-auto",
+              "group-focus-within:opacity-100 group-focus-within:pointer-events-auto",
+            )}
+          >
+            {showTime && <span className="tabular-nums">{time}</span>}
+            {actions != null && <span className="flex items-center gap-0.5">{actions}</span>}
+          </div>
+        )}
+      </motion.div>
+    );
+  },
+);
+
+ChatMessage.displayName = "ChatMessage";
+
+export { ChatMessage };
+export type { ChatMessageProps };
+export default ChatMessage;