mango-ui-kit 1.0.0

package/README.md

@@ -0,0 +1,63 @@
+# Mango UI Kit 🥭
+
+A premium, modern React UI component library built with TypeScript, Lucide Icons, and Tailwind CSS.
+
+## Features
+- ✨ **Premium Aesthetics**: Carefully crafted components with a focus on modern design.
+- 🎨 **Theme Support**: Built-in support for light and dark modes via CSS variables.
+- 🛡️ **Type Safe**: Written in TypeScript for excellent developer experience.
+- 🧩 **Modular**: Use only the components you need.
+
+## Installation
+
+```bash
+npm install mango-ui-kit
+```
+
+## Usage
+
+First, import the styles in your main entry file (e.g., `main.ts` or `App.tsx`):
+
+```tsx
+import 'mango-ui-kit/dist/style.css';
+```
+
+Then, you can start using components:
+
+```tsx
+import { Button, Card, AppBar } from 'mango-ui-kit';
+
+function App() {
+  return (
+    <div>
+      <AppBar 
+        user={{ fullName: "John Doe" }}
+        subscriptionPlan="Pro"
+      />
+      <Card hoverable className="m-4">
+        <h1>Welcome to Mango UI</h1>
+        <Button variant="primary">Get Started</Button>
+      </Card>
+    </div>
+  );
+}
+```
+
+## Available Components
+
+- **Navigation**: AppBar, Sidebar, Breadcrumbs
+- **Inputs**: Button, Input, Dropdown, MultiSelect, FileDropzone, Toggle, TimePicker
+- **Feedback**: Spinner, ProgressBar, Skeleton, ConfirmationModal, Rating
+- **Data Display**: Table, Card, StatCard, Badge, Avatar, AvatarGroup, Accordion, Tabs
+- **Date/Time**: CalendarDatePicker, DateRangePicker
+- **Layout**: Drawer
+
+## Peer Dependencies
+
+Ensure you have the following installed:
+- `react` >= 18.0.0
+- `react-dom` >= 18.0.0
+
+## License
+
+MIT © Mango UI Team

package/dist/components/accordion/accordion.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { AccordionProps } from './accordion.types';
+export declare const Accordion: React.FC<AccordionProps>;

package/dist/components/accordion/accordion.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { Accordion } from './accordion';
+declare const meta: Meta<typeof Accordion>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const AllowMultiple: Story;
+export declare const AllClosed: Story;

package/dist/components/accordion/accordion.types.d.ts

@@ -0,0 +1,13 @@
+import { LucideIcon } from 'lucide-react';
+import { ReactNode } from 'react';
+export interface AccordionItem {
+    title: string;
+    content: ReactNode;
+    icon?: LucideIcon;
+}
+export interface AccordionProps {
+    items?: AccordionItem[];
+    allowMultiple?: boolean;
+    className?: string;
+    defaultOpen?: number[];
+}

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

@@ -0,0 +1,2 @@
+export * from './accordion';
+export type * from './accordion.types';

package/dist/components/app-bar/app-bar.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { AppBarProps } from './app-bar.types';
+export declare const AppBar: React.FC<AppBarProps>;

package/dist/components/app-bar/app-bar.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { AppBar } from './app-bar';
+declare const meta: Meta<typeof AppBar>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithSubscription: Story;
+export declare const FreeWithUpgrade: Story;
+export declare const DarkTheme: Story;

package/dist/components/app-bar/app-bar.types.d.ts

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react';
+export interface AppBarUser {
+    fullName?: string;
+    avatarUrl?: string;
+    email?: string;
+}
+export interface AppBarProps {
+    theme?: 'light' | 'dark';
+    onToggleTheme?: () => void;
+    onToggleSidebar?: () => void;
+    user?: AppBarUser;
+    onLogout?: () => void;
+    onUpgrade?: () => void;
+    subscriptionPlan?: string;
+    searchPlaceholder?: string;
+    onSearch?: (query: string) => void;
+    notificationCount?: number;
+    className?: string;
+    logo?: ReactNode;
+}

package/dist/components/app-bar/index.d.ts

@@ -0,0 +1,2 @@
+export * from './app-bar';
+export type * from './app-bar.types';

package/dist/components/avatar/avatar.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { AvatarProps } from './avatar.types';
+export declare const Avatar: React.FC<AvatarProps>;

package/dist/components/avatar/avatar.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { Avatar } from './avatar';
+declare const meta: Meta<typeof Avatar>;
+export default meta;
+type Story = StoryObj<typeof Avatar>;
+export declare const Default: Story;
+export declare const Image: Story;
+export declare const Large: Story;

package/dist/components/avatar/avatar.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const avatarStyles: (props?: ({
+    size?: "sm" | "md" | "lg" | "xs" | "xl" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/components/avatar/avatar.types.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+import { VariantProps } from 'class-variance-authority';
+import { avatarStyles } from './avatar.styles';
+export interface AvatarProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof avatarStyles> {
+    src?: string;
+    alt?: string;
+    fallback?: string;
+}

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

@@ -0,0 +1,3 @@
+export * from './avatar';
+export type * from './avatar.types';
+export * from './avatar.styles';

package/dist/components/avatar-group/avatar-group.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { AvatarGroupProps } from './avatar-group.types';
+export declare const AvatarGroup: React.FC<AvatarGroupProps>;

package/dist/components/avatar-group/avatar-group.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { AvatarGroup } from './avatar-group';
+declare const meta: Meta<typeof AvatarGroup>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const ShowMore: Story;
+export declare const Initials: Story;

package/dist/components/avatar-group/avatar-group.types.d.ts

@@ -0,0 +1,10 @@
+export interface AvatarUser {
+    name: string;
+    image?: string;
+}
+export interface AvatarGroupProps {
+    users?: AvatarUser[];
+    max?: number;
+    size?: number;
+    className?: string;
+}

package/dist/components/avatar-group/index.d.ts

@@ -0,0 +1,2 @@
+export * from './avatar-group';
+export type * from './avatar-group.types';

package/dist/components/badge/badge.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { BadgeProps } from './badge.types';
+export declare const Badge: React.FC<BadgeProps>;
+export default Badge;

package/dist/components/badge/badge.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { Badge } from './badge';
+declare const meta: Meta<typeof Badge>;
+export default meta;
+type Story = StoryObj<typeof Badge>;
+export declare const Primary: Story;
+export declare const Success: Story;
+export declare const Large: Story;
+export declare const Pill: Story;

package/dist/components/badge/badge.types.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+    variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger' | 'success' | 'warning' | 'info';
+    size?: 'sm' | 'md' | 'lg';
+    pill?: boolean;
+    icon?: React.ElementType;
+}

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

@@ -0,0 +1,2 @@
+export * from './badge';
+export type * from './badge.types';

package/dist/components/breadcrumbs/breadcrumbs.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { BreadcrumbsProps } from './breadcrumbs.types';
+export declare const Breadcrumbs: React.FC<BreadcrumbsProps>;

package/dist/components/breadcrumbs/breadcrumbs.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { Breadcrumbs } from './breadcrumbs';
+declare const meta: Meta<typeof Breadcrumbs>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const TwoLevels: Story;

package/dist/components/breadcrumbs/breadcrumbs.types.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode, ComponentType } from 'react';
+export interface BreadcrumbItem {
+    label: string;
+    href?: string;
+    icon?: ComponentType<any>;
+}
+export interface BreadcrumbsProps {
+    items: BreadcrumbItem[];
+    separator?: ReactNode;
+    className?: string;
+}

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

@@ -0,0 +1,2 @@
+export * from './breadcrumbs';
+export type * from './breadcrumbs.types';

package/dist/components/button/button.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { ButtonProps } from './button.types';
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/button/button.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { Button } from './button';
+declare const meta: Meta<typeof Button>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;
+export declare const Secondary: Story;
+export declare const Outline: Story;
+export declare const Loading: Story;

package/dist/components/button/button.styles.d.ts

@@ -0,0 +1,4 @@
+export declare const buttonStyles: (props?: ({
+    variant?: "primary" | "secondary" | "outline" | "ghost" | "danger" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/components/button/button.types.d.ts

@@ -0,0 +1,11 @@
+import { ButtonHTMLAttributes, ReactNode } from 'react';
+export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger';
+export type ButtonSize = 'sm' | 'md' | 'lg';
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    isLoading?: boolean;
+    leftIcon?: ReactNode;
+    rightIcon?: ReactNode;
+    children: ReactNode;
+}

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

@@ -0,0 +1,3 @@
+export * from './button';
+export type { ButtonProps, ButtonVariant, ButtonSize } from './button.types';
+export * from './button.styles';

package/dist/components/calendar-date-picker/calendar-date-picker.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { CalendarDatePickerProps } from './calendar-date-picker.types';
+export declare const CalendarDatePicker: React.FC<CalendarDatePickerProps>;

package/dist/components/calendar-date-picker/calendar-date-picker.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { CalendarDatePicker } from './calendar-date-picker';
+declare const meta: Meta<typeof CalendarDatePicker>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithValue: Story;

package/dist/components/calendar-date-picker/calendar-date-picker.types.d.ts

@@ -0,0 +1,6 @@
+export interface CalendarDatePickerProps {
+    value?: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    className?: string;
+}

package/dist/components/calendar-date-picker/index.d.ts

@@ -0,0 +1,2 @@
+export * from './calendar-date-picker';
+export type * from './calendar-date-picker.types';

package/dist/components/card/card.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+    hoverable?: boolean;
+}
+export declare const Card: ({ className, hoverable, children, ...props }: CardProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CardHeader: ({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
+export declare const CardTitle: ({ className, children, ...props }: React.HTMLAttributes<HTMLHeadingElement>) => import("react/jsx-runtime").JSX.Element;
+export declare const CardContent: ({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;

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

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

package/dist/components/confirmation-modal/confirmation-modal.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { ConfirmationModalProps } from './confirmation-modal.types';
+export declare const ConfirmationModal: React.FC<ConfirmationModalProps>;

package/dist/components/confirmation-modal/confirmation-modal.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { ConfirmationModal } from './confirmation-modal';
+declare const meta: Meta<typeof ConfirmationModal>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Danger: Story;
+export declare const Warning: Story;

package/dist/components/confirmation-modal/confirmation-modal.types.d.ts

@@ -0,0 +1,11 @@
+export interface ConfirmationModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onConfirm: () => void;
+    title?: string;
+    message?: string;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    type?: 'danger' | 'warning' | 'primary';
+    className?: string;
+}

package/dist/components/confirmation-modal/index.d.ts

@@ -0,0 +1,2 @@
+export * from './confirmation-modal';
+export type * from './confirmation-modal.types';

package/dist/components/date-range-picker/date-range-picker.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { DateRangePickerProps } from './date-range-picker.types';
+export declare const DateRangePicker: React.FC<DateRangePickerProps>;

package/dist/components/date-range-picker/date-range-picker.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { DateRangePicker } from './date-range-picker';
+declare const meta: Meta<typeof DateRangePicker>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Preselected: Story;

package/dist/components/date-range-picker/date-range-picker.types.d.ts

@@ -0,0 +1,10 @@
+export interface DateRange {
+    startDate: string | null;
+    endDate: string | null;
+}
+export interface DateRangePickerProps {
+    value: DateRange;
+    onChange: (value: DateRange) => void;
+    placeholder?: string;
+    className?: string;
+}

package/dist/components/date-range-picker/index.d.ts

@@ -0,0 +1,2 @@
+export * from './date-range-picker';
+export type * from './date-range-picker.types';

package/dist/components/drawer/drawer.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { DrawerProps } from './drawer.types';
+export declare const Drawer: React.FC<DrawerProps>;

package/dist/components/drawer/drawer.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { Drawer } from './drawer';
+declare const meta: Meta<typeof Drawer>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithFooter: Story;

package/dist/components/drawer/drawer.types.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+export interface DrawerProps {
+    isOpen: boolean;
+    onClose: () => void;
+    title?: string;
+    subtitle?: string;
+    children: ReactNode;
+    footer?: ReactNode;
+    width?: string;
+    className?: string;
+}

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

@@ -0,0 +1,2 @@
+export * from './drawer';
+export type * from './drawer.types';

package/dist/components/dropdown/dropdown.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { DropdownProps } from './dropdown.types';
+export declare const Dropdown: React.FC<DropdownProps>;

package/dist/components/dropdown/dropdown.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { Dropdown } from './dropdown';
+declare const meta: Meta<typeof Dropdown>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Searchable: Story;
+export declare const WithIcon: Story;
+export declare const Disabled: Story;

package/dist/components/dropdown/dropdown.types.d.ts

@@ -0,0 +1,22 @@
+import { ReactNode, ComponentType } from 'react';
+export interface DropdownOption {
+    id: string;
+    name: string;
+    icon?: ReactNode;
+    details?: string;
+}
+export interface DropdownProps {
+    options?: DropdownOption[];
+    value?: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    label?: string;
+    icon?: ComponentType<{
+        size?: number;
+        className?: string;
+    }>;
+    className?: string;
+    footer?: ReactNode;
+    searchable?: boolean;
+    disabled?: boolean;
+}

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

@@ -0,0 +1,2 @@
+export * from './dropdown';
+export type * from './dropdown.types';

package/dist/components/file-dropzone/file-dropzone.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { FileDropzoneProps } from './file-dropzone.types';
+export declare const FileDropzone: React.FC<FileDropzoneProps>;

package/dist/components/file-dropzone/file-dropzone.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { FileDropzone } from './file-dropzone';
+declare const meta: Meta<typeof FileDropzone>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const ImagesOnly: Story;
+export declare const SingleFile: Story;

package/dist/components/file-dropzone/file-dropzone.types.d.ts

@@ -0,0 +1,7 @@
+export interface FileDropzoneProps {
+    onFilesSelected?: (files: File[]) => void;
+    accept?: string;
+    multiple?: boolean;
+    label?: string;
+    className?: string;
+}

package/dist/components/file-dropzone/index.d.ts

@@ -0,0 +1,2 @@
+export * from './file-dropzone';
+export type * from './file-dropzone.types';

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

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

package/dist/components/input/input.d.ts

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    label?: string;
+    error?: string;
+}
+export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/input/input.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { Input } from './input';
+declare const meta: Meta<typeof Input>;
+export default meta;
+type Story = StoryObj<typeof Input>;
+export declare const Default: Story;
+export declare const WithLabel: Story;
+export declare const WithError: Story;
+export declare const Disabled: Story;

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

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

package/dist/components/modal/modal.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+export interface ModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    title?: string;
+    children: React.ReactNode;
+    className?: string;
+}
+export declare const Modal: ({ isOpen, onClose, title, children, className }: ModalProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/multi-select/index.d.ts

@@ -0,0 +1,2 @@
+export * from './multi-select';
+export type * from './multi-select.types';

package/dist/components/multi-select/multi-select.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { MultiSelectProps } from './multi-select.types';
+export declare const MultiSelect: React.FC<MultiSelectProps>;

package/dist/components/multi-select/multi-select.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { MultiSelect } from './multi-select';
+declare const meta: Meta<typeof MultiSelect>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const PreSelected: Story;

package/dist/components/multi-select/multi-select.types.d.ts

@@ -0,0 +1,12 @@
+export interface MultiSelectOption {
+    id: string | number;
+    name: string;
+}
+export interface MultiSelectProps {
+    options: MultiSelectOption[];
+    value?: (string | number)[];
+    onChange: (value: (string | number)[]) => void;
+    label?: string;
+    placeholder?: string;
+    className?: string;
+}

package/dist/components/progress-bar/index.d.ts

@@ -0,0 +1,2 @@
+export * from './progress-bar';
+export type * from './progress-bar.types';

package/dist/components/progress-bar/progress-bar.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { ProgressBarProps } from './progress-bar.types';
+export declare const ProgressBar: React.FC<ProgressBarProps>;

package/dist/components/progress-bar/progress-bar.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { ProgressBar } from './progress-bar';
+declare const meta: Meta<typeof ProgressBar>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const NoLabel: Story;
+export declare const CustomColor: Story;
+export declare const Multiple: Story;

package/dist/components/progress-bar/progress-bar.types.d.ts

@@ -0,0 +1,9 @@
+export interface ProgressBarProps {
+    progress?: number;
+    label?: string;
+    showPercentage?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    color?: string;
+    animated?: boolean;
+    className?: string;
+}

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

@@ -0,0 +1,2 @@
+export * from './rating';
+export type * from './rating.types';

package/dist/components/rating/rating.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { RatingProps } from './rating.types';
+export declare const Rating: React.FC<RatingProps>;