mywhy-ui 0.1.0 → 0.2.0

package/dist/index.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { useRef, useEffect, useState, useCallback } from 'react';
+import React9, { useRef, useEffect, useState, useCallback } from 'react';
 
 // src/components/Spinner/Spinner.tsx
 var sizeClasses = {
@@ -194,6 +194,49 @@ function Select({
     error && /* @__PURE__ */ jsx("p", { className: "text-sm text-danger-text", children: error })
   ] });
 }
+function Switch({
+  label,
+  description,
+  error,
+  id,
+  className = "",
+  checked,
+  ...props
+}) {
+  const switchId = id ?? (typeof label === "string" ? label.toLowerCase().replace(/\s+/g, "-") : void 0);
+  return /* @__PURE__ */ jsxs("div", { className: `flex flex-col gap-0.5 ${className}`, children: [
+    /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-3 cursor-pointer", htmlFor: switchId, children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          id: switchId,
+          type: "checkbox",
+          role: "switch",
+          "aria-checked": checked,
+          className: [
+            "peer relative w-10 h-6 appearance-none rounded-full transition-colors",
+            "bg-surface-gray border border-outline",
+            "hover:bg-surface-overlay",
+            "focus:outline-none focus:ring-2 focus:ring-brand focus:ring-offset-2",
+            "disabled:opacity-50 disabled:cursor-not-allowed",
+            "checked:bg-brand checked:border-brand checked:hover:bg-brand-dark",
+            "after:content-[''] after:absolute after:top-1 after:left-1",
+            "after:w-4 after:h-4 after:bg-white after:rounded-full after:transition-transform",
+            "peer-checked:after:translate-x-4",
+            error ? "border-danger-border" : ""
+          ].join(" "),
+          checked,
+          ...props
+        }
+      ),
+      (label || description) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+        label && /* @__PURE__ */ jsx("span", { className: "text-base font-medium text-ink leading-tight", children: label }),
+        description && /* @__PURE__ */ jsx("span", { className: "text-sm text-ink-light", children: description })
+      ] })
+    ] }),
+    error && /* @__PURE__ */ jsx("p", { className: "text-sm text-danger-text ml-4", children: error })
+  ] });
+}
 var subtleClasses = {
   brand: "bg-brand-50 text-brand border-brand-200",
   success: "bg-success-bg text-success-text border-success-border",
@@ -390,6 +433,419 @@ function Textarea({
     error && /* @__PURE__ */ jsx("p", { className: "text-sm text-danger-text", children: error })
   ] });
 }
+var themeClasses2 = {
+  info: "bg-brand-50 border-brand-200 text-brand-900",
+  success: "bg-green-50 border-green-200 text-green-900",
+  warning: "bg-amber-50 border-amber-200 text-amber-900",
+  danger: "bg-red-50 border-red-200 text-red-900"
+};
+var iconColors = {
+  info: "text-brand",
+  success: "text-success-icon",
+  warning: "text-warning-icon",
+  danger: "text-danger-icon"
+};
+var closeButtonColors = {
+  info: "hover:bg-brand-100 text-brand-600",
+  success: "hover:bg-green-100 text-green-600",
+  warning: "hover:bg-amber-100 text-amber-600",
+  danger: "hover:bg-red-100 text-red-600"
+};
+function Alert({
+  theme = "info",
+  title,
+  icon,
+  onClose,
+  isDismissible = false,
+  children,
+  className = "",
+  ...props
+}) {
+  const [isVisible, setIsVisible] = React9.useState(true);
+  const handleClose = () => {
+    setIsVisible(false);
+    onClose?.();
+  };
+  if (!isVisible) return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `flex gap-3 p-3 rounded-md border ${themeClasses2[theme]} ${className}`,
+      role: "alert",
+      ...props,
+      children: [
+        icon && /* @__PURE__ */ jsx("div", { className: `shrink-0 mt-0.5 ${iconColors[theme]}`, children: icon }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+          title && /* @__PURE__ */ jsx("p", { className: "font-medium", children: title }),
+          children && /* @__PURE__ */ jsx("p", { className: title ? "text-sm mt-0.5" : "text-sm", children })
+        ] }),
+        isDismissible && /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: handleClose,
+            className: `shrink-0 p-1 rounded transition-colors ${closeButtonColors[theme]}`,
+            "aria-label": "Dismiss alert",
+            children: /* @__PURE__ */ jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+          }
+        )
+      ]
+    }
+  );
+}
+function MultiSelect({
+  options,
+  value = [],
+  onChange,
+  placeholder = "Select items...",
+  label,
+  description,
+  error,
+  disabled = false,
+  searchable = true,
+  clearable = true,
+  size = "md",
+  className = "",
+  ...props
+}) {
+  const [isOpen, setIsOpen] = React9.useState(false);
+  const [searchTerm, setSearchTerm] = React9.useState("");
+  const containerRef = useRef(null);
+  const inputRef = useRef(null);
+  const filteredOptions = searchable ? options.filter(
+    (opt) => opt.label.toLowerCase().includes(searchTerm.toLowerCase())
+  ) : options;
+  const handleSelect = (optionValue) => {
+    const newValues = value.includes(optionValue) ? value.filter((v) => v !== optionValue) : [...value, optionValue];
+    onChange?.(newValues);
+  };
+  const handleRemove = (optionValue) => {
+    const newValues = value.filter((v) => v !== optionValue);
+    onChange?.(newValues);
+  };
+  const handleClear = () => {
+    onChange?.([]);
+    setSearchTerm("");
+  };
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (containerRef.current && !containerRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+    }
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [isOpen]);
+  const sizeClasses13 = {
+    sm: "h-7 px-2 text-sm",
+    md: "h-8 px-3 text-base",
+    lg: "h-9 px-4 text-base"
+  };
+  const selectedOptions = options.filter((opt) => value.includes(opt.value));
+  return /* @__PURE__ */ jsxs("div", { className, ...props, children: [
+    label && /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-ink mb-1", children: label }),
+    description && /* @__PURE__ */ jsx("p", { className: "text-xs text-ink-light mb-1.5", children: description }),
+    /* @__PURE__ */ jsxs("div", { className: "relative", ref: containerRef, children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: [
+            "flex flex-wrap gap-1 items-center border rounded-md transition-colors",
+            "focus-within:ring-2 focus-within:ring-brand focus-within:ring-offset-1",
+            disabled ? "bg-surface-gray opacity-50 cursor-not-allowed" : "bg-white",
+            error ? "border-danger-border" : "border-outline",
+            sizeClasses13[size]
+          ].join(" "),
+          onClick: () => !disabled && setIsOpen(!isOpen),
+          children: [
+            selectedOptions.map((opt) => /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "inline-flex items-center gap-1 bg-brand-50 text-brand px-2 py-0.5 rounded text-xs font-medium",
+                children: [
+                  opt.icon && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: opt.icon }),
+                  /* @__PURE__ */ jsx("span", { children: opt.label }),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        handleRemove(opt.value);
+                      },
+                      className: "shrink-0 hover:text-brand-dark",
+                      children: "\xD7"
+                    }
+                  )
+                ]
+              },
+              opt.value
+            )),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref: inputRef,
+                type: "text",
+                placeholder: value.length === 0 ? placeholder : "",
+                value: searchTerm,
+                onChange: (e) => setSearchTerm(e.target.value),
+                onFocus: () => !disabled && setIsOpen(true),
+                disabled,
+                className: "flex-1 min-w-[40px] bg-transparent border-0 outline-none text-sm"
+              }
+            ),
+            clearable && value.length > 0 && /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: (e) => {
+                  e.stopPropagation();
+                  handleClear();
+                },
+                className: "shrink-0 text-ink-light hover:text-ink",
+                children: "\u2715"
+              }
+            )
+          ]
+        }
+      ),
+      isOpen && /* @__PURE__ */ jsx("div", { className: "absolute top-full mt-1 left-0 right-0 z-50 bg-white border border-outline rounded-md shadow-lg py-1", children: filteredOptions.length > 0 ? filteredOptions.map((opt) => /* @__PURE__ */ jsxs(
+        "button",
+        {
+          onClick: () => {
+            handleSelect(opt.value);
+            if (!opt.disabled) {
+              inputRef.current?.focus();
+            }
+          },
+          disabled: opt.disabled,
+          className: [
+            "w-full px-3 py-2 text-left text-sm flex items-center gap-2 transition-colors",
+            opt.disabled ? "opacity-50 cursor-not-allowed" : "hover:bg-surface-gray",
+            value.includes(opt.value) ? "bg-brand-50" : ""
+          ].join(" "),
+          children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "checkbox",
+                checked: value.includes(opt.value),
+                readOnly: true,
+                className: "w-4 h-4"
+              }
+            ),
+            opt.icon && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: opt.icon }),
+            /* @__PURE__ */ jsx("span", { children: opt.label })
+          ]
+        },
+        opt.value
+      )) : /* @__PURE__ */ jsx("div", { className: "px-3 py-2 text-sm text-ink-light", children: "No options found" }) })
+    ] }),
+    error && /* @__PURE__ */ jsx("p", { className: "text-xs text-danger-text mt-1", children: error })
+  ] });
+}
+function FormControl({
+  label,
+  description,
+  error,
+  required = false,
+  helperText,
+  children,
+  className = "",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: `flex flex-col gap-1.5 ${className}`, ...props, children: [
+    (label || description) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
+      label && /* @__PURE__ */ jsxs("label", { className: "text-sm font-medium text-ink", children: [
+        label,
+        required && /* @__PURE__ */ jsx("span", { className: "text-danger-icon ml-1", children: "*" })
+      ] }),
+      description && /* @__PURE__ */ jsx("p", { className: "text-xs text-ink-light", children: description })
+    ] }),
+    children,
+    error && /* @__PURE__ */ jsxs("p", { className: "text-xs text-danger-text flex items-center gap-1", children: [
+      /* @__PURE__ */ jsx("svg", { className: "w-3.5 h-3.5 shrink-0", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ 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 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z", clipRule: "evenodd" }) }),
+      error
+    ] }),
+    helperText && !error && /* @__PURE__ */ jsx("p", { className: "text-xs text-ink-light", children: helperText })
+  ] });
+}
+function Tabs({
+  tabs,
+  activeTab,
+  onTabChange,
+  variant = "underline",
+  className = "",
+  tabsClassName = "",
+  contentClassName = ""
+}) {
+  const [internalActiveTab, setInternalActiveTab] = React9.useState(activeTab || tabs[0]?.value || "");
+  const active = activeTab !== void 0 ? activeTab : internalActiveTab;
+  const handleTabChange = (value) => {
+    setInternalActiveTab(value);
+    onTabChange?.(value);
+  };
+  const baseTabClasses = "px-3 py-2 font-medium text-sm rounded-t-md transition-colors whitespace-nowrap";
+  const variantClasses2 = {
+    underline: {
+      base: "border-b-2 border-transparent text-ink-light hover:text-ink hover:border-outline",
+      active: "border-brand text-brand",
+      disabled: "opacity-50 cursor-not-allowed"
+    },
+    soft: {
+      base: "text-ink-light hover:text-ink hover:bg-surface-gray",
+      active: "bg-brand text-white",
+      disabled: "opacity-50 cursor-not-allowed"
+    }
+  };
+  const variantStyle = variantClasses2[variant];
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `flex gap-0 border-b border-outline ${tabsClassName}`,
+        role: "tablist",
+        children: tabs.map((tab) => /* @__PURE__ */ jsxs(
+          "button",
+          {
+            role: "tab",
+            "aria-selected": active === tab.value,
+            "aria-disabled": tab.disabled,
+            onClick: () => !tab.disabled && handleTabChange(tab.value),
+            disabled: tab.disabled,
+            className: [
+              baseTabClasses,
+              active === tab.value ? variantStyle.active : variantStyle.base,
+              tab.disabled ? variantStyle.disabled : ""
+            ].join(" "),
+            children: [
+              tab.icon && /* @__PURE__ */ jsx("span", { className: "inline-block mr-1", children: tab.icon }),
+              tab.label
+            ]
+          },
+          tab.value
+        ))
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: contentClassName, role: "tabpanel", children: tabs.find((tab) => tab.value === active)?.content })
+  ] });
+}
+function Breadcrumbs({
+  items,
+  separator = "/",
+  className = "",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx("nav", { className: `flex items-center gap-0 text-sm ${className}`, ...props, children: items.map((item, index) => /* @__PURE__ */ jsxs(React9.Fragment, { children: [
+    index > 0 && /* @__PURE__ */ jsx("span", { className: "text-ink-light px-1.5", children: separator }),
+    item.href ? /* @__PURE__ */ jsxs(
+      "a",
+      {
+        href: item.href,
+        className: [
+          "flex items-center gap-1 rounded px-1.5 py-1 transition-colors",
+          item.isActive ? "text-ink font-medium" : "text-brand hover:bg-brand-50 cursor-pointer"
+        ].join(" "),
+        children: [
+          item.icon && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: item.icon }),
+          item.label
+        ]
+      }
+    ) : /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: item.onClick,
+        disabled: !item.onClick && !item.isActive,
+        className: [
+          "flex items-center gap-1 rounded px-1.5 py-1 transition-colors",
+          item.isActive ? "text-ink font-medium cursor-default" : item.onClick ? "text-brand hover:bg-brand-50 cursor-pointer" : "text-ink-light cursor-default"
+        ].join(" "),
+        children: [
+          item.icon && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: item.icon }),
+          item.label
+        ]
+      }
+    )
+  ] }, index)) });
+}
+function Dropdown({
+  items,
+  trigger,
+  placement = "bottom",
+  isOpen: controlledIsOpen,
+  onOpenChange,
+  className = "",
+  triggerClassName = "",
+  menuClassName = ""
+}) {
+  const [internalIsOpen, setInternalIsOpen] = React9.useState(false);
+  const containerRef = useRef(null);
+  const menuRef = useRef(null);
+  const isOpen = controlledIsOpen !== void 0 ? controlledIsOpen : internalIsOpen;
+  const toggleOpen = () => {
+    const newState = !isOpen;
+    setInternalIsOpen(newState);
+    onOpenChange?.(newState);
+  };
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (containerRef.current && !containerRef.current.contains(event.target)) {
+        setInternalIsOpen(false);
+        onOpenChange?.(false);
+      }
+    };
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+    }
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [isOpen, onOpenChange]);
+  const placementClasses2 = {
+    bottom: "top-full mt-1 left-0",
+    top: "bottom-full mb-1 left-0",
+    left: "right-full mr-1 top-0",
+    right: "left-full ml-1 top-0"
+  };
+  return /* @__PURE__ */ jsxs("div", { className: `relative inline-block ${className}`, ref: containerRef, children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: toggleOpen,
+        className: `inline-flex items-center gap-1.5 ${triggerClassName}`,
+        children: trigger
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: menuRef,
+        className: `absolute ${placementClasses2[placement]} z-50 min-w-[160px] bg-surface-default border border-outline rounded-md shadow-lg py-1 ${menuClassName}`,
+        children: items.map((item, index) => /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => {
+              item.onClick?.();
+              setInternalIsOpen(false);
+              onOpenChange?.(false);
+            },
+            disabled: item.disabled,
+            className: [
+              "w-full px-3 py-2 text-left text-sm flex items-center gap-2 transition-colors",
+              item.disabled ? "opacity-50 cursor-not-allowed" : item.isDanger ? "text-danger-text hover:bg-danger-bg" : "text-ink hover:bg-surface-gray"
+            ].join(" "),
+            children: [
+              item.icon && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: item.icon }),
+              /* @__PURE__ */ jsx("span", { children: item.label })
+            ]
+          },
+          index
+        ))
+      }
+    )
+  ] });
+}
 var sizeClasses7 = {
   sm: "max-w-sm",
   md: "max-w-md",
@@ -602,6 +1058,961 @@ function Link({
     }
   );
 }
+function FileUploader({
+  label,
+  description,
+  error,
+  hint,
+  onFilesChange,
+  maxSize,
+  accept = "*",
+  multiple = false,
+  disabled = false,
+  className = "",
+  ...props
+}) {
+  const [dragActive, setDragActive] = React9.useState(false);
+  const [files, setFiles] = React9.useState([]);
+  const inputRef = React9.useRef(null);
+  const handleFiles = (fileList) => {
+    if (!fileList) return;
+    let newFiles = Array.from(fileList);
+    if (maxSize) {
+      newFiles = newFiles.filter((file) => file.size <= maxSize);
+    }
+    if (!multiple && newFiles.length > 0) {
+      newFiles = [newFiles[0]];
+    }
+    setFiles(newFiles);
+    onFilesChange?.(newFiles);
+  };
+  const handleChange = (e) => {
+    handleFiles(e.target.files);
+  };
+  const handleDrag = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (e.type === "dragenter" || e.type === "dragover") {
+      setDragActive(true);
+    } else if (e.type === "dragleave") {
+      setDragActive(false);
+    }
+  };
+  const handleDrop = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDragActive(false);
+    handleFiles(e.dataTransfer.files);
+  };
+  const handleRemoveFile = (index) => {
+    const newFiles = files.filter((_, i) => i !== index);
+    setFiles(newFiles);
+    onFilesChange?.(newFiles);
+  };
+  const handleClick = () => {
+    inputRef.current?.click();
+  };
+  const formatFileSize = (bytes) => {
+    if (bytes === 0) return "0 Bytes";
+    const k = 1024;
+    const sizes = ["Bytes", "KB", "MB", "GB"];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return Math.round(bytes / Math.pow(k, i) * 100) / 100 + " " + sizes[i];
+  };
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    label && /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-ink mb-1", children: label }),
+    description && /* @__PURE__ */ jsx("p", { className: "text-xs text-ink-light mb-2", children: description }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        onDragEnter: handleDrag,
+        onDragLeave: handleDrag,
+        onDragOver: handleDrag,
+        onDrop: handleDrop,
+        onClick: handleClick,
+        className: [
+          "relative px-4 py-6 border-2 border-dashed rounded-md transition-colors cursor-pointer",
+          disabled ? "opacity-50 cursor-not-allowed" : "",
+          dragActive ? "border-brand bg-brand-50" : "border-outline hover:border-brand",
+          error ? "border-danger-border" : ""
+        ].join(" "),
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: inputRef,
+              type: "file",
+              accept,
+              multiple,
+              onChange: handleChange,
+              disabled,
+              className: "hidden",
+              ...props
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center gap-2", children: [
+            /* @__PURE__ */ jsx(
+              "svg",
+              {
+                className: "w-8 h-8 text-brand",
+                fill: "none",
+                stroke: "currentColor",
+                viewBox: "0 0 24 24",
+                children: /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    strokeWidth: 2,
+                    d: "M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3v-6"
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-ink", children: "Drag files here or click to upload" }),
+              hint && /* @__PURE__ */ jsx("p", { className: "text-xs text-ink-light mt-1", children: hint })
+            ] })
+          ] })
+        ]
+      }
+    ),
+    files.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-3 space-y-1.5", children: files.map((file, index) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "flex items-center justify-between p-2 bg-surface-gray rounded border border-outline",
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [
+            /* @__PURE__ */ jsxs("svg", { className: "w-4 h-4 text-brand shrink-0", fill: "currentColor", viewBox: "0 0 20 20", children: [
+              /* @__PURE__ */ jsx("path", { d: "M8 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM15 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z" }),
+              /* @__PURE__ */ jsx("path", { d: "M3 4a1 1 0 00-1 1v10a1 1 0 001 1h1.05a2.5 2.5 0 014.9 0H10a1 1 0 001-1V5a1 1 0 00-1-1H3zM14 7a1 1 0 00-1 1v6.05A2.5 2.5 0 0015.95 16H17a1 1 0 001-1v-5a1 1 0 00-.293-.707l-2-2A1 1 0 0015 7h-1z" })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-ink truncate", children: file.name }),
+              /* @__PURE__ */ jsx("p", { className: "text-xs text-ink-light", children: formatFileSize(file.size) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: (e) => {
+                e.stopPropagation();
+                handleRemoveFile(index);
+              },
+              className: "p-1 hover:bg-surface-overlay rounded transition-colors",
+              children: /* @__PURE__ */ jsx("svg", { className: "w-4 h-4 text-danger-text", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ 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" }) })
+            }
+          )
+        ]
+      },
+      `${file.name}-${index}`
+    )) }),
+    error && /* @__PURE__ */ jsx("p", { className: "text-xs text-danger-text mt-1", children: error })
+  ] });
+}
+function DatePicker({
+  value = "",
+  onChange,
+  label,
+  description,
+  error,
+  min,
+  max,
+  placeholder = "Select a date",
+  disabled = false,
+  className = "",
+  ...props
+}) {
+  const [isOpen, setIsOpen] = React9.useState(false);
+  const containerRef = useRef(null);
+  const handleDateChange = (e) => {
+    onChange?.(e.target.value);
+  };
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (containerRef.current && !containerRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+    }
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [isOpen]);
+  const formatDateForDisplay = (dateString) => {
+    if (!dateString) return "";
+    const date = new Date(dateString);
+    return date.toLocaleDateString("en-US", {
+      year: "numeric",
+      month: "long",
+      day: "numeric"
+    });
+  };
+  return /* @__PURE__ */ jsxs("div", { className, ref: containerRef, children: [
+    label && /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-ink mb-1", children: label }),
+    description && /* @__PURE__ */ jsx("p", { className: "text-xs text-ink-light mb-1.5", children: description }),
+    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "text",
+            value: value ? formatDateForDisplay(value) : "",
+            onChange: handleDateChange,
+            placeholder,
+            disabled,
+            readOnly: true,
+            onClick: () => !disabled && setIsOpen(!isOpen),
+            className: [
+              "w-full px-3 py-2 border rounded-md text-base transition-colors",
+              "focus:outline-none focus:ring-2 focus:ring-brand focus:ring-offset-1",
+              "cursor-pointer",
+              disabled ? "bg-surface-gray opacity-50 cursor-not-allowed" : "bg-white",
+              error ? "border-danger-border" : "border-outline"
+            ].join(" ")
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => !disabled && setIsOpen(!isOpen),
+            className: "absolute right-3 top-1/2 -translate-y-1/2 text-ink-light hover:text-ink",
+            children: /* @__PURE__ */ jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 7V3m8 4V3m-9 8h18M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" }) })
+          }
+        )
+      ] }),
+      isOpen && /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "date",
+          value,
+          onChange: handleDateChange,
+          min,
+          max,
+          disabled,
+          autoFocus: true,
+          className: "absolute inset-0 opacity-0 w-full h-full cursor-pointer",
+          ...props
+        }
+      )
+    ] }),
+    error && /* @__PURE__ */ jsx("p", { className: "text-xs text-danger-text mt-1", children: error })
+  ] });
+}
+function TimePicker({
+  value = "",
+  onChange,
+  label,
+  description,
+  error,
+  placeholder = "Select a time",
+  format = "24h",
+  disabled = false,
+  className = "",
+  ...props
+}) {
+  const [isOpen, setIsOpen] = React9.useState(false);
+  const containerRef = useRef(null);
+  const handleTimeChange = (e) => {
+    onChange?.(e.target.value);
+  };
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (containerRef.current && !containerRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+    }
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [isOpen]);
+  const formatTimeForDisplay = (timeString) => {
+    if (!timeString) return "";
+    const [hours, minutes] = timeString.split(":");
+    if (format === "12h") {
+      const h = parseInt(hours, 10);
+      const period = h >= 12 ? "PM" : "AM";
+      const displayHours = h > 12 ? h - 12 : h === 0 ? 12 : h;
+      return `${displayHours.toString().padStart(2, "0")}:${minutes} ${period}`;
+    }
+    return `${hours}:${minutes}`;
+  };
+  return /* @__PURE__ */ jsxs("div", { className, ref: containerRef, children: [
+    label && /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-ink mb-1", children: label }),
+    description && /* @__PURE__ */ jsx("p", { className: "text-xs text-ink-light mb-1.5", children: description }),
+    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "text",
+            value: value ? formatTimeForDisplay(value) : "",
+            onChange: handleTimeChange,
+            placeholder,
+            disabled,
+            readOnly: true,
+            onClick: () => !disabled && setIsOpen(!isOpen),
+            className: [
+              "w-full px-3 py-2 border rounded-md text-base transition-colors",
+              "focus:outline-none focus:ring-2 focus:ring-brand focus:ring-offset-1",
+              "cursor-pointer",
+              disabled ? "bg-surface-gray opacity-50 cursor-not-allowed" : "bg-white",
+              error ? "border-danger-border" : "border-outline"
+            ].join(" ")
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => !disabled && setIsOpen(!isOpen),
+            className: "absolute right-3 top-1/2 -translate-y-1/2 text-ink-light hover:text-ink",
+            children: /* @__PURE__ */ jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" }) })
+          }
+        )
+      ] }),
+      isOpen && /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "time",
+          value,
+          onChange: handleTimeChange,
+          disabled,
+          autoFocus: true,
+          className: "absolute inset-0 opacity-0 w-full h-full cursor-pointer",
+          ...props
+        }
+      )
+    ] }),
+    error && /* @__PURE__ */ jsx("p", { className: "text-xs text-danger-text mt-1", children: error })
+  ] });
+}
+var sizeClasses8 = {
+  sm: "h-1.5",
+  md: "h-2.5",
+  lg: "h-4"
+};
+var themeClasses3 = {
+  brand: "bg-brand",
+  success: "bg-success-icon",
+  warning: "bg-warning-icon",
+  danger: "bg-danger-icon"
+};
+function Progress({
+  value,
+  label,
+  size = "md",
+  theme = "brand",
+  showLabel = false,
+  striped = false,
+  animated = false,
+  className = "",
+  ...props
+}) {
+  const clampedValue = Math.min(Math.max(value, 0), 100);
+  return /* @__PURE__ */ jsxs("div", { className, ...props, children: [
+    (label || showLabel) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-1.5", children: [
+      label && /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-ink", children: label }),
+      showLabel && /* @__PURE__ */ jsxs("p", { className: "text-sm font-medium text-ink-light", children: [
+        clampedValue,
+        "%"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: `w-full bg-surface-gray rounded-full overflow-hidden ${sizeClasses8[size]}`, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: [
+          `${themeClasses3[theme]} ${sizeClasses8[size]} rounded-full transition-all duration-300`,
+          striped ? "bg-gradient-to-r from-transparent to-white opacity-30" : "",
+          animated ? "animate-pulse" : ""
+        ].join(" "),
+        style: { width: `${clampedValue}%` }
+      }
+    ) })
+  ] });
+}
+var sizeClasses9 = {
+  sm: "w-4 h-4",
+  md: "w-5 h-5",
+  lg: "w-6 h-6"
+};
+var colorClasses2 = {
+  yellow: "text-yellow-400",
+  brand: "text-brand",
+  danger: "text-danger-icon"
+};
+function Rating({
+  value = 0,
+  onChange,
+  count = 5,
+  size = "md",
+  readonly = false,
+  label,
+  color = "yellow",
+  className = "",
+  ...props
+}) {
+  const [hoverValue, setHoverValue] = React9.useState(0);
+  const displayValue = hoverValue || value;
+  return /* @__PURE__ */ jsxs("div", { className, ...props, children: [
+    label && /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-ink mb-2", children: label }),
+    /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1", children: Array.from({ length: count }, (_, i) => i + 1).map((starValue) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => !readonly && onChange?.(starValue),
+        onMouseEnter: () => !readonly && setHoverValue(starValue),
+        onMouseLeave: () => setHoverValue(0),
+        disabled: readonly,
+        className: `transition-transform hover:scale-110 ${readonly ? "cursor-default" : "cursor-pointer"}`,
+        children: /* @__PURE__ */ jsx(
+          "svg",
+          {
+            className: `${sizeClasses9[size]} ${starValue <= displayValue ? `fill-current ${colorClasses2[color]}` : "text-outline"}`,
+            viewBox: "0 0 20 20",
+            fill: "currentColor",
+            children: /* @__PURE__ */ jsx("path", { d: "M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" })
+          }
+        )
+      },
+      starValue
+    )) }),
+    displayValue > 0 && /* @__PURE__ */ jsxs("p", { className: "text-sm text-ink-light mt-2", children: [
+      displayValue,
+      " / ",
+      count
+    ] })
+  ] });
+}
+var themeClasses4 = {
+  brand: "accent-brand",
+  success: "accent-success-icon",
+  danger: "accent-danger-icon"
+};
+function Slider({
+  value = 0,
+  onChange,
+  min = 0,
+  max = 100,
+  step = 1,
+  label,
+  showValue = false,
+  theme = "brand",
+  className = "",
+  disabled = false,
+  ...props
+}) {
+  const handleChange = (e) => {
+    onChange?.(parseFloat(e.target.value));
+  };
+  const percentage = (Number(value) - Number(min)) / (Number(max) - Number(min)) * 100;
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    (label || showValue) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-2", children: [
+      label && /* @__PURE__ */ jsx("label", { className: "text-sm font-medium text-ink", children: label }),
+      showValue && /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-ink-light", children: value })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "range",
+        min,
+        max,
+        step,
+        value,
+        onChange: handleChange,
+        disabled,
+        className: [
+          `w-full h-2 rounded-lg appearance-none cursor-pointer ${themeClasses4[theme]}`,
+          "bg-gradient-to-r from-surface-gray to-surface-gray",
+          "focus:outline-none focus:ring-2 focus:ring-brand focus:ring-offset-2",
+          disabled ? "opacity-50 cursor-not-allowed" : ""
+        ].join(" "),
+        style: {
+          background: disabled ? void 0 : `linear-gradient(to right, var(--color-brand) 0%, var(--color-brand) ${percentage}%, var(--color-surface-gray) ${percentage}%, var(--color-surface-gray) 100%)`
+        },
+        ...props
+      }
+    )
+  ] });
+}
+function Sidebar({
+  sections,
+  activeItem,
+  onItemClick,
+  collapsible = false,
+  isCollapsed = false,
+  onCollapsedChange,
+  width = "w-64",
+  className = "",
+  ...props
+}) {
+  const handleItemClick = (value, onClick) => {
+    onClick?.();
+    onItemClick?.(value);
+  };
+  return /* @__PURE__ */ jsxs(
+    "aside",
+    {
+      className: [
+        `${width} bg-surface-default border-r border-outline transition-all duration-200`,
+        isCollapsed ? "w-16" : "",
+        className
+      ].join(" "),
+      ...props,
+      children: [
+        collapsible && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between p-3 border-b border-outline", children: [
+          !isCollapsed && /* @__PURE__ */ jsx("h2", { className: "text-sm font-semibold text-ink", children: "Menu" }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => onCollapsedChange?.(!isCollapsed),
+              className: "p-1 hover:bg-surface-gray rounded transition-colors",
+              title: isCollapsed ? "Expand sidebar" : "Collapse sidebar",
+              children: /* @__PURE__ */ jsx("svg", { className: "w-4 h-4 text-ink", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: isCollapsed ? /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) : /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("nav", { className: "py-2", children: sections.map((section, sectionIndex) => /* @__PURE__ */ jsxs("div", { children: [
+          section.title && !isCollapsed && /* @__PURE__ */ jsx("p", { className: "px-3 py-2 text-xs font-semibold text-ink-light uppercase tracking-wide", children: section.title }),
+          section.items.map((item) => /* @__PURE__ */ jsxs(
+            "button",
+            {
+              onClick: () => handleItemClick(item.value, item.onClick),
+              disabled: item.disabled,
+              title: isCollapsed ? typeof item.label === "string" ? item.label : "" : void 0,
+              className: [
+                "w-full px-3 py-2 flex items-center gap-2 text-sm transition-colors",
+                "hover:bg-surface-gray focus:outline-none focus:ring-2 focus:ring-brand focus:ring-offset-0",
+                item.disabled ? "opacity-50 cursor-not-allowed hover:bg-transparent" : "",
+                item.isActive || item.value === activeItem ? "bg-brand-50 text-brand font-medium" : "text-ink hover:text-brand",
+                isCollapsed ? "justify-center" : ""
+              ].join(" "),
+              children: [
+                item.icon && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: item.icon }),
+                !isCollapsed && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx("span", { className: "flex-1 text-left", children: item.label }),
+                  item.badge && /* @__PURE__ */ jsx("span", { className: "text-xs px-1.5 py-0.5 bg-brand rounded-full text-white", children: item.badge })
+                ] })
+              ]
+            },
+            item.value
+          ))
+        ] }, sectionIndex)) })
+      ]
+    }
+  );
+}
+function Table({
+  columns,
+  data,
+  striped = true,
+  hoverable = true,
+  compact = false,
+  className = "",
+  emptyMessage = "No data"
+}) {
+  if (data.length === 0) {
+    return /* @__PURE__ */ jsx("div", { className: "text-center py-8 text-ink-faint text-sm", children: emptyMessage });
+  }
+  return /* @__PURE__ */ jsx("div", { className: `overflow-x-auto border border-outline rounded-lg ${className}`, children: /* @__PURE__ */ jsxs("table", { className: "w-full", children: [
+    /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { className: "bg-surface-gray border-b border-outline", children: columns.map((col) => /* @__PURE__ */ jsx(
+      "th",
+      {
+        style: { width: col.width },
+        className: `
+                  ${compact ? "px-3 py-2" : "px-4 py-3"}
+                  text-left text-xs font-semibold text-ink-faint uppercase tracking-wide
+                  ${col.align === "center" ? "text-center" : col.align === "right" ? "text-right" : "text-left"}
+                `,
+        children: col.label
+      },
+      col.key
+    )) }) }),
+    /* @__PURE__ */ jsx("tbody", { children: data.map((row, rowIdx) => /* @__PURE__ */ jsx(
+      "tr",
+      {
+        className: `
+                border-b border-outline last:border-b-0
+                ${striped && rowIdx % 2 === 1 ? "bg-surface-gray/50" : ""}
+                ${hoverable ? "hover:bg-surface-overlay transition-colors" : ""}
+              `,
+        children: columns.map((col) => /* @__PURE__ */ jsx(
+          "td",
+          {
+            style: { width: col.width },
+            className: `
+                    ${compact ? "px-3 py-2" : "px-4 py-3"}
+                    text-sm text-ink
+                    ${col.align === "center" ? "text-center" : col.align === "right" ? "text-right" : "text-left"}
+                  `,
+            children: col.render ? col.render(row[col.key], row) : row[col.key]
+          },
+          `${rowIdx}-${col.key}`
+        ))
+      },
+      rowIdx
+    )) })
+  ] }) });
+}
+var ChevronLeftIcon = ({ size }) => /* @__PURE__ */ jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("polyline", { points: "15 18 9 12 15 6" }) });
+var ChevronRightIcon = ({ size }) => /* @__PURE__ */ jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("polyline", { points: "9 18 15 12 9 6" }) });
+function Pagination({
+  current,
+  total,
+  onChange,
+  size = "md",
+  showInfo = true,
+  maxVisible = 5,
+  className = ""
+}) {
+  const sizeClass = size === "sm" ? "text-xs px-2 py-1" : "text-sm px-3 py-2";
+  const getPages = () => {
+    const pages2 = [];
+    const halfVisible = Math.floor(maxVisible / 2);
+    let start = Math.max(1, current - halfVisible);
+    let end = Math.min(total, current + halfVisible);
+    if (start === 1) {
+      end = Math.min(total, maxVisible);
+    } else if (end === total) {
+      start = Math.max(1, total - maxVisible + 1);
+    }
+    if (start > 1) pages2.push(1);
+    if (start > 2) pages2.push("...");
+    for (let i = start; i <= end; i++) {
+      pages2.push(i);
+    }
+    if (end < total - 1) pages2.push("...");
+    if (end < total) pages2.push(total);
+    return pages2;
+  };
+  const pages = getPages();
+  return /* @__PURE__ */ jsxs("div", { className: `flex items-center gap-2 ${className}`, children: [
+    showInfo && /* @__PURE__ */ jsxs("span", { className: "text-xs text-ink-faint", children: [
+      "Page ",
+      current,
+      " of ",
+      total
+    ] }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => onChange(Math.max(1, current - 1)),
+        disabled: current === 1,
+        className: `
+          flex items-center justify-center rounded border border-outline
+          hover:bg-surface-overlay disabled:text-ink-faint disabled:cursor-not-allowed disabled:hover:bg-transparent
+          transition-colors ${sizeClass}
+        `,
+        title: "Previous page",
+        children: /* @__PURE__ */ jsx(ChevronLeftIcon, { size: size === "sm" ? 12 : 16 })
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "flex gap-1", children: pages.map(
+      (page, i) => page === "..." ? /* @__PURE__ */ jsx("span", { className: "px-2 text-ink-faint", children: "..." }, `ellipsis-${i}`) : /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => onChange(page),
+          className: `
+                flex items-center justify-center rounded border
+                transition-colors ${sizeClass}
+                ${current === page ? "bg-brand text-white border-brand" : "border-outline hover:bg-surface-overlay"}
+              `,
+          children: page
+        },
+        page
+      )
+    ) }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => onChange(Math.min(total, current + 1)),
+        disabled: current === total,
+        className: `
+          flex items-center justify-center rounded border border-outline
+          hover:bg-surface-overlay disabled:text-ink-faint disabled:cursor-not-allowed disabled:hover:bg-transparent
+          transition-colors ${sizeClass}
+        `,
+        title: "Next page",
+        children: /* @__PURE__ */ jsx(ChevronRightIcon, { size: size === "sm" ? 12 : 16 })
+      }
+    )
+  ] });
+}
+function EmptyState({
+  icon,
+  title,
+  description,
+  action,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: `flex flex-col items-center justify-center py-12 px-4 ${className}`, children: [
+    icon && /* @__PURE__ */ jsx("div", { className: "text-4xl mb-4", children: icon }),
+    /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-ink mb-2", children: title }),
+    description && /* @__PURE__ */ jsx("p", { className: "text-sm text-ink-faint mb-6 text-center max-w-sm", children: description }),
+    action && /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: action.onClick,
+        className: "px-4 py-2 bg-brand text-white rounded-md hover:bg-brand-600 transition-colors text-sm font-medium",
+        children: action.label
+      }
+    )
+  ] });
+}
+var ChevronUpIcon = ({ size }) => /* @__PURE__ */ jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("polyline", { points: "18 15 12 9 6 15" }) });
+var ChevronDownIcon = ({ size }) => /* @__PURE__ */ jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("polyline", { points: "6 9 12 15 18 9" }) });
+var sizeClasses10 = {
+  sm: "text-xs px-2 py-1 h-8",
+  md: "text-sm px-3 py-2 h-10",
+  lg: "text-base px-4 py-2.5 h-12"
+};
+function NumberInput({
+  value,
+  onChange,
+  step = 1,
+  min,
+  max,
+  size = "md",
+  disabled = false,
+  placeholder,
+  className = ""
+}) {
+  const [isEditing, setIsEditing] = useState(false);
+  const handleIncrement = () => {
+    const newValue = value + step;
+    if (max === void 0 || newValue <= max) {
+      onChange(newValue);
+    }
+  };
+  const handleDecrement = () => {
+    const newValue = value - step;
+    if (min === void 0 || newValue >= min) {
+      onChange(newValue);
+    }
+  };
+  const handleInputChange = (e) => {
+    const newValue = parseFloat(e.target.value);
+    if (!isNaN(newValue)) {
+      let val = newValue;
+      if (min !== void 0 && val < min) val = min;
+      if (max !== void 0 && val > max) val = max;
+      onChange(val);
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: `relative inline-flex items-center border border-outline rounded-md bg-surface ${className}`, children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "number",
+        value,
+        onChange: handleInputChange,
+        onFocus: () => setIsEditing(true),
+        onBlur: () => setIsEditing(false),
+        disabled,
+        placeholder,
+        step,
+        min,
+        max,
+        className: `
+          flex-1 bg-transparent outline-none text-ink disabled:text-ink-faint disabled:cursor-not-allowed
+          ${sizeClasses10[size]}
+        `
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col border-l border-outline", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: handleIncrement,
+          disabled: disabled || max !== void 0 && value >= max,
+          className: "flex-1 px-1 hover:bg-surface-overlay disabled:text-ink-faint disabled:cursor-not-allowed transition-colors",
+          title: "Increment",
+          children: /* @__PURE__ */ jsx(ChevronUpIcon, { size: size === "sm" ? 12 : size === "md" ? 14 : 16 })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: handleDecrement,
+          disabled: disabled || min !== void 0 && value <= min,
+          className: "flex-1 px-1 hover:bg-surface-overlay disabled:text-ink-faint disabled:cursor-not-allowed transition-colors border-t border-outline",
+          title: "Decrement",
+          children: /* @__PURE__ */ jsx(ChevronDownIcon, { size: size === "sm" ? 12 : size === "md" ? 14 : 16 })
+        }
+      )
+    ] })
+  ] });
+}
+var CopyIcon = ({ size }) => /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx("path", { d: "M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" }),
+  /* @__PURE__ */ jsx("rect", { x: "8", y: "2", width: "8", height: "4", rx: "1", ry: "1" })
+] });
+var CheckIcon = ({ size, className }) => /* @__PURE__ */ jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" }) });
+function CodeBlock({
+  code,
+  language = "text",
+  copyable = true,
+  numbered = false,
+  maxHeight = "max-h-96",
+  className = ""
+}) {
+  const [copied, setCopied] = 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);
+    }
+  };
+  const lines = code.split("\n");
+  return /* @__PURE__ */ jsxs("div", { className: `relative bg-ink rounded-lg overflow-hidden border border-outline ${className}`, children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between bg-surface-gray px-4 py-2 border-b border-outline", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-xs text-ink-faint font-mono uppercase", children: language }),
+      copyable && /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: handleCopy,
+          className: "p-1 rounded hover:bg-surface-overlay transition-colors text-ink-faint hover:text-ink",
+          title: "Copy to clipboard",
+          children: copied ? /* @__PURE__ */ jsx("span", { style: { color: "currentColor" }, className: "text-status-online", children: /* @__PURE__ */ jsx(CheckIcon, { size: 14 }) }) : /* @__PURE__ */ jsx(CopyIcon, { size: 14 })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: `overflow-auto ${maxHeight}`, children: /* @__PURE__ */ jsx("pre", { className: "p-4 text-sm font-mono text-sky-100", children: numbered ? /* @__PURE__ */ jsx(Fragment, { children: lines.map((line, i) => /* @__PURE__ */ jsxs("div", { className: "flex gap-4", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-ink-faint select-none", children: String(i + 1).padStart(3, " ") }),
+      /* @__PURE__ */ jsx("span", { children: line })
+    ] }, i)) }) : code }) })
+  ] });
+}
+var statusColors = {
+  completed: {
+    dot: "bg-status-online border-status-online",
+    line: "bg-status-online",
+    text: "text-status-online"
+  },
+  pending: {
+    dot: "bg-ink-light border-ink-light",
+    line: "bg-ink-faint",
+    text: "text-ink-faint"
+  },
+  error: {
+    dot: "bg-danger-icon border-danger-icon",
+    line: "bg-danger-icon",
+    text: "text-danger-text"
+  },
+  "in-progress": {
+    dot: "bg-brand border-brand",
+    line: "bg-brand",
+    text: "text-brand"
+  }
+};
+function Timeline({
+  items,
+  orientation = "vertical",
+  className = ""
+}) {
+  if (orientation === "vertical") {
+    return /* @__PURE__ */ jsx("div", { className: `space-y-4 ${className}`, children: items.map((item, index) => {
+      const colors = statusColors[item.status];
+      const isLast = index === items.length - 1;
+      return /* @__PURE__ */ jsxs("div", { className: "flex gap-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: `
+                    w-4 h-4 rounded-full border-2 flex-shrink-0
+                    flex items-center justify-center bg-white
+                    ${colors.dot}
+                  `,
+              children: item.icon && /* @__PURE__ */ jsx("span", { className: "text-white text-2xs", children: item.icon })
+            }
+          ),
+          !isLast && /* @__PURE__ */ jsx("div", { className: `w-0.5 h-12 ${colors.line}` })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 py-1", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx("h4", { className: `font-semibold text-sm ${colors.text}`, children: item.label }),
+            item.timestamp && /* @__PURE__ */ jsx("span", { className: "text-xs text-ink-faint", children: typeof item.timestamp === "string" ? item.timestamp : new Date(item.timestamp).toLocaleTimeString("en-GB", {
+              hour12: false,
+              hour: "2-digit",
+              minute: "2-digit",
+              second: "2-digit"
+            }) })
+          ] }),
+          item.description && /* @__PURE__ */ jsx("p", { className: "text-sm text-ink-faint mt-1", children: item.description })
+        ] })
+      ] }, item.id);
+    }) });
+  }
+  return /* @__PURE__ */ jsx("div", { className: `flex gap-4 overflow-x-auto pb-2 ${className}`, children: items.map((item, index) => {
+    const colors = statusColors[item.status];
+    index === items.length - 1;
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center flex-shrink-0 gap-2 min-w-fit", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        index > 0 && /* @__PURE__ */ jsx("div", { className: `h-0.5 w-6 ${statusColors[items[index - 1].status].line}` }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: `
+                  w-5 h-5 rounded-full border-2 flex items-center justify-center bg-white
+                  ${colors.dot}
+                `,
+            children: item.icon && /* @__PURE__ */ jsx("span", { className: "text-white text-2xs", children: item.icon })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+        /* @__PURE__ */ jsx("p", { className: `text-xs font-semibold ${colors.text}`, children: item.label }),
+        item.timestamp && /* @__PURE__ */ jsx("p", { className: "text-2xs text-ink-faint", children: typeof item.timestamp === "string" ? item.timestamp : new Date(item.timestamp).toLocaleTimeString("en-GB", {
+          hour12: false,
+          hour: "2-digit",
+          minute: "2-digit"
+        }) })
+      ] })
+    ] }, item.id);
+  }) });
+}
+var sizeClasses11 = {
+  xs: "text-xs px-1.5 py-0.5 min-w-5 h-5",
+  sm: "text-xs px-2 py-1 min-w-6 h-6",
+  md: "text-sm px-2.5 py-1.5 min-w-8 h-8"
+};
+var themeClasses5 = {
+  gray: "bg-surface-gray border-outline text-ink",
+  dark: "bg-ink text-white border-ink-faint",
+  brand: "bg-brand border-brand text-white"
+};
+function Kbd({
+  keys,
+  size = "sm",
+  theme = "gray",
+  className = ""
+}) {
+  const keyArray = Array.isArray(keys) ? keys : [keys];
+  return /* @__PURE__ */ jsx("span", { className: `inline-flex items-center gap-1 ${className}`, children: keyArray.map((key, i) => /* @__PURE__ */ jsxs(React9.Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "kbd",
+      {
+        className: `
+              inline-flex items-center justify-center rounded font-mono font-medium
+              border border-b-2 shadow-sm
+              ${sizeClasses11[size]}
+              ${themeClasses5[theme]}
+            `,
+        children: key
+      }
+    ),
+    i < keyArray.length - 1 && /* @__PURE__ */ jsx("span", { className: "text-ink-faint text-xs", children: "+" })
+  ] }, key)) });
+}
 var statusConfig = {
   online: {
     label: "Online",
@@ -676,7 +2087,7 @@ function StatusBadge({
     }
   );
 }
-var sizeClasses8 = {
+var sizeClasses12 = {
   sm: "text-xs gap-1.5",
   md: "text-sm gap-2",
   lg: "text-base gap-2"
@@ -695,7 +2106,7 @@ function ConnectionIndicator({
   className = ""
 }) {
   const status = connected ? "online" : "offline";
-  return /* @__PURE__ */ jsxs("div", { className: `inline-flex items-center ${sizeClasses8[size]} ${className}`, children: [
+  return /* @__PURE__ */ jsxs("div", { className: `inline-flex items-center ${sizeClasses12[size]} ${className}`, children: [
     /* @__PURE__ */ jsx(
       StatusBadge,
       {
@@ -742,6 +2153,6 @@ function useToast() {
   return { toasts, addToast, removeToast };
 }
 
-export { Avatar, Badge, Button, Card, Checkbox, ConnectionIcon, ConnectionIndicator, Dialog, Input, Link, Select, Spinner, StatusBadge, Textarea, Toast, ToastContainer, Tooltip, useDisclosure, useToast };
+export { Alert, Avatar, Badge, Breadcrumbs, Button, Card, Checkbox, CodeBlock, ConnectionIcon, ConnectionIndicator, DatePicker, Dialog, Dropdown, EmptyState, FileUploader, FormControl, Input, Kbd, Link, MultiSelect, NumberInput, Pagination, Progress, Rating, Select, Sidebar, Slider, Spinner, StatusBadge, Switch, Table, Tabs, Textarea, TimePicker, Timeline, Toast, ToastContainer, Tooltip, useDisclosure, useToast };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map