@tasks-timeline/components 0.0.6

package/README.md

@@ -0,0 +1,524 @@
+# Tasks Timeline Component Library
+
+A comprehensive, production-ready React component library for building task management and timeline visualization applications.
+
+[![npm version](https://img.shields.io/npm/v/@tasks-timeline/component-library)](https://www.npmjs.com/package/@tasks-timeline/component-library)
+[![license](https://img.shields.io/npm/l/@tasks-timeline/component-library)](./LICENSE)
+
+## Features
+
+✨ **11 Professional UI Components**
+
+- Task list with multiple grouping strategies (day, year, backlog)
+- Task item with status, priority, and action controls
+- AI-powered input bar for natural language task creation
+- Comprehensive task editor with full configuration
+- Settings and help modals
+- Toast notifications
+- Icon component wrapper
+
+🎣 **Custom React Hooks**
+
+- Task filtering and search
+- Task statistics and progress tracking
+- AI agent integration (Gemini, OpenAI, Anthropic)
+- Voice input handling
+
+📦 **Complete TypeScript Support**
+
+- Fully typed components and hooks
+- Comprehensive type definitions
+- Excellent IDE autocomplete
+
+🎨 **Modern Styling**
+
+- Tailwind CSS v4 integration
+- Radix UI components
+- Responsive design
+- Dark mode support
+
+## Installation
+
+```bash
+npm install @tasks-timeline/component-library
+# or
+pnpm add @tasks-timeline/component-library
+```
+
+## Quick Start
+
+### Basic Usage
+
+```typescript
+import React, { useState } from "react";
+import {
+  TodoList,
+  InputBar,
+  type Task,
+} from "@tasks-timeline/component-library";
+import "@tasks-timeline/component-library/styles";
+
+function App() {
+  const [tasks, setTasks] = useState<Task[]>([]);
+
+  const handleAddTask = (task: Task) => {
+    setTasks([...tasks, task]);
+  };
+
+  return (
+    <div className="p-4">
+      <InputBar onTaskAdd={handleAddTask} />
+      <TodoList tasks={tasks} />
+    </div>
+  );
+}
+
+export default App;
+```
+
+### External Data Synchronization
+
+The library supports efficient external synchronization with databases, REST APIs, or cloud services through operation-based callbacks:
+
+```typescript
+import { TasksTimelineApp } from "@tasks-timeline/component-library";
+
+function App() {
+  return (
+    <TasksTimelineApp
+      // Called when a task is created (only serializes the new task)
+      onTaskAdded={async (task) => {
+        await fetch("/api/tasks", {
+          method: "POST",
+          body: JSON.stringify(task),
+        });
+      }}
+      // Called when a task is updated (only serializes the changed task)
+      onTaskUpdated={async (task, previous) => {
+        await fetch(`/api/tasks/${task.id}`, {
+          method: "PATCH",
+          body: JSON.stringify(task),
+        });
+      }}
+      // Called when a task is deleted (only sends the task ID)
+      onTaskDeleted={async (taskId, previous) => {
+        await fetch(`/api/tasks/${taskId}`, {
+          method: "DELETE",
+        });
+      }}
+    />
+  );
+}
+```
+
+**Performance Benefits:**
+- ✅ 99% less data transfer (1KB vs 100KB for single task updates)
+- ✅ 50-80% fewer database writes (change detection skips no-ops)
+- ✅ Granular updates (UPDATE one row, not replace entire table)
+- ✅ Perfect for REST APIs, GraphQL, Firebase, or any external storage
+
+**Firebase Example:**
+
+```typescript
+import { doc, setDoc, updateDoc, deleteDoc } from "firebase/firestore";
+
+<TasksTimelineApp
+  onTaskAdded={async (task) => {
+    await setDoc(doc(db, "tasks", task.id), task);
+  }}
+  onTaskUpdated={async (task) => {
+    await updateDoc(doc(db, "tasks", task.id), task);
+  }}
+  onTaskDeleted={async (taskId) => {
+    await deleteDoc(doc(db, "tasks", taskId));
+  }}
+/>
+```
+
+**LocalStorage with Granular Updates:**
+
+```typescript
+<TasksTimelineApp
+  onTaskUpdated={async (task) => {
+    const tasks = JSON.parse(localStorage.getItem("tasks") || "[]");
+    const updated = tasks.map((t) => (t.id === task.id ? task : t));
+    localStorage.setItem("tasks", JSON.stringify(updated));
+  }}
+/>
+```
+
+> **Note:** Callbacks are optional. The component uses the repository pattern as a fallback for backwards compatibility.
+
+### Using Components
+
+```typescript
+import {
+  TaskItem,
+  TaskEditModal,
+  SettingsModal,
+} from "@tasks-timeline/component-library";
+```
+
+### Using Hooks
+
+```typescript
+import {
+  useTaskFiltering,
+  useTaskStats,
+  useAIAgent,
+} from "@tasks-timeline/component-library/hooks";
+
+function MyComponent({ tasks }) {
+  const { filteredTasks, filters } = useTaskFiltering(tasks, {
+    statuses: ["todo", "scheduled"],
+    priorities: ["high"],
+  });
+
+  const stats = useTaskStats(tasks);
+
+  return (
+    <div>
+      <p>
+        Total: {stats.total}, Completed: {stats.completed}
+      </p>
+    </div>
+  );
+}
+```
+
+## Components
+
+| Component        | Description                                 |
+| ---------------- | ------------------------------------------- |
+| `TodoList`       | Main container component with task grouping |
+| `TaskItem`       | Individual task display with actions        |
+| `InputBar`       | Create/edit tasks with AI support           |
+| `DaySection`     | Tasks grouped by day                        |
+| `YearSection`    | Tasks grouped by year                       |
+| `BacklogSection` | Unscheduled tasks view                      |
+| `TaskEditModal`  | Full-featured task editor                   |
+| `SettingsModal`  | Application settings                        |
+| `HelpModal`      | Help and documentation                      |
+| `Toast`          | Notification system                         |
+| `Icon`           | Icon wrapper for Lucide icons               |
+
+## Hooks
+
+### useTaskFiltering
+
+Filter tasks by status, priority, category, tags, and custom scripts.
+
+```typescript
+const { filteredTasks, filters, setFilters } = useTaskFiltering(
+  tasks,
+  initialFilters
+);
+```
+
+### useTaskStats
+
+Calculate task statistics including completion percentage, counts by status, etc.
+
+```typescript
+const stats = useTaskStats(tasks);
+// { total, completed, byStatus, byPriority, ... }
+```
+
+### useAIAgent
+
+Integrate AI for task processing and insights.
+
+```typescript
+const { processTask, generateSuggestions, isLoading } = useAIAgent(
+  settings.aiConfig
+);
+```
+
+### useVoiceInput
+
+Handle browser voice input or Whisper API integration.
+
+```typescript
+const { transcript, isListening, startListening, stopListening } =
+  useVoiceInput();
+```
+
+## Types
+
+```typescript
+type Priority = "low" | "medium" | "high";
+type TaskStatus =
+  | "done"
+  | "scheduled"
+  | "todo"
+  | "due"
+  | "overdue"
+  | "cancelled"
+  | "unplanned";
+
+interface Task {
+  id: string;
+  title: string;
+  description?: string;
+  status: TaskStatus;
+  priority: Priority;
+  dueDate?: string;
+  category?: string;
+  tags: Tag[];
+  isRecurring?: boolean;
+  // ... and more
+}
+
+interface AppSettings {
+  theme: "light" | "dark" | "midnight" | "coffee";
+  dateFormat: string;
+  showCompleted: boolean;
+  // ... and more
+}
+```
+
+## Styling
+
+### Import Styles
+
+```typescript
+import "@tasks-timeline/component-library/styles";
+```
+
+### Tailwind CSS
+
+The library uses Tailwind CSS v4. Ensure your project has Tailwind configured:
+
+```typescript
+// vite.config.ts
+import tailwindcss from "@tailwindcss/vite";
+
+export default {
+  plugins: [tailwindcss()],
+};
+```
+
+### Customization
+
+Components use Tailwind classes and can be customized through props and CSS overrides:
+
+```typescript
+<TaskItem task={task} className="custom-class" />
+```
+
+## Configuration
+
+### TasksTimelineApp Props
+
+```typescript
+interface TasksTimelineAppProps {
+  className?: string;
+  taskRepository?: TaskRepository;
+  settingsRepository?: SettingsRepository;
+  apiKey?: string;
+  systemInDarkMode?: boolean;
+  onItemClick?: (item: Task) => void;
+
+  // External synchronization callbacks (v0.0.4+)
+  onTaskAdded?: (task: Task) => void | Promise<void>;
+  onTaskUpdated?: (task: Task, previous: Task) => void | Promise<void>;
+  onTaskDeleted?: (taskId: string, previous: Task) => void | Promise<void>;
+}
+```
+
+**Synchronization Strategy:**
+- If callbacks (`onTaskAdded`, etc.) are provided, they take priority
+- Otherwise, falls back to `taskRepository` methods
+- Callbacks receive both new and previous state for conflict resolution
+- All callbacks support async/await for database operations
+
+### Theme
+
+```typescript
+const settings: AppSettings = {
+  theme: "dark",
+  dateFormat: "MMM d, yyyy",
+  // ...
+};
+```
+
+### AI Integration
+
+```typescript
+const settings: AppSettings = {
+  aiConfig: {
+    enabled: true,
+    activeProvider: "gemini",
+    providers: {
+      gemini: {
+        apiKey: "your-api-key",
+        model: "gemini-3-flash-preview",
+        baseUrl: "",
+      },
+      // ... other providers
+    },
+  },
+};
+```
+
+## Development
+
+### Setup
+
+```bash
+git clone <repository>
+cd tasks-timeline
+pnpm install
+```
+
+### Run Development Server
+
+```bash
+pnpm dev
+```
+
+### Run Storybook
+
+```bash
+pnpm storybook
+```
+
+### Build Library
+
+```bash
+pnpm build:lib
+```
+
+### Build Demo App
+
+```bash
+pnpm build
+```
+
+## Project Structure
+
+```
+src/
+├── components/        # UI Components
+├── hooks/            # Custom React Hooks
+├── types.ts          # Type Definitions
+├── utils.ts          # Utilities
+├── storage.ts        # Browser Storage
+├── App.tsx           # Demo Application
+└── index.ts          # Library Entry Point
+```
+
+## Development
+
+### Local Development
+
+```bash
+# Install dependencies
+pnpm install
+
+# Start Storybook (interactive documentation)
+pnpm storybook
+
+# Run type checking
+pnpm type-check
+
+# Run linter
+pnpm lint
+
+# Build library
+pnpm build
+```
+
+### Example Application
+
+The `examples/app/` directory contains a fully functional demo application:
+
+```bash
+# Run example app
+pnpm dev:example
+
+# Build example app
+pnpm build:example
+```
+
+## Publishing
+
+### Automated Publishing (GitHub Actions)
+
+This project uses GitHub Actions to automate the build, testing, and publishing process.
+
+**Requirements:**
+
+1. Set up `NPM_TOKEN` secret in GitHub repository settings
+2. Ensure main branch is protected with required status checks
+
+**To publish a new version:**
+
+```bash
+# 1. Update version in package.json
+npm version patch  # or minor/major
+
+# 2. Push to trigger GitHub Actions workflow
+git push origin main --tags
+```
+
+The workflow will automatically:
+
+- ✅ Run all tests (lint, type-check, build)
+- ✅ Create a GitHub release
+- ✅ Publish to npm
+- ✅ Deploy Storybook to GitHub Pages
+
+**Alternative:** Use `npm publish` directly (requires npm authentication):
+
+```bash
+npm publish --access public
+```
+
+See [.github/WORKFLOW_SETUP.md](.github/WORKFLOW_SETUP.md) for detailed setup and troubleshooting.
+
+## Contributing
+
+We welcome contributions! Please see [CONTRIBUTING.md](./CONTRIBUTING.md) for guidelines on:
+
+- Setting up your development environment
+- Code style and standards
+- Adding new components or hooks
+- Writing Storybook stories
+- Submitting pull requests
+- Commit message conventions
+
+**Quick start for contributors:**
+
+```bash
+git clone <repository>
+cd tasks-timeline
+pnpm install
+pnpm storybook  # View components
+pnpm type-check  # Verify types
+pnpm lint        # Check code style
+```
+
+## Documentation
+
+- See [LIBRARY_SETUP.md](./LIBRARY_SETUP.md) for detailed setup and architecture
+- Visit Storybook (run `pnpm storybook`) for interactive component documentation
+- Check individual component files for JSDoc comments
+- Read [.github/WORKFLOW_SETUP.md](.github/WORKFLOW_SETUP.md) for CI/CD configuration
+-   Write down every design you made in the ./.prd/ folder and keep them updated.
+
+
+## Browser Support
+
+- Chrome/Edge (latest 2 versions)
+- Firefox (latest 2 versions)
+- Safari 14+
+
+## Peer Dependencies
+
+- React 18.2.0+
+- React DOM 18.2.0+
+
+## License
+
+MIT © zhuwenq

package/dist/TasksTimelineApp.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import type { CustomSettingsTab, SettingsRepository, Task } from "./types";
+export interface TasksTimelineAppProps {
+    className?: string;
+    tasks: Task[];
+    onTaskAdded: (task: Task) => void | Promise<void>;
+    onTaskUpdated: (task: Task, previous: Task) => void | Promise<void>;
+    onTaskDeleted: (taskId: string, previous: Task) => void | Promise<void>;
+    settingsRepository?: SettingsRepository;
+    apiKey?: string;
+    systemInDarkMode?: boolean;
+    onItemClick?: (item: Task) => void;
+    /** Custom tabs to inject into the Settings page */
+    customSettingsTabs?: CustomSettingsTab[];
+}
+export declare const TasksTimelineApp: React.FC<TasksTimelineAppProps>;
+//# sourceMappingURL=TasksTimelineApp.d.ts.map

package/dist/TasksTimelineApp.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TasksTimelineApp.d.ts","sourceRoot":"","sources":["../src/TasksTimelineApp.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyD,MAAM,OAAO,CAAC;AAQ9E,OAAO,KAAK,EAEV,iBAAiB,EAGjB,kBAAkB,EAElB,IAAI,EAEL,MAAM,SAAS,CAAC;AAuEjB,MAAM,WAAW,qBAAqB;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IAGnB,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,WAAW,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAClD,aAAa,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACpE,aAAa,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAGxE,kBAAkB,CAAC,EAAE,kBAAkB,CAAC;IACxC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IACnC,mDAAmD;IACnD,kBAAkB,CAAC,EAAE,iBAAiB,EAAE,CAAC;CAC1C;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CA4gB5D,CAAC"}

package/dist/components/AppContext.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+export declare const AppProvider: React.FC<{
+    children: React.ReactNode;
+    theme?: string;
+}>;
+//# sourceMappingURL=AppContext.d.ts.map

package/dist/components/AppContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppContext.d.ts","sourceRoot":"","sources":["../../src/components/AppContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAKxC,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC;IACjC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAwBA,CAAC"}

package/dist/components/BacklogSection.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import type { Task } from "../types";
+interface BacklogSectionProps {
+    tasks: Task[];
+}
+export declare const BacklogSection: React.FC<BacklogSectionProps>;
+export {};
+//# sourceMappingURL=BacklogSection.d.ts.map

package/dist/components/BacklogSection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BacklogSection.d.ts","sourceRoot":"","sources":["../../src/components/BacklogSection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAWrC,UAAU,mBAAmB;IAC3B,KAAK,EAAE,IAAI,EAAE,CAAC;CACf;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAwDxD,CAAC"}

package/dist/components/CategoryPopover.d.ts

@@ -0,0 +1,9 @@
+import type { Task } from "@/types";
+export interface CategoryPopoverProps {
+    task: Task;
+    onUpdate: (task: Task) => void;
+    availableCategories: string[];
+    badgeClass: string;
+}
+export declare const CategoryPopover: ({ task, onUpdate, availableCategories, badgeClass, }: CategoryPopoverProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CategoryPopover.d.ts.map

package/dist/components/CategoryPopover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CategoryPopover.d.ts","sourceRoot":"","sources":["../../src/components/CategoryPopover.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAYpC,MAAM,WAAW,oBAAoB;IACnC,IAAI,EAAE,IAAI,CAAC;IACX,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAC/B,mBAAmB,EAAE,MAAM,EAAE,CAAC;IAC9B,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,eAAe,GAAI,sDAK7B,oBAAoB,4CAqEtB,CAAC"}

package/dist/components/DateBadge.d.ts

@@ -0,0 +1,15 @@
+import type { Task } from "@/types";
+import * as Lucide from "lucide-react";
+interface DateBadgeProps {
+    task: Task;
+    onUpdate: (task: Task) => void;
+    type: "dueDate" | "startAt" | "createdAt" | "completedAt";
+    date?: string;
+    label: string;
+    icon: keyof typeof Lucide;
+    className: string;
+    prefix?: string;
+}
+export declare const DateBadge: ({ type, date, label, icon, className, prefix, onUpdate, task, }: DateBadgeProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=DateBadge.d.ts.map

package/dist/components/DateBadge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateBadge.d.ts","sourceRoot":"","sources":["../../src/components/DateBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AACpC,OAAO,KAAK,MAAM,MAAM,cAAc,CAAC;AAcvC,UAAU,cAAc;IACtB,IAAI,EAAE,IAAI,CAAC;IACX,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAC/B,IAAI,EAAE,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,aAAa,CAAC;IAC1D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,OAAO,MAAM,CAAC;IAC1B,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,SAAS,GAAI,iEASvB,cAAc,4CAiHhB,CAAC"}

package/dist/components/DaySection.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import type { DayGroup } from "../types";
+interface DaySectionProps {
+    group: DayGroup;
+}
+export declare const DaySection: React.FC<DaySectionProps>;
+export {};
+//# sourceMappingURL=DaySection.d.ts.map

package/dist/components/DaySection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DaySection.d.ts","sourceRoot":"","sources":["../../src/components/DaySection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+C,MAAM,OAAO,CAAC;AAGpE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAazC,UAAU,eAAe;IACvB,KAAK,EAAE,QAAQ,CAAC;CACjB;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAgVhD,CAAC"}

package/dist/components/ErrorFallback.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+interface ErrorFallbackProps {
+    error: Error;
+    resetErrorBoundary: () => void;
+}
+export declare const TaskListErrorFallback: React.FC<ErrorFallbackProps>;
+export declare const AIErrorFallback: React.FC<ErrorFallbackProps>;
+export declare const ModalErrorFallback: React.FC<ErrorFallbackProps>;
+export {};
+//# sourceMappingURL=ErrorFallback.d.ts.map

package/dist/components/ErrorFallback.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorFallback.d.ts","sourceRoot":"","sources":["../../src/components/ErrorFallback.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,UAAU,kBAAkB;IAC1B,KAAK,EAAE,KAAK,CAAC;IACb,kBAAkB,EAAE,MAAM,IAAI,CAAC;CAChC;AAED,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAyB9D,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA2BxD,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAuB3D,CAAC"}

package/dist/components/HelpModal.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+interface HelpModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+}
+export declare const HelpModal: React.FC<HelpModalProps>;
+export {};
+//# sourceMappingURL=HelpModal.d.ts.map

package/dist/components/HelpModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HelpModal.d.ts","sourceRoot":"","sources":["../../src/components/HelpModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,UAAU,cAAc;IACtB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CA6L9C,CAAC"}

package/dist/components/Icon.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import * as Lucide from "lucide-react";
+export interface IconProps extends Omit<React.SVGProps<SVGSVGElement>, "name"> {
+    name: keyof typeof Lucide;
+    size?: number | string;
+}
+export declare const Icon: React.FC<IconProps>;
+//# sourceMappingURL=Icon.d.ts.map

package/dist/components/Icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../src/components/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,MAAM,MAAM,cAAc,CAAC;AAEvC,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE,MAAM,CAAC;IAC5E,IAAI,EAAE,MAAM,OAAO,MAAM,CAAC;IAC1B,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAapC,CAAC"}

package/dist/components/InputBar.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+interface InputBarProps {
+}
+export declare const InputBar: React.FC<InputBarProps>;
+export {};
+//# sourceMappingURL=InputBar.d.ts.map

package/dist/components/InputBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputBar.d.ts","sourceRoot":"","sources":["../../src/components/InputBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAkBxC,UAAU,aAAa;CAAG;AAE1B,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA4Y5C,CAAC"}

package/dist/components/Motion.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { type HTMLMotionProps } from "framer-motion";
+export declare const MotionDiv: React.ForwardRefExoticComponent<Omit<HTMLMotionProps<"div">, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const MotionSpan: React.ForwardRefExoticComponent<Omit<HTMLMotionProps<"span">, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export declare const MotionButton: React.ForwardRefExoticComponent<Omit<HTMLMotionProps<"button">, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const MotionInput: React.ForwardRefExoticComponent<Omit<HTMLMotionProps<"input">, "ref"> & React.RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=Motion.d.ts.map

package/dist/components/Motion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Motion.d.ts","sourceRoot":"","sources":["../../src/components/Motion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,KAAK,eAAe,EAAU,MAAM,eAAe,CAAC;AAK7D,eAAO,MAAM,SAAS,4GAKpB,CAAC;AAEH,eAAO,MAAM,UAAU,8GAKrB,CAAC;AAEH,eAAO,MAAM,YAAY,kHAKvB,CAAC;AAEH,eAAO,MAAM,WAAW,gHAKtB,CAAC"}