@yomologic/react-ui 0.1.0

package/dist/index.mjs

@@ -0,0 +1,1047 @@
+// src/ui/button.tsx
+import React from "react";
+
+// src/lib/utils.ts
+import { clsx } from "clsx";
+function cn(...inputs) {
+  return clsx(inputs);
+}
+
+// src/ui/button.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var Button = React.forwardRef(
+  ({
+    className,
+    variant = "primary",
+    size = "md",
+    isLoading = false,
+    leftIcon,
+    rightIcon,
+    children,
+    disabled,
+    ...props
+  }, ref) => {
+    const baseStyles = "inline-flex items-center justify-center transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed";
+    const variants = {
+      primary: "[background-color:var(--color-primary)] text-white hover:[background-color:var(--color-primary-hover)] focus:[--tw-ring-color:var(--color-primary)]",
+      secondary: "[background-color:var(--color-secondary)] text-white hover:[background-color:var(--color-secondary-hover)] focus:[--tw-ring-color:var(--color-secondary)]",
+      outline: "border-2 [border-color:var(--color-primary)] [color:var(--color-primary)] hover:bg-blue-50 focus:[--tw-ring-color:var(--color-primary)]",
+      ghost: "text-gray-700 hover:bg-gray-100 focus:ring-gray-500",
+      danger: "[background-color:var(--color-error)] text-white hover:bg-red-700 focus:[--tw-ring-color:var(--color-error)]"
+    };
+    const sizes = {
+      sm: "[font-size:var(--button-text-sm)] [padding-left:var(--button-padding-sm-x)] [padding-right:var(--button-padding-sm-x)] [padding-top:var(--button-padding-sm-y)] [padding-bottom:var(--button-padding-sm-y)] gap-1.5",
+      md: "[font-size:var(--button-text-md)] [padding-left:var(--button-padding-md-x)] [padding-right:var(--button-padding-md-x)] [padding-top:var(--button-padding-md-y)] [padding-bottom:var(--button-padding-md-y)] gap-2",
+      lg: "[font-size:var(--button-text-lg)] [padding-left:var(--button-padding-lg-x)] [padding-right:var(--button-padding-lg-x)] [padding-top:var(--button-padding-lg-y)] [padding-bottom:var(--button-padding-lg-y)] gap-2.5"
+    };
+    const radiusStyle = "[border-radius:var(--button-radius)]";
+    const fontWeightStyle = "[font-weight:var(--button-font-weight)]";
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref,
+        className: cn(
+          baseStyles,
+          variants[variant],
+          sizes[size],
+          radiusStyle,
+          fontWeightStyle,
+          className
+        ),
+        disabled: disabled || isLoading,
+        ...props,
+        children: [
+          isLoading && /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              className: "animate-spin h-4 w-4",
+              xmlns: "http://www.w3.org/2000/svg",
+              fill: "none",
+              viewBox: "0 0 24 24",
+              children: [
+                /* @__PURE__ */ jsx(
+                  "circle",
+                  {
+                    className: "opacity-25",
+                    cx: "12",
+                    cy: "12",
+                    r: "10",
+                    stroke: "currentColor",
+                    strokeWidth: "4"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    className: "opacity-75",
+                    fill: "currentColor",
+                    d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                  }
+                )
+              ]
+            }
+          ),
+          !isLoading && leftIcon && leftIcon,
+          children,
+          !isLoading && rightIcon && rightIcon
+        ]
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+
+// src/ui/input.tsx
+import React2 from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var Input = React2.forwardRef(
+  ({
+    className,
+    type = "text",
+    label,
+    error,
+    helperText,
+    leftIcon,
+    rightIcon,
+    fullWidth = false,
+    id,
+    ...props
+  }, ref) => {
+    const inputId = id || label?.toLowerCase().replace(/\s+/g, "-");
+    return /* @__PURE__ */ jsxs2("div", { className: cn("flex flex-col", fullWidth && "w-full"), children: [
+      label && /* @__PURE__ */ jsxs2(
+        "label",
+        {
+          htmlFor: inputId,
+          className: "block text-sm font-semibold text-gray-600 mb-1",
+          children: [
+            label,
+            props.required && /* @__PURE__ */ jsx2("span", { className: "text-red-500 ml-1", children: "*" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs2("div", { className: "relative", children: [
+        leftIcon && /* @__PURE__ */ jsx2("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400", children: leftIcon }),
+        /* @__PURE__ */ jsx2(
+          "input",
+          {
+            ref,
+            type,
+            id: inputId,
+            className: cn(
+              "w-full px-3 py-2 border rounded-md transition-colors",
+              "text-gray-700 placeholder-gray-400",
+              "focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent",
+              "disabled:bg-gray-100 disabled:cursor-not-allowed disabled:text-gray-500",
+              error ? "border-red-500 focus:ring-red-500" : "border-gray-400",
+              leftIcon && "pl-10",
+              rightIcon && "pr-10",
+              className
+            ),
+            ...props
+          }
+        ),
+        rightIcon && /* @__PURE__ */ jsx2("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none text-gray-400", children: rightIcon })
+      ] }),
+      error && /* @__PURE__ */ jsx2("p", { className: "mt-1 text-sm text-red-600", children: error }),
+      helperText && !error && /* @__PURE__ */ jsx2("p", { className: "mt-1 text-sm text-gray-500", children: helperText })
+    ] });
+  }
+);
+Input.displayName = "Input";
+
+// src/ui/card.tsx
+import React3 from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Card = React3.forwardRef(
+  ({
+    className,
+    variant = "default",
+    padding = "md",
+    hoverable = false,
+    children,
+    ...props
+  }, ref) => {
+    const baseStyles = "bg-white rounded-lg";
+    const variants = {
+      default: "border border-gray-200",
+      bordered: "border-2 border-gray-300",
+      elevated: "shadow-md"
+    };
+    const paddings = {
+      none: "",
+      sm: "p-3",
+      md: "p-4",
+      lg: "p-6"
+    };
+    const hoverStyles = hoverable ? "hover:shadow-lg transition-shadow cursor-pointer" : "";
+    return /* @__PURE__ */ jsx3(
+      "div",
+      {
+        ref,
+        className: cn(
+          baseStyles,
+          variants[variant],
+          paddings[padding],
+          hoverStyles,
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
+Card.displayName = "Card";
+var CardHeader = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx3(
+  "div",
+  {
+    ref,
+    className: cn("flex flex-col space-y-1.5", className),
+    ...props
+  }
+));
+CardHeader.displayName = "CardHeader";
+var CardTitle = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx3(
+  "h3",
+  {
+    ref,
+    className: cn("text-lg font-semibold text-gray-800", className),
+    ...props
+  }
+));
+CardTitle.displayName = "CardTitle";
+var CardDescription = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx3("p", { ref, className: cn("text-sm text-gray-600", className), ...props }));
+CardDescription.displayName = "CardDescription";
+var CardContent = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx3("div", { ref, className: cn("pt-0", className), ...props }));
+CardContent.displayName = "CardContent";
+var CardFooter = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx3(
+  "div",
+  {
+    ref,
+    className: cn("flex items-center pt-4", className),
+    ...props
+  }
+));
+CardFooter.displayName = "CardFooter";
+
+// src/ui/badge.tsx
+import React4 from "react";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var Badge = React4.forwardRef(
+  ({
+    className,
+    variant = "default",
+    size = "md",
+    dot = false,
+    children,
+    ...props
+  }, ref) => {
+    const baseStyles = "inline-flex items-center font-medium rounded-full";
+    const variants = {
+      default: "bg-gray-100 text-gray-800",
+      primary: "bg-blue-100 text-blue-800",
+      success: "bg-green-100 text-green-800",
+      warning: "bg-yellow-100 text-yellow-800",
+      danger: "bg-red-100 text-red-800",
+      info: "bg-cyan-100 text-cyan-800"
+    };
+    const sizes = {
+      sm: "text-xs px-2 py-0.5",
+      md: "text-sm px-2.5 py-1",
+      lg: "text-base px-3 py-1.5"
+    };
+    const dotVariants = {
+      default: "bg-gray-600",
+      primary: "bg-blue-600",
+      success: "bg-green-600",
+      warning: "bg-yellow-600",
+      danger: "bg-red-600",
+      info: "bg-cyan-600"
+    };
+    return /* @__PURE__ */ jsxs3(
+      "span",
+      {
+        ref,
+        className: cn(baseStyles, variants[variant], sizes[size], className),
+        ...props,
+        children: [
+          dot && /* @__PURE__ */ jsx4(
+            "span",
+            {
+              className: cn("w-2 h-2 rounded-full mr-1.5", dotVariants[variant])
+            }
+          ),
+          children
+        ]
+      }
+    );
+  }
+);
+Badge.displayName = "Badge";
+
+// src/ui/checkbox.tsx
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+function Checkbox({
+  label,
+  checked = false,
+  onChange,
+  disabled = false,
+  className,
+  id
+}) {
+  const checkboxId = id || `checkbox-${Math.random().toString(36).substr(2, 9)}`;
+  const handleChange = (e) => {
+    if (onChange) {
+      onChange(e.target.checked);
+    }
+  };
+  return /* @__PURE__ */ jsxs4("div", { className: cn("flex items-center", className), children: [
+    /* @__PURE__ */ jsx5(
+      "input",
+      {
+        type: "checkbox",
+        id: checkboxId,
+        checked,
+        onChange: handleChange,
+        disabled,
+        className: cn(
+          "h-4 w-4 rounded border-gray-400 text-blue-600 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2",
+          disabled && "cursor-not-allowed opacity-50"
+        )
+      }
+    ),
+    label && /* @__PURE__ */ jsx5(
+      "label",
+      {
+        htmlFor: checkboxId,
+        className: cn(
+          "ml-2 text-sm font-medium text-gray-600",
+          disabled && "cursor-not-allowed opacity-50",
+          !disabled && "cursor-pointer"
+        ),
+        children: label
+      }
+    )
+  ] });
+}
+function CheckboxGroup({
+  label,
+  name,
+  options,
+  value = [],
+  onChange,
+  className,
+  orientation = "vertical",
+  required = false,
+  disabled = false
+}) {
+  const handleChange = (optionValue, checked) => {
+    if (onChange) {
+      if (checked) {
+        onChange([...value, optionValue]);
+      } else {
+        onChange(value.filter((v) => v !== optionValue));
+      }
+    }
+  };
+  return /* @__PURE__ */ jsxs4("div", { className, children: [
+    label && /* @__PURE__ */ jsxs4("label", { className: "block text-sm font-semibold text-gray-600 mb-1", children: [
+      label,
+      required && /* @__PURE__ */ jsx5("span", { className: "text-red-500 ml-1", children: "*" })
+    ] }),
+    /* @__PURE__ */ jsx5(
+      "div",
+      {
+        className: cn(
+          "space-y-2",
+          orientation === "horizontal" && "flex flex-wrap gap-4 space-y-0"
+        ),
+        children: options.map((option) => {
+          const isDisabled = disabled || option.disabled;
+          return /* @__PURE__ */ jsxs4("div", { className: "flex items-center", children: [
+            /* @__PURE__ */ jsx5(
+              "input",
+              {
+                type: "checkbox",
+                id: `${name}-${option.value}`,
+                name,
+                value: option.value,
+                checked: value.includes(option.value),
+                onChange: (e) => handleChange(option.value, e.target.checked),
+                disabled: isDisabled,
+                className: cn(
+                  "h-4 w-4 rounded border-gray-400 text-blue-600 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2",
+                  isDisabled && "cursor-not-allowed opacity-50"
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx5(
+              "label",
+              {
+                htmlFor: `${name}-${option.value}`,
+                className: cn(
+                  "ml-2 text-sm font-medium text-gray-600",
+                  isDisabled && "cursor-not-allowed opacity-50",
+                  !isDisabled && "cursor-pointer"
+                ),
+                children: option.label
+              }
+            )
+          ] }, option.value);
+        })
+      }
+    )
+  ] });
+}
+
+// src/ui/radio.tsx
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+function RadioGroup({
+  label,
+  name,
+  options,
+  value,
+  onChange,
+  className,
+  orientation = "vertical",
+  required = false,
+  disabled = false
+}) {
+  const handleChange = (e) => {
+    if (onChange) {
+      onChange(e.target.value);
+    }
+  };
+  return /* @__PURE__ */ jsxs5("div", { className, children: [
+    label && /* @__PURE__ */ jsxs5("label", { className: "block text-sm font-semibold text-gray-600 mb-1", children: [
+      label,
+      required && /* @__PURE__ */ jsx6("span", { className: "text-red-500 ml-1", children: "*" })
+    ] }),
+    /* @__PURE__ */ jsx6(
+      "div",
+      {
+        className: cn(
+          orientation === "vertical" && "space-y-2",
+          orientation === "horizontal" && "flex flex-wrap gap-4"
+        ),
+        children: options.map((option) => {
+          const isDisabled = disabled || option.disabled;
+          return /* @__PURE__ */ jsxs5("div", { className: "flex items-center", children: [
+            /* @__PURE__ */ jsx6(
+              "input",
+              {
+                type: "radio",
+                id: `${name}-${option.value}`,
+                name,
+                value: option.value,
+                checked: value === option.value,
+                onChange: handleChange,
+                disabled: isDisabled,
+                className: cn(
+                  "h-4 w-4 border-gray-400 text-blue-600 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2",
+                  isDisabled && "cursor-not-allowed opacity-50"
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx6(
+              "label",
+              {
+                htmlFor: `${name}-${option.value}`,
+                className: cn(
+                  "ml-2 text-sm font-medium text-gray-600",
+                  isDisabled && "cursor-not-allowed opacity-50",
+                  !isDisabled && "cursor-pointer"
+                ),
+                children: option.label
+              }
+            )
+          ] }, option.value);
+        })
+      }
+    )
+  ] });
+}
+
+// src/ui/dropdown.tsx
+import { useState, useRef, useEffect } from "react";
+import { ChevronDown } from "lucide-react";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+function Dropdown({
+  label,
+  placeholder = "Select an option",
+  options = [],
+  value,
+  onChange,
+  children,
+  disabled = false,
+  error,
+  helperText,
+  required = false,
+  className = ""
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef(null);
+  const getSelectedLabel = () => {
+    if (!value) return placeholder;
+    const selected = options.find((opt) => opt.value === value);
+    return selected ? selected.label : placeholder;
+  };
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  const handleSelect = (optionValue) => {
+    onChange?.(optionValue);
+    setIsOpen(false);
+  };
+  const handleKeyDown = (e) => {
+    if (disabled) return;
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      setIsOpen(!isOpen);
+    } else if (e.key === "Escape") {
+      setIsOpen(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs6("div", { className: `w-full ${className}`, children: [
+    label && /* @__PURE__ */ jsxs6("label", { className: "block text-sm font-semibold text-gray-600 mb-1", children: [
+      label,
+      required && /* @__PURE__ */ jsx7("span", { className: "text-red-500 ml-1", children: "*" })
+    ] }),
+    /* @__PURE__ */ jsxs6("div", { ref: dropdownRef, className: "relative", children: [
+      /* @__PURE__ */ jsxs6(
+        "button",
+        {
+          type: "button",
+          onClick: () => !disabled && setIsOpen(!isOpen),
+          onKeyDown: handleKeyDown,
+          disabled,
+          className: `
+            w-full px-4 py-2 text-left bg-white border rounded-lg
+            flex items-center justify-between
+            transition-all duration-200
+            ${error ? "border-red-500 focus:ring-2 focus:ring-red-200 focus:border-red-500" : "border-gray-400 focus:ring-2 focus:ring-blue-200 focus:border-blue-500"}
+            ${disabled ? "bg-gray-100 cursor-not-allowed opacity-60" : "hover:border-gray-400"}
+            ${!value ? "text-gray-400" : "text-gray-900"}
+          `,
+          children: [
+            /* @__PURE__ */ jsx7("span", { className: "truncate", children: getSelectedLabel() }),
+            /* @__PURE__ */ jsx7(
+              ChevronDown,
+              {
+                className: `w-5 h-5 text-gray-400 transition-transform duration-200 shrink-0 ml-2 ${isOpen ? "transform rotate-180" : ""}`
+              }
+            )
+          ]
+        }
+      ),
+      isOpen && !disabled && /* @__PURE__ */ jsx7(
+        "div",
+        {
+          className: "absolute z-50 w-full mt-1 bg-white border border-gray-400 rounded-lg shadow-lg max-h-60 overflow-auto",
+          role: "listbox",
+          children: children ? (
+            // Custom content
+            /* @__PURE__ */ jsx7("div", { onClick: () => setIsOpen(false), children })
+          ) : (
+            // Standard options
+            /* @__PURE__ */ jsx7("ul", { children: options.map((option) => /* @__PURE__ */ jsx7("li", { children: /* @__PURE__ */ jsx7(
+              "button",
+              {
+                type: "button",
+                onClick: () => !option.disabled && handleSelect(option.value),
+                disabled: option.disabled,
+                className: `
+                        w-full px-4 py-2 text-left text-sm
+                        transition-colors duration-150
+                        ${option.value === value ? "bg-blue-50 text-blue-700 font-medium" : "text-gray-900 hover:bg-gray-100"}
+                        ${option.disabled ? "opacity-50 cursor-not-allowed" : ""}
+                      `,
+                role: "option",
+                "aria-selected": option.value === value,
+                children: option.label
+              }
+            ) }, option.value)) })
+          )
+        }
+      )
+    ] }),
+    (helperText || error) && /* @__PURE__ */ jsx7(
+      "p",
+      {
+        className: `mt-1 text-xs ${error ? "text-red-600" : "text-gray-500"}`,
+        children: error || helperText
+      }
+    )
+  ] });
+}
+
+// src/ui/spinner.tsx
+import React5 from "react";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+var Spinner = React5.forwardRef(
+  ({ className, size = "md", color = "primary", label, ...props }, ref) => {
+    const sizes = {
+      sm: "h-4 w-4",
+      md: "h-8 w-8",
+      lg: "h-12 w-12",
+      xl: "h-16 w-16"
+    };
+    const colors = {
+      primary: "text-blue-600",
+      secondary: "text-gray-600",
+      white: "text-white"
+    };
+    return /* @__PURE__ */ jsxs7(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex flex-col items-center justify-center gap-2",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs7(
+            "svg",
+            {
+              className: cn("animate-spin", sizes[size], colors[color]),
+              xmlns: "http://www.w3.org/2000/svg",
+              fill: "none",
+              viewBox: "0 0 24 24",
+              children: [
+                /* @__PURE__ */ jsx8(
+                  "circle",
+                  {
+                    className: "opacity-25",
+                    cx: "12",
+                    cy: "12",
+                    r: "10",
+                    stroke: "currentColor",
+                    strokeWidth: "4"
+                  }
+                ),
+                /* @__PURE__ */ jsx8(
+                  "path",
+                  {
+                    className: "opacity-75",
+                    fill: "currentColor",
+                    d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                  }
+                )
+              ]
+            }
+          ),
+          label && /* @__PURE__ */ jsx8("p", { className: "text-sm text-gray-600", children: label })
+        ]
+      }
+    );
+  }
+);
+Spinner.displayName = "Spinner";
+
+// src/ui/code-snippet.tsx
+import { useState as useState2 } from "react";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import { vscDarkPlus } from "react-syntax-highlighter/dist/esm/styles/prism";
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+function CodeSnippet({ code, language = "tsx" }) {
+  const [copied, setCopied] = useState2(false);
+  const [showTooltip, setShowTooltip] = useState2(false);
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(code);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    } catch (err) {
+      console.error("Failed to copy:", err);
+    }
+  };
+  return /* @__PURE__ */ jsxs8("div", { className: "relative group", children: [
+    /* @__PURE__ */ jsxs8("div", { className: "absolute right-3 top-3 z-10", children: [
+      /* @__PURE__ */ jsx9(
+        "button",
+        {
+          onClick: handleCopy,
+          onMouseEnter: () => setShowTooltip(true),
+          onMouseLeave: () => setShowTooltip(false),
+          className: "p-2 rounded-md bg-gray-800 hover:bg-gray-700 text-gray-400 hover:text-gray-200 transition-all duration-200 border border-gray-700 hover:border-gray-600 shadow-lg",
+          "aria-label": "Copy code",
+          children: copied ? (
+            // Check icon
+            /* @__PURE__ */ jsx9(
+              "svg",
+              {
+                className: "w-4 h-4 text-green-400",
+                fill: "none",
+                stroke: "currentColor",
+                viewBox: "0 0 24 24",
+                children: /* @__PURE__ */ jsx9(
+                  "path",
+                  {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    strokeWidth: 2,
+                    d: "M5 13l4 4L19 7"
+                  }
+                )
+              }
+            )
+          ) : (
+            // Copy icon
+            /* @__PURE__ */ jsx9(
+              "svg",
+              {
+                className: "w-4 h-4",
+                fill: "none",
+                stroke: "currentColor",
+                viewBox: "0 0 24 24",
+                children: /* @__PURE__ */ jsx9(
+                  "path",
+                  {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    strokeWidth: 2,
+                    d: "M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
+                  }
+                )
+              }
+            )
+          )
+        }
+      ),
+      showTooltip && !copied && /* @__PURE__ */ jsxs8("div", { className: "absolute right-0 top-full mt-2 px-2 py-1 bg-gray-800 text-white text-xs rounded shadow-lg whitespace-nowrap border border-gray-700", children: [
+        "Copy code",
+        /* @__PURE__ */ jsx9("div", { className: "absolute -top-1 right-3 w-2 h-2 bg-gray-800 border-l border-t border-gray-700 transform rotate-45" })
+      ] }),
+      copied && /* @__PURE__ */ jsxs8("div", { className: "absolute right-0 top-full mt-2 px-2 py-1 bg-green-600 text-white text-xs rounded shadow-lg whitespace-nowrap", children: [
+        "Copied!",
+        /* @__PURE__ */ jsx9("div", { className: "absolute -top-1 right-3 w-2 h-2 bg-green-600 transform rotate-45" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx9("div", { className: "rounded-lg overflow-hidden border border-gray-800", children: /* @__PURE__ */ jsx9(
+      SyntaxHighlighter,
+      {
+        language,
+        style: vscDarkPlus,
+        customStyle: {
+          margin: 0,
+          padding: "1rem 3.5rem 1rem 1rem",
+          fontSize: "0.875rem",
+          lineHeight: "1.5",
+          background: "#1a1b26"
+        },
+        showLineNumbers: false,
+        children: code
+      }
+    ) })
+  ] });
+}
+
+// src/feedback/alert.tsx
+import React6 from "react";
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+var Alert = React6.forwardRef(
+  ({
+    className,
+    variant = "info",
+    title,
+    dismissible = false,
+    onDismiss,
+    icon,
+    children,
+    ...props
+  }, ref) => {
+    const variants = {
+      info: "bg-blue-50 border-blue-200 text-blue-800",
+      success: "bg-green-50 border-green-200 text-green-800",
+      warning: "bg-yellow-50 border-yellow-200 text-yellow-800",
+      error: "bg-red-50 border-red-200 text-red-800"
+    };
+    const iconColors = {
+      info: "text-blue-500",
+      success: "text-green-500",
+      warning: "text-yellow-500",
+      error: "text-red-500"
+    };
+    const defaultIcons = {
+      info: /* @__PURE__ */ jsx10("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx10(
+        "path",
+        {
+          fillRule: "evenodd",
+          d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z",
+          clipRule: "evenodd"
+        }
+      ) }),
+      success: /* @__PURE__ */ jsx10("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx10(
+        "path",
+        {
+          fillRule: "evenodd",
+          d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z",
+          clipRule: "evenodd"
+        }
+      ) }),
+      warning: /* @__PURE__ */ jsx10("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx10(
+        "path",
+        {
+          fillRule: "evenodd",
+          d: "M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z",
+          clipRule: "evenodd"
+        }
+      ) }),
+      error: /* @__PURE__ */ jsx10("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx10(
+        "path",
+        {
+          fillRule: "evenodd",
+          d: "M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z",
+          clipRule: "evenodd"
+        }
+      ) })
+    };
+    return /* @__PURE__ */ jsx10(
+      "div",
+      {
+        ref,
+        className: cn(
+          "relative border rounded-lg p-4",
+          variants[variant],
+          className
+        ),
+        role: "alert",
+        ...props,
+        children: /* @__PURE__ */ jsxs9("div", { className: "flex items-start gap-3", children: [
+          /* @__PURE__ */ jsx10("div", { className: cn("flex-shrink-0", iconColors[variant]), children: icon || defaultIcons[variant] }),
+          /* @__PURE__ */ jsxs9("div", { className: "flex-1", children: [
+            title && /* @__PURE__ */ jsx10("h5", { className: "font-semibold mb-1", children: title }),
+            /* @__PURE__ */ jsx10("div", { className: "text-sm", children })
+          ] }),
+          dismissible && onDismiss && /* @__PURE__ */ jsx10(
+            "button",
+            {
+              type: "button",
+              onClick: onDismiss,
+              className: cn(
+                "flex-shrink-0 rounded-lg p-1.5 inline-flex focus:outline-none focus:ring-2",
+                iconColors[variant],
+                "hover:bg-black hover:bg-opacity-10"
+              ),
+              "aria-label": "Close",
+              children: /* @__PURE__ */ jsx10("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx10(
+                "path",
+                {
+                  fillRule: "evenodd",
+                  d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z",
+                  clipRule: "evenodd"
+                }
+              ) })
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
+Alert.displayName = "Alert";
+
+// src/layout/container.tsx
+import React7 from "react";
+import { jsx as jsx11 } from "react/jsx-runtime";
+var Container = React7.forwardRef(
+  ({
+    className,
+    maxWidth = "xl",
+    centered = true,
+    padding = true,
+    children,
+    ...props
+  }, ref) => {
+    const maxWidths = {
+      sm: "max-w-screen-sm",
+      md: "max-w-screen-md",
+      lg: "max-w-screen-lg",
+      xl: "max-w-screen-xl",
+      "2xl": "max-w-screen-2xl",
+      full: "max-w-full"
+    };
+    return /* @__PURE__ */ jsx11(
+      "div",
+      {
+        ref,
+        className: cn(
+          "w-full",
+          maxWidths[maxWidth],
+          centered && "mx-auto",
+          padding && "px-4 sm:px-6 lg:px-8",
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
+Container.displayName = "Container";
+
+// src/layout/section-layout.tsx
+import React8 from "react";
+import { Fragment, jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+function SectionLayout({
+  children,
+  hasStickyPreview = false
+}) {
+  if (!hasStickyPreview) {
+    return /* @__PURE__ */ jsx12(Fragment, { children });
+  }
+  const childArray = React8.Children.toArray(children);
+  if (childArray.length === 0) {
+    return null;
+  }
+  const stickyPreview = childArray[0];
+  const scrollableContent = childArray.slice(1);
+  return /* @__PURE__ */ jsxs10(Fragment, { children: [
+    stickyPreview,
+    scrollableContent.length > 0 && /* @__PURE__ */ jsx12("div", { className: "space-y-8", children: scrollableContent })
+  ] });
+}
+
+// src/layout/sidebar-nav.tsx
+import { useState as useState3 } from "react";
+import { Menu, X } from "lucide-react";
+import { Fragment as Fragment2, jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
+function SidebarNav({
+  title,
+  subtitle,
+  items,
+  activeItem,
+  onItemClick,
+  footer,
+  position = "right"
+}) {
+  const [mobileMenuOpen, setMobileMenuOpen] = useState3(false);
+  const isLeft = position === "left";
+  const handleItemClick = (itemId) => {
+    onItemClick(itemId);
+    setMobileMenuOpen(false);
+  };
+  return /* @__PURE__ */ jsxs11(Fragment2, { children: [
+    /* @__PURE__ */ jsx13("div", { className: "lg:hidden fixed top-0 left-0 right-0 z-50 bg-white border-b border-gray-200 px-4 py-3", children: /* @__PURE__ */ jsxs11(
+      "div",
+      {
+        className: `flex items-center ${isLeft ? "justify-between" : "justify-between flex-row-reverse"}`,
+        children: [
+          /* @__PURE__ */ jsx13(
+            "button",
+            {
+              onClick: () => setMobileMenuOpen(!mobileMenuOpen),
+              className: "p-2 rounded-lg hover:bg-gray-100 transition-colors",
+              "aria-label": "Toggle menu",
+              children: mobileMenuOpen ? /* @__PURE__ */ jsx13(X, { className: "w-6 h-6 text-gray-700" }) : /* @__PURE__ */ jsx13(Menu, { className: "w-6 h-6 text-gray-700" })
+            }
+          ),
+          /* @__PURE__ */ jsxs11("div", { children: [
+            /* @__PURE__ */ jsx13("h1", { className: "text-lg font-bold text-gray-900", children: title }),
+            subtitle && /* @__PURE__ */ jsx13("p", { className: "text-xs text-gray-500", children: subtitle })
+          ] })
+        ]
+      }
+    ) }),
+    mobileMenuOpen && /* @__PURE__ */ jsx13(
+      "div",
+      {
+        className: "fixed inset-0 bg-black/50 lg:hidden",
+        style: { zIndex: 35 },
+        onClick: () => setMobileMenuOpen(false)
+      }
+    ),
+    /* @__PURE__ */ jsxs11(
+      "aside",
+      {
+        className: `
+          fixed top-0 h-screen w-64 bg-white z-40
+          transition-transform duration-300 ease-in-out overflow-y-auto
+          ${isLeft ? "left-0 border-r" : "right-0 border-l"} border-gray-200
+          lg:translate-x-0
+          ${mobileMenuOpen ? "translate-x-0" : `${isLeft ? "-translate-x-full" : "translate-x-full"} lg:translate-x-0`}
+        `,
+        children: [
+          /* @__PURE__ */ jsxs11("div", { className: "hidden lg:block p-6 border-b border-gray-200", children: [
+            /* @__PURE__ */ jsx13("h1", { className: "text-xl font-bold text-gray-900", children: title }),
+            subtitle && /* @__PURE__ */ jsx13("p", { className: "text-xs text-gray-500 mt-1", children: subtitle })
+          ] }),
+          /* @__PURE__ */ jsx13("div", { className: "lg:hidden h-[57px]", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx13("nav", { className: "p-4", children: /* @__PURE__ */ jsx13("ul", { className: "space-y-1", children: items.map((item) => /* @__PURE__ */ jsx13("li", { children: /* @__PURE__ */ jsxs11(
+            "button",
+            {
+              onClick: () => handleItemClick(item.id),
+              className: `
+                    w-full flex items-center gap-3 px-4 py-3 rounded-lg text-sm font-medium transition-colors
+                    ${activeItem === item.id ? "bg-blue-50 text-blue-700" : "text-gray-700 hover:bg-gray-50"}
+                  `,
+              children: [
+                item.icon && /* @__PURE__ */ jsx13("span", { className: "shrink-0", children: item.icon }),
+                /* @__PURE__ */ jsx13("span", { children: item.label })
+              ]
+            }
+          ) }, item.id)) }) }),
+          footer && /* @__PURE__ */ jsx13("div", { className: "p-4 border-t border-gray-200 mt-auto", children: footer })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/shared/empty-state.tsx
+import React10 from "react";
+import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
+var EmptyState = React10.forwardRef(
+  ({ className, icon, title, description, action, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs12(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex flex-col items-center justify-center text-center py-12 px-4",
+          className
+        ),
+        ...props,
+        children: [
+          icon && /* @__PURE__ */ jsx14("div", { className: "mb-4 text-gray-400", children: icon }),
+          /* @__PURE__ */ jsx14("h3", { className: "text-lg font-semibold text-gray-900 mb-2", children: title }),
+          description && /* @__PURE__ */ jsx14("p", { className: "text-sm text-gray-500 mb-6 max-w-sm", children: description }),
+          action && /* @__PURE__ */ jsx14("div", { children: action })
+        ]
+      }
+    );
+  }
+);
+EmptyState.displayName = "EmptyState";
+export {
+  Alert,
+  Badge,
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  Checkbox,
+  CheckboxGroup,
+  CodeSnippet,
+  Container,
+  Dropdown,
+  EmptyState,
+  Input,
+  RadioGroup,
+  SectionLayout,
+  SidebarNav,
+  Spinner,
+  cn
+};
+//# sourceMappingURL=index.mjs.map