odj-svelte-ui 0.4.2 → 0.4.4

package/README.md

@@ -36,6 +36,7 @@ This is a fork from [Flowbite for Svelte 5 with Runes](https://svelte-5-ui-lib.c
 - `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.
+- `Table` can be rounded with `rounded` prop.
 
 ## Installation
 

package/dist/table/Table.svelte

@@ -2,9 +2,9 @@
   import { setContext } from "svelte";
   import { type TableProps as Props, table as tableCls, type TableCtxType, TableHead, TableBody, type HeadItemType } from ".";
 
-  let { children, footerSlot, captionSlot, tableItems, divClass = "relative overflow-x-auto", striped, hoverable, noborder, shadow, color = "default", class: className, ...restProps }: Props = $props();
+  let { children, footerSlot, captionSlot, tableItems, divClass = "relative overflow-x-auto", striped, hoverable, noborder, shadow, rounded, color = "default", class: className, ...restProps }: Props = $props();
 
-  const { base, table } = $derived(tableCls({ color, shadow }));
+  const { base, table } = $derived(tableCls({ color, shadow, rounded }));
 
   let tableCtx: TableCtxType = {
     get striped() {
@@ -60,6 +60,7 @@
 @props:hoverable: any;
 @props:noborder: any;
 @props:shadow: any;
+@props:rounded: any;
 @props:color: any = "default";
 @props:class: string;
 -->

package/dist/table/Table.svelte.d.ts

@@ -11,6 +11,7 @@ import { type TableProps as Props } from ".";
  * @props:hoverable: any;
  * @props:noborder: any;
  * @props:shadow: any;
+ * @props:rounded: any;
  * @props:color: any = "default";
  * @props:class: string;
  */

package/dist/table/theme.d.ts

@@ -69,6 +69,9 @@ export declare const table: import("tailwind-variants").TVReturnType<{
             base: string;
         };
     };
+    rounded: {
+        true: string;
+    };
 }, {
     base: string;
     table: string;
@@ -143,6 +146,9 @@ export declare const table: import("tailwind-variants").TVReturnType<{
             base: string;
         };
     };
+    rounded: {
+        true: string;
+    };
 }, {
     color: {
         default: {
@@ -214,6 +220,9 @@ export declare const table: import("tailwind-variants").TVReturnType<{
             base: string;
         };
     };
+    rounded: {
+        true: string;
+    };
 }>, {
     color: {
         default: {
@@ -285,6 +294,9 @@ export declare const table: import("tailwind-variants").TVReturnType<{
             base: string;
         };
     };
+    rounded: {
+        true: string;
+    };
 }, {
     base: string;
     table: string;
@@ -359,6 +371,9 @@ export declare const table: import("tailwind-variants").TVReturnType<{
             base: string;
         };
     };
+    rounded: {
+        true: string;
+    };
 }, {
     base: string;
     table: string;
@@ -433,6 +448,9 @@ export declare const table: import("tailwind-variants").TVReturnType<{
             base: string;
         };
     };
+    rounded: {
+        true: string;
+    };
 }, {
     color: {
         default: {
@@ -504,6 +522,9 @@ export declare const table: import("tailwind-variants").TVReturnType<{
             base: string;
         };
     };
+    rounded: {
+        true: string;
+    };
 }>, unknown, unknown, undefined>>;
 export declare const tablebodyrow: import("tailwind-variants").TVReturnType<{
     color: {

package/dist/table/theme.js

@@ -7,7 +7,7 @@ export const table = tv({
     variants: {
         color: {
             // default, primary, secondary, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose
-            default: { table: "text-gray-500 dark:text-gray-400" },
+            default: { table: "text-light-surface-500 dark:text-dark-surface-400" },
             primary: { table: "text-primary-100 dark:text-primary-100" },
             secondary: { table: "text-secondary-100 dark:text-secondary-100" },
             gray: { table: "text-gray-100 dark:text-gray-100" },
@@ -31,6 +31,9 @@ export const table = tv({
         },
         shadow: {
             true: { base: "shadow-md sm:rounded-lg" }
+        },
+        rounded: {
+            true: "rounded-lg"
         }
     }
 });
@@ -38,7 +41,7 @@ export const tablebodyrow = tv({
     base: "",
     variants: {
         color: {
-            default: "bg-white dark:bg-gray-800 dark:border-gray-700",
+            default: "bg-white dark:bg-dark-surface-800 dark:border-dark-surface-700",
             primary: "bg-white bg-primary-500 border-primary-400",
             secondary: "bg-white bg-secondary-500 border-secondary-400",
             gray: "bg-gray-500 border-gray-400",
@@ -74,7 +77,7 @@ export const tablebodyrow = tv({
         {
             hoverable: true,
             color: "default",
-            class: "hover:bg-gray-50 dark:hover:bg-gray-600"
+            class: "hover:bg-light-surface-50 dark:hover:bg-dark-surface-600"
         },
         {
             hoverable: true,
@@ -89,7 +92,7 @@ export const tablebodyrow = tv({
         {
             hoverable: true,
             color: "gray",
-            class: "hover:bg-gray-400 dark:hover:bg-gray-400"
+            class: "hover:bg-light-surface-400 dark:hover:bg-gray-400"
         },
         {
             hoverable: true,
@@ -179,7 +182,7 @@ export const tablebodyrow = tv({
         {
             striped: true,
             color: "default",
-            class: "odd:bg-white even:bg-gray-50 dark:odd:bg-gray-800 dark:even:bg-gray-700"
+            class: "odd:bg-white even:bg-light-surface-50 dark:odd:bg-dark-surface-800 dark:even:bg-dark-surface-700"
         },
         {
             striped: true,
@@ -289,10 +292,10 @@ export const tablehead = tv({
     variants: {
         color: {
             // default, primary, secondary, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose
-            default: "text-gray-700 dark:text-gray-400 bg-gray-50 dark:bg-gray-700",
+            default: "text-light-surface-700 dark:text-dark-surface-400 bg-light-surface-50 dark:bg-dark-surface-700",
             primary: "text-white dark:text-white bg-primary-700 dark:bg-primary-700",
             secondary: "text-white dark:text-white bg-secondary-700 dark:bg-secondary-700",
-            gray: "text-white dark:text-white bg-gray-700 dark:bg-gray-700",
+            gray: "text-white dark:text-white bg-light-surface-700 dark:bg-gray-700",
             red: "text-white dark:text-white bg-red-700 dark:bg-red-700",
             orange: "text-white dark:text-white bg-orange-700 dark:bg-orange-700",
             amber: "text-white dark:text-white bg-amber-700 dark:bg-amber-700",
@@ -329,7 +332,7 @@ export const tablehead = tv({
         {
             color: "default",
             striped: true,
-            class: "bg-transparent dark:bg-transparent border-gray-700"
+            class: "bg-transparent dark:bg-transparent border-light-surface-700"
         },
         {
             striped: true,

package/dist/table/type.d.ts

@@ -31,6 +31,7 @@ interface TableProps extends HTMLTableAttributes {
     hoverable?: boolean;
     noborder?: boolean;
     shadow?: boolean;
+    rounded?: boolean;
     color?: TableColrType;
     tableItems?: TableItemType[];
 }

package/package.json

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