@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.
Files changed (51) hide show
  1. package/dist/Button/index.cjs +2 -2
  2. package/dist/Button/index.d.cts +2 -2
  3. package/dist/Button/index.d.ts +2 -2
  4. package/dist/Button/index.js +1 -1
  5. package/dist/{Button-rsBnawn1.d.cts → Button-CkMcZvji.d.cts} +12 -5
  6. package/dist/{Button-rsBnawn1.d.ts → Button-CkMcZvji.d.ts} +12 -5
  7. package/dist/Json/index.cjs +3 -3
  8. package/dist/Json/index.js +2 -2
  9. package/dist/Menu/index.cjs +2 -2
  10. package/dist/Menu/index.d.cts +5 -2
  11. package/dist/Menu/index.d.ts +5 -2
  12. package/dist/Menu/index.js +1 -1
  13. package/dist/Menu-DbeqxeL0.d.cts +98 -0
  14. package/dist/Menu-DbeqxeL0.d.ts +98 -0
  15. package/dist/Popover/index.cjs +2 -2
  16. package/dist/Popover/index.d.cts +3 -4
  17. package/dist/Popover/index.d.ts +3 -4
  18. package/dist/Popover/index.js +1 -1
  19. package/dist/{Popover-D6Qv56ms.d.ts → Popover-BsdcKPgm.d.cts} +2 -2
  20. package/dist/{Popover-BUKzm3MQ.d.cts → Popover-BsdcKPgm.d.ts} +2 -2
  21. package/dist/{chunk-WZZMB5CI.cjs → chunk-3Y7P46WT.cjs} +1 -1
  22. package/dist/chunk-3Y7P46WT.cjs.map +1 -0
  23. package/dist/{chunk-7QUYJEGU.js → chunk-HFW4JP5W.js} +1 -1
  24. package/dist/chunk-HFW4JP5W.js.map +1 -0
  25. package/dist/{chunk-4LMQVFV7.js → chunk-HOWDEBJG.js} +8 -4
  26. package/dist/chunk-HOWDEBJG.js.map +1 -0
  27. package/dist/{chunk-2OJHNNCU.cjs → chunk-IPALTJVF.cjs} +3 -3
  28. package/dist/{chunk-2OJHNNCU.cjs.map → chunk-IPALTJVF.cjs.map} +1 -1
  29. package/dist/{chunk-BTQB4EZC.js → chunk-N4U7OJOM.js} +2 -2
  30. package/dist/{chunk-PZL3LRGY.cjs → chunk-NNWXSPVB.cjs} +7 -3
  31. package/dist/chunk-NNWXSPVB.cjs.map +1 -0
  32. package/dist/chunk-WFPRB4JT.js +115 -0
  33. package/dist/chunk-WFPRB4JT.js.map +1 -0
  34. package/dist/chunk-WFR7OUY7.cjs +115 -0
  35. package/dist/chunk-WFR7OUY7.cjs.map +1 -0
  36. package/dist/index.cjs +5 -5
  37. package/dist/index.d.cts +3 -3
  38. package/dist/index.d.ts +3 -3
  39. package/dist/index.js +4 -4
  40. package/package.json +1 -1
  41. package/dist/Menu-DYi8oagz.d.cts +0 -56
  42. package/dist/Menu-DYi8oagz.d.ts +0 -56
  43. package/dist/chunk-4LMQVFV7.js.map +0 -1
  44. package/dist/chunk-7QUYJEGU.js.map +0 -1
  45. package/dist/chunk-OP5W7BXY.js +0 -81
  46. package/dist/chunk-OP5W7BXY.js.map +0 -1
  47. package/dist/chunk-PZL3LRGY.cjs.map +0 -1
  48. package/dist/chunk-WZZMB5CI.cjs.map +0 -1
  49. package/dist/chunk-XHOAZB2Z.cjs +0 -81
  50. package/dist/chunk-XHOAZB2Z.cjs.map +0 -1
  51. /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-4LMQVFV7.js";
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-BTQB4EZC.js.map
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
- base: "",
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: buttonVariants({ color, variant, 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-PZL3LRGY.cjs.map
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 _chunk2OJHNNCUcjs = require('./chunk-2OJHNNCU.cjs');
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 _chunkXHOAZB2Zcjs = require('./chunk-XHOAZB2Z.cjs');
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 _chunkWZZMB5CIcjs = require('./chunk-WZZMB5CI.cjs');
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 _chunkPZL3LRGYcjs = require('./chunk-PZL3LRGY.cjs');
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 = _chunkPZL3LRGYcjs.Button_default; exports.ButtonGroup = _chunkY3RSI2KVcjs.ButtonGroup_default; exports.Card = _chunk7APFE3MIcjs.Card_default; exports.Drawer = _chunk7RVUB6I5cjs.Drawer_default; exports.Json = _chunk2OJHNNCUcjs.Json_default; exports.Label = _chunkPHQVYJS2cjs.Label_default; exports.Menu = _chunkXHOAZB2Zcjs.Menu_default; exports.Modal = _chunkDTG27JQ7cjs.Modal_default; exports.Popover = _chunkWZZMB5CIcjs.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 = _chunkPZL3LRGYcjs.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;
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-rsBnawn1.cjs';
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-DYi8oagz.cjs';
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-BUKzm3MQ.cjs';
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-rsBnawn1.js';
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-DYi8oagz.js';
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-D6Qv56ms.js';
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-BTQB4EZC.js";
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-OP5W7BXY.js";
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-7QUYJEGU.js";
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-4LMQVFV7.js";
88
+ } from "./chunk-HOWDEBJG.js";
89
89
  import "./chunk-J7N2552D.js";
90
90
  export {
91
91
  Accordion_default as Accordion,
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@fuf-stack/pixels",
3
3
  "description": "fuf core react component library",
4
4
  "author": "Fröhlich ∧ Frei",
5
- "version": "1.1.2",
5
+ "version": "1.2.1",
6
6
  "type": "module",
7
7
  "main": "./dist/index.cjs",
8
8
  "module": "./dist/index.js",
@@ -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,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"]}