@pajohns/flowbite-svelte 0.1.0

package/dist/breadcrumb/theme.js

@@ -0,0 +1,57 @@
+import { tv } from "tailwind-variants";
+export const breadcrumb = tv({
+    slots: {
+        base: "flex",
+        list: "inline-flex items-center space-x-1 rtl:space-x-reverse md:space-x-3 rtl:space-x-reverse"
+    },
+    variants: {
+        solid: {
+            true: {
+                base: "px-5 py-3 text-gray-700 border border-gray-200 rounded-lg bg-gray-50 dark:bg-gray-800 dark:border-gray-700"
+            },
+            false: ""
+        }
+    },
+    defaultVariants: {
+        solid: false
+    }
+});
+export const breadcrumbItem = tv({
+    slots: {
+        base: "inline-flex items-center",
+        separator: "h-6 w-6 text-gray-400 rtl:-scale-x-100"
+    },
+    variants: {
+        home: {
+            true: "",
+            false: ""
+        },
+        hasHref: {
+            true: "",
+            false: ""
+        }
+    },
+    compoundVariants: [
+        {
+            home: true,
+            class: {
+                base: "inline-flex items-center text-sm font-medium text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white",
+                separator: "me-2 h-4 w-4"
+            }
+        },
+        {
+            home: false,
+            hasHref: true,
+            class: {
+                base: "ms-1 text-sm font-medium text-gray-700 hover:text-gray-900 md:ms-2 dark:text-gray-400 dark:hover:text-white"
+            }
+        },
+        {
+            home: false,
+            hasHref: false,
+            class: {
+                base: "ms-1 text-sm font-medium text-gray-500 md:ms-2 dark:text-gray-400"
+            }
+        }
+    ]
+});

package/dist/button-group/ButtonGroup.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+  import { buttonGroup } from "./theme";
+  import clsx from "clsx";
+  import type { ButtonGroupProps } from "..";
+  import { getTheme } from "../theme/themeUtils";
+  import { setButtonGroupContext } from "../context";
+
+  let { children, size = "md", disabled, class: className, ...restProps }: ButtonGroupProps = $props();
+
+  const theme = $derived(getTheme("buttonGroup"));
+
+  let groupClass = $derived(buttonGroup({ size, class: clsx(theme, className) }));
+
+  // Create a reactive context object
+  // The object itself stays the same, but its properties are reactive
+  const reactiveCtx = {
+    get size() {
+      return size;
+    },
+    get disabled() {
+      return disabled;
+    }
+  };
+
+  setButtonGroupContext(reactiveCtx);
+</script>
+
+<div {...restProps} class={groupClass} role="group">
+  {@render children()}
+</div>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[ButtonGroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L320)
+## Props
+@prop children
+@prop size = "md"
+@prop disabled
+@prop class: className
+@prop ...restProps
+-->

package/dist/button-group/ButtonGroup.svelte.d.ts

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

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

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

package/dist/button-group/index.js

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

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

@@ -0,0 +1,21 @@
+import { type VariantProps } from "tailwind-variants";
+export type ButtonGroupVariants = VariantProps<typeof buttonGroup>;
+export declare const buttonGroup: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, "inline-flex rounded-lg shadow-xs", {
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, "inline-flex rounded-lg shadow-xs", unknown, unknown, undefined>>;

package/dist/button-group/theme.js

@@ -0,0 +1,14 @@
+import { tv } from "tailwind-variants";
+export const buttonGroup = tv({
+    base: "inline-flex rounded-lg shadow-xs",
+    variants: {
+        size: {
+            sm: "",
+            md: "",
+            lg: ""
+        }
+    },
+    defaultVariants: {
+        size: "md"
+    }
+});

package/dist/buttons/Button.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+  import clsx from "clsx";
+  import { Spinner } from "..";
+  import type { ButtonProps } from "..";
+  import { getTheme } from "../theme/themeUtils";
+  import { button } from "./theme";
+  import { getButtonGroupContext } from "../context";
+
+  const groupCtx = getButtonGroupContext();
+  const group = groupCtx?.size;
+  const ctxDisabled = groupCtx?.disabled;
+
+  let {
+    children,
+    pill,
+    outline = false,
+    size = "md",
+    color,
+    shadow = false,
+    tag = "button",
+    disabled,
+    loading = false,
+    spinnerProps = { size: "4" },
+    class: className,
+    ...restProps
+  }: ButtonProps = $props();
+
+  const theme = $derived(getTheme("button"));
+
+  let actualSize = $derived(group ? "sm" : size);
+  let actualColor = $derived(color ?? (group ? (outline ? "dark" : "alternative") : "primary"));
+  let isDisabled = $derived(Boolean(ctxDisabled) || Boolean(disabled) || loading);
+
+  const { base, outline: outline_, shadow: shadow_, spinner } = $derived(button({ color: actualColor, size: actualSize, disabled: isDisabled, pill, group: !!group }));
+
+  let btnCls = $derived(base({ class: clsx(outline && outline_(), shadow && shadow_(), theme?.base, className) }));
+</script>
+
+{#if restProps.href !== undefined}
+  <a {...restProps} class={btnCls}>
+    {@render children?.()}
+  </a>
+{:else if tag === "button"}
+  <button type="button" {...restProps} class={btnCls} disabled={isDisabled}>
+    {@render children?.()}
+    {#if loading}
+      <Spinner {...spinnerProps} class={spinner()} />
+    {/if}
+  </button>
+{:else}
+  <svelte:element this={tag} {...restProps} class={btnCls}>
+    {@render children?.()}
+  </svelte:element>
+{/if}
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[ButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L344)
+## Props
+@prop children
+@prop pill
+@prop outline = false
+@prop size = "md"
+@prop color
+@prop shadow = false
+@prop tag = "button"
+@prop disabled
+@prop loading = false
+@prop spinnerProps = { size: "4" }
+@prop class: className
+@prop ...restProps
+-->

package/dist/buttons/Button.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { ButtonProps } from "..";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [ButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L344)
+ * ## Props
+ * @prop children
+ * @prop pill
+ * @prop outline = false
+ * @prop size = "md"
+ * @prop color
+ * @prop shadow = false
+ * @prop tag = "button"
+ * @prop disabled
+ * @prop loading = false
+ * @prop spinnerProps = { size: "4" }
+ * @prop class: className
+ * @prop ...restProps
+ */
+declare const Button: import("svelte").Component<ButtonProps, {}, "">;
+type Button = ReturnType<typeof Button>;
+export default Button;

package/dist/buttons/GradientButton.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+  import { gradientButton } from "./theme";
+  import clsx from "clsx";
+  import type { GradientButtonProps } from "..";
+  import Button from "./Button.svelte";
+  import { getTheme } from "../theme/themeUtils";
+  import { getButtonGroupContext } from "../context";
+
+  const group = getButtonGroupContext()?.size;
+
+  let { children, outline, pill, color = "blue", shadow, class: className, href, disabled, size, btnClass, ...restProps }: GradientButtonProps = $props();
+
+  const theme = $derived(getTheme("gradientButton"));
+
+  const { base, outlineWrapper } = $derived(gradientButton({ color, outline, pill, shadow, disabled, size, group: !!group }));
+</script>
+
+{#if outline}
+  <div class={base({ class: clsx(theme?.base, className) })}>
+    <Button {...restProps} class={outlineWrapper({ class: clsx(theme?.outlineWrapper, btnClass) })} {disabled} {href} {size}>
+      {@render children?.()}
+    </Button>
+  </div>
+{:else}
+  <Button {...restProps} class={base({ class: clsx(theme?.base, className) })} {disabled} {href} {size}>
+    {@render children?.()}
+  </Button>
+{/if}
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[GradientButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L340)
+## Props
+@prop children
+@prop outline
+@prop pill
+@prop color = "blue"
+@prop shadow
+@prop class: className
+@prop href
+@prop disabled
+@prop size
+@prop btnClass
+@prop ...restProps
+-->

package/dist/buttons/GradientButton.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { GradientButtonProps } from "..";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [GradientButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L340)
+ * ## Props
+ * @prop children
+ * @prop outline
+ * @prop pill
+ * @prop color = "blue"
+ * @prop shadow
+ * @prop class: className
+ * @prop href
+ * @prop disabled
+ * @prop size
+ * @prop btnClass
+ * @prop ...restProps
+ */
+declare const GradientButton: import("svelte").Component<GradientButtonProps, {}, "">;
+type GradientButton = ReturnType<typeof GradientButton>;
+export default GradientButton;

package/dist/buttons/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Button } from "./Button.svelte";
+export { default as GradientButton } from "./GradientButton.svelte";
+export { button, gradientButton } from "./theme";

package/dist/buttons/index.js

@@ -0,0 +1,3 @@
+export { default as Button } from "./Button.svelte";
+export { default as GradientButton } from "./GradientButton.svelte";
+export { button, gradientButton } from "./theme";