@wavv/ui 2.5.2 → 2.7.0

package/build/components/Checkbox.d.ts

@@ -21,11 +21,13 @@ type Props = {
     gap?: number;
     /** Sets the flex alignment of the checkbox container */
     align?: FlexPosition;
+    /** Renders the checkbox icon at 12px instead of the default 24px */
+    tiny?: 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, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const Checkbox: ({ label, labelPosition, checked, partial, disabled, readOnly, onChange, align, labelColor, tiny, ...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,7 +8,7 @@ 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, ...props })=>{
+const Checkbox_Checkbox = ({ label, labelPosition, checked, partial, disabled, readOnly, onChange, align, labelColor, tiny, ...props })=>{
     const labelRight = 'right' === labelPosition;
     const isControlled = 'boolean' == typeof checked;
     return /*#__PURE__*/ jsx(ControlContainer, {
@@ -39,6 +39,7 @@ const Checkbox_Checkbox = ({ label, labelPosition, checked, partial, disabled, r
                     }),
                     /*#__PURE__*/ jsx(Icon, {
                         svg: svg,
+                        size: tiny ? 'tiny' : void 0,
                         pointer: !disabled
                     })
                 ]

package/build/components/Form.d.ts

@@ -14,7 +14,7 @@ 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, ...props }: {
+    Radio: ({ id, label, labelPosition, checked, disabled, labelColor, margin, marginTop, marginBottom, marginRight, marginLeft, className, readOnly, iconColor, tiny, ...props }: {
         id?: string;
         label?: string;
         labelPosition?: "left" | "right";
@@ -23,6 +23,7 @@ declare const Form: {
         checked?: boolean;
         className?: string;
         iconColor?: string;
+        tiny?: 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;
@@ -36,7 +37,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, ...props }: {
+    Checkbox: ({ label, labelPosition, checked, partial, disabled, readOnly, onChange, align, labelColor, tiny, ...props }: {
         id?: string;
         label?: string;
         labelPosition?: "left" | "right";
@@ -47,6 +48,7 @@ declare const Form: {
         partial?: boolean;
         gap?: number;
         align?: import("./types").FlexPosition;
+        tiny?: 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/ListHelpers/ListItemStyles.js

@@ -22,15 +22,14 @@ const baseStyles = ({ theme: { optionItem, scale4 }, color, accented, selected,
         cursor: disabled || noSelect ? 'inherit' : 'pointer',
         pointerEvents: disabled || noSelect ? 'none' : 'auto',
         backgroundColor: !noSelect && selected ? optionItem.background.active : optionItem.background.inactive,
-        '&:hover, &[data-hovered], &[data-focused]': {
+        '&[data-selected]': {
+            backgroundColor: optionItem.background.active
+        },
+        '&:hover, &[data-hovered], &[data-focus-visible]': {
             backgroundColor: disabled || noSelect ? optionItem.background.inactive : optionItem.background.hover
         },
         '&:focus': {
-            outline: 'none',
-            backgroundColor: optionItem.background.hover
-        },
-        '&[data-selected]': {
-            backgroundColor: optionItem.background.active
+            outline: 'none'
         },
         '&[data-disabled="true"], &[data-disabled="true"]:hover': {
             color: scale4,

package/build/components/Radio.d.ts

@@ -18,6 +18,8 @@ type RadioProps = {
     className?: string;
     /** Sets the color of the icon */
     iconColor?: string;
+    /** Renders the radio icon at 12px instead of the default 24px */
+    tiny?: boolean;
 } & Margin & ElAttributes;
-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;
+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;
 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, ...props })=>{
+const Radio = ({ id, label, labelPosition, checked, disabled, labelColor, margin, marginTop, marginBottom, marginRight, marginLeft, className, readOnly, iconColor, tiny, ...props })=>{
     const labelRight = 'right' === labelPosition;
     const marginProps = {
         margin,
@@ -36,6 +36,7 @@ const Radio = ({ id, label, labelPosition, checked, disabled, labelColor, margin
             }),
             /*#__PURE__*/ jsx(Icon, {
                 svg: /*#__PURE__*/ jsx(RadioButton, {}),
+                size: tiny ? 'tiny' : void 0,
                 marginLeft: label && !labelRight ? 8 : 0,
                 marginRight: label && labelRight ? 8 : 0,
                 pointer: !disabled

package/build/theme/mono/dark/dark.js

@@ -473,7 +473,7 @@ const dark = {
     },
     optionItem: {
         background: {
-            hover: darkScale.scale0,
+            hover: colors.brandTint1,
             active: darkScale.scale1,
             inactive: 'transparent'
         },

package/package.json

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