@exxatdesignux/ui 0.0.5

package/src/components/ui/banner.tsx

@@ -0,0 +1,364 @@
+"use client"
+
+/**
+ * Banner — two types of banner for system-level and local-level messaging.
+ *
+ * 1. SystemBanner: full-width strip at the very top of the app (above sidebar).
+ *    Used for maintenance notices, feature promotions, global alerts.
+ *
+ * 2. LocalBanner: inline alert within a page section.
+ *    Used for page-specific errors, warnings, and informational messages.
+ *
+ * Both support: info, warning, error, success, and promo variants.
+ * Both are dismissible and accessible (role="alert" / role="status").
+ */
+
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "../../lib/utils"
+import { Button } from "./button"
+import { Tip }    from "./tip"
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Variant definitions
+// ─────────────────────────────────────────────────────────────────────────────
+
+const VARIANT_CONFIG = {
+  info: {
+    icon: "fa-circle-info",
+    prefix: "fa-light",
+    role: "status" as const,
+    live: "polite" as const,
+  },
+  warning: {
+    icon: "fa-triangle-exclamation",
+    prefix: "fa-light",
+    role: "alert" as const,
+    live: "assertive" as const,
+  },
+  error: {
+    icon: "fa-circle-exclamation",
+    prefix: "fa-light",
+    role: "alert" as const,
+    live: "assertive" as const,
+  },
+  success: {
+    icon: "fa-circle-check",
+    prefix: "fa-light",
+    role: "status" as const,
+    live: "polite" as const,
+  },
+  promo: {
+    icon: "fa-star-christmas text-brand",
+    prefix: "fa-duotone fa-solid",
+    role: "status" as const,
+    live: "polite" as const,
+  },
+}
+
+type BannerVariant = keyof typeof VARIANT_CONFIG
+
+// ─────────────────────────────────────────────────────────────────────────────
+// SystemBanner — inline at the top of the main content area
+// ─────────────────────────────────────────────────────────────────────────────
+
+const systemBannerVariants = cva(
+  "relative flex overflow-hidden rounded-lg border text-sm transition-all",
+  {
+    variants: {
+      variant: {
+        /* Prominent defaults — darker shells + light foreground copy for ≥4.5:1 on the fill. */
+        info:    "bg-blue-900 text-blue-50 border-blue-950/35 dark:bg-blue-950 dark:text-blue-50 dark:border-blue-900/60",
+        warning: "bg-amber-900 text-amber-50 border-amber-950/35 dark:bg-amber-950 dark:text-amber-50 dark:border-amber-900/60",
+        error:   "bg-red-900 text-red-50 border-red-950/35 dark:bg-red-950 dark:text-red-50 dark:border-red-900/60",
+        success: "bg-emerald-900 text-emerald-50 border-emerald-950/35 dark:bg-emerald-950 dark:text-emerald-50 dark:border-emerald-900/60",
+        promo:   "bg-gradient-to-r from-brand/14 via-brand/8 to-brand/5 text-foreground border-brand/22 dark:from-brand/20 dark:via-brand/12 dark:to-brand/7 dark:border-brand/26",
+      },
+      /** Emphasis — "prominent" uses dark solid fills; "subtle" uses soft tinted bg. */
+      emphasis: {
+        prominent: "",
+        subtle: "",
+      },
+      /** Action placement: "inline" puts the action to the right; "bottom" puts it below the text */
+      actionPosition: {
+        // flex-wrap so the action button drops to a second line at 200%+ zoom instead of overflowing
+        inline: "flex-wrap items-center gap-3 px-4 py-2.5",
+        bottom: "flex-col gap-2 px-4 py-3",
+      },
+    },
+    compoundVariants: [
+      { emphasis: "subtle", variant: "info",    class: "bg-blue-500/5 text-blue-800 border-blue-500/30 dark:bg-blue-500/10 dark:text-blue-200 dark:border-blue-500/20" },
+      { emphasis: "subtle", variant: "warning", class: "bg-amber-500/5 text-amber-800 border-amber-500/30 dark:bg-amber-500/10 dark:text-amber-200 dark:border-amber-500/20" },
+      { emphasis: "subtle", variant: "error",   class: "bg-red-500/5 text-red-800 border-red-500/30 dark:bg-red-500/10 dark:text-red-200 dark:border-red-500/20" },
+      { emphasis: "subtle", variant: "success", class: "bg-emerald-500/5 text-emerald-800 border-emerald-500/30 dark:bg-emerald-500/10 dark:text-emerald-200 dark:border-emerald-500/20" },
+      { emphasis: "subtle", variant: "promo",   class: "bg-brand/5 text-foreground border-brand/30 dark:bg-brand/10 dark:border-brand/20" },
+    ],
+    defaultVariants: { variant: "info", emphasis: "prominent", actionPosition: "inline" },
+  }
+)
+
+export interface SystemBannerProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof systemBannerVariants> {
+  /** Banner title (optional — adds a bold heading) */
+  title?: string
+  /** The banner message */
+  children: React.ReactNode
+  /** Whether the banner can be dismissed */
+  dismissible?: boolean
+  /** Callback when dismissed */
+  onDismiss?: () => void
+  /** Optional action — renders as a link-style button. Use href for server components, onClick for client. */
+  action?: {
+    label: string
+    href?: string
+    onClick?: () => void
+  }
+  /** Where to place the action: "inline" (right side) or "bottom" (below text) */
+  actionPosition?: "inline" | "bottom"
+  /** Override the default icon */
+  icon?: string
+  /** Optional absolutely-positioned decorative layer (e.g. `<AiThinkingOverlay />`). */
+  decorativeOverlay?: React.ReactNode
+}
+
+export function SystemBanner({
+  children,
+  title,
+  variant = "info",
+  emphasis = "prominent",
+  dismissible = true,
+  onDismiss,
+  action,
+  actionPosition = "inline",
+  icon,
+  decorativeOverlay,
+  className,
+  style,
+  ...props
+}: SystemBannerProps) {
+  const [dismissed, setDismissed] = React.useState(false)
+  const config = VARIANT_CONFIG[variant ?? "info"]
+
+  function handleDismiss() {
+    setDismissed(true)
+    onDismiss?.()
+  }
+
+  if (dismissed) return null
+
+  const actionEl = action && (
+    action.href ? (
+      <a
+        href={action.href}
+        className="inline-flex shrink-0 items-center gap-1 text-xs font-semibold underline underline-offset-2 hover:no-underline"
+      >
+        {action.label}
+        <i className="fa-light fa-arrow-right text-xs" aria-hidden="true" />
+      </a>
+    ) : (
+      <Button
+        size="xs"
+        variant="link"
+        onClick={action.onClick}
+        className="h-auto shrink-0 px-0 text-xs font-semibold underline underline-offset-2 hover:no-underline"
+      >
+        {action.label}
+        <i className="fa-light fa-arrow-right text-xs ml-0.5" aria-hidden="true" />
+      </Button>
+    )
+  )
+
+  /** Outside-only brand halo (no inset fill — glow does not paint inside the banner). */
+  const promoOuterShadow =
+    emphasis === "subtle"
+      ? "0 10px 36px -6px oklch(from var(--brand-color) l c h / 0.2), 0 2px 12px -4px oklch(from var(--brand-color) l c h / 0.12)"
+      : "0 14px 48px -8px oklch(from var(--brand-color) l c h / 0.26), 0 4px 18px -4px oklch(from var(--brand-color) l c h / 0.16)"
+
+  return (
+    <div
+      role={config.role}
+      aria-live={config.live}
+      className={cn(systemBannerVariants({ variant, emphasis, actionPosition }), className)}
+      style={{
+        ...(variant === "promo" ? { boxShadow: promoOuterShadow } : null),
+        ...style,
+      }}
+      {...props}
+    >
+      {decorativeOverlay}
+      {/* Icon */}
+      <i
+        className={cn(config.prefix, icon ?? config.icon, "shrink-0 text-[14px]", actionPosition === "bottom" ? "mt-0.5" : "")}
+        aria-hidden="true"
+      />
+
+      {/* Content + inline action */}
+      {actionPosition === "inline" ? (
+        <>
+          <div className="min-w-0 flex-1">
+            {title && <span className="font-semibold mr-1.5">{title}</span>}
+            <span className="opacity-90">{children}</span>
+          </div>
+          {actionEl}
+        </>
+      ) : (
+        <div className="min-w-0 flex-1">
+          {title && <p className="font-semibold leading-tight mb-0.5">{title}</p>}
+          <p className="opacity-90 leading-relaxed">{children}</p>
+          {actionEl && <div className="mt-1.5">{actionEl}</div>}
+        </div>
+      )}
+
+      {/* Dismiss */}
+      {dismissible && (
+        <Tip label="Dismiss" side="bottom">
+          <button
+            type="button"
+            aria-label="Dismiss banner"
+            onClick={handleDismiss}
+            className={cn(
+              "inline-flex size-5 shrink-0 items-center justify-center rounded transition-colors",
+              actionPosition === "bottom" ? "absolute top-2.5 right-2.5" : "",
+              "hover:bg-current/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            )}
+          >
+            <i className="fa-light fa-xmark text-xs" aria-hidden="true" />
+          </button>
+        </Tip>
+      )}
+    </div>
+  )
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// LocalBanner — inline, within page sections
+// ─────────────────────────────────────────────────────────────────────────────
+
+const localBannerVariants = cva(
+  "flex items-start gap-3 rounded-lg border px-4 py-3 text-sm transition-all",
+  {
+    variants: {
+      variant: {
+        info:    "border-blue-500/30 bg-blue-500/5 text-blue-800 dark:bg-blue-500/10 dark:text-blue-200 dark:border-blue-500/20",
+        warning: "border-amber-500/30 bg-amber-500/5 text-amber-800 dark:bg-amber-500/10 dark:text-amber-200 dark:border-amber-500/20",
+        error:   "border-red-500/30 bg-red-500/5 text-red-800 dark:bg-red-500/10 dark:text-red-200 dark:border-red-500/20",
+        success: "border-emerald-500/30 bg-emerald-500/5 text-emerald-800 dark:bg-emerald-500/10 dark:text-emerald-200 dark:border-emerald-500/20",
+        promo:   "border-brand/30 bg-brand/5 text-foreground dark:bg-brand/10 dark:border-brand/20",
+      },
+    },
+    defaultVariants: { variant: "info" },
+  }
+)
+
+export interface LocalBannerProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof localBannerVariants> {
+  /** Banner title (optional) */
+  title?: string
+  /** Banner message */
+  children: React.ReactNode
+  /** Whether the banner can be dismissed */
+  dismissible?: boolean
+  /** Callback when dismissed */
+  onDismiss?: () => void
+  /** Optional action — renders as link (href) or button (onClick) */
+  action?: {
+    label: string
+    href?: string
+    onClick?: () => void
+  }
+  /** Optional retry action for error states */
+  retry?: {
+    label?: string
+    onClick: () => void
+  }
+  /** Override the default icon */
+  icon?: string
+}
+
+export function LocalBanner({
+  children,
+  title,
+  variant = "info",
+  dismissible = false,
+  onDismiss,
+  action,
+  retry,
+  icon,
+  className,
+  ...props
+}: LocalBannerProps) {
+  const [dismissed, setDismissed] = React.useState(false)
+  const config = VARIANT_CONFIG[variant ?? "info"]
+
+  function handleDismiss() {
+    setDismissed(true)
+    onDismiss?.()
+  }
+
+  if (dismissed) return null
+
+  return (
+    <div
+      role={config.role}
+      aria-live={config.live}
+      className={cn(localBannerVariants({ variant }), className)}
+      {...props}
+    >
+      {/* Icon */}
+      <i
+        className={cn(config.prefix, icon ?? config.icon, "text-[15px] shrink-0 mt-0.5")}
+        aria-hidden="true"
+      />
+
+      {/* Content */}
+      <div className="flex-1 min-w-0">
+        {title && (
+          <p className="font-semibold leading-tight mb-0.5">{title}</p>
+        )}
+        <div className="text-sm leading-relaxed opacity-90">{children}</div>
+
+        {/* Actions */}
+        {(action || retry) && (
+          <div className="flex items-center gap-2 mt-2.5">
+            {retry && (
+              <Button size="xs" variant="outline" onClick={retry.onClick}>
+                <i className="fa-light fa-arrow-rotate-right text-xs" aria-hidden="true" />
+                {retry.label ?? "Retry"}
+              </Button>
+            )}
+            {action && (
+              action.href ? (
+                <a href={action.href} className="inline-flex items-center gap-1 text-xs font-semibold underline underline-offset-2 hover:no-underline">
+                  {action.label} <i className="fa-light fa-arrow-right text-xs" aria-hidden="true" />
+                </a>
+              ) : (
+                <Button size="xs" variant="outline" onClick={action.onClick}>
+                  {action.label}
+                </Button>
+              )
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* Dismiss */}
+      {dismissible && (
+        <Tip label="Dismiss" side="left">
+          <button
+            type="button"
+            aria-label="Dismiss"
+            onClick={handleDismiss}
+            className={cn(
+              "inline-flex items-center justify-center size-5 rounded transition-colors shrink-0",
+              "hover:bg-current/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            )}
+          >
+            <i className="fa-light fa-xmark text-xs" aria-hidden="true" />
+          </button>
+        </Tip>
+      )}
+    </div>
+  )
+}

package/src/components/ui/breadcrumb.tsx

@@ -0,0 +1,120 @@
+import * as React from "react"
+import { Slot } from "radix-ui"
+
+import { cn } from "../../lib/utils"
+
+function Breadcrumb({ className, ...props }: React.ComponentProps<"nav">) {
+  return (
+    <nav
+      aria-label="breadcrumb"
+      data-slot="breadcrumb"
+      className={cn(className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
+  return (
+    <ol
+      data-slot="breadcrumb-list"
+      className={cn(
+        "flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-item"
+      className={cn("inline-flex items-center gap-1", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbLink({
+  asChild,
+  className,
+  ...props
+}: React.ComponentProps<"a"> & {
+  asChild?: boolean
+}) {
+  const Comp = asChild ? Slot.Root : "a"
+
+  return (
+    <Comp
+      data-slot="breadcrumb-link"
+      className={cn("transition-colors hover:text-interactive-hover-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-page"
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn("font-normal text-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-separator"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("[&>svg]:size-3.5", className)}
+      {...props}
+    >
+      {children ?? (
+        <i className="fa-light fa-chevron-right rtl:rotate-180" aria-hidden="true" />
+      )}
+    </li>
+  )
+}
+
+function BreadcrumbEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-ellipsis"
+      role="presentation"
+      aria-hidden="true"
+      className={cn(
+        "flex size-5 items-center justify-center [&>svg]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <i className="fa-light fa-ellipsis" aria-hidden="true" />
+      <span className="sr-only">More</span>
+    </span>
+  )
+}
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+}

package/src/components/ui/button.tsx

@@ -0,0 +1,66 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
+
+import { cn } from "../../lib/utils"
+
+const buttonVariants = cva(
+  "group/button inline-flex shrink-0 items-center justify-center rounded-md border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        outline:
+          "border-input bg-background hover:bg-interactive-hover hover:text-interactive-hover-foreground aria-expanded:bg-interactive-hover aria-expanded:text-interactive-hover-foreground dark:bg-input/15 dark:hover:bg-input/25",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost:
+          "hover:bg-interactive-hover hover:text-interactive-hover-foreground aria-expanded:bg-interactive-hover aria-expanded:text-interactive-hover-foreground dark:hover:bg-interactive-hover-subtle",
+        destructive:
+          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default:
+          "h-9 gap-1.5 px-3 has-data-[icon=inline-end]:pe-2.5 has-data-[icon=inline-start]:ps-2.5",
+        xs: "h-6 gap-1 px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-8 gap-1 px-3 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pe-2 has-data-[icon=inline-start]:ps-2 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-10 gap-1.5 px-4 has-data-[icon=inline-end]:pe-3.5 has-data-[icon=inline-start]:ps-3.5",
+        icon: "size-9",
+        "icon-xs":
+          "size-6 in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm":
+          "size-8 in-data-[slot=button-group]:rounded-lg",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+const Button = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button"> &
+    VariantProps<typeof buttonVariants> & {
+      asChild?: boolean
+    }
+>(({ className, variant = "default", size = "default", asChild = false, ...props }, ref) => {
+  const Comp = asChild ? Slot.Root : "button"
+
+  return (
+    <Comp
+      ref={ref}
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size }), className)}
+      {...props}
+    />
+  )
+})
+Button.displayName = "Button"
+
+export { Button, buttonVariants }