@umbra.ui/core 0.2.0 → 0.4.0

package/dist/components/inputs/InputCryptoAddress/InputCryptoAddress.vue

@@ -0,0 +1,512 @@
+<script setup lang="ts">
+import {
+  ref,
+  onMounted,
+  onBeforeUpdate,
+  computed,
+  watch,
+  type ComponentPublicInstance,
+} from "vue";
+import {
+  ChevronRightIcon,
+  CheckIcon,
+  CircleWarningIcon,
+} from "@umbra.ui/icons";
+import gsap from "gsap";
+import { Flip } from "gsap/Flip";
+import "./theme.css";
+gsap.registerPlugin(Flip);
+
+export type CryptoChain = "eth" | "btc" | "sol";
+
+export interface KnownAddress {
+  label: string;
+  address: string;
+}
+
+export interface Props {
+  value?: string;
+  placeholder?: string;
+  state?: "normal" | "active" | "disabled" | "readonly" | "error";
+  size?: "compact" | "normal";
+  chain: CryptoChain;
+  knownAddresses?: KnownAddress[];
+  knownAddressesLabel?: string;
+  validator?: (value: string) => boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  value: "",
+  placeholder: "Enter wallet address",
+  state: "normal",
+  size: "normal",
+  knownAddresses: () => [],
+  knownAddressesLabel: "Known Addresses",
+});
+
+const emit = defineEmits<{
+  "update:value": [value: string];
+}>();
+
+const internalValue = ref(props.value);
+const inputRef = ref<HTMLInputElement | null>(null);
+const isFocused = ref(false);
+
+watch(
+  () => props.value,
+  (newValue) => {
+    internalValue.value = newValue;
+  }
+);
+
+const normalizeValue = (value: string) => value.trim();
+
+const isValidEth = (value: string) => /^0x[a-fA-F0-9]{40}$/.test(value);
+
+const isValidBtc = (value: string) => {
+  const legacy = /^[13][a-km-zA-HJ-NP-Z1-9]{25,34}$/.test(value);
+  const bech32 = /^(bc1)[0-9a-z]{25,87}$/.test(value);
+  return legacy || bech32;
+};
+
+const isValidSol = (value: string) =>
+  /^[1-9A-HJ-NP-Za-km-z]{32,44}$/.test(value);
+
+const validateValue = (value: string) => {
+  if (!value) return false;
+  if (props.validator) {
+    return props.validator(value);
+  }
+  switch (props.chain) {
+    case "eth":
+      return isValidEth(value);
+    case "btc":
+      return isValidBtc(value);
+    case "sol":
+      return isValidSol(value);
+    default:
+      return false;
+  }
+};
+
+const validationState = computed(() => {
+  const value = normalizeValue(internalValue.value);
+  if (!value) return "idle";
+  return validateValue(value) ? "valid" : "invalid";
+});
+
+const computedState = computed(() => {
+  if (props.state === "disabled" || props.state === "readonly") {
+    return props.state;
+  }
+  if (validationState.value === "invalid") return "error";
+  return props.state;
+});
+
+const statusMessage = computed(() => {
+  if (validationState.value === "invalid") return "Invalid address";
+  if (validationState.value === "valid") return "Valid address";
+  return "";
+});
+
+const iconColor = computed(() => {
+  if (validationState.value === "valid") {
+    return "black";
+  }
+  if (validationState.value === "invalid" || computedState.value === "error") {
+    return "var(--input-error-text)";
+  }
+  switch (computedState.value) {
+    case "readonly":
+      return "var(--input-readonly-text)";
+    case "disabled":
+      return "var(--input-disabled-text)";
+    default:
+      return "var(--InlineDropdown-button-text-color)";
+  }
+});
+
+const handleInput = (event: Event) => {
+  const target = event.target as HTMLInputElement;
+  internalValue.value = target.value.trim();
+  emit("update:value", internalValue.value);
+};
+
+const handleFocus = () => {
+  isFocused.value = true;
+  inputRef.value?.select();
+  openList();
+};
+
+const handleBlur = () => {
+  isFocused.value = false;
+  closeList();
+};
+
+const focusInput = () => {
+  if (
+    computedState.value === "disabled" ||
+    computedState.value === "readonly"
+  ) {
+    return;
+  }
+  inputRef.value?.focus();
+};
+
+const knownItems = computed(() => props.knownAddresses ?? []);
+const hasKnown = computed(() => knownItems.value.length > 0);
+
+const selectKnownAddress = (item: KnownAddress) => {
+  internalValue.value = item.address;
+  emit("update:value", item.address);
+  if (!itemsInDrawer.value) {
+    toggleItems();
+  }
+  isFocused.value = false;
+  inputRef.value?.blur();
+};
+
+const itemsInDrawer = ref(true);
+const drawerRef = ref<HTMLElement | null>(null);
+const listRef = ref<HTMLElement | null>(null);
+const itemRefs = ref<HTMLElement[]>([]);
+
+const setItemRef = (el: Element | ComponentPublicInstance | null) => {
+  if (el instanceof HTMLElement) {
+    itemRefs.value.push(el);
+  }
+};
+
+onBeforeUpdate(() => {
+  itemRefs.value = [];
+});
+
+const toggleItems = () => {
+  const drawer = drawerRef.value;
+  const itemList = listRef.value;
+
+  if (!drawer || !itemList) {
+    return;
+  }
+
+  const targets = itemRefs.value;
+
+  if (targets.length === 0) return;
+
+  const isInDrawer = targets[0].parentElement === drawer;
+  const destination = isInDrawer ? itemList : drawer;
+
+  const state = Flip.getState([...targets, itemList, drawer], {
+    props: "opacity",
+  });
+
+  for (const target of targets) {
+    destination.appendChild(target);
+    gsap.set(target, { opacity: isInDrawer ? 1 : 0 });
+  }
+
+  itemsInDrawer.value = !isInDrawer;
+
+  Flip.from(state, {
+    duration: 0.3,
+    ease: "power1.inOut",
+  });
+};
+
+const openList = () => {
+  if (!hasKnown.value || !itemsInDrawer.value) return;
+  toggleItems();
+};
+
+const closeList = () => {
+  if (!hasKnown.value || itemsInDrawer.value) return;
+  toggleItems();
+};
+
+onMounted(() => {
+  for (const itemElement of itemRefs.value) {
+    itemElement.style.opacity = "0";
+  }
+});
+</script>
+
+<template>
+  <div :class="$style.container">
+    <div ref="drawerRef" :class="$style.item_drawer">
+      <div v-if="hasKnown" :ref="setItemRef" :class="$style.list_header">
+        <p :class="['subheadline', $style.list_header_text]">
+          {{ knownAddressesLabel }}
+        </p>
+      </div>
+      <div
+        v-for="item in knownItems"
+        :key="item.address"
+        :ref="setItemRef"
+        :class="[
+          $style.item,
+          internalValue === item.address ? $style.item_selected : '',
+        ]"
+        @mousedown.prevent="selectKnownAddress(item)"
+      >
+        <div :class="$style.item_content">
+          <p class="body">{{ item.label }}</p>
+          <p class="subheadline-mono">{{ item.address }}</p>
+        </div>
+        <CheckIcon
+          v-if="internalValue === item.address"
+          :color="iconColor"
+          size="16"
+        />
+      </div>
+    </div>
+    <div :class="$style.identity_card">
+      <div
+        :class="[
+          $style.button,
+          !itemsInDrawer ? $style.button_drawer_open : '',
+          validationState === 'valid' ? $style.button_valid : '',
+          validationState === 'invalid' ? $style.button_error : '',
+          isFocused && !hasKnown ? $style.button_focus : '',
+        ]"
+        @click="focusInput"
+      >
+        <input
+          ref="inputRef"
+          class="body-mono"
+          type="text"
+          :placeholder="placeholder"
+          :value="internalValue"
+          :disabled="computedState === 'disabled'"
+          :readonly="computedState === 'readonly'"
+          autocomplete="new-password"
+          autocorrect="off"
+          autocapitalize="off"
+          spellcheck="false"
+          name="crypto-address"
+          inputmode="text"
+          :class="$style.input"
+          @input="handleInput"
+          @focus="handleFocus"
+          @blur="handleBlur"
+        />
+        <div :class="$style.icon_row">
+          <div
+            v-if="hasKnown"
+            :class="$style.icon"
+            :style="{
+              transform:
+                itemsInDrawer || !hasKnown ? 'rotate(0)' : 'rotate(90deg)',
+            }"
+          >
+            <ChevronRightIcon :color="iconColor" />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      ref="listRef"
+      :class="[
+        $style.item_list,
+        itemsInDrawer || !hasKnown ? $style.item_list_hidden : '',
+      ]"
+    ></div>
+    <p
+      v-if="validationState !== 'idle'"
+      :class="[
+        $style.status_message,
+        validationState === 'invalid'
+          ? $style.error_message
+          : $style.valid_message,
+        'footnote',
+      ]"
+    >
+      {{ statusMessage }}
+    </p>
+  </div>
+</template>
+
+<style module>
+.container {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+.button {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.471rem;
+  flex-grow: 1;
+  background-color: var(--InlineDropdown-button-bg);
+  font-weight: 700;
+  cursor: text;
+  user-select: none;
+  transition: 0.3s ease-in-out color, 0.3s ease-in-out background-color,
+    0.3s ease-in-out transform, 0.3s ease-in-out border-radius,
+    0.3s ease-in-out border;
+  transform: scale(1);
+  will-change: transform;
+  padding-left: 0.882rem;
+  padding-right: 0.882rem;
+  padding-top: 0.588rem;
+  padding-bottom: 0.588rem;
+  font-size: var(--callout);
+  border: 1px solid var(--InlineDropdown-border);
+  border-radius: 0.471rem;
+}
+.button_drawer_open {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  border-color: transparent;
+}
+.button_error {
+  border-color: var(--input-error-border);
+  background-color: var(--crypto-button-error-bg);
+}
+.button_valid {
+  border-color: var(--input-success-text);
+  background-color: var(--crypto-button-valid-bg);
+}
+.button_valid > input {
+  color: var(--crypto-button-valid-text);
+}
+.button_focus {
+  border-color: var(--crypto-button-focus-border);
+}
+.item_drawer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr;
+  grid-template-areas: "content";
+  pointer-events: none;
+}
+.identity_card {
+  display: flex;
+  align-items: center;
+  gap: 0.471rem;
+  z-index: 2;
+}
+.identity_card > :first-child {
+  width: 100%;
+  height: 100%;
+}
+
+.input {
+  flex: 1;
+  border: none;
+  background: transparent;
+  outline: none;
+  color: var(--InlineDropdown-button-text-color);
+  min-width: 0;
+  width: 100%;
+  flex-grow: 1;
+}
+
+.input::placeholder {
+  color: var(--input-placeholder);
+}
+
+.icon_row {
+  display: flex;
+  align-items: center;
+  gap: 0.353rem;
+}
+
+.icon {
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+  opacity: 0.6;
+  transition: transform 0.2s ease;
+}
+.icon > svg {
+  width: 1rem;
+  height: 1rem;
+}
+.item_list {
+  display: flex;
+  flex-direction: column;
+  transition: padding-top 0.3s ease, border 0.3s ease;
+}
+.item_list > :last-child {
+  border-bottom-left-radius: 0.471rem;
+  border-bottom-right-radius: 0.471rem;
+}
+.list_header {
+  grid-area: content;
+  border-left: 1px solid var(--InlineDropdown-border);
+  border-right: 1px solid var(--InlineDropdown-border);
+  border-bottom: 1px solid var(--InlineDropdown-border);
+  border-top: 1px solid var(--InlineDropdown-border);
+  padding: 0.353rem 0.706rem;
+  background-color: var(--crypto-known-header-bg);
+}
+
+.list_header_text {
+  margin: 0;
+  color: var(--crypto-known-header-text);
+  opacity: 1;
+}
+.item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  grid-area: content;
+  border-bottom: 1px solid var(--InlineDropdown-border);
+  border-left: 1px solid var(--InlineDropdown-border);
+  border-right: 1px solid var(--InlineDropdown-border);
+  padding-left: 0.706rem;
+  padding-right: 0.706rem;
+  padding-top: 0.471rem;
+  padding-bottom: 0.471rem;
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+  user-select: none;
+  width: 100%;
+  background-color: var(--InlineDropdown-item-bg);
+}
+.item:hover {
+  background-color: var(--InlineDropdown-item-hover-bg);
+}
+.item_selected {
+  background-color: var(--InlineDropdown-item-selected-bg);
+  border-top: 1px solid var(--InlineDropdown-item-selected-border);
+  border-bottom: 1px solid var(--InlineDropdown-item-selected-border);
+}
+/*  targets the item immediately before the selected one and removes its bottom border */
+.item:has(+ .item_selected) {
+  border-bottom: none;
+}
+.item > svg {
+  width: 1rem;
+  height: 1rem;
+  opacity: 0.7;
+}
+
+.item_content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.118rem;
+}
+.item_content > :first-child {
+  opacity: 0.7;
+}
+
+.status_message {
+  margin-top: 0.235rem;
+}
+
+.error_message {
+  color: var(--input-error-text);
+}
+
+.valid_message {
+  color: var(--input-success-text);
+}
+</style>

package/dist/components/inputs/InputCryptoAddress/README.md

@@ -0,0 +1,45 @@
+## InputCryptoAddress
+
+Inline wallet address input with chain-specific validation and a known-address dropdown.
+
+### Usage
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import { InputCryptoAddress } from "@umbra.ui/core";
+
+const address = ref("");
+const knownAddresses = [
+  { label: "Treasury", address: "0x742d35Cc6634C0532925a3b844Bc454e4438f44e" },
+  {
+    label: "Cold Wallet",
+    address: "0x66f820a414680b5bcda5eeca5dea238543f42054",
+  },
+];
+</script>
+
+<template>
+  <InputCryptoAddress
+    v-model:value="address"
+    chain="eth"
+    :known-addresses="knownAddresses"
+    placeholder="Paste wallet address"
+  />
+</template>
+```
+
+### Props
+
+- `value`: current input value (for `v-model:value`).
+- `chain`: `"eth" | "btc" | "sol"` for built-in validation.
+- `knownAddresses`: array of `{ label, address }` shown on focus.
+- `knownAddressesLabel`: optional header text above the dropdown.
+- `validator`: optional custom validator `(value) => boolean`.
+- `placeholder`, `state`, `size`: standard input props.
+
+### Behavior
+
+- Shows “Valid address” or “Invalid address” based on validation.
+- Displays a check icon on valid entries and a warning icon on invalid entries.
+- When focused, shows the known-address dropdown (no filtering by input).

package/dist/components/inputs/InputCryptoAddress/theme.css

@@ -0,0 +1,80 @@
+/* Light theme using Colors */
+:root {
+  /* Alert overlay colors */
+  --alert-overlay-bg: rgba(
+    0,
+    0,
+    0,
+    0.4
+  ); /* blackA8 - lighter overlay for light mode */
+
+  /* Alert content colors */
+  --alert-content-bg: #ffffff; /* white background for light mode */
+  --alert-content-color: #1a1d23; /* gray12 - dark text for light mode */
+  --alert-content-shadow: rgba(
+    0,
+    0,
+    0,
+    0.08
+  ); /* blackA6 - lighter shadow for light mode */
+
+  /* Alert description colors */
+  --alert-description-opacity: 0.7; /* slightly more visible in light mode */
+
+  /* Alert text field colors */
+  --alert-text-field-bg: #f3f4f6;
+  --alert-text-field-border: rgba(0, 0, 0, 0.1);
+  --alert-text-field-color: #1a1d23;
+  --alert-text-field-focus-bg: #ffffff;
+  --alert-text-field-border-focused: #0090ff;
+
+  /* Alert error color */
+  --alert-error-color: #e5484d;
+
+  /* Alert destructive button color */
+  --alert-destructive-color: #e5484d; /* red9 - destructive action color */
+
+  /* InputCryptoAddress colors */
+  --crypto-button-error-bg: #fde8ea;
+  --crypto-button-valid-bg: #f3f4f6;
+  --crypto-button-valid-text: #1a1d23;
+  --crypto-button-focus-border: #0090ff;
+  --crypto-known-header-bg: #f3f4f6;
+  --crypto-known-header-text: #1a1d23;
+}
+
+/* Dark theme */
+.dark,
+.dark-theme {
+  /* Alert overlay colors */
+  --alert-overlay-bg: rgba(0, 0, 0, 0.7); /* Original dark mode value */
+
+  /* Alert content colors */
+  --alert-content-bg: #222222; /* Original dark mode value */
+  --alert-content-color: #eeeeee; /* Original dark mode value */
+  --alert-content-shadow: rgba(0, 0, 0, 0.1); /* Original dark mode value */
+
+  /* Alert description colors */
+  --alert-description-opacity: 0.5; /* Original dark mode value */
+
+  /* Alert text field colors */
+  --alert-text-field-bg: #2a2a2a;
+  --alert-text-field-border: #3a3a3a;
+  --alert-text-field-color: #eeeeee;
+  --alert-text-field-focus-bg: #3a3a3a;
+  --alert-text-field-border-focused: #0090ff;
+
+  /* Alert error color */
+  --alert-error-color: #e5484d;
+
+  /* Alert destructive button color */
+  --alert-destructive-color: #e5484d; /* red9 - destructive action color */
+
+  /* InputCryptoAddress colors */
+  --crypto-button-error-bg: #3b1219;
+  --crypto-button-valid-bg: #b4b4b4;
+  --crypto-button-valid-text: #111111;
+  --crypto-button-focus-border: #0090ff;
+  --crypto-known-header-bg: #6e6e6e;
+  --crypto-known-header-text: #ffffff;
+}

package/dist/components/inputs/Tags/TagBar.vue

@@ -516,10 +516,10 @@ const themeConfig = computed(() => {
     <div v-if="allowEditing" :class="$style.controls" ref="controlContainer">
       <div :class="$style.add_button" ref="button">
         <IconButton
-          iconName="plus"
-          buttonType="square"
+          iconName="circle-plus"
+          buttonType="plain"
           buttonStyle="secondary"
-          :buttonSize="10"
+          :buttonSize="18"
           @click="beginEditing"
         />
         <p
@@ -675,16 +675,18 @@ const themeConfig = computed(() => {
 .add_label {
   user-select: none;
   color: var(--tagbar-text);
+  opacity: 0.7;
 }
 
 .field {
   background-color: var(--tagbar-field-bg);
   color: var(--tagbar-field-text);
-  border: none;
+  border: 1px solid var(--tagbar-field-border);
   border-radius: 999px;
   min-height: 1.412rem;
   padding-left: 0.471rem;
   padding-right: 0.588rem;
+  height: 100%;
   grid-area: content;
   opacity: 0;
   user-select: none;
@@ -784,6 +786,7 @@ const themeConfig = computed(() => {
   top: 0;
   left: 0;
   background-color: var(--tagpicker-container-bg);
+  border: 1px solid var(--tagpicker-container-border);
   border-radius: 0.353rem;
   min-width: 18.824rem;
   overflow: hidden;

package/dist/components/inputs/Tags/theme.css

@@ -6,6 +6,7 @@
   --tagbar-border: 1px solid #d9d9d9; /* gray1 - field background */
   --tagbar-field-bg: #e8e8e8; /* gray1 - field background */
   --tagbar-field-text: #1f2937; /* gray8 - field text */
+  --tagbar-field-border: rgba(0, 0, 0, 0.12);
   --tagbar-list-border: rgba(0, 0, 0, 0.1); /* blackA6 - list border */
 
   /* Search overlay */
@@ -13,6 +14,7 @@
 
   /* TagPicker colors */
   --tagpicker-container-bg: #ffffff; /* white - container background */
+  --tagpicker-container-border: rgba(0, 0, 0, 0.12);
   --tagpicker-container-shadow: rgba(0, 0, 0, 0.1); /* blackA6 - shadow */
   --tagpicker-container-inset-shadow: rgba(
     255,
@@ -75,6 +77,7 @@
   --tagbar-border: 1px solid #606060;
   --tagbar-field-bg: #606060; /* Dark field background */
   --tagbar-field-text: #eeeeee; /* Light field text */
+  --tagbar-field-border: rgba(255, 255, 255, 0.12);
   --tagbar-list-border: rgba(255, 255, 255, 0.15); /* Light border */
 
   /* Search overlay */
@@ -82,6 +85,7 @@
 
   /* TagPicker colors */
   --tagpicker-container-bg: #484848; /* Dark container background */
+  --tagpicker-container-border: rgba(255, 255, 255, 0.12);
   --tagpicker-container-shadow: rgba(0, 0, 0, 0.21); /* Darker shadow */
   --tagpicker-container-inset-shadow: rgba(
     255,