@pattern-stack/frontend-patterns 0.0.5 → 0.0.6

package/dist/templates/DataTemplate.d.ts

@@ -0,0 +1,78 @@
+import React from 'react';
+import { type Column } from '../atoms/composed/DataTable';
+import { type SearchResult } from '../molecules/forms/SearchInput';
+export interface DataTemplateProps {
+    /** Page title */
+    title: string;
+    /** Page description */
+    description?: string;
+    /** Search functionality */
+    searchConfig?: {
+        placeholder?: string;
+        value?: string;
+        onChange?: (value: string) => void;
+        results?: SearchResult[];
+    };
+    /** Filter functionality */
+    filterConfig?: {
+        onFilter?: () => void;
+        filterCount?: number;
+    };
+    /** Data table configuration */
+    tableConfig: {
+        data: Record<string, unknown>[];
+        columns: Column<Record<string, unknown>>[];
+        loading?: boolean;
+        onRowClick?: (item: Record<string, unknown>) => void;
+    };
+    /** Pagination configuration */
+    paginationConfig?: {
+        currentPage: number;
+        totalPages: number;
+        onPageChange: (page: number) => void;
+    };
+    /** Action buttons */
+    actions?: {
+        primary?: {
+            label: string;
+            onClick: () => void;
+            icon?: React.ReactNode;
+        };
+        secondary?: Array<{
+            label: string;
+            onClick: () => void;
+            icon?: React.ReactNode;
+        }>;
+    };
+    /** Additional CSS classes */
+    className?: string;
+    /** Category-based styling */
+    category?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+    /** Empty state content */
+    emptyState?: React.ReactNode;
+}
+export declare const DataTemplate: React.FC<DataTemplateProps>;
+/**
+ * Data Detail Template
+ * Template for displaying detailed information about a single data item
+ */
+export interface DataDetailTemplateProps {
+    /** Page title */
+    title: string;
+    /** Page subtitle */
+    subtitle?: string;
+    /** Back navigation */
+    onBack?: () => void;
+    /** Detail content */
+    children: React.ReactNode;
+    /** Action buttons */
+    actions?: React.ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+    /** Category-based styling */
+    category?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+    /** Sidebar content */
+    sidebar?: React.ReactNode;
+}
+export declare const DataDetailTemplate: React.FC<DataDetailTemplateProps>;
+//# sourceMappingURL=DataTemplate.d.ts.map

package/dist/templates/DataTemplate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTemplate.d.ts","sourceRoot":"","sources":["../../src/templates/DataTemplate.tsx"],"names":[],"mappings":"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"}

package/dist/templates/admin/AdminCRUDTemplate.d.ts

@@ -0,0 +1,105 @@
+import React from 'react';
+export interface ResourceSchema {
+    /** Field definitions for the resource */
+    fields: ResourceField[];
+    /** Primary key field name */
+    primaryKey: string;
+    /** Display name for single resource */
+    displayName: string;
+    /** Display name for multiple resources */
+    displayNamePlural: string;
+}
+export interface ResourceField {
+    /** Field name/key */
+    name: string;
+    /** Display label */
+    label: string;
+    /** Field type */
+    type: 'text' | 'email' | 'number' | 'boolean' | 'date' | 'select' | 'textarea' | 'file';
+    /** Whether field is required */
+    required?: boolean;
+    /** Field validation rules */
+    validation?: Record<string, unknown>;
+    /** Options for select fields */
+    options?: Array<{
+        value: string;
+        label: string;
+    }>;
+    /** Whether field is searchable */
+    searchable?: boolean;
+    /** Whether field should be shown in table */
+    showInTable?: boolean;
+    /** Column width for table display */
+    width?: number;
+    /** Custom render function for table cells */
+    render?: (value: unknown, item: Record<string, unknown>) => React.ReactNode;
+}
+export interface CRUDPermissions {
+    /** Can view resources */
+    view: boolean;
+    /** Can create new resources */
+    create: boolean;
+    /** Can edit existing resources */
+    edit: boolean;
+    /** Can delete resources */
+    delete: boolean;
+    /** Can export data */
+    export: boolean;
+    /** Can import data */
+    import: boolean;
+    /** Can bulk edit */
+    bulkEdit: boolean;
+}
+export interface CRUDActions {
+    /** Create new resource */
+    onCreate?: (data: Record<string, unknown>) => Promise<void>;
+    /** Update existing resource */
+    onUpdate?: (id: string, data: Record<string, unknown>) => Promise<void>;
+    /** Delete resource */
+    onDelete?: (id: string) => Promise<void>;
+    /** Bulk delete resources */
+    onBulkDelete?: (ids: string[]) => Promise<void>;
+    /** Export data */
+    onExport?: (format: 'csv' | 'xlsx' | 'json') => Promise<void>;
+    /** Import data */
+    onImport?: (file: File) => Promise<void>;
+    /** Refresh data */
+    onRefresh?: () => Promise<void>;
+}
+export interface AdminCRUDTemplateProps {
+    /** Resource schema definition */
+    schema: ResourceSchema;
+    /** Current data */
+    data: Record<string, unknown>[];
+    /** User permissions */
+    permissions: CRUDPermissions;
+    /** CRUD action handlers */
+    actions: CRUDActions;
+    /** Whether data is loading */
+    isLoading?: boolean;
+    /** Filter configuration */
+    filterConfig?: {
+        activeFilters?: Array<{
+            key: string;
+            label: string;
+            value: string;
+        }>;
+        onFilter?: () => void;
+        onClearFilters?: () => void;
+    };
+    /** Additional custom actions */
+    customActions?: Array<{
+        label: string;
+        icon?: React.ReactNode;
+        onClick: () => void;
+        variant?: 'default' | 'outline' | 'destructive';
+    }>;
+    /** Additional CSS classes */
+    className?: string;
+    /** Category for styling */
+    category?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+    /** Custom empty state */
+    emptyState?: React.ReactNode;
+}
+export declare const AdminCRUDTemplate: React.FC<AdminCRUDTemplateProps>;
+//# sourceMappingURL=AdminCRUDTemplate.d.ts.map

package/dist/templates/admin/AdminCRUDTemplate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AdminCRUDTemplate.d.ts","sourceRoot":"","sources":["../../../src/templates/admin/AdminCRUDTemplate.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAqBxC,MAAM,WAAW,cAAc;IAC7B,yCAAyC;IACzC,MAAM,EAAE,aAAa,EAAE,CAAC;IACxB,6BAA6B;IAC7B,UAAU,EAAE,MAAM,CAAC;IACnB,uCAAuC;IACvC,WAAW,EAAE,MAAM,CAAC;IACpB,0CAA0C;IAC1C,iBAAiB,EAAE,MAAM,CAAC;CAC3B;AAED,MAAM,WAAW,aAAa;IAC5B,qBAAqB;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,iBAAiB;IACjB,IAAI,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,QAAQ,GAAG,UAAU,GAAG,MAAM,CAAC;IACxF,gCAAgC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6BAA6B;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACrC,gCAAgC;IAChC,OAAO,CAAC,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAClD,kCAAkC;IAClC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,6CAA6C;IAC7C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6CAA6C;IAC7C,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;CAC7E;AAED,MAAM,WAAW,eAAe;IAC9B,yBAAyB;IACzB,IAAI,EAAE,OAAO,CAAC;IACd,+BAA+B;IAC/B,MAAM,EAAE,OAAO,CAAC;IAChB,kCAAkC;IAClC,IAAI,EAAE,OAAO,CAAC;IACd,2BAA2B;IAC3B,MAAM,EAAE,OAAO,CAAC;IAChB,sBAAsB;IACtB,MAAM,EAAE,OAAO,CAAC;IAChB,sBAAsB;IACtB,MAAM,EAAE,OAAO,CAAC;IAChB,oBAAoB;IACpB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,WAAW;IAC1B,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5D,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACxE,sBAAsB;IACtB,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACzC,4BAA4B;IAC5B,YAAY,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAChD,kBAAkB;IAClB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,KAAK,GAAG,MAAM,GAAG,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9D,kBAAkB;IAClB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACzC,mBAAmB;IACnB,SAAS,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CACjC;AAED,MAAM,WAAW,sBAAsB;IACrC,iCAAiC;IACjC,MAAM,EAAE,cAAc,CAAC;IACvB,mBAAmB;IACnB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAC;IAChC,uBAAuB;IACvB,WAAW,EAAE,eAAe,CAAC;IAC7B,2BAA2B;IAC3B,OAAO,EAAE,WAAW,CAAC;IACrB,8BAA8B;IAC9B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,2BAA2B;IAC3B,YAAY,CAAC,EAAE;QACb,aAAa,CAAC,EAAE,KAAK,CAAC;YAAE,GAAG,EAAE,MAAM,CAAC;YAAC,KAAK,EAAE,MAAM,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,CAAC,CAAC;QACrE,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;QACtB,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;KAC7B,CAAC;IACF,gCAAgC;IAChC,aAAa,CAAC,EAAE,KAAK,CAAC;QACpB,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QACvB,OAAO,EAAE,MAAM,IAAI,CAAC;QACpB,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,aAAa,CAAC;KACjD,CAAC,CAAC;IACH,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACzC,yBAAyB;IACzB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CA4f9D,CAAC"}

package/dist/templates/admin/AdminDashboardTemplate.d.ts

@@ -0,0 +1,89 @@
+import React from 'react';
+export interface MetricCard {
+    /** Metric title */
+    title: string;
+    /** Main value to display */
+    value: string | number;
+    /** Change percentage */
+    change?: number;
+    /** Change period description */
+    changePeriod?: string;
+    /** Metric category for styling */
+    category?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+    /** Custom icon */
+    icon?: React.ReactNode;
+    /** Click handler */
+    onClick?: () => void;
+}
+export interface ChartConfig {
+    /** Chart title */
+    title: string;
+    /** Chart type */
+    type: 'line' | 'bar' | 'pie' | 'area';
+    /** Chart data */
+    data: Array<{
+        label: string;
+        value: number;
+        category?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+    }>;
+    /** Chart configuration */
+    config?: Record<string, unknown>;
+    /** Chart category for styling */
+    category?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+}
+export interface ActivityItem {
+    /** Activity ID */
+    id: string;
+    /** Activity type */
+    type: 'user' | 'system' | 'security' | 'content' | 'error';
+    /** Activity message */
+    message: string;
+    /** Activity timestamp */
+    timestamp: Date;
+    /** User who performed the activity */
+    user?: string;
+    /** Additional metadata */
+    metadata?: Record<string, unknown>;
+}
+export interface AlertItem {
+    /** Alert ID */
+    id: string;
+    /** Alert severity */
+    severity: 'low' | 'medium' | 'high' | 'critical';
+    /** Alert title */
+    title: string;
+    /** Alert description */
+    description: string;
+    /** Alert timestamp */
+    timestamp: Date;
+    /** Whether alert is resolved */
+    resolved?: boolean;
+    /** Action to resolve alert */
+    onResolve?: () => void;
+}
+export interface AdminDashboardTemplateProps {
+    /** Dashboard title */
+    title?: string;
+    /** Dashboard description */
+    description?: string;
+    /** Key metrics to display */
+    metrics: MetricCard[];
+    /** Charts configuration */
+    charts?: ChartConfig[];
+    /** Recent activities */
+    activities?: ActivityItem[];
+    /** System alerts */
+    alerts?: AlertItem[];
+    /** Additional actions in header */
+    actions?: React.ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+    /** Whether data is loading */
+    isLoading?: boolean;
+    /** Refresh handler */
+    onRefresh?: () => void;
+    /** Last updated timestamp */
+    lastUpdated?: Date;
+}
+export declare const AdminDashboardTemplate: React.FC<AdminDashboardTemplateProps>;
+//# sourceMappingURL=AdminDashboardTemplate.d.ts.map

package/dist/templates/admin/AdminDashboardTemplate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AdminDashboardTemplate.d.ts","sourceRoot":"","sources":["../../../src/templates/admin/AdminDashboardTemplate.tsx"],"names":[],"mappings":"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"}

package/dist/templates/admin/AdminDetailTemplate.d.ts

@@ -0,0 +1,132 @@
+import React from 'react';
+import { type Column } from '../../atoms/composed/DataTable';
+export interface TabConfig {
+    /** Tab ID */
+    id: string;
+    /** Tab label */
+    label: string;
+    /** Tab icon */
+    icon?: React.ReactNode;
+    /** Tab content */
+    content: React.ReactNode;
+    /** Whether tab is disabled */
+    disabled?: boolean;
+    /** Badge text for tab */
+    badge?: string | number;
+}
+export interface ActionConfig {
+    /** Action ID */
+    id: string;
+    /** Action label */
+    label: string;
+    /** Action icon */
+    icon?: React.ReactNode;
+    /** Action variant */
+    variant?: 'default' | 'outline' | 'destructive' | 'secondary';
+    /** Action handler */
+    onClick: () => void;
+    /** Whether action is disabled */
+    disabled?: boolean;
+    /** Action permission required */
+    permission?: string;
+}
+export interface FieldSection {
+    /** Section title */
+    title: string;
+    /** Section description */
+    description?: string;
+    /** Section fields */
+    fields: DetailField[];
+    /** Section category for styling */
+    category?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+    /** Whether section is collapsible */
+    collapsible?: boolean;
+    /** Whether section is initially collapsed */
+    defaultCollapsed?: boolean;
+}
+export interface DetailField {
+    /** Field key */
+    key: string;
+    /** Field label */
+    label: string;
+    /** Field type for rendering */
+    type?: 'text' | 'email' | 'phone' | 'url' | 'date' | 'datetime' | 'boolean' | 'badge' | 'avatar' | 'json' | 'custom';
+    /** Custom render function */
+    render?: (value: unknown, data: Record<string, unknown>) => React.ReactNode;
+    /** Whether field is editable inline */
+    editable?: boolean;
+    /** Field validation for editing */
+    validation?: Record<string, unknown>;
+    /** Copy to clipboard button */
+    copyable?: boolean;
+}
+export interface RelatedData {
+    /** Related data title */
+    title: string;
+    /** Related data description */
+    description?: string;
+    /** Related data items */
+    data: Record<string, unknown>[];
+    /** Columns for related data table */
+    columns: Column<Record<string, unknown>>[];
+    /** Actions for related data */
+    actions?: ActionConfig[];
+    /** Whether to show pagination */
+    showPagination?: boolean;
+    /** Category for styling */
+    category?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+}
+export interface AuditEntry {
+    /** Entry ID */
+    id: string;
+    /** Action performed */
+    action: string;
+    /** User who performed action */
+    user: string;
+    /** Timestamp */
+    timestamp: Date;
+    /** Fields changed */
+    changes?: Array<{
+        field: string;
+        oldValue?: unknown;
+        newValue?: unknown;
+    }>;
+    /** Additional metadata */
+    metadata?: Record<string, unknown>;
+}
+export interface AdminDetailTemplateProps {
+    /** Resource title */
+    title: string;
+    /** Resource subtitle */
+    subtitle?: string;
+    /** Resource type */
+    resourceType: string;
+    /** Main resource data */
+    data: Record<string, unknown>;
+    /** Field sections to display */
+    sections: FieldSection[];
+    /** Tab configuration */
+    tabs?: TabConfig[];
+    /** Available actions */
+    actions?: ActionConfig[];
+    /** Related data sections */
+    relatedData?: RelatedData[];
+    /** Audit trail */
+    auditTrail?: AuditEntry[];
+    /** Back navigation handler */
+    onBack?: () => void;
+    /** Data update handler */
+    onUpdate?: (field: string, value: unknown) => Promise<void>;
+    /** Whether data is loading */
+    isLoading?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+    /** Category for styling */
+    category?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+    /** Custom sidebar content */
+    sidebar?: React.ReactNode;
+    /** Whether to show audit trail */
+    showAuditTrail?: boolean;
+}
+export declare const AdminDetailTemplate: React.FC<AdminDetailTemplateProps>;
+//# sourceMappingURL=AdminDetailTemplate.d.ts.map

package/dist/templates/admin/AdminDetailTemplate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AdminDetailTemplate.d.ts","sourceRoot":"","sources":["../../../src/templates/admin/AdminDetailTemplate.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAOxC,OAAO,EAAa,KAAK,MAAM,EAAE,MAAM,gCAAgC,CAAC;AAaxE,MAAM,WAAW,SAAS;IACxB,aAAa;IACb,EAAE,EAAE,MAAM,CAAC;IACX,gBAAgB;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,eAAe;IACf,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,kBAAkB;IAClB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,YAAY;IAC3B,gBAAgB;IAChB,EAAE,EAAE,MAAM,CAAC;IACX,mBAAmB;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,kBAAkB;IAClB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,qBAAqB;IACrB,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,aAAa,GAAG,WAAW,CAAC;IAC9D,qBAAqB;IACrB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iCAAiC;IACjC,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,YAAY;IAC3B,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,0BAA0B;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qBAAqB;IACrB,MAAM,EAAE,WAAW,EAAE,CAAC;IACtB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACzC,qCAAqC;IACrC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,6CAA6C;IAC7C,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,MAAM,WAAW,WAAW;IAC1B,gBAAgB;IAChB,GAAG,EAAE,MAAM,CAAC;IACZ,kBAAkB;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,+BAA+B;IAC/B,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,OAAO,GAAG,KAAK,GAAG,MAAM,GAAG,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,QAAQ,CAAC;IACrH,6BAA6B;IAC7B,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IAC5E,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mCAAmC;IACnC,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACrC,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,WAAW;IAC1B,yBAAyB;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,+BAA+B;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yBAAyB;IACzB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAC;IAChC,qCAAqC;IACrC,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,EAAE,CAAC;IAC3C,+BAA+B;IAC/B,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,iCAAiC;IACjC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;CAC1C;AAED,MAAM,WAAW,UAAU;IACzB,eAAe;IACf,EAAE,EAAE,MAAM,CAAC;IACX,uBAAuB;IACvB,MAAM,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,gBAAgB;IAChB,SAAS,EAAE,IAAI,CAAC;IAChB,qBAAqB;IACrB,OAAO,CAAC,EAAE,KAAK,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;KACpB,CAAC,CAAC;IACH,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACpC;AAED,MAAM,WAAW,wBAAwB;IACvC,qBAAqB;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,wBAAwB;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oBAAoB;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,yBAAyB;IACzB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC9B,gCAAgC;IAChC,QAAQ,EAAE,YAAY,EAAE,CAAC;IACzB,wBAAwB;IACxB,IAAI,CAAC,EAAE,SAAS,EAAE,CAAC;IACnB,wBAAwB;IACxB,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,4BAA4B;IAC5B,WAAW,CAAC,EAAE,WAAW,EAAE,CAAC;IAC5B,kBAAkB;IAClB,UAAU,CAAC,EAAE,UAAU,EAAE,CAAC;IAC1B,8BAA8B;IAC9B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5D,8BAA8B;IAC9B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACzC,6BAA6B;IAC7B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,kCAAkC;IAClC,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAuZlE,CAAC"}

package/dist/templates/admin/index.d.ts

@@ -0,0 +1,4 @@
+export { AdminDashboardTemplate, type AdminDashboardTemplateProps, type MetricCard, type ChartConfig, type ActivityItem, type AlertItem } from './AdminDashboardTemplate';
+export { AdminCRUDTemplate, type AdminCRUDTemplateProps, type ResourceSchema, type ResourceField, type CRUDPermissions, type CRUDActions } from './AdminCRUDTemplate';
+export { AdminDetailTemplate, type AdminDetailTemplateProps, type TabConfig, type ActionConfig, type FieldSection, type DetailField, type RelatedData, type AuditEntry } from './AdminDetailTemplate';
+//# sourceMappingURL=index.d.ts.map

package/dist/templates/admin/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/templates/admin/index.ts"],"names":[],"mappings":"AACA,OAAO,EACL,sBAAsB,EACtB,KAAK,2BAA2B,EAChC,KAAK,UAAU,EACf,KAAK,WAAW,EAChB,KAAK,YAAY,EACjB,KAAK,SAAS,EACf,MAAM,0BAA0B,CAAC;AAElC,OAAO,EACL,iBAAiB,EACjB,KAAK,sBAAsB,EAC3B,KAAK,cAAc,EACnB,KAAK,aAAa,EAClB,KAAK,eAAe,EACpB,KAAK,WAAW,EACjB,MAAM,qBAAqB,CAAC;AAE7B,OAAO,EACL,mBAAmB,EACnB,KAAK,wBAAwB,EAC7B,KAAK,SAAS,EACd,KAAK,YAAY,EACjB,KAAK,YAAY,EACjB,KAAK,WAAW,EAChB,KAAK,WAAW,EAChB,KAAK,UAAU,EAChB,MAAM,uBAAuB,CAAC"}

package/dist/templates/factory.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import type { ReactNode } from 'react';
+import type { AuthConfig, NavigationConfig } from '../atoms/types';
+export interface AppConfig {
+    title: string;
+    description?: string;
+    version?: string;
+    enableAuth?: boolean;
+    enableQuery?: boolean;
+    enableTheming?: boolean;
+    enableRouting?: boolean;
+    apiUrl?: string;
+    apiTimeout?: number;
+    theme?: string;
+    darkMode?: boolean;
+    auth?: AuthConfig;
+    navigation?: NavigationConfig;
+    customProviders?: React.ComponentType<{
+        children: ReactNode;
+    }>[];
+}
+export interface AppInstance {
+    render: () => ReactNode;
+    addRoutes: (path: string, component: ReactNode) => void;
+    mount: (elementId?: string) => void;
+}
+export declare function createReactApp(config: AppConfig | string): AppInstance;
+export declare function createSimpleApp(title: string): AppInstance;
+//# sourceMappingURL=factory.d.ts.map

package/dist/templates/factory.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"factory.d.ts","sourceRoot":"","sources":["../../src/templates/factory.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAQtC,OAAO,KAAK,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AAGlE,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,UAAU,CAAC,EAAE,gBAAgB,CAAA;IAC7B,eAAe,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,QAAQ,EAAE,SAAS,CAAA;KAAE,CAAC,EAAE,CAAA;CACjE;AAGD,MAAM,WAAW,WAAW;IAC1B,MAAM,EAAE,MAAM,SAAS,CAAA;IACvB,SAAS,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,KAAK,IAAI,CAAA;IACvD,KAAK,EAAE,CAAC,SAAS,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;CACpC;AAGD,wBAAgB,cAAc,CAAC,MAAM,EAAE,SAAS,GAAG,MAAM,GAAG,WAAW,CAoItE;AAGD,wBAAgB,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,WAAW,CAE1D"}

package/dist/templates/index.d.ts

@@ -0,0 +1,7 @@
+export { ComponentShowcaseTemplate } from './ComponentShowcaseTemplate';
+export { DashboardTemplate, DashboardGrid, DashboardCard, type DashboardTemplateProps, type DashboardGridProps, type DashboardCardProps } from './DashboardTemplate';
+export { AuthTemplate, AuthFormField, AuthLink, AuthDivider, type AuthTemplateProps, type AuthFormFieldProps, type AuthLinkProps, type AuthDividerProps } from './AuthTemplate';
+export { DataTemplate, DataDetailTemplate, type DataTemplateProps, type DataDetailTemplateProps } from './DataTemplate';
+export * from './admin';
+export { createReactApp, createSimpleApp, type AppConfig, type AppInstance } from './factory';
+//# sourceMappingURL=index.d.ts.map

package/dist/templates/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/templates/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;AACxE,OAAO,EACL,iBAAiB,EACjB,aAAa,EACb,aAAa,EACb,KAAK,sBAAsB,EAC3B,KAAK,kBAAkB,EACvB,KAAK,kBAAkB,EACxB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EACL,YAAY,EACZ,aAAa,EACb,QAAQ,EACR,WAAW,EACX,KAAK,iBAAiB,EACtB,KAAK,kBAAkB,EACvB,KAAK,aAAa,EAClB,KAAK,gBAAgB,EACtB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EACL,YAAY,EACZ,kBAAkB,EAClB,KAAK,iBAAiB,EACtB,KAAK,uBAAuB,EAC7B,MAAM,gBAAgB,CAAC;AAGxB,cAAc,SAAS,CAAC;AAOxB,OAAO,EACL,cAAc,EACd,eAAe,EACf,KAAK,SAAS,EACd,KAAK,WAAW,EACjB,MAAM,WAAW,CAAC"}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@pattern-stack/frontend-patterns",
   "description": "Production-ready React frontend template with atomic architecture patterns. Build ultra-lean applications by importing shared UI foundation patterns.",
   "private": false,
-  "version": "0.0.5",
+  "version": "0.0.6",
   "keywords": [
     "react",
     "typescript",
@@ -44,7 +44,8 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc -b && vite build",
-    "build:lib": "npm run clean && vite build --mode library",
+    "build:lib": "npm run clean && vite build --mode library && npm run build:types",
+    "build:types": "tsc --project tsconfig.lib.json",
     "clean": "rm -rf dist",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",

package/src/__tests__/atoms/composed/databadge.test.tsx

@@ -0,0 +1,106 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '../../utils'
+import { DataBadge } from '../../../atoms/composed/DataBadge'
+
+describe('DataBadge (Composed)', () => {
+  describe('status variant', () => {
+    it('renders success status badge', () => {
+      render(<DataBadge variant="status" status="success">Active</DataBadge>)
+      
+      const badge = screen.getByText('Active')
+      expect(badge).toBeInTheDocument()
+      expect(badge.className).toContain('status-success')
+    })
+
+    it('renders warning status badge', () => {
+      render(<DataBadge variant="status" status="warning">Pending</DataBadge>)
+      
+      const badge = screen.getByText('Pending')
+      expect(badge.className).toContain('status-warning')
+    })
+
+    it('renders error status badge', () => {
+      render(<DataBadge variant="status" status="error">Failed</DataBadge>)
+      
+      const badge = screen.getByText('Failed')
+      expect(badge.className).toContain('status-error')
+    })
+
+    it('renders info status badge', () => {
+      render(<DataBadge variant="status" status="info">Processing</DataBadge>)
+      
+      const badge = screen.getByText('Processing')
+      expect(badge.className).toContain('status-info')
+    })
+
+    it('renders neutral status badge', () => {
+      render(<DataBadge variant="status" status="neutral">Draft</DataBadge>)
+      
+      const badge = screen.getByText('Draft')
+      expect(badge.className).toContain('status-neutral')
+    })
+  })
+
+  describe('category variant', () => {
+    it('renders category 1 badge', () => {
+      render(<DataBadge variant="category" category={1}>Category 1</DataBadge>)
+      
+      const badge = screen.getByText('Category 1')
+      expect(badge).toBeInTheDocument()
+      expect(badge.className).toContain('badge-category-1')
+    })
+
+    it('renders category 5 badge', () => {
+      render(<DataBadge variant="category" category={5}>Category 5</DataBadge>)
+      
+      const badge = screen.getByText('Category 5')
+      expect(badge.className).toContain('badge-category-5')
+    })
+
+    it('renders category 8 badge', () => {
+      render(<DataBadge variant="category" category={8}>Category 8</DataBadge>)
+      
+      const badge = screen.getByText('Category 8')
+      expect(badge.className).toContain('badge-category-8')
+    })
+  })
+
+  it('applies additional className props', () => {
+    render(
+      <DataBadge variant="status" status="success" className="custom-class">
+        Custom
+      </DataBadge>
+    )
+    
+    const badge = screen.getByText('Custom')
+    expect(badge.className).toContain('custom-class')
+  })
+
+  it('renders with component data attribute', () => {
+    render(
+      <DataBadge variant="status" status="info">
+        Test
+      </DataBadge>
+    )
+    
+    expect(screen.getByText('Test')).toHaveAttribute('data-component-name', 'DataBadge')
+  })
+
+  it('automatically uses default category', () => {
+    render(<DataBadge>Default</DataBadge>)
+    
+    const badge = screen.getByText('Default')
+    expect(badge.className).toContain('badge-category-1')
+  })
+
+  it('handles string and number status values', () => {
+    const { rerender } = render(
+      <DataBadge variant="status" status="success">String Status</DataBadge>
+    )
+    
+    expect(screen.getByText('String Status')).toBeInTheDocument()
+    
+    rerender(<DataBadge variant="category" category={3}>Number Category</DataBadge>)
+    expect(screen.getByText('Number Category')).toBeInTheDocument()
+  })
+})