@kreativa/ui 0.1.0

package/README.md

@@ -0,0 +1,88 @@
+# @kreativa/ui
+
+Shared UI components for Kreativa applications, built with React and Tailwind CSS.
+
+## Installation
+
+```bash
+npm install @kreativa/ui
+# or
+pnpm add @kreativa/ui
+```
+
+## Usage
+
+```tsx
+import { Button, Card, Modal, Table } from '@kreativa/ui'
+```
+
+## Tailwind Configuration
+
+Extend your Tailwind config with the Kreativa theme:
+
+```js
+// tailwind.config.js
+import kreativaConfig from '@kreativa/ui/tailwind'
+
+export default {
+  content: [
+    './src/**/*.{js,ts,jsx,tsx}',
+    './node_modules/@kreativa/ui/dist/**/*.{js,mjs}'
+  ],
+  theme: {
+    extend: {
+      ...kreativaConfig.theme.extend
+    }
+  },
+  plugins: []
+}
+```
+
+## Components
+
+### Layout
+- `Layout` - Main app layout with sidebar
+- `Sidebar` - Navigation sidebar
+- `ServiceSwitcher` - Service/project selector
+
+### Primitives
+- `Button` - Button with variants (primary, secondary, danger, ghost)
+- `Input` - Text input with label and error support
+- `Card` - Container card with padding options
+- `LoadingSpinner` - Animated spinner
+- `EmptyState` - Empty state placeholder
+- `Modal` - Dialog modal
+
+### Forms
+- `FormInput` - Form input with label and help text
+- `FormTextarea` - Form textarea
+- `FormButtonGroup` - Cancel/Submit button pair
+
+### Data
+- `Table` - Sortable data table
+- `Select` - Searchable dropdown
+- `Tabs` - Tab navigation
+
+### Time
+- `Timer` - Time tracking with play/stop
+- `DatePicker` - Date/date-range picker
+
+## Development
+
+```bash
+# Install dependencies
+pnpm install
+
+# Build
+pnpm build
+
+# Watch mode
+pnpm dev
+
+# Type check
+pnpm typecheck
+```
+
+## License
+
+MIT

package/dist/index.d.mts

@@ -0,0 +1,316 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import { ReactNode, ButtonHTMLAttributes, InputHTMLAttributes, TextareaHTMLAttributes } from 'react';
+
+interface LayoutProps {
+    children: ReactNode;
+    sidebar?: ReactNode;
+}
+declare function Layout({ children, sidebar }: LayoutProps): react_jsx_runtime.JSX.Element;
+
+interface SidebarProps {
+    header?: ReactNode;
+    navigation?: ReactNode;
+    footer?: ReactNode;
+}
+declare function Sidebar({ header, navigation, footer }: SidebarProps): react_jsx_runtime.JSX.Element;
+
+interface Service {
+    id: string;
+    name: string;
+    icon?: string;
+}
+interface ServiceSwitcherProps {
+    services: Service[];
+    currentServiceId: string;
+    onServiceChange: (serviceId: string) => void;
+}
+declare function ServiceSwitcher({ services, currentServiceId, onServiceChange }: ServiceSwitcherProps): react_jsx_runtime.JSX.Element | null;
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: 'primary' | 'secondary' | 'danger' | 'ghost';
+    size?: 'sm' | 'md' | 'lg';
+    children: ReactNode;
+}
+declare function Button({ variant, size, className, children, disabled, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
+
+interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+    label?: string;
+    error?: string;
+}
+declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<HTMLInputElement>>;
+
+interface CardProps {
+    children: ReactNode;
+    className?: string;
+    padding?: 'none' | 'sm' | 'md' | 'lg';
+}
+declare function Card({ children, className, padding }: CardProps): react_jsx_runtime.JSX.Element;
+
+interface LoadingSpinnerProps {
+    size?: 'sm' | 'md' | 'lg';
+    fullScreen?: boolean;
+}
+declare function LoadingSpinner({ size, fullScreen }: LoadingSpinnerProps): react_jsx_runtime.JSX.Element;
+
+interface EmptyStateProps {
+    /** Icon to display - should be an SVG element */
+    icon?: ReactNode;
+    /** Main heading text */
+    title: string;
+    /** Supporting description text */
+    description?: string;
+    /** Optional action button or element */
+    action?: ReactNode;
+}
+/**
+ * EmptyState component for displaying "no items" UI consistently across the application.
+ * Used when a list or collection has no data to display.
+ */
+declare function EmptyState({ icon, title, description, action }: EmptyStateProps): react_jsx_runtime.JSX.Element;
+
+interface ModalProps {
+    /** Whether the modal is open */
+    isOpen: boolean;
+    /** Called when the modal should close (clicking backdrop or pressing Escape) */
+    onClose: () => void;
+    /** Modal title displayed in the header */
+    title: string;
+    /** Modal content */
+    children: ReactNode;
+    /** Maximum width of the modal (default: 'md') */
+    maxWidth?: 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+}
+/**
+ * Modal component for displaying content in an overlay dialog.
+ * Handles backdrop click and Escape key to close.
+ */
+declare function Modal({ isOpen, onClose, title, children, maxWidth }: ModalProps): react_jsx_runtime.JSX.Element | null;
+
+interface FormInputProps extends InputHTMLAttributes<HTMLInputElement> {
+    /** Label text displayed above the input */
+    label?: string;
+    /** Help text displayed below the input */
+    helpText?: string;
+    /** Error message to display */
+    error?: string;
+}
+/**
+ * FormInput component with consistent styling for form inputs across the application.
+ * Supports labels, help text, and error states.
+ */
+declare const FormInput: react.ForwardRefExoticComponent<FormInputProps & react.RefAttributes<HTMLInputElement>>;
+
+interface FormTextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+    /** Label text displayed above the textarea */
+    label?: string;
+    /** Help text displayed below the textarea */
+    helpText?: string;
+    /** Error message to display */
+    error?: string;
+}
+/**
+ * FormTextarea component with consistent styling for textarea inputs across the application.
+ * Supports labels, help text, and error states.
+ */
+declare const FormTextarea: react.ForwardRefExoticComponent<FormTextareaProps & react.RefAttributes<HTMLTextAreaElement>>;
+
+interface FormButtonGroupProps {
+    /** Text for the cancel button */
+    cancelText?: string;
+    /** Text for the submit button */
+    submitText?: string;
+    /** Loading text for submit button (when isLoading is true) */
+    loadingText?: string;
+    /** Whether the form is in a loading state */
+    isLoading?: boolean;
+    /** Whether the submit button is disabled */
+    isDisabled?: boolean;
+    /** Called when cancel button is clicked */
+    onCancel: () => void;
+    /** Called when submit button is clicked (optional, for use outside forms) */
+    onSubmit?: () => void;
+    /** Custom submit button content (overrides submitText) */
+    submitContent?: ReactNode;
+}
+/**
+ * FormButtonGroup component for consistent Cancel/Submit button pairs in forms.
+ * Handles loading states and disabled states.
+ */
+declare function FormButtonGroup({ cancelText, submitText, loadingText, isLoading, isDisabled, onCancel, onSubmit, submitContent, }: FormButtonGroupProps): react_jsx_runtime.JSX.Element;
+
+interface TableColumn<T> {
+    /** Unique key for the column */
+    key: string;
+    /** Column header text */
+    header: string;
+    /** Function to render cell content */
+    render: (item: T) => ReactNode;
+    /** Whether this column is sortable */
+    sortable?: boolean;
+    /** Custom sort function */
+    sortFn?: (a: T, b: T) => number;
+    /** Column width (e.g., '200px', '20%') */
+    width?: string;
+    /** Text alignment */
+    align?: 'left' | 'center' | 'right';
+}
+interface TableProps<T> {
+    /** Array of data items to display */
+    data: T[];
+    /** Column definitions */
+    columns: TableColumn<T>[];
+    /** Function to get unique key for each row */
+    getRowKey: (item: T) => string | number;
+    /** Called when a row is clicked */
+    onRowClick?: (item: T) => void;
+    /** Whether the table is in a loading state */
+    loading?: boolean;
+    /** Message to show when data is empty */
+    emptyMessage?: string;
+    /** Additional class names for the table container */
+    className?: string;
+}
+/**
+ * Table component for displaying tabular data with sorting support.
+ */
+declare function Table<T>({ data, columns, getRowKey, onRowClick, loading, emptyMessage, className, }: TableProps<T>): react_jsx_runtime.JSX.Element;
+
+interface SelectOption<T = string> {
+    /** Unique value for the option */
+    value: T;
+    /** Display label */
+    label: string;
+    /** Optional icon or element to display */
+    icon?: ReactNode;
+    /** Whether this option is disabled */
+    disabled?: boolean;
+}
+interface SelectProps<T = string> {
+    /** Available options */
+    options: SelectOption<T>[];
+    /** Currently selected value(s) */
+    value: T | T[] | null;
+    /** Called when selection changes */
+    onChange: (value: T | T[] | null) => void;
+    /** Placeholder text when nothing selected */
+    placeholder?: string;
+    /** Label text */
+    label?: string;
+    /** Error message */
+    error?: string;
+    /** Whether search is enabled */
+    searchable?: boolean;
+    /** Whether multiple selection is allowed */
+    multiple?: boolean;
+    /** Whether the select is disabled */
+    disabled?: boolean;
+    /** Additional class names */
+    className?: string;
+}
+/**
+ * Select component with searchable dropdown and multi-select support.
+ */
+declare function Select<T = string>({ options, value, onChange, placeholder, label, error, searchable, multiple, disabled, className, }: SelectProps<T>): react_jsx_runtime.JSX.Element;
+
+interface Tab {
+    /** Unique identifier for the tab */
+    id: string;
+    /** Tab label */
+    label: string;
+    /** Optional icon */
+    icon?: ReactNode;
+    /** Whether the tab is disabled */
+    disabled?: boolean;
+    /** Tab content (for uncontrolled mode) */
+    content?: ReactNode;
+}
+interface TabsProps {
+    /** Tab definitions */
+    tabs: Tab[];
+    /** Currently active tab id (controlled mode) */
+    activeTab?: string;
+    /** Called when tab changes */
+    onTabChange?: (tabId: string) => void;
+    /** Default active tab (uncontrolled mode) */
+    defaultTab?: string;
+    /** Tab variant */
+    variant?: 'default' | 'pills' | 'underline';
+    /** Whether to render tab content (set to false if rendering content externally) */
+    renderContent?: boolean;
+    /** Additional class names for the tabs container */
+    className?: string;
+}
+/**
+ * Tabs component for tab navigation with multiple style variants.
+ */
+declare function Tabs({ tabs, activeTab: controlledActiveTab, onTabChange, defaultTab, variant, renderContent, className, }: TabsProps): react_jsx_runtime.JSX.Element;
+
+interface DateRange {
+    start: Date | null;
+    end: Date | null;
+}
+interface DatePickerProps {
+    /** Selected date (single mode) or date range (range mode) */
+    value: Date | DateRange | null;
+    /** Called when date selection changes */
+    onChange: (value: Date | DateRange | null) => void;
+    /** Whether to enable range selection */
+    range?: boolean;
+    /** Label text */
+    label?: string;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Error message */
+    error?: string;
+    /** Minimum selectable date */
+    minDate?: Date;
+    /** Maximum selectable date */
+    maxDate?: Date;
+    /** Whether the picker is disabled */
+    disabled?: boolean;
+    /** Additional class names */
+    className?: string;
+}
+/**
+ * DatePicker component with single date and date range support.
+ */
+declare function DatePicker({ value, onChange, range, label, placeholder, error, minDate, maxDate, disabled, className, }: DatePickerProps): react_jsx_runtime.JSX.Element;
+
+interface TimerState {
+    /** Whether the timer is currently running */
+    isRunning: boolean;
+    /** Total elapsed time in seconds */
+    elapsedSeconds: number;
+    /** When the timer was started (if running) */
+    startedAt: Date | null;
+}
+interface TimerProps {
+    /** Initial elapsed time in seconds (default: 0) */
+    initialSeconds?: number;
+    /** Called when timer starts */
+    onStart?: (startedAt: Date) => void;
+    /** Called when timer stops */
+    onStop?: (elapsedSeconds: number) => void;
+    /** Called when timer is reset */
+    onReset?: () => void;
+    /** Called every second while running (useful for auto-save) */
+    onTick?: (elapsedSeconds: number) => void;
+    /** Whether to show the reset button */
+    showReset?: boolean;
+    /** Size variant */
+    size?: 'sm' | 'md' | 'lg';
+    /** Additional class names */
+    className?: string;
+    /** External control - if provided, component becomes controlled */
+    isRunning?: boolean;
+    /** External elapsed seconds - for controlled mode */
+    elapsedSeconds?: number;
+}
+declare function formatTime(totalSeconds: number): string;
+/**
+ * Timer component for time tracking with play/pause/stop controls.
+ */
+declare function Timer({ initialSeconds, onStart, onStop, onReset, onTick, showReset, size, className, isRunning: controlledIsRunning, elapsedSeconds: controlledElapsedSeconds, }: TimerProps): react_jsx_runtime.JSX.Element;
+
+export { Button, Card, DatePicker, type DateRange, EmptyState, FormButtonGroup, FormInput, FormTextarea, Input, Layout, LoadingSpinner, Modal, Select, type SelectOption, ServiceSwitcher, Sidebar, type Tab, Table, type TableColumn, Tabs, Timer, type TimerState, formatTime };