@phsa.tec/design-system-react 0.1.9 → 0.2.0

package/README.md

@@ -1,149 +1,233 @@
-# �� PHSA Design System React
+# 🎨 PHSA Design System React
 
-A comprehensive React design system built with modern tools and best practices, featuring reusable components, consistent styling, and powerful layout solutions.
+A modern, **fully isolated** React component library built with TypeScript, Tailwind CSS, and Radix UI. **No Tailwind installation required** in your project!
 
-## 📚 Live Documentation
+## ✨ Features
 
-🌐 **[View Live Documentation](https://henriques4nti4go.github.io/phsa-design-system/)**
+- 🎯 **Zero Configuration** - Works out of the box, no Tailwind setup needed
+- 🔒 **Fully Isolated** - CSS is completely isolated, won't conflict with your project's styles
+- 🎨 **Customizable** - Easy theme customization via Provider props
+- 📦 **Lightweight** - Only includes the CSS you actually use
+- ♿ **Accessible** - Built with Radix UI primitives
+- 🌙 **Dark Mode** - Built-in dark mode support
 
-Explore all components interactively in our Storybook documentation.
+## 📚 Documentation
 
-## ✨ Features
+🌐 **[View Live Documentation](https://henriques4nti4go.github.io/phsa-design-system/)**
 
-- 🧩 **50+ Modular Components** - Complete component library with TypeScript
-- 🎨 **Tailwind CSS Ready** - Pre-styled components with customizable themes
-- 🔧 **Form Management** - Integrated with React Hook Form + Zod validation
-- 📊 **Advanced Data Tables** - Built with TanStack Table
-- 🌙 **Dark/Light Theme** - Built-in theme switching
-- 🔍 **Full TypeScript Support** - Complete type safety
-- 📱 **Responsive & Accessible** - Mobile-first and WCAG compliant
+## 🚀 Quick Start
 
-## 🚀 Installation
+### 1. Install
 
 ```bash
 npm install @phsa.tec/design-system-react
+# or
+yarn add @phsa.tec/design-system-react
+# or
+pnpm add @phsa.tec/design-system-react
 ```
 
-### Required Peer Dependencies
+### 2. Wrap Your App
 
-Install the required peer dependencies in your project:
+```tsx
+import { DesignSystemProvider, Button, Card } from "@phsa.tec/design-system-react";
 
-```bash
-npm install react react-dom @radix-ui/react-alert-dialog @radix-ui/react-avatar @radix-ui/react-checkbox @radix-ui/react-collapsible @radix-ui/react-dialog @radix-ui/react-dropdown-menu @radix-ui/react-icons @radix-ui/react-label @radix-ui/react-popover @radix-ui/react-select @radix-ui/react-separator @radix-ui/react-slot @radix-ui/react-switch @radix-ui/react-tabs @radix-ui/react-toast @radix-ui/react-tooltip class-variance-authority clsx lucide-react tailwind-merge
+function App() {
+  return (
+    <DesignSystemProvider>
+      <Card>
+        <Button>Click me</Button>
+      </Card>
+    </DesignSystemProvider>
+  );
+}
 ```
 
-Or use yarn:
+**That's it!** The CSS is automatically injected. No configuration needed.
 
-```bash
-yarn add react react-dom @radix-ui/react-alert-dialog @radix-ui/react-avatar @radix-ui/react-checkbox @radix-ui/react-collapsible @radix-ui/react-dialog @radix-ui/react-dropdown-menu @radix-ui/react-icons @radix-ui/react-label @radix-ui/react-popover @radix-ui/react-select @radix-ui/react-separator @radix-ui/react-slot @radix-ui/react-switch @radix-ui/react-tabs @radix-ui/react-toast @radix-ui/react-tooltip class-variance-authority clsx lucide-react tailwind-merge
-```
+## 🎨 Customization
+
+You can customize **all Tailwind properties** through the `DesignSystemProvider`:
+
+### Complete Theme Customization
+
+```tsx
+import { DesignSystemProvider } from "@phsa.tec/design-system-react";
 
-## ⚙️ Setup
-
-### 1. Configure Tailwind CSS
-
-Add to your `tailwind.config.js`:
-
-```javascript
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: [
-    "./src/**/*.{js,ts,jsx,tsx,mdx}",
-    "./node_modules/@phsa.tec/design-system-react/**/*.{js,ts,jsx,tsx}",
-  ],
-  theme: {
-    extend: {
-      colors: {
-        border: "hsl(var(--border))",
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
-        primary: {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))",
+function App() {
+  return (
+    <DesignSystemProvider
+      theme={{
+        colors: {
+          primary: "#3b82f6",
+          secondary: "#10b981",
+          // ... all color options
         },
-        secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))",
+        spacing: {
+          base: "0.25rem",  // 4px
+          sm: "0.5rem",     // 8px
+          md: "1rem",       // 16px
+          lg: "1.5rem",     // 24px
+          xl: "2rem",       // 32px
         },
-        // Add more theme colors as needed
-      },
-    },
-  },
-  plugins: [],
-};
+        typography: {
+          fontFamily: "Inter, sans-serif",
+          fontSize: {
+            sm: "0.875rem",
+            base: "1rem",
+            lg: "1.125rem",
+          },
+        },
+        borderRadius: {
+          sm: "0.25rem",
+          md: "0.5rem",
+          lg: "0.75rem",
+        },
+      }}
+    >
+      {/* Your app */}
+    </DesignSystemProvider>
+  );
+}
 ```
 
-### 2. Add CSS Variables
-
-Add these CSS variables to your global CSS file (`globals.css` or `index.css`):
-
-```css
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
-    --secondary: 210 40% 96%;
-    --secondary-foreground: 222.2 84% 4.9%;
-    --muted: 210 40% 96%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-    --accent: 210 40% 96%;
-    --accent-foreground: 222.2 84% 4.9%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 40% 98%;
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-    --ring: 222.2 84% 4.9%;
-    --radius: 0.5rem;
+### Simple Color Customization (Legacy)
+
+For backward compatibility, you can still use the `colors` prop:
+
+```tsx
+<DesignSystemProvider
+  colors={{
+    primary: "#3b82f6",
+    secondary: "#10b981",
+  }}
+>
+  {/* Your app */}
+</DesignSystemProvider>
+```
+
+### Available Theme Properties
+
+#### Colors (`theme.colors`)
+
+- `primary`, `primaryForeground`
+- `secondary`, `secondaryForeground`
+- `accent`, `accentForeground`
+- `destructive`, `destructiveForeground`
+- `success`, `successForeground`
+- `warning`
+- `muted`, `mutedForeground`
+- `background`, `foreground`
+- `card`, `cardForeground`
+- `popover`, `popoverForeground`
+- `border`, `input`, `ring`
+- `radius`
+
+**Color formats supported:**
+- **Hex**: `"#3b82f6"`
+- **HSL**: `"217 91% 60%"` (without `hsl()` wrapper)
+- **RGB**: Standard RGB values
+
+#### Spacing (`theme.spacing`)
+
+Customize spacing scale used by padding, margin, gap utilities:
+
+```tsx
+theme={{
+  spacing: {
+    base: "0.25rem",  // Base unit (default: 4px)
+    xs: "0.5rem",     // Extra small
+    sm: "0.75rem",    // Small
+    md: "1rem",       // Medium
+    lg: "1.5rem",     // Large
+    xl: "2rem",       // Extra large
+    "2xl": "3rem",    // 2x extra large
+    "3xl": "4rem",    // 3x extra large
   }
+}}
+```
+
+#### Typography (`theme.typography`)
 
-  .dark {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 11.2%;
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 98%;
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-    --ring: 212.7 26.8% 83.9%;
+```tsx
+theme={{
+  typography: {
+    fontFamily: "Inter, sans-serif",
+    fontSize: {
+      xs: "0.75rem",
+      sm: "0.875rem",
+      base: "1rem",
+      lg: "1.125rem",
+      xl: "1.25rem",
+      "2xl": "1.5rem",
+      "3xl": "1.875rem",
+      "4xl": "2.25rem",
+      "5xl": "3rem",
+    },
+    fontWeight: {
+      light: "300",
+      normal: "400",
+      medium: "500",
+      semibold: "600",
+      bold: "700",
+    },
+    lineHeight: {
+      none: "1",
+      tight: "1.25",
+      snug: "1.375",
+      normal: "1.5",
+      relaxed: "1.75",
+      loose: "2",
+    },
   }
-}
+}}
 ```
 
-### 3. Theme Provider (Optional)
+#### Border Radius (`theme.borderRadius`)
+
+```tsx
+theme={{
+  borderRadius: {
+    none: "0px",
+    sm: "0.25rem",
+    md: "0.5rem",
+    lg: "0.75rem",
+    xl: "1rem",
+    "2xl": "1.5rem",
+    "3xl": "2rem",
+    full: "9999px",
+  }
+}}
+```
 
-For dark/light mode support, wrap your app with the theme provider:
+#### Box Shadow (`theme.boxShadow`)
 
 ```tsx
-import { ThemeProvider } from "next-themes";
+theme={{
+  boxShadow: {
+    sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+    md: "0 4px 6px -1px rgb(0 0 0 / 0.1)",
+    lg: "0 10px 15px -3px rgb(0 0 0 / 0.1)",
+    xl: "0 20px 25px -5px rgb(0 0 0 / 0.1)",
+    "2xl": "0 25px 50px -12px rgb(0 0 0 / 0.25)",
+    inner: "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)",
+    none: "none",
+  }
+}}
+```
 
-function App() {
-  return (
-    <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
-      {/* Your app components */}
-    </ThemeProvider>
-  );
-}
+#### Breakpoints (`theme.breakpoints`)
+
+```tsx
+theme={{
+  breakpoints: {
+    sm: "640px",
+    md: "768px",
+    lg: "1024px",
+    xl: "1280px",
+    "2xl": "1536px",
+  }
+}}
 ```
 
 ## 🎯 Usage Examples
@@ -154,214 +238,106 @@ function App() {
 import {
   Button,
   Input,
-  Badge,
   Card,
   CardContent,
   CardHeader,
   CardTitle,
+  DesignSystemProvider,
 } from "@phsa.tec/design-system-react";
 
-function MyComponent() {
+function App() {
   return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Welcome</CardTitle>
-      </CardHeader>
-      <CardContent>
-        <div className="space-y-4">
-          <Input placeholder="Enter your name" />
-          <div className="flex gap-2">
-            <Button>Primary Action</Button>
-            <Button variant="secondary">Secondary</Button>
+    <DesignSystemProvider>
+      <Card>
+        <CardHeader>
+          <CardTitle>Hello World</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
+            <Input placeholder="Enter text..." />
+            <Button>Click me</Button>
           </div>
-          <Badge>New Feature</Badge>
-        </div>
-      </CardContent>
-    </Card>
+        </CardContent>
+      </Card>
+    </DesignSystemProvider>
   );
 }
 ```
 
-### Form Example with Validation
+### With Custom Theme
 
 ```tsx
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-  Input,
-  Button,
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@phsa.tec/design-system-react";
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
-import * as z from "zod";
-
-const formSchema = z.object({
-  name: z.string().min(2, "Name must be at least 2 characters"),
-  email: z.string().email("Invalid email address"),
-  role: z.string().min(1, "Please select a role"),
-});
-
-function UserForm() {
-  const form = useForm<z.infer<typeof formSchema>>({
-    resolver: zodResolver(formSchema),
-    defaultValues: {
-      name: "",
-      email: "",
-      role: "",
-    },
-  });
-
-  function onSubmit(values: z.infer<typeof formSchema>) {
-    console.log(values);
-  }
+import { DesignSystemProvider, Button } from "@phsa.tec/design-system-react";
 
+function App() {
   return (
-    <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
-        <FormField
-          control={form.control}
-          name="name"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Name</FormLabel>
-              <FormControl>
-                <Input placeholder="John Doe" {...field} />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-
-        <FormField
-          control={form.control}
-          name="email"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Email</FormLabel>
-              <FormControl>
-                <Input placeholder="john@example.com" {...field} />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-
-        <FormField
-          control={form.control}
-          name="role"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Role</FormLabel>
-              <Select onValueChange={field.onChange} defaultValue={field.value}>
-                <FormControl>
-                  <SelectTrigger>
-                    <SelectValue placeholder="Select a role" />
-                  </SelectTrigger>
-                </FormControl>
-                <SelectContent>
-                  <SelectItem value="admin">Admin</SelectItem>
-                  <SelectItem value="user">User</SelectItem>
-                  <SelectItem value="viewer">Viewer</SelectItem>
-                </SelectContent>
-              </Select>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-
-        <Button type="submit">Submit</Button>
-      </form>
-    </Form>
+    <DesignSystemProvider
+      theme={{
+        colors: {
+          primary: "#8b5cf6",      // Purple
+          secondary: "#06b6d4",    // Cyan
+        },
+        spacing: {
+          md: "1.25rem",           // Custom medium spacing
+          lg: "2rem",              // Custom large spacing
+        },
+        typography: {
+          fontFamily: "Inter, sans-serif",
+        },
+      }}
+    >
+      <Button variant="default">Primary Button</Button>
+      <Button variant="secondary">Secondary Button</Button>
+    </DesignSystemProvider>
   );
 }
 ```
 
-### Data Table Example
+### Advanced Customization Example
 
 ```tsx
-import { DataTable } from "@phsa.tec/design-system-react";
-import { ColumnDef } from "@tanstack/react-table";
-
-type User = {
-  id: string;
-  name: string;
-  email: string;
-  role: string;
-};
-
-const columns: ColumnDef<User>[] = [
-  {
-    accessorKey: "name",
-    header: "Name",
-  },
-  {
-    accessorKey: "email",
-    header: "Email",
-  },
-  {
-    accessorKey: "role",
-    header: "Role",
-  },
-];
-
-function UsersTable() {
-  const data: User[] = [
-    { id: "1", name: "John Doe", email: "john@example.com", role: "Admin" },
-    { id: "2", name: "Jane Smith", email: "jane@example.com", role: "User" },
-  ];
+import { DesignSystemProvider, Card, Button } from "@phsa.tec/design-system-react";
 
+function App() {
   return (
-    <DataTable
-      columns={columns}
-      data={data}
-      searchKey="name"
-      searchPlaceholder="Search users..."
-    />
-  );
-}
-```
-
-### Dialog/Modal Example
-
-```tsx
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-  Button,
-} from "@phsa.tec/design-system-react";
-
-function MyDialog() {
-  return (
-    <Dialog>
-      <DialogTrigger asChild>
-        <Button>Open Dialog</Button>
-      </DialogTrigger>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Confirm Action</DialogTitle>
-          <DialogDescription>
-            This action cannot be undone. Are you sure you want to continue?
-          </DialogDescription>
-        </DialogHeader>
-        <div className="flex justify-end space-x-2">
-          <Button variant="outline">Cancel</Button>
-          <Button>Confirm</Button>
-        </div>
-      </DialogContent>
-    </Dialog>
+    <DesignSystemProvider
+      theme={{
+        colors: {
+          primary: "#6366f1",
+          secondary: "#8b5cf6",
+        },
+        spacing: {
+          base: "0.5rem",    // 8px base (instead of 4px)
+          md: "1.5rem",      // 24px medium
+          lg: "3rem",        // 48px large
+        },
+        typography: {
+          fontFamily: "'Inter', 'Roboto', sans-serif",
+          fontSize: {
+            base: "16px",
+            lg: "18px",
+            xl: "20px",
+          },
+          fontWeight: {
+            normal: "400",
+            semibold: "600",
+            bold: "700",
+          },
+        },
+        borderRadius: {
+          md: "0.75rem",
+          lg: "1rem",
+        },
+        boxShadow: {
+          md: "0 8px 16px -4px rgb(0 0 0 / 0.15)",
+          lg: "0 16px 32px -8px rgb(0 0 0 / 0.2)",
+        },
+      }}
+    >
+      <Card>
+        <Button>Customized Button</Button>
+      </Card>
+    </DesignSystemProvider>
   );
 }
 ```
@@ -369,107 +345,132 @@ function MyDialog() {
 ## 🧩 Available Components
 
 ### Layout
-
-- `Card`, `CardContent`, `CardHeader`, `CardTitle`, `CardDescription`
-- `Sheet`, `SheetContent`, `SheetHeader`, `SheetTitle`
-- `Tabs`, `TabsList`, `TabsTrigger`, `TabsContent`
-- `Separator`
+- **Card** - Container component with header, content, and footer
+- **Sheet** - Slide-over panel
+- **Tabs** - Tab navigation
+- **Separator** - Visual divider
+- **PageLayout** - Full page layout wrapper
+
+### Forms
+- **Input** - Text input with validation support
+- **Button** - Button with multiple variants
+- **Select** - Dropdown selection
+- **Checkbox** - Checkbox input
+- **Switch** - Toggle switch
+- **Form** - Form wrapper with React Hook Form integration
 
 ### Data Display
-
-- `DataTable` - Advanced table with sorting, filtering, pagination
-- `Badge` - Status indicators
-- `Avatar`, `AvatarImage`, `AvatarFallback`
-- `Tooltip`, `TooltipContent`, `TooltipProvider`, `TooltipTrigger`
-
-### Data Input
-
-- `Input` - Text input with validation
-- `Button` - Customizable button component
-- `Select`, `SelectContent`, `SelectItem`, `SelectTrigger`, `SelectValue`
-- `Checkbox` - Checkbox input
-- `Switch` - Toggle switch
-- `Form`, `FormControl`, `FormField`, `FormItem`, `FormLabel`, `FormMessage`
+- **DataTable** - Advanced table with sorting, filtering, pagination
+- **Badge** - Status badge
+- **Avatar** - User avatar
+- **Text** - Typography component
 
 ### Feedback
-
-- `Dialog`, `DialogContent`, `DialogHeader`, `DialogTitle`, `DialogTrigger`
-- `AlertDialog`, `AlertDialogAction`, `AlertDialogCancel`
-- `Toast` - Notification system
-- `Alert`, `AlertDescription`, `AlertTitle`
+- **Dialog** - Modal dialog
+- **AlertDialog** - Confirmation dialog
+- **Toast** - Notification toast
+- **Alert** - Alert message
+- **Spinner** - Loading spinner
 
 ### Navigation
+- **DropdownMenu** - Dropdown menu
+- **Breadcrumbs** - Breadcrumb navigation
+- **Command** - Command palette
 
-- `DropdownMenu`, `DropdownMenuContent`, `DropdownMenuItem`
-- `Command`, `CommandDialog`, `CommandInput`, `CommandList`
-
-## 🎨 Customization
-
-### Component Variants
+## 🌙 Dark Mode
 
-Most components support multiple variants:
+The design system supports dark mode automatically. Add the `dark` class to your root element:
 
 ```tsx
-// Button variants
-<Button variant="default">Default</Button>
-<Button variant="destructive">Delete</Button>
-<Button variant="outline">Outline</Button>
-<Button variant="secondary">Secondary</Button>
-<Button variant="ghost">Ghost</Button>
-<Button variant="link">Link</Button>
-
-// Button sizes
-<Button size="sm">Small</Button>
-<Button size="default">Default</Button>
-<Button size="lg">Large</Button>
+// Toggle dark mode
+document.documentElement.classList.toggle('dark');
 ```
 
-### Custom Styling
+Or use `next-themes` for React:
 
-Components accept custom className props:
+```bash
+npm install next-themes
+```
 
 ```tsx
-<Button className="bg-purple-500 hover:bg-purple-600">
-  Custom Purple Button
-</Button>
+import { ThemeProvider } from "next-themes";
+import { DesignSystemProvider } from "@phsa.tec/design-system-react";
+
+function App() {
+  return (
+    <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+      <DesignSystemProvider>
+        {/* Your app */}
+      </DesignSystemProvider>
+    </ThemeProvider>
+  );
+}
 ```
 
-## 🔧 TypeScript Support
+## 🔒 Isolation & Compatibility
 
-All components are fully typed with TypeScript:
+### ✅ Works With
 
-```tsx
-import type { ButtonProps } from "@phsa.tec/design-system-react";
+- ✅ Projects **without** Tailwind CSS
+- ✅ Projects **with** Tailwind CSS (no conflicts!)
+- ✅ Next.js, Vite, Create React App, etc.
+- ✅ Any React framework
 
-interface CustomButtonProps extends ButtonProps {
-  isLoading?: boolean;
-}
+### How It Works
 
-function CustomButton({ isLoading, children, ...props }: CustomButtonProps) {
-  return (
-    <Button disabled={isLoading} {...props}>
-      {isLoading ? "Loading..." : children}
-    </Button>
-  );
-}
+The design system:
+1. **Compiles CSS at build time** - All Tailwind classes are pre-compiled
+2. **Uses unique class prefixes** - Classes are prefixed with `phsa-` to avoid conflicts
+3. **Scopes CSS with `.ds`** - All styles are scoped to prevent interference
+4. **Auto-injects CSS** - CSS is automatically loaded when you use `DesignSystemProvider`
+
+## 📦 Package Exports
+
+```typescript
+// Components
+import { Button, Card } from "@phsa.tec/design-system-react";
+
+// Styles (if you need manual import)
+import "@phsa.tec/design-system-react/styles";
+// or
+import styles from "@phsa.tec/design-system-react/styles";
 ```
 
-## 📚 Documentation & Storybook
+## 🛠️ Development
 
-- **Live Documentation**: [https://henriques4nti4go.github.io/phsa-design-system/](https://henriques4nti4go.github.io/phsa-design-system/)
-- **Interactive Examples**: All components include interactive Storybook stories
-- **Props Documentation**: Complete API reference for all components
+For local development and contributing:
 
-## 🤝 Support & Contributing
+```bash
+# Install dependencies
+yarn install
 
-- **Issues**: [GitHub Issues](https://github.com/henriques4nti4go/phsa-design-system/issues)
-- **Repository**: [GitHub](https://github.com/henriques4nti4go/phsa-design-system)
-- **NPM Package**: [@phsa.tec/design-system-react](https://www.npmjs.com/package/@phsa.tec/design-system-react)
+# Run Storybook
+yarn storybook
+
+# Build library
+yarn build:lib
+
+# Watch mode
+yarn build:lib:watch
+
+# Run tests
+yarn test
+```
 
 ## 📄 License
 
-MIT License - see the [LICENSE](LICENSE) file for details.
+MIT License - see [LICENSE](LICENSE) file for details.
+
+## 🤝 Contributing
+
+Contributions are welcome! Please read our contributing guidelines before submitting PRs.
+
+## 📞 Support
+
+- **Documentation**: [View Live Docs](https://henriques4nti4go.github.io/phsa-design-system/)
+- **Issues**: [GitHub Issues](https://github.com/henriques4nti4go/phsa-design-system/issues)
+- **Package**: [npm](https://www.npmjs.com/package/@phsa.tec/design-system-react)
 
 ---
 
-Built with ❤️ using React, TypeScript, Tailwind CSS, and Radix UI
+Built with ❤️ by the PHSA team