odj-svelte-ui 0.1.1 → 0.2.1

package/dist/_legacy/typography/Mark.svelte.d.ts

@@ -21,7 +21,7 @@ type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
  * ## Props
  * @prop export let color: string = 'text-white dark:bg-blue-500';
  * @prop export let bgColor: string = 'bg-blue-600';
- * @prop export let markClass: string = 'px-2 rounded';
+ * @prop export let markClass: string = 'px-2 rounded-sm';
  */
 declare const Mark: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
     [x: string]: any;

package/dist/_legacy/typography/Span.svelte

@@ -9,7 +9,7 @@
   export let highlight: boolean = false;
   export let highlightClass: string = 'text-blue-600 dark:text-blue-500';
   export let decorationClass: string = 'decoration-2 decoration-blue-400 dark:decoration-blue-600';
-  export let gradientClass: string = 'text-transparent bg-clip-text bg-gradient-to-r to-emerald-600 from-sky-400';
+  export let gradientClass: string = 'text-transparent bg-clip-text bg-linear-to-r to-emerald-600 from-sky-400';
 
   let underlineClass = twMerge('underline', decorationClass);
   let classSpan: string = twMerge(italic && 'italic', underline && underlineClass, linethrough && 'line-through', uppercase && 'uppercase', gradient ? gradientClass : 'font-semibold text-neutral-900 dark:text-white', highlight && highlightClass, $$props.class);
@@ -31,5 +31,5 @@
 @prop export let highlight: boolean = false;
 @prop export let highlightClass: string = 'text-blue-600 dark:text-blue-500';
 @prop export let decorationClass: string = 'decoration-2 decoration-blue-400 dark:decoration-blue-600';
-@prop export let gradientClass: string = 'text-transparent bg-clip-text bg-gradient-to-r to-emerald-600 from-sky-400';
+@prop export let gradientClass: string = 'text-transparent bg-clip-text bg-linear-to-r to-emerald-600 from-sky-400';
 -->

package/dist/_legacy/typography/Span.svelte.d.ts

@@ -27,7 +27,7 @@ type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
  * @prop export let highlight: boolean = false;
  * @prop export let highlightClass: string = 'text-blue-600 dark:text-blue-500';
  * @prop export let decorationClass: string = 'decoration-2 decoration-blue-400 dark:decoration-blue-600';
- * @prop export let gradientClass: string = 'text-transparent bg-clip-text bg-gradient-to-r to-emerald-600 from-sky-400';
+ * @prop export let gradientClass: string = 'text-transparent bg-clip-text bg-linear-to-r to-emerald-600 from-sky-400';
  */
 declare const Span: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
     [x: string]: any;

package/dist/_legacy/utils/backdrop.js

@@ -1,6 +1,6 @@
 import { createEventDispatcher } from 'svelte';
 export let open = false;
-const backdropClasses = 'bg-neutral-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-40';
+const backdropClasses = 'bg-neutral-900/50 dark:bg-neutral-900/80 fixed inset-0 z-40';
 export let placement;
 // const placement:
 // 		| 'top-left'

package/dist/accordion/theme.js

@@ -14,7 +14,7 @@ export const accordionitem = tv({
         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 hover:dark:bg-gray-800"
+        inactive: "text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800"
     },
     variants: {
         flush: {

package/dist/alert/Alert.svelte

@@ -37,7 +37,7 @@
       {#if closeIcon}
         <button
           type="button"
-          class="m-0.5 -me-1.5 ms-1.5 whitespace-normal rounded p-0.5 text-primary-500 hover:bg-primary-200 focus:outline-none focus:ring-1 focus:ring-primary-400 dark:hover:bg-primary-800 dark:hover:text-primary-300"
+          class="m-0.5 -me-1.5 ms-1.5 whitespace-normal rounded-sm p-0.5 text-primary-500 hover:bg-primary-200 focus:outline-hidden focus:ring-1 focus:ring-primary-400 dark:hover:bg-primary-800 dark:hover:text-primary-300"
           aria-label="Remove badge"
           onclick={() => {
             alertStatus = false;
@@ -73,7 +73,7 @@
 @props:alertStatus: any = $bindable(true);
 @props:closeIcon: any;
 @props:color: any = "primary";
-@props:rounded: any = true;
+@-props:rounded-sm: any = true;
 @props:border: any;
 @props:class: string;
 @props:dismissable: any;

package/dist/alert/Alert.svelte.d.ts

@@ -7,7 +7,7 @@ import { type AlertProps as Props } from ".";
  * @props:alertStatus: any = $bindable(true);
  * @props:closeIcon: any;
  * @props:color: any = "primary";
- * @props:rounded: any = true;
+ * @-props:rounded-sm: any = true;
  * @props:border: any;
  * @props:class: string;
  * @props:dismissable: any;

package/dist/avatar/Avatar.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
   import { Indicator } from "..";
-  import { type AvatarProps as Props, avatar } from ".";
+  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, ...restProps }: Props = $props();
+  let { children, src, href, target, cornerStyle = "circular", border = false, stacked = false, dot, class: className, alt, size = "md", onclick, fallback, fallbackClass: fallbackClassName, ...restProps }: Props = $props();
 
-  dot = dot && { placement: "top-right", color: "gray", size: "lg", ...dot };
+  dot = dot && { placement: "top-right", color: "red", size: "lg", ...dot };
 
   let avatarClass = $derived(
     avatar({
@@ -15,16 +16,47 @@
       className
     })
   );
+  let fallbackClass = $derived(
+    fallbackTheme({
+      cornerStyle,
+      border,
+      stacked,
+      size,
+      className: fallbackClassName
+    })
+  );
+
+  let imageState: "loading" | "loaded" | "error" = $state("loading");
+  onMount(() => {
+    const img = new Image();
+    if (!src) return;
+
+    img.src = src;
+    imageState = "loading";
+
+    img.onload = () => {
+      imageState = "loaded";
+    };
+    img.onerror = () => {
+      imageState = "error";
+    };
+  });
 </script>
 
 {#if !src || !!href || children || dot}
   <svelte:element this={href ? "a" : "div"} role={href ? undefined : "button"} {onclick} {href} {target} {...restProps} class={avatarClass}>
     {#if src}
-      <img {alt} {src} class={cornerStyle === "circular" ? "rounded-full" : "rounded"} />
+      {#if fallback && imageState !== "loaded"}
+        <div class={fallbackClass}>
+          {@render fallback()}
+        </div>
+      {:else}
+        <img {alt} {src} class={cornerStyle === "circular" ? "rounded-full" : "rounded-sm"} />
+      {/if}
     {:else if children}
       {@render children()}
     {:else}
-      <svg class="h-full w-full {cornerStyle === 'circular' ? 'rounded-full' : 'rounded'}" fill="currentColor" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+      <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">
         <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}
@@ -32,6 +64,10 @@
       <Indicator border offset={cornerStyle === "circular" ? true : false} {...dot} />
     {/if}
   </svelte:element>
+{:else if fallback && imageState !== "loaded"}
+  <div class={fallbackClass}>
+    {@render fallback()}
+  </div>
 {:else}
   <img {alt} {src} {...restProps} class={avatarClass} />
 {/if}
@@ -40,7 +76,8 @@
 @component
 [Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
 ## Props
-@props: children: any;
+@props:children: any;
+@props:fallback: any;
 @props:src: any;
 @props:href: any;
 @props:target: any;
@@ -49,6 +86,7 @@
 @props:stacked: any = false;
 @props:dot: any;
 @props:class: string;
+@props:fallbackClass: string;
 @props:alt: any;
 @props:size: any = "md";
 @props:onclick: any;

package/dist/avatar/Avatar.svelte.d.ts

@@ -2,7 +2,8 @@ import { type AvatarProps as Props } from ".";
 /**
  * [Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
  * ## Props
- * @props: children: any;
+ * @props:children: any;
+ * @props:fallback: any;
  * @props:src: any;
  * @props:href: any;
  * @props:target: any;
@@ -11,6 +12,7 @@ import { type AvatarProps as Props } from ".";
  * @props:stacked: any = false;
  * @props:dot: any;
  * @props:class: string;
+ * @props:fallbackClass: string;
  * @props:alt: any;
  * @props:size: any = "md";
  * @props:onclick: any;

package/dist/avatar/index.d.ts

@@ -1,4 +1,4 @@
 import type { AvatarProps } from "./type";
 import Avatar from "./Avatar.svelte";
-import { avatar } from "./theme";
-export { Avatar, avatar, type AvatarProps };
+import { avatar, fallback } from "./theme";
+export { Avatar, avatar, fallback, type AvatarProps };

package/dist/avatar/index.js

@@ -1,3 +1,3 @@
 import Avatar from "./Avatar.svelte";
-import { avatar } from "./theme";
-export { Avatar, avatar };
+import { avatar, fallback } from "./theme";
+export { Avatar, avatar, fallback };

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 bg-gray-100 dark:bg-gray-600 text-gray-600 dark:text-gray-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").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 bg-gray-100 dark:bg-gray-600 text-gray-600 dark:text-gray-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").TVConfig<{
     cornerStyle: {
         rounded: string;
         circular: string;
@@ -139,4 +139,145 @@ declare const avatar: import("tailwind-variants").TVReturnType<{
         xl: string;
     };
 }>, unknown, unknown, undefined>>;
-export { avatar };
+declare const fallback: import("tailwind-variants").TVReturnType<{
+    cornerStyle: {
+        rounded: string;
+        circular: string;
+    };
+    border: {
+        true: string;
+        false: string;
+    };
+    stacked: {
+        true: string;
+        false: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        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<{
+    cornerStyle: {
+        rounded: string;
+        circular: string;
+    };
+    border: {
+        true: string;
+        false: string;
+    };
+    stacked: {
+        true: string;
+        false: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+}, {
+    cornerStyle: {
+        rounded: string;
+        circular: string;
+    };
+    border: {
+        true: string;
+        false: string;
+    };
+    stacked: {
+        true: string;
+        false: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+}>, {
+    cornerStyle: {
+        rounded: string;
+        circular: string;
+    };
+    border: {
+        true: string;
+        false: string;
+    };
+    stacked: {
+        true: string;
+        false: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    cornerStyle: {
+        rounded: string;
+        circular: string;
+    };
+    border: {
+        true: string;
+        false: string;
+    };
+    stacked: {
+        true: string;
+        false: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        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<{
+    cornerStyle: {
+        rounded: string;
+        circular: string;
+    };
+    border: {
+        true: string;
+        false: string;
+    };
+    stacked: {
+        true: string;
+        false: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+}, {
+    cornerStyle: {
+        rounded: string;
+        circular: string;
+    };
+    border: {
+        true: string;
+        false: string;
+    };
+    stacked: {
+        true: string;
+        false: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+}>, unknown, unknown, undefined>>;
+export { avatar, fallback };

package/dist/avatar/theme.js

@@ -1,17 +1,17 @@
 import { tv } from "tailwind-variants";
 const avatar = tv({
-    base: "relative flex items-center justify-center bg-gray-100 dark:bg-gray-600 text-gray-600 dark:text-gray-300",
+    base: "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",
     variants: {
         cornerStyle: {
-            rounded: "rounded",
+            rounded: "rounded-sm",
             circular: "rounded-full"
         },
         border: {
-            true: "p-1 ring-2 ring-gray-300 dark:ring-gray-500",
+            true: "border-2 border-light-surface-300 dark:border-dark-surface-500",
             false: ""
         },
         stacked: {
-            true: "border-2 -ms-4 border-white dark:border-gray-800",
+            true: "border-2 -ms-4 border-white dark:border-dark-surface-800",
             false: ""
         },
         size: {
@@ -29,4 +29,34 @@ const avatar = tv({
         size: "md"
     }
 });
-export { avatar };
+const fallback = tv({
+    base: "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",
+    variants: {
+        cornerStyle: {
+            rounded: "rounded-sm",
+            circular: "rounded-full"
+        },
+        border: {
+            true: "border-2 border-light-surface-300 dark:border-dark-surface-500",
+            false: ""
+        },
+        stacked: {
+            true: "border-2 -ms-4 border-white dark:border-dark-surface-800",
+            false: ""
+        },
+        size: {
+            xs: "w-6 h-6",
+            sm: "w-8 h-8",
+            md: "w-10 h-10",
+            lg: "w-20 h-20",
+            xl: "w-36 h-36"
+        }
+    },
+    defaultVariants: {
+        cornerStyle: "circular",
+        border: false,
+        stacked: false,
+        size: "md"
+    }
+});
+export { avatar, fallback };

package/dist/avatar/type.d.ts

@@ -12,5 +12,7 @@ interface AvatarProps extends HTMLAttributes<HTMLDivElement> {
     size?: "xs" | "sm" | "md" | "lg" | "xl";
     onclick?: () => void;
     border?: boolean;
+    fallback?: Snippet;
+    fallbackClass?: string;
 }
 export { type AvatarProps };

package/dist/badge/Badge.svelte

@@ -24,7 +24,7 @@
       {#if icon}
         <button
           type="button"
-          class="m-0.5 -me-1.5 ms-1.5 whitespace-normal rounded p-0.5 text-primary-500 hover:bg-primary-200 focus:outline-none focus:ring-1 focus:ring-primary-400 dark:hover:bg-primary-800 dark:hover:text-primary-300"
+          class="m-0.5 -me-1.5 ms-1.5 whitespace-normal rounded-sm p-0.5 text-primary-500 hover:bg-primary-200 focus:outline-hidden focus:ring-1 focus:ring-primary-400 dark:hover:bg-primary-800 dark:hover:text-primary-300"
           aria-label="Remove badge"
           onclick={() => {
             badgeStatus = false;
@@ -64,7 +64,7 @@
 @props:border: any;
 @props:href: any;
 @props:target: any;
-@props:rounded: any;
+@-props:rounded-sm: any;
 @props:transition: any = fade;
 @props:params: any;
 @props:aClass: any;

package/dist/badge/Badge.svelte.d.ts

@@ -12,7 +12,7 @@ import { type BadgeProps as Props } from "./index";
  * @props:border: any;
  * @props:href: any;
  * @props:target: any;
- * @props:rounded: any;
+ * @-props:rounded-sm: any;
  * @props:transition: any = fade;
  * @props:params: any;
  * @props:aClass: any;

package/dist/badge/theme.js

@@ -37,7 +37,7 @@ const badge = tv({
         },
         rounded: {
             true: "rounded-full",
-            false: "rounded"
+            false: "rounded-sm"
         }
     },
     compoundVariants: [

package/dist/banner/theme.js

@@ -24,16 +24,16 @@ const banner = tv({
                 insideDiv: "mx-auto"
             },
             cta: {
-                base: "flex-col md:flex-row w-[calc(100%-2rem)] -translate-x-1/2 rtl:translate-x-1/2 bg-white border border-gray-100 rounded-lg shadow-sm lg:max-w-7xl start-1/2 top-6",
+                base: "flex-col md:flex-row w-[calc(100%-2rem)] -translate-x-1/2 rtl:translate-x-1/2 bg-white border border-gray-100 rounded-lg shadow-xs lg:max-w-7xl start-1/2 top-6",
                 insideDiv: "flex-col items-start mb-3 me-4 md:items-center md:flex-row md:mb-0"
             },
             signup: {
                 base: "top-0 start-0 w-full border-b border-gray-200 bg-gray-50",
-                insideDiv: "flex-shrink-0 w-full mx-auto sm:w-auto"
+                insideDiv: "shrink-0 w-full mx-auto sm:w-auto"
             },
             info: {
                 base: "top-0 start-0 flex-col w-full border-b border-gray-200 md:flex-row bg-gray-50",
-                insideDiv: "flex-shrink-0"
+                insideDiv: "shrink-0"
             }
         },
         color: {

package/dist/bottom-navigation/theme.d.ts

@@ -664,16 +664,16 @@ export declare const bottomNavItem: import("tailwind-variants").TVReturnType<{
 }>, unknown, unknown, undefined>>;
 export declare const bottomnavheader: import("tailwind-variants").TVReturnType<{
     [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            innerDiv?: import("tailwind-merge").ClassNameValue;
-            outerDiv?: import("tailwind-merge").ClassNameValue;
+        [key: string]: import("tailwind-variants").ClassValue | {
+            innerDiv?: import("tailwind-variants").ClassValue;
+            outerDiv?: import("tailwind-variants").ClassValue;
         };
     };
 } | {
     [x: string]: {
-        [x: string]: import("tailwind-merge").ClassNameValue | {
-            innerDiv?: import("tailwind-merge").ClassNameValue;
-            outerDiv?: import("tailwind-merge").ClassNameValue;
+        [x: string]: import("tailwind-variants").ClassValue | {
+            innerDiv?: import("tailwind-variants").ClassValue;
+            outerDiv?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
@@ -681,16 +681,16 @@ export declare const bottomnavheader: import("tailwind-variants").TVReturnType<{
     outerDiv: string;
 }, undefined, import("tailwind-variants/dist/config").TVConfig<unknown, {
     [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            innerDiv?: import("tailwind-merge").ClassNameValue;
-            outerDiv?: import("tailwind-merge").ClassNameValue;
+        [key: string]: import("tailwind-variants").ClassValue | {
+            innerDiv?: import("tailwind-variants").ClassValue;
+            outerDiv?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}>, {
     [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            innerDiv?: import("tailwind-merge").ClassNameValue;
-            outerDiv?: import("tailwind-merge").ClassNameValue;
+        [key: string]: import("tailwind-variants").ClassValue | {
+            innerDiv?: import("tailwind-variants").ClassValue;
+            outerDiv?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
@@ -701,9 +701,9 @@ export declare const bottomnavheader: import("tailwind-variants").TVReturnType<{
     outerDiv: string;
 }, undefined, import("tailwind-variants/dist/config").TVConfig<unknown, {
     [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            innerDiv?: import("tailwind-merge").ClassNameValue;
-            outerDiv?: import("tailwind-merge").ClassNameValue;
+        [key: string]: import("tailwind-variants").ClassValue | {
+            innerDiv?: import("tailwind-variants").ClassValue;
+            outerDiv?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}>, unknown, unknown, undefined>>;

package/dist/buttongroup/theme.d.ts

@@ -4,7 +4,7 @@ declare const buttonGroup: import("tailwind-variants").TVReturnType<{
         md: string;
         lg: string;
     };
-}, undefined, "inline-flex rounded-lg shadow-sm", import("tailwind-variants/dist/config").TVConfig<{
+}, undefined, "inline-flex rounded-lg shadow-xs", import("tailwind-variants/dist/config").TVConfig<{
     size: {
         sm: string;
         md: string;
@@ -28,7 +28,7 @@ declare const buttonGroup: import("tailwind-variants").TVReturnType<{
         md: string;
         lg: string;
     };
-}, undefined, "inline-flex rounded-lg shadow-sm", import("tailwind-variants/dist/config").TVConfig<{
+}, undefined, "inline-flex rounded-lg shadow-xs", import("tailwind-variants/dist/config").TVConfig<{
     size: {
         sm: string;
         md: string;

package/dist/buttongroup/theme.js

@@ -1,6 +1,6 @@
 import { tv } from "tailwind-variants";
 const buttonGroup = tv({
-    base: "inline-flex rounded-lg shadow-sm",
+    base: "inline-flex rounded-lg shadow-xs",
     variants: {
         size: {
             sm: "scale-90",