@fibery/ui-kit 1.27.1 → 1.27.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "1.27.1",
+  "version": "1.27.2",
   "private": false,
   "files": [
     "src/antd/styles.ts",
@@ -32,7 +32,7 @@
     "src/dropdown-menu",
     "src/shortcut-badge",
     "src/tsfixme",
-    "src/togle.tsx"
+    "src/toggle.tsx"
   ],
   "license": "UNLICENSED",
   "dependencies": {
@@ -74,8 +74,8 @@
     "screenfull": "6.0.1",
     "ua-parser-js": "0.7.24",
     "@fibery/emoji-data": "2.4.0",
-    "@fibery/react": "1.3.1",
-    "@fibery/helpers": "1.2.0"
+    "@fibery/helpers": "1.2.0",
+    "@fibery/react": "1.3.1"
   },
   "peerDependencies": {
     "react": "^18.2.0",
@@ -108,8 +108,8 @@
     "svgo": "2.8.0",
     "typescript": "5.1.6",
     "unist-util-reduce": "0.2.2",
-    "@fibery/babel-preset": "7.4.0",
-    "@fibery/eslint-config": "8.5.1"
+    "@fibery/eslint-config": "8.5.1",
+    "@fibery/babel-preset": "7.4.0"
   },
   "jest": {
     "testEnvironment": "jsdom",

package/src/toggle.tsx

@@ -0,0 +1,158 @@
+import {css, cx} from "@linaria/core";
+import {styled} from "@linaria/react";
+import chroma from "chroma-js";
+import {ComponentProps, FC, ReactNode} from "react";
+import {layout, space, textStyles, transition} from "./design-system";
+import _ from "lodash";
+
+const Input = styled.input<{containerSize: number; containerWidth: number; outlineColor: string}>`
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  appearance: none;
+  margin-right: 0;
+  background-color: transparent;
+  height: ${({containerSize}) => containerSize}px;
+  width: ${({containerWidth}) => containerWidth}px;
+  border-radius: ${({containerSize}) => containerSize / 2}px;
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
+    box-shadow: ${({outlineColor}) => `inset 0 0 0 1px ${outlineColor}`};
+  }
+`;
+
+const Label = styled.div<{labelPosition: "last" | "first"; disabled?: boolean}>`
+  ${textStyles.regular}
+  margin-left: ${({labelPosition}) => (labelPosition === "last" ? `${space.s8}px` : 0)};
+  margin-right: ${({labelPosition}) => (labelPosition === "first" ? `${space.s8}px` : 0)};
+  opacity: ${({disabled}) => (disabled ? 0.5 : 1)};
+  line-height: ${layout.checkboxSize}px;
+  width: 100%;
+`;
+
+const labelWrapperStyle = css`
+  display: flex;
+  position: relative;
+  align-items: center;
+`;
+
+const getOutlineColor = _.memoize((color: string) => {
+  const alpha = chroma(color).alpha();
+  if (alpha < 1) {
+    return chroma(color)
+      .alpha(alpha + 0.3)
+      .css();
+  } else {
+    return chroma(color).darken(1).css();
+  }
+});
+
+const CircleContainer = styled.div<{
+  containerSize: number;
+  containerWidth: number;
+  backgroundColor: string;
+  disabled?: boolean;
+}>`
+  position: relative;
+  height: ${({containerSize}) => containerSize}px;
+  width: ${({containerWidth}) => containerWidth}px;
+  flex-shrink: 0;
+  border-radius: ${({containerSize}) => containerSize / 2}px;
+  background-color: ${({backgroundColor}) => backgroundColor};
+  padding: ${space.s2}px;
+  transition: background-color ${transition};
+  opacity: ${({disabled}) => (disabled ? 0.5 : 1)};
+`;
+
+const Circle = styled.div<{containerSize: number}>`
+  height: ${({containerSize}) => containerSize - space.s2 * 2}px;
+  width: ${({containerSize}) => containerSize - space.s2 * 2}px;
+  border-radius: ${({containerSize}) => containerSize / 2 - space.s2}px;
+  background-color: white;
+  transition: transform ${transition};
+`;
+
+interface ToggleProps extends Omit<ComponentProps<"input">, "value"> {
+  value?: boolean;
+  label?: ReactNode;
+  labelTitle?: string;
+  backgroundColor: string;
+  labelPosition?: "first" | "last";
+  wrapperClassName?: string;
+}
+
+export const Toggle: FC<ToggleProps> = ({
+  value,
+  label,
+  labelTitle,
+  disabled = false,
+  backgroundColor,
+  size = 16,
+  onChange,
+  labelPosition = "last",
+  className,
+  wrapperClassName,
+  ...rest
+}) => {
+  const width = size * 1.75;
+  const outlineColor = getOutlineColor(backgroundColor);
+
+  const circleTransformStyle = {
+    transform: `translateX(${value ? width - size : 0}px)`,
+  };
+
+  return (
+    <label
+      className={cx(
+        wrapperClassName,
+        labelWrapperStyle,
+        disabled
+          ? css`
+              cursor: default;
+            `
+          : css`
+              cursor: pointer;
+            `,
+        labelPosition === "first"
+          ? css`
+              flex-direction: row-reverse;
+            `
+          : css`
+              flex-direction: row;
+            `
+      )}
+      title={labelTitle}
+    >
+      <CircleContainer
+        containerSize={size}
+        containerWidth={width}
+        backgroundColor={backgroundColor}
+        disabled={disabled}
+      >
+        <Circle containerSize={size} style={circleTransformStyle} />
+        <Input
+          containerSize={size}
+          containerWidth={width}
+          outlineColor={outlineColor}
+          onChange={onChange}
+          className={className}
+          type="checkbox"
+          disabled={disabled}
+          checked={value}
+          {...rest}
+        />
+      </CircleContainer>
+
+      {label && (
+        <Label disabled={disabled} labelPosition={labelPosition}>
+          {label}
+        </Label>
+      )}
+    </label>
+  );
+};