@codeswayam/ui 1.0.0

package/README.md

@@ -0,0 +1,597 @@
+# @codeswayam/ui - UI Component Library
+
+## Overview
+
+**@codeswayam/ui** is a comprehensive UI component library built on **Radix UI** and **Tailwind CSS**. It provides reusable, accessible, and well-documented React components used across all CodeSwayam applications. The library ensures consistent design and user experience across the platform.
+
+---
+
+## 🎯 Features
+
+- **Accessible Components**: Built with Radix UI for accessibility
+- **Tailwind CSS**: Utility-first styling
+- **Type-Safe**: Full TypeScript support
+- **Themeable**: Customizable colors and styles
+- **Responsive**: Mobile-first design
+- **Dark Mode**: Built-in dark mode support
+- **60+ Components**: Comprehensive component library
+- **Well-Documented**: Storybook documentation
+- **Composable**: Easy to extend and customize
+- **Zero Dependencies**: Uses peer dependencies only
+
+---
+
+## 📦 Installation
+
+```bash
+npm install @codeswayam/ui
+```
+
+---
+
+## 🔧 Setup
+
+### 1. Install Peer Dependencies
+
+```bash
+npm install react react-dom next tailwindcss
+```
+
+### 2. Configure Tailwind
+
+Add to `tailwind.config.ts`:
+
+```typescript
+import type { Config } from 'tailwindcss'
+
+const config: Config = {
+  content: [
+    './node_modules/@codeswayam/ui/**/*.{js,ts,jsx,tsx}',
+    './app/**/*.{js,ts,jsx,tsx}',
+    './components/**/*.{js,ts,jsx,tsx}'
+  ],
+  theme: {
+    extend: {}
+  },
+  plugins: []
+}
+
+export default config
+```
+
+### 3. Import Styles
+
+```typescript
+// app/globals.css or your global CSS file
+@import '@codeswayam/ui/globals.css'
+```
+
+---
+
+## 🚀 Basic Usage
+
+### Import Components
+
+```tsx
+import {
+  Button,
+  Card,
+  Input,
+  Label,
+  Select,
+  Dialog,
+  Tabs,
+  Toast
+} from '@codeswayam/ui'
+```
+
+### Using Components
+
+```tsx
+import { Button } from '@codeswayam/ui'
+
+export function App() {
+  return <Button variant="primary">Click me</Button>
+}
+```
+
+---
+
+## 📚 Component Library
+
+### Layout Components
+
+#### Container
+Responsive container with max width
+
+```tsx
+import { Container } from '@codeswayam/ui'
+
+<Container>
+  <h1>Your content</h1>
+</Container>
+```
+
+#### Grid
+Responsive grid layout
+
+```tsx
+import { Grid, GridItem } from '@codeswayam/ui'
+
+<Grid columns={3} gap={4}>
+  <GridItem>Item 1</GridItem>
+  <GridItem>Item 2</GridItem>
+  <GridItem>Item 3</GridItem>
+</Grid>
+```
+
+### Form Components
+
+#### Button
+Versatile button component
+
+```tsx
+import { Button } from '@codeswayam/ui'
+
+// Variants
+<Button variant="primary">Primary</Button>
+<Button variant="secondary">Secondary</Button>
+<Button variant="outline">Outline</Button>
+<Button variant="ghost">Ghost</Button>
+
+// Sizes
+<Button size="sm">Small</Button>
+<Button size="md">Medium</Button>
+<Button size="lg">Large</Button>
+
+// States
+<Button disabled>Disabled</Button>
+<Button isLoading>Loading...</Button>
+```
+
+#### Input
+Text input field
+
+```tsx
+import { Input } from '@codeswayam/ui'
+
+<Input
+  type=\"email\"
+  placeholder=\"Enter email\"
+  onChange={(e) => setValue(e.target.value)}
+/>
+```
+
+#### Label
+Form label component
+
+```tsx
+import { Label } from '@codeswayam/ui'
+
+<Label htmlFor=\"email\">Email Address</Label>
+<Input id=\"email\" />
+```
+
+#### Select
+Dropdown select component
+
+```tsx
+import { Select, SelectContent, SelectItem, SelectTrigger } from '@codeswayam/ui'
+
+<Select defaultValue=\"option1\">
+  <SelectTrigger>
+    <span>Choose option</span>
+  </SelectTrigger>
+  <SelectContent>
+    <SelectItem value=\"option1\">Option 1</SelectItem>
+    <SelectItem value=\"option2\">Option 2</SelectItem>
+    <SelectItem value=\"option3\">Option 3</SelectItem>
+  </SelectContent>
+</Select>
+```
+
+#### Textarea
+Multi-line text input
+
+```tsx
+import { Textarea } from '@codeswayam/ui'
+
+<Textarea
+  placeholder=\"Enter message\"
+  rows={5}
+  onChange={(e) => setValue(e.target.value)}
+/>
+```
+
+#### Checkbox
+Checkbox input
+
+```tsx
+import { Checkbox } from '@codeswayam/ui'
+
+<Checkbox
+  id=\"terms\"
+  onCheckedChange={setTermsAccepted}
+/>
+<Label htmlFor=\"terms\">I agree to terms</Label>
+```
+
+#### Radio Group
+Radio button group
+
+```tsx
+import { Radio, RadioGroup } from '@codeswayam/ui'
+
+<RadioGroup defaultValue=\"option1\">
+  <div className=\"flex items-center\">
+    <Radio value=\"option1\" id=\"option1\" />
+    <Label htmlFor=\"option1\">Option 1</Label>
+  </div>
+  <div className=\"flex items-center\">
+    <Radio value=\"option2\" id=\"option2\" />
+    <Label htmlFor=\"option2\">Option 2</Label>
+  </div>
+</RadioGroup>
+```
+
+#### Switch
+Toggle switch
+
+```tsx
+import { Switch } from '@codeswayam/ui'
+
+<Switch
+  checked={enabled}
+  onCheckedChange={setEnabled}
+/>
+```
+
+### Data Display Components
+
+#### Card
+Container component for content
+
+```tsx
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@codeswayam/ui'
+
+<Card>
+  <CardHeader>
+    <CardTitle>Card Title</CardTitle>
+    <CardDescription>Description</CardDescription>
+  </CardHeader>
+  <CardContent>
+    Card content here
+  </CardContent>
+</Card>
+```
+
+#### Badge
+Status/tag badge
+
+```tsx
+import { Badge } from '@codeswayam/ui'
+
+<Badge variant=\"default\">New</Badge>
+<Badge variant=\"success\">Active</Badge>
+<Badge variant=\"warning\">Pending</Badge>
+<Badge variant=\"destructive\">Error</Badge>
+```
+
+#### Table
+Data table component
+
+```tsx
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow
+} from '@codeswayam/ui'
+
+<Table>
+  <TableHeader>
+    <TableRow>
+      <TableHead>Name</TableHead>
+      <TableHead>Email</TableHead>
+    </TableRow>
+  </TableHeader>
+  <TableBody>
+    <TableRow>
+      <TableCell>John</TableCell>
+      <TableCell>john@example.com</TableCell>
+    </TableRow>
+  </TableBody>
+</Table>
+```
+
+### Overlay Components
+
+#### Dialog
+Modal dialog
+
+```tsx
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger
+} from '@codeswayam/ui'
+
+<Dialog>
+  <DialogTrigger>Open Dialog</DialogTrigger>
+  <DialogContent>
+    <DialogHeader>
+      <DialogTitle>Dialog Title</DialogTitle>
+      <DialogDescription>Description</DialogDescription>
+    </DialogHeader>
+    Dialog content
+  </DialogContent>
+</Dialog>
+```
+
+#### Alert Dialog
+Confirmation dialog
+
+```tsx
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger
+} from '@codeswayam/ui'
+
+<AlertDialog>
+  <AlertDialogTrigger>Delete</AlertDialogTrigger>
+  <AlertDialogContent>
+    <AlertDialogHeader>
+      <AlertDialogTitle>Are you sure?</AlertDialogTitle>
+      <AlertDialogDescription>
+        This action cannot be undone
+      </AlertDialogDescription>
+    </AlertDialogHeader>
+    <AlertDialogCancel>Cancel</AlertDialogCancel>
+    <AlertDialogAction>Delete</AlertDialogAction>
+  </AlertDialogContent>
+</AlertDialog>
+```
+
+#### Popover
+Floating content popover
+
+```tsx
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger
+} from '@codeswayam/ui'
+
+<Popover>
+  <PopoverTrigger>Open</PopoverTrigger>
+  <PopoverContent>
+    Popover content
+  </PopoverContent>
+</Popover>
+```
+
+#### Dropdown Menu
+Dropdown menu
+
+```tsx
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+} from '@codeswayam/ui'
+
+<DropdownMenu>
+  <DropdownMenuTrigger>Menu</DropdownMenuTrigger>
+  <DropdownMenuContent>
+    <DropdownMenuItem>Profile</DropdownMenuItem>
+    <DropdownMenuSeparator />
+    <DropdownMenuItem>Logout</DropdownMenuItem>
+  </DropdownMenuContent>
+</DropdownMenu>
+```
+
+### Navigation Components
+
+#### Tabs
+Tabbed interface
+
+```tsx
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@codeswayam/ui'
+
+<Tabs defaultValue=\"tab1\">
+  <TabsList>
+    <TabsTrigger value=\"tab1\">Tab 1</TabsTrigger>
+    <TabsTrigger value=\"tab2\">Tab 2</TabsTrigger>
+  </TabsList>
+  <TabsContent value=\"tab1\">Content 1</TabsContent>
+  <TabsContent value=\"tab2\">Content 2</TabsContent>
+</Tabs>
+```
+
+### Feedback Components
+
+#### Toast
+Toast notification
+
+```tsx
+import { useToast } from '@codeswayam/ui/hooks'
+
+const { toast } = useToast()
+
+toast({
+  title: 'Success',
+  description: 'Operation completed',
+  variant: 'default'
+})
+```
+
+#### Progress
+Progress bar
+
+```tsx
+import { Progress } from '@codeswayam/ui'
+
+<Progress value={65} />
+```
+
+#### Skeleton
+Loading skeleton
+
+```tsx
+import { Skeleton } from '@codeswayam/ui'
+
+<Skeleton className=\"h-12 w-12 rounded-full\" />
+```
+
+---
+
+## 🎨 Styling & Customization
+
+### Tailwind CSS Classes
+
+```tsx
+<Button className=\"custom-class\">
+  Custom Button
+</Button>
+```
+
+### Theme Customization
+
+```tsx
+// Extend tailwind config
+const config: Config = {
+  theme: {
+    extend: {
+      colors: {
+        brand: '#your-color'
+      }
+    }
+  }
+}
+```
+
+### Dark Mode
+
+Components automatically support dark mode:
+
+```tsx
+// Enable dark mode in HTML
+<html className=\"dark\">
+  <body>...</body>
+</html>
+```
+
+---
+
+## 🔗 Component Props
+
+### Common Props
+
+Most components accept:
+- `className` - Tailwind CSS classes
+- `disabled` - Disable component
+- `aria-*` - Accessibility attributes
+
+---
+
+## 🧪 Testing
+
+```tsx
+import { render, screen } from '@testing-library/react'
+import { Button } from '@codeswayam/ui'
+
+test('button renders', () => {
+  render(<Button>Click me</Button>)
+  expect(screen.getByRole('button')).toBeInTheDocument()
+})
+```
+
+---
+
+## 📖 Storybook
+
+View all components in Storybook:
+
+```bash
+npm run storybook
+```
+
+---
+
+## ♿ Accessibility
+
+All components are built with accessibility in mind:
+- Keyboard navigation
+- Screen reader support
+- ARIA labels
+- Focus management
+- Color contrast
+
+---
+
+## 📋 Component Checklist
+
+Essential components:
+- [x] Button
+- [x] Input
+- [x] Card
+- [x] Dialog
+- [x] Select
+- [x] Tabs
+- [x] Badge
+- [x] Table
+- [x] Toast
+- [x] Checkbox
+- [x] Radio
+- [x] Switch
+- [x] Textarea
+- [x] Progress
+- [x] Skeleton
+- [x] Dropdown Menu
+- [x] Popover
+- [x] Alert Dialog
+
+---
+
+## 🤝 Contributing
+
+### Adding New Components
+
+1. Create component in `src/components/`
+2. Export from `src/index.ts`
+3. Add Storybook story
+4. Document usage
+5. Test accessibility
+
+---
+
+## 📄 License
+
+ISC License
+
+---
+
+## 🔗 Related Packages
+
+- [@codeswayam/api-client](../api-client/README.md) - API client
+- [@codeswayam/auth](../auth-client/README.md) - Auth utilities
+- [@shared/database](../database/README.md) - Database utilities
+
+---
+
+**Last Updated**: April 2026
+
+For more information, see the main [README.md](../../README.md)

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

@@ -0,0 +1,7 @@
+import * as React from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+declare const Avatar: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+declare const AvatarImage: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarImageProps & React.RefAttributes<HTMLImageElement>, "ref"> & React.RefAttributes<HTMLImageElement>>;
+declare const AvatarFallback: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarFallbackProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export { Avatar, AvatarImage, AvatarFallback };
+//# sourceMappingURL=avatar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../src/components/base/avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAA;AAGzD,QAAA,MAAM,MAAM,yJAYV,CAAA;AAGF,QAAA,MAAM,WAAW,gKASf,CAAA;AAGF,QAAA,MAAM,cAAc,iKAYlB,CAAA;AAGF,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,cAAc,EAAE,CAAA"}

package/dist/components/base/avatar.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import { cn } from "../../utils/cn";
+const Avatar = React.forwardRef(({ className, ...props }, ref) => (_jsx(AvatarPrimitive.Root, { ref: ref, className: cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className), ...props })));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+const AvatarImage = React.forwardRef(({ className, ...props }, ref) => (_jsx(AvatarPrimitive.Image, { ref: ref, className: cn("aspect-square h-full w-full", className), ...props })));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+const AvatarFallback = React.forwardRef(({ className, ...props }, ref) => (_jsx(AvatarPrimitive.Fallback, { ref: ref, className: cn("flex h-full w-full items-center justify-center rounded-full bg-muted", className), ...props })));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+export { Avatar, AvatarImage, AvatarFallback };

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

@@ -0,0 +1,10 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const badgeVariants: (props?: ({
+    variant?: "default" | "destructive" | "outline" | "secondary" | "success" | "warning" | "info" | "purple" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
+}
+declare function Badge({ className, variant, ...props }: BadgeProps): import("react/jsx-runtime").JSX.Element;
+export { Badge, badgeVariants };
+//# sourceMappingURL=badge.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../src/components/base/badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE,QAAA,MAAM,aAAa;;8EAmBlB,CAAC;AAEF,MAAM,WAAW,UACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAC1C,YAAY,CAAC,OAAO,aAAa,CAAC;CAAG;AAEzC,iBAAS,KAAK,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,2CAE1D;AAED,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAC"}

package/dist/components/base/badge.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { cn } from "../../utils/cn";
+const badgeVariants = cva("inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", {
+    variants: {
+        variant: {
+            default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+            secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+            destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+            outline: "text-foreground",
+            success: "border-transparent bg-emerald-100 text-emerald-700",
+            warning: "border-transparent bg-amber-100 text-amber-700",
+            info: "border-transparent bg-blue-100 text-blue-700",
+            purple: "border-transparent bg-purple-100 text-purple-700",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+    },
+});
+function Badge({ className, variant, ...props }) {
+    return _jsx("div", { className: cn(badgeVariants({ variant }), className), ...props });
+}
+export { Badge, badgeVariants };

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

@@ -0,0 +1,12 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const buttonVariants: (props?: ({
+    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined;
+    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export { Button, buttonVariants };
+//# sourceMappingURL=button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/base/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE,QAAA,MAAM,cAAc;;;8EAwBnB,CAAC;AAEF,MAAM,WAAW,WACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EACnD,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,QAAA,MAAM,MAAM,uFAOX,CAAC;AAGF,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAC"}

package/dist/components/base/button.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { cn } from "../../utils/cn";
+const buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", {
+    variants: {
+        variant: {
+            default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+            destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+            outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+            secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+            ghost: "hover:bg-accent hover:text-accent-foreground",
+            link: "text-primary underline-offset-4 hover:underline",
+        },
+        size: {
+            default: "h-9 px-4 py-2",
+            sm: "h-8 rounded-md px-3 text-xs",
+            lg: "h-10 rounded-md px-8",
+            icon: "h-9 w-9",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+        size: "default",
+    },
+});
+const Button = React.forwardRef(({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = (asChild ? Slot : "button");
+    return (_jsx(Comp, { className: cn(buttonVariants({ variant, size, className })), ref: ref, ...props }));
+});
+Button.displayName = "Button";
+export { Button, buttonVariants };