flowbite-svelte 0.48.4 → 1.0.0-next.2

package/dist/buttons/Button.svelte

@@ -1,123 +1,27 @@
-<script>import { twMerge } from "tailwind-merge";
-import { getContext } from "svelte";
-const group = getContext("group");
-export let pill = false;
-export let outline = false;
-export let size = group ? "sm" : "md";
-export let href = void 0;
-export let type = "button";
-export let color = group ? outline ? "dark" : "alternative" : "primary";
-export let shadow = false;
-export let tag = "button";
-export let checked = void 0;
-export let disabled = false;
-const colorClasses = {
-  alternative: "text-gray-900 bg-white border border-gray-200 hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-400 hover:text-primary-700 focus-within:text-primary-700 dark:focus-within:text-white dark:hover:text-white dark:hover:bg-gray-700",
-  blue: "text-white bg-blue-700 hover:bg-blue-800 dark:bg-blue-600 dark:hover:bg-blue-700",
-  dark: "text-white bg-gray-800 hover:bg-gray-900 dark:bg-gray-800 dark:hover:bg-gray-700",
-  green: "text-white bg-green-700 hover:bg-green-800 dark:bg-green-600 dark:hover:bg-green-700",
-  light: "text-gray-900 bg-white border border-gray-300 hover:bg-gray-100 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600",
-  primary: "text-white bg-primary-700 hover:bg-primary-800 dark:bg-primary-600 dark:hover:bg-primary-700",
-  purple: "text-white bg-purple-700 hover:bg-purple-800 dark:bg-purple-600 dark:hover:bg-purple-700",
-  red: "text-white bg-red-700 hover:bg-red-800 dark:bg-red-600 dark:hover:bg-red-700",
-  yellow: "text-white bg-yellow-400 hover:bg-yellow-500 ",
-  none: ""
-};
-const colorCheckedClasses = {
-  alternative: "text-primary-700 border dark:text-primary-500 bg-gray-100 dark:bg-gray-700 border-gray-300 shadow-gray-300 dark:shadow-gray-800 shadow-inner",
-  blue: "text-blue-900 bg-blue-400 dark:bg-blue-500 shadow-blue-700 dark:shadow-blue-800 shadow-inner",
-  dark: "text-white bg-gray-500 dark:bg-gray-600 shadow-gray-800 dark:shadow-gray-900 shadow-inner",
-  green: "text-green-900 bg-green-400 dark:bg-green-500 shadow-green-700 dark:shadow-green-800 shadow-inner",
-  light: "text-gray-900 bg-gray-100 border border-gray-300 dark:bg-gray-500 dark:text-gray-900 dark:border-gray-700 shadow-gray-300 dark:shadow-gray-700 shadow-inner",
-  primary: "text-primary-900 bg-primary-400 dark:bg-primary-500 shadow-primary-700 dark:shadow-primary-800 shadow-inner",
-  purple: "text-purple-900 bg-purple-400 dark:bg-purple-500 shadow-purple-700 dark:shadow-purple-800 shadow-inner",
-  red: "text-red-900 bg-red-400 dark:bg-red-500 shadow-red-700 dark:shadow-red-800 shadow-inner",
-  yellow: "text-yellow-900 bg-yellow-300 dark:bg-yellow-400 shadow-yellow-500 dark:shadow-yellow-700 shadow-inner",
-  none: ""
-};
-const coloredFocusClasses = {
-  alternative: "focus-within:ring-gray-200 dark:focus-within:ring-gray-700",
-  blue: "focus-within:ring-blue-300 dark:focus-within:ring-blue-800",
-  dark: "focus-within:ring-gray-300 dark:focus-within:ring-gray-700",
-  green: "focus-within:ring-green-300 dark:focus-within:ring-green-800",
-  light: "focus-within:ring-gray-200 dark:focus-within:ring-gray-700",
-  primary: "focus-within:ring-primary-300 dark:focus-within:ring-primary-800",
-  purple: "focus-within:ring-purple-300 dark:focus-within:ring-purple-900",
-  red: "focus-within:ring-red-300 dark:focus-within:ring-red-900",
-  yellow: "focus-within:ring-yellow-300 dark:focus-within:ring-yellow-900",
-  none: ""
-};
-const coloredShadowClasses = {
-  alternative: "shadow-gray-500/50 dark:shadow-gray-800/80",
-  blue: "shadow-blue-500/50 dark:shadow-blue-800/80",
-  dark: "shadow-gray-500/50 dark:shadow-gray-800/80",
-  green: "shadow-green-500/50 dark:shadow-green-800/80",
-  light: "shadow-gray-500/50 dark:shadow-gray-800/80",
-  primary: "shadow-primary-500/50 dark:shadow-primary-800/80",
-  purple: "shadow-purple-500/50 dark:shadow-purple-800/80",
-  red: "shadow-red-500/50 dark:shadow-red-800/80 ",
-  yellow: "shadow-yellow-500/50 dark:shadow-yellow-800/80 ",
-  none: ""
-};
-const outlineClasses = {
-  alternative: "text-gray-900 dark:text-gray-400 hover:text-white border border-gray-800 hover:bg-gray-900 focus-within:bg-gray-900 focus-within:text-white focus-within:ring-gray-300 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-600 dark:focus-within:ring-gray-800",
-  blue: "text-blue-700 hover:text-white border border-blue-700 hover:bg-blue-800 dark:border-blue-500 dark:text-blue-500 dark:hover:text-white dark:hover:bg-blue-600",
-  dark: "text-gray-900 hover:text-white border border-gray-800 hover:bg-gray-900 focus-within:bg-gray-900 focus-within:text-white dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-600",
-  green: "text-green-700 hover:text-white border border-green-700 hover:bg-green-800 dark:border-green-500 dark:text-green-500 dark:hover:text-white dark:hover:bg-green-600",
-  light: "text-gray-500 hover:text-gray-900 bg-white border border-gray-200 dark:border-gray-600 dark:hover:text-white dark:text-gray-400 hover:bg-gray-50 dark:bg-gray-700 dark:hover:bg-gray-600",
-  primary: "text-primary-700 hover:text-white border border-primary-700 hover:bg-primary-700 dark:border-primary-500 dark:text-primary-500 dark:hover:text-white dark:hover:bg-primary-600",
-  purple: "text-purple-700 hover:text-white border border-purple-700 hover:bg-purple-800 dark:border-purple-400 dark:text-purple-400 dark:hover:text-white dark:hover:bg-purple-500",
-  red: "text-red-700 hover:text-white border border-red-700 hover:bg-red-800 dark:border-red-500 dark:text-red-500 dark:hover:text-white dark:hover:bg-red-600",
-  yellow: "text-yellow-400 hover:text-white border border-yellow-400 hover:bg-yellow-500 dark:border-yellow-300 dark:text-yellow-300 dark:hover:text-white dark:hover:bg-yellow-400",
-  none: ""
-};
-const sizeClasses = {
-  xs: "px-3 py-2 text-xs",
-  sm: "px-4 py-2 text-sm",
-  md: "px-5 py-2.5 text-sm",
-  lg: "px-5 py-3 text-base",
-  xl: "px-6 py-3.5 text-base"
-};
-const hasBorder = () => outline || color === "alternative" || color === "light";
-let buttonClass;
-$: buttonClass = twMerge(
-  "text-center font-medium",
-  group ? "focus-within:ring-2" : "focus-within:ring-4",
-  group && "focus-within:z-10",
-  group || "focus-within:outline-hidden",
-  "inline-flex items-center justify-center " + sizeClasses[size],
-  outline && checked && "border dark:border-gray-900",
-  outline && checked && colorCheckedClasses[color],
-  outline && !checked && outlineClasses[color],
-  !outline && checked && colorCheckedClasses[color],
-  !outline && !checked && colorClasses[color],
-  color === "alternative" && (group && !checked ? "dark:bg-gray-700 dark:text-white dark:border-gray-700 dark:hover:border-gray-600 dark:hover:bg-gray-600" : "dark:bg-transparent dark:border-gray-600 dark:hover:border-gray-600"),
-  outline && color === "dark" && (group ? checked ? "bg-gray-900 border-gray-800 dark:border-white dark:bg-gray-600" : "dark:text-white border-gray-800 dark:border-white" : "dark:text-gray-400 dark:border-gray-700"),
-  coloredFocusClasses[color],
-  hasBorder() && group && "not-first:-ms-px",
-  group ? pill && "first:rounded-s-full last:rounded-e-full" || "first:rounded-s-lg last:rounded-e-lg" : pill && "rounded-full" || "rounded-lg",
-  shadow && "shadow-lg",
-  shadow && coloredShadowClasses[color],
-  disabled && "cursor-not-allowed opacity-50",
-  $$props.class
-);
+<script lang="ts">
+  import { getContext } from "svelte";
+  import type { SizeType } from "../types";
+  import { type ButtonProps as Props, button } from ".";
+  import clsx from "clsx";
+
+  const group: SizeType = getContext("group");
+
+  let { children, pill = false, outline = false, size = group ? "sm" : "md", href, type = "button", color = group ? (outline ? "dark" : "alternative") : "primary", shadow = false, tag = "button", disabled, class: className, ...restProps }: Props = $props();
+
+  const base = $derived(button({ color, size, disabled, pill, group: !!group, outline, shadow, class: clsx(className) }));
 </script>
 
-{#if href && !disabled}
-  <a {href} {...$$restProps} class={buttonClass} role="button" on:click on:change on:keydown on:keyup on:touchstart|passive on:touchend on:touchcancel on:mouseenter on:mouseleave on:mouseup on:mousedown>
-    <slot />
+{#if href}
+  <a {href} {...restProps} class={base} role="button">
+    {@render children()}
   </a>
-{:else if tag === 'label'}
-  <label {...$$restProps} class={buttonClass}>
-    <slot />
-  </label>
-{:else if tag === 'button'}
-  <button {type} {...$$restProps} {disabled} class={buttonClass} on:click on:change on:keydown on:keyup on:touchstart|passive on:touchend on:touchcancel on:mouseenter on:mouseleave on:mouseup on:mousedown>
-    <slot />
+{:else if tag === "button"}
+  <button {type} {...restProps} class={base} {disabled}>
+    {@render children()}
   </button>
 {:else}
-  <svelte:element this={tag} {...$$restProps} class={buttonClass}>
-    <slot />
+  <svelte:element this={tag} {...restProps} class={base}>
+    {@render children()}
   </svelte:element>
 {/if}
 
@@ -125,14 +29,15 @@ $: buttonClass = twMerge(
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let pill: $$Props['pill'] = false;
-@prop export let outline: $$Props['outline'] = false;
-@prop export let size: NonNullable<$$Props['size']> = group ? 'sm' : 'md';
-@prop export let href: string | undefined = undefined;
-@prop export let type: HTMLButtonAttributes['type'] = 'button';
-@prop export let color: NonNullable<$$Props['color']> = group ? (outline ? 'dark' : 'alternative') : 'primary';
-@prop export let shadow: $$Props['shadow'] = false;
-@prop export let tag: $$Props['tag'] = 'button';
-@prop export let checked: $$Props['checked'] = undefined;
-@prop export let disabled: HTMLButtonAttributes['disabled'] = false;
+@props: children: any;
+@props:pill: any = false;
+@props:outline: any = false;
+@props:size: any = group ? "sm" : "md";
+@props:href: any;
+@props:type: any = "button";
+@props:color: any = group ? (outline ? "dark" : "alternative") : "primary";
+@props:shadow: any = false;
+@props:tag: any = "button";
+@props:disabled: any;
+@props:class: string;
 -->

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

@@ -1,46 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
-import type { HTMLButtonAttributes, HTMLAnchorAttributes } from 'svelte/elements';
 declare const __propDef: {
-    props: ({
-        pill?: boolean;
-        outline?: boolean;
-        size?: "xs" | "sm" | "md" | "lg" | "xl";
-        color?: "red" | "yellow" | "green" | "purple" | "blue" | "light" | "dark" | "primary" | "none" | "alternative";
-        shadow?: boolean;
-        tag?: "a" | "button" | "label";
-        checked?: boolean;
-    } & Omit<HTMLAnchorAttributes, "type"> & {
-        href?: string | undefined;
-    }) | ({
-        pill?: boolean;
-        outline?: boolean;
-        size?: "xs" | "sm" | "md" | "lg" | "xl";
-        color?: "red" | "yellow" | "green" | "purple" | "blue" | "light" | "dark" | "primary" | "none" | "alternative";
-        shadow?: boolean;
-        tag?: "a" | "button" | "label";
-        checked?: boolean;
-    } & HTMLButtonAttributes & {
-        disabled?: HTMLButtonAttributes["disabled"];
-        type?: HTMLButtonAttributes["type"];
-    });
+    props: Record<string, never>;
     events: {
-        click: MouseEvent;
-        change: Event;
-        keydown: KeyboardEvent;
-        keyup: KeyboardEvent;
-        touchstart: TouchEvent;
-        touchend: TouchEvent;
-        touchcancel: TouchEvent;
-        mouseenter: MouseEvent;
-        mouseleave: MouseEvent;
-        mouseup: MouseEvent;
-        mousedown: MouseEvent;
-    } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        default: {};
-    };
+    slots: {};
 };
 type ButtonProps_ = typeof __propDef.props;
 export { ButtonProps_ as ButtonProps };
@@ -49,16 +13,17 @@ export type ButtonSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let pill: $$Props['pill'] = false;
- * @prop export let outline: $$Props['outline'] = false;
- * @prop export let size: NonNullable<$$Props['size']> = group ? 'sm' : 'md';
- * @prop export let href: string | undefined = undefined;
- * @prop export let type: HTMLButtonAttributes['type'] = 'button';
- * @prop export let color: NonNullable<$$Props['color']> = group ? (outline ? 'dark' : 'alternative') : 'primary';
- * @prop export let shadow: $$Props['shadow'] = false;
- * @prop export let tag: $$Props['tag'] = 'button';
- * @prop export let checked: $$Props['checked'] = undefined;
- * @prop export let disabled: HTMLButtonAttributes['disabled'] = false;
+ * @props: children: any;
+ * @props:pill: any = false;
+ * @props:outline: any = false;
+ * @props:size: any = group ? "sm" : "md";
+ * @props:href: any;
+ * @props:type: any = "button";
+ * @props:color: any = group ? (outline ? "dark" : "alternative") : "primary";
+ * @props:shadow: any = false;
+ * @props:tag: any = "button";
+ * @props:disabled: any;
+ * @props:class: string;
  */
 export default class Button extends SvelteComponentTyped<ButtonProps_, ButtonEvents, ButtonSlots> {
 }

package/dist/buttons/GradientButton.svelte

@@ -1,67 +1,25 @@
-<script>import { twMerge } from "tailwind-merge";
-import Button from "./Button.svelte";
-import ButtonProps from "./Button.svelte";
-import { getContext } from "svelte";
-const group = getContext("group");
-export let color = "blue";
-export let shadow = false;
-const gradientClasses = {
-  blue: "text-white bg-linear-to-r from-blue-500 via-blue-600 to-blue-700 hover:bg-linear-to-br focus:ring-blue-300 dark:focus:ring-blue-800 ",
-  green: "text-white bg-linear-to-r from-green-400 via-green-500 to-green-600 hover:bg-linear-to-br focus:ring-green-300 dark:focus:ring-green-800",
-  cyan: "text-white bg-linear-to-r from-cyan-400 via-cyan-500 to-cyan-600 hover:bg-linear-to-br focus:ring-cyan-300 dark:focus:ring-cyan-800",
-  teal: "text-white bg-linear-to-r from-teal-400 via-teal-500 to-teal-600 hover:bg-linear-to-br focus:ring-teal-300 dark:focus:ring-teal-800",
-  lime: "text-gray-900 bg-linear-to-r from-lime-200 via-lime-400 to-lime-500 hover:bg-linear-to-br focus:ring-lime-300 dark:focus:ring-lime-800",
-  red: "text-white bg-linear-to-r from-red-400 via-red-500 to-red-600 hover:bg-linear-to-br focus:ring-red-300 dark:focus:ring-red-800",
-  pink: "text-white bg-linear-to-r from-pink-400 via-pink-500 to-pink-600 hover:bg-linear-to-br focus:ring-pink-300 dark:focus:ring-pink-800",
-  purple: "text-white bg-linear-to-r from-purple-500 via-purple-600 to-purple-700 hover:bg-linear-to-br focus:ring-purple-300 dark:focus:ring-purple-800",
-  purpleToBlue: "text-white bg-linear-to-br from-purple-600 to-blue-500 hover:bg-linear-to-bl focus:ring-blue-300 dark:focus:ring-blue-800",
-  cyanToBlue: "text-white bg-linear-to-r from-cyan-500 to-blue-500 hover:bg-linear-to-bl focus:ring-cyan-300 dark:focus:ring-cyan-800",
-  greenToBlue: "text-white bg-linear-to-br from-green-400 to-blue-600 hover:bg-linear-to-bl focus:ring-green-200 dark:focus:ring-green-800",
-  purpleToPink: "text-white bg-linear-to-r from-purple-500 to-pink-500 hover:bg-linear-to-l focus:ring-purple-200 dark:focus:ring-purple-800",
-  pinkToOrange: "text-white bg-linear-to-br from-pink-500 to-orange-400 hover:bg-linear-to-bl focus:ring-pink-200 dark:focus:ring-pink-800",
-  tealToLime: "text-gray-900 bg-linear-to-r from-teal-200 to-lime-200 hover:bg-linear-to-l focus:ring-lime-200 dark:focus:ring-teal-700",
-  redToYellow: "text-gray-900 bg-linear-to-r from-red-200 via-red-300 to-yellow-200 hover:bg-linear-to-bl focus:ring-red-100 dark:focus:ring-red-400"
-};
-const coloredShadowClasses = {
-  blue: "shadow-blue-500/50 dark:shadow-blue-800/80",
-  green: "shadow-green-500/50 dark:shadow-green-800/80",
-  cyan: "shadow-cyan-500/50 dark:shadow-cyan-800/80",
-  teal: "shadow-teal-500/50 dark:shadow-teal-800/80 ",
-  lime: "shadow-lime-500/50 dark:shadow-lime-800/80",
-  red: "shadow-red-500/50 dark:shadow-red-800/80 ",
-  pink: "shadow-pink-500/50 dark:shadow-pink-800/80",
-  purple: "shadow-purple-500/50 dark:shadow-purple-800/80",
-  purpleToBlue: "shadow-blue-500/50 dark:shadow-blue-800/80",
-  cyanToBlue: "shadow-cyan-500/50 dark:shadow-cyan-800/80",
-  greenToBlue: "shadow-green-500/50 dark:shadow-green-800/80",
-  purpleToPink: "shadow-purple-500/50 dark:shadow-purple-800/80",
-  pinkToOrange: "shadow-pink-500/50 dark:shadow-pink-800/80",
-  tealToLime: "shadow-lime-500/50 dark:shadow-teal-800/80",
-  redToYellow: "shadow-red-500/50 dark:shadow-red-800/80"
-};
-let gradientOutlineClass;
-$: gradientOutlineClass = twMerge(
-  "inline-flex items-center justify-center w-full  border-0!",
-  $$props.pill || "rounded-md!",
-  "bg-white text-gray-900! dark:bg-gray-900 dark:text-white!",
-  // this is limitation - no transparency
-  "hover:bg-transparent hover:text-inherit!",
-  "transition-all duration-75 ease-in group-hover:bg-black/0! group-hover:text-inherit!"
-);
-let divClass;
-$: divClass = twMerge($$props.outline && "p-0.5", gradientClasses[color], shadow && "shadow-lg", shadow && coloredShadowClasses[color], group ? $$props.pill && "first:rounded-s-full last:rounded-e-full" || "first:rounded-s-lg last:rounded-e-lg" : $$props.pill && "rounded-full" || "rounded-lg", $$props.class);
+<script lang="ts">
+  import Button from "./Button.svelte";
+  import { getContext } from "svelte";
+  import { type GradientButtonProps as Props, gradientButton } from ".";
+  import type { SizeType } from "../types";
+
+  const group: SizeType = getContext("group");
+
+  let { children, outline, pill, color = "blue", shadow, class: className, href, disabled, size, ...restProps }: Props = $props();
+
+  const { base, outlineWrapper } = $derived(gradientButton({ color, outline, pill, shadow, disabled, group: !!group }));
 </script>
 
-{#if $$props.outline}
-  <div class={divClass}>
-    <!-- Trick to prentend outline without using border
-	    This has a limitation of no supporting transparency as
-	    is set to bg-white dark:bg-gray-900 -->
-    <Button {...$$restProps} color="none" class={gradientOutlineClass} on:click on:change on:keydown on:keyup on:mouseenter on:mouseleave><slot /></Button>
+{#if outline}
+  <div class={base({ className })}>
+    <Button {...restProps} class={outlineWrapper()} {disabled} {href} {size}>
+      {@render children()}
+    </Button>
   </div>
 {:else}
-  <Button {...$$restProps} color="none" class={divClass} on:click on:change on:keydown on:keyup on:touchstart on:touchend on:touchcancel on:mouseenter on:mouseleave>
-    <slot />
+  <Button {...restProps} class={base({ className })} {disabled} {href} {size}>
+    {@render children()}
   </Button>
 {/if}
 
@@ -69,6 +27,13 @@ $: divClass = twMerge($$props.outline && "p-0.5", gradientClasses[color], shadow
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let color: NonNullable<$$Props['color']> = 'blue';
-@prop export let shadow: $$Props['shadow'] = false;
+@props: children: any;
+@props:outline: any;
+@props:pill: any;
+@props:color: any = "blue";
+@props:shadow: any;
+@props:class: string;
+@props:href: any;
+@props:disabled: any;
+@props:size: any;
 -->

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

@@ -1,36 +1,27 @@
 import { SvelteComponentTyped } from "svelte";
-import Button from './Button.svelte';
 declare const __propDef: {
-    props: Omit<Button, "color"> & {
-        color?: "red" | "green" | "purple" | "pink" | "blue" | "teal" | "cyan" | "lime" | "purpleToBlue" | "cyanToBlue" | "greenToBlue" | "purpleToPink" | "pinkToOrange" | "tealToLime" | "redToYellow";
-        shadow?: boolean;
-    };
+    props: Record<string, never>;
     events: {
-        click: MouseEvent;
-        change: Event;
-        keydown: KeyboardEvent;
-        keyup: KeyboardEvent;
-        mouseenter: MouseEvent;
-        mouseleave: MouseEvent;
-        touchstart: TouchEvent;
-        touchend: TouchEvent;
-        touchcancel: TouchEvent;
-    } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        default: {};
-    };
+    slots: {};
 };
-export type GradientButtonProps = typeof __propDef.props;
+type GradientButtonProps_ = typeof __propDef.props;
+export { GradientButtonProps_ as GradientButtonProps };
 export type GradientButtonEvents = typeof __propDef.events;
 export type GradientButtonSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let color: NonNullable<$$Props['color']> = 'blue';
- * @prop export let shadow: $$Props['shadow'] = false;
+ * @props: children: any;
+ * @props:outline: any;
+ * @props:pill: any;
+ * @props:color: any = "blue";
+ * @props:shadow: any;
+ * @props:class: string;
+ * @props:href: any;
+ * @props:disabled: any;
+ * @props:size: any;
  */
-export default class GradientButton extends SvelteComponentTyped<GradientButtonProps, GradientButtonEvents, GradientButtonSlots> {
+export default class GradientButton extends SvelteComponentTyped<GradientButtonProps_, GradientButtonEvents, GradientButtonSlots> {
 }
-export {};

package/dist/buttons/index.d.ts

@@ -0,0 +1,5 @@
+import type { ButtonProps, GradientButtonProps } from "./type";
+import Button from "./Button.svelte";
+import GradientButton from "./GradientButton.svelte";
+import { button, gradientButton } from "./theme";
+export { Button, GradientButton, gradientButton, button, type ButtonProps, type GradientButtonProps };

package/dist/buttons/index.js

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