From f12b84e59070504d433340eb7d0ae4c11d6ca2cf Mon Sep 17 00:00:00 2001
From: Renata Motta <renata.motta@vtex.com.br>
Date: Tue, 7 Jun 2022 16:55:18 -0300
Subject: [PATCH] Feat: Adds tokens to `Radio` (#89)

* Feat: Adds tokens to `Radio` (#87)

* Creates Input Radio

* Styles Radio

* Adds Radio to Storybook

* Adds tokens tables

* Fixes Storybook table width

* Fixes Checkbox hovers

* Updates Changelog

* Fix typo

Co-authored-by: Fanny Chien <fannychienn@gmail.com>

* Updates Checkbox Story to use TokenTable

Co-authored-by: Fanny Chien <fannychienn@gmail.com>

* Updates Changelog

* Updates RadioProps to add FSUI props

Co-authored-by: Eduardo Formiga <eduardo.formiga@vtex.com.br>

* Tweaks `Radio` token list order

Co-authored-by: Fanny Chien <fannychienn@gmail.com>
Co-authored-by: Eduardo Formiga <eduardo.formiga@vtex.com.br>
---
 .storybook/storybook.css                      |   5 +
 CHANGELOG.md                                  |   2 +
 .../ui/Checkbox/Checkbox.stories.mdx          | 337 ++++++------------
 .../ui/Checkbox/checkbox.module.scss          |  30 +-
 src/components/ui/Radio/Radio.stories.mdx     | 237 ++++++++++++
 src/components/ui/Radio/Radio.tsx             |  36 ++
 src/components/ui/Radio/index.tsx             |   2 +
 src/components/ui/Radio/radio.module.scss     | 122 +++++++
 8 files changed, 528 insertions(+), 243 deletions(-)
 create mode 100644 src/components/ui/Radio/Radio.stories.mdx
 create mode 100644 src/components/ui/Radio/Radio.tsx
 create mode 100644 src/components/ui/Radio/index.tsx
 create mode 100644 src/components/ui/Radio/radio.module.scss

diff --git a/.storybook/storybook.css b/.storybook/storybook.css
index 7ed8dd0b..15ec9174 100644
--- a/.storybook/storybook.css
+++ b/.storybook/storybook.css
@@ -48,6 +48,11 @@
   width: 50%;
 }
 
+.sbdocs-table td code {
+  line-height: 1.3;
+  white-space: break-spaces;
+}
+
 .sbdocs-table td > div {
   float: left;
   width: 1.5rem;
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9e54bd7e..6d45b0f9 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- Creates `Radio` component ([#89](https://github.com/vtex-sites/gatsby.store/pull/89))
 - Applies new local tokens to `Price` ([#83](https://github.com/vtex-sites/gatsby.store/pull/83))
 - Applies new local tokens to `Alert` ([#77](https://github.com/vtex-sites/gatsby.store/pull/77))
 - Refactors `Button` component and adds Storybook doc ([#52](https://github.com/vtex-sites/gatsby.store/pull/52))
@@ -22,6 +23,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Updates `Checkbox` tokens ([#89](https://github.com/vtex-sites/gatsby.store/pull/89))
 - Uses `Hero` component from FSUI ([#92](https://github.com/vtex-sites/gatsby.store/pull/92))
 - Uses CSS Modules on `Checkbox` component ([#81](https://github.com/vtex-sites/gatsby.store/pull/81))
 - Uses CSS Modules on `QuantitySelector` component ([#75](https://github.com/vtex-sites/gatsby.store/pull/75))
diff --git a/src/components/ui/Checkbox/Checkbox.stories.mdx b/src/components/ui/Checkbox/Checkbox.stories.mdx
index 57c10eda..fe2978a4 100644
--- a/src/components/ui/Checkbox/Checkbox.stories.mdx
+++ b/src/components/ui/Checkbox/Checkbox.stories.mdx
@@ -2,6 +2,12 @@ import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
 
 import Checkbox from '.'
 
+import {
+  TokenTable,
+  TokenRow,
+  TokenDivider,
+} from 'src/../.storybook/components'
+
 <Meta
   title="Atoms/Checkbox"
   component={Checkbox}
@@ -106,111 +112,41 @@ The `Checkbox` component uses [FastStore UI Checkbox](https://www.faststore.dev/
 
 <ArgsTable story="default" />
 
-<table
-  style={{
-    width: '100%',
-  }}
->
-  <thead>
-    <tr>
-      <th>Local token</th>
-      <th>Default value/Global token linked</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>
-        <code>--fs-checkbox-width</code>
-      </td>
-      <td>
-        <code>1.25rem</code>
-      </td>
-    </tr>
-    <tr>
-      <td>
-        <code>--fs-checkbox-height</code>
-      </td>
-      <td>
-        <code>var(--fs-checkbox-width)</code>
-      </td>
-    </tr>
-    <tr>
-      <td>
-        <code>--fs-checkbox-border-width</code>
-      </td>
-      <td>
-        <code>var(--fs-border-width)</code>
-      </td>
-    </tr>
-    <tr>
-      <td>
-        <code>--fs-checkbox-border-radius</code>
-      </td>
-      <td>
-        <code>var(--fs-border-radius)</code>
-      </td>
-    </tr>
-    <tr>
-      <td>
-        <code>--fs-checkbox-border-color</code>
-      </td>
-      <td>
-        <div style={{ backgroundColor: 'var(--fs-border-color)' }} />
-        <code>var(--fs-border-color)</code>
-      </td>
-    </tr>
-    <tr>
-      <td>
-        <code>--fs-checkbox-border-color-hover</code>
-      </td>
-      <td>
-        <div style={{ backgroundColor: 'var(--fs-color-text)' }} />
-        <code>var(--fs-color-text)</code>
-      </td>
-    </tr>
-    <tr>
-      <td>
-        <code>--fs-checkbox-transition</code>
-      </td>
-      <td>
-        <pre
-          style={{
-            fontSize: '0.8125rem',
-            backgroundColor: '#F8F8F8',
-            color: '#333333',
-            padding: '3px 5px',
-            border: '1px solid #EEEEEE',
-            borderRadius: '3px',
-          }}
-        >
-          border var(--fs-transition-timing) var(--fs-transition-function),
-          background-color var(--fs-transition-timing)
-          var(--fs-transition-function), box-shadow var(--fs-transition-timing)
-          var(--fs-transition-function)
-        </pre>
-      </td>
-    </tr>
-    <tr>
-      <td>
-        <code>--fs-checkbox-bkg-color-hover</code>
-      </td>
-      <td>
-        <div style={{ backgroundColor: 'var(--fs-color-primary-bkg-light)' }} />
-        <code>var(--fs-color-primary-bkg-light)</code>
-      </td>
-    </tr>
-    <tr>
-      <td>
-        <code>--fs-checkbox-shadow-hover</code>
-      </td>
-      <td>
-        <code>
-          0 0 0 var(--fs-checkbox-border-width) var(--fs-border-color-active)
-        </code>
-      </td>
-    </tr>
-  </tbody>
-</table>
+<TokenTable>
+  <TokenRow token="--fs-checkbox-width" value="1.25rem" />
+  <TokenRow token="--fs-checkbox-height" value="var(--fs-checkbox-width)" />
+  <TokenDivider />
+  <TokenRow token="--fs-checkbox-border-width" value="var(--fs-border-width)" />
+  <TokenRow
+    token="--fs-checkbox-border-radius"
+    value="var(--fs-border-radius)"
+  />
+  <TokenRow
+    token="--fs-checkbox-border-color"
+    value="var(--fs-border-color)"
+    isColor
+  />
+  <TokenRow
+    token="--fs-checkbox-border-color-hover"
+    value="var(--fs-border-color-active)"
+    isColor
+  />
+  <TokenDivider />
+  <TokenRow
+    token="--fs-checkbox-transition"
+    value="border var(--fs-transition-timing) var(--fs-transition-function), background-color var(--fs-transition-timing) var(--fs-transition-function), box-shadow var(--fs-transition-timing) var(--fs-transition-function)"
+  />
+  <TokenDivider />
+  <TokenRow
+    token="--fs-checkbox-bkg-color-hover"
+    value="var(--fs-color-primary-bkg-light)"
+    isColor
+  />
+  <TokenRow
+    token="--fs-checkbox-shadow-hover"
+    value="0 0 0 var(--fs-checkbox-border-width) var(--fs-border-color-active)"
+  />
+</TokenTable>
 
 ---
 
@@ -232,43 +168,28 @@ The `Checkbox` component uses [FastStore UI Checkbox](https://www.faststore.dev/
   </Story>
 </Canvas>
 
-<table>
-  <thead>
-    <tr>
-      <th>Local token</th>
-      <th>Default value/Global token linked</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>
-        <code>--fs-checkbox-checked-bkg-color</code>
-      </td>
-      <td>
-        <div style={{ backgroundColor: 'var(--fs-color-primary-bkg)' }} />
-        <code>var(--fs-color-primary-bkg)</code>
-      </td>
-    </tr>
-    <tr>
-      <td>
-        <code>--fs-checkbox-checked-bkg-color-hover</code>
-      </td>
-      <td>
-        <div style={{ backgroundColor: 'var(--fs-color-primary-bkg-hover)' }} />
-        <code>var(--fs-color-primary-bkg-hover)</code>
-      </td>
-    </tr>
-    <tr>
-      <td>
-        <code>--fs-checkbox-checked-border-color</code>
-      </td>
-      <td>
-        <div style={{ backgroundColor: 'var(--fs-border-color-active)' }} />
-        <code>var(--fs-border-color-active)</code>
-      </td>
-    </tr>
-  </tbody>
-</table>
+<TokenTable>
+  <TokenRow
+    token="--fs-checkbox-checked-bkg-color"
+    value="var(--fs-color-primary-bkg)"
+    isColor
+  />
+  <TokenRow
+    token="--fs-checkbox-checked-bkg-color-hover"
+    value="var(--fs-color-primary-bkg-hover)"
+    isColor
+  />
+  <TokenRow
+    token="--fs-checkbox-checked-border-color-hover"
+    value="var((--fs-border-color-hover)"
+    isColor
+  />
+  <TokenRow
+    token="--fs-checkbox-checked-shadow-hover"
+    value="0 0 0 var(--fs-checkbox-border-width)
+          var(--fs-checkbox-checked-border-color-hover)"
+  />
+</TokenTable>
 
 ### Disabled
 
@@ -286,51 +207,27 @@ The `Checkbox` component uses [FastStore UI Checkbox](https://www.faststore.dev/
   </Story>
 </Canvas>
 
-<table>
-  <thead>
-    <tr>
-      <th>Local token</th>
-      <th>Default value/Global token linked</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>
-        <code>--fs-checkbox-disabled-bkg-color</code>
-      </td>
-      <td>
-        <div style={{ backgroundColor: 'var(--fs-color-disabled-bkg)' }} />
-        <code>var(--fs-color-disabled-bkg)</code>
-      </td>
-    </tr>
-    <tr>
-      <td>
-        <code>--fs-checkbox-disabled-border-width</code>
-      </td>
-      <td>
-        <code>var(--fs-checkbox-border-width)</code>
-      </td>
-    </tr>
-    <tr>
-      <td>
-        <code>--fs-checkbox-disabled-border-color</code>
-      </td>
-      <td>
-        <div style={{ backgroundColor: 'var(--fs-border-color-disabled)' }} />
-        <code>var(--fs-border-color-disabled)</code>
-      </td>
-    </tr>
-    <tr>
-      <td>
-        <code>--fs-checkbox-disabled-text-color</code>
-      </td>
-      <td>
-        <div style={{ backgroundColor: 'var(--fs-color-disabled-text)' }} />
-        <code>var(--fs-color-disabled-text)</code>
-      </td>
-    </tr>
-  </tbody>
-</table>
+<TokenTable>
+  <TokenRow
+    token="--fs-checkbox-disabled-bkg-color"
+    value="var(--fs-color-disabled-bkg)"
+    isColor
+  />
+  <TokenRow
+    token="--fs-checkbox-disabled-border-width"
+    value="var(--fs-checkbox-border-width)"
+  />
+  <TokenRow
+    token="--fs-checkbox-disabled-border-color"
+    value="var(--fs-border-color-disabled)"
+    isColor
+  />
+  <TokenRow
+    token="--fs-checkbox-disabled-text-color"
+    value="var(--fs-color-disabled-text)"
+    isColor
+  />
+</TokenTable>
 
 ### Partial
 
@@ -348,48 +245,24 @@ The `Checkbox` component uses [FastStore UI Checkbox](https://www.faststore.dev/
   </Story>
 </Canvas>
 
-<table>
-  <thead>
-    <tr>
-      <th>Local token</th>
-      <th>Default value/Global token linked</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>
-        <code>--fs-checkbox-partial-bkg-color</code>
-      </td>
-      <td>
-        <div style={{ backgroundColor: 'var(--fs-color-neutral-0)' }} />
-        <code>var(--fs-color-neutral-0)</code>
-      </td>
-    </tr>
-    <tr>
-      <td>
-        <code>--fs-checkbox-partial-border-width</code>
-      </td>
-      <td>
-        <code>var(--fs-checkbox-border-width)</code>
-      </td>
-    </tr>
-    <tr>
-      <td>
-        <code>--fs-checkbox-partial-border-color</code>
-      </td>
-      <td>
-        <div style={{ backgroundColor: 'var(--fs-color-primary-bkg)' }} />
-        <code>var(--fs-color-primary-bkg)</code>
-      </td>
-    </tr>
-    <tr>
-      <td>
-        <code>--fs-checkbox-partial-hover</code>
-      </td>
-      <td>
-        <div style={{ backgroundColor: 'var(--fs-color-primary-bkg-light)' }} />
-        <code>var(--fs-color-primary-bkg-light)</code>
-      </td>
-    </tr>
-  </tbody>
-</table>
+<TokenTable>
+  <TokenRow
+    token="--fs-checkbox-partial-bkg-color"
+    value="var(--fs-color-body-bkg)"
+    isColor
+  />
+  <TokenRow
+    token="--fs-checkbox-partial-border-width"
+    value="var(--fs-checkbox-border-width)"
+  />
+  <TokenRow
+    token="--fs-checkbox-partial-border-color"
+    value="var(--fs-color-primary-bkg)"
+    isColor
+  />
+  <TokenRow
+    token="--fs-checkbox-partial-bkg-color-hover"
+    value="var(--fs-color-primary-bkg-light)"
+    isColor
+  />
+</TokenTable>
diff --git a/src/components/ui/Checkbox/checkbox.module.scss b/src/components/ui/Checkbox/checkbox.module.scss
index 2d4e8f95..d62cc706 100644
--- a/src/components/ui/Checkbox/checkbox.module.scss
+++ b/src/components/ui/Checkbox/checkbox.module.scss
@@ -12,7 +12,7 @@
   --fs-checkbox-border-width                 : var(--fs-border-width);
   --fs-checkbox-border-radius                : var(--fs-border-radius);
   --fs-checkbox-border-color                 : var(--fs-border-color);
-  --fs-checkbox-border-color-hover           : var(--fs-color-text);
+  --fs-checkbox-border-color-hover           : var(--fs-border-color-active);
 
   --fs-checkbox-transition                   : border var(--fs-transition-timing) var(--fs-transition-function), background-color var(--fs-transition-timing) var(--fs-transition-function), box-shadow var(--fs-transition-timing) var(--fs-transition-function);
 
@@ -22,7 +22,8 @@
   // Checked
   --fs-checkbox-checked-bkg-color            : var(--fs-color-primary-bkg);
   --fs-checkbox-checked-bkg-color-hover      : var(--fs-color-primary-bkg-hover);
-  --fs-checkbox-checked-border-color         : var(--fs-border-color-active);
+  --fs-checkbox-checked-border-color-hover   : var(--fs-border-color-hover);
+  --fs-checkbox-checked-shadow-hover         : 0 0 0 var(--fs-checkbox-border-width) var(--fs-checkbox-checked-border-color-hover);
 
   // Disabled
   --fs-checkbox-disabled-bkg-color           : var(--fs-color-disabled-bkg);
@@ -31,10 +32,10 @@
   --fs-checkbox-disabled-text-color          : var(--fs-color-disabled-text);
 
   // Partial
-  --fs-checkbox-partial-bkg-color            : var(--fs-color-neutral-0);
+  --fs-checkbox-partial-bkg-color            : var(--fs-color-body-bkg);
+  --fs-checkbox-partial-bkg-color-hover      : var(--fs-color-primary-bkg-light);
   --fs-checkbox-partial-border-width         : var(--fs-checkbox-border-width);
   --fs-checkbox-partial-border-color         : var(--fs-color-primary-bkg);
-  --fs-checkbox-partial-hover                : var(--fs-color-primary-bkg-light);
 
   // --------------------------------------------------------
   // Structural Styles
@@ -69,24 +70,30 @@
     transform: rotate(45deg);
   }
 
-  &:hover {
+  &:hover:not(:disabled) {
     background-color: var(--fs-checkbox-bkg-color-hover);
+  }
+
+  &:hover:not(:disabled):not(:focus-visible):not(:focus) {
     border-color: var(--fs-checkbox-border-color-hover);
     box-shadow: var(--fs-checkbox-shadow-hover);
   }
 
   &:checked {
     background-color: var(--fs-checkbox-checked-bkg-color);
-    border-color: var(--fs-checkbox-checked-border-color);
-    border-width: 0;
+    border: none;
 
     &::before {
       opacity: 1;
     }
 
-    &:hover {
+    &:hover:not(:disabled) {
       background-color: var(--fs-checkbox-checked-bkg-color-hover);
-      box-shadow: none;
+    }
+
+    &:hover:not(:disabled):not(:focus-visible):not(:focus) {
+      border-color: var(--fs-checkbox-checked-border-color-hover);
+      box-shadow: var(--fs-checkbox-checked-shadow-hover);
     }
   }
 
@@ -133,12 +140,13 @@
 
     &:checked {
       &:hover:not(:disabled) {
-        background-color: var(--fs-checkbox-partial-hover);
+        background-color: var(--fs-checkbox-partial-bkg-color-hover);
       }
     }
 
     &:hover {
-      background-color: var(--fs-checkbox-partial-hover);
+      background-color: var(--fs-checkbox-partial-bkg-color-hover);
+      box-shadow: var(--fs-checkbox-shadow-hover);
     }
 
     &:disabled {
diff --git a/src/components/ui/Radio/Radio.stories.mdx b/src/components/ui/Radio/Radio.stories.mdx
new file mode 100644
index 00000000..1f86d2cf
--- /dev/null
+++ b/src/components/ui/Radio/Radio.stories.mdx
@@ -0,0 +1,237 @@
+import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
+
+import Radio from '.'
+import {
+  TokenTable,
+  TokenRow,
+  TokenDivider,
+} from 'src/../.storybook/components'
+
+<Meta
+  title="Atoms/Radio"
+  component={Radio}
+  argTypes={{
+    disabled: {
+      type: {
+        name: 'boolean',
+      },
+      description:
+        'Specifies that this input should be disabled. <br/> `boolean`',
+      defaultValue: false,
+    },
+  }}
+/>
+
+export const Template = (args) => <Radio {...args} />
+
+<header>
+
+# Radio
+
+Radios allow users to select one option from a set.
+
+</header>
+
+## Overview
+
+The `Radio` component uses [FastStore UI Radio](https://www.faststore.dev/reference/ui/atoms/Radio) as base.
+
+<Canvas>
+  <Story
+    name="overview-default-1"
+    args={{
+      id: 'overview-radio-default-1',
+      label: 'Label',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+  <Story
+    name="overview-default-2"
+    args={{
+      id: 'overview-radio-default-2',
+      label: 'Label',
+      checked: true,
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+  <Story
+    name="overview-default-3"
+    args={{
+      id: 'overview-radio-default-3',
+      label: 'Label',
+      disabled: true,
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+  <Story
+    name="overview-default-4"
+    args={{
+      id: 'overview-radio-default-4',
+      label: 'Label',
+      disabled: true,
+      checked: true,
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+---
+
+## Usage
+
+`import Radio from '../components/ui/Radio'`
+
+<Canvas>
+  <Story
+    name="default"
+    args={{
+      id: 'radio-default',
+      label: 'Label',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<ArgsTable story="default" />
+
+<TokenTable>
+  <TokenRow token="--fs-radio-width" value="1.25rem" />
+  <TokenRow token="--fs-radio-height" value="var(--fs-radio-width)" />
+  <TokenDivider />
+  <TokenRow token="--fs-radio-border-width" value="var(--fs-border-width)" />
+  <TokenRow
+    token="--fs-radio-border-radius"
+    value="var(--fs-border-radius-circle)"
+  />
+  <TokenRow
+    token="--fs-radio-border-color"
+    value="var(--fs-border-color)"
+    isColor
+  />
+  <TokenRow
+    token="--fs-radio-border-color-hover"
+    value="var(--fs-border-color-hover)"
+    isColor
+  />
+  <TokenDivider />
+  <TokenRow
+    token="--fs-radio-transition"
+    value="border var(--fs-transition-timing) var(--fs-transition-function), background-color var(--fs-transition-timing) var(--fs-transition-function), box-shadow var(--fs-transition-timing) var(--fs-transition-function)"
+  />
+  <TokenDivider />
+  <TokenRow
+    token="--fs-radio-bkg-color-hover"
+    value="var(--fs-color-primary-bkg-light)"
+    isColor
+  />
+  <TokenRow
+    token="--fs-radio-shadow-hover"
+    value="0 0 0 var(--fs-radio-border-width) var(--fs-border-color-active)"
+  />
+</TokenTable>
+
+---
+
+## Nested Elements
+
+### Knob
+
+<TokenTable>
+  <TokenRow token="--fs-radio-knob-width" value="var(--fs-spacing-1)" />
+  <TokenRow token="--fs-radio-knob-height" value="var(--fs-radio-knob-width)" />
+  <TokenRow
+    token="--fs-radio-knob-bkg-color"
+    value="var(--fs-color-body-bkg)"
+    isColor
+  />
+  <TokenRow
+    token="--fs-radio-knob-disabled-bkg-color"
+    value="var(--fs-color-neutral-5)"
+    isColor
+  />
+</TokenTable>
+
+---
+
+## Variants
+
+### Checked
+
+<Canvas>
+  <Story
+    name="checked"
+    args={{
+      id: 'radio-checked',
+      label: 'Label',
+      checked: true,
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<TokenTable>
+  <TokenRow
+    token="--fs-radio-checked-bkg-color"
+    value="var(--fs-color-primary-bkg)"
+    isColor
+  />
+  <TokenRow
+    token="--fs-radio-checked-bkg-color-hover"
+    value="var(--fs-color-primary-bkg-hover)"
+    isColor
+  />
+</TokenTable>
+
+### Disabled
+
+<Canvas>
+  <Story
+    name="disabled"
+    args={{
+      id: 'radio-disabled',
+      label: 'Label',
+      disabled: true,
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+  <Story
+    name="disabled-checked"
+    args={{
+      id: 'radio-disabled-checked',
+      label: 'Label',
+      disabled: true,
+      checked: true,
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<TokenTable>
+  <TokenRow
+    token="--fs-radio-disabled-bkg-color"
+    value="var(--fs-color-disabled-bkg)"
+    isColor
+  />
+  <TokenRow
+    token="--fs-radio-disabled-border-width"
+    value="var(--fs-radio-border-width)"
+  />
+  <TokenRow
+    token="--fs-radio-disabled-border-color"
+    value="var(--fs-border-color-disabled)"
+    isColor
+  />
+  <TokenRow
+    token="--fs-radio-disabled-text-color"
+    value="var(--fs-color-disabled-text)"
+    isColor
+  />
+</TokenTable>
diff --git a/src/components/ui/Radio/Radio.tsx b/src/components/ui/Radio/Radio.tsx
new file mode 100644
index 00000000..1ec5de60
--- /dev/null
+++ b/src/components/ui/Radio/Radio.tsx
@@ -0,0 +1,36 @@
+import { Radio as UIRadio, Label as UILabel } from '@faststore/ui'
+import type { RadioProps as UIRadioProps } from '@faststore/ui'
+
+import styles from './radio.module.scss'
+
+export type RadioProps = {
+  /**
+   * ID to identify input and corresponding label.
+   */
+  id: string
+  /**
+   * The text displayed to identify the input.
+   */
+  label: string
+  /**
+   * The value to identify the input.
+   */
+  value?: string
+  /**
+   * Identify radio in the same group.
+   */
+  name?: string
+} & UIRadioProps
+
+function Radio({ id, label, value, name, ...otherProps }: RadioProps) {
+  return (
+    <div data-fs-radio className={styles.fsRadio}>
+      <UIRadio id={id} value={value ?? label} name={name} {...otherProps} />
+      <UILabel data-fs-label htmlFor={id}>
+        {label}
+      </UILabel>
+    </div>
+  )
+}
+
+export default Radio
diff --git a/src/components/ui/Radio/index.tsx b/src/components/ui/Radio/index.tsx
new file mode 100644
index 00000000..6241b6a1
--- /dev/null
+++ b/src/components/ui/Radio/index.tsx
@@ -0,0 +1,2 @@
+export { default } from './Radio'
+export type { RadioProps } from './Radio'
diff --git a/src/components/ui/Radio/radio.module.scss b/src/components/ui/Radio/radio.module.scss
new file mode 100644
index 00000000..cafc8148
--- /dev/null
+++ b/src/components/ui/Radio/radio.module.scss
@@ -0,0 +1,122 @@
+@import "src/styles/scaffold";
+
+.fs-radio {
+  // --------------------------------------------------------
+  // Design Tokens for radio
+  // --------------------------------------------------------
+
+  // Default properties
+  --fs-radio-width                        : 1.25rem;
+  --fs-radio-height                       : var(--fs-radio-width);
+
+  --fs-radio-border-width                 : var(--fs-border-width);
+  --fs-radio-border-radius                : var(--fs-border-radius-circle);
+  --fs-radio-border-color                 : var(--fs-border-color);
+  --fs-radio-border-color-hover           : var(--fs-border-color-hover);
+
+  --fs-radio-transition                   : border var(--fs-transition-timing) var(--fs-transition-function), background-color var(--fs-transition-timing) var(--fs-transition-function), box-shadow var(--fs-transition-timing) var(--fs-transition-function);
+
+  --fs-radio-bkg-color-hover              : var(--fs-color-primary-bkg-light);
+  --fs-radio-shadow-hover                 : 0 0 0 var(--fs-radio-border-width) var(--fs-border-color-active);
+
+  // Knob
+  --fs-radio-knob-width                   : var(--fs-spacing-1);
+  --fs-radio-knob-height                  : var(--fs-radio-knob-width);
+  --fs-radio-knob-bkg-color               : var(--fs-color-body-bkg);
+  --fs-radio-knob-disabled-bkg-color      : var(--fs-color-neutral-5);
+
+  // Checked
+  --fs-radio-checked-bkg-color            : var(--fs-color-primary-bkg);
+  --fs-radio-checked-bkg-color-hover      : var(--fs-color-primary-bkg-hover);
+
+  // Disabled
+  --fs-radio-disabled-bkg-color           : var(--fs-color-disabled-bkg);
+  --fs-radio-disabled-border-width        : var(--fs-radio-border-width);
+  --fs-radio-disabled-border-color        : var(--fs-border-color-disabled);
+  --fs-radio-disabled-text-color          : var(--fs-color-disabled-text);
+
+  // --------------------------------------------------------
+  // Structural Styles
+  // --------------------------------------------------------
+
+  display: flex;
+  column-gap: var(--fs-spacing-1);
+  align-items: center;
+
+  label { width: 100%; }
+
+  input {
+    position: relative;
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    width: var(--fs-radio-width);
+    height: var(--fs-radio-height);
+    cursor: pointer;
+    border: var(--fs-radio-border-width) solid var(--fs-radio-border-color);
+    border-radius: var(--fs-radio-border-radius);
+    outline: none;
+    transition: var(--fs-radio-transition);
+    appearance: none;
+
+    @include input-focus-ring;
+
+    &::before {
+      width: var(--fs-radio-knob-width);
+      height: var(--fs-radio-knob-height);
+      pointer-events: none;
+      content: "";
+      background-color: var(--fs-radio-knob-bkg-color);
+      border-radius: var(--fs-radio-border-radius);
+      opacity: 0;
+    }
+
+    &:hover:not(:disabled) {
+      background-color: var(--fs-radio-bkg-color-hover);
+    }
+
+    &:hover:not(:disabled):not(:focus-visible):not(:focus) {
+      border-color: var(--fs-radio-border-color-hover);
+      box-shadow: var(--fs-radio-shadow-hover);
+    }
+
+    &:checked {
+      background-color: var(--fs-radio-checked-bkg-color);
+      border: none;
+
+      &::before {
+        opacity: 1;
+      }
+
+      &:hover:not(:disabled) {
+        background-color: var(--fs-radio-checked-bkg-color-hover);
+      }
+
+      &:hover:not(:disabled):not(:focus-visible):not(:focus) {
+        box-shadow: none;
+      }
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      background-color: var(--fs-radio-disabled-bkg-color);
+      border: var(--fs-radio-disabled-border-width) solid var(--fs-radio-disabled-border-color);
+
+      &::before {
+        background-color: var(--fs-radio-knob-disabled-bkg-color);
+      }
+
+      &:checked {
+        &::before {
+          background-color: var(--fs-radio-knob-disabled-bkg-color);
+        }
+      }
+
+      + label {
+        color: var(--fs-radio-disabled-text-color);
+        cursor: not-allowed;
+      }
+    }
+  }
+}