@umituz/web-design-system 5.3.0 → 6.0.0

package/src/presentation/molecules/StatPill.tsx

@@ -1,8 +1,3 @@
-/**
- * StatPill Component (Molecule)
- * @description Compact inline stat — bold value over a muted label, for
- *   dense rows and summary strips where a stat card is too heavy.
- */
 
 import { forwardRef } from 'react';
 import type { ReactNode } from 'react';

package/src/presentation/molecules/TagInput.tsx

@@ -1,9 +1,3 @@
-/**
- * TagInput Component (Molecule)
- * @description Controlled free-form tag entry rendered as removable chips.
- * Type and press Enter (or comma) to commit, Backspace on an empty draft removes the last tag,
- * duplicates are ignored, and blur commits by default.
- */
 
 import { forwardRef, useState } from 'react';
 import type { InputHTMLAttributes } from 'react';
@@ -16,7 +10,6 @@ export interface TagInputProps
     BaseProps {
   tags: string[];
   onTagsChange: (tags: string[]) => void;
-  /** Commit the draft on blur (default true). */
   commitOnBlur?: boolean;
 }
 

package/src/presentation/molecules/Textarea.tsx

@@ -1,7 +1,3 @@
-/**
- * Textarea Component (Molecule)
- * @description Multi-line text input with optional label and helper text
- */
 
 import { forwardRef, useId, type ReactNode, type TextareaHTMLAttributes } from 'react';
 import { cn } from '../../infrastructure/utils';

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/Toolbar.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { cn } from '../../infrastructure/utils';
+
+export interface ToolbarProps extends React.HTMLAttributes<HTMLDivElement> {
+  search?: React.ReactNode;
+  filters?: React.ReactNode;
+  actions?: React.ReactNode;
+}
+
+export const Toolbar = React.forwardRef<HTMLDivElement, ToolbarProps>(
+  ({ search, filters, actions, children, className, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          'flex flex-col sm:flex-row items-stretch sm:items-center justify-between gap-3 w-full',
+          className
+        )}
+        {...props}
+      >
+        <div className="flex flex-1 flex-wrap items-center gap-2">
+          {search && <div className="w-full sm:w-72 max-w-full">{search}</div>}
+          {filters && <div className="flex flex-wrap items-center gap-2">{filters}</div>}
+          {children}
+        </div>
+        {actions && (
+          <div className="flex items-center gap-2 shrink-0 justify-end">
+            {actions}
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+
+Toolbar.displayName = 'Toolbar';

package/src/presentation/molecules/index.ts

@@ -1,9 +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';
 
@@ -22,7 +16,18 @@ export type { ChipProps } from './Chip';
 export { Toggle } from './Toggle';
 export type { ToggleProps } from './Toggle';
 
-export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton } from './Select';
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+} from './Select';
 
 export { Textarea } from './Textarea';
 export type { TextareaProps } from './Textarea';
@@ -41,7 +46,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';
 
@@ -70,3 +74,16 @@ export type { TagInputProps } from './TagInput';
 
 export { MarkdownText } from './MarkdownText';
 export type { MarkdownTextProps } from './MarkdownText';
+
+// New Productivity Molecules
+export { PasswordInput } from './PasswordInput';
+export type { PasswordInputProps } from './PasswordInput';
+
+export { SearchInput } from './SearchInput';
+export type { SearchInputProps } from './SearchInput';
+
+export { ConfirmButton } from './ConfirmButton';
+export type { ConfirmButtonProps } from './ConfirmButton';
+
+export { Toolbar } from './Toolbar';
+export type { ToolbarProps } from './Toolbar';

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/DescriptionList.tsx

@@ -0,0 +1,113 @@
+import * as React from 'react';
+import { Card } from './Card';
+import { Badge, type BadgeVariant } from '../atoms/Badge';
+import { CopyButton } from '../atoms/CopyButton';
+import { cn } from '../../infrastructure/utils';
+
+export interface DescriptionItem {
+  key?: string;
+  label: string;
+  value: React.ReactNode;
+  copyable?: boolean;
+  copyText?: string;
+  badge?: string;
+  badgeVariant?: BadgeVariant;
+  hint?: string;
+}
+
+export interface DescriptionListProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  action?: React.ReactNode;
+  items: DescriptionItem[];
+  columns?: 1 | 2;
+  bordered?: boolean;
+}
+
+export const DescriptionList = React.forwardRef<HTMLDivElement, DescriptionListProps>(
+  (
+    {
+      title,
+      description,
+      action,
+      items,
+      columns = 1,
+      bordered = true,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const content = (
+      <div
+        ref={ref}
+        className={cn('w-full flex flex-col gap-4', className)}
+        {...props}
+      >
+        {(title || action || description) && (
+          <div className="flex items-start justify-between gap-4 pb-3 border-b border-border">
+            <div>
+              {title && (
+                <h3 className="text-base font-semibold text-foreground tracking-tight">
+                  {title}
+                </h3>
+              )}
+              {description && (
+                <p className="text-sm text-muted-foreground mt-0.5">
+                  {description}
+                </p>
+              )}
+            </div>
+            {action && <div className="shrink-0">{action}</div>}
+          </div>
+        )}
+
+        <dl
+          className={cn(
+            'grid gap-x-6 gap-y-3',
+            columns === 2 ? 'grid-cols-1 sm:grid-cols-2' : 'grid-cols-1'
+          )}
+        >
+          {items.map((item, idx) => {
+            const rawCopyText = item.copyText ?? (typeof item.value === 'string' ? item.value : '');
+
+            return (
+              <div
+                key={item.key ?? idx}
+                className="flex items-center justify-between py-2 border-b border-border/60 last:border-0 gap-3"
+              >
+                <dt className="text-sm font-medium text-muted-foreground shrink-0">
+                  {item.label}
+                  {item.hint && (
+                    <span className="block text-xs font-normal text-muted-foreground/75">
+                      {item.hint}
+                    </span>
+                  )}
+                </dt>
+                <dd className="text-sm font-medium text-foreground flex items-center gap-2 text-right break-all">
+                  {item.value}
+                  {item.badge && (
+                    <Badge variant={item.badgeVariant ?? 'secondary'} size="sm">
+                      {item.badge}
+                    </Badge>
+                  )}
+                  {item.copyable && rawCopyText && (
+                    <CopyButton text={rawCopyText} size="xs" />
+                  )}
+                </dd>
+              </div>
+            );
+          })}
+        </dl>
+      </div>
+    );
+
+    if (bordered) {
+      return <Card className="p-5">{content}</Card>;
+    }
+
+    return content;
+  }
+);
+
+DescriptionList.displayName = 'DescriptionList';

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;