@umituz/web-design-system 5.3.0 → 5.3.1

package/src/presentation/molecules/Toggle.tsx

@@ -1,7 +1,3 @@
-/**
- * Toggle Component (Molecule)
- * @description Switch/toggle button
- */
 
 import { forwardRef, type ButtonHTMLAttributes } from 'react';
 import { cn } from '../../infrastructure/utils';

package/src/presentation/molecules/index.ts

@@ -1,8 +1,3 @@
-/**
- * Molecules Export
- * @description Molecule components - combinations of atoms
- * Subpath: @umituz/web-design-system/molecules
- */
 
 export { FormField } from './FormField';
 export type { FormFieldProps } from './FormField';
@@ -41,7 +36,6 @@ export { ScrollArea, ScrollBar } from './ScrollArea';
 export { ListItem } from './ListItem';
 export type { ListItemProps } from './ListItem';
 
-// NEW: Filter & Navigation Components
 export { ActiveFilterTags } from './ActiveFilterTags';
 export type { ActiveFilterTagsProps } from './ActiveFilterTags';
 

package/src/presentation/organisms/Accordion.tsx

@@ -1,7 +1,3 @@
-/**
- * Accordion Component (Organism)
- * @description Collapsible content sections (Shadcn/ui compatible)
- */
 
 import * as React from 'react';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';

package/src/presentation/organisms/Alert.tsx

@@ -1,7 +1,3 @@
-/**
- * Alert Component (Organism)
- * @description Feedback message (Shadcn/ui compatible)
- */
 
 import * as React from 'react';
 import { cn } from '../../infrastructure/utils';

package/src/presentation/organisms/AvatarStack.tsx

@@ -1,7 +1,3 @@
-/**
- * AvatarStack Component (Organism)
- * @description Overlapping avatar row built on the Avatar molecule with an overflow count badge
- */
 
 import { forwardRef } from 'react';
 import { cn } from '../../infrastructure/utils';
@@ -16,7 +12,6 @@ export interface AvatarPerson {
 
 export interface AvatarStackProps extends BaseProps {
   people: AvatarPerson[];
-  /** Avatars shown before the +N badge (default 4). */
   max?: number;
   size?: ExtendedSizes;
 }

package/src/presentation/organisms/Breadcrumb.tsx

@@ -1,7 +1,3 @@
-/**
- * Breadcrumb Component (Organism)
- * @description Navigation breadcrumb trail
- */
 
 import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';
 import { cn } from '../../infrastructure/utils';
@@ -13,9 +9,6 @@ export interface BreadcrumbItem {
   label: string;
   href?: string;
   icon?: ReactNode;
-  /** Renders this node instead of the default anchor — for hosts that need
-   *  SPA router links (react-router `Link`, Next `Link`, …). When set, label
-   *  and href are ignored for rendering. */
   content?: ReactNode;
 }
 

package/src/presentation/organisms/Card.tsx

@@ -1,7 +1,3 @@
-/**
- * Card Component (Organism)
- * @description Content container with header, body, footer
- */
 
 import { forwardRef, type HTMLAttributes } from 'react';
 import React from 'react';
@@ -11,9 +7,7 @@ import type { BaseProps } from '../../domain/types';
 
 export interface CardProps extends HTMLAttributes<HTMLDivElement>, BaseProps {
   variant?: 'default' | 'outlined' | 'elevated';
-  /** Render as the single child element (e.g. a router Link) instead of a div. */
   asChild?: boolean;
-  /** Interactive card: pointer cursor, hover border and a visible focus ring. */
   interactive?: boolean;
 }
 

package/src/presentation/organisms/Checklist.tsx

@@ -1,7 +1,3 @@
-/**
- * Checklist Component (Organism)
- * @description Toggleable checklist with completion progress and done-by metadata
- */
 
 import { forwardRef } from 'react';
 import type { HTMLAttributes, ReactNode } from 'react';

package/src/presentation/organisms/Collapsible.tsx

@@ -1,7 +1,3 @@
-/**
- * Collapsible Component (Organism)
- * @description Collapsible content (Shadcn/ui compatible)
- */
 
 import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
 

package/src/presentation/organisms/ConfirmDialog.tsx

@@ -1,8 +1,3 @@
-/**
- * ConfirmDialog Component (Organism)
- * @description Destructive/primary confirmation built on Modal: title, body and
- * Cancel + confirm actions; unmounts itself after confirming
- */
 
 import type { ReactNode } from 'react';
 import { Button } from '../atoms/Button';
@@ -13,11 +8,8 @@ export interface ConfirmDialogProps {
   body?: ReactNode;
   confirmLabel?: string;
   cancelLabel?: string;
-  /** Visual weight of the confirm action; defaults to danger. */
   tone?: 'danger' | 'primary' | 'success';
-  /** Renders nothing when false; defaults to true (conditional mounting also works). */
   open?: boolean;
-  /** While true the confirm action is locked and shows its loading state; the caller owns dismissal. */
   busy?: boolean;
   onConfirm: () => void;
   onClose: () => void;

package/src/presentation/organisms/CoverArt.tsx

@@ -1,9 +1,3 @@
-/**
- * CoverArt Component (Organism)
- * @description Deterministic generated artwork for entities without
- *   photography — the seed always resolves to the same gradient, replaced by
- *   real imagery once a media service exists
- */
 
 import type { ReactNode } from 'react';
 import { cn } from '../../infrastructure/utils';
@@ -11,13 +5,10 @@ import { hashSeed } from '../../infrastructure/utils/hash.util';
 import type { BaseProps } from '../../domain/types';
 
 export interface CoverArtProps extends BaseProps {
-  /** Any stable entity id/name — the same seed always renders the same gradient. */
   seed: string;
   ratio?: '16/9' | '3/2' | '4/3' | '1/1' | '21/9';
   rounded?: 'none' | 'md' | 'lg' | 'top';
-  /** Brand palette override ([from, to]); wins over the seeded gradient. */
   colors?: readonly [string, string];
-  /** Accessible description; omit for purely decorative usage. */
   alt?: string;
   children?: ReactNode;
 }

package/src/presentation/organisms/DataTable.tsx

@@ -51,17 +51,14 @@ export interface SortState {
 export interface Column<T> {
   id: string;
   header: ReactNode;
-  /** Data source; optional when the column renders through `cell` only. */
   accessor?: keyof T | ((row: T) => ReactNode);
   cell?: (row: T) => ReactNode;
   sortValue?: (row: T) => string | number;
   sortable?: boolean;
   align?: ColumnAlign;
   hideBelow?: ColumnHideBelow;
-  /** Pixels when numeric. */
   width?: string | number;
   className?: string;
-  /** Hidden until the reader enables it from the built-in columns menu. */
   optional?: boolean;
 }
 
@@ -71,12 +68,9 @@ export interface TablePaginationProps extends BaseProps {
   onPage: (page: number) => void;
   label?: ReactNode;
   hideWhenSingle?: boolean;
-  /** Page-size choices offered in the rows-per-page select. */
   pageSizeOptions?: readonly number[];
-  /** Currently selected page size; required with `pageSizeOptions`. */
   pageSize?: number;
   onPageSize?: (size: number) => void;
-  /** Accessible label for the rows-per-page select (default "Rows per page"). */
   pageSizeLabel?: ReactNode;
 }
 
@@ -103,7 +97,6 @@ export interface DataTableProps<T> extends BaseProps {
   stackable?: boolean;
   paginated?: boolean;
   pageSize?: number;
-  /** Page-size choices offered in the footer rows-per-page select. */
   pageSizeOptions?: readonly number[];
   onPageSizeChange?: (size: number) => void;
   emptyState?: {
@@ -112,7 +105,6 @@ export interface DataTableProps<T> extends BaseProps {
   };
   onRowClick?: (row: T) => void;
   rowLabel?: (row: T) => string;
-  /** Row-level class, e.g. a tone accent for overdue rows. */
   rowClass?: (row: T) => string | undefined;
 }
 

package/src/presentation/organisms/DateRangePicker.tsx

@@ -1,8 +1,3 @@
-/**
- * DateRangePicker Component (Organism)
- * @description Compact preset-driven date range picker with custom date
- *   inputs, built on the DropdownMenu + Input atoms.
- */
 
 import { useState } from 'react';
 import { CalendarRange } from 'lucide-react';
@@ -20,7 +15,6 @@ import {
 export interface DateRange {
   from: string;
   to: string;
-  /** preset id when the range was chosen from the preset list */
   preset?: RangePreset;
 }
 
@@ -56,7 +50,6 @@ function shiftMonths(iso: string, months: number): string {
   return d.toISOString().slice(0, 10);
 }
 
-/** Resolve a preset id into a concrete range around `today` (ISO date). */
 export function presetRange(preset: RangePreset, today: string = isoToday()): DateRange {
   switch (preset) {
     case '7d':
@@ -79,9 +72,7 @@ export function presetRange(preset: RangePreset, today: string = isoToday()): Da
 export interface DateRangePickerProps {
   value: DateRange;
   onChange: (range: DateRange) => void;
-  /** Preset list shown above the custom inputs; defaults to DEFAULT_RANGE_PRESETS. */
   presets?: readonly RangePresetOption[];
-  /** Day formatter for the trigger label; defaults to the raw ISO date. */
   formatDay?: (iso: string) => string;
   'aria-label'?: string;
 }

package/src/presentation/organisms/Dialog.tsx

@@ -1,7 +1,3 @@
-/**
- * Dialog Component (Organism)
- * @description Modal dialog (Shadcn/ui compatible)
- */
 
 import * as React from 'react';
 import * as DialogPrimitive from '@radix-ui/react-dialog';

package/src/presentation/organisms/Drawer.tsx

@@ -1,8 +1,3 @@
-/**
- * Drawer Component (Organism)
- * @description Slide-over panel built on the Sheet compound with a
- * Modal-like prop surface (title, footer, side presets, wide variant)
- */
 
 import type { ReactNode } from 'react';
 import { cn } from '../../infrastructure/utils';
@@ -21,7 +16,6 @@ export interface DrawerProps {
   open: boolean;
   onClose: () => void;
   title?: ReactNode;
-  /** Small overline above the title, e.g. an entity code. */
   eyebrow?: ReactNode;
   subtitle?: ReactNode;
   description?: ReactNode;

package/src/presentation/organisms/DropdownMenu.tsx

@@ -1,7 +1,3 @@
-/**
- * Dropdown Menu Component (Organism) - Shadcn/ui format
- * @description Dropdown menu component using Radix UI
- */
 
 import * as React from 'react';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';

package/src/presentation/organisms/ErrorBoundary.tsx

@@ -1,8 +1,3 @@
-/**
- * ErrorBoundary Component (Organism)
- * @description Route/tree-level crash catcher — catches render errors and
- * shows an honest recovery screen instead of a blank page.
- */
 
 import { Component, type ErrorInfo, type ReactNode } from 'react';
 import { AlertTriangle } from 'lucide-react';
@@ -10,19 +5,12 @@ import { Button } from '../atoms/Button';
 
 export interface ErrorBoundaryProps {
   children: ReactNode;
-  /** Small kicker line above the title (e.g. "Something broke"). */
   kicker?: string;
-  /** Heading on the crash screen. */
   title?: string;
-  /** Secondary line — defaults to the caught error's message. */
   description?: ReactNode;
-  /** Reset (retry) button label; omit to hide the button. */
   resetLabel?: string;
-  /** Extra action rendered next to reset (e.g. a link back home). */
   action?: ReactNode;
-  /** Fully custom crash screen — receives the error and the reset handler. */
   fallback?: (error: Error, reset: () => void) => ReactNode;
-  /** Side-channel for logging services (defaults to console.error). */
   onError?: (error: Error, info: ErrorInfo) => void;
 }
 

package/src/presentation/organisms/FileUploader.tsx

@@ -1,8 +1,3 @@
-/**
- * FileUploader Component (Organism)
- * @description Keyboard-accessible drag-and-drop file picker with a queued
- *   file preview list. Visual only — storage wiring belongs to the host.
- */
 
 import { useRef, useState, type DragEvent } from 'react';
 import { UploadCloud } from 'lucide-react';
@@ -10,15 +5,11 @@ import { Button } from '../atoms/Button';
 import { cn } from '../../infrastructure/utils';
 
 export interface FileUploaderProps {
-  /** Drop-zone headline. */
   label?: string;
-  /** Secondary line under the headline. */
   hint?: string;
   accept?: string;
   multiple?: boolean;
-  /** Called with the picked/dropped files. */
   onFiles?: (files: File[]) => void;
-  /** How many queued names to list before stopping (visual cap only). */
   maxPreview?: number;
 }
 

package/src/presentation/organisms/FilterPopover.tsx

@@ -1,8 +1,3 @@
-/**
- * FilterPopover Component (Organism)
- * @description List-toolbar filter trigger with an active-filter count badge;
- * hosts arbitrary filter controls inside a Popover
- */
 
 import { useState, type ReactNode } from 'react';
 import { Filter } from 'lucide-react';
@@ -11,11 +6,8 @@ import { Button } from '../atoms/Button';
 import { Popover, PopoverContent, PopoverTrigger } from './Popover';
 
 export interface FilterPopoverProps {
-  /** Trigger caption; defaults to "Filters". */
   label?: string;
-  /** Active filter count; rendered as a badge when greater than zero. */
   count?: number;
-  /** Popover alignment relative to the trigger; defaults to "start". */
   align?: 'start' | 'center' | 'end';
   children: ReactNode;
   className?: string;

package/src/presentation/organisms/FormModal.tsx

@@ -65,8 +65,6 @@ export interface FormModalMessages {
   invalidNumber: string;
 }
 
-/** Resolves a field's options — static arrays pass through, functions
- *  receive the current values so a select can depend on earlier fields. */
 function fieldOptions(f: FormModalField, values: FormModalValues): FormModalOption[] {
   return typeof f.options === 'function' ? f.options(values) : (f.options ?? []);
 }
@@ -118,8 +116,6 @@ export function FormModal(
   const set = (name: string, val: string | number | boolean) => {
     const next: FormModalValues = { ...values, [name]: val };
     const cleared = [name];
-    // A dependent select must never hold a value its resolved options no
-    // longer contain — snap it to the first option (or '') and clear its error.
     for (const s of steps) {
       for (const f of s.fields) {
         if (f.type !== 'select' || typeof f.options !== 'function') continue;
@@ -215,7 +211,6 @@ export function FormModal(
                     {f.label}
                     {f.required && (
                       <span className="ml-0.5 text-destructive" aria-hidden="true">
-                        *
                       </span>
                     )}
                   </label>

package/src/presentation/organisms/HoverCard.tsx

@@ -1,7 +1,3 @@
-/**
- * HoverCard Component (Organism)
- * @description Hover-triggered card (Shadcn/ui compatible)
- */
 
 import * as React from 'react';
 import * as HoverCardPrimitive from '@radix-ui/react-hover-card';

package/src/presentation/organisms/KeyValueList.tsx

@@ -1,7 +1,3 @@
-/**
- * KeyValueList Component (Organism)
- * @description Definition list of label → value rows (drawers, detail panels).
- */
 
 import { forwardRef } from 'react';
 import type { HTMLAttributes, ReactNode } from 'react';

package/src/presentation/organisms/KpiCard.tsx

@@ -1,7 +1,3 @@
-/**
- * KpiCard Component (Organism)
- * @description Compact key-metric card: label, value, delta badge, hint and sparkline
- */
 
 import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';
 import { TrendingUp, TrendingDown } from 'lucide-react';
@@ -34,11 +30,9 @@ export interface KpiCardProps extends HTMLAttributes<HTMLDivElement>, BaseProps
   hint?: ReactNode;
   icon?: ReactNode;
   iconTone?: KpiIconTone;
-  /** Paints the metric value itself, e.g. red for an over-budget figure. */
   valueTone?: KpiIconTone;
   spark?: readonly number[];
   sparkTone?: KpiIconTone;
-  /** Danger emphasis for metrics that need attention, e.g. open incidents. */
   alert?: boolean;
   onClick?: () => void;
 }

package/src/presentation/organisms/Lightbox.tsx

@@ -1,8 +1,3 @@
-/**
- * Lightbox Component (Organism)
- * @description Media overlay on the Dialog primitives — click to zoom,
- *   caption below, close button in the corner.
- */
 
 import { useState } from 'react';
 import type { ReactNode } from 'react';
@@ -12,10 +7,8 @@ import { Dialog, DialogContent, DialogTitle } from './Dialog';
 export interface LightboxProps {
   open: boolean;
   onClose: () => void;
-  /** Accessible name for the media being shown. */
   alt: string;
   caption?: ReactNode;
-  /** Toggle zoom on media click; default true. */
   zoomable?: boolean;
   children?: ReactNode;
   className?: string;

package/src/presentation/organisms/LoadingState.tsx

@@ -1,7 +1,3 @@
-/**
- * LoadingState Component (Organism)
- * @description Component for displaying loading states (Responsive)
- */
 
 import { forwardRef } from 'react';
 import { cn, getSpacing, getGap } from '../../infrastructure/utils';

package/src/presentation/organisms/MapPreview.tsx

@@ -1,20 +1,11 @@
-/**
- * MapPreview Component (Organism)
- * @description Static map stand-in drawn with a contour motif — a neutral
- *   placeholder for locations until a real GIS integration exists. Colors
- *   come from the semantic tokens, so it adapts to every host theme.
- */
 
 import { MapPin } from 'lucide-react';
 
 export interface MapPreviewProps {
-  /** Location caption, e.g. "Torba, Bodrum". */
   label: string;
   coordinates?: { lat: number; lng: number };
   height?: number;
-  /** Secondary caption line, e.g. an integration note. */
   hint?: string;
-  /** Degrees formatting for the coordinate readout; defaults to 4 decimals. */
   formatCoordinate?: (value: number) => string;
 }
 

package/src/presentation/organisms/MetricCard.tsx

@@ -1,7 +1,3 @@
-/**
- * MetricCard Component (Organism)
- * @description Card component for displaying metrics and statistics with trend indicators (Responsive)
- */
 
 import { forwardRef } from 'react';
 import { cn, getSpacing, getIconSize, getTextSize, getGap } from '../../infrastructure/utils';
@@ -21,7 +17,7 @@ export interface MetricCardProps extends BaseProps {
   variant?: ColorVariant;
   trendValueFormatter?: (value: number) => string;
   onClick?: () => void;
-  responsiveLayout?: boolean; // Enable responsive layout changes
+  responsiveLayout?: boolean;
 }
 
 const trendColors: Record<ColorVariant, { positive: string; negative: string; bg: string }> = {

package/src/presentation/organisms/Modal.tsx

@@ -1,7 +1,3 @@
-/**
- * Modal Component (Organism)
- * @description Convenience modal with title, description, size and footer presets
- */
 
 import type { ReactNode } from 'react';
 import { AlertTriangle } from 'lucide-react';

package/src/presentation/organisms/PhotoGallery.tsx

@@ -1,20 +1,11 @@
-/**
- * PhotoGallery Component (Organism)
- * @description Placeholder photo gallery — renders tinted tiles with a
- *   caption bar for photos that have no storage backend yet. When a host
- *   wires real image URLs it can render them inside the same tile frame.
- */
 
 import { Image as ImageIcon, ImageOff } from 'lucide-react';
 import { cn } from '../../infrastructure/utils';
 
 export interface PhotoTile {
   id: string;
-  /** Primary caption, e.g. the photo title. */
   label?: string;
-  /** Secondary caption line, e.g. a kind tag or a date. */
   meta?: string;
-  /** Optional image URL — rendered in place of the placeholder mark. */
   src?: string;
 }
 

package/src/presentation/organisms/PlanPicker.tsx

@@ -1,8 +1,3 @@
-/**
- * PlanPicker Component (Organism)
- * @description Pricing plan card group with an optional billing cycle switch;
- * money stays caller-computed — price and features are plain nodes
- */
 
 import type { KeyboardEvent, ReactNode } from 'react';
 import { Check } from 'lucide-react';

package/src/presentation/organisms/Popover.tsx

@@ -1,7 +1,3 @@
-/**
- * Popover Component (Organism)
- * @description Popover dialog (Shadcn/ui compatible)
- */
 
 import * as React from 'react';
 import * as PopoverPrimitive from '@radix-ui/react-popover';

package/src/presentation/organisms/Sheet.tsx

@@ -1,7 +1,3 @@
-/**
- * Sheet Component (Organism)
- * @description Slide-over sheet dialog (Shadcn/ui compatible)
- */
 
 import * as SheetPrimitive from '@radix-ui/react-dialog';
 import { X } from 'lucide-react';

package/src/presentation/organisms/StatCard.tsx

@@ -1,7 +1,3 @@
-/**
- * StatCard Component (Organism)
- * @description Enhanced metric card with progress bar and target tracking (Responsive)
- */
 
 import { forwardRef, type ComponentType } from 'react';
 import { cn, getSpacing, getIconSize, getContainerSize, getTextSize, getSpaceY, getGap } from '../../infrastructure/utils';
@@ -20,7 +16,6 @@ export interface StatCardProps extends BaseProps {
     value: number;
     label?: string;
   };
-  /** Secondary context line rendered under the title. */
   meta?: string;
   target?: {
     value: string;

package/src/presentation/organisms/StatusBadge.tsx

@@ -1,9 +1,3 @@
-/**
- * StatusBadge Component (Organism)
- * @description Vocab-driven status badge — resolves a raw value against a
- *   status map (label + tone), falling back to a neutral badge with the
- *   raw value as its label.
- */
 
 import type { ReactNode } from 'react';
 import { Badge } from '../atoms/Badge';
@@ -17,11 +11,6 @@ export interface StatusEntry {
 
 export type StatusVocab = Record<string, StatusEntry>;
 
-/**
- * Status vocab fabric — build a vocab from a domain label map (raw value →
- * display label) plus an optional tone table (raw value → badge tone).
- * Entries without a tone render neutral.
- */
 export function statusVocab(
   labels: Record<string, string>,
   tones: Record<string, BadgeVariant> = {},
@@ -36,7 +25,6 @@ export function statusVocab(
 export interface StatusBadgeProps {
   vocab: StatusVocab;
   value: string;
-  /** Render text in place of the vocab entry's label (tone still comes from the vocab). */
   label?: ReactNode;
   dot?: boolean;
   mono?: boolean;

package/src/presentation/organisms/Stepper.tsx

@@ -1,8 +1,3 @@
-/**
- * Stepper Component (Organism)
- * @description Horizontal or vertical step indicator with derived status,
- * optional click navigation and per-step override/lock control
- */
 
 import type { ReactNode } from 'react';
 import { Check } from 'lucide-react';

package/src/presentation/organisms/Table.tsx

@@ -1,7 +1,3 @@
-/**
- * Table Component (Organism)
- * @description Data table component
- */
 
 import { forwardRef, type HTMLAttributes, type TdHTMLAttributes, type ThHTMLAttributes } from 'react';
 import React from 'react';

package/src/presentation/organisms/Tabs.tsx

@@ -1,7 +1,3 @@
-/**
- * Tabs Component (Organism)
- * @description Tabbed interface
- */
 
 import { useRef, useState, useCallback, type KeyboardEvent, type ReactNode, type HTMLAttributes } from 'react';
 import { cn } from '../../infrastructure/utils';
@@ -23,7 +19,6 @@ export interface TabsProps extends HTMLAttributes<HTMLDivElement>, BaseProps {
   variant?: 'default' | 'pills' | 'underline';
   ariaLabel?: string;
   panelId?: string;
-  /** Render only the tab list (e.g. URL-driven tabs whose content lives elsewhere). */
   showPanel?: boolean;
 }
 
@@ -95,7 +90,6 @@ export function Tabs({ tabs, defaultValue, value, onValueChange, variant = 'defa
 
   return (
     <div className={cn('w-full', className)} {...props}>
-      {/* Tab List */}
       <div
         ref={listRef}
         role="tablist"
@@ -138,7 +132,6 @@ export function Tabs({ tabs, defaultValue, value, onValueChange, variant = 'defa
         })}
       </div>
 
-      {/* Tab Content */}
       {showPanel && (
         <div
           role="tabpanel"