braid-ui 1.0.98 → 1.0.99

package/README.md

@@ -1,356 +1,73 @@
-# Braid UI
+# Welcome to your Lovable project
 
-A comprehensive React UI component library built with TypeScript, Tailwind CSS, and Radix UI primitives.
+## Project info
 
-## Installation
+**URL**: https://lovable.dev/projects/aca89158-f0a1-4aec-b491-0b98086f2184
 
-```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:
+## How can I edit this code?
 
-```tsx
-// In your main.tsx, App.tsx, or index.tsx
-import 'braid-ui/styles'
-```
+There are several ways of editing your application.
 
-Alternatively, import in your main CSS file:
+**Use Lovable**
 
-```css
-/* In your globals.css or main.css */
-@import 'braid-ui/styles';
-```
+Simply visit the [Lovable Project](https://lovable.dev/projects/aca89158-f0a1-4aec-b491-0b98086f2184) and start prompting.
 
-### 2. Configure Tailwind CSS
+Changes made via Lovable will be committed automatically to this repo.
 
-Braid UI requires Tailwind CSS to be configured in your project. Add the library's theme extensions to your `tailwind.config.js`:
+**Use your preferred IDE**
 
-```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')],
-}
-```
+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.
 
-**Important:** Make sure `tailwindcss-animate` is installed:
+The only requirement is having Node.js & npm installed - [install with nvm](https://github.com/nvm-sh/nvm#installing-and-updating)
 
-```bash
-npm install -D tailwindcss-animate
-```
+Follow these steps:
 
-## Usage
+```sh
+# Step 1: Clone the repository using the project's Git URL.
+git clone <YOUR_GIT_URL>
 
-### Importing Components
+# Step 2: Navigate to the project directory.
+cd <YOUR_PROJECT_NAME>
 
-Import components directly from the main package:
+# Step 3: Install the necessary dependencies.
+npm i
 
-```tsx
-import { Button, Card, Dialog, Input } from 'braid-ui'
+# Step 4: Start the development server with auto-reloading and an instant preview.
+npm run dev
 ```
 
-### 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>
-  )
-}
-```
+**Edit a file directly in GitHub**
 
-### Using Hooks
+- 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.
 
-```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>
-  )
-}
-```
+**Use GitHub Codespaces**
 
-## Styling Options
+- 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.
 
-### With Tailwind CSS (Recommended)
+## What technologies are used for this project?
 
-If you're using Tailwind CSS, import the styles and configure your Tailwind config as shown above.
+This project is built with:
 
-### 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
-```
+- Vite
+- TypeScript
+- React
+- shadcn-ui
+- Tailwind CSS
 
-This prevents Next.js from trying to bundle Node.js-specific dependencies that `pdfjs-dist` might reference during webpack analysis.
+## How can I deploy this project?
 
-**Note**: If you're not using any PDF-related components, this configuration is optional.
+Simply open [Lovable](https://lovable.dev/projects/aca89158-f0a1-4aec-b491-0b98086f2184) and click on Share -> Publish.
 
-## License
+## Can I connect a custom domain to my Lovable project?
 
-MIT
+Yes, you can!
 
-## Repository
+To connect a domain, navigate to Project > Settings > Domains and click Connect Domain.
 
-[GitHub Repository](https://github.com/your-username/braid-ui-kit.git)
+Read more here: [Setting up a custom domain](https://docs.lovable.dev/tips-tricks/custom-domain#step-by-step-guide)

package/components.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "src/index.css",
+    "baseColor": "slate",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  }
+}

package/eslint.config.js

@@ -0,0 +1,29 @@
+import js from "@eslint/js";
+import globals from "globals";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import tseslint from "typescript-eslint";
+
+export default tseslint.config(
+  { ignores: ["dist"] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ["**/*.{ts,tsx}"],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      "react-hooks": reactHooks,
+      "react-refresh": reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      "react-refresh/only-export-components": [
+        "warn",
+        { allowConstantExport: true },
+      ],
+      "@typescript-eslint/no-unused-vars": "off",
+    },
+  }
+);

package/index.html

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>form-wizard-states</title>
+    <meta name="description" content="Lovable Generated Project" />
+    <meta name="author" content="Lovable" />
+
+    <meta property="og:title" content="form-wizard-states" />
+    <meta property="og:description" content="Lovable Generated Project" />
+    <meta property="og:type" content="website" />
+    <meta property="og:image" content="https://lovable.dev/opengraph-image-p98pqg.png" />
+
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@lovable_dev" />
+    <meta name="twitter:image" content="https://lovable.dev/opengraph-image-p98pqg.png" />
+  </head>
+
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/package.json

@@ -1,125 +1,66 @@
 {
   "name": "braid-ui",
-  "private": false,
-  "version": "1.0.98",
+  "version": "1.0.99",
   "type": "module",
-  "sideEffects": false,
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
-    },
-    "./components": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
-    },
-    "./hooks": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
-    },
-    "./pages": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
-    },
-    "./styles": "./src/styles.css",
-    "./styles-only": "./src/styles-only.css",
-    "./css": "./dist/css/braid-ui.css",
-    "./css/min": "./dist/css/braid-ui.min.css",
-    "./css/variables": "./dist/css/braid-ui-variables.css"
-  },
-  "files": [
-    "dist",
-    "src/styles.css",
-    "src/styles-only.css"
-  ],
-  "keywords": [
-    "react",
-    "ui",
-    "components",
-    "typescript",
-    "tailwindcss",
-    "radix-ui"
-  ],
-  "author": "Braid UI Kit",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/your-username/braid-ui-kit.git"
-  },
-  "peerDependencies": {
-    "@hookform/resolvers": ">=3.0.0",
-    "@radix-ui/react-accordion": ">=1.0.0",
-    "@radix-ui/react-alert-dialog": ">=1.0.0",
-    "@radix-ui/react-aspect-ratio": ">=1.0.0",
-    "@radix-ui/react-avatar": ">=1.0.0",
-    "@radix-ui/react-checkbox": ">=1.0.0",
-    "@radix-ui/react-collapsible": ">=1.0.0",
-    "@radix-ui/react-context-menu": ">=2.0.0",
-    "@radix-ui/react-dialog": ">=1.0.0",
-    "@radix-ui/react-dropdown-menu": ">=2.0.0",
-    "@radix-ui/react-hover-card": ">=1.0.0",
-    "@radix-ui/react-label": ">=2.0.0",
-    "@radix-ui/react-menubar": ">=1.0.0",
-    "@radix-ui/react-navigation-menu": ">=1.0.0",
-    "@radix-ui/react-popover": ">=1.0.0",
-    "@radix-ui/react-progress": ">=1.0.0",
-    "@radix-ui/react-radio-group": ">=1.0.0",
-    "@radix-ui/react-scroll-area": ">=1.0.0",
-    "@radix-ui/react-select": ">=2.0.0",
-    "@radix-ui/react-separator": ">=1.0.0",
-    "@radix-ui/react-slider": ">=1.0.0",
-    "@radix-ui/react-slot": ">=1.0.0",
-    "@radix-ui/react-switch": ">=1.0.0",
-    "@radix-ui/react-tabs": ">=1.0.0",
-    "@radix-ui/react-toast": ">=1.0.0",
-    "@radix-ui/react-toggle": ">=1.0.0",
-    "@radix-ui/react-toggle-group": ">=1.0.0",
-    "@radix-ui/react-tooltip": ">=1.0.0",
-    "@tanstack/react-query": ">=5.0.0",
-    "class-variance-authority": ">=0.7.0",
-    "clsx": ">=2.0.0",
-    "cmdk": ">=1.0.0",
-    "date-fns": ">=3.0.0",
-    "embla-carousel-react": ">=8.0.0",
-    "input-otp": ">=1.0.0",
-    "lodash": ">=4.17.0",
-    "lucide-react": ">=0.400.0",
-    "next-themes": ">=0.3.0",
-    "react": ">=18.0.0",
-    "react-day-picker": ">=9.0.0",
-    "react-dom": ">=18.0.0",
-    "react-hook-form": ">=7.0.0",
-    "react-resizable-panels": ">=2.0.0",
-    "react-router-dom": ">=6.0.0",
-    "recharts": ">=2.0.0",
-    "sonner": ">=1.0.0",
-    "tailwind-merge": ">=2.0.0",
-    "tailwindcss-animate": ">=1.0.0",
-    "vaul": ">=0.9.0",
-    "zod": ">=3.0.0"
-  },
   "scripts": {
     "dev": "vite",
     "build": "vite build",
     "build:dev": "vite build --mode development",
-    "build:lib": "tsup",
-    "build:lib:watch": "tsup --watch",
-    "build:css": "node build-css.mjs",
-    "build:all": "npm run build:lib && npm run build:css",
     "lint": "eslint .",
-    "preview": "vite preview",
-    "prepublishOnly": "npm run build:all"
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@hookform/resolvers": "^3.10.0",
+    "@radix-ui/react-accordion": "^1.2.11",
+    "@radix-ui/react-alert-dialog": "^1.1.14",
+    "@radix-ui/react-aspect-ratio": "^1.1.7",
+    "@radix-ui/react-avatar": "^1.1.10",
+    "@radix-ui/react-checkbox": "^1.3.2",
+    "@radix-ui/react-collapsible": "^1.1.11",
+    "@radix-ui/react-context-menu": "^2.2.15",
+    "@radix-ui/react-dialog": "^1.1.14",
+    "@radix-ui/react-dropdown-menu": "^2.1.15",
+    "@radix-ui/react-hover-card": "^1.1.14",
+    "@radix-ui/react-label": "^2.1.7",
+    "@radix-ui/react-menubar": "^1.1.15",
+    "@radix-ui/react-navigation-menu": "^1.2.13",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-progress": "^1.1.7",
+    "@radix-ui/react-radio-group": "^1.3.7",
+    "@radix-ui/react-scroll-area": "^1.2.9",
+    "@radix-ui/react-select": "^2.2.5",
+    "@radix-ui/react-separator": "^1.1.7",
+    "@radix-ui/react-slider": "^1.3.5",
+    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-switch": "^1.2.5",
+    "@radix-ui/react-tabs": "^1.1.12",
+    "@radix-ui/react-toast": "^1.2.14",
+    "@radix-ui/react-toggle": "^1.1.9",
+    "@radix-ui/react-toggle-group": "^1.1.10",
+    "@radix-ui/react-tooltip": "^1.2.7",
+    "@tanstack/react-query": "^5.83.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "date-fns": "^3.6.0",
+    "embla-carousel-react": "^8.6.0",
+    "input-otp": "^1.4.2",
+    "lucide-react": "^0.462.0",
+    "next-themes": "^0.3.0",
+    "react": "^18.3.1",
+    "react-day-picker": "^9.11.0",
+    "react-dom": "^18.3.1",
+    "react-hook-form": "^7.61.1",
+    "react-resizable-panels": "^2.1.9",
+    "react-router-dom": "^6.30.3",
+    "recharts": "^2.15.4",
+    "sonner": "^1.7.4",
+    "tailwind-merge": "^2.6.0",
+    "tailwindcss-animate": "^1.0.7",
+    "vaul": "^0.9.9",
+    "zod": "^3.25.76"
   },
   "devDependencies": {
-    "@emotion/react": "^11.14.0",
-    "@emotion/styled": "^11.14.1",
     "@eslint/js": "^9.32.0",
     "@tailwindcss/typography": "^0.5.16",
     "@types/node": "^22.16.5",
@@ -131,12 +72,11 @@
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.20",
     "globals": "^15.15.0",
-    "lovable-tagger": "^1.1.9",
+    "lovable-tagger": "^1.1.13",
     "postcss": "^8.5.6",
     "tailwindcss": "^3.4.17",
-    "tsup": "^8.5.0",
     "typescript": "^5.8.3",
     "typescript-eslint": "^8.38.0",
-    "vite": "^5.4.19"
+    "vite": "^7.3.1"
   }
 }

package/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}