@awenovations/aura 0.0.18 → 0.0.20

package/dist/float/float.svelte

@@ -1,6 +1,14 @@
-<script>import { computePosition, autoUpdate } from "@floating-ui/dom";
+<script>import {
+  computePosition,
+  autoUpdate,
+  offset as offsetMiddleware,
+  arrow as floatingArrow
+} from "@floating-ui/dom";
 export let target;
 export let placement = "bottom";
+export let offset = 0;
+export let middleware = [];
+export let onComputedPosition = void 0;
 let float;
 let cleanup;
 $: {
@@ -9,14 +17,21 @@ $: {
     cleanup = autoUpdate(target, float, () => {
       if (!target || !float) return;
       computePosition(target, float, {
-        placement
-      }).then(({ x, y }) => {
+        placement,
+        middleware: [offsetMiddleware(offset), ...middleware]
+      }).then(({ x, y, middlewareData, placemen }) => {
         if (float) {
           Object.assign(float.style, {
             left: `${x}px`,
             top: `${y}px`
           });
         }
+        onComputedPosition?.({
+          x,
+          y,
+          middlewareData,
+          placement
+        });
       });
     });
   }

package/dist/float/float.svelte.d.ts

@@ -1,9 +1,17 @@
 import { SvelteComponent } from "svelte";
-import type { Placement } from '@floating-ui/dom';
+import type { MiddlewareData, Placement } from '@floating-ui/dom';
 declare const __propDef: {
     props: {
         target: HTMLElement;
         placement?: Placement;
+        offset?: number;
+        middleware?: Array<MiddlewareData>;
+        onComputedPosition?: (computed: {
+            x: number;
+            y: number;
+            middlewareData: MiddlewareData;
+            placement: Placement;
+        }) => void;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/icons/meta.json

@@ -1 +1 @@
-{"lastGenerated":1723826974398,"icons":[{"name":"apple","size":"large"},{"name":"apple","size":"medium"},{"name":"apple","size":"small"},{"name":"arrow-circle-left","size":"large"},{"name":"arrow-circle-left","size":"medium"},{"name":"arrow-circle-left","size":"small"},{"name":"bug","size":"large"},{"name":"bug","size":"medium"},{"name":"bug","size":"small"},{"name":"caret-down","size":"large"},{"name":"caret-down","size":"medium"},{"name":"caret-down","size":"small"},{"name":"circle-plus","size":"large"},{"name":"circle-plus","size":"medium"},{"name":"circle-plus","size":"small"},{"name":"google-color","size":"large"},{"name":"google-color","size":"medium"},{"name":"google-color","size":"small"},{"name":"microsoft-color","size":"large"},{"name":"microsoft-color","size":"medium"},{"name":"microsoft-color","size":"small"},{"name":"plan","size":"large"},{"name":"plan","size":"medium"},{"name":"plan","size":"small"},{"name":"user-story","size":"large"},{"name":"user-story","size":"medium"},{"name":"user-story","size":"small"}]}
+{"lastGenerated":1724117007152,"icons":[{"name":"apple","size":"large"},{"name":"apple","size":"medium"},{"name":"apple","size":"small"},{"name":"arrow-circle-left","size":"large"},{"name":"arrow-circle-left","size":"medium"},{"name":"arrow-circle-left","size":"small"},{"name":"bug","size":"large"},{"name":"bug","size":"medium"},{"name":"bug","size":"small"},{"name":"caret-down","size":"large"},{"name":"caret-down","size":"medium"},{"name":"caret-down","size":"small"},{"name":"circle-plus","size":"large"},{"name":"circle-plus","size":"medium"},{"name":"circle-plus","size":"small"},{"name":"google-color","size":"large"},{"name":"google-color","size":"medium"},{"name":"google-color","size":"small"},{"name":"microsoft-color","size":"large"},{"name":"microsoft-color","size":"medium"},{"name":"microsoft-color","size":"small"},{"name":"plan","size":"large"},{"name":"plan","size":"medium"},{"name":"plan","size":"small"},{"name":"user-story","size":"large"},{"name":"user-story","size":"medium"},{"name":"user-story","size":"small"}]}

package/dist/link/link.svelte

@@ -1,8 +1,13 @@
 <script>import classNames from "classnames";
+import { createEventDispatcher } from "svelte";
+const dispatch = createEventDispatcher();
+function forwardEvent(e) {
+  dispatch(e.type, e);
+}
 export let href;
 </script>
 
-<a {href} {...$$props} class={classNames($$props.class, 'aura-link')}>
+<a {href} {...$$props} class={classNames($$props.class, 'aura-link')} on:click={forwardEvent}>
 	<slot />
 </a>
 

package/dist/link/link.svelte.d.ts

@@ -4,6 +4,10 @@ declare const __propDef: {
         href: string;
     };
     events: {
+        click: CustomEvent<Event & {
+            target: HTMLAnchorElement;
+        }>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {

package/dist/tokens/_variables.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri Aug 16 2024 16:56:26 GMT+0000 (Coordinated Universal Time)
+ * Generated on Tue Aug 20 2024 01:39:52 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {
@@ -67,14 +67,7 @@
   --aura-link-color: #00a5f0ff;
   --aura-link-focused-decoration: underline;
   --aura-link-hovered-decoration: underline;
-  --aura-tooltip-background: #ffffffff;
-  --aura-tooltip-drop-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.10);
-  --aura-tooltip-border: #c1c2c4ff;
-  --aura-font-color: #1f1f1fff;
-  --aura-tooltip-background: #a3a4a7ff;
-  --aura-tooltip-drop-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.50);
-  --aura-tooltip-border: #c1c2c4ff;
-  --aura-font-color: #292c33ff;
+  --aura-tooltip-border-radius: 10px;
   --aura-divider-fill: #c1c2c4ff;
   --aura-divider-fill: #a3a4a7ff;  --aura-light-primary-10: #f5e1e1ff;
   --aura-light-primary-20: #eecacaff;
@@ -132,7 +125,11 @@
   --aura-light-container-drop-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.10);
   --aura-light-container-background: #ffffffff;
   --aura-light-container-border-color: #c1c2c4ff;
-  --aura-light-label-text-color: #292c33ff;  --aura-dark-primary-70: #f5e1e1ff;
+  --aura-light-label-text-color: #292c33ff;
+  --aura-light-tooltip-background: #ffffffff;
+  --aura-light-tooltip-drop-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.10);
+  --aura-light-tooltip-border: #c1c2c4ff;
+  --aura-light-tooltip-font-color: #1f1f1fff;  --aura-dark-primary-70: #f5e1e1ff;
   --aura-dark-primary-60: #eecacaff;
   --aura-dark-primary-50: #e6b3b3ff;
   --aura-dark-primary-40: #cd6868ff;
@@ -189,6 +186,10 @@
   --aura-dark-container-background: #474a50ff;
   --aura-dark-container-border-color: #66686dff;
   --aura-dark-label-text-color: #dfe0e1ff;
+  --aura-dark-tooltip-background: #a3a4a7ff;
+  --aura-dark-tooltip-drop-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.50);
+  --aura-dark-tooltip-border: #c1c2c4ff;
+  --aura-dark-tooltip-font-color: #292c33ff;
 }
 
 @media (prefers-color-scheme: light) {
@@ -250,6 +251,10 @@
   --aura-container-background: #ffffffff;
   --aura-container-border-color: #c1c2c4ff;
   --aura-label-text-color: #292c33ff;
+  --aura-tooltip-background: #ffffffff;
+  --aura-tooltip-drop-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.10);
+  --aura-tooltip-border: #c1c2c4ff;
+  --aura-tooltip-font-color: #1f1f1fff;
  }
 }
 
@@ -312,6 +317,10 @@
   --aura-container-background: #474a50ff;
   --aura-container-border-color: #66686dff;
   --aura-label-text-color: #dfe0e1ff;
+  --aura-tooltip-background: #a3a4a7ff;
+  --aura-tooltip-drop-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.50);
+  --aura-tooltip-border: #c1c2c4ff;
+  --aura-tooltip-font-color: #292c33ff;
  }
 }
 
@@ -373,6 +382,10 @@
   --aura-container-background: #ffffffff;
   --aura-container-border-color: #c1c2c4ff;
   --aura-label-text-color: #292c33ff;
+  --aura-tooltip-background: #ffffffff;
+  --aura-tooltip-drop-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.10);
+  --aura-tooltip-border: #c1c2c4ff;
+  --aura-tooltip-font-color: #1f1f1fff;
 }
 
 [data-theme="dark"] {
@@ -433,6 +446,10 @@
   --aura-container-background: #474a50ff;
   --aura-container-border-color: #66686dff;
   --aura-label-text-color: #dfe0e1ff;
+  --aura-tooltip-background: #a3a4a7ff;
+  --aura-tooltip-drop-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.50);
+  --aura-tooltip-border: #c1c2c4ff;
+  --aura-tooltip-font-color: #292c33ff;
 }
 
 /* http://meyerweb.com/eric/tools/css/reset/

package/dist/tooltip/tooltip.stories.svelte

@@ -0,0 +1,78 @@
+<script context="module">import "../../app.scss";
+import Tooltip from "./tooltip.svelte";
+export const meta = {
+  title: "AURA/Tooltip",
+  component: Tooltip,
+  tags: ["autodocs"],
+  argTypes: {}
+};
+</script>
+
+<script>import { Story, Template } from "@storybook/addon-svelte-csf";
+</script>
+
+<Template let:args>
+	<div class="tooltip-story">
+		<Tooltip content="Tooltip Content" forceOpen {...args}>
+			Tooltip Wrapped Element Line 1<br />
+			Tooltip Wrapped Element Line 2<br />
+			Tooltip Wrapped Element Line 3
+		</Tooltip>
+	</div>
+</Template>
+<Story name="All tooltips">
+	<div class="all-tooltips-story">
+		<div class="column">
+			<Tooltip content="Tooltip Content" forceOpen placement="left-start">Left start</Tooltip>
+			<Tooltip content="Tooltip Content" forceOpen placement="left">Left</Tooltip>
+			<Tooltip content="Tooltip Content" forceOpen placement="left-end">Left end</Tooltip>
+			<Tooltip content="Tooltip Content" forceOpen placement="bottom-start">Bottom start</Tooltip>
+			<Tooltip content="Tooltip Content" forceOpen placement="bottom">Bottom</Tooltip>
+			<Tooltip content="Tooltip Content" forceOpen placement="bottom-end">Bottom end</Tooltip>
+		</div>
+
+		<div class="column right">
+			<Tooltip content="Tooltip Content" forceOpen placement="top-start">Top start</Tooltip>
+			<Tooltip content="Tooltip Content" forceOpen placement="top">Top</Tooltip>
+			<Tooltip content="Tooltip Content" forceOpen placement="top-end">Top end</Tooltip>
+			<Tooltip content="Tooltip Content" forceOpen placement="right-start">Right start</Tooltip>
+			<Tooltip content="Tooltip Content" forceOpen placement="right">Right</Tooltip>
+			<Tooltip content="Tooltip Content" forceOpen placement="right-end">Right end</Tooltip>
+		</div>
+	</div>
+</Story>
+
+<Story name="Default tooltip" args={{ forceOpen: false }} />
+
+<Story name="Bottom start tooltip" args={{ placement: 'bottom-start' }} />
+<Story name="Bottom tooltip" args={{ placement: 'bottom' }} />
+<Story name="Bottom end tooltip" args={{ placement: 'bottom-end' }} />
+<Story name="Top start tooltip" args={{ placement: 'top-start' }} />
+<Story name="Top tooltip" args={{ placement: 'top' }} />
+<Story name="Top end tooltip" args={{ placement: 'top-end' }} />
+<Story name="Left start tooltip" args={{ placement: 'left-start' }} />
+<Story name="Left tooltip" args={{ placement: 'left' }} />
+<Story name="Left end tooltip" args={{ placement: 'left-end' }} />
+<Story name="Right start tooltip" args={{ placement: 'right-start' }} />
+<Story name="Right tooltip" args={{ placement: 'right' }} />
+<Story name="Right end tooltip" args={{ placement: 'right-end' }} />
+
+<style>.tooltip-story {
+  height: 10rem;
+  justify-content: center;
+  display: flex;
+  align-items: center;
+}
+
+.all-tooltips-story {
+  display: flex;
+  gap: 6rem;
+  justify-content: center;
+}
+.all-tooltips-story .column {
+  margin: 4rem;
+  display: flex;
+  gap: 4rem;
+  flex-direction: column;
+  text-align: center;
+}</style>

package/dist/tooltip/tooltip.stories.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+import '../../app.scss';
+export declare const meta: {
+    title: string;
+    component: typeof Tooltip;
+    tags: string[];
+    argTypes: {};
+};
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type TooltipProps = typeof __propDef.props;
+export type TooltipEvents = typeof __propDef.events;
+export type TooltipSlots = typeof __propDef.slots;
+export default class Tooltip extends SvelteComponent<TooltipProps, TooltipEvents, TooltipSlots> {
+}
+export {};

package/dist/tooltip/tooltip.svelte

@@ -0,0 +1,176 @@
+<script>import classNames from "classnames";
+import Float from "../float/float.svelte";
+import { arrow as floatingArrow } from "@floating-ui/dom";
+export let content;
+export let placement = "bottom";
+export let offset = 10;
+export let forceOpen = false;
+let arrowPlacement = void 0;
+let arrowSpacing = void 0;
+$: show = false;
+let target;
+let arrow;
+const toogleTooltip = () => {
+  show = !show;
+};
+const positionArrow = (event) => {
+  if (!event.middlewareData.arrow) return;
+  const { x: arrowX, y: arrowY } = event.middlewareData.arrow;
+  arrowPlacement = event.placement.split("-")[0];
+  arrowSpacing = event.placement.split("-")?.[1];
+  if (!arrow) return;
+  if (!arrowSpacing && arrowPlacement === "bottom" && arrowX !== null) {
+    Object.assign(arrow.style, {
+      left: `${arrowX}px`,
+      top: "-0.286rem",
+      right: "",
+      bottom: ""
+    });
+  }
+  if (arrowSpacing === "end" && arrowPlacement === "bottom" && arrowX !== null) {
+    Object.assign(arrow.style, {
+      left: "",
+      top: "-0.286rem",
+      right: "0.714rem",
+      bottom: ""
+    });
+  }
+  if (arrowSpacing === "start" && arrowPlacement === "bottom" && arrowX !== null) {
+    Object.assign(arrow.style, {
+      left: "0.714rem",
+      top: "-0.286rem",
+      right: "",
+      bottom: ""
+    });
+  }
+  if (!arrowSpacing && arrowPlacement === "top" && arrowX !== null) {
+    Object.assign(arrow.style, {
+      left: `${arrowX}px`,
+      top: "",
+      right: "",
+      bottom: "-0.286rem"
+    });
+  }
+  if (arrowSpacing === "end" && arrowPlacement === "top" && arrowX !== null) {
+    Object.assign(arrow.style, {
+      left: "",
+      top: "",
+      right: "0.714rem",
+      bottom: "-0.286rem"
+    });
+  }
+  if (arrowSpacing === "start" && arrowPlacement === "top" && arrowX !== null) {
+    Object.assign(arrow.style, {
+      left: "0.714rem",
+      top: "",
+      right: "",
+      bottom: "-0.286rem"
+    });
+  }
+  if (!arrowSpacing && arrowPlacement === "left" && arrowY !== null) {
+    Object.assign(arrow.style, {
+      left: "",
+      top: `${arrowY}px`,
+      right: "-0.286rem",
+      bottom: ""
+    });
+  }
+  if (arrowSpacing === "end" && arrowPlacement === "left" && arrowY !== null) {
+    Object.assign(arrow.style, {
+      left: "",
+      top: "",
+      right: "-0.357rem",
+      bottom: "0.714rem"
+    });
+  }
+  if (arrowSpacing === "start" && arrowPlacement === "left" && arrowY !== null) {
+    Object.assign(arrow.style, {
+      left: "",
+      top: "0.714rem",
+      right: "-0.357rem",
+      bottom: ""
+    });
+  }
+  if (!arrowSpacing && arrowPlacement === "right" && arrowY !== null) {
+    Object.assign(arrow.style, {
+      left: "-0.286rem",
+      top: `${arrowY}px`,
+      right: "",
+      bottom: ""
+    });
+  }
+  if (arrowSpacing === "end" && arrowPlacement === "right" && arrowY !== null) {
+    Object.assign(arrow.style, {
+      left: "-0.357rem",
+      top: "",
+      right: "",
+      bottom: "0.714rem"
+    });
+  }
+  if (arrowSpacing === "start" && arrowPlacement === "right" && arrowY !== null) {
+    Object.assign(arrow.style, {
+      left: "-0.357rem",
+      top: "0.714rem",
+      right: "",
+      bottom: ""
+    });
+  }
+};
+</script>
+
+{#key show}
+	<Float
+		{target}
+		{offset}
+		{placement}
+		onComputedPosition={positionArrow}
+		middleware={[floatingArrow({ element: arrow })]}
+	>
+		<div hidden={!forceOpen && !show} class={classNames('aura-tooltip', arrowPlacement, arrowSpacing)}>
+			{content}
+
+			<div bind:this={arrow} class={classNames('arrow', arrowPlacement)} />
+		</div>
+	</Float>
+{/key}
+
+<span on:mouseleave={toogleTooltip} on:mouseenter={toogleTooltip} bind:this={target}><slot /></span>
+
+<style>.aura-tooltip {
+  padding: 0.714rem;
+  border-radius: var(--aura-tooltip-border-radius);
+  border: 1px solid var(--aura-tooltip-border);
+  background: var(--aura-tooltip-background);
+  box-shadow: var(--aura-tooltip-drop-shadow);
+  pointer-events: none;
+  user-select: none;
+  color: var(--aura-tooltip-font-color);
+}
+.aura-tooltip.left.start, .aura-tooltip.right.start {
+  transform: translateY(-0.5rem);
+}
+.aura-tooltip.left.end, .aura-tooltip.right.end {
+  transform: translateY(0.5rem);
+}
+
+.arrow {
+  position: absolute;
+  background: var(--aura-tooltip-background);
+  border: 1px solid var(--aura-tooltip-border);
+  width: 0.571rem;
+  height: 0.571rem;
+  z-index: 10;
+  transform: rotate(45deg);
+}
+.arrow.left, .arrow.bottom {
+  border-bottom: 0;
+}
+.arrow.right, .arrow.bottom {
+  border-right: 0;
+}
+.arrow.right, .arrow.top {
+  border-top: 0;
+}
+.arrow.left, .arrow.top {
+  border-left: 0;
+}</style>

package/dist/tooltip/tooltip.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponent } from "svelte";
+import type { Placement } from '@floating-ui/dom';
+declare const __propDef: {
+    props: {
+        content: string | HTMLElement;
+        placement?: Placement;
+        offset?: number;
+        forceOpen?: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type TooltipProps = typeof __propDef.props;
+export type TooltipEvents = typeof __propDef.events;
+export type TooltipSlots = typeof __propDef.slots;
+export default class Tooltip extends SvelteComponent<TooltipProps, TooltipEvents, TooltipSlots> {
+}
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@awenovations/aura",
-	"version": "0.0.18",
+	"version": "0.0.20",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "npm run transform-tokens && vite build && npm run package",
@@ -42,6 +42,7 @@
 		"./alert.svelte": "./dist/alert/alert.svelte",
 		"./link.svelte": "./dist/link/link.svelte",
 		"./divider.svelte": "./dist/divider/divider.svelte",
+		"./tooltip.svelte": "./dist/tooltip/tooltip.svelte",
 		"./toast.svelte": "./dist/toast/toast.svelte",
 		"./toast.store": "./dist/toast/toast.store.js",
 		"./dist/tokens/_variables.css": {