uibee 2.11.0 → 2.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/src/components/inputs/checkbox.d.ts +8 -1
  2. package/dist/src/components/inputs/checkbox.js +20 -2
  3. package/dist/src/components/inputs/radio.d.ts +8 -1
  4. package/dist/src/components/inputs/radio.js +8 -1
  5. package/dist/src/globals.css +3 -0
  6. package/package.json +1 -1
  7. package/src/components/inputs/checkbox.tsx +64 -4
  8. package/src/components/inputs/radio.tsx +52 -2
package/dist/src/components/inputs/checkbox.d.ts CHANGED
@@ -1,9 +1,16 @@
1
- export type CheckboxProps = Omit<React.ComponentProps<'input'>, 'name'> & {
1
+ export type CheckboxOption = {
2
+ label: string;
3
+ value: string | number;
4
+ };
5
+ export type CheckboxProps = Omit<React.ComponentProps<'input'>, 'name' | 'onChange' | 'value'> & {
2
6
  name: string;
3
7
  label?: string;
4
8
  error?: string;
5
9
  info?: string;
6
10
  description?: string;
7
11
  className?: string;
12
+ options: CheckboxOption[];
13
+ value?: (string | number)[];
14
+ onChange?: (value: (string | number)[]) => void;
8
15
  };
9
16
  export default function Checkbox(props: CheckboxProps): import("react/jsx-runtime").JSX.Element;
package/dist/src/components/inputs/checkbox.js CHANGED
@@ -1,9 +1,27 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { Check } from 'lucide-react';
3
- import { SelectionWrapper } from './shared';
3
+ import { SelectionWrapper, FieldWrapper } from './shared';
4
4
  export default function Checkbox(props) {
5
+ const { options, onChange, value, label, description, error, info, name, className, ...rest } = props;
6
+ const selectedValues = Array.isArray(value) ? value : [];
7
+ 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) => {
8
+ if (!onChange)
9
+ return;
10
+ const isChecked = e.target.checked;
11
+ let newValues = [...selectedValues];
12
+ if (isChecked) {
13
+ newValues.push(option.value);
14
+ }
15
+ else {
16
+ newValues = newValues.filter((v) => v !== option.value);
17
+ }
18
+ onChange(newValues);
19
+ }, className: 'mb-0' }, option.value))) }) }));
20
+ }
21
+ function CheckboxItem(props) {
5
22
  const { name, label, error, info, description, className, ...inputProps } = props;
6
- 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: `
23
+ const id = inputProps.value ? `${name}-${inputProps.value}` : name;
24
+ 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: `
7
25
  peer appearance-none h-5 w-5 rounded border border-login-500 bg-login-500/50
8
26
  checked:bg-login checked:border-login
9
27
  focus:outline-none focus:ring-2 focus:ring-login/50
package/dist/src/components/inputs/radio.d.ts CHANGED
@@ -1,9 +1,16 @@
1
- export type RadioProps = Omit<React.ComponentProps<'input'>, 'name'> & {
1
+ export type RadioOption = {
2
+ label: string;
3
+ value: string | number;
4
+ };
5
+ export type RadioProps = Omit<React.ComponentProps<'input'>, 'name' | 'onChange' | 'value'> & {
2
6
  name: string;
3
7
  label?: string;
4
8
  error?: string;
5
9
  info?: string;
6
10
  description?: string;
7
11
  className?: string;
12
+ options: RadioOption[];
13
+ value?: string | number | null;
14
+ onChange?: (value: string | number) => void;
8
15
  };
9
16
  export default function Radio(props: RadioProps): import("react/jsx-runtime").JSX.Element;
package/dist/src/components/inputs/radio.js CHANGED
@@ -1,6 +1,13 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { SelectionWrapper } from './shared';
2
+ import { SelectionWrapper, FieldWrapper } from './shared';
3
3
  export default function Radio(props) {
4
+ const { options, onChange, value, label, description, error, info, name, className, ...rest } = props;
5
+ 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: () => {
6
+ if (onChange)
7
+ onChange(option.value);
8
+ }, className: 'mb-0' }, option.value))) }) }));
9
+ }
10
+ function RadioItem(props) {
4
11
  const { name, label, error, info, description, className, ...inputProps } = props;
5
12
  const { value } = inputProps;
6
13
  const id = `${name}-${value}`;
package/dist/src/globals.css CHANGED
@@ -1043,6 +1043,9 @@
1043
1043
  .mr-\[0\.3rem\] {
1044
1044
  margin-right: 0.3rem;
1045
1045
  }
1046
+ .mb-0 {
1047
+ margin-bottom: calc(var(--spacing) * 0);
1048
+ }
1046
1049
  .mb-1 {
1047
1050
  margin-bottom: calc(var(--spacing) * 1);
1048
1051
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "uibee",
3
- "version": "2.11.0",
3
+ "version": "2.12.0",
4
4
  "description": "Shared components, functions and hooks for reuse across Login projects",
5
5
  "homepage": "https://github.com/Login-Linjeforening-for-IT/uibee#readme",
6
6
  "bugs": {
package/src/components/inputs/checkbox.tsx CHANGED
@@ -1,22 +1,82 @@
1
1
  import { Check } from 'lucide-react'
2
- import { SelectionWrapper } from './shared'
2
+ import { SelectionWrapper, FieldWrapper } from './shared'
3
3
 
4
- export type CheckboxProps = Omit<React.ComponentProps<'input'>, 'name'> & {
4
+ export type CheckboxOption = {
5
+ label: string
6
+ value: string | number
7
+ }
8
+
9
+ type CheckboxItemProps = Omit<React.ComponentProps<'input'>, 'name'> & {
10
+ name: string
11
+ label?: string
12
+ error?: string
13
+ info?: string
14
+ description?: string
15
+ className?: string
16
+ }
17
+
18
+ export type CheckboxProps = Omit<React.ComponentProps<'input'>, 'name' | 'onChange' | 'value'> & {
5
19
  name: string
6
20
  label?: string
7
21
  error?: string
8
22
  info?: string
9
23
  description?: string
10
24
  className?: string
25
+ options: CheckboxOption[]
26
+ value?: (string | number)[]
27
+ onChange?: (value: (string | number)[]) => void
11
28
  }
12
29
 
13
30
  export default function Checkbox(props: CheckboxProps) {
31
+ const { options, onChange, value, label, description, error, info, name, className, ...rest } = props
32
+ const selectedValues = Array.isArray(value) ? value : []
33
+
34
+ return (
35
+ <FieldWrapper
36
+ label={label}
37
+ name={name}
38
+ required={rest.required}
39
+ info={info}
40
+ description={description}
41
+ error={error}
42
+ className={className}
43
+ >
44
+ <div className='flex flex-col gap-2'>
45
+ {options.map((option) => (
46
+ <CheckboxItem
47
+ key={option.value}
48
+ name={name}
49
+ value={option.value}
50
+ label={option.label}
51
+ checked={selectedValues.includes(option.value)}
52
+ disabled={rest.disabled}
53
+ onChange={(e) => {
54
+ if (!onChange) return
55
+ const isChecked = e.target.checked
56
+ let newValues = [...selectedValues]
57
+ if (isChecked) {
58
+ newValues.push(option.value)
59
+ } else {
60
+ newValues = newValues.filter((v) => v !== option.value)
61
+ }
62
+ onChange(newValues)
63
+ }}
64
+ className='mb-0'
65
+ />
66
+ ))}
67
+ </div>
68
+ </FieldWrapper>
69
+ )
70
+ }
71
+
72
+ function CheckboxItem(props: CheckboxItemProps) {
14
73
  const { name, label, error, info, description, className, ...inputProps } = props
74
+ const id = inputProps.value ? `${name}-${inputProps.value}` : name
15
75
 
16
76
  return (
17
77
  <SelectionWrapper
18
78
  label={label}
19
- name={name}
79
+ name={id}
20
80
  required={inputProps.required}
21
81
  info={info}
22
82
  description={description}
@@ -27,7 +87,7 @@ export default function Checkbox(props: CheckboxProps) {
27
87
  <div className='relative flex items-center'>
28
88
  <input
29
89
  {...inputProps}
30
- id={name}
90
+ id={id}
31
91
  name={name}
32
92
  type='checkbox'
33
93
  className={`
package/src/components/inputs/radio.tsx CHANGED
@@ -1,6 +1,11 @@
1
- import { SelectionWrapper } from './shared'
1
+ import { SelectionWrapper, FieldWrapper } from './shared'
2
2
 
3
- export type RadioProps = Omit<React.ComponentProps<'input'>, 'name'> & {
3
+ export type RadioOption = {
4
+ label: string
5
+ value: string | number
6
+ }
7
+
8
+ type RadioItemProps = Omit<React.ComponentProps<'input'>, 'name'> & {
4
9
  name: string
5
10
  label?: string
6
11
  error?: string
@@ -9,7 +14,52 @@ export type RadioProps = Omit<React.ComponentProps<'input'>, 'name'> & {
9
14
  className?: string
10
15
  }
11
16
 
17
+ export type RadioProps = Omit<React.ComponentProps<'input'>, 'name' | 'onChange' | 'value'> & {
18
+ name: string
19
+ label?: string
20
+ error?: string
21
+ info?: string
22
+ description?: string
23
+ className?: string
24
+ options: RadioOption[]
25
+ value?: string | number | null
26
+ onChange?: (value: string | number) => void
27
+ }
28
+
12
29
  export default function Radio(props: RadioProps) {
30
+ const { options, onChange, value, label, description, error, info, name, className, ...rest } = props
31
+
32
+ return (
33
+ <FieldWrapper
34
+ label={label}
35
+ name={name}
36
+ required={rest.required}
37
+ info={info}
38
+ description={description}
39
+ error={error}
40
+ className={className}
41
+ >
42
+ <div className='flex flex-col gap-2'>
43
+ {options.map((option) => (
44
+ <RadioItem
45
+ key={option.value}
46
+ name={name}
47
+ value={option.value}
48
+ label={option.label}
49
+ checked={value === option.value}
50
+ disabled={rest.disabled}
51
+ onChange={() => {
52
+ if (onChange) onChange(option.value)
53
+ }}
54
+ className='mb-0'
55
+ />
56
+ ))}
57
+ </div>
58
+ </FieldWrapper>
59
+ )
60
+ }
61
+
62
+ function RadioItem(props: RadioItemProps) {
13
63
  const { name, label, error, info, description, className, ...inputProps } = props
14
64
  const { value } = inputProps
15
65
  const id = `${name}-${value}`