@yomologic/react-ui 0.1.0

package/dist/index.js

@@ -0,0 +1,1104 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Alert: () => Alert,
+  Badge: () => Badge,
+  Button: () => Button,
+  Card: () => Card,
+  CardContent: () => CardContent,
+  CardDescription: () => CardDescription,
+  CardFooter: () => CardFooter,
+  CardHeader: () => CardHeader,
+  CardTitle: () => CardTitle,
+  Checkbox: () => Checkbox,
+  CheckboxGroup: () => CheckboxGroup,
+  CodeSnippet: () => CodeSnippet,
+  Container: () => Container,
+  Dropdown: () => Dropdown,
+  EmptyState: () => EmptyState,
+  Input: () => Input,
+  RadioGroup: () => RadioGroup,
+  SectionLayout: () => SectionLayout,
+  SidebarNav: () => SidebarNav,
+  Spinner: () => Spinner,
+  cn: () => cn
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/ui/button.tsx
+var import_react = __toESM(require("react"));
+
+// src/lib/utils.ts
+var import_clsx = require("clsx");
+function cn(...inputs) {
+  return (0, import_clsx.clsx)(inputs);
+}
+
+// src/ui/button.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var Button = import_react.default.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__ */ (0, import_jsx_runtime.jsxs)(
+      "button",
+      {
+        ref,
+        className: cn(
+          baseStyles,
+          variants[variant],
+          sizes[size],
+          radiusStyle,
+          fontWeightStyle,
+          className
+        ),
+        disabled: disabled || isLoading,
+        ...props,
+        children: [
+          isLoading && /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(
+                  "circle",
+                  {
+                    className: "opacity-25",
+                    cx: "12",
+                    cy: "12",
+                    r: "10",
+                    stroke: "currentColor",
+                    strokeWidth: "4"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime.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
+var import_react2 = __toESM(require("react"));
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Input = import_react2.default.forwardRef(
+  ({
+    className,
+    type = "text",
+    label,
+    error,
+    helperText,
+    leftIcon,
+    rightIcon,
+    fullWidth = false,
+    id,
+    ...props
+  }, ref) => {
+    const inputId = id || label?.toLowerCase().replace(/\s+/g, "-");
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: cn("flex flex-col", fullWidth && "w-full"), children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+        "label",
+        {
+          htmlFor: inputId,
+          className: "block text-sm font-semibold text-gray-600 mb-1",
+          children: [
+            label,
+            props.required && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-red-500 ml-1", children: "*" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "relative", children: [
+        leftIcon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400", children: leftIcon }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "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__ */ (0, import_jsx_runtime2.jsx)("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none text-gray-400", children: rightIcon })
+      ] }),
+      error && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "mt-1 text-sm text-red-600", children: error }),
+      helperText && !error && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "mt-1 text-sm text-gray-500", children: helperText })
+    ] });
+  }
+);
+Input.displayName = "Input";
+
+// src/ui/card.tsx
+var import_react3 = __toESM(require("react"));
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Card = import_react3.default.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__ */ (0, import_jsx_runtime3.jsx)(
+      "div",
+      {
+        ref,
+        className: cn(
+          baseStyles,
+          variants[variant],
+          paddings[padding],
+          hoverStyles,
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
+Card.displayName = "Card";
+var CardHeader = import_react3.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  "div",
+  {
+    ref,
+    className: cn("flex flex-col space-y-1.5", className),
+    ...props
+  }
+));
+CardHeader.displayName = "CardHeader";
+var CardTitle = import_react3.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  "h3",
+  {
+    ref,
+    className: cn("text-lg font-semibold text-gray-800", className),
+    ...props
+  }
+));
+CardTitle.displayName = "CardTitle";
+var CardDescription = import_react3.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { ref, className: cn("text-sm text-gray-600", className), ...props }));
+CardDescription.displayName = "CardDescription";
+var CardContent = import_react3.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { ref, className: cn("pt-0", className), ...props }));
+CardContent.displayName = "CardContent";
+var CardFooter = import_react3.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  "div",
+  {
+    ref,
+    className: cn("flex items-center pt-4", className),
+    ...props
+  }
+));
+CardFooter.displayName = "CardFooter";
+
+// src/ui/badge.tsx
+var import_react4 = __toESM(require("react"));
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var Badge = import_react4.default.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__ */ (0, import_jsx_runtime4.jsxs)(
+      "span",
+      {
+        ref,
+        className: cn(baseStyles, variants[variant], sizes[size], className),
+        ...props,
+        children: [
+          dot && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "span",
+            {
+              className: cn("w-2 h-2 rounded-full mr-1.5", dotVariants[variant])
+            }
+          ),
+          children
+        ]
+      }
+    );
+  }
+);
+Badge.displayName = "Badge";
+
+// src/ui/checkbox.tsx
+var import_jsx_runtime5 = require("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__ */ (0, import_jsx_runtime5.jsxs)("div", { className: cn("flex items-center", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "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__ */ (0, import_jsx_runtime5.jsx)(
+      "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__ */ (0, import_jsx_runtime5.jsxs)("div", { className, children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { className: "block text-sm font-semibold text-gray-600 mb-1", children: [
+      label,
+      required && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-red-500 ml-1", children: "*" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "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__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              "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__ */ (0, import_jsx_runtime5.jsx)(
+              "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
+var import_jsx_runtime6 = require("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__ */ (0, import_jsx_runtime6.jsxs)("div", { className, children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { className: "block text-sm font-semibold text-gray-600 mb-1", children: [
+      label,
+      required && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-red-500 ml-1", children: "*" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "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__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-center", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              "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__ */ (0, import_jsx_runtime6.jsx)(
+              "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
+var import_react5 = require("react");
+var import_lucide_react = require("lucide-react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function Dropdown({
+  label,
+  placeholder = "Select an option",
+  options = [],
+  value,
+  onChange,
+  children,
+  disabled = false,
+  error,
+  helperText,
+  required = false,
+  className = ""
+}) {
+  const [isOpen, setIsOpen] = (0, import_react5.useState)(false);
+  const dropdownRef = (0, import_react5.useRef)(null);
+  const getSelectedLabel = () => {
+    if (!value) return placeholder;
+    const selected = options.find((opt) => opt.value === value);
+    return selected ? selected.label : placeholder;
+  };
+  (0, import_react5.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__ */ (0, import_jsx_runtime7.jsxs)("div", { className: `w-full ${className}`, children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { className: "block text-sm font-semibold text-gray-600 mb-1", children: [
+      label,
+      required && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-red-500 ml-1", children: "*" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { ref: dropdownRef, className: "relative", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+        "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__ */ (0, import_jsx_runtime7.jsx)("span", { className: "truncate", children: getSelectedLabel() }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              import_lucide_react.ChevronDown,
+              {
+                className: `w-5 h-5 text-gray-400 transition-transform duration-200 shrink-0 ml-2 ${isOpen ? "transform rotate-180" : ""}`
+              }
+            )
+          ]
+        }
+      ),
+      isOpen && !disabled && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        "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__ */ (0, import_jsx_runtime7.jsx)("div", { onClick: () => setIsOpen(false), children })
+          ) : (
+            // Standard options
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("ul", { children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              "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__ */ (0, import_jsx_runtime7.jsx)(
+      "p",
+      {
+        className: `mt-1 text-xs ${error ? "text-red-600" : "text-gray-500"}`,
+        children: error || helperText
+      }
+    )
+  ] });
+}
+
+// src/ui/spinner.tsx
+var import_react6 = __toESM(require("react"));
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var Spinner = import_react6.default.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__ */ (0, import_jsx_runtime8.jsxs)(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex flex-col items-center justify-center gap-2",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+            "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__ */ (0, import_jsx_runtime8.jsx)(
+                  "circle",
+                  {
+                    className: "opacity-25",
+                    cx: "12",
+                    cy: "12",
+                    r: "10",
+                    stroke: "currentColor",
+                    strokeWidth: "4"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime8.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"
+                  }
+                )
+              ]
+            }
+          ),
+          label && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-sm text-gray-600", children: label })
+        ]
+      }
+    );
+  }
+);
+Spinner.displayName = "Spinner";
+
+// src/ui/code-snippet.tsx
+var import_react7 = require("react");
+var import_react_syntax_highlighter = require("react-syntax-highlighter");
+var import_prism = require("react-syntax-highlighter/dist/esm/styles/prism");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function CodeSnippet({ code, language = "tsx" }) {
+  const [copied, setCopied] = (0, import_react7.useState)(false);
+  const [showTooltip, setShowTooltip] = (0, import_react7.useState)(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__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "relative group", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "absolute right-3 top-3 z-10", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        "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__ */ (0, import_jsx_runtime9.jsx)(
+              "svg",
+              {
+                className: "w-4 h-4 text-green-400",
+                fill: "none",
+                stroke: "currentColor",
+                viewBox: "0 0 24 24",
+                children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                  "path",
+                  {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    strokeWidth: 2,
+                    d: "M5 13l4 4L19 7"
+                  }
+                )
+              }
+            )
+          ) : (
+            // Copy icon
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              "svg",
+              {
+                className: "w-4 h-4",
+                fill: "none",
+                stroke: "currentColor",
+                viewBox: "0 0 24 24",
+                children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                  "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__ */ (0, import_jsx_runtime9.jsxs)("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__ */ (0, import_jsx_runtime9.jsx)("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__ */ (0, import_jsx_runtime9.jsxs)("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__ */ (0, import_jsx_runtime9.jsx)("div", { className: "absolute -top-1 right-3 w-2 h-2 bg-green-600 transform rotate-45" })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "rounded-lg overflow-hidden border border-gray-800", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      import_react_syntax_highlighter.Prism,
+      {
+        language,
+        style: import_prism.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
+var import_react8 = __toESM(require("react"));
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var Alert = import_react8.default.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__ */ (0, import_jsx_runtime10.jsx)("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        "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__ */ (0, import_jsx_runtime10.jsx)("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        "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__ */ (0, import_jsx_runtime10.jsx)("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        "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__ */ (0, import_jsx_runtime10.jsx)("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        "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__ */ (0, import_jsx_runtime10.jsx)(
+      "div",
+      {
+        ref,
+        className: cn(
+          "relative border rounded-lg p-4",
+          variants[variant],
+          className
+        ),
+        role: "alert",
+        ...props,
+        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-start gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: cn("flex-shrink-0", iconColors[variant]), children: icon || defaultIcons[variant] }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex-1", children: [
+            title && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h5", { className: "font-semibold mb-1", children: title }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "text-sm", children })
+          ] }),
+          dismissible && onDismiss && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            "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__ */ (0, import_jsx_runtime10.jsx)("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                "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
+var import_react9 = __toESM(require("react"));
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var Container = import_react9.default.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__ */ (0, import_jsx_runtime11.jsx)(
+      "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
+var import_react10 = __toESM(require("react"));
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function SectionLayout({
+  children,
+  hasStickyPreview = false
+}) {
+  if (!hasStickyPreview) {
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, { children });
+  }
+  const childArray = import_react10.default.Children.toArray(children);
+  if (childArray.length === 0) {
+    return null;
+  }
+  const stickyPreview = childArray[0];
+  const scrollableContent = childArray.slice(1);
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+    stickyPreview,
+    scrollableContent.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "space-y-8", children: scrollableContent })
+  ] });
+}
+
+// src/layout/sidebar-nav.tsx
+var import_react11 = require("react");
+var import_lucide_react2 = require("lucide-react");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function SidebarNav({
+  title,
+  subtitle,
+  items,
+  activeItem,
+  onItemClick,
+  footer,
+  position = "right"
+}) {
+  const [mobileMenuOpen, setMobileMenuOpen] = (0, import_react11.useState)(false);
+  const isLeft = position === "left";
+  const handleItemClick = (itemId) => {
+    onItemClick(itemId);
+    setMobileMenuOpen(false);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("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__ */ (0, import_jsx_runtime13.jsxs)(
+      "div",
+      {
+        className: `flex items-center ${isLeft ? "justify-between" : "justify-between flex-row-reverse"}`,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            "button",
+            {
+              onClick: () => setMobileMenuOpen(!mobileMenuOpen),
+              className: "p-2 rounded-lg hover:bg-gray-100 transition-colors",
+              "aria-label": "Toggle menu",
+              children: mobileMenuOpen ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react2.X, { className: "w-6 h-6 text-gray-700" }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react2.Menu, { className: "w-6 h-6 text-gray-700" })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("h1", { className: "text-lg font-bold text-gray-900", children: title }),
+            subtitle && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "text-xs text-gray-500", children: subtitle })
+          ] })
+        ]
+      }
+    ) }),
+    mobileMenuOpen && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      "div",
+      {
+        className: "fixed inset-0 bg-black/50 lg:hidden",
+        style: { zIndex: 35 },
+        onClick: () => setMobileMenuOpen(false)
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+      "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__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "hidden lg:block p-6 border-b border-gray-200", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("h1", { className: "text-xl font-bold text-gray-900", children: title }),
+            subtitle && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "text-xs text-gray-500 mt-1", children: subtitle })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "lg:hidden h-[57px]", "aria-hidden": "true" }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("nav", { className: "p-4", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("ul", { className: "space-y-1", children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+            "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__ */ (0, import_jsx_runtime13.jsx)("span", { className: "shrink-0", children: item.icon }),
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: item.label })
+              ]
+            }
+          ) }, item.id)) }) }),
+          footer && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "p-4 border-t border-gray-200 mt-auto", children: footer })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/shared/empty-state.tsx
+var import_react12 = __toESM(require("react"));
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var EmptyState = import_react12.default.forwardRef(
+  ({ className, icon, title, description, action, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex flex-col items-center justify-center text-center py-12 px-4",
+          className
+        ),
+        ...props,
+        children: [
+          icon && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "mb-4 text-gray-400", children: icon }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("h3", { className: "text-lg font-semibold text-gray-900 mb-2", children: title }),
+          description && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "text-sm text-gray-500 mb-6 max-w-sm", children: description }),
+          action && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { children: action })
+        ]
+      }
+    );
+  }
+);
+EmptyState.displayName = "EmptyState";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Alert,
+  Badge,
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  Checkbox,
+  CheckboxGroup,
+  CodeSnippet,
+  Container,
+  Dropdown,
+  EmptyState,
+  Input,
+  RadioGroup,
+  SectionLayout,
+  SidebarNav,
+  Spinner,
+  cn
+});
+//# sourceMappingURL=index.js.map