@wavv/ui 2.6.0 → 2.7.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.
|
@@ -21,11 +21,13 @@ type Props = {
|
|
|
21
21
|
gap?: number;
|
|
22
22
|
/** Sets the flex alignment of the checkbox container */
|
|
23
23
|
align?: FlexPosition;
|
|
24
|
+
/** Renders the checkbox icon at 12px instead of the default 24px */
|
|
25
|
+
tiny?: boolean;
|
|
24
26
|
onChange?: CheckboxProps['onChange'];
|
|
25
27
|
className?: CheckboxProps['className'];
|
|
26
28
|
style?: CheckboxProps['style'];
|
|
27
29
|
} & Margin & Omit<CheckboxProps, 'value' | 'isDisabled' | 'isReadOnly' | 'isSelected' | 'isIndeterminate'>;
|
|
28
|
-
declare const Checkbox: ({ label, labelPosition, checked, partial, disabled, readOnly, onChange, align, labelColor, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
|
|
30
|
+
declare const Checkbox: ({ label, labelPosition, checked, partial, disabled, readOnly, onChange, align, labelColor, tiny, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
|
|
29
31
|
export declare const ControlContainer: import("@emotion/styled").StyledComponent<CheckboxProps & import("react").RefAttributes<HTMLLabelElement> & {
|
|
30
32
|
theme?: import("@emotion/react").Theme;
|
|
31
33
|
} & {
|
|
@@ -8,7 +8,7 @@ import { ControlLabel } from "./FormControl.js";
|
|
|
8
8
|
import getFlexPosition from "./helpers/getFlexPosition.js";
|
|
9
9
|
import { marginProps } from "./helpers/styledProps.js";
|
|
10
10
|
import Icon from "./Icon/index.js";
|
|
11
|
-
const Checkbox_Checkbox = ({ label, labelPosition, checked, partial, disabled, readOnly, onChange, align, labelColor, ...props })=>{
|
|
11
|
+
const Checkbox_Checkbox = ({ label, labelPosition, checked, partial, disabled, readOnly, onChange, align, labelColor, tiny, ...props })=>{
|
|
12
12
|
const labelRight = 'right' === labelPosition;
|
|
13
13
|
const isControlled = 'boolean' == typeof checked;
|
|
14
14
|
return /*#__PURE__*/ jsx(ControlContainer, {
|
|
@@ -39,6 +39,7 @@ const Checkbox_Checkbox = ({ label, labelPosition, checked, partial, disabled, r
|
|
|
39
39
|
}),
|
|
40
40
|
/*#__PURE__*/ jsx(Icon, {
|
|
41
41
|
svg: svg,
|
|
42
|
+
size: tiny ? 'tiny' : void 0,
|
|
42
43
|
pointer: !disabled
|
|
43
44
|
})
|
|
44
45
|
]
|
|
@@ -14,7 +14,7 @@ declare const Form: {
|
|
|
14
14
|
Field({ children, inline, align, disabled, ...props }: FieldProps & {
|
|
15
15
|
children?: ReactNode;
|
|
16
16
|
}): import("react/jsx-runtime").JSX.Element;
|
|
17
|
-
Radio: ({ id, label, labelPosition, checked, disabled, labelColor, margin, marginTop, marginBottom, marginRight, marginLeft, className, readOnly, iconColor, ...props }: {
|
|
17
|
+
Radio: ({ id, label, labelPosition, checked, disabled, labelColor, margin, marginTop, marginBottom, marginRight, marginLeft, className, readOnly, iconColor, tiny, ...props }: {
|
|
18
18
|
id?: string;
|
|
19
19
|
label?: string;
|
|
20
20
|
labelPosition?: "left" | "right";
|
|
@@ -23,6 +23,7 @@ declare const Form: {
|
|
|
23
23
|
checked?: boolean;
|
|
24
24
|
className?: string;
|
|
25
25
|
iconColor?: string;
|
|
26
|
+
tiny?: boolean;
|
|
26
27
|
} & Margin & import("react").HTMLProps<HTMLInputElement> & import("./types").AsProp) => import("react/jsx-runtime").JSX.Element;
|
|
27
28
|
Toggle: ({ label, labelPosition, checked, disabled, onChange, gap, labelColor, ...props }: {
|
|
28
29
|
id?: string;
|
|
@@ -36,7 +37,7 @@ declare const Form: {
|
|
|
36
37
|
className?: import("react-aria-components").SwitchProps["className"];
|
|
37
38
|
style?: import("react-aria-components").SwitchProps["style"];
|
|
38
39
|
} & Margin & Omit<import("react-aria-components").SwitchProps, "isDisabled" | "isSelected">) => import("react/jsx-runtime").JSX.Element;
|
|
39
|
-
Checkbox: ({ label, labelPosition, checked, partial, disabled, readOnly, onChange, align, labelColor, ...props }: {
|
|
40
|
+
Checkbox: ({ label, labelPosition, checked, partial, disabled, readOnly, onChange, align, labelColor, tiny, ...props }: {
|
|
40
41
|
id?: string;
|
|
41
42
|
label?: string;
|
|
42
43
|
labelPosition?: "left" | "right";
|
|
@@ -47,6 +48,7 @@ declare const Form: {
|
|
|
47
48
|
partial?: boolean;
|
|
48
49
|
gap?: number;
|
|
49
50
|
align?: import("./types").FlexPosition;
|
|
51
|
+
tiny?: boolean;
|
|
50
52
|
onChange?: import("react-aria-components").CheckboxProps["onChange"];
|
|
51
53
|
className?: import("react-aria-components").CheckboxProps["className"];
|
|
52
54
|
style?: import("react-aria-components").CheckboxProps["style"];
|
|
@@ -18,6 +18,8 @@ type RadioProps = {
|
|
|
18
18
|
className?: string;
|
|
19
19
|
/** Sets the color of the icon */
|
|
20
20
|
iconColor?: string;
|
|
21
|
+
/** Renders the radio icon at 12px instead of the default 24px */
|
|
22
|
+
tiny?: boolean;
|
|
21
23
|
} & Margin & ElAttributes;
|
|
22
|
-
declare const Radio: ({ id, label, labelPosition, checked, disabled, labelColor, margin, marginTop, marginBottom, marginRight, marginLeft, className, readOnly, iconColor, ...props }: RadioProps) => import("react/jsx-runtime").JSX.Element;
|
|
24
|
+
declare const Radio: ({ id, label, labelPosition, checked, disabled, labelColor, margin, marginTop, marginBottom, marginRight, marginLeft, className, readOnly, iconColor, tiny, ...props }: RadioProps) => import("react/jsx-runtime").JSX.Element;
|
|
23
25
|
export default Radio;
|
|
@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import RadioButton from "../assets/icons/RadioButton.js";
|
|
3
3
|
import { ControlContainer, ControlInput, ControlLabel } from "./FormControl.js";
|
|
4
4
|
import Icon from "./Icon/index.js";
|
|
5
|
-
const Radio = ({ id, label, labelPosition, checked, disabled, labelColor, margin, marginTop, marginBottom, marginRight, marginLeft, className, readOnly, iconColor, ...props })=>{
|
|
5
|
+
const Radio = ({ id, label, labelPosition, checked, disabled, labelColor, margin, marginTop, marginBottom, marginRight, marginLeft, className, readOnly, iconColor, tiny, ...props })=>{
|
|
6
6
|
const labelRight = 'right' === labelPosition;
|
|
7
7
|
const marginProps = {
|
|
8
8
|
margin,
|
|
@@ -36,6 +36,7 @@ const Radio = ({ id, label, labelPosition, checked, disabled, labelColor, margin
|
|
|
36
36
|
}),
|
|
37
37
|
/*#__PURE__*/ jsx(Icon, {
|
|
38
38
|
svg: /*#__PURE__*/ jsx(RadioButton, {}),
|
|
39
|
+
size: tiny ? 'tiny' : void 0,
|
|
39
40
|
marginLeft: label && !labelRight ? 8 : 0,
|
|
40
41
|
marginRight: label && labelRight ? 8 : 0,
|
|
41
42
|
pointer: !disabled
|