@moontra/moonui 2.1.4 → 2.1.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.js +8174 -2834
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +8074 -2645
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
- package/src/components/ui/accordion.tsx +8 -11
- package/src/components/ui/alert.tsx +10 -13
- package/src/components/ui/analyze-components.txt +4 -0
- package/src/components/ui/aspect-ratio.tsx +6 -9
- package/src/components/ui/avatar.tsx +7 -10
- package/src/components/ui/badge.tsx +4 -7
- package/src/components/ui/breadcrumb.tsx +29 -31
- package/src/components/ui/button.tsx +11 -15
- package/src/components/ui/calendar.tsx +6 -9
- package/src/components/ui/card.tsx +19 -22
- package/src/components/ui/checkbox.tsx +5 -8
- package/src/components/ui/collapsible.tsx +10 -12
- package/src/components/ui/color-picker.tsx +2 -2
- package/src/components/ui/command.tsx +26 -28
- package/src/components/ui/component-analysis-report.md +118 -0
- package/src/components/ui/data-table.tsx +2 -2
- package/src/components/ui/date-picker.tsx +9 -9
- package/src/components/ui/dialog.tsx +21 -23
- package/src/components/ui/draggable-list.tsx +81 -0
- package/src/components/ui/dropdown-menu.tsx +34 -36
- package/src/components/ui/file-upload.tsx +3 -3
- package/src/components/ui/gesture-drawer.tsx +146 -0
- package/src/components/ui/index.ts +43 -9
- package/src/components/ui/input.tsx +6 -9
- package/src/components/ui/label.tsx +4 -7
- package/src/components/ui/moon-logo.tsx +1 -1
- package/src/components/ui/pagination.tsx +5 -7
- package/src/components/ui/popover.tsx +9 -11
- package/src/components/ui/progress.tsx +6 -9
- package/src/components/ui/radio-group.tsx +7 -10
- package/src/components/ui/rich-text-editor/index.tsx +71 -0
- package/src/components/ui/select.tsx +21 -23
- package/src/components/ui/separator.tsx +5 -8
- package/src/components/ui/simple-editor.tsx +4 -4
- package/src/components/ui/skeleton.tsx +7 -10
- package/src/components/ui/slider.tsx +5 -8
- package/src/components/ui/swipeable-card.tsx +69 -0
- package/src/components/ui/switch.tsx +3 -6
- package/src/components/ui/table.tsx +29 -31
- package/src/components/ui/tabs.tsx +9 -12
- package/src/components/ui/textarea.tsx +4 -7
- package/src/components/ui/toast.tsx +7 -9
- package/src/components/ui/toggle.tsx +4 -7
- package/src/components/ui/tooltip.tsx +11 -13
- package/src/index.tsx +13 -7
- package/src/lib/utils.ts +2 -65
- package/src/components/ui/locked-component.tsx +0 -215
- package/src/use-pro-access.ts +0 -141
package/package.json
CHANGED
|
@@ -6,9 +6,9 @@ import { ChevronDown } from "lucide-react"
|
|
|
6
6
|
|
|
7
7
|
import { cn } from "../../lib/utils"
|
|
8
8
|
|
|
9
|
-
const
|
|
9
|
+
const Accordion = AccordionPrimitive.Root
|
|
10
10
|
|
|
11
|
-
const
|
|
11
|
+
const AccordionItem = React.forwardRef<
|
|
12
12
|
React.ElementRef<typeof AccordionPrimitive.Item>,
|
|
13
13
|
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
|
|
14
14
|
>(({ className, ...props }, ref) => (
|
|
@@ -18,9 +18,9 @@ const MoonUIAccordionItem = React.forwardRef<
|
|
|
18
18
|
{...props}
|
|
19
19
|
/>
|
|
20
20
|
))
|
|
21
|
-
|
|
21
|
+
AccordionItem.displayName = "AccordionItem"
|
|
22
22
|
|
|
23
|
-
const
|
|
23
|
+
const AccordionTrigger = React.forwardRef<
|
|
24
24
|
React.ElementRef<typeof AccordionPrimitive.Trigger>,
|
|
25
25
|
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
|
|
26
26
|
>(({ className, children, ...props }, ref) => (
|
|
@@ -40,9 +40,9 @@ const MoonUIAccordionTrigger = React.forwardRef<
|
|
|
40
40
|
</AccordionPrimitive.Trigger>
|
|
41
41
|
</AccordionPrimitive.Header>
|
|
42
42
|
))
|
|
43
|
-
|
|
43
|
+
AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
|
|
44
44
|
|
|
45
|
-
const
|
|
45
|
+
const AccordionContent = React.forwardRef<
|
|
46
46
|
React.ElementRef<typeof AccordionPrimitive.Content>,
|
|
47
47
|
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
|
|
48
48
|
>(({ className, children, ...props }, ref) => (
|
|
@@ -58,9 +58,6 @@ const MoonUIAccordionContent = React.forwardRef<
|
|
|
58
58
|
<div className="pb-4 pt-0">{children}</div>
|
|
59
59
|
</AccordionPrimitive.Content>
|
|
60
60
|
))
|
|
61
|
-
|
|
61
|
+
AccordionContent.displayName = AccordionPrimitive.Content.displayName
|
|
62
62
|
|
|
63
|
-
export {
|
|
64
|
-
|
|
65
|
-
// Backward compatibility exports
|
|
66
|
-
export { MoonUIAccordion as Accordion, MoonUIAccordionItem as AccordionItem, MoonUIAccordionTrigger as AccordionTrigger, MoonUIAccordionContent as AccordionContent }
|
|
63
|
+
export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
|
|
@@ -13,7 +13,7 @@ import { cn } from "../../lib/utils";
|
|
|
13
13
|
* Bildirim, uyarı ve dikkat çekmek gereken içerikler için kullanılır.
|
|
14
14
|
*/
|
|
15
15
|
|
|
16
|
-
const
|
|
16
|
+
const alertVariants = cva(
|
|
17
17
|
"relative w-full flex items-center gap-3 p-4 border text-foreground [&>svg]:shrink-0",
|
|
18
18
|
{
|
|
19
19
|
variants: {
|
|
@@ -50,9 +50,9 @@ const moonUIAlertVariants = cva(
|
|
|
50
50
|
}
|
|
51
51
|
);
|
|
52
52
|
|
|
53
|
-
export interface
|
|
53
|
+
export interface AlertProps
|
|
54
54
|
extends React.HTMLAttributes<HTMLDivElement>,
|
|
55
|
-
VariantProps<typeof
|
|
55
|
+
VariantProps<typeof alertVariants> {
|
|
56
56
|
/** Alert ikonunu gizler */
|
|
57
57
|
hideIcon?: boolean;
|
|
58
58
|
/** Kapatma butonu ekler */
|
|
@@ -61,7 +61,7 @@ export interface MoonUIAlertProps
|
|
|
61
61
|
onClose?: () => void;
|
|
62
62
|
}
|
|
63
63
|
|
|
64
|
-
const
|
|
64
|
+
const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
|
|
65
65
|
({ className, variant = "default", size, radius, hideIcon = false, closable = false, onClose, children, ...props }, ref) => {
|
|
66
66
|
// Alert türüne göre ikon belirleme
|
|
67
67
|
const Icon = React.useMemo(() => {
|
|
@@ -101,9 +101,9 @@ const MoonUIAlert = React.forwardRef<HTMLDivElement, MoonUIAlertProps>(
|
|
|
101
101
|
);
|
|
102
102
|
}
|
|
103
103
|
);
|
|
104
|
-
|
|
104
|
+
Alert.displayName = "Alert";
|
|
105
105
|
|
|
106
|
-
const
|
|
106
|
+
const AlertTitle = React.forwardRef<
|
|
107
107
|
HTMLParagraphElement,
|
|
108
108
|
React.HTMLAttributes<HTMLHeadingElement>
|
|
109
109
|
>(({ className, ...props }, ref) => (
|
|
@@ -113,9 +113,9 @@ const MoonUIAlertTitle = React.forwardRef<
|
|
|
113
113
|
{...props}
|
|
114
114
|
/>
|
|
115
115
|
));
|
|
116
|
-
|
|
116
|
+
AlertTitle.displayName = "AlertTitle";
|
|
117
117
|
|
|
118
|
-
const
|
|
118
|
+
const AlertDescription = React.forwardRef<
|
|
119
119
|
HTMLParagraphElement,
|
|
120
120
|
React.HTMLAttributes<HTMLParagraphElement>
|
|
121
121
|
>(({ className, ...props }, ref) => (
|
|
@@ -125,9 +125,6 @@ const MoonUIAlertDescription = React.forwardRef<
|
|
|
125
125
|
{...props}
|
|
126
126
|
/>
|
|
127
127
|
));
|
|
128
|
-
|
|
128
|
+
AlertDescription.displayName = "AlertDescription";
|
|
129
129
|
|
|
130
|
-
export {
|
|
131
|
-
|
|
132
|
-
// Backward compatibility exports
|
|
133
|
-
export { MoonUIAlert as Alert, MoonUIAlertTitle as AlertTitle, MoonUIAlertDescription as AlertDescription };
|
|
130
|
+
export { Alert, AlertTitle, AlertDescription };
|
|
@@ -13,7 +13,7 @@ import { cn } from "../../lib/utils"
|
|
|
13
13
|
* Fully integrated with the theme system, accessible and customizable.
|
|
14
14
|
*/
|
|
15
15
|
|
|
16
|
-
const
|
|
16
|
+
const aspectRatioVariants = cva(
|
|
17
17
|
"relative overflow-hidden",
|
|
18
18
|
{
|
|
19
19
|
variants: {
|
|
@@ -37,9 +37,9 @@ const moonUIAspectRatioVariants = cva(
|
|
|
37
37
|
}
|
|
38
38
|
)
|
|
39
39
|
|
|
40
|
-
interface
|
|
40
|
+
interface AspectRatioProps
|
|
41
41
|
extends React.HTMLAttributes<HTMLDivElement>,
|
|
42
|
-
VariantProps<typeof
|
|
42
|
+
VariantProps<typeof aspectRatioVariants> {
|
|
43
43
|
/**
|
|
44
44
|
* Aspect ratio (width/height). For example 16/9, 4/3, 1/1 etc.
|
|
45
45
|
* @default 16/9
|
|
@@ -47,7 +47,7 @@ interface MoonUIAspectRatioProps
|
|
|
47
47
|
ratio?: number
|
|
48
48
|
}
|
|
49
49
|
|
|
50
|
-
const
|
|
50
|
+
const AspectRatio = React.forwardRef<
|
|
51
51
|
HTMLDivElement,
|
|
52
52
|
AspectRatioProps
|
|
53
53
|
>(({ className, variant, radius, ratio = 16 / 9, style, children, ...props }, ref) => (
|
|
@@ -66,10 +66,7 @@ const MoonUIAspectRatio = React.forwardRef<
|
|
|
66
66
|
</div>
|
|
67
67
|
</div>
|
|
68
68
|
))
|
|
69
|
-
|
|
69
|
+
AspectRatio.displayName = "AspectRatio"
|
|
70
70
|
|
|
71
|
-
export {
|
|
72
|
-
|
|
73
|
-
// Backward compatibility exports
|
|
74
|
-
export { MoonUIAspectRatio as AspectRatio, moonUIAspectRatioVariants as aspectRatioVariants }
|
|
71
|
+
export { AspectRatio, aspectRatioVariants }
|
|
75
72
|
export type { AspectRatioProps }
|
|
@@ -4,7 +4,7 @@ import { cva, type VariantProps } from "class-variance-authority";
|
|
|
4
4
|
|
|
5
5
|
import { cn } from "../../lib/utils";
|
|
6
6
|
|
|
7
|
-
const
|
|
7
|
+
const avatarVariants = cva(
|
|
8
8
|
"relative flex shrink-0 overflow-hidden",
|
|
9
9
|
{
|
|
10
10
|
variants: {
|
|
@@ -39,11 +39,11 @@ const moonUIAvatarVariants = cva(
|
|
|
39
39
|
}
|
|
40
40
|
);
|
|
41
41
|
|
|
42
|
-
export interface
|
|
42
|
+
export interface AvatarProps
|
|
43
43
|
extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>,
|
|
44
|
-
VariantProps<typeof
|
|
44
|
+
VariantProps<typeof avatarVariants> {}
|
|
45
45
|
|
|
46
|
-
const
|
|
46
|
+
const Avatar = React.forwardRef<
|
|
47
47
|
React.ElementRef<typeof AvatarPrimitive.Root>,
|
|
48
48
|
AvatarProps
|
|
49
49
|
>(({ className, size, radius, variant, ...props }, ref) => (
|
|
@@ -55,7 +55,7 @@ const MoonUIAvatar = React.forwardRef<
|
|
|
55
55
|
));
|
|
56
56
|
Avatar.displayName = AvatarPrimitive.Root.displayName;
|
|
57
57
|
|
|
58
|
-
const
|
|
58
|
+
const AvatarImage = React.forwardRef<
|
|
59
59
|
React.ElementRef<typeof AvatarPrimitive.Image>,
|
|
60
60
|
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
|
|
61
61
|
>(({ className, ...props }, ref) => (
|
|
@@ -67,7 +67,7 @@ const MoonUIAvatarImage = React.forwardRef<
|
|
|
67
67
|
));
|
|
68
68
|
AvatarImage.displayName = AvatarPrimitive.Image.displayName;
|
|
69
69
|
|
|
70
|
-
const
|
|
70
|
+
const AvatarFallback = React.forwardRef<
|
|
71
71
|
React.ElementRef<typeof AvatarPrimitive.Fallback>,
|
|
72
72
|
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
|
|
73
73
|
>(({ className, ...props }, ref) => (
|
|
@@ -132,7 +132,4 @@ const AvatarGroup = React.forwardRef<HTMLDivElement, AvatarGroupProps>(
|
|
|
132
132
|
);
|
|
133
133
|
AvatarGroup.displayName = "AvatarGroup";
|
|
134
134
|
|
|
135
|
-
export {
|
|
136
|
-
|
|
137
|
-
// Backward compatibility exports
|
|
138
|
-
export { MoonUIAvatar as Avatar, MoonUIAvatarImage as AvatarImage, MoonUIAvatarFallback as AvatarFallback };
|
|
135
|
+
export { Avatar, AvatarImage, AvatarFallback, AvatarGroup };
|
|
@@ -9,7 +9,7 @@ import { cn } from "../../lib/utils";
|
|
|
9
9
|
* Dark ve light modda uyumlu, erişilebilir ve çeşitli varyantlar sunar.
|
|
10
10
|
*/
|
|
11
11
|
|
|
12
|
-
const
|
|
12
|
+
const badgeVariants = cva(
|
|
13
13
|
["inline-flex items-center gap-1.5",
|
|
14
14
|
"font-medium transition-colors duration-200",
|
|
15
15
|
"border focus:outline-none",
|
|
@@ -94,9 +94,9 @@ const moonUIBadgeVariants = cva(
|
|
|
94
94
|
}
|
|
95
95
|
);
|
|
96
96
|
|
|
97
|
-
export interface
|
|
97
|
+
export interface BadgeProps
|
|
98
98
|
extends React.HTMLAttributes<HTMLDivElement>,
|
|
99
|
-
Omit<VariantProps<typeof
|
|
99
|
+
Omit<VariantProps<typeof badgeVariants>, 'variant'> {
|
|
100
100
|
withDot?: boolean;
|
|
101
101
|
dotColor?: string;
|
|
102
102
|
removable?: boolean;
|
|
@@ -222,7 +222,4 @@ function Badge({
|
|
|
222
222
|
);
|
|
223
223
|
}
|
|
224
224
|
|
|
225
|
-
export {
|
|
226
|
-
|
|
227
|
-
// Backward compatibility exports
|
|
228
|
-
export { MoonUIBadge as Badge, moonUIBadgeVariants as badgeVariants };
|
|
225
|
+
export { Badge, badgeVariants };
|
|
@@ -26,35 +26,35 @@ const breadcrumbVariants = cva(
|
|
|
26
26
|
}
|
|
27
27
|
);
|
|
28
28
|
|
|
29
|
-
interface
|
|
29
|
+
interface BreadcrumbProps
|
|
30
30
|
extends React.HTMLAttributes<HTMLElement>,
|
|
31
31
|
VariantProps<typeof breadcrumbVariants> {
|
|
32
32
|
separator?: React.ReactNode;
|
|
33
33
|
showHomeIcon?: boolean;
|
|
34
34
|
}
|
|
35
35
|
|
|
36
|
-
interface
|
|
36
|
+
interface BreadcrumbListProps extends React.HTMLAttributes<HTMLOListElement> {
|
|
37
37
|
collapsed?: boolean;
|
|
38
38
|
collapsedWidth?: number;
|
|
39
39
|
}
|
|
40
40
|
|
|
41
|
-
interface
|
|
41
|
+
interface BreadcrumbItemProps extends React.HTMLAttributes<HTMLLIElement> {
|
|
42
42
|
isCurrent?: boolean;
|
|
43
43
|
href?: string;
|
|
44
44
|
asChild?: boolean;
|
|
45
45
|
}
|
|
46
46
|
|
|
47
|
-
interface
|
|
47
|
+
interface BreadcrumbSeparatorProps extends React.HTMLAttributes<HTMLSpanElement> {
|
|
48
48
|
/** Custom separator icon or text */
|
|
49
49
|
icon?: React.ReactNode;
|
|
50
50
|
}
|
|
51
51
|
|
|
52
|
-
interface
|
|
52
|
+
interface BreadcrumbEllipsisProps extends React.HTMLAttributes<HTMLSpanElement> {
|
|
53
53
|
/** Custom ellipsis icon */
|
|
54
54
|
icon?: React.ReactNode;
|
|
55
55
|
}
|
|
56
56
|
|
|
57
|
-
const
|
|
57
|
+
const Breadcrumb = React.forwardRef<HTMLElement, BreadcrumbProps>(
|
|
58
58
|
({ className, variant, size, ...props }, ref) => (
|
|
59
59
|
<nav
|
|
60
60
|
ref={ref}
|
|
@@ -64,9 +64,9 @@ const MoonUIBreadcrumb = React.forwardRef<HTMLElement, MoonUIBreadcrumbProps>(
|
|
|
64
64
|
/>
|
|
65
65
|
)
|
|
66
66
|
);
|
|
67
|
-
|
|
67
|
+
Breadcrumb.displayName = "Breadcrumb";
|
|
68
68
|
|
|
69
|
-
const
|
|
69
|
+
const BreadcrumbList = React.forwardRef<HTMLOListElement, BreadcrumbListProps>(
|
|
70
70
|
({ className, collapsed, collapsedWidth = 3, ...props }, ref) => {
|
|
71
71
|
const childrenArray = React.Children.toArray(props.children).filter(Boolean);
|
|
72
72
|
const childCount = childrenArray.length;
|
|
@@ -104,9 +104,9 @@ const MoonUIBreadcrumbList = React.forwardRef<HTMLOListElement, MoonUIBreadcrumb
|
|
|
104
104
|
);
|
|
105
105
|
}
|
|
106
106
|
);
|
|
107
|
-
|
|
107
|
+
BreadcrumbList.displayName = "BreadcrumbList";
|
|
108
108
|
|
|
109
|
-
const
|
|
109
|
+
const BreadcrumbItem = React.forwardRef<HTMLLIElement, BreadcrumbItemProps>(
|
|
110
110
|
({ className, isCurrent, href, asChild = false, ...props }, ref) => {
|
|
111
111
|
const Comp = asChild ? React.Fragment : href ? "a" : "span";
|
|
112
112
|
const itemProps = asChild ? {} : href ? { href } : {};
|
|
@@ -133,9 +133,9 @@ const MoonUIBreadcrumbItem = React.forwardRef<HTMLLIElement, MoonUIBreadcrumbIte
|
|
|
133
133
|
);
|
|
134
134
|
}
|
|
135
135
|
);
|
|
136
|
-
|
|
136
|
+
BreadcrumbItem.displayName = "BreadcrumbItem";
|
|
137
137
|
|
|
138
|
-
const
|
|
138
|
+
const BreadcrumbSeparator = ({
|
|
139
139
|
children,
|
|
140
140
|
className,
|
|
141
141
|
...props
|
|
@@ -149,9 +149,9 @@ const MoonUIBreadcrumbSeparator = ({
|
|
|
149
149
|
{children || <ChevronRight className="h-3.5 w-3.5" />}
|
|
150
150
|
</span>
|
|
151
151
|
);
|
|
152
|
-
|
|
152
|
+
BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
|
|
153
153
|
|
|
154
|
-
const
|
|
154
|
+
const BreadcrumbEllipsis = ({
|
|
155
155
|
className,
|
|
156
156
|
...props
|
|
157
157
|
}: BreadcrumbEllipsisProps) => (
|
|
@@ -165,9 +165,9 @@ const MoonUIBreadcrumbEllipsis = ({
|
|
|
165
165
|
<span className="sr-only">More pages</span>
|
|
166
166
|
</span>
|
|
167
167
|
);
|
|
168
|
-
|
|
168
|
+
BreadcrumbEllipsis.displayName = "BreadcrumbEllipsis";
|
|
169
169
|
|
|
170
|
-
const
|
|
170
|
+
const BreadcrumbLink = React.forwardRef<HTMLAnchorElement, React.AnchorHTMLAttributes<HTMLAnchorElement>>(
|
|
171
171
|
({ className, href, ...props }, ref) => (
|
|
172
172
|
<a
|
|
173
173
|
ref={ref}
|
|
@@ -180,9 +180,9 @@ const MoonUIBreadcrumbLink = React.forwardRef<HTMLAnchorElement, React.AnchorHTM
|
|
|
180
180
|
/>
|
|
181
181
|
)
|
|
182
182
|
);
|
|
183
|
-
|
|
183
|
+
BreadcrumbLink.displayName = "BreadcrumbLink";
|
|
184
184
|
|
|
185
|
-
const
|
|
185
|
+
const BreadcrumbPage = React.forwardRef<HTMLSpanElement, React.HTMLAttributes<HTMLSpanElement>>(
|
|
186
186
|
({ className, ...props }, ref) => (
|
|
187
187
|
<span
|
|
188
188
|
ref={ref}
|
|
@@ -194,16 +194,14 @@ const MoonUIBreadcrumbPage = React.forwardRef<HTMLSpanElement, React.HTMLAttribu
|
|
|
194
194
|
/>
|
|
195
195
|
)
|
|
196
196
|
);
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
export {
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
// Backward compatibility exports
|
|
209
|
-
export { MoonUIBreadcrumb as Breadcrumb, MoonUISeparator as Separator, MoonUIBreadcrumbList as BreadcrumbList, MoonUIBreadcrumbItem as BreadcrumbItem, MoonUIBreadcrumbLink as BreadcrumbLink, MoonUIBreadcrumbPage as BreadcrumbPage, MoonUIBreadcrumbSeparator as BreadcrumbSeparator, MoonUIBreadcrumbEllipsis as BreadcrumbEllipsis };
|
|
197
|
+
BreadcrumbPage.displayName = "BreadcrumbPage";
|
|
198
|
+
|
|
199
|
+
export {
|
|
200
|
+
Breadcrumb,
|
|
201
|
+
BreadcrumbList,
|
|
202
|
+
BreadcrumbItem,
|
|
203
|
+
BreadcrumbLink,
|
|
204
|
+
BreadcrumbPage,
|
|
205
|
+
BreadcrumbSeparator,
|
|
206
|
+
BreadcrumbEllipsis,
|
|
207
|
+
};
|
|
@@ -4,12 +4,12 @@ import { cn } from "../../lib/utils";
|
|
|
4
4
|
import { Loader2 } from "lucide-react";
|
|
5
5
|
|
|
6
6
|
/**
|
|
7
|
-
*
|
|
7
|
+
* Premium Button Component
|
|
8
8
|
*
|
|
9
9
|
* A world-class, accessible, and versatile button component.
|
|
10
10
|
* Pixel-perfect design with extensive variants and states.
|
|
11
11
|
*/
|
|
12
|
-
const
|
|
12
|
+
const buttonVariants = cva(
|
|
13
13
|
["inline-flex items-center justify-center gap-2 whitespace-nowrap",
|
|
14
14
|
"font-medium relative",
|
|
15
15
|
"transition-all duration-200 ease-out",
|
|
@@ -156,10 +156,10 @@ const moonUIButtonVariants = cva(
|
|
|
156
156
|
}
|
|
157
157
|
);
|
|
158
158
|
|
|
159
|
-
//
|
|
160
|
-
export interface
|
|
159
|
+
// Button component props
|
|
160
|
+
export interface ButtonProps
|
|
161
161
|
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
|
|
162
|
-
VariantProps<typeof
|
|
162
|
+
VariantProps<typeof buttonVariants> {
|
|
163
163
|
asChild?: boolean;
|
|
164
164
|
loading?: boolean;
|
|
165
165
|
leftIcon?: React.ReactNode;
|
|
@@ -167,9 +167,9 @@ export interface MoonUIButtonProps
|
|
|
167
167
|
}
|
|
168
168
|
|
|
169
169
|
/**
|
|
170
|
-
*
|
|
170
|
+
* Premium Button Component
|
|
171
171
|
*
|
|
172
|
-
* @param props -
|
|
172
|
+
* @param props - Button component properties
|
|
173
173
|
* @param props.variant - Visual variant (primary, secondary, ghost, etc.)
|
|
174
174
|
* @param props.size - Button size (xs, sm, md, lg, xl)
|
|
175
175
|
* @param props.loading - Loading state display
|
|
@@ -179,7 +179,7 @@ export interface MoonUIButtonProps
|
|
|
179
179
|
* @param props.rounded - Corner rounding style (default, full, none)
|
|
180
180
|
* @param props.asChild - For Radix UI polymorphic component
|
|
181
181
|
*/
|
|
182
|
-
const
|
|
182
|
+
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
|
183
183
|
({
|
|
184
184
|
className,
|
|
185
185
|
variant,
|
|
@@ -199,7 +199,7 @@ const MoonUIButton = React.forwardRef<HTMLButtonElement, MoonUIButtonProps>(
|
|
|
199
199
|
|
|
200
200
|
return (
|
|
201
201
|
<Comp
|
|
202
|
-
className={cn(
|
|
202
|
+
className={cn(buttonVariants({ variant, size, rounded, fullWidth, className }))}
|
|
203
203
|
ref={ref}
|
|
204
204
|
disabled={disabled || loading}
|
|
205
205
|
data-loading={loading ? "" : undefined}
|
|
@@ -216,10 +216,6 @@ const MoonUIButton = React.forwardRef<HTMLButtonElement, MoonUIButtonProps>(
|
|
|
216
216
|
}
|
|
217
217
|
);
|
|
218
218
|
|
|
219
|
-
|
|
219
|
+
Button.displayName = "Button";
|
|
220
220
|
|
|
221
|
-
export {
|
|
222
|
-
|
|
223
|
-
// Backward compatibility exports
|
|
224
|
-
export { MoonUIButton as Button, moonUIButtonVariants as buttonVariants };
|
|
225
|
-
export type { MoonUIButtonProps as ButtonProps };
|
|
221
|
+
export { Button, buttonVariants };
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
import * as React from "react";
|
|
4
4
|
import { ChevronLeft, ChevronRight } from "lucide-react";
|
|
5
5
|
import { cn } from "../../lib/utils";
|
|
6
|
-
import {
|
|
6
|
+
import { buttonVariants } from "./button";
|
|
7
7
|
import {
|
|
8
8
|
format,
|
|
9
9
|
startOfMonth,
|
|
@@ -19,7 +19,7 @@ import {
|
|
|
19
19
|
endOfWeek
|
|
20
20
|
} from "date-fns";
|
|
21
21
|
|
|
22
|
-
export interface
|
|
22
|
+
export interface CalendarProps {
|
|
23
23
|
mode?: "single" | "range" | "multiple";
|
|
24
24
|
selected?: Date | Date[] | { from?: Date; to?: Date } | undefined;
|
|
25
25
|
onSelect?: (date: Date | Date[] | { from?: Date; to?: Date } | undefined) => void;
|
|
@@ -32,7 +32,7 @@ export interface MoonUICalendarProps {
|
|
|
32
32
|
initialFocus?: boolean;
|
|
33
33
|
}
|
|
34
34
|
|
|
35
|
-
function
|
|
35
|
+
function Calendar({
|
|
36
36
|
mode = "single",
|
|
37
37
|
selected,
|
|
38
38
|
onSelect,
|
|
@@ -43,7 +43,7 @@ function MoonUICalendar({
|
|
|
43
43
|
numberOfMonths = 1,
|
|
44
44
|
defaultMonth,
|
|
45
45
|
...props
|
|
46
|
-
}:
|
|
46
|
+
}: CalendarProps) {
|
|
47
47
|
const [currentMonth, setCurrentMonth] = React.useState(
|
|
48
48
|
defaultMonth || (selected && (selected as Date)) || new Date()
|
|
49
49
|
);
|
|
@@ -257,9 +257,6 @@ function MoonUICalendar({
|
|
|
257
257
|
);
|
|
258
258
|
}
|
|
259
259
|
|
|
260
|
-
|
|
260
|
+
Calendar.displayName = "Calendar";
|
|
261
261
|
|
|
262
|
-
export {
|
|
263
|
-
|
|
264
|
-
// Backward compatibility exports
|
|
265
|
-
export { MoonUICalendar as Calendar };
|
|
262
|
+
export { Calendar };
|
|
@@ -2,9 +2,9 @@ import * as React from "react";
|
|
|
2
2
|
import { cva, type VariantProps } from "class-variance-authority";
|
|
3
3
|
import { motion, type HTMLMotionProps } from "framer-motion";
|
|
4
4
|
import { cn } from "../../lib/utils";
|
|
5
|
-
import { microInteractionVariants, hoverAnimations, tapAnimations } from "
|
|
5
|
+
import { microInteractionVariants, hoverAnimations, tapAnimations } from "@/lib/micro-interactions";
|
|
6
6
|
|
|
7
|
-
const
|
|
7
|
+
const cardVariants = cva(
|
|
8
8
|
"rounded-lg border bg-card text-card-foreground shadow-sm dark:shadow-gray-900/20 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-100 transition-all duration-200",
|
|
9
9
|
{
|
|
10
10
|
variants: {
|
|
@@ -42,14 +42,14 @@ const moonUICardVariants = cva(
|
|
|
42
42
|
}
|
|
43
43
|
);
|
|
44
44
|
|
|
45
|
-
export interface
|
|
45
|
+
export interface CardProps
|
|
46
46
|
extends React.HTMLAttributes<HTMLDivElement>,
|
|
47
|
-
VariantProps<typeof
|
|
47
|
+
VariantProps<typeof cardVariants> {
|
|
48
48
|
asChild?: boolean;
|
|
49
49
|
microInteraction?: "lift" | "glow" | "scale" | "none";
|
|
50
50
|
}
|
|
51
51
|
|
|
52
|
-
const
|
|
52
|
+
const Card = React.forwardRef<HTMLDivElement, CardProps>(
|
|
53
53
|
({ className, variant, size, radius, interactive, microInteraction = "lift", ...props }, ref) => {
|
|
54
54
|
// Interactive özelliği varsa motion.div, yoksa normal div kullan
|
|
55
55
|
if (interactive && microInteraction !== "none") {
|
|
@@ -63,9 +63,9 @@ const MoonUICard = React.forwardRef<HTMLDivElement, MoonUICardProps>(
|
|
|
63
63
|
return (
|
|
64
64
|
<motion.div
|
|
65
65
|
ref={ref}
|
|
66
|
-
className={cn(
|
|
66
|
+
className={cn(cardVariants({ variant, size, radius, interactive, className }))}
|
|
67
67
|
{...interactionProps}
|
|
68
|
-
{...props}
|
|
68
|
+
{...(props as any)}
|
|
69
69
|
/>
|
|
70
70
|
);
|
|
71
71
|
}
|
|
@@ -80,9 +80,9 @@ const MoonUICard = React.forwardRef<HTMLDivElement, MoonUICardProps>(
|
|
|
80
80
|
);
|
|
81
81
|
}
|
|
82
82
|
);
|
|
83
|
-
|
|
83
|
+
Card.displayName = "Card";
|
|
84
84
|
|
|
85
|
-
const
|
|
85
|
+
const CardHeader = React.forwardRef<
|
|
86
86
|
HTMLDivElement,
|
|
87
87
|
React.HTMLAttributes<HTMLDivElement>
|
|
88
88
|
>(({ className, ...props }, ref) => (
|
|
@@ -92,9 +92,9 @@ const MoonUICardHeader = React.forwardRef<
|
|
|
92
92
|
{...props}
|
|
93
93
|
/>
|
|
94
94
|
));
|
|
95
|
-
|
|
95
|
+
CardHeader.displayName = "CardHeader";
|
|
96
96
|
|
|
97
|
-
const
|
|
97
|
+
const CardTitle = React.forwardRef<
|
|
98
98
|
HTMLHeadingElement,
|
|
99
99
|
React.HTMLAttributes<HTMLHeadingElement>
|
|
100
100
|
>(({ className, ...props }, ref) => (
|
|
@@ -104,9 +104,9 @@ const MoonUICardTitle = React.forwardRef<
|
|
|
104
104
|
{...props}
|
|
105
105
|
/>
|
|
106
106
|
));
|
|
107
|
-
|
|
107
|
+
CardTitle.displayName = "CardTitle";
|
|
108
108
|
|
|
109
|
-
const
|
|
109
|
+
const CardDescription = React.forwardRef<
|
|
110
110
|
HTMLParagraphElement,
|
|
111
111
|
React.HTMLAttributes<HTMLParagraphElement>
|
|
112
112
|
>(({ className, ...props }, ref) => (
|
|
@@ -116,17 +116,17 @@ const MoonUICardDescription = React.forwardRef<
|
|
|
116
116
|
{...props}
|
|
117
117
|
/>
|
|
118
118
|
));
|
|
119
|
-
|
|
119
|
+
CardDescription.displayName = "CardDescription";
|
|
120
120
|
|
|
121
|
-
const
|
|
121
|
+
const CardContent = React.forwardRef<
|
|
122
122
|
HTMLDivElement,
|
|
123
123
|
React.HTMLAttributes<HTMLDivElement>
|
|
124
124
|
>(({ className, ...props }, ref) => (
|
|
125
125
|
<div ref={ref} className={cn("pt-0", className)} {...props} />
|
|
126
126
|
));
|
|
127
|
-
|
|
127
|
+
CardContent.displayName = "CardContent";
|
|
128
128
|
|
|
129
|
-
const
|
|
129
|
+
const CardFooter = React.forwardRef<
|
|
130
130
|
HTMLDivElement,
|
|
131
131
|
React.HTMLAttributes<HTMLDivElement>
|
|
132
132
|
>(({ className, ...props }, ref) => (
|
|
@@ -136,9 +136,6 @@ const MoonUICardFooter = React.forwardRef<
|
|
|
136
136
|
{...props}
|
|
137
137
|
/>
|
|
138
138
|
));
|
|
139
|
-
|
|
139
|
+
CardFooter.displayName = "CardFooter";
|
|
140
140
|
|
|
141
|
-
export {
|
|
142
|
-
|
|
143
|
-
// Backward compatibility exports
|
|
144
|
-
export { MoonUICard as Card, MoonUICardHeader as CardHeader, MoonUICardFooter as CardFooter, MoonUICardTitle as CardTitle, MoonUICardDescription as CardDescription, MoonUICardContent as CardContent };
|
|
141
|
+
export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };
|
|
@@ -14,7 +14,7 @@ import { cn } from "../../lib/utils";
|
|
|
14
14
|
* Form elemanları ve seçim listeleri için kullanılır.
|
|
15
15
|
*/
|
|
16
16
|
|
|
17
|
-
const
|
|
17
|
+
const checkboxVariants = cva(
|
|
18
18
|
"peer shrink-0 border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:text-primary-foreground",
|
|
19
19
|
{
|
|
20
20
|
variants: {
|
|
@@ -53,9 +53,9 @@ const moonUICheckboxVariants = cva(
|
|
|
53
53
|
}
|
|
54
54
|
);
|
|
55
55
|
|
|
56
|
-
export interface
|
|
56
|
+
export interface CheckboxProps
|
|
57
57
|
extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>,
|
|
58
|
-
VariantProps<typeof
|
|
58
|
+
VariantProps<typeof checkboxVariants> {
|
|
59
59
|
/**
|
|
60
60
|
* İndeterminate durumu - grup seçimlerinde bazı öğeler seçilmişse kullanılır
|
|
61
61
|
*/
|
|
@@ -66,7 +66,7 @@ export interface MoonUICheckboxProps
|
|
|
66
66
|
icon?: React.ReactNode;
|
|
67
67
|
}
|
|
68
68
|
|
|
69
|
-
const
|
|
69
|
+
const Checkbox = React.forwardRef<
|
|
70
70
|
React.ElementRef<typeof CheckboxPrimitive.Root>,
|
|
71
71
|
CheckboxProps
|
|
72
72
|
>(({
|
|
@@ -253,7 +253,4 @@ const CheckboxWithLabel = React.forwardRef<
|
|
|
253
253
|
});
|
|
254
254
|
CheckboxWithLabel.displayName = "CheckboxWithLabel";
|
|
255
255
|
|
|
256
|
-
export {
|
|
257
|
-
|
|
258
|
-
// Backward compatibility exports
|
|
259
|
-
export { MoonUICheckbox as Checkbox, MoonUILabel as Label };
|
|
256
|
+
export { Checkbox, CheckboxGroup, CheckboxLabel, CheckboxWithLabel };
|