odj-svelte-ui 0.1.0

package/dist/tooltip/theme.js

@@ -0,0 +1,112 @@
+import { tv } from "tailwind-variants";
+export const tooltip = tv({
+    slots: {
+        base: "absolute py-1.5 px-3 border rounded-lg shadow-md text-sm z-50 pointer-events-none",
+        arrowBase: "absolute"
+    },
+    variants: {
+        color: {
+            default: {
+                base: "bg-light-surface-100 text-light-surface-800 border-light-surface-300 dark:border-light-surface-700 dark:text-white dark:bg-dark-surface-800",
+                arrowBase: "fill-light-surface-300 dark:fill-dark-surface-700"
+            },
+            primary: {
+                base: "bg-primary-600 text-white border-primary-800",
+                arrowBase: "fill-primary-800"
+            },
+            secondary: {
+                base: "bg-secondary-600 text-white border-secondary-800",
+                arrowBase: "fill-secondary-800"
+            },
+            gray: {
+                base: "bg-gray-600 text-white border-gray-800",
+                arrowBase: "fill-gray-800"
+            },
+            red: {
+                base: "bg-red-600 text-white border-red-800",
+                arrowBase: "fill-red-800"
+            },
+            orange: {
+                base: "bg-orange-600 text-white border-orange-800",
+                arrowBase: "fill-orange-800"
+            },
+            amber: {
+                base: "bg-amber-600 text-white border-amber-800",
+                arrowBase: "fill-amber-800"
+            },
+            yellow: {
+                base: "bg-yellow-600 text-white border-yellow-800",
+                arrowBase: "fill-yellow-800"
+            },
+            lime: {
+                base: "bg-lime-600 text-white border-lime-800",
+                arrowBase: "fill-lime-800"
+            },
+            green: {
+                base: "bg-green-600 text-white border-green-800",
+                arrowBase: "fill-green-800"
+            },
+            emerald: {
+                base: "bg-emerald-600 text-white border-emerald-800",
+                arrowBase: "fill-emerald-800"
+            },
+            teal: {
+                base: "bg-teal-600 text-white border-teal-800",
+                arrowBase: "fill-teal-800"
+            },
+            cyan: {
+                base: "bg-cyan-600 text-white border-cyan-800",
+                arrowBase: "fill-cyan-800"
+            },
+            sky: {
+                base: "bg-sky-600 text-white border-sky-800",
+                arrowBase: "fill-sky-800"
+            },
+            blue: {
+                base: "bg-blue-600 text-white border-blue-800",
+                arrowBase: "fill-blue-800"
+            },
+            indigo: {
+                base: "bg-indigo-600 text-white border-indigo-800",
+                arrowBase: "fill-indigo-800"
+            },
+            violet: {
+                base: "bg-violet-600 text-white border-violet-800",
+                arrowBase: "fill-violet-800"
+            },
+            purple: {
+                base: "bg-purple-600 text-white border-purple-800",
+                arrowBase: "fill-purple-800"
+            },
+            fuchsia: {
+                base: "bg-fuchsia-600 text-white border-fuchsia-800",
+                arrowBase: "fill-fuchsia-800"
+            },
+            pink: {
+                base: "bg-pink-600 text-white border-pink-800",
+                arrowBase: "fill-pink-800"
+            },
+            rose: {
+                base: "bg-rose-800 text-white border-rose-900",
+                arrowBase: "fill-rose-900"
+            }
+        },
+        position: {
+            top: {},
+            "top-start": {},
+            "top-end": {},
+            bottom: {},
+            "bottom-start": {},
+            "bottom-end": {},
+            left: {},
+            "left-start": {},
+            "left-end": {},
+            right: {},
+            "right-start": {},
+            "right-end": {}
+        }
+    },
+    defaultVariants: {
+        color: "default"
+    }
+});

package/dist/tooltip/type.d.ts

@@ -0,0 +1,17 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+type TooltipColorType = "primary" | "secondary" | "gray" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose" | "default" | undefined;
+type Placement = "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end" | undefined;
+interface TooltipProps extends HTMLAttributes<HTMLDivElement> {
+    children: Snippet;
+    triggeredBy: string;
+    position?: Placement;
+    color?: TooltipColorType;
+    arrow?: boolean;
+    offset?: number;
+    open?: boolean;
+    arrowClass?: string;
+    transition?: any;
+    transitionOptions?: object;
+}
+export { type TooltipProps };

package/dist/tooltip/type.js

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

package/dist/types.d.ts

@@ -0,0 +1,47 @@
+import type { TransitionConfig, FadeParams, BlurParams, FlyParams, SlideParams, ScaleParams } from "svelte/transition";
+export type ColorName = "primary" | "secondary" | "gray" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose";
+export declare const xs = "xs";
+export declare const sm = "sm";
+export declare const md = "md";
+export declare const lg = "lg";
+export declare const xl = "xl";
+export type CloseButtonColorType = "dark" | "default" | "gray" | "red" | "yellow" | "green" | "indigo" | "purple" | "pink" | "blue" | "primary" | "none";
+export type IndicatorPlacementType = "top-left" | "top-center" | "top-right" | "center-left" | "center" | "center-right" | "bottom-left" | "bottom-center" | "bottom-right" | undefined;
+export interface drawerTransitionParamTypes {
+    amount?: number;
+    delay?: number;
+    duration?: number;
+    easing?: (t: number) => number;
+    opacity?: number;
+    x?: number;
+    y?: number;
+}
+export type FormSizeType = "sm" | "md" | "lg";
+export type navbarType = {
+    navStatus: boolean | undefined;
+    breakPoint: "md" | "lg" | "xl" | "xxl";
+    activeClass: string | undefined | null;
+    nonActiveClass: string | undefined | null;
+    closeNav: () => void;
+};
+export type ColorVariant = "gray" | "red" | "yellow" | "green" | "indigo" | "purple" | "pink" | "blue" | "primary" | "none";
+export type DeviceVariantType = "default" | "ios" | "android" | "tablet" | "laptop" | "desktop" | "smartwatch";
+export declare type SizeType = typeof xs | typeof sm | typeof md | typeof lg | typeof xl;
+export type TransitionTypes = "fade" | "fly" | "slide" | "blur" | "in:fly" | "out:fly" | "in:slide" | "out:slide" | "in:fade" | "out:fade" | "in:blur" | "out:blur";
+export interface TransitionParamTypes {
+    delay?: number;
+    duration?: number;
+    easing?: (t: number) => number;
+    css?: (t: number, u: number) => string | undefined | null;
+    tick?: (t: number, u: number) => void;
+}
+export type ParamsType = FadeParams | BlurParams | FlyParams | SlideParams | ScaleParams;
+export type TransitionFunc = (node: HTMLElement, params: ParamsType) => TransitionConfig;
+export type ModalPlacementType = "top-left" | "top-center" | "top-right" | "center-left" | "center" | "center-right" | "bottom-left" | "bottom-center" | "bottom-right";
+export interface LinkType {
+    name: string;
+    href?: string;
+    rel?: string;
+    active?: boolean;
+    [propName: string]: any;
+}

package/dist/types.js

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

package/dist/typography/anchor/A.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import { type AnchorProps as Props, anchor } from "./index";
+
+  let { children, color = "primary", class: className, ...restProps }: Props = $props();
+  let linkClass = $derived(anchor({ color, className }));
+</script>
+
+<a {...restProps} class={linkClass}>
+  {@render children()}
+</a>
+
+<!--
+@component
+[Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+## Props
+@props: children: any;
+@props:color: any = "primary";
+@props:class: string;
+-->

package/dist/typography/anchor/A.svelte.d.ts

@@ -0,0 +1,11 @@
+import { type AnchorProps as Props } from "./index";
+/**
+ * [Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+ * ## Props
+ * @props: children: any;
+ * @props:color: any = "primary";
+ * @props:class: string;
+ */
+declare const A: import("svelte").Component<Props, {}, "">;
+type A = ReturnType<typeof A>;
+export default A;

package/dist/typography/anchor/index.d.ts

@@ -0,0 +1,4 @@
+import type { AnchorProps, AnchorColorType } from "./type";
+import A from "./A.svelte";
+import { anchor } from "./theme";
+export { A, anchor, type AnchorProps, type AnchorColorType };

package/dist/typography/anchor/index.js

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

package/dist/typography/anchor/theme.d.ts

@@ -0,0 +1,162 @@
+export declare const anchor: import("tailwind-variants").TVReturnType<{
+    color: {
+        primary: string;
+        secondary: 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;
+    };
+}, undefined, "inline-flex items-center hover:underline", import("tailwind-variants/dist/config").TVConfig<{
+    color: {
+        primary: string;
+        secondary: 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;
+    };
+}, {
+    color: {
+        primary: string;
+        secondary: 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;
+    };
+}>, {
+    color: {
+        primary: string;
+        secondary: 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;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    color: {
+        primary: string;
+        secondary: 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;
+    };
+}, undefined, "inline-flex items-center hover:underline", import("tailwind-variants/dist/config").TVConfig<{
+    color: {
+        primary: string;
+        secondary: 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;
+    };
+}, {
+    color: {
+        primary: string;
+        secondary: 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;
+    };
+}>, unknown, unknown, undefined>>;

package/dist/typography/anchor/theme.js

@@ -0,0 +1,29 @@
+import { tv } from "tailwind-variants";
+export const anchor = tv({
+    base: "inline-flex items-center hover:underline",
+    variants: {
+        color: {
+            // primary, secondary, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose
+            primary: "text-primary-600 dark:text-primary-500",
+            secondary: "text-secondary-600 dark:text-secondary-500",
+            gray: "text-gray-600 dark:text-gray-500",
+            red: "text-red-600 dark:text-red-500",
+            orange: "text-orange-600 dark:text-orange-500",
+            amber: "text-amber-600 dark:text-amber-500",
+            yellow: "text-yellow-600 dark:text-yellow-500",
+            lime: "text-lime-600 dark:text-lime-500",
+            green: "text-green-600 dark:text-green-500",
+            emerald: "text-emerald-600 dark:text-emerald-500",
+            teal: "text-teal-600 dark:text-teal-500",
+            cyan: "text-cyan-600 dark:text-cyan-500",
+            sky: "text-sky-600 dark:text-sky-500",
+            blue: "text-blue-600 dark:text-blue-500",
+            indigo: "text-indigo-600 dark:text-indigo-500",
+            violet: "text-violet-600 dark:text-violet-500",
+            purple: "text-purple-600 dark:text-purple-500",
+            fuchsia: "text-fuchsia-600 dark:text-fuchsia-500",
+            pink: "text-pink-600 dark:text-pink-500",
+            rose: "text-rose-600 dark:text-rose-500"
+        }
+    }
+});

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

@@ -0,0 +1,9 @@
+import type { Snippet } from "svelte";
+import type { HTMLAnchorAttributes } from "svelte/elements";
+type AnchorColorType = "primary" | "secondary" | "gray" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose" | undefined;
+interface AnchorProps extends HTMLAnchorAttributes {
+    children: Snippet;
+    color?: AnchorColorType;
+    class?: string;
+}
+export { type AnchorProps, type AnchorColorType };

package/dist/typography/anchor/type.js

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

package/dist/typography/blockquote/Blockquote.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import { type BlockquoteProps as Props, blockquote } from "./index";
+
+  let { children, class: className, border, italic = true, bg, alignment = "left", size = "lg", ...restProps }: Props = $props();
+
+  let blockquoteClass = $derived(
+    blockquote({
+      border,
+      italic,
+      bg,
+      alignment,
+      size,
+      className
+    })
+  );
+</script>
+
+<blockquote {...restProps} class={blockquoteClass}>
+  {@render children()}
+</blockquote>
+
+<!--
+@component
+[Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+## Props
+@props: children: any;
+@props:class: string;
+@props:border: any;
+@props:italic: any = true;
+@props:bg: any;
+@props:alignment: any = "left";
+@props:size: any = "lg";
+-->

package/dist/typography/blockquote/Blockquote.svelte.d.ts

@@ -0,0 +1,15 @@
+import { type BlockquoteProps as Props } from "./index";
+/**
+ * [Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+ * ## Props
+ * @props: children: any;
+ * @props:class: string;
+ * @props:border: any;
+ * @props:italic: any = true;
+ * @props:bg: any;
+ * @props:alignment: any = "left";
+ * @props:size: any = "lg";
+ */
+declare const Blockquote: import("svelte").Component<Props, {}, "">;
+type Blockquote = ReturnType<typeof Blockquote>;
+export default Blockquote;

package/dist/typography/blockquote/index.d.ts

@@ -0,0 +1,4 @@
+import type { BlockquoteProps } from "./type";
+import Blockquote from "./Blockquote.svelte";
+import { blockquote } from "./theme";
+export { Blockquote, blockquote, type BlockquoteProps };

package/dist/typography/blockquote/index.js

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