odj-svelte-ui 0.2.4 → 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/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/package.json

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