refactor and add error styles

utils/vara-ui/src/components/checkbox/checkbox.stories.ts

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
+
 import { Checkbox } from './checkbox';
 
 type Type = typeof Checkbox;
@@ -23,6 +24,7 @@ const meta: Meta<Type> = {
       options: ['checkbox', 'switch'],
       control: { type: 'select' },
     },
+    error: { control: 'text' },
   },
 };
 

utils/vara-ui/src/components/checkbox/checkbox.tsx

@@ -1,4 +1,4 @@
-import { InputHTMLAttributes, forwardRef } from 'react';
+import { InputHTMLAttributes, ReactNode, forwardRef } from 'react';
 import cx from 'clsx';
 
 import styles from './checkbox.module.scss';
@@ -7,7 +7,7 @@ type Props = Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> & {
   label: string;
   type?: 'switch' | 'checkbox';
   size?: 'small' | 'default';
-  error?: string;
+  error?: ReactNode;
 };
 
 const Checkbox = forwardRef<HTMLInputElement, Props>(

utils/vara-ui/src/components/radio/radio.module.scss

@@ -1,98 +1,91 @@
+@use '../../utils.scss' as *;
+
 .label {
+  @include lightDark(color, #000, #fff);
+
   display: flex;
   align-items: center;
-  gap: 8px;
   cursor: pointer;
-  font-size: 14px;
-  line-height: 20px;
-  width: fit-content;
-  user-select: none;
 
-  &.disabled {
-    cursor: not-allowed;
+  font-size: var(--font-size);
+  font-weight: 400;
+  line-height: var(--line-height);
+
+  &:has(:disabled) {
+    pointer-events: none;
   }
 }
 
-.wrapper {
-  position: relative;
+.input {
+  appearance: none;
+  cursor: inherit;
+  margin: 0;
+}
+
+.box {
+  @include lightDark(background-color, transparent, rgba(255, 255, 255, 0.03));
+  @include lightDark(--border-color, #d0d5dd, rgba(255, 255, 255, 0.04));
+  @include lightDark(--checked-color, #0ed3a3, #00ffc4);
+  @include lightDark(--error-color, rgba(255, 50, 49, 0.8), #d73b4f);
+  @include lightDark(--disabled-color, #eceded, rgba(40, 44, 48, 0.1));
+
+  width: var(--size);
+  height: var(--size);
+  margin-right: 10px;
+
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 24px;
-  height: 24px;
-  color: #d0d5dd;
+
+  border: 1px solid var(--border-color);
+  border-radius: 50%;
+
+  transition: background-color 0.25s ease, border-color 0.25s ease;
 
   &::before {
     content: '';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    background: currentColor;
-    border-radius: 100%;
-    opacity: 0;
-    width: 35%;
-    height: 35%;
-  }
 
-  &:has(:checked) {
-    color: #0ed3a3;
+    width: 7px;
+    height: 7px;
 
-    &::before {
-      opacity: 1;
-    }
-  }
+    border-radius: 50%;
 
-  &:has(:disabled) {
-    color: #eceded;
-  }
-}
+    transition: background-color 0.25s ease;
 
-.input {
-  appearance: none;
-  flex-shrink: 0;
-  margin: 0;
-  width: 75%;
-  height: 75%;
-
-  color: inherit;
-  border: 1px solid currentColor;
-  border-radius: 100%;
-  cursor: inherit;
-}
+    .input:not(:disabled):checked + & {
+      background-color: var(--checked-color);
+    }
 
-.small {
-  font-size: 12px;
-  line-height: 22px;
+    .input:not(:disabled):checked[aria-invalid='true'] + & {
+      background-color: var(--error-color);
+    }
 
-  .wrapper {
-    width: 20px;
-    height: 20px;
+    .input:disabled:checked + & {
+      background-color: var(--border-color);
+    }
   }
-}
 
-:global(.dark-theme) {
-  .label {
-    color: #ffffff;
+  .input:not(:disabled):checked + & {
+    border-color: var(--checked-color);
   }
 
-  .wrapper {
-    color: #ffffff0a;
-
-    .input {
-      background-color: #ffffff08;
-    }
+  .input:not(:disabled)[aria-invalid='true'] + & {
+    border-color: var(--error-color);
+  }
 
-    &:has(:checked) {
-      color: #00ffc4;
+  .input:disabled:not(:checked) + & {
+    background-color: var(--disabled-color);
+  }
+}
 
-      .input {
-        background-color: transparent;
-      }
-    }
+.small {
+  --size: 15px;
+  --font-size: 12px;
+  --line-height: 22px;
+}
 
-    &:has(:disabled) {
-      color: #58696e1a;
-    }
-  }
+.default {
+  --size: 18px;
+  --font-size: 14px;
+  --line-height: 24px;
 }

utils/vara-ui/src/components/radio/radio.stories.ts

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
+
 import { Radio } from './radio';
-import { radioSizes } from './helpers';
 
 type Type = typeof Radio;
 type Story = StoryObj<Type>;
@@ -11,15 +11,15 @@ const meta: Meta<Type> = {
   args: {
     label: 'Label',
     disabled: false,
-    // checked: false,
+    error: undefined,
   },
   argTypes: {
     size: {
-      options: radioSizes,
+      options: ['small', 'default'],
       control: { type: 'select' },
     },
     disabled: { control: 'boolean' },
-    // checked: { control: 'boolean' },
+    error: { control: 'text' },
   },
 };
 

utils/vara-ui/src/components/radio/radio.tsx

@@ -1,21 +1,19 @@
-import { InputHTMLAttributes, forwardRef } from 'react';
+import { InputHTMLAttributes, ReactNode, forwardRef } from 'react';
 import cx from 'clsx';
+
 import styles from './radio.module.scss';
-import type { IRadioSizes } from './helpers.ts';
 
 type Props = Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> & {
   label: string;
-  size: IRadioSizes;
+  size?: 'small' | 'default';
+  error?: ReactNode;
 };
 
-const Radio = forwardRef<HTMLInputElement, Props>(({ label, className, size, ...attrs }, ref) => {
-  const { disabled } = attrs;
-
+const Radio = forwardRef<HTMLInputElement, Props>(({ label, className, size = 'default', error, ...attrs }, ref) => {
   return (
-    <label className={cx(styles.label, styles[size], className, disabled && styles.disabled)}>
-      <span className={styles.wrapper}>
-        <input type="radio" className={styles.input} ref={ref} disabled={disabled} {...attrs} />
-      </span>
+    <label className={cx(styles.label, className, styles[size])}>
+      <input type="radio" className={styles.input} ref={ref} aria-invalid={Boolean(error)} {...attrs} />
+      <span className={styles.box} />
 
       {label}
     </label>