uibee 2.11.0 → 2.12.1

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

@@ -1,9 +1,16 @@
-export type CheckboxProps = Omit<React.ComponentProps<'input'>, 'name'> & {
+export type CheckboxOption = {
+    label: string;
+    value: string | number;
+};
+export type CheckboxProps = Omit<React.ComponentProps<'input'>, 'name' | 'onChange' | 'value'> & {
     name: string;
     label?: string;
     error?: string;
     info?: string;
     description?: string;
     className?: string;
+    options: CheckboxOption[];
+    value?: (string | number)[];
+    onChange?: (value: (string | number)[]) => void;
 };
 export default function Checkbox(props: CheckboxProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,18 +1,37 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Check } from 'lucide-react';
-import { SelectionWrapper } from './shared';
+import { FieldWrapper, InputLabel } from './shared';
 export default function Checkbox(props) {
-    const { name, label, error, info, description, className, ...inputProps } = props;
-    return (_jsx(SelectionWrapper, { label: label, name: name, 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: name, name: name, type: 'checkbox', className: `
-                        peer appearance-none h-5 w-5 rounded border border-login-500 bg-login-500/50
+    const { options, onChange, value, label, description, error, info, name, className, ...rest } = props;
+    const selectedValues = Array.isArray(value) ? value : [];
+    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(CheckboxItem, { name: name, value: option.value, label: option.label, checked: selectedValues.includes(option.value), disabled: rest.disabled, onChange: (e) => {
+                    if (!onChange)
+                        return;
+                    const isChecked = e.target.checked;
+                    let newValues = [...selectedValues];
+                    if (isChecked) {
+                        newValues.push(option.value);
+                    }
+                    else {
+                        newValues = newValues.filter((v) => v !== option.value);
+                    }
+                    onChange(newValues);
+                }, className: 'mb-0' }, option.value))) }) }));
+}
+function CheckboxItem(props) {
+    const { name, label, error, ...inputProps } = props;
+    const id = inputProps.value ? `${name}-${inputProps.value}` : name;
+    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.d.ts

@@ -1,9 +1,16 @@
-export type RadioProps = Omit<React.ComponentProps<'input'>, 'name'> & {
+export type RadioOption = {
+    label: string;
+    value: string | number;
+};
+export type RadioProps = Omit<React.ComponentProps<'input'>, 'name' | 'onChange' | 'value'> & {
     name: string;
     label?: string;
     error?: string;
     info?: string;
     description?: string;
     className?: string;
+    options: RadioOption[];
+    value?: string | number | null;
+    onChange?: (value: string | number) => void;
 };
 export default function Radio(props: RadioProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,19 +1,27 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { SelectionWrapper } from './shared';
+import { FieldWrapper, InputLabel } from './shared';
 export default function Radio(props) {
-    const { name, label, error, info, description, className, ...inputProps } = 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: () => {
+                    if (onChange)
+                        onChange(option.value);
+                }, className: 'mb-0' }, option.value))) }) }));
+}
+function RadioItem(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);
   }
@@ -1043,6 +1040,9 @@
   .mr-\[0\.3rem\] {
     margin-right: 0.3rem;
   }
+  .mb-0 {
+    margin-bottom: calc(var(--spacing) * 0);
+  }
   .mb-1 {
     margin-bottom: calc(var(--spacing) * 1);
   }
@@ -1061,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.11.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,41 +1,93 @@
 import { Check } from 'lucide-react'
-import { SelectionWrapper } from './shared'
+import { FieldWrapper, InputLabel } from './shared'
 
-export type CheckboxProps = Omit<React.ComponentProps<'input'>, 'name'> & {
+export type CheckboxOption = {
+    label: string
+    value: string | number
+}
+
+type CheckboxItemProps = Omit<React.ComponentProps<'input'>, 'name'> & {
+    name: string
+    label?: string
+    error?: string
+    info?: string
+    description?: string
+    className?: string
+}
+
+export type CheckboxProps = Omit<React.ComponentProps<'input'>, 'name' | 'onChange' | 'value'> & {
     name: string
     label?: string
     error?: string
     info?: string
     description?: string
     className?: string
+    options: CheckboxOption[]
+    value?: (string | number)[]
+    onChange?: (value: (string | number)[]) => void
 }
 
 export default function Checkbox(props: CheckboxProps) {
-    const { name, label, error, info, description, className, ...inputProps } = props
+    const { options, onChange, value, label, description, error, info, name, className, ...rest } = props
+    const selectedValues = Array.isArray(value) ? value : []
 
     return (
-        <SelectionWrapper
+        <FieldWrapper
             label={label}
             name={name}
-            required={inputProps.required}
+            required={rest.required}
             info={info}
             description={description}
             error={error}
             className={className}
-            disabled={inputProps.disabled}
         >
-            <div className='relative flex items-center'>
+            <div className='flex flex-col gap-2'>
+                {options.map((option) => (
+                    <CheckboxItem
+                        key={option.value}
+                        name={name}
+                        value={option.value}
+                        label={option.label}
+                        checked={selectedValues.includes(option.value)}
+                        disabled={rest.disabled}
+                        onChange={(e) => {
+                            if (!onChange) return
+                            const isChecked = e.target.checked
+                            let newValues = [...selectedValues]
+                            if (isChecked) {
+                                newValues.push(option.value)
+                            } else {
+                                newValues = newValues.filter((v) => v !== option.value)
+                            }
+                            onChange(newValues)
+                        }}
+                        className='mb-0'
+                    />
+                ))}
+            </div>
+        </FieldWrapper>
+    )
+}
+
+function CheckboxItem(props: CheckboxItemProps) {
+    const { name, label, error, ...inputProps } = props
+    const id = inputProps.value ? `${name}-${inputProps.value}` : name
+
+    return (
+        <div className='flex items-center gap-2'>
+            <div className='relative w-5 h-5 shrink-0'>
                 <input
                     {...inputProps}
-                    id={name}
+                    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' : ''}
                     `}
                 />
@@ -47,6 +99,13 @@ export default function Checkbox(props: CheckboxProps) {
                     `}
                 />
             </div>
-        </SelectionWrapper>
+            {label && (
+                <InputLabel
+                    label={label}
+                    name={name}
+                    className='select-none cursor-pointer'
+                />
+            )}
+        </div>
     )
 }

package/src/components/inputs/radio.tsx

@@ -1,6 +1,11 @@
-import { SelectionWrapper } from './shared'
+import { FieldWrapper, InputLabel } from './shared'
 
-export type RadioProps = Omit<React.ComponentProps<'input'>, 'name'> & {
+export type RadioOption = {
+    label: string
+    value: string | number
+}
+
+type RadioItemProps = Omit<React.ComponentProps<'input'>, 'name'> & {
     name: string
     label?: string
     error?: string
@@ -9,34 +14,71 @@ export type RadioProps = Omit<React.ComponentProps<'input'>, 'name'> & {
     className?: string
 }
 
+export type RadioProps = Omit<React.ComponentProps<'input'>, 'name' | 'onChange' | 'value'> & {
+    name: string
+    label?: string
+    error?: string
+    info?: string
+    description?: string
+    className?: string
+    options: RadioOption[]
+    value?: string | number | null
+    onChange?: (value: string | number) => void
+}
+
 export default function Radio(props: RadioProps) {
-    const { name, label, error, info, description, className, ...inputProps } = props
-    const { value } = inputProps
-    const id = `${name}-${value}`
+    const { options, onChange, value, label, description, error, info, name, className, ...rest } = props
 
     return (
-        <SelectionWrapper
+        <FieldWrapper
             label={label}
-            name={id}
-            required={inputProps.required}
+            name={name}
+            required={rest.required}
             info={info}
             description={description}
             error={error}
             className={className}
-            disabled={inputProps.disabled}
         >
-            <div className='relative flex items-center'>
+            <div className='flex flex-col gap-2'>
+                {options.map((option) => (
+                    <RadioItem
+                        key={option.value}
+                        name={name}
+                        value={option.value}
+                        label={option.label}
+                        checked={value === option.value}
+                        disabled={rest.disabled}
+                        onChange={() => {
+                            if (onChange) onChange(option.value)
+                        }}
+                        className='mb-0'
+                    />
+                ))}
+            </div>
+        </FieldWrapper>
+    )
+}
+
+function RadioItem(props: RadioItemProps) {
+    const { name, label, error, ...inputProps } = props
+    const { value } = inputProps
+    const id = `${name}-${value}`
+
+    return (
+        <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' : ''}
                     `}
                 />
@@ -44,8 +86,15 @@ export default function Radio(props: RadioProps) {
                     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>
-    )
-}