@snack-uikit/toggles 0.7.1-preview-104ad22c.0

package/dist/components/Switch/styles.module.css

@@ -0,0 +1,150 @@
+.container{
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  box-sizing:border-box;
+}
+.container[data-size=s]{
+  width:var(--size-toggles-s-container-switch-width, 24px);
+  height:var(--size-toggles-s-container, 16px);
+  border-radius:var(--radius-toggles-s-box-switch, 16px);
+}
+.container[data-size=m]{
+  width:var(--size-toggles-m-container-switch-width, 36px);
+  height:var(--size-toggles-m-container, 24px);
+  border-radius:var(--radius-toggles-m-box-switch, 16px);
+}
+.container[data-focusvisible=true]{
+  outline-width:var(--border-state-focus-s-border-width, 2px);
+  outline-style:var(--border-state-focus-s-border-style, solid);
+  outline-color:var(--border-state-focus-s-border-color, );
+}
+.container[data-focusvisible=true][data-size=s]{
+  outline-offset:var(--border-width-state-focus-s, 2px);
+}
+
+.box{
+  position:relative;
+  background-color:var(--sys-neutral-accent-default, #757575);
+}
+.box[data-size=s]{
+  width:var(--size-toggles-s-box-switch-width, 24px);
+  height:var(--size-toggles-s-box-switch-height, 16px);
+  border-radius:var(--radius-toggles-s-box-switch, 16px);
+}
+.box[data-size=m]{
+  width:var(--size-toggles-m-box-switch-width, 32px);
+  height:var(--size-toggles-m-box-switch-height, 20px);
+  border-radius:var(--radius-toggles-m-box-switch, 16px);
+}
+.box[data-hover=true]{
+  background-color:var(--sys-neutral-accent-hovered, #666666);
+}
+.box[data-disabled=true]{
+  background-color:var(--sys-neutral-decor-disabled, #e7e7e7);
+}
+.box[data-checked=true]{
+  background-color:var(--sys-primary-accent-default, #794ed3);
+}
+.box[data-checked=true][data-hover=true]{
+  background-color:var(--sys-primary-accent-hovered, #6851a6);
+}
+.box[data-checked=true][data-disabled=true]{
+  background-color:var(--sys-neutral-decor-disabled, #e7e7e7);
+}
+
+.containerFlag{
+  position:absolute;
+  left:0;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  transition-timing-function:linear;
+  transition-duration:0.1s;
+  transition-property:left;
+}
+.containerFlag[data-size=s]{
+  width:var(--size-toggles-s-container, 16px);
+  height:var(--size-toggles-s-container, 16px);
+}
+.containerFlag[data-size=s][data-checked=true]{
+  left:calc(100% - var(--size-toggles-s-container, 16px));
+}
+.containerFlag[data-size=m]{
+  width:var(--size-toggles-m-container, 24px);
+  height:var(--size-toggles-m-container, 24px);
+}
+.containerFlag[data-size=m][data-checked=true]{
+  left:calc(100% - var(--size-toggles-m-container, 24px));
+}
+
+.flag{
+  background-color:var(--sys-neutral-on-accent, #fdfdfd);
+}
+.flag[data-size=s]{
+  border-radius:var(--radius-toggles-s-box-switch, 16px);
+  width:var(--size-toggles-s-flag-switch, 12px);
+  height:var(--size-toggles-s-flag-switch, 12px);
+}
+.flag[data-size=m]{
+  border-radius:var(--radius-toggles-m-box-switch, 16px);
+  width:var(--size-toggles-m-flag-switch, 16px);
+  height:var(--size-toggles-m-flag-switch, 16px);
+}
+.flag[data-disabled=true]{
+  background-color:var(--sys-neutral-text-disabled, #9e9e9e);
+}
+
+.flag_icon_off{
+  position:absolute;
+  top:50%;
+  left:50%;
+  transform:translate(-50%, -50%);
+  display:flex;
+  color:var(--sys-neutral-accent-default, #757575);
+  fill:transparent;
+  transition:opacity 0.1s linear;
+  opacity:1;
+}
+.flag_icon_off[data-hover=true]{
+  color:var(--sys-neutral-accent-hovered, #666666);
+}
+.flag_icon_off[data-checked=true]{
+  color:var(--sys-primary-accent-default, #794ed3);
+}
+.flag_icon_off[data-checked=true][data-hover=true]{
+  color:var(--sys-primary-accent-hovered, #6851a6);
+}
+.flag_icon_off[data-disabled=true]{
+  color:var(--sys-neutral-decor-disabled, #e7e7e7);
+}
+.flag_icon_off[data-checked=true]{
+  opacity:0;
+}
+
+.flag_icon_on{
+  position:absolute;
+  top:50%;
+  left:50%;
+  transform:translate(-50%, -50%);
+  display:flex;
+  color:var(--sys-neutral-accent-default, #757575);
+  fill:transparent;
+  transition:opacity 0.1s linear;
+  opacity:0;
+}
+.flag_icon_on[data-hover=true]{
+  color:var(--sys-neutral-accent-hovered, #666666);
+}
+.flag_icon_on[data-checked=true]{
+  color:var(--sys-primary-accent-default, #794ed3);
+}
+.flag_icon_on[data-checked=true][data-hover=true]{
+  color:var(--sys-primary-accent-hovered, #6851a6);
+}
+.flag_icon_on[data-disabled=true]{
+  color:var(--sys-neutral-decor-disabled, #e7e7e7);
+}
+.flag_icon_on[data-checked=true]{
+  opacity:1;
+}

package/dist/components/ToggleGroup/ToggleGroup.d.ts

@@ -0,0 +1,28 @@
+import { ReactNode } from 'react';
+import { SelectionMode } from '../../constants';
+export type ToggleGroupProps = {
+    /** Вложенный контент */
+    children: ReactNode;
+} & ({
+    /** Начальное состояние */
+    defaultValue?: string;
+    /** Controlled состояние */
+    value?: string;
+    /** Controlled обработчик измения состояния */
+    onChange?(value: (string | undefined) | string): void;
+    /** Режим выбора */
+    selectionMode?: SelectionMode.Single;
+} | {
+    /** Начальное состояние */
+    defaultValue?: string[];
+    /** Controlled состояние */
+    value?: string[];
+    /** Controlled обработчик измения состояния */
+    onChange?(value: (string[] | undefined) | string[]): void;
+    /** Режим выбора */
+    selectionMode?: SelectionMode.Multiple;
+});
+export declare function ToggleGroup({ children, value: valueProp, onChange: onChangeProp, selectionMode, defaultValue, }: ToggleGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace ToggleGroup {
+    var selectionModes: typeof SelectionMode;
+}

package/dist/components/ToggleGroup/ToggleGroup.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import { useUncontrolledProp } from 'uncontrollable';
+import { SelectionMode } from '../../constants';
+import { ToggleGroupContext } from '../../context';
+export function ToggleGroup({ children, value: valueProp, onChange: onChangeProp, selectionMode = SelectionMode.Single, defaultValue, }) {
+    const [value, setValue] = useUncontrolledProp(valueProp, defaultValue, cb => {
+        onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(cb(value));
+    });
+    const onChange = useCallback((newValue) => {
+        if (selectionMode === SelectionMode.Single) {
+            return setValue((oldValue) => {
+                if (newValue !== oldValue) {
+                    return newValue;
+                }
+                return undefined;
+            });
+        }
+        return setValue((oldValues = []) => {
+            if (Array.isArray(oldValues)) {
+                if (oldValues.includes(newValue)) {
+                    return oldValues.filter(oldValue => oldValue !== newValue);
+                }
+                return oldValues.concat(newValue);
+            }
+            return undefined;
+        });
+    }, [selectionMode, setValue]);
+    return (_jsx(ToggleGroupContext.Provider, Object.assign({ value: { value, onChange, selectionMode } }, { children: children })));
+}
+ToggleGroup.selectionModes = SelectionMode;

package/dist/components/ToggleGroup/hooks.d.ts

@@ -0,0 +1,9 @@
+type UseToggleGroupProps = {
+    value: string;
+};
+export declare function useToggleGroup({ value: itemValue }: UseToggleGroupProps): {
+    isChecked: boolean;
+    handleClick: () => void;
+    multipleSelection: boolean;
+};
+export {};

package/dist/components/ToggleGroup/hooks.js

@@ -0,0 +1,23 @@
+import { useCallback, useMemo } from 'react';
+import { SelectionMode } from '../../constants';
+import { useToggleGroupContext } from '../../context';
+export function useToggleGroup({ value: itemValue }) {
+    const { value, onChange, selectionMode } = useToggleGroupContext();
+    const isChecked = useMemo(() => {
+        if (typeof value === 'string') {
+            return value === itemValue;
+        }
+        if (Array.isArray(value)) {
+            return value.includes(itemValue);
+        }
+        return false;
+    }, [value, itemValue]);
+    const handleClick = useCallback(() => {
+        onChange === null || onChange === void 0 ? void 0 : onChange(itemValue);
+    }, [itemValue, onChange]);
+    return {
+        isChecked,
+        handleClick,
+        multipleSelection: selectionMode === SelectionMode.Multiple,
+    };
+}

package/dist/components/ToggleGroup/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ToggleGroup';
+export * from './hooks';

package/dist/components/ToggleGroup/index.js

@@ -0,0 +1,2 @@
+export * from './ToggleGroup';
+export * from './hooks';

package/dist/components/TogglePrivate/TogglePrivate.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+import { Mode, Size } from '../../constants';
+export declare const TogglePrivate: import("react").ForwardRefExoticComponent<{
+    'data-test-id'?: string | undefined;
+} & import("react").AriaAttributes & {
+    className?: string | undefined;
+    size?: Size | undefined;
+    render: (visualState: import("../../types").InputVisualState) => import("react").ReactNode;
+    mode?: Mode | undefined;
+    id?: string | undefined;
+    value?: string | undefined;
+    name?: string | undefined;
+    tabIndex?: number | undefined;
+    autofocus?: boolean | undefined;
+    checked?: boolean | undefined;
+    defaultChecked?: boolean | undefined;
+    disabled?: boolean | undefined;
+    onChange?: ((checked: boolean) => void) | undefined;
+    onClick?: import("react").MouseEventHandler<HTMLInputElement> | undefined;
+    onBlur?: import("react").FocusEventHandler<HTMLInputElement> | undefined;
+    onFocus?: import("react").FocusEventHandler<HTMLInputElement> | undefined;
+} & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/TogglePrivate/TogglePrivate.js

@@ -0,0 +1,38 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cn from 'classnames';
+import { forwardRef, useState } from 'react';
+import { useUncontrolledProp } from 'uncontrollable';
+import { Mode, Size } from '../../constants';
+import { getVisualStateAttributes } from '../../utils';
+import styles from './styles.module.css';
+export const TogglePrivate = forwardRef(function TogglePrivate(_a, ref) {
+    var { render, checked: checkedProp, defaultChecked, onChange, onBlur, onFocus, disabled, className, size = Size.M, mode = Mode.Checkbox, 'data-test-id': testId } = _a, otherProps = __rest(_a, ["render", "checked", "defaultChecked", "onChange", "onBlur", "onFocus", "disabled", "className", "size", "mode", 'data-test-id']);
+    const [checked, setChecked] = useUncontrolledProp(checkedProp, Boolean(defaultChecked), onChange);
+    const [focusVisible, setFocusVisible] = useState(false);
+    const [hover, setHover] = useState(false);
+    const visualState = {
+        disabled: Boolean(disabled),
+        focusVisible,
+        checked,
+        hover,
+        size,
+    };
+    return (_jsxs("span", Object.assign({ className: cn(className, styles.toggleLayout), "data-size": size, "data-test-id": testId, onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false) }, getVisualStateAttributes(visualState), { children: [render(visualState), _jsx("input", Object.assign({}, otherProps, { "data-test-id": `${testId}-native-input`, ref: ref, type: mode, className: styles.togglePrivate, checked: checked, disabled: disabled, onChange: e => setChecked(e.target.checked), onFocus: event => {
+                    setFocusVisible(event.target.matches(':focus-visible'));
+                    onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
+                }, onBlur: event => {
+                    setFocusVisible(false);
+                    onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+                } }))] })));
+});

package/dist/components/TogglePrivate/index.d.ts

@@ -0,0 +1 @@
+export * from './TogglePrivate';

package/dist/components/TogglePrivate/index.js

@@ -0,0 +1 @@
+export * from './TogglePrivate';

package/dist/components/TogglePrivate/styles.module.css

@@ -0,0 +1,38 @@
+.toggleLayout{
+  cursor:pointer;
+  position:relative;
+  display:inline-flex;
+  flex-direction:row;
+  flex-grow:0;
+  flex-shrink:0;
+  align-items:center;
+}
+.toggleLayout[data-size=s] svg{
+  width:var(--dimension-2m, 16px) !important;
+  height:var(--dimension-2m, 16px) !important;
+}
+.toggleLayout[data-size=m] svg{
+  width:var(--dimension-3m, 24px) !important;
+  height:var(--dimension-3m, 24px) !important;
+}
+.toggleLayout[data-disabled=true]{
+  cursor:not-allowed;
+  color:var(--sys-neutral-text-disabled, #9e9e9e);
+}
+
+.togglePrivate{
+  cursor:pointer;
+  position:absolute;
+  top:0;
+  right:0;
+  bottom:0;
+  left:0;
+  width:100%;
+  height:100%;
+  margin:0;
+  padding:0;
+  opacity:0;
+}
+.togglePrivate:disabled{
+  cursor:not-allowed;
+}

package/dist/components/index.d.ts

@@ -0,0 +1,5 @@
+export * from './Checkbox';
+export * from './Switch';
+export * from './Radio';
+export * from './Favorite';
+export * from './ToggleGroup';

package/dist/components/index.js

@@ -0,0 +1,5 @@
+export * from './Checkbox';
+export * from './Switch';
+export * from './Radio';
+export * from './Favorite';
+export * from './ToggleGroup';

package/dist/constants.d.ts

@@ -0,0 +1,16 @@
+export declare enum Mode {
+    Checkbox = "checkbox",
+    Radio = "radio"
+}
+export declare enum Size {
+    S = "s",
+    M = "m"
+}
+export declare enum FavoriteIcon {
+    Star = "star",
+    Heart = "heart"
+}
+export declare enum SelectionMode {
+    Single = "single",
+    Multiple = "multiple"
+}

package/dist/constants.js

@@ -0,0 +1,20 @@
+export var Mode;
+(function (Mode) {
+    Mode["Checkbox"] = "checkbox";
+    Mode["Radio"] = "radio";
+})(Mode || (Mode = {}));
+export var Size;
+(function (Size) {
+    Size["S"] = "s";
+    Size["M"] = "m";
+})(Size || (Size = {}));
+export var FavoriteIcon;
+(function (FavoriteIcon) {
+    FavoriteIcon["Star"] = "star";
+    FavoriteIcon["Heart"] = "heart";
+})(FavoriteIcon || (FavoriteIcon = {}));
+export var SelectionMode;
+(function (SelectionMode) {
+    SelectionMode["Single"] = "single";
+    SelectionMode["Multiple"] = "multiple";
+})(SelectionMode || (SelectionMode = {}));

package/dist/context.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { SelectionMode } from './constants';
+type ToggleGroupContextType = {
+    value: string | undefined | string[];
+    onChange: ((id: string) => void) | undefined;
+    selectionMode: SelectionMode;
+};
+export declare const ToggleGroupContext: import("react").Context<ToggleGroupContextType>;
+export declare const useToggleGroupContext: () => ToggleGroupContextType;
+export {};

package/dist/context.js

@@ -0,0 +1,8 @@
+import { createContext, useContext } from 'react';
+import { SelectionMode } from './constants';
+export const ToggleGroupContext = createContext({
+    value: undefined,
+    onChange: undefined,
+    selectionMode: SelectionMode.Single,
+});
+export const useToggleGroupContext = () => useContext(ToggleGroupContext);

package/dist/index.d.ts

@@ -0,0 +1 @@
+export * from './components';

package/dist/index.js

@@ -0,0 +1 @@
+export * from './components';

package/dist/types.d.ts

@@ -0,0 +1,47 @@
+import { FocusEventHandler, MouseEventHandler, ReactNode, RefObject } from 'react';
+import { WithSupportProps } from '@snack-uikit/utils';
+import { Mode, Size } from './constants';
+export type InputVisualState = {
+    focusVisible: boolean;
+    disabled: boolean;
+    checked: boolean;
+    hover: boolean;
+    size: Size;
+};
+export type DataAttributes = Record<`data-${string}`, string | boolean>;
+export type TogglePrivateProps = WithSupportProps<{
+    className?: string;
+    /** Размер */
+    size?: Size;
+    /** Колбек рендера компонента */
+    render: (visualState: InputVisualState) => ReactNode;
+    /** Режим работы */
+    mode?: Mode;
+    /** HTML-аттрибут id */
+    id?: string;
+    /** HTML-аттрибут value */
+    value?: string;
+    /** HTML-аттрибут name */
+    name?: string;
+    /** HTML-аттрибут tab-index */
+    tabIndex?: number;
+    /** HTML-аттрибут autofocus */
+    autofocus?: boolean;
+    /** HTML-аттрибут checked */
+    checked?: boolean;
+    /** HTML-аттрибут checked по-умолчанию */
+    defaultChecked?: boolean;
+    /** HTML-аттрибут disabled */
+    disabled?: boolean;
+    /** Колбек смены значения */
+    onChange?: (checked: boolean) => void;
+    /** Колбек клика */
+    onClick?: MouseEventHandler<HTMLInputElement>;
+    /** Колбек потери фокуса */
+    onBlur?: FocusEventHandler<HTMLInputElement>;
+    /** Колбек приобретения фокуса */
+    onFocus?: FocusEventHandler<HTMLInputElement>;
+}>;
+export type ToggleProps = WithSupportProps<Pick<TogglePrivateProps, 'id' | 'name' | 'value' | 'tabIndex' | 'autofocus' | 'checked' | 'defaultChecked' | 'disabled' | 'onChange' | 'onClick' | 'onBlur' | 'onFocus' | 'className' | 'size'> & {
+    inputRef?: RefObject<HTMLInputElement>;
+}>;

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/dist/utils.d.ts

@@ -0,0 +1,4 @@
+import { Size } from './constants';
+import { DataAttributes } from './types';
+export declare function getVisualStateAttributes(state: Record<string, string | boolean>): DataAttributes;
+export declare function getIconSize(size?: Size): 16 | 24;

package/dist/utils.js

@@ -0,0 +1,18 @@
+import { Size } from './constants';
+export function getVisualStateAttributes(state) {
+    return Object.entries(state).reduce(function (result, [name, value]) {
+        result[`data-${name.toLowerCase()}`] = value;
+        return result;
+    }, {});
+}
+export function getIconSize(size) {
+    switch (size) {
+        case Size.S: {
+            return 16;
+        }
+        case Size.M:
+        default: {
+            return 24;
+        }
+    }
+}

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@snack-uikit/toggles",
+  "publishConfig": {
+    "access": "public"
+  },
+  "title": "Toggles",
+  "version": "0.7.1-preview-104ad22c.0",
+  "sideEffects": [
+    "*.css",
+    "*.woff",
+    "*.woff2"
+  ],
+  "description": "",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "homepage": "https://git.sbercloud.tech/sbercloud-ui/tokens-design-system/snack-uikit/-/tree/master/packages/toggles",
+  "repository": {
+    "type": "git",
+    "url": "https://git.sbercloud.tech/sbercloud-ui/tokens-design-system/snack-uikit.git",
+    "directory": "packages/toggles"
+  },
+  "author": "Сергей Хлупин <svhlupin@cloud.ru>",
+  "contributors": [
+    "Сергей Хлупин <svhlupin@cloud.ru>"
+  ],
+  "files": [
+    "dist",
+    "src",
+    "./CHANGELOG.md",
+    "./LICENSE"
+  ],
+  "license": "Apache-2.0",
+  "scripts": {},
+  "dependencies": {
+    "@snack-uikit/icons": "0.18.2-preview-104ad22c.0",
+    "@snack-uikit/utils": "2.0.2-preview-104ad22c.0",
+    "classnames": "2.3.2",
+    "merge-refs": "1.2.1",
+    "uncontrollable": "8.0.0"
+  },
+  "gitHead": "580e0d5c22d04d609bcdf7cb0873114f9fce5f66"
+}

package/src/components/Checkbox/Checkbox.tsx

@@ -0,0 +1,72 @@
+import mergeRefs from 'merge-refs';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
+import { useUncontrolledProp } from 'uncontrollable';
+
+import { CheckSVG, MinusSVG } from '@snack-uikit/icons';
+
+import { Size } from '../../constants';
+import { ToggleProps } from '../../types';
+import { getIconSize, getVisualStateAttributes } from '../../utils';
+import { TogglePrivate } from '../TogglePrivate';
+import styles from './styles.module.scss';
+
+export type CheckboxProps = ToggleProps & {
+  /** Состояние частичного выбора */
+  indeterminate?: boolean;
+  /** Состояние частичного выбора по-умолчанию */
+  indeterminateDefault?: boolean;
+};
+
+export function Checkbox({
+  inputRef,
+  indeterminate: indeterminateProp,
+  indeterminateDefault,
+  onChange: onChangeProp,
+  'data-test-id': dataTestId,
+  size = Size.M,
+  ...restProps
+}: CheckboxProps) {
+  const localRef = useRef<HTMLInputElement>(null);
+  const ref = mergeRefs<HTMLInputElement>(localRef, inputRef);
+
+  const [indeterminate, setIndeterminate] = useUncontrolledProp(indeterminateProp, indeterminateDefault);
+
+  const onChange = useCallback(
+    (checked: boolean) => {
+      onChangeProp?.(checked);
+      setIndeterminate(false);
+    },
+    [onChangeProp, setIndeterminate],
+  );
+
+  useEffect(() => {
+    if (localRef.current) {
+      localRef.current.indeterminate = Boolean(indeterminate);
+    }
+  }, [localRef, indeterminate]);
+
+  const iconSize = useMemo(() => getIconSize(size), [size]);
+
+  return (
+    <TogglePrivate
+      {...restProps}
+      size={size}
+      onChange={onChange}
+      data-test-id={dataTestId}
+      ref={ref}
+      render={function Checkbox(visualState) {
+        const data = getVisualStateAttributes({ ...visualState, indeterminate: Boolean(indeterminate) });
+        return (
+          <div className={styles.container} {...data}>
+            <div className={styles.box} {...data} />
+            <div className={styles.icon} {...data}>
+              {indeterminate ? <MinusSVG size={iconSize} /> : <CheckSVG size={iconSize} />}
+            </div>
+          </div>
+        );
+      }}
+    />
+  );
+}
+
+Checkbox.sizes = Size;

package/src/components/Checkbox/index.ts

@@ -0,0 +1 @@
+export * from './Checkbox';