braid-ui 1.0.67 → 1.0.69

package/README.md

@@ -1,41 +1,90 @@
-# Braid UI Kit
+# Braid UI
 
-A comprehensive React UI component library built with TypeScript, Tailwind CSS, and Radix UI.
+A comprehensive React UI component library built with TypeScript, Tailwind CSS, and Radix UI primitives.
 
 ## Installation
 
 ```bash
 npm install braid-ui
+# or
+yarn add braid-ui
+# or
+pnpm add braid-ui
 ```
 
+## Quick Start
+
+```tsx
+import { Button, Card } from 'braid-ui'
+import 'braid-ui/styles'
+
+function App() {
+  return (
+    <Card>
+      <Button>Click me</Button>
+    </Card>
+  )
+}
+```
+
+## Peer Dependencies
+
+Braid UI requires the following peer dependencies. Make sure they are installed:
+
+```bash
+npm install react react-dom react-router-dom \
+  @radix-ui/react-accordion @radix-ui/react-alert-dialog \
+  @radix-ui/react-aspect-ratio @radix-ui/react-avatar \
+  @radix-ui/react-checkbox @radix-ui/react-collapsible \
+  @radix-ui/react-context-menu @radix-ui/react-dialog \
+  @radix-ui/react-dropdown-menu @radix-ui/react-hover-card \
+  @radix-ui/react-label @radix-ui/react-menubar \
+  @radix-ui/react-navigation-menu @radix-ui/react-popover \
+  @radix-ui/react-progress @radix-ui/react-radio-group \
+  @radix-ui/react-scroll-area @radix-ui/react-select \
+  @radix-ui/react-separator @radix-ui/react-slider \
+  @radix-ui/react-slot @radix-ui/react-switch \
+  @radix-ui/react-tabs @radix-ui/react-toast \
+  @radix-ui/react-toggle @radix-ui/react-toggle-group \
+  @radix-ui/react-tooltip \
+  @tanstack/react-query @hookform/resolvers \
+  class-variance-authority clsx cmdk date-fns \
+  embla-carousel-react input-otp lucide-react next-themes \
+  react-day-picker react-hook-form react-resizable-panels \
+  recharts sonner tailwind-merge tailwindcss-animate vaul zod \
+  lodash react-pdf
+```
+
+Or install them individually as needed. See the full list in `package.json` under `peerDependencies`.
+
 ## Setup
 
-### 1. Import the styles
+### 1. Import Styles
 
-You need to import the CSS styles for the components to display correctly:
+Import the CSS styles in your application entry point:
 
 ```tsx
-// In your main App.tsx or main CSS file
+// In your main.tsx, App.tsx, or index.tsx
 import 'braid-ui/styles'
 ```
 
-### 2. Configure Tailwind CSS
-
-Your project needs Tailwind CSS configured. If you don't have it:
+Alternatively, import in your main CSS file:
 
-```bash
-npm install -D tailwindcss postcss autoprefixer
-npx tailwindcss init -p
+```css
+/* In your globals.css or main.css */
+@import 'braid-ui/styles';
 ```
 
-Then update your `tailwind.config.js`:
+### 2. Configure Tailwind CSS
+
+Braid UI requires Tailwind CSS to be configured in your project. Add the library's theme extensions to your `tailwind.config.js`:
 
 ```js
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
     "./src/**/*.{js,ts,jsx,tsx}",
-    "./node_modules/braid-ui/dist/**/*.{js,ts,jsx,tsx}", // Add this line
+    "./node_modules/braid-ui/dist/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
     extend: {
@@ -48,164 +97,233 @@ module.exports = {
         primary: {
           DEFAULT: 'hsl(var(--primary))',
           foreground: 'hsl(var(--primary-foreground))',
+          glow: 'hsl(var(--primary-glow))'
         },
         secondary: {
           DEFAULT: 'hsl(var(--secondary))',
-          foreground: 'hsl(var(--secondary-foreground))',
+          foreground: 'hsl(var(--secondary-foreground))'
         },
         destructive: {
           DEFAULT: 'hsl(var(--destructive))',
-          foreground: 'hsl(var(--destructive-foreground))',
+          foreground: 'hsl(var(--destructive-foreground))'
+        },
+        success: {
+          DEFAULT: 'hsl(var(--success))',
+          foreground: 'hsl(var(--success-foreground))'
+        },
+        warning: {
+          DEFAULT: 'hsl(var(--warning))',
+          foreground: 'hsl(var(--warning-foreground))'
         },
         muted: {
           DEFAULT: 'hsl(var(--muted))',
-          foreground: 'hsl(var(--muted-foreground))',
+          foreground: 'hsl(var(--muted-foreground))'
         },
         accent: {
           DEFAULT: 'hsl(var(--accent))',
-          foreground: 'hsl(var(--accent-foreground))',
+          foreground: 'hsl(var(--accent-foreground))'
         },
         popover: {
           DEFAULT: 'hsl(var(--popover))',
-          foreground: 'hsl(var(--popover-foreground))',
+          foreground: 'hsl(var(--popover-foreground))'
         },
         card: {
           DEFAULT: 'hsl(var(--card))',
-          foreground: 'hsl(var(--card-foreground))',
+          foreground: 'hsl(var(--card-foreground))'
+        },
+        form: {
+          background: 'hsl(var(--form-background))',
+          border: 'hsl(var(--form-border))',
+          'border-focus': 'hsl(var(--form-border-focus))',
+          'border-error': 'hsl(var(--form-border-error))',
+          'border-success': 'hsl(var(--form-border-success))'
         },
+        sidebar: {
+          DEFAULT: 'hsl(var(--sidebar-background))',
+          foreground: 'hsl(var(--sidebar-foreground))',
+          primary: 'hsl(var(--sidebar-primary))',
+          'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
+          accent: 'hsl(var(--sidebar-accent))',
+          'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
+          border: 'hsl(var(--sidebar-border))',
+          ring: 'hsl(var(--sidebar-ring))'
+        }
       },
       borderRadius: {
         lg: 'var(--radius)',
         md: 'calc(var(--radius) - 2px)',
-        sm: 'calc(var(--radius) - 4px)',
+        sm: 'calc(var(--radius) - 4px)'
+      },
+      keyframes: {
+        'accordion-down': {
+          from: { height: '0' },
+          to: { height: 'var(--radix-accordion-content-height)' }
+        },
+        'accordion-up': {
+          from: { height: 'var(--radix-accordion-content-height)' },
+          to: { height: '0' }
+        }
+      },
+      animation: {
+        'accordion-down': 'accordion-down 0.2s ease-out',
+        'accordion-up': 'accordion-up 0.2s ease-out'
+      },
+      backgroundImage: {
+        'gradient-primary': 'var(--gradient-primary)',
+        'gradient-subtle': 'var(--gradient-subtle)'
+      },
+      boxShadow: {
+        'form': 'var(--shadow-form)',
+        'form-focus': 'var(--shadow-form-focus)',
+        'form-error': 'var(--shadow-form-error)'
       },
-    },
+      transitionProperty: {
+        'form': 'var(--transition-form)'
+      }
+    }
   },
-  plugins: [],
+  plugins: [require('tailwindcss-animate')],
 }
 ```
 
+**Important:** Make sure `tailwindcss-animate` is installed:
+
+```bash
+npm install -D tailwindcss-animate
+```
+
 ## Usage
 
-### Import Components
+### Importing Components
+
+Import components directly from the main package:
 
 ```tsx
-import { Button, Card, Dialog } from 'braid-ui-kit'
+import { Button, Card, Dialog, Input } from 'braid-ui'
+```
 
-function App() {
+### Using Components
+
+```tsx
+import { Button, Card, CardHeader, CardTitle, CardContent } from 'braid-ui'
+
+function MyComponent() {
   return (
-    <div>
-      <Button>Click me</Button>
-      <Card>
-        <h2>Card Title</h2>
-        <p>Card content</p>
-      </Card>
-    </div>
+    <Card>
+      <CardHeader>
+        <CardTitle>Card Title</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <Button>Click me</Button>
+      </CardContent>
+    </Card>
   )
 }
 ```
 
-### Import Hooks
+### Using Hooks
 
 ```tsx
-import { useToast, useEditState } from 'braid-ui-kit'
+import { useToast, useEditState } from 'braid-ui'
 
 function MyComponent() {
   const { toast } = useToast()
-  const editState = useEditState()
   
   return (
-    <button onClick={() => toast({ title: "Hello!" })}>
+    <button onClick={() => toast({ 
+      title: 'Success!',
+      description: 'Action completed successfully.'
+    })}>
       Show Toast
     </button>
   )
 }
 ```
 
-### Import Pages
+### Using Pages
 
 ```tsx
-import { Dashboard, Alerts, Business } from 'braid-ui-kit'
+import { Dashboard, Alerts, Businesses } from 'braid-ui'
+import { BrowserRouter, Routes, Route } from 'react-router-dom'
 
 function App() {
   return (
-    <Router>
+    <BrowserRouter>
       <Routes>
         <Route path="/" element={<Dashboard />} />
         <Route path="/alerts" element={<Alerts />} />
-        <Route path="/business" element={<Business />} />
+        <Route path="/businesses" element={<Businesses />} />
       </Routes>
-    </Router>
+    </BrowserRouter>
   )
 }
 ```
 
-### Import Specific Categories
-
-You can also import from specific categories:
-
-```tsx
-// Import only components
-import { Button, Card } from 'braid-ui-kit/components'
+## Styling Options
 
-// Import only hooks
-import { useToast } from 'braid-ui-kit/hooks'
+### With Tailwind CSS (Recommended)
 
-// Import only pages
-import { Dashboard } from 'braid-ui-kit/pages'
-```
+If you're using Tailwind CSS, import the styles and configure your Tailwind config as shown above.
 
-## Development
+### Without Tailwind CSS
 
-### Build the Library
+If you're not using Tailwind CSS, you can use the pre-compiled CSS:
 
-```bash
-npm run build:lib
+```tsx
+// Import pre-compiled CSS
+import 'braid-ui/css'
+// or minified version
+import 'braid-ui/css/min'
 ```
 
-### Watch Mode
+You can also import just the CSS variables:
 
-```bash
-npm run build:lib:watch
+```tsx
+import 'braid-ui/css/variables'
 ```
 
-## Components
+## Customizing Colors
 
-The library includes:
+You can customize the color scheme by overriding CSS variables:
 
-- **UI Components**: Basic building blocks like Button, Card, Dialog, etc.
-- **Form Components**: Form fields, inputs, and validation components
-- **Layout Components**: Page layouts, containers, and grid systems
-- **Business Components**: Specialized components for business applications
-- **Alert Components**: Alert and notification components
+```css
+:root {
+  --primary: 204 100% 54%;
+  --primary-foreground: 0 0% 100%;
+  --background: 240 10% 98%;
+  --foreground: 240 10% 8%;
+  /* ... override other variables as needed */
+}
+```
 
-## Hooks
+**Note:** Colors should be defined as HSL values without the `hsl()` wrapper.
 
-- `useToast`: Toast notification management
-- `useEditState`: Edit state management
-- `useFormWithEditState`: Form state with edit capabilities
-- `useMobile`: Mobile detection hook
+## Dark Mode
 
-## Pages
+Braid UI supports dark mode automatically. The CSS variables switch when the `.dark` class is present on a parent element (usually `<html>` or `<body>`).
 
-Pre-built page components for common business applications:
+If you're using a theme provider like `next-themes`:
 
-- Dashboard
-- Alerts management
-- Business management
-- Transaction handling
-- Counterparty management
+```tsx
+import { ThemeProvider } from 'next-themes'
 
-## Dependencies
+function App() {
+  return (
+    <ThemeProvider attribute="class" defaultTheme="system">
+      {/* Your app */}
+    </ThemeProvider>
+  )
+}
+```
 
-This library requires React 18+ and includes peer dependencies for:
+## TypeScript
 
-- React
-- React DOM
-- Various Radix UI components
-- Tailwind CSS
-- Lucide React icons
+Braid UI is built with TypeScript and includes type definitions. No additional `@types` packages are required.
 
 ## License
 
-MIT
+MIT
+
+## Repository
+
+[GitHub Repository](https://github.com/your-username/braid-ui-kit.git)