@pajohns/flowbite-svelte 0.1.0

package/dist/spinner/index.js

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

package/dist/spinner/theme.d.ts

@@ -0,0 +1,120 @@
+import { type VariantProps } from "tailwind-variants";
+export type SpinnerVariants = VariantProps<typeof spinner>;
+export declare const spinner: import("tailwind-variants").TVReturnType<{
+    type: {
+        default: string;
+        dots: string;
+        bars: string;
+        pulse: string;
+        orbit: string;
+    };
+    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: {
+        "4": string;
+        "5": string;
+        "6": string;
+        "8": string;
+        "10": string;
+        "12": string;
+        "16": string;
+    };
+}, undefined, "inline-block", {
+    type: {
+        default: string;
+        dots: string;
+        bars: string;
+        pulse: string;
+        orbit: string;
+    };
+    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: {
+        "4": string;
+        "5": string;
+        "6": string;
+        "8": string;
+        "10": string;
+        "12": string;
+        "16": string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    type: {
+        default: string;
+        dots: string;
+        bars: string;
+        pulse: string;
+        orbit: string;
+    };
+    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: {
+        "4": string;
+        "5": string;
+        "6": string;
+        "8": string;
+        "10": string;
+        "12": string;
+        "16": string;
+    };
+}, undefined, "inline-block", unknown, unknown, undefined>>;

package/dist/spinner/theme.js

@@ -0,0 +1,49 @@
+import { tv } from "tailwind-variants";
+export const spinner = tv({
+    base: "inline-block",
+    variants: {
+        type: {
+            default: "animate-spin",
+            dots: "inline-flex items-center justify-center",
+            bars: "inline-flex items-center justify-center",
+            pulse: "animate-pulse",
+            orbit: ""
+        },
+        color: {
+            primary: "fill-primary-600 text-gray-300",
+            secondary: "fill-secondary-600 text-gray-300",
+            gray: "fill-gray-600 dark:fill-gray-300 text-gray-300",
+            red: "fill-red-600 text-gray-300",
+            orange: "fill-orange-500 text-gray-300",
+            amber: "fill-amber-500 text-gray-300",
+            yellow: "fill-yellow-400 text-gray-300",
+            lime: "fill-lime-500 text-gray-300",
+            green: "fill-green-500 text-gray-300",
+            emerald: "fill-emerald-500 text-gray-300",
+            teal: "fill-teal-500 text-gray-300",
+            cyan: "fill-cyan-500 text-gray-300",
+            sky: "fill-sky-500 text-gray-300",
+            blue: "fill-blue-600 text-gray-300",
+            indigo: "fill-indigo-600 text-gray-300",
+            violet: "fill-violet-600 text-gray-300",
+            purple: "fill-purple-600 text-gray-300",
+            fuchsia: "fill-fuchsia-600 text-gray-300",
+            pink: "fill-pink-600 text-gray-300",
+            rose: "fill-rose-600 text-gray-300"
+        },
+        size: {
+            "4": "w-4 h-4",
+            "5": "w-5 h-5",
+            "6": "w-6 h-6",
+            "8": "w-8 h-8",
+            "10": "w-10 h-10",
+            "12": "w-12 h-12",
+            "16": "w-16 h-16"
+        }
+    },
+    defaultVariants: {
+        type: "default",
+        color: "primary",
+        size: "8"
+    }
+});

package/dist/split-pane/Divider.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+  import type { DividerProps } from "../types";
+  import { divider, dividerHitArea } from "./theme";
+  import { getTheme } from "../theme/themeUtils";
+  import clsx from "clsx";
+  import { nonPassiveTouch } from "../utils/nonPassiveTouch";
+
+  let { direction, index, onMouseDown, onTouchStart, onKeyDown, isDragging, currentSize, class: className = "" }: DividerProps = $props();
+
+  const themeDivider = $derived(getTheme("divider"));
+  const themeDividerHitArea = $derived(getTheme("dividerHitArea"));
+
+  const isHorizontal = $derived(direction === "horizontal");
+  const roundedSize = $derived(Math.round(currentSize));
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+<div
+  role="separator"
+  tabindex="0"
+  aria-orientation={isHorizontal ? "vertical" : "horizontal"}
+  aria-label={`Resize ${isHorizontal ? "horizontal" : "vertical"} panes`}
+  aria-valuenow={roundedSize}
+  aria-valuemin="0"
+  aria-valuemax="100"
+  aria-valuetext={`${roundedSize} percent`}
+  class={divider({ direction, isDragging, class: clsx(themeDivider, className) })}
+  onmousedown={(e) => onMouseDown(e, index)}
+  use:nonPassiveTouch={(e) => onTouchStart(e, index)}
+  onkeydown={(e) => onKeyDown(e, index)}
+>
+  <div class={dividerHitArea({ direction, class: clsx(themeDividerHitArea, className) })}></div>
+</div>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[DividerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2259)
+## Props
+@prop direction
+@prop index
+@prop onMouseDown
+@prop onTouchStart
+@prop onKeyDown
+@prop isDragging
+@prop currentSize
+@prop class: className = ""
+-->

package/dist/split-pane/Divider.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { DividerProps } from "../types";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [DividerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2259)
+ * ## Props
+ * @prop direction
+ * @prop index
+ * @prop onMouseDown
+ * @prop onTouchStart
+ * @prop onKeyDown
+ * @prop isDragging
+ * @prop currentSize
+ * @prop class: className = ""
+ */
+declare const Divider: import("svelte").Component<DividerProps, {}, "">;
+type Divider = ReturnType<typeof Divider>;
+export default Divider;

package/dist/split-pane/Pane.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+  import type { PaneProps } from "../types";
+  import { getSplitPaneContext } from "../context";
+  import Divider from "./Divider.svelte";
+  import { pane } from "./theme";
+  import { getTheme } from "../theme/themeUtils";
+  import clsx from "clsx";
+
+  let { children, class: className = "", style = "" }: PaneProps = $props();
+
+  const theme = $derived(getTheme("pane"));
+
+  const context = getSplitPaneContext();
+  const paneIndex = context ? context.registerPane() : 0;
+
+  const paneStyle = $derived.by(() => {
+    const styles = [style];
+    if (context) {
+      const contextStyle = context.getPaneStyle(paneIndex);
+      styles.push(contextStyle);
+    }
+    return styles.filter(Boolean).join("; ");
+  });
+
+  const showDivider = $derived(context?.shouldRenderDivider(paneIndex) ?? false);
+  const direction = $derived(context?.getDirection() ?? "horizontal");
+  const isDragging = $derived(context?.getIsDragging() ?? false);
+</script>
+
+<div class={pane({ class: clsx(theme, className) })} style={paneStyle}>
+  {@render children?.()}
+</div>
+
+{#if showDivider && context}
+  <Divider
+    {direction}
+    index={paneIndex}
+    {isDragging}
+    currentSize={context.getPaneSize(paneIndex)}
+    onMouseDown={context.onMouseDown}
+    onTouchStart={context.onTouchStart}
+    onKeyDown={context.onKeyDown}
+  />
+{/if}
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[PaneProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2253)
+## Props
+@prop children
+@prop class: className = ""
+@prop style = ""
+-->

package/dist/split-pane/Pane.svelte.d.ts

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