@kreativa/ui 0.1.7 → 0.1.9

package/dist/index.js

@@ -236,23 +236,23 @@ function Modal({ isOpen, onClose, title, children, maxWidth = "xl" }) {
   const modalContent = /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     "div",
     {
-      className: "fixed inset-0 bg-black/50 backdrop-blur-sm z-50 overflow-y-auto",
+      className: "fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center p-4",
       onClick: (e) => {
         if (e.target === e.currentTarget) {
           onClose();
         }
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "min-h-full flex items-center justify-center p-8", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
         "div",
         {
-          className: `bg-white rounded-2xl shadow-2xl w-full ${maxWidthClasses[maxWidth]} p-6 my-8`,
+          className: `bg-white rounded-2xl shadow-2xl w-full ${maxWidthClasses[maxWidth]} max-h-[95vh] flex flex-col`,
           onClick: (e) => e.stopPropagation(),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h2", { className: "text-xl font-bold text-gray-800 mb-6", children: title }),
-            children
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex-shrink-0 px-6 pt-6 pb-4 border-b", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h2", { className: "text-xl font-bold text-gray-800", children: title }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex-1 overflow-y-auto px-6 py-4", children })
           ]
         }
-      ) })
+      )
     }
   );
   return (0, import_react_dom.createPortal)(modalContent, document.body);
@@ -618,14 +618,14 @@ function Select({
     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 }),
+    label && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("label", { className: "block text-sm font-medium text-gray-700 mb-1", children: label }),
     /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       "div",
       {
         className: `
-          relative w-full px-4 py-3 rounded-xl border bg-white
+          relative w-full px-3 py-2 rounded-lg 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"}
+          ${error ? "border-red-500" : isOpen ? "border-primary-500 ring-2 ring-primary-500" : "border-gray-300"}
           transition-all
         `,
         onClick: () => {
@@ -665,11 +665,11 @@ function Select({
       }
     ),
     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)(
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "absolute z-50 w-full mt-1 bg-white border border-gray-300 rounded-lg shadow-lg max-h-60 overflow-auto", children: filteredOptions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "px-3 py-2 text-sm text-gray-500", children: "Inga alternativ hittades" }) : 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
+                  px-3 py-2 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" : ""}