uibee 3.0.0 → 3.0.1

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",

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.0.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/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>
     )