@popgrids/ui 0.0.21 → 0.0.22
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/dist/dialog.cjs +2 -2
- package/dist/dialog.cjs.map +1 -1
- package/dist/dialog.js +2 -2
- package/dist/dialog.js.map +1 -1
- package/dist/dropdown-menu.cjs +126 -92
- package/dist/dropdown-menu.cjs.map +1 -1
- package/dist/dropdown-menu.d.cts +18 -20
- package/dist/dropdown-menu.d.ts +18 -20
- package/dist/dropdown-menu.js +127 -93
- package/dist/dropdown-menu.js.map +1 -1
- package/dist/index.cjs +170 -122
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +171 -123
- package/dist/index.js.map +1 -1
- package/dist/metafile-cjs.json +1 -1
- package/dist/metafile-esm.json +1 -1
- package/dist/section-header.cjs +30 -29
- package/dist/section-header.cjs.map +1 -1
- package/dist/section-header.js +30 -29
- package/dist/section-header.js.map +1 -1
- package/dist/tag.cjs +0 -1
- package/dist/tag.cjs.map +1 -1
- package/dist/tag.js +0 -1
- package/dist/tag.js.map +1 -1
- package/dist/tooltip.cjs +40 -18
- package/dist/tooltip.cjs.map +1 -1
- package/dist/tooltip.d.cts +1 -3
- package/dist/tooltip.d.ts +1 -3
- package/dist/tooltip.js +40 -18
- package/dist/tooltip.js.map +1 -1
- package/package.json +1 -1
package/dist/section-header.js
CHANGED
|
@@ -9,37 +9,46 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
|
9
9
|
function cn(...inputs) {
|
|
10
10
|
return twMerge(clsx(inputs));
|
|
11
11
|
}
|
|
12
|
-
function TooltipProvider({ delay = 0, ...props }) {
|
|
13
|
-
return /* @__PURE__ */ jsx(Tooltip$1.Provider, { "data-slot": "tooltip-provider", delay, ...props });
|
|
14
|
-
}
|
|
15
12
|
function Tooltip({ ...props }) {
|
|
16
|
-
return /* @__PURE__ */ jsx(
|
|
13
|
+
return /* @__PURE__ */ jsx(Tooltip$1.Root, { "data-slot": "tooltip", ...props });
|
|
17
14
|
}
|
|
18
15
|
function TooltipTrigger({ ...props }) {
|
|
19
16
|
return /* @__PURE__ */ jsx(Tooltip$1.Trigger, { "data-slot": "tooltip-trigger", ...props });
|
|
20
17
|
}
|
|
21
18
|
function TooltipContent({
|
|
22
19
|
className,
|
|
20
|
+
side = "top",
|
|
21
|
+
sideOffset = 4,
|
|
22
|
+
align = "center",
|
|
23
|
+
alignOffset = 0,
|
|
23
24
|
children,
|
|
24
|
-
positionerProps,
|
|
25
25
|
...props
|
|
26
26
|
}) {
|
|
27
|
-
return /* @__PURE__ */ jsx(Tooltip$1.Portal, { children: /* @__PURE__ */ jsx(
|
|
28
|
-
Tooltip$1.
|
|
27
|
+
return /* @__PURE__ */ jsx(Tooltip$1.Portal, { children: /* @__PURE__ */ jsx(
|
|
28
|
+
Tooltip$1.Positioner,
|
|
29
29
|
{
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
30
|
+
align,
|
|
31
|
+
alignOffset,
|
|
32
|
+
side,
|
|
33
|
+
sideOffset,
|
|
34
|
+
className: "isolate z-50",
|
|
35
|
+
children: /* @__PURE__ */ jsxs(
|
|
36
|
+
Tooltip$1.Popup,
|
|
37
|
+
{
|
|
38
|
+
"data-slot": "tooltip-content",
|
|
39
|
+
className: cn(
|
|
40
|
+
"data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 bg-foreground text-background z-50 w-fit max-w-xs origin-(--transform-origin) rounded-md px-3 py-1.5 text-xs",
|
|
41
|
+
className
|
|
42
|
+
),
|
|
43
|
+
...props,
|
|
44
|
+
children: [
|
|
45
|
+
children,
|
|
46
|
+
/* @__PURE__ */ jsx(Tooltip$1.Arrow, { className: "flex data-[side=bottom]:-top-[6px] data-[side=bottom]:rotate-0 data-[side=left]:right-[-13px] data-[side=left]:rotate-90 data-[side=right]:left-[-13px] data-[side=right]:-rotate-90 data-[side=top]:-bottom-[6px] data-[side=top]:rotate-180", children: /* @__PURE__ */ jsx(TooltipArrow, {}) })
|
|
47
|
+
]
|
|
48
|
+
}
|
|
49
|
+
)
|
|
41
50
|
}
|
|
42
|
-
) })
|
|
51
|
+
) });
|
|
43
52
|
}
|
|
44
53
|
var TooltipArrow = (props) => {
|
|
45
54
|
return /* @__PURE__ */ jsxs(
|
|
@@ -124,16 +133,8 @@ function SectionHeader({
|
|
|
124
133
|
/* @__PURE__ */ jsx(
|
|
125
134
|
TooltipContent,
|
|
126
135
|
{
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
alignOffset: 5,
|
|
130
|
-
collisionAvoidance: {
|
|
131
|
-
side: "shift",
|
|
132
|
-
align: "shift",
|
|
133
|
-
fallbackAxisSide: "none"
|
|
134
|
-
},
|
|
135
|
-
collisionPadding: 16
|
|
136
|
-
},
|
|
136
|
+
sideOffset: 2,
|
|
137
|
+
alignOffset: 5,
|
|
137
138
|
children: /* @__PURE__ */ jsx("p", { children: description })
|
|
138
139
|
}
|
|
139
140
|
)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/lib/utils.ts","../src/components/tooltip/tooltip.tsx","../src/components/section-header/section-header.tsx"],"names":["TooltipPrimitive","jsx","jsxs"],"mappings":"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","file":"section-header.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n","\"use client\";\n\nimport { Tooltip as TooltipPrimitive } from \"@base-ui/react/tooltip\";\n\nimport { cn } from \"../../lib/utils\";\n\nfunction TooltipProvider({ delay = 0, ...props }: TooltipPrimitive.Provider.Props) {\n return <TooltipPrimitive.Provider data-slot=\"tooltip-provider\" delay={delay} {...props} />;\n}\n\nfunction Tooltip({ ...props }: TooltipPrimitive.Root.Props) {\n return (\n <TooltipProvider>\n <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n </TooltipProvider>\n );\n}\n\nfunction TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {\n return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />;\n}\n\nfunction TooltipContent({\n className,\n children,\n positionerProps,\n ...props\n}: TooltipPrimitive.Popup.Props & {\n positionerProps?: Omit<React.ComponentProps<typeof TooltipPrimitive.Positioner>, \"children\">;\n}) {\n return (\n <TooltipPrimitive.Portal>\n <TooltipPrimitive.Positioner {...positionerProps} className=\"isolate z-50\">\n <TooltipPrimitive.Popup\n data-slot=\"tooltip-content\"\n className={cn(\n \"bg-foreground text-background z-50 w-fit max-w-xs origin-(--transform-origin) rounded-[8px] px-3 py-2 text-xs font-medium\",\n className,\n )}\n {...props}\n >\n <TooltipPrimitive.Arrow className=\"flex data-[side=bottom]:-top-[6px] data-[side=bottom]:-translate-x-1/2 data-[side=bottom]:rotate-0 data-[side=left]:right-[-13px] data-[side=left]:-translate-y-1/2 data-[side=left]:rotate-90 data-[side=right]:left-[-13px] data-[side=right]:-translate-y-1/2 data-[side=right]:-rotate-90 data-[side=top]:-bottom-[6px] data-[side=top]:-translate-x-1/2 data-[side=top]:rotate-180\">\n <TooltipArrow />\n </TooltipPrimitive.Arrow>\n {children}\n <TooltipPrimitive.Arrow className=\"cn-tooltip-arrow bg-foreground fill-foreground z-50 data-[side=bottom]:top-1 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5\" />\n </TooltipPrimitive.Popup>\n </TooltipPrimitive.Positioner>\n </TooltipPrimitive.Portal>\n );\n}\n\nconst TooltipArrow = (props: React.ComponentProps<\"svg\">) => {\n return (\n <svg\n width=\"20\"\n height=\"6\"\n viewBox=\"382.134 241.548 20 6\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <title>Tooltip Arrow</title>\n <path\n className=\"fill-foreground\"\n d=\"M 382.134 247.548 C 390.116 247.548 389.506 241.548 392.134 241.548 C 394.762 241.548 394.152 247.548 402.134 247.548\"\n />\n </svg>\n );\n};\n\nexport { Tooltip, TooltipArrow, TooltipContent, TooltipProvider, TooltipTrigger };\n","\"use client\";\n\nimport { Check, InfoCircle } from \"@untitledui/icons\";\nimport { useCallback, useEffect, useState } from \"react\";\nimport { cn } from \"../../lib/utils\";\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"../tooltip/tooltip\";\nimport { SectionHeaderProps } from \"./types\";\n\nexport function SectionHeader({\n className = undefined,\n flourish = undefined,\n heading = undefined,\n icon = undefined,\n label = undefined,\n min = undefined,\n max = undefined,\n required = false,\n description = undefined,\n numberChecked = 0,\n}: SectionHeaderProps) {\n const [labelText, setLabelText] = useState(\"\");\n\n const updateLabel = useCallback(() => {\n if (required) {\n // Required\n if (numberChecked === 0) {\n setLabelText(`${min}–${max} Required`);\n }\n if (numberChecked > 0) {\n setLabelText(`${numberChecked} selected of ${max}`);\n }\n } else {\n // Optional\n if (max === 0 && min === 0) {\n setLabelText(\"1 Optional\");\n } else {\n if (numberChecked === 0) {\n setLabelText(`Up to ${max}`);\n }\n if (numberChecked > 0) {\n setLabelText(`${numberChecked} selected of ${max}`);\n }\n }\n }\n }, [required, numberChecked, min, max]);\n\n useEffect(() => {\n updateLabel();\n }, [updateLabel]);\n\n return (\n <div\n className={cn(\n \"flex w-full items-center\",\n {\n \"justify-center py-8\": flourish,\n \"h-[30px] shrink-0 flex-wrap content-center justify-between gap-y-3 pb-1.5\": !flourish,\n \"border-foreground border-b-[0.3px]\": !flourish,\n },\n className,\n )}\n >\n {flourish ? (\n <span className=\"text-xl font-normal\">{flourish}</span>\n ) : (\n <>\n <div className=\"flex items-center gap-1 text-sm font-semibold uppercase\">\n {heading && (\n <>\n {icon && <>{icon}</>}\n {heading}\n </>\n )}\n </div>\n {min && (\n <div className=\"flex items-center gap-1.5\">\n <div className=\"text-sm font-normal\">{labelText}</div>\n {(required && numberChecked >= min) || (!required && numberChecked > 0) ? (\n <Check className=\"size-5\" />\n ) : (\n <>\n {description && (\n <Tooltip>\n <TooltipTrigger render={<InfoCircle className=\"size-5\" />} />\n <TooltipContent\n positionerProps={{\n sideOffset: 2,\n alignOffset: 5,\n collisionAvoidance: {\n side: \"shift\",\n align: \"shift\",\n fallbackAxisSide: \"none\",\n },\n collisionPadding: 16,\n }}\n >\n <p>{description}</p>\n </TooltipContent>\n </Tooltip>\n )}\n </>\n )}\n </div>\n )}\n </>\n )}\n </div>\n );\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/lib/utils.ts","../src/components/tooltip/tooltip.tsx","../src/components/section-header/section-header.tsx"],"names":["TooltipPrimitive","jsx","jsxs"],"mappings":"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","file":"section-header.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n","\"use client\";\n\nimport { Tooltip as TooltipPrimitive } from \"@base-ui/react/tooltip\";\n\nimport { cn } from \"../../lib/utils\";\n\nfunction TooltipProvider({\n delay = 0,\n ...props\n}: TooltipPrimitive.Provider.Props) {\n return (\n <TooltipPrimitive.Provider\n data-slot=\"tooltip-provider\"\n delay={delay}\n {...props}\n />\n )\n}\n\nfunction Tooltip({ ...props }: TooltipPrimitive.Root.Props) {\n return <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n}\n\nfunction TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {\n return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />\n}\n\nfunction TooltipContent({\n className,\n side = \"top\",\n sideOffset = 4,\n align = \"center\",\n alignOffset = 0,\n children,\n ...props\n}: TooltipPrimitive.Popup.Props &\n Pick<\n TooltipPrimitive.Positioner.Props,\n \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n >) {\n return (\n <TooltipPrimitive.Portal>\n <TooltipPrimitive.Positioner\n align={align}\n alignOffset={alignOffset}\n side={side}\n sideOffset={sideOffset}\n className=\"isolate z-50\"\n >\n <TooltipPrimitive.Popup\n data-slot=\"tooltip-content\"\n className={cn(\n \"data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 bg-foreground text-background z-50 w-fit max-w-xs origin-(--transform-origin) rounded-md px-3 py-1.5 text-xs\",\n className\n )}\n {...props}\n >\n {children}\n <TooltipPrimitive.Arrow className=\"flex data-[side=bottom]:-top-[6px] data-[side=bottom]:rotate-0 data-[side=left]:right-[-13px] data-[side=left]:rotate-90 data-[side=right]:left-[-13px] data-[side=right]:-rotate-90 data-[side=top]:-bottom-[6px] data-[side=top]:rotate-180\">\n <TooltipArrow />\n </TooltipPrimitive.Arrow>\n </TooltipPrimitive.Popup>\n </TooltipPrimitive.Positioner>\n </TooltipPrimitive.Portal>\n )\n}\n\nexport const TooltipArrow = (props: React.ComponentProps<\"svg\">) => {\n return (\n <svg\n width=\"20\"\n height=\"6\"\n viewBox=\"382.134 241.548 20 6\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <title>Tooltip Arrow</title>\n <path\n className=\"fill-foreground\"\n d=\"M 382.134 247.548 C 390.116 247.548 389.506 241.548 392.134 241.548 C 394.762 241.548 394.152 247.548 402.134 247.548\"\n />\n </svg>\n );\n};\n\nexport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };\n","\"use client\";\n\nimport { Check, InfoCircle } from \"@untitledui/icons\";\nimport { useCallback, useEffect, useState } from \"react\";\nimport { cn } from \"../../lib/utils\";\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"../tooltip/tooltip\";\nimport { SectionHeaderProps } from \"./types\";\n\nexport function SectionHeader({\n className = undefined,\n flourish = undefined,\n heading = undefined,\n icon = undefined,\n label = undefined,\n min = undefined,\n max = undefined,\n required = false,\n description = undefined,\n numberChecked = 0,\n}: SectionHeaderProps) {\n const [labelText, setLabelText] = useState(\"\");\n\n const updateLabel = useCallback(() => {\n if (required) {\n // Required\n if (numberChecked === 0) {\n setLabelText(`${min}–${max} Required`);\n }\n if (numberChecked > 0) {\n setLabelText(`${numberChecked} selected of ${max}`);\n }\n } else {\n // Optional\n if (max === 0 && min === 0) {\n setLabelText(\"1 Optional\");\n } else {\n if (numberChecked === 0) {\n setLabelText(`Up to ${max}`);\n }\n if (numberChecked > 0) {\n setLabelText(`${numberChecked} selected of ${max}`);\n }\n }\n }\n }, [required, numberChecked, min, max]);\n\n useEffect(() => {\n updateLabel();\n }, [updateLabel]);\n\n return (\n <div\n className={cn(\n \"flex w-full items-center\",\n {\n \"justify-center py-8\": flourish,\n \"h-[30px] shrink-0 flex-wrap content-center justify-between gap-y-3 pb-1.5\": !flourish,\n \"border-foreground border-b-[0.3px]\": !flourish,\n },\n className,\n )}\n >\n {flourish ? (\n <span className=\"text-xl font-normal\">{flourish}</span>\n ) : (\n <>\n <div className=\"flex items-center gap-1 text-sm font-semibold uppercase\">\n {heading && (\n <>\n {icon && <>{icon}</>}\n {heading}\n </>\n )}\n </div>\n {min && (\n <div className=\"flex items-center gap-1.5\">\n <div className=\"text-sm font-normal\">{labelText}</div>\n {(required && numberChecked >= min) || (!required && numberChecked > 0) ? (\n <Check className=\"size-5\" />\n ) : (\n <>\n {description && (\n <Tooltip>\n <TooltipTrigger render={<InfoCircle className=\"size-5\" />} />\n <TooltipContent\n sideOffset={2}\n alignOffset={5}\n >\n <p>{description}</p>\n </TooltipContent>\n </Tooltip>\n )}\n </>\n )}\n </div>\n )}\n </>\n )}\n </div>\n );\n}\n"]}
|
package/dist/tag.cjs
CHANGED
package/dist/tag.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/lib/utils.ts","../src/components/tag/tag.tsx"],"names":["twMerge","clsx","cva","jsxs","Fragment","jsx"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../src/lib/utils.ts","../src/components/tag/tag.tsx"],"names":["twMerge","clsx","cva","jsxs","Fragment","jsx"],"mappings":";;;;;;;AAGO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAOA,qBAAA,CAAQC,SAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACEA,IAAM,WAAA,GAAcC,0BAAA;AAAA;AAAA,EAElB,iQAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,QAAA,EAAU;AAAA,QACR,KAAA,EACE,oJAAA;AAAA,QACF,IAAA,EAAM;AAAA,OACR;AAAA,MACA,WAAA,EAAa;AAAA,QACX,KAAA,EAAO,IAAA;AAAA,QACP,IAAA,EAAM;AAAA,OACR;AAAA,MACA,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,IAAA;AAAA,QACJ,EAAA,EAAI;AAAA,OACN;AAAA,MACA,SAAA,EAAW;AAAA,QACT,KAAA,EAAO,IAAA;AAAA,QACP,IAAA,EAAM;AAAA;AACR,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,QAAA,EAAU,KAAA;AAAA,MACV,WAAA,EAAa,KAAA;AAAA,MACb,IAAA,EAAM,IAAA;AAAA,MACN,SAAA,EAAW;AAAA,KACb;AAAA,IACA,gBAAA,EAAkB;AAAA;AAAA,MAEhB;AAAA,QACE,WAAA,EAAa,IAAA;AAAA,QACb,QAAA,EAAU,KAAA;AAAA,QACV,KAAA,EAAO;AAAA,OACT;AAAA,MACA;AAAA,QACE,WAAA,EAAa,IAAA;AAAA,QACb,QAAA,EAAU,IAAA;AAAA,QACV,KAAA,EAAO;AAAA,OACT;AAAA;AAAA,MAEA;AAAA,QACE,WAAA,EAAa,IAAA;AAAA,QACb,QAAA,EAAU,KAAA;AAAA,QACV,KAAA,EAAO;AAAA,OACT;AAAA,MACA;AAAA,QACE,WAAA,EAAa,IAAA;AAAA,QACb,QAAA,EAAU,IAAA;AAAA,QACV,KAAA,EAAO;AAAA,OACT;AAAA;AAAA,MAEA;AAAA,QACE,IAAA,EAAM,IAAA;AAAA,QACN,SAAA,EAAW,KAAA;AAAA,QACX,KAAA,EAAO;AAAA,OACT;AAAA,MACA;AAAA,QACE,IAAA,EAAM,IAAA;AAAA,QACN,SAAA,EAAW,KAAA;AAAA,QACX,KAAA,EAAO;AAAA,OACT;AAAA;AAAA,MAEA;AAAA,QACE,IAAA,EAAM,IAAA;AAAA,QACN,SAAA,EAAW,IAAA;AAAA,QACX,KAAA,EAAO;AAAA,OACT;AAAA,MACA;AAAA,QACE,IAAA,EAAM,IAAA;AAAA,QACN,SAAA,EAAW,IAAA;AAAA,QACX,KAAA,EAAO;AAAA;AACT;AACF;AAEJ,CAAA;AAEO,SAAS,GAAA,CAAI;AAAA,EAClB,IAAA,GAAO,IAAA;AAAA,EACP,QAAA,GAAW,KAAA;AAAA,EACX,SAAA,GAAY,KAAA;AAAA,EACZ,QAAA;AAAA,EACA,OAAA;AAAA,EACA,QAAA;AAAA,EACA,WAAA;AAAA,EACA,IAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA,GAAY;AACd,CAAA,EAAa;AACX,EAAA,MAAM,cAAc,MAAM;AACxB,IAAA,IAAI,OAAA,EAAS;AACX,MAAA,OAAA,EAAQ;AAAA,IACV;AAAA,EACF,CAAA;AAEA,EAAA,MAAM,aAAA,GAAgB,CAAC,KAAA,KAA6D;AAClF,IAAA,IAAI,YAAY,KAAA,CAAM,GAAA,KAAQ,OAAA,IAAW,KAAA,CAAM,QAAQ,GAAA,CAAA,EAAM;AAC3D,MAAA,KAAA,CAAM,cAAA,EAAe;AACrB,MAAA,OAAA,EAAQ;AAAA,IACV;AAAA,EACF,CAAA;AAEA,EAAA,MAAM,WAAA,GAAc,WAAW,CAAC,SAAA;AAChC,EAAA,MAAM,YAAA,GAAe,YAAY,CAAC,SAAA;AAGlC,EAAA,MAAM,aAAA,GAAgB,WAAA,IAAgB,OAAO,OAAA,KAAY,UAAA;AACzD,EAAA,MAAM,UAAA,GAAa,gBAAgB,QAAA,GAAW,KAAA;AAE9C,EAAA,uBACEC,eAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA;AAAA,QACT,WAAA,CAAY;AAAA,UACV,IAAA;AAAA,UACA,QAAA;AAAA,UACA,SAAA;AAAA,UACA,WAAA,EAAa;AAAA,SACd,CAAA;AAAA,QACD;AAAA,OACF;AAAA,MACA,OAAA,EAAS,WAAA;AAAA,MACT,SAAA,EAAW,aAAA;AAAA,MACX,IAAA,EAAM,aAAA,GAAiB,IAAA,IAAQ,QAAA,GAAY,MAAA;AAAA,MAE1C,QAAA,EAAA;AAAA,QAAA,CAAC,6BACAA,eAAA,CAAAC,mBAAA,EAAA,EACG,QAAA,EAAA;AAAA,UAAA,WAAA,oBACCC,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,gFAAA,EACZ,QAAA,EAAA,OAAA,EACH,CAAA;AAAA,0BAEFA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,4DAAA,EACZ,QAAA,EACH,CAAA;AAAA,UACC,YAAA,oBACCA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,kFACZ,QAAA,EAAA,QAAA,EACH;AAAA,SAAA,EAEJ,CAAA;AAAA,QAGD,6BACCA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,gFAAA,EACZ,qBAAW,QAAA,EACd;AAAA;AAAA;AAAA,GAEJ;AAEJ","file":"tag.cjs","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n","\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport type { KeyboardEvent } from \"react\";\nimport { cn } from \"../../lib/utils\";\nimport type { TagProps } from \"./types\";\n\nconst tagVariants = cva(\n // Base styles\n \"inline-flex items-center justify-center rounded-full box-border relative font-medium text-sm leading-5 text-center whitespace-nowrap appearance-none focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/60 focus-visible:ring-offset-0\",\n {\n variants: {\n selected: {\n false:\n \"bg-background text-primary-foreground ring ring-primary-foreground ring-offset-0 focus-visible:bg-background focus-visible:text-primary-foreground\",\n true: \"bg-primary-foreground text-white dark:text-primary focus-visible:bg-primary-foreground focus-visible:text-white dark:focus-visible:bg-primary-foreground dark:focus-visible:text-primary\",\n },\n interactive: {\n false: null,\n true: \"cursor-pointer\",\n },\n size: {\n md: null,\n lg: null,\n },\n collapsed: {\n false: null,\n true: null,\n },\n },\n defaultVariants: {\n selected: false,\n interactive: false,\n size: \"md\",\n collapsed: false,\n },\n compoundVariants: [\n // Interactive hover states\n {\n interactive: true,\n selected: false,\n class: \"hover:ring-2 hover:ring-primary-foreground\",\n },\n {\n interactive: true,\n selected: true,\n class: \"hover:bg-primary-foreground/90\",\n },\n // Interactive active states\n {\n interactive: true,\n selected: false,\n class: \"active:ring active:ring-primary-foreground\",\n },\n {\n interactive: true,\n selected: true,\n class: \"active:bg-primary-foreground\",\n },\n // Size variants (non-collapsed)\n {\n size: \"md\",\n collapsed: false,\n class: \"px-2 py-1.5 gap-0.5\",\n },\n {\n size: \"lg\",\n collapsed: false,\n class: \"px-3 py-2.5 gap-1\",\n },\n // Collapsed size adjustments\n {\n size: \"md\",\n collapsed: true,\n class: \"p-1.5 w-8 h-8\",\n },\n {\n size: \"lg\",\n collapsed: true,\n class: \"p-2.5 w-10 h-10\",\n },\n ],\n },\n);\n\nexport function Tag({\n size = \"md\",\n selected = false,\n collapsed = false,\n children,\n leading,\n trailing,\n interactive,\n type,\n onClick,\n className = \"\",\n}: TagProps) {\n const handleClick = () => {\n if (onClick) {\n onClick();\n }\n };\n\n const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement | HTMLDivElement>) => {\n if (onClick && (event.key === \"Enter\" || event.key === \" \")) {\n event.preventDefault();\n onClick();\n }\n };\n\n const showLeading = leading && !collapsed;\n const showTrailing = trailing && !collapsed;\n\n // Explicit interactive prop takes precedence; otherwise detect from onClick\n const isInteractive = interactive ?? (typeof onClick === \"function\");\n const TagElement = isInteractive ? \"button\" : \"div\";\n\n return (\n <TagElement\n className={cn(\n tagVariants({\n size,\n selected,\n collapsed,\n interactive: isInteractive,\n }),\n className,\n )}\n onClick={handleClick}\n onKeyDown={handleKeyDown}\n type={isInteractive ? (type ?? \"button\") : undefined}\n >\n {!collapsed && (\n <>\n {showLeading && (\n <div className=\"flex h-5 w-5 shrink-0 items-center justify-center overflow-hidden text-inherit\">\n {leading}\n </div>\n )}\n <div className=\"flex items-center justify-center px-1 first:pl-0 last:pr-0\">\n {children}\n </div>\n {showTrailing && (\n <div className=\"flex h-5 w-5 shrink-0 items-center justify-center overflow-hidden text-inherit\">\n {trailing}\n </div>\n )}\n </>\n )}\n\n {collapsed && (\n <div className=\"flex h-5 w-5 shrink-0 items-center justify-center overflow-hidden text-inherit\">\n {leading || trailing}\n </div>\n )}\n </TagElement>\n );\n}\n"]}
|
package/dist/tag.js
CHANGED
package/dist/tag.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/lib/utils.ts","../src/components/tag/tag.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../src/lib/utils.ts","../src/components/tag/tag.tsx"],"names":[],"mappings":"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","file":"tag.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n","\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport type { KeyboardEvent } from \"react\";\nimport { cn } from \"../../lib/utils\";\nimport type { TagProps } from \"./types\";\n\nconst tagVariants = cva(\n // Base styles\n \"inline-flex items-center justify-center rounded-full box-border relative font-medium text-sm leading-5 text-center whitespace-nowrap appearance-none focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/60 focus-visible:ring-offset-0\",\n {\n variants: {\n selected: {\n false:\n \"bg-background text-primary-foreground ring ring-primary-foreground ring-offset-0 focus-visible:bg-background focus-visible:text-primary-foreground\",\n true: \"bg-primary-foreground text-white dark:text-primary focus-visible:bg-primary-foreground focus-visible:text-white dark:focus-visible:bg-primary-foreground dark:focus-visible:text-primary\",\n },\n interactive: {\n false: null,\n true: \"cursor-pointer\",\n },\n size: {\n md: null,\n lg: null,\n },\n collapsed: {\n false: null,\n true: null,\n },\n },\n defaultVariants: {\n selected: false,\n interactive: false,\n size: \"md\",\n collapsed: false,\n },\n compoundVariants: [\n // Interactive hover states\n {\n interactive: true,\n selected: false,\n class: \"hover:ring-2 hover:ring-primary-foreground\",\n },\n {\n interactive: true,\n selected: true,\n class: \"hover:bg-primary-foreground/90\",\n },\n // Interactive active states\n {\n interactive: true,\n selected: false,\n class: \"active:ring active:ring-primary-foreground\",\n },\n {\n interactive: true,\n selected: true,\n class: \"active:bg-primary-foreground\",\n },\n // Size variants (non-collapsed)\n {\n size: \"md\",\n collapsed: false,\n class: \"px-2 py-1.5 gap-0.5\",\n },\n {\n size: \"lg\",\n collapsed: false,\n class: \"px-3 py-2.5 gap-1\",\n },\n // Collapsed size adjustments\n {\n size: \"md\",\n collapsed: true,\n class: \"p-1.5 w-8 h-8\",\n },\n {\n size: \"lg\",\n collapsed: true,\n class: \"p-2.5 w-10 h-10\",\n },\n ],\n },\n);\n\nexport function Tag({\n size = \"md\",\n selected = false,\n collapsed = false,\n children,\n leading,\n trailing,\n interactive,\n type,\n onClick,\n className = \"\",\n}: TagProps) {\n const handleClick = () => {\n if (onClick) {\n onClick();\n }\n };\n\n const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement | HTMLDivElement>) => {\n if (onClick && (event.key === \"Enter\" || event.key === \" \")) {\n event.preventDefault();\n onClick();\n }\n };\n\n const showLeading = leading && !collapsed;\n const showTrailing = trailing && !collapsed;\n\n // Explicit interactive prop takes precedence; otherwise detect from onClick\n const isInteractive = interactive ?? (typeof onClick === \"function\");\n const TagElement = isInteractive ? \"button\" : \"div\";\n\n return (\n <TagElement\n className={cn(\n tagVariants({\n size,\n selected,\n collapsed,\n interactive: isInteractive,\n }),\n className,\n )}\n onClick={handleClick}\n onKeyDown={handleKeyDown}\n type={isInteractive ? (type ?? \"button\") : undefined}\n >\n {!collapsed && (\n <>\n {showLeading && (\n <div className=\"flex h-5 w-5 shrink-0 items-center justify-center overflow-hidden text-inherit\">\n {leading}\n </div>\n )}\n <div className=\"flex items-center justify-center px-1 first:pl-0 last:pr-0\">\n {children}\n </div>\n {showTrailing && (\n <div className=\"flex h-5 w-5 shrink-0 items-center justify-center overflow-hidden text-inherit\">\n {trailing}\n </div>\n )}\n </>\n )}\n\n {collapsed && (\n <div className=\"flex h-5 w-5 shrink-0 items-center justify-center overflow-hidden text-inherit\">\n {leading || trailing}\n </div>\n )}\n </TagElement>\n );\n}\n"]}
|
package/dist/tooltip.cjs
CHANGED
|
@@ -8,37 +8,59 @@ var jsxRuntime = require('react/jsx-runtime');
|
|
|
8
8
|
function cn(...inputs) {
|
|
9
9
|
return tailwindMerge.twMerge(clsx.clsx(inputs));
|
|
10
10
|
}
|
|
11
|
-
function TooltipProvider({
|
|
12
|
-
|
|
11
|
+
function TooltipProvider({
|
|
12
|
+
delay = 0,
|
|
13
|
+
...props
|
|
14
|
+
}) {
|
|
15
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
16
|
+
tooltip.Tooltip.Provider,
|
|
17
|
+
{
|
|
18
|
+
"data-slot": "tooltip-provider",
|
|
19
|
+
delay,
|
|
20
|
+
...props
|
|
21
|
+
}
|
|
22
|
+
);
|
|
13
23
|
}
|
|
14
24
|
function Tooltip({ ...props }) {
|
|
15
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
25
|
+
return /* @__PURE__ */ jsxRuntime.jsx(tooltip.Tooltip.Root, { "data-slot": "tooltip", ...props });
|
|
16
26
|
}
|
|
17
27
|
function TooltipTrigger({ ...props }) {
|
|
18
28
|
return /* @__PURE__ */ jsxRuntime.jsx(tooltip.Tooltip.Trigger, { "data-slot": "tooltip-trigger", ...props });
|
|
19
29
|
}
|
|
20
30
|
function TooltipContent({
|
|
21
31
|
className,
|
|
32
|
+
side = "top",
|
|
33
|
+
sideOffset = 4,
|
|
34
|
+
align = "center",
|
|
35
|
+
alignOffset = 0,
|
|
22
36
|
children,
|
|
23
|
-
positionerProps,
|
|
24
37
|
...props
|
|
25
38
|
}) {
|
|
26
|
-
return /* @__PURE__ */ jsxRuntime.jsx(tooltip.Tooltip.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
27
|
-
tooltip.Tooltip.
|
|
39
|
+
return /* @__PURE__ */ jsxRuntime.jsx(tooltip.Tooltip.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
40
|
+
tooltip.Tooltip.Positioner,
|
|
28
41
|
{
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
42
|
+
align,
|
|
43
|
+
alignOffset,
|
|
44
|
+
side,
|
|
45
|
+
sideOffset,
|
|
46
|
+
className: "isolate z-50",
|
|
47
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
48
|
+
tooltip.Tooltip.Popup,
|
|
49
|
+
{
|
|
50
|
+
"data-slot": "tooltip-content",
|
|
51
|
+
className: cn(
|
|
52
|
+
"data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 bg-foreground text-background z-50 w-fit max-w-xs origin-(--transform-origin) rounded-md px-3 py-1.5 text-xs",
|
|
53
|
+
className
|
|
54
|
+
),
|
|
55
|
+
...props,
|
|
56
|
+
children: [
|
|
57
|
+
children,
|
|
58
|
+
/* @__PURE__ */ jsxRuntime.jsx(tooltip.Tooltip.Arrow, { className: "flex data-[side=bottom]:-top-[6px] data-[side=bottom]:rotate-0 data-[side=left]:right-[-13px] data-[side=left]:rotate-90 data-[side=right]:left-[-13px] data-[side=right]:-rotate-90 data-[side=top]:-bottom-[6px] data-[side=top]:rotate-180", children: /* @__PURE__ */ jsxRuntime.jsx(TooltipArrow, {}) })
|
|
59
|
+
]
|
|
60
|
+
}
|
|
61
|
+
)
|
|
40
62
|
}
|
|
41
|
-
) })
|
|
63
|
+
) });
|
|
42
64
|
}
|
|
43
65
|
var TooltipArrow = (props) => {
|
|
44
66
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
package/dist/tooltip.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/lib/utils.ts","../src/components/tooltip/tooltip.tsx"],"names":["twMerge","clsx","jsx","TooltipPrimitive","jsxs"],"mappings":";;;;;;;AAGO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAOA,qBAAA,CAAQC,SAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACCA,SAAS,
|
|
1
|
+
{"version":3,"sources":["../src/lib/utils.ts","../src/components/tooltip/tooltip.tsx"],"names":["twMerge","clsx","jsx","TooltipPrimitive","jsxs"],"mappings":";;;;;;;AAGO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAOA,qBAAA,CAAQC,SAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACCA,SAAS,eAAA,CAAgB;AAAA,EACvB,KAAA,GAAQ,CAAA;AAAA,EACR,GAAG;AACL,CAAA,EAAoC;AAClC,EAAA,uBACEC,cAAA;AAAA,IAACC,eAAA,CAAiB,QAAA;AAAA,IAAjB;AAAA,MACC,WAAA,EAAU,kBAAA;AAAA,MACV,KAAA;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,SAAS,OAAA,CAAQ,EAAE,GAAG,KAAA,EAAM,EAAgC;AAC1D,EAAA,sCAAQA,eAAA,CAAiB,IAAA,EAAjB,EAAsB,WAAA,EAAU,SAAA,EAAW,GAAG,KAAA,EAAO,CAAA;AAC/D;AAEA,SAAS,cAAA,CAAe,EAAE,GAAG,KAAA,EAAM,EAAmC;AACpE,EAAA,sCAAQA,eAAA,CAAiB,OAAA,EAAjB,EAAyB,WAAA,EAAU,iBAAA,EAAmB,GAAG,KAAA,EAAO,CAAA;AAC1E;AAEA,SAAS,cAAA,CAAe;AAAA,EACtB,SAAA;AAAA,EACA,IAAA,GAAO,KAAA;AAAA,EACP,UAAA,GAAa,CAAA;AAAA,EACb,KAAA,GAAQ,QAAA;AAAA,EACR,WAAA,GAAc,CAAA;AAAA,EACd,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAIK;AACH,EAAA,uBACED,cAAA,CAACC,eAAA,CAAiB,MAAA,EAAjB,EACC,QAAA,kBAAAD,cAAA;AAAA,IAACC,eAAA,CAAiB,UAAA;AAAA,IAAjB;AAAA,MACC,KAAA;AAAA,MACA,WAAA;AAAA,MACA,IAAA;AAAA,MACA,UAAA;AAAA,MACA,SAAA,EAAU,cAAA;AAAA,MAEV,QAAA,kBAAAC,eAAA;AAAA,QAACD,eAAA,CAAiB,KAAA;AAAA,QAAjB;AAAA,UACC,WAAA,EAAU,iBAAA;AAAA,UACV,SAAA,EAAW,EAAA;AAAA,YACT,wlBAAA;AAAA,YACA;AAAA,WACF;AAAA,UACC,GAAG,KAAA;AAAA,UAEH,QAAA,EAAA;AAAA,YAAA,QAAA;AAAA,4BACDD,cAAA,CAACC,gBAAiB,KAAA,EAAjB,EAAuB,WAAU,+OAAA,EAChC,QAAA,kBAAAD,cAAA,CAAC,gBAAa,CAAA,EAChB;AAAA;AAAA;AAAA;AACF;AAAA,GACF,EACF,CAAA;AAEJ;AAEO,IAAM,YAAA,GAAe,CAAC,KAAA,KAAuC;AAClE,EAAA,uBACEE,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAM,IAAA;AAAA,MACN,MAAA,EAAO,GAAA;AAAA,MACP,OAAA,EAAQ,sBAAA;AAAA,MACR,IAAA,EAAK,MAAA;AAAA,MACL,KAAA,EAAM,4BAAA;AAAA,MAEN,QAAA,EAAA;AAAA,wBAAAF,cAAA,CAAC,WAAM,QAAA,EAAA,eAAA,EAAa,CAAA;AAAA,wBACpBA,cAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAU,iBAAA;AAAA,YACV,CAAA,EAAE;AAAA;AAAA;AACJ;AAAA;AAAA,GACF;AAEJ","file":"tooltip.cjs","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n","\"use client\";\n\nimport { Tooltip as TooltipPrimitive } from \"@base-ui/react/tooltip\";\n\nimport { cn } from \"../../lib/utils\";\n\nfunction TooltipProvider({\n delay = 0,\n ...props\n}: TooltipPrimitive.Provider.Props) {\n return (\n <TooltipPrimitive.Provider\n data-slot=\"tooltip-provider\"\n delay={delay}\n {...props}\n />\n )\n}\n\nfunction Tooltip({ ...props }: TooltipPrimitive.Root.Props) {\n return <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n}\n\nfunction TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {\n return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />\n}\n\nfunction TooltipContent({\n className,\n side = \"top\",\n sideOffset = 4,\n align = \"center\",\n alignOffset = 0,\n children,\n ...props\n}: TooltipPrimitive.Popup.Props &\n Pick<\n TooltipPrimitive.Positioner.Props,\n \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n >) {\n return (\n <TooltipPrimitive.Portal>\n <TooltipPrimitive.Positioner\n align={align}\n alignOffset={alignOffset}\n side={side}\n sideOffset={sideOffset}\n className=\"isolate z-50\"\n >\n <TooltipPrimitive.Popup\n data-slot=\"tooltip-content\"\n className={cn(\n \"data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 bg-foreground text-background z-50 w-fit max-w-xs origin-(--transform-origin) rounded-md px-3 py-1.5 text-xs\",\n className\n )}\n {...props}\n >\n {children}\n <TooltipPrimitive.Arrow className=\"flex data-[side=bottom]:-top-[6px] data-[side=bottom]:rotate-0 data-[side=left]:right-[-13px] data-[side=left]:rotate-90 data-[side=right]:left-[-13px] data-[side=right]:-rotate-90 data-[side=top]:-bottom-[6px] data-[side=top]:rotate-180\">\n <TooltipArrow />\n </TooltipPrimitive.Arrow>\n </TooltipPrimitive.Popup>\n </TooltipPrimitive.Positioner>\n </TooltipPrimitive.Portal>\n )\n}\n\nexport const TooltipArrow = (props: React.ComponentProps<\"svg\">) => {\n return (\n <svg\n width=\"20\"\n height=\"6\"\n viewBox=\"382.134 241.548 20 6\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <title>Tooltip Arrow</title>\n <path\n className=\"fill-foreground\"\n d=\"M 382.134 247.548 C 390.116 247.548 389.506 241.548 392.134 241.548 C 394.762 241.548 394.152 247.548 402.134 247.548\"\n />\n </svg>\n );\n};\n\nexport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };\n"]}
|
package/dist/tooltip.d.cts
CHANGED
|
@@ -4,9 +4,7 @@ import { Tooltip as Tooltip$1 } from '@base-ui/react/tooltip';
|
|
|
4
4
|
declare function TooltipProvider({ delay, ...props }: Tooltip$1.Provider.Props): react_jsx_runtime.JSX.Element;
|
|
5
5
|
declare function Tooltip({ ...props }: Tooltip$1.Root.Props): react_jsx_runtime.JSX.Element;
|
|
6
6
|
declare function TooltipTrigger({ ...props }: Tooltip$1.Trigger.Props): react_jsx_runtime.JSX.Element;
|
|
7
|
-
declare function TooltipContent({ className,
|
|
8
|
-
positionerProps?: Omit<React.ComponentProps<typeof Tooltip$1.Positioner>, "children">;
|
|
9
|
-
}): react_jsx_runtime.JSX.Element;
|
|
7
|
+
declare function TooltipContent({ className, side, sideOffset, align, alignOffset, children, ...props }: Tooltip$1.Popup.Props & Pick<Tooltip$1.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">): react_jsx_runtime.JSX.Element;
|
|
10
8
|
declare const TooltipArrow: (props: React.ComponentProps<"svg">) => react_jsx_runtime.JSX.Element;
|
|
11
9
|
|
|
12
10
|
export { Tooltip, TooltipArrow, TooltipContent, TooltipProvider, TooltipTrigger };
|
package/dist/tooltip.d.ts
CHANGED
|
@@ -4,9 +4,7 @@ import { Tooltip as Tooltip$1 } from '@base-ui/react/tooltip';
|
|
|
4
4
|
declare function TooltipProvider({ delay, ...props }: Tooltip$1.Provider.Props): react_jsx_runtime.JSX.Element;
|
|
5
5
|
declare function Tooltip({ ...props }: Tooltip$1.Root.Props): react_jsx_runtime.JSX.Element;
|
|
6
6
|
declare function TooltipTrigger({ ...props }: Tooltip$1.Trigger.Props): react_jsx_runtime.JSX.Element;
|
|
7
|
-
declare function TooltipContent({ className,
|
|
8
|
-
positionerProps?: Omit<React.ComponentProps<typeof Tooltip$1.Positioner>, "children">;
|
|
9
|
-
}): react_jsx_runtime.JSX.Element;
|
|
7
|
+
declare function TooltipContent({ className, side, sideOffset, align, alignOffset, children, ...props }: Tooltip$1.Popup.Props & Pick<Tooltip$1.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">): react_jsx_runtime.JSX.Element;
|
|
10
8
|
declare const TooltipArrow: (props: React.ComponentProps<"svg">) => react_jsx_runtime.JSX.Element;
|
|
11
9
|
|
|
12
10
|
export { Tooltip, TooltipArrow, TooltipContent, TooltipProvider, TooltipTrigger };
|
package/dist/tooltip.js
CHANGED
|
@@ -6,37 +6,59 @@ import { jsx, jsxs } from 'react/jsx-runtime';
|
|
|
6
6
|
function cn(...inputs) {
|
|
7
7
|
return twMerge(clsx(inputs));
|
|
8
8
|
}
|
|
9
|
-
function TooltipProvider({
|
|
10
|
-
|
|
9
|
+
function TooltipProvider({
|
|
10
|
+
delay = 0,
|
|
11
|
+
...props
|
|
12
|
+
}) {
|
|
13
|
+
return /* @__PURE__ */ jsx(
|
|
14
|
+
Tooltip$1.Provider,
|
|
15
|
+
{
|
|
16
|
+
"data-slot": "tooltip-provider",
|
|
17
|
+
delay,
|
|
18
|
+
...props
|
|
19
|
+
}
|
|
20
|
+
);
|
|
11
21
|
}
|
|
12
22
|
function Tooltip({ ...props }) {
|
|
13
|
-
return /* @__PURE__ */ jsx(
|
|
23
|
+
return /* @__PURE__ */ jsx(Tooltip$1.Root, { "data-slot": "tooltip", ...props });
|
|
14
24
|
}
|
|
15
25
|
function TooltipTrigger({ ...props }) {
|
|
16
26
|
return /* @__PURE__ */ jsx(Tooltip$1.Trigger, { "data-slot": "tooltip-trigger", ...props });
|
|
17
27
|
}
|
|
18
28
|
function TooltipContent({
|
|
19
29
|
className,
|
|
30
|
+
side = "top",
|
|
31
|
+
sideOffset = 4,
|
|
32
|
+
align = "center",
|
|
33
|
+
alignOffset = 0,
|
|
20
34
|
children,
|
|
21
|
-
positionerProps,
|
|
22
35
|
...props
|
|
23
36
|
}) {
|
|
24
|
-
return /* @__PURE__ */ jsx(Tooltip$1.Portal, { children: /* @__PURE__ */ jsx(
|
|
25
|
-
Tooltip$1.
|
|
37
|
+
return /* @__PURE__ */ jsx(Tooltip$1.Portal, { children: /* @__PURE__ */ jsx(
|
|
38
|
+
Tooltip$1.Positioner,
|
|
26
39
|
{
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
40
|
+
align,
|
|
41
|
+
alignOffset,
|
|
42
|
+
side,
|
|
43
|
+
sideOffset,
|
|
44
|
+
className: "isolate z-50",
|
|
45
|
+
children: /* @__PURE__ */ jsxs(
|
|
46
|
+
Tooltip$1.Popup,
|
|
47
|
+
{
|
|
48
|
+
"data-slot": "tooltip-content",
|
|
49
|
+
className: cn(
|
|
50
|
+
"data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 bg-foreground text-background z-50 w-fit max-w-xs origin-(--transform-origin) rounded-md px-3 py-1.5 text-xs",
|
|
51
|
+
className
|
|
52
|
+
),
|
|
53
|
+
...props,
|
|
54
|
+
children: [
|
|
55
|
+
children,
|
|
56
|
+
/* @__PURE__ */ jsx(Tooltip$1.Arrow, { className: "flex data-[side=bottom]:-top-[6px] data-[side=bottom]:rotate-0 data-[side=left]:right-[-13px] data-[side=left]:rotate-90 data-[side=right]:left-[-13px] data-[side=right]:-rotate-90 data-[side=top]:-bottom-[6px] data-[side=top]:rotate-180", children: /* @__PURE__ */ jsx(TooltipArrow, {}) })
|
|
57
|
+
]
|
|
58
|
+
}
|
|
59
|
+
)
|
|
38
60
|
}
|
|
39
|
-
) })
|
|
61
|
+
) });
|
|
40
62
|
}
|
|
41
63
|
var TooltipArrow = (props) => {
|
|
42
64
|
return /* @__PURE__ */ jsxs(
|
package/dist/tooltip.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/lib/utils.ts","../src/components/tooltip/tooltip.tsx"],"names":["TooltipPrimitive"],"mappings":";;;;;AAGO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACCA,SAAS,
|
|
1
|
+
{"version":3,"sources":["../src/lib/utils.ts","../src/components/tooltip/tooltip.tsx"],"names":["TooltipPrimitive"],"mappings":";;;;;AAGO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACCA,SAAS,eAAA,CAAgB;AAAA,EACvB,KAAA,GAAQ,CAAA;AAAA,EACR,GAAG;AACL,CAAA,EAAoC;AAClC,EAAA,uBACE,GAAA;AAAA,IAACA,SAAA,CAAiB,QAAA;AAAA,IAAjB;AAAA,MACC,WAAA,EAAU,kBAAA;AAAA,MACV,KAAA;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,SAAS,OAAA,CAAQ,EAAE,GAAG,KAAA,EAAM,EAAgC;AAC1D,EAAA,2BAAQA,SAAA,CAAiB,IAAA,EAAjB,EAAsB,WAAA,EAAU,SAAA,EAAW,GAAG,KAAA,EAAO,CAAA;AAC/D;AAEA,SAAS,cAAA,CAAe,EAAE,GAAG,KAAA,EAAM,EAAmC;AACpE,EAAA,2BAAQA,SAAA,CAAiB,OAAA,EAAjB,EAAyB,WAAA,EAAU,iBAAA,EAAmB,GAAG,KAAA,EAAO,CAAA;AAC1E;AAEA,SAAS,cAAA,CAAe;AAAA,EACtB,SAAA;AAAA,EACA,IAAA,GAAO,KAAA;AAAA,EACP,UAAA,GAAa,CAAA;AAAA,EACb,KAAA,GAAQ,QAAA;AAAA,EACR,WAAA,GAAc,CAAA;AAAA,EACd,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAIK;AACH,EAAA,uBACE,GAAA,CAACA,SAAA,CAAiB,MAAA,EAAjB,EACC,QAAA,kBAAA,GAAA;AAAA,IAACA,SAAA,CAAiB,UAAA;AAAA,IAAjB;AAAA,MACC,KAAA;AAAA,MACA,WAAA;AAAA,MACA,IAAA;AAAA,MACA,UAAA;AAAA,MACA,SAAA,EAAU,cAAA;AAAA,MAEV,QAAA,kBAAA,IAAA;AAAA,QAACA,SAAA,CAAiB,KAAA;AAAA,QAAjB;AAAA,UACC,WAAA,EAAU,iBAAA;AAAA,UACV,SAAA,EAAW,EAAA;AAAA,YACT,wlBAAA;AAAA,YACA;AAAA,WACF;AAAA,UACC,GAAG,KAAA;AAAA,UAEH,QAAA,EAAA;AAAA,YAAA,QAAA;AAAA,4BACD,GAAA,CAACA,UAAiB,KAAA,EAAjB,EAAuB,WAAU,+OAAA,EAChC,QAAA,kBAAA,GAAA,CAAC,gBAAa,CAAA,EAChB;AAAA;AAAA;AAAA;AACF;AAAA,GACF,EACF,CAAA;AAEJ;AAEO,IAAM,YAAA,GAAe,CAAC,KAAA,KAAuC;AAClE,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAM,IAAA;AAAA,MACN,MAAA,EAAO,GAAA;AAAA,MACP,OAAA,EAAQ,sBAAA;AAAA,MACR,IAAA,EAAK,MAAA;AAAA,MACL,KAAA,EAAM,4BAAA;AAAA,MAEN,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,WAAM,QAAA,EAAA,eAAA,EAAa,CAAA;AAAA,wBACpB,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAU,iBAAA;AAAA,YACV,CAAA,EAAE;AAAA;AAAA;AACJ;AAAA;AAAA,GACF;AAEJ","file":"tooltip.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n","\"use client\";\n\nimport { Tooltip as TooltipPrimitive } from \"@base-ui/react/tooltip\";\n\nimport { cn } from \"../../lib/utils\";\n\nfunction TooltipProvider({\n delay = 0,\n ...props\n}: TooltipPrimitive.Provider.Props) {\n return (\n <TooltipPrimitive.Provider\n data-slot=\"tooltip-provider\"\n delay={delay}\n {...props}\n />\n )\n}\n\nfunction Tooltip({ ...props }: TooltipPrimitive.Root.Props) {\n return <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n}\n\nfunction TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {\n return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />\n}\n\nfunction TooltipContent({\n className,\n side = \"top\",\n sideOffset = 4,\n align = \"center\",\n alignOffset = 0,\n children,\n ...props\n}: TooltipPrimitive.Popup.Props &\n Pick<\n TooltipPrimitive.Positioner.Props,\n \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n >) {\n return (\n <TooltipPrimitive.Portal>\n <TooltipPrimitive.Positioner\n align={align}\n alignOffset={alignOffset}\n side={side}\n sideOffset={sideOffset}\n className=\"isolate z-50\"\n >\n <TooltipPrimitive.Popup\n data-slot=\"tooltip-content\"\n className={cn(\n \"data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 bg-foreground text-background z-50 w-fit max-w-xs origin-(--transform-origin) rounded-md px-3 py-1.5 text-xs\",\n className\n )}\n {...props}\n >\n {children}\n <TooltipPrimitive.Arrow className=\"flex data-[side=bottom]:-top-[6px] data-[side=bottom]:rotate-0 data-[side=left]:right-[-13px] data-[side=left]:rotate-90 data-[side=right]:left-[-13px] data-[side=right]:-rotate-90 data-[side=top]:-bottom-[6px] data-[side=top]:rotate-180\">\n <TooltipArrow />\n </TooltipPrimitive.Arrow>\n </TooltipPrimitive.Popup>\n </TooltipPrimitive.Positioner>\n </TooltipPrimitive.Portal>\n )\n}\n\nexport const TooltipArrow = (props: React.ComponentProps<\"svg\">) => {\n return (\n <svg\n width=\"20\"\n height=\"6\"\n viewBox=\"382.134 241.548 20 6\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <title>Tooltip Arrow</title>\n <path\n className=\"fill-foreground\"\n d=\"M 382.134 247.548 C 390.116 247.548 389.506 241.548 392.134 241.548 C 394.762 241.548 394.152 247.548 402.134 247.548\"\n />\n </svg>\n );\n};\n\nexport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };\n"]}
|
package/package.json
CHANGED
|
@@ -262,7 +262,7 @@
|
|
|
262
262
|
],
|
|
263
263
|
"type": "module",
|
|
264
264
|
"types": "./dist/index.d.ts",
|
|
265
|
-
"version": "0.0.
|
|
265
|
+
"version": "0.0.22",
|
|
266
266
|
"scripts": {
|
|
267
267
|
"analyze": "pnpm tsup && pnpm dlx esbuild-visualizer --metadata ./dist/metafile-esm.json --open",
|
|
268
268
|
"build": "tsup",
|