flowbite-svelte 0.47.2 → 1.0.0-next.1

package/dist/accordion/AccordionItem.svelte

@@ -1,98 +1,82 @@
-<script>import { twMerge } from "tailwind-merge";
-import { getContext, onMount } from "svelte";
-import { writable } from "svelte/store";
-import { fade, blur, fly, slide } from "svelte/transition";
-export let tag = "h2";
-export let open = false;
-export let activeClass = void 0;
-export let inactiveClass = void 0;
-export let defaultClass = "flex items-center justify-between w-full font-medium text-left group-first:rounded-t-xl border-gray-200 dark:border-gray-700";
-export let transitionType = "slide";
-export let transitionParams = {};
-export let paddingFlush = "py-5";
-export let paddingDefault = "p-5";
-export let textFlushOpen = "text-gray-900 dark:text-white";
-export let textFlushDefault = "text-gray-500 dark:text-gray-400";
-export let borderClass = "border-s border-e group-first:border-t";
-export let borderOpenClass = "border-s border-e";
-export let borderBottomClass = "border-b";
-export let borderSharedClass = "border-gray-200 dark:border-gray-700";
-export let classActive = void 0;
-export let classInactive = void 0;
-let activeCls = twMerge(activeClass, classActive);
-let inactiveCls = twMerge(inactiveClass, classInactive);
-const multiple = (node, params) => {
-  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);
+<script lang="ts">
+  import { twMerge } from "tailwind-merge";
+  import { slide } from "svelte/transition";
+  import { getContext } from "svelte";
+  import { writable } from "svelte/store";
+  import { type AccordionCtxType, type AccordionItemProps as Props, accordionitem } from ".";
+  import type { ParamsType } from "../types";
+
+  let { children, header, arrowup, arrowdown, open = $bindable(false), activeClass, inactiveClass, transition = slide, params, class: className }: Props = $props();
+
+  // Theme context
+  const context = getContext<Record<string, object>>("themeConfig");
+  // Use theme context if available, otherwise fallback to default
+  const accordionitemTheme = context?.accordionitem || accordionitem;
+
+  const ctx: AccordionCtxType = getContext("ctx") ?? {};
+  // selected type is writable in AccordionCtxType
+  if (!ctx.selected) {
+    ctx.selected = writable();
   }
-};
-const ctx = getContext("ctx") ?? {};
-const self = {};
-const selected = ctx.selected ?? writable();
-let _open = open;
-open = false;
-onMount(() => {
-  if (_open) $selected = self;
-  return selected.subscribe((x) => open = x === self);
-});
-const handleToggle = (_) => selected.set(open ? {} : self);
-let buttonClass;
-$: 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]);
+
+  // single selection
+  const self = {};
+  const selected = ctx.isSingle ? ctx.selected : writable();
+
+  // open && selected.set(self);
+  if (open) selected.set(self);
+
+  selected.subscribe((x) => (open = x === self));
+
+  const handleToggle = () => selected.set(open ? {} : self);
+
+  const { base, button, content, active, inactive } = $derived(accordionitemTheme({ flush: ctx.flush, open }));
+
+  let buttonClass = $derived(twMerge(button(), open && !ctx.flush && (activeClass || ctx.activeClass || active()), !open && !ctx.flush && (inactiveClass || ctx.inactiveClass || inactive()), className));
 </script>
 
-<svelte:element this={tag} 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-gray-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-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
+<h2 class={base()}>
+  <button onclick={handleToggle} class={buttonClass} aria-expanded={open}>
+    {#if header}
+      {@render header()}
+      {#if open}
+        {#if !arrowup}
+          <svg class="h-3 w-3 text-gray-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>
+        {:else}
+          {@render arrowup()}
+        {/if}
+      {:else if !arrowdown}
+        <svg class="h-3 w-3 text-gray-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>
+      {:else}
+        {@render arrowdown()}
+      {/if}
     {/if}
   </button>
-</svelte:element>
+</h2>
 {#if open}
-  <div transition:multiple={transitionParams}>
-    <div class={contentClass}>
-      <slot />
+  <div transition:transition={params as ParamsType}>
+    <div class={content()}>
+      {@render children()}
     </div>
   </div>
 {/if}
 
 <!--
 @component
-[Go to docs](https://flowbite-svelte.com/)
+[Go to docs](https://preview.flowbite-svelte.com/)
 ## Props
-@prop export let tag: $$Props['tag'] = 'h2';
-@prop export let open: NonNullable<$$Props['open']> = false;
-@prop export let activeClass: $$Props['activeClass'] = undefined;
-@prop export let inactiveClass: $$Props['inactiveClass'] = undefined;
-@prop export let defaultClass: $$Props['defaultClass'] = 'flex items-center justify-between w-full font-medium text-left group-first:rounded-t-xl border-gray-200 dark:border-gray-700';
-@prop export let transitionType: $$Props['transitionType'] = 'slide';
-@prop export let transitionParams: $$Props['transitionParams'] = {};
-@prop export let paddingFlush: $$Props['paddingFlush'] = 'py-5';
-@prop export let paddingDefault: $$Props['paddingDefault'] = 'p-5';
-@prop export let textFlushOpen: $$Props['textFlushOpen'] = 'text-gray-900 dark:text-white';
-@prop export let textFlushDefault: $$Props['textFlushDefault'] = 'text-gray-500 dark:text-gray-400';
-@prop export let borderClass: $$Props['borderClass'] = 'border-s border-e group-first:border-t';
-@prop export let borderOpenClass: $$Props['borderOpenClass'] = 'border-s border-e';
-@prop export let borderBottomClass: $$Props['borderBottomClass'] = 'border-b';
-@prop export let borderSharedClass: $$Props['borderSharedClass'] = 'border-gray-200 dark:border-gray-700';
-@prop export let classActive: $$Props['classActive'] = undefined;
-@prop export let classInactive: $$Props['classInactive'] = undefined;
+@props: children: any;
+@props:header: any;
+@props:arrowup: any;
+@props:arrowdown: any;
+@props:open: any = $bindable(false);
+@props:activeClass: any;
+@props:inactiveClass: any;
+@props:transition: any = slide;
+@props:params: any;
+@props:class: string;
 -->

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

@@ -1,59 +1,18 @@
-import { SvelteComponentTyped } from "svelte";
-import type { TransitionTypes, TransitionParamTypes } from '../types';
-declare const __propDef: {
-    props: {
-        tag?: string;
-        open?: boolean;
-        activeClass?: string;
-        inactiveClass?: string;
-        defaultClass?: string;
-        transitionType?: TransitionTypes;
-        transitionParams?: TransitionParamTypes;
-        paddingFlush?: string;
-        paddingDefault?: string;
-        textFlushOpen?: string;
-        textFlushDefault?: string;
-        borderClass?: string;
-        borderOpenClass?: string;
-        borderBottomClass?: string;
-        borderSharedClass?: string;
-        classActive?: string;
-        classInactive?: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        header: {};
-        arrowup: {};
-        arrowdown: {};
-        default: {};
-    };
-};
-export type AccordionItemProps = typeof __propDef.props;
-export type AccordionItemEvents = typeof __propDef.events;
-export type AccordionItemSlots = typeof __propDef.slots;
+import { type AccordionItemProps as Props } from ".";
 /**
- * [Go to docs](https://flowbite-svelte.com/)
+ * [Go to docs](https://preview.flowbite-svelte.com/)
  * ## Props
- * @prop export let tag: $$Props['tag'] = 'h2';
- * @prop export let open: NonNullable<$$Props['open']> = false;
- * @prop export let activeClass: $$Props['activeClass'] = undefined;
- * @prop export let inactiveClass: $$Props['inactiveClass'] = undefined;
- * @prop export let defaultClass: $$Props['defaultClass'] = 'flex items-center justify-between w-full font-medium text-left group-first:rounded-t-xl border-gray-200 dark:border-gray-700';
- * @prop export let transitionType: $$Props['transitionType'] = 'slide';
- * @prop export let transitionParams: $$Props['transitionParams'] = {};
- * @prop export let paddingFlush: $$Props['paddingFlush'] = 'py-5';
- * @prop export let paddingDefault: $$Props['paddingDefault'] = 'p-5';
- * @prop export let textFlushOpen: $$Props['textFlushOpen'] = 'text-gray-900 dark:text-white';
- * @prop export let textFlushDefault: $$Props['textFlushDefault'] = 'text-gray-500 dark:text-gray-400';
- * @prop export let borderClass: $$Props['borderClass'] = 'border-s border-e group-first:border-t';
- * @prop export let borderOpenClass: $$Props['borderOpenClass'] = 'border-s border-e';
- * @prop export let borderBottomClass: $$Props['borderBottomClass'] = 'border-b';
- * @prop export let borderSharedClass: $$Props['borderSharedClass'] = 'border-gray-200 dark:border-gray-700';
- * @prop export let classActive: $$Props['classActive'] = undefined;
- * @prop export let classInactive: $$Props['classInactive'] = undefined;
+ * @props: children: any;
+ * @props:header: any;
+ * @props:arrowup: any;
+ * @props:arrowdown: any;
+ * @props:open: any = $bindable(false);
+ * @props:activeClass: any;
+ * @props:inactiveClass: any;
+ * @props:transition: any = slide;
+ * @props:params: any;
+ * @props:class: string;
  */
-export default class AccordionItem extends SvelteComponentTyped<AccordionItemProps, AccordionItemEvents, AccordionItemSlots> {
-}
-export {};
+declare const AccordionItem: import("svelte").Component<Props, {}, "open">;
+type AccordionItem = ReturnType<typeof AccordionItem>;
+export default AccordionItem;

package/dist/accordion/index.d.ts

@@ -0,0 +1,5 @@
+import Accordion from "./Accordion.svelte";
+import AccordionItem from "./AccordionItem.svelte";
+import type { AccordionCtxType, AccordionProps, AccordionItemProps } from "./type";
+import { accordion, accordionitem } from "./theme";
+export { AccordionItem, accordionitem, type AccordionItemProps, Accordion, accordion, type AccordionCtxType, type AccordionProps };

package/dist/accordion/index.js

@@ -0,0 +1,4 @@
+import Accordion from "./Accordion.svelte";
+import AccordionItem from "./AccordionItem.svelte";
+import { accordion, accordionitem } from "./theme";
+export { AccordionItem, accordionitem, Accordion, accordion };

package/dist/accordion/theme.d.ts

@@ -0,0 +1,160 @@
+export declare const accordion: import("tailwind-variants").TVReturnType<{
+    flush: {
+        true: string;
+        false: string;
+    };
+}, undefined, "w-full text-gray-500 dark:text-gray-400", import("tailwind-variants/dist/config").TVConfig<{
+    flush: {
+        true: string;
+        false: string;
+    };
+}, {
+    flush: {
+        true: string;
+        false: string;
+    };
+}>, {
+    flush: {
+        true: string;
+        false: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    flush: {
+        true: string;
+        false: string;
+    };
+}, undefined, "w-full text-gray-500 dark:text-gray-400", import("tailwind-variants/dist/config").TVConfig<{
+    flush: {
+        true: string;
+        false: string;
+    };
+}, {
+    flush: {
+        true: string;
+        false: string;
+    };
+}>, unknown, unknown, undefined>>;
+export declare const accordionitem: import("tailwind-variants").TVReturnType<{
+    flush: {
+        true: {
+            button: string;
+            content: string;
+        };
+        false: {
+            button: string;
+            content: string;
+        };
+    };
+    open: {
+        true: {};
+        false: {};
+    };
+}, {
+    base: string;
+    button: string;
+    content: string;
+    active: string;
+    inactive: string;
+}, undefined, import("tailwind-variants/dist/config").TVConfig<{
+    flush: {
+        true: {
+            button: string;
+            content: string;
+        };
+        false: {
+            button: string;
+            content: string;
+        };
+    };
+    open: {
+        true: {};
+        false: {};
+    };
+}, {
+    flush: {
+        true: {
+            button: string;
+            content: string;
+        };
+        false: {
+            button: string;
+            content: string;
+        };
+    };
+    open: {
+        true: {};
+        false: {};
+    };
+}>, {
+    flush: {
+        true: {
+            button: string;
+            content: string;
+        };
+        false: {
+            button: string;
+            content: string;
+        };
+    };
+    open: {
+        true: {};
+        false: {};
+    };
+}, {
+    base: string;
+    button: string;
+    content: string;
+    active: string;
+    inactive: string;
+}, import("tailwind-variants").TVReturnType<{
+    flush: {
+        true: {
+            button: string;
+            content: string;
+        };
+        false: {
+            button: string;
+            content: string;
+        };
+    };
+    open: {
+        true: {};
+        false: {};
+    };
+}, {
+    base: string;
+    button: string;
+    content: string;
+    active: string;
+    inactive: string;
+}, undefined, import("tailwind-variants/dist/config").TVConfig<{
+    flush: {
+        true: {
+            button: string;
+            content: string;
+        };
+        false: {
+            button: string;
+            content: string;
+        };
+    };
+    open: {
+        true: {};
+        false: {};
+    };
+}, {
+    flush: {
+        true: {
+            button: string;
+            content: string;
+        };
+        false: {
+            button: string;
+            content: string;
+        };
+    };
+    open: {
+        true: {};
+        false: {};
+    };
+}>, unknown, unknown, undefined>>;

package/dist/accordion/theme.js

@@ -0,0 +1,55 @@
+import { tv } from "tailwind-variants";
+export const accordion = tv({
+    base: "w-full text-gray-500 dark:text-gray-400",
+    variants: {
+        flush: {
+            true: "",
+            false: "border border-gray-200 dark:border-gray-700 rounded-t-xl"
+        }
+    }
+});
+export const accordionitem = tv({
+    slots: {
+        base: "group",
+        button: "flex items-center justify-between w-full font-medium text-left group-first:rounded-t-xl border-gray-200 dark:border-gray-700 border-b",
+        content: "border-b border-gray-200 dark:border-gray-700",
+        active: "bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800",
+        inactive: "text-gray-500 dark:text-gray-400 hover:bg-gray-100 hover:dark:bg-gray-800"
+    },
+    variants: {
+        flush: {
+            true: {
+                button: "py-5",
+                content: "py-5"
+            },
+            false: {
+                button: "p-5 border-s border-e group-first:border-t",
+                content: "p-5 border-s border-e"
+            }
+        },
+        open: {
+            true: {},
+            false: {}
+        }
+    },
+    compoundVariants: [
+        {
+            flush: true,
+            open: true,
+            class: {
+                button: "text-gray-900 dark:text-white"
+            }
+        },
+        {
+            flush: true,
+            open: false,
+            class: {
+                button: "text-gray-500 dark:text-gray-400"
+            }
+        }
+    ],
+    defaultVariants: {
+        flush: false,
+        open: false
+    }
+});

package/dist/accordion/type.d.ts

@@ -0,0 +1,36 @@
+import { type Writable } from "svelte/store";
+import type { Snippet } from "svelte";
+import type { ParamsType, TransitionFunc } from "../types";
+import type { HTMLAttributes } from "svelte/elements";
+interface AccordionCtxType {
+    flush: boolean;
+    activeClass: string | undefined | null;
+    inactiveClass: string | undefined | null;
+    selected?: Writable<object>;
+    classActive?: string;
+    classInactive?: string;
+    isSingle?: boolean;
+}
+interface AccordionProps extends HTMLAttributes<HTMLDivElement> {
+    children: Snippet;
+    flush?: boolean;
+    isSingle?: boolean;
+    activeClass?: string;
+    inactiveClass?: string;
+    defaultClass?: string;
+    classActive?: string;
+    classInactive?: string;
+}
+interface AccordionItemProps extends HTMLAttributes<HTMLDivElement> {
+    children: Snippet;
+    header?: Snippet;
+    arrowup?: Snippet;
+    arrowdown?: Snippet;
+    open?: boolean;
+    activeClass?: string;
+    inactiveClass?: string;
+    transition?: TransitionFunc;
+    params?: ParamsType;
+    class?: string;
+}
+export type { AccordionCtxType, AccordionProps, AccordionItemProps };

package/dist/accordion/type.js

@@ -0,0 +1 @@
+import {} from "svelte/store";

package/dist/alert/Alert.svelte

@@ -1,34 +1,89 @@
-<script>import TransitionFrame from "../utils/TransitionFrame.svelte";
-import { twMerge } from "tailwind-merge";
-import CloseButton from "../utils/CloseButton.svelte";
-export let dismissable = false;
-export let defaultClass = "p-4 gap-3 text-sm";
-let divClass;
-$: divClass = twMerge(defaultClass, ($$slots.icon || dismissable) && "flex items-center", $$props.class);
+<script lang="ts">
+  import { getContext } from "svelte";
+  import { type AlertProps as Props, alert } from ".";
+  import { CloseButton } from "..";
+  import { fade } from "svelte/transition";
+  import type { ParamsType } from "../types";
+
+  let { children, icon, alertStatus = $bindable(true), closeIcon, color = "primary", rounded = true, border, class: className, dismissable, transition = fade, params, onclick, ...restProps }: Props = $props();
+
+  // Theme context
+  const context = getContext<Record<string, object>>("themeConfig");
+  // Use theme context if available, otherwise fallback to default
+  const alertTheme = context?.alert || alert;
+
+  let divCls = $derived(
+    alertTheme({
+      color,
+      rounded,
+      border,
+      icon: !!icon,
+      dismissable,
+      className
+    })
+  );
+  // $inspect('transition: ', transition);
 </script>
 
-<TransitionFrame {dismissable} color="primary" role="alert" rounded {...$$restProps} class={divClass} on:close let:close>
-  {#if $$slots.icon}
-    <slot name="icon" />
-  {/if}
+{#if alertStatus}
+  <div role="alert" {...restProps} transition:transition={params as ParamsType} class={divCls}>
+    {#if icon}
+      {@render icon()}
+    {/if}
 
-  {#if $$slots.icon || dismissable}
-    <div><slot /></div>
-  {:else}
-    <slot />
-  {/if}
+    {#if icon || dismissable}
+      <div>
+        {@render children()}
+      </div>
+    {:else}
+      {@render children()}
+    {/if}
 
-  {#if dismissable}
-    <slot name="close-button" {close}>
-      <CloseButton class="ms-auto -me-1.5 -my-1.5 dark:hover:bg-gray-700" color={$$restProps.color} on:click={close} on:click on:change on:keydown on:keyup on:focus on:blur on:mouseenter on:mouseleave />
-    </slot>
-  {/if}
-</TransitionFrame>
+    {#if dismissable}
+      {#if closeIcon}
+        <button
+          type="button"
+          class="m-0.5 -me-1.5 ms-1.5 whitespace-normal rounded p-0.5 text-primary-500 hover:bg-primary-200 focus:outline-none focus:ring-1 focus:ring-primary-400 dark:hover:bg-primary-800 dark:hover:text-primary-300"
+          aria-label="Remove badge"
+          onclick={() => {
+            alertStatus = false;
+          }}
+        >
+          <span class="sr-only">Remove alert</span>
+          {#if icon}
+            {@render icon()}
+          {/if}
+        </button>
+      {:else if onclick}
+        <CloseButton class="-my-1.5 -me-1.5 ms-auto dark:hover:bg-gray-700" {color} ariaLabel="Remove badge" {onclick} />
+      {:else}
+        <CloseButton
+          class="-my-1.5 -me-1.5 ms-auto dark:hover:bg-gray-700"
+          {color}
+          ariaLabel="Remove alert"
+          onclick={() => {
+            alertStatus = false;
+          }}
+        />
+      {/if}
+    {/if}
+  </div>
+{/if}
 
 <!--
 @component
-[Go to docs](https://flowbite-svelte.com/)
+[Go to docs](https://preview.flowbite-svelte.com/)
 ## Props
-@prop export let dismissable: $$Props['dismissable'] = false;
-@prop export let defaultClass: $$Props['defaultClass'] = 'p-4 gap-3 text-sm';
+@props: children: any;
+@props:icon: any;
+@props:alertStatus: any = $bindable(true);
+@props:closeIcon: any;
+@props:color: any = "primary";
+@props:rounded: any = true;
+@props:border: any;
+@props:class: string;
+@props:dismissable: any;
+@props:transition: any = fade;
+@props:params: any;
+@props:onclick: any;
 -->