@umbra.ui/core 0.1.0

package/src/components/controls/SegmentedControl/SegmentedControl.vue

@@ -0,0 +1,284 @@
+<script setup lang="ts">
+import {
+  onMounted,
+  onBeforeUnmount,
+  ref,
+  computed,
+  watch,
+  nextTick,
+} from "vue";
+import type { ControlItem } from "./types";
+import "./theme.css";
+
+export interface Props {
+  items: ControlItem[];
+  selectedIndex?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  items: () => [{ title: "One" }, { title: "Two" }, { title: "Three" }],
+  selectedIndex: 0,
+});
+
+const emit = defineEmits<{
+  "update:selectedIndex": [index: number];
+  click: [index: number, item: ControlItem];
+}>();
+
+const selectedItem = computed(() => {
+  const index = props.selectedIndex;
+  if (index >= 0 && index < props.items.length) {
+    return props.items[index];
+  }
+  return props.items[0];
+});
+
+// Watch for changes to the selected index
+watch(
+  () => props.selectedIndex,
+  () => {
+    // Reposition the selected item after updating
+    nextTick(() => {
+      positionSelectedItem(true);
+    });
+  }
+);
+
+const selectedItemRef = ref<HTMLElement | null>(null);
+const itemRefs = ref<(HTMLElement | null)[]>([]);
+
+const isSelected = (title: string) => {
+  return selectedItem.value.title === title;
+};
+
+const updateSelectedItemWidth = () => {
+  if (selectedItemRef.value && itemRefs.value[0]) {
+    const selectedItemElement = selectedItemRef.value;
+    const selectedItemIndex = props.items.findIndex(
+      (item) => item.title === selectedItem.value.title
+    );
+    const selectedItemElementWidth =
+      itemRefs.value[selectedItemIndex]?.offsetWidth;
+
+    if (selectedItemElementWidth) {
+      // Get the computed border width
+      const menuElement = selectedItemElement.parentElement!;
+      const computedStyle = window.getComputedStyle(menuElement);
+      const borderRightWidth = parseFloat(computedStyle.borderRightWidth) || 0;
+
+      // Add border width to the selected item width if it's the last item
+      const isLastItem = selectedItemIndex === props.items.length - 1;
+      const additionalWidth = isLastItem ? borderRightWidth : 0;
+
+      selectedItemElement.style.width = `${
+        selectedItemElementWidth + additionalWidth
+      }px`;
+    }
+  }
+};
+
+const positionSelectedItem = (animate: boolean = true) => {
+  const selectedItemElement = selectedItemRef.value;
+  if (!selectedItemElement) return;
+
+  const selectedItemIndex = props.items.findIndex(
+    (item) => item.title === selectedItem.value.title
+  );
+  const targetElement = itemRefs.value[selectedItemIndex];
+
+  if (targetElement) {
+    const targetRect = targetElement.getBoundingClientRect();
+    const menuRect = selectedItemElement.parentElement!.getBoundingClientRect();
+
+    // Get the computed border width to account for borders
+    const menuElement = selectedItemElement.parentElement!;
+    const computedStyle = window.getComputedStyle(menuElement);
+    const borderLeftWidth = parseFloat(computedStyle.borderLeftWidth) || 0;
+    const borderRightWidth = parseFloat(computedStyle.borderRightWidth) || 0;
+
+    const translateX = targetRect.left - menuRect.left - borderLeftWidth;
+
+    // Temporarily disable transitions if not animating
+    if (!animate) {
+      selectedItemElement.style.transition = "none";
+    }
+
+    selectedItemElement.style.transform = `translateX(${translateX}px)`;
+
+    // Re-enable transitions after a frame if we disabled them
+    if (!animate) {
+      requestAnimationFrame(() => {
+        selectedItemElement.style.transition = "";
+      });
+    }
+
+    // Update width with border consideration
+    const isLastItem = selectedItemIndex === props.items.length - 1;
+    const additionalWidth = isLastItem ? borderRightWidth : 0;
+    selectedItemElement.style.width = `${
+      targetElement.offsetWidth + additionalWidth
+    }px`;
+  }
+};
+
+const onClick = (item: ControlItem, index: number, event: MouseEvent) => {
+  const clickedElement = event.currentTarget as HTMLElement;
+  const selectedItemElement = selectedItemRef.value;
+
+  if (selectedItemElement && clickedElement) {
+    const clickedRect = clickedElement.getBoundingClientRect();
+    const menuRect = selectedItemElement.parentElement!.getBoundingClientRect();
+
+    // Get the computed border width to account for borders
+    const menuElement = selectedItemElement.parentElement!;
+    const computedStyle = window.getComputedStyle(menuElement);
+    const borderLeftWidth = parseFloat(computedStyle.borderLeftWidth) || 0;
+    const borderRightWidth = parseFloat(computedStyle.borderRightWidth) || 0;
+
+    const translateX = clickedRect.left - menuRect.left - borderLeftWidth;
+
+    selectedItemElement.style.transform = `translateX(${translateX}px)`;
+
+    // Update width with border consideration for last item
+    const isLastItem = index === props.items.length - 1;
+    const additionalWidth = isLastItem ? borderRightWidth : 0;
+    selectedItemElement.style.width = `${
+      clickedElement.offsetWidth + additionalWidth
+    }px`;
+
+    // Emit the update event for two-way binding
+    emit("update:selectedIndex", index);
+    emit("click", index, item);
+  }
+};
+
+onMounted(() => {
+  // Position the selected item without animation
+  positionSelectedItem(false);
+
+  window.addEventListener("resize", updateSelectedItemWidth);
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener("resize", updateSelectedItemWidth);
+});
+</script>
+
+<template>
+  <div :class="$style.menu">
+    <div :class="$style.selected" ref="selectedItemRef"></div>
+    <div
+      v-for="(item, index) in items"
+      :key="`toggle-item-${item.title}`"
+      :class="$style.item"
+      ref="itemRefs"
+      @click="onClick(item, index, $event)"
+    >
+      <p
+        :class="[
+          'subheadline',
+          isSelected(item.title) ? $style.selected_title : $style.item_title,
+        ]"
+      >
+        {{ item.title }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<style module>
+.menu {
+  position: relative;
+  text-align: center;
+  cursor: default;
+  user-select: none;
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+  gap: 0;
+  overflow: hidden;
+  background-color: var(--segmentedcontrol-bg);
+  border-radius: var(--segmentedcontrol-border-radius);
+  box-shadow: var(--segmentedcontrol-box-shadow);
+  border: var(--segmentedcontrol-border);
+  flex-shrink: 0;
+  width: fit-content;
+}
+
+.item {
+  flex-grow: 1;
+  text-align: center;
+  padding-top: 0.588rem;
+  padding-bottom: 0.588rem;
+  padding-left: 1.176rem;
+  padding-right: 1.176rem;
+  min-width: fit-content;
+  transition: 0.2s ease-in-out background-color;
+  position: relative; /* Create stacking context */
+  border-radius: var(--segmentedcontrol-border-radius);
+}
+.item:hover {
+  background-color: var(--segmentedcontrol-hover-bg);
+}
+
+.item p {
+  transition: 0.3s ease-in-out opacity, 0.3s ease-in-out color;
+  position: relative; /* Ensure text is above background */
+}
+.item_title {
+  color: var(--segmentedcontrol-text-color);
+}
+
+.selected {
+  padding: 0.588rem;
+  text-align: center;
+  cursor: default;
+  user-select: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: 0;
+  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
+    width 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
+    background-color 0.3s ease-in-out, color 0.3s ease-in-out;
+  transform-origin: center;
+  pointer-events: none;
+  background-color: var(--segmentedcontrol-selected-bg);
+  border-radius: var(--segmentedcontrol-selected-border-radius);
+  box-shadow: var(--segmentedcontrol-box-shadow);
+  border: var(--segmentedcontrol-selected-border);
+}
+
+.selected_title {
+  font-weight: 900;
+  font-variation-settings: "wght" 600;
+  color: var(--segmentedcontrol-selected-text-color);
+}
+
+.item:has(.selected_title):hover {
+  background-color: var(--segmentedcontrol-selected-hover-bg);
+}
+
+/* Override typography classes within this component */
+.item_title:global(.subheadline) {
+  color: var(--segmentedcontrol-text-color);
+}
+
+.selected_title:global(.subheadline) {
+  font-weight: 900;
+  font-variation-settings: "wght" 600;
+  color: var(--segmentedcontrol-selected-text-color);
+}
+
+/* Fallback: Use !important with CSS custom properties if :global() doesn't work */
+.item_title {
+  color: var(--segmentedcontrol-text-color) !important;
+}
+
+.selected_title {
+  font-weight: 900 !important;
+  font-variation-settings: "wght" 600 !important;
+  color: var(--segmentedcontrol-selected-text-color) !important;
+}
+</style>

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

@@ -0,0 +1,60 @@
+/* Light theme using Colors */
+:root {
+  /* SegmentedControl colors - using secondary + default values */
+  --segmentedcontrol-bg: #f0f0f0; /* gray5 - light background for light mode */
+  --segmentedcontrol-selected-bg: white; /* gray9 - muted selected for light mode */
+  --segmentedcontrol-text-color: #60646c; /* gray11 - muted text for light mode */
+  --segmentedcontrol-selected-text-color: #646464; /* white for selected text */
+  --segmentedcontrol-hover-bg: rgba(
+    0,
+    0,
+    0,
+    0.04
+  ); /* blackA2 - subtle hover for light mode */
+  --segmentedcontrol-selected-hover-bg: white;
+  --segmentedcontrol-border: 1px solid #d9d9d9;
+  --segmentedcontrol-border-radius: 0.353rem;
+  --segmentedcontrol-selected-border-radius: 0.353rem;
+  --segmentedcontrol-selected-border: 1px solid white;
+  --segmentedcontrol-shadow-dark: transparent;
+  --segmentedcontrol-shadow-light: transparent;
+  --segmentedcontrol-box-shadow: 0px 1px 0px 0px
+      var(--segmentedcontrol-shadow-dark),
+    inset 0px 1px 0px 0px var(--segmentedcontrol-shadow-light);
+}
+
+/* Dark theme */
+.dark,
+.dark-theme {
+  /* SegmentedControl colors - using secondary + default values for dark mode */
+  --segmentedcontrol-bg: #484848; /* Original dark mode secondary value */
+  --segmentedcontrol-selected-bg: #6e6e6e; /* Original dark mode secondary value */
+  --segmentedcontrol-text-color: #eeeeee; /* Original dark mode secondary value */
+  --segmentedcontrol-selected-text-color: #ffffff; /* white for selected text */
+  --segmentedcontrol-hover-bg: rgba(
+    255,
+    255,
+    255,
+    0.05
+  ); /* Original dark mode value */
+  --segmentedcontrol-selected-hover-bg: rgba(255, 255, 255, 0.05);
+  --segmentedcontrol-border: none;
+  --segmentedcontrol-border-radius: 0.353rem;
+  --segmentedcontrol-selected-border-radius: 0.353rem;
+  --segmentedcontrol-selected-border: none;
+  --segmentedcontrol-shadow-dark: rgba(
+    0,
+    0,
+    0,
+    0.21
+  ); /* Original dark mode value */
+  --segmentedcontrol-shadow-light: rgba(
+    255,
+    255,
+    255,
+    0.1
+  ); /* Original dark mode value */
+  --segmentedcontrol-box-shadow: 0px 1px 0px 0px
+      var(--segmentedcontrol-shadow-dark),
+    inset 0px 1px 0px 0px var(--segmentedcontrol-shadow-light);
+}

package/src/components/controls/SegmentedControl/types.ts

@@ -0,0 +1,5 @@
+export interface ControlItem {
+  title: string;
+  subtitle?: string;
+  disabled?: boolean;
+}