feat(18794): add two-directional feature to toggle component

packages/default-icons/src/figma-icons/FavAdded16.tsx

@@ -0,0 +1,16 @@
+import { SVGProps, memo } from 'react';
+
+const FavAdded16 = (props: SVGProps<SVGSVGElement>) => (
+  <svg width={16} height={16} viewBox="0 0 16 16" fill="none" {...props}>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M14.5044 5.8292C14.9445 5.86715 15.1228 6.41542 14.7892 6.70497L11.5859 9.48502C11.53 9.53357 11.5055 9.60907 11.5222 9.68124L12.4799 13.8117C12.5797 14.2423 12.1128 14.5811 11.7345 14.3527L8.00001 12.0988L4.26747 14.3516C3.88881 14.5801 3.42169 14.2406 3.52217 13.8099L4.5127 9.56394L1.21441 6.70663C0.880106 6.41702 1.05881 5.86789 1.49952 5.8305L5.54113 5.48761C5.72592 5.47194 5.88685 5.35527 5.95922 5.18452L7.54 1.45479C7.71224 1.04839 8.28815 1.04824 8.46061 1.45454L10.0409 5.1775C10.1132 5.3479 10.2738 5.46439 10.4582 5.48029L14.5044 5.8292Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+FavAdded16.displayName = 'FavAdded16';
+const Memo = memo(FavAdded16);
+export default Memo;

packages/default-icons/src/figma-icons/index.ts

@@ -180,3 +180,4 @@ export { default as Reference16 } from './Reference16';
 export { default as Rubber16 } from './Rubber16';
 export { default as Rubber24 } from './Rubber24';
 export { default as Diamond24 } from './Diamond24';
+export { default as FavAdded16 } from './FavAdded16';

packages/ui-kit/src/Toggler/Toggler.fixture.style.module.css

@@ -0,0 +1,10 @@
+.label {
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 20px;
+  color: var(--faint-strong-up);
+
+  &.active {
+    color: var(--base-strong);
+  }
+}

packages/ui-kit/src/Toggler/Toggler.fixture.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useState } from 'react';
+import s from './Toggler.fixture.style.module.css';
 import { Toggler } from '.';
 
 export default {
@@ -16,8 +17,14 @@ export default {
       foo: false,
       bar: true,
       baz: false,
+      payment: false,
     });
 
+    const classes = {
+      label: s.label,
+      activeLabel: s.active,
+    };
+
     const onChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
       setState((state) => ((state[e.target.id] = e.target.checked), { ...state }));
     }, []);
@@ -27,6 +34,14 @@ export default {
         <Toggler id="foo" label="Foo" on={state['foo']} onChange={onChange} />
         <Toggler id="bar" label="Bar" on={state['bar']} onChange={onChange} />
         <Toggler id="baz" label="Baz" on={state['baz']} onChange={onChange} />
+        <Toggler
+          id="payment"
+          label="Annually"
+          leftLabel="Monthly"
+          on={state['payment']}
+          onChange={onChange}
+          classes={classes}
+        />
         <code style={{ whiteSpace: 'pre', marginTop: '1em' }}>{JSON.stringify(state, null, 2)}</code>
       </div>
     );

packages/ui-kit/src/Toggler/index.tsx

@@ -5,7 +5,12 @@ import type { ChangeEvent } from 'react';
 interface Toggler {
   id: string;
   name?: string;
-  label?: React.ReactChild | React.ReactChild[];
+  label?: React.ReactNode;
+  leftLabel?: React.ReactNode;
+  classes?: {
+    label?: string;
+    activeLabel?: string;
+  };
   className?: string;
   onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
   on?: boolean;
@@ -14,17 +19,28 @@ interface Toggler {
 export function Toggler({
   name,
   label,
+  leftLabel,
   className = '',
+  classes,
   id,
   on = false,
   ...native
 }: Toggler &
   React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>): React.ReactElement {
   return (
-    <label className={cn(s.root, { [s.checked]: on, [s.disabled]: native.disabled }, className)}>
+    <label
+      className={cn(
+        s.root,
+        { [s.checked]: on, [s.disabled]: native.disabled, [s.twoDirectional]: leftLabel },
+        className,
+      )}
+    >
       <input id={id} className={s.hidden} type="checkbox" {...native} checked={on} />
+      {leftLabel && (
+        <div className={cn(s.label, classes?.label, { [classes?.activeLabel || '']: !on })}>{leftLabel}</div>
+      )}
       <div className={s.toggle}></div>
-      <div className={s.label}>{label}</div>
+      <div className={cn(s.label, classes?.label, { [classes?.activeLabel || '']: on })}>{label}</div>
     </label>
   );
 }

packages/ui-kit/src/Toggler/style.module.css

@@ -57,6 +57,13 @@
   }
 }
 
+.twoDirectional {
+  .toggle {
+    background-color: var(--base-strong);
+    margin-left: 0.5em;
+  }
+}
+
 /* I am not use hidden true since it's broke auto focus in firefox */
 .hidden {
   position: absolute;