lithesome 0.4.0 → 0.5.0

package/dist/components/Hovercard/Hovercard.svelte

@@ -0,0 +1,43 @@
+<script context="module">import { getContext } from "svelte";
+import { HovercardContext } from "./context.svelte.js";
+const contextName = "hovercard-context";
+export const context = () => getContext(contextName);
+</script>
+
+<script>import { useActions, classProp, parseDelay } from "../../internal/index.js";
+import { setContext } from "svelte";
+let {
+  children,
+  use = [],
+  class: klass,
+  visible = $bindable(false),
+  self = $bindable(),
+  delay = 700,
+  ...props
+} = $props();
+const delays = parseDelay(delay);
+const ctx = new HovercardContext(
+  { visible, delays },
+  {
+    onChange(val) {
+      visible = val;
+    }
+  }
+);
+setContext(contextName, ctx);
+$effect(() => {
+  ctx.visible = visible;
+});
+</script>
+
+<div
+	bind:this={self}
+	use:useActions={use}
+	id={ctx.uid()}
+	class={classProp(klass, { visible: ctx.visible })}
+	data-hovercard=""
+	data-state={ctx.visible ? 'opened' : 'closed'}
+	{...props}
+>
+	{@render children({ visible: ctx.visible })}
+</div>

package/dist/components/Hovercard/Hovercard.svelte.d.ts

@@ -0,0 +1,30 @@
+import { SvelteComponent } from "svelte";
+import { HovercardContext } from './context.svelte.js';
+export declare const context: () => HovercardContext;
+import { type BaseProps } from '../../internal/index.js';
+declare const __propDef: {
+    props: BaseProps<HTMLDivElement, {
+        visible: boolean;
+    }> & {
+        /**
+         * Whether or not the content is visible or not.
+         */
+        visible?: boolean | undefined;
+        /**
+         * The delay between the the content being visible or not.
+         *
+         * Passing an array will allow you to change the delays for in and out.
+         */
+        delay?: number | [number, number] | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type HovercardProps = typeof __propDef.props;
+export type HovercardEvents = typeof __propDef.events;
+export type HovercardSlots = typeof __propDef.slots;
+export default class Hovercard extends SvelteComponent<HovercardProps, HovercardEvents, HovercardSlots> {
+}
+export {};

package/dist/components/Hovercard/HovercardContent.svelte

@@ -0,0 +1,110 @@
+<script>import { context } from "./Hovercard.svelte";
+import {
+  clickOutside,
+  anchorElement,
+  portal,
+  useActions,
+  trap,
+  getTransition,
+  classProp
+} from "../../internal/index.js";
+import { log } from "../../internal/index.js";
+import { onMount } from "svelte";
+let {
+  children,
+  transition,
+  use = [],
+  portalTarget = "body",
+  class: klass,
+  self = $bindable(),
+  placement = "bottom",
+  constrainViewport,
+  sameWidth = false,
+  onMouseenter,
+  onMouseleave,
+  ...props
+} = $props();
+const ctx = context();
+let contentCleanup = $state(void 0);
+const _transition = getTransition(transition);
+const attrs = $derived({
+  id: ctx.uid("content"),
+  "aria-labelledby": ctx.uid("trigger"),
+  class: classProp(klass, { visible: ctx.visible }),
+  "data-menucontent": "",
+  role: "menu",
+  tabindex: -1
+});
+onMount(async () => {
+  if (!ctx)
+    log.error("<HoverCardContent> Must be a direct child of <HoverCard />");
+});
+$effect(() => {
+  if (ctx.visible && self)
+    ctx.content = self;
+});
+$effect(() => {
+  if (ctx.visible && ctx.trigger && ctx.content) {
+    contentCleanup = anchorElement(ctx.trigger, ctx.content, {
+      placement,
+      constrainViewport,
+      sameWidth
+    });
+  }
+  return () => {
+    contentCleanup?.();
+  };
+});
+const handleMouseenter = (e) => {
+  onMouseenter?.(e);
+  ctx.hovered = true;
+  ctx.timeout = null;
+};
+const handleMouseleave = (e) => {
+  onMouseleave?.(e);
+  ctx.hovered = false;
+  ctx.close();
+};
+</script>
+
+{#if _transition}
+	{#if ctx.visible}
+		<div
+			bind:this={self}
+			use:clickOutside={{
+				exclude: [ctx.trigger],
+				callback: () => {
+					ctx.visible = false;
+				}
+			}}
+			use:portal={portalTarget}
+			use:useActions={use}
+			in:_transition.in.fn={_transition.in.params}
+			out:_transition.out.fn={_transition.out.params}
+			onmouseenter={handleMouseenter}
+			onmouseleave={handleMouseleave}
+			{...attrs}
+			{...props}
+		>
+			{@render children({ visible: ctx.visible })}
+		</div>
+	{/if}
+{:else if ctx.visible}
+	<div
+		bind:this={self}
+		use:clickOutside={{
+			exclude: [ctx.trigger],
+			callback: () => {
+				ctx.visible = false;
+			}
+		}}
+		use:portal={portalTarget}
+		use:useActions={use}
+		onmouseenter={handleMouseenter}
+		onmouseleave={handleMouseleave}
+		{...attrs}
+		{...props}
+	>
+		{@render children({ visible: ctx.visible })}
+	</div>
+{/if}

package/dist/components/Hovercard/HovercardContent.svelte.d.ts

@@ -0,0 +1,35 @@
+import { SvelteComponent } from "svelte";
+import { type Transition, type BaseProps, type Handler } from '../../internal/index.js';
+import type { Placement } from '@floating-ui/dom';
+declare const __propDef: {
+    props: BaseProps<HTMLDivElement, {
+        visible: boolean;
+    }> & {
+        /**
+         * The `svelte/transtion` you wish to use.
+         *
+         * @see https://lithesome.dev/docs/api#transition-prop
+         */
+        transition?: Transition | undefined;
+        /** The element to portal the content menu to. */
+        portalTarget?: string | HTMLElement | undefined;
+        /** The anchor point of the content relative to the trigger. */
+        placement?: Placement | undefined;
+        /** Keeps the content from ever growing outside of the viewport. */
+        constrainViewport?: boolean | undefined;
+        /** Makes the content the same width as the trigger. */
+        sameWidth?: boolean | undefined;
+        onMouseenter?: Handler<MouseEvent, HTMLDivElement> | undefined;
+        onMouseleave?: Handler<MouseEvent, HTMLDivElement> | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type HovercardContentProps = typeof __propDef.props;
+export type HovercardContentEvents = typeof __propDef.events;
+export type HovercardContentSlots = typeof __propDef.slots;
+export default class HovercardContent extends SvelteComponent<HovercardContentProps, HovercardContentEvents, HovercardContentSlots> {
+}
+export {};

package/dist/components/Hovercard/HovercardTrigger.svelte

@@ -0,0 +1,57 @@
+<script>import { context } from "./Hovercard.svelte";
+import {
+  log,
+  setNodeProps,
+  addEventListeners,
+  useActions,
+  removeNodeProps,
+  classProp
+} from "../../internal/index.js";
+import { onMount } from "svelte";
+let { children, class: klass, use = [], self = $bindable(), ...props } = $props();
+const ctx = context();
+onMount(() => {
+  if (!self)
+    return;
+  if (self && self.children.length > 1) {
+    log.error("<HoverCardTrigger /> comoponent can only take 1 child node.");
+    return;
+  }
+  const target = self.children[0];
+  setNodeProps(target, {
+    id: ctx.uid("trigger"),
+    role: "button",
+    "aria-haspopup": "dialog",
+    "aria-expanded": "false"
+  });
+  addEventListeners(target, {
+    mouseenter: () => ctx.open(),
+    mouseleave: () => ctx.close()
+  });
+  ctx.trigger = target;
+});
+$effect(() => {
+  if (!ctx.trigger)
+    return;
+  const target = ctx.trigger;
+  if (ctx.visible) {
+    setNodeProps(target, {
+      "aria-expanded": "true",
+      "aria-controls": ctx.uid("content")
+    });
+  } else {
+    setNodeProps(target, { "aria-expanded": "false" });
+    removeNodeProps(target, "aria-controls");
+  }
+});
+</script>
+
+<div
+	bind:this={self}
+	use:useActions={use}
+	class={classProp(klass, { visible: ctx.visible })}
+	data-hovercardtrigger=""
+	{...props}
+>
+	{@render children({ visible: ctx.visible })}
+</div>

package/dist/components/Hovercard/HovercardTrigger.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+import { type BaseProps } from '../../internal/index.js';
+declare const __propDef: {
+    props: BaseProps<HTMLDivElement, {
+        visible: boolean;
+    }>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type HovercardTriggerProps = typeof __propDef.props;
+export type HovercardTriggerEvents = typeof __propDef.events;
+export type HovercardTriggerSlots = typeof __propDef.slots;
+export default class HovercardTrigger extends SvelteComponent<HovercardTriggerProps, HovercardTriggerEvents, HovercardTriggerSlots> {
+}
+export {};

package/dist/components/Hovercard/context.svelte.d.ts

@@ -0,0 +1,27 @@
+import { Context } from '../../internal/index.js';
+interface Init {
+    visible: boolean;
+    delays: {
+        in: number;
+        out: number;
+    };
+}
+interface Hooks {
+    onChange: (value: boolean) => void;
+}
+export declare class HovercardContext extends Context<Hooks> {
+    #private;
+    visible: boolean;
+    trigger: HTMLElement | null;
+    content: HTMLElement | null;
+    timeout: number | null;
+    delays: {
+        in: number;
+        out: number;
+    };
+    hovered: boolean;
+    constructor(init: Init, hooks: Hooks);
+    open(): void;
+    close(): void;
+}
+export {};

package/dist/components/Hovercard/context.svelte.js

@@ -0,0 +1,36 @@
+import { Context, effects } from '../../internal/index.js';
+export class HovercardContext extends Context {
+    visible = $state(false);
+    trigger = $state(null);
+    content = $state(null);
+    timeout = $state(null);
+    delays = $state({ in: 700, out: 700 });
+    hovered = $state(false);
+    constructor(init, hooks) {
+        super('hovercard', hooks);
+        this.visible = init.visible;
+        this.delays = init.delays;
+    }
+    open() {
+        if (this.timeout) {
+            clearTimeout(this.timeout);
+            this.timeout = null;
+        }
+        this.timeout = setTimeout(() => {
+            this.visible = true;
+        }, this.delays.in);
+    }
+    close() {
+        if (this.timeout) {
+            clearTimeout(this.timeout);
+            this.timeout = null;
+        }
+        this.timeout = setTimeout(() => {
+            if (!this.hovered)
+                this.visible = false;
+        }, this.delays.out);
+    }
+    #effects = effects(() => {
+        this.hooks?.onChange?.(this.visible);
+    });
+}

package/dist/components/Hovercard/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Hovercard } from './Hovercard.svelte';
+export { default as HovercardTrigger } from './HovercardTrigger.svelte';
+export { default as HovercardContent } from './HovercardContent.svelte';

package/dist/components/Hovercard/index.js

@@ -0,0 +1,3 @@
+export { default as Hovercard } from './Hovercard.svelte';
+export { default as HovercardTrigger } from './HovercardTrigger.svelte';
+export { default as HovercardContent } from './HovercardContent.svelte';

package/dist/components/Menu/MenuTrigger.svelte

@@ -13,7 +13,7 @@ let { children, class: klass, use = [], self = $bindable(), onClick, onKeydown,
 const ctx = context();
 onMount(() => {
   if (self && self.children.length > 1) {
-    log.error("<MenuTrigger /> comoponent can only take 1 children node.");
+    log.error("<MenuTrigger /> comoponent can only take 1 child node.");
     return;
   }
   const target = self?.children[0];

package/dist/components/Popover/Popover.svelte

@@ -7,7 +7,6 @@ export const context = () => getContext(contextName);
 <script>import { createUID, useActions, KEYS, isBrowser, classProp } from "../../internal/index.js";
 import { setContext } from "svelte";
 let { children, use = [], class: klass, self = $bindable(), visible = $bindable(false), ...props } = $props();
-const { uid } = createUID("popover");
 const ctx = new PopoverContext(
   { visible },
   {
@@ -35,7 +34,7 @@ $effect(() => {
 <div
 	bind:this={self}
 	use:useActions={use}
-	id={uid()}
+	id={ctx.uid()}
 	class={classProp(klass, { visible: ctx.visible })}
 	data-popover=""
 	data-state={ctx.visible ? 'opened' : 'closed'}

package/dist/components/Popover/PopoverTrigger.svelte

@@ -5,21 +5,22 @@ import {
   addEventListeners,
   useActions,
   KEYS,
-  classProp
+  classProp,
+  removeNodeProps
 } from "../../internal/index.js";
 import { onMount } from "svelte";
 let { children, class: klass, use = [], self = $bindable(), onClick, onKeydown, ...props } = $props();
 const ctx = context();
 onMount(() => {
   if (self && self.children.length > 1) {
-    log.error("<MenuTrigger /> comoponent can only take 1 children node.");
+    log.error("<MenuTrigger /> comoponent can only take 1 child node.");
     return;
   }
   const target = self?.children[0];
   setNodeProps(target, {
     id: ctx.uid("trigger"),
     role: "button",
-    "aria-hasdialog": "true",
+    "aria-haspopup": "dialog",
     "aria-expanded": "false"
   });
   addEventListeners(target, {
@@ -40,6 +41,7 @@ $effect(() => {
   }
   if (!ctx.visible) {
     setNodeProps(target, { "aria-expanded": "false" });
+    removeNodeProps(target, "aria-controls");
   }
 });
 const handleKeydown = (e) => {

package/dist/components/Select/SelectTrigger.svelte

@@ -39,7 +39,7 @@ const handleKeydown = (e) => {
 };
 onMount(() => {
   if (self && self.children.length > 1) {
-    log.error("<SelectTrigger /> comoponent can only take 1 children node.");
+    log.error("<SelectTrigger /> comoponent can only take 1 child node.");
     return;
   }
   const target = self?.children[0];

package/dist/index.d.ts

@@ -8,3 +8,4 @@ export * from './components/Select/index.js';
 export * from './components/Tabs/index.js';
 export * from './components/Popover/index.js';
 export * from './components/Combobox/index.js';
+export * from './components/Hovercard/index.js';

package/dist/index.js

@@ -8,3 +8,4 @@ export * from './components/Select/index.js';
 export * from './components/Tabs/index.js';
 export * from './components/Popover/index.js';
 export * from './components/Combobox/index.js';
+export * from './components/Hovercard/index.js';

package/dist/internal/helpers/utils.svelte.d.ts

@@ -32,3 +32,10 @@ export declare const defaultConfig: <const T>(config: Partial<T> | undefined, de
  * @param props Any state to be passed down to the function.
  */
 export declare const classProp: <T extends Record<string, any>>(klass: ClassProp<T>, props?: T) => string | null | undefined;
+/**
+ * Contructs a object with in and out properties.
+ */
+export declare const parseDelay: (delay: number | [number, number]) => {
+    in: number;
+    out: number;
+};

package/dist/internal/helpers/utils.svelte.js

@@ -77,3 +77,12 @@ export const classProp = (klass, props) => {
     const cls = $derived(typeof klass === 'function' ? klass(_props) : klass);
     return cls;
 };
+/**
+ * Contructs a object with in and out properties.
+ */
+export const parseDelay = (delay) => {
+    return {
+        in: Array.isArray(delay) ? delay[0] : delay,
+        out: Array.isArray(delay) ? delay[1] : delay
+    };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lithesome",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/Gibbu/lithesome.git"