@twoux/ui 0.0.0-stage → 0.1.1

package/src/index.ts

@@ -0,0 +1,80 @@
+export { cn } from "./lib/cn";
+export { ShortcutsProvider, useShortcut, useShortcutsEnabled } from "./lib/shortcuts";
+// Generated from shadcn/ui (scripts/tailor-shadcn.mjs). See SHADCN-DIFF.md for every TwoUX change.
+export * from "./components/alert";
+export * from "./components/alert-dialog";
+export * from "./components/avatar";
+export * from "./components/badge";
+export * from "./components/breadcrumb";
+export * from "./components/button";
+export * from "./components/button-group";
+export * from "./components/card";
+export * from "./components/checkbox";
+export * from "./components/collapsible";
+export * from "./components/command";
+export * from "./components/dialog";
+export * from "./components/dropdown-menu";
+export * from "./components/empty";
+export * from "./components/field";
+export * from "./components/input";
+export * from "./components/input-group";
+export * from "./components/kbd";
+export * from "./components/label";
+export * from "./components/popover";
+export * from "./components/select";
+export * from "./components/radio-group";
+export * from "./components/separator";
+export * from "./components/sheet";
+export * from "./components/skeleton";
+export * from "./components/sonner";
+export { toast } from "sonner";
+export * from "./components/switch";
+export * from "./components/table";
+export * from "./components/tabs";
+export * from "./components/textarea";
+export * from "./components/toggle";
+export * from "./components/toggle-group";
+export * from "./components/tooltip";
+// TwoUX compositions built on the above
+export * from "./components/ai";
+export * from "./components/ai-basics";
+export * from "./components/ai-work";
+export * from "./components/board";
+export * from "./components/charts";
+export * from "./components/code";
+export * from "./components/command-extras";
+export * from "./components/data-grid";
+export * from "./components/data-table";
+export * from "./components/dense-table";
+export * from "./components/data-views";
+export * from "./components/feedback-prompt";
+export * from "./components/fields";
+export * from "./components/inbox";
+export * from "./components/labels";
+export * from "./components/segmented-control";
+export * from "./components/split-button";
+export * from "./components/shell";
+export * from "./components/shortcut-sheet";
+export * from "./components/stepper";
+export * from "./components/spinner";
+export * from "./components/theme";
+export * from "./components/motion";
+export * from "./components/agent-review";
+export * from "./components/onboarding";
+export * from "./components/charts-more";
+export * from "./components/workspace";
+export * from "./components/workspace-import";
+export * from "./components/workspace-actions";
+export * from "./components/timeline";
+export * from "./components/scheduler";
+export * from "./components/charts-radial";
+export * from "./components/chart-map";
+export * from "./components/guide-cue";
+export * from "./components/calendar";
+export * from "./components/date-picker";
+export * from "./components/combobox";
+export * from "./components/tag-input";
+export * from "./components/order-book";
+export * from "./components/pane-layout";
+export * from "./components/flow";
+export { useWorkspace } from "./lib/workspace";

package/src/lib/active-indicator.tsx

@@ -0,0 +1,53 @@
+/**
+ * TwoUX: one indicator that slides to the active item (tabs underline, segment pill),
+ * instead of each item painting its own and the highlight jumping.
+ * Place it as the first child of a `relative` list. It follows the child matching `selector`.
+ */
+import * as React from "react"
+import { cn } from "./cn"
+
+type Box = { left: number; top?: number; width: number; height?: number }
+
+export function ActiveIndicator({ selector, fit = "box", className }: { selector: string; fit?: "x" | "box"; className?: string }) {
+  const ref = React.useRef<HTMLSpanElement>(null)
+  const [box, setBox] = React.useState<Box | null>(null)
+  const [animate, setAnimate] = React.useState(false)
+
+  React.useLayoutEffect(() => {
+    const list = ref.current?.parentElement
+    if (!list) return
+    const measure = () => {
+      const el = list.querySelector<HTMLElement>(`:scope > ${selector}`)
+      if (!el || !el.offsetWidth) return setBox(null)
+      setBox(fit === "x" ? { left: el.offsetLeft, width: el.offsetWidth } : { left: el.offsetLeft, top: el.offsetTop, width: el.offsetWidth, height: el.offsetHeight })
+    }
+    measure()
+    const mo = new MutationObserver(measure)
+    mo.observe(list, { subtree: true, childList: true, attributes: true, attributeFilter: ["data-state"] })
+    const ro = new ResizeObserver(measure)
+    ro.observe(list)
+    for (const c of Array.from(list.children)) ro.observe(c)
+    // First position is set without motion; only later changes slide.
+    const raf = requestAnimationFrame(() => setAnimate(true))
+    return () => {
+      mo.disconnect()
+      ro.disconnect()
+      cancelAnimationFrame(raf)
+    }
+  }, [selector, fit])
+
+  return (
+    <span
+      ref={ref}
+      aria-hidden="true"
+      data-slot="active-indicator"
+      className={cn(
+        "pointer-events-none absolute",
+        animate && "transition-[left,top,width,height] duration-(--duration-base) ease-(--ease-out)",
+        !box && "invisible",
+        className
+      )}
+      style={box ?? undefined}
+    />
+  )
+}

package/src/lib/chart-kit.tsx

@@ -0,0 +1,72 @@
+/**
+ * Shared chart internals for TwoUX's own-SVG charts (charts-more, charts-radial, chart-map, timeline).
+ * Not exported from the package index: components use these, apps never do.
+ */
+import * as React from "react"
+
+export const fmt = (n: number) => n.toLocaleString("en-GB")
+export const MINUS = "−"
+export const pct = (part: number, whole: number, digits = 1) => `${whole ? ((part / whole) * 100).toFixed(digits) : "0"}%`
+/** Neutral mark for totals and Other: never a series or status colour. */
+export const NEUTRAL = "var(--color-ink-3)"
+/** Rough width of 12px text, to decide whether a label fits before drawing it. */
+export const textW = (s: string) => s.length * 6.6
+export const svgCls = "block overflow-visible rounded-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"
+export const halo = "stroke-surface [paint-order:stroke]"
+
+export function useWidth<T extends HTMLElement>() {
+  const ref = React.useRef<T>(null)
+  const [w, setW] = React.useState(0)
+  React.useLayoutEffect(() => {
+    const el = ref.current
+    if (!el) return
+    const ro = new ResizeObserver(([e]) => setW(Math.round(e.contentRect.width)))
+    ro.observe(el)
+    setW(el.clientWidth)
+    return () => ro.disconnect()
+  }, [])
+  return [ref, w] as const
+}
+
+/** One active mark, moved with the arrow keys, Home and End; Esc clears. */
+export function useActive(n: number) {
+  const [active, setActive] = React.useState<number | null>(null)
+  const onKey = (e: React.KeyboardEvent) => {
+    if (!n) return
+    if (e.key === "ArrowRight" || e.key === "ArrowDown") { e.preventDefault(); setActive((a) => (a === null ? 0 : Math.min(n - 1, a + 1))) }
+    else if (e.key === "ArrowLeft" || e.key === "ArrowUp") { e.preventDefault(); setActive((a) => (a === null ? n - 1 : Math.max(0, a - 1))) }
+    else if (e.key === "Home") { e.preventDefault(); setActive(0) }
+    else if (e.key === "End") { e.preventDefault(); setActive(n - 1) }
+    else if (e.key === "Escape") setActive(null)
+  }
+  return { active, setActive, onKey }
+}
+
+export function niceStep(raw: number) {
+  if (raw <= 0) return 1
+  const mag = 10 ** Math.floor(Math.log10(raw))
+  return [1, 2, 2.5, 5, 10].map((m) => m * mag).find((s) => s >= raw) ?? raw
+}
+
+export type TipRow = { label: string; value: string; color?: string }
+/** Tooltip: value strong, label secondary, a line key for the series. Never the only way to a value. */
+export function Tip({ x, y, width, title, rows }: { x: number; y: number; width: number; title: string; rows: TipRow[] }) {
+  const left = x + 12 + 184 > width ? Math.max(0, x - 12 - 184) : x + 12
+  return (
+    <div
+      role="status"
+      className="pointer-events-none absolute z-10 grid min-w-44 gap-1 rounded-md border border-line bg-surface px-2.5 py-2 text-sm shadow-pop left-(--x) top-(--y)"
+      style={{ "--x": `${left}px`, "--y": `${Math.max(0, y)}px` } as React.CSSProperties}
+    >
+      <span className="font-medium text-ink">{title}</span>
+      {rows.map((r) => (
+        <span key={r.label} className="flex items-center gap-2">
+          {r.color && <span aria-hidden="true" className="h-0.5 w-3 shrink-0 rounded-full bg-(--c)" style={{ "--c": r.color } as React.CSSProperties} />}
+          <span className="text-ink-2">{r.label}</span>
+          <span className="tabular ml-auto pl-3 font-medium text-ink">{r.value}</span>
+        </span>
+      ))}
+    </div>
+  )
+}
+

package/src/lib/cn.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+	return twMerge(clsx(inputs));
+}

package/src/lib/shortcuts.tsx

@@ -0,0 +1,61 @@
+/**
+ * TwoUX: keyboard shortcuts that match what the button shows.
+ * <ShortcutsProvider enabled={setting}> wraps the app once. Button's `shortcut` then both shows the key
+ * and presses the button. Single-key shortcuts obey `enabled`, so people can turn them off (WCAG 2.1.4);
+ * shortcuts with ⌘/Ctrl/⌥ always work.
+ * A shortcut fires only when its button is visible and enabled, focus is not in a text field,
+ * and no dialog is open (unless the button is inside that dialog).
+ */
+import * as React from "react"
+
+type Ctx = { enabled: boolean }
+const ShortcutsContext = React.createContext<Ctx | null>(null)
+
+export function ShortcutsProvider({ enabled = true, children }: { enabled?: boolean; children: React.ReactNode }) {
+  const value = React.useMemo(() => ({ enabled }), [enabled])
+  return <ShortcutsContext.Provider value={value}>{children}</ShortcutsContext.Provider>
+}
+
+/** Parses "C", "⇧C", "⌘↵", "⌘K", "Esc" into a matcher. */
+function parse(shortcut: string) {
+  const mods = { meta: false, shift: false, alt: false }
+  let key = shortcut
+  for (;;) {
+    if (key.startsWith("⌘")) { mods.meta = true; key = key.slice(1) }
+    else if (key.startsWith("⇧")) { mods.shift = true; key = key.slice(1) }
+    else if (key.startsWith("⌥")) { mods.alt = true; key = key.slice(1) }
+    else break
+  }
+  const named: Record<string, string> = { "↵": "Enter", Esc: "Escape", "⌫": "Backspace", "←": "ArrowLeft", "→": "ArrowRight", "↑": "ArrowUp", "↓": "ArrowDown" }
+  return { ...mods, key: (named[key] ?? key).toLowerCase(), single: !mods.meta && !mods.alt }
+}
+
+const isTyping = (el: Element | null) => !!el?.closest("input:not([type=checkbox]):not([type=radio]), textarea, select, [contenteditable=true]")
+
+/** Presses `ref` when `shortcut` is typed. Used by Button; usable for any element. */
+/** Whether single-key shortcuts are on. Components with their own single-key keys (zoom, etc.) check this. */
+export function useShortcutsEnabled() {
+  return React.useContext(ShortcutsContext)?.enabled ?? true
+}
+
+export function useShortcut(shortcut: string | undefined, ref: React.RefObject<HTMLElement | null>, disabled = false) {
+  const ctx = React.useContext(ShortcutsContext)
+  React.useEffect(() => {
+    if (!shortcut || !ctx || disabled) return
+    const want = parse(shortcut)
+    if (want.single && !ctx.enabled) return
+    const onKey = (e: KeyboardEvent) => {
+      if (e.defaultPrevented || e.repeat) return
+      if (e.key.toLowerCase() !== want.key || (e.metaKey || e.ctrlKey) !== want.meta || e.shiftKey !== want.shift || e.altKey !== want.alt) return
+      if (want.single && isTyping(document.activeElement)) return
+      const el = ref.current
+      if (!el || !el.isConnected || el.offsetParent === null || el.closest("[inert]") || (el as HTMLButtonElement).disabled || el.getAttribute("aria-disabled") === "true") return
+      const dialog = document.querySelector("[role=dialog][data-state=open], [role=alertdialog][data-state=open]")
+      if (dialog && !dialog.contains(el)) return
+      e.preventDefault()
+      el.click()
+    }
+    document.addEventListener("keydown", onKey)
+    return () => document.removeEventListener("keydown", onKey)
+  }, [shortcut, ctx, disabled, ref])
+}

package/src/lib/workspace.tsx

@@ -0,0 +1,10 @@
+import * as React from "react"
+
+/**
+ * Workspace density (see Content density): set by AppShell frame="flush" for tool pages that keep several regions in view.
+ * Components read it to drop their own chrome and gaps, never their sizes: ChartFrame goes flush, PageHeader tightens
+ * its padding. Text, controls, rows and targets stay the same.
+ */
+export const WorkspaceContext = React.createContext(false)
+/** True inside AppShell frame="flush". */
+export const useWorkspace = () => React.useContext(WorkspaceContext)

package/src/shadcn/alert-dialog.tsx

@@ -0,0 +1,196 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "cn"
+import { AlertDialog as AlertDialogPrimitive } from "radix-ui"
+
+import { Button } from "@/registry/new-york-v4/ui/button"
+
+function AlertDialog({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
+}
+
+function AlertDialogTrigger({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  )
+}
+
+function AlertDialogPortal({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+  return (
+    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+  )
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+  return (
+    <AlertDialogPrimitive.Overlay
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        "fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogContent({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Content> & {
+  size?: "default" | "sm"
+}) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Content
+        data-slot="alert-dialog-content"
+        data-size={size}
+        className={cn(
+          "group/alert-dialog-content fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 shadow-lg duration-200 data-[size=sm]:max-w-xs data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[size=default]:sm:max-w-lg",
+          className
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  )
+}
+
+function AlertDialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn(
+        "grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-6 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn(
+        "text-lg font-semibold sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogMedia({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-media"
+      className={cn(
+        "mb-2 inline-flex size-16 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-8",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogAction({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action> &
+  Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
+  return (
+    <Button variant={variant} size={size} asChild>
+      <AlertDialogPrimitive.Action
+        data-slot="alert-dialog-action"
+        className={cn(className)}
+        {...props}
+      />
+    </Button>
+  )
+}
+
+function AlertDialogCancel({
+  className,
+  variant = "outline",
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel> &
+  Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
+  return (
+    <Button variant={variant} size={size} asChild>
+      <AlertDialogPrimitive.Cancel
+        data-slot="alert-dialog-cancel"
+        className={cn(className)}
+        {...props}
+      />
+    </Button>
+  )
+}
+
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogMedia,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+}

package/src/shadcn/alert.tsx

@@ -0,0 +1,65 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "cn"
+
+const alertVariants = cva(
+  "relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "col-start-2 grid justify-items-start gap-1 text-sm text-muted-foreground [&_p]:leading-relaxed",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Alert, AlertTitle, AlertDescription }

package/src/shadcn/avatar.tsx

@@ -0,0 +1,108 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "cn"
+import { Avatar as AvatarPrimitive } from "radix-ui"
+
+function Avatar({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root> & {
+  size?: "default" | "sm" | "lg"
+}) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      data-size={size}
+      className={cn(
+        "group/avatar relative flex size-8 shrink-0 overflow-hidden rounded-full select-none data-[size=lg]:size-10 data-[size=sm]:size-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarImage({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn("aspect-square size-full", className)}
+      {...props}
+    />
+  )
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        "flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarBadge({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="avatar-badge"
+      className={cn(
+        "absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground 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}
+    />
+  )
+}
+
+export {
+  Avatar,
+  AvatarImage,
+  AvatarFallback,
+  AvatarBadge,
+  AvatarGroup,
+  AvatarGroupCount,
+}