@c-rex/ui 0.3.0-build.27710 → 0.3.0-build.28277

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.
Files changed (2) hide show
  1. package/package.json +1 -1
  2. package/src/sheet.tsx +93 -85
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@c-rex/ui",
3
- "version": "0.3.0-build.27710",
3
+ "version": "0.3.0-build.28277",
4
4
  "type": "module",
5
5
  "files": [
6
6
  "src"
package/src/sheet.tsx CHANGED
@@ -16,125 +16,133 @@ const SheetClose = SheetPrimitive.Close;
16
16
  const SheetPortal = SheetPrimitive.Portal;
17
17
 
18
18
  const SheetOverlay = React.forwardRef<
19
- React.ElementRef<typeof SheetPrimitive.Overlay>,
20
- React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
19
+ React.ElementRef<typeof SheetPrimitive.Overlay>,
20
+ React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
21
21
  >(({ className, ...props }, ref) => (
22
- <SheetPrimitive.Overlay
23
- className={cn(
24
- "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
25
- className,
26
- )}
27
- {...props}
28
- ref={ref}
29
- />
22
+ <SheetPrimitive.Overlay
23
+ className={cn(
24
+ "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
25
+ className,
26
+ )}
27
+ {...props}
28
+ ref={ref}
29
+ />
30
30
  ));
31
31
  SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
32
32
 
33
33
  const sheetVariants = cva(
34
- "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out",
35
- {
36
- variants: {
37
- side: {
38
- top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
39
- bottom:
40
- "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
41
- left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
42
- right:
43
- "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
44
- },
45
- },
46
- defaultVariants: {
47
- side: "right",
48
- },
34
+ "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out",
35
+ {
36
+ variants: {
37
+ side: {
38
+ top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
39
+ bottom:
40
+ "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
41
+ left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
42
+ right:
43
+ "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
44
+ },
49
45
  },
46
+ defaultVariants: {
47
+ side: "right",
48
+ },
49
+ },
50
50
  );
51
51
 
52
52
  interface SheetContentProps
53
- extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
54
- VariantProps<typeof sheetVariants> { }
53
+ extends
54
+ React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
55
+ VariantProps<typeof sheetVariants> {
56
+ /** Leaves out the corner X; the sheet must then be closable another way (Esc, outside click). */
57
+ hideCloseButton?: boolean;
58
+ }
55
59
 
56
60
  const SheetContent = React.forwardRef<
57
- React.ElementRef<typeof SheetPrimitive.Content>,
58
- SheetContentProps
59
- >(({ side = "right", className, children, ...props }, ref) => (
61
+ React.ElementRef<typeof SheetPrimitive.Content>,
62
+ SheetContentProps
63
+ >(
64
+ (
65
+ { side = "right", className, children, hideCloseButton = false, ...props },
66
+ ref,
67
+ ) => (
60
68
  <SheetPortal>
61
- <SheetOverlay />
62
- <SheetPrimitive.Content
63
- ref={ref}
64
- className={cn(sheetVariants({ side }), className)}
65
- {...props}
66
- >
67
- <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
68
- <X className="h-4 w-4" />
69
- <span className="sr-only">Close</span>
70
- </SheetPrimitive.Close>
71
- {children}
72
- </SheetPrimitive.Content>
69
+ <SheetOverlay />
70
+ <SheetPrimitive.Content
71
+ ref={ref}
72
+ className={cn(sheetVariants({ side }), className)}
73
+ {...props}
74
+ >
75
+ {!hideCloseButton && (
76
+ <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
77
+ <X className="h-4 w-4" />
78
+ <span className="sr-only">Close</span>
79
+ </SheetPrimitive.Close>
80
+ )}
81
+ {children}
82
+ </SheetPrimitive.Content>
73
83
  </SheetPortal>
74
- ));
84
+ ),
85
+ );
75
86
  SheetContent.displayName = SheetPrimitive.Content.displayName;
76
87
 
77
88
  const SheetHeader = ({
78
- className,
79
- ...props
89
+ className,
90
+ ...props
80
91
  }: React.HTMLAttributes<HTMLDivElement>) => (
81
- <div
82
- className={cn(
83
- "flex flex-row gap-2 text-center",
84
- className,
85
- )}
86
- {...props}
87
- />
92
+ <div
93
+ className={cn("flex flex-row gap-2 text-center", className)}
94
+ {...props}
95
+ />
88
96
  );
89
97
  SheetHeader.displayName = "SheetHeader";
90
98
 
91
99
  const SheetFooter = ({
92
- className,
93
- ...props
100
+ className,
101
+ ...props
94
102
  }: React.HTMLAttributes<HTMLDivElement>) => (
95
- <div
96
- className={cn(
97
- "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
98
- className,
99
- )}
100
- {...props}
101
- />
103
+ <div
104
+ className={cn(
105
+ "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
106
+ className,
107
+ )}
108
+ {...props}
109
+ />
102
110
  );
103
111
  SheetFooter.displayName = "SheetFooter";
104
112
 
105
113
  const SheetTitle = React.forwardRef<
106
- React.ElementRef<typeof SheetPrimitive.Title>,
107
- React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
114
+ React.ElementRef<typeof SheetPrimitive.Title>,
115
+ React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
108
116
  >(({ className, ...props }, ref) => (
109
- <SheetPrimitive.Title
110
- ref={ref}
111
- className={cn("text-lg font-semibold text-foreground", className)}
112
- {...props}
113
- />
117
+ <SheetPrimitive.Title
118
+ ref={ref}
119
+ className={cn("text-lg font-semibold text-foreground", className)}
120
+ {...props}
121
+ />
114
122
  ));
115
123
  SheetTitle.displayName = SheetPrimitive.Title.displayName;
116
124
 
117
125
  const SheetDescription = React.forwardRef<
118
- React.ElementRef<typeof SheetPrimitive.Description>,
119
- React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
126
+ React.ElementRef<typeof SheetPrimitive.Description>,
127
+ React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
120
128
  >(({ className, ...props }, ref) => (
121
- <SheetPrimitive.Description
122
- ref={ref}
123
- className={cn("text-sm text-muted-foreground", className)}
124
- {...props}
125
- />
129
+ <SheetPrimitive.Description
130
+ ref={ref}
131
+ className={cn("text-sm text-muted-foreground", className)}
132
+ {...props}
133
+ />
126
134
  ));
127
135
  SheetDescription.displayName = SheetPrimitive.Description.displayName;
128
136
 
129
137
  export {
130
- Sheet,
131
- SheetPortal,
132
- SheetOverlay,
133
- SheetTrigger,
134
- SheetClose,
135
- SheetContent,
136
- SheetHeader,
137
- SheetFooter,
138
- SheetTitle,
139
- SheetDescription,
138
+ Sheet,
139
+ SheetPortal,
140
+ SheetOverlay,
141
+ SheetTrigger,
142
+ SheetClose,
143
+ SheetContent,
144
+ SheetHeader,
145
+ SheetFooter,
146
+ SheetTitle,
147
+ SheetDescription,
140
148
  };