odj-svelte-ui 0.1.0

package/dist/toast/theme.js

@@ -0,0 +1,100 @@
+import { tv } from "tailwind-variants";
+export const toast = tv({
+    slots: {
+        base: "flex w-full max-w-xs p-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800 gap-3",
+        icon: "w-8 h-8 inline-flex items-center justify-center shrink-0 rounded-lg",
+        content: "w-full text-sm font-normal",
+        close: "ms-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex items-center justify-center h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700"
+    },
+    variants: {
+        position: {
+            "top-left": { base: "absolute top-5 start-5" },
+            "top-right": { base: "absolute top-5 end-5" },
+            "bottom-left": { base: "absolute bottom-5 start-5" },
+            "bottom-right": { base: "absolute bottom-5 end-5" }
+        },
+        color: {
+            // primary, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose
+            primary: {
+                icon: "text-primary-500 bg-primary-100 dark:bg-primary-800 dark:text-primary-200",
+                close: "text-primary-500 dark:text-primary-200 hover:text-primary-600 dark:hover:text-primary-500"
+            },
+            gray: {
+                icon: "text-gray-500 bg-gray-100 dark:bg-gray-700 dark:text-gray-200",
+                close: "text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-500"
+            },
+            red: {
+                icon: "text-red-500 bg-red-100 dark:bg-red-800 dark:text-red-200",
+                close: "text-red-500 dark:text-red-200 hover:text-red-600 dark:hover:text-red-500"
+            },
+            orange: {
+                icon: "text-orange-500 bg-orange-100 dark:bg-orange-700 dark:text-orange-200",
+                close: "text-orange-500 dark:text-orange-200 hover:text-orange-600 dark:hover:text-orange-500"
+            },
+            amber: {
+                icon: "text-amber-500 bg-amber-100 dark:bg-amber-700 dark:text-amber-200",
+                close: "text-amber-500 dark:text-amber-200 hover:text-amber-600 dark:hover:text-amber-500"
+            },
+            yellow: {
+                icon: "text-yellow-500 bg-yellow-100 dark:bg-yellow-800 dark:text-yellow-200",
+                close: "text-yellow-500 dark:text-yellow-200 hover:text-yellow-600 dark:hover:text-yellow-500"
+            },
+            lime: {
+                icon: "text-lime-500 bg-lime-100 dark:bg-lime-700 dark:text-lime-200",
+                close: "text-lime-500 dark:text-lime-200 hover:text-lime-600 dark:hover:text-lime-500"
+            },
+            green: {
+                icon: "text-green-500 bg-green-100 dark:bg-green-800 dark:text-green-200",
+                close: "text-green-500 dark:text-green-200 hover:text-green-600 dark:hover:text-green-500"
+            },
+            emerald: {
+                icon: "text-emerald-500 bg-emerald-100 dark:bg-emerald-800 dark:text-emerald-200",
+                close: "text-emerald-500 dark:text-emerald-200 hover:text-emerald-600 dark:hover:text-emerald-500"
+            },
+            teal: {
+                icon: "text-teal-500 bg-teal-100 dark:bg-teal-800 dark:text-teal-200",
+                close: "text-teal-500 dark:text-teal-200 hover:text-teal-600 dark:hover:text-teal-500"
+            },
+            cyan: {
+                icon: "text-cyan-500 bg-cyan-100 dark:bg-cyan-800 dark:text-cyan-200",
+                close: "text-cyan-500 dark:text-cyan-200 hover:text-cyan-600 dark:hover:text-cyan-500"
+            },
+            sky: {
+                icon: "text-sky-500 bg-sky-100 dark:bg-sky-800 dark:text-sky-200",
+                close: "text-sky-500 dark:text-sky-200 hover:text-sky-600 dark:hover:text-sky-500"
+            },
+            blue: {
+                icon: "text-blue-500 bg-blue-100 dark:bg-blue-800 dark:text-blue-200",
+                close: "text-blue-500 dark:text-blue-200 hover:text-blue-600 dark:hover:text-blue-500"
+            },
+            indigo: {
+                icon: "text-indigo-500 bg-indigo-100 dark:bg-indigo-800 dark:text-indigo-200",
+                close: "text-indigo-500 dark:text-indigo-200 hover:text-indigo-600 dark:hover:text-indigo-500"
+            },
+            violet: {
+                icon: "text-violet-500 bg-violet-100 dark:bg-violet-800 dark:text-violet-200",
+                close: "text-violet-500 dark:text-violet-200 hover:text-violet-600 dark:hover:text-violet-500"
+            },
+            purple: {
+                icon: "text-purple-500 bg-purple-100 dark:bg-purple-800 dark:text-purple-200",
+                close: "text-purple-500 dark:text-purple-200 hover:text-purple-600 dark:hover:text-purple-500"
+            },
+            fuchsia: {
+                icon: "text-fuchsia-500 bg-fuchsia-100 dark:bg-fuchsia-800 dark:text-fuchsia-200",
+                close: "text-fuchsia-500 dark:text-fuchsia-200 hover:text-fuchsia-600 dark:hover:text-fuchsia-500"
+            },
+            pink: {
+                icon: "text-pink-500 bg-pink-100 dark:bg-pink-700 dark:text-pink-200",
+                close: "text-pink-500 dark:text-pink-200 hover:text-pink-600 dark:hover:text-pink-500"
+            },
+            rose: {
+                icon: "text-rose-500 bg-rose-100 dark:bg-rose-700 dark:text-rose-200",
+                close: "text-rose-500 dark:text-rose-200 hover:text-rose-600 dark:hover:text-rose-500"
+            }
+        },
+        align: {
+            true: { base: "items-center" },
+            false: { base: "items-start" }
+        }
+    }
+});

package/dist/toast/type.d.ts

@@ -0,0 +1,20 @@
+import type { Snippet } from "svelte";
+import type { ParamsType, TransitionFunc } from "../types";
+import type { HTMLAttributes } from "svelte/elements";
+type ColorType = "primary" | "gray" | "red" | "yellow" | "green" | "indigo" | "purple" | "pink" | "blue" | "orange" | "amber" | "lime" | "emerald" | "teal" | "cyan" | "sky" | "violet" | "fuchsia" | "rose" | undefined;
+type PositionType = "top-left" | "top-right" | "bottom-left" | "bottom-right" | undefined;
+interface ToastProps extends HTMLAttributes<HTMLDivElement> {
+    children: Snippet;
+    icon?: Snippet;
+    toastStatus?: boolean;
+    dismissable?: boolean;
+    color?: ColorType;
+    position?: PositionType;
+    baseClass?: string;
+    iconClass?: string;
+    contentClass?: string;
+    align?: boolean;
+    params?: ParamsType;
+    transition?: TransitionFunc;
+}
+export { type ToastProps };

package/dist/toast/type.js

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

package/dist/toolbar/Toolbar.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  import { setContext } from "svelte";
+  import { writable } from "svelte/store";
+  import { type ToolbarProps as Props, toolbar } from "./";
+
+  let { children, end, color = "default", embedded, class: className, ...restProps }: Props = $props();
+
+  const separators = writable(false);
+  setContext("toolbar", separators);
+
+  let frameColor = $derived(embedded ? "default" : color);
+
+  let { base, content } = $derived(
+    toolbar({
+      color: frameColor,
+      embedded,
+      separators: $separators
+    })
+  );
+
+  // let separatorsClass: string = twMerge($separators && 'sm:divide-x rtl:divide-x-reverse');
+
+  // let divClass: string = twMerge('flex justify-between items-center', !embedded && 'py-2 px-3', className);
+</script>
+
+<div {...restProps} class={base({ className })}>
+  <div class={content()}>
+    {@render children()}
+  </div>
+  {#if end}
+    {@render end()}
+  {/if}
+</div>
+
+<!--
+@component
+[Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+## Props
+@props: children: any;
+@props:end: any;
+@props:color: any = "default";
+@props:embedded: any;
+@props:class: string;
+-->

package/dist/toolbar/Toolbar.svelte.d.ts

@@ -0,0 +1,13 @@
+import { type ToolbarProps as Props } from "./";
+/**
+ * [Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+ * ## Props
+ * @props: children: any;
+ * @props:end: any;
+ * @props:color: any = "default";
+ * @props:embedded: any;
+ * @props:class: string;
+ */
+declare const Toolbar: import("svelte").Component<Props, {}, "">;
+type Toolbar = ReturnType<typeof Toolbar>;
+export default Toolbar;

package/dist/toolbar/ToolbarButton.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+  import { getContext } from "svelte";
+  import { type ToolbarButtonProps as Props, toolbarButton } from "./";
+
+  const background = getContext("background");
+  let { children, color = "default", name, ariaLabel, size = "md", href, class: className, onclick, ...restProps }: Props = $props();
+
+  const buttonClass = $derived(
+    toolbarButton({
+      color,
+      size,
+      background: !!background,
+      class: className
+    })
+  );
+
+  // const colors = {
+  //   dark: 'text-gray-500 hover:text-gray-900 hover:bg-gray-200 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600',
+  //   gray: 'text-gray-500 focus:ring-gray-400 hover:bg-gray-200 dark:hover:bg-gray-800 dark:hover:text-gray-300',
+  //   red: 'text-red-500 focus:ring-red-400 hover:bg-red-200 dark:hover:bg-red-800 dark:hover:text-red-300',
+  //   yellow: 'text-yellow-500 focus:ring-yellow-400 hover:bg-yellow-200 dark:hover:bg-yellow-800 dark:hover:text-yellow-300',
+  //   green: 'text-green-500 focus:ring-green-400 hover:bg-green-200 dark:hover:bg-green-800 dark:hover:text-green-300',
+  //   indigo: 'text-indigo-500 focus:ring-indigo-400 hover:bg-indigo-200 dark:hover:bg-indigo-800 dark:hover:text-indigo-300',
+  //   purple: 'text-purple-500 focus:ring-purple-400 hover:bg-purple-200 dark:hover:bg-purple-800 dark:hover:text-purple-300',
+  //   pink: 'text-pink-500 focus:ring-pink-400 hover:bg-pink-200 dark:hover:bg-pink-800 dark:hover:text-pink-300',
+  //   blue: 'text-blue-500 focus:ring-blue-400 hover:bg-blue-200 dark:hover:bg-blue-800 dark:hover:text-blue-300',
+  //   primary: 'text-primary-500 focus:ring-primary-400 hover:bg-primary-200 dark:hover:bg-primary-800 dark:hover:text-primary-300',
+  //   default: 'focus:ring-gray-400 hover:bg-gray-100'
+  // };
+
+  // const sizing = {
+  //   xs: 'm-0.5 rounded-sm focus:ring-1 p-0.5',
+  //   sm: 'm-0.5 rounded focus:ring-1 p-0.5',
+  //   md: 'm-0.5 rounded-lg focus:ring-2 p-1.5',
+  //   lg: 'm-0.5 rounded-lg focus:ring-2 p-2.5'
+  // };
+
+  // let buttonClass: string = twMerge('focus:outline-none whitespace-normal', sizing[size], colors[color], color === 'default' && (background ? 'dark:hover:bg-gray-600' : 'dark:hover:bg-gray-700'), className);
+</script>
+
+{#if href}
+  <a {href} {...restProps} class={buttonClass} aria-label={ariaLabel ?? name}>
+    {#if name}<span class="sr-only">{name}</span>{/if}
+    {@render children()}
+  </a>
+{:else}
+  <button {onclick} type="button" {...restProps} class={buttonClass} aria-label={ariaLabel ?? name}>
+    {#if name}<span class="sr-only">{name}</span>{/if}
+    {@render children()}
+  </button>
+{/if}
+
+<!--
+@component
+[Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+## Props
+@props: children: any;
+@props:color: any = "default";
+@props:name: any;
+@props:ariaLabel: any;
+@props:size: any = "md";
+@props:href: any;
+@props:class: string;
+@props:onclick: any;
+-->

package/dist/toolbar/ToolbarButton.svelte.d.ts

@@ -0,0 +1,16 @@
+import { type ToolbarButtonProps as Props } from "./";
+/**
+ * [Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+ * ## Props
+ * @props: children: any;
+ * @props:color: any = "default";
+ * @props:name: any;
+ * @props:ariaLabel: any;
+ * @props:size: any = "md";
+ * @props:href: any;
+ * @props:class: string;
+ * @props:onclick: any;
+ */
+declare const ToolbarButton: import("svelte").Component<Props, {}, "">;
+type ToolbarButton = ReturnType<typeof ToolbarButton>;
+export default ToolbarButton;

package/dist/toolbar/ToolbarGroup.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import type { Writable } from "svelte/store";
+  import { getContext } from "svelte";
+  import { type ToolbarGroupProps as Props, toolbarGroup } from "./";
+
+  let { children, spacing = "default", padding = "default", position = "middle", class: className, ...restProps }: Props = $props();
+
+  const groupClass = $derived(toolbarGroup({ spacing, padding, position, class: className }));
+
+  const options: Writable<boolean> = getContext("toolbar");
+  if (options) $options = true;
+</script>
+
+<div {...restProps} class={groupClass}>
+  {@render children()}
+</div>
+
+<!--
+@component
+[Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+## Props
+@props: children: any;
+@props:spacing: any = "default";
+@props:padding: any = "default";
+@props:position: any = "middle";
+@props:class: string;
+-->

package/dist/toolbar/ToolbarGroup.svelte.d.ts

@@ -0,0 +1,13 @@
+import { type ToolbarGroupProps as Props } from "./";
+/**
+ * [Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+ * ## Props
+ * @props: children: any;
+ * @props:spacing: any = "default";
+ * @props:padding: any = "default";
+ * @props:position: any = "middle";
+ * @props:class: string;
+ */
+declare const ToolbarGroup: import("svelte").Component<Props, {}, "">;
+type ToolbarGroup = ReturnType<typeof ToolbarGroup>;
+export default ToolbarGroup;

package/dist/toolbar/index.d.ts

@@ -0,0 +1,6 @@
+import type { ToolbarProps, ToolbarGroupProps, ToolbarButtonProps } from "./type";
+import Toolbar from "./Toolbar.svelte";
+import ToolbarButton from "./ToolbarButton.svelte";
+import ToolbarGroup from "./ToolbarGroup.svelte";
+import { toolbar, toolbarGroup, toolbarButton } from "./theme";
+export { Toolbar, toolbar, ToolbarButton, toolbarButton, ToolbarGroup, toolbarGroup, type ToolbarProps, type ToolbarGroupProps, type ToolbarButtonProps };

package/dist/toolbar/index.js

@@ -0,0 +1,5 @@
+import Toolbar from "./Toolbar.svelte";
+import ToolbarButton from "./ToolbarButton.svelte";
+import ToolbarGroup from "./ToolbarGroup.svelte";
+import { toolbar, toolbarGroup, toolbarButton } from "./theme";
+export { Toolbar, toolbar, ToolbarButton, toolbarButton, ToolbarGroup, toolbarGroup };