@pajohns/flowbite-svelte 0.1.0

package/dist/accordion/AccordionItem.svelte

@@ -0,0 +1,131 @@
+<script lang="ts">
+  import type { AccordionItemProps, ParamsType } from "..";
+  import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
+  import { useSingleSelection } from "../utils/singleselection.svelte";
+  import clsx from "clsx";
+  import { getAccordionContext } from "../context";
+  import { slide } from "svelte/transition";
+  import { accordionItem } from "./theme";
+  import { untrack } from "svelte";
+
+  let {
+    children,
+    header,
+    arrowup,
+    arrowdown,
+    open = $bindable(false),
+    activeClass,
+    inactiveClass,
+    transitionType = slide,
+    transitionParams,
+    class: className,
+    classes,
+    headerClass,
+    contentClass
+  }: AccordionItemProps = $props();
+
+  warnThemeDeprecation(
+    "AccordionItem",
+    untrack(() => ({
+      headerClass,
+      contentClass,
+      activeClass,
+      inactiveClass
+    })),
+    {
+      headerClass: "button",
+      contentClass: "content",
+      activeClass: "active",
+      inactiveClass: "inactive"
+    }
+  );
+
+  let styling: typeof classes = $derived(classes ?? { button: headerClass, content: contentClass, active: activeClass, inactive: inactiveClass });
+
+  // Get context - it will be undefined if used outside Accordion
+  const ctx = getAccordionContext();
+
+  const ctxTransitionType = $derived(ctx?.transitionType ?? transitionType);
+  // Check if transitionType is explicitly set to undefined in props
+  const useTransition = $derived(transitionType === "none" ? false : ctxTransitionType === "none" ? false : true);
+
+  // Theme context
+  const theme = $derived(getTheme("accordionItem"));
+
+  // single selection
+  const self = Symbol("accordion-item");
+
+  const updateSingleSelection = useSingleSelection<symbol>((value) => (open = value === self));
+
+  $effect(() => {
+    updateSingleSelection(open, self);
+  });
+
+  const handleToggle = () => {
+    open = !open;
+  };
+
+  const { base, button, content, active, inactive } = $derived(accordionItem({ flush: ctx?.flush, open }));
+
+  let buttonClass = $derived(clsx(open && !ctx?.flush && (styling.active || ctx?.activeClass || active()), !open && !ctx?.flush && (styling.inactive || ctx?.inactiveClass || inactive())));
+</script>
+
+<h2 class={base({ class: clsx(theme?.base, className) })}>
+  <button type="button" onclick={handleToggle} class={button({ class: clsx(buttonClass, theme?.button, styling.button) })} 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>
+      {:else}
+        {@render arrowdown()}
+      {/if}
+    {/if}
+  </button>
+</h2>
+
+{#if useTransition}
+  {#if open && transitionType !== "none"}
+    <div transition:transitionType={transitionParams as ParamsType}>
+      <div class={content({ class: clsx(theme?.content, styling.content) })}>
+        {@render children()}
+      </div>
+    </div>
+  {/if}
+{:else}
+  <div class={open ? "block" : "hidden"}>
+    <div class={content({ class: clsx(theme?.content, styling.content) })}>
+      {@render children()}
+    </div>
+  </div>
+{/if}
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[AccordionItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L207)
+## Props
+@prop children
+@prop header
+@prop arrowup
+@prop arrowdown
+@prop open = $bindable(false)
+@prop activeClass
+@prop inactiveClass
+@prop transitionType = slide
+@prop transitionParams
+@prop class: className
+@prop classes
+@prop headerClass
+@prop contentClass
+-->

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

@@ -0,0 +1,23 @@
+import type { AccordionItemProps } from "..";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [AccordionItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L207)
+ * ## Props
+ * @prop children
+ * @prop header
+ * @prop arrowup
+ * @prop arrowdown
+ * @prop open = $bindable(false)
+ * @prop activeClass
+ * @prop inactiveClass
+ * @prop transitionType = slide
+ * @prop transitionParams
+ * @prop class: className
+ * @prop classes
+ * @prop headerClass
+ * @prop contentClass
+ */
+declare const AccordionItem: import("svelte").Component<AccordionItemProps, {}, "open">;
+type AccordionItem = ReturnType<typeof AccordionItem>;
+export default AccordionItem;

package/dist/accordion/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Accordion } from "./Accordion.svelte";
+export { default as AccordionItem } from "./AccordionItem.svelte";
+export { accordion, accordionItem } from "./theme";

package/dist/accordion/index.js

@@ -0,0 +1,3 @@
+export { default as Accordion } from "./Accordion.svelte";
+export { default as AccordionItem } from "./AccordionItem.svelte";
+export { accordion, accordionItem } from "./theme";

package/dist/accordion/theme.d.ts

@@ -0,0 +1,96 @@
+import type { Classes } from "../theme/themeUtils";
+import { type VariantProps } from "tailwind-variants";
+export type AccordionVariants = VariantProps<typeof accordion>;
+export type AccordionItemVariants = VariantProps<typeof accordionItem> & Classes<typeof accordionItem>;
+export declare const accordion: import("tailwind-variants").TVReturnType<{
+    color: {
+        primary: string;
+        secondary: string;
+    };
+    flush: {
+        true: string;
+        false: string;
+    };
+}, undefined, "w-full", {
+    color: {
+        primary: string;
+        secondary: string;
+    };
+    flush: {
+        true: string;
+        false: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    color: {
+        primary: string;
+        secondary: string;
+    };
+    flush: {
+        true: string;
+        false: string;
+    };
+}, undefined, "w-full", 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,59 @@
+import { tv } from "tailwind-variants";
+export const accordion = tv({
+    base: "w-full",
+    variants: {
+        color: {
+            primary: "text-primary-500 dark:text-primary-400",
+            secondary: "text-secondary-500 dark:text-secondary-400"
+        },
+        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/alert/Alert.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+  import { fade } from "svelte/transition";
+  import { alert } from "./theme";
+  import clsx from "clsx";
+  import { type AlertProps, type ParamsType } from "..";
+  import CloseButton from "../utils/CloseButton.svelte";
+  import { getTheme } from "../theme/themeUtils";
+  import { createDismissableContext } from "../utils/dismissable";
+
+  let {
+    children,
+    icon,
+    alertStatus = $bindable(true),
+    closeIcon: CloseIcon,
+    color = "primary",
+    rounded = true,
+    border,
+    class: className,
+    dismissable,
+    transition = fade,
+    params,
+    ...restProps
+  }: AlertProps = $props();
+
+  // Theme context
+  const theme = $derived(getTheme("alert"));
+
+  let divCls = $derived(
+    alert({
+      color,
+      rounded,
+      border,
+      icon: !!icon,
+      dismissable,
+      class: clsx(theme, className)
+    })
+  );
+
+  let ref: HTMLDivElement | undefined = $state(undefined);
+
+  function close() {
+    if (ref?.dispatchEvent(new Event("close", { bubbles: true, cancelable: true }))) {
+      alertStatus = false;
+    }
+  }
+
+  createDismissableContext(close);
+</script>
+
+{#if alertStatus}
+  <div role="alert" bind:this={ref} {...restProps} transition:transition={params as ParamsType} class={divCls}>
+    {#if icon}
+      {@render icon()}
+    {/if}
+
+    {#if icon || dismissable}
+      <div>
+        {@render children()}
+      </div>
+    {:else}
+      {@render children()}
+    {/if}
+
+    {#if dismissable}
+      {#if CloseIcon}
+        <CloseButton class="-my-1.5 ms-auto -me-1.5" {color} ariaLabel="Remove alert">
+          <CloseIcon />
+        </CloseButton>
+      {:else}
+        <CloseButton class="-my-1.5 ms-auto -me-1.5" {color} ariaLabel="Remove alert" />
+      {/if}
+    {/if}
+  </div>
+{/if}
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[AlertProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L221)
+## Props
+@prop children
+@prop icon
+@prop alertStatus = $bindable(true)
+@prop closeIcon: CloseIcon
+@prop color = "primary"
+@prop rounded = true
+@prop border
+@prop class: className
+@prop dismissable
+@prop transition = fade
+@prop params
+@prop ...restProps
+-->

package/dist/alert/Alert.svelte.d.ts

@@ -0,0 +1,22 @@
+import { type AlertProps } from "..";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [AlertProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L221)
+ * ## Props
+ * @prop children
+ * @prop icon
+ * @prop alertStatus = $bindable(true)
+ * @prop closeIcon: CloseIcon
+ * @prop color = "primary"
+ * @prop rounded = true
+ * @prop border
+ * @prop class: className
+ * @prop dismissable
+ * @prop transition = fade
+ * @prop params
+ * @prop ...restProps
+ */
+declare const Alert: import("svelte").Component<AlertProps, {}, "alertStatus">;
+type Alert = ReturnType<typeof Alert>;
+export default Alert;

package/dist/alert/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Alert } from "./Alert.svelte";
+export { alert } from "./theme";

package/dist/alert/index.js

@@ -0,0 +1,2 @@
+export { default as Alert } from "./Alert.svelte";
+export { alert } from "./theme";

package/dist/alert/theme.d.ts

@@ -0,0 +1,108 @@
+import { type VariantProps } from "tailwind-variants";
+export type AlertVariants = VariantProps<typeof alert>;
+export declare const alert: import("tailwind-variants").TVReturnType<{
+    color: {
+        primary: string;
+        secondary: string;
+        gray: string;
+        red: string;
+        orange: string;
+        amber: string;
+        yellow: string;
+        lime: string;
+        green: string;
+        emerald: string;
+        teal: string;
+        cyan: string;
+        sky: string;
+        blue: string;
+        indigo: string;
+        violet: string;
+        purple: string;
+        fuchsia: string;
+        pink: string;
+        rose: string;
+    };
+    rounded: {
+        true: string;
+    };
+    border: {
+        true: string;
+    };
+    icon: {
+        true: string;
+    };
+    dismissable: {
+        true: string;
+    };
+}, undefined, "p-4 gap-3 text-sm", {
+    color: {
+        primary: string;
+        secondary: string;
+        gray: string;
+        red: string;
+        orange: string;
+        amber: string;
+        yellow: string;
+        lime: string;
+        green: string;
+        emerald: string;
+        teal: string;
+        cyan: string;
+        sky: string;
+        blue: string;
+        indigo: string;
+        violet: string;
+        purple: string;
+        fuchsia: string;
+        pink: string;
+        rose: string;
+    };
+    rounded: {
+        true: string;
+    };
+    border: {
+        true: string;
+    };
+    icon: {
+        true: string;
+    };
+    dismissable: {
+        true: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    color: {
+        primary: string;
+        secondary: string;
+        gray: string;
+        red: string;
+        orange: string;
+        amber: string;
+        yellow: string;
+        lime: string;
+        green: string;
+        emerald: string;
+        teal: string;
+        cyan: string;
+        sky: string;
+        blue: string;
+        indigo: string;
+        violet: string;
+        purple: string;
+        fuchsia: string;
+        pink: string;
+        rose: string;
+    };
+    rounded: {
+        true: string;
+    };
+    border: {
+        true: string;
+    };
+    icon: {
+        true: string;
+    };
+    dismissable: {
+        true: string;
+    };
+}, undefined, "p-4 gap-3 text-sm", unknown, unknown, undefined>>;