// components/ui/button.tsx
const buttonVariants = cva(
  [
    "relative isolate inline-flex shrink-0 items-center justify-center gap-2 overflow-hidden border border-transparent font-medium whitespace-nowrap select-none",
    "transition-[translate,background-color,border-color,color,text-decoration-color] duration-(--duration-fast) ease-standard",
    "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring",
    "disabled:pointer-events-none disabled:opacity-40",
  ],
  {
    variants: {
      variant: {
        default: [
          "bg-primary text-primary-foreground hover:bg-blue-600 active:bg-blue-700 hover:-translate-y-px active:translate-y-0 motion-reduce:hover:translate-y-0",
          "before:absolute before:inset-y-0 before:left-0 before:-z-10 before:w-1/3 before:-translate-x-[150%] before:-skew-x-12 before:bg-white/20",
          "hover:before:translate-x-[320%] hover:before:transition-transform hover:before:duration-(--duration-scene) hover:before:ease-emphasized motion-reduce:before:hidden",
        ],
        secondary: "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklab,var(--secondary),var(--foreground)_8%)] hover:-translate-y-px active:translate-y-0 motion-reduce:hover:translate-y-0",
        outline: "border-strong bg-background text-foreground hover:border-foreground hover:-translate-y-px active:translate-y-0 motion-reduce:hover:translate-y-0",
        ghost: "text-foreground hover:bg-surface active:bg-surface-2",
        link: "text-link underline decoration-transparent decoration-1 underline-offset-4 hover:decoration-current",
        destructive: "bg-destructive text-destructive-foreground hover:bg-[color-mix(in_oklab,var(--destructive),var(--foreground)_14%)] hover:-translate-y-px active:translate-y-0 motion-reduce:hover:translate-y-0",
      },
      size: {
        sm: "h-8 px-3 text-[13px] [&_svg]:size-3.5",
        default: "h-10 px-4 text-sm [&_svg]:size-4",
        lg: "h-12 px-5 text-[15px] [&_svg]:size-4.5",
        icon: "size-10 [&_svg]:size-4.5",
      },
    },
    compoundVariants: [{ variant: "link", class: "h-auto px-0" }],
    defaultVariants: { variant: "default", size: "default" },
  },
)

<Button>Deploy</Button>
<Button variant="outline" size="sm"><Icon name="download" />Download</Button>

<div className="grid gap-2">
  <label htmlFor="bucket" className="text-sm font-medium text-foreground">Bucket name</label>
  <input id="bucket" aria-invalid={invalid} aria-describedby="bucket-help" className={cn(
    "h-10 w-full min-w-0 border border-input bg-background px-3 text-sm text-foreground placeholder:text-faint",
    "transition-colors duration-(--duration-fast) ease-standard hover:border-faint",
    "focus-visible:border-ring focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring",
    "aria-invalid:border-danger aria-invalid:focus-visible:outline-danger",
    "disabled:cursor-not-allowed disabled:border-border disabled:bg-surface disabled:text-faint",
  )} />
  {invalid ? (
    <p id="bucket-help" className="flex items-center gap-2 text-[13px] leading-normal text-danger">
      <i className="size-2 shrink-0 bg-danger" />Use 3–63 lowercase letters, numbers, dots or hyphens.
    </p>
  ) : (
    <p id="bucket-help" className="text-[13px] leading-normal text-muted-foreground">3–63 characters.</p>
  )}
</div>

<div className={cn(
  "flex h-10 items-stretch border border-input bg-background transition-colors duration-(--duration-fast) ease-standard hover:border-faint",
  "focus-within:border-ring focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-ring",
)}>
  <span className="grid place-items-center border-r border-border bg-surface px-3 font-mono text-xs text-muted-foreground">https://</span>
  <input className="min-w-0 flex-1 bg-transparent px-3 font-mono text-[13px] text-foreground placeholder:text-faint focus-visible:outline-none" />
</div>

<div className="relative">
  <select className={cn(
    "h-10 w-full appearance-none border border-input bg-background pr-10 pl-3 text-sm text-foreground",
    "transition-colors duration-(--duration-fast) ease-standard hover:border-faint",
    "focus-visible:border-ring focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring",
  )}>
    <option>STANDARD</option>
    <option>REDUCED_REDUNDANCY</option>
  </select>
  <ChevronDown className="pointer-events-none absolute top-1/2 right-3 size-4 -translate-y-1/2 text-muted-foreground" />
</div>

// import { ToggleGroup } from "radix-ui"
<ToggleGroup.Root type="single" defaultValue="24h" className="inline-flex border border-strong">
  <ToggleGroup.Item value="1h" className={cn(
    "h-8 min-w-11 px-3 font-mono text-xs text-muted-foreground transition-colors duration-(--duration-fast) ease-standard not-first:border-l not-first:border-strong",
    "hover:text-foreground data-[state=on]:bg-foreground data-[state=on]:text-background",
    "focus-visible:relative focus-visible:z-10 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring",
  )}>1H</ToggleGroup.Item>
  {/* 24H · 7D · 30D */}
</ToggleGroup.Root>

<label className="inline-flex items-center gap-2.5 text-sm text-foreground has-disabled:text-faint">
  <span className="relative grid size-4 shrink-0 place-items-center">
    <input type="checkbox" className={cn(
      "peer absolute inset-0 appearance-none border border-input bg-background transition-colors duration-(--duration-instant) ease-standard",
      "hover:border-faint checked:border-primary checked:bg-primary indeterminate:border-primary indeterminate:bg-primary",
      "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:border-border disabled:bg-surface",
    )} />
    <Icon name="check" strokeWidth={2.5} className="pointer-events-none relative col-start-1 row-start-1 size-3.5 text-primary-foreground opacity-0 peer-checked:opacity-100" />
    <i className="pointer-events-none relative col-start-1 row-start-1 h-0.5 w-2 bg-primary-foreground opacity-0 peer-indeterminate:opacity-100" />
  </span>
  Enable versioning
</label>

<button role="switch" aria-checked={on} onClick={() => setOn(!on)} className={cn(
  "group inline-flex h-5 w-9 shrink-0 items-center border border-input bg-surface-2 p-0.5 transition-colors duration-(--duration-fast) ease-standard",
  "aria-checked:border-primary aria-checked:bg-primary disabled:opacity-40",
  "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring",
)}>
  <span className="size-3.5 bg-subtle transition-[translate,background-color] duration-(--duration-fast) ease-emphasized group-aria-checked:translate-x-4 group-aria-checked:bg-primary-foreground motion-reduce:transition-none" />
</button>

const MARK = {
  online: "size-2 shrink-0 bg-success",
  healing: "size-2 shrink-0 bg-brand animate-[rfs-heal_2880ms_steps(1)_infinite]",
  degraded: "size-2 shrink-0 bg-warning",
  offline: "size-2 shrink-0 bg-danger",
  parity: "size-2 shrink-0 bg-parity",
}

<span className="inline-flex h-6 items-center gap-1.5 border border-border bg-background px-2 font-mono text-[11px] leading-none font-medium tracking-[0.06em] text-foreground uppercase">
  <i className={MARK.healing} />
  Healing
</span>

<span className="inline-flex h-6 items-center bg-foreground px-2 font-mono text-[11px] leading-none font-medium tracking-[0.06em] text-background uppercase">1.0.1</span>
<span className="inline-grid h-5 min-w-5 place-items-center bg-surface-2 px-1 font-mono text-[11px] leading-none text-foreground tabular-nums">12</span>

// import { Tabs } from "radix-ui"
<Tabs.Root defaultValue="objects">
  <Tabs.List className="flex overflow-x-auto border-b border-border [scrollbar-width:none]">
    <Tabs.Trigger value="objects" className={cn(
      "relative inline-flex h-11 shrink-0 items-center gap-2 px-3.5 text-sm text-muted-foreground transition-colors duration-(--duration-fast) ease-standard hover:text-foreground",
      "after:absolute after:inset-x-0 after:-bottom-px after:h-0.5 after:bg-transparent data-[state=active]:text-foreground data-[state=active]:after:bg-brand",
      "focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring",
    )}>
      Objects <span className="inline-grid h-5 min-w-5 place-items-center bg-surface-2 px-1 font-mono text-[11px] leading-none text-foreground tabular-nums">128</span>
    </Tabs.Trigger>
    {/* Versions · Lifecycle · Replication */}
  </Tabs.List>
  <Tabs.Content value="objects" className="pt-5 text-sm leading-relaxed text-subtle focus-visible:outline-none">…</Tabs.Content>
</Tabs.Root>

const [copied, setCopied] = useState(false)

<div className="flex min-w-0 items-stretch border border-neutral-800 bg-neutral-950 text-neutral-100">
  <code className="flex min-w-0 flex-1 items-center gap-3 overflow-x-auto bg-transparent px-4 py-3 font-mono text-[13px] leading-5 whitespace-nowrap text-neutral-100 [scrollbar-width:thin]">
    <span className="text-blue-400 select-none">$</span>{command}
  </code>
  <button
    aria-label="Copy command"
    data-copied={copied}
    onClick={async () => {
      await navigator.clipboard.writeText(command)
      setCopied(true)
      toast.success("Copied")
      setTimeout(() => setCopied(false), 1600)
    }}
    className={cn(
      "grid w-11 shrink-0 place-items-center border-l border-neutral-800 text-neutral-400 transition-colors duration-(--duration-fast) ease-standard",
      "hover:bg-neutral-900 hover:text-white focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-400 data-[copied=true]:text-green-500",
    )}
  >
    <Icon name={copied ? "check" : "copy"} className="size-4" />
  </button>
</div>

<div role="note" className="grid grid-cols-[auto_1fr] gap-x-3 gap-y-1 border border-border bg-surface px-4 py-3.5 text-sm leading-relaxed">
  <i className="mt-1 size-2.5 bg-warning" aria-hidden="true" />
  <b className="font-mono text-[11px] leading-[18px] font-medium tracking-[0.08em] text-foreground uppercase">Warning</b>
  <p className="col-start-2 text-subtle">EC 4+2 tolerates at most two failed drives.</p>
</div>

// note: bg-info · tip: bg-success · warning: bg-warning · preview: bg-parity

<div className="overflow-x-auto border border-border">
  <table className="w-full min-w-[640px] border-collapse text-[13px] leading-none">
    <thead>
      <tr>
        <th className="h-9 border-b border-border bg-surface px-3 text-left font-mono text-[11px] font-medium tracking-[0.06em] whitespace-nowrap text-muted-foreground uppercase">Drive</th>
        <th className="h-9 border-b border-border bg-surface px-3 text-left font-mono text-[11px] font-medium tracking-[0.06em] whitespace-nowrap text-muted-foreground uppercase text-right">Used</th>
      </tr>
    </thead>
    <tbody>
      <tr className="border-b border-border transition-colors duration-(--duration-instant) last:border-0 hover:bg-surface">
        <td className="h-10 px-3 whitespace-nowrap text-foreground font-mono">/data/rustfs0</td>
        <td className="h-10 px-3 whitespace-nowrap text-foreground text-right font-mono tabular-nums">3.42 TiB</td>
      </tr>
    </tbody>
  </table>
</div>

<a href="/docs/erasure-coding/" className={cn(
  "group flex flex-col gap-3 border border-border bg-card p-6 text-card-foreground",
  "transition-colors duration-(--duration-base) ease-standard hover:border-foreground",
  "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring",
)}>
  <span className="grid size-10 shrink-0 place-items-center border border-border text-brand [&_svg]:size-5"><Icon name="shard" /></span>
  <h3 className="mt-3 text-lg leading-snug font-semibold">Erasure coding</h3>
  <p className="text-sm leading-relaxed text-muted-foreground">…</p>
  <span className="mt-auto inline-flex items-center gap-1.5 pt-2 text-sm font-medium text-link">
    Learn more <Icon name="arrow-right" className="size-4 transition-transform duration-(--duration-base) ease-emphasized group-hover:translate-x-0.5 motion-reduce:transition-none" />
  </span>
</a>

<header className="@container border-b border-border bg-background">
  <div className="mx-auto flex h-16 max-w-[1240px] items-center gap-8 px-[clamp(16px,4.2vw,64px)]">
    <a href="/" aria-label="RustFS"><Wordmark className="h-4.5 w-auto text-brand" /></a>
    <nav className="hidden items-center gap-6 @3xl:flex">
      <a href="/product/" className="text-sm text-subtle transition-colors duration-(--duration-fast) hover:text-foreground aria-[current=page]:text-foreground aria-[current=page]:font-medium">Product</a>
    </nav>
    <div className="ml-auto hidden items-center gap-3 @3xl:flex">…</div>
    <Button variant="ghost" size="icon" aria-expanded={open} className="ml-auto @3xl:hidden">
      <Icon name={open ? "close" : "menu"} />
    </Button>
  </div>
  {open && (
    <nav className="grid border-t border-border @3xl:hidden">
      <a href="/product/" className="flex h-12 items-center justify-between border-b border-border px-4 text-[15px] text-foreground transition-colors hover:bg-surface">Product</a>
    </nav>
  )}
</header>

<div role="region" aria-label="Announcement" className="bg-stage text-stage-foreground">
  <div className="mx-auto flex min-h-10 max-w-[1240px] items-center gap-3 px-[clamp(16px,4.2vw,64px)] py-2 text-[13px] leading-snug">
    <Stripe className="hidden text-[6px] sm:inline-flex" />
    <a href="/blog/rustfs-1-0-1/" className="group inline-flex items-center gap-1.5 font-medium underline decoration-white/30 underline-offset-4 transition-colors hover:decoration-white">
      RustFS 1.0.1 is available <Icon name="arrow-right" className="size-3.5" />
    </a>
    <button aria-label="Dismiss" className="ml-auto grid size-8 shrink-0 place-items-center text-neutral-400 transition-colors hover:text-white">
      <Icon name="close" className="size-4" />
    </button>
  </div>
</div>

<footer className="@container border-t border-border bg-background">
  <div className="mx-auto grid max-w-[1240px] grid-cols-2 gap-x-6 gap-y-10 px-[clamp(16px,4.2vw,64px)] py-12 @2xl:grid-cols-[minmax(0,1.4fr)_repeat(3,minmax(0,1fr))]">
    <div className="col-span-2 @2xl:col-span-1">…wordmark and line…</div>
    <nav aria-label="Docs" className="grid content-start gap-3">
      <h2 className="font-mono text-[11px] font-medium tracking-[0.08em] text-muted-foreground uppercase">Docs</h2>
      <a href="https://docs.rustfs.com" className="text-sm text-subtle transition-colors duration-(--duration-fast) hover:text-foreground">Quick start</a>
    </nav>
  </div>
  <div className="mx-auto flex max-w-[1240px] flex-wrap justify-between gap-x-6 gap-y-2 border-t border-border px-[clamp(16px,4.2vw,64px)] py-5 font-mono text-xs text-muted-foreground">
    <span>© 2026 RustFS · Apache License 2.0</span>
  </div>
</footer>

import { toast } from "sonner"

toast.success("Bucket created", { description: "s3://photos" })
toast.warning("Quota at 85%", { description: "s3://backups · 8.5 of 10 TiB" })
toast.error("Access denied", { description: "s3:PutObject on s3://logs" })
toast.promise(upload(file), {
  loading: "Uploading…",
  success: "Upload complete",
  error: "Upload failed",
})

<div className="grid justify-items-center gap-5 border border-dashed border-strong px-6 py-12 text-center">
  <ShardMatrix cols={8} rows={3} k={8} m={0} mode="outline" className="h-12 w-auto" />
  <h3 className="text-lg font-semibold">No buckets yet</h3>
  <p className="max-w-[40ch] text-sm leading-relaxed text-muted-foreground">A bucket holds objects and their versions.</p>
  <Button><Icon name="plus" />Create bucket</Button>
</div>

<div role="progressbar" aria-valuemin={0} aria-valuemax={16} aria-valuenow={7} className="grid grid-cols-[repeat(16,minmax(0,1fr))] gap-1">
  {drives.map((d) => <i key={d.id} className={SHARD[d.state]} />)}
</div>

const SHARD = {
  done: "aspect-square bg-brand",
  healing: "aspect-square animate-[rfs-heal_2880ms_steps(1)_infinite] bg-brand",
  todo: "aspect-square border border-strong",
}

// Quota: 40 cells; brand below 80%, warning from 80%, danger from 95%
<div className="grid h-3 grid-cols-[repeat(40,minmax(0,1fr))] gap-0.5">…</div>