odj-svelte-ui 0.1.0

package/dist/typography/img/theme.js

@@ -0,0 +1,67 @@
+import { tv } from "tailwind-variants";
+export const img = tv({
+    slots: {
+        base: "max-w-full h-auto",
+        figure: "",
+        figureCaption: "mt-2 text-sm text-center text-gray-500 dark:text-gray-400"
+    },
+    variants: {
+        size: {
+            xs: { base: "max-w-xs", figure: "max-w-xs" },
+            sm: { base: "max-w-sm", figure: "max-w-sm" },
+            md: { base: "max-w-md", figure: "max-w-md" },
+            lg: { base: "max-w-lg", figure: "max-w-lg" },
+            xl: { base: "max-w-xl", figure: "max-w-xl" },
+            "2xl": { base: "max-w-2xl", figure: "max-w-2xl" },
+            full: { base: "max-w-full", figure: "max-w-full" },
+            none: { base: "", figure: "" }
+        },
+        alignment: {
+            left: {},
+            center: { base: "mx-auto", figure: "mx-auto" },
+            right: { base: "ms-auto", figure: "ms-auto" }
+        },
+        effect: {
+            grayscale: {
+                base: "cursor-pointer rounded-lg grayscale filter transition-all duration-300 hover:grayscale-0"
+            },
+            blur: { base: "blur-sm transition-all duration-300 hover:blur-none" },
+            invert: {
+                base: "invert filter transition-all duration-300 hover:invert-0"
+            },
+            sepia: {
+                base: "sepia filter transition-all duration-300 hover:sepia-0"
+            },
+            saturate: {
+                base: "saturate-50 filter transition-all duration-300 hover:saturate-100"
+            },
+            "hue-rotate": {
+                base: "hue-rotate-60 filter transition-all duration-300 hover:hue-rotate-0"
+            },
+            none: {
+                base: "transition-all duration-300"
+            }
+        },
+        shadow: {
+            sm: { base: "shadow-sm" },
+            regular: { base: "shadow" },
+            md: { base: "shadow-md" },
+            lg: { base: "shadow-lg" },
+            xl: { base: "shadow-xl" },
+            "2xl": { base: "shadow-2xl" },
+            inner: { base: "shadow-inner" },
+            none: { base: "shadow-none" }
+        },
+        rounded: {
+            sm: { base: "rounded-sm" },
+            regular: { base: "rounded" },
+            md: { base: "rounded-md" },
+            lg: { base: "rounded-lg" },
+            xl: { base: "rounded-xl" },
+            "2xl": { base: "rounded-2xl" },
+            "3xl": { base: "rounded-3xl" },
+            full: { base: "rounded-full" },
+            none: { base: "rounded-none" }
+        }
+    }
+});

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

@@ -0,0 +1,39 @@
+import type { HTMLImgAttributes } from "svelte/elements";
+import type { Picture } from "vite-imagetools";
+type SizeType = "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "xs" | "full" | undefined;
+type AlignmentType = "left" | "center" | "right" | undefined;
+type EffectType = "none" | "grayscale" | "blur" | "invert" | "sepia" | "saturate" | "hue-rotate" | undefined;
+type ShadowType = "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "regular" | "inner" | undefined;
+type RoundedType = "sm" | "md" | "lg" | "xl" | "2xl" | "full" | "none" | "regular" | "3xl" | undefined;
+type EnhancedImgAttributes = Omit<HTMLImgAttributes, "src"> & {
+    src: string | Picture;
+};
+interface ImgProps extends HTMLImgAttributes {
+    size?: SizeType;
+    alignment?: AlignmentType;
+    effect?: EffectType;
+    shadow?: ShadowType;
+    rounded?: RoundedType;
+    caption?: string;
+    imgClass?: string;
+    figClass?: string;
+    captionClass?: string;
+    class?: string;
+    href?: string;
+}
+interface EnhandedImgProps extends EnhancedImgAttributes {
+    size?: SizeType;
+    multiple?: boolean;
+    transform?: string;
+    alignment?: AlignmentType;
+    effect?: EffectType;
+    shadow?: ShadowType;
+    rounded?: RoundedType;
+    caption?: string;
+    imgClass?: string;
+    figClass?: string;
+    captionClass?: string;
+    class?: string;
+    href?: string;
+}
+export { type ImgProps, type EnhandedImgProps };

package/dist/typography/img/type.js

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

package/dist/typography/layout/Layout.svelte

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

package/dist/typography/layout/Layout.svelte.d.ts

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

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

@@ -0,0 +1,4 @@
+import type { LayoutProps } from "./type";
+import Layout from "./Layout.svelte";
+import { layout } from "./theme";
+export { Layout, layout, type LayoutProps };

package/dist/typography/layout/index.js

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

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

@@ -0,0 +1 @@
+export declare const layout: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "grid grid-cols-1 sm:grid-cols-2", import("tailwind-variants/dist/config").TVConfig<unknown, {} | {}>, {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "grid grid-cols-1 sm:grid-cols-2", import("tailwind-variants/dist/config").TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;

package/dist/typography/layout/theme.js

@@ -0,0 +1,4 @@
+import { tv } from "tailwind-variants";
+export const layout = tv({
+    base: "grid grid-cols-1 sm:grid-cols-2"
+});

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

@@ -0,0 +1,6 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+interface LayoutProps extends HTMLAttributes<HTMLElement> {
+    children: Snippet;
+}
+export { type LayoutProps };

package/dist/typography/layout/type.js

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

package/dist/typography/list/Li.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import { twMerge } from "tailwind-merge";
+  import { getContext } from "svelte";
+  import { type LiProps as Props } from "./index";
+
+  let { children, icon, class: className, ...restProps }: Props = $props();
+
+  const getCtxClass = getContext<() => string>("ctxClass");
+
+  let liCls = $derived(twMerge(getCtxClass(), icon && "flex items-center", className));
+</script>
+
+<li {...restProps} class={liCls}>
+  {@render children()}
+</li>
+
+<!--
+@component
+[Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+## Props
+@props: children: any;
+@props:icon: any;
+@props:class: string;
+-->

package/dist/typography/list/Li.svelte.d.ts

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

package/dist/typography/list/List.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import { setContext } from "svelte";
+  import { type ListProps as Props, list } from "./index";
+
+  let { children, tag = "ul", isContenteditable = false, position = "inside", ctxClass, class: className, ...restProps }: Props = $props();
+
+  let contextClass = $state(ctxClass || "");
+
+  setContext("ctxClass", () => contextClass);
+
+  $effect(() => {
+    contextClass = ctxClass || "";
+  });
+
+  let classList = $derived(list({ position, tag, className }));
+</script>
+
+<svelte:element this={tag} {...restProps} class={classList} contenteditable={isContenteditable}>
+  {@render children()}
+</svelte:element>
+
+<!--
+@component
+[Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+## Props
+@props: children: any;
+@props:tag: any = "ul";
+@props:isContenteditable: any = false;
+@props:position: any = "inside";
+@props:ctxClass: any;
+@props:class: string;
+-->

package/dist/typography/list/List.svelte.d.ts

@@ -0,0 +1,14 @@
+import { type ListProps as Props } from "./index";
+/**
+ * [Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+ * ## Props
+ * @props: children: any;
+ * @props:tag: any = "ul";
+ * @props:isContenteditable: any = false;
+ * @props:position: any = "inside";
+ * @props:ctxClass: any;
+ * @props:class: string;
+ */
+declare const List: import("svelte").Component<Props, {}, "">;
+type List = ReturnType<typeof List>;
+export default List;

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

@@ -0,0 +1,5 @@
+import type { ListProps, LiProps } from "./type";
+import List from "./List.svelte";
+import Li from "./Li.svelte";
+import { list } from "./theme";
+export { List, Li, list, type ListProps, type LiProps };

package/dist/typography/list/index.js

@@ -0,0 +1,4 @@
+import List from "./List.svelte";
+import Li from "./Li.svelte";
+import { list } from "./theme";
+export { List, Li, list };

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

@@ -0,0 +1,71 @@
+export declare const list: import("tailwind-variants").TVReturnType<{
+    tag: {
+        ul: string;
+        dl: string;
+        ol: string;
+    };
+    position: {
+        inside: string;
+        outside: string;
+    };
+}, undefined, "", import("tailwind-variants/dist/config").TVConfig<{
+    tag: {
+        ul: string;
+        dl: string;
+        ol: string;
+    };
+    position: {
+        inside: string;
+        outside: string;
+    };
+}, {
+    tag: {
+        ul: string;
+        dl: string;
+        ol: string;
+    };
+    position: {
+        inside: string;
+        outside: string;
+    };
+}>, {
+    tag: {
+        ul: string;
+        dl: string;
+        ol: string;
+    };
+    position: {
+        inside: string;
+        outside: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    tag: {
+        ul: string;
+        dl: string;
+        ol: string;
+    };
+    position: {
+        inside: string;
+        outside: string;
+    };
+}, undefined, "", import("tailwind-variants/dist/config").TVConfig<{
+    tag: {
+        ul: string;
+        dl: string;
+        ol: string;
+    };
+    position: {
+        inside: string;
+        outside: string;
+    };
+}, {
+    tag: {
+        ul: string;
+        dl: string;
+        ol: string;
+    };
+    position: {
+        inside: string;
+        outside: string;
+    };
+}>, unknown, unknown, undefined>>;

package/dist/typography/list/theme.js

@@ -0,0 +1,19 @@
+import { tv } from "tailwind-variants";
+export const list = tv({
+    base: "",
+    variants: {
+        tag: {
+            ul: "list-disc",
+            dl: "list-none",
+            ol: "list-decimal"
+        },
+        position: {
+            inside: "list-inside",
+            outside: "list-outside"
+        }
+    },
+    defaultVariants: {
+        position: "inside",
+        tag: "ul"
+    }
+});

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

@@ -0,0 +1,17 @@
+import type { Snippet } from "svelte";
+import type { HTMLLiAttributes } from "svelte/elements";
+type TagType = "ul" | "dl" | "ol" | undefined;
+type PositionType = "inside" | "outside" | undefined;
+interface ListProps {
+    children: Snippet;
+    tag?: TagType;
+    position?: PositionType;
+    ctxClass?: string;
+    class?: string;
+    isContenteditable?: boolean;
+}
+interface LiProps extends HTMLLiAttributes {
+    children: Snippet;
+    icon?: boolean;
+}
+export { type ListProps, type LiProps };

package/dist/typography/list/type.js

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

package/dist/typography/mark/Mark.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import { twMerge } from "tailwind-merge";
+  import { type MarkProps as Props, mark } from "./index";
+
+  let { children, class: className, ...restProps }: Props = $props();
+</script>
+
+<mark {...restProps} class={twMerge(mark(), className)}>
+  {@render children()}
+</mark>
+
+<!--
+@component
+[Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+## Props
+@props: children: any;
+@props:class: string;
+-->

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

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

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

@@ -0,0 +1,4 @@
+import type { MarkProps } from "./type";
+import Mark from "./Mark.svelte";
+import { mark } from "./theme";
+export { Mark, mark, type MarkProps };

package/dist/typography/mark/index.js

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

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

@@ -0,0 +1 @@
+export declare const mark: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "text-white dark:bg-blue-500 bg-blue-600 px-2 rounded", import("tailwind-variants/dist/config").TVConfig<unknown, {} | {}>, {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "text-white dark:bg-blue-500 bg-blue-600 px-2 rounded", import("tailwind-variants/dist/config").TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;

package/dist/typography/mark/theme.js

@@ -0,0 +1,4 @@
+import { tv } from "tailwind-variants";
+export const mark = tv({
+    base: "text-white dark:bg-blue-500 bg-blue-600 px-2 rounded"
+});

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

@@ -0,0 +1,8 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+interface MarkProps extends HTMLAttributes<HTMLElement> {
+    children: Snippet;
+    markClass?: string;
+    class?: string;
+}
+export { type MarkProps };

package/dist/typography/mark/type.js

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

package/dist/typography/paragraph/P.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import { type ParagraphProps as Props, paragraph } from "./index";
+
+  let { children, class: className = "text-gray-900 dark:text-white", height = "normal", align = "left", justify = false, italic, firstUpper = false, whitespace = "normal", size = "base", space = "normal", weight = "normal", ...restProps }: Props = $props();
+
+  let classP = $derived(paragraph({ height, size, weight, space, align, justify, italic, firstUpper, whitespace, className }));
+</script>
+
+<p {...restProps} class={classP}>
+  {@render children()}
+</p>
+
+<!--
+@component
+[Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+## Props
+@props: children: any;
+@props:class: string = "text-gray-900 dark:text-white";
+@props:height: any = "normal";
+@props:align: any = "left";
+@props:justify: any = false;
+@props:italic: any;
+@props:firstUpper: any = false;
+@props:whitespace: any = "normal";
+@props:size: any = "base";
+@props:space: any = "normal";
+@props:weight: any = "normal";
+-->

package/dist/typography/paragraph/P.svelte.d.ts

@@ -0,0 +1,19 @@
+import { type ParagraphProps as Props } from "./index";
+/**
+ * [Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+ * ## Props
+ * @props: children: any;
+ * @props:class: string = "text-gray-900 dark:text-white";
+ * @props:height: any = "normal";
+ * @props:align: any = "left";
+ * @props:justify: any = false;
+ * @props:italic: any;
+ * @props:firstUpper: any = false;
+ * @props:whitespace: any = "normal";
+ * @props:size: any = "base";
+ * @props:space: any = "normal";
+ * @props:weight: any = "normal";
+ */
+declare const P: import("svelte").Component<Props, {}, "">;
+type P = ReturnType<typeof P>;
+export default P;

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

@@ -0,0 +1,4 @@
+import type { ParagraphProps } from "./type";
+import P from "./P.svelte";
+import { paragraph } from "./theme";
+export { P, paragraph, type ParagraphProps };

package/dist/typography/paragraph/index.js

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