odj-svelte-ui 0.1.0

package/dist/elements/index.d.ts

@@ -0,0 +1,135 @@
+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 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 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 Video } from "./video/Video.svelte";
+export * from "./types";

package/dist/elements/index.js

@@ -0,0 +1,226 @@
+// Accordion
+export { default as Accordion } from './accordion/Accordion.svelte';
+export { default as AccordionItem } from './accordion/AccordionItem.svelte';
+
+// Alerts
+export { default as Alert } from './alert/Alert.svelte';
+
+// Avatar
+export { default as Avatar } from './avatar/Avatar.svelte';
+
+// Badges
+export { default as Badge } from './badge/Badge.svelte';
+
+// Banner
+export { default as Banner } from './banner/Banner.svelte';
+
+// Bottom navigation
+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';
+
+// Breadcrumbs
+export { default as Breadcrumb } from './breadcrumb/Breadcrumb.svelte';
+export { default as BreadcrumbItem } from './breadcrumb/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 './button-group/ButtonGroup.svelte';
+
+// Cards
+export { default as Card } from './cards/Card.svelte';
+
+// Carousels
+export { default as Carousel } from './carousel/Carousel.svelte';
+export { default as Thumbnails } from './carousel/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-mockups/DeviceMockup.svelte';
+
+// Drawer
+export { default as Drawer } from './drawer/Drawer.svelte';
+
+// Dropdown
+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';
+
+// 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 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';
+
+// 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';
+
+// Marquee
+export { default as Marquee } from './marquee/Marquee.svelte';
+
+// Modals
+export { default as Modal } from './modal/Modal.svelte';
+
+// MegaMenu
+export { default as MegaMenu } from './mega-menu/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 './pagination/Pagination.svelte';
+export { default as PaginationItem } from './pagination/PaginationItem.svelte';
+
+// Popover
+export { default as Popover } from './popover/Popover.svelte';
+
+// Progressbar
+export { default as Progressbar } from './progress/Progressbar.svelte';
+
+// Rating
+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';
+
+// Sidebar
+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';
+
+// 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 './spinner/Spinner.svelte';
+
+// Steps
+export { default as StepIndicator } from './steps/StepIndicator.svelte';
+
+// Tables
+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';
+
+// 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';
+
+// Toast
+export { default as Toast } from './toast/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 './tooltip/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';

package/dist/elements/indicators/Indicator.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+  import type { PlacementType } from '../types';
+
+  export let color: IndicatorColorType = 'neutral';
+  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 = {
+    neutral: 'bg-neutral-200',
+    dark: 'bg-neutral-900 dark:bg-neutral-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-neutral-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 = 'neutral';
+@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/dist/elements/indicators/Indicator.svelte.d.ts

@@ -0,0 +1,46 @@
+import type { PlacementType } from '../types';
+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: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @prop export let color: IndicatorColorType = 'neutral';
+ * @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;
+ */
+declare const Indicator: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    [x: string]: any;
+    color?: ("red" | "orange" | "yellow" | "green" | "teal" | "blue" | "indigo" | "purple" | "dark" | "none" | "neutral") | undefined;
+    rounded?: boolean | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
+    border?: boolean | undefined;
+    placement?: PlacementType | undefined;
+    offset?: boolean | undefined;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type Indicator = InstanceType<typeof Indicator>;
+export default Indicator;

package/dist/elements/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/dist/elements/kbd/ArrowKeyDown.svelte.d.ts

@@ -0,0 +1,26 @@
+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: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @prop export let svgClass: string = 'w-4 h-4';
+ */
+declare const ArrowKeyDown: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: any;
+    svgClass?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ArrowKeyDown = InstanceType<typeof ArrowKeyDown>;
+export default ArrowKeyDown;

package/dist/elements/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/dist/elements/kbd/ArrowKeyLeft.svelte.d.ts

@@ -0,0 +1,26 @@
+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: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @prop export let svgClass: string = 'w-4 h-4';
+ */
+declare const ArrowKeyLeft: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: any;
+    svgClass?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ArrowKeyLeft = InstanceType<typeof ArrowKeyLeft>;
+export default ArrowKeyLeft;

package/dist/elements/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/dist/elements/kbd/ArrowKeyRight.svelte.d.ts

@@ -0,0 +1,26 @@
+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: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @prop export let svgClass: string = 'w-4 h-4';
+ */
+declare const ArrowKeyRight: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: any;
+    svgClass?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ArrowKeyRight = InstanceType<typeof ArrowKeyRight>;
+export default ArrowKeyRight;

package/dist/elements/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';
+-->