odj-svelte-ui 0.2.4 → 0.2.6

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:
@@ -21,6 +22,7 @@ This is a fork from [Flowbite for Svelte 5 with Runes](https://svelte-5-ui-lib.c
   - `Dropdown` is more modern;
   - `Avatar` has better borders;
   - `Sidebar` has better hover colors and some other design tweaks, like border radius;
+  - `Card` is now rounded-xl;
 - `Tabs` styles are fixed and introduced underline animations and a complete modern redesign for "Full" style;
 - The `Tooltip` component received a rework;
 - `Modal` has <kbd>Esc</kbd> to close again;
@@ -31,7 +33,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 +48,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,8 +1,8 @@
 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",
-        image: "rounded-t-lg",
+        base: "w-full flex max-w-sm bg-white border border-light-surface-200 rounded-xl dark:bg-dark-surface-700 dark:border-light-surface-600",
+        image: "rounded-t-xl",
         content: ""
     },
     variants: {
@@ -60,11 +60,13 @@ export const card = tv({
             }
         },
         reverse: {
-            true: { base: "flex-col-reverse", image: "rounded-b-lg rounded-tl-none" },
-            false: { base: "flex-col", image: "rounded-t-lg" }
+            true: { base: "flex-col-reverse", image: "rounded-b-xl rounded-tl-none" },
+            false: { base: "flex-col", image: "rounded-t-xl" }
         },
         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: {
@@ -76,12 +78,12 @@ export const card = tv({
         {
             horizontal: true,
             reverse: true,
-            class: { base: "md:flex-row-reverse", image: "md:rounded-e-lg" }
+            class: { base: "md:flex-row-reverse", image: "md:rounded-e-xl" }
         },
         {
             horizontal: true,
             reverse: false,
-            class: { base: "md:flex-row", image: "md:rounded-s-lg" }
+            class: { base: "md:flex-row", image: "md:rounded-s-xl" }
         },
         // gray, primary, secondary, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose
         {

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/tabs/theme.js

@@ -4,8 +4,8 @@ export const tabs = tv({
         base: "flex space-x-2 rtl:space-x-reverse",
         content: "rounded-lg mt-2",
         divider: "h-px bg-light-surface-200 dark:bg-dark-surface-700",
-        active: "p-4 text-primary-600 bg-light-surface-100 rounded-t-lg",
-        inactive: "p-4 text-light-surface-500 rounded-t-lg",
+        active: "p-4 text-primary-600 bg-light-surface-100",
+        inactive: "p-4 text-light-surface-500",
         slider: ""
     },
     variants: {
@@ -27,8 +27,8 @@ export const tabs = tv({
                 slider: "absolute bottom-0 transition-all duration-200 border-b-2 border-primary-600 dark:border-primary-500 m-0! z-10"
             },
             none: {
-                active: "dark:bg-dark-surface-800 dark:text-primary-500",
-                inactive: "hover:text-light-surface-600 hover:bg-light-surface-50 dark:text-dark-surface-400 dark:hover:bg-dark-surface-800 dark:hover:text-dark-surface-300"
+                active: "dark:bg-dark-surface-800 dark:text-primary-500 rounded-t-lg",
+                inactive: "hover:text-light-surface-600 hover:bg-light-surface-50 dark:text-dark-surface-400 dark:hover:bg-dark-surface-800 dark:hover:text-dark-surface-300 rounded-t-lg"
             }
         },
         hasDivider: {

package/package.json

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