update lang selector

examples/package.json

@@ -8,7 +8,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@sakura-ui/core": "^0.2.11",
+    "@sakura-ui/core": "^0.2.14",
     "@sakura-ui/forms": "^0.2.1",
     "@sakura-ui/tailwind-theme-plugin": "^0.2.1",
     "react": "^18.3.1",

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sakura-ui/core",
-  "version": "0.2.11",
+  "version": "0.2.14",
   "description": "",
   "keywords": [
     "react",

packages/core/src/components/Icon.tsx

@@ -49,8 +49,8 @@ export const Icon = React.forwardRef<HTMLElement, IconProps>((props, ref) => {
     font-light
     inline-block
     leading-4
-    whitespace-nowrap
     align-middle
+    whitespace-nowrap
   `
 
   return (

packages/core/src/components/LangSelector.tsx

@@ -39,10 +39,11 @@ export const LangSelector = ({
   `
 
   const styleButton = `
-    flex
     w-fit
-    items-center
-    sm:gap-1
+    sm:py-3
+    text-base
+    leading-4
+    leading-snug
     ${styleClickable}
     ${styleFocusRoundedWithBg}
     ${styleAnchorName}
@@ -90,7 +91,11 @@ export const LangSelector = ({
         fucus(index)
         break
       case 'Tab':
-        menuRef.current?.hidePopover()
+        index = e.shiftKey ? currentIndex - 1 : currentIndex + 1
+        setCurrentIndex(index)
+        if (index === -1 || index === langs.length) {
+          menuRef.current?.hidePopover()
+        }
         break
     }
   }
@@ -111,11 +116,11 @@ export const LangSelector = ({
           language
         </Icon>
         <span
-          className={cx('hidden sm:inline-block mb-0.5', styleHoverUnderline)}
+          className={cx('hidden sm:mx-1 sm:inline-block', styleHoverUnderline)}
         >
           Language
         </span>
-        <IconLanguageMobile className="sm:hidden" />
+        <IconLanguageMobile className="inline-block sm:hidden" />
         <Icon
           opticalSize={20}
           className="group-[:has(:popover-open)]:rotate-180"

packages/core/src/components/buttonStyle.ts

@@ -81,25 +81,25 @@ const params: { [key in ButtonSize]: string } = {
   lg: `
     p-4
     text-button
-    rounded-lg
     leading-snug
+    rounded-lg
   `,
   // 12(py-3) * 2 + 22(text-button * leading-snug) + boader * 2 = 48px
   md: `
     px-4
     py-3
     text-button
-    rounded-lg
     leading-snug
+    rounded-lg
   `,
   // 6(py-1.5) * 2 + 22(text-button * leading-snug) + boader * 2 = 36px
   sm: `
     px-3
     py-1.5
     my-1
     text-button
-    rounded-md
     leading-snug
+    rounded-md
   `,
   // 6(py-1.5) * 2 + 14(text-button-sm) + boader * 2 = 28p
   xs: `