flowbite-svelte 0.48.4 → 1.0.0-next.2

package/dist/chart/Chart.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+import "./chart.css";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type ChartProps_ = typeof __propDef.props;
+export { ChartProps_ as ChartProps };
+export type ChartEvents = typeof __propDef.events;
+export type ChartSlots = typeof __propDef.slots;
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @props: options: any;
+ * @props:class: string;
+ */
+export default class Chart extends SvelteComponentTyped<ChartProps_, ChartEvents, ChartSlots> {
+}

package/dist/chart/chart.css

@@ -0,0 +1,166 @@
+.apexcharts-canvas .apexcharts-tooltip {
+  background-color: white;
+  color: #6b7280;
+  border: 0 !important;
+  border-radius: 0.25rem;
+  box-shadow:
+    0 4px 6px -1px rgb(0 0 0 / 0.1),
+    0 2px 4px -2px rgb(0 0 0 / 0.1);
+}
+.dark .apexcharts-canvas .apexcharts-tooltip {
+  background-color: #374151;
+  color: #9ca3af;
+  border-color: transparent;
+  box-shadow:
+    0 4px 6px -1px rgb(0 0 0 / 0.1),
+    0 2px 4px -2px rgb(0 0 0 / 0.1);
+}
+.apexcharts-canvas .apexcharts-tooltip .apexcharts-tooltip-title {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  padding-right: 0.75rem;
+  padding-left: 0.75rem;
+  margin-bottom: 0.75rem;
+  background-color: #f3f4f6;
+  border-bottom-color: #e5e7eb;
+  font-size: 0.875rem !important;
+  font-weight: 400;
+  color: #6b7280;
+}
+.dark .apexcharts-canvas .apexcharts-tooltip .apexcharts-tooltip-title {
+  background-color: #4b5563;
+  border-color: #6b7280;
+  color: #9ca3af;
+}
+.apexcharts-canvas .apexcharts-xaxistooltip {
+  color: #6b7280;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  padding-right: 0.75rem;
+  padding-left: 0.75rem;
+  border-color: transparent;
+  background-color: white;
+  border-radius: 0.25rem;
+  box-shadow:
+    0 4px 6px -1px rgb(0 0 0 / 0.1),
+    0 2px 4px -2px rgb(0 0 0 / 0.1);
+}
+.dark .apexcharts-canvas .apexcharts-xaxistooltip {
+  color: #9ca3af;
+  background-color: #374151;
+}
+.apexcharts-canvas .apexcharts-tooltip .apexcharts-tooltip-text-y-label {
+  color: #6b7280;
+  font-size: 0.875rem;
+}
+.dark .apexcharts-canvas .apexcharts-tooltip .apexcharts-tooltip-text-y-label {
+  color: #9ca3af;
+}
+.apexcharts-canvas .apexcharts-tooltip .apexcharts-tooltip-text-y-value {
+  color: #111827;
+  font-size: 0.875rem;
+}
+:is([dir="rtl"]) .apexcharts-tooltip .apexcharts-tooltip-marker {
+  margin-right: 0px;
+  margin-left: e;
+}
+.dark .apexcharts-canvas .apexcharts-tooltip .apexcharts-tooltip-text-y-value {
+  color: white;
+}
+.apexcharts-canvas .apexcharts-xaxistooltip-text {
+  font-weight: 400;
+  font-size: 0.875rem !important;
+}
+.apexcharts-canvas .apexcharts-xaxistooltip:after,
+.apexcharts-canvas .apexcharts-xaxistooltip:before {
+  border-bottom-color: white;
+}
+.apexcharts-canvas .apexcharts-xaxistooltip:after {
+  border-width: 8px;
+  margin-left: -8px;
+}
+.apexcharts-canvas .apexcharts-xaxistooltip:before {
+  border-width: 10px;
+  margin-left: -10px;
+}
+.dark .apexcharts-canvas .apexcharts-xaxistooltip:after,
+.dark .apexcharts-canvas .apexcharts-xaxistooltip:before {
+  border-bottom-color: #374151;
+}
+.apexcharts-canvas .apexcharts-tooltip-series-group.apexcharts-active .apexcharts-tooltip-y-group {
+  padding: 0;
+}
+.apexcharts-canvas .apexcharts-tooltip-series-group.apexcharts-active {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  padding-bottom: 0.75rem;
+  background-color: white !important;
+  color: #6b7280 !important;
+}
+.dark .apexcharts-canvas .apexcharts-tooltip-series-group.apexcharts-active {
+  background-color: #374151 !important;
+  color: #9ca3af !important;
+}
+.apexcharts-canvas .apexcharts-tooltip-series-group.apexcharts-active:first-of-type {
+  padding-top: 0.75rem;
+}
+.apexcharts-canvas .apexcharts-legend {
+  padding: 0 !important;
+}
+.apexcharts-canvas .apexcharts-legend-text {
+  font-size: 0.75rem;
+  font-weight: 500 !important;
+  padding-left: 1.25rem;
+  color: #6b7280 !important;
+}
+:is([dir="rtl"]) .apexcharts-canvas .apexcharts-legend-text {
+  padding-right: 0.5rem;
+}
+.apexcharts-canvas .apexcharts-legend-text:not(.apexcharts-inactive-legend):hover {
+  color: #111827 !important;
+}
+.dark .apexcharts-canvas .apexcharts-legend-text {
+  color: #9ca3af !important;
+}
+.dark .apexcharts-canvas .apexcharts-legend-text:not(.apexcharts-inactive-legend):hover {
+  color: white !important;
+}
+.apexcharts-canvas .apexcharts-legend-series {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+  margin-bottom: 0.25rem !important;
+  display: flex;
+  align-items: center;
+}
+.apexcharts-datalabels-group .apexcharts-text.apexcharts-datalabel-value {
+  fill: #111827 !important;
+  font-size: 1.875rem;
+  font-weight: 700;
+}
+.dark .apexcharts-canvas .apexcharts-datalabels-group .apexcharts-text.apexcharts-datalabel-value {
+  fill: white !important;
+}
+.apexcharts-canvas .apexcharts-datalabels-group .apexcharts-text.apexcharts-datalabel-label {
+  fill: #6b7280 !important;
+  font-size: 1rem;
+  font-weight: 400;
+}
+.dark .apexcharts-canvas .apexcharts-datalabels-group .apexcharts-text.apexcharts-datalabel-label {
+  fill: #9ca3af !important;
+}
+.apexcharts-canvas .apexcharts-datalabels .apexcharts-text.apexcharts-pie-label {
+  font-size: 0.75rem !important;
+  font-weight: 600 !important;
+  text-shadow: none !important;
+  filter: none !important;
+}
+.apexcharts-gridline,
+.apexcharts-xcrosshairs,
+.apexcharts-ycrosshairs {
+  stroke: #e5e7eb !important;
+}
+.dark .apexcharts-gridline,
+.dark .apexcharts-xcrosshairs,
+.dark .apexcharts-ycrosshairs {
+  stroke: #374151 !important;
+}

package/dist/chart/index.d.ts

@@ -0,0 +1,3 @@
+import type { ChartProps } from "./type";
+import Chart from "./Chart.svelte";
+export { Chart, type ChartProps };

package/dist/chart/index.js

@@ -0,0 +1,2 @@
+import Chart from "./Chart.svelte";
+export { Chart };

package/dist/chart/type.d.ts

@@ -0,0 +1,6 @@
+import type { ApexOptions } from "apexcharts";
+interface ChartProps {
+    options: ApexOptions;
+    class?: string;
+}
+export { type ChartProps };

package/dist/chart/type.js

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

package/dist/darkmode/DarkMode.svelte

@@ -1,50 +1,58 @@
-<script>import { twMerge } from "tailwind-merge";
-export let btnClass = "text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-hidden rounded-lg text-sm p-2.5";
-export let size = "md";
-export let ariaLabel = "Dark mode";
-const sizes = {
-  sm: "w-4 h-4",
-  md: "w-5 h-5",
-  lg: "w-6 h-6"
-};
-const toggleTheme = (ev) => {
-  const target = ev.target;
-  const isDark = target.ownerDocument.documentElement.classList.toggle("dark");
-  if (target.ownerDocument === document)
-    localStorage.setItem("color-theme", isDark ? "dark" : "light");
-};
+<script lang="ts">
+  import { type DarkmodeProps as Props, darkmode } from "./";
+
+  // const THEME_PREFERENCE_KEY = 'color-theme';
+  let { class: className, lightIcon, darkIcon, size = "md", ariaLabel = "Dark mode", ...restProps }: Props = $props();
+
+  const btnCls = darkmode({ class: className });
+  const sizes = {
+    sm: "w-4 h-4",
+    md: "w-5 h-5",
+    lg: "w-6 h-6"
+  };
+
+  const toggleTheme = (ev: MouseEvent) => {
+    const target = ev.target as HTMLElement;
+    const isDark = target.ownerDocument.documentElement.classList.toggle("dark");
+    if (target.ownerDocument === document)
+      // we are NOT in the iFrame
+      localStorage.setItem("THEME_PREFERENCE_KEY", isDark ? "dark" : "light");
+  };
 </script>
 
 <svelte:head>
   <script>
-    if ('color-theme' in localStorage) {
-      // explicit preference - overrides author's choice
-      localStorage.getItem('color-theme') === 'dark' ? window.document.documentElement.classList.add('dark') : window.document.documentElement.classList.remove('dark');
+    if ("THEME_PREFERENCE_KEY" in localStorage) {
+      localStorage.getItem("THEME_PREFERENCE_KEY") === "dark" ? window.document.documentElement.classList.add("dark") : window.document.documentElement.classList.remove("dark");
     } else {
-      // browser preference - does not overrides
-      if (window.matchMedia('(prefers-color-scheme: dark)').matches) window.document.documentElement.classList.add('dark');
+      if (window.matchMedia("(prefers-color-scheme: dark)").matches) window.document.documentElement.classList.add("dark");
     }
   </script>
 </svelte:head>
 
-<button on:click={toggleTheme} aria-label={ariaLabel} type="button" {...$$restProps} class={twMerge(btnClass, $$props.class)}>
+<button onclick={toggleTheme} aria-label={ariaLabel} type="button" {...restProps} class={btnCls} tabindex={0}>
   <span class="hidden dark:block">
-    <slot name="lightIcon">
-      <svg class={sizes[size]} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+    {#if lightIcon}
+      {@render lightIcon()}
+    {:else}
+      <svg role="img" aria-label="Light mode" class={sizes[size]} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
         <path
           d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1
-  0 100-2H3a1 1 0 000 2h1z"
+    0 100-2H3a1 1 0 000 2h1z"
           fill-rule="evenodd"
-          clip-rule="evenodd" />
+          clip-rule="evenodd"
+        />
       </svg>
-    </slot>
+    {/if}
   </span>
   <span class="block dark:hidden">
-    <slot name="darkIcon">
-      <svg class={sizes[size]} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+    {#if darkIcon}
+      {@render darkIcon()}
+    {:else}
+      <svg role="img" aria-label="Dark mode" class={sizes[size]} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
         <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
       </svg>
-    </slot>
+    {/if}
   </span>
 </button>
 
@@ -52,7 +60,9 @@ const toggleTheme = (ev) => {
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let btnClass: $$Props['btnClass'] = 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-hidden rounded-lg text-sm p-2.5';
-@prop export let size: NonNullable<$$Props['size']> = 'md';
-@prop export let ariaLabel: $$Props['ariaLabel'] = 'Dark mode';
+@props: class: string;
+@props:lightIcon: any;
+@props:darkIcon: any;
+@props:size: any = "md";
+@props:ariaLabel: any = "Dark mode";
 -->

package/dist/darkmode/DarkMode.svelte.d.ts

@@ -1,18 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
-import type { HTMLButtonAttributes } from 'svelte/elements';
 declare const __propDef: {
-    props: HTMLButtonAttributes & {
-        btnClass?: string;
-        size?: "sm" | "md" | "lg";
-        ariaLabel?: string;
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        lightIcon: {};
-        darkIcon: {};
-    };
+    slots: {};
 };
 export type DarkModeProps = typeof __propDef.props;
 export type DarkModeEvents = typeof __propDef.events;
@@ -20,9 +12,11 @@ export type DarkModeSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let btnClass: $$Props['btnClass'] = 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-hidden rounded-lg text-sm p-2.5';
- * @prop export let size: NonNullable<$$Props['size']> = 'md';
- * @prop export let ariaLabel: $$Props['ariaLabel'] = 'Dark mode';
+ * @props: class: string;
+ * @props:lightIcon: any;
+ * @props:darkIcon: any;
+ * @props:size: any = "md";
+ * @props:ariaLabel: any = "Dark mode";
  */
 export default class DarkMode extends SvelteComponentTyped<DarkModeProps, DarkModeEvents, DarkModeSlots> {
 }

package/dist/darkmode/index.d.ts

@@ -0,0 +1,4 @@
+import type { DarkmodeProps } from "./type";
+import DarkMode from "./DarkMode.svelte";
+import { darkmode } from "./theme";
+export { DarkMode, darkmode, type DarkmodeProps };

package/dist/darkmode/index.js

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

package/dist/darkmode/theme.d.ts

@@ -0,0 +1 @@
+export declare const darkmode: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-hidden rounded-lg text-sm p-2.5 focus:ring-2", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-hidden rounded-lg text-sm p-2.5 focus:ring-2", unknown, unknown, undefined>>;

package/dist/darkmode/theme.js

@@ -0,0 +1,4 @@
+import { tv } from "tailwind-variants";
+export const darkmode = tv({
+    base: "text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-hidden rounded-lg text-sm p-2.5 focus:ring-2"
+});

package/dist/darkmode/type.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from "svelte";
+import type { HTMLButtonAttributes } from "svelte/elements";
+interface DarkmodeProps extends HTMLButtonAttributes {
+    class?: string;
+    lightIcon?: Snippet;
+    darkIcon?: Snippet;
+    size?: "sm" | "md" | "lg";
+    ariaLabel?: string;
+}
+export { type DarkmodeProps };

package/dist/darkmode/type.js

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