@annondeveloper/ui-kit 0.1.0

package/src/components/dropdown-menu.tsx

@@ -0,0 +1,111 @@
+'use client'
+
+import { type ReactNode } from 'react'
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
+import { motion, AnimatePresence, useReducedMotion } from 'framer-motion'
+import type { LucideIcon } from 'lucide-react'
+import { cn } from '../utils'
+
+/** A single menu item definition. */
+export interface MenuItem {
+  /** Display label. */
+  label: string
+  /** Optional icon component. */
+  icon?: LucideIcon
+  /** Callback when item is clicked. */
+  onClick: () => void
+  /** Visual variant — danger for destructive actions. */
+  variant?: 'default' | 'danger'
+  /** Whether this item is disabled. */
+  disabled?: boolean
+}
+
+export interface DropdownMenuProps {
+  /** Trigger element that opens the menu. */
+  trigger: ReactNode
+  /** Array of menu item definitions. */
+  items: MenuItem[]
+  /** Alignment of the menu relative to the trigger. */
+  align?: 'start' | 'center' | 'end'
+  /** Additional class name for the content container. */
+  className?: string
+}
+
+const contentVariants = {
+  hidden: { opacity: 0, scale: 0.95, y: -4 },
+  visible: { opacity: 1, scale: 1, y: 0 },
+  exit: { opacity: 0, scale: 0.95, y: -4 },
+}
+
+/**
+ * @description A context/action dropdown menu built on Radix DropdownMenu.
+ * Features Framer Motion entry/exit animations, keyboard accessibility,
+ * and a danger variant for destructive actions.
+ */
+export function DropdownMenu({ trigger, items, align = 'end', className }: DropdownMenuProps) {
+  const prefersReducedMotion = useReducedMotion()
+
+  return (
+    <DropdownMenuPrimitive.Root>
+      <DropdownMenuPrimitive.Trigger asChild>{trigger}</DropdownMenuPrimitive.Trigger>
+
+      <AnimatePresence>
+        <DropdownMenuPrimitive.Portal>
+          <DropdownMenuPrimitive.Content
+            align={align}
+            sideOffset={6}
+            asChild
+          >
+            <motion.div
+              initial="hidden"
+              animate="visible"
+              exit="exit"
+              variants={contentVariants}
+              transition={prefersReducedMotion ? { duration: 0 } : { duration: 0.15, ease: [0.16, 1, 0.3, 1] }}
+              className={cn(
+                'z-50 min-w-[160px] overflow-hidden rounded-xl p-1',
+                'border border-[hsl(var(--border-default))]',
+                'bg-[hsl(var(--bg-elevated))] shadow-xl',
+                'focus:outline-none',
+                className,
+              )}
+            >
+              {items.map((item, i) => {
+                const Icon = item.icon
+                const isDanger = item.variant === 'danger'
+
+                return (
+                  <DropdownMenuPrimitive.Item
+                    key={i}
+                    disabled={item.disabled}
+                    onSelect={item.onClick}
+                    className={cn(
+                      'relative flex items-center gap-2.5 px-3 py-2 text-sm rounded-lg',
+                      'outline-none cursor-pointer select-none transition-colors duration-100',
+                      'data-[disabled]:pointer-events-none data-[disabled]:opacity-40',
+                      isDanger
+                        ? 'text-[hsl(var(--status-critical))] data-[highlighted]:bg-[hsl(var(--status-critical)/0.1)]'
+                        : 'text-[hsl(var(--text-primary))] data-[highlighted]:bg-[hsl(var(--bg-overlay))]',
+                    )}
+                  >
+                    {Icon && (
+                      <Icon
+                        className={cn(
+                          'h-4 w-4 shrink-0',
+                          isDanger
+                            ? 'text-[hsl(var(--status-critical))]'
+                            : 'text-[hsl(var(--text-secondary))]',
+                        )}
+                      />
+                    )}
+                    {item.label}
+                  </DropdownMenuPrimitive.Item>
+                )
+              })}
+            </motion.div>
+          </DropdownMenuPrimitive.Content>
+        </DropdownMenuPrimitive.Portal>
+      </AnimatePresence>
+    </DropdownMenuPrimitive.Root>
+  )
+}

package/src/components/empty-state.stories.tsx

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Inbox, Search, ServerCrash, Plus } from 'lucide-react'
+import { EmptyState } from './empty-state'
+import { Button } from './button'
+
+const meta: Meta<typeof EmptyState> = {
+  title: 'Components/EmptyState',
+  component: EmptyState,
+  tags: ['autodocs'],
+}
+export default meta
+type Story = StoryObj<typeof EmptyState>
+
+export const Default: Story = {
+  args: {
+    icon: Inbox,
+    title: 'No entities found',
+    description: 'There are no entities matching your filters. Try broadening your search.',
+  },
+}
+
+export const WithActions: Story = {
+  args: {
+    icon: ServerCrash,
+    title: 'No devices discovered',
+    description: 'Run a network scan to discover devices on your network.',
+    actions: (
+      <>
+        <Button variant="primary"><Plus className="h-4 w-4" /> Run Discovery</Button>
+        <Button variant="outline">Import CSV</Button>
+      </>
+    ),
+  },
+}
+
+export const SearchEmpty: Story = {
+  args: {
+    icon: Search,
+    title: 'No results',
+    description: 'No rows match your search or filter criteria.',
+  },
+}

package/src/components/empty-state.tsx

@@ -0,0 +1,43 @@
+'use client'
+
+import { cn } from '../utils'
+import type { LucideIcon } from 'lucide-react'
+
+export interface EmptyStateProps {
+  /** Icon component displayed in the center. */
+  icon: LucideIcon
+  /** Title text. */
+  title: string
+  /** Description text. */
+  description: string
+  /** Optional action buttons rendered below the description. */
+  actions?: React.ReactNode
+  className?: string
+}
+
+/**
+ * @description A decorative empty state placeholder with icon, title, description, and optional actions.
+ * Features a subtle gradient background and glass-morphism styling.
+ */
+export function EmptyState({ icon: Icon, title, description, actions, className }: EmptyStateProps) {
+  return (
+    <div
+      className={cn(
+        'relative overflow-hidden flex flex-col items-center justify-center rounded-2xl border border-dashed border-[hsl(var(--border-default))]',
+        'bg-[hsl(var(--bg-surface)/0.6)] backdrop-blur-xl px-6 py-12 text-center',
+        className,
+      )}
+    >
+      {/* Decorative gradient background */}
+      <div className="pointer-events-none absolute inset-0 bg-gradient-to-b from-[hsl(var(--brand-primary)/0.04)] to-transparent" />
+      <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_at_50%_0%,hsl(var(--brand-primary)/0.06),transparent_70%)]" />
+
+      <div className="relative mb-4 flex size-14 items-center justify-center rounded-2xl bg-[hsl(var(--bg-elevated))] border border-[hsl(var(--border-subtle)/0.6)] shadow-[0_1px_3px_hsl(0_0%_0%/0.12)]">
+        <Icon className="size-6 text-[hsl(var(--text-disabled))]" />
+      </div>
+      <h3 className="relative text-heading-3 text-[hsl(var(--text-primary))] mb-1">{title}</h3>
+      <p className="relative text-body text-[hsl(var(--text-secondary))] max-w-sm">{description}</p>
+      {actions && <div className="relative mt-6 flex gap-3">{actions}</div>}
+    </div>
+  )
+}

package/src/components/filter-pill.stories.tsx

@@ -0,0 +1,71 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { useState } from 'react'
+import { FilterPill } from './filter-pill'
+
+const meta: Meta<typeof FilterPill> = {
+  title: 'Components/FilterPill',
+  component: FilterPill,
+  tags: ['autodocs'],
+}
+export default meta
+type Story = StoryObj<typeof FilterPill>
+
+export const Active: Story = {
+  args: {
+    label: 'Network Devices',
+    active: true,
+    onClick: () => {},
+  },
+}
+
+export const Inactive: Story = {
+  args: {
+    label: 'Firewalls',
+    active: false,
+    onClick: () => {},
+  },
+}
+
+export const WithCount: Story = {
+  args: {
+    label: 'Hosts',
+    count: 42,
+    active: true,
+    onClick: () => {},
+  },
+}
+
+export const WithCountInactive: Story = {
+  args: {
+    label: 'VMs',
+    count: 128,
+    active: false,
+    onClick: () => {},
+  },
+}
+
+export const FilterGroup: Story = {
+  render: () => {
+    const [active, setActive] = useState('all')
+    const filters = [
+      { key: 'all', label: 'All', count: 312 },
+      { key: 'network', label: 'Network', count: 47 },
+      { key: 'compute', label: 'Compute', count: 89 },
+      { key: 'storage', label: 'Storage', count: 12 },
+      { key: 'firewall', label: 'Firewall', count: 8 },
+    ]
+    return (
+      <div style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap' }}>
+        {filters.map(f => (
+          <FilterPill
+            key={f.key}
+            label={f.label}
+            count={f.count}
+            active={active === f.key}
+            onClick={() => setActive(f.key)}
+          />
+        ))}
+      </div>
+    )
+  },
+}

package/src/components/filter-pill.tsx

@@ -0,0 +1,45 @@
+'use client'
+
+import { cn } from '../utils'
+
+export interface FilterPillProps {
+  /** Label text for the pill. */
+  label: string
+  /** Optional count displayed after the label. */
+  count?: number
+  /** Whether this pill is currently active/selected. */
+  active: boolean
+  /** Click handler. */
+  onClick: () => void
+  className?: string
+}
+
+/**
+ * @description A rounded pill-style filter toggle with active state and optional count.
+ * Uses CSS custom property tokens for dark/light mode compatibility.
+ */
+export function FilterPill({ label, count, active, onClick, className }: FilterPillProps) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={cn(
+        'rounded-full px-3 py-1 text-xs transition-colors whitespace-nowrap',
+        active
+          ? 'bg-[hsl(var(--brand-primary))]/10 text-[hsl(var(--brand-primary))] font-medium'
+          : 'bg-[hsl(var(--bg-elevated))] text-[hsl(var(--text-secondary))] hover:bg-[hsl(var(--bg-overlay))]',
+        className,
+      )}
+    >
+      {label}
+      {count != null && (
+        <span className={cn(
+          'ml-1.5 tabular-nums',
+          active ? 'text-[hsl(var(--brand-primary))]/70' : 'text-[hsl(var(--text-tertiary))]',
+        )}>
+          {count}
+        </span>
+      )}
+    </button>
+  )
+}

package/src/components/form-input.stories.tsx

@@ -0,0 +1,91 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { useState } from 'react'
+import { FormInput } from './form-input'
+
+const meta: Meta<typeof FormInput> = {
+  title: 'Components/FormInput',
+  component: FormInput,
+  tags: ['autodocs'],
+  argTypes: {
+    type: { control: 'select', options: ['text', 'email', 'password', 'number', 'url'] },
+    required: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+  },
+}
+export default meta
+type Story = StoryObj<typeof FormInput>
+
+export const Default: Story = {
+  render: (args) => {
+    const [value, setValue] = useState('')
+    return <FormInput {...args} value={value} onChange={setValue} />
+  },
+  args: {
+    label: 'Hostname',
+    placeholder: 'e.g. switch-core-01',
+  },
+}
+
+export const WithLabel: Story = {
+  render: () => {
+    const [value, setValue] = useState('admin@netrak.io')
+    return <FormInput label="Email" type="email" value={value} onChange={setValue} />
+  },
+}
+
+export const WithHint: Story = {
+  render: () => {
+    const [value, setValue] = useState('')
+    return (
+      <FormInput
+        label="API Key"
+        value={value}
+        onChange={setValue}
+        hint="Generate a key from Settings > API Keys."
+        placeholder="sk-..."
+      />
+    )
+  },
+}
+
+export const Required: Story = {
+  render: () => {
+    const [value, setValue] = useState('')
+    return (
+      <FormInput
+        label="Device Name"
+        value={value}
+        onChange={setValue}
+        required
+        placeholder="Required field"
+      />
+    )
+  },
+}
+
+export const Disabled: Story = {
+  render: () => (
+    <FormInput
+      label="Read Only"
+      value="Cannot edit this"
+      onChange={() => {}}
+      disabled
+    />
+  ),
+}
+
+export const Password: Story = {
+  render: () => {
+    const [value, setValue] = useState('')
+    return (
+      <FormInput
+        label="Password"
+        type="password"
+        value={value}
+        onChange={setValue}
+        required
+        placeholder="Enter password"
+      />
+    )
+  },
+}

package/src/components/form-input.tsx

@@ -0,0 +1,77 @@
+'use client'
+
+import { cn } from '../utils'
+
+// ── Shared class constants ──────────────────────────────────────────────────
+// Import these in any page that needs raw class strings (e.g. for <textarea>)
+
+export const INPUT_CLS = cn(
+  'w-full rounded-lg border border-[hsl(var(--border-default))]',
+  'bg-[hsl(var(--bg-base))] px-3 py-2 text-sm',
+  'text-[hsl(var(--text-primary))] placeholder:text-[hsl(var(--text-tertiary))]',
+  'focus:outline-none focus:ring-2 focus:ring-[hsl(var(--brand-primary))]',
+  'disabled:opacity-50 disabled:cursor-not-allowed',
+)
+
+export const LABEL_CLS = cn(
+  'mb-1.5 block text-xs font-medium uppercase tracking-wider',
+  'text-[hsl(var(--text-secondary))]',
+)
+
+export const TEXTAREA_CLS = cn(
+  INPUT_CLS,
+  'resize-none font-mono text-xs leading-relaxed',
+)
+
+export interface FormInputProps {
+  /** Label text displayed above the input. */
+  label: string
+  /** Current input value. */
+  value: string
+  /** Callback when value changes. */
+  onChange: (value: string) => void
+  /** HTML input type. */
+  type?: string
+  /** Placeholder text. */
+  placeholder?: string
+  /** Mark the field as required. */
+  required?: boolean
+  /** Disable the input. */
+  disabled?: boolean
+  /** Help text shown below the input. */
+  hint?: string
+  className?: string
+  /** HTML autocomplete attribute. */
+  autoComplete?: string
+}
+
+/**
+ * @description A themed form input with label, validation indicator, and optional hint text.
+ * Uses CSS custom property tokens for dark/light mode compatibility.
+ */
+export function FormInput({
+  label, value, onChange, type = 'text',
+  placeholder, required, disabled, hint, className, autoComplete,
+}: FormInputProps) {
+  return (
+    <div className={cn('space-y-1.5', className)}>
+      <label className={LABEL_CLS}>
+        {label}
+        {required && <span className="text-[hsl(var(--status-critical))] ml-0.5">*</span>}
+      </label>
+      <input
+        type={type}
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder={placeholder}
+        required={required}
+        disabled={disabled}
+        autoComplete={autoComplete}
+        className={INPUT_CLS}
+      />
+      {hint && (
+        <p className="text-[10px] text-[hsl(var(--text-tertiary))]">{hint}</p>
+      )}
+    </div>
+  )
+}

package/src/components/log-viewer.tsx

@@ -0,0 +1,212 @@
+'use client'
+
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { motion, AnimatePresence, useReducedMotion } from 'framer-motion'
+import { ArrowDown, Search } from 'lucide-react'
+import { cn } from '../utils'
+
+export interface LogEntry {
+  /** ISO 8601 timestamp. */
+  time: string
+  /** Log level. */
+  level: 'error' | 'warn' | 'info' | 'debug' | 'trace'
+  /** Log message content. */
+  message: string
+  /** Optional source identifier. */
+  source?: string
+}
+
+export interface LogViewerProps {
+  /** Log entries to display. */
+  entries: LogEntry[]
+  /** Maximum container height in pixels. */
+  maxHeight?: number
+  /** Auto-scroll to bottom on new entries. */
+  autoScroll?: boolean
+  /** Show timestamps column. */
+  showTimestamps?: boolean
+  /** Show level badge. */
+  showLevel?: boolean
+  /** Callback when a log entry is clicked. */
+  onEntryClick?: (entry: LogEntry) => void
+  className?: string
+}
+
+const levelBorder: Record<string, string> = {
+  error: 'border-l-[hsl(var(--status-critical))]',
+  warn: 'border-l-[hsl(var(--status-warning))]',
+  info: 'border-l-[hsl(var(--brand-primary))]',
+  debug: 'border-l-[hsl(var(--text-tertiary))]',
+  trace: 'border-l-[hsl(var(--text-disabled))]',
+}
+
+const levelText: Record<string, string> = {
+  error: 'text-[hsl(var(--status-critical))]',
+  warn: 'text-[hsl(var(--status-warning))]',
+  info: 'text-[hsl(var(--brand-primary))]',
+  debug: 'text-[hsl(var(--text-tertiary))]',
+  trace: 'text-[hsl(var(--text-disabled))]',
+}
+
+const levelLabel: Record<string, string> = {
+  error: 'ERR',
+  warn: 'WRN',
+  info: 'INF',
+  debug: 'DBG',
+  trace: 'TRC',
+}
+
+function formatTs(iso: string): string {
+  try {
+    const d = new Date(iso)
+    return d.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit', second: '2-digit' })
+  } catch {
+    return iso
+  }
+}
+
+/**
+ * @description A log stream viewer with severity-colored borders, auto-scroll,
+ * search filtering, and a "new entries" indicator when scrolled up.
+ * Designed for real-time log tailing in monitoring dashboards.
+ */
+export function LogViewer({
+  entries,
+  maxHeight = 400,
+  autoScroll = true,
+  showTimestamps = true,
+  showLevel = true,
+  onEntryClick,
+  className,
+}: LogViewerProps) {
+  const reduced = useReducedMotion()
+  const containerRef = useRef<HTMLDivElement>(null)
+  const [isAtBottom, setIsAtBottom] = useState(true)
+  const [filter, setFilter] = useState('')
+  const [newCount, setNewCount] = useState(0)
+  const prevLenRef = useRef(entries.length)
+
+  const checkAtBottom = useCallback(() => {
+    const el = containerRef.current
+    if (!el) return
+    const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 32
+    setIsAtBottom(atBottom)
+    if (atBottom) setNewCount(0)
+  }, [])
+
+  // Auto-scroll on new entries
+  useEffect(() => {
+    const added = entries.length - prevLenRef.current
+    prevLenRef.current = entries.length
+
+    if (added > 0 && !isAtBottom) {
+      setNewCount(prev => prev + added)
+    }
+
+    if (autoScroll && isAtBottom && containerRef.current) {
+      containerRef.current.scrollTop = containerRef.current.scrollHeight
+    }
+  }, [entries.length, autoScroll, isAtBottom])
+
+  const scrollToBottom = useCallback(() => {
+    if (containerRef.current) {
+      containerRef.current.scrollTop = containerRef.current.scrollHeight
+      setNewCount(0)
+      setIsAtBottom(true)
+    }
+  }, [])
+
+  const lowerFilter = filter.toLowerCase()
+  const filtered = filter
+    ? entries.filter(e =>
+        e.message.toLowerCase().includes(lowerFilter) ||
+        e.source?.toLowerCase().includes(lowerFilter) ||
+        e.level.includes(lowerFilter)
+      )
+    : entries
+
+  return (
+    <div className={cn('relative rounded-xl border border-[hsl(var(--border-subtle))] bg-[hsl(var(--bg-surface))] overflow-hidden', className)}>
+      {/* Search bar */}
+      <div className="flex items-center gap-2 px-3 py-2 border-b border-[hsl(var(--border-subtle))] bg-[hsl(var(--bg-elevated))]">
+        <Search className="size-3.5 text-[hsl(var(--text-tertiary))] shrink-0" />
+        <input
+          type="text"
+          value={filter}
+          onChange={e => setFilter(e.target.value)}
+          placeholder="Filter logs..."
+          className="flex-1 bg-transparent text-[0.75rem] text-[hsl(var(--text-primary))] placeholder:text-[hsl(var(--text-disabled))] outline-none font-mono"
+        />
+        {filter && (
+          <span className="text-[0.6875rem] text-[hsl(var(--text-tertiary))] tabular-nums shrink-0">
+            {filtered.length} / {entries.length}
+          </span>
+        )}
+      </div>
+
+      {/* Log entries */}
+      <div
+        ref={containerRef}
+        onScroll={checkAtBottom}
+        className="overflow-y-auto"
+        style={{ maxHeight }}
+      >
+        {filtered.map((entry, i) => (
+          <div
+            key={`${entry.time}-${i}`}
+            onClick={() => onEntryClick?.(entry)}
+            className={cn(
+              'flex items-start gap-2 px-3 py-1 border-l-2 font-mono text-[0.75rem] leading-5',
+              'hover:bg-[hsl(var(--bg-elevated))] transition-colors',
+              onEntryClick && 'cursor-pointer',
+              levelBorder[entry.level] ?? levelBorder.info,
+            )}
+          >
+            {showTimestamps && (
+              <span className="text-[hsl(var(--text-tertiary))] tabular-nums shrink-0 select-all">
+                {formatTs(entry.time)}
+              </span>
+            )}
+            {showLevel && (
+              <span className={cn('font-semibold shrink-0 w-[2.5ch]', levelText[entry.level] ?? levelText.info)}>
+                {levelLabel[entry.level] ?? entry.level.toUpperCase().slice(0, 3)}
+              </span>
+            )}
+            {entry.source && (
+              <span className="text-[hsl(var(--text-secondary))] shrink-0">
+                [{entry.source}]
+              </span>
+            )}
+            <span className="text-[hsl(var(--text-primary))] break-all min-w-0">
+              {entry.message}
+            </span>
+          </div>
+        ))}
+      </div>
+
+      {/* New entries indicator */}
+      <AnimatePresence>
+        {newCount > 0 && !isAtBottom && (
+          <motion.button
+            type="button"
+            initial={reduced ? false : { opacity: 0, y: 8 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: 8 }}
+            transition={{ duration: 0.15 }}
+            onClick={scrollToBottom}
+            className={cn(
+              'absolute bottom-3 left-1/2 -translate-x-1/2 z-10',
+              'inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full',
+              'bg-[hsl(var(--brand-primary))] text-[hsl(var(--text-on-brand))]',
+              'text-[0.6875rem] font-medium shadow-lg cursor-pointer',
+              'hover:opacity-90 transition-opacity',
+            )}
+          >
+            <ArrowDown className="size-3" />
+            {newCount} new {newCount === 1 ? 'entry' : 'entries'}
+          </motion.button>
+        )}
+      </AnimatePresence>
+    </div>
+  )
+}