@wavv/ui 2.7.0 → 2.7.2

package/build/components/Checkbox.d.ts

@@ -23,11 +23,13 @@ type Props = {
     align?: FlexPosition;
     /** Renders the checkbox icon at 12px instead of the default 24px */
     tiny?: boolean;
+    /** Renders the checkbox icon at 14px instead of the default 24px */
+    small?: boolean;
     onChange?: CheckboxProps['onChange'];
     className?: CheckboxProps['className'];
     style?: CheckboxProps['style'];
 } & Margin & Omit<CheckboxProps, 'value' | 'isDisabled' | 'isReadOnly' | 'isSelected' | 'isIndeterminate'>;
-declare const Checkbox: ({ label, labelPosition, checked, partial, disabled, readOnly, onChange, align, labelColor, tiny, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const Checkbox: ({ label, labelPosition, checked, partial, disabled, readOnly, onChange, align, labelColor, tiny, small, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
 export declare const ControlContainer: import("@emotion/styled").StyledComponent<CheckboxProps & import("react").RefAttributes<HTMLLabelElement> & {
     theme?: import("@emotion/react").Theme;
 } & {

package/build/components/Checkbox.js

@@ -8,9 +8,10 @@ import { ControlLabel } from "./FormControl.js";
 import getFlexPosition from "./helpers/getFlexPosition.js";
 import { marginProps } from "./helpers/styledProps.js";
 import Icon from "./Icon/index.js";
-const Checkbox_Checkbox = ({ label, labelPosition, checked, partial, disabled, readOnly, onChange, align, labelColor, tiny, ...props })=>{
+const Checkbox_Checkbox = ({ label, labelPosition, checked, partial, disabled, readOnly, onChange, align, labelColor, tiny, small, ...props })=>{
     const labelRight = 'right' === labelPosition;
     const isControlled = 'boolean' == typeof checked;
+    const iconSize = small ? 14 : tiny ? 12 : void 0;
     return /*#__PURE__*/ jsx(ControlContainer, {
         labelRight: labelRight,
         align: align,
@@ -39,7 +40,7 @@ const Checkbox_Checkbox = ({ label, labelPosition, checked, partial, disabled, r
                     }),
                     /*#__PURE__*/ jsx(Icon, {
                         svg: svg,
-                        size: tiny ? 'tiny' : void 0,
+                        size: iconSize,
                         pointer: !disabled
                     })
                 ]

package/build/components/Form.d.ts

@@ -14,9 +14,9 @@ declare const Form: {
     Field({ children, inline, align, disabled, ...props }: FieldProps & {
         children?: ReactNode;
     }): import("react/jsx-runtime").JSX.Element;
-    Radio: ({ id, label, labelPosition, checked, disabled, labelColor, margin, marginTop, marginBottom, marginRight, marginLeft, className, readOnly, iconColor, tiny, ...props }: {
+    Radio: ({ id, label, labelPosition, checked, disabled, labelColor, margin, marginTop, marginBottom, marginRight, marginLeft, className, readOnly, iconColor, tiny, small, ...props }: {
         id?: string;
-        label?: string;
+        label?: ReactNode;
         labelPosition?: "left" | "right";
         labelColor?: string;
         disabled?: boolean;
@@ -24,6 +24,7 @@ declare const Form: {
         className?: string;
         iconColor?: string;
         tiny?: boolean;
+        small?: boolean;
     } & Margin & import("react").HTMLProps<HTMLInputElement> & import("./types").AsProp) => import("react/jsx-runtime").JSX.Element;
     Toggle: ({ label, labelPosition, checked, disabled, onChange, gap, labelColor, ...props }: {
         id?: string;
@@ -37,7 +38,7 @@ declare const Form: {
         className?: import("react-aria-components").SwitchProps["className"];
         style?: import("react-aria-components").SwitchProps["style"];
     } & Margin & Omit<import("react-aria-components").SwitchProps, "isDisabled" | "isSelected">) => import("react/jsx-runtime").JSX.Element;
-    Checkbox: ({ label, labelPosition, checked, partial, disabled, readOnly, onChange, align, labelColor, tiny, ...props }: {
+    Checkbox: ({ label, labelPosition, checked, partial, disabled, readOnly, onChange, align, labelColor, tiny, small, ...props }: {
         id?: string;
         label?: string;
         labelPosition?: "left" | "right";
@@ -49,6 +50,7 @@ declare const Form: {
         gap?: number;
         align?: import("./types").FlexPosition;
         tiny?: boolean;
+        small?: boolean;
         onChange?: import("react-aria-components").CheckboxProps["onChange"];
         className?: import("react-aria-components").CheckboxProps["className"];
         style?: import("react-aria-components").CheckboxProps["style"];

package/build/components/Radio.d.ts

@@ -1,11 +1,11 @@
-import type { HTMLProps } from 'react';
+import type { HTMLProps, ReactNode } from 'react';
 import type { AsProp, Margin } from './types';
 type ElAttributes = HTMLProps<HTMLInputElement> & AsProp;
 type RadioProps = {
     /** Id of the input element */
     id?: string;
-    /** Places a label element beside the radio. The value will set the text of the label */
-    label?: string;
+    /** Places a label element beside the radio. Accepts a string or any React node for custom content. */
+    label?: ReactNode;
     /** Sets the label on the left or right of the radio */
     labelPosition?: 'left' | 'right';
     /** Sets the color of the label */
@@ -20,6 +20,8 @@ type RadioProps = {
     iconColor?: string;
     /** Renders the radio icon at 12px instead of the default 24px */
     tiny?: boolean;
+    /** Renders the radio icon at 14px instead of the default 24px */
+    small?: boolean;
 } & Margin & ElAttributes;
-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;
+declare const Radio: ({ id, label, labelPosition, checked, disabled, labelColor, margin, marginTop, marginBottom, marginRight, marginLeft, className, readOnly, iconColor, tiny, small, ...props }: RadioProps) => import("react/jsx-runtime").JSX.Element;
 export default Radio;

package/build/components/Radio.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import RadioButton from "../assets/icons/RadioButton.js";
 import { ControlContainer, ControlInput, ControlLabel } from "./FormControl.js";
 import Icon from "./Icon/index.js";
-const Radio = ({ id, label, labelPosition, checked, disabled, labelColor, margin, marginTop, marginBottom, marginRight, marginLeft, className, readOnly, iconColor, tiny, ...props })=>{
+const Radio = ({ id, label, labelPosition, checked, disabled, labelColor, margin, marginTop, marginBottom, marginRight, marginLeft, className, readOnly, iconColor, tiny, small, ...props })=>{
     const labelRight = 'right' === labelPosition;
     const marginProps = {
         margin,
@@ -11,6 +11,7 @@ const Radio = ({ id, label, labelPosition, checked, disabled, labelColor, margin
         marginRight,
         marginLeft
     };
+    const iconSize = small ? 14 : tiny ? 12 : void 0;
     return /*#__PURE__*/ jsxs(ControlContainer, {
         htmlFor: id,
         labelRight: labelRight,
@@ -36,7 +37,7 @@ const Radio = ({ id, label, labelPosition, checked, disabled, labelColor, margin
             }),
             /*#__PURE__*/ jsx(Icon, {
                 svg: /*#__PURE__*/ jsx(RadioButton, {}),
-                size: tiny ? 'tiny' : void 0,
+                size: iconSize,
                 marginLeft: label && !labelRight ? 8 : 0,
                 marginRight: label && labelRight ? 8 : 0,
                 pointer: !disabled

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wavv/ui",
-	"version": "2.7.0",
+	"version": "2.7.2",
 	"type": "module",
 	"exports": {
 		".": {