@dynamicnorway/react 1.0.0

package/dist/index.js

@@ -0,0 +1,1705 @@
+// src/lib/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/components/button.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var buttonVariantClasses = {
+  primary: "bg-primary-600 text-white hover:bg-primary-700 focus:ring-primary-500 border-transparent",
+  secondary: "bg-background-secondary text-text-primary hover:bg-background-tertiary focus:ring-primary-500 border-border-primary",
+  outline: "bg-transparent text-text-primary hover:bg-background-tertiary focus:ring-primary-500 border-border-primary",
+  danger: "bg-red-600 text-white hover:bg-red-700 focus:ring-red-500 border-transparent",
+  destructive: "bg-red-600 text-white hover:bg-red-700 focus:ring-red-500 border-transparent",
+  ghost: "bg-transparent text-text-primary hover:bg-background-tertiary focus:ring-primary-500 border-transparent"
+};
+var buttonSizeClasses = {
+  sm: "px-3 py-1.5 text-sm",
+  md: "px-4 py-2 text-sm",
+  lg: "px-6 py-3 text-base"
+};
+var Button = ({
+  className = "",
+  variant = "primary",
+  size = "md",
+  loading = false,
+  fullWidth = false,
+  disabled,
+  children,
+  ref,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ref,
+      disabled: disabled || loading,
+      className: `
+          inline-flex items-center justify-center
+          font-medium rounded-md border
+          focus:outline-none focus:ring-2 focus:ring-offset-2
+          cursor-pointer
+          disabled:opacity-50 disabled:cursor-not-allowed
+          transition-colors
+          ${buttonVariantClasses[variant]}
+          ${buttonSizeClasses[size]}
+          ${fullWidth ? "w-full" : ""}
+          ${className}
+        `.trim().replace(/\s+/g, " "),
+      ...props,
+      children: [
+        loading && /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            className: "animate-spin -ml-1 mr-2 h-4 w-4",
+            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"
+                }
+              )
+            ]
+          }
+        ),
+        children
+      ]
+    }
+  );
+};
+Button.displayName = "Button";
+
+// src/components/form-field.tsx
+import React, { useId } from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function FormField({
+  label,
+  required = false,
+  error,
+  helperText,
+  className = "",
+  children,
+  htmlFor
+}) {
+  const generatedId = useId();
+  const inputId = htmlFor || generatedId;
+  return /* @__PURE__ */ jsxs2("div", { className: `space-y-1 ${className}`, children: [
+    label && /* @__PURE__ */ jsxs2(
+      "label",
+      {
+        htmlFor: inputId,
+        className: "block text-sm font-medium text-text-primary",
+        children: [
+          label,
+          required && /* @__PURE__ */ jsx2("span", { className: "text-red-500 ml-1", children: "*" })
+        ]
+      }
+    ),
+    React.isValidElement(children) ? React.cloneElement(children, {
+      id: inputId,
+      "aria-invalid": !!error,
+      "aria-describedby": error ? `${inputId}-error` : helperText ? `${inputId}-helper` : void 0
+    }) : children,
+    error && /* @__PURE__ */ jsx2(
+      "p",
+      {
+        id: `${inputId}-error`,
+        className: "text-sm text-red-600 dark:text-red-400",
+        role: "alert",
+        children: error
+      }
+    ),
+    !error && helperText && /* @__PURE__ */ jsx2(
+      "p",
+      {
+        id: `${inputId}-helper`,
+        className: "text-sm text-text-secondary",
+        children: helperText
+      }
+    )
+  ] });
+}
+
+// src/components/input-styles.ts
+var baseInputClasses = `
+  w-full px-3 py-2 
+  border rounded-md 
+  text-text-primary
+  bg-background-secondary
+  border-border-primary
+  placeholder-text-tertiary
+  focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500
+  disabled:bg-background-tertiary disabled:cursor-not-allowed disabled:opacity-60
+  transition-colors
+`.trim().replace(/\s+/g, " ");
+var errorInputClasses = `
+  border-red-500 dark:border-red-500
+  focus:ring-red-500 focus:border-red-500
+`.trim().replace(/\s+/g, " ");
+
+// src/components/input.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Input = ({
+  className = "",
+  hasError = false,
+  onKeyDown,
+  ref,
+  ...props
+}) => {
+  const handleKeyDown = (e) => {
+    if ((e.metaKey || e.ctrlKey) && e.key === "a") {
+      e.preventDefault();
+      e.currentTarget.select();
+    }
+    onKeyDown?.(e);
+  };
+  return /* @__PURE__ */ jsx3(
+    "input",
+    {
+      ref,
+      className: `${baseInputClasses} ${hasError ? errorInputClasses : ""} ${className}`,
+      onKeyDown: handleKeyDown,
+      ...props
+    }
+  );
+};
+Input.displayName = "Input";
+
+// src/components/textarea.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var Textarea = ({
+  className = "",
+  hasError = false,
+  autoResize = false,
+  onChange,
+  onKeyDown,
+  ref,
+  ...props
+}) => {
+  const handleChange = (e) => {
+    if (autoResize) {
+      e.target.style.height = "auto";
+      e.target.style.height = `${e.target.scrollHeight}px`;
+    }
+    onChange?.(e);
+  };
+  const handleKeyDown = (e) => {
+    if ((e.metaKey || e.ctrlKey) && e.key === "a") {
+      e.preventDefault();
+      e.currentTarget.select();
+    }
+    onKeyDown?.(e);
+  };
+  return /* @__PURE__ */ jsx4(
+    "textarea",
+    {
+      ref,
+      className: `${baseInputClasses} ${hasError ? errorInputClasses : ""} ${autoResize ? "resize-none overflow-hidden" : ""} ${className}`,
+      onChange: handleChange,
+      onKeyDown: handleKeyDown,
+      ...props
+    }
+  );
+};
+Textarea.displayName = "Textarea";
+
+// src/components/select.tsx
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var Select = ({
+  className = "",
+  hasError = false,
+  placeholder,
+  options,
+  children,
+  ref,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs3(
+    "select",
+    {
+      ref,
+      className: `${baseInputClasses} ${hasError ? errorInputClasses : ""} ${className}`,
+      ...props,
+      children: [
+        placeholder && /* @__PURE__ */ jsx5("option", { value: "", disabled: true, children: placeholder }),
+        options ? options.map((option) => /* @__PURE__ */ jsx5(
+          "option",
+          {
+            value: option.value,
+            disabled: option.disabled,
+            children: option.label
+          },
+          option.value
+        )) : children
+      ]
+    }
+  );
+};
+Select.displayName = "Select";
+
+// src/components/checkbox.tsx
+import { useId as useId2 } from "react";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+var Checkbox = ({
+  className = "",
+  label,
+  id,
+  ref,
+  ...props
+}) => {
+  const generatedId = useId2();
+  const checkboxId = id || generatedId;
+  return /* @__PURE__ */ jsxs4("div", { className: `flex items-center ${className}`, children: [
+    /* @__PURE__ */ jsx6(
+      "input",
+      {
+        ref,
+        type: "checkbox",
+        id: checkboxId,
+        className: "h-4 w-4 rounded border-border-primary text-primary-600 focus:ring-primary-500 bg-background-secondary",
+        ...props
+      }
+    ),
+    label && /* @__PURE__ */ jsx6("label", { htmlFor: checkboxId, className: "ml-2 text-sm text-text-primary", children: label })
+  ] });
+};
+Checkbox.displayName = "Checkbox";
+
+// src/components/dialog.tsx
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+var Dialog = DialogPrimitive.Root;
+var DialogTrigger = DialogPrimitive.Trigger;
+var DialogPortal = DialogPrimitive.Portal;
+var DialogClose = DialogPrimitive.Close;
+var DialogOverlay = ({ className, ref, ...props }) => /* @__PURE__ */ jsx7(
+  DialogPrimitive.Overlay,
+  {
+    ref,
+    className: cn(
+      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    ),
+    ...props
+  }
+);
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+var DialogContent = ({
+  className,
+  children,
+  closeLabel = "Close",
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsxs5(DialogPortal, { children: [
+  /* @__PURE__ */ jsx7(DialogOverlay, {}),
+  /* @__PURE__ */ jsxs5(
+    DialogPrimitive.Content,
+    {
+      ref,
+      className: cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-full data-[state=open]:slide-in-from-left-full sm:rounded-lg",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsxs5(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", children: [
+          /* @__PURE__ */ jsx7(X, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx7("span", { className: "sr-only", children: closeLabel })
+        ] })
+      ]
+    }
+  )
+] });
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+var DialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsx7("div", { className: cn("flex flex-col space-y-1.5 text-center sm:text-left", className), ...props });
+DialogHeader.displayName = "DialogHeader";
+var DialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsx7(
+  "div",
+  {
+    className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className),
+    ...props
+  }
+);
+DialogFooter.displayName = "DialogFooter";
+var DialogTitle = ({ className, ref, ...props }) => /* @__PURE__ */ jsx7(
+  DialogPrimitive.Title,
+  {
+    ref,
+    className: cn("text-lg font-semibold leading-none tracking-tight", className),
+    ...props
+  }
+);
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+var DialogDescription = ({ className, ref, ...props }) => /* @__PURE__ */ jsx7(
+  DialogPrimitive.Description,
+  {
+    ref,
+    className: cn("text-sm text-muted-foreground", className),
+    ...props
+  }
+);
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+var ConfirmDialog = ({
+  open,
+  onClose,
+  onConfirm,
+  title,
+  message,
+  confirmText = "Confirm",
+  cancelText = "Cancel",
+  variant = "default",
+  loading = false,
+  loadingText = "Loading..."
+}) => /* @__PURE__ */ jsx7(Dialog, { open, onOpenChange: (isOpen) => !isOpen && onClose(), children: /* @__PURE__ */ jsxs5(DialogContent, { className: "sm:max-w-[500px]", children: [
+  /* @__PURE__ */ jsxs5(DialogHeader, { children: [
+    /* @__PURE__ */ jsx7(DialogTitle, { children: title }),
+    /* @__PURE__ */ jsx7(DialogDescription, { children: message })
+  ] }),
+  /* @__PURE__ */ jsxs5(DialogFooter, { children: [
+    /* @__PURE__ */ jsx7(
+      "button",
+      {
+        onClick: onClose,
+        disabled: loading,
+        className: "px-4 py-2 text-sm font-medium text-text-primary bg-background-secondary border border-border-primary rounded-md hover:bg-background-tertiary focus:outline-none focus:ring-2 focus:ring-primary-500 disabled:opacity-50 disabled:cursor-not-allowed",
+        children: cancelText
+      }
+    ),
+    /* @__PURE__ */ jsx7(
+      "button",
+      {
+        onClick: onConfirm,
+        disabled: loading,
+        className: `px-4 py-2 text-sm font-medium text-white rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed ${variant === "danger" ? "bg-red-600 hover:bg-red-700 focus:ring-red-500" : "bg-primary-600 hover:bg-primary-700 focus:ring-primary-500"}`,
+        children: loading ? loadingText : confirmText
+      }
+    )
+  ] })
+] }) });
+
+// src/components/card.tsx
+import React3 from "react";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var Card = React3.forwardRef(
+  ({ children, variant = "default", className = "", onClick }, ref) => {
+    const baseStyles = "bg-background-secondary rounded-lg shadow-sm border border-border-primary transition-all duration-150";
+    const variantStyles = {
+      default: "",
+      interactive: "cursor-pointer hover:shadow-md hover:border-primary-300 dark:hover:border-primary-600"
+    };
+    const buttonResetStyles = onClick ? "w-full text-left p-0 m-0 font-inherit block appearance-none flex flex-col cursor-pointer" : "";
+    const Component = onClick ? "button" : "div";
+    return /* @__PURE__ */ jsx8(
+      Component,
+      {
+        ref,
+        className: `${baseStyles} ${variantStyles[variant]} ${buttonResetStyles} ${className}`,
+        onClick,
+        children
+      }
+    );
+  }
+);
+Card.displayName = "Card";
+var CardHeader = ({ children, className = "" }) => /* @__PURE__ */ jsx8("div", { className: `px-6 py-4 border-b border-border-primary ${className}`, children });
+var CardBody = ({ children, className = "" }) => /* @__PURE__ */ jsx8("div", { className: `px-6 py-4 flex flex-col ${className}`, children });
+var CardFooter = ({ children, className = "" }) => /* @__PURE__ */ jsx8("div", { className: `px-6 py-4 border-t border-border-primary ${className}`, children });
+
+// src/components/loading-spinner.tsx
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+var LoadingSpinner = ({
+  size = "md",
+  className = ""
+}) => {
+  const sizeStyles = {
+    sm: "w-4 h-4",
+    md: "w-8 h-8",
+    lg: "w-12 h-12"
+  };
+  return /* @__PURE__ */ jsxs6(
+    "svg",
+    {
+      className: `animate-spin ${sizeStyles[size]} text-primary-600 dark:text-primary-400 ${className}`,
+      fill: "none",
+      viewBox: "0 0 24 24",
+      children: [
+        /* @__PURE__ */ jsx9(
+          "circle",
+          {
+            className: "opacity-25",
+            cx: "12",
+            cy: "12",
+            r: "10",
+            stroke: "currentColor",
+            strokeWidth: "4"
+          }
+        ),
+        /* @__PURE__ */ jsx9(
+          "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"
+          }
+        )
+      ]
+    }
+  );
+};
+var LoadingScreen = ({
+  message = "Loading..."
+}) => /* @__PURE__ */ jsxs6("div", { className: "flex flex-col items-center justify-center min-h-[400px] space-y-4", children: [
+  /* @__PURE__ */ jsx9(LoadingSpinner, { size: "lg" }),
+  /* @__PURE__ */ jsx9("p", { className: "text-text-secondary", children: message })
+] });
+
+// src/components/badge.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
+var Badge = ({
+  children,
+  variant = "default",
+  size = "md",
+  className = ""
+}) => {
+  const baseStyles = "inline-flex items-center justify-center font-medium rounded-full whitespace-nowrap";
+  const variantStyles = {
+    default: "bg-background-tertiary text-text-primary",
+    success: "bg-primary-100 dark:bg-primary-900 text-primary-700 dark:text-primary-300",
+    warning: "bg-amber-100 dark:bg-amber-900 text-amber-700 dark:text-amber-300",
+    error: "bg-red-100 dark:bg-red-900 text-red-700 dark:text-red-300",
+    info: "bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300"
+  };
+  const sizeStyles = {
+    sm: "text-xs px-2 py-0.5",
+    md: "text-sm px-2.5 py-1"
+  };
+  return /* @__PURE__ */ jsx10(
+    "span",
+    {
+      className: `${baseStyles} ${variantStyles[variant]} ${sizeStyles[size]} ${className}`,
+      children
+    }
+  );
+};
+
+// src/components/empty-state.tsx
+import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+var EmptyState = ({
+  icon,
+  title,
+  description,
+  action,
+  className = ""
+}) => /* @__PURE__ */ jsxs7(
+  "div",
+  {
+    className: `flex flex-col items-center justify-center py-12 px-4 text-center ${className}`,
+    children: [
+      icon && /* @__PURE__ */ jsx11("div", { className: "mb-4 text-text-tertiary", children: icon }),
+      /* @__PURE__ */ jsx11("h3", { className: "text-lg font-semibold text-text-primary mb-2", children: title }),
+      description && /* @__PURE__ */ jsx11("p", { className: "text-sm text-text-secondary mb-6 max-w-md", children: description }),
+      action && /* @__PURE__ */ jsx11(
+        "button",
+        {
+          onClick: action.onClick,
+          className: "px-4 py-2 bg-primary-600 text-white rounded-md hover:bg-primary-700 transition-colors cursor-pointer",
+          children: action.label
+        }
+      )
+    ]
+  }
+);
+
+// src/components/slide-over.tsx
+import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+var sizeClasses = {
+  sm: "max-w-sm",
+  md: "max-w-md",
+  lg: "max-w-lg",
+  xl: "max-w-4xl",
+  full: "max-w-full"
+};
+function SlideOver({
+  open,
+  onClose,
+  title,
+  description,
+  children,
+  footer,
+  size = "md",
+  closeLabel = "Close"
+}) {
+  return /* @__PURE__ */ jsx12(Dialog, { open, onOpenChange: (isOpen) => !isOpen && onClose(), children: /* @__PURE__ */ jsxs8(DialogContent, { className: cn(sizeClasses[size], "max-h-[90vh] flex flex-col"), closeLabel, children: [
+    /* @__PURE__ */ jsxs8(DialogHeader, { children: [
+      /* @__PURE__ */ jsx12(DialogTitle, { children: title }),
+      description && /* @__PURE__ */ jsx12(DialogDescription, { children: description })
+    ] }),
+    /* @__PURE__ */ jsx12("div", { className: "flex-1 overflow-y-auto min-h-0 px-1", children }),
+    footer && /* @__PURE__ */ jsx12(DialogFooter, { className: "mt-4", children: footer })
+  ] }) });
+}
+function FormSlideOver({
+  open,
+  onClose,
+  title,
+  description,
+  children,
+  submitText = "Save changes",
+  cancelText = "Cancel",
+  deleteText = "Delete",
+  savingText = "Saving...",
+  deletingText = "Deleting...",
+  unsavedChangesConfirm = "You have unsaved changes. Are you sure you want to close?",
+  onSubmit,
+  onDelete,
+  isSubmitting = false,
+  isDeleting = false,
+  hasChanges = false,
+  size = "md",
+  closeLabel
+}) {
+  const handleClose = () => {
+    if (hasChanges) {
+      if (confirm(unsavedChangesConfirm)) {
+        onClose();
+      }
+    } else {
+      onClose();
+    }
+  };
+  return /* @__PURE__ */ jsx12(
+    SlideOver,
+    {
+      open,
+      onClose: handleClose,
+      title,
+      description,
+      size,
+      closeLabel,
+      footer: /* @__PURE__ */ jsxs8("div", { className: "flex flex-col-reverse sm:flex-row sm:justify-between w-full gap-2", children: [
+        onDelete && /* @__PURE__ */ jsx12(
+          "button",
+          {
+            type: "button",
+            onClick: onDelete,
+            disabled: isDeleting || isSubmitting,
+            className: "w-full sm:w-auto px-4 py-2 text-sm font-medium text-white bg-red-600 rounded-md hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 disabled:opacity-50",
+            children: isDeleting ? deletingText : deleteText
+          }
+        ),
+        /* @__PURE__ */ jsxs8("div", { className: "flex flex-col-reverse sm:flex-row gap-2 sm:ml-auto", children: [
+          /* @__PURE__ */ jsx12(
+            "button",
+            {
+              type: "button",
+              onClick: handleClose,
+              disabled: isSubmitting || isDeleting,
+              className: "w-full sm:w-auto px-4 py-2 text-sm font-medium text-text-primary bg-background-secondary border border-border-primary rounded-md hover:bg-background-tertiary focus:outline-none focus:ring-2 focus:ring-primary-500 disabled:opacity-50",
+              children: cancelText
+            }
+          ),
+          /* @__PURE__ */ jsx12(
+            "button",
+            {
+              type: "button",
+              onClick: onSubmit,
+              disabled: isSubmitting || isDeleting,
+              className: "w-full sm:w-auto px-4 py-2 text-sm font-medium text-white bg-primary-600 rounded-md hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 disabled:opacity-50",
+              children: isSubmitting ? savingText : submitText
+            }
+          )
+        ] })
+      ] }),
+      children
+    }
+  );
+}
+
+// src/components/entity-form.tsx
+import { useRef, useEffect, useCallback } from "react";
+import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
+var EntityForm = ({
+  isEdit = false,
+  isSaving = false,
+  error,
+  onSave,
+  onCancel,
+  onDelete,
+  saveLabel = "Save",
+  cancelLabel = "Cancel",
+  deleteLabel = "Delete",
+  savingLabel = "Saving...",
+  deleteConfirmMessage = "Are you sure you want to delete this?",
+  showDelete = true,
+  autoFocus = true,
+  className = "",
+  children
+}) => {
+  const formRef = useRef(null);
+  useEffect(() => {
+    if (autoFocus && formRef.current) {
+      const firstInput = formRef.current.querySelector(
+        'input:not([type="hidden"]):not([disabled]), textarea:not([disabled]), select:not([disabled])'
+      );
+      if (firstInput) {
+        setTimeout(() => {
+          firstInput.focus();
+        }, 50);
+      }
+    }
+  }, [autoFocus]);
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (isSaving) return;
+      if (e.key === "Escape") {
+        e.preventDefault();
+        onCancel();
+        return;
+      }
+      if (e.key === "Enter" && !(e.target instanceof HTMLTextAreaElement)) {
+        if (e.ctrlKey || e.metaKey) {
+          e.preventDefault();
+          onSave();
+        }
+      }
+    },
+    [isSaving, onSave, onCancel]
+  );
+  const handleDelete = () => {
+    if (onDelete && window.confirm(deleteConfirmMessage)) {
+      onDelete();
+    }
+  };
+  return /* @__PURE__ */ jsxs9(
+    "div",
+    {
+      ref: formRef,
+      className: `bg-background-secondary border border-border-primary rounded-lg p-4 ${className}`,
+      onKeyDown: handleKeyDown,
+      children: [
+        /* @__PURE__ */ jsx13("div", { className: "space-y-4", children }),
+        error && /* @__PURE__ */ jsx13("div", { className: "mt-4 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-md", children: /* @__PURE__ */ jsx13("p", { className: "text-sm text-red-600 dark:text-red-400", children: error }) }),
+        /* @__PURE__ */ jsxs9("div", { className: "mt-6 flex items-center justify-between", children: [
+          /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx13(Button, { type: "button", variant: "primary", onClick: onSave, loading: isSaving, disabled: isSaving, children: isSaving ? savingLabel : saveLabel }),
+            /* @__PURE__ */ jsx13(Button, { type: "button", variant: "secondary", onClick: onCancel, disabled: isSaving, children: cancelLabel })
+          ] }),
+          isEdit && showDelete && onDelete && /* @__PURE__ */ jsx13(Button, { type: "button", variant: "danger", onClick: handleDelete, disabled: isSaving, children: deleteLabel })
+        ] }),
+        /* @__PURE__ */ jsxs9("div", { className: "mt-3 text-xs text-text-tertiary", children: [
+          /* @__PURE__ */ jsx13("kbd", { className: "px-1.5 py-0.5 bg-background-primary rounded", children: "Esc" }),
+          " to cancel",
+          /* @__PURE__ */ jsx13("span", { className: "mx-2", children: "\xB7" }),
+          /* @__PURE__ */ jsx13("kbd", { className: "px-1.5 py-0.5 bg-background-primary rounded", children: "\u2318" }),
+          "+",
+          /* @__PURE__ */ jsx13("kbd", { className: "px-1.5 py-0.5 bg-background-primary rounded", children: "Enter" }),
+          " to save"
+        ] })
+      ]
+    }
+  );
+};
+
+// src/components/search-input.tsx
+import { useState, useRef as useRef2, useEffect as useEffect2, useCallback as useCallback2 } from "react";
+import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
+var sizeClasses2 = {
+  sm: {
+    input: "h-8 text-sm",
+    icon: "w-4 h-4",
+    padding: "pl-8 pr-8",
+    collapsedWidth: "w-8",
+    expandedWidth: "w-48 sm:w-64"
+  },
+  md: {
+    input: "h-10 text-sm",
+    icon: "w-5 h-5",
+    padding: "pl-10 pr-10",
+    collapsedWidth: "w-10",
+    expandedWidth: "w-56 sm:w-72"
+  },
+  lg: {
+    input: "h-12 text-base",
+    icon: "w-6 h-6",
+    padding: "pl-12 pr-12",
+    collapsedWidth: "w-12",
+    expandedWidth: "w-64 sm:w-80"
+  }
+};
+function SearchInput({
+  value,
+  onChange,
+  placeholder,
+  debounceMs = 300,
+  expandable = false,
+  className = "",
+  autoFocus = false,
+  size = "md",
+  labels = {}
+}) {
+  const resolvedPlaceholder = placeholder ?? labels.placeholder ?? "Search";
+  const searchHotkeyHint = labels.searchHotkeyHint ?? "Press / to search";
+  const openSearchLabel = labels.openSearch ?? "Open search";
+  const searchAriaLabel = labels.search ?? "Search";
+  const clearSearchLabel = labels.clearSearch ?? "Clear search";
+  const [internalValue, setInternalValue] = useState(value);
+  const [isExpanded, setIsExpanded] = useState(!expandable || !!value);
+  const [isFocused, setIsFocused] = useState(false);
+  const inputRef = useRef2(null);
+  const debounceTimerRef = useRef2(null);
+  const sizes = sizeClasses2[size];
+  useEffect2(() => {
+    setInternalValue(value);
+    if (value && expandable) {
+      setIsExpanded(true);
+    }
+  }, [value, expandable]);
+  const debouncedOnChange = useCallback2(
+    (newValue) => {
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current);
+      }
+      if (debounceMs > 0) {
+        debounceTimerRef.current = setTimeout(() => {
+          onChange(newValue);
+        }, debounceMs);
+      } else {
+        onChange(newValue);
+      }
+    },
+    [onChange, debounceMs]
+  );
+  useEffect2(() => {
+    return () => {
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current);
+      }
+    };
+  }, []);
+  const handleChange = (e) => {
+    const newValue = e.target.value;
+    setInternalValue(newValue);
+    debouncedOnChange(newValue);
+  };
+  const handleClear = () => {
+    setInternalValue("");
+    onChange("");
+    inputRef.current?.focus();
+  };
+  const handleExpandClick = () => {
+    setIsExpanded(true);
+    requestAnimationFrame(() => {
+      inputRef.current?.focus();
+    });
+  };
+  const handleBlur = () => {
+    setIsFocused(false);
+    if (expandable && !internalValue) {
+      setTimeout(() => {
+        if (document.activeElement !== inputRef.current) {
+          setIsExpanded(false);
+        }
+      }, 150);
+    }
+  };
+  useEffect2(() => {
+    const handleKeyDown = (e) => {
+      if (e.key === "/" && !["INPUT", "TEXTAREA", "SELECT"].includes(e.target.tagName)) {
+        e.preventDefault();
+        if (expandable && !isExpanded) {
+          setIsExpanded(true);
+        }
+        requestAnimationFrame(() => {
+          inputRef.current?.focus();
+        });
+      }
+      if (e.key === "Escape" && document.activeElement === inputRef.current) {
+        if (internalValue) {
+          handleClear();
+        } else {
+          inputRef.current?.blur();
+        }
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [expandable, isExpanded, internalValue]);
+  useEffect2(() => {
+    if (autoFocus && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [autoFocus]);
+  if (expandable && !isExpanded) {
+    return /* @__PURE__ */ jsx14(
+      "button",
+      {
+        type: "button",
+        onClick: handleExpandClick,
+        className: `
+          ${sizes.collapsedWidth} ${sizes.input}
+          flex items-center justify-center
+          rounded-md border border-border-primary
+          bg-background-secondary
+          text-text-tertiary hover:text-text-secondary
+          hover:bg-background-tertiary
+          focus:outline-none focus:ring-2 focus:ring-primary-500
+          transition-all duration-200
+          ${className}
+        `,
+        title: searchHotkeyHint,
+        "aria-label": openSearchLabel,
+        children: /* @__PURE__ */ jsx14("svg", { className: sizes.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx14(
+          "path",
+          {
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: 2,
+            d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+          }
+        ) })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs10(
+    "div",
+    {
+      className: `
+        relative
+        ${expandable ? `transition-all duration-200 ${isExpanded ? sizes.expandedWidth : sizes.collapsedWidth}` : "w-full"}
+        ${className}
+      `,
+      children: [
+        /* @__PURE__ */ jsx14("div", { className: "absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none", children: /* @__PURE__ */ jsx14(
+          "svg",
+          {
+            className: `${sizes.icon} text-text-tertiary`,
+            fill: "none",
+            stroke: "currentColor",
+            viewBox: "0 0 24 24",
+            children: /* @__PURE__ */ jsx14(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 2,
+                d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+              }
+            )
+          }
+        ) }),
+        /* @__PURE__ */ jsx14(
+          "input",
+          {
+            ref: inputRef,
+            type: "text",
+            value: internalValue,
+            onChange: handleChange,
+            onFocus: () => setIsFocused(true),
+            onBlur: handleBlur,
+            placeholder: resolvedPlaceholder,
+            className: `
+          w-full ${sizes.input} ${sizes.padding}
+          rounded-md border
+          bg-background-secondary
+          text-text-primary
+          placeholder-text-tertiary
+          ${isFocused ? "border-primary-500 ring-2 ring-primary-500" : "border-border-primary"}
+          focus:outline-none
+          transition-colors
+        `,
+            "aria-label": searchAriaLabel
+          }
+        ),
+        internalValue && /* @__PURE__ */ jsx14(
+          "button",
+          {
+            type: "button",
+            onClick: handleClear,
+            className: "absolute inset-y-0 right-0 flex items-center pr-3 text-text-tertiary hover:text-text-secondary",
+            "aria-label": clearSearchLabel,
+            children: /* @__PURE__ */ jsx14("svg", { className: sizes.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx14(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 2,
+                d: "M6 18L18 6M6 6l12 12"
+              }
+            ) })
+          }
+        ),
+        !internalValue && !isFocused && /* @__PURE__ */ jsx14("div", { className: "absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none", children: /* @__PURE__ */ jsx14("kbd", { className: "hidden sm:inline-flex items-center px-1.5 py-0.5 text-xs font-medium text-text-tertiary bg-background-tertiary rounded border border-border-primary", children: "/" }) })
+      ]
+    }
+  );
+}
+
+// src/components/search-bar.tsx
+import { useEffect as useEffect3, useRef as useRef3, useState as useState2 } from "react";
+import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
+var SearchBar = ({
+  value,
+  onChange,
+  onClear,
+  placeholder = "Search",
+  autoFocus = false,
+  className = "",
+  showShortcutHint = true,
+  clearSearchLabel = "Clear search"
+}) => {
+  const inputRef = useRef3(null);
+  const [isFocused, setIsFocused] = useState2(false);
+  useEffect3(() => {
+    const handleKeyDown2 = (e) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === "k") {
+        e.preventDefault();
+        inputRef.current?.focus();
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown2);
+    return () => window.removeEventListener("keydown", handleKeyDown2);
+  }, []);
+  const handleKeyDown = (e) => {
+    if ((e.metaKey || e.ctrlKey) && e.key === "a") {
+      e.preventDefault();
+      inputRef.current?.select();
+    }
+  };
+  const handleClear = () => {
+    onChange("");
+    onClear?.();
+    inputRef.current?.focus();
+  };
+  const hasWhiteBackground = isFocused || value.length > 0;
+  return /* @__PURE__ */ jsxs11("div", { className: `relative ${className}`, children: [
+    /* @__PURE__ */ jsx15("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none", children: /* @__PURE__ */ jsx15(
+      "svg",
+      {
+        className: "h-5 w-5 text-text-tertiary",
+        fill: "none",
+        stroke: "currentColor",
+        viewBox: "0 0 24 24",
+        children: /* @__PURE__ */ jsx15(
+          "path",
+          {
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: 2,
+            d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+          }
+        )
+      }
+    ) }),
+    /* @__PURE__ */ jsx15(
+      "input",
+      {
+        ref: inputRef,
+        type: "text",
+        value,
+        onChange: (e) => onChange(e.target.value),
+        onKeyDown: handleKeyDown,
+        onFocus: () => setIsFocused(true),
+        onBlur: () => setIsFocused(false),
+        placeholder,
+        autoFocus,
+        className: `
+          w-full 
+          pl-10 
+          pr-24 
+          py-2 
+          ${hasWhiteBackground ? "bg-background-tertiary" : "bg-background-secondary"}
+          text-text-primary
+          border 
+          border-border-primary
+          rounded-md 
+          transition-all 
+          duration-150 
+          focus:outline-none 
+          focus:ring-2 
+          focus:ring-primary-500 
+          focus:border-primary-500
+          placeholder:text-text-tertiary
+        `
+      }
+    ),
+    /* @__PURE__ */ jsxs11("div", { className: "absolute inset-y-0 right-0 flex items-center pr-3 gap-2", children: [
+      showShortcutHint && !value && /* @__PURE__ */ jsx15("kbd", { className: "hidden sm:inline-block px-2 py-1 text-xs text-text-tertiary bg-background-secondary border border-border-primary rounded", children: "\u2318K" }),
+      value && /* @__PURE__ */ jsx15(
+        "button",
+        {
+          type: "button",
+          onClick: handleClear,
+          className: "text-text-tertiary hover:text-text-secondary transition-colors",
+          "aria-label": clearSearchLabel,
+          children: /* @__PURE__ */ jsx15("svg", { className: "h-5 w-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx15(
+            "path",
+            {
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              strokeWidth: 2,
+              d: "M6 18L18 6M6 6l12 12"
+            }
+          ) })
+        }
+      )
+    ] })
+  ] });
+};
+
+// src/components/breadcrumbs.tsx
+import React7 from "react";
+import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
+var Breadcrumbs = ({
+  items,
+  className = "",
+  ariaLabel = "Breadcrumb",
+  renderLink
+}) => {
+  const linkClassName = "hover:text-primary-600 cursor-pointer inline-block";
+  const renderItemLink = (href, label) => {
+    if (renderLink) {
+      return renderLink({ href, children: label, className: linkClassName });
+    }
+    return /* @__PURE__ */ jsx16("a", { href, className: linkClassName, children: label });
+  };
+  return /* @__PURE__ */ jsx16("nav", { className: `mb-4 text-sm text-text-secondary ${className}`, "aria-label": ariaLabel, children: items.map((item, index) => {
+    const isLast = index === items.length - 1;
+    return /* @__PURE__ */ jsxs12(React7.Fragment, { children: [
+      item.href && !isLast ? renderItemLink(item.href, item.label) : /* @__PURE__ */ jsx16("span", { className: isLast ? "text-text-primary" : "", children: item.label }),
+      !isLast && /* @__PURE__ */ jsx16("span", { className: "mx-2", children: "/" })
+    ] }, index);
+  }) });
+};
+
+// src/components/table.tsx
+import { jsx as jsx17 } from "react/jsx-runtime";
+var Table = ({ children, className = "" }) => {
+  return /* @__PURE__ */ jsx17("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsx17(
+    "table",
+    {
+      className: `w-full divide-y divide-border-primary ${className}`,
+      children
+    }
+  ) });
+};
+var TableHeader = ({
+  children,
+  className = ""
+}) => {
+  return /* @__PURE__ */ jsx17("thead", { className: `bg-background-tertiary ${className}`, children });
+};
+var TableBody = ({
+  children,
+  className = ""
+}) => {
+  return /* @__PURE__ */ jsx17(
+    "tbody",
+    {
+      className: `bg-background-secondary divide-y divide-border-primary ${className}`,
+      children
+    }
+  );
+};
+var TableRow = ({
+  children,
+  className = "",
+  onClick,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx17(
+    "tr",
+    {
+      className: `${onClick ? "cursor-pointer hover:bg-background-tertiary" : ""} ${className}`,
+      onClick,
+      ...props,
+      children
+    }
+  );
+};
+var TableHead = ({
+  children,
+  className = ""
+}) => {
+  return /* @__PURE__ */ jsx17(
+    "th",
+    {
+      className: `px-4 py-3 text-left text-xs font-medium text-text-secondary uppercase tracking-wider align-top ${className}`,
+      children
+    }
+  );
+};
+var TableCell = ({
+  children,
+  className = "",
+  onClick,
+  colSpan
+}) => {
+  return /* @__PURE__ */ jsx17(
+    "td",
+    {
+      className: `px-4 py-4 text-sm text-text-primary align-top ${onClick ? "cursor-pointer" : ""} ${className}`,
+      onClick,
+      colSpan,
+      children
+    }
+  );
+};
+
+// src/components/tabs.tsx
+import React8, { useState as useState3, useRef as useRef4 } from "react";
+import { jsx as jsx18 } from "react/jsx-runtime";
+var TabsContext = React8.createContext({
+  value: "",
+  onValueChange: () => {
+  }
+});
+var Tabs = ({
+  children,
+  defaultValue = "",
+  value: controlledValue,
+  onValueChange,
+  className = ""
+}) => {
+  const [internalValue, setInternalValue] = useState3(defaultValue);
+  const isControlled = controlledValue !== void 0;
+  const value = isControlled ? controlledValue : internalValue;
+  const handleValueChange = (newValue) => {
+    if (!isControlled) {
+      setInternalValue(newValue);
+    }
+    onValueChange?.(newValue);
+  };
+  return /* @__PURE__ */ jsx18(TabsContext.Provider, { value: { value, onValueChange: handleValueChange }, children: /* @__PURE__ */ jsx18("div", { className, children }) });
+};
+var TabsList = ({
+  children,
+  className = ""
+}) => {
+  return /* @__PURE__ */ jsx18(
+    "div",
+    {
+      className: `flex ${className}`,
+      role: "tablist",
+      children
+    }
+  );
+};
+var TabsTrigger = ({
+  value,
+  children,
+  className = ""
+}) => {
+  const context = React8.useContext(TabsContext);
+  const isActive = context.value === value;
+  const buttonRef = useRef4(null);
+  const handleClick = () => {
+    context.onValueChange(value);
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      context.onValueChange(value);
+    }
+  };
+  return /* @__PURE__ */ jsx18(
+    "button",
+    {
+      ref: buttonRef,
+      role: "tab",
+      "aria-selected": isActive,
+      "aria-controls": `tab-content-${value}`,
+      id: `tab-trigger-${value}`,
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      className: `
+        px-4 py-2 text-sm font-medium transition-colors duration-150
+        border-b-2 -mb-px
+        focus:outline-none
+        cursor-pointer
+        ${isActive ? "border-primary-600 text-primary-600" : "border-transparent text-text-secondary hover:text-text-primary hover:border-border-secondary"}
+        ${className}
+      `,
+      children
+    }
+  );
+};
+var TabsContent = ({
+  value,
+  children,
+  className = ""
+}) => {
+  const context = React8.useContext(TabsContext);
+  const isActive = context.value === value;
+  if (!isActive) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx18(
+    "div",
+    {
+      role: "tabpanel",
+      id: `tab-content-${value}`,
+      "aria-labelledby": `tab-trigger-${value}`,
+      className: `mt-6 ${className}`,
+      children
+    }
+  );
+};
+
+// src/components/avatar.tsx
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import { jsx as jsx19 } from "react/jsx-runtime";
+var Avatar = ({ className, ref, ...props }) => /* @__PURE__ */ jsx19(
+  AvatarPrimitive.Root,
+  {
+    ref,
+    className: cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className),
+    ...props
+  }
+);
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+var AvatarImage = ({ className, ref, ...props }) => /* @__PURE__ */ jsx19(
+  AvatarPrimitive.Image,
+  {
+    ref,
+    className: cn("aspect-square h-full w-full", className),
+    ...props
+  }
+);
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+var AvatarFallback = ({ className, ref, ...props }) => /* @__PURE__ */ jsx19(
+  AvatarPrimitive.Fallback,
+  {
+    ref,
+    className: cn("flex h-full w-full items-center justify-center rounded-full bg-muted", className),
+    ...props
+  }
+);
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+
+// src/components/dropdown-menu.tsx
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { Check, ChevronRight, Circle } from "lucide-react";
+import { jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
+var DropdownMenu = DropdownMenuPrimitive.Root;
+var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+var DropdownMenuGroup = DropdownMenuPrimitive.Group;
+var DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+var DropdownMenuSub = DropdownMenuPrimitive.Sub;
+var DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+var DropdownMenuSubTrigger = ({ className, inset, children, ref, ...props }) => /* @__PURE__ */ jsxs13(
+  DropdownMenuPrimitive.SubTrigger,
+  {
+    ref,
+    className: cn(
+      "flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      inset && "pl-8",
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsx20(ChevronRight, { className: "ml-auto" })
+    ]
+  }
+);
+DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
+var DropdownMenuSubContent = ({ className, ref, ...props }) => /* @__PURE__ */ jsx20(
+  DropdownMenuPrimitive.SubContent,
+  {
+    ref,
+    className: cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]",
+      className
+    ),
+    ...props
+  }
+);
+DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
+var DropdownMenuContent = ({ className, sideOffset = 4, ref, ...props }) => /* @__PURE__ */ jsx20(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx20(
+  DropdownMenuPrimitive.Content,
+  {
+    ref,
+    sideOffset,
+    className: cn(
+      "z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+      "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]",
+      className
+    ),
+    ...props
+  }
+) });
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+var DropdownMenuItem = ({ className, inset, ref, ...props }) => /* @__PURE__ */ jsx20(
+  DropdownMenuPrimitive.Item,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
+      inset && "pl-8",
+      className
+    ),
+    ...props
+  }
+);
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+var DropdownMenuCheckboxItem = ({ className, children, checked, ref, ...props }) => /* @__PURE__ */ jsxs13(
+  DropdownMenuPrimitive.CheckboxItem,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    ),
+    checked,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx20("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx20(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx20(Check, { className: "h-4 w-4" }) }) }),
+      children
+    ]
+  }
+);
+DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
+var DropdownMenuRadioItem = ({ className, children, ref, ...props }) => /* @__PURE__ */ jsxs13(
+  DropdownMenuPrimitive.RadioItem,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx20("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx20(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx20(Circle, { className: "h-2 w-2 fill-current" }) }) }),
+      children
+    ]
+  }
+);
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+var DropdownMenuLabel = ({ className, inset, ref, ...props }) => /* @__PURE__ */ jsx20(
+  DropdownMenuPrimitive.Label,
+  {
+    ref,
+    className: cn(
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
+      className
+    ),
+    ...props
+  }
+);
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+var DropdownMenuSeparator = ({ className, ref, ...props }) => /* @__PURE__ */ jsx20(
+  DropdownMenuPrimitive.Separator,
+  {
+    ref,
+    className: cn("-mx-1 my-1 h-px bg-muted", className),
+    ...props
+  }
+);
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+var DropdownMenuShortcut = ({
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx20(
+    "span",
+    {
+      className: cn("ml-auto text-xs tracking-widest opacity-60", className),
+      ...props
+    }
+  );
+};
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
+
+// src/components/collapsible.tsx
+import { useState as useState4, useEffect as useEffect4, useRef as useRef5, useCallback as useCallback3 } from "react";
+import { jsx as jsx21, jsxs as jsxs14 } from "react/jsx-runtime";
+function Collapsible({
+  defaultOpen = false,
+  open: controlledOpen,
+  onOpenChange,
+  trigger,
+  children,
+  className = "",
+  storageKey,
+  disabled = false
+}) {
+  const isControlled = controlledOpen !== void 0;
+  const [internalOpen, setInternalOpen] = useState4(() => {
+    if (storageKey && typeof window !== "undefined") {
+      const stored = localStorage.getItem(`collapsible-${storageKey}`);
+      if (stored !== null) {
+        return stored === "true";
+      }
+    }
+    return defaultOpen;
+  });
+  const isOpen = isControlled ? controlledOpen : internalOpen;
+  const contentRef = useRef5(null);
+  const [contentHeight, setContentHeight] = useState4(void 0);
+  useEffect4(() => {
+    if (contentRef.current) {
+      setContentHeight(contentRef.current.scrollHeight);
+    }
+  }, [children, isOpen]);
+  useEffect4(() => {
+    if (storageKey && !isControlled) {
+      localStorage.setItem(`collapsible-${storageKey}`, String(internalOpen));
+    }
+  }, [storageKey, internalOpen, isControlled]);
+  const handleToggle = useCallback3(() => {
+    if (disabled) return;
+    const newState = !isOpen;
+    if (!isControlled) {
+      setInternalOpen(newState);
+    }
+    onOpenChange?.(newState);
+  }, [disabled, isOpen, isControlled, onOpenChange]);
+  return /* @__PURE__ */ jsxs14("div", { className, children: [
+    /* @__PURE__ */ jsx21(
+      "div",
+      {
+        onClick: handleToggle,
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            handleToggle();
+          }
+        },
+        role: "button",
+        tabIndex: disabled ? -1 : 0,
+        "aria-expanded": isOpen,
+        "aria-disabled": disabled,
+        className: disabled ? "cursor-not-allowed opacity-60" : "cursor-pointer",
+        children: trigger
+      }
+    ),
+    /* @__PURE__ */ jsx21(
+      "div",
+      {
+        ref: contentRef,
+        className: "overflow-hidden transition-all duration-300 ease-in-out",
+        style: {
+          maxHeight: isOpen ? contentHeight : 0,
+          opacity: isOpen ? 1 : 0
+        },
+        "aria-hidden": !isOpen,
+        children
+      }
+    )
+  ] });
+}
+function CollapsibleTrigger({
+  title,
+  subtitle,
+  isOpen,
+  className = "",
+  icon
+}) {
+  return /* @__PURE__ */ jsxs14(
+    "div",
+    {
+      className: `flex items-center justify-between p-4 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors ${className}`,
+      children: [
+        /* @__PURE__ */ jsxs14("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsx21("h3", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: title }),
+          subtitle && /* @__PURE__ */ jsx21("p", { className: "text-sm text-gray-500 dark:text-gray-400 truncate", children: subtitle })
+        ] }),
+        /* @__PURE__ */ jsx21("div", { className: "ml-4 flex-shrink-0", children: icon || /* @__PURE__ */ jsx21(
+          "svg",
+          {
+            className: `w-5 h-5 text-gray-400 transition-transform duration-300 ${isOpen ? "rotate-180" : ""}`,
+            fill: "none",
+            stroke: "currentColor",
+            viewBox: "0 0 24 24",
+            children: /* @__PURE__ */ jsx21(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 2,
+                d: "M19 9l-7 7-7-7"
+              }
+            )
+          }
+        ) })
+      ]
+    }
+  );
+}
+var bannerVariantClasses = {
+  info: "bg-gradient-to-r from-primary-50 to-blue-50 dark:from-primary-900/20 dark:to-blue-900/20 border-primary-200 dark:border-primary-700",
+  success: "bg-gradient-to-r from-primary-50 to-primary-100 dark:from-primary-900/20 dark:to-primary-800/20 border-primary-200 dark:border-primary-700",
+  warning: "bg-gradient-to-r from-yellow-50 to-amber-50 dark:from-yellow-900/20 dark:to-amber-900/20 border-yellow-200 dark:border-yellow-700",
+  neutral: "bg-gradient-to-r from-gray-50 to-slate-50 dark:from-gray-800 dark:to-slate-800 border-gray-200 dark:border-gray-700",
+  hero: "bg-gradient-to-r from-accent-50 to-accent-100 dark:from-accent-800 dark:to-accent-900 border-accent-200 dark:border-accent-600"
+};
+function DismissibleBanner({
+  storageKey,
+  children,
+  dismissText = "Got it",
+  onDismiss,
+  className = "",
+  variant = "info"
+}) {
+  const [isDismissed, setIsDismissed] = useState4(() => {
+    if (typeof window !== "undefined") {
+      return localStorage.getItem(`banner-${storageKey}-dismissed`) === "true";
+    }
+    return false;
+  });
+  const [isAnimatingOut, setIsAnimatingOut] = useState4(false);
+  const handleDismiss = useCallback3(() => {
+    setIsAnimatingOut(true);
+    setTimeout(() => {
+      setIsDismissed(true);
+      localStorage.setItem(`banner-${storageKey}-dismissed`, "true");
+      onDismiss?.();
+    }, 300);
+  }, [storageKey, onDismiss]);
+  if (isDismissed) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx21(
+    "div",
+    {
+      className: `
+        border rounded-lg p-6 shadow-sm
+        transition-all duration-300 ease-out
+        ${isAnimatingOut ? "opacity-0 -translate-y-4 h-0 p-0 overflow-hidden" : "opacity-100 translate-y-0"}
+        ${bannerVariantClasses[variant]}
+        ${className}
+      `,
+      children: /* @__PURE__ */ jsxs14("div", { className: "flex flex-col", children: [
+        /* @__PURE__ */ jsx21("div", { className: "flex-1", children }),
+        /* @__PURE__ */ jsx21("div", { className: "flex justify-end mt-4", children: /* @__PURE__ */ jsx21(
+          "button",
+          {
+            onClick: handleDismiss,
+            className: `px-4 py-2 text-sm font-medium text-white rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 transition-colors cursor-pointer ${variant === "hero" ? "bg-accent-600 hover:bg-accent-700 focus:ring-accent-500" : "bg-primary-600 hover:bg-primary-700 focus:ring-primary-500"}`,
+            children: dismissText
+          }
+        ) })
+      ] })
+    }
+  );
+}
+function useCollapsible(options = {}) {
+  const { defaultOpen = false, storageKey } = options;
+  const [isOpen, setIsOpen] = useState4(() => {
+    if (storageKey && typeof window !== "undefined") {
+      const stored = localStorage.getItem(`collapsible-${storageKey}`);
+      if (stored !== null) {
+        return stored === "true";
+      }
+    }
+    return defaultOpen;
+  });
+  useEffect4(() => {
+    if (storageKey) {
+      localStorage.setItem(`collapsible-${storageKey}`, String(isOpen));
+    }
+  }, [storageKey, isOpen]);
+  const toggle = useCallback3(() => {
+    setIsOpen((prev) => !prev);
+  }, []);
+  const open = useCallback3(() => {
+    setIsOpen(true);
+  }, []);
+  const close = useCallback3(() => {
+    setIsOpen(false);
+  }, []);
+  return {
+    isOpen,
+    toggle,
+    open,
+    close,
+    setIsOpen
+  };
+}
+export {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+  Badge,
+  Breadcrumbs,
+  Button,
+  Card,
+  CardBody,
+  CardFooter,
+  CardHeader,
+  Checkbox,
+  Collapsible,
+  CollapsibleTrigger,
+  ConfirmDialog,
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+  DismissibleBanner,
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+  EmptyState,
+  EntityForm,
+  FormField,
+  FormSlideOver,
+  Input,
+  LoadingScreen,
+  LoadingSpinner,
+  SearchBar,
+  SearchInput,
+  Select,
+  SlideOver,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+  Textarea,
+  cn,
+  useCollapsible
+};
+//# sourceMappingURL=index.js.map