@wavv/ui 2.2.6 → 2.2.8

package/build/components/Checkbox.js

@@ -31,6 +31,7 @@ const Checkbox_Checkbox = ({ label, labelPosition, checked, partial, disabled, r
             return /*#__PURE__*/ jsxs(Fragment, {
                 children: [
                     label && /*#__PURE__*/ jsx(ControlLabel, {
+                        disabled: disabled,
                         children: label
                     }),
                     /*#__PURE__*/ jsx(Icon, {
@@ -54,16 +55,18 @@ const ControlContainer = styled(Checkbox)(({ theme: { accent, formControl }, lab
         outline: 'none',
         outlineOffset: -1,
         '& > div': {
-            transition: 'color 0.2s linear',
-            color: formControl.color.default
+            transition: 'color 0.2s linear'
         },
-        '&[data-hovered] > div': {
-            color: isDisabled ? void 0 : formControl.color.hover
+        '&:not([data-selected]):not([data-indeterminate]):not([data-disabled]) > div': {
+            color: formControl.color.default
         },
-        '&[data-selected] > div, &[data-indeterminate] > div': {
+        '&[data-selected]:not([data-disabled]) > div, &[data-indeterminate]:not([data-disabled]) > div': {
             color: formControl.color.active
         },
-        '&[data-hovered][data-selected] > div': {
+        '&:not([data-selected]):not([data-indeterminate]):not([data-disabled])[data-hovered] > div': {
+            color: isDisabled ? void 0 : formControl.color.hover
+        },
+        '&[data-hovered][data-selected]:not([data-disabled]) > div': {
             color: isDisabled ? void 0 : formControl.color.activeHover
         },
         '&[data-disabled] > div': {

package/build/components/Form.d.ts

@@ -23,14 +23,17 @@ declare const Form: {
         className?: string;
         iconColor?: string;
     } & Margin & import("react").HTMLProps<HTMLInputElement> & import("./types").AsProp) => import("react/jsx-runtime").JSX.Element;
-    Toggle: ({ id, label, labelPosition, checked, disabled, onChange, margin, marginTop, marginBottom, marginRight, marginLeft, ...props }: {
+    Toggle: ({ label, labelPosition, checked, disabled, onChange, gap, ...props }: {
         id?: string;
         label?: string;
         labelPosition?: "left" | "right";
         disabled?: boolean;
         checked?: boolean;
-        onChange: (val: boolean) => void;
-    } & Margin & import("./types").AsProp & import("./FormControl").CheckboxAttributes) => import("react/jsx-runtime").JSX.Element;
+        gap?: number;
+        onChange?: import("react-aria-components").SwitchProps["onChange"];
+        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, ...props }: {
         id?: string;
         label?: string;

package/build/components/FormControl.d.ts

@@ -18,5 +18,7 @@ export declare const ControlInput: import("@emotion/styled").StyledComponent<{
 export declare const ControlLabel: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
+} & {
+    disabled?: boolean;
 } & ThemeProp, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export type CheckboxAttributes = Attributes<HTMLInputElement>;

package/build/components/FormControl.js

@@ -64,9 +64,9 @@ const ControlInput = styled.input({
             }
         }
     }));
-const ControlLabel = styled.span(({ theme: { font, scale10 } })=>({
-        fontSize: font.size.md,
-        color: scale10,
-        cursor: 'pointer'
+const ControlLabel = styled.span(({ theme, disabled })=>({
+        fontSize: theme.font.size.md,
+        color: disabled ? theme.formControl.color.disabled : theme.scale10,
+        cursor: disabled ? 'not-allowed' : 'pointer'
     }));
 export { ControlContainer, ControlInput, ControlLabel };

package/build/components/Inputs/TextArea.d.ts

@@ -1,5 +1,5 @@
 import type { InputProps, TextAreaProps } from '../typeDefs/inputTypes';
 import type { TextFieldProps } from '../typeDefs/reactAriaTypes';
 type Props = TextAreaProps & InputProps & TextFieldProps;
-declare const TextAreaComponent: ({ value, label, placeholder, iconLeft, iconRight, loading, fontSize, placeholderColor, disabled, readOnly, invalid, required, description, errorMessage, accepts, asTrigger, height, maxHeight, onChange, onInput, ref, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
-export default TextAreaComponent;
+declare const TextArea: ({ value, label, placeholder, iconLeft, iconRight, loading, fontSize, placeholderColor, disabled, readOnly, invalid, required, description, errorMessage, accepts, asTrigger, height, maxHeight, onChange, onInput, ref, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+export default TextArea;

package/build/components/Inputs/TextArea.js

@@ -10,7 +10,7 @@ import InputMessage from "./helpers/InputMessage.js";
 import isAcceptable from "./helpers/isAcceptable.js";
 import Label from "./helpers/Label.js";
 import TextArea from "./helpers/TextArea.js";
-const TextAreaComponent = ({ value, label, placeholder, iconLeft, iconRight, loading, fontSize, placeholderColor, disabled, readOnly, invalid, required, description, errorMessage, accepts, asTrigger, height, maxHeight, onChange, onInput, ref, ...props })=>{
+const TextArea_TextArea = ({ value, label, placeholder, iconLeft, iconRight, loading, fontSize, placeholderColor, disabled, readOnly, invalid, required, description, errorMessage, accepts, asTrigger, height, maxHeight, onChange, onInput, ref, ...props })=>{
     const [inputValue, setInputValue] = useState('');
     const textAreaRef = useRef(null);
     useEffect(()=>{
@@ -160,5 +160,5 @@ const TextAreaContainer = styled(TextField)(InputContainerStyles, ({ asTrigger }
     };
     return baseStyles;
 });
-const Inputs_TextArea = TextAreaComponent;
+const Inputs_TextArea = TextArea_TextArea;
 export { Inputs_TextArea as default };

package/build/components/Radio.js

@@ -21,6 +21,7 @@ const Radio = ({ id, label, labelPosition, checked, disabled, margin, marginTop,
         ...marginProps,
         children: [
             label && /*#__PURE__*/ jsx(ControlLabel, {
+                disabled: disabled,
                 children: label
             }),
             /*#__PURE__*/ jsx(ControlInput, {

package/build/components/Toggle.d.ts

@@ -1,6 +1,6 @@
-import { type CheckboxAttributes } from './FormControl';
-import type { AsProp, Margin } from './types';
-type ToggleProps = {
+import { type SwitchProps } from 'react-aria-components';
+import type { Margin, ThemeProp } from './types';
+type Props = {
     /** Id of the input element */
     id?: string;
     /** Places a label element beside the toggle. The value will set the text of the label */
@@ -11,8 +11,18 @@ type ToggleProps = {
     disabled?: boolean;
     /** Controls the checked property of the toggle */
     checked?: boolean;
+    /** Sets the gap between the label and the toggle */
+    gap?: number;
     /** The function called with the toggle value after the toggle is changed */
-    onChange: (val: boolean) => void;
-} & Margin & AsProp & CheckboxAttributes;
-declare const Toggle: ({ id, label, labelPosition, checked, disabled, onChange, margin, marginTop, marginBottom, marginRight, marginLeft, ...props }: ToggleProps) => import("react/jsx-runtime").JSX.Element;
+    onChange?: SwitchProps['onChange'];
+    className?: SwitchProps['className'];
+    style?: SwitchProps['style'];
+} & Margin & Omit<SwitchProps, 'isDisabled' | 'isSelected'>;
+declare const Toggle: ({ label, labelPosition, checked, disabled, onChange, gap, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const ControlContainer: import("@emotion/styled").StyledComponent<SwitchProps & import("react").RefAttributes<HTMLLabelElement> & {
+    theme?: import("@emotion/react").Theme;
+} & {
+    labelRight?: boolean;
+    gap?: number;
+} & Margin & ThemeProp, {}, {}>;
 export default Toggle;

package/build/components/Toggle.js

@@ -1,59 +1,76 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import styled from "@emotion/styled";
+import { Switch } from "react-aria-components";
 import ToggleOff from "../assets/icons/ToggleOff.js";
 import ToggleOn from "../assets/icons/ToggleOn.js";
-import { ControlContainer, ControlInput, ControlLabel } from "./FormControl.js";
+import { ControlLabel } from "./FormControl.js";
+import { marginProps } from "./helpers/styledProps.js";
 import Icon from "./Icon/index.js";
-const Toggle = ({ id, label, labelPosition, checked, disabled, onChange, margin, marginTop, marginBottom, marginRight, marginLeft, ...props })=>{
-    const [on, setOn] = useState(checked || false);
+const Toggle = ({ label, labelPosition, checked, disabled, onChange, gap, ...props })=>{
     const labelRight = 'right' === labelPosition;
-    const marginProps = {
-        margin,
-        marginTop,
-        marginBottom,
-        marginRight,
-        marginLeft
-    };
-    const handleChange = ()=>{
-        const value = !on;
-        setOn(value);
-        onChange(value);
-    };
-    useEffect(()=>{
-        const checkedSet = 'boolean' == typeof checked;
-        const value = checkedSet ? checked : on;
-        setOn(value);
-    }, [
-        checked,
-        on
-    ]);
-    return /*#__PURE__*/ jsxs(ControlContainer, {
-        htmlFor: id,
+    const isControlled = 'boolean' == typeof checked;
+    return /*#__PURE__*/ jsx(ControlContainer, {
         labelRight: labelRight,
-        disabled: disabled,
-        ...marginProps,
-        children: [
-            label && /*#__PURE__*/ jsx(ControlLabel, {
-                children: label
-            }),
-            /*#__PURE__*/ jsx(ControlInput, {
-                id: id,
-                type: "checkbox",
-                checked: on,
-                disabled: disabled,
-                onChange: handleChange,
-                ...props
-            }),
-            /*#__PURE__*/ jsx(Icon, {
-                svg: on ? /*#__PURE__*/ jsx(ToggleOn, {}) : /*#__PURE__*/ jsx(ToggleOff, {}),
-                marginLeft: label && !labelRight ? 8 : 0,
-                marginRight: label && labelRight ? 8 : 0,
-                pointer: !disabled,
-                width: 34,
-                height: 17
-            })
-        ]
+        ...isControlled ? {
+            isSelected: checked
+        } : {},
+        isDisabled: disabled,
+        onChange: onChange,
+        gap: gap,
+        ...props,
+        children: ({ isSelected })=>{
+            const isOn = isSelected;
+            return /*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    label && /*#__PURE__*/ jsx(ControlLabel, {
+                        disabled: disabled,
+                        children: label
+                    }),
+                    /*#__PURE__*/ jsx(Icon, {
+                        svg: isOn ? /*#__PURE__*/ jsx(ToggleOn, {}) : /*#__PURE__*/ jsx(ToggleOff, {}),
+                        marginLeft: label && !labelRight ? 0 : 0,
+                        marginRight: label && labelRight ? 0 : 0,
+                        pointer: !disabled,
+                        width: 34,
+                        height: 17
+                    })
+                ]
+            });
+        }
     });
 };
+const ControlContainer = styled(Switch)(({ theme: { accent, formControl }, labelRight, isDisabled, gap = 8 })=>({
+        display: 'inline-flex',
+        flexDirection: labelRight ? 'row-reverse' : 'row',
+        justifyContent: labelRight ? 'flex-end' : 'flex-start',
+        alignItems: 'center',
+        gap,
+        position: 'relative',
+        cursor: isDisabled ? 'not-allowed' : void 0,
+        borderRadius: 4,
+        outline: 'none',
+        outlineOffset: -1,
+        '& > div': {
+            transition: 'color 0.2s linear'
+        },
+        '&:not([data-selected]):not([data-disabled]) > div': {
+            color: formControl.color.default
+        },
+        '&[data-selected]:not([data-disabled]) > div': {
+            color: formControl.color.active
+        },
+        '&:not([data-selected]):not([data-disabled])[data-hovered] > div': {
+            color: isDisabled ? void 0 : formControl.color.hover
+        },
+        '&[data-hovered][data-selected]:not([data-disabled]) > div': {
+            color: isDisabled ? void 0 : formControl.color.activeHover
+        },
+        '&[data-disabled] > div': {
+            color: formControl.color.disabled
+        },
+        '&[data-focus-visible]': {
+            outline: `${accent} solid 1px`
+        }
+    }), marginProps);
 const components_Toggle = Toggle;
-export { components_Toggle as default };
+export { ControlContainer, components_Toggle as default };

package/build/components/typeDefs/reactAriaTypes.d.ts

@@ -80,6 +80,7 @@ export type TimeFieldProps = {
 /** SELECTS */
 type Combo = AriaComboBoxProps<object>;
 export type ComboBoxProps = {
+    inputValue?: Combo['inputValue'];
     defaultFilter?: Combo['defaultFilter'];
     formValue?: Combo['formValue'];
     allowsEmptyCollection?: Combo['allowsEmptyCollection'];
@@ -96,7 +97,7 @@ export type ComboBoxProps = {
     style?: Combo['style'];
     onOpenChange?: Combo['onOpenChange'];
     onInputChange?: Combo['onInputChange'];
-} & Omit<Combo, 'children' | 'defaultItems' | 'items' | 'onSelectionChange' | 'selectedKey' | 'defaultSelectedKey' | 'inputValue' | 'defaultInputValue' | 'isOpen' | 'isDisabled' | 'isInvalid' | 'isRequired'>;
+} & Omit<Combo, 'children' | 'defaultItems' | 'items' | 'onSelectionChange' | 'selectedKey' | 'defaultSelectedKey' | 'defaultInputValue' | 'isOpen' | 'isDisabled' | 'isInvalid' | 'isRequired'>;
 type Select = AriaSelectProps<SelectItem>;
 export type SelectProps = {
     autoComplete?: Select['autoComplete'];

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wavv/ui",
-	"version": "2.2.6",
+	"version": "2.2.8",
 	"type": "module",
 	"exports": {
 		".": {
@@ -31,29 +31,29 @@
 		"@emotion/styled": "^11.14.1",
 		"@internationalized/date": "3.10.0",
 		"@react-hook/resize-observer": "^2.0.2",
-		"@tiptap/core": "^3.10.1",
-		"@tiptap/extension-character-count": "^3.10.1",
-		"@tiptap/extension-highlight": "^3.10.1",
-		"@tiptap/extension-placeholder": "^3.10.1",
-		"@tiptap/extension-task-item": "^3.10.1",
-		"@tiptap/extension-task-list": "^3.10.1",
-		"@tiptap/markdown": "^3.10.1",
-		"@tiptap/pm": "^3.10.1",
-		"@tiptap/react": "^3.10.1",
-		"@tiptap/starter-kit": "^3.10.1",
+		"@tiptap/core": "^3.10.7",
+		"@tiptap/extension-character-count": "^3.10.7",
+		"@tiptap/extension-highlight": "^3.10.7",
+		"@tiptap/extension-placeholder": "^3.10.7",
+		"@tiptap/extension-task-item": "^3.10.7",
+		"@tiptap/extension-task-list": "^3.10.7",
+		"@tiptap/markdown": "^3.10.7",
+		"@tiptap/pm": "^3.10.7",
+		"@tiptap/react": "^3.10.7",
+		"@tiptap/starter-kit": "^3.10.7",
 		"cmdk": "^1.1.1",
 		"date-fns": "^4.1.0",
 		"draft-js": "^0.11.7",
 		"es-toolkit": "^1.41.0",
-		"libphonenumber-js": "^1.12.25",
-		"lucide-react": "^0.552.0",
+		"libphonenumber-js": "^1.12.26",
+		"lucide-react": "^0.553.0",
 		"polished": "^4.1.4",
 		"prism-react-renderer": "^2.4.1",
 		"react-aria": "3.44.0",
 		"react-aria-components": "1.13.0",
 		"react-keyed-flatten-children": "^5.0.1",
 		"react-phone-input-auto-format": "^0.1.0",
-		"recharts": "^3.3.0",
+		"recharts": "^3.4.1",
 		"sanitize.css": "^13.0.0",
 		"webfontloader": "^1.6.28"
 	},
@@ -61,14 +61,14 @@
 		"@babel/core": "^7.28.5",
 		"@babel/preset-env": "^7.28.5",
 		"@babel/preset-typescript": "^7.28.5",
-		"@biomejs/biome": "2.3.3",
+		"@biomejs/biome": "2.3.4",
 		"@chromatic-com/storybook": "^4.1.2",
 		"@emotion/babel-plugin": "^11.13.5",
 		"@emotion/react": "^11.14.0",
-		"@rsbuild/core": "1.6.1",
-		"@rsbuild/plugin-react": "^1.4.1",
+		"@rsbuild/core": "1.6.3",
+		"@rsbuild/plugin-react": "^1.4.2",
 		"@rsbuild/plugin-svgr": "^1.2.2",
-		"@rslib/core": "^0.17.0",
+		"@rslib/core": "^0.17.1",
 		"@storybook/addon-docs": "^9.1.16",
 		"@storybook/addon-links": "^9.1.16",
 		"@storybook/addon-themes": "^9.1.16",
@@ -91,7 +91,7 @@
 		"change-case": "^5.4.4",
 		"chromatic": "^13.3.3",
 		"jest": "^30.2.0",
-		"lefthook": "^2.0.2",
+		"lefthook": "^2.0.3",
 		"ncp": "^2.0.0",
 		"path": "^0.12.7",
 		"phone": "^3.1.67",