uibee 2.7.11 → 2.7.13

package/dist/src/components/inputs/shared/selectionWrapper.d.ts

@@ -8,6 +8,7 @@ interface SelectionWrapperProps {
     children: ReactNode;
     className?: string;
     disabled?: boolean;
+    hideError?: boolean;
 }
-export default function SelectionWrapper({ label, name, required, info, error, children, className, disabled, }: SelectionWrapperProps): import("react/jsx-runtime").JSX.Element;
+export default function SelectionWrapper({ label, name, required, info, error, children, className, disabled, hideError, }: SelectionWrapperProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/src/components/inputs/shared/selectionWrapper.js

@@ -2,6 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import InputLabel from './inputLabel';
 import InputInfo from './inputInfo';
 import InputError from './inputError';
-export default function SelectionWrapper({ label, name, required, info, error, children, className, disabled, }) {
-    return (_jsxs("div", { className: `flex flex-col gap-1 ${className || ''}`, children: [_jsxs("div", { className: 'flex items-center justify-between mb-1', children: [_jsxs("div", { className: 'flex items-center gap-2', children: [children, label && (_jsx(InputLabel, { label: label, name: name, required: required, disabled: disabled, className: 'select-none cursor-pointer' }))] }), info && _jsx(InputInfo, { info: info })] }), _jsx(InputError, { error: error })] }));
+export default function SelectionWrapper({ label, name, required, info, error, children, className, disabled, hideError, }) {
+    return (_jsxs("div", { className: `flex flex-col gap-1 ${className || ''}`, children: [_jsxs("div", { className: 'flex items-center justify-between mb-1', children: [_jsxs("div", { className: 'flex items-center gap-2', children: [children, label && (_jsx(InputLabel, { label: label, name: name, required: required, disabled: disabled, className: 'select-none cursor-pointer' }))] }), info && _jsx(InputInfo, { info: info })] }), !hideError && _jsx(InputError, { error: error })] }));
 }

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

@@ -9,5 +9,6 @@ export type SwitchProps = {
     error?: string;
     info?: string;
     required?: boolean;
+    switchOnly?: boolean;
 };
-export default function Switch({ label, name, checked, onChange, className, disabled, error, info, required, }: SwitchProps): import("react/jsx-runtime").JSX.Element;
+export default function Switch({ label, name, checked, onChange, className, disabled, error, info, required, switchOnly, }: SwitchProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { SelectionWrapper } from './shared';
-export default function Switch({ label, name, checked, onChange, className, disabled, error, info, required, }) {
-    return (_jsx(SelectionWrapper, { label: label, name: name, required: required, info: info, error: error, className: className, disabled: disabled, children: _jsxs("label", { className: 'relative inline-flex items-center cursor-pointer h-10.5', children: [_jsx("input", { type: 'checkbox', id: name, name: name, checked: checked, onChange: onChange, disabled: disabled, required: required, className: 'sr-only peer' }), _jsx("div", { className: `
+export default function Switch({ label, name, checked, onChange, className, disabled, error, info, required, switchOnly, }) {
+    return (_jsx(SelectionWrapper, { label: label, name: name, required: required, info: info, error: error, hideError: switchOnly, className: className, disabled: disabled, children: _jsxs("label", { className: `relative inline-flex items-center cursor-pointer ${switchOnly ? 'h-fit' : 'h-10.5'}`, children: [_jsx("input", { type: 'checkbox', id: name, name: name, checked: checked, onChange: onChange, disabled: disabled, required: required, className: 'sr-only peer' }), _jsx("div", { className: `
                     w-11 h-6 bg-login-500/50 rounded-full peer 
                     peer-checked:after:translate-x-full peer-checked:after:border-white 
-                    after:content-[''] after:absolute after:top-2.75 after:left-0.5 
+                    after:content-[''] after:absolute ${switchOnly ? 'top-0.5' : 'top-2.75'} after:left-0.5 
                     after:bg-white after:border-gray-300 after:border after:rounded-full 
                     after:h-5 after:w-5 after:transition-all peer-checked:bg-login
                     ${disabled ? 'opacity-50 cursor-not-allowed' : ''}

package/dist/src/globals.css

@@ -297,12 +297,18 @@
   .top-0 {
     top: calc(var(--spacing) * 0);
   }
+  .top-0\.5 {
+    top: calc(var(--spacing) * 0.5);
+  }
   .top-1\/2 {
     top: calc(1/2 * 100%);
   }
   .top-2 {
     top: calc(var(--spacing) * 2);
   }
+  .top-2\.75 {
+    top: calc(var(--spacing) * 2.75);
+  }
   .top-4 {
     top: calc(var(--spacing) * 4);
   }
@@ -1084,6 +1090,9 @@
   .h-16 {
     height: calc(var(--spacing) * 16);
   }
+  .h-fit {
+    height: fit-content;
+  }
   .h-full {
     height: 100%;
   }
@@ -1873,12 +1882,6 @@
       position: absolute;
     }
   }
-  .after\:top-2\.75 {
-    &::after {
-      content: var(--tw-content);
-      top: calc(var(--spacing) * 2.75);
-    }
-  }
   .after\:left-0\.5 {
     &::after {
       content: var(--tw-content);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uibee",
-  "version": "2.7.11",
+  "version": "2.7.13",
   "description": "Shared components, functions and hooks for reuse across Login projects",
   "homepage": "https://github.com/Login-Linjeforening-for-IT/uibee#readme",
   "bugs": {

package/src/components/inputs/shared/selectionWrapper.tsx

@@ -12,6 +12,7 @@ interface SelectionWrapperProps {
     children: ReactNode
     className?: string
     disabled?: boolean
+    hideError?: boolean
 }
 
 export default function SelectionWrapper({
@@ -23,6 +24,7 @@ export default function SelectionWrapper({
     children,
     className,
     disabled,
+    hideError,
 }: SelectionWrapperProps) {
     return (
         <div className={`flex flex-col gap-1 ${className || ''}`}>
@@ -41,7 +43,7 @@ export default function SelectionWrapper({
                 </div>
                 {info && <InputInfo info={info} />}
             </div>
-            <InputError error={error} />
+            {!hideError && <InputError error={error} />}
         </div>
     )
 }

package/src/components/inputs/switch.tsx

@@ -11,6 +11,7 @@ export type SwitchProps = {
     error?: string
     info?: string
     required?: boolean
+    switchOnly?: boolean
 }
 
 export default function Switch({
@@ -23,6 +24,7 @@ export default function Switch({
     error,
     info,
     required,
+    switchOnly,
 }: SwitchProps) {
     return (
         <SelectionWrapper
@@ -31,10 +33,11 @@ export default function Switch({
             required={required}
             info={info}
             error={error}
+            hideError={switchOnly}
             className={className}
             disabled={disabled}
         >
-            <label className='relative inline-flex items-center cursor-pointer h-10.5'>
+            <label className={`relative inline-flex items-center cursor-pointer ${switchOnly ? 'h-fit' : 'h-10.5'}`}>
                 <input
                     type='checkbox'
                     id={name}
@@ -48,7 +51,7 @@ export default function Switch({
                 <div className={`
                     w-11 h-6 bg-login-500/50 rounded-full peer 
                     peer-checked:after:translate-x-full peer-checked:after:border-white 
-                    after:content-[''] after:absolute after:top-2.75 after:left-0.5 
+                    after:content-[''] after:absolute ${switchOnly ? 'top-0.5' : 'top-2.75'} after:left-0.5 
                     after:bg-white after:border-gray-300 after:border after:rounded-full 
                     after:h-5 after:w-5 after:transition-all peer-checked:bg-login
                     ${disabled ? 'opacity-50 cursor-not-allowed' : ''}