@homecode/ui 4.26.10 → 4.27.0

package/dist/esm/index.js

@@ -46,6 +46,7 @@ export { default as VirtualizedList } from './src/components/Virtualized/List/Li
 export { default as VirtualizedListScroll } from './src/components/Virtualized/List/ListScroll.js';
 import * as Virtualized_types from './src/components/Virtualized/Virtualized.types.js';
 export { Virtualized_types as VirtualizedTypes };
+export { Toggle } from './src/components/Toggle/Toggle.js';
 import * as i18n from './src/services/i18n.js';
 export { i18n };
 import * as env from './src/tools/env.js';
@@ -83,6 +84,7 @@ import 'react';
 export { useIsMounted } from './src/hooks/useIsMounted.js';
 export { useListKeyboardControl } from './src/hooks/useListKeyboardControl.js';
 export { useResizeObserver } from './src/hooks/useResizeObserver.js';
+export { useToggleState } from './src/hooks/useToggleState.js';
 import * as Form_types from './src/components/Form/Form.types.js';
 export { Form_types as FormTypes };
 export { SubmitButtons } from './src/components/Form/SubmitButtons/SubmitButtons.js';

package/dist/esm/src/components/Autocomplete/Autocomplete.js

@@ -59,6 +59,7 @@ import '../Text/Text.js';
 import '../Virtualized/Virtualized.styl.js';
 import '../Virtualized/List/List.styl.js';
 import '../Virtualized/List/ListScroll.styl.js';
+import '../Toggle/Toggle.styl.js';
 
 function Autocomplete(props) {
     const { className, inputWrapperClassName, value, onChange, size = 'm', getOptions, onSelect, debounceDelay = 300, round = false, blur = false, inputProps = {}, popupProps = {}, menuProps = {}, } = props;

package/dist/esm/src/components/Checkbox/Checkbox.js

@@ -1,48 +1,19 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { Component } from 'react';
 import cn from 'classnames';
-import { createStore } from 'justorm/react';
 import { Icon } from '../Icon/Icon.js';
-import { generateUID } from '../../tools/uid.js';
+import 'react';
+import 'timen';
+import { useToggleState } from '../../hooks/useToggleState.js';
 import S from './Checkbox.styl.js';
 
-class Checkbox extends Component {
-    id;
-    store;
-    static defaultProps = {
-        size: 'm',
-        variant: 'default',
-        label: '',
-        checked: false,
-    };
-    constructor(props) {
-        super(props);
-        this.id = props.id || generateUID();
-        this.store = createStore(this, { isActive: false, isFocused: false });
-    }
-    onMouseDown = () => {
-        this.store.isActive = true;
-    };
-    onMouseUp = () => {
-        this.store.isActive = false;
-    };
-    onFocus = (e) => {
-        const { onFocus } = this.props;
-        this.store.isFocused = true;
-        onFocus?.(e);
-    };
-    onBlur = (e) => {
-        const { onBlur } = this.props;
-        this.store.isFocused = false;
-        onBlur?.(e);
-    };
-    render() {
-        const { className, label, size, variant, error, ...props } = this.props;
-        const { checked, disabled } = props;
-        const { isActive, isFocused } = this.store;
-        const classes = cn(S.root, S[`size-${size}`], S[`variant-${variant}`], checked && S.checked, disabled && S.disabled, error && S.hasError, isActive && S.isActive, isFocused && S.isFocused, className);
-        return (jsxs("label", { className: classes, onMouseDown: this.onMouseDown, onMouseUp: this.onMouseUp, children: [jsxs("div", { className: S.controlWrapper, children: [jsx("input", { className: S.control, ...props, onFocus: this.onFocus, onBlur: this.onBlur, id: this.id, type: "checkbox", tabIndex: 0 }), jsx(Icon, { type: "check", className: S.checkmark, size: size })] }), label] }));
-    }
-}
+const Checkbox = ({ className, label = '', size = 'm', variant = 'default', error, checked = false, disabled, id, onFocus, onBlur, ...props }) => {
+    const { id: componentId, isActive, isFocused, handlers, } = useToggleState({
+        id,
+        onFocus,
+        onBlur,
+    });
+    const classes = cn(S.root, S[`size-${size}`], S[`variant-${variant}`], checked && S.checked, disabled && S.disabled, error && S.hasError, isActive && S.isActive, isFocused && S.isFocused, className);
+    return (jsxs("label", { className: classes, onPointerDown: handlers.onPointerDown, onPointerUp: handlers.onPointerUp, children: [jsxs("div", { className: S.controlWrapper, children: [jsx("input", { className: S.control, ...props, onFocus: handlers.onFocus, onBlur: handlers.onBlur, id: componentId, type: "checkbox", checked: checked, disabled: disabled, tabIndex: 0 }), jsx(Icon, { type: "check", className: S.checkmark, size: size })] }), label] }));
+};
 
 export { Checkbox };

package/dist/esm/src/components/InputFile/InputFile.js

@@ -57,6 +57,7 @@ import '../Text/Text.js';
 import '../Virtualized/Virtualized.styl.js';
 import '../Virtualized/List/List.styl.js';
 import '../Virtualized/List/ListScroll.styl.js';
+import '../Toggle/Toggle.styl.js';
 import '../../services/i18n.js';
 
 const SCROLL_OFFSET = {

package/dist/esm/src/components/Toggle/Toggle.js

@@ -0,0 +1,18 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import cn from 'classnames';
+import { useToggleState } from '../../hooks/useToggleState.js';
+import S from './Toggle.styl.js';
+
+function Toggle(props) {
+    const { className, label, size = 'm', variant = 'default', error, ...inputProps } = props;
+    const { checked, disabled } = inputProps;
+    const { id, isActive, isFocused, handlers } = useToggleState(props);
+    const classes = cn(S.root, S[`size-${size}`], S[`variant-${variant}`], checked && S.checked, disabled && S.disabled, 
+    // error && S.hasError,
+    isActive && S.isActive, 
+    // isFocused && S.isFocused,
+    className);
+    return (jsxs("label", { className: classes, onPointerDown: handlers.onPointerDown, onPointerUp: handlers.onPointerUp, children: [jsxs("div", { className: S.toggleWrapper, children: [jsx("input", { className: S.control, ...inputProps, onFocus: handlers.onFocus, onBlur: handlers.onBlur, id: id, type: "checkbox", tabIndex: 0 }), jsx("div", { className: S.track, children: jsx("div", { className: S.thumb }) })] }), label && jsx("span", { className: S.label, children: label })] }));
+}
+
+export { Toggle };

package/dist/esm/src/components/Toggle/Toggle.styl.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".Toggle_root__oTmAc{align-items:center;box-sizing:border-box;color:inherit;cursor:pointer;display:inline-flex;gap:.5em;-webkit-user-select:none;-moz-user-select:none;user-select:none}.Toggle_disabled__tFhaN{opacity:.4;pointer-events:none}.Toggle_toggleWrapper__CAd-a{display:block;position:relative;transition:.2s ease-out;transition-property:opacity,box-shadow}.Toggle_control__umhAB{-webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:inset 0 0 0 2px none;box-sizing:border-box;opacity:0;pointer-events:none;position:absolute;transition:.2s ease-out;transition-property:background-color,box-shadow,opacity}.Toggle_control__umhAB:focus,.Toggle_control__umhAB:hover{background-color:var(--active-color-alpha-100)}.Toggle_control__umhAB[disabled]{background-color:var(--accent-color-alpha-100);opacity:.4;pointer-events:none}.Toggle_track__8HXVK{background-color:var(--accent-color-alpha-100);border-radius:100px;cursor:pointer;padding:2px;position:relative;transition:.3s ease-out;transition-property:background-color,border-color}.Toggle_checked__E4mPh .Toggle_track__8HXVK{background-color:var(--active-color)}.Toggle_isActive__Rx-Bv .Toggle_track__8HXVK,.Toggle_isFocused__LIHbP .Toggle_track__8HXVK{background-color:var(--active-color-alpha-500)}.Toggle_thumb__MrfWx{background-color:var(--accent-color-alpha-900);border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2);opacity:.9;transition:.2s ease-out;transition-property:transform,opacity}.Toggle_isActive__Rx-Bv .Toggle_thumb__MrfWx,.Toggle_root__oTmAc:hover .Toggle_thumb__MrfWx{opacity:1}.Toggle_label__eLVN-{font-size:inherit;line-height:inherit}.Toggle_size-s__NZkE5 .Toggle_track__8HXVK{height:30px;width:51px}.Toggle_size-s__NZkE5 .Toggle_thumb__MrfWx{height:26px;width:26px}.Toggle_checked__E4mPh.Toggle_size-s__NZkE5 .Toggle_thumb__MrfWx{transform:translateX(21px)}.Toggle_size-m__c2T-w .Toggle_track__8HXVK{height:40px;width:68px}.Toggle_size-m__c2T-w .Toggle_thumb__MrfWx{height:36px;width:36px}.Toggle_checked__E4mPh.Toggle_size-m__c2T-w .Toggle_thumb__MrfWx{transform:translateX(28px)}.Toggle_size-l__LhLRR .Toggle_track__8HXVK{height:50px;width:85px}.Toggle_size-l__LhLRR .Toggle_thumb__MrfWx{height:46px;width:46px}.Toggle_checked__E4mPh.Toggle_size-l__LhLRR .Toggle_thumb__MrfWx{transform:translateX(35px)}";
+var S = {"root":"Toggle_root__oTmAc","disabled":"Toggle_disabled__tFhaN","toggleWrapper":"Toggle_toggleWrapper__CAd-a","control":"Toggle_control__umhAB","track":"Toggle_track__8HXVK","checked":"Toggle_checked__E4mPh","isActive":"Toggle_isActive__Rx-Bv","isFocused":"Toggle_isFocused__LIHbP","thumb":"Toggle_thumb__MrfWx","label":"Toggle_label__eLVN-","size-s":"Toggle_size-s__NZkE5","size-m":"Toggle_size-m__c2T-w","size-l":"Toggle_size-l__LhLRR"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/src/hooks/useToggleState.js

@@ -0,0 +1,35 @@
+import { useState, useCallback } from 'react';
+import { generateUID } from '../tools/uid.js';
+
+function useToggleState(props = {}) {
+    const id = props.id || generateUID();
+    const [isActive, setIsActive] = useState(false);
+    const [isFocused, setIsFocused] = useState(false);
+    const onPointerDown = useCallback(() => {
+        setIsActive(true);
+    }, []);
+    const onPointerUp = useCallback(() => {
+        setIsActive(false);
+    }, []);
+    const onFocus = useCallback((e) => {
+        setIsFocused(true);
+        props.onFocus?.(e);
+    }, [props.onFocus]);
+    const onBlur = useCallback((e) => {
+        setIsFocused(false);
+        props.onBlur?.(e);
+    }, [props.onBlur]);
+    return {
+        id,
+        isActive,
+        isFocused,
+        handlers: {
+            onPointerDown,
+            onPointerUp,
+            onFocus,
+            onBlur,
+        },
+    };
+}
+
+export { useToggleState };

package/dist/esm/types/src/components/Checkbox/Checkbox.d.ts

@@ -1,18 +1,3 @@
-import { Component } from 'react';
+import { FC } from 'react';
 import * as T from './Checkbox.types';
-export declare class Checkbox extends Component<T.Props> {
-    id: any;
-    store: any;
-    static defaultProps: {
-        size: string;
-        variant: string;
-        label: string;
-        checked: boolean;
-    };
-    constructor(props: any);
-    onMouseDown: () => void;
-    onMouseUp: () => void;
-    onFocus: (e: any) => void;
-    onBlur: (e: any) => void;
-    render(): JSX.Element;
-}
+export declare const Checkbox: FC<T.Props>;

package/dist/esm/types/src/components/Icon/Icon.d.ts

@@ -1,5 +1,6 @@
 import * as T from './Icon.types';
 export declare const icons: {
+    attach: () => Promise<any>;
     arrowRight: () => Promise<any>;
     arrowLeft: () => Promise<any>;
     arrowUp: () => Promise<any>;
@@ -49,6 +50,8 @@ export declare const icons: {
     layers: () => Promise<any>;
     link: () => Promise<any>;
     loader: () => Promise<any>;
+    lock: () => Promise<any>;
+    lockOpen: () => Promise<any>;
     map: () => Promise<any>;
     menu: () => Promise<any>;
     mic: () => Promise<any>;
@@ -73,6 +76,7 @@ export declare const icons: {
     send: () => Promise<any>;
     settings: () => Promise<any>;
     shoppingBag: () => Promise<any>;
+    smile: () => Promise<any>;
     soundWave: () => Promise<any>;
     sparks: () => Promise<any>;
     star: () => Promise<any>;

package/dist/esm/types/src/components/Toggle/Toggle.d.ts

@@ -0,0 +1,3 @@
+import * as T from './Toggle.types';
+export type ToggleProps = T.Props;
+export declare function Toggle(props: ToggleProps): JSX.Element;

package/dist/esm/types/src/components/Toggle/Toggle.types.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode, HTMLAttributes } from 'react';
+import { Size, ComponentType } from '../../types';
+export type Props = HTMLAttributes<HTMLInputElement> & ComponentType & {
+    label?: ReactNode;
+    checked?: boolean;
+    disabled?: boolean;
+    error?: string | boolean;
+    size?: Size;
+    variant?: 'default' | 'outlined';
+};

package/dist/esm/types/src/components/index.d.ts

@@ -42,3 +42,4 @@ export * from './Text/Text';
 export * from './Theme/Theme';
 export * from './VH/VH';
 export * from './Virtualized';
+export * from './Toggle/Toggle';

package/dist/esm/types/src/hooks/index.d.ts

@@ -4,3 +4,4 @@ export * from './useEvent';
 export * from './useIsMounted';
 export * from './useListKeyboardControl';
 export * from './useResizeObserver';
+export * from './useToggleState';

package/dist/esm/types/src/hooks/useToggleState.d.ts

@@ -0,0 +1,17 @@
+export interface UseToggleStateProps {
+    id?: string;
+    onFocus?: (e: any) => void;
+    onBlur?: (e: any) => void;
+}
+export interface UseToggleState {
+    id: string;
+    isActive: boolean;
+    isFocused: boolean;
+    handlers: {
+        onPointerDown: () => void;
+        onPointerUp: () => void;
+        onFocus: (e: any) => void;
+        onBlur: (e: any) => void;
+    };
+}
+export declare function useToggleState(props?: UseToggleStateProps): UseToggleState;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homecode/ui",
-  "version": "4.26.10",
+  "version": "4.27.0",
   "description": "React UI components library",
   "scripts": {
     "tests": "jest",