@countermeasure-platform/web-components 0.2.0

package/src/react/primitives/calendar.tsx

@@ -0,0 +1,289 @@
+import * as React from 'react'
+import { cn } from './utils'
+import {
+  buildDayGrid,
+  DAYS_MON,
+  DAYS_SUN,
+  isBetween,
+  isDateDisabled as sharedIsDateDisabled,
+  isSameDay,
+  MONTHS,
+  stripTime,
+  type WeekStart,
+} from '../../utils/date'
+
+export type { WeekStart } from '../../utils/date'
+
+export interface CalendarProps {
+  /** Selected date (single mode) */
+  value?: Date | null | undefined
+  /** Range start date (range mode) */
+  rangeStart?: Date | null | undefined
+  /** Range end date (range mode) */
+  rangeEnd?: Date | null | undefined
+  /** Selection mode */
+  mode?: 'single' | 'range' | undefined
+  /** Minimum selectable date */
+  minDate?: Date | undefined
+  /** Maximum selectable date */
+  maxDate?: Date | undefined
+  /** Dates that cannot be selected */
+  disabledDates?: Date[] | ((date: Date) => boolean) | undefined
+  /** First day of week: 0 = Sunday, 1 = Monday */
+  weekStart?: WeekStart | undefined
+  /** Whether to render days outside the current month */
+  showOutsideDays?: boolean | undefined
+  /** Additional class name */
+  className?: string
+  /** Callback when a single date is selected */
+  onChange?: (date: Date) => void
+  /** Callback when a range is completed */
+  onRangeChange?: (start: Date | null, end: Date | null) => void
+}
+
+function Calendar({
+  value,
+  rangeStart: rangeStartProp,
+  rangeEnd: rangeEndProp,
+  mode = 'single',
+  minDate,
+  maxDate,
+  disabledDates,
+  weekStart = 0,
+  showOutsideDays = true,
+  className,
+  onChange,
+  onRangeChange,
+}: CalendarProps) {
+  const today = React.useMemo(() => stripTime(new Date()), [])
+  const initial = value ?? rangeStartProp ?? today
+
+  const [viewYear, setViewYear] = React.useState(initial.getFullYear())
+  const [viewMonth, setViewMonth] = React.useState(initial.getMonth())
+  const [selected, setSelected] = React.useState<Date | null>(value ? stripTime(value) : null)
+  const [internalRangeStart, setInternalRangeStart] = React.useState<Date | null>(
+    rangeStartProp ? stripTime(rangeStartProp) : null
+  )
+  const [internalRangeEnd, setInternalRangeEnd] = React.useState<Date | null>(
+    rangeEndProp ? stripTime(rangeEndProp) : null
+  )
+  const [hoverDate, setHoverDate] = React.useState<Date | null>(null)
+
+  // Sync external props
+  React.useEffect(() => {
+    if (value !== undefined) {
+      setSelected(value ? stripTime(value) : null)
+      if (value) {
+        setViewYear(value.getFullYear())
+        setViewMonth(value.getMonth())
+      }
+    }
+  }, [value])
+
+  React.useEffect(() => {
+    if (rangeStartProp !== undefined)
+      setInternalRangeStart(rangeStartProp ? stripTime(rangeStartProp) : null)
+  }, [rangeStartProp])
+
+  React.useEffect(() => {
+    if (rangeEndProp !== undefined)
+      setInternalRangeEnd(rangeEndProp ? stripTime(rangeEndProp) : null)
+  }, [rangeEndProp])
+
+  const dayLabels = weekStart === 1 ? DAYS_MON : DAYS_SUN
+  const days = React.useMemo(
+    () => buildDayGrid(viewYear, viewMonth, weekStart),
+    [viewYear, viewMonth, weekStart]
+  )
+
+  const isDateDisabled = React.useCallback(
+    (date: Date): boolean => sharedIsDateDisabled(date, minDate, maxDate, disabledDates),
+    [minDate, maxDate, disabledDates]
+  )
+
+  function navigateMonth(delta: number) {
+    setViewMonth(prev => {
+      let m = prev + delta
+      if (m > 11) {
+        m = 0
+        setViewYear(y => y + 1)
+      } else if (m < 0) {
+        m = 11
+        setViewYear(y => y - 1)
+      }
+      return m
+    })
+  }
+
+  function selectDate(date: Date) {
+    const d = stripTime(date)
+    if (mode === 'range') {
+      if (internalRangeStart === null || internalRangeEnd !== null) {
+        setInternalRangeStart(d)
+        setInternalRangeEnd(null)
+      } else {
+        let start = internalRangeStart
+        let end = d
+        if (d < start) {
+          end = start
+          start = d
+        }
+        setInternalRangeStart(start)
+        setInternalRangeEnd(end)
+        onRangeChange?.(start, end)
+      }
+    } else {
+      setSelected(d)
+      onChange?.(d)
+    }
+  }
+
+  function getDayClasses(date: Date): string {
+    const isOutside = date.getMonth() !== viewMonth
+    const disabled = isDateDisabled(date)
+    const isToday = isSameDay(date, today)
+    const rangeEnd = internalRangeEnd ?? hoverDate
+
+    let isSelected = false
+    let isRangeStart = false
+    let isRangeEnd = false
+    let isInRange = false
+
+    if (mode === 'range') {
+      if (internalRangeStart && isSameDay(date, internalRangeStart)) {
+        isRangeStart = true
+        isSelected = true
+      }
+      if (rangeEnd && isSameDay(date, rangeEnd)) {
+        isRangeEnd = true
+        isSelected = true
+      }
+      if (internalRangeStart && rangeEnd && isBetween(date, internalRangeStart, rangeEnd)) {
+        isInRange = true
+      }
+    } else if (selected && isSameDay(date, selected)) {
+      isSelected = true
+    }
+
+    return cn(
+      'inline-flex h-9 w-9 items-center justify-center rounded-lg text-[13px] transition-all duration-200',
+      'hover:bg-glass-hover focus:outline-none focus:border-primary focus:shadow-glow',
+      isOutside && 'text-foreground-muted',
+      isOutside && !showOutsideDays && 'invisible',
+      disabled && 'pointer-events-none opacity-30',
+      isToday && !isSelected && 'border border-primary/50 font-semibold text-primary',
+      isSelected && 'bg-primary text-white font-semibold shadow-glow',
+      isRangeStart && 'rounded-r-none',
+      isRangeEnd && 'rounded-l-none',
+      isInRange && 'bg-primary/15 text-foreground rounded-none'
+    )
+  }
+
+  const weeks = React.useMemo(() => {
+    const result: Date[][] = []
+    for (let i = 0; i < days.length; i += 7) {
+      result.push(days.slice(i, i + 7))
+    }
+    return result
+  }, [days])
+
+  return (
+    <div data-slot="calendar" role="group" className={cn('w-fit', className)}>
+      {/* Header */}
+      <div className="flex items-center justify-between px-1 pb-3">
+        <button
+          type="button"
+          aria-label="Previous month"
+          onClick={() => navigateMonth(-1)}
+          className={cn(
+            'inline-flex h-8 w-8 items-center justify-center rounded-lg transition-all duration-200',
+            'text-foreground-secondary hover:bg-glass-hover hover:text-foreground'
+          )}
+        >
+          <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+            <path
+              d="M10 12L6 8L10 4"
+              stroke="currentColor"
+              strokeWidth="1.5"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+        </button>
+        <span className="text-[13px] font-semibold text-foreground">
+          {MONTHS[viewMonth]} {viewYear}
+        </span>
+        <button
+          type="button"
+          aria-label="Next month"
+          onClick={() => navigateMonth(1)}
+          className={cn(
+            'inline-flex h-8 w-8 items-center justify-center rounded-lg transition-all duration-200',
+            'text-foreground-secondary hover:bg-glass-hover hover:text-foreground'
+          )}
+        >
+          <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+            <path
+              d="M6 4L10 8L6 12"
+              stroke="currentColor"
+              strokeWidth="1.5"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+        </button>
+      </div>
+
+      {/* Day grid */}
+      <div role="grid" className="select-none">
+        {/* Weekday headers */}
+        <div role="row" className="mb-1 grid grid-cols-7 gap-0">
+          {dayLabels.map(label => (
+            <span
+              key={label}
+              role="columnheader"
+              aria-label={label}
+              className="flex h-9 w-9 items-center justify-center text-[11px] font-medium text-foreground-muted"
+            >
+              {label}
+            </span>
+          ))}
+        </div>
+
+        {/* Weeks */}
+        {weeks.map((week, wi) => (
+          <div key={wi} role="row" className="grid grid-cols-7 gap-0">
+            {week.map((day, di) => {
+              const disabled = isDateDisabled(day)
+              return (
+                <button
+                  key={di}
+                  type="button"
+                  role="gridcell"
+                  aria-disabled={disabled || undefined}
+                  aria-selected={
+                    (mode !== 'range' && selected && isSameDay(day, selected)) ||
+                    (mode === 'range' &&
+                      internalRangeStart &&
+                      isSameDay(day, internalRangeStart)) ||
+                    (mode === 'range' && internalRangeEnd && isSameDay(day, internalRangeEnd)) ||
+                    undefined
+                  }
+                  tabIndex={disabled ? -1 : 0}
+                  className={getDayClasses(day)}
+                  onClick={() => !disabled && selectDate(day)}
+                  onMouseEnter={() => mode === 'range' && setHoverDate(day)}
+                  onMouseLeave={() => mode === 'range' && setHoverDate(null)}
+                >
+                  {day.getDate()}
+                </button>
+              )
+            })}
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export { Calendar }

package/src/react/primitives/card.tsx

@@ -0,0 +1,67 @@
+import { forwardRef, type HTMLAttributes } from 'react'
+
+import { cn } from './utils'
+
+export interface CardProps extends HTMLAttributes<HTMLDivElement> {
+  variant?: 'default' | 'glass' | 'solid'
+  glowColor?: 'rose' | 'amber' | 'violet' | 'cyan' | 'none'
+}
+
+const Card = forwardRef<HTMLDivElement, CardProps>(
+  ({ className, variant = 'glass', glowColor = 'none', ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        'relative overflow-hidden rounded-[18px] transition-all duration-300',
+        // Glass variant (default)
+        variant === 'glass' && ['bg-glass backdrop-blur-[20px]', 'border border-transparent'],
+        // Solid variant
+        variant === 'solid' && ['bg-glass-solid backdrop-blur-[40px]', 'border border-transparent'],
+        // Default variant (non-glass)
+        variant === 'default' && ['bg-background-surface', 'border-border-subtle border'],
+        // Glow effects on hover
+        glowColor === 'rose' && 'hover:shadow-glow-rose border-top-rose',
+        glowColor === 'amber' && 'hover:shadow-glow-amber border-top-amber',
+        glowColor === 'violet' && 'hover:shadow-glow-violet border-top-violet',
+        glowColor === 'cyan' && 'hover:shadow-glow-cyan border-top-cyan',
+        // Hover lift effect
+        glowColor !== 'none' && 'hover:-translate-y-1',
+        className
+      )}
+      {...props}
+    />
+  )
+)
+Card.displayName = 'Card'
+
+const CardHeader = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        'border-border-glass flex items-center justify-between border-b px-[22px] py-[18px]',
+        className
+      )}
+      {...props}
+    />
+  )
+)
+CardHeader.displayName = 'CardHeader'
+
+const CardTitle = forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h3
+      ref={ref}
+      className={cn('text-foreground text-[15px] font-semibold tracking-[-0.3px]', className)}
+      {...props}
+    />
+  )
+)
+CardTitle.displayName = 'CardTitle'
+
+const CardBody = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => <div ref={ref} className={cn('p-5', className)} {...props} />
+)
+CardBody.displayName = 'CardBody'
+
+export { Card, CardHeader, CardTitle, CardBody }

package/src/react/primitives/carousel.tsx

@@ -0,0 +1,219 @@
+import { ArrowLeftIcon, ArrowRightIcon } from 'lucide-react'
+import * as React from 'react'
+
+import { cn } from './utils'
+
+type CarouselOrientation = 'horizontal' | 'vertical'
+
+interface CarouselContextValue {
+  orientation: CarouselOrientation
+  canScrollPrev: boolean
+  canScrollNext: boolean
+  scrollPrev: () => void
+  scrollNext: () => void
+  currentIndex: number
+  setSlideCount: (count: number) => void
+}
+
+const CarouselContext = React.createContext<CarouselContextValue | null>(null)
+
+function useCarousel() {
+  const context = React.useContext(CarouselContext)
+  if (!context) {
+    throw new Error('useCarousel must be used within a <Carousel />')
+  }
+  return context
+}
+
+interface CarouselProps extends React.ComponentProps<'div'> {
+  orientation?: CarouselOrientation
+  loop?: boolean
+  autoplay?: boolean
+  autoplayInterval?: number
+}
+
+function Carousel({
+  className,
+  orientation = 'horizontal',
+  loop = false,
+  autoplay = false,
+  autoplayInterval = 5000,
+  children,
+  ...props
+}: CarouselProps) {
+  const [currentIndex, setCurrentIndex] = React.useState(0)
+  const [totalSlides, setTotalSlides] = React.useState(0)
+
+  const canScrollPrev = loop || currentIndex > 0
+  const canScrollNext = loop || currentIndex < totalSlides - 1
+
+  const scrollPrev = React.useCallback(() => {
+    setCurrentIndex(prev => {
+      if (prev > 0) return prev - 1
+      if (loop && totalSlides > 0) return totalSlides - 1
+      return prev
+    })
+  }, [loop, totalSlides])
+
+  const scrollNext = React.useCallback(() => {
+    setCurrentIndex(prev => {
+      if (prev < totalSlides - 1) return prev + 1
+      if (loop) return 0
+      return prev
+    })
+  }, [loop, totalSlides])
+
+  const setSlideCount = React.useCallback((count: number) => {
+    setTotalSlides(count)
+  }, [])
+
+  // Autoplay
+  React.useEffect(() => {
+    if (!autoplay || totalSlides <= 1) return
+
+    const timer = setInterval(() => {
+      scrollNext()
+    }, autoplayInterval)
+
+    return () => clearInterval(timer)
+  }, [autoplay, autoplayInterval, totalSlides, scrollNext])
+
+  // Keyboard navigation
+  const handleKeyDown = React.useCallback(
+    (e: React.KeyboardEvent) => {
+      const prevKey = orientation === 'horizontal' ? 'ArrowLeft' : 'ArrowUp'
+      const nextKey = orientation === 'horizontal' ? 'ArrowRight' : 'ArrowDown'
+
+      if (e.key === prevKey) {
+        e.preventDefault()
+        scrollPrev()
+      } else if (e.key === nextKey) {
+        e.preventDefault()
+        scrollNext()
+      }
+    },
+    [orientation, scrollPrev, scrollNext]
+  )
+
+  const contextValue = React.useMemo(
+    () => ({
+      orientation,
+      canScrollPrev,
+      canScrollNext,
+      scrollPrev,
+      scrollNext,
+      currentIndex,
+      setSlideCount,
+    }),
+    [orientation, canScrollPrev, canScrollNext, scrollPrev, scrollNext, currentIndex, setSlideCount]
+  )
+
+  return (
+    <CarouselContext.Provider value={contextValue}>
+      <div
+        data-slot="carousel"
+        role="region"
+        aria-roledescription="carousel"
+        aria-label="Content carousel"
+        tabIndex={0}
+        onKeyDown={handleKeyDown}
+        className={cn('relative', className)}
+        {...props}
+      >
+        {children}
+      </div>
+    </CarouselContext.Provider>
+  )
+}
+
+function CarouselContent({ className, children, ...props }: React.ComponentProps<'div'>) {
+  const { orientation, currentIndex, setSlideCount } = useCarousel()
+  const childCount = React.Children.count(children)
+
+  React.useEffect(() => {
+    setSlideCount(childCount)
+  }, [childCount, setSlideCount])
+
+  return (
+    <div data-slot="carousel-content" className={cn('overflow-hidden', className)} {...props}>
+      <div
+        className={cn(
+          'flex transition-transform duration-300 ease-in-out',
+          orientation === 'vertical' && 'flex-col'
+        )}
+        style={{
+          transform:
+            orientation === 'horizontal'
+              ? `translateX(-${String(currentIndex * 100)}%)`
+              : `translateY(-${String(currentIndex * 100)}%)`,
+        }}
+      >
+        {children}
+      </div>
+    </div>
+  )
+}
+
+function CarouselItem({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="carousel-item"
+      role="group"
+      aria-roledescription="slide"
+      className={cn('min-w-0 shrink-0 grow-0 basis-full', className)}
+      {...props}
+    />
+  )
+}
+
+function CarouselPrevious({ className, ...props }: React.ComponentProps<'button'>) {
+  const { canScrollPrev, scrollPrev, orientation } = useCarousel()
+
+  return (
+    <button
+      data-slot="carousel-previous"
+      type="button"
+      disabled={!canScrollPrev}
+      onClick={scrollPrev}
+      className={cn(
+        'absolute z-10 flex size-8 items-center justify-center rounded-full border border-border-glass bg-background/80 shadow-sm backdrop-blur-sm transition-all',
+        'hover:bg-accent hover:text-foreground disabled:pointer-events-none disabled:opacity-50',
+        orientation === 'horizontal'
+          ? '-left-12 top-1/2 -translate-y-1/2'
+          : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
+        className
+      )}
+      {...props}
+    >
+      <ArrowLeftIcon className="size-4" />
+      <span className="sr-only">Previous slide</span>
+    </button>
+  )
+}
+
+function CarouselNext({ className, ...props }: React.ComponentProps<'button'>) {
+  const { canScrollNext, scrollNext, orientation } = useCarousel()
+
+  return (
+    <button
+      data-slot="carousel-next"
+      type="button"
+      disabled={!canScrollNext}
+      onClick={scrollNext}
+      className={cn(
+        'absolute z-10 flex size-8 items-center justify-center rounded-full border border-border-glass bg-background/80 shadow-sm backdrop-blur-sm transition-all',
+        'hover:bg-accent hover:text-foreground disabled:pointer-events-none disabled:opacity-50',
+        orientation === 'horizontal'
+          ? '-right-12 top-1/2 -translate-y-1/2'
+          : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
+        className
+      )}
+      {...props}
+    >
+      <ArrowRightIcon className="size-4" />
+      <span className="sr-only">Next slide</span>
+    </button>
+  )
+}
+
+export { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, useCarousel }

package/src/react/primitives/chart-area.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react'
+import { cn } from './utils'
+import { AreaChart as AreaChartImpl } from '../../charts/area/index'
+import type { AreaChartConfig } from '../../charts/area/types'
+import type { ChartSeries } from '../../charts/types'
+
+export interface AreaChartProps extends Omit<AreaChartConfig, 'container'> {
+  className?: string
+}
+
+function AreaChart({ className, ...config }: AreaChartProps) {
+  const containerRef = React.useRef<HTMLDivElement>(null)
+  const chartRef = React.useRef<AreaChartImpl | null>(null)
+
+  React.useEffect(() => {
+    if (!containerRef.current) return
+    chartRef.current = new AreaChartImpl({ ...config, container: containerRef.current })
+    return () => {
+      chartRef.current?.destroy()
+      chartRef.current = null
+    }
+  }, [])
+
+  React.useEffect(() => {
+    if (chartRef.current && config.series) {
+      chartRef.current.update(config.series)
+    }
+  }, [config.series])
+
+  return <div ref={containerRef} data-slot="area-chart" className={cn('w-full', className)} />
+}
+
+export { AreaChart }
+export type { ChartSeries as AreaChartSeries }

package/src/react/primitives/chart-bar.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react'
+import { cn } from './utils'
+import { BarChart as BarChartImpl } from '../../charts/bar/index'
+import type { BarChartConfig } from '../../charts/bar/types'
+import type { ChartSeries } from '../../charts/types'
+
+export interface BarChartProps extends Omit<BarChartConfig, 'container'> {
+  className?: string
+}
+
+function BarChart({ className, ...config }: BarChartProps) {
+  const containerRef = React.useRef<HTMLDivElement>(null)
+  const chartRef = React.useRef<BarChartImpl | null>(null)
+
+  React.useEffect(() => {
+    if (!containerRef.current) return
+    chartRef.current = new BarChartImpl({ ...config, container: containerRef.current })
+    return () => {
+      chartRef.current?.destroy()
+      chartRef.current = null
+    }
+  }, [])
+
+  React.useEffect(() => {
+    if (chartRef.current && config.series) {
+      chartRef.current.update(config.series)
+    }
+  }, [config.series])
+
+  return <div ref={containerRef} data-slot="bar-chart" className={cn('w-full', className)} />
+}
+
+export { BarChart }
+export type { ChartSeries as BarChartSeries }

package/src/react/primitives/chart-candlestick.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react'
+import { cn } from './utils'
+import { CandlestickChart as CandlestickChartImpl } from '../../charts/candlestick/index'
+import type { CandlestickChartConfig, CandlestickItem } from '../../charts/candlestick/types'
+
+export interface CandlestickChartProps extends Omit<CandlestickChartConfig, 'container'> {
+  className?: string
+}
+
+function CandlestickChart({ className, ...config }: CandlestickChartProps) {
+  const containerRef = React.useRef<HTMLDivElement>(null)
+  const chartRef = React.useRef<CandlestickChartImpl | null>(null)
+
+  React.useEffect(() => {
+    if (!containerRef.current) return
+    chartRef.current = new CandlestickChartImpl({ ...config, container: containerRef.current })
+    return () => {
+      chartRef.current?.destroy()
+      chartRef.current = null
+    }
+  }, [])
+
+  React.useEffect(() => {
+    if (chartRef.current && config.data) {
+      chartRef.current.update(config.data)
+    }
+  }, [config.data])
+
+  return (
+    <div ref={containerRef} data-slot="candlestick-chart" className={cn('w-full', className)} />
+  )
+}
+
+export { CandlestickChart }
+export type { CandlestickItem }