@kahitsan/ksui 0.31.0 → 0.31.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kahitsan/ksui",
|
|
3
|
-
"version": "0.31.
|
|
3
|
+
"version": "0.31.1",
|
|
4
4
|
"description": "ksui is a standalone set of SolidJS UI components for KahitSan/Hilinga and any SolidJS app. Published to the public npm registry and consumed as a normal dependency. Ships source under a `solid` export condition so the consumer's vite-plugin-solid compiles it with only solid-js externalized; it depends on nothing but solid-js + lucide-solid and injects its own CSS.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./src/index.ts",
|
|
@@ -5,6 +5,14 @@ interface TooltipProps {
|
|
|
5
5
|
content: JSX.Element;
|
|
6
6
|
/** Where the bubble sits relative to the trigger. Default "top". */
|
|
7
7
|
placement?: "top" | "bottom";
|
|
8
|
+
/** Horizontal anchor. "center" (default) centers the bubble on the trigger;
|
|
9
|
+
* "start" left-aligns it to the trigger's left edge instead — use when the
|
|
10
|
+
* trigger sits near a left edge (sidebar, viewport) where a centered bubble
|
|
11
|
+
* would slide underneath it. */
|
|
12
|
+
align?: "center" | "start";
|
|
13
|
+
/** Wrap long copy inside a fixed-width bubble instead of one nowrap line —
|
|
14
|
+
* pairs with `align="start"` for descriptive copy near a screen edge. */
|
|
15
|
+
wrap?: boolean;
|
|
8
16
|
/** Allow the trigger to be any element; the wrapper is a span. */
|
|
9
17
|
children: JSX.Element;
|
|
10
18
|
/** Extra classes on the wrapper. The wrapper is inline-flex so it sits
|
|
@@ -43,6 +51,7 @@ interface TooltipProps {
|
|
|
43
51
|
export default function Tooltip(props: TooltipProps): JSX.Element {
|
|
44
52
|
const tooltipId = props.id ?? createUniqueId();
|
|
45
53
|
const placement = () => props.placement ?? "top";
|
|
54
|
+
const align = () => props.align ?? "center";
|
|
46
55
|
return (
|
|
47
56
|
<span
|
|
48
57
|
class={`relative inline-flex group/tt ${props.class ?? ""}`}
|
|
@@ -53,7 +62,9 @@ export default function Tooltip(props: TooltipProps): JSX.Element {
|
|
|
53
62
|
<span
|
|
54
63
|
role="tooltip"
|
|
55
64
|
id={tooltipId}
|
|
56
|
-
class={`pointer-events-none absolute
|
|
65
|
+
class={`pointer-events-none absolute px-2 py-1 rounded-md bg-zinc-900 border border-zinc-700/80 text-[11px] text-zinc-100 opacity-0 group-hover/tt:opacity-100 group-focus-within/tt:opacity-100 transition-opacity duration-150 delay-150 z-50 shadow-lg ${
|
|
66
|
+
align() === "start" ? "left-0" : "left-1/2 -translate-x-1/2"
|
|
67
|
+
} ${props.wrap ? "whitespace-normal w-max max-w-[260px]" : "whitespace-nowrap"} ${
|
|
57
68
|
placement() === "bottom" ? "top-full mt-1" : "bottom-full mb-1"
|
|
58
69
|
}`}
|
|
59
70
|
>
|