@tidecloak/ui-framework 0.0.1

package/src/components/ui/index.tsx

@@ -0,0 +1,1001 @@
+/**
+ * Default UI Components
+ *
+ * These are simple, styled components that work out of the box.
+ * Users can override them by passing their own components prop.
+ */
+
+import React, { useEffect } from "react";
+
+// Inject CSS keyframes for animations
+const KEYFRAMES_ID = "tidecloak-ui-keyframes";
+const KEYFRAMES_CSS = `
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+`;
+
+function injectKeyframes() {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(KEYFRAMES_ID)) return;
+  const style = document.createElement("style");
+  style.id = KEYFRAMES_ID;
+  style.textContent = KEYFRAMES_CSS;
+  document.head.appendChild(style);
+}
+
+// Inject keyframes on module load (client-side only)
+if (typeof window !== "undefined") {
+  injectKeyframes();
+}
+
+// Shared styles
+const baseButtonStyle: React.CSSProperties = {
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: "0.5rem",
+  borderRadius: "0.375rem",
+  fontSize: "0.875rem",
+  fontWeight: 500,
+  cursor: "pointer",
+  border: "1px solid transparent",
+  transition: "all 0.2s",
+  padding: "0.5rem 1rem",
+};
+
+// Card
+export function Card({ children, className, style, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      style={{
+        backgroundColor: "#fff",
+        borderRadius: "0.5rem",
+        border: "1px solid #e5e7eb",
+        boxShadow: "0 1px 3px 0 rgba(0, 0, 0, 0.1)",
+        ...style,
+      }}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function CardContent({ children, className, style, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div style={{ padding: "1.5rem", ...style }} {...props}>
+      {children}
+    </div>
+  );
+}
+
+export function CardHeader({ children, className, style, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div style={{ padding: "1.5rem 1.5rem 0", ...style }} {...props}>
+      {children}
+    </div>
+  );
+}
+
+export function CardTitle({ children, className, style, ...props }: React.HTMLAttributes<HTMLHeadingElement>) {
+  return (
+    <h3 style={{ fontSize: "1.125rem", fontWeight: 600, margin: 0, ...style }} {...props}>
+      {children}
+    </h3>
+  );
+}
+
+export function CardDescription({ children, className, style, ...props }: React.HTMLAttributes<HTMLParagraphElement>) {
+  return (
+    <p style={{ fontSize: "0.875rem", color: "#6b7280", margin: "0.25rem 0 0", ...style }} {...props}>
+      {children}
+    </p>
+  );
+}
+
+// Button
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
+  size?: "default" | "sm" | "lg" | "icon";
+}
+
+export function Button({ children, variant = "default", size = "default", style, ...props }: ButtonProps) {
+  const variantStyles: Record<string, React.CSSProperties> = {
+    default: { backgroundColor: "#1f2937", color: "#fff", border: "1px solid #1f2937" },
+    destructive: { backgroundColor: "#dc2626", color: "#fff", border: "1px solid #dc2626" },
+    outline: { backgroundColor: "transparent", color: "#1f2937", border: "1px solid #d1d5db" },
+    secondary: { backgroundColor: "#f3f4f6", color: "#1f2937", border: "1px solid #e5e7eb" },
+    ghost: { backgroundColor: "transparent", color: "#1f2937", border: "1px solid transparent" },
+    link: { backgroundColor: "transparent", color: "#2563eb", border: "none", textDecoration: "underline" },
+  };
+
+  const sizeStyles: Record<string, React.CSSProperties> = {
+    default: { height: "2.5rem", padding: "0.5rem 1rem" },
+    sm: { height: "2rem", padding: "0.25rem 0.75rem", fontSize: "0.75rem" },
+    lg: { height: "3rem", padding: "0.75rem 2rem" },
+    icon: { height: "2.5rem", width: "2.5rem", padding: "0" },
+  };
+
+  return (
+    <button
+      style={{
+        ...baseButtonStyle,
+        ...variantStyles[variant],
+        ...sizeStyles[size],
+        ...style,
+      }}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}
+
+// Badge
+interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+  variant?: "default" | "secondary" | "destructive" | "outline";
+}
+
+export function Badge({ children, variant = "default", style, ...props }: BadgeProps) {
+  const variantStyles: Record<string, React.CSSProperties> = {
+    default: { backgroundColor: "#1f2937", color: "#fff" },
+    secondary: { backgroundColor: "#f3f4f6", color: "#1f2937" },
+    destructive: { backgroundColor: "#fef2f2", color: "#dc2626" },
+    outline: { backgroundColor: "transparent", color: "#1f2937", border: "1px solid #d1d5db" },
+  };
+
+  return (
+    <span
+      style={{
+        display: "inline-flex",
+        alignItems: "center",
+        borderRadius: "9999px",
+        padding: "0.125rem 0.625rem",
+        fontSize: "0.75rem",
+        fontWeight: 500,
+        ...variantStyles[variant],
+        ...style,
+      }}
+      {...props}
+    >
+      {children}
+    </span>
+  );
+}
+
+// Input
+export function Input({ className, style, ...props }: React.InputHTMLAttributes<HTMLInputElement>) {
+  return (
+    <input
+      style={{
+        display: "flex",
+        width: "100%",
+        height: "2.5rem",
+        borderRadius: "0.375rem",
+        border: "1px solid #d1d5db",
+        backgroundColor: "#fff",
+        padding: "0.5rem 0.75rem",
+        fontSize: "0.875rem",
+        outline: "none",
+        boxSizing: "border-box",
+        ...style,
+      }}
+      {...props}
+    />
+  );
+}
+
+// Label
+export function Label({ children, className, style, ...props }: React.LabelHTMLAttributes<HTMLLabelElement>) {
+  return (
+    <label
+      style={{
+        fontSize: "0.875rem",
+        fontWeight: 500,
+        color: "#1f2937",
+        ...style,
+      }}
+      {...props}
+    >
+      {children}
+    </label>
+  );
+}
+
+// Textarea
+export function Textarea({ className, style, ...props }: React.TextareaHTMLAttributes<HTMLTextAreaElement>) {
+  return (
+    <textarea
+      style={{
+        display: "flex",
+        width: "100%",
+        minHeight: "5rem",
+        borderRadius: "0.375rem",
+        border: "1px solid #d1d5db",
+        backgroundColor: "#fff",
+        padding: "0.5rem 0.75rem",
+        fontSize: "0.875rem",
+        outline: "none",
+        resize: "vertical",
+        boxSizing: "border-box",
+        ...style,
+      }}
+      {...props}
+    />
+  );
+}
+
+// Checkbox
+interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
+  onCheckedChange?: (checked: boolean) => void;
+}
+
+export function Checkbox({ onCheckedChange, onChange, style, ...props }: CheckboxProps) {
+  return (
+    <input
+      type="checkbox"
+      style={{
+        width: "1rem",
+        height: "1rem",
+        cursor: "pointer",
+        ...style,
+      }}
+      onChange={(e) => {
+        onChange?.(e);
+        onCheckedChange?.(e.target.checked);
+      }}
+      {...props}
+    />
+  );
+}
+
+// Select components - with proper open/close state management
+const SelectContext = React.createContext<{
+  value: string;
+  onValueChange: (value: string) => void;
+  open: boolean;
+  setOpen: (open: boolean) => void;
+}>({ value: "", onValueChange: () => {}, open: false, setOpen: () => {} });
+
+export function Select({ children, onValueChange, value = "", ...props }: {
+  children: React.ReactNode;
+  onValueChange?: (value: string) => void;
+  value?: string;
+}) {
+  const [open, setOpen] = React.useState(false);
+  const containerRef = React.useRef<HTMLDivElement>(null);
+
+  // Close on click outside
+  useEffect(() => {
+    if (!open) return;
+
+    const handleClickOutside = (event: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+        setOpen(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [open]);
+
+  const handleValueChange = (newValue: string) => {
+    onValueChange?.(newValue);
+    setOpen(false);
+  };
+
+  return (
+    <SelectContext.Provider value={{ value, onValueChange: handleValueChange, open, setOpen }}>
+      <div ref={containerRef} style={{ position: "relative" }}>{children}</div>
+    </SelectContext.Provider>
+  );
+}
+
+export function SelectTrigger({ children, style, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  const { open, setOpen } = React.useContext(SelectContext);
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        height: "2.5rem",
+        width: "100%",
+        borderRadius: "0.375rem",
+        border: "1px solid #d1d5db",
+        backgroundColor: "#fff",
+        padding: "0.5rem 0.75rem",
+        fontSize: "0.875rem",
+        cursor: "pointer",
+        ...style,
+      }}
+      onClick={() => setOpen(!open)}
+      {...props}
+    >
+      {children}
+      <svg
+        style={{
+          width: "1rem",
+          height: "1rem",
+          marginLeft: "0.5rem",
+          color: "#6b7280",
+          transform: open ? "rotate(180deg)" : "rotate(0deg)",
+          transition: "transform 0.2s",
+        }}
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+      >
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+      </svg>
+    </div>
+  );
+}
+
+export function SelectValue({ placeholder }: { placeholder?: string }) {
+  const { value } = React.useContext(SelectContext);
+  return <span style={{ color: value ? "#1f2937" : "#9ca3af" }}>{value || placeholder}</span>;
+}
+
+export function SelectContent({ children, style, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  const { open } = React.useContext(SelectContext);
+
+  if (!open) return null;
+
+  return (
+    <div
+      style={{
+        position: "absolute",
+        top: "100%",
+        left: 0,
+        right: 0,
+        marginTop: "0.25rem",
+        backgroundColor: "#fff",
+        border: "1px solid #d1d5db",
+        borderRadius: "0.375rem",
+        boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1)",
+        zIndex: 50,
+        maxHeight: "15rem",
+        overflow: "auto",
+        ...style,
+      }}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function SelectItem({ children, value, style, ...props }: React.HTMLAttributes<HTMLDivElement> & { value: string }) {
+  const { value: selectedValue, onValueChange } = React.useContext(SelectContext);
+  const isSelected = selectedValue === value;
+
+  return (
+    <div
+      style={{
+        padding: "0.5rem 0.75rem",
+        cursor: "pointer",
+        fontSize: "0.875rem",
+        backgroundColor: isSelected ? "#f3f4f6" : "transparent",
+        ...style,
+      }}
+      onClick={() => onValueChange(value)}
+      onMouseEnter={(e) => {
+        if (!isSelected) e.currentTarget.style.backgroundColor = "#f9fafb";
+      }}
+      onMouseLeave={(e) => {
+        if (!isSelected) e.currentTarget.style.backgroundColor = "transparent";
+      }}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+// Skeleton
+export function Skeleton({ className, style, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      style={{
+        backgroundColor: "#e5e7eb",
+        borderRadius: "0.375rem",
+        animation: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
+        ...style,
+      }}
+      {...props}
+    />
+  );
+}
+
+// Table components
+export function Table({ children, style, ...props }: React.HTMLAttributes<HTMLTableElement>) {
+  return (
+    <div style={{ width: "100%", overflow: "auto" }}>
+      <table style={{ width: "100%", borderCollapse: "collapse", fontSize: "0.875rem", ...style }} {...props}>
+        {children}
+      </table>
+    </div>
+  );
+}
+
+export function TableHeader({ children, style, ...props }: React.HTMLAttributes<HTMLTableSectionElement>) {
+  return (
+    <thead style={{ borderBottom: "1px solid #e5e7eb", ...style }} {...props}>
+      {children}
+    </thead>
+  );
+}
+
+export function TableBody({ children, style, ...props }: React.HTMLAttributes<HTMLTableSectionElement>) {
+  return <tbody style={style} {...props}>{children}</tbody>;
+}
+
+export function TableRow({ children, style, ...props }: React.HTMLAttributes<HTMLTableRowElement>) {
+  return (
+    <tr style={{ borderBottom: "1px solid #e5e7eb", ...style }} {...props}>
+      {children}
+    </tr>
+  );
+}
+
+export function TableHead({ children, style, ...props }: React.ThHTMLAttributes<HTMLTableCellElement>) {
+  return (
+    <th
+      style={{
+        height: "3rem",
+        padding: "0 1rem",
+        textAlign: "left",
+        fontWeight: 500,
+        color: "#6b7280",
+        ...style,
+      }}
+      {...props}
+    >
+      {children}
+    </th>
+  );
+}
+
+export function TableCell({ children, style, ...props }: React.TdHTMLAttributes<HTMLTableCellElement>) {
+  return (
+    <td style={{ padding: "1rem", ...style }} {...props}>
+      {children}
+    </td>
+  );
+}
+
+// Dialog components
+interface DialogProps {
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  children: React.ReactNode;
+}
+
+export function Dialog({ open, onOpenChange, children }: DialogProps) {
+  if (!open) return null;
+
+  return (
+    <div
+      style={{
+        position: "fixed",
+        inset: 0,
+        zIndex: 50,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+      }}
+    >
+      <div
+        style={{
+          position: "fixed",
+          inset: 0,
+          backgroundColor: "rgba(0, 0, 0, 0.5)",
+        }}
+        onClick={() => onOpenChange?.(false)}
+      />
+      <div style={{ position: "relative", zIndex: 51 }}>{children}</div>
+    </div>
+  );
+}
+
+export function DialogContent({ children, style, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      style={{
+        backgroundColor: "#fff",
+        borderRadius: "0.5rem",
+        boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
+        padding: "1.5rem",
+        width: "100%",
+        maxWidth: "32rem",
+        maxHeight: "85vh",
+        overflow: "auto",
+        ...style,
+      }}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function DialogHeader({ children, style, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div style={{ marginBottom: "1rem", ...style }} {...props}>
+      {children}
+    </div>
+  );
+}
+
+export function DialogTitle({ children, style, ...props }: React.HTMLAttributes<HTMLHeadingElement>) {
+  return (
+    <h2 style={{ fontSize: "1.125rem", fontWeight: 600, margin: 0, ...style }} {...props}>
+      {children}
+    </h2>
+  );
+}
+
+export function DialogDescription({ children, style, ...props }: React.HTMLAttributes<HTMLParagraphElement>) {
+  return (
+    <p style={{ fontSize: "0.875rem", color: "#6b7280", margin: "0.25rem 0 0", ...style }} {...props}>
+      {children}
+    </p>
+  );
+}
+
+export function DialogFooter({ children, style, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      style={{
+        display: "flex",
+        justifyContent: "flex-end",
+        gap: "0.5rem",
+        marginTop: "1.5rem",
+        ...style,
+      }}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+// Tabs components
+interface TabsProps {
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  children: React.ReactNode;
+}
+
+const TabsContext = React.createContext<{
+  value: string;
+  onValueChange: (value: string) => void;
+}>({ value: "", onValueChange: () => {} });
+
+export function Tabs({ value, defaultValue = "", onValueChange, children }: TabsProps) {
+  const [internalValue, setInternalValue] = React.useState(defaultValue);
+  const currentValue = value ?? internalValue;
+
+  const handleChange = (newValue: string) => {
+    setInternalValue(newValue);
+    onValueChange?.(newValue);
+  };
+
+  return (
+    <TabsContext.Provider value={{ value: currentValue, onValueChange: handleChange }}>
+      <div>{children}</div>
+    </TabsContext.Provider>
+  );
+}
+
+export function TabsList({ children, style, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      style={{
+        display: "inline-flex",
+        backgroundColor: "#f3f4f6",
+        borderRadius: "0.5rem",
+        padding: "0.25rem",
+        gap: "0.25rem",
+        ...style,
+      }}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function TabsTrigger({ children, value, style, ...props }: React.ButtonHTMLAttributes<HTMLButtonElement> & { value: string }) {
+  const { value: currentValue, onValueChange } = React.useContext(TabsContext);
+  const isActive = currentValue === value;
+
+  return (
+    <button
+      style={{
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: "0.5rem 0.75rem",
+        fontSize: "0.875rem",
+        fontWeight: 500,
+        borderRadius: "0.375rem",
+        border: "none",
+        cursor: "pointer",
+        backgroundColor: isActive ? "#fff" : "transparent",
+        color: isActive ? "#1f2937" : "#6b7280",
+        boxShadow: isActive ? "0 1px 2px 0 rgba(0, 0, 0, 0.05)" : "none",
+        ...style,
+      }}
+      onClick={() => onValueChange(value)}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}
+
+export function TabsContent({ children, value, style, ...props }: React.HTMLAttributes<HTMLDivElement> & { value: string }) {
+  const { value: currentValue } = React.useContext(TabsContext);
+
+  if (currentValue !== value) return null;
+
+  return (
+    <div style={{ marginTop: "1rem", ...style }} {...props}>
+      {children}
+    </div>
+  );
+}
+
+// AlertDialog (uses same base as Dialog)
+export function AlertDialog({ open, onOpenChange, children }: {
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  children: React.ReactNode;
+}) {
+  if (!open) return null;
+
+  return (
+    <div
+      style={{
+        position: "fixed",
+        inset: 0,
+        zIndex: 50,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+      }}
+    >
+      <div
+        style={{
+          position: "fixed",
+          inset: 0,
+          backgroundColor: "rgba(0, 0, 0, 0.5)",
+        }}
+        onClick={() => onOpenChange?.(false)}
+      />
+      <div style={{ position: "relative", zIndex: 51 }}>{children}</div>
+    </div>
+  );
+}
+
+export function AlertDialogContent({ children, style, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      style={{
+        backgroundColor: "#fff",
+        borderRadius: "0.5rem",
+        boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
+        padding: "1.5rem",
+        width: "100%",
+        maxWidth: "32rem",
+        ...style,
+      }}
+      onClick={(e) => e.stopPropagation()}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function AlertDialogHeader({ children, style, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div style={{ marginBottom: "1rem", ...style }} {...props}>
+      {children}
+    </div>
+  );
+}
+
+export function AlertDialogTitle({ children, style, ...props }: React.HTMLAttributes<HTMLHeadingElement>) {
+  return (
+    <h2 style={{ fontSize: "1.125rem", fontWeight: 600, margin: 0, ...style }} {...props}>
+      {children}
+    </h2>
+  );
+}
+
+export function AlertDialogDescription({ children, style, ...props }: React.HTMLAttributes<HTMLParagraphElement>) {
+  return (
+    <p style={{ fontSize: "0.875rem", color: "#6b7280", margin: "0.25rem 0 0", ...style }} {...props}>
+      {children}
+    </p>
+  );
+}
+
+export function AlertDialogFooter({ children, style, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      style={{
+        display: "flex",
+        justifyContent: "flex-end",
+        gap: "0.5rem",
+        marginTop: "1.5rem",
+        ...style,
+      }}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function AlertDialogCancel({ children, style, onClick, ...props }: React.ButtonHTMLAttributes<HTMLButtonElement>) {
+  return (
+    <button
+      style={{
+        ...baseButtonStyle,
+        backgroundColor: "transparent",
+        color: "#1f2937",
+        border: "1px solid #d1d5db",
+        ...style,
+      }}
+      onClick={onClick}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}
+
+export function AlertDialogAction({ children, style, onClick, ...props }: React.ButtonHTMLAttributes<HTMLButtonElement>) {
+  return (
+    <button
+      style={{
+        ...baseButtonStyle,
+        backgroundColor: "#dc2626",
+        color: "#fff",
+        border: "1px solid #dc2626",
+        ...style,
+      }}
+      onClick={onClick}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}
+
+// Switch
+interface SwitchProps {
+  checked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+  disabled?: boolean;
+  style?: React.CSSProperties;
+}
+
+export function Switch({ checked, onCheckedChange, disabled, style }: SwitchProps) {
+  return (
+    <button
+      type="button"
+      role="switch"
+      aria-checked={checked}
+      disabled={disabled}
+      onClick={() => onCheckedChange?.(!checked)}
+      style={{
+        width: "2.75rem",
+        height: "1.5rem",
+        borderRadius: "9999px",
+        backgroundColor: checked ? "#1f2937" : "#d1d5db",
+        position: "relative",
+        cursor: disabled ? "not-allowed" : "pointer",
+        opacity: disabled ? 0.5 : 1,
+        border: "none",
+        padding: 0,
+        transition: "background-color 0.2s",
+        ...style,
+      }}
+    >
+      <span
+        style={{
+          position: "absolute",
+          top: "2px",
+          left: checked ? "calc(100% - 1.25rem - 2px)" : "2px",
+          width: "1.25rem",
+          height: "1.25rem",
+          borderRadius: "9999px",
+          backgroundColor: "#fff",
+          transition: "left 0.2s",
+          boxShadow: "0 1px 3px rgba(0, 0, 0, 0.2)",
+        }}
+      />
+    </button>
+  );
+}
+
+// ScrollArea (simple wrapper)
+export function ScrollArea({ children, className, style, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      style={{
+        overflow: "auto",
+        ...style,
+      }}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+// Alert
+interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
+  variant?: "default" | "destructive";
+}
+
+export function Alert({ children, variant = "default", style, ...props }: AlertProps) {
+  const variantStyles: Record<string, React.CSSProperties> = {
+    default: {
+      backgroundColor: "#f3f4f6",
+      borderColor: "#e5e7eb",
+      color: "#1f2937",
+    },
+    destructive: {
+      backgroundColor: "#fef2f2",
+      borderColor: "#fecaca",
+      color: "#dc2626",
+    },
+  };
+
+  return (
+    <div
+      role="alert"
+      style={{
+        position: "relative",
+        width: "100%",
+        borderRadius: "0.375rem",
+        border: "1px solid",
+        padding: "1rem",
+        ...variantStyles[variant],
+        ...style,
+      }}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function AlertDescription({ children, style, ...props }: React.HTMLAttributes<HTMLParagraphElement>) {
+  return (
+    <p
+      style={{
+        fontSize: "0.875rem",
+        lineHeight: 1.5,
+        margin: 0,
+        ...style,
+      }}
+      {...props}
+    >
+      {children}
+    </p>
+  );
+}
+
+// CodeEditor (simple textarea-based editor)
+interface CodeEditorProps {
+  value?: string;
+  onChange?: (value: string) => void;
+  height?: string;
+  style?: React.CSSProperties;
+}
+
+export function CodeEditor({ value, onChange, height = "300px", style }: CodeEditorProps) {
+  return (
+    <textarea
+      value={value}
+      onChange={(e) => onChange?.(e.target.value)}
+      style={{
+        width: "100%",
+        height,
+        fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
+        fontSize: "0.875rem",
+        lineHeight: 1.5,
+        padding: "0.75rem",
+        backgroundColor: "#1f2937",
+        color: "#e5e7eb",
+        border: "1px solid #374151",
+        borderRadius: "0.375rem",
+        resize: "vertical",
+        boxSizing: "border-box",
+        ...style,
+      }}
+      spellCheck={false}
+    />
+  );
+}
+
+// Separator
+export function Separator({ className, style, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      style={{
+        height: "1px",
+        width: "100%",
+        backgroundColor: "#e5e7eb",
+        ...style,
+      }}
+      {...props}
+    />
+  );
+}
+
+// Export all as default components object
+export const defaultComponents = {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  Button,
+  Badge,
+  Input,
+  Label,
+  Textarea,
+  Checkbox,
+  Select,
+  SelectTrigger,
+  SelectValue,
+  SelectContent,
+  SelectItem,
+  Skeleton,
+  Switch,
+  ScrollArea,
+  Alert,
+  AlertDescription,
+  CodeEditor,
+  Table,
+  TableHeader,
+  TableBody,
+  TableRow,
+  TableHead,
+  TableCell,
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+  AlertDialog,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogCancel,
+  AlertDialogAction,
+  Separator,
+  Tabs,
+  TabsList,
+  TabsTrigger,
+  TabsContent,
+};