Added radio component

src/components/Radio/Radio.sass

@@ -0,0 +1,62 @@
+.radio-group
+  display: flex
+  flex-direction: column
+  gap: 8px
+
+  &__label
+    color: hsl(240 6% 10%)
+    font-size: 14px
+    font-weight: 500
+    user-select: none
+
+  &__description
+    color: hsl(240 5% 26%)
+    font-size: 12px
+    user-select: none
+
+  &__error-message
+    color: hsl(0 72% 51%)
+    font-size: 12px
+    user-select: none
+
+  &__items
+    display: flex
+
+.radio
+  display: flex
+  align-items: center
+
+  &__control
+    display: flex
+    align-items: center
+    justify-content: center
+    height: 20px
+    width: 20px
+    border-radius: 10px
+    border: 1px solid hsl(240 5% 84%)
+    background-color: hsl(240 6% 90%)
+    // margin: 2rem
+
+  &__input:focus-visible + &__control
+    outline: 2px solid #33475a
+    outline-offset: 2px
+
+  &__control[data-checked]
+    border-color: #33475a
+    background-color: #577693
+
+  &__control[data-checked][data-invalid]
+    border-color: #33475a
+    background-color: hsl(0 72% 51%)
+
+  &__indicator
+    height: 10px
+    width: 10px
+    border-radius: 5px
+    background-color: white
+
+  &__label
+    margin-left: 8px
+    color: #ffffff
+    font-size: 1rem
+    user-select: none

src/components/Radio/Radio.tsx

@@ -0,0 +1,36 @@
+import './Radio.sass'
+import { RadioGroup } from '@kobalte/core/radio-group'
+import { type Setter, For, Show } from 'solid-js'
+
+interface Props {
+  label?: string
+  data: string[]
+  value: string
+  onChange: Setter<string>
+  gap?: number
+}
+export default (props: Props) => {
+  return (
+    <>
+      <RadioGroup class="radio-group" value={props.value} onChange={props.onChange}>
+        <Show when={props.label}>
+          <RadioGroup.Label class="radio-group__label">{props.label}</RadioGroup.Label>
+        </Show>
+
+        <div class="radio-group__items" role="presentation" style={`gap: ${props.gap || 1}rem`}>
+          <For each={props.data}>
+            {(item) => (
+              <RadioGroup.Item value={item} class="radio">
+                <RadioGroup.ItemInput class="radio__input" />
+                <RadioGroup.ItemControl class="radio__control">
+                  <RadioGroup.ItemIndicator class="radio__indicator" />
+                </RadioGroup.ItemControl>
+                <RadioGroup.ItemLabel class="radio__label">{item}</RadioGroup.ItemLabel>
+              </RadioGroup.Item>
+            )}
+          </For>
+        </div>
+      </RadioGroup>
+    </>
+  )
+}

src/components/index.ts

@@ -19,6 +19,7 @@ export { default as Combobox } from './Combobox/Combobox'
 export { default as File } from './File/File'
 export { default as QR } from './QR/QR'
 export { default as Input } from './Input/Input'
+export { default as Radio } from './Radio/Radio'
 // export { default as OptimizeBackground } from './Optimizers/OptimizeBackground'
 // export { default as OptimizeImage } from './Optimizers/OptimizeImage'
 // export { default as OptimizeLogo } from './Optimizers/OptimizeLogo'