myoperator-ui 0.0.210-beta.0 → 0.0.210-beta.1

package/dist/index.js

@@ -1661,6 +1661,172 @@ const Switch = React.forwardRef<
 Switch.displayName = "Switch";
 
 export { Switch, switchVariants };
+`, prefix)
+        }
+      ]
+    },
+    "textarea": {
+      name: "textarea",
+      description: "A multi-line text input 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)
         }
       ]
@@ -2194,172 +2360,6 @@ 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)
         }
       ]
@@ -16637,7 +16637,7 @@ export type { WalletTopupProps, AmountOption } from "./types";
     },
     "fallback-prompts-panel": {
       name: "fallback-prompts-panel",
-      description: "An accordion card for configuring IVR bot fallback prompt messages (agent busy and no extension found)",
+      description: "An accordion card for configuring IVR bot fallback prompt messages (agent busy, no extension found)",
       category: "custom",
       dependencies: [
         "clsx",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "myoperator-ui",
-  "version": "0.0.210-beta.0",
+  "version": "0.0.210-beta.1",
   "description": "CLI for adding myOperator UI components to your project",
   "type": "module",
   "exports": "./dist/index.js",