@annondeveloper/ui-kit 0.1.0

package/src/components/toggle-switch.stories.tsx

@@ -0,0 +1,66 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { useState } from 'react'
+import { ToggleSwitch } from './toggle-switch'
+
+const meta: Meta<typeof ToggleSwitch> = {
+  title: 'Components/ToggleSwitch',
+  component: ToggleSwitch,
+  tags: ['autodocs'],
+  argTypes: {
+    size: { control: 'select', options: ['sm', 'md'] },
+    disabled: { control: 'boolean' },
+  },
+}
+export default meta
+type Story = StoryObj<typeof ToggleSwitch>
+
+export const Default: Story = {
+  render: (args) => {
+    const [enabled, setEnabled] = useState(false)
+    return <ToggleSwitch {...args} enabled={enabled} onChange={setEnabled} />
+  },
+}
+
+export const On: Story = {
+  render: () => {
+    const [enabled, setEnabled] = useState(true)
+    return <ToggleSwitch enabled={enabled} onChange={setEnabled} />
+  },
+}
+
+export const Off: Story = {
+  render: () => {
+    const [enabled, setEnabled] = useState(false)
+    return <ToggleSwitch enabled={enabled} onChange={setEnabled} />
+  },
+}
+
+export const SmallSize: Story = {
+  render: () => {
+    const [enabled, setEnabled] = useState(true)
+    return <ToggleSwitch size="sm" enabled={enabled} onChange={setEnabled} />
+  },
+}
+
+export const Disabled: Story = {
+  render: () => (
+    <div style={{ display: 'flex', gap: '1rem' }}>
+      <ToggleSwitch enabled={true} onChange={() => {}} disabled />
+      <ToggleSwitch enabled={false} onChange={() => {}} disabled />
+    </div>
+  ),
+}
+
+export const WithLabel: Story = {
+  render: () => {
+    const [enabled, setEnabled] = useState(false)
+    return (
+      <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+        <ToggleSwitch enabled={enabled} onChange={setEnabled} label="Enable notifications" />
+        <span style={{ fontSize: '0.875rem', color: 'hsl(210 20% 70%)' }}>
+          Notifications {enabled ? 'on' : 'off'}
+        </span>
+      </div>
+    )
+  },
+}

package/src/components/toggle-switch.tsx

@@ -0,0 +1,51 @@
+'use client'
+
+import { ToggleLeft, ToggleRight } from 'lucide-react'
+import { cn } from '../utils'
+
+export interface ToggleSwitchProps {
+  /** Whether the toggle is on. */
+  enabled: boolean
+  /** Callback when toggled. */
+  onChange: (enabled: boolean) => void
+  /** Size variant. */
+  size?: 'sm' | 'md'
+  /** Disable the toggle. */
+  disabled?: boolean
+  /** Accessible label. */
+  label?: string
+  className?: string
+}
+
+/**
+ * @description A themed toggle switch using lucide icons for on/off states.
+ * Supports dark/light mode via CSS custom property tokens.
+ */
+export function ToggleSwitch({
+  enabled, onChange, size = 'md', disabled, label, className,
+}: ToggleSwitchProps) {
+  const iconSize = size === 'sm' ? 'size-5' : 'size-6'
+
+  return (
+    <button
+      type="button"
+      role="switch"
+      aria-checked={enabled}
+      aria-label={label}
+      disabled={disabled}
+      onClick={() => onChange(!enabled)}
+      className={cn(
+        'inline-flex items-center transition-colors',
+        'text-[hsl(var(--text-secondary))] hover:text-[hsl(var(--text-primary))]',
+        'disabled:opacity-50 disabled:cursor-not-allowed',
+        className,
+      )}
+    >
+      {enabled ? (
+        <ToggleRight className={cn(iconSize, 'text-[hsl(var(--status-ok))]')} />
+      ) : (
+        <ToggleLeft className={cn(iconSize, 'text-[hsl(var(--text-tertiary))]')} />
+      )}
+    </button>
+  )
+}

package/src/components/tooltip.tsx

@@ -0,0 +1,62 @@
+'use client'
+
+import { type ReactNode } from 'react'
+import * as TooltipPrimitive from '@radix-ui/react-tooltip'
+import { cn } from '../utils'
+
+export interface TooltipProps {
+  /** Tooltip content (can be text or ReactNode). */
+  content: ReactNode
+  /** Trigger element. */
+  children: ReactNode
+  /** Side of the trigger to display the tooltip. */
+  side?: 'top' | 'right' | 'bottom' | 'left'
+  /** Delay in milliseconds before the tooltip appears. */
+  delay?: number
+  /** Additional class name for the tooltip content. */
+  className?: string
+}
+
+/**
+ * @description A simple tooltip wrapper built on Radix Tooltip.
+ * Theme-styled content with arrow pointer and configurable delay.
+ * Requires a TooltipProvider ancestor (included by default).
+ */
+export function Tooltip({
+  content,
+  children,
+  side = 'top',
+  delay = 200,
+  className,
+}: TooltipProps) {
+  return (
+    <TooltipPrimitive.Provider delayDuration={delay}>
+      <TooltipPrimitive.Root>
+        <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>
+        <TooltipPrimitive.Portal>
+          <TooltipPrimitive.Content
+            side={side}
+            sideOffset={6}
+            className={cn(
+              'z-50 px-3 py-1.5 rounded-lg text-xs font-medium',
+              'bg-[hsl(var(--bg-elevated))] text-[hsl(var(--text-primary))]',
+              'border border-[hsl(var(--border-default))] shadow-lg',
+              'animate-in fade-in-0 zoom-in-95',
+              'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
+              'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2',
+              'data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+              className,
+            )}
+          >
+            {content}
+            <TooltipPrimitive.Arrow
+              className="fill-[hsl(var(--bg-elevated))]"
+              width={10}
+              height={5}
+            />
+          </TooltipPrimitive.Content>
+        </TooltipPrimitive.Portal>
+      </TooltipPrimitive.Root>
+    </TooltipPrimitive.Provider>
+  )
+}

package/src/components/truncated-text.stories.tsx

@@ -0,0 +1,56 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { TruncatedText } from './truncated-text'
+
+const meta: Meta<typeof TruncatedText> = {
+  title: 'Components/TruncatedText',
+  component: TruncatedText,
+  tags: ['autodocs'],
+}
+export default meta
+type Story = StoryObj<typeof TruncatedText>
+
+export const ShortText: Story = {
+  args: {
+    text: 'core-sw-01',
+    maxWidth: 200,
+  },
+}
+
+export const LongText: Story = {
+  args: {
+    text: 'very-long-hostname-that-definitely-will-not-fit-in-a-small-column-width.example.datacenter.internal',
+    maxWidth: 200,
+  },
+}
+
+export const IPAddress: Story = {
+  args: {
+    text: '2001:0db8:85a3:0000:0000:8a2e:0370:7334',
+    maxWidth: 150,
+  },
+}
+
+export const InTableContext: Story = {
+  render: () => (
+    <div style={{ width: '400px', border: '1px solid hsl(222 25% 25%)', borderRadius: '0.5rem', overflow: 'hidden' }}>
+      <table style={{ width: '100%', borderCollapse: 'collapse' }}>
+        <thead>
+          <tr style={{ borderBottom: '1px solid hsl(222 30% 20%)' }}>
+            <th style={{ textAlign: 'left', padding: '0.5rem 1rem', fontSize: '0.75rem', color: 'hsl(210 15% 50%)' }}>Hostname</th>
+            <th style={{ textAlign: 'left', padding: '0.5rem 1rem', fontSize: '0.75rem', color: 'hsl(210 15% 50%)' }}>Description</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td style={{ padding: '0.5rem 1rem' }}><TruncatedText text="sw-core-01" maxWidth={120} /></td>
+            <td style={{ padding: '0.5rem 1rem' }}><TruncatedText text="Primary core switch in building A, floor 3, MDF closet" maxWidth={180} /></td>
+          </tr>
+          <tr>
+            <td style={{ padding: '0.5rem 1rem' }}><TruncatedText text="fw-edge-datacenter-primary-01" maxWidth={120} /></td>
+            <td style={{ padding: '0.5rem 1rem' }}><TruncatedText text="Edge firewall" maxWidth={180} /></td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  ),
+}

package/src/components/truncated-text.tsx

@@ -0,0 +1,80 @@
+'use client'
+
+import { useRef, useState, useEffect } from 'react'
+import * as Tooltip from '@radix-ui/react-tooltip'
+import { Copy, Check } from 'lucide-react'
+
+export interface TruncatedTextProps {
+  /** The full text to display (truncated if it overflows). */
+  text: string
+  /** Max width constraint for truncation. */
+  maxWidth?: string | number
+  className?: string
+}
+
+/**
+ * @description A text element that truncates with ellipsis and shows a tooltip with the
+ * full text on hover when truncated. Includes a copy-to-clipboard button in the tooltip.
+ */
+export function TruncatedText({ text, maxWidth = '100%', className = '' }: TruncatedTextProps) {
+  const ref = useRef<HTMLSpanElement>(null)
+  const [isTruncated, setIsTruncated] = useState(false)
+  const [copied, setCopied] = useState(false)
+
+  useEffect(() => {
+    const el = ref.current
+    if (el) setIsTruncated(el.scrollWidth > el.clientWidth)
+  }, [text])
+
+  const handleCopy = async (e: React.MouseEvent) => {
+    e.stopPropagation()
+    await navigator.clipboard.writeText(text)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 1500)
+  }
+
+  const inner = (
+    <span
+      ref={ref}
+      className={`block truncate ${className}`}
+      style={{ maxWidth }}
+    >
+      {text}
+    </span>
+  )
+
+  if (!isTruncated) return inner
+
+  return (
+    <Tooltip.Provider delayDuration={300}>
+      <Tooltip.Root>
+        <Tooltip.Trigger asChild>{inner}</Tooltip.Trigger>
+        <Tooltip.Portal>
+          <Tooltip.Content
+            side="top"
+            align="start"
+            sideOffset={6}
+            className="z-50 max-w-[400px] rounded-lg border border-[hsl(var(--border-default))]
+              bg-[hsl(var(--bg-elevated))] px-3 py-2 shadow-lg
+              animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out
+              data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95"
+          >
+            <p className="text-small text-[hsl(var(--text-primary))] break-all">{text}</p>
+            <div className="mt-1.5 flex justify-end">
+              <button
+                onClick={handleCopy}
+                className="flex items-center gap-1 rounded px-2 py-0.5
+                  text-[11px] text-[hsl(var(--brand-primary))]
+                  hover:bg-[hsl(var(--bg-surface))] transition-colors"
+              >
+                {copied ? <Check className="h-3 w-3" /> : <Copy className="h-3 w-3" />}
+                {copied ? 'Copied' : 'Copy'}
+              </button>
+            </div>
+            <Tooltip.Arrow className="fill-[hsl(var(--bg-elevated))]" />
+          </Tooltip.Content>
+        </Tooltip.Portal>
+      </Tooltip.Root>
+    </Tooltip.Provider>
+  )
+}

package/src/components/uptime-tracker.tsx

@@ -0,0 +1,138 @@
+'use client'
+
+import { motion, useReducedMotion } from 'framer-motion'
+import { cn } from '../utils'
+
+export interface DayStatus {
+  /** Date in YYYY-MM-DD format. */
+  date: string
+  /** Operational status for that day. */
+  status: 'ok' | 'degraded' | 'outage' | 'no-data'
+  /** Uptime percentage for that day (0-100). */
+  uptime?: number
+}
+
+export interface UptimeTrackerProps {
+  /** Array of day-status entries (oldest first). */
+  days: DayStatus[]
+  /** Show overall uptime percentage. */
+  showPercentage?: boolean
+  /** Optional label displayed above the bar. */
+  label?: string
+  /** Callback when a day bar is clicked. */
+  onDayClick?: (day: DayStatus) => void
+  className?: string
+}
+
+const dayColor: Record<string, string> = {
+  ok: 'bg-[hsl(var(--status-ok))]',
+  degraded: 'bg-[hsl(var(--status-warning))]',
+  outage: 'bg-[hsl(var(--status-critical))]',
+  'no-data': 'bg-[hsl(var(--text-disabled))]',
+}
+
+const dayHover: Record<string, string> = {
+  ok: 'hover:bg-[hsl(var(--status-ok))]/80',
+  degraded: 'hover:bg-[hsl(var(--status-warning))]/80',
+  outage: 'hover:bg-[hsl(var(--status-critical))]/80',
+  'no-data': 'hover:bg-[hsl(var(--text-disabled))]/80',
+}
+
+function formatDate(dateStr: string): string {
+  try {
+    const d = new Date(dateStr + 'T00:00:00')
+    return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric' })
+  } catch {
+    return dateStr
+  }
+}
+
+/**
+ * @description A row of thin vertical bars representing daily uptime status,
+ * inspired by GitHub/Statuspage uptime indicators. Each bar is colored by
+ * operational status (ok/degraded/outage/no-data). Hover shows date and uptime
+ * percentage. Designed for SLA and availability tracking displays.
+ */
+export function UptimeTracker({
+  days,
+  showPercentage = true,
+  label,
+  onDayClick,
+  className,
+}: UptimeTrackerProps) {
+  const reduced = useReducedMotion()
+
+  // Calculate overall uptime
+  const daysWithUptime = days.filter(d => d.uptime != null)
+  const overallUptime = daysWithUptime.length > 0
+    ? daysWithUptime.reduce((sum, d) => sum + (d.uptime ?? 0), 0) / daysWithUptime.length
+    : null
+
+  return (
+    <div className={cn('space-y-2', className)}>
+      {/* Header */}
+      {(label || showPercentage) && (
+        <div className="flex items-center justify-between">
+          {label && (
+            <span className="text-[0.8125rem] font-medium text-[hsl(var(--text-primary))]">
+              {label}
+            </span>
+          )}
+          {showPercentage && overallUptime != null && (
+            <span className={cn(
+              'text-[0.8125rem] font-semibold tabular-nums',
+              overallUptime >= 99.9
+                ? 'text-[hsl(var(--status-ok))]'
+                : overallUptime >= 99
+                  ? 'text-[hsl(var(--status-warning))]'
+                  : 'text-[hsl(var(--status-critical))]',
+            )}>
+              {overallUptime.toFixed(2)}% uptime
+            </span>
+          )}
+        </div>
+      )}
+
+      {/* Day bars */}
+      <div className="flex items-end gap-px h-8">
+        {days.map((day, i) => {
+          const tooltip = [
+            formatDate(day.date),
+            day.uptime != null ? `${day.uptime.toFixed(1)}%` : day.status,
+          ].join(' \u2014 ')
+
+          return (
+            <motion.button
+              key={day.date}
+              type="button"
+              initial={reduced ? false : { scaleY: 0 }}
+              animate={{ scaleY: 1 }}
+              transition={{ duration: 0.15, delay: reduced ? 0 : Math.min(i * 0.005, 0.3) }}
+              style={{ originY: '100%' }}
+              onClick={() => onDayClick?.(day)}
+              title={tooltip}
+              aria-label={tooltip}
+              className={cn(
+                'flex-1 min-w-[2px] h-full rounded-[1px] transition-opacity cursor-pointer',
+                dayColor[day.status] ?? dayColor['no-data'],
+                dayHover[day.status] ?? dayHover['no-data'],
+              )}
+            />
+          )
+        })}
+      </div>
+
+      {/* Date range labels */}
+      {days.length > 0 && (
+        <div className="flex items-center justify-between">
+          <span className="text-[0.625rem] text-[hsl(var(--text-tertiary))]">
+            {formatDate(days[0].date)}
+          </span>
+          <span className="text-[0.625rem] text-[hsl(var(--text-tertiary))]">
+            {formatDate(days[days.length - 1].date)}
+          </span>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/utilization-bar.tsx

@@ -0,0 +1,103 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { useReducedMotion } from 'framer-motion'
+import { cn, clamp } from '../utils'
+
+export interface UtilizationBarProps {
+  /** Utilization value from 0 to 100. */
+  value: number
+  /** Warning and critical thresholds. */
+  thresholds?: { warning: number; critical: number }
+  /** Optional label displayed to the left. */
+  label?: string
+  /** Show percentage value text to the right. */
+  showValue?: boolean
+  /** Bar height size. */
+  size?: 'sm' | 'md' | 'lg'
+  /** Animate the fill width on mount. */
+  animated?: boolean
+  className?: string
+}
+
+const sizeMap = {
+  sm: 'h-1.5',
+  md: 'h-2.5',
+  lg: 'h-4',
+}
+
+function getBarColor(value: number, warning: number, critical: number): string {
+  if (value >= critical) return 'hsl(var(--util-high))'
+  if (value >= warning) return 'hsl(var(--util-medium))'
+  return 'hsl(var(--util-low))'
+}
+
+function getTextClass(value: number, warning: number, critical: number): string {
+  if (value >= critical) return 'text-[hsl(var(--status-critical))]'
+  if (value >= warning) return 'text-[hsl(var(--status-warning))]'
+  return 'text-[hsl(var(--text-secondary))]'
+}
+
+/**
+ * @description A segmented horizontal bar showing resource utilization with
+ * color-coded thresholds (green/yellow/red). Supports animated fill on mount.
+ */
+export function UtilizationBar({
+  value: rawValue,
+  thresholds,
+  label,
+  showValue = true,
+  size = 'md',
+  animated = true,
+  className,
+}: UtilizationBarProps) {
+  const reduced = useReducedMotion()
+  const value = clamp(rawValue, 0, 100)
+  const warning = thresholds?.warning ?? 70
+  const critical = thresholds?.critical ?? 90
+
+  const [displayWidth, setDisplayWidth] = useState(animated && !reduced ? 0 : value)
+
+  useEffect(() => {
+    if (!animated || reduced) {
+      setDisplayWidth(value)
+      return
+    }
+    // Trigger the animated width after mount
+    const raf = requestAnimationFrame(() => setDisplayWidth(value))
+    return () => cancelAnimationFrame(raf)
+  }, [value, animated, reduced])
+
+  const barColor = getBarColor(value, warning, critical)
+  const textClass = getTextClass(value, warning, critical)
+
+  return (
+    <div className={cn('flex items-center gap-2', className)} title={`${value.toFixed(1)}%`}>
+      {label && (
+        <span className="text-[0.75rem] font-medium text-[hsl(var(--text-secondary))] shrink-0 min-w-[3rem]">
+          {label}
+        </span>
+      )}
+      <div
+        className={cn(
+          'flex-1 rounded-full bg-[hsl(var(--bg-elevated))] overflow-hidden',
+          sizeMap[size],
+        )}
+      >
+        <div
+          className="h-full rounded-full"
+          style={{
+            width: `${displayWidth}%`,
+            backgroundColor: barColor,
+            transition: animated && !reduced ? 'width 600ms cubic-bezier(0.4, 0, 0.2, 1)' : 'none',
+          }}
+        />
+      </div>
+      {showValue && (
+        <span className={cn('text-[0.75rem] font-medium tabular-nums shrink-0 min-w-[2.5rem] text-right', textClass)}>
+          {value.toFixed(0)}%
+        </span>
+      )}
+    </div>
+  )
+}