uibee 3.0.1 → 3.1.1

package/dist/src/components/index.d.ts

@@ -408,15 +408,15 @@ declare function LeftBarPanel({
   className
 }: LeftBarPanelProps): import("react").JSX.Element;
 //#endregion
-//#region src/components/container/glassCard.d.ts
-type GlassCardProps = {
+//#region src/components/container/card.d.ts
+type CardProps = {
   children: ReactNode;
   className?: string;
 };
-declare function GlassCard({
+declare function Card({
   children,
   className
-}: GlassCardProps): import("react").JSX.Element;
+}: CardProps): import("react").JSX.Element;
 //#endregion
 //#region src/components/container/iconBubble.d.ts
 declare const tones: {
@@ -703,4 +703,4 @@ declare function Toggle<T>({
   right
 }: ToggleProps<T>): import("react").JSX.Element;
 //#endregion
-export { Accordion, AccordionGroup, Alert, type BilingualString, Button, Checkbox, ConfirmPopup, Footer, type FooterColumn, type FooterProps, type FooterSocialLink, type FooterSocialLink as LoginSocialLinkData, GlassCard, Highlight, IconBubble, Input, type Lang, LanguageToggle, LeftBarPanel, LoginPage, Logo, LogoSmall, MarkdownRender, MenuButton, MultiSelect, NavDropdown, NavItem, Navbar, PageContainer, Pagination, PulseDot, Radio, Range, SearchInput, Select, SeverityPill, StatCard, Switch, TabPanel, Table, Tabs, TagInput, Textarea, ThemeToggle, Toaster, Toggle, VersionTag, loginAddress, loginCopyright, loginEmail, loginSocialLinks, loginSponsor, toast };
+export { Accordion, AccordionGroup, Alert, type BilingualString, Button, Card, Checkbox, ConfirmPopup, Footer, type FooterColumn, type FooterProps, type FooterSocialLink, type FooterSocialLink as LoginSocialLinkData, Highlight, IconBubble, Input, type Lang, LanguageToggle, LeftBarPanel, LoginPage, Logo, LogoSmall, MarkdownRender, MenuButton, MultiSelect, NavDropdown, NavItem, Navbar, PageContainer, Pagination, PulseDot, Radio, Range, SearchInput, Select, SeverityPill, StatCard, Switch, TabPanel, Table, Tabs, TagInput, Textarea, ThemeToggle, Toaster, Toggle, VersionTag, loginAddress, loginCopyright, loginEmail, loginSocialLinks, loginSponsor, toast };

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
@@ -2257,10 +2260,10 @@ function LeftBarPanel({ color, children, className = "" }) {
 	});
 }
 //#endregion
-//#region src/components/container/glassCard.tsx
-function GlassCard({ children, className = "" }) {
+//#region src/components/container/card.tsx
+function Card({ children, className = "" }) {
 	return /* @__PURE__ */ jsx("section", {
-		className: `rounded-xl border border-login-500/30 bg-login-800 ${className}`,
+		className: `rounded-xl border border-login-500/30 bg-login-500/50 ${className}`,
 		children
 	});
 }
@@ -2286,7 +2289,7 @@ function IconBubble({ icon: Icon, tone = "slate", size = "md" }) {
 //#endregion
 //#region src/components/container/statCard.tsx
 function StatCard({ label, value, icon, tone = "slate" }) {
-	return /* @__PURE__ */ jsxs(GlassCard, {
+	return /* @__PURE__ */ jsxs(Card, {
 		className: "p-4",
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "mb-3 flex items-center gap-3",
@@ -3241,4 +3244,4 @@ function Toggle({ value, onChange, left, right }) {
 	});
 }
 //#endregion
-export { Accordion, AccordionGroup, Alert, Button, Checkbox, ConfirmPopup, Footer, GlassCard, Highlight, IconBubble, Input, LanguageToggle, LeftBarPanel, LoginPage, Logo, LogoSmall, MarkdownRender, MenuButton, MultiSelect, NavDropdown, NavItem, Navbar, PageContainer, Pagination, PulseDot, Radio, Range, SearchInput, Select, SeverityPill, StatCard, Switch, TabPanel, Table, Tabs, TagInput, Textarea, ThemeToggle, Toaster, Toggle, VersionTag, loginAddress, loginCopyright, loginEmail, loginSocialLinks, loginSponsor, toast };
+export { Accordion, AccordionGroup, Alert, Button, Card, Checkbox, ConfirmPopup, Footer, Highlight, IconBubble, Input, LanguageToggle, LeftBarPanel, LoginPage, Logo, LogoSmall, MarkdownRender, MenuButton, MultiSelect, NavDropdown, NavItem, Navbar, PageContainer, Pagination, PulseDot, Radio, Range, SearchInput, Select, SeverityPill, StatCard, Switch, TabPanel, Table, Tabs, TagInput, Textarea, ThemeToggle, Toaster, Toggle, VersionTag, loginAddress, loginCopyright, loginEmail, loginSocialLinks, loginSponsor, toast };

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.0.1",
+  "version": "3.1.1",
   "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/container/{glassCard.tsx → card.tsx}

@@ -1,13 +1,13 @@
 import type { ReactNode } from 'react'
 
-type GlassCardProps = {
+type CardProps = {
     children: ReactNode
     className?: string
 }
 
-export default function GlassCard({ children, className = '' }: GlassCardProps) {
+export default function Card({ children, className = '' }: CardProps) {
     return (
-        <section className={`rounded-xl border border-login-500/30 bg-login-800 ${className}`}>
+        <section className={`rounded-xl border border-login-500/30 bg-login-500/50 ${className}`}>
             {children}
         </section>
     )

package/src/components/container/statCard.tsx

@@ -1,5 +1,5 @@
 import type { ElementType } from 'react'
-import GlassCard from './glassCard'
+import Card from './card'
 import IconBubble, { type IconBubbleTone } from './iconBubble'
 
 type StatCardProps = {
@@ -11,7 +11,7 @@ type StatCardProps = {
 
 export default function StatCard({ label, value, icon, tone = 'slate' }: StatCardProps) {
     return (
-        <GlassCard className='p-4'>
+        <Card className='p-4'>
             <div className='mb-3 flex items-center gap-3'>
                 <IconBubble icon={icon} tone={tone} />
                 <span className='text-sm font-medium text-login-200'>{label}</span>
@@ -19,6 +19,6 @@ export default function StatCard({ label, value, icon, tone = 'slate' }: StatCar
             <div className='truncate text-lg font-semibold text-login-50' title={value}>
                 {value}
             </div>
-        </GlassCard>
+        </Card>
     )
 }

package/src/components/index.ts

@@ -34,7 +34,7 @@ export type { LoginSocialLinkData } from './footer/loginContent'
 export { default as PageContainer} from './container/page'
 export { default as Highlight } from './container/highlight'
 export { default as LeftBarPanel } from './container/leftBarPanel'
-export { default as GlassCard } from './container/glassCard'
+export { default as Card } from './container/card'
 export { default as IconBubble } from './container/iconBubble'
 export { default as StatCard } from './container/statCard'
 export { Tabs, TabPanel } from './container/tabs'

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>
+        )
     }
 }