odj-svelte-ui 0.1.0

package/License

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Flowbite Svelte (created by Shinichi Okada)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,69 @@
+# OdJ Svelte UI
+
+This is a fork from [Flowbite for Svelte 5 with Runes](https://svelte-5-ui-lib.codewithshin.com/). I just made some changes that fits better my taste.
+
+- [Original Docs](https://svelte-5-ui-lib.codewithshin.com/)
+
+## Differences to Flowbite
+- You can choose the "background" color instead of using the hard-coded `gray` color. You have to choose your colors defining `light-surface` and `dark-surface` on `tailwind.config.js`.
+- Some components have the design slightly different:
+  - All components: instead of using focus-within, uses focus-visible;
+  - Forms: When focus, border slightly thicker;
+  - `Alert` has new colors;
+  - `Button` has a new design for some variations and a response when clicked;
+  - `Textarea` is fixed;
+  - `Pagination` respect max-width;
+  - `Modal` title has a better size, improved default animations with control of backdrop's animations and removed the outdated divider;
+  - `Label` now has `space-y-1` by default
+- `Tabs` styles are fixed and introduced underline animations and a complete modern redesign for "Full" style;
+- The `Tooltip` component received a rework;
+- `Modal` has <kbd>Esc</kbd> to close again;
+
+## Installation
+
+Install `svelte`, `tailwindcss`, and `odj-svelte-ui`, update dependencies and install the latest:
+
+```sh
+npx sv create myapp // select to install tailwindcss
+cd myapp
+pnpm install
+pnpm run dev
+pnpm i -D odj-svelte-ui
+```
+
+Add the following to tailwind.config.js:
+
+```js
+import type { Config } from 'tailwindcss';
+import colors from 'tailwindcss/colors';
+
+export default {
+  content: ['./src/**/*.{html,js,svelte,ts}', './node_modules/odj-svelte-ui/**/*.{html,js,svelte,ts}'],
+  darkMode: 'selector',
+  theme: {
+    extend: {
+      colors: {
+        primary: {
+          50: '#FFF5F2',
+          100: '#FFF1EE',
+          200: '#FFE4DE',
+          300: '#FFD5CC',
+          400: '#FFBCAD',
+          500: '#FE795D',
+          600: '#EF562F',
+          700: '#EB4F27',
+          800: '#CC4522',
+          900: '#A5371B'
+        },
+        secondary: colors.blue,
+        "light-surface": colors.gray,
+        "dark-surface": colors.gray
+      }
+    }
+  },
+} as Config;
+```
+
+## License
+
+MIT

package/dist/accordion/Accordion.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import { setContext } from "svelte";
+  import { type AccordionProps as Props, accordion } from "./";
+
+  let { children, flush, activeClass, inactiveClass, isSingle = true, class: className, ...restProps }: Props = $props();
+
+  const ctx = {
+    flush,
+    activeClass,
+    inactiveClass,
+    isSingle
+  };
+
+  setContext("ctx", ctx);
+
+  const base = $derived(accordion({ flush, className }));
+</script>
+
+<div {...restProps} class={base}>
+  {@render children()}
+</div>
+
+<!--
+@component
+[Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+## Props
+@props: children: any;
+@props:flush: any;
+@props:activeClass: any;
+@props:inactiveClass: any;
+@props:isSingle: any = true;
+@props:class: string;
+-->

package/dist/accordion/Accordion.svelte.d.ts

@@ -0,0 +1,14 @@
+import { type AccordionProps as Props } from "./";
+/**
+ * [Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+ * ## Props
+ * @props: children: any;
+ * @props:flush: any;
+ * @props:activeClass: any;
+ * @props:inactiveClass: any;
+ * @props:isSingle: any = true;
+ * @props:class: string;
+ */
+declare const Accordion: import("svelte").Component<Props, {}, "">;
+type Accordion = ReturnType<typeof Accordion>;
+export default Accordion;

package/dist/accordion/AccordionItem.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+  import { twMerge } from "tailwind-merge";
+  import { slide } from "svelte/transition";
+  import { getContext } from "svelte";
+  import { writable } from "svelte/store";
+  import { type AccordionCtxType, type AccordionItemProps as Props, accordionitem } from ".";
+  import type { ParamsType } from "../types";
+
+  let { children, header, arrowup, arrowdown, open = $bindable(false), activeClass, inactiveClass, transition = slide, params, class: className }: Props = $props();
+
+  const ctx: AccordionCtxType = getContext("ctx") ?? {};
+  // selected type is writable in AccordionCtxType
+  if (!ctx.selected) {
+    ctx.selected = writable();
+  }
+
+  // single selection
+  const self = {};
+  const selected = ctx.isSingle ? ctx.selected : writable();
+
+  // open && selected.set(self);
+  if (open) selected.set(self);
+
+  selected.subscribe((x) => (open = x === self));
+
+  const handleToggle = () => selected.set(open ? {} : self);
+
+  const { base, button, content, active, inactive } = accordionitem({ flush: ctx.flush, open });
+
+  let buttonClass = $derived(twMerge(button(), open && !ctx.flush && (activeClass || ctx.activeClass || active()), !open && !ctx.flush && (inactiveClass || ctx.inactiveClass || inactive()), className));
+</script>
+
+<h2 class={base()}>
+  <button onclick={handleToggle} class={buttonClass} aria-expanded={open}>
+    {#if header}
+      {@render header()}
+      {#if open}
+        {#if !arrowup}
+          <svg class="h-3 w-3 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5 5 1 1 5" />
+          </svg>
+        {:else}
+          {@render arrowup()}
+        {/if}
+      {:else if !arrowdown}
+        <svg class="h-3 w-3 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
+          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4" />
+        </svg>
+      {:else}
+        {@render arrowdown()}
+      {/if}
+    {/if}
+  </button>
+</h2>
+{#if open}
+  <div transition:transition={params as ParamsType}>
+    <div class={content()}>
+      {@render children()}
+    </div>
+  </div>
+{/if}
+
+<!--
+@component
+[Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+## Props
+@props: children: any;
+@props:header: any;
+@props:arrowup: any;
+@props:arrowdown: any;
+@props:open: any = $bindable(false);
+@props:activeClass: any;
+@props:inactiveClass: any;
+@props:transition: any = slide;
+@props:params: any;
+@props:class: string;
+-->

package/dist/accordion/AccordionItem.svelte.d.ts

@@ -0,0 +1,18 @@
+import { type AccordionItemProps as Props } from ".";
+/**
+ * [Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+ * ## Props
+ * @props: children: any;
+ * @props:header: any;
+ * @props:arrowup: any;
+ * @props:arrowdown: any;
+ * @props:open: any = $bindable(false);
+ * @props:activeClass: any;
+ * @props:inactiveClass: any;
+ * @props:transition: any = slide;
+ * @props:params: any;
+ * @props:class: string;
+ */
+declare const AccordionItem: import("svelte").Component<Props, {}, "open">;
+type AccordionItem = ReturnType<typeof AccordionItem>;
+export default AccordionItem;

package/dist/accordion/index.d.ts

@@ -0,0 +1,5 @@
+import Accordion from "./Accordion.svelte";
+import AccordionItem from "./AccordionItem.svelte";
+import type { AccordionCtxType, AccordionProps, AccordionItemProps } from "./type";
+import { accordion, accordionitem } from "./theme";
+export { AccordionItem, accordionitem, type AccordionItemProps, Accordion, accordion, type AccordionCtxType, type AccordionProps };

package/dist/accordion/index.js

@@ -0,0 +1,4 @@
+import Accordion from "./Accordion.svelte";
+import AccordionItem from "./AccordionItem.svelte";
+import { accordion, accordionitem } from "./theme";
+export { AccordionItem, accordionitem, Accordion, accordion };

package/dist/accordion/theme.d.ts

@@ -0,0 +1,160 @@
+export declare const accordion: import("tailwind-variants").TVReturnType<{
+    flush: {
+        true: string;
+        false: string;
+    };
+}, undefined, "w-full text-gray-500 dark:text-gray-400", import("tailwind-variants/dist/config").TVConfig<{
+    flush: {
+        true: string;
+        false: string;
+    };
+}, {
+    flush: {
+        true: string;
+        false: string;
+    };
+}>, {
+    flush: {
+        true: string;
+        false: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    flush: {
+        true: string;
+        false: string;
+    };
+}, undefined, "w-full text-gray-500 dark:text-gray-400", import("tailwind-variants/dist/config").TVConfig<{
+    flush: {
+        true: string;
+        false: string;
+    };
+}, {
+    flush: {
+        true: string;
+        false: string;
+    };
+}>, unknown, unknown, undefined>>;
+export declare const accordionitem: import("tailwind-variants").TVReturnType<{
+    flush: {
+        true: {
+            button: string;
+            content: string;
+        };
+        false: {
+            button: string;
+            content: string;
+        };
+    };
+    open: {
+        true: {};
+        false: {};
+    };
+}, {
+    base: string;
+    button: string;
+    content: string;
+    active: string;
+    inactive: string;
+}, undefined, import("tailwind-variants/dist/config").TVConfig<{
+    flush: {
+        true: {
+            button: string;
+            content: string;
+        };
+        false: {
+            button: string;
+            content: string;
+        };
+    };
+    open: {
+        true: {};
+        false: {};
+    };
+}, {
+    flush: {
+        true: {
+            button: string;
+            content: string;
+        };
+        false: {
+            button: string;
+            content: string;
+        };
+    };
+    open: {
+        true: {};
+        false: {};
+    };
+}>, {
+    flush: {
+        true: {
+            button: string;
+            content: string;
+        };
+        false: {
+            button: string;
+            content: string;
+        };
+    };
+    open: {
+        true: {};
+        false: {};
+    };
+}, {
+    base: string;
+    button: string;
+    content: string;
+    active: string;
+    inactive: string;
+}, import("tailwind-variants").TVReturnType<{
+    flush: {
+        true: {
+            button: string;
+            content: string;
+        };
+        false: {
+            button: string;
+            content: string;
+        };
+    };
+    open: {
+        true: {};
+        false: {};
+    };
+}, {
+    base: string;
+    button: string;
+    content: string;
+    active: string;
+    inactive: string;
+}, undefined, import("tailwind-variants/dist/config").TVConfig<{
+    flush: {
+        true: {
+            button: string;
+            content: string;
+        };
+        false: {
+            button: string;
+            content: string;
+        };
+    };
+    open: {
+        true: {};
+        false: {};
+    };
+}, {
+    flush: {
+        true: {
+            button: string;
+            content: string;
+        };
+        false: {
+            button: string;
+            content: string;
+        };
+    };
+    open: {
+        true: {};
+        false: {};
+    };
+}>, unknown, unknown, undefined>>;

package/dist/accordion/theme.js

@@ -0,0 +1,55 @@
+import { tv } from "tailwind-variants";
+export const accordion = tv({
+    base: "w-full text-gray-500 dark:text-gray-400",
+    variants: {
+        flush: {
+            true: "",
+            false: "border border-gray-200 dark:border-gray-700 rounded-t-xl"
+        }
+    }
+});
+export const accordionitem = tv({
+    slots: {
+        base: "group",
+        button: "flex items-center justify-between w-full font-medium text-left group-first:rounded-t-xl border-gray-200 dark:border-gray-700 border-b",
+        content: "border-b border-gray-200 dark:border-gray-700",
+        active: "bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800",
+        inactive: "text-gray-500 dark:text-gray-400 hover:bg-gray-100 hover:dark:bg-gray-800"
+    },
+    variants: {
+        flush: {
+            true: {
+                button: "py-5",
+                content: "py-5"
+            },
+            false: {
+                button: "p-5 border-s border-e group-first:border-t",
+                content: "p-5 border-s border-e"
+            }
+        },
+        open: {
+            true: {},
+            false: {}
+        }
+    },
+    compoundVariants: [
+        {
+            flush: true,
+            open: true,
+            class: {
+                button: "text-gray-900 dark:text-white"
+            }
+        },
+        {
+            flush: true,
+            open: false,
+            class: {
+                button: "text-gray-500 dark:text-gray-400"
+            }
+        }
+    ],
+    defaultVariants: {
+        flush: false,
+        open: false
+    }
+});

package/dist/accordion/type.d.ts

@@ -0,0 +1,36 @@
+import { type Writable } from "svelte/store";
+import type { Snippet } from "svelte";
+import type { ParamsType, TransitionFunc } from "../types";
+import type { HTMLAttributes } from "svelte/elements";
+interface AccordionCtxType {
+    flush: boolean;
+    activeClass: string | undefined | null;
+    inactiveClass: string | undefined | null;
+    selected?: Writable<object>;
+    classActive?: string;
+    classInactive?: string;
+    isSingle?: boolean;
+}
+interface AccordionProps extends HTMLAttributes<HTMLDivElement> {
+    children: Snippet;
+    flush?: boolean;
+    isSingle?: boolean;
+    activeClass?: string;
+    inactiveClass?: string;
+    defaultClass?: string;
+    classActive?: string;
+    classInactive?: string;
+}
+interface AccordionItemProps extends HTMLAttributes<HTMLDivElement> {
+    children: Snippet;
+    header?: Snippet;
+    arrowup?: Snippet;
+    arrowdown?: Snippet;
+    open?: boolean;
+    activeClass?: string;
+    inactiveClass?: string;
+    transition?: TransitionFunc;
+    params?: ParamsType;
+    class?: string;
+}
+export type { AccordionCtxType, AccordionProps, AccordionItemProps };

package/dist/accordion/type.js

@@ -0,0 +1 @@
+import {} from "svelte/store";

package/dist/alert/Alert.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+  import { type AlertProps as Props, alert } from ".";
+  import { CloseButton } from "..";
+  import { fade } from "svelte/transition";
+  import type { ParamsType } from "../types";
+
+  let { children, icon, alertStatus = $bindable(true), closeIcon, color = "primary", rounded = true, border, class: className, dismissable, transition = fade, params, onclick, ...restProps }: Props = $props();
+
+  let divCls = $derived(
+    alert({
+      color,
+      rounded,
+      border,
+      icon: !!icon,
+      dismissable,
+      className
+    })
+  );
+  // $inspect('transition: ', transition);
+</script>
+
+{#if alertStatus}
+  <div role="alert" {...restProps} transition:transition={params as ParamsType} class={divCls}>
+    {#if icon}
+      {@render icon()}
+    {/if}
+
+    {#if icon || dismissable}
+      <div>
+        {@render children()}
+      </div>
+    {:else}
+      {@render children()}
+    {/if}
+
+    {#if dismissable}
+      {#if closeIcon}
+        <button
+          type="button"
+          class="m-0.5 -me-1.5 ms-1.5 whitespace-normal rounded p-0.5 text-primary-500 hover:bg-primary-200 focus:outline-none focus:ring-1 focus:ring-primary-400 dark:hover:bg-primary-800 dark:hover:text-primary-300"
+          aria-label="Remove badge"
+          onclick={() => {
+            alertStatus = false;
+          }}
+        >
+          <span class="sr-only">Remove alert</span>
+          {#if icon}
+            {@render icon()}
+          {/if}
+        </button>
+      {:else if onclick}
+        <CloseButton class="-my-1.5 -me-1.5 ms-auto" {color} ariaLabel="Remove badge" {onclick} />
+      {:else}
+        <CloseButton
+          class="-my-1.5 -me-1.5 ms-auto"
+          {color}
+          ariaLabel="Remove alert"
+          onclick={() => {
+            alertStatus = false;
+          }}
+        />
+      {/if}
+    {/if}
+  </div>
+{/if}
+
+<!--
+@component
+[Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+## Props
+@props: children: any;
+@props:icon: any;
+@props:alertStatus: any = $bindable(true);
+@props:closeIcon: any;
+@props:color: any = "primary";
+@props:rounded: any = true;
+@props:border: any;
+@props:class: string;
+@props:dismissable: any;
+@props:transition: any = fade;
+@props:params: any;
+@props:onclick: any;
+-->

package/dist/alert/Alert.svelte.d.ts

@@ -0,0 +1,20 @@
+import { type AlertProps as Props } from ".";
+/**
+ * [Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+ * ## Props
+ * @props: children: any;
+ * @props:icon: any;
+ * @props:alertStatus: any = $bindable(true);
+ * @props:closeIcon: any;
+ * @props:color: any = "primary";
+ * @props:rounded: any = true;
+ * @props:border: any;
+ * @props:class: string;
+ * @props:dismissable: any;
+ * @props:transition: any = fade;
+ * @props:params: any;
+ * @props:onclick: any;
+ */
+declare const Alert: import("svelte").Component<Props, {}, "alertStatus">;
+type Alert = ReturnType<typeof Alert>;
+export default Alert;

package/dist/alert/index.d.ts

@@ -0,0 +1,4 @@
+import Alert from "./Alert.svelte";
+import type { alertColor, AlertProps } from "./type";
+import { alert } from "./theme";
+export { type alertColor, type AlertProps, Alert, alert };

package/dist/alert/index.js

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