@pajohns/flowbite-svelte 0.1.0

package/dist/footer/theme.d.ts

@@ -0,0 +1,137 @@
+import { type VariantProps } from "tailwind-variants";
+import type { Classes } from "../theme/themeUtils";
+export declare const footer: import("tailwind-variants").TVReturnType<{
+    footerType: {
+        default: string;
+        sitemap: string;
+        socialmedia: string;
+        logo: string;
+        sticky: string;
+    };
+}, undefined, "bg-white dark:bg-gray-800", {
+    footerType: {
+        default: string;
+        sitemap: string;
+        socialmedia: string;
+        logo: string;
+        sticky: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    footerType: {
+        default: string;
+        sitemap: string;
+        socialmedia: string;
+        logo: string;
+        sticky: string;
+    };
+}, undefined, "bg-white dark:bg-gray-800", unknown, unknown, undefined>>;
+export type FooterBrandVariants = VariantProps<typeof footerBrand> & Classes<typeof footerBrand>;
+export declare const footerBrand: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            span?: import("tailwind-merge").ClassNameValue;
+            img?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            span?: import("tailwind-merge").ClassNameValue;
+            img?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    span: string;
+    img: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            span?: import("tailwind-merge").ClassNameValue;
+            img?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    span: string;
+    img: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    base: string;
+    span: string;
+    img: string;
+}, undefined, unknown, unknown, undefined>>;
+export type FooterCopyrightVariants = VariantProps<typeof footerCopyright> & Classes<typeof footerCopyright>;
+export declare const footerCopyright: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            link?: import("tailwind-merge").ClassNameValue;
+            bySpan?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            link?: import("tailwind-merge").ClassNameValue;
+            bySpan?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    link: string;
+    bySpan: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            link?: import("tailwind-merge").ClassNameValue;
+            bySpan?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    link: string;
+    bySpan: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    base: string;
+    link: string;
+    bySpan: string;
+}, undefined, unknown, unknown, undefined>>;
+export declare const footerIcon: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "text-gray-500 hover:text-gray-900 dark:hover:text-white", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "text-gray-500 hover:text-gray-900 dark:hover:text-white", unknown, unknown, undefined>>;
+export declare const footerLinkGroup: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "text-gray-600 dark:text-gray-400", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "text-gray-600 dark:text-gray-400", unknown, unknown, undefined>>;
+export type FooterLinkVariants = VariantProps<typeof footerLink> & Classes<typeof footerLink>;
+export declare const footerLink: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            link?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            link?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    link: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            link?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    link: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    base: string;
+    link: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/footer/theme.js

@@ -0,0 +1,39 @@
+import { tv } from "tailwind-variants";
+export const footer = tv({
+    base: "bg-white dark:bg-gray-800",
+    variants: {
+        footerType: {
+            default: "p-4 rounded-lg shadow md:flex md:items-center md:justify-between md:p-6",
+            sitemap: "bg-white dark:bg-gray-900",
+            socialmedia: "p-4 sm:p-6",
+            logo: "p-4 rounded-lg shadow md:px-6 md:py-8",
+            sticky: "fixed bottom-0 left-0 z-20 w-full p-4 bg-white border-t border-gray-200 shadow md:flex md:items-center md:justify-between md:p-6 dark:bg-gray-800 dark:border-gray-600"
+        }
+    }
+});
+export const footerBrand = tv({
+    slots: {
+        base: "flex items-center",
+        span: "self-center text-2xl font-semibold whitespace-nowrap dark:text-white",
+        img: "me-3 h-8"
+    }
+});
+export const footerCopyright = tv({
+    slots: {
+        base: "block text-sm text-gray-500 sm:text-center dark:text-gray-400",
+        link: "hover:underline",
+        bySpan: "ms-1"
+    }
+});
+export const footerIcon = tv({
+    base: "text-gray-500 hover:text-gray-900 dark:hover:text-white"
+});
+export const footerLinkGroup = tv({
+    base: "text-gray-600 dark:text-gray-400"
+});
+export const footerLink = tv({
+    slots: {
+        base: "me-4 last:me-0 md:me-6",
+        link: "hover:underline"
+    }
+});

package/dist/forms/button-toggle/ButtonToggle.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+  import CheckIcon from "./CheckIcon.svelte";
+  import { buttonToggle } from "./theme";
+  import type { VariantProps } from "tailwind-variants";
+  import clsx from "clsx";
+  import type { ButtonToggleProps } from "../..";
+  import { getTheme, warnThemeDeprecation } from "../../theme/themeUtils";
+  import { getButtonToggleContext } from "../../context";
+  import { untrack } from "svelte";
+
+  let { value, selected = false, children, iconSlot, color, class: className, iconClass, txtClass, contentClass, classes, ...restProps }: ButtonToggleProps = $props();
+
+  warnThemeDeprecation(
+    "ButtonToggle",
+    untrack(() => ({ iconClass, txtClass, contentClass })),
+    { iconClass: "icon", txtClass: "text", contentClass: "content" }
+  );
+
+  // button(className), content, text, icon
+  const styling = $derived(classes ?? { icon: iconClass, text: txtClass, content: contentClass });
+
+  const theme = $derived(getTheme("buttonToggle"));
+
+  // Get context - it will be undefined if used outside ButtonToggleGroup
+  const ctx = getButtonToggleContext();
+
+  // Extract context values with fallbacks
+  const { toggleSelected, isSelected, multiSelect, size, roundedSize, ctxIconClass, ctxBtnClass } = {
+    toggleSelected: ctx?.toggleSelected ?? (() => {}),
+    isSelected: ctx?.isSelected ?? (() => false),
+    multiSelect: ctx?.multiSelect ?? false,
+    size: ctx?.size,
+    roundedSize: ctx?.roundedSize,
+    ctxIconClass: ctx?.ctxIconClass,
+    ctxBtnClass: ctx?.ctxBtnClass
+  };
+
+  // Use context color if available, otherwise use prop color, otherwise default to "primary"
+  const actualColor = $derived((ctx?.color ?? color ?? "primary") as VariantProps<typeof buttonToggle>["color"]);
+  const actualIconClass = ctxIconClass;
+
+  // Filter size to only valid buttonToggle sizes (no 'xs')
+  const actualSize = (size === "xs" ? "sm" : size) as VariantProps<typeof buttonToggle>["size"];
+  // roundedSize is already validated by type system
+  const actualRoundedSize = roundedSize as VariantProps<typeof buttonToggle>["roundedSize"];
+
+  function handleClick() {
+    toggleSelected(value);
+  }
+
+  const { button, content, text, icon } = $derived(buttonToggle({ selected, color: actualColor, size: actualSize }));
+
+  $effect(() => {
+    selected = isSelected(value);
+  });
+</script>
+
+<button
+  type="button"
+  class={button({ selected, color: actualColor, size: actualSize, roundedSize: actualRoundedSize, class: clsx(theme?.button, ctxBtnClass, className) })}
+  data-selected={selected}
+  onclick={handleClick}
+  role={multiSelect ? "checkbox" : "radio"}
+  aria-checked={selected}
+  {...restProps}
+>
+  <div class={content({ class: clsx(theme?.content, styling.content) })}>
+    {#if selected}
+      {#if iconSlot}
+        {@render iconSlot()}
+      {:else}
+        <CheckIcon class={icon({ class: clsx(theme?.icon ?? actualIconClass, styling.icon) })} />
+      {/if}
+    {/if}
+    <span class={text({ selected, class: clsx(theme?.text, styling.text) })}>
+      {@render children()}
+    </span>
+  </div>
+</button>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[ButtonToggleProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L441)
+## Props
+@prop value
+@prop selected = false
+@prop children
+@prop iconSlot
+@prop color
+@prop class: className
+@prop iconClass
+@prop txtClass
+@prop contentClass
+@prop classes
+@prop ...restProps
+-->

package/dist/forms/button-toggle/ButtonToggle.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { ButtonToggleProps } from "../..";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [ButtonToggleProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L441)
+ * ## Props
+ * @prop value
+ * @prop selected = false
+ * @prop children
+ * @prop iconSlot
+ * @prop color
+ * @prop class: className
+ * @prop iconClass
+ * @prop txtClass
+ * @prop contentClass
+ * @prop classes
+ * @prop ...restProps
+ */
+declare const ButtonToggle: import("svelte").Component<ButtonToggleProps, {}, "">;
+type ButtonToggle = ReturnType<typeof ButtonToggle>;
+export default ButtonToggle;

package/dist/forms/button-toggle/ButtonToggleGroup.svelte

@@ -0,0 +1,115 @@
+<script lang="ts">
+  import clsx from "clsx";
+  import type { ButtonToggleGroupProps, ButtonToggleContextType } from "../..";
+  import { buttonToggleGroup } from "./theme";
+  import { getTheme } from "../../theme/themeUtils";
+  import { setButtonToggleContext } from "../../context";
+
+  let {
+    multiSelect = false,
+    name = "toggle-group",
+    value,
+    color,
+    size = "md",
+    roundedSize = "md",
+    onSelect = () => {},
+    children,
+    ctxIconClass,
+    ctxBtnClass,
+    class: className,
+    ...restProps
+  }: ButtonToggleGroupProps = $props();
+
+  const theme = $derived(getTheme("buttonToggleGroup"));
+
+  const base = $derived(buttonToggleGroup({ roundedSize, class: clsx(theme, className) }));
+  type SelectedValue = string | null | string[];
+
+  // Normalize incoming prop `value` to internal SelectedValue
+  // Clones arrays to prevent external mutations affecting internal state
+  function getInitialValue(): SelectedValue {
+    if (multiSelect) {
+      // Multi-select mode expects array
+      if (Array.isArray(value)) {
+        return [...value]; // Clone to prevent aliasing
+      } else if (value === null || value === undefined) {
+        return [];
+      } else {
+        // Single string passed but multiSelect is true - wrap in array
+        return [value as string];
+      }
+    } else {
+      // Single-select mode expects string or null
+      if (Array.isArray(value)) {
+        // Array passed but multiSelect is false - take first item
+        return value[0] ?? null;
+      } else {
+        return value ?? null; // Handle undefined case
+      }
+    }
+  }
+
+  let selectedValues = $state<SelectedValue>(getInitialValue());
+
+  function toggleSelected(toggleValue: string) {
+    if (multiSelect) {
+      const currentSelected = [...(selectedValues as string[])];
+      const index = currentSelected.indexOf(toggleValue);
+
+      if (index === -1) {
+        selectedValues = [...currentSelected, toggleValue];
+      } else {
+        currentSelected.splice(index, 1);
+        selectedValues = currentSelected;
+      }
+    } else {
+      selectedValues = toggleValue === selectedValues ? null : toggleValue;
+    }
+    onSelect(selectedValues); // ✅ ADD THIS LINE - call onSelect here
+  }
+
+  function isSelected(toggleValue: string): boolean {
+    if (multiSelect) {
+      return (selectedValues as string[]).includes(toggleValue);
+    } else {
+      return selectedValues === toggleValue;
+    }
+  }
+
+  // Create context object with all button toggle related values
+  const ctx: ButtonToggleContextType = {
+    get toggleSelected() {
+      return toggleSelected;
+    },
+    get isSelected() {
+      return isSelected;
+    },
+    get multiSelect() {
+      return multiSelect;
+    },
+    get color() {
+      return color;
+    },
+    get size() {
+      return size;
+    },
+    get roundedSize() {
+      return roundedSize;
+    },
+    get ctxIconClass() {
+      return clsx(ctxIconClass);
+    },
+    get ctxBtnClass() {
+      return clsx(ctxBtnClass);
+    }
+  };
+
+  // Set context during initialization
+  setButtonToggleContext(ctx);
+</script>
+
+<div class="inline">
+  <div class={base} role={multiSelect ? "group" : "radiogroup"} aria-label={name} {...restProps}>
+    {@render children()}
+  </div>
+</div>

package/dist/forms/button-toggle/ButtonToggleGroup.svelte.d.ts

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

package/dist/forms/button-toggle/CheckIcon.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import type { CheckIconProps } from "../..";
+  import clsx from "clsx";
+  let { class: className, ...restProps }: CheckIconProps = $props();
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="16"
+  height="16"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  class={clsx(className)}
+  {...restProps}
+>
+  <polyline points="20 6 9 17 4 12"></polyline>
+</svg>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[CheckIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L458)
+## Props
+@prop class: className
+@prop ...restProps
+-->

package/dist/forms/button-toggle/CheckIcon.svelte.d.ts

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

package/dist/forms/button-toggle/index.d.ts

@@ -0,0 +1,4 @@
+export { default as ButtonToggleGroup } from "./ButtonToggleGroup.svelte";
+export { default as ButtonToggle } from "./ButtonToggle.svelte";
+export { default as CheckIcon } from "./CheckIcon.svelte";
+export { buttonToggleGroup, buttonToggle } from "./theme";

package/dist/forms/button-toggle/index.js

@@ -0,0 +1,4 @@
+export { default as ButtonToggleGroup } from "./ButtonToggleGroup.svelte";
+export { default as ButtonToggle } from "./ButtonToggle.svelte";
+export { default as CheckIcon } from "./CheckIcon.svelte";
+export { buttonToggleGroup, buttonToggle } from "./theme";