odj-svelte-ui 0.1.0

package/dist/dropdown/DropdownLi.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+  import { getContext } from "svelte";
+  import { type DropdownLiProps as Props, dropdownli } from "./";
+
+  let { aClass, children, href, activeClass, liClass, ...restProps }: Props = $props();
+
+  const activeUrlStore = getContext("activeUrl") as { subscribe: (callback: (value: string) => void) => void };
+  let sidebarUrl = $state("");
+  activeUrlStore.subscribe((value) => {
+    // console.log('value: ', value)
+    sidebarUrl = value;
+  });
+  let active = $state(false);
+  $effect(() => {
+    active = sidebarUrl ? href === sidebarUrl : false;
+  });
+
+  const { anchor, activeAnchor } = $derived(dropdownli());
+</script>
+
+<li class={liClass}>
+  {#if href}
+    <a {href} {...restProps} class={active ? activeAnchor({ class: activeClass }) : anchor({ class: aClass })}>
+      {@render children()}
+    </a>
+  {:else}
+    {@render children()}
+  {/if}
+</li>
+
+<!--
+@component
+[Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+## Props
+@props: aClass: any;
+@props:children: any;
+@props:href: any;
+@props:activeClass: any;
+@props:liClass: any;
+-->

package/dist/dropdown/DropdownLi.svelte.d.ts

@@ -0,0 +1,13 @@
+import { type DropdownLiProps as Props } from "./";
+/**
+ * [Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+ * ## Props
+ * @props: aClass: any;
+ * @props:children: any;
+ * @props:href: any;
+ * @props:activeClass: any;
+ * @props:liClass: any;
+ */
+declare const DropdownLi: import("svelte").Component<Props, {}, "">;
+type DropdownLi = ReturnType<typeof DropdownLi>;
+export default DropdownLi;

package/dist/dropdown/DropdownUl.svelte

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

package/dist/dropdown/DropdownUl.svelte.d.ts

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

package/dist/dropdown/index.d.ts

@@ -0,0 +1,9 @@
+import type { DropdownProps, DropdownDividerProps, DropdownLiProps, DropdownUlProps, DropdownHeaderProps, DropdownFooterProps } from "./type";
+import Dropdown from "./Dropdown.svelte";
+import DropdownDivider from "./DropdownDivider.svelte";
+import DropdownUl from "./DropdownUl.svelte";
+import DropdownLi from "./DropdownLi.svelte";
+import DropdownHeader from "./DropdownHeader.svelte";
+import DropdownFooter from "./DropdownFooter.svelte";
+import { dropdown, dropdowndivider, dropdownli, dropdownul, dropdownHeader, dropdownFooter } from "./theme";
+export { Dropdown, DropdownDivider, DropdownUl, DropdownLi, DropdownHeader, DropdownFooter, dropdown, dropdowndivider, dropdownli, dropdownul, dropdownHeader, dropdownFooter, type DropdownProps, type DropdownDividerProps, type DropdownLiProps, type DropdownUlProps, type DropdownHeaderProps, type DropdownFooterProps };

package/dist/dropdown/index.js

@@ -0,0 +1,8 @@
+import Dropdown from "./Dropdown.svelte";
+import DropdownDivider from "./DropdownDivider.svelte";
+import DropdownUl from "./DropdownUl.svelte";
+import DropdownLi from "./DropdownLi.svelte";
+import DropdownHeader from "./DropdownHeader.svelte";
+import DropdownFooter from "./DropdownFooter.svelte";
+import { dropdown, dropdowndivider, dropdownli, dropdownul, dropdownHeader, dropdownFooter } from "./theme";
+export { Dropdown, DropdownDivider, DropdownUl, DropdownLi, DropdownHeader, DropdownFooter, dropdown, dropdowndivider, dropdownli, dropdownul, dropdownHeader, dropdownFooter };

package/dist/dropdown/theme.d.ts

@@ -0,0 +1,94 @@
+export declare const dropdown: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            backdrop?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            backdrop?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    backdrop: string;
+}, undefined, import("tailwind-variants/dist/config").TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            backdrop?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}>, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            backdrop?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    backdrop: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    base: string;
+    backdrop: string;
+}, undefined, import("tailwind-variants/dist/config").TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            backdrop?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}>, unknown, unknown, undefined>>;
+export declare const dropdowndivider: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "my-1 h-px bg-gray-100 dark:bg-gray-500", import("tailwind-variants/dist/config").TVConfig<unknown, {} | {}>, {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "my-1 h-px bg-gray-100 dark:bg-gray-500", import("tailwind-variants/dist/config").TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
+export declare const dropdownHeader: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "px-4 py-3 text-sm text-gray-900 dark:text-white", import("tailwind-variants/dist/config").TVConfig<unknown, {} | {}>, {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "px-4 py-3 text-sm text-gray-900 dark:text-white", import("tailwind-variants/dist/config").TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
+export declare const dropdownFooter: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "overflow-hidden rounded-b-lg py-1", import("tailwind-variants/dist/config").TVConfig<unknown, {} | {}>, {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "overflow-hidden rounded-b-lg py-1", import("tailwind-variants/dist/config").TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
+export declare const dropdownli: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            anchor?: import("tailwind-merge").ClassNameValue;
+            activeAnchor?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            anchor?: import("tailwind-merge").ClassNameValue;
+            activeAnchor?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    anchor: string;
+    activeAnchor: string;
+}, undefined, import("tailwind-variants/dist/config").TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            anchor?: import("tailwind-merge").ClassNameValue;
+            activeAnchor?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}>, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            anchor?: import("tailwind-merge").ClassNameValue;
+            activeAnchor?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    anchor: string;
+    activeAnchor: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    anchor: string;
+    activeAnchor: string;
+}, undefined, import("tailwind-variants/dist/config").TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            anchor?: import("tailwind-merge").ClassNameValue;
+            activeAnchor?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}>, unknown, unknown, undefined>>;
+export declare const dropdownul: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "py-2 text-sm text-gray-700 dark:text-gray-200", import("tailwind-variants/dist/config").TVConfig<unknown, {} | {}>, {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "py-2 text-sm text-gray-700 dark:text-gray-200", import("tailwind-variants/dist/config").TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;

package/dist/dropdown/theme.js

@@ -0,0 +1,25 @@
+import { tv } from "tailwind-variants";
+export const dropdown = tv({
+    slots: {
+        base: "z-10 w-44 mt-2 divide-y divide-gray-300 dark:divide-gray-500 overflow-hidden rounded-lg bg-white shadow dark:bg-gray-700",
+        backdrop: "fixed top-0 start-0 w-full h-full"
+    }
+});
+export const dropdowndivider = tv({
+    base: "my-1 h-px bg-gray-100 dark:bg-gray-500"
+});
+export const dropdownHeader = tv({
+    base: "px-4 py-3 text-sm text-gray-900 dark:text-white"
+});
+export const dropdownFooter = tv({
+    base: "overflow-hidden rounded-b-lg py-1"
+});
+export const dropdownli = tv({
+    slots: {
+        anchor: "block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white",
+        activeAnchor: "block px-4 py-2 text-primary-700 dark:text-primary-600 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
+    }
+});
+export const dropdownul = tv({
+    base: "py-2 text-sm text-gray-700 dark:text-gray-200"
+});

package/dist/dropdown/type.d.ts

@@ -0,0 +1,36 @@
+import type { Snippet } from "svelte";
+import type { ParamsType, TransitionFunc } from "../types";
+import type { HTMLAttributes, HTMLAnchorAttributes } from "svelte/elements";
+interface DropdownProps extends HTMLAttributes<HTMLDivElement> {
+    children: Snippet;
+    dropdownStatus: boolean;
+    closeDropdown?: () => void;
+    divClass?: string;
+    footerClass?: string;
+    headerClass?: string;
+    ulClass?: string;
+    backdropClass?: string;
+    params?: ParamsType;
+    transition?: TransitionFunc;
+    activeUrl?: string;
+}
+interface DropdownDividerProps extends HTMLAttributes<HTMLDivElement> {
+    class?: string;
+}
+interface DropdownHeaderProps extends HTMLAttributes<HTMLDivElement> {
+    children: Snippet;
+}
+interface DropdownFooterProps extends HTMLAttributes<HTMLDivElement> {
+    children: Snippet;
+}
+interface DropdownLiProps extends HTMLAnchorAttributes {
+    children: Snippet;
+    aClass?: string;
+    href?: string;
+    activeClass?: string;
+    liClass?: string;
+}
+interface DropdownUlProps extends HTMLAttributes<HTMLUListElement> {
+    children: Snippet;
+}
+export { type DropdownProps, type DropdownDividerProps, type DropdownLiProps, type DropdownUlProps, type DropdownHeaderProps, type DropdownFooterProps };

package/dist/dropdown/type.js

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

package/dist/elements/accordion/Accordion.svelte

@@ -0,0 +1,61 @@
+<script context="module" lang="ts">
+  import { writable, type Writable } from 'svelte/store';
+
+  export interface AccordionCtxType {
+    flush: boolean;
+    activeClass: string;
+    inactiveClass: string;
+    selected?: Writable<object>;
+    classActive?: string;
+    classInactive?: string;
+  }
+</script>
+
+<script lang="ts">
+  import Frame from '../utils/Frame.svelte';
+  import { twMerge } from 'tailwind-merge';
+  import { setContext, type ComponentProps } from 'svelte';
+
+  interface $$Props extends ComponentProps<Frame> {
+    multiple?: boolean;
+    flush?: boolean;
+    activeClass?: string;
+    inactiveClass?: string;
+    defaultClass?: string;
+    classActive?: string;
+    classInactive?: string;
+  }
+
+  export let multiple: boolean = false;
+  export let flush: boolean = false;
+  export let activeClass: string = 'bg-neutral-100 dark:bg-neutral-800 text-neutral-900 dark:text-white focus:ring-4 focus:ring-neutral-200 dark:focus:ring-neutral-800';
+  export let inactiveClass: string = 'text-neutral-500 dark:text-neutral-400 hover:bg-neutral-100 hover:dark:bg-neutral-800';
+  export let defaultClass: string = 'text-neutral-500 dark:text-neutral-400';
+
+  const ctx: AccordionCtxType = {
+    flush,
+    activeClass: twMerge(activeClass, $$props.classActive),
+    inactiveClass: twMerge(inactiveClass, $$props.classInactive),
+    selected: multiple ? undefined : writable()
+  };
+
+  setContext<AccordionCtxType>('ctx', ctx);
+
+  let frameClass: string;
+  $: frameClass = twMerge(defaultClass, $$props.class);
+</script>
+
+<Frame {...$$restProps} class={frameClass} color="none">
+  <slot />
+</Frame>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let multiple: boolean = false;
+@prop export let flush: boolean = false;
+@prop export let activeClass: string = 'bg-neutral-100 dark:bg-neutral-800 text-neutral-900 dark:text-white focus:ring-4 focus:ring-neutral-200 dark:focus:ring-neutral-800';
+@prop export let inactiveClass: string = 'text-neutral-500 dark:text-neutral-400 hover:bg-neutral-100 hover:dark:bg-neutral-800';
+@prop export let defaultClass: string = 'text-neutral-500 dark:text-neutral-400';
+-->

package/dist/elements/accordion/Accordion.svelte.d.ts

@@ -0,0 +1,68 @@
+import { type Writable } from 'svelte/store';
+export interface AccordionCtxType {
+    flush: boolean;
+    activeClass: string;
+    inactiveClass: string;
+    selected?: Writable<object>;
+    classActive?: string;
+    classInactive?: string;
+}
+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 multiple: boolean = false;
+ * @prop export let flush: boolean = false;
+ * @prop export let activeClass: string = 'bg-neutral-100 dark:bg-neutral-800 text-neutral-900 dark:text-white focus:ring-4 focus:ring-neutral-200 dark:focus:ring-neutral-800';
+ * @prop export let inactiveClass: string = 'text-neutral-500 dark:text-neutral-400 hover:bg-neutral-100 hover:dark:bg-neutral-800';
+ * @prop export let defaultClass: string = 'text-neutral-500 dark:text-neutral-400';
+ */
+declare const Accordion: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<import("svelte/elements").HTMLAnchorAttributes & {
+    tag?: string;
+    color?: "primary" | "red" | "orange" | "yellow" | "green" | "blue" | "indigo" | "purple" | "pink" | "dark" | "default" | "none" | "form" | "light" | "neutral" | "dropdown" | "navbar" | "navbarUl";
+    rounded?: boolean;
+    border?: boolean;
+    shadow?: boolean;
+    transition?: (node: HTMLElement, params: any) => import("svelte/transition").TransitionConfig;
+    params?: object;
+    node?: HTMLElement | undefined;
+    use?: import("svelte/action").Action<HTMLElement, any>;
+    options?: object;
+    class?: string;
+    role?: string;
+} & {
+    children?: any;
+} & {
+    multiple?: boolean;
+    flush?: boolean;
+    activeClass?: string;
+    inactiveClass?: string;
+    defaultClass?: string;
+    classActive?: string;
+    classInactive?: string;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type Accordion = InstanceType<typeof Accordion>;
+export default Accordion;

package/dist/elements/accordion/AccordionItem.svelte

@@ -0,0 +1,120 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+  import { getContext, onMount } from 'svelte';
+  import { writable } from 'svelte/store';
+  import { fade, blur, fly, slide } from 'svelte/transition';
+  import type { TransitionTypes, TransitionParamTypes } from '../types';
+  import type { AccordionCtxType } from './Accordion.svelte';
+
+  export let open: boolean = false;
+  export let activeClass: string | undefined = undefined;
+  export let inactiveClass: string | undefined = undefined;
+  export let defaultClass: string = 'flex items-center justify-between w-full font-medium text-left group-first:rounded-t-xl border-neutral-200 dark:border-neutral-700';
+  export let transitionType: TransitionTypes = 'slide';
+  export let transitionParams: TransitionParamTypes = {};
+  export let paddingFlush: string = 'py-5';
+  export let paddingDefault: string = 'p-5';
+  export let textFlushOpen: string = 'text-neutral-900 dark:text-white';
+  export let textFlushDefault: string = 'text-neutral-500 dark:text-neutral-400';
+  export let borderClass: string = 'border-l border-r group-first:border-t';
+  export let borderOpenClass: string = 'border-l border-r';
+  export let borderBottomClass: string = 'border-b';
+  export let borderSharedClass: string = 'border-neutral-200 dark:border-neutral-700';
+
+  export let classActive: string | undefined = undefined;
+  export let classInactive: string | undefined = undefined;
+
+  let activeCls = twMerge(activeClass, classActive);
+  let inactiveCls = twMerge(inactiveClass, classInactive);
+
+  // make a custom transition function that returns the desired transition
+  const multiple = (node: HTMLElement, params: any) => {
+    switch (transitionType) {
+      case 'blur':
+        return blur(node, params);
+      case 'fly':
+        return fly(node, params);
+      case 'fade':
+        return fade(node, params);
+      default:
+        return slide(node, params);
+    }
+  };
+
+  const ctx = getContext<AccordionCtxType>('ctx') ?? {};
+
+  // single selection
+  const self = {};
+  const selected = ctx.selected ?? writable();
+
+  let _open: boolean = open;
+  open = false;
+
+  onMount(() => {
+    if (_open) $selected = self;
+
+    // this will trigger unsubscribe on destroy
+    return selected.subscribe((x) => (open = x === self));
+  });
+
+  const handleToggle = (_: Event) => selected.set(open ? {} : self);
+
+  let buttonClass: string;
+  $: buttonClass = twMerge([defaultClass, ctx.flush || borderClass, borderBottomClass, borderSharedClass, ctx.flush ? paddingFlush : paddingDefault, open && (ctx.flush ? textFlushOpen : activeCls || ctx.activeClass), !open && (ctx.flush ? textFlushDefault : inactiveCls || ctx.inactiveClass), $$props.class]);
+
+  $: contentClass = twMerge([ctx.flush ? paddingFlush : paddingDefault, ctx.flush ? '' : borderOpenClass, borderBottomClass, borderSharedClass]);
+</script>
+
+<h2 class="group">
+  <button on:click={handleToggle} type="button" class={buttonClass} aria-expanded={open}>
+    <slot name="header" />
+    {#if open}
+      <slot name="arrowup">
+        <svg class="w-3 h-3 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="M9 5 5 1 1 5" />
+        </svg>
+      </slot>
+    {:else}
+      <slot name="arrowdown">
+        <svg class="w-3 h-3 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="m1 1 4 4 4-4" />
+        </svg>
+      </slot>
+    {/if}
+  </button>
+</h2>
+{#if open}
+  <div transition:multiple={transitionParams}>
+    <div class={contentClass}>
+      <slot />
+    </div>
+  </div>
+{:else}
+  <div class="hidden">
+    <div class={contentClass}>
+      <slot />
+    </div>
+  </div>
+{/if}
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let open: boolean = false;
+@prop export let activeClass: string | undefined = undefined;
+@prop export let inactiveClass: string | undefined = undefined;
+@prop export let defaultClass: string = 'flex items-center justify-between w-full font-medium text-left group-first:rounded-t-xl border-neutral-200 dark:border-neutral-700';
+@prop export let transitionType: TransitionTypes = 'slide';
+@prop export let transitionParams: TransitionParamTypes = {};
+@prop export let paddingFlush: string = 'py-5';
+@prop export let paddingDefault: string = 'p-5';
+@prop export let textFlushOpen: string = 'text-neutral-900 dark:text-white';
+@prop export let textFlushDefault: string = 'text-neutral-500 dark:text-neutral-400';
+@prop export let borderClass: string = 'border-l border-r group-first:border-t';
+@prop export let borderOpenClass: string = 'border-l border-r';
+@prop export let borderBottomClass: string = 'border-b';
+@prop export let borderSharedClass: string = 'border-neutral-200 dark:border-neutral-700';
+@prop export let classActive: string | undefined = undefined;
+@prop export let classInactive: string | undefined = undefined;
+-->

package/dist/elements/accordion/AccordionItem.svelte.d.ts

@@ -0,0 +1,72 @@
+import type { TransitionTypes, TransitionParamTypes } 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 open: boolean = false;
+ * @prop export let activeClass: string | undefined = undefined;
+ * @prop export let inactiveClass: string | undefined = undefined;
+ * @prop export let defaultClass: string = 'flex items-center justify-between w-full font-medium text-left group-first:rounded-t-xl border-neutral-200 dark:border-neutral-700';
+ * @prop export let transitionType: TransitionTypes = 'slide';
+ * @prop export let transitionParams: TransitionParamTypes = {};
+ * @prop export let paddingFlush: string = 'py-5';
+ * @prop export let paddingDefault: string = 'p-5';
+ * @prop export let textFlushOpen: string = 'text-neutral-900 dark:text-white';
+ * @prop export let textFlushDefault: string = 'text-neutral-500 dark:text-neutral-400';
+ * @prop export let borderClass: string = 'border-l border-r group-first:border-t';
+ * @prop export let borderOpenClass: string = 'border-l border-r';
+ * @prop export let borderBottomClass: string = 'border-b';
+ * @prop export let borderSharedClass: string = 'border-neutral-200 dark:border-neutral-700';
+ * @prop export let classActive: string | undefined = undefined;
+ * @prop export let classInactive: string | undefined = undefined;
+ */
+declare const AccordionItem: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    [x: string]: any;
+    open?: boolean | undefined;
+    activeClass?: string | undefined | undefined;
+    inactiveClass?: string | undefined | undefined;
+    defaultClass?: string | undefined;
+    transitionType?: TransitionTypes | undefined;
+    transitionParams?: TransitionParamTypes | undefined;
+    paddingFlush?: string | undefined;
+    paddingDefault?: string | undefined;
+    textFlushOpen?: string | undefined;
+    textFlushDefault?: string | undefined;
+    borderClass?: string | undefined;
+    borderOpenClass?: string | undefined;
+    borderBottomClass?: string | undefined;
+    borderSharedClass?: string | undefined;
+    classActive?: string | undefined | undefined;
+    classInactive?: string | undefined | undefined;
+}, {
+    header: {};
+    arrowup: {};
+    arrowdown: {};
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    header: {};
+    arrowup: {};
+    arrowdown: {};
+    default: {};
+}, {}, string>;
+type AccordionItem = InstanceType<typeof AccordionItem>;
+export default AccordionItem;

package/dist/elements/alert/Alert.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+  import { createEventDispatcher, type ComponentProps } from 'svelte';
+  import CloseButton from '../utils/CloseButton.svelte';
+  import Frame from '../utils/Frame.svelte';
+  import { fade } from 'svelte/transition';
+  import type { Dismissable } from '../types';
+
+  interface $$Props extends ComponentProps<Frame>, Dismissable {}
+
+  export let dismissable: boolean = false;
+  export let defaultClass: string = 'p-4 gap-3 text-sm';
+
+  let open = true;
+  const dispatch = createEventDispatcher();
+  $: dispatch(open ? 'open' : 'close');
+
+  function close(e: MouseEvent) {
+    e.stopPropagation();
+    open = false;
+  }
+
+  let divClass: string;
+  $: divClass = twMerge(defaultClass, ($$slots.icon || dismissable) && 'flex items-center', $$props.class);
+
+  $: {
+    // set default values
+    $$restProps.color = $$restProps.color ?? 'primary';
+    $$restProps.rounded = $$restProps.rounded ?? true;
+    if (dismissable) $$restProps.transition = $$restProps.transition ?? fade;
+  }
+</script>
+
+{#if open}
+  <Frame {...$$restProps} class={divClass} role="alert">
+    {#if $$slots.icon}
+      <slot name="icon" />
+    {/if}
+
+    {#if $$slots.icon || dismissable}
+      <div><slot /></div>
+    {:else}
+      <slot />
+    {/if}
+
+    {#if dismissable}
+      <slot name="close-button" {close}>
+        <CloseButton class="ml-auto -mr-1.5 -my-1.5" color={$$restProps.color} on:click={close} on:click on:change on:keydown on:keyup on:focus on:blur on:mouseenter on:mouseleave />
+      </slot>
+    {/if}
+  </Frame>
+{/if}
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let dismissable: boolean = false;
+@prop export let defaultClass: string = 'p-4 gap-3 text-sm';
+-->