@zango-core/components 0.0.0

package/README.md

@@ -0,0 +1,435 @@
+# Zango Components
+
+A modern React component library built with **Tailwind CSS** and customizable CSS variables that inherit from parent applications. Perfect for building consistent, accessible UI components across your applications.
+
+## 🚀 Features
+
+- **Tailwind CSS Integration**: All components use Tailwind utility classes for consistent styling
+- **Color Inheritance**: CSS variables allow parent applications to override colors
+- **TypeScript Support**: Full type definitions for all components
+- **Responsive Design**: Components adapt to different screen sizes
+- **Accessibility**: Proper ARIA attributes and keyboard navigation
+- **Storybook Documentation**: Interactive component documentation
+
+## 📦 Installation
+
+```bash
+npm install @zango/components
+```
+
+
+## 🎨 Setup
+
+### Import Styles
+
+Import the component library styles in your application:
+
+```tsx
+// In your main entry file (e.g., main.tsx or index.tsx)
+import '@zango/components/style.css';
+```
+
+### Peer Dependencies
+
+Make sure you have the following peer dependencies installed:
+
+```bash
+npm install react react-dom @radix-ui/react-dialog lucide-react
+```
+
+### Optional: Tailwind CSS Integration
+
+If your project uses Tailwind CSS, you can optionally add the library to your content scanning for better integration:
+
+```js
+// tailwind.config.js
+module.exports = {
+  content: [
+    "./src/**/*.{js,jsx,ts,tsx}",
+    "./node_modules/@zango/components/dist/**/*.{js,jsx,ts,tsx}", // Optional: for better integration
+  ],
+  theme: {
+    extend: {
+      // You can extend or override colors here
+    },
+  },
+  plugins: [],
+}
+```
+
+**Note**: This step is optional. The library works perfectly without any Tailwind configuration in your project.
+
+## 🎯 Usage
+
+### Basic Usage
+
+```tsx
+import { Button, Badge, Accordion } from '@zango/components';
+// No need to import CSS - it's automatically included!
+
+function App() {
+  return (
+    <div className="p-4">
+      <Button variant="primary" size="medium">
+        Click me
+      </Button>
+      
+      <Badge variant="success">Active</Badge>
+      
+      <Accordion
+        items={[
+          {
+            key: "item1",
+            title: "Accordion Item",
+            content: "This is the content"
+          }
+        ]}
+      />
+    </div>
+  );
+}
+```
+
+### With Custom Colors
+
+```css
+/* Override colors in your CSS - no imports needed! */
+:root {
+  --colors-Brand-500: #3b82f6;
+  --colors-Brand-600: #2563eb;
+  --colors-Brand-700: #1d4ed8;
+}
+```
+
+```tsx
+// Components will automatically use your custom colors
+<Button variant="primary">Custom Colored Button</Button>
+```
+
+## 🧩 Available Components
+
+### Button
+
+A versatile button component with multiple variants and sizes.
+
+```tsx
+<Button 
+  variant="primary" 
+  size="medium" 
+  fullWidth={false}
+  disabled={false}
+>
+  Button Text
+</Button>
+```
+
+**Props:**
+- `variant`: `'primary' | 'secondary' | 'ghost' | 'outline' | 'destructive' | 'danger' | 'success'`
+- `size`: `'small' | 'medium' | 'large' | 'sm' | 'md' | 'lg'`
+- `fullWidth`: `boolean`
+- All standard HTML button attributes
+
+### Badge
+
+Status indicators with multiple variants.
+
+```tsx
+<Badge variant="success">Success</Badge>
+<Badge variant="warning">Warning</Badge>
+<Badge variant="danger">Error</Badge>
+```
+
+**Props:**
+- `variant`: `'success' | 'low' | 'warning' | 'medium' | 'danger' | 'high' | 'critical' | 'neutral' | 'default' | 'outline'`
+
+### Accordion
+
+Expandable content sections with smooth animations.
+
+```tsx
+<Accordion
+  items={[
+    {
+      key: "item1",
+      title: "First Item",
+      content: <p>Content goes here</p>,
+      icon: <IconComponent />,
+      subtitle: "Optional subtitle"
+    }
+  ]}
+  multiple={true}
+  collapsible={true}
+/>
+```
+
+### Context Menu
+
+Dropdown menus with customizable items.
+
+```tsx
+<ContextMenu
+  trigger={<Button>Open Menu</Button>}
+  align="right"
+>
+  <ContextMenuItem onClick={() => console.log('clicked')}>
+    Menu Item
+  </ContextMenuItem>
+  <ContextMenuSeparator />
+  <ContextMenuItem danger>Delete</ContextMenuItem>
+</ContextMenu>
+```
+
+### Info Section
+
+Flexible information display with multiple layouts.
+
+```tsx
+<InfoSection
+  title="Section Title"
+  subtitle="Subtitle"
+  description="Description text"
+  variant="card"
+  size="medium"
+  icon={<IconComponent />}
+  badge={<Badge variant="success">New</Badge>}
+  actions={<Button size="small">Edit</Button>}
+>
+  <InfoGrid columns={2}>
+    <InfoItem label="Label" value="Value" />
+    <InfoItem label="Status" value="Active" />
+  </InfoGrid>
+</InfoSection>
+```
+
+### Timeline
+
+Event timeline with date grouping.
+
+```tsx
+<Timeline
+  sections={[
+    {
+      date: "Today",
+      events: [
+        {
+          id: "1",
+          type: "status_change",
+          title: "Status Updated",
+          description: "Changed to active",
+          timestamp: "2:30 PM",
+          date: "Dec 15",
+          icon: "activity"
+        }
+      ]
+    }
+  ]}
+/>
+```
+
+### Drawer
+
+Sliding panel overlay for displaying additional content.
+
+```tsx
+<Drawer
+  open={open}
+  onClose={() => setOpen(false)}
+  title="Drawer Title"
+  size="md"
+  position="right"
+>
+  <p>Drawer content</p>
+</Drawer>
+```
+
+**Props:**
+- `open`: `boolean` (required)
+- `onClose`: `() => void` (required)
+- `size`: `'sm' | 'md' | 'lg' | 'xl' | 'full'`
+- `position`: `'right' | 'left' | 'top' | 'bottom'`
+- `title`: `string`
+- `showBackButton`: `boolean`
+- `onBack`: `() => void`
+
+[Full Drawer documentation →](./docs/Drawer.md)
+
+### Toast
+
+Beautiful toast notifications powered by Sonner with customizable variants, positions, and actions.
+
+```tsx
+import { Toaster, toast, useToast } from '@zango/components';
+
+// Add Toaster to your app root
+function App() {
+  return (
+    <>
+      <YourApp />
+      <Toaster position="top-right" />
+    </>
+  );
+}
+
+// Use toast in your components
+function MyComponent() {
+  const { success, error, warning, info } = useToast();
+
+  return (
+    <Button onClick={() => success('Operation successful!')}>
+      Show Toast
+    </Button>
+  );
+}
+```
+
+**Toast Options:**
+```tsx
+toast.success({
+  title: 'Success toast message',
+  description: 'Optional description text',
+  duration: 5000,
+  icon: <CustomIcon />,
+  primaryAction: {
+    label: 'Undo',
+    onClick: () => console.log('Undo clicked')
+  },
+  secondaryAction: {
+    label: 'Dismiss',
+    onClick: () => console.log('Dismissed')
+  }
+});
+```
+
+**Props:**
+- `position`: `'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'`
+- `duration`: `number` (milliseconds)
+- `variant`: `'success' | 'error' | 'warning' | 'info' | 'default'`
+- Custom icons and actions supported
+
+## 🎨 Customizing Colors
+
+The component library uses CSS variables that can be overridden in your application:
+
+```css
+:root {
+  /* Brand colors */
+  --colors-Brand-500: #your-primary-color;
+  --colors-Brand-600: #your-primary-hover;
+  --colors-Brand-700: #your-primary-active;
+  
+  /* Gray colors */
+  --colors-Gray-100: #your-gray-light;
+  --colors-Gray-500: #your-gray-medium;
+  --colors-Gray-900: #your-gray-dark;
+  
+  /* Status colors */
+  --colors-success-500: #your-success-color;
+  --colors-error-500: #your-error-color;
+  --colors-warning-500: #your-warning-color;
+  
+  /* Base colors */
+  --colors-Base-white: #ffffff;
+  --colors-Base-black: #000000;
+}
+```
+
+## 🛠️ Development
+
+### Prerequisites
+
+- Node.js (v16 or later)
+- npm or yarn
+
+### Getting Started
+
+```bash
+# Clone the repository
+git clone https://github.com/yourusername/zango-react-components.git
+cd zango-react-components
+
+# Install dependencies
+npm install
+
+# Start development server
+npm run dev
+
+# Run Storybook for component development
+npm run storybook
+
+# Build the library
+npm run build
+
+# Type check
+npm run type-check
+
+# Lint code
+npm run lint
+```
+
+### Project Structure
+
+```
+src/
+├── components/          # Component source files
+│   ├── Button/
+│   ├── Badge/
+│   ├── Accordion/
+│   ├── ContextMenu/
+│   ├── InfoSection/
+│   ├── Timeline/
+│   └── Drawer/
+├── styles/
+│   ├── index.css       # Main Tailwind CSS file
+│   └── variables.css   # CSS variables
+├── utils/
+│   └── cn.ts          # Class name utility
+└── index.ts           # Main export file
+```
+
+### Available Scripts
+
+- `npm run dev` - Start development server
+- `npm run build` - Build the library for production
+- `npm run storybook` - Start Storybook development server
+- `npm run build-storybook` - Build Storybook for production
+- `npm run type-check` - Run TypeScript type checking
+- `npm run lint` - Run ESLint
+
+### Building for Production
+
+```bash
+npm run build
+```
+
+This creates a `dist` folder with:
+- `zango-components.js` - ES module build (with CSS included)
+- `zango-components.umd.cjs` - UMD build (with CSS included)
+- Type definitions
+
+## 📚 Documentation
+
+Visit our [Storybook documentation](https://your-storybook-url.com) to see all components in action with interactive examples.
+
+## 🤝 Contributing
+
+1. Fork the repository
+2. Create your feature branch (`git checkout -b feature/amazing-feature`)
+3. Commit your changes (`git commit -m 'Add some amazing feature'`)
+4. Push to the branch (`git push origin feature/amazing-feature`)
+5. Open a Pull Request
+
+## 📄 License
+
+MIT License - see the [LICENSE](LICENSE) file for details.
+
+## 🆘 Support
+
+If you encounter any issues or have questions:
+
+1. Check the [Storybook documentation](https://your-storybook-url.com)
+2. Search [existing issues](https://github.com/yourusername/zango-react-components/issues)
+3. Create a [new issue](https://github.com/yourusername/zango-react-components/issues/new) if needed
+
+---
+
+Made with ❤️ using React, TypeScript, and Tailwind CSS

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

@@ -0,0 +1,36 @@
+import { default as React } from 'react';
+
+export interface AccordionItemData {
+    key: string;
+    title: React.ReactNode;
+    content?: React.ReactNode;
+    children?: React.ReactNode;
+    icon?: React.ReactNode;
+    subtitle?: React.ReactNode;
+    badge?: React.ReactNode;
+    actions?: React.ReactNode;
+    hasFilter?: boolean;
+    headerStyle?: React.CSSProperties;
+}
+interface AccordionProps {
+    items: AccordionItemData[];
+    defaultExpanded?: Record<string, boolean>;
+    className?: string;
+    itemClassName?: string;
+    headerClassName?: string;
+    contentClassName?: string;
+    multiple?: boolean;
+    collapsible?: boolean;
+}
+export declare const Accordion: React.FC<AccordionProps>;
+interface AccordionItemProps {
+    title: React.ReactNode;
+    children?: React.ReactNode;
+    icon?: React.ReactNode;
+    subtitle?: React.ReactNode;
+    badge?: React.ReactNode;
+    actions?: React.ReactNode;
+    hasFilter?: boolean;
+}
+export declare const AccordionItem: ({ title, children, icon, subtitle, badge, actions, hasFilter }: AccordionItemProps) => AccordionItemData;
+export {};

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

@@ -0,0 +1,2 @@
+export { Accordion, AccordionItem } from './Accordion';
+export type { AccordionItemData } from './Accordion';

package/dist/components/Alert/Alert.d.ts

@@ -0,0 +1,15 @@
+import { default as React } from 'react';
+
+export interface AlertProps {
+    type?: 'success' | 'info' | 'warning' | 'error';
+    message: React.ReactNode;
+    description?: React.ReactNode;
+    showIcon?: boolean;
+    closable?: boolean;
+    closeText?: React.ReactNode;
+    onClose?: () => void;
+    action?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const Alert: React.FC<AlertProps>;

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

@@ -0,0 +1,2 @@
+export { Alert } from './Alert';
+export type { AlertProps } from './Alert';

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

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+
+export interface AvatarProps {
+    size?: 'small' | 'default' | 'large' | number;
+    icon?: React.ReactNode;
+    src?: string;
+    alt?: string;
+    children?: React.ReactNode;
+    shape?: 'circle' | 'square';
+    className?: string;
+    style?: React.CSSProperties;
+    onClick?: () => void;
+}
+export declare const Avatar: React.FC<AvatarProps>;

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

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

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

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+
+export type BadgeVariant = "success" | "low" | "warning" | "medium" | "danger" | "high" | "critical" | "neutral" | "default" | "outline";
+export interface BadgeProps {
+    children: React.ReactNode;
+    variant?: BadgeVariant;
+    className?: string;
+}
+export declare const Badge: React.FC<BadgeProps>;

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

@@ -0,0 +1,2 @@
+export { Badge } from './Badge';
+export type { BadgeProps, BadgeVariant } from './Badge';

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

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: 'primary' | 'secondary' | 'ghost' | 'outline' | 'destructive' | 'danger' | 'success' | 'link';
+    size?: 'small' | 'medium' | 'large' | 'sm' | 'md' | 'lg';
+    fullWidth?: boolean;
+    children: React.ReactNode;
+}
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;

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

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

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

@@ -0,0 +1,15 @@
+import { default as React } from 'react';
+
+export interface CardProps {
+    children: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+    bordered?: boolean;
+    hoverable?: boolean;
+    size?: 'default' | 'small';
+    title?: React.ReactNode;
+    extra?: React.ReactNode;
+    cover?: React.ReactNode;
+    actions?: React.ReactNode[];
+}
+export declare const Card: React.FC<CardProps>;

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

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

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

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

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

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

package/dist/components/ContextMenu/ContextMenu.d.ts

@@ -0,0 +1,33 @@
+import { default as React } from 'react';
+
+interface ContextMenuProps {
+    trigger: React.ReactNode;
+    children: React.ReactNode;
+    align?: 'left' | 'center' | 'right';
+    className?: string;
+    contentClassName?: string;
+    offset?: number;
+    closeOnClick?: boolean;
+    disabled?: boolean;
+}
+export declare const ContextMenu: React.FC<ContextMenuProps>;
+interface ContextMenuItemProps {
+    children: React.ReactNode;
+    onClick?: (e: React.MouseEvent) => void;
+    disabled?: boolean;
+    className?: string;
+    icon?: React.ReactNode;
+    shortcut?: string;
+    danger?: boolean;
+}
+export declare const ContextMenuItem: React.FC<ContextMenuItemProps>;
+interface ContextMenuSeparatorProps {
+    className?: string;
+}
+export declare const ContextMenuSeparator: React.FC<ContextMenuSeparatorProps>;
+interface ContextMenuLabelProps {
+    children: React.ReactNode;
+    className?: string;
+}
+export declare const ContextMenuLabel: React.FC<ContextMenuLabelProps>;
+export {};

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

@@ -0,0 +1 @@
+export { ContextMenu, ContextMenuItem, ContextMenuSeparator, ContextMenuLabel } from './ContextMenu';

package/dist/components/Dialog/Dialog.d.ts

@@ -0,0 +1,41 @@
+import { default as React, ReactNode } from 'react';
+
+export interface DialogProps {
+    /** Whether the dialog is open */
+    open: boolean;
+    /** Callback when the dialog open state changes */
+    onOpenChange: (open: boolean) => void;
+    /** Dialog title */
+    title?: string;
+    /** Whether to show the close button */
+    showCloseButton?: boolean;
+    /** Custom className for the dialog container */
+    className?: string;
+    /** Custom className for the overlay */
+    overlayClassName?: string;
+    /** Custom className for the content container */
+    contentClassName?: string;
+    /** Dialog content */
+    children: ReactNode;
+    /** Custom header content (overrides title) */
+    header?: ReactNode;
+    /** Custom footer content */
+    footer?: ReactNode;
+    /** Whether clicking the overlay closes the dialog */
+    closeOnOverlayClick?: boolean;
+    /** Whether pressing Escape key closes the dialog */
+    closeOnEscapeKey?: boolean;
+}
+export declare const Dialog: React.FC<DialogProps>;
+export declare const DialogHeader: React.FC<{
+    children: ReactNode;
+    className?: string;
+}>;
+export declare const DialogBody: React.FC<{
+    children: ReactNode;
+    className?: string;
+}>;
+export declare const DialogFooter: React.FC<{
+    children: ReactNode;
+    className?: string;
+}>;

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

@@ -0,0 +1,2 @@
+export { Dialog, DialogHeader, DialogBody, DialogFooter } from './Dialog';
+export type { DialogProps } from './Dialog';

package/dist/components/Divider/Divider.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+
+export interface DividerProps {
+    children?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+    type?: 'horizontal' | 'vertical';
+    orientation?: 'left' | 'right' | 'center';
+    orientationMargin?: string | number;
+    dashed?: boolean;
+    plain?: boolean;
+}
+export declare const Divider: React.FC<DividerProps>;

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

@@ -0,0 +1,2 @@
+export { Divider } from './Divider';
+export type { DividerProps } from './Divider';