@exxatdesignux/ui 0.0.5

package/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "@exxatdesignux/ui",
+  "version": "0.0.5",
+  "description": "Exxat shared design system (components, hooks, tokens). Monorepo setup: clone repo then pnpm bootstrap at workspace root — see github.com/ExxatDesign/Exxat-DS-Workspace README.",
+  "type": "module",
+  "private": false,
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ExxatDesign/Exxat-DS-Workspace.git",
+    "directory": "packages/ui"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "default": "./src/index.ts"
+    },
+    "./globals.css": "./src/globals.css",
+    "./theme.css": "./src/theme.css",
+    "./components/*": "./src/components/ui/*",
+    "./hooks/*": "./src/hooks/*",
+    "./lib/*": "./src/lib/*"
+  },
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "files": [
+    "src"
+  ],
+  "dependencies": {
+    "@hookform/resolvers": "^5.2.2",
+    "@radix-ui/react-dialog": "^1.1.14",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "lucide-react": "^0.577.0",
+    "radix-ui": "^1.4.3",
+    "react-day-picker": "^9.14.0",
+    "react-hook-form": "^7.72.0",
+    "react-payment-inputs": "^1.2.0",
+    "recharts": "^2.15.4",
+    "shadcn": "^4.1.0",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.5.0",
+    "tw-animate-css": "^1.4.0",
+    "use-mask-input": "^3.9.0",
+    "vaul": "^1.1.2",
+    "zod": "^4.3.6"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4.2.1",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "postcss": "^8",
+    "tailwindcss": "^4.2.1",
+    "typescript": "^5.9.3"
+  },
+  "peerDependencies": {
+    "next-themes": ">=0.4",
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint src/"
+  }
+}

package/src/components/ui/avatar.tsx

@@ -0,0 +1,384 @@
+"use client"
+
+import * as React from "react"
+import { Check, Plus } from "lucide-react"
+import { Avatar as AvatarPrimitive } from "radix-ui"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../../lib/utils"
+import { Badge } from "./badge"
+
+/** Maps to Shadcn Studio avatar demos (shape / ring / stack). Uses theme tokens only. */
+const avatarRootVariants = cva(
+  "group/avatar relative flex shrink-0 overflow-hidden select-none",
+  {
+  variants: {
+    size: {
+      sm: "size-6",
+      default: "size-8",
+      lg: "size-10",
+    },
+    shape: {
+      circle: "rounded-full",
+      square: "rounded-none",
+      "rounded-sm": "rounded-sm",
+      "rounded-md": "rounded-md",
+      "rounded-lg": "rounded-lg",
+      "rounded-xl": "rounded-xl",
+    },
+    variant: {
+      default: "",
+      ring: "ring-2 ring-ring",
+      "ring-offset": "ring-2 ring-ring ring-offset-2 ring-offset-background",
+      group: "ring-2 ring-background",
+    },
+  },
+  defaultVariants: {
+    size: "default",
+    shape: "circle",
+    variant: "default",
+  },
+  }
+)
+
+const AVATAR_INSET_AFTER: Record<NonNullable<VariantProps<typeof avatarRootVariants>["shape"]>, string> = {
+  circle: "after:rounded-full",
+  square: "after:rounded-none",
+  "rounded-sm": "after:rounded-sm",
+  "rounded-md": "after:rounded-md",
+  "rounded-lg": "after:rounded-lg",
+  "rounded-xl": "after:rounded-xl",
+}
+
+const avatarImageShape = cn(
+  "aspect-square size-full object-cover",
+  "group-data-[shape=circle]/avatar:rounded-full",
+  "group-data-[shape=square]/avatar:rounded-none",
+  "group-data-[shape=rounded-sm]/avatar:rounded-sm",
+  "group-data-[shape=rounded-md]/avatar:rounded-md",
+  "group-data-[shape=rounded-lg]/avatar:rounded-lg",
+  "group-data-[shape=rounded-xl]/avatar:rounded-xl"
+)
+
+const avatarFallbackShape = cn(
+  "flex size-full items-center justify-center bg-muted text-sm text-muted-foreground",
+  "group-data-[shape=circle]/avatar:rounded-full",
+  "group-data-[shape=square]/avatar:rounded-none",
+  "group-data-[shape=rounded-sm]/avatar:rounded-sm",
+  "group-data-[shape=rounded-md]/avatar:rounded-md",
+  "group-data-[shape=rounded-lg]/avatar:rounded-lg",
+  "group-data-[shape=rounded-xl]/avatar:rounded-xl",
+  "group-data-[size=sm]/avatar:text-xs"
+)
+
+type AvatarProps = React.ComponentProps<typeof AvatarPrimitive.Root> &
+  VariantProps<typeof avatarRootVariants> & {
+    /**
+     * Subtle inner hairline on the avatar edge (token `border-border`).
+     * Default **false** — full-bleed circle for photos/logos (Shadcn Studio–style profile look).
+     */
+    insetBorder?: boolean
+  }
+
+function Avatar({
+  className,
+  size = "default",
+  shape = "circle",
+  variant = "default",
+  insetBorder = false,
+  ...props
+}: AvatarProps) {
+  const shapeKey = shape ?? "circle"
+  const insetClass =
+    insetBorder &&
+    cn(
+      "after:pointer-events-none after:absolute after:inset-0 after:border after:border-border after:mix-blend-darken dark:after:mix-blend-lighten",
+      AVATAR_INSET_AFTER[shapeKey]
+    )
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      data-size={size}
+      data-shape={shape}
+      className={cn(avatarRootVariants({ size, shape, variant }), insetClass, className)}
+      {...props}
+    />
+  )
+}
+
+function AvatarImage({
+  className,
+  referrerPolicy = "no-referrer",
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      referrerPolicy={referrerPolicy}
+      className={cn(avatarImageShape, className)}
+      {...props}
+    />
+  )
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(avatarFallbackShape, className)}
+      {...props}
+    />
+  )
+}
+
+function AvatarBadge({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="avatar-badge"
+      className={cn(
+        "absolute end-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none",
+        "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
+        "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
+        "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="avatar-group"
+      className={cn(
+        "group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarGroupCount({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="avatar-group-count"
+      className={cn(
+        "relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+// ── Shadcn Studio–style compositions (tokens + a11y checklist: sr-only status, meaningful alt on image) ──
+
+type AvatarShape = NonNullable<VariantProps<typeof avatarRootVariants>["shape"]>
+type AvatarVariant = NonNullable<VariantProps<typeof avatarRootVariants>["variant"]>
+type AvatarSize = NonNullable<VariantProps<typeof avatarRootVariants>["size"]>
+
+type AvatarInitialsProps = Omit<AvatarProps, "children"> & {
+  initials: string
+  /** When true, initials are hidden from accessibility tree (pair with visible name). Default true. */
+  decorative?: boolean
+  /** Extra classes on `AvatarFallback` (e.g. font weight). */
+  fallbackClassName?: string
+}
+
+/** Initials-only chip using `--avatar-initials-bg` / `--avatar-initials-fg` (Exxat tokens). */
+function AvatarInitials({
+  initials,
+  decorative = true,
+  fallbackClassName,
+  className,
+  ...avatarProps
+}: AvatarInitialsProps) {
+  return (
+    <Avatar className={className} {...avatarProps}>
+      <AvatarFallback
+        aria-hidden={decorative ? true : undefined}
+        className={cn(
+          "border-0 bg-[var(--avatar-initials-bg)] font-semibold text-[var(--avatar-initials-fg)]",
+          fallbackClassName
+        )}
+      >
+        {initials}
+      </AvatarFallback>
+    </Avatar>
+  )
+}
+
+type AvatarStatusTone = "online" | "busy" | "away"
+
+const avatarStatusDot: Record<AvatarStatusTone, string> = {
+  online: "bg-emerald-600 dark:bg-emerald-400",
+  busy: "bg-destructive",
+  away: "bg-amber-600 dark:bg-amber-400",
+}
+
+/** Presence dot (Studio avatars 7–9). Wraps a single `Avatar`. */
+function AvatarStatus({
+  children,
+  status,
+  label,
+  className,
+  position = "bottom-end",
+}: {
+  children: React.ReactNode
+  status: AvatarStatusTone
+  /** Announced to screen readers (e.g. "Busy"). */
+  label: string
+  className?: string
+  /** `bottom-end` matches `AvatarBadge`; `top-end` matches some Studio away demos. */
+  position?: "bottom-end" | "top-end"
+}) {
+  const pos =
+    position === "top-end"
+      ? "-top-0.5 -end-0.5 bottom-auto start-auto"
+      : "-end-0.5 -bottom-0.5 top-auto start-auto"
+  return (
+    <span className={cn("relative inline-flex w-fit shrink-0", className)}>
+      {children}
+      <span
+        className={cn(
+          "pointer-events-none absolute z-10 size-3 rounded-full border-2 border-background",
+          pos,
+          avatarStatusDot[status]
+        )}
+        aria-hidden
+      />
+      <span className="sr-only">{label}</span>
+    </span>
+  )
+}
+
+/** Numeric badge overlay (Studio avatar 11). */
+function AvatarNotificationCount({
+  children,
+  count,
+  className,
+  badgeClassName,
+}: {
+  children: React.ReactNode
+  count: number | string
+  className?: string
+  badgeClassName?: string
+}) {
+  return (
+    <span className={cn("relative inline-flex w-fit shrink-0", className)}>
+      {children}
+      <Badge
+        className={cn(
+          "absolute -top-2.5 -end-2.5 z-10 h-5 min-w-5 justify-center px-1 tabular-nums",
+          badgeClassName
+        )}
+      >
+        {count}
+      </Badge>
+    </span>
+  )
+}
+
+/** Verified check overlay (Studio avatar 12) — primary token fill. */
+function AvatarVerified({
+  children,
+  label = "Verified",
+  className,
+}: {
+  children: React.ReactNode
+  label?: string
+  className?: string
+}) {
+  return (
+    <span className={cn("relative inline-flex w-fit shrink-0", className)}>
+      {children}
+      <span className="pointer-events-none absolute -top-1.5 -end-1.5 z-10 inline-flex size-4 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-sm">
+        <Check className="size-2.5" strokeWidth={3} aria-hidden />
+        <span className="sr-only">{label}</span>
+      </span>
+    </span>
+  )
+}
+
+/** Leo assistant mark — centralized; same icon treatment as Ask Leo sidebar. */
+function AvatarLeoAssistant({
+  className,
+  size = "sm",
+  ...props
+}: Omit<AvatarProps, "children" | "shape">) {
+  return (
+    <Avatar size={size} shape="circle" insetBorder={false} className={className} {...props}>
+      <AvatarFallback className="bg-brand/15 p-0">
+        <span className="sr-only">Leo</span>
+        <i
+          className="fa-duotone fa-solid fa-star-christmas text-xs text-brand"
+          aria-hidden="true"
+        />
+      </AvatarFallback>
+    </Avatar>
+  )
+}
+
+/** “Add profile” affordance (Studio avatar 10). `onClick` on the button. */
+function AvatarPlusAction({
+  children,
+  actionLabel,
+  onClick,
+  className,
+  buttonClassName,
+}: {
+  children: React.ReactNode
+  actionLabel: string
+  onClick?: () => void
+  className?: string
+  buttonClassName?: string
+}) {
+  return (
+    <span className={cn("relative inline-flex w-fit shrink-0", className)}>
+      {children}
+      <button
+        type="button"
+        onClick={onClick}
+        className={cn(
+          "focus-visible:ring-ring/50 absolute -end-1 -bottom-1 z-10 inline-flex size-7 cursor-pointer items-center justify-center rounded-full bg-background shadow-sm ring-1 ring-border focus-visible:ring-[3px] focus-visible:outline-none",
+          buttonClassName
+        )}
+      >
+        <Plus className="size-4 text-muted-foreground" aria-hidden />
+        <span className="sr-only">{actionLabel}</span>
+      </button>
+    </span>
+  )
+}
+
+export {
+  Avatar,
+  AvatarImage,
+  AvatarFallback,
+  AvatarGroup,
+  AvatarGroupCount,
+  AvatarBadge,
+  AvatarInitials,
+  AvatarStatus,
+  AvatarNotificationCount,
+  AvatarVerified,
+  AvatarPlusAction,
+  AvatarLeoAssistant,
+  avatarRootVariants,
+}
+export type {
+  AvatarProps,
+  AvatarInitialsProps,
+  AvatarShape,
+  AvatarVariant,
+  AvatarSize,
+  AvatarStatusTone,
+}

package/src/components/ui/badge.tsx

@@ -0,0 +1,49 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
+
+import { cn } from "../../lib/utils"
+
+const badgeVariants = cva(
+  "group/badge inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-1 text-xs font-medium leading-none whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        secondary:
+          "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+        destructive:
+          "bg-destructive/10 text-[var(--chip-destructive)] focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:text-red-100 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
+        outline:
+          "border-border text-foreground [a]:hover:bg-interactive-hover [a]:hover:text-muted-foreground",
+        ghost:
+          "hover:bg-interactive-hover hover:text-muted-foreground dark:hover:bg-interactive-hover-subtle",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot.Root : "span"
+
+  return (
+    <Comp
+      data-slot="badge"
+      data-variant={variant}
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }