odj-svelte-ui 0.2.6 → 0.4.0

package/dist/_legacy/utils/Frame.svelte.d.ts

@@ -36,7 +36,7 @@ type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
  */
 declare const Frame: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<HTMLAnchorAttributes & {
     tag?: string;
-    color?: "primary" | "red" | "orange" | "yellow" | "green" | "blue" | "indigo" | "purple" | "pink" | "dark" | "default" | "none" | "form" | "light" | "neutral" | "dropdown" | "navbar" | "navbarUl";
+    color?: "none" | "primary" | "red" | "orange" | "yellow" | "green" | "blue" | "indigo" | "purple" | "pink" | "dark" | "default" | "form" | "light" | "neutral" | "dropdown" | "navbar" | "navbarUl";
     rounded?: boolean;
     border?: boolean;
     shadow?: boolean;
@@ -50,7 +50,7 @@ declare const Frame: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWith
 }, {
     default: {};
 }>, {
-    click: MouseEvent;
+    click: PointerEvent;
     mouseenter: MouseEvent;
     mouseleave: MouseEvent;
     focusin: FocusEvent;

package/dist/_legacy/utils/Popper.svelte.d.ts

@@ -33,7 +33,7 @@ type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
  */
 declare const Popper: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<import("svelte/elements").HTMLAnchorAttributes & {
     tag?: string;
-    color?: "primary" | "red" | "orange" | "yellow" | "green" | "blue" | "indigo" | "purple" | "pink" | "dark" | "default" | "none" | "form" | "light" | "neutral" | "dropdown" | "navbar" | "navbarUl";
+    color?: "none" | "primary" | "red" | "orange" | "yellow" | "green" | "blue" | "indigo" | "purple" | "pink" | "dark" | "default" | "form" | "light" | "neutral" | "dropdown" | "navbar" | "navbarUl";
     rounded?: boolean;
     border?: boolean;
     shadow?: boolean;

package/dist/_legacy/utils/createEventDispatcher.d.ts

@@ -1 +1 @@
-export default function createEventDispatcher(): ((type: string, target: Element, detail: any) => void) | undefined;
+export default function createEventDispatcher(): (type: string, target: Element, detail: any) => void;

package/dist/accordion/Accordion.svelte

@@ -2,10 +2,10 @@
   import { setContext } from "svelte";
   import { type AccordionProps as Props, accordion } from "./";
 
-  let { children, flush, activeClass, inactiveClass, isSingle = true, class: className, ...restProps }: Props = $props();
+  let { children, accordionStyle = "none", activeClass, inactiveClass, isSingle = true, class: className, ...restProps }: Props = $props();
 
   const ctx = {
-    flush,
+    accordionStyle,
     activeClass,
     inactiveClass,
     isSingle
@@ -13,7 +13,7 @@
 
   setContext("ctx", ctx);
 
-  const base = $derived(accordion({ flush, className }));
+  const base = $derived(accordion({ accordionStyle, className }));
 </script>
 
 <div {...restProps} class={base}>

package/dist/accordion/AccordionItem.svelte

@@ -25,40 +25,36 @@
 
   const handleToggle = () => selected.set(open ? {} : self);
 
-  const { base, button, content, active, inactive } = accordionitem({ flush: ctx.flush, open });
+  const { base, button, content, active, inactive } = accordionitem({ accordionStyle: ctx.accordionStyle, open });
 
-  let buttonClass = $derived(twMerge(button(), open && !ctx.flush && (activeClass || ctx.activeClass || active()), !open && !ctx.flush && (inactiveClass || ctx.inactiveClass || inactive()), className));
+  let baseClass = $derived(twMerge(base(), open && (activeClass || ctx.activeClass || active()), !open && (inactiveClass || ctx.inactiveClass || inactive()), className));
 </script>
 
-<h2 class={base()}>
-  <button onclick={handleToggle} class={buttonClass} aria-expanded={open}>
-    {#if header}
-      {@render header()}
-      {#if open}
-        {#if !arrowup}
-          <svg class="h-3 w-3 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
+<div class={baseClass}>
+  <h3>
+    <button onclick={handleToggle} class={button()} aria-expanded={open}>
+      {#if header}
+        {@render header()}
+        {#if open && arrowup}
+          {@render arrowup()}
+        {:else if !open && arrowdown}
+          {@render arrowdown()}
+        {:else}
+          <svg class="text-light-surface-800 h-3 w-3 dark:text-white transition-all duration-400" class:rotate-180={!open} aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
             <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5 5 1 1 5" />
           </svg>
-        {:else}
-          {@render arrowup()}
         {/if}
-      {:else if !arrowdown}
-        <svg class="h-3 w-3 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
-          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4" />
-        </svg>
-      {:else}
-        {@render arrowdown()}
       {/if}
-    {/if}
-  </button>
-</h2>
-{#if open}
-  <div transition:transition={params as ParamsType}>
-    <div class={content()}>
-      {@render children()}
+    </button>
+  </h3>
+  {#if open}
+    <div transition:transition={params as ParamsType}>
+      <div class={content()}>
+        {@render children()}
+      </div>
     </div>
-  </div>
-{/if}
+  {/if}
+</div>
 
 <!--
 @component

package/dist/accordion/theme.d.ts

@@ -1,105 +1,143 @@
 export declare const accordion: import("tailwind-variants").TVReturnType<{
-    flush: {
-        true: string;
-        false: string;
-    };
-}, undefined, "w-full text-gray-500 dark:text-gray-400", import("tailwind-variants/dist/config").TVConfig<{
-    flush: {
-        true: string;
-        false: string;
+    accordionStyle: {
+        none: string;
+        outlined: string;
+        card: string;
+        flush: string;
+    };
+}, undefined, "w-full text-light-surface-500 dark:text-dark-surface-400", import("tailwind-variants/dist/config.js").TVConfig<{
+    accordionStyle: {
+        none: string;
+        outlined: string;
+        card: string;
+        flush: string;
     };
 }, {
-    flush: {
-        true: string;
-        false: string;
+    accordionStyle: {
+        none: string;
+        outlined: string;
+        card: string;
+        flush: string;
     };
 }>, {
-    flush: {
-        true: string;
-        false: string;
+    accordionStyle: {
+        none: string;
+        outlined: string;
+        card: string;
+        flush: string;
     };
 }, undefined, import("tailwind-variants").TVReturnType<{
-    flush: {
-        true: string;
-        false: string;
-    };
-}, undefined, "w-full text-gray-500 dark:text-gray-400", import("tailwind-variants/dist/config").TVConfig<{
-    flush: {
-        true: string;
-        false: string;
+    accordionStyle: {
+        none: string;
+        outlined: string;
+        card: string;
+        flush: string;
+    };
+}, undefined, "w-full text-light-surface-500 dark:text-dark-surface-400", import("tailwind-variants/dist/config.js").TVConfig<{
+    accordionStyle: {
+        none: string;
+        outlined: string;
+        card: string;
+        flush: string;
     };
 }, {
-    flush: {
-        true: string;
-        false: string;
+    accordionStyle: {
+        none: string;
+        outlined: string;
+        card: string;
+        flush: string;
     };
 }>, unknown, unknown, undefined>>;
 export declare const accordionitem: import("tailwind-variants").TVReturnType<{
-    flush: {
-        true: {
-            button: string;
-            content: string;
+    accordionStyle: {
+        none: {
+            base: string;
+            active: string;
+            inactive: string;
+        };
+        outlined: {
+            base: string;
         };
-        false: {
+        card: {
+            base: string;
+            active: string;
+            inactive: string;
+        };
+        flush: {
+            base: string;
             button: string;
             content: string;
         };
     };
-    open: {
-        true: {};
-        false: {};
-    };
 }, {
     base: string;
     button: string;
     content: string;
     active: string;
     inactive: string;
-}, undefined, import("tailwind-variants/dist/config").TVConfig<{
-    flush: {
-        true: {
-            button: string;
-            content: string;
+}, undefined, import("tailwind-variants/dist/config.js").TVConfig<{
+    accordionStyle: {
+        none: {
+            base: string;
+            active: string;
+            inactive: string;
+        };
+        outlined: {
+            base: string;
         };
-        false: {
+        card: {
+            base: string;
+            active: string;
+            inactive: string;
+        };
+        flush: {
+            base: string;
             button: string;
             content: string;
         };
     };
-    open: {
-        true: {};
-        false: {};
-    };
 }, {
-    flush: {
-        true: {
-            button: string;
-            content: string;
+    accordionStyle: {
+        none: {
+            base: string;
+            active: string;
+            inactive: string;
+        };
+        outlined: {
+            base: string;
         };
-        false: {
+        card: {
+            base: string;
+            active: string;
+            inactive: string;
+        };
+        flush: {
+            base: string;
             button: string;
             content: string;
         };
     };
-    open: {
-        true: {};
-        false: {};
-    };
 }>, {
-    flush: {
-        true: {
-            button: string;
-            content: string;
+    accordionStyle: {
+        none: {
+            base: string;
+            active: string;
+            inactive: string;
         };
-        false: {
+        outlined: {
+            base: string;
+        };
+        card: {
+            base: string;
+            active: string;
+            inactive: string;
+        };
+        flush: {
+            base: string;
             button: string;
             content: string;
         };
     };
-    open: {
-        true: {};
-        false: {};
-    };
 }, {
     base: string;
     button: string;
@@ -107,54 +145,72 @@ export declare const accordionitem: import("tailwind-variants").TVReturnType<{
     active: string;
     inactive: string;
 }, import("tailwind-variants").TVReturnType<{
-    flush: {
-        true: {
-            button: string;
-            content: string;
+    accordionStyle: {
+        none: {
+            base: string;
+            active: string;
+            inactive: string;
         };
-        false: {
+        outlined: {
+            base: string;
+        };
+        card: {
+            base: string;
+            active: string;
+            inactive: string;
+        };
+        flush: {
+            base: string;
             button: string;
             content: string;
         };
     };
-    open: {
-        true: {};
-        false: {};
-    };
 }, {
     base: string;
     button: string;
     content: string;
     active: string;
     inactive: string;
-}, undefined, import("tailwind-variants/dist/config").TVConfig<{
-    flush: {
-        true: {
-            button: string;
-            content: string;
+}, undefined, import("tailwind-variants/dist/config.js").TVConfig<{
+    accordionStyle: {
+        none: {
+            base: string;
+            active: string;
+            inactive: string;
+        };
+        outlined: {
+            base: string;
+        };
+        card: {
+            base: string;
+            active: string;
+            inactive: string;
         };
-        false: {
+        flush: {
+            base: string;
             button: string;
             content: string;
         };
     };
-    open: {
-        true: {};
-        false: {};
-    };
 }, {
-    flush: {
-        true: {
-            button: string;
-            content: string;
+    accordionStyle: {
+        none: {
+            base: string;
+            active: string;
+            inactive: string;
+        };
+        outlined: {
+            base: string;
         };
-        false: {
+        card: {
+            base: string;
+            active: string;
+            inactive: string;
+        };
+        flush: {
+            base: string;
             button: string;
             content: string;
         };
     };
-    open: {
-        true: {};
-        false: {};
-    };
 }>, unknown, unknown, undefined>>;

package/dist/accordion/theme.js

@@ -1,55 +1,47 @@
 import { tv } from "tailwind-variants";
 export const accordion = tv({
-    base: "w-full text-gray-500 dark:text-gray-400",
+    base: "w-full text-light-surface-500 dark:text-dark-surface-400",
     variants: {
-        flush: {
-            true: "",
-            false: "border border-gray-200 dark:border-gray-700 rounded-t-xl"
+        accordionStyle: {
+            none: "space-y-2",
+            outlined: "space-y-2",
+            card: "space-y-2",
+            flush: "group"
         }
     }
 });
 export const accordionitem = tv({
     slots: {
-        base: "group",
-        button: "flex items-center justify-between w-full font-medium text-left group-first:rounded-t-xl border-gray-200 dark:border-gray-700 border-b",
-        content: "border-b border-gray-200 dark:border-gray-700",
-        active: "bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800",
-        inactive: "text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800"
+        base: "border-light-surface-300 dark:border-dark-surface-800",
+        button: "w-full flex items-center flex-row justify-between font-medium text-left px-4 py-3 outline-none rounded-lg focus-visible:ring-4 focus-visible:ring-dark-surface-400 focus-visible:dark:ring-dark-surface-600",
+        content: "text-light-surface-700 dark:text-dark-surface-300 px-4 pb-3",
+        active: "text-light-surface-900 dark:text-white",
+        inactive: "text-light-surface-800 dark:text-dark-surface-200"
     },
     variants: {
-        flush: {
-            true: {
-                button: "py-5",
-                content: "py-5"
+        accordionStyle: {
+            none: {
+                base: "rounded-lg border-1",
+                active: "bg-light-surface-100 dark:bg-dark-surface-800",
+                inactive: "hover:bg-light-surface-50 dark:hover:bg-dark-surface-800"
             },
-            false: {
-                button: "p-5 border-s border-e group-first:border-t",
-                content: "p-5 border-s border-e"
+            outlined: {
+                base: "rounded-lg border-1"
+            },
+            card: {
+                base: "rounded-lg border-1 drop-shadow-sm",
+                active: "bg-light-surface-100 dark:bg-dark-surface-900",
+                inactive: "bg-light-surface-100 dark:bg-dark-surface-900"
+            },
+            flush: {
+                base: "first:border-0 border-t py-0",
+                button: "px-0",
+                content: "px-0"
             }
-        },
-        open: {
-            true: {},
-            false: {}
         }
     },
-    compoundVariants: [
-        {
-            flush: true,
-            open: true,
-            class: {
-                button: "text-gray-900 dark:text-white"
-            }
-        },
-        {
-            flush: true,
-            open: false,
-            class: {
-                button: "text-gray-500 dark:text-gray-400"
-            }
-        }
-    ],
     defaultVariants: {
-        flush: false,
+        accordionStyle: "none",
         open: false
     }
 });

package/dist/accordion/type.d.ts

@@ -3,7 +3,7 @@ import type { Snippet } from "svelte";
 import type { ParamsType, TransitionFunc } from "../types";
 import type { HTMLAttributes } from "svelte/elements";
 interface AccordionCtxType {
-    flush: boolean;
+    accordionStyle: 'none' | 'outlined' | 'card' | 'flush';
     activeClass: string | undefined | null;
     inactiveClass: string | undefined | null;
     selected?: Writable<object>;
@@ -13,7 +13,7 @@ interface AccordionCtxType {
 }
 interface AccordionProps extends HTMLAttributes<HTMLDivElement> {
     children: Snippet;
-    flush?: boolean;
+    accordionStyle?: 'none' | 'outlined' | 'card' | 'flush';
     isSingle?: boolean;
     activeClass?: string;
     inactiveClass?: string;

package/dist/alert/theme.d.ts

@@ -33,7 +33,7 @@ declare const alert: import("tailwind-variants").TVReturnType<{
     dismissable: {
         true: string;
     };
-}, undefined, "p-4 gap-3 text-sm", import("tailwind-variants/dist/config").TVConfig<{
+}, undefined, "p-4 gap-3 text-sm", import("tailwind-variants/dist/config.js").TVConfig<{
     color: {
         primary: string;
         secondary: string;
@@ -173,7 +173,7 @@ declare const alert: import("tailwind-variants").TVReturnType<{
     dismissable: {
         true: string;
     };
-}, undefined, "p-4 gap-3 text-sm", import("tailwind-variants/dist/config").TVConfig<{
+}, undefined, "p-4 gap-3 text-sm", import("tailwind-variants/dist/config.js").TVConfig<{
     color: {
         primary: string;
         secondary: string;

package/dist/avatar/theme.d.ts

@@ -18,7 +18,7 @@ declare const avatar: import("tailwind-variants").TVReturnType<{
         lg: string;
         xl: string;
     };
-}, undefined, "relative flex items-center justify-center box-content bg-light-surface-100 dark:bg-dark-surface-600 text-light-surface-600 dark:text-dark-surface-300", import("tailwind-variants/dist/config").TVConfig<{
+}, undefined, "relative flex items-center justify-center box-content bg-light-surface-100 dark:bg-dark-surface-600 text-light-surface-600 dark:text-dark-surface-300", import("tailwind-variants/dist/config.js").TVConfig<{
     cornerStyle: {
         rounded: string;
         circular: string;
@@ -98,7 +98,7 @@ declare const avatar: import("tailwind-variants").TVReturnType<{
         lg: string;
         xl: string;
     };
-}, undefined, "relative flex items-center justify-center box-content bg-light-surface-100 dark:bg-dark-surface-600 text-light-surface-600 dark:text-dark-surface-300", import("tailwind-variants/dist/config").TVConfig<{
+}, undefined, "relative flex items-center justify-center box-content bg-light-surface-100 dark:bg-dark-surface-600 text-light-surface-600 dark:text-dark-surface-300", import("tailwind-variants/dist/config.js").TVConfig<{
     cornerStyle: {
         rounded: string;
         circular: string;
@@ -159,7 +159,7 @@ declare const fallback: import("tailwind-variants").TVReturnType<{
         lg: string;
         xl: string;
     };
-}, undefined, "relative flex items-center justify-center box-content bg-light-surface-100 dark:bg-dark-surface-600 text-light-surface-600 dark:text-dark-surface-300 uppercase", import("tailwind-variants/dist/config").TVConfig<{
+}, undefined, "relative flex items-center justify-center box-content bg-light-surface-100 dark:bg-dark-surface-600 text-light-surface-600 dark:text-dark-surface-300 uppercase", import("tailwind-variants/dist/config.js").TVConfig<{
     cornerStyle: {
         rounded: string;
         circular: string;
@@ -239,7 +239,7 @@ declare const fallback: import("tailwind-variants").TVReturnType<{
         lg: string;
         xl: string;
     };
-}, undefined, "relative flex items-center justify-center box-content bg-light-surface-100 dark:bg-dark-surface-600 text-light-surface-600 dark:text-dark-surface-300 uppercase", import("tailwind-variants/dist/config").TVConfig<{
+}, undefined, "relative flex items-center justify-center box-content bg-light-surface-100 dark:bg-dark-surface-600 text-light-surface-600 dark:text-dark-surface-300 uppercase", import("tailwind-variants/dist/config.js").TVConfig<{
     cornerStyle: {
         rounded: string;
         circular: string;

package/dist/badge/theme.d.ts

@@ -75,7 +75,7 @@ declare const badge: import("tailwind-variants").TVReturnType<{
 }, {
     hrefClass: string;
     base: string;
-}, undefined, import("tailwind-variants/dist/config").TVConfig<{
+}, undefined, import("tailwind-variants/dist/config.js").TVConfig<{
     color: {
         primary: {
             base: string;
@@ -377,7 +377,7 @@ declare const badge: import("tailwind-variants").TVReturnType<{
 }, {
     hrefClass: string;
     base: string;
-}, undefined, import("tailwind-variants/dist/config").TVConfig<{
+}, undefined, import("tailwind-variants/dist/config.js").TVConfig<{
     color: {
         primary: {
             base: string;

package/dist/banner/theme.d.ts

@@ -103,7 +103,7 @@ declare const banner: import("tailwind-variants").TVReturnType<{
 }, {
     base: string;
     insideDiv: string;
-}, undefined, import("tailwind-variants/dist/config").TVConfig<{
+}, undefined, import("tailwind-variants/dist/config.js").TVConfig<{
     position: {
         static: {
             base: string;
@@ -517,7 +517,7 @@ declare const banner: import("tailwind-variants").TVReturnType<{
 }, {
     base: string;
     insideDiv: string;
-}, undefined, import("tailwind-variants/dist/config").TVConfig<{
+}, undefined, import("tailwind-variants/dist/config.js").TVConfig<{
     position: {
         static: {
             base: string;