myoperator-ui 0.0.95 → 0.0.97

package/dist/index.js

@@ -289,9 +289,9 @@ const buttonVariants = cva(
           "border border-dashed border-[#D5D7DA] bg-transparent text-[#717680] hover:border-[#343E55] hover:text-[#343E55] hover:bg-[#FAFAFA]",
       },
       size: {
-        default: "py-2.5 px-4 [&_svg]:size-4",
-        sm: "py-2 px-3 text-xs [&_svg]:size-3.5",
-        lg: "py-3 px-6 [&_svg]:size-5",
+        default: "min-w-20 py-2.5 px-4 [&_svg]:size-4",
+        sm: "min-w-16 py-2 px-3 text-xs [&_svg]:size-3.5",
+        lg: "min-w-24 py-3 px-6 [&_svg]:size-5",
         icon: "h-8 w-8 rounded-md",
         "icon-sm": "h-7 w-7 rounded-md",
         "icon-lg": "h-10 w-10 rounded-md",
@@ -671,7 +671,7 @@ const Typography = React.forwardRef<HTMLElement, TypographyProps>(
     ref
   ) => {
     const key: Key = \`\${kind}-\${variant}\`;
-    const Tag = tag || mapTagName[key];
+    const Tag = (tag || mapTagName[key]) as React.ElementType;
 
     const classes = cn(
       "m-0", // Reset margin
@@ -682,11 +682,13 @@ const Typography = React.forwardRef<HTMLElement, TypographyProps>(
       className
     );
 
+    const tagName = tag || mapTagName[key];
+
     return (
       <Tag
-        ref={ref as React.Ref<HTMLElement>}
+        ref={ref}
         className={classes}
-        htmlFor={Tag === "label" ? htmlFor : undefined}
+        htmlFor={tagName === "label" ? htmlFor : undefined}
         {...props}
       >
         {children}
@@ -2699,6 +2701,169 @@ export {
   TableToggle,
   tableVariants,
 };
+`, prefix)
+        }
+      ]
+    },
+    "dialog": {
+      name: "dialog",
+      description: "A modal dialog component built on Radix UI Dialog with size variants and animations",
+      dependencies: [
+        "@radix-ui/react-dialog",
+        "class-variance-authority",
+        "clsx",
+        "tailwind-merge",
+        "lucide-react"
+      ],
+      files: [
+        {
+          name: "dialog.tsx",
+          content: prefixTailwindClasses(`import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "../../lib/utils";
+
+const Dialog = DialogPrimitive.Root;
+
+const DialogTrigger = DialogPrimitive.Trigger;
+
+const DialogPortal = DialogPrimitive.Portal;
+
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+  />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const dialogContentVariants = cva(
+  "fixed left-[50%] top-[50%] z-50 grid translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-lg",
+  {
+    variants: {
+      size: {
+        sm: "w-full max-w-sm",
+        default: "w-full max-w-lg",
+        lg: "w-full max-w-2xl",
+        xl: "w-full max-w-4xl",
+        full: "w-[calc(100%-2rem)] h-[calc(100%-2rem)] max-w-none",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+    },
+  }
+);
+
+export interface DialogContentProps
+  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>,
+    VariantProps<typeof dialogContentVariants> {
+  /** Hide the default close button in the top-right corner */
+  hideCloseButton?: boolean;
+}
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  DialogContentProps
+>(({ className, children, size, hideCloseButton = false, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(dialogContentVariants({ size, className }))}
+      {...props}
+    >
+      {children}
+      {!hideCloseButton && (
+        <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+          <X className="h-4 w-4" />
+          <span className="sr-only">Close</span>
+        </DialogPrimitive.Close>
+      )}
+    </DialogPrimitive.Content>
+  </DialogPortal>
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-1.5 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+);
+DialogHeader.displayName = "DialogHeader";
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+);
+DialogFooter.displayName = "DialogFooter";
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight text-foreground",
+      className
+    )}
+    {...props}
+  />
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogClose,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+  dialogContentVariants,
+};
 `, prefix)
         }
       ]
@@ -2977,6 +3142,331 @@ export {
   TooltipArrow,
   TooltipProvider,
 };
+`, prefix)
+        }
+      ]
+    },
+    "delete-confirmation-modal": {
+      name: "delete-confirmation-modal",
+      description: "A confirmation modal requiring text input to confirm deletion",
+      dependencies: [
+        "clsx",
+        "tailwind-merge"
+      ],
+      files: [
+        {
+          name: "delete-confirmation-modal.tsx",
+          content: prefixTailwindClasses(`import * as React from "react";
+
+import { cn } from "../../lib/utils";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+  DialogTrigger,
+} from "./dialog";
+import { Button } from "./button";
+import { Input } from "./input";
+
+/**
+ * Props for the DeleteConfirmationModal component
+ */
+export interface DeleteConfirmationModalProps {
+  /** Controls modal visibility (controlled mode) */
+  open?: boolean;
+  /** Callback when open state changes */
+  onOpenChange?: (open: boolean) => void;
+  /** The name of the item being deleted (shown in title) */
+  itemName?: string;
+  /** Custom title (overrides default) */
+  title?: React.ReactNode;
+  /** Additional description text */
+  description?: React.ReactNode;
+  /** Text user must type to confirm (default: "DELETE") */
+  confirmText?: string;
+  /** Called when user confirms deletion */
+  onConfirm?: () => void;
+  /** Called when user cancels */
+  onCancel?: () => void;
+  /** Loading state for delete button */
+  loading?: boolean;
+  /** Text for delete button (default: "Delete") */
+  deleteButtonText?: string;
+  /** Text for cancel button (default: "Cancel") */
+  cancelButtonText?: string;
+  /** Trigger element for uncontrolled usage */
+  trigger?: React.ReactNode;
+  /** Additional className for the dialog content */
+  className?: string;
+}
+
+/**
+ * A confirmation modal that requires the user to type a specific text to confirm deletion.
+ *
+ * @example
+ * \`\`\`tsx
+ * // Controlled usage
+ * <DeleteConfirmationModal
+ *   open={isOpen}
+ *   onOpenChange={setIsOpen}
+ *   itemName="webhook"
+ *   onConfirm={handleDelete}
+ * />
+ *
+ * // Uncontrolled with trigger
+ * <DeleteConfirmationModal
+ *   trigger={<Button variant="destructive">Delete</Button>}
+ *   itemName="user"
+ *   onConfirm={handleDelete}
+ * />
+ * \`\`\`
+ */
+const DeleteConfirmationModal = React.forwardRef<
+  HTMLDivElement,
+  DeleteConfirmationModalProps
+>(
+  (
+    {
+      open,
+      onOpenChange,
+      itemName = "item",
+      title,
+      description,
+      confirmText = "DELETE",
+      onConfirm,
+      onCancel,
+      loading = false,
+      deleteButtonText = "Delete",
+      cancelButtonText = "Cancel",
+      trigger,
+      className,
+    },
+    ref
+  ) => {
+    const [inputValue, setInputValue] = React.useState("");
+    const isConfirmEnabled = inputValue === confirmText;
+
+    // Reset input when modal closes
+    React.useEffect(() => {
+      if (!open) {
+        setInputValue("");
+      }
+    }, [open]);
+
+    const handleConfirm = () => {
+      if (isConfirmEnabled) {
+        onConfirm?.();
+      }
+    };
+
+    const handleCancel = () => {
+      onCancel?.();
+      onOpenChange?.(false);
+    };
+
+    const handleOpenChange = (newOpen: boolean) => {
+      if (!newOpen) {
+        setInputValue("");
+      }
+      onOpenChange?.(newOpen);
+    };
+
+    const defaultTitle = \`Are you sure you want to delete this \${itemName}?\`;
+
+    return (
+      <Dialog open={open} onOpenChange={handleOpenChange}>
+        {trigger && <DialogTrigger asChild>{trigger}</DialogTrigger>}
+        <DialogContent ref={ref} size="sm" className={cn(className)}>
+          <DialogHeader>
+            <DialogTitle>{title || defaultTitle}</DialogTitle>
+            {description && (
+              <DialogDescription>{description}</DialogDescription>
+            )}
+          </DialogHeader>
+          <div className="grid gap-2 py-4">
+            <label
+              htmlFor="delete-confirmation-input"
+              className="text-sm text-muted-foreground"
+            >
+              Enter "{confirmText}" in uppercase to confirm
+            </label>
+            <Input
+              id="delete-confirmation-input"
+              value={inputValue}
+              onChange={(e) => setInputValue(e.target.value)}
+              placeholder={confirmText}
+              autoComplete="off"
+              autoFocus
+            />
+          </div>
+          <DialogFooter className="gap-2 sm:gap-0">
+            <Button variant="outline" onClick={handleCancel} disabled={loading}>
+              {cancelButtonText}
+            </Button>
+            <Button
+              variant="destructive"
+              onClick={handleConfirm}
+              disabled={!isConfirmEnabled || loading}
+              loading={loading}
+            >
+              {deleteButtonText}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    );
+  }
+);
+DeleteConfirmationModal.displayName = "DeleteConfirmationModal";
+
+export { DeleteConfirmationModal };
+`, prefix)
+        }
+      ]
+    },
+    "confirmation-modal": {
+      name: "confirmation-modal",
+      description: "A simple confirmation modal for yes/no decisions",
+      dependencies: [
+        "clsx",
+        "tailwind-merge"
+      ],
+      files: [
+        {
+          name: "confirmation-modal.tsx",
+          content: prefixTailwindClasses(`import * as React from "react";
+
+import { cn } from "../../lib/utils";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+  DialogTrigger,
+} from "./dialog";
+import { Button } from "./button";
+
+/**
+ * Props for the ConfirmationModal component
+ */
+export interface ConfirmationModalProps {
+  /** Controls modal visibility (controlled mode) */
+  open?: boolean;
+  /** Callback when open state changes */
+  onOpenChange?: (open: boolean) => void;
+  /** Modal title */
+  title: React.ReactNode;
+  /** Modal description/message */
+  description?: React.ReactNode;
+  /** Visual style of confirm button */
+  variant?: "default" | "destructive";
+  /** Called when user confirms */
+  onConfirm?: () => void;
+  /** Called when user cancels */
+  onCancel?: () => void;
+  /** Loading state for confirm button */
+  loading?: boolean;
+  /** Text for confirm button (default: "Yes") */
+  confirmButtonText?: string;
+  /** Text for cancel button (default: "Cancel") */
+  cancelButtonText?: string;
+  /** Trigger element for uncontrolled usage */
+  trigger?: React.ReactNode;
+  /** Additional className for the dialog content */
+  className?: string;
+}
+
+/**
+ * A simple confirmation modal for yes/no decisions.
+ *
+ * @example
+ * \`\`\`tsx
+ * // Controlled usage
+ * <ConfirmationModal
+ *   open={isOpen}
+ *   onOpenChange={setIsOpen}
+ *   title="Disable Webhook"
+ *   description="Are you sure you want to disable this webhook?"
+ *   onConfirm={handleDisable}
+ * />
+ *
+ * // Destructive variant
+ * <ConfirmationModal
+ *   open={isOpen}
+ *   onOpenChange={setIsOpen}
+ *   title="Archive Project"
+ *   variant="destructive"
+ *   confirmButtonText="Archive"
+ *   onConfirm={handleArchive}
+ * />
+ * \`\`\`
+ */
+const ConfirmationModal = React.forwardRef<
+  HTMLDivElement,
+  ConfirmationModalProps
+>(
+  (
+    {
+      open,
+      onOpenChange,
+      title,
+      description,
+      variant = "default",
+      onConfirm,
+      onCancel,
+      loading = false,
+      confirmButtonText = "Yes",
+      cancelButtonText = "Cancel",
+      trigger,
+      className,
+    },
+    ref
+  ) => {
+    const handleConfirm = () => {
+      onConfirm?.();
+    };
+
+    const handleCancel = () => {
+      onCancel?.();
+      onOpenChange?.(false);
+    };
+
+    return (
+      <Dialog open={open} onOpenChange={onOpenChange}>
+        {trigger && <DialogTrigger asChild>{trigger}</DialogTrigger>}
+        <DialogContent ref={ref} size="sm" className={cn(className)}>
+          <DialogHeader>
+            <DialogTitle>{title}</DialogTitle>
+            {description && (
+              <DialogDescription>{description}</DialogDescription>
+            )}
+          </DialogHeader>
+          <DialogFooter className="gap-2 sm:gap-0">
+            <Button variant="outline" onClick={handleCancel} disabled={loading}>
+              {cancelButtonText}
+            </Button>
+            <Button
+              variant={variant === "destructive" ? "destructive" : "default"}
+              onClick={handleConfirm}
+              disabled={loading}
+              loading={loading}
+            >
+              {confirmButtonText}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    );
+  }
+);
+ConfirmationModal.displayName = "ConfirmationModal";
+
+export { ConfirmationModal };
 `, prefix)
         }
       ]
@@ -3127,6 +3617,222 @@ const TagGroup = ({
 TagGroup.displayName = "TagGroup";
 
 export { Tag, TagGroup, tagVariants };
+`, prefix)
+        }
+      ]
+    },
+    "alert": {
+      name: "alert",
+      description: "A dismissible alert component for notifications, errors, warnings, and success messages with icons, actions, and controlled visibility",
+      dependencies: [
+        "class-variance-authority",
+        "clsx",
+        "tailwind-merge",
+        "lucide-react"
+      ],
+      files: [
+        {
+          name: "alert.tsx",
+          content: prefixTailwindClasses(`import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { CheckCircle2, XCircle, AlertTriangle, Info, X } from "lucide-react";
+
+import { cn } from "../../lib/utils";
+
+/**
+ * Alert variants for different notification types.
+ * Colors are hardcoded for Bootstrap compatibility.
+ */
+const alertVariants = cva(
+  "relative w-full rounded border p-4 text-sm text-[#181D27] [&>svg~*]:pl-8 [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-[#F5F5F5] border-[#E9EAEB] [&>svg]:text-[#181D27]",
+        success: "bg-[#ECFDF3] border-[#17B26A]/20 [&>svg]:text-[#17B26A]",
+        error: "bg-[#FEF3F2] border-[#F04438]/20 [&>svg]:text-[#F04438]",
+        destructive: "bg-[#FEF3F2] border-[#F04438]/20 [&>svg]:text-[#F04438]",
+        warning: "bg-[#FFFAEB] border-[#F79009]/20 [&>svg]:text-[#F79009]",
+        info: "bg-[#EBF5FF] border-[#4275D6]/20 [&>svg]:text-[#4275D6]",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);
+
+/**
+ * Default icons for each alert variant
+ */
+const defaultIcons: Record<string, React.ReactNode> = {
+  default: <Info className="size-5" />,
+  success: <CheckCircle2 className="size-5" />,
+  error: <XCircle className="size-5" />,
+  destructive: <XCircle className="size-5" />,
+  warning: <AlertTriangle className="size-5" />,
+  info: <Info className="size-5" />,
+};
+
+/**
+ * Dismissible alert banners for notifications, errors, warnings, and success messages.
+ *
+ * @example
+ * \`\`\`tsx
+ * // Simple alert
+ * <Alert variant="success">
+ *   <AlertTitle>Success!</AlertTitle>
+ *   <AlertDescription>Your changes have been saved.</AlertDescription>
+ * </Alert>
+ *
+ * // With close button and actions
+ * <Alert
+ *   variant="error"
+ *   closable
+ *   onClose={() => console.log('closed')}
+ *   action={<Button size="sm">Retry</Button>}
+ * >
+ *   <AlertTitle>Error</AlertTitle>
+ *   <AlertDescription>Something went wrong.</AlertDescription>
+ * </Alert>
+ *
+ * // Controlled visibility
+ * const [open, setOpen] = useState(true)
+ * <Alert open={open} onClose={() => setOpen(false)} closable>...</Alert>
+ * \`\`\`
+ */
+export interface AlertProps
+  extends
+    React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof alertVariants> {
+  /** Custom icon to display. Set to null to hide icon. */
+  icon?: React.ReactNode | null;
+  /** Whether to show the default variant icon (default: true) */
+  showIcon?: boolean;
+  /** Show close button */
+  closable?: boolean;
+  /** Callback when close button is clicked */
+  onClose?: () => void;
+  /** Primary action element (e.g., button) */
+  action?: React.ReactNode;
+  /** Secondary action element */
+  secondaryAction?: React.ReactNode;
+  /** Controlled visibility state */
+  open?: boolean;
+  /** Initial visibility for uncontrolled mode (default: true) */
+  defaultOpen?: boolean;
+}
+
+const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
+  (
+    {
+      className,
+      variant = "default",
+      icon,
+      showIcon = true,
+      closable = false,
+      onClose,
+      action,
+      secondaryAction,
+      open: controlledOpen,
+      defaultOpen = true,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
+    const isControlled = controlledOpen !== undefined;
+    const isOpen = isControlled ? controlledOpen : internalOpen;
+
+    const handleClose = React.useCallback(() => {
+      if (!isControlled) {
+        setInternalOpen(false);
+      }
+      onClose?.();
+    }, [isControlled, onClose]);
+
+    if (!isOpen) {
+      return null;
+    }
+
+    const renderIcon = () => {
+      if (icon === null || !showIcon) return null;
+      if (icon) return icon;
+      return defaultIcons[variant || "default"];
+    };
+
+    const hasActions = action || secondaryAction;
+
+    return (
+      <div
+        ref={ref}
+        role="alert"
+        aria-live="polite"
+        className={cn(alertVariants({ variant, className }))}
+        {...props}
+      >
+        {renderIcon()}
+        <div className="flex flex-1 items-center justify-between gap-4">
+          <div className="flex-1">{children}</div>
+          {(hasActions || closable) && (
+            <div className="flex shrink-0 items-center gap-2">
+              {secondaryAction}
+              {action}
+              {closable && (
+                <button
+                  type="button"
+                  onClick={handleClose}
+                  className={cn(
+                    "rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2",
+                    variant === "default" && "focus:ring-[#181D27]",
+                    variant === "success" && "focus:ring-[#17B26A]",
+                    (variant === "error" || variant === "destructive") &&
+                      "focus:ring-[#F04438]",
+                    variant === "warning" && "focus:ring-[#F79009]",
+                    variant === "info" && "focus:ring-[#4275D6]"
+                  )}
+                  aria-label="Close alert"
+                >
+                  <X className="size-5" />
+                </button>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  }
+);
+Alert.displayName = "Alert";
+
+/**
+ * Alert title component for the heading text.
+ */
+const AlertTitle = React.forwardRef<
+  HTMLHeadingElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h5
+    ref={ref}
+    className={cn("font-semibold leading-tight tracking-tight", className)}
+    {...props}
+  />
+));
+AlertTitle.displayName = "AlertTitle";
+
+/**
+ * Alert description component for the body text.
+ */
+const AlertDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p ref={ref} className={cn("mt-1 text-sm", className)} {...props} />
+));
+AlertDescription.displayName = "AlertDescription";
+
+export { Alert, AlertTitle, AlertDescription, alertVariants };
 `, prefix)
         }
       ]

package/package.json

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