odj-svelte-ui 0.1.0

package/dist/typography/span/theme.js

@@ -0,0 +1,88 @@
+import { tv } from "tailwind-variants";
+export const span = tv({
+    variants: {
+        italic: {
+            true: "italic"
+        },
+        underline: {
+            true: "underline decoration-2 decoration-blue-400 dark:decoration-blue-600"
+        },
+        linethrough: {
+            true: "line-through"
+        },
+        uppercase: {
+            true: "uppercase"
+        },
+        gradient: {
+            skyToEmerald: "text-transparent bg-clip-text bg-gradient-to-r to-emerald-600 from-sky-400",
+            purpleToBlue: "text-transparent bg-clip-text bg-gradient-to-r from-purple-500 to-blue-500",
+            pinkToOrange: "text-transparent bg-clip-text bg-gradient-to-r from-pink-500 to-orange-400",
+            tealToLime: "text-transparent bg-clip-text bg-gradient-to-r from-teal-400 to-lime-300",
+            redToYellow: "text-transparent bg-clip-text bg-gradient-to-r from-red-600 to-yellow-500",
+            indigoToCyan: "text-transparent bg-clip-text bg-gradient-to-r from-indigo-600 to-cyan-400",
+            fuchsiaToRose: "text-transparent bg-clip-text bg-gradient-to-r from-fuchsia-500 to-rose-500",
+            amberToEmerald: "text-transparent bg-clip-text bg-gradient-to-r from-amber-400 to-emerald-500",
+            violetToRed: "text-transparent bg-clip-text bg-gradient-to-r from-violet-600 to-red-500",
+            blueToGreen: "text-transparent bg-clip-text bg-gradient-to-r from-blue-400 via-teal-500 to-green-400",
+            orangeToPurple: "text-transparent bg-clip-text bg-gradient-to-r from-orange-400 via-pink-500 to-purple-500",
+            yellowToRed: "text-transparent bg-clip-text bg-gradient-to-r from-yellow-200 via-indigo-400 to-red-600",
+            none: ""
+        },
+        highlight: {
+            blue: "text-blue-600 dark:text-blue-500",
+            green: "text-green-600 dark:text-green-500",
+            red: "text-red-600 dark:text-red-500",
+            yellow: "text-yellow-600 dark:text-yellow-500",
+            purple: "text-purple-600 dark:text-purple-500",
+            pink: "text-pink-600 dark:text-pink-500",
+            indigo: "text-indigo-600 dark:text-indigo-500",
+            teal: "text-teal-600 dark:text-teal-500",
+            orange: "text-orange-600 dark:text-orange-500",
+            cyan: "text-cyan-600 dark:text-cyan-500",
+            fuchsia: "text-fuchsia-600 dark:text-fuchsia-500",
+            amber: "text-amber-600 dark:text-amber-500",
+            lime: "text-lime-600 dark:text-lime-500",
+            none: ""
+        },
+        decoration: {
+            solid: "underline decoratio-solid",
+            double: "underline decoration-double",
+            dotted: "underline decoration-dotted",
+            dashed: "underline decoration-dashed",
+            wavy: "underline decoration-wavy",
+            none: "decoration-none"
+        },
+        decorationColor: {
+            // blue, green, red, yellow, purple, pink, indigo, teal, orange, cyan, fuchsia, amber, lime, none
+            // radio
+            // primary, secondary, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose
+            primary: "underline decoration-primary-400 dark:decoration-primary-600",
+            secondary: "underline decoration-secondary-400 dark:decoration-secondary-600",
+            gray: "underline decoration-gray-400 dark:decoration-gray-600",
+            orange: "underline decoration-orange-400 dark:decoration-orange-600",
+            red: "underline decoration-red-400 dark:decoration-red-600",
+            yellow: "underline decoration-yellow-400 dark:decoration-yellow-600",
+            lime: "underline decoration-lime-400 dark:decoration-lime-600",
+            green: "underline decoration-green-400 dark:decoration-green-600",
+            emerald: "underline decoration-emerald-400 dark:decoration-emerald-600",
+            teal: "underline decoration-teal-400 dark:decoration-teal-600",
+            cyan: "underline decoration-cyan-400 dark:decoration-cyan-600",
+            sky: "underline decoration-sky-400 dark:decoration-sky-600",
+            blue: "underline decoration-blue-400 dark:decoration-blue-600",
+            indigo: "underline decoration-indigo-400 dark:decoration-indigo-600",
+            violet: "underline decoration-violet-400 dark:decoration-violet-600",
+            purple: "underline decoration-purple-400 dark:decoration-purple-600",
+            fuchsia: "underline decoration-fuchsia-400 dark:decoration-fuchsia-600",
+            pink: "underline decoration-pink-400 dark:decoration-pink-600",
+            rose: "underline decoration-rose-400 dark:decoration-rose-600",
+            none: "decoration-none"
+        },
+        decorationThickness: {
+            "1": "underline decoration-1",
+            "2": "underline decoration-2",
+            "4": "underline decoration-4",
+            "8": "underline decoration-8",
+            "0": "decoration-0"
+        }
+    }
+});

package/dist/typography/span/type.d.ts

@@ -0,0 +1,21 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+type DecorationType = "none" | "solid" | "double" | "dotted" | "dashed" | "wavy" | undefined;
+type GradientType = "skyToEmerald" | "purpleToBlue" | "pinkToOrange" | "tealToLime" | "redToYellow" | "indigoToCyan" | "fuchsiaToRose" | "amberToEmerald" | "violetToRed" | "blueToGreen" | "orangeToPurple" | "yellowToRed" | "none" | undefined;
+type HighlightType = "none" | "blue" | "green" | "red" | "yellow" | "purple" | "pink" | "indigo" | "teal" | "orange" | "cyan" | "fuchsia" | "amber" | "lime" | undefined;
+type DecorationColorType = "none" | "blue" | "green" | "red" | "yellow" | "purple" | "pink" | "indigo" | "teal" | "orange" | "cyan" | "fuchsia" | "lime" | "primary" | "secondary" | "gray" | "emerald" | "sky" | "violet" | "rose" | undefined;
+type DecorationThicknessType = "1" | "2" | "4" | "8" | "0" | undefined;
+interface SpanProps extends HTMLAttributes<HTMLSpanElement> {
+    children?: Snippet;
+    italic?: boolean;
+    underline?: boolean;
+    linethrough?: boolean;
+    uppercase?: boolean;
+    gradient?: GradientType;
+    highlight?: HighlightType;
+    class?: string;
+    decoration?: DecorationType;
+    decorationThickness?: DecorationThicknessType;
+    decorationColor?: DecorationColorType;
+}
+export { type SpanProps };

package/dist/typography/span/type.js

@@ -0,0 +1 @@
+export {};

package/dist/uiHelpers.svelte.d.ts

@@ -0,0 +1,11 @@
+export declare function uiHelpers(): {
+    isOpen: boolean;
+    toggle: () => void;
+    close: () => void;
+    open: () => void;
+};
+export declare function clickOutside(element: HTMLElement, callbackFunction?: () => void): {
+    update(newCallbackFunction: () => void): void;
+    destroy(): void;
+};
+export declare function idGenerator(): `${string}-${string}-${string}-${string}-${string}`;

package/dist/uiHelpers.svelte.js

@@ -0,0 +1,56 @@
+export function uiHelpers() {
+    let isOpen = $state(false);
+    function toggle() {
+        isOpen = !isOpen;
+        // console.log('toggled', isOpen);
+    }
+    function close() {
+        isOpen = false;
+        // console.log('closed', isOpen);
+    }
+    function open() {
+        isOpen = true;
+        // console.log('opened', isOpen);
+    }
+    return {
+        get isOpen() {
+            return isOpen;
+        },
+        set isOpen(value) {
+            isOpen = value;
+        },
+        toggle,
+        close,
+        open
+    };
+}
+export function clickOutside(element, callbackFunction) {
+    function onClick(event) {
+        if (typeof callbackFunction === "function") {
+            const targetNode = event.target;
+            if (!element.contains(targetNode)) {
+                callbackFunction();
+            }
+        }
+        else {
+            console.error("Callback function is not a function");
+        }
+    }
+    document.body.addEventListener("click", onClick);
+    return {
+        update(newCallbackFunction) {
+            if (typeof newCallbackFunction === "function") {
+                callbackFunction = newCallbackFunction;
+            }
+            else {
+                console.error("New callback function is not a function");
+            }
+        },
+        destroy() {
+            document.body.removeEventListener("click", onClick);
+        }
+    };
+}
+export function idGenerator() {
+    return crypto.randomUUID();
+}

package/dist/utils/CloseButton.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  import { type CloseButtonProps as Props, closeButtonVariants } from "./index";
+
+  let { color = "surface", onclick, name = "Close", ariaLabel, size = "md", href, class: className, ...restProps }: Props = $props();
+
+  const { base, svg } = $derived(closeButtonVariants({ color, size }));
+</script>
+
+{#if href}
+  <a {href} {...restProps} {onclick} class={base({ class: className })} aria-label={ariaLabel ?? name}>
+    {#if name}<span class="sr-only">{name}</span>{/if}
+    <svg class={svg()} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+      <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
+    </svg>
+  </a>
+{:else}
+  <button type="button" {...restProps} class={base({ class: className })} {onclick} aria-label={ariaLabel ?? name}>
+    {#if name}<span class="sr-only">{name}</span>{/if}
+    <svg class={svg()} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+      <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
+    </svg>
+  </button>
+{/if}
+
+<!--
+@component
+[Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+## Props
+@props: color: "primary" | "secondary" | "gray" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose" | undefined = "gray";
+@props:onclick: () => void;
+@props:name: string = "Close";
+@props:ariaLabel: string;
+@props:size: "md" | "xs" | "sm" | "lg" | undefined = "md";
+@props:href: string;
+@props:class: string;
+-->

package/dist/utils/CloseButton.svelte.d.ts

@@ -0,0 +1,15 @@
+import { type CloseButtonProps as Props } from "./index";
+/**
+ * [Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+ * ## Props
+ * @props: color: "primary" | "secondary" | "gray" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose" | undefined = "gray";
+ * @props:onclick: () => void;
+ * @props:name: string = "Close";
+ * @props:ariaLabel: string;
+ * @props:size: "md" | "xs" | "sm" | "lg" | undefined = "md";
+ * @props:href: string;
+ * @props:class: string;
+ */
+declare const CloseButton: import("svelte").Component<Props, {}, "">;
+type CloseButton = ReturnType<typeof CloseButton>;
+export default CloseButton;

package/dist/utils/focusTrap.d.ts

@@ -0,0 +1,3 @@
+import type { Action } from "svelte/action";
+declare const focusTrap: Action<HTMLElement>;
+export default focusTrap;

package/dist/utils/focusTrap.js

@@ -0,0 +1,32 @@
+//
+// Taken from github.com/carbon-design-system/carbon/packages/react/src/internal/keyboard/navigation.js
+//
+const selectorTabbable = `
+  a[href], area[href], input:not([disabled]):not([tabindex='-1']),
+  button:not([disabled]):not([tabindex='-1']),select:not([disabled]):not([tabindex='-1']),
+  textarea:not([disabled]):not([tabindex='-1']),
+  iframe, object, embed, *[tabindex]:not([tabindex='-1']):not([disabled]), *[contenteditable=true]
+`;
+const focusTrap = (node) => {
+    const handleFocusTrap = (e) => {
+        const isTabPressed = e.key === "Tab" || e.keyCode === 9;
+        if (!isTabPressed) {
+            return;
+        }
+        const tabbable = Array.from(node.querySelectorAll(selectorTabbable)).filter((el) => el instanceof HTMLElement && el.hidden !== true);
+        let index = tabbable.indexOf(document.activeElement);
+        if (index === -1 && e.shiftKey)
+            index = 0;
+        index += tabbable.length + (e.shiftKey ? -1 : 1);
+        index %= tabbable.length;
+        tabbable[index].focus();
+        e.preventDefault();
+    };
+    document.addEventListener("keydown", handleFocusTrap, true);
+    return {
+        destroy() {
+            document.removeEventListener("keydown", handleFocusTrap, true);
+        }
+    };
+};
+export default focusTrap;

package/dist/utils/index.d.ts

@@ -0,0 +1,232 @@
+import { type ClassValue } from "clsx";
+export declare function cn(...inputs: ClassValue[]): string;
+import CloseButton from "./CloseButton.svelte";
+declare const closeButtonVariants: import("tailwind-variants").TVReturnType<{
+    color: {
+        primary: string;
+        secondary: string;
+        surface: string;
+        gray: string;
+        red: string;
+        orange: string;
+        amber: string;
+        yellow: string;
+        lime: string;
+        green: string;
+        emerald: string;
+        teal: string;
+        cyan: string;
+        sky: string;
+        blue: string;
+        indigo: string;
+        violet: string;
+        purple: string;
+        fuchsia: string;
+        pink: string;
+        rose: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, {
+    svg: string;
+}, "focus:outline-none whitespace-normal", import("tailwind-variants/dist/config").TVConfig<{
+    color: {
+        primary: string;
+        secondary: string;
+        surface: string;
+        gray: string;
+        red: string;
+        orange: string;
+        amber: string;
+        yellow: string;
+        lime: string;
+        green: string;
+        emerald: string;
+        teal: string;
+        cyan: string;
+        sky: string;
+        blue: string;
+        indigo: string;
+        violet: string;
+        purple: string;
+        fuchsia: string;
+        pink: string;
+        rose: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, {
+    color: {
+        primary: string;
+        secondary: string;
+        surface: string;
+        gray: string;
+        red: string;
+        orange: string;
+        amber: string;
+        yellow: string;
+        lime: string;
+        green: string;
+        emerald: string;
+        teal: string;
+        cyan: string;
+        sky: string;
+        blue: string;
+        indigo: string;
+        violet: string;
+        purple: string;
+        fuchsia: string;
+        pink: string;
+        rose: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}>, {
+    color: {
+        primary: string;
+        secondary: string;
+        surface: string;
+        gray: string;
+        red: string;
+        orange: string;
+        amber: string;
+        yellow: string;
+        lime: string;
+        green: string;
+        emerald: string;
+        teal: string;
+        cyan: string;
+        sky: string;
+        blue: string;
+        indigo: string;
+        violet: string;
+        purple: string;
+        fuchsia: string;
+        pink: string;
+        rose: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, {
+    svg: string;
+}, import("tailwind-variants").TVReturnType<{
+    color: {
+        primary: string;
+        secondary: string;
+        surface: string;
+        gray: string;
+        red: string;
+        orange: string;
+        amber: string;
+        yellow: string;
+        lime: string;
+        green: string;
+        emerald: string;
+        teal: string;
+        cyan: string;
+        sky: string;
+        blue: string;
+        indigo: string;
+        violet: string;
+        purple: string;
+        fuchsia: string;
+        pink: string;
+        rose: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, {
+    svg: string;
+}, "focus:outline-none whitespace-normal", import("tailwind-variants/dist/config").TVConfig<{
+    color: {
+        primary: string;
+        secondary: string;
+        surface: string;
+        gray: string;
+        red: string;
+        orange: string;
+        amber: string;
+        yellow: string;
+        lime: string;
+        green: string;
+        emerald: string;
+        teal: string;
+        cyan: string;
+        sky: string;
+        blue: string;
+        indigo: string;
+        violet: string;
+        purple: string;
+        fuchsia: string;
+        pink: string;
+        rose: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, {
+    color: {
+        primary: string;
+        secondary: string;
+        surface: string;
+        gray: string;
+        red: string;
+        orange: string;
+        amber: string;
+        yellow: string;
+        lime: string;
+        green: string;
+        emerald: string;
+        teal: string;
+        cyan: string;
+        sky: string;
+        blue: string;
+        indigo: string;
+        violet: string;
+        purple: string;
+        fuchsia: string;
+        pink: string;
+        rose: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}>, unknown, unknown, undefined>>;
+type ColorType = "primary" | "secondary" | "surface" | "gray" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose" | undefined;
+type SizeType = "md" | "xs" | "sm" | "lg" | undefined;
+interface CloseButtonProps {
+    color?: ColorType;
+    onclick?: () => void;
+    name?: string;
+    ariaLabel?: string;
+    size?: SizeType;
+    href?: string;
+    class?: string;
+}
+export { CloseButton, closeButtonVariants, type CloseButtonProps };

package/dist/utils/index.js

@@ -0,0 +1,70 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}
+import CloseButton from "./CloseButton.svelte";
+import { tv } from "tailwind-variants";
+const closeButtonVariants = tv({
+    base: "focus:outline-none whitespace-normal",
+    variants: {
+        // primary, secondary, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose
+        color: {
+            primary: "text-primary-500 focus-visible:ring-primary-400 active:bg-primary-300 dark:active:bg-primary-800/10 hover:bg-primary-200 dark:hover:bg-primary-800/20 dark:hover:text-primary-400",
+            secondary: "text-secondary-500 focus-visible:ring-secondary-400 active:bg-secondary-300 dark:active:bg-secondary-800/10 hover:bg-secondary-200 dark:hover:bg-secondary-800/20 dark:hover:text-secondary-400",
+            surface: "text-light-surface-500 focus-visible:ring-light-surface-400 dark:focus-visible:ring-dark-surface-400 active:bg-light-surface-300 dark:active:bg-dark-surface-700/30 hover:bg-light-surface-200 dark:hover:bg-dark-surface-700/40 dark:hover:text-dark-surface-400",
+            gray: "text-gray-500 focus-visible:ring-gray-400 active:bg-gray-300 dark:active:bg-gray-800/10 hover:bg-gray-200 dark:hover:bg-gray-800/20 dark:hover:text-gray-400",
+            red: "text-red-500 focus-visible:ring-red-400 active:bg-red-300 dark:active:bg-red-800/10 hover:bg-red-200 dark:hover:bg-red-800/20 dark:hover:text-red-400",
+            orange: "text-orange-500 focus-visible:ring-orange-400 active:bg-orange-300 dark:active:bg-orange-800/10 hover:bg-orange-200 dark:hover:bg-orange-800/20 dark:hover:text-orange-400",
+            amber: "text-amber-500 focus-visible:ring-amber-400 active:bg-amber-300 dark:active:bg-amber-800/10 hover:bg-amber-200 dark:hover:bg-amber-800/20 dark:hover:text-amber-400",
+            yellow: "text-yellow-500 focus-visible:ring-yellow-400 active:bg-yellow-300 dark:active:bg-yellow-800/10 hover:bg-yellow-200 dark:hover:bg-yellow-800/20 dark:hover:text-yellow-400",
+            lime: "text-lime-500 focus-visible:ring-lime-400 active:bg-lime-300 dark:active:bg-lime-800/10 hover:bg-lime-200 dark:hover:bg-lime-800/20 dark:hover:text-lime-400",
+            green: "text-green-500 focus-visible:ring-green-400 active:bg-green-300 dark:active:bg-green-800/10 hover:bg-green-200 dark:hover:bg-green-800/20 dark:hover:text-green-400",
+            emerald: "text-emerald-500 focus-visible:ring-emerald-400 active:bg-emerald-300 dark:active:bg-emerald-800/10 hover:bg-emerald-200 dark:hover:bg-emerald-800/20 dark:hover:text-emerald-400",
+            teal: "text-teal-500 focus-visible:ring-teal-400 active:bg-teal-300 dark:active:bg-teal-800/10 hover:bg-teal-200 dark:hover:bg-teal-800/20 dark:hover:text-teal-400",
+            cyan: "text-cyan-500 focus-visible:ring-cyan-400 active:bg-cyan-300 dark:active:bg-cyan-800/10 hover:bg-cyan-200 dark:hover:bg-cyan-800/20 dark:hover:text-cyan-400",
+            sky: "text-sky-500 focus-visible:ring-sky-400 active:bg-sky-300 dark:active:bg-sky-800/10 hover:bg-sky-200 dark:hover:bg-sky-800/20 dark:hover:text-sky-400",
+            blue: "text-blue-500 focus-visible:ring-blue-400 active:bg-blue-300 dark:active:bg-blue-800/10 hover:bg-blue-200 dark:hover:bg-blue-800/20 dark:hover:text-blue-400",
+            indigo: "text-indigo-500 focus-visible:ring-indigo-400 active:bg-indigo-300 dark:active:bg-indigo-800/10 hover:bg-indigo-200 dark:hover:bg-indigo-800/20 dark:hover:text-indigo-400",
+            violet: "text-violet-500 focus-visible:ring-violet-400 active:bg-violet-300 dark:active:bg-violet-800/10 hover:bg-violet-200 dark:hover:bg-violet-800/20 dark:hover:text-violet-400",
+            purple: "text-purple-500 focus-visible:ring-purple-400 active:bg-purple-300 dark:active:bg-purple-800/10 hover:bg-purple-200 dark:hover:bg-purple-800/20 dark:hover:text-purple-400",
+            fuchsia: "text-fuchsia-500 focus-visible:ring-fuchsia-400 active:bg-fuchsia-300 dark:active:bg-fuchsia-800/10 hover:bg-fuchsia-200 dark:hover:bg-fuchsia-800/20 dark:hover:text-fuchsia-400",
+            pink: "text-pink-500 focus-visible:ring-pink-400 active:bg-pink-300 dark:active:bg-pink-800/10 hover:bg-pink-200 dark:hover:bg-pink-800/20 dark:hover:text-pink-400",
+            rose: "text-rose-500 focus-visible:ring-rose-400 active:bg-rose-300 dark:active:bg-rose-800/10 hover:bg-rose-200 dark:hover:bg-rose-800/20 dark:hover:text-rose-400"
+        },
+        size: {
+            xs: "m-0.5 rounded-sm focus-visible:ring-1 p-0.5",
+            sm: "m-0.5 rounded focus-visible:ring-1 p-0.5",
+            md: "m-0.5 rounded-lg focus-visible:ring-2 p-1.5",
+            lg: "m-0.5 rounded-lg focus-visible:ring-2 p-2.5"
+        }
+    },
+    defaultVariants: {
+        color: "surface",
+        size: "md"
+    },
+    slots: {
+        svg: ""
+    },
+    compoundVariants: [
+        {
+            size: "xs",
+            class: {
+                svg: "w-3 h-3"
+            }
+        },
+        {
+            size: "sm",
+            class: {
+                svg: "w-3.5 h-3.5"
+            }
+        },
+        {
+            size: ["md", "lg"],
+            class: {
+                svg: "w-5 h-5"
+            }
+        }
+    ]
+});
+export { CloseButton, closeButtonVariants };

package/dist/video/Video.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import { type VideoProps as Props } from "./index";
+
+  let { children, type = "video/mp4", trackSrc, src, srclang = "en", label = "english_captions", class: classname, ...restProps }: Props = $props();
+</script>
+
+<video {...restProps} class={classname}>
+  <source {src} {type} />
+  {#if children}
+    {@render children()}
+  {/if}
+  <track src={trackSrc} kind="captions" {srclang} {label} />
+  Your browser does not support the video tag.
+</video>
+
+<!--
+@component
+[Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+## Props
+@props: children: any;
+@props:type: any = "video/mp4";
+@props:trackSrc: any;
+@props:src: any;
+@props:srclang: any = "en";
+@props:label: any = "english_captions";
+@props:class: string;
+-->

package/dist/video/Video.svelte.d.ts

@@ -0,0 +1,15 @@
+import { type VideoProps as Props } from "./index";
+/**
+ * [Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+ * ## Props
+ * @props: children: any;
+ * @props:type: any = "video/mp4";
+ * @props:trackSrc: any;
+ * @props:src: any;
+ * @props:srclang: any = "en";
+ * @props:label: any = "english_captions";
+ * @props:class: string;
+ */
+declare const Video: import("svelte").Component<Props, {}, "">;
+type Video = ReturnType<typeof Video>;
+export default Video;

package/dist/video/index.d.ts

@@ -0,0 +1,3 @@
+import type { VideoProps } from "./type";
+import Video from "./Video.svelte";
+export { Video, type VideoProps };

package/dist/video/index.js

@@ -0,0 +1,2 @@
+import Video from "./Video.svelte";
+export { Video };

package/dist/video/type.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from "svelte";
+import type { HTMLVideoAttributes } from "svelte/elements";
+interface VideoProps extends HTMLVideoAttributes {
+    children?: Snippet;
+    type?: string;
+    src?: string;
+    trackSrc?: string;
+    srclang?: string;
+    label?: string;
+    class?: string;
+}
+export { type VideoProps };

package/dist/video/type.js

@@ -0,0 +1 @@
+export {};