odj-svelte-ui 0.4.4 → 0.5.0

package/README.md

@@ -35,8 +35,10 @@ This is a fork from [Flowbite for Svelte 5 with Runes](https://svelte-5-ui-lib.c
 - `SidebarButton` has been removed. Please use the `Drawer` component to maintain the old sidebar behaviour;
 - `Card` can be a button now adding `clickable` prop;
 - `Accordion` has a new design and 4 options to the new prop `accordionStyle`: `none`, `flush`, `outlined` and `cards`;
-- New `MultiSelect` input.
+- New `MultiSelect` input;
 - `Table` can be rounded with `rounded` prop.
+- Change the placeholder value for `Select`.
+- Using custom `Select` for supported browsers with CSS-only approach.
 
 ## Installation
 

package/dist/badge/Badge.svelte

@@ -11,20 +11,13 @@
 </script>
 
 {#if badgeStatus}
-  <div {...restProps} transition:transition={params as ParamsType} class={base({ className })}>
-    {#if href}
-      <a {href} {target} class={hrefClass({ class: aClass })}>
-        {@render children()}
-      </a>
-    {:else}
-      {@render children()}
-    {/if}
-
+  <svelte:element this={href ? "a" : "div"} {href} {target} {...restProps} transition:transition={params as ParamsType} class={[base({ className }), href && hrefClass({ class: aClass })]}>
+    {@render children()}
     {#if dismissable}
       {#if icon}
         <button
           type="button"
-          class="m-0.5 -me-1.5 ms-1.5 whitespace-normal rounded-sm p-0.5 text-primary-500 hover:bg-primary-200 focus:outline-hidden focus:ring-1 focus:ring-primary-400 dark:hover:bg-primary-800 dark:hover:text-primary-300"
+          class="text-primary-500 hover:bg-primary-200 focus:ring-primary-400 dark:hover:bg-primary-800 dark:hover:text-primary-300 m-0.5 ms-1.5 -me-1.5 rounded-sm p-0.5 whitespace-normal focus:ring-1 focus:outline-hidden"
           aria-label="Remove badge"
           onclick={() => {
             badgeStatus = false;
@@ -34,10 +27,10 @@
           {@render icon()}
         </button>
       {:else if onclick}
-        <CloseButton class="-me-1.5 ms-1.5" {color} size={large ? "sm" : "xs"} ariaLabel="Remove badge" {onclick} />
+        <CloseButton class="ms-1.5 -me-1.5" {color} size={large ? "sm" : "xs"} ariaLabel="Remove badge" {onclick} />
       {:else}
         <CloseButton
-          class="-me-1.5 ms-1.5"
+          class="ms-1.5 -me-1.5"
           {color}
           size={large ? "sm" : "xs"}
           ariaLabel="Remove badge"
@@ -47,7 +40,7 @@
         />
       {/if}
     {/if}
-  </div>
+  </svelte:element>
 {/if}
 
 <!--

package/dist/forms/select/MultiSelect.svelte

@@ -5,6 +5,7 @@
   let {
     outerDivClass,
     ulOptionsClass,
+    liOptionsClass,
     ulSelectedClass,
     liSelectedClass,
     inputClass,
@@ -25,7 +26,7 @@
 
     ...restProps
   }: Props<T> = $props();
-  const { outerDiv: outerDivCls, ulOptions, ulSelected, liSelected, input: inputCls } = $derived(multiselect());
+  const { outerDiv: outerDivCls, ulOptions, ulSelected, liSelected, input: inputCls, liOptions } = $derived(multiselect());
 </script>
 
-<MultiSelect bind:selected bind:value bind:searchText bind:open bind:activeIndex bind:activeOption bind:invalid bind:input bind:outerDiv bind:form_input bind:options bind:matchingOptions {...restProps} outerDivClass={outerDivCls({ className: outerDivClass })} ulOptionsClass={ulOptions({ class: ulOptionsClass })} ulSelectedClass={ulSelected({ class: ulSelectedClass })} liSelectedClass={liSelected({ class: liSelectedClass })} inputClass={inputCls({ class: inputClass })} --sms-remove-btn-hover-color="white" />
+<MultiSelect bind:selected bind:value bind:searchText bind:open bind:activeIndex bind:activeOption bind:invalid bind:input bind:outerDiv bind:form_input bind:options bind:matchingOptions {...restProps} outerDivClass={outerDivCls({ className: outerDivClass })} ulOptionsClass={ulOptions({ class: ulOptionsClass })} ulSelectedClass={ulSelected({ class: ulSelectedClass })} liSelectedClass={liSelected({ class: liSelectedClass })} inputClass={inputCls({ class: inputClass })} liOptionClass={liOptions({ class: liOptionsClass })} --sms-remove-btn-hover-color="white" />

package/dist/forms/select/Select.svelte

@@ -1,19 +1,35 @@
 <script lang="ts" generics="T">
+  import { browser } from "$app/environment";
   import { type SelectProps as Props, select as selectCls } from ".";
 
-  let { children, items, value = $bindable(), underline, size = "md", class: className, placeholder = "Choose option...", ...restProps }: Props<T> = $props();
+  let { children, items, value = $bindable(), underline, size = "md", class: className, placeholder = "Choose option...", placeholderValue = undefined, ...restProps }: Props<T> = $props();
 
-  const selectStyle = $derived(selectCls({ underline, size, className }));
+  const customSelect = $derived(browser ? CSS.supports("appearance: base-select") : true);
+  const selectStyle = $derived(selectCls({ underline, size, customSelect, className }));
 </script>
 
-<select {...restProps} bind:value class={selectStyle}>
+<select class={selectStyle} class:custom-select={customSelect} bind:value {...restProps}>
+  {#if customSelect}
+    <!-- svelte-ignore node_invalid_placement_ssr -->
+    <button class="flex w-full items-center justify-between" aria-label="Select Picker">
+      <selectedcontent></selectedcontent>
+      <span class="picker transition-rotate duration-400">
+        <svg class="text-light-surface-800 size-3 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
+          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5 5 1 1 5" />
+        </svg>
+      </span>
+    </button>
+  {/if}
+
   {#if placeholder}
-    <option disabled selected value={undefined}>{placeholder}</option>
+    <option disabled selected value={placeholderValue} class={[customSelect && "flex flex-row items-center gap-3 rounded-lg rounded-md px-3 py-2 text-sm"]}>{placeholder}</option>
   {/if}
 
   {#if items}
     {#each items as { value, name }}
-      <option {value} class="text-dark-surface-950 required:invalid:text-dark-surface-400 dark:text-white">{name}</option>
+      <option {value} class={["text-dark-surface-950 required:invalid:text-dark-surface-400 dark:text-white", customSelect && "hover:bg-light-surface-200/70 dark:hover:bg-dark-surface-600 hover:text-light-surface-900 flex cursor-pointer flex-row items-center gap-3 rounded-lg rounded-md px-3 py-2 text-sm dark:hover:text-white"]}>
+        {name}
+      </option>
     {/each}
   {/if}
 
@@ -22,9 +38,40 @@
   {/if}
 </select>
 
-<!--
-@component
-[Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
-## Props
-@props: 
--->
+<style>
+  select.custom-select {
+    &,
+    &::picker(select) {
+      appearance: base-select;
+    }
+
+    &::picker-icon {
+      display: none;
+    }
+    .picker {
+      rotate: 180deg;
+      :open & {
+        rotate: 0deg;
+      }
+    }
+
+    &::picker(select) {
+      border-radius: var(--radius-lg);
+      padding: calc(var(--spacing) * 1);
+      margin-block: 0.5rem;
+      border: none;
+      box-shadow:
+        0 10px 15px -3px rgba(0, 0, 0, 0.1),
+        0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
+      background-color: #ffffff;
+      color: var(--color-light-surface-700);
+      border: 1px solid var(--color-light-surface-200);
+    }
+
+    :global(.dark &::picker(select)) {
+      background-color: var(--color-dark-surface-700);
+      color: var(--color-dark-surface-200);
+      border-color: var(--color-dark-surface-600);
+    }
+  }
+</style>

package/dist/forms/select/Select.svelte.d.ts

@@ -20,11 +20,6 @@ interface $$IsomorphicComponent {
     <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
-/**
- * [Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
- * ## Props
- * @props:
- */
 declare const Select: $$IsomorphicComponent;
 type Select<T> = InstanceType<typeof Select<T>>;
 export default Select;

package/dist/forms/select/theme.d.ts

@@ -8,6 +8,10 @@ export declare const select: import("tailwind-variants").TVReturnType<{
         md: string;
         lg: string;
     };
+    customSelect: {
+        true: string;
+        false: string;
+    };
 }, undefined, "block w-full disabled:cursor-not-allowed disabled:opacity-50", import("tailwind-variants/dist/config.js").TVConfig<{
     underline: {
         true: string;
@@ -18,6 +22,10 @@ export declare const select: import("tailwind-variants").TVReturnType<{
         md: string;
         lg: string;
     };
+    customSelect: {
+        true: string;
+        false: string;
+    };
 }, {
     underline: {
         true: string;
@@ -28,6 +36,10 @@ export declare const select: import("tailwind-variants").TVReturnType<{
         md: string;
         lg: string;
     };
+    customSelect: {
+        true: string;
+        false: string;
+    };
 }>, {
     underline: {
         true: string;
@@ -38,6 +50,10 @@ export declare const select: import("tailwind-variants").TVReturnType<{
         md: string;
         lg: string;
     };
+    customSelect: {
+        true: string;
+        false: string;
+    };
 }, undefined, import("tailwind-variants").TVReturnType<{
     underline: {
         true: string;
@@ -48,6 +64,10 @@ export declare const select: import("tailwind-variants").TVReturnType<{
         md: string;
         lg: string;
     };
+    customSelect: {
+        true: string;
+        false: string;
+    };
 }, undefined, "block w-full disabled:cursor-not-allowed disabled:opacity-50", import("tailwind-variants/dist/config.js").TVConfig<{
     underline: {
         true: string;
@@ -58,6 +78,10 @@ export declare const select: import("tailwind-variants").TVReturnType<{
         md: string;
         lg: string;
     };
+    customSelect: {
+        true: string;
+        false: string;
+    };
 }, {
     underline: {
         true: string;
@@ -68,6 +92,10 @@ export declare const select: import("tailwind-variants").TVReturnType<{
         md: string;
         lg: string;
     };
+    customSelect: {
+        true: string;
+        false: string;
+    };
 }>, unknown, unknown, undefined>>;
 export declare const multiselect: import("tailwind-variants").TVReturnType<{
     [key: string]: {
@@ -77,6 +105,7 @@ export declare const multiselect: import("tailwind-variants").TVReturnType<{
             ulOptions?: import("tailwind-variants").ClassValue;
             ulSelected?: import("tailwind-variants").ClassValue;
             liSelected?: import("tailwind-variants").ClassValue;
+            liOptions?: import("tailwind-variants").ClassValue;
         };
     };
 } | {
@@ -87,11 +116,13 @@ export declare const multiselect: import("tailwind-variants").TVReturnType<{
             ulOptions?: import("tailwind-variants").ClassValue;
             ulSelected?: import("tailwind-variants").ClassValue;
             liSelected?: import("tailwind-variants").ClassValue;
+            liOptions?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
     outerDiv: string;
     ulOptions: string;
+    liOptions: string;
     ulSelected: string;
     liSelected: string;
     input: string;
@@ -103,6 +134,7 @@ export declare const multiselect: import("tailwind-variants").TVReturnType<{
             ulOptions?: import("tailwind-variants").ClassValue;
             ulSelected?: import("tailwind-variants").ClassValue;
             liSelected?: import("tailwind-variants").ClassValue;
+            liOptions?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}>, {
@@ -113,17 +145,20 @@ export declare const multiselect: import("tailwind-variants").TVReturnType<{
             ulOptions?: import("tailwind-variants").ClassValue;
             ulSelected?: import("tailwind-variants").ClassValue;
             liSelected?: import("tailwind-variants").ClassValue;
+            liOptions?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
     outerDiv: string;
     ulOptions: string;
+    liOptions: string;
     ulSelected: string;
     liSelected: string;
     input: string;
 }, import("tailwind-variants").TVReturnType<unknown, {
     outerDiv: string;
     ulOptions: string;
+    liOptions: string;
     ulSelected: string;
     liSelected: string;
     input: string;
@@ -135,6 +170,7 @@ export declare const multiselect: import("tailwind-variants").TVReturnType<{
             ulOptions?: import("tailwind-variants").ClassValue;
             ulSelected?: import("tailwind-variants").ClassValue;
             liSelected?: import("tailwind-variants").ClassValue;
+            liOptions?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}>, unknown, unknown, undefined>>;

package/dist/forms/select/theme.js

@@ -8,20 +8,26 @@ export const select = tv({
             false: "text-light-surface-900 bg-light-surface-50 border border-light-surface-300 rounded-lg focus:ring-primary-500 focus:border-primary-500 dark:bg-dark-surface-700 dark:border-dark-surface-600 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500 dark:placeholder-dark-surface-400 required:invalid:text-dark-surface-400 outline-hidden focus:ring-1"
         },
         size: {
-            sm: "text-sm p-2",
-            md: "text-sm p-2.5",
-            lg: "text-base py-3 px-4"
+            sm: "text-xs ps-9 pe-9 p-2",
+            md: "text-sm ps-10 pe-10 p-2.5",
+            lg: "sm:text-base ps-11 pe-11 p-3"
+        },
+        customSelect: {
+            true: "",
+            false: ""
         }
     },
     defaultVariants: {
         underline: false,
-        size: "md"
+        size: "md",
+        customSelect: true
     }
 });
 export const multiselect = tv({
     slots: {
         outerDiv: "!text-light-surface-900 !bg-light-surface-50 !border !border-light-surface-300 !rounded-lg !outline-none focus-within:!ring-1 focus-within:!ring-primary-500 focus-within:!border-primary-500 dark:!bg-dark-surface-700 dark:!border-dark-surface-600 dark:!placeholder-dark-surface-400 dark:!text-white dark:focus-within:!ring-primary-500 dark:focus-within:!border-primary-500 !px-2 !py-1 !min-h-[2.7rem]",
-        ulOptions: "!bg-white dark:!bg-dark-surface-700 !max-h-40",
+        ulOptions: "!bg-white dark:!bg-dark-surface-700 !max-h-40 !border-1 !outline-none drop-shadow-lg dark:!border-dark-surface-600 !border-light-surface-200 !p-1 text-light-surface-700 dark:text-dark-surface-200",
+        liOptions: "!bg-transparent !text-dark-surface-950 required:invalid:!text-dark-surface-400 dark:!text-white hover:!bg-light-surface-200/70 dark:hover:!bg-dark-surface-600 hover:!text-light-surface-900 flex cursor-pointer flex-row items-center gap-3 rounded-md !px-3 !py-2 text-sm dark:hover:!text-white",
         ulSelected: "!flex !gap-1.5 !mx-2",
         liSelected: "!border-light-surface-200 dark:!border-dark-surface-700 !divide-light-surface-200 dark:!divide-dark-surface-700 !font-medium !text-xs !text-light-surface-800 dark:!text-dark-surface-300 !rounded !bg-light-surface-200 dark:!bg-dark-surface-600 !py-1 !px-2 !m-0",
         input: "placeholder:!text-light-surface-400"

package/dist/forms/select/type.d.ts

@@ -12,10 +12,12 @@ interface SelectProps<T> extends Omit<HTMLSelectAttributes, "size"> {
     underline?: boolean;
     size?: SelectSize;
     placeholder?: string;
+    placeholderValue?: any;
 }
 interface MultiSelectProps<T> extends MultiSelectParameters {
     outerDivClass?: string;
     ulOptionsClass?: string;
+    liOptionsClass?: string;
     ulSelectedClass?: string;
     liSelectedClass?: string;
     inputClass?: string;

package/dist/forms/toggle/theme.js

@@ -2,7 +2,7 @@ import { tv } from "tailwind-variants";
 export const toggle = tv({
     slots: {
         span: "me-3 shrink-0 bg-light-surface-200 rounded-full peer-focus-visible:ring-4 peer-checked:after:translate-x-full peer-checked:rtl:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:bg-white after:border-light-surface-300 after:border after:rounded-full after:transition-all dark:bg-dark-surface-600 dark:border-dark-surface-500 relative cursor-pointer",
-        label: "flex items-center",
+        label: "flex items-center w-fit",
         input: "w-4 h-4 bg-light-surface-100 border-light-surface-300 dark:ring-offset-dark-surface-800 focus:ring-2 rounded-sm dark:bg-dark-surface-700 dark:border-dark-surface-600 sr-only peer"
     },
     variants: {

package/dist/sidebar/theme.js

@@ -2,9 +2,9 @@ import { tv } from "tailwind-variants";
 export const sidebar = tv({
     slots: {
         base: "top-0 left-0 z-10 min-w-full",
-        div: "overflow-y-auto p-2 rounded-xl bg-light-surface-100 dark:bg-dark-surface-800",
-        active: "cursor-pointer flex items-center p-2 rounded-lg text-base font-normal text-light-surface-900 dark:text-white bg-light-surface-300 dark:bg-dark-surface-700 hover:bg-light-surface-300/50 dark:hover:bg-dark-surface-600",
-        nonactive: "cursor-pointer flex items-center p-2 rounded-lg text-base font-normal text-light-surface-700 dark:text-dark-surface-400 hover:bg-light-surface-300/50 dark:hover:bg-dark-surface-600 hover:text-light-surface-800 dark:hover:text-dark-surface-200"
+        div: "overflow-y-auto p-2 rounded-xl bg-light-surface-200 dark:bg-dark-surface-800",
+        active: "cursor-pointer flex items-center p-2 text-nowrap rounded-lg text-base font-normal text-light-surface-900 dark:text-white bg-light-surface-100 dark:bg-dark-surface-700 hover:bg-light-surface-300/50 dark:hover:bg-dark-surface-600",
+        nonactive: "cursor-pointer flex items-center p-2 text-nowrap rounded-lg text-base font-normal text-light-surface-700 dark:text-dark-surface-400 hover:bg-light-surface-300/50 dark:hover:bg-dark-surface-600 hover:text-light-surface-800 dark:hover:text-dark-surface-200"
     },
     variants: {
         position: {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "odj-svelte-ui",
   "author": "orbitadajogatina",
-  "version": "0.4.4",
+  "version": "0.5.0",
   "description": "This is a fork from Flowbite Svelte 5 with Runes. I just made some changes that fits better my taste.",
   "license": "MIT",
   "main": "dist/index.js",
@@ -37,19 +37,19 @@
     "cp": "npx changeset publish"
   },
   "devDependencies": {
-    "@changesets/cli": "^2.29.7",
-    "@playwright/test": "^1.55.1",
+    "@changesets/cli": "^2.31.0",
+    "@playwright/test": "^1.59.1",
     "@popperjs/core": "^2.11.8",
-    "@sveltejs/adapter-vercel": "^5.10.2",
+    "@sveltejs/adapter-vercel": "^5.10.3",
     "@sveltejs/enhanced-img": "^0.4.4",
-    "@sveltejs/kit": "^2.43.5",
-    "@sveltejs/package": "^2.5.4",
+    "@sveltejs/kit": "^2.57.1",
+    "@sveltejs/package": "^2.5.7",
     "@sveltejs/vite-plugin-svelte": "^5.1.1",
     "@svitejs/changesets-changelog-github-compact": "^1.2.0",
     "@types/eslint": "^9.6.1",
-    "@types/node": "^22.18.6",
-    "autoprefixer": "^10.4.21",
-    "eslint": "^9.36.0",
+    "@types/node": "^22.19.17",
+    "autoprefixer": "^10.5.0",
+    "eslint": "^9.39.4",
     "eslint-config-prettier": "^9.1.2",
     "eslint-plugin-svelte": "^2.46.1",
     "flowbite": "^2.5.2",
@@ -57,23 +57,23 @@
     "flowbite-svelte-icons": "^2.3.0",
     "globals": "^15.15.0",
     "highlight.js": "^11.11.1",
-    "postcss": "^8.5.6",
-    "prettier": "^3.6.2",
-    "prettier-plugin-svelte": "^3.4.0",
+    "postcss": "^8.5.10",
+    "prettier": "^3.8.3",
+    "prettier-plugin-svelte": "^3.5.1",
     "prettier-plugin-tailwindcss": "^0.6.14",
     "publint": "^0.2.12",
     "runatics": "^0.1.4",
     "runes-meta-tags": "^0.4.5",
-    "svelte": "^5.39.6",
+    "svelte": "^5.55.4",
     "svelte-animated-icons": "^0.7.1",
-    "svelte-check": "^4.3.2",
+    "svelte-check": "^4.4.6",
     "svelte-lib-helpers": "^0.4.31",
     "svelte-rune-highlight": "^0.5.15",
     "tslib": "^2.8.1",
-    "tsx": "^4.20.6",
-    "typescript": "^5.9.2",
-    "typescript-eslint": "^8.44.1",
-    "vite": "^6.3.6",
+    "tsx": "^4.21.0",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.59.0",
+    "vite": "^6.4.2",
     "vite-imagetools": "^7.1.1"
   },
   "peerDependencies": {
@@ -89,16 +89,16 @@
   ],
   "type": "module",
   "dependencies": {
-    "@floating-ui/dom": "^1.7.4",
+    "@floating-ui/dom": "^1.7.6",
     "@skeletonlabs/floating-ui-svelte": "^0.3.9",
-    "@tailwindcss/postcss": "^4.1.13",
+    "@tailwindcss/postcss": "^4.2.4",
     "apexcharts": "^3.54.1",
     "clsx": "^2.1.1",
     "deepmerge": "^4.3.1",
-    "svelte-multiselect": "^11.2.3",
-    "tailwind-merge": "^2.6.0",
+    "svelte-multiselect": "^11.7.0",
+    "tailwind-merge": "^2.6.1",
     "tailwind-variants": "^0.3.1",
-    "tailwindcss": "^4.1.13"
+    "tailwindcss": "^4.2.4"
   },
   "exports": {
     ".": {