@kreativa/ui 0.1.4 → 0.1.5

package/dist/index.mjs

@@ -157,7 +157,8 @@ function EmptyState({ icon, title, description, action }) {
 }
 
 // src/components/Modal.tsx
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
 import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
 var maxWidthClasses = {
   sm: "max-w-sm",
@@ -167,6 +168,10 @@ var maxWidthClasses = {
   "2xl": "max-w-2xl"
 };
 function Modal({ isOpen, onClose, title, children, maxWidth = "xl" }) {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
   useEffect(() => {
     const handleEscape = (e) => {
       if (e.key === "Escape") {
@@ -182,8 +187,8 @@ function Modal({ isOpen, onClose, title, children, maxWidth = "xl" }) {
       document.body.style.overflow = "";
     };
   }, [isOpen, onClose]);
-  if (!isOpen) return null;
-  return /* @__PURE__ */ jsx9(
+  if (!isOpen || !mounted) return null;
+  const modalContent = /* @__PURE__ */ jsx9(
     "div",
     {
       className: "fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4",
@@ -204,6 +209,7 @@ function Modal({ isOpen, onClose, title, children, maxWidth = "xl" }) {
       )
     }
   );
+  return createPortal(modalContent, document.body);
 }
 
 // src/components/FormInput.tsx
@@ -286,7 +292,7 @@ function FormButtonGroup({
 }
 
 // src/components/Table.tsx
-import { useState, useMemo, useRef, useCallback } from "react";
+import { useState as useState2, useMemo, useRef, useCallback } from "react";
 import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
 function Table({
   data,
@@ -299,9 +305,9 @@ function Table({
   resizable = false,
   fixedLayout = false
 }) {
-  const [sortKey, setSortKey] = useState(null);
-  const [sortDirection, setSortDirection] = useState(null);
-  const [columnWidths, setColumnWidths] = useState({});
+  const [sortKey, setSortKey] = useState2(null);
+  const [sortDirection, setSortDirection] = useState2(null);
+  const [columnWidths, setColumnWidths] = useState2({});
   const tableRef = useRef(null);
   const resizingRef = useRef(null);
   const handleHeaderClick = (column) => {
@@ -462,10 +468,10 @@ function Table({
 }
 
 // src/components/DataTable.tsx
-import { useState as useState3, useMemo as useMemo3, useCallback as useCallback2, useEffect as useEffect3 } from "react";
+import { useState as useState4, useMemo as useMemo3, useCallback as useCallback2, useEffect as useEffect3 } from "react";
 
 // src/components/Select.tsx
-import { useState as useState2, useRef as useRef2, useEffect as useEffect2, useMemo as useMemo2 } from "react";
+import { useState as useState3, useRef as useRef2, useEffect as useEffect2, useMemo as useMemo2 } from "react";
 import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
 function Select({
   options,
@@ -479,9 +485,9 @@ function Select({
   disabled = false,
   className = ""
 }) {
-  const [isOpen, setIsOpen] = useState2(false);
-  const [searchTerm, setSearchTerm] = useState2("");
-  const [highlightedIndex, setHighlightedIndex] = useState2(0);
+  const [isOpen, setIsOpen] = useState3(false);
+  const [searchTerm, setSearchTerm] = useState3("");
+  const [highlightedIndex, setHighlightedIndex] = useState3(0);
   const containerRef = useRef2(null);
   const inputRef = useRef2(null);
   const filteredOptions = useMemo2(() => {
@@ -720,9 +726,9 @@ function DataTable({
   resizable = false,
   fixedLayout = false
 }) {
-  const [filters, setFilters] = useState3({});
-  const [sortKey, setSortKey] = useState3(initialSortKey || null);
-  const [sortDirection, setSortDirection] = useState3(initialSortDirection);
+  const [filters, setFilters] = useState4({});
+  const [sortKey, setSortKey] = useState4(initialSortKey || null);
+  const [sortDirection, setSortDirection] = useState4(initialSortDirection);
   const handleFilterChange = useCallback2((columnKey, value) => {
     setFilters((prev) => {
       const next = { ...prev };
@@ -888,7 +894,7 @@ function createFilterOptions(data, getValue, labelMap) {
 }
 
 // src/components/Tabs.tsx
-import { useState as useState4 } from "react";
+import { useState as useState5 } from "react";
 import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
 function Tabs({
   tabs,
@@ -900,7 +906,7 @@ function Tabs({
   className = ""
 }) {
   const isControlled = controlledActiveTab !== void 0;
-  const [internalActiveTab, setInternalActiveTab] = useState4(
+  const [internalActiveTab, setInternalActiveTab] = useState5(
     defaultTab || tabs.find((t) => !t.disabled)?.id || tabs[0]?.id
   );
   const activeTab = isControlled ? controlledActiveTab : internalActiveTab;
@@ -997,7 +1003,7 @@ function Tabs({
 }
 
 // src/components/DatePicker.tsx
-import { useState as useState5, useRef as useRef3, useEffect as useEffect4, useMemo as useMemo4 } from "react";
+import { useState as useState6, useRef as useRef3, useEffect as useEffect4, useMemo as useMemo4 } from "react";
 import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
 var WEEKDAYS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
 var MONTHS = [
@@ -1101,11 +1107,11 @@ function DatePicker({
   disabled = false,
   className = ""
 }) {
-  const [isOpen, setIsOpen] = useState5(false);
-  const [viewDate, setViewDate] = useState5(/* @__PURE__ */ new Date());
-  const [hoverDate, setHoverDate] = useState5(null);
+  const [isOpen, setIsOpen] = useState6(false);
+  const [viewDate, setViewDate] = useState6(/* @__PURE__ */ new Date());
+  const [hoverDate, setHoverDate] = useState6(null);
   const containerRef = useRef3(null);
-  const [selectingEnd, setSelectingEnd] = useState5(false);
+  const [selectingEnd, setSelectingEnd] = useState6(false);
   useEffect4(() => {
     const handleClickOutside = (e) => {
       if (containerRef.current && !containerRef.current.contains(e.target)) {
@@ -1307,7 +1313,7 @@ function DatePicker({
 }
 
 // src/components/Timer.tsx
-import { useState as useState6, useEffect as useEffect5, useCallback as useCallback3, useRef as useRef4 } from "react";
+import { useState as useState7, useEffect as useEffect5, useCallback as useCallback3, useRef as useRef4 } from "react";
 import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
 function formatTime(totalSeconds) {
   const hours = Math.floor(totalSeconds / 3600);
@@ -1332,8 +1338,8 @@ function Timer({
   elapsedSeconds: controlledElapsedSeconds
 }) {
   const isControlled = controlledIsRunning !== void 0;
-  const [internalIsRunning, setInternalIsRunning] = useState6(false);
-  const [internalElapsedSeconds, setInternalElapsedSeconds] = useState6(initialSeconds);
+  const [internalIsRunning, setInternalIsRunning] = useState7(false);
+  const [internalElapsedSeconds, setInternalElapsedSeconds] = useState7(initialSeconds);
   const isRunning = isControlled ? controlledIsRunning : internalIsRunning;
   const elapsedSeconds = isControlled ? controlledElapsedSeconds ?? 0 : internalElapsedSeconds;
   const intervalRef = useRef4(null);