uibee 2.12.0 → 2.12.1

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Check } from 'lucide-react';
-import { SelectionWrapper, FieldWrapper } from './shared';
+import { FieldWrapper, InputLabel } from './shared';
 export default function Checkbox(props) {
     const { options, onChange, value, label, description, error, info, name, className, ...rest } = props;
     const selectedValues = Array.isArray(value) ? value : [];
@@ -19,18 +19,19 @@ export default function Checkbox(props) {
                 }, className: 'mb-0' }, option.value))) }) }));
 }
 function CheckboxItem(props) {
-    const { name, label, error, info, description, className, ...inputProps } = props;
+    const { name, label, error, ...inputProps } = props;
     const id = inputProps.value ? `${name}-${inputProps.value}` : name;
-    return (_jsx(SelectionWrapper, { label: label, name: id, required: inputProps.required, info: info, description: description, error: error, className: className, disabled: inputProps.disabled, children: _jsxs("div", { className: 'relative flex items-center', children: [_jsx("input", { ...inputProps, id: id, name: name, type: 'checkbox', className: `
-                        peer appearance-none h-5 w-5 rounded border border-login-500 bg-login-500/50
+    return (_jsxs("div", { className: 'flex items-center gap-2', children: [_jsxs("div", { className: 'relative w-5 h-5 shrink-0', children: [_jsx("input", { ...inputProps, id: id, name: name, type: 'checkbox', className: `
+                        peer appearance-none rounded border border-login-500 bg-login-500/50
                         checked:bg-login checked:border-login
                         focus:outline-none focus:ring-2 focus:ring-login/50
                         disabled:opacity-50 disabled:cursor-not-allowed
                         cursor-pointer transition-all duration-200
+                        w-5 h-5 absolute inset-0
                         ${error ? 'border-red-500' : ''}
                     ` }), _jsx(Check, { className: `
                         absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2
                         w-3.5 h-3.5 pointer-events-none text-white opacity-0
                         peer-checked:opacity-100 transition-opacity duration-200
-                    ` })] }) }));
+                    ` })] }), label && (_jsx(InputLabel, { label: label, name: name, className: 'select-none cursor-pointer' }))] }));
 }

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { SelectionWrapper, FieldWrapper } from './shared';
+import { FieldWrapper, InputLabel } from './shared';
 export default function Radio(props) {
     const { options, onChange, value, label, description, error, info, name, className, ...rest } = props;
     return (_jsx(FieldWrapper, { label: label, name: name, required: rest.required, info: info, description: description, error: error, className: className, children: _jsx("div", { className: 'flex flex-col gap-2', children: options.map((option) => (_jsx(RadioItem, { name: name, value: option.value, label: option.label, checked: value === option.value, disabled: rest.disabled, onChange: () => {
@@ -8,19 +8,20 @@ export default function Radio(props) {
                 }, className: 'mb-0' }, option.value))) }) }));
 }
 function RadioItem(props) {
-    const { name, label, error, info, description, className, ...inputProps } = props;
+    const { name, label, error, ...inputProps } = props;
     const { value } = inputProps;
     const id = `${name}-${value}`;
-    return (_jsx(SelectionWrapper, { label: label, name: id, required: inputProps.required, info: info, description: description, error: error, className: className, disabled: inputProps.disabled, children: _jsxs("div", { className: 'relative flex items-center', children: [_jsx("input", { ...inputProps, id: id, name: name, type: 'radio', className: `
-                        peer appearance-none h-5 w-5 rounded-full border border-login-500 bg-login-500/50
+    return (_jsxs("div", { className: 'flex items-center gap-2', children: [_jsxs("div", { className: 'relative w-5 h-5 shrink-0', children: [_jsx("input", { ...inputProps, id: id, name: name, type: 'radio', className: `
+                        peer appearance-none rounded-full border border-login-500 bg-login-500/50
                         checked:bg-login checked:border-login
                         focus:outline-none focus:ring-2 focus:ring-login/50
                         disabled:opacity-50 disabled:cursor-not-allowed
                         cursor-pointer transition-all duration-200
+                        w-5 h-5 absolute inset-0
                         ${error ? 'border-red-500' : ''}
                     ` }), _jsx("div", { className: `
                     absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2
                     w-2 h-2 rounded-full bg-white pointer-events-none opacity-0
                     peer-checked:opacity-100 transition-opacity duration-200
-                ` })] }) }));
+                ` })] }), label && (_jsx(InputLabel, { label: label, name: name, className: 'select-none cursor-pointer' }))] }));
 }

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

@@ -1,5 +1,4 @@
 export { default as FieldWrapper } from './fieldWrapper';
-export { default as SelectionWrapper } from './selectionWrapper';
 export { default as InputLabel } from './inputLabel';
 export { default as InputInfo } from './inputInfo';
 export { default as InputError } from './inputError';

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

@@ -1,5 +1,4 @@
 export { default as FieldWrapper } from './fieldWrapper';
-export { default as SelectionWrapper } from './selectionWrapper';
 export { default as InputLabel } from './inputLabel';
 export { default as InputInfo } from './inputInfo';
 export { default as InputError } from './inputError';

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

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { SelectionWrapper } from './shared';
+import { FieldWrapper } from './shared';
 export default function Switch(props) {
     const { name, label, error, info, description, className, switchOnly, ...inputProps } = props;
-    return (_jsx(SelectionWrapper, { label: label, name: name, required: inputProps.required, info: info, description: description, error: error, hideError: switchOnly, className: className, disabled: inputProps.disabled, children: _jsxs("label", { className: `relative inline-flex items-center cursor-pointer ${switchOnly ? 'h-fit' : 'h-10.5'}`, children: [_jsx("input", { ...inputProps, type: 'checkbox', id: name, name: name, className: 'sr-only peer' }), _jsx("div", { className: `
+    return (_jsx(FieldWrapper, { label: label, name: name, required: inputProps.required, info: info, error: error, description: description, className: className, children: _jsxs("label", { className: `relative inline-flex items-center cursor-pointer ${switchOnly ? 'h-fit' : 'h-10.5'}`, children: [_jsx("input", { ...inputProps, type: 'checkbox', id: name, name: name, 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 ${switchOnly ? 'after:top-0.5' : 'after:top-2.75'} after:left-0.5 

package/dist/src/globals.css

@@ -1028,9 +1028,6 @@
   .-mt-0\.5 {
     margin-top: calc(var(--spacing) * -0.5);
   }
-  .-mt-1 {
-    margin-top: calc(var(--spacing) * -1);
-  }
   .mt-1 {
     margin-top: calc(var(--spacing) * 1);
   }
@@ -1064,9 +1061,6 @@
   .ml-1 {
     margin-left: calc(var(--spacing) * 1);
   }
-  .ml-7 {
-    margin-left: calc(var(--spacing) * 7);
-  }
   .page-container {
     display: grid;
     grid-template-columns: 1fr 1rem minmax(0, 72rem) 1rem 1fr;

package/package.json

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

package/src/components/inputs/checkbox.tsx

@@ -1,5 +1,5 @@
 import { Check } from 'lucide-react'
-import { SelectionWrapper, FieldWrapper } from './shared'
+import { FieldWrapper, InputLabel } from './shared'
 
 export type CheckboxOption = {
     label: string
@@ -70,32 +70,24 @@ export default function Checkbox(props: CheckboxProps) {
 }
 
 function CheckboxItem(props: CheckboxItemProps) {
-    const { name, label, error, info, description, className, ...inputProps } = props
+    const { name, label, error, ...inputProps } = props
     const id = inputProps.value ? `${name}-${inputProps.value}` : name
 
     return (
-        <SelectionWrapper
-            label={label}
-            name={id}
-            required={inputProps.required}
-            info={info}
-            description={description}
-            error={error}
-            className={className}
-            disabled={inputProps.disabled}
-        >
-            <div className='relative flex items-center'>
+        <div className='flex items-center gap-2'>
+            <div className='relative w-5 h-5 shrink-0'>
                 <input
                     {...inputProps}
                     id={id}
                     name={name}
                     type='checkbox'
                     className={`
-                        peer appearance-none h-5 w-5 rounded border border-login-500 bg-login-500/50
+                        peer appearance-none rounded border border-login-500 bg-login-500/50
                         checked:bg-login checked:border-login
                         focus:outline-none focus:ring-2 focus:ring-login/50
                         disabled:opacity-50 disabled:cursor-not-allowed
                         cursor-pointer transition-all duration-200
+                        w-5 h-5 absolute inset-0
                         ${error ? 'border-red-500' : ''}
                     `}
                 />
@@ -107,6 +99,13 @@ function CheckboxItem(props: CheckboxItemProps) {
                     `}
                 />
             </div>
-        </SelectionWrapper>
+            {label && (
+                <InputLabel
+                    label={label}
+                    name={name}
+                    className='select-none cursor-pointer'
+                />
+            )}
+        </div>
     )
 }

package/src/components/inputs/radio.tsx

@@ -1,4 +1,4 @@
-import { SelectionWrapper, FieldWrapper } from './shared'
+import { FieldWrapper, InputLabel } from './shared'
 
 export type RadioOption = {
     label: string
@@ -60,33 +60,25 @@ export default function Radio(props: RadioProps) {
 }
 
 function RadioItem(props: RadioItemProps) {
-    const { name, label, error, info, description, className, ...inputProps } = props
+    const { name, label, error, ...inputProps } = props
     const { value } = inputProps
     const id = `${name}-${value}`
 
     return (
-        <SelectionWrapper
-            label={label}
-            name={id}
-            required={inputProps.required}
-            info={info}
-            description={description}
-            error={error}
-            className={className}
-            disabled={inputProps.disabled}
-        >
-            <div className='relative flex items-center'>
+        <div className='flex items-center gap-2'>
+            <div className='relative w-5 h-5 shrink-0'>
                 <input
                     {...inputProps}
                     id={id}
                     name={name}
                     type='radio'
                     className={`
-                        peer appearance-none h-5 w-5 rounded-full border border-login-500 bg-login-500/50
+                        peer appearance-none rounded-full border border-login-500 bg-login-500/50
                         checked:bg-login checked:border-login
                         focus:outline-none focus:ring-2 focus:ring-login/50
                         disabled:opacity-50 disabled:cursor-not-allowed
                         cursor-pointer transition-all duration-200
+                        w-5 h-5 absolute inset-0
                         ${error ? 'border-red-500' : ''}
                     `}
                 />
@@ -94,8 +86,15 @@ function RadioItem(props: RadioItemProps) {
                     absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2
                     w-2 h-2 rounded-full bg-white pointer-events-none opacity-0
                     peer-checked:opacity-100 transition-opacity duration-200
-                `}></div>
+                `}/>
             </div>
-        </SelectionWrapper>
+            {label && (
+                <InputLabel
+                    label={label}
+                    name={name}
+                    className='select-none cursor-pointer'
+                />
+            )}
+        </div>
     )
 }

package/src/components/inputs/shared/index.ts

@@ -1,5 +1,4 @@
 export { default as FieldWrapper } from './fieldWrapper'
-export { default as SelectionWrapper } from './selectionWrapper'
 export { default as InputLabel } from './inputLabel'
 export { default as InputInfo } from './inputInfo'
 export { default as InputError } from './inputError'

package/src/components/inputs/switch.tsx

@@ -1,4 +1,4 @@
-import { SelectionWrapper } from './shared'
+import { FieldWrapper } from './shared'
 
 export type SwitchProps = Omit<React.ComponentProps<'input'>, 'name'> & {
     name: string
@@ -14,16 +14,14 @@ export default function Switch(props: SwitchProps) {
     const { name, label, error, info, description, className, switchOnly, ...inputProps } = props
 
     return (
-        <SelectionWrapper
+        <FieldWrapper
             label={label}
             name={name}
             required={inputProps.required}
             info={info}
-            description={description}
             error={error}
-            hideError={switchOnly}
+            description={description}
             className={className}
-            disabled={inputProps.disabled}
         >
             <label className={`relative inline-flex items-center cursor-pointer ${switchOnly ? 'h-fit' : 'h-10.5'}`}>
                 <input
@@ -41,8 +39,8 @@ export default function Switch(props: SwitchProps) {
                     after:h-5 after:w-5 after:transition-all peer-checked:bg-login
                     ${inputProps.disabled ? 'opacity-50 cursor-not-allowed' : ''}
                     ${error ? 'ring-1 ring-red-500' : ''}
-                `}></div>
+                `} />
             </label>
-        </SelectionWrapper>
+        </FieldWrapper>
     )
 }

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

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

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

@@ -1,7 +0,0 @@
-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, description, children, className, disabled, hideError, }) {
-    return (_jsxs("div", { className: `flex flex-col gap-1 ${className || ''}`, children: [_jsxs("div", { className: 'flex items-start 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 })] }), description && (_jsx("p", { className: 'text-xs text-login-200 ml-7 -mt-1 mb-1', children: description })), !hideError && _jsx(InputError, { error: error })] }));
-}

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

@@ -1,56 +0,0 @@
-import { ReactNode } from 'react'
-import InputLabel from './inputLabel'
-import InputInfo from './inputInfo'
-import InputError from './inputError'
-
-interface SelectionWrapperProps {
-    label?: string
-    name: string
-    required?: boolean
-    info?: string
-    error?: string
-    description?: string
-    children: ReactNode
-    className?: string
-    disabled?: boolean
-    hideError?: boolean
-}
-
-export default function SelectionWrapper({
-    label,
-    name,
-    required,
-    info,
-    error,
-    description,
-    children,
-    className,
-    disabled,
-    hideError,
-}: SelectionWrapperProps) {
-    return (
-        <div className={`flex flex-col gap-1 ${className || ''}`}>
-            <div className='flex items-start justify-between mb-1'>
-                <div className='flex items-center gap-2'>
-                    {children}
-                    {label && (
-                        <InputLabel
-                            label={label}
-                            name={name}
-                            required={required}
-                            disabled={disabled}
-                            className='select-none cursor-pointer'
-                        />
-                    )}
-                </div>
-                {info && <InputInfo info={info} />}
-            </div>
-            {description && (
-                <p className='text-xs text-login-200 ml-7 -mt-1 mb-1'>
-                    {description}
-                </p>
-            )}
-            {!hideError && <InputError error={error} />}
-        </div>
-    )
-}