@tunji_xy/ui 0.0.0-stage → 0.10.0

package/app/components/Radio.vue

@@ -0,0 +1,131 @@
+<template>
+  <div
+    :class="cn('flex flex-col gap-1 text-foreground', attrs.class as string)"
+  >
+    <div
+      :class="
+        cn(
+          'flex items-start',
+          sizes[size].row,
+          disabled && 'cursor-not-allowed opacity-60',
+        )
+      "
+    >
+      <span class="relative flex h-lh shrink-0 items-center">
+        <input
+          :id="inputId"
+          ref="input"
+          v-model="model"
+          v-bind="inputAttrs"
+          type="radio"
+          :class="circleClasses"
+          :name="name"
+          :value="value"
+          :disabled="disabled"
+          :required="required"
+          :aria-describedby="message ? messageId : undefined"
+        />
+        <CircleIcon
+          :class="
+            cn(
+              'pointer-events-none absolute inset-0 m-auto text-primary opacity-0 transition-opacity peer-checked:opacity-100',
+              sizes[size].dot,
+            )
+          "
+          fill="currentColor"
+        />
+      </span>
+
+      <label
+        v-if="label || $slots.default"
+        :for="inputId"
+        :class="
+          cn('select-none', disabled ? 'cursor-not-allowed' : 'cursor-pointer')
+        "
+      >
+        <slot>{{ label }}</slot>
+      </label>
+    </div>
+
+    <p
+      v-if="message"
+      :id="messageId"
+      :class="cn('text-sm', sizes[size].message, 'text-muted-foreground')"
+    >
+      {{ message }}
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, useAttrs, useId, useTemplateRef } from "vue";
+import { CircleIcon } from "@lucide/vue";
+import { cn } from "../lib/cn";
+
+export interface RadioProps {
+  label?: string;
+  hint?: string;
+  size?: "sm" | "md" | "lg";
+  disabled?: boolean;
+  required?: boolean;
+  id?: string;
+  /** Use the same name on every radio in a group, so arrow keys move between them. */
+  name?: string;
+  /** What the v-model is set to when this radio is picked. */
+  value: string | number | boolean;
+}
+
+const props = withDefaults(defineProps<RadioProps>(), {
+  size: "md",
+});
+
+// The `value` of the picked radio in the group.
+const model = defineModel<string | number | boolean | null>();
+
+defineSlots<{
+  /** Label content, when it needs more than plain text (e.g. a link). */
+  default?: () => unknown;
+}>();
+
+// `class` styles the outer wrapper; every other attribute and listener
+// (@change, @focus, data-*) goes to the <input> itself.
+defineOptions({ inheritAttrs: false });
+const attrs = useAttrs();
+const inputAttrs = computed(() => {
+  const { class: _class, ...rest } = attrs;
+  return rest;
+});
+
+const autoId = useId();
+const inputId = computed(() => props.id ?? `ui-radio-${autoId}`);
+const messageId = computed(() => `${inputId.value}-message`);
+const message = computed(() => props.hint);
+
+// Lucide's circle fills its whole grid, so the dot gets its own size, about
+// 40% of the circle around it.
+const sizes = {
+  sm: { row: "gap-2 text-sm", circle: "size-4", dot: "size-1.5", message: "pl-6" },
+  md: { row: "gap-2 text-sm", circle: "size-5", dot: "size-2", message: "pl-7" },
+  lg: { row: "gap-3 text-base", circle: "size-6", dot: "size-2.5", message: "pl-9" },
+} as const;
+
+// The native input is restyled into the circle, so keyboard, forms and
+// screen readers behave exactly like a plain radio button.
+const circleClasses = computed(() =>
+  cn(
+    "peer m-0 cursor-pointer appearance-none rounded-full border border-border bg-transparent outline-none " +
+      "transition-[border-color,box-shadow] checked:border-primary " +
+      "focus-visible:ring-3 disabled:cursor-not-allowed",
+    sizes[props.size].circle,
+    "focus-visible:ring-primary/35",
+    !props.disabled && "not-checked:hover:border-border-strong",
+  ),
+);
+
+const inputEl = useTemplateRef<HTMLInputElement>("input");
+
+defineExpose({
+  focus: () => inputEl.value?.focus(),
+  el: inputEl,
+});
+</script>