flowbite-svelte 0.31.1 → 0.33.1

package/dist/bottom-nav/BottomNav.svelte

@@ -0,0 +1,40 @@
+<script>import { setContext } from 'svelte';
+import classNames from 'classnames';
+export let position = 'fixed';
+export let navType = 'default';
+export let outerDefault = 'w-full z-50 border-gray-200 dark:bg-gray-700 dark:border-gray-600';
+export let innerDefault = 'grid h-full max-w-lg mx-auto';
+setContext('navType', navType);
+const outerDivClasses = {
+    default: 'bottom-0 left-0 h-16 bg-white border-t',
+    border: 'bottom-0 left-0 h-16 bg-white border-t',
+    application: 'h-16 max-w-lg -translate-x-1/2 bg-white border rounded-full bottom-4 left-1/2',
+    pagination: 'bottom-0 h-16 -translate-x-1/2 bg-white border-t left-1/2',
+    group: 'bottom-0 -translate-x-1/2 bg-white border-t left-1/2',
+    card: 'bottom-0 left-0 h-16 bg-white border-t',
+    meeting: 'bottom-0 left-0 grid h-16 grid-cols-1 px-8 bg-white border-t md:grid-cols-3',
+    video: 'bottom-0 left-0 grid h-24 grid-cols-1 px-8 bg-white border-t md:grid-cols-3',
+    custom: ''
+};
+const innerDivClasses = {
+    default: '',
+    border: '',
+    application: '',
+    pagination: '',
+    group: '',
+    card: '',
+    meeting: 'flex items-center justify-center mx-auto',
+    video: 'flex items-center w-full',
+    custom: ''
+};
+$: outerClass = classNames(position, outerDefault, outerDivClasses[navType], $$props.outerDiv);
+$: innerClass = classNames(innerDefault, innerDivClasses[navType], $$props.innerDiv);
+</script>
+
+
+<div class="{outerClass}" {...$$restProps} >
+  <slot name="header" />
+  <div class="{innerClass}">
+      <slot />
+  </div>
+</div>

package/dist/bottom-nav/BottomNav.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        position?: "static" | "fixed" | "absolute" | "relative" | "sticky" | undefined;
+        navType?: "default" | "border" | "custom" | "application" | "pagination" | "group" | "card" | "meeting" | "video" | undefined;
+        outerDefault?: string | undefined;
+        innerDefault?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        header: {};
+        default: {};
+    };
+};
+export type BottomNavProps = typeof __propDef.props;
+export type BottomNavEvents = typeof __propDef.events;
+export type BottomNavSlots = typeof __propDef.slots;
+export default class BottomNav extends SvelteComponentTyped<BottomNavProps, BottomNavEvents, BottomNavSlots> {
+}
+export {};

package/dist/bottom-nav/BottomNavHeader.svelte

@@ -0,0 +1,10 @@
+<script>export let outerClass = "w-full";
+export let innerClass = "grid max-w-xs grid-cols-3 gap-1 p-1 mx-auto my-2 bg-gray-100 rounded-lg dark:bg-gray-600";
+</script>
+
+
+<div class="{outerClass}" {...$$restProps}>
+  <div class="{innerClass}" role="group">
+      <slot />
+  </div>
+</div>

package/dist/bottom-nav/BottomNavHeader.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        outerClass?: string | undefined;
+        innerClass?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type BottomNavHeaderProps = typeof __propDef.props;
+export type BottomNavHeaderEvents = typeof __propDef.events;
+export type BottomNavHeaderSlots = typeof __propDef.slots;
+export default class BottomNavHeader extends SvelteComponentTyped<BottomNavHeaderProps, BottomNavHeaderEvents, BottomNavHeaderSlots> {
+}
+export {};

package/dist/bottom-nav/BottomNavHeaderItem.svelte

@@ -0,0 +1,11 @@
+<script>import classNames from 'classnames';
+export let itemName = '';
+export let active = false;
+export let defaultClass = "px-5 py-1.5 text-xs font-medium text-gray-900 hover:bg-gray-200 dark:text-white dark:hover:bg-gray-700 rounded-lg";
+export let activeClass = 'px-5 py-1.5 text-xs font-medium text-white bg-gray-900 dark:bg-gray-300 dark:text-gray-900 rounded-lg';
+$: btnClass = classNames(active ? activeClass : defaultClass);
+</script>
+
+<button class="{btnClass}" {...$$restProps}>
+  {itemName}
+</button>

package/dist/bottom-nav/BottomNavHeaderItem.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        itemName?: string | undefined;
+        active?: boolean | undefined;
+        defaultClass?: string | undefined;
+        activeClass?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type BottomNavHeaderItemProps = typeof __propDef.props;
+export type BottomNavHeaderItemEvents = typeof __propDef.events;
+export type BottomNavHeaderItemSlots = typeof __propDef.slots;
+export default class BottomNavHeaderItem extends SvelteComponentTyped<BottomNavHeaderItemProps, BottomNavHeaderItemEvents, BottomNavHeaderItemSlots> {
+}
+export {};

package/dist/bottom-nav/BottomNavItem.svelte

@@ -0,0 +1,51 @@
+<script>import { getContext } from 'svelte';
+import classNames from 'classnames';
+export let btnName = '';
+export let appBtnPosition = 'custom';
+export let btnDefault = '';
+export let spanDefault = '';
+const navType = getContext('navType');
+const btnClasses = {
+    default: 'inline-flex flex-col items-center justify-center px-5 hover:bg-gray-50 dark:hover:bg-gray-800 group',
+    border: 'inline-flex flex-col items-center justify-center px-5 border-gray-200 border-x hover:bg-gray-50 dark:hover:bg-gray-800 group dark:border-gray-600',
+    application: '',
+    pagination: 'inline-flex flex-col items-center justify-center px-5 hover:bg-gray-50 dark:hover:bg-gray-800 group',
+    group: 'inline-flex flex-col items-center justify-center p-4 hover:bg-gray-50 dark:hover:bg-gray-800 group',
+    card: 'inline-flex flex-col items-center justify-center px-5 hover:bg-gray-50 dark:hover:bg-gray-800 group',
+    meeting: '',
+    video: '',
+    custom: ''
+};
+const spanClasses = {
+    default: 'text-sm text-gray-500 dark:text-gray-400 group-hover:text-blue-600 dark:group-hover:text-blue-500',
+    border: 'text-sm text-gray-500 dark:text-gray-400 group-hover:text-blue-600 dark:group-hover:text-blue-500',
+    application: 'sr-only',
+    pagination: 'sr-only',
+    group: 'sr-only',
+    card: 'text-sm text-gray-500 dark:text-gray-400 group-hover:text-blue-600 dark:group-hover:text-blue-500',
+    meeting: '',
+    video: '',
+    custom: ''
+};
+const appBtnClasses = {
+    left: 'inline-flex flex-col items-center justify-center px-5 rounded-l-full hover:bg-gray-50 dark:hover:bg-gray-800 group',
+    middle: 'inline-flex flex-col items-center justify-center px-5 hover:bg-gray-50 dark:hover:bg-gray-800 group',
+    right: 'inline-flex flex-col items-center justify-center px-5 rounded-r-full hover:bg-gray-50 dark:hover:bg-gray-800 group',
+    custom: ''
+};
+$: btnClass = classNames(btnDefault, btnClasses[navType], appBtnClasses[appBtnPosition], $$props.btnClass);
+$: spanClass = classNames(spanDefault, spanClasses[navType], $$props.spanClass);
+</script>
+<button class="{btnClass}" aria-label="{btnName}" {...$$restProps} 
+  on:click
+  on:change
+  on:keydown
+  on:keyup
+  on:focus
+  on:blur
+  on:mouseenter
+  on:mouseleave
+>
+  <slot />
+  <span class="{spanClass}">{btnName}</span>
+</button>

package/dist/bottom-nav/BottomNavItem.svelte.d.ts

@@ -0,0 +1,31 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        btnName?: string | undefined;
+        appBtnPosition?: "custom" | "left" | "middle" | "right" | undefined;
+        btnDefault?: string | undefined;
+        spanDefault?: string | undefined;
+    };
+    events: {
+        click: MouseEvent;
+        change: Event;
+        keydown: KeyboardEvent;
+        keyup: KeyboardEvent;
+        focus: FocusEvent;
+        blur: FocusEvent;
+        mouseenter: MouseEvent;
+        mouseleave: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type BottomNavItemProps = typeof __propDef.props;
+export type BottomNavItemEvents = typeof __propDef.events;
+export type BottomNavItemSlots = typeof __propDef.slots;
+export default class BottomNavItem extends SvelteComponentTyped<BottomNavItemProps, BottomNavItemEvents, BottomNavItemSlots> {
+}
+export {};

package/dist/gallery/Gallery.svelte

@@ -0,0 +1,9 @@
+<script>import classNames from 'classnames';
+export let outerDivClass = 'grid gap-4';
+export let colClass = 'grid-cols-2 md:grid-cols-3';
+const divClass = classNames(outerDivClass, colClass);
+</script>
+
+<div class="{divClass}">
+  <slot />
+</div>

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

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        outerDivClass?: string | undefined;
+        colClass?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type GalleryProps = typeof __propDef.props;
+export type GalleryEvents = typeof __propDef.events;
+export type GallerySlots = typeof __propDef.slots;
+export default class Gallery extends SvelteComponentTyped<GalleryProps, GalleryEvents, GallerySlots> {
+}
+export {};

package/dist/gallery/GalleryItem.svelte

@@ -0,0 +1,8 @@
+<script>export let src = '';
+export let alt = '';
+export let imgClass = 'h-auto max-w-full rounded-lg';
+</script>
+
+<div>
+  <img class="{imgClass}" {src} {alt}>
+</div>

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

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        src?: string | undefined;
+        alt?: string | undefined;
+        imgClass?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type GalleryItemProps = typeof __propDef.props;
+export type GalleryItemEvents = typeof __propDef.events;
+export type GalleryItemSlots = typeof __propDef.slots;
+export default class GalleryItem extends SvelteComponentTyped<GalleryItemProps, GalleryItemEvents, GalleryItemSlots> {
+}
+export {};

package/dist/index.d.ts

@@ -4,6 +4,10 @@ export { default as Alert } from "./alerts/Alert.svelte";
 export { default as Avatar } from "./avatar/Avatar.svelte";
 export { default as Badge } from "./badges/Badge.svelte";
 export { default as Banner } from "./banner/Banner.svelte";
+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";
 export { default as Breadcrumb } from "./breadcrumbs/Breadcrumb.svelte";
 export { default as BreadcrumbItem } from "./breadcrumbs/BreadcrumbItem.svelte";
 export { default as Button } from "./buttons/Button.svelte";
@@ -42,6 +46,8 @@ export { default as SimpleSearch } from "./forms/SimpleSearch.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";
+export { default as Gallery } from "./gallery/Gallery.svelte";
+export { default as GalleryItem } from "./gallery/GalleryItem.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";

package/dist/index.js

@@ -12,7 +12,13 @@ export { default as Avatar } from './avatar/Avatar.svelte';
 export { default as Badge } from './badges/Badge.svelte';
 
 // Banner
-export { default as Banner } from './banner/Banner.svelte'
+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';
@@ -74,6 +80,10 @@ 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'
+export { default as GalleryItem } from './gallery/GalleryItem.svelte'
+
 // Indicator
 export { default as Indicator } from './indicators/Indicator.svelte';
 

package/dist/types.d.ts

@@ -223,5 +223,16 @@ export interface TransitionParamTypes {
     tick?: ((t: number, u: number) => void) | undefined;
 }
 type TransitionTypes = "blur" | "fade" | "fly" | "slide" | "in:fly" | "out:fly" | "in:slide" | "out:slide" | "in:fade" | "out:fade" | "in:blur" | "out:blur";
+export interface ButtonClassesTypes {
+    default?: string | undefined;
+    border?: string | undefined;
+    application?: string | undefined;
+    pagination?: string | undefined;
+    group?: string | undefined;
+    card?: string | undefined;
+    meeting?: string | undefined;
+    video?: string | undefined;
+    custom?: string | undefined;
+}
 import { SvelteComponent } from "svelte";
 export {};

package/dist/types.js

@@ -284,3 +284,15 @@ export interface TransitionParamTypes {
 }
 
 export type TransitionTypes = 'fade' | 'fly' | 'slide' | 'blur' | 'in:fly' | 'out:fly' | 'in:slide' | 'out:slide' | 'in:fade' | 'out:fade' | 'in:blur' | 'out:blur';
+
+export interface ButtonClassesTypes {
+	default?: string;
+	border?: string;
+	application?: string;
+	pagination?: string;
+	group?: string;
+	card?: string;
+	meeting?: string;
+	video?: string;
+	custom?: string;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.31.1",
+  "version": "0.33.1",
   "description": "Flowbite components for Svelte",
   "author": {
     "name": "Shinichi Okada",