dara-ui 0.1.0

package/dist/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,59 @@
+import { default as React } from 'react';
+export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> {
+    /**
+     * Whether the checkbox is checked
+     * @default false
+     */
+    checked?: boolean;
+    /**
+     * Default checked state (uncontrolled)
+     * @default false
+     */
+    defaultChecked?: boolean;
+    /**
+     * Callback when checked state changes
+     */
+    onCheckedChange?: (checked: boolean) => void;
+    /**
+     * Label text for the checkbox
+     */
+    label?: string;
+    /**
+     * Checkbox size
+     * @default "md"
+     */
+    size?: "sm" | "md" | "lg";
+    /**
+     * If true, adds a glow effect when checked
+     * @default false
+     */
+    glow?: boolean;
+    /**
+     * Error state
+     * @default false
+     */
+    error?: boolean;
+    /**
+     * Disabled state
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Additional className
+     */
+    className?: string;
+}
+/**
+ * Dara UI Checkbox - Interactive checkbox with glass styling and sparkle animation
+ *
+ * Features:
+ * - Glass styling with theme-aware colors
+ * - Smooth check animation with sparkle effect
+ * - Glow effect when checked
+ * - RTL support via document dir (box on the right, label on the left in RTL)
+ * - Controlled and uncontrolled modes
+ * - Multiple sizes (sm, md, lg)
+ * - Error state support
+ */
+export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
+export default Checkbox;

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

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

package/dist/components/Dropdown/Dropdown.d.ts

@@ -0,0 +1,90 @@
+import { default as React } from 'react';
+export interface DropdownOption {
+    /**
+     * Option value (unique identifier)
+     */
+    value: string;
+    /**
+     * Option label to display
+     */
+    label: string;
+    /**
+     * Optional icon
+     */
+    icon?: React.ReactNode;
+    /**
+     * Disabled state
+     */
+    disabled?: boolean;
+}
+export interface DropdownProps {
+    /**
+     * Array of dropdown options
+     */
+    options: DropdownOption[];
+    /**
+     * Controlled: selected value
+     */
+    value?: string;
+    /**
+     * Default selected value (uncontrolled mode)
+     */
+    defaultValue?: string;
+    /**
+     * Controlled: callback when selection changes
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Placeholder text when no option is selected
+     * @default "Select an option..."
+     */
+    placeholder?: string;
+    /**
+     * If true, dropdown will be searchable
+     * @default false
+     */
+    searchable?: boolean;
+    /**
+     * Search placeholder text
+     * @default "Search..."
+     */
+    searchPlaceholder?: string;
+    /**
+     * If true, dropdown will be disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * If true, dropdown takes 100% of parent width
+     * When false, uses a fixed width per size (does not grow with label text)
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Size of the dropdown
+     * @default "md"
+     */
+    size?: "sm" | "md" | "lg";
+    /**
+     * Additional className for the container
+     */
+    className?: string;
+    /**
+     * Label text for the dropdown
+     */
+    label?: string;
+    /**
+     * Helper text shown below dropdown
+     */
+    helperText?: string;
+    /**
+     * Error state
+     */
+    error?: boolean;
+    /**
+     * Error message
+     */
+    errorMessage?: string;
+}
+export declare const Dropdown: React.ForwardRefExoticComponent<DropdownProps & React.RefAttributes<HTMLDivElement>>;
+export default Dropdown;

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

@@ -0,0 +1,3 @@
+export { Dropdown } from './Dropdown';
+export type { DropdownProps, DropdownOption } from './Dropdown';
+export { Dropdown as default } from './Dropdown';

package/dist/components/GradientRing/GradientRing.d.ts

@@ -0,0 +1,42 @@
+import { default as React } from 'react';
+export interface GradientRingProps {
+    /**
+     * Size of the ring in pixels
+     * @default 280
+     */
+    size?: number;
+    /**
+     * Colors for the conic gradient
+     * @default ["var(--color-primary)", "var(--color-secondary)", "var(--color-accent)", "var(--color-primary)"]
+     */
+    colors?: string[];
+    /**
+     * Blur amount in pixels
+     * @default 60
+     */
+    blur?: number;
+    /**
+     * Opacity of the ring
+     * @default 0.5
+     */
+    opacity?: number;
+    /**
+     * Animation duration in seconds
+     * @default 15
+     */
+    duration?: number;
+    /**
+     * Additional className
+     */
+    className?: string;
+}
+/**
+ * Dara UI GradientRing - Spinning conic gradient ring
+ *
+ * Features:
+ * - Customizable size, colors, and blur
+ * - Smooth spinning animation
+ * - Used as a decorative element behind hero sections
+ */
+export declare const GradientRing: React.FC<GradientRingProps>;
+export default GradientRing;

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

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

package/dist/components/Icons/Icons.d.ts

@@ -0,0 +1,192 @@
+/**
+ * Dara UI - Centralized SVG Icons
+ *
+ * All manually built SVG icons used across the library.
+ * Import from here instead of redefining in each component.
+ */
+export declare const HomeIcon: ({ className }: {
+    className?: string;
+}) => import("react").JSX.Element;
+export declare const ExploreIcon: ({ className, }: {
+    className?: string;
+}) => import("react").JSX.Element;
+export declare const SettingsIcon: ({ className, }: {
+    className?: string;
+}) => import("react").JSX.Element;
+export declare const SearchIcon: ({ className, }: {
+    className?: string;
+}) => import("react").JSX.Element;
+export declare const UserIcon: ({ className }: {
+    className?: string;
+}) => import("react").JSX.Element;
+export declare const LockIcon: ({ className }: {
+    className?: string;
+}) => import("react").JSX.Element;
+export declare const CheckIcon: ({ className, }: {
+    className?: string;
+}) => import("react").JSX.Element;
+export declare const StarIcon: ({ className }: {
+    className?: string;
+}) => import("react").JSX.Element;
+export declare const BellIcon: ({ className }: {
+    className?: string;
+}) => import("react").JSX.Element;
+export declare const BellSlashIcon: ({ className, }: {
+    className?: string;
+}) => import("react").JSX.Element;
+export declare const CircleFilledIcon: ({ className, }: {
+    className?: string;
+}) => import("react").JSX.Element;
+export declare const CircleOutlineIcon: ({ className, }: {
+    className?: string;
+}) => import("react").JSX.Element;
+export declare const SparkleIcon: ({ className, }: {
+    className?: string;
+}) => import("react").JSX.Element;
+export declare const TrophyIcon: ({ className, }: {
+    className?: string;
+}) => import("react").JSX.Element;
+export declare const PackageIcon: ({ className, }: {
+    className?: string;
+}) => import("react").JSX.Element;
+export declare const TargetIcon: ({ className, }: {
+    className?: string;
+}) => import("react").JSX.Element;
+export declare const BanIcon: ({ className }: {
+    className?: string;
+}) => import("react").JSX.Element;
+export declare const SettingsGearIcon: ({ className, }: {
+    className?: string;
+}) => import("react").JSX.Element;
+export declare const FolderDocIcon: ({ className, }: {
+    className?: string;
+}) => import("react").JSX.Element;
+export declare const SwordsSmallIcon: ({ className, }: {
+    className?: string;
+}) => import("react").JSX.Element;
+export declare const ChartSmallIcon: ({ className, }: {
+    className?: string;
+}) => import("react").JSX.Element;
+export declare const UserSmallIcon: ({ className, }: {
+    className?: string;
+}) => import("react").JSX.Element;
+export declare const HomeSmallIcon: ({ className, }: {
+    className?: string;
+}) => import("react").JSX.Element;
+export declare const FolderSmallIcon: ({ className, }: {
+    className?: string;
+}) => import("react").JSX.Element;
+export declare const MoonOutlineIcon: ({ className, }: {
+    className?: string;
+}) => import("react").JSX.Element;
+export declare const SkullIcon: ({ className, }: {
+    className?: string;
+}) => import("react").JSX.Element;
+export declare const MoonIcon: ({ className }: {
+    className?: string;
+}) => import("react").JSX.Element;
+export declare const SunIcon: ({ className }: {
+    className?: string;
+}) => import("react").JSX.Element;
+export declare const VolumeHighIcon: ({ className, }: {
+    className?: string;
+}) => import("react").JSX.Element;
+export declare const VolumeMuteIcon: ({ className, }: {
+    className?: string;
+}) => import("react").JSX.Element;
+export declare const FolderIcon: ({ className, }: {
+    className?: string;
+}) => import("react").JSX.Element;
+export declare const DocsIcon: ({ className }: {
+    className?: string;
+}) => import("react").JSX.Element;
+export declare const MailIcon: ({ className }: {
+    className?: string;
+}) => import("react").JSX.Element;
+export declare const LogoutIcon: ({ className, }: {
+    className?: string;
+}) => import("react").JSX.Element;
+export declare const SidebarHomeIcon: ({ className, }: {
+    className?: string;
+}) => import("react").JSX.Element;
+export declare const PlayIcon: ({ className }: {
+    className?: string;
+}) => import("react").JSX.Element;
+export declare const PauseIcon: ({ className, }: {
+    className?: string;
+}) => import("react").JSX.Element;
+export declare const CartIcon: ({ className }: {
+    className?: string;
+}) => import("react").JSX.Element;
+export declare const CloseIcon: ({ className, }: {
+    className?: string;
+}) => import("react").JSX.Element;
+export declare const ChevronDownIcon: ({ className, }: {
+    className?: string;
+}) => import("react").JSX.Element;
+export declare const ChevronRightIcon: ({ className, }: {
+    className?: string;
+}) => import("react").JSX.Element;
+export declare const ChevronLeftIcon: ({ className, }: {
+    className?: string;
+}) => import("react").JSX.Element;
+export declare const SuccessIcon: ({ className, }: {
+    className?: string;
+}) => import("react").JSX.Element;
+export declare const ErrorIcon: ({ className, }: {
+    className?: string;
+}) => import("react").JSX.Element;
+export declare const WarningIcon: ({ className, }: {
+    className?: string;
+}) => import("react").JSX.Element;
+export declare const InfoIcon: ({ className }: {
+    className?: string;
+}) => import("react").JSX.Element;
+export declare const AvatarIcon: ({ className, }: {
+    className?: string;
+}) => import("react").JSX.Element;
+export declare const ImagePlaceholderIcon: ({ className, }: {
+    className?: string;
+}) => import("react").JSX.Element;
+export declare const BlogPlaceholderIcon: ({ className, }: {
+    className?: string;
+}) => import("react").JSX.Element;
+export declare const FlagIcon: ({ className }: {
+    className?: string;
+}) => import("react").JSX.Element;
+export declare const ClockIcon: ({ className, }: {
+    className?: string;
+}) => import("react").JSX.Element;
+export declare const RocketIcon: ({ className, }: {
+    className?: string;
+}) => import("react").JSX.Element;
+export declare const AnalyticsIcon: ({ className, }: {
+    className?: string;
+}) => import("react").JSX.Element;
+export declare const SwordsIcon: ({ className, }: {
+    className?: string;
+}) => import("react").JSX.Element;
+export declare const ChartBarIcon: ({ className, }: {
+    className?: string;
+}) => import("react").JSX.Element;
+export declare const GithubIcon: ({ className, }: {
+    className?: string;
+}) => import("react").JSX.Element;
+export declare const XTwitterIcon: ({ className, }: {
+    className?: string;
+}) => import("react").JSX.Element;
+export declare const DiscordIcon: ({ className, }: {
+    className?: string;
+}) => import("react").JSX.Element;
+export declare const YoutubeIcon: ({ className, }: {
+    className?: string;
+}) => import("react").JSX.Element;
+export declare const InstagramIcon: ({ className, }: {
+    className?: string;
+}) => import("react").JSX.Element;
+export declare const LinkedinIcon: ({ className, }: {
+    className?: string;
+}) => import("react").JSX.Element;
+export declare const BlueskyIcon: ({ className, }: {
+    className?: string;
+}) => import("react").JSX.Element;

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

@@ -0,0 +1 @@
+export * from './Icons';

package/dist/components/Input/Input.d.ts

@@ -0,0 +1,61 @@
+import { default as React } from 'react';
+export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
+    /**
+     * Input type
+     * @default "text"
+     */
+    type?: "text" | "password" | "search" | "email" | "tel" | "number" | "url" | "date";
+    /**
+     * Input size
+     * @default "md"
+     */
+    size?: "sm" | "md" | "lg";
+    /**
+     * Validation state
+     */
+    validation?: "success" | "error" | "warning";
+    /**
+     * Error message
+     */
+    errorMessage?: string;
+    /**
+     * Success message
+     */
+    successMessage?: string;
+    /**
+     * Left icon
+     */
+    leftIcon?: React.ReactNode;
+    /**
+     * Right icon
+     */
+    rightIcon?: React.ReactNode;
+    /**
+     * Glow focus effect
+     * @default true
+     */
+    glowFocus?: boolean;
+    /**
+     * Label text
+     */
+    label?: string;
+    /**
+     * Helper text
+     */
+    helperText?: string;
+    /**
+     * Full width
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Disabled state
+     * @default false
+     */
+    disabled?: boolean;
+}
+/**
+ * Dara UI Input
+ */
+export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+export default Input;

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

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

package/dist/components/LanguageChanger/LanguageChanger.d.ts

@@ -0,0 +1,168 @@
+import { default as React } from 'react';
+export interface LanguageOption {
+    /**
+     * Language code (e.g., "en", "fa", "fr")
+     */
+    value: string;
+    /**
+     * Display label
+     */
+    label: string;
+    /**
+     * Flag image URL (auto-generated from language code if not provided)
+     */
+    icon?: React.ReactNode;
+    /**
+     * Direction for this language
+     * @default "ltr"
+     */
+    dir?: "ltr" | "rtl";
+}
+export interface LanguageChangerProps {
+    /**
+     * Controlled value
+     */
+    value?: string;
+    /**
+     * Default value (uncontrolled)
+     */
+    defaultValue?: string;
+    /**
+     * Callback when language changes
+     */
+    onChange?: (lang: string) => void;
+    /**
+     * Available languages (overrides default)
+     */
+    availableLanguages?: LanguageOption[];
+    /**
+     * 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 I18n context
+     * @default true
+     */
+    useContext?: boolean;
+    /**
+     * Dropdown placement
+     * @default "bottom"
+     */
+    placement?: "bottom" | "top";
+    /**
+     * Open the dropdown upward
+     * @default false
+     */
+    openUpward?: boolean;
+}
+/**
+ * Default Dara UI languages with flag CDN URLs
+ */
+export declare const DEFAULT_LANGUAGES: LanguageOption[];
+export interface I18nContextValue {
+    /**
+     * Current language code
+     */
+    language: string;
+    /**
+     * Set the current language
+     */
+    setLanguage: (lang: string) => void;
+    /**
+     * Translation function - resolves nested keys
+     * @example t('welcome.title') => "Welcome"
+     * @example t('greeting', { name: "John" }) => "Hello John"
+     */
+    t: (key: string, params?: Record<string, string | number>) => string;
+    /**
+     * Available languages
+     */
+    languages: LanguageOption[];
+    /**
+     * Direction for current language
+     */
+    dir: "ltr" | "rtl";
+}
+export interface I18nProviderProps {
+    /**
+     * Initial language
+     */
+    defaultLanguage?: string;
+    /**
+     * Translations object - keyed by language code
+     * @example { en: { welcome: "Welcome" }, fa: { welcome: "خوش آمدید" } }
+     */
+    translations: Record<string, Record<string, any>>;
+    /**
+     * Available languages (overrides default)
+     */
+    languages?: LanguageOption[];
+    /**
+     * Children
+     */
+    children: React.ReactNode;
+}
+/**
+ * I18nProvider - Provides translation context to children
+ *
+ * Features:
+ * - Self-contained i18n system, no external dependencies
+ * - Nested key resolution (e.g., 'welcome.title')
+ * - Parameter interpolation (e.g., 'Hello {{name}}')
+ * - Language persistence in localStorage
+ * - Auto-updates dir attribute on html
+ * - Triggers re-render of all consuming components on language change
+ */
+export declare const I18nProvider: React.FC<I18nProviderProps>;
+/**
+ * useI18n - Hook for accessing i18n context
+ *
+ * @example
+ * ```tsx
+ * const { t, language, setLanguage } = useI18n();
+ *
+ * // Translate a key
+ * <h1>{t('welcome.title')}</h1>
+ *
+ * // With parameters
+ * <p>{t('greeting', { name: user.name })}</p>
+ *
+ * // Change language
+ * <button onClick={() => setLanguage('fa')}>فارسی</button>
+ * ```
+ */
+export declare const useI18n: () => I18nContextValue;
+/**
+ * Dara UI LanguageChanger - Dropdown for switching between languages
+ *
+ * Features:
+ * - Auto-detects available languages from default list
+ * - Supports custom language lists
+ * - Clean dropdown with flag icons from Flagpedia CDN
+ * - Icon-only mode for compact navigation bars
+ * - Fixed width option for consistent sizing
+ * - Controlled or uncontrolled modes
+ * - Applies language via lang and dir attributes on html element
+ * - Persists language 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 LanguageChanger instances sync through I18n context
+ */
+export declare const LanguageChanger: React.FC<LanguageChangerProps>;
+export default LanguageChanger;

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

@@ -0,0 +1,4 @@
+export { LanguageChanger, I18nProvider, useI18n } from './LanguageChanger';
+export type { LanguageChangerProps, LanguageOption, I18nContextValue, I18nProviderProps, } from './LanguageChanger';
+export { DEFAULT_LANGUAGES } from './LanguageChanger';
+export { LanguageChanger as default } from './LanguageChanger';

package/dist/components/Modal/Modal.d.ts

@@ -0,0 +1,53 @@
+import { default as React } from 'react';
+export interface ModalProps {
+    /**
+     * Whether the modal is open
+     * @default false
+     */
+    isOpen: boolean;
+    /**
+     * Callback when modal closes
+     */
+    onClose: () => void;
+    /**
+     * Modal title
+     */
+    title?: React.ReactNode;
+    /**
+     * Modal content
+     */
+    children: React.ReactNode;
+    /**
+     * Modal size
+     * @default "md"
+     */
+    size?: "sm" | "md" | "lg" | "xl";
+    /**
+     * Close on backdrop click
+     * @default true
+     */
+    closeOnBackdropClick?: boolean;
+    /**
+     * Close on Escape key
+     * @default true
+     */
+    closeOnEscape?: boolean;
+    /**
+     * Confirm button text
+     */
+    confirmText?: string;
+    /**
+     * Cancel button text
+     */
+    cancelText?: string;
+    /**
+     * Callback when confirm is clicked
+     */
+    onConfirm?: () => void;
+    /**
+     * Additional className for modal content
+     */
+    className?: string;
+}
+export declare const Modal: React.FC<ModalProps>;
+export default Modal;

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

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