@kreativa/ui 0.1.0

package/dist/index.js

@@ -0,0 +1,1222 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Button: () => Button,
+  Card: () => Card,
+  DatePicker: () => DatePicker,
+  EmptyState: () => EmptyState,
+  FormButtonGroup: () => FormButtonGroup,
+  FormInput: () => FormInput,
+  FormTextarea: () => FormTextarea,
+  Input: () => Input,
+  Layout: () => Layout,
+  LoadingSpinner: () => LoadingSpinner,
+  Modal: () => Modal,
+  Select: () => Select,
+  ServiceSwitcher: () => ServiceSwitcher,
+  Sidebar: () => Sidebar,
+  Table: () => Table,
+  Tabs: () => Tabs,
+  Timer: () => Timer,
+  formatTime: () => formatTime
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/Layout.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function Layout({ children, sidebar }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "min-h-screen flex", children: [
+    sidebar && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("aside", { className: "w-64 bg-primary-600 text-white flex flex-col", children: sidebar }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("main", { className: "flex-1 overflow-auto bg-cream-50", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "p-6", children }) })
+  ] });
+}
+
+// src/components/Sidebar.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function Sidebar({ header, navigation, footer }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+    header && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "p-4 border-b border-primary-500", children: header }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("nav", { className: "flex-1 p-4 overflow-y-auto", children: navigation }),
+    footer && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "p-4 border-t border-primary-500", children: footer })
+  ] });
+}
+
+// src/components/ServiceSwitcher.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function ServiceSwitcher({ services, currentServiceId, onServiceChange }) {
+  if (services.length <= 1) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "mt-2", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "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__ */ (0, import_jsx_runtime3.jsx)("option", { value: service.id, children: service.name }, service.id))
+    }
+  ) });
+}
+
+// src/components/Button.tsx
+var import_jsx_runtime4 = require("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__ */ (0, import_jsx_runtime4.jsx)(
+    "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
+var import_react = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var Input = (0, import_react.forwardRef)(
+  ({ label, error, className = "", ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "w-full", children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("label", { className: "block text-sm font-medium text-gray-700 mb-1", children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "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__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mt-1 text-sm text-red-500", children: error })
+    ] });
+  }
+);
+Input.displayName = "Input";
+
+// src/components/Card.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var paddingClasses = {
+  none: "",
+  sm: "p-3",
+  md: "p-4",
+  lg: "p-6"
+};
+function Card({ children, className = "", padding = "md" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "div",
+    {
+      className: `
+        bg-white rounded-lg shadow-sm border border-gray-200
+        ${paddingClasses[padding]}
+        ${className}
+      `,
+      children
+    }
+  );
+}
+
+// src/components/LoadingSpinner.tsx
+var import_jsx_runtime7 = require("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__ */ (0, import_jsx_runtime7.jsx)(
+    "div",
+    {
+      className: `
+        animate-spin rounded-full border-2 border-primary-200 border-t-primary-600
+        ${sizeClasses2[size]}
+      `
+    }
+  );
+  if (fullScreen) {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "min-h-screen flex items-center justify-center", children: spinner });
+  }
+  return spinner;
+}
+
+// src/components/EmptyState.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function EmptyState({ icon, title, description, action }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "text-center py-16", children: [
+    icon && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "w-16 h-16 mx-auto mb-4 rounded-full bg-gray-100 flex items-center justify-center", children: icon }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h3", { className: "text-lg font-medium text-gray-800 mb-1", children: title }),
+    description && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-gray-500 mb-4", children: description }),
+    action
+  ] });
+}
+
+// src/components/Modal.tsx
+var import_react2 = require("react");
+var import_jsx_runtime9 = require("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" }) {
+  (0, import_react2.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__ */ (0, import_jsx_runtime9.jsx)(
+    "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__ */ (0, import_jsx_runtime9.jsxs)(
+        "div",
+        {
+          className: `bg-white rounded-2xl shadow-2xl w-full ${maxWidthClasses[maxWidth]} p-6 max-h-[90vh] overflow-y-auto`,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h2", { className: "text-xl font-bold text-gray-800 mb-6", children: title }),
+            children
+          ]
+        }
+      )
+    }
+  );
+}
+
+// src/components/FormInput.tsx
+var import_react3 = require("react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var FormInput = (0, import_react3.forwardRef)(
+  ({ label, helpText, error, className = "", ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "block text-sm font-medium text-gray-700 mb-2", children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        "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__ */ (0, import_jsx_runtime10.jsx)("p", { className: "mt-1 text-xs text-gray-500", children: helpText }),
+      error && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "mt-1 text-xs text-red-600", children: error })
+    ] });
+  }
+);
+FormInput.displayName = "FormInput";
+
+// src/components/FormTextarea.tsx
+var import_react4 = require("react");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var FormTextarea = (0, import_react4.forwardRef)(
+  ({ label, helpText, error, className = "", ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("label", { className: "block text-sm font-medium text-gray-700 mb-2", children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        "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__ */ (0, import_jsx_runtime11.jsx)("p", { className: "mt-1 text-xs text-gray-500", children: helpText }),
+      error && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "mt-1 text-xs text-red-600", children: error })
+    ] });
+  }
+);
+FormTextarea.displayName = "FormTextarea";
+
+// src/components/FormButtonGroup.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function FormButtonGroup({
+  cancelText = "Cancel",
+  submitText = "Save",
+  loadingText = "Saving...",
+  isLoading = false,
+  isDisabled = false,
+  onCancel,
+  onSubmit,
+  submitContent
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex gap-3 pt-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      "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__ */ (0, import_jsx_runtime12.jsx)(
+      "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
+var import_react5 = require("react");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function Table({
+  data,
+  columns,
+  getRowKey,
+  onRowClick,
+  loading = false,
+  emptyMessage = "No data available",
+  className = ""
+}) {
+  const [sortKey, setSortKey] = (0, import_react5.useState)(null);
+  const [sortDirection, setSortDirection] = (0, import_react5.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 = (0, import_react5.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__ */ (0, import_jsx_runtime13.jsx)("svg", { className: "w-4 h-4 text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("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__ */ (0, import_jsx_runtime13.jsx)("svg", { className: "w-4 h-4 text-primary-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 15l7-7 7 7" }) });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("svg", { className: "w-4 h-4 text-primary-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("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__ */ (0, import_jsx_runtime13.jsx)("div", { className: `overflow-x-auto ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("table", { className: "w-full border-collapse", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("tr", { className: "bg-gray-50 border-b border-gray-200", children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      "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__ */ (0, import_jsx_runtime13.jsxs)("div", { className: `flex items-center gap-1 ${column.align === "right" ? "justify-end" : column.align === "center" ? "justify-center" : ""}`, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: column.header }),
+          getSortIcon(column)
+        ] })
+      },
+      column.key
+    )) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("tbody", { children: loading ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("td", { colSpan: columns.length, className: "px-4 py-8 text-center text-gray-500", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center justify-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "w-5 h-5 border-2 border-primary-200 border-t-primary-600 rounded-full animate-spin" }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: "Loading..." })
+    ] }) }) }) : sortedData.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("td", { colSpan: columns.length, className: "px-4 py-8 text-center text-gray-500", children: emptyMessage }) }) : sortedData.map((item) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      "tr",
+      {
+        className: `
+                  border-b border-gray-100 hover:bg-gray-50 transition-colors
+                  ${onRowClick ? "cursor-pointer" : ""}
+                `,
+        onClick: () => onRowClick?.(item),
+        children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          "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
+var import_react6 = require("react");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+function Select({
+  options,
+  value,
+  onChange,
+  placeholder = "Select...",
+  label,
+  error,
+  searchable = true,
+  multiple = false,
+  disabled = false,
+  className = ""
+}) {
+  const [isOpen, setIsOpen] = (0, import_react6.useState)(false);
+  const [searchTerm, setSearchTerm] = (0, import_react6.useState)("");
+  const [highlightedIndex, setHighlightedIndex] = (0, import_react6.useState)(0);
+  const containerRef = (0, import_react6.useRef)(null);
+  const inputRef = (0, import_react6.useRef)(null);
+  const filteredOptions = (0, import_react6.useMemo)(() => {
+    if (!searchTerm) return options;
+    const term = searchTerm.toLowerCase();
+    return options.filter((opt) => opt.label.toLowerCase().includes(term));
+  }, [options, searchTerm]);
+  const selectedOptions = (0, import_react6.useMemo)(() => {
+    if (value === null) return [];
+    const values = Array.isArray(value) ? value : [value];
+    return options.filter((opt) => values.includes(opt.value));
+  }, [options, value]);
+  const displayText = (0, import_react6.useMemo)(() => {
+    if (selectedOptions.length === 0) return "";
+    if (multiple) {
+      return selectedOptions.map((opt) => opt.label).join(", ");
+    }
+    return selectedOptions[0]?.label ?? "";
+  }, [selectedOptions, multiple]);
+  (0, import_react6.useEffect)(() => {
+    const handleClickOutside = (e) => {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        setIsOpen(false);
+        setSearchTerm("");
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  (0, import_react6.useEffect)(() => {
+    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__ */ (0, import_jsx_runtime14.jsxs)("div", { ref: containerRef, className: `relative ${className}`, children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("label", { className: "block text-sm font-medium text-gray-700 mb-2", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      "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__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center justify-between", children: [
+          searchable && isOpen ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            "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__ */ (0, import_jsx_runtime14.jsx)("span", { className: displayText ? "text-gray-800" : "text-gray-400", children: displayText || placeholder }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            "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__ */ (0, import_jsx_runtime14.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" })
+            }
+          )
+        ] })
+      }
+    ),
+    error && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "mt-1 text-xs text-red-600", children: error }),
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("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__ */ (0, import_jsx_runtime14.jsx)("div", { className: "px-4 py-3 text-sm text-gray-500", children: "No options found" }) : filteredOptions.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+      "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__ */ (0, import_jsx_runtime14.jsx)(
+            "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__ */ (0, import_jsx_runtime14.jsx)("svg", { className: "w-3 h-3 text-white", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 3, d: "M5 13l4 4L19 7" }) })
+            }
+          ),
+          option.icon,
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { children: option.label })
+        ]
+      },
+      String(option.value)
+    )) })
+  ] });
+}
+
+// src/components/Tabs.tsx
+var import_react7 = require("react");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+function Tabs({
+  tabs,
+  activeTab: controlledActiveTab,
+  onTabChange,
+  defaultTab,
+  variant = "default",
+  renderContent = true,
+  className = ""
+}) {
+  const isControlled = controlledActiveTab !== void 0;
+  const [internalActiveTab, setInternalActiveTab] = (0, import_react7.useState)(
+    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__ */ (0, import_jsx_runtime15.jsxs)("div", { className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: `flex ${styles.container}`, role: "tablist", children: tabs.map((tab, index) => {
+      const isActive = tab.id === activeTab;
+      const isDisabled = tab.disabled ?? false;
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        "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__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "flex items-center gap-2", children: [
+            tab.icon,
+            tab.label
+          ] })
+        },
+        tab.id
+      );
+    }) }),
+    renderContent && activeContent && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "pt-4", role: "tabpanel", children: activeContent })
+  ] });
+}
+
+// src/components/DatePicker.tsx
+var import_react8 = require("react");
+var import_jsx_runtime16 = require("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] = (0, import_react8.useState)(false);
+  const [viewDate, setViewDate] = (0, import_react8.useState)(/* @__PURE__ */ new Date());
+  const [hoverDate, setHoverDate] = (0, import_react8.useState)(null);
+  const containerRef = (0, import_react8.useRef)(null);
+  const [selectingEnd, setSelectingEnd] = (0, import_react8.useState)(false);
+  (0, import_react8.useEffect)(() => {
+    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 = (0, import_react8.useMemo)(() => {
+    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 = (0, import_react8.useMemo)(() => {
+    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__ */ (0, import_jsx_runtime16.jsxs)("div", { ref: containerRef, className: `relative ${className}`, children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("label", { className: "block text-sm font-medium text-gray-700 mb-2", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      "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__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: displayText ? "text-gray-800" : "text-gray-400", children: displayText || placeholder }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("svg", { className: "w-5 h-5 text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("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__ */ (0, import_jsx_runtime16.jsx)("p", { className: "mt-1 text-xs text-red-600", children: error }),
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "absolute z-50 mt-1 bg-white border border-gray-200 rounded-xl shadow-lg p-4", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: range ? "flex gap-4" : "", children: [
+      range && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "border-r border-gray-100 pr-4 space-y-1", children: PRESET_RANGES.map((preset) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        "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__ */ (0, import_jsx_runtime16.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex items-center justify-between mb-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            "button",
+            {
+              type: "button",
+              className: "p-1 hover:bg-gray-100 rounded",
+              onClick: goToPrevMonth,
+              children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("svg", { className: "w-5 h-5 text-gray-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { className: "text-sm font-semibold text-gray-800", children: [
+            MONTHS[viewDate.getMonth()],
+            " ",
+            viewDate.getFullYear()
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            "button",
+            {
+              type: "button",
+              className: "p-1 hover:bg-gray-100 rounded",
+              onClick: goToNextMonth,
+              children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("svg", { className: "w-5 h-5 text-gray-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "grid grid-cols-7 gap-1 mb-2", children: WEEKDAYS.map((day) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "text-center text-xs font-medium text-gray-500 py-1", children: day }, day)) }),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "grid grid-cols-7 gap-1", children: calendarDays.map((date, index) => {
+          if (!date) {
+            return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("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__ */ (0, import_jsx_runtime16.jsx)(
+            "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
+var import_react9 = require("react");
+var import_jsx_runtime17 = require("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] = (0, import_react9.useState)(false);
+  const [internalElapsedSeconds, setInternalElapsedSeconds] = (0, import_react9.useState)(initialSeconds);
+  const isRunning = isControlled ? controlledIsRunning : internalIsRunning;
+  const elapsedSeconds = isControlled ? controlledElapsedSeconds ?? 0 : internalElapsedSeconds;
+  const intervalRef = (0, import_react9.useRef)(null);
+  const startTimeRef = (0, import_react9.useRef)(null);
+  (0, import_react9.useEffect)(() => {
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+      }
+    };
+  }, []);
+  (0, import_react9.useEffect)(() => {
+    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 = (0, import_react9.useCallback)(() => {
+    const now = /* @__PURE__ */ new Date();
+    startTimeRef.current = now;
+    if (!isControlled) {
+      setInternalIsRunning(true);
+    }
+    onStart?.(now);
+  }, [isControlled, onStart]);
+  const handleStop = (0, import_react9.useCallback)(() => {
+    if (!isControlled) {
+      setInternalIsRunning(false);
+    }
+    onStop?.(elapsedSeconds);
+  }, [isControlled, elapsedSeconds, onStop]);
+  const handleReset = (0, import_react9.useCallback)(() => {
+    if (!isControlled) {
+      setInternalIsRunning(false);
+      setInternalElapsedSeconds(0);
+    }
+    startTimeRef.current = null;
+    onReset?.();
+  }, [isControlled, onReset]);
+  const handleToggle = (0, import_react9.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__ */ (0, import_jsx_runtime17.jsxs)("div", { className: `flex items-center ${styles.container} ${className}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: `font-mono font-bold text-gray-800 ${styles.time} tabular-nums`, children: formatTime(elapsedSeconds) }),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        "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__ */ (0, import_jsx_runtime17.jsx)("svg", { className: styles.icon, fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M6 4h4v16H6V4zm8 0h4v16h-4V4z" }) })
+          ) : (
+            // Play icon
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("svg", { className: styles.icon, fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M8 5v14l11-7z" }) })
+          )
+        }
+      ),
+      elapsedSeconds > 0 && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        "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__ */ (0, import_jsx_runtime17.jsx)("svg", { className: styles.icon, fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M6 6h12v12H6z" }) })
+        }
+      ),
+      showReset && elapsedSeconds > 0 && !isRunning && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        "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__ */ (0, import_jsx_runtime17.jsx)("svg", { className: styles.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("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" }) })
+        }
+      )
+    ] })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Button,
+  Card,
+  DatePicker,
+  EmptyState,
+  FormButtonGroup,
+  FormInput,
+  FormTextarea,
+  Input,
+  Layout,
+  LoadingSpinner,
+  Modal,
+  Select,
+  ServiceSwitcher,
+  Sidebar,
+  Table,
+  Tabs,
+  Timer,
+  formatTime
+});
+//# sourceMappingURL=index.js.map