uibee 3.1.0 → 3.1.2

package/dist/src/components/index.js

@@ -825,14 +825,17 @@ function SearchInput({ placeholder = "Search...", variant = "default" }) {
 			className: "pl-10 pr-4 py-2 border-b outline-none w-64"
 		})]
 	});
-	else return /* @__PURE__ */ jsx(Input, {
-		name: "search",
-		icon: /* @__PURE__ */ jsx(Search, { className: "w-5 h-5" }),
-		value: searchValue,
-		onChange: handleChange,
-		onKeyDown: handleKeyDown,
-		onBlur: () => handleSearch(searchValue),
-		placeholder
+	else return /* @__PURE__ */ jsx("div", {
+		className: "w-fit min-w-48",
+		children: /* @__PURE__ */ jsx(Input, {
+			name: "search",
+			icon: /* @__PURE__ */ jsx(Search, { className: "w-5 h-5" }),
+			value: searchValue,
+			onChange: handleChange,
+			onKeyDown: handleKeyDown,
+			onBlur: () => handleSearch(searchValue),
+			placeholder
+		})
 	});
 }
 //#endregion
@@ -2646,7 +2649,9 @@ const variants = {
 	success: "bg-green-600 text-white hover:brightness-110",
 	info: "bg-blue-600 text-white hover:brightness-110"
 };
-const base = "cursor-pointer px-4 rounded-md h-9 flex items-center justify-center gap-2 select-none text-sm font-medium transition-all duration-150 w-fit";
+const base = "cursor-pointer rounded-md h-9 flex items-center justify-center gap-2 select-none text-sm font-medium transition-all duration-150";
+const withText = "px-4 w-fit";
+const iconOnly = "w-9";
 const disabledCls = "opacity-40 cursor-not-allowed pointer-events-none";
 const iconWrap = (icon) => icon ? /* @__PURE__ */ jsx("span", {
 	className: "[&>svg]:w-4 [&>svg]:h-4 flex items-center",
@@ -2654,7 +2659,8 @@ const iconWrap = (icon) => icon ? /* @__PURE__ */ jsx("span", {
 }) : null;
 function Button({ text, className, icon, path, variant = "primary", type, onClick, disabled }) {
 	const color = variants[variant];
-	const cls = `${base} ${color} ${disabled ? disabledCls : ""} ${className || ""}`;
+	const sizing = icon && !text ? iconOnly : withText;
+	const cls = `${base} ${sizing} ${color} ${disabled ? disabledCls : ""} ${className || ""}`;
 	if (!path) return /* @__PURE__ */ jsxs("button", {
 		type: type || "button",
 		disabled,
@@ -2669,7 +2675,7 @@ function Button({ text, className, icon, path, variant = "primary", type, onClic
 	});
 	return /* @__PURE__ */ jsxs(Link, {
 		href: path,
-		className: `${base} ${color} ${className || ""}`,
+		className: `${base} ${sizing} ${color} ${className || ""}`,
 		children: [iconWrap(icon), text]
 	});
 }

package/dist/style.css

@@ -1809,6 +1809,9 @@
   .min-w-40 {
     min-width: calc(var(--spacing) * 40);
   }
+  .min-w-48 {
+    min-width: calc(var(--spacing) * 48);
+  }
   .min-w-70 {
     min-width: calc(var(--spacing) * 70);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uibee",
-  "version": "3.1.0",
+  "version": "3.1.2",
   "description": "Shared components, functions and hooks for reuse across Login projects",
   "homepage": "https://github.com/Login-Linjeforening-for-IT/uibee#readme",
   "bugs": {

package/src/components/buttons/button.tsx

@@ -21,7 +21,9 @@ const variants = {
     info:      'bg-blue-600 text-white hover:brightness-110',
 }
 
-const base = 'cursor-pointer px-4 rounded-md h-9 flex items-center justify-center gap-2 select-none text-sm font-medium transition-all duration-150 w-fit'
+const base = 'cursor-pointer rounded-md h-9 flex items-center justify-center gap-2 select-none text-sm font-medium transition-all duration-150'
+const withText = 'px-4 w-fit'
+const iconOnly = 'w-9'
 const disabledCls = 'opacity-40 cursor-not-allowed pointer-events-none'
 
 const iconWrap = (icon: ButtonProps['icon']) =>
@@ -38,7 +40,8 @@ export default function Button({
     disabled,
 }: ButtonProps) {
     const color = variants[variant]
-    const cls = `${base} ${color} ${disabled ? disabledCls : ''} ${className || ''}`
+    const sizing = icon && !text ? iconOnly : withText
+    const cls = `${base} ${sizing} ${color} ${disabled ? disabledCls : ''} ${className || ''}`
 
     if (!path) {
         return (
@@ -65,7 +68,7 @@ export default function Button({
     }
 
     return (
-        <Link href={path} className={`${base} ${color} ${className || ''}`}>
+        <Link href={path} className={`${base} ${sizing} ${color} ${className || ''}`}>
             {iconWrap(icon)}
             {text}
         </Link>

package/src/components/inputs/searchInput.tsx

@@ -59,14 +59,18 @@ export default function SearchInput({ placeholder = 'Search...', variant = 'defa
             </div>
         )
     } else {
-        return <Input
-            name='search'
-            icon={<Search className='w-5 h-5' />}
-            value={searchValue}
-            onChange={handleChange}
-            onKeyDown={handleKeyDown}
-            onBlur={() => handleSearch(searchValue)}
-            placeholder={placeholder}
-        />
+        return (
+            <div className='w-fit min-w-48'>
+                <Input
+                    name='search'
+                    icon={<Search className='w-5 h-5' />}
+                    value={searchValue}
+                    onChange={handleChange}
+                    onKeyDown={handleKeyDown}
+                    onBlur={() => handleSearch(searchValue)}
+                    placeholder={placeholder}
+                />
+            </div>
+        )
     }
 }