@umbra.ui/core 0.1.0

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

@@ -0,0 +1,348 @@
+# Button
+
+A versatile and customizable button component built with Vue 3 Composition API and TypeScript. The Button component provides multiple visual styles, sizes, and states with built-in animations and accessibility features.
+
+## Installation/Import
+
+```typescript
+import { Button } from "@umbra-ui/core";
+```
+
+**Dependencies:**
+
+- Vue 3.x
+- @umbra-ui/icons (for active state animation)
+
+## Basic Usage
+
+```vue
+<script setup lang="ts">
+import { Button } from "@umbra-ui/core";
+
+const handleClick = (event: MouseEvent) => {
+  console.log("Button clicked!", event);
+};
+</script>
+
+<template>
+  <Button
+    title="Click me"
+    button-style="primary"
+    button-type="default"
+    @click="handleClick"
+  />
+</template>
+```
+
+## Props
+
+| Prop Name     | Type                                                                                                     | Required | Default          | Description                          |
+| ------------- | -------------------------------------------------------------------------------------------------------- | -------- | ---------------- | ------------------------------------ |
+| `buttonType`  | `"default" \| "outline" \| "capsule" \| "capline" \| "plain"`                                            | No       | `"default"`      | Visual style variant of the button   |
+| `buttonStyle` | `"primary" \| "secondary" \| "tertiary" \| "quaternary" \| "warning" \| "danger" \| "info" \| "success"` | No       | `"primary"`      | Color scheme for the button          |
+| `buttonSize`  | `"compact" \| "regular" \| "large"`                                                                      | No       | `"regular"`      | Size variant of the button           |
+| `state`       | `"normal" \| "active" \| "disabled"`                                                                     | No       | `"normal"`       | Current state of the button          |
+| `title`       | `string`                                                                                                 | No       | `"Button Title"` | Text content displayed in the button |
+| `tooltip`     | `string \| TooltipConfig`                                                                                | No       | -                | Tooltip text or configuration object |
+
+### Button Types
+
+- **`default`**: Standard button with background color and rounded corners
+- **`outline`**: Button with transparent background and colored border
+- **`capsule`**: Fully rounded button with background color
+- **`capline`**: Fully rounded button with transparent background and border
+- **`plain`**: Minimal button with no background, border, or padding
+
+### Button Styles
+
+- **`primary`**: Blue color scheme (default)
+- **`secondary`**: Gray color scheme
+- **`tertiary`**: Light gray color scheme
+- **`quaternary`**: Very light gray color scheme
+- **`warning`**: Yellow color scheme
+- **`danger`**: Red color scheme
+- **`info`**: Purple color scheme
+- **`success`**: Green color scheme
+
+### Button Sizes
+
+- **`compact`**: Small padding, smaller font size
+- **`regular`**: Standard padding and font size
+- **`large`**: Larger padding and font size
+
+## Events
+
+| Event Name     | Payload Type                         | Description                           |
+| -------------- | ------------------------------------ | ------------------------------------- |
+| `click`        | `MouseEvent`                         | Emitted when the button is clicked    |
+| `update:state` | `"normal" \| "active" \| "disabled"` | Emitted when the button state changes |
+
+### Event Examples
+
+```vue
+<script setup lang="ts">
+const handleClick = (event: MouseEvent) => {
+  console.log("Button clicked at:", event.clientX, event.clientY);
+};
+
+const handleStateChange = (newState: "normal" | "active" | "disabled") => {
+  console.log("Button state changed to:", newState);
+};
+</script>
+
+<template>
+  <Button
+    title="Click me"
+    @click="handleClick"
+    @update:state="handleStateChange"
+  />
+</template>
+```
+
+## Slots
+
+This component does not use slots. The button content is controlled via the `title` prop.
+
+## Exposed Methods/Refs
+
+This component does not expose any methods or refs via `defineExpose`.
+
+## CSS Customization
+
+The Button component uses CSS custom properties that can be overridden to customize the appearance:
+
+### Color Variables
+
+```css
+/* Primary button colors */
+--button-primary-bg: #0090ff;
+--button-primary-text: #ffffff;
+--button-primary-hover-bg: #0588f0;
+
+/* Secondary button colors */
+--button-secondary-bg: #8b8d98;
+--button-secondary-text: #ffffff;
+--button-secondary-hover-bg: #7e8087;
+
+/* Tertiary button colors */
+--button-tertiary-bg: #e3e5e8;
+--button-tertiary-text: #1a1d23;
+--button-tertiary-hover-bg: #d7d9dd;
+
+/* Quaternary button colors */
+--button-quaternary-bg: #f0f2f4;
+--button-quaternary-text: #60646c;
+--button-quaternary-hover-bg: #e8eaed;
+
+/* Warning button colors */
+--button-warning-bg: #ffe629;
+--button-warning-text: #1a1d23;
+--button-warning-hover-bg: #f5dc1f;
+
+/* Danger button colors */
+--button-danger-bg: #e5484d;
+--button-danger-text: #ffffff;
+--button-danger-hover-bg: #d73a3f;
+
+/* Info button colors */
+--button-info-bg: #5b5bd6;
+--button-info-text: #ffffff;
+--button-info-hover-bg: #4f4fc7;
+
+/* Success button colors */
+--button-success-bg: #30a46c;
+--button-success-text: #ffffff;
+--button-success-hover-bg: #2a8f5f;
+
+/* State variables */
+--button-active-opacity: 0.9;
+--button-disabled-opacity: 0.5;
+--button-active-overlay: rgba(0, 0, 0, 0.08);
+```
+
+### Custom Styling Example
+
+```vue
+<template>
+  <Button title="Custom Button" button-style="primary" class="custom-button" />
+</template>
+
+<style>
+.custom-button {
+  --button-primary-bg: #ff6b6b;
+  --button-primary-hover-bg: #ff5252;
+  border-radius: 20px;
+}
+</style>
+```
+
+## Examples
+
+### Different Button Types
+
+```vue
+<script setup lang="ts">
+import { Button } from "@umbra-ui/core";
+</script>
+
+<template>
+  <div class="button-examples">
+    <Button title="Default" button-type="default" />
+    <Button title="Outline" button-type="outline" />
+    <Button title="Capsule" button-type="capsule" />
+    <Button title="Capline" button-type="capline" />
+    <Button title="Plain" button-type="plain" />
+  </div>
+</template>
+
+<style module>
+.button-examples {
+  display: flex;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+</style>
+```
+
+### Different Button Styles
+
+```vue
+<script setup lang="ts">
+import { Button } from "@umbra-ui/core";
+</script>
+
+<template>
+  <div class="style-examples">
+    <Button title="Primary" button-style="primary" />
+    <Button title="Secondary" button-style="secondary" />
+    <Button title="Tertiary" button-style="tertiary" />
+    <Button title="Warning" button-style="warning" />
+    <Button title="Danger" button-style="danger" />
+    <Button title="Info" button-style="info" />
+    <Button title="Success" button-style="success" />
+  </div>
+</template>
+
+<style module>
+.style-examples {
+  display: flex;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+</style>
+```
+
+### Button States and Event Handling
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import { Button } from "@umbra-ui/core";
+
+const buttonState = ref<"normal" | "active" | "disabled">("normal");
+const clickCount = ref(0);
+
+const handleClick = (event: MouseEvent) => {
+  clickCount.value++;
+  console.log(`Button clicked ${clickCount.value} times`);
+
+  // Simulate loading state
+  buttonState.value = "active";
+  setTimeout(() => {
+    buttonState.value = "normal";
+  }, 2000);
+};
+
+const toggleDisabled = () => {
+  buttonState.value = buttonState.value === "disabled" ? "normal" : "disabled";
+};
+</script>
+
+<template>
+  <div class="state-examples">
+    <Button
+      :title="`Clicked ${clickCount} times`"
+      :state="buttonState"
+      button-style="primary"
+      @click="handleClick"
+    />
+
+    <Button
+      title="Toggle Disabled"
+      button-style="secondary"
+      @click="toggleDisabled"
+    />
+  </div>
+</template>
+
+<style module>
+.state-examples {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+}
+</style>
+```
+
+### Different Sizes
+
+```vue
+<script setup lang="ts">
+import { Button } from "@umbra-ui/core";
+</script>
+
+<template>
+  <div class="size-examples">
+    <Button title="Compact" button-size="compact" />
+    <Button title="Regular" button-size="regular" />
+    <Button title="Large" button-size="large" />
+  </div>
+</template>
+
+<style module>
+.size-examples {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+}
+</style>
+```
+
+### With Tooltips
+
+```vue
+<script setup lang="ts">
+import { Button } from "@umbra-ui/core";
+</script>
+
+<template>
+  <div class="tooltip-examples">
+    <Button title="Simple Tooltip" tooltip="This is a simple tooltip" />
+
+    <Button
+      title="Advanced Tooltip"
+      :tooltip="{
+        content: 'This is an advanced tooltip',
+        placement: 'top',
+        delay: 500,
+      }"
+    />
+  </div>
+</template>
+
+<style module>
+.tooltip-examples {
+  display: flex;
+  gap: 1rem;
+}
+</style>
+```
+
+## Notes
+
+- The button includes smooth hover animations with scale transforms
+- Active state shows a ripple animation using the `RippleAnimOutlineIcon`
+- Disabled state applies grayscale filter and prevents pointer events
+- All color schemes support both light and dark themes
+- The component is fully accessible with proper ARIA attributes
+- Box shadows are automatically applied for depth and visual hierarchy

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

@@ -0,0 +1,200 @@
+/* Light theme using Colors */
+:root {
+  /* Primary button colors (using  Blue) */
+  --button-primary-bg: #0090ff; /* blue9 */
+  --button-primary-text: #ffffff;
+  --button-primary-border: #0090ff; /* blue9 */
+  --button-primary-hover-bg: #0588f0; /* blue10 */
+  --button-primary-hover-text: #ffffff;
+
+  /* Secondary button colors (using  Gray) */
+  --button-secondary-bg: #8b8d98; /* gray9 */
+  --button-secondary-text: #ffffff;
+  --button-secondary-border: #8b8d98; /* gray9 */
+  --button-secondary-hover-bg: #7e8087; /* gray10 */
+  --button-secondary-hover-text: #ffffff;
+
+  /* Tertiary button colors (using  Gray lighter) */
+  --button-tertiary-bg: #e3e5e8; /* gray5 */
+  --button-tertiary-text: #1a1d23; /* gray12 */
+  --button-tertiary-border: #e3e5e8; /* gray5 */
+  --button-tertiary-hover-bg: #d7d9dd; /* gray6 */
+  --button-tertiary-hover-text: #1a1d23; /* gray12 */
+
+  /* Quaternary button colors (using  Gray lightest) */
+  --button-quaternary-bg: #f0f2f4; /* gray3 */
+  --button-quaternary-text: #60646c; /* gray11 */
+  --button-quaternary-border: #f0f2f4; /* gray3 */
+  --button-quaternary-hover-bg: #e8eaed; /* gray4 */
+  --button-quaternary-hover-text: #3e4149; /* gray12 */
+
+  /* Warning button colors */
+  --button-warning-bg: #ffe629;
+  --button-warning-text: #1a1d23;
+  --button-warning-border: #ffe629;
+  --button-warning-hover-bg: #f5dc1f;
+  --button-warning-hover-text: #1a1d23;
+
+  /* Danger button colors */
+  --button-danger-bg: #e5484d;
+  --button-danger-text: #ffffff;
+  --button-danger-border: #e5484d;
+  --button-danger-hover-bg: #d73a3f;
+  --button-danger-hover-text: #ffffff;
+
+  /* Info button colors */
+  --button-info-bg: #5b5bd6;
+  --button-info-text: #ffffff;
+  --button-info-border: #5b5bd6;
+  --button-info-hover-bg: #4f4fc7;
+  --button-info-hover-text: #ffffff;
+
+  /* Success button colors */
+  --button-success-bg: #30a46c;
+  --button-success-text: #ffffff;
+  --button-success-border: #30a46c;
+  --button-success-hover-bg: #2a8f5f;
+  --button-success-hover-text: #ffffff;
+
+  /* Outline specific colors */
+  --button-outline-primary-color: #0090ff; /* blue9 */
+  --button-outline-secondary-color: #8b8d98; /* gray9 */
+  --button-outline-tertiary-color: #9b9ea6; /* gray8 */
+  --button-outline-quaternary-color: #b2b5bd; /* gray7 */
+  --button-outline-warning-color: #ab6400;
+  --button-outline-danger-color: #e54d2e;
+  --button-outline-info-color: #5b5bd6;
+  --button-outline-success-color: #30a46c;
+
+  /* Capline specific colors */
+  --button-capline-primary-color: #0090ff; /* blue9 */
+  --button-capline-secondary-color: #8b8d98; /* gray9 */
+  --button-capline-tertiary-color: #9b9ea6; /* gray8 */
+  --button-capline-quaternary-color: #b2b5bd; /* gray7 */
+  --button-capline-warning-color: #ab6400;
+  --button-capline-danger-color: #e54d2e;
+  --button-capline-info-color: #5b5bd6;
+  --button-capline-success-color: #30a46c;
+
+  /* Plain specific colors */
+  --button-plain-primary-color: #0090ff; /* blue9 */
+  --button-plain-secondary-color: #60646c; /* gray11 */
+  --button-plain-tertiary-color: #8b8d98; /* gray9 */
+  --button-plain-quaternary-color: #9b9ea6; /* gray8 */
+  --button-plain-warning-color: #ab6400;
+  --button-plain-danger-color: #e54d2e;
+  --button-plain-info-color: #5b5bd6;
+  --button-plain-success-color: #30a46c;
+
+  /* Active state colors */
+  --button-active-overlay: rgba(0, 0, 0, 0.08); /* blackA3 */
+  --button-active-opacity: 0.9;
+
+  /* Disabled state colors */
+  --button-disabled-opacity: 0.5;
+
+  /* Box shadow colors (using blackA for transparency) */
+  --button-shadow-dark: rgba(255, 255, 255, 0.7); /* ~whiteA11 */
+  --button-shadow-light: rgba(255, 255, 255, 0.7); /* ~whiteA11 */
+}
+
+/* Dark theme */
+.dark,
+.dark-theme {
+  /* Primary button colors */
+  --button-primary-bg: #0090ff;
+  --button-primary-text: #ffffff;
+  --button-primary-border: #0090ff;
+  --button-primary-hover-bg: #0090ff;
+  --button-primary-hover-text: #ffffff;
+
+  /* Secondary button colors */
+  --button-secondary-bg: #484848;
+  --button-secondary-text: #ffffff;
+  --button-secondary-border: #484848;
+  --button-secondary-hover-bg: #484848;
+  --button-secondary-hover-text: #ffffff;
+
+  /* Tertiary button colors */
+  --button-tertiary-bg: #313131;
+  --button-tertiary-text: #ffffff;
+  --button-tertiary-border: #313131;
+  --button-tertiary-hover-bg: #313131;
+  --button-tertiary-hover-text: #ffffff;
+
+  /* Quaternary button colors */
+  --button-quaternary-bg: #222222;
+  --button-quaternary-text: #ffffff;
+  --button-quaternary-border: #222222;
+  --button-quaternary-hover-bg: #222222;
+  --button-quaternary-hover-text: #ffffff;
+
+  /* Warning button colors */
+  --button-warning-bg: #ffe629;
+  --button-warning-text: #1a1d23;
+  --button-warning-border: #ffe629;
+  --button-warning-hover-bg: #f5dc1f;
+  --button-warning-hover-text: #1a1d23;
+
+  /* Danger button colors */
+  --button-danger-bg: #e5484d;
+  --button-danger-text: #ffffff;
+  --button-danger-border: #e5484d;
+  --button-danger-hover-bg: #d73a3f;
+  --button-danger-hover-text: #ffffff;
+
+  /* Info button colors */
+  --button-info-bg: #5b5bd6;
+  --button-info-text: #ffffff;
+  --button-info-border: #5b5bd6;
+  --button-info-hover-bg: #4f4fc7;
+  --button-info-hover-text: #ffffff;
+
+  /* Success button colors */
+  --button-success-bg: #30a46c;
+  --button-success-text: #ffffff;
+  --button-success-border: #30a46c;
+  --button-success-hover-bg: #2a8f5f;
+  --button-success-hover-text: #ffffff;
+
+  /* Outline specific colors */
+  --button-outline-primary-color: #0090ff;
+  --button-outline-secondary-color: #eeeeee;
+  --button-outline-tertiary-color: #b4b4b4;
+  --button-outline-quaternary-color: #7b7b7b;
+  --button-outline-warning-color: #ffe629;
+  --button-outline-danger-color: #e5484d;
+  --button-outline-info-color: #5b5bd6;
+  --button-outline-success-color: #30a46c;
+
+  /* Capline specific colors */
+  --button-capline-primary-color: #0090ff;
+  --button-capline-secondary-color: #eeeeee;
+  --button-capline-tertiary-color: #b4b4b4;
+  --button-capline-quaternary-color: #7b7b7b;
+  --button-capline-warning-color: #ffe629;
+  --button-capline-danger-color: #e5484d;
+  --button-capline-info-color: #5b5bd6;
+  --button-capline-success-color: #30a46c;
+
+  /* Plain specific colors */
+  --button-plain-primary-color: #0090ff;
+  --button-plain-secondary-color: #eeeeee;
+  --button-plain-tertiary-color: #b4b4b4;
+  --button-plain-quaternary-color: #7b7b7b;
+  --button-plain-warning-color: #ffe629;
+  --button-plain-danger-color: #e5484d;
+  --button-plain-info-color: #5b5bd6;
+  --button-plain-success-color: #30a46c;
+
+  /* Active state colors */
+  --button-active-overlay: rgba(0, 0, 0, 0.5);
+  --button-active-opacity: 0.8;
+
+  /* Disabled state colors */
+  --button-disabled-opacity: 0.5;
+
+  /* Box shadow colors */
+  --button-shadow-dark: rgba(0, 0, 0, 0.21);
+  --button-shadow-light: rgba(255, 255, 255, 0.1);
+}

package/src/components/controls/Checkbox/Checkbox.vue

@@ -0,0 +1,164 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { CheckIcon, XmarkIcon } from "@umbra-ui/icons";
+import "./theme.css";
+
+export interface Props {
+  checkboxType?: "circle" | "square" | "plain";
+  isChecked?: boolean;
+  size?: number;
+}
+
+const emit = defineEmits(["update:isChecked"]);
+
+const props = withDefaults(defineProps<Props>(), {
+  checkboxType: "circle",
+  isChecked: false,
+  size: 24,
+});
+
+const onClick = () => {
+  emit("update:isChecked", !props.isChecked);
+};
+</script>
+
+<template>
+  <!-- Circle or Square -->
+  <div v-if="checkboxType !== 'plain'" :class="$style.checkbox">
+    <div
+      :class="[$style.checkbox_outer, $style[`checkbox_outer_${checkboxType}`]]"
+      @click="onClick"
+      :data-checked="isChecked"
+      :style="{
+        '--size': `${size! / 17}rem`,
+      }"
+    >
+      <div
+        :class="[
+          $style.checkbox_inner,
+          $style[`checkbox_inner_${checkboxType}`],
+        ]"
+      >
+        <CheckIcon
+          v-if="checkboxType !== 'circle'"
+          :size="size! * 0.6"
+          :style="{ opacity: isChecked ? 1 : 0 }"
+        />
+      </div>
+    </div>
+  </div>
+  <!-- Plain -->
+  <div v-else :class="$style.plain_checkbox" @click="onClick">
+    <XmarkIcon :size="size" :style="{ opacity: isChecked ? 0 : 1 }" />
+    <CheckIcon :size="size" :style="{ opacity: isChecked ? 1 : 0 }" />
+  </div>
+</template>
+
+<style module>
+.checkbox {
+  display: flex;
+  align-items: center;
+  gap: 0.882rem;
+  cursor: default;
+}
+
+/* Shared outer styles */
+.checkbox_outer {
+  /* Calculate inner size based on total size */
+  /* Original: inner was 15/17rem, padding was 4px, border was 1px */
+  /* Total was ~25px (15 + 4*2 + 1*2) at base size */
+  --inner-size: calc(var(--size) * 0.6); /* 15/25 = 0.6 */
+  --padding: calc(var(--size) * 0.16); /* 4/25 = 0.16 */
+  --border-width: max(1px, calc(var(--size) * 0.04)); /* 1/25 = 0.04 */
+
+  width: var(--size);
+  height: var(--size);
+  box-sizing: border-box;
+  border-width: var(--border-width);
+  border-style: solid;
+  border-color: var(--checkbox-border);
+  background-color: var(--checkbox-bg);
+  cursor: pointer;
+  transition: 0.3s ease-in-out scale, 0.3s ease-in-out opacity,
+    0.3s ease-in-out background-color, 0.3s ease-in-out border-color;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Circle-specific outer styles */
+.checkbox_outer_circle {
+  padding: var(--padding);
+  border-radius: 999px;
+}
+
+/* Square-specific outer styles */
+.checkbox_outer_square {
+  --border-width: max(1.5px, calc(var(--size) * 0.06)); /* 1.5/25 = 0.06 */
+  border-radius: 0.4rem;
+}
+
+/* Checked state for outer */
+.checkbox_outer[data-checked="true"] {
+  border-color: var(--checkbox-checked-border);
+  background-color: transparent;
+}
+
+/* Shared inner styles */
+.checkbox_inner {
+  background-color: transparent;
+  transform: scale(0.5);
+  transition: 0.3s ease-in-out transform, 0.3s ease-in-out opacity,
+    0.3s ease-in-out background-color;
+}
+
+/* Circle-specific inner styles */
+.checkbox_inner_circle {
+  width: var(--inner-size);
+  height: var(--inner-size);
+  border-radius: 999px;
+}
+
+/* Square-specific inner styles */
+.checkbox_inner_square {
+  width: var(--size);
+  height: var(--size);
+  border-radius: 0.4rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--checkbox-square-icon);
+}
+
+.checkbox_inner_square > :first-child {
+  transition: 0.5s ease-in-out opacity;
+}
+
+/* Checked state for inner */
+.checkbox_outer[data-checked="true"] .checkbox_inner {
+  background-color: var(--checkbox-checked-bg);
+  transform: scale(1);
+}
+
+/* Plain checkbox styles */
+.plain_checkbox {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr;
+  grid-template-areas: "content";
+  cursor: default;
+  width: var(--size);
+  height: var(--size);
+  padding: 0.1rem;
+}
+
+.plain_checkbox > :first-child {
+  grid-area: content;
+  color: var(--checkbox-plain-unchecked);
+}
+
+.plain_checkbox > :last-child {
+  grid-area: content;
+  color: var(--checkbox-plain-checked);
+}
+</style>