@fuf-stack/pixels 1.1.2 → 1.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Button/index.cjs +2 -2
- package/dist/Button/index.d.cts +2 -2
- package/dist/Button/index.d.ts +2 -2
- package/dist/Button/index.js +1 -1
- package/dist/{Button-rsBnawn1.d.cts → Button-CkMcZvji.d.cts} +12 -5
- package/dist/{Button-rsBnawn1.d.ts → Button-CkMcZvji.d.ts} +12 -5
- package/dist/Json/index.cjs +3 -3
- package/dist/Json/index.js +2 -2
- package/dist/Menu/index.cjs +2 -2
- package/dist/Menu/index.d.cts +5 -2
- package/dist/Menu/index.d.ts +5 -2
- package/dist/Menu/index.js +1 -1
- package/dist/Menu-DbeqxeL0.d.cts +98 -0
- package/dist/Menu-DbeqxeL0.d.ts +98 -0
- package/dist/Popover/index.cjs +2 -2
- package/dist/Popover/index.d.cts +3 -4
- package/dist/Popover/index.d.ts +3 -4
- package/dist/Popover/index.js +1 -1
- package/dist/{Popover-D6Qv56ms.d.ts → Popover-BsdcKPgm.d.cts} +2 -2
- package/dist/{Popover-BUKzm3MQ.d.cts → Popover-BsdcKPgm.d.ts} +2 -2
- package/dist/{chunk-WZZMB5CI.cjs → chunk-3Y7P46WT.cjs} +1 -1
- package/dist/chunk-3Y7P46WT.cjs.map +1 -0
- package/dist/{chunk-7QUYJEGU.js → chunk-HFW4JP5W.js} +1 -1
- package/dist/chunk-HFW4JP5W.js.map +1 -0
- package/dist/{chunk-4LMQVFV7.js → chunk-HOWDEBJG.js} +8 -4
- package/dist/chunk-HOWDEBJG.js.map +1 -0
- package/dist/{chunk-2OJHNNCU.cjs → chunk-IPALTJVF.cjs} +3 -3
- package/dist/{chunk-2OJHNNCU.cjs.map → chunk-IPALTJVF.cjs.map} +1 -1
- package/dist/{chunk-BTQB4EZC.js → chunk-N4U7OJOM.js} +2 -2
- package/dist/{chunk-PZL3LRGY.cjs → chunk-NNWXSPVB.cjs} +7 -3
- package/dist/chunk-NNWXSPVB.cjs.map +1 -0
- package/dist/chunk-WFPRB4JT.js +115 -0
- package/dist/chunk-WFPRB4JT.js.map +1 -0
- package/dist/chunk-WFR7OUY7.cjs +115 -0
- package/dist/chunk-WFR7OUY7.cjs.map +1 -0
- package/dist/index.cjs +5 -5
- package/dist/index.d.cts +3 -3
- package/dist/index.d.ts +3 -3
- package/dist/index.js +4 -4
- package/package.json +1 -1
- package/dist/Menu-DYi8oagz.d.cts +0 -56
- package/dist/Menu-DYi8oagz.d.ts +0 -56
- package/dist/chunk-4LMQVFV7.js.map +0 -1
- package/dist/chunk-7QUYJEGU.js.map +0 -1
- package/dist/chunk-OP5W7BXY.js +0 -81
- package/dist/chunk-OP5W7BXY.js.map +0 -1
- package/dist/chunk-PZL3LRGY.cjs.map +0 -1
- package/dist/chunk-WZZMB5CI.cjs.map +0 -1
- package/dist/chunk-XHOAZB2Z.cjs +0 -81
- package/dist/chunk-XHOAZB2Z.cjs.map +0 -1
- /package/dist/{chunk-BTQB4EZC.js.map → chunk-N4U7OJOM.js.map} +0 -0
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import {
|
|
2
2
|
Button_default
|
|
3
|
-
} from "./chunk-
|
|
3
|
+
} from "./chunk-HOWDEBJG.js";
|
|
4
4
|
import {
|
|
5
5
|
__commonJS,
|
|
6
6
|
__toESM
|
|
@@ -2782,4 +2782,4 @@ export {
|
|
|
2782
2782
|
Json_default,
|
|
2783
2783
|
Json_default2
|
|
2784
2784
|
};
|
|
2785
|
-
//# sourceMappingURL=chunk-
|
|
2785
|
+
//# sourceMappingURL=chunk-N4U7OJOM.js.map
|
|
@@ -43,7 +43,9 @@ var LoadingSpinner_default = () => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
|
|
|
43
43
|
// src/Button/Button.tsx
|
|
44
44
|
|
|
45
45
|
var buttonVariants = _pixelutils.tv.call(void 0, {
|
|
46
|
-
|
|
46
|
+
slots: {
|
|
47
|
+
base: ""
|
|
48
|
+
},
|
|
47
49
|
variants: {
|
|
48
50
|
color: _chunkD4TLDLEXcjs.__spreadValues.call(void 0, {
|
|
49
51
|
// see: https://github.com/heroui-inc/heroui/blob/canary/packages/core/theme/src/components/button.ts
|
|
@@ -119,11 +121,13 @@ var Button = ({
|
|
|
119
121
|
type = void 0,
|
|
120
122
|
variant = "solid"
|
|
121
123
|
}) => {
|
|
124
|
+
const variants = buttonVariants({ color, variant, size });
|
|
125
|
+
const classNames = _pixelutils.variantsToClassNames.call(void 0, variants, className, "base");
|
|
122
126
|
return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
|
|
123
127
|
_button.Button,
|
|
124
128
|
{
|
|
125
129
|
"aria-label": ariaLabel,
|
|
126
|
-
className:
|
|
130
|
+
className: classNames.base,
|
|
127
131
|
color,
|
|
128
132
|
"data-testid": testId,
|
|
129
133
|
disableAnimation,
|
|
@@ -154,4 +158,4 @@ var Button_default2 = Button_default;
|
|
|
154
158
|
|
|
155
159
|
|
|
156
160
|
exports.buttonVariants = buttonVariants; exports.Button_default = Button_default; exports.Button_default2 = Button_default2;
|
|
157
|
-
//# sourceMappingURL=chunk-
|
|
161
|
+
//# sourceMappingURL=chunk-NNWXSPVB.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-NNWXSPVB.cjs","../src/Button/Button.tsx","../src/Button/subcomponents/LoadingSpinner.tsx","../src/Button/index.ts"],"names":["jsxs","jsx","Button_default"],"mappings":"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","file":"/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-NNWXSPVB.cjs","sourcesContent":[null,"import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ButtonProps as HeroButtonProps } from '@heroui/button';\nimport type { ReactNode } from 'react';\n\nimport { Button as HeroButton } from '@heroui/button';\nimport { button as heroButtonVariants } from '@heroui/theme';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport LoadingSpinner from './subcomponents/LoadingSpinner';\n\nexport const buttonVariants = tv({\n slots: {\n base: '',\n },\n variants: {\n color: {\n // see: https://github.com/heroui-inc/heroui/blob/canary/packages/core/theme/src/components/button.ts\n info: '',\n ...heroButtonVariants.variants.color,\n },\n variant: heroButtonVariants.variants.variant,\n size: heroButtonVariants.variants.size,\n },\n compoundVariants: [\n // white text on solid / shadow success button\n {\n color: 'success',\n variant: ['solid', 'shadow'],\n class: 'text-white',\n },\n // white text on solid / shadow warning button\n {\n color: 'warning',\n variant: ['solid', 'shadow'],\n class: 'text-white',\n },\n {\n color: 'info',\n variant: 'solid',\n class: 'bg-info text-info-foreground',\n },\n {\n color: 'info',\n variant: 'shadow',\n class: 'text-info-foreground\" bg-info shadow-info/40 shadow-lg',\n },\n {\n color: 'info',\n variant: 'bordered',\n class: 'border-medium border-info text-info bg-transparent',\n },\n {\n color: 'info',\n variant: 'flat',\n class: 'bg-info/20 text-info-600',\n },\n {\n color: 'info',\n variant: 'faded',\n class: 'border-default bg-default-100 text-info',\n },\n {\n color: 'info',\n variant: 'light',\n class: 'text-info data-[hover=true]:bg-info-100 bg-transparent',\n },\n {\n color: 'info',\n variant: 'ghost',\n class:\n 'border-info text-info data-[hover=true]:!bg-info data-[hover=true]:!text-info-foreground',\n },\n ],\n});\n\ntype VariantProps = TVProps<typeof buttonVariants>;\ntype ClassName = TVClassName<typeof buttonVariants>;\n\nexport interface ButtonProps extends VariantProps {\n /** sets HTML aria-label attribute */\n ariaLabel?: string;\n /** content of the button */\n children?: ReactNode;\n /** CSS class name */\n className?: ClassName;\n /** color of the button */\n color?: HeroButtonProps['color'];\n /** disables the button */\n disabled?: boolean;\n /** disables all animations */\n disableAnimation?: boolean;\n /** shows loading animation */\n loading?: boolean;\n /** optional icon */\n icon?: ReactNode;\n /** click event handler */\n onClick?: HeroButtonProps['onPress'];\n /** border radius size */\n radius?: HeroButtonProps['radius'];\n /** enable ripple animation effect on click */\n ripple?: boolean;\n /** size options */\n size?: HeroButtonProps['size'];\n /** HTML data-testid attribute used in e2e tests */\n testId?: string;\n /** HTML button type attribute */\n type?: 'button' | 'submit' | 'reset' | undefined;\n /** visual style variant */\n variant?: HeroButtonProps['variant'];\n}\n\n/**\n * Button component based on [HeroUI Button](https://www.heroui.com//docs/components/button)\n */\nconst Button = ({\n ariaLabel = undefined,\n children = undefined,\n className = undefined,\n color = 'default',\n disableAnimation = false,\n disabled = false,\n icon = undefined,\n loading = false,\n onClick = undefined,\n radius = undefined,\n ripple = false,\n size = undefined,\n testId = undefined,\n type = undefined,\n variant = 'solid',\n}: ButtonProps) => {\n // classNames from slots\n const variants = buttonVariants({ color, variant, size });\n const classNames = variantsToClassNames(variants, className, 'base');\n\n return (\n <HeroButton\n aria-label={ariaLabel}\n className={classNames.base}\n color={color}\n data-testid={testId}\n disableAnimation={disableAnimation}\n disableRipple={disableAnimation || !ripple}\n isDisabled={disabled}\n isIconOnly={!!(icon && !children)}\n isLoading={loading}\n onPress={onClick}\n radius={radius}\n size={size}\n spinner={<LoadingSpinner />}\n type={type}\n variant={variant}\n >\n {icon}\n {children}\n </HeroButton>\n );\n};\n\nexport default Button;\n","/**\n * svg loading spinner for button\n * @see https://www.heroui.com//docs/components/button#loading\n * */\nexport default () => (\n <svg\n className=\"h-5 w-5 animate-spin text-current\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <circle\n className=\"opacity-25\"\n cx=\"12\"\n cy=\"12\"\n r=\"10\"\n stroke=\"currentColor\"\n strokeWidth=\"4\"\n />\n <path\n className=\"opacity-75\"\n d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n fill=\"currentColor\"\n />\n </svg>\n);\n","import Button, { buttonVariants } from './Button';\n\nexport type { ButtonProps } from './Button';\n\nexport { Button, buttonVariants };\n\nexport default Button;\n"]}
|
|
@@ -0,0 +1,115 @@
|
|
|
1
|
+
import {
|
|
2
|
+
__spreadProps,
|
|
3
|
+
__spreadValues
|
|
4
|
+
} from "./chunk-J7N2552D.js";
|
|
5
|
+
|
|
6
|
+
// src/Menu/Menu.tsx
|
|
7
|
+
import { FaEllipsisVertical } from "react-icons/fa6";
|
|
8
|
+
import { Button } from "@heroui/button";
|
|
9
|
+
import {
|
|
10
|
+
Dropdown as HeroDropdown,
|
|
11
|
+
DropdownItem as HeroDropdownItem,
|
|
12
|
+
DropdownMenu as HeroDropdownMenu,
|
|
13
|
+
DropdownSection as HeroDropdownSection,
|
|
14
|
+
DropdownTrigger as HeroDropdownTrigger
|
|
15
|
+
} from "@heroui/dropdown";
|
|
16
|
+
import { cn, tv, variantsToClassNames } from "@fuf-stack/pixel-utils";
|
|
17
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
18
|
+
var menuVariants = tv({
|
|
19
|
+
slots: {
|
|
20
|
+
item: "",
|
|
21
|
+
trigger: ""
|
|
22
|
+
}
|
|
23
|
+
});
|
|
24
|
+
var getDisabledKeys = (items) => {
|
|
25
|
+
return items.map((item) => typeof (item == null ? void 0 : item.items) === "undefined" ? item : item.items).flat().filter((item) => {
|
|
26
|
+
return Object.hasOwn(item, "disabled") && item.disabled === true;
|
|
27
|
+
}).map((item) => item.key);
|
|
28
|
+
};
|
|
29
|
+
var renderMenuItem = (item, itemClassName) => /* @__PURE__ */ jsx(
|
|
30
|
+
HeroDropdownItem,
|
|
31
|
+
{
|
|
32
|
+
className: cn(itemClassName, item.className),
|
|
33
|
+
"data-testid": item.testId || item.key,
|
|
34
|
+
description: item.description,
|
|
35
|
+
onPress: item.onClick,
|
|
36
|
+
startContent: item.icon,
|
|
37
|
+
children: item.label
|
|
38
|
+
},
|
|
39
|
+
item.key
|
|
40
|
+
);
|
|
41
|
+
var Menu = ({
|
|
42
|
+
ariaLabel = void 0,
|
|
43
|
+
children = null,
|
|
44
|
+
className: _className = void 0,
|
|
45
|
+
isDisabled = false,
|
|
46
|
+
items,
|
|
47
|
+
onAction = void 0,
|
|
48
|
+
placement = void 0,
|
|
49
|
+
testId = void 0,
|
|
50
|
+
triggerButtonProps = void 0
|
|
51
|
+
}) => {
|
|
52
|
+
const variants = menuVariants();
|
|
53
|
+
const className = variantsToClassNames(variants, _className, "trigger");
|
|
54
|
+
let triggerButton = /* @__PURE__ */ jsx("button", { type: "button", children });
|
|
55
|
+
if (!children) {
|
|
56
|
+
triggerButton = /* @__PURE__ */ jsx(
|
|
57
|
+
Button,
|
|
58
|
+
__spreadProps(__spreadValues({
|
|
59
|
+
className: cn("min-w-0", className.trigger),
|
|
60
|
+
size: "sm",
|
|
61
|
+
variant: "flat"
|
|
62
|
+
}, triggerButtonProps), {
|
|
63
|
+
children: /* @__PURE__ */ jsx(FaEllipsisVertical, {})
|
|
64
|
+
})
|
|
65
|
+
);
|
|
66
|
+
} else if (triggerButtonProps) {
|
|
67
|
+
triggerButton = // eslint-disable-next-line react/jsx-props-no-spreading
|
|
68
|
+
/* @__PURE__ */ jsx(Button, __spreadProps(__spreadValues({ className: className.trigger }, triggerButtonProps), { children }));
|
|
69
|
+
}
|
|
70
|
+
return /* @__PURE__ */ jsxs(
|
|
71
|
+
HeroDropdown,
|
|
72
|
+
{
|
|
73
|
+
"aria-label": ariaLabel,
|
|
74
|
+
isDisabled,
|
|
75
|
+
placement,
|
|
76
|
+
children: [
|
|
77
|
+
/* @__PURE__ */ jsx(HeroDropdownTrigger, { "data-testid": testId, children: triggerButton }),
|
|
78
|
+
/* @__PURE__ */ jsx(
|
|
79
|
+
HeroDropdownMenu,
|
|
80
|
+
{
|
|
81
|
+
items,
|
|
82
|
+
disabledKeys: getDisabledKeys(items),
|
|
83
|
+
onAction,
|
|
84
|
+
children: (item) => {
|
|
85
|
+
if ("items" in item) {
|
|
86
|
+
return /* @__PURE__ */ jsx(
|
|
87
|
+
HeroDropdownSection,
|
|
88
|
+
{
|
|
89
|
+
items: item.items,
|
|
90
|
+
title: item.label,
|
|
91
|
+
children: (sectionItem) => {
|
|
92
|
+
return renderMenuItem(sectionItem, className.item);
|
|
93
|
+
}
|
|
94
|
+
},
|
|
95
|
+
item.key
|
|
96
|
+
);
|
|
97
|
+
}
|
|
98
|
+
return renderMenuItem(item, className.item);
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
)
|
|
102
|
+
]
|
|
103
|
+
}
|
|
104
|
+
);
|
|
105
|
+
};
|
|
106
|
+
var Menu_default = Menu;
|
|
107
|
+
|
|
108
|
+
// src/Menu/index.ts
|
|
109
|
+
var Menu_default2 = Menu_default;
|
|
110
|
+
|
|
111
|
+
export {
|
|
112
|
+
Menu_default,
|
|
113
|
+
Menu_default2
|
|
114
|
+
};
|
|
115
|
+
//# sourceMappingURL=chunk-WFPRB4JT.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/Menu/Menu.tsx","../src/Menu/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ButtonProps } from '@heroui/button';\nimport type {\n DropdownItemProps as HeroDropdownItemProps,\n DropdownProps as HeroDropdownProps,\n DropdownSectionProps as HeroDropdownSectionProps,\n} from '@heroui/dropdown';\nimport type { Key, ReactNode } from 'react';\n\nimport { FaEllipsisVertical } from 'react-icons/fa6';\n\nimport { Button } from '@heroui/button';\nimport {\n Dropdown as HeroDropdown,\n DropdownItem as HeroDropdownItem,\n DropdownMenu as HeroDropdownMenu,\n DropdownSection as HeroDropdownSection,\n DropdownTrigger as HeroDropdownTrigger,\n} from '@heroui/dropdown';\n\nimport { cn, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\n/**\n * Menu item type\n */\nexport interface MenuItem {\n /** unique identifier */\n key: string;\n /** CSS class name */\n className?: string;\n /** additional description shown under the label */\n description?: string;\n /** disables the menu item */\n disabled?: boolean;\n /** menu item icon */\n icon?: ReactNode;\n /** menu item name */\n label: ReactNode;\n /** click event handler */\n onClick?: HeroDropdownItemProps['onPress'];\n /** e2e test identifier */\n testId?: string;\n}\n\n/**\n * Menu section type\n */\nexport interface MenuSection {\n /** unique identifier */\n key: string;\n /** section label */\n label: ReactNode;\n /** section items (array of MenuItem) */\n items: MenuItem[];\n}\n\n// menu styling variants\nexport const menuVariants = tv({\n slots: {\n item: '',\n trigger: '',\n },\n});\n\ntype VariantProps = TVProps<typeof menuVariants>;\ntype ClassName = TVClassName<typeof menuVariants>;\n\nexport interface MenuProps extends VariantProps {\n /** sets HTML aria-label attribute */\n ariaLabel?: string;\n /** child components */\n children?: ReactNode;\n /** CSS class name */\n className?: ClassName;\n /** menu item structure */\n items: (MenuSection | MenuItem)[];\n /** disable menu trigger */\n isDisabled?: boolean;\n /** placement of the menu */\n placement?: HeroDropdownProps['placement'];\n /** called if item is selected */\n onAction?: (key: Key) => void;\n /** HTML data-testid attribute used in e2e tests */\n testId?: string;\n /** When defined a Button will be rendered as trigger (with provided props) instead of unstyled html button */\n triggerButtonProps?: Pick<\n ButtonProps,\n | 'aria-label'\n | 'className'\n | 'color'\n | 'disableAnimation'\n | 'disabled'\n | 'size'\n | 'variant'\n >;\n}\n\n/** returns String[] of disabled items/keys */\nconst getDisabledKeys = (items: (MenuSection | MenuItem)[]) => {\n return (\n items\n // @ts-expect-error typing issue with MenuSection | MenuItem\n .map((item) => (typeof item?.items === 'undefined' ? item : item.items))\n .flat<MenuItem[]>()\n .filter((item) => {\n return Object.hasOwn(item, 'disabled') && item.disabled === true;\n })\n .map((item) => item.key)\n );\n};\n\nconst renderMenuItem = (item: MenuItem, itemClassName?: string) => (\n <HeroDropdownItem\n className={cn(itemClassName, item.className)}\n data-testid={item.testId || item.key}\n description={item.description}\n key={item.key}\n onPress={item.onClick}\n startContent={item.icon}\n >\n {item.label}\n </HeroDropdownItem>\n);\n\n/**\n * Dropdown menu component based on [HeroUI Dropdown](https://www.heroui.com//docs/components/dropdown)\n */\nconst Menu = ({\n ariaLabel = undefined,\n children = null,\n className: _className = undefined,\n isDisabled = false,\n items,\n onAction = undefined,\n placement = undefined,\n testId = undefined,\n triggerButtonProps = undefined,\n}: MenuProps) => {\n // className from slots\n const variants = menuVariants();\n const className = variantsToClassNames(variants, _className, 'trigger');\n\n // determine trigger button variant\n let triggerButton = <button type=\"button\">{children}</button>;\n if (!children) {\n // default to ellipsis icon when no children are provided\n triggerButton = (\n <Button\n className={cn('min-w-0', className.trigger)}\n size=\"sm\"\n variant=\"flat\"\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...triggerButtonProps}\n >\n <FaEllipsisVertical />\n </Button>\n );\n } else if (triggerButtonProps) {\n // use provided triggerButtonProps with hero button\n triggerButton = (\n // eslint-disable-next-line react/jsx-props-no-spreading\n <Button className={className.trigger} {...triggerButtonProps}>\n {children}\n </Button>\n );\n }\n\n return (\n <HeroDropdown\n aria-label={ariaLabel}\n isDisabled={isDisabled}\n placement={placement}\n >\n <HeroDropdownTrigger data-testid={testId}>\n {/* NOTE: type and aria properties are injected by HeroDropdownTrigger */}\n {triggerButton}\n </HeroDropdownTrigger>\n <HeroDropdownMenu\n items={items}\n disabledKeys={getDisabledKeys(items)}\n onAction={onAction}\n >\n {(item) => {\n if ('items' in item) {\n return (\n <HeroDropdownSection\n items={item.items}\n title={item.label as HeroDropdownSectionProps['title']}\n key={item.key}\n >\n {(sectionItem) => {\n return renderMenuItem(sectionItem, className.item);\n }}\n </HeroDropdownSection>\n );\n }\n return renderMenuItem(item, className.item);\n }}\n </HeroDropdownMenu>\n </HeroDropdown>\n );\n};\n\nexport default Menu;\n","import Menu from './Menu';\n\nexport type { MenuProps, MenuItem, MenuSection } from './Menu';\n\nexport { Menu };\n\nexport default Menu;\n"],"mappings":";;;;;;AASA,SAAS,0BAA0B;AAEnC,SAAS,cAAc;AACvB;AAAA,EACE,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,EAChB,mBAAmB;AAAA,EACnB,mBAAmB;AAAA,OACd;AAEP,SAAS,IAAI,IAAI,4BAA4B;AA4F3C,cAwDE,YAxDF;AAvDK,IAAM,eAAe,GAAG;AAAA,EAC7B,OAAO;AAAA,IACL,MAAM;AAAA,IACN,SAAS;AAAA,EACX;AACF,CAAC;AAoCD,IAAM,kBAAkB,CAAC,UAAsC;AAC7D,SACE,MAEG,IAAI,CAAC,SAAU,QAAO,6BAAM,WAAU,cAAc,OAAO,KAAK,KAAM,EACtE,KAAiB,EACjB,OAAO,CAAC,SAAS;AAChB,WAAO,OAAO,OAAO,MAAM,UAAU,KAAK,KAAK,aAAa;AAAA,EAC9D,CAAC,EACA,IAAI,CAAC,SAAS,KAAK,GAAG;AAE7B;AAEA,IAAM,iBAAiB,CAAC,MAAgB,kBACtC;AAAA,EAAC;AAAA;AAAA,IACC,WAAW,GAAG,eAAe,KAAK,SAAS;AAAA,IAC3C,eAAa,KAAK,UAAU,KAAK;AAAA,IACjC,aAAa,KAAK;AAAA,IAElB,SAAS,KAAK;AAAA,IACd,cAAc,KAAK;AAAA,IAElB,eAAK;AAAA;AAAA,EAJD,KAAK;AAKZ;AAMF,IAAM,OAAO,CAAC;AAAA,EACZ,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,WAAW,aAAa;AAAA,EACxB,aAAa;AAAA,EACb;AAAA,EACA,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,qBAAqB;AACvB,MAAiB;AAEf,QAAM,WAAW,aAAa;AAC9B,QAAM,YAAY,qBAAqB,UAAU,YAAY,SAAS;AAGtE,MAAI,gBAAgB,oBAAC,YAAO,MAAK,UAAU,UAAS;AACpD,MAAI,CAAC,UAAU;AAEb,oBACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,GAAG,WAAW,UAAU,OAAO;AAAA,QAC1C,MAAK;AAAA,QACL,SAAQ;AAAA,SAEJ,qBALL;AAAA,QAOC,8BAAC,sBAAmB;AAAA;AAAA,IACtB;AAAA,EAEJ,WAAW,oBAAoB;AAE7B;AAAA,IAEE,oBAAC,uCAAO,WAAW,UAAU,WAAa,qBAAzC,EACE,WACH;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAY;AAAA,MACZ;AAAA,MACA;AAAA,MAEA;AAAA,4BAAC,uBAAoB,eAAa,QAE/B,yBACH;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,cAAc,gBAAgB,KAAK;AAAA,YACnC;AAAA,YAEC,WAAC,SAAS;AACT,kBAAI,WAAW,MAAM;AACnB,uBACE;AAAA,kBAAC;AAAA;AAAA,oBACC,OAAO,KAAK;AAAA,oBACZ,OAAO,KAAK;AAAA,oBAGX,WAAC,gBAAgB;AAChB,6BAAO,eAAe,aAAa,UAAU,IAAI;AAAA,oBACnD;AAAA;AAAA,kBAJK,KAAK;AAAA,gBAKZ;AAAA,cAEJ;AACA,qBAAO,eAAe,MAAM,UAAU,IAAI;AAAA,YAC5C;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,eAAQ;;;ACrMf,IAAOA,gBAAQ;","names":["Menu_default"]}
|
|
@@ -0,0 +1,115 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports, "__esModule", {value: true});
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
var _chunkD4TLDLEXcjs = require('./chunk-D4TLDLEX.cjs');
|
|
5
|
+
|
|
6
|
+
// src/Menu/Menu.tsx
|
|
7
|
+
var _fa6 = require('react-icons/fa6');
|
|
8
|
+
var _button = require('@heroui/button');
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
var _dropdown = require('@heroui/dropdown');
|
|
16
|
+
var _pixelutils = require('@fuf-stack/pixel-utils');
|
|
17
|
+
var _jsxruntime = require('react/jsx-runtime');
|
|
18
|
+
var menuVariants = _pixelutils.tv.call(void 0, {
|
|
19
|
+
slots: {
|
|
20
|
+
item: "",
|
|
21
|
+
trigger: ""
|
|
22
|
+
}
|
|
23
|
+
});
|
|
24
|
+
var getDisabledKeys = (items) => {
|
|
25
|
+
return items.map((item) => typeof (item == null ? void 0 : item.items) === "undefined" ? item : item.items).flat().filter((item) => {
|
|
26
|
+
return Object.hasOwn(item, "disabled") && item.disabled === true;
|
|
27
|
+
}).map((item) => item.key);
|
|
28
|
+
};
|
|
29
|
+
var renderMenuItem = (item, itemClassName) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
30
|
+
_dropdown.DropdownItem,
|
|
31
|
+
{
|
|
32
|
+
className: _pixelutils.cn.call(void 0, itemClassName, item.className),
|
|
33
|
+
"data-testid": item.testId || item.key,
|
|
34
|
+
description: item.description,
|
|
35
|
+
onPress: item.onClick,
|
|
36
|
+
startContent: item.icon,
|
|
37
|
+
children: item.label
|
|
38
|
+
},
|
|
39
|
+
item.key
|
|
40
|
+
);
|
|
41
|
+
var Menu = ({
|
|
42
|
+
ariaLabel = void 0,
|
|
43
|
+
children = null,
|
|
44
|
+
className: _className = void 0,
|
|
45
|
+
isDisabled = false,
|
|
46
|
+
items,
|
|
47
|
+
onAction = void 0,
|
|
48
|
+
placement = void 0,
|
|
49
|
+
testId = void 0,
|
|
50
|
+
triggerButtonProps = void 0
|
|
51
|
+
}) => {
|
|
52
|
+
const variants = menuVariants();
|
|
53
|
+
const className = _pixelutils.variantsToClassNames.call(void 0, variants, _className, "trigger");
|
|
54
|
+
let triggerButton = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "button", { type: "button", children });
|
|
55
|
+
if (!children) {
|
|
56
|
+
triggerButton = /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
57
|
+
_button.Button,
|
|
58
|
+
_chunkD4TLDLEXcjs.__spreadProps.call(void 0, _chunkD4TLDLEXcjs.__spreadValues.call(void 0, {
|
|
59
|
+
className: _pixelutils.cn.call(void 0, "min-w-0", className.trigger),
|
|
60
|
+
size: "sm",
|
|
61
|
+
variant: "flat"
|
|
62
|
+
}, triggerButtonProps), {
|
|
63
|
+
children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _fa6.FaEllipsisVertical, {})
|
|
64
|
+
})
|
|
65
|
+
);
|
|
66
|
+
} else if (triggerButtonProps) {
|
|
67
|
+
triggerButton = // eslint-disable-next-line react/jsx-props-no-spreading
|
|
68
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _button.Button, _chunkD4TLDLEXcjs.__spreadProps.call(void 0, _chunkD4TLDLEXcjs.__spreadValues.call(void 0, { className: className.trigger }, triggerButtonProps), { children }));
|
|
69
|
+
}
|
|
70
|
+
return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
|
|
71
|
+
_dropdown.Dropdown,
|
|
72
|
+
{
|
|
73
|
+
"aria-label": ariaLabel,
|
|
74
|
+
isDisabled,
|
|
75
|
+
placement,
|
|
76
|
+
children: [
|
|
77
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _dropdown.DropdownTrigger, { "data-testid": testId, children: triggerButton }),
|
|
78
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
79
|
+
_dropdown.DropdownMenu,
|
|
80
|
+
{
|
|
81
|
+
items,
|
|
82
|
+
disabledKeys: getDisabledKeys(items),
|
|
83
|
+
onAction,
|
|
84
|
+
children: (item) => {
|
|
85
|
+
if ("items" in item) {
|
|
86
|
+
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
87
|
+
_dropdown.DropdownSection,
|
|
88
|
+
{
|
|
89
|
+
items: item.items,
|
|
90
|
+
title: item.label,
|
|
91
|
+
children: (sectionItem) => {
|
|
92
|
+
return renderMenuItem(sectionItem, className.item);
|
|
93
|
+
}
|
|
94
|
+
},
|
|
95
|
+
item.key
|
|
96
|
+
);
|
|
97
|
+
}
|
|
98
|
+
return renderMenuItem(item, className.item);
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
)
|
|
102
|
+
]
|
|
103
|
+
}
|
|
104
|
+
);
|
|
105
|
+
};
|
|
106
|
+
var Menu_default = Menu;
|
|
107
|
+
|
|
108
|
+
// src/Menu/index.ts
|
|
109
|
+
var Menu_default2 = Menu_default;
|
|
110
|
+
|
|
111
|
+
|
|
112
|
+
|
|
113
|
+
|
|
114
|
+
exports.Menu_default = Menu_default; exports.Menu_default2 = Menu_default2;
|
|
115
|
+
//# sourceMappingURL=chunk-WFR7OUY7.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-WFR7OUY7.cjs","../src/Menu/Menu.tsx","../src/Menu/index.ts"],"names":["Menu_default"],"mappings":"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","file":"/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-WFR7OUY7.cjs","sourcesContent":[null,"import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ButtonProps } from '@heroui/button';\nimport type {\n DropdownItemProps as HeroDropdownItemProps,\n DropdownProps as HeroDropdownProps,\n DropdownSectionProps as HeroDropdownSectionProps,\n} from '@heroui/dropdown';\nimport type { Key, ReactNode } from 'react';\n\nimport { FaEllipsisVertical } from 'react-icons/fa6';\n\nimport { Button } from '@heroui/button';\nimport {\n Dropdown as HeroDropdown,\n DropdownItem as HeroDropdownItem,\n DropdownMenu as HeroDropdownMenu,\n DropdownSection as HeroDropdownSection,\n DropdownTrigger as HeroDropdownTrigger,\n} from '@heroui/dropdown';\n\nimport { cn, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\n/**\n * Menu item type\n */\nexport interface MenuItem {\n /** unique identifier */\n key: string;\n /** CSS class name */\n className?: string;\n /** additional description shown under the label */\n description?: string;\n /** disables the menu item */\n disabled?: boolean;\n /** menu item icon */\n icon?: ReactNode;\n /** menu item name */\n label: ReactNode;\n /** click event handler */\n onClick?: HeroDropdownItemProps['onPress'];\n /** e2e test identifier */\n testId?: string;\n}\n\n/**\n * Menu section type\n */\nexport interface MenuSection {\n /** unique identifier */\n key: string;\n /** section label */\n label: ReactNode;\n /** section items (array of MenuItem) */\n items: MenuItem[];\n}\n\n// menu styling variants\nexport const menuVariants = tv({\n slots: {\n item: '',\n trigger: '',\n },\n});\n\ntype VariantProps = TVProps<typeof menuVariants>;\ntype ClassName = TVClassName<typeof menuVariants>;\n\nexport interface MenuProps extends VariantProps {\n /** sets HTML aria-label attribute */\n ariaLabel?: string;\n /** child components */\n children?: ReactNode;\n /** CSS class name */\n className?: ClassName;\n /** menu item structure */\n items: (MenuSection | MenuItem)[];\n /** disable menu trigger */\n isDisabled?: boolean;\n /** placement of the menu */\n placement?: HeroDropdownProps['placement'];\n /** called if item is selected */\n onAction?: (key: Key) => void;\n /** HTML data-testid attribute used in e2e tests */\n testId?: string;\n /** When defined a Button will be rendered as trigger (with provided props) instead of unstyled html button */\n triggerButtonProps?: Pick<\n ButtonProps,\n | 'aria-label'\n | 'className'\n | 'color'\n | 'disableAnimation'\n | 'disabled'\n | 'size'\n | 'variant'\n >;\n}\n\n/** returns String[] of disabled items/keys */\nconst getDisabledKeys = (items: (MenuSection | MenuItem)[]) => {\n return (\n items\n // @ts-expect-error typing issue with MenuSection | MenuItem\n .map((item) => (typeof item?.items === 'undefined' ? item : item.items))\n .flat<MenuItem[]>()\n .filter((item) => {\n return Object.hasOwn(item, 'disabled') && item.disabled === true;\n })\n .map((item) => item.key)\n );\n};\n\nconst renderMenuItem = (item: MenuItem, itemClassName?: string) => (\n <HeroDropdownItem\n className={cn(itemClassName, item.className)}\n data-testid={item.testId || item.key}\n description={item.description}\n key={item.key}\n onPress={item.onClick}\n startContent={item.icon}\n >\n {item.label}\n </HeroDropdownItem>\n);\n\n/**\n * Dropdown menu component based on [HeroUI Dropdown](https://www.heroui.com//docs/components/dropdown)\n */\nconst Menu = ({\n ariaLabel = undefined,\n children = null,\n className: _className = undefined,\n isDisabled = false,\n items,\n onAction = undefined,\n placement = undefined,\n testId = undefined,\n triggerButtonProps = undefined,\n}: MenuProps) => {\n // className from slots\n const variants = menuVariants();\n const className = variantsToClassNames(variants, _className, 'trigger');\n\n // determine trigger button variant\n let triggerButton = <button type=\"button\">{children}</button>;\n if (!children) {\n // default to ellipsis icon when no children are provided\n triggerButton = (\n <Button\n className={cn('min-w-0', className.trigger)}\n size=\"sm\"\n variant=\"flat\"\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...triggerButtonProps}\n >\n <FaEllipsisVertical />\n </Button>\n );\n } else if (triggerButtonProps) {\n // use provided triggerButtonProps with hero button\n triggerButton = (\n // eslint-disable-next-line react/jsx-props-no-spreading\n <Button className={className.trigger} {...triggerButtonProps}>\n {children}\n </Button>\n );\n }\n\n return (\n <HeroDropdown\n aria-label={ariaLabel}\n isDisabled={isDisabled}\n placement={placement}\n >\n <HeroDropdownTrigger data-testid={testId}>\n {/* NOTE: type and aria properties are injected by HeroDropdownTrigger */}\n {triggerButton}\n </HeroDropdownTrigger>\n <HeroDropdownMenu\n items={items}\n disabledKeys={getDisabledKeys(items)}\n onAction={onAction}\n >\n {(item) => {\n if ('items' in item) {\n return (\n <HeroDropdownSection\n items={item.items}\n title={item.label as HeroDropdownSectionProps['title']}\n key={item.key}\n >\n {(sectionItem) => {\n return renderMenuItem(sectionItem, className.item);\n }}\n </HeroDropdownSection>\n );\n }\n return renderMenuItem(item, className.item);\n }}\n </HeroDropdownMenu>\n </HeroDropdown>\n );\n};\n\nexport default Menu;\n","import Menu from './Menu';\n\nexport type { MenuProps, MenuItem, MenuSection } from './Menu';\n\nexport { Menu };\n\nexport default Menu;\n"]}
|
package/dist/index.cjs
CHANGED
|
@@ -45,21 +45,21 @@ var _chunk7APFE3MIcjs = require('./chunk-7APFE3MI.cjs');
|
|
|
45
45
|
var _chunk7RVUB6I5cjs = require('./chunk-7RVUB6I5.cjs');
|
|
46
46
|
|
|
47
47
|
|
|
48
|
-
var
|
|
48
|
+
var _chunkIPALTJVFcjs = require('./chunk-IPALTJVF.cjs');
|
|
49
49
|
|
|
50
50
|
|
|
51
51
|
|
|
52
52
|
var _chunkPHQVYJS2cjs = require('./chunk-PHQVYJS2.cjs');
|
|
53
53
|
|
|
54
54
|
|
|
55
|
-
var
|
|
55
|
+
var _chunkWFR7OUY7cjs = require('./chunk-WFR7OUY7.cjs');
|
|
56
56
|
|
|
57
57
|
|
|
58
58
|
|
|
59
59
|
var _chunkDTG27JQ7cjs = require('./chunk-DTG27JQ7.cjs');
|
|
60
60
|
|
|
61
61
|
|
|
62
|
-
var
|
|
62
|
+
var _chunk3Y7P46WTcjs = require('./chunk-3Y7P46WT.cjs');
|
|
63
63
|
require('./chunk-FUBGS3G4.cjs');
|
|
64
64
|
|
|
65
65
|
|
|
@@ -85,7 +85,7 @@ var _chunkZZOEFQWQcjs = require('./chunk-ZZOEFQWQ.cjs');
|
|
|
85
85
|
|
|
86
86
|
|
|
87
87
|
|
|
88
|
-
var
|
|
88
|
+
var _chunkNNWXSPVBcjs = require('./chunk-NNWXSPVB.cjs');
|
|
89
89
|
require('./chunk-D4TLDLEX.cjs');
|
|
90
90
|
|
|
91
91
|
|
|
@@ -131,5 +131,5 @@ require('./chunk-D4TLDLEX.cjs');
|
|
|
131
131
|
|
|
132
132
|
|
|
133
133
|
|
|
134
|
-
exports.Accordion = _chunk3LEEMSTGcjs.Accordion_default; exports.Alert = _chunkYBMQZ43Tcjs.Alert_default; exports.Avatar = _chunk77J7NZYBcjs.Avatar_default; exports.AvatarGroup = _chunkLIZGYO24cjs.AvatarGroup_default; exports.Badge = _chunkJSANDW3Wcjs.Badge_default; exports.Breadcrumb = _chunkZZOEFQWQcjs.Breadcrumb_default; exports.Button =
|
|
134
|
+
exports.Accordion = _chunk3LEEMSTGcjs.Accordion_default; exports.Alert = _chunkYBMQZ43Tcjs.Alert_default; exports.Avatar = _chunk77J7NZYBcjs.Avatar_default; exports.AvatarGroup = _chunkLIZGYO24cjs.AvatarGroup_default; exports.Badge = _chunkJSANDW3Wcjs.Badge_default; exports.Breadcrumb = _chunkZZOEFQWQcjs.Breadcrumb_default; exports.Button = _chunkNNWXSPVBcjs.Button_default; exports.ButtonGroup = _chunkY3RSI2KVcjs.ButtonGroup_default; exports.Card = _chunk7APFE3MIcjs.Card_default; exports.Drawer = _chunk7RVUB6I5cjs.Drawer_default; exports.Json = _chunkIPALTJVFcjs.Json_default; exports.Label = _chunkPHQVYJS2cjs.Label_default; exports.Menu = _chunkWFR7OUY7cjs.Menu_default; exports.Modal = _chunkDTG27JQ7cjs.Modal_default; exports.Popover = _chunk3Y7P46WTcjs.Popover_default; exports.Progress = _chunkXOCP745Xcjs.Progress_default; exports.ProgressCircular = _chunkW2EOAUKEcjs.ProgressCircular_default; exports.Table = _chunkC6VV7NYTcjs.Table_default; exports.Tabs = _chunkRYO74XL7cjs.Tabs_default; exports.Toast = _chunkTLXLWB4Ycjs.Toast; exports.ToastProvider = _chunkTLXLWB4Ycjs.ToastProvider_default; exports.Tooltip = _chunkJ4HCGFN4cjs.Tooltip_default; exports.accordionVariants = _chunk3LEEMSTGcjs.accordionVariants; exports.addToast = _chunkTLXLWB4Ycjs.addToast; exports.alertVariants = _chunkYBMQZ43Tcjs.alertVariants; exports.breadcrumbVariants = _chunkZZOEFQWQcjs.breadcrumbVariants; exports.buttonVariants = _chunkNNWXSPVBcjs.buttonVariants; exports.cardVariants = _chunk7APFE3MIcjs.cardVariants; exports.drawerBackdrops = _chunk7RVUB6I5cjs.drawerBackdrops; exports.drawerPlacements = _chunk7RVUB6I5cjs.drawerPlacements; exports.drawerRadii = _chunk7RVUB6I5cjs.drawerRadii; exports.drawerSizes = _chunk7RVUB6I5cjs.drawerSizes; exports.drawerVariants = _chunk7RVUB6I5cjs.drawerVariants; exports.labelVariants = _chunkPHQVYJS2cjs.labelVariants; exports.modalVariants = _chunkDTG27JQ7cjs.modalVariants; exports.progressCircularVariants = _chunkW2EOAUKEcjs.progressCircularVariants; exports.progressVariants = _chunkXOCP745Xcjs.progressVariants; exports.tableVariants = _chunkC6VV7NYTcjs.tableVariants; exports.tabsVariants = _chunkRYO74XL7cjs.tabsVariants; exports.toastVariants = _chunkTLXLWB4Ycjs.toastVariants; exports.useDebounce = _chunkOLI32URUcjs.useDebounce; exports.useIsInitialRenderCycle = _chunkOLI32URUcjs.useIsInitialRenderCycle; exports.useLocalStorage = _chunkOLI32URUcjs.useLocalStorage;
|
|
135
135
|
//# sourceMappingURL=index.cjs.map
|
package/dist/index.d.cts
CHANGED
|
@@ -4,15 +4,15 @@ export { A as Avatar, a as AvatarProps } from './Avatar-DjZ3H25h.cjs';
|
|
|
4
4
|
export { A as AvatarGroup, a as AvatarGroupProps } from './AvatarGroup-BujXZ7Vy.cjs';
|
|
5
5
|
export { A as Badge, B as BadgeProps } from './Badge-BjifpVQQ.cjs';
|
|
6
6
|
export { B as Breadcrumb, c as BreadcrumbItemProps, a as BreadcrumbProps, b as breadcrumbVariants } from './Breadcrumb-Cvt5Xa5D.cjs';
|
|
7
|
-
export { B as Button, a as ButtonProps, b as buttonVariants } from './Button-
|
|
7
|
+
export { B as Button, a as ButtonProps, b as buttonVariants } from './Button-CkMcZvji.cjs';
|
|
8
8
|
export { B as ButtonGroup } from './ButtonGroup-CUxpALRo.cjs';
|
|
9
9
|
export { C as Card, a as CardProps, c as cardVariants } from './Card-OBRZ-ssX.cjs';
|
|
10
10
|
export { D as Drawer, f as DrawerProps, d as drawerBackdrops, a as drawerPlacements, b as drawerRadii, c as drawerSizes, e as drawerVariants } from './Drawer-JpihbwKl.cjs';
|
|
11
11
|
export { J as Json, a as JsonProps } from './Json-Dny90Wml.cjs';
|
|
12
12
|
export { L as Label, a as LabelProps, l as labelVariants } from './Label-B5fd7vp_.cjs';
|
|
13
|
-
export { M as Menu, b as MenuItem, a as MenuProps, c as MenuSection } from './Menu-
|
|
13
|
+
export { M as Menu, b as MenuItem, a as MenuProps, c as MenuSection } from './Menu-DbeqxeL0.cjs';
|
|
14
14
|
export { M as Modal, a as ModalProps, m as modalVariants } from './Modal-BwFQz60I.cjs';
|
|
15
|
-
export { _ as Popover, P as PopoverProps } from './Popover-
|
|
15
|
+
export { _ as Popover, P as PopoverProps } from './Popover-BsdcKPgm.cjs';
|
|
16
16
|
export { P as ProgressCircular, a as ProgressCircularProps, p as progressCircularVariants } from './ProgressCircular-CkZsOW4R.cjs';
|
|
17
17
|
export { P as Progress, a as ProgressProps, p as progressVariants } from './Progress-Deph-HCf.cjs';
|
|
18
18
|
export { T as Table, c as TableColumnProps, a as TableProps, b as TableRowProps, V as VariantProps, t as tableVariants } from './Table-LKaPSY4D.cjs';
|
package/dist/index.d.ts
CHANGED
|
@@ -4,15 +4,15 @@ export { A as Avatar, a as AvatarProps } from './Avatar-DjZ3H25h.js';
|
|
|
4
4
|
export { A as AvatarGroup, a as AvatarGroupProps } from './AvatarGroup-B1Tdw57Q.js';
|
|
5
5
|
export { A as Badge, B as BadgeProps } from './Badge-BjifpVQQ.js';
|
|
6
6
|
export { B as Breadcrumb, c as BreadcrumbItemProps, a as BreadcrumbProps, b as breadcrumbVariants } from './Breadcrumb-Cvt5Xa5D.js';
|
|
7
|
-
export { B as Button, a as ButtonProps, b as buttonVariants } from './Button-
|
|
7
|
+
export { B as Button, a as ButtonProps, b as buttonVariants } from './Button-CkMcZvji.js';
|
|
8
8
|
export { B as ButtonGroup } from './ButtonGroup-CUxpALRo.js';
|
|
9
9
|
export { C as Card, a as CardProps, c as cardVariants } from './Card-OBRZ-ssX.js';
|
|
10
10
|
export { D as Drawer, f as DrawerProps, d as drawerBackdrops, a as drawerPlacements, b as drawerRadii, c as drawerSizes, e as drawerVariants } from './Drawer-JpihbwKl.js';
|
|
11
11
|
export { J as Json, a as JsonProps } from './Json-Dny90Wml.js';
|
|
12
12
|
export { L as Label, a as LabelProps, l as labelVariants } from './Label-B5fd7vp_.js';
|
|
13
|
-
export { M as Menu, b as MenuItem, a as MenuProps, c as MenuSection } from './Menu-
|
|
13
|
+
export { M as Menu, b as MenuItem, a as MenuProps, c as MenuSection } from './Menu-DbeqxeL0.js';
|
|
14
14
|
export { M as Modal, a as ModalProps, m as modalVariants } from './Modal-BwFQz60I.js';
|
|
15
|
-
export { _ as Popover, P as PopoverProps } from './Popover-
|
|
15
|
+
export { _ as Popover, P as PopoverProps } from './Popover-BsdcKPgm.js';
|
|
16
16
|
export { P as ProgressCircular, a as ProgressCircularProps, p as progressCircularVariants } from './ProgressCircular-CkZsOW4R.js';
|
|
17
17
|
export { P as Progress, a as ProgressProps, p as progressVariants } from './Progress-Deph-HCf.js';
|
|
18
18
|
export { T as Table, c as TableColumnProps, a as TableProps, b as TableRowProps, V as VariantProps, t as tableVariants } from './Table-LKaPSY4D.js';
|
package/dist/index.js
CHANGED
|
@@ -45,21 +45,21 @@ import {
|
|
|
45
45
|
} from "./chunk-VBOUHWXM.js";
|
|
46
46
|
import {
|
|
47
47
|
Json_default
|
|
48
|
-
} from "./chunk-
|
|
48
|
+
} from "./chunk-N4U7OJOM.js";
|
|
49
49
|
import {
|
|
50
50
|
Label_default,
|
|
51
51
|
labelVariants
|
|
52
52
|
} from "./chunk-X6JZFO33.js";
|
|
53
53
|
import {
|
|
54
54
|
Menu_default
|
|
55
|
-
} from "./chunk-
|
|
55
|
+
} from "./chunk-WFPRB4JT.js";
|
|
56
56
|
import {
|
|
57
57
|
Modal_default,
|
|
58
58
|
modalVariants
|
|
59
59
|
} from "./chunk-MK2S3QUK.js";
|
|
60
60
|
import {
|
|
61
61
|
Popover_default
|
|
62
|
-
} from "./chunk-
|
|
62
|
+
} from "./chunk-HFW4JP5W.js";
|
|
63
63
|
import "./chunk-WDXULV6M.js";
|
|
64
64
|
import {
|
|
65
65
|
Accordion_default,
|
|
@@ -85,7 +85,7 @@ import {
|
|
|
85
85
|
import {
|
|
86
86
|
Button_default,
|
|
87
87
|
buttonVariants
|
|
88
|
-
} from "./chunk-
|
|
88
|
+
} from "./chunk-HOWDEBJG.js";
|
|
89
89
|
import "./chunk-J7N2552D.js";
|
|
90
90
|
export {
|
|
91
91
|
Accordion_default as Accordion,
|
package/package.json
CHANGED
package/dist/Menu-DYi8oagz.d.cts
DELETED
|
@@ -1,56 +0,0 @@
|
|
|
1
|
-
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
-
import { DropdownItemProps } from '@heroui/dropdown';
|
|
3
|
-
import { ReactNode, Key } from 'react';
|
|
4
|
-
|
|
5
|
-
/**
|
|
6
|
-
* Menu item type
|
|
7
|
-
*/
|
|
8
|
-
interface MenuItem {
|
|
9
|
-
/** unique identifier */
|
|
10
|
-
key: string;
|
|
11
|
-
/** CSS class name */
|
|
12
|
-
className?: string;
|
|
13
|
-
/** additional description shown under the label */
|
|
14
|
-
description?: string;
|
|
15
|
-
/** disables the menu item */
|
|
16
|
-
disabled?: boolean;
|
|
17
|
-
/** menu item icon */
|
|
18
|
-
icon?: ReactNode;
|
|
19
|
-
/** menu item name */
|
|
20
|
-
label: ReactNode;
|
|
21
|
-
/** click event handler */
|
|
22
|
-
onClick?: DropdownItemProps['onPress'];
|
|
23
|
-
/** e2e test identifier */
|
|
24
|
-
testId?: string;
|
|
25
|
-
}
|
|
26
|
-
/**
|
|
27
|
-
* Menu section type
|
|
28
|
-
*/
|
|
29
|
-
interface MenuSection {
|
|
30
|
-
/** unique identifier */
|
|
31
|
-
key: string;
|
|
32
|
-
/** section label */
|
|
33
|
-
label: ReactNode;
|
|
34
|
-
/** section items (array of MenuItem) */
|
|
35
|
-
items: MenuItem[];
|
|
36
|
-
}
|
|
37
|
-
interface MenuProps {
|
|
38
|
-
/** child components */
|
|
39
|
-
children?: ReactNode;
|
|
40
|
-
/** CSS class name */
|
|
41
|
-
className?: string | string[];
|
|
42
|
-
/** HTML data-testid attribute used in e2e tests */
|
|
43
|
-
testId?: string;
|
|
44
|
-
/** menu item structure */
|
|
45
|
-
items: (MenuSection | MenuItem)[];
|
|
46
|
-
/** disable menu trigger */
|
|
47
|
-
isDisabled?: boolean;
|
|
48
|
-
/** called if item is selected */
|
|
49
|
-
onAction?: (key: Key) => void;
|
|
50
|
-
}
|
|
51
|
-
/**
|
|
52
|
-
* Dropdown menu component based on [HeroUI Dropdown](https://www.heroui.com//docs/components/dropdown)
|
|
53
|
-
*/
|
|
54
|
-
declare const Menu: ({ children, className, onAction, testId, isDisabled, items, }: MenuProps) => react_jsx_runtime.JSX.Element;
|
|
55
|
-
|
|
56
|
-
export { Menu as M, type MenuProps as a, type MenuItem as b, type MenuSection as c };
|
package/dist/Menu-DYi8oagz.d.ts
DELETED
|
@@ -1,56 +0,0 @@
|
|
|
1
|
-
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
-
import { DropdownItemProps } from '@heroui/dropdown';
|
|
3
|
-
import { ReactNode, Key } from 'react';
|
|
4
|
-
|
|
5
|
-
/**
|
|
6
|
-
* Menu item type
|
|
7
|
-
*/
|
|
8
|
-
interface MenuItem {
|
|
9
|
-
/** unique identifier */
|
|
10
|
-
key: string;
|
|
11
|
-
/** CSS class name */
|
|
12
|
-
className?: string;
|
|
13
|
-
/** additional description shown under the label */
|
|
14
|
-
description?: string;
|
|
15
|
-
/** disables the menu item */
|
|
16
|
-
disabled?: boolean;
|
|
17
|
-
/** menu item icon */
|
|
18
|
-
icon?: ReactNode;
|
|
19
|
-
/** menu item name */
|
|
20
|
-
label: ReactNode;
|
|
21
|
-
/** click event handler */
|
|
22
|
-
onClick?: DropdownItemProps['onPress'];
|
|
23
|
-
/** e2e test identifier */
|
|
24
|
-
testId?: string;
|
|
25
|
-
}
|
|
26
|
-
/**
|
|
27
|
-
* Menu section type
|
|
28
|
-
*/
|
|
29
|
-
interface MenuSection {
|
|
30
|
-
/** unique identifier */
|
|
31
|
-
key: string;
|
|
32
|
-
/** section label */
|
|
33
|
-
label: ReactNode;
|
|
34
|
-
/** section items (array of MenuItem) */
|
|
35
|
-
items: MenuItem[];
|
|
36
|
-
}
|
|
37
|
-
interface MenuProps {
|
|
38
|
-
/** child components */
|
|
39
|
-
children?: ReactNode;
|
|
40
|
-
/** CSS class name */
|
|
41
|
-
className?: string | string[];
|
|
42
|
-
/** HTML data-testid attribute used in e2e tests */
|
|
43
|
-
testId?: string;
|
|
44
|
-
/** menu item structure */
|
|
45
|
-
items: (MenuSection | MenuItem)[];
|
|
46
|
-
/** disable menu trigger */
|
|
47
|
-
isDisabled?: boolean;
|
|
48
|
-
/** called if item is selected */
|
|
49
|
-
onAction?: (key: Key) => void;
|
|
50
|
-
}
|
|
51
|
-
/**
|
|
52
|
-
* Dropdown menu component based on [HeroUI Dropdown](https://www.heroui.com//docs/components/dropdown)
|
|
53
|
-
*/
|
|
54
|
-
declare const Menu: ({ children, className, onAction, testId, isDisabled, items, }: MenuProps) => react_jsx_runtime.JSX.Element;
|
|
55
|
-
|
|
56
|
-
export { Menu as M, type MenuProps as a, type MenuItem as b, type MenuSection as c };
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Button/Button.tsx","../src/Button/subcomponents/LoadingSpinner.tsx","../src/Button/index.ts"],"sourcesContent":["import type { TVProps } from '@fuf-stack/pixel-utils';\nimport type { ButtonProps as HeroButtonProps } from '@heroui/button';\nimport type { ReactNode } from 'react';\n\nimport { Button as HeroButton } from '@heroui/button';\nimport { button as heroButtonVariants } from '@heroui/theme';\n\nimport { tv } from '@fuf-stack/pixel-utils';\n\nimport LoadingSpinner from './subcomponents/LoadingSpinner';\n\nexport const buttonVariants = tv({\n base: '',\n variants: {\n color: {\n // see: https://github.com/heroui-inc/heroui/blob/canary/packages/core/theme/src/components/button.ts\n info: '',\n ...heroButtonVariants.variants.color,\n },\n variant: heroButtonVariants.variants.variant,\n size: heroButtonVariants.variants.size,\n },\n compoundVariants: [\n // white text on solid / shadow success button\n {\n color: 'success',\n variant: ['solid', 'shadow'],\n class: 'text-white',\n },\n // white text on solid / shadow warning button\n {\n color: 'warning',\n variant: ['solid', 'shadow'],\n class: 'text-white',\n },\n {\n color: 'info',\n variant: 'solid',\n class: 'bg-info text-info-foreground',\n },\n {\n color: 'info',\n variant: 'shadow',\n class: 'text-info-foreground\" bg-info shadow-info/40 shadow-lg',\n },\n {\n color: 'info',\n variant: 'bordered',\n class: 'border-medium border-info text-info bg-transparent',\n },\n {\n color: 'info',\n variant: 'flat',\n class: 'bg-info/20 text-info-600',\n },\n {\n color: 'info',\n variant: 'faded',\n class: 'border-default bg-default-100 text-info',\n },\n {\n color: 'info',\n variant: 'light',\n class: 'text-info data-[hover=true]:bg-info-100 bg-transparent',\n },\n {\n color: 'info',\n variant: 'ghost',\n class:\n 'border-info text-info data-[hover=true]:!bg-info data-[hover=true]:!text-info-foreground',\n },\n ],\n});\n\ntype VariantProps = TVProps<typeof buttonVariants>;\n\nexport interface ButtonProps extends VariantProps {\n /** sets HTML aria-label attribute */\n ariaLabel?: string;\n /** content of the button */\n children?: ReactNode;\n /** CSS class name */\n className?: string;\n /** color of the button */\n color?: HeroButtonProps['color'];\n /** disables the button */\n disabled?: boolean;\n /** disables all animations */\n disableAnimation?: boolean;\n /** shows loading animation */\n loading?: boolean;\n /** optional icon */\n icon?: ReactNode;\n /** click event handler */\n onClick?: HeroButtonProps['onPress'];\n /** border radius size */\n radius?: HeroButtonProps['radius'];\n /** enable ripple animation effect on click */\n ripple?: boolean;\n /** size options */\n size?: HeroButtonProps['size'];\n /** HTML data-testid attribute used in e2e tests */\n testId?: string;\n /** HTML button type attribute */\n type?: 'button' | 'submit' | 'reset' | undefined;\n /** visual style variant */\n variant?: HeroButtonProps['variant'];\n}\n\n/**\n * Button component based on [HeroUI Button](https://www.heroui.com//docs/components/button)\n */\nconst Button = ({\n ariaLabel = undefined,\n children = undefined,\n className = undefined,\n color = 'default',\n disableAnimation = false,\n disabled = false,\n icon = undefined,\n loading = false,\n onClick = undefined,\n radius = undefined,\n ripple = false,\n size = undefined,\n testId = undefined,\n type = undefined,\n variant = 'solid',\n}: ButtonProps) => {\n return (\n <HeroButton\n aria-label={ariaLabel}\n className={buttonVariants({ color, variant, className })}\n color={color}\n data-testid={testId}\n disableAnimation={disableAnimation}\n disableRipple={disableAnimation || !ripple}\n isDisabled={disabled}\n isIconOnly={!!(icon && !children)}\n isLoading={loading}\n onPress={onClick}\n radius={radius}\n size={size}\n spinner={<LoadingSpinner />}\n type={type}\n variant={variant}\n >\n {icon}\n {children}\n </HeroButton>\n );\n};\n\nexport default Button;\n","/**\n * svg loading spinner for button\n * @see https://www.heroui.com//docs/components/button#loading\n * */\nexport default () => (\n <svg\n className=\"h-5 w-5 animate-spin text-current\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <circle\n className=\"opacity-25\"\n cx=\"12\"\n cy=\"12\"\n r=\"10\"\n stroke=\"currentColor\"\n strokeWidth=\"4\"\n />\n <path\n className=\"opacity-75\"\n d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n fill=\"currentColor\"\n />\n </svg>\n);\n","import Button, { buttonVariants } from './Button';\n\nexport type { ButtonProps } from './Button';\n\nexport { Button, buttonVariants };\n\nexport default Button;\n"],"mappings":";;;;;AAIA,SAAS,UAAU,kBAAkB;AACrC,SAAS,UAAU,0BAA0B;AAE7C,SAAS,UAAU;;;ACFjB,SAME,KANF;AADF,IAAO,yBAAQ,MACb;AAAA,EAAC;AAAA;AAAA,IACC,WAAU;AAAA,IACV,MAAK;AAAA,IACL,SAAQ;AAAA,IACR,OAAM;AAAA,IAEN;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,IAAG;AAAA,UACH,IAAG;AAAA,UACH,GAAE;AAAA,UACF,QAAO;AAAA,UACP,aAAY;AAAA;AAAA,MACd;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,GAAE;AAAA,UACF,MAAK;AAAA;AAAA,MACP;AAAA;AAAA;AACF;;;AD0GE,SAaW,OAAAA,MAbX,QAAAC,aAAA;AAvHG,IAAM,iBAAiB,GAAG;AAAA,EAC/B,MAAM;AAAA,EACN,UAAU;AAAA,IACR,OAAO;AAAA;AAAA,MAEL,MAAM;AAAA,OACH,mBAAmB,SAAS;AAAA,IAEjC,SAAS,mBAAmB,SAAS;AAAA,IACrC,MAAM,mBAAmB,SAAS;AAAA,EACpC;AAAA,EACA,kBAAkB;AAAA;AAAA,IAEhB;AAAA,MACE,OAAO;AAAA,MACP,SAAS,CAAC,SAAS,QAAQ;AAAA,MAC3B,OAAO;AAAA,IACT;AAAA;AAAA,IAEA;AAAA,MACE,OAAO;AAAA,MACP,SAAS,CAAC,SAAS,QAAQ;AAAA,MAC3B,OAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE,OAAO;AAAA,MACP,SAAS;AAAA,MACT,OAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE,OAAO;AAAA,MACP,SAAS;AAAA,MACT,OAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE,OAAO;AAAA,MACP,SAAS;AAAA,MACT,OAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE,OAAO;AAAA,MACP,SAAS;AAAA,MACT,OAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE,OAAO;AAAA,MACP,SAAS;AAAA,MACT,OAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE,OAAO;AAAA,MACP,SAAS;AAAA,MACT,OAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE,OAAO;AAAA,MACP,SAAS;AAAA,MACT,OACE;AAAA,IACJ;AAAA,EACF;AACF,CAAC;AAwCD,IAAM,SAAS,CAAC;AAAA,EACd,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,mBAAmB;AAAA,EACnB,WAAW;AAAA,EACX,OAAO;AAAA,EACP,UAAU;AAAA,EACV,UAAU;AAAA,EACV,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AAAA,EACP,SAAS;AAAA,EACT,OAAO;AAAA,EACP,UAAU;AACZ,MAAmB;AACjB,SACE,gBAAAA;AAAA,IAAC;AAAA;AAAA,MACC,cAAY;AAAA,MACZ,WAAW,eAAe,EAAE,OAAO,SAAS,UAAU,CAAC;AAAA,MACvD;AAAA,MACA,eAAa;AAAA,MACb;AAAA,MACA,eAAe,oBAAoB,CAAC;AAAA,MACpC,YAAY;AAAA,MACZ,YAAY,CAAC,EAAE,QAAQ,CAAC;AAAA,MACxB,WAAW;AAAA,MACX,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA,SAAS,gBAAAD,KAAC,0BAAe;AAAA,MACzB;AAAA,MACA;AAAA,MAEC;AAAA;AAAA,QACA;AAAA;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,iBAAQ;;;AEnJf,IAAOE,kBAAQ;","names":["jsx","jsxs","Button_default"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Popover/Popover.tsx","../src/Popover/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { PopoverProps as HeroPopoverProps } from '@heroui/popover';\nimport type { ReactNode } from 'react';\nimport type { ButtonProps } from '../Button';\n\nimport { Button } from '@heroui/button';\nimport { Popover, PopoverContent, PopoverTrigger } from '@heroui/popover';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport ScrollShadow from '../ScrollShadow/ScrollShadow';\n\n// popover styling variants\nexport const popoverVariants = tv({\n slots: {\n body: 'w-full px-4 py-2',\n content: 'flex max-h-[80vh] flex-col p-0',\n divider: 'border-divider m-0 w-full p-0',\n footer: 'w-full px-4 py-2',\n footerWrapper: 'w-full',\n header: 'w-full px-4 pt-2 pb-1 font-semibold',\n headerWrapper: 'w-full',\n trigger: '',\n },\n});\n\ntype VariantProps = TVProps<typeof popoverVariants>;\ntype ClassName = TVClassName<typeof popoverVariants>;\n\nexport interface PopoverProps extends VariantProps {\n /** child components */\n children?: ReactNode;\n /** CSS class name */\n className?: ClassName;\n /** content of the popover */\n content: ReactNode;\n /** HTML data-testid attribute used in e2e tests */\n contentTestId?: string;\n /** popover footer */\n footer?: ReactNode;\n /** Popover title */\n header?: ReactNode;\n /** use as controlled component */\n openControlled?: { open: boolean; setOpen: (open: boolean) => void };\n /** placement of the popover relative to its trigger reference */\n placement?: HeroPopoverProps['placement'];\n /** The container element in which the overlay portal will be placed. */\n portalContainer?: HeroPopoverProps['portalContainer'];\n /** Whether to block scrolling outside the popover */\n shouldBlockScroll?: boolean;\n /** HTML data-testid attribute used in e2e tests */\n testId?: string;\n /** When defined a Button will be rendered as trigger (with provided props) instead of unstyled html button */\n triggerButtonProps?: Pick<\n ButtonProps,\n | 'ariaLabel'\n | 'className'\n | 'color'\n | 'disableAnimation'\n | 'disabled'\n | 'size'\n | 'testId'\n | 'variant'\n >;\n}\n\n/**\n * Popover component based on [HeroUI Card](https://www.heroui.com//docs/components/popover)\n */\nexport default ({\n children = null,\n className: _className = undefined,\n content,\n contentTestId = undefined,\n footer = undefined,\n header = undefined,\n openControlled = undefined,\n placement = 'top',\n portalContainer = undefined,\n shouldBlockScroll = undefined,\n testId = undefined,\n triggerButtonProps = undefined,\n}: PopoverProps) => {\n // className from slots\n const variants = popoverVariants();\n const className = variantsToClassNames(variants, _className, 'trigger');\n\n return (\n <Popover\n classNames={className}\n placement={placement}\n portalContainer={portalContainer}\n radius=\"sm\"\n shouldBlockScroll={shouldBlockScroll}\n showArrow\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...(openControlled\n ? { isOpen: openControlled.open, onOpenChange: openControlled.setOpen }\n : {})}\n >\n <PopoverTrigger data-testid={testId}>\n {/* NOTE: type and aria properties are injected by PopoverTrigger */}\n {triggerButtonProps ? (\n // TODO: currently we have to use @heroui/button because\n // passing ref does not work (even with forwardRef in Button)\n // eslint-disable-next-line react/jsx-props-no-spreading\n <Button className={className.trigger} {...triggerButtonProps}>\n {children}\n </Button>\n ) : (\n // eslint-disable-next-line react/button-has-type\n <button className={className.trigger}>{children}</button>\n )}\n </PopoverTrigger>\n <PopoverContent data-testid={contentTestId}>\n {header && (\n <div className={className.headerWrapper}>\n <div className={className.header}>{header}</div>\n <hr className={className.divider} />\n </div>\n )}\n <ScrollShadow className={className.body}>{content}</ScrollShadow>\n {footer && (\n <div className={className.footerWrapper}>\n <hr className={className.divider} />\n <div className={className.footer}>{footer}</div>\n </div>\n )}\n </PopoverContent>\n </Popover>\n );\n};\n","import Popover from './Popover';\n\nexport type { PopoverProps } from './Popover';\n\nexport { Popover };\n\nexport default Popover;\n"],"mappings":";;;;;;;;;AAKA,SAAS,cAAc;AACvB,SAAS,SAAS,gBAAgB,sBAAsB;AAExD,SAAS,IAAI,4BAA4B;AAkG/B,cAUA,YAVA;AA7FH,IAAM,kBAAkB,GAAG;AAAA,EAChC,OAAO;AAAA,IACL,MAAM;AAAA,IACN,SAAS;AAAA,IACT,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,eAAe;AAAA,IACf,QAAQ;AAAA,IACR,eAAe;AAAA,IACf,SAAS;AAAA,EACX;AACF,CAAC;AA6CD,IAAO,kBAAQ,CAAC;AAAA,EACd,WAAW;AAAA,EACX,WAAW,aAAa;AAAA,EACxB;AAAA,EACA,gBAAgB;AAAA,EAChB,SAAS;AAAA,EACT,SAAS;AAAA,EACT,iBAAiB;AAAA,EACjB,YAAY;AAAA,EACZ,kBAAkB;AAAA,EAClB,oBAAoB;AAAA,EACpB,SAAS;AAAA,EACT,qBAAqB;AACvB,MAAoB;AAElB,QAAM,WAAW,gBAAgB;AACjC,QAAM,YAAY,qBAAqB,UAAU,YAAY,SAAS;AAEtE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,YAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA,QAAO;AAAA,MACP;AAAA,MACA,WAAS;AAAA,OAEJ,iBACD,EAAE,QAAQ,eAAe,MAAM,cAAc,eAAe,QAAQ,IACpE,CAAC,IAVN;AAAA,MAYC;AAAA,4BAAC,kBAAe,eAAa,QAE1B;AAAA;AAAA;AAAA;AAAA,UAIC,oBAAC,uCAAO,WAAW,UAAU,WAAa,qBAAzC,EACE,WACH;AAAA;AAAA;AAAA,UAGA,oBAAC,YAAO,WAAW,UAAU,SAAU,UAAS;AAAA,WAEpD;AAAA,QACA,qBAAC,kBAAe,eAAa,eAC1B;AAAA,oBACC,qBAAC,SAAI,WAAW,UAAU,eACxB;AAAA,gCAAC,SAAI,WAAW,UAAU,QAAS,kBAAO;AAAA,YAC1C,oBAAC,QAAG,WAAW,UAAU,SAAS;AAAA,aACpC;AAAA,UAEF,oBAAC,wBAAa,WAAW,UAAU,MAAO,mBAAQ;AAAA,UACjD,UACC,qBAAC,SAAI,WAAW,UAAU,eACxB;AAAA,gCAAC,QAAG,WAAW,UAAU,SAAS;AAAA,YAClC,oBAAC,SAAI,WAAW,UAAU,QAAS,kBAAO;AAAA,aAC5C;AAAA,WAEJ;AAAA;AAAA;AAAA,EACF;AAEJ;;;AC7HA,IAAOA,mBAAQ;","names":["Popover_default"]}
|