dara-ui 0.1.0

package/dist/components/Sidebar/Sidebar.d.ts

@@ -0,0 +1,163 @@
+import { default as React } from 'react';
+export interface SidebarItem {
+    /**
+     * Unique identifier for the item
+     */
+    id: string;
+    /**
+     * Display label
+     */
+    label: string;
+    /**
+     * Icon element
+     */
+    icon?: React.ReactNode;
+    /**
+     * Whether the item is active
+     */
+    active?: boolean;
+    /**
+     * Whether the item is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Sub-items for nested navigation
+     */
+    subItems?: SidebarItem[];
+    /**
+     * Optional badge text or number
+     */
+    badge?: string | number;
+    /**
+     * Optional href for link mode
+     */
+    href?: string;
+    /**
+     * Content to render when this item is selected
+     */
+    content?: React.ReactNode;
+    /**
+     * Click handler
+     */
+    onClick?: () => void;
+}
+export interface SidebarGroup {
+    /**
+     * Group label
+     */
+    label: string;
+    /**
+     * Group icon
+     */
+    icon?: React.ReactNode;
+    /**
+     * Items in this group
+     */
+    items: SidebarItem[];
+    /**
+     * Whether the group is expanded
+     */
+    defaultExpanded?: boolean;
+}
+export interface SidebarProps {
+    /**
+     * Sidebar brand/logo
+     */
+    brand?: React.ReactNode;
+    /**
+     * Groups of sidebar items
+     */
+    groups: SidebarGroup[];
+    /**
+     * Whether the sidebar is collapsible (desktop only)
+     * @default true
+     */
+    collapsible?: boolean;
+    /**
+     * Initially collapsed state (desktop only)
+     * @default false
+     */
+    defaultCollapsed?: boolean;
+    /**
+     * Controlled collapsed state (desktop only)
+     */
+    collapsed?: boolean;
+    /**
+     * Callback when collapse state changes (desktop only)
+     */
+    onCollapseChange?: (collapsed: boolean) => void;
+    /**
+     * Icon-only mode (desktop only)
+     * @default false
+     */
+    iconOnly?: boolean;
+    /**
+     * Whether to show group labels
+     * @default true
+     */
+    showGroupLabels?: boolean;
+    /**
+     * Active item ID (controlled)
+     */
+    activeItemId?: string;
+    /**
+     * Default active item ID (uncontrolled)
+     */
+    defaultActiveItemId?: string;
+    /**
+     * Callback when an item is clicked
+     */
+    onItemClick?: (itemId: string) => void;
+    /**
+     * Width when expanded (desktop only)
+     * @default "260px"
+     */
+    expandedWidth?: string;
+    /**
+     * Width when collapsed (desktop only)
+     * @default "64px"
+     */
+    collapsedWidth?: string;
+    /**
+     * Additional className
+     */
+    className?: string;
+    /**
+     * Footer content (desktop only)
+     */
+    footer?: React.ReactNode;
+    /**
+     * Whether the sidebar is fixed to the viewport
+     * @default false
+     */
+    fixed?: boolean;
+    /**
+     * Height of the sidebar container (desktop only)
+     * @default "100%"
+     */
+    height?: string;
+    /**
+     * Breakpoint (px) below which the sidebar renders as a horizontal
+     * scrollable tab strip instead of the vertical column
+     * @default 768
+     */
+    mobileBreakpoint?: number;
+    /**
+     * Force mobile layout regardless of viewport
+     * @default false
+     */
+    forceMobile?: boolean;
+}
+/**
+ * Dara UI Sidebar - Responsive vertical sidebar with mobile horizontal tabs
+ *
+ * Features:
+ * - Desktop (>= 768px): classic vertical column — collapse/expand, Ctrl+B,
+ *   group labels, nested sub-menus, icon-only mode, footer
+ * - Mobile (< 768px): auto-switches to a horizontal scrollable tab strip
+ *   with edge-aware scroll arrows (each side hides itself once you've
+ *   scrolled all the way in that direction) and a second row for sub-items
+ * - Full RTL support (items, chevrons, active bar, scroll direction, borders)
+ */
+export declare const Sidebar: React.FC<SidebarProps>;
+export default Sidebar;

package/dist/components/Sidebar/SidebarMobileTrigger.d.ts

@@ -0,0 +1,33 @@
+import { default as React } from 'react';
+export interface SidebarMobileTriggerProps {
+    /**
+     * Sidebar content (rendered inside the drawer when open)
+     */
+    children: React.ReactNode;
+    /**
+     * Drawer width on mobile
+     * @default "85vw"
+     */
+    width?: string;
+    /**
+     * Show a floating action button
+     * @default true
+     */
+    showFab?: boolean;
+    /**
+     * Additional className for the container
+     */
+    className?: string;
+}
+/**
+ * Dara UI SidebarMobileTrigger - Wraps a Sidebar for mobile usage
+ *
+ * Features:
+ * - Floating glass FAB button visible only on mobile
+ * - Slide-in drawer from the correct edge (RTL aware)
+ * - Backdrop with blur
+ * - Swipe-to-close from the drawer's edge
+ * - Body scroll lock while open
+ */
+export declare const SidebarMobileTrigger: React.FC<SidebarMobileTriggerProps>;
+export default SidebarMobileTrigger;

package/dist/components/Sidebar/index.d.ts

@@ -0,0 +1,5 @@
+export { Sidebar } from './Sidebar';
+export type { SidebarProps, SidebarItem, SidebarGroup } from './Sidebar';
+export { Sidebar as default } from './Sidebar';
+export { SidebarMobileTrigger } from './SidebarMobileTrigger';
+export type { SidebarMobileTriggerProps } from './SidebarMobileTrigger';

package/dist/components/SocialMedia/SocialMedia.d.ts

@@ -0,0 +1,31 @@
+import { default as React } from 'react';
+export interface SocialLink {
+    platform: string;
+    url: string;
+    label?: string;
+    icon?: React.ReactNode;
+    color?: string;
+}
+export interface SocialMediaProps {
+    links: SocialLink[];
+    position?: "left" | "right";
+    offset?: number;
+    verticalOffset?: string | number;
+    size?: "sm" | "md" | "lg";
+    showLabels?: boolean;
+    className?: string;
+}
+/**
+ * Dara UI SocialMedia - Floating social media links with expand/collapse
+ *
+ * Features:
+ * - Expandable side panel with social icons
+ * - Self-contained SVG icons (no external dependencies)
+ * - Light/dark mode adaptive colors
+ * - Click outside to close
+ * - Smooth expand/collapse animation
+ * - Left or right positioning
+ * - RTL aware
+ */
+export declare const SocialMedia: React.FC<SocialMediaProps>;
+export default SocialMedia;

package/dist/components/SocialMedia/index.d.ts

@@ -0,0 +1,3 @@
+export { SocialMedia } from './SocialMedia';
+export type { SocialMediaProps, SocialLink } from './SocialMedia';
+export { SocialMedia as default } from './SocialMedia';

package/dist/components/StatsWidget/StatsWidget.d.ts

@@ -0,0 +1,71 @@
+import { default as React } from 'react';
+export interface StatsWidgetData {
+    /**
+     * Stat label (e.g., "Force Alignment", "Combat")
+     */
+    label: string;
+    /**
+     * Current value
+     */
+    value: number;
+    /**
+     * Maximum value (for percentage calculation)
+     * @default 100
+     */
+    max?: number;
+    /**
+     * Unit display (e.g., "%", "XP", "pts")
+     * @default "%"
+     */
+    unit?: string;
+    /**
+     * Trend change (e.g., +12, -5)
+     */
+    trend?: number;
+    /**
+     * Color variant for the progress
+     */
+    color?: "primary" | "secondary" | "accent" | "success" | "danger" | "warning" | "gradient";
+}
+export interface StatsWidgetProps {
+    /**
+     * Stats data array
+     */
+    stats: StatsWidgetData[];
+    /**
+     * Display variant
+     * @default "radial"
+     */
+    variant?: "radial" | "bar";
+    /**
+     * Title of the widget
+     */
+    title?: string;
+    /**
+     * Glow variant color
+     * @default "none"
+     */
+    glow?: "primary" | "secondary" | "accent" | "none";
+    /**
+     * Layout mode
+     * @default "vertical"
+     */
+    layout?: "vertical" | "horizontal";
+    /**
+     * Additional className
+     */
+    className?: string;
+}
+/**
+ * Dara UI StatsWidget - RPG-style stats display
+ *
+ * Features:
+ * - Radial and bar progress variants
+ * - Custom labels, units, and colors
+ * - Mini trend indicators
+ * - 3D tilt effect on hover
+ * - Theme-aware colors
+ * - Uses Progress component
+ */
+export declare const StatsWidget: React.FC<StatsWidgetProps>;
+export default StatsWidget;

package/dist/components/StatsWidget/index.d.ts

@@ -0,0 +1,3 @@
+export { StatsWidget } from './StatsWidget';
+export type { StatsWidgetProps, StatsWidgetData } from './StatsWidget';
+export { StatsWidget as default } from './StatsWidget';

package/dist/components/Switch/Switch.d.ts

@@ -0,0 +1,62 @@
+import { default as React } from 'react';
+export interface SwitchProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> {
+    /**
+     * Whether the switch is on
+     * @default false
+     */
+    checked?: boolean;
+    /**
+     * Default checked state (uncontrolled)
+     * @default false
+     */
+    defaultChecked?: boolean;
+    /**
+     * Callback when checked state changes
+     */
+    onCheckedChange?: (checked: boolean) => void;
+    /**
+     * Label text – always rendered above the switch
+     */
+    label?: string;
+    /**
+     * Switch size
+     * @default "md"
+     */
+    size?: "sm" | "md" | "lg";
+    /**
+     * Glow effect when checked
+     * @default false
+     */
+    glow?: boolean;
+    /**
+     * Disabled state
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Optional icon shown inside the thumb when ON
+     */
+    onIcon?: React.ReactNode;
+    /**
+     * Optional icon shown inside the thumb when OFF
+     */
+    offIcon?: React.ReactNode;
+    /**
+     * Additional className for the outer wrapper
+     */
+    className?: string;
+}
+/**
+ * Dara UI Switch – glassmorphism toggle
+ *
+ * Features:
+ * - Glass track + elevated thumb
+ * - Thumb overhangs the track when ON
+ * - Sparkle burst only when turning on
+ * - Optional glow
+ * - Optional on/off icons (none by default)
+ * - Label always above, inherits document dir
+ * - Full RTL mirroring (thumb travels the opposite way)
+ */
+export declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLInputElement>>;
+export default Switch;

package/dist/components/Switch/index.d.ts

@@ -0,0 +1,3 @@
+export { Switch } from './Switch';
+export type { SwitchProps } from './Switch';
+export { Switch as default } from './Switch';

package/dist/components/Tabs/Tabs.d.ts

@@ -0,0 +1,21 @@
+import { default as React } from 'react';
+export interface TabItem {
+    label: string;
+    content: React.ReactNode;
+    value?: string;
+    icon?: React.ReactNode;
+    disabled?: boolean;
+}
+export interface TabsProps {
+    items: TabItem[];
+    activeValue?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    align?: "left" | "center" | "right";
+    size?: "sm" | "md" | "lg";
+    glowColor?: "primary" | "secondary" | "accent" | "success" | "danger" | "none";
+    fullWidth?: boolean;
+    className?: string;
+}
+export declare const Tabs: React.FC<TabsProps>;
+export default Tabs;

package/dist/components/Tabs/index.d.ts

@@ -0,0 +1,3 @@
+export { Tabs } from './Tabs';
+export type { TabsProps, TabItem } from './Tabs';
+export { Tabs as default } from './Tabs';

package/dist/components/ThemeChanger/ThemeChanger.d.ts

@@ -0,0 +1,98 @@
+import { default as React } from 'react';
+export interface ThemeOption {
+    /**
+     * Theme value (used as data-theme attribute)
+     */
+    value: string;
+    /**
+     * Display label
+     */
+    label: string;
+    /**
+     * Optional icon (React node or SVG)
+     */
+    icon?: React.ReactNode;
+}
+export interface ThemeChangerProps {
+    /**
+     * Controlled value
+     */
+    value?: string;
+    /**
+     * Default value (uncontrolled)
+     */
+    defaultValue?: string;
+    /**
+     * Callback when theme changes
+     */
+    onChange?: (theme: string) => void;
+    /**
+     * Available themes (overrides auto-detect)
+     */
+    availableThemes?: ThemeOption[];
+    /**
+     * Whether to auto-detect themes from CSS
+     * @default true
+     */
+    autoDetect?: boolean;
+    /**
+     * Component size
+     * @default "md"
+     */
+    size?: "sm" | "md" | "lg";
+    /**
+     * If true, shows only the icon in a fixed-size circular button
+     * @default false
+     */
+    iconOnly?: boolean;
+    /**
+     * Fixed width for the dropdown trigger (in px or rem)
+     * @example "140px" or "10rem"
+     */
+    fixedWidth?: string;
+    /**
+     * Additional className
+     */
+    className?: string;
+    /**
+     * Whether to use the Theme context
+     * @default true
+     */
+    useContext?: boolean;
+    /**
+     * Open the dropdown upward (useful inside mobile drawers / bottom of screen)
+     * @default false
+     */
+    openUpward?: boolean;
+}
+export interface ThemeContextValue {
+    theme: string;
+    setTheme: (theme: string) => void;
+    themes: ThemeOption[];
+}
+export interface ThemeProviderProps {
+    defaultTheme?: string;
+    themes?: ThemeOption[];
+    autoDetect?: boolean;
+    children: React.ReactNode;
+}
+export declare const ThemeProvider: React.FC<ThemeProviderProps>;
+export declare const useTheme: () => ThemeContextValue;
+/**
+ * Dara UI ThemeChanger - Dropdown for switching between themes
+ *
+ * Features:
+ * - Auto-detects available themes from CSS
+ * - Supports custom theme lists
+ * - Clean dropdown with SVG icon support
+ * - Icon-only mode for compact navigation bars
+ * - Fixed width option for consistent sizing
+ * - Controlled or uncontrolled modes
+ * - Persists theme preference in localStorage
+ * - Size variants (sm, md, lg)
+ * - Dropdown is always centered under the trigger
+ * - Menu width matches the button when iconOnly or fixedWidth is used
+ * - All ThemeChanger instances sync through Theme context
+ */
+export declare const ThemeChanger: React.FC<ThemeChangerProps>;
+export default ThemeChanger;

package/dist/components/ThemeChanger/index.d.ts

@@ -0,0 +1,3 @@
+export { ThemeChanger, ThemeProvider, useTheme } from './ThemeChanger';
+export type { ThemeChangerProps, ThemeOption, ThemeContextValue, ThemeProviderProps, } from './ThemeChanger';
+export { ThemeChanger as default } from './ThemeChanger';

package/dist/components/Toast/Toast.d.ts

@@ -0,0 +1,54 @@
+import { default as React } from 'react';
+export type ToastType = "success" | "error" | "warning" | "info";
+export interface ToastProps {
+    /**
+     * Toast message
+     */
+    message: string;
+    /**
+     * Toast type
+     * @default "info"
+     */
+    type?: ToastType;
+    /**
+     * Duration in ms before auto-dismiss
+     * @default 3000
+     */
+    duration?: number;
+    /**
+     * Callback when toast is dismissed
+     */
+    onDismiss?: () => void;
+    /**
+     * Toast ID for management
+     */
+    id?: string;
+}
+/**
+ * Individual Toast Component
+ *
+ * Features:
+ * - Glass-heavy styling with blur(30px) backdrop
+ * - Slide-in animation from the right edge
+ * - Auto-dismiss after duration
+ * - Manual dismiss with close button
+ * - Color-coded for different types
+ */
+export declare const Toast: React.FC<ToastProps>;
+export interface ToastContainerProps {
+    toasts: (ToastProps & {
+        id: string;
+    })[];
+    onRemove: (id: string) => void;
+}
+/**
+ * ToastContainer - Renders all active toasts via React Portal
+ *
+ * Features:
+ * - Renders toasts in a fixed position at top-right of the viewport
+ * - Uses React Portal to avoid z-index and stacking context issues
+ * - Each toast has its own width independent of others
+ * - FIFO ordering: newest toasts appear at the top
+ */
+export declare const ToastContainer: React.FC<ToastContainerProps>;
+export default Toast;

package/dist/components/Toast/ToastProvider.d.ts

@@ -0,0 +1,78 @@
+import { default as React, ReactNode } from 'react';
+import { ToastType } from './Toast';
+export interface ToastOptions {
+    /**
+     * Toast message
+     */
+    message: string;
+    /**
+     * Toast type
+     * @default "info"
+     */
+    type?: ToastType;
+    /**
+     * Duration in ms before auto-dismiss
+     * @default 3000
+     */
+    duration?: number;
+}
+interface ToastContextValue {
+    /**
+     * Show a toast notification
+     */
+    showToast: (options: ToastOptions) => void;
+    /**
+     * Show a success toast
+     */
+    success: (message: string, duration?: number) => void;
+    /**
+     * Show an error toast
+     */
+    error: (message: string, duration?: number) => void;
+    /**
+     * Show a warning toast
+     */
+    warning: (message: string, duration?: number) => void;
+    /**
+     * Show an info toast
+     */
+    info: (message: string, duration?: number) => void;
+    /**
+     * Clear all toasts
+     */
+    clearAll: () => void;
+}
+/**
+ * Toast Provider - wraps your app to enable toast functionality
+ *
+ * Features:
+ * - Maximum 5 toasts visible at once (FIFO)
+ * - Auto-dismiss after duration
+ * - Multiple toast types: success, error, warning, info
+ * - Clean API with helper methods
+ */
+export declare const ToastProvider: React.FC<{
+    children: ReactNode;
+}>;
+/**
+ * useToast hook - for showing toast notifications
+ *
+ * @example
+ * ```tsx
+ * const toast = useToast();
+ *
+ * // Show a success toast
+ * toast.success('Mission complete! +300 XP earned.');
+ *
+ * // Show an error toast
+ * toast.error('Connection lost. Retrying...');
+ *
+ * // Show a warning toast with custom duration
+ * toast.warning('Please check your connection', 5000);
+ *
+ * // Show an info toast
+ * toast.info('Archives are being indexed');
+ * ```
+ */
+export declare const useToast: () => ToastContextValue;
+export default useToast;

package/dist/components/Toast/index.d.ts

@@ -0,0 +1,5 @@
+export { Toast, ToastContainer } from './Toast';
+export type { ToastProps, ToastType } from './Toast';
+export { ToastProvider, useToast } from './ToastProvider';
+export type { ToastOptions } from './ToastProvider';
+export { Toast as default } from './Toast';