@otfdashkit/ui 0.1.0

package/src/data/Filters.tsx

@@ -0,0 +1,271 @@
+'use client'
+
+import React, { createContext, useCallback, useContext, useState } from 'react'
+import { Plus, X, Filter } from 'lucide-react'
+import { cn } from '../utils/cn'
+
+// ── Types ────────────────────────────────────────────────────────
+
+export interface FilterDef {
+  key: string
+  label: string
+  type: 'text' | 'select' | 'date' | 'number'
+  options?: Array<{ label: string; value: string }>
+}
+
+export interface FilterValue {
+  id: string
+  key: string
+  operator: string
+  value: string
+}
+
+const TEXT_OPS = ['contains', 'equals', 'starts with', 'ends with'] as const
+const NUM_OPS  = ['=', '!=', '>', '<', '>=', '<='] as const
+
+// ── Context ──────────────────────────────────────────────────────
+
+interface FiltersContextValue {
+  filters: FilterDef[]
+  activeFilters: FilterValue[]
+  addFilter: (filter: Omit<FilterValue, 'id'>) => void
+  removeFilter: (id: string) => void
+  clearFilters: () => void
+  updateFilter: (id: string, patch: Partial<Omit<FilterValue, 'id'>>) => void
+}
+
+const FiltersCtx = createContext<FiltersContextValue>({
+  filters: [],
+  activeFilters: [],
+  addFilter: () => {},
+  removeFilter: () => {},
+  clearFilters: () => {},
+  updateFilter: () => {},
+})
+
+export function useFilters() {
+  return useContext(FiltersCtx)
+}
+
+// ── Provider ─────────────────────────────────────────────────────
+
+export interface FiltersProviderProps {
+  filters: FilterDef[]
+  children: React.ReactNode
+  /** Optional initial filters */
+  initialFilters?: FilterValue[]
+  /** Called whenever active filters change */
+  onChange?: (filters: FilterValue[]) => void
+}
+
+let _filterId = 0
+function nextId() { return `f-${++_filterId}` }
+
+export function FiltersProvider({
+  filters,
+  children,
+  initialFilters = [],
+  onChange,
+}: FiltersProviderProps) {
+  const [activeFilters, setActiveFilters] = useState<FilterValue[]>(initialFilters)
+
+  const set = useCallback((next: FilterValue[]) => {
+    setActiveFilters(next)
+    onChange?.(next)
+  }, [onChange])
+
+  const addFilter = useCallback((f: Omit<FilterValue, 'id'>) => {
+    set([...activeFilters, { ...f, id: nextId() }])
+  }, [activeFilters, set])
+
+  const removeFilter = useCallback((id: string) => {
+    set(activeFilters.filter((f) => f.id !== id))
+  }, [activeFilters, set])
+
+  const clearFilters = useCallback(() => set([]), [set])
+
+  const updateFilter = useCallback(
+    (id: string, patch: Partial<Omit<FilterValue, 'id'>>) => {
+      set(activeFilters.map((f) => f.id === id ? { ...f, ...patch } : f))
+    },
+    [activeFilters, set]
+  )
+
+  return (
+    <FiltersCtx.Provider value={{ filters, activeFilters, addFilter, removeFilter, clearFilters, updateFilter }}>
+      {children}
+    </FiltersCtx.Provider>
+  )
+}
+
+// ── AddFilterButton ──────────────────────────────────────────────
+
+export function AddFilterButton({ className }: { className?: string }) {
+  const { filters, addFilter } = useFilters()
+  const [open, setOpen] = useState(false)
+  const [key, setKey] = useState('')
+  const [op, setOp] = useState('')
+  const [val, setVal] = useState('')
+
+  const def = filters.find((f) => f.key === key)
+  const ops = def?.type === 'number' ? NUM_OPS : TEXT_OPS
+
+  const handleAdd = () => {
+    if (!key || !val) return
+    addFilter({ key, operator: op || ops[0]!, value: val })
+    setKey(''); setOp(''); setVal('')
+    setOpen(false)
+  }
+
+  const handleKey = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') handleAdd()
+    if (e.key === 'Escape') setOpen(false)
+  }
+
+  return (
+    <div className="relative">
+      <button
+        onClick={() => setOpen((v) => !v)}
+        className={cn(
+          'inline-flex items-center gap-1.5 rounded-md border border-border px-2.5 py-1.5 text-xs font-medium',
+          'bg-transparent text-muted-foreground hover:bg-accent hover:text-accent-foreground',
+          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring transition-colors',
+          className
+        )}
+      >
+        <Plus className="h-3.5 w-3.5" />
+        Add filter
+      </button>
+
+      {open && (
+        <>
+          <div className="fixed inset-0 z-10" onClick={() => setOpen(false)} />
+          <div className="absolute left-0 top-full mt-1 z-20 w-72 rounded-md border border-border bg-popover shadow-lg p-3 space-y-2">
+            {/* Field selector */}
+            <select
+              value={key}
+              onChange={(e) => { setKey(e.target.value); setOp(''); setVal('') }}
+              className="w-full rounded-md border border-input bg-transparent px-2.5 py-1.5 text-xs focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            >
+              <option value="">Select field…</option>
+              {filters.map((f) => (
+                <option key={f.key} value={f.key}>{f.label}</option>
+              ))}
+            </select>
+
+            {/* Operator selector */}
+            {key && (
+              <select
+                value={op || ops[0]}
+                onChange={(e) => setOp(e.target.value)}
+                className="w-full rounded-md border border-input bg-transparent px-2.5 py-1.5 text-xs focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              >
+                {ops.map((o) => <option key={o} value={o}>{o}</option>)}
+              </select>
+            )}
+
+            {/* Value input */}
+            {key && def?.type === 'select' ? (
+              <select
+                value={val}
+                onChange={(e) => setVal(e.target.value)}
+                className="w-full rounded-md border border-input bg-transparent px-2.5 py-1.5 text-xs focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              >
+                <option value="">Select value…</option>
+                {def.options?.map((o) => (
+                  <option key={o.value} value={o.value}>{o.label}</option>
+                ))}
+              </select>
+            ) : key ? (
+              <input
+                type={def?.type === 'number' ? 'number' : def?.type === 'date' ? 'date' : 'text'}
+                value={val}
+                onChange={(e) => setVal(e.target.value)}
+                onKeyDown={handleKey}
+                placeholder="Value…"
+                className="w-full rounded-md border border-input bg-transparent px-2.5 py-1.5 text-xs focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              />
+            ) : null}
+
+            <button
+              onClick={handleAdd}
+              disabled={!key || !val}
+              className={cn(
+                'w-full rounded-md px-3 py-1.5 text-xs font-medium transition-colors',
+                'bg-primary text-primary-foreground hover:bg-primary/90',
+                'disabled:pointer-events-none disabled:opacity-50'
+              )}
+            >
+              Apply filter
+            </button>
+          </div>
+        </>
+      )}
+    </div>
+  )
+}
+
+// ── ActiveFiltersList ────────────────────────────────────────────
+
+export interface ActiveFiltersListProps {
+  className?: string
+}
+
+export function ActiveFiltersList({ className }: ActiveFiltersListProps) {
+  const { filters, activeFilters, removeFilter, clearFilters } = useFilters()
+
+  if (activeFilters.length === 0) return null
+
+  return (
+    <div
+      data-slot="active-filters"
+      className={cn('flex flex-wrap items-center gap-1.5', className)}
+    >
+      <span className="flex items-center gap-1 text-xs text-muted-foreground">
+        <Filter className="h-3 w-3" />
+        Filters:
+      </span>
+
+      {activeFilters.map((f) => {
+        const def = filters.find((fd) => fd.key === f.key)
+        return (
+          <span
+            key={f.id}
+            className="inline-flex items-center gap-1 rounded-full border border-border bg-muted px-2.5 py-0.5 text-xs font-medium text-foreground"
+          >
+            <span className="text-muted-foreground">{def?.label ?? f.key}</span>
+            <span className="text-muted-foreground">{f.operator}</span>
+            <span className="font-semibold">{f.value}</span>
+            <button
+              onClick={() => removeFilter(f.id)}
+              className="ml-0.5 rounded-full hover:text-destructive transition-colors"
+              aria-label={`Remove ${def?.label ?? f.key} filter`}
+            >
+              <X className="h-3 w-3" />
+            </button>
+          </span>
+        )
+      })}
+
+      {activeFilters.length > 1 && (
+        <button
+          onClick={clearFilters}
+          className="text-xs text-muted-foreground hover:text-foreground transition-colors underline-offset-2 hover:underline"
+        >
+          Clear all
+        </button>
+      )}
+    </div>
+  )
+}
+
+// ── FiltersBar — convenience composite ──────────────────────────
+
+export function FiltersBar({ className }: { className?: string }) {
+  return (
+    <div className={cn('flex flex-wrap items-center gap-2', className)}>
+      <AddFilterButton />
+      <ActiveFiltersList />
+    </div>
+  )
+}

package/src/data/GridList.tsx

@@ -0,0 +1,67 @@
+'use client'
+
+import React from 'react'
+import { cn } from '../utils/cn'
+
+/**
+ * GridList — fluid responsive grid using CSS grid auto-fill + minmax.
+ * Columns reflow automatically based on `minItemWidth`; no breakpoints.
+ * Per OTF UX rule: never hard-code fixed-breakpoint columns.
+ */
+
+export interface GridListProps extends React.HTMLAttributes<HTMLUListElement> {
+  /** Minimum width per item (px). Columns fill to that, then reflow. */
+  minItemWidth?: number
+  /** Gap between items in rem (default 1 = 16px) */
+  gap?: number
+}
+
+export const GridList = React.forwardRef<HTMLUListElement, GridListProps>(
+  ({ minItemWidth = 240, gap = 1, className, style, ...props }, ref) => (
+    <ul
+      ref={ref}
+      data-slot="grid-list"
+      className={cn('grid list-none p-0 m-0', className)}
+      style={{
+        gridTemplateColumns: `repeat(auto-fill, minmax(min(100%, ${minItemWidth}px), 1fr))`,
+        gap: `${gap}rem`,
+        ...style,
+      }}
+      {...props}
+    />
+  )
+)
+GridList.displayName = 'GridList'
+
+export interface GridListItemProps extends React.LiHTMLAttributes<HTMLLIElement> {
+  interactive?: boolean
+  onSelect?: () => void
+}
+
+export const GridListItem = React.forwardRef<HTMLLIElement, GridListItemProps>(
+  ({ interactive, onSelect, className, ...props }, ref) => {
+    const clickable = interactive || !!onSelect
+    return (
+      <li
+        ref={ref}
+        data-slot="grid-list-item"
+        role={clickable ? 'button' : undefined}
+        tabIndex={clickable ? 0 : undefined}
+        onClick={onSelect}
+        onKeyDown={(e) => {
+          if (clickable && (e.key === 'Enter' || e.key === ' ')) {
+            e.preventDefault()
+            onSelect?.()
+          }
+        }}
+        className={cn(
+          'rounded-lg border border-border bg-card p-4 transition-colors',
+          clickable && 'cursor-pointer hover:bg-accent hover:border-primary/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+          className
+        )}
+        {...props}
+      />
+    )
+  }
+)
+GridListItem.displayName = 'GridListItem'

package/src/data/ImageCrop.tsx

@@ -0,0 +1,198 @@
+'use client'
+
+import React from 'react'
+import ReactCrop, {
+  type Crop,
+  type PixelCrop,
+  centerCrop,
+  makeAspectCrop,
+} from 'react-image-crop'
+import 'react-image-crop/dist/ReactCrop.css'
+import { cn } from '../utils/cn'
+
+export type { Crop, PixelCrop } from 'react-image-crop'
+
+export type ImageCropProps = Omit<
+  React.HTMLAttributes<HTMLDivElement>,
+  'onComplete'
+> & {
+  /** Image URL — required. */
+  src: string
+  /** Optional aspect-ratio lock, e.g. 16/9, 1, 4/3. */
+  aspect?: number
+  /** Minimum crop width in pixels. */
+  minWidth?: number
+  /** Minimum crop height in pixels. */
+  minHeight?: number
+  /** Initial crop in % values. */
+  defaultCrop?: { x: number; y: number; width: number; height: number }
+  /** Render a circular crop mask (for avatars). Default false. */
+  circular?: boolean
+  /** Fired (debounced) after a drag with the cropped data URL + pixel crop. */
+  onComplete?: (result: { croppedSrc: string; crop: PixelCrop }) => void
+  /** Output image format. Default 'png'. */
+  outputFormat?: 'png' | 'jpeg' | 'webp'
+  /** Output image quality 0..1 (jpeg/webp only). Default 0.92. */
+  outputQuality?: number
+  /** Alt text for the source image. */
+  alt?: string
+}
+
+const DEBOUNCE_MS = 200
+
+function buildDefaultCrop(
+  defaultCrop: ImageCropProps['defaultCrop'],
+  aspect: number | undefined,
+  imgWidth: number,
+  imgHeight: number,
+): Crop {
+  if (defaultCrop) {
+    return {
+      unit: '%',
+      x: defaultCrop.x,
+      y: defaultCrop.y,
+      width: defaultCrop.width,
+      height: defaultCrop.height,
+    }
+  }
+  if (aspect) {
+    return centerCrop(
+      makeAspectCrop({ unit: '%', width: 80 }, aspect, imgWidth, imgHeight),
+      imgWidth,
+      imgHeight,
+    )
+  }
+  return { unit: '%', x: 10, y: 10, width: 80, height: 80 }
+}
+
+async function extractCroppedDataUrl(
+  image: HTMLImageElement,
+  crop: PixelCrop,
+  format: 'png' | 'jpeg' | 'webp',
+  quality: number,
+): Promise<string> {
+  const scaleX = image.naturalWidth / image.width
+  const scaleY = image.naturalHeight / image.height
+  const canvas = document.createElement('canvas')
+  canvas.width = Math.max(1, Math.round(crop.width * scaleX))
+  canvas.height = Math.max(1, Math.round(crop.height * scaleY))
+  const ctx = canvas.getContext('2d')
+  if (!ctx) return ''
+  ctx.imageSmoothingQuality = 'high'
+  ctx.drawImage(
+    image,
+    crop.x * scaleX,
+    crop.y * scaleY,
+    crop.width * scaleX,
+    crop.height * scaleY,
+    0,
+    0,
+    canvas.width,
+    canvas.height,
+  )
+  const mime =
+    format === 'jpeg' ? 'image/jpeg' : format === 'webp' ? 'image/webp' : 'image/png'
+  return canvas.toDataURL(mime, quality)
+}
+
+/**
+ * Drag-to-crop image utility built on `react-image-crop`.
+ * Supports aspect-ratio lock, circular masking, and emits a base64 data URL
+ * of the cropped region via `onComplete` (debounced 200ms).
+ */
+export const ImageCrop = React.forwardRef<HTMLDivElement, ImageCropProps>(
+  (
+    {
+      src,
+      aspect,
+      minWidth,
+      minHeight,
+      defaultCrop,
+      circular = false,
+      onComplete,
+      outputFormat = 'png',
+      outputQuality = 0.92,
+      alt = 'Crop source',
+      className,
+      ...props
+    },
+    ref,
+  ) => {
+    const [crop, setCrop] = React.useState<Crop | undefined>(undefined)
+    const imgRef = React.useRef<HTMLImageElement | null>(null)
+    const timerRef = React.useRef<ReturnType<typeof setTimeout> | null>(null)
+
+    React.useEffect(() => {
+      // Reset when src changes so the next image initializes its own crop.
+      setCrop(undefined)
+    }, [src])
+
+    React.useEffect(() => {
+      return () => {
+        if (timerRef.current) clearTimeout(timerRef.current)
+      }
+    }, [])
+
+    const onImageLoad = (e: React.SyntheticEvent<HTMLImageElement>) => {
+      const { width, height } = e.currentTarget
+      setCrop(buildDefaultCrop(defaultCrop, aspect, width, height))
+    }
+
+    const handleComplete = (pixelCrop: PixelCrop) => {
+      if (!onComplete || !imgRef.current) return
+      if (pixelCrop.width === 0 || pixelCrop.height === 0) return
+      if (timerRef.current) clearTimeout(timerRef.current)
+      timerRef.current = setTimeout(async () => {
+        const img = imgRef.current
+        if (!img) return
+        const croppedSrc = await extractCroppedDataUrl(
+          img,
+          pixelCrop,
+          outputFormat,
+          outputQuality,
+        )
+        onComplete({ croppedSrc, crop: pixelCrop })
+      }, DEBOUNCE_MS)
+    }
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          'inline-flex items-center justify-center rounded-md border border-border bg-card p-2 text-foreground',
+          // ReactCrop CSS overrides — match our tokens
+          '[&_.ReactCrop\\_\\_crop-selection]:border-foreground',
+          '[&_.ReactCrop\\_\\_drag-handle::after]:bg-foreground',
+          '[&_.ReactCrop\\_\\_drag-handle::after]:border-background',
+          circular &&
+            '[&_.ReactCrop\\_\\_crop-selection]:[mask-image:radial-gradient(circle,black_99%,transparent_100%)]',
+          className,
+        )}
+        {...props}
+      >
+        <ReactCrop
+          crop={crop}
+          onChange={(_, percentCrop) => setCrop(percentCrop)}
+          onComplete={handleComplete}
+          aspect={aspect}
+          minWidth={minWidth}
+          minHeight={minHeight}
+          circularCrop={circular}
+          keepSelection
+          className="max-w-full"
+        >
+          <img
+            ref={imgRef}
+            src={src}
+            alt={alt}
+            onLoad={onImageLoad}
+            className="block max-h-[70vh] w-auto select-none"
+            draggable={false}
+            crossOrigin="anonymous"
+          />
+        </ReactCrop>
+      </div>
+    )
+  },
+)
+ImageCrop.displayName = 'ImageCrop'