@homecode/ui 4.26.10 → 4.27.1

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/Icon/icons/apple.svg.js

@@ -0,0 +1,16 @@
+import * as React from 'react';
+
+var _path;
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var SvgApple = function SvgApple(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24"
+  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    fill: "currentColor",
+    fillRule: "evenodd",
+    d: "M15.649 4c.865-1 1.447-2.395 1.288-3.783-1.246.047-2.753.795-3.646 1.795-.801.888-1.502 2.307-1.313 3.668 1.389.103 2.807-.676 3.67-1.678m3.117 8.81c.035 3.588 3.284 4.782 3.32 4.797-.026.084-.52 1.7-1.712 3.373-1.032 1.443-2.102 2.88-3.79 2.912-1.655.03-2.19-.941-4.084-.941s-2.486.91-4.054.97c-1.628.059-2.868-1.562-3.908-3-2.126-2.944-3.75-8.32-1.57-11.946 1.085-1.8 3.02-2.942 5.124-2.97 1.598-.03 3.107 1.03 4.084 1.03s2.81-1.275 4.739-1.088c.807.032 3.072.312 4.526 2.352-.117.07-2.703 1.512-2.674 4.51"
+  })));
+};
+
+export { SvgApple as default };

package/dist/esm/src/components/Icon/icons/github.svg.js

@@ -0,0 +1,18 @@
+import * as React from 'react';
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var SvgGithub = function SvgGithub(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fill: "currentColor",
+    fillRule: "evenodd",
+    d: "M12.085.104A11.957 11.968 0 0 1 23.882 12.23a11.957 11.968 0 0 1-8.09 11.53c-.598.119-.798-.28-.798-.6v-3.31c0-1.157-.398-1.875-.797-2.274 2.63-.28 5.42-1.317 5.42-5.984a4.783 4.787 0 0 0-1.235-3.271 3.986 3.99 0 0 0-.12-3.192s-.996-.319-3.228 1.197a11.957 11.968 0 0 0-5.979 0C6.863 4.811 5.867 5.21 5.867 5.21a3.986 3.99 0 0 0-.12 3.191 4.783 4.787 0 0 0-1.195 3.232c0 4.667 2.75 5.704 5.38 5.984a2.79 2.793 0 0 0-.757 1.635c-.717.32-2.431.838-3.468-1.037 0 0-.637-1.197-1.833-1.237 0 0-1.156 0-.08.719 0 0 .797.398 1.316 1.795 0 0 .677 2.154 3.985 1.436v2.234c0 .319-.199.718-.797.598a11.957 11.968 0 0 1-8.09-11.529A11.957 11.968 0 0 1 12.044.104",
+    style: {
+      strokeWidth: 39.8753
+    }
+  }));
+};
+
+export { SvgGithub as default };

package/dist/esm/src/components/Icon/icons/google.svg.js

@@ -0,0 +1,42 @@
+import * as React from 'react';
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var SvgGoogle = function SvgGoogle(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    preserveAspectRatio: "xMidYMid",
+    viewBox: "-3 0 7.86 7.86"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fill: "#4285f4",
+    d: "M12.052 8.96c0-.716-.051-1.239-.162-1.78H4.68v3.23h4.232c-.086.802-.546 2.011-1.57 2.823l-.015.109 2.28 2.001.158.018c1.45-1.518 2.287-3.752 2.287-6.402",
+    style: {
+      strokeWidth: 0.0626224
+    },
+    transform: "matrix(.51004 0 0 .44168 -1.376 .066)"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "#34a853",
+    d: "M4.68 17.47c2.073 0 3.814-.775 5.085-2.109l-2.423-2.128c-.649.513-1.52.87-2.662.87-2.031 0-3.755-1.517-4.37-3.616l-.09.009-2.37 2.079-.03.098c1.262 2.843 3.856 4.796 6.86 4.796",
+    style: {
+      strokeWidth: 0.0626224
+    },
+    transform: "matrix(.51004 0 0 .44168 -1.376 .066)"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "#fbbc05",
+    d: "M.31 10.487a6 6 0 0 1-.255-1.721c0-.6.094-1.18.247-1.722L.298 6.93l-2.4-2.112-.079.042A9.7 9.7 0 0 0-3 8.766a9.7 9.7 0 0 0 .82 3.907z",
+    style: {
+      strokeWidth: 0.0626224
+    },
+    transform: "matrix(.51004 0 0 .44168 -1.376 .066)"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "#eb4335",
+    d: "M4.68 3.428c1.442 0 2.414.706 2.969 1.296l2.167-2.399C8.486.923 6.753.062 4.68.062 1.676.062-.918 2.016-2.18 4.86L.301 7.044C.925 4.946 2.65 3.428 4.68 3.428",
+    style: {
+      strokeWidth: 0.0626224
+    },
+    transform: "matrix(.51004 0 0 .44168 -1.376 .066)"
+  }));
+};
+
+export { SvgGoogle as default };

package/dist/esm/src/components/Icon/icons/index.js

@@ -1,5 +1,6 @@
 var ICONS = {
     attach: () => import('./attach.svg.js'),
+    apple: () => import('./apple.svg.js'),
     arrowRight: () => import('./arrowRight.svg.js'),
     arrowLeft: () => import('./arrowLeft.svg.js'),
     arrowUp: () => import('./arrowUp.svg.js'),
@@ -41,7 +42,9 @@ var ICONS = {
     gear: () => import('./gear.svg.js'),
     geolocation: () => import('./geolocation.svg.js'),
     globe: () => import('./globe.svg.js'),
+    google: () => import('./google.svg.js'),
     group: () => import('./group.svg.js'),
+    github: () => import('./github.svg.js'),
     history: () => import('./history.svg.js'),
     image: () => import('./image.svg.js'),
     instagram: () => import('./instagram.svg.js'),

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/Icon/icons/index.d.ts

@@ -1,5 +1,6 @@
 declare const _default: {
     attach: () => Promise<any>;
+    apple: () => Promise<any>;
     arrowRight: () => Promise<any>;
     arrowLeft: () => Promise<any>;
     arrowUp: () => Promise<any>;
@@ -41,7 +42,9 @@ declare const _default: {
     gear: () => Promise<any>;
     geolocation: () => Promise<any>;
     globe: () => Promise<any>;
+    google: () => Promise<any>;
     group: () => Promise<any>;
+    github: () => Promise<any>;
     history: () => Promise<any>;
     image: () => Promise<any>;
     instagram: () => 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.1",
   "description": "React UI components library",
   "scripts": {
     "tests": "jest",