@pajohns/flowbite-svelte 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,89 @@
+export * from "./uiHelpers.svelte.js";
+export * from "./utils";
+export * from "./theme";
+export { getTheme } from "./theme/themeUtils";
+export * from "./accordion";
+export * from "./alert";
+export * from "./avatar";
+export * from "./badge";
+export * from "./banner";
+export * from "./bottom-navigation";
+export * from "./breadcrumb";
+export * from "./button-group";
+export * from "./buttons";
+export * from "./card";
+export * from "./carousel";
+export * from "./clipboard";
+export * from "./darkmode";
+export * from "./datepicker";
+export * from "./device-mockups";
+export * from "./dialog";
+export * from "./dropdown";
+export * from "./drawer";
+export * from "./footer";
+export * from "./gallery";
+export * from "./indicator";
+export * from "./kbd";
+export * from "./list-group";
+export * from "./mega-menu";
+export * from "./modal";
+export * from "./navbar";
+export * from "./pagination";
+export * from "./popover";
+export * from "./progress";
+export * from "./rating";
+export * from "./sidebar";
+export * from "./skeleton";
+export * from "./speed-dial";
+export * from "./spinner";
+export * from "./step-indicator";
+export * from "./stepper";
+export * from "./tabs";
+export * from "./table";
+export * from "./timeline";
+export * from "./toast";
+export * from "./toolbar";
+export * from "./tooltip";
+export * from "./utils";
+export * from "./video";
+export * from "./forms/button-toggle";
+export * from "./forms/checkbox";
+export * from "./forms/dropzone";
+export * from "./forms/fileupload";
+export * from "./forms/floating-label";
+export * from "./forms/helper";
+export * from "./forms/input-field";
+export * from "./forms/input-addon";
+export * from "./forms/label";
+export * from "./forms/phoneinput";
+export * from "./forms/select";
+export * from "./forms/radio";
+export * from "./forms/range";
+export * from "./forms/search";
+export * from "./forms/tags";
+export * from "./forms/textarea";
+export * from "./forms/timepicker";
+export * from "./forms/toggle";
+export * from "./typography/a";
+export * from "./typography/blockquote";
+export * from "./typography/descriptionlist";
+export * from "./typography/heading";
+export * from "./typography/hr";
+export * from "./typography/img";
+export * from "./typography/layout";
+export * from "./typography/list";
+export * from "./typography/mark";
+export * from "./typography/paragraph";
+export * from "./typography/secondary";
+export * from "./typography/span";
+export * from "./video";
+export * from "./utils";
+export * from "./types";
+export * from "./clipboard-manager";
+export * from "./command-palette";
+export * from "./kanban";
+export * from "./scroll-spy";
+export * from "./split-pane";
+export * from "./tour";
+export * from "./virtuallist";
+export * from "./virtual-masonry";

package/dist/index.js

@@ -0,0 +1,97 @@
+// utils/helpers
+export * from "./uiHelpers.svelte.js";
+// utils
+export * from "./utils";
+// theme
+// export { default as ThemeProvider } from "./theme/ThemeProvider.svelte";
+export * from "./theme";
+export { getTheme } from "./theme/themeUtils";
+// components
+export * from "./accordion";
+export * from "./alert";
+export * from "./avatar";
+export * from "./badge";
+export * from "./banner";
+export * from "./bottom-navigation";
+export * from "./breadcrumb";
+export * from "./button-group";
+export * from "./buttons";
+export * from "./card";
+export * from "./carousel";
+export * from "./clipboard";
+export * from "./darkmode";
+export * from "./datepicker";
+export * from "./device-mockups";
+export * from "./dialog";
+export * from "./dropdown";
+export * from "./drawer";
+export * from "./footer";
+export * from "./gallery";
+export * from "./indicator";
+export * from "./kbd";
+export * from "./list-group";
+export * from "./mega-menu";
+export * from "./modal";
+export * from "./navbar";
+export * from "./pagination";
+export * from "./popover";
+export * from "./progress";
+export * from "./rating";
+export * from "./sidebar";
+export * from "./skeleton";
+export * from "./speed-dial";
+export * from "./spinner";
+export * from "./step-indicator";
+export * from "./stepper";
+export * from "./tabs";
+export * from "./table";
+export * from "./timeline";
+export * from "./toast";
+export * from "./toolbar";
+export * from "./tooltip";
+export * from "./utils";
+export * from "./video";
+// forms
+export * from "./forms/button-toggle";
+export * from "./forms/checkbox";
+export * from "./forms/dropzone";
+export * from "./forms/fileupload";
+export * from "./forms/floating-label";
+export * from "./forms/helper";
+export * from "./forms/input-field";
+export * from "./forms/input-addon";
+export * from "./forms/label";
+export * from "./forms/phoneinput";
+export * from "./forms/select";
+export * from "./forms/radio";
+export * from "./forms/range";
+export * from "./forms/search";
+export * from "./forms/tags";
+export * from "./forms/textarea";
+export * from "./forms/timepicker";
+export * from "./forms/toggle";
+// typography
+export * from "./typography/a";
+export * from "./typography/blockquote";
+export * from "./typography/descriptionlist";
+export * from "./typography/heading";
+export * from "./typography/hr";
+export * from "./typography/img";
+export * from "./typography/layout";
+export * from "./typography/list";
+export * from "./typography/mark";
+export * from "./typography/paragraph";
+export * from "./typography/secondary";
+export * from "./typography/span";
+export * from "./video";
+export * from "./utils";
+export * from "./types";
+// extend
+export * from "./clipboard-manager";
+export * from "./command-palette";
+export * from "./kanban";
+export * from "./scroll-spy";
+export * from "./split-pane";
+export * from "./tour";
+export * from "./virtuallist";
+export * from "./virtual-masonry";

package/dist/indicator/Indicator.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+  import { indicator } from "./theme";
+  import clsx from "clsx";
+  import type { IndicatorProps } from "..";
+  import { getTheme } from "../theme/themeUtils";
+
+  let { children, color = "primary", cornerStyle = "circular", size = "md", border = false, placement, offset = true, class: className, ...restProps }: IndicatorProps = $props();
+
+  const theme = $derived(getTheme("indicator"));
+
+  let hasChildren = $derived(!!children);
+  const base = $derived(
+    indicator({
+      color,
+      size,
+      cornerStyle,
+      border,
+      placement,
+      offset,
+      hasChildren,
+      class: clsx(theme, className)
+    })
+  );
+</script>
+
+<div {...restProps} class={base}>
+  {#if children}
+    {@render children()}
+  {/if}
+</div>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[IndicatorProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1099)
+## Props
+@prop children
+@prop color = "primary"
+@prop cornerStyle = "circular"
+@prop size = "md"
+@prop border = false
+@prop placement
+@prop offset = true
+@prop class: className
+@prop ...restProps
+-->

package/dist/indicator/Indicator.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { IndicatorProps } from "..";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [IndicatorProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1099)
+ * ## Props
+ * @prop children
+ * @prop color = "primary"
+ * @prop cornerStyle = "circular"
+ * @prop size = "md"
+ * @prop border = false
+ * @prop placement
+ * @prop offset = true
+ * @prop class: className
+ * @prop ...restProps
+ */
+declare const Indicator: import("svelte").Component<IndicatorProps, {}, "">;
+type Indicator = ReturnType<typeof Indicator>;
+export default Indicator;

package/dist/indicator/index.d.ts

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

package/dist/indicator/index.js

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

package/dist/indicator/theme.d.ts

@@ -0,0 +1,177 @@
+import { type VariantProps } from "tailwind-variants";
+export type IndicatorVariants = VariantProps<typeof indicator>;
+export declare const indicator: 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;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    cornerStyle: {
+        rounded: string;
+        circular: string;
+    };
+    border: {
+        true: string;
+        false: {};
+    };
+    hasChildren: {
+        true: string;
+        false: {};
+    };
+    placement: {
+        default: string;
+        "top-left": string;
+        "top-center": string;
+        "top-right": string;
+        "center-left": string;
+        center: string;
+        "center-right": string;
+        "bottom-left": string;
+        "bottom-center": string;
+        "bottom-right": string;
+    };
+    offset: {
+        true: {};
+        false: {};
+    };
+}, undefined, "shrink-0", {
+    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;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    cornerStyle: {
+        rounded: string;
+        circular: string;
+    };
+    border: {
+        true: string;
+        false: {};
+    };
+    hasChildren: {
+        true: string;
+        false: {};
+    };
+    placement: {
+        default: string;
+        "top-left": string;
+        "top-center": string;
+        "top-right": string;
+        "center-left": string;
+        center: string;
+        "center-right": string;
+        "bottom-left": string;
+        "bottom-center": string;
+        "bottom-right": string;
+    };
+    offset: {
+        true: {};
+        false: {};
+    };
+}, 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;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    cornerStyle: {
+        rounded: string;
+        circular: string;
+    };
+    border: {
+        true: string;
+        false: {};
+    };
+    hasChildren: {
+        true: string;
+        false: {};
+    };
+    placement: {
+        default: string;
+        "top-left": string;
+        "top-center": string;
+        "top-right": string;
+        "center-left": string;
+        center: string;
+        "center-right": string;
+        "bottom-left": string;
+        "bottom-center": string;
+        "bottom-right": string;
+    };
+    offset: {
+        true: {};
+        false: {};
+    };
+}, undefined, "shrink-0", unknown, unknown, undefined>>;

package/dist/indicator/theme.js

@@ -0,0 +1,114 @@
+import { tv } from "tailwind-variants";
+export const indicator = tv({
+    base: "shrink-0",
+    variants: {
+        color: {
+            // 'primary' secondary 'gray' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose'
+            primary: "bg-primary-500",
+            secondary: "bg-secondary-500",
+            gray: "bg-gray-200",
+            red: "bg-red-500",
+            orange: "bg-orange-600",
+            amber: "bg-amber-500",
+            yellow: "bg-yellow-300",
+            lime: "bg-lime-500",
+            green: "bg-green-500",
+            emerald: "bg-emerald-500",
+            teal: "bg-teal-500",
+            cyan: "bg-cyan-500",
+            sky: "bg-sky-500",
+            blue: "bg-blue-500",
+            indigo: "bg-indigo-500",
+            violet: "bg-violet-500",
+            purple: "bg-purple-500",
+            fuchsia: "bg-fuchsia-500",
+            pink: "bg-pink-500",
+            rose: "bg-rose-500"
+        },
+        size: {
+            xs: "w-2 h-2",
+            sm: "w-2.5 h-2.5",
+            md: "w-3 h-3",
+            lg: "w-3.5 h-3.5",
+            xl: "w-6 h-6"
+        },
+        cornerStyle: {
+            rounded: "rounded-sm",
+            circular: "rounded-full"
+        },
+        border: {
+            true: "border border-gray-300 dark:border-gray-300",
+            false: {}
+        },
+        hasChildren: {
+            true: "inline-flex items-center justify-center",
+            false: {}
+        },
+        placement: {
+            default: "",
+            "top-left": "absolute top-0 start-0",
+            "top-center": "absolute top-0 start-1/2 -translate-x-1/2 rtl:translate-x-1/2",
+            "top-right": "absolute top-0 end-0",
+            "center-left": "absolute top-1/2 -translate-y-1/2 start-0",
+            center: "absolute top-1/2 -translate-y-1/2 start-1/2 -translate-x-1/2 rtl:translate-x-1/2",
+            "center-right": "absolute top-1/2 -translate-y-1/2 end-0",
+            "bottom-left": "absolute bottom-0 start-0",
+            "bottom-center": "absolute bottom-0 start-1/2 -translate-x-1/2 rtl:translate-x-1/2",
+            "bottom-right": "absolute bottom-0 end-0"
+        },
+        offset: {
+            true: {},
+            false: {}
+        }
+    },
+    compoundVariants: [
+        {
+            placement: "top-left",
+            offset: true,
+            class: "-translate-x-1/3 rtl:translate-x-1/3 -translate-y-1/3"
+        },
+        {
+            placement: "top-center",
+            offset: true,
+            class: "-translate-y-1/3"
+        },
+        {
+            placement: "top-right",
+            offset: true,
+            class: "translate-x-1/3 rtl:-translate-x-1/3 -translate-y-1/3"
+        },
+        {
+            placement: "center-left",
+            offset: true,
+            class: "-translate-x-1/3 rtl:translate-x-1/3"
+        },
+        {
+            placement: "center-right",
+            offset: true,
+            class: "translate-x-1/3 rtl:-translate-x-1/3"
+        },
+        {
+            placement: "bottom-left",
+            offset: true,
+            class: "-translate-x-1/3 rtl:translate-x-1/3 translate-y-1/3"
+        },
+        {
+            placement: "bottom-center",
+            offset: true,
+            class: "translate-y-1/3"
+        },
+        {
+            placement: "bottom-right",
+            offset: true,
+            class: "translate-x-1/3 rtl:-translate-x-1/3 translate-y-1/3"
+        }
+    ],
+    defaultVariants: {
+        color: "primary",
+        size: "md",
+        cornerStyle: "circular",
+        border: false,
+        offset: true,
+        hasChildren: false
+    }
+});

package/dist/kanban/KanbanBoard.svelte

@@ -0,0 +1,99 @@
+<script lang="ts">
+  import type { KanbanBoardProps, KanbanCardType, KanbanColumnType } from "../types";
+  import clsx from "clsx";
+  import { kanbanBoard } from "./theme";
+  import { getTheme } from "../theme/themeUtils";
+  import KanbanCard from "./KanbanCard.svelte";
+
+  let {
+    columns = $bindable([]),
+    onMove = (_card: KanbanCardType, _from: KanbanColumnType, _to: KanbanColumnType) => {},
+    onAddCard = (_col: KanbanColumnType) => {},
+    cardProps,
+    class: className,
+    classes,
+    ...restProps
+  }: KanbanBoardProps = $props();
+
+  const theme = $derived(getTheme("kanbanBoard"));
+
+  // Changed from KanbanCard to KanbanCardType
+  let draggedCard = $state<KanbanCardType | null>(null);
+  let sourceColumnId = $state<string | number | null>(null);
+  let dragOverColumnId = $state<string | number | null>(null);
+
+  const styles = kanbanBoard();
+
+  // Changed parameter type from KanbanCard to KanbanCardType
+  function handleDragStart(card: KanbanCardType, colId: string | number) {
+    draggedCard = card;
+    sourceColumnId = colId;
+  }
+
+  function handleDragOver(e: DragEvent, colId: string | number) {
+    e.preventDefault();
+    dragOverColumnId = colId;
+  }
+
+  function handleDragLeave(e: DragEvent) {
+    const currentTarget = e.currentTarget as HTMLElement;
+    const relatedTarget = e.relatedTarget as Node | null;
+    if (!relatedTarget || !currentTarget.contains(relatedTarget)) {
+      dragOverColumnId = null;
+    }
+  }
+
+  function handleDrop(e: DragEvent, targetColId: string | number) {
+    e.preventDefault();
+    dragOverColumnId = null;
+
+    if (draggedCard === null || sourceColumnId === null) return;
+    if (sourceColumnId === targetColId) {
+      draggedCard = null;
+      sourceColumnId = null;
+      return;
+    }
+
+    const fromCol = columns.find((c) => c.id === sourceColumnId);
+    const toCol = columns.find((c) => c.id === targetColId);
+    if (!fromCol || !toCol) return;
+
+    fromCol.cards = fromCol.cards.filter((c) => c.id !== draggedCard!.id);
+    toCol.cards = [...toCol.cards, draggedCard!];
+
+    onMove(draggedCard, fromCol, toCol);
+
+    draggedCard = null;
+    sourceColumnId = null;
+  }
+
+  function handleDragEnd() {
+    draggedCard = null;
+    sourceColumnId = null;
+    dragOverColumnId = null;
+  }
+</script>
+
+<div {...restProps} class={styles.container({ class: clsx(theme?.container, className) })}>
+  {#each columns as col (col.id)}
+    <div
+      role="group"
+      aria-label={`${col.title} column drop zone`}
+      class={styles.column({ isDragOver: dragOverColumnId === col.id, class: clsx(theme?.column, classes?.column) })}
+      ondragover={(e) => handleDragOver(e, col.id)}
+      ondragleave={(e) => handleDragLeave(e)}
+      ondrop={(e) => handleDrop(e, col.id)}
+      style={col.color ? `border-top: 4px solid ${col.color}` : ""}
+    >
+      <h2 class={styles.columnTitle({ class: clsx(theme?.columnTitle, classes?.columnTitle) })}>{col.title}</h2>
+
+      <div class={styles.cardList({ class: clsx(theme?.cardList, classes?.cardList) })} role="list" aria-label={`${col.title} cards`}>
+        {#each col.cards as card (card.id)}
+          <KanbanCard {card} {classes} {...cardProps} isDragging={draggedCard?.id === card.id} onDragStart={() => handleDragStart(card, col.id)} onDragEnd={handleDragEnd} />
+        {/each}
+      </div>
+
+      <button class={styles.addButton({ class: clsx(theme?.addButton, classes?.addButton) })} onclick={() => onAddCard(col)} aria-label={`Add card to ${col.title}`}>+ Add card</button>
+    </div>
+  {/each}
+</div>

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

@@ -0,0 +1,4 @@
+import type { KanbanBoardProps } from "../types";
+declare const KanbanBoard: import("svelte").Component<KanbanBoardProps, {}, "columns">;
+type KanbanBoard = ReturnType<typeof KanbanBoard>;
+export default KanbanBoard;