uibee 3.1.5 → 3.2.0

package/dist/style.css

@@ -43,6 +43,7 @@
     --container-xs: 20rem;
     --container-sm: 24rem;
     --container-md: 28rem;
+    --container-lg: 32rem;
     --container-2xl: 42rem;
     --container-6xl: 72rem;
     --text-xs: 0.75rem;
@@ -75,6 +76,7 @@
     --radius-xl: 0.75rem;
     --ease-out: cubic-bezier(0, 0, 0.2, 1);
     --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+    --animate-spin: spin 1s linear infinite;
     --animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
     --blur-sm: 8px;
     --blur-xl: 24px;
@@ -387,6 +389,9 @@
   .top-0 {
     top: 0;
   }
+  .top-1 {
+    top: var(--spacing);
+  }
   .top-1\/2 {
     top: calc(1 / 2 * 100%);
   }
@@ -402,6 +407,9 @@
   .top-7 {
     top: calc(var(--spacing) * 7);
   }
+  .top-12 {
+    top: calc(var(--spacing) * 12);
+  }
   .top-13 {
     top: calc(var(--spacing) * 13);
   }
@@ -411,9 +419,15 @@
   .right-0 {
     right: 0;
   }
+  .right-1 {
+    right: var(--spacing);
+  }
   .right-2 {
     right: calc(var(--spacing) * 2);
   }
+  .right-3 {
+    right: calc(var(--spacing) * 3);
+  }
   .right-4 {
     right: calc(var(--spacing) * 4);
   }
@@ -441,6 +455,9 @@
   .left-3 {
     left: calc(var(--spacing) * 3);
   }
+  .left-4 {
+    left: calc(var(--spacing) * 4);
+  }
   .z-10 {
     z-index: 10;
   }
@@ -459,72 +476,6 @@
   .col-start-3 {
     grid-column-start: 3;
   }
-  .container {
-    width: 100%;
-    @media (width >= 100px) {
-      max-width: 100px;
-    }
-    @media (width >= 200px) {
-      max-width: 200px;
-    }
-    @media (width >= 300px) {
-      max-width: 300px;
-    }
-    @media (width >= 350px) {
-      max-width: 350px;
-    }
-    @media (width >= 400px) {
-      max-width: 400px;
-    }
-    @media (width >= 432px) {
-      max-width: 432px;
-    }
-    @media (width >= 450px) {
-      max-width: 450px;
-    }
-    @media (width >= 500px) {
-      max-width: 500px;
-    }
-    @media (width >= 600px) {
-      max-width: 600px;
-    }
-    @media (width >= 700px) {
-      max-width: 700px;
-    }
-    @media (width >= 800px) {
-      max-width: 800px;
-    }
-    @media (width >= 900px) {
-      max-width: 900px;
-    }
-    @media (width >= 1000px) {
-      max-width: 1000px;
-    }
-    @media (width >= 1200px) {
-      max-width: 1200px;
-    }
-    @media (width >= 30rem) {
-      max-width: 30rem;
-    }
-    @media (width >= 40rem) {
-      max-width: 40rem;
-    }
-    @media (width >= 48rem) {
-      max-width: 48rem;
-    }
-    @media (width >= 64rem) {
-      max-width: 64rem;
-    }
-    @media (width >= 80rem) {
-      max-width: 80rem;
-    }
-    @media (width >= 100rem) {
-      max-width: 100rem;
-    }
-    @media (width >= 120rem) {
-      max-width: 120rem;
-    }
-  }
   .m-auto {
     margin: auto;
   }
@@ -1643,9 +1594,18 @@
   .-ml-4 {
     margin-left: calc(var(--spacing) * -4);
   }
+  .ml-0 {
+    margin-left: 0;
+  }
   .ml-1 {
     margin-left: var(--spacing);
   }
+  .ml-3 {
+    margin-left: calc(var(--spacing) * 3);
+  }
+  .ml-6 {
+    margin-left: calc(var(--spacing) * 6);
+  }
   .ml-auto {
     margin-left: auto;
   }
@@ -1741,6 +1701,9 @@
   .h-16 {
     height: calc(var(--spacing) * 16);
   }
+  .h-20 {
+    height: calc(var(--spacing) * 20);
+  }
   .h-32 {
     height: calc(var(--spacing) * 32);
   }
@@ -1759,6 +1722,9 @@
   .max-h-60 {
     max-height: calc(var(--spacing) * 60);
   }
+  .max-h-96 {
+    max-height: calc(var(--spacing) * 96);
+  }
   .max-h-\[9999px\] {
     max-height: 9999px;
   }
@@ -1822,6 +1788,9 @@
   .w-16 {
     width: calc(var(--spacing) * 16);
   }
+  .w-20 {
+    width: calc(var(--spacing) * 20);
+  }
   .w-44 {
     width: calc(var(--spacing) * 44);
   }
@@ -1846,12 +1815,18 @@
   .w-full {
     width: 100%;
   }
+  .max-w-0 {
+    max-width: 0;
+  }
   .max-w-2xl {
     max-width: var(--container-2xl);
   }
   .max-w-6xl {
     max-width: var(--container-6xl);
   }
+  .max-w-48 {
+    max-width: calc(var(--spacing) * 48);
+  }
   .max-w-60 {
     max-width: calc(var(--spacing) * 60);
   }
@@ -1861,6 +1836,9 @@
   .max-w-200 {
     max-width: calc(var(--spacing) * 200);
   }
+  .max-w-lg {
+    max-width: var(--container-lg);
+  }
   .max-w-md {
     max-width: var(--container-md);
   }
@@ -1876,6 +1854,9 @@
   .min-w-0 {
     min-width: 0;
   }
+  .min-w-6 {
+    min-width: calc(var(--spacing) * 6);
+  }
   .min-w-8 {
     min-width: calc(var(--spacing) * 8);
   }
@@ -1921,6 +1902,10 @@
     --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .translate-x-1 {
+    --tw-translate-x: var(--spacing);
+    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);
@@ -1937,12 +1922,21 @@
     --tw-translate-y: 0;
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .scale-75 {
+    --tw-scale-x: 75%;
+    --tw-scale-y: 75%;
+    --tw-scale-z: 75%;
+    scale: var(--tw-scale-x) var(--tw-scale-y);
+  }
   .scale-100 {
     --tw-scale-x: 100%;
     --tw-scale-y: 100%;
     --tw-scale-z: 100%;
     scale: var(--tw-scale-x) var(--tw-scale-y);
   }
+  .scale-\[1\.01\] {
+    scale: 1.01;
+  }
   .scale-\[1\.9\] {
     scale: 1.9;
   }
@@ -1969,6 +1963,9 @@
   .animate-ping {
     animation: var(--animate-ping);
   }
+  .animate-spin {
+    animation: var(--animate-spin);
+  }
   .cursor-crosshair {
     cursor: crosshair;
   }
@@ -2023,6 +2020,9 @@
   .justify-end {
     justify-content: flex-end;
   }
+  .gap-0 {
+    gap: 0;
+  }
   .gap-0\.5 {
     gap: calc(var(--spacing) * 0.5);
   }
@@ -2101,6 +2101,12 @@
   .overflow-hidden {
     overflow: hidden;
   }
+  .overflow-x-auto {
+    overflow-x: auto;
+  }
+  .overflow-x-hidden {
+    overflow-x: hidden;
+  }
   .overflow-y-auto {
     overflow-y: auto;
   }
@@ -2139,18 +2145,34 @@
     border-style: var(--tw-border-style);
     border-width: 2px;
   }
+  .border-\[3px\] {
+    border-style: var(--tw-border-style);
+    border-width: 3px;
+  }
   .border-t {
     border-top-style: var(--tw-border-style);
     border-top-width: 1px;
   }
+  .border-r {
+    border-right-style: var(--tw-border-style);
+    border-right-width: 1px;
+  }
   .border-b {
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 1px;
   }
+  .border-l {
+    border-left-style: var(--tw-border-style);
+    border-left-width: 1px;
+  }
   .border-l-2 {
     border-left-style: var(--tw-border-style);
     border-left-width: 2px;
   }
+  .border-dashed {
+    --tw-border-style: dashed;
+    border-style: dashed;
+  }
   .border-none {
     --tw-border-style: none;
     border-style: none;
@@ -2161,6 +2183,12 @@
   .border-login {
     border-color: var(--color-login);
   }
+  .border-login-100\/10 {
+    border-color: color-mix(in srgb, #b0b0b0 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-login-100) 10%, transparent);
+    }
+  }
   .border-login-200 {
     border-color: var(--color-login-200);
   }
@@ -2221,6 +2249,9 @@
       border-color: color-mix(in oklab, var(--color-login-600) 20%, transparent);
     }
   }
+  .border-login-800 {
+    border-color: var(--color-login-800);
+  }
   .border-login\/50 {
     border-color: color-mix(in srgb, #fd8738 50%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2245,6 +2276,15 @@
   .border-white {
     border-color: var(--color-white);
   }
+  .border-white\/5 {
+    border-color: color-mix(in srgb, #fff 5%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-white) 5%, transparent);
+    }
+  }
+  .border-t-login {
+    border-top-color: var(--color-login);
+  }
   .border-l-amber-500 {
     border-left-color: var(--color-amber-500);
   }
@@ -2275,6 +2315,12 @@
       background-color: color-mix(in oklab, var(--color-amber-500) 10%, transparent);
     }
   }
+  .bg-amber-500\/15 {
+    background-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 15%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-amber-500) 15%, transparent);
+    }
+  }
   .bg-black\/50 {
     background-color: color-mix(in srgb, #000 50%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2296,6 +2342,12 @@
       background-color: color-mix(in oklab, var(--color-emerald-500) 10%, transparent);
     }
   }
+  .bg-emerald-500\/15 {
+    background-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 15%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-emerald-500) 15%, transparent);
+    }
+  }
   .bg-gray-500\/15 {
     background-color: color-mix(in srgb, oklch(55.1% 0.027 264.364) 15%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2338,6 +2390,12 @@
   .bg-login-600 {
     background-color: var(--color-login-600);
   }
+  .bg-login-600\/30 {
+    background-color: color-mix(in srgb, #212121 30%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-login-600) 30%, transparent);
+    }
+  }
   .bg-login-700 {
     background-color: var(--color-login-700);
   }
@@ -2356,6 +2414,24 @@
   .bg-login-800 {
     background-color: var(--color-login-800);
   }
+  .bg-login-800\/30 {
+    background-color: color-mix(in srgb, #181818 30%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-login-800) 30%, transparent);
+    }
+  }
+  .bg-login-800\/50 {
+    background-color: color-mix(in srgb, #181818 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-login-800) 50%, transparent);
+    }
+  }
+  .bg-login-800\/60 {
+    background-color: color-mix(in srgb, #181818 60%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-login-800) 60%, transparent);
+    }
+  }
   .bg-login-900 {
     background-color: var(--color-login-900);
   }
@@ -2365,12 +2441,6 @@
       background-color: color-mix(in oklab, var(--color-login-900) 20%, transparent);
     }
   }
-  .bg-login-900\/95 {
-    background-color: color-mix(in srgb, #121212 95%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-login-900) 95%, transparent);
-    }
-  }
   .bg-login-950 {
     background-color: var(--color-login-950);
   }
@@ -2428,6 +2498,12 @@
       background-color: color-mix(in oklab, var(--color-sky-500) 10%, transparent);
     }
   }
+  .bg-sky-500\/15 {
+    background-color: color-mix(in srgb, oklch(68.5% 0.169 237.323) 15%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-sky-500) 15%, transparent);
+    }
+  }
   .bg-transparent {
     background-color: transparent;
   }
@@ -2437,6 +2513,12 @@
       background-color: color-mix(in oklab, var(--color-violet-500) 10%, transparent);
     }
   }
+  .bg-violet-500\/15 {
+    background-color: color-mix(in srgb, oklch(60.6% 0.25 292.717) 15%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-violet-500) 15%, transparent);
+    }
+  }
   .bg-white {
     background-color: var(--color-white);
   }
@@ -2499,6 +2581,9 @@
   .stroke-blue-400 {
     stroke: var(--color-blue-400);
   }
+  .stroke-emerald-400 {
+    stroke: var(--color-emerald-400);
+  }
   .stroke-login {
     stroke: var(--color-login);
   }
@@ -2544,6 +2629,9 @@
   .p-8 {
     padding: calc(var(--spacing) * 8);
   }
+  .px-1\.5 {
+    padding-inline: calc(var(--spacing) * 1.5);
+  }
   .px-2 {
     padding-inline: calc(var(--spacing) * 2);
   }
@@ -2556,6 +2644,9 @@
   .px-4 {
     padding-inline: calc(var(--spacing) * 4);
   }
+  .px-5 {
+    padding-inline: calc(var(--spacing) * 5);
+  }
   .px-6 {
     padding-inline: calc(var(--spacing) * 6);
   }
@@ -2601,6 +2692,9 @@
   .pt-4 {
     padding-top: calc(var(--spacing) * 4);
   }
+  .pt-5 {
+    padding-top: calc(var(--spacing) * 5);
+  }
   .pt-8 {
     padding-top: calc(var(--spacing) * 8);
   }
@@ -2622,9 +2716,15 @@
   .pb-4 {
     padding-bottom: calc(var(--spacing) * 4);
   }
+  .pb-5 {
+    padding-bottom: calc(var(--spacing) * 5);
+  }
   .pb-24 {
     padding-bottom: calc(var(--spacing) * 24);
   }
+  .pl-2 {
+    padding-left: calc(var(--spacing) * 2);
+  }
   .pl-3 {
     padding-left: calc(var(--spacing) * 3);
   }
@@ -3084,6 +3184,13 @@
       line-height: var(--tw-leading, var(--text-xs--line-height)) !important;
     }
   }
+  .group-hover\:text-login {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        color: var(--color-login);
+      }
+    }
+  }
   .group-hover\:opacity-0 {
     &:is(:where(.group):hover *) {
       @media (hover: hover) {
@@ -3267,6 +3374,16 @@
       }
     }
   }
+  .hover\:border-login\/50 {
+    &:hover {
+      @media (hover: hover) {
+        border-color: color-mix(in srgb, #fd8738 50%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          border-color: color-mix(in oklab, var(--color-login) 50%, transparent);
+        }
+      }
+    }
+  }
   .hover\:bg-gray-400\/10 {
     &:hover {
       @media (hover: hover) {
@@ -3372,6 +3489,43 @@
       }
     }
   }
+  .hover\:bg-login-800 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-login-800);
+      }
+    }
+  }
+  .hover\:bg-login-800\/30 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, #181818 30%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-login-800) 30%, transparent);
+        }
+      }
+    }
+  }
+  .hover\:bg-login-800\/50 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, #181818 50%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-login-800) 50%, transparent);
+        }
+      }
+    }
+  }
+  .hover\:bg-login\/5 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, #fd8738 5%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-login) 5%, transparent);
+        }
+      }
+    }
+  }
   .hover\:bg-login\/80 {
     &:hover {
       @media (hover: hover) {
@@ -3417,6 +3571,13 @@
       }
     }
   }
+  .hover\:text-login-100 {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-login-100);
+      }
+    }
+  }
   .hover\:text-login-200 {
     &:hover {
       @media (hover: hover) {
@@ -3817,6 +3978,20 @@
       width: calc(var(--spacing) * 4);
     }
   }
+  .\[\&\>svg\]\:stroke-login {
+    &>svg {
+      stroke: var(--color-login);
+    }
+  }
+  .group-hover\:\[\&\>svg\]\:stroke-login-100 {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        &>svg {
+          stroke: var(--color-login-100);
+        }
+      }
+    }
+  }
 }
 :root {
   transition: background 0.4s,
@@ -4215,6 +4390,11 @@ input::-ms-clear {
   syntax: "*";
   inherits: false;
 }
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
 @keyframes ping {
   75%,
       100% {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uibee",
-  "version": "3.1.5",
+  "version": "3.2.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/badge/badge.tsx

@@ -0,0 +1,44 @@
+type BadgeVariant =
+    | 'default'
+    | 'success'
+    | 'warning'
+    | 'danger'
+    | 'info'
+    | 'amber'
+    | 'violet'
+    | 'blue'
+    | 'emerald'
+    | 'orange'
+
+type BadgeProps = {
+    text: string
+    variant?: BadgeVariant
+    size?: 'sm' | 'md'
+    className?: string
+}
+
+const variants: Record<BadgeVariant, string> = {
+    default:  'bg-login-600 text-login-100',
+    success:  'bg-emerald-500/15 text-emerald-400',
+    warning:  'bg-yellow-500/15 text-yellow-400',
+    danger:   'bg-red-500/15 text-red-400',
+    info:     'bg-sky-500/15 text-sky-400',
+    amber:    'bg-amber-500/15 text-amber-400',
+    violet:   'bg-violet-500/15 text-violet-400',
+    blue:     'bg-blue-500/15 text-blue-400',
+    emerald:  'bg-emerald-500/15 text-emerald-400',
+    orange:   'bg-login/15 text-login',
+}
+
+const sizes = {
+    sm: 'px-2 py-0.5 text-xs',
+    md: 'px-2.5 py-1 text-sm',
+}
+
+export default function Badge({ text, variant = 'default', size = 'sm', className = '' }: BadgeProps) {
+    return (
+        <span className={`inline-flex items-center rounded-full font-medium ${variants[variant]} ${sizes[size]} ${className}`}>
+            {text}
+        </span>
+    )
+}

package/src/components/buttons/button.tsx

@@ -21,7 +21,8 @@ const variants = {
     info:      'bg-blue-600 text-white hover:brightness-110',
 }
 
-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 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'