@kreativa/ui 0.1.0

package/dist/index.mjs

@@ -0,0 +1,1178 @@
+// src/components/Layout.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function Layout({ children, sidebar }) {
+  return /* @__PURE__ */ jsxs("div", { className: "min-h-screen flex", children: [
+    sidebar && /* @__PURE__ */ jsx("aside", { className: "w-64 bg-primary-600 text-white flex flex-col", children: sidebar }),
+    /* @__PURE__ */ jsx("main", { className: "flex-1 overflow-auto bg-cream-50", children: /* @__PURE__ */ jsx("div", { className: "p-6", children }) })
+  ] });
+}
+
+// src/components/Sidebar.tsx
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function Sidebar({ header, navigation, footer }) {
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    header && /* @__PURE__ */ jsx2("div", { className: "p-4 border-b border-primary-500", children: header }),
+    /* @__PURE__ */ jsx2("nav", { className: "flex-1 p-4 overflow-y-auto", children: navigation }),
+    footer && /* @__PURE__ */ jsx2("div", { className: "p-4 border-t border-primary-500", children: footer })
+  ] });
+}
+
+// src/components/ServiceSwitcher.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function ServiceSwitcher({ services, currentServiceId, onServiceChange }) {
+  if (services.length <= 1) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx3("div", { className: "mt-2", children: /* @__PURE__ */ jsx3(
+    "select",
+    {
+      value: currentServiceId,
+      onChange: (e) => onServiceChange(e.target.value),
+      className: "w-full px-3 py-2 rounded-lg text-sm appearance-none cursor-pointer bg-primary-500 text-white border border-primary-400 focus:outline-none focus:ring-2 focus:ring-primary-300",
+      children: services.map((service) => /* @__PURE__ */ jsx3("option", { value: service.id, children: service.name }, service.id))
+    }
+  ) });
+}
+
+// src/components/Button.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var variantClasses = {
+  primary: "bg-pink-500 hover:bg-pink-600 text-white",
+  secondary: "bg-primary-500 hover:bg-primary-600 text-white",
+  danger: "bg-red-500 hover:bg-red-600 text-white",
+  ghost: "bg-transparent hover:bg-primary-100 text-primary-600"
+};
+var sizeClasses = {
+  sm: "px-3 py-1.5 text-sm",
+  md: "px-4 py-2 text-base",
+  lg: "px-6 py-3 text-lg"
+};
+function Button({
+  variant = "primary",
+  size = "md",
+  className = "",
+  children,
+  disabled,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx4(
+    "button",
+    {
+      className: `
+        inline-flex items-center justify-center rounded-lg font-medium
+        transition-colors focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2
+        disabled:opacity-50 disabled:cursor-not-allowed
+        ${variantClasses[variant]}
+        ${sizeClasses[size]}
+        ${className}
+      `,
+      disabled,
+      ...props,
+      children
+    }
+  );
+}
+
+// src/components/Input.tsx
+import { forwardRef } from "react";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var Input = forwardRef(
+  ({ label, error, className = "", ...props }, ref) => {
+    return /* @__PURE__ */ jsxs3("div", { className: "w-full", children: [
+      label && /* @__PURE__ */ jsx5("label", { className: "block text-sm font-medium text-gray-700 mb-1", children: label }),
+      /* @__PURE__ */ jsx5(
+        "input",
+        {
+          ref,
+          className: `
+            w-full px-3 py-2 border rounded-lg
+            focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500
+            disabled:bg-gray-100 disabled:cursor-not-allowed
+            ${error ? "border-red-500" : "border-gray-300"}
+            ${className}
+          `,
+          ...props
+        }
+      ),
+      error && /* @__PURE__ */ jsx5("p", { className: "mt-1 text-sm text-red-500", children: error })
+    ] });
+  }
+);
+Input.displayName = "Input";
+
+// src/components/Card.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+var paddingClasses = {
+  none: "",
+  sm: "p-3",
+  md: "p-4",
+  lg: "p-6"
+};
+function Card({ children, className = "", padding = "md" }) {
+  return /* @__PURE__ */ jsx6(
+    "div",
+    {
+      className: `
+        bg-white rounded-lg shadow-sm border border-gray-200
+        ${paddingClasses[padding]}
+        ${className}
+      `,
+      children
+    }
+  );
+}
+
+// src/components/LoadingSpinner.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+var sizeClasses2 = {
+  sm: "w-4 h-4",
+  md: "w-8 h-8",
+  lg: "w-12 h-12"
+};
+function LoadingSpinner({ size = "md", fullScreen = false }) {
+  const spinner = /* @__PURE__ */ jsx7(
+    "div",
+    {
+      className: `
+        animate-spin rounded-full border-2 border-primary-200 border-t-primary-600
+        ${sizeClasses2[size]}
+      `
+    }
+  );
+  if (fullScreen) {
+    return /* @__PURE__ */ jsx7("div", { className: "min-h-screen flex items-center justify-center", children: spinner });
+  }
+  return spinner;
+}
+
+// src/components/EmptyState.tsx
+import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+function EmptyState({ icon, title, description, action }) {
+  return /* @__PURE__ */ jsxs4("div", { className: "text-center py-16", children: [
+    icon && /* @__PURE__ */ jsx8("div", { className: "w-16 h-16 mx-auto mb-4 rounded-full bg-gray-100 flex items-center justify-center", children: icon }),
+    /* @__PURE__ */ jsx8("h3", { className: "text-lg font-medium text-gray-800 mb-1", children: title }),
+    description && /* @__PURE__ */ jsx8("p", { className: "text-gray-500 mb-4", children: description }),
+    action
+  ] });
+}
+
+// src/components/Modal.tsx
+import { useEffect } from "react";
+import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+var maxWidthClasses = {
+  sm: "max-w-sm",
+  md: "max-w-md",
+  lg: "max-w-lg",
+  xl: "max-w-xl",
+  "2xl": "max-w-2xl"
+};
+function Modal({ isOpen, onClose, title, children, maxWidth = "xl" }) {
+  useEffect(() => {
+    const handleEscape = (e) => {
+      if (e.key === "Escape") {
+        onClose();
+      }
+    };
+    if (isOpen) {
+      document.addEventListener("keydown", handleEscape);
+      document.body.style.overflow = "hidden";
+    }
+    return () => {
+      document.removeEventListener("keydown", handleEscape);
+      document.body.style.overflow = "";
+    };
+  }, [isOpen, onClose]);
+  if (!isOpen) return null;
+  return /* @__PURE__ */ jsx9(
+    "div",
+    {
+      className: "fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4",
+      onClick: (e) => {
+        if (e.target === e.currentTarget) {
+          onClose();
+        }
+      },
+      children: /* @__PURE__ */ jsxs5(
+        "div",
+        {
+          className: `bg-white rounded-2xl shadow-2xl w-full ${maxWidthClasses[maxWidth]} p-6 max-h-[90vh] overflow-y-auto`,
+          children: [
+            /* @__PURE__ */ jsx9("h2", { className: "text-xl font-bold text-gray-800 mb-6", children: title }),
+            children
+          ]
+        }
+      )
+    }
+  );
+}
+
+// src/components/FormInput.tsx
+import { forwardRef as forwardRef2 } from "react";
+import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+var FormInput = forwardRef2(
+  ({ label, helpText, error, className = "", ...props }, ref) => {
+    return /* @__PURE__ */ jsxs6("div", { children: [
+      label && /* @__PURE__ */ jsx10("label", { className: "block text-sm font-medium text-gray-700 mb-2", children: label }),
+      /* @__PURE__ */ jsx10(
+        "input",
+        {
+          ref,
+          className: `w-full px-4 py-3 rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent ${error ? "border-red-300 focus:ring-red-500" : ""} ${className}`,
+          ...props
+        }
+      ),
+      helpText && !error && /* @__PURE__ */ jsx10("p", { className: "mt-1 text-xs text-gray-500", children: helpText }),
+      error && /* @__PURE__ */ jsx10("p", { className: "mt-1 text-xs text-red-600", children: error })
+    ] });
+  }
+);
+FormInput.displayName = "FormInput";
+
+// src/components/FormTextarea.tsx
+import { forwardRef as forwardRef3 } from "react";
+import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+var FormTextarea = forwardRef3(
+  ({ label, helpText, error, className = "", ...props }, ref) => {
+    return /* @__PURE__ */ jsxs7("div", { children: [
+      label && /* @__PURE__ */ jsx11("label", { className: "block text-sm font-medium text-gray-700 mb-2", children: label }),
+      /* @__PURE__ */ jsx11(
+        "textarea",
+        {
+          ref,
+          className: `w-full px-4 py-3 rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent resize-y ${error ? "border-red-300 focus:ring-red-500" : ""} ${className}`,
+          ...props
+        }
+      ),
+      helpText && !error && /* @__PURE__ */ jsx11("p", { className: "mt-1 text-xs text-gray-500", children: helpText }),
+      error && /* @__PURE__ */ jsx11("p", { className: "mt-1 text-xs text-red-600", children: error })
+    ] });
+  }
+);
+FormTextarea.displayName = "FormTextarea";
+
+// src/components/FormButtonGroup.tsx
+import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+function FormButtonGroup({
+  cancelText = "Cancel",
+  submitText = "Save",
+  loadingText = "Saving...",
+  isLoading = false,
+  isDisabled = false,
+  onCancel,
+  onSubmit,
+  submitContent
+}) {
+  return /* @__PURE__ */ jsxs8("div", { className: "flex gap-3 pt-2", children: [
+    /* @__PURE__ */ jsx12(
+      "button",
+      {
+        type: "button",
+        onClick: onCancel,
+        className: "flex-1 py-3 px-4 bg-gray-100 text-gray-700 font-medium rounded-xl hover:bg-gray-200 transition-colors",
+        children: cancelText
+      }
+    ),
+    /* @__PURE__ */ jsx12(
+      "button",
+      {
+        type: onSubmit ? "button" : "submit",
+        onClick: onSubmit,
+        disabled: isLoading || isDisabled,
+        className: "flex-1 py-3 px-4 bg-primary-600 text-white font-medium rounded-xl hover:bg-primary-700 transition-colors disabled:opacity-50",
+        children: submitContent ?? (isLoading ? loadingText : submitText)
+      }
+    )
+  ] });
+}
+
+// src/components/Table.tsx
+import { useState, useMemo } from "react";
+import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
+function Table({
+  data,
+  columns,
+  getRowKey,
+  onRowClick,
+  loading = false,
+  emptyMessage = "No data available",
+  className = ""
+}) {
+  const [sortKey, setSortKey] = useState(null);
+  const [sortDirection, setSortDirection] = useState(null);
+  const handleHeaderClick = (column) => {
+    if (!column.sortable) return;
+    if (sortKey === column.key) {
+      if (sortDirection === "asc") {
+        setSortDirection("desc");
+      } else if (sortDirection === "desc") {
+        setSortKey(null);
+        setSortDirection(null);
+      }
+    } else {
+      setSortKey(column.key);
+      setSortDirection("asc");
+    }
+  };
+  const sortedData = useMemo(() => {
+    if (!sortKey || !sortDirection) return data;
+    const column = columns.find((c) => c.key === sortKey);
+    if (!column) return data;
+    const sorted = [...data].sort((a, b) => {
+      if (column.sortFn) {
+        return column.sortFn(a, b);
+      }
+      const aVal = String(column.render(a) ?? "");
+      const bVal = String(column.render(b) ?? "");
+      return aVal.localeCompare(bVal);
+    });
+    return sortDirection === "desc" ? sorted.reverse() : sorted;
+  }, [data, columns, sortKey, sortDirection]);
+  const getSortIcon = (column) => {
+    if (!column.sortable) return null;
+    if (sortKey !== column.key) {
+      return /* @__PURE__ */ jsx13("svg", { className: "w-4 h-4 text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx13("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4" }) });
+    }
+    if (sortDirection === "asc") {
+      return /* @__PURE__ */ jsx13("svg", { className: "w-4 h-4 text-primary-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx13("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 15l7-7 7 7" }) });
+    }
+    return /* @__PURE__ */ jsx13("svg", { className: "w-4 h-4 text-primary-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx13("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) });
+  };
+  const alignmentClasses = {
+    left: "text-left",
+    center: "text-center",
+    right: "text-right"
+  };
+  return /* @__PURE__ */ jsx13("div", { className: `overflow-x-auto ${className}`, children: /* @__PURE__ */ jsxs9("table", { className: "w-full border-collapse", children: [
+    /* @__PURE__ */ jsx13("thead", { children: /* @__PURE__ */ jsx13("tr", { className: "bg-gray-50 border-b border-gray-200", children: columns.map((column) => /* @__PURE__ */ jsx13(
+      "th",
+      {
+        className: `
+                  px-4 py-3 text-sm font-semibold text-gray-700
+                  ${alignmentClasses[column.align ?? "left"]}
+                  ${column.sortable ? "cursor-pointer select-none hover:bg-gray-100" : ""}
+                `,
+        style: { width: column.width },
+        onClick: () => handleHeaderClick(column),
+        children: /* @__PURE__ */ jsxs9("div", { className: `flex items-center gap-1 ${column.align === "right" ? "justify-end" : column.align === "center" ? "justify-center" : ""}`, children: [
+          /* @__PURE__ */ jsx13("span", { children: column.header }),
+          getSortIcon(column)
+        ] })
+      },
+      column.key
+    )) }) }),
+    /* @__PURE__ */ jsx13("tbody", { children: loading ? /* @__PURE__ */ jsx13("tr", { children: /* @__PURE__ */ jsx13("td", { colSpan: columns.length, className: "px-4 py-8 text-center text-gray-500", children: /* @__PURE__ */ jsxs9("div", { className: "flex items-center justify-center gap-2", children: [
+      /* @__PURE__ */ jsx13("div", { className: "w-5 h-5 border-2 border-primary-200 border-t-primary-600 rounded-full animate-spin" }),
+      /* @__PURE__ */ jsx13("span", { children: "Loading..." })
+    ] }) }) }) : sortedData.length === 0 ? /* @__PURE__ */ jsx13("tr", { children: /* @__PURE__ */ jsx13("td", { colSpan: columns.length, className: "px-4 py-8 text-center text-gray-500", children: emptyMessage }) }) : sortedData.map((item) => /* @__PURE__ */ jsx13(
+      "tr",
+      {
+        className: `
+                  border-b border-gray-100 hover:bg-gray-50 transition-colors
+                  ${onRowClick ? "cursor-pointer" : ""}
+                `,
+        onClick: () => onRowClick?.(item),
+        children: columns.map((column) => /* @__PURE__ */ jsx13(
+          "td",
+          {
+            className: `px-4 py-3 text-sm text-gray-800 ${alignmentClasses[column.align ?? "left"]}`,
+            style: { width: column.width },
+            children: column.render(item)
+          },
+          column.key
+        ))
+      },
+      getRowKey(item)
+    )) })
+  ] }) });
+}
+
+// src/components/Select.tsx
+import { useState as useState2, useRef, useEffect as useEffect2, useMemo as useMemo2 } from "react";
+import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
+function Select({
+  options,
+  value,
+  onChange,
+  placeholder = "Select...",
+  label,
+  error,
+  searchable = true,
+  multiple = false,
+  disabled = false,
+  className = ""
+}) {
+  const [isOpen, setIsOpen] = useState2(false);
+  const [searchTerm, setSearchTerm] = useState2("");
+  const [highlightedIndex, setHighlightedIndex] = useState2(0);
+  const containerRef = useRef(null);
+  const inputRef = useRef(null);
+  const filteredOptions = useMemo2(() => {
+    if (!searchTerm) return options;
+    const term = searchTerm.toLowerCase();
+    return options.filter((opt) => opt.label.toLowerCase().includes(term));
+  }, [options, searchTerm]);
+  const selectedOptions = useMemo2(() => {
+    if (value === null) return [];
+    const values = Array.isArray(value) ? value : [value];
+    return options.filter((opt) => values.includes(opt.value));
+  }, [options, value]);
+  const displayText = useMemo2(() => {
+    if (selectedOptions.length === 0) return "";
+    if (multiple) {
+      return selectedOptions.map((opt) => opt.label).join(", ");
+    }
+    return selectedOptions[0]?.label ?? "";
+  }, [selectedOptions, multiple]);
+  useEffect2(() => {
+    const handleClickOutside = (e) => {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        setIsOpen(false);
+        setSearchTerm("");
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  useEffect2(() => {
+    setHighlightedIndex(0);
+  }, [filteredOptions]);
+  const handleSelect = (option) => {
+    if (option.disabled) return;
+    if (multiple) {
+      const currentValues = Array.isArray(value) ? value : value ? [value] : [];
+      const isSelected2 = currentValues.includes(option.value);
+      if (isSelected2) {
+        const newValues = currentValues.filter((v) => v !== option.value);
+        onChange(newValues.length > 0 ? newValues : null);
+      } else {
+        onChange([...currentValues, option.value]);
+      }
+    } else {
+      onChange(option.value);
+      setIsOpen(false);
+      setSearchTerm("");
+    }
+  };
+  const handleKeyDown = (e) => {
+    if (disabled) return;
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        if (!isOpen) {
+          setIsOpen(true);
+        } else {
+          setHighlightedIndex((prev) => Math.min(prev + 1, filteredOptions.length - 1));
+        }
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        setHighlightedIndex((prev) => Math.max(prev - 1, 0));
+        break;
+      case "Enter":
+        e.preventDefault();
+        if (isOpen && filteredOptions[highlightedIndex]) {
+          handleSelect(filteredOptions[highlightedIndex]);
+        } else {
+          setIsOpen(true);
+        }
+        break;
+      case "Escape":
+        setIsOpen(false);
+        setSearchTerm("");
+        break;
+    }
+  };
+  const isSelected = (option) => {
+    if (value === null) return false;
+    const values = Array.isArray(value) ? value : [value];
+    return values.includes(option.value);
+  };
+  return /* @__PURE__ */ jsxs10("div", { ref: containerRef, className: `relative ${className}`, children: [
+    label && /* @__PURE__ */ jsx14("label", { className: "block text-sm font-medium text-gray-700 mb-2", children: label }),
+    /* @__PURE__ */ jsx14(
+      "div",
+      {
+        className: `
+          relative w-full px-4 py-3 rounded-xl border bg-white
+          ${disabled ? "bg-gray-100 cursor-not-allowed" : "cursor-pointer"}
+          ${error ? "border-red-300" : isOpen ? "border-primary-500 ring-2 ring-primary-100" : "border-gray-200"}
+          transition-all
+        `,
+        onClick: () => {
+          if (!disabled) {
+            setIsOpen(!isOpen);
+            if (!isOpen && searchable) {
+              setTimeout(() => inputRef.current?.focus(), 0);
+            }
+          }
+        },
+        onKeyDown: handleKeyDown,
+        tabIndex: disabled ? -1 : 0,
+        children: /* @__PURE__ */ jsxs10("div", { className: "flex items-center justify-between", children: [
+          searchable && isOpen ? /* @__PURE__ */ jsx14(
+            "input",
+            {
+              ref: inputRef,
+              type: "text",
+              className: "w-full outline-none bg-transparent",
+              placeholder: displayText || placeholder,
+              value: searchTerm,
+              onChange: (e) => setSearchTerm(e.target.value),
+              onClick: (e) => e.stopPropagation()
+            }
+          ) : /* @__PURE__ */ jsx14("span", { className: displayText ? "text-gray-800" : "text-gray-400", children: displayText || placeholder }),
+          /* @__PURE__ */ jsx14(
+            "svg",
+            {
+              className: `w-5 h-5 text-gray-400 transition-transform ${isOpen ? "rotate-180" : ""}`,
+              fill: "none",
+              stroke: "currentColor",
+              viewBox: "0 0 24 24",
+              children: /* @__PURE__ */ jsx14("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" })
+            }
+          )
+        ] })
+      }
+    ),
+    error && /* @__PURE__ */ jsx14("p", { className: "mt-1 text-xs text-red-600", children: error }),
+    isOpen && /* @__PURE__ */ jsx14("div", { className: "absolute z-50 w-full mt-1 bg-white border border-gray-200 rounded-xl shadow-lg max-h-60 overflow-auto", children: filteredOptions.length === 0 ? /* @__PURE__ */ jsx14("div", { className: "px-4 py-3 text-sm text-gray-500", children: "No options found" }) : filteredOptions.map((option, index) => /* @__PURE__ */ jsxs10(
+      "div",
+      {
+        className: `
+                  px-4 py-3 text-sm cursor-pointer flex items-center gap-2
+                  ${option.disabled ? "text-gray-400 cursor-not-allowed" : "text-gray-800"}
+                  ${highlightedIndex === index ? "bg-primary-50" : "hover:bg-gray-50"}
+                  ${isSelected(option) ? "bg-primary-50 font-medium" : ""}
+                `,
+        onClick: (e) => {
+          e.stopPropagation();
+          handleSelect(option);
+        },
+        onMouseEnter: () => setHighlightedIndex(index),
+        children: [
+          multiple && /* @__PURE__ */ jsx14(
+            "div",
+            {
+              className: `
+                      w-4 h-4 border rounded flex items-center justify-center
+                      ${isSelected(option) ? "bg-primary-600 border-primary-600" : "border-gray-300"}
+                    `,
+              children: isSelected(option) && /* @__PURE__ */ jsx14("svg", { className: "w-3 h-3 text-white", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx14("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 3, d: "M5 13l4 4L19 7" }) })
+            }
+          ),
+          option.icon,
+          /* @__PURE__ */ jsx14("span", { children: option.label })
+        ]
+      },
+      String(option.value)
+    )) })
+  ] });
+}
+
+// src/components/Tabs.tsx
+import { useState as useState3 } from "react";
+import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
+function Tabs({
+  tabs,
+  activeTab: controlledActiveTab,
+  onTabChange,
+  defaultTab,
+  variant = "default",
+  renderContent = true,
+  className = ""
+}) {
+  const isControlled = controlledActiveTab !== void 0;
+  const [internalActiveTab, setInternalActiveTab] = useState3(
+    defaultTab || tabs.find((t) => !t.disabled)?.id || tabs[0]?.id
+  );
+  const activeTab = isControlled ? controlledActiveTab : internalActiveTab;
+  const handleTabClick = (tab) => {
+    if (tab.disabled) return;
+    if (!isControlled) {
+      setInternalActiveTab(tab.id);
+    }
+    onTabChange?.(tab.id);
+  };
+  const handleKeyDown = (e, index) => {
+    const enabledTabs = tabs.filter((t) => !t.disabled);
+    const currentEnabledIndex = enabledTabs.findIndex((t) => t.id === tabs[index].id);
+    let newTab;
+    switch (e.key) {
+      case "ArrowLeft":
+        e.preventDefault();
+        newTab = enabledTabs[currentEnabledIndex - 1] || enabledTabs[enabledTabs.length - 1];
+        break;
+      case "ArrowRight":
+        e.preventDefault();
+        newTab = enabledTabs[currentEnabledIndex + 1] || enabledTabs[0];
+        break;
+      case "Home":
+        e.preventDefault();
+        newTab = enabledTabs[0];
+        break;
+      case "End":
+        e.preventDefault();
+        newTab = enabledTabs[enabledTabs.length - 1];
+        break;
+    }
+    if (newTab) {
+      handleTabClick(newTab);
+      const button = document.querySelector(`[data-tab-id="${newTab.id}"]`);
+      button?.focus();
+    }
+  };
+  const activeContent = tabs.find((t) => t.id === activeTab)?.content;
+  const variantStyles = {
+    default: {
+      container: "border-b border-gray-200",
+      tab: (isActive, isDisabled) => `
+        px-4 py-3 text-sm font-medium border-b-2 -mb-px transition-colors
+        ${isDisabled ? "text-gray-300 cursor-not-allowed" : "cursor-pointer"}
+        ${isActive ? "border-primary-500 text-primary-600" : isDisabled ? "border-transparent" : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"}
+      `
+    },
+    pills: {
+      container: "bg-gray-100 rounded-lg p-1 inline-flex",
+      tab: (isActive, isDisabled) => `
+        px-4 py-2 text-sm font-medium rounded-md transition-colors
+        ${isDisabled ? "text-gray-400 cursor-not-allowed" : "cursor-pointer"}
+        ${isActive ? "bg-white text-gray-900 shadow-sm" : isDisabled ? "" : "text-gray-500 hover:text-gray-700"}
+      `
+    },
+    underline: {
+      container: "",
+      tab: (isActive, isDisabled) => `
+        px-4 py-2 text-sm font-medium transition-colors relative
+        ${isDisabled ? "text-gray-300 cursor-not-allowed" : "cursor-pointer"}
+        ${isActive ? "text-primary-600" : isDisabled ? "" : "text-gray-500 hover:text-gray-700"}
+        ${isActive ? "after:absolute after:bottom-0 after:left-0 after:right-0 after:h-0.5 after:bg-primary-500" : ""}
+      `
+    }
+  };
+  const styles = variantStyles[variant];
+  return /* @__PURE__ */ jsxs11("div", { className, children: [
+    /* @__PURE__ */ jsx15("div", { className: `flex ${styles.container}`, role: "tablist", children: tabs.map((tab, index) => {
+      const isActive = tab.id === activeTab;
+      const isDisabled = tab.disabled ?? false;
+      return /* @__PURE__ */ jsx15(
+        "button",
+        {
+          type: "button",
+          role: "tab",
+          "data-tab-id": tab.id,
+          "aria-selected": isActive,
+          "aria-disabled": isDisabled,
+          tabIndex: isActive ? 0 : -1,
+          className: styles.tab(isActive, isDisabled),
+          onClick: () => handleTabClick(tab),
+          onKeyDown: (e) => handleKeyDown(e, index),
+          children: /* @__PURE__ */ jsxs11("span", { className: "flex items-center gap-2", children: [
+            tab.icon,
+            tab.label
+          ] })
+        },
+        tab.id
+      );
+    }) }),
+    renderContent && activeContent && /* @__PURE__ */ jsx15("div", { className: "pt-4", role: "tabpanel", children: activeContent })
+  ] });
+}
+
+// src/components/DatePicker.tsx
+import { useState as useState4, useRef as useRef2, useEffect as useEffect3, useMemo as useMemo3 } from "react";
+import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
+var WEEKDAYS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
+var MONTHS = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December"
+];
+var PRESET_RANGES = [
+  {
+    label: "Today",
+    getValue: () => {
+      const today = /* @__PURE__ */ new Date();
+      today.setHours(0, 0, 0, 0);
+      return { start: today, end: today };
+    }
+  },
+  {
+    label: "Yesterday",
+    getValue: () => {
+      const yesterday = /* @__PURE__ */ new Date();
+      yesterday.setDate(yesterday.getDate() - 1);
+      yesterday.setHours(0, 0, 0, 0);
+      return { start: yesterday, end: yesterday };
+    }
+  },
+  {
+    label: "Last 7 days",
+    getValue: () => {
+      const end = /* @__PURE__ */ new Date();
+      end.setHours(0, 0, 0, 0);
+      const start = /* @__PURE__ */ new Date();
+      start.setDate(start.getDate() - 6);
+      start.setHours(0, 0, 0, 0);
+      return { start, end };
+    }
+  },
+  {
+    label: "Last 30 days",
+    getValue: () => {
+      const end = /* @__PURE__ */ new Date();
+      end.setHours(0, 0, 0, 0);
+      const start = /* @__PURE__ */ new Date();
+      start.setDate(start.getDate() - 29);
+      start.setHours(0, 0, 0, 0);
+      return { start, end };
+    }
+  },
+  {
+    label: "This month",
+    getValue: () => {
+      const start = /* @__PURE__ */ new Date();
+      start.setDate(1);
+      start.setHours(0, 0, 0, 0);
+      const end = /* @__PURE__ */ new Date();
+      end.setHours(0, 0, 0, 0);
+      return { start, end };
+    }
+  },
+  {
+    label: "Last month",
+    getValue: () => {
+      const start = /* @__PURE__ */ new Date();
+      start.setMonth(start.getMonth() - 1);
+      start.setDate(1);
+      start.setHours(0, 0, 0, 0);
+      const end = new Date(start.getFullYear(), start.getMonth() + 1, 0);
+      end.setHours(0, 0, 0, 0);
+      return { start, end };
+    }
+  }
+];
+function formatDate(date) {
+  return date.toLocaleDateString("sv-SE");
+}
+function isSameDay(a, b) {
+  return a.getDate() === b.getDate() && a.getMonth() === b.getMonth() && a.getFullYear() === b.getFullYear();
+}
+function isInRange(date, range) {
+  if (!range.start || !range.end) return false;
+  const d = date.getTime();
+  return d >= range.start.getTime() && d <= range.end.getTime();
+}
+function DatePicker({
+  value,
+  onChange,
+  range = false,
+  label,
+  placeholder = "Select date",
+  error,
+  minDate,
+  maxDate,
+  disabled = false,
+  className = ""
+}) {
+  const [isOpen, setIsOpen] = useState4(false);
+  const [viewDate, setViewDate] = useState4(/* @__PURE__ */ new Date());
+  const [hoverDate, setHoverDate] = useState4(null);
+  const containerRef = useRef2(null);
+  const [selectingEnd, setSelectingEnd] = useState4(false);
+  useEffect3(() => {
+    const handleClickOutside = (e) => {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        setIsOpen(false);
+        setSelectingEnd(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  const displayText = useMemo3(() => {
+    if (!value) return "";
+    if (range) {
+      const rangeValue = value;
+      if (rangeValue.start && rangeValue.end) {
+        if (isSameDay(rangeValue.start, rangeValue.end)) {
+          return formatDate(rangeValue.start);
+        }
+        return `${formatDate(rangeValue.start)} - ${formatDate(rangeValue.end)}`;
+      }
+      if (rangeValue.start) {
+        return `${formatDate(rangeValue.start)} - ...`;
+      }
+      return "";
+    }
+    return formatDate(value);
+  }, [value, range]);
+  const calendarDays = useMemo3(() => {
+    const year = viewDate.getFullYear();
+    const month = viewDate.getMonth();
+    const firstDay = new Date(year, month, 1);
+    const lastDay = new Date(year, month + 1, 0);
+    let startDayOfWeek = firstDay.getDay() - 1;
+    if (startDayOfWeek < 0) startDayOfWeek = 6;
+    const days = [];
+    for (let i = 0; i < startDayOfWeek; i++) {
+      days.push(null);
+    }
+    for (let i = 1; i <= lastDay.getDate(); i++) {
+      days.push(new Date(year, month, i));
+    }
+    return days;
+  }, [viewDate]);
+  const handleDateClick = (date) => {
+    if (isDateDisabled(date)) return;
+    if (range) {
+      const rangeValue = value || { start: null, end: null };
+      if (!selectingEnd || !rangeValue.start) {
+        onChange({ start: date, end: null });
+        setSelectingEnd(true);
+      } else {
+        if (date < rangeValue.start) {
+          onChange({ start: date, end: rangeValue.start });
+        } else {
+          onChange({ start: rangeValue.start, end: date });
+        }
+        setSelectingEnd(false);
+        setIsOpen(false);
+      }
+    } else {
+      onChange(date);
+      setIsOpen(false);
+    }
+  };
+  const handlePresetClick = (preset) => {
+    const rangeVal = preset.getValue();
+    onChange(rangeVal);
+    setIsOpen(false);
+    setSelectingEnd(false);
+  };
+  const isDateDisabled = (date) => {
+    if (minDate && date < minDate) return true;
+    if (maxDate && date > maxDate) return true;
+    return false;
+  };
+  const isDateSelected = (date) => {
+    if (!value) return false;
+    if (range) {
+      const rangeValue = value;
+      if (rangeValue.start && isSameDay(date, rangeValue.start)) return true;
+      if (rangeValue.end && isSameDay(date, rangeValue.end)) return true;
+      return false;
+    }
+    return isSameDay(date, value);
+  };
+  const isDateInRange = (date) => {
+    if (!range || !value) return false;
+    const rangeValue = value;
+    if (selectingEnd && rangeValue.start && hoverDate) {
+      const previewRange = {
+        start: rangeValue.start,
+        end: hoverDate > rangeValue.start ? hoverDate : rangeValue.start
+      };
+      if (hoverDate < rangeValue.start) {
+        previewRange.start = hoverDate;
+        previewRange.end = rangeValue.start;
+      }
+      return isInRange(date, previewRange);
+    }
+    if (!rangeValue.start || !rangeValue.end) return false;
+    return isInRange(date, rangeValue);
+  };
+  const goToPrevMonth = () => {
+    setViewDate(new Date(viewDate.getFullYear(), viewDate.getMonth() - 1, 1));
+  };
+  const goToNextMonth = () => {
+    setViewDate(new Date(viewDate.getFullYear(), viewDate.getMonth() + 1, 1));
+  };
+  const today = /* @__PURE__ */ new Date();
+  today.setHours(0, 0, 0, 0);
+  return /* @__PURE__ */ jsxs12("div", { ref: containerRef, className: `relative ${className}`, children: [
+    label && /* @__PURE__ */ jsx16("label", { className: "block text-sm font-medium text-gray-700 mb-2", children: label }),
+    /* @__PURE__ */ jsx16(
+      "div",
+      {
+        className: `
+          relative w-full px-4 py-3 rounded-xl border bg-white
+          ${disabled ? "bg-gray-100 cursor-not-allowed" : "cursor-pointer"}
+          ${error ? "border-red-300" : isOpen ? "border-primary-500 ring-2 ring-primary-100" : "border-gray-200"}
+          transition-all
+        `,
+        onClick: () => !disabled && setIsOpen(!isOpen),
+        children: /* @__PURE__ */ jsxs12("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx16("span", { className: displayText ? "text-gray-800" : "text-gray-400", children: displayText || placeholder }),
+          /* @__PURE__ */ jsx16("svg", { className: "w-5 h-5 text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx16("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" }) })
+        ] })
+      }
+    ),
+    error && /* @__PURE__ */ jsx16("p", { className: "mt-1 text-xs text-red-600", children: error }),
+    isOpen && /* @__PURE__ */ jsx16("div", { className: "absolute z-50 mt-1 bg-white border border-gray-200 rounded-xl shadow-lg p-4", children: /* @__PURE__ */ jsxs12("div", { className: range ? "flex gap-4" : "", children: [
+      range && /* @__PURE__ */ jsx16("div", { className: "border-r border-gray-100 pr-4 space-y-1", children: PRESET_RANGES.map((preset) => /* @__PURE__ */ jsx16(
+        "button",
+        {
+          type: "button",
+          className: "block w-full text-left px-3 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded-lg",
+          onClick: () => handlePresetClick(preset),
+          children: preset.label
+        },
+        preset.label
+      )) }),
+      /* @__PURE__ */ jsxs12("div", { children: [
+        /* @__PURE__ */ jsxs12("div", { className: "flex items-center justify-between mb-4", children: [
+          /* @__PURE__ */ jsx16(
+            "button",
+            {
+              type: "button",
+              className: "p-1 hover:bg-gray-100 rounded",
+              onClick: goToPrevMonth,
+              children: /* @__PURE__ */ jsx16("svg", { className: "w-5 h-5 text-gray-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx16("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) })
+            }
+          ),
+          /* @__PURE__ */ jsxs12("span", { className: "text-sm font-semibold text-gray-800", children: [
+            MONTHS[viewDate.getMonth()],
+            " ",
+            viewDate.getFullYear()
+          ] }),
+          /* @__PURE__ */ jsx16(
+            "button",
+            {
+              type: "button",
+              className: "p-1 hover:bg-gray-100 rounded",
+              onClick: goToNextMonth,
+              children: /* @__PURE__ */ jsx16("svg", { className: "w-5 h-5 text-gray-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx16("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx16("div", { className: "grid grid-cols-7 gap-1 mb-2", children: WEEKDAYS.map((day) => /* @__PURE__ */ jsx16("div", { className: "text-center text-xs font-medium text-gray-500 py-1", children: day }, day)) }),
+        /* @__PURE__ */ jsx16("div", { className: "grid grid-cols-7 gap-1", children: calendarDays.map((date, index) => {
+          if (!date) {
+            return /* @__PURE__ */ jsx16("div", { className: "w-9 h-9" }, `empty-${index}`);
+          }
+          const isDisabled = isDateDisabled(date);
+          const isSelected = isDateSelected(date);
+          const inRange = isDateInRange(date);
+          const isToday = isSameDay(date, today);
+          return /* @__PURE__ */ jsx16(
+            "button",
+            {
+              type: "button",
+              className: `
+                        w-9 h-9 text-sm rounded-lg transition-colors
+                        ${isDisabled ? "text-gray-300 cursor-not-allowed" : "hover:bg-gray-100"}
+                        ${isSelected ? "bg-primary-600 text-white hover:bg-primary-700" : ""}
+                        ${inRange && !isSelected ? "bg-primary-100" : ""}
+                        ${isToday && !isSelected ? "ring-1 ring-primary-400" : ""}
+                      `,
+              onClick: () => handleDateClick(date),
+              onMouseEnter: () => setHoverDate(date),
+              onMouseLeave: () => setHoverDate(null),
+              disabled: isDisabled,
+              children: date.getDate()
+            },
+            date.toISOString()
+          );
+        }) })
+      ] })
+    ] }) })
+  ] });
+}
+
+// src/components/Timer.tsx
+import { useState as useState5, useEffect as useEffect4, useCallback, useRef as useRef3 } from "react";
+import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
+function formatTime(totalSeconds) {
+  const hours = Math.floor(totalSeconds / 3600);
+  const minutes = Math.floor(totalSeconds % 3600 / 60);
+  const seconds = totalSeconds % 60;
+  const pad = (n) => n.toString().padStart(2, "0");
+  if (hours > 0) {
+    return `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;
+  }
+  return `${pad(minutes)}:${pad(seconds)}`;
+}
+function Timer({
+  initialSeconds = 0,
+  onStart,
+  onStop,
+  onReset,
+  onTick,
+  showReset = true,
+  size = "md",
+  className = "",
+  isRunning: controlledIsRunning,
+  elapsedSeconds: controlledElapsedSeconds
+}) {
+  const isControlled = controlledIsRunning !== void 0;
+  const [internalIsRunning, setInternalIsRunning] = useState5(false);
+  const [internalElapsedSeconds, setInternalElapsedSeconds] = useState5(initialSeconds);
+  const isRunning = isControlled ? controlledIsRunning : internalIsRunning;
+  const elapsedSeconds = isControlled ? controlledElapsedSeconds ?? 0 : internalElapsedSeconds;
+  const intervalRef = useRef3(null);
+  const startTimeRef = useRef3(null);
+  useEffect4(() => {
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+      }
+    };
+  }, []);
+  useEffect4(() => {
+    if (isControlled) return;
+    if (isRunning) {
+      intervalRef.current = setInterval(() => {
+        setInternalElapsedSeconds((prev) => {
+          const newValue = prev + 1;
+          onTick?.(newValue);
+          return newValue;
+        });
+      }, 1e3);
+    } else {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+    }
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+    };
+  }, [isRunning, isControlled, onTick]);
+  const handleStart = useCallback(() => {
+    const now = /* @__PURE__ */ new Date();
+    startTimeRef.current = now;
+    if (!isControlled) {
+      setInternalIsRunning(true);
+    }
+    onStart?.(now);
+  }, [isControlled, onStart]);
+  const handleStop = useCallback(() => {
+    if (!isControlled) {
+      setInternalIsRunning(false);
+    }
+    onStop?.(elapsedSeconds);
+  }, [isControlled, elapsedSeconds, onStop]);
+  const handleReset = useCallback(() => {
+    if (!isControlled) {
+      setInternalIsRunning(false);
+      setInternalElapsedSeconds(0);
+    }
+    startTimeRef.current = null;
+    onReset?.();
+  }, [isControlled, onReset]);
+  const handleToggle = useCallback(() => {
+    if (isRunning) {
+      handleStop();
+    } else {
+      handleStart();
+    }
+  }, [isRunning, handleStart, handleStop]);
+  const sizeClasses3 = {
+    sm: {
+      container: "gap-2",
+      time: "text-2xl",
+      button: "w-10 h-10",
+      icon: "w-4 h-4"
+    },
+    md: {
+      container: "gap-3",
+      time: "text-4xl",
+      button: "w-12 h-12",
+      icon: "w-5 h-5"
+    },
+    lg: {
+      container: "gap-4",
+      time: "text-5xl",
+      button: "w-14 h-14",
+      icon: "w-6 h-6"
+    }
+  };
+  const styles = sizeClasses3[size];
+  return /* @__PURE__ */ jsxs13("div", { className: `flex items-center ${styles.container} ${className}`, children: [
+    /* @__PURE__ */ jsx17("div", { className: `font-mono font-bold text-gray-800 ${styles.time} tabular-nums`, children: formatTime(elapsedSeconds) }),
+    /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx17(
+        "button",
+        {
+          type: "button",
+          onClick: handleToggle,
+          className: `
+            ${styles.button} rounded-full flex items-center justify-center
+            ${isRunning ? "bg-amber-500 hover:bg-amber-600 text-white" : "bg-green-500 hover:bg-green-600 text-white"}
+            transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2
+            ${isRunning ? "focus:ring-amber-500" : "focus:ring-green-500"}
+          `,
+          title: isRunning ? "Pause" : "Start",
+          children: isRunning ? (
+            // Pause icon
+            /* @__PURE__ */ jsx17("svg", { className: styles.icon, fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx17("path", { d: "M6 4h4v16H6V4zm8 0h4v16h-4V4z" }) })
+          ) : (
+            // Play icon
+            /* @__PURE__ */ jsx17("svg", { className: styles.icon, fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx17("path", { d: "M8 5v14l11-7z" }) })
+          )
+        }
+      ),
+      elapsedSeconds > 0 && /* @__PURE__ */ jsx17(
+        "button",
+        {
+          type: "button",
+          onClick: handleStop,
+          className: `
+              ${styles.button} rounded-full flex items-center justify-center
+              bg-red-500 hover:bg-red-600 text-white
+              transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500
+            `,
+          title: "Stop",
+          children: /* @__PURE__ */ jsx17("svg", { className: styles.icon, fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx17("path", { d: "M6 6h12v12H6z" }) })
+        }
+      ),
+      showReset && elapsedSeconds > 0 && !isRunning && /* @__PURE__ */ jsx17(
+        "button",
+        {
+          type: "button",
+          onClick: handleReset,
+          className: `
+              ${styles.button} rounded-full flex items-center justify-center
+              bg-gray-200 hover:bg-gray-300 text-gray-700
+              transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400
+            `,
+          title: "Reset",
+          children: /* @__PURE__ */ jsx17("svg", { className: styles.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx17("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" }) })
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  Button,
+  Card,
+  DatePicker,
+  EmptyState,
+  FormButtonGroup,
+  FormInput,
+  FormTextarea,
+  Input,
+  Layout,
+  LoadingSpinner,
+  Modal,
+  Select,
+  ServiceSwitcher,
+  Sidebar,
+  Table,
+  Tabs,
+  Timer,
+  formatTime
+};
+//# sourceMappingURL=index.mjs.map