flowbite-svelte 0.44.8 → 0.44.9

package/src/lib/index.ts

@@ -0,0 +1,228 @@
+// Accordion
+export { default as Accordion } from './accordion/Accordion.svelte';
+export { default as AccordionItem } from './accordion/AccordionItem.svelte';
+
+// Alerts
+export { default as Alert } from './alerts/Alert.svelte';
+
+// Avatar
+export { default as Avatar } from './avatar/Avatar.svelte';
+
+// Badges
+export { default as Badge } from './badges/Badge.svelte';
+
+// Banner
+export { default as Banner } from './banner/Banner.svelte';
+
+// Bottom navigation
+export { default as BottomNav } from './bottom-nav/BottomNav.svelte';
+export { default as BottomNavItem } from './bottom-nav/BottomNavItem.svelte';
+export { default as BottomNavHeader } from './bottom-nav/BottomNavHeader.svelte';
+export { default as BottomNavHeaderItem } from './bottom-nav/BottomNavHeaderItem.svelte';
+
+// Breadcrumbs
+export { default as Breadcrumb } from './breadcrumbs/Breadcrumb.svelte';
+export { default as BreadcrumbItem } from './breadcrumbs/BreadcrumbItem.svelte';
+
+// Buttons
+export { default as Button } from './buttons/Button.svelte';
+export { default as GradientButton } from './buttons/GradientButton.svelte';
+
+// Buttongroups
+export { default as ButtonGroup } from './buttongroups/ButtonGroup.svelte';
+
+// Cards
+export { default as Card } from './cards/Card.svelte';
+
+// Carousels
+export { default as Carousel } from './carousels/Carousel.svelte';
+export { default as Thumbnails } from './carousels/Thumbnails.svelte';
+
+// Charts
+export { default as Chart } from './charts/Chart.svelte';
+
+// Dark mode
+export { default as DarkMode } from './darkmode/DarkMode.svelte';
+
+// Datepicker
+export { default as Datepicker } from './datepicker/Datepicker.svelte';
+
+// DeviceMockup
+export { default as DeviceMockup } from './device-mockup/DeviceMockup.svelte';
+
+// Drawer
+export { default as Drawer } from './drawer/Drawer.svelte';
+
+// Dropdown
+export { default as Dropdown } from './dropdowns/Dropdown.svelte';
+export { default as DropdownDivider } from './dropdowns/DropdownDivider.svelte';
+export { default as DropdownHeader } from './dropdowns/DropdownHeader.svelte';
+export { default as DropdownItem } from './dropdowns/DropdownItem.svelte';
+
+// Footers
+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';
+
+// Forms
+export { default as Checkbox } from './forms/Checkbox.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 RadioInline } from './forms/RadioInline.svelte';
+export { default as Radio } from './forms/Radio.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 VoiceSearch } from './forms/VoiceSearch.svelte';
+
+// Gallery
+export { default as Gallery } from './gallery/Gallery.svelte';
+
+// Indicator
+export { default as Indicator } from './indicators/Indicator.svelte';
+
+// Kbd
+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';
+
+// List
+export { default as Listgroup } from './list-group/Listgroup.svelte';
+export { default as ListgroupItem } from './list-group/ListgroupItem.svelte';
+
+// Modals
+export { default as Modal } from './modals/Modal.svelte';
+
+// MegaMenu
+export { default as MegaMenu } from './megamenu/MegaMenu.svelte';
+
+// Navbar
+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';
+
+// Pagination
+export { default as Pagination } from './paginations/Pagination.svelte';
+export { default as PaginationItem } from './paginations/PaginationItem.svelte';
+
+// Popover
+export { default as Popover } from './popover/Popover.svelte';
+
+// Progressbar
+export { default as Progressbar } from './progressbars/Progressbar.svelte';
+
+// Rating
+export { default as Rating } from './ratings/Rating.svelte';
+export { default as AdvancedRating } from './ratings/AdvancedRating.svelte';
+export { default as ScoreRating } from './ratings/ScoreRating.svelte';
+export { default as RatingComment } from './ratings/RatingComment.svelte';
+export { default as Review } from './ratings/Review.svelte';
+export { default as Star } from './ratings/Star.svelte';
+export { default as Heart } from './ratings/Heart.svelte';
+export { default as Thumbup } from './ratings/Thumbup.svelte';
+
+// Sidebar
+export { default as Sidebar } from './sidebars/Sidebar.svelte';
+export { default as SidebarItem } from './sidebars/SidebarItem.svelte';
+export { default as SidebarBrand } from './sidebars/SidebarBrand.svelte';
+export { default as SidebarCta } from './sidebars/SidebarCta.svelte';
+export { default as SidebarDropdownItem } from './sidebars/SidebarDropdownItem.svelte';
+export { default as SidebarDropdownWrapper } from './sidebars/SidebarDropdownWrapper.svelte';
+export { default as SidebarGroup } from './sidebars/SidebarGroup.svelte';
+export { default as SidebarWrapper } from './sidebars/SidebarWrapper.svelte';
+
+// Skeleton
+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';
+
+// Speed dial
+export { default as SpeedDial } from './speed-dial/SpeedDial.svelte';
+export { default as SpeedDialButton } from './speed-dial/SpeedDialButton.svelte';
+
+// Spin
+export { default as Spinner } from './spinners/Spinner.svelte';
+
+// Steps
+export { default as StepIndicator } from './steps/StepIndicator.svelte';
+
+// Tables
+export { default as Table } from './tables/Table.svelte';
+export { default as TableBody } from './tables/TableBody.svelte';
+export { default as TableBodyCell } from './tables/TableBodyCell.svelte';
+export { default as TableBodyRow } from './tables/TableBodyRow.svelte';
+export { default as TableHead } from './tables/TableHead.svelte';
+export { default as TableHeadCell } from './tables/TableHeadCell.svelte';
+export { default as TableSearch } from './tables/TableSearch.svelte';
+
+// Tabs
+export { default as TabItem } from './tabs/TabItem.svelte';
+export { default as Tabs } from './tabs/Tabs.svelte';
+
+// Timeline
+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 TimelineHorizontal } from './timeline/TimelineHorizontal.svelte';
+export { default as TimelineItemHorizontal } from './timeline/TimelineItemHorizontal.svelte';
+export { default as TimelineItemVertical } from './timeline/TimelineItemVertical.svelte';
+
+// Toast
+export { default as Toast } from './toasts/Toast.svelte';
+
+// Toolbar
+export { default as Toolbar } from './toolbar/Toolbar.svelte';
+export { default as ToolbarButton } from './toolbar/ToolbarButton.svelte';
+export { default as ToolbarGroup } from './toolbar/ToolbarGroup.svelte';
+
+// Tooltips
+export { default as Tooltip } from './tooltips/Tooltip.svelte';
+
+// Typography
+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';
+
+// utils
+export { default as CloseButton } from './utils/CloseButton.svelte';
+export { default as Frame } from './utils/Frame.svelte';
+
+// video
+export { default as Video } from './video/Video.svelte';
+
+// types
+export * from './types.ts';

package/src/lib/indicators/Indicator.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+  import type { PlacementType } from '../types';
+
+  export let color: IndicatorColorType = 'gray';
+  export let rounded: boolean = false;
+  export let size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md';
+  export let border: boolean = false;
+  export let placement: PlacementType | undefined = undefined;
+  export let offset: boolean = true;
+
+  const colors = {
+    gray: 'bg-gray-200',
+    dark: 'bg-gray-900 dark:bg-gray-700',
+    blue: 'bg-blue-600',
+    orange: 'bg-orange-600',
+    green: 'bg-green-500',
+    red: 'bg-red-500',
+    purple: 'bg-purple-500',
+    indigo: 'bg-indigo-500',
+    yellow: 'bg-yellow-300',
+    teal: 'bg-teal-500',
+    none: ''
+  };
+
+  type IndicatorColorType = keyof typeof colors;
+
+  const sizes = {
+    xs: 'w-2 h-2',
+    sm: 'w-2.5 h-2.5',
+    md: 'w-3 h-3',
+    lg: 'w-3.5 h-3.5',
+    xl: 'w-6 h-6'
+  };
+
+  const placements = {
+    // top
+    'top-left': 'top-0 left-0',
+    'top-center': 'top-0 left-1/2 -translate-x-1/2',
+    'top-right': 'top-0 right-0',
+
+    // center
+    'center-left': 'top-1/2 -translate-y-1/2 left-0',
+    center: 'top-1/2 -translate-y-1/2 left-1/2 -translate-x-1/2',
+    'center-right': 'top-1/2 -translate-y-1/2 right-0',
+
+    // bottom
+    'bottom-left': 'bottom-0 left-0',
+    'bottom-center': 'bottom-0 left-1/2 -translate-x-1/2',
+    'bottom-right': 'bottom-0 right-0'
+  };
+
+  const offsets = {
+    // top
+    'top-left': '-translate-x-1/3 -translate-y-1/3',
+    'top-center': '-translate-y-1/3',
+    'top-right': 'translate-x-1/3 -translate-y-1/3',
+
+    // center
+    'center-left': '-translate-x-1/3',
+    center: '',
+    'center-right': 'translate-x-1/3',
+
+    // bottom
+    'bottom-left': '-translate-x-1/3 translate-y-1/3',
+    'bottom-center': 'translate-y-1/3',
+    'bottom-right': 'translate-x-1/3 translate-y-1/3'
+  };
+
+  let dotClass: string;
+  $: dotClass = twMerge('flex-shrink-0', rounded ? 'rounded' : 'rounded-full', border && 'border-2 border-white dark:border-gray-800', sizes[size], colors[color], $$slots.default && 'inline-flex items-center justify-center', placement && 'absolute ' + placements[placement], placement && offset && offsets[placement], $$props.class);
+</script>
+
+<div class={dotClass}><slot /></div>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let color: IndicatorColorType = 'gray';
+@prop export let rounded: boolean = false;
+@prop export let size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md';
+@prop export let border: boolean = false;
+@prop export let placement: PlacementType | undefined = undefined;
+@prop export let offset: boolean = true;
+-->

package/src/lib/kbd/ArrowKeyDown.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+  export let svgClass: string = 'w-4 h-4';
+</script>
+
+<svg {...$$restProps} class={twMerge(svgClass, $$props.class)} aria-hidden="true" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
+  <path d="M310.6 246.6l-127.1 128C176.4 380.9 168.2 384 160 384s-16.38-3.125-22.63-9.375l-127.1-128C.2244 237.5-2.516 223.7 2.438 211.8S19.07 192 32 192h255.1c12.94 0 24.62 7.781 29.58 19.75S319.8 237.5 310.6 246.6z" />
+</svg>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let svgClass: string = 'w-4 h-4';
+-->

package/src/lib/kbd/ArrowKeyLeft.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+  export let svgClass: string = 'w-4 h-4';
+</script>
+
+<svg {...$$restProps} class={twMerge(svgClass, $$props.class)} aria-hidden="true" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
+  <path d="M137.4 406.6l-128-127.1C3.125 272.4 0 264.2 0 255.1s3.125-16.38 9.375-22.63l128-127.1c9.156-9.156 22.91-11.9 34.88-6.943S192 115.1 192 128v255.1c0 12.94-7.781 24.62-19.75 29.58S146.5 415.8 137.4 406.6z" />
+</svg>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let svgClass: string = 'w-4 h-4';
+-->

package/src/lib/kbd/ArrowKeyRight.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+  export let svgClass: string = 'w-4 h-4';
+</script>
+
+<svg {...$$restProps} class={twMerge(svgClass, $$props.class)} aria-hidden="true" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
+  <path d="M118.6 105.4l128 127.1C252.9 239.6 256 247.8 256 255.1s-3.125 16.38-9.375 22.63l-128 127.1c-9.156 9.156-22.91 11.9-34.88 6.943S64 396.9 64 383.1V128c0-12.94 7.781-24.62 19.75-29.58S109.5 96.23 118.6 105.4z" />
+</svg>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let svgClass: string = 'w-4 h-4';
+-->

package/src/lib/kbd/ArrowKeyUp.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+  export let svgClass: string = 'w-4 h-4';
+</script>
+
+<svg {...$$restProps} class={twMerge(svgClass, $$props.class)} aria-hidden="true" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
+  <path d="M9.39 265.4l127.1-128C143.6 131.1 151.8 128 160 128s16.38 3.125 22.63 9.375l127.1 128c9.156 9.156 11.9 22.91 6.943 34.88S300.9 320 287.1 320H32.01c-12.94 0-24.62-7.781-29.58-19.75S.2333 274.5 9.39 265.4z" />
+</svg>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let svgClass: string = 'w-4 h-4';
+-->

package/src/lib/kbd/Kbd.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+  export let kbdClass: string = 'text-xs font-semibold text-gray-800 bg-gray-100 border border-gray-200 rounded-lg dark:bg-gray-600 dark:text-gray-100 dark:border-gray-500';
+</script>
+
+<kbd class={twMerge(kbdClass, $$props.class)}>
+  <slot />
+</kbd>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let kbdClass: string = 'text-xs font-semibold text-gray-800 bg-gray-100 border border-gray-200 rounded-lg dark:bg-gray-600 dark:text-gray-100 dark:border-gray-500';
+-->

package/src/lib/list-group/Listgroup.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+  import { setContext, type ComponentProps, createEventDispatcher } from 'svelte';
+  import { twMerge } from 'tailwind-merge';
+  import type { ListGroupItemType } from '../types';
+  import ListgroupItem from './ListgroupItem.svelte';
+  import Frame from '../utils/Frame.svelte';
+
+  const dispatch = createEventDispatcher();
+
+  // propagate props type from underlying Frame
+  interface $$Props extends ComponentProps<Frame> {
+    items?: ListGroupItemType[] | string[];
+    active?: boolean;
+  }
+
+  export let items: ListGroupItemType[] | string[] = [];
+  export let active: boolean = false;
+  export let defaultClass: string = 'divide-y divide-gray-200 dark:divide-gray-600';
+
+  $: setContext('active', active);
+
+  let groupClass: string;
+  $: groupClass = twMerge(defaultClass, $$props.class);
+</script>
+
+<Frame tag={active ? 'div' : 'ul'} {...$$restProps} rounded border class={groupClass}>
+  {#each items as item, index}
+    {#if typeof item === 'object'}
+      <ListgroupItem {active} {...item} {index} on:click={() => dispatch('click', item)}><slot {item} {index} /></ListgroupItem>
+    {:else}
+      <ListgroupItem {active} {index} on:click={() => dispatch('click', item)}><slot {item} {index} /></ListgroupItem>
+    {/if}
+  {:else}
+    <slot item={items[0]} />
+  {/each}
+</Frame>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let items: ListGroupItemType[] | string[] = [];
+@prop export let active: boolean = false;
+@prop export let defaultClass: string = 'divide-y divide-gray-200 dark:divide-gray-600';
+-->

package/src/lib/list-group/ListgroupItem.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  import { getContext } from 'svelte';
+  import { twMerge } from 'tailwind-merge';
+
+  export let active: boolean = getContext('active');
+  export let current: boolean = false;
+  export let disabled: boolean = false;
+  export let href: string = '';
+  export let currentClass: string = 'text-white bg-primary-700 dark:text-white dark:bg-gray-800';
+  export let normalClass: string = '';
+  export let disabledClass: string = 'text-gray-900 bg-gray-100 dark:bg-gray-600 dark:text-gray-400';
+  export let focusClass: string = 'focus:z-40 focus:outline-none focus:ring-2 focus:ring-primary-700 focus:text-primary-700 dark:focus:ring-gray-500 dark:focus:text-white';
+  export let hoverClass: string = 'hover:bg-gray-100 hover:text-primary-700 dark:hover:bg-gray-600 dark:hover:text-white';
+  export let itemDefaultClass: string = 'py-2 px-4 w-full text-sm font-medium list-none first:rounded-t-lg last:rounded-b-lg';
+
+  const states = {
+    current: currentClass,
+    normal: normalClass,
+    disabled: disabledClass
+  };
+
+  let state: 'disabled' | 'current' | 'normal';
+  $: state = disabled ? 'disabled' : current ? 'current' : 'normal';
+
+  let itemClass: string;
+  $: itemClass = twMerge(itemDefaultClass, states[state], active && state === 'disabled' && 'cursor-not-allowed', active && state === 'normal' && hoverClass, active && state === 'normal' && focusClass, $$props.class);
+</script>
+
+{#if !active}
+  <li class={itemClass}>
+    <slot item={$$props} />
+  </li>
+{:else if href}
+  <a {href} class="block {itemClass}" aria-current={current} on:blur on:change on:click on:focus on:keydown on:keypress on:keyup on:mouseenter on:mouseleave on:mouseover>
+    <slot item={$$props} />
+  </a>
+{:else}
+  <button type="button" class="flex items-center text-left {itemClass}" {disabled} on:blur on:change on:click on:focus on:keydown on:keypress on:keyup on:mouseenter on:mouseleave on:mouseover aria-current={current}>
+    <slot item={$$props} />
+  </button>
+{/if}
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let active: boolean = getContext('active');
+@prop export let current: boolean = false;
+@prop export let disabled: boolean = false;
+@prop export let href: string = '';
+@prop export let currentClass: string = 'text-white bg-primary-700 dark:text-white dark:bg-gray-800';
+@prop export let normalClass: string = '';
+@prop export let disabledClass: string = 'text-gray-900 bg-gray-100 dark:bg-gray-600 dark:text-gray-400';
+@prop export let focusClass: string = 'focus:z-40 focus:outline-none focus:ring-2 focus:ring-primary-700 focus:text-primary-700 dark:focus:ring-gray-500 dark:focus:text-white';
+@prop export let hoverClass: string = 'hover:bg-gray-100 hover:text-primary-700 dark:hover:bg-gray-600 dark:hover:text-white';
+@prop export let itemDefaultClass: string = 'py-2 px-4 w-full text-sm font-medium list-none first:rounded-t-lg last:rounded-b-lg';
+-->

package/src/lib/megamenu/MegaMenu.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+  import type { LinkType } from '../types';
+  import Popper from '../utils/Popper.svelte';
+  import type { ComponentProps } from 'svelte';
+
+  interface $$Props extends ComponentProps<Popper> {
+    items: LinkTypeLike[];
+    full: boolean;
+    ulClass: string;
+  }
+
+  export let items: LinkTypeLike[] = [];
+  export let full: boolean = false;
+  export let open: boolean = false;
+  export let ulClass: string = 'grid grid-flow-row gap-y-4 md:gap-x-0 auto-col-max auto-row-max';
+
+  interface LinkTypeLike extends LinkType {
+    [propName: string]: any;
+  }
+
+  let wrapperClass: string;
+  $: wrapperClass = twMerge(full && 'border-y w-full', $$props.class);
+
+  let ulCls: string;
+  $: ulCls = twMerge(ulClass, full && $$slots.extra ? 'grid-cols-2' : 'grid-cols-2 md:grid-cols-3', 'text-sm font-medium', full && $$slots.extra && 'md:w-2/3', $$props.classUl);
+</script>
+
+<Popper color={full ? 'default' : 'dropdown'} border={!full} rounded={!full} activeContent arrow={false} trigger="click" placement="bottom" yOnly={full} {...$$restProps} class={wrapperClass} on:show bind:open>
+  <div class="flex flex-col md:flex-row p-4 max-w-screen-md justify-center mx-auto mt-2">
+    <ul class={ulCls}>
+      {#each items as item, index}
+        <li>
+          <slot {item} {index} />
+        </li>
+      {:else}
+        <slot item={items[0]} />
+      {/each}
+    </ul>
+    {#if full && $$slots.extra}<div class="md:w-1/3 mt-4 md:mt-0"><slot name="extra" /></div>{/if}
+  </div>
+</Popper>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let items: LinkTypeLike[] = [];
+@prop export let full: boolean = false;
+@prop export let open: boolean = false;
+@prop export let ulClass: string = 'grid grid-flow-row gap-y-4 md:gap-x-0 auto-col-max auto-row-max';
+-->