@byline/i18n 3.11.2 → 3.12.0

package/dist/react/language-menu.js

@@ -3,6 +3,7 @@ import { useContext, useState } from "react";
 import { CheckIcon, Dropdown, GlobeIcon } from "@byline/ui/react";
 import classnames from "classnames";
 import { I18nContext } from "./i18n-context.js";
+import language_menu_module from "./language-menu.module.js";
 function LanguageMenu({ className, color, disabled }) {
     const context = useContext(I18nContext);
     const [busy, setBusy] = useState(false);
@@ -30,14 +31,14 @@ function LanguageMenu({ className, color, disabled }) {
                         type: "button",
                         "aria-label": active?.nativeName ?? activeLocale,
                         disabled: isDisabled,
-                        className: "component--byline-language-menu rounded flex items-center justify-between gap-1 outline-none disabled:opacity-50"
+                        className: classnames('component--byline-language-menu', language_menu_module.trigger)
                     }),
                     children: [
                         /*#__PURE__*/ jsx(GlobeIcon, {
                             svgClassName: color
                         }),
                         /*#__PURE__*/ jsx("span", {
-                            className: classnames(color, 'hidden sm:inline mr-[4px]'),
+                            className: classnames(color, language_menu_module.label),
                             children: active?.nativeName ?? activeLocale
                         })
                     ]
@@ -46,23 +47,24 @@ function LanguageMenu({ className, color, disabled }) {
                     children: /*#__PURE__*/ jsx(Dropdown.Content, {
                         align: "center",
                         sideOffset: 10,
-                        className: classnames('z-40 rounded radix-side-bottom:animate-slide-down radix-side-top:animate-slide-up', 'w-32 px-1.5 py-1 shadow-md', 'bg-white dark:bg-canvas-800 border dark:border-canvas-700 shadow'),
+                        className: language_menu_module.content,
                         children: localeDefinitions.map((def)=>{
                             const isActive = def.code === activeLocale;
                             return /*#__PURE__*/ jsx(Dropdown.Item, {
                                 onClick: ()=>handleSelect(def.code),
+                                className: language_menu_module.item,
                                 children: /*#__PURE__*/ jsxs("div", {
-                                    className: "flex",
+                                    className: language_menu_module.row,
                                     children: [
                                         /*#__PURE__*/ jsx("span", {
-                                            className: "inline-block w-[22px]",
+                                            className: language_menu_module.checkCol,
                                             children: isActive && /*#__PURE__*/ jsx(CheckIcon, {
                                                 width: "18px",
                                                 height: "18px"
                                             })
                                         }),
                                         /*#__PURE__*/ jsx("span", {
-                                            className: "text-left inline-block w-full flex-1 self-start text-black dark:text-gray-300",
+                                            className: language_menu_module.itemLabel,
                                             children: def.nativeName
                                         })
                                     ]

package/dist/react/language-menu.module.js

@@ -0,0 +1,10 @@
+import "./language-menu_module.css";
+const language_menu_module = {
+    trigger: "trigger-pxoSoA",
+    label: "label-mXnla0",
+    content: "content-kpGLEq",
+    row: "row-WcMFps",
+    checkCol: "checkCol-djBJoL",
+    itemLabel: "itemLabel-k0RYeM"
+};
+export default language_menu_module;

package/dist/react/language-menu_module.css

@@ -0,0 +1,52 @@
+@layer base, byline-base, theme, byline-theme, byline-functional, byline-typography, components;
+
+@layer byline-components {
+  .trigger-pxoSoA {
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--gap-1);
+    color: inherit;
+    border-radius: var(--border-radius-sm);
+    outline: none;
+    display: flex;
+  }
+
+  .trigger-pxoSoA:disabled {
+    opacity: .5;
+  }
+
+  .label-mXnla0 {
+    margin-right: 4px;
+    display: none;
+  }
+
+  @media (min-width: 640px) {
+    .label-mXnla0 {
+      display: inline;
+    }
+  }
+
+  .byline-dropdown-content.content-kpGLEq {
+    width: 7rem;
+    padding: 4px 6px;
+  }
+
+  .row-WcMFps {
+    display: flex;
+  }
+
+  .checkCol-djBJoL {
+    width: 22px;
+    display: inline-block;
+  }
+
+  .itemLabel-k0RYeM {
+    text-align: left;
+    flex: 1;
+    align-self: flex-start;
+    width: 100%;
+  }
+}
+
+@layer utilities, byline-utilities;
+

package/package.json

@@ -3,7 +3,7 @@
   "private": false,
   "type": "module",
   "license": "MPL-2.0",
-  "version": "3.11.2",
+  "version": "3.12.0",
   "engines": {
     "node": ">=20.9.0"
   },
@@ -56,7 +56,7 @@
     "intl-messageformat": "^11.2.7",
     "negotiator": "^1.0.0",
     "npm-run-all": "^4.1.5",
-    "@byline/ui": "3.11.2"
+    "@byline/ui": "3.12.0"
   },
   "peerDependencies": {
     "react": "^19.0.0",