@umbra.ui/core 0.1.0

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

@@ -0,0 +1,441 @@
+# Checkbox
+
+A flexible and customizable checkbox component built with Vue 3 Composition API and TypeScript. The Checkbox component provides multiple visual styles with smooth animations and supports both light and dark themes.
+
+## Installation/Import
+
+```typescript
+import { Checkbox } from "@umbra-ui/core";
+```
+
+**Dependencies:**
+
+- Vue 3.x
+- @umbra-ui/icons (for check and X mark icons)
+
+## Basic Usage
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import { Checkbox } from "@umbra-ui/core";
+
+const isChecked = ref(false);
+
+const handleCheckboxChange = (checked: boolean) => {
+  console.log("Checkbox state:", checked);
+  isChecked.value = checked;
+};
+</script>
+
+<template>
+  <Checkbox
+    :is-checked="isChecked"
+    checkbox-type="circle"
+    @update:is-checked="handleCheckboxChange"
+  />
+</template>
+```
+
+## Props
+
+| Prop Name      | Type                              | Required | Default    | Description                           |
+| -------------- | --------------------------------- | -------- | ---------- | ------------------------------------- |
+| `checkboxType` | `"circle" \| "square" \| "plain"` | No       | `"circle"` | Visual style variant of the checkbox  |
+| `isChecked`    | `boolean`                         | No       | `false`    | Current checked state of the checkbox |
+| `size`         | `number`                          | No       | `24`       | Size of the checkbox in pixels        |
+
+### Checkbox Types
+
+- **`circle`**: Circular checkbox with a filled circle when checked
+- **`square`**: Square checkbox with rounded corners and a check icon when checked
+- **`plain`**: Minimal checkbox that toggles between X mark (unchecked) and check mark (checked)
+
+## Events
+
+| Event Name         | Payload Type | Description                             |
+| ------------------ | ------------ | --------------------------------------- |
+| `update:isChecked` | `boolean`    | Emitted when the checkbox state changes |
+
+### Event Examples
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import { Checkbox } from "@umbra-ui/core";
+
+const checkboxState = ref(false);
+
+const handleCheckboxChange = (checked: boolean) => {
+  console.log("Checkbox toggled to:", checked);
+  checkboxState.value = checked;
+};
+</script>
+
+<template>
+  <Checkbox
+    :is-checked="checkboxState"
+    @update:is-checked="handleCheckboxChange"
+  />
+</template>
+```
+
+## Slots
+
+This component does not use slots. The checkbox content is controlled via the `checkboxType` prop.
+
+## Exposed Methods/Refs
+
+This component does not expose any methods or refs via `defineExpose`.
+
+## CSS Customization
+
+The Checkbox component uses CSS custom properties that can be overridden to customize the appearance:
+
+### Color Variables
+
+```css
+/* Checkbox outer colors */
+--checkbox-border: #cecece;
+--checkbox-bg: #fcfcfc;
+
+/* Checkbox checked state colors */
+--checkbox-checked-border: #0090ff;
+--checkbox-checked-bg: #0090ff;
+
+/* Plain checkbox colors */
+--checkbox-plain-unchecked: #e5484d;
+--checkbox-plain-checked: #0090ff;
+
+/* Square checkbox icon color */
+--checkbox-square-icon: #ffffff;
+```
+
+### Custom Styling Example
+
+```vue
+<template>
+  <Checkbox
+    :is-checked="isChecked"
+    checkbox-type="circle"
+    class="custom-checkbox"
+  />
+</template>
+
+<style>
+.custom-checkbox {
+  --checkbox-checked-bg: #ff6b6b;
+  --checkbox-checked-border: #ff5252;
+}
+</style>
+```
+
+## Examples
+
+### Different Checkbox Types
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import { Checkbox } from "@umbra-ui/core";
+
+const circleChecked = ref(false);
+const squareChecked = ref(false);
+const plainChecked = ref(false);
+</script>
+
+<template>
+  <div class="checkbox-examples">
+    <div class="checkbox-item">
+      <label>Circle Checkbox:</label>
+      <Checkbox
+        :is-checked="circleChecked"
+        checkbox-type="circle"
+        @update:is-checked="circleChecked = $event"
+      />
+    </div>
+
+    <div class="checkbox-item">
+      <label>Square Checkbox:</label>
+      <Checkbox
+        :is-checked="squareChecked"
+        checkbox-type="square"
+        @update:is-checked="squareChecked = $event"
+      />
+    </div>
+
+    <div class="checkbox-item">
+      <label>Plain Checkbox:</label>
+      <Checkbox
+        :is-checked="plainChecked"
+        checkbox-type="plain"
+        @update:is-checked="plainChecked = $event"
+      />
+    </div>
+  </div>
+</template>
+
+<style module>
+.checkbox-examples {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.checkbox-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+</style>
+```
+
+### Different Sizes
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import { Checkbox } from "@umbra-ui/core";
+
+const smallChecked = ref(false);
+const mediumChecked = ref(false);
+const largeChecked = ref(false);
+</script>
+
+<template>
+  <div class="size-examples">
+    <div class="checkbox-item">
+      <label>Small (16px):</label>
+      <Checkbox
+        :is-checked="smallChecked"
+        :size="16"
+        @update:is-checked="smallChecked = $event"
+      />
+    </div>
+
+    <div class="checkbox-item">
+      <label>Medium (24px):</label>
+      <Checkbox
+        :is-checked="mediumChecked"
+        :size="24"
+        @update:is-checked="mediumChecked = $event"
+      />
+    </div>
+
+    <div class="checkbox-item">
+      <label>Large (32px):</label>
+      <Checkbox
+        :is-checked="largeChecked"
+        :size="32"
+        @update:is-checked="largeChecked = $event"
+      />
+    </div>
+  </div>
+</template>
+
+<style module>
+.size-examples {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.checkbox-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+</style>
+```
+
+### Form Integration
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import { Checkbox } from "@umbra-ui/core";
+
+interface FormData {
+  termsAccepted: boolean;
+  newsletter: boolean;
+  notifications: boolean;
+}
+
+const formData = ref<FormData>({
+  termsAccepted: false,
+  newsletter: false,
+  notifications: true,
+});
+
+const handleCheckboxChange = (field: keyof FormData, value: boolean) => {
+  formData.value[field] = value;
+};
+
+const submitForm = () => {
+  if (!formData.value.termsAccepted) {
+    alert("Please accept the terms and conditions");
+    return;
+  }
+
+  console.log("Form submitted:", formData.value);
+};
+</script>
+
+<template>
+  <form class="form-example" @submit.prevent="submitForm">
+    <div class="form-group">
+      <Checkbox
+        :is-checked="formData.termsAccepted"
+        checkbox-type="square"
+        @update:is-checked="handleCheckboxChange('termsAccepted', $event)"
+      />
+      <label>I accept the terms and conditions</label>
+    </div>
+
+    <div class="form-group">
+      <Checkbox
+        :is-checked="formData.newsletter"
+        checkbox-type="circle"
+        @update:is-checked="handleCheckboxChange('newsletter', $event)"
+      />
+      <label>Subscribe to newsletter</label>
+    </div>
+
+    <div class="form-group">
+      <Checkbox
+        :is-checked="formData.notifications"
+        checkbox-type="plain"
+        @update:is-checked="handleCheckboxChange('notifications', $event)"
+      />
+      <label>Enable notifications</label>
+    </div>
+
+    <button type="submit">Submit</button>
+  </form>
+</template>
+
+<style module>
+.form-example {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  max-width: 300px;
+}
+
+.form-group {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+</style>
+```
+
+### Checkbox List
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import { Checkbox } from "@umbra-ui/core";
+
+interface CheckboxItem {
+  id: string;
+  label: string;
+  checked: boolean;
+}
+
+const checkboxItems = ref<CheckboxItem[]>([
+  { id: "1", label: "Option 1", checked: false },
+  { id: "2", label: "Option 2", checked: true },
+  { id: "3", label: "Option 3", checked: false },
+  { id: "4", label: "Option 4", checked: false },
+]);
+
+const handleItemChange = (id: string, checked: boolean) => {
+  const item = checkboxItems.value.find((item) => item.id === id);
+  if (item) {
+    item.checked = checked;
+  }
+};
+
+const selectAll = () => {
+  checkboxItems.value.forEach((item) => {
+    item.checked = true;
+  });
+};
+
+const selectNone = () => {
+  checkboxItems.value.forEach((item) => {
+    item.checked = false;
+  });
+};
+
+const selectedCount = computed(() => {
+  return checkboxItems.value.filter((item) => item.checked).length;
+});
+</script>
+
+<template>
+  <div class="checkbox-list">
+    <div class="list-header">
+      <h3>Select Options ({{ selectedCount }}/{{ checkboxItems.length }})</h3>
+      <div class="list-actions">
+        <button @click="selectAll">Select All</button>
+        <button @click="selectNone">Select None</button>
+      </div>
+    </div>
+
+    <div class="list-items">
+      <div v-for="item in checkboxItems" :key="item.id" class="list-item">
+        <Checkbox
+          :is-checked="item.checked"
+          checkbox-type="square"
+          @update:is-checked="handleItemChange(item.id, $event)"
+        />
+        <label>{{ item.label }}</label>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style module>
+.checkbox-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  max-width: 300px;
+}
+
+.list-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.list-actions {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.list-items {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.list-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+</style>
+```
+
+## Notes
+
+- The checkbox includes smooth scale and opacity transitions for checked/unchecked states
+- Circle and square checkboxes use a scale animation for the inner element
+- Plain checkboxes use opacity transitions to switch between X and check icons
+- All checkbox types support both light and dark themes
+- The component is fully accessible with proper click handling
+- Size is calculated in rem units based on a 17px base font size
+- The component automatically handles the visual state based on the `isChecked` prop

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

@@ -0,0 +1,36 @@
+/* Light theme using Colors */
+:root {
+  /* Checkbox outer colors */
+  --checkbox-border: #cecece; /* gray8 - lighter border for light mode */
+  --checkbox-bg: #fcfcfc; /* gray3 - light background for light mode */
+
+  /* Checkbox checked state colors */
+  --checkbox-checked-border: #0090ff; /* blue9 - same as button primary */
+  --checkbox-checked-bg: #0090ff; /* blue9 - same as button primary */
+
+  /* Plain checkbox colors */
+  --checkbox-plain-unchecked: #e5484d; /* red9 - for X mark */
+  --checkbox-plain-checked: #0090ff; /* blue9 - for check mark */
+
+  /* Square checkbox icon color */
+  --checkbox-square-icon: #ffffff; /* white - for check icon in square checkbox */
+}
+
+/* Dark theme */
+.dark,
+.dark-theme {
+  /* Checkbox outer colors */
+  --checkbox-border: #606060; /* Original dark mode value */
+  --checkbox-bg: #313131; /* Original dark mode value */
+
+  /* Checkbox checked state colors */
+  --checkbox-checked-border: #0090ff; /* blue9 - same as button primary */
+  --checkbox-checked-bg: #0090ff; /* blue9 - same as button primary */
+
+  /* Plain checkbox colors */
+  --checkbox-plain-unchecked: #e5484d; /* red9 - for X mark */
+  --checkbox-plain-checked: #0090ff; /* blue9 - for check mark */
+
+  /* Square checkbox icon color */
+  --checkbox-square-icon: #ffffff; /* white - for check icon in square checkbox */
+}