odj-svelte-ui 0.1.0

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

@@ -0,0 +1,232 @@
+export declare const blockquote: import("tailwind-variants").TVReturnType<{
+    border: {
+        true: string;
+        false: string;
+    };
+    italic: {
+        true: string;
+        false: string;
+    };
+    bg: {
+        true: string;
+        false: string;
+    };
+    alignment: {
+        left: string;
+        center: string;
+        right: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        base: string;
+        lg: string;
+        xl: string;
+        "2xl": string;
+        "3xl": string;
+        "4xl": string;
+        "5xl": string;
+        "6xl": string;
+        "7xl": string;
+        "8xl": string;
+        "9xl": string;
+    };
+}, undefined, "font-semibold text-gray-900 dark:text-white", import("tailwind-variants/dist/config").TVConfig<{
+    border: {
+        true: string;
+        false: string;
+    };
+    italic: {
+        true: string;
+        false: string;
+    };
+    bg: {
+        true: string;
+        false: string;
+    };
+    alignment: {
+        left: string;
+        center: string;
+        right: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        base: string;
+        lg: string;
+        xl: string;
+        "2xl": string;
+        "3xl": string;
+        "4xl": string;
+        "5xl": string;
+        "6xl": string;
+        "7xl": string;
+        "8xl": string;
+        "9xl": string;
+    };
+}, {
+    border: {
+        true: string;
+        false: string;
+    };
+    italic: {
+        true: string;
+        false: string;
+    };
+    bg: {
+        true: string;
+        false: string;
+    };
+    alignment: {
+        left: string;
+        center: string;
+        right: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        base: string;
+        lg: string;
+        xl: string;
+        "2xl": string;
+        "3xl": string;
+        "4xl": string;
+        "5xl": string;
+        "6xl": string;
+        "7xl": string;
+        "8xl": string;
+        "9xl": string;
+    };
+}>, {
+    border: {
+        true: string;
+        false: string;
+    };
+    italic: {
+        true: string;
+        false: string;
+    };
+    bg: {
+        true: string;
+        false: string;
+    };
+    alignment: {
+        left: string;
+        center: string;
+        right: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        base: string;
+        lg: string;
+        xl: string;
+        "2xl": string;
+        "3xl": string;
+        "4xl": string;
+        "5xl": string;
+        "6xl": string;
+        "7xl": string;
+        "8xl": string;
+        "9xl": string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    border: {
+        true: string;
+        false: string;
+    };
+    italic: {
+        true: string;
+        false: string;
+    };
+    bg: {
+        true: string;
+        false: string;
+    };
+    alignment: {
+        left: string;
+        center: string;
+        right: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        base: string;
+        lg: string;
+        xl: string;
+        "2xl": string;
+        "3xl": string;
+        "4xl": string;
+        "5xl": string;
+        "6xl": string;
+        "7xl": string;
+        "8xl": string;
+        "9xl": string;
+    };
+}, undefined, "font-semibold text-gray-900 dark:text-white", import("tailwind-variants/dist/config").TVConfig<{
+    border: {
+        true: string;
+        false: string;
+    };
+    italic: {
+        true: string;
+        false: string;
+    };
+    bg: {
+        true: string;
+        false: string;
+    };
+    alignment: {
+        left: string;
+        center: string;
+        right: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        base: string;
+        lg: string;
+        xl: string;
+        "2xl": string;
+        "3xl": string;
+        "4xl": string;
+        "5xl": string;
+        "6xl": string;
+        "7xl": string;
+        "8xl": string;
+        "9xl": string;
+    };
+}, {
+    border: {
+        true: string;
+        false: string;
+    };
+    italic: {
+        true: string;
+        false: string;
+    };
+    bg: {
+        true: string;
+        false: string;
+    };
+    alignment: {
+        left: string;
+        center: string;
+        right: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        base: string;
+        lg: string;
+        xl: string;
+        "2xl": string;
+        "3xl": string;
+        "4xl": string;
+        "5xl": string;
+        "6xl": string;
+        "7xl": string;
+        "8xl": string;
+        "9xl": string;
+    };
+}>, unknown, unknown, undefined>>;

package/dist/typography/blockquote/theme.js

@@ -0,0 +1,45 @@
+import { tv } from "tailwind-variants";
+export const blockquote = tv({
+    base: "font-semibold text-gray-900 dark:text-white",
+    variants: {
+        border: {
+            true: "border-s-4 border-gray-300 dark:border-gray-500",
+            false: ""
+        },
+        italic: {
+            true: "italic",
+            false: ""
+        },
+        bg: {
+            true: "bg-gray-50 dark:bg-gray-800",
+            false: ""
+        },
+        alignment: {
+            left: "text-left",
+            center: "text-center",
+            right: "text-right"
+        },
+        size: {
+            xs: "text-xs",
+            sm: "text-sm",
+            base: "text-base",
+            lg: "text-lg",
+            xl: "text-xl",
+            "2xl": "text-2xl",
+            "3xl": "text-3xl",
+            "4xl": "text-4xl",
+            "5xl": "text-5xl",
+            "6xl": "text-6xl",
+            "7xl": "text-7xl",
+            "8xl": "text-8xl",
+            "9xl": "text-9xl"
+        }
+    },
+    defaultVariants: {
+        border: false,
+        italic: true,
+        bg: false,
+        alignment: "left",
+        size: "lg"
+    }
+});

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

@@ -0,0 +1,13 @@
+import type { Snippet } from "svelte";
+import type { HTMLBlockquoteAttributes } from "svelte/elements";
+type SizeType = "sm" | "lg" | "xl" | "2xl" | "base" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
+type AlignmentType = "left" | "center" | "right" | undefined;
+interface BlockquoteProps extends HTMLBlockquoteAttributes {
+    children: Snippet;
+    border?: boolean;
+    italic?: boolean;
+    bg?: boolean;
+    alignment?: AlignmentType;
+    size?: SizeType;
+}
+export { type BlockquoteProps };

package/dist/typography/blockquote/type.js

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

package/dist/typography/descriptionlist/DescriptionList.svelte

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

package/dist/typography/descriptionlist/DescriptionList.svelte.d.ts

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

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

@@ -0,0 +1,4 @@
+import type { DescriptionListProps } from "./type";
+import DescriptionList from "./DescriptionList.svelte";
+import { descriptionList } from "./theme";
+export { DescriptionList, descriptionList, type DescriptionListProps };

package/dist/typography/descriptionlist/index.js

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

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

@@ -0,0 +1,36 @@
+export declare const descriptionList: import("tailwind-variants").TVReturnType<{
+    tag: {
+        dt: string;
+        dd: string;
+    };
+}, undefined, undefined, import("tailwind-variants/dist/config").TVConfig<{
+    tag: {
+        dt: string;
+        dd: string;
+    };
+}, {
+    tag: {
+        dt: string;
+        dd: string;
+    };
+}>, {
+    tag: {
+        dt: string;
+        dd: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    tag: {
+        dt: string;
+        dd: string;
+    };
+}, undefined, undefined, import("tailwind-variants/dist/config").TVConfig<{
+    tag: {
+        dt: string;
+        dd: string;
+    };
+}, {
+    tag: {
+        dt: string;
+        dd: string;
+    };
+}>, unknown, unknown, undefined>>;

package/dist/typography/descriptionlist/theme.js

@@ -0,0 +1,12 @@
+import { tv } from "tailwind-variants";
+export const descriptionList = tv({
+    variants: {
+        tag: {
+            dt: "text-gray-500 md:text-lg dark:text-gray-400",
+            dd: "text-lg font-semibold"
+        }
+    },
+    defaultVariants: {
+        tag: "dt"
+    }
+});

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

@@ -0,0 +1,7 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+interface DescriptionListProps extends HTMLAttributes<HTMLElement> {
+    children: Snippet;
+    tag: "dt" | "dd";
+}
+export { type DescriptionListProps };

package/dist/typography/descriptionlist/type.js

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

package/dist/typography/heading/Heading.svelte

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

package/dist/typography/heading/Heading.svelte.d.ts

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

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

@@ -0,0 +1,4 @@
+import type { HeadingProps } from "./type";
+import Heading from "./Heading.svelte";
+import { heading } from "./theme";
+export { Heading, heading, type HeadingProps };

package/dist/typography/heading/index.js

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

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

@@ -0,0 +1,64 @@
+export declare const heading: import("tailwind-variants").TVReturnType<{
+    tag: {
+        h1: string;
+        h2: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        h6: string;
+    };
+}, undefined, "font-bold text-gray-900 dark:text-white", import("tailwind-variants/dist/config").TVConfig<{
+    tag: {
+        h1: string;
+        h2: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        h6: string;
+    };
+}, {
+    tag: {
+        h1: string;
+        h2: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        h6: string;
+    };
+}>, {
+    tag: {
+        h1: string;
+        h2: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        h6: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    tag: {
+        h1: string;
+        h2: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        h6: string;
+    };
+}, undefined, "font-bold text-gray-900 dark:text-white", import("tailwind-variants/dist/config").TVConfig<{
+    tag: {
+        h1: string;
+        h2: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        h6: string;
+    };
+}, {
+    tag: {
+        h1: string;
+        h2: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        h6: string;
+    };
+}>, unknown, unknown, undefined>>;

package/dist/typography/heading/theme.js

@@ -0,0 +1,17 @@
+import { tv } from "tailwind-variants";
+export const heading = tv({
+    base: "font-bold text-gray-900 dark:text-white",
+    variants: {
+        tag: {
+            h1: "text-5xl font-extrabold",
+            h2: "text-4xl",
+            h3: "text-3xl",
+            h4: "text-2xl",
+            h5: "text-xl",
+            h6: "text-lg"
+        }
+    },
+    defaultVariants: {
+        tag: "h1"
+    }
+});

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

@@ -0,0 +1,9 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+type TagType = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | undefined;
+interface HeadingProps extends HTMLAttributes<HTMLElement> {
+    children: Snippet;
+    tag?: TagType;
+    class?: string;
+}
+export { type HeadingProps };

package/dist/typography/heading/type.js

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

package/dist/typography/hr/Hr.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import { getContext } from 'svelte';
+  import { type HrProps as Props, hr } from "./index";
+
+  let { children, divClass, hrClass, innerDivClass, ...restProps }: Props = $props();
+
+  // Get merged theme from context
+  const context = getContext<Record<string, any>>("themeConfig");
+  
+  // Use context theme if available, otherwise fallback to default
+  const usedHr = context?.hr || hr;
+
+  let { base, container, content } = $derived(hr({ withChildren: !!children }));
+</script>
+
+{#if children}
+  <div {...restProps} class={container({ class: divClass })}>
+    <hr class={base({ class: hrClass })} />
+    <div class={content({ class: innerDivClass })}>
+      {@render children()}
+    </div>
+  </div>
+{:else}
+  <hr class={base({ class: hrClass })} {...restProps} />
+{/if}
+
+<!--
+@component
+[Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+## Props
+@props: children: any;
+@props:divClass: any;
+@props:hrClass: any;
+@props:innerDivClass: any;
+-->

package/dist/typography/hr/Hr.svelte.d.ts

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

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

@@ -0,0 +1,4 @@
+import type { HrProps } from "./type";
+import Hr from "./Hr.svelte";
+import { hr } from "./theme";
+export { Hr, hr, type HrProps };

package/dist/typography/hr/index.js

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

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

@@ -0,0 +1,62 @@
+export declare const hr: import("tailwind-variants").TVReturnType<{
+    withChildren: {
+        true: {
+            base: string;
+            container: string;
+        };
+    };
+}, {
+    base: string;
+    container: string;
+    content: string;
+}, undefined, import("tailwind-variants/dist/config").TVConfig<{
+    withChildren: {
+        true: {
+            base: string;
+            container: string;
+        };
+    };
+}, {
+    withChildren: {
+        true: {
+            base: string;
+            container: string;
+        };
+    };
+}>, {
+    withChildren: {
+        true: {
+            base: string;
+            container: string;
+        };
+    };
+}, {
+    base: string;
+    container: string;
+    content: string;
+}, import("tailwind-variants").TVReturnType<{
+    withChildren: {
+        true: {
+            base: string;
+            container: string;
+        };
+    };
+}, {
+    base: string;
+    container: string;
+    content: string;
+}, undefined, import("tailwind-variants/dist/config").TVConfig<{
+    withChildren: {
+        true: {
+            base: string;
+            container: string;
+        };
+    };
+}, {
+    withChildren: {
+        true: {
+            base: string;
+            container: string;
+        };
+    };
+}>, unknown, unknown, undefined>>;

package/dist/typography/hr/theme.js

@@ -0,0 +1,19 @@
+import { tv } from "tailwind-variants";
+export const hr = tv({
+    slots: {
+        base: "h-px my-8 bg-gray-200 border-0 dark:bg-gray-700",
+        container: "inline-flex items-center justify-center w-full",
+        content: "absolute px-4 -translate-x-1/2 rtl:translate-x-1/2 bg-white start-1/2 dark:bg-gray-900"
+    },
+    variants: {
+        withChildren: {
+            true: {
+                base: "w-full",
+                container: "relative"
+            }
+        }
+    },
+    defaultVariants: {
+        withChildren: false
+    }
+});