@umbra.ui/core 0.1.0

package/src/components/controls/Radio/README.md

@@ -0,0 +1,591 @@
+# Radio
+
+A radio button group component built with Vue 3 Composition API and TypeScript. The Radio component provides a set of mutually exclusive options with customizable layouts and visual styles.
+
+## Installation/Import
+
+```typescript
+import { Radio } from "@umbra-ui/core";
+import type { ControlItem } from "@umbra-ui/core";
+```
+
+**Dependencies:**
+
+- Vue 3.x
+- @umbra-ui/core (Checkbox component)
+
+## Basic Usage
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import { Radio } from "@umbra-ui/core";
+import type { ControlItem } from "@umbra-ui/core";
+
+const selectedIndex = ref(0);
+
+const radioItems: ControlItem[] = [
+  { title: "Option 1" },
+  { title: "Option 2" },
+  { title: "Option 3" },
+];
+
+const handleRadioClick = (index: number, item: ControlItem) => {
+  console.log("Selected:", item.title, "at index:", index);
+  selectedIndex.value = index;
+};
+</script>
+
+<template>
+  <Radio
+    :items="radioItems"
+    :selected-index="selectedIndex"
+    @click="handleRadioClick"
+  />
+</template>
+```
+
+## Props
+
+| Prop Name       | Type                              | Required | Default                                                    | Description                            |
+| --------------- | --------------------------------- | -------- | ---------------------------------------------------------- | -------------------------------------- |
+| `items`         | `ControlItem[]`                   | Yes      | `[{ title: "One" }, { title: "Two" }, { title: "Three" }]` | Array of radio options to display      |
+| `selectedIndex` | `number`                          | Yes      | `0`                                                        | Index of the currently selected option |
+| `checkboxType`  | `"circle" \| "square" \| "plain"` | No       | `"circle"`                                                 | Visual style of the radio buttons      |
+| `layout`        | `"horizontal" \| "vertical"`      | No       | `"horizontal"`                                             | Layout direction of the radio group    |
+
+### ControlItem Interface
+
+```typescript
+interface ControlItem {
+  title: string;
+  subtitle?: string;
+  disabled?: boolean;
+}
+```
+
+### Checkbox Types
+
+- **`circle`**: Circular radio buttons (default)
+- **`square`**: Square radio buttons with rounded corners
+- **`plain`**: Minimal radio buttons with no background
+
+### Layout Options
+
+- **`horizontal`**: Radio buttons arranged in a row
+- **`vertical`**: Radio buttons arranged in a column
+
+## Events
+
+| Event Name | Payload Type                         | Description                             |
+| ---------- | ------------------------------------ | --------------------------------------- |
+| `click`    | `[index: number, item: ControlItem]` | Emitted when a radio option is selected |
+
+### Event Examples
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import { Radio } from "@umbra-ui/core";
+import type { ControlItem } from "@umbra-ui/core";
+
+const selectedIndex = ref(0);
+
+const handleRadioClick = (index: number, item: ControlItem) => {
+  console.log("Selected option:", item.title);
+  console.log("Selected index:", index);
+  selectedIndex.value = index;
+};
+</script>
+
+<template>
+  <Radio
+    :items="radioItems"
+    :selected-index="selectedIndex"
+    @click="handleRadioClick"
+  />
+</template>
+```
+
+## Slots
+
+This component does not use slots. All content is controlled via props.
+
+## Exposed Methods/Refs
+
+This component does not expose any methods or refs via `defineExpose`.
+
+## CSS Customization
+
+The Radio component uses CSS custom properties that can be overridden to customize the appearance:
+
+### Color Variables
+
+```css
+/* Radio item colors */
+--radio-item-color: #8b8d98;
+--radio-item-selected-color: #1a1d23;
+```
+
+### Custom Styling Example
+
+```vue
+<template>
+  <Radio :items="items" :selected-index="selectedIndex" class="custom-radio" />
+</template>
+
+<style>
+.custom-radio {
+  --radio-item-color: #666;
+  --radio-item-selected-color: #ff6b6b;
+}
+</style>
+```
+
+## Examples
+
+### Basic Radio Group
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import { Radio } from "@umbra-ui/core";
+import type { ControlItem } from "@umbra-ui/core";
+
+const selectedIndex = ref(0);
+
+const options: ControlItem[] = [
+  { title: "Small" },
+  { title: "Medium" },
+  { title: "Large" },
+];
+</script>
+
+<template>
+  <Radio
+    :items="options"
+    :selected-index="selectedIndex"
+    @click="(index) => (selectedIndex = index)"
+  />
+</template>
+```
+
+### Different Layouts
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import { Radio } from "@umbra-ui/core";
+import type { ControlItem } from "@umbra-ui/core";
+
+const horizontalSelected = ref(0);
+const verticalSelected = ref(0);
+
+const options: ControlItem[] = [
+  { title: "Option 1" },
+  { title: "Option 2" },
+  { title: "Option 3" },
+];
+</script>
+
+<template>
+  <div class="layout-examples">
+    <div class="example">
+      <h3>Horizontal Layout</h3>
+      <Radio
+        :items="options"
+        :selected-index="horizontalSelected"
+        layout="horizontal"
+        @click="(index) => (horizontalSelected = index)"
+      />
+    </div>
+
+    <div class="example">
+      <h3>Vertical Layout</h3>
+      <Radio
+        :items="options"
+        :selected-index="verticalSelected"
+        layout="vertical"
+        @click="(index) => (verticalSelected = index)"
+      />
+    </div>
+  </div>
+</template>
+
+<style module>
+.layout-examples {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+
+.example {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+</style>
+```
+
+### Different Checkbox Types
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import { Radio } from "@umbra-ui/core";
+import type { ControlItem } from "@umbra-ui/core";
+
+const circleSelected = ref(0);
+const squareSelected = ref(0);
+const plainSelected = ref(0);
+
+const options: ControlItem[] = [
+  { title: "Circle" },
+  { title: "Square" },
+  { title: "Plain" },
+];
+</script>
+
+<template>
+  <div class="type-examples">
+    <div class="example">
+      <h3>Circle Type</h3>
+      <Radio
+        :items="options"
+        :selected-index="circleSelected"
+        checkbox-type="circle"
+        @click="(index) => (circleSelected = index)"
+      />
+    </div>
+
+    <div class="example">
+      <h3>Square Type</h3>
+      <Radio
+        :items="options"
+        :selected-index="squareSelected"
+        checkbox-type="square"
+        @click="(index) => (squareSelected = index)"
+      />
+    </div>
+
+    <div class="example">
+      <h3>Plain Type</h3>
+      <Radio
+        :items="options"
+        :selected-index="plainSelected"
+        checkbox-type="plain"
+        @click="(index) => (plainSelected = index)"
+      />
+    </div>
+  </div>
+</template>
+
+<style module>
+.type-examples {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+
+.example {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+</style>
+```
+
+### Form Integration
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import { Radio } from "@umbra-ui/core";
+import type { ControlItem } from "@umbra-ui/core";
+
+interface FormData {
+  size: number;
+  color: number;
+  material: number;
+}
+
+const formData = ref<FormData>({
+  size: 0,
+  color: 0,
+  material: 0,
+});
+
+const sizes: ControlItem[] = [
+  { title: "Small" },
+  { title: "Medium" },
+  { title: "Large" },
+  { title: "Extra Large" },
+];
+
+const colors: ControlItem[] = [
+  { title: "Red" },
+  { title: "Blue" },
+  { title: "Green" },
+  { title: "Yellow" },
+];
+
+const materials: ControlItem[] = [
+  { title: "Cotton" },
+  { title: "Polyester" },
+  { title: "Wool" },
+  { title: "Silk" },
+];
+
+const submitForm = () => {
+  console.log("Form submitted:", formData.value);
+};
+</script>
+
+<template>
+  <form class="form-example" @submit.prevent="submitForm">
+    <div class="form-group">
+      <label>Size</label>
+      <Radio
+        :items="sizes"
+        :selected-index="formData.size"
+        @click="(index) => (formData.size = index)"
+      />
+    </div>
+
+    <div class="form-group">
+      <label>Color</label>
+      <Radio
+        :items="colors"
+        :selected-index="formData.color"
+        @click="(index) => (formData.color = index)"
+      />
+    </div>
+
+    <div class="form-group">
+      <label>Material</label>
+      <Radio
+        :items="materials"
+        :selected-index="formData.material"
+        @click="(index) => (formData.material = index)"
+      />
+    </div>
+
+    <button type="submit">Submit</button>
+  </form>
+</template>
+
+<style module>
+.form-example {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  max-width: 400px;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+</style>
+```
+
+### Settings Panel
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import { Radio } from "@umbra-ui/core";
+import type { ControlItem } from "@umbra-ui/core";
+
+const themeSelected = ref(0);
+const languageSelected = ref(0);
+const notificationsSelected = ref(0);
+
+const themes: ControlItem[] = [
+  { title: "Light" },
+  { title: "Dark" },
+  { title: "Auto" },
+];
+
+const languages: ControlItem[] = [
+  { title: "English" },
+  { title: "Spanish" },
+  { title: "French" },
+  { title: "German" },
+];
+
+const notifications: ControlItem[] = [
+  { title: "All" },
+  { title: "Important only" },
+  { title: "None" },
+];
+
+const saveSettings = () => {
+  const settings = {
+    theme: themes[themeSelected.value].title,
+    language: languages[languageSelected.value].title,
+    notifications: notifications[notificationsSelected.value].title,
+  };
+  console.log("Settings saved:", settings);
+};
+</script>
+
+<template>
+  <div class="settings-panel">
+    <h2>Settings</h2>
+
+    <div class="setting-group">
+      <h3>Theme</h3>
+      <Radio
+        :items="themes"
+        :selected-index="themeSelected"
+        @click="(index) => (themeSelected = index)"
+      />
+    </div>
+
+    <div class="setting-group">
+      <h3>Language</h3>
+      <Radio
+        :items="languages"
+        :selected-index="languageSelected"
+        @click="(index) => (languageSelected = index)"
+      />
+    </div>
+
+    <div class="setting-group">
+      <h3>Notifications</h3>
+      <Radio
+        :items="notifications"
+        :selected-index="notificationsSelected"
+        @click="(index) => (notificationsSelected = index)"
+      />
+    </div>
+
+    <button @click="saveSettings">Save Settings</button>
+  </div>
+</template>
+
+<style module>
+.settings-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  max-width: 400px;
+  padding: 2rem;
+  background-color: #f5f5f5;
+  border-radius: 0.5rem;
+}
+
+.setting-group {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+</style>
+```
+
+### Dynamic Radio Groups
+
+```vue
+<script setup lang="ts">
+import { ref, computed } from "vue";
+import { Radio } from "@umbra-ui/core";
+import type { ControlItem } from "@umbra-ui/core";
+
+const selectedCategory = ref(0);
+const selectedSubcategory = ref(0);
+
+const categories: ControlItem[] = [
+  { title: "Electronics" },
+  { title: "Clothing" },
+  { title: "Books" },
+  { title: "Home & Garden" },
+];
+
+const subcategories = computed(() => {
+  const categoryMap: Record<number, ControlItem[]> = {
+    0: [
+      { title: "Smartphones" },
+      { title: "Laptops" },
+      { title: "Tablets" },
+      { title: "Accessories" },
+    ],
+    1: [
+      { title: "Men's Clothing" },
+      { title: "Women's Clothing" },
+      { title: "Kids' Clothing" },
+      { title: "Shoes" },
+    ],
+    2: [
+      { title: "Fiction" },
+      { title: "Non-fiction" },
+      { title: "Textbooks" },
+      { title: "Children's Books" },
+    ],
+    3: [
+      { title: "Furniture" },
+      { title: "Decor" },
+      { title: "Garden Tools" },
+      { title: "Kitchen" },
+    ],
+  };
+
+  return categoryMap[selectedCategory.value] || [];
+});
+
+const handleCategoryChange = (index: number) => {
+  selectedCategory.value = index;
+  selectedSubcategory.value = 0; // Reset subcategory selection
+};
+</script>
+
+<template>
+  <div class="dynamic-radio">
+    <div class="radio-group">
+      <h3>Category</h3>
+      <Radio
+        :items="categories"
+        :selected-index="selectedCategory"
+        @click="handleCategoryChange"
+      />
+    </div>
+
+    <div class="radio-group" v-if="subcategories.length > 0">
+      <h3>Subcategory</h3>
+      <Radio
+        :items="subcategories"
+        :selected-index="selectedSubcategory"
+        @click="(index) => (selectedSubcategory = index)"
+      />
+    </div>
+  </div>
+</template>
+
+<style module>
+.dynamic-radio {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  max-width: 500px;
+}
+
+.radio-group {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+</style>
+```
+
+## Notes
+
+- The component uses the Checkbox component internally for the radio button appearance
+- Only one option can be selected at a time (mutually exclusive)
+- The component supports both light and dark themes
+- Hover effects include a subtle scale transform for better user feedback
+- Selected items have different text color styling
+- The component automatically handles prop changes and updates the internal state
+- Layout spacing is optimized for both horizontal and vertical arrangements
+- The component is fully accessible with proper click handling
+- Radio groups are commonly used in forms for single-choice selections

package/src/components/controls/Radio/Radio.vue

@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import type { ControlItem } from "../SegmentedControl/types";
+import Checkbox from "../Checkbox/Checkbox.vue";
+import "./theme.css";
+export interface Props {
+  items: ControlItem[];
+  selectedIndex: number;
+  checkboxType?: "circle" | "square" | "plain";
+  layout?: "horizontal" | "vertical";
+}
+const props = withDefaults(defineProps<Props>(), {
+  items: () => [{ title: "One" }, { title: "Two" }, { title: "Three" }],
+  selectedIndex: 0,
+  checkboxType: "circle",
+  layout: "horizontal",
+});
+const emit = defineEmits<{
+  click: [index: number, item: ControlItem];
+}>();
+
+const handleClick = (index: number, item: ControlItem) => {
+  selectedIndex.value = index;
+  emit("click", index, item);
+};
+
+const selectedIndex = ref(props.selectedIndex);
+
+// Watch for changes to selectedIndex prop
+watch(
+  () => props.selectedIndex,
+  (newSelectedIndex) => {
+    selectedIndex.value = newSelectedIndex;
+  }
+);
+</script>
+
+<template>
+  <div :class="[$style.container, $style[`container_${layout}`]]">
+    <div
+      :class="$style.item"
+      v-for="(item, index) in items"
+      :key="index"
+      @click="handleClick(index, item)"
+    >
+      <Checkbox
+        :isChecked="selectedIndex === index"
+        @update:isChecked="selectedIndex = index"
+        :checkboxType="checkboxType"
+      />
+      <p :class="['callout', selectedIndex === index && $style.selected]">
+        {{ item.title }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<style module>
+.container {
+  display: flex;
+  flex-direction: column;
+  cursor: default;
+}
+.container_horizontal {
+  flex-direction: row;
+  gap: 22px;
+}
+.container_vertical {
+  flex-direction: column;
+  gap: 15px;
+}
+
+.item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  color: var(--radio-item-color);
+  transition: transform 0.2s ease-in-out;
+}
+.item:hover {
+  transform: scale(1.03);
+}
+.item p {
+  transition: color 0.2s ease-in-out;
+}
+.selected {
+  color: var(--radio-item-selected-color);
+}
+</style>

package/src/components/controls/Radio/theme.css

@@ -0,0 +1,14 @@
+/* Light theme using Colors */
+:root {
+  /* Radio item colors */
+  --radio-item-color: #8b8d98; /* gray9 - muted text for light mode */
+  --radio-item-selected-color: #1a1d23; /* gray12 - dark text for selected state in light mode */
+}
+
+/* Dark theme */
+.dark,
+.dark-theme {
+  /* Radio item colors */
+  --radio-item-color: #b4b4b4; /* Original dark mode value */
+  --radio-item-selected-color: #eeeeee; /* Original dark mode value */
+}