@asafarim/shared-i18n 0.8.1 → 0.9.0

package/dist/country-language-selector.css

@@ -0,0 +1,431 @@
+/* =========================================================================
+   @asafarim/country-language-selector
+   Design tokens are exposed as CSS variables so consumers can re-theme the
+   component without overriding individual rules.
+   ========================================================================= */
+
+.cls-root,
+.cls-root * {
+  box-sizing: border-box;
+}
+
+.cls-portal {
+  position: static;
+  display: block;
+}
+
+.cls-root {
+  --cls-bg: #ffffff;
+  --cls-bg-muted: #f6f7f9;
+  --cls-bg-hover: #eef1f6;
+  --cls-bg-active: #e4e9f2;
+  --cls-fg: #111827;
+  --cls-fg-muted: #6b7280;
+  --cls-fg-subtle: #9ca3af;
+  --cls-border: #e5e7eb;
+  --cls-border-strong: #d1d5db;
+  --cls-accent: #2563eb;
+  --cls-accent-fg: #ffffff;
+  --cls-radius: 12px;
+  --cls-radius-sm: 8px;
+  --cls-shadow: 0 10px 32px -8px rgba(15, 23, 42, 0.22),
+    0 4px 12px -4px rgba(15, 23, 42, 0.12);
+  --cls-focus: 0 0 0 2px rgba(37, 99, 235, 0.45);
+  --cls-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
+    "Helvetica Neue", Arial, "Noto Sans", sans-serif;
+
+  position: relative;
+  display: inline-block;
+  font-family: var(--cls-font);
+  color: var(--cls-fg);
+}
+
+@media (prefers-color-scheme: dark) {
+  .cls-root {
+    --cls-bg: #0f1115;
+    --cls-bg-muted: #171a21;
+    --cls-bg-hover: #1e222b;
+    --cls-bg-active: #262b37;
+    --cls-fg: #f3f4f6;
+    --cls-fg-muted: #9ca3af;
+    --cls-fg-subtle: #6b7280;
+    --cls-border: #262b37;
+    --cls-border-strong: #323847;
+    --cls-accent: #60a5fa;
+    --cls-accent-fg: #0f1115;
+    --cls-shadow: 0 12px 36px -8px rgba(0, 0, 0, 0.6),
+      0 4px 16px -4px rgba(0, 0, 0, 0.4);
+  }
+}
+
+/* ---------- Trigger ---------- */
+
+.cls-trigger {
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  background: var(--cls-bg-muted);
+  color: var(--cls-fg);
+  border: 1px solid var(--cls-border);
+  border-radius: var(--cls-radius-sm);
+  font: inherit;
+  font-size: 13.5px;
+  line-height: 1;
+  cursor: pointer;
+  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.cls-trigger:hover:not(:disabled) {
+  background: var(--cls-bg-hover);
+  border-color: var(--cls-border-strong);
+}
+
+.cls-trigger:active:not(:disabled) {
+  transform: translateY(0.5px);
+}
+
+.cls-trigger:focus-visible {
+  outline: none;
+  box-shadow: var(--cls-focus);
+}
+
+.cls-trigger:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+.cls-trigger__flag {
+  font-size: 16px;
+  line-height: 1;
+}
+
+/* ---------- Flag display modes ---------- */
+
+.cls-flag {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+}
+
+.cls-flag--emoji {
+  line-height: 1;
+}
+
+.cls-flag--image {
+  width: 20px;
+  height: 14px;
+  object-fit: cover;
+  border-radius: 2px;
+  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08);
+  background: var(--cls-bg-muted);
+}
+
+.cls-flag--image.cls-flag--sm {
+  width: 18px;
+  height: 13px;
+}
+
+.cls-flag--image.cls-flag--md {
+  width: 22px;
+  height: 16px;
+  border-radius: 3px;
+}
+
+.cls-trigger__flag.cls-flag--image {
+  width: 20px;
+  height: 14px;
+}
+
+.cls-trigger__code {
+  font-weight: 600;
+  letter-spacing: 0.02em;
+}
+
+.cls-trigger__sep {
+  color: var(--cls-fg-subtle);
+}
+
+.cls-trigger__lang {
+  font-weight: 500;
+  color: var(--cls-fg-muted);
+  text-transform: uppercase;
+}
+
+.cls-trigger__chev {
+  width: 12px;
+  height: 12px;
+  margin-left: 2px;
+  color: var(--cls-fg-muted);
+  transition: transform 160ms ease;
+}
+
+.cls-trigger[aria-expanded="true"] .cls-trigger__chev {
+  transform: rotate(180deg);
+}
+
+/* ---------- Popover ---------- */
+
+.cls-popover {
+  position: absolute;
+  top: calc(100% + 8px);
+  min-width: 320px;
+  max-width: min(380px, calc(100vw - 24px));
+  background: var(--cls-bg);
+  color: var(--cls-fg);
+  border: 1px solid var(--cls-border);
+  border-radius: var(--cls-radius);
+  box-shadow: var(--cls-shadow);
+  z-index: 50;
+  overflow: hidden;
+  animation: cls-pop-in 140ms ease-out;
+}
+
+.cls-popover[data-align="end"] {
+  right: 0;
+}
+
+.cls-popover[data-align="start"] {
+  left: 0;
+}
+
+@keyframes cls-pop-in {
+  from {
+    opacity: 0;
+    transform: translateY(-4px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+/* ---------- Search ---------- */
+
+.cls-search {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--cls-border);
+  background: var(--cls-bg);
+}
+
+.cls-search__icon {
+  width: 14px;
+  height: 14px;
+  color: var(--cls-fg-muted);
+  flex: 0 0 auto;
+}
+
+.cls-search__input {
+  flex: 1;
+  border: 0;
+  background: transparent;
+  color: var(--cls-fg);
+  font: inherit;
+  font-size: 14px;
+  outline: none;
+  min-width: 0;
+}
+
+.cls-search__input::placeholder {
+  color: var(--cls-fg-subtle);
+}
+
+/* ---------- Lists ---------- */
+
+.cls-list {
+  list-style: none;
+  margin: 0;
+  padding: 6px;
+  max-height: 320px;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scrollbar-width: thin;
+}
+
+.cls-section-title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 12px 4px;
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--cls-fg-subtle);
+  font-weight: 600;
+}
+
+.cls-back {
+  appearance: none;
+  border: 0;
+  background: transparent;
+  padding: 2px 6px;
+  font: inherit;
+  font-size: 12px;
+  color: var(--cls-accent);
+  cursor: pointer;
+  border-radius: 6px;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.cls-back:hover {
+  background: var(--cls-bg-hover);
+}
+
+.cls-option {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 10px;
+  border-radius: var(--cls-radius-sm);
+  cursor: pointer;
+  user-select: none;
+  line-height: 1.2;
+}
+
+.cls-option[aria-disabled="true"] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.cls-option:hover,
+.cls-option[data-active="true"] {
+  background: var(--cls-bg-hover);
+}
+
+.cls-option[aria-selected="true"] {
+  background: var(--cls-bg-active);
+}
+
+.cls-option__flag {
+  font-size: 18px;
+  line-height: 1;
+  flex: 0 0 auto;
+}
+
+.cls-option__flag.cls-flag--image {
+  width: 24px;
+  height: 18px;
+}
+
+.cls-option__body {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.cls-option__title {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--cls-fg);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.cls-option__subtitle {
+  font-size: 12px;
+  color: var(--cls-fg-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.cls-option__meta {
+  margin-left: auto;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--cls-fg-subtle);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.cls-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 1px 6px;
+  border-radius: 999px;
+  background: var(--cls-bg-muted);
+  color: var(--cls-fg-muted);
+  border: 1px solid var(--cls-border);
+  font-size: 10.5px;
+}
+
+.cls-check {
+  width: 14px;
+  height: 14px;
+  color: var(--cls-accent);
+}
+
+.cls-empty {
+  padding: 24px 12px;
+  text-align: center;
+  color: var(--cls-fg-muted);
+  font-size: 13px;
+}
+
+/* ---------- Mobile bottom sheet ---------- */
+
+@media (max-width: 768px) {
+  .cls-popover {
+    min-width: min(320px, calc(100vw - 24px));
+    max-width: calc(100vw - 24px);
+    display: flex;
+    flex-direction: column;
+    z-index: 1000;
+  }
+
+  .cls-popover .cls-search {
+    flex: 0 0 auto;
+    position: sticky;
+    top: 0;
+    z-index: 2;
+  }
+
+  .cls-popover .cls-section-title {
+    flex: 0 0 auto;
+  }
+
+  .cls-list {
+    flex: 1 1 auto;
+    max-height: none;
+    min-height: 0;
+  }
+
+  .cls-option {
+    padding: 10px 12px;
+  }
+}
+
+/* ---------- Backdrop used on mobile ---------- */
+
+.cls-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(15, 23, 42, 0.55);
+  backdrop-filter: blur(2px);
+  -webkit-backdrop-filter: blur(2px);
+  z-index: 999;
+  animation: cls-fade-in 180ms ease-out;
+}
+
+@keyframes cls-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}

package/dist/index.d.ts

@@ -6,4 +6,6 @@ export { getLanguageFromCookie, setLanguageCookie, isSupportedLanguage, getBrows
 export { LanguageSwitcher } from './components/LanguageSwitcher.js';
 export type { LanguageSwitcherProps } from './components/LanguageSwitcher.js';
 export { useTranslation, Trans, Translation } from 'react-i18next';
+export { CountryLanguageSelector, defaultCountries, useCountryLanguage, filterCountries, } from '@asafarim/country-language-selector';
+export type { Country, Locale, Language, CountryCode, LanguageCode, CountryLanguageSelectorProps, LocaleChangeHandler, LocaleChangeMeta, RenderTriggerContext, SelectorStrings, } from '@asafarim/country-language-selector';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,mBAAmB,EAAE,cAAc,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AACzH,YAAY,EAAE,iBAAiB,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAGtE,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACrD,YAAY,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAGhE,OAAO,EACL,qBAAqB,EACrB,iBAAiB,EACjB,mBAAmB,EACnB,kBAAkB,EAClB,kBAAkB,EAClB,4BAA4B,EAC5B,2BAA2B,EAC5B,MAAM,0BAA0B,CAAC;AAGlC,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AACpE,YAAY,EAAE,qBAAqB,EAAE,MAAM,kCAAkC,CAAC;AAG9E,OAAO,EAAE,cAAc,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,mBAAmB,EAAE,cAAc,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AACzH,YAAY,EAAE,iBAAiB,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAGtE,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACrD,YAAY,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAGhE,OAAO,EACL,qBAAqB,EACrB,iBAAiB,EACjB,mBAAmB,EACnB,kBAAkB,EAClB,kBAAkB,EAClB,4BAA4B,EAC5B,2BAA2B,EAC5B,MAAM,0BAA0B,CAAC;AAGlC,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AACpE,YAAY,EAAE,qBAAqB,EAAE,MAAM,kCAAkC,CAAC;AAG9E,OAAO,EAAE,cAAc,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAGnE,OAAO,EACL,uBAAuB,EACvB,gBAAgB,EAChB,kBAAkB,EAClB,eAAe,GAChB,MAAM,qCAAqC,CAAC;AAE7C,YAAY,EACV,OAAO,EACP,MAAM,EACN,QAAQ,EACR,WAAW,EACX,YAAY,EACZ,4BAA4B,EAC5B,mBAAmB,EACnB,gBAAgB,EAChB,oBAAoB,EACpB,eAAe,GAChB,MAAM,qCAAqC,CAAC"}

package/dist/index.js

@@ -8,3 +8,5 @@ export { getLanguageFromCookie, setLanguageCookie, isSupportedLanguage, getBrows
 export { LanguageSwitcher } from './components/LanguageSwitcher.js';
 // Re-export react-i18next for convenience
 export { useTranslation, Trans, Translation } from 'react-i18next';
+// CountryLanguageSelector — re-exported so consumers only install @asafarim/shared-i18n
+export { CountryLanguageSelector, defaultCountries, useCountryLanguage, filterCountries, } from '@asafarim/country-language-selector';