myoperator-ui 0.0.209 → 0.0.210-beta.0

package/README.md

@@ -1,394 +1,394 @@
-# myOperator UI
-
-CLI for adding myOperator UI components to your React project. Works with both standalone projects and projects that use Bootstrap or other CSS frameworks.
-
-## Quick Start
-
-```bash
-# Initialize your project
-npx myoperator-ui init
-
-# Add a component
-npx myoperator-ui add button
-```
-
-## Commands
-
-### `init` - Initialize Project
-
-```bash
-npx myoperator-ui init
-```
-
-This will:
-- Create a `components.json` configuration file
-- Set up the utils file with the `cn` helper
-- Create the components directory
-- Create/update your global CSS (`App.scss`) with Tailwind imports
-- Create/update `postcss.config.js` with the correct Tailwind CSS PostCSS plugin
-- Configure Tailwind with `tw-` prefix by default
-
-### `add` - Add Components
-
-```bash
-# Add a specific component
-npx myoperator-ui add button
-
-# Add multiple components
-npx myoperator-ui add button badge table
-
-# Add all available components at once
-npx myoperator-ui add --all
-
-# Interactive selection (shows all available components)
-npx myoperator-ui add
-```
-
-**Options:**
-
-| Option | Short | Description |
-|--------|-------|-------------|
-| `--all` | `-a` | Add all available components |
-| `--yes` | `-y` | Skip confirmation prompt |
-| `--overwrite` | `-o` | Overwrite existing files |
-| `--path <path>` | `-p` | Custom path (default: `src/components/ui`) |
-
-**Examples:**
-
-```bash
-# Add all components at once
-npx myoperator-ui add --all
-
-# Add all components, skip confirmation
-npx myoperator-ui add --all -y
-
-# Skip confirmation
-npx myoperator-ui add button -y
-
-# Overwrite existing component
-npx myoperator-ui add button --overwrite
-
-# Add to custom directory
-npx myoperator-ui add button -p src/ui
-```
-
-### `update` - Update Components
-
-Safely update installed components to the latest version with diff preview.
-
-**Important:** Always use `@latest` to ensure you get the newest component code:
-
-```bash
-# Update a specific component (recommended)
-npx myoperator-ui@latest update button
-
-# Update multiple components
-npx myoperator-ui@latest update button badge
-
-# Interactive selection (shows installed components)
-npx myoperator-ui@latest update
-
-# Update all installed components
-npx myoperator-ui@latest update --all
-```
-
-**Options:**
-
-| Option | Short | Description |
-|--------|-------|-------------|
-| `--yes` | `-y` | Skip confirmation prompt |
-| `--all` | `-a` | Update all installed components |
-| `--dry-run` | `-d` | Preview changes without modifying files |
-| `--backup` | `-b` | Create backup files before updating |
-| `--path <path>` | `-p` | Custom path (default: `src/components/ui`) |
-
-**Examples:**
-
-```bash
-# Preview what would change (safe - no modifications)
-npx myoperator-ui@latest update button --dry-run
-
-# Preview all component updates
-npx myoperator-ui@latest update --all --dry-run
-
-# Update all with backups
-npx myoperator-ui@latest update --all --backup
-
-# Force update without confirmation
-npx myoperator-ui@latest update button -y
-```
-
-> **Note:** If you see "No changes" but expect updates, make sure you're using `@latest` to get the newest package version. NPX may cache older versions.
-
-**Update Safeguards:**
-- Shows diff of changes before applying
-- `--dry-run` lets you preview without making changes
-- `--backup` creates timestamped backups (e.g., `button.tsx.backup.1700000000`)
-- Only updates components that are already installed
-- Skips components with no changes
-
-### Other Commands
-
-```bash
-# Check CLI version
-npx myoperator-ui --version
-
-# Get help
-npx myoperator-ui --help
-npx myoperator-ui add --help
-npx myoperator-ui update --help
-```
-
-## Available Components
-
-| Component | Description |
-|-----------|-------------|
-| `accordion` | Expandable/collapsible accordion component with single or multiple mode support |
-| `badge` | Status badge with active, failed, disabled, outline, secondary, destructive variants and asChild support |
-| `button` | Customizable button with variants, sizes (including icon-lg), icons, and loading state |
-| `checkbox` | Tri-state checkbox built on Radix UI with label support (checked, unchecked, indeterminate) |
-| `dropdown-menu` | Dropdown menu for displaying actions and options |
-| `input` | Basic input component |
-| `multi-select` | Multi-select dropdown with search, tags, and keyboard navigation |
-| `select` | Single select dropdown component |
-| `select-field` | Select field with label, helper text, and validation states |
-| `switch` | Switch component built on Radix UI for boolean inputs with on/off states |
-| `table` | Composable table with size variants, loading/empty states, sticky columns |
-| `tag` | Tag component for event labels with optional bold label prefix |
-| `text-field` | Text input with label, icons, prefix/suffix, validation states, and character count |
-
-## Configuration
-
-After running `init`, a `components.json` file is created:
-
-```json
-{
-  "$schema": "https://myoperator.com/schema.json",
-  "style": "default",
-  "tailwind": {
-    "config": "tailwind.config.js",
-    "css": "src/App.scss",
-    "baseColor": "slate",
-    "cssVariables": true,
-    "prefix": "tw-"
-  },
-  "aliases": {
-    "components": "@/components",
-    "utils": "@/lib/utils",
-    "ui": "@/components/ui"
-  }
-}
-```
-
-## Tailwind CSS Configuration
-
-The CLI generates a `tailwind.config.js` with:
-
-```javascript
-/** @type {import('tailwindcss').Config} */
-export default {
-  darkMode: ["class"],
-  prefix: "tw-",
-  content: ["./src/components/ui/**/*.{js,ts,jsx,tsx}"],
-  theme: {
-    // ... theme configuration
-  },
-  plugins: [require("tailwindcss-animate")],
-}
-```
-
-**Key Features:**
-- `prefix: "tw-"` - Avoids conflicts with other CSS frameworks
-- Scoped content path - Only scans UI components directory
-
-## Bootstrap Compatibility
-
-myOperator UI automatically detects if your project uses Bootstrap and configures Tailwind CSS to avoid conflicts.
-
-### How it works
-
-When Bootstrap is detected, the CLI uses selective Tailwind imports - importing only theme and utilities, skipping Preflight (Tailwind's CSS reset) which would override Bootstrap's base styles.
-
-### Generated CSS for Bootstrap projects
-
-```css
-/* Selective imports to avoid Preflight conflicts with Bootstrap */
-@layer theme, base, components, utilities;
-@import "tailwindcss/theme.css" layer(theme);
-@import "tailwindcss/utilities.css" layer(utilities);
-
-/* Tell Tailwind to scan component files for utility classes */
-@source "./components/**/*.{js,ts,jsx,tsx}";
-@source "./lib/**/*.{js,ts,jsx,tsx}";
-```
-
-## Tailwind CSS Version Support
-
-### Tailwind CSS v4 (default)
-
-For v4 projects, the CLI generates CSS-based configuration:
-
-```css
-@import "tailwindcss";
-
-@theme {
-  --color-primary: hsl(222.2 47.4% 11.2%);
-  /* ... */
-}
-```
-
-### Tailwind CSS v3
-
-For v3 projects, the CLI generates the traditional configuration with `tailwind.config.js` and CSS variables.
-
-## Requirements
-
-- React 18+
-- Tailwind CSS v3 or v4
-- TypeScript (recommended)
-
-## Dependencies
-
-Components use these packages (installed automatically during `init`):
-
-```bash
-npm install clsx tailwind-merge class-variance-authority @radix-ui/react-slot lucide-react
-```
-
-For Tailwind v3, you'll also need:
-- `tailwindcss-animate`
-
-## PostCSS Configuration
-
-The CLI automatically sets up the correct PostCSS configuration for Tailwind CSS.
-
-### For Tailwind v4
-
-```javascript
-// postcss.config.js
-export default {
-  plugins: {
-    '@tailwindcss/postcss': {},
-  },
-}
-```
-
-### Common Error
-
-If you see this error:
-
-```
-[plugin:vite:css] [postcss] It looks like you're trying to use `tailwindcss` directly as a PostCSS plugin.
-```
-
-**Fix it by:**
-
-1. Installing the new plugin:
-   ```bash
-   npm install -D @tailwindcss/postcss
-   ```
-
-2. Run `npx myoperator-ui init` to automatically create the correct configuration
-
-## Troubleshooting
-
-### Component styles not applying
-
-Make sure you've installed the required dependencies:
-
-```bash
-npm install clsx tailwind-merge class-variance-authority @radix-ui/react-slot lucide-react
-```
-
-### Styles conflict with Bootstrap
-
-If you're seeing Bootstrap styles override your components, make sure:
-
-1. You ran `npx myoperator-ui init` after adding Bootstrap
-2. The CSS file has selective imports (not `@import "tailwindcss"`)
-
-### Version mismatch
-
-To ensure you're using the latest version:
-
-```bash
-npx myoperator-ui@latest init
-```
-
-### Updating components
-
-To get the latest component updates:
-
-```bash
-# Preview changes first
-npx myoperator-ui update --all --dry-run
-
-# Then apply updates
-npx myoperator-ui update --all
-```
-
-## Development Workflow (For Maintainers)
-
-### Safe Component Updates
-
-To ensure changes don't accidentally break other components:
-
-```bash
-cd packages/cli
-
-# 1. Create a snapshot BEFORE making changes
-npm run integrity:snapshot
-
-# 2. Make your changes to a component (e.g., button.tsx)
-
-# 3. Verify only the intended component changed
-node scripts/check-integrity.js verify button
-
-# 4. If check passes, build and publish
-npm run build
-npm publish
-```
-
-### Integrity Check Commands
-
-```bash
-# Create baseline snapshot of all components
-npm run integrity:snapshot
-
-# Verify no unexpected changes
-npm run integrity:verify
-
-# Verify specific component changed (others unchanged)
-node scripts/check-integrity.js verify button
-
-# Verify multiple components changed
-node scripts/check-integrity.js verify button badge
-
-# Check status of a specific component
-node scripts/check-integrity.js diff button
-```
-
-### What the Integrity Check Does
-
-1. **Creates MD5 hashes** of each component file
-2. **Compares current state** against the snapshot
-3. **Fails if unexpected changes** are detected
-4. **Passes if only expected components** changed
-
-Example output when an unexpected change is detected:
-
-```
-Component Status:
-──────────────────────────────────────────────────
-  ✓ badge - unchanged
-  ✓ button - changed (expected)
-  ⚠️  table - CHANGED (unexpected!)
-  ✓ tag - unchanged
-
-❌ INTEGRITY CHECK FAILED
-   Unexpected changes detected in: table
-```
-
-## License
-
-MIT
+# myOperator UI
+
+CLI for adding myOperator UI components to your React project. Works with both standalone projects and projects that use Bootstrap or other CSS frameworks.
+
+## Quick Start
+
+```bash
+# Initialize your project
+npx myoperator-ui init
+
+# Add a component
+npx myoperator-ui add button
+```
+
+## Commands
+
+### `init` - Initialize Project
+
+```bash
+npx myoperator-ui init
+```
+
+This will:
+- Create a `components.json` configuration file
+- Set up the utils file with the `cn` helper
+- Create the components directory
+- Create/update your global CSS (`App.scss`) with Tailwind imports
+- Create/update `postcss.config.js` with the correct Tailwind CSS PostCSS plugin
+- Configure Tailwind with `tw-` prefix by default
+
+### `add` - Add Components
+
+```bash
+# Add a specific component
+npx myoperator-ui add button
+
+# Add multiple components
+npx myoperator-ui add button badge table
+
+# Add all available components at once
+npx myoperator-ui add --all
+
+# Interactive selection (shows all available components)
+npx myoperator-ui add
+```
+
+**Options:**
+
+| Option | Short | Description |
+|--------|-------|-------------|
+| `--all` | `-a` | Add all available components |
+| `--yes` | `-y` | Skip confirmation prompt |
+| `--overwrite` | `-o` | Overwrite existing files |
+| `--path <path>` | `-p` | Custom path (default: `src/components/ui`) |
+
+**Examples:**
+
+```bash
+# Add all components at once
+npx myoperator-ui add --all
+
+# Add all components, skip confirmation
+npx myoperator-ui add --all -y
+
+# Skip confirmation
+npx myoperator-ui add button -y
+
+# Overwrite existing component
+npx myoperator-ui add button --overwrite
+
+# Add to custom directory
+npx myoperator-ui add button -p src/ui
+```
+
+### `update` - Update Components
+
+Safely update installed components to the latest version with diff preview.
+
+**Important:** Always use `@latest` to ensure you get the newest component code:
+
+```bash
+# Update a specific component (recommended)
+npx myoperator-ui@latest update button
+
+# Update multiple components
+npx myoperator-ui@latest update button badge
+
+# Interactive selection (shows installed components)
+npx myoperator-ui@latest update
+
+# Update all installed components
+npx myoperator-ui@latest update --all
+```
+
+**Options:**
+
+| Option | Short | Description |
+|--------|-------|-------------|
+| `--yes` | `-y` | Skip confirmation prompt |
+| `--all` | `-a` | Update all installed components |
+| `--dry-run` | `-d` | Preview changes without modifying files |
+| `--backup` | `-b` | Create backup files before updating |
+| `--path <path>` | `-p` | Custom path (default: `src/components/ui`) |
+
+**Examples:**
+
+```bash
+# Preview what would change (safe - no modifications)
+npx myoperator-ui@latest update button --dry-run
+
+# Preview all component updates
+npx myoperator-ui@latest update --all --dry-run
+
+# Update all with backups
+npx myoperator-ui@latest update --all --backup
+
+# Force update without confirmation
+npx myoperator-ui@latest update button -y
+```
+
+> **Note:** If you see "No changes" but expect updates, make sure you're using `@latest` to get the newest package version. NPX may cache older versions.
+
+**Update Safeguards:**
+- Shows diff of changes before applying
+- `--dry-run` lets you preview without making changes
+- `--backup` creates timestamped backups (e.g., `button.tsx.backup.1700000000`)
+- Only updates components that are already installed
+- Skips components with no changes
+
+### Other Commands
+
+```bash
+# Check CLI version
+npx myoperator-ui --version
+
+# Get help
+npx myoperator-ui --help
+npx myoperator-ui add --help
+npx myoperator-ui update --help
+```
+
+## Available Components
+
+| Component | Description |
+|-----------|-------------|
+| `accordion` | Expandable/collapsible accordion component with single or multiple mode support |
+| `badge` | Status badge with active, failed, disabled, outline, secondary, destructive variants and asChild support |
+| `button` | Customizable button with variants, sizes (including icon-lg), icons, and loading state |
+| `checkbox` | Tri-state checkbox built on Radix UI with label support (checked, unchecked, indeterminate) |
+| `dropdown-menu` | Dropdown menu for displaying actions and options |
+| `input` | Basic input component |
+| `multi-select` | Multi-select dropdown with search, tags, and keyboard navigation |
+| `select` | Single select dropdown component |
+| `select-field` | Select field with label, helper text, and validation states |
+| `switch` | Switch component built on Radix UI for boolean inputs with on/off states |
+| `table` | Composable table with size variants, loading/empty states, sticky columns |
+| `tag` | Tag component for event labels with optional bold label prefix |
+| `text-field` | Text input with label, icons, prefix/suffix, validation states, and character count |
+
+## Configuration
+
+After running `init`, a `components.json` file is created:
+
+```json
+{
+  "$schema": "https://myoperator.com/schema.json",
+  "style": "default",
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/App.scss",
+    "baseColor": "slate",
+    "cssVariables": true,
+    "prefix": "tw-"
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui"
+  }
+}
+```
+
+## Tailwind CSS Configuration
+
+The CLI generates a `tailwind.config.js` with:
+
+```javascript
+/** @type {import('tailwindcss').Config} */
+export default {
+  darkMode: ["class"],
+  prefix: "tw-",
+  content: ["./src/components/ui/**/*.{js,ts,jsx,tsx}"],
+  theme: {
+    // ... theme configuration
+  },
+  plugins: [require("tailwindcss-animate")],
+}
+```
+
+**Key Features:**
+- `prefix: "tw-"` - Avoids conflicts with other CSS frameworks
+- Scoped content path - Only scans UI components directory
+
+## Bootstrap Compatibility
+
+myOperator UI automatically detects if your project uses Bootstrap and configures Tailwind CSS to avoid conflicts.
+
+### How it works
+
+When Bootstrap is detected, the CLI uses selective Tailwind imports - importing only theme and utilities, skipping Preflight (Tailwind's CSS reset) which would override Bootstrap's base styles.
+
+### Generated CSS for Bootstrap projects
+
+```css
+/* Selective imports to avoid Preflight conflicts with Bootstrap */
+@layer theme, base, components, utilities;
+@import "tailwindcss/theme.css" layer(theme);
+@import "tailwindcss/utilities.css" layer(utilities);
+
+/* Tell Tailwind to scan component files for utility classes */
+@source "./components/**/*.{js,ts,jsx,tsx}";
+@source "./lib/**/*.{js,ts,jsx,tsx}";
+```
+
+## Tailwind CSS Version Support
+
+### Tailwind CSS v4 (default)
+
+For v4 projects, the CLI generates CSS-based configuration:
+
+```css
+@import "tailwindcss";
+
+@theme {
+  --color-primary: hsl(222.2 47.4% 11.2%);
+  /* ... */
+}
+```
+
+### Tailwind CSS v3
+
+For v3 projects, the CLI generates the traditional configuration with `tailwind.config.js` and CSS variables.
+
+## Requirements
+
+- React 18+
+- Tailwind CSS v3 or v4
+- TypeScript (recommended)
+
+## Dependencies
+
+Components use these packages (installed automatically during `init`):
+
+```bash
+npm install clsx tailwind-merge class-variance-authority @radix-ui/react-slot lucide-react
+```
+
+For Tailwind v3, you'll also need:
+- `tailwindcss-animate`
+
+## PostCSS Configuration
+
+The CLI automatically sets up the correct PostCSS configuration for Tailwind CSS.
+
+### For Tailwind v4
+
+```javascript
+// postcss.config.js
+export default {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+}
+```
+
+### Common Error
+
+If you see this error:
+
+```
+[plugin:vite:css] [postcss] It looks like you're trying to use `tailwindcss` directly as a PostCSS plugin.
+```
+
+**Fix it by:**
+
+1. Installing the new plugin:
+   ```bash
+   npm install -D @tailwindcss/postcss
+   ```
+
+2. Run `npx myoperator-ui init` to automatically create the correct configuration
+
+## Troubleshooting
+
+### Component styles not applying
+
+Make sure you've installed the required dependencies:
+
+```bash
+npm install clsx tailwind-merge class-variance-authority @radix-ui/react-slot lucide-react
+```
+
+### Styles conflict with Bootstrap
+
+If you're seeing Bootstrap styles override your components, make sure:
+
+1. You ran `npx myoperator-ui init` after adding Bootstrap
+2. The CSS file has selective imports (not `@import "tailwindcss"`)
+
+### Version mismatch
+
+To ensure you're using the latest version:
+
+```bash
+npx myoperator-ui@latest init
+```
+
+### Updating components
+
+To get the latest component updates:
+
+```bash
+# Preview changes first
+npx myoperator-ui update --all --dry-run
+
+# Then apply updates
+npx myoperator-ui update --all
+```
+
+## Development Workflow (For Maintainers)
+
+### Safe Component Updates
+
+To ensure changes don't accidentally break other components:
+
+```bash
+cd packages/cli
+
+# 1. Create a snapshot BEFORE making changes
+npm run integrity:snapshot
+
+# 2. Make your changes to a component (e.g., button.tsx)
+
+# 3. Verify only the intended component changed
+node scripts/check-integrity.js verify button
+
+# 4. If check passes, build and publish
+npm run build
+npm publish
+```
+
+### Integrity Check Commands
+
+```bash
+# Create baseline snapshot of all components
+npm run integrity:snapshot
+
+# Verify no unexpected changes
+npm run integrity:verify
+
+# Verify specific component changed (others unchanged)
+node scripts/check-integrity.js verify button
+
+# Verify multiple components changed
+node scripts/check-integrity.js verify button badge
+
+# Check status of a specific component
+node scripts/check-integrity.js diff button
+```
+
+### What the Integrity Check Does
+
+1. **Creates MD5 hashes** of each component file
+2. **Compares current state** against the snapshot
+3. **Fails if unexpected changes** are detected
+4. **Passes if only expected components** changed
+
+Example output when an unexpected change is detected:
+
+```
+Component Status:
+──────────────────────────────────────────────────
+  ✓ badge - unchanged
+  ✓ button - changed (expected)
+  ⚠️  table - CHANGED (unexpected!)
+  ✓ tag - unchanged
+
+❌ INTEGRITY CHECK FAILED
+   Unexpected changes detected in: table
+```
+
+## License
+
+MIT

package/dist/index.js

@@ -2194,6 +2194,172 @@ export const ReadableField = React.forwardRef<HTMLDivElement, ReadableFieldProps
 );
 
 ReadableField.displayName = "ReadableField";
+`, prefix)
+        }
+      ]
+    },
+    "textarea": {
+      name: "textarea",
+      description: "A multi-line text area with label, helper text, error state, and character count support",
+      category: "form",
+      dependencies: [
+        "class-variance-authority",
+        "clsx",
+        "tailwind-merge"
+      ],
+      files: [
+        {
+          name: "textarea.tsx",
+          content: prefixTailwindClasses(`import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "../../lib/utils";
+
+const textAreaVariants = cva(
+  "w-full rounded bg-semantic-bg-primary px-4 py-3 text-base text-semantic-text-primary outline-none transition-all resize-y placeholder:text-semantic-text-placeholder disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-[var(--color-neutral-50)]",
+  {
+    variants: {
+      state: {
+        default:
+          "border border-semantic-border-input focus:outline-none focus:border-semantic-border-input-focus/50 focus:shadow-[0_0_0_1px_rgba(43,188,202,0.15)]",
+        error:
+          "border border-semantic-error-primary/40 focus:outline-none focus:border-semantic-error-primary/60 focus:shadow-[0_0_0_1px_rgba(240,68,56,0.1)]",
+      },
+    },
+    defaultVariants: {
+      state: "default",
+    },
+  }
+);
+
+export interface TextAreaProps
+  extends React.ComponentProps<"textarea">,
+    VariantProps<typeof textAreaVariants> {
+  /** Label text displayed above the textarea */
+  label?: string;
+  /** Shows red asterisk next to label when true */
+  required?: boolean;
+  /** Helper text displayed below the textarea */
+  helperText?: string;
+  /** Error message - shows error state with red styling */
+  error?: string;
+  /** Shows character count when maxLength is set */
+  showCount?: boolean;
+  /** Additional class for the wrapper container */
+  wrapperClassName?: string;
+  /** Additional class for the label */
+  labelClassName?: string;
+}
+
+const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(
+  (
+    {
+      className,
+      wrapperClassName,
+      labelClassName,
+      state,
+      label,
+      required,
+      helperText,
+      error,
+      showCount,
+      maxLength,
+      value,
+      defaultValue,
+      onChange,
+      disabled,
+      id,
+      rows = 4,
+      ...props
+    },
+    ref
+  ) => {
+    const [internalValue, setInternalValue] = React.useState(
+      defaultValue ?? ""
+    );
+
+    const isControlled = value !== undefined;
+    const currentValue = isControlled ? value : internalValue;
+    const derivedState = error ? "error" : (state ?? "default");
+
+    const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+      if (!isControlled) setInternalValue(e.target.value);
+      onChange?.(e);
+    };
+
+    const generatedId = React.useId();
+    const textAreaId = id || generatedId;
+    const helperId = \`\${textAreaId}-helper\`;
+    const errorId = \`\${textAreaId}-error\`;
+    const ariaDescribedBy = error ? errorId : helperText ? helperId : undefined;
+    const charCount = String(currentValue).length;
+
+    return (
+      <div className={cn("flex flex-col gap-1.5", wrapperClassName)}>
+        {label && (
+          <label
+            htmlFor={textAreaId}
+            className={cn(
+              "text-sm font-semibold text-semantic-text-secondary tracking-[0.014px]",
+              labelClassName
+            )}
+          >
+            {label}
+            {required && (
+              <span className="text-semantic-error-primary ml-0.5">*</span>
+            )}
+          </label>
+        )}
+
+        <textarea
+          ref={ref}
+          id={textAreaId}
+          rows={rows}
+          className={cn(textAreaVariants({ state: derivedState, className }))}
+          disabled={disabled}
+          maxLength={maxLength}
+          value={isControlled ? value : undefined}
+          defaultValue={!isControlled ? defaultValue : undefined}
+          onChange={handleChange}
+          aria-invalid={!!error}
+          aria-describedby={ariaDescribedBy}
+          {...props}
+        />
+
+        {(error || helperText || (showCount && maxLength)) && (
+          <div className="flex justify-between items-start gap-2">
+            {error ? (
+              <span id={errorId} className="text-xs text-semantic-error-primary">
+                {error}
+              </span>
+            ) : helperText ? (
+              <span id={helperId} className="text-xs text-semantic-text-muted">
+                {helperText}
+              </span>
+            ) : (
+              <span />
+            )}
+            {showCount && maxLength && (
+              <span
+                className={cn(
+                  "text-xs",
+                  charCount > maxLength
+                    ? "text-semantic-error-primary"
+                    : "text-semantic-text-muted"
+                )}
+              >
+                {charCount}/{maxLength}
+              </span>
+            )}
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+TextArea.displayName = "TextArea";
+
+export { TextArea, textAreaVariants };
 `, prefix)
         }
       ]
@@ -16465,6 +16631,159 @@ export interface WalletTopupProps {
           name: "index.ts",
           content: prefixTailwindClasses(`export { WalletTopup } from "./wallet-topup";
 export type { WalletTopupProps, AmountOption } from "./types";
+`, prefix)
+        }
+      ]
+    },
+    "fallback-prompts-panel": {
+      name: "fallback-prompts-panel",
+      description: "An accordion card for configuring IVR bot fallback prompt messages (agent busy and no extension found)",
+      category: "custom",
+      dependencies: [
+        "clsx",
+        "tailwind-merge",
+        "lucide-react"
+      ],
+      internalDependencies: [
+        "accordion",
+        "textarea"
+      ],
+      isMultiFile: true,
+      directory: "fallback-prompts-panel",
+      mainFile: "fallback-prompts-panel.tsx",
+      files: [
+        {
+          name: "fallback-prompts-panel.tsx",
+          content: prefixTailwindClasses(`import * as React from "react";
+import { Info } from "lucide-react";
+import { cn } from "../../../lib/utils";
+import { TextArea } from "../textarea";
+import {
+  Accordion,
+  AccordionItem,
+  AccordionTrigger,
+  AccordionContent,
+} from "../accordion";
+import type { FallbackPromptsBaseProps } from "./types";
+
+export interface FallbackPromptsPanelProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange">,
+    FallbackPromptsBaseProps {}
+
+const AGENT_BUSY_PLACEHOLDER =
+  "Executives are busy at the moment, we will connect you soon.";
+const NO_EXTENSION_PLACEHOLDER =
+  "Sorry, the requested extension is currently unavailable. Let me help you directly.";
+
+const FallbackPromptsPanel = React.forwardRef<
+  HTMLDivElement,
+  FallbackPromptsPanelProps
+>(
+  (
+    {
+      data,
+      onChange,
+      tooltipContent = "Configure the messages your bot speaks when it cannot reach an agent or extension.",
+      defaultOpen = true,
+      disabled,
+      className,
+      ...rest
+    },
+    ref
+  ) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "bg-semantic-bg-primary border border-semantic-border-layout rounded-lg overflow-hidden",
+          className
+        )}
+        {...rest}
+      >
+        <Accordion
+          type="single"
+          defaultValue={defaultOpen ? ["fallback-prompts"] : []}
+        >
+          <AccordionItem value="fallback-prompts">
+            <AccordionTrigger className="px-4 py-4 border-b border-semantic-border-layout hover:no-underline hover:bg-transparent sm:px-6 sm:py-5">
+              <div className="flex items-center gap-1.5">
+                <span className="text-base font-semibold text-semantic-text-primary">
+                  Fallback Prompts
+                </span>
+                <span
+                  title={tooltipContent}
+                  className="flex items-center text-semantic-text-muted cursor-default"
+                  aria-label={tooltipContent}
+                >
+                  <Info className="size-3.5" />
+                </span>
+              </div>
+            </AccordionTrigger>
+
+            <AccordionContent>
+              <div className="flex flex-col gap-4 px-4 pt-4 sm:gap-6 sm:px-6 sm:pt-6">
+                <TextArea
+                  label="Agent Busy Prompt"
+                  placeholder={AGENT_BUSY_PLACEHOLDER}
+                  value={data.agentBusyPrompt ?? ""}
+                  onChange={(e) =>
+                    onChange({ agentBusyPrompt: e.target.value })
+                  }
+                  rows={3}
+                  disabled={disabled}
+                />
+
+                <TextArea
+                  label="No Extension Found"
+                  placeholder={NO_EXTENSION_PLACEHOLDER}
+                  value={data.noExtensionFound ?? ""}
+                  onChange={(e) =>
+                    onChange({ noExtensionFound: e.target.value })
+                  }
+                  rows={3}
+                  disabled={disabled}
+                />
+              </div>
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      </div>
+    );
+  }
+);
+FallbackPromptsPanel.displayName = "FallbackPromptsPanel";
+
+export { FallbackPromptsPanel };
+`, prefix)
+        },
+        {
+          name: "types.ts",
+          content: prefixTailwindClasses(`export interface FallbackPromptsData {
+  /** Text spoken when all agents are busy */
+  agentBusyPrompt: string;
+  /** Text spoken when a dialed extension is not found */
+  noExtensionFound: string;
+}
+
+export interface FallbackPromptsBaseProps {
+  /** Current prompt values */
+  data: Partial<FallbackPromptsData>;
+  /** Callback fired when any prompt value changes */
+  onChange: (patch: Partial<FallbackPromptsData>) => void;
+  /** Tooltip content shown next to the title */
+  tooltipContent?: string;
+  /** Opens the panel expanded by default */
+  defaultOpen?: boolean;
+  /** Disables all textareas */
+  disabled?: boolean;
+}
+`, prefix)
+        },
+        {
+          name: "index.ts",
+          content: prefixTailwindClasses(`export { FallbackPromptsPanel } from "./fallback-prompts-panel";
+export type { FallbackPromptsPanelProps } from "./fallback-prompts-panel";
+export type { FallbackPromptsData, FallbackPromptsBaseProps } from "./types";
 `, prefix)
         }
       ]

package/package.json

@@ -1,67 +1,67 @@
-{
-  "name": "myoperator-ui",
-  "version": "0.0.209",
-  "description": "CLI for adding myOperator UI components to your project",
-  "type": "module",
-  "exports": "./dist/index.js",
-  "bin": {
-    "myoperator-ui": "./dist/index.js"
-  },
-  "files": [
-    "dist"
-  ],
-  "scripts": {
-    "generate-registry": "node scripts/generate-registry.js",
-    "validate-registry": "node scripts/validate-registry.js",
-    "validate:prefix": "node scripts/validate-prefix-output.js",
-    "validate:coverage": "node scripts/validate-prefix-coverage.js",
-    "validate:bootstrap": "node scripts/validate-bootstrap-resets.js",
-    "validate:multifile": "node scripts/validate-multifile-components.js",
-    "verify-build": "node scripts/verify-build.js",
-    "integrity:snapshot": "node scripts/check-integrity.js snapshot",
-    "integrity:verify": "node scripts/check-integrity.js verify",
-    "validate-types": "node scripts/validate-types.js",
-    "validate:source-types": "node scripts/validate-source-types.js",
-    "validate:imports": "node scripts/validate-imports.js",
-    "validate:prefix-sync": "node scripts/sync-prefix-utils.js --check",
-    "build": "npm run validate:source-types && npm run validate:imports && npm run generate-registry && npm run validate:prefix && npm run validate:coverage && npm run validate:bootstrap && npm run validate:multifile && npm run validate:prefix-sync && tsup src/index.ts --format esm --dts && npm run verify-build",
-    "build:safe": "npm run integrity:snapshot && npm run build",
-    "dev": "tsup src/index.ts --format esm --watch",
-    "typecheck": "tsc --noEmit",
-    "test": "vitest run",
-    "test:e2e": "vitest run src/__tests__/e2e.test.ts --testTimeout 180000",
-    "test:e2e:smoke": "E2E_SMOKE=1 vitest run src/__tests__/e2e.test.ts --testTimeout 60000",
-    "test:watch": "vitest",
-    "prepublishOnly": "node scripts/check-publish-allowed.js && npm run validate-types && npm run build && npm run validate-registry && npm run test:e2e"
-  },
-  "dependencies": {
-    "chalk": "^5.3.0",
-    "commander": "^12.1.0",
-    "fs-extra": "^11.2.0",
-    "ora": "^8.0.1",
-    "prompts": "^2.4.2"
-  },
-  "devDependencies": {
-    "@types/fs-extra": "^11.0.4",
-    "@types/js-yaml": "^4.0.9",
-    "@types/node": "^20.11.0",
-    "@types/prompts": "^2.4.9",
-    "js-yaml": "^4.1.0",
-    "tsup": "^8.0.1",
-    "typescript": "^5.3.3",
-    "vitest": "^1.0.0"
-  },
-  "keywords": [
-    "myoperator",
-    "ui",
-    "components",
-    "cli",
-    "react"
-  ],
-  "author": "",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/Ankish8/storybook-npm.git"
-  }
-}
+{
+  "name": "myoperator-ui",
+  "version": "0.0.210-beta.0",
+  "description": "CLI for adding myOperator UI components to your project",
+  "type": "module",
+  "exports": "./dist/index.js",
+  "bin": {
+    "myoperator-ui": "./dist/index.js"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "generate-registry": "node scripts/generate-registry.js",
+    "validate-registry": "node scripts/validate-registry.js",
+    "validate:prefix": "node scripts/validate-prefix-output.js",
+    "validate:coverage": "node scripts/validate-prefix-coverage.js",
+    "validate:bootstrap": "node scripts/validate-bootstrap-resets.js",
+    "validate:multifile": "node scripts/validate-multifile-components.js",
+    "verify-build": "node scripts/verify-build.js",
+    "integrity:snapshot": "node scripts/check-integrity.js snapshot",
+    "integrity:verify": "node scripts/check-integrity.js verify",
+    "validate-types": "node scripts/validate-types.js",
+    "validate:source-types": "node scripts/validate-source-types.js",
+    "validate:imports": "node scripts/validate-imports.js",
+    "validate:prefix-sync": "node scripts/sync-prefix-utils.js --check",
+    "build": "npm run validate:source-types && npm run validate:imports && npm run generate-registry && npm run validate:prefix && npm run validate:coverage && npm run validate:bootstrap && npm run validate:multifile && npm run validate:prefix-sync && tsup src/index.ts --format esm --dts && npm run verify-build",
+    "build:safe": "npm run integrity:snapshot && npm run build",
+    "dev": "tsup src/index.ts --format esm --watch",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:e2e": "vitest run src/__tests__/e2e.test.ts --testTimeout 180000",
+    "test:e2e:smoke": "E2E_SMOKE=1 vitest run src/__tests__/e2e.test.ts --testTimeout 60000",
+    "test:watch": "vitest",
+    "prepublishOnly": "node scripts/check-publish-allowed.js && npm run validate-types && npm run build && npm run validate-registry && npm run test:e2e"
+  },
+  "dependencies": {
+    "chalk": "^5.3.0",
+    "commander": "^12.1.0",
+    "fs-extra": "^11.2.0",
+    "ora": "^8.0.1",
+    "prompts": "^2.4.2"
+  },
+  "devDependencies": {
+    "@types/fs-extra": "^11.0.4",
+    "@types/js-yaml": "^4.0.9",
+    "@types/node": "^20.11.0",
+    "@types/prompts": "^2.4.9",
+    "js-yaml": "^4.1.0",
+    "tsup": "^8.0.1",
+    "typescript": "^5.3.3",
+    "vitest": "^1.0.0"
+  },
+  "keywords": [
+    "myoperator",
+    "ui",
+    "components",
+    "cli",
+    "react"
+  ],
+  "author": "",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Ankish8/storybook-npm.git"
+  }
+}