@shohojdhara/atomix 0.1.5 → 0.1.7

package/dist/types/components/Todo/scripts/index.d.ts

@@ -0,0 +1,115 @@
+import type { TodoItem } from './types';
+export type { TodoItem };
+export { useTodo } from '../../../lib/composables/useTodo';
+/**
+ * TodoOptions interface for the vanilla JS implementation
+ */
+export interface TodoOptions {
+    title?: string;
+    items?: TodoItem[];
+    placeholder?: string;
+    size?: 'sm' | 'md' | 'lg';
+    showCompleted?: boolean;
+    disabled?: boolean;
+    onAddTodo?: (text: string) => void;
+    onToggleTodo?: (id: string) => void;
+    onDeleteTodo?: (id: string) => void;
+}
+/**
+ * TodoEvents for custom event types
+ */
+export declare enum TodoEvents {
+    ADD = "todo:add",
+    TOGGLE = "todo:toggle",
+    DELETE = "todo:delete"
+}
+/**
+ * Todo Class - Vanilla JS implementation
+ */
+export declare class Todo {
+    private static defaults;
+    private element;
+    private listElement;
+    private formElement;
+    private inputElement;
+    private options;
+    private items;
+    /**
+     * Constructor
+     * @param element - DOM element or selector
+     * @param options - Configuration options
+     */
+    constructor(element: string | HTMLElement, options?: TodoOptions);
+    /**
+     * Initialize the component
+     * @private
+     */
+    private _initialize;
+    /**
+     * Create component structure
+     * @private
+     */
+    private _createStructure;
+    /**
+     * Bind event listeners
+     * @private
+     */
+    private _bindEvents;
+    /**
+     * Handle form submission
+     * @private
+     */
+    private _handleSubmit;
+    /**
+     * Handle item toggle
+     * @private
+     */
+    private _handleToggle;
+    /**
+     * Handle item deletion
+     * @private
+     */
+    private _handleDelete;
+    /**
+     * Render todo items
+     * @private
+     */
+    private _renderItems;
+    /**
+     * Add a new todo item
+     * @param text - Todo text
+     * @returns The new todo item or null if failed
+     */
+    addTodo(text: string): TodoItem | null;
+    /**
+     * Toggle a todo item's completed state
+     * @param id - Todo item ID
+     * @returns The toggled todo item or null if not found
+     */
+    toggleTodo(id: string): TodoItem | null;
+    /**
+     * Delete a todo item
+     * @param id - Todo item ID
+     * @returns Whether the item was deleted
+     */
+    deleteTodo(id: string): boolean;
+    /**
+     * Update todo items
+     * @param items - New todo items
+     */
+    updateItems(items: TodoItem[]): void;
+    /**
+     * Update component options
+     * @param options - New options
+     */
+    update(options: Partial<TodoOptions>): void;
+    /**
+     * Clean up event listeners
+     */
+    destroy(): void;
+    /**
+     * Initialize all Todo components in the document
+     */
+    static initializeAll(): void;
+}
+export * from './todoInteractions';

package/dist/types/components/Todo/scripts/todoInteractions.d.ts

@@ -0,0 +1,38 @@
+import { Todo } from './index';
+import { TodoItem } from './types';
+/**
+ * Apply hover effect to todo items
+ * @param todoItem - Todo item element
+ */
+export declare function applyHoverEffect(todoItem: HTMLElement): void;
+/**
+ * Apply focus effect to todo input
+ * @param input - Todo input element
+ */
+export declare function applyFocusEffect(input: HTMLInputElement): void;
+/**
+ * Initialize a single todo item with event listeners
+ * @param item - Todo item element
+ * @param id - Todo item ID
+ * @param onToggle - Toggle callback
+ * @param onDelete - Delete callback
+ */
+export declare function initializeTodoItem(item: HTMLElement, id: string, onToggle?: (id: string) => void, onDelete?: (id: string) => void): void;
+/**
+ * Initialize all todos on the page
+ * @returns Array of todo instances
+ */
+export declare function initializeAllTodos(selector?: string): Todo[];
+/**
+ * Filter todo items by completion status
+ * @param items - Todo items array
+ * @param showCompleted - Whether to include completed items
+ * @returns Filtered todo items
+ */
+export declare function filterTodoItems(items: TodoItem[], showCompleted: boolean): TodoItem[];
+/**
+ * Sort todo items by completion status and creation time
+ * @param items - Todo items array
+ * @returns Sorted todo items
+ */
+export declare function sortTodoItems(items: TodoItem[]): TodoItem[];

package/dist/types/components/Todo/scripts/types.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Todo item interface
+ */
+export interface TodoItem {
+    /**
+     * Unique identifier for the todo
+     */
+    id: string;
+    /**
+     * Todo item text
+     */
+    text: string;
+    /**
+     * Whether the todo is completed
+     */
+    completed: boolean;
+}

package/dist/types/components/Toggle/Toggle.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+interface ToggleProps {
+    /**
+     * Whether the toggle is initially on
+     */
+    initialOn?: boolean;
+    /**
+     * Callback when the toggle is turned on
+     */
+    onToggleOn?: () => void;
+    /**
+     * Callback when the toggle is turned off
+     */
+    onToggleOff?: () => void;
+    /**
+     * Whether the toggle is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Additional CSS class for the toggle
+     */
+    className?: string;
+}
+/**
+ * Toggle component for switching between two states
+ */
+declare const Toggle: React.FC<ToggleProps>;
+export type { ToggleProps };
+export default Toggle;
+export { Toggle };

package/dist/types/components/Toggle/index.d.ts

@@ -0,0 +1,2 @@
+export { Toggle } from "./Toggle";
+export type { ToggleProps } from "./Toggle";

package/dist/types/components/Toggle/scripts/index.d.ts

@@ -0,0 +1,50 @@
+/**
+ * Interface for Toggle instance
+ */
+interface ToggleInstance {
+    turnOn: () => void;
+    turnOff: () => void;
+    destroy: () => void;
+}
+/**
+ * Class representing a Toggle component
+ */
+declare class Toggle implements ToggleInstance {
+    private element;
+    private isOn;
+    /**
+     * Creates an instance of Toggle
+     * @param element - The toggle container element
+     */
+    constructor(element: HTMLElement);
+    /**
+     * Initialize the toggle component
+     */
+    private _initialize;
+    /**
+     * Bind event listeners
+     */
+    private _bindEvents;
+    /**
+     * Handle toggle click
+     */
+    private _handleToggle;
+    /**
+     * Turn on the toggle
+     */
+    turnOn(): void;
+    /**
+     * Turn off the toggle
+     */
+    turnOff(): void;
+    /**
+     * Clean up event listeners
+     */
+    destroy(): void;
+}
+/**
+ * Initialize all toggles in the document
+ * @returns Array of toggle instances
+ */
+export declare function initializeToggles(): ToggleInstance[];
+export default Toggle;

package/dist/types/components/Toggle/scripts/toggleInteractions.d.ts

@@ -0,0 +1,23 @@
+import Toggle from './index';
+/**
+ * Apply hover effect to toggle
+ * @param toggle - Toggle element
+ */
+export declare function applyHoverEffect(toggle: HTMLElement): void;
+/**
+ * Apply focus effect to toggle
+ * @param toggle - Toggle element
+ */
+export declare function applyFocusEffect(toggle: HTMLElement): void;
+/**
+ * Initialize a single toggle with event listeners
+ * @param toggle - Toggle element
+ * @param onChange - Change callback
+ */
+export declare function initializeToggle(toggle: HTMLElement, onChange?: (checked: boolean) => void): void;
+/**
+ * Initialize all toggles on the page
+ * @param selector - CSS selector for toggles
+ * @returns Array of toggle instances
+ */
+export declare function initializeAllToggles(selector?: string): Toggle[];

package/dist/types/components/Tooltip/Tooltip.d.ts

@@ -0,0 +1,35 @@
+import React, { ReactNode } from 'react';
+interface TooltipProps {
+    /**
+     * Content to be displayed in the tooltip
+     */
+    content: ReactNode;
+    /**
+     * The element that will trigger the tooltip
+     */
+    children: ReactNode;
+    /**
+     * The position of the tooltip relative to the trigger
+     */
+    position?: 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    /**
+     * How the tooltip is triggered
+     */
+    trigger?: 'hover' | 'click';
+    /**
+     * Additional CSS class for the tooltip
+     */
+    className?: string;
+    /**
+     * Delay before showing the tooltip (in milliseconds)
+     */
+    delay?: number;
+    /**
+     * Offset from the trigger element (in pixels)
+     */
+    offset?: number;
+}
+declare const Tooltip: React.FC<TooltipProps>;
+export type { TooltipProps };
+export default Tooltip;
+export { Tooltip };

package/dist/types/components/Tooltip/index.d.ts

@@ -0,0 +1,3 @@
+export { Tooltip } from "./Tooltip";
+export type { TooltipProps } from "./Tooltip";
+export { Tooltip as TooltipClass, initializeTooltips } from "./scripts";

package/dist/types/components/Tooltip/scripts/index.d.ts

@@ -0,0 +1,123 @@
+/**
+ * Interface for Tooltip options
+ */
+export interface TooltipOptions {
+    trigger: string;
+    position: string;
+    offset: number;
+    delay: number;
+    activeClass: string;
+    contentIdAttr: string;
+    positionAttr: string;
+    triggerAttr: string;
+    [key: string]: any;
+}
+/**
+ * Interface for Tooltip instance
+ */
+export interface TooltipInstance {
+    show: () => void;
+    hide: () => void;
+    destroy: () => void;
+    isInitialized: () => boolean;
+    isVisible: () => boolean;
+    getElement: () => HTMLElement | null;
+    getTriggerElement: () => HTMLElement | null;
+    getPosition: () => string;
+    setPosition: (position: string) => void;
+}
+/**
+ * Class representing a Tooltip component
+ */
+export declare class Tooltip implements TooltipInstance {
+    private selector;
+    private $element;
+    private $trigger;
+    private $content;
+    private options;
+    private timeout;
+    private hideTimeout;
+    private isActive;
+    /**
+     * Creates an instance of Tooltip
+     * @param selector - CSS selector string or DOM Element
+     * @param options - Custom options to override defaults
+     */
+    constructor(selector: string | Element, options?: {});
+    /**
+     * Initialize the tooltip component
+     */
+    private _initialize;
+    /**
+     * Initialize DOM elements
+     */
+    private _initializeElements;
+    /**
+     * Set tooltip position
+     */
+    private _setPosition;
+    /**
+     * Bind event listeners
+     */
+    private _bindEvents;
+    /**
+     * Handle trigger mouseenter or focus event
+     */
+    private _handleTriggerEnter;
+    /**
+     * Handle trigger mouseleave or blur event
+     */
+    private _handleTriggerLeave;
+    /**
+     * Handle trigger click event
+     */
+    private _handleTriggerClick;
+    /**
+     * Check if tooltip is initialized
+     */
+    isInitialized(): boolean;
+    /**
+     * Check if tooltip is currently visible
+     */
+    isVisible(): boolean;
+    /**
+     * Get tooltip element
+     */
+    getElement(): HTMLElement | null;
+    /**
+     * Get trigger element
+     */
+    getTriggerElement(): HTMLElement | null;
+    /**
+     * Get current position
+     */
+    getPosition(): string;
+    /**
+     * Set tooltip position
+     */
+    setPosition(position: string): void;
+    /**
+     * Show the tooltip
+     */
+    show(): void;
+    /**
+     * Hide the tooltip
+     */
+    hide(): void;
+    /**
+     * Destroy the tooltip
+     */
+    destroy(): void;
+    /**
+     * Initialize all tooltips in the document
+     * @param selector - CSS selector for tooltip elements
+     * @param options - Custom options
+     */
+    static initializeAll(selector?: string, options?: {}): Tooltip[];
+}
+/**
+ * Initialize all tooltips in the document
+ * @param selector - CSS selector for tooltip elements
+ * @param options - Custom options
+ */
+export declare function initializeTooltips(selector?: string, options?: {}): TooltipInstance[];

package/dist/types/components/Tooltip/scripts/tooltipInteractions.d.ts

@@ -0,0 +1,23 @@
+import { Tooltip } from './index';
+/**
+ * Calculate the best position for a tooltip based on available space
+ * @param triggerElement - The trigger element
+ * @param tooltipElement - The tooltip element
+ * @param preferredPosition - The preferred position
+ * @returns The best position to use
+ */
+export declare function calculateBestPosition(triggerElement: HTMLElement, tooltipElement: HTMLElement, preferredPosition?: string): string;
+/**
+ * Position the tooltip relative to its trigger with smart positioning
+ * @param tooltipElement - The tooltip element
+ * @param triggerElement - The trigger element
+ * @param position - The desired position
+ * @param offset - Distance from trigger in pixels
+ */
+export declare function positionTooltip(tooltipElement: HTMLElement, triggerElement: HTMLElement, position?: string, offset?: number): void;
+/**
+ * Initialize tooltips with custom behavior
+ * @param selector - CSS selector for tooltip elements
+ * @param options - Custom options
+ */
+export declare function initializeTooltipsWithCustomBehavior(selector?: string, options?: {}): Tooltip[];

package/dist/types/components/Upload/Upload.d.ts

@@ -0,0 +1,66 @@
+import React from 'react';
+interface UploadProps {
+    /**
+     * Whether the upload component is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Maximum file size in MB
+     */
+    maxSizeInMB?: number;
+    /**
+     * Accepted file types
+     */
+    acceptedFileTypes?: string[];
+    /**
+     * Whether multiple files can be selected
+     */
+    multiple?: boolean;
+    /**
+     * Text for the drag and drop section
+     */
+    title?: string;
+    /**
+     * Text describing supported file types
+     */
+    supportedFilesText?: string;
+    /**
+     * Text for the upload button
+     */
+    buttonText?: string;
+    /**
+     * Helper text displayed below the button
+     */
+    helperText?: string;
+    /**
+     * Icon component or class name
+     */
+    icon?: React.ReactNode;
+    /**
+     * Called when files are selected
+     */
+    onFileSelect?: (files: File[]) => void;
+    /**
+     * Called during file upload with progress
+     */
+    onFileUpload?: (file: File, progress: number) => void;
+    /**
+     * Called when file upload is complete
+     */
+    onFileUploadComplete?: (file: File) => void;
+    /**
+     * Called on file upload errors
+     */
+    onFileUploadError?: (file: File, error: string) => void;
+    /**
+     * Additional CSS class
+     */
+    className?: string;
+}
+/**
+ * Upload component for file uploads with drag and drop
+ */
+declare const Upload: React.FC<UploadProps>;
+export type { UploadProps };
+export default Upload;
+export { Upload };

package/dist/types/components/Upload/index.d.ts

@@ -0,0 +1,4 @@
+export { Upload } from './Upload';
+export type { UploadProps } from './Upload';
+export { default as default } from './Upload';
+export { initializeUploads } from './scripts';

package/dist/types/components/Upload/scripts/index.d.ts

@@ -0,0 +1,118 @@
+/**
+ * Interface for Upload instance
+ */
+interface UploadInstance {
+    setStatus: (status: 'idle' | 'loading' | 'success' | 'error', message?: string) => void;
+    setProgress: (percentage: number, timeLeft?: string) => void;
+    setFile: (file: File | null) => void;
+    disable: () => void;
+    enable: () => void;
+    destroy: () => void;
+}
+/**
+ * Class representing an Upload component
+ */
+declare class Upload implements UploadInstance {
+    private selector;
+    private $element;
+    private $input;
+    private $button;
+    private $loader;
+    private $loaderTitle;
+    private $loaderProgress;
+    private $loaderClose;
+    private options;
+    private currentFile;
+    private dragCounter;
+    /**
+     * Creates an instance of Upload
+     * @param selector - CSS selector string or DOM Element
+     * @param options - Custom options to override defaults
+     */
+    constructor(selector: string | Element, options?: {});
+    /**
+     * Initialize the upload component
+     */
+    private _initialize;
+    /**
+     * Creates a hidden file input element and appends it to the element
+     */
+    private _createHiddenInput;
+    /**
+     * Set up all event listeners
+     */
+    private _setupEventListeners;
+    /**
+     * Handle button click
+     */
+    private _handleButtonClick;
+    /**
+     * Handle file selection from the input element
+     */
+    private _handleFileSelect;
+    /**
+     * Handle drag enter event
+     */
+    private _handleDragEnter;
+    /**
+     * Handle drag leave event
+     */
+    private _handleDragLeave;
+    /**
+     * Handle drag over event
+     */
+    private _handleDragOver;
+    /**
+     * Handle drop event
+     */
+    private _handleDrop;
+    /**
+     * Handle close button click
+     */
+    private _handleClose;
+    /**
+     * Process the selected files
+     */
+    private _processFiles;
+    /**
+     * Validate a file based on size and type
+     */
+    private _validateFile;
+    /**
+     * Simulate a file upload process
+     * In a real implementation, this would be replaced with actual upload logic
+     */
+    private _simulateUpload;
+    /**
+     * Set current file
+     */
+    setFile(file: File | null): void;
+    /**
+     * Set upload progress
+     */
+    setProgress(percentage: number, timeLeft?: string): void;
+    /**
+     * Set upload status
+     */
+    setStatus(status: 'idle' | 'loading' | 'success' | 'error', message?: string): void;
+    /**
+     * Disable the upload component
+     */
+    disable(): void;
+    /**
+     * Enable the upload component
+     */
+    enable(): void;
+    /**
+     * Clean up event listeners
+     */
+    destroy(): void;
+}
+/**
+ * Initialize all upload components in the document
+ * @param {string|Element} selector - CSS selector string or DOM Element
+ * @param {Object} options - Custom options to override defaults
+ * @returns {UploadInstance[]} Array of Upload instances
+ */
+export declare function initializeUploads(selector?: string, options?: {}): UploadInstance[];
+export default Upload;