odj-svelte-ui 0.1.1 → 0.2.1

package/dist/sidebar/theme.js

@@ -1,11 +1,10 @@
 import { tv } from "tailwind-variants";
 export const sidebar = tv({
     slots: {
-        base: "top-0 left-0 z-50 w-64 transition-transform bg-gray-50 dark:bg-gray-800",
-        active: "flex items-center text-base font-normal text-gray-900 bg-gray-200 dark:bg-gray-700 rounded dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700",
-        nonactive: "flex items-center text-base font-normal text-gray-900 rounded dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700",
-        div: "overflow-y-auto h-full px-3 py-4 overflow-y-auto bg-gray-50 dark:bg-gray-800",
-        backdrop: "fixed top-0 start-0 z-40 w-full h-full"
+        base: "top-0 left-0 z-10 min-w-full",
+        div: "overflow-y-auto p-2 rounded-lg 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"
     },
     variants: {
         position: {
@@ -13,44 +12,44 @@ export const sidebar = tv({
             absolute: { base: "absolute" },
             static: { base: "static" }
         },
-        isOpen: {
-            true: "block",
-            false: "hidden"
-        },
         breakpoint: {
-            sm: { base: "sm:block" },
-            md: { base: "md:block" },
-            lg: { base: "lg:block" },
-            xl: { base: "xl:block" },
-            "2xl": { base: "2xl:block" }
-        },
-        backdrop: {
-            true: { backdrop: "bg-gray-900 bg-opacity-75" }
+            none: { base: "min-w-64 h-full", div: "h-full sm:rounded-none" },
+            sm: { base: "sm:min-w-64 sm:h-full", div: "sm:h-full sm:rounded-none" },
+            md: { base: "md:min-w-64 md:h-full", div: "md:h-full md:rounded-none" },
+            lg: { base: "lg:min-w-64 lg:h-full", div: "lg:h-full lg:rounded-none" },
+            xl: { base: "xl:min-w-64 xl:h-full", div: "xl:h-full xl:rounded-none" },
+            "2xl": { base: "2xl:min-w-64 2xl:h-full", div: "2xl:h-full 2xl:rounded-none" }
         }
     }
 });
-export const sidebarbutton = tv({
-    base: "inline-flex items-center p-2 mt-2 ms-3 text-sm text-gray-500 rounded-lg hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600",
+export const sidebargroup = tv({
+    slots: {
+        base: "flex flex-row gap-2"
+    },
     variants: {
         breakpoint: {
-            sm: "sm:hidden",
-            md: "md:hidden",
-            lg: "lg:hidden",
-            xl: "xl:hidden",
-            "2xl": "2xl:hidden"
+            none: { base: "flex-col" },
+            sm: { base: "sm:flex-col" },
+            md: { base: "md:flex-col" },
+            lg: { base: "lg:flex-col" },
+            xl: { base: "xl:flex-col" },
+            "2xl": { base: "2xl:flex-col" }
+        },
+        border: {
+            true: "pt-4 mt-4 border-t border-light-surface-200 dark:border-dark-surface-700"
         }
     }
 });
 export const sidebarcta = tv({
     slots: {
-        base: "p-4 mt-6 bg-primary-50 rounded-lg dark:bg-primary-900",
+        base: "p-4 mt-2 bg-primary-50 rounded-lg dark:bg-primary-900",
         div: "flex items-center mb-3",
-        span: "bg-primary-100 text-primary-800 text-sm font-semibold me-2 px-2.5 py-0.5 rounded dark:bg-primary-200 dark:text-primary-900"
+        span: "bg-primary-100 text-primary-800 text-sm font-semibold me-2 px-2.5 py-0.5 rounded-sm dark:bg-primary-200 dark:text-primary-900"
     }
 });
 export const sitebarbrand = tv({
     slots: {
-        base: "flex items-center ps-2.5 mb-5",
+        base: "flex items-center px-2 my-2",
         img: "h-6 me-3 sm:h-7",
         span: "self-center text-xl font-semibold whitespace-nowrap dark:text-white"
     }
@@ -58,9 +57,9 @@ export const sitebarbrand = tv({
 export const sidebardropdownwrapper = tv({
     slots: {
         base: "",
-        btn: "flex items-center w-full text-base font-normal text-gray-900 rounded transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700",
+        btn: "group w-full 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",
         span: "flex-1 ms-3 text-left whitespace-nowrap",
-        svg: "h-3 w-3 text-gray-800 dark:text-white",
+        svg: "h-3 w-3 text-light-surface-700 dark:text-dark-surface-400 group-hover:text-light-surface-800 dark:group-hover:text-dark-surface-200",
         ul: "py-2 space-y-2"
     }
 });

package/dist/sidebar/type.d.ts

@@ -3,36 +3,26 @@ import type { Snippet } from "svelte";
 import type { HTMLAttributes, HTMLButtonAttributes, HTMLAnchorAttributes } from "svelte/elements";
 import type { TransitionFunc, ParamsType } from "../types";
 type SidebarCtxType = {
-    closeSidebar?: () => void;
     activeClass?: string;
     nonActiveClass?: string;
     isSingle?: boolean;
     selected?: Writable<object>;
     activeUrl?: string;
+    breakpoint?: BreakpointType;
 };
-type BreakpointType = "sm" | "md" | "lg" | "xl" | "2xl" | undefined;
+type BreakpointType = "sm" | "md" | "lg" | "xl" | "2xl" | "none" | undefined;
 type PosisionType = "fixed" | "absolute" | "static" | undefined;
 interface SidebarProps extends HTMLAttributes<HTMLElement> {
     children: Snippet;
-    isOpen?: boolean;
-    closeSidebar?: () => void;
-    activateClickOutside?: boolean;
     isSingle?: boolean;
     breakpoint?: BreakpointType;
     position?: PosisionType;
-    ariaLabel?: string;
     divClass?: string;
+    ariaLabel?: string;
     nonActiveClass?: string;
     activeClass?: string;
-    params?: ParamsType;
-    transition?: TransitionFunc;
-    backdrop?: boolean;
-    backdropClass?: string;
     activeUrl?: string;
 }
-interface SidebarButtonProps extends HTMLButtonAttributes {
-    breakpoint?: BreakpointType;
-}
 interface SidebarCtaProps extends HTMLAttributes<HTMLDivElement> {
     children: Snippet;
     icon?: Snippet;
@@ -69,7 +59,6 @@ interface SidebarDropdownWrapperProps extends HTMLButtonAttributes {
 }
 interface SidebarGroupProps extends HTMLAttributes<HTMLUListElement> {
     children: Snippet;
-    borderClass?: string;
     border?: boolean;
 }
 interface SidebarItemProps extends HTMLAnchorAttributes {
@@ -82,4 +71,4 @@ interface SidebarItemProps extends HTMLAnchorAttributes {
     aClass?: string;
     active?: boolean;
 }
-export type { SidebarProps, SidebarDropdownWrapperProps, SidebarGroupProps, SidebarItemProps, SidebarCtxType, SidebarButtonProps, SidebarCtaProps, SidebarBrandProps, BreakpointType, PosisionType };
+export type { SidebarProps, SidebarDropdownWrapperProps, SidebarGroupProps, SidebarItemProps, SidebarCtxType, SidebarCtaProps, SidebarBrandProps, BreakpointType, PosisionType };

package/dist/skeleton/theme.d.ts

@@ -812,22 +812,22 @@ declare const skeleton: import("tailwind-variants").TVReturnType<{
 }>, unknown, unknown, undefined>>;
 declare const testimonialPlaceholder: import("tailwind-variants").TVReturnType<{
     [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            svg?: import("tailwind-merge").ClassNameValue;
-            wrapper?: import("tailwind-merge").ClassNameValue;
-            line1?: import("tailwind-merge").ClassNameValue;
-            line2?: import("tailwind-merge").ClassNameValue;
-            subContent?: import("tailwind-merge").ClassNameValue;
+        [key: string]: import("tailwind-variants").ClassValue | {
+            svg?: import("tailwind-variants").ClassValue;
+            wrapper?: import("tailwind-variants").ClassValue;
+            line1?: import("tailwind-variants").ClassValue;
+            line2?: import("tailwind-variants").ClassValue;
+            subContent?: import("tailwind-variants").ClassValue;
         };
     };
 } | {
     [x: string]: {
-        [x: string]: import("tailwind-merge").ClassNameValue | {
-            svg?: import("tailwind-merge").ClassNameValue;
-            wrapper?: import("tailwind-merge").ClassNameValue;
-            line1?: import("tailwind-merge").ClassNameValue;
-            line2?: import("tailwind-merge").ClassNameValue;
-            subContent?: import("tailwind-merge").ClassNameValue;
+        [x: string]: import("tailwind-variants").ClassValue | {
+            svg?: import("tailwind-variants").ClassValue;
+            wrapper?: import("tailwind-variants").ClassValue;
+            line1?: import("tailwind-variants").ClassValue;
+            line2?: import("tailwind-variants").ClassValue;
+            subContent?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
@@ -838,22 +838,22 @@ declare const testimonialPlaceholder: import("tailwind-variants").TVReturnType<{
     subContent: string;
 }, undefined, import("tailwind-variants/dist/config").TVConfig<unknown, {
     [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            svg?: import("tailwind-merge").ClassNameValue;
-            wrapper?: import("tailwind-merge").ClassNameValue;
-            line1?: import("tailwind-merge").ClassNameValue;
-            line2?: import("tailwind-merge").ClassNameValue;
-            subContent?: import("tailwind-merge").ClassNameValue;
+        [key: string]: import("tailwind-variants").ClassValue | {
+            svg?: import("tailwind-variants").ClassValue;
+            wrapper?: import("tailwind-variants").ClassValue;
+            line1?: import("tailwind-variants").ClassValue;
+            line2?: import("tailwind-variants").ClassValue;
+            subContent?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}>, {
     [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            svg?: import("tailwind-merge").ClassNameValue;
-            wrapper?: import("tailwind-merge").ClassNameValue;
-            line1?: import("tailwind-merge").ClassNameValue;
-            line2?: import("tailwind-merge").ClassNameValue;
-            subContent?: import("tailwind-merge").ClassNameValue;
+        [key: string]: import("tailwind-variants").ClassValue | {
+            svg?: import("tailwind-variants").ClassValue;
+            wrapper?: import("tailwind-variants").ClassValue;
+            line1?: import("tailwind-variants").ClassValue;
+            line2?: import("tailwind-variants").ClassValue;
+            subContent?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
@@ -870,12 +870,12 @@ declare const testimonialPlaceholder: import("tailwind-variants").TVReturnType<{
     subContent: string;
 }, undefined, import("tailwind-variants/dist/config").TVConfig<unknown, {
     [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            svg?: import("tailwind-merge").ClassNameValue;
-            wrapper?: import("tailwind-merge").ClassNameValue;
-            line1?: import("tailwind-merge").ClassNameValue;
-            line2?: import("tailwind-merge").ClassNameValue;
-            subContent?: import("tailwind-merge").ClassNameValue;
+        [key: string]: import("tailwind-variants").ClassValue | {
+            svg?: import("tailwind-variants").ClassValue;
+            wrapper?: import("tailwind-variants").ClassValue;
+            line1?: import("tailwind-variants").ClassValue;
+            line2?: import("tailwind-variants").ClassValue;
+            subContent?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}>, unknown, unknown, undefined>>;
@@ -1080,20 +1080,20 @@ declare const videoPlaceholder: import("tailwind-variants").TVReturnType<{
 }>, unknown, unknown, undefined>>;
 declare const widgetPlaceholder: import("tailwind-variants").TVReturnType<{
     [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            base?: import("tailwind-merge").ClassNameValue;
-            wrapper?: import("tailwind-merge").ClassNameValue;
-            hLine?: import("tailwind-merge").ClassNameValue;
-            vLine?: import("tailwind-merge").ClassNameValue;
+        [key: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            wrapper?: import("tailwind-variants").ClassValue;
+            hLine?: import("tailwind-variants").ClassValue;
+            vLine?: import("tailwind-variants").ClassValue;
         };
     };
 } | {
     [x: string]: {
-        [x: string]: import("tailwind-merge").ClassNameValue | {
-            base?: import("tailwind-merge").ClassNameValue;
-            wrapper?: import("tailwind-merge").ClassNameValue;
-            hLine?: import("tailwind-merge").ClassNameValue;
-            vLine?: import("tailwind-merge").ClassNameValue;
+        [x: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            wrapper?: import("tailwind-variants").ClassValue;
+            hLine?: import("tailwind-variants").ClassValue;
+            vLine?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
@@ -1103,20 +1103,20 @@ declare const widgetPlaceholder: import("tailwind-variants").TVReturnType<{
     vLine: string;
 }, undefined, import("tailwind-variants/dist/config").TVConfig<unknown, {
     [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            base?: import("tailwind-merge").ClassNameValue;
-            wrapper?: import("tailwind-merge").ClassNameValue;
-            hLine?: import("tailwind-merge").ClassNameValue;
-            vLine?: import("tailwind-merge").ClassNameValue;
+        [key: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            wrapper?: import("tailwind-variants").ClassValue;
+            hLine?: import("tailwind-variants").ClassValue;
+            vLine?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}>, {
     [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            base?: import("tailwind-merge").ClassNameValue;
-            wrapper?: import("tailwind-merge").ClassNameValue;
-            hLine?: import("tailwind-merge").ClassNameValue;
-            vLine?: import("tailwind-merge").ClassNameValue;
+        [key: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            wrapper?: import("tailwind-variants").ClassValue;
+            hLine?: import("tailwind-variants").ClassValue;
+            vLine?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
@@ -1131,11 +1131,11 @@ declare const widgetPlaceholder: import("tailwind-variants").TVReturnType<{
     vLine: string;
 }, undefined, import("tailwind-variants/dist/config").TVConfig<unknown, {
     [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            base?: import("tailwind-merge").ClassNameValue;
-            wrapper?: import("tailwind-merge").ClassNameValue;
-            hLine?: import("tailwind-merge").ClassNameValue;
-            vLine?: import("tailwind-merge").ClassNameValue;
+        [key: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            wrapper?: import("tailwind-variants").ClassValue;
+            hLine?: import("tailwind-variants").ClassValue;
+            vLine?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}>, unknown, unknown, undefined>>;

package/dist/skeleton/theme.js

@@ -2,8 +2,8 @@ import { tv } from "tailwind-variants";
 // card placeholder
 const cardPlaceholder = tv({
     slots: {
-        base: "p-4 rounded border border-gray-200 shadow animate-pulse md:p-6 dark:border-gray-700",
-        imageArea: "mb-4 flex h-48 items-center justify-center rounded bg-gray-300 dark:bg-gray-700",
+        base: "p-4 rounded-sm border border-gray-200 shadow-sm animate-pulse md:p-6 dark:border-gray-700",
+        imageArea: "mb-4 flex h-48 items-center justify-center rounded-sm bg-gray-300 dark:bg-gray-700",
         imageIcon: "text-gray-200 dark:text-gray-600",
         line: "rounded-full bg-gray-200 dark:bg-gray-700",
         footerArea: "mt-4 flex items-center space-x-3 rtl:space-x-reverse"
@@ -22,7 +22,7 @@ const cardPlaceholder = tv({
 const imagePlaceholder = tv({
     slots: {
         base: "space-y-8 animate-pulse md:space-y-0 md:space-x-8 rtl:space-x-reverse md:flex md:items-center",
-        image: "flex w-full items-center justify-center rounded bg-gray-300 sm:w-96 dark:bg-gray-700",
+        image: "flex w-full items-center justify-center rounded-sm bg-gray-300 sm:w-96 dark:bg-gray-700",
         svg: "text-gray-200",
         content: "w-full",
         line: "rounded-full bg-gray-200 dark:bg-gray-700"
@@ -48,12 +48,12 @@ const imagePlaceholder = tv({
                 line: "rounded-none"
             },
             sm: {
-                image: "rounded-sm",
-                line: "rounded-sm"
+                image: "rounded-xs",
+                line: "rounded-xs"
             },
             md: {
-                image: "rounded",
-                line: "rounded"
+                image: "rounded-sm",
+                line: "rounded-sm"
             },
             lg: {
                 image: "rounded-lg",
@@ -69,7 +69,7 @@ const imagePlaceholder = tv({
 // ListPlaceholder
 const listPlaceholder = tv({
     slots: {
-        base: "p-4 space-y-4 max-w-md rounded border border-gray-200 divide-y divide-gray-200 shadow animate-pulse dark:divide-gray-700 md:p-6 dark:border-gray-700",
+        base: "p-4 space-y-4 max-w-md rounded-sm border border-gray-200 divide-y divide-gray-200 shadow-sm animate-pulse dark:divide-gray-700 md:p-6 dark:border-gray-700",
         item: "flex items-center justify-between",
         itemContent: "",
         itemTitle: "mb-2.5 h-2.5 w-24 rounded-full bg-gray-300 dark:bg-gray-600",
@@ -94,8 +94,8 @@ const listPlaceholder = tv({
         },
         rounded: {
             none: { base: "rounded-none" },
-            sm: { base: "rounded-sm" },
-            md: { base: "rounded" },
+            sm: { base: "rounded-xs" },
+            md: { base: "rounded-sm" },
             lg: { base: "rounded-lg" },
             full: { base: "rounded-full p-8 md:p-16" }
         }
@@ -171,7 +171,7 @@ const videoPlaceholder = tv({
 // WidgetPlaceholder
 const widgetPlaceholder = tv({
     slots: {
-        base: "p-4 max-w-sm rounded border border-gray-200 shadow animate-pulse md:p-6 dark:border-gray-700",
+        base: "p-4 max-w-sm rounded-sm border border-gray-200 shadow-sm animate-pulse md:p-6 dark:border-gray-700",
         wrapper: "mt-4 flex items-baseline space-x-6 rtl:space-x-reverse",
         hLine: "rounded-full bg-gray-200 dark:bg-gray-700",
         vLine: "w-full rounded-t-lg bg-gray-200 dark:bg-gray-700"

package/dist/table/theme.js

@@ -179,108 +179,108 @@ export const tablebodyrow = tv({
         {
             striped: true,
             color: "default",
-            class: "odd:bg-white even:bg-gray-50 odd:dark:bg-gray-800 even:dark:bg-gray-700"
+            class: "odd:bg-white even:bg-gray-50 dark:odd:bg-gray-800 dark:even:bg-gray-700"
         },
         {
             striped: true,
             color: "primary",
-            class: "odd:bg-primary-500 even:bg-primary-600 odd:dark:bg-primary-500 even:dark:bg-primary-600"
+            class: "odd:bg-primary-500 even:bg-primary-600 dark:odd:bg-primary-500 dark:even:bg-primary-600"
         },
         {
             striped: true,
             color: "secondary",
-            class: "odd:bg-secondary-500 even:bg-secondary-600 odd:dark:bg-secondary-500 even:dark:bg-secondary-600"
+            class: "odd:bg-secondary-500 even:bg-secondary-600 dark:odd:bg-secondary-500 dark:even:bg-secondary-600"
         },
         {
             striped: true,
             color: "gray",
-            class: "odd:bg-gray-500 even:bg-gray-600 odd:dark:bg-gray-500 even:dark:bg-gray-600"
+            class: "odd:bg-gray-500 even:bg-gray-600 dark:odd:bg-gray-500 dark:even:bg-gray-600"
         },
         // default, primary, secondary, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose
         {
             striped: true,
             color: "red",
-            class: "odd:bg-red-500 even:bg-red-600 odd:dark:bg-red-500 even:dark:bg-red-600"
+            class: "odd:bg-red-500 even:bg-red-600 dark:odd:bg-red-500 dark:even:bg-red-600"
         },
         {
             striped: true,
             color: "orange",
-            class: "odd:bg-orange-500 even:bg-orange-600 odd:dark:bg-orange-500 even:dark:bg-orange-600"
+            class: "odd:bg-orange-500 even:bg-orange-600 dark:odd:bg-orange-500 dark:even:bg-orange-600"
         },
         {
             striped: true,
             color: "amber",
-            class: "odd:bg-amber-500 even:bg-amber-600 odd:dark:bg-amber-500 even:dark:bg-amber-600"
+            class: "odd:bg-amber-500 even:bg-amber-600 dark:odd:bg-amber-500 dark:even:bg-amber-600"
         },
         {
             striped: true,
             color: "yellow",
-            class: "odd:bg-yellow-500 even:bg-yellow-600 odd:dark:bg-yellow-500 even:dark:bg-yellow-600"
+            class: "odd:bg-yellow-500 even:bg-yellow-600 dark:odd:bg-yellow-500 dark:even:bg-yellow-600"
         },
         {
             striped: true,
             color: "lime",
-            class: "odd:bg-lime-500 even:bg-lime-600 odd:dark:bg-lime-500 even:dark:bg-lime-600"
+            class: "odd:bg-lime-500 even:bg-lime-600 dark:odd:bg-lime-500 dark:even:bg-lime-600"
         },
         {
             striped: true,
             color: "green",
-            class: "odd:bg-green-500 even:bg-green-600 odd:dark:bg-green-500 even:dark:bg-green-600"
+            class: "odd:bg-green-500 even:bg-green-600 dark:odd:bg-green-500 dark:even:bg-green-600"
         },
         {
             striped: true,
             color: "emerald",
-            class: "odd:bg-emerald-500 even:bg-emerald-600 odd:dark:bg-emerald-500 even:dark:bg-emerald-600"
+            class: "odd:bg-emerald-500 even:bg-emerald-600 dark:odd:bg-emerald-500 dark:even:bg-emerald-600"
         },
         {
             striped: true,
             color: "teal",
-            class: "odd:bg-teal-500 even:bg-teal-600 odd:dark:bg-teal-500 even:dark:bg-teal-600"
+            class: "odd:bg-teal-500 even:bg-teal-600 dark:odd:bg-teal-500 dark:even:bg-teal-600"
         },
         {
             striped: true,
             color: "cyan",
-            class: "odd:bg-cyan-500 even:bg-cyan-600 odd:dark:bg-cyan-500 even:dark:bg-cyan-600"
+            class: "odd:bg-cyan-500 even:bg-cyan-600 dark:odd:bg-cyan-500 dark:even:bg-cyan-600"
         },
         {
             striped: true,
             color: "sky",
-            class: "odd:bg-sky-500 even:bg-sky-600 odd:dark:bg-sky-500 even:dark:bg-sky-600"
+            class: "odd:bg-sky-500 even:bg-sky-600 dark:odd:bg-sky-500 dark:even:bg-sky-600"
         },
         {
             striped: true,
             color: "blue",
-            class: "odd:bg-blue-500 even:bg-blue-600 odd:dark:bg-blue-500 even:dark:bg-blue-600"
+            class: "odd:bg-blue-500 even:bg-blue-600 dark:odd:bg-blue-500 dark:even:bg-blue-600"
         },
         {
             striped: true,
             color: "indigo",
-            class: "odd:bg-indigo-500 even:bg-indigo-600 odd:dark:bg-indigo-500 even:dark:bg-indigo-600"
+            class: "odd:bg-indigo-500 even:bg-indigo-600 dark:odd:bg-indigo-500 dark:even:bg-indigo-600"
         },
         {
             striped: true,
             color: "violet",
-            class: "odd:bg-violet-500 even:bg-violet-600 odd:dark:bg-violet-500 even:dark:bg-violet-600"
+            class: "odd:bg-violet-500 even:bg-violet-600 dark:odd:bg-violet-500 dark:even:bg-violet-600"
         },
         {
             striped: true,
             color: "purple",
-            class: "odd:bg-purple-500 even:bg-purple-600 odd:dark:bg-purple-500 even:dark:bg-purple-600"
+            class: "odd:bg-purple-500 even:bg-purple-600 dark:odd:bg-purple-500 dark:even:bg-purple-600"
         },
         {
             striped: true,
             color: "fuchsia",
-            class: "odd:bg-fuchsia-500 even:bg-fuchsia-600 odd:dark:bg-fuchsia-500 even:dark:bg-fuchsia-600"
+            class: "odd:bg-fuchsia-500 even:bg-fuchsia-600 dark:odd:bg-fuchsia-500 dark:even:bg-fuchsia-600"
         },
         {
             striped: true,
             color: "pink",
-            class: "odd:bg-pink-500 even:bg-pink-600 odd:dark:bg-pink-500 even:dark:bg-pink-600"
+            class: "odd:bg-pink-500 even:bg-pink-600 dark:odd:bg-pink-500 dark:even:bg-pink-600"
         },
         {
             striped: true,
             color: "rose",
-            class: "odd:bg-rose-500 even:bg-rose-600 odd:dark:bg-rose-500 even:dark:bg-rose-600"
+            class: "odd:bg-rose-500 even:bg-rose-600 dark:odd:bg-rose-500 dark:even:bg-rose-600"
         }
     ]
 });

package/dist/tabs/theme.js

@@ -24,7 +24,7 @@ export const tabs = tv({
                 base: "-mb-px relative",
                 active: "text-primary-600 dark:text-primary-500 bg-transparent hover:border-light-surface-300 border-b-2 border-transparent",
                 inactive: "hover:text-light-surface-700 dark:hover:text-dark-surface-300 text-light-surface-500 dark:text-dark-surface-400 bg-transparent hover:border-light-surface-300 border-b-2 border-transparent",
-                slider: "absolute bottom-0 transition-all duration-200 border-b-2 border-primary-600 dark:border-primary-500 !m-0 z-10"
+                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",

package/dist/theme/Theme.svelte

@@ -61,7 +61,6 @@
     review,
     scorerating,
     sidebar,
-    sidebarbutton,
     sidebarcta,
     sitebarbrand,
     sidebardropdownwrapper,
@@ -216,7 +215,6 @@
     review,
     scorerating,
     sidebar,
-    sidebarbutton,
     sidebarcta,
     sitebarbrand,
     sidebardropdownwrapper,

package/dist/theme/Theme.svelte.d.ts

@@ -1,7 +1,8 @@
 import { type Snippet } from "svelte";
-declare const Theme: import("svelte").Component<{
+interface Props {
     children: Snippet;
     theme?: Record<string, any>;
-}, {}, "">;
+}
+declare const Theme: import("svelte").Component<Props, {}, "">;
 type Theme = ReturnType<typeof Theme>;
 export default Theme;