@c-rex/ui 0.3.0-build.29 → 0.3.0-build.29662

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 (10) hide show
  1. package/package.json +15 -6
  2. package/src/badge.tsx +37 -37
  3. package/src/command.tsx +98 -94
  4. package/src/dropdown-hover-item.tsx +16 -19
  5. package/src/input-group.tsx +156 -157
  6. package/src/input.tsx +1 -1
  7. package/src/navigation-menu.tsx +1 -1
  8. package/src/pagination.tsx +4 -2
  9. package/src/sheet.tsx +93 -85
  10. package/src/sidebar.tsx +3 -3
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@c-rex/ui",
3
- "version": "0.3.0-build.29",
3
+ "version": "0.3.0-build.29662",
4
4
  "type": "module",
5
5
  "files": [
6
6
  "src"
@@ -50,6 +50,10 @@
50
50
  "types": "./src/input.tsx",
51
51
  "import": "./src/input.tsx"
52
52
  },
53
+ "./textarea": {
54
+ "types": "./src/textarea.tsx",
55
+ "import": "./src/textarea.tsx"
56
+ },
53
57
  "./input-group": {
54
58
  "types": "./src/input-group.tsx",
55
59
  "import": "./src/input-group.tsx"
@@ -153,18 +157,23 @@
153
157
  },
154
158
  "scripts": {
155
159
  "lint": "eslint .",
156
- "lint:fix": "eslint . --fix"
160
+ "lint:fix": "eslint . --fix",
161
+ "check-types": "tsc --noEmit",
162
+ "test": "echo \u0027No tests\u0027",
163
+ "build": "echo \u0027No build script\u0027",
164
+ "format:check": "prettier --check .",
165
+ "validate": "npm run lint \u0026\u0026 npm run check-types \u0026\u0026 npm run test \u0026\u0026 npm run build"
157
166
  },
158
167
  "devDependencies": {
159
168
  "@c-rex/eslint-config": "*",
160
169
  "@c-rex/typescript-config": "*",
161
170
  "@turbo/gen": "^2.4.4",
162
171
  "@types/node": "^22.13.10",
163
- "@types/react": "19.0.10",
164
- "@types/react-dom": "19.0.4",
172
+ "@types/react": "18.3.31",
173
+ "@types/react-dom": "18.3.7",
165
174
  "eslint": "^9.23.0",
166
175
  "shadcn": "^2.5.0",
167
- "typescript": "latest"
176
+ "typescript": "5.8.3"
168
177
  },
169
178
  "dependencies": {
170
179
  "@c-rex/constants": "*",
@@ -191,7 +200,7 @@
191
200
  "class-variance-authority": "^0.7.1",
192
201
  "clsx": "^2.1.1",
193
202
  "cmdk": "^1.1.1",
194
- "lucide-react": "^0.486.0",
203
+ "lucide-react": "^0.511.0",
195
204
  "radix-ui": "^1.4.3",
196
205
  "react": "^18.3.1",
197
206
  "react-dom": "^18.3.1",
package/src/badge.tsx CHANGED
@@ -1,46 +1,46 @@
1
- import * as React from "react"
2
- import { Slot } from "@radix-ui/react-slot"
3
- import { cva, type VariantProps } from "class-variance-authority"
1
+ import * as React from "react";
2
+ import { Slot } from "@radix-ui/react-slot";
3
+ import { cva, type VariantProps } from "class-variance-authority";
4
4
 
5
- import { cn } from "@c-rex/utils"
5
+ import { cn } from "@c-rex/utils";
6
6
 
7
7
  const badgeVariants = cva(
8
- "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
9
- {
10
- variants: {
11
- variant: {
12
- default:
13
- "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
14
- secondary:
15
- "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
16
- destructive:
17
- "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
18
- outline:
19
- "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
20
- },
21
- },
22
- defaultVariants: {
23
- variant: "default",
24
- },
25
- }
26
- )
8
+ "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
9
+ {
10
+ variants: {
11
+ variant: {
12
+ default:
13
+ "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
14
+ secondary:
15
+ "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
16
+ destructive:
17
+ "border-transparent bg-destructive text-destructive-foreground [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
18
+ outline:
19
+ "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
20
+ },
21
+ },
22
+ defaultVariants: {
23
+ variant: "default",
24
+ },
25
+ },
26
+ );
27
27
 
28
28
  function Badge({
29
- className,
30
- variant,
31
- asChild = false,
32
- ...props
29
+ className,
30
+ variant,
31
+ asChild = false,
32
+ ...props
33
33
  }: React.ComponentProps<"span"> &
34
- VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
35
- const Comp = asChild ? Slot : "span"
34
+ VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
35
+ const Comp = asChild ? Slot : "span";
36
36
 
37
- return (
38
- <Comp
39
- data-slot="badge"
40
- className={cn(badgeVariants({ variant }), className)}
41
- {...props}
42
- />
43
- )
37
+ return (
38
+ <Comp
39
+ data-slot="badge"
40
+ className={cn(badgeVariants({ variant }), className)}
41
+ {...props}
42
+ />
43
+ );
44
44
  }
45
45
 
46
- export { Badge, badgeVariants }
46
+ export { Badge, badgeVariants };
package/src/command.tsx CHANGED
@@ -7,145 +7,149 @@ import { cn } from "@c-rex/utils";
7
7
  import { Dialog, DialogContent } from "./dialog";
8
8
 
9
9
  const Command = React.forwardRef<
10
- React.ElementRef<typeof CommandPrimitive>,
11
- React.ComponentPropsWithoutRef<typeof CommandPrimitive>
10
+ React.ElementRef<typeof CommandPrimitive>,
11
+ React.ComponentPropsWithoutRef<typeof CommandPrimitive>
12
12
  >(({ className, ...props }, ref) => (
13
- <CommandPrimitive
14
- ref={ref}
15
- className={cn(
16
- "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
17
- className,
18
- )}
19
- {...props}
20
- />
13
+ <CommandPrimitive
14
+ ref={ref}
15
+ className={cn(
16
+ "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
17
+ className,
18
+ )}
19
+ {...props}
20
+ />
21
21
  ));
22
22
  Command.displayName = CommandPrimitive.displayName;
23
23
 
24
24
  const CommandDialog = ({ children, ...props }: DialogProps) => {
25
- return (
26
- <Dialog {...props}>
27
- <DialogContent className="overflow-hidden p-0">
28
- <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
29
- {children}
30
- </Command>
31
- </DialogContent>
32
- </Dialog>
33
- );
25
+ return (
26
+ <Dialog {...props}>
27
+ <DialogContent className="overflow-hidden p-0">
28
+ <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
29
+ {children}
30
+ </Command>
31
+ </DialogContent>
32
+ </Dialog>
33
+ );
34
34
  };
35
35
 
36
36
  const CommandInput = React.forwardRef<
37
- React.ElementRef<typeof CommandPrimitive.Input>,
38
- React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
39
- >(({ className, ...props }, ref) => (
40
- <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
41
- <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
42
- <CommandPrimitive.Input
43
- ref={ref}
44
- className={cn(
45
- "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
46
- className,
47
- )}
48
- {...props}
49
- />
50
- </div>
37
+ React.ElementRef<typeof CommandPrimitive.Input>,
38
+ React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input> & {
39
+ /** Rendered inside the input row, after the text field (e.g. an info button). */
40
+ trailing?: React.ReactNode;
41
+ }
42
+ >(({ className, trailing, ...props }, ref) => (
43
+ <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
44
+ <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
45
+ <CommandPrimitive.Input
46
+ ref={ref}
47
+ className={cn(
48
+ "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
49
+ className,
50
+ )}
51
+ {...props}
52
+ />
53
+ {trailing}
54
+ </div>
51
55
  ));
52
56
 
53
57
  CommandInput.displayName = CommandPrimitive.Input.displayName;
54
58
 
55
59
  const CommandList = React.forwardRef<
56
- React.ElementRef<typeof CommandPrimitive.List>,
57
- React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
60
+ React.ElementRef<typeof CommandPrimitive.List>,
61
+ React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
58
62
  >(({ className, ...props }, ref) => (
59
- <CommandPrimitive.List
60
- ref={ref}
61
- className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
62
- {...props}
63
- />
63
+ <CommandPrimitive.List
64
+ ref={ref}
65
+ className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
66
+ {...props}
67
+ />
64
68
  ));
65
69
 
66
70
  CommandList.displayName = CommandPrimitive.List.displayName;
67
71
 
68
72
  const CommandEmpty = React.forwardRef<
69
- React.ElementRef<typeof CommandPrimitive.Empty>,
70
- React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
73
+ React.ElementRef<typeof CommandPrimitive.Empty>,
74
+ React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
71
75
  >((props, ref) => (
72
- <CommandPrimitive.Empty
73
- ref={ref}
74
- className="py-6 text-center text-sm"
75
- {...props}
76
- />
76
+ <CommandPrimitive.Empty
77
+ ref={ref}
78
+ className="py-6 text-center text-sm"
79
+ {...props}
80
+ />
77
81
  ));
78
82
 
79
83
  CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
80
84
 
81
85
  const CommandGroup = React.forwardRef<
82
- React.ElementRef<typeof CommandPrimitive.Group>,
83
- React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
86
+ React.ElementRef<typeof CommandPrimitive.Group>,
87
+ React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
84
88
  >(({ className, ...props }, ref) => (
85
- <CommandPrimitive.Group
86
- ref={ref}
87
- className={cn(
88
- "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
89
- className,
90
- )}
91
- {...props}
92
- />
89
+ <CommandPrimitive.Group
90
+ ref={ref}
91
+ className={cn(
92
+ "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
93
+ className,
94
+ )}
95
+ {...props}
96
+ />
93
97
  ));
94
98
 
95
99
  CommandGroup.displayName = CommandPrimitive.Group.displayName;
96
100
 
97
101
  const CommandSeparator = React.forwardRef<
98
- React.ElementRef<typeof CommandPrimitive.Separator>,
99
- React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
102
+ React.ElementRef<typeof CommandPrimitive.Separator>,
103
+ React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
100
104
  >(({ className, ...props }, ref) => (
101
- <CommandPrimitive.Separator
102
- ref={ref}
103
- className={cn("-mx-1 h-px bg-border", className)}
104
- {...props}
105
- />
105
+ <CommandPrimitive.Separator
106
+ ref={ref}
107
+ className={cn("-mx-1 h-px bg-border", className)}
108
+ {...props}
109
+ />
106
110
  ));
107
111
  CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
108
112
 
109
113
  const CommandItem = React.forwardRef<
110
- React.ElementRef<typeof CommandPrimitive.Item>,
111
- React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
114
+ React.ElementRef<typeof CommandPrimitive.Item>,
115
+ React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
112
116
  >(({ className, ...props }, ref) => (
113
- <CommandPrimitive.Item
114
- ref={ref}
115
- className={cn(
116
- "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
117
- className,
118
- )}
119
- {...props}
120
- />
117
+ <CommandPrimitive.Item
118
+ ref={ref}
119
+ className={cn(
120
+ "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
121
+ className,
122
+ )}
123
+ {...props}
124
+ />
121
125
  ));
122
126
 
123
127
  CommandItem.displayName = CommandPrimitive.Item.displayName;
124
128
 
125
129
  const CommandShortcut = ({
126
- className,
127
- ...props
130
+ className,
131
+ ...props
128
132
  }: React.HTMLAttributes<HTMLSpanElement>) => {
129
- return (
130
- <span
131
- className={cn(
132
- "ml-auto text-xs tracking-widest text-muted-foreground",
133
- className,
134
- )}
135
- {...props}
136
- />
137
- );
133
+ return (
134
+ <span
135
+ className={cn(
136
+ "ml-auto text-xs tracking-widest text-muted-foreground",
137
+ className,
138
+ )}
139
+ {...props}
140
+ />
141
+ );
138
142
  };
139
143
  CommandShortcut.displayName = "CommandShortcut";
140
144
 
141
145
  export {
142
- Command,
143
- CommandDialog,
144
- CommandInput,
145
- CommandList,
146
- CommandEmpty,
147
- CommandGroup,
148
- CommandItem,
149
- CommandShortcut,
150
- CommandSeparator,
146
+ Command,
147
+ CommandDialog,
148
+ CommandInput,
149
+ CommandList,
150
+ CommandEmpty,
151
+ CommandGroup,
152
+ CommandItem,
153
+ CommandShortcut,
154
+ CommandSeparator,
151
155
  };
package/src/dropdown-hover-item.tsx CHANGED
@@ -1,27 +1,24 @@
1
- import { cn } from "@c-rex/utils"
1
+ import { cn } from "@c-rex/utils";
2
2
 
3
3
  interface DropdownHoverItemProps {
4
- label: React.ReactNode;
5
- children: React.ReactNode;
6
- className?: string;
4
+ label: React.ReactNode;
5
+ children: React.ReactNode;
6
+ className?: string;
7
7
  }
8
8
 
9
9
  export function DropdownHoverItem({
10
- label,
11
- children,
12
- className
10
+ label,
11
+ children,
12
+ className,
13
13
  }: DropdownHoverItemProps) {
14
- return (
15
- <div className={cn("relative inline-block group/dropdown", className)}>
16
-
17
- {label}
18
- <div className="hidden group-hover/dropdown:block absolute left-0 z-10 pt-2">
19
-
20
- <div className="w-48 bg-white border rounded shadow-lg p-2 max-h-[30rem] overflow-auto">
21
- {children}
22
- </div>
23
-
24
- </div>
14
+ return (
15
+ <div className={cn("relative inline-block group/dropdown", className)}>
16
+ {label}
17
+ <div className="hidden group-hover/dropdown:block absolute left-0 z-10 pt-2">
18
+ <div className="rounded border border-border bg-popover p-2 text-popover-foreground shadow-lg max-h-[30rem] overflow-auto">
19
+ {children}
25
20
  </div>
26
- );
21
+ </div>
22
+ </div>
23
+ );
27
24
  }
package/src/input-group.tsx CHANGED
@@ -1,189 +1,188 @@
1
- import * as React from "react"
2
- import { cva, type VariantProps } from "class-variance-authority"
1
+ import * as React from "react";
2
+ import { cva, type VariantProps } from "class-variance-authority";
3
3
 
4
- import { cn } from "@c-rex/utils"
5
- import { Button } from "./button"
6
- import { Input } from "./input"
7
- import { Textarea } from "./textarea"
4
+ import { cn } from "@c-rex/utils";
5
+ import { Button } from "./button";
6
+ import { Input } from "./input";
7
+ import { Textarea } from "./textarea";
8
8
 
9
9
  const inputGroupVariants = cva(
10
- "group/input-group relative flex w-full items-center rounded-md transition-[color,box-shadow] outline-none h-9 min-w-0 has-[>textarea]:h-auto",
11
- {
12
- variants: {
13
- variant: {
14
- default:
15
- "border border-input bg-white",
16
- embedded:
17
- "border-0 bg-transparent shadow-none",
18
- },
19
- },
20
- defaultVariants: {
21
- variant: "default",
22
- },
23
- }
24
- )
10
+ "group/input-group relative flex w-full items-center rounded-md transition-[color,box-shadow] outline-none h-9 min-w-0 has-[>textarea]:h-auto",
11
+ {
12
+ variants: {
13
+ variant: {
14
+ default: "border border-input bg-background",
15
+ embedded: "border-0 bg-transparent shadow-none",
16
+ },
17
+ },
18
+ defaultVariants: {
19
+ variant: "default",
20
+ },
21
+ },
22
+ );
25
23
 
26
24
  function InputGroup({
27
- className,
28
- variant,
29
- ...props
30
- }: React.ComponentProps<"div"> &
31
- VariantProps<typeof inputGroupVariants>) {
32
- return (
33
- <div
34
- data-slot="input-group"
35
- role="group"
36
- className={cn(
37
- inputGroupVariants({ variant }),
25
+ className,
26
+ variant,
27
+ ...props
28
+ }: React.ComponentProps<"div"> & VariantProps<typeof inputGroupVariants>) {
29
+ return (
30
+ <div
31
+ data-slot="input-group"
32
+ role="group"
33
+ className={cn(
34
+ inputGroupVariants({ variant }),
38
35
 
39
- // Variants based on alignment.
40
- "has-[>[data-align=inline-start]]:[&>input]:pl-2",
41
- "has-[>[data-align=inline-end]]:[&>input]:pr-2",
42
- "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3",
43
- "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3",
36
+ // Variants based on alignment.
37
+ "has-[>[data-align=inline-start]]:[&>input]:pl-2",
38
+ "has-[>[data-align=inline-end]]:[&>input]:pr-2",
39
+ "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3",
40
+ "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3",
44
41
 
45
- // Focus state.
46
- "has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50",
42
+ // Focus state.
43
+ "has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50",
47
44
 
48
- // Error state.
49
- "has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40",
45
+ // Error state.
46
+ "has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40",
50
47
 
51
- className
52
- )}
53
- {...props}
54
- />
55
- )
48
+ className,
49
+ )}
50
+ {...props}
51
+ />
52
+ );
56
53
  }
57
54
 
58
55
  const inputGroupAddonVariants = cva(
59
- "text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none [&>svg:not([class*='size-'])]:size-4 [&>kbd]:rounded-[calc(var(--radius)-5px)] group-data-[disabled=true]/input-group:opacity-50",
60
- {
61
- variants: {
62
- align: {
63
- "inline-start":
64
- "order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]",
65
- "inline-end":
66
- "order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]",
67
- "block-start":
68
- "order-first w-full justify-start px-3 pt-3 [.border-b]:pb-3 group-has-[>input]/input-group:pt-2.5",
69
- "block-end":
70
- "order-last w-full justify-start px-3 pb-3 [.border-t]:pt-3 group-has-[>input]/input-group:pb-2.5",
71
- },
72
- },
73
- defaultVariants: {
74
- align: "inline-start",
75
- },
76
- }
77
- )
56
+ "text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none [&>svg:not([class*='size-'])]:size-4 [&>kbd]:rounded-[calc(var(--radius)-5px)] group-data-[disabled=true]/input-group:opacity-50",
57
+ {
58
+ variants: {
59
+ align: {
60
+ "inline-start":
61
+ "order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]",
62
+ "inline-end":
63
+ "order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]",
64
+ "block-start":
65
+ "order-first w-full justify-start px-3 pt-3 [.border-b]:pb-3 group-has-[>input]/input-group:pt-2.5",
66
+ "block-end":
67
+ "order-last w-full justify-start px-3 pb-3 [.border-t]:pt-3 group-has-[>input]/input-group:pb-2.5",
68
+ },
69
+ },
70
+ defaultVariants: {
71
+ align: "inline-start",
72
+ },
73
+ },
74
+ );
78
75
 
79
76
  function InputGroupAddon({
80
- className,
81
- align = "inline-start",
82
- ...props
77
+ className,
78
+ align = "inline-start",
79
+ ...props
83
80
  }: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) {
84
- return (
85
- <div
86
- role="group"
87
- data-slot="input-group-addon"
88
- data-align={align}
89
- className={cn(inputGroupAddonVariants({ align }), className)}
90
- onClick={(e) => {
91
- if ((e.target as HTMLElement).closest("button")) {
92
- return
93
- }
94
- e.currentTarget.parentElement?.querySelector("input")?.focus()
95
- }}
96
- {...props}
97
- />
98
- )
81
+ return (
82
+ <div
83
+ role="group"
84
+ data-slot="input-group-addon"
85
+ data-align={align}
86
+ className={cn(inputGroupAddonVariants({ align }), className)}
87
+ onClick={(e) => {
88
+ if ((e.target as HTMLElement).closest("button")) {
89
+ return;
90
+ }
91
+ e.currentTarget.parentElement?.querySelector("input")?.focus();
92
+ }}
93
+ {...props}
94
+ />
95
+ );
99
96
  }
100
97
 
101
98
  const inputGroupButtonVariants = cva(
102
- "text-sm shadow-none flex gap-2 items-center",
103
- {
104
- variants: {
105
- size: {
106
- xs: "h-6 gap-1 px-2 rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2",
107
- sm: "h-8 px-2.5 gap-1.5 rounded-md has-[>svg]:px-2.5",
108
- "icon-xs":
109
- "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
110
- "icon-sm": "size-8 p-0 has-[>svg]:p-0",
111
- },
112
- },
113
- defaultVariants: {
114
- size: "xs",
115
- },
116
- }
117
- )
99
+ "text-sm shadow-none flex gap-2 items-center",
100
+ {
101
+ variants: {
102
+ size: {
103
+ xs: "h-6 gap-1 px-2 rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2",
104
+ sm: "h-8 px-2.5 gap-1.5 rounded-md has-[>svg]:px-2.5",
105
+ "icon-xs":
106
+ "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
107
+ "icon-sm": "size-8 p-0 has-[>svg]:p-0",
108
+ },
109
+ },
110
+ defaultVariants: {
111
+ size: "xs",
112
+ },
113
+ },
114
+ );
118
115
 
119
116
  function InputGroupButton({
120
- className,
121
- type = "button",
122
- variant = "ghost",
123
- size = "xs",
124
- ...props
117
+ className,
118
+ type = "button",
119
+ variant = "ghost",
120
+ size = "xs",
121
+ ...props
125
122
  }: Omit<React.ComponentProps<typeof Button>, "size"> &
126
- VariantProps<typeof inputGroupButtonVariants>) {
127
- return (
128
- <Button
129
- type={type}
130
- data-size={size}
131
- variant={variant}
132
- className={cn(inputGroupButtonVariants({ size }), className)}
133
- {...props}
134
- />
135
- )
123
+ VariantProps<typeof inputGroupButtonVariants>) {
124
+ return (
125
+ <Button
126
+ type={type}
127
+ data-size={size}
128
+ variant={variant}
129
+ className={cn(inputGroupButtonVariants({ size }), className)}
130
+ {...props}
131
+ />
132
+ );
136
133
  }
137
134
 
138
135
  function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
139
- return (
140
- <span
141
- className={cn(
142
- "text-muted-foreground flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
143
- className
144
- )}
145
- {...props}
146
- />
147
- )
136
+ return (
137
+ <span
138
+ className={cn(
139
+ "text-muted-foreground flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
140
+ className,
141
+ )}
142
+ {...props}
143
+ />
144
+ );
148
145
  }
149
146
 
150
- function InputGroupInput({
151
- className,
152
- ...props
153
- }: React.ComponentProps<typeof Input>) {
154
- return (
155
- <Input
156
- data-slot="input-group-control"
157
- className={cn(
158
- "flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent",
159
- className
160
- )}
161
- {...props}
162
- />
163
- )
164
- }
147
+ const InputGroupInput = React.forwardRef<
148
+ HTMLInputElement,
149
+ React.ComponentProps<typeof Input>
150
+ >(({ className, ...props }, ref) => {
151
+ return (
152
+ <Input
153
+ data-slot="input-group-control"
154
+ ref={ref}
155
+ className={cn(
156
+ "flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent",
157
+ className,
158
+ )}
159
+ {...props}
160
+ />
161
+ );
162
+ });
163
+ InputGroupInput.displayName = "InputGroupInput";
165
164
 
166
165
  function InputGroupTextarea({
167
- className,
168
- ...props
166
+ className,
167
+ ...props
169
168
  }: React.ComponentProps<"textarea">) {
170
- return (
171
- <Textarea
172
- data-slot="input-group-control"
173
- className={cn(
174
- "flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent",
175
- className
176
- )}
177
- {...props}
178
- />
179
- )
169
+ return (
170
+ <Textarea
171
+ data-slot="input-group-control"
172
+ className={cn(
173
+ "flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent",
174
+ className,
175
+ )}
176
+ {...props}
177
+ />
178
+ );
180
179
  }
181
180
 
182
181
  export {
183
- InputGroup,
184
- InputGroupAddon,
185
- InputGroupButton,
186
- InputGroupText,
187
- InputGroupInput,
188
- InputGroupTextarea,
189
- }
182
+ InputGroup,
183
+ InputGroupAddon,
184
+ InputGroupButton,
185
+ InputGroupText,
186
+ InputGroupInput,
187
+ InputGroupTextarea,
188
+ };
package/src/input.tsx CHANGED
@@ -19,7 +19,7 @@ const inputVariants = cva(
19
19
  }
20
20
  )
21
21
 
22
- interface InputProps
22
+ export interface InputProps
23
23
  extends React.ComponentProps<"input">,
24
24
  VariantProps<typeof inputVariants> {
25
25
  asChild?: boolean;
package/src/navigation-menu.tsx CHANGED
@@ -37,7 +37,7 @@ function NavigationMenuList({
37
37
  <NavigationMenuPrimitive.List
38
38
  data-slot="navigation-menu-list"
39
39
  className={cn(
40
- "group flex flex-1 list-none items-center justify-center gap-1",
40
+ "group flex flex-1 list-none items-center justify-center",
41
41
  className
42
42
  )}
43
43
  {...props}
package/src/pagination.tsx CHANGED
@@ -67,12 +67,13 @@ function PaginationLink({
67
67
 
68
68
  function PaginationPrevious({
69
69
  className,
70
+ size = "default",
70
71
  ...props
71
72
  }: React.ComponentProps<typeof PaginationLink>) {
72
73
  return (
73
74
  <PaginationLink
74
75
  aria-label="Go to previous page"
75
- size="default"
76
+ size={size}
76
77
  className={cn("gap-1 px-2.5 sm:pl-2.5", className)}
77
78
  {...props}
78
79
  >
@@ -83,12 +84,13 @@ function PaginationPrevious({
83
84
 
84
85
  function PaginationNext({
85
86
  className,
87
+ size = "default",
86
88
  ...props
87
89
  }: React.ComponentProps<typeof PaginationLink>) {
88
90
  return (
89
91
  <PaginationLink
90
92
  aria-label="Go to next page"
91
- size="default"
93
+ size={size}
92
94
  className={cn("gap-1 px-2.5 sm:pr-2.5", className)}
93
95
  {...props}
94
96
  >
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
  };
package/src/sidebar.tsx CHANGED
@@ -9,7 +9,7 @@ import { useBreakpoint } from "./hooks";
9
9
  import { Button } from "./button";
10
10
  import { Input } from "./input";
11
11
  import { Separator } from "./separator";
12
- import { Sheet, SheetContent } from "./sheet";
12
+ import { Sheet, SheetContent, SheetTitle } from "./sheet";
13
13
  import { Skeleton } from "./skeleton";
14
14
  import {
15
15
  Tooltip,
@@ -251,6 +251,7 @@ const Sidebar = React.forwardRef<
251
251
  }
252
252
  side={side}
253
253
  >
254
+ <SheetTitle className="sr-only">Sidebar</SheetTitle>
254
255
  <div className={cn(
255
256
  side === "right" && "pl-4",
256
257
  "flex h-full w-full flex-col"
@@ -265,7 +266,7 @@ const Sidebar = React.forwardRef<
265
266
  <div
266
267
  ref={ref}
267
268
  className={cn(
268
- "group peer relative hidden shrink-0 overflow-hidden text-sidebar-foreground lg:block",
269
+ "group peer relative hidden h-full shrink-0 overflow-hidden text-sidebar-foreground lg:block",
269
270
  "duration-200 transition-[width,height] ease-linear",
270
271
  "data-[collapsible=offcanvas]:w-0",
271
272
  "data-[collapsible=offcanvas]:h-0",
@@ -300,7 +301,6 @@ const Sidebar = React.forwardRef<
300
301
  data-sidebar="sidebar"
301
302
  className={cn(
302
303
  "flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow",
303
- side === "left" && "bg-sidebar"
304
304
  )}>
305
305
  {children}
306
306
  </div>