uibee 1.4.2 → 1.5.0

package/Readme.md

@@ -3,21 +3,13 @@
 
 This package includes shared components, functions and hooks for reuse across Login projects.
 
-## Installation
+## Getting Started
 
 ```bash
-# Clone the repository
-git clone git@github.com:Login-Linjeforening-for-IT/uibee.git
-cd uibee
-
 # Install dependencies
 npm install
-```
 
-## Usage
-
-```bash
-# Start the development server
+# Build the project
 npm run build
 ```
 

package/dist/globals.css

@@ -8,10 +8,14 @@
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
       "Courier New", monospace;
     --color-red-300: oklch(80.8% 0.114 19.571);
+    --color-red-500: oklch(63.7% 0.237 25.331);
+    --color-red-700: oklch(50.5% 0.213 27.518);
+    --color-red-800: oklch(44.4% 0.177 26.899);
     --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);
     --spacing: 0.25rem;
+    --container-3xs: 16rem;
     --container-xs: 20rem;
     --container-sm: 24rem;
     --container-md: 28rem;
@@ -25,6 +29,8 @@
     --font-weight-bold: 700;
     --font-weight-extrabold: 800;
     --tracking-tight: -0.025em;
+    --radius-sm: 0.25rem;
+    --radius-md: 0.375rem;
     --radius-lg: 0.5rem;
     --radius-xl: 0.75rem;
     --default-transition-duration: 150ms;
@@ -36,6 +42,7 @@
     --color-login-800: #181818;
     --color-login-700: #1a1a1a;
     --color-login-600: #212121;
+    --color-login-200: #727272;
     --color-login-100: #b0b0b0;
     --color-login-50: #ededed;
   }
@@ -189,18 +196,65 @@
   }
 }
 @layer utilities {
+  .pointer-events-none {
+    pointer-events: none;
+  }
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border-width: 0;
+  }
+  .absolute {
+    position: absolute;
+  }
   .fixed {
     position: fixed;
   }
   .relative {
     position: relative;
   }
+  .start-2 {
+    inset-inline-start: calc(var(--spacing) * 2);
+  }
+  .top-1\/2 {
+    top: calc(1/2 * 100%);
+  }
+  .top-2 {
+    top: calc(var(--spacing) * 2);
+  }
+  .right-0 {
+    right: calc(var(--spacing) * 0);
+  }
+  .right-1 {
+    right: calc(var(--spacing) * 1);
+  }
   .right-4 {
     right: calc(var(--spacing) * 4);
   }
   .bottom-4 {
     bottom: calc(var(--spacing) * 4);
   }
+  .left-2 {
+    left: calc(var(--spacing) * 2);
+  }
+  .left-12 {
+    left: calc(var(--spacing) * 12);
+  }
+  .z-10 {
+    z-index: 10;
+  }
+  .z-19 {
+    z-index: 19;
+  }
+  .z-20 {
+    z-index: 20;
+  }
   .z-50 {
     z-index: 50;
   }
@@ -210,21 +264,36 @@
   .mb-2 {
     margin-bottom: calc(var(--spacing) * 2);
   }
+  .ml-1 {
+    margin-left: calc(var(--spacing) * 1);
+  }
+  .ml-3 {
+    margin-left: calc(var(--spacing) * 3);
+  }
   .line-clamp-3 {
     overflow: hidden;
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 3;
   }
+  .block {
+    display: block;
+  }
   .flex {
     display: flex;
   }
+  .hidden {
+    display: none;
+  }
   .inline {
     display: inline;
   }
   .aspect-\[3\/1\] {
     aspect-ratio: 3/1;
   }
+  .h-4 {
+    height: calc(var(--spacing) * 4);
+  }
   .h-6 {
     height: calc(var(--spacing) * 6);
   }
@@ -234,36 +303,96 @@
   .min-h-screen {
     min-height: 100vh;
   }
+  .w-4 {
+    width: calc(var(--spacing) * 4);
+  }
+  .w-5 {
+    width: calc(var(--spacing) * 5);
+  }
   .w-6 {
     width: calc(var(--spacing) * 6);
   }
   .w-10 {
     width: calc(var(--spacing) * 10);
   }
+  .w-\[calc\(100\%-10px\)\] {
+    width: calc(100% - 10px);
+  }
+  .w-fit {
+    width: fit-content;
+  }
   .w-full {
     width: 100%;
   }
+  .w-max {
+    width: max-content;
+  }
   .w-sm {
     width: var(--container-sm);
   }
+  .max-w-3xs {
+    max-width: var(--container-3xs);
+  }
   .max-w-md {
     max-width: var(--container-md);
   }
   .max-w-xs {
     max-width: var(--container-xs);
   }
+  .min-w-\[6ch\] {
+    min-width: 6ch;
+  }
+  .flex-1 {
+    flex: 1;
+  }
   .flex-shrink-0 {
     flex-shrink: 0;
   }
+  .origin-\[0\] {
+    transform-origin: 0;
+  }
+  .translate-x-4 {
+    --tw-translate-x: calc(var(--spacing) * 4);
+    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-5 {
+    --tw-translate-y: calc(var(--spacing) * -5);
+    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);
+  }
   .transform {
     transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
   }
+  .cursor-pointer {
+    cursor: pointer;
+  }
+  .appearance-none {
+    appearance: none;
+  }
   .flex-col {
     flex-direction: column;
   }
   .flex-col-reverse {
     flex-direction: column-reverse;
   }
+  .flex-wrap {
+    flex-wrap: wrap;
+  }
   .items-center {
     align-items: center;
   }
@@ -273,6 +402,12 @@
   .justify-center {
     justify-content: center;
   }
+  .gap-0\.5 {
+    gap: calc(var(--spacing) * 0.5);
+  }
+  .gap-1 {
+    gap: calc(var(--spacing) * 1);
+  }
   .gap-2 {
     gap: calc(var(--spacing) * 2);
   }
@@ -282,18 +417,49 @@
   .gap-4 {
     gap: calc(var(--spacing) * 4);
   }
+  .truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
   .rounded {
     border-radius: 0.25rem;
   }
+  .rounded-full {
+    border-radius: calc(infinity * 1px);
+  }
   .rounded-lg {
     border-radius: var(--radius-lg);
   }
+  .rounded-md {
+    border-radius: var(--radius-md);
+  }
+  .rounded-sm {
+    border-radius: var(--radius-sm);
+  }
   .rounded-xl {
     border-radius: var(--radius-xl);
   }
+  .border {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+  }
+  .border-\[0\.10rem\] {
+    border-style: var(--tw-border-style);
+    border-width: 0.10rem;
+  }
+  .border-login-200 {
+    border-color: var(--color-login-200);
+  }
   .bg-login {
     background-color: var(--color-login);
   }
+  .bg-login-50 {
+    background-color: var(--color-login-50);
+  }
+  .bg-login-200 {
+    background-color: var(--color-login-200);
+  }
   .bg-login-600 {
     background-color: var(--color-login-600);
   }
@@ -306,15 +472,33 @@
   .bg-login-900 {
     background-color: var(--color-login-900);
   }
+  .bg-transparent {
+    background-color: transparent;
+  }
+  .stroke-3 {
+    stroke-width: 3;
+  }
   .object-contain {
     object-fit: contain;
   }
+  .p-1 {
+    padding: calc(var(--spacing) * 1);
+  }
   .p-2 {
     padding: calc(var(--spacing) * 2);
   }
   .p-8 {
     padding: calc(var(--spacing) * 8);
   }
+  .px-1 {
+    padding-inline: calc(var(--spacing) * 1);
+  }
+  .px-2 {
+    padding-inline: calc(var(--spacing) * 2);
+  }
+  .px-2\.5 {
+    padding-inline: calc(var(--spacing) * 2.5);
+  }
   .px-3 {
     padding-inline: calc(var(--spacing) * 3);
   }
@@ -324,6 +508,12 @@
   .px-6 {
     padding-inline: calc(var(--spacing) * 6);
   }
+  .py-0\.5 {
+    padding-block: calc(var(--spacing) * 0.5);
+  }
+  .py-1 {
+    padding-block: calc(var(--spacing) * 1);
+  }
   .py-2 {
     padding-block: calc(var(--spacing) * 2);
   }
@@ -333,12 +523,24 @@
   .py-12 {
     padding-block: calc(var(--spacing) * 12);
   }
+  .pt-1 {
+    padding-top: calc(var(--spacing) * 1);
+  }
+  .pt-3 {
+    padding-top: calc(var(--spacing) * 3);
+  }
+  .pt-4 {
+    padding-top: calc(var(--spacing) * 4);
+  }
   .pr-1 {
     padding-right: calc(var(--spacing) * 1);
   }
   .pb-1 {
     padding-bottom: calc(var(--spacing) * 1);
   }
+  .pb-2\.5 {
+    padding-bottom: calc(var(--spacing) * 2.5);
+  }
   .text-center {
     text-align: center;
   }
@@ -397,12 +599,30 @@
       color: color-mix(in oklab, var(--color-red-300) 70%, transparent);
     }
   }
+  .text-red-500\/50 {
+    color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+    }
+  }
+  .text-red-700 {
+    color: var(--color-red-700);
+  }
   .text-yellow-300\/70 {
     color: color-mix(in srgb, oklch(90.5% 0.182 98.111) 70%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
       color: color-mix(in oklab, var(--color-yellow-300) 70%, transparent);
     }
   }
+  .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);
+  }
+  .transition {
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .transition-all {
     transition-property: all;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -412,6 +632,71 @@
     --tw-duration: 200ms;
     transition-duration: 200ms;
   }
+  .duration-300 {
+    --tw-duration: 300ms;
+    transition-duration: 300ms;
+  }
+  .outline-none {
+    --tw-outline-style: none;
+    outline-style: none;
+  }
+  .group-\[\.submitPressed\]\:text-red-500\/50 {
+    &:is(:where(.group):is(.submitPressed) *) {
+      color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 50%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+      }
+    }
+  }
+  .peer-hover\:block {
+    &:is(:where(.peer):hover ~ *) {
+      @media (hover: hover) {
+        display: block;
+      }
+    }
+  }
+  .peer-focus\:top-2 {
+    &:is(:where(.peer):focus ~ *) {
+      top: calc(var(--spacing) * 2);
+    }
+  }
+  .peer-focus\:w-fit {
+    &:is(:where(.peer):focus ~ *) {
+      width: fit-content;
+    }
+  }
+  .peer-focus\:-translate-y-5 {
+    &:is(:where(.peer):focus ~ *) {
+      --tw-translate-y: calc(var(--spacing) * -5);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  }
+  .peer-focus\:scale-75 {
+    &:is(:where(.peer):focus ~ *) {
+      --tw-scale-x: 75%;
+      --tw-scale-y: 75%;
+      --tw-scale-z: 75%;
+      scale: var(--tw-scale-x) var(--tw-scale-y);
+    }
+  }
+  .peer-focus\:px-2 {
+    &:is(:where(.peer):focus ~ *) {
+      padding-inline: calc(var(--spacing) * 2);
+    }
+  }
+  .after\:content-\[\"_\*\"\] {
+    &::after {
+      --tw-content: " *";
+      content: var(--tw-content);
+    }
+  }
+  .hover\:bg-login-600 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-login-600);
+      }
+    }
+  }
   .hover\:bg-login\/80 {
     &:hover {
       @media (hover: hover) {
@@ -422,6 +707,24 @@
       }
     }
   }
+  .hover\:text-red-800 {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-red-800);
+      }
+    }
+  }
+  .focus\:border-login-50 {
+    &:focus {
+      border-color: var(--color-login-50);
+    }
+  }
+  .focus\:ring-0 {
+    &:focus {
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
   .focus\:outline-none {
     &:focus {
       --tw-outline-style: none;
@@ -480,6 +783,36 @@ body {
   background: var(--background);
   font-family: Arial, Helvetica, sans-serif;
 }
+@property --tw-translate-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-translate-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-translate-z {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-scale-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-scale-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-scale-z {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
 @property --tw-rotate-x {
   syntax: "*";
   inherits: false;
@@ -500,6 +833,11 @@ body {
   syntax: "*";
   inherits: false;
 }
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
 @property --tw-font-weight {
   syntax: "*";
   inherits: false;
@@ -508,21 +846,113 @@ body {
   syntax: "*";
   inherits: false;
 }
+@property --tw-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-inset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-ring-inset {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-offset-width {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+@property --tw-ring-offset-color {
+  syntax: "*";
+  inherits: false;
+  initial-value: #fff;
+}
+@property --tw-ring-offset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
 @property --tw-duration {
   syntax: "*";
   inherits: false;
 }
+@property --tw-content {
+  syntax: "*";
+  initial-value: "";
+  inherits: false;
+}
 @layer properties {
   @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
     *, ::before, ::after, ::backdrop {
+      --tw-translate-x: 0;
+      --tw-translate-y: 0;
+      --tw-translate-z: 0;
+      --tw-scale-x: 1;
+      --tw-scale-y: 1;
+      --tw-scale-z: 1;
       --tw-rotate-x: initial;
       --tw-rotate-y: initial;
       --tw-rotate-z: initial;
       --tw-skew-x: initial;
       --tw-skew-y: initial;
+      --tw-border-style: solid;
       --tw-font-weight: initial;
       --tw-tracking: initial;
+      --tw-shadow: 0 0 #0000;
+      --tw-shadow-color: initial;
+      --tw-shadow-alpha: 100%;
+      --tw-inset-shadow: 0 0 #0000;
+      --tw-inset-shadow-color: initial;
+      --tw-inset-shadow-alpha: 100%;
+      --tw-ring-color: initial;
+      --tw-ring-shadow: 0 0 #0000;
+      --tw-inset-ring-color: initial;
+      --tw-inset-ring-shadow: 0 0 #0000;
+      --tw-ring-inset: initial;
+      --tw-ring-offset-width: 0px;
+      --tw-ring-offset-color: #fff;
+      --tw-ring-offset-shadow: 0 0 #0000;
       --tw-duration: initial;
+      --tw-content: "";
     }
   }
 }

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

@@ -1,2 +1,5 @@
 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';

package/dist/src/components/index.js

@@ -1,2 +1,6 @@
 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';

package/dist/src/components/inputs/erase.d.ts

@@ -0,0 +1,3 @@
+export default function EraseButton({ setData }: {
+    setData: (data: string) => void;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/inputs/erase.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Eraser } from 'lucide-react';
+export default function EraseButton({ setData }) {
+    return (_jsx("button", { type: 'button', onClick: () => setData(''), className: 'absolute right-1 cursor-pointer px-2 py-1 bg-login-800 hover:bg-login-600 rounded-md', children: _jsx(Eraser, { className: 'w-5' }) }));
+}

package/dist/src/components/inputs/input.d.ts

@@ -0,0 +1,14 @@
+import { HTMLInputTypeAttribute } from 'react';
+type InputProps = {
+    name: string;
+    type: HTMLInputTypeAttribute;
+    label: string;
+    value?: string | number;
+    setValue: (value: string | number) => void;
+    className?: string;
+    tooltip?: string;
+    required?: boolean;
+    color?: string;
+};
+export default function Input({ name, type, label, className, tooltip, required, value, setValue, color }: InputProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/components/inputs/input.js

@@ -0,0 +1,11 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import ToolTip from './tooltip';
+import Label from './label';
+import EraseButton from './erase';
+export default function Input({ name, type, label, className, tooltip, required, value, setValue, color }) {
+    const [hasBlured, setHasBlured] = useState(false);
+    return (_jsx("div", { className: `w-full ${className}`, children: _jsxs("div", { className: 'relative flex items-center', children: [_jsx("input", { name: name, type: type, className: 'block bg-login-800 px-2.5 pb-2.5 pt-4 w-full text-sm rounded-lg border-[0.10rem] appearance-none ' +
+                        'border-login-200 focus:outline-none focus:ring-0 focus:border-login-50 peer', value: value || '', onChange: (e) => setValue(e.target.value), onFocus: (e) => e.target.showPicker(), onBlur: () => setHasBlured(true), placeholder: '', required: required }), _jsx(Label, { label: label, value: value, required: required, color: color, showRequired: required && !value && hasBlured }), value && _jsx(EraseButton, { setData: setValue }), !value && tooltip && _jsx(ToolTip, { info: tooltip })] }) }));
+}

package/dist/src/components/inputs/label.d.ts

@@ -0,0 +1,10 @@
+type labelProps = {
+    label: string;
+    value: any;
+    required?: boolean;
+    showRequired?: boolean;
+    className?: string;
+    color?: string;
+};
+export default function Label({ label, value, required, showRequired, className, color }: labelProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/components/inputs/label.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function Label({ label, value, required, showRequired, className, color }) {
+    return (_jsx("label", { className: 'w-[calc(100%-10px)] truncate pointer-events-none absolute text-sm duration-300 transform z-10 ' +
+            'peer-focus:px-2 peer-focus:top-2 origin-[0] px-2 pt-1 peer-focus:scale-75 peer-focus:-translate-y-5 start-2 ' +
+            `${color ? color : 'bg-login-800'} ` +
+            `${value ? '-translate-y-5 scale-75 top-2 w-fit '
+                : '-translate-y-1/2 scale-100 top-1/2 '
+                    + 'peer-focus:w-fit '} ${showRequired ? 'text-red-500/50 ' : ''} 
+                        ${!value &&
+                required ? 'group-[.submitPressed]:text-red-500/50 ' : ''}
+                        ${required ? 'after:content-["_*"] ' : ''}
+                        ${className}`, children: label }));
+}

package/dist/src/components/inputs/switch.d.ts

@@ -0,0 +1,10 @@
+type SwitchProps = {
+    name: string;
+    label: string;
+    value?: boolean;
+    setValue: (_: boolean) => void;
+    className?: string;
+    tooltip?: string;
+};
+export default function Switch({ name, label, value, className, tooltip, setValue }: SwitchProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/components/inputs/switch.js

@@ -0,0 +1,7 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import ToolTip from './tooltip';
+export default function Switch({ name, label, value, className, tooltip, setValue }) {
+    return (_jsxs("div", { className: `relative w-full flex items-center px-2.5 pb-2.5 pt-3 border-login-200 rounded-lg border-[0.10rem]
+            bg-login-800 ${className}`, children: [_jsxs("label", { className: 'flex items-center cursor-pointer', children: [_jsx("input", { type: 'checkbox', name: name, className: 'sr-only', checked: value, onChange: (e) => setValue(e.target.checked) }), _jsx("div", { className: `w-10 h-6  rounded-full p-1 transition ${value ? 'bg-login-50' : 'bg-login-200'}`, children: _jsx("div", { className: `w-4 h-4 bg-login-800 rounded-full shadow-md transform transition ${value ? 'translate-x-4' : ''}` }) })] }), _jsx("span", { className: 'ml-3 text-sm', children: label }), tooltip && _jsx(ToolTip, { info: tooltip })] }));
+}

package/dist/src/components/inputs/tag.d.ts

@@ -0,0 +1,11 @@
+type TagInputProps = {
+    name: string;
+    label: string;
+    value?: string[];
+    setValue: (_: string[]) => void;
+    className?: string;
+    tooltip?: string;
+    required?: boolean;
+};
+export default function TagInput({ name, label, value, className, tooltip, required, setValue, }: TagInputProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/components/inputs/tag.js

@@ -0,0 +1,44 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import ToolTip from './tooltip';
+import Label from './label';
+import EraseButton from './erase';
+import { X } from 'lucide-react';
+export default function TagInput({ name, label, value = [], className, tooltip, required, setValue, }) {
+    const original = value;
+    const [input, setInput] = useState('');
+    const [hasBlured, setHasBlured] = useState(false);
+    function addTag(value) {
+        const trimmed = value.trim();
+        if (trimmed && !value.includes(trimmed)) {
+            setValue([...value, trimmed]);
+        }
+    }
+    function removeTag(idx) {
+        setValue(value.filter((_, i) => i !== idx));
+    }
+    function handleKeyDown(e) {
+        if ((e.key === 'Enter' || e.key === ',' || e.key === 'Tab') &&
+            input.trim()) {
+            e.preventDefault();
+            addTag(input);
+            setInput('');
+        }
+        if (e.key === 'Backspace' && !input && value.length) {
+            setValue(value.slice(0, -1));
+        }
+    }
+    function handleErase() {
+        setValue([]);
+        setInput('');
+    }
+    const toRemove = original.filter((tag) => !value.includes(tag));
+    const toAdd = value.filter((tag) => !original.includes(tag));
+    return (_jsx("div", { className: `w-full ${className}`, children: _jsxs("div", { className: 'relative flex items-center flex-wrap gap-1 ' +
+                'border-[0.10rem] border-login-200 ' +
+                'rounded-lg ' +
+                'px-2.5 pt-3 pb-2.5 bg-login-800', children: [_jsxs("div", { className: 'flex flex-wrap gap-1 items-center w-full', children: [value.map((tag, idx) => (_jsxs("span", { className: 'bg-login-600 text-sm rounded px-2 ' +
+                                'py-0.5 flex items-center gap-0.5', children: [tag, _jsx("button", { type: 'button', className: 'ml-1 text-red-700 hover:text-red-800', onClick: () => removeTag(idx), children: _jsx(X, { className: 'h-4 stroke-3' }) })] }, tag + idx))), _jsx("input", { value: input, onChange: (e) => setInput(e.target.value), onKeyDown: handleKeyDown, onBlur: () => setHasBlured(true), className: 'peer flex-1 min-w-[6ch] bg-transparent ' +
+                                'outline-none text-sm', autoComplete: 'off', required: required && value.length === 0 }), toRemove.map((tag) => (_jsx("input", { type: 'hidden', name: name + '_remove', value: tag }, tag))), toAdd.map((tag) => (_jsx("input", { type: 'hidden', name: name + '_add', value: tag }, tag))), _jsx(Label, { label: label, value: value.length ? value.join(', ') : '', required: required, showRequired: required && value.length === 0 && hasBlured, className: 'pointer-events-none left-2' })] }), value.length > 0 && _jsx(EraseButton, { setData: handleErase }), value.length === 0 && tooltip && _jsx(ToolTip, { info: tooltip })] }) }));
+}

package/dist/src/components/inputs/tooltip.d.ts

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

package/dist/src/components/inputs/tooltip.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function ToolTip({ info, className }) {
+    return (_jsxs("div", { className: `absolute z-19 right-0 px-1 flex justify-center ${className}`, children: [_jsx("span", { className: 'peer cursor-pointer rounded-sm px-3 py-1 bg-login-800 hover:bg-login-600', children: "?" }), _jsx("div", { className: 'absolute hidden peer-hover:block p-2 rounded z-20 bg-login-700 border left-12 w-max max-w-3xs', children: info })] }));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uibee",
-  "version": "1.4.2",
+  "version": "1.5.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,2 +1,7 @@
 export { default as LoginPage } from './login/loginPage'
-export { default as Toaster, addToast } from './toast/toaster'
+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'

package/src/components/inputs/erase.tsx

@@ -0,0 +1,13 @@
+import { Eraser } from 'lucide-react'
+
+export default function EraseButton({ setData }: { setData: (data: string) => void }) {
+    return (
+        <button
+            type='button'
+            onClick={() => setData('')}
+            className={'absolute right-1 cursor-pointer px-2 py-1 bg-login-800 hover:bg-login-600 rounded-md'}
+        >
+            <Eraser className='w-5' />
+        </button>
+    )
+}

package/src/components/inputs/input.tsx

@@ -0,0 +1,52 @@
+'use client'
+
+import { HTMLInputTypeAttribute, useState } from 'react'
+import ToolTip from './tooltip'
+import Label from './label'
+import EraseButton from './erase'
+
+type InputProps = {
+    name: string
+    type: HTMLInputTypeAttribute
+    label: string
+    value?: string | number
+    setValue: (value: string | number) => void
+    className?: string
+    tooltip?: string
+    required?: boolean
+    color?: string
+}
+
+export default function Input({ name, type, label, className, tooltip, required, value, setValue, color }: InputProps) {
+    const [hasBlured, setHasBlured] = useState(false)
+
+    return (
+        <div className={`w-full ${className}`}>
+            <div className='relative flex items-center'>
+                <input
+                    name={name}
+                    type={type}
+                    className={
+                        'block bg-login-800 px-2.5 pb-2.5 pt-4 w-full text-sm rounded-lg border-[0.10rem] appearance-none ' +
+                        'border-login-200 focus:outline-none focus:ring-0 focus:border-login-50 peer'
+                    }
+                    value={value || ''}
+                    onChange={(e) => setValue(e.target.value)}
+                    onFocus={(e) => e.target.showPicker()}
+                    onBlur={() => setHasBlured(true)}
+                    placeholder=''
+                    required={required}
+                />
+                <Label
+                    label={label}
+                    value={value}
+                    required={required}
+                    color={color}
+                    showRequired={required && !value && hasBlured}
+                />
+                {value && <EraseButton setData={setValue} />}
+                {!value && tooltip && <ToolTip info={tooltip} />}
+            </div>
+        </div>
+    )
+}

package/src/components/inputs/label.tsx

@@ -0,0 +1,31 @@
+type labelProps = {
+    label: string
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    value: any
+    required?: boolean
+    showRequired?: boolean
+    className?: string
+    color?: string
+}
+
+export default function Label({ label, value, required, showRequired, className, color }: labelProps) {
+    return (
+        <label
+            className={
+                'w-[calc(100%-10px)] truncate pointer-events-none absolute text-sm duration-300 transform z-10 ' +
+                'peer-focus:px-2 peer-focus:top-2 origin-[0] px-2 pt-1 peer-focus:scale-75 peer-focus:-translate-y-5 start-2 ' +
+                `${color ? color : 'bg-login-800'} ` +
+                `${value ? '-translate-y-5 scale-75 top-2 w-fit '
+                    : '-translate-y-1/2 scale-100 top-1/2 '
+                    + 'peer-focus:w-fit '
+                } ${showRequired ? 'text-red-500/50 ' : ''} 
+                        ${!value &&
+                    required ? 'group-[.submitPressed]:text-red-500/50 ' : ''}
+                        ${required ? 'after:content-["_*"] ' : ''}
+                        ${className}`
+            }
+        >
+            {label}
+        </label>
+    )
+}

package/src/components/inputs/switch.tsx

@@ -0,0 +1,39 @@
+'use client'
+
+import ToolTip from './tooltip'
+
+type SwitchProps = {
+    name: string
+    label: string
+    value?: boolean
+    setValue: (_: boolean) => void
+    className?: string
+    tooltip?: string
+}
+
+export default function Switch({ name, label, value, className, tooltip, setValue }: SwitchProps) {
+    return (
+        <div className={`relative w-full flex items-center px-2.5 pb-2.5 pt-3 border-login-200 rounded-lg border-[0.10rem]
+            bg-login-800 ${className}`}
+        >
+            <label className='flex items-center cursor-pointer'>
+                <input
+                    type='checkbox'
+                    name={name}
+                    className='sr-only'
+                    checked={value}
+                    onChange={(e) => setValue(e.target.checked)}
+                />
+                <div className={`w-10 h-6  rounded-full p-1 transition ${value ? 'bg-login-50' : 'bg-login-200'}`}>
+                    <div
+                        className={`w-4 h-4 bg-login-800 rounded-full shadow-md transform transition ${value ? 'translate-x-4' : ''}`}
+                    />
+                </div>
+            </label>
+            <span className='ml-3 text-sm'>
+                {label}
+            </span>
+            {tooltip && <ToolTip info={tooltip} />}
+        </div>
+    )
+}

package/src/components/inputs/tag.tsx

@@ -0,0 +1,137 @@
+'use client'
+
+import { useState, KeyboardEvent } from 'react'
+import ToolTip from './tooltip'
+import Label from './label'
+import EraseButton from './erase'
+import { X } from 'lucide-react'
+
+type TagInputProps = {
+    name: string
+    label: string
+    value?: string[]
+    setValue: (_: string[]) => void
+    className?: string
+    tooltip?: string
+    required?: boolean
+}
+
+export default function TagInput({
+    name,
+    label,
+    value = [],
+    className,
+    tooltip,
+    required,
+    setValue,
+}: TagInputProps) {
+    const original = value
+    const [input, setInput] = useState('')
+    const [hasBlured, setHasBlured] = useState(false)
+
+    function addTag(value: string) {
+        const trimmed = value.trim()
+        if (trimmed && !value.includes(trimmed)) {
+            setValue([...value, trimmed])
+        }
+    }
+
+    function removeTag(idx: number) {
+        setValue(value.filter((_, i) => i !== idx))
+    }
+
+    function handleKeyDown(e: KeyboardEvent<HTMLInputElement>) {
+        if (
+            (e.key === 'Enter' || e.key === ',' || e.key === 'Tab') &&
+            input.trim()
+        ) {
+            e.preventDefault()
+            addTag(input)
+            setInput('')
+        }
+        if (e.key === 'Backspace' && !input && value.length) {
+            setValue(value.slice(0, -1))
+        }
+    }
+
+    function handleErase() {
+        setValue([])
+        setInput('')
+    }
+
+    const toRemove = original.filter((tag: string) => !value.includes(tag))
+    const toAdd = value.filter((tag: string) => !original.includes(tag))
+
+    return (
+        <div className={`w-full ${className}`}>
+            <div
+                className={
+                    'relative flex items-center flex-wrap gap-1 ' +
+                    'border-[0.10rem] border-login-200 ' +
+                    'rounded-lg ' +
+                    'px-2.5 pt-3 pb-2.5 bg-login-800'
+                }
+            >
+                <div className='flex flex-wrap gap-1 items-center w-full'>
+                    {value.map((tag, idx) => (
+                        <span
+                            key={tag + idx}
+                            className={
+                                'bg-login-600 text-sm rounded px-2 ' +
+                                'py-0.5 flex items-center gap-0.5'
+                            }
+                        >
+                            {tag}
+                            <button
+                                type='button'
+                                className='ml-1 text-red-700 hover:text-red-800'
+                                onClick={() => removeTag(idx)}
+                            >
+                                <X className='h-4 stroke-3' />
+                            </button>
+                        </span>
+                    ))}
+                    <input
+                        value={input}
+                        onChange={(e) => setInput(e.target.value)}
+                        onKeyDown={handleKeyDown}
+                        onBlur={() => setHasBlured(true)}
+                        className={
+                            'peer flex-1 min-w-[6ch] bg-transparent ' +
+                            'outline-none text-sm'
+                        }
+                        autoComplete='off'
+                        required={required && value.length === 0}
+                    />
+                    {toRemove.map((tag) => (
+                        <input
+                            key={tag}
+                            type='hidden'
+                            name={name + '_remove'}
+                            value={tag}
+                        />
+                    ))}
+                    {toAdd.map((tag) => (
+                        <input
+                            key={tag}
+                            type='hidden'
+                            name={name + '_add'}
+                            value={tag}
+                        />
+                    ))}
+                    <Label
+                        label={label}
+                        value={value.length ? value.join(', ') : ''}
+                        required={required}
+                        showRequired={
+                            required && value.length === 0 && hasBlured
+                        }
+                        className='pointer-events-none left-2'
+                    />
+                </div>
+                {value.length > 0 && <EraseButton setData={handleErase} />}
+                {value.length === 0 && tooltip && <ToolTip info={tooltip} />}
+            </div>
+        </div>
+    )
+}

package/src/components/inputs/tooltip.tsx

@@ -0,0 +1,12 @@
+export default function ToolTip({ info, className }: { info: string; className?: string }) {
+    return (
+        <div className={`absolute z-19 right-0 px-1 flex justify-center ${className}`}>
+            <span className={'peer cursor-pointer rounded-sm px-3 py-1 bg-login-800 hover:bg-login-600'}>
+                ?
+            </span>
+            <div className={'absolute hidden peer-hover:block p-2 rounded z-20 bg-login-700 border left-12 w-max max-w-3xs'}>
+                {info}
+            </div>
+        </div>
+    )
+}