@countermeasure-platform/web-components 0.2.0

package/src/react/primitives/select.tsx

@@ -0,0 +1,218 @@
+import * as React from 'react'
+import * as SelectPrimitive from '@radix-ui/react-select'
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from 'lucide-react'
+
+import { cn } from './utils'
+
+function Select({ ...props }: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />
+}
+
+function SelectGroup({ ...props }: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />
+}
+
+function SelectValue({ ...props }: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />
+}
+
+function SelectTrigger({
+  className,
+  size = 'default',
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+  size?: 'sm' | 'default'
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        // Base styles
+        'flex w-fit items-center justify-between gap-2 rounded-xl text-[13px] whitespace-nowrap transition-all outline-none',
+        // Glass styling
+        'bg-glass border-border-glass border backdrop-blur-[20px]',
+        // Text colors
+        'text-foreground data-[placeholder]:text-foreground-muted',
+        // Icon styling
+        "[&_svg:not([class*='text-'])]:text-foreground-muted [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        // Focus state
+        'focus:border-primary focus:shadow-glow',
+        // Disabled state
+        'disabled:cursor-not-allowed disabled:opacity-50',
+        // Size variants
+        'data-[size=default]:h-10 data-[size=default]:pr-3 data-[size=default]:pl-4',
+        'data-[size=sm]:h-8 data-[size=sm]:pr-2 data-[size=sm]:pl-3 data-[size=sm]:text-xs',
+        // Value alignment
+        '*:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2',
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDownIcon className="size-4 opacity-50" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  )
+}
+
+function SelectContent({
+  className,
+  children,
+  position = 'popper',
+  align = 'start',
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        className={cn(
+          // Base styles
+          'relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-xl border shadow-lg',
+          // Glass styling
+          'bg-glass-solid border-border-glass text-foreground backdrop-blur-[40px]',
+          // Animation
+          'data-[state=open]:animate-in data-[state=closed]:animate-out',
+          'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+          'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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',
+          // Popper positioning
+          position === 'popper' &&
+            'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+          className
+        )}
+        position={position}
+        align={align}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          className={cn(
+            'p-1',
+            position === 'popper' &&
+              'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1'
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  )
+}
+
+function SelectLabel({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Label>) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn(
+        'text-foreground-muted px-2 py-1.5 text-xs font-semibold tracking-wider uppercase',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        // Base styles
+        'relative flex w-full cursor-default items-center gap-2 rounded-lg py-2 pr-8 pl-3 text-[13px] outline-hidden select-none',
+        // Hover/focus state
+        'focus:bg-glass-hover focus:text-foreground',
+        // Text color
+        'text-foreground-secondary',
+        // Disabled state
+        'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        // Icon styling
+        "[&_svg:not([class*='text-'])]:text-foreground-muted [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        '*:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2',
+        className
+      )}
+      {...props}
+    >
+      <span
+        data-slot="select-item-indicator"
+        className="absolute right-2 flex size-3.5 items-center justify-center"
+      >
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="text-primary size-4" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  )
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn('bg-border-glass pointer-events-none -mx-1 my-1 h-px', className)}
+      {...props}
+    />
+  )
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn(
+        'text-foreground-muted flex cursor-default items-center justify-center py-1',
+        className
+      )}
+      {...props}
+    >
+      <ChevronUpIcon className="size-4" />
+    </SelectPrimitive.ScrollUpButton>
+  )
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn(
+        'text-foreground-muted flex cursor-default items-center justify-center py-1',
+        className
+      )}
+      {...props}
+    >
+      <ChevronDownIcon className="size-4" />
+    </SelectPrimitive.ScrollDownButton>
+  )
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+}

package/src/react/primitives/separator.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react'
+import * as SeparatorPrimitive from '@radix-ui/react-separator'
+
+import { cn } from './utils'
+
+function Separator({
+  className,
+  orientation = 'horizontal',
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        'bg-border-glass shrink-0',
+        orientation === 'horizontal' ? 'h-px w-full' : 'h-full w-px',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }

package/src/react/primitives/severity-indicator.tsx

@@ -0,0 +1,110 @@
+import * as React from 'react'
+import { cva } from 'class-variance-authority'
+
+import { cn } from './utils'
+
+/* ------------------------------------------------------------------ */
+/*  Types                                                              */
+/* ------------------------------------------------------------------ */
+
+export type SeverityLevel = 'critical' | 'high' | 'medium' | 'low' | 'info' | 'none'
+
+/* ------------------------------------------------------------------ */
+/*  Variants                                                           */
+/* ------------------------------------------------------------------ */
+
+const severityVariants = cva(
+  'inline-flex items-center gap-1.5 rounded-full text-xs font-medium transition-colors',
+  {
+    variants: {
+      level: {
+        critical: 'text-accent-rose',
+        high: 'text-accent-rose/80',
+        medium: 'text-accent-amber',
+        low: 'text-accent-cyan',
+        info: 'text-foreground-secondary',
+        none: 'text-foreground-muted',
+      },
+      compact: {
+        true: 'gap-1 text-[11px]',
+        false: '',
+      },
+    },
+    defaultVariants: {
+      level: 'info',
+      compact: false,
+    },
+  }
+)
+
+const dotVariants = cva('inline-block shrink-0 rounded-full', {
+  variants: {
+    level: {
+      critical: 'bg-accent-rose',
+      high: 'bg-accent-rose/80',
+      medium: 'bg-accent-amber',
+      low: 'bg-accent-cyan',
+      info: 'bg-foreground-secondary',
+      none: 'bg-foreground-muted',
+    },
+    compact: {
+      true: 'size-1.5',
+      false: 'size-2',
+    },
+  },
+  defaultVariants: {
+    level: 'info',
+    compact: false,
+  },
+})
+
+/* ------------------------------------------------------------------ */
+/*  Labels                                                             */
+/* ------------------------------------------------------------------ */
+
+const LEVEL_LABELS: Record<SeverityLevel, string> = {
+  critical: 'Critical',
+  high: 'High',
+  medium: 'Medium',
+  low: 'Low',
+  info: 'Info',
+  none: 'None',
+}
+
+/* ------------------------------------------------------------------ */
+/*  Component                                                          */
+/* ------------------------------------------------------------------ */
+
+export interface SeverityIndicatorProps extends React.ComponentProps<'span'> {
+  level: SeverityLevel
+  /** Show the text label. Defaults to true. */
+  showLabel?: boolean
+  /** Show the colored dot icon. Defaults to true. */
+  showIcon?: boolean
+  /** Compact mode with smaller sizing. */
+  compact?: boolean
+}
+
+function SeverityIndicator({
+  className,
+  level,
+  showLabel = true,
+  showIcon = true,
+  compact = false,
+  ...props
+}: SeverityIndicatorProps) {
+  return (
+    <span
+      data-slot="severity-indicator"
+      role="status"
+      aria-label={`Severity: ${LEVEL_LABELS[level]}`}
+      className={cn(severityVariants({ level, compact }), className)}
+      {...props}
+    >
+      {showIcon && <span aria-hidden="true" className={dotVariants({ level, compact })} />}
+      {showLabel && <span>{LEVEL_LABELS[level]}</span>}
+    </span>
+  )
+}
+
+export { SeverityIndicator, severityVariants }

package/src/react/primitives/sheet.tsx

@@ -0,0 +1,137 @@
+import * as DialogPrimitive from '@radix-ui/react-dialog'
+import { XIcon } from 'lucide-react'
+import * as React from 'react'
+
+import { cn } from './utils'
+
+function Sheet({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="sheet" {...props} />
+}
+
+function SheetTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="sheet-trigger" {...props} />
+}
+
+function SheetPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="sheet-portal" {...props} />
+}
+
+function SheetClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="sheet-close" {...props} />
+}
+
+function SheetOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="sheet-overlay"
+      className={cn(
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/60 backdrop-blur-sm',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SheetContent({
+  className,
+  children,
+  side = 'right',
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  side?: 'top' | 'right' | 'bottom' | 'left'
+}) {
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <DialogPrimitive.Content
+        data-slot="sheet-content"
+        className={cn(
+          'bg-background fixed z-50 flex flex-col gap-4 shadow-lg transition duration-300 ease-in-out outline-none',
+          'data-[state=open]:animate-in data-[state=closed]:animate-out',
+          side === 'right' &&
+            'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-full max-w-lg border-l',
+          side === 'left' &&
+            'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-full max-w-lg border-r',
+          side === 'top' &&
+            'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 w-full border-b',
+          side === 'bottom' &&
+            'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 w-full border-t',
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <DialogPrimitive.Close
+          data-slot="sheet-close"
+          className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none"
+        >
+          <XIcon className="size-4" />
+          <span className="sr-only">Close</span>
+        </DialogPrimitive.Close>
+      </DialogPrimitive.Content>
+    </SheetPortal>
+  )
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn('flex flex-col gap-1.5 px-6 pt-6', className)}
+      {...props}
+    />
+  )
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={cn(
+        'border-border-glass/50 flex items-center justify-end gap-2 border-t px-6 py-4',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SheetTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="sheet-title"
+      className={cn('text-foreground text-lg font-semibold', className)}
+      {...props}
+    />
+  )
+}
+
+function SheetDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="sheet-description"
+      className={cn('text-foreground-secondary text-sm', className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetOverlay,
+  SheetPortal,
+  SheetTitle,
+  SheetTrigger,
+}

package/src/react/primitives/skeleton.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react'
+
+import { cn } from './utils'
+
+function Skeleton({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn('bg-accent animate-pulse rounded-md', className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

package/src/react/primitives/slide-panel.tsx

@@ -0,0 +1,137 @@
+import { useEffect, useCallback } from 'react'
+import { X } from 'lucide-react'
+import { cn } from './utils'
+
+export interface SlidePanelProps {
+  /** Whether the panel is open */
+  open: boolean
+  /** Called when the panel should close */
+  onClose: () => void
+  /** Panel title */
+  title?: string
+  /** Icon to display next to title */
+  icon?: React.ReactNode
+  /** Panel content */
+  children: React.ReactNode
+  /** Side to slide from */
+  side?: 'left' | 'right'
+  /** Panel width */
+  width?: 'sm' | 'md' | 'lg' | 'xl'
+  /** Whether to show backdrop */
+  showBackdrop?: boolean
+  /** Additional class names for the panel */
+  className?: string
+}
+
+const widthClasses = {
+  sm: 'w-64',
+  md: 'w-80',
+  lg: 'w-96',
+  xl: 'w-[480px]',
+}
+
+/**
+ * SlidePanel
+ *
+ * A slide-in panel component that can appear from the left or right side of the screen.
+ * Includes a backdrop overlay and supports keyboard navigation (Escape to close).
+ */
+export function SlidePanel({
+  open,
+  onClose,
+  title,
+  icon,
+  children,
+  side = 'left',
+  width = 'md',
+  showBackdrop = true,
+  className,
+}: SlidePanelProps) {
+  // Handle escape key
+  const handleEscape = useCallback(
+    (e: KeyboardEvent) => {
+      if (e.key === 'Escape' && open) {
+        onClose()
+      }
+    },
+    [open, onClose]
+  )
+
+  useEffect(() => {
+    document.addEventListener('keydown', handleEscape)
+    return () => document.removeEventListener('keydown', handleEscape)
+  }, [handleEscape])
+
+  // Prevent body scroll when open
+  useEffect(() => {
+    if (open) {
+      document.body.style.overflow = 'hidden'
+    } else {
+      document.body.style.overflow = ''
+    }
+    return () => {
+      document.body.style.overflow = ''
+    }
+  }, [open])
+
+  const isLeft = side === 'left'
+
+  return (
+    <>
+      {/* Backdrop */}
+      {showBackdrop && (
+        <div
+          className={cn(
+            'fixed inset-0 z-40 bg-black/40 backdrop-blur-sm',
+            'transition-opacity duration-300',
+            open ? 'opacity-100' : 'pointer-events-none opacity-0'
+          )}
+          onClick={onClose}
+          onKeyDown={e => e.key === 'Enter' && onClose()}
+          role="button"
+          tabIndex={open ? 0 : -1}
+          aria-label="Close panel"
+        />
+      )}
+
+      {/* Panel */}
+      <div
+        role="dialog"
+        aria-modal="true"
+        aria-label={title || 'Side panel'}
+        className={cn(
+          'fixed inset-y-0 z-50',
+          isLeft ? 'left-0' : 'right-0',
+          widthClasses[width],
+          'bg-background-surface/95 backdrop-blur-xl',
+          isLeft ? 'border-r' : 'border-l',
+          'border-border-default',
+          'transform transition-transform duration-300 ease-out',
+          open ? 'translate-x-0' : isLeft ? '-translate-x-full' : 'translate-x-full',
+          className
+        )}
+      >
+        {/* Header */}
+        {(title || icon) && (
+          <div className="border-border-subtle flex items-center justify-between border-b px-5 py-4">
+            <div className="flex items-center gap-2">
+              {icon && <span className="text-accent-violet">{icon}</span>}
+              {title && <h2 className="text-foreground font-semibold">{title}</h2>}
+            </div>
+            <button
+              type="button"
+              onClick={onClose}
+              className="rounded-lg p-1.5 transition-colors hover:bg-white/5"
+              aria-label="Close panel"
+            >
+              <X className="text-foreground-muted h-4 w-4" />
+            </button>
+          </div>
+        )}
+
+        {/* Content */}
+        <div className="max-h-[calc(100vh-80px)] overflow-y-auto">{children}</div>
+      </div>
+    </>
+  )
+}

package/src/react/primitives/slider.tsx

@@ -0,0 +1,51 @@
+import * as React from 'react'
+import * as SliderPrimitive from '@radix-ui/react-slider'
+
+import { cn } from './utils'
+
+function Slider({
+  className,
+  defaultValue,
+  value,
+  min = 0,
+  max = 100,
+  ...props
+}: React.ComponentProps<typeof SliderPrimitive.Root>) {
+  const _value = value ?? defaultValue ?? [min]
+
+  return (
+    <SliderPrimitive.Root
+      data-slot="slider"
+      {...(defaultValue !== undefined ? { defaultValue } : {})}
+      {...(value !== undefined ? { value } : {})}
+      min={min}
+      max={max}
+      className={cn(
+        'relative flex w-full touch-none select-none items-center',
+        'disabled:cursor-not-allowed disabled:opacity-50',
+        className
+      )}
+      {...props}
+    >
+      <SliderPrimitive.Track
+        data-slot="slider-track"
+        className="bg-accent relative h-1.5 w-full grow overflow-hidden rounded-full"
+      >
+        <SliderPrimitive.Range data-slot="slider-range" className="bg-primary absolute h-full" />
+      </SliderPrimitive.Track>
+      {Array.from({ length: _value.length }, (_, index) => (
+        <SliderPrimitive.Thumb
+          data-slot="slider-thumb"
+          key={index}
+          className={cn(
+            'border-primary bg-background block h-4 w-4 rounded-full border-2 shadow-sm transition-colors',
+            'focus-visible:ring-ring focus-visible:ring-offset-background focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none',
+            'disabled:pointer-events-none'
+          )}
+        />
+      ))}
+    </SliderPrimitive.Root>
+  )
+}
+
+export { Slider }