braid-ui 1.0.99 → 1.0.101

package/README.md

@@ -1,73 +1,356 @@
-# Welcome to your Lovable project
+# Braid UI
 
-## Project info
+A comprehensive React UI component library built with TypeScript, Tailwind CSS, and Radix UI primitives.
 
-**URL**: https://lovable.dev/projects/aca89158-f0a1-4aec-b491-0b98086f2184
+## Installation
 
-## How can I edit this code?
+```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 Styles
+
+Import the CSS styles in your application entry point:
 
-There are several ways of editing your application.
+```tsx
+// In your main.tsx, App.tsx, or index.tsx
+import 'braid-ui/styles'
+```
 
-**Use Lovable**
+Alternatively, import in your main CSS file:
 
-Simply visit the [Lovable Project](https://lovable.dev/projects/aca89158-f0a1-4aec-b491-0b98086f2184) and start prompting.
+```css
+/* In your globals.css or main.css */
+@import 'braid-ui/styles';
+```
 
-Changes made via Lovable will be committed automatically to this repo.
+### 2. Configure Tailwind CSS
 
-**Use your preferred IDE**
+Braid UI requires Tailwind CSS to be configured in your project. Add the library's theme extensions to your `tailwind.config.js`:
 
-If you want to work locally using your own IDE, you can clone this repo and push changes. Pushed changes will also be reflected in Lovable.
+```js
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./src/**/*.{js,ts,jsx,tsx}",
+    "./node_modules/braid-ui/dist/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
+        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))'
+        },
+        destructive: {
+          DEFAULT: 'hsl(var(--destructive))',
+          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))'
+        },
+        accent: {
+          DEFAULT: 'hsl(var(--accent))',
+          foreground: 'hsl(var(--accent-foreground))'
+        },
+        popover: {
+          DEFAULT: 'hsl(var(--popover))',
+          foreground: 'hsl(var(--popover-foreground))'
+        },
+        card: {
+          DEFAULT: 'hsl(var(--card))',
+          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)'
+      },
+      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: [require('tailwindcss-animate')],
+}
+```
 
-The only requirement is having Node.js & npm installed - [install with nvm](https://github.com/nvm-sh/nvm#installing-and-updating)
+**Important:** Make sure `tailwindcss-animate` is installed:
 
-Follow these steps:
+```bash
+npm install -D tailwindcss-animate
+```
 
-```sh
-# Step 1: Clone the repository using the project's Git URL.
-git clone <YOUR_GIT_URL>
+## Usage
 
-# Step 2: Navigate to the project directory.
-cd <YOUR_PROJECT_NAME>
+### Importing Components
 
-# Step 3: Install the necessary dependencies.
-npm i
+Import components directly from the main package:
 
-# Step 4: Start the development server with auto-reloading and an instant preview.
-npm run dev
+```tsx
+import { Button, Card, Dialog, Input } from 'braid-ui'
 ```
 
-**Edit a file directly in GitHub**
+### Using Components
+
+```tsx
+import { Button, Card, CardHeader, CardTitle, CardContent } from 'braid-ui'
+
+function MyComponent() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Card Title</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <Button>Click me</Button>
+      </CardContent>
+    </Card>
+  )
+}
+```
 
-- Navigate to the desired file(s).
-- Click the "Edit" button (pencil icon) at the top right of the file view.
-- Make your changes and commit the changes.
+### Using Hooks
 
-**Use GitHub Codespaces**
+```tsx
+import { useToast, useEditState } from 'braid-ui'
+
+function MyComponent() {
+  const { toast } = useToast()
+  
+  return (
+    <button onClick={() => toast({ 
+      title: 'Success!',
+      description: 'Action completed successfully.'
+    })}>
+      Show Toast
+    </button>
+  )
+}
+```
+
+### Using Pages
+
+```tsx
+import { Dashboard, Alerts, Businesses } from 'braid-ui'
+import { BrowserRouter, Routes, Route } from 'react-router-dom'
+
+function App() {
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<Dashboard />} />
+        <Route path="/alerts" element={<Alerts />} />
+        <Route path="/businesses" element={<Businesses />} />
+      </Routes>
+    </BrowserRouter>
+  )
+}
+```
 
-- Navigate to the main page of your repository.
-- Click on the "Code" button (green button) near the top right.
-- Select the "Codespaces" tab.
-- Click on "New codespace" to launch a new Codespace environment.
-- Edit files directly within the Codespace and commit and push your changes once you're done.
+## Styling Options
 
-## What technologies are used for this project?
+### With Tailwind CSS (Recommended)
 
-This project is built with:
+If you're using Tailwind CSS, import the styles and configure your Tailwind config as shown above.
 
-- Vite
-- TypeScript
-- React
-- shadcn-ui
-- Tailwind CSS
+### Without Tailwind CSS
+
+If you're not using Tailwind CSS, you can use the pre-compiled CSS:
+
+```tsx
+// Import pre-compiled CSS
+import 'braid-ui/css'
+// or minified version
+import 'braid-ui/css/min'
+```
+
+You can also import just the CSS variables:
+
+```tsx
+import 'braid-ui/css/variables'
+```
+
+## Customizing Colors
+
+You can customize the color scheme by overriding CSS variables:
+
+```css
+:root {
+  --primary: 204 100% 54%;
+  --primary-foreground: 0 0% 100%;
+  --background: 240 10% 98%;
+  --foreground: 240 10% 8%;
+  /* ... override other variables as needed */
+}
+```
+
+**Note:** Colors should be defined as HSL values without the `hsl()` wrapper.
+
+## Dark Mode
+
+Braid UI supports dark mode automatically. The CSS variables switch when the `.dark` class is present on a parent element (usually `<html>` or `<body>`).
+
+If you're using a theme provider like `next-themes`:
+
+```tsx
+import { ThemeProvider } from 'next-themes'
+
+function App() {
+  return (
+    <ThemeProvider attribute="class" defaultTheme="system">
+      {/* Your app */}
+    </ThemeProvider>
+  )
+}
+```
+
+## TypeScript
+
+Braid UI is built with TypeScript and includes type definitions. No additional `@types` packages are required.
+
+## Next.js Configuration
+
+If you're using Braid UI in a Next.js application and need to use components that include PDF viewing (like `BusinessDetailView` with `BusinessDocuments`), you'll need to configure Next.js webpack to handle `react-pdf` dependencies correctly.
+
+Add the following to your `next.config.js`:
+
+```js
+const nextConfig = {
+  webpack: (config, { isServer }) => {
+    // Fix for react-pdf/pdfjs-dist in Next.js
+    if (!isServer) {
+      config.resolve.alias = {
+        ...config.resolve.alias,
+        canvas: false,
+      }
+    }
+    return config
+  },
+}
+
+module.exports = nextConfig
+```
 
-## How can I deploy this project?
+This prevents Next.js from trying to bundle Node.js-specific dependencies that `pdfjs-dist` might reference during webpack analysis.
 
-Simply open [Lovable](https://lovable.dev/projects/aca89158-f0a1-4aec-b491-0b98086f2184) and click on Share -> Publish.
+**Note**: If you're not using any PDF-related components, this configuration is optional.
 
-## Can I connect a custom domain to my Lovable project?
+## License
 
-Yes, you can!
+MIT
 
-To connect a domain, navigate to Project > Settings > Domains and click Connect Domain.
+## Repository
 
-Read more here: [Setting up a custom domain](https://docs.lovable.dev/tips-tricks/custom-domain#step-by-step-guide)
+[GitHub Repository](https://github.com/your-username/braid-ui-kit.git)

package/dist/css/braid-ui-variables.css

@@ -0,0 +1,88 @@
+
+/* Braid UI CSS Variables */
+:root {
+  --background: 240 10% 98%;
+  --foreground: 240 10% 8%;
+  --card: 0 0% 100%;
+  --card-foreground: 240 10% 8%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 240 10% 8%;
+  --primary: 204 100% 54%;
+  --primary-foreground: 0 0% 100%;
+  --primary-glow: 204 100% 64%;
+  --secondary: 240 5% 96%;
+  --secondary-foreground: 240 6% 10%;
+  --muted: 240 5% 96%;
+  --muted-foreground: 240 4% 60%;
+  --accent: 240 5% 96%;
+  --accent-foreground: 240 6% 10%;
+  --destructive: 0 84% 60%;
+  --destructive-foreground: 0 0% 98%;
+  --border: 240 6% 90%;
+  --input: 240 6% 90%;
+  --ring: 204 100% 54%;
+  --success: 142 76% 36%;
+  --success-foreground: 0 0% 98%;
+  --warning: 38 92% 50%;
+  --warning-foreground: 0 0% 98%;
+  --form-background: 0 0% 100%;
+  --form-border: 240 6% 88%;
+  --form-border-focus: 204 100% 54%;
+  --form-border-error: 0 84% 60%;
+  --form-border-success: 142 76% 36%;
+  --gradient-primary: linear-gradient(135deg, hsl(204 100% 54%), hsl(204 100% 64%));
+  --gradient-subtle: linear-gradient(180deg, hsl(240 10% 98%), hsl(240 5% 96%));
+  --shadow-form: 0 1px 3px 0 hsl(240 5% 84% / 0.12), 0 1px 2px 0 hsl(240 5% 84% / 0.24);
+  --shadow-form-focus: 0 0 0 3px hsl(204 100% 54% / 0.12);
+  --shadow-form-error: 0 0 0 3px hsl(0 84% 60% / 0.12);
+  --transition-form: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  --radius: 0.5rem;
+  --sidebar-background: 0 0% 98%;
+  --sidebar-foreground: 240 5.3% 26.1%;
+  --sidebar-primary: 240 5.9% 10%;
+  --sidebar-primary-foreground: 0 0% 98%;
+  --sidebar-accent: 240 4.8% 95.9%;
+  --sidebar-accent-foreground: 240 5.9% 10%;
+  --sidebar-border: 220 13% 91%;
+  --sidebar-ring: 217.2 91.2% 59.8%;
+}
+
+.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%;
+  --sidebar-background: 240 5.9% 10%;
+  --sidebar-foreground: 240 4.8% 95.9%;
+  --sidebar-primary: 224.3 76.3% 48%;
+  --sidebar-primary-foreground: 0 0% 100%;
+  --sidebar-accent: 240 3.7% 15.9%;
+  --sidebar-accent-foreground: 240 4.8% 95.9%;
+  --sidebar-border: 240 3.7% 15.9%;
+  --sidebar-ring: 217.2 91.2% 59.8%;
+}
+
+@layer base {
+  * {
+    border-color: hsl(var(--border));
+  }
+  body {
+    background-color: hsl(var(--background));
+    color: hsl(var(--foreground));
+  }
+}