@umbra.ui/core 0.1.0

package/src/components/controls/Switch/Switch.vue

@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import { ref, computed } from "vue";
+import "./theme.css";
+
+export interface Props {
+  switchType?: "default" | "outline";
+  isChecked?: boolean;
+  size?: number;
+  color?: string;
+}
+
+const emit = defineEmits(["update:isChecked"]);
+
+const props = withDefaults(defineProps<Props>(), {
+  switchType: "default",
+  isChecked: false,
+  size: 24, // px value
+  color: "var(--switch-default-color)",
+});
+
+const colorWithOpacity = computed(() => {
+  return `color-mix(in srgb, ${props.color} 25%, transparent)`;
+});
+
+// Convert px to rem (assuming 17px base)
+const pxToRem = (px: number) => px / 17;
+
+// Calculate dynamic values based on size prop
+const padding = computed(() => pxToRem(2)); // 2px padding
+const borderWidth = computed(() =>
+  pxToRem(Math.max(2, Math.round(props.size * 0.08)))
+); // ~8% of size, min 2px
+const switchSize = computed(() => pxToRem(props.size)); // The knob size in rem
+const containerHeight = computed(
+  () => switchSize.value + padding.value * 2 + borderWidth.value * 2
+);
+const containerWidth = computed(
+  () => switchSize.value * 2 + padding.value * 2 + borderWidth.value * 2
+);
+const translateDistance = computed(() => switchSize.value); // Move by exactly one knob width
+
+const onClick = () => {
+  emit("update:isChecked", !props.isChecked);
+};
+</script>
+
+<template>
+  <div
+    :class="[$style.container, { [$style.checked]: isChecked }, $style[switchType!]]"
+    @click="onClick"
+    :style="{
+      '--switch-color': color,
+      '--switch-color-opacity': colorWithOpacity,
+      '--container-width': `${containerWidth}rem`,
+      '--container-height': `${containerHeight}rem`,
+      '--padding': `${padding}rem`,
+      '--switch-size': `${switchSize}rem`,
+      '--translate-distance': `${translateDistance}rem`,
+      '--border-width': `${borderWidth}rem`,
+      '--border-radius': `${containerHeight / 2}rem`,
+    }"
+  >
+    <div :class="$style.switch"></div>
+  </div>
+</template>
+
+<style module>
+.container {
+  width: var(--container-width);
+  height: var(--container-height);
+  padding: var(--padding);
+  border-radius: var(--border-radius);
+  border: var(--border-width) solid;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.container.default {
+  background-color: var(--switch-default-bg);
+  border-color: var(--switch-default-border);
+}
+
+.container.checked.default {
+  background-color: var(--switch-color);
+  border-color: var(--switch-color);
+}
+
+.container.outline {
+  background-color: transparent;
+  border-color: var(--switch-outline-border);
+}
+
+.container.checked.outline {
+  background-color: var(--switch-color-opacity);
+  border-color: var(--switch-color);
+}
+
+.switch {
+  width: var(--switch-size);
+  height: var(--switch-size);
+  border-radius: 50%;
+  transition: transform 0.3s ease;
+}
+
+.container.default .switch {
+  background-color: var(--switch-default-switch);
+}
+
+.container.outline .switch {
+  background-color: var(--switch-outline-switch);
+}
+
+.container.checked.default .switch {
+  background-color: var(--switch-default-switch-checked);
+}
+
+.container.checked.outline .switch {
+  background-color: var(--switch-color);
+}
+
+.container.checked .switch {
+  transform: translateX(var(--translate-distance));
+}
+</style>

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

@@ -0,0 +1,42 @@
+/* Light theme using Colors */
+:root {
+  /* Switch default colors */
+  --switch-default-bg: #e3e5e8; /* gray5 - light background for light mode */
+  --switch-default-border: rgba(
+    0,
+    0,
+    0,
+    0.04
+  ); /* blackA2 - subtle border for light mode */
+  --switch-default-switch: #8b8d98; /* gray9 - muted color for light mode */
+  --switch-default-switch-checked: #ffffff; /* white - for checked state in light mode */
+
+  /* Switch outline colors */
+  --switch-outline-border: #9b9ea6; /* gray8 - light border for light mode */
+  --switch-outline-switch: #8b8d98; /* gray9 - muted color for light mode */
+
+  /* Switch default color scheme */
+  --switch-default-color: #0090ff; /* green9 - default switch color */
+}
+
+/* Dark theme */
+.dark,
+.dark-theme {
+  /* Switch default colors */
+  --switch-default-bg: #484848; /* Original dark mode value */
+  --switch-default-border: rgba(
+    255,
+    255,
+    255,
+    0.05
+  ); /* Original dark mode value */
+  --switch-default-switch: #b4b4b4; /* Original dark mode value */
+  --switch-default-switch-checked: #eeeeee; /* Original dark mode value */
+
+  /* Switch outline colors */
+  --switch-outline-border: #484848; /* Original dark mode value */
+  --switch-outline-switch: #484848; /* Original dark mode value */
+
+  /* Switch default color scheme */
+  --switch-default-color: #0090ff; /* green9 - default switch color */
+}

package/src/components/dialogs/Alert/Alert.vue

@@ -0,0 +1,218 @@
+<!-- ================================================================================================ -->
+<!-- SCRIPT -->
+<!-- ================================================================================================ -->
+<script setup lang="ts">
+import { watch, ref } from "vue";
+import Button from "../../controls/Button/Button.vue";
+import { AlertAction, AlertActionType } from "./types";
+import "./theme.css";
+
+// Props for customization
+const props = defineProps({
+  show: {
+    type: Boolean,
+    required: true,
+  },
+  title: {
+    type: String,
+    required: true,
+  },
+  description: {
+    type: String,
+    required: true,
+  },
+  actions: {
+    type: Array as () => AlertAction[],
+    required: false,
+    default: () => [{ title: "Ok", action: () => {}, type: "Cancel" }],
+  },
+});
+
+const emit = defineEmits(["update:show"]);
+
+watch(
+  () => props.show,
+  (newValue) => {
+    if (newValue === true) {
+      showPopup();
+    } else if (newValue === false) {
+      hidePopup();
+    }
+  }
+);
+
+const overlayOpacity = ref<number>(0);
+const popupOpacity = ref<number>(0);
+const popoverScale = ref<number>(1.1);
+
+// Method to show the popup
+const showPopup = () => {
+  setTimeout(() => {
+    overlayOpacity.value = 1;
+    popupOpacity.value = 1;
+    popoverScale.value = 1;
+  }, 10);
+};
+
+// Method to hide the popup
+const hidePopup = () => {
+  overlayOpacity.value = 0;
+  popupOpacity.value = 0;
+  popoverScale.value = 1.1;
+  setTimeout(() => {
+    emit("update:show", false);
+  }, 300);
+};
+
+// Method to get the color of the button
+const buttonColor = (
+  type: AlertActionType
+): "primary" | "secondary" | "tertiary" | "quaternary" | "danger" => {
+  switch (type) {
+    case "Default":
+      return "primary";
+    case "Secondary":
+      return "secondary";
+    case "Cancel":
+      return "tertiary";
+    case "Destructive":
+      return "danger";
+    default:
+      return "primary";
+  }
+};
+const buttonOrder = (type: AlertActionType, index: number) => {
+  if (type === "Cancel") {
+    if (props.actions.length > 2) {
+      return props.actions.length;
+    }
+    return -1;
+  } else if (type === "Default") {
+    if (props.actions.length > 2) {
+      return -1;
+    }
+    return props.actions.length;
+  }
+  return index;
+};
+const onClick = (action: AlertAction) => {
+  hidePopup();
+  action.action();
+};
+</script>
+<!-- ================================================================================================ -->
+<!-- TEMPLATE -->
+<!-- ================================================================================================ -->
+<template>
+  <div>
+    <!-- Teleport the overlay and popup to body -->
+    <Teleport to="body">
+      <div
+        v-if="props.show"
+        :class="$style.overlay"
+        :style="{ opacity: overlayOpacity }"
+      ></div>
+
+      <!-- Popup container -->
+      <div
+        v-if="props.show"
+        :class="$style.popup"
+        :style="{ opacity: popupOpacity, scale: popoverScale }"
+      >
+        <div :class="$style.content">
+          <!-- Title -->
+          <h2 :class="[$style.title, 'headline']">{{ title }}</h2>
+
+          <!-- Description -->
+          <p :class="[$style.description, 'body']">{{ description }}</p>
+
+          <!-- Actions -->
+          <div
+            :class="[
+              actions.length === 1 ? $style.single_action : '',
+              actions.length === 2 ? $style.binary_action : '',
+              actions.length > 2 ? $style.multiple_actions : '',
+            ]"
+          >
+            <div
+              v-for="(action, index) in actions"
+              :key="`action-${index}`"
+              :style="{ order: buttonOrder(action.type, index) }"
+            >
+              <Button
+                :title="action.title"
+                :button-style="buttonColor(action.type)"
+                @click="onClick(action)"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </Teleport>
+  </div>
+</template>
+<!-- ================================================================================================ -->
+<!-- STYLE -->
+<!-- ================================================================================================ -->
+<style module>
+.popup {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+  transition: 0.2s ease-in-out opacity, 0.2s ease-in-out scale;
+}
+
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background: var(--alert-overlay-bg);
+  transition: 0.2s ease-in-out opacity;
+  z-index: 999;
+}
+
+.content {
+  position: relative;
+  background: var(--alert-content-bg);
+  padding: 1.176rem;
+  border-radius: 0.471rem;
+  box-shadow: 0 2px 10px var(--alert-content-shadow);
+  z-index: 1001;
+  max-width: 20.588rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.706rem;
+  color: var(--alert-content-color);
+}
+
+.title {
+  font-weight: bold;
+}
+
+.description {
+  opacity: var(--alert-description-opacity);
+}
+
+.single_action {
+  display: flex;
+  justify-content: end;
+}
+.binary_action {
+  display: flex;
+  align-items: center;
+  gap: 0.706rem;
+}
+.multiple_actions {
+  display: flex;
+  flex-direction: column;
+  gap: 0.706rem;
+}
+</style>