flowbite-svelte 0.48.4 → 1.0.0-next.2

package/dist/forms/toggle/theme.js

@@ -0,0 +1,97 @@
+import { tv } from "tailwind-variants";
+export const toggle = tv({
+    slots: {
+        span: "me-3 shrink-0 bg-gray-200 rounded-full peer-focus:ring-4 peer-checked:after:translate-x-full peer-checked:rtl:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:bg-white after:border-gray-300 after:border after:rounded-full after:transition-all dark:bg-gray-600 dark:border-gray-500 relative ",
+        label: "flex items-center",
+        input: "w-4 h-4 bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2 rounded-sm dark:bg-gray-700 dark:border-gray-600 sr-only peer"
+    },
+    variants: {
+        disabled: {
+            true: { label: "cursor-not-allowed opacity-50" }
+        },
+        checked: {
+            true: "",
+            false: ""
+        },
+        _offLabel: {
+            true: { span: "ms-3" }
+        },
+        color: {
+            // primary, secondary, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose
+            primary: {
+                span: "peer-focus:ring-primary-300 dark:peer-focus:ring-primary-800 peer-checked:bg-primary-600"
+            },
+            secondary: {
+                span: "peer-focus:ring-secondary-300 dark:peer-focus:ring-secondary-800 peer-checked:bg-secondary-600"
+            },
+            gray: {
+                span: "peer-focus:ring-gray-300 dark:peer-focus:ring-gray-800 peer-checked:bg-gray-500"
+            },
+            red: {
+                span: "peer-focus:ring-red-300 dark:peer-focus:ring-red-800 peer-checked:bg-red-600"
+            },
+            orange: {
+                span: "peer-focus:ring-orange-300 dark:peer-focus:ring-orange-800 peer-checked:bg-orange-500"
+            },
+            amber: {
+                span: "peer-focus:ring-amber-300 dark:peer-focus:ring-amber-800 peer-checked:bg-amber-600"
+            },
+            yellow: {
+                span: "peer-focus:ring-yellow-300 dark:peer-focus:ring-yellow-800 peer-checked:bg-yellow-400"
+            },
+            lime: {
+                span: "peer-focus:ring-lime-300 dark:peer-focus:ring-lime-800 peer-checked:bg-lime-500"
+            },
+            green: {
+                span: "peer-focus:ring-green-300 dark:peer-focus:ring-green-800 peer-checked:bg-green-600"
+            },
+            emerald: {
+                span: "peer-focus:ring-emerald-300 dark:peer-focus:ring-emerald-800 peer-checked:bg-emerald-600"
+            },
+            teal: {
+                span: "peer-focus:ring-teal-300 dark:peer-focus:ring-teal-800 peer-checked:bg-teal-600"
+            },
+            cyan: {
+                span: "peer-focus:ring-cyan-300 dark:peer-focus:ring-cyan-800 peer-checked:bg-cyan-600"
+            },
+            sky: {
+                span: "peer-focus:ring-sky-300 dark:peer-focus:ring-sky-800 peer-checked:bg-sky-600"
+            },
+            blue: {
+                span: "peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 peer-checked:bg-blue-600"
+            },
+            indigo: {
+                span: "peer-focus:ring-indigo-300 dark:peer-focus:ring-indigo-800 peer-checked:bg-indigo-600"
+            },
+            violet: {
+                span: "peer-focus:ring-violet-300 dark:peer-focus:ring-violet-800 peer-checked:bg-violet-600"
+            },
+            purple: {
+                span: "peer-focus:ring-purple-300 dark:peer-focus:ring-purple-800 peer-checked:bg-purple-600"
+            },
+            fuchsia: {
+                span: "peer-focus:ring-fuchsia-300 dark:peer-focus:ring-fuchsia-800 peer-checked:bg-fuchsia-600"
+            },
+            pink: {
+                span: "peer-focus:ring-pink-300 dark:peer-focus:ring-pink-800 peer-checked:bg-pink-600"
+            },
+            rose: {
+                span: "peer-focus:ring-rose-300 dark:peer-focus:ring-rose-800 peer-checked:bg-rose-600"
+            }
+        },
+        size: {
+            small: {
+                span: "w-9 h-5 after:top-[2px] after:start-[2px] after:h-4 after:w-4"
+            },
+            default: {
+                span: "w-11 h-6 after:top-0.5 after:start-[2px] after:h-5 after:w-5"
+            },
+            large: {
+                span: "w-14 h-7 after:top-0.5 after:start-[4px]  after:h-6 after:w-6"
+            }
+        }
+    },
+    defaultVariants: {
+        color: "primary"
+    }
+});

package/dist/forms/toggle/type.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from "svelte";
+import type { HTMLInputAttributes } from "svelte/elements";
+import type { ToggleVariants } from "./theme";
+interface ToggleProps extends ToggleVariants, Omit<HTMLInputAttributes, "size" | "color"> {
+    children?: Snippet;
+    offLabel?: Snippet;
+    value?: string | number;
+    checked?: boolean | undefined;
+    disabled?: boolean;
+    spanClass?: string;
+    inputClass?: string;
+}
+export { type ToggleProps };

package/dist/forms/toggle/type.js

@@ -0,0 +1 @@
+export {};

package/dist/gallery/Gallery.svelte

@@ -1,19 +1,33 @@
-<script>import { twMerge } from "tailwind-merge";
-export let items = [];
-export let imgClass = "h-auto max-w-full rounded-lg";
-$: divClass = twMerge("grid", $$props.class);
-function init(node) {
-  if (getComputedStyle(node).gap === "normal") node.style.gap = "inherit";
-}
+<script lang="ts">
+  import clsx from "clsx";
+  import { type GalleryProps as Props, type ImgType, gallery } from ".";
+
+  let { children, figure, items = [], imgClass, class: className, ...restProps }: Props = $props();
+
+  function init(node: HTMLElement) {
+    if (getComputedStyle(node).gap === "normal") node.style.gap = "inherit";
+  }
+
+  const { image, div } = gallery();
 </script>
 
-<div {...$$restProps} class={divClass} use:init>
+{#snippet _figure(item: ImgType)}
+  <div>
+    <img src={item.src} alt={item.alt} class={image({ class: imgClass })} {...restProps} />
+  </div>
+{/snippet}
+
+<div class={div({ class: clsx(className) })} use:init>
   {#each items as item}
-    <slot {item}>
-      <div><img src={item.src} alt={item.alt} class={twMerge(imgClass, $$props.classImg)} /></div>
-    </slot>
+    {#if figure}
+      {@render figure(item as ImgType)}
+    {:else}
+      {@render _figure(item as ImgType)}
+    {/if}
   {:else}
-    <slot item={items[0]} />
+    {#if children}
+      {@render children()}
+    {/if}
   {/each}
 </div>
 
@@ -21,6 +35,9 @@ function init(node) {
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let items: $$Props['items'] = [];
-@prop export let imgClass: $$Props['imgClass'] = 'h-auto max-w-full rounded-lg';
+@props: children: any;
+@props:figure: any;
+@props:items: any = [];
+@props:imgClass: any;
+@props:class: string;
 -->

package/dist/gallery/Gallery.svelte.d.ts

@@ -1,29 +1,23 @@
 import { SvelteComponentTyped } from "svelte";
-import type { HTMLAttributes } from 'svelte/elements';
-import type { ImgType } from '../types';
 declare const __propDef: {
-    props: HTMLAttributes<HTMLDivElement> & {
-        items: ImgType[];
-        imgClass?: string;
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        default: {
-            item: ImgType;
-        };
-    };
+    slots: {};
 };
-export type GalleryProps = typeof __propDef.props;
+type GalleryProps_ = typeof __propDef.props;
+export { GalleryProps_ as GalleryProps };
 export type GalleryEvents = typeof __propDef.events;
 export type GallerySlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let items: $$Props['items'] = [];
- * @prop export let imgClass: $$Props['imgClass'] = 'h-auto max-w-full rounded-lg';
+ * @props: children: any;
+ * @props:figure: any;
+ * @props:items: any = [];
+ * @props:imgClass: any;
+ * @props:class: string;
  */
-export default class Gallery extends SvelteComponentTyped<GalleryProps, GalleryEvents, GallerySlots> {
+export default class Gallery extends SvelteComponentTyped<GalleryProps_, GalleryEvents, GallerySlots> {
 }
-export {};

package/dist/gallery/index.d.ts

@@ -0,0 +1,4 @@
+import type { GalleryProps, ImgType } from "./type";
+import Gallery from "./Gallery.svelte";
+import { gallery } from "./theme";
+export { Gallery, gallery, type GalleryProps, type ImgType };

package/dist/gallery/index.js

@@ -0,0 +1,3 @@
+import Gallery from "./Gallery.svelte";
+import { gallery } from "./theme";
+export { Gallery, gallery };

package/dist/gallery/theme.d.ts

@@ -0,0 +1,32 @@
+declare const gallery: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            image?: import("tailwind-merge").ClassNameValue;
+            div?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            image?: import("tailwind-merge").ClassNameValue;
+            div?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    image: string;
+    div: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            image?: import("tailwind-merge").ClassNameValue;
+            div?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    image: string;
+    div: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    image: string;
+    div: string;
+}, undefined, unknown, unknown, undefined>>;
+export { gallery };

package/dist/gallery/theme.js

@@ -0,0 +1,8 @@
+import { tv } from "tailwind-variants";
+const gallery = tv({
+    slots: {
+        image: "h-auto max-w-full rounded-lg",
+        div: "grid"
+    }
+});
+export { gallery };

package/dist/gallery/type.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes, HTMLImgAttributes } from "svelte/elements";
+type ImgType = {
+    src?: string;
+    alt?: string;
+};
+interface GalleryProps extends HTMLAttributes<HTMLDivElement> {
+    children?: Snippet;
+    figure?: Snippet<[item: ImgType]>;
+    items?: HTMLImgAttributes[];
+    imgClass?: string;
+}
+export { type GalleryProps, type ImgType };

package/dist/gallery/type.js

@@ -0,0 +1 @@
+export {};

package/dist/index.d.ts

@@ -1,138 +1,74 @@
-export { default as Accordion } from "./accordion/Accordion.svelte";
-export { default as AccordionItem } from "./accordion/AccordionItem.svelte";
-export { default as Alert } from "./alert/Alert.svelte";
-export { default as Avatar } from "./avatar/Avatar.svelte";
-export { default as Badge } from "./badge/Badge.svelte";
-export { default as Banner } from "./banner/Banner.svelte";
-export { default as BottomNav } from "./bottom-navigation/BottomNav.svelte";
-export { default as BottomNavItem } from "./bottom-navigation/BottomNavItem.svelte";
-export { default as BottomNavHeader } from "./bottom-navigation/BottomNavHeader.svelte";
-export { default as BottomNavHeaderItem } from "./bottom-navigation/BottomNavHeaderItem.svelte";
-export { default as Breadcrumb } from "./breadcrumb/Breadcrumb.svelte";
-export { default as BreadcrumbItem } from "./breadcrumb/BreadcrumbItem.svelte";
-export { default as Button } from "./buttons/Button.svelte";
-export { default as GradientButton } from "./buttons/GradientButton.svelte";
-export { default as ButtonGroup } from "./button-group/ButtonGroup.svelte";
-export { default as Card } from "./cards/Card.svelte";
-export { default as Carousel } from "./carousel/Carousel.svelte";
-export { default as Thumbnails } from "./carousel/Thumbnails.svelte";
-export { default as Chart } from "./charts/Chart.svelte";
-export { default as DarkMode } from "./darkmode/DarkMode.svelte";
-export { default as Datepicker } from "./datepicker/Datepicker.svelte";
-export { default as DeviceMockup } from "./device-mockups/DeviceMockup.svelte";
-export { default as Drawer } from "./drawer/Drawer.svelte";
-export { default as Dropdown } from "./dropdown/Dropdown.svelte";
-export { default as DropdownDivider } from "./dropdown/DropdownDivider.svelte";
-export { default as DropdownHeader } from "./dropdown/DropdownHeader.svelte";
-export { default as DropdownItem } from "./dropdown/DropdownItem.svelte";
-export { default as Footer } from "./footer/Footer.svelte";
-export { default as FooterBrand } from "./footer/FooterBrand.svelte";
-export { default as FooterCopyright } from "./footer/FooterCopyright.svelte";
-export { default as FooterIcon } from "./footer/FooterIcon.svelte";
-export { default as FooterLink } from "./footer/FooterLink.svelte";
-export { default as FooterLinkGroup } from "./footer/FooterLinkGroup.svelte";
-export { default as Checkbox } from "./forms/Checkbox.svelte";
-export { default as CheckboxButton } from "./forms/CheckboxButton.svelte";
-export { default as Dropzone } from "./forms/Dropzone.svelte";
-export { default as Fileupload } from "./forms/Fileupload.svelte";
-export { default as FloatingLabelInput } from "./forms/FloatingLabelInput.svelte";
-export { default as Helper } from "./forms/Helper.svelte";
-export { default as Input } from "./forms/Input.svelte";
-export { default as InputAddon } from "./forms/InputAddon.svelte";
-export { default as Label } from "./forms/Label.svelte";
-export { default as MultiSelect } from "./forms/MultiSelect.svelte";
-export { default as NumberInput } from "./forms/NumberInput.svelte";
-export { default as Radio } from "./forms/Radio.svelte";
-export { default as RadioButton } from "./forms/RadioButton.svelte";
-export { default as Range } from "./forms/Range.svelte";
-export { default as Search } from "./forms/Search.svelte";
-export { default as Select } from "./forms/Select.svelte";
-export { default as Textarea } from "./forms/Textarea.svelte";
-export { default as Toggle } from "./forms/Toggle.svelte";
-export { default as Gallery } from "./gallery/Gallery.svelte";
-export { default as Indicator } from "./indicators/Indicator.svelte";
-export { default as Kbd } from "./kbd/Kbd.svelte";
-export { default as ArrowKeyDown } from "./kbd/ArrowKeyDown.svelte";
-export { default as ArrowKeyLeft } from "./kbd/ArrowKeyLeft.svelte";
-export { default as ArrowKeyRight } from "./kbd/ArrowKeyRight.svelte";
-export { default as ArrowKeyUp } from "./kbd/ArrowKeyUp.svelte";
-export { default as Listgroup } from "./list-group/Listgroup.svelte";
-export { default as ListgroupItem } from "./list-group/ListgroupItem.svelte";
-export { default as Marquee } from "./marquee/Marquee.svelte";
-export { default as Modal } from "./modal/Modal.svelte";
-export { default as MegaMenu } from "./mega-menu/MegaMenu.svelte";
-export { default as Navbar } from "./navbar/Navbar.svelte";
-export { default as NavBrand } from "./navbar/NavBrand.svelte";
-export { default as NavHamburger } from "./navbar/NavHamburger.svelte";
-export { default as NavLi } from "./navbar/NavLi.svelte";
-export { default as NavUl } from "./navbar/NavUl.svelte";
-export { default as Pagination } from "./pagination/Pagination.svelte";
-export { default as PaginationItem } from "./pagination/PaginationItem.svelte";
-export { default as Popover } from "./popover/Popover.svelte";
-export { default as Progressbar } from "./progress/Progressbar.svelte";
-export { default as Rating } from "./rating/Rating.svelte";
-export { default as AdvancedRating } from "./rating/AdvancedRating.svelte";
-export { default as ScoreRating } from "./rating/ScoreRating.svelte";
-export { default as RatingComment } from "./rating/RatingComment.svelte";
-export { default as Review } from "./rating/Review.svelte";
-export { default as Star } from "./rating/Star.svelte";
-export { default as Heart } from "./rating/Heart.svelte";
-export { default as Thumbup } from "./rating/Thumbup.svelte";
-export { default as Sidebar } from "./sidebar/Sidebar.svelte";
-export { default as SidebarItem } from "./sidebar/SidebarItem.svelte";
-export { default as SidebarBrand } from "./sidebar/SidebarBrand.svelte";
-export { default as SidebarCta } from "./sidebar/SidebarCta.svelte";
-export { default as SidebarDropdownItem } from "./sidebar/SidebarDropdownItem.svelte";
-export { default as SidebarDropdownWrapper } from "./sidebar/SidebarDropdownWrapper.svelte";
-export { default as SidebarGroup } from "./sidebar/SidebarGroup.svelte";
-export { default as SidebarWrapper } from "./sidebar/SidebarWrapper.svelte";
-export { default as CardPlaceholder } from "./skeleton/CardPlaceholder.svelte";
-export { default as ImagePlaceholder } from "./skeleton/ImagePlaceholder.svelte";
-export { default as ListPlaceholder } from "./skeleton/ListPlaceholder.svelte";
-export { default as Skeleton } from "./skeleton/Skeleton.svelte";
-export { default as TestimonialPlaceholder } from "./skeleton/TestimonialPlaceholder.svelte";
-export { default as TextPlaceholder } from "./skeleton/TextPlaceholder.svelte";
-export { default as VideoPlaceholder } from "./skeleton/VideoPlaceholder.svelte";
-export { default as WidgetPlaceholder } from "./skeleton/WidgetPlaceholder.svelte";
-export { default as SpeedDial } from "./speed-dial/SpeedDial.svelte";
-export { default as SpeedDialButton } from "./speed-dial/SpeedDialButton.svelte";
-export { default as Spinner } from "./spinner/Spinner.svelte";
-export { default as StepIndicator } from "./steps/StepIndicator.svelte";
-export { default as Table } from "./table/Table.svelte";
-export { default as TableBody } from "./table/TableBody.svelte";
-export { default as TableBodyCell } from "./table/TableBodyCell.svelte";
-export { default as TableBodyRow } from "./table/TableBodyRow.svelte";
-export { default as TableHead } from "./table/TableHead.svelte";
-export { default as TableHeadCell } from "./table/TableHeadCell.svelte";
-export { default as TableSearch } from "./table/TableSearch.svelte";
-export { default as TabItem } from "./tabs/TabItem.svelte";
-export { default as Tabs } from "./tabs/Tabs.svelte";
-export { default as Group } from "./timeline/Group.svelte";
-export { default as GroupItem } from "./timeline/GroupItem.svelte";
-export { default as Activity } from "./timeline/Activity.svelte";
-export { default as ActivityItem } from "./timeline/ActivityItem.svelte";
-export { default as Timeline } from "./timeline/Timeline.svelte";
-export { default as TimelineItem } from "./timeline/TimelineItem.svelte";
-export { default as Toast } from "./toast/Toast.svelte";
-export { default as Toolbar } from "./toolbar/Toolbar.svelte";
-export { default as ToolbarButton } from "./toolbar/ToolbarButton.svelte";
-export { default as ToolbarGroup } from "./toolbar/ToolbarGroup.svelte";
-export { default as Tooltip } from "./tooltip/Tooltip.svelte";
-export { default as A } from "./typography/A.svelte";
-export { default as Blockquote } from "./typography/Blockquote.svelte";
-export { default as DescriptionList } from "./typography/DescriptionList.svelte";
-export { default as Heading } from "./typography/Heading.svelte";
-export { default as Hr } from "./typography/Hr.svelte";
-export { default as Img } from "./typography/Img.svelte";
-export { default as Layout } from "./typography/Layout.svelte";
-export { default as Li } from "./typography/Li.svelte";
-export { default as Mark } from "./typography/Mark.svelte";
-export { default as List } from "./typography/List.svelte";
-export { default as P } from "./typography/P.svelte";
-export { default as Secondary } from "./typography/Secondary.svelte";
-export { default as Span } from "./typography/Span.svelte";
-export { default as CloseButton } from "./utils/CloseButton.svelte";
-export { default as Frame } from "./utils/Frame.svelte";
-export { default as TransitionFrame } from "./utils/TransitionFrame.svelte";
-export { default as Video } from "./video/Video.svelte";
+export * from "./uiHelpers.svelte";
+export * from "./accordion";
+export * from "./alert";
+export * from "./avatar";
+export * from "./badge";
+export * from "./banner";
+export * from "./bottom-navigation";
+export * from "./breadcrumb";
+export * from "./buttongroup";
+export * from "./buttons";
+export * from "./cards";
+export * from "./carousel";
+export * from "./chart";
+export * from "./darkmode";
+export * from "./datepicker";
+export * from "./device-mockups";
+export * from "./dropdown";
+export * from "./drawer";
+export * from "./footer";
+export * from "./gallery";
+export * from "./indicator";
+export * from "./kbd";
+export * from "./list-group";
+export * from "./mega-menu";
+export * from "./modal";
+export * from "./navbar";
+export * from "./pagination";
+export * from "./popover";
+export * from "./progress";
+export * from "./rating";
+export * from "./sidebar";
+export * from "./skeleton";
+export * from "./speed-dial";
+export * from "./spinner";
+export * from "./tabs";
+export * from "./table";
+export * from "./timeline";
+export * from "./toast";
+export * from "./toolbar";
+export * from "./tooltip";
+export * from "./utils";
+export * from "./video";
+export * from "./forms/checkbox";
+export * from "./forms/checkbox-button";
+export * from "./forms/dropzone";
+export * from "./forms/fileupload";
+export * from "./forms/floating-label-input";
+export * from "./forms/helper";
+export * from "./forms/input";
+export * from "./forms/input-addon";
+export * from "./forms/label";
+export * from "./forms/select";
+export * from "./forms/radio";
+export * from "./forms/radio-button";
+export * from "./forms/range";
+export * from "./forms/search";
+export * from "./forms/textarea";
+export * from "./forms/toggle";
+export * from "./typography/anchor";
+export * from "./typography/blockquote";
+export * from "./typography/descriptionlist";
+export * from "./typography/heading";
+export * from "./typography/hr";
+export * from "./typography/img";
+export * from "./typography/layout";
+export * from "./typography/list";
+export * from "./typography/mark";
+export * from "./typography/paragraph";
+export * from "./typography/secondary";
+export * from "./typography/span";
+export * from "./video";
+export * from "./utils";
 export * from "./types";
+export { default as Theme } from "./theme/Theme.svelte";