@x33025/sveltely 0.0.6 → 0.0.8

package/dist/components/Tooltip.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	let {
+		label,
+		class: className = '',
+		disabled = false,
+		children,
+		...props
+	}: { label: string; class?: string; disabled?: boolean; children: Snippet } & Record<
+		string,
+		unknown
+	> = $props();
+</script>
+
+<span class="tooltip {className}" aria-label={!disabled ? label : undefined} {...props}>
+	{@render children()}
+	{#if !disabled}
+		<span class="tooltip-content" role="tooltip">{label}</span>
+	{/if}
+</span>
+
+<style>
+	.tooltip {
+		position: relative;
+		display: inline-flex;
+		align-items: center;
+	}
+
+	.tooltip-content {
+		position: absolute;
+		left: 50%;
+		bottom: calc(100% + 6px);
+		transform: translateX(-50%);
+		padding: var(--tooltip-padding);
+		border-radius: var(--tooltip-border-radius);
+		background: var(--tooltip-background);
+		color: var(--tooltip-text);
+		font-size: var(--tooltip-font-size);
+		white-space: nowrap;
+		opacity: 0;
+		pointer-events: none;
+		z-index: 10;
+	}
+
+	.tooltip-content::after {
+		content: '';
+		position: absolute;
+		top: calc(100% - 5px);
+		left: 50%;
+		width: 10px;
+		height: 10px;
+		transform: translateX(-50%) rotate(45deg);
+		background: var(--tooltip-background);
+		border-radius: 0;
+		border-bottom-right-radius: calc(var(--tooltip-border-radius) / 2);
+	}
+
+	.tooltip:hover .tooltip-content,
+	.tooltip:focus-within .tooltip-content {
+		opacity: 1;
+	}
+</style>

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

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    label: string;
+    class?: string;
+    disabled?: boolean;
+    children: Snippet;
+} & Record<string, unknown>;
+declare const Tooltip: import("svelte").Component<$$ComponentProps, {}, "">;
+type Tooltip = ReturnType<typeof Tooltip>;
+export default Tooltip;

package/dist/index.d.ts

@@ -6,5 +6,6 @@ export { default as Portal } from './components/Portal.svelte';
 export { default as Sheet } from './components/Sheet';
 export { default as Spinner } from './components/Spinner.svelte';
 export { default as TextShimmer } from './components/TextShimmer.svelte';
+export { default as Tooltip } from './components/Tooltip.svelte';
 export { default as Dropdown } from './components/Dropdown';
 export { default as TabView } from './components/TabView';

package/dist/index.js

@@ -6,5 +6,6 @@ export { default as Portal } from './components/Portal.svelte';
 export { default as Sheet } from './components/Sheet';
 export { default as Spinner } from './components/Spinner.svelte';
 export { default as TextShimmer } from './components/TextShimmer.svelte';
+export { default as Tooltip } from './components/Tooltip.svelte';
 export { default as Dropdown } from './components/Dropdown';
 export { default as TabView } from './components/TabView';

package/dist/style/index.css

@@ -58,5 +58,11 @@
 
 		--dropdown-background: var(--color-white);
 		--dropdown-shadow: var(--shadow-md);
+
+		--tooltip-border-radius: var(--radius-sm);
+		--tooltip-padding: 4px 8px;
+		--tooltip-font-size: 12px;
+		--tooltip-background: #111827;
+		--tooltip-text: #f9fafb;
 	}
 }

package/dist/style.css

@@ -28,6 +28,7 @@
     --font-weight-medium: 500;
     --font-weight-semibold: 600;
     --tracking-wide: 0.025em;
+    --radius-sm: 0.25rem;
     --radius-md: 0.375rem;
     --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
     --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
@@ -264,6 +265,9 @@
   .flex-1 {
     flex: 1;
   }
+  .transform {
+    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
+  }
   .transform-gpu {
     transform: translateZ(0) var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
   }
@@ -555,8 +559,33 @@
     --dropdown-content-padding: calc(var(--spacing));
     --dropdown-background: var(--color-white);
     --dropdown-shadow: var(--shadow-md);
+    --tooltip-border-radius: var(--radius-sm);
+    --tooltip-padding: 4px 8px;
+    --tooltip-font-size: 12px;
+    --tooltip-background: #111827;
+    --tooltip-text: #f9fafb;
   }
 }
+@property --tw-rotate-x {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-rotate-y {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-rotate-z {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-skew-x {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-skew-y {
+  syntax: "*";
+  inherits: false;
+}
 @property --tw-space-y-reverse {
   syntax: "*";
   inherits: false;
@@ -765,6 +794,11 @@
 @layer properties {
   @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
     *, ::before, ::after, ::backdrop {
+      --tw-rotate-x: initial;
+      --tw-rotate-y: initial;
+      --tw-rotate-z: initial;
+      --tw-skew-x: initial;
+      --tw-skew-y: initial;
       --tw-space-y-reverse: 0;
       --tw-border-style: solid;
       --tw-font-weight: initial;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@x33025/sveltely",
-	"version": "0.0.6",
+	"version": "0.0.8",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",
@@ -27,7 +27,14 @@
 	"exports": {
 		".": {
 			"types": "./dist/index.d.ts",
-			"svelte": "./dist/index.js"
+			"svelte": "./dist/index.js",
+			"import": "./dist/index.js",
+			"default": "./dist/index.js"
+		},
+		"./*.svelte": {
+			"types": "./dist/components/*.svelte.d.ts",
+			"svelte": "./dist/components/*.svelte",
+			"default": "./dist/components/*.svelte"
 		},
 		"./style.css": "./dist/style.css"
 	},