uibee 1.6.12 → 1.7.0

package/dist/globals.css

@@ -14,15 +14,23 @@
     --color-yellow-300: oklch(90.5% 0.182 98.111);
     --color-green-300: oklch(87.1% 0.15 154.449);
     --color-blue-300: oklch(80.9% 0.105 251.813);
+    --color-gray-400: oklch(70.7% 0.022 261.325);
+    --color-black: #000;
+    --color-white: #fff;
     --spacing: 0.25rem;
     --container-3xs: 16rem;
     --container-xs: 20rem;
     --container-sm: 24rem;
     --container-md: 28rem;
+    --container-2xl: 42rem;
     --text-sm: 0.875rem;
     --text-sm--line-height: calc(1.25 / 0.875);
+    --text-base: 1rem;
+    --text-base--line-height: calc(1.5 / 1);
     --text-lg: 1.125rem;
     --text-lg--line-height: calc(1.75 / 1.125);
+    --text-xl: 1.25rem;
+    --text-xl--line-height: calc(1.75 / 1.25);
     --text-3xl: 1.875rem;
     --text-3xl--line-height: calc(2.25 / 1.875);
     --font-weight-medium: 500;
@@ -42,6 +50,7 @@
     --color-login-800: #181818;
     --color-login-700: #1a1a1a;
     --color-login-600: #212121;
+    --color-login-300: #5e5e5e;
     --color-login-200: #727272;
     --color-login-100: #b0b0b0;
     --color-login-50: #ededed;
@@ -258,6 +267,12 @@
   .z-50 {
     z-index: 50;
   }
+  .mx-auto {
+    margin-inline: auto;
+  }
+  .-mt-0\.5 {
+    margin-top: calc(var(--spacing) * -0.5);
+  }
   .mt-2 {
     margin-top: calc(var(--spacing) * 2);
   }
@@ -282,6 +297,9 @@
   .flex {
     display: flex;
   }
+  .grid {
+    display: grid;
+  }
   .hidden {
     display: none;
   }
@@ -300,6 +318,9 @@
   .h-10 {
     height: calc(var(--spacing) * 10);
   }
+  .h-12 {
+    height: calc(var(--spacing) * 12);
+  }
   .h-full {
     height: 100%;
   }
@@ -315,6 +336,9 @@
   .w-10 {
     width: calc(var(--spacing) * 10);
   }
+  .w-\[4\.3rem\] {
+    width: 4.3rem;
+  }
   .w-\[calc\(100\%-10px\)\] {
     width: calc(100% - 10px);
   }
@@ -330,6 +354,9 @@
   .w-sm {
     width: var(--container-sm);
   }
+  .max-w-2xl {
+    max-width: var(--container-2xl);
+  }
   .max-w-3xs {
     max-width: var(--container-3xs);
   }
@@ -351,14 +378,25 @@
   .origin-\[0\] {
     transform-origin: 0;
   }
+  .origin-center {
+    transform-origin: center;
+  }
   .translate-x-4 {
     --tw-translate-x: calc(var(--spacing) * 4);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .translate-x-8 {
+    --tw-translate-x: calc(var(--spacing) * 8);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .-translate-y-1\/2 {
     --tw-translate-y: calc(calc(1/2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .-translate-y-4 {
+    --tw-translate-y: calc(var(--spacing) * -4);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .-translate-y-5 {
     --tw-translate-y: calc(var(--spacing) * -5);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -375,9 +413,15 @@
     --tw-scale-z: 100%;
     scale: var(--tw-scale-x) var(--tw-scale-y);
   }
+  .scale-\[1\.9\] {
+    scale: 1.9;
+  }
   .transform {
     transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
   }
+  .animate-jump {
+    animation: jump 0.4s 1;
+  }
   .cursor-pointer {
     cursor: pointer;
   }
@@ -390,9 +434,15 @@
   .flex-col-reverse {
     flex-direction: column-reverse;
   }
+  .flex-row {
+    flex-direction: row;
+  }
   .flex-wrap {
     flex-wrap: wrap;
   }
+  .place-items-center {
+    place-items: center;
+  }
   .items-center {
     align-items: center;
   }
@@ -402,6 +452,9 @@
   .justify-center {
     justify-content: center;
   }
+  .justify-end {
+    justify-content: flex-end;
+  }
   .gap-0\.5 {
     gap: calc(var(--spacing) * 0.5);
   }
@@ -448,6 +501,10 @@
     border-style: var(--tw-border-style);
     border-width: 0.10rem;
   }
+  .border-none {
+    --tw-border-style: none;
+    border-style: none;
+  }
   .border-login-200 {
     border-color: var(--color-login-200);
   }
@@ -475,9 +532,30 @@
   .bg-transparent {
     background-color: transparent;
   }
+  .fill-\[var\(--foreground\)\] {
+    fill: var(--foreground);
+  }
+  .fill-black {
+    fill: var(--color-black);
+  }
+  .fill-login {
+    fill: var(--color-login);
+  }
+  .fill-none {
+    fill: none;
+  }
+  .fill-white {
+    fill: var(--color-white);
+  }
+  .stroke-\[var\(--color-login\)\] {
+    stroke: var(--color-login);
+  }
   .stroke-3 {
     stroke-width: 3;
   }
+  .stroke-\[3\.5px\] {
+    stroke-width: 3.5px;
+  }
   .object-contain {
     object-fit: contain;
   }
@@ -487,6 +565,9 @@
   .p-2 {
     padding: calc(var(--spacing) * 2);
   }
+  .p-3 {
+    padding: calc(var(--spacing) * 3);
+  }
   .p-8 {
     padding: calc(var(--spacing) * 8);
   }
@@ -548,6 +629,10 @@
     font-size: var(--text-3xl);
     line-height: var(--tw-leading, var(--text-3xl--line-height));
   }
+  .text-base {
+    font-size: var(--text-base);
+    line-height: var(--tw-leading, var(--text-base--line-height));
+  }
   .text-lg {
     font-size: var(--text-lg);
     line-height: var(--tw-leading, var(--text-lg--line-height));
@@ -556,6 +641,14 @@
     font-size: var(--text-sm);
     line-height: var(--tw-leading, var(--text-sm--line-height));
   }
+  .text-xl {
+    font-size: var(--text-xl);
+    line-height: var(--tw-leading, var(--text-xl--line-height));
+  }
+  .leading-8 {
+    --tw-leading: calc(var(--spacing) * 8);
+    line-height: calc(var(--spacing) * 8);
+  }
   .font-bold {
     --tw-font-weight: var(--font-weight-bold);
     font-weight: var(--font-weight-bold);
@@ -614,6 +707,12 @@
       color: color-mix(in oklab, var(--color-yellow-300) 70%, transparent);
     }
   }
+  .opacity-0 {
+    opacity: 0%;
+  }
+  .opacity-100 {
+    opacity: 100%;
+  }
   .shadow-md {
     --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -628,6 +727,16 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .transition-opacity {
+    transition-property: opacity;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .transition-transform {
+    transition-property: transform, translate, scale, rotate;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .duration-200 {
     --tw-duration: 200ms;
     transition-duration: 200ms;
@@ -636,6 +745,14 @@
     --tw-duration: 300ms;
     transition-duration: 300ms;
   }
+  .duration-400 {
+    --tw-duration: 400ms;
+    transition-duration: 400ms;
+  }
+  .duration-1000 {
+    --tw-duration: 1000ms;
+    transition-duration: 1000ms;
+  }
   .outline-none {
     --tw-outline-style: none;
     outline-style: none;
@@ -690,6 +807,26 @@
       content: var(--tw-content);
     }
   }
+  .hover\:bg-gray-400\/10 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, oklch(70.7% 0.022 261.325) 10%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-gray-400) 10%, transparent);
+        }
+      }
+    }
+  }
+  .hover\:bg-login-300\/20 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, #5e5e5e 20%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-login-300) 20%, transparent);
+        }
+      }
+    }
+  }
   .hover\:bg-login-600 {
     &:hover {
       @media (hover: hover) {
@@ -783,6 +920,11 @@ body {
   background: var(--background);
   font-family: Arial, Helvetica, sans-serif;
 }
+@keyframes jump {
+  40% {
+    transform: translateY(-0.3rem);
+  }
+}
 @property --tw-translate-x {
   syntax: "*";
   inherits: false;
@@ -838,6 +980,10 @@ body {
   inherits: false;
   initial-value: solid;
 }
+@property --tw-leading {
+  syntax: "*";
+  inherits: false;
+}
 @property --tw-font-weight {
   syntax: "*";
   inherits: false;
@@ -935,6 +1081,7 @@ body {
       --tw-skew-x: initial;
       --tw-skew-y: initial;
       --tw-border-style: solid;
+      --tw-leading: initial;
       --tw-font-weight: initial;
       --tw-tracking: initial;
       --tw-shadow: 0 0 #0000;

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

@@ -1,5 +1,9 @@
-export { default as LoginPage } from './login/loginPage';
-export { default as Toaster, addToast } from './toast/toaster';
 export { default as Input } from './inputs/input';
 export { default as SwitchInput } from './inputs/switch';
 export { default as TagInput } from './inputs/tag';
+export { default as Logo } from './logo/logo';
+export { default as LogoSmall } from './logo/logoSmall';
+export { default as ThemeToggle } from './toggle/theme';
+export { default as LanguageToggle } from './toggle/language';
+export { default as LoginPage } from './login/loginPage';
+export { default as Toaster, addToast } from './toast/toaster';

package/dist/src/components/index.js

@@ -1,6 +1,12 @@
-export { default as LoginPage } from './login/loginPage';
-export { default as Toaster, addToast } from './toast/toaster';
 // Input components
 export { default as Input } from './inputs/input';
 export { default as SwitchInput } from './inputs/switch';
 export { default as TagInput } from './inputs/tag';
+// Logos
+export { default as Logo } from './logo/logo';
+export { default as LogoSmall } from './logo/logoSmall';
+// Toggles
+export { default as ThemeToggle } from './toggle/theme';
+export { default as LanguageToggle } from './toggle/language';
+export { default as LoginPage } from './login/loginPage';
+export { default as Toaster, addToast } from './toast/toaster';

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

@@ -0,0 +1 @@
+export default function Logo(): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/logo/logo.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable @stylistic/max-len */
+export default function Logo() {
+    const corner = 'fill-[var(--foreground)] transition-all duration-1000';
+    const letter = 'fill-none stroke-[var(--color-login)] stroke-[3.5px]';
+    return (_jsxs("svg", { className: 'block w-full max-w-2xl mx-auto', viewBox: '0 0 147.02299 59.20511', children: [_jsx("path", { className: corner, d: 'm 28.77713,58.37738 v 0.76465 H 25.531 v -5.61816 h 0.91309 v 4.85351 z' }), _jsx("path", { className: corner, d: 'm 30.47831,59.142 h -0.917 v -5.61813 h 0.917 z' }), _jsx("path", { className: corner, d: 'M 36.46268,53.52387 V 59.142 H 35.99881 A 0.36347,0.36347 0 0 1 35.6785,58.98185 L 32.59256,55.018 c 0.0078,0.07617 0.01368,0.15039 0.01758,0.22461 0.0039,0.07422 0.0059,0.14258 0.0059,0.20508 V 59.142 h -0.80371 v -5.61813 h 0.47656 a 0.71321,0.71321 0 0 1 0.09864,0.0059 0.3128,0.3128 0 0 1 0.07617,0.02148 0.22919,0.22919 0 0 1 0.0664,0.04688 0.63781,0.63781 0 0 1 0.06641,0.07812 l 3.08984,3.96779 c -0.0078,-0.08105 -0.01367,-0.16015 -0.01757,-0.23828 -0.0039,-0.07813 -0.0059,-0.15039 -0.0059,-0.21875 v -3.6631 z' }), _jsx("path", { className: corner, d: 'm 39.84549,57.1684 a 2.91264,2.91264 0 0 1 -0.11523,0.84765 1.748,1.748 0 0 1 -0.34375,0.64063 1.52483,1.52483 0 0 1 -0.56543,0.40527 2.00691,2.00691 0 0 1 -0.78223,0.14258 3.23707,3.23707 0 0 1 -0.40234,-0.0254 3.44454,3.44454 0 0 1 -0.41309,-0.0801 l 0.04688,-0.5459 a 0.2079,0.2079 0 0 1 0.06055,-0.125 0.19754,0.19754 0 0 1 0.14257,-0.0469 0.74035,0.74035 0 0 1 0.18067,0.0293 1.36468,1.36468 0 0 0 0.71387,-0.041 0.74722,0.74722 0 0 0 0.3125,-0.2207 0.9864,0.9864 0 0 0 0.1914,-0.38574 2.19551,2.19551 0 0 0 0.06445,-0.57227 v -3.667 h 0.90918 z' }), _jsx("path", { className: corner, d: 'm 44.6326,58.40473 -0.0039,0.7373 h -3.50391 v -5.61816 h 3.50391 v 0.7373 h -2.58692 v 1.69336 h 2.06739 v 0.71387 h -2.06739 v 1.73633 z' }), _jsx("path", { className: corner, d: 'M 46.53592,54.26117 V 56.06 h 2.19629 v 0.7373 h -2.19629 v 2.3447 h -0.917 v -5.61813 h 3.50391 v 0.7373 z' }), _jsx("path", { className: corner, d: 'm 55.25956,56.33344 a 3.18179,3.18179 0 0 1 -0.20215,1.15039 2.6634,2.6634 0 0 1 -0.57227,0.90722 2.59685,2.59685 0 0 1 -0.88476,0.59473 3.17156,3.17156 0 0 1 -2.29492,0 2.62415,2.62415 0 0 1 -0.88672,-0.59473 2.65327,2.65327 0 0 1 -0.57422,-0.90722 3.37717,3.37717 0 0 1 0,-2.30176 2.67118,2.67118 0 0 1 0.57422,-0.90918 2.61491,2.61491 0 0 1 0.88672,-0.59668 3.1717,3.1717 0 0 1 2.29492,0 2.58781,2.58781 0 0 1 0.88476,0.59668 2.68144,2.68144 0 0 1 0.57227,0.90918 3.1871,3.1871 0 0 1 0.20215,1.15137 z m -0.93164,0 a 2.706,2.706 0 0 0 -0.13086,-0.87012 1.821,1.821 0 0 0 -0.375,-0.65527 1.63008,1.63008 0 0 0 -0.59082,-0.41407 2.16795,2.16795 0 0 0 -1.55664,0 1.65415,1.65415 0 0 0 -0.59278,0.41407 1.84212,1.84212 0 0 0 -0.3789,0.65527 2.92611,2.92611 0 0 0 0,1.74316 1.83766,1.83766 0 0 0 0.3789,0.6543 1.64222,1.64222 0 0 0 0.59278,0.40918 2.19564,2.19564 0 0 0 1.55664,0 1.61838,1.61838 0 0 0 0.59082,-0.40918 1.81652,1.81652 0 0 0 0.375,-0.6543 2.71589,2.71589 0 0 0 0.13086,-0.87304 z' }), _jsx("path", { className: corner, d: 'm 60.534,59.142 h -0.81543 a 0.377,0.377 0 0 1 -0.35156,-0.1875 l -1.31055,-1.8916 a 0.4267,0.4267 0 0 0 -0.14453,-0.14063 0.50286,0.50286 0 0 0 -0.23437,-0.043 H 57.17072 V 59.142 H 56.2576 v -5.61813 h 1.6543 a 3.54427,3.54427 0 0 1 0.9541,0.11328 1.80649,1.80649 0 0 1 0.65723,0.32226 1.25606,1.25606 0 0 1 0.37988,0.501 1.76427,1.76427 0 0 1 0.03516,1.19727 1.50418,1.50418 0 0 1 -0.25293,0.46093 1.61283,1.61283 0 0 1 -0.40821,0.3584 2.04861,2.04861 0 0 1 -0.5498,0.23828 0.92346,0.92346 0 0 1 0.28906,0.28516 z m -2.64551,-2.92578 a 1.763,1.763 0 0 0 0.5459,-0.07617 1.11007,1.11007 0 0 0 0.39063,-0.21289 0.87892,0.87892 0 0 0 0.23437,-0.3252 1.10093,1.10093 0 0 0 0.07715,-0.41992 0.84276,0.84276 0 0 0 -0.30371,-0.70215 1.46527,1.46527 0 0 0 -0.9209,-0.24219 h -0.74121 v 1.97852 z' }), _jsx("path", { className: corner, d: 'm 64.72049,58.40473 -0.0039,0.7373 h -3.50391 v -5.61816 h 3.50391 v 0.7373 h -2.58692 v 1.69336 h 2.06739 v 0.71387 h -2.06739 v 1.73633 z' }), _jsx("path", { className: corner, d: 'M 70.35721,53.52387 V 59.142 H 69.89335 A 0.36347,0.36347 0 0 1 69.57303,58.98185 L 66.4871,55.018 c 0.0078,0.07617 0.01367,0.15039 0.01757,0.22461 0.0039,0.07422 0.0059,0.14258 0.0059,0.20508 V 59.142 h -0.80371 v -5.61813 h 0.47656 a 0.71321,0.71321 0 0 1 0.09864,0.0059 0.3128,0.3128 0 0 1 0.07617,0.02148 0.22936,0.22936 0 0 1 0.06641,0.04688 0.63869,0.63869 0 0 1 0.0664,0.07812 l 3.08985,3.96777 c -0.008,-0.08105 -0.0137,-0.16015 -0.0176,-0.23828 -0.004,-0.07813 -0.006,-0.15039 -0.006,-0.21875 v -3.66308 z' }), _jsx("path", { className: corner, d: 'm 72.6121,59.142 h -0.917 v -5.61813 h 0.917 z' }), _jsx("path", { className: corner, d: 'M 78.59794,53.52387 V 59.142 H 78.13358 A 0.36344,0.36344 0 0 1 77.81327,58.98185 L 74.72733,55.018 c 0.008,0.07617 0.0137,0.15039 0.0176,0.22461 0.004,0.07422 0.006,0.14258 0.006,0.20508 V 59.142 h -0.80371 v -5.61813 h 0.47656 a 0.713,0.713 0 0 1 0.0986,0.0059 0.31254,0.31254 0 0 1 0.0762,0.02148 0.22936,0.22936 0 0 1 0.0664,0.04688 0.63869,0.63869 0 0 1 0.0664,0.07812 l 3.08984,3.96777 c -0.008,-0.08105 -0.0137,-0.16015 -0.0176,-0.23828 -0.004,-0.07813 -0.006,-0.15039 -0.006,-0.21875 v -3.66308 z' }), _jsx("path", { className: corner, d: 'M 84.53544,56.37641 V 58.6 a 3.24425,3.24425 0 0 1 -1.9502,0.60449 3.419,3.419 0 0 1 -1.23535,-0.21289 2.7275,2.7275 0 0 1 -0.94141,-0.59277 2.59231,2.59231 0 0 1 -0.60156,-0.90723 3.08634,3.08634 0 0 1 -0.21,-1.1582 3.23536,3.23536 0 0 1 0.20215,-1.165 2.5484,2.5484 0 0 1 1.49414,-1.498 3.29189,3.29189 0 0 1 1.20215,-0.209 3.52605,3.52605 0 0 1 0.62988,0.05273 3.11559,3.11559 0 0 1 0.54,0.14649 2.535,2.535 0 0 1 0.84668,0.52246 l -0.26074,0.418 a 0.26545,0.26545 0 0 1 -0.16016,0.12109 0.27377,0.27377 0 0 1 -0.21094,-0.04688 c -0.0752,-0.04492 -0.15527,-0.09082 -0.24023,-0.14062 a 2.01137,2.01137 0 0 0 -0.29,-0.13867 2.127,2.127 0 0 0 -0.37891,-0.10547 2.72656,2.72656 0 0 0 -0.50683,-0.041 2.09434,2.09434 0 0 0 -0.80176,0.14649 1.70173,1.70173 0 0 0 -0.61035,0.418 1.84692,1.84692 0 0 0 -0.39063,0.65722 2.5766,2.5766 0 0 0 -0.13672,0.86231 2.62333,2.62333 0 0 0 0.14453,0.89844 1.88731,1.88731 0 0 0 0.41016,0.67187 1.74772,1.74772 0 0 0 0.6416,0.419 2.55647,2.55647 0 0 0 1.459,0.0703 2.80344,2.80344 0 0 0 0.53222,-0.207 V 57.07074 H 82.928 a 0.19287,0.19287 0 0 1 -0.13964,-0.04883 0.16848,0.16848 0 0 1 -0.0508,-0.12695 v -0.51855 z' }), _jsx("path", { className: corner, d: 'm 89.1243,58.40473 -0.004,0.7373 h -3.50391 v -5.61816 h 3.50391 v 0.7373 h -2.58692 v 1.69336 h 2.06739 v 0.71387 h -2.06739 v 1.73633 z' }), _jsx("path", { className: corner, d: 'M 94.761,53.52387 V 59.142 H 94.29713 A 0.36347,0.36347 0 0 1 93.97682,58.98185 L 90.8909,55.018 c 0.008,0.07617 0.0137,0.15039 0.0176,0.22461 0.004,0.07422 0.006,0.14258 0.006,0.20508 V 59.142 h -0.80371 v -5.61813 h 0.47656 a 0.71321,0.71321 0 0 1 0.0986,0.0059 0.3128,0.3128 0 0 1 0.0762,0.02148 0.22919,0.22919 0 0 1 0.0664,0.04688 0.63781,0.63781 0 0 1 0.0664,0.07812 l 3.08984,3.96777 c -0.008,-0.08105 -0.0137,-0.16015 -0.0176,-0.23828 -0.004,-0.07813 -0.006,-0.15039 -0.006,-0.21875 v -3.66308 z' }), _jsx("path", { className: corner, d: 'M 98.95829,54.26117 V 56.06 h 2.19629 v 0.7373 h -2.19629 v 2.3447 h -0.917 v -5.61813 h 3.5039 v 0.7373 z' }), _jsx("path", { className: corner, d: 'm 107.68192,56.33344 a 3.18158,3.18158 0 0 1 -0.20215,1.15039 2.66353,2.66353 0 0 1 -0.57226,0.90722 2.597,2.597 0 0 1 -0.88477,0.59473 3.17156,3.17156 0 0 1 -2.29492,0 2.62415,2.62415 0 0 1 -0.88672,-0.59473 2.65327,2.65327 0 0 1 -0.57422,-0.90722 3.37717,3.37717 0 0 1 0,-2.30176 2.67118,2.67118 0 0 1 0.57422,-0.90918 2.61491,2.61491 0 0 1 0.88672,-0.59668 3.1717,3.1717 0 0 1 2.29492,0 2.588,2.588 0 0 1 0.88477,0.59668 2.68157,2.68157 0 0 1 0.57226,0.90918 3.18689,3.18689 0 0 1 0.20215,1.15137 z m -0.93164,0 a 2.706,2.706 0 0 0 -0.13086,-0.87012 1.82066,1.82066 0 0 0 -0.375,-0.65527 1.63,1.63 0 0 0 -0.59082,-0.41407 2.16795,2.16795 0 0 0 -1.55664,0 1.65411,1.65411 0 0 0 -0.59277,0.41407 1.84214,1.84214 0 0 0 -0.37891,0.65527 2.92632,2.92632 0 0 0 0,1.74316 1.83768,1.83768 0 0 0 0.37891,0.6543 1.64218,1.64218 0 0 0 0.59277,0.40918 2.19564,2.19564 0 0 0 1.55664,0 1.61829,1.61829 0 0 0 0.59082,-0.40918 1.81623,1.81623 0 0 0 0.375,-0.6543 2.71589,2.71589 0 0 0 0.13086,-0.87304 z' }), _jsx("path", { className: corner, d: 'm 112.95731,59.142 h -0.81543 a 0.377,0.377 0 0 1 -0.35156,-0.1875 l -1.31055,-1.8916 a 0.4267,0.4267 0 0 0 -0.14453,-0.14063 0.50286,0.50286 0 0 0 -0.23437,-0.043 H 109.594 V 59.142 h -0.91309 v -5.61813 h 1.6543 a 3.54427,3.54427 0 0 1 0.9541,0.11328 1.80649,1.80649 0 0 1 0.65723,0.32226 1.25606,1.25606 0 0 1 0.37988,0.501 1.76427,1.76427 0 0 1 0.0352,1.19727 1.50418,1.50418 0 0 1 -0.25293,0.46093 1.61283,1.61283 0 0 1 -0.40821,0.3584 2.04861,2.04861 0 0 1 -0.5498,0.23828 0.92346,0.92346 0 0 1 0.28906,0.28516 z m -2.64551,-2.92578 a 1.763,1.763 0 0 0 0.5459,-0.07617 1.11007,1.11007 0 0 0 0.39063,-0.21289 0.87892,0.87892 0 0 0 0.23437,-0.3252 1.10093,1.10093 0 0 0 0.0772,-0.41992 0.84276,0.84276 0 0 0 -0.30371,-0.70215 1.46527,1.46527 0 0 0 -0.9209,-0.24219 H 109.594 v 1.97852 z' }), _jsx("path", { className: corner, d: 'm 116.4954,59.142 h -0.917 v -5.61813 h 0.917 z' }), _jsx("path", { className: corner, d: 'm 121.69559,54.28461 h -1.75195 V 59.142 h -0.9082 v -4.85739 h -1.75586 v -0.76074 h 4.416 z' }), _jsx("polyline", { className: letter, style: { strokeMiterlimit: 10 }, points: '47.871 98.1 33.189 98.1 33.189 83.418', transform: 'translate(-31.392,-41.894)' }), _jsx("polyline", { className: letter, style: { strokeMiterlimit: 10 }, points: '33.142 58.326 33.142 43.644 47.824 43.644', transform: 'translate(-31.392,-41.894)' }), _jsx("polyline", { className: letter, style: { strokeMiterlimit: 10 }, points: '161.983 98.122 176.665 98.122 176.665 83.44', transform: 'translate(-31.392,-41.894)' }), _jsx("polyline", { className: letter, style: { strokeMiterlimit: 10 }, points: '176.665 58.372 176.665 43.69 161.983 43.69', transform: 'translate(-31.392,-41.894)' }), _jsx("path", { className: corner, d: 'm 30.02449,40.19351 v 4.12842 H 12.4991 V 13.99038 h 4.92871 v 26.20313 z' }), _jsx("path", { className: corner, d: 'm 61.53523,29.1564 a 17.15942,17.15942 0 0 1 -1.09473,6.21338 14.35971,14.35971 0 0 1 -3.08593,4.89746 14.091,14.091 0 0 1 -4.78125,3.21191 17.1289,17.1289 0 0 1 -12.38575,0 13.98317,13.98317 0 0 1 -7.88867,-8.10937 18.18161,18.18161 0 0 1 0,-12.42725 14.39119,14.39119 0 0 1 3.09668,-4.90771 14.13157,14.13157 0 0 1 4.792,-3.22315 17.13565,17.13565 0 0 1 12.38575,0 14.02046,14.02046 0 0 1 4.78125,3.22315 14.47032,14.47032 0 0 1 3.08593,4.90771 17.16209,17.16209 0 0 1 1.09472,6.21387 z m -5.03418,0 a 14.62587,14.62587 0 0 0 -0.70508,-4.69727 9.9446,9.9446 0 0 0 -2.02246,-3.53906 8.80545,8.80545 0 0 0 -3.1914,-2.23242 11.719,11.719 0 0 0 -8.4043,0 8.90077,8.90077 0 0 0 -3.20117,2.23242 9.96735,9.96735 0 0 0 -2.043,3.53906 15.81644,15.81644 0 0 0 0,9.415 9.847,9.847 0 0 0 2.043,3.52832 8.85094,8.85094 0 0 0 3.20117,2.21192 11.87213,11.87213 0 0 0 8.4043,0 8.75623,8.75623 0 0 0 3.1914,-2.21192 9.82454,9.82454 0 0 0 2.02249,-3.52828 14.69371,14.69371 0 0 0 0.70505,-4.71777 z' }), _jsx("path", { className: corner, d: 'm 91.76082,29.38784 v 12.00635 a 17.5354,17.5354 0 0 1 -10.53125,3.26465 18.41512,18.41512 0 0 1 -6.667,-1.148 14.80254,14.80254 0 0 1 -5.08691,-3.20166 14.0148,14.0148 0 0 1 -3.24316,-4.897 16.691,16.691 0 0 1 -1.1377,-6.25586 17.42935,17.42935 0 0 1 1.09473,-6.2876 13.74023,13.74023 0 0 1 8.06738,-8.08838 17.7222,17.7222 0 0 1 6.48828,-1.127 19.10354,19.10354 0 0 1 3.40137,0.28418 16.85244,16.85244 0 0 1 2.917,0.79 13.68442,13.68442 0 0 1 2.48633,1.22168 13.95372,13.95372 0 0 1 2.085,1.60058 l -1.41113,2.25391 a 1.40229,1.40229 0 0 1 -0.86426,0.65283 1.47784,1.47784 0 0 1 -1.13672,-0.25244 q -0.6123,-0.35816 -1.2959,-0.7583 a 11.33129,11.33129 0 0 0 -1.56933,-0.748 11.53387,11.53387 0 0 0 -2.043,-0.56836 14.78335,14.78335 0 0 0 -2.73828,-0.22119 11.32128,11.32128 0 0 0 -4.32813,0.78955 9.26752,9.26752 0 0 0 -3.29687,2.25391 9.99164,9.99164 0 0 0 -2.10645,3.54931 13.90267,13.90267 0 0 0 -0.7373,4.65528 14.11731,14.11731 0 0 0 0.77929,4.855 10.1425,10.1425 0 0 0 2.21192,3.62305 9.43419,9.43419 0 0 0 3.46484,2.26416 13.81975,13.81975 0 0 0 7.87793,0.3789 15.14816,15.14816 0 0 0 2.875,-1.11621 v -6.02383 h -4.2334 a 1.04883,1.04883 0 0 1 -0.75879,-0.26367 0.90553,0.90553 0 0 1 -0.27343,-0.68457 v -2.80127 z' }), _jsx("path", { className: corner, d: 'M 102.546,44.32193 H 97.59581 V 13.99038 h 4.95019 z' }), _jsx("path", { className: corner, d: 'm 134.8575,13.99038 v 30.33155 h -2.50684 a 2.14219,2.14219 0 0 1 -0.96875,-0.2002 2.26108,2.26108 0 0 1 -0.75879,-0.66357 L 113.962,22.05777 q 0.063,0.61083 0.0947,1.21093 0.0322,0.60058 0.0322,1.106 v 19.94723 h -4.3398 V 13.99038 h 2.57031 a 3.89092,3.89092 0 0 1 0.53711,0.03174 1.53328,1.53328 0 0 1 0.41016,0.11572 1.18964,1.18964 0 0 1 0.35839,0.25293 4.01792,4.01792 0 0 1 0.3584,0.4209 l 16.68164,21.42188 q -0.063,-0.65259 -0.0947,-1.28467 -0.0308,-0.63208 -0.0312,-1.17969 V 13.99038 Z' })] }));
+}

package/dist/src/components/logo/logoSmall.d.ts

@@ -0,0 +1 @@
+export default function LogoSmall(): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/logo/logoSmall.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function LogoSmall() {
+    const corner = 'fill-login';
+    const letter = 'fill-foreground transition-all duration-1000';
+    return (_jsxs("svg", { className: 'block h-full', viewBox: '0 0 100 100', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', children: [_jsx("path", { className: '', d: 'M0 0H6.6667V28.3333H0V0Z' }), _jsx("path", { className: corner, d: 'M28.3333 0V6.6667H0V0H28.3333Z' }), _jsx("path", { className: corner, d: 'M100 0V6.6667H71.6667V0H100Z' }), _jsx("path", { className: corner, d: 'M100 28.3333H93.3333V0H100V28.3333Z' }), _jsx("path", { className: corner, d: 'M0 100V93.3333H28.3333V100H0Z' }), _jsx("path", { className: corner, d: 'M0 71.6667H6.6667V100H0V71.6667Z' }), _jsx("path", { className: corner, d: 'M100 100H93.3333V71.6667H100V100Z' }), _jsx("path", { className: corner, d: 'M71.6667 100V93.3333H100V100H71.6667Z' }), _jsx("path", { className: letter, d: 'M31.6667 18.3333H43.3334V81.6666H31.6667V18.3333Z' }), _jsx("path", { className: letter, d: 'M31.6667 70H68.3334V81.6667H31.6667V70Z' })] }));
+}

package/dist/src/components/toggle/language.d.ts

@@ -0,0 +1,4 @@
+import { Language } from 'uibee/components';
+export default function LanguageToggle({ language }: {
+    language: Language;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/toggle/language.js

@@ -0,0 +1,29 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { getCookie, setCookie } from '../../utils/cookies/cookies';
+import { useRouter } from 'next/navigation';
+import { Globe } from 'lucide-react';
+export default function LanguageToggle({ language }) {
+    const [lang, setLang] = useState(language);
+    const [jump, setJump] = useState(false);
+    const router = useRouter();
+    useEffect(() => {
+        const savedLang = getCookie('lang');
+        if (savedLang) {
+            setLang(savedLang);
+        }
+    }, []);
+    function handleClick() {
+        const newLang = lang === 'no' ? 'en' : 'no';
+        setCookie('lang', newLang);
+        setLang(newLang);
+        language = newLang;
+        setJump(true);
+        setTimeout(() => setJump(false), 400);
+        router.refresh();
+    }
+    const buttonClasses = `cursor-pointer p-2 leading-8 text-base w-[4.3rem] text-center rounded 
+        bg-transparent border-none hover:bg-gray-400/10 flex flex-row items-center justify-center gap-1`;
+    return (_jsxs("button", { value: lang, onClick: handleClick, className: buttonClasses, children: [_jsx(Globe, { className: `text-xl leading-8 -mt-0.5 ${jump ? 'animate-jump' : ''}` }), ' ' + lang] }));
+}

package/dist/src/components/toggle/theme.d.ts

@@ -0,0 +1,3 @@
+export default function ThemeSwitch({ className }: {
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/toggle/theme.js

@@ -0,0 +1,30 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { getCookie, setCookie } from '../../utils/cookies/cookies';
+import { useRouter } from 'next/navigation';
+export default function ThemeSwitch({ className }) {
+    const router = useRouter();
+    const [theme, setTheme] = useState('dark');
+    useEffect(() => {
+        const savedTheme = getCookie('theme');
+        if (savedTheme) {
+            setTheme(savedTheme);
+        }
+        document.documentElement.classList.remove('dark', 'light');
+        document.documentElement.classList.add(theme);
+    }, [theme]);
+    function toggleTheme() {
+        const newTheme = theme === 'dark' ? 'light' : 'dark';
+        setCookie('theme', newTheme);
+        setTheme(newTheme);
+        router.refresh();
+    }
+    return (_jsx("div", { className: `grid place-items-center justify-end rounded-md hover:bg-login-300/20 w-fit ${className}`, children: _jsxs("label", { className: 'cursor-pointer', children: [_jsx("input", { type: 'checkbox', checked: theme === 'light', onChange: toggleTheme, className: 'sr-only' }), _jsx(ThemeIcon, { theme: theme })] }) }));
+}
+function ThemeIcon({ theme }) {
+    const sunrayClass = `fill-white transition-opacity duration-400 ${theme === 'light' ? 'opacity-0' : 'opacity-100'}`;
+    return (_jsxs("svg", { className: 'h-12 p-3', viewBox: '0 0 100 100', xmlns: 'http://www.w3.org/2000/svg', children: [_jsx("defs", { children: _jsxs("mask", { id: 'theme-toggle_clip-path', children: [_jsx("rect", { x: '0', y: '0', width: '100', height: '100', fill: 'white' }), _jsx("circle", { className: `transition-transform duration-400 ${theme === 'dark' ? 'translate-x-8 -translate-y-4' : ''}`, cx: '68', cy: '40', r: '18' })] }) }), _jsx("circle", { className: `origin-center transition-all duration-400 ${theme === 'light'
+                    ? 'scale-[1.9] fill-black'
+                    : 'scale-100 fill-white'}`, mask: 'url(#theme-toggle_clip-path)', cx: '50', cy: '50', r: '23' }), _jsx("rect", { className: sunrayClass, x: '86', y: '47', width: '14', height: '6', rx: '3' }), _jsx("rect", { className: sunrayClass, y: '47', width: '14', height: '6', rx: '3' }), _jsx("rect", { className: sunrayClass, x: '47', y: '86', width: '6', height: '14', rx: '3' }), _jsx("rect", { className: sunrayClass, x: '75', y: '75', width: '6', height: '14', rx: '3', transform: 'rotate(-45 78 78)' }), _jsx("rect", { className: sunrayClass, x: '84.8995', y: '12', width: '6', height: '14', rx: '3', transform: 'rotate(45 84.8995 12)' }), _jsx("rect", { className: sunrayClass, x: '22.8995', y: '74', width: '6', height: '14', rx: '3', transform: 'rotate(45 22.8995 74)' }), _jsx("rect", { className: sunrayClass, x: '13', y: '16.2426', width: '6', height: '14', rx: '3', transform: 'rotate(-45 13 16.2426)' }), _jsx("rect", { className: sunrayClass, x: '47', y: '0', width: '6', height: '14', rx: '3' })] }));
+}

package/dist/src/scripts/rewriteAlias.js

@@ -3,15 +3,35 @@ import path from 'path';
 import { globSync } from 'glob';
 const DIST_DIR = path.resolve('dist');
 const IMAGES_DIR = path.join(DIST_DIR, 'images');
+const SRC_DIR = path.join(DIST_DIR, 'src');
 const jsFiles = globSync(`${DIST_DIR}/**/*.js`, { nodir: true });
 jsFiles.forEach((file) => {
     let content = fs.readFileSync(file, 'utf-8');
     const fileDir = path.dirname(file);
+    // Handle @images/* imports
     content = content.replace(/from ['"]@images\/(.*?)['"]/g, (_, p1) => {
         const targetPath = path.join(IMAGES_DIR, p1);
         const relative = path.relative(fileDir, targetPath).replace(/\\/g, '/');
         return `from '${relative}'`;
     });
+    // Handle @utils/* imports
+    content = content.replace(/from ['"]@utils\/(.*?)['"]/g, (_, p1) => {
+        const targetPath = path.join(SRC_DIR, 'utils', p1);
+        const relative = path.relative(fileDir, targetPath).replace(/\\/g, '/');
+        return `from '${relative}'`;
+    });
+    // Handle @components/* imports
+    content = content.replace(/from ['"]@components\/(.*?)['"]/g, (_, p1) => {
+        const targetPath = path.join(SRC_DIR, 'components', p1);
+        const relative = path.relative(fileDir, targetPath).replace(/\\/g, '/');
+        return `from '${relative}'`;
+    });
+    // Handle @hooks/* imports
+    content = content.replace(/from ['"]@hooks\/(.*?)['"]/g, (_, p1) => {
+        const targetPath = path.join(SRC_DIR, 'hooks', p1);
+        const relative = path.relative(fileDir, targetPath).replace(/\\/g, '/');
+        return `from '${relative}'`;
+    });
     const inlineImages = content.match(/src: ['"]images\/(.*?)['"]/g);
     if (inlineImages) {
         inlineImages.forEach((match) => {
@@ -27,5 +47,5 @@ jsFiles.forEach((file) => {
     }
     fs.writeFileSync(file, content, 'utf-8');
 });
-console.log('🐝 Image imports rewritten');
+console.log('🐝 All path aliases rewritten');
 console.log('🐝 Build complete');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uibee",
-  "version": "1.6.12",
+  "version": "1.7.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/index.ts

@@ -1,7 +1,15 @@
-export { default as LoginPage } from './login/loginPage'
-export { default as Toaster, addToast } from './toast/toaster'
-
 // Input components
 export { default as Input } from './inputs/input'
 export { default as SwitchInput } from './inputs/switch'
 export { default as TagInput } from './inputs/tag'
+
+// Logos
+export { default as Logo } from './logo/logo'
+export { default as LogoSmall } from './logo/logoSmall'
+
+// Toggles
+export { default as ThemeToggle } from './toggle/theme'
+export { default as LanguageToggle } from './toggle/language'
+
+export { default as LoginPage } from './login/loginPage'
+export { default as Toaster, addToast } from './toast/toaster'

package/src/components/logo/logo.tsx

@@ -0,0 +1,41 @@
+/* eslint-disable @stylistic/max-len */
+
+export default function Logo() {
+    const corner = 'fill-[var(--foreground)] transition-all duration-1000'
+    const letter = 'fill-none stroke-[var(--color-login)] stroke-[3.5px]'
+
+    return (
+        <svg className='block w-full max-w-2xl mx-auto' viewBox='0 0 147.02299 59.20511'>
+            <path className={corner} d='m 28.77713,58.37738 v 0.76465 H 25.531 v -5.61816 h 0.91309 v 4.85351 z' />
+            <path className={corner} d='m 30.47831,59.142 h -0.917 v -5.61813 h 0.917 z'/>
+            <path className={corner} d='M 36.46268,53.52387 V 59.142 H 35.99881 A 0.36347,0.36347 0 0 1 35.6785,58.98185 L 32.59256,55.018 c 0.0078,0.07617 0.01368,0.15039 0.01758,0.22461 0.0039,0.07422 0.0059,0.14258 0.0059,0.20508 V 59.142 h -0.80371 v -5.61813 h 0.47656 a 0.71321,0.71321 0 0 1 0.09864,0.0059 0.3128,0.3128 0 0 1 0.07617,0.02148 0.22919,0.22919 0 0 1 0.0664,0.04688 0.63781,0.63781 0 0 1 0.06641,0.07812 l 3.08984,3.96779 c -0.0078,-0.08105 -0.01367,-0.16015 -0.01757,-0.23828 -0.0039,-0.07813 -0.0059,-0.15039 -0.0059,-0.21875 v -3.6631 z' />
+            <path className={corner} d='m 39.84549,57.1684 a 2.91264,2.91264 0 0 1 -0.11523,0.84765 1.748,1.748 0 0 1 -0.34375,0.64063 1.52483,1.52483 0 0 1 -0.56543,0.40527 2.00691,2.00691 0 0 1 -0.78223,0.14258 3.23707,3.23707 0 0 1 -0.40234,-0.0254 3.44454,3.44454 0 0 1 -0.41309,-0.0801 l 0.04688,-0.5459 a 0.2079,0.2079 0 0 1 0.06055,-0.125 0.19754,0.19754 0 0 1 0.14257,-0.0469 0.74035,0.74035 0 0 1 0.18067,0.0293 1.36468,1.36468 0 0 0 0.71387,-0.041 0.74722,0.74722 0 0 0 0.3125,-0.2207 0.9864,0.9864 0 0 0 0.1914,-0.38574 2.19551,2.19551 0 0 0 0.06445,-0.57227 v -3.667 h 0.90918 z' />
+            <path className={corner} d='m 44.6326,58.40473 -0.0039,0.7373 h -3.50391 v -5.61816 h 3.50391 v 0.7373 h -2.58692 v 1.69336 h 2.06739 v 0.71387 h -2.06739 v 1.73633 z' />
+            <path className={corner} d='M 46.53592,54.26117 V 56.06 h 2.19629 v 0.7373 h -2.19629 v 2.3447 h -0.917 v -5.61813 h 3.50391 v 0.7373 z' />
+            <path className={corner} d='m 55.25956,56.33344 a 3.18179,3.18179 0 0 1 -0.20215,1.15039 2.6634,2.6634 0 0 1 -0.57227,0.90722 2.59685,2.59685 0 0 1 -0.88476,0.59473 3.17156,3.17156 0 0 1 -2.29492,0 2.62415,2.62415 0 0 1 -0.88672,-0.59473 2.65327,2.65327 0 0 1 -0.57422,-0.90722 3.37717,3.37717 0 0 1 0,-2.30176 2.67118,2.67118 0 0 1 0.57422,-0.90918 2.61491,2.61491 0 0 1 0.88672,-0.59668 3.1717,3.1717 0 0 1 2.29492,0 2.58781,2.58781 0 0 1 0.88476,0.59668 2.68144,2.68144 0 0 1 0.57227,0.90918 3.1871,3.1871 0 0 1 0.20215,1.15137 z m -0.93164,0 a 2.706,2.706 0 0 0 -0.13086,-0.87012 1.821,1.821 0 0 0 -0.375,-0.65527 1.63008,1.63008 0 0 0 -0.59082,-0.41407 2.16795,2.16795 0 0 0 -1.55664,0 1.65415,1.65415 0 0 0 -0.59278,0.41407 1.84212,1.84212 0 0 0 -0.3789,0.65527 2.92611,2.92611 0 0 0 0,1.74316 1.83766,1.83766 0 0 0 0.3789,0.6543 1.64222,1.64222 0 0 0 0.59278,0.40918 2.19564,2.19564 0 0 0 1.55664,0 1.61838,1.61838 0 0 0 0.59082,-0.40918 1.81652,1.81652 0 0 0 0.375,-0.6543 2.71589,2.71589 0 0 0 0.13086,-0.87304 z' />
+            <path className={corner} d='m 60.534,59.142 h -0.81543 a 0.377,0.377 0 0 1 -0.35156,-0.1875 l -1.31055,-1.8916 a 0.4267,0.4267 0 0 0 -0.14453,-0.14063 0.50286,0.50286 0 0 0 -0.23437,-0.043 H 57.17072 V 59.142 H 56.2576 v -5.61813 h 1.6543 a 3.54427,3.54427 0 0 1 0.9541,0.11328 1.80649,1.80649 0 0 1 0.65723,0.32226 1.25606,1.25606 0 0 1 0.37988,0.501 1.76427,1.76427 0 0 1 0.03516,1.19727 1.50418,1.50418 0 0 1 -0.25293,0.46093 1.61283,1.61283 0 0 1 -0.40821,0.3584 2.04861,2.04861 0 0 1 -0.5498,0.23828 0.92346,0.92346 0 0 1 0.28906,0.28516 z m -2.64551,-2.92578 a 1.763,1.763 0 0 0 0.5459,-0.07617 1.11007,1.11007 0 0 0 0.39063,-0.21289 0.87892,0.87892 0 0 0 0.23437,-0.3252 1.10093,1.10093 0 0 0 0.07715,-0.41992 0.84276,0.84276 0 0 0 -0.30371,-0.70215 1.46527,1.46527 0 0 0 -0.9209,-0.24219 h -0.74121 v 1.97852 z' />
+            <path className={corner} d='m 64.72049,58.40473 -0.0039,0.7373 h -3.50391 v -5.61816 h 3.50391 v 0.7373 h -2.58692 v 1.69336 h 2.06739 v 0.71387 h -2.06739 v 1.73633 z' />
+            <path className={corner} d='M 70.35721,53.52387 V 59.142 H 69.89335 A 0.36347,0.36347 0 0 1 69.57303,58.98185 L 66.4871,55.018 c 0.0078,0.07617 0.01367,0.15039 0.01757,0.22461 0.0039,0.07422 0.0059,0.14258 0.0059,0.20508 V 59.142 h -0.80371 v -5.61813 h 0.47656 a 0.71321,0.71321 0 0 1 0.09864,0.0059 0.3128,0.3128 0 0 1 0.07617,0.02148 0.22936,0.22936 0 0 1 0.06641,0.04688 0.63869,0.63869 0 0 1 0.0664,0.07812 l 3.08985,3.96777 c -0.008,-0.08105 -0.0137,-0.16015 -0.0176,-0.23828 -0.004,-0.07813 -0.006,-0.15039 -0.006,-0.21875 v -3.66308 z' />
+            <path className={corner} d='m 72.6121,59.142 h -0.917 v -5.61813 h 0.917 z' />
+            <path className={corner} d='M 78.59794,53.52387 V 59.142 H 78.13358 A 0.36344,0.36344 0 0 1 77.81327,58.98185 L 74.72733,55.018 c 0.008,0.07617 0.0137,0.15039 0.0176,0.22461 0.004,0.07422 0.006,0.14258 0.006,0.20508 V 59.142 h -0.80371 v -5.61813 h 0.47656 a 0.713,0.713 0 0 1 0.0986,0.0059 0.31254,0.31254 0 0 1 0.0762,0.02148 0.22936,0.22936 0 0 1 0.0664,0.04688 0.63869,0.63869 0 0 1 0.0664,0.07812 l 3.08984,3.96777 c -0.008,-0.08105 -0.0137,-0.16015 -0.0176,-0.23828 -0.004,-0.07813 -0.006,-0.15039 -0.006,-0.21875 v -3.66308 z' />
+            <path className={corner} d='M 84.53544,56.37641 V 58.6 a 3.24425,3.24425 0 0 1 -1.9502,0.60449 3.419,3.419 0 0 1 -1.23535,-0.21289 2.7275,2.7275 0 0 1 -0.94141,-0.59277 2.59231,2.59231 0 0 1 -0.60156,-0.90723 3.08634,3.08634 0 0 1 -0.21,-1.1582 3.23536,3.23536 0 0 1 0.20215,-1.165 2.5484,2.5484 0 0 1 1.49414,-1.498 3.29189,3.29189 0 0 1 1.20215,-0.209 3.52605,3.52605 0 0 1 0.62988,0.05273 3.11559,3.11559 0 0 1 0.54,0.14649 2.535,2.535 0 0 1 0.84668,0.52246 l -0.26074,0.418 a 0.26545,0.26545 0 0 1 -0.16016,0.12109 0.27377,0.27377 0 0 1 -0.21094,-0.04688 c -0.0752,-0.04492 -0.15527,-0.09082 -0.24023,-0.14062 a 2.01137,2.01137 0 0 0 -0.29,-0.13867 2.127,2.127 0 0 0 -0.37891,-0.10547 2.72656,2.72656 0 0 0 -0.50683,-0.041 2.09434,2.09434 0 0 0 -0.80176,0.14649 1.70173,1.70173 0 0 0 -0.61035,0.418 1.84692,1.84692 0 0 0 -0.39063,0.65722 2.5766,2.5766 0 0 0 -0.13672,0.86231 2.62333,2.62333 0 0 0 0.14453,0.89844 1.88731,1.88731 0 0 0 0.41016,0.67187 1.74772,1.74772 0 0 0 0.6416,0.419 2.55647,2.55647 0 0 0 1.459,0.0703 2.80344,2.80344 0 0 0 0.53222,-0.207 V 57.07074 H 82.928 a 0.19287,0.19287 0 0 1 -0.13964,-0.04883 0.16848,0.16848 0 0 1 -0.0508,-0.12695 v -0.51855 z' />
+            <path className={corner} d='m 89.1243,58.40473 -0.004,0.7373 h -3.50391 v -5.61816 h 3.50391 v 0.7373 h -2.58692 v 1.69336 h 2.06739 v 0.71387 h -2.06739 v 1.73633 z' />
+            <path className={corner} d='M 94.761,53.52387 V 59.142 H 94.29713 A 0.36347,0.36347 0 0 1 93.97682,58.98185 L 90.8909,55.018 c 0.008,0.07617 0.0137,0.15039 0.0176,0.22461 0.004,0.07422 0.006,0.14258 0.006,0.20508 V 59.142 h -0.80371 v -5.61813 h 0.47656 a 0.71321,0.71321 0 0 1 0.0986,0.0059 0.3128,0.3128 0 0 1 0.0762,0.02148 0.22919,0.22919 0 0 1 0.0664,0.04688 0.63781,0.63781 0 0 1 0.0664,0.07812 l 3.08984,3.96777 c -0.008,-0.08105 -0.0137,-0.16015 -0.0176,-0.23828 -0.004,-0.07813 -0.006,-0.15039 -0.006,-0.21875 v -3.66308 z' />
+            <path className={corner} d='M 98.95829,54.26117 V 56.06 h 2.19629 v 0.7373 h -2.19629 v 2.3447 h -0.917 v -5.61813 h 3.5039 v 0.7373 z' />
+            <path className={corner} d='m 107.68192,56.33344 a 3.18158,3.18158 0 0 1 -0.20215,1.15039 2.66353,2.66353 0 0 1 -0.57226,0.90722 2.597,2.597 0 0 1 -0.88477,0.59473 3.17156,3.17156 0 0 1 -2.29492,0 2.62415,2.62415 0 0 1 -0.88672,-0.59473 2.65327,2.65327 0 0 1 -0.57422,-0.90722 3.37717,3.37717 0 0 1 0,-2.30176 2.67118,2.67118 0 0 1 0.57422,-0.90918 2.61491,2.61491 0 0 1 0.88672,-0.59668 3.1717,3.1717 0 0 1 2.29492,0 2.588,2.588 0 0 1 0.88477,0.59668 2.68157,2.68157 0 0 1 0.57226,0.90918 3.18689,3.18689 0 0 1 0.20215,1.15137 z m -0.93164,0 a 2.706,2.706 0 0 0 -0.13086,-0.87012 1.82066,1.82066 0 0 0 -0.375,-0.65527 1.63,1.63 0 0 0 -0.59082,-0.41407 2.16795,2.16795 0 0 0 -1.55664,0 1.65411,1.65411 0 0 0 -0.59277,0.41407 1.84214,1.84214 0 0 0 -0.37891,0.65527 2.92632,2.92632 0 0 0 0,1.74316 1.83768,1.83768 0 0 0 0.37891,0.6543 1.64218,1.64218 0 0 0 0.59277,0.40918 2.19564,2.19564 0 0 0 1.55664,0 1.61829,1.61829 0 0 0 0.59082,-0.40918 1.81623,1.81623 0 0 0 0.375,-0.6543 2.71589,2.71589 0 0 0 0.13086,-0.87304 z' />
+            <path className={corner} d='m 112.95731,59.142 h -0.81543 a 0.377,0.377 0 0 1 -0.35156,-0.1875 l -1.31055,-1.8916 a 0.4267,0.4267 0 0 0 -0.14453,-0.14063 0.50286,0.50286 0 0 0 -0.23437,-0.043 H 109.594 V 59.142 h -0.91309 v -5.61813 h 1.6543 a 3.54427,3.54427 0 0 1 0.9541,0.11328 1.80649,1.80649 0 0 1 0.65723,0.32226 1.25606,1.25606 0 0 1 0.37988,0.501 1.76427,1.76427 0 0 1 0.0352,1.19727 1.50418,1.50418 0 0 1 -0.25293,0.46093 1.61283,1.61283 0 0 1 -0.40821,0.3584 2.04861,2.04861 0 0 1 -0.5498,0.23828 0.92346,0.92346 0 0 1 0.28906,0.28516 z m -2.64551,-2.92578 a 1.763,1.763 0 0 0 0.5459,-0.07617 1.11007,1.11007 0 0 0 0.39063,-0.21289 0.87892,0.87892 0 0 0 0.23437,-0.3252 1.10093,1.10093 0 0 0 0.0772,-0.41992 0.84276,0.84276 0 0 0 -0.30371,-0.70215 1.46527,1.46527 0 0 0 -0.9209,-0.24219 H 109.594 v 1.97852 z' />
+            <path className={corner} d='m 116.4954,59.142 h -0.917 v -5.61813 h 0.917 z' />
+            <path className={corner} d='m 121.69559,54.28461 h -1.75195 V 59.142 h -0.9082 v -4.85739 h -1.75586 v -0.76074 h 4.416 z' />
+            <polyline className={letter} style={{strokeMiterlimit: 10}} points='47.871 98.1 33.189 98.1 33.189 83.418' transform='translate(-31.392,-41.894)' />
+            <polyline className={letter} style={{strokeMiterlimit: 10}} points='33.142 58.326 33.142 43.644 47.824 43.644' transform='translate(-31.392,-41.894)' />
+            <polyline className={letter} style={{strokeMiterlimit: 10}} points='161.983 98.122 176.665 98.122 176.665 83.44' transform='translate(-31.392,-41.894)' />
+            <polyline className={letter} style={{strokeMiterlimit: 10}} points='176.665 58.372 176.665 43.69 161.983 43.69' transform='translate(-31.392,-41.894)' />
+            <path className={corner} d='m 30.02449,40.19351 v 4.12842 H 12.4991 V 13.99038 h 4.92871 v 26.20313 z' />
+            <path className={corner} d='m 61.53523,29.1564 a 17.15942,17.15942 0 0 1 -1.09473,6.21338 14.35971,14.35971 0 0 1 -3.08593,4.89746 14.091,14.091 0 0 1 -4.78125,3.21191 17.1289,17.1289 0 0 1 -12.38575,0 13.98317,13.98317 0 0 1 -7.88867,-8.10937 18.18161,18.18161 0 0 1 0,-12.42725 14.39119,14.39119 0 0 1 3.09668,-4.90771 14.13157,14.13157 0 0 1 4.792,-3.22315 17.13565,17.13565 0 0 1 12.38575,0 14.02046,14.02046 0 0 1 4.78125,3.22315 14.47032,14.47032 0 0 1 3.08593,4.90771 17.16209,17.16209 0 0 1 1.09472,6.21387 z m -5.03418,0 a 14.62587,14.62587 0 0 0 -0.70508,-4.69727 9.9446,9.9446 0 0 0 -2.02246,-3.53906 8.80545,8.80545 0 0 0 -3.1914,-2.23242 11.719,11.719 0 0 0 -8.4043,0 8.90077,8.90077 0 0 0 -3.20117,2.23242 9.96735,9.96735 0 0 0 -2.043,3.53906 15.81644,15.81644 0 0 0 0,9.415 9.847,9.847 0 0 0 2.043,3.52832 8.85094,8.85094 0 0 0 3.20117,2.21192 11.87213,11.87213 0 0 0 8.4043,0 8.75623,8.75623 0 0 0 3.1914,-2.21192 9.82454,9.82454 0 0 0 2.02249,-3.52828 14.69371,14.69371 0 0 0 0.70505,-4.71777 z' />
+            <path className={corner} d='m 91.76082,29.38784 v 12.00635 a 17.5354,17.5354 0 0 1 -10.53125,3.26465 18.41512,18.41512 0 0 1 -6.667,-1.148 14.80254,14.80254 0 0 1 -5.08691,-3.20166 14.0148,14.0148 0 0 1 -3.24316,-4.897 16.691,16.691 0 0 1 -1.1377,-6.25586 17.42935,17.42935 0 0 1 1.09473,-6.2876 13.74023,13.74023 0 0 1 8.06738,-8.08838 17.7222,17.7222 0 0 1 6.48828,-1.127 19.10354,19.10354 0 0 1 3.40137,0.28418 16.85244,16.85244 0 0 1 2.917,0.79 13.68442,13.68442 0 0 1 2.48633,1.22168 13.95372,13.95372 0 0 1 2.085,1.60058 l -1.41113,2.25391 a 1.40229,1.40229 0 0 1 -0.86426,0.65283 1.47784,1.47784 0 0 1 -1.13672,-0.25244 q -0.6123,-0.35816 -1.2959,-0.7583 a 11.33129,11.33129 0 0 0 -1.56933,-0.748 11.53387,11.53387 0 0 0 -2.043,-0.56836 14.78335,14.78335 0 0 0 -2.73828,-0.22119 11.32128,11.32128 0 0 0 -4.32813,0.78955 9.26752,9.26752 0 0 0 -3.29687,2.25391 9.99164,9.99164 0 0 0 -2.10645,3.54931 13.90267,13.90267 0 0 0 -0.7373,4.65528 14.11731,14.11731 0 0 0 0.77929,4.855 10.1425,10.1425 0 0 0 2.21192,3.62305 9.43419,9.43419 0 0 0 3.46484,2.26416 13.81975,13.81975 0 0 0 7.87793,0.3789 15.14816,15.14816 0 0 0 2.875,-1.11621 v -6.02383 h -4.2334 a 1.04883,1.04883 0 0 1 -0.75879,-0.26367 0.90553,0.90553 0 0 1 -0.27343,-0.68457 v -2.80127 z' />
+            <path className={corner} d='M 102.546,44.32193 H 97.59581 V 13.99038 h 4.95019 z' />
+            <path className={corner} d='m 134.8575,13.99038 v 30.33155 h -2.50684 a 2.14219,2.14219 0 0 1 -0.96875,-0.2002 2.26108,2.26108 0 0 1 -0.75879,-0.66357 L 113.962,22.05777 q 0.063,0.61083 0.0947,1.21093 0.0322,0.60058 0.0322,1.106 v 19.94723 h -4.3398 V 13.99038 h 2.57031 a 3.89092,3.89092 0 0 1 0.53711,0.03174 1.53328,1.53328 0 0 1 0.41016,0.11572 1.18964,1.18964 0 0 1 0.35839,0.25293 4.01792,4.01792 0 0 1 0.3584,0.4209 l 16.68164,21.42188 q -0.063,-0.65259 -0.0947,-1.28467 -0.0308,-0.63208 -0.0312,-1.17969 V 13.99038 Z' />
+        </svg>
+
+    )
+}

package/src/components/logo/logoSmall.tsx

@@ -0,0 +1,19 @@
+export default function LogoSmall() {
+    const corner = 'fill-login'
+    const letter = 'fill-foreground transition-all duration-1000'
+
+    return (
+        <svg className='block h-full' viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'>
+            <path className='' d='M0 0H6.6667V28.3333H0V0Z'/>
+            <path className={corner} d='M28.3333 0V6.6667H0V0H28.3333Z'/>
+            <path className={corner} d='M100 0V6.6667H71.6667V0H100Z'/>
+            <path className={corner} d='M100 28.3333H93.3333V0H100V28.3333Z'/>
+            <path className={corner} d='M0 100V93.3333H28.3333V100H0Z'/>
+            <path className={corner} d='M0 71.6667H6.6667V100H0V71.6667Z'/>
+            <path className={corner} d='M100 100H93.3333V71.6667H100V100Z'/>
+            <path className={corner} d='M71.6667 100V93.3333H100V100H71.6667Z'/>
+            <path className={letter} d='M31.6667 18.3333H43.3334V81.6666H31.6667V18.3333Z'/>
+            <path className={letter} d='M31.6667 70H68.3334V81.6667H31.6667V70Z'/>
+        </svg>
+    )
+}

package/src/components/toggle/language.tsx

@@ -0,0 +1,45 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { getCookie, setCookie } from '@utils/cookies/cookies'
+import { useRouter } from 'next/navigation'
+import { Language } from 'uibee/components'
+import { Globe } from 'lucide-react'
+
+export default function LanguageToggle({language}: {language: Language}) {
+    const [lang, setLang] = useState<Language>(language)
+    const [jump, setJump] = useState(false)
+
+    const router = useRouter()
+
+    useEffect(() => {
+        const savedLang = getCookie('lang') as Language
+        if (savedLang) {
+            setLang(savedLang)
+        }
+    }, [])
+
+    function handleClick() {
+        const newLang = lang === 'no' ? 'en' : 'no'
+        setCookie('lang', newLang)
+        setLang(newLang)
+        language = newLang
+        setJump(true)
+        setTimeout(() => setJump(false), 400)
+        router.refresh()
+    }
+
+    const buttonClasses = `cursor-pointer p-2 leading-8 text-base w-[4.3rem] text-center rounded 
+        bg-transparent border-none hover:bg-gray-400/10 flex flex-row items-center justify-center gap-1`
+
+    return(
+        <button
+            value={lang}
+            onClick={handleClick}
+            className={buttonClasses}
+        >
+            <Globe className={`text-xl leading-8 -mt-0.5 ${jump ? 'animate-jump' : ''}`}/>
+            {' ' + lang}
+        </button>
+    )
+}

package/src/components/toggle/theme.tsx

@@ -0,0 +1,150 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { getCookie, setCookie } from '@utils/cookies/cookies'
+import { useRouter } from 'next/navigation'
+
+export default function ThemeSwitch({className}: {className?: string}) {
+    const router = useRouter()
+    const [theme, setTheme] = useState<'dark' | 'light'>('dark')
+
+    useEffect(() => {
+        const savedTheme = getCookie('theme') as 'dark' | 'light'
+        if (savedTheme) {
+            setTheme(savedTheme)
+        }
+
+        document.documentElement.classList.remove('dark', 'light')
+        document.documentElement.classList.add(theme)
+    }, [theme])
+
+    function toggleTheme() {
+        const newTheme = theme === 'dark' ? 'light' : 'dark'
+        setCookie('theme', newTheme)
+        setTheme(newTheme)
+        router.refresh()
+    }
+
+    return (
+        <div className={`grid place-items-center justify-end rounded-md hover:bg-login-300/20 w-fit ${className}`}>
+            <label className='cursor-pointer'>
+                <input
+                    type='checkbox'
+                    checked={theme === 'light'}
+                    onChange={toggleTheme}
+                    className='sr-only'
+                />
+                <ThemeIcon theme={theme} />
+            </label>
+        </div>
+    )
+}
+
+function ThemeIcon({ theme }: { theme: 'dark' | 'light' }) {
+    const sunrayClass = `fill-white transition-opacity duration-400 ${
+        theme === 'light' ? 'opacity-0' : 'opacity-100'
+    }`
+
+    return (
+        <svg
+            className='h-12 p-3'
+            viewBox='0 0 100 100'
+            xmlns='http://www.w3.org/2000/svg'
+        >
+            {/* Sun */}
+            <defs>
+                <mask id='theme-toggle_clip-path'>
+                    <rect x='0' y='0' width='100' height='100' fill='white' />
+                    <circle
+                        className={`transition-transform duration-400 ${
+                            theme === 'dark' ? 'translate-x-8 -translate-y-4' : ''
+                        }`}
+                        cx='68'
+                        cy='40'
+                        r='18'
+                    />
+                </mask>
+            </defs>
+            {/* Moon */}
+            <circle
+                className={`origin-center transition-all duration-400 ${
+                    theme === 'light'
+                        ? 'scale-[1.9] fill-black'
+                        : 'scale-100 fill-white'
+                }`}
+                mask={'url(#theme-toggle_clip-path)'}
+                cx='50'
+                cy='50'
+                r='23'
+            />
+            {/* Sunrays */}
+            <rect
+                className={sunrayClass}
+                x='86'
+                y='47'
+                width='14'
+                height='6'
+                rx='3'
+            />
+            <rect
+                className={sunrayClass}
+                y='47'
+                width='14'
+                height='6'
+                rx='3'
+            />
+            <rect
+                className={sunrayClass}
+                x='47'
+                y='86'
+                width='6'
+                height='14'
+                rx='3'
+            />
+            <rect
+                className={sunrayClass}
+                x='75'
+                y='75'
+                width='6'
+                height='14'
+                rx='3'
+                transform='rotate(-45 78 78)'
+            />
+            <rect
+                className={sunrayClass}
+                x='84.8995'
+                y='12'
+                width='6'
+                height='14'
+                rx='3'
+                transform='rotate(45 84.8995 12)'
+            />
+            <rect
+                className={sunrayClass}
+                x='22.8995'
+                y='74'
+                width='6'
+                height='14'
+                rx='3'
+                transform='rotate(45 22.8995 74)'
+            />
+            <rect
+                className={sunrayClass}
+                x='13'
+                y='16.2426'
+                width='6'
+                height='14'
+                rx='3'
+                transform='rotate(-45 13 16.2426)'
+            />
+            <rect
+                className={sunrayClass}
+                x='47'
+                y='0'
+                width='6'
+                height='14'
+                rx='3'
+            />
+        </svg>
+    )
+}

package/src/globals.css

@@ -82,3 +82,13 @@ body {
     background: var(--background);
     font-family: Arial, Helvetica, sans-serif;
 }
+
+@keyframes jump {
+    40% {
+        transform: translateY(-0.3rem);
+    }
+}
+
+@utility animate-jump {
+    animation: jump 0.4s 1;
+}

package/src/scripts/rewriteAlias.ts

@@ -4,18 +4,42 @@ import { globSync } from 'glob'
 
 const DIST_DIR = path.resolve('dist')
 const IMAGES_DIR = path.join(DIST_DIR, 'images')
+const SRC_DIR = path.join(DIST_DIR, 'src')
 
 const jsFiles = globSync(`${DIST_DIR}/**/*.js`, { nodir: true })
 
 jsFiles.forEach((file) => {
     let content = fs.readFileSync(file, 'utf-8')
     const fileDir = path.dirname(file)
+
+    // Handle @images/* imports
     content = content.replace(/from ['"]@images\/(.*?)['"]/g, (_, p1) => {
         const targetPath = path.join(IMAGES_DIR, p1)
         const relative = path.relative(fileDir, targetPath).replace(/\\/g, '/')
         return `from '${relative}'`
     })
 
+    // Handle @utils/* imports
+    content = content.replace(/from ['"]@utils\/(.*?)['"]/g, (_, p1) => {
+        const targetPath = path.join(SRC_DIR, 'utils', p1)
+        const relative = path.relative(fileDir, targetPath).replace(/\\/g, '/')
+        return `from '${relative}'`
+    })
+
+    // Handle @components/* imports
+    content = content.replace(/from ['"]@components\/(.*?)['"]/g, (_, p1) => {
+        const targetPath = path.join(SRC_DIR, 'components', p1)
+        const relative = path.relative(fileDir, targetPath).replace(/\\/g, '/')
+        return `from '${relative}'`
+    })
+
+    // Handle @hooks/* imports
+    content = content.replace(/from ['"]@hooks\/(.*?)['"]/g, (_, p1) => {
+        const targetPath = path.join(SRC_DIR, 'hooks', p1)
+        const relative = path.relative(fileDir, targetPath).replace(/\\/g, '/')
+        return `from '${relative}'`
+    })
+
     const inlineImages = content.match(/src: ['"]images\/(.*?)['"]/g)
     if (inlineImages) {
         inlineImages.forEach((match) => {
@@ -33,5 +57,5 @@ jsFiles.forEach((file) => {
     fs.writeFileSync(file, content, 'utf-8')
 })
 
-console.log('🐝 Image imports rewritten')
+console.log('🐝 All path aliases rewritten')
 console.log('🐝 Build complete')

package/src/types/components.d.ts

@@ -27,6 +27,10 @@ declare module 'uibee/components' {
         (event: ToastEventProps): void
     }
 
+    export type Language = 'no' | 'en'
+
     export default function LoginPage(props: LoginPageProps): JSX.Element;
     export default function Toaster(props: { toasts: ToastProps[] }): JSX.Element;
+    export default function LanguageToggle(props: { lang: Language }): JSX.Element;
+    export default function ThemeSwitch(props: { className?: string }): JSX.Element;
 }

package/tsconfig.json

@@ -15,6 +15,15 @@
     "paths": {
       "@images/*": [
         "./images/*"
+      ],
+      "@components/*": [
+        "./src/components/*"
+      ],
+      "@utils/*": [
+        "./src/utils/*"
+      ],
+      "@hooks/*": [
+        "./src/hooks/*"
       ]
     }
   },