uibee 3.0.0 → 3.1.0

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

@@ -1297,22 +1297,22 @@ function Switch(props) {
 		textSize,
 		className,
 		children: /* @__PURE__ */ jsxs("label", {
-			className: `relative inline-flex items-center cursor-pointer ${switchOnly ? "h-fit" : "h-10"}`,
+			className: `group/sw inline-flex items-center cursor-pointer ${switchOnly ? "h-fit" : "h-10"}`,
 			children: [/* @__PURE__ */ jsx("input", {
 				...inputProps,
 				type: "checkbox",
 				id: name,
 				name,
-				className: "sr-only peer"
-			}), /* @__PURE__ */ jsx("div", { className: `
-                    w-11 h-6 bg-login-600 rounded-full peer
-                    peer-checked:after:translate-x-full peer-checked:after:border-white
-                    after:content-[''] after:absolute ${switchOnly ? "after:top-0.5" : "after:top-2.75"} after:left-0.5
-                    after:bg-white after:border-gray-300 after:border after:rounded-full
-                    after:h-5 after:w-5 after:transition-all peer-checked:bg-login
+				className: "sr-only"
+			}), /* @__PURE__ */ jsx("div", {
+				className: `
+                    relative flex items-center w-11 h-6 rounded-full transition-colors
+                    bg-login-600 group-has-[input:checked]/sw:bg-login
                     ${inputProps.disabled ? "opacity-40 cursor-not-allowed" : ""}
                     ${error ? "ring-1 ring-red-500/60" : ""}
-                ` })]
+                `,
+				children: /* @__PURE__ */ jsx("span", { className: "absolute inset-y-0 my-auto left-0.5 h-5 w-5 rounded-full bg-white shadow-sm transition-all group-has-[input:checked]/sw:translate-x-full" })
+			})]
 		})
 	});
 }
@@ -2063,7 +2063,8 @@ function Footer({ logo, sponsor, columns, socialLinks, copyright, version, lang
 					children: /* @__PURE__ */ jsx("div", {
 						className: "mx-auto mt-20 mb-12 flex w-fit flex-wrap justify-center gap-6",
 						children: socialLinks.map((link, i) => /* @__PURE__ */ jsx("a", {
-							className: `block size-8 text-login-100 transition-all duration-200 group ${link.hoverClass ?? "hover:text-login-50"}`,
+							className: `block size-8 text-login-100 transition-all duration-200 group
+                                        ${link.hoverClass ?? "hover:text-login-50"}`,
 							title: link.title,
 							href: link.href,
 							target: "_blank",
@@ -2256,10 +2257,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
 	});
 }
@@ -2285,7 +2286,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",
@@ -3240,4 +3241,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

@@ -32,7 +32,6 @@
     --color-rose-400: oklch(71.2% 0.194 13.428);
     --color-rose-500: oklch(64.5% 0.246 16.439);
     --color-gray-200: oklch(92.8% 0.006 264.531);
-    --color-gray-300: oklch(87.2% 0.01 258.338);
     --color-gray-400: oklch(70.7% 0.022 261.325);
     --color-gray-500: oklch(55.1% 0.027 264.364);
     --color-black: #000;
@@ -423,6 +422,9 @@
   .left-0 {
     left: 0;
   }
+  .left-0\.5 {
+    left: calc(var(--spacing) * 0.5);
+  }
   .left-1\/2 {
     left: calc(1 / 2 * 100%);
   }
@@ -459,6 +461,9 @@
   .mx-auto {
     margin-inline: auto;
   }
+  .my-auto {
+    margin-block: auto;
+  }
   .prose {
     color: var(--tw-prose-body);
     max-width: 65ch;
@@ -2902,6 +2907,17 @@
       }
     }
   }
+  .group-has-\[input\:checked\]\/sw\:translate-x-full {
+    &:is(:where(.group\/sw):has(*:is(input:checked)) *) {
+      --tw-translate-x: 100%;
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  }
+  .group-has-\[input\:checked\]\/sw\:bg-login {
+    &:is(:where(.group\/sw):has(*:is(input:checked)) *) {
+      background-color: var(--color-login);
+    }
+  }
   .group-\[\.dropdown\]\:h-auto {
     &:is(:where(.group):is(.dropdown) *) {
       height: auto;
@@ -2943,11 +2959,6 @@
       line-height: var(--tw-leading, var(--text-lg--line-height));
     }
   }
-  .peer-checked\:bg-login {
-    &:is(:where(.peer):checked ~ *) {
-      background-color: var(--color-login);
-    }
-  }
   .peer-checked\:opacity-100 {
     &:is(:where(.peer):checked ~ *) {
       opacity: 100%;
@@ -2958,98 +2969,6 @@
       color: var(--color-login-200);
     }
   }
-  .after\:absolute {
-    &::after {
-      content: var(--tw-content);
-      position: absolute;
-    }
-  }
-  .after\:top-0\.5 {
-    &::after {
-      content: var(--tw-content);
-      top: calc(var(--spacing) * 0.5);
-    }
-  }
-  .after\:top-2\.75 {
-    &::after {
-      content: var(--tw-content);
-      top: calc(var(--spacing) * 2.75);
-    }
-  }
-  .after\:left-0\.5 {
-    &::after {
-      content: var(--tw-content);
-      left: calc(var(--spacing) * 0.5);
-    }
-  }
-  .after\:h-5 {
-    &::after {
-      content: var(--tw-content);
-      height: calc(var(--spacing) * 5);
-    }
-  }
-  .after\:w-5 {
-    &::after {
-      content: var(--tw-content);
-      width: calc(var(--spacing) * 5);
-    }
-  }
-  .after\:rounded-full {
-    &::after {
-      content: var(--tw-content);
-      border-radius: calc(infinity * 1px);
-    }
-  }
-  .after\:border {
-    &::after {
-      content: var(--tw-content);
-      border-style: var(--tw-border-style);
-      border-width: 1px;
-    }
-  }
-  .after\:border-gray-300 {
-    &::after {
-      content: var(--tw-content);
-      border-color: var(--color-gray-300);
-    }
-  }
-  .after\:bg-white {
-    &::after {
-      content: var(--tw-content);
-      background-color: var(--color-white);
-    }
-  }
-  .after\:transition-all {
-    &::after {
-      content: var(--tw-content);
-      transition-property: all;
-      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
-      transition-duration: var(--tw-duration, var(--default-transition-duration));
-    }
-  }
-  .after\:content-\[\'\'\] {
-    &::after {
-      --tw-content: '';
-      content: var(--tw-content);
-    }
-  }
-  .peer-checked\:after\:translate-x-full {
-    &:is(:where(.peer):checked ~ *) {
-      &::after {
-        content: var(--tw-content);
-        --tw-translate-x: 100%;
-        translate: var(--tw-translate-x) var(--tw-translate-y);
-      }
-    }
-  }
-  .peer-checked\:after\:border-white {
-    &:is(:where(.peer):checked ~ *) {
-      &::after {
-        content: var(--tw-content);
-        border-color: var(--color-white);
-      }
-    }
-  }
   .last\:border-0 {
     &:last-child {
       border-style: var(--tw-border-style);
@@ -3941,11 +3860,6 @@ input::-ms-clear {
   syntax: "*";
   inherits: false;
 }
-@property --tw-content {
-  syntax: "*";
-  initial-value: "";
-  inherits: false;
-}
 @property --tw-blur {
   syntax: "*";
   inherits: false;
@@ -4060,7 +3974,6 @@ input::-ms-clear {
       --tw-backdrop-sepia: initial;
       --tw-duration: initial;
       --tw-ease: initial;
-      --tw-content: "";
       --tw-blur: initial;
       --tw-brightness: initial;
       --tw-contrast: initial;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uibee",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "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/switch.tsx

@@ -25,23 +25,22 @@ export default function Switch(props: SwitchProps) {
             textSize={textSize}
             className={className}
         >
-            <label className={`relative inline-flex items-center cursor-pointer ${switchOnly ? 'h-fit' : 'h-10'}`}>
+            <label className={`group/sw inline-flex items-center cursor-pointer ${switchOnly ? 'h-fit' : 'h-10'}`}>
                 <input
                     {...inputProps}
                     type='checkbox'
                     id={name}
                     name={name}
-                    className='sr-only peer'
+                    className='sr-only'
                 />
                 <div className={`
-                    w-11 h-6 bg-login-600 rounded-full peer
-                    peer-checked:after:translate-x-full peer-checked:after:border-white
-                    after:content-[''] after:absolute ${switchOnly ? 'after:top-0.5' : 'after:top-2.75'} after:left-0.5
-                    after:bg-white after:border-gray-300 after:border after:rounded-full
-                    after:h-5 after:w-5 after:transition-all peer-checked:bg-login
+                    relative flex items-center w-11 h-6 rounded-full transition-colors
+                    bg-login-600 group-has-[input:checked]/sw:bg-login
                     ${inputProps.disabled ? 'opacity-40 cursor-not-allowed' : ''}
                     ${error ? 'ring-1 ring-red-500/60' : ''}
-                `} />
+                `}>
+                    <span className='absolute inset-y-0 my-auto left-0.5 h-5 w-5 rounded-full bg-white shadow-sm transition-all group-has-[input:checked]/sw:translate-x-full' />
+                </div>
             </label>
         </FieldWrapper>
     )