@annondeveloper/ui-kit 0.1.0

package/src/components/button.tsx

@@ -0,0 +1,67 @@
+'use client'
+
+import { forwardRef, type ButtonHTMLAttributes } from 'react'
+import { Loader2 } from 'lucide-react'
+import { cn } from '../utils'
+
+export type ButtonVariant = 'primary' | 'secondary' | 'danger' | 'outline' | 'ghost'
+export type ButtonSize = 'sm' | 'md' | 'lg' | 'icon'
+
+const variantClasses: Record<ButtonVariant, string> = {
+  primary:
+    'bg-[hsl(var(--brand-primary))] text-[hsl(var(--text-on-brand))] hover:bg-[hsl(var(--brand-primary)/0.85)] active:bg-[hsl(var(--brand-primary)/0.75)]',
+  secondary:
+    'bg-[hsl(var(--bg-elevated))] text-[hsl(var(--text-primary))] border border-[hsl(var(--border-default))] hover:bg-[hsl(var(--bg-overlay))] active:bg-[hsl(var(--border-subtle))]',
+  danger:
+    'bg-[hsl(var(--status-critical))] text-[hsl(var(--text-on-brand))] hover:bg-[hsl(var(--status-critical)/0.85)] active:bg-[hsl(var(--status-critical)/0.75)]',
+  outline:
+    'bg-transparent text-[hsl(var(--text-primary))] border border-[hsl(var(--border-default))] hover:bg-[hsl(var(--bg-elevated))] active:bg-[hsl(var(--bg-overlay))]',
+  ghost:
+    'bg-transparent text-[hsl(var(--text-secondary))] hover:bg-[hsl(var(--bg-elevated))] hover:text-[hsl(var(--text-primary))] active:bg-[hsl(var(--bg-overlay))]',
+}
+
+const sizeClasses: Record<ButtonSize, string> = {
+  sm: 'h-8 px-3 text-xs gap-1.5 rounded-lg',
+  md: 'h-9 px-4 text-sm gap-2 rounded-lg',
+  lg: 'h-11 px-6 text-sm gap-2 rounded-xl',
+  icon: 'h-9 w-9 rounded-lg',
+}
+
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  /** Visual variant of the button. */
+  variant?: ButtonVariant
+  /** Size preset. */
+  size?: ButtonSize
+  /** Show a loading spinner and disable interaction. */
+  loading?: boolean
+}
+
+/**
+ * @description A themed button with variant, size, and loading support.
+ * Uses CSS custom property tokens for dark/light mode compatibility.
+ */
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ variant = 'primary', size = 'md', loading, disabled, className, children, ...props }, ref) => (
+    <button
+      ref={ref}
+      disabled={disabled || loading}
+      className={cn(
+        'inline-flex items-center justify-center font-medium transition-colors duration-150',
+        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--brand-primary))] focus-visible:ring-offset-2 focus-visible:ring-offset-[hsl(var(--bg-base))]',
+        'disabled:pointer-events-none disabled:opacity-50',
+        'cursor-pointer select-none',
+        variantClasses[variant],
+        sizeClasses[size],
+        className,
+      )}
+      {...props}
+    >
+      {loading && <Loader2 className="h-4 w-4 animate-spin" />}
+      {children}
+    </button>
+  ),
+)
+
+Button.displayName = 'Button'
+
+export { Button }

package/src/components/card.tsx

@@ -0,0 +1,128 @@
+'use client'
+
+import { forwardRef, type HTMLAttributes, type ReactNode } from 'react'
+import { cn } from '../utils'
+
+/* ── Variant & padding maps ───────────────────────────────────────────────── */
+
+const variantClasses = {
+  default:
+    'bg-[hsl(var(--bg-surface))] border border-[hsl(var(--border-subtle))] shadow-sm',
+  elevated:
+    'bg-[hsl(var(--bg-elevated))] border border-[hsl(var(--border-default))] shadow-lg',
+  outlined:
+    'bg-transparent border border-[hsl(var(--border-default))]',
+  interactive:
+    'bg-[hsl(var(--bg-surface))] border border-[hsl(var(--border-subtle))] shadow-sm hover:bg-[hsl(var(--bg-elevated))] hover:border-[hsl(var(--border-default))] hover:shadow-md transition-all duration-150 cursor-pointer',
+} as const
+
+const paddingClasses = {
+  none: '',
+  sm: 'p-3',
+  md: 'p-5',
+  lg: 'p-6',
+} as const
+
+export interface CardProps extends HTMLAttributes<HTMLDivElement> {
+  /** Visual variant. */
+  variant?: keyof typeof variantClasses
+  /** Padding preset. */
+  padding?: keyof typeof paddingClasses
+  /** Card content. */
+  children: ReactNode
+}
+
+/**
+ * @description A styled card container with variant and padding presets.
+ * Use with CardHeader, CardTitle, CardDescription, CardContent, and CardFooter
+ * subcomponents for semantic structure.
+ */
+const Card = forwardRef<HTMLDivElement, CardProps>(
+  ({ variant = 'default', padding = 'md', className, children, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn('rounded-2xl', variantClasses[variant], paddingClasses[padding], className)}
+      {...props}
+    >
+      {children}
+    </div>
+  ),
+)
+Card.displayName = 'Card'
+
+/* ── Subcomponents ────────────────────────────────────────────────────────── */
+
+export interface CardSubProps extends HTMLAttributes<HTMLDivElement> {
+  children: ReactNode
+}
+
+/** Header section of a Card (flex row for title + actions). */
+const CardHeader = forwardRef<HTMLDivElement, CardSubProps>(
+  ({ className, children, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn('flex items-start justify-between gap-4', className)}
+      {...props}
+    >
+      {children}
+    </div>
+  ),
+)
+CardHeader.displayName = 'CardHeader'
+
+/** Title within a CardHeader. */
+const CardTitle = forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement> & { children: ReactNode }>(
+  ({ className, children, ...props }, ref) => (
+    <h3
+      ref={ref}
+      className={cn('text-base font-semibold text-[hsl(var(--text-primary))]', className)}
+      {...props}
+    >
+      {children}
+    </h3>
+  ),
+)
+CardTitle.displayName = 'CardTitle'
+
+/** Description text within a CardHeader. */
+const CardDescription = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLParagraphElement> & { children: ReactNode }>(
+  ({ className, children, ...props }, ref) => (
+    <p
+      ref={ref}
+      className={cn('text-sm text-[hsl(var(--text-secondary))]', className)}
+      {...props}
+    >
+      {children}
+    </p>
+  ),
+)
+CardDescription.displayName = 'CardDescription'
+
+/** Main content area of a Card. */
+const CardContent = forwardRef<HTMLDivElement, CardSubProps>(
+  ({ className, children, ...props }, ref) => (
+    <div ref={ref} className={cn('mt-4', className)} {...props}>
+      {children}
+    </div>
+  ),
+)
+CardContent.displayName = 'CardContent'
+
+/** Footer section of a Card (typically for actions). */
+const CardFooter = forwardRef<HTMLDivElement, CardSubProps>(
+  ({ className, children, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        'mt-4 pt-4 flex items-center gap-3 border-t border-[hsl(var(--border-subtle))]',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  ),
+)
+CardFooter.displayName = 'CardFooter'
+
+export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter }

package/src/components/checkbox.stories.tsx

@@ -0,0 +1,64 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { useState } from 'react'
+import { Checkbox } from './checkbox'
+
+const meta: Meta<typeof Checkbox> = {
+  title: 'Components/Checkbox',
+  component: Checkbox,
+  tags: ['autodocs'],
+  argTypes: {
+    size: { control: 'select', options: ['sm', 'md'] },
+    indeterminate: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+  },
+}
+export default meta
+type Story = StoryObj<typeof Checkbox>
+
+export const Default: Story = {
+  render: (args) => {
+    const [checked, setChecked] = useState(false)
+    return <Checkbox {...args} checked={checked} onChange={() => setChecked(!checked)} />
+  },
+}
+
+export const Checked: Story = {
+  render: () => {
+    const [checked, setChecked] = useState(true)
+    return <Checkbox checked={checked} onChange={() => setChecked(!checked)} />
+  },
+}
+
+export const Unchecked: Story = {
+  render: () => {
+    const [checked, setChecked] = useState(false)
+    return <Checkbox checked={checked} onChange={() => setChecked(!checked)} />
+  },
+}
+
+export const Indeterminate: Story = {
+  args: { indeterminate: true, checked: false },
+}
+
+export const Disabled: Story = {
+  args: { disabled: true, checked: true },
+}
+
+export const SmallSize: Story = {
+  render: () => {
+    const [checked, setChecked] = useState(true)
+    return <Checkbox size="sm" checked={checked} onChange={() => setChecked(!checked)} />
+  },
+}
+
+export const AllStates: Story = {
+  render: () => (
+    <div style={{ display: 'flex', gap: '1.5rem', alignItems: 'center' }}>
+      <Checkbox checked={false} onChange={() => {}} />
+      <Checkbox checked={true} onChange={() => {}} />
+      <Checkbox indeterminate checked={false} onChange={() => {}} />
+      <Checkbox disabled checked={false} onChange={() => {}} />
+      <Checkbox disabled checked={true} onChange={() => {}} />
+    </div>
+  ),
+}

package/src/components/checkbox.tsx

@@ -0,0 +1,58 @@
+'use client'
+
+import { forwardRef, type InputHTMLAttributes } from 'react'
+import { Check, Minus } from 'lucide-react'
+import { cn } from '../utils'
+
+export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
+  /** Show an indeterminate (minus) indicator instead of a checkmark. */
+  indeterminate?: boolean
+  /** Size variant. */
+  size?: 'sm' | 'md'
+}
+
+/**
+ * @description A themed checkbox with indeterminate state support.
+ * Uses CSS custom property tokens for dark/light mode compatibility.
+ */
+const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
+  ({ indeterminate, checked, size = 'md', className, ...props }, ref) => {
+    const isChecked = checked || indeterminate
+    const sizeClass = size === 'sm' ? 'h-3.5 w-3.5' : 'h-4 w-4'
+    const iconSize = size === 'sm' ? 'h-2.5 w-2.5' : 'h-3 w-3'
+
+    return (
+      <label className={cn('relative inline-flex items-center cursor-pointer', className)}>
+        <input
+          ref={ref}
+          type="checkbox"
+          checked={checked}
+          className="sr-only peer"
+          {...props}
+        />
+        <div
+          className={cn(
+            sizeClass,
+            'rounded border transition-colors duration-150',
+            'flex items-center justify-center shrink-0',
+            isChecked
+              ? 'bg-[hsl(var(--brand-primary))] border-[hsl(var(--brand-primary))]'
+              : 'bg-transparent border-[hsl(var(--border-strong))] hover:border-[hsl(var(--brand-primary))]',
+            'peer-focus-visible:ring-2 peer-focus-visible:ring-[hsl(var(--brand-primary))] peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-[hsl(var(--bg-base))]',
+            'peer-disabled:opacity-50 peer-disabled:pointer-events-none',
+          )}
+        >
+          {indeterminate ? (
+            <Minus className={cn(iconSize, 'text-[hsl(var(--text-on-brand))] stroke-[3]')} />
+          ) : checked ? (
+            <Check className={cn(iconSize, 'text-[hsl(var(--text-on-brand))] stroke-[3]')} />
+          ) : null}
+        </div>
+      </label>
+    )
+  },
+)
+
+Checkbox.displayName = 'Checkbox'
+
+export { Checkbox }

package/src/components/confirm-dialog.stories.tsx

@@ -0,0 +1,96 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { useState } from 'react'
+import { ConfirmDialog } from './confirm-dialog'
+import { Button } from './button'
+
+const meta: Meta<typeof ConfirmDialog> = {
+  title: 'Components/ConfirmDialog',
+  component: ConfirmDialog,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: { control: 'select', options: ['danger', 'warning', 'default'] },
+    loading: { control: 'boolean' },
+  },
+}
+export default meta
+type Story = StoryObj<typeof ConfirmDialog>
+
+export const Default: Story = {
+  render: (args) => {
+    const [open, setOpen] = useState(true)
+    return (
+      <>
+        <Button onClick={() => setOpen(true)}>Open Dialog</Button>
+        <ConfirmDialog
+          {...args}
+          open={open}
+          onOpenChange={setOpen}
+          title="Delete Entity"
+          description="Are you sure you want to delete this entity? This action cannot be undone."
+          onConfirm={() => setOpen(false)}
+        />
+      </>
+    )
+  },
+}
+
+export const DangerVariant: Story = {
+  render: () => {
+    const [open, setOpen] = useState(true)
+    return (
+      <>
+        <Button variant="danger" onClick={() => setOpen(true)}>Delete</Button>
+        <ConfirmDialog
+          open={open}
+          onOpenChange={setOpen}
+          variant="danger"
+          title="Delete All Data"
+          description="This will permanently delete all monitoring data for this device. This action cannot be undone."
+          confirmLabel="Delete Everything"
+          onConfirm={() => setOpen(false)}
+        />
+      </>
+    )
+  },
+}
+
+export const WarningVariant: Story = {
+  render: () => {
+    const [open, setOpen] = useState(true)
+    return (
+      <>
+        <Button variant="secondary" onClick={() => setOpen(true)}>Restart</Button>
+        <ConfirmDialog
+          open={open}
+          onOpenChange={setOpen}
+          variant="warning"
+          title="Restart Collector"
+          description="Restarting the collector will cause a brief gap in monitoring data. Continue?"
+          confirmLabel="Restart"
+          onConfirm={() => setOpen(false)}
+        />
+      </>
+    )
+  },
+}
+
+export const WithLoading: Story = {
+  render: () => {
+    const [open, setOpen] = useState(true)
+    return (
+      <>
+        <Button onClick={() => setOpen(true)}>Open Dialog</Button>
+        <ConfirmDialog
+          open={open}
+          onOpenChange={setOpen}
+          variant="danger"
+          title="Decommission Device"
+          description="This will decommission the device and stop all monitoring."
+          confirmLabel="Decommission"
+          loading={true}
+          onConfirm={() => {}}
+        />
+      </>
+    )
+  },
+}

package/src/components/confirm-dialog.tsx

@@ -0,0 +1,145 @@
+'use client'
+
+import * as AlertDialog from '@radix-ui/react-alert-dialog'
+import { motion, AnimatePresence } from 'framer-motion'
+import { AlertTriangle, Loader2 } from 'lucide-react'
+import { cn } from '../utils'
+
+export interface ConfirmDialogProps {
+  /** Whether the dialog is open. */
+  open: boolean
+  /** Callback to control open state. */
+  onOpenChange: (open: boolean) => void
+  /** Dialog title. */
+  title: string
+  /** Dialog description text. */
+  description: string
+  /** Label for the confirm button. */
+  confirmLabel?: string
+  /** Label for the cancel button. */
+  cancelLabel?: string
+  /** Visual variant affecting the icon and confirm button color. */
+  variant?: 'danger' | 'warning' | 'default'
+  /** Show a loading spinner on the confirm button. */
+  loading?: boolean
+  /** Callback when confirmed. */
+  onConfirm: () => void
+}
+
+const variantStyles = {
+  danger: {
+    icon: 'text-[hsl(var(--status-critical))] bg-[hsl(var(--status-critical))]/10',
+    button: 'bg-[hsl(var(--status-critical))] hover:bg-[hsl(var(--status-critical))]/90 text-[hsl(var(--text-on-brand))]',
+  },
+  warning: {
+    icon: 'text-[hsl(var(--status-warning))] bg-[hsl(var(--status-warning))]/10',
+    button: 'bg-[hsl(var(--status-warning))] hover:bg-[hsl(var(--status-warning))]/90 text-[hsl(var(--text-on-brand))]',
+  },
+  default: {
+    icon: 'text-[hsl(var(--brand-primary))] bg-[hsl(var(--brand-primary))]/10',
+    button: 'bg-[hsl(var(--brand-primary))] hover:bg-[hsl(var(--brand-primary))]/90 text-[hsl(var(--text-on-brand))]',
+  },
+}
+
+/**
+ * @description A confirmation dialog built on Radix AlertDialog with Framer Motion animations.
+ * Supports danger, warning, and default variants with loading state.
+ */
+export function ConfirmDialog({
+  open,
+  onOpenChange,
+  title,
+  description,
+  confirmLabel = 'Confirm',
+  cancelLabel = 'Cancel',
+  variant = 'danger',
+  loading = false,
+  onConfirm,
+}: ConfirmDialogProps) {
+  const styles = variantStyles[variant]
+
+  return (
+    <AlertDialog.Root open={open} onOpenChange={onOpenChange}>
+      <AnimatePresence>
+        {open && (
+          <AlertDialog.Portal forceMount>
+            <AlertDialog.Overlay asChild>
+              <motion.div
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                exit={{ opacity: 0 }}
+                transition={{ duration: 0.15 }}
+                className="fixed inset-0 z-50 bg-[hsl(var(--bg-base)/0.7)] backdrop-blur-sm"
+              />
+            </AlertDialog.Overlay>
+            <AlertDialog.Content asChild>
+              <motion.div
+                initial={{ opacity: 0, scale: 0.95, y: 8 }}
+                animate={{ opacity: 1, scale: 1, y: 0 }}
+                exit={{ opacity: 0, scale: 0.95, y: 8 }}
+                transition={{ duration: 0.2, ease: [0.16, 1, 0.3, 1] }}
+                className={cn(
+                  'fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2',
+                  'w-full max-w-md p-6 rounded-2xl',
+                  'border border-[hsl(var(--border-default))]',
+                  'bg-[hsl(var(--bg-elevated))] shadow-2xl',
+                  'focus:outline-none',
+                )}
+              >
+                <div className="flex gap-4">
+                  <div className={cn('flex-shrink-0 p-2.5 rounded-xl h-fit', styles.icon)}>
+                    <AlertTriangle className="w-5 h-5" />
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <AlertDialog.Title className="text-base font-semibold text-[hsl(var(--text-primary))]">
+                      {title}
+                    </AlertDialog.Title>
+                    <AlertDialog.Description className="mt-2 text-sm text-[hsl(var(--text-secondary))] leading-relaxed">
+                      {description}
+                    </AlertDialog.Description>
+                  </div>
+                </div>
+
+                <div className="flex justify-end gap-3 mt-6">
+                  <AlertDialog.Cancel
+                    className={cn(
+                      'px-4 py-2 text-sm font-medium rounded-lg',
+                      'border border-[hsl(var(--border-default))]',
+                      'text-[hsl(var(--text-primary))]',
+                      'hover:bg-[hsl(var(--bg-overlay))] transition-colors',
+                      'focus:outline-none focus:ring-2 focus:ring-[hsl(var(--brand-primary))]',
+                    )}
+                  >
+                    {cancelLabel}
+                  </AlertDialog.Cancel>
+                  <AlertDialog.Action
+                    onClick={(e) => {
+                      e.preventDefault()
+                      onConfirm()
+                    }}
+                    disabled={loading}
+                    className={cn(
+                      'px-4 py-2 text-sm font-medium rounded-lg transition-all',
+                      'focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-[hsl(var(--bg-elevated))]',
+                      styles.button,
+                      loading && 'opacity-70 cursor-not-allowed',
+                    )}
+                  >
+                    {loading ? (
+                      <span className="flex items-center gap-2">
+                        <Loader2 className="w-4 h-4 animate-spin" />
+                        {confirmLabel}
+                      </span>
+                    ) : (
+                      confirmLabel
+                    )}
+                  </AlertDialog.Action>
+                </div>
+              </motion.div>
+            </AlertDialog.Content>
+          </AlertDialog.Portal>
+        )}
+      </AnimatePresence>
+    </AlertDialog.Root>
+  )
+}

package/src/components/data-table.stories.tsx

@@ -0,0 +1,125 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import type { ColumnDef } from '@tanstack/react-table'
+import { Server, Wifi } from 'lucide-react'
+import { DataTable } from './data-table'
+import { StatusBadge } from './status-badge'
+import { Badge } from './badge'
+
+interface Device {
+  id: string
+  hostname: string
+  ip: string
+  vendor: string
+  type: string
+  status: string
+  uptime: string
+}
+
+const sampleData: Device[] = [
+  { id: '1', hostname: 'core-sw-01', ip: '10.0.0.1', vendor: 'Cisco', type: 'Switch', status: 'ok', uptime: '142d 3h' },
+  { id: '2', hostname: 'core-sw-02', ip: '10.0.0.2', vendor: 'Cisco', type: 'Switch', status: 'ok', uptime: '89d 12h' },
+  { id: '3', hostname: 'fw-edge-01', ip: '10.0.0.10', vendor: 'FortiGate', type: 'Firewall', status: 'warning', uptime: '30d 1h' },
+  { id: '4', hostname: 'esxi-host-01', ip: '192.168.1.10', vendor: 'VMware', type: 'Hypervisor', status: 'ok', uptime: '210d 7h' },
+  { id: '5', hostname: 'esxi-host-02', ip: '192.168.1.11', vendor: 'VMware', type: 'Hypervisor', status: 'critical', uptime: '0d 0h' },
+  { id: '6', hostname: 'dist-sw-01', ip: '10.0.1.1', vendor: 'Arista', type: 'Switch', status: 'ok', uptime: '67d 5h' },
+  { id: '7', hostname: 'dist-sw-02', ip: '10.0.1.2', vendor: 'Arista', type: 'Switch', status: 'maintenance', uptime: '0d 0h' },
+  { id: '8', hostname: 'lb-prod-01', ip: '10.0.2.1', vendor: 'F5', type: 'Load Balancer', status: 'ok', uptime: '45d 9h' },
+  { id: '9', hostname: 'san-sw-01', ip: '10.0.3.1', vendor: 'Brocade', type: 'SAN Switch', status: 'ok', uptime: '300d 2h' },
+  { id: '10', hostname: 'router-gw-01', ip: '10.0.0.254', vendor: 'Juniper', type: 'Router', status: 'ok', uptime: '180d 11h' },
+  { id: '11', hostname: 'access-sw-01', ip: '10.1.0.1', vendor: 'HP', type: 'Switch', status: 'stale', uptime: '—' },
+  { id: '12', hostname: 'access-sw-02', ip: '10.1.0.2', vendor: 'HP', type: 'Switch', status: 'ok', uptime: '55d 8h' },
+]
+
+const columns: ColumnDef<Device, unknown>[] = [
+  { accessorKey: 'hostname', header: 'Hostname' },
+  { accessorKey: 'ip', header: 'IP Address' },
+  { accessorKey: 'vendor', header: 'Vendor' },
+  {
+    accessorKey: 'type',
+    header: 'Type',
+    cell: ({ getValue }) => <Badge color="blue" size="xs">{getValue() as string}</Badge>,
+  },
+  {
+    accessorKey: 'status',
+    header: 'Status',
+    cell: ({ getValue }) => <StatusBadge status={getValue() as string} size="sm" />,
+  },
+  { accessorKey: 'uptime', header: 'Uptime' },
+]
+
+const meta: Meta<typeof DataTable<Device>> = {
+  title: 'Components/DataTable',
+  component: DataTable,
+  tags: ['autodocs'],
+  parameters: { layout: 'padded' },
+}
+export default meta
+type Story = StoryObj<typeof DataTable<Device>>
+
+export const Default: Story = {
+  args: {
+    columns,
+    data: sampleData,
+  },
+}
+
+export const WithExport: Story = {
+  args: {
+    columns,
+    data: sampleData,
+    exportFilename: 'devices',
+  },
+}
+
+export const WithRowClick: Story = {
+  args: {
+    columns,
+    data: sampleData,
+    onRowClick: (row: Device) => alert(`Clicked: ${row.hostname}`),
+  },
+}
+
+export const WithDefaultSort: Story = {
+  args: {
+    columns,
+    data: sampleData,
+    defaultSort: { id: 'hostname', desc: false },
+  },
+}
+
+export const Loading: Story = {
+  args: {
+    columns,
+    data: [],
+    isLoading: true,
+  },
+}
+
+export const Empty: Story = {
+  args: {
+    columns,
+    data: [],
+    emptyState: {
+      icon: Server,
+      title: 'No devices found',
+      description: 'Run a discovery scan to find devices on your network.',
+    },
+  },
+}
+
+export const SmallPageSize: Story = {
+  args: {
+    columns,
+    data: sampleData,
+    defaultPageSize: 5,
+  },
+}
+
+export const StickyFirstColumn: Story = {
+  args: {
+    columns,
+    data: sampleData,
+    stickyFirstColumn: true,
+  },
+  parameters: { layout: 'padded' },
+}