@appcorp/shadcn 1.1.19 → 1.1.21
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/components/aceternity-ui/apple-cards-carousel.d.ts +35 -0
- package/components/aceternity-ui/apple-cards-carousel.js +263 -0
- package/components/enhanced-table-header-action.js +11 -7
- package/components/ui/resizable.d.ts +1 -1
- package/hooks/use-outside-click.d.ts +2 -0
- package/hooks/use-outside-click.js +23 -0
- package/package.json +11 -8
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import React, { JSX } from "react";
|
|
2
|
+
import { ImageProps } from "next/image";
|
|
3
|
+
interface AppleCardsCarouselProps {
|
|
4
|
+
items: JSX.Element[];
|
|
5
|
+
initialScroll?: number;
|
|
6
|
+
}
|
|
7
|
+
type Card = {
|
|
8
|
+
src: string;
|
|
9
|
+
title: string;
|
|
10
|
+
category: string;
|
|
11
|
+
content: React.ReactNode;
|
|
12
|
+
};
|
|
13
|
+
export declare const CarouselContext: React.Context<{
|
|
14
|
+
onCardClose: (index: number) => void;
|
|
15
|
+
currentIndex: number;
|
|
16
|
+
}>;
|
|
17
|
+
export declare const AppleCardsCarousel: ({ items, initialScroll, }: AppleCardsCarouselProps) => JSX.Element;
|
|
18
|
+
export declare const AppleCardsCarouselMobileControls: ({ canScrollLeft, canScrollRight, onLeft, onRight, mounted, coords, }: {
|
|
19
|
+
canScrollLeft: boolean;
|
|
20
|
+
canScrollRight: boolean;
|
|
21
|
+
onLeft: () => void;
|
|
22
|
+
onRight: () => void;
|
|
23
|
+
mounted: boolean;
|
|
24
|
+
coords?: {
|
|
25
|
+
right: number;
|
|
26
|
+
top: number;
|
|
27
|
+
} | null;
|
|
28
|
+
}) => React.ReactPortal | null;
|
|
29
|
+
export declare const Card: ({ card, index, layout, }: {
|
|
30
|
+
card: Card;
|
|
31
|
+
index: number;
|
|
32
|
+
layout?: boolean;
|
|
33
|
+
}) => JSX.Element;
|
|
34
|
+
export declare const BlurImage: ({ height, width, src, className, alt, ...rest }: ImageProps) => JSX.Element;
|
|
35
|
+
export {};
|
|
@@ -0,0 +1,263 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
"use strict";
|
|
3
|
+
var __assign = (this && this.__assign) || function () {
|
|
4
|
+
__assign = Object.assign || function(t) {
|
|
5
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
6
|
+
s = arguments[i];
|
|
7
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
8
|
+
t[p] = s[p];
|
|
9
|
+
}
|
|
10
|
+
return t;
|
|
11
|
+
};
|
|
12
|
+
return __assign.apply(this, arguments);
|
|
13
|
+
};
|
|
14
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
15
|
+
if (k2 === undefined) k2 = k;
|
|
16
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
17
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
18
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
19
|
+
}
|
|
20
|
+
Object.defineProperty(o, k2, desc);
|
|
21
|
+
}) : (function(o, m, k, k2) {
|
|
22
|
+
if (k2 === undefined) k2 = k;
|
|
23
|
+
o[k2] = m[k];
|
|
24
|
+
}));
|
|
25
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
26
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
27
|
+
}) : function(o, v) {
|
|
28
|
+
o["default"] = v;
|
|
29
|
+
});
|
|
30
|
+
var __importStar = (this && this.__importStar) || (function () {
|
|
31
|
+
var ownKeys = function(o) {
|
|
32
|
+
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
33
|
+
var ar = [];
|
|
34
|
+
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
35
|
+
return ar;
|
|
36
|
+
};
|
|
37
|
+
return ownKeys(o);
|
|
38
|
+
};
|
|
39
|
+
return function (mod) {
|
|
40
|
+
if (mod && mod.__esModule) return mod;
|
|
41
|
+
var result = {};
|
|
42
|
+
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
43
|
+
__setModuleDefault(result, mod);
|
|
44
|
+
return result;
|
|
45
|
+
};
|
|
46
|
+
})();
|
|
47
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
48
|
+
var t = {};
|
|
49
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
50
|
+
t[p] = s[p];
|
|
51
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
52
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
53
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
54
|
+
t[p[i]] = s[p[i]];
|
|
55
|
+
}
|
|
56
|
+
return t;
|
|
57
|
+
};
|
|
58
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
59
|
+
exports.BlurImage = exports.Card = exports.AppleCardsCarouselMobileControls = exports.AppleCardsCarousel = exports.CarouselContext = void 0;
|
|
60
|
+
var react_1 = __importStar(require("react"));
|
|
61
|
+
var react_dom_1 = require("react-dom");
|
|
62
|
+
var icons_react_1 = require("@tabler/icons-react");
|
|
63
|
+
var utils_1 = require("@/lib/utils");
|
|
64
|
+
var react_2 = require("motion/react");
|
|
65
|
+
var use_outside_click_1 = require("@/hooks/use-outside-click");
|
|
66
|
+
exports.CarouselContext = (0, react_1.createContext)({
|
|
67
|
+
onCardClose: function () { },
|
|
68
|
+
currentIndex: 0,
|
|
69
|
+
});
|
|
70
|
+
var AppleCardsCarousel = function (_a) {
|
|
71
|
+
var items = _a.items, _b = _a.initialScroll, initialScroll = _b === void 0 ? 0 : _b;
|
|
72
|
+
var carouselRef = react_1.default.useRef(null);
|
|
73
|
+
var _c = react_1.default.useState(false), canScrollLeft = _c[0], setCanScrollLeft = _c[1];
|
|
74
|
+
var _d = react_1.default.useState(true), canScrollRight = _d[0], setCanScrollRight = _d[1];
|
|
75
|
+
var _e = (0, react_1.useState)(0), currentIndex = _e[0], setCurrentIndex = _e[1];
|
|
76
|
+
(0, react_1.useEffect)(function () {
|
|
77
|
+
if (carouselRef.current) {
|
|
78
|
+
carouselRef.current.scrollLeft = initialScroll;
|
|
79
|
+
checkScrollability();
|
|
80
|
+
}
|
|
81
|
+
}, [initialScroll]);
|
|
82
|
+
(0, react_1.useEffect)(function () {
|
|
83
|
+
// Ensure control enabled/disabled state is correct on mount and resize
|
|
84
|
+
try {
|
|
85
|
+
checkScrollability();
|
|
86
|
+
}
|
|
87
|
+
catch (e) {
|
|
88
|
+
/* ignore if DOM not yet ready */
|
|
89
|
+
}
|
|
90
|
+
var onResize = function () { return checkScrollability(); };
|
|
91
|
+
window.addEventListener("resize", onResize);
|
|
92
|
+
return function () { return window.removeEventListener("resize", onResize); };
|
|
93
|
+
}, []);
|
|
94
|
+
// mounted flag for portal rendering
|
|
95
|
+
var _f = (0, react_1.useState)(false), isMounted = _f[0], setIsMounted = _f[1];
|
|
96
|
+
(0, react_1.useEffect)(function () {
|
|
97
|
+
setIsMounted(true);
|
|
98
|
+
return function () { return setIsMounted(false); };
|
|
99
|
+
}, []);
|
|
100
|
+
// controls position (viewport-fixed coords) for mobile portal
|
|
101
|
+
var _g = (0, react_1.useState)(null), controlsPos = _g[0], setControlsPos = _g[1];
|
|
102
|
+
var updateControlsPosition = function () {
|
|
103
|
+
var el = carouselRef.current;
|
|
104
|
+
if (!el)
|
|
105
|
+
return;
|
|
106
|
+
var rect = el.getBoundingClientRect();
|
|
107
|
+
// Compute viewport-based coords (use getBoundingClientRect directly)
|
|
108
|
+
// Compute viewport-based coords so controls appear under the cards on the right
|
|
109
|
+
var pad = 12;
|
|
110
|
+
var offset = 8; // px below the carousel
|
|
111
|
+
// Position fixed: distance from viewport right edge to align with carousel right
|
|
112
|
+
var right = Math.max(pad, window.innerWidth - rect.right + pad);
|
|
113
|
+
var top = rect.bottom + offset;
|
|
114
|
+
top = Math.max(pad, Math.min(top, window.innerHeight - pad));
|
|
115
|
+
setControlsPos({ right: right, top: top });
|
|
116
|
+
};
|
|
117
|
+
(0, react_1.useEffect)(function () {
|
|
118
|
+
updateControlsPosition();
|
|
119
|
+
var onResize = function () { return updateControlsPosition(); };
|
|
120
|
+
var onScroll = function () { return updateControlsPosition(); };
|
|
121
|
+
window.addEventListener("resize", onResize);
|
|
122
|
+
window.addEventListener("scroll", onScroll, { passive: true });
|
|
123
|
+
return function () {
|
|
124
|
+
window.removeEventListener("resize", onResize);
|
|
125
|
+
window.removeEventListener("scroll", onScroll);
|
|
126
|
+
};
|
|
127
|
+
}, [carouselRef.current]);
|
|
128
|
+
var checkScrollability = function () {
|
|
129
|
+
if (carouselRef.current) {
|
|
130
|
+
var _a = carouselRef.current, scrollLeft_1 = _a.scrollLeft, scrollWidth = _a.scrollWidth, clientWidth = _a.clientWidth;
|
|
131
|
+
setCanScrollLeft(scrollLeft_1 > 0);
|
|
132
|
+
setCanScrollRight(scrollLeft_1 < scrollWidth - clientWidth);
|
|
133
|
+
}
|
|
134
|
+
};
|
|
135
|
+
var scrollLeft = function () {
|
|
136
|
+
if (carouselRef.current) {
|
|
137
|
+
carouselRef.current.scrollBy({ left: -300, behavior: "smooth" });
|
|
138
|
+
}
|
|
139
|
+
};
|
|
140
|
+
var scrollRight = function () {
|
|
141
|
+
if (carouselRef.current) {
|
|
142
|
+
carouselRef.current.scrollBy({ left: 300, behavior: "smooth" });
|
|
143
|
+
}
|
|
144
|
+
};
|
|
145
|
+
var handleCardClose = function (index) {
|
|
146
|
+
if (carouselRef.current) {
|
|
147
|
+
var cardWidth = isMobile() ? 230 : 384; // (md:w-96)
|
|
148
|
+
var gap = isMobile() ? 4 : 8;
|
|
149
|
+
var scrollPosition = (cardWidth + gap) * (index + 1);
|
|
150
|
+
carouselRef.current.scrollTo({
|
|
151
|
+
left: scrollPosition,
|
|
152
|
+
behavior: "smooth",
|
|
153
|
+
});
|
|
154
|
+
setCurrentIndex(index);
|
|
155
|
+
}
|
|
156
|
+
};
|
|
157
|
+
var isMobile = function () {
|
|
158
|
+
return window && window.innerWidth < 768;
|
|
159
|
+
};
|
|
160
|
+
return (react_1.default.createElement(exports.CarouselContext.Provider, { value: { onCardClose: handleCardClose, currentIndex: currentIndex } },
|
|
161
|
+
react_1.default.createElement("div", { className: "relative w-full h-auto" },
|
|
162
|
+
react_1.default.createElement("div", { className: "flex w-full overflow-x-scroll overscroll-x-auto scroll-smooth py-10 [scrollbar-width:none] md:py-20", ref: carouselRef, onScroll: checkScrollability },
|
|
163
|
+
react_1.default.createElement("div", { className: (0, utils_1.cn)("absolute right-0 z-[1000] h-auto w-[5%] overflow-hidden bg-gradient-to-l") }),
|
|
164
|
+
react_1.default.createElement("div", { className: (0, utils_1.cn)("flex flex-row justify-start gap-4 pl-4", "mx-auto max-w-7xl" // remove max-w-4xl if you want the carousel to span the full width of its container
|
|
165
|
+
) }, items.map(function (item, index) { return (react_1.default.createElement(react_2.motion.div, { initial: {
|
|
166
|
+
opacity: 0,
|
|
167
|
+
y: 20,
|
|
168
|
+
}, animate: {
|
|
169
|
+
opacity: 1,
|
|
170
|
+
y: 0,
|
|
171
|
+
transition: {
|
|
172
|
+
duration: 0.5,
|
|
173
|
+
delay: 0.2 * index,
|
|
174
|
+
ease: "easeOut",
|
|
175
|
+
},
|
|
176
|
+
}, viewport: { once: true }, key: "card" + index, className: "rounded-3xl last:pr-[5%] md:last:pr-[33%]" }, item)); }))),
|
|
177
|
+
react_1.default.createElement("div", { className: "hidden md:flex mr-10 justify-end gap-2" },
|
|
178
|
+
react_1.default.createElement("button", { className: "relative z-40 flex h-10 w-10 items-center justify-center rounded-full bg-gray-100 disabled:opacity-50", onClick: scrollLeft, disabled: !canScrollLeft, "aria-label": "Scroll left" },
|
|
179
|
+
react_1.default.createElement(icons_react_1.IconArrowNarrowLeft, { className: "h-6 w-6 text-gray-500" })),
|
|
180
|
+
react_1.default.createElement("button", { className: "relative z-40 flex h-10 w-10 items-center justify-center rounded-full bg-gray-100 disabled:opacity-50", onClick: scrollRight, disabled: !canScrollRight, "aria-label": "Scroll right" },
|
|
181
|
+
react_1.default.createElement(icons_react_1.IconArrowNarrowRight, { className: "h-6 w-6 text-gray-500" }))),
|
|
182
|
+
isMounted && (react_1.default.createElement(exports.AppleCardsCarouselMobileControls, { canScrollLeft: canScrollLeft, canScrollRight: canScrollRight, onLeft: scrollLeft, onRight: scrollRight, mounted: isMounted, coords: controlsPos })))));
|
|
183
|
+
};
|
|
184
|
+
exports.AppleCardsCarousel = AppleCardsCarousel;
|
|
185
|
+
// Render mobile controls via portal so fixed positioning isn't clipped
|
|
186
|
+
// Portal is placed after component to avoid SSR issues (renders only on mount)
|
|
187
|
+
var AppleCardsCarouselMobileControls = function (_a) {
|
|
188
|
+
var canScrollLeft = _a.canScrollLeft, canScrollRight = _a.canScrollRight, onLeft = _a.onLeft, onRight = _a.onRight, mounted = _a.mounted, coords = _a.coords;
|
|
189
|
+
if (!mounted || typeof document === "undefined")
|
|
190
|
+
return null;
|
|
191
|
+
var fallbackStyle = {
|
|
192
|
+
position: "fixed",
|
|
193
|
+
left: "50%",
|
|
194
|
+
bottom: "calc(env(safe-area-inset-bottom, 0px) + 1rem)",
|
|
195
|
+
transform: "translateX(-50%)",
|
|
196
|
+
};
|
|
197
|
+
var positionedStyle = coords
|
|
198
|
+
? {
|
|
199
|
+
position: "fixed",
|
|
200
|
+
right: coords.right,
|
|
201
|
+
top: coords.top,
|
|
202
|
+
}
|
|
203
|
+
: undefined;
|
|
204
|
+
return (0, react_dom_1.createPortal)(react_1.default.createElement("div", { className: "z-50 flex gap-2 md:hidden", style: positionedStyle !== null && positionedStyle !== void 0 ? positionedStyle : fallbackStyle },
|
|
205
|
+
react_1.default.createElement("button", { className: "relative z-40 flex h-12 w-12 items-center justify-center rounded-full bg-gray-100 disabled:opacity-50", onClick: onLeft, disabled: !canScrollLeft, "aria-label": "Scroll left" },
|
|
206
|
+
react_1.default.createElement(icons_react_1.IconArrowNarrowLeft, { className: "h-6 w-6 text-gray-500" })),
|
|
207
|
+
react_1.default.createElement("button", { className: "relative z-40 flex h-12 w-12 items-center justify-center rounded-full bg-gray-100 disabled:opacity-50", onClick: onRight, disabled: !canScrollRight, "aria-label": "Scroll right" },
|
|
208
|
+
react_1.default.createElement(icons_react_1.IconArrowNarrowRight, { className: "h-6 w-6 text-gray-500" }))), document.body);
|
|
209
|
+
};
|
|
210
|
+
exports.AppleCardsCarouselMobileControls = AppleCardsCarouselMobileControls;
|
|
211
|
+
var Card = function (_a) {
|
|
212
|
+
var card = _a.card, index = _a.index, _b = _a.layout, layout = _b === void 0 ? false : _b;
|
|
213
|
+
var _c = (0, react_1.useState)(false), open = _c[0], setOpen = _c[1];
|
|
214
|
+
var containerRef = (0, react_1.useRef)(null);
|
|
215
|
+
var onCardClose = (0, react_1.useContext)(exports.CarouselContext).onCardClose;
|
|
216
|
+
(0, react_1.useEffect)(function () {
|
|
217
|
+
function onKeyDown(event) {
|
|
218
|
+
if (event.key === "Escape") {
|
|
219
|
+
handleClose();
|
|
220
|
+
}
|
|
221
|
+
}
|
|
222
|
+
if (open) {
|
|
223
|
+
document.body.style.overflow = "hidden";
|
|
224
|
+
}
|
|
225
|
+
else {
|
|
226
|
+
document.body.style.overflow = "auto";
|
|
227
|
+
}
|
|
228
|
+
window.addEventListener("keydown", onKeyDown);
|
|
229
|
+
return function () { return window.removeEventListener("keydown", onKeyDown); };
|
|
230
|
+
}, [open]);
|
|
231
|
+
(0, use_outside_click_1.useOutsideClick)(containerRef, function () {
|
|
232
|
+
return handleClose();
|
|
233
|
+
});
|
|
234
|
+
var handleOpen = function () {
|
|
235
|
+
setOpen(true);
|
|
236
|
+
};
|
|
237
|
+
var handleClose = function () {
|
|
238
|
+
setOpen(false);
|
|
239
|
+
onCardClose(index);
|
|
240
|
+
};
|
|
241
|
+
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
242
|
+
react_1.default.createElement(react_2.AnimatePresence, null, open && (react_1.default.createElement("div", { className: "fixed inset-0 z-50 h-screen overflow-auto" },
|
|
243
|
+
react_1.default.createElement(react_2.motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, className: "fixed inset-0 h-full w-full bg-black/80 backdrop-blur-lg" }),
|
|
244
|
+
react_1.default.createElement(react_2.motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, ref: containerRef, layoutId: layout ? "card-".concat(card.title) : undefined, className: "relative z-[60] mx-auto my-10 h-fit max-w-5xl rounded-3xl bg-white p-4 font-sans md:p-10 dark:bg-neutral-900" },
|
|
245
|
+
react_1.default.createElement("button", { className: "sticky top-4 right-0 ml-auto flex h-8 w-8 items-center justify-center rounded-full bg-black dark:bg-white", onClick: handleClose },
|
|
246
|
+
react_1.default.createElement(icons_react_1.IconX, { className: "h-6 w-6 text-neutral-100 dark:text-neutral-900" })),
|
|
247
|
+
react_1.default.createElement(react_2.motion.p, { layoutId: layout ? "category-".concat(card.title) : undefined, className: "text-base font-medium text-black dark:text-white" }, card.category),
|
|
248
|
+
react_1.default.createElement(react_2.motion.p, { layoutId: layout ? "title-".concat(card.title) : undefined, className: "mt-4 text-2xl font-semibold text-neutral-700 md:text-5xl dark:text-white" }, card.title),
|
|
249
|
+
react_1.default.createElement("div", { className: "py-10" }, card.content))))),
|
|
250
|
+
react_1.default.createElement(react_2.motion.button, { layoutId: layout ? "card-".concat(card.title) : undefined, onClick: handleOpen, className: "relative z-10 flex h-80 w-56 flex-col items-start justify-start overflow-hidden rounded-3xl bg-gray-100 md:h-[40rem] md:w-96 dark:bg-neutral-900" },
|
|
251
|
+
react_1.default.createElement("div", { className: "pointer-events-none absolute inset-x-0 top-0 z-30 h-full bg-gradient-to-b from-black/50 via-transparent to-transparent" }),
|
|
252
|
+
react_1.default.createElement("div", { className: "relative z-40 p-8" },
|
|
253
|
+
react_1.default.createElement(react_2.motion.p, { layoutId: layout ? "category-".concat(card.category) : undefined, className: "text-left font-sans text-sm font-medium text-white md:text-base" }, card.category),
|
|
254
|
+
react_1.default.createElement(react_2.motion.p, { layoutId: layout ? "title-".concat(card.title) : undefined, className: "mt-2 max-w-xs text-left font-sans text-xl font-semibold [text-wrap:balance] text-white md:text-3xl" }, card.title)),
|
|
255
|
+
react_1.default.createElement(exports.BlurImage, { src: card.src, alt: card.title, fill: true, className: "absolute inset-0 z-10 object-cover" }))));
|
|
256
|
+
};
|
|
257
|
+
exports.Card = Card;
|
|
258
|
+
var BlurImage = function (_a) {
|
|
259
|
+
var height = _a.height, width = _a.width, src = _a.src, className = _a.className, alt = _a.alt, rest = __rest(_a, ["height", "width", "src", "className", "alt"]);
|
|
260
|
+
var _b = (0, react_1.useState)(true), isLoading = _b[0], setLoading = _b[1];
|
|
261
|
+
return (react_1.default.createElement("img", __assign({ className: (0, utils_1.cn)("h-full w-full transition duration-300", isLoading ? "blur-sm" : "blur-0", className), onLoad: function () { return setLoading(false); }, src: src, width: width, height: height, loading: "lazy", decoding: "async", blurDataURL: typeof src === "string" ? src : undefined, alt: alt ? alt : "Background of a beautiful view" }, rest)));
|
|
262
|
+
};
|
|
263
|
+
exports.BlurImage = BlurImage;
|
|
@@ -6,8 +6,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
6
6
|
exports.EnhancedTableHeaderAction = void 0;
|
|
7
7
|
var react_1 = __importDefault(require("react"));
|
|
8
8
|
var lucide_react_1 = require("lucide-react");
|
|
9
|
-
var button_1 = require("./ui/button");
|
|
10
9
|
var badge_1 = require("./ui/badge");
|
|
10
|
+
var button_1 = require("./ui/button");
|
|
11
|
+
var utils_1 = require("../lib/utils");
|
|
11
12
|
var EnhancedTableHeaderAction = function (_a) {
|
|
12
13
|
var headerActions = _a.headerActions, numberOfFilters = _a.numberOfFilters, onClearFilters = _a.onClearFilters, testIdWrapper = _a.testIdWrapper, testIdActionPrefix = _a.testIdActionPrefix, testIdFilterBadge = _a.testIdFilterBadge, testIdClearFilters = _a.testIdClearFilters;
|
|
13
14
|
return (react_1.default.createElement(react_1.default.Fragment, null, headerActions.length > 0 && (react_1.default.createElement("div", { className: "flex gap-2", "data-testid": testIdWrapper }, headerActions
|
|
@@ -30,12 +31,15 @@ var EnhancedTableHeaderAction = function (_a) {
|
|
|
30
31
|
action.handleOnClick();
|
|
31
32
|
} }, action.label),
|
|
32
33
|
showFilterIndicators && (react_1.default.createElement(react_1.default.Fragment, null,
|
|
33
|
-
react_1.default.createElement(
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
34
|
+
react_1.default.createElement("div", { className: "absolute -top-2 -left-2 group" },
|
|
35
|
+
react_1.default.createElement(badge_1.Badge, { variant: "secondary", className: (0, utils_1.cn)("h-5 w-5 flex items-center justify-center p-0 text-xs rounded-full transition-all relative", onClearFilters && "cursor-pointer"), "data-testid": testIdFilterBadge, onClick: onClearFilters
|
|
36
|
+
? function (e) {
|
|
37
|
+
e.stopPropagation();
|
|
38
|
+
onClearFilters();
|
|
39
|
+
}
|
|
40
|
+
: undefined },
|
|
41
|
+
react_1.default.createElement("span", { className: (0, utils_1.cn)("transition-opacity absolute", onClearFilters && "group-hover:opacity-0") }, numberOfFilters),
|
|
42
|
+
onClearFilters && (react_1.default.createElement(lucide_react_1.X, { className: "h-3 w-3 absolute opacity-0 group-hover:opacity-100 transition-opacity", "data-testid": testIdClearFilters }))))))));
|
|
39
43
|
})))));
|
|
40
44
|
};
|
|
41
45
|
exports.EnhancedTableHeaderAction = EnhancedTableHeaderAction;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import * as ResizablePrimitive from "react-resizable-panels";
|
|
3
3
|
declare const ResizablePanelGroup: ({ className, ...props }: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => React.JSX.Element;
|
|
4
|
-
declare const ResizablePanel: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLElement | HTMLButtonElement | HTMLDivElement | HTMLInputElement | HTMLObjectElement | HTMLStyleElement | HTMLTitleElement | HTMLSpanElement | HTMLAnchorElement | HTMLAreaElement | HTMLAudioElement | HTMLBaseElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLCanvasElement | HTMLTableColElement | HTMLDataElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDialogElement | HTMLDListElement | HTMLEmbedElement | HTMLFieldSetElement | HTMLFormElement | HTMLHeadingElement | HTMLHeadElement | HTMLHRElement | HTMLHtmlElement | HTMLIFrameElement | HTMLImageElement | HTMLLabelElement | HTMLLegendElement | HTMLLIElement | HTMLLinkElement | HTMLMapElement | HTMLMetaElement | HTMLMeterElement | HTMLOListElement | HTMLOptGroupElement | HTMLOptionElement | HTMLOutputElement | HTMLParagraphElement | HTMLPreElement | HTMLProgressElement |
|
|
4
|
+
declare const ResizablePanel: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLElement | HTMLButtonElement | HTMLDivElement | HTMLInputElement | HTMLObjectElement | HTMLSlotElement | HTMLStyleElement | HTMLTitleElement | HTMLSpanElement | HTMLAnchorElement | HTMLAreaElement | HTMLAudioElement | HTMLBaseElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLCanvasElement | HTMLTableColElement | HTMLDataElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDialogElement | HTMLDListElement | HTMLEmbedElement | HTMLFieldSetElement | HTMLFormElement | HTMLHeadingElement | HTMLHeadElement | HTMLHRElement | HTMLHtmlElement | HTMLIFrameElement | HTMLImageElement | HTMLLabelElement | HTMLLegendElement | HTMLLIElement | HTMLLinkElement | HTMLMapElement | HTMLMetaElement | HTMLMeterElement | HTMLOListElement | HTMLOptGroupElement | HTMLOptionElement | HTMLOutputElement | HTMLParagraphElement | HTMLPreElement | HTMLProgressElement | HTMLScriptElement | HTMLSelectElement | HTMLSourceElement | HTMLTableElement | HTMLTemplateElement | HTMLTableSectionElement | HTMLTableCellElement | HTMLTextAreaElement | HTMLTimeElement | HTMLTableRowElement | HTMLTrackElement | HTMLUListElement | HTMLVideoElement | HTMLTableCaptionElement | HTMLMenuElement | HTMLPictureElement>, "id" | "onResize"> & {
|
|
5
5
|
className?: string;
|
|
6
6
|
collapsedSize?: number | undefined;
|
|
7
7
|
collapsible?: boolean | undefined;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.useOutsideClick = void 0;
|
|
4
|
+
var react_1 = require("react");
|
|
5
|
+
var useOutsideClick = function (ref, callback) {
|
|
6
|
+
(0, react_1.useEffect)(function () {
|
|
7
|
+
var listener = function (event) {
|
|
8
|
+
var target = event.target;
|
|
9
|
+
// DO NOTHING if the element being clicked is the target element or their children
|
|
10
|
+
if (!ref.current || (target && ref.current.contains(target))) {
|
|
11
|
+
return;
|
|
12
|
+
}
|
|
13
|
+
callback(event);
|
|
14
|
+
};
|
|
15
|
+
document.addEventListener("mousedown", listener);
|
|
16
|
+
document.addEventListener("touchstart", listener);
|
|
17
|
+
return function () {
|
|
18
|
+
document.removeEventListener("mousedown", listener);
|
|
19
|
+
document.removeEventListener("touchstart", listener);
|
|
20
|
+
};
|
|
21
|
+
}, [ref, callback]);
|
|
22
|
+
};
|
|
23
|
+
exports.useOutsideClick = useOutsideClick;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@appcorp/shadcn",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.21",
|
|
4
4
|
"scripts": {
|
|
5
5
|
"build:next": "next build",
|
|
6
6
|
"build:storybook": "storybook build -c .storybook -o .out",
|
|
@@ -63,9 +63,9 @@
|
|
|
63
63
|
"@radix-ui/react-switch": "^1.2.6",
|
|
64
64
|
"@radix-ui/react-tabs": "^1.1.13",
|
|
65
65
|
"@radix-ui/react-toggle": "^1.1.10",
|
|
66
|
-
"@storybook/addon-docs": "^10.0
|
|
67
|
-
"@storybook/addon-onboarding": "^10.0
|
|
68
|
-
"@storybook/nextjs": "^10.0
|
|
66
|
+
"@storybook/addon-docs": "^10.1.0",
|
|
67
|
+
"@storybook/addon-onboarding": "^10.1.0",
|
|
68
|
+
"@storybook/nextjs": "^10.1.0",
|
|
69
69
|
"@tailwindcss/postcss": "^4.1.17",
|
|
70
70
|
"@tanstack/react-table": "^8.21.3",
|
|
71
71
|
"@testing-library/dom": "^10.4.1",
|
|
@@ -89,7 +89,7 @@
|
|
|
89
89
|
"eslint": "^9.37.0",
|
|
90
90
|
"eslint-config-next": "^15.5.5",
|
|
91
91
|
"eslint-config-prettier": "^10.1.8",
|
|
92
|
-
"eslint-plugin-storybook": "10.0
|
|
92
|
+
"eslint-plugin-storybook": "10.1.0",
|
|
93
93
|
"husky": "^9.1.7",
|
|
94
94
|
"input-otp": "^1.4.2",
|
|
95
95
|
"jest": "^30.2.0",
|
|
@@ -98,7 +98,7 @@
|
|
|
98
98
|
"lint-staged": "^16.2.4",
|
|
99
99
|
"lodash.throttle": "^4.1.1",
|
|
100
100
|
"lucide-react": "^0.556.0",
|
|
101
|
-
"motion": "^12.
|
|
101
|
+
"motion": "^12.26.2",
|
|
102
102
|
"next": "^15.5.6",
|
|
103
103
|
"next-themes": "^0.4.6",
|
|
104
104
|
"postcss": "^8.5.6",
|
|
@@ -113,7 +113,7 @@
|
|
|
113
113
|
"recharts": "3.5.1",
|
|
114
114
|
"rimraf": "^6.0.1",
|
|
115
115
|
"sonner": "^2.0.7",
|
|
116
|
-
"storybook": "^10.0
|
|
116
|
+
"storybook": "^10.1.0",
|
|
117
117
|
"tailwind-merge": "^3.3.1",
|
|
118
118
|
"tailwindcss": "^4.1.17",
|
|
119
119
|
"ts-node": "^10.9.2",
|
|
@@ -121,5 +121,8 @@
|
|
|
121
121
|
"vaul": "^1.1.2",
|
|
122
122
|
"zod": "^4.1.12"
|
|
123
123
|
},
|
|
124
|
-
"packageManager": "yarn@4.
|
|
124
|
+
"packageManager": "yarn@4.12.0",
|
|
125
|
+
"dependencies": {
|
|
126
|
+
"@tabler/icons-react": "^3.36.1"
|
|
127
|
+
}
|
|
125
128
|
}
|