odj-svelte-ui 0.1.0

package/dist/forms/select/theme.d.ts

@@ -0,0 +1,71 @@
+export declare const select: import("tailwind-variants").TVReturnType<{
+    underline: {
+        true: string;
+        false: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, "block w-full", import("tailwind-variants/dist/config").TVConfig<{
+    underline: {
+        true: string;
+        false: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, {
+    underline: {
+        true: string;
+        false: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}>, {
+    underline: {
+        true: string;
+        false: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    underline: {
+        true: string;
+        false: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, "block w-full", import("tailwind-variants/dist/config").TVConfig<{
+    underline: {
+        true: string;
+        false: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, {
+    underline: {
+        true: string;
+        false: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}>, unknown, unknown, undefined>>;

package/dist/forms/select/theme.js

@@ -0,0 +1,20 @@
+import { tv } from "tailwind-variants";
+// block w-full disabled:cursor-not-allowed disabled:opacity-50 rtl:text-right text-sm p-2.5 border border-light-surface-300 dark:border-dark-surface-600 focus:border-primary-500 focus:ring-primary-500 dark:focus:border-primary-500 dark:focus:ring-primary-500 bg-light-surface-50 text-light-surface-900 dark:bg-dark-surface-700 dark:text-white dark:placeholder-dark-surface-400 outline-none focus:ring-1 rounded-lg
+export const select = tv({
+    base: "block w-full",
+    variants: {
+        underline: {
+            true: "text-light-surface-500 bg-transparent border-0 border-b-2 border-light-surface-200 appearance-none dark:text-dark-surface-400 dark:border-dark-surface-700 focus:outline-none focus:ring-0 focus:border-light-surface-200 peer !px-0",
+            false: "text-light-surface-900 bg-light-surface-50 border border-light-surface-300 rounded-lg focus:ring-primary-500 focus:border-primary-500 dark:bg-dark-surface-700 dark:border-dark-surface-600 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500 dark:placeholder-dark-surface-400 required:invalid:text-dark-surface-400 outline-none focus:ring-1"
+        },
+        size: {
+            sm: "text-sm p-2",
+            md: "text-sm p-2.5",
+            lg: "text-base py-3 px-4"
+        }
+    },
+    defaultVariants: {
+        underline: false,
+        size: "md"
+    }
+});

package/dist/forms/select/type.d.ts

@@ -0,0 +1,24 @@
+import type { Snippet } from "svelte";
+import type { HTMLSelectAttributes, HTMLAttributes } from "svelte/elements";
+type SelectSize = "sm" | "md" | "lg";
+type SelectOptionType<T> = {
+    name: string | number;
+    value: T;
+};
+interface SelectProps<T> extends Omit<HTMLSelectAttributes, "size"> {
+    children?: Snippet;
+    items?: SelectOptionType<T>[];
+    underline?: boolean;
+    size?: SelectSize;
+    placeholder?: string;
+}
+interface MultiSelectProps<T> extends HTMLAttributes<HTMLDivElement> {
+    children?: Snippet;
+    items?: SelectOptionType<T>[];
+    value?: T[];
+    size?: SelectSize;
+    dropdownClass?: string;
+    placeholder?: string;
+    change?: (event: Event) => void;
+}
+export { type SelectProps, type SelectOptionType, type MultiSelectProps, type SelectSize };

package/dist/forms/select/type.js

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

package/dist/forms/textarea/Textarea.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+  import { type TextareaProps as Props, textarea } from ".";
+
+  let { header, footer, value = $bindable(), divClass, innerClass, headerClass, footerClass, disabled, class: className, cols, ...restProps }: Props = $props();
+
+  let hasHeader = !!header;
+  let hasFooter = !!footer;
+  let wrapped: boolean = $state(false);
+  if (header || footer) {
+    wrapped = true;
+  } else {
+    wrapped = false;
+  }
+
+  const { base, wrapper, innerWrapper, headerCls, footerCls } = $derived(textarea({ wrapped, hasHeader, hasFooter, cols: !!cols }));
+  // $inspect('wrapped: ', wrapped);
+</script>
+
+<div class={wrapper({ class: divClass })}>
+  {#if header}
+    <div class={headerCls({ class: headerClass })}>
+      {@render header()}
+    </div>
+  {/if}
+  <div class={innerWrapper({ class: innerClass })}>
+    <textarea bind:value {disabled} {...restProps} class={base({ className })}></textarea>
+  </div>
+  {#if footer}
+    <div class={footerCls({ class: footerClass })}>
+      {@render footer()}
+    </div>
+  {/if}
+</div>
+
+<!--
+@component
+[Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+## Props
+@props: header: any;
+@props:footer: any;
+@props:value: any = $bindable();
+@props:divClass: any;
+@props:innerClass: any;
+@props:headerClass: any;
+@props:footerClass: any;
+@props:disabled: any;
+@props:class: string;
+@props:cols: any;
+-->

package/dist/forms/textarea/Textarea.svelte.d.ts

@@ -0,0 +1,18 @@
+import { type TextareaProps as Props } from ".";
+/**
+ * [Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+ * ## Props
+ * @props: header: any;
+ * @props:footer: any;
+ * @props:value: any = $bindable();
+ * @props:divClass: any;
+ * @props:innerClass: any;
+ * @props:headerClass: any;
+ * @props:footerClass: any;
+ * @props:disabled: any;
+ * @props:class: string;
+ * @props:cols: any;
+ */
+declare const Textarea: import("svelte").Component<Props, {}, "value">;
+type Textarea = ReturnType<typeof Textarea>;
+export default Textarea;

package/dist/forms/textarea/index.d.ts

@@ -0,0 +1,4 @@
+import type { TextareaProps } from "./type";
+import Textarea from "./Textarea.svelte";
+import { textarea } from "./theme";
+export { Textarea, type TextareaProps, textarea };

package/dist/forms/textarea/index.js

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

package/dist/forms/textarea/theme.d.ts

@@ -0,0 +1,250 @@
+export declare const textarea: import("tailwind-variants").TVReturnType<{
+    cols: {
+        false: {
+            base: string;
+            wrapper: string;
+        };
+    };
+    wrapped: {
+        false: {
+            base: string;
+        };
+        true: {
+            base: string;
+            wrapper: string;
+            innerWrapper: string;
+        };
+    };
+    hasHeader: {
+        true: {
+            headerCls: string;
+        };
+        false: {
+            innerWrapper: string;
+        };
+    };
+    hasFooter: {
+        true: {
+            footerCls: string;
+        };
+        false: {
+            innerWrapper: string;
+        };
+    };
+}, {
+    base: string;
+    wrapper: string;
+    innerWrapper: string;
+    headerCls: string;
+    footerCls: string;
+}, undefined, import("tailwind-variants/dist/config").TVConfig<{
+    cols: {
+        false: {
+            base: string;
+            wrapper: string;
+        };
+    };
+    wrapped: {
+        false: {
+            base: string;
+        };
+        true: {
+            base: string;
+            wrapper: string;
+            innerWrapper: string;
+        };
+    };
+    hasHeader: {
+        true: {
+            headerCls: string;
+        };
+        false: {
+            innerWrapper: string;
+        };
+    };
+    hasFooter: {
+        true: {
+            footerCls: string;
+        };
+        false: {
+            innerWrapper: string;
+        };
+    };
+}, {
+    cols: {
+        false: {
+            base: string;
+            wrapper: string;
+        };
+    };
+    wrapped: {
+        false: {
+            base: string;
+        };
+        true: {
+            base: string;
+            wrapper: string;
+            innerWrapper: string;
+        };
+    };
+    hasHeader: {
+        true: {
+            headerCls: string;
+        };
+        false: {
+            innerWrapper: string;
+        };
+    };
+    hasFooter: {
+        true: {
+            footerCls: string;
+        };
+        false: {
+            innerWrapper: string;
+        };
+    };
+}>, {
+    cols: {
+        false: {
+            base: string;
+            wrapper: string;
+        };
+    };
+    wrapped: {
+        false: {
+            base: string;
+        };
+        true: {
+            base: string;
+            wrapper: string;
+            innerWrapper: string;
+        };
+    };
+    hasHeader: {
+        true: {
+            headerCls: string;
+        };
+        false: {
+            innerWrapper: string;
+        };
+    };
+    hasFooter: {
+        true: {
+            footerCls: string;
+        };
+        false: {
+            innerWrapper: string;
+        };
+    };
+}, {
+    base: string;
+    wrapper: string;
+    innerWrapper: string;
+    headerCls: string;
+    footerCls: string;
+}, import("tailwind-variants").TVReturnType<{
+    cols: {
+        false: {
+            base: string;
+            wrapper: string;
+        };
+    };
+    wrapped: {
+        false: {
+            base: string;
+        };
+        true: {
+            base: string;
+            wrapper: string;
+            innerWrapper: string;
+        };
+    };
+    hasHeader: {
+        true: {
+            headerCls: string;
+        };
+        false: {
+            innerWrapper: string;
+        };
+    };
+    hasFooter: {
+        true: {
+            footerCls: string;
+        };
+        false: {
+            innerWrapper: string;
+        };
+    };
+}, {
+    base: string;
+    wrapper: string;
+    innerWrapper: string;
+    headerCls: string;
+    footerCls: string;
+}, undefined, import("tailwind-variants/dist/config").TVConfig<{
+    cols: {
+        false: {
+            base: string;
+            wrapper: string;
+        };
+    };
+    wrapped: {
+        false: {
+            base: string;
+        };
+        true: {
+            base: string;
+            wrapper: string;
+            innerWrapper: string;
+        };
+    };
+    hasHeader: {
+        true: {
+            headerCls: string;
+        };
+        false: {
+            innerWrapper: string;
+        };
+    };
+    hasFooter: {
+        true: {
+            footerCls: string;
+        };
+        false: {
+            innerWrapper: string;
+        };
+    };
+}, {
+    cols: {
+        false: {
+            base: string;
+            wrapper: string;
+        };
+    };
+    wrapped: {
+        false: {
+            base: string;
+        };
+        true: {
+            base: string;
+            wrapper: string;
+            innerWrapper: string;
+        };
+    };
+    hasHeader: {
+        true: {
+            headerCls: string;
+        };
+        false: {
+            innerWrapper: string;
+        };
+    };
+    hasFooter: {
+        true: {
+            footerCls: string;
+        };
+        false: {
+            innerWrapper: string;
+        };
+    };
+}>, unknown, unknown, undefined>>;

package/dist/forms/textarea/theme.js

@@ -0,0 +1,44 @@
+import { tv } from "tailwind-variants";
+export const textarea = tv({
+    slots: {
+        base: "block text-sm bg-inherit dark:bg-inherit focus:outline-none disabled:cursor-not-allowed disabled:opacity-50",
+        wrapper: "",
+        innerWrapper: "",
+        headerCls: "py-2 px-3 border-light-surface-200 dark:border-dark-surface-500",
+        footerCls: "py-2 px-3 border-light-surface-200 dark:border-dark-surface-500"
+    },
+    variants: {
+        cols: {
+            false: {
+                base: "w-full",
+                wrapper: "w-full"
+            }
+        },
+        wrapped: {
+            false: {
+                base: "text-sm p-2.5 border border-light-surface-300 dark:border-dark-surface-600 focus:border-primary-500 focus:ring-primary-500 dark:focus:border-primary-500 dark:focus:ring-primary-500 bg-light-surface-50 text-light-surface-900 dark:bg-dark-surface-700 dark:text-white dark:placeholder-dark-surface-400 focus:ring-1 rounded-lg"
+            },
+            true: {
+                base: "focus:ring-0 border-0 px-0",
+                wrapper: "rounded-lg bg-light-surface-50 dark:bg-dark-surface-600 text-light-surface-900 dark:placeholder-light-surface-400 dark:text-white border-light-surface-300 dark:border-dark-surface-600",
+                innerWrapper: "py-2 px-4 bg-white dark:bg-dark-surface-800"
+            }
+        },
+        hasHeader: {
+            true: {
+                headerCls: "border-b"
+            },
+            false: {
+                innerWrapper: "rounded-t-lg"
+            }
+        },
+        hasFooter: {
+            true: {
+                footerCls: "border-t"
+            },
+            false: {
+                innerWrapper: "rounded-b-lg"
+            }
+        }
+    }
+});

package/dist/forms/textarea/type.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from "svelte";
+import type { HTMLTextareaAttributes } from "svelte/elements";
+interface TextareaProps extends HTMLTextareaAttributes {
+    header?: Snippet;
+    footer?: Snippet;
+    value?: string;
+    wrapped?: boolean;
+    divClass?: string | null;
+    innerClass?: string;
+    headerClass?: string;
+    footerClass?: string;
+    cols?: number;
+}
+export { type TextareaProps };

package/dist/forms/textarea/type.js

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

package/dist/forms/toggle/Toggle.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  import { Label } from "../label";
+  import { type ToggleProps as Props, toggle } from "./index";
+
+  let { children, toggleSize = "default", value, checked = $bindable(), disabled, color = "primary", aria_describedby, labelClass, inputClass, spanClass, leftLabel, ...restProps }: Props = $props();
+
+  const { input, label, span } = $derived(toggle({ color, checked, size: toggleSize, disabled }));
+</script>
+
+<Label class={label({ class: labelClass })}>
+  {#if leftLabel}
+    {@render leftLabel()}
+  {/if}
+  <input type="checkbox" bind:checked {value} aria-describedby={aria_describedby} {...restProps} {disabled} class={input({ class: inputClass })} />
+  <span class={span({ class: spanClass })}></span>
+  {#if children}
+    {@render children()}
+  {/if}
+</Label>
+
+<!--
+@component
+[Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+## Props
+@props: children: any;
+@props:toggleSize: any = "default";
+@props:value: any;
+@props:checked: any = $bindable();
+@props:disabled: any;
+@props:color: any = "primary";
+@props:aria_describedby: any;
+@props:labelClass: any;
+@props:inputClass: any;
+@props:spanClass: any;
+@props:leftLabel: any;
+-->

package/dist/forms/toggle/Toggle.svelte.d.ts

@@ -0,0 +1,19 @@
+import { type ToggleProps as Props } from "./index";
+/**
+ * [Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+ * ## Props
+ * @props: children: any;
+ * @props:toggleSize: any = "default";
+ * @props:value: any;
+ * @props:checked: any = $bindable();
+ * @props:disabled: any;
+ * @props:color: any = "primary";
+ * @props:aria_describedby: any;
+ * @props:labelClass: any;
+ * @props:inputClass: any;
+ * @props:spanClass: any;
+ * @props:leftLabel: any;
+ */
+declare const Toggle: import("svelte").Component<Props, {}, "checked">;
+type Toggle = ReturnType<typeof Toggle>;
+export default Toggle;

package/dist/forms/toggle/index.d.ts

@@ -0,0 +1,4 @@
+import type { ToggleProps, ToggleColor } from "./type";
+import Toggle from "./Toggle.svelte";
+import { toggle } from "./theme";
+export { Toggle, toggle, type ToggleProps, type ToggleColor };

package/dist/forms/toggle/index.js

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