@umbra.ui/core 0.1.0

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

@@ -0,0 +1,53 @@
+/* Light theme using Colors */
+:root {
+  /* Stepper container colors */
+  --stepper-container-bg: white; 
+  --stepper-container-border: 1px solid #D9D9D9;
+  --stepper-container-shadow-dark: none; /* blackA4 - lighter shadow for light mode */
+  --stepper-container-shadow-light: none
+
+  /* Stepper value colors */
+  --stepper-value-color: #1a1d23; /* gray12 - dark text for light mode */
+
+  /* Stepper icon colors */
+  --stepper-icon-opacity: 0.6; /* slightly more visible in light mode */
+  --stepper-icon-hover-opacity: 1;
+
+  /* Stepper value border colors */
+  --stepper-value-border: #D9D9D9; /* gray5 - light background for light mode */
+}
+
+/* Dark theme */
+.dark,
+.dark-theme {
+  /* Stepper container colors */
+  --stepper-container-bg: #484848; /* Original dark mode value */
+  --stepper-container-border: none;
+  --stepper-container-shadow-dark: rgba(
+    0,
+    0,
+    0,
+    0.21
+  ); /* Original dark mode value */
+  --stepper-container-shadow-light: rgba(
+    255,
+    255,
+    255,
+    0.1
+  ); /* Original dark mode value */
+
+  /* Stepper value colors */
+  --stepper-value-color: #eeeeee; /* Original dark mode value */
+
+  /* Stepper icon colors */
+  --stepper-icon-opacity: 0.5; /* Original dark mode value */
+  --stepper-icon-hover-opacity: 1;
+
+  /* Stepper value border colors */
+  --stepper-value-border: rgba(
+    255,
+    255,
+    255,
+    0.07
+  ); /* Original dark mode value */
+}

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

@@ -0,0 +1,667 @@
+# Switch
+
+A toggle switch component built with Vue 3 Composition API and TypeScript. The Switch component provides an intuitive interface for boolean state management with customizable appearance, size, and color schemes.
+
+## Installation/Import
+
+```typescript
+import { Switch } from "@umbra-ui/core";
+```
+
+**Dependencies:**
+
+- Vue 3.x
+
+## Basic Usage
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import { Switch } from "@umbra-ui/core";
+
+const isEnabled = ref(false);
+
+const handleToggle = (checked: boolean) => {
+  console.log("Switch toggled:", checked);
+  isEnabled.value = checked;
+};
+</script>
+
+<template>
+  <Switch :isChecked="isEnabled" @update:isChecked="handleToggle" />
+</template>
+```
+
+## Props
+
+| Prop Name    | Type                     | Required | Default                         | Description                              |
+| ------------ | ------------------------ | -------- | ------------------------------- | ---------------------------------------- |
+| `switchType` | `"default" \| "outline"` | No       | `"default"`                     | Visual style variant of the switch       |
+| `isChecked`  | `boolean`                | No       | `false`                         | Current checked state of the switch      |
+| `size`       | `number`                 | No       | `24`                            | Size of the switch in pixels             |
+| `color`      | `string`                 | No       | `"var(--switch-default-color)"` | Custom color for the switch when checked |
+
+## Events
+
+| Event Name         | Payload Type | Description                                                       |
+| ------------------ | ------------ | ----------------------------------------------------------------- |
+| `update:isChecked` | `boolean`    | Emitted when the switch is toggled, returns the new checked state |
+
+## Slots
+
+This component does not use slots.
+
+## Exposed Methods/Refs
+
+This component does not expose any methods or refs.
+
+## CSS Customization
+
+The Switch component uses CSS custom properties for easy theming and customization:
+
+```css
+/* Switch default colors */
+--switch-default-bg: #e3e5e8;
+--switch-default-border: rgba(0, 0, 0, 0.04);
+--switch-default-switch: #8b8d98;
+--switch-default-switch-checked: #ffffff;
+
+/* Switch outline colors */
+--switch-outline-border: #9b9ea6;
+--switch-outline-switch: #8b8d98;
+
+/* Switch default color scheme */
+--switch-default-color: #0090ff;
+```
+
+## Examples
+
+### Different Switch Types
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import { Switch } from "@umbra-ui/core";
+
+const defaultSwitch = ref(false);
+const outlineSwitch = ref(true);
+</script>
+
+<template>
+  <div class="switch-examples">
+    <div class="switch-group">
+      <label>Default Switch</label>
+      <Switch
+        switchType="default"
+        :isChecked="defaultSwitch"
+        @update:isChecked="defaultSwitch = $event"
+      />
+    </div>
+
+    <div class="switch-group">
+      <label>Outline Switch</label>
+      <Switch
+        switchType="outline"
+        :isChecked="outlineSwitch"
+        @update:isChecked="outlineSwitch = $event"
+      />
+    </div>
+  </div>
+</template>
+
+<style module>
+.switch-examples {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.switch-group {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+</style>
+```
+
+### Different Sizes
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import { Switch } from "@umbra-ui/core";
+
+const smallSwitch = ref(false);
+const mediumSwitch = ref(true);
+const largeSwitch = ref(false);
+</script>
+
+<template>
+  <div class="size-examples">
+    <div class="size-group">
+      <label>Small (16px)</label>
+      <Switch
+        :size="16"
+        :isChecked="smallSwitch"
+        @update:isChecked="smallSwitch = $event"
+      />
+    </div>
+
+    <div class="size-group">
+      <label>Medium (24px)</label>
+      <Switch
+        :size="24"
+        :isChecked="mediumSwitch"
+        @update:isChecked="mediumSwitch = $event"
+      />
+    </div>
+
+    <div class="size-group">
+      <label>Large (32px)</label>
+      <Switch
+        :size="32"
+        :isChecked="largeSwitch"
+        @update:isChecked="largeSwitch = $event"
+      />
+    </div>
+  </div>
+</template>
+
+<style module>
+.size-examples {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.size-group {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+</style>
+```
+
+### Custom Colors
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import { Switch } from "@umbra-ui/core";
+
+const redSwitch = ref(false);
+const greenSwitch = ref(true);
+const purpleSwitch = ref(false);
+</script>
+
+<template>
+  <div class="color-examples">
+    <div class="color-group">
+      <label>Red Switch</label>
+      <Switch
+        color="#ff4444"
+        :isChecked="redSwitch"
+        @update:isChecked="redSwitch = $event"
+      />
+    </div>
+
+    <div class="color-group">
+      <label>Green Switch</label>
+      <Switch
+        color="#44ff44"
+        :isChecked="greenSwitch"
+        @update:isChecked="greenSwitch = $event"
+      />
+    </div>
+
+    <div class="color-group">
+      <label>Purple Switch</label>
+      <Switch
+        color="#8844ff"
+        :isChecked="purpleSwitch"
+        @update:isChecked="purpleSwitch = $event"
+      />
+    </div>
+  </div>
+</template>
+
+<style module>
+.color-examples {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.color-group {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+</style>
+```
+
+### Form Integration
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import { Switch } from "@umbra-ui/core";
+
+interface FormData {
+  notifications: boolean;
+  darkMode: boolean;
+  autoSave: boolean;
+  analytics: boolean;
+}
+
+const formData = ref<FormData>({
+  notifications: true,
+  darkMode: false,
+  autoSave: true,
+  analytics: false,
+});
+
+const handleSwitchChange = (field: keyof FormData, value: boolean) => {
+  formData.value[field] = value;
+};
+
+const submitForm = () => {
+  console.log("Form submitted:", formData.value);
+};
+</script>
+
+<template>
+  <form @submit.prevent="submitForm" class="settings-form">
+    <h2>Application Settings</h2>
+
+    <div class="form-group">
+      <label>Push Notifications</label>
+      <Switch
+        :isChecked="formData.notifications"
+        @update:isChecked="
+          (value) => handleSwitchChange('notifications', value)
+        "
+      />
+    </div>
+
+    <div class="form-group">
+      <label>Dark Mode</label>
+      <Switch
+        :isChecked="formData.darkMode"
+        @update:isChecked="(value) => handleSwitchChange('darkMode', value)"
+      />
+    </div>
+
+    <div class="form-group">
+      <label>Auto Save</label>
+      <Switch
+        :isChecked="formData.autoSave"
+        @update:isChecked="(value) => handleSwitchChange('autoSave', value)"
+      />
+    </div>
+
+    <div class="form-group">
+      <label>Analytics Tracking</label>
+      <Switch
+        :isChecked="formData.analytics"
+        @update:isChecked="(value) => handleSwitchChange('analytics', value)"
+      />
+    </div>
+
+    <button type="submit">Save Settings</button>
+  </form>
+</template>
+
+<style module>
+.settings-form {
+  max-width: 400px;
+  padding: 1.5rem;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+}
+
+.form-group {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
+  padding: 0.5rem 0;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.form-group:last-of-type {
+  border-bottom: none;
+  margin-bottom: 1.5rem;
+}
+
+label {
+  font-weight: 500;
+  color: #333;
+}
+
+button {
+  width: 100%;
+  padding: 0.75rem;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 1rem;
+}
+
+button:hover {
+  background-color: #0056b3;
+}
+</style>
+```
+
+### Settings Panel
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import { Switch } from "@umbra-ui/core";
+
+const settings = ref({
+  wifi: true,
+  bluetooth: false,
+  location: true,
+  camera: false,
+  microphone: true,
+  storage: false,
+});
+
+const toggleSetting = (key: keyof typeof settings.value) => {
+  settings.value[key] = !settings.value[key];
+};
+</script>
+
+<template>
+  <div class="settings-panel">
+    <h2>Device Settings</h2>
+
+    <div class="setting-item">
+      <div class="setting-info">
+        <h3>Wi-Fi</h3>
+        <p>Connect to wireless networks</p>
+      </div>
+      <Switch
+        :isChecked="settings.wifi"
+        @update:isChecked="settings.wifi = $event"
+      />
+    </div>
+
+    <div class="setting-item">
+      <div class="setting-info">
+        <h3>Bluetooth</h3>
+        <p>Connect to Bluetooth devices</p>
+      </div>
+      <Switch
+        :isChecked="settings.bluetooth"
+        @update:isChecked="settings.bluetooth = $event"
+      />
+    </div>
+
+    <div class="setting-item">
+      <div class="setting-info">
+        <h3>Location Services</h3>
+        <p>Allow apps to access your location</p>
+      </div>
+      <Switch
+        :isChecked="settings.location"
+        @update:isChecked="settings.location = $event"
+      />
+    </div>
+
+    <div class="setting-item">
+      <div class="setting-info">
+        <h3>Camera Access</h3>
+        <p>Allow apps to use your camera</p>
+      </div>
+      <Switch
+        :isChecked="settings.camera"
+        @update:isChecked="settings.camera = $event"
+      />
+    </div>
+
+    <div class="setting-item">
+      <div class="setting-info">
+        <h3>Microphone Access</h3>
+        <p>Allow apps to use your microphone</p>
+      </div>
+      <Switch
+        :isChecked="settings.microphone"
+        @update:isChecked="settings.microphone = $event"
+      />
+    </div>
+
+    <div class="setting-item">
+      <div class="setting-info">
+        <h3>Cloud Storage</h3>
+        <p>Sync data to cloud storage</p>
+      </div>
+      <Switch
+        :isChecked="settings.storage"
+        @update:isChecked="settings.storage = $event"
+      />
+    </div>
+  </div>
+</template>
+
+<style module>
+.settings-panel {
+  max-width: 500px;
+  padding: 1.5rem;
+  background: #f8f9fa;
+  border-radius: 12px;
+}
+
+.setting-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem;
+  margin-bottom: 0.5rem;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.setting-info h3 {
+  margin: 0 0 0.25rem 0;
+  font-size: 1rem;
+  color: #333;
+}
+
+.setting-info p {
+  margin: 0;
+  font-size: 0.875rem;
+  color: #666;
+}
+</style>
+```
+
+### Feature Toggle Dashboard
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import { Switch } from "@umbra-ui/core";
+
+interface Feature {
+  id: string;
+  name: string;
+  description: string;
+  enabled: boolean;
+  category: string;
+}
+
+const features = ref<Feature[]>([
+  {
+    id: "new-ui",
+    name: "New User Interface",
+    description: "Enable the redesigned user interface",
+    enabled: true,
+    category: "UI/UX",
+  },
+  {
+    id: "analytics",
+    name: "Advanced Analytics",
+    description: "Track user behavior and app performance",
+    enabled: false,
+    category: "Analytics",
+  },
+  {
+    id: "notifications",
+    name: "Push Notifications",
+    description: "Send real-time notifications to users",
+    enabled: true,
+    category: "Communication",
+  },
+  {
+    id: "dark-mode",
+    name: "Dark Mode",
+    description: "Enable dark theme for the application",
+    enabled: false,
+    category: "UI/UX",
+  },
+  {
+    id: "beta-features",
+    name: "Beta Features",
+    description: "Access to experimental features",
+    enabled: false,
+    category: "Experimental",
+  },
+]);
+
+const toggleFeature = (featureId: string) => {
+  const feature = features.value.find((f) => f.id === featureId);
+  if (feature) {
+    feature.enabled = !feature.enabled;
+  }
+};
+
+const getFeaturesByCategory = (category: string) => {
+  return features.value.filter((f) => f.category === category);
+};
+
+const categories = ["UI/UX", "Analytics", "Communication", "Experimental"];
+</script>
+
+<template>
+  <div class="feature-dashboard">
+    <h1>Feature Toggle Dashboard</h1>
+
+    <div
+      v-for="category in categories"
+      :key="category"
+      class="category-section"
+    >
+      <h2>{{ category }}</h2>
+      <div class="features-grid">
+        <div
+          v-for="feature in getFeaturesByCategory(category)"
+          :key="feature.id"
+          class="feature-card"
+        >
+          <div class="feature-header">
+            <h3>{{ feature.name }}</h3>
+            <Switch
+              :isChecked="feature.enabled"
+              @update:isChecked="toggleFeature(feature.id)"
+            />
+          </div>
+          <p class="feature-description">{{ feature.description }}</p>
+          <div class="feature-status">
+            <span
+              :class="[
+                'status-badge',
+                feature.enabled ? 'enabled' : 'disabled',
+              ]"
+            >
+              {{ feature.enabled ? "Enabled" : "Disabled" }}
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style module>
+.feature-dashboard {
+  max-width: 800px;
+  padding: 2rem;
+}
+
+.category-section {
+  margin-bottom: 2rem;
+}
+
+.features-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 1rem;
+  margin-top: 1rem;
+}
+
+.feature-card {
+  padding: 1.5rem;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  background: white;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.feature-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.5rem;
+}
+
+.feature-header h3 {
+  margin: 0;
+  font-size: 1.1rem;
+  color: #333;
+}
+
+.feature-description {
+  margin: 0 0 1rem 0;
+  color: #666;
+  font-size: 0.9rem;
+  line-height: 1.4;
+}
+
+.feature-status {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.status-badge {
+  padding: 0.25rem 0.75rem;
+  border-radius: 12px;
+  font-size: 0.8rem;
+  font-weight: 500;
+}
+
+.status-badge.enabled {
+  background-color: #d4edda;
+  color: #155724;
+}
+
+.status-badge.disabled {
+  background-color: #f8d7da;
+  color: #721c24;
+}
+</style>
+```
+
+## Notes
+
+- The component automatically calculates dimensions based on the `size` prop
+- The `color` prop affects both the background and border when the switch is checked
+- The component supports both light and dark themes through CSS custom properties
+- The switch uses smooth transitions for all state changes
+- The component is fully accessible and supports keyboard navigation