ezux 1.0.0

package/dist/shared/types/commonTypes.d.ts

@@ -0,0 +1,101 @@
+import { default as React } from 'react';
+/**
+ * Base Component Types
+ */
+export interface BaseComponentProps {
+    /**
+     * Unique identifier for the component instance
+     * @group Properties
+     */
+    id?: string;
+    /**
+     * Custom class names for styling
+     * @group Properties
+     */
+    className?: string;
+    /**
+     * Inline styles
+     * @group Properties
+     */
+    style?: React.CSSProperties;
+    /**
+     * Data attribute for testing
+     * @group Properties
+     */
+    dataTestId?: string;
+    /**
+     * Direction of the text (ltr, rtl, auto)
+     * @group Properties
+     */
+    dir?: 'ltr' | 'rtl' | 'auto';
+}
+/**
+ * State Types
+ */
+export interface State<T> {
+    data: T;
+    loading: boolean;
+    error: Error | null;
+    initialized: boolean;
+}
+/**
+ * Event Types
+ */
+export interface BaseEvent {
+    timestamp: Date;
+    source: string;
+}
+export interface SelectionEvent<T> extends BaseEvent {
+    selected: T[];
+    deselected: T[];
+    changed: boolean;
+}
+/**
+ * Service Types
+ */
+export interface Service<T> {
+    name: string;
+    initialize(): Promise<void>;
+    cleanup(): void;
+    getState(): T;
+    setState(state: T): void;
+}
+/**
+ * Utility Types
+ */
+export type DeepPartial<T> = {
+    [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
+};
+export type PickPartial<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
+/**
+ * Tree Manipulation Types
+ */
+export interface TreeNode {
+    id: string;
+    label: string;
+    children?: TreeNode[];
+    icon?: React.ReactNode;
+    level?: number;
+    parentId?: string;
+    isLeaf?: boolean;
+    isLoading?: boolean;
+    isLoaded?: boolean;
+    [key: string]: any;
+}
+/**
+ * Filter Utilities Types
+ */
+export type FilterOperator = 'contains' | 'doesNotContain' | 'shouldContain' | 'equals' | 'notEquals' | 'doesNotEqual' | 'startsWith' | 'endsWith' | 'empty' | 'notEmpty' | 'gt' | 'greaterThan' | 'lt' | 'lessThan' | 'gte' | 'greaterThanOrEqual' | 'lte' | 'lessThanOrEqual' | 'between';
+export interface FilterRule {
+    kind: 'rule';
+    id: string;
+    field: string;
+    operator: FilterOperator;
+    value: any;
+}
+export interface FilterGroup {
+    kind: 'group';
+    id: string;
+    logic: 'AND' | 'OR';
+    filters: (FilterRule | FilterGroup)[];
+}

package/dist/shared/types/index.d.ts

@@ -0,0 +1,2 @@
+export * from './BaseProps';
+export * from './commonTypes';

package/dist/shared/utils/canvasUtils.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Helper to convert stroke points to SVG path data (Quadratic Bezier).
+ */
+export declare function getSvgPathFromStroke(stroke: number[][]): string;
+/**
+ * Standardized way to get a stroke path string from an outline or points with options.
+ */
+export declare function getStrokePath(stroke: number[][], options?: {
+    size?: number;
+    thinning?: number;
+    smoothing?: number;
+    streamline?: number;
+    simulatePressure?: boolean;
+    start?: any;
+    end?: any;
+}): string;

package/dist/shared/utils/commonUtils.d.ts

@@ -0,0 +1,28 @@
+import { TreeNode, FilterGroup, FilterRule } from '../types/commonTypes';
+import * as formatters from './formatUtils';
+/**
+ * Data Transformation Utilities
+ */
+export declare function transformData<T>(data: any[], transformFn: (item: any) => T): T[];
+/**
+ * Validation Utilities
+ */
+export declare const validateRequired: (value: any) => import('./validationUtils').ValidationResult;
+/**
+ * Formatting Utilities
+ */
+export declare const currencyFormatter: Intl.NumberFormat;
+export declare const numberFormatter: Intl.NumberFormat;
+export declare const percentFormatter: Intl.NumberFormat;
+export declare const formatNumber: typeof formatters.formatNumber;
+export declare const formatDate: typeof formatters.formatDate;
+/**
+ * Tree Manipulation Utilities
+ */
+export declare const findNodeById: (nodes: TreeNode[], id: string) => TreeNode | undefined;
+export declare const updateNodeInNodes: (nodes: TreeNode[], id: string, updates: Partial<TreeNode>) => TreeNode[];
+/**
+ * Filter Utilities
+ */
+export declare const checkRule: (rule: FilterRule, getValue: (field: string) => any) => boolean;
+export declare const checkGroup: (group: FilterGroup, getValue: (field: string) => any) => boolean;

package/dist/shared/utils/csvUtils.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Utility to convert an array of objects to a CSV string.
+ */
+export declare function convertToCSV(data: any[], columns: {
+    id: string;
+    header: string;
+}[]): string;

package/dist/shared/utils/dateUtils.d.ts

@@ -0,0 +1,5 @@
+export declare const dateUtils: {
+    formatDate: (date: Date | string | number | null | undefined, formatStr?: string) => string;
+    formatDateTime: (date: Date | string | number | null | undefined, formatStr?: string) => string;
+    isValidDate: (date: any) => boolean;
+};

package/dist/shared/utils/dndUtils.d.ts

@@ -0,0 +1,16 @@
+import { DragEndEvent } from '@dnd-kit/core';
+/**
+ * Shared DnD utilities for components.
+ */
+/**
+ * Basic arrayMove implementation to avoid dependency on @dnd-kit/sortable
+ */
+export declare const arrayMove: <T>(array: T[], from: number, to: number) => T[];
+/**
+ * Helper to handle basic array reordering after drag and drop
+ */
+export declare const reorderArray: <T>(items: T[], event: DragEndEvent) => T[];
+/**
+ * Checks if a drop is valid based on types
+ */
+export declare const isValidDrop: (activeType: string, overType: string, allowedTypes: string[]) => boolean;

package/dist/shared/utils/ezStyleUtils.d.ts

@@ -0,0 +1,64 @@
+import { ClassValue } from 'clsx';
+/**
+ * Merges Tailwind classes safely
+ */
+export declare function cn(...inputs: ClassValue[]): string;
+/**
+ * Shared density styles for all components
+ */
+export declare const densityStyles: {
+    compact: string;
+    standard: string;
+    comfortable: string;
+};
+/**
+ * Helper to get density class based on prop
+ */
+export declare const getDensityClass: (density?: "compact" | "standard" | "comfortable") => string;
+/**
+ * Common flex container styles
+ */
+export declare const flexCenter = "flex items-center justify-center";
+export declare const flexBetween = "flex items-center justify-between";
+export declare const flexStart = "flex items-center justify-start";
+export declare const flexEnd = "flex items-center justify-end";
+export declare const flexColumn = "flex flex-col";
+/**
+ * Common grid styles
+ */
+export declare const gridCenter = "grid place-items-center";
+/**
+ * Common interactive element styles
+ */
+export declare const interactiveStyles: {
+    base: string;
+    hover: string;
+    active: string;
+    disabled: string;
+};
+/**
+ * Helper to generate interactive classes
+ */
+export declare const getInteractiveClass: (disabled?: boolean) => string;
+/**
+ * Common border styles
+ */
+export declare const borderStyles: {
+    default: string;
+    bottom: string;
+    top: string;
+    left: string;
+    right: string;
+    none: string;
+};
+/**
+ * Scrollbar utilities (for custom scrollbars if needed)
+ */
+export declare const scrollbarStyles: {
+    hidden: string;
+    thin: string;
+};
+/**
+ * Text ellipsis styles
+ */
+export declare const ellipsisStyles = "truncate whitespace-nowrap overflow-hidden text-ellipsis";

package/dist/shared/utils/formatUtils.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Standard formatters with fallback to en-US.
+ * These are static - use the functional versions for dynamic locale support.
+ */
+export declare const currencyFormatter: Intl.NumberFormat;
+export declare const numberFormatter: Intl.NumberFormat;
+export declare const percentFormatter: Intl.NumberFormat;
+export declare function formatNumber(value: number | null | undefined, options?: {
+    format?: 'integer' | 'float' | 'currency' | 'percentage';
+    decimals?: number;
+    locale?: string;
+    currency?: string;
+}): string;
+export declare function formatDate(value: Date | string | null | undefined, options?: {
+    format?: 'short' | 'long' | 'relative' | 'iso';
+    locale?: string;
+}): string;
+export declare const formatCurrency: (value: number, locale?: string, currency?: string) => string;
+export declare const formatPercent: (value: number, locale?: string) => string;
+export declare const formatDateTime: (date: Date | string, locale?: string) => string;

package/dist/shared/utils/imperativeApiUtils.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Creates common CRUD methods for imperative APIs
+ */
+export declare const createCRUDMethods: <T>(getData: () => T[] | Promise<T[]>, addItem: (item: T) => void | Promise<any>, updateItem: (item: T) => void | Promise<any>, deleteItem: (id: string | number) => void | Promise<void>) => {
+    getData: () => T[] | Promise<T[]>;
+    addRecord: (item: T) => void | Promise<any>;
+    updateRecord: (item: T) => void | Promise<any>;
+    deleteRecord: (id: string | number) => void | Promise<void>;
+};
+/**
+ * Creates common spinner control methods
+ */
+export declare const createSpinnerMethods: (showSpinner: () => void, hideSpinner: () => void) => {
+    showSpinner: () => void;
+    hideSpinner: () => void;
+};
+/**
+ * Creates common refresh methods
+ */
+export declare const createRefreshMethods: (refresh: () => void, forceUpdate?: () => void) => Record<string, any>;
+/**
+ * Creates common selection methods
+ */
+export declare const createSelectionMethods: <T>(selectItem: (id: string | number) => void, selectItems: (ids: (string | number)[]) => void, clearSelection: () => void, selectAll: () => void, getSelectedItems: () => T[], selectRowByRange?: (start: string | number, end: string | number) => void) => Record<string, any>;
+/**
+ * Creates common navigation methods
+ */
+export declare const createNavigationMethods: (scrollToIndex: (index: number) => void, goToPage?: (page: number) => void) => Record<string, any>;
+/**
+ * Creates common export methods
+ */
+export declare const createExportMethods: (exportToCsv?: () => void, exportToExcel?: () => void, print?: () => void) => Record<string, any>;
+/**
+ * Validates imperative API for completeness and consistency
+ */
+export declare const validateImperativeAPI: (api: Record<string, any>, requiredMethods: string[]) => boolean;

package/dist/shared/utils/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Shared utilities index
+ * Exports all shared utilities for easy importing
+ */
+export * from './imperativeApiUtils';
+export * from './styleUtils';
+export { transformData, findNodeById, updateNodeInNodes, checkRule, checkGroup } from './commonUtils';
+export * from './serviceUtils';
+export * from './validationUtils';
+export * from './formatUtils';
+export * from './dndUtils';

package/dist/shared/utils/renderUtils.d.ts

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+/**
+ * Renders a component or node that can be passed as a prop.
+ * Handles React elements, functional/class components, and raw nodes.
+ */
+export declare const renderInjected: (ComponentOrNode: any, props?: any) => React.ReactNode;

package/dist/shared/utils/serviceUtils.d.ts

@@ -0,0 +1,10 @@
+import { ServiceRegistry, IService } from '../services/ServiceRegistry';
+/**
+ * Ensures a service is registered in the registry and returns it.
+ * If not present, creates a new instance using the factory.
+ */
+export declare const getOrRegisterService: <T extends IService>(registry: ServiceRegistry, key: string, factory: () => T) => T;
+/**
+ * Ensures multiple services are registered in the registry.
+ */
+export declare const ensureServices: (registry: ServiceRegistry, services: Record<string, () => IService>) => void;

package/dist/shared/utils/styleUtils.d.ts

@@ -0,0 +1,66 @@
+/**
+ * Shared style utilities to reduce inline style computations
+ */
+export type Density = 'compact' | 'standard' | 'comfortable';
+export type PinnedPosition = 'left' | 'right' | false;
+/**
+ * Get density-based class names for height
+ */
+export declare const getDensityHeightClasses: (density?: Density) => string;
+/**
+ * Get density-based class names for padding
+ */
+export declare const getDensityPaddingClasses: (density?: Density) => string;
+/**
+ * Get density-based text size classes
+ */
+export declare const getDensityTextClasses: (density?: Density) => string;
+/**
+ * Get complete density classes (combines height, padding, text)
+ */
+export declare const getDensityClasses: (density?: Density) => string;
+/**
+ * Get pinned column/row styles
+ */
+export declare const getPinnedStyles: (isPinned: PinnedPosition, position: number, dir?: "ltr" | "rtl") => React.CSSProperties;
+/**
+ * Get pinned column/row class names
+ */
+export declare const getPinnedClasses: (isPinned: PinnedPosition, dir?: "ltr" | "rtl") => string;
+/**
+ * Get alignment classes
+ */
+export declare const getAlignmentClasses: (align?: "left" | "center" | "right", dir?: "ltr" | "rtl") => string;
+/**
+ * Get cell/row selection classes
+ * Excel-like: Uses border for focus (thick border on all sides)
+ */
+export declare const getSelectionClasses: (isSelected: boolean, isFocused: boolean) => string;
+/**
+ * Get hover classes
+ */
+export declare const getHoverClasses: (enabled?: boolean) => string;
+/**
+ * Get drag-and-drop classes
+ */
+export declare const getDragDropClasses: (isDragging: boolean, isOver: boolean) => string;
+/**
+ * Get border classes
+ */
+export declare const getBorderClasses: (position?: "top" | "bottom" | "left" | "right" | "all", variant?: "default" | "muted") => string;
+/**
+ * Get truncation/wrapping classes
+ */
+export declare const getTextOverflowClasses: (mode?: "truncate" | "wrap" | "ellipsis", enableTooltip?: boolean) => string;
+/**
+ * Get sticky classes
+ */
+export declare const getStickyClasses: (position?: "top" | "bottom", zIndex?: number) => string;
+/**
+ * Get grid line classes
+ */
+export declare const getGridLinesClasses: (gridLines?: "Both" | "Horizontal" | "Vertical" | "None", isLastColumn?: boolean, dir?: "ltr" | "rtl") => string;
+/**
+ * Combine multiple style utilities
+ */
+export declare const combineStyleClasses: (...classes: (string | undefined | false)[]) => string;

package/dist/shared/utils/validationUtils.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Shared validation utilities for components.
+ */
+export type ValidationResult = boolean | string;
+export interface ValidationProps<T = any> {
+    fieldName: string;
+    value: any;
+    data: T;
+}
+export declare const validateRequired: (value: any) => ValidationResult;
+export declare const validateEmail: (value: string) => ValidationResult;
+export declare const validateNumber: (value: any) => ValidationResult;
+/**
+ * Helper to combine multiple validation results
+ */
+export declare const combineValidation: (...results: ValidationResult[]) => ValidationResult;

package/package.json

@@ -0,0 +1,101 @@
+{
+    "name": "ezux",
+    "version": "1.0.0",
+    "description": "A comprehensive, type-safe TanStack First Advance component library designed for modern enterprise applications.",
+    "keywords": [
+        "react",
+        "components",
+        "table",
+        "scheduler",
+        "kanban",
+        "dashboard",
+        "enterprise",
+        "ui-kit",
+        "tanstack",
+        "typescript"
+    ],
+    "homepage": "https://ezux.dev",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/ezux-org/ezux"
+    },
+    "author": "Zeeshan Sayed",
+    "license": "MIT",
+    "type": "module",
+    "sideEffects": false,
+    "files": [
+        "dist"
+    ],
+    "main": "./dist/ezux.umd.js",
+    "module": "./dist/ezux.es.js",
+    "types": "./dist/index.d.ts",
+    "exports": {
+        ".": {
+            "import": "./dist/ezux.es.js",
+            "require": "./dist/ezux.umd.js"
+        }
+    },
+    "scripts": {
+        "dev": "vite",
+        "build": "tsc && vite build",
+        "preview": "vite preview",
+        "test": "vitest run",
+        "test:ui": "vitest --ui",
+        "test:watch": "vitest",
+        "test:coverage": "vitest run --coverage"
+    },
+    "peerDependencies": {
+        "@dnd-kit/modifiers": "^9.0.0",
+        "@dnd-kit/utilities": "^3.2.2",
+        "@radix-ui/react-context-menu": "^2.2.16",
+        "@radix-ui/react-dropdown-menu": "^2.1.16",
+        "@radix-ui/react-label": "^2.1.8",
+        "@radix-ui/react-radio-group": "^1.3.8",
+        "@radix-ui/react-scroll-area": "^1.2.10",
+        "@radix-ui/react-slot": "^1.2.4",
+        "@radix-ui/react-switch": "^1.2.6",
+        "@radix-ui/react-tooltip": "^1.2.8",
+        "@tanstack/react-form": "^1.28.0",
+        "@tanstack/react-table": "^8.21.3",
+        "@tanstack/react-virtual": "^3.13.18",
+        "@tanstack/store": "^0.8.0",
+        "@tanstack/virtual-core": "^3.13.18",
+        "dompurify": "^3.3.1",
+        "react": "^19.2.3",
+        "react-dom": "^19.2.3",
+        "rrule": "^2.8.1"
+    },
+    "dependencies": {
+        "@dnd-kit/core": "^6.3.1",
+        "@types/dompurify": "^3.0.5",
+        "class-variance-authority": "^0.7.1",
+        "clsx": "^2.1.1",
+        "cmdk": "^1.1.1",
+        "country-flag-icons": "^1.6.8",
+        "date-fns": "^4.1.0",
+        "lucide-react": "^0.563.0",
+        "tailwind-merge": "^3.4.0",
+        "tailwindcss-animate": "^1.0.7"
+    },
+    "devDependencies": {
+        "@tailwindcss/postcss": "^4.1.18",
+        "@testing-library/jest-dom": "^6.9.1",
+        "@testing-library/react": "^16.3.2",
+        "@testing-library/user-event": "^14.6.1",
+        "@types/node": "^25.2.2",
+        "@types/react": "^19.2.13",
+        "@types/react-dom": "^19.2.3",
+        "@vitejs/plugin-react": "^5.1.4",
+        "autoprefixer": "^10.4.24",
+        "dompurify": "^3.3.1",
+        "happy-dom": "^20.6.0",
+        "postcss": "^8.5.6",
+        "rrule": "^2.8.1",
+        "tailwindcss": "^4.1.18",
+        "tw-animate-css": "^1.4.0",
+        "typescript": "^5.9.3",
+        "vite": "^7.3.1",
+        "vite-plugin-dts": "^4.5.4",
+        "vitest": "^4.0.18"
+    }
+}