@fuf-stack/pixels 0.38.0 → 0.39.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Alert/index.cjs +2 -2
- package/dist/Alert/index.d.cts +2 -2
- package/dist/Alert/index.d.ts +2 -2
- package/dist/Alert/index.js +1 -1
- package/dist/{Alert-Bz_lJ_YE.d.cts → Alert-DELD9ZWe.d.cts} +80 -1
- package/dist/{Alert-Bz_lJ_YE.d.ts → Alert-DELD9ZWe.d.ts} +80 -1
- package/dist/Menu/index.cjs +2 -2
- package/dist/Menu/index.d.cts +3 -2
- package/dist/Menu/index.d.ts +3 -2
- package/dist/Menu/index.js +1 -1
- package/dist/{Menu-C7lpY7pY.d.cts → Menu-DYi8oagz.d.cts} +3 -2
- package/dist/{Menu-C7lpY7pY.d.ts → Menu-DYi8oagz.d.ts} +3 -2
- package/dist/Popover/index.cjs +2 -2
- package/dist/Popover/index.d.cts +2 -2
- package/dist/Popover/index.d.ts +2 -2
- package/dist/Popover/index.js +1 -1
- package/dist/{Popover-B2-09nsy.d.ts → Popover-BHPrdRy6.d.ts} +1 -1
- package/dist/{Popover-DAYvOjOY.d.cts → Popover-BXyk9y8I.d.cts} +1 -1
- package/dist/Table/index.cjs +2 -2
- package/dist/Table/index.js +1 -1
- package/dist/{chunk-MOIIBJ6O.js → chunk-5TOE75VE.js} +3 -3
- package/dist/chunk-5TOE75VE.js.map +1 -0
- package/dist/{chunk-QMYSCJEJ.js → chunk-AFGRLKHU.js} +2 -2
- package/dist/{chunk-QMYSCJEJ.js.map → chunk-AFGRLKHU.js.map} +1 -1
- package/dist/{chunk-A4MJ5V64.cjs → chunk-AJCAIA6H.cjs} +2 -2
- package/dist/chunk-AJCAIA6H.cjs.map +1 -0
- package/dist/{chunk-EAJGISR6.cjs → chunk-EAX5J2I2.cjs} +3 -3
- package/dist/chunk-EAX5J2I2.cjs.map +1 -0
- package/dist/{chunk-V2WKZH63.js → chunk-MG3PTEMK.js} +16 -3
- package/dist/chunk-MG3PTEMK.js.map +1 -0
- package/dist/{chunk-LRJVQPVR.js → chunk-OP5W7BXY.js} +2 -2
- package/dist/chunk-OP5W7BXY.js.map +1 -0
- package/dist/{chunk-KBYU4ZF2.cjs → chunk-XHOAZB2Z.cjs} +2 -2
- package/dist/chunk-XHOAZB2Z.cjs.map +1 -0
- package/dist/{chunk-33S6NRVI.cjs → chunk-YVPRFCWI.cjs} +16 -3
- package/dist/chunk-YVPRFCWI.cjs.map +1 -0
- package/dist/index.cjs +171 -6
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +284 -8
- package/dist/index.d.ts +284 -8
- package/dist/index.js +170 -5
- package/dist/index.js.map +1 -1
- package/package.json +24 -23
- package/dist/chunk-33S6NRVI.cjs.map +0 -1
- package/dist/chunk-A4MJ5V64.cjs.map +0 -1
- package/dist/chunk-EAJGISR6.cjs.map +0 -1
- package/dist/chunk-KBYU4ZF2.cjs.map +0 -1
- package/dist/chunk-LRJVQPVR.js.map +0 -1
- package/dist/chunk-MOIIBJ6O.js.map +0 -1
- package/dist/chunk-V2WKZH63.js.map +0 -1
package/dist/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import {
|
|
2
2
|
Table_default,
|
|
3
3
|
tableVariants
|
|
4
|
-
} from "./chunk-
|
|
4
|
+
} from "./chunk-AFGRLKHU.js";
|
|
5
5
|
import {
|
|
6
6
|
Tabs_default,
|
|
7
7
|
tabsVariants
|
|
@@ -36,14 +36,14 @@ import {
|
|
|
36
36
|
} from "./chunk-NQVSANDI.js";
|
|
37
37
|
import {
|
|
38
38
|
Menu_default
|
|
39
|
-
} from "./chunk-
|
|
39
|
+
} from "./chunk-OP5W7BXY.js";
|
|
40
40
|
import {
|
|
41
41
|
Modal_default,
|
|
42
42
|
modalVariants
|
|
43
43
|
} from "./chunk-RW4WTSLJ.js";
|
|
44
44
|
import {
|
|
45
45
|
Popover_default
|
|
46
|
-
} from "./chunk-
|
|
46
|
+
} from "./chunk-5TOE75VE.js";
|
|
47
47
|
import "./chunk-EQVC4PJE.js";
|
|
48
48
|
import {
|
|
49
49
|
Accordion_default,
|
|
@@ -52,7 +52,7 @@ import {
|
|
|
52
52
|
import {
|
|
53
53
|
Alert_default,
|
|
54
54
|
alertVariants
|
|
55
|
-
} from "./chunk-
|
|
55
|
+
} from "./chunk-MG3PTEMK.js";
|
|
56
56
|
import {
|
|
57
57
|
AvatarGroup_default
|
|
58
58
|
} from "./chunk-3QICKBFS.js";
|
|
@@ -70,7 +70,169 @@ import {
|
|
|
70
70
|
Button_default,
|
|
71
71
|
buttonVariants
|
|
72
72
|
} from "./chunk-HL5BEHIS.js";
|
|
73
|
-
import
|
|
73
|
+
import {
|
|
74
|
+
__spreadProps,
|
|
75
|
+
__spreadValues
|
|
76
|
+
} from "./chunk-J7N2552D.js";
|
|
77
|
+
|
|
78
|
+
// src/Toast/addToast.tsx
|
|
79
|
+
import { toast as heroToastVariants } from "@heroui/theme";
|
|
80
|
+
import { addToast as heroAddToast } from "@heroui/toast";
|
|
81
|
+
import { tv, variantsToClassNames } from "@fuf-stack/pixel-utils";
|
|
82
|
+
var toastVariants = tv({
|
|
83
|
+
slots: {
|
|
84
|
+
base: "",
|
|
85
|
+
title: "",
|
|
86
|
+
description: "",
|
|
87
|
+
icon: "",
|
|
88
|
+
loadingIcon: "",
|
|
89
|
+
content: "",
|
|
90
|
+
motionDiv: "",
|
|
91
|
+
progressTrack: "",
|
|
92
|
+
progressIndicator: "",
|
|
93
|
+
closeButton: "",
|
|
94
|
+
closeIcon: ""
|
|
95
|
+
},
|
|
96
|
+
variants: {
|
|
97
|
+
// see: https://github.com/heroui-inc/heroui/blob/canary/packages/core/theme/src/components/toast.ts
|
|
98
|
+
color: __spreadValues({
|
|
99
|
+
info: {}
|
|
100
|
+
}, heroToastVariants.variants.color),
|
|
101
|
+
variant: __spreadValues({}, heroToastVariants.variants.variant)
|
|
102
|
+
},
|
|
103
|
+
compoundVariants: [
|
|
104
|
+
...heroToastVariants.compoundVariants,
|
|
105
|
+
{
|
|
106
|
+
variant: "solid",
|
|
107
|
+
color: "info",
|
|
108
|
+
className: {
|
|
109
|
+
base: "bg-info text-info-foreground",
|
|
110
|
+
title: "text-info-foreground",
|
|
111
|
+
description: "text-info-foreground",
|
|
112
|
+
icon: "text-info-foreground",
|
|
113
|
+
closeIcon: "border-info-400 bg-info-100",
|
|
114
|
+
closeButton: "text-info-400 hover:text-info-600",
|
|
115
|
+
progressIndicator: "bg-info-400"
|
|
116
|
+
}
|
|
117
|
+
},
|
|
118
|
+
{
|
|
119
|
+
color: "info",
|
|
120
|
+
variant: "flat",
|
|
121
|
+
className: {
|
|
122
|
+
base: "dark:bg-info-50/50 bg-info-50 text-info-600",
|
|
123
|
+
title: "text-info-600",
|
|
124
|
+
description: "text-info-500",
|
|
125
|
+
icon: "text-info-600",
|
|
126
|
+
closeIcon: "border-info-400 bg-info-100",
|
|
127
|
+
closeButton: "text-info-400 hover:text-info-600",
|
|
128
|
+
progressIndicator: "bg-info-400"
|
|
129
|
+
}
|
|
130
|
+
},
|
|
131
|
+
{
|
|
132
|
+
color: "info",
|
|
133
|
+
variant: "bordered",
|
|
134
|
+
className: {
|
|
135
|
+
base: "border-small border-info text-info-600",
|
|
136
|
+
title: "text-info-600",
|
|
137
|
+
description: "text-info-500",
|
|
138
|
+
icon: "text-info-600",
|
|
139
|
+
closeIcon: "border-info-400 bg-info-100",
|
|
140
|
+
closeButton: "text-info-400 hover:text-info-600",
|
|
141
|
+
progressIndicator: "bg-info-400"
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
]
|
|
145
|
+
});
|
|
146
|
+
var addToast = ({
|
|
147
|
+
children = void 0,
|
|
148
|
+
className = void 0,
|
|
149
|
+
closeIcon = void 0,
|
|
150
|
+
color = "default",
|
|
151
|
+
description = void 0,
|
|
152
|
+
endContent = void 0,
|
|
153
|
+
icon = void 0,
|
|
154
|
+
loadingIcon = void 0,
|
|
155
|
+
onClose = void 0,
|
|
156
|
+
// severity = 'default',
|
|
157
|
+
shouldShowTimeoutProgress = false,
|
|
158
|
+
showCloseButton = true,
|
|
159
|
+
showIcon = true,
|
|
160
|
+
// testId = undefined,
|
|
161
|
+
timeout = 5e3,
|
|
162
|
+
title = void 0,
|
|
163
|
+
variant = "bordered"
|
|
164
|
+
}) => {
|
|
165
|
+
const variants = toastVariants({
|
|
166
|
+
color,
|
|
167
|
+
variant
|
|
168
|
+
});
|
|
169
|
+
const isHeroUIColor = Object.keys(heroToastVariants.variants.color).includes(
|
|
170
|
+
color
|
|
171
|
+
);
|
|
172
|
+
const classNames = variantsToClassNames(variants, className, "base");
|
|
173
|
+
heroAddToast({
|
|
174
|
+
classNames,
|
|
175
|
+
closeIcon,
|
|
176
|
+
color: isHeroUIColor ? color : void 0,
|
|
177
|
+
// 'data-testid': testId,
|
|
178
|
+
// https://github.com/heroui-inc/heroui/issues/5033
|
|
179
|
+
// @ts-expect-error bug in hero-toast: description should be ReactNode
|
|
180
|
+
description: description || title ? children : void 0,
|
|
181
|
+
endContent,
|
|
182
|
+
hideCloseButton: !showCloseButton,
|
|
183
|
+
hideIcon: !showIcon,
|
|
184
|
+
icon,
|
|
185
|
+
loadingIcon,
|
|
186
|
+
onClose,
|
|
187
|
+
// severity={severity}
|
|
188
|
+
shouldShowTimeoutProgress,
|
|
189
|
+
timeout,
|
|
190
|
+
title: title || children,
|
|
191
|
+
variant
|
|
192
|
+
});
|
|
193
|
+
};
|
|
194
|
+
|
|
195
|
+
// src/Toast/ToastProvider.tsx
|
|
196
|
+
import { toast as heroToastVariants2 } from "@heroui/theme";
|
|
197
|
+
import { ToastProvider as HeroToastProvider } from "@heroui/toast";
|
|
198
|
+
import { variantsToClassNames as variantsToClassNames2 } from "@fuf-stack/pixel-utils";
|
|
199
|
+
import { jsx } from "react/jsx-runtime";
|
|
200
|
+
var ToastProvider = ({
|
|
201
|
+
disableAnimation = false,
|
|
202
|
+
maxVisibleToasts = 5,
|
|
203
|
+
placement = "top-center",
|
|
204
|
+
toastProps = void 0,
|
|
205
|
+
toastOffset = 0,
|
|
206
|
+
regionProps = void 0
|
|
207
|
+
}) => {
|
|
208
|
+
const variants = toastVariants({
|
|
209
|
+
color: toastProps == null ? void 0 : toastProps.color,
|
|
210
|
+
variant: toastProps == null ? void 0 : toastProps.variant
|
|
211
|
+
});
|
|
212
|
+
const isHeroUIColor = Object.keys(heroToastVariants2.variants.color).includes(
|
|
213
|
+
(toastProps == null ? void 0 : toastProps.color) || ""
|
|
214
|
+
);
|
|
215
|
+
const classNames = variantsToClassNames2(
|
|
216
|
+
variants,
|
|
217
|
+
toastProps == null ? void 0 : toastProps.className,
|
|
218
|
+
"base"
|
|
219
|
+
);
|
|
220
|
+
return /* @__PURE__ */ jsx(
|
|
221
|
+
HeroToastProvider,
|
|
222
|
+
{
|
|
223
|
+
disableAnimation,
|
|
224
|
+
maxVisibleToasts,
|
|
225
|
+
placement,
|
|
226
|
+
regionProps,
|
|
227
|
+
toastOffset,
|
|
228
|
+
toastProps: __spreadProps(__spreadValues({}, toastProps), {
|
|
229
|
+
classNames,
|
|
230
|
+
color: isHeroUIColor ? toastProps == null ? void 0 : toastProps.color : void 0
|
|
231
|
+
})
|
|
232
|
+
}
|
|
233
|
+
);
|
|
234
|
+
};
|
|
235
|
+
var ToastProvider_default = ToastProvider;
|
|
74
236
|
export {
|
|
75
237
|
Accordion_default as Accordion,
|
|
76
238
|
Alert_default as Alert,
|
|
@@ -89,8 +251,10 @@ export {
|
|
|
89
251
|
Popover_default as Popover,
|
|
90
252
|
Table_default as Table,
|
|
91
253
|
Tabs_default as Tabs,
|
|
254
|
+
ToastProvider_default as ToastProvider,
|
|
92
255
|
Tooltip_default as Tooltip,
|
|
93
256
|
accordionVariants,
|
|
257
|
+
addToast,
|
|
94
258
|
alertVariants,
|
|
95
259
|
breadcrumbVariants,
|
|
96
260
|
buttonVariants,
|
|
@@ -103,6 +267,7 @@ export {
|
|
|
103
267
|
modalVariants,
|
|
104
268
|
tableVariants,
|
|
105
269
|
tabsVariants,
|
|
270
|
+
toastVariants,
|
|
106
271
|
useDebounce,
|
|
107
272
|
useLocalStorage
|
|
108
273
|
};
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
|
1
|
+
{"version":3,"sources":["../src/Toast/addToast.tsx","../src/Toast/ToastProvider.tsx"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ToastProps as HeroToastProps } from '@heroui/toast';\nimport type { ReactNode } from 'react';\n\nimport { toast as heroToastVariants } from '@heroui/theme';\nimport { addToast as heroAddToast } from '@heroui/toast';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nexport const toastVariants = tv({\n slots: {\n base: '',\n title: '',\n description: '',\n icon: '',\n loadingIcon: '',\n content: '',\n motionDiv: '',\n progressTrack: '',\n progressIndicator: '',\n closeButton: '',\n closeIcon: '',\n },\n variants: {\n // see: https://github.com/heroui-inc/heroui/blob/canary/packages/core/theme/src/components/toast.ts\n color: {\n info: {},\n ...heroToastVariants.variants.color,\n },\n variant: {\n ...heroToastVariants.variants.variant,\n },\n },\n compoundVariants: [\n ...heroToastVariants.compoundVariants,\n {\n variant: 'solid',\n color: 'info',\n className: {\n base: 'bg-info text-info-foreground',\n title: 'text-info-foreground',\n description: 'text-info-foreground',\n icon: 'text-info-foreground',\n closeIcon: 'border-info-400 bg-info-100',\n closeButton: 'text-info-400 hover:text-info-600',\n progressIndicator: 'bg-info-400',\n },\n },\n {\n color: 'info',\n variant: 'flat',\n className: {\n base: 'dark:bg-info-50/50 bg-info-50 text-info-600',\n title: 'text-info-600',\n description: 'text-info-500',\n icon: 'text-info-600',\n closeIcon: 'border-info-400 bg-info-100',\n closeButton: 'text-info-400 hover:text-info-600',\n progressIndicator: 'bg-info-400',\n },\n },\n\n {\n color: 'info',\n variant: 'bordered',\n className: {\n base: 'border-small border-info text-info-600',\n title: 'text-info-600',\n description: 'text-info-500',\n icon: 'text-info-600',\n closeIcon: 'border-info-400 bg-info-100',\n closeButton: 'text-info-400 hover:text-info-600',\n progressIndicator: 'bg-info-400',\n },\n },\n ],\n});\n\nexport type AddToastVariantProps = TVProps<typeof toastVariants>;\ntype ClassName = TVClassName<typeof toastVariants>;\n\nexport interface ToastProps extends AddToastVariantProps {\n children?: ReactNode;\n className?: ClassName;\n closeIcon?: ReactNode;\n color?: AddToastVariantProps['color'];\n description?: ReactNode;\n endContent?: ReactNode;\n icon?: ReactNode;\n loadingIcon?: ReactNode;\n onClose?: () => void;\n // severity?:\n // | 'default'\n // | 'primary'\n // | 'secondary'\n // | 'success'\n // | 'warning'\n // | 'danger';\n shouldShowTimeoutProgress?: boolean;\n showCloseButton?: boolean;\n showIcon?: boolean;\n // testId?: string;\n timeout?: number;\n title?: ReactNode;\n variant?: AddToastVariantProps['variant'];\n}\n\n/**\n * addToast function based on [HeroUI Toast](https://www.heroui.com//docs/components/toast)\n */\nexport const addToast = ({\n children = undefined,\n className = undefined,\n closeIcon = undefined,\n color = 'default',\n description = undefined,\n endContent = undefined,\n icon = undefined,\n loadingIcon = undefined,\n onClose = undefined,\n // severity = 'default',\n shouldShowTimeoutProgress = false,\n showCloseButton = true,\n showIcon = true,\n // testId = undefined,\n timeout = 5000,\n title = undefined,\n variant = 'bordered',\n}: ToastProps) => {\n const variants = toastVariants({\n color,\n variant,\n });\n const isHeroUIColor = Object.keys(heroToastVariants.variants.color).includes(\n color,\n );\n const classNames = variantsToClassNames(variants, className, 'base');\n heroAddToast({\n classNames,\n closeIcon,\n color: isHeroUIColor ? (color as HeroToastProps['color']) : undefined,\n // 'data-testid': testId,\n // https://github.com/heroui-inc/heroui/issues/5033\n // @ts-expect-error bug in hero-toast: description should be ReactNode\n description: description || title ? children : undefined,\n endContent,\n hideCloseButton: !showCloseButton,\n hideIcon: !showIcon,\n icon,\n loadingIcon,\n onClose,\n // severity={severity}\n shouldShowTimeoutProgress,\n timeout,\n title: (title || children) as string,\n variant,\n });\n};\n\nexport default addToast;\n","import type { ToastProps as HeroToastProps } from '@heroui/toast';\nimport type { ToastProps } from './addToast';\n\nimport { toast as heroToastVariants } from '@heroui/theme';\nimport { ToastProvider as HeroToastProvider } from '@heroui/toast';\n\nimport { variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { toastVariants } from './addToast';\n\nexport type ToastProviderToastProps = Omit<\n ToastProps,\n 'description' | 'endContent' | 'title'\n>;\n\nexport interface ToastProviderProps {\n disableAnimation?: boolean;\n maxVisibleToasts?: number;\n placement?:\n | 'bottom-right'\n | 'bottom-left'\n | 'bottom-center'\n | 'top-right'\n | 'top-left'\n | 'top-center';\n\n toastProps?: ToastProviderToastProps;\n toastOffset?: number;\n regionProps?: { classNames?: Record<'base', string> };\n}\n\n/**\n * ToastProvider component based on [HeroUI Toast](https://www.heroui.com//docs/components/toast)\n */\nconst ToastProvider = ({\n disableAnimation = false,\n maxVisibleToasts = 5,\n placement = 'top-center',\n toastProps = undefined,\n toastOffset = 0,\n regionProps = undefined,\n}: ToastProviderProps) => {\n const variants = toastVariants({\n color: toastProps?.color,\n variant: toastProps?.variant,\n });\n const isHeroUIColor = Object.keys(heroToastVariants.variants.color).includes(\n toastProps?.color || '',\n );\n const classNames = variantsToClassNames(\n variants,\n toastProps?.className,\n 'base',\n );\n return (\n <HeroToastProvider\n disableAnimation={disableAnimation}\n maxVisibleToasts={maxVisibleToasts}\n placement={placement}\n regionProps={regionProps}\n toastOffset={toastOffset}\n toastProps={{\n ...toastProps,\n classNames,\n color: isHeroUIColor\n ? (toastProps?.color as HeroToastProps['color'])\n : undefined,\n }}\n />\n );\n};\n\nexport default ToastProvider;\n"],"mappings":"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","names":["heroToastVariants","variantsToClassNames","heroToastVariants","variantsToClassNames"]}
|
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": "Hannes Tiede",
|
|
5
|
-
"version": "0.
|
|
5
|
+
"version": "0.39.1",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"main": "./dist/index.cjs",
|
|
8
8
|
"module": "./dist/index.js",
|
|
@@ -145,41 +145,42 @@
|
|
|
145
145
|
"react-dom": ">=18"
|
|
146
146
|
},
|
|
147
147
|
"dependencies": {
|
|
148
|
-
"@heroui/alert": "2.2.
|
|
149
|
-
"@heroui/avatar": "2.2.
|
|
150
|
-
"@heroui/accordion": "2.2.
|
|
148
|
+
"@heroui/alert": "2.2.16",
|
|
149
|
+
"@heroui/avatar": "2.2.12",
|
|
150
|
+
"@heroui/accordion": "2.2.13",
|
|
151
151
|
"@heroui/badge": "2.2.10",
|
|
152
|
-
"@heroui/breadcrumbs": "2.2.
|
|
153
|
-
"@heroui/button": "2.2.
|
|
154
|
-
"@heroui/card": "2.2.
|
|
155
|
-
"@heroui/chip": "2.2.
|
|
156
|
-
"@heroui/divider": "2.2.
|
|
157
|
-
"@heroui/drawer": "2.2.
|
|
158
|
-
"@heroui/dropdown": "2.3.
|
|
159
|
-
"@heroui/modal": "2.2.
|
|
160
|
-
"@heroui/popover": "2.3.
|
|
161
|
-
"@heroui/progress": "2.2.
|
|
152
|
+
"@heroui/breadcrumbs": "2.2.12",
|
|
153
|
+
"@heroui/button": "2.2.16",
|
|
154
|
+
"@heroui/card": "2.2.15",
|
|
155
|
+
"@heroui/chip": "2.2.12",
|
|
156
|
+
"@heroui/divider": "2.2.11",
|
|
157
|
+
"@heroui/drawer": "2.2.13",
|
|
158
|
+
"@heroui/dropdown": "2.3.16",
|
|
159
|
+
"@heroui/modal": "2.2.13",
|
|
160
|
+
"@heroui/popover": "2.3.16",
|
|
161
|
+
"@heroui/progress": "2.2.12",
|
|
162
162
|
"@heroui/scroll-shadow": "2.3.10",
|
|
163
|
-
"@heroui/system": "2.4.
|
|
164
|
-
"@heroui/table": "2.2.
|
|
165
|
-
"@heroui/theme": "2.4.
|
|
166
|
-
"@heroui/tabs": "2.2.
|
|
167
|
-
"@heroui/
|
|
168
|
-
"
|
|
169
|
-
"
|
|
163
|
+
"@heroui/system": "2.4.12",
|
|
164
|
+
"@heroui/table": "2.2.15",
|
|
165
|
+
"@heroui/theme": "2.4.12",
|
|
166
|
+
"@heroui/tabs": "2.2.13",
|
|
167
|
+
"@heroui/toast": "2.0.6",
|
|
168
|
+
"@heroui/tooltip": "2.2.13",
|
|
169
|
+
"framer-motion": "12.6.0",
|
|
170
|
+
"next-themes": "0.4.6",
|
|
170
171
|
"react-icons": "5.5.0",
|
|
171
172
|
"@fuf-stack/pixel-utils": "0.5.1"
|
|
172
173
|
},
|
|
173
174
|
"devDependencies": {
|
|
174
175
|
"@types/debug": "4.1.12",
|
|
175
|
-
"@types/react": "19.0.
|
|
176
|
+
"@types/react": "19.0.12",
|
|
176
177
|
"@types/react-dom": "19.0.4",
|
|
177
178
|
"@uiw/react-json-view": "2.0.0-alpha.30",
|
|
178
179
|
"react": "19.0.0",
|
|
179
180
|
"react-dom": "19.0.0",
|
|
180
|
-
"@repo/tailwind-config": "0.0.1",
|
|
181
181
|
"@repo/storybook-config": "0.0.1",
|
|
182
182
|
"@repo/tsup-config": "0.0.1",
|
|
183
|
+
"@repo/tailwind-config": "0.0.1",
|
|
183
184
|
"@repo/vite-config": "0.0.1"
|
|
184
185
|
},
|
|
185
186
|
"scripts": {
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-33S6NRVI.cjs","../src/Alert/Alert.tsx","../src/Alert/index.ts"],"names":["Alert_default"],"mappings":"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","file":"/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-33S6NRVI.cjs","sourcesContent":[null,"import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { AlertProps as HeroAlertProps } from '@heroui/alert';\nimport type { ReactNode } from 'react';\n\nimport { Alert as HeroAlert } from '@heroui/alert';\nimport { alert as heroAlertVariants } from '@heroui/theme';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nexport const alertVariants = tv({\n slots: {\n base: '',\n title: '',\n description: '',\n mainWrapper: '',\n closeButton: '',\n iconWrapper: '',\n alertIcon: '',\n },\n variants: {\n // see: https://github.com/heroui-inc/heroui/blob/canary/packages/core/theme/src/components/alert.ts\n color: {\n info: {\n mainWrapper: 'text-inherit',\n title: 'text-inherit',\n description: 'text-inherit',\n },\n ...heroAlertVariants.variants.color,\n },\n variant: {\n ...heroAlertVariants.variants.variant,\n },\n },\n compoundVariants: [\n ...heroAlertVariants.compoundVariants,\n {\n color: 'info',\n variant: 'solid',\n className: {\n base: 'bg-info text-info-foreground',\n alertIcon: 'text-info-foreground',\n closeButton: 'text-inherit',\n },\n },\n {\n color: 'info',\n variant: 'flat',\n className: {\n alertIcon: 'fill-current',\n base: 'dark:bg-info-50/50 bg-info-50 text-info-600',\n closeButton: 'text-info-500 data-[hover]:bg-info-200',\n iconWrapper: 'border-info-100 bg-info-50 dark:bg-info-100',\n },\n },\n {\n color: 'info',\n variant: 'faded',\n className: {\n alertIcon: 'fill-current',\n base: 'dark:bg-info-50/50 border-small border-info-200 bg-info-50 text-info-600 dark:border-info-100',\n closeButton: 'text-info-500 data-[hover]:bg-info-200',\n iconWrapper: 'border-info-100 bg-info-50 dark:bg-info-100',\n },\n },\n {\n color: 'info',\n variant: 'bordered',\n className: {\n alertIcon: 'fill-current',\n base: 'border-small border-info text-info',\n closeButton: 'text-info-500 data-[hover]:bg-info-200',\n iconWrapper: 'bg-info-100 dark:bg-info-50',\n },\n },\n ],\n});\n\nexport type VariantProps = TVProps<typeof alertVariants>;\ntype ClassName = TVClassName<typeof alertVariants>;\n\nexport interface AlertProps extends VariantProps {\n /** Content displayed inside the Alert if no description is given! */\n children?: ReactNode;\n /** CSS class name */\n className?: ClassName;\n /** Color scheme of the Alert */\n color?: VariantProps['color'];\n /** Content displayed at the end of the Alert */\n endContent?: ReactNode;\n /** Icon displayed at the start of the Alert */\n icon?: ReactNode;\n /** Whether the Alert can be closed */\n isClosable?: boolean;\n /** Callback fired when the close button is clicked */\n onClose?: () => void | undefined;\n /** Whether to show the icon at the start */\n showIcon?: boolean;\n /** HTML data-testid attribute used in e2e tests */\n testId?: string;\n /** Title displayed in the Alert above the content */\n title?: ReactNode;\n /** Style variant of the Alert */\n variant?: VariantProps['variant'];\n}\n\n/**\n * Alert component based on [HeroUI Alert](https://www.heroui.com//docs/components/alert)\n */\nconst Alert = ({\n children = undefined,\n className = undefined,\n color = 'primary',\n endContent = undefined,\n icon = undefined,\n isClosable = false,\n onClose = undefined,\n showIcon = true,\n testId = undefined,\n title = undefined,\n variant = 'solid',\n}: AlertProps) => {\n const variants = alertVariants({\n color,\n variant,\n });\n const isHeroUIColor = Object.keys(heroAlertVariants.variants.color).includes(\n color,\n );\n const classNames = variantsToClassNames(variants, className, 'base');\n\n return (\n <HeroAlert\n classNames={classNames}\n color={isHeroUIColor ? (color as HeroAlertProps['color']) : undefined}\n data-testid={testId}\n description={title ? children : undefined}\n endContent={endContent}\n hideIcon={!showIcon}\n icon={icon}\n isClosable={isClosable}\n onClose={onClose}\n title={(title || children) as string}\n variant={variant}\n />\n );\n};\n\nexport default Alert;\n","import Alert, { alertVariants } from './Alert';\n\nexport type { AlertProps } from './Alert';\n\nexport { Alert, alertVariants };\n\nexport default Alert;\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-A4MJ5V64.cjs","../src/Table/Table.tsx","../src/Table/index.ts"],"names":["Table_default"],"mappings":"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","file":"/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-A4MJ5V64.cjs","sourcesContent":[null,"import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ReactNode } from 'react';\n\nimport {\n getKeyValue,\n Table as HeroTable,\n TableBody,\n TableCell,\n TableColumn,\n TableHeader,\n TableRow,\n} from '@heroui/table';\n\nimport { slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\n// table styling variants\nexport const tableVariants = tv({\n slots: {\n base: '',\n wrapper: '',\n table: '',\n thead: '',\n tbody: '',\n tr: '',\n th: 'bg-content2',\n td: '',\n tfoot: '',\n sortIcon: '',\n emptyWrapper: '',\n loadingWrapper: '',\n },\n variants: {\n separation: {\n divider: {\n tr: 'divide-x rounded-lg border-b data-[last=true]:border-none [&:first-child:not([data-first=\"true\"])]:border-none',\n },\n 'divider-x': {\n tr: 'divide-x',\n },\n 'divider-y': {\n tr: 'rounded-lg border-b data-[last=true]:border-none [&:first-child:not([data-first=\"true\"])]:border-none',\n },\n 'striped-divider-x': {\n tr: 'divide-x',\n th: 'border-divider',\n td: 'border-divider first:rounded-s-lg last:rounded-e-lg group-data-[odd=true]:bg-content2',\n },\n striped: {\n tr: '',\n td: 'first:rounded-s-lg last:rounded-e-lg group-data-[odd=true]:bg-content2',\n },\n none: {},\n },\n },\n});\n\nexport type VariantProps = TVProps<typeof tableVariants>;\ntype ClassName = TVClassName<typeof tableVariants>;\n\nexport interface TableColumnProps {\n key: string;\n label: ReactNode;\n}\n\nexport interface TableRowProps {\n key: string | number;\n [key: string | number]: ReactNode;\n}\n\nexport interface TableProps extends VariantProps {\n /** Aria label for the Table. */\n ariaLabel?: string;\n /** Component to display at the bottom of the Table. */\n bottomContent?: ReactNode;\n /** CSS class name */\n className?: ClassName;\n /** Objects with table data */\n columns: TableColumnProps[];\n /** Component to display if there are no rows! */\n emptyContent?: ReactNode;\n /** Determine if the Table should have a card like wrapper. */\n hasWrapper?: boolean;\n /** remove header */\n hideHeader?: boolean;\n /** Tells the Table to show the loading component. */\n loading?: boolean;\n /** Loading animation component. */\n loadingContent?: ReactNode;\n /** The maximum height of the table in pixels. Required when using virtualization. */\n maxTableHeight?: number;\n /** The fixed height of each row item in pixels. Required when using virtualization. */\n rowHeight?: number;\n /** Items displayed as rows in the Table. Should have key-value pair for each column. */\n rows?: TableRowProps[];\n /** Separation style for the rows & columns. */\n separation?:\n | 'none'\n | 'striped'\n | 'striped-divider-x'\n | 'divider-x'\n | 'divider-y'\n | 'divider';\n /** Keeps the header of the Table in view while scrolling a height limited Table. */\n stickyHeader?: boolean;\n /** HTML data-testid attribute used in e2e tests */\n testId?: string;\n /** Virtualize allows efficient rendering of large lists by only rendering items that are visible in the viewport. */\n virtualized?: boolean;\n}\n\n/**\n * Table component based on [HeroUI Table](https://www.heroui.com//docs/components/table)\n */\nconst Table = ({\n ariaLabel = undefined,\n bottomContent = undefined,\n className = undefined,\n columns,\n emptyContent = 'No rows to display.',\n hasWrapper = false,\n hideHeader = false,\n loading = false,\n loadingContent = undefined,\n maxTableHeight = undefined,\n rowHeight = undefined,\n rows = [],\n separation = 'none',\n stickyHeader = false,\n testId = undefined,\n virtualized = false,\n}: TableProps) => {\n const variants = tableVariants({ separation });\n const classNames = variantsToClassNames(variants, className, 'base');\n\n return (\n <HeroTable\n aria-label={ariaLabel}\n bottomContent={bottomContent}\n classNames={classNames}\n data-testid={testId && slugify(testId)}\n hideHeader={hideHeader}\n isHeaderSticky={stickyHeader}\n isStriped={separation === 'striped' || separation === 'striped-divider-x'}\n isVirtualized={virtualized}\n maxTableHeight={maxTableHeight}\n removeWrapper={!hasWrapper}\n rowHeight={rowHeight}\n >\n <TableHeader columns={columns}>\n {(column: TableColumnProps) => (\n <TableColumn key={column.key}>{column.label}</TableColumn>\n )}\n </TableHeader>\n <TableBody\n isLoading={loading}\n loadingContent={loadingContent || '...'} // TODO: use future spinner/loading component\n emptyContent={emptyContent}\n items={rows}\n >\n {(item: TableRowProps) => (\n <TableRow\n key={item.key}\n // data-testid={`${slugify(testId || 'table')}_item_${slugify(JSON.stringify(item.testId || item.key))}`}\n >\n {(columnKey) => (\n <TableCell>{getKeyValue(item, columnKey)}</TableCell>\n )}\n </TableRow>\n )}\n </TableBody>\n </HeroTable>\n );\n};\n\nexport default Table;\n","import Table, { tableVariants } from './Table';\n\nexport type {\n TableProps,\n TableRowProps,\n TableColumnProps,\n VariantProps,\n} from './Table';\n\nexport { Table, tableVariants };\n\nexport default Table;\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-EAJGISR6.cjs","../src/Popover/Popover.tsx","../src/Popover/index.ts"],"names":["Popover_default"],"mappings":"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","file":"/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-EAJGISR6.cjs","sourcesContent":[null,"import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { PopoverProps as HeroPopoverProps } from '@heroui/popover';\nimport type { ReactNode } from 'react';\nimport type { ButtonProps } from '../Button';\n\nimport { Button } from '@heroui/button';\nimport { Popover, PopoverContent, PopoverTrigger } from '@heroui/popover';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport ScrollShadow from '../ScrollShadow/ScrollShadow';\n\n// popover styling variants\nexport const popoverVariants = tv({\n slots: {\n body: 'w-full px-2.5 py-1',\n content: 'flex max-h-[80vh] flex-col p-0',\n footer: 'w-full px-2.5 py-1',\n header: 'w-full px-2.5 py-1',\n trigger: '',\n },\n});\n\ntype VariantProps = TVProps<typeof popoverVariants>;\ntype ClassName = TVClassName<typeof popoverVariants>;\n\nexport interface PopoverProps extends VariantProps {\n /** child components */\n children?: ReactNode;\n /** CSS class name */\n className?: ClassName;\n /** content of the popover */\n content: ReactNode;\n /** HTML data-testid attribute used in e2e tests */\n contentTestId?: string;\n /** popover footer */\n footer?: ReactNode;\n /** use as controlled component */\n openControlled?: { open: boolean; setOpen: (open: boolean) => void };\n /** placement of the popover relative to its trigger reference */\n placement?: HeroPopoverProps['placement'];\n /** The container element in which the overlay portal will be placed. */\n portalContainer?: HeroPopoverProps['portalContainer'];\n /** Whether to block scrolling outside the popover */\n shouldBlockScroll?: boolean;\n /** HTML data-testid attribute used in e2e tests */\n testId?: string;\n /** Popover title */\n title?: ReactNode;\n /** When defined a Button will be rendered as trigger (with provided props) instead of unstyled html button */\n triggerButtonProps?: Pick<\n ButtonProps,\n | 'ariaLabel'\n | 'className'\n | 'color'\n | 'disableAnimation'\n | 'disabled'\n | 'icon'\n | 'size'\n | 'testId'\n | 'variant'\n >;\n}\n\n/**\n * Popover component based on [HeroUI Card](https://www.heroui.com//docs/components/popover)\n */\nexport default ({\n children = null,\n className: _className = undefined,\n content,\n contentTestId = undefined,\n footer = undefined,\n openControlled = undefined,\n placement = 'top',\n portalContainer = undefined,\n shouldBlockScroll = undefined,\n testId = undefined,\n title = undefined,\n triggerButtonProps = undefined,\n}: PopoverProps) => {\n // className from slots\n const variants = popoverVariants();\n const className = variantsToClassNames(variants, _className, 'trigger');\n\n return (\n <Popover\n classNames={className}\n placement={placement}\n portalContainer={portalContainer}\n radius=\"sm\"\n shouldBlockScroll={shouldBlockScroll}\n showArrow\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...(openControlled\n ? { isOpen: openControlled.open, onOpenChange: openControlled.setOpen }\n : {})}\n >\n <PopoverTrigger data-testid={testId}>\n {/* NOTE: type and aria properties are injected by PopoverTrigger */}\n {triggerButtonProps ? (\n // TODO: currently we have to use @heroui/button because\n // passing ref does not work (even with forwardRef in Button)\n // eslint-disable-next-line react/jsx-props-no-spreading\n <Button {...triggerButtonProps}>{children}</Button>\n ) : (\n // eslint-disable-next-line react/button-has-type\n <button>{children}</button>\n )}\n </PopoverTrigger>\n <PopoverContent data-testid={contentTestId}>\n {title && (\n <div className={className.header}>\n {title}\n <hr />\n </div>\n )}\n <ScrollShadow className={className.body}>{content}</ScrollShadow>\n {footer && (\n <div className={className.footer}>\n <hr />\n {footer}\n </div>\n )}\n </PopoverContent>\n </Popover>\n );\n};\n","import Popover from './Popover';\n\nexport type { PopoverProps } from './Popover';\n\nexport { Popover };\n\nexport default Popover;\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-KBYU4ZF2.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-KBYU4ZF2.cjs","sourcesContent":[null,"import type { DropdownSectionProps } from '@heroui/dropdown';\nimport type { Key, MouseEventHandler, 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?: MouseEventHandler<HTMLLIElement>;\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 onClick={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"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Menu/Menu.tsx","../src/Menu/index.ts"],"sourcesContent":["import type { DropdownSectionProps } from '@heroui/dropdown';\nimport type { Key, MouseEventHandler, 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?: MouseEventHandler<HTMLLIElement>;\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 onClick={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":";AAGA,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;;;ACzIf,IAAOA,gBAAQ;","names":["Menu_default"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Popover/Popover.tsx","../src/Popover/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { PopoverProps as HeroPopoverProps } from '@heroui/popover';\nimport type { ReactNode } from 'react';\nimport type { ButtonProps } from '../Button';\n\nimport { Button } from '@heroui/button';\nimport { Popover, PopoverContent, PopoverTrigger } from '@heroui/popover';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport ScrollShadow from '../ScrollShadow/ScrollShadow';\n\n// popover styling variants\nexport const popoverVariants = tv({\n slots: {\n body: 'w-full px-2.5 py-1',\n content: 'flex max-h-[80vh] flex-col p-0',\n footer: 'w-full px-2.5 py-1',\n header: 'w-full px-2.5 py-1',\n trigger: '',\n },\n});\n\ntype VariantProps = TVProps<typeof popoverVariants>;\ntype ClassName = TVClassName<typeof popoverVariants>;\n\nexport interface PopoverProps extends VariantProps {\n /** child components */\n children?: ReactNode;\n /** CSS class name */\n className?: ClassName;\n /** content of the popover */\n content: ReactNode;\n /** HTML data-testid attribute used in e2e tests */\n contentTestId?: string;\n /** popover footer */\n footer?: ReactNode;\n /** use as controlled component */\n openControlled?: { open: boolean; setOpen: (open: boolean) => void };\n /** placement of the popover relative to its trigger reference */\n placement?: HeroPopoverProps['placement'];\n /** The container element in which the overlay portal will be placed. */\n portalContainer?: HeroPopoverProps['portalContainer'];\n /** Whether to block scrolling outside the popover */\n shouldBlockScroll?: boolean;\n /** HTML data-testid attribute used in e2e tests */\n testId?: string;\n /** Popover title */\n title?: ReactNode;\n /** When defined a Button will be rendered as trigger (with provided props) instead of unstyled html button */\n triggerButtonProps?: Pick<\n ButtonProps,\n | 'ariaLabel'\n | 'className'\n | 'color'\n | 'disableAnimation'\n | 'disabled'\n | 'icon'\n | 'size'\n | 'testId'\n | 'variant'\n >;\n}\n\n/**\n * Popover component based on [HeroUI Card](https://www.heroui.com//docs/components/popover)\n */\nexport default ({\n children = null,\n className: _className = undefined,\n content,\n contentTestId = undefined,\n footer = undefined,\n openControlled = undefined,\n placement = 'top',\n portalContainer = undefined,\n shouldBlockScroll = undefined,\n testId = undefined,\n title = undefined,\n triggerButtonProps = undefined,\n}: PopoverProps) => {\n // className from slots\n const variants = popoverVariants();\n const className = variantsToClassNames(variants, _className, 'trigger');\n\n return (\n <Popover\n classNames={className}\n placement={placement}\n portalContainer={portalContainer}\n radius=\"sm\"\n shouldBlockScroll={shouldBlockScroll}\n showArrow\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...(openControlled\n ? { isOpen: openControlled.open, onOpenChange: openControlled.setOpen }\n : {})}\n >\n <PopoverTrigger data-testid={testId}>\n {/* NOTE: type and aria properties are injected by PopoverTrigger */}\n {triggerButtonProps ? (\n // TODO: currently we have to use @heroui/button because\n // passing ref does not work (even with forwardRef in Button)\n // eslint-disable-next-line react/jsx-props-no-spreading\n <Button {...triggerButtonProps}>{children}</Button>\n ) : (\n // eslint-disable-next-line react/button-has-type\n <button>{children}</button>\n )}\n </PopoverTrigger>\n <PopoverContent data-testid={contentTestId}>\n {title && (\n <div className={className.header}>\n {title}\n <hr />\n </div>\n )}\n <ScrollShadow className={className.body}>{content}</ScrollShadow>\n {footer && (\n <div className={className.footer}>\n <hr />\n {footer}\n </div>\n )}\n </PopoverContent>\n </Popover>\n );\n};\n","import Popover from './Popover';\n\nexport type { PopoverProps } from './Popover';\n\nexport { Popover };\n\nexport default Popover;\n"],"mappings":";;;;;;;;;AAKA,SAAS,cAAc;AACvB,SAAS,SAAS,gBAAgB,sBAAsB;AAExD,SAAS,IAAI,4BAA4B;AAgG/B,cAQA,YARA;AA3FH,IAAM,kBAAkB,GAAG;AAAA,EAChC,OAAO;AAAA,IACL,MAAM;AAAA,IACN,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AACF,CAAC;AA8CD,IAAO,kBAAQ,CAAC;AAAA,EACd,WAAW;AAAA,EACX,WAAW,aAAa;AAAA,EACxB;AAAA,EACA,gBAAgB;AAAA,EAChB,SAAS;AAAA,EACT,iBAAiB;AAAA,EACjB,YAAY;AAAA,EACZ,kBAAkB;AAAA,EAClB,oBAAoB;AAAA,EACpB,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,qBAAqB;AACvB,MAAoB;AAElB,QAAM,WAAW,gBAAgB;AACjC,QAAM,YAAY,qBAAqB,UAAU,YAAY,SAAS;AAEtE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,YAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA,QAAO;AAAA,MACP;AAAA,MACA,WAAS;AAAA,OAEJ,iBACD,EAAE,QAAQ,eAAe,MAAM,cAAc,eAAe,QAAQ,IACpE,CAAC,IAVN;AAAA,MAYC;AAAA,4BAAC,kBAAe,eAAa,QAE1B;AAAA;AAAA;AAAA;AAAA,UAIC,oBAAC,yCAAW,qBAAX,EAAgC,WAAS;AAAA;AAAA;AAAA,UAG1C,oBAAC,YAAQ,UAAS;AAAA,WAEtB;AAAA,QACA,qBAAC,kBAAe,eAAa,eAC1B;AAAA,mBACC,qBAAC,SAAI,WAAW,UAAU,QACvB;AAAA;AAAA,YACD,oBAAC,QAAG;AAAA,aACN;AAAA,UAEF,oBAAC,wBAAa,WAAW,UAAU,MAAO,mBAAQ;AAAA,UACjD,UACC,qBAAC,SAAI,WAAW,UAAU,QACxB;AAAA,gCAAC,QAAG;AAAA,YACH;AAAA,aACH;AAAA,WAEJ;AAAA;AAAA;AAAA,EACF;AAEJ;;;ACzHA,IAAOA,mBAAQ;","names":["Popover_default"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Alert/Alert.tsx","../src/Alert/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { AlertProps as HeroAlertProps } from '@heroui/alert';\nimport type { ReactNode } from 'react';\n\nimport { Alert as HeroAlert } from '@heroui/alert';\nimport { alert as heroAlertVariants } from '@heroui/theme';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nexport const alertVariants = tv({\n slots: {\n base: '',\n title: '',\n description: '',\n mainWrapper: '',\n closeButton: '',\n iconWrapper: '',\n alertIcon: '',\n },\n variants: {\n // see: https://github.com/heroui-inc/heroui/blob/canary/packages/core/theme/src/components/alert.ts\n color: {\n info: {\n mainWrapper: 'text-inherit',\n title: 'text-inherit',\n description: 'text-inherit',\n },\n ...heroAlertVariants.variants.color,\n },\n variant: {\n ...heroAlertVariants.variants.variant,\n },\n },\n compoundVariants: [\n ...heroAlertVariants.compoundVariants,\n {\n color: 'info',\n variant: 'solid',\n className: {\n base: 'bg-info text-info-foreground',\n alertIcon: 'text-info-foreground',\n closeButton: 'text-inherit',\n },\n },\n {\n color: 'info',\n variant: 'flat',\n className: {\n alertIcon: 'fill-current',\n base: 'dark:bg-info-50/50 bg-info-50 text-info-600',\n closeButton: 'text-info-500 data-[hover]:bg-info-200',\n iconWrapper: 'border-info-100 bg-info-50 dark:bg-info-100',\n },\n },\n {\n color: 'info',\n variant: 'faded',\n className: {\n alertIcon: 'fill-current',\n base: 'dark:bg-info-50/50 border-small border-info-200 bg-info-50 text-info-600 dark:border-info-100',\n closeButton: 'text-info-500 data-[hover]:bg-info-200',\n iconWrapper: 'border-info-100 bg-info-50 dark:bg-info-100',\n },\n },\n {\n color: 'info',\n variant: 'bordered',\n className: {\n alertIcon: 'fill-current',\n base: 'border-small border-info text-info',\n closeButton: 'text-info-500 data-[hover]:bg-info-200',\n iconWrapper: 'bg-info-100 dark:bg-info-50',\n },\n },\n ],\n});\n\nexport type VariantProps = TVProps<typeof alertVariants>;\ntype ClassName = TVClassName<typeof alertVariants>;\n\nexport interface AlertProps extends VariantProps {\n /** Content displayed inside the Alert if no description is given! */\n children?: ReactNode;\n /** CSS class name */\n className?: ClassName;\n /** Color scheme of the Alert */\n color?: VariantProps['color'];\n /** Content displayed at the end of the Alert */\n endContent?: ReactNode;\n /** Icon displayed at the start of the Alert */\n icon?: ReactNode;\n /** Whether the Alert can be closed */\n isClosable?: boolean;\n /** Callback fired when the close button is clicked */\n onClose?: () => void | undefined;\n /** Whether to show the icon at the start */\n showIcon?: boolean;\n /** HTML data-testid attribute used in e2e tests */\n testId?: string;\n /** Title displayed in the Alert above the content */\n title?: ReactNode;\n /** Style variant of the Alert */\n variant?: VariantProps['variant'];\n}\n\n/**\n * Alert component based on [HeroUI Alert](https://www.heroui.com//docs/components/alert)\n */\nconst Alert = ({\n children = undefined,\n className = undefined,\n color = 'primary',\n endContent = undefined,\n icon = undefined,\n isClosable = false,\n onClose = undefined,\n showIcon = true,\n testId = undefined,\n title = undefined,\n variant = 'solid',\n}: AlertProps) => {\n const variants = alertVariants({\n color,\n variant,\n });\n const isHeroUIColor = Object.keys(heroAlertVariants.variants.color).includes(\n color,\n );\n const classNames = variantsToClassNames(variants, className, 'base');\n\n return (\n <HeroAlert\n classNames={classNames}\n color={isHeroUIColor ? (color as HeroAlertProps['color']) : undefined}\n data-testid={testId}\n description={title ? children : undefined}\n endContent={endContent}\n hideIcon={!showIcon}\n icon={icon}\n isClosable={isClosable}\n onClose={onClose}\n title={(title || children) as string}\n variant={variant}\n />\n );\n};\n\nexport default Alert;\n","import Alert, { alertVariants } from './Alert';\n\nexport type { AlertProps } from './Alert';\n\nexport { Alert, alertVariants };\n\nexport default Alert;\n"],"mappings":";;;;;AAIA,SAAS,SAAS,iBAAiB;AACnC,SAAS,SAAS,yBAAyB;AAE3C,SAAS,IAAI,4BAA4B;AA4HrC;AA1HG,IAAM,gBAAgB,GAAG;AAAA,EAC9B,OAAO;AAAA,IACL,MAAM;AAAA,IACN,OAAO;AAAA,IACP,aAAa;AAAA,IACb,aAAa;AAAA,IACb,aAAa;AAAA,IACb,aAAa;AAAA,IACb,WAAW;AAAA,EACb;AAAA,EACA,UAAU;AAAA;AAAA,IAER,OAAO;AAAA,MACL,MAAM;AAAA,QACJ,aAAa;AAAA,QACb,OAAO;AAAA,QACP,aAAa;AAAA,MACf;AAAA,OACG,kBAAkB,SAAS;AAAA,IAEhC,SAAS,mBACJ,kBAAkB,SAAS;AAAA,EAElC;AAAA,EACA,kBAAkB;AAAA,IAChB,GAAG,kBAAkB;AAAA,IACrB;AAAA,MACE,OAAO;AAAA,MACP,SAAS;AAAA,MACT,WAAW;AAAA,QACT,MAAM;AAAA,QACN,WAAW;AAAA,QACX,aAAa;AAAA,MACf;AAAA,IACF;AAAA,IACA;AAAA,MACE,OAAO;AAAA,MACP,SAAS;AAAA,MACT,WAAW;AAAA,QACT,WAAW;AAAA,QACX,MAAM;AAAA,QACN,aAAa;AAAA,QACb,aAAa;AAAA,MACf;AAAA,IACF;AAAA,IACA;AAAA,MACE,OAAO;AAAA,MACP,SAAS;AAAA,MACT,WAAW;AAAA,QACT,WAAW;AAAA,QACX,MAAM;AAAA,QACN,aAAa;AAAA,QACb,aAAa;AAAA,MACf;AAAA,IACF;AAAA,IACA;AAAA,MACE,OAAO;AAAA,MACP,SAAS;AAAA,MACT,WAAW;AAAA,QACT,WAAW;AAAA,QACX,MAAM;AAAA,QACN,aAAa;AAAA,QACb,aAAa;AAAA,MACf;AAAA,IACF;AAAA,EACF;AACF,CAAC;AAiCD,IAAM,QAAQ,CAAC;AAAA,EACb,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,aAAa;AAAA,EACb,OAAO;AAAA,EACP,aAAa;AAAA,EACb,UAAU;AAAA,EACV,WAAW;AAAA,EACX,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,UAAU;AACZ,MAAkB;AAChB,QAAM,WAAW,cAAc;AAAA,IAC7B;AAAA,IACA;AAAA,EACF,CAAC;AACD,QAAM,gBAAgB,OAAO,KAAK,kBAAkB,SAAS,KAAK,EAAE;AAAA,IAClE;AAAA,EACF;AACA,QAAM,aAAa,qBAAqB,UAAU,WAAW,MAAM;AAEnE,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,OAAO,gBAAiB,QAAoC;AAAA,MAC5D,eAAa;AAAA,MACb,aAAa,QAAQ,WAAW;AAAA,MAChC;AAAA,MACA,UAAU,CAAC;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAQ,SAAS;AAAA,MACjB;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,gBAAQ;;;AC7If,IAAOA,iBAAQ;","names":["Alert_default"]}
|