dara-ui 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2011-2026 The Bootstrap Authors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -0,0 +1,185 @@
+# Dara UI
+
+A modern React component library built for interfaces that feel refined and intentional.  
+Glassmorphism surfaces, subtle cyberpunk accents, complete RTL support, and a flexible theming system - all in one cohesive package.
+
+---
+
+## Features
+
+- **Glassmorphism design language** - soft translucency, layered depth, and restrained glow
+- **Three built-in themes** - Nightfall, Daylight, and Dracula
+- **Full RTL support** - layout, icons, scroll direction, and typography adapt automatically
+- **Accessible by default** - keyboard navigation, focus states, and ARIA attributes
+- **Tree-shakeable** - import only what you need
+- **TypeScript-first** - complete type definitions out of the box
+- **Zero-config theming** - CSS variables + simple provider pattern
+
+---
+
+## Installation
+
+```bash
+npm install dara-ui
+```
+
+or
+
+```bash
+yarn add dara-ui
+pnpm add dara-ui
+```
+
+---
+
+## Quick Start
+
+### 1. Import styles
+
+Add the stylesheet once at the root of your application:
+
+```ts
+import "dara-ui/style.css";
+```
+
+### 2. Wrap your app with providers
+
+```tsx
+import { ThemeProvider, I18nProvider } from "dara-ui";
+import { translations } from "dara-ui/translations";
+
+export default function Root() {
+  return (
+    <ThemeProvider defaultTheme="nightfall">
+      <I18nProvider translations={translations} defaultLanguage="en">
+        <App />
+      </I18nProvider>
+    </ThemeProvider>
+  );
+}
+```
+
+---
+
+## Themes
+
+Dara UI ships with three carefully tuned themes:
+
+| Theme       | Description                             | Default |
+| ----------- | --------------------------------------- | ------- |
+| `nightfall` | Deep charcoal with cyan accents         | Yes     |
+| `daylight`  | Soft light surfaces with muted contrast | No      |
+| `dracula`   | High-contrast purple-tinted dark mode   | No      |
+
+### Switching themes
+
+**Option A - HTML attribute**
+
+```html
+<html data-theme="daylight"></html>
+```
+
+**Option B - Component**
+
+```tsx
+import { ThemeChanger } from "dara-ui";
+
+<ThemeChanger />;
+```
+
+Themes are applied via CSS custom properties, so you can also override individual tokens in your own stylesheet.
+
+---
+
+## Components
+
+### Core
+
+Button · Badge · Input · Checkbox · Switch · Radio · Range · Avatar · Tooltip · Progress
+
+### Layout & Navigation
+
+Card · Tabs · Accordion · Dropdown · Modal · Navbar · Sidebar
+
+### Data Display
+
+XPBar · StatsWidget · QuestCard · CharacterCard · ProductCard · BlogCard
+
+### Feedback & Utilities
+
+Toast · ThemeChanger · LanguageChanger · SocialMedia
+
+### Visual Effects
+
+AuroraBlobs · Particles · GradientRing · NoiseOverlay
+
+All components accept standard React props and respect the active theme and text direction.
+
+---
+
+## Internationalization
+
+Dara UI includes a lightweight `I18nProvider` that works with the built-in translation dictionaries or your own.
+
+```tsx
+import { I18nProvider, LanguageChanger } from "dara-ui";
+import { translations } from "dara-ui/translations";
+
+<I18nProvider translations={translations} defaultLanguage="en">
+  <LanguageChanger />
+  {/* your app */}
+</I18nProvider>;
+```
+
+RTL is detected automatically from `document.documentElement.dir` and applied across layout, icons, scroll behavior, and spacing.
+
+---
+
+## Sidebar
+
+The `Sidebar` component is fully responsive:
+
+- **Desktop** - classic vertical navigation with collapse / expand, group labels, nested items, and icon-only mode
+- **Mobile** - horizontal scrollable tab strip with edge arrows that appear only when scrolling is possible
+
+```tsx
+import { Sidebar } from "dara-ui";
+
+<Sidebar
+  groups={[
+    {
+      label: "Main",
+      items: [
+        { id: "dashboard", label: "Dashboard", icon: <IconHome /> },
+        { id: "settings", label: "Settings", icon: <IconSettings /> },
+      ],
+    },
+  ]}
+  collapsible
+  defaultCollapsed={false}
+/>;
+```
+
+---
+
+## Customization
+
+All visual tokens are exposed as CSS variables. Override them globally or per component:
+
+```css
+:root {
+  --color-primary: #00e5ff;
+  --radius-md: 10px;
+  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.35);
+}
+```
+
+---
+
+## License
+
+MIT © Dara UI
+
+---
+
+Built with care for interfaces that deserve better defaults.

package/dist/components/Accordion/Accordion.d.ts

@@ -0,0 +1,23 @@
+import { default as React } from 'react';
+export interface AccordionItem {
+    id: string;
+    title: React.ReactNode;
+    content: React.ReactNode;
+    icon?: React.ReactNode;
+    disabled?: boolean;
+}
+export interface AccordionProps {
+    items: AccordionItem[];
+    openItems?: string[];
+    defaultOpenItems?: string[];
+    onOpenChange?: (openItems: string[]) => void;
+    multiple?: boolean;
+    glass?: boolean;
+    className?: string;
+    size?: "sm" | "md" | "lg";
+}
+/**
+ * Dara UI Accordion
+ */
+export declare const Accordion: React.FC<AccordionProps>;
+export default Accordion;

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

@@ -0,0 +1,3 @@
+export { Accordion } from './Accordion';
+export type { AccordionProps, AccordionItem } from './Accordion';
+export { Accordion as default } from './Accordion';

package/dist/components/AuroraBlobs/AuroraBlobs.d.ts

@@ -0,0 +1,28 @@
+import { default as React } from 'react';
+export interface AuroraBlobsProps {
+    /**
+     * Colors for the three blobs
+     * @default ["color-mix(in srgb, var(--color-primary) 25%, transparent)", ...]
+     */
+    colors?: [string, string, string];
+    /**
+     * Sizes for the three blobs in pixels
+     * @default [500, 400, 350]
+     */
+    sizes?: [number, number, number];
+    /**
+     * Additional className
+     */
+    className?: string;
+}
+/**
+ * Dara UI AuroraBlobs - Animated gradient blob background
+ *
+ * Features:
+ * - Three animated gradient blobs
+ * - Smooth drifting animation
+ * - Theme-aware colors
+ * - Used as a subtle atmospheric background effect
+ */
+export declare const AuroraBlobs: React.FC<AuroraBlobsProps>;
+export default AuroraBlobs;

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

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

package/dist/components/Avatar/Avatar.d.ts

@@ -0,0 +1,65 @@
+import { default as React } from 'react';
+export interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Image source URL
+     */
+    src?: string;
+    /**
+     * Alternative text for the image
+     */
+    alt?: string;
+    /**
+     * Avatar size
+     * @default "md"
+     */
+    size?: "xs" | "sm" | "md" | "lg" | "xl";
+    /**
+     * Display a fallback icon instead of image
+     * @default false
+     */
+    fallback?: boolean;
+    /**
+     * Fallback text to display (usually initials)
+     */
+    fallbackText?: string;
+    /**
+     * Shape of the avatar
+     * @default "circle"
+     */
+    shape?: "circle" | "rounded" | "square";
+    /**
+     * Border style
+     * @default false
+     */
+    bordered?: boolean;
+    /**
+     * Glow effect around the avatar
+     */
+    glow?: "primary" | "secondary" | "accent";
+    /**
+     * Online status indicator
+     */
+    status?: "online" | "offline" | "away" | "busy";
+    /**
+     * Group avatar (multiple avatars stacked)
+     * @default false
+     */
+    group?: boolean;
+    /**
+     * Click handler
+     */
+    onClick?: () => void;
+}
+/**
+ * Dara UI Avatar - Display user profile images with fallback support
+ *
+ * Features:
+ * - Image support with fallback to initials or icon
+ * - Multiple sizes (xs, sm, md, lg, xl)
+ * - Shape variants (circle, rounded, square)
+ * - Border and glow effects
+ * - Online status indicator
+ * - Group stacking
+ */
+export declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLDivElement>>;
+export default Avatar;

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

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

package/dist/components/Badge/Badge.d.ts

@@ -0,0 +1,38 @@
+import { default as React } from 'react';
+export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /**
+     * Badge color variant
+     * @default "primary"
+     */
+    variant?: "primary" | "secondary" | "success" | "danger" | "warning";
+    /**
+     * Badge size
+     * @default "md"
+     */
+    size?: "sm" | "md" | "lg";
+    /**
+     * If true, adds glow effect
+     * @default false
+     */
+    glow?: boolean;
+    /**
+     * If true, outline style
+     * @default false
+     */
+    outline?: boolean;
+    /**
+     * Badge content
+     */
+    children: React.ReactNode;
+}
+/**
+ * Dara UI Badge - Theme-aware status indicators
+ *
+ * Features:
+ * - Multiple variants with consistent colors
+ * - Size variants
+ * - Glow and outline options
+ * - RTL support via dir attribute
+ */
+export declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;
+export default Badge;

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

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

package/dist/components/BlogCard/BlogCard.d.ts

@@ -0,0 +1,97 @@
+import { default as React } from 'react';
+export interface BlogCardProps {
+    /**
+     * Blog post title
+     */
+    title: string;
+    /**
+     * Blog post excerpt
+     */
+    excerpt: string;
+    /**
+     * Cover image URL
+     */
+    coverImage?: string;
+    /**
+     * Author name
+     */
+    author?: string;
+    /**
+     * Author avatar URL
+     */
+    authorAvatar?: string;
+    /**
+     * Publication date
+     */
+    date?: string | Date;
+    /**
+     * Read time in minutes
+     */
+    readTime?: number;
+    /**
+     * Category
+     */
+    category?: string;
+    /**
+     * Tags
+     */
+    tags?: string[];
+    /**
+     * Link to full post
+     */
+    link?: string;
+    /**
+     * Click callback
+     */
+    onClick?: () => void;
+    /**
+     * Featured (larger)
+     * @default false
+     */
+    featured?: boolean;
+    /**
+     * Layout
+     * @default "vertical"
+     */
+    layout?: "vertical" | "horizontal";
+    /**
+     * Glow
+     * @default "none"
+     */
+    glow?: "primary" | "secondary" | "accent" | "none";
+    /**
+     * Show category badge
+     * @default true
+     */
+    showCategory?: boolean;
+    /**
+     * Show author
+     * @default true
+     */
+    showAuthor?: boolean;
+    /**
+     * Show read time
+     * @default true
+     */
+    showReadTime?: boolean;
+    /**
+     * Additional className
+     */
+    className?: string;
+    /**
+     * Full width on mobile
+     * @default false
+     */
+    fullWidthMobile?: boolean;
+}
+/**
+ * Dara UI BlogCard – glass blog card with 3D tilt, elevation & glow hover
+ *
+ * Features:
+ * - Vertical / horizontal layouts + featured size
+ * - 3D tilt + lift + glow on hover
+ * - Cover zoom, stable line-clamps, in-flow Read more
+ * - RTL-friendly badge (start-*)
+ */
+export declare const BlogCard: React.FC<BlogCardProps>;
+export default BlogCard;

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

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

package/dist/components/Button/Button.d.ts

@@ -0,0 +1,49 @@
+import { default as React } from 'react';
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * Button visual style variant
+     * @default "primary"
+     */
+    variant?: "primary" | "secondary" | "accent" | "glass" | "danger" | "success" | "outline";
+    /**
+     * Button size
+     * @default "md"
+     */
+    size?: "sm" | "md" | "lg";
+    /**
+     * If true, button will take full width
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * If true, shows loading spinner
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Glow effect color - primary, secondary, or accent
+     */
+    glow?: "" | "primary" | "secondary" | "accent";
+    /**
+     * Icon on the left side
+     */
+    leftIcon?: React.ReactNode;
+    /**
+     * Icon on the right side
+     */
+    rightIcon?: React.ReactNode;
+}
+/**
+ * Dara UI Button - Glassmorphism style with cyberpunk aesthetics
+ *
+ * Features:
+ * - Multiple variants: primary, secondary, accent, glass, danger, success, outline
+ * - Three sizes: sm, md, lg
+ * - Glow effects with theme-aware shadows
+ * - Loading state with spinner
+ * - Full width option
+ * - Icon support on both sides
+ * - Smooth hover animations with scale and lift
+ */
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export default Button;

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

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

package/dist/components/Card/Card.d.ts

@@ -0,0 +1,43 @@
+import { default as React } from 'react';
+export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Card visual variant
+     * @default "glass"
+     */
+    variant?: "glass" | "solid" | "outline";
+    /**
+     * Card padding
+     * @default "md"
+     */
+    padding?: "sm" | "md" | "lg" | "none";
+    /**
+     * Border radius
+     * @default "standard"
+     */
+    radius?: "sm" | "md" | "standard" | "large" | "xl" | "full";
+    /**
+     * Float hover effect with 3D tilt
+     * @default false
+     */
+    float?: boolean;
+    /**
+     * Glow effect color
+     */
+    glow?: "" | "primary" | "secondary" | "accent";
+    /**
+     * Card content
+     */
+    children?: React.ReactNode;
+}
+/**
+ * Dara UI Card
+ *
+ * Features:
+ * - Glass, solid, and outline variants
+ * - 3D tilt effect on hover when float is enabled
+ * - Smooth animated glow transitions
+ * - Theme-aware colors
+ * - radius prop wins over .glass border-radius (inline style)
+ */
+export declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
+export default Card;

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

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

package/dist/components/CharacterCard/CharacterCard.d.ts

@@ -0,0 +1,86 @@
+import { default as React } from 'react';
+export interface CharacterStat {
+    /**
+     * Stat label (e.g., "Force Alignment", "Combat", "Intelligence")
+     */
+    label: string;
+    /**
+     * Stat value (0-100)
+     */
+    value: number;
+    /**
+     * Color variant for the stat ring
+     */
+    color?: "primary" | "secondary" | "accent" | "success" | "danger" | "warning";
+}
+export interface CharacterCardProps {
+    /**
+     * Character name
+     */
+    name: string;
+    /**
+     * Character subtitle (e.g., "Jedi Archivist")
+     */
+    subtitle?: string;
+    /**
+     * Character quote
+     */
+    quote?: string;
+    /**
+     * Portrait image URL
+     */
+    portrait?: string;
+    /**
+     * Custom icon instead of portrait
+     */
+    icon?: React.ReactNode;
+    /**
+     * MBTI personality type
+     */
+    mbti?: string;
+    /**
+     * Species
+     */
+    species?: string;
+    /**
+     * Affiliation (e.g., "Jedi Order", "Rebel Alliance")
+     */
+    affiliation?: string;
+    /**
+     * Array of custom traits/props
+     */
+    traits?: string[];
+    /**
+     * Array of stats to display
+     */
+    stats?: CharacterStat[];
+    /**
+     * Glow variant color
+     * @default "primary"
+     */
+    glow?: "primary" | "secondary" | "accent" | "none";
+    /**
+     * Layout mode
+     * @default "vertical"
+     */
+    layout?: "vertical" | "horizontal";
+    /**
+     * Additional className
+     */
+    className?: string;
+}
+/**
+ * Dara UI CharacterCard - RPG-style character profile card
+ *
+ * Features:
+ * - Vertical and horizontal layouts
+ * - Portrait with fallback to initials
+ * - Name, subtitle, quote
+ * - Stats with radial progress rings
+ * - 3D tilt effect on hover
+ * - Glow variants
+ * - Theme-aware colors
+ * - Uses Avatar and Badge components
+ */
+export declare const CharacterCard: React.FC<CharacterCardProps>;
+export default CharacterCard;

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

@@ -0,0 +1,3 @@
+export { CharacterCard } from './CharacterCard';
+export type { CharacterCardProps, CharacterStat } from './CharacterCard';
+export { CharacterCard as default } from './CharacterCard';