@adres/mgda-ui 0.0.0-stage → 0.0.1

package/src/components/dropdown-menu.tsx

@@ -0,0 +1,252 @@
+"use client"
+
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { Check, ChevronRight, Circle } from "lucide-react"
+import { cn } from "../lib/cn"
+
+// ─── Primitives (pass-through) ────────────────────────────────────────────────
+
+export const DropdownMenu           = DropdownMenuPrimitive.Root
+export const DropdownMenuTrigger    = DropdownMenuPrimitive.Trigger
+export const DropdownMenuGroup      = DropdownMenuPrimitive.Group
+export const DropdownMenuPortal     = DropdownMenuPrimitive.Portal
+export const DropdownMenuSub        = DropdownMenuPrimitive.Sub
+export const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+
+// ─── Shared row-state classes ─────────────────────────────────────────────────
+//
+// Radix exposes BOTH `:focus` (DOM focus) AND `data-highlighted` (keyboard nav
+// highlight) for the active item. Listening for both ensures the highlight
+// renders correctly regardless of whether the user is mousing or tabbing.
+
+const ROW_BASE_DEFAULT =
+  "ax:text-foreground " +
+  "ax:focus:bg-muted ax:focus:text-foreground " +
+  "ax:data-[highlighted]:bg-muted ax:data-[highlighted]:text-foreground"
+
+const ROW_BASE_DESTRUCTIVE =
+  "ax:text-destructive-strong " +
+  "ax:focus:bg-destructive/10 ax:focus:text-destructive-strong " +
+  "ax:data-[highlighted]:bg-destructive/10 ax:data-[highlighted]:text-destructive-strong " +
+  "ax:[&_svg]:text-destructive-strong"
+
+// ─── Content ──────────────────────────────────────────────────────────────────
+
+export interface DropdownMenuContentProps
+  extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> {}
+
+export const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  DropdownMenuContentProps
+>(({ className, sideOffset = 6, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        // Layered above Dialog/Drawer (z-[1100]/z-[1101]) so menus opened from
+        // within a drawer's footer (e.g. a mobile nav account card) stay visible.
+        "ax:z-1200 ax:min-w-[10rem] ax:overflow-hidden ax:rounded-(--input-radius) ax:border ax:border-border ax:bg-popover ax:p-2xs",
+        "ax:text-popover-foreground ax:shadow-md",
+        "ax:data-[state=open]:animate-in ax:data-[state=closed]:animate-out",
+        "ax:data-[state=closed]:fade-out-0 ax:data-[state=open]:fade-in-0",
+        "ax:data-[state=closed]:zoom-out-[0.96] ax:data-[state=open]:zoom-in-[0.96]",
+        "ax:data-[side=bottom]:slide-in-from-top-1",
+        "ax:data-[side=left]:slide-in-from-right-1",
+        "ax:data-[side=right]:slide-in-from-left-1",
+        "ax:data-[side=top]:slide-in-from-bottom-1",
+        "ax:[animation-duration:var(--motion-fast)] ax:[animation-timing-function:var(--motion-ease-out)]",
+        "ax:motion-reduce:animate-none",
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+))
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+
+// ─── Item ─────────────────────────────────────────────────────────────────────
+
+export interface DropdownMenuItemProps
+  extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> {
+  /** Indents the item to align with siblings that have a checkbox/radio indicator column. */
+  inset?: boolean
+  /** Colour treatment. `destructive` tints text + icon + hover/highlight background. */
+  variant?: "default" | "destructive"
+}
+
+export const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  DropdownMenuItemProps
+>(({ className, inset, variant = "default", ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "ax:relative ax:flex ax:cursor-pointer ax:select-none ax:items-center ax:gap-xs ax:rounded-(--input-radius) ax:px-xs ax:py-1.5",
+      "ax:t-body-sm ax:outline-none ax:transition-colors",
+      "ax:data-[disabled]:pointer-events-none ax:data-[disabled]:opacity-50",
+      "ax:[&_svg]:size-4 ax:[&_svg]:shrink-0 ax:[&_svg]:text-muted-foreground",
+      variant === "destructive" ? ROW_BASE_DESTRUCTIVE : ROW_BASE_DEFAULT,
+      inset && "ax:pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+
+// ─── CheckboxItem ─────────────────────────────────────────────────────────────
+
+export const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "ax:relative ax:flex ax:cursor-pointer ax:select-none ax:items-center ax:rounded-(--input-radius) ax:py-1.5 ax:pl-8 ax:pr-xs",
+      "ax:t-body-sm ax:outline-none ax:transition-colors",
+      "ax:data-[disabled]:pointer-events-none ax:data-[disabled]:opacity-50",
+      ROW_BASE_DEFAULT,
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="ax:absolute ax:left-2 ax:flex ax:size-3.5 ax:items-center ax:justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Check className="ax:size-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+))
+DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName
+
+// ─── RadioItem ────────────────────────────────────────────────────────────────
+
+export const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "ax:relative ax:flex ax:cursor-pointer ax:select-none ax:items-center ax:rounded-(--input-radius) ax:py-1.5 ax:pl-8 ax:pr-xs",
+      "ax:t-body-sm ax:outline-none ax:transition-colors",
+      "ax:data-[disabled]:pointer-events-none ax:data-[disabled]:opacity-50",
+      ROW_BASE_DEFAULT,
+      className
+    )}
+    {...props}
+  >
+    <span className="ax:absolute ax:left-2 ax:flex ax:size-3.5 ax:items-center ax:justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Circle className="ax:size-2 ax:fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+))
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+
+// ─── Label ────────────────────────────────────────────────────────────────────
+
+export const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & { inset?: boolean }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "ax:px-xs ax:py-1.5 ax:t-overline ax:text-muted-foreground",
+      inset && "ax:pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+
+// ─── Separator ────────────────────────────────────────────────────────────────
+
+export const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn("ax:-mx-2xs ax:my-2xs ax:h-px ax:bg-border", className)}
+    {...props}
+  />
+))
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+
+// ─── SubTrigger / SubContent ─────────────────────────────────────────────────
+
+export const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & { inset?: boolean }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "ax:flex ax:cursor-pointer ax:select-none ax:items-center ax:gap-xs ax:rounded-(--input-radius) ax:px-xs ax:py-1.5",
+      "ax:t-body-sm ax:text-foreground ax:outline-none ax:transition-colors",
+      "ax:focus:bg-muted ax:data-[highlighted]:bg-muted ax:data-[state=open]:bg-muted",
+      "ax:[&_svg]:size-4 ax:[&_svg]:shrink-0 ax:[&_svg]:text-muted-foreground",
+      inset && "ax:pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ax:ml-auto ax:size-4" />
+  </DropdownMenuPrimitive.SubTrigger>
+))
+DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName
+
+export const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      // See DropdownMenuContent, layered above Dialog/Drawer.
+      "ax:z-1200 ax:min-w-[10rem] ax:overflow-hidden ax:rounded-(--input-radius) ax:border ax:border-border ax:bg-popover ax:p-2xs",
+      "ax:text-popover-foreground ax:shadow-lg",
+      "ax:data-[state=open]:animate-in ax:data-[state=closed]:animate-out",
+      "ax:data-[state=closed]:fade-out-0 ax:data-[state=open]:fade-in-0",
+      "ax:data-[state=closed]:zoom-out-[0.96] ax:data-[state=open]:zoom-in-[0.96]",
+      // Side-aware slide-ins so sub-menus opening left vs right feel directional
+      // (mirrors the Content animation set above).
+      "ax:data-[side=bottom]:slide-in-from-top-1",
+      "ax:data-[side=left]:slide-in-from-right-1",
+      "ax:data-[side=right]:slide-in-from-left-1",
+      "ax:data-[side=top]:slide-in-from-bottom-1",
+      "ax:[animation-duration:var(--motion-fast)] ax:[animation-timing-function:var(--motion-ease-out)]",
+      "ax:motion-reduce:animate-none",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName
+
+// ─── Shortcut ─────────────────────────────────────────────────────────────────
+//
+// Right-aligned keyboard-shortcut hint for use inside DropdownMenuItem etc.
+// Visually-only. Wire the actual shortcut keys via a global handler elsewhere.
+
+export const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => (
+  <span
+    className={cn(
+      "ax:ml-auto ax:pl-md ax:t-caption ax:text-muted-foreground ax:tracking-wider",
+      className
+    )}
+    {...props}
+  />
+)
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut"

package/src/components/dropzone.stories.tsx

@@ -0,0 +1,19 @@
+import React from "react"
+import type { Meta, StoryObj } from "@storybook/react"
+import { Dropzone } from "./dropzone"
+
+const meta: Meta<typeof Dropzone> = {
+  title: "Components/Dropzone",
+  component: Dropzone,
+  tags: ["autodocs"],
+  args: {
+    onFile: () => {},
+    accept: ".csv",
+    prompt: "Drop a CSV file here, or browse",
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Dropzone>
+
+export const Default: Story = {}

package/src/components/dropzone.tsx

@@ -0,0 +1,250 @@
+"use client"
+
+import * as React from "react"
+import { FileText, UploadCloud } from "lucide-react"
+import { Button } from "./button"
+import { Spinner } from "./spinner"
+import { cn } from "../lib/cn"
+
+export type DropzoneErrorReason = "invalid-type" | "too-large"
+
+export interface DropzoneError {
+  reason:  DropzoneErrorReason
+  file:    File
+  message: string
+}
+
+// `onError` is our domain callback (file-rejection event); the HTMLAttributes
+// `onError` (image-style ReactEventHandler) is omitted to keep the type clean.
+export interface DropzoneProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onError"> {
+  /** Called when a file is dropped or selected via the file picker AND
+   *  passes type / size validation. */
+  onFile: (file: File) => void
+  /** Called when a dropped or picked file fails validation (wrong type,
+   *  exceeds `maxSize`). The file is NOT forwarded to `onFile`. */
+  onError?: (error: DropzoneError) => void
+  /** Currently-selected file. When set, the dropzone collapses to a
+   *  selected-file row with a "Replace" button. */
+  file?: File | null
+  /** While true, the dropzone shows a spinner + "Processing…" instead of
+   *  the upload affordances. Drive this from the parent's upload state. */
+  processing?: boolean
+  /** Disables the drop target and Browse button. */
+  disabled?: boolean
+  /** Accept attribute passed through to the underlying `<input>` (e.g.
+   *  `".csv"`, `"image/*"`). Also enforced on drag-and-drop - browsers
+   *  don't natively validate `accept` for drops. */
+  accept?: string
+  /** Maximum file size in bytes. Files exceeding this trigger `onError`
+   *  rather than `onFile`. */
+  maxSize?: number
+  /** Localizable prompt text. Defaults to a CSV-flavored prompt. */
+  prompt?: string
+  /** Optional helper link rendered under the Browse button. */
+  templateHref?: string
+  templateLabel?: string
+}
+
+/** File dropzone with three states: empty (drag-or-browse prompt), selected
+ *  (file row + replace), and processing (spinner). The component is fully
+ *  controlled: the parent owns the file + processing state and decides
+ *  what to do when `onFile` fires. */
+
+// Matches a file against an accept attribute string. Returns true if the
+// file's extension or MIME type satisfies any of the comma-separated entries.
+function fileMatchesAccept(file: File, accept: string): boolean {
+  if (!accept) return true
+  const lowerName = file.name.toLowerCase()
+  const lowerType = file.type.toLowerCase()
+  return accept
+    .split(",")
+    .map((s) => s.trim().toLowerCase())
+    .filter(Boolean)
+    .some((entry) => {
+      if (entry.startsWith(".")) return lowerName.endsWith(entry)
+      if (entry.endsWith("/*"))   return lowerType.startsWith(entry.slice(0, -1))
+      return lowerType === entry
+    })
+}
+
+function formatBytes(n: number): string {
+  if (n < 1024) return `${n} B`
+  if (n < 1024 * 1024) return `${(n / 1024).toFixed(1)} KB`
+  return `${(n / (1024 * 1024)).toFixed(1)} MB`
+}
+
+export const Dropzone = React.forwardRef<HTMLDivElement, DropzoneProps>(
+  (
+    {
+      onFile,
+      onError,
+      file,
+      processing,
+      disabled = false,
+      accept = ".csv",
+      maxSize,
+      prompt = "Drag & drop your CSV file here",
+      templateHref,
+      templateLabel = "Download Template",
+      className,
+      ...props
+    },
+    ref,
+  ) => {
+    const inputRef = React.useRef<HTMLInputElement>(null)
+    // Counter (not boolean) so flicker over child elements (icon, text)
+    // doesn't toggle the highlight on/off as drag enters/leaves descendants.
+    const dragCount = React.useRef(0)
+    const [dragging, setDragging] = React.useState(false)
+
+    function validateAndForward(candidate: File) {
+      if (!fileMatchesAccept(candidate, accept)) {
+        onError?.({
+          reason: "invalid-type",
+          file: candidate,
+          message: `File type not allowed (expected ${accept}).`,
+        })
+        return
+      }
+      if (maxSize !== undefined && candidate.size > maxSize) {
+        onError?.({
+          reason: "too-large",
+          file: candidate,
+          message: `File exceeds the ${formatBytes(maxSize)} limit.`,
+        })
+        return
+      }
+      onFile(candidate)
+    }
+
+    function handleDragEnter(e: React.DragEvent<HTMLDivElement>) {
+      if (disabled) return
+      e.preventDefault()
+      dragCount.current++
+      setDragging(true)
+    }
+
+    function handleDragLeave(e: React.DragEvent<HTMLDivElement>) {
+      if (disabled) return
+      e.preventDefault()
+      dragCount.current = Math.max(0, dragCount.current - 1)
+      if (dragCount.current === 0) setDragging(false)
+    }
+
+    function handleDrop(e: React.DragEvent<HTMLDivElement>) {
+      if (disabled) return
+      e.preventDefault()
+      dragCount.current = 0
+      setDragging(false)
+      const dropped = e.dataTransfer.files[0]
+      if (dropped) validateAndForward(dropped)
+    }
+
+    function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
+      const selected = e.target.files?.[0]
+      if (selected) validateAndForward(selected)
+      // Reset so picking the same file twice still fires onChange.
+      e.target.value = ""
+    }
+
+    if (processing) {
+      return (
+        <div
+          ref={ref}
+          className={cn("ax:flex ax:flex-col ax:items-center ax:gap-md ax:py-2xl", className)}
+          {...props}
+        >
+          <Spinner />
+          <p className="ax:t-body-sm ax:text-muted-foreground">Processing…</p>
+        </div>
+      )
+    }
+
+    if (file) {
+      return (
+        <div
+          ref={ref}
+          className={cn(
+            "ax:flex ax:items-center ax:gap-sm ax:p-md ax:rounded-md ax:border ax:border-border ax:bg-muted/30",
+            disabled && "ax:opacity-60 ax:cursor-not-allowed",
+            className,
+          )}
+          {...props}
+        >
+          <FileText className="ax:size-5 ax:text-primary ax:shrink-0" />
+          <div className="ax:flex-1 ax:min-w-0">
+            <p className="ax:t-label-sm ax:text-foreground ax:truncate">{file.name}</p>
+            <p className="ax:t-caption ax:text-muted-foreground">{formatBytes(file.size)}</p>
+          </div>
+          <Button
+            variant="ghost"
+            size="sm"
+            disabled={disabled}
+            onClick={() => inputRef.current?.click()}
+          >
+            Replace
+          </Button>
+          <input
+            ref={inputRef}
+            type="file"
+            accept={accept}
+            disabled={disabled}
+            className="ax:hidden"
+            onChange={handleChange}
+          />
+        </div>
+      )
+    }
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "ax:flex ax:flex-col ax:items-center ax:gap-md ax:py-2xl ax:px-xl",
+          "ax:border-2 ax:border-dashed ax:rounded-md ax:border-border",
+          "ax:transition-colors",
+          dragging && !disabled && "ax:border-primary ax:bg-primary/5",
+          disabled && "ax:opacity-60 ax:cursor-not-allowed ax:bg-muted/30",
+          className,
+        )}
+        onDragOver={(e) => { if (!disabled) e.preventDefault() }}
+        onDragEnter={handleDragEnter}
+        onDragLeave={handleDragLeave}
+        onDrop={handleDrop}
+        {...props}
+      >
+        <UploadCloud className="ax:size-3xl ax:text-muted-foreground" />
+        <div className="ax:text-center">
+          <p className="ax:t-body-sm ax:text-foreground ax:font-medium">{prompt}</p>
+          <p className="ax:t-caption ax:text-muted-foreground ax:mt-1">or</p>
+        </div>
+
+        <div className="ax:flex ax:flex-col ax:items-center ax:gap-xs">
+          <Button
+            variant="outline"
+            size="sm"
+            disabled={disabled}
+            onClick={() => inputRef.current?.click()}
+          >
+            Browse File
+          </Button>
+          {templateHref && (
+            <a href={templateHref} className="ax:t-caption ax:text-primary ax:hover:underline ax:focus-visible:underline">
+              {templateLabel}
+            </a>
+          )}
+        </div>
+
+        <input
+          ref={inputRef}
+          type="file"
+          accept={accept}
+          disabled={disabled}
+          className="ax:hidden"
+          onChange={handleChange}
+        />
+      </div>
+    )
+  },
+)
+Dropzone.displayName = "Dropzone"

package/src/components/email-chips-input.stories.tsx

@@ -0,0 +1,135 @@
+import React from "react"
+import type { Meta, StoryObj } from "@storybook/react"
+import {
+  EmailChipsInput,
+  type EmailChip,
+  type EmailChipsInputProps,
+} from "./email-chips-input"
+
+const meta: Meta<typeof EmailChipsInput> = {
+  title: "Components/EmailChipsInput",
+  component: EmailChipsInput,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "Multi-email input that turns each accepted entry into a chip. Adds on Enter or `,`. Backspace on an empty input removes the last chip. Pasting a `, ; \\n \\t`-separated list adds each address as a chip.\n\nValidation is local (regex-based) and non-blocking: invalid chips render in a destructive tint with a tooltip explaining why. Consumers filter `chip.valid` before submitting.",
+      },
+    },
+  },
+  argTypes: {
+    chips: { control: false },
+    onChange: { control: false },
+    onDuplicate: { control: false },
+  },
+  args: {
+    placeholder: "Add email addresses…",
+    variant: "default",
+    disabled: false,
+    invalid: false,
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof EmailChipsInput>
+
+function EmailChipsInputDemo({
+  initialChips = [],
+  ...props
+}: Omit<EmailChipsInputProps, "chips" | "onChange"> & {
+  initialChips?: EmailChip[]
+}) {
+  const [chips, setChips] = React.useState<EmailChip[]>(initialChips)
+  const validCount = chips.filter((c) => c.valid).length
+
+  return (
+    <div className="ax:w-full ax:min-w-[20rem] ax:max-w-md ax:space-y-2">
+      <EmailChipsInput chips={chips} onChange={setChips} {...props} />
+      <p className="ax:t-caption ax:text-muted-foreground">
+        {validCount} valid · {chips.length - validCount} invalid · press Enter or comma to add
+      </p>
+    </div>
+  )
+}
+
+export const Default: Story = {
+  render: (args) => <EmailChipsInputDemo {...args} />,
+}
+
+export const WithValues: Story = {
+  render: (args) => (
+    <EmailChipsInputDemo
+      {...args}
+      initialChips={[
+        { value: "alex@example.com", valid: true },
+        { value: "sam@example.com", valid: true },
+      ]}
+    />
+  ),
+}
+
+export const WithInvalid: Story = {
+  render: (args) => (
+    <EmailChipsInputDemo
+      {...args}
+      initialChips={[
+        { value: "yara@adres.ae", valid: true },
+        { value: "not-an-email", valid: false },
+      ]}
+    />
+  ),
+}
+
+export const Primary: Story = {
+  render: (args) => (
+    <EmailChipsInputDemo
+      {...args}
+      variant="primary"
+      initialChips={[
+        { value: "yara@adres.ae", valid: true },
+        { value: "ali@adres.ae", valid: true },
+      ]}
+    />
+  ),
+}
+
+export const Destructive: Story = {
+  render: (args) => (
+    <EmailChipsInputDemo
+      {...args}
+      variant="destructive"
+      initialChips={[
+        { value: "revoke@example.com", valid: true },
+        { value: "bad-address", valid: false },
+      ]}
+    />
+  ),
+}
+
+export const Invalid: Story = {
+  render: (args) => (
+    <EmailChipsInputDemo
+      {...args}
+      invalid
+      initialChips={[
+        { value: "yara@adres.ae", valid: true },
+        { value: "not-an-email", valid: false },
+      ]}
+    />
+  ),
+}
+
+export const Disabled: Story = {
+  render: (args) => (
+    <EmailChipsInputDemo
+      {...args}
+      disabled
+      initialChips={[
+        { value: "yara@adres.ae", valid: true },
+        { value: "ali@adres.ae", valid: true },
+      ]}
+    />
+  ),
+}