@okaapp/oka-ui-sv 0.4.5 → 0.4.7

package/dist/components/core/button/Button.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     import "./button.css";
     import { Button } from "bits-ui";
+    import { IconContext } from "phosphor-svelte";
 
     let {
         ref = $bindable(null),
@@ -18,9 +19,15 @@
     };
 
     const sizes = {
-        lg: "height: 48px; padding: 12px; font-size: 16px;",
-        md: "height: 40px; padding: 8px; font-size: 14px;",
-        sm: "height: 36px; padding: 6px 8px; font-size: 12px;",
+        lg: "height: 48px; padding: 12px 16px; font-size: 16px; gap: 8px;",
+        md: "height: 40px; padding: 12px 8px; font-size: 14px; gap: 8px;",
+        sm: "height: 36px; padding: 6px 8px; font-size: 12px; gap: 4px;",
+    };
+
+    const iconSizes = {
+        lg: 24,
+        md: 20,
+        sm: 16,
     };
 </script>
 
@@ -30,5 +37,13 @@
     {...props}
     bind:ref
 >
-    {@render children?.()}
+    <IconContext
+        values={{
+            size: sizes[size as keyof typeof iconSizes],
+            mirrored: false,
+            weight: "regular",
+        }}
+    >
+        {@render children?.()}
+    </IconContext>
 </Button.Root>

package/dist/components/core/input/input.css

@@ -6,7 +6,7 @@
     display: flex;
     height: 48px;
     width: 100%;
-    min-width: 160px;
+    min-width: 96px;
     border-radius: 12px;
     padding: 12px;
     outline: none;

package/dist/components/core/select/select.css

@@ -1,8 +1,7 @@
 .select-trigger {
     display: inline-flex;
     gap: 4px;
-    min-width: 160px;
-    /* min-w-40 */
+    min-width: 144px;
     width: 100%;
     height: 48px;
     /* h-12 */

package/dist/components/styling/theme-switcher/ThemeSwitcher.svelte

@@ -15,6 +15,12 @@
         currentTheme = savedTheme;
     });
 
+    type Props = {
+        lang?: "vi" | "en";
+    };
+
+    let { lang = "vi" }: Props = $props();
+
     function setTheme(v: string) {
         document.body.classList.remove(currentTheme);
         document.body.classList.add(v);
@@ -24,9 +30,11 @@
 </script>
 
 <Select.Root type="single" onValueChange={setTheme} value={currentTheme}>
-    <Select.Trigger class="theme-switcher" aria-label="Giao diện">
+    <Select.Trigger class="theme-switcher">
         <Palette class="theme-switcher__icon" />
-        <span class="theme-switcher__label">Giao diện</span>
+        <span class="theme-switcher__label"
+            >{lang === "vi" ? "Giao diện" : "Themes"}</span
+        >
     </Select.Trigger>
     <Select.Portal>
         <Select.Content class="theme-content" sideOffset={12}>
@@ -47,8 +55,12 @@
                             {#each themeGroup.Themes as theme}
                                 <Select.Item
                                     value={theme.ClassName}
-                                    label={theme.DisplayName}
-                                    aria-label={theme.DisplayName}
+                                    label={lang === "vi"
+                                        ? theme.DisplayName
+                                        : theme.DisplayNameEng}
+                                    aria-label={lang === "vi"
+                                        ? theme.DisplayName
+                                        : theme.DisplayNameEng}
                                     class="theme-item"
                                 >
                                     {#if theme.DisplayImage}
@@ -65,7 +77,9 @@
                                     {:else}
                                         <Palette class="theme-item__image" />
                                     {/if}
-                                    {theme.DisplayName}
+                                    {lang === "vi"
+                                        ? theme.DisplayName
+                                        : theme.DisplayNameEng}
                                 </Select.Item>
                             {/each}
                         </div>

package/dist/components/styling/theme-switcher/ThemeSwitcher.svelte.d.ts

@@ -1,4 +1,7 @@
 import "./theme-switcher.css";
-declare const ThemeSwitcher: import("svelte").Component<Record<string, never>, {}, "">;
+type Props = {
+    lang?: "vi" | "en";
+};
+declare const ThemeSwitcher: import("svelte").Component<Props, {}, "">;
 type ThemeSwitcher = ReturnType<typeof ThemeSwitcher>;
 export default ThemeSwitcher;

package/dist/components/styling/theme-switcher/Themes.d.ts

@@ -1,12 +1,14 @@
 type Theme = {
     ClassName: string;
     DisplayName: string;
+    DisplayNameEng: string;
     DisplayImage?: string;
     MainAccent?: string;
 };
 type ThemeGroup = {
     Name: string;
     DisplayName: string;
+    DisplayNameEng: string;
     Themes: Theme[];
 };
 export declare const Themes: ThemeGroup[];

package/dist/components/styling/theme-switcher/Themes.js

@@ -2,20 +2,24 @@ export const Themes = [
     {
         Name: "light",
         DisplayName: "Giao diện sáng",
+        DisplayNameEng: "Light interfaces",
         Themes: [
             {
                 ClassName: "default-light",
                 DisplayName: "Appta sáng",
+                DisplayNameEng: "Default light",
                 MainAccent: "#58C4F5",
             },
             {
                 ClassName: "neutral-light",
                 DisplayName: "Trung tính sáng",
+                DisplayNameEng: "Neutral light",
                 MainAccent: "#70707b",
             },
             {
                 ClassName: "nord-light",
                 DisplayName: "Cực bắc sáng",
+                DisplayNameEng: "Nord light",
                 MainAccent: "#88C0D0",
             },
         ]
@@ -23,20 +27,24 @@ export const Themes = [
     {
         Name: "dark",
         DisplayName: "Giao diện tối",
+        DisplayNameEng: "Dark interfaces",
         Themes: [
             {
                 ClassName: "default-dark",
                 DisplayName: "Appta tối",
+                DisplayNameEng: "Default dark",
                 MainAccent: "#23598E",
             },
             {
                 ClassName: "neutral-dark",
                 DisplayName: "Trung tính tối",
+                DisplayNameEng: "Neutral dark",
                 MainAccent: "#26262A",
             },
             {
                 ClassName: "nord-dark",
                 DisplayName: "Cực bắc tối",
+                DisplayNameEng: "Nord dark",
                 MainAccent: "#4C566A",
             },
         ]
@@ -44,30 +52,36 @@ export const Themes = [
     {
         Name: "feng-shui",
         DisplayName: "Phong thủy",
+        DisplayNameEng: "Fengshui Sets",
         Themes: [
             {
                 ClassName: "fengshui-kim",
                 DisplayName: "Mệnh Kim",
+                DisplayNameEng: "Metal",
                 MainAccent: "#dfa30a",
             },
             {
                 ClassName: "fengshui-moc",
                 DisplayName: "Mệnh Mộc",
+                DisplayNameEng: "Wood",
                 MainAccent: "#89c014",
             },
             {
                 ClassName: "fengshui-thuy",
                 DisplayName: "Mệnh Thủy",
+                DisplayNameEng: "Water",
                 MainAccent: "#0E93D3",
             },
             {
                 ClassName: "fengshui-hoa",
                 DisplayName: "Mệnh Hỏa",
+                DisplayNameEng: "Fire",
                 MainAccent: "#FF6B3E",
             },
             {
                 ClassName: "fengshui-tho",
                 DisplayName: "Mệnh Thổ",
+                DisplayNameEng: "Earth",
                 MainAccent: "#A26D4B",
             },
         ]

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@okaapp/oka-ui-sv",
-	"version": "0.4.5",
+	"version": "0.4.7",
 	"description": "OKA UI Svelte components library for the Appta software platform",
 	"license": "MIT",
 	"scripts": {