@umituz/web-design-system 5.2.0 → 5.3.1

package/src/presentation/organisms/Timeline.tsx

@@ -1,7 +1,3 @@
-/**
- * Timeline Component (Organism)
- * @description Vertical activity timeline: meta line, title, optional body, tone dot
- */
 
 import { forwardRef } from 'react';
 import type { HTMLAttributes, ReactNode } from 'react';
@@ -11,21 +7,17 @@ import type { BaseProps } from '../../domain/types';
 export type TimelineTone = 'primary' | 'success' | 'warning' | 'destructive' | 'info' | 'neutral' | 'violet';
 
 export interface TimelineItem {
-  /** ISO timestamp rendered as the meta line unless `meta` overrides it. */
   at: string;
   title: ReactNode;
   body?: ReactNode;
   tone?: TimelineTone;
   meta?: ReactNode;
-  /** Replaces the tone dot with an icon, tinted by `tone` (or muted when omitted). */
   icon?: ReactNode;
-  /** Replaces the tone dot with an avatar (e.g. the acting user); takes precedence over `icon`. */
   avatar?: ReactNode;
 }
 
 export interface TimelineProps extends HTMLAttributes<HTMLOListElement>, BaseProps {
   items: TimelineItem[];
-  /** Render newest first (default) instead of the given order. */
   newestFirst?: boolean;
 }
 

package/src/presentation/organisms/Toaster.tsx

@@ -1,9 +1,3 @@
-/**
- * Toaster Component (Organism)
- * @description Toast notification system. ToastProvider wraps the app root
- * ONCE and renders the viewport (bottom-right stack, max 4, auto-dismiss
- * 4.2 s); pages fire toasts via useToast()({ kind, title, description }).
- */
 
 import { createContext, useCallback, useContext, useMemo, useRef, useState } from 'react';
 import type { ReactNode } from 'react';
@@ -24,10 +18,8 @@ export interface ToastShorthandOptions {
 }
 
 interface ToastApi {
-  /** Fire a toast — after every mutating action is the fleet idiom. */
   toast: {
     (t: ToastOptions): void;
-    /** Shorthand call: toast('Saved', { tone: 'success', message: '…' }). */
     (title: string, options?: ToastShorthandOptions): void;
   };
 }
@@ -38,7 +30,6 @@ interface ToastEntry extends ToastOptions {
 
 const ToastContext = createContext<ToastApi>({ toast: () => {} });
 
-/** Consume from any page below the provider: const { toast } = useToast(); */
 export function useToast(): ToastApi {
   return useContext(ToastContext);
 }

package/src/presentation/organisms/ToggleGroup.tsx

@@ -1,7 +1,3 @@
-/**
- * Toggle Group Component (Organism) - Shadcn/ui format
- * @description Group of toggle buttons with single or multiple selection
- */
 
 import * as React from 'react';
 import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';

package/src/presentation/organisms/index.ts

@@ -1,8 +1,3 @@
-/**
- * Organisms Export
- * @description Organism components - complex UI combinations
- * Subpath: @umituz/web-design-system/organisms
- */
 
 export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from './Card';
 export type { CardProps, CardHeaderProps } from './Card';

package/src/presentation/templates/Form.tsx

@@ -1,7 +1,3 @@
-/**
- * Form Template (Template)
- * @description Complete form structure
- */
 
 import { forwardRef, type FormHTMLAttributes, type HTMLAttributes } from 'react';
 import { cn } from '../../infrastructure/utils';

package/src/presentation/templates/List.tsx

@@ -1,7 +1,3 @@
-/**
- * List Template (Template)
- * @description Structured list container
- */
 
 import { forwardRef, type HTMLAttributes } from 'react';
 import { cn } from '../../infrastructure/utils';

package/src/presentation/templates/PageHeader.tsx

@@ -1,7 +1,3 @@
-/**
- * PageHeader Template Component
- * @description Centralized page header with consistent heading styling
- */
 
 import { forwardRef, type HTMLAttributes } from 'react';
 import { type ReactNode } from 'react';

package/src/presentation/templates/PageLayout.tsx

@@ -1,7 +1,3 @@
-/**
- * PageLayout Template Component
- * @description Centralized page layout with consistent padding, max-width, and theme integration
- */
 
 import { forwardRef, type HTMLAttributes } from 'react';
 import { cn } from '../../infrastructure/utils';

package/src/presentation/templates/ProjectSkeleton.tsx

@@ -1,7 +1,3 @@
-/**
- * ProjectSkeleton Template Component
- * @description Loading skeleton for project cards
- */
 
 import { forwardRef, type HTMLAttributes } from 'react';
 import { cn } from '../../infrastructure/utils';

package/src/presentation/templates/ResponsiveContainer.tsx

@@ -1,7 +1,3 @@
-/**
- * ResponsiveContainer Template Component
- * @description Responsive wrapper with mobile/desktop optimizations
- */
 
 import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';
 import { cn } from '../../infrastructure/utils';
@@ -14,58 +10,22 @@ export interface ResponsiveContainerProps
   extends Omit<HTMLAttributes<HTMLDivElement>, 'children'>,
     BaseProps {
   children?: ReactNode;
-  /**
-   * Maximum width on mobile devices
-   * @default 'full'
-   */
   mobileMaxWidth?: ResponsiveSize;
 
-  /**
-   * Maximum width on tablet devices
-   * @default 'lg'
-   */
   tabletMaxWidth?: ResponsiveSize;
 
-  /**
-   * Maximum width on desktop devices
-   * @default 'xl'
-   */
   desktopMaxWidth?: ResponsiveSize;
 
-  /**
-   * Padding on mobile devices
-   * @default true
-   */
   mobilePadding?: boolean;
 
-  /**
-   * Padding on tablet devices
-   * @default true
-   */
   tabletPadding?: boolean;
 
-  /**
-   * Padding on desktop devices
-   * @default true
-   */
   desktopPadding?: boolean;
 
-  /**
-   * Center content horizontally
-   * @default true
-   */
   centered?: boolean;
 
-  /**
-   * Background gradient
-   * @default false
-   */
   gradient?: boolean;
 
-  /**
-   * Minimum height
-   * @default 'auto'
-   */
   minHeight?: 'auto' | 'screen' | 'full';
 }
 
@@ -100,7 +60,6 @@ export const ResponsiveContainer = forwardRef<
   ) => {
     const { currentBreakpoint: breakpoint } = useBreakpoint();
 
-    // Determine current max width based on breakpoint
     const getCurrentMaxWidth = (): string => {
       if (!breakpoint) return maxWidthClasses[mobileMaxWidth];
 
@@ -113,7 +72,6 @@ export const ResponsiveContainer = forwardRef<
       return maxWidthClasses[desktopMaxWidth];
     };
 
-    // Determine current padding based on breakpoint
     const getCurrentPadding = (): string => {
       if (!breakpoint) return mobilePadding ? 'px-4' : '';
 
@@ -126,7 +84,6 @@ export const ResponsiveContainer = forwardRef<
       return desktopPadding ? 'px-8' : '';
     };
 
-    // Determine current py padding based on breakpoint
     const getCurrentPyPadding = (): string => {
       if (!breakpoint) return 'py-8';
 

package/src/presentation/templates/Section.tsx

@@ -1,7 +1,3 @@
-/**
- * Section Template (Template)
- * @description Content section with header
- */
 
 import { forwardRef, type HTMLAttributes } from 'react';
 import { cn } from '../../infrastructure/utils';

package/src/presentation/templates/index.ts

@@ -1,8 +1,3 @@
-/**
- * Templates Export
- * @description Template components - page structures
- * Subpath: @umituz/web-design-system/templates
- */
 
 export { Form, FormActions } from './Form';
 export type { FormProps } from './Form';

package/src/styles/app.css

@@ -1,21 +1,3 @@
-/**
- * @umituz/web-design-system — Tailwind v4 host entry (semantic palette)
- *
- * Chains the source compile entry with the --app-* semantic bridge, so a
- * Tailwind host imports exactly one package stylesheet and defines its
- * palette as bare `--app-*` custom properties — it never writes `--color-*`
- * mappings or node_modules `@source` paths itself:
- *
- *   @import "tailwindcss";
- *   @import "tw-animate-css";
- *   @import "@umituz/web-design-system/app.css";
- *   :root { --app-primary: …; … }
- *
- * The bridge is unlayered, so its `:root` bindings override the theme
- * layer's defaults while the utilities keep resolving through
- * `var(--color-*)`. Required slots fail loudly when a host omits them —
- * see bridge.css for the full contract.
- */
 
 @import "./source.css";
 @import "./bridge.css";

package/src/styles/bridge.css

@@ -1,33 +1,5 @@
-/**
- * @umituz/web-design-system — semantic palette bridge (CSS-camp apps)
- *
- * Bu dosya, Tailwind derlemesi yapmayan (vanilla CSS) uygulamaların
- * `--color-*` semantik paletini kendi renk isimlerine bağlayan KANONİK
- * köprüdür. 8 uygulamada elle kopyalanan `packages.css` eşlemesinin
- * paketteki tek doğru hâlidir — yeni projeler eşlemeyi buradan alır,
- * kendi başına yazmaz.
- *
- * Sözleşme:
- *   1. İçe aktarım sırası (uygulamanın ana css'i):
- *        @import "@umituz/web-design-system/styles.css";
- *        @import "@umituz/web-design-system/bridge.css";
- *        :root { --app-... }          ← uygulamanın kendi token'ları (SON)
- *   2. ZORUNLU slotlar (fallback'siz): uygulama 19 çekirdek `--app-*`
- *      tokenını tanımlamazsa ilgili renk görünür biçimde bozulur —
- *      eksik palet bilinçli olarak gürültülü başarısız olur.
- *   3. OPSİYONEL slotlar: tanımlanmazsa DS'in açık-theme varsayılanı
- *      geçerli olur (success/warning/info üçlüsü, primary-soft, font).
- *   4. Karanlık theme: uygulama `[data-theme="dark"] / .dark` altında
- *      `--app-*` tokenlarını yeniden tanımlar; köprü otomatik devralır.
- *   5. `--radius-*` ve `--font-mono` bu dosyada YOKTUR: bilinçli isim
- *      çakışması doktrini — uygulama kendi css'inde (unlayered)
- *      yeniden tanımlayarak ezer.
- *   6. Tailwind-camp uygulamalar (kaynağı `@source` ile derleyenler) bu
- *      dosyaya ihtiyaç duymaz; kendi `@theme` paletiyle ezer.
- */
 
 :root {
-  /* --- ZORUNLU: yüzeyler & metin --- */
   --color-background: var(--app-background);
   --color-foreground: var(--app-foreground);
   --color-card: var(--app-card);
@@ -35,13 +7,11 @@
   --color-popover: var(--app-popover);
   --color-popover-foreground: var(--app-popover-foreground);
 
-  /* --- ZORUNLU: marka --- */
   --color-primary: var(--app-primary);
   --color-primary-foreground: var(--app-primary-foreground);
   --color-secondary: var(--app-secondary);
   --color-secondary-foreground: var(--app-secondary-foreground);
 
-  /* --- ZORUNLU: nötr --- */
   --color-muted: var(--app-muted);
   --color-muted-foreground: var(--app-muted-foreground);
   --color-accent: var(--app-accent);
@@ -49,12 +19,10 @@
   --color-border: var(--app-border);
   --color-input: var(--app-input);
 
-  /* --- ZORUNLU: yıkıcı & odak --- */
   --color-destructive: var(--app-destructive);
   --color-destructive-foreground: var(--app-destructive-foreground);
   --color-ring: var(--app-ring);
 
-  /* --- OPSİYONEL: durum üçlüsü (DS açık-theme varsayılanıyla) --- */
   --color-success: var(--app-success, #16a34a);
   --color-success-foreground: var(--app-success-foreground, #ffffff);
   --color-warning: var(--app-warning, #d97706);
@@ -64,10 +32,8 @@
   --color-violet: var(--app-violet, #7c3aed);
   --color-violet-foreground: var(--app-violet-foreground, #ffffff);
 
-  /* --- OPSİYONEL: dashboard token sözleşmesi (udb bileşenleri bekler) --- */
   --color-primary-soft: var(--app-primary-soft, rgba(37, 99, 235, 0.1));
 
-  /* --- OPSİYONEL: tipografi --- */
   --font-sans: var(
     --app-font-sans,
     ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,

package/src/styles/compile.css

@@ -1,16 +1,3 @@
-/**
- * @umituz/web-design-system — Tailwind v4 compile entry
- *
- * Input for the build step (`npm run build`) that produces
- * `dist/styles.css`: Tailwind + animations + the theme layer, with the
- * component source scanned for utility classes.
- *
- * Vanilla hosts import the precompiled output:
- *   @import "@umituz/web-design-system/styles.css";
- *
- * Tailwind v4 hosts compile this package's source themselves instead
- * (see README) and must NOT also import the precompiled stylesheet.
- */
 
 @import "tailwindcss";
 @import "tw-animate-css";

package/src/styles/source.css

@@ -1,15 +1,3 @@
-/**
- * @umituz/web-design-system — Tailwind v4 host entry
- *
- * Tailwind v4 hosts import this file right after `@import "tailwindcss"`:
- * it registers the theme token layer and scans the component sources so
- * the package's classes compile inside the host's own Tailwind build,
- * restyled by the host's `@theme` overrides. Hosts must NOT also import
- * the precompiled `dist/styles.css` (that is the vanilla-host path).
- *
- * The `@source` directive is resolved relative to this file, so hosts
- * never write node_modules paths themselves.
- */
 
 @import "./theme.css";
 @source "../presentation";

package/src/styles/theme.css

@@ -1,24 +1,5 @@
-/**
- * @umituz/web-design-system — theme layer (Tailwind v4 `@theme`)
- *
- * Single source of truth for colors, radii, fonts and shadows. Component
- * classes are semantic (`bg-primary`, `text-muted-foreground`, …) and bind
- * to the `--color-*` variables defined here, so hosts restyle the whole
- * package by overriding variables — no Tailwind rebuild required.
- *
- * The default palette mirrors @umituz/web-dashboard's tokens.css, so
- * dashboard adoption is visually regression-free.
- *
- * Dark mode: add `data-theme="dark"` or `class="dark"` on any ancestor
- * (typically <html>). The package never switches themes on its own.
- *
- * Tailwind v4 hosts that compile the package source themselves
- * (`@source "../node_modules/@umituz/web-design-system/src"`) import this
- * file; vanilla hosts import the precompiled `dist/styles.css`.
- */
 
 @theme {
-  /* Surfaces & text */
   --color-background: #f8fafc;
   --color-foreground: #0f172a;
   --color-card: #ffffff;
@@ -26,13 +7,11 @@
   --color-popover: #ffffff;
   --color-popover-foreground: #0f172a;
 
-  /* Brand */
   --color-primary: #2563eb;
   --color-primary-foreground: #ffffff;
   --color-secondary: #8b5cf6;
   --color-secondary-foreground: #ffffff;
 
-  /* Neutral */
   --color-muted: #f1f5f9;
   --color-muted-foreground: #64748b;
   --color-accent: #f1f5f9;
@@ -40,7 +19,6 @@
   --color-border: #e2e8f0;
   --color-input: #e2e8f0;
 
-  /* Semantic */
   --color-destructive: #dc2626;
   --color-destructive-foreground: #ffffff;
   --color-success: #16a34a;
@@ -52,27 +30,22 @@
   --color-violet: #7c3aed;
   --color-violet-foreground: #ffffff;
 
-  /* Focus */
   --color-ring: rgba(37, 99, 235, 0.45);
 
-  /* Radii (dashboard scale) */
   --radius-sm: 6px;
   --radius-md: 8px;
   --radius-lg: 12px;
   --radius-xl: 16px;
 
-  /* Typography */
   --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
     "Helvetica Neue", Arial, "Noto Sans", sans-serif;
   --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
     "Liberation Mono", "Courier New", monospace;
 
-  /* Elevation (dashboard scale) */
   --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
   --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
   --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.14);
 
-  /* Accordion (Radix --radix-accordion-content-height driven) */
   --animate-accordion-down: accordion-down 0.2s ease-out;
   --animate-accordion-up: accordion-up 0.2s ease-out;