odj-svelte-ui 0.1.0

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

@@ -0,0 +1,20 @@
+import type { HTMLInputAttributes } from "svelte/elements";
+import type { FormSizeType, ColorName } from "../../types";
+import type { Snippet } from "svelte";
+type InputValue = string | number | string[] | undefined;
+interface InputProps<T extends InputValue = string> extends Omit<HTMLInputAttributes, "size" | "children" | "value"> {
+    children?: Snippet<[{
+        class: string;
+    } & Omit<InputProps<T>, "children" | "left" | "right" | "size">]>;
+    left?: Snippet;
+    right?: Snippet;
+    size?: FormSizeType;
+    value?: T;
+    clearable?: boolean;
+    color?: ColorName | "default" | "tinted";
+    classLeft?: string;
+    classRight?: string;
+    class?: string;
+    divClass?: string;
+}
+export { type InputProps, type InputValue };

package/dist/forms/input/type.js

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

package/dist/forms/input-addon/InputAddon.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+  import type { SizeType } from "../../types";
+  import { twMerge } from "tailwind-merge";
+  import { getContext } from "svelte";
+  import { clampSize } from "../..";
+  import { type InputAddonProps as Props } from ".";
+
+  let { children, class: className, size, ...restProps }: Props = $props();
+  let background: boolean = getContext("background");
+  let group: { size: SizeType } = getContext("group");
+
+  const borderClasses = {
+    base: "border-gray-300 dark:border-gray-600",
+    tinted: "border-gray-300 dark:border-gray-500"
+  };
+
+  const darkBgClasses = {
+    base: "dark:bg-gray-600 dark:text-gray-400",
+    tinted: "dark:bg-gray-500 dark:text-gray-300"
+  };
+
+  const divider = {
+    base: "dark:border-e-gray-700 dark:last:border-e-gray-600",
+    tinted: "dark:border-e-gray-600 dark:last:border-e-gray-500"
+  };
+
+  const textSizes = { sm: "sm:text-xs", md: "text-sm", lg: "sm:text-base" };
+  const prefixPadding = { sm: "px-2", md: "px-3", lg: "px-4" };
+
+  // size: explicit, inherited, default
+  let _size = size || clampSize(group?.size) || "md";
+
+  let divClass: string = twMerge(textSizes[_size], prefixPadding[_size], "text-gray-500 bg-gray-200", background ? darkBgClasses.tinted : darkBgClasses.base, background ? divider.tinted : divider.base, background ? borderClasses["tinted"] : borderClasses["base"], "inline-flex items-center border", group && "[&:not(:first-child)]:-ms-px", "first:rounded-s-lg last:rounded-e-lg", className);
+</script>
+
+<div {...restProps} class={divClass}>
+  {@render children()}
+</div>
+
+<!--
+@component
+[Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+## Props
+@props: children: any;
+@props:class: string;
+@props:size: any;
+-->

package/dist/forms/input-addon/InputAddon.svelte.d.ts

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

package/dist/forms/input-addon/index.d.ts

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

package/dist/forms/input-addon/index.js

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

package/dist/forms/input-addon/type.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+interface InputAddonProps extends HTMLAttributes<HTMLDivElement> {
+    children: Snippet;
+    class?: string;
+    size?: "sm" | "md" | "lg" | undefined;
+}
+export { type InputAddonProps };

package/dist/forms/input-addon/type.js

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

package/dist/forms/label/Label.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import { type LabelProps as Props, label } from ".";
+
+  let { children, color = "gray", show = true, class: className, ...restProps }: Props = $props();
+
+  const base = $derived(label({ color, className }));
+</script>
+
+{#if show}
+  <label {...restProps} class={base}>
+    {@render children()}
+  </label>
+{:else}
+  {@render children()}
+{/if}
+
+<!--
+@component
+[Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+## Props
+@props: children: any;
+@props:color: any = "gray";
+@props:show: any = true;
+@props:class: string;
+-->

package/dist/forms/label/Label.svelte.d.ts

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

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

@@ -0,0 +1,4 @@
+import type { LabelProps } from "./type";
+import Label from "./Label.svelte";
+import { label } from "./theme";
+export { Label, label, type LabelProps };

package/dist/forms/label/index.js

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

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

@@ -0,0 +1,169 @@
+export declare const label: import("tailwind-variants").TVReturnType<{
+    color: {
+        disabled: string;
+        primary: string;
+        secondary: string;
+        green: string;
+        emerald: string;
+        red: string;
+        blue: string;
+        yellow: string;
+        orange: string;
+        gray: string;
+        teal: string;
+        cyan: string;
+        sky: string;
+        indigo: string;
+        lime: string;
+        amber: string;
+        violet: string;
+        purple: string;
+        fuchsia: string;
+        pink: string;
+        rose: string;
+    };
+}, undefined, "text-sm rtl:text-right font-medium block space-y-1", import("tailwind-variants/dist/config").TVConfig<{
+    color: {
+        disabled: string;
+        primary: string;
+        secondary: string;
+        green: string;
+        emerald: string;
+        red: string;
+        blue: string;
+        yellow: string;
+        orange: string;
+        gray: string;
+        teal: string;
+        cyan: string;
+        sky: string;
+        indigo: string;
+        lime: string;
+        amber: string;
+        violet: string;
+        purple: string;
+        fuchsia: string;
+        pink: string;
+        rose: string;
+    };
+}, {
+    color: {
+        disabled: string;
+        primary: string;
+        secondary: string;
+        green: string;
+        emerald: string;
+        red: string;
+        blue: string;
+        yellow: string;
+        orange: string;
+        gray: string;
+        teal: string;
+        cyan: string;
+        sky: string;
+        indigo: string;
+        lime: string;
+        amber: string;
+        violet: string;
+        purple: string;
+        fuchsia: string;
+        pink: string;
+        rose: string;
+    };
+}>, {
+    color: {
+        disabled: string;
+        primary: string;
+        secondary: string;
+        green: string;
+        emerald: string;
+        red: string;
+        blue: string;
+        yellow: string;
+        orange: string;
+        gray: string;
+        teal: string;
+        cyan: string;
+        sky: string;
+        indigo: string;
+        lime: string;
+        amber: string;
+        violet: string;
+        purple: string;
+        fuchsia: string;
+        pink: string;
+        rose: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    color: {
+        disabled: string;
+        primary: string;
+        secondary: string;
+        green: string;
+        emerald: string;
+        red: string;
+        blue: string;
+        yellow: string;
+        orange: string;
+        gray: string;
+        teal: string;
+        cyan: string;
+        sky: string;
+        indigo: string;
+        lime: string;
+        amber: string;
+        violet: string;
+        purple: string;
+        fuchsia: string;
+        pink: string;
+        rose: string;
+    };
+}, undefined, "text-sm rtl:text-right font-medium block space-y-1", import("tailwind-variants/dist/config").TVConfig<{
+    color: {
+        disabled: string;
+        primary: string;
+        secondary: string;
+        green: string;
+        emerald: string;
+        red: string;
+        blue: string;
+        yellow: string;
+        orange: string;
+        gray: string;
+        teal: string;
+        cyan: string;
+        sky: string;
+        indigo: string;
+        lime: string;
+        amber: string;
+        violet: string;
+        purple: string;
+        fuchsia: string;
+        pink: string;
+        rose: string;
+    };
+}, {
+    color: {
+        disabled: string;
+        primary: string;
+        secondary: string;
+        green: string;
+        emerald: string;
+        red: string;
+        blue: string;
+        yellow: string;
+        orange: string;
+        gray: string;
+        teal: string;
+        cyan: string;
+        sky: string;
+        indigo: string;
+        lime: string;
+        amber: string;
+        violet: string;
+        purple: string;
+        fuchsia: string;
+        pink: string;
+        rose: string;
+    };
+}>, unknown, unknown, undefined>>;

package/dist/forms/label/theme.js

@@ -0,0 +1,29 @@
+import { tv } from "tailwind-variants";
+export const label = tv({
+    base: "text-sm rtl:text-right font-medium block space-y-1",
+    variants: {
+        color: {
+            disabled: "text-light-surface-500 dark:text-dark-surface-500",
+            primary: "text-primary-700 dark:text-primary-500",
+            secondary: "text-secondary-700 dark:text-secondary-500",
+            green: "text-green-700 dark:text-green-500",
+            emerald: "text-emerald-700 dark:text-emerald-500",
+            red: "text-red-700 dark:text-red-500",
+            blue: "text-blue-700 dark:text-blue-500",
+            yellow: "text-yellow-700 dark:text-yellow-500",
+            orange: "text-orange-700 dark:text-orange-500",
+            gray: "text-gray-700 dark:text-gray-200",
+            teal: "text-teal-700 dark:text-teal-500",
+            cyan: "text-cyan-700 dark:text-cyan-500",
+            sky: "text-sky-700 dark:text-sky-500",
+            indigo: "text-indigo-700 dark:text-indigo-500",
+            lime: "text-lime-700 dark:text-lime-500",
+            amber: "text-amber-700 dark:text-amber-500",
+            violet: "text-violet-700 dark:text-violet-500",
+            purple: "text-purple-700 dark:text-purple-500",
+            fuchsia: "text-fuchsia-700 dark:text-fuchsia-500",
+            pink: "text-pink-700 dark:text-pink-500",
+            rose: "text-rose-700 dark:text-rose-500"
+        }
+    }
+});

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

@@ -0,0 +1,11 @@
+import type { Snippet } from "svelte";
+import type { HTMLLabelAttributes } from "svelte/elements";
+import { type ColorName } from "../../types";
+interface LabelProps extends HTMLLabelAttributes {
+    children: Snippet;
+    color?: ColorName | "disabled";
+    show?: boolean;
+    class?: string;
+    for?: string;
+}
+export { type LabelProps };

package/dist/forms/label/type.js

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

package/dist/forms/radio/Radio.svelte

@@ -0,0 +1,21 @@
+<script lang="ts" generics="T">
+  import { getContext } from "svelte";
+  import Label from "../label/Label.svelte";
+  import { type RadioProps as Props, radio } from ".";
+
+  let { children, aria_describedby, labelClass, color = "primary", group = $bindable<T>(), value = $bindable<T>(), inputClass, custom = false, ...restProps }: Props<T> = $props();
+
+  const { input, label } = $derived(radio({ color, custom, tinted: !!getContext("background") }));
+</script>
+
+<Label class={label({ class: labelClass })}>
+  <input type="radio" bind:group {value} aria-describedby={aria_describedby} {...restProps} class={input({ class: inputClass })} />
+  {@render children()}
+</Label>
+
+<!--
+@component
+[Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+## Props
+@props: 
+-->

package/dist/forms/radio/Radio.svelte.d.ts

@@ -0,0 +1,23 @@
+import { type RadioProps as Props } from ".";
+declare class __sveltets_Render<T> {
+    props(): Props<T>;
+    events(): {};
+    slots(): {};
+    bindings(): "group" | "value";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+/**
+ * [Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+ * ## Props
+ * @props:
+ */
+declare const Radio: $$IsomorphicComponent;
+type Radio<T> = InstanceType<typeof Radio<T>>;
+export default Radio;

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

@@ -0,0 +1,4 @@
+import type { RadioProps, RadioColorType } from "./type";
+import Radio from "./Radio.svelte";
+import { radio } from "./theme";
+export { Radio, radio, type RadioProps, type RadioColorType };

package/dist/forms/radio/index.js

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