@okaapp/oka-ui-sv 0.1.1 → 0.1.3

package/dist/components/core/badge/Badge.svelte

@@ -10,8 +10,9 @@
     } = $props();
 
     const iconSizes = {
-        md: 24,
-        sm: 16,
+        lg: 24,
+        md: 16,
+        sm: 12,
     };
 </script>
 

package/dist/components/core/badge/badge.css

@@ -15,18 +15,24 @@
 }
 
 /* Sizes */
-.badge--md {
+.badge--lg {
     padding: 8px 12px;
     border-radius: 12px;
     font-size: 16px;
 }
 
-.badge--sm {
+.badge--md {
     padding: 6px 8px;
     border-radius: 8px;
     font-size: 14px;
 }
 
+.badge--sm {
+    padding: 4px 6px;
+    border-radius: 6px;
+    font-size: 12px;
+}
+
 /* Colors */
 .badge--success {
     color: var(--content-success);

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

@@ -19,6 +19,8 @@
 
     const sizes = {
         lg: "height: 48px; padding: 12px; font-size: 16px;",
+        md: "height: 40px; padding: 8px; font-size: 16px;",
+        sm: "height: 36px; padding: 6px; font-size: 14px;",
     };
 </script>
 

package/dist/components/core/select/MultiSelect.svelte

@@ -8,12 +8,13 @@
     import Checkbox from "../checkbox/Checkbox.svelte";
 
     let {
+        value = $bindable([]),
         items = [] as SelectItem[],
         placeholder = "Chọn ở đây",
         ...props
     } = $props();
 
-    let value = $state<string[]>([]);
+    // let value = $state<string[]>([]);
     const selectedLabel = $derived(
         value.length > 0 ? `Đã chọn ${value.length}` : placeholder,
     );
@@ -36,7 +37,7 @@
         <CaretDown class="select-trigger-icon" />
     </Select.Trigger>
     <Select.Portal>
-        <Select.Content class="select-content" sideOffset={8}>
+        <Select.Content class="select-content" sideOffset={12}>
             <Select.ScrollUpButton class="select-scroll-button">
                 <CaretDoubleUp class="select-scroll-button-icon" />
             </Select.ScrollUpButton>

package/dist/components/core/select/MultiSelect.svelte.d.ts

@@ -1,8 +1,9 @@
 import "./select.css";
 import type { SelectItem } from "./Types.js";
 declare const MultiSelect: import("svelte").Component<{
+    value?: any[];
     items?: SelectItem[];
     placeholder?: string;
-} & Record<string, any>, {}, "">;
+} & Record<string, any>, {}, "value">;
 type MultiSelect = ReturnType<typeof MultiSelect>;
 export default MultiSelect;

package/dist/components/core/select/SingleSelect.svelte

@@ -8,12 +8,14 @@
     import CaretDoubleDown from "phosphor-svelte/lib/CaretDoubleDown";
 
     let {
+        value = $bindable(),
         items = [] as SelectItem[],
         placeholder = "Chọn ở đây",
+        class: className,
         ...props
     } = $props();
 
-    let value = $state<string>("");
+    // let value = $state<string>("");
     const selectedLabel = $derived(
         value ? items.find((item) => item.value === value)?.label : placeholder,
     );
@@ -26,14 +28,14 @@
     {...props}
 >
     <Select.Trigger
-        class="select-trigger focus-override"
+        class={`select-trigger focus-override`}
         aria-label="Chọn ở đây"
     >
         <span class="select-trigger-text">{selectedLabel}</span>
         <CaretDown class="select-trigger-icon" />
     </Select.Trigger>
     <Select.Portal>
-        <Select.Content class="select-content" sideOffset={8}>
+        <Select.Content class="select-content" sideOffset={12}>
             <Select.ScrollUpButton class="select-scroll-button">
                 <CaretDoubleUp class="select-scroll-button-icon" />
             </Select.ScrollUpButton>

package/dist/components/core/select/SingleSelect.svelte.d.ts

@@ -1,8 +1,10 @@
 import "./select.css";
 import type { SelectItem } from "./Types.js";
 declare const SingleSelect: import("svelte").Component<{
+    value?: any;
     items?: SelectItem[];
     placeholder?: string;
-} & Record<string, any>, {}, "">;
+    class: any;
+} & Record<string, any>, {}, "value">;
 type SingleSelect = ReturnType<typeof SingleSelect>;
 export default SingleSelect;

package/dist/components/core/sidebar/Sidebar.svelte

@@ -11,17 +11,14 @@
 
     let { items, class: className }: Props = $props();
 
-    let activeItem = $state(page.url.pathname);
-    $effect(() => {
-        activeItem = page.url.pathname;
-    });
+    let currentRoute = $derived(page.url.pathname);
 </script>
 
 <div class={`${className} sidebar`}>
     {#each items as i}
         <a
             href={i.Route}
-            class={`sidebar-item ${i.Route === activeItem ? "sidebar-item--active" : "sidebar-item--inactive"}`}
+            class={`sidebar-item ${currentRoute === i.Route || (currentRoute + "/").startsWith(i.Route + "/") ? "sidebar-item--active" : "sidebar-item--inactive"}`}
         >
             {#if i.Icon}
                 <IconContext

package/dist/components/styling/oka-style-provider/oka-style.css

@@ -638,7 +638,6 @@ button {
     cursor: pointer;
     font: inherit;
     line-height: inherit;
-    padding: 0;
 }
 
 button:focus {
@@ -679,7 +678,6 @@ th:not(.table-override) {
 
 td:not(.table-override) {
     height: 64px;
-    background: var(--surface-primary);
     color: var(--content-primary);
     overflow: hidden;
     padding: 8px 16px 8px 16px;

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

@@ -29,7 +29,7 @@
         <span class="theme-switcher__label">Giao diện</span>
     </Select.Trigger>
     <Select.Portal>
-        <Select.Content class="theme-content" sideOffset={8}>
+        <Select.Content class="theme-content" sideOffset={12}>
             <Select.ScrollUpButton class="theme-scroll-button">
                 <CaretDoubleUp class="theme-scroll-button__icon" />
             </Select.ScrollUpButton>

package/dist/components/styling/theme-switcher/theme-switcher.css

@@ -76,23 +76,6 @@
     animation: content-out 300ms ease;
 }
 
-/* Position adjustments */
-.theme-content[data-side="bottom"] {
-    transform: translateY(4px);
-}
-
-.theme-content[data-side="left"] {
-    transform: translateX(-4px);
-}
-
-.theme-content[data-side="right"] {
-    transform: translateX(4px);
-}
-
-.theme-content[data-side="top"] {
-    transform: translateY(-4px);
-}
-
 /* Viewport styles */
 .theme-viewport {
     display: flex;

package/package.json

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