@fastnd/components 1.0.30 → 1.0.32

package/dist/examples/data-explorer/DataExplorerPagination/DataExplorerPagination.tsx

@@ -1,129 +0,0 @@
-import {
-  Pagination,
-  PaginationContent,
-  PaginationEllipsis,
-  PaginationItem,
-  PaginationLink,
-  PaginationNext,
-  PaginationPrevious,
-} from '@/components/ui/pagination'
-import { NativeSelect, NativeSelectOption } from '@/components/ui/native-select'
-import { cn } from '@/lib/utils'
-
-export interface DataExplorerPaginationProps {
-  currentPage: number
-  totalPages: number
-  pageSize: number
-  totalFiltered: number
-  totalData: number
-  onPageChange: (page: number) => void
-  onPageSizeChange: (size: number) => void
-  className?: string
-}
-
-const PAGE_SIZES = [25, 50, 100] as const
-
-function getPageRange(current: number, total: number): (number | '...')[] {
-  if (total <= 7) {
-    return Array.from({ length: total }, (_, i) => i + 1)
-  }
-  if (current <= 4) {
-    return [1, 2, 3, 4, 5, '...', total]
-  }
-  if (current >= total - 3) {
-    return [1, '...', total - 4, total - 3, total - 2, total - 1, total]
-  }
-  return [1, '...', current - 1, current, current + 1, '...', total]
-}
-
-export function DataExplorerPagination({
-  currentPage,
-  totalPages,
-  pageSize,
-  totalFiltered,
-  onPageChange,
-  onPageSizeChange,
-  className,
-}: DataExplorerPaginationProps) {
-  const startItem = totalFiltered === 0 ? 0 : (currentPage - 1) * pageSize + 1
-  const endItem = Math.min(currentPage * pageSize, totalFiltered)
-  const pageRange = getPageRange(currentPage, totalPages)
-  const atFirst = currentPage <= 1
-  const atLast = currentPage >= totalPages
-
-  return (
-    <nav
-      data-slot="data-explorer-pagination"
-      aria-label="Seitennavigation"
-      className={cn('flex flex-wrap items-center justify-between gap-3 px-4 py-3', className)}
-    >
-      {/* Left: result range + page size select */}
-      <div className="flex items-center gap-3 text-sm text-muted-foreground">
-        <span>
-          {startItem}–{endItem} von {totalFiltered} Ergebnissen
-        </span>
-        <div className="flex items-center gap-1.5">
-          <span className="text-xs">Zeilen:</span>
-          <NativeSelect
-            size="sm"
-            value={pageSize}
-            onChange={(e) => onPageSizeChange(Number(e.target.value))}
-            aria-label="Einträge pro Seite"
-            className="w-auto"
-          >
-            {PAGE_SIZES.map((s) => (
-              <NativeSelectOption key={s} value={s}>
-                {s}
-              </NativeSelectOption>
-            ))}
-          </NativeSelect>
-        </div>
-      </div>
-
-      {/* Right: page navigation */}
-      <Pagination className="w-auto mx-0 justify-end">
-        <PaginationContent>
-          <PaginationItem>
-            <PaginationPrevious
-              role="button"
-              aria-disabled={atFirst}
-              className={cn(atFirst && 'pointer-events-none opacity-50')}
-              onClick={atFirst ? undefined : () => onPageChange(currentPage - 1)}
-            />
-          </PaginationItem>
-
-          {pageRange.map((page, idx) =>
-            page === '...' ? (
-              <PaginationItem key={`ellipsis-${idx}`}>
-                <PaginationEllipsis />
-              </PaginationItem>
-            ) : (
-              <PaginationItem key={page}>
-                <PaginationLink
-                  role="button"
-                  isActive={page === currentPage}
-                  onClick={() => onPageChange(page)}
-                  aria-label={`Seite ${page}`}
-                  className={page === currentPage ? 'bg-primary text-primary-foreground border-primary hover:bg-primary/90 hover:text-primary-foreground' : ''}
-                >
-                  {page}
-                </PaginationLink>
-              </PaginationItem>
-            ),
-          )}
-
-          <PaginationItem>
-            <PaginationNext
-              role="button"
-              aria-disabled={atLast}
-              className={cn(atLast && 'pointer-events-none opacity-50')}
-              onClick={atLast ? undefined : () => onPageChange(currentPage + 1)}
-            />
-          </PaginationItem>
-        </PaginationContent>
-      </Pagination>
-    </nav>
-  )
-}
-
-DataExplorerPagination.displayName = 'DataExplorerPagination'

package/dist/examples/data-explorer/DataExplorerToolbar/DataExplorerToolbar.tsx

@@ -1,143 +0,0 @@
-import * as React from 'react'
-import { LayoutGrid, List, RotateCcw, Search, Table } from 'lucide-react'
-import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
-import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'
-import { ColumnConfigPopover } from '../ColumnConfigPopover/ColumnConfigPopover'
-import { FilterChip } from '../FilterChip/FilterChip'
-import { MoreFiltersPopover } from '../MoreFiltersPopover/MoreFiltersPopover'
-import type { DataExplorerActions, DataExplorerDerived, DataExplorerState } from '../types'
-import { cn } from '@/lib/utils'
-
-export interface DataExplorerToolbarProps {
-  state: DataExplorerState
-  derived: DataExplorerDerived
-  actions: DataExplorerActions
-  className?: string
-}
-
-export function DataExplorerToolbar({
-  state,
-  derived,
-  actions,
-  className,
-}: DataExplorerToolbarProps) {
-  const secondaryFilterCount = React.useMemo(
-    () =>
-      derived.secondaryFilterColumns.reduce(
-        (acc, [key]) => acc + (state.filters[key]?.length ?? 0),
-        0,
-      ),
-    [derived.secondaryFilterColumns, state.filters],
-  )
-
-  return (
-    <div
-      data-slot="data-explorer-toolbar"
-      role="toolbar"
-      aria-label="Daten-Toolbar"
-      className={cn('flex flex-col gap-3 border-b bg-card px-6 py-4', className)}
-    >
-      {/* Row 1: View switcher + column config */}
-      <div className="flex items-center justify-between gap-2">
-        <ToggleGroup
-          type="single"
-          value={state.viewMode}
-          onValueChange={(v) => v && actions.switchView(v as DataExplorerState['viewMode'])}
-          variant="outline"
-          size="sm"
-        >
-          <ToggleGroupItem
-            value="table"
-            aria-label="Tabellenansicht"
-            className="gap-1.5 data-[state=on]:bg-primary data-[state=on]:text-primary-foreground data-[state=on]:border-primary"
-          >
-            <Table className="size-3.5" />
-            <span className="hidden sm:inline">Tabelle</span>
-          </ToggleGroupItem>
-          <ToggleGroupItem
-            value="list"
-            aria-label="Listenansicht"
-            className="gap-1.5 data-[state=on]:bg-primary data-[state=on]:text-primary-foreground data-[state=on]:border-primary"
-          >
-            <List className="size-3.5" />
-            <span className="hidden sm:inline">Liste</span>
-          </ToggleGroupItem>
-          <ToggleGroupItem
-            value="card"
-            aria-label="Kartenansicht"
-            className="gap-1.5 data-[state=on]:bg-primary data-[state=on]:text-primary-foreground data-[state=on]:border-primary"
-          >
-            <LayoutGrid className="size-3.5" />
-            <span className="hidden sm:inline">Karten</span>
-          </ToggleGroupItem>
-        </ToggleGroup>
-
-        <ColumnConfigPopover
-          columns={derived.domainConfig.columns}
-          columnOrder={state.columnOrder}
-          columnVisibility={state.columnVisibility}
-          onToggleVisibility={actions.toggleColumnVisibility}
-          onReorder={actions.reorderColumns}
-        />
-      </div>
-
-      {/* Row 2: Filter chips + search */}
-      <div className="flex flex-wrap items-center gap-2">
-        {/* Primary filter chips */}
-        {derived.primaryFilterColumns.map(([key, col]) => (
-          <FilterChip
-            key={key}
-            columnKey={key}
-            label={col.label}
-            selectedValues={state.filters[key] ?? []}
-            options={derived.getFilterOptions(key)}
-            onToggleOption={(value) => actions.toggleFilterOption(key, value)}
-            onClear={() => actions.clearFilter(key)}
-          />
-        ))}
-
-        {/* More filters */}
-        {derived.secondaryFilterColumns.length > 0 && (
-          <MoreFiltersPopover
-            columns={derived.secondaryFilterColumns}
-            filters={state.filters}
-            getFilterOptions={derived.getFilterOptions}
-            onToggleOption={actions.toggleFilterOption}
-            onResetSecondary={actions.resetSecondaryFilters}
-            totalSecondaryCount={secondaryFilterCount}
-          />
-        )}
-
-        {/* Reset all */}
-        {derived.hasActiveFilters && (
-          <Button
-            variant="ghost"
-            size="sm"
-            onClick={actions.resetAllFilters}
-            aria-label="Alle Filter zurücksetzen"
-            className="h-8 gap-1.5 text-sm text-muted-foreground hover:text-destructive"
-          >
-            <RotateCcw className="size-3.5" />
-            <span>Zurücksetzen</span>
-          </Button>
-        )}
-
-        {/* Search input — pushed to the right */}
-        <div className="relative ml-auto min-w-[180px] max-w-xs flex-1">
-          <Search className="absolute left-2.5 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground" />
-          <Input
-            type="search"
-            value={state.searchTerm}
-            onChange={(e) => actions.setSearchTerm(e.target.value)}
-            placeholder="Suchen..."
-            aria-label="Datensätze durchsuchen"
-            className="h-8 pl-8 text-sm"
-          />
-        </div>
-      </div>
-    </div>
-  )
-}
-
-DataExplorerToolbar.displayName = 'DataExplorerToolbar'

package/dist/examples/data-explorer/DomainSwitcher/DomainSwitcher.tsx

@@ -1,36 +0,0 @@
-import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'
-import { DOMAIN_KEYS, DOMAIN_LABELS } from '../domains'
-import type { DomainKey } from '../types'
-import { cn } from '@/lib/utils'
-
-export interface DomainSwitcherProps {
-  activeDomain: DomainKey
-  onDomainChange: (domain: DomainKey) => void
-  className?: string
-}
-
-export function DomainSwitcher({ activeDomain, onDomainChange, className }: DomainSwitcherProps) {
-  return (
-    <nav data-slot="domain-switcher" className={cn('border-b bg-card', className)}>
-      <Tabs
-        value={activeDomain}
-        onValueChange={(v) => onDomainChange(v as DomainKey)}
-        className="px-6"
-      >
-        <TabsList variant="line" className="h-auto gap-0 rounded-none p-0">
-          {DOMAIN_KEYS.map((key) => (
-            <TabsTrigger
-              key={key}
-              value={key}
-              className="rounded-none px-5 py-3 text-sm font-medium data-[state=active]:font-semibold data-[state=active]:text-primary data-[state=active]:after:bg-primary"
-            >
-              {DOMAIN_LABELS[key]}
-            </TabsTrigger>
-          ))}
-        </TabsList>
-      </Tabs>
-    </nav>
-  )
-}
-
-DomainSwitcher.displayName = 'DomainSwitcher'

package/dist/examples/data-explorer/ExpansionRows/ExpansionRows.tsx

@@ -1,180 +0,0 @@
-import { Plus } from 'lucide-react'
-import { cn } from '@/lib/utils'
-import { Badge } from '@/components/ui/badge'
-import { Button } from '@/components/ui/button'
-import { TableCell, TableRow } from '@/components/ui/table'
-import { ScoreBar } from '../cells'
-import type { ColumnDef } from '../types'
-
-interface ExpansionRowsProps {
-  row: Record<string, unknown>
-  columnKey: string
-  column: ColumnDef
-  visibleColumns: string[]
-  columns: Record<string, ColumnDef>
-  colSpan: number
-  className?: string
-}
-
-const ExpansionRows = ({
-  row,
-  columnKey,
-  column,
-  visibleColumns,
-  columns,
-  colSpan,
-  className,
-}: ExpansionRowsProps) => {
-  const items = row[columnKey]
-
-  if (!Array.isArray(items) || items.length === 0 || !column.expandColumns) {
-    return null
-  }
-
-  // Build a lookup: mainColumnKey -> expandColumnDef for all expand columns that map to a visible column
-  const mapLookup: Record<string, (typeof column.expandColumns)[number]> = {}
-  for (const ec of column.expandColumns) {
-    if (ec.mapTo) {
-      mapLookup[ec.mapTo] = ec
-    }
-  }
-
-  const title = column.expandTitleFn ? column.expandTitleFn(row) : (column.expandLabel ?? columnKey)
-
-  return (
-    <>
-      {/* Title row spanning all columns */}
-      <TableRow
-        data-slot="expansion-title-row"
-        className={cn('bg-secondary hover:bg-secondary border-b-0', className)}
-      >
-        <TableCell colSpan={colSpan} className="text-[11px] font-semibold uppercase tracking-wide px-3 py-2">
-          <div className="flex items-center gap-2">
-            <span>{title}</span>
-            <Badge variant="secondary" className="text-xs tabular-nums">
-              {items.length}
-            </Badge>
-          </div>
-        </TableCell>
-      </TableRow>
-
-      {/* One data row per nested item */}
-      {(items as Record<string, unknown>[]).map((item, idx) => (
-        <TableRow
-          key={idx}
-          data-slot="expansion-data-row"
-          className="bg-accent hover:bg-primary/[0.04]"
-        >
-          {visibleColumns.map((mainKey) => {
-            const mainCol = columns[mainKey]
-            const cellClasses = cn(
-              mainCol?.hideMobile && 'hidden sm:table-cell',
-              mainCol?.hideTablet && 'hidden lg:table-cell',
-            )
-
-            // The expand column itself: render the add button
-            if (mainKey === columnKey) {
-              return (
-                <TableCell key={mainKey} className={cn('px-3 py-2 text-[13px]', cellClasses)}>
-                  <Button
-                    variant="ghost"
-                    size="icon-xs"
-                    aria-label="Hinzufügen"
-                    onClick={(e) => e.preventDefault()}
-                  >
-                    <Plus />
-                  </Button>
-                </TableCell>
-              )
-            }
-
-            // A column that an expand column maps into
-            const ec = mapLookup[mainKey]
-            if (ec) {
-              const value = item[ec.key]
-
-              if (ec.type === 'score-bar') {
-                return (
-                  <TableCell key={mainKey} className={cn('px-3 py-2 text-[13px]', cellClasses)}>
-                    <ScoreBar value={typeof value === 'number' ? value : 0} />
-                  </TableCell>
-                )
-              }
-
-              // Delegate rendering to the main column type for structural fidelity
-              if (mainCol?.type === 'double-text' && ec.secondaryKey) {
-                const secondary = item[ec.secondaryKey]
-                return (
-                  <TableCell key={mainKey} className={cn('px-3 py-2 text-[13px]', cellClasses)}>
-                    <div className={cn('flex flex-col', ec.bold && 'font-medium')}>
-                      <span className="text-sm">{value != null ? String(value) : ''}</span>
-                      {secondary != null && (
-                        <span className="text-xs text-muted-foreground">{String(secondary)}</span>
-                      )}
-                    </div>
-                  </TableCell>
-                )
-              }
-
-              if (mainCol?.type === 'status-badge' && mainCol.statusMap && value != null) {
-                const statusKey = mainCol.statusMap[String(value)] ?? 'default'
-                return (
-                  <TableCell key={mainKey} className={cn('px-3 py-2 text-[13px]', cellClasses)}>
-                    <Badge variant="secondary" data-status={statusKey}>
-                      {String(value)}
-                    </Badge>
-                  </TableCell>
-                )
-              }
-
-              if (mainCol?.type === 'link') {
-                return (
-                  <TableCell key={mainKey} className={cn('px-3 py-2 text-[13px]', cellClasses)}>
-                    <a
-                      href="#"
-                      className="text-sm text-primary underline-offset-2 hover:underline"
-                      onClick={(e) => e.preventDefault()}
-                    >
-                      {value != null ? String(value) : ''}
-                    </a>
-                  </TableCell>
-                )
-              }
-
-              const displayValue =
-                typeof value === 'boolean'
-                  ? value
-                    ? 'Ja'
-                    : 'Nein'
-                  : value != null
-                    ? String(value)
-                    : ''
-
-              return (
-                <TableCell key={mainKey} className={cn('px-3 py-2 text-[13px]', cellClasses)}>
-                  <span
-                    className={cn(
-                      'text-sm',
-                      ec.bold && 'font-medium',
-                      ec.muted && 'text-muted-foreground',
-                    )}
-                  >
-                    {displayValue}
-                  </span>
-                </TableCell>
-              )
-            }
-
-            // No mapping — render empty cell to maintain column alignment
-            return <TableCell key={mainKey} className={cn('px-3 py-2 text-[13px]', cellClasses)} />
-          })}
-        </TableRow>
-      ))}
-    </>
-  )
-}
-
-ExpansionRows.displayName = 'ExpansionRows'
-
-export { ExpansionRows }
-export type { ExpansionRowsProps }

package/dist/examples/data-explorer/FilterChip/FilterChip.tsx

@@ -1,85 +0,0 @@
-import { ChevronDown, X } from 'lucide-react'
-import { Badge } from '@/components/ui/badge'
-import { Button } from '@/components/ui/button'
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
-import { FilterPopoverContent } from '../FilterPopoverContent/FilterPopoverContent'
-import { cn } from '@/lib/utils'
-
-export interface FilterChipProps {
-  columnKey: string
-  label: string
-  selectedValues: string[]
-  options: string[]
-  onToggleOption: (value: string) => void
-  onClear: () => void
-  className?: string
-}
-
-export function FilterChip({
-  columnKey,
-  label,
-  selectedValues,
-  options,
-  onToggleOption,
-  onClear,
-  className,
-}: FilterChipProps) {
-  const hasSelection = selectedValues.length > 0
-
-  return (
-    <Popover>
-      <div data-slot="filter-chip" className={cn('inline-flex items-center', className)}>
-        <PopoverTrigger asChild>
-          <Button
-            variant="outline"
-            size="sm"
-            aria-haspopup="dialog"
-            aria-label={`${label} Filter`}
-            className={cn(
-              'h-8 gap-1.5 text-sm font-medium',
-              hasSelection && 'rounded-r-none border-r-0 border-primary bg-primary/5 text-primary hover:bg-primary/10',
-            )}
-          >
-            <span>{label}</span>
-            {hasSelection ? (
-              <Badge variant="secondary" className="h-4 min-w-4 px-1 py-0 text-[10px]">
-                {selectedValues.length}
-              </Badge>
-            ) : (
-              <ChevronDown className="size-3.5 text-muted-foreground" />
-            )}
-          </Button>
-        </PopoverTrigger>
-
-        {hasSelection && (
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={onClear}
-            aria-label={`${label} Filter entfernen`}
-            className="h-8 rounded-l-none border-primary bg-primary/5 px-1.5 text-primary hover:bg-primary/10 hover:text-destructive"
-          >
-            <X className="size-3.5" />
-          </Button>
-        )}
-      </div>
-
-      <PopoverContent
-        align="start"
-        sideOffset={4}
-        role="dialog"
-        aria-label={`${label} Filter`}
-        className="w-64 p-3"
-        data-column-key={columnKey}
-      >
-        <FilterPopoverContent
-          options={options}
-          selectedValues={selectedValues}
-          onToggleOption={onToggleOption}
-        />
-      </PopoverContent>
-    </Popover>
-  )
-}
-
-FilterChip.displayName = 'FilterChip'

package/dist/examples/data-explorer/FilterPopoverContent/FilterPopoverContent.tsx

@@ -1,73 +0,0 @@
-import * as React from 'react'
-import { Search } from 'lucide-react'
-import { Checkbox } from '@/components/ui/checkbox'
-import { Input } from '@/components/ui/input'
-import { cn } from '@/lib/utils'
-
-export interface FilterPopoverContentProps {
-  options: string[]
-  selectedValues: string[]
-  onToggleOption: (value: string) => void
-  labelMap?: Record<string, string>
-  className?: string
-}
-
-export function FilterPopoverContent({
-  options,
-  selectedValues,
-  onToggleOption,
-  labelMap,
-  className,
-}: FilterPopoverContentProps) {
-  const [search, setSearch] = React.useState('')
-
-  const filtered = React.useMemo(() => {
-    if (!search) return options
-    const lower = search.toLowerCase()
-    return options.filter((opt) => {
-      const display = labelMap?.[opt] ?? opt
-      return display.toLowerCase().includes(lower)
-    })
-  }, [options, search, labelMap])
-
-  return (
-    <div data-slot="filter-popover-content" className={cn('flex flex-col gap-2', className)}>
-      <div className="relative">
-        <Search className="absolute left-2.5 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground" />
-        <Input
-          value={search}
-          onChange={(e) => setSearch(e.target.value)}
-          placeholder="Suchen..."
-          className="h-8 pl-8 text-sm"
-        />
-      </div>
-      <div className="max-h-60 overflow-y-auto" role="listbox">
-        {filtered.length === 0 ? (
-          <p className="py-4 text-center text-xs text-muted-foreground">Keine Treffer</p>
-        ) : (
-          filtered.map((opt) => {
-            const label = labelMap?.[opt] ?? opt
-            const checked = selectedValues.includes(opt)
-            return (
-              <label
-                key={opt}
-                role="option"
-                aria-selected={checked}
-                className="flex cursor-pointer items-center gap-2.5 rounded px-1 py-1.5 text-sm hover:bg-accent"
-              >
-                <Checkbox
-                  checked={checked}
-                  onCheckedChange={() => onToggleOption(opt)}
-                  aria-label={label}
-                />
-                <span className="leading-snug">{label}</span>
-              </label>
-            )
-          })
-        )}
-      </div>
-    </div>
-  )
-}
-
-FilterPopoverContent.displayName = 'FilterPopoverContent'