@pajohns/flowbite-svelte 0.1.0

package/dist/kanban/KanbanCard.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+  import clsx from "clsx";
+  import type { KanbanCardProps } from "../types";
+  import { kanbanCard } from "./theme";
+  import { getTheme } from "../theme/themeUtils";
+
+  let { card, isDragging = false, onDragStart, onDragEnd, classes, ...restProps }: KanbanCardProps = $props();
+
+  const theme = $derived(getTheme("kanbanCard"));
+  const styles = kanbanCard();
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<article
+  role="listitem"
+  draggable="true"
+  {...restProps}
+  ondragstart={(ev) => onDragStart?.(card, ev)}
+  ondragend={(ev) => onDragEnd?.(ev)}
+  tabindex="0"
+  aria-grabbed={isDragging}
+  aria-label={card.title}
+  class={styles.card({ isDragging, class: clsx(theme?.card, classes?.card) })}
+>
+  <p class={styles.cardTitle({ class: clsx(theme?.cardTitle, classes?.cardTitle) })}>
+    {card.title}
+  </p>
+
+  {#if card.description}
+    <p class={styles.cardDescription({ class: clsx(theme?.cardDescription, classes?.cardDescription) })}>
+      {card.description}
+    </p>
+  {/if}
+
+  {#if card.tags?.length}
+    <div class={styles.cardTags({ class: clsx(theme?.cardTags, classes?.cardTags) })}>
+      {#each card.tags as tag, i (i)}
+        <span class={styles.cardTag({ class: clsx(theme?.cardTag, classes?.cardTag) })}>
+          {tag}
+        </span>
+      {/each}
+    </div>
+  {/if}
+</article>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[KanbanCardProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2230)
+## Props
+@prop card
+@prop isDragging = false
+@prop onDragStart
+@prop onDragEnd
+@prop classes
+@prop ...restProps
+-->

package/dist/kanban/KanbanCard.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { KanbanCardProps } from "../types";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [KanbanCardProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2230)
+ * ## Props
+ * @prop card
+ * @prop isDragging = false
+ * @prop onDragStart
+ * @prop onDragEnd
+ * @prop classes
+ * @prop ...restProps
+ */
+declare const KanbanCard: import("svelte").Component<KanbanCardProps, {}, "">;
+type KanbanCard = ReturnType<typeof KanbanCard>;
+export default KanbanCard;

package/dist/kanban/index.d.ts

@@ -0,0 +1,3 @@
+export { default as KanbanBoard } from "./KanbanBoard.svelte";
+export { default as KanbanCard } from "./KanbanCard.svelte";
+export { kanbanBoard } from "./theme";

package/dist/kanban/index.js

@@ -0,0 +1,3 @@
+export { default as KanbanBoard } from "./KanbanBoard.svelte";
+export { default as KanbanCard } from "./KanbanCard.svelte";
+export { kanbanBoard } from "./theme";

package/dist/kanban/theme.d.ts

@@ -0,0 +1,108 @@
+import { type VariantProps } from "tailwind-variants";
+import type { Classes } from "../theme/themeUtils";
+export type KanbanBoardVariants = VariantProps<typeof kanbanBoard> & Classes<typeof kanbanBoard>;
+export type KanbanCardVariants = VariantProps<typeof kanbanCard> & Classes<typeof kanbanCard>;
+export declare const kanbanBoard: import("tailwind-variants").TVReturnType<{
+    isDragOver: {
+        true: {
+            column: string;
+        };
+    };
+    isDragging: {
+        true: {
+            card: string;
+        };
+    };
+}, {
+    container: string;
+    column: string;
+    columnTitle: string;
+    cardList: string;
+    card: string;
+    cardTitle: string;
+    cardDescription: string;
+    cardTags: string;
+    cardTag: string;
+    addButton: string;
+}, undefined, {
+    isDragOver: {
+        true: {
+            column: string;
+        };
+    };
+    isDragging: {
+        true: {
+            card: string;
+        };
+    };
+}, {
+    container: string;
+    column: string;
+    columnTitle: string;
+    cardList: string;
+    card: string;
+    cardTitle: string;
+    cardDescription: string;
+    cardTags: string;
+    cardTag: string;
+    addButton: string;
+}, import("tailwind-variants").TVReturnType<{
+    isDragOver: {
+        true: {
+            column: string;
+        };
+    };
+    isDragging: {
+        true: {
+            card: string;
+        };
+    };
+}, {
+    container: string;
+    column: string;
+    columnTitle: string;
+    cardList: string;
+    card: string;
+    cardTitle: string;
+    cardDescription: string;
+    cardTags: string;
+    cardTag: string;
+    addButton: string;
+}, undefined, unknown, unknown, undefined>>;
+export declare const kanbanCard: import("tailwind-variants").TVReturnType<{
+    isDragging: {
+        true: {
+            card: string;
+        };
+    };
+}, {
+    card: string;
+    cardTitle: string;
+    cardDescription: string;
+    cardTags: string;
+    cardTag: string;
+}, undefined, {
+    isDragging: {
+        true: {
+            card: string;
+        };
+    };
+}, {
+    card: string;
+    cardTitle: string;
+    cardDescription: string;
+    cardTags: string;
+    cardTag: string;
+}, import("tailwind-variants").TVReturnType<{
+    isDragging: {
+        true: {
+            card: string;
+        };
+    };
+}, {
+    card: string;
+    cardTitle: string;
+    cardDescription: string;
+    cardTags: string;
+    cardTag: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/kanban/theme.js

@@ -0,0 +1,43 @@
+import { tv } from "tailwind-variants";
+export const kanbanBoard = tv({
+    slots: {
+        container: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3 md:gap-4 p-2 md:p-4",
+        column: "w-full rounded-xl shadow-sm p-3 md:p-4 flex flex-col bg-surface-elevated text-surface-foreground transition-colors",
+        columnTitle: "text-sm md:text-base font-semibold mb-2 md:mb-3 dark:text-white",
+        cardList: "flex flex-col gap-2 flex-1 min-h-[60px]",
+        card: "bg-surface text-surface-foreground rounded-lg p-2.5 md:p-3 shadow-sm cursor-grab active:cursor-grabbing transition-all hover:bg-surface-hover hover:shadow-md",
+        cardTitle: "font-medium text-sm md:text-base",
+        cardDescription: "text-xs md:text-sm text-muted mt-1",
+        cardTags: "flex flex-wrap gap-1 mt-2",
+        cardTag: "text-[10px] md:text-xs bg-primary/10 text-primary px-1.5 md:px-2 py-0.5 rounded-full",
+        addButton: "mt-2 md:mt-3 w-full bg-primary text-primary-foreground rounded-lg py-1.5 text-xs md:text-sm dark:text-primary-500 font-medium hover:bg-primary/90 transition-colors focus:ring-2 focus:ring-primary focus:ring-offset-2"
+    },
+    variants: {
+        isDragOver: {
+            true: {
+                column: "ring-2 ring-primary"
+            }
+        },
+        isDragging: {
+            true: {
+                card: "opacity-50"
+            }
+        }
+    }
+});
+export const kanbanCard = tv({
+    slots: {
+        card: "bg-surface text-surface-foreground rounded-lg p-2.5 md:p-3 shadow-sm shadow-black/20 dark:shadow-white/10 cursor-grab active:cursor-grabbing transition-all hover:bg-surface-hover hover:shadow-md",
+        cardTitle: "font-medium text-sm md:text-base dark:text-white",
+        cardDescription: "text-xs md:text-sm text-muted mt-1 dark:text-white",
+        cardTags: "flex flex-wrap gap-1 mt-2 dark:text-white",
+        cardTag: "text-[10px] md:text-xs bg-primary/10 text-primary px-1.5 md:px-2 py-0.5 rounded-full dark:text-white"
+    },
+    variants: {
+        isDragging: {
+            true: {
+                card: "opacity-50"
+            }
+        }
+    }
+});

package/dist/kbd/Kbd.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import { kbd } from "./theme";
+  import clsx from "clsx";
+  import type { KbdProps } from "..";
+  import { getTheme } from "../theme/themeUtils";
+
+  let { children, class: className, ...restProps }: KbdProps = $props();
+
+  const theme = $derived(getTheme("kbd"));
+
+  const kbdCls = $derived(kbd({ class: clsx(theme, className) }));
+</script>
+
+<kbd {...restProps} class={kbdCls}>
+  {@render children()}
+</kbd>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[KbdProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1110)
+## Props
+@prop children
+@prop class: className
+@prop ...restProps
+-->

package/dist/kbd/Kbd.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { KbdProps } from "..";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [KbdProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1110)
+ * ## Props
+ * @prop children
+ * @prop class: className
+ * @prop ...restProps
+ */
+declare const Kbd: import("svelte").Component<KbdProps, {}, "">;
+type Kbd = ReturnType<typeof Kbd>;
+export default Kbd;

package/dist/kbd/index.d.ts

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

package/dist/kbd/index.js

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

package/dist/kbd/theme.d.ts

@@ -0,0 +1 @@
+export declare const kbd: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "px-2 py-1.5 text-xs font-semibold text-gray-800 bg-gray-100 border border-gray-200 rounded-lg dark:bg-gray-600 dark:text-gray-100 dark:border-gray-500", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "px-2 py-1.5 text-xs font-semibold text-gray-800 bg-gray-100 border border-gray-200 rounded-lg dark:bg-gray-600 dark:text-gray-100 dark:border-gray-500", unknown, unknown, undefined>>;

package/dist/kbd/theme.js

@@ -0,0 +1,4 @@
+import { tv } from "tailwind-variants";
+export const kbd = tv({
+    base: "px-2 py-1.5 text-xs font-semibold text-gray-800 bg-gray-100 border border-gray-200 rounded-lg dark:bg-gray-600 dark:text-gray-100 dark:border-gray-500"
+});

package/dist/list-group/Listgroup.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+  import { listGroup } from "./theme";
+  import clsx from "clsx";
+  import type { ListgroupProps } from "..";
+  import ListgroupItem from "./ListgroupItem.svelte";
+  import { getTheme } from "../theme/themeUtils";
+  import { setListGroupContext } from "../context";
+
+  let { children, items, active, onclick, horizontal, rounded, border, class: className, itemClass, iconClass, ...restProps }: ListgroupProps = $props();
+
+  const theme = $derived(getTheme("listGroup"));
+
+  const base = $derived(listGroup({ rounded, border, horizontal, class: clsx(theme, className) }));
+
+  let tag = $derived(active ? "div" : "ul");
+
+  // Create reactive context using getters
+  const context = {
+    get active() {
+      return active;
+    },
+    get horizontal() {
+      return horizontal;
+    }
+  };
+
+  setListGroupContext(context);
+
+  function createItemClickHandler() {
+    return function (event: MouseEvent) {
+      if (onclick) {
+        onclick(event);
+      }
+    };
+  }
+</script>
+
+<svelte:element this={tag} {...restProps} class={base}>
+  {#if items?.length}
+    {#each items as item, i (i)}
+      {#if children}
+        {@render children(item)}
+      {:else if typeof item === "string"}
+        <ListgroupItem href={undefined} class={clsx(itemClass)} iconClass={clsx(iconClass)} {active} {horizontal} onclick={createItemClickHandler()}>{item}</ListgroupItem>
+      {:else}
+        <ListgroupItem href={item.href} class={clsx(itemClass)} iconClass={clsx(iconClass)} {active} {horizontal} {...item} onclick={item.onclick ?? createItemClickHandler()} />
+      {/if}
+    {/each}
+  {:else}
+    {@render children?.(items?.[0] ?? "")}
+  {/if}
+</svelte:element>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[ListgroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1129)
+## Props
+@prop children
+@prop items
+@prop active
+@prop onclick
+@prop horizontal
+@prop rounded
+@prop border
+@prop class: className
+@prop itemClass
+@prop iconClass
+@prop ...restProps
+-->

package/dist/list-group/Listgroup.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { ListgroupProps } from "..";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [ListgroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1129)
+ * ## Props
+ * @prop children
+ * @prop items
+ * @prop active
+ * @prop onclick
+ * @prop horizontal
+ * @prop rounded
+ * @prop border
+ * @prop class: className
+ * @prop itemClass
+ * @prop iconClass
+ * @prop ...restProps
+ */
+declare const Listgroup: import("svelte").Component<ListgroupProps, {}, "">;
+type Listgroup = ReturnType<typeof Listgroup>;
+export default Listgroup;

package/dist/list-group/ListgroupItem.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+  import clsx from "clsx";
+  import type { ListgroupItemProps } from "..";
+  import { listGroupItem, type ListgroupItemVariants } from "./theme";
+  import { getTheme } from "../theme/themeUtils";
+  import { getListGroupContext } from "../context";
+
+  let { children, active, current, disabled, horizontal, name, Icon, class: className, iconClass = "me-2.5 h-15 w-15", ...restProps }: ListgroupItemProps = $props();
+
+  const theme = $derived(getTheme("listGroupItem"));
+
+  const listGroupCtx = getListGroupContext();
+  const finalActive = $derived(active ?? listGroupCtx?.active);
+  const finalHorizontal = $derived(horizontal ?? listGroupCtx?.horizontal);
+
+  let state: ListgroupItemVariants["state"] = $derived(disabled ? "disabled" : current ? "current" : "normal");
+  let itemClass = $derived(listGroupItem({ state, active: finalActive, horizontal: finalHorizontal, class: clsx(theme, className) }));
+</script>
+
+{#snippet nameOrChildren()}
+  {#if Icon}
+    <Icon class={clsx(iconClass)} />
+  {/if}
+  {#if children}
+    {@render children()}
+  {:else}
+    {name}
+  {/if}
+{/snippet}
+
+{#if restProps.href === undefined && !active}
+  <li class={itemClass}>
+    {@render nameOrChildren()}
+  </li>
+{:else if restProps.href === undefined}
+  <button type="button" {...restProps} class={itemClass} {disabled} aria-current={current}>
+    {@render nameOrChildren()}
+  </button>
+{:else}
+  <a {...restProps} class={itemClass} aria-current={current}>
+    {@render nameOrChildren()}
+  </a>
+{/if}
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[ListgroupItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1140)
+## Props
+@prop children
+@prop active
+@prop current
+@prop disabled
+@prop horizontal
+@prop name
+@prop Icon
+@prop class: className
+@prop iconClass = "me-2.5 h-15 w-15"
+@prop ...restProps
+-->

package/dist/list-group/ListgroupItem.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { ListgroupItemProps } from "..";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [ListgroupItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1140)
+ * ## Props
+ * @prop children
+ * @prop active
+ * @prop current
+ * @prop disabled
+ * @prop horizontal
+ * @prop name
+ * @prop Icon
+ * @prop class: className
+ * @prop iconClass = "me-2.5 h-15 w-15"
+ * @prop ...restProps
+ */
+declare const ListgroupItem: import("svelte").Component<ListgroupItemProps, {}, "">;
+type ListgroupItem = ReturnType<typeof ListgroupItem>;
+export default ListgroupItem;

package/dist/list-group/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Listgroup } from "./Listgroup.svelte";
+export { default as ListgroupItem } from "./ListgroupItem.svelte";
+export { listGroup, listGroupItem } from "./theme";

package/dist/list-group/index.js

@@ -0,0 +1,3 @@
+export { default as Listgroup } from "./Listgroup.svelte";
+export { default as ListgroupItem } from "./ListgroupItem.svelte";
+export { listGroup, listGroupItem } from "./theme";

package/dist/list-group/theme.d.ts

@@ -0,0 +1,86 @@
+import { type VariantProps } from "tailwind-variants";
+export type ListgroupVariants = VariantProps<typeof listGroup>;
+export type ListgroupItemVariants = VariantProps<typeof listGroupItem>;
+export declare const listGroup: import("tailwind-variants").TVReturnType<{
+    rounded: {
+        true: string;
+        false: string;
+    };
+    border: {
+        true: string;
+        false: string;
+    };
+    horizontal: {
+        true: string;
+        false: string;
+    };
+}, undefined, "flex bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400 divide-gray-200 dark:divide-gray-600", {
+    rounded: {
+        true: string;
+        false: string;
+    };
+    border: {
+        true: string;
+        false: string;
+    };
+    horizontal: {
+        true: string;
+        false: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    rounded: {
+        true: string;
+        false: string;
+    };
+    border: {
+        true: string;
+        false: string;
+    };
+    horizontal: {
+        true: string;
+        false: string;
+    };
+}, undefined, "flex bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400 divide-gray-200 dark:divide-gray-600", unknown, unknown, undefined>>;
+export declare const listGroupItem: import("tailwind-variants").TVReturnType<{
+    state: {
+        normal: string;
+        current: string;
+        disabled: string;
+    };
+    active: {
+        true: string;
+        false: string;
+    };
+    horizontal: {
+        true: string;
+        false: string;
+    };
+}, undefined, "py-2 px-4 w-full text-sm font-medium list-none flex items-center text-left gap-2", {
+    state: {
+        normal: string;
+        current: string;
+        disabled: string;
+    };
+    active: {
+        true: string;
+        false: string;
+    };
+    horizontal: {
+        true: string;
+        false: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    state: {
+        normal: string;
+        current: string;
+        disabled: string;
+    };
+    active: {
+        true: string;
+        false: string;
+    };
+    horizontal: {
+        true: string;
+        false: string;
+    };
+}, undefined, "py-2 px-4 w-full text-sm font-medium list-none flex items-center text-left gap-2", unknown, unknown, undefined>>;

package/dist/list-group/theme.js

@@ -0,0 +1,67 @@
+import { tv } from "tailwind-variants";
+export const listGroup = tv({
+    base: "flex bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400 divide-gray-200 dark:divide-gray-600",
+    variants: {
+        rounded: {
+            true: "rounded-lg",
+            false: ""
+        },
+        border: {
+            true: "border border-gray-200 dark:border-gray-700",
+            false: ""
+        },
+        horizontal: {
+            true: "flex-row divide-x",
+            false: "flex-col divide-y"
+        }
+    },
+    compoundVariants: [
+        {
+            border: true,
+            class: "divide-gray-200 dark:divide-gray-700"
+        }
+    ],
+    defaultVariants: {
+        rounded: true,
+        border: true,
+        horizontal: false
+    }
+});
+export const listGroupItem = tv({
+    base: "py-2 px-4 w-full text-sm font-medium list-none flex items-center text-left gap-2",
+    variants: {
+        state: {
+            normal: "",
+            current: "text-white bg-primary-700 dark:text-white dark:bg-gray-800",
+            disabled: "text-gray-900 bg-gray-100 dark:bg-gray-600 dark:text-gray-400"
+        },
+        active: {
+            true: "",
+            false: ""
+        },
+        horizontal: {
+            true: "first:rounded-s-lg last:rounded-e-lg",
+            false: "first:rounded-t-lg last:rounded-b-lg"
+        }
+    },
+    compoundVariants: [
+        {
+            active: true,
+            state: "disabled",
+            class: "cursor-not-allowed"
+        },
+        {
+            active: true,
+            state: "normal",
+            class: "hover:bg-gray-100 hover:text-primary-700 dark:hover:bg-gray-600 dark:hover:text-white focus:z-40 focus:outline-hidden focus:ring-2 focus:ring-primary-700 focus:text-primary-700 dark:focus:ring-gray-500 dark:focus:text-white"
+        }
+        // {
+        //   horizontal: true,
+        //   class: "focus:first:rounded-s-lg focus:last:rounded-e-lg"
+        // },
+        // {
+        //   horizontal: false,
+        //   class: "focus:first:rounded-t-lg focus:last:rounded-b-lg"
+        // }
+    ]
+});