odj-svelte-ui 0.2.3 → 0.2.5

package/README.md

@@ -5,6 +5,7 @@ This is a fork from [Flowbite for Svelte 5 with Runes](https://svelte-5-ui-lib.c
 - [Original Docs](https://svelte-5-ui-lib.codewithshin.com/)
 
 ## Differences to Flowbite
+
 - Migration to Tailwind v4;
 - You can choose the "background" color instead of using the hard-coded `gray` color. You have to choose your colors defining `light-surface` and `dark-surface` on `app.css`;
 - Some components have the design slightly different:
@@ -31,7 +32,7 @@ This is a fork from [Flowbite for Svelte 5 with Runes](https://svelte-5-ui-lib.c
 - `Avatar` supports a `fallback` snippet to show when the image is loading or can't be loaded;
 - `Sidebar` can not be opened or closed anymore. If you want this behaviour, this component should be inside the `Drawer` component. On mobile, `Sidebar` will look like tabs;
 - `SidebarButton` has been removed. Please use the `Drawer` component to maintain the old sidebar behaviour;
-
+- `Card` can be a button now adding `clickable` prop;
 
 ## Installation
 
@@ -46,6 +47,7 @@ bun dev
 ```
 
 Add the following to app.css:
+
 > 💡 TIP: Get colors' codes [here](https://tailwindcss.com/docs/colors#default-color-palette-reference).
 
 ```js

package/dist/avatar/Avatar.svelte

@@ -3,7 +3,7 @@
   import { onMount } from "svelte";
   import { type AvatarProps as Props, avatar, fallback as fallbackTheme } from ".";
 
-  let { children, src, href, target, cornerStyle = "circular", border = false, stacked = false, dot, class: className, alt, size = "md", onclick, fallback, fallbackClass: fallbackClassName, ...restProps }: Props = $props();
+  let { children, src, href, target, cornerStyle = "circular", border = false, stacked = false, dot, class: className, alt, size = "md", onclick, fallback, fallbackClass: fallbackClassName, placeholderClass, ...restProps }: Props = $props();
 
   dot = dot && { placement: "top-right", color: "red", size: "lg", ...dot };
 
@@ -56,7 +56,7 @@
     {:else if children}
       {@render children()}
     {:else}
-      <svg class="h-full w-full {cornerStyle === 'circular' ? 'rounded-full' : 'rounded-sm'}" fill="currentColor" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+      <svg class="h-full w-full {placeholderClass} {cornerStyle === 'circular' ? 'rounded-full' : 'rounded-sm'}" fill="currentColor" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
         <path fill-rule="evenodd" d="M8 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path>
       </svg>
     {/if}

package/dist/avatar/theme.js

@@ -15,11 +15,11 @@ const avatar = tv({
             false: ""
         },
         size: {
-            xs: "w-6 h-6",
-            sm: "w-8 h-8",
-            md: "w-10 h-10",
-            lg: "w-20 h-20",
-            xl: "w-36 h-36"
+            xs: "size-6",
+            sm: "size-8",
+            md: "size-10",
+            lg: "size-20",
+            xl: "size-36"
         }
     },
     defaultVariants: {
@@ -45,11 +45,11 @@ const fallback = tv({
             false: ""
         },
         size: {
-            xs: "w-6 h-6",
-            sm: "w-8 h-8",
-            md: "w-10 h-10",
-            lg: "w-20 h-20",
-            xl: "w-36 h-36"
+            xs: "size-6",
+            sm: "size-8",
+            md: "size-10",
+            lg: "size-20",
+            xl: "size-36"
         }
     },
     defaultVariants: {

package/dist/avatar/type.d.ts

@@ -14,5 +14,6 @@ interface AvatarProps extends HTMLAttributes<HTMLDivElement> {
     border?: boolean;
     fallback?: Snippet;
     fallbackClass?: string;
+    placeholderClass?: string;
 }
 export { type AvatarProps };

package/dist/cards/Card.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
   import { card, type CardProps as Props } from ".";
-  import type { HTMLAttributes, HTMLAnchorAttributes } from "svelte/elements";
+  import type { HTMLAttributes, HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";
 
-  let { children, href, color = "gray", horizontal = false, shadow = "md", reverse = false, img, padding = "lg", size = "sm", class: className, imgClass, contentClass, ...restProps }: Props = $props();
+  let { children, href, color = "default", horizontal = false, shadow = "md", reverse = false, img, padding = "lg", size = "sm", clickable, class: className, imgClass, contentClass, ...restProps }: Props = $props();
 
   const { base, image, content } = $derived(
     card({
@@ -12,7 +12,7 @@
       padding,
       horizontal,
       reverse,
-      href: !!href
+      href: !!href || !!clickable
     })
   );
 
@@ -27,6 +27,10 @@
     href
   });
 
+  const buttonProps: HTMLButtonAttributes = $derived({
+    ...commonProps
+  });
+
   const divProps: HTMLAttributes<HTMLDivElement> = $derived({
     ...commonProps
   });
@@ -49,6 +53,10 @@
   <a {...anchorProps}>
     {@render childSlot()}
   </a>
+{:else if clickable}
+  <button {...buttonProps}>
+    {@render childSlot()}
+  </button>
 {:else}
   <div {...divProps}>
     {@render childSlot()}

package/dist/cards/theme.d.ts

@@ -138,7 +138,9 @@ export declare const card: import("tailwind-variants").TVReturnType<{
         };
     };
     href: {
-        true: string;
+        true: {
+            base: string;
+        };
         false: string;
     };
     hasImage: {
@@ -289,7 +291,9 @@ export declare const card: import("tailwind-variants").TVReturnType<{
         };
     };
     href: {
-        true: string;
+        true: {
+            base: string;
+        };
         false: string;
     };
     hasImage: {
@@ -436,7 +440,9 @@ export declare const card: import("tailwind-variants").TVReturnType<{
         };
     };
     href: {
-        true: string;
+        true: {
+            base: string;
+        };
         false: string;
     };
     hasImage: {
@@ -583,7 +589,9 @@ export declare const card: import("tailwind-variants").TVReturnType<{
         };
     };
     href: {
-        true: string;
+        true: {
+            base: string;
+        };
         false: string;
     };
     hasImage: {
@@ -734,7 +742,9 @@ export declare const card: import("tailwind-variants").TVReturnType<{
         };
     };
     href: {
-        true: string;
+        true: {
+            base: string;
+        };
         false: string;
     };
     hasImage: {
@@ -885,7 +895,9 @@ export declare const card: import("tailwind-variants").TVReturnType<{
         };
     };
     href: {
-        true: string;
+        true: {
+            base: string;
+        };
         false: string;
     };
     hasImage: {
@@ -1032,7 +1044,9 @@ export declare const card: import("tailwind-variants").TVReturnType<{
         };
     };
     href: {
-        true: string;
+        true: {
+            base: string;
+        };
         false: string;
     };
     hasImage: {

package/dist/cards/theme.js

@@ -1,7 +1,7 @@
 import { tv } from "tailwind-variants";
 export const card = tv({
     slots: {
-        base: "w-full flex max-w-sm bg-white border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700",
+        base: "w-full flex max-w-sm bg-white border border-light-surface-200 rounded-lg dark:bg-dark-surface-700 dark:border-light-surface-600",
         image: "rounded-t-lg",
         content: ""
     },
@@ -64,7 +64,9 @@ export const card = tv({
             false: { base: "flex-col", image: "rounded-t-lg" }
         },
         href: {
-            true: "",
+            true: {
+                base: "cursor-pointer focus-visible:outline-hidden focus-visible:ring-4 focus-visible:ring-primary-300 dark:focus-visible:ring-primary-800 hover:bg-dark-surface-100 dark:hover:bg-dark-surface-600 dark:hover:border-dark-surface-500"
+            },
             false: ""
         },
         hasImage: {

package/dist/cards/type.d.ts

@@ -20,6 +20,7 @@ interface BaseCardProps {
     size?: CardSizeType;
     class?: string;
     imgClass?: string;
+    clickable?: boolean;
     contentClass?: string;
 }
 type CardProps = BaseCardProps & (({

package/dist/forms/dropzone/Dropzone.svelte

@@ -8,6 +8,9 @@
     children,
     files = $bindable<FileList | null>(),
     class: className,
+    ondrop,
+    ondragover,
+    onchange,
     ...restProps
   }: Props & {
     ondrop?: DragEventHandler<HTMLButtonElement>;

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

@@ -1 +1 @@
-export declare const dropzone: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "flex flex-col justify-center items-center w-full h-64 bg-gray-50 rounded-lg border-2 border-gray-300 border-dashed cursor-pointer dark:hover:bg-bray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600", import("tailwind-variants/dist/config").TVConfig<unknown, {} | {}>, {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "flex flex-col justify-center items-center w-full h-64 bg-gray-50 rounded-lg border-2 border-gray-300 border-dashed cursor-pointer dark:hover:bg-bray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600", import("tailwind-variants/dist/config").TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
+export declare const dropzone: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "flex flex-col justify-center items-center w-full h-64 bg-light-surface-50 rounded-lg border-2 border-light-surface-300 border-dashed cursor-pointer dark:hover:bg-dark-surface-800 dark:bg-dark-surface-700 hover:bg-light-surface-100 dark:border-dark-surface-600 dark:hover:border-dark-surface-500 dark:hover:bg-dark-surface-600 focus-visible:ring-4 focus-visible:outline-hidden focus-visible:ring-primary-300 dark:focus-visible:ring-primary-800", import("tailwind-variants/dist/config").TVConfig<unknown, {} | {}>, {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "flex flex-col justify-center items-center w-full h-64 bg-light-surface-50 rounded-lg border-2 border-light-surface-300 border-dashed cursor-pointer dark:hover:bg-dark-surface-800 dark:bg-dark-surface-700 hover:bg-light-surface-100 dark:border-dark-surface-600 dark:hover:border-dark-surface-500 dark:hover:bg-dark-surface-600 focus-visible:ring-4 focus-visible:outline-hidden focus-visible:ring-primary-300 dark:focus-visible:ring-primary-800", import("tailwind-variants/dist/config").TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;

package/dist/forms/dropzone/theme.js

@@ -1,4 +1,4 @@
 import { tv } from "tailwind-variants";
 export const dropzone = tv({
-    base: "flex flex-col justify-center items-center w-full h-64 bg-gray-50 rounded-lg border-2 border-gray-300 border-dashed cursor-pointer dark:hover:bg-bray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600"
+    base: "flex flex-col justify-center items-center w-full h-64 bg-light-surface-50 rounded-lg border-2 border-light-surface-300 border-dashed cursor-pointer dark:hover:bg-dark-surface-800 dark:bg-dark-surface-700 hover:bg-light-surface-100 dark:border-dark-surface-600 dark:hover:border-dark-surface-500 dark:hover:bg-dark-surface-600 focus-visible:ring-4 focus-visible:outline-hidden focus-visible:ring-primary-300 dark:focus-visible:ring-primary-800"
 });

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

@@ -1,6 +1,7 @@
 export declare const toggle: import("tailwind-variants").TVReturnType<{
     disabled: {
         true: {
+            span: string;
             label: string;
         };
     };
@@ -88,6 +89,7 @@ export declare const toggle: import("tailwind-variants").TVReturnType<{
 }, undefined, import("tailwind-variants/dist/config").TVConfig<{
     disabled: {
         true: {
+            span: string;
             label: string;
         };
     };
@@ -171,6 +173,7 @@ export declare const toggle: import("tailwind-variants").TVReturnType<{
 }, {
     disabled: {
         true: {
+            span: string;
             label: string;
         };
     };
@@ -254,6 +257,7 @@ export declare const toggle: import("tailwind-variants").TVReturnType<{
 }>, {
     disabled: {
         true: {
+            span: string;
             label: string;
         };
     };
@@ -341,6 +345,7 @@ export declare const toggle: import("tailwind-variants").TVReturnType<{
 }, import("tailwind-variants").TVReturnType<{
     disabled: {
         true: {
+            span: string;
             label: string;
         };
     };
@@ -428,6 +433,7 @@ export declare const toggle: import("tailwind-variants").TVReturnType<{
 }, undefined, import("tailwind-variants/dist/config").TVConfig<{
     disabled: {
         true: {
+            span: string;
             label: string;
         };
     };
@@ -511,6 +517,7 @@ export declare const toggle: import("tailwind-variants").TVReturnType<{
 }, {
     disabled: {
         true: {
+            span: string;
             label: string;
         };
     };

package/dist/forms/toggle/theme.js

@@ -1,13 +1,16 @@
 import { tv } from "tailwind-variants";
 export const toggle = tv({
     slots: {
-        span: "me-3 shrink-0 bg-gray-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-gray-300 after:border after:rounded-full after:transition-all dark:bg-gray-600 dark:border-gray-500 relative cursor-pointer",
+        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",
-        input: "w-4 h-4 bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2 rounded-sm dark:bg-gray-700 dark:border-gray-600 sr-only peer"
+        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: {
         disabled: {
-            true: { label: "cursor-not-allowed opacity-50" }
+            true: {
+                span: "cursor-not-allowed",
+                label: "cursor-not-allowed opacity-50"
+            }
         },
         checked: {
             true: "",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "odj-svelte-ui",
   "author": "orbitadajogatina",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "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",