flowbite-svelte 1.3.0 → 1.4.0

package/dist/device-mockups/Ios.svelte

@@ -23,7 +23,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[IosProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L516)
+[IosProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L543)
 ## Props
 @prop children
 @prop divClass

package/dist/device-mockups/Ios.svelte.d.ts

@@ -2,7 +2,7 @@ import type { IosProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [IosProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L516)
+ * [IosProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L543)
  * ## Props
  * @prop children
  * @prop divClass

package/dist/device-mockups/Laptop.svelte

@@ -24,7 +24,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[MockupBaseProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L487)
+[MockupBaseProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L514)
 ## Props
 @prop children
 @prop divClass

package/dist/device-mockups/Laptop.svelte.d.ts

@@ -2,7 +2,7 @@ import type { MockupBaseProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [MockupBaseProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L487)
+ * [MockupBaseProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L514)
  * ## Props
  * @prop children
  * @prop divClass

package/dist/device-mockups/Smartwatch.svelte

@@ -25,7 +25,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[SmartwatchProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L526)
+[SmartwatchProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L553)
 ## Props
 @prop children
 @prop divClass

package/dist/device-mockups/Smartwatch.svelte.d.ts

@@ -2,7 +2,7 @@ import type { SmartwatchProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [SmartwatchProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L526)
+ * [SmartwatchProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L553)
  * ## Props
  * @prop children
  * @prop divClass

package/dist/device-mockups/Tablet.svelte

@@ -23,7 +23,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TabletProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L536)
+[TabletProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L563)
 ## Props
 @prop children
 @prop divClass

package/dist/device-mockups/Tablet.svelte.d.ts

@@ -2,7 +2,7 @@ import type { TabletProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [TabletProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L536)
+ * [TabletProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L563)
  * ## Props
  * @prop children
  * @prop divClass

package/dist/drawer/Drawer.svelte

@@ -38,7 +38,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[DrawerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L547)
+[DrawerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L574)
 ## Props
 @prop children
 @prop hidden = $bindable()

package/dist/drawer/Drawer.svelte.d.ts

@@ -2,7 +2,7 @@ import { type DrawerProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [DrawerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L547)
+ * [DrawerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L574)
  * ## Props
  * @prop children
  * @prop hidden = $bindable()

package/dist/drawer/Drawerhead.svelte

@@ -28,7 +28,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[DrawerheadProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L557)
+[DrawerheadProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L584)
 ## Props
 @prop closeIcon
 @prop children

package/dist/drawer/Drawerhead.svelte.d.ts

@@ -2,7 +2,7 @@ import type { DrawerheadProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [DrawerheadProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L557)
+ * [DrawerheadProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L584)
  * ## Props
  * @prop closeIcon
  * @prop children

package/dist/dropdown/Dropdown.svelte

@@ -34,7 +34,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[DropdownProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L564)
+[DropdownProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L591)
 ## Props
 @prop children
 @prop simple = false

package/dist/dropdown/Dropdown.svelte.d.ts

@@ -2,7 +2,7 @@ import type { DropdownProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [DropdownProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L564)
+ * [DropdownProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L591)
  * ## Props
  * @prop children
  * @prop simple = false

package/dist/dropdown/DropdownDivider.svelte

@@ -13,7 +13,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[DropdownDividerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L575)
+[DropdownDividerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L602)
 ## Props
 @prop class: divClass
 @prop ...restProps

package/dist/dropdown/DropdownDivider.svelte.d.ts

@@ -2,7 +2,7 @@ import type { DropdownDividerProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [DropdownDividerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L575)
+ * [DropdownDividerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L602)
  * ## Props
  * @prop class: divClass
  * @prop ...restProps

package/dist/dropdown/DropdownGroup.svelte

@@ -16,7 +16,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[DropdownGroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L592)
+[DropdownGroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L619)
 ## Props
 @prop children
 @prop class: className

package/dist/dropdown/DropdownGroup.svelte.d.ts

@@ -2,7 +2,7 @@ import type { DropdownGroupProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [DropdownGroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L592)
+ * [DropdownGroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L619)
  * ## Props
  * @prop children
  * @prop class: className

package/dist/dropdown/DropdownHeader.svelte

@@ -15,7 +15,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[DropdownHeaderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L577)
+[DropdownHeaderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L604)
 ## Props
 @prop children
 @prop class: className

package/dist/dropdown/DropdownHeader.svelte.d.ts

@@ -2,7 +2,7 @@ import type { DropdownHeaderProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [DropdownHeaderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L577)
+ * [DropdownHeaderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L604)
  * ## Props
  * @prop children
  * @prop class: className

package/dist/dropdown/DropdownItem.svelte

@@ -41,7 +41,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[DropdownItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L583)
+[DropdownItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L610)
 ## Props
 @prop aClass
 @prop children

package/dist/dropdown/DropdownItem.svelte.d.ts

@@ -2,7 +2,7 @@ import type { DropdownItemProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [DropdownItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L583)
+ * [DropdownItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L610)
  * ## Props
  * @prop aClass
  * @prop children

package/dist/footer/Footer.svelte

@@ -15,7 +15,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[FooterProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L599)
+[FooterProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L626)
 ## Props
 @prop children
 @prop footerType = "default"

package/dist/footer/Footer.svelte.d.ts

@@ -2,7 +2,7 @@ import type { FooterProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [FooterProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L599)
+ * [FooterProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L626)
  * ## Props
  * @prop children
  * @prop footerType = "default"

package/dist/footer/FooterBrand.svelte

@@ -27,7 +27,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[FooterBrandProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L605)
+[FooterBrandProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L632)
 ## Props
 @prop children
 @prop aClass

package/dist/footer/FooterBrand.svelte.d.ts

@@ -2,7 +2,7 @@ import type { FooterBrandProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [FooterBrandProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L605)
+ * [FooterBrandProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L632)
  * ## Props
  * @prop children
  * @prop aClass

package/dist/footer/FooterCopyright.svelte

@@ -25,7 +25,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[FooterCopyrightProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L616)
+[FooterCopyrightProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L643)
 ## Props
 @prop spanClass
 @prop aClass

package/dist/footer/FooterCopyright.svelte.d.ts

@@ -2,7 +2,7 @@ import type { FooterCopyrightProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [FooterCopyrightProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L616)
+ * [FooterCopyrightProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L643)
  * ## Props
  * @prop spanClass
  * @prop aClass

package/dist/footer/FooterIcon.svelte

@@ -19,7 +19,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[FooterIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L625)
+[FooterIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L652)
 ## Props
 @prop children
 @prop href

package/dist/footer/FooterIcon.svelte.d.ts

@@ -2,7 +2,7 @@ import type { FooterIconProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [FooterIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L625)
+ * [FooterIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L652)
  * ## Props
  * @prop children
  * @prop href

package/dist/footer/FooterLink.svelte

@@ -16,7 +16,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[FooterLinkProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L637)
+[FooterLinkProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L664)
 ## Props
 @prop children
 @prop liClass

package/dist/footer/FooterLink.svelte.d.ts

@@ -2,7 +2,7 @@ import type { FooterLinkProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [FooterLinkProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L637)
+ * [FooterLinkProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L664)
  * ## Props
  * @prop children
  * @prop liClass

package/dist/footer/FooterLinkGroup.svelte

@@ -14,7 +14,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[FooterLinkGroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L632)
+[FooterLinkGroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L659)
 ## Props
 @prop class: ulClass
 @prop children

package/dist/footer/FooterLinkGroup.svelte.d.ts

@@ -2,7 +2,7 @@ import type { FooterLinkGroupProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [FooterLinkGroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L632)
+ * [FooterLinkGroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L659)
  * ## Props
  * @prop class: ulClass
  * @prop children

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

@@ -0,0 +1,48 @@
+<script lang="ts">
+  import { getContext } from "svelte";
+  import CheckIcon from "./CheckIcon.svelte";
+  import { buttonToggle, buttonToggleContent, buttonToggleText } from "./theme";
+  import type { ButtonToggleVariants } from "./theme";
+  import { type ButtonToggleProps, type ButtonToggleContext } from "../..";
+
+  let { value, selected = false, children, color }: ButtonToggleProps = $props();
+
+  const { toggleSelected, isSelected } = getContext<ButtonToggleContext>("button-toggle-group");
+  const multiSelect = getContext<boolean>("multiSelect");
+  const actualColor = getContext<ButtonToggleVariants["color"]>("buttonToggleColor") ? getContext<ButtonToggleVariants["color"]>("buttonToggleColor") : color ? color : "primary";
+  const size = getContext<ButtonToggleVariants["size"]>("buttonToggleSize");
+  const roundedSize = getContext<ButtonToggleVariants["roundedSize"]>("buttonToggleRounded");
+
+  function handleClick() {
+    toggleSelected(value);
+  }
+
+  $effect(() => {
+    selected = isSelected(value);
+  });
+</script>
+
+<button type="button" class={buttonToggle({ selected, color: actualColor, size, roundedSize })} data-selected={selected} onclick={handleClick} role={multiSelect ? "checkbox" : "radio"} aria-checked={selected}>
+  <div class={buttonToggleContent()}>
+    {#if selected}
+      <span class="absolute left-0 flex-shrink-0">
+        <CheckIcon />
+      </span>
+    {/if}
+    <span class={buttonToggleText({ selected })}>
+      {@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#L372)
+## Props
+@prop value
+@prop selected = false
+@prop children
+@prop color
+-->

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

@@ -0,0 +1,14 @@
+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#L372)
+ * ## Props
+ * @prop value
+ * @prop selected = false
+ * @prop children
+ * @prop color
+ */
+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,66 @@
+<script lang="ts">
+  import { setContext } from "svelte";
+  import { twMerge } from "tailwind-merge";
+  import { type ButtonToggleGroupProps, buttonToggleGroup } from "../..";
+
+  let { multiSelect = false, name = "toggle-group", value = multiSelect ? [] : null, color, size = "md", roundedSize = "md", onSelect = (val: any) => {}, children, class: className }: ButtonToggleGroupProps = $props();
+
+  const base = $derived(buttonToggleGroup({ roundedSize }));
+  type SelectedValue = string | null | string[];
+
+  let selectedValues = $state<SelectedValue>(multiSelect ? [] : null);
+
+  interface ButtonToggleContext {
+    toggleSelected: (toggleValue: string) => void;
+    isSelected: (toggleValue: string) => boolean;
+  }
+
+  $effect(() => {
+    value = selectedValues;
+    onSelect(selectedValues);
+  });
+
+  function toggleSelected(toggleValue: string) {
+    if (multiSelect) {
+      // Handle multi-select mode
+      const currentSelected = [...(selectedValues as string[])];
+      const index = currentSelected.indexOf(toggleValue);
+
+      if (index === -1) {
+        selectedValues = [...currentSelected, toggleValue];
+      } else {
+        currentSelected.splice(index, 1);
+        selectedValues = currentSelected;
+      }
+    } else {
+      // Handle single-select mode
+      selectedValues = toggleValue === selectedValues ? null : toggleValue;
+    }
+  }
+
+  function isSelected(toggleValue: string): boolean {
+    if (multiSelect) {
+      return (selectedValues as string[]).includes(toggleValue);
+    } else {
+      return selectedValues === toggleValue;
+    }
+  }
+
+  const buttonToggleContext: ButtonToggleContext = {
+    toggleSelected,
+    isSelected
+  };
+
+  // Set all the contexts separately
+  setContext("button-toggle-group", buttonToggleContext);
+  setContext("multiSelect", multiSelect);
+  setContext("buttonToggleColor", color);
+  setContext("buttonToggleSize", size);
+  setContext("buttonToggleRounded", roundedSize);
+</script>
+
+<div class="inline">
+  <div class={twMerge(base, className)} role={multiSelect ? "group" : "radiogroup"} aria-label={name}>
+    {@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,7 @@
+<script lang="ts">
+  // Simple check icon SVG component
+</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="text-green-600">
+  <polyline points="20 6 9 17 4 12"></polyline>
+</svg>

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

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const CheckIcon: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type CheckIcon = InstanceType<typeof CheckIcon>;
+export default CheckIcon;

package/dist/forms/button-toggle/button-toggle.txt

@@ -0,0 +1,25 @@
+# Button toggle
+
+## Requirements
+
+- Svelte 5 rune mode components
+- Structure and component names
+
+```
+<ButtonToggleGroup>
+  <ButtonToggle>Red</BottonToggle>
+  <ButtonToggle>Green</BottonToggle>
+  <ButtonToggle>Blue</BottonToggle>
+</ButtonToggleGroup>
+```
+
+- Single selection and multi selection
+- Sample code below is from material.angular and chrome dev tool.
+
+```
+<mat-button-toggle-group name="favoriteColor" aria-label="Favorite Color" class="mat-button-toggle-group mat-button-toggle-group-appearance-standard" role="radiogroup" aria-disabled="false"><mat-button-toggle role="presentation" value="red" class="mat-button-toggle mat-button-toggle-appearance-standard mat-button-toggle-animations-enabled mat-button-toggle-checked" id="mat-button-toggle-18"><button type="button" class="mat-button-toggle-button mat-focus-indicator" id="mat-button-toggle-18-button" role="radio" tabindex="0" aria-checked="true" name="favoriteColor"><div class="mat-button-toggle-checkbox-wrapper"><mat-pseudo-checkbox state="checked" aria-hidden="true" appearance="minimal" class="mat-pseudo-checkbox mat-pseudo-checkbox-checked mat-pseudo-checkbox-minimal"></mat-pseudo-checkbox></div><!----><span class="mat-button-toggle-label-content">Red</span></button><span class="mat-button-toggle-focus-overlay"></span><span matripple="" class="mat-ripple mat-button-toggle-ripple"></span></mat-button-toggle><mat-button-toggle role="presentation" value="green" class="mat-button-toggle mat-button-toggle-appearance-standard mat-button-toggle-animations-enabled" id="mat-button-toggle-19"><button type="button" class="mat-button-toggle-button mat-focus-indicator" id="mat-button-toggle-19-button" role="radio" tabindex="-1" aria-checked="false" name="favoriteColor"><div class="mat-button-toggle-checkbox-wrapper"><mat-pseudo-checkbox state="checked" aria-hidden="true" appearance="minimal" class="mat-pseudo-checkbox mat-pseudo-checkbox-checked mat-pseudo-checkbox-minimal"></mat-pseudo-checkbox></div><!----><span class="mat-button-toggle-label-content">Green</span></button><span class="mat-button-toggle-focus-overlay"></span><span matripple="" class="mat-ripple mat-button-toggle-ripple"></span></mat-button-toggle><mat-button-toggle role="presentation" value="blue" class="mat-button-toggle mat-button-toggle-appearance-standard mat-button-toggle-animations-enabled" id="mat-button-toggle-20"><button type="button" class="mat-button-toggle-button mat-focus-indicator" id="mat-button-toggle-20-button" role="radio" tabindex="-1" aria-checked="false" name="favoriteColor"><div class="mat-button-toggle-checkbox-wrapper"><mat-pseudo-checkbox state="checked" aria-hidden="true" appearance="minimal" class="mat-pseudo-checkbox mat-pseudo-checkbox-checked mat-pseudo-checkbox-minimal"></mat-pseudo-checkbox></div><!----><span class="mat-button-toggle-label-content">Blue</span></button><span class="mat-button-toggle-focus-overlay"></span><span matripple="" class="mat-ripple mat-button-toggle-ripple"></span></mat-button-toggle></mat-button-toggle-group>
+```
+
+- When you click a button using tailwind css animation to animate word to right and show a green tick svg icon on the left of the word to show ticked.
+
+- When it is selected, background color is bg-primay-100

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";