@popgrids/ui 0.0.20 → 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/banner-notification.cjs +54 -0
- package/dist/banner-notification.cjs.map +1 -0
- package/dist/banner-notification.d.cts +24 -0
- package/dist/banner-notification.d.ts +24 -0
- package/dist/banner-notification.js +52 -0
- package/dist/banner-notification.js.map +1 -0
- package/dist/button-link.cjs +35 -18
- package/dist/button-link.cjs.map +1 -1
- package/dist/button-link.d.cts +15 -3
- package/dist/button-link.d.ts +15 -3
- package/dist/button-link.js +36 -19
- package/dist/button-link.js.map +1 -1
- package/dist/button.cjs +1 -1
- package/dist/button.cjs.map +1 -1
- package/dist/button.js +1 -1
- package/dist/button.js.map +1 -1
- package/dist/dialog.cjs +439 -39
- package/dist/dialog.cjs.map +1 -1
- package/dist/dialog.d.cts +25 -11
- package/dist/dialog.d.ts +25 -11
- package/dist/dialog.js +439 -39
- 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 +329 -185
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +5 -4
- package/dist/index.d.ts +5 -4
- package/dist/index.js +329 -186
- package/dist/index.js.map +1 -1
- package/dist/input.cjs +1 -1
- package/dist/input.cjs.map +1 -1
- package/dist/input.js +1 -1
- package/dist/input.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 +7 -5
- package/dist/tag.cjs.map +1 -1
- package/dist/tag.d.cts +5 -1
- package/dist/tag.d.ts +5 -1
- package/dist/tag.js +8 -6
- package/dist/tag.js.map +1 -1
- package/dist/theme.css +4 -4
- 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 +31 -21
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
|
@@ -5,13 +5,12 @@ var clsx = require('clsx');
|
|
|
5
5
|
var tailwindMerge = require('tailwind-merge');
|
|
6
6
|
var jsxRuntime = require('react/jsx-runtime');
|
|
7
7
|
|
|
8
|
-
// src/components/tag/tag.tsx
|
|
9
8
|
function cn(...inputs) {
|
|
10
9
|
return tailwindMerge.twMerge(clsx.clsx(inputs));
|
|
11
10
|
}
|
|
12
11
|
var tagVariants = classVarianceAuthority.cva(
|
|
13
12
|
// Base styles
|
|
14
|
-
"inline-flex items-center justify-center rounded-full box-border relative
|
|
13
|
+
"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",
|
|
15
14
|
{
|
|
16
15
|
variants: {
|
|
17
16
|
selected: {
|
|
@@ -92,6 +91,8 @@ function Tag({
|
|
|
92
91
|
children,
|
|
93
92
|
leading,
|
|
94
93
|
trailing,
|
|
94
|
+
interactive,
|
|
95
|
+
type,
|
|
95
96
|
onClick,
|
|
96
97
|
className = ""
|
|
97
98
|
}) {
|
|
@@ -108,7 +109,8 @@ function Tag({
|
|
|
108
109
|
};
|
|
109
110
|
const showLeading = leading && !collapsed;
|
|
110
111
|
const showTrailing = trailing && !collapsed;
|
|
111
|
-
const
|
|
112
|
+
const isInteractive = interactive ?? typeof onClick === "function";
|
|
113
|
+
const TagElement = isInteractive ? "button" : "div";
|
|
112
114
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
113
115
|
TagElement,
|
|
114
116
|
{
|
|
@@ -117,13 +119,13 @@ function Tag({
|
|
|
117
119
|
size,
|
|
118
120
|
selected,
|
|
119
121
|
collapsed,
|
|
120
|
-
interactive:
|
|
122
|
+
interactive: isInteractive
|
|
121
123
|
}),
|
|
122
124
|
className
|
|
123
125
|
),
|
|
124
126
|
onClick: handleClick,
|
|
125
127
|
onKeyDown: handleKeyDown,
|
|
126
|
-
type:
|
|
128
|
+
type: isInteractive ? type ?? "button" : void 0,
|
|
127
129
|
children: [
|
|
128
130
|
!collapsed && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
129
131
|
showLeading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-5 w-5 shrink-0 items-center justify-center overflow-hidden text-inherit", children: leading }),
|
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":"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","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.d.cts
CHANGED
|
@@ -7,10 +7,14 @@ interface TagProps {
|
|
|
7
7
|
children: React.ReactNode;
|
|
8
8
|
leading?: React.ReactNode;
|
|
9
9
|
trailing?: React.ReactNode;
|
|
10
|
+
/** When true, renders as button (for accessibility). Omit to auto-detect from onClick. */
|
|
11
|
+
interactive?: boolean;
|
|
12
|
+
/** Button type when interactive. Defaults to "button" to avoid accidental form submission. */
|
|
13
|
+
type?: "button" | "submit" | "reset";
|
|
10
14
|
onClick?: () => void;
|
|
11
15
|
className?: string;
|
|
12
16
|
}
|
|
13
17
|
|
|
14
|
-
declare function Tag({ size, selected, collapsed, children, leading, trailing, onClick, className, }: TagProps): react_jsx_runtime.JSX.Element;
|
|
18
|
+
declare function Tag({ size, selected, collapsed, children, leading, trailing, interactive, type, onClick, className, }: TagProps): react_jsx_runtime.JSX.Element;
|
|
15
19
|
|
|
16
20
|
export { Tag, type TagProps };
|
package/dist/tag.d.ts
CHANGED
|
@@ -7,10 +7,14 @@ interface TagProps {
|
|
|
7
7
|
children: React.ReactNode;
|
|
8
8
|
leading?: React.ReactNode;
|
|
9
9
|
trailing?: React.ReactNode;
|
|
10
|
+
/** When true, renders as button (for accessibility). Omit to auto-detect from onClick. */
|
|
11
|
+
interactive?: boolean;
|
|
12
|
+
/** Button type when interactive. Defaults to "button" to avoid accidental form submission. */
|
|
13
|
+
type?: "button" | "submit" | "reset";
|
|
10
14
|
onClick?: () => void;
|
|
11
15
|
className?: string;
|
|
12
16
|
}
|
|
13
17
|
|
|
14
|
-
declare function Tag({ size, selected, collapsed, children, leading, trailing, onClick, className, }: TagProps): react_jsx_runtime.JSX.Element;
|
|
18
|
+
declare function Tag({ size, selected, collapsed, children, leading, trailing, interactive, type, onClick, className, }: TagProps): react_jsx_runtime.JSX.Element;
|
|
15
19
|
|
|
16
20
|
export { Tag, type TagProps };
|
package/dist/tag.js
CHANGED
|
@@ -1,15 +1,14 @@
|
|
|
1
1
|
import { cva } from 'class-variance-authority';
|
|
2
2
|
import { clsx } from 'clsx';
|
|
3
3
|
import { twMerge } from 'tailwind-merge';
|
|
4
|
-
import { jsxs,
|
|
4
|
+
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
|
|
5
5
|
|
|
6
|
-
// src/components/tag/tag.tsx
|
|
7
6
|
function cn(...inputs) {
|
|
8
7
|
return twMerge(clsx(inputs));
|
|
9
8
|
}
|
|
10
9
|
var tagVariants = cva(
|
|
11
10
|
// Base styles
|
|
12
|
-
"inline-flex items-center justify-center rounded-full box-border relative
|
|
11
|
+
"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",
|
|
13
12
|
{
|
|
14
13
|
variants: {
|
|
15
14
|
selected: {
|
|
@@ -90,6 +89,8 @@ function Tag({
|
|
|
90
89
|
children,
|
|
91
90
|
leading,
|
|
92
91
|
trailing,
|
|
92
|
+
interactive,
|
|
93
|
+
type,
|
|
93
94
|
onClick,
|
|
94
95
|
className = ""
|
|
95
96
|
}) {
|
|
@@ -106,7 +107,8 @@ function Tag({
|
|
|
106
107
|
};
|
|
107
108
|
const showLeading = leading && !collapsed;
|
|
108
109
|
const showTrailing = trailing && !collapsed;
|
|
109
|
-
const
|
|
110
|
+
const isInteractive = interactive ?? typeof onClick === "function";
|
|
111
|
+
const TagElement = isInteractive ? "button" : "div";
|
|
110
112
|
return /* @__PURE__ */ jsxs(
|
|
111
113
|
TagElement,
|
|
112
114
|
{
|
|
@@ -115,13 +117,13 @@ function Tag({
|
|
|
115
117
|
size,
|
|
116
118
|
selected,
|
|
117
119
|
collapsed,
|
|
118
|
-
interactive:
|
|
120
|
+
interactive: isInteractive
|
|
119
121
|
}),
|
|
120
122
|
className
|
|
121
123
|
),
|
|
122
124
|
onClick: handleClick,
|
|
123
125
|
onKeyDown: handleKeyDown,
|
|
124
|
-
type:
|
|
126
|
+
type: isInteractive ? type ?? "button" : void 0,
|
|
125
127
|
children: [
|
|
126
128
|
!collapsed && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
127
129
|
showLeading && /* @__PURE__ */ jsx("div", { className: "flex h-5 w-5 shrink-0 items-center justify-center overflow-hidden text-inherit", children: leading }),
|
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/theme.css
CHANGED
|
@@ -27,10 +27,10 @@
|
|
|
27
27
|
--muted-foreground: oklch(0.48 0.007 255.43);
|
|
28
28
|
--accent: oklch(0.97 0 0);
|
|
29
29
|
--accent-foreground: oklch(0.205 0 0);
|
|
30
|
-
--destructive: var(--color-error-
|
|
30
|
+
--destructive: var(--color-error-600);
|
|
31
31
|
--border: oklch(0.1101 0.0763 264.05 / 10.2%);
|
|
32
32
|
--input: oklch(0.922 0 0);
|
|
33
|
-
--ring: oklch(
|
|
33
|
+
--ring: oklch(62.3% 0.214 259.815);
|
|
34
34
|
--chart-1: oklch(0.646 0.222 41.116);
|
|
35
35
|
--chart-2: oklch(0.6 0.118 184.704);
|
|
36
36
|
--chart-3: oklch(0.398 0.07 227.392);
|
|
@@ -61,10 +61,10 @@
|
|
|
61
61
|
--muted-foreground: oklch(0.66 0.006 255.43);
|
|
62
62
|
--accent: oklch(0.269 0 0);
|
|
63
63
|
--accent-foreground: oklch(0.985 0 0);
|
|
64
|
-
--destructive: var(--color-error-
|
|
64
|
+
--destructive: var(--color-error-400);
|
|
65
65
|
--border: oklch(1 0 0 / 10%);
|
|
66
66
|
--input: oklch(1 0 0 / 15%);
|
|
67
|
-
--ring: oklch(
|
|
67
|
+
--ring: oklch(62.3% 0.214 259.815);
|
|
68
68
|
--chart-1: oklch(0.488 0.243 264.376);
|
|
69
69
|
--chart-2: oklch(0.696 0.17 162.48);
|
|
70
70
|
--chart-3: oklch(0.769 0.188 70.08);
|
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(
|