odj-svelte-ui 0.1.0

package/dist/cards/theme.js

@@ -0,0 +1,195 @@
+import { tv } from "tailwind-variants";
+export const card = tv({
+    slots: {
+        base: "w-full flex max-w-sm bg-white border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700",
+        image: "rounded-t-lg",
+        content: ""
+    },
+    variants: {
+        size: {
+            xs: { base: "max-w-xs" },
+            sm: { base: "max-w-sm" },
+            md: { base: "max-w-lg" },
+            lg: { base: "max-w-2xl" },
+            xl: { base: "max-w-screen-xl" }
+        },
+        color: {
+            // primary, secondary, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose
+            gray: { base: "border-gray-200 dark:bg-gray-800 dark:border-gray-700" },
+            primary: { base: "border-primary-200 bg-primary-400 dark:bg-primary-800 dark:border-primary-700" },
+            secondary: { base: "border-secondary-200 bg-secondary-400 dark:bg-secondary-800 dark:border-secondary-700" },
+            red: { base: "border-red-200 bg-red-400 dark:bg-red-800 dark:border-red-700" },
+            orange: { base: "border-orange-200 bg-orange-400 dark:bg-orange-800 dark:border-orange-700" },
+            amber: { base: "border-amber-200 bg-amber-400 dark:bg-amber-800 dark:border-amber-700" },
+            yellow: { base: "border-yellow-200 bg-yellow-400 dark:bg-yellow-800 dark:border-yellow-700" },
+            lime: { base: "border-lime-200 bg-lime-400 dark:bg-lime-800 dark:border-lime-700" },
+            green: { base: "border-green-200 bg-green-400 dark:bg-green-800 dark:border-green-700" },
+            emerald: { base: "border-emerald-200 bg-emerald-400 dark:bg-emerald-800 dark:border-emerald-700" },
+            teal: { base: "border-teal-200 bg-teal-400 dark:bg-teal-800 dark:border-teal-700" },
+            cyan: { base: "border-cyan-200 bg-cyan-400 dark:bg-cyan-800 dark:border-cyan-700" },
+            sky: { base: "border-sky-200 bg-sky-400 dark:bg-sky-800 dark:border-sky-700" },
+            blue: { base: "border-blue-200 bg-blue-400 dark:bg-blue-800 dark:border-blue-700" },
+            indigo: { base: "border-indigo-200 bg-indigo-400 dark:bg-indigo-800 dark:border-indigo-700" },
+            violet: { base: "border-violet-200 bg-violet-400 dark:bg-violet-800 dark:border-violet-700" },
+            purple: { base: "border-purple-200 bg-purple-400 dark:bg-purple-800 dark:border-purple-700" },
+            fuchsia: { base: "border-fuchsia-200 bg-fuchsia-400 dark:bg-fuchsia-800 dark:border-fuchsia-700" },
+            pink: { base: "border-pink-200 bg-pink-400 dark:bg-pink-800 dark:border-pink-700" },
+            rose: { base: "border-rose-200 bg-rose-400 dark:bg-rose-800 dark:border-rose-700" }
+        },
+        shadow: {
+            sm: { base: "shadow-md" },
+            normal: { base: "shadow" },
+            md: { base: "shadow-md" },
+            lg: { base: "shadow-lg" },
+            xl: { base: "shadow-xl" },
+            "2xl": { base: "shadow-2xl" },
+            inner: { base: "shadow-inner" }
+        },
+        padding: {
+            xs: { content: "p-2" },
+            sm: { content: "p-4 md:p-6" },
+            md: { content: "p-4 sm:p-5 md:p-7" },
+            lg: { content: "p-4 sm:p-6 md:p-8" },
+            xl: { content: "p-4 sm:p-8 md:p-10" },
+            none: { content: "p-0" }
+        },
+        horizontal: {
+            true: {
+                base: "md:flex-row",
+                image: "object-cover w-full h-96 md:h-auto md:w-48 md:rounded-none"
+            }
+        },
+        reverse: {
+            true: { base: "flex-col-reverse", image: "rounded-b-lg rounded-tl-none" },
+            false: { base: "flex-col", image: "rounded-t-lg" }
+        },
+        href: {
+            true: "",
+            false: ""
+        },
+        hasImage: {
+            true: "",
+            false: ""
+        }
+    },
+    compoundVariants: [
+        {
+            horizontal: true,
+            reverse: true,
+            class: { base: "md:flex-row-reverse", image: "md:rounded-e-lg" }
+        },
+        {
+            horizontal: true,
+            reverse: false,
+            class: { base: "md:flex-row", image: "md:rounded-s-lg" }
+        },
+        // gray, primary, secondary, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose
+        {
+            href: true,
+            color: "gray",
+            class: { base: "cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700" }
+        },
+        {
+            href: true,
+            color: "primary",
+            class: { base: "cursor-pointer hover:bg-primary-500 dark:hover:bg-primary-700" }
+        },
+        {
+            href: true,
+            color: "secondary",
+            class: { base: "cursor-pointer hover:bg-secondary-500 dark:hover:bg-secondary-700" }
+        },
+        {
+            href: true,
+            color: "red",
+            class: { base: "cursor-pointer hover:bg-red-500 dark:hover:bg-red-700" }
+        },
+        {
+            href: true,
+            color: "orange",
+            class: { base: "cursor-pointer hover:bg-orange-500 dark:hover:bg-orange-700" }
+        },
+        {
+            href: true,
+            color: "amber",
+            class: { base: "cursor-pointer hover:bg-amber-500 dark:hover:bg-amber-700" }
+        },
+        {
+            href: true,
+            color: "yellow",
+            class: { base: "cursor-pointer hover:bg-yellow-500 dark:hover:bg-yellow-700" }
+        },
+        {
+            href: true,
+            color: "lime",
+            class: { base: "cursor-pointer hover:bg-lime-500 dark:hover:bg-lime-700" }
+        },
+        {
+            href: true,
+            color: "green",
+            class: { base: "cursor-pointer hover:bg-green-500 dark:hover:bg-green-700" }
+        },
+        {
+            href: true,
+            color: "emerald",
+            class: { base: "cursor-pointer hover:bg-emerald-500 dark:hover:bg-emerald-700" }
+        },
+        {
+            href: true,
+            color: "teal",
+            class: { base: "cursor-pointer hover:bg-teal-500 dark:hover:bg-teal-700" }
+        },
+        {
+            href: true,
+            color: "cyan",
+            class: { base: "cursor-pointer hover:bg-cyan-500 dark:hover:bg-cyan-700" }
+        },
+        {
+            href: true,
+            color: "sky",
+            class: { base: "cursor-pointer hover:bg-sky-500 dark:hover:bg-sky-700" }
+        },
+        {
+            href: true,
+            color: "blue",
+            class: { base: "cursor-pointer hover:bg-blue-500 dark:hover:bg-blue-700" }
+        },
+        {
+            href: true,
+            color: "indigo",
+            class: { base: "cursor-pointer hover:bg-indigo-500 dark:hover:bg-indigo-700" }
+        },
+        {
+            href: true,
+            color: "violet",
+            class: { base: "cursor-pointer hover:bg-violet-500 dark:hover:bg-violet-700" }
+        },
+        {
+            href: true,
+            color: "purple",
+            class: { base: "cursor-pointer hover:bg-purple-500 dark:hover:bg-purple-700" }
+        },
+        {
+            href: true,
+            color: "fuchsia",
+            class: { base: "cursor-pointer hover:bg-fuchsia-500 dark:hover:bg-fuchsia-700" }
+        },
+        {
+            href: true,
+            color: "pink",
+            class: { base: "cursor-pointer hover:bg-pink-500 dark:hover:bg-pink-700" }
+        },
+        {
+            href: true,
+            color: "rose",
+            class: { base: "cursor-pointer hover:bg-rose-500 dark:hover:bg-rose-700" }
+        }
+    ],
+    defaultVariants: {
+        size: "sm",
+        shadow: "normal",
+        padding: "lg",
+        horizontal: false,
+        reverse: false
+    }
+});

package/dist/cards/type.d.ts

@@ -0,0 +1,30 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes, HTMLAnchorAttributes } from "svelte/elements";
+type CardSizeType = "sm" | "md" | "lg" | "xl" | "xs" | undefined;
+type PaddingType = "sm" | "lg" | "md" | "xl" | "xs" | "none" | undefined;
+type ShadowType = "sm" | "normal" | "lg" | "md" | "xl" | "2xl" | "inner" | undefined;
+type ColorType = "gray" | "primary" | "secondary" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose" | undefined;
+type ImgType = {
+    src?: string | undefined | null;
+    alt?: string | undefined | null;
+};
+interface BaseCardProps {
+    children: Snippet;
+    horizontal?: boolean;
+    color?: ColorType;
+    target?: string;
+    shadow?: ShadowType;
+    reverse?: boolean;
+    img?: ImgType;
+    padding?: PaddingType;
+    size?: CardSizeType;
+    class?: string;
+    imgClass?: string;
+    contentClass?: string;
+}
+type CardProps = BaseCardProps & (({
+    href: string;
+} & HTMLAnchorAttributes) | ({
+    href?: never;
+} & HTMLAttributes<HTMLDivElement>));
+export { type CardProps };

package/dist/cards/type.js

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

package/dist/chart/Chart.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+  import type { ApexOptions } from "apexcharts";
+  import type ApexCharts from "apexcharts";
+  import "./chart.css";
+  import { type ChartProps as Props } from ".";
+
+  let { options, class: classname }: Props = $props();
+
+  function initChart(node: HTMLElement, options: ApexOptions) {
+    let chart: ApexCharts;
+
+    async function asyncInitChart() {
+      const ApexCharts = (await import("apexcharts")).default;
+      chart = new ApexCharts(node, options);
+      chart.render();
+    }
+
+    asyncInitChart();
+
+    return {
+      update(options: ApexOptions) {
+        if (chart) {
+          chart.updateOptions(options);
+        }
+      },
+      destroy() {
+        if (chart) {
+          chart.destroy();
+        }
+      }
+    };
+  }
+</script>
+
+<div use:initChart={options} class={classname}></div>
+
+<!--
+@component
+[Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+## Props
+@props: options: any;
+@props:class: string;
+-->

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

@@ -0,0 +1,11 @@
+import "./chart.css";
+import { type ChartProps as Props } from ".";
+/**
+ * [Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+ * ## Props
+ * @props: options: any;
+ * @props:class: string;
+ */
+declare const Chart: import("svelte").Component<Props, {}, "">;
+type Chart = ReturnType<typeof Chart>;
+export default Chart;

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

@@ -0,0 +1,68 @@
+<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 ("THEME_PREFERENCE_KEY" in localStorage) {
+      localStorage.getItem("THEME_PREFERENCE_KEY") === "dark" ? window.document.documentElement.classList.add("dark") : window.document.documentElement.classList.remove("dark");
+    } else {
+      if (window.matchMedia("(prefers-color-scheme: dark)").matches) window.document.documentElement.classList.add("dark");
+    }
+  </script>
+</svelte:head>
+
+<button onclick={toggleTheme} aria-label={ariaLabel} type="button" {...restProps} class={btnCls} tabindex={0}>
+  <span class="hidden dark:block">
+    {#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"
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+        />
+      </svg>
+    {/if}
+  </span>
+  <span class="block dark:hidden">
+    {#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>
+    {/if}
+  </span>
+</button>
+
+<!--
+@component
+[Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+## Props
+@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

@@ -0,0 +1,13 @@
+import { type DarkmodeProps as Props } from "./";
+/**
+ * [Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+ * ## Props
+ * @props: class: string;
+ * @props:lightIcon: any;
+ * @props:darkIcon: any;
+ * @props:size: any = "md";
+ * @props:ariaLabel: any = "Dark mode";
+ */
+declare const Darkmode: import("svelte").Component<Props, {}, "">;
+type Darkmode = ReturnType<typeof Darkmode>;
+export default Darkmode;

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-none rounded-lg text-sm p-2.5 focus:ring-1", import("tailwind-variants/dist/config").TVConfig<unknown, {} | {}>, {} | {}, 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-none rounded-lg text-sm p-2.5 focus:ring-1", import("tailwind-variants/dist/config").TVConfig<unknown, {} | {}>, 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-none rounded-lg text-sm p-2.5 focus:ring-1"
+});

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 {};

package/dist/device-mockups/Android.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import { type AndroidProps as Props, android } from ".";
+
+  let { children, divClass, div2Class, div3Class, div4Class, div5Class, div6Class, div7Class, ...restProps }: Props = $props();
+
+  const { div, slot, top, leftTop, leftMid, leftBot, right } = android();
+</script>
+
+<div {...restProps} class={div({ class: divClass })}>
+  <div class={top({ class: div2Class })}></div>
+  <div class={leftTop({ class: div3Class })}></div>
+  <div class={leftMid({ class: div4Class })}></div>
+  <div class={leftBot({ class: div5Class })}></div>
+  <div class={right({ class: div6Class })}></div>
+  <div class={slot({ class: div7Class })}>
+    {#if children}
+      {@render children()}
+    {/if}
+  </div>
+</div>
+
+<!--
+@component
+[Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+## Props
+@props: children: any;
+@props:divClass: any;
+@props:div2Class: any;
+@props:div3Class: any;
+@props:div4Class: any;
+@props:div5Class: any;
+@props:div6Class: any;
+@props:div7Class: any;
+-->

package/dist/device-mockups/Android.svelte.d.ts

@@ -0,0 +1,16 @@
+import { type AndroidProps as Props } from ".";
+/**
+ * [Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+ * ## Props
+ * @props: children: any;
+ * @props:divClass: any;
+ * @props:div2Class: any;
+ * @props:div3Class: any;
+ * @props:div4Class: any;
+ * @props:div5Class: any;
+ * @props:div6Class: any;
+ * @props:div7Class: any;
+ */
+declare const Android: import("svelte").Component<Props, {}, "">;
+type Android = ReturnType<typeof Android>;
+export default Android;

package/dist/device-mockups/DefaultMockup.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import { type DefaultMockupProps as Props, defaultMockup } from ".";
+
+  let { children, divClass, div2Class, div3Class, div4Class, div5Class, div6Class, ...restProps }: Props = $props();
+
+  const { div, slot, top, leftTop, leftBot, right } = defaultMockup();
+</script>
+
+<div {...restProps} class={div({ class: divClass })}>
+  <div class={top({ class: div2Class })}></div>
+  <div class={leftTop({ class: div3Class })}></div>
+  <div class={leftBot({ class: div4Class })}></div>
+  <div class={right({ class: div5Class })}></div>
+  <div class={slot({ class: div6Class })}>
+    {#if children}
+      {@render children()}
+    {/if}
+  </div>
+</div>
+
+<!--
+@component
+[Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+## Props
+@props: children: any;
+@props:divClass: any;
+@props:div2Class: any;
+@props:div3Class: any;
+@props:div4Class: any;
+@props:div5Class: any;
+@props:div6Class: any;
+-->