odj-svelte-ui 0.1.0

package/dist/elements/forms/Input.svelte

@@ -0,0 +1,83 @@
+<script context="module" lang="ts">
+  import type { SizeType, FormSizeType } from '../types';
+  export function clampSize(s: SizeType) {
+    return s && s === 'xs' ? 'sm' : s === 'xl' ? 'lg' : s;
+  }
+</script>
+
+<script lang="ts">
+  import Wrapper from '../utils/Wrapper.svelte';
+  import { twMerge } from 'tailwind-merge';
+  import { getContext } from 'svelte';
+  import type { InputType } from '../types';
+
+  export let type: InputType = 'text';
+  export let value: any = undefined;
+  export let size: FormSizeType | undefined = undefined;
+  export let defaultClass: string = 'block w-full disabled:cursor-not-allowed disabled:opacity-50';
+  export let color: 'base' | 'green' | 'red' = 'base';
+  export let floatClass: string = 'flex absolute inset-y-0 items-center text-neutral-500 dark:text-neutral-400';
+
+  const borderClasses = {
+    base: 'border-neutral-300 dark:border-neutral-600',
+    tinted: 'border-neutral-300 dark:border-neutral-500',
+    green: 'border-green-500 dark:border-green-400',
+    red: 'border-red-500 dark:border-red-400'
+  };
+
+  const ringClasses = {
+    base: 'focus:border-primary-500 focus:ring-primary-500 dark:focus:border-primary-500 dark:focus:ring-primary-500',
+    green: 'focus:ring-green-500 focus:border-green-500 dark:focus:border-green-500 dark:focus:ring-green-500',
+    red: 'focus:ring-red-500 focus:border-red-500 dark:focus:ring-red-500 dark:focus:border-red-500'
+  };
+
+  const colorClasses = {
+    base: 'bg-neutral-50 text-neutral-900 dark:bg-neutral-700 dark:text-white dark:placeholder-neutral-400',
+    tinted: 'bg-neutral-50 text-neutral-900 dark:bg-neutral-600 dark:text-white dark:placeholder-neutral-400',
+    green: 'bg-green-50 text-green-900 placeholder-green-700 dark:text-green-400 dark:placeholder-green-500 dark:bg-neutral-700',
+    red: 'bg-red-50 text-red-900 placeholder-red-700 dark:text-red-500 dark:placeholder-red-500 dark:bg-neutral-700'
+  };
+
+  // tinted if put in component having its own background
+  let background: boolean = getContext('background');
+
+  let group: { size: SizeType } = getContext('group');
+
+  const textSizes = { sm: 'sm:text-xs', md: 'text-sm', lg: 'sm:text-base' };
+  const leftPadding = { sm: 'pl-9', md: 'pl-10', lg: 'pl-11' };
+  const rightPadding = { sm: 'pr-9', md: 'pr-10', lg: 'pr-11' };
+  const inputPadding = { sm: 'p-2', md: 'p-2.5', lg: 'p-3' };
+
+  $: _size = size || clampSize(group?.size) || 'md';
+  let inputClass: string;
+  $: {
+    const _color = color === 'base' && background ? 'tinted' : color;
+    inputClass = twMerge([defaultClass, ($$slots.left && leftPadding[_size]) || ($$slots.right && rightPadding[_size]) || inputPadding[_size], ringClasses[color], colorClasses[_color], borderClasses[_color], textSizes[_size], group || 'rounded-lg', group && 'first:rounded-l-lg last:rounded-r-lg', group && 'border-l-0 first:border-l last:border-r', $$props.class]);
+  }
+</script>
+
+<Wrapper class="relative w-full" show={$$slots.left || $$slots.right}>
+  {#if $$slots.left}
+    <div class="{twMerge(floatClass, $$props.classLeft)} left-0 pl-2.5 pointer-events-none">
+      <slot name="left" />
+    </div>
+  {/if}
+  <slot props={{ ...$$restProps, class: inputClass }}>
+    <input {...$$restProps} bind:value on:blur on:change on:click on:contextmenu on:focus on:keydown on:keypress on:keyup on:mouseover on:mouseenter on:mouseleave on:paste on:input {...{ type }} class={inputClass} />
+  </slot>
+  {#if $$slots.right}
+    <div class="{twMerge(floatClass, $$props.classRight)} right-0 pr-2.5"><slot name="right" /></div>
+  {/if}
+</Wrapper>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let type: InputType = 'text';
+@prop export let value: any = undefined;
+@prop export let size: FormSizeType | undefined = undefined;
+@prop export let defaultClass: string = 'block w-full disabled:cursor-not-allowed disabled:opacity-50';
+@prop export let color: 'base' | 'green' | 'red' = 'base';
+@prop export let floatClass: string = 'flex absolute inset-y-0 items-center text-neutral-500 dark:text-neutral-400';
+-->

package/dist/elements/forms/Input.svelte.d.ts

@@ -0,0 +1,74 @@
+import type { SizeType, FormSizeType } from '../types';
+export declare function clampSize(s: SizeType): "sm" | "md" | "lg";
+import type { InputType } from '../types';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @prop export let type: InputType = 'text';
+ * @prop export let value: any = undefined;
+ * @prop export let size: FormSizeType | undefined = undefined;
+ * @prop export let defaultClass: string = 'block w-full disabled:cursor-not-allowed disabled:opacity-50';
+ * @prop export let color: 'base' | 'green' | 'red' = 'base';
+ * @prop export let floatClass: string = 'flex absolute inset-y-0 items-center text-neutral-500 dark:text-neutral-400';
+ */
+declare const Input: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    [x: string]: any;
+    type?: InputType | undefined;
+    value?: any;
+    size?: FormSizeType | undefined;
+    defaultClass?: string | undefined;
+    color?: "base" | "green" | "red" | undefined;
+    floatClass?: string | undefined;
+}, {
+    left: {};
+    default: {
+        props: {
+            class: string;
+        };
+    };
+    right: {};
+}>, {
+    blur: FocusEvent;
+    change: Event;
+    click: MouseEvent;
+    contextmenu: MouseEvent;
+    focus: FocusEvent;
+    keydown: KeyboardEvent;
+    keypress: KeyboardEvent;
+    keyup: KeyboardEvent;
+    mouseover: MouseEvent;
+    mouseenter: MouseEvent;
+    mouseleave: MouseEvent;
+    paste: ClipboardEvent;
+    input: Event;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    left: {};
+    default: {
+        props: {
+            class: string;
+        };
+    };
+    right: {};
+}, {}, string>;
+type Input = InstanceType<typeof Input>;
+export default Input;

package/dist/elements/forms/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 './Input.svelte';
+
+  export let size: 'sm' | 'md' | 'lg' | undefined = undefined;
+
+  // tinted if put in component having its own background
+  let background: boolean = getContext('background');
+
+  let group: { size: SizeType } = getContext('group');
+
+  const borderClasses = {
+    base: 'border-neutral-300 dark:border-neutral-600',
+    tinted: 'border-neutral-300 dark:border-neutral-500'
+  };
+
+  const darkBgClasses = {
+    base: 'dark:bg-neutral-600 dark:text-neutral-400',
+    tinted: 'dark:bg-neutral-500 dark:text-neutral-300'
+  };
+
+  const divider = {
+    base: 'dark:border-r-neutral-700 dark:last:border-r-neutral-600',
+    tinted: 'dark:border-r-neutral-600 dark:last:border-r-neutral-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
+  $: _size = size || clampSize(group?.size) || 'md';
+
+  $: divClass = twMerge(textSizes[_size], prefixPadding[_size], background ? borderClasses['tinted'] : borderClasses['base'], 'text-neutral-500 bg-neutral-200', background ? darkBgClasses.tinted : darkBgClasses.base, background ? divider.tinted : divider.base, 'inline-flex items-center border-t border-b first:border-l border-r', 'first:rounded-l-lg last:rounded-r-lg', $$props.class);
+</script>
+
+<div {...$$restProps} class={divClass}>
+  <slot />
+</div>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let size: 'sm' | 'md' | 'lg' | undefined = undefined;
+-->

package/dist/elements/forms/InputAddon.svelte.d.ts

@@ -0,0 +1,35 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @prop export let size: 'sm' | 'md' | 'lg' | undefined = undefined;
+ */
+declare const InputAddon: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    [x: string]: any;
+    size?: "sm" | "md" | "lg" | undefined | undefined;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type InputAddon = InstanceType<typeof InputAddon>;
+export default InputAddon;

package/dist/elements/forms/Label.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+
+  export let color: 'neutral' | 'green' | 'red' | 'disabled' = 'neutral';
+  export let defaultClass: string = 'text-sm font-medium block';
+  export let show: boolean = true;
+
+  let node: HTMLLabelElement;
+
+  const colorClasses = {
+    neutral: 'text-neutral-900 dark:text-neutral-300',
+    green: 'text-green-700 dark:text-green-500',
+    red: 'text-red-700 dark:text-red-500',
+    disabled: 'text-neutral-400 dark:text-neutral-500'
+  };
+
+  // function checkDisabled(node: HTMLLabelElement) {
+  $: {
+    const control: HTMLInputElement = node?.control as HTMLInputElement;
+    color = control?.disabled ? 'disabled' : color;
+  }
+
+  $: labelClass = twMerge(defaultClass, colorClasses[color], $$props.class);
+</script>
+
+{#if show}
+  <!-- svelte-ignore a11y-label-has-associated-control -->
+  <label bind:this={node} {...$$restProps} class={labelClass} on:click><slot /></label>
+{:else}
+  <slot />
+{/if}
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let color: 'neutral' | 'green' | 'red' | 'disabled' = 'neutral';
+@prop export let defaultClass: string = 'text-sm font-medium block';
+@prop export let show: boolean = true;
+-->

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

@@ -0,0 +1,41 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @prop export let color: 'neutral' | 'green' | 'red' | 'disabled' = 'neutral';
+ * @prop export let defaultClass: string = 'text-sm font-medium block';
+ * @prop export let show: boolean = true;
+ */
+declare const Label: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    [x: string]: any;
+    color?: "neutral" | "green" | "red" | "disabled" | undefined;
+    defaultClass?: string | undefined;
+    show?: boolean | undefined;
+}, {
+    default: {};
+}>, {
+    click: MouseEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type Label = InstanceType<typeof Label>;
+export default Label;

package/dist/elements/forms/MultiSelect.svelte

@@ -0,0 +1,120 @@
+<script lang="ts">
+  import Badge from '../badge/Badge.svelte';
+  import CloseButton from '../utils/CloseButton.svelte';
+  import { twMerge } from 'tailwind-merge';
+  import type { FormSizeType, SelectOptionType } from '../types';
+
+  export let items: SelectOptionType<any>[] = [];
+  export let value: (string | number)[] = [];
+  export let size: FormSizeType = 'md';
+  export let dropdownClass: string = '';
+
+  let selectItems: SelectOptionType<any>[] = items.filter((x) => value.includes(x.value));
+  let show: boolean = false;
+
+  const sizes = {
+    sm: 'px-2 py-1 min-h-[2.4rem]',
+    md: 'px-2 py-1 min-h-[2.7rem]',
+    lg: 'px-4 py-2 min-h-[3.2rem]'
+  };
+
+  // Container
+  const multiSelectClass: string = 'relative flex items-center gap-1.5 text-neutral-900 bg-neutral-50 border border-neutral-300 rounded-lg outline-none focus:ring-1 focus:ring-primary-500 focus:border-primary-500 dark:bg-neutral-700 dark:border-neutral-600 dark:placeholder-neutral-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500';
+
+  // Dropdown
+  let multiSelectDropdown: string;
+  $: multiSelectDropdown = twMerge('absolute z-50 p-1 flex flex-col gap-1 max-h-64 bg-white border border-neutral-300 dark:bg-neutral-700 dark:border-neutral-600 start-0 top-[calc(100%+0.5rem)] rounded-lg cursor-pointer overflow-y-auto w-full', dropdownClass);
+
+  // Items (dropdown)
+  const itemsClass: string = 'py-2 px-3 rounded-lg text-neutral-600 hover:text-neutral-600 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:text-neutral-300 dark:hover:bg-neutral-600';
+  // Selected items (dropdown)
+  const itemsSelectClass: string = 'bg-neutral-100 text-black hover:text-black dark:text-white dark:bg-neutral-600 dark:hover:text-white';
+
+  const selectOption = (select: SelectOptionType<any>) => {
+    if (value.includes(select.value)) {
+      clearThisOption(select);
+    } else {
+      if (!value.includes(select.value)) value = [...value, select.value];
+    }
+  };
+
+  const clearAll = (e: MouseEvent) => {
+    e.stopPropagation();
+    value = [];
+  };
+
+  const clearThisOption = (select: SelectOptionType<any>) => {
+    if (value.includes(select.value)) {
+      value = value.filter((o) => o !== select.value);
+    }
+  };
+
+  function create_custom_event(type: string, detail: any, { bubbles = false, cancelable = false } = {}) {
+    return new CustomEvent(type, { detail, bubbles, cancelable });
+  }
+
+  function init(node: HTMLSelectElement, value: any) {
+    const inital = value; // hack for below
+    return {
+      update: (value: any) => {
+        selectItems = items.filter((x) => value.includes(x.value));
+        // avoid initial event emitting
+        if (value !== inital) {
+          node.dispatchEvent(create_custom_event('input', selectItems));
+          node.dispatchEvent(create_custom_event('change', selectItems));
+        }
+      }
+    };
+  }
+</script>
+
+<!-- Hidden select for form submission -->
+<select use:init={value} {...$$restProps} {value} hidden multiple on:change on:input>
+  {#each items as { value, name }}
+    <option {value}>{name}</option>
+  {/each}
+</select>
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<div on:click={() => (show = !show)} tabindex="0" on:keydown={() => (show = !show)} on:focusout={() => (show = false)} role="listbox" class={'multiSelect ' + twMerge(multiSelectClass, sizes[size], $$props.class)}>
+  <span class="flex gap-1 my-1 flex-wrap">
+    {#if selectItems.length}
+      {#each selectItems as item (item.name)}
+        <slot {item} clear={() => clearThisOption(item)}>
+          <Badge color="dark" class="bg-neutral-200 dark:bg-neutral-600" large={size === 'lg'} dismissable params={{ duration: 100 }} on:close={() => clearThisOption(item)}>
+            {item.name}
+          </Badge>
+        </slot>
+      {/each}
+    {/if}
+  </span>
+  <div class="flex ms-auto gap-0.5 items-center">
+    {#if selectItems.length}
+      <CloseButton {size} on:click={clearAll} color="none" class="p-0 focus:ring-neutral-400" />
+    {/if}
+    <div class="w-[1px] bg-neutral-300 dark:bg-neutral-600" />
+    <svg class="cursor-pointer h-3 w-3 ms-1 text-neutral-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
+      <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d={show ? 'm1 5 4-4 4 4' : 'm9 1-4 4-4-4'} />
+    </svg>
+  </div>
+
+  {#if show}
+    <div on:click|stopPropagation role="presentation" class={multiSelectDropdown}>
+      {#each items as item (item.name)}
+        <!-- svelte-ignore a11y-click-events-have-key-events -->
+        <div on:click={() => selectOption(item)} role="presentation" class={twMerge(itemsClass, selectItems.includes(item) && itemsSelectClass)}>
+          {item.name}
+        </div>
+      {/each}
+    </div>
+  {/if}
+</div>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let items: SelectOptionType<any>[] = [];
+@prop export let value: (string | number)[] = [];
+@prop export let size: FormSizeType = 'md';
+@prop export let dropdownClass: string = '';
+-->

package/dist/elements/forms/MultiSelect.svelte.d.ts

@@ -0,0 +1,52 @@
+import type { FormSizeType, SelectOptionType } from '../types';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @prop export let items: SelectOptionType<any>[] = [];
+ * @prop export let value: (string | number)[] = [];
+ * @prop export let size: FormSizeType = 'md';
+ * @prop export let dropdownClass: string = '';
+ */
+declare const MultiSelect: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    [x: string]: any;
+    items?: SelectOptionType<any>[] | undefined;
+    value?: (string | number)[] | undefined;
+    size?: FormSizeType | undefined;
+    dropdownClass?: string | undefined;
+}, {
+    default: {
+        item: SelectOptionType<any>;
+        clear: () => void;
+    };
+}>, {
+    change: Event;
+    input: Event;
+    click: MouseEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {
+        item: SelectOptionType<any>;
+        clear: () => void;
+    };
+}, {}, string>;
+type MultiSelect = InstanceType<typeof MultiSelect>;
+export default MultiSelect;

package/dist/elements/forms/NumberInput.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import Input from './Input.svelte';
+
+  export let value: number = 0;
+</script>
+
+<Input let:props {...$$restProps}>
+  <input {...props} type="number" bind:value on:blur on:change on:click on:contextmenu on:focus on:keydown on:keypress on:keyup on:mouseover on:mouseenter on:mouseleave on:paste on:input />
+</Input>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let value: number = 0;
+-->

package/dist/elements/forms/NumberInput.svelte.d.ts

@@ -0,0 +1,40 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @prop export let value: number = 0;
+ */
+declare const NumberInput: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: any;
+    value?: number | undefined;
+}, {
+    blur: FocusEvent;
+    change: Event;
+    click: MouseEvent;
+    contextmenu: MouseEvent;
+    focus: FocusEvent;
+    keydown: KeyboardEvent;
+    keypress: KeyboardEvent;
+    keyup: KeyboardEvent;
+    mouseover: MouseEvent;
+    mouseenter: MouseEvent;
+    mouseleave: MouseEvent;
+    paste: ClipboardEvent;
+    input: Event;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type NumberInput = InstanceType<typeof NumberInput>;
+export default NumberInput;

package/dist/elements/forms/Radio.svelte

@@ -0,0 +1,53 @@
+<script context="module" lang="ts">
+  // this part is shared between Radio and Checkbox
+  import { twMerge } from 'tailwind-merge';
+
+  const colorClasses: Record<FormColorType, string> = {
+    primary: 'text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600',
+    secondary: 'text-secondary-600 focus:ring-secondary-500 dark:focus:ring-secondary-600',
+    red: 'text-red-600 focus:ring-red-500 dark:focus:ring-red-600',
+    green: 'text-green-600 focus:ring-green-500 dark:focus:ring-green-600',
+    purple: 'text-purple-600 focus:ring-purple-500 dark:focus:ring-purple-600',
+    teal: 'text-teal-600 focus:ring-teal-500 dark:focus:ring-teal-600',
+    yellow: 'text-yellow-400 focus:ring-yellow-500 dark:focus:ring-yellow-600',
+    orange: 'text-orange-500 focus:ring-orange-500 dark:focus:ring-orange-600',
+    blue: 'text-blue-600 focus:ring-blue-500 dark:focus:ring-blue-600'
+  };
+
+  export const labelClass = (inline: boolean, extraClass: string) => twMerge(inline ? 'inline-flex' : 'flex', 'items-center', extraClass);
+  export let spacing: string = 'mr-2';
+
+  export const inputClass = (custom: boolean, color: FormColorType, rounded: boolean, tinted: boolean, extraClass: string) => twMerge('w-4 h-4 bg-neutral-100 border-neutral-300 dark:ring-offset-neutral-800 focus:ring-2', spacing, tinted ? 'dark:bg-neutral-600 dark:border-neutral-500' : 'dark:bg-neutral-700 dark:border-neutral-600', custom && 'sr-only peer', rounded && 'rounded', colorClasses[color], extraClass);
+</script>
+
+<script lang="ts">
+  import { getContext } from 'svelte';
+  import type { FormColorType } from '../types';
+  import Label from './Label.svelte';
+
+  export let color: FormColorType = 'primary';
+  export let custom: boolean = false;
+  export let inline: boolean = false;
+  export let group: number | string = '';
+  export let value: number | string = '';
+
+  // tinted if put in component having its own background
+  let background: boolean = getContext('background');
+</script>
+
+<Label class={labelClass(inline, $$props.class)} show={$$slots.default}>
+  <input type="radio" bind:group on:blur on:change on:click on:focus on:keydown on:keypress on:keyup on:mouseenter on:mouseleave on:mouseover on:paste {value} {...$$restProps} class={inputClass(custom, color, false, background, $$slots.default || $$props.class)} />
+  <slot />
+</Label>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let spacing: string = 'mr-2';
+@prop export let color: FormColorType = 'primary';
+@prop export let custom: boolean = false;
+@prop export let inline: boolean = false;
+@prop export let group: number | string = '';
+@prop export let value: number | string = '';
+-->

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

@@ -0,0 +1,60 @@
+export declare const labelClass: (inline: boolean, extraClass: string) => string;
+export declare let spacing: string;
+export declare const inputClass: (custom: boolean, color: FormColorType, rounded: boolean, tinted: boolean, extraClass: string) => string;
+import type { FormColorType } from '../types';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @prop export let spacing: string = 'mr-2';
+ * @prop export let color: FormColorType = 'primary';
+ * @prop export let custom: boolean = false;
+ * @prop export let inline: boolean = false;
+ * @prop export let group: number | string = '';
+ * @prop export let value: number | string = '';
+ */
+declare const Radio: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    [x: string]: any;
+    color?: FormColorType | undefined;
+    custom?: boolean | undefined;
+    inline?: boolean | undefined;
+    group?: number | string | undefined;
+    value?: number | string | undefined;
+}, {
+    default: {};
+}>, {
+    blur: FocusEvent;
+    change: Event;
+    click: MouseEvent;
+    focus: FocusEvent;
+    keydown: KeyboardEvent;
+    keypress: KeyboardEvent;
+    keyup: KeyboardEvent;
+    mouseenter: MouseEvent;
+    mouseleave: MouseEvent;
+    mouseover: MouseEvent;
+    paste: ClipboardEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type Radio = InstanceType<typeof Radio>;
+export default Radio;