odj-svelte-ui 0.1.0

package/dist/toolbar/theme.d.ts

@@ -0,0 +1,432 @@
+export declare const toolbar: import("tailwind-variants").TVReturnType<{
+    embedded: {
+        true: {};
+        false: {
+            base: string;
+        };
+    };
+    color: {
+        default: {};
+        primary: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+    };
+    separators: {
+        true: {
+            content: string;
+        };
+    };
+}, {
+    base: string;
+    content: string;
+}, undefined, import("tailwind-variants/dist/config").TVConfig<{
+    embedded: {
+        true: {};
+        false: {
+            base: string;
+        };
+    };
+    color: {
+        default: {};
+        primary: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+    };
+    separators: {
+        true: {
+            content: string;
+        };
+    };
+}, {
+    embedded: {
+        true: {};
+        false: {
+            base: string;
+        };
+    };
+    color: {
+        default: {};
+        primary: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+    };
+    separators: {
+        true: {
+            content: string;
+        };
+    };
+}>, {
+    embedded: {
+        true: {};
+        false: {
+            base: string;
+        };
+    };
+    color: {
+        default: {};
+        primary: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+    };
+    separators: {
+        true: {
+            content: string;
+        };
+    };
+}, {
+    base: string;
+    content: string;
+}, import("tailwind-variants").TVReturnType<{
+    embedded: {
+        true: {};
+        false: {
+            base: string;
+        };
+    };
+    color: {
+        default: {};
+        primary: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+    };
+    separators: {
+        true: {
+            content: string;
+        };
+    };
+}, {
+    base: string;
+    content: string;
+}, undefined, import("tailwind-variants/dist/config").TVConfig<{
+    embedded: {
+        true: {};
+        false: {
+            base: string;
+        };
+    };
+    color: {
+        default: {};
+        primary: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+    };
+    separators: {
+        true: {
+            content: string;
+        };
+    };
+}, {
+    embedded: {
+        true: {};
+        false: {
+            base: string;
+        };
+    };
+    color: {
+        default: {};
+        primary: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+    };
+    separators: {
+        true: {
+            content: string;
+        };
+    };
+}>, unknown, unknown, undefined>>;
+export declare const toolbarGroup: import("tailwind-variants").TVReturnType<{
+    spacing: {
+        default: string;
+        tight: string;
+        loose: string;
+    };
+    padding: {
+        default: string;
+        none: string;
+    };
+    position: {
+        middle: string;
+        first: string;
+        last: string;
+    };
+}, undefined, "flex items-center", import("tailwind-variants/dist/config").TVConfig<{
+    spacing: {
+        default: string;
+        tight: string;
+        loose: string;
+    };
+    padding: {
+        default: string;
+        none: string;
+    };
+    position: {
+        middle: string;
+        first: string;
+        last: string;
+    };
+}, {
+    spacing: {
+        default: string;
+        tight: string;
+        loose: string;
+    };
+    padding: {
+        default: string;
+        none: string;
+    };
+    position: {
+        middle: string;
+        first: string;
+        last: string;
+    };
+}>, {
+    spacing: {
+        default: string;
+        tight: string;
+        loose: string;
+    };
+    padding: {
+        default: string;
+        none: string;
+    };
+    position: {
+        middle: string;
+        first: string;
+        last: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    spacing: {
+        default: string;
+        tight: string;
+        loose: string;
+    };
+    padding: {
+        default: string;
+        none: string;
+    };
+    position: {
+        middle: string;
+        first: string;
+        last: string;
+    };
+}, undefined, "flex items-center", import("tailwind-variants/dist/config").TVConfig<{
+    spacing: {
+        default: string;
+        tight: string;
+        loose: string;
+    };
+    padding: {
+        default: string;
+        none: string;
+    };
+    position: {
+        middle: string;
+        first: string;
+        last: string;
+    };
+}, {
+    spacing: {
+        default: string;
+        tight: string;
+        loose: string;
+    };
+    padding: {
+        default: string;
+        none: string;
+    };
+    position: {
+        middle: string;
+        first: string;
+        last: string;
+    };
+}>, unknown, unknown, undefined>>;
+export declare const toolbarButton: import("tailwind-variants").TVReturnType<{
+    color: {
+        dark: string;
+        gray: string;
+        red: string;
+        yellow: string;
+        green: string;
+        indigo: string;
+        purple: string;
+        pink: string;
+        blue: string;
+        primary: string;
+        default: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    background: {
+        true: string;
+        false: string;
+    };
+}, undefined, "focus:outline-none whitespace-normal", import("tailwind-variants/dist/config").TVConfig<{
+    color: {
+        dark: string;
+        gray: string;
+        red: string;
+        yellow: string;
+        green: string;
+        indigo: string;
+        purple: string;
+        pink: string;
+        blue: string;
+        primary: string;
+        default: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    background: {
+        true: string;
+        false: string;
+    };
+}, {
+    color: {
+        dark: string;
+        gray: string;
+        red: string;
+        yellow: string;
+        green: string;
+        indigo: string;
+        purple: string;
+        pink: string;
+        blue: string;
+        primary: string;
+        default: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    background: {
+        true: string;
+        false: string;
+    };
+}>, {
+    color: {
+        dark: string;
+        gray: string;
+        red: string;
+        yellow: string;
+        green: string;
+        indigo: string;
+        purple: string;
+        pink: string;
+        blue: string;
+        primary: string;
+        default: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    background: {
+        true: string;
+        false: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    color: {
+        dark: string;
+        gray: string;
+        red: string;
+        yellow: string;
+        green: string;
+        indigo: string;
+        purple: string;
+        pink: string;
+        blue: string;
+        primary: string;
+        default: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    background: {
+        true: string;
+        false: string;
+    };
+}, undefined, "focus:outline-none whitespace-normal", import("tailwind-variants/dist/config").TVConfig<{
+    color: {
+        dark: string;
+        gray: string;
+        red: string;
+        yellow: string;
+        green: string;
+        indigo: string;
+        purple: string;
+        pink: string;
+        blue: string;
+        primary: string;
+        default: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    background: {
+        true: string;
+        false: string;
+    };
+}, {
+    color: {
+        dark: string;
+        gray: string;
+        red: string;
+        yellow: string;
+        green: string;
+        indigo: string;
+        purple: string;
+        pink: string;
+        blue: string;
+        primary: string;
+        default: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    background: {
+        true: string;
+        false: string;
+    };
+}>, unknown, unknown, undefined>>;

package/dist/toolbar/theme.js

@@ -0,0 +1,104 @@
+import { tv } from "tailwind-variants";
+export const toolbar = tv({
+    slots: {
+        base: "flex justify-between items-center",
+        content: "flex flex-wrap items-center"
+    },
+    variants: {
+        embedded: {
+            true: {},
+            false: {
+                base: "py-2 px-3"
+            }
+        },
+        color: {
+            default: {},
+            primary: {
+                base: "bg-primary-100 text-primary-800"
+            },
+            secondary: {
+                base: "bg-secondary-100 text-secondary-800"
+            }
+            // Add more color variants as needed
+        },
+        separators: {
+            true: {
+                content: "sm:divide-x rtl:divide-x-reverse"
+            }
+        }
+    },
+    compoundVariants: [
+        {
+            embedded: true,
+            color: "default",
+            class: {
+                base: "bg-transparent"
+            }
+        }
+    ]
+});
+export const toolbarGroup = tv({
+    base: "flex items-center",
+    variants: {
+        spacing: {
+            default: "space-x-1 rtl:space-x-reverse",
+            tight: "space-x-0.5 rtl:space-x-reverse",
+            loose: "space-x-2 rtl:space-x-reverse"
+        },
+        padding: {
+            default: "sm:pe-4 sm:ps-4",
+            none: ""
+        },
+        position: {
+            middle: "",
+            first: "sm:ps-0",
+            last: "sm:pe-0"
+        }
+    },
+    compoundVariants: [
+        {
+            position: ["first", "last"],
+            class: "sm:px-0"
+        }
+    ]
+});
+export const toolbarButton = tv({
+    base: "focus:outline-none whitespace-normal",
+    variants: {
+        color: {
+            dark: "text-gray-500 hover:text-gray-900 hover:bg-gray-200 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600",
+            gray: "text-gray-500 focus:ring-gray-400 hover:bg-gray-200 dark:hover:bg-gray-800 dark:hover:text-gray-300",
+            red: "text-red-500 focus:ring-red-400 hover:bg-red-200 dark:hover:bg-red-800 dark:hover:text-red-300",
+            yellow: "text-yellow-500 focus:ring-yellow-400 hover:bg-yellow-200 dark:hover:bg-yellow-800 dark:hover:text-yellow-300",
+            green: "text-green-500 focus:ring-green-400 hover:bg-green-200 dark:hover:bg-green-800 dark:hover:text-green-300",
+            indigo: "text-indigo-500 focus:ring-indigo-400 hover:bg-indigo-200 dark:hover:bg-indigo-800 dark:hover:text-indigo-300",
+            purple: "text-purple-500 focus:ring-purple-400 hover:bg-purple-200 dark:hover:bg-purple-800 dark:hover:text-purple-300",
+            pink: "text-pink-500 focus:ring-pink-400 hover:bg-pink-200 dark:hover:bg-pink-800 dark:hover:text-pink-300",
+            blue: "text-blue-500 focus:ring-blue-400 hover:bg-blue-200 dark:hover:bg-blue-800 dark:hover:text-blue-300",
+            primary: "text-primary-500 focus:ring-primary-400 hover:bg-primary-200 dark:hover:bg-primary-800 dark:hover:text-primary-300",
+            default: "focus:ring-gray-400 hover:bg-gray-100"
+        },
+        size: {
+            xs: "m-0.5 rounded-sm focus:ring-1 p-0.5",
+            sm: "m-0.5 rounded focus:ring-1 p-0.5",
+            md: "m-0.5 rounded-lg focus:ring-2 p-1.5",
+            lg: "m-0.5 rounded-lg focus:ring-2 p-2.5"
+        },
+        background: {
+            true: "",
+            false: ""
+        }
+    },
+    compoundVariants: [
+        {
+            color: "default",
+            background: true,
+            class: "dark:hover:bg-gray-600"
+        },
+        {
+            color: "default",
+            background: false,
+            class: "dark:hover:bg-gray-700"
+        }
+    ]
+});

package/dist/toolbar/type.d.ts

@@ -0,0 +1,31 @@
+import { type Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+type ToolbarColor = "primary" | "secondary" | "default" | undefined;
+interface ToolbarProps extends HTMLAttributes<HTMLDivElement> {
+    children: Snippet;
+    end?: Snippet;
+    embedded?: boolean;
+    color?: ToolbarColor;
+}
+type SpacingType = "default" | "tight" | "loose" | undefined;
+type PaddingType = "default" | "none" | undefined;
+type PositionType = "first" | "last" | "middle" | undefined;
+interface ToolbarGroupProps extends HTMLAttributes<HTMLDivElement> {
+    children: Snippet;
+    class?: string;
+    spacing?: SpacingType;
+    padding?: PaddingType;
+    position?: PositionType;
+}
+type ToolbarButtonType = "primary" | "default" | "dark" | "gray" | "red" | "yellow" | "green" | "indigo" | "purple" | "pink" | "blue" | undefined;
+interface ToolbarButtonProps {
+    children: Snippet;
+    color?: ToolbarButtonType;
+    name?: string;
+    ariaLabel?: string;
+    size?: "xs" | "sm" | "md" | "lg";
+    href?: string;
+    class?: string;
+    onclick?: () => void;
+}
+export type { ToolbarProps, ToolbarGroupProps, ToolbarButtonProps };

package/dist/toolbar/type.js

@@ -0,0 +1 @@
+import {} from "svelte";

package/dist/tooltip/Tooltip.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+  import { tooltip } from "./theme";
+  import type { TooltipProps } from ".";
+  import {
+    FloatingArrow,
+    arrow,
+    autoUpdate,
+    flip,
+    offset as floatingUIOffset,
+    useDismiss,
+    useFloating,
+    useHover,
+    useInteractions,
+    useRole,
+  } from "@skeletonlabs/floating-ui-svelte";
+  import { fade } from "svelte/transition";
+
+  let { children, color = "default", arrow: showArrow = false, offset = 8, triggeredBy, position = "top", class: className, arrowClass, open = $bindable(false), transition = fade, transitionOptions = { duration: 200 }, ...restProps }: TooltipProps = $props();
+
+  let arrowElement: HTMLElement | null = $state(null);
+
+  let { base, arrowBase } = $derived(tooltip({ color }));
+  
+  // State
+  let elemArrow: HTMLElement | null = $state(null);
+
+  // Use Floating
+  let floating = $derived(useFloating({
+    whileElementsMounted: autoUpdate,
+    get open() {
+      return open;
+    },
+    onOpenChange: (v) => {
+      open = v;
+    },
+    placement: position,
+    get middleware() {
+      return [floatingUIOffset(offset), flip(), elemArrow && arrow({ element: elemArrow })];
+    },
+  }));
+
+  // Interactions
+  let role = $derived(useRole(floating.context, { role: "tooltip" }));
+  let hover = $derived(useHover(floating.context, { move: false }));
+  let dismiss = $derived(useDismiss(floating.context));
+  let interactions = $derived(useInteractions([role, hover, dismiss]));
+
+  // Get elements
+  $effect(() => {
+    let triggerElement = document.querySelector(triggeredBy);
+    if (!triggerElement) return; 
+
+    floating.elements.reference = triggerElement;
+    
+    // Assign the props to the element
+    Object.entries(interactions.getReferenceProps()).forEach(([key, value]) => {
+      triggerElement[key] = value;
+    });
+  })
+</script>
+
+{#if open}
+  <div role="tooltip" bind:this={floating.elements.floating} style={floating.floatingStyles} {...interactions.getFloatingProps()} transition:transition={transitionOptions} {...restProps} class={base({ className })}>
+    {@render children()}
+    {#if showArrow}
+      <FloatingArrow bind:ref={arrowElement} context={floating.context} class={arrowBase({className: arrowClass})}/>
+    {/if}
+  </div>
+{/if}
+
+<!--
+@component
+[Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+## Props
+@props:children: any;
+@props:color: any = "default";
+@props:arrow: any = false;
+@props:offset: any = 8;
+@props:triggeredBy: any;
+@props:position: string = "top";
+@props:class: string;
+@props:arrowClass: string;
+@props:open: boolean = false;
+@props:transition: any = "fade";
+@props:transitionOptions: object = { duration: 200 };
+-->

package/dist/tooltip/Tooltip.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { TooltipProps } from ".";
+/**
+ * [Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+ * ## Props
+ * @props:children: any;
+ * @props:color: any = "default";
+ * @props:arrow: any = false;
+ * @props:offset: any = 8;
+ * @props:triggeredBy: any;
+ * @props:position: string = "top";
+ * @props:class: string;
+ * @props:arrowClass: string;
+ * @props:open: boolean = false;
+ * @props:transition: any = "fade";
+ * @props:transitionOptions: object = { duration: 200 };
+ */
+declare const Tooltip: import("svelte").Component<TooltipProps, {}, "open">;
+type Tooltip = ReturnType<typeof Tooltip>;
+export default Tooltip;

package/dist/tooltip/index.d.ts

@@ -0,0 +1,4 @@
+import type { TooltipProps } from "./type";
+import Tooltip from "./Tooltip.svelte";
+import { tooltip } from "./theme";
+export { Tooltip, tooltip, type TooltipProps };

package/dist/tooltip/index.js

@@ -0,0 +1,3 @@
+import Tooltip from "./Tooltip.svelte";
+import { tooltip } from "./theme";
+export { Tooltip, tooltip };