@openconsole/shadcn 0.0.0 → 0.0.1

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 (71) hide show
  1. package/accordion.tsx +66 -66
  2. package/alert-dialog.tsx +196 -196
  3. package/alert.tsx +66 -66
  4. package/aspect-ratio.tsx +11 -11
  5. package/avatar.tsx +53 -53
  6. package/badge.tsx +46 -46
  7. package/breadcrumb.tsx +109 -109
  8. package/button-group.tsx +83 -83
  9. package/button.tsx +60 -60
  10. package/calendar.tsx +219 -219
  11. package/card.tsx +92 -92
  12. package/carousel.tsx +241 -241
  13. package/chart.tsx +374 -374
  14. package/checkbox.tsx +32 -32
  15. package/collapsible.tsx +33 -33
  16. package/command.tsx +184 -184
  17. package/context-menu.tsx +252 -252
  18. package/dialog.tsx +143 -143
  19. package/direction.tsx +22 -22
  20. package/drawer.tsx +135 -135
  21. package/dropdown-menu.tsx +257 -257
  22. package/empty.tsx +104 -104
  23. package/field.tsx +248 -248
  24. package/form.tsx +167 -167
  25. package/hooks/index.ts +1 -1
  26. package/hooks/use-mobile.ts +19 -19
  27. package/hover-card.tsx +44 -44
  28. package/icon.tsx +21 -21
  29. package/index.ts +59 -59
  30. package/input-group.tsx +170 -170
  31. package/input-otp.tsx +77 -77
  32. package/input.tsx +21 -21
  33. package/item.tsx +193 -193
  34. package/kbd.tsx +28 -28
  35. package/label.tsx +24 -24
  36. package/lib/index.ts +1 -1
  37. package/lib/utils.ts +6 -6
  38. package/menubar.tsx +276 -276
  39. package/native-select.tsx +62 -62
  40. package/navigation-menu.tsx +168 -168
  41. package/package.json +10 -2
  42. package/pagination.tsx +127 -127
  43. package/popover.tsx +89 -89
  44. package/progress.tsx +31 -31
  45. package/radio-group.tsx +45 -45
  46. package/resizable.tsx +53 -53
  47. package/scroll-area.tsx +58 -58
  48. package/select.tsx +187 -187
  49. package/separator.tsx +28 -28
  50. package/sheet.tsx +139 -139
  51. package/sidebar.tsx +724 -724
  52. package/skeleton.tsx +13 -13
  53. package/skill/SKILL.md +620 -599
  54. package/skill/customization.md +301 -263
  55. package/skill/rules/base-vs-radix.md +167 -167
  56. package/skill/rules/composition.md +240 -240
  57. package/skill/rules/forms.md +271 -271
  58. package/skill/rules/icons.md +136 -136
  59. package/skill/rules/styling.md +180 -180
  60. package/slider.tsx +63 -63
  61. package/sonner.tsx +40 -40
  62. package/spinner.tsx +16 -16
  63. package/styles.css +122 -0
  64. package/switch.tsx +35 -35
  65. package/table.tsx +116 -116
  66. package/tabs.tsx +66 -66
  67. package/textarea.tsx +18 -18
  68. package/toggle-group.tsx +83 -83
  69. package/toggle.tsx +47 -47
  70. package/tooltip.tsx +61 -61
  71. package/tsconfig.json +12 -12
package/aspect-ratio.tsx CHANGED
@@ -1,11 +1,11 @@
1
- "use client"
2
-
3
- import { AspectRatio as AspectRatioPrimitive } from "radix-ui"
4
-
5
- function AspectRatio({
6
- ...props
7
- }: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {
8
- return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />
9
- }
10
-
11
- export { AspectRatio }
1
+ "use client"
2
+
3
+ import { AspectRatio as AspectRatioPrimitive } from "radix-ui"
4
+
5
+ function AspectRatio({
6
+ ...props
7
+ }: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {
8
+ return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />
9
+ }
10
+
11
+ export { AspectRatio }
package/avatar.tsx CHANGED
@@ -1,53 +1,53 @@
1
- "use client";
2
-
3
- import * as React from "react";
4
- import * as AvatarPrimitive from "@radix-ui/react-avatar";
5
-
6
- import { cn } from "./lib/utils";
7
-
8
- function Avatar({
9
- className,
10
- ...props
11
- }: React.ComponentProps<typeof AvatarPrimitive.Root>) {
12
- return (
13
- <AvatarPrimitive.Root
14
- data-slot="avatar"
15
- className={cn(
16
- "relative flex size-8 shrink-0 overflow-hidden rounded-full",
17
- className,
18
- )}
19
- {...props}
20
- />
21
- );
22
- }
23
-
24
- function AvatarImage({
25
- className,
26
- ...props
27
- }: React.ComponentProps<typeof AvatarPrimitive.Image>) {
28
- return (
29
- <AvatarPrimitive.Image
30
- data-slot="avatar-image"
31
- className={cn("aspect-square size-full", className)}
32
- {...props}
33
- />
34
- );
35
- }
36
-
37
- function AvatarFallback({
38
- className,
39
- ...props
40
- }: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
41
- return (
42
- <AvatarPrimitive.Fallback
43
- data-slot="avatar-fallback"
44
- className={cn(
45
- "bg-muted flex size-full items-center justify-center rounded-full",
46
- className,
47
- )}
48
- {...props}
49
- />
50
- );
51
- }
52
-
53
- export { Avatar, AvatarImage, AvatarFallback };
1
+ "use client";
2
+
3
+ import * as React from "react";
4
+ import * as AvatarPrimitive from "@radix-ui/react-avatar";
5
+
6
+ import { cn } from "./lib/utils";
7
+
8
+ function Avatar({
9
+ className,
10
+ ...props
11
+ }: React.ComponentProps<typeof AvatarPrimitive.Root>) {
12
+ return (
13
+ <AvatarPrimitive.Root
14
+ data-slot="avatar"
15
+ className={cn(
16
+ "relative flex size-8 shrink-0 overflow-hidden rounded-full",
17
+ className,
18
+ )}
19
+ {...props}
20
+ />
21
+ );
22
+ }
23
+
24
+ function AvatarImage({
25
+ className,
26
+ ...props
27
+ }: React.ComponentProps<typeof AvatarPrimitive.Image>) {
28
+ return (
29
+ <AvatarPrimitive.Image
30
+ data-slot="avatar-image"
31
+ className={cn("aspect-square size-full", className)}
32
+ {...props}
33
+ />
34
+ );
35
+ }
36
+
37
+ function AvatarFallback({
38
+ className,
39
+ ...props
40
+ }: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
41
+ return (
42
+ <AvatarPrimitive.Fallback
43
+ data-slot="avatar-fallback"
44
+ className={cn(
45
+ "bg-muted flex size-full items-center justify-center rounded-full",
46
+ className,
47
+ )}
48
+ {...props}
49
+ />
50
+ );
51
+ }
52
+
53
+ export { Avatar, AvatarImage, AvatarFallback };
package/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";
4
-
5
- import { cn } from "./lib/utils";
6
-
7
- const badgeVariants = cva(
8
- "inline-flex items-center justify-center rounded-full 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
- );
27
-
28
- function Badge({
29
- className,
30
- variant,
31
- asChild = false,
32
- ...props
33
- }: React.ComponentProps<"span"> &
34
- VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
35
- const Comp = asChild ? Slot : "span";
36
-
37
- return (
38
- <Comp
39
- data-slot="badge"
40
- className={cn(badgeVariants({ variant }), className)}
41
- {...props}
42
- />
43
- );
44
- }
45
-
46
- export { Badge, badgeVariants };
1
+ import * as React from "react";
2
+ import { Slot } from "@radix-ui/react-slot";
3
+ import { cva, type VariantProps } from "class-variance-authority";
4
+
5
+ import { cn } from "./lib/utils";
6
+
7
+ const badgeVariants = cva(
8
+ "inline-flex items-center justify-center rounded-full 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
+ );
27
+
28
+ function Badge({
29
+ className,
30
+ variant,
31
+ asChild = false,
32
+ ...props
33
+ }: React.ComponentProps<"span"> &
34
+ VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
35
+ const Comp = asChild ? Slot : "span";
36
+
37
+ return (
38
+ <Comp
39
+ data-slot="badge"
40
+ className={cn(badgeVariants({ variant }), className)}
41
+ {...props}
42
+ />
43
+ );
44
+ }
45
+
46
+ export { Badge, badgeVariants };
package/breadcrumb.tsx CHANGED
@@ -1,109 +1,109 @@
1
- import * as React from "react"
2
- import { ChevronRight, MoreHorizontal } from "lucide-react"
3
- import { Slot } from "radix-ui"
4
-
5
- import { cn } from "./lib/utils"
6
-
7
- function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
8
- return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />
9
- }
10
-
11
- function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
12
- return (
13
- <ol
14
- data-slot="breadcrumb-list"
15
- className={cn(
16
- "flex flex-wrap items-center gap-1.5 text-sm break-words text-muted-foreground sm:gap-2.5",
17
- className
18
- )}
19
- {...props}
20
- />
21
- )
22
- }
23
-
24
- function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
25
- return (
26
- <li
27
- data-slot="breadcrumb-item"
28
- className={cn("inline-flex items-center gap-1.5", className)}
29
- {...props}
30
- />
31
- )
32
- }
33
-
34
- function BreadcrumbLink({
35
- asChild,
36
- className,
37
- ...props
38
- }: React.ComponentProps<"a"> & {
39
- asChild?: boolean
40
- }) {
41
- const Comp = asChild ? Slot.Root : "a"
42
-
43
- return (
44
- <Comp
45
- data-slot="breadcrumb-link"
46
- className={cn("transition-colors hover:text-foreground", className)}
47
- {...props}
48
- />
49
- )
50
- }
51
-
52
- function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
53
- return (
54
- <span
55
- data-slot="breadcrumb-page"
56
- role="link"
57
- aria-disabled="true"
58
- aria-current="page"
59
- className={cn("font-normal text-foreground", className)}
60
- {...props}
61
- />
62
- )
63
- }
64
-
65
- function BreadcrumbSeparator({
66
- children,
67
- className,
68
- ...props
69
- }: React.ComponentProps<"li">) {
70
- return (
71
- <li
72
- data-slot="breadcrumb-separator"
73
- role="presentation"
74
- aria-hidden="true"
75
- className={cn("[&>svg]:size-3.5", className)}
76
- {...props}
77
- >
78
- {children ?? <ChevronRight />}
79
- </li>
80
- )
81
- }
82
-
83
- function BreadcrumbEllipsis({
84
- className,
85
- ...props
86
- }: React.ComponentProps<"span">) {
87
- return (
88
- <span
89
- data-slot="breadcrumb-ellipsis"
90
- role="presentation"
91
- aria-hidden="true"
92
- className={cn("flex size-9 items-center justify-center", className)}
93
- {...props}
94
- >
95
- <MoreHorizontal className="size-4" />
96
- <span className="sr-only">More</span>
97
- </span>
98
- )
99
- }
100
-
101
- export {
102
- Breadcrumb,
103
- BreadcrumbList,
104
- BreadcrumbItem,
105
- BreadcrumbLink,
106
- BreadcrumbPage,
107
- BreadcrumbSeparator,
108
- BreadcrumbEllipsis,
109
- }
1
+ import * as React from "react"
2
+ import { ChevronRight, MoreHorizontal } from "lucide-react"
3
+ import { Slot } from "radix-ui"
4
+
5
+ import { cn } from "./lib/utils"
6
+
7
+ function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
8
+ return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />
9
+ }
10
+
11
+ function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
12
+ return (
13
+ <ol
14
+ data-slot="breadcrumb-list"
15
+ className={cn(
16
+ "flex flex-wrap items-center gap-1.5 text-sm break-words text-muted-foreground sm:gap-2.5",
17
+ className
18
+ )}
19
+ {...props}
20
+ />
21
+ )
22
+ }
23
+
24
+ function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
25
+ return (
26
+ <li
27
+ data-slot="breadcrumb-item"
28
+ className={cn("inline-flex items-center gap-1.5", className)}
29
+ {...props}
30
+ />
31
+ )
32
+ }
33
+
34
+ function BreadcrumbLink({
35
+ asChild,
36
+ className,
37
+ ...props
38
+ }: React.ComponentProps<"a"> & {
39
+ asChild?: boolean
40
+ }) {
41
+ const Comp = asChild ? Slot.Root : "a"
42
+
43
+ return (
44
+ <Comp
45
+ data-slot="breadcrumb-link"
46
+ className={cn("transition-colors hover:text-foreground", className)}
47
+ {...props}
48
+ />
49
+ )
50
+ }
51
+
52
+ function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
53
+ return (
54
+ <span
55
+ data-slot="breadcrumb-page"
56
+ role="link"
57
+ aria-disabled="true"
58
+ aria-current="page"
59
+ className={cn("font-normal text-foreground", className)}
60
+ {...props}
61
+ />
62
+ )
63
+ }
64
+
65
+ function BreadcrumbSeparator({
66
+ children,
67
+ className,
68
+ ...props
69
+ }: React.ComponentProps<"li">) {
70
+ return (
71
+ <li
72
+ data-slot="breadcrumb-separator"
73
+ role="presentation"
74
+ aria-hidden="true"
75
+ className={cn("[&>svg]:size-3.5", className)}
76
+ {...props}
77
+ >
78
+ {children ?? <ChevronRight />}
79
+ </li>
80
+ )
81
+ }
82
+
83
+ function BreadcrumbEllipsis({
84
+ className,
85
+ ...props
86
+ }: React.ComponentProps<"span">) {
87
+ return (
88
+ <span
89
+ data-slot="breadcrumb-ellipsis"
90
+ role="presentation"
91
+ aria-hidden="true"
92
+ className={cn("flex size-9 items-center justify-center", className)}
93
+ {...props}
94
+ >
95
+ <MoreHorizontal className="size-4" />
96
+ <span className="sr-only">More</span>
97
+ </span>
98
+ )
99
+ }
100
+
101
+ export {
102
+ Breadcrumb,
103
+ BreadcrumbList,
104
+ BreadcrumbItem,
105
+ BreadcrumbLink,
106
+ BreadcrumbPage,
107
+ BreadcrumbSeparator,
108
+ BreadcrumbEllipsis,
109
+ }
package/button-group.tsx CHANGED
@@ -1,83 +1,83 @@
1
- import { cva, type VariantProps } from "class-variance-authority"
2
- import { Slot } from "radix-ui"
3
-
4
- import { cn } from "./lib/utils"
5
- import { Separator } from "./separator"
6
-
7
- const buttonGroupVariants = cva(
8
- "flex w-fit items-stretch has-[>[data-slot=button-group]]:gap-2 [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
9
- {
10
- variants: {
11
- orientation: {
12
- horizontal:
13
- "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
14
- vertical:
15
- "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none",
16
- },
17
- },
18
- defaultVariants: {
19
- orientation: "horizontal",
20
- },
21
- }
22
- )
23
-
24
- function ButtonGroup({
25
- className,
26
- orientation,
27
- ...props
28
- }: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>) {
29
- return (
30
- <div
31
- role="group"
32
- data-slot="button-group"
33
- data-orientation={orientation}
34
- className={cn(buttonGroupVariants({ orientation }), className)}
35
- {...props}
36
- />
37
- )
38
- }
39
-
40
- function ButtonGroupText({
41
- className,
42
- asChild = false,
43
- ...props
44
- }: React.ComponentProps<"div"> & {
45
- asChild?: boolean
46
- }) {
47
- const Comp = asChild ? Slot.Root : "div"
48
-
49
- return (
50
- <Comp
51
- className={cn(
52
- "flex items-center gap-2 rounded-md border bg-muted px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
53
- className
54
- )}
55
- {...props}
56
- />
57
- )
58
- }
59
-
60
- function ButtonGroupSeparator({
61
- className,
62
- orientation = "vertical",
63
- ...props
64
- }: React.ComponentProps<typeof Separator>) {
65
- return (
66
- <Separator
67
- data-slot="button-group-separator"
68
- orientation={orientation}
69
- className={cn(
70
- "relative m-0! self-stretch bg-input data-[orientation=vertical]:h-auto",
71
- className
72
- )}
73
- {...props}
74
- />
75
- )
76
- }
77
-
78
- export {
79
- ButtonGroup,
80
- ButtonGroupSeparator,
81
- ButtonGroupText,
82
- buttonGroupVariants,
83
- }
1
+ import { cva, type VariantProps } from "class-variance-authority"
2
+ import { Slot } from "radix-ui"
3
+
4
+ import { cn } from "./lib/utils"
5
+ import { Separator } from "./separator"
6
+
7
+ const buttonGroupVariants = cva(
8
+ "flex w-fit items-stretch has-[>[data-slot=button-group]]:gap-2 [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
9
+ {
10
+ variants: {
11
+ orientation: {
12
+ horizontal:
13
+ "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
14
+ vertical:
15
+ "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none",
16
+ },
17
+ },
18
+ defaultVariants: {
19
+ orientation: "horizontal",
20
+ },
21
+ }
22
+ )
23
+
24
+ function ButtonGroup({
25
+ className,
26
+ orientation,
27
+ ...props
28
+ }: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>) {
29
+ return (
30
+ <div
31
+ role="group"
32
+ data-slot="button-group"
33
+ data-orientation={orientation}
34
+ className={cn(buttonGroupVariants({ orientation }), className)}
35
+ {...props}
36
+ />
37
+ )
38
+ }
39
+
40
+ function ButtonGroupText({
41
+ className,
42
+ asChild = false,
43
+ ...props
44
+ }: React.ComponentProps<"div"> & {
45
+ asChild?: boolean
46
+ }) {
47
+ const Comp = asChild ? Slot.Root : "div"
48
+
49
+ return (
50
+ <Comp
51
+ className={cn(
52
+ "flex items-center gap-2 rounded-md border bg-muted px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
53
+ className
54
+ )}
55
+ {...props}
56
+ />
57
+ )
58
+ }
59
+
60
+ function ButtonGroupSeparator({
61
+ className,
62
+ orientation = "vertical",
63
+ ...props
64
+ }: React.ComponentProps<typeof Separator>) {
65
+ return (
66
+ <Separator
67
+ data-slot="button-group-separator"
68
+ orientation={orientation}
69
+ className={cn(
70
+ "relative m-0! self-stretch bg-input data-[orientation=vertical]:h-auto",
71
+ className
72
+ )}
73
+ {...props}
74
+ />
75
+ )
76
+ }
77
+
78
+ export {
79
+ ButtonGroup,
80
+ ButtonGroupSeparator,
81
+ ButtonGroupText,
82
+ buttonGroupVariants,
83
+ }