@fuf-stack/pixels 1.1.1 → 1.2.0
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/Accordion/index.cjs +2 -2
- package/dist/Accordion/index.js +1 -1
- 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/Modal/index.cjs +2 -2
- package/dist/Modal/index.js +1 -1
- package/dist/{chunk-LCOQDCO4.cjs → chunk-3LEEMSTG.cjs} +2 -2
- package/dist/chunk-3LEEMSTG.cjs.map +1 -0
- package/dist/{chunk-PEUUQMJS.cjs → chunk-DTG27JQ7.cjs} +4 -4
- package/dist/chunk-DTG27JQ7.cjs.map +1 -0
- package/dist/{chunk-RW4WTSLJ.js → chunk-MK2S3QUK.js} +4 -4
- package/dist/{chunk-PEUUQMJS.cjs.map → chunk-MK2S3QUK.js.map} +1 -1
- package/dist/{chunk-7T76DXVT.js → chunk-OAUPTZSC.js} +2 -2
- package/dist/chunk-OAUPTZSC.js.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 +4 -4
- package/dist/index.d.cts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +3 -3
- package/package.json +2 -2
- package/dist/Menu-DYi8oagz.d.cts +0 -56
- package/dist/Menu-DYi8oagz.d.ts +0 -56
- package/dist/chunk-7T76DXVT.js.map +0 -1
- package/dist/chunk-LCOQDCO4.cjs.map +0 -1
- package/dist/chunk-OP5W7BXY.js +0 -81
- package/dist/chunk-OP5W7BXY.js.map +0 -1
- package/dist/chunk-RW4WTSLJ.js.map +0 -1
- package/dist/chunk-XHOAZB2Z.cjs +0 -81
- package/dist/chunk-XHOAZB2Z.cjs.map +0 -1
package/dist/Accordion/index.cjs
CHANGED
|
@@ -2,11 +2,11 @@
|
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
|
|
5
|
-
var
|
|
5
|
+
var _chunk3LEEMSTGcjs = require('../chunk-3LEEMSTG.cjs');
|
|
6
6
|
require('../chunk-D4TLDLEX.cjs');
|
|
7
7
|
|
|
8
8
|
|
|
9
9
|
|
|
10
10
|
|
|
11
|
-
exports.Accordion =
|
|
11
|
+
exports.Accordion = _chunk3LEEMSTGcjs.Accordion_default; exports.accordionVariants = _chunk3LEEMSTGcjs.accordionVariants; exports.default = _chunk3LEEMSTGcjs.Accordion_default2;
|
|
12
12
|
//# sourceMappingURL=index.cjs.map
|
package/dist/Accordion/index.js
CHANGED
package/dist/Menu/index.cjs
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true});
|
|
2
2
|
|
|
3
3
|
|
|
4
|
-
var
|
|
4
|
+
var _chunkWFR7OUY7cjs = require('../chunk-WFR7OUY7.cjs');
|
|
5
5
|
require('../chunk-D4TLDLEX.cjs');
|
|
6
6
|
|
|
7
7
|
|
|
8
8
|
|
|
9
|
-
exports.Menu =
|
|
9
|
+
exports.Menu = _chunkWFR7OUY7cjs.Menu_default; exports.default = _chunkWFR7OUY7cjs.Menu_default2;
|
|
10
10
|
//# sourceMappingURL=index.cjs.map
|
package/dist/Menu/index.d.cts
CHANGED
|
@@ -1,6 +1,9 @@
|
|
|
1
|
-
import { M as Menu } from '../Menu-
|
|
2
|
-
export { b as MenuItem, a as MenuProps, c as MenuSection } from '../Menu-
|
|
1
|
+
import { M as Menu } from '../Menu-DbeqxeL0.cjs';
|
|
2
|
+
export { b as MenuItem, a as MenuProps, c as MenuSection } from '../Menu-DbeqxeL0.cjs';
|
|
3
3
|
import 'react/jsx-runtime';
|
|
4
|
+
import 'tailwind-variants';
|
|
5
|
+
import '@fuf-stack/pixel-utils';
|
|
6
|
+
import '@heroui/button';
|
|
4
7
|
import '@heroui/dropdown';
|
|
5
8
|
import 'react';
|
|
6
9
|
|
package/dist/Menu/index.d.ts
CHANGED
|
@@ -1,6 +1,9 @@
|
|
|
1
|
-
import { M as Menu } from '../Menu-
|
|
2
|
-
export { b as MenuItem, a as MenuProps, c as MenuSection } from '../Menu-
|
|
1
|
+
import { M as Menu } from '../Menu-DbeqxeL0.js';
|
|
2
|
+
export { b as MenuItem, a as MenuProps, c as MenuSection } from '../Menu-DbeqxeL0.js';
|
|
3
3
|
import 'react/jsx-runtime';
|
|
4
|
+
import 'tailwind-variants';
|
|
5
|
+
import '@fuf-stack/pixel-utils';
|
|
6
|
+
import '@heroui/button';
|
|
4
7
|
import '@heroui/dropdown';
|
|
5
8
|
import 'react';
|
|
6
9
|
|
package/dist/Menu/index.js
CHANGED
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import * as tailwind_variants from 'tailwind-variants';
|
|
3
|
+
import { TVProps, TVClassName } from '@fuf-stack/pixel-utils';
|
|
4
|
+
import { ButtonProps } from '@heroui/button';
|
|
5
|
+
import { DropdownItemProps, DropdownProps } from '@heroui/dropdown';
|
|
6
|
+
import { ReactNode, Key } from 'react';
|
|
7
|
+
|
|
8
|
+
/**
|
|
9
|
+
* Menu item type
|
|
10
|
+
*/
|
|
11
|
+
interface MenuItem {
|
|
12
|
+
/** unique identifier */
|
|
13
|
+
key: string;
|
|
14
|
+
/** CSS class name */
|
|
15
|
+
className?: string;
|
|
16
|
+
/** additional description shown under the label */
|
|
17
|
+
description?: string;
|
|
18
|
+
/** disables the menu item */
|
|
19
|
+
disabled?: boolean;
|
|
20
|
+
/** menu item icon */
|
|
21
|
+
icon?: ReactNode;
|
|
22
|
+
/** menu item name */
|
|
23
|
+
label: ReactNode;
|
|
24
|
+
/** click event handler */
|
|
25
|
+
onClick?: DropdownItemProps['onPress'];
|
|
26
|
+
/** e2e test identifier */
|
|
27
|
+
testId?: string;
|
|
28
|
+
}
|
|
29
|
+
/**
|
|
30
|
+
* Menu section type
|
|
31
|
+
*/
|
|
32
|
+
interface MenuSection {
|
|
33
|
+
/** unique identifier */
|
|
34
|
+
key: string;
|
|
35
|
+
/** section label */
|
|
36
|
+
label: ReactNode;
|
|
37
|
+
/** section items (array of MenuItem) */
|
|
38
|
+
items: MenuItem[];
|
|
39
|
+
}
|
|
40
|
+
declare const menuVariants: tailwind_variants.TVReturnType<{
|
|
41
|
+
[key: string]: {
|
|
42
|
+
[key: string]: tailwind_variants.ClassValue | {
|
|
43
|
+
trigger?: tailwind_variants.ClassValue;
|
|
44
|
+
item?: tailwind_variants.ClassValue;
|
|
45
|
+
};
|
|
46
|
+
};
|
|
47
|
+
} | {
|
|
48
|
+
[x: string]: {
|
|
49
|
+
[x: string]: tailwind_variants.ClassValue | {
|
|
50
|
+
trigger?: tailwind_variants.ClassValue;
|
|
51
|
+
item?: tailwind_variants.ClassValue;
|
|
52
|
+
};
|
|
53
|
+
};
|
|
54
|
+
} | {}, {
|
|
55
|
+
item: string;
|
|
56
|
+
trigger: string;
|
|
57
|
+
}, undefined, {
|
|
58
|
+
[key: string]: {
|
|
59
|
+
[key: string]: tailwind_variants.ClassValue | {
|
|
60
|
+
trigger?: tailwind_variants.ClassValue;
|
|
61
|
+
item?: tailwind_variants.ClassValue;
|
|
62
|
+
};
|
|
63
|
+
};
|
|
64
|
+
} | {}, {
|
|
65
|
+
item: string;
|
|
66
|
+
trigger: string;
|
|
67
|
+
}, tailwind_variants.TVReturnType<unknown, {
|
|
68
|
+
item: string;
|
|
69
|
+
trigger: string;
|
|
70
|
+
}, undefined, unknown, unknown, undefined>>;
|
|
71
|
+
type VariantProps = TVProps<typeof menuVariants>;
|
|
72
|
+
type ClassName = TVClassName<typeof menuVariants>;
|
|
73
|
+
interface MenuProps extends VariantProps {
|
|
74
|
+
/** sets HTML aria-label attribute */
|
|
75
|
+
ariaLabel?: string;
|
|
76
|
+
/** child components */
|
|
77
|
+
children?: ReactNode;
|
|
78
|
+
/** CSS class name */
|
|
79
|
+
className?: ClassName;
|
|
80
|
+
/** menu item structure */
|
|
81
|
+
items: (MenuSection | MenuItem)[];
|
|
82
|
+
/** disable menu trigger */
|
|
83
|
+
isDisabled?: boolean;
|
|
84
|
+
/** placement of the menu */
|
|
85
|
+
placement?: DropdownProps['placement'];
|
|
86
|
+
/** called if item is selected */
|
|
87
|
+
onAction?: (key: Key) => void;
|
|
88
|
+
/** HTML data-testid attribute used in e2e tests */
|
|
89
|
+
testId?: string;
|
|
90
|
+
/** When defined a Button will be rendered as trigger (with provided props) instead of unstyled html button */
|
|
91
|
+
triggerButtonProps?: Pick<ButtonProps, 'aria-label' | 'className' | 'color' | 'disableAnimation' | 'disabled' | 'size' | 'variant'>;
|
|
92
|
+
}
|
|
93
|
+
/**
|
|
94
|
+
* Dropdown menu component based on [HeroUI Dropdown](https://www.heroui.com//docs/components/dropdown)
|
|
95
|
+
*/
|
|
96
|
+
declare const Menu: ({ ariaLabel, children, className: _className, isDisabled, items, onAction, placement, testId, triggerButtonProps, }: MenuProps) => react_jsx_runtime.JSX.Element;
|
|
97
|
+
|
|
98
|
+
export { Menu as M, type MenuProps as a, type MenuItem as b, type MenuSection as c };
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import * as tailwind_variants from 'tailwind-variants';
|
|
3
|
+
import { TVProps, TVClassName } from '@fuf-stack/pixel-utils';
|
|
4
|
+
import { ButtonProps } from '@heroui/button';
|
|
5
|
+
import { DropdownItemProps, DropdownProps } from '@heroui/dropdown';
|
|
6
|
+
import { ReactNode, Key } from 'react';
|
|
7
|
+
|
|
8
|
+
/**
|
|
9
|
+
* Menu item type
|
|
10
|
+
*/
|
|
11
|
+
interface MenuItem {
|
|
12
|
+
/** unique identifier */
|
|
13
|
+
key: string;
|
|
14
|
+
/** CSS class name */
|
|
15
|
+
className?: string;
|
|
16
|
+
/** additional description shown under the label */
|
|
17
|
+
description?: string;
|
|
18
|
+
/** disables the menu item */
|
|
19
|
+
disabled?: boolean;
|
|
20
|
+
/** menu item icon */
|
|
21
|
+
icon?: ReactNode;
|
|
22
|
+
/** menu item name */
|
|
23
|
+
label: ReactNode;
|
|
24
|
+
/** click event handler */
|
|
25
|
+
onClick?: DropdownItemProps['onPress'];
|
|
26
|
+
/** e2e test identifier */
|
|
27
|
+
testId?: string;
|
|
28
|
+
}
|
|
29
|
+
/**
|
|
30
|
+
* Menu section type
|
|
31
|
+
*/
|
|
32
|
+
interface MenuSection {
|
|
33
|
+
/** unique identifier */
|
|
34
|
+
key: string;
|
|
35
|
+
/** section label */
|
|
36
|
+
label: ReactNode;
|
|
37
|
+
/** section items (array of MenuItem) */
|
|
38
|
+
items: MenuItem[];
|
|
39
|
+
}
|
|
40
|
+
declare const menuVariants: tailwind_variants.TVReturnType<{
|
|
41
|
+
[key: string]: {
|
|
42
|
+
[key: string]: tailwind_variants.ClassValue | {
|
|
43
|
+
trigger?: tailwind_variants.ClassValue;
|
|
44
|
+
item?: tailwind_variants.ClassValue;
|
|
45
|
+
};
|
|
46
|
+
};
|
|
47
|
+
} | {
|
|
48
|
+
[x: string]: {
|
|
49
|
+
[x: string]: tailwind_variants.ClassValue | {
|
|
50
|
+
trigger?: tailwind_variants.ClassValue;
|
|
51
|
+
item?: tailwind_variants.ClassValue;
|
|
52
|
+
};
|
|
53
|
+
};
|
|
54
|
+
} | {}, {
|
|
55
|
+
item: string;
|
|
56
|
+
trigger: string;
|
|
57
|
+
}, undefined, {
|
|
58
|
+
[key: string]: {
|
|
59
|
+
[key: string]: tailwind_variants.ClassValue | {
|
|
60
|
+
trigger?: tailwind_variants.ClassValue;
|
|
61
|
+
item?: tailwind_variants.ClassValue;
|
|
62
|
+
};
|
|
63
|
+
};
|
|
64
|
+
} | {}, {
|
|
65
|
+
item: string;
|
|
66
|
+
trigger: string;
|
|
67
|
+
}, tailwind_variants.TVReturnType<unknown, {
|
|
68
|
+
item: string;
|
|
69
|
+
trigger: string;
|
|
70
|
+
}, undefined, unknown, unknown, undefined>>;
|
|
71
|
+
type VariantProps = TVProps<typeof menuVariants>;
|
|
72
|
+
type ClassName = TVClassName<typeof menuVariants>;
|
|
73
|
+
interface MenuProps extends VariantProps {
|
|
74
|
+
/** sets HTML aria-label attribute */
|
|
75
|
+
ariaLabel?: string;
|
|
76
|
+
/** child components */
|
|
77
|
+
children?: ReactNode;
|
|
78
|
+
/** CSS class name */
|
|
79
|
+
className?: ClassName;
|
|
80
|
+
/** menu item structure */
|
|
81
|
+
items: (MenuSection | MenuItem)[];
|
|
82
|
+
/** disable menu trigger */
|
|
83
|
+
isDisabled?: boolean;
|
|
84
|
+
/** placement of the menu */
|
|
85
|
+
placement?: DropdownProps['placement'];
|
|
86
|
+
/** called if item is selected */
|
|
87
|
+
onAction?: (key: Key) => void;
|
|
88
|
+
/** HTML data-testid attribute used in e2e tests */
|
|
89
|
+
testId?: string;
|
|
90
|
+
/** When defined a Button will be rendered as trigger (with provided props) instead of unstyled html button */
|
|
91
|
+
triggerButtonProps?: Pick<ButtonProps, 'aria-label' | 'className' | 'color' | 'disableAnimation' | 'disabled' | 'size' | 'variant'>;
|
|
92
|
+
}
|
|
93
|
+
/**
|
|
94
|
+
* Dropdown menu component based on [HeroUI Dropdown](https://www.heroui.com//docs/components/dropdown)
|
|
95
|
+
*/
|
|
96
|
+
declare const Menu: ({ ariaLabel, children, className: _className, isDisabled, items, onAction, placement, testId, triggerButtonProps, }: MenuProps) => react_jsx_runtime.JSX.Element;
|
|
97
|
+
|
|
98
|
+
export { Menu as M, type MenuProps as a, type MenuItem as b, type MenuSection as c };
|
package/dist/Modal/index.cjs
CHANGED
|
@@ -2,11 +2,11 @@
|
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
|
|
5
|
-
var
|
|
5
|
+
var _chunkDTG27JQ7cjs = require('../chunk-DTG27JQ7.cjs');
|
|
6
6
|
require('../chunk-D4TLDLEX.cjs');
|
|
7
7
|
|
|
8
8
|
|
|
9
9
|
|
|
10
10
|
|
|
11
|
-
exports.Modal =
|
|
11
|
+
exports.Modal = _chunkDTG27JQ7cjs.Modal_default; exports.default = _chunkDTG27JQ7cjs.Modal_default2; exports.modalVariants = _chunkDTG27JQ7cjs.modalVariants;
|
|
12
12
|
//# sourceMappingURL=index.cjs.map
|
package/dist/Modal/index.js
CHANGED
|
@@ -19,7 +19,7 @@ var accordionVariants = _pixelutils.tv.call(void 0, {
|
|
|
19
19
|
subtitle: "",
|
|
20
20
|
title: "",
|
|
21
21
|
titleWrapper: "",
|
|
22
|
-
trigger: "",
|
|
22
|
+
trigger: "cursor-pointer",
|
|
23
23
|
// outer accordion wrapper
|
|
24
24
|
wrapper: "px-0"
|
|
25
25
|
},
|
|
@@ -99,4 +99,4 @@ var Accordion_default2 = Accordion_default;
|
|
|
99
99
|
|
|
100
100
|
|
|
101
101
|
exports.accordionVariants = accordionVariants; exports.Accordion_default = Accordion_default; exports.Accordion_default2 = Accordion_default2;
|
|
102
|
-
//# sourceMappingURL=chunk-
|
|
102
|
+
//# sourceMappingURL=chunk-3LEEMSTG.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-3LEEMSTG.cjs","../src/Accordion/Accordion.tsx","../src/Accordion/index.ts"],"names":["Accordion_default"],"mappings":"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","file":"/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-3LEEMSTG.cjs","sourcesContent":[null,"import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { DividerProps } from '@heroui/divider';\nimport type { ReactNode } from 'react';\n\nimport {\n Accordion as HeroAccordion,\n AccordionItem as HeroAccordionItem,\n} from '@heroui/accordion';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\n// accordion styling variants\n// see: https://www.heroui.com//docs/components/accordion#accordion-item-slots\nexport const accordionVariants = tv({\n slots: {\n base: '',\n content: 'px-4',\n heading: 'px-4',\n indicator: '',\n startContent: '',\n subtitle: '',\n title: '',\n titleWrapper: '',\n trigger: 'cursor-pointer',\n // outer accordion wrapper\n wrapper: 'px-0',\n },\n variants: {\n indicatorLeft: {\n true: {\n content: 'pl-7',\n indicator: '-rotate-180 data-[open=true]:-rotate-90',\n trigger: 'flex-row-reverse',\n },\n },\n showDivider: {\n true: {\n wrapper: 'divide-divider divide-y divide-solid',\n },\n },\n showBottomTopDivider: {\n true: {\n wrapper: 'border-divider border-t border-b border-solid',\n },\n },\n },\n});\n\nexport interface AccordionItemProps {\n /** Content of the accordion item */\n children: ReactNode;\n /** Disables the accordion item */\n disabled?: boolean;\n /** Accordion item title */\n title: ReactNode;\n /** Accordion item subtitle */\n subtitle?: ReactNode;\n}\n\ntype VariantProps = TVProps<typeof accordionVariants>;\ntype ClassName = TVClassName<typeof accordionVariants>;\n\nexport interface AccordionProps extends VariantProps {\n /** Props for AccordionItems, will render the accordion items programmatically */\n accordionItems: AccordionItemProps[];\n /** CSS class name */\n className?: ClassName;\n /** Array of keys for the AccordionItem(s) to be expanded by default */\n defaultSelectedKeys?: undefined | 'all' | Iterable<number | string>;\n /** Disables the Accordion */\n disabled?: boolean;\n /** Array of keys for the AccordionItems to disable */\n disabledKeys?: Iterable<number | string>;\n /** Force always one AccordionItem to be open. */\n disallowEmptySelection?: boolean;\n /** props for styling the Divider */\n dividerProps?: DividerProps;\n /** Hide the expanded/collapsed indicator icon */\n hideIndicator?: boolean;\n /** Callback function for when a Accordion Item is expanded or collapsed */\n onSelectionChange?: (keys: 'all' | Iterable<number | string>) => unknown;\n /** Selected keys (controlled) */\n selectedKeys?: undefined | 'all' | Iterable<number | string>;\n /** Set whether multiple or only a single AccordionItems can be expanded */\n selectionMode?: 'single' | 'multiple';\n /** Enable or disable the divider between each AccordionItem */\n showDivider?: boolean;\n /** Style variant of the Accordion */\n variant?: 'light' | 'shadow' | 'bordered' | 'splitted';\n}\n\n/**\n * Accordion component based on [HeroUI Accordion](https://www.heroui.com//docs/components/accordion)\n */\nconst Accordion = ({\n accordionItems,\n className: _className = undefined,\n defaultSelectedKeys = [],\n disabled = false,\n disabledKeys = [],\n disallowEmptySelection = false,\n dividerProps = {},\n indicatorLeft = false,\n onSelectionChange = undefined,\n selectedKeys = undefined,\n selectionMode = 'multiple',\n showDivider = true,\n variant = 'light',\n}: AccordionProps) => {\n // itemClasses from className slots\n const variants = accordionVariants({\n indicatorLeft,\n showDivider: showDivider && variant !== 'splitted',\n showBottomTopDivider: showDivider && variant === 'light',\n });\n const classNames = variantsToClassNames(variants, _className, 'wrapper');\n\n return (\n <HeroAccordion\n className={classNames.wrapper}\n defaultSelectedKeys={defaultSelectedKeys}\n disabledKeys={disabledKeys}\n disallowEmptySelection={disallowEmptySelection}\n dividerProps={dividerProps}\n isDisabled={disabled}\n itemClasses={classNames}\n onSelectionChange={onSelectionChange}\n selectedKeys={selectedKeys}\n selectionMode={selectionMode}\n showDivider={false}\n variant={variant}\n >\n {accordionItems.map((item, index) => (\n <HeroAccordionItem\n // eslint-disable-next-line react/no-array-index-key\n key={index}\n isDisabled={disabled || item?.disabled}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...item}\n />\n ))}\n </HeroAccordion>\n );\n};\n\nexport default Accordion;\n","import Accordion, { accordionVariants } from './Accordion';\n\nexport type { AccordionProps, AccordionItemProps } from './Accordion';\n\nexport { Accordion, accordionVariants };\n\nexport default Accordion;\n"]}
|
|
@@ -12,10 +12,10 @@ var modalVariants = _pixelutils.tv.call(void 0, {
|
|
|
12
12
|
slots: {
|
|
13
13
|
backdrop: "",
|
|
14
14
|
base: "",
|
|
15
|
-
body: "",
|
|
15
|
+
body: "py-4",
|
|
16
16
|
closeButton: "",
|
|
17
|
-
footer: "",
|
|
18
|
-
header: "",
|
|
17
|
+
footer: "border-t-divider border-t",
|
|
18
|
+
header: "border-b-divider border-b",
|
|
19
19
|
wrapper: ""
|
|
20
20
|
},
|
|
21
21
|
variants: {
|
|
@@ -72,4 +72,4 @@ var Modal_default2 = Modal_default;
|
|
|
72
72
|
|
|
73
73
|
|
|
74
74
|
exports.modalVariants = modalVariants; exports.Modal_default = Modal_default; exports.Modal_default2 = Modal_default2;
|
|
75
|
-
//# sourceMappingURL=chunk-
|
|
75
|
+
//# sourceMappingURL=chunk-DTG27JQ7.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-DTG27JQ7.cjs","../src/Modal/Modal.tsx","../src/Modal/index.ts"],"names":[],"mappings":"AAAA;ACIA;AACE;AACA;AACA;AACA;AACA;AAAe,sCACV;AAEP,oDAAyC;AAmF/B,+CAAA;AAhFH,IAAM,cAAA,EAAgB,4BAAA;AAAG,EAC9B,KAAA,EAAO;AAAA,IACL,QAAA,EAAU,EAAA;AAAA,IACV,IAAA,EAAM,EAAA;AAAA,IACN,IAAA,EAAM,MAAA;AAAA,IACN,WAAA,EAAa,EAAA;AAAA,IACb,MAAA,EAAQ,2BAAA;AAAA,IACR,MAAA,EAAQ,2BAAA;AAAA,IACR,OAAA,EAAS;AAAA,EACX,CAAA;AAAA,EACA,QAAA,EAAU;AAAA,IACR,IAAA,EAAM;AAAA,MACJ,EAAA,EAAI,EAAE,IAAA,EAAM,WAAW,CAAA;AAAA,MACvB,EAAA,EAAI,EAAE,IAAA,EAAM,WAAW,CAAA;AAAA,MACvB,EAAA,EAAI,EAAE,IAAA,EAAM,WAAW,CAAA;AAAA,MACvB,EAAA,EAAI,EAAE,IAAA,EAAM,YAAY,CAAA;AAAA,MACxB,IAAA,EAAM,EAAE,IAAA,EAAM,uBAAuB;AAAA,IACvC;AAAA,EACF;AACF,CAAC,CAAA;AA+BD,IAAM,MAAA,EAAQ,CAAC;AAAA,EACb,SAAA,EAAW,IAAA;AAAA,EACX,UAAA,EAAY,KAAA,CAAA;AAAA,EACZ,iBAAA,EAAmB,KAAA;AAAA,EACnB,OAAA,EAAS,KAAA,CAAA;AAAA,EACT,OAAA,EAAS,KAAA,CAAA;AAAA,EACT,MAAA;AAAA,EACA,OAAA;AAAA,EACA,gBAAA,EAAkB,KAAA,CAAA;AAAA,EAClB,KAAA,EAAO,IAAA;AAAA,EACP,OAAA,EAAS,KAAA;AACX,CAAA,EAAA,GAAkB;AAEhB,EAAA,MAAM,SAAA,EAAW,aAAA,CAAc,EAAE,KAAK,CAAC,CAAA;AACvC,EAAA,MAAM,WAAA,EAAa,8CAAA,QAAqB,EAAU,SAAA,EAAW,MAAM,CAAA;AAEnE,EAAA,uBACE,6BAAA;AAAA,IAAC,YAAA;AAAA,IAAA;AAAA,MACC,QAAA,EAAS,QAAA;AAAA,MACT,UAAA;AAAA,MACA,aAAA,EAAa,MAAA;AAAA,MACb,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,OAAA;AAAA,MACA,SAAA,EAAU,QAAA;AAAA,MACV,eAAA;AAAA,MACA,cAAA,EAAe,QAAA;AAAA,MAEf,QAAA,kBAAA,6BAAA,mBAAC,EAAA,EAAiB,aAAA,EAAa,OAAA,EAAS,CAAA,MAAA,EAAS,MAAM,CAAA,EAAA;AAGb,QAAA;AACK,wBAAA;AACL,QAAA;AAG1C,MAAA;AAAA,IAAA;AACF,EAAA;AAEJ;AAEe;ADzCiF;AACA;AE5DjF;AF8DiF;AACA;AACA;AACA;AACA;AACA","file":"/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-DTG27JQ7.cjs","sourcesContent":[null,"import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ModalProps as HeroModalProps } from '@heroui/modal';\nimport type { ReactNode } from 'react';\n\nimport {\n Modal as HeroModal,\n ModalBody as HeroModalBody,\n ModalContent as HeroModalContent,\n ModalFooter as HeroModalFooter,\n ModalHeader as HeroModalHeader,\n} from '@heroui/modal';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\n// modal variants\nexport const modalVariants = tv({\n slots: {\n backdrop: '',\n base: '',\n body: 'py-4',\n closeButton: '',\n footer: 'border-t-divider border-t',\n header: 'border-b-divider border-b',\n wrapper: '',\n },\n variants: {\n size: {\n sm: { base: 'max-w-sm' },\n md: { base: 'max-w-md' },\n lg: { base: 'max-w-lg' },\n xl: { base: 'max-w-5xl' },\n full: { base: 'h-[80dvh] max-w-full' },\n },\n },\n});\n\ntype VariantProps = TVProps<typeof modalVariants>;\ntype ClassName = TVClassName<typeof modalVariants>;\n\nexport interface ModalProps extends VariantProps {\n /** modal body content */\n children?: ReactNode;\n /** CSS class name */\n className?: ClassName;\n /** Disable animations completely */\n disableAnimation?: boolean;\n /** modal footer */\n footer?: ReactNode;\n /** modal header */\n header?: ReactNode;\n /** open state (controlled) */\n isOpen: boolean;\n /** close event handler */\n onClose: () => void;\n /** The container element in which the overlay portal will be placed */\n portalContainer?: HeroModalProps['portalContainer'];\n /** modal size */\n size?: VariantProps['size'];\n /** HTML data-testid attribute used in e2e tests */\n testId?: string;\n}\n\n/**\n * Modal component based on [HeroUI Modal](https://www.heroui.com//docs/components/modal)\n */\nconst Modal = ({\n children = null,\n className = undefined,\n disableAnimation = false,\n footer = undefined,\n header = undefined,\n isOpen,\n onClose,\n portalContainer = undefined,\n size = 'md',\n testId = undefined,\n}: ModalProps) => {\n // classNames from slots\n const variants = modalVariants({ size });\n const classNames = variantsToClassNames(variants, className, 'base');\n\n return (\n <HeroModal\n backdrop=\"opaque\"\n classNames={classNames}\n data-testid={testId}\n disableAnimation={disableAnimation}\n isOpen={isOpen}\n onClose={onClose}\n placement=\"center\"\n portalContainer={portalContainer}\n scrollBehavior=\"inside\"\n >\n <HeroModalContent data-testid={testId ? `modal_${testId}` : 'modal'}>\n {() => (\n <>\n {header && <HeroModalHeader>{header}</HeroModalHeader>}\n <HeroModalBody id=\"modal_body\">{children}</HeroModalBody>\n {footer && <HeroModalFooter>{footer}</HeroModalFooter>}\n </>\n )}\n </HeroModalContent>\n </HeroModal>\n );\n};\n\nexport default Modal;\n","import Modal, { modalVariants } from './Modal';\n\nexport type { ModalProps } from './Modal';\n\nexport { Modal, modalVariants };\n\nexport default Modal;\n"]}
|
|
@@ -12,10 +12,10 @@ var modalVariants = tv({
|
|
|
12
12
|
slots: {
|
|
13
13
|
backdrop: "",
|
|
14
14
|
base: "",
|
|
15
|
-
body: "",
|
|
15
|
+
body: "py-4",
|
|
16
16
|
closeButton: "",
|
|
17
|
-
footer: "",
|
|
18
|
-
header: "",
|
|
17
|
+
footer: "border-t-divider border-t",
|
|
18
|
+
header: "border-b-divider border-b",
|
|
19
19
|
wrapper: ""
|
|
20
20
|
},
|
|
21
21
|
variants: {
|
|
@@ -72,4 +72,4 @@ export {
|
|
|
72
72
|
Modal_default,
|
|
73
73
|
Modal_default2
|
|
74
74
|
};
|
|
75
|
-
//# sourceMappingURL=chunk-
|
|
75
|
+
//# sourceMappingURL=chunk-MK2S3QUK.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["../src/Modal/Modal.tsx","../src/Modal/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ModalProps as HeroModalProps } from '@heroui/modal';\nimport type { ReactNode } from 'react';\n\nimport {\n Modal as HeroModal,\n ModalBody as HeroModalBody,\n ModalContent as HeroModalContent,\n ModalFooter as HeroModalFooter,\n ModalHeader as HeroModalHeader,\n} from '@heroui/modal';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\n// modal variants\nexport const modalVariants = tv({\n slots: {\n backdrop: '',\n base: '',\n body: 'py-4',\n closeButton: '',\n footer: 'border-t-divider border-t',\n header: 'border-b-divider border-b',\n wrapper: '',\n },\n variants: {\n size: {\n sm: { base: 'max-w-sm' },\n md: { base: 'max-w-md' },\n lg: { base: 'max-w-lg' },\n xl: { base: 'max-w-5xl' },\n full: { base: 'h-[80dvh] max-w-full' },\n },\n },\n});\n\ntype VariantProps = TVProps<typeof modalVariants>;\ntype ClassName = TVClassName<typeof modalVariants>;\n\nexport interface ModalProps extends VariantProps {\n /** modal body content */\n children?: ReactNode;\n /** CSS class name */\n className?: ClassName;\n /** Disable animations completely */\n disableAnimation?: boolean;\n /** modal footer */\n footer?: ReactNode;\n /** modal header */\n header?: ReactNode;\n /** open state (controlled) */\n isOpen: boolean;\n /** close event handler */\n onClose: () => void;\n /** The container element in which the overlay portal will be placed */\n portalContainer?: HeroModalProps['portalContainer'];\n /** modal size */\n size?: VariantProps['size'];\n /** HTML data-testid attribute used in e2e tests */\n testId?: string;\n}\n\n/**\n * Modal component based on [HeroUI Modal](https://www.heroui.com//docs/components/modal)\n */\nconst Modal = ({\n children = null,\n className = undefined,\n disableAnimation = false,\n footer = undefined,\n header = undefined,\n isOpen,\n onClose,\n portalContainer = undefined,\n size = 'md',\n testId = undefined,\n}: ModalProps) => {\n // classNames from slots\n const variants = modalVariants({ size });\n const classNames = variantsToClassNames(variants, className, 'base');\n\n return (\n <HeroModal\n backdrop=\"opaque\"\n classNames={classNames}\n data-testid={testId}\n disableAnimation={disableAnimation}\n isOpen={isOpen}\n onClose={onClose}\n placement=\"center\"\n portalContainer={portalContainer}\n scrollBehavior=\"inside\"\n >\n <HeroModalContent data-testid={testId ? `modal_${testId}` : 'modal'}>\n {() => (\n <>\n {header && <HeroModalHeader>{header}</HeroModalHeader>}\n <HeroModalBody id=\"modal_body\">{children}</HeroModalBody>\n {footer && <HeroModalFooter>{footer}</HeroModalFooter>}\n </>\n )}\n </HeroModalContent>\n </HeroModal>\n );\n};\n\nexport default Modal;\n","import Modal, { modalVariants } from './Modal';\n\nexport type { ModalProps } from './Modal';\n\nexport { Modal, modalVariants };\n\nexport default Modal;\n"],"mappings":";AAIA;AAAA,EACE,SAAS;AAAA,EACT,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB,eAAe;AAAA,EACf,eAAe;AAAA,OACV;AAEP,SAAS,IAAI,4BAA4B;AAmF/B,mBACa,KADb;AAhFH,IAAM,gBAAgB,GAAG;AAAA,EAC9B,OAAO;AAAA,IACL,UAAU;AAAA,IACV,MAAM;AAAA,IACN,MAAM;AAAA,IACN,aAAa;AAAA,IACb,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,IAAI,EAAE,MAAM,WAAW;AAAA,MACvB,IAAI,EAAE,MAAM,WAAW;AAAA,MACvB,IAAI,EAAE,MAAM,WAAW;AAAA,MACvB,IAAI,EAAE,MAAM,YAAY;AAAA,MACxB,MAAM,EAAE,MAAM,uBAAuB;AAAA,IACvC;AAAA,EACF;AACF,CAAC;AA+BD,IAAM,QAAQ,CAAC;AAAA,EACb,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,mBAAmB;AAAA,EACnB,SAAS;AAAA,EACT,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA,kBAAkB;AAAA,EAClB,OAAO;AAAA,EACP,SAAS;AACX,MAAkB;AAEhB,QAAM,WAAW,cAAc,EAAE,KAAK,CAAC;AACvC,QAAM,aAAa,qBAAqB,UAAU,WAAW,MAAM;AAEnE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAS;AAAA,MACT;AAAA,MACA,eAAa;AAAA,MACb;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAU;AAAA,MACV;AAAA,MACA,gBAAe;AAAA,MAEf,8BAAC,oBAAiB,eAAa,SAAS,SAAS,MAAM,KAAK,SACzD,gBACC,iCACG;AAAA,kBAAU,oBAAC,mBAAiB,kBAAO;AAAA,QACpC,oBAAC,iBAAc,IAAG,cAAc,UAAS;AAAA,QACxC,UAAU,oBAAC,mBAAiB,kBAAO;AAAA,SACtC,GAEJ;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,gBAAQ;;;ACpGf,IAAOA,iBAAQ;","names":["Modal_default"]}
|
|
@@ -19,7 +19,7 @@ var accordionVariants = tv({
|
|
|
19
19
|
subtitle: "",
|
|
20
20
|
title: "",
|
|
21
21
|
titleWrapper: "",
|
|
22
|
-
trigger: "",
|
|
22
|
+
trigger: "cursor-pointer",
|
|
23
23
|
// outer accordion wrapper
|
|
24
24
|
wrapper: "px-0"
|
|
25
25
|
},
|
|
@@ -99,4 +99,4 @@ export {
|
|
|
99
99
|
Accordion_default,
|
|
100
100
|
Accordion_default2
|
|
101
101
|
};
|
|
102
|
-
//# sourceMappingURL=chunk-
|
|
102
|
+
//# sourceMappingURL=chunk-OAUPTZSC.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/Accordion/Accordion.tsx","../src/Accordion/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { DividerProps } from '@heroui/divider';\nimport type { ReactNode } from 'react';\n\nimport {\n Accordion as HeroAccordion,\n AccordionItem as HeroAccordionItem,\n} from '@heroui/accordion';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\n// accordion styling variants\n// see: https://www.heroui.com//docs/components/accordion#accordion-item-slots\nexport const accordionVariants = tv({\n slots: {\n base: '',\n content: 'px-4',\n heading: 'px-4',\n indicator: '',\n startContent: '',\n subtitle: '',\n title: '',\n titleWrapper: '',\n trigger: 'cursor-pointer',\n // outer accordion wrapper\n wrapper: 'px-0',\n },\n variants: {\n indicatorLeft: {\n true: {\n content: 'pl-7',\n indicator: '-rotate-180 data-[open=true]:-rotate-90',\n trigger: 'flex-row-reverse',\n },\n },\n showDivider: {\n true: {\n wrapper: 'divide-divider divide-y divide-solid',\n },\n },\n showBottomTopDivider: {\n true: {\n wrapper: 'border-divider border-t border-b border-solid',\n },\n },\n },\n});\n\nexport interface AccordionItemProps {\n /** Content of the accordion item */\n children: ReactNode;\n /** Disables the accordion item */\n disabled?: boolean;\n /** Accordion item title */\n title: ReactNode;\n /** Accordion item subtitle */\n subtitle?: ReactNode;\n}\n\ntype VariantProps = TVProps<typeof accordionVariants>;\ntype ClassName = TVClassName<typeof accordionVariants>;\n\nexport interface AccordionProps extends VariantProps {\n /** Props for AccordionItems, will render the accordion items programmatically */\n accordionItems: AccordionItemProps[];\n /** CSS class name */\n className?: ClassName;\n /** Array of keys for the AccordionItem(s) to be expanded by default */\n defaultSelectedKeys?: undefined | 'all' | Iterable<number | string>;\n /** Disables the Accordion */\n disabled?: boolean;\n /** Array of keys for the AccordionItems to disable */\n disabledKeys?: Iterable<number | string>;\n /** Force always one AccordionItem to be open. */\n disallowEmptySelection?: boolean;\n /** props for styling the Divider */\n dividerProps?: DividerProps;\n /** Hide the expanded/collapsed indicator icon */\n hideIndicator?: boolean;\n /** Callback function for when a Accordion Item is expanded or collapsed */\n onSelectionChange?: (keys: 'all' | Iterable<number | string>) => unknown;\n /** Selected keys (controlled) */\n selectedKeys?: undefined | 'all' | Iterable<number | string>;\n /** Set whether multiple or only a single AccordionItems can be expanded */\n selectionMode?: 'single' | 'multiple';\n /** Enable or disable the divider between each AccordionItem */\n showDivider?: boolean;\n /** Style variant of the Accordion */\n variant?: 'light' | 'shadow' | 'bordered' | 'splitted';\n}\n\n/**\n * Accordion component based on [HeroUI Accordion](https://www.heroui.com//docs/components/accordion)\n */\nconst Accordion = ({\n accordionItems,\n className: _className = undefined,\n defaultSelectedKeys = [],\n disabled = false,\n disabledKeys = [],\n disallowEmptySelection = false,\n dividerProps = {},\n indicatorLeft = false,\n onSelectionChange = undefined,\n selectedKeys = undefined,\n selectionMode = 'multiple',\n showDivider = true,\n variant = 'light',\n}: AccordionProps) => {\n // itemClasses from className slots\n const variants = accordionVariants({\n indicatorLeft,\n showDivider: showDivider && variant !== 'splitted',\n showBottomTopDivider: showDivider && variant === 'light',\n });\n const classNames = variantsToClassNames(variants, _className, 'wrapper');\n\n return (\n <HeroAccordion\n className={classNames.wrapper}\n defaultSelectedKeys={defaultSelectedKeys}\n disabledKeys={disabledKeys}\n disallowEmptySelection={disallowEmptySelection}\n dividerProps={dividerProps}\n isDisabled={disabled}\n itemClasses={classNames}\n onSelectionChange={onSelectionChange}\n selectedKeys={selectedKeys}\n selectionMode={selectionMode}\n showDivider={false}\n variant={variant}\n >\n {accordionItems.map((item, index) => (\n <HeroAccordionItem\n // eslint-disable-next-line react/no-array-index-key\n key={index}\n isDisabled={disabled || item?.disabled}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...item}\n />\n ))}\n </HeroAccordion>\n );\n};\n\nexport default Accordion;\n","import Accordion, { accordionVariants } from './Accordion';\n\nexport type { AccordionProps, AccordionItemProps } from './Accordion';\n\nexport { Accordion, accordionVariants };\n\nexport default Accordion;\n"],"mappings":";;;;;AAIA;AAAA,EACE,aAAa;AAAA,EACb,iBAAiB;AAAA,OACZ;AAEP,SAAS,IAAI,4BAA4B;AA4HjC;AAxHD,IAAM,oBAAoB,GAAG;AAAA,EAClC,OAAO;AAAA,IACL,MAAM;AAAA,IACN,SAAS;AAAA,IACT,SAAS;AAAA,IACT,WAAW;AAAA,IACX,cAAc;AAAA,IACd,UAAU;AAAA,IACV,OAAO;AAAA,IACP,cAAc;AAAA,IACd,SAAS;AAAA;AAAA,IAET,SAAS;AAAA,EACX;AAAA,EACA,UAAU;AAAA,IACR,eAAe;AAAA,MACb,MAAM;AAAA,QACJ,SAAS;AAAA,QACT,WAAW;AAAA,QACX,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,aAAa;AAAA,MACX,MAAM;AAAA,QACJ,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,sBAAsB;AAAA,MACpB,MAAM;AAAA,QACJ,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AACF,CAAC;AAgDD,IAAM,YAAY,CAAC;AAAA,EACjB;AAAA,EACA,WAAW,aAAa;AAAA,EACxB,sBAAsB,CAAC;AAAA,EACvB,WAAW;AAAA,EACX,eAAe,CAAC;AAAA,EAChB,yBAAyB;AAAA,EACzB,eAAe,CAAC;AAAA,EAChB,gBAAgB;AAAA,EAChB,oBAAoB;AAAA,EACpB,eAAe;AAAA,EACf,gBAAgB;AAAA,EAChB,cAAc;AAAA,EACd,UAAU;AACZ,MAAsB;AAEpB,QAAM,WAAW,kBAAkB;AAAA,IACjC;AAAA,IACA,aAAa,eAAe,YAAY;AAAA,IACxC,sBAAsB,eAAe,YAAY;AAAA,EACnD,CAAC;AACD,QAAM,aAAa,qBAAqB,UAAU,YAAY,SAAS;AAEvE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,WAAW;AAAA,MACtB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,YAAY;AAAA,MACZ,aAAa;AAAA,MACb;AAAA,MACA;AAAA,MACA;AAAA,MACA,aAAa;AAAA,MACb;AAAA,MAEC,yBAAe,IAAI,CAAC,MAAM,UACzB;AAAA,QAAC;AAAA;AAAA,UAGC,YAAY,aAAY,6BAAM;AAAA,WAE1B;AAAA,QAHC;AAAA,MAIP,CACD;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,oBAAQ;;;AC3If,IAAOA,qBAAQ;","names":["Accordion_default"]}
|
|
@@ -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
|
@@ -52,11 +52,11 @@ var _chunk2OJHNNCUcjs = require('./chunk-2OJHNNCU.cjs');
|
|
|
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
|
-
var
|
|
59
|
+
var _chunkDTG27JQ7cjs = require('./chunk-DTG27JQ7.cjs');
|
|
60
60
|
|
|
61
61
|
|
|
62
62
|
var _chunkWZZMB5CIcjs = require('./chunk-WZZMB5CI.cjs');
|
|
@@ -64,7 +64,7 @@ require('./chunk-FUBGS3G4.cjs');
|
|
|
64
64
|
|
|
65
65
|
|
|
66
66
|
|
|
67
|
-
var
|
|
67
|
+
var _chunk3LEEMSTGcjs = require('./chunk-3LEEMSTG.cjs');
|
|
68
68
|
|
|
69
69
|
|
|
70
70
|
|
|
@@ -131,5 +131,5 @@ require('./chunk-D4TLDLEX.cjs');
|
|
|
131
131
|
|
|
132
132
|
|
|
133
133
|
|
|
134
|
-
exports.Accordion =
|
|
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 = _chunkWFR7OUY7cjs.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;
|
|
135
135
|
//# sourceMappingURL=index.cjs.map
|
package/dist/index.d.cts
CHANGED
|
@@ -10,7 +10,7 @@ export { C as Card, a as CardProps, c as cardVariants } from './Card-OBRZ-ssX.cj
|
|
|
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
15
|
export { _ as Popover, P as PopoverProps } from './Popover-BUKzm3MQ.cjs';
|
|
16
16
|
export { P as ProgressCircular, a as ProgressCircularProps, p as progressCircularVariants } from './ProgressCircular-CkZsOW4R.cjs';
|
package/dist/index.d.ts
CHANGED
|
@@ -10,7 +10,7 @@ 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
15
|
export { _ as Popover, P as PopoverProps } from './Popover-D6Qv56ms.js';
|
|
16
16
|
export { P as ProgressCircular, a as ProgressCircularProps, p as progressCircularVariants } from './ProgressCircular-CkZsOW4R.js';
|
package/dist/index.js
CHANGED
|
@@ -52,11 +52,11 @@ import {
|
|
|
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
|
-
} from "./chunk-
|
|
59
|
+
} from "./chunk-MK2S3QUK.js";
|
|
60
60
|
import {
|
|
61
61
|
Popover_default
|
|
62
62
|
} from "./chunk-7QUYJEGU.js";
|
|
@@ -64,7 +64,7 @@ import "./chunk-WDXULV6M.js";
|
|
|
64
64
|
import {
|
|
65
65
|
Accordion_default,
|
|
66
66
|
accordionVariants
|
|
67
|
-
} from "./chunk-
|
|
67
|
+
} from "./chunk-OAUPTZSC.js";
|
|
68
68
|
import {
|
|
69
69
|
Alert_default,
|
|
70
70
|
alertVariants
|
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.
|
|
5
|
+
"version": "1.2.0",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"main": "./dist/index.cjs",
|
|
8
8
|
"module": "./dist/index.js",
|
|
@@ -183,7 +183,7 @@
|
|
|
183
183
|
"framer-motion": "12.23.12",
|
|
184
184
|
"next-themes": "0.4.6",
|
|
185
185
|
"react-icons": "5.5.0",
|
|
186
|
-
"@fuf-stack/pixel-utils": "1.0.
|
|
186
|
+
"@fuf-stack/pixel-utils": "1.0.4"
|
|
187
187
|
},
|
|
188
188
|
"devDependencies": {
|
|
189
189
|
"@types/debug": "4.1.12",
|
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/Accordion/Accordion.tsx","../src/Accordion/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { DividerProps } from '@heroui/divider';\nimport type { ReactNode } from 'react';\n\nimport {\n Accordion as HeroAccordion,\n AccordionItem as HeroAccordionItem,\n} from '@heroui/accordion';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\n// accordion styling variants\n// see: https://www.heroui.com//docs/components/accordion#accordion-item-slots\nexport const accordionVariants = tv({\n slots: {\n base: '',\n content: 'px-4',\n heading: 'px-4',\n indicator: '',\n startContent: '',\n subtitle: '',\n title: '',\n titleWrapper: '',\n trigger: '',\n // outer accordion wrapper\n wrapper: 'px-0',\n },\n variants: {\n indicatorLeft: {\n true: {\n content: 'pl-7',\n indicator: '-rotate-180 data-[open=true]:-rotate-90',\n trigger: 'flex-row-reverse',\n },\n },\n showDivider: {\n true: {\n wrapper: 'divide-divider divide-y divide-solid',\n },\n },\n showBottomTopDivider: {\n true: {\n wrapper: 'border-divider border-t border-b border-solid',\n },\n },\n },\n});\n\nexport interface AccordionItemProps {\n /** Content of the accordion item */\n children: ReactNode;\n /** Disables the accordion item */\n disabled?: boolean;\n /** Accordion item title */\n title: ReactNode;\n /** Accordion item subtitle */\n subtitle?: ReactNode;\n}\n\ntype VariantProps = TVProps<typeof accordionVariants>;\ntype ClassName = TVClassName<typeof accordionVariants>;\n\nexport interface AccordionProps extends VariantProps {\n /** Props for AccordionItems, will render the accordion items programmatically */\n accordionItems: AccordionItemProps[];\n /** CSS class name */\n className?: ClassName;\n /** Array of keys for the AccordionItem(s) to be expanded by default */\n defaultSelectedKeys?: undefined | 'all' | Iterable<number | string>;\n /** Disables the Accordion */\n disabled?: boolean;\n /** Array of keys for the AccordionItems to disable */\n disabledKeys?: Iterable<number | string>;\n /** Force always one AccordionItem to be open. */\n disallowEmptySelection?: boolean;\n /** props for styling the Divider */\n dividerProps?: DividerProps;\n /** Hide the expanded/collapsed indicator icon */\n hideIndicator?: boolean;\n /** Callback function for when a Accordion Item is expanded or collapsed */\n onSelectionChange?: (keys: 'all' | Iterable<number | string>) => unknown;\n /** Selected keys (controlled) */\n selectedKeys?: undefined | 'all' | Iterable<number | string>;\n /** Set whether multiple or only a single AccordionItems can be expanded */\n selectionMode?: 'single' | 'multiple';\n /** Enable or disable the divider between each AccordionItem */\n showDivider?: boolean;\n /** Style variant of the Accordion */\n variant?: 'light' | 'shadow' | 'bordered' | 'splitted';\n}\n\n/**\n * Accordion component based on [HeroUI Accordion](https://www.heroui.com//docs/components/accordion)\n */\nconst Accordion = ({\n accordionItems,\n className: _className = undefined,\n defaultSelectedKeys = [],\n disabled = false,\n disabledKeys = [],\n disallowEmptySelection = false,\n dividerProps = {},\n indicatorLeft = false,\n onSelectionChange = undefined,\n selectedKeys = undefined,\n selectionMode = 'multiple',\n showDivider = true,\n variant = 'light',\n}: AccordionProps) => {\n // itemClasses from className slots\n const variants = accordionVariants({\n indicatorLeft,\n showDivider: showDivider && variant !== 'splitted',\n showBottomTopDivider: showDivider && variant === 'light',\n });\n const classNames = variantsToClassNames(variants, _className, 'wrapper');\n\n return (\n <HeroAccordion\n className={classNames.wrapper}\n defaultSelectedKeys={defaultSelectedKeys}\n disabledKeys={disabledKeys}\n disallowEmptySelection={disallowEmptySelection}\n dividerProps={dividerProps}\n isDisabled={disabled}\n itemClasses={classNames}\n onSelectionChange={onSelectionChange}\n selectedKeys={selectedKeys}\n selectionMode={selectionMode}\n showDivider={false}\n variant={variant}\n >\n {accordionItems.map((item, index) => (\n <HeroAccordionItem\n // eslint-disable-next-line react/no-array-index-key\n key={index}\n isDisabled={disabled || item?.disabled}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...item}\n />\n ))}\n </HeroAccordion>\n );\n};\n\nexport default Accordion;\n","import Accordion, { accordionVariants } from './Accordion';\n\nexport type { AccordionProps, AccordionItemProps } from './Accordion';\n\nexport { Accordion, accordionVariants };\n\nexport default Accordion;\n"],"mappings":";;;;;AAIA;AAAA,EACE,aAAa;AAAA,EACb,iBAAiB;AAAA,OACZ;AAEP,SAAS,IAAI,4BAA4B;AA4HjC;AAxHD,IAAM,oBAAoB,GAAG;AAAA,EAClC,OAAO;AAAA,IACL,MAAM;AAAA,IACN,SAAS;AAAA,IACT,SAAS;AAAA,IACT,WAAW;AAAA,IACX,cAAc;AAAA,IACd,UAAU;AAAA,IACV,OAAO;AAAA,IACP,cAAc;AAAA,IACd,SAAS;AAAA;AAAA,IAET,SAAS;AAAA,EACX;AAAA,EACA,UAAU;AAAA,IACR,eAAe;AAAA,MACb,MAAM;AAAA,QACJ,SAAS;AAAA,QACT,WAAW;AAAA,QACX,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,aAAa;AAAA,MACX,MAAM;AAAA,QACJ,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,sBAAsB;AAAA,MACpB,MAAM;AAAA,QACJ,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AACF,CAAC;AAgDD,IAAM,YAAY,CAAC;AAAA,EACjB;AAAA,EACA,WAAW,aAAa;AAAA,EACxB,sBAAsB,CAAC;AAAA,EACvB,WAAW;AAAA,EACX,eAAe,CAAC;AAAA,EAChB,yBAAyB;AAAA,EACzB,eAAe,CAAC;AAAA,EAChB,gBAAgB;AAAA,EAChB,oBAAoB;AAAA,EACpB,eAAe;AAAA,EACf,gBAAgB;AAAA,EAChB,cAAc;AAAA,EACd,UAAU;AACZ,MAAsB;AAEpB,QAAM,WAAW,kBAAkB;AAAA,IACjC;AAAA,IACA,aAAa,eAAe,YAAY;AAAA,IACxC,sBAAsB,eAAe,YAAY;AAAA,EACnD,CAAC;AACD,QAAM,aAAa,qBAAqB,UAAU,YAAY,SAAS;AAEvE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,WAAW;AAAA,MACtB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,YAAY;AAAA,MACZ,aAAa;AAAA,MACb;AAAA,MACA;AAAA,MACA;AAAA,MACA,aAAa;AAAA,MACb;AAAA,MAEC,yBAAe,IAAI,CAAC,MAAM,UACzB;AAAA,QAAC;AAAA;AAAA,UAGC,YAAY,aAAY,6BAAM;AAAA,WAE1B;AAAA,QAHC;AAAA,MAIP,CACD;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,oBAAQ;;;AC3If,IAAOA,qBAAQ;","names":["Accordion_default"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-LCOQDCO4.cjs","../src/Accordion/Accordion.tsx","../src/Accordion/index.ts"],"names":["Accordion_default"],"mappings":"AAAA;AACE;AACF,wDAA6B;AAC7B;AACA;ACAA;AACE;AACA;AAAiB,8CACZ;AAEP,oDAAyC;AA4HjC,+CAAA;AAxHD,IAAM,kBAAA,EAAoB,4BAAA;AAAG,EAClC,KAAA,EAAO;AAAA,IACL,IAAA,EAAM,EAAA;AAAA,IACN,OAAA,EAAS,MAAA;AAAA,IACT,OAAA,EAAS,MAAA;AAAA,IACT,SAAA,EAAW,EAAA;AAAA,IACX,YAAA,EAAc,EAAA;AAAA,IACd,QAAA,EAAU,EAAA;AAAA,IACV,KAAA,EAAO,EAAA;AAAA,IACP,YAAA,EAAc,EAAA;AAAA,IACd,OAAA,EAAS,EAAA;AAAA;AAAA,IAET,OAAA,EAAS;AAAA,EACX,CAAA;AAAA,EACA,QAAA,EAAU;AAAA,IACR,aAAA,EAAe;AAAA,MACb,IAAA,EAAM;AAAA,QACJ,OAAA,EAAS,MAAA;AAAA,QACT,SAAA,EAAW,yCAAA;AAAA,QACX,OAAA,EAAS;AAAA,MACX;AAAA,IACF,CAAA;AAAA,IACA,WAAA,EAAa;AAAA,MACX,IAAA,EAAM;AAAA,QACJ,OAAA,EAAS;AAAA,MACX;AAAA,IACF,CAAA;AAAA,IACA,oBAAA,EAAsB;AAAA,MACpB,IAAA,EAAM;AAAA,QACJ,OAAA,EAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AACF,CAAC,CAAA;AAgDD,IAAM,UAAA,EAAY,CAAC;AAAA,EACjB,cAAA;AAAA,EACA,SAAA,EAAW,WAAA,EAAa,KAAA,CAAA;AAAA,EACxB,oBAAA,EAAsB,CAAC,CAAA;AAAA,EACvB,SAAA,EAAW,KAAA;AAAA,EACX,aAAA,EAAe,CAAC,CAAA;AAAA,EAChB,uBAAA,EAAyB,KAAA;AAAA,EACzB,aAAA,EAAe,CAAC,CAAA;AAAA,EAChB,cAAA,EAAgB,KAAA;AAAA,EAChB,kBAAA,EAAoB,KAAA,CAAA;AAAA,EACpB,aAAA,EAAe,KAAA,CAAA;AAAA,EACf,cAAA,EAAgB,UAAA;AAAA,EAChB,YAAA,EAAc,IAAA;AAAA,EACd,QAAA,EAAU;AACZ,CAAA,EAAA,GAAsB;AAEpB,EAAA,MAAM,SAAA,EAAW,iBAAA,CAAkB;AAAA,IACjC,aAAA;AAAA,IACA,WAAA,EAAa,YAAA,GAAe,QAAA,IAAY,UAAA;AAAA,IACxC,oBAAA,EAAsB,YAAA,GAAe,QAAA,IAAY;AAAA,EACnD,CAAC,CAAA;AACD,EAAA,MAAM,WAAA,EAAa,8CAAA,QAAqB,EAAU,UAAA,EAAY,SAAS,CAAA;AAEvE,EAAA,uBACE,6BAAA;AAAA,IAAC,oBAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,UAAA,CAAW,OAAA;AAAA,MACtB,mBAAA;AAAA,MACA,YAAA;AAAA,MACA,sBAAA;AAAA,MACA,YAAA;AAAA,MACA,UAAA,EAAY,QAAA;AAAA,MACZ,WAAA,EAAa,UAAA;AAAA,MACb,iBAAA;AAAA,MACA,YAAA;AAAA,MACA,aAAA;AAAA,MACA,WAAA,EAAa,KAAA;AAAA,MACb,OAAA;AAAA,MAEC,QAAA,EAAA,cAAA,CAAe,GAAA,CAAI,CAAC,IAAA,EAAM,KAAA,EAAA,mBACzB,6BAAA;AAAA,QAAC,wBAAA;AAAA,QAAA,8CAAA;AAAA,UAGC,UAAA,EAAY,SAAA,GAAA,CAAY,KAAA,GAAA,KAAA,EAAA,KAAA,EAAA,EAAA,IAAA,CAAM,QAAA;AAAA,QAAA,CAAA,EAE1B,IAAA,CAAA;AAAA,QAHC;AAAA,MAIP,CACD;AAAA,IAAA;AAAA,EACH,CAAA;AAEJ,CAAA;AAEA,IAAO,kBAAA,EAAQ,SAAA;ADrDf;AACA;AEvFA,IAAOA,mBAAAA,EAAQ,iBAAA;AFyFf;AACA;AACE;AACA;AACA;AACF,8IAAC","file":"/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-LCOQDCO4.cjs","sourcesContent":[null,"import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { DividerProps } from '@heroui/divider';\nimport type { ReactNode } from 'react';\n\nimport {\n Accordion as HeroAccordion,\n AccordionItem as HeroAccordionItem,\n} from '@heroui/accordion';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\n// accordion styling variants\n// see: https://www.heroui.com//docs/components/accordion#accordion-item-slots\nexport const accordionVariants = tv({\n slots: {\n base: '',\n content: 'px-4',\n heading: 'px-4',\n indicator: '',\n startContent: '',\n subtitle: '',\n title: '',\n titleWrapper: '',\n trigger: '',\n // outer accordion wrapper\n wrapper: 'px-0',\n },\n variants: {\n indicatorLeft: {\n true: {\n content: 'pl-7',\n indicator: '-rotate-180 data-[open=true]:-rotate-90',\n trigger: 'flex-row-reverse',\n },\n },\n showDivider: {\n true: {\n wrapper: 'divide-divider divide-y divide-solid',\n },\n },\n showBottomTopDivider: {\n true: {\n wrapper: 'border-divider border-t border-b border-solid',\n },\n },\n },\n});\n\nexport interface AccordionItemProps {\n /** Content of the accordion item */\n children: ReactNode;\n /** Disables the accordion item */\n disabled?: boolean;\n /** Accordion item title */\n title: ReactNode;\n /** Accordion item subtitle */\n subtitle?: ReactNode;\n}\n\ntype VariantProps = TVProps<typeof accordionVariants>;\ntype ClassName = TVClassName<typeof accordionVariants>;\n\nexport interface AccordionProps extends VariantProps {\n /** Props for AccordionItems, will render the accordion items programmatically */\n accordionItems: AccordionItemProps[];\n /** CSS class name */\n className?: ClassName;\n /** Array of keys for the AccordionItem(s) to be expanded by default */\n defaultSelectedKeys?: undefined | 'all' | Iterable<number | string>;\n /** Disables the Accordion */\n disabled?: boolean;\n /** Array of keys for the AccordionItems to disable */\n disabledKeys?: Iterable<number | string>;\n /** Force always one AccordionItem to be open. */\n disallowEmptySelection?: boolean;\n /** props for styling the Divider */\n dividerProps?: DividerProps;\n /** Hide the expanded/collapsed indicator icon */\n hideIndicator?: boolean;\n /** Callback function for when a Accordion Item is expanded or collapsed */\n onSelectionChange?: (keys: 'all' | Iterable<number | string>) => unknown;\n /** Selected keys (controlled) */\n selectedKeys?: undefined | 'all' | Iterable<number | string>;\n /** Set whether multiple or only a single AccordionItems can be expanded */\n selectionMode?: 'single' | 'multiple';\n /** Enable or disable the divider between each AccordionItem */\n showDivider?: boolean;\n /** Style variant of the Accordion */\n variant?: 'light' | 'shadow' | 'bordered' | 'splitted';\n}\n\n/**\n * Accordion component based on [HeroUI Accordion](https://www.heroui.com//docs/components/accordion)\n */\nconst Accordion = ({\n accordionItems,\n className: _className = undefined,\n defaultSelectedKeys = [],\n disabled = false,\n disabledKeys = [],\n disallowEmptySelection = false,\n dividerProps = {},\n indicatorLeft = false,\n onSelectionChange = undefined,\n selectedKeys = undefined,\n selectionMode = 'multiple',\n showDivider = true,\n variant = 'light',\n}: AccordionProps) => {\n // itemClasses from className slots\n const variants = accordionVariants({\n indicatorLeft,\n showDivider: showDivider && variant !== 'splitted',\n showBottomTopDivider: showDivider && variant === 'light',\n });\n const classNames = variantsToClassNames(variants, _className, 'wrapper');\n\n return (\n <HeroAccordion\n className={classNames.wrapper}\n defaultSelectedKeys={defaultSelectedKeys}\n disabledKeys={disabledKeys}\n disallowEmptySelection={disallowEmptySelection}\n dividerProps={dividerProps}\n isDisabled={disabled}\n itemClasses={classNames}\n onSelectionChange={onSelectionChange}\n selectedKeys={selectedKeys}\n selectionMode={selectionMode}\n showDivider={false}\n variant={variant}\n >\n {accordionItems.map((item, index) => (\n <HeroAccordionItem\n // eslint-disable-next-line react/no-array-index-key\n key={index}\n isDisabled={disabled || item?.disabled}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...item}\n />\n ))}\n </HeroAccordion>\n );\n};\n\nexport default Accordion;\n","import Accordion, { accordionVariants } from './Accordion';\n\nexport type { AccordionProps, AccordionItemProps } from './Accordion';\n\nexport { Accordion, accordionVariants };\n\nexport default Accordion;\n"]}
|
package/dist/chunk-OP5W7BXY.js
DELETED
|
@@ -1,81 +0,0 @@
|
|
|
1
|
-
// src/Menu/Menu.tsx
|
|
2
|
-
import { FaEllipsisVertical } from "react-icons/fa6";
|
|
3
|
-
import { Button } from "@heroui/button";
|
|
4
|
-
import {
|
|
5
|
-
Dropdown as HeroDropdown,
|
|
6
|
-
DropdownItem as HeroDropdownItem,
|
|
7
|
-
DropdownMenu as HeroDropdownMenu,
|
|
8
|
-
DropdownSection as HeroDropdownSection,
|
|
9
|
-
DropdownTrigger as HeroDropdownTrigger
|
|
10
|
-
} from "@heroui/dropdown";
|
|
11
|
-
import { cn } from "@fuf-stack/pixel-utils";
|
|
12
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
13
|
-
var getDisabledKeys = (items) => {
|
|
14
|
-
return items.map((item) => typeof (item == null ? void 0 : item.items) === "undefined" ? item : item.items).flat().filter((item) => {
|
|
15
|
-
return Object.hasOwn(item, "disabled") && item.disabled === true;
|
|
16
|
-
}).map((item) => item.key);
|
|
17
|
-
};
|
|
18
|
-
var renderMenuItem = (item) => /* @__PURE__ */ jsx(
|
|
19
|
-
HeroDropdownItem,
|
|
20
|
-
{
|
|
21
|
-
className: item.className,
|
|
22
|
-
"data-testid": item.testId || item.key,
|
|
23
|
-
description: item.description,
|
|
24
|
-
onPress: item.onClick,
|
|
25
|
-
startContent: item.icon,
|
|
26
|
-
children: item.label
|
|
27
|
-
},
|
|
28
|
-
item.key
|
|
29
|
-
);
|
|
30
|
-
var Menu = ({
|
|
31
|
-
children = null,
|
|
32
|
-
className = void 0,
|
|
33
|
-
onAction = void 0,
|
|
34
|
-
testId = void 0,
|
|
35
|
-
isDisabled = false,
|
|
36
|
-
items
|
|
37
|
-
}) => {
|
|
38
|
-
return /* @__PURE__ */ jsxs(HeroDropdown, { isDisabled, children: [
|
|
39
|
-
/* @__PURE__ */ jsx(HeroDropdownTrigger, { className: cn(className), "data-testid": testId, children: children ? (
|
|
40
|
-
// eslint-disable-next-line react/button-has-type
|
|
41
|
-
/* @__PURE__ */ jsx("button", { children })
|
|
42
|
-
) : (
|
|
43
|
-
// INFO: we use hero button here so that ref passing works
|
|
44
|
-
/* @__PURE__ */ jsx(Button, { size: "sm", variant: "flat", className: "min-w-0", children: /* @__PURE__ */ jsx(FaEllipsisVertical, {}) })
|
|
45
|
-
) }),
|
|
46
|
-
/* @__PURE__ */ jsx(
|
|
47
|
-
HeroDropdownMenu,
|
|
48
|
-
{
|
|
49
|
-
items,
|
|
50
|
-
disabledKeys: getDisabledKeys(items),
|
|
51
|
-
onAction,
|
|
52
|
-
children: (item) => {
|
|
53
|
-
if ("items" in item) {
|
|
54
|
-
return /* @__PURE__ */ jsx(
|
|
55
|
-
HeroDropdownSection,
|
|
56
|
-
{
|
|
57
|
-
items: item.items,
|
|
58
|
-
title: item.label,
|
|
59
|
-
children: (sectionItem) => {
|
|
60
|
-
return renderMenuItem(sectionItem);
|
|
61
|
-
}
|
|
62
|
-
},
|
|
63
|
-
item.key
|
|
64
|
-
);
|
|
65
|
-
}
|
|
66
|
-
return renderMenuItem(item);
|
|
67
|
-
}
|
|
68
|
-
}
|
|
69
|
-
)
|
|
70
|
-
] });
|
|
71
|
-
};
|
|
72
|
-
var Menu_default = Menu;
|
|
73
|
-
|
|
74
|
-
// src/Menu/index.ts
|
|
75
|
-
var Menu_default2 = Menu_default;
|
|
76
|
-
|
|
77
|
-
export {
|
|
78
|
-
Menu_default,
|
|
79
|
-
Menu_default2
|
|
80
|
-
};
|
|
81
|
-
//# sourceMappingURL=chunk-OP5W7BXY.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Menu/Menu.tsx","../src/Menu/index.ts"],"sourcesContent":["import type {\n DropdownSectionProps,\n DropdownItemProps as HeroDropdownItemProps,\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 } 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\nexport interface MenuProps {\n /** child components */\n children?: ReactNode;\n /** CSS class name */\n className?: string | string[];\n /** HTML data-testid attribute used in e2e tests */\n testId?: string;\n /** menu item structure */\n items: (MenuSection | MenuItem)[];\n /** disable menu trigger */\n isDisabled?: boolean;\n /** called if item is selected */\n onAction?: (key: Key) => void;\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) => (\n <HeroDropdownItem\n className={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 children = null,\n className = undefined,\n onAction = undefined,\n testId = undefined,\n isDisabled = false,\n items,\n}: MenuProps) => {\n return (\n <HeroDropdown isDisabled={isDisabled}>\n <HeroDropdownTrigger className={cn(className)} data-testid={testId}>\n {children ? (\n // eslint-disable-next-line react/button-has-type\n <button>{children}</button>\n ) : (\n // INFO: we use hero button here so that ref passing works\n <Button size=\"sm\" variant=\"flat\" className=\"min-w-0\">\n <FaEllipsisVertical />\n </Button>\n )}\n </HeroDropdownTrigger>\n <HeroDropdownMenu\n // aria-label=\"Dynamic Actions\"\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 as MenuSection['items']}\n title={item.label as DropdownSectionProps['title']}\n key={item.key}\n >\n {(sectionItem) => {\n return renderMenuItem(sectionItem);\n }}\n </HeroDropdownSection>\n );\n }\n return renderMenuItem(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":";AAMA,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,UAAU;AAkEjB,cAwBE,YAxBF;AAdF,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,SACtB;AAAA,EAAC;AAAA;AAAA,IACC,WAAW,KAAK;AAAA,IAChB,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,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,SAAS;AAAA,EACT,aAAa;AAAA,EACb;AACF,MAAiB;AACf,SACE,qBAAC,gBAAa,YACZ;AAAA,wBAAC,uBAAoB,WAAW,GAAG,SAAS,GAAG,eAAa,QACzD;AAAA;AAAA,MAEC,oBAAC,YAAQ,UAAS;AAAA;AAAA;AAAA,MAGlB,oBAAC,UAAO,MAAK,MAAK,SAAQ,QAAO,WAAU,WACzC,8BAAC,sBAAmB,GACtB;AAAA,OAEJ;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QAEC;AAAA,QACA,cAAc,gBAAgB,KAAK;AAAA,QACnC;AAAA,QAEC,WAAC,SAAS;AACT,cAAI,WAAW,MAAM;AACnB,mBACE;AAAA,cAAC;AAAA;AAAA,gBACC,OAAO,KAAK;AAAA,gBACZ,OAAO,KAAK;AAAA,gBAGX,WAAC,gBAAgB;AAChB,yBAAO,eAAe,WAAW;AAAA,gBACnC;AAAA;AAAA,cAJK,KAAK;AAAA,YAKZ;AAAA,UAEJ;AACA,iBAAO,eAAe,IAAI;AAAA,QAC5B;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;AAEA,IAAO,eAAQ;;;AC5If,IAAOA,gBAAQ;","names":["Menu_default"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Modal/Modal.tsx","../src/Modal/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ModalProps as HeroModalProps } from '@heroui/modal';\nimport type { ReactNode } from 'react';\n\nimport {\n Modal as HeroModal,\n ModalBody as HeroModalBody,\n ModalContent as HeroModalContent,\n ModalFooter as HeroModalFooter,\n ModalHeader as HeroModalHeader,\n} from '@heroui/modal';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\n// modal variants\nexport const modalVariants = tv({\n slots: {\n backdrop: '',\n base: '',\n body: '',\n closeButton: '',\n footer: '',\n header: '',\n wrapper: '',\n },\n variants: {\n size: {\n sm: { base: 'max-w-sm' },\n md: { base: 'max-w-md' },\n lg: { base: 'max-w-lg' },\n xl: { base: 'max-w-5xl' },\n full: { base: 'h-[80dvh] max-w-full' },\n },\n },\n});\n\ntype VariantProps = TVProps<typeof modalVariants>;\ntype ClassName = TVClassName<typeof modalVariants>;\n\nexport interface ModalProps extends VariantProps {\n /** modal body content */\n children?: ReactNode;\n /** CSS class name */\n className?: ClassName;\n /** Disable animations completely */\n disableAnimation?: boolean;\n /** modal footer */\n footer?: ReactNode;\n /** modal header */\n header?: ReactNode;\n /** open state (controlled) */\n isOpen: boolean;\n /** close event handler */\n onClose: () => void;\n /** The container element in which the overlay portal will be placed */\n portalContainer?: HeroModalProps['portalContainer'];\n /** modal size */\n size?: VariantProps['size'];\n /** HTML data-testid attribute used in e2e tests */\n testId?: string;\n}\n\n/**\n * Modal component based on [HeroUI Modal](https://www.heroui.com//docs/components/modal)\n */\nconst Modal = ({\n children = null,\n className = undefined,\n disableAnimation = false,\n footer = undefined,\n header = undefined,\n isOpen,\n onClose,\n portalContainer = undefined,\n size = 'md',\n testId = undefined,\n}: ModalProps) => {\n // classNames from slots\n const variants = modalVariants({ size });\n const classNames = variantsToClassNames(variants, className, 'base');\n\n return (\n <HeroModal\n backdrop=\"opaque\"\n classNames={classNames}\n data-testid={testId}\n disableAnimation={disableAnimation}\n isOpen={isOpen}\n onClose={onClose}\n placement=\"center\"\n portalContainer={portalContainer}\n scrollBehavior=\"inside\"\n >\n <HeroModalContent data-testid={testId ? `modal_${testId}` : 'modal'}>\n {() => (\n <>\n {header && <HeroModalHeader>{header}</HeroModalHeader>}\n <HeroModalBody id=\"modal_body\">{children}</HeroModalBody>\n {footer && <HeroModalFooter>{footer}</HeroModalFooter>}\n </>\n )}\n </HeroModalContent>\n </HeroModal>\n );\n};\n\nexport default Modal;\n","import Modal, { modalVariants } from './Modal';\n\nexport type { ModalProps } from './Modal';\n\nexport { Modal, modalVariants };\n\nexport default Modal;\n"],"mappings":";AAIA;AAAA,EACE,SAAS;AAAA,EACT,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB,eAAe;AAAA,EACf,eAAe;AAAA,OACV;AAEP,SAAS,IAAI,4BAA4B;AAmF/B,mBACa,KADb;AAhFH,IAAM,gBAAgB,GAAG;AAAA,EAC9B,OAAO;AAAA,IACL,UAAU;AAAA,IACV,MAAM;AAAA,IACN,MAAM;AAAA,IACN,aAAa;AAAA,IACb,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,IAAI,EAAE,MAAM,WAAW;AAAA,MACvB,IAAI,EAAE,MAAM,WAAW;AAAA,MACvB,IAAI,EAAE,MAAM,WAAW;AAAA,MACvB,IAAI,EAAE,MAAM,YAAY;AAAA,MACxB,MAAM,EAAE,MAAM,uBAAuB;AAAA,IACvC;AAAA,EACF;AACF,CAAC;AA+BD,IAAM,QAAQ,CAAC;AAAA,EACb,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,mBAAmB;AAAA,EACnB,SAAS;AAAA,EACT,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA,kBAAkB;AAAA,EAClB,OAAO;AAAA,EACP,SAAS;AACX,MAAkB;AAEhB,QAAM,WAAW,cAAc,EAAE,KAAK,CAAC;AACvC,QAAM,aAAa,qBAAqB,UAAU,WAAW,MAAM;AAEnE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAS;AAAA,MACT;AAAA,MACA,eAAa;AAAA,MACb;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAU;AAAA,MACV;AAAA,MACA,gBAAe;AAAA,MAEf,8BAAC,oBAAiB,eAAa,SAAS,SAAS,MAAM,KAAK,SACzD,gBACC,iCACG;AAAA,kBAAU,oBAAC,mBAAiB,kBAAO;AAAA,QACpC,oBAAC,iBAAc,IAAG,cAAc,UAAS;AAAA,QACxC,UAAU,oBAAC,mBAAiB,kBAAO;AAAA,SACtC,GAEJ;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,gBAAQ;;;ACpGf,IAAOA,iBAAQ;","names":["Modal_default"]}
|
package/dist/chunk-XHOAZB2Z.cjs
DELETED
|
@@ -1,81 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/Menu/Menu.tsx
|
|
2
|
-
var _fa6 = require('react-icons/fa6');
|
|
3
|
-
var _button = require('@heroui/button');
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
var _dropdown = require('@heroui/dropdown');
|
|
11
|
-
var _pixelutils = require('@fuf-stack/pixel-utils');
|
|
12
|
-
var _jsxruntime = require('react/jsx-runtime');
|
|
13
|
-
var getDisabledKeys = (items) => {
|
|
14
|
-
return items.map((item) => typeof (item == null ? void 0 : item.items) === "undefined" ? item : item.items).flat().filter((item) => {
|
|
15
|
-
return Object.hasOwn(item, "disabled") && item.disabled === true;
|
|
16
|
-
}).map((item) => item.key);
|
|
17
|
-
};
|
|
18
|
-
var renderMenuItem = (item) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
19
|
-
_dropdown.DropdownItem,
|
|
20
|
-
{
|
|
21
|
-
className: item.className,
|
|
22
|
-
"data-testid": item.testId || item.key,
|
|
23
|
-
description: item.description,
|
|
24
|
-
onPress: item.onClick,
|
|
25
|
-
startContent: item.icon,
|
|
26
|
-
children: item.label
|
|
27
|
-
},
|
|
28
|
-
item.key
|
|
29
|
-
);
|
|
30
|
-
var Menu = ({
|
|
31
|
-
children = null,
|
|
32
|
-
className = void 0,
|
|
33
|
-
onAction = void 0,
|
|
34
|
-
testId = void 0,
|
|
35
|
-
isDisabled = false,
|
|
36
|
-
items
|
|
37
|
-
}) => {
|
|
38
|
-
return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _dropdown.Dropdown, { isDisabled, children: [
|
|
39
|
-
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _dropdown.DropdownTrigger, { className: _pixelutils.cn.call(void 0, className), "data-testid": testId, children: children ? (
|
|
40
|
-
// eslint-disable-next-line react/button-has-type
|
|
41
|
-
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "button", { children })
|
|
42
|
-
) : (
|
|
43
|
-
// INFO: we use hero button here so that ref passing works
|
|
44
|
-
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _button.Button, { size: "sm", variant: "flat", className: "min-w-0", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _fa6.FaEllipsisVertical, {}) })
|
|
45
|
-
) }),
|
|
46
|
-
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
47
|
-
_dropdown.DropdownMenu,
|
|
48
|
-
{
|
|
49
|
-
items,
|
|
50
|
-
disabledKeys: getDisabledKeys(items),
|
|
51
|
-
onAction,
|
|
52
|
-
children: (item) => {
|
|
53
|
-
if ("items" in item) {
|
|
54
|
-
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
55
|
-
_dropdown.DropdownSection,
|
|
56
|
-
{
|
|
57
|
-
items: item.items,
|
|
58
|
-
title: item.label,
|
|
59
|
-
children: (sectionItem) => {
|
|
60
|
-
return renderMenuItem(sectionItem);
|
|
61
|
-
}
|
|
62
|
-
},
|
|
63
|
-
item.key
|
|
64
|
-
);
|
|
65
|
-
}
|
|
66
|
-
return renderMenuItem(item);
|
|
67
|
-
}
|
|
68
|
-
}
|
|
69
|
-
)
|
|
70
|
-
] });
|
|
71
|
-
};
|
|
72
|
-
var Menu_default = Menu;
|
|
73
|
-
|
|
74
|
-
// src/Menu/index.ts
|
|
75
|
-
var Menu_default2 = Menu_default;
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
exports.Menu_default = Menu_default; exports.Menu_default2 = Menu_default2;
|
|
81
|
-
//# sourceMappingURL=chunk-XHOAZB2Z.cjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-XHOAZB2Z.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-XHOAZB2Z.cjs","sourcesContent":[null,"import type {\n DropdownSectionProps,\n DropdownItemProps as HeroDropdownItemProps,\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 } 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\nexport interface MenuProps {\n /** child components */\n children?: ReactNode;\n /** CSS class name */\n className?: string | string[];\n /** HTML data-testid attribute used in e2e tests */\n testId?: string;\n /** menu item structure */\n items: (MenuSection | MenuItem)[];\n /** disable menu trigger */\n isDisabled?: boolean;\n /** called if item is selected */\n onAction?: (key: Key) => void;\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) => (\n <HeroDropdownItem\n className={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 children = null,\n className = undefined,\n onAction = undefined,\n testId = undefined,\n isDisabled = false,\n items,\n}: MenuProps) => {\n return (\n <HeroDropdown isDisabled={isDisabled}>\n <HeroDropdownTrigger className={cn(className)} data-testid={testId}>\n {children ? (\n // eslint-disable-next-line react/button-has-type\n <button>{children}</button>\n ) : (\n // INFO: we use hero button here so that ref passing works\n <Button size=\"sm\" variant=\"flat\" className=\"min-w-0\">\n <FaEllipsisVertical />\n </Button>\n )}\n </HeroDropdownTrigger>\n <HeroDropdownMenu\n // aria-label=\"Dynamic Actions\"\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 as MenuSection['items']}\n title={item.label as DropdownSectionProps['title']}\n key={item.key}\n >\n {(sectionItem) => {\n return renderMenuItem(sectionItem);\n }}\n </HeroDropdownSection>\n );\n }\n return renderMenuItem(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"]}
|