@alikhalilll/a-tel-input 1.0.1

package/dist/styles.css

@@ -0,0 +1,520 @@
+/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial}}}:root,.light{--ak-ui-background:0 0% 100%;--ak-ui-foreground:240 10% 3.9%;--ak-ui-card:0 0% 100%;--ak-ui-card-foreground:240 10% 3.9%;--ak-ui-popover:0 0% 100%;--ak-ui-popover-foreground:240 10% 3.9%;--ak-ui-primary:240 5.9% 10%;--ak-ui-primary-foreground:0 0% 98%;--ak-ui-secondary:240 4.8% 95.9%;--ak-ui-secondary-foreground:240 5.9% 10%;--ak-ui-muted:240 4.8% 95.9%;--ak-ui-muted-foreground:240 3.8% 46.1%;--ak-ui-accent:240 4.8% 95.9%;--ak-ui-accent-foreground:240 5.9% 10%;--ak-ui-destructive:0 84.2% 60.2%;--ak-ui-destructive-foreground:0 0% 98%;--ak-ui-border:240 5.9% 90%;--ak-ui-input:240 5.9% 90%;--ak-ui-ring:240 5.9% 10%;--ak-ui-radius:.5rem}.dark{--ak-ui-background:240 10% 3.9%;--ak-ui-foreground:0 0% 98%;--ak-ui-card:240 10% 3.9%;--ak-ui-card-foreground:0 0% 98%;--ak-ui-popover:240 10% 3.9%;--ak-ui-popover-foreground:0 0% 98%;--ak-ui-primary:0 0% 98%;--ak-ui-primary-foreground:240 5.9% 10%;--ak-ui-secondary:240 3.7% 15.9%;--ak-ui-secondary-foreground:0 0% 98%;--ak-ui-muted:240 3.7% 15.9%;--ak-ui-muted-foreground:240 5% 64.9%;--ak-ui-accent:240 3.7% 15.9%;--ak-ui-accent-foreground:0 0% 98%;--ak-ui-destructive:0 62.8% 30.6%;--ak-ui-destructive-foreground:0 0% 98%;--ak-ui-border:240 3.7% 15.9%;--ak-ui-input:240 3.7% 15.9%;--ak-ui-ring:240 4.9% 83.9%}:root,:host{--spacing:.25rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1)}.collapse{visibility:collapse}.visible{visibility:visible}.block{display:block}.flex{display:flex}.hidden{display:none}.table{display:table}.flex-shrink{flex-shrink:1}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.border{border-style:var(--tw-border-style);border-width:1px}.ps-1{padding-inline-start:calc(var(--spacing) * 1)}.ring{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}
+/* --- bundled SFC styles --- */
+
+.a-country-flag[data-v-705c2224] {
+  display: inline-block;
+  width: 1.5rem;
+  height: 1rem;
+  border-radius: 0.125rem;
+  object-fit: cover;
+  box-shadow: 0 0 0 1px hsl(var(--ak-ui-border) / 0.4);
+}
+.a-country-flag--fallback[data-v-705c2224] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: hsl(var(--ak-ui-muted));
+  color: hsl(var(--ak-ui-muted-foreground));
+  font-size: 8px;
+  font-weight: 600;
+  line-height: 1;
+  letter-spacing: -0.025em;
+}
+.a-country-flag--empty[data-v-705c2224] {
+  background: hsl(var(--ak-ui-muted));
+  box-shadow: none;
+}
+
+@keyframes a-tel-input-icon-spin {
+to {
+    transform: rotate(360deg);
+}
+}
+.a-tel-input-icon-spinner {
+  animation: a-tel-input-icon-spin 1s linear infinite;
+  transform-origin: center;
+}
+
+/* ------------------------------------------------------------
+ * In-tree (non-teleported) styles — only the trigger button.
+ * ---------------------------------------------------------- */
+.a-country-select__trigger[data-v-65efc7ac] {
+  display: inline-flex;
+  height: 100%;
+  flex-shrink: 0;
+  align-items: center;
+  gap: 0.375rem;
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+  transition: background-color 150ms;
+  outline: none;
+  color: inherit;
+  font: inherit;
+}
+.a-country-select__trigger[data-v-65efc7ac]:hover,
+.a-country-select__trigger[data-v-65efc7ac]:focus-visible,
+.a-country-select__trigger[data-state='open'][data-v-65efc7ac] {
+  background: hsl(var(--ak-ui-muted));
+}
+.a-country-select__trigger[data-v-65efc7ac]:focus-visible {
+  box-shadow: inset 0 0 0 1px hsl(var(--ak-ui-ring));
+}
+.a-country-select__trigger[data-v-65efc7ac]:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+.a-country-select__trigger[data-size='xs'][data-v-65efc7ac] {
+  padding: 0 0.5rem;
+  font-size: 0.75rem;
+}
+.a-country-select__trigger[data-size='sm'][data-v-65efc7ac] {
+  padding: 0 0.625rem;
+  font-size: 0.875rem;
+}
+.a-country-select__trigger[data-size='md'][data-v-65efc7ac] {
+  padding: 0 0.75rem;
+  font-size: 0.875rem;
+}
+.a-country-select__trigger[data-size='lg'][data-v-65efc7ac] {
+  padding: 0 0.875rem;
+  font-size: 1rem;
+}
+.a-country-select__trigger[data-size='xl'][data-v-65efc7ac] {
+  padding: 0 1rem;
+  font-size: 1rem;
+}
+.a-country-select__chevron[data-v-65efc7ac] {
+  width: 0.875rem;
+  height: 0.875rem;
+  flex-shrink: 0;
+  color: hsl(var(--ak-ui-muted-foreground));
+  transition: transform 200ms;
+}
+.a-country-select__chevron[data-open][data-v-65efc7ac] {
+  transform: rotate(180deg);
+}
+
+.a-country-select__content {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  padding: 0;
+}
+.a-country-select__popover {
+  width: min(20rem, calc(100vw - 2rem));
+  max-height: min(22rem, var(--reka-popover-content-available-height));
+}
+.a-country-select__drawer {
+  max-height: 80vh;
+  padding-bottom: 1rem;
+}
+.a-country-select__search {
+  border-bottom: 1px solid hsl(var(--ak-ui-border) / 0.7);
+  padding: 0.375rem;
+}
+.a-country-select__search-box {
+  position: relative;
+  display: flex;
+  align-items: center;
+  background: hsl(var(--ak-ui-muted) / 0.4);
+  border-radius: calc(var(--ak-ui-radius) - 2px);
+  box-shadow: 0 0 0 1px hsl(var(--ak-ui-border) / 0.7);
+  transition: box-shadow 150ms;
+}
+.a-country-select__search-box:focus-within {
+  box-shadow: 0 0 0 1px hsl(var(--ak-ui-ring) / 0.5);
+}
+.a-country-select__search-icon {
+  position: absolute;
+  top: 50%;
+  inset-inline-start: 0.625rem;
+  width: 0.875rem;
+  height: 0.875rem;
+  transform: translateY(-50%);
+  color: hsl(var(--ak-ui-muted-foreground));
+  pointer-events: none;
+}
+.a-country-select__search-input {
+  height: 2.5rem;
+  width: 100%;
+  background: transparent;
+  border: 0;
+  padding-inline-start: 2rem;
+  padding-inline-end: 3.5rem;
+  font-size: 0.875rem;
+  outline: none;
+  color: inherit;
+  font-family: inherit;
+}
+.a-country-select__search-input::placeholder {
+  color: hsl(var(--ak-ui-muted-foreground));
+}
+.a-country-select__kbd {
+  position: absolute;
+  top: 50%;
+  inset-inline-end: 0.5rem;
+  display: none;
+  align-items: center;
+  gap: 0.125rem;
+  background: hsl(var(--ak-ui-background));
+  color: hsl(var(--ak-ui-muted-foreground));
+  border: 1px solid hsl(var(--ak-ui-border));
+  border-radius: 0.25rem;
+  padding: 0.125rem 0.375rem;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 10px;
+  letter-spacing: -0.025em;
+  transform: translateY(-50%);
+}
+@media (min-width: 768px) {
+.a-country-select__kbd--open {
+    display: inline-flex;
+}
+.a-country-select__kbd--close {
+    display: inline-block;
+}
+}
+.a-country-select__list {
+  flex: 1;
+  overflow-y: auto;
+  /* Themed scrollbar — Firefox + WebKit/Blink. Resolves the browser-default
+     light-grey scrollbar that didn't match the popover surface in dark mode. */
+  scrollbar-width: thin;
+  scrollbar-color: hsl(var(--ak-ui-muted-foreground) / 0.4) transparent;
+}
+.a-country-select__list::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+.a-country-select__list::-webkit-scrollbar-track {
+  background: transparent;
+}
+.a-country-select__list::-webkit-scrollbar-thumb {
+  background-color: hsl(var(--ak-ui-muted-foreground) / 0.4);
+  border-radius: 4px;
+}
+.a-country-select__list::-webkit-scrollbar-thumb:hover {
+  background-color: hsl(var(--ak-ui-muted-foreground) / 0.6);
+}
+.a-country-select__loading,
+.a-country-select__empty {
+  color: hsl(var(--ak-ui-muted-foreground));
+  padding: 1rem;
+  text-align: center;
+  font-size: 0.875rem;
+}
+.a-country-select__group-header {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  background: hsl(var(--ak-ui-popover));
+  color: hsl(var(--ak-ui-muted-foreground));
+  padding: 0.375rem 0.75rem;
+  font-size: 10px;
+  font-weight: 500;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  margin: 0;
+}
+.a-country-select__group-list {
+  list-style: none;
+  margin: 0;
+  padding: 0 0 0.25rem;
+}
+.a-country-select__item {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.5rem 0.75rem;
+  text-align: start;
+  font-size: 0.875rem;
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+  color: inherit;
+  transition: background-color 150ms;
+  outline: none;
+  font-family: inherit;
+}
+.a-country-select__item:hover,
+.a-country-select__item:focus-visible {
+  background: hsl(var(--ak-ui-muted) / 0.6);
+}
+.a-country-select__item[data-selected] {
+  background: hsl(var(--ak-ui-muted));
+}
+.a-country-select__item:disabled {
+  cursor: not-allowed;
+  opacity: 0.4;
+}
+.a-country-select__item:disabled:hover {
+  background: transparent;
+}
+.a-country-select__item-name {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.a-country-select__item-dial {
+  color: hsl(var(--ak-ui-muted-foreground));
+  font-variant-numeric: tabular-nums;
+}
+.a-country-select__item-check {
+  width: 0.875rem;
+  height: 0.875rem;
+  flex-shrink: 0;
+  color: hsl(var(--ak-ui-foreground));
+}
+
+/* ------------------------------------------------------------
+ * ATelInput — scoped CSS. All colors map to the global
+ * --ak-ui-* design tokens (defined in assets/styles.src.css) so
+ * dark mode + consumer theme overrides keep working.
+ * ---------------------------------------------------------- */
+.a-tel-input[data-v-8305dc81] {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+.a-tel-input__row[data-v-8305dc81] {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.a-tel-input__field[data-v-8305dc81] {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  overflow: hidden;
+  border: 1px solid hsl(var(--ak-ui-input));
+  background: hsl(var(--ak-ui-background));
+  border-radius: calc(var(--ak-ui-radius) - 2px);
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  transition:
+    border-color 150ms,
+    box-shadow 150ms;
+}
+.a-tel-input__field[data-v-8305dc81]:focus-within {
+  outline: none;
+  box-shadow: 0 0 0 2px hsl(var(--ak-ui-ring) / 0.4);
+}
+.a-tel-input__field[data-v-8305dc81]:has(input:disabled) {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+/* Validation field colors — opt-in via `data-show-validation` on the root. */
+.a-tel-input[data-show-validation] .a-tel-input__field[data-state='valid'][data-v-8305dc81] {
+  border-color: rgb(16 185 129 / 0.6);
+  box-shadow: 0 0 0 1px rgb(16 185 129 / 0.2);
+}
+.a-tel-input[data-show-validation] .a-tel-input__field[data-state='valid'][data-v-8305dc81]:focus-within {
+  box-shadow: 0 0 0 2px rgb(16 185 129 / 0.4);
+}
+.a-tel-input[data-show-validation] .a-tel-input__field[data-state='error'][data-v-8305dc81] {
+  border-color: hsl(var(--ak-ui-destructive) / 0.8);
+  box-shadow: 0 0 0 1px hsl(var(--ak-ui-destructive) / 0.2);
+}
+.a-tel-input[data-show-validation] .a-tel-input__field[data-state='error'][data-v-8305dc81]:focus-within {
+  box-shadow: 0 0 0 2px hsl(var(--ak-ui-destructive) / 0.4);
+}
+
+/* Size variants — values mirror the shared Size scale (see utils/sizes.ts). */
+.a-tel-input[data-size='xs'] .a-tel-input__field[data-v-8305dc81] {
+  height: 1.75rem;
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+.a-tel-input[data-size='sm'] .a-tel-input__field[data-v-8305dc81] {
+  height: 2.25rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+.a-tel-input[data-size='md'] .a-tel-input__field[data-v-8305dc81] {
+  height: 43px;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+.a-tel-input[data-size='lg'] .a-tel-input__field[data-v-8305dc81] {
+  height: 52px;
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+.a-tel-input[data-size='xl'] .a-tel-input__field[data-v-8305dc81] {
+  height: 60px;
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+.a-tel-input__dial[data-v-8305dc81] {
+  flex-shrink: 0;
+  color: hsl(var(--ak-ui-muted-foreground));
+  font-variant-numeric: tabular-nums;
+  user-select: none;
+  padding: 0 0.5rem;
+}
+.a-tel-input[data-size='xs'] .a-tel-input__dial[data-v-8305dc81] {
+  font-size: 0.75rem;
+}
+.a-tel-input[data-size='sm'] .a-tel-input__dial[data-v-8305dc81],
+.a-tel-input[data-size='md'] .a-tel-input__dial[data-v-8305dc81] {
+  font-size: 0.875rem;
+}
+.a-tel-input[data-size='lg'] .a-tel-input__dial[data-v-8305dc81],
+.a-tel-input[data-size='xl'] .a-tel-input__dial[data-v-8305dc81] {
+  font-size: 1rem;
+}
+.a-tel-input__input[data-v-8305dc81] {
+  height: 100%;
+  width: 100%;
+  min-width: 0;
+  flex: 1;
+  background: transparent;
+  font-variant-numeric: tabular-nums;
+  outline: none;
+  border: 0;
+  color: inherit;
+  font: inherit;
+}
+.a-tel-input__input[data-v-8305dc81]::placeholder {
+  color: hsl(var(--ak-ui-muted-foreground));
+}
+.a-tel-input__input[data-v-8305dc81]:disabled {
+  cursor: not-allowed;
+}
+.a-tel-input__input[data-has-dial][data-v-8305dc81] {
+  padding-inline-start: 0.25rem;
+}
+
+/* Per-size horizontal padding for the input itself. */
+.a-tel-input[data-size='xs'] .a-tel-input__input[data-v-8305dc81] {
+  padding-inline: 0.5rem;
+}
+.a-tel-input[data-size='sm'] .a-tel-input__input[data-v-8305dc81] {
+  padding-inline: 0.625rem;
+}
+.a-tel-input[data-size='md'] .a-tel-input__input[data-v-8305dc81] {
+  padding-inline: 0.75rem;
+}
+.a-tel-input[data-size='lg'] .a-tel-input__input[data-v-8305dc81] {
+  padding-inline: 0.875rem;
+}
+.a-tel-input[data-size='xl'] .a-tel-input__input[data-v-8305dc81] {
+  padding-inline: 1rem;
+}
+/* When the dial prefix is present, the input already inherits ps-1 via [data-has-dial]; collapse start padding. */
+.a-tel-input__input[data-has-dial][data-v-8305dc81] {
+  padding-inline-start: 0.25rem;
+}
+.a-tel-input__detecting[data-v-8305dc81] {
+  display: inline-flex;
+  height: 100%;
+  flex-shrink: 0;
+  align-items: center;
+  padding: 0 0.5rem;
+  color: hsl(var(--ak-ui-muted-foreground));
+}
+.a-tel-input__detecting-icon[data-v-8305dc81] {
+  width: 1rem;
+  height: 1rem;
+}
+.a-tel-input__country-wrapper[data-v-8305dc81] {
+  display: inline-flex;
+  height: 100%;
+  flex-shrink: 0;
+  align-items: center;
+}
+.a-tel-input__icon[data-v-8305dc81] {
+  width: 1.25rem;
+  height: 1.25rem;
+  flex-shrink: 0;
+}
+.a-tel-input__icon--valid[data-v-8305dc81] {
+  color: rgb(16 185 129);
+}
+.a-tel-input__icon--error[data-v-8305dc81] {
+  color: hsl(var(--ak-ui-destructive));
+}
+.a-tel-input__error[data-v-8305dc81] {
+  color: hsl(var(--ak-ui-destructive));
+  font-size: 0.75rem;
+  line-height: 1rem;
+  margin: 0;
+}
+.a-tel-input__hint[data-v-8305dc81] {
+  color: hsl(var(--ak-ui-muted-foreground));
+  font-size: 0.75rem;
+  line-height: 1rem;
+  font-variant-numeric: tabular-nums;
+  margin: 0;
+}
+
+/* Detecting spinner transition (collapsible width + fade). */
+.a-tell-detect-enter-active[data-v-8305dc81] {
+  transition:
+    opacity 200ms ease-out,
+    max-width 200ms ease-out;
+  overflow: hidden;
+}
+.a-tell-detect-leave-active[data-v-8305dc81] {
+  transition:
+    opacity 150ms ease-in,
+    max-width 150ms ease-in;
+  overflow: hidden;
+}
+.a-tell-detect-enter-from[data-v-8305dc81],
+.a-tell-detect-leave-to[data-v-8305dc81] {
+  opacity: 0;
+  max-width: 0;
+}
+.a-tell-detect-enter-to[data-v-8305dc81],
+.a-tell-detect-leave-from[data-v-8305dc81] {
+  opacity: 1;
+  max-width: 2.5rem;
+}
+
+/* Country picker reveal/hide transition. */
+.a-tell-country-enter-active[data-v-8305dc81] {
+  transition:
+    opacity 200ms ease-out,
+    max-width 200ms ease-out;
+  overflow: hidden;
+}
+.a-tell-country-leave-active[data-v-8305dc81] {
+  transition:
+    opacity 150ms ease-in,
+    max-width 150ms ease-in;
+  overflow: hidden;
+}
+.a-tell-country-enter-from[data-v-8305dc81],
+.a-tell-country-leave-to[data-v-8305dc81] {
+  opacity: 0;
+  max-width: 0;
+}
+.a-tell-country-enter-to[data-v-8305dc81],
+.a-tell-country-leave-from[data-v-8305dc81] {
+  opacity: 1;
+  max-width: 12rem;
+}
+
+/* Validation icon swap. */
+.a-tell-icon-enter-active[data-v-8305dc81] {
+  transition:
+    opacity 150ms ease-out,
+    transform 150ms ease-out;
+}
+.a-tell-icon-leave-active[data-v-8305dc81] {
+  transition:
+    opacity 100ms ease-in,
+    transform 100ms ease-in;
+}
+.a-tell-icon-enter-from[data-v-8305dc81],
+.a-tell-icon-leave-to[data-v-8305dc81] {
+  opacity: 0;
+  transform: scale(0.9);
+}

package/package.json

@@ -0,0 +1,123 @@
+{
+  "name": "@alikhalilll/a-tel-input",
+  "version": "1.0.1",
+  "description": "Headless, shadcn-vue style Vue 3 international telephone input with country detection, validation, and a responsive country picker. Part of the @alikhalilll/a-* toolkit.",
+  "license": "MIT",
+  "author": "alikhalilll",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/alikhalilll/ali-nuxt-toolkit.git",
+    "directory": "packages/ui-components/ATelInput"
+  },
+  "homepage": "https://alikhalilll.github.io/ali-nuxt-toolkit/ui",
+  "bugs": {
+    "url": "https://github.com/alikhalilll/ali-nuxt-toolkit/issues"
+  },
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "vue",
+    "vue3",
+    "nuxt",
+    "tel-input",
+    "phone-input",
+    "headless",
+    "shadcn",
+    "libphonenumber"
+  ],
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./nuxt": {
+      "import": {
+        "types": "./dist/nuxt/index.d.ts",
+        "default": "./dist/nuxt/index.js"
+      },
+      "require": {
+        "types": "./dist/nuxt/index.d.cts",
+        "default": "./dist/nuxt/index.cjs"
+      }
+    },
+    "./resolver": {
+      "import": {
+        "types": "./dist/resolver/index.d.ts",
+        "default": "./dist/resolver/index.js"
+      },
+      "require": {
+        "types": "./dist/resolver/index.d.cts",
+        "default": "./dist/resolver/index.cjs"
+      }
+    },
+    "./styles.css": "./dist/styles.css",
+    "./package.json": "./package.json"
+  },
+  "types": "./dist/index.d.ts",
+  "web-types": "./web-types.json",
+  "files": [
+    "dist",
+    "src",
+    "web-types.json",
+    "README.md",
+    "LICENSE"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "peerDependencies": {
+    "@nuxt/kit": "^3.0.0 || ^4.0.0",
+    "@vueuse/core": "^14.0.0",
+    "unplugin-vue-components": "^28.0.0 || ^29.0.0 || ^30.0.0 || ^31.0.0 || ^32.0.0",
+    "vue": "^3.5.0"
+  },
+  "peerDependenciesMeta": {
+    "@nuxt/kit": {
+      "optional": true
+    },
+    "unplugin-vue-components": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "class-variance-authority": "^0.7.1",
+    "libphonenumber-js": "^1.12.0",
+    "@alikhalilll/a-responsive-popover": "1.0.1"
+  },
+  "devDependencies": {
+    "@nuxt/kit": "^4.4.2",
+    "@nuxt/schema": "^4.4.2",
+    "@tailwindcss/cli": "^4.0.0",
+    "@tsdown/css": "0.22.0",
+    "@types/node": "^22.13.0",
+    "@vueuse/core": "^14.0.0",
+    "rimraf": "^6.0.1",
+    "tailwindcss": "^4.0.0",
+    "tsdown": "0.22.0",
+    "typescript": "^5.9.2",
+    "unplugin-vue": "7.2.0",
+    "unplugin-vue-components": "^32.1.0",
+    "vue": "^3.5.0",
+    "vue-tsc": "^3.2.4",
+    "@alikhalilll/a-ui-base": "1.0.0"
+  },
+  "scripts": {
+    "clean": "rimraf dist web-types.json",
+    "build": "tsx ../../../scripts/build/run-component-build.ts",
+    "typecheck": "vue-tsc --noEmit -p tsconfig.json",
+    "validate-dist": "tsx ../../../scripts/validate/dist-validate.ts --pkg a-tel-input",
+    "validate-consumer": "tsx ../../../scripts/validate/consumer-validate.ts --pkg a-tel-input",
+    "validate": "pnpm build && pnpm validate-dist && pnpm validate-consumer"
+  }
+}