initial

layers/ui/components/radio/index.vue

@@ -0,0 +1,70 @@
+<template>
+  <div
+    :class="[
+      cn.b(),
+      cn.is('checked', checked),
+      cn.is('disabled', disabled),
+      cn.is('focused', focused),
+      cn.has('label', hasLabel),
+    ]"
+  >
+    <label :class="[cn.e('wrapper')]">
+      <input
+        :name="id"
+        :class="[cn.e('input')]"
+        type="checkbox"
+        :disabled="disabled"
+        :checked="checked"
+        @focus="focused = true"
+        @blur="focused = false"
+        @change="handleChange"
+      >
+
+      <div :class="[cn.e('inner')]" />
+
+      <p :class="[cn.e('label')]">
+        <slot>{{ label }}</slot>
+      </p>
+    </label>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useSlots } from 'vue'
+import useClassname from '../../composables/use-classname'
+
+export interface Props {
+  id: string
+  value: string | number
+  label?: string
+  disabled?: boolean
+  modelValue?: string | number
+  required?: boolean
+}
+
+defineOptions({
+  name: 'UiRadio',
+  modelValue: undefined,
+})
+
+const props = withDefaults(defineProps<Props>(), {
+  disabled: false,
+  required: false,
+})
+
+defineEmits<{
+  'update:modelValue': [state: boolean | string | number]
+  focus: []
+  blur: []
+}>()
+
+const slots = useSlots()
+
+const cn = useClassname('ui-radio')
+
+const { checked, focused, hasLabel, handleChange } = useRadio(props, slots)
+</script>
+
+<style lang="scss">
+@use 'styles';
+</style>

layers/ui/components/radio/styles.scss

@@ -0,0 +1,82 @@
+@use '../../styles/variables' as *;
+@use '../../styles/mixins' as *;
+
+.ui-radio {
+  $self: &;
+
+  --size: 20px;
+
+  display: flex;
+
+  &__wrapper {
+    display: inline-flex;
+    position: relative;
+  }
+
+  &__input {
+    width: 0;
+    height: 0;
+    opacity: 0;
+    cursor: pointer;
+    z-index: -1;
+    margin: 0;
+  }
+
+  &__inner {
+    --border-color: var(--radio-border-color);
+    --border-width: 1px;
+
+    width: var(--size);
+    height: var(--size);
+    border-radius: 50%;
+    outline: var(--border-width) solid var(--border-color);
+    outline-offset: calc(var(--border-width) * -1);
+    font-size: 10px;
+    cursor: pointer;
+    background-clip: content-box;
+    padding: 5px;
+    transition: .2s ease-out;
+    transition-property: outline-color, background-color;
+
+    #{$self}__input:focus-visible + &,
+    #{$self}:not(.is-disabled) &:hover {
+      --border-width: 2px;
+    }
+
+    #{$self}.is-checked & {
+      background-color: var(--radio-checked-background);
+    }
+
+    #{$self}.is-disabled & {
+      --border-color: var(--radio-disabled-border-color);
+
+      cursor: not-allowed;
+    }
+
+    #{$self}.is-disabled.is-checked & {
+      background-color: var(--radio-disabled-checked-background);
+    }
+  }
+
+  &__label {
+    @include txt-i-m;
+
+    margin-left: 8px;
+    margin-top: 1px;
+    color: var(--radio-label-color);
+
+    #{$self}.is-disabled & {
+      color: var(--radio-label-disabled-color);
+      cursor: not-allowed;
+    }
+  }
+
+  @include element-variant('radio', '', (
+          'border-color': $clr-grey-400,
+          'checked-background': $clr-grey-400,
+          'disabled-border-color': $clr-grey-300,
+          'disabled-checked-background': $clr-grey-300,
+          'label-color': $clr-black,
+          'label-disabled-color': $clr-grey-400
+  ))
+}