@zango-core/components 0.2.0-rc.3 → 0.2.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Healthlane Technologies Pvt. Ltd. ("Zango")
+
+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/NOTICE

@@ -0,0 +1,29 @@
+@zango-core/components
+Copyright 2024 Healthlane Technologies Pvt. Ltd.
+
+This product is licensed under the MIT License. A copy of the License is
+provided in the LICENSE file at the root of this project.
+
+This library is part of the Zango framework
+(https://github.com/Healthlane-Technologies/Zango), whose licensing terms
+provide that all client-side JavaScript is licensed under the MIT License.
+
+--------------------------------------------------------------------------------
+Third-party components
+--------------------------------------------------------------------------------
+
+This product depends on the following third-party open-source software. Each is
+distributed under its own license; the copyright and license notices below are
+reproduced in accordance with those licenses.
+
+- @radix-ui/react-dialog (MIT License)
+  Copyright (c) WorkOS
+  https://github.com/radix-ui/primitives
+
+- lucide-react (ISC License)
+  Copyright (c) Lucide Contributors
+  https://github.com/lucide-icons/lucide
+
+- sonner (MIT License)
+  Copyright (c) Emil Kowalski
+  https://github.com/emilkowalski/sonner

package/README.md

@@ -1,426 +1,106 @@
 # 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.
+[![npm version](https://img.shields.io/npm/v/@zango-core/components.svg)](https://www.npmjs.com/package/@zango-core/components)
+[![license](https://img.shields.io/npm/l/@zango-core/components.svg)](./LICENSE)
+[![types](https://img.shields.io/npm/types/@zango-core/components.svg)](https://www.npmjs.com/package/@zango-core/components)
+[![CI](https://github.com/Healthlane-Technologies/zango-react-components/actions/workflows/ci.yml/badge.svg?branch=main)](https://github.com/Healthlane-Technologies/zango-react-components/actions/workflows/ci.yml)
 
-## 🚀 Features
+A React component library built with Tailwind CSS. 30+ accessible components,
+fully typed, themeable through CSS variables.
 
-- **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
+## Installation
 
 ```bash
-npm install @zango/components
+npm install @zango-core/components
 ```
 
-
-## 🎨 Setup
-
-### Peer Dependencies
-
-Make sure you have the following peer dependencies installed:
+Peer dependencies — React 16.8 or newer, if your project does not already
+have it:
 
 ```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';
-// CSS is automatically included - no separate import needed!
-
-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 */
-:root {
-  --color-Brand-500: #3b82f6;
-  --color-Brand-600: #2563eb;
-  --color-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>
+npm install react react-dom
 ```
 
-**Props:**
-- `open`: `boolean` (required)
-- `onClose`: `() => void` (required)
-- `size`: `'sm' | 'md' | 'lg' | 'xl' | 'full'`
-- `position`: `'right' | 'left' | 'top' | 'bottom'`
-- `title`: `string`
-- `showBackButton`: `boolean`
-- `onBack`: `() => void`
+Everything else the library needs (`@radix-ui/react-dialog`, `lucide-react`,
+`sonner`, `tailwind-merge`) ships as a regular dependency and installs
+automatically.
 
-[Full Drawer documentation →](./docs/Drawer.md)
-
-### Toast
-
-Beautiful toast notifications powered by Sonner with customizable variants, positions, and actions.
+## Usage
 
 ```tsx
-import { Toaster, toast, useToast } from '@zango/components';
+import { Button, Badge } from '@zango-core/components';
+// CSS is bundled and injected automatically — no separate import needed.
 
-// Add Toaster to your app root
 function App() {
   return (
     <>
-      <YourApp />
-      <Toaster position="top-right" />
+      <Button variant="primary">Click me</Button>
+      <Badge variant="success">Active</Badge>
     </>
   );
 }
-
-// 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
+## Theming
 
-## 🎨 Customizing Colors
-
-The component library uses CSS variables that can be overridden in your application:
+Override CSS variables to re-theme the library. Unset variables fall back to
+their defaults, so declare only what you want to change.
 
 ```css
 :root {
-  /* Brand colors */
-  --color-Brand-500: #your-primary-color;
-  --color-Brand-600: #your-primary-hover;
-  --color-Brand-700: #your-primary-active;
-  
-  /* Gray colors */
-  --color-Gray-100: #your-gray-light;
-  --color-Gray-500: #your-gray-medium;
-  --color-Gray-900: #your-gray-dark;
-  
-  /* Status colors */
-  --color-success-500: #your-success-color;
-  --color-error-500: #your-error-color;
-  --color-warning-500: #your-warning-color;
-  
-  /* Base colors */
-  --color-Base-white: #ffffff;
-  --color-Base-black: #000000;
+  --color-brand-500: #3b82f6;
+  --zango-border-radius-md: 8px;
+  --zango-control-height-md: 36px;
+  --zango-border-color-default: #d4d6d9;
 }
 ```
 
-## 🛠️ Development
-
-### Prerequisites
+## Documentation
 
-- Node.js (v16 or later)
-- npm or yarn
+- [Components](./docs/COMPONENTS.md) — usage examples for every component
+- [CSS variables](./docs/CSS_VARIABLES.md) — full theming reference
+- [Development setup](./docs/DEV_SETUP.md)
 
-### Getting Started
+Run Storybook for interactive demos and the complete prop reference:
 
 ```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
+## Development
 
-```
-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
+Requires Node.js 22+ and npm.
 
 ```bash
-npm run build
+git clone https://github.com/Healthlane-Technologies/zango-react-components.git
+cd zango-react-components
+npm install
+npm run dev
 ```
 
-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
+| Script | Description |
+| --- | --- |
+| `npm run dev` | Start the development server |
+| `npm run storybook` | Start Storybook |
+| `npm run build` | Build the library |
+| `npm run test` | Run the test suite |
+| `npm run type-check` | Type-check without emitting |
+| `npm run check` | Lint, format, and organize imports |
 
-## 📄 License
+## Browser support
 
-MIT License - see the [LICENSE](LICENSE) file for details.
+All modern evergreen browsers (last 2 versions of Chrome, Firefox, Safari, and
+Edge). The library ships ES2020 output. Internet Explorer is not supported.
 
-## 🆘 Support
+## Contributing
 
-If you encounter any issues or have questions:
+Contributions are welcome. See [CONTRIBUTING.md](./CONTRIBUTING.md) to get
+started, and please follow our [Code of Conduct](./CODE_OF_CONDUCT.md).
 
-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
+## License
 
----
+MIT — see [LICENSE](./LICENSE).
 
-Made with ❤️ using React, TypeScript, and Tailwind CSS
+This library is part of the [Zango framework](https://github.com/Healthlane-Technologies/Zango),
+whose licensing terms provide that all client-side JavaScript is licensed under
+the MIT License.

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

@@ -24,6 +24,8 @@ interface AccordionProps {
 }
 export declare const Accordion: React.FC<AccordionProps>;
 interface AccordionItemProps {
+    /** Unique key for this item. Required so items don't collide in the list. */
+    key: string;
     title: React.ReactNode;
     children?: React.ReactNode;
     icon?: React.ReactNode;
@@ -32,5 +34,5 @@ interface AccordionItemProps {
     actions?: React.ReactNode;
     hasFilter?: boolean;
 }
-export declare const AccordionItem: ({ title, children, icon, subtitle, badge, actions, hasFilter }: AccordionItemProps) => AccordionItemData;
+export declare const AccordionItem: ({ key, title, children, icon, subtitle, badge, actions, hasFilter, }: AccordionItemProps) => AccordionItemData;
 export {};

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

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

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

@@ -1,15 +1,29 @@
 import { default as React } from 'react';
 
 export interface AlertProps {
+    /** Severity type that controls color and icon */
     type?: 'success' | 'info' | 'warning' | 'error';
+    /** Primary message content displayed in the alert */
     message: React.ReactNode;
+    /** Optional secondary description rendered below the message */
     description?: React.ReactNode;
+    /** Whether to render the built-in type icon */
     showIcon?: boolean;
+    /** Whether to show a close button */
     closable?: boolean;
+    /** Custom content for the close trigger; defaults to × */
     closeText?: React.ReactNode;
+    /** Callback fired when the close button is clicked */
     onClose?: () => void;
+    /** Optional action element rendered on the right side */
     action?: React.ReactNode;
+    /** Additional className for the root element */
     className?: string;
+    /** Inline styles for the root element */
     style?: React.CSSProperties;
 }
+/**
+ * Alert displays a contextual feedback message with optional icon, description, action, and close button.
+ * Supports four severity types — success, info, warning, and error — each with distinct color styling.
+ */
 export declare const Alert: React.FC<AlertProps>;

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

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

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

@@ -1,14 +1,27 @@
 import { default as React } from 'react';
 
 export interface AvatarProps {
+    /** Preset size or explicit pixel dimension */
     size?: 'small' | 'default' | 'large' | number;
+    /** Icon node rendered when no image src is provided */
     icon?: React.ReactNode;
+    /** URL of the avatar image */
     src?: string;
+    /** Alt text for the avatar image */
     alt?: string;
+    /** Fallback content (e.g. initials) shown when no src or icon is set */
     children?: React.ReactNode;
+    /** Whether the avatar is circular or square */
     shape?: 'circle' | 'square';
+    /** Additional className for the root element */
     className?: string;
+    /** Inline styles for the root element */
     style?: React.CSSProperties;
+    /** Click handler; when provided the avatar receives button semantics */
     onClick?: () => void;
 }
+/**
+ * Avatar renders a user representation using an image, icon, or initials fallback.
+ * Supports circle and square shapes, preset or numeric sizes, and optional click interaction with button semantics.
+ */
 export declare const Avatar: React.FC<AvatarProps>;

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

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

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

@@ -1,9 +1,16 @@
 import { default as React } from 'react';
 
-export type BadgeVariant = "success" | "low" | "warning" | "medium" | "danger" | "high" | "critical" | "neutral" | "default" | "outline";
+export type BadgeVariant = 'success' | 'low' | 'warning' | 'medium' | 'danger' | 'high' | 'critical' | 'neutral' | 'default' | 'outline';
 export interface BadgeProps {
+    /** Label content rendered inside the badge */
     children: React.ReactNode;
+    /** Visual style variant controlling color and border */
     variant?: BadgeVariant;
+    /** Additional className for the badge element */
     className?: string;
 }
+/**
+ * Badge renders a small inline label used to convey status, priority, or category.
+ * Color and border are controlled by the variant prop.
+ */
 export declare const Badge: React.FC<BadgeProps>;

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

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

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

@@ -1,9 +1,32 @@
 import { default as React } from 'react';
+import { GradientDirection, GradientType } from '../../utils/gradient';
 
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    variant?: 'primary' | 'secondary' | 'ghost' | 'outline' | 'destructive' | 'danger' | 'success' | 'link';
+    /** Visual style variant */
+    variant?: 'primary' | 'secondary' | 'ghost' | 'outline' | 'destructive' | 'danger' | 'success' | 'gradient' | 'link';
+    /**
+     * Preset gradient stops; only applies when variant is "gradient".
+     * 'soft' = brand-50→white, 'solid' = brand-500→brand-700 (default).
+     */
+    gradientType?: GradientType;
+    /** Custom gradient start color (any CSS color). Requires gradientTo; overrides gradientType. */
+    gradientFrom?: string;
+    /** Custom gradient end color (any CSS color). Requires gradientFrom; overrides gradientType. */
+    gradientTo?: string;
+    /**
+     * Gradient direction; only applies when variant is "gradient".
+     * Maps to Tailwind `bg-gradient-to-*` utilities.
+     */
+    gradientDirection?: GradientDirection;
+    /** Button size; sm/md/lg are aliases for small/medium/large */
     size?: 'small' | 'medium' | 'large' | 'sm' | 'md' | 'lg';
+    /** Whether the button stretches to fill its container width */
     fullWidth?: boolean;
+    /** Button label or child elements */
     children: React.ReactNode;
 }
+/**
+ * Button renders a clickable action element with variant, size, and full-width options.
+ * Forwards refs and extends native button attributes.
+ */
 export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;