@umbra.ui/core 0.1.0

package/src/components/inputs/InputCard/InputCard.vue

@@ -0,0 +1,600 @@
+<script setup lang="ts">
+import { ref, watch, computed } from "vue";
+import "../theme.css";
+import {
+  CreditCardIcon,
+  TriangleWarningIcon,
+  CircleCheckIcon,
+} from "@umbra-ui/icons";
+
+export interface Props {
+  value?: string;
+  placeholder?: string;
+  showCardType?: boolean;
+  state?: "normal" | "active" | "disabled" | "readonly" | "error";
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  value: "",
+  placeholder: "4242 4242 4242 4242",
+  showCardType: true,
+  state: "normal",
+});
+
+const emit = defineEmits<{
+  "update:value": [value: string];
+  "update:formatted": [value: string];
+  "update:cardType": [value: string];
+  "update:valid": [value: boolean];
+}>();
+
+// Get the appropriate text color for icons based on state
+const getIconColor = () => {
+  return "var(--input-text-filled)";
+};
+
+const currentDigitCount = computed(() => {
+  return internalValue.value.replace(/\D/g, "").length;
+});
+
+const maxAllowedDigits = computed(() => {
+  if (cardInfo.value) {
+    return Math.max(...cardInfo.value.lengths);
+  }
+  // Default max for unknown cards
+  return 16;
+});
+
+const internalValue = ref(props.value);
+const cursorPosition = ref<number | null>(null);
+const inputRef = ref<HTMLInputElement | null>(null);
+
+// Card type patterns
+const cardPatterns = {
+  visa: {
+    pattern: /^4/,
+    lengths: [16, 19],
+    format: [4, 4, 4, 4],
+    cvvLength: 3,
+    name: "Visa",
+    color: "#1A1F71",
+  },
+  mastercard: {
+    pattern: /^(5[1-5]|2[2-7])/,
+    lengths: [16],
+    format: [4, 4, 4, 4],
+    cvvLength: 3,
+    name: "Mastercard",
+    color: "#EB001B",
+  },
+  amex: {
+    pattern: /^3[47]/,
+    lengths: [15],
+    format: [4, 6, 5],
+    cvvLength: 4,
+    name: "American Express",
+    color: "#006FCF",
+  },
+  discover: {
+    pattern: /^(6011|65|64[4-9])/,
+    lengths: [16],
+    format: [4, 4, 4, 4],
+    cvvLength: 3,
+    name: "Discover",
+    color: "#FF6000",
+  },
+  diners: {
+    pattern: /^(36|38|30[0-5])/,
+    lengths: [14],
+    format: [4, 6, 4],
+    cvvLength: 3,
+    name: "Diners Club",
+    color: "#0079BE",
+  },
+  jcb: {
+    pattern: /^35/,
+    lengths: [16],
+    format: [4, 4, 4, 4],
+    cvvLength: 3,
+    name: "JCB",
+    color: "#0E4C96",
+  },
+};
+
+// Detect card type from number
+const detectCardType = (number: string): keyof typeof cardPatterns | null => {
+  const cleaned = number.replace(/\s/g, "");
+
+  for (const [type, config] of Object.entries(cardPatterns)) {
+    if (config.pattern.test(cleaned)) {
+      return type as keyof typeof cardPatterns;
+    }
+  }
+
+  return null;
+};
+
+// Format card number based on type
+const formatCardNumber = (
+  value: string
+): { formatted: string; cursorPos: number } => {
+  // Remove all non-digits
+  const cleaned = value.replace(/\D/g, "");
+
+  if (cleaned.length === 0) return { formatted: "", cursorPos: 0 };
+
+  const cardType = detectCardType(cleaned);
+  const format = cardType ? cardPatterns[cardType].format : [4, 4, 4, 4];
+
+  let formatted = "";
+  let digitIndex = 0;
+
+  for (let i = 0; i < format.length && digitIndex < cleaned.length; i++) {
+    const groupLength = format[i];
+    for (let j = 0; j < groupLength && digitIndex < cleaned.length; j++) {
+      formatted += cleaned[digitIndex];
+      digitIndex++;
+    }
+    if (digitIndex < cleaned.length) {
+      formatted += " ";
+    }
+  }
+
+  return { formatted, cursorPos: formatted.length };
+};
+
+// Luhn algorithm for card validation
+const isValidCardNumber = (number: string): boolean => {
+  const cleaned = number.replace(/\D/g, "");
+
+  if (cleaned.length === 0) return true; // Empty is valid
+
+  const cardType = detectCardType(cleaned);
+  if (!cardType) return false;
+
+  const validLengths = cardPatterns[cardType].lengths;
+  if (!validLengths.includes(cleaned.length)) return false;
+
+  // Luhn algorithm
+  let sum = 0;
+  let isEven = false;
+
+  for (let i = cleaned.length - 1; i >= 0; i--) {
+    let digit = parseInt(cleaned[i], 10);
+
+    if (isEven) {
+      digit *= 2;
+      if (digit > 9) {
+        digit -= 9;
+      }
+    }
+
+    sum += digit;
+    isEven = !isEven;
+  }
+
+  return sum % 10 === 0;
+};
+
+// Computed properties
+const cardType = computed(() => detectCardType(internalValue.value));
+const cardInfo = computed(() =>
+  cardType.value ? cardPatterns[cardType.value] : null
+);
+const isValid = computed(() => isValidCardNumber(internalValue.value));
+const isComplete = computed(() => {
+  const cleaned = internalValue.value.replace(/\D/g, "");
+  if (!cardInfo.value) return false;
+  return cardInfo.value.lengths.includes(cleaned.length);
+});
+
+// Override state to show error when card is complete but invalid
+const effectiveState = computed(() => {
+  if (isComplete.value && !isValid.value) {
+    return "error";
+  }
+  return props.state;
+});
+
+// Watch for changes to value prop
+watch(
+  () => props.value,
+  (newValue) => {
+    if (newValue !== internalValue.value) {
+      const { formatted } = formatCardNumber(newValue);
+      internalValue.value = formatted;
+    }
+  }
+);
+
+// Prevent non-numeric input
+const handleBeforeInput = (event: Event) => {
+  const inputEvent = event as InputEvent;
+  const data = inputEvent.data;
+
+  // Allow deletion operations
+  if (!data) return;
+
+  // Check if we're at max digits for the detected card type
+  if (currentDigitCount.value >= maxAllowedDigits.value) {
+    event.preventDefault();
+    return;
+  }
+
+  // Only allow digits
+  const isDigit = /^[0-9]+$/;
+  if (!isDigit.test(data)) {
+    event.preventDefault();
+  }
+};
+
+// Handle input
+// Update handleInput to enforce limits
+const handleInput = (event: Event) => {
+  const target = event.target as HTMLInputElement;
+  const rawValue = target.value;
+
+  // Strip out any non-digits
+  let digitsOnly = rawValue.replace(/[^\d]/g, "");
+
+  // Limit length based on card type
+  const maxLength = maxAllowedDigits.value;
+  digitsOnly = digitsOnly.slice(0, maxLength);
+
+  // Format the number
+  const { formatted, cursorPos } = formatCardNumber(digitsOnly);
+  internalValue.value = formatted;
+
+  // Update cursor position
+  cursorPosition.value = cursorPos;
+
+  // Emit events
+  emit("update:value", digitsOnly); // Raw digits
+  emit("update:formatted", formatted); // Formatted display
+  emit("update:cardType", cardInfo.value?.name || "");
+  emit("update:valid", isValid.value && isComplete.value);
+
+  // Set cursor position after Vue updates the DOM
+  requestAnimationFrame(() => {
+    if (inputRef.value && cursorPosition.value !== null) {
+      inputRef.value.setSelectionRange(
+        cursorPosition.value,
+        cursorPosition.value
+      );
+    }
+  });
+};
+
+// Handle paste
+const handlePaste = (event: ClipboardEvent) => {
+  event.preventDefault();
+  const pastedText = event.clipboardData?.getData("text") || "";
+  let cleanedNumber = pastedText.replace(/\D/g, "");
+
+  if (cleanedNumber) {
+    // Detect card type first to know the limit
+    const cardType = detectCardType(cleanedNumber);
+    const maxLength = cardType
+      ? Math.max(...cardPatterns[cardType].lengths)
+      : 16;
+
+    // Enforce the limit
+    cleanedNumber = cleanedNumber.slice(0, maxLength);
+
+    const { formatted } = formatCardNumber(cleanedNumber);
+    internalValue.value = formatted;
+    emit("update:value", cleanedNumber);
+    emit("update:formatted", formatted);
+    emit("update:cardType", cardInfo.value?.name || "");
+    emit("update:valid", isValid.value && isComplete.value);
+  }
+};
+
+// Handle key down
+const handleKeyDown = (event: KeyboardEvent) => {
+  const key = event.key;
+
+  // Block any non-digit keys except control keys
+  const isControlKey = [
+    "Backspace",
+    "Delete",
+    "Tab",
+    "Escape",
+    "Enter",
+    "ArrowLeft",
+    "ArrowRight",
+    "ArrowUp",
+    "ArrowDown",
+  ].includes(key);
+  const isModifierKey = event.ctrlKey || event.metaKey || event.altKey;
+
+  // If it's a digit and we're at max, prevent it
+  if (
+    /^[0-9]$/.test(key) &&
+    !isModifierKey &&
+    currentDigitCount.value >= maxAllowedDigits.value
+  ) {
+    event.preventDefault();
+    return;
+  }
+
+  if (!isControlKey && !isModifierKey && !/^[0-9]$/.test(key)) {
+    event.preventDefault();
+  }
+};
+
+// SVG icons for card types
+const cardIcons = {
+  visa: `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><g class="nc-icon-wrapper"><rect x="2" y="7" width="28" height="18" rx="3" ry="3" fill="#1434cb" stroke-width="0"></rect><path d="m27,7H5c-1.657,0-3,1.343-3,3v12c0,1.657,1.343,3,3,3h22c1.657,0,3-1.343,3-3v-12c0-1.657-1.343-3-3-3Zm2,15c0,1.103-.897,2-2,2H5c-1.103,0-2-.897-2-2v-12c0-1.103.897-2,2-2h22c1.103,0,2,.897,2,2v12Z" stroke-width="0" opacity=".15"></path><path d="m27,8H5c-1.105,0-2,.895-2,2v1c0-1.105.895-2,2-2h22c1.105,0,2,.895,2,2v-1c0-1.105-.895-2-2-2Z" fill="#fff" opacity=".2" stroke-width="0"></path><path d="m13.392,12.624l-2.838,6.77h-1.851l-1.397-5.403c-.085-.332-.158-.454-.416-.595-.421-.229-1.117-.443-1.728-.576l.041-.196h2.98c.38,0,.721.253.808.69l.738,3.918,1.822-4.608h1.84Z" fill="#fff" stroke-width="0"></path><path d="m20.646,17.183c.008-1.787-2.47-1.886-2.453-2.684.005-.243.237-.501.743-.567.251-.032.943-.058,1.727.303l.307-1.436c-.421-.152-.964-.299-1.638-.299-1.732,0-2.95.92-2.959,2.238-.011.975.87,1.518,1.533,1.843.683.332.912.545.909.841-.005.454-.545.655-1.047.663-.881.014-1.392-.238-1.799-.428l-.318,1.484c.41.188,1.165.351,1.947.359,1.841,0,3.044-.909,3.05-2.317" fill="#fff" stroke-width="0"></path><path d="m25.423,12.624h-1.494c-.337,0-.62.195-.746.496l-2.628,6.274h1.839l.365-1.011h2.247l.212,1.011h1.62l-1.415-6.77Zm-2.16,4.372l.922-2.542.53,2.542h-1.452Z" fill="#fff" stroke-width="0"></path><path fill="#fff" stroke-width="0" d="M15.894 12.624L14.446 19.394 12.695 19.394 14.143 12.624 15.894 12.624z"></path></g></svg>`,
+  mastercard: `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><g class="nc-icon-wrapper"><rect x="2" y="7" width="28" height="18" rx="3" ry="3" fill="#141413" stroke-width="0"></rect><path d="m27,7H5c-1.657,0-3,1.343-3,3v12c0,1.657,1.343,3,3,3h22c1.657,0,3-1.343,3-3v-12c0-1.657-1.343-3-3-3Zm2,15c0,1.103-.897,2-2,2H5c-1.103,0-2-.897-2-2v-12c0-1.103.897-2,2-2h22c1.103,0,2,.897,2,2v12Z" stroke-width="0" opacity=".15"></path><path d="m27,8H5c-1.105,0-2,.895-2,2v1c0-1.105.895-2,2-2h22c1.105,0,2,.895,2,2v-1c0-1.105-.895-2-2-2Z" fill="#fff" opacity=".2" stroke-width="0"></path><path fill="#ff5f00" stroke-width="0" d="M13.597 11.677H18.407V20.32H13.597z"></path><path d="m13.902,15.999c0-1.68.779-3.283,2.092-4.322-2.382-1.878-5.849-1.466-7.727.932-1.863,2.382-1.451,5.833.947,7.712,2,1.573,4.795,1.573,6.795,0-1.329-1.038-2.107-2.642-2.107-4.322Z" fill="#eb001b" stroke-width="0"></path><path d="m24.897,15.999c0,3.039-2.459,5.497-5.497,5.497-1.237,0-2.428-.412-3.39-1.176,2.382-1.878,2.795-5.329.916-7.727-.275-.336-.58-.657-.916-.916,2.382-1.878,5.849-1.466,7.712.932.764.962,1.176,2.153,1.176,3.39Z" fill="#f79e1b" stroke-width="0"></path></g></svg>`,
+  amex: `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><g class="nc-icon-wrapper"><rect x="2" y="7" width="28" height="18" rx="3" ry="3" fill="#0f70ce" stroke-width="0"></rect><path d="m27.026,9l-.719,1.965-.708-1.965h-3.885v2.582l-1.136-2.582h-3.119l-3.259,7.409h2.637v6.591h8.097l1.316-1.458,1.322,1.458h2.244c.112-.314.184-.647.184-1v-1.041l-1.58-1.698,1.58-1.655v-7.606c0-.353-.072-.686-.184-1h-2.79Z" fill="#fff" stroke-width="0"></path><path d="m17.679,14.433h2.61l.502,1.148h1.78l-2.531-5.754h-2.039l-2.531,5.754h1.734l.477-1.148Zm1.307-3.135l.775,1.844h-1.535l.761-1.844Z" fill="#0f70ce" stroke-width="0"></path><path fill="#0f70ce" stroke-width="0" d="M22.542 9.827L25.018 9.827 26.302 13.39 27.604 9.827 30 9.827 30 15.581 28.45 15.581 28.45 11.603 26.977 15.581 25.608 15.581 24.124 11.631 24.124 15.581 22.542 15.581 22.542 9.827z"></path><path fill="#0f70ce" stroke-width="0" d="M19.24 20.82L19.24 19.944 22.484 19.944 22.484 18.624 19.24 18.624 19.24 17.748 22.565 17.748 22.565 16.409 17.664 16.409 17.664 22.173 22.565 22.173 22.565 20.82 19.24 20.82z"></path><path fill="#0f70ce" stroke-width="0" d="M24.638 16.409L26.271 18.234 27.968 16.409 30 16.409 27.283 19.254 30 22.173 27.939 22.173 26.249 20.309 24.567 22.173 22.537 22.173 25.272 19.275 22.537 16.409 24.638 16.409z"></path><path d="m27,7H5c-1.657,0-3,1.343-3,3v12c0,1.657,1.343,3,3,3h22c1.657,0,3-1.343,3-3v-12c0-1.657-1.343-3-3-3Zm2,15c0,1.103-.897,2-2,2H5c-1.103,0-2-.897-2-2v-12c0-1.103.897-2,2-2h22c1.103,0,2,.897,2,2v12Z" stroke-width="0" opacity=".15"></path><path d="m27,8H5c-1.105,0-2,.895-2,2v1c0-1.105.895-2,2-2h22c1.105,0,2,.895,2,2v-1c0-1.105-.895-2-2-2Z" fill="#fff" opacity=".2" stroke-width="0"></path></g></svg>`,
+  discover: `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><g class="nc-icon-wrapper"><rect x="2" y="7" width="28" height="18" rx="3" ry="3" fill="#fff" stroke-width="0"></rect><path d="m27,7h-8c4.971,0,9,4.029,9,9s-4.029,9-9,9h8c1.657,0,3-1.343,3-3v-12c0-1.657-1.343-3-3-3Z" fill="#f47922" stroke-width="0"></path><path d="m27,7H5c-1.657,0-3,1.343-3,3v12c0,1.657,1.343,3,3,3h22c1.657,0,3-1.343,3-3v-12c0-1.657-1.343-3-3-3Zm2,15c0,1.103-.897,2-2,2H5c-1.103,0-2-.897-2-2v-12c0-1.103.897-2,2-2h22c1.103,0,2,.897,2,2v12Z" stroke-width="0" opacity=".15"></path><path d="m27,8H5c-1.105,0-2,.895-2,2v1c0-1.105.895-2,2-2h22c1.105,0,2,.895,2,2v-1c0-1.105-.895-2-2-2Z" fill="#fff" opacity=".2" stroke-width="0"></path><path d="m5.081,14.116h-1.081v3.777h1.076c.572,0,.985-.135,1.348-.436.431-.357.686-.894.686-1.45,0-1.115-.833-1.891-2.027-1.891Zm.86,2.837c-.231.209-.532.3-1.008.3h-.198v-2.497h.198c.476,0,.765.085,1.008.305.255.227.408.578.408.94s-.153.725-.408.952Z" fill="#231f20" stroke-width="0"></path><path fill="#231f20" stroke-width="0" d="M7.448 14.116H8.185V17.893H7.448z"></path><path d="m9.986,15.565c-.442-.164-.572-.271-.572-.475,0-.238.231-.419.549-.419.221,0,.402.091.594.306l.386-.505c-.317-.277-.696-.419-1.11-.419-.668,0-1.178.464-1.178,1.082,0,.52.237.787.929,1.036.288.102.435.17.509.215.147.096.221.232.221.391,0,.306-.243.533-.572.533-.351,0-.634-.175-.804-.504l-.476.458c.339.498.747.719,1.308.719.766,0,1.303-.509,1.303-1.24,0-.6-.248-.872-1.086-1.178Z" fill="#231f20" stroke-width="0"></path><path d="m11.305,16.007c0,1.11.872,1.971,1.994,1.971.317,0,.589-.062.924-.22v-.867c-.295.295-.555.414-.889.414-.742,0-1.269-.538-1.269-1.303,0-.725.543-1.297,1.234-1.297.351,0,.617.125.924.425v-.867c-.323-.164-.589-.232-.906-.232-1.116,0-2.011.878-2.011,1.976Z" fill="#231f20" stroke-width="0"></path><path fill="#231f20" stroke-width="0" d="M20.063 16.653L19.056 14.116 18.251 14.116 19.854 17.99 20.25 17.99 21.882 14.116 21.083 14.116 20.063 16.653z"></path><path fill="#231f20" stroke-width="0" d="M22.215 17.893L24.304 17.893 24.304 17.253 22.951 17.253 22.951 16.234 24.254 16.234 24.254 15.594 22.951 15.594 22.951 14.756 24.304 14.756 24.304 14.116 22.215 14.116 22.215 17.893z"></path><path d="m27.221,15.231c0-.707-.487-1.115-1.337-1.115h-1.092v3.777h.736v-1.517h.096l1.02,1.517h.906l-1.189-1.591c.555-.113.861-.492.861-1.071Zm-1.478.624h-.216v-1.144h.227c.459,0,.708.192.708.56,0,.38-.249.584-.72.584Z" fill="#231f20" stroke-width="0"></path><path d="m18.461,16c0,1.105-.895,2-2,2s-2-.895-2-2,.895-2,2-2,2,.895,2,2Z" fill="#f47922" stroke-width="0"></path></g></svg>`,
+};
+
+// Get card icon
+const getCardIcon = computed(() => {
+  if (!cardType.value || !props.showCardType) return null;
+  return cardIcons[cardType.value as keyof typeof cardIcons] || null;
+});
+
+// Get the effective icon color based on state
+const getEffectiveIconColor = () => {
+  return "var(--input-text-filled)";
+};
+
+const getPlaceholder = computed(() => {
+  if (props.state === "readonly") {
+    return "Field Cannot Be Edited";
+  }
+  return props.placeholder;
+});
+</script>
+
+<template>
+  <div :class="$style.container">
+    <div :class="[$style.input_container, $style[effectiveState]]">
+      <input
+        ref="inputRef"
+        class="body"
+        type="text"
+        inputmode="numeric"
+        autocomplete="cc-number"
+        :placeholder="getPlaceholder"
+        :value="internalValue"
+        @beforeinput="handleBeforeInput"
+        @input="handleInput"
+        @paste="handlePaste"
+        @keydown="handleKeyDown"
+        :maxlength="24"
+        :disabled="state === 'disabled'"
+        :readonly="state === 'readonly'"
+      />
+      <transition name="fade">
+        <div
+          v-if="cardType && showCardType"
+          :class="$style.card_icon"
+          v-html="getCardIcon"
+        ></div>
+      </transition>
+      <transition name="fade">
+        <div v-if="isComplete && !isValid" :class="$style.error_icon">
+          <TriangleWarningIcon size="16" />
+        </div>
+      </transition>
+      <CreditCardIcon v-if="!internalValue" :size="16" />
+    </div>
+    <transition name="slide-fade">
+      <p
+        v-if="isComplete && !isValid"
+        :class="[$style.error_message, 'footnote']"
+      >
+        Please enter a valid card number
+      </p>
+    </transition>
+  </div>
+</template>
+
+<style module>
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 0.588rem;
+}
+
+.input_container {
+  width: 100%;
+  padding-left: 0.882rem;
+  padding-right: 0.882rem;
+  padding-top: 0.588rem;
+  padding-bottom: 0.588rem;
+  border: var(--input-border);
+  border-radius: var(--input-border-radius);
+  transition: background-color 0.3s ease, border 0.3s ease;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: relative;
+}
+
+.input_container:focus-within {
+  border: 1px solid var(--input-focus-border);
+}
+
+.input_container input {
+  border: none;
+  background: transparent;
+  outline: none;
+  width: 100%;
+  font-family: inherit;
+  letter-spacing: 0.02em;
+}
+
+/* State-based styling using CSS variables */
+.input_container.normal:has(input:placeholder-shown),
+.input_container.active:has(input:placeholder-shown) {
+  background-color: var(--input-background-normal);
+  color: var(--input-text-empty);
+}
+
+.input_container.normal:has(input:not(:placeholder-shown)),
+.input_container.active:has(input:not(:placeholder-shown)) {
+  background-color: var(--input-background-filled);
+  color: var(--input-text-filled);
+  border-color: var(--input-border-filled);
+}
+
+.input_container.normal input:placeholder-shown,
+.input_container.active input:placeholder-shown {
+  color: var(--input-text-empty);
+  opacity: 0.6;
+}
+
+.input_container.normal input:not(:placeholder-shown),
+.input_container.active input:not(:placeholder-shown) {
+  color: var(--input-text-filled);
+}
+
+.input_container.disabled:has(input:placeholder-shown),
+.input_container.disabled:has(input:not(:placeholder-shown)) {
+  background-color: var(--input-disabled-bg);
+  color: var(--input-disabled-text);
+  border-color: var(--input-disabled-border);
+  cursor: not-allowed;
+}
+
+.input_container.disabled input:placeholder-shown,
+.input_container.disabled input:not(:placeholder-shown) {
+  color: var(--input-disabled-text);
+  cursor: not-allowed;
+}
+
+.input_container.readonly:has(input:placeholder-shown),
+.input_container.readonly:has(input:not(:placeholder-shown)) {
+  background-color: var(--input-readonly-bg);
+  color: var(--input-readonly-text);
+  border-color: var(--input-readonly-border);
+  cursor: not-allowed;
+}
+
+.input_container.readonly input:placeholder-shown,
+.input_container.readonly input:not(:placeholder-shown) {
+  color: var(--input-readonly-text);
+  cursor: not-allowed;
+}
+
+.input_container.error:has(input:placeholder-shown),
+.input_container.error:has(input:not(:placeholder-shown)) {
+  background-color: var(--input-error-bg);
+  color: var(--input-error-text);
+  border-color: var(--input-error-border);
+}
+
+.input_container.error input:placeholder-shown,
+.input_container.error input:not(:placeholder-shown) {
+  color: var(--input-error-text);
+}
+
+.input_container.active {
+  pointer-events: none;
+}
+
+.card_icon {
+  max-height: 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.card_icon svg {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.error_icon {
+  color: var(--input-text-error);
+  display: flex;
+  align-items: center;
+  animation: shake 0.3s ease-in-out;
+}
+
+/* Show both card icon and error icon when needed */
+.input_container:has(.card_icon) .error_icon {
+  right: 4rem;
+}
+
+.error_message {
+  color: var(--input-text-error);
+}
+
+/* Animations */
+@keyframes shake {
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+  25% {
+    transform: translateX(-5px);
+  }
+  75% {
+    transform: translateX(5px);
+  }
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.slide-fade-enter-active {
+  transition: all 0.3s ease;
+}
+
+.slide-fade-leave-active {
+  transition: all 0.2s ease;
+}
+
+.slide-fade-enter-from {
+  transform: translateY(-10px);
+  opacity: 0;
+}
+
+.slide-fade-leave-to {
+  transform: translateY(-10px);
+  opacity: 0;
+}
+
+.input_container input::placeholder {
+  color: var(--input-placeholder);
+}
+
+.input_container:has(input:not(:placeholder-shown)) input::placeholder {
+  color: var(--input-placeholder-filled);
+}
+
+.input_container.readonly input::placeholder {
+  color: var(--input-readonly-placeholder);
+}
+
+.input_container.disabled input::placeholder {
+  color: var(--input-disabled-placeholder);
+}
+
+/* Responsive adjustments */
+@media (max-width: 480px) {
+  .input_container input {
+    font-size: 16px; /* Prevents zoom on iOS */
+  }
+
+  .card_icon {
+    width: 40px;
+    height: 26px;
+  }
+}
+</style>