@wavv/ui 2.2.7 → 2.3.0-alpha.1

package/build/components/Checkbox.d.ts

@@ -1,5 +1,5 @@
 import { type CheckboxProps } from 'react-aria-components';
-import type { Margin, ThemeProp } from './types';
+import type { FlexPosition, Margin, ThemeProp } from './types';
 type Props = {
     /** Id of the input element */
     id?: string;
@@ -17,15 +17,18 @@ type Props = {
     partial?: boolean;
     /** Sets the gap between the label and the checkbox */
     gap?: number;
+    /** Sets the flex alignment of the checkbox container */
+    align?: FlexPosition;
     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, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const Checkbox: ({ label, labelPosition, checked, partial, disabled, readOnly, onChange, align, ...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;
 } & {
     labelRight?: boolean;
     gap?: number;
+    align?: FlexPosition;
 } & Margin & ThemeProp, {}, {}>;
 export default Checkbox;

package/build/components/Checkbox.js

@@ -5,13 +5,15 @@ import icons_Checkbox from "../assets/icons/Checkbox.js";
 import CheckboxOff from "../assets/icons/CheckboxOff.js";
 import CheckboxPartial from "../assets/icons/CheckboxPartial.js";
 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, ...props })=>{
+const Checkbox_Checkbox = ({ label, labelPosition, checked, partial, disabled, readOnly, onChange, align, ...props })=>{
     const labelRight = 'right' === labelPosition;
     const isControlled = 'boolean' == typeof checked;
     return /*#__PURE__*/ jsx(ControlContainer, {
         labelRight: labelRight,
+        align: align,
         ...isControlled ? {
             isSelected: checked
         } : {},
@@ -31,6 +33,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, {
@@ -42,11 +45,11 @@ const Checkbox_Checkbox = ({ label, labelPosition, checked, partial, disabled, r
         }
     });
 };
-const ControlContainer = styled(Checkbox)(({ theme: { accent, formControl }, labelRight, isDisabled, gap = 8 })=>({
+const ControlContainer = styled(Checkbox)(({ theme: { accent, formControl }, labelRight, isDisabled, gap = 8, align })=>({
         display: 'inline-flex',
         flexDirection: labelRight ? 'row-reverse' : 'row',
         justifyContent: labelRight ? 'flex-end' : 'flex-start',
-        alignItems: 'center',
+        alignItems: getFlexPosition(align) || 'center',
         gap,
         position: 'relative',
         cursor: isDisabled ? 'not-allowed' : void 0,
@@ -54,16 +57,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,15 +23,18 @@ 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;
-    Checkbox: ({ label, labelPosition, checked, partial, disabled, readOnly, onChange, ...props }: {
+        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, align, ...props }: {
         id?: string;
         label?: string;
         labelPosition?: "left" | "right";
@@ -40,6 +43,7 @@ declare const Form: {
         checked?: boolean;
         partial?: boolean;
         gap?: number;
+        align?: import("./types").FlexPosition;
         onChange?: import("react-aria-components").CheckboxProps["onChange"];
         className?: import("react-aria-components").CheckboxProps["className"];
         style?: import("react-aria-components").CheckboxProps["style"];

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/Inputs/helpers/InputContainerStyles.js

@@ -19,8 +19,8 @@ const baseStyles = ({ theme: { input, accent }, backgroundColor, borderRadius, b
         outlineOffset: -1,
         transition: 'background-color 0.2s',
         '&:focus-within': {
-            backgroundColor: backgroundColor || textOnly || isDisabled || isInvalid ? void 0 : input.background.focused,
-            outline: `${accent} solid 1px`
+            backgroundColor: backgroundColor || textOnly || isDisabled ? void 0 : input.background.focused,
+            outline: isInvalid ? void 0 : `1px solid ${accent}`
         },
         '&:hover:not(:focus-within)': {
             backgroundColor: isDisabled || isReadOnly || textOnly || backgroundColor ? void 0 : input.background.hover,
@@ -33,16 +33,16 @@ const disabledStyles = ({ theme: { input }, isDisabled })=>({
         backgroundColor: isDisabled ? input.background.disabled : void 0,
         pointerEvents: isDisabled ? 'none' : void 0
     });
-const invalidStyles = ({ theme: { input }, isInvalid })=>({
-        backgroundColor: isInvalid ? input.background.invalid : void 0,
+const invalidStyles = ({ theme: { color }, isInvalid })=>({
+        outline: isInvalid ? `1px solid ${color.error}` : void 0,
         '&:hover:not(:focus-within)': {
-            backgroundColor: isInvalid ? input.background.invalidHover : void 0
+            outline: isInvalid ? `1px solid ${color.error}` : void 0
         },
         '&[data-invalid]': {
-            backgroundColor: input.background.invalid
+            outline: `1px solid ${color.error}`
         },
         '&:hover:not(:focus-within)&[data-invalid]': {
-            backgroundColor: input.background.invalidHover
+            outline: `1px solid ${color.error}`
         }
     });
 const readOnlyStyles = ({ isReadOnly })=>({

package/build/components/ListHelpers/ListItemStyles.js

@@ -1,3 +1,4 @@
+import getFlexPosition from "../helpers/getFlexPosition.js";
 import isPropAllowed from "../helpers/isPropAllowed.js";
 const preventProps = {
     shouldForwardProp: (prop)=>isPropAllowed(prop, [
@@ -38,12 +39,9 @@ const baseStyles = ({ theme: { optionItem, scale4 }, color, accented, selected,
         }
     };
 };
-const positionStyles = ({ contentPosition })=>{
-    const position = 'start' === contentPosition || 'end' === contentPosition ? `flex-${contentPosition}` : contentPosition;
-    return {
-        justifyContent: position
-    };
-};
+const positionStyles = ({ contentPosition })=>({
+        justifyContent: getFlexPosition(contentPosition)
+    });
 const listItemStyles = [
     baseStyles,
     positionStyles

package/build/components/Menu.js

@@ -2,6 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import styled from "@emotion/styled";
 import react, { cloneElement, useState } from "react";
 import react_keyed_flatten_children from "react-keyed-flatten-children";
+import getFlexPosition from "./helpers/getFlexPosition.js";
 import { paddingProps } from "./helpers/styledProps.js";
 import Icon from "./Icon/index.js";
 const Menu = ({ vertical, backgroundColor, children, ...rest })=>{
@@ -138,12 +139,9 @@ const MenuItem = styled.button({
             outline: `${accent} solid 1px`,
             outlineOffset: -1
         }
-    }), ({ contentPosition })=>{
-    const position = 'start' === contentPosition || 'end' === contentPosition ? `flex-${contentPosition}` : contentPosition;
-    return {
-        justifyContent: position
-    };
-});
+    }), ({ contentPosition })=>({
+        justifyContent: getFlexPosition(contentPosition)
+    }));
 const MenuGroup = styled.div(({ theme, backgroundColor })=>({
         display: 'flex',
         flexDirection: 'column',

package/build/components/Modal.d.ts

@@ -1,4 +1,4 @@
-import { type CSSProperties, type ReactNode, type RefObject } from 'react';
+import type { CSSProperties, ReactNode, RefObject } from 'react';
 import { type HeadingProps } from 'react-aria-components';
 import type { Attributes } from './typeDefs/elementTypes';
 import type { FlexPosition, Height, Margin, MaxWidthHeight, MinWidthHeight, Padding, PositionType, WidthHeight } from './types';
@@ -23,8 +23,6 @@ type ModalProps = {
     borderRadius?: number | string;
     /** Overrides the overflow of the modal container */
     overflow?: CSSProperties['overflow'];
-    /** Styles the Modal as an actionable toast */
-    small?: boolean;
     /** Removes the overlay background, and allows the modal to be positioned anywhere on the page */
     noOverlay?: boolean;
     /** Prevents the modal from being interacted with */
@@ -55,7 +53,7 @@ type ModalProps = {
     'aria-label'?: string;
 } & WidthHeight & MaxWidthHeight & MinWidthHeight & Padding & DivAttributes;
 declare const Modal: {
-    ({ children, visible, width, height, onClose, closeIcon, preventOverlayClose, overlayBlur, overlayColor, backgroundColor, small, noOverlay, inert, drawer, drawerDirection, scopeRef, centerX, centerY, position, top, bottom, right, left, zIndex, ...props }: ModalProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, visible, width, height, onClose, closeIcon, preventOverlayClose, overlayBlur, overlayColor, backgroundColor, noOverlay, inert, drawer, drawerDirection, scopeRef, centerX, centerY, position, top, bottom, right, left, zIndex, ...props }: ModalProps): import("react/jsx-runtime").JSX.Element;
     Header: {
         ({ children, ...props }: HeaderProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
@@ -88,7 +86,6 @@ type BodyProps = {
 type FooterProps = {
     children: ReactNode;
     justify?: FlexPosition;
-    inline?: boolean;
     gap?: number | string;
 } & Margin & DivAttributes;
 export default Modal;

package/build/components/Modal.js

@@ -1,20 +1,12 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { keyframes } from "@emotion/react";
 import styled from "@emotion/styled";
-import { cloneElement } from "react";
 import { Dialog, Heading, Modal, ModalOverlay } from "react-aria-components";
-import react_keyed_flatten_children from "react-keyed-flatten-children";
 import { marginProps, maxWidthHeightProps, minWidthHeightProps, paddingProps } from "./helpers/styledProps.js";
 import Icon from "./Icon/index.js";
 import PortalScope from "./PortalScope.js";
-const Modal_Modal = ({ children, visible, width, height, onClose, closeIcon, preventOverlayClose, overlayBlur = true, overlayColor, backgroundColor, small, noOverlay, inert, drawer, drawerDirection = 'right', scopeRef, centerX, centerY, position, top, bottom, right, left, zIndex, ...props })=>{
+const Modal_Modal = ({ children, visible, width, height, onClose, closeIcon, preventOverlayClose, overlayBlur = true, overlayColor, backgroundColor, noOverlay, inert, drawer, drawerDirection = 'right', scopeRef, centerX, centerY, position, top, bottom, right, left, zIndex, ...props })=>{
     const { 'aria-label': ariaLabel, ...rest } = props;
-    const modalContent = react_keyed_flatten_children(children).map((child)=>{
-        if (child) return /*#__PURE__*/ cloneElement(child, {
-            inline: small
-        });
-        return null;
-    });
     const handleOpenChange = (open)=>{
         if (!open) onClose();
     };
@@ -49,7 +41,6 @@ const Modal_Modal = ({ children, visible, width, height, onClose, closeIcon, pre
                     width: width,
                     height: height,
                     backgroundColor: backgroundColor,
-                    small: small,
                     noOverlay: noOverlay,
                     drawer: drawer,
                     drawerDirection: drawerDirection,
@@ -57,9 +48,8 @@ const Modal_Modal = ({ children, visible, width, height, onClose, closeIcon, pre
                     centerY: centerY,
                     ...rest,
                     children: [
-                        modalContent,
+                        children,
                         closeIcon && /*#__PURE__*/ jsx(Close, {
-                            inline: small,
                             children: /*#__PURE__*/ jsx(Icon, {
                                 name: "close",
                                 onClick: onClose,
@@ -108,7 +98,7 @@ const Footer = ({ children, ...props })=>/*#__PURE__*/ jsx(ModalFooter, {
         ...props,
         children: children
     });
-const ModalFooter = styled.div(({ justify = 'end', inline, gap })=>{
+const ModalFooter = styled.div(({ justify = 'end', gap })=>{
     const justifyOptions = {
         start: 'flex-start',
         end: 'flex-end',
@@ -120,21 +110,20 @@ const ModalFooter = styled.div(({ justify = 'end', inline, gap })=>{
         display: 'flex',
         alignItems: 'center',
         justifyContent: justify ? justifyOptions[justify] : void 0,
-        marginTop: inline ? void 0 : 8,
+        marginTop: 8,
         gap
     };
 }, marginProps);
-const ModalContainer = styled.div(({ theme, width, height, backgroundColor, small, borderRadius, overflow, drawer, drawerDirection })=>({
+const ModalContainer = styled.div(({ theme, width, height, backgroundColor, borderRadius, overflow, drawer, drawerDirection })=>({
         display: 'flex',
-        flexDirection: small ? 'row' : 'column',
-        alignItems: small ? 'center' : void 0,
+        flexDirection: 'column',
         backgroundColor: backgroundColor || theme.modal.background,
         color: theme.scale10,
         boxShadow: drawer ? 'left' === drawerDirection ? '8px 0 20px rgba(0, 0, 0, 0.2)' : '-8px 0 20px rgba(0, 0, 0, 0.2)' : theme.elevation3,
         width: width || 'max-content',
         height: drawer ? height || '100%' : height || 'max-content',
         borderRadius: drawer ? 0 : borderRadius || theme.size.sm,
-        padding: small ? theme.size.md : theme.size.lg,
+        padding: theme.size.lg,
         overflow: overflow || 'hidden'
     }), ({ noOverlay, drawer })=>!noOverlay && !drawer && {
         position: 'absolute',
@@ -157,14 +146,11 @@ const ModalContainer = styled.div(({ theme, width, height, backgroundColor, smal
 const Close = styled.div({
     display: 'flex',
     justifyContent: 'center',
-    alignItems: 'center'
-}, ({ inline })=>inline ? {
-        marginLeft: 16
-    } : {
-        position: 'absolute',
-        top: 8,
-        right: 8
-    });
+    alignItems: 'center',
+    position: 'absolute',
+    top: 8,
+    right: 8
+});
 const Overlay = styled(ModalOverlay)(({ color, blur, noOverlay, centerX, centerY, position, top, bottom, right, left, zIndex, width, height })=>({
         position: position || 'fixed',
         top: top || (left || bottom || right ? void 0 : 0),

package/build/components/OptionHelpers/Item.js

@@ -1,4 +1,5 @@
 import styled from "@emotion/styled";
+import getFlexPosition from "../helpers/getFlexPosition.js";
 import isPropAllowed from "../helpers/isPropAllowed.js";
 const contentPreventProps = {
     shouldForwardProp: (prop)=>isPropAllowed(prop, [
@@ -40,12 +41,9 @@ const Item = styled('div', contentPreventProps)({
             cursor: 'inherit'
         }
     };
-}, ({ contentPosition })=>{
-    const position = 'start' === contentPosition || 'end' === contentPosition ? `flex-${contentPosition}` : contentPosition;
-    return {
-        justifyContent: position
-    };
-}, ({ theme, section })=>section && {
+}, ({ contentPosition })=>({
+        justifyContent: getFlexPosition(contentPosition)
+    }), ({ theme, section })=>section && {
         backgroundColor: theme.scale0,
         padding: '0 16px',
         color: theme.scale6,

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/Table/contentStyles.js

@@ -1,12 +1,9 @@
+import getFlexPosition from "../helpers/getFlexPosition.js";
 import { paddingProps } from "../helpers/styledProps.js";
-const getPosition = (position)=>{
-    if (!position) return;
-    return 'start' === position || 'end' === position ? `flex-${position}` : position;
-};
 const baseStyles = ({ direction, justify, align = 'center', gap = 8 })=>({
         display: 'flex',
-        justifyContent: getPosition(justify),
-        alignItems: getPosition(align),
+        justifyContent: getFlexPosition(justify),
+        alignItems: getFlexPosition(align),
         flexDirection: direction,
         width: '100%',
         height: '100%',

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/helpers/getFlexPosition.d.ts

@@ -0,0 +1,3 @@
+import type { FlexPosition } from '../types';
+declare const getFlexPosition: (position?: FlexPosition) => string | undefined;
+export default getFlexPosition;

package/build/components/helpers/getFlexPosition.js

@@ -0,0 +1,6 @@
+const getFlexPosition = (position)=>{
+    if (!position) return;
+    return 'start' === position || 'end' === position ? `flex-${position}` : position;
+};
+const helpers_getFlexPosition = getFlexPosition;
+export { helpers_getFlexPosition as default };