@adres/mgda-ui 0.0.0-stage → 0.0.2

package/src/components/answer-actions.tsx

@@ -0,0 +1,313 @@
+"use client"
+
+import * as React from "react"
+import { Check, ChevronLeft, ChevronRight, Flag, Link2, MoreHorizontal } from "lucide-react"
+import { cn } from "../lib/cn"
+import { Button } from "./button"
+import {
+  Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle,
+} from "./dialog"
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "./dropdown-menu"
+import { Label, Textarea } from "./input"
+import { MessageActions, type MessageRating } from "./message-actions"
+import { RadioGroup, RadioGroupItem } from "./radio-group"
+import { Text } from "./text"
+import { TextLink } from "./text-link"
+
+export interface AnswerFeedback {
+  rating: MessageRating
+  reasons: string[]
+  comment: string
+}
+
+export interface AnswerReport {
+  reason: string
+  details: string
+}
+
+export interface FeedbackReasonChipsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onToggle"> {
+  reasons: string[]
+  selected: string[]
+  onToggle: (reason: string) => void
+  /** Accessible name of the group. */
+  label: string
+}
+
+/** Multi-select reason chips: toggle buttons with aria-pressed. */
+export function FeedbackReasonChips({ reasons, selected, onToggle, label, className, ...props }: FeedbackReasonChipsProps) {
+  return (
+    <div role="group" aria-label={label} className={cn("ax:flex ax:flex-wrap ax:gap-xs", className)} {...props}>
+      {reasons.map((reason) => {
+        const on = selected.includes(reason)
+        return (
+          <Button
+            key={reason}
+            type="button"
+            variant={on ? "secondary" : "outline"}
+            size="sm"
+            aria-pressed={on}
+            onClick={() => onToggle(reason)}
+            className="ax:rounded-full"
+          >
+            {on && <Check />}
+            {reason}
+          </Button>
+        )
+      })}
+    </div>
+  )
+}
+
+/** Opens after a rating: why, in a tap, plus an optional comment. Down asks; up only offers. */
+function FeedbackForm({ rating, reasons, onSubmit, onCancel }: {
+  rating: MessageRating
+  reasons: string[]
+  onSubmit: (feedback: AnswerFeedback) => void
+  onCancel: () => void
+}) {
+  const id = React.useId()
+  const [selected, setSelected] = React.useState<string[]>([])
+  const [comment, setComment] = React.useState("")
+  const firstRef = React.useRef<HTMLDivElement>(null)
+
+  // Move focus into the form so keyboard users land on the reasons.
+  React.useEffect(() => {
+    firstRef.current?.querySelector("button")?.focus()
+  }, [])
+
+  const title = rating === "down" ? "What went wrong?" : "What was good?"
+  return (
+    <div className="ax:flex ax:flex-col ax:gap-sm ax:rounded-md ax:border ax:border-border ax:bg-card ax:p-md">
+      <form
+        aria-labelledby={`${id}-title`}
+        className="ax:flex ax:flex-col ax:gap-sm"
+        onSubmit={(event) => {
+          event.preventDefault()
+          onSubmit({ rating, reasons: selected, comment: comment.trim() })
+        }}
+      >
+        <Text as="p" id={`${id}-title`} size="2" weight="medium">{title}</Text>
+        <div ref={firstRef}>
+          <FeedbackReasonChips
+            reasons={reasons}
+            selected={selected}
+            label={title}
+            onToggle={(reason) => setSelected((prev) => prev.includes(reason) ? prev.filter((r) => r !== reason) : [...prev, reason])}
+          />
+        </div>
+        <div className="ax:flex ax:flex-col ax:gap-1.5">
+          <Label htmlFor={`${id}-comment`} className="ax:text-muted-foreground">Anything else? (optional)</Label>
+          <Textarea id={`${id}-comment`} value={comment} onChange={(event) => setComment(event.target.value)} rows={2} resize="none" size="sm" />
+        </div>
+        <div className="ax:flex ax:gap-xs">
+          <Button type="submit" size="sm" className="ax:rounded-full" disabled={rating === "down" && selected.length === 0 && !comment.trim()}>
+            Send feedback
+          </Button>
+          <Button type="button" variant="ghost" size="sm" className="ax:rounded-full" onClick={onCancel}>{rating === "down" ? "Cancel" : "Skip"}</Button>
+        </div>
+      </form>
+    </div>
+  )
+}
+
+function ReportDialog({ open, onOpenChange, reasons, description, onReport }: {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  reasons: { value: string; label: string }[]
+  description: string
+  onReport?: (report: AnswerReport) => void
+}) {
+  const id = React.useId()
+  const [reason, setReason] = React.useState("")
+  const [details, setDetails] = React.useState("")
+  return (
+    <Dialog open={open} onOpenChange={(next) => {
+      onOpenChange(next)
+      if (!next) { setReason(""); setDetails("") }
+    }}>
+      <DialogContent size="sm">
+        <form onSubmit={(event) => {
+          event.preventDefault()
+          onReport?.({ reason, details: details.trim() })
+          onOpenChange(false)
+          setReason("")
+          setDetails("")
+        }}>
+          <DialogHeader>
+            <DialogTitle>Report a problem</DialogTitle>
+            <DialogDescription>{description}</DialogDescription>
+          </DialogHeader>
+          <div className="ax:flex ax:flex-col ax:gap-md ax:py-md">
+            <RadioGroup value={reason} onValueChange={setReason} aria-label="Reason">
+              {reasons.map((option) => (
+                <div key={option.value} className="ax:flex ax:items-center ax:gap-sm">
+                  <RadioGroupItem value={option.value} id={`${id}-${option.value}`} />
+                  <Label htmlFor={`${id}-${option.value}`}>{option.label}</Label>
+                </div>
+              ))}
+            </RadioGroup>
+            <div className="ax:flex ax:flex-col ax:gap-1.5">
+              <Label htmlFor={`${id}-details`}>Details (optional)</Label>
+              <Textarea id={`${id}-details`} value={details} onChange={(event) => setDetails(event.target.value)} rows={3} resize="none" />
+            </div>
+          </div>
+          <DialogFooter>
+            <DialogClose asChild><Button type="button" variant="outline">Cancel</Button></DialogClose>
+            <Button type="submit" disabled={!reason}>Send report</Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+export interface AnswerActionsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onCopy"> {
+  /** Text the Copy action copies (the visible version). */
+  text: string
+  /** Reasons offered after thumbs down; one or a comment is required to send. */
+  negativeReasons: string[]
+  /** Reasons offered after thumbs up; optional to send. */
+  positiveReasons: string[]
+  /** Sent feedback, for logging. */
+  onFeedback?: (feedback: AnswerFeedback) => void
+  /** The "Undo" link after sending was used. */
+  onUndo?: () => void
+  /** Zero-based index of the visible version. */
+  version?: number
+  versionCount?: number
+  onVersionChange?: (version: number) => void
+  onRegenerate?: () => void
+  regenerating?: boolean
+  /** Keeps Regenerate in place but disabled, e.g. when no more versions can be made. */
+  regenerateDisabled?: boolean
+  /** Adds "Copy link" to the More menu. */
+  onCopyLink?: () => void
+  /** Adds "Report a problem" to the More menu, with these reasons. */
+  reportReasons?: { value: string; label: string }[]
+  /** Who reads reports and what happens next. */
+  reportDescription?: string
+  onReport?: (report: AnswerReport) => void
+}
+
+/**
+ * AnswerActions - the action row under an AI answer: copy, rate, regenerate
+ * with version history, and report. Rating opens a short reasons form;
+ * sent feedback can be undone.
+ *
+ * @example
+ *   <AnswerActions text={answer} negativeReasons={["Wrong price"]} positiveReasons={["Clear"]} onFeedback={log} />
+ */
+export const AnswerActions = React.forwardRef<HTMLDivElement, AnswerActionsProps>(
+  (
+    {
+      text, negativeReasons, positiveReasons, onFeedback, onUndo, version = 0, versionCount = 1, onVersionChange,
+      onRegenerate, regenerating, regenerateDisabled, onCopyLink, reportReasons = [],
+      reportDescription = "Tell us what's wrong with this answer.", onReport, className, ...props
+    },
+    ref,
+  ) => {
+    const [rating, setRating] = React.useState<MessageRating | null>(null)
+    const [formOpen, setFormOpen] = React.useState(false)
+    const [sent, setSent] = React.useState<AnswerFeedback | null>(null)
+    const [reportOpen, setReportOpen] = React.useState(false)
+    const canReport = reportReasons.length > 0
+
+    function rate(next: MessageRating) {
+      if (rating === next) {
+        setRating(null)
+        setFormOpen(false)
+        setSent(null)
+        return
+      }
+      setRating(next)
+      setSent(null)
+      setFormOpen(true)
+    }
+
+    function undo() {
+      setRating(null)
+      setSent(null)
+      setFormOpen(false)
+      onUndo?.()
+    }
+
+    return (
+      <div ref={ref} data-slot="answer-actions" className={cn("ax:flex ax:flex-col ax:gap-sm", className)} {...props}>
+        <MessageActions
+          role="toolbar"
+          aria-label="Answer actions"
+          className="ax:gap-2xs"
+          copyText={text}
+          rating={rating}
+          onRate={rate}
+          onRegenerate={onRegenerate}
+          regenerating={regenerating}
+          regenerateDisabled={regenerateDisabled}
+        >
+          {versionCount > 1 && onVersionChange && (
+            <div className="ax:flex ax:items-center" role="group" aria-label="Response versions">
+              <Button variant="ghost" size="icon-sm" className="ax:rounded-full" aria-label="Previous version" disabled={version === 0} onClick={() => onVersionChange(version - 1)}>
+                <ChevronLeft />
+              </Button>
+              <Text size="1" color="muted" className="ax:tabular-nums" aria-live="polite">{version + 1} of {versionCount}</Text>
+              <Button variant="ghost" size="icon-sm" className="ax:rounded-full" aria-label="Next version" disabled={version === versionCount - 1} onClick={() => onVersionChange(version + 1)}>
+                <ChevronRight />
+              </Button>
+            </div>
+          )}
+          {(onCopyLink || canReport) && (
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="ghost" size="icon-sm" className="ax:rounded-full ax:text-muted-foreground ax:hover:text-foreground" aria-label="More actions">
+                  <MoreHorizontal />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="start">
+                {onCopyLink && <DropdownMenuItem onSelect={onCopyLink}><Link2 />Copy link</DropdownMenuItem>}
+                {canReport && <DropdownMenuItem variant="destructive" onSelect={() => setReportOpen(true)}><Flag />Report a problem</DropdownMenuItem>}
+              </DropdownMenuContent>
+            </DropdownMenu>
+          )}
+        </MessageActions>
+
+        {formOpen && rating && !sent && (
+          <FeedbackForm
+            key={rating}
+            rating={rating}
+            reasons={rating === "down" ? negativeReasons : positiveReasons}
+            onSubmit={(feedback) => {
+              setSent(feedback)
+              setFormOpen(false)
+              onFeedback?.(feedback)
+            }}
+            onCancel={() => {
+              setFormOpen(false)
+              if (rating === "down") setRating(null)
+            }}
+          />
+        )}
+
+        <Text as="p" size="1" color="muted" aria-live="polite" className="ax:flex ax:flex-wrap ax:items-center ax:gap-x-xs">
+          {sent && (
+            <>
+              Thanks, this helps improve answers.
+              <TextLink asChild size="1"><button type="button" onClick={undo}>Undo</button></TextLink>
+            </>
+          )}
+          {!sent && rating === "up" && !formOpen && "Thanks for the feedback."}
+        </Text>
+
+        {canReport && (
+          <ReportDialog
+            open={reportOpen}
+            onOpenChange={setReportOpen}
+            reasons={reportReasons}
+            description={reportDescription}
+            onReport={onReport}
+          />
+        )}
+      </div>
+    )
+  },
+)
+AnswerActions.displayName = "AnswerActions"

package/src/components/aspect-ratio.stories.tsx

@@ -0,0 +1,32 @@
+import React from "react"
+import type { Meta, StoryObj } from "@storybook/react"
+import { AspectRatio } from "./aspect-ratio"
+
+const meta: Meta<typeof AspectRatio> = {
+  title: "Components/AspectRatio",
+  component: AspectRatio,
+  tags: ["autodocs"],
+}
+
+export default meta
+type Story = StoryObj<typeof AspectRatio>
+
+export const Default: Story = {
+  render: () => (
+    <div className="ax:w-[320px]">
+      <AspectRatio ratio={16 / 9} className="ax:bg-muted ax:rounded-md ax:overflow-hidden">
+        <div className="ax:flex ax:h-full ax:w-full ax:items-center ax:justify-center ax:text-muted-foreground">16:9</div>
+      </AspectRatio>
+    </div>
+  ),
+}
+
+export const Square: Story = {
+  render: () => (
+    <div className="ax:w-[200px]">
+      <AspectRatio ratio={1} className="ax:bg-muted ax:rounded-md ax:overflow-hidden">
+        <div className="ax:flex ax:h-full ax:w-full ax:items-center ax:justify-center ax:text-muted-foreground">1:1</div>
+      </AspectRatio>
+    </div>
+  ),
+}

package/src/components/aspect-ratio.tsx

@@ -0,0 +1,5 @@
+"use client"
+
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
+
+export const AspectRatio = AspectRatioPrimitive.Root

package/src/components/avatar.stories.tsx

@@ -0,0 +1,40 @@
+import React from "react"
+import type { Meta, StoryObj } from "@storybook/react"
+import { Avatar, AvatarFallback, AvatarImage, AvatarStack } from "./avatar"
+
+const meta: Meta<typeof Avatar> = {
+  title: "Components/Avatar",
+  component: Avatar,
+  tags: ["autodocs"],
+}
+
+export default meta
+type Story = StoryObj<typeof Avatar>
+
+export const Default: Story = {
+  render: () => (
+    <Avatar>
+      <AvatarImage src="https://api.dicebear.com/7.x/avataaars/svg?seed=Adres" alt="User" />
+      <AvatarFallback>JD</AvatarFallback>
+    </Avatar>
+  ),
+}
+
+export const Fallback: Story = {
+  render: () => (
+    <Avatar>
+      <AvatarFallback>AB</AvatarFallback>
+    </Avatar>
+  ),
+}
+
+export const Stack: Story = {
+  render: () => (
+    <AvatarStack max={3}>
+      <Avatar><AvatarFallback>A</AvatarFallback></Avatar>
+      <Avatar><AvatarFallback>B</AvatarFallback></Avatar>
+      <Avatar><AvatarFallback>C</AvatarFallback></Avatar>
+      <Avatar><AvatarFallback>D</AvatarFallback></Avatar>
+    </AvatarStack>
+  ),
+}

package/src/components/avatar.tsx

@@ -0,0 +1,154 @@
+"use client"
+
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "../lib/cn"
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+export type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+
+const avatarVariants = cva(
+  "ax:relative ax:flex ax:shrink-0 ax:overflow-hidden ax:rounded-full",
+  {
+    variants: {
+      size: {
+        xs:  "ax:size-6 ax:text-[10px]",
+        sm:  "ax:size-8 ax:text-xs",
+        md:  "ax:size-10 ax:text-sm",
+        lg:  "ax:size-12 ax:text-base",
+        xl:  "ax:size-16 ax:text-lg",
+        "2xl": "ax:size-20 ax:text-xl",
+      },
+    },
+    defaultVariants: { size: "md" },
+  }
+)
+
+// ─── Context (used by AvatarStack to propagate size to children) ──────────────
+
+const AvatarStackContext = React.createContext<{ size?: AvatarSize }>({ size: undefined })
+
+// ─── Avatar ──────────────────────────────────────────────────────────────────
+
+export interface AvatarProps
+  extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>,
+    VariantProps<typeof avatarVariants> {}
+
+export const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  AvatarProps
+>(({ className, size: sizeProp, ...props }, ref) => {
+  const { size: ctxSize } = React.useContext(AvatarStackContext)
+  const size = sizeProp ?? ctxSize
+  return (
+    <AvatarPrimitive.Root
+      ref={ref}
+      data-slot="avatar"
+      className={cn(avatarVariants({ size }), className)}
+      {...props}
+    />
+  )
+})
+Avatar.displayName = AvatarPrimitive.Root.displayName
+
+// ─── AvatarImage ─────────────────────────────────────────────────────────────
+
+export type AvatarImageProps = React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+
+export const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  AvatarImageProps
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn("ax:aspect-square ax:h-full ax:w-full ax:object-cover", className)}
+    {...props}
+  />
+))
+AvatarImage.displayName = AvatarPrimitive.Image.displayName
+
+// ─── AvatarFallback ──────────────────────────────────────────────────────────
+
+export type AvatarFallbackProps = React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+
+export const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  AvatarFallbackProps
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      "ax:flex ax:h-full ax:w-full ax:items-center ax:justify-center ax:rounded-full",
+      "ax:bg-muted ax:text-muted-foreground ax:font-medium",
+      className
+    )}
+    {...props}
+  />
+))
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
+
+// ─── AvatarStack ─────────────────────────────────────────────────────────────
+//
+// Overlapping horizontal group of avatars (collaborators, attendees, contacts).
+// Children must be <Avatar> elements; each one picks up:
+//   • the stack's `size` via context (so consumers don't have to set it
+//     individually on every child),
+//   • a background-coloured ring via the `*:` direct-children selector, gives
+//     the classic "white-ring between overlapping circles" effect on any
+//     surface, since the ring uses `--background`.
+//
+// When `max` is provided and the visible count exceeds it, the last position
+// is replaced by a "+N" fallback chip. Without `max`, every child renders.
+
+const STACK_OVERLAP: Record<AvatarSize, string> = {
+  xs:   "ax:-space-x-1",
+  sm:   "ax:-space-x-2",
+  md:   "ax:-space-x-2",
+  lg:   "ax:-space-x-3",
+  xl:   "ax:-space-x-4",
+  "2xl": "ax:-space-x-5",
+}
+
+export interface AvatarStackProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Size applied to every Avatar child via context. Individual children can
+   *  still override with their own `size` prop. */
+  size?: AvatarSize
+  /** Maximum number of children to render before collapsing the remainder into
+   *  a `+N` fallback chip. When omitted, every child is shown. */
+  max?: number
+}
+
+export const AvatarStack = React.forwardRef<HTMLDivElement, AvatarStackProps>(
+  ({ className, size = "md", max, children, ...props }, ref) => {
+    const childArray   = React.Children.toArray(children)
+    const total        = childArray.length
+    const shouldOverflow = max != null && total > max
+    const visibleCount = shouldOverflow ? max - 1 : total
+    const overflowCount = total - visibleCount
+
+    return (
+      <AvatarStackContext.Provider value={{ size }}>
+        <div
+          ref={ref}
+          role="group"
+          className={cn(
+            "ax:flex *:ring-2 *:ring-background *:rounded-full",
+            STACK_OVERLAP[size],
+            className
+          )}
+          {...props}
+        >
+          {childArray.slice(0, visibleCount)}
+          {shouldOverflow && (
+            <Avatar aria-label={`${overflowCount} more`}>
+              <AvatarFallback>+{overflowCount}</AvatarFallback>
+            </Avatar>
+          )}
+        </div>
+      </AvatarStackContext.Provider>
+    )
+  }
+)
+AvatarStack.displayName = "AvatarStack"

package/src/components/badge.stories.tsx

@@ -0,0 +1,27 @@
+import React from "react"
+import type { Meta, StoryObj } from "@storybook/react"
+import { Badge } from "./badge"
+
+const meta: Meta<typeof Badge> = {
+  title: "Components/Badge",
+  component: Badge,
+  tags: ["autodocs"],
+  args: {
+    children: "Badge",
+    variant: "default",
+    size: "base",
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Badge>
+
+export const Default: Story = {}
+
+export const Secondary: Story = {
+  args: { variant: "secondary", children: "Secondary" },
+}
+
+export const Success: Story = {
+  args: { variant: "success", children: "Active" },
+}

package/src/components/badge.tsx

@@ -0,0 +1,63 @@
+"use client"
+
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "../lib/cn"
+
+export const badgeVariants = cva(
+  [
+    "ax:inline-flex ax:items-center ax:justify-center ax:gap-1 ax:rounded-[var(--radius-badge)] ax:whitespace-nowrap",
+    // Reserved 1px transparent border on every variant so the `outline`
+    // variant's visible border doesn't make it 2px taller than the others.
+    "ax:border ax:border-transparent",
+    "ax:transition-colors",
+    "ax:focus-visible:outline-none ax:focus-visible:ring-2 ax:focus-visible:ring-ring ax:focus-visible:ring-offset-2",
+  ],
+  {
+    variants: {
+      variant: {
+        // Soft filled chips using the `weakest` emphasis alias: a pale tint in light
+        // mode that auto-inverts to a deep tint in dark, so `-foreground` reads
+        // correctly on it in both modes, no dark: override. `muted`/`outline`
+        // already use mode-aware semantic tokens.
+        default:     "ax:bg-primary-weakest ax:text-primary-foreground ax:dark:bg-primary-strong ax:dark:text-primary-weaker",
+        secondary:   "ax:bg-secondary-weaker ax:text-secondary-foreground ax:dark:bg-secondary-strong ax:dark:text-secondary-muted",
+        outline:     "ax:border-border ax:text-stronger",
+        muted:       "ax:bg-neutral-weakest ax:text-neutral-foreground",
+        success:     "ax:bg-success-weakest ax:text-success-foreground ax:dark:bg-success-weak ax:dark:text-success-muted",
+        warning:     "ax:bg-warning-weakest ax:text-warning-foreground ax:dark:bg-warning-weak ax:dark:text-warning-muted",
+        destructive: "ax:bg-destructive-weakest ax:text-destructive-foreground ax:dark:bg-destructive ax:dark:text-destructive-muted",
+        accent:      "ax:bg-accent-weakest ax:text-accent-foreground ax:dark:bg-accent ax:dark:text-accent-muted",
+      },
+      // `min-w-*` equals each size's box height (line-height + padding + border)
+      // so single-character content renders as a full circle under the pill
+      // radius; multi-character content expands past it into a stadium.
+      size: {
+        sm:   "ax:px-xs ax:py-[3px] ax:t-label-xs ax:min-w-5",   /* h 20px */
+        base: "ax:px-xs ax:py-[4px] ax:t-label-xs ax:min-w-6",    /* h 24px */
+        lg:   "ax:px-sm ax:py-[5px] ax:t-label-sm ax:min-w-6.5",  /* h 26px */
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size:    "base",
+    },
+  }
+)
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLSpanElement>,
+    VariantProps<typeof badgeVariants> {}
+
+export const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(
+  ({ className, variant, size, ...props }, ref) => (
+    <span
+      ref={ref}
+      data-slot="badge"
+      data-variant={variant ?? "default"}
+      className={cn(badgeVariants({ variant, size }), className)}
+      {...props}
+    />
+  )
+)
+Badge.displayName = "Badge"

package/src/components/bar-graph.stories.tsx

@@ -0,0 +1,28 @@
+import React from "react"
+import type { Meta, StoryObj } from "@storybook/react"
+import { BarGraph } from "./bar-graph"
+
+const sampleBars = [
+  { label: "Compliant", value: 72, color: "ax:bg-success" },
+  { label: "Pending", value: 18, color: "ax:bg-warning" },
+  { label: "Overdue", value: 10, color: "ax:bg-destructive" },
+]
+
+const meta: Meta<typeof BarGraph> = {
+  title: "Components/BarGraph",
+  component: BarGraph,
+  tags: ["autodocs"],
+  args: {
+    bars: sampleBars,
+    size: "md",
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof BarGraph>
+
+export const Default: Story = {}
+
+export const Vertical: Story = {
+  args: { direction: "vertical" },
+}