flowbite-svelte 0.48.4 → 1.0.0-next.2

package/dist/accordion/Accordion.svelte

@@ -1,40 +1,40 @@
-<script context="module">import { writable } from "svelte/store";
-</script>
+<script lang="ts">
+  import { setContext, getContext } from "svelte";
+  import { writable } from "svelte/store";
+  import { type AccordionProps as Props, accordion } from "./";
+  import type { BaseThemes } from "../theme";
+  import clsx from "clsx";
+
+  let { children, flush, activeClass, inactiveClass, multiple = false, class: className, ...restProps }: Props = $props();
+
+  // Get merged theme from context
+  const context = getContext<BaseThemes>("themeConfig");
+  // Use context theme if available, otherwise fallback to default
+  const accordionTheme = context?.accordion || accordion;
+
+  const ctx = {
+    flush,
+    activeClass,
+    inactiveClass,
+    selected: multiple ? undefined : writable()
+  };
 
-<script>import Frame from "../utils/Frame.svelte";
-import { twMerge } from "tailwind-merge";
-import { setContext } from "svelte";
-export let multiple = false;
-export let flush = false;
-export let activeClass = "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";
-export let inactiveClass = "text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800";
-export let defaultClass = "text-gray-500 dark:text-gray-400";
-export let classActive = "";
-export let classInactive = "";
-const ctx = {
-  flush,
-  activeClass: twMerge(activeClass, classActive),
-  inactiveClass: twMerge(inactiveClass, classInactive),
-  selected: multiple ? void 0 : writable()
-};
-setContext("ctx", ctx);
-let frameClass;
-$: frameClass = twMerge(defaultClass, $$props.class);
+  setContext("ctx", ctx);
+  const base = $derived(accordionTheme({ flush, class: clsx(className) }));
 </script>
 
-<Frame {...$$restProps} class={frameClass} color="none">
-  <slot />
-</Frame>
+<div {...restProps} class={base}>
+  {@render children()}
+</div>
 
 <!--
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let multiple: $$Props['multiple'] = false;
-@prop export let flush: $$Props['flush'] = false;
-@prop export let activeClass: $$Props['activeClass'] = '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';
-@prop export let inactiveClass: $$Props['inactiveClass'] = 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800';
-@prop export let defaultClass: $$Props['defaultClass'] = 'text-gray-500 dark:text-gray-400';
-@prop export let classActive: $$Props['classActive'] = '';
-@prop export let classInactive: $$Props['classInactive'] = '';
+@props: children: any;
+@props:flush: any;
+@props:activeClass: any;
+@props:inactiveClass: any;
+@props:multiple: any = false;
+@props:class: string;
 -->

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

@@ -1,58 +1,24 @@
 import { SvelteComponentTyped } from "svelte";
-import { type Writable } from 'svelte/store';
-export interface AccordionCtxType {
-    flush: boolean | undefined;
-    activeClass: string;
-    inactiveClass: string;
-    selected?: Writable<object>;
-    classActive?: string;
-    classInactive?: string;
-}
 declare const __propDef: {
-    props: import("svelte/elements").HTMLAttributes<HTMLElement> & {
-        tag?: string;
-        color?: import("../utils/Frame.svelte").FrameColor;
-        rounded?: boolean;
-        border?: boolean;
-        shadow?: boolean;
-        node?: HTMLElement | undefined;
-        use?: import("svelte/action").Action<HTMLElement, any>;
-        options?: object;
-        class?: string;
-        role?: string;
-        open?: boolean;
-        transition?: (node: HTMLElement, params: any) => import("svelte/transition").TransitionConfig;
-        params?: any;
-    } & {
-        multiple?: boolean;
-        flush?: boolean;
-        activeClass?: string;
-        inactiveClass?: string;
-        defaultClass?: string;
-        classActive?: string;
-        classInactive?: string;
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        default: {};
-    };
+    slots: {};
 };
-export type AccordionProps = typeof __propDef.props;
+type AccordionProps_ = typeof __propDef.props;
+export { AccordionProps_ as AccordionProps };
 export type AccordionEvents = typeof __propDef.events;
 export type AccordionSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let multiple: $$Props['multiple'] = false;
- * @prop export let flush: $$Props['flush'] = false;
- * @prop export let activeClass: $$Props['activeClass'] = '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';
- * @prop export let inactiveClass: $$Props['inactiveClass'] = 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800';
- * @prop export let defaultClass: $$Props['defaultClass'] = 'text-gray-500 dark:text-gray-400';
- * @prop export let classActive: $$Props['classActive'] = '';
- * @prop export let classInactive: $$Props['classInactive'] = '';
+ * @props: children: any;
+ * @props:flush: any;
+ * @props:activeClass: any;
+ * @props:inactiveClass: any;
+ * @props:multiple: any = false;
+ * @props:class: string;
  */
-export default class Accordion extends SvelteComponentTyped<AccordionProps, AccordionEvents, AccordionSlots> {
+export default class Accordion extends SvelteComponentTyped<AccordionProps_, AccordionEvents, AccordionSlots> {
 }
-export {};

package/dist/accordion/AccordionItem.svelte

@@ -1,75 +1,64 @@
-<script>import { getContext, onMount } from "svelte";
-import { writable } from "svelte/store";
-import { blur, fade, fly, slide } from "svelte/transition";
-import { twMerge } from "tailwind-merge";
-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-sm":
-      return blur(node, params);
-    case "fly":
-      return fly(node, params);
-    case "fade":
-      return fade(node, params);
-    default:
-      return slide(node, params);
-  }
-};
-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]);
+<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";
+  import type { BaseThemes } from "../theme";
+  import clsx from "clsx";
+
+  let { children, header, arrowup, arrowdown, open = $bindable(false), activeClass, inactiveClass, transition = slide, params, class: className }: Props = $props();
+
+  // Theme context
+  const context = getContext<BaseThemes>("themeConfig");
+  // Use theme context if available, otherwise fallback to default
+  const accordionitemTheme = context?.accordionitem || accordionitem;
+
+  const ctx: AccordionCtxType = getContext("ctx") ?? {};
+
+  // single selection
+  const self = {};
+  const selected = ctx.selected ?? writable();
+
+  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()), clsx(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}
@@ -78,21 +67,14 @@ $: contentClass = twMerge([ctx.flush ? paddingFlush : paddingDefault, ctx.flush
 @component
 [Go to docs](https://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,60 +1,28 @@
 import { SvelteComponentTyped } from "svelte";
-import type { TransitionParamTypes, TransitionTypes } 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;
-        class?: string;
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        header: {};
-        arrowup: {};
-        arrowdown: {};
-        default: {};
-    };
+    slots: {};
 };
-export type AccordionItemProps = typeof __propDef.props;
+type AccordionItemProps_ = typeof __propDef.props;
+export { AccordionItemProps_ as AccordionItemProps };
 export type AccordionItemEvents = typeof __propDef.events;
 export type AccordionItemSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://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 default class AccordionItem extends SvelteComponentTyped<AccordionItemProps_, AccordionItemEvents, AccordionItemSlots> {
 }
-export {};

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,80 @@
+export declare const accordion: import("tailwind-variants").TVReturnType<{
+    flush: {
+        true: string;
+        false: string;
+    };
+}, undefined, "w-full text-gray-500 dark:text-gray-400", {
+    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", 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, {
+    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, 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 dark:hover: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,35 @@
+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;
+    multiple?: boolean;
+}
+interface AccordionProps extends HTMLAttributes<HTMLDivElement> {
+    children: Snippet;
+    flush?: boolean;
+    multiple?: 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;
+}
+export type { AccordionCtxType, AccordionProps, AccordionItemProps };

package/dist/accordion/type.js

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