my-animated-components 1.3.5 → 1.3.7
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/index.d.ts +47 -15
- package/dist/index.js +156 -77
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React$1 from 'react';
|
|
2
|
-
import { Variants } from 'framer-motion';
|
|
2
|
+
import { Variants, HTMLMotionProps, motion } from 'framer-motion';
|
|
3
3
|
|
|
4
4
|
declare const motionVariants: Record<string, Variants>;
|
|
5
5
|
|
|
@@ -19,12 +19,17 @@ interface SizeProps {
|
|
|
19
19
|
}
|
|
20
20
|
|
|
21
21
|
type Color$d = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
|
|
22
|
-
interface ButtonProps extends BaseProps,
|
|
23
|
-
onClick?: () => void;
|
|
24
|
-
disabled?: boolean;
|
|
22
|
+
interface ButtonProps extends BaseProps, SizeProps, HTMLMotionProps<'button'> {
|
|
25
23
|
variant?: 'solid' | 'outline' | 'ghost';
|
|
26
24
|
color?: Color$d;
|
|
25
|
+
/**
|
|
26
|
+
* Predefined motion variant name from motionVariants.
|
|
27
|
+
* This will apply the corresponding animation configuration.
|
|
28
|
+
*/
|
|
27
29
|
motionVariant?: keyof typeof motionVariants;
|
|
30
|
+
whileHoverAnimation?: keyof typeof motionVariants;
|
|
31
|
+
whileTapAnimation?: keyof typeof motionVariants;
|
|
32
|
+
whileFocusAnimation?: keyof typeof motionVariants;
|
|
28
33
|
}
|
|
29
34
|
declare const Button: React$1.FC<ButtonProps>;
|
|
30
35
|
|
|
@@ -36,19 +41,34 @@ interface IconButtonProps extends BaseProps, SizeProps {
|
|
|
36
41
|
variant?: 'solid' | 'outline' | 'ghost';
|
|
37
42
|
color?: Color$c;
|
|
38
43
|
motionVariant?: keyof typeof motionVariants;
|
|
44
|
+
whileHover?: React$1.ComponentProps<typeof motion.button>['whileHover'];
|
|
45
|
+
whileTap?: React$1.ComponentProps<typeof motion.button>['whileTap'];
|
|
46
|
+
whileFocus?: React$1.ComponentProps<typeof motion.button>['whileFocus'];
|
|
47
|
+
whileHoverAnimation?: keyof typeof motionVariants;
|
|
48
|
+
whileTapAnimation?: keyof typeof motionVariants;
|
|
49
|
+
whileFocusAnimation?: keyof typeof motionVariants;
|
|
39
50
|
}
|
|
40
51
|
declare const IconButton: React$1.FC<IconButtonProps>;
|
|
41
52
|
|
|
42
53
|
type Color$b = 'primary' | 'secondary' | 'danger' | 'success' | 'info' | 'warning';
|
|
43
|
-
type Variant = 'solid' | 'outline' | 'ghost';
|
|
54
|
+
type Variant$1 = 'solid' | 'outline' | 'ghost';
|
|
55
|
+
interface AccordionItem {
|
|
56
|
+
title: string;
|
|
57
|
+
content: React$1.ReactNode;
|
|
58
|
+
disabled?: boolean;
|
|
59
|
+
}
|
|
44
60
|
interface AccordionProps extends BaseProps, WithChildren {
|
|
45
|
-
items:
|
|
46
|
-
title: string;
|
|
47
|
-
content: React$1.ReactNode;
|
|
48
|
-
}[];
|
|
61
|
+
items: AccordionItem[];
|
|
49
62
|
color?: Color$b;
|
|
50
|
-
variant?: Variant;
|
|
63
|
+
variant?: Variant$1;
|
|
51
64
|
motionVariant?: keyof typeof motionVariants;
|
|
65
|
+
allowMultipleOpen?: boolean;
|
|
66
|
+
defaultOpenIndex?: number[];
|
|
67
|
+
customIcon?: React$1.ReactNode;
|
|
68
|
+
iconPosition?: 'left' | 'right';
|
|
69
|
+
wrapperClassName?: string;
|
|
70
|
+
headerClassName?: string;
|
|
71
|
+
contentClassName?: string;
|
|
52
72
|
}
|
|
53
73
|
declare const Accordion: React$1.FC<AccordionProps>;
|
|
54
74
|
|
|
@@ -255,12 +275,17 @@ interface OffcanvasHeaderProps extends BaseProps, WithChildren {
|
|
|
255
275
|
declare const OffcanvasHeader: React$1.FC<OffcanvasHeaderProps>;
|
|
256
276
|
|
|
257
277
|
type Color$5 = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
|
|
258
|
-
interface
|
|
278
|
+
interface PaginationMotionProps extends Omit<HTMLMotionProps<'nav'>, 'color'> {
|
|
279
|
+
}
|
|
280
|
+
interface PaginationProps extends BaseProps, PaginationMotionProps {
|
|
259
281
|
currentPage: number;
|
|
260
282
|
totalPages: number;
|
|
261
283
|
onPageChange: (page: number) => void;
|
|
262
284
|
color?: Color$5;
|
|
263
285
|
motionVariant?: keyof typeof motionVariants;
|
|
286
|
+
whileHoverAnimation?: keyof typeof motionVariants;
|
|
287
|
+
whileTapAnimation?: keyof typeof motionVariants;
|
|
288
|
+
whileFocusAnimation?: keyof typeof motionVariants;
|
|
264
289
|
}
|
|
265
290
|
declare const Pagination: React$1.FC<PaginationProps>;
|
|
266
291
|
|
|
@@ -337,13 +362,20 @@ declare const TableHead: React$1.FC<BaseProps & WithChildren>;
|
|
|
337
362
|
declare const TableRow: React$1.FC<BaseProps & WithChildren>;
|
|
338
363
|
|
|
339
364
|
type Color = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
|
|
365
|
+
type Variant = 'solid' | 'outline' | 'ghost';
|
|
366
|
+
interface TabItem {
|
|
367
|
+
label: string;
|
|
368
|
+
content: React$1.ReactNode;
|
|
369
|
+
disabled?: boolean;
|
|
370
|
+
}
|
|
340
371
|
interface TabsProps extends BaseProps, WithChildren {
|
|
341
|
-
tabs:
|
|
342
|
-
label: string;
|
|
343
|
-
content: React$1.ReactNode;
|
|
344
|
-
}[];
|
|
372
|
+
tabs: TabItem[];
|
|
345
373
|
motionVariant?: keyof typeof motionVariants;
|
|
346
374
|
color?: Color;
|
|
375
|
+
variant?: Variant;
|
|
376
|
+
fullWidth?: boolean;
|
|
377
|
+
tabClassName?: string;
|
|
378
|
+
panelClassName?: string;
|
|
347
379
|
}
|
|
348
380
|
declare const Tabs: React$1.FC<TabsProps>;
|
|
349
381
|
|
package/dist/index.js
CHANGED
|
@@ -479,8 +479,11 @@ const motionVariants = {
|
|
|
479
479
|
},
|
|
480
480
|
};
|
|
481
481
|
|
|
482
|
-
const Button = ({ children, className = '', color = 'primary', size = 'md', onClick, disabled = false, variant = 'solid', motionVariant = 'fadeIn',
|
|
483
|
-
|
|
482
|
+
const Button = ({ children, className = '', color = 'primary', size = 'md', onClick, disabled = false, variant = 'solid', motionVariant = 'fadeIn',
|
|
483
|
+
// Standard Framer Motion props
|
|
484
|
+
whileHover, whileTap, whileFocus,
|
|
485
|
+
// Additional ease animation props
|
|
486
|
+
whileHoverAnimation, whileTapAnimation, whileFocusAnimation, ...rest }) => {
|
|
484
487
|
const baseClasses = 'font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2';
|
|
485
488
|
const colorClasses = {
|
|
486
489
|
primary: {
|
|
@@ -521,11 +524,13 @@ const Button = ({ children, className = '', color = 'primary', size = 'md', onCl
|
|
|
521
524
|
lg: 'px-4 py-2 text-lg',
|
|
522
525
|
xl: 'px-6 py-3 text-xl',
|
|
523
526
|
};
|
|
524
|
-
|
|
527
|
+
const computedWhileHover = whileHoverAnimation || whileHover;
|
|
528
|
+
const computedWhileTap = whileTapAnimation || whileTap;
|
|
529
|
+
const computedWhileFocus = whileFocusAnimation || whileFocus;
|
|
530
|
+
return (React.createElement(framerMotion.motion.button, { className: `${baseClasses} ${colorClasses[color][variant]} ${sizeClasses[size]} ${className}`, onClick: onClick, disabled: disabled, variants: motionVariants[motionVariant], initial: "hidden", animate: "visible", whileHover: computedWhileHover, whileTap: computedWhileTap, whileFocus: computedWhileFocus, ...rest }, children));
|
|
525
531
|
};
|
|
526
532
|
|
|
527
|
-
const IconButton = ({ className = '', color = 'primary', size = 'md', icon, onClick, disabled = false, variant = 'solid', motionVariant = 'fadeIn',
|
|
528
|
-
}) => {
|
|
533
|
+
const IconButton = ({ className = '', color = 'primary', size = 'md', icon, onClick, disabled = false, variant = 'solid', motionVariant = 'fadeIn', whileHover, whileTap, whileFocus, whileHoverAnimation, whileTapAnimation, whileFocusAnimation, ...rest }) => {
|
|
529
534
|
const baseClasses = 'rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2';
|
|
530
535
|
const colorClasses = {
|
|
531
536
|
primary: {
|
|
@@ -566,57 +571,67 @@ const IconButton = ({ className = '', color = 'primary', size = 'md', icon, onCl
|
|
|
566
571
|
lg: 'p-2.5',
|
|
567
572
|
xl: 'p-3',
|
|
568
573
|
};
|
|
569
|
-
|
|
574
|
+
const computedWhileHover = whileHoverAnimation || whileHover;
|
|
575
|
+
const computedWhileTap = whileTapAnimation || whileTap;
|
|
576
|
+
const computedWhileFocus = whileFocusAnimation || whileFocus;
|
|
577
|
+
return (React.createElement(framerMotion.motion.button, { className: `${baseClasses} ${colorClasses[color][variant]} ${sizeClasses[size]} ${className}`, onClick: onClick, disabled: disabled, variants: motionVariants[motionVariant], initial: "hidden", animate: "visible", whileHover: computedWhileHover, whileTap: computedWhileTap, whileFocus: computedWhileFocus, ...rest }, icon));
|
|
570
578
|
};
|
|
571
579
|
|
|
572
|
-
const Accordion = ({ className = '', items, color = 'primary', variant = 'solid', motionVariant = 'fadeIn', }) => {
|
|
573
|
-
const [
|
|
580
|
+
const Accordion = ({ className = '', items, color = 'primary', variant = 'solid', motionVariant = 'fadeIn', allowMultipleOpen = false, defaultOpenIndex = [], customIcon, iconPosition = 'right', wrapperClassName = '', headerClassName = '', contentClassName = '', ...rest }) => {
|
|
581
|
+
const [openIndexes, setOpenIndexes] = React.useState(defaultOpenIndex);
|
|
574
582
|
const toggleItem = (index) => {
|
|
575
|
-
|
|
583
|
+
if (allowMultipleOpen) {
|
|
584
|
+
setOpenIndexes((prev) => prev.includes(index) ? prev.filter((i) => i !== index) : [...prev, index]);
|
|
585
|
+
}
|
|
586
|
+
else {
|
|
587
|
+
setOpenIndexes((prev) => (prev.includes(index) ? [] : [index]));
|
|
588
|
+
}
|
|
576
589
|
};
|
|
577
|
-
const
|
|
590
|
+
const isOpen = (index) => openIndexes.includes(index);
|
|
591
|
+
const colorStyles = {
|
|
578
592
|
primary: {
|
|
579
|
-
solid: 'bg-blue-100 border-blue-400 text-blue-900',
|
|
580
|
-
outline: 'border-blue-400 text-blue-600',
|
|
581
|
-
ghost: 'text-blue-600 hover:bg-blue-50',
|
|
593
|
+
solid: 'bg-blue-100 border border-blue-400 text-blue-900 hover:bg-blue-200 focus:ring-blue-500',
|
|
594
|
+
outline: 'border border-blue-400 text-blue-600 hover:bg-blue-50 focus:ring-blue-500',
|
|
595
|
+
ghost: 'text-blue-600 hover:bg-blue-50 focus:ring-blue-500',
|
|
582
596
|
},
|
|
583
597
|
secondary: {
|
|
584
|
-
solid: 'bg-gray-100 border-gray-400 text-gray-900',
|
|
585
|
-
outline: 'border-gray-400 text-gray-600',
|
|
586
|
-
ghost: 'text-gray-600 hover:bg-gray-50',
|
|
598
|
+
solid: 'bg-gray-100 border border-gray-400 text-gray-900 hover:bg-gray-200 focus:ring-gray-500',
|
|
599
|
+
outline: 'border border-gray-400 text-gray-600 hover:bg-gray-50 focus:ring-gray-500',
|
|
600
|
+
ghost: 'text-gray-600 hover:bg-gray-50 focus:ring-gray-500',
|
|
587
601
|
},
|
|
588
602
|
danger: {
|
|
589
|
-
solid: 'bg-red-100 border-red-400 text-red-900',
|
|
590
|
-
outline: 'border-red-400 text-red-600',
|
|
591
|
-
ghost: 'text-red-600 hover:bg-red-50',
|
|
603
|
+
solid: 'bg-red-100 border border-red-400 text-red-900 hover:bg-red-200 focus:ring-red-500',
|
|
604
|
+
outline: 'border border-red-400 text-red-600 hover:bg-red-50 focus:ring-red-500',
|
|
605
|
+
ghost: 'text-red-600 hover:bg-red-50 focus:ring-red-500',
|
|
592
606
|
},
|
|
593
607
|
success: {
|
|
594
|
-
solid: 'bg-green-100 border-green-400 text-green-900',
|
|
595
|
-
outline: 'border-green-400 text-green-600',
|
|
596
|
-
ghost: 'text-green-600 hover:bg-green-50',
|
|
608
|
+
solid: 'bg-green-100 border border-green-400 text-green-900 hover:bg-green-200 focus:ring-green-500',
|
|
609
|
+
outline: 'border border-green-400 text-green-600 hover:bg-green-50 focus:ring-green-500',
|
|
610
|
+
ghost: 'text-green-600 hover:bg-green-50 focus:ring-green-500',
|
|
597
611
|
},
|
|
598
612
|
info: {
|
|
599
|
-
solid: 'bg-blue-100 border-blue-400 text-blue-900',
|
|
600
|
-
outline: 'border-blue-400 text-blue-600',
|
|
601
|
-
ghost: 'text-blue-600 hover:bg-blue-50',
|
|
613
|
+
solid: 'bg-blue-100 border border-blue-400 text-blue-900 hover:bg-blue-200 focus:ring-blue-400',
|
|
614
|
+
outline: 'border border-blue-400 text-blue-600 hover:bg-blue-50 focus:ring-blue-400',
|
|
615
|
+
ghost: 'text-blue-600 hover:bg-blue-50 focus:ring-blue-400',
|
|
602
616
|
},
|
|
603
617
|
warning: {
|
|
604
|
-
solid: 'bg-yellow-100 border-yellow-400 text-yellow-900',
|
|
605
|
-
outline: 'border-yellow-400 text-yellow-600',
|
|
606
|
-
ghost: 'text-yellow-600 hover:bg-yellow-50',
|
|
618
|
+
solid: 'bg-yellow-100 border border-yellow-400 text-yellow-900 hover:bg-yellow-200 focus:ring-yellow-500',
|
|
619
|
+
outline: 'border border-yellow-400 text-yellow-600 hover:bg-yellow-50 focus:ring-yellow-500',
|
|
620
|
+
ghost: 'text-yellow-600 hover:bg-yellow-50 focus:ring-yellow-500',
|
|
607
621
|
},
|
|
608
622
|
};
|
|
609
|
-
const variantClasses =
|
|
610
|
-
return (React.createElement("div", { className: `space-y-2 ${className}` }, items.map((item, index) => (React.createElement("div", { key: index, className: `
|
|
611
|
-
React.createElement("button", { className: `flex justify-between items-center
|
|
612
|
-
React.createElement("span",
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
623
|
+
const variantClasses = colorStyles[color][variant];
|
|
624
|
+
return (React.createElement("div", { className: `space-y-2 ${className}` }, items.map((item, index) => (React.createElement("div", { key: index, className: `rounded-md focus:outline-none ${variantClasses} ${wrapperClassName}` },
|
|
625
|
+
React.createElement("button", { disabled: item.disabled, className: `w-full flex justify-between items-center px-4 py-2 text-left focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed ${variantClasses} ${headerClassName}`, onClick: () => !item.disabled && toggleItem(index), "aria-expanded": isOpen(index) },
|
|
626
|
+
iconPosition === 'left' && (React.createElement("span", { className: "mr-2" }, customIcon ?? (React.createElement(framerMotion.motion.svg, { className: "w-5 h-5", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", animate: { rotate: isOpen(index) ? 180 : 0 }, transition: { duration: 0.3 } },
|
|
627
|
+
React.createElement("path", { fillRule: "evenodd", d: "M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z", clipRule: "evenodd" }))))),
|
|
628
|
+
React.createElement("span", { className: "flex-1" }, item.title),
|
|
629
|
+
iconPosition === 'right' && (React.createElement("span", { className: "ml-2" }, customIcon ?? (React.createElement(framerMotion.motion.svg, { className: "w-5 h-5", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", animate: { rotate: isOpen(index) ? 180 : 0 }, transition: { duration: 0.3 } },
|
|
630
|
+
React.createElement("path", { fillRule: "evenodd", d: "M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z", clipRule: "evenodd" })))))),
|
|
631
|
+
React.createElement(framerMotion.AnimatePresence, null, isOpen(index) && (React.createElement(framerMotion.motion.div, { variants: motionVariants[motionVariant], initial: "hidden", animate: "visible", exit: "hidden", className: `px-4 py-2 border-t ${contentClassName}`, ...rest }, item.content))))))));
|
|
616
632
|
};
|
|
617
633
|
|
|
618
|
-
const Alert = ({ children, className = '', color = 'primary', onClose, motionVariant = 'fadeIn',
|
|
619
|
-
}) => {
|
|
634
|
+
const Alert = ({ children, className = '', color = 'primary', onClose, motionVariant = 'fadeIn', }) => {
|
|
620
635
|
const colorClasses = {
|
|
621
636
|
primary: 'bg-blue-100 text-blue-700',
|
|
622
637
|
secondary: 'bg-gray-100 text-gray-700',
|
|
@@ -1005,30 +1020,68 @@ const OffcanvasHeader = ({ children, className = '', onClose }) => {
|
|
|
1005
1020
|
React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" })))));
|
|
1006
1021
|
};
|
|
1007
1022
|
|
|
1008
|
-
const Pagination = ({ className = '', currentPage, totalPages, onPageChange, color = 'primary', motionVariant = 'fadeIn',
|
|
1009
|
-
|
|
1010
|
-
const
|
|
1011
|
-
|
|
1012
|
-
|
|
1013
|
-
|
|
1023
|
+
const Pagination = ({ className = '', currentPage, totalPages, onPageChange, color = 'primary', motionVariant = 'fadeIn', whileHoverAnimation, whileTapAnimation, whileFocusAnimation, whileHover, whileTap, whileFocus, ...rest }) => {
|
|
1024
|
+
const [windowWidth, setWindowWidth] = React.useState(typeof window !== 'undefined' ? window.innerWidth : 1024);
|
|
1025
|
+
const [visiblePages, setVisiblePages] = React.useState([]);
|
|
1026
|
+
React.useEffect(() => {
|
|
1027
|
+
const handleResize = () => setWindowWidth(window.innerWidth);
|
|
1028
|
+
window.addEventListener('resize', handleResize);
|
|
1029
|
+
return () => window.removeEventListener('resize', handleResize);
|
|
1030
|
+
}, []);
|
|
1031
|
+
React.useEffect(() => {
|
|
1032
|
+
const generateVisiblePages = () => {
|
|
1033
|
+
const maxMobilePages = 3;
|
|
1034
|
+
const maxDesktopPages = 5;
|
|
1035
|
+
const maxVisible = windowWidth < 768 ? maxMobilePages : maxDesktopPages;
|
|
1036
|
+
if (totalPages <= maxVisible + 2)
|
|
1037
|
+
return Array.from({ length: totalPages }, (_, i) => i + 1);
|
|
1038
|
+
const startPage = Math.max(2, currentPage - Math.floor(maxVisible / 2));
|
|
1039
|
+
const endPage = Math.min(totalPages - 1, currentPage + Math.floor(maxVisible / 2));
|
|
1040
|
+
let pages = [1];
|
|
1041
|
+
if (startPage > 2)
|
|
1042
|
+
pages.push('...');
|
|
1043
|
+
for (let i = startPage; i <= endPage; i++)
|
|
1044
|
+
pages.push(i);
|
|
1045
|
+
if (endPage < totalPages - 1)
|
|
1046
|
+
pages.push('...');
|
|
1047
|
+
pages.push(totalPages);
|
|
1048
|
+
return pages;
|
|
1049
|
+
};
|
|
1050
|
+
setVisiblePages(generateVisiblePages());
|
|
1051
|
+
}, [currentPage, totalPages, windowWidth]);
|
|
1014
1052
|
const colorClasses = {
|
|
1015
|
-
primary: 'text-blue-600 bg-blue-50 hover:bg-blue-100 hover:text-blue-700',
|
|
1016
|
-
secondary: 'text-gray-600 bg-gray-50 hover:bg-gray-100 hover:text-gray-700',
|
|
1017
|
-
success: 'text-green-600 bg-green-50 hover:bg-green-100 hover:text-green-700',
|
|
1018
|
-
danger: 'text-red-600 bg-red-50 hover:bg-red-100 hover:text-red-700',
|
|
1019
|
-
warning: 'text-yellow-600 bg-yellow-50 hover:bg-yellow-100 hover:text-yellow-700',
|
|
1020
|
-
info: 'text-blue-400 bg-blue-50 hover:bg-blue-100 hover:text-blue-500',
|
|
1053
|
+
primary: 'text-blue-600 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 dark:bg-blue-900 dark:hover:bg-blue-800',
|
|
1054
|
+
secondary: 'text-gray-600 bg-gray-50 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-700 dark:hover:bg-gray-600',
|
|
1055
|
+
success: 'text-green-600 bg-green-50 hover:bg-green-100 hover:text-green-700 dark:bg-green-800 dark:hover:bg-green-700',
|
|
1056
|
+
danger: 'text-red-600 bg-red-50 hover:bg-red-100 hover:text-red-700 dark:bg-red-800 dark:hover:bg-red-700',
|
|
1057
|
+
warning: 'text-yellow-600 bg-yellow-50 hover:bg-yellow-100 hover:text-yellow-700 dark:bg-yellow-800 dark:hover:bg-yellow-700',
|
|
1058
|
+
info: 'text-blue-400 bg-blue-50 hover:bg-blue-100 hover:text-blue-500 dark:bg-blue-800 dark:hover:bg-blue-700',
|
|
1021
1059
|
};
|
|
1022
|
-
|
|
1023
|
-
|
|
1024
|
-
|
|
1025
|
-
|
|
1026
|
-
|
|
1027
|
-
|
|
1028
|
-
|
|
1029
|
-
|
|
1030
|
-
|
|
1031
|
-
|
|
1060
|
+
const computedWhileHover = whileHoverAnimation || whileHover;
|
|
1061
|
+
const computedWhileTap = whileTapAnimation || whileTap;
|
|
1062
|
+
const computedWhileFocus = whileFocusAnimation || whileFocus;
|
|
1063
|
+
return (React.createElement(framerMotion.motion.nav, { className: `flex justify-center ${className}`, variants: motionVariants[motionVariant], initial: "hidden", animate: "visible", ...rest },
|
|
1064
|
+
React.createElement("div", { className: "w-full overflow-x-auto" },
|
|
1065
|
+
React.createElement("ul", { className: "flex items-center -space-x-px h-10" },
|
|
1066
|
+
React.createElement("li", { className: "flex-shrink-0" },
|
|
1067
|
+
React.createElement(framerMotion.motion.button, { onClick: () => onPageChange(currentPage - 1), disabled: currentPage === 1, className: `flex items-center px-3 py-2 sm:px-4 sm:py-2.5 text-sm sm:text-base
|
|
1068
|
+
border border-gray-300 rounded-l-lg transition-colors duration-200
|
|
1069
|
+
${colorClasses[color]}
|
|
1070
|
+
${currentPage === 1 ? 'cursor-not-allowed opacity-50' : ''}`, whileHover: computedWhileHover, whileTap: computedWhileTap, whileFocus: computedWhileFocus },
|
|
1071
|
+
React.createElement("span", { className: "hidden sm:inline" }, "Previous"),
|
|
1072
|
+
React.createElement("span", { className: "sm:hidden" }, "Prev"))),
|
|
1073
|
+
visiblePages.map((page, index) => (React.createElement("li", { key: `${page}-${index}`, className: "flex-shrink-0" }, page === '...' ? (React.createElement("span", { className: "px-3 py-2 text-gray-500 border border-gray-300 bg-white dark:bg-gray-800" }, "...")) : (React.createElement(framerMotion.motion.button, { onClick: () => onPageChange(page), className: `min-w-[40px] px-2 py-1 sm:px-3 sm:py-2 text-sm sm:text-base
|
|
1074
|
+
border border-gray-300 transition-colors duration-200
|
|
1075
|
+
${currentPage === page
|
|
1076
|
+
? 'bg-blue-100 text-blue-700 hover:bg-blue-200 dark:bg-blue-800 dark:text-blue-100'
|
|
1077
|
+
: 'bg-white hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700'}`, whileHover: computedWhileHover, whileTap: computedWhileTap, whileFocus: computedWhileFocus }, page))))),
|
|
1078
|
+
React.createElement("li", { className: "flex-shrink-0" },
|
|
1079
|
+
React.createElement(framerMotion.motion.button, { onClick: () => onPageChange(currentPage + 1), disabled: currentPage === totalPages, className: `flex items-center px-3 py-2 sm:px-4 sm:py-2.5 text-sm sm:text-base
|
|
1080
|
+
border border-gray-300 rounded-r-lg transition-colors duration-200
|
|
1081
|
+
${colorClasses[color]}
|
|
1082
|
+
${currentPage === totalPages ? 'cursor-not-allowed opacity-50' : ''}`, whileHover: computedWhileHover, whileTap: computedWhileTap, whileFocus: computedWhileFocus },
|
|
1083
|
+
React.createElement("span", { className: "hidden sm:inline" }, "Next"),
|
|
1084
|
+
React.createElement("span", { className: "sm:hidden" }, "Next")))))));
|
|
1032
1085
|
};
|
|
1033
1086
|
|
|
1034
1087
|
const ProgressBar = ({ className = '', color = 'primary', value, max = 100, motionVariant = 'fadeIn', // Default motion variant
|
|
@@ -1174,27 +1227,53 @@ const TableRow = ({ children, className = '' }) => {
|
|
|
1174
1227
|
return (React.createElement(framerMotion.motion.tr, { className: className, initial: { opacity: 0, x: -20 }, animate: { opacity: 1, x: 0 }, transition: { duration: 0.3 } }, children));
|
|
1175
1228
|
};
|
|
1176
1229
|
|
|
1177
|
-
const Tabs = ({ className = '', tabs, motionVariant = 'fadeIn',
|
|
1178
|
-
color = 'primary', // Color customization
|
|
1179
|
-
}) => {
|
|
1230
|
+
const Tabs = ({ className = '', tabs, motionVariant = 'fadeIn', color = 'primary', variant = 'solid', fullWidth = false, tabClassName = '', panelClassName = '', ...rest }) => {
|
|
1180
1231
|
const [activeTab, setActiveTab] = React.useState(0);
|
|
1181
|
-
const
|
|
1182
|
-
primary:
|
|
1183
|
-
|
|
1184
|
-
|
|
1185
|
-
|
|
1186
|
-
|
|
1187
|
-
|
|
1232
|
+
const colorStyles = {
|
|
1233
|
+
primary: {
|
|
1234
|
+
solid: 'text-blue-600 border-b-2 border-blue-600 bg-blue-50',
|
|
1235
|
+
outline: 'text-blue-600 border border-blue-600',
|
|
1236
|
+
ghost: 'text-blue-600 hover:bg-blue-100',
|
|
1237
|
+
},
|
|
1238
|
+
secondary: {
|
|
1239
|
+
solid: 'text-gray-600 border-b-2 border-gray-600 bg-gray-50',
|
|
1240
|
+
outline: 'text-gray-600 border border-gray-600',
|
|
1241
|
+
ghost: 'text-gray-600 hover:bg-gray-100',
|
|
1242
|
+
},
|
|
1243
|
+
success: {
|
|
1244
|
+
solid: 'text-green-600 border-b-2 border-green-600 bg-green-50',
|
|
1245
|
+
outline: 'text-green-600 border border-green-600',
|
|
1246
|
+
ghost: 'text-green-600 hover:bg-green-100',
|
|
1247
|
+
},
|
|
1248
|
+
danger: {
|
|
1249
|
+
solid: 'text-red-600 border-b-2 border-red-600 bg-red-50',
|
|
1250
|
+
outline: 'text-red-600 border border-red-600',
|
|
1251
|
+
ghost: 'text-red-600 hover:bg-red-100',
|
|
1252
|
+
},
|
|
1253
|
+
warning: {
|
|
1254
|
+
solid: 'text-yellow-600 border-b-2 border-yellow-600 bg-yellow-50',
|
|
1255
|
+
outline: 'text-yellow-600 border border-yellow-600',
|
|
1256
|
+
ghost: 'text-yellow-600 hover:bg-yellow-100',
|
|
1257
|
+
},
|
|
1258
|
+
info: {
|
|
1259
|
+
solid: 'text-blue-400 border-b-2 border-blue-400 bg-blue-50',
|
|
1260
|
+
outline: 'text-blue-400 border border-blue-400',
|
|
1261
|
+
ghost: 'text-blue-400 hover:bg-blue-100',
|
|
1262
|
+
},
|
|
1263
|
+
};
|
|
1264
|
+
const getTabClass = (isActive) => {
|
|
1265
|
+
if (isActive)
|
|
1266
|
+
return colorStyles[color][variant];
|
|
1267
|
+
return 'text-gray-500 hover:text-gray-700 hover:border-gray-300';
|
|
1188
1268
|
};
|
|
1189
|
-
return (React.createElement("div", { className: className },
|
|
1269
|
+
return (React.createElement("div", { className: `w-full ${className}` },
|
|
1190
1270
|
React.createElement("div", { className: "border-b border-gray-200" },
|
|
1191
|
-
React.createElement("nav", { className: "
|
|
1192
|
-
|
|
1193
|
-
${activeTab === index
|
|
1194
|
-
|
|
1195
|
-
|
|
1196
|
-
|
|
1197
|
-
React.createElement(framerMotion.motion.div, { key: activeTab, initial: { opacity: 0, y: 20 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.3 }, variants: motionVariants[motionVariant], className: "mt-4" }, tabs[activeTab].content)));
|
|
1271
|
+
React.createElement("nav", { className: "flex space-x-4 overflow-x-auto", role: "tablist" }, tabs.map((tab, index) => (React.createElement("button", { key: index, disabled: tab.disabled, role: "tab", "aria-selected": activeTab === index, "aria-controls": `panel-${index}`, className: `px-4 py-2 text-sm font-medium focus:outline-none rounded-md transition-all
|
|
1272
|
+
${fullWidth ? 'flex-1 text-center' : ''}
|
|
1273
|
+
${getTabClass(activeTab === index)}
|
|
1274
|
+
${tab.disabled ? 'opacity-50 cursor-not-allowed' : ''}
|
|
1275
|
+
${tabClassName}`, onClick: () => !tab.disabled && setActiveTab(index) }, tab.label))))),
|
|
1276
|
+
React.createElement(framerMotion.motion.div, { key: activeTab, initial: "hidden", animate: "visible", exit: "hidden", variants: motionVariants[motionVariant], className: `mt-4 ${panelClassName}`, role: "tabpanel", id: `panel-${activeTab}`, "aria-labelledby": `tab-${activeTab}`, ...rest }, tabs[activeTab]?.content)));
|
|
1198
1277
|
};
|
|
1199
1278
|
|
|
1200
1279
|
const Tooltip = ({ children, className = '', content, position = 'top', color = 'primary', motionVariant = 'fadeIn', }) => {
|